/* ==========================================================================
   TUNNEL — product ecosystem presentation
   Design system + page styles.  No external dependencies, no web fonts.
   Palette is derived from the TUNNEL app icon (chrome mark on cool blue).
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:#0B0F1A;
  --ink-2:#101728;
  --ink-3:#182034;
  --ink-4:#222C46;

  --paper:#FFFFFF;
  --paper-2:#F6F8FD;
  --paper-3:#EBF1FA;

  --text:#0B0F1A;
  --text-2:#3B4762;
  --muted:#63708C;
  --muted-d:#93A0BC;
  --faint-d:#66738F;

  --line:rgba(11,15,26,.10);
  --line-2:rgba(11,15,26,.06);
  --line-d:rgba(255,255,255,.11);
  --line-d2:rgba(255,255,255,.06);

  --blue:#2B67EE;
  --blue-2:#5B8DF5;
  --blue-soft:rgba(43,103,238,.10);
  --steel:#8CA3C9;
  --live:#22C55E;
  --violet:#7C6BF2;

  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px;
  --shadow-s:0 1px 2px rgba(11,15,26,.05), 0 4px 14px rgba(11,15,26,.05);
  --shadow-m:0 2px 6px rgba(11,15,26,.05), 0 18px 44px rgba(17,28,56,.10);
  --shadow-l:0 4px 12px rgba(11,15,26,.06), 0 40px 90px rgba(17,28,56,.18);
  --shadow-d:0 30px 80px rgba(0,0,0,.55);

  --maxw:1200px;
  --nav-h:66px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, "PingFang SC", "HarmonyOS Sans SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 18px)}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px}

/* CJK renders best with a touch more leading and no negative tracking */
html[lang="zh-CN"] body{line-height:1.78}
html[lang="zh-CN"] .h1,html[lang="zh-CN"] .h2{letter-spacing:-.01em}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.sec{padding:104px 0; position:relative}
.sec-sm{padding:72px 0}
.dark{background:var(--ink); color:#EEF2FA}
.dark .h2{color:#FFF}
.dark .lede,.dark .muted{color:var(--muted-d)}
.tint{background:linear-gradient(180deg,var(--paper) 0%, var(--paper-2) 40%, var(--paper-2) 60%, var(--paper) 100%)}

/* ---------- type ---------- */
.h1{
  font-size:clamp(2.35rem,5.4vw,4.15rem); line-height:1.06; font-weight:760;
  letter-spacing:-.032em; color:var(--text);
}
.h2{
  font-size:clamp(1.85rem,3.5vw,2.85rem); line-height:1.16; font-weight:730;
  letter-spacing:-.026em;
}
.h3{font-size:1.16rem; font-weight:660; letter-spacing:-.012em; line-height:1.42}
.lede{font-size:clamp(1.02rem,1.35vw,1.16rem); color:var(--muted); line-height:1.72; max-width:64ch}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.735rem; font-weight:680; letter-spacing:.15em; text-transform:uppercase;
  color:var(--blue);
}
.eyebrow::before{content:""; width:22px; height:1.5px; background:currentColor; opacity:.55}
.dark .eyebrow{color:var(--blue-2)}
html[lang="zh-CN"] .eyebrow{letter-spacing:.09em}

.sec-head{max-width:760px; margin-bottom:56px}
.sec-head .h2{margin:16px 0 18px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center .lede{margin-inline:auto}
.sec-head.center .eyebrow::before{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 22px;
  border-radius:999px; font-weight:620; font-size:.95rem; letter-spacing:-.008em;
  transition:transform .18s ease, box-shadow .22s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn svg{width:17px; height:17px; flex:none}
.btn-primary{background:var(--ink); color:#fff; box-shadow:0 2px 6px rgba(11,15,26,.16), 0 12px 28px rgba(11,15,26,.20)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 4px 10px rgba(11,15,26,.18), 0 18px 40px rgba(11,15,26,.26)}
.btn-ghost{border:1px solid var(--line); background:rgba(255,255,255,.7); color:var(--text)}
.btn-ghost:hover{border-color:rgba(11,15,26,.24); transform:translateY(-2px); background:#fff}
.dark .btn-primary{background:#fff; color:var(--ink); box-shadow:0 12px 34px rgba(0,0,0,.5)}
.dark .btn-ghost{border-color:var(--line-d); background:rgba(255,255,255,.05); color:#E9EEF8}
.dark .btn-ghost:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24)}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80; height:var(--nav-h);
  background:rgba(255,255,255,.72); backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent; transition:border-color .25s ease, background .25s ease;
}
.nav.scrolled{border-bottom-color:var(--line); background:rgba(255,255,255,.9)}
.nav-in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:24px; height:100%;
  display:flex; align-items:center; gap:18px;
}
.brand{display:flex; align-items:center; gap:11px; flex:none}
.brand img{width:26px; height:26px; object-fit:contain}
.brand b{font-size:1.06rem; font-weight:760; letter-spacing:.12em}
.brand .tag{
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-soft); padding:3px 8px; border-radius:6px;
  margin-left:2px;
}
html[lang="zh-CN"] .brand .tag{letter-spacing:.02em}

.nav-links{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav-links a{
  padding:8px 13px; border-radius:9px; font-size:.9rem; font-weight:540; color:var(--text-2);
  transition:color .15s ease, background .15s ease;
}
.nav-links a:hover{color:var(--text); background:rgba(11,15,26,.05)}
.nav-right{display:flex; align-items:center; gap:12px; margin-left:14px; flex:none}

/* language switch */
.lang{
  display:inline-flex; padding:3px; gap:2px; border-radius:999px;
  background:rgba(11,15,26,.055); border:1px solid var(--line-2);
}
.lang button{
  padding:5px 13px; border-radius:999px; font-size:.815rem; font-weight:640; color:var(--muted);
  transition:all .18s ease; line-height:1.4;
}
.lang button.on{background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(11,15,26,.13)}
.lang button:not(.on):hover{color:var(--text)}

.nav-toggle{display:none; width:40px; height:40px; border-radius:10px; align-items:center; justify-content:center; margin-left:auto}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; display:block; width:19px; height:1.8px; background:var(--text); border-radius:2px;
  transition:transform .26s ease, opacity .2s ease;
}
.nav-toggle span::before{transform:translateY(-6px)}
.nav-toggle span::after{transform:translateY(4.2px)}
body.menu-open .nav-toggle span{background:transparent}
body.menu-open .nav-toggle span::before{transform:rotate(45deg)}
body.menu-open .nav-toggle span::after{transform:translateY(-1.8px) rotate(-45deg)}

.nav-menu{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:79;
  background:rgba(255,255,255,.97); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line); padding:14px 24px 22px;
  display:none; flex-direction:column; gap:2px;
  max-height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
body.menu-open .nav-menu{display:flex}
.nav-menu a{padding:12px 6px; font-size:1rem; font-weight:560; border-bottom:1px solid var(--line-2)}
.nav-menu .lang{align-self:flex-start; margin-top:16px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative; padding:calc(var(--nav-h) + 74px) 0 0; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(91,141,245,.20), transparent 62%),
    radial-gradient(820px 520px at 6% 8%, rgba(160,190,240,.20), transparent 60%),
    linear-gradient(180deg,#FBFCFE 0%,#EEF3FB 52%,#FFFFFF 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(11,15,26,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,15,26,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(950px 560px at 50% 22%,#000 5%,transparent 78%);
          mask-image:radial-gradient(950px 560px at 50% 22%,#000 5%,transparent 78%);
}
.hero-copy{max-width:840px}
.hero .h1{margin:20px 0 22px}
.hero .lede{font-size:clamp(1.05rem,1.5vw,1.22rem); max-width:60ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

.pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:38px}
.pill{
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px;
  border-radius:999px; background:rgba(255,255,255,.78); border:1px solid var(--line-2);
  font-size:.8rem; font-weight:580; color:var(--text-2); backdrop-filter:blur(8px);
}
.pill svg{width:14px; height:14px; opacity:.62}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--live)}

/* hero composition */
.hero-stage{
  position:relative; margin-top:64px; padding-bottom:96px;
  --lift:0px;
}
.stage-desk{
  position:relative; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-l); border:1px solid rgba(11,15,26,.10);
  background:#fff; transform:translateY(var(--lift));
}
.stage-desk .bar{
  height:34px; background:linear-gradient(180deg,#FAFBFD,#F1F4F9);
  border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:7px; padding-inline:14px;
}
.stage-desk .bar i{width:10px; height:10px; border-radius:50%; background:#DFE4EC; display:block}
.stage-desk .bar i:nth-child(1){background:#F0A9A0}
.stage-desk .bar i:nth-child(2){background:#F3D08A}
.stage-desk .bar i:nth-child(3){background:#A9DCA9}
.stage-desk .bar em{
  margin-left:auto; margin-right:auto; font-style:normal; font-size:.7rem;
  color:var(--muted); letter-spacing:.06em; font-weight:600;
}
.stage-desk img{width:100%; display:block}

.stage-phone{
  position:absolute; left:-14px; bottom:6px; width:200px; z-index:3;
  border-radius:26px; overflow:hidden; background:#0B0F1A; padding:6px;
  box-shadow:0 30px 70px rgba(17,28,56,.34), 0 2px 6px rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.14);
}
.stage-phone img{border-radius:20px}

.stage-card{
  position:absolute; right:-10px; top:14%; width:250px; z-index:3;
  border-radius:14px; overflow:hidden; background:var(--ink-2);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(17,28,56,.4);
}
.stage-card .cap{
  display:flex; align-items:center; gap:8px; padding:9px 12px; background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.07); color:#CBD6EA; font-size:.72rem; font-weight:640;
  letter-spacing:.04em;
}
.stage-card .cap .dot{width:6px; height:6px; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.stage-card img{width:100%; object-fit:cover; object-position:top center; max-height:250px}

/* ==========================================================================
   SCALE STRIP
   ========================================================================== */
.scale{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); background:var(--paper-2)}
.scale-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:0}
.scale-cell{padding:34px 22px; text-align:center; border-right:1px solid var(--line-2)}
.scale-cell:last-child{border-right:0}
.scale-num{
  font-size:clamp(1.7rem,2.9vw,2.35rem); font-weight:740; letter-spacing:-.03em;
  line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums;
}
.scale-num .u{font-size:.62em; margin-left:2px; color:var(--blue); font-weight:700}
.scale-lab{font-size:.8rem; color:var(--muted); margin-top:7px; font-weight:540}
.scale-note{text-align:center; font-size:.775rem; color:var(--muted-d); padding:0 24px 26px; margin-top:-6px}

/* ==========================================================================
   ECOSYSTEM (the hero moment)
   ========================================================================== */
.eco{position:relative; overflow:hidden; background:var(--ink)}
.eco::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 560px at 50% 34%, rgba(59,110,235,.24), transparent 66%),
    radial-gradient(700px 460px at 12% 88%, rgba(124,107,242,.14), transparent 64%);
  pointer-events:none;
}
.eco::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(760px 520px at 50% 44%,#000,transparent 76%);
          mask-image:radial-gradient(760px 520px at 50% 44%,#000,transparent 76%);
}
.eco .wrap{position:relative; z-index:2}

.orbit{
  position:relative; margin:20px auto 0; max-width:1060px;
  display:grid; grid-template-columns:1fr 250px 1fr; grid-template-rows:auto auto auto;
  gap:26px 40px; align-items:center; justify-items:center;
}
.orbit svg.wires{position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; overflow:visible}
.wires path{fill:none; stroke:rgba(139,170,240,.30); stroke-width:1.4}
.wires .flow{
  stroke:url(#tg); stroke-width:1.8; stroke-dasharray:5 190; stroke-linecap:round;
  animation:flow 3.6s linear infinite;
}
.wires .flow.d2{animation-delay:.9s} .wires .flow.d3{animation-delay:1.8s} .wires .flow.d4{animation-delay:2.7s}
@keyframes flow{to{stroke-dashoffset:-390}}

.core{
  grid-column:2; grid-row:2; position:relative; z-index:3;
  width:200px; height:200px; border-radius:44px;
  display:grid; place-items:center; justify-self:center;
  background:linear-gradient(150deg,#F2F6FD 0%,#D8E3F5 55%,#C3D3EC 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.32), 0 30px 80px rgba(6,14,34,.7), inset 0 1px 0 rgba(255,255,255,.9);
}
.core img{width:106px; height:106px; object-fit:contain}
.core-name{
  position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
  font-size:.82rem; font-weight:740; letter-spacing:.3em; color:#DCE5F5; white-space:nowrap;
}
.ring{
  position:absolute; border-radius:50%; border:1px solid rgba(147,177,240,.20);
  left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none;
}
.ring.r1{width:290px; height:290px}
.ring.r2{width:400px; height:400px; border-color:rgba(147,177,240,.12)}
.ring.r3{width:520px; height:520px; border-color:rgba(147,177,240,.07)}
.pulse{animation:pulse 4.5s ease-out infinite}
.pulse.p2{animation-delay:1.5s} .pulse.p3{animation-delay:3s}
@keyframes pulse{
  0%{opacity:.55; transform:translate(-50%,-50%) scale(.86)}
  70%{opacity:0; transform:translate(-50%,-50%) scale(1.12)}
  100%{opacity:0}
}

.node{
  position:relative; z-index:3; width:100%; max-width:330px;
  background:rgba(255,255,255,.045); border:1px solid var(--line-d);
  border-radius:var(--r-l); overflow:hidden; backdrop-filter:blur(12px);
  box-shadow:0 24px 60px rgba(4,10,26,.5);
  transition:transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.node:hover{transform:translateY(-5px); border-color:rgba(255,255,255,.24)}
.node .shot{height:132px; overflow:hidden; background:#0E1524; border-bottom:1px solid var(--line-d2)}
.node .shot img{width:100%; height:100%; object-fit:cover; object-position:top center}
.node .body{padding:16px 18px 18px}
.node .kick{
  display:flex; align-items:center; gap:8px; font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#7FA2E8; margin-bottom:7px;
}
html[lang="zh-CN"] .node .kick{letter-spacing:.06em}
.node .kick svg{width:14px; height:14px}
.node h3{font-size:1.02rem; font-weight:680; color:#fff; margin-bottom:6px}
.node p{font-size:.855rem; color:var(--muted-d); line-height:1.6}
.node .plat{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.node .plat span{
  font-size:.685rem; font-weight:600; padding:3px 9px; border-radius:6px;
  background:rgba(255,255,255,.07); color:#B8C6DE; border:1px solid var(--line-d2);
}
.n1{grid-column:1; grid-row:1} .n2{grid-column:3; grid-row:1}
.n3{grid-column:1; grid-row:3} .n4{grid-column:3; grid-row:3}

/* architecture lanes */
.lanes{margin-top:104px; border:1px solid var(--line-d); border-radius:var(--r-l); overflow:hidden; background:rgba(255,255,255,.028)}
.lane{display:grid; grid-template-columns:190px 1fr; border-bottom:1px solid var(--line-d2)}
.lane:last-child{border-bottom:0}
.lane-t{
  padding:20px 22px; border-right:1px solid var(--line-d2); background:rgba(255,255,255,.022);
  display:flex; flex-direction:column; gap:3px; justify-content:center;
}
.lane-t b{font-size:.9rem; font-weight:660; color:#EAF0FA}
.lane-t span{font-size:.72rem; color:var(--faint-d); letter-spacing:.06em; text-transform:uppercase; font-weight:600}
html[lang="zh-CN"] .lane-t span{letter-spacing:.02em; text-transform:none}
.lane-c{padding:16px 18px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:9px;
  background:rgba(255,255,255,.055); border:1px solid var(--line-d2);
  font-size:.82rem; font-weight:560; color:#CFDAEC;
}
.chip svg{width:14px; height:14px; opacity:.7}
.chip.hl{background:rgba(43,103,238,.16); border-color:rgba(91,141,245,.34); color:#CBDCFF}

/* ==========================================================================
   SURFACE SECTIONS (mobile / desktop / admin)
   ========================================================================== */
.split{display:grid; grid-template-columns:1fr 1.06fr; gap:64px; align-items:center}
/* grid items must be allowed to shrink below their min-content width, or a
   wide child (the phone fan, a screenshot) blows the track out and the whole
   page scrolls sideways. */
.split > *{min-width:0}
.split.rev .split-media{order:-1}
.feat{display:flex; flex-direction:column; gap:2px; margin-top:30px}
.feat li{
  display:flex; gap:13px; padding:13px 0; border-top:1px solid var(--line-2); list-style:none;
}
.feat li:last-child{border-bottom:1px solid var(--line-2)}
.dark .feat li{border-color:var(--line-d2)}
.feat .ic{
  flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue); margin-top:1px;
}
.dark .feat .ic{background:rgba(91,141,245,.14); color:#8DB0F5}
.feat .ic svg{width:16px; height:16px}
.feat b{display:block; font-size:.945rem; font-weight:640; letter-spacing:-.01em}
.dark .feat b{color:#F0F4FB}
.feat p{font-size:.865rem; color:var(--muted); line-height:1.6; margin-top:2px}
.dark .feat p{color:var(--muted-d)}
.feat ul{margin:0; padding:0}

/* phone fan — absolutely positioned so the three devices never widen the
   grid track they sit in (see .split > * min-width note above). */
.phones{position:relative; height:512px; --pw:208px; --fan:104px}
.phone{
  position:absolute; left:50%; bottom:0; width:var(--pw); margin-left:calc(var(--pw) / -2);
  border-radius:30px; background:#0B0F1A; padding:7px;
  box-shadow:0 28px 66px rgba(17,28,56,.28), 0 2px 8px rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.16);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.phone img{border-radius:24px; width:100%; display:block}
.phone.a{z-index:1; transform:translateX(calc(var(--fan) * -1)) rotate(-6deg) scale(.9)}
.phone.b{z-index:3; transform:translateY(-26px)}
.phone.c{z-index:1; transform:translateX(var(--fan)) rotate(6deg) scale(.9)}
.phones:hover .phone.a{transform:translateX(calc(var(--fan) * -1.12)) rotate(-8deg) scale(.92)}
.phones:hover .phone.c{transform:translateX(calc(var(--fan) * 1.12)) rotate(8deg) scale(.92)}
.phones:hover .phone.b{transform:translateY(-34px)}
.phones:hover .phone.b{transform:translateY(-20px)}

/* framed screenshot */
.frame{
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-m); background:#fff;
}
.dark .frame{border-color:var(--line-d); box-shadow:var(--shadow-d); background:var(--ink-2)}
.frame .bar{
  height:30px; background:linear-gradient(180deg,#FAFBFD,#F1F4F9); border-bottom:1px solid var(--line-2);
  display:flex; align-items:center; gap:6px; padding-inline:12px;
}
.dark .frame .bar{background:rgba(255,255,255,.045); border-bottom-color:var(--line-d2)}
.frame .bar i{width:9px; height:9px; border-radius:50%; background:#DFE4EC; display:block}
.dark .frame .bar i{background:rgba(255,255,255,.16)}
.frame .bar em{margin:0 auto; font-style:normal; font-size:.68rem; color:var(--muted); font-weight:600; letter-spacing:.05em}
.dark .frame .bar em{color:var(--faint-d)}
.frame.clip img{max-height:520px; object-fit:cover; object-position:top center; width:100%}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.shotcap{font-size:.76rem; color:var(--muted); text-align:center; margin-top:9px; font-weight:560}
.dark .shotcap{color:var(--faint-d)}

.thumbs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px}
.thumb{
  border-radius:12px; overflow:hidden; border:1px solid var(--line-d); background:var(--ink-2);
  box-shadow:0 18px 44px rgba(4,10,26,.45);
}
.thumb img{width:100%; height:190px; object-fit:cover; object-position:top center}
.thumb .t{padding:11px 13px; font-size:.8rem; font-weight:620; color:#DCE4F2; border-top:1px solid var(--line-d2)}

/* ==========================================================================
   FEATURE GRID
   ========================================================================== */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:var(--r-l); overflow:hidden}
.cell{background:var(--paper); padding:28px 26px 30px; transition:background .2s ease}
.cell:hover{background:var(--paper-2)}
.cell .ic{
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center; margin-bottom:15px;
  background:linear-gradient(150deg,rgba(43,103,238,.13),rgba(91,141,245,.06));
  color:var(--blue); border:1px solid rgba(43,103,238,.13);
}
.cell .ic svg{width:19px; height:19px}
.cell h3{margin-bottom:7px}
.cell p{font-size:.875rem; color:var(--muted); line-height:1.65}

/* security band */
.sec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.scard{
  padding:24px 24px 26px; border-radius:var(--r-m); border:1px solid var(--line-d);
  background:rgba(255,255,255,.035);
}
.scard .ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; margin-bottom:14px;
  background:rgba(34,197,94,.12); color:#4ADE80; border:1px solid rgba(34,197,94,.18)}
.scard .ic svg{width:17px; height:17px}
.scard h3{color:#fff; margin-bottom:6px; font-size:1rem}
.scard p{font-size:.855rem; color:var(--muted-d); line-height:1.62}

/* ==========================================================================
   TECHNOLOGY
   ========================================================================== */
.stack{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.slab{border:1px solid var(--line); border-radius:var(--r-m); padding:24px; background:var(--paper)}
.slab h3{display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:1rem}
.slab h3 .ic{width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue)}
.slab h3 .ic svg{width:16px; height:16px}
.tags{display:flex; flex-wrap:wrap; gap:7px}
.tag{
  font-size:.795rem; font-weight:570; padding:6px 11px; border-radius:8px;
  background:var(--paper-2); border:1px solid var(--line-2); color:var(--text-2);
}

/* ==========================================================================
   PROGRESS
   ========================================================================== */
.prog{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.pcard{
  border:1px solid var(--line); border-radius:var(--r-m); padding:26px; background:var(--paper);
  box-shadow:var(--shadow-s);
}
.pcard .top{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.pcard .top .ic{width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--ink); color:#fff}
.pcard .top .ic svg{width:18px; height:18px}
.pcard .top b{font-size:1.02rem; font-weight:680}
.pcard .top .st{
  margin-left:auto; font-size:.7rem; font-weight:700; letter-spacing:.06em; padding:4px 9px;
  border-radius:6px; background:rgba(34,197,94,.11); color:#15803D; border:1px solid rgba(34,197,94,.2);
  white-space:nowrap;
}
.plist{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.plist li{display:flex; gap:10px; font-size:.885rem; color:var(--text-2); line-height:1.55}
.plist li svg{width:15px; height:15px; flex:none; margin-top:4px; color:var(--live)}

/* ==========================================================================
   CTA + FOOTER
   ========================================================================== */
.cta{position:relative; overflow:hidden; text-align:center; background:var(--ink)}
.cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(760px 420px at 50% 0%, rgba(59,110,235,.28), transparent 66%);
}
.cta .wrap{position:relative; z-index:2}
.cta img.mk{width:60px; height:60px; margin:0 auto 26px; object-fit:contain; opacity:.95}
.cta .h2{margin-bottom:18px}
.cta .lede{margin-inline:auto; text-align:center}
.cta-row{display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:34px}

.foot{background:var(--ink-2); color:#B9C5DA; padding:56px 0 30px; border-top:1px solid var(--line-d2)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px}
.foot .brand b{color:#fff}
.foot .brand img{width:24px; height:24px}
.foot p.d{font-size:.85rem; color:var(--faint-d); margin-top:14px; max-width:38ch; line-height:1.65}
.foot h4{font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#7F8CA6; margin-bottom:14px}
html[lang="zh-CN"] .foot h4{letter-spacing:.05em}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.foot ul a{font-size:.875rem; color:#B9C5DA; transition:color .15s ease}
.foot ul a:hover{color:#fff}
.foot-bot{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line-d2);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-size:.8rem; color:#6D7A93;
}
.foot-bot .lang{background:rgba(255,255,255,.05); border-color:var(--line-d2)}
.foot-bot .lang button{color:#8E9BB4}
.foot-bot .lang button.on{background:rgba(255,255,255,.13); color:#fff; box-shadow:none}
.foot-bot .sp{margin-left:auto}

/* ==========================================================================
   REVEAL
   ========================================================================== */
.rv{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1; transform:none}
.rv.d1{transition-delay:.07s} .rv.d2{transition-delay:.14s} .rv.d3{transition-delay:.21s} .rv.d4{transition-delay:.28s}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .orbit{grid-template-columns:1fr 200px 1fr; gap:20px 24px}
  .core{width:168px; height:168px; border-radius:38px}
  .core img{width:88px; height:88px}
  .stage-card{width:210px}
  .scale-grid{grid-template-columns:repeat(3,1fr)}
  .scale-cell:nth-child(3){border-right:0}
  .scale-cell:nth-child(n+4){border-top:1px solid var(--line-2)}
}
@media (max-width:940px){
  .nav-links{display:none}
  .nav-right{display:none}
  .nav-toggle{display:flex}
  .split{grid-template-columns:1fr; gap:40px}
  .split.rev .split-media{order:0}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sec-grid{grid-template-columns:repeat(2,1fr)}
  .stack{grid-template-columns:1fr}
  .prog{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px}
  .sec{padding:78px 0}

  /* ecosystem stacks into a single column, wires hidden */
  .orbit{grid-template-columns:1fr; gap:20px}
  .orbit svg.wires,.ring{display:none}
  .core{grid-column:1; grid-row:auto; order:-1; margin-bottom:42px}
  .n1,.n2,.n3,.n4{grid-column:1; grid-row:auto; max-width:520px}
  .node{width:100%}
  .lane{grid-template-columns:1fr}
  .lane-t{border-right:0; border-bottom:1px solid var(--line-d2); padding:14px 18px}
  .lanes{margin-top:56px}
}
@media (max-width:720px){
  .hero{padding-top:calc(var(--nav-h) + 48px)}
  .hero-stage{margin-top:44px; padding-bottom:64px}
  .stage-phone{width:132px; left:-6px; bottom:-24px}
  .stage-card{display:none}
  .phones{height:420px; --pw:168px; --fan:80px}
  .duo{grid-template-columns:1fr}
  .thumbs{grid-template-columns:1fr}
  .thumb img{height:210px}
  .scale-grid{grid-template-columns:repeat(2,1fr)}
  .scale-cell{border-right:1px solid var(--line-2); border-top:1px solid var(--line-2); padding:24px 14px}
  .scale-cell:nth-child(2n){border-right:0}
  .scale-cell:nth-child(-n+2){border-top:0}
  .scale-cell:nth-child(5){grid-column:1/-1; border-right:0}
  .grid{grid-template-columns:1fr}
  .sec-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .wrap{padding-inline:20px}
}
@media (max-width:420px){
  .phones{height:352px; --pw:140px; --fan:64px}
  .brand .tag{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}

@media print{
  .nav,.nav-menu{position:static}
  .rv{opacity:1; transform:none}
}