@charset "utf-8";
/* ==========================================================================
   首页 index.css · 独立原创版式（河流主题 Hero / Bento 模块墙 / 语言轨道）
   ========================================================================== */

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;background:var(--brown-900)}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.46}
.hero .bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(33,22,16,.92) 0%,rgba(33,22,16,.62) 46%,rgba(33,22,16,.2) 100%),
  radial-gradient(circle at 80% 20%,rgba(201,106,84,.32),transparent 55%)}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding:120px 28px 80px;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center}
.hero-left{color:var(--cream-100)}
.hero-left .eyebrow{color:var(--pink-300)}
.hero-left .eyebrow::before{background:var(--pink-300)}
.hero-left h1{color:#fff;margin:18px 0 10px;line-height:1.12}
.hero-left h1 .ink-pink{color:var(--pink-300);font-style:italic;font-family:var(--f-serif)}
.hero-left h1 .wave{display:inline-block;position:relative}
.hero-left h1 .wave::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:8px;background:linear-gradient(90deg,var(--pink-400),transparent);border-radius:6px;opacity:.7}
.hero-left .lead{color:var(--cream-200);max-width:540px;margin-top:18px;font-size:1.12rem}
.hero-actions{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}
.hero-meta{display:flex;gap:34px;margin-top:46px;flex-wrap:wrap}
.hero-meta .num{font-family:var(--f-serif);font-size:2rem;font-weight:700;color:var(--pink-300);line-height:1}
.hero-meta .lbl{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-300);margin-top:8px}

/* 浮动代码卡 */
.hero-card{background:rgba(252,248,241,.06);border:1px solid rgba(231,210,180,.22);border-radius:var(--radius-lg);padding:26px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-lg);position:relative}
.hero-card .dot{display:flex;gap:7px;margin-bottom:18px}
.hero-card .dot i{width:11px;height:11px;border-radius:50%;display:block}
.hero-card .dot i:nth-child(1){background:var(--pink-400)}
.hero-card .dot i:nth-child(2){background:var(--latte)}
.hero-card .dot i:nth-child(3){background:var(--coffee-light)}
.hero-card pre{font-family:var(--f-mono);font-size:.86rem;line-height:1.85;color:var(--cream-200);white-space:pre;overflow:hidden}
.hero-card pre .k{color:var(--pink-300)}
.hero-card pre .s{color:var(--latte)}
.hero-card pre .c{color:rgba(231,210,180,.5);font-style:italic}
.hero-card pre .n{color:#e7c9a0}
.hero-card .tagline{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(231,210,180,.25);font-family:var(--f-serif);font-style:italic;color:var(--cream-200);font-size:.96rem}

/* 河流签名线 */
.river-line{position:absolute;left:0;right:0;bottom:0;z-index:1;height:120px;pointer-events:none;opacity:.5}
.river-line svg{width:100%;height:100%}

/* 滚动提示 */
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:var(--cream-300);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint .mouse{width:22px;height:34px;border:2px solid var(--cream-300);border-radius:12px;position:relative}
.scroll-hint .mouse::after{content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);width:3px;height:7px;background:var(--pink-300);border-radius:2px;animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ---------- 核心模块 Bento 墙 ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:22px}
.bento .b{position:relative;border-radius:var(--radius-lg);padding:26px;overflow:hidden;background:var(--cream-50);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.bento .b:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.bento .b .ic{width:46px;height:46px;color:var(--coffee);margin-bottom:16px}
.bento .b h3{font-size:1.16rem;margin-bottom:8px}
.bento .b p{font-size:.9rem;color:var(--brown-600);line-height:1.6}
.bento .b .more{position:absolute;right:22px;bottom:18px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-400);opacity:0;transform:translateX(-8px);transition:all .35s var(--ease)}
.bento .b:hover .more{opacity:1;transform:none}
.bento .b.lg{grid-column:span 2;grid-row:span 2}
.bento .b.wide{grid-column:span 2}
.bento .b.dark{background:var(--brown-800);color:var(--cream-100)}
.bento .b.dark h3{color:var(--cream-50)}
.bento .b.dark p{color:var(--cream-200)}
.bento .b.dark .ic{color:var(--pink-300)}
.bento .b.pink{background:linear-gradient(135deg,var(--pink-300),var(--pink-400));color:#fff}
.bento .b.pink h3,.bento .b.pink p{color:#fff}
.bento .b.pink .ic{color:#fff}
.bento .b.lg .ic{width:60px;height:60px}
.bento .b.lg h3{font-size:1.5rem}
.bento .b.lg p{font-size:1rem;max-width:340px}
.bento .b .deco{position:absolute;right:-20px;bottom:-20px;width:140px;height:140px;opacity:.08;color:var(--brown-800)}
.bento .b.dark .deco,.bento .b.pink .deco{opacity:.16;color:#fff}

/* ---------- 语言轨道条 ---------- */
.lang-track{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--cream-50);box-shadow:var(--shadow-sm)}
.lang-track .lk{padding:30px 22px;border-right:1px solid var(--line);position:relative;transition:background .35s var(--ease);text-align:center}
.lang-track .lk:last-child{border-right:0}
.lang-track .lk:hover{background:var(--brown-800)}
.lang-track .lk:hover h4,.lang-track .lk:hover span{color:var(--cream-50)}
.lang-track .lk:hover .pill{background:var(--pink-400);color:#fff}
.lang-track .lk .pill{display:inline-block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 12px;border-radius:20px;background:var(--cream-200);color:var(--coffee);margin-bottom:14px;transition:all .3s var(--ease)}
.lang-track .lk h4{font-family:var(--f-serif);font-size:1.2rem;color:var(--brown-900);margin-bottom:6px;transition:color .3s var(--ease)}
.lang-track .lk span{display:block;font-size:.82rem;color:var(--muted);transition:color .3s var(--ease)}

/* ---------- 数据带 ---------- */
.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stats-band .st{padding:20px}
.stats-band .num{font-family:var(--f-serif);font-size:2.6rem;font-weight:700;color:var(--pink-300);line-height:1}
.stats-band .num .plus{color:var(--latte);font-size:1.4rem;vertical-align:super}
.stats-band .lbl{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-200);margin-top:12px}

/* ---------- 首页新闻网格 ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.news-card{background:var(--cream-50);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.news-card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--cream-200)}
.news-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.news-card:hover .thumb img{transform:scale(1.07)}
.news-card .thumb .time{position:absolute;left:14px;bottom:14px;background:rgba(33,22,16,.78);color:var(--cream-100);font-family:var(--f-mono);font-size:.72rem;padding:5px 11px;border-radius:20px;backdrop-filter:blur(4px)}
.news-card .body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
.news-card .body h3{font-size:1.12rem;line-height:1.45;margin:10px 0 10px;color:var(--brown-900);transition:color .3s var(--ease)}
.news-card:hover .body h3{color:var(--pink-500)}
.news-card .body p{font-size:.9rem;color:var(--brown-600);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-card .body .ftr{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;font-family:var(--f-mono);font-size:.74rem;color:var(--muted)}
.news-card .body .ftr .read{color:var(--pink-400);font-weight:700}

/* ---------- CTA 横幅 ---------- */
.cta-band{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:linear-gradient(120deg,#3C2A1C,#6B4A2F);padding:60px 56px;display:grid;grid-template-columns:1.4fr .8fr;gap:40px;align-items:center;box-shadow:var(--shadow)}
.cta-band::before{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(201,106,84,.5),transparent 70%)}
.cta-band h2{color:#fff;position:relative}
.cta-band p{color:var(--cream-200);margin-top:14px;max-width:520px;position:relative}
.cta-band .actions{display:flex;gap:14px;justify-content:flex-end;position:relative;flex-wrap:wrap}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .b.lg{grid-column:span 2;grid-row:span 1}
  .bento .b.wide{grid-column:span 2}
  .lang-track{grid-template-columns:repeat(2,1fr)}
  .lang-track .lk:nth-child(2n){border-right:0}
  .lang-track .lk{border-bottom:1px solid var(--line)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .cta-band{grid-template-columns:1fr;padding:44px 36px}
  .cta-band .actions{justify-content:flex-start}
}
@media (max-width:860px){
  .hero{min-height:auto}
  .hero-inner{padding:110px 28px 60px}
  .stats-band{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .bento .b.lg,.bento .b.wide{grid-column:span 1}
  .bento .b{min-height:160px}
  .lang-track{grid-template-columns:1fr}
  .lang-track .lk{border-right:0}
  .cta-band{padding:34px 24px}
}