/* ============================================================
   知氏 Chiiss — 编辑式极简官网（openai.com 风格）
   ============================================================ */
:root{
  --ink:#0a0a0a; --ink-2:#2b2b2b; --grey:#6c6c6c; --grey-2:#9a9a9a;
  --bg:#ffffff; --cream:#f4f3ef; --cream-2:#ebe9e2; --line:#e7e4dc; --line-2:#d8d4c9;
  --ink-rgb:10,10,10;
  /* 高饱和强调色 */
  --c-blue:#1f3cff; --c-teal:#00e0a8; --c-orange:#ff4500; --c-violet:#7a14ff; --c-pink:#ff0a7e; --c-yellow:#ffd000;
  --maxw:1240px; --gut:28px;
  --r:20px; --r-lg:30px; --r-xl:40px;
  --ease:cubic-bezier(.22,.61,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t:.55s var(--ease);
  --serif:"Times New Roman",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:86px}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--ink);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ---------------- 强调色工具类 ---------------- */
.c-blue{color:var(--c-blue)} .c-teal{color:var(--c-teal)} .c-orange{color:var(--c-orange)}
.c-violet{color:var(--c-violet)} .c-pink{color:var(--c-pink)}
.eyebrow.c-blue::before{background:var(--c-blue)} .eyebrow.c-teal::before{background:var(--c-teal)}
.eyebrow.c-orange::before{background:var(--c-orange)} .eyebrow.c-violet::before{background:var(--c-violet)}
.eyebrow.c-pink::before{background:var(--c-pink)}
.eyebrow[class*="c-"]::before{width:26px;height:2px;border-radius:2px}

/* ---------------- Nav ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:transform .4s var(--ease),background .4s,border-color .4s;
  border-bottom:1px solid transparent}
.nav.solid{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(18px);border-color:var(--line)}
.nav.hide{transform:translateY(-102%)}
/* 首屏使用浅色教育场景，导航保持深色可读 */
.nav:not(.solid){background:rgba(255,255,255,.72);backdrop-filter:saturate(150%) blur(16px);border-color:rgba(18,36,56,.08)}
.nav:not(.solid) .brand{color:var(--ink)}
.nav:not(.solid) .brand .logo{filter:none}
.nav:not(.solid) .nav-mid a{color:rgba(10,10,10,.74)}
.nav:not(.solid) .nav-mid a:hover{background:rgba(10,10,10,.06)}
.nav:not(.solid) .btn.line{border-color:rgba(10,10,10,.28);color:var(--ink);background:rgba(255,255,255,.58)}
.nav:not(.solid) .btn.line:hover{background:var(--ink);color:#fff}
.nav:not(.solid) .btn.fill{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav:not(.solid) .btn.fill:hover{background:#fff;color:var(--ink)}
.nav:not(.solid) .nav-burger{border-color:rgba(10,10,10,.22)}
.nav:not(.solid) .nav-burger span{background:var(--ink)}
.nav.menu-open .nav-mid a{color:var(--ink-2)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:18px;letter-spacing:-.01em}
.brand .logo{width:30px;height:30px}
.brand b{font-weight:650}
.nav-mid{display:flex;gap:6px}
.nav-mid a{font-size:14.5px;color:var(--ink-2);padding:8px 14px;border-radius:999px;transition:background .25s,color .25s;font-weight:450}
.nav-mid a:hover{background:var(--cream)}
.nav-r{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;padding:11px 20px;border-radius:999px;
  border:1px solid var(--ink);transition:.3s var(--ease);white-space:nowrap}
.btn.fill{background:var(--ink);color:#fff}
.btn.fill:hover{background:#fff;color:var(--ink)}
.btn.line{background:transparent;color:var(--ink)}
.btn.line:hover{background:var(--ink);color:#fff}
.btn.ghost{border-color:var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.lg{padding:15px 28px;font-size:15.5px}
.btn.onlight-w{border-color:rgba(255,255,255,.45);color:#fff}
.btn.onlight-w:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn.solid-w{background:#fff;color:var(--ink);border-color:#fff}
.btn.solid-w:hover{background:transparent;color:#fff}
.nav-burger{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:none;position:relative}
.nav-burger span{position:absolute;left:11px;width:18px;height:1.5px;background:var(--ink);transition:.3s}
.nav-burger span:nth-child(1){top:16px}.nav-burger span:nth-child(2){top:22px}
.nav-burger.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.nav-burger.open span:nth-child(2){top:19px;transform:rotate(-45deg)}

/* ---------------- Hero（明亮教育规划感） ---------------- */
.hero{padding:156px 0 80px;position:relative;overflow:hidden;background:#f8f4eb;color:var(--ink)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:
  linear-gradient(90deg,rgba(248,244,235,.98) 0%,rgba(248,244,235,.92) 42%,rgba(248,244,235,.58) 72%,rgba(248,244,235,.9) 100%),
  url(../img/photos/study-7683743.jpg) right center/cover no-repeat;opacity:1}
.hero .space{display:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(248,244,235,0),#f8f4eb)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,480px);gap:48px 60px;align-items:center}
.hero .kick{grid-column:1;font-size:14px;color:#34515f;font-weight:650;letter-spacing:.02em;margin-bottom:26px;
  display:inline-flex;align-items:center;gap:10px}
.hero .kick i{width:26px;height:2px;border-radius:999px;background:#40b89f;display:inline-block;box-shadow:none;animation:none}
.hero h1{grid-column:1;color:var(--ink)}
.hero h1 em{background:linear-gradient(100deg,#167d73 0%,#315ec9 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.hero h1{font-size:clamp(42px,5.2vw,72px);line-height:1.06;letter-spacing:-.035em;font-weight:650;max-width:13ch}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400}
.hero .sub{grid-column:1;margin-top:26px;font-size:clamp(17px,1.8vw,20px);color:#42515a;max-width:46ch;line-height:1.65;font-weight:420}
.hero .acts{grid-column:1;margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.hero .btn.solid-w{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero .btn.solid-w:hover{background:#fff;color:var(--ink)}
.hero .btn.onlight-w{border-color:rgba(10,10,10,.2);color:var(--ink);background:rgba(255,255,255,.55)}
.hero .btn.onlight-w:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero-line{grid-column:1/-1;margin-top:34px;border-top:1px solid rgba(10,10,10,.12);padding-top:24px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.hl-item .n{font-size:15px;font-weight:700;color:var(--ink)}
.hl-item .d{font-size:13.5px;color:#5f676c;margin-top:4px}
.hero-preview{grid-column:2;grid-row:1 / span 4;position:relative;right:auto;top:auto;width:100%;pointer-events:none}
.mock-window{border:1px solid rgba(30,50,70,.13);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.86);
  box-shadow:0 22px 70px rgba(30,52,72,.16);backdrop-filter:blur(14px)}
.mock-top{height:48px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid rgba(30,50,70,.1);
  color:#6a747d;font-size:12px;background:rgba(255,255,255,.72)}
.mock-top span{width:8px;height:8px;border-radius:50%;background:#d2d8dd}
.mock-top b{margin-left:8px;font-weight:700;color:#26333c}
.mock-body{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;padding:14px}
.mock-panel{border:1px solid rgba(30,50,70,.1);border-radius:18px;background:#fff;padding:16px;color:var(--ink)}
.mock-panel.main{min-height:210px;background:linear-gradient(150deg,#eef8f4 0%,#e8efff 100%)}
.mock-k{font-size:12px;color:#60707a;margin-bottom:14px}
.mock-panel strong{font-size:18px;line-height:1.25;letter-spacing:-.01em}
.mock-progress{height:8px;border-radius:999px;background:rgba(30,50,70,.1);overflow:hidden;margin:24px 0 18px}
.mock-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#40b89f,#315ec9)}
.mock-mini-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(30,50,70,.08);
  color:#60707a;font-size:12px}
.mock-mini-row em{font-style:normal;color:var(--ink);font-weight:650}
.mock-stack{display:grid;gap:12px}
.mock-panel.chat{min-height:128px;background:#fdf7ed}
.mock-panel.chat b{font-size:13px}
.mock-panel.chat p{margin-top:12px;color:#5f676c;font-size:12px;line-height:1.55}
.mock-panel.steps{display:grid;gap:10px;align-content:center;min-height:94px}
.mock-panel.steps span{height:10px;border-radius:999px;background:#dfe7e8}
.mock-panel.steps span:nth-child(1){width:86%}.mock-panel.steps span:nth-child(2){width:68%}.mock-panel.steps span:nth-child(3){width:76%}

/* word reveal */
.reveal-lines span{display:inline-block;overflow:hidden;vertical-align:top}
.reveal-lines span > b{display:inline-block;font-weight:inherit;transform:translateY(110%);
  transition:transform .9s var(--ease-out)}
.reveal-lines.in span > b{transform:none}

/* ---------------- Section scaffolding ---------------- */
section{position:relative}
section,[id]{scroll-margin-top:86px}
.sec{padding:120px 0}
.sec.cream{background:var(--cream)}
.sec.ink{position:relative;overflow:hidden;background:var(--ink);color:#fff}
.sec.ink::before{content:"";position:absolute;inset:0;z-index:0;opacity:.16;
  background:url(../img/photos/tech-17485706.jpg) center/cover no-repeat}
.sec.ink .wrap{position:relative;z-index:1}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  display:flex;align-items:center;gap:12px;margin-bottom:34px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--grey-2)}
.sec.ink .eyebrow{color:var(--grey-2)}
.h2{font-size:clamp(30px,4.6vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:600;max-width:18ch}
.h2 em{font-family:var(--serif);font-style:italic;font-weight:400}
#products .h2 em{color:var(--c-violet)}
#services .h2 em{color:var(--c-teal)}
#offer .h2 em{color:var(--c-orange)}
#approach .h2 em{color:var(--c-teal)}
.lead{font-size:clamp(17px,1.8vw,20px);color:var(--ink-2);max-width:54ch;line-height:1.55;font-weight:400}
.sec.ink .lead{color:#c9c9c9}

/* statement (what we do) */
.statement .big{font-size:clamp(26px,3.6vw,46px);line-height:1.28;letter-spacing:-.02em;font-weight:500;max-width:24ch}
.statement .big u{text-decoration:none;color:var(--grey-2);transition:color .6s var(--ease)}
.statement .big.in u{color:var(--ink)}
.statement .row{display:grid;grid-template-columns:1.3fr .9fr;gap:60px;align-items:start}
.statement .row .note{font-size:15px;color:var(--grey);line-height:1.6;border-left:1px solid var(--line);padding-left:22px}
.proof-grid{display:grid;gap:14px}
.proof-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:22px 24px;box-shadow:0 18px 50px rgba(10,10,10,.04)}
.proof-card b{display:block;font-size:18px;margin-bottom:8px;letter-spacing:-.01em}
.proof-card span{display:block;color:var(--grey);font-size:14.5px;line-height:1.55}

/* ---------------- Products (tiles) ---------------- */
.prod-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:54px;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.tile{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:360px;padding:34px;display:flex;
  flex-direction:column;justify-content:space-between;color:#fff;isolation:isolate;
  background:#0a0a0a center/cover no-repeat;
  transition:transform .6s var(--ease);will-change:transform}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;transition:transform .9s var(--ease)}
.tile:hover{transform:translateY(-6px)}
.tile:hover::after{transform:scale(1.06)}
.tile .tn{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.tile h3{font-size:26px;letter-spacing:-.02em;font-weight:600;margin-bottom:10px}
.tile p{font-size:15px;line-height:1.55;opacity:.86;max-width:34ch}
.tile .arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;
  transition:.4s var(--ease);margin-top:18px}
.tile:hover .arrow{background:#fff;color:var(--ink);border-color:#fff;transform:rotate(-45deg)}
.tile.span7{grid-column:span 7}.tile.span5{grid-column:span 5}
.tile.span6{grid-column:span 6}.tile.span4{grid-column:span 4}
/* 照片背景 + 各自强调色叠层（顶部上色、底部压暗以保证文字可读） */
.tile.t-ocean{background-image:url(../img/photos/tech-17485706.jpg)}
.tile.t-ocean::after{background:linear-gradient(155deg,rgba(31,60,255,.62) 0%,rgba(20,30,150,.55) 45%,rgba(6,10,40,.88) 100%)}
.tile.t-assist{background-image:url(../img/photos/study-7683743.jpg)}
.tile.t-assist::after{background:linear-gradient(155deg,rgba(0,200,150,.55) 0%,rgba(0,140,110,.5) 45%,rgba(4,30,24,.9) 100%)}
.tile.t-learn{background-image:url(../img/photos/study-7092523.jpg)}
.tile.t-learn::after{background:linear-gradient(155deg,rgba(255,90,20,.58) 0%,rgba(220,50,0,.5) 45%,rgba(50,16,4,.9) 100%)}
.tile.t-board{background-image:url(../img/photos/library-16420457.jpg)}
.tile.t-board::after{background:linear-gradient(155deg,rgba(140,40,255,.6) 0%,rgba(100,20,200,.5) 45%,rgba(28,8,60,.9) 100%)}
.tile .glow{display:none}

/* ---------------- Services (editorial list) ---------------- */
.svc{border-top:1px solid var(--line)}
.svc-item{display:grid;grid-template-columns:80px minmax(220px,.9fr) minmax(420px,1.6fr) 60px;gap:24px;align-items:center;
  padding:34px 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease);position:relative}
.svc-item::before{content:"";position:absolute;left:-100%;right:-100%;top:0;bottom:0;background:var(--cream);
  z-index:-1;opacity:0;transition:opacity .4s}
.svc-item:hover{padding-left:14px}
.svc-item:hover::before{opacity:1}
.svc-item .idx{font-size:14px;color:var(--grey-2);font-variant-numeric:tabular-nums}
.svc-item h4{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em}
.svc-copy p{font-size:15px;color:var(--grey);line-height:1.55}
.svc-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.svc-meta span{font-size:12.5px;color:var(--ink-2);background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.svc-meta b{font-weight:650;margin-right:5px;color:var(--ink)}
.svc-item .go{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;
  justify-self:end;transition:.4s var(--ease)}
.svc-item:hover .go{background:var(--ink);color:#fff;border-color:var(--ink);transform:rotate(-45deg)}

/* ---------------- Offerings (two big) ---------------- */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ocard{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:42px;min-height:420px;display:flex;flex-direction:column;
  color:#fff;background:#0a0a0a center/cover no-repeat;transition:transform .5s var(--ease)}
.ocard::after{content:"";position:absolute;inset:0;z-index:0;transition:transform .9s var(--ease);
  background:linear-gradient(160deg,rgba(10,14,34,.34) 0%,rgba(8,8,16,.5) 45%,rgba(6,6,12,.86) 100%)}
.ocard > *{position:relative;z-index:1}
.ocard:hover{transform:translateY(-6px)}
.ocard:hover::after{transform:scale(1.06)}
.o-course{background-image:url(../img/photos/tutor-5311406.jpg)}
.o-expert{background-image:url(../img/photos/tutor-6929206.jpg)}
.ocard .oi{width:54px;height:54px;border-radius:14px;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;margin-bottom:auto;backdrop-filter:blur(4px)}
.ocard h3{font-size:28px;font-weight:600;letter-spacing:-.02em;margin:28px 0 12px}
.ocard p{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.86)}
.ocard .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ocard .tags span{font-size:12.5px;padding:5px 12px;border:1px solid rgba(255,255,255,.34);border-radius:999px;color:#fff;backdrop-filter:blur(4px)}

/* ---------------- Approach (ink) ---------------- */
.appr{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.appr-list{display:grid;gap:2px}
.appr-row{padding:26px 0;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:40px 1fr;gap:20px}
.appr-row:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.appr-row .ai{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--grey-2)}
.appr-row h4{font-size:20px;font-weight:600;margin-bottom:6px}
.appr-row p{font-size:14.5px;color:#b4b4b4;line-height:1.55}

/* ---------------- Process ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.step{padding:38px 26px 38px 0;border-right:1px solid var(--line);transition:background .4s}
.step:last-child{border-right:0}
.step:hover{background:var(--cream)}
.step .sn{font-size:13px;color:var(--grey-2);font-variant-numeric:tabular-nums;margin-bottom:50px}
.step h4{font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.step p{font-size:14px;color:var(--grey);line-height:1.55}

/* ---------------- Stats count ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat .num{font-size:clamp(40px,6vw,76px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.stat .lbl{font-size:14.5px;color:var(--grey);margin-top:14px}

/* ---------------- CTA ---------------- */
.cta{position:relative;overflow:hidden;text-align:left;padding:130px 0;color:#fff;
  background:#0a0a0a center/cover no-repeat;background-image:url(../img/photos/campus-396301.jpg)}
.cta::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(rgba(8,10,24,.62),rgba(6,8,18,.78))}
.cta .wrap{position:relative;z-index:1}
.cta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.cta h2{font-size:clamp(34px,6vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:600;max-width:18ch;margin:0;color:#fff}
.cta h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:#b9a3ff}
.cta-copy p{margin-top:24px;color:rgba(255,255,255,.82);font-size:18px;line-height:1.65;max-width:34em}
.consult-card{border:1px solid rgba(255,255,255,.22);border-radius:28px;background:rgba(7,10,28,.58);padding:30px;
  backdrop-filter:blur(18px);box-shadow:0 30px 90px rgba(0,0,0,.35)}
.consult-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px}
.consult-head span{font-size:13px;color:rgba(255,255,255,.62)}
.consult-head b{font-size:20px;letter-spacing:-.01em}
.consult-fields{display:grid;gap:10px;margin-bottom:26px}
.consult-fields span{display:block;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.08);
  padding:14px 16px;color:rgba(255,255,255,.76);font-size:14px}
.cta .acts{margin-top:0;display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap}

/* ---------------- Footer ---------------- */
.foot{background:var(--ink);color:#fff;padding:90px 0 36px}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-top .brand{color:#fff;font-size:22px;margin-bottom:18px}
.foot-top p{font-size:14.5px;color:#a8a8a8;max-width:34ch;line-height:1.6}
.foot h5{font-size:13px;color:#8a8a8a;letter-spacing:.06em;text-transform:uppercase;margin-bottom:18px;font-weight:500}
.foot ul{list-style:none;display:grid;gap:12px}
.foot ul a{font-size:14.5px;color:#cfcfcf;transition:color .25s}
.foot ul a:hover{color:#fff}
.foot-bot{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#7c7c7c}
.foot-mark{font-size:clamp(60px,18vw,230px);font-weight:600;letter-spacing:-.05em;line-height:.9;color:#fff;
  opacity:.04;text-align:center;padding:30px 0 0;user-select:none}

/* ---------------- reveal ---------------- */
.r{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.r.in{opacity:1;transform:none}
.r-2{transition-delay:.08s}.r-3{transition-delay:.16s}.r-4{transition-delay:.24s}

/* ---------------- Responsive ---------------- */
@media(max-width:1000px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .kick,.hero h1,.hero .sub,.hero .acts,.hero-preview{grid-column:1}
  .hero-preview{grid-row:auto;position:relative;top:auto;right:auto;width:100%;max-width:620px;margin-top:42px}
  .tile.span7,.tile.span5,.tile.span6,.tile.span4{grid-column:span 12}
  .tile{min-height:300px}
  .statement .row{grid-template-columns:1fr;gap:30px}
  .appr{grid-template-columns:1fr;gap:40px}
  .offer{grid-template-columns:1fr}
  .svc-item{grid-template-columns:54px 1fr;align-items:start}
  .svc-copy{grid-column:2}
  .svc-item .go{grid-column:2;justify-self:start}
  .cta-grid{grid-template-columns:1fr;gap:36px}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2n){border-right:0}
  .stats{grid-template-columns:1fr 1fr;gap:40px 24px}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  :root{--gut:20px}
  .nav-mid{display:none}
  .nav-r .btn.line{display:none}
  .nav-burger{display:block}
  .nav.menu-open .nav-mid{display:flex;position:fixed;inset:70px 0 auto 0;flex-direction:column;gap:4px;
    background:#fff;border-bottom:1px solid var(--line);padding:18px 20px}
  .sec{padding:80px 0}
  .hero{padding:130px 0 60px}
  .hero-line{grid-template-columns:1fr 1fr;gap:20px}
  .svc-item{grid-template-columns:40px 1fr;gap:6px 16px}
  .svc-meta,.svc-item .go{display:none}
  .mock-body{grid-template-columns:1fr}
  .consult-card{padding:22px;border-radius:22px}
  .consult-head{display:block}
  .consult-head b{display:block;margin-top:6px}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line)}
  .stats{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:auto}
  .cursor,.cursor-ring{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .r{opacity:1;transform:none}
}

/* ============================================================
   2026-07 Google for Education inspired refresh
   明亮教育感、四色点缀、轻动效、无首屏重叠
   ============================================================ */
:root{
  --g-blue:#1a73e8;
  --g-red:#ea4335;
  --g-yellow:#fbbc04;
  --g-green:#34a853;
  --edu-text:#202124;
  --edu-muted:#5f6368;
  --edu-line:#dadce0;
  --edu-blue-50:#e8f0fe;
  --edu-green-50:#e6f4ea;
  --edu-yellow-50:#fef7e0;
  --edu-red-50:#fce8e6;
}
body{color:var(--edu-text);background:#fff;font-family:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif}
.wrap{max-width:1200px}
.nav,.nav:not(.solid),.nav.solid{
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--edu-line);
  backdrop-filter:saturate(180%) blur(14px);
}
.nav-in{height:66px}
.brand{
  font-weight:500;
  color:var(--edu-text)!important;
  position:relative;
}
.brand .logo{display:none}
.brand::before{
  content:"";
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:10px;
  background:linear-gradient(135deg,#1a73e8 0%,#12b5a6 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 8px 18px rgba(26,115,232,.18);
}
.brand::after{
  content:"";
  position:absolute;
  left:8px;
  top:24px;
  width:14px;
  height:2px;
  border-radius:999px;
  background:#fff;
  box-shadow:4px -5px 0 -1px rgba(255,255,255,.92),8px 3px 0 -1px rgba(255,255,255,.72);
}
.nav-mid a{color:#3c4043!important;border-radius:6px;font-size:15px}
.nav-mid a:hover{background:#f1f3f4}
.btn{border-radius:999px;font-weight:600;box-shadow:none}
.btn.fill,.nav:not(.solid) .btn.fill{background:var(--g-blue);border-color:var(--g-blue);color:#fff}
.btn.fill:hover,.nav:not(.solid) .btn.fill:hover{background:#185abc;color:#fff;border-color:#185abc}
.btn.line,.nav:not(.solid) .btn.line{background:#fff;border-color:var(--edu-line);color:#3c4043}
.btn.line:hover,.nav:not(.solid) .btn.line:hover{background:#f8fbff;color:var(--g-blue);border-color:#c6dafc}

.hero{
  min-height:760px;
  padding:112px 0 0;
  background:#fbfcff;
  color:var(--edu-text);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:66px 0 auto;
  height:470px;
  z-index:0;
  display:block;
  opacity:.9;
  background:
    linear-gradient(115deg,rgba(26,115,232,.08) 0 1px,transparent 1px 34%),
    linear-gradient(155deg,transparent 0 58%,rgba(52,168,83,.08) 58% 58.5%,transparent 58.5%),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(60,64,67,.045) 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(60,64,67,.038) 48px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 72%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 72%,transparent 100%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-220px;
  width:min(1120px,90vw);
  height:430px;
  transform:translateX(-50%);
  border-radius:44px 44px 0 0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.38)),
    url(../img/photos/campus-396301.jpg) center/cover no-repeat;
  box-shadow:0 -18px 60px rgba(60,64,67,.11);
  opacity:.72;
  pointer-events:none;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
  gap:0;
}
.hero .kick{
  grid-column:1;
  margin:0 0 26px;
  color:#174ea6;
  font-size:15px;
  font-weight:600;
  padding:9px 17px 9px 12px;
  border-radius:999px;
  background:rgba(232,240,254,.9);
  border:1px solid #d2e3fc;
  box-shadow:0 8px 22px rgba(26,115,232,.08);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.hero .kick i{
  display:block;
  width:22px;
  height:22px;
  border-radius:7px;
  background:
    linear-gradient(135deg,#1a73e8,#34a853);
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38);
}
.hero .kick i::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  top:10px;
  height:2px;
  border-radius:999px;
  background:#fff;
  box-shadow:4px -4px 0 -1px #fff,8px 3px 0 -1px #fff;
}
.hero-route{
  grid-column:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 0 30px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.hero-route span{
  min-width:56px;
  font-size:14px;
  line-height:1;
  color:#174ea6;
  font-weight:700;
  padding:9px 12px;
  border:1px solid #d2e3fc;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  box-shadow:0 8px 20px rgba(26,115,232,.06);
}
.hero-route span:nth-child(2){color:#0b8043;border-color:#ceead6}
.hero-route span:nth-child(3){color:#a05b00;border-color:#feefc3}
.hero-route span:nth-child(4){color:#c5221f;border-color:#fad2cf}
.hero h1{
  grid-column:1;
  max-width:980px;
  font-size:clamp(48px,6.8vw,84px);
  line-height:1.07;
  letter-spacing:-.035em;
  font-weight:760;
  color:var(--edu-text);
}
.hero h1 em{
  font-family:inherit;
  font-style:normal;
  font-weight:700;
  background:linear-gradient(90deg,var(--g-blue),var(--g-green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero .sub{
  grid-column:1;
  margin-top:28px;
  max-width:720px;
  color:var(--edu-muted);
  font-size:clamp(18px,2vw,22px);
  line-height:1.72;
}
.hero .acts{
  grid-column:1;
  margin-top:34px;
  justify-content:center;
}
.hero .btn.solid-w{background:var(--g-blue);border-color:var(--g-blue);color:#fff}
.hero .btn.solid-w:hover{background:#185abc;color:#fff;border-color:#185abc;transform:translateY(-2px)}
.hero .btn.onlight-w{background:#fff;border-color:var(--edu-line);color:var(--g-blue)}
.hero .btn.onlight-w:hover{background:#f8fbff;border-color:#c6dafc;color:#185abc;transform:translateY(-2px)}
.hero-preview{
  grid-column:1;
  grid-row:auto;
  width:min(940px,88vw);
  margin-top:58px;
  position:relative;
  z-index:3;
}
.hero-preview::before{
  content:"目标路线同步";
  position:absolute;
  left:30px;
  top:-18px;
  z-index:2;
  padding:8px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--edu-line);
  color:#174ea6;
  font-size:12px;
  font-weight:700;
  box-shadow:0 10px 24px rgba(60,64,67,.1);
}
.hero-preview::before{content:"Ocean AI 实机界面"}
.ocean-screen{
  margin:0;
  overflow:hidden;
  border:1px solid var(--edu-line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 70px rgba(60,64,67,.16);
}
.ocean-screen img{
  display:block;
  width:100%;
  height:auto;
}
.hero-shot{
  border-radius:24px;
  box-shadow:0 28px 86px rgba(60,64,67,.17);
}
.hero-shot img{
  aspect-ratio:1700 / 849;
  object-fit:cover;
  object-position:left top;
}
.mock-window{
  border-radius:22px;
  border:1px solid var(--edu-line);
  background:#fff;
  box-shadow:0 22px 70px rgba(60,64,67,.16);
  transform:translateY(0);
  animation:eduFloat 6s ease-in-out infinite;
}
.mock-top{
  height:56px;
  background:#fff;
  border-color:var(--edu-line);
  color:var(--edu-muted);
  padding:0 20px;
  gap:12px;
}
.mock-top::before{
  content:"";
  width:28px;
  height:28px;
  border-radius:10px;
  background:
    linear-gradient(135deg,#e8f0fe,#e6f4ea);
  border:1px solid #d2e3fc;
  box-shadow:inset 0 -8px 14px rgba(26,115,232,.08);
}
.mock-top span:nth-child(1){background:var(--g-red)}
.mock-top span:nth-child(2){background:var(--g-yellow)}
.mock-top span:nth-child(3){background:var(--g-green)}
.mock-top span{display:none!important}
.mock-top b{
  margin-left:0!important;
  display:flex;
  align-items:center;
  gap:10px;
  color:#26333c;
}
.mock-top b::after{
  content:"目标 · 课程 · 申请";
  color:#6f7782;
  font-size:12px;
  font-weight:600;
}
.mock-body{grid-template-columns:1.2fr .8fr;gap:16px;padding:18px;background:linear-gradient(180deg,#f8fbff,#ffffff)}
.mock-panel{border-color:#e8eaed;background:#fff;color:var(--edu-text);box-shadow:0 1px 2px rgba(60,64,67,.08)}
.mock-panel.main{
  background:
    linear-gradient(135deg,rgba(232,240,254,.92) 0%,rgba(230,244,234,.92) 100%);
  position:relative;
  overflow:hidden;
}
.mock-panel.main::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  height:34px;
  border-bottom:2px solid rgba(26,115,232,.18);
  border-right:2px solid rgba(52,168,83,.18);
  border-radius:0 0 18px 0;
  pointer-events:none;
}
.mock-k,.mock-mini-row,.mock-panel.chat p{color:var(--edu-muted)}
.mock-progress{background:#dfe7f8}
.mock-progress i{background:linear-gradient(90deg,var(--g-blue),var(--g-green))}
.mock-panel.chat{background:#fff7df}
.mock-panel.steps span{background:#dfe3ea}
.hero-line{
  grid-column:1;
  position:relative;
  z-index:3;
  width:min(1040px,88vw);
  margin-top:34px;
  padding:22px 0 0;
  border-color:var(--edu-line);
}
.hl-item .n{color:var(--edu-text);font-weight:700}
.hl-item .d{color:var(--edu-muted)}

.sec{padding:104px 0}
.sec.cream,.statement{background:#fff}
.eyebrow{color:var(--edu-muted);letter-spacing:.06em;text-transform:none}
.eyebrow::before{height:4px;width:28px;border-radius:999px;background:var(--g-blue)}
.eyebrow.c-blue::before{background:var(--g-blue)}
.eyebrow.c-teal::before{background:var(--g-green)}
.eyebrow.c-orange::before{background:var(--g-yellow)}
.eyebrow.c-violet::before{background:var(--g-blue)}
.eyebrow.c-pink::before{background:var(--g-red)}
.h2{font-size:clamp(34px,4.6vw,60px);line-height:1.12;color:var(--edu-text)}
.h2 em{font-family:inherit;font-style:normal;color:var(--g-blue)}
#products .h2 em{color:var(--g-blue)}
#services .h2 em{color:var(--g-green)}
#offer .h2 em{color:var(--g-red)}
#approach .h2 em{color:var(--g-blue)}
.lead{color:var(--edu-muted)}

.statement .big{font-size:clamp(28px,3.2vw,44px);line-height:1.35}
.statement .big u{color:var(--g-blue)}
.proof-card{
  border-color:var(--edu-line);
  border-radius:24px;
  box-shadow:0 2px 8px rgba(60,64,67,.08);
  transition:transform .28s ease,box-shadow .28s ease;
}
.proof-card:nth-child(1){background:var(--edu-blue-50)}
.proof-card:nth-child(2){background:var(--edu-green-50)}
.proof-card:nth-child(3){background:var(--edu-yellow-50)}
.proof-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(60,64,67,.14)}

.tiles{gap:24px}
.tile{
  color:var(--edu-text);
  background:#fff;
  border:1px solid var(--edu-line);
  border-radius:28px;
  box-shadow:0 2px 8px rgba(60,64,67,.08);
  min-height:320px;
}
.tile::after{opacity:.86}
.tile.t-ocean::after{background:linear-gradient(160deg,rgba(232,240,254,.95),rgba(255,255,255,.72))}
.tile.t-assist::after{background:linear-gradient(160deg,rgba(230,244,234,.95),rgba(255,255,255,.72))}
.tile.t-learn::after{background:linear-gradient(160deg,rgba(254,247,224,.96),rgba(255,255,255,.72))}
.tile.t-board::after{background:linear-gradient(160deg,rgba(252,232,230,.95),rgba(255,255,255,.72))}
.tile .tn{opacity:1;color:var(--edu-muted)}
.tile h3{color:var(--edu-text)}
.tile p{opacity:1;color:var(--edu-muted)}
.tile .arrow{border-color:var(--edu-line);background:#fff;color:var(--g-blue)}
.tile:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(60,64,67,.14)}
.tile:hover .arrow{background:var(--g-blue);color:#fff;border-color:var(--g-blue)}

.ocean-showcase{
  position:relative;
  margin:44px 0 34px;
  padding:34px;
  min-height:570px;
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.5fr);
  gap:34px;
  align-items:center;
  overflow:hidden;
  border:1px solid var(--edu-line);
  border-radius:32px;
  background:
    radial-gradient(circle at 82% 8%,rgba(26,115,232,.12),transparent 32%),
    radial-gradient(circle at 58% 92%,rgba(103,58,183,.1),transparent 30%),
    linear-gradient(135deg,#f8fbff 0%,#ffffff 50%,#eef7f4 100%);
  box-shadow:0 18px 50px rgba(60,64,67,.1);
}
.ocean-showcase::before{
  content:"";
  position:absolute;
  inset:auto -12% -36% 34%;
  height:280px;
  border-radius:50%;
  background:linear-gradient(90deg,rgba(26,115,232,.08),rgba(52,168,83,.1));
  filter:blur(10px);
}
.ocean-copy{
  position:relative;
  z-index:4;
  max-width:360px;
}
.ocean-copy span{
  display:inline-flex;
  margin-bottom:18px;
  padding:8px 12px;
  border-radius:999px;
  color:#174ea6;
  background:#e8f0fe;
  font-size:13px;
  font-weight:700;
}
.ocean-copy h3{
  margin:0;
  color:var(--edu-text);
  font-size:clamp(26px,3vw,38px);
  line-height:1.18;
  letter-spacing:-.02em;
}
.ocean-copy p{
  margin-top:18px;
  color:var(--edu-muted);
  font-size:16px;
  line-height:1.72;
}
.ocean-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:24px;
}
.ocean-metrics b{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border:1px solid var(--edu-line);
  border-radius:16px;
  background:rgba(255,255,255,.78);
  color:#273142;
  font-size:14px;
  box-shadow:0 8px 20px rgba(60,64,67,.06);
}
.ocean-metrics b::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#1a73e8;
}
.ocean-metrics b:nth-child(2)::before{background:#34a853}
.ocean-metrics b:nth-child(3)::before{background:#673ab7}
.ocean-metrics b:nth-child(4)::before{background:#fbbc04}
.ocean-stage{
  position:relative;
  z-index:3;
  min-height:490px;
}
.ocean-stage .ocean-screen{
  position:absolute;
  transition:transform .35s ease,box-shadow .35s ease;
}
.screen-plan{
  left:2%;
  top:88px;
  width:74%;
  z-index:1;
  filter:saturate(.95);
}
.screen-assistant{
  right:2%;
  top:26px;
  width:50%;
  z-index:3;
}
.screen-login{
  left:7%;
  bottom:18px;
  width:20%;
  z-index:4;
  border-radius:28px;
}
.screen-assistant img{
  aspect-ratio:1.5 / .92;
  object-fit:cover;
  object-position:center top;
}
.screen-login img{
  aspect-ratio:.86 / 1;
  object-fit:cover;
  object-position:center top;
}
.ocean-showcase:hover .screen-plan{transform:translateY(-6px)}
.ocean-showcase:hover .screen-assistant{transform:translateY(-12px)}
.ocean-showcase:hover .screen-login{transform:translateY(-8px)}
.product-orbit{
  position:absolute;
  z-index:6;
  border:1px solid rgba(218,220,224,.88);
  border-radius:18px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  box-shadow:0 14px 28px rgba(60,64,67,.1);
}
.product-orbit small{
  display:block;
  color:#6f7782;
  font-size:12px;
  font-weight:700;
  margin-bottom:8px;
}
.product-orbit strong{
  display:block;
  color:#202124;
  font-size:15px;
  line-height:1.34;
}
.orbit-goal{
  left:2%;
  top:14px;
  width:220px;
  padding:16px;
}
.orbit-goal i{
  display:block;
  height:8px;
  margin-top:14px;
  border-radius:999px;
  background:#e8f0fe;
  overflow:hidden;
}
.orbit-goal em{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#1a73e8,#34a853);
}
.orbit-ai{
  right:2%;
  bottom:24px;
  width:244px;
  padding:16px;
}
.orbit-ai p{
  margin-top:8px;
  color:#6f7782;
  font-size:12px;
  line-height:1.55;
}
.orbit-stack{
  left:34%;
  bottom:6px;
  display:flex;
  gap:8px;
  padding:10px;
}
.orbit-stack span{
  padding:8px 10px;
  border-radius:999px;
  background:#f8fbff;
  color:#174ea6;
  font-size:12px;
  font-weight:700;
}
.orbit-stack span:nth-child(2){background:#f3e8fd;color:#673ab7}
.orbit-stack span:nth-child(3){background:#fff7df;color:#a05b00}
.learning-path{
  position:absolute;
  left:15%;
  right:14%;
  top:58px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid rgba(218,220,224,.75);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  color:#5f6b7a;
  font-size:12px;
  font-weight:700;
  box-shadow:0 10px 28px rgba(60,64,67,.08);
}
.learning-path i{
  flex:1;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#1a73e8,#34a853);
  opacity:.42;
}

.svc{border-top:0;display:grid;gap:16px}
.svc-item{
  grid-template-columns:64px minmax(220px,.9fr) minmax(420px,1.6fr) 54px;
  border:1px solid var(--edu-line);
  border-radius:24px;
  padding:24px;
  background:#fff;
  box-shadow:0 1px 3px rgba(60,64,67,.08);
}
.svc-item::before{display:none}
.svc-item:hover{padding-left:24px;transform:translateY(-3px);box-shadow:0 12px 28px rgba(60,64,67,.12)}
.svc-item .idx{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--edu-blue-50);color:var(--g-blue)}
.svc-item:nth-child(2) .idx{background:var(--edu-green-50);color:var(--g-green)}
.svc-item:nth-child(3) .idx{background:var(--edu-yellow-50);color:#a05b00}
.svc-item:nth-child(4) .idx{background:var(--edu-red-50);color:var(--g-red)}
.svc-item h4{font-size:clamp(22px,2.3vw,28px)}
.svc-meta span{background:#f8fafd;border-color:var(--edu-line);color:#3c4043}
.svc-item .go{border-color:var(--edu-line);color:var(--g-blue);background:#fff}
.svc-item:hover .go{background:var(--g-blue);border-color:var(--g-blue);color:#fff}

.ocard{
  color:var(--edu-text);
  border:1px solid var(--edu-line);
  border-radius:28px;
  box-shadow:0 2px 8px rgba(60,64,67,.08);
}
.ocard::after{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.92))}
.ocard h3{color:var(--edu-text)}
.ocard p{color:#3c4043}
.ocard .oi{background:#fff;color:var(--g-blue);border-color:var(--edu-line)}
.ocard .tags span{background:#fff;color:#3c4043;border-color:var(--edu-line)}
.ocard:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(60,64,67,.14)}

.sec.ink{
  background:var(--edu-blue-50);
  color:var(--edu-text);
}
.sec.ink::before{display:none}
.sec.ink .lead{color:var(--edu-muted)}
.sec.ink .eyebrow{color:var(--edu-muted)}
.appr-row{border-color:#c9d7f5}
.appr-row:last-child{border-color:#c9d7f5}
.appr-row .ai{color:var(--g-blue);font-family:inherit;font-style:normal;font-weight:700}
.appr-row p{color:var(--edu-muted)}

.step:hover{background:var(--edu-blue-50)}
.stat .lbl{color:var(--edu-muted)}

.cta{
  background:#fff;
  color:var(--edu-text);
  padding:112px 0;
}
.cta::after{
  background:linear-gradient(110deg,rgba(232,240,254,.96),rgba(230,244,234,.9));
}
.cta h2{color:var(--edu-text)}
.cta h2 em{font-family:inherit;font-style:normal;color:var(--g-blue)}
.cta-copy p{color:var(--edu-muted)}
.consult-card{
  background:#fff;
  color:var(--edu-text);
  border-color:var(--edu-line);
  box-shadow:0 18px 44px rgba(60,64,67,.14);
}
.consult-head span,.consult-fields span{color:var(--edu-muted)}
.consult-fields span{background:#f8fbff;border-color:var(--edu-line)}
.cta .btn.solid-w{background:var(--g-blue);border-color:var(--g-blue);color:#fff}
.cta .btn.onlight-w{background:#fff;color:var(--g-blue);border-color:#c6dafc}
.foot{background:#f8fafd;color:var(--edu-text)}
.foot-top{border-color:var(--edu-line)}
.foot-top .brand{color:var(--edu-text)}
.foot-top p,.foot h5,.foot ul a,.foot-bot{color:var(--edu-muted)}
.foot ul a:hover{color:var(--g-blue)}
.foot-mark{color:var(--g-blue);opacity:.06}

.r{transform:translateY(22px)}
.r.in{animation:eduRise .7s cubic-bezier(.2,.8,.2,1) both}
.reveal-lines span > b{transition:transform .75s cubic-bezier(.2,.8,.2,1)}
@keyframes eduRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes eduFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@media(max-width:1000px){
  .hero{min-height:auto;padding:132px 0 64px}
  .hero .wrap{grid-template-columns:1fr;text-align:left;justify-items:start}
  .hero h1{font-size:clamp(42px,11vw,62px);max-width:9.5ch}
  .hero .acts{justify-content:flex-start}
  .hero-route{flex-wrap:wrap;justify-content:flex-start}
  .hero-preview{width:100%;margin-top:42px}
  .hero-line{width:100%;grid-template-columns:1fr 1fr}
  .ocean-showcase{grid-template-columns:1fr;min-height:auto;padding:28px}
  .ocean-copy{max-width:620px}
  .ocean-stage{min-height:auto;display:grid;gap:18px}
  .ocean-stage .ocean-screen{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%}
  .product-orbit,.learning-path{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;z-index:5}
  .learning-path{order:-1}
  .orbit-stack{justify-content:flex-start}
  .screen-login{max-width:360px}
}
@media(max-width:680px){
  .nav:not(.solid),.nav.solid{background:#fff}
  .hero::before{inset:58px 0 auto;height:360px}
  .hero h1{font-size:42px;line-height:1.12}
  .hero .sub{font-size:17px}
  .hero-route{gap:8px;padding:8px 10px}
  .hero-route i{width:22px}
  .mock-top b::after{display:none}
  .hero-preview::before{left:18px}
  .hero-shot img{aspect-ratio:1.22 / 1;object-position:left top}
  .ocean-showcase{margin:34px 0 26px;padding:20px;border-radius:24px}
  .ocean-copy h3{font-size:28px}
  .ocean-metrics{grid-template-columns:1fr 1fr}
  .product-orbit{padding:14px;border-radius:16px}
  .learning-path{flex-wrap:wrap;border-radius:18px}
  .learning-path i{width:22px;flex:0 0 22px}
  .screen-login{max-width:260px}
  .mock-body{grid-template-columns:1fr}
  .svc-item{grid-template-columns:44px 1fr;padding:20px}
  .svc-item:hover{padding-left:20px}
  .svc-copy{grid-column:2}
  .cta{padding:84px 0}
}

/* ---------------- chiiss brand guideline override ---------------- */
:root{
  --brand-blue:#1F3CFF;
  --brand-ink:#0A0F1A;
  --brand-paper:#F7F9FC;
  --brand-line:#EAECF1;
  --brand-muted:#9AA3B0;
  --brand-slate:#525E70;
  --g-blue:var(--brand-blue);
  --g-red:var(--brand-ink);
  --g-yellow:var(--brand-muted);
  --g-green:var(--brand-slate);
  --edu-text:var(--brand-ink);
  --edu-muted:var(--brand-slate);
  --edu-line:var(--brand-line);
  --edu-blue-50:var(--brand-paper);
  --edu-green-50:var(--brand-paper);
  --edu-yellow-50:var(--brand-paper);
  --edu-red-50:var(--brand-paper);
}
body{
  color:var(--brand-ink);
  background:#fff;
  font-family:Poppins,"Source Han Sans SC","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
::selection{background:var(--brand-blue);color:#fff}
.nav,.nav:not(.solid),.nav.solid{
  background:rgba(255,255,255,.96);
  border-color:var(--brand-line);
  backdrop-filter:saturate(180%) blur(14px);
}
.brand{
  gap:10px;
  color:var(--brand-ink)!important;
  font-weight:700;
  letter-spacing:-.03em;
}
.brand .logo{
  display:block;
  width:30px;
  height:30px;
  border-radius:0;
}
.brand::before,.brand::after{display:none!important}
.brand span{
  font-size:20px;
  line-height:1;
  text-transform:lowercase;
}
.nav-mid a{
  color:var(--brand-slate)!important;
  border-radius:8px;
  font-weight:600;
}
.nav-mid a:hover{
  background:var(--brand-paper);
  color:var(--brand-ink)!important;
}
.btn.fill,.nav:not(.solid) .btn.fill,
.hero .btn.solid-w,.cta .btn.solid-w{
  background:var(--brand-blue);
  border-color:var(--brand-blue);
  color:#fff;
}
.btn.fill:hover,.nav:not(.solid) .btn.fill:hover,
.hero .btn.solid-w:hover,.cta .btn.solid-w:hover{
  background:#1730d6;
  border-color:#1730d6;
  color:#fff;
}
.btn.line,.nav:not(.solid) .btn.line,
.hero .btn.onlight-w,.cta .btn.onlight-w{
  background:#fff;
  border-color:var(--brand-line);
  color:var(--brand-ink);
}
.btn.line:hover,.nav:not(.solid) .btn.line:hover,
.hero .btn.onlight-w:hover,.cta .btn.onlight-w:hover{
  border-color:var(--brand-blue);
  color:var(--brand-blue);
  background:var(--brand-paper);
}
.hero{
  background:#fff;
}
.hero::before{
  background:
    linear-gradient(115deg,rgba(31,60,255,.055) 0 1px,transparent 1px 34%),
    repeating-linear-gradient(0deg,transparent 0 47px,rgba(10,15,26,.035) 48px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(10,15,26,.032) 48px);
}
.hero::after{
  opacity:.42;
  filter:grayscale(1);
}
.hero h1{
  color:var(--brand-ink);
  letter-spacing:-.04em;
}
.hero h1 em,.h2 em,.cta h2 em{
  color:var(--brand-blue);
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
}
.hero .sub,.lead,.tile p,.statement .big,.proof-card span,.svc-copy p,.svc-meta span,.ocard p{
  color:var(--brand-slate);
}
.hero-preview::before,.ocean-copy span{
  color:var(--brand-blue);
  background:var(--brand-paper);
  border-color:var(--brand-line);
}
.ocean-screen,.hero-shot,.ocean-showcase,.tile,.proof-card,.svc-item,.ocard,.consult-card,.product-orbit{
  border-color:var(--brand-line);
}
.ocean-showcase{
  background:
    radial-gradient(circle at 82% 8%,rgba(31,60,255,.1),transparent 32%),
    linear-gradient(135deg,#fff 0%,var(--brand-paper) 100%);
}
.ocean-showcase::before{
  background:linear-gradient(90deg,rgba(31,60,255,.06),rgba(10,15,26,.04));
}
.ocean-metrics b{
  background:#fff;
  border-color:var(--brand-line);
  color:var(--brand-ink);
}
.ocean-metrics b::before,
.ocean-metrics b:nth-child(2)::before,
.ocean-metrics b:nth-child(3)::before,
.ocean-metrics b:nth-child(4)::before{
  border-radius:4px;
  background:var(--brand-blue);
}
.orbit-goal i,.mock-progress{background:var(--brand-line)}
.orbit-goal em,.mock-progress i,.learning-path i{
  background:var(--brand-blue);
}
.orbit-stack span,
.orbit-stack span:nth-child(2),
.orbit-stack span:nth-child(3){
  background:var(--brand-paper);
  color:var(--brand-ink);
}
.eyebrow{color:var(--brand-slate)}
.eyebrow::before,
.eyebrow.c-blue::before,
.eyebrow.c-teal::before,
.eyebrow.c-orange::before,
.eyebrow.c-violet::before,
.eyebrow.c-pink::before{
  background:var(--brand-blue);
}
#products .h2 em,#services .h2 em,#offer .h2 em,#approach .h2 em,
.statement .big u,.foot ul a:hover{
  color:var(--brand-blue);
}
.proof-card:nth-child(1),.proof-card:nth-child(2),.proof-card:nth-child(3),
.tile.t-ocean::after,.tile.t-assist::after,.tile.t-learn::after,.tile.t-board::after{
  background:linear-gradient(160deg,var(--brand-paper),#fff);
}
.tile .arrow,.svc-item .go{
  border-color:var(--brand-line);
  background:#fff;
  color:var(--brand-blue);
}
.tile:hover .arrow,.svc-item:hover .go{
  background:var(--brand-blue);
  border-color:var(--brand-blue);
  color:#fff;
}
.svc-item .idx,
.svc-item:nth-child(2) .idx,
.svc-item:nth-child(3) .idx,
.svc-item:nth-child(4) .idx{
  background:var(--brand-paper);
  color:var(--brand-blue);
}
.sec.ink{
  background:var(--brand-ink);
  color:#fff;
}
.sec.ink .h2,.sec.ink .appr-row h4{color:#fff}
.sec.ink .lead,.sec.ink .eyebrow,.sec.ink .appr-row p{color:#c8cfda}
.appr-row,.appr-row:last-child{border-color:rgba(234,236,241,.18)}
.appr-row .ai{color:#fff}
.cta::after{
  background:linear-gradient(110deg,var(--brand-paper),#fff);
}
.foot{
  background:var(--brand-paper);
}
.foot-mark{
  color:var(--brand-blue);
  opacity:.05;
}

@media(max-width:680px){
  html,body{width:100%;overflow-x:hidden}
  .nav-in{height:64px;gap:12px}
  .brand span{font-size:19px}
  .brand .logo{width:26px;height:26px}
  .nav-r{gap:8px;margin-left:auto}
  .nav-r .btn.fill{
    padding:9px 14px;
    font-size:13px;
    max-width:92px;
    overflow:hidden;
    text-overflow:clip;
  }
  .nav-burger{
    display:block;
    width:36px;
    height:36px;
    flex:0 0 36px;
  }
  .hero{padding-top:108px}
  .hero h1{
    max-width:8ch;
    font-size:clamp(40px,14vw,50px);
    line-height:1.08;
  }
  .hero .sub{
    max-width:100%;
    font-size:16px;
    line-height:1.65;
  }
  .hero .acts{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    gap:12px;
  }
  .hero .acts .btn{
    justify-content:center;
    padding:13px 12px;
    min-width:0;
    font-size:14px;
  }
  .hero-preview{
    width:100%;
    max-width:100%;
    overflow:hidden;
    border-radius:22px;
  }
  .hero-shot{
    width:100%;
    overflow:hidden;
  }
  .hero-shot img{
    width:138%;
    max-width:none;
    transform:translateX(-2%);
  }
  .hero-line{
    grid-template-columns:1fr 1fr;
    gap:20px 16px;
    width:100%;
  }
  .statement .big{
    max-width:100%;
    font-size:clamp(28px,8.8vw,34px);
    line-height:1.34;
    word-break:normal;
    overflow-wrap:anywhere;
  }
  .ocean-showcase,.ocean-stage,.ocean-screen{
    max-width:100%;
    overflow:hidden;
  }
}

@media(max-width:900px){
  html,body{width:100%;overflow-x:hidden}
  .wrap{max-width:100%;padding-left:20px;padding-right:20px}
  .nav-in,.hero .wrap{
    width:100vw;
    max-width:100vw;
    margin-left:0;
    margin-right:0;
    padding-left:20px;
    padding-right:20px;
  }
  .nav-in{height:64px}
  .nav-mid,.nav-r .btn.line,.nav-burger{display:none!important}
  .nav-r{margin-left:auto;flex:0 0 auto}
  .nav-r .btn.fill{
    display:inline-flex!important;
    max-width:none;
    padding:9px 14px;
    font-size:13px;
  }
  .hero{padding-top:108px;min-height:auto}
  .hero .wrap{
    max-width:100%;
    grid-template-columns:minmax(0,1fr);
    overflow:hidden;
  }
  .hero h1{
    max-width:8.6ch;
    font-size:clamp(40px,13vw,54px);
    line-height:1.08;
  }
  .hero .sub{
    width:min(100%,350px);
    max-width:350px;
    overflow-wrap:anywhere;
  }
  .hero .sub br{display:none}
  .hero .acts{
    width:min(100%,350px);
    max-width:350px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px;
  }
  .hero .acts .btn{
    min-width:0;
    justify-content:center;
    padding-left:10px;
    padding-right:10px;
    font-size:14px;
  }
  .hero-preview,.hero-shot,.ocean-screen,.ocean-showcase{
    width:min(100%,350px);
    max-width:350px;
    overflow:hidden;
  }
  .hero-line{
    width:min(100%,350px);
    max-width:350px;
  }
  .statement .big{
    width:min(100%,350px);
    max-width:350px;
    overflow-wrap:anywhere;
  }
}

/* creative chiiss wordmark placements */
.brand-wordmark{
  display:block;
  width:142px;
  height:auto;
}
.nav .brand .brand-wordmark + .logo,
.nav .brand .brand-wordmark ~ span{
  display:none!important;
}
.approach-wordmark{
  width:198px;
  height:auto;
  margin:0 0 34px;
  opacity:.96;
  filter:drop-shadow(0 20px 46px rgba(0,0,0,.22));
}
.footer-wordmark{
  width:188px;
  height:auto;
  margin:0 0 20px;
}
.foot .footer-wordmark + p{
  margin-top:0;
}
.photo-credit{
  margin:12px 0 0;
  color:rgba(255,255,255,.42);
  font-size:11px;
  line-height:1.5;
}
@media(max-width:900px){
  .brand-wordmark{width:118px}
  .approach-wordmark{width:166px;margin-bottom:28px}
  .footer-wordmark{width:168px}
}

/* keep blue as an accent, not a large filled surface */
.btn.fill,.nav:not(.solid) .btn.fill{
  background:#fff;
  border-color:rgba(31,60,255,.32);
  color:var(--brand-blue);
  box-shadow:0 8px 22px rgba(31,60,255,.08);
}
.btn.fill:hover,.nav:not(.solid) .btn.fill:hover{
  background:var(--brand-paper);
  border-color:var(--brand-blue);
  color:var(--brand-blue);
}
.hero .btn.solid-w,.cta .btn.solid-w{
  background:var(--brand-ink);
  border-color:var(--brand-ink);
  color:#fff;
}
.hero .btn.solid-w:hover,.cta .btn.solid-w:hover{
  background:#172033;
  border-color:#172033;
  color:#fff;
}
.tile:hover .arrow,.svc-item:hover .go{
  background:var(--brand-ink);
  border-color:var(--brand-ink);
  color:#fff;
}
.ocean-metrics b::before,
.ocean-metrics b:nth-child(2)::before,
.ocean-metrics b:nth-child(3)::before,
.ocean-metrics b:nth-child(4)::before{
  background:var(--brand-ink);
}
.foot-mark{
  opacity:.025;
}
@media(max-width:900px){
  .nav-r .btn.fill{
    background:#fff;
    border-color:rgba(31,60,255,.32);
    color:var(--brand-blue);
  }
}

.hero .sub .en{
  display:block;
  margin-top:8px;
  color:var(--brand-muted);
  font-size:.82em;
  line-height:1.45;
  letter-spacing:0;
}

/* tighten hero headline rhythm */
.hero h1{
  letter-spacing:-.026em;
  word-spacing:0;
}
.hero h1 em{
  color:#172152;
}
.hero h1 .tight{
  white-space:nowrap;
  margin-left:.075em;
}
.hero h1 .tight b{
  display:inline;
}

/* light cosmic intro under the nav */
.hero{
  isolation:isolate;
}
.hero .space{
  display:block!important;
  position:absolute;
  inset:64px 0 auto;
  width:100%;
  height:660px;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(31,60,255,.16) 0 13%,transparent 48%),
    radial-gradient(ellipse at 46% 30%,rgba(23,33,82,.09),transparent 42%),
    radial-gradient(ellipse at 58% 25%,rgba(34,179,155,.1),transparent 34%),
    radial-gradient(ellipse at 35% 22%,rgba(255,183,77,.11),transparent 30%),
    linear-gradient(to bottom,#fff 0%,rgba(255,255,255,.94) 48%,rgba(255,255,255,.65) 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 84%,transparent 100%);
}
.hero .space span,
.hero .space::before,
.hero .space::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero .space::before{
  left:-12%;
  top:230px;
  width:62vw;
  height:62vw;
  min-width:620px;
  min-height:620px;
  border-radius:50%;
  background:
    radial-gradient(circle at 58% 36%,rgba(255,255,255,.94) 0 12%,rgba(232,244,255,.86) 13% 25%,rgba(171,213,255,.48) 26% 36%,rgba(108,121,255,.24) 37% 45%,rgba(23,33,82,.18) 46% 47%,transparent 48%),
    radial-gradient(circle at 29% 62%,rgba(34,179,155,.18),transparent 23%),
    radial-gradient(circle at 70% 28%,rgba(255,183,77,.2),transparent 19%),
    repeating-radial-gradient(circle at 58% 36%,transparent 0 34px,rgba(31,60,255,.07) 35px,transparent 37px 76px);
  filter:blur(.1px);
  opacity:.82;
  transform:rotate(-10deg);
  animation:planetRise 16s ease-in-out infinite alternate;
}
.hero .space::after{
  right:7%;
  top:64px;
  left:auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,rgba(255,255,255,.98) 0 13%,rgba(224,238,255,.9) 14% 27%,rgba(31,60,255,.26) 28% 44%,rgba(34,179,155,.18) 45% 52%,rgba(23,33,82,.22) 53% 54%,transparent 55%),
    linear-gradient(20deg,transparent 34%,rgba(23,33,82,.18) 35% 39%,transparent 40%),
    linear-gradient(20deg,transparent 41%,rgba(255,183,77,.18) 42% 44%,transparent 45%);
  box-shadow:0 0 0 28px rgba(31,60,255,.055),0 0 0 58px rgba(34,179,155,.04),0 0 0 88px rgba(255,183,77,.028);
  opacity:.9;
  animation:smallPlanetFloat 11s ease-in-out infinite alternate;
}
.hero .cosmos-stars{
  inset:-16% -10% auto;
  height:680px;
  opacity:.82;
  background:
    radial-gradient(circle at 12% 28%,rgba(23,33,82,.28) 0 1px,transparent 2px),
    radial-gradient(circle at 18% 44%,rgba(31,60,255,.25) 0 1px,transparent 2px),
    radial-gradient(circle at 26% 22%,rgba(23,33,82,.24) 0 1px,transparent 2px),
    radial-gradient(circle at 34% 39%,rgba(31,60,255,.22) 0 1px,transparent 2px),
    radial-gradient(circle at 44% 19%,rgba(23,33,82,.25) 0 1px,transparent 2px),
    radial-gradient(circle at 52% 36%,rgba(31,60,255,.28) 0 1px,transparent 2px),
    radial-gradient(circle at 61% 24%,rgba(23,33,82,.22) 0 1px,transparent 2px),
    radial-gradient(circle at 73% 41%,rgba(31,60,255,.24) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 27%,rgba(23,33,82,.24) 0 1px,transparent 2px),
    radial-gradient(circle at 91% 52%,rgba(31,60,255,.18) 0 1px,transparent 2px);
  background-size:860px 480px;
  animation:starZoom 9s linear infinite;
}
.hero .cosmos-planets{
  inset:-6% 0 auto;
  height:560px;
  opacity:.86;
  background:
    radial-gradient(circle at 18% 23%,rgba(31,60,255,.38) 0 7px,rgba(31,60,255,.11) 8px 20px,transparent 21px),
    radial-gradient(circle at 78% 30%,rgba(255,183,77,.36) 0 5px,rgba(255,183,77,.11) 6px 17px,transparent 18px),
    radial-gradient(circle at 68% 58%,rgba(34,179,155,.34) 0 4px,transparent 10px),
    radial-gradient(circle at 29% 58%,rgba(155,108,255,.26) 0 4px,transparent 10px),
    linear-gradient(112deg,transparent 0 44%,rgba(23,33,82,.12) 44.1% 44.35%,transparent 44.7%),
    linear-gradient(28deg,transparent 0 55%,rgba(31,60,255,.1) 55.1% 55.4%,transparent 55.8%),
    linear-gradient(152deg,transparent 0 63%,rgba(34,179,155,.09) 63.1% 63.45%,transparent 63.8%);
  animation:planetDust 10s ease-in-out infinite alternate;
}
.hero .cosmos-tunnel{
  inset:-22% -12% auto;
  height:720px;
  opacity:.76;
  background:
    radial-gradient(ellipse at 50% 22%,transparent 0 10%,rgba(31,60,255,.16) 10.2% 10.55%,transparent 11% 21%,rgba(34,179,155,.11) 21.2% 21.5%,transparent 22% 35%,rgba(255,183,77,.085) 35.2% 35.55%,transparent 36% 49%,rgba(23,33,82,.06) 49.2% 49.45%,transparent 50%),
    repeating-radial-gradient(ellipse at 50% 22%,transparent 0 66px,rgba(31,60,255,.052) 67px,transparent 70px 124px);
  transform-origin:50% 22%;
  animation:tunnelPulse 7s ease-in-out infinite alternate;
}
.hero .cosmos-nebula{
  inset:-12% -8% auto;
  height:660px;
  opacity:.78;
  mix-blend-mode:multiply;
  background:
    radial-gradient(circle at 47% 19%,rgba(255,183,77,.28),transparent 9%),
    radial-gradient(circle at 53% 20%,rgba(31,60,255,.24),transparent 12%),
    radial-gradient(circle at 41% 27%,rgba(34,179,155,.2),transparent 14%),
    radial-gradient(circle at 61% 31%,rgba(155,108,255,.18),transparent 13%);
  filter:blur(10px);
  animation:nebulaBloom 8s ease-in-out infinite alternate;
}
.hero .cosmos-fragments{
  inset:-8% 0 auto;
  height:610px;
  opacity:.92;
  background:
    linear-gradient(12deg,rgba(31,60,255,.78),rgba(34,179,155,.72)) 37% 18%/16px 16px no-repeat,
    linear-gradient(135deg,rgba(255,183,77,.9),rgba(255,119,91,.72)) 61% 23%/20px 20px no-repeat,
    linear-gradient(45deg,rgba(155,108,255,.7),rgba(31,60,255,.62)) 31% 36%/14px 14px no-repeat,
    linear-gradient(135deg,rgba(34,179,155,.75),rgba(31,60,255,.5)) 72% 42%/13px 13px no-repeat,
    radial-gradient(circle at 44% 44%,rgba(255,183,77,.9) 0 4px,transparent 5px),
    radial-gradient(circle at 56% 52%,rgba(34,179,155,.75) 0 4px,transparent 5px),
    radial-gradient(circle at 69% 23%,rgba(155,108,255,.65) 0 3px,transparent 5px),
    radial-gradient(circle at 24% 46%,rgba(31,60,255,.68) 0 3px,transparent 5px);
  filter:drop-shadow(0 8px 18px rgba(31,60,255,.16));
  animation:fragmentBurst 7.5s ease-in-out infinite alternate;
}
@keyframes starZoom{
  from{transform:translate3d(0,0,0) scale(.86);opacity:.35}
  45%{opacity:.88}
  to{transform:translate3d(-20px,20px,0) scale(1.18);opacity:.46}
}
@keyframes tunnelPulse{
  from{transform:scale(.9);opacity:.46}
  to{transform:scale(1.14);opacity:.84}
}
@keyframes planetRise{
  from{transform:translate3d(-10px,12px,0) rotate(-12deg);opacity:.68}
  to{transform:translate3d(16px,-10px,0) rotate(-7deg);opacity:.9}
}
@keyframes smallPlanetFloat{
  from{transform:translate3d(0,0,0) rotate(-8deg);opacity:.56}
  to{transform:translate3d(-20px,18px,0) rotate(8deg);opacity:.84}
}
@keyframes planetDust{
  from{transform:translate3d(0,0,0);opacity:.48}
  to{transform:translate3d(18px,-12px,0);opacity:.78}
}
@keyframes nebulaBloom{
  from{transform:scale(.92) rotate(-2deg);opacity:.5}
  to{transform:scale(1.12) rotate(3deg);opacity:.88}
}
@keyframes fragmentBurst{
  from{transform:translate3d(-10px,8px,0) scale(.9);opacity:.68}
  to{transform:translate3d(22px,-18px,0) scale(1.12);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .hero .space span,.hero .space::before,.hero .space::after{animation:none}
}

/* OpenAI-like nav alignment */
.nav .wrap.nav-in{
  max-width:none;
  padding-left:56px;
  padding-right:56px;
  justify-content:flex-start;
  gap:48px;
}
.nav .brand{
  flex:0 0 auto;
}
.nav-mid{
  margin-left:0;
  gap:24px;
}
.nav-mid a{
  padding:8px 0;
  border-radius:0;
  color:var(--brand-ink)!important;
  font-size:15px;
  font-weight:650;
}
.nav-mid a:hover{
  background:transparent;
  color:var(--brand-blue)!important;
}
.nav-r{
  margin-left:auto;
  gap:12px;
}
.nav-r .ocean-login{
  background:#fff;
  border-color:var(--brand-line);
  color:var(--brand-ink);
}
.nav-r .ocean-login:hover{
  background:var(--brand-paper);
  border-color:var(--brand-line);
  color:var(--brand-ink);
}
.nav-r .download-btn,
.nav:not(.solid) .nav-r .download-btn{
  background:var(--brand-ink);
  border-color:var(--brand-ink);
  color:#fff;
  box-shadow:none;
}
.nav-r .download-btn:hover,
.nav:not(.solid) .nav-r .download-btn:hover{
  background:#172033;
  border-color:#172033;
  color:#fff;
}
@media(max-width:900px){
  .nav .wrap.nav-in{
    width:100vw;
    max-width:100vw;
    padding-left:20px;
    padding-right:20px;
    gap:12px;
  }
  .nav-r .ocean-login{display:none!important}
  .nav-r .download-btn{
    display:inline-flex!important;
    padding:9px 14px;
    font-size:13px;
  }
}

/* Big Bang inspired hero: dense star field with warm cosmic bloom */
.hero{
  background:#05060d!important;
  color:#fff;
}
.hero::before{
  background:
    radial-gradient(ellipse at 50% 34%,rgba(229,191,136,.42) 0 7%,rgba(134,114,96,.32) 8% 20%,rgba(15,15,24,.2) 21% 43%,transparent 58%),
    radial-gradient(circle at 52% 15%,rgba(255,220,145,.78) 0 2px,rgba(255,220,145,.3) 3px 20px,transparent 48px),
    radial-gradient(circle at 31% 69%,rgba(255,218,133,.5) 0 2px,rgba(255,218,133,.2) 3px 22px,transparent 46px),
    radial-gradient(circle at 65% 61%,rgba(139,174,255,.56) 0 2px,rgba(139,174,255,.18) 3px 18px,transparent 38px),
    linear-gradient(180deg,#070811 0%,#0b0b13 58%,#10121b 100%)!important;
  opacity:1!important;
}
.hero::after{
  height:190px!important;
  background:linear-gradient(to bottom,rgba(5,6,13,0),#fff 86%)!important;
  opacity:1!important;
  filter:none!important;
}
.hero h1{
  color:#fff!important;
  text-shadow:0 2px 18px rgba(0,0,0,.38),0 0 36px rgba(255,255,255,.18);
}
.hero h1 em{
  color:#f3f6ff!important;
  text-shadow:0 0 22px rgba(176,202,255,.55),0 2px 18px rgba(0,0,0,.34);
}
.hero .sub{
  color:rgba(255,255,255,.82)!important;
  text-shadow:0 1px 14px rgba(0,0,0,.34);
}
.hero .sub .en{
  color:rgba(230,236,255,.62)!important;
}
.hero-line{
  border-top-color:rgba(255,255,255,.18)!important;
}
.hl-item .n{
  color:#fff!important;
}
.hl-item .d{
  color:rgba(238,242,255,.7)!important;
}
.hero-preview{
  filter:drop-shadow(0 26px 80px rgba(0,0,0,.28));
}
.hero .space{
  inset:64px 0 auto!important;
  height:720px!important;
  opacity:1!important;
  background:
    radial-gradient(ellipse at 50% 34%,rgba(235,202,158,.46) 0 5%,rgba(176,137,106,.24) 6% 18%,transparent 35%),
    radial-gradient(ellipse at 50% 32%,rgba(255,255,255,.16),transparent 26%),
    radial-gradient(ellipse at 35% 35%,rgba(72,91,160,.18),transparent 34%),
    linear-gradient(180deg,rgba(4,5,11,.98),rgba(7,8,17,.95))!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 92%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 92%,transparent 100%)!important;
}
.hero .space::before{
  inset:-6% -4% auto!important;
  width:auto!important;
  height:740px!important;
  min-width:0!important;
  min-height:0!important;
  border-radius:0!important;
  opacity:.95!important;
  background:
    radial-gradient(circle at 4% 12%,rgba(255,255,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 8% 68%,rgba(250,214,137,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 14% 22%,rgba(184,204,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 20% 82%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 28% 34%,rgba(255,222,156,.78) 0 1px,transparent 2px),
    radial-gradient(circle at 34% 72%,rgba(255,255,255,.65) 0 1px,transparent 2px),
    radial-gradient(circle at 42% 17%,rgba(144,174,255,.88) 0 1px,transparent 2px),
    radial-gradient(circle at 47% 54%,rgba(255,255,255,.76) 0 1px,transparent 2px),
    radial-gradient(circle at 55% 23%,rgba(255,232,168,.82) 0 1px,transparent 2px),
    radial-gradient(circle at 62% 78%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 70% 39%,rgba(156,185,255,.84) 0 1px,transparent 2px),
    radial-gradient(circle at 78% 67%,rgba(255,221,145,.78) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 18%,rgba(255,255,255,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 94% 56%,rgba(150,180,255,.78) 0 1px,transparent 2px),
    radial-gradient(circle at 98% 88%,rgba(255,255,255,.7) 0 1px,transparent 2px);
  background-size:260px 170px,310px 210px,220px 190px,360px 260px,300px 180px,250px 240px,420px 250px,280px 210px,340px 230px,300px 260px,260px 220px,380px 240px,320px 200px,280px 260px,360px 220px!important;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.4))!important;
  transform:none!important;
  animation:starDriftDeep 32s linear infinite!important;
}
.hero .space::after{
  inset:0!important;
  width:auto!important;
  height:720px!important;
  border-radius:0!important;
  opacity:.95!important;
  background:
    radial-gradient(ellipse at 18% 18%,rgba(255,255,255,.7) 0 2px,rgba(170,190,255,.28) 3px 14px,transparent 34px),
    radial-gradient(ellipse at 80% 24%,rgba(255,224,150,.65) 0 2px,rgba(255,224,150,.24) 3px 18px,transparent 42px),
    radial-gradient(ellipse at 24% 72%,rgba(255,255,255,.75) 0 2px,rgba(255,255,255,.18) 3px 16px,transparent 38px),
    radial-gradient(ellipse at 74% 72%,rgba(146,174,255,.68) 0 2px,rgba(146,174,255,.2) 3px 17px,transparent 42px),
    radial-gradient(ellipse at 52% 36%,rgba(255,227,177,.78),transparent 14%),
    radial-gradient(ellipse at 50% 36%,rgba(255,255,255,.18),transparent 22%);
  box-shadow:none!important;
  animation:coreBloom 8s ease-in-out infinite alternate!important;
}
.hero .cosmos-stars{
  inset:-12% -12% auto!important;
  height:780px!important;
  opacity:1!important;
  background:
    radial-gradient(circle at 10% 18%,rgba(255,255,255,.95) 0 1px,transparent 2px),
    radial-gradient(circle at 22% 45%,rgba(255,214,133,.86) 0 1px,transparent 2px),
    radial-gradient(circle at 36% 28%,rgba(177,199,255,.92) 0 1px,transparent 2px),
    radial-gradient(circle at 47% 64%,rgba(255,255,255,.92) 0 1px,transparent 2px),
    radial-gradient(circle at 58% 19%,rgba(255,224,157,.88) 0 1px,transparent 2px),
    radial-gradient(circle at 71% 42%,rgba(255,255,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 84% 69%,rgba(152,179,255,.86) 0 1px,transparent 2px),
    radial-gradient(circle at 92% 27%,rgba(255,255,255,.92) 0 1px,transparent 2px);
  background-size:130px 110px,170px 130px,210px 150px,190px 170px,230px 150px,160px 140px,250px 180px,200px 160px!important;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.72));
  animation:starZoomDeep 18s linear infinite!important;
}
.hero .cosmos-nebula{
  inset:-18% -10% auto!important;
  height:760px!important;
  opacity:.96!important;
  mix-blend-mode:screen!important;
  background:
    radial-gradient(ellipse at 50% 37%,rgba(255,224,170,.52),transparent 14%),
    radial-gradient(ellipse at 45% 40%,rgba(185,154,132,.34),transparent 23%),
    radial-gradient(ellipse at 56% 30%,rgba(99,121,190,.26),transparent 26%),
    radial-gradient(ellipse at 30% 68%,rgba(255,211,122,.18),transparent 18%)!important;
  filter:blur(16px)!important;
  animation:nebulaBreathDeep 10s ease-in-out infinite alternate!important;
}
.hero .cosmos-tunnel{
  inset:-10% -10% auto!important;
  height:760px!important;
  opacity:.42!important;
  background:
    radial-gradient(ellipse at 50% 37%,transparent 0 16%,rgba(255,255,255,.13) 16.2% 16.5%,transparent 17% 32%,rgba(255,219,154,.1) 32.2% 32.45%,transparent 33% 48%,rgba(140,170,255,.08) 48.2% 48.45%,transparent 49%),
    repeating-radial-gradient(ellipse at 50% 37%,transparent 0 82px,rgba(255,255,255,.035) 84px,transparent 86px 150px)!important;
  transform-origin:50% 37%!important;
  animation:tunnelPulseDeep 12s ease-in-out infinite alternate!important;
}
.hero .cosmos-planets{
  inset:0!important;
  height:720px!important;
  opacity:.9!important;
  background:
    radial-gradient(ellipse at 9% 21%,rgba(255,255,255,.56) 0 2px,rgba(255,214,132,.26) 3px 28px,transparent 55px),
    radial-gradient(ellipse at 91% 17%,rgba(143,170,255,.56) 0 2px,rgba(143,170,255,.24) 3px 30px,transparent 58px),
    radial-gradient(ellipse at 16% 74%,rgba(255,226,150,.54) 0 2px,rgba(255,226,150,.2) 3px 24px,transparent 54px),
    radial-gradient(ellipse at 82% 76%,rgba(255,255,255,.48) 0 2px,rgba(255,255,255,.16) 3px 24px,transparent 52px),
    linear-gradient(118deg,transparent 0 18%,rgba(255,255,255,.16) 18.2% 18.45%,transparent 18.8%),
    linear-gradient(28deg,transparent 0 76%,rgba(255,211,136,.13) 76.2% 76.45%,transparent 76.8%)!important;
  animation:galaxyDriftDeep 22s ease-in-out infinite alternate!important;
}
.hero .cosmos-fragments{
  inset:0!important;
  height:720px!important;
  opacity:.78!important;
  background:
    radial-gradient(ellipse at 12% 10%,rgba(255,255,255,.7) 0 1px,transparent 3px),
    radial-gradient(ellipse at 24% 33%,rgba(255,220,145,.56) 0 1px,transparent 4px),
    radial-gradient(ellipse at 33% 77%,rgba(255,255,255,.5) 0 1px,transparent 3px),
    radial-gradient(ellipse at 64% 18%,rgba(146,174,255,.62) 0 1px,transparent 4px),
    radial-gradient(ellipse at 77% 48%,rgba(255,255,255,.55) 0 1px,transparent 4px),
    radial-gradient(ellipse at 89% 82%,rgba(255,223,152,.56) 0 1px,transparent 4px),
    linear-gradient(115deg,transparent 0 53%,rgba(255,255,255,.18) 53.2% 53.38%,transparent 53.6%),
    linear-gradient(25deg,transparent 0 37%,rgba(165,189,255,.16) 37.2% 37.42%,transparent 37.7%)!important;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.42))!important;
  animation:fragmentDriftDeep 16s ease-in-out infinite alternate!important;
}
@keyframes starDriftDeep{
  from{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  to{background-position:80px 30px,-60px 40px,45px -35px,-70px -30px,90px 20px,-55px 65px,70px -60px,-80px 50px,55px 44px,-70px -45px,40px 55px,-90px 28px,72px -22px,-45px 70px,85px -65px}
}
@keyframes starZoomDeep{
  from{transform:scale(.94);opacity:.76}
  to{transform:scale(1.16) translate3d(-18px,16px,0);opacity:1}
}
@keyframes coreBloom{
  from{transform:scale(.92);opacity:.68}
  to{transform:scale(1.08);opacity:1}
}
@keyframes nebulaBreathDeep{
  from{transform:scale(.94) rotate(-1deg);opacity:.72}
  to{transform:scale(1.1) rotate(2deg);opacity:1}
}
@keyframes tunnelPulseDeep{
  from{transform:scale(.92);opacity:.25}
  to{transform:scale(1.1);opacity:.48}
}
@keyframes galaxyDriftDeep{
  from{transform:translate3d(-10px,8px,0);opacity:.72}
  to{transform:translate3d(22px,-14px,0);opacity:.95}
}
@keyframes fragmentDriftDeep{
  from{transform:translate3d(0,0,0) scale(.96);opacity:.58}
  to{transform:translate3d(24px,-18px,0) scale(1.08);opacity:.9}
}
@media(max-width:900px){
  .hero .space{height:700px!important}
  .hero h1{text-shadow:0 2px 16px rgba(0,0,0,.45)}
}

/* calm the cosmic motion and soften the black field */
.hero{
  background:#171822!important;
}
.hero::before{
  background:
    linear-gradient(180deg,rgba(238,234,224,.16),rgba(180,188,210,.1) 42%,rgba(255,255,255,.05) 100%),
    radial-gradient(ellipse at 50% 34%,rgba(229,191,136,.42) 0 7%,rgba(134,114,96,.3) 8% 20%,rgba(25,26,36,.18) 21% 43%,transparent 58%),
    radial-gradient(circle at 52% 15%,rgba(255,220,145,.72) 0 2px,rgba(255,220,145,.26) 3px 20px,transparent 48px),
    radial-gradient(circle at 31% 69%,rgba(255,218,133,.46) 0 2px,rgba(255,218,133,.18) 3px 22px,transparent 46px),
    radial-gradient(circle at 65% 61%,rgba(139,174,255,.5) 0 2px,rgba(139,174,255,.16) 3px 18px,transparent 38px),
    linear-gradient(180deg,#151721 0%,#171822 58%,#20222d 100%)!important;
}
.hero::after{
  background:linear-gradient(to bottom,rgba(23,24,34,0),rgba(255,255,255,.68) 58%,#fff 92%)!important;
}
.hero .space{
  background:
    linear-gradient(180deg,rgba(244,239,229,.18),rgba(206,213,229,.12) 48%,rgba(255,255,255,.06) 100%),
    radial-gradient(ellipse at 50% 34%,rgba(235,202,158,.43) 0 5%,rgba(176,137,106,.22) 6% 18%,transparent 35%),
    radial-gradient(ellipse at 50% 32%,rgba(255,255,255,.14),transparent 26%),
    radial-gradient(ellipse at 35% 35%,rgba(91,111,181,.16),transparent 34%),
    linear-gradient(180deg,rgba(16,18,28,.92),rgba(25,26,38,.88))!important;
}
.hero .space::before{
  opacity:.82!important;
  animation:starDriftCalm 54s linear infinite!important;
}
.hero .space::after{
  opacity:.78!important;
  animation:coreBloomCalm 14s ease-in-out infinite alternate!important;
}
.hero .cosmos-stars{
  opacity:.82!important;
  animation:starFieldCalm 42s linear infinite!important;
}
.hero .cosmos-nebula{
  opacity:.78!important;
  filter:blur(18px)!important;
  animation:nebulaCalm 18s ease-in-out infinite alternate!important;
}
.hero .cosmos-tunnel{
  opacity:.32!important;
  animation:tunnelCalm 20s ease-in-out infinite alternate!important;
}
.hero .cosmos-planets{
  opacity:.72!important;
  animation:galaxyCalm 28s ease-in-out infinite alternate!important;
}
.hero .cosmos-fragments{
  opacity:.58!important;
  animation:fragmentCalm 24s ease-in-out infinite alternate!important;
}
@keyframes starDriftCalm{
  from{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  to{background-position:40px 16px,-30px 22px,24px -18px,-34px -16px,42px 12px,-28px 32px,36px -30px,-40px 24px,28px 22px,-34px -20px,20px 28px,-42px 14px,34px -12px,-22px 34px,40px -32px}
}
@keyframes starFieldCalm{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-12px,10px,0) scale(1.04)}
}
@keyframes coreBloomCalm{
  from{transform:scale(.98)}
  to{transform:scale(1.04)}
}
@keyframes nebulaCalm{
  from{transform:scale(.98) rotate(-.4deg)}
  to{transform:scale(1.04) rotate(.8deg)}
}
@keyframes tunnelCalm{
  from{transform:scale(.98)}
  to{transform:scale(1.04)}
}
@keyframes galaxyCalm{
  from{transform:translate3d(-4px,3px,0)}
  to{transform:translate3d(10px,-6px,0)}
}
@keyframes fragmentCalm{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(10px,-7px,0) scale(1.03)}
}

/* move the warm bloom away from the headline text */
.hero::before{
  background:
    linear-gradient(180deg,rgba(238,234,224,.16),rgba(180,188,210,.1) 42%,rgba(255,255,255,.05) 100%),
    radial-gradient(ellipse at 76% 27%,rgba(229,191,136,.38) 0 6%,rgba(134,114,96,.22) 7% 18%,rgba(25,26,36,.12) 19% 35%,transparent 52%),
    radial-gradient(circle at 79% 16%,rgba(255,220,145,.66) 0 2px,rgba(255,220,145,.22) 3px 20px,transparent 48px),
    radial-gradient(circle at 31% 69%,rgba(255,218,133,.42) 0 2px,rgba(255,218,133,.16) 3px 22px,transparent 46px),
    radial-gradient(circle at 65% 61%,rgba(139,174,255,.46) 0 2px,rgba(139,174,255,.14) 3px 18px,transparent 38px),
    linear-gradient(180deg,#151721 0%,#171822 58%,#20222d 100%)!important;
}
.hero .space{
  background:
    linear-gradient(180deg,rgba(244,239,229,.18),rgba(206,213,229,.12) 48%,rgba(255,255,255,.06) 100%),
    radial-gradient(ellipse at 76% 28%,rgba(235,202,158,.34) 0 5%,rgba(176,137,106,.17) 6% 17%,transparent 34%),
    radial-gradient(ellipse at 75% 27%,rgba(255,255,255,.1),transparent 24%),
    radial-gradient(ellipse at 35% 35%,rgba(91,111,181,.16),transparent 34%),
    linear-gradient(180deg,rgba(16,18,28,.92),rgba(25,26,38,.88))!important;
}
.hero .space::after{
  background:
    radial-gradient(ellipse at 18% 18%,rgba(255,255,255,.7) 0 2px,rgba(170,190,255,.28) 3px 14px,transparent 34px),
    radial-gradient(ellipse at 80% 24%,rgba(255,224,150,.65) 0 2px,rgba(255,224,150,.24) 3px 18px,transparent 42px),
    radial-gradient(ellipse at 24% 72%,rgba(255,255,255,.75) 0 2px,rgba(255,255,255,.18) 3px 16px,transparent 38px),
    radial-gradient(ellipse at 74% 72%,rgba(146,174,255,.68) 0 2px,rgba(146,174,255,.2) 3px 17px,transparent 42px),
    radial-gradient(ellipse at 77% 28%,rgba(255,227,177,.68),transparent 12%),
    radial-gradient(ellipse at 76% 27%,rgba(255,255,255,.14),transparent 19%)!important;
}
.hero .cosmos-nebula{
  background:
    radial-gradient(ellipse at 76% 28%,rgba(255,224,170,.44),transparent 12%),
    radial-gradient(ellipse at 72% 31%,rgba(185,154,132,.24),transparent 20%),
    radial-gradient(ellipse at 82% 22%,rgba(99,121,190,.2),transparent 22%),
    radial-gradient(ellipse at 30% 68%,rgba(255,211,122,.14),transparent 18%)!important;
}
.hero .cosmos-tunnel{
  background:
    radial-gradient(ellipse at 76% 29%,transparent 0 14%,rgba(255,255,255,.1) 14.2% 14.45%,transparent 15% 28%,rgba(255,219,154,.08) 28.2% 28.45%,transparent 29% 42%,rgba(140,170,255,.06) 42.2% 42.45%,transparent 43%),
    repeating-radial-gradient(ellipse at 76% 29%,transparent 0 82px,rgba(255,255,255,.028) 84px,transparent 86px 150px)!important;
  transform-origin:76% 29%!important;
}
.hero h1 em{
  text-shadow:0 0 13px rgba(176,202,255,.28),0 2px 16px rgba(0,0,0,.34)!important;
}

/* hero support points */
.hero-line{
  margin:34px auto 0!important;
  padding:18px 22px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
  box-shadow:0 18px 60px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  gap:0!important;
}
.hl-item{
  position:relative;
  min-height:58px;
  padding:0 26px 0 44px;
  text-align:left;
}
.hl-item:not(:last-child){
  border-right:1px solid rgba(255,255,255,.12);
}
.hl-item::before{
  position:absolute;
  left:0;
  top:3px;
  font-size:12px;
  line-height:1;
  font-weight:700;
  letter-spacing:.06em;
  color:rgba(255,219,154,.82);
}
.hl-item:nth-child(1)::before{content:"01"}
.hl-item:nth-child(2)::before{content:"02"}
.hl-item:nth-child(3)::before{content:"03"}
.hl-item:nth-child(4)::before{content:"04"}
.hl-item .n{
  margin-bottom:7px;
  color:#fff!important;
  font-size:16px!important;
  line-height:1.2;
  font-weight:760!important;
  letter-spacing:0;
}
.hl-item .d{
  max-width:15em;
  color:rgba(234,239,255,.72)!important;
  font-size:13px!important;
  line-height:1.45;
  margin-top:0!important;
}
@media(max-width:900px){
  .hero-line{
    grid-template-columns:1fr!important;
    width:min(100%,350px)!important;
    padding:16px 18px!important;
  }
  .hl-item{
    padding:14px 0 14px 42px;
    min-height:auto;
  }
  .hl-item:not(:last-child){
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .hl-item .d{
    max-width:none;
  }
}

/* compact support strip and deeper cosmic field */
.hero::before{
  background:
    linear-gradient(180deg,rgba(238,234,224,.08),rgba(180,188,210,.045) 42%,rgba(255,255,255,.02) 100%),
    radial-gradient(ellipse at 76% 27%,rgba(229,191,136,.32) 0 6%,rgba(134,114,96,.18) 7% 18%,rgba(25,26,36,.1) 19% 35%,transparent 52%),
    radial-gradient(circle at 79% 16%,rgba(255,220,145,.58) 0 2px,rgba(255,220,145,.18) 3px 20px,transparent 48px),
    radial-gradient(circle at 31% 69%,rgba(255,218,133,.34) 0 2px,rgba(255,218,133,.12) 3px 22px,transparent 46px),
    radial-gradient(circle at 65% 61%,rgba(139,174,255,.38) 0 2px,rgba(139,174,255,.1) 3px 18px,transparent 38px),
    linear-gradient(180deg,#10121c 0%,#11131e 58%,#181a25 100%)!important;
}
.hero .space{
  background:
    linear-gradient(180deg,rgba(244,239,229,.08),rgba(206,213,229,.055) 48%,rgba(255,255,255,.025) 100%),
    radial-gradient(ellipse at 76% 28%,rgba(235,202,158,.28) 0 5%,rgba(176,137,106,.13) 6% 17%,transparent 34%),
    radial-gradient(ellipse at 75% 27%,rgba(255,255,255,.07),transparent 24%),
    radial-gradient(ellipse at 35% 35%,rgba(91,111,181,.12),transparent 34%),
    linear-gradient(180deg,rgba(12,14,23,.96),rgba(18,20,32,.94))!important;
}
.hero-line{
  margin-top:30px!important;
  padding:16px 26px!important;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032))!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:0 14px 42px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.1)!important;
}
.hl-item{
  min-height:auto!important;
  padding:0 28px!important;
  display:flex;
  align-items:center;
  gap:12px;
}
.hl-item::before{
  content:none!important;
}
.hl-item .n{
  margin:0!important;
  flex:0 0 auto;
  font-size:15px!important;
  line-height:1!important;
}
.hl-item .d{
  max-width:none!important;
  white-space:nowrap;
  color:rgba(234,239,255,.66)!important;
  font-size:12.5px!important;
  line-height:1!important;
}
@media(max-width:900px){
  .hl-item{
    display:block;
    padding:13px 0!important;
  }
  .hl-item .d{
    white-space:normal;
    margin-top:7px!important;
    line-height:1.45!important;
  }
}

/* keep a dark breathing gap below the support strip */
.hero{
  padding-bottom:124px!important;
}
.hero::after{
  height:96px!important;
  background:linear-gradient(to bottom,rgba(17,19,30,0),rgba(17,19,30,.86) 34%,#fff 100%)!important;
}
.hero-line{
  margin-bottom:34px!important;
}
@media(max-width:900px){
  .hero{
    padding-bottom:96px!important;
  }
  .hero-line{
    margin-bottom:26px!important;
  }
}

/* Ocean AI Apple-style connected product panel */
.ocean-connect-sec{
  background:#fff!important;
  overflow:hidden;
}
.ocean-connect-wrap{
  max-width:1420px;
}
.ocean-connect-head{
  align-items:end;
  margin-bottom:52px;
}
.ocean-connect-sec .h2{
  letter-spacing:-.055em;
}
.ocean-connect-sec .h2 em{
  color:#2337d6!important;
}
.ocean-connect{
  --mx:0;
  --my:0;
  position:relative;
  display:grid;
  grid-template-columns:minmax(310px,.72fr) minmax(0,1.38fr);
  gap:56px;
  align-items:center;
  min-height:650px;
  padding:74px 76px;
  border-radius:42px;
  background:
    linear-gradient(145deg,#f5f5f7 0%,#f7f7f9 52%,#eff3ff 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 22px 64px rgba(21,28,55,.08);
  overflow:hidden;
  transform:perspective(1400px) rotateX(calc(var(--my) * -1.2deg)) rotateY(calc(var(--mx) * 1.4deg));
  transition:transform .28s ease,box-shadow .28s ease;
}
.ocean-connect::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.72) 0 24%,transparent 24.4%),
    linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,0) 44%),
    linear-gradient(90deg,rgba(35,55,214,.055),rgba(62,181,150,.045),rgba(255,188,66,.05));
  pointer-events:none;
}
.ocean-connect:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 76px rgba(21,28,55,.11);
}
.ocean-tabs{
  position:relative;
  z-index:3;
}
.ocean-tab{
  position:relative;
  display:block;
  width:100%;
  padding:0 54px 26px 0;
  border:0;
  border-bottom:1px solid rgba(29,29,31,.14);
  background:transparent;
  color:#1d1d1f;
  text-align:left;
  cursor:pointer;
}
.ocean-tab + .ocean-tab{
  padding-top:26px;
}
.ocean-tab::after{
  content:"";
  position:absolute;
  right:2px;
  top:8px;
  width:18px;
  height:18px;
  border-right:4px solid #8b8d93;
  border-bottom:4px solid #8b8d93;
  transform:rotate(45deg);
  transition:transform .28s ease,border-color .28s ease;
}
.ocean-tab.is-active::after{
  transform:translateY(6px) rotate(225deg);
  border-color:#1d1d1f;
}
.ocean-tab span{
  display:block;
  color:#1d1d1f;
  font-size:clamp(26px,2.55vw,40px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:780;
}
.ocean-tab em{
  display:block;
  max-width:33em;
  max-height:0;
  margin-top:0;
  overflow:hidden;
  color:#3e4654;
  font-style:normal;
  font-size:14.5px;
  line-height:1.72;
  opacity:0;
  transform:translateY(-6px);
  transition:max-height .34s ease,margin-top .34s ease,opacity .24s ease,transform .34s ease;
}
.ocean-tab.is-active em{
  max-height:320px;
  margin-top:18px;
  opacity:1;
  transform:translateY(0);
}
.ocean-device{
  position:relative;
  z-index:2;
  min-height:510px;
  transform:translate3d(calc(var(--mx) * -18px),calc(var(--my) * -12px),0);
  transition:transform .28s ease;
}
.ocean-main-screen,
.ocean-side-screen,
.ocean-chip,
.ocean-route{
  position:absolute;
}
.ocean-main-screen{
  left:3%;
  right:0;
  top:92px;
  z-index:1;
  margin:0;
  border-radius:30px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 26px 80px rgba(31,45,92,.12);
}
.ocean-main-screen img{
  display:block;
  width:100%;
  aspect-ratio:1.85 / 1;
  object-fit:cover;
  object-position:center top;
}
.ocean-side-screen{
  z-index:4;
  margin:0;
  overflow:hidden;
  border-radius:24px;
  background:#fff;
  box-shadow:0 20px 54px rgba(31,45,92,.14);
  transition:transform .42s ease,opacity .32s ease,filter .32s ease;
}
.ocean-side-screen img{
  display:block;
  width:100%;
  object-fit:cover;
  object-position:center top;
}
.ocean-side-assistant{
  right:3%;
  top:18px;
  width:42%;
}
.ocean-side-assistant img{
  aspect-ratio:1.5 / .94;
}
.ocean-side-login{
  left:10%;
  bottom:8px;
  width:18%;
}
.ocean-side-login img{
  aspect-ratio:.84 / 1;
}
.ocean-chip{
  z-index:6;
  min-width:206px;
  padding:16px 18px;
  border:1px solid rgba(218,220,224,.84);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  box-shadow:0 16px 40px rgba(31,45,92,.11);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:.7;
  transform:translateY(0) scale(.98);
  transition:opacity .3s ease,transform .38s ease,box-shadow .3s ease,border-color .3s ease;
}
.ocean-chip small{
  display:block;
  margin-bottom:8px;
  color:#707988;
  font-size:12px;
  line-height:1;
  font-weight:760;
}
.ocean-chip strong{
  display:block;
  color:#151922;
  font-size:15px;
  line-height:1.34;
  font-weight:760;
}
.chip-plan{
  left:6%;
  top:22px;
}
.chip-plan i{
  display:block;
  height:8px;
  margin-top:14px;
  border-radius:999px;
  background:#e6ebf5;
  overflow:hidden;
}
.chip-plan b{
  display:block;
  width:72%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#2337d6,#30b68f);
}
.chip-course{
  right:1%;
  top:210px;
  border-color:rgba(48,182,143,.32);
}
.chip-assistant{
  left:38%;
  top:0;
  border-color:rgba(35,55,214,.25);
}
.ocean-route{
  left:24%;
  right:16%;
  bottom:74px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 20px;
  border:1px solid rgba(218,220,224,.82);
  border-radius:999px;
  background:rgba(255,255,255,.86);
  box-shadow:0 14px 34px rgba(31,45,92,.09);
}
.ocean-route span{
  color:#222b3a;
  font-size:13px;
  font-weight:760;
  white-space:nowrap;
}
.ocean-route i{
  flex:1;
  height:2px;
  background:linear-gradient(90deg,rgba(35,55,214,.18),rgba(48,182,143,.24));
}
.ocean-connect-wrap[data-active="plan"] .chip-plan,
.ocean-connect-wrap[data-active="course"] .chip-course,
.ocean-connect-wrap[data-active="assistant"] .chip-assistant{
  opacity:1;
  transform:translateY(-10px) scale(1.04);
  border-color:rgba(35,55,214,.36);
  box-shadow:0 22px 54px rgba(31,45,92,.16);
}
.ocean-connect-wrap[data-active="course"] .ocean-main-screen{
  transform:translateY(-4px);
}
.ocean-connect-wrap[data-active="assistant"] .ocean-side-assistant{
  transform:translateY(-16px) scale(1.04);
}
.ocean-connect-wrap[data-active="course"] .ocean-side-login{
  transform:translateY(-8px);
}
@media(prefers-reduced-motion:reduce){
  .ocean-connect,
  .ocean-device,
  .ocean-tab em,
  .ocean-chip,
  .ocean-side-screen{
    transition:none!important;
    transform:none!important;
  }
}
@media(max-width:1100px){
  .ocean-connect{
    grid-template-columns:1fr;
    padding:54px 34px;
    gap:36px;
  }
  .ocean-device{
    min-height:520px;
  }
}
@media(max-width:760px){
  .ocean-connect-head{
    margin-bottom:34px;
  }
  .ocean-connect{
    padding:30px 20px 24px;
    border-radius:28px;
  }
  .ocean-tab{
    padding-right:38px;
  }
  .ocean-tab span{
    font-size:25px;
  }
  .ocean-tab em{
    font-size:14px;
    line-height:1.64;
  }
  .ocean-device{
    min-height:440px;
  }
  .ocean-main-screen{
    left:0;
    top:88px;
    right:0;
    border-radius:22px;
  }
  .ocean-side-assistant{
    width:56%;
    right:0;
    top:0;
  }
  .ocean-side-login{
    width:28%;
    left:4%;
  }
  .ocean-chip{
    min-width:0;
    width:48%;
    padding:13px 14px;
  }
  .chip-plan{
    left:0;
    top:0;
  }
  .chip-course{
    right:0;
    top:198px;
  }
  .chip-assistant{
    left:30%;
    top:44px;
  }
  .ocean-route{
    left:4%;
    right:4%;
    bottom:74px;
    gap:8px;
    padding:12px 14px;
  }
  .ocean-route span{
    font-size:12px;
  }
}

/* Apple-like about/support cards */
.statement{
  background:#f5f5f7!important;
  overflow:hidden;
}
.statement .wrap{
  max-width:none;
  padding-left:clamp(28px,8vw,132px);
  padding-right:0;
}
.statement-head{
  max-width:1180px;
  padding-right:clamp(28px,8vw,132px);
  margin-bottom:38px;
}
.statement .eyebrow{
  margin-bottom:38px;
}
.statement .big{
  max-width:14.5ch!important;
  color:#1d1d1f!important;
  font-size:clamp(42px,5.2vw,72px)!important;
  line-height:1.04!important;
  letter-spacing:-.045em!important;
  font-weight:760!important;
}
.statement .big u{
  color:#1d1d1f!important;
}
.statement .big br{
  display:none;
}
.statement .big::after{
  content:"从目标判断到路径规划，从课程学习到专家陪伴，我们让复杂的教育选择变得更清晰。";
  display:block;
  max-width:35em;
  margin-top:22px;
  color:#5f6673;
  font-size:20px;
  line-height:1.55;
  letter-spacing:0;
  font-weight:520;
}
.statement .big{
  font-size:0!important;
}
.statement .big u{
  font-size:clamp(42px,5.2vw,72px)!important;
}
.support-cards{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(360px,420px);
  gap:20px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:0 clamp(28px,8vw,132px) 12px 0;
  scrollbar-width:none;
}
.support-cards::-webkit-scrollbar{
  display:none;
}
.support-card{
  position:relative;
  min-height:430px;
  padding:34px 34px 30px;
  border:1px solid rgba(0,0,0,.045);
  border-radius:28px;
  background:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.045);
  scroll-snap-align:start;
  overflow:hidden;
  isolation:isolate;
}
.support-k{
  display:block;
  color:#1d1d1f;
  font-size:17px;
  line-height:1.15;
  font-weight:760;
  margin-bottom:12px;
}
.support-card h3{
  max-width:9.5em;
  color:#1d1d1f;
  font-size:30px;
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:760;
}
.support-card p{
  max-width:20em;
  margin-top:18px;
  color:#3f4650;
  font-size:17px;
  line-height:1.42;
}
.support-visual{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:188px;
  z-index:-1;
}
.support-visual::before,
.support-visual::after{
  content:"";
  position:absolute;
}
.support-course .support-visual{
  background:
    linear-gradient(180deg,transparent,#f2f6ff 55%),
    radial-gradient(circle at 72% 72%,rgba(31,60,255,.18),transparent 34%);
}
.support-course .support-visual::before{
  left:44px;
  bottom:32px;
  width:250px;
  height:94px;
  border-radius:8px 8px 22px 22px;
  background:linear-gradient(115deg,#2340ff,#32b39b);
  box-shadow:44px -28px 0 -4px #dce9ff,86px -14px 0 -12px #ffcf6e;
  transform:skewX(-12deg);
}
.support-course .support-visual::after{
  left:78px;
  bottom:63px;
  width:176px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:0 24px 0 rgba(255,255,255,.5),0 48px 0 rgba(255,255,255,.34);
}
.support-ai .support-visual{
  background:
    linear-gradient(180deg,transparent,#eef8ff 54%),
    radial-gradient(circle at 52% 62%,rgba(31,60,255,.18),transparent 38%);
}
.support-ai .support-visual::before{
  left:50%;
  bottom:28px;
  width:250px;
  height:138px;
  border:5px solid #2340ff;
  border-radius:28px;
  transform:translateX(-50%);
}
.support-ai .support-visual::after{
  left:50%;
  bottom:66px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#2340ff;
  box-shadow:
    -76px -34px 0 #32b39b,
    76px -34px 0 #ffbd4a,
    -76px 42px 0 #8f74ff,
    76px 42px 0 #2340ff,
    0 -70px 0 #2340ff;
  transform:translateX(-50%);
}
.support-expert .support-visual{
  background:
    linear-gradient(180deg,transparent,#f7f2ff 56%),
    radial-gradient(circle at 66% 64%,rgba(143,116,255,.18),transparent 34%);
}
.support-expert .support-visual::before{
  left:72px;
  bottom:30px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 34%,#fff 0 20%,transparent 21%),
    radial-gradient(circle at 50% 62%,#fff 0 34%,transparent 35%),
    linear-gradient(135deg,#2340ff,#8f74ff);
  box-shadow:164px -18px 0 -42px rgba(255,189,74,.9),214px 36px 0 -56px rgba(50,179,155,.9);
}
.support-expert .support-visual::after{
  left:246px;
  bottom:58px;
  width:96px;
  height:58px;
  border-radius:18px;
  background:#fff;
  box-shadow:0 16px 40px rgba(60,64,67,.16);
}
.support-service .support-visual{
  background:
    linear-gradient(180deg,transparent,#fff6e7 54%),
    radial-gradient(circle at 58% 62%,rgba(255,189,74,.25),transparent 36%);
}
.support-service .support-visual::before{
  right:44px;
  bottom:32px;
  width:210px;
  height:128px;
  border-radius:30px 30px 18px 18px;
  background:linear-gradient(135deg,#ffbd4a,#ff7b5f);
  box-shadow:-138px 30px 0 -28px #2340ff,-90px -18px 0 -38px #32b39b;
}
.support-service .support-visual::after{
  right:86px;
  bottom:124px;
  width:126px;
  height:46px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.82);
  border-bottom-color:transparent;
  transform:rotate(-8deg);
}
@media(max-width:900px){
  .statement .wrap{
    padding-left:20px;
    padding-right:0;
  }
  .statement-head{
    padding-right:20px;
  }
  .statement .big u{
    font-size:clamp(34px,10vw,48px)!important;
  }
  .statement .big::after{
    font-size:17px;
  }
  .support-cards{
    grid-auto-columns:minmax(280px,82vw);
    padding-right:20px;
  }
  .support-card{
    min-height:390px;
    padding:28px 26px;
    border-radius:24px;
  }
  .support-card h3{
    font-size:25px;
  }
  .support-card p{
    font-size:15.5px;
  }
}

/* corrected about headline layout */
.statement-title{
  max-width:980px;
  color:#1d1d1f;
  font-size:clamp(42px,4.7vw,72px);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:760;
}
.statement-lead{
  max-width:760px;
  margin-top:20px;
  color:#5f6673;
  font-size:clamp(18px,1.7vw,22px);
  line-height:1.5;
  font-weight:520;
}
.statement .big::after{
  content:none!important;
}
@media(max-width:900px){
  .statement-title{
    font-size:clamp(34px,10vw,48px);
  }
  .statement-lead{
    font-size:17px;
  }
}

/* refined about copy and photographic support cards */
.statement{
  padding-top:92px!important;
}
.statement-head{
  margin-bottom:34px!important;
}
.statement-title{
  max-width:820px!important;
  font-size:clamp(32px,3vw,46px)!important;
  line-height:1.08!important;
  letter-spacing:-.028em!important;
  font-weight:690!important;
  white-space:nowrap;
}
.statement-lead{
  max-width:none!important;
  margin-top:18px!important;
  font-size:clamp(15px,1.08vw,17px)!important;
  line-height:1.65!important;
  color:#68707d!important;
  font-weight:480!important;
  white-space:nowrap;
}
.support-card{
  min-height:440px!important;
  padding:32px 34px!important;
}
.support-k{
  font-size:15px!important;
  margin-bottom:10px!important;
}
.support-card h3{
  max-width:none!important;
  font-size:24px!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
  white-space:nowrap;
}
.support-card p{
  max-width:19em!important;
  margin-top:14px!important;
  font-size:15.5px!important;
  line-height:1.5!important;
  color:#59616d!important;
}
.support-visual{
  height:246px!important;
  z-index:0!important;
  overflow:hidden;
  background-size:cover!important;
  background-position:center!important;
}
.support-visual img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:saturate(1.42) contrast(1.08) brightness(1.04);
}
.support-course .support-visual img{
  object-position:center 48%;
}
.support-ai .support-visual img{
  object-position:center 50%;
}
.support-expert .support-visual img{
  object-position:center 42%;
}
.support-service .support-visual img{
  object-position:center 50%;
}
.support-visual::before{
  inset:0!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  transform:none!important;
  z-index:1;
  display:block!important;
  opacity:.14;
  mix-blend-mode:multiply;
  pointer-events:none;
  box-shadow:none!important;
}
.support-visual::after{
  content:"";
  display:none!important;
}
.support-course .support-visual{
  background-image:none!important;
  background-position:center 44%!important;
}
.support-course .support-visual::before{
  background:
    radial-gradient(circle at 18% 78%,rgba(255,190,54,.72),transparent 36%),
    radial-gradient(circle at 78% 70%,rgba(45,108,255,.64),transparent 42%),
    linear-gradient(115deg,rgba(39,195,156,.28),rgba(255,255,255,0) 52%)!important;
}
.support-ai .support-visual{
  background-image:none!important;
  background-position:center 52%!important;
}
.support-ai .support-visual::before{
  background:
    radial-gradient(circle at 22% 76%,rgba(25,102,255,.78),transparent 38%),
    radial-gradient(circle at 78% 62%,rgba(174,80,255,.66),transparent 42%),
    linear-gradient(105deg,rgba(26,214,255,.32),rgba(255,255,255,0) 58%)!important;
}
.support-expert .support-visual{
  background-image:none!important;
  background-position:center 46%!important;
}
.support-expert .support-visual::before{
  background:
    radial-gradient(circle at 20% 78%,rgba(33,196,154,.64),transparent 38%),
    radial-gradient(circle at 80% 68%,rgba(255,168,74,.64),transparent 42%),
    linear-gradient(115deg,rgba(90,124,255,.26),rgba(255,255,255,0) 56%)!important;
}
.support-service .support-visual{
  background-image:none!important;
  background-position:center 52%!important;
}
.support-service .support-visual::before{
  background:
    radial-gradient(circle at 18% 72%,rgba(21,132,255,.72),transparent 36%),
    radial-gradient(circle at 82% 66%,rgba(255,118,46,.72),transparent 42%),
    linear-gradient(110deg,rgba(45,214,178,.26),rgba(255,255,255,0) 56%)!important;
}
@media(max-width:900px){
  .statement{
    padding-top:72px!important;
  }
  .statement-title{
    font-size:clamp(31px,8.5vw,42px)!important;
    white-space:normal;
  }
  .statement-lead{
    font-size:16px!important;
    white-space:normal;
  }
  .support-card{
    min-height:400px!important;
  }
  .support-card h3{
    font-size:23px!important;
    white-space:normal;
  }
}

/* ---------------- Education fields standalone section ---------------- */
.education-fields{
  position:relative;
  overflow:hidden;
  background:#f5f6f8;
}
.education-fields::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 16%,rgba(31,60,255,.09),transparent 30%),
    radial-gradient(circle at 86% 20%,rgba(255,190,54,.12),transparent 28%),
    linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,0) 52%);
}
.education-fields .wrap{
  position:relative;
  z-index:1;
}
.fields-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,440px);
  gap:56px;
  align-items:end;
  margin-bottom:52px;
}
.fields-head .h2{
  margin:0;
  white-space:nowrap;
}
.fields-head .lead{
  max-width:none;
  margin:0;
  padding-bottom:6px;
  font-size:16.5px;
  line-height:1.8;
  color:var(--brand-slate);
}

/* ===== 服务领域：2列大卡 · 图文横向左右交替 · 强动效（2026-07 重做） ===== */
.field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
}
.field-card{
  --fc:#1f3cff;
  --fc-soft:rgba(31,60,255,.10);
  --fc-line:rgba(31,60,255,.34);
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:330px;
  overflow:hidden;
  border:1px solid var(--brand-line);
  border-radius:26px;
  background:#fff;
  box-shadow:0 2px 12px rgba(60,64,67,.07);
  transform:translateZ(0);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
}
.field-card:nth-child(even){flex-direction:row-reverse}
.field-overseas{--fc:#22a06b;--fc-soft:rgba(34,160,107,.12);--fc-line:rgba(34,160,107,.34)}
.field-subject{--fc:#f0a415;--fc-soft:rgba(240,164,21,.15);--fc-line:rgba(240,164,21,.38)}
.field-special{--fc:#ff6a3d;--fc-soft:rgba(255,106,61,.12);--fc-line:rgba(255,106,61,.34)}

.field-card::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(120deg,transparent 0 40%,rgba(255,255,255,.55) 50%,transparent 62%);
  transform:translateX(-130%);opacity:.5;
  transition:transform 1s var(--ease);
}
.field-card:hover{
  transform:translateY(-7px);
  border-color:var(--fc-line);
  box-shadow:0 26px 60px rgba(35,44,68,.17);
}
.field-card:hover::before{transform:translateX(130%)}

.field-photo{
  position:relative;flex:none;width:41%;align-self:stretch;overflow:hidden;background:#e9edf5;
}
.field-photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle at 24% 76%,var(--fc-soft),transparent 44%);
}
.field-photo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.05) 76%,rgba(255,255,255,.30));
}
.field-card:nth-child(even) .field-photo::after{
  background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,.05) 76%,rgba(255,255,255,.30));
}
.field-photo img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.16) contrast(1.03);
  transform:scale(1.02);
  transition:transform 1.1s var(--ease),filter 1.1s var(--ease);
}
.field-card:hover .field-photo img{transform:scale(1.09);filter:saturate(1.28) contrast(1.05)}
.field-overseas .field-photo img{object-position:center 48%}
.field-subject .field-photo img{object-position:center 44%}
.field-special .field-photo img{object-position:center 52%}

.field-copy{
  position:relative;z-index:2;flex:1;min-width:0;
  padding:38px 42px;
  display:flex;flex-direction:column;justify-content:center;
}
.field-k{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:9px;
  margin-bottom:16px;padding:6px 13px 6px 11px;
  border-radius:999px;background:var(--fc-soft);color:var(--fc);
  font-size:12.5px;font-weight:750;letter-spacing:.05em;
}
.field-k::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--fc);
  animation:fk-pulse 2.6s var(--ease) infinite;
}
@keyframes fk-pulse{
  0%,100%{box-shadow:0 0 0 0 var(--fc-line)}
  60%{box-shadow:0 0 0 8px transparent}
}
.field-card h3{
  margin:0;color:var(--brand-ink);
  font-size:clamp(26px,2.3vw,34px);line-height:1.14;letter-spacing:-.03em;
}
.field-card h3::after{
  content:"";display:block;width:40px;height:4px;margin-top:15px;border-radius:999px;
  background:linear-gradient(90deg,var(--fc),var(--fc-soft));
  transition:width .55s var(--ease);
}
.field-card:hover h3::after{width:78px}
.field-card p{
  margin-top:16px;max-width:46ch;
  color:var(--brand-slate);font-size:15px;line-height:1.72;
}
.field-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.field-tags span{
  display:inline-flex;align-items:center;min-height:32px;padding:6px 13px;
  border:1px solid var(--fc-soft);border-radius:999px;background:#fff;color:#29344a;
  font-size:12.5px;font-weight:650;box-shadow:0 6px 16px rgba(60,64,67,.05);
  transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.field-card:hover .field-tags span{background:var(--fc);color:#fff;border-color:transparent}
.field-card:hover .field-tags span:nth-child(1){transform:translateY(-4px)}
.field-card:hover .field-tags span:nth-child(2){transform:translateY(-7px)}
.field-card:hover .field-tags span:nth-child(3){transform:translateY(-4px)}

@media(max-width:1160px){
  .field-grid{grid-template-columns:1fr}
  .field-card{min-height:300px}
  .fields-head{grid-template-columns:1fr}
  .fields-head .lead{max-width:760px}
}
@media(max-width:680px){
  .education-fields{padding-top:72px}
  .fields-head .h2{white-space:normal}
  .field-card,.field-card:nth-child(even){flex-direction:column}
  .field-photo{width:100%;height:188px;flex:none}
  .field-copy{padding:26px 24px 30px}
  .field-card h3{font-size:26px}
  .field-photo::after,.field-card:nth-child(even) .field-photo::after{
    background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.24))
  }
}
@media(prefers-reduced-motion:reduce){
  .field-card,.field-card::before,.field-photo img,.field-tags span,.field-k::before,.field-card h3::after{
    transition:none!important;animation:none!important
  }
}


/* ===== 服务领域 标题↔右侧小字 互动排版（2026-07） ===== */
.fields-title{position:relative;display:inline-block}
.fields-title .ft-hl{
  background:linear-gradient(90deg,#1f3cff 0%,#6a83ff 45%,#1f3cff 90%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ft-sheen 7.5s linear infinite;
}
@keyframes ft-sheen{to{background-position:230% 0}}
.fields-title::after{
  content:"";display:inline-block;width:.15em;height:.15em;border-radius:50%;
  background:#1f3cff;margin-left:.16em;vertical-align:.16em;
  transition:transform .45s var(--ease);
  animation:ft-dot 2.4s var(--ease) infinite;
}
@keyframes ft-dot{0%,100%{box-shadow:0 0 0 0 rgba(31,60,255,.34)}60%{box-shadow:0 0 0 .16em rgba(31,60,255,0)}}
.fields-head .lead{position:relative;padding-top:22px}
.fields-head .lead::before{
  content:"";position:absolute;top:0;left:0;width:28px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,#1f3cff,#9fb0ff);opacity:.6;
  transition:width .6s var(--ease),opacity .6s var(--ease);
}
.fields-head:hover .lead::before{width:66px;opacity:1}
.fields-head:hover .fields-title::after{transform:scale(1.5)}
@media(prefers-reduced-motion:reduce){
  .fields-title .ft-hl,.fields-title::after{animation:none!important}
}


/* ===== 两大核心业务（课程 / 专家）产品卡 —— 与服务领域刻意区分（2026-07） ===== */
.biz{background:#f7f9fc;position:relative;overflow:hidden}
.biz::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 88% 8%,rgba(31,60,255,.06),transparent 34%),
            radial-gradient(circle at 6% 92%,rgba(34,160,107,.06),transparent 34%)}
.biz .wrap{position:relative;z-index:1}
.biz-head{margin-bottom:46px}
.biz-head .h2{margin:12px 0 0}
.biz-lead{margin-top:18px;max-width:560px;color:var(--brand-slate);font-size:16.5px;line-height:1.8}

.biz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:28px}
.biz-card{
  --bc:#1f3cff;--bc-soft:rgba(31,60,255,.1);
  display:block;text-decoration:none;background:#fff;
  border:1px solid var(--brand-line);border-radius:28px;overflow:hidden;
  box-shadow:0 2px 14px rgba(60,64,67,.07);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease);
}
.biz-expert{--bc:#17936a;--bc-soft:rgba(23,147,106,.12)}
.biz-edu{--bc:#6D4AEF;--bc-soft:rgba(109,74,239,.12)}
.biz-card:hover{transform:translateY(-8px);border-color:var(--bc-soft);box-shadow:0 30px 64px rgba(35,44,68,.18)}
.biz-photo{position:relative;aspect-ratio:16/9;overflow:hidden;background:#e9edf5}
.biz-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  filter:saturate(1.05);transition:transform 1.1s var(--ease)}
.biz-card:hover .biz-photo img{transform:scale(1.09)}
.biz-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(20,26,46,.16),transparent 46%)}

.biz-body{position:relative;padding:46px 34px 34px}
.biz-badge{position:absolute;top:-30px;left:32px;width:60px;height:60px;border-radius:19px;
  background:#fff;color:var(--bc);display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(35,44,68,.16);
  transition:transform .5s var(--ease)}
.biz-card:hover .biz-badge{transform:translateY(-3px) rotate(-4deg)}
.biz-body h3{margin:0;color:var(--brand-ink);font-size:25px;font-weight:600;letter-spacing:-.02em}
.biz-body p{margin-top:12px;color:var(--brand-slate);font-size:15px;line-height:1.72;max-width:42ch}
.biz-feat{margin-top:16px;color:#5a6478;font-size:13.5px;font-weight:600;display:flex;flex-wrap:wrap;align-items:center}
.biz-feat i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--bc);opacity:.55;margin:0 10px}
.biz-cta{display:inline-flex;align-items:center;gap:9px;margin-top:24px;
  padding:12px 22px;border-radius:999px;background:var(--bc);color:#fff;
  font-size:14.5px;font-weight:650;
  box-shadow:0 10px 26px var(--bc-soft);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.biz-cta b{font-weight:400;transition:transform .4s var(--ease)}
.biz-card:hover .biz-cta{transform:translateY(-1px)}
.biz-card:hover .biz-cta b{transform:translateX(5px)}

@media(max-width:900px){
  .biz-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .biz-body{padding:42px 24px 30px}
}
@media(prefers-reduced-motion:reduce){
  .biz-card,.biz-photo img,.biz-badge,.biz-cta,.biz-cta b{transition:none!important}
}
.biz-head .biz-h2{white-space:nowrap;color:var(--brand-ink)}
@media(max-width:760px){.biz-head .biz-h2{white-space:normal}}