/* ═══════════════ autoBOSS — CINEMATIC ═══════════════
   Design system ported 1:1 from the reference teardown (docs/REFERENCE_TEARDOWN.md):
   same token architecture, spacing rhythm, trace mechanics, motion envelope.
   Our palette: imperial gold + vermillion on a near-black warm canvas. Our code, our content. */

/* fonts: Be Vietnam Pro, self-hosted woff2, Vietnamese + Latin subsets, 3 weights */
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/BeVietnamPro-400-viet.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../assets/fonts/BeVietnamPro-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/BeVietnamPro-500-viet.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../assets/fonts/BeVietnamPro-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/BeVietnamPro-600-viet.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:'Be Vietnam Pro'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../assets/fonts/BeVietnamPro-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
/* metric-matched fallback so the swap causes no layout shift */
@font-face { font-family:'BVP Fallback'; src:local('Arial');
  size-adjust:100.8%; ascent-override:96%; descent-override:26%; line-gap-override:0%; }

:root {
  --bg:      #131010;
  --bg-2:    #1A1512;
  --panel:   #211B17;
  --gold:    #EFB558;
  --gold-dim: rgba(239,181,88,.14);
  --red:     #D0453C;
  --text:    #F0EAE4;
  --muted:   #B3A796;
  --muted-2: #D3C8B4;
  --line:    rgba(240,234,228,.08);
  --trace:   rgba(216,166,88,.42);
  --trace-bright: #EFB558;
  /* design tokens: one grid, one spacing rhythm, one heading scale */
  --container:     1200px;
  --space-inline:  clamp(20px, 5vw, 72px);
  --space-section: clamp(84px, 12vh, 150px);
  --space-title:   clamp(44px, 7vh, 76px);
  --fs-h2:         clamp(30px, 4.4vw, 58px);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:auto; }
html.lenis, html.lenis body { height:auto; }
/* nothing may widen the page: decorative traces/glows that spill sideways get clipped */
html { overflow-x:hidden; overflow-x:clip; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

body {
  background-color:var(--bg);
  /* backdrop: pure CSS gradients — resolution-independent, no banding at any size */
  background-image:
    radial-gradient(110% 80% at 50% -12%, rgba(216,150,60,.13), rgba(216,150,60,0) 62%),
    radial-gradient(55% 60% at -8% 28%, rgba(216,150,60,.09), rgba(216,150,60,0) 70%),
    radial-gradient(55% 60% at 108% 55%, rgba(239,181,88,.07), rgba(239,181,88,0) 70%),
    radial-gradient(70% 45% at 50% 108%, rgba(208,69,60,.05), rgba(208,69,60,0) 72%);
  background-repeat:no-repeat;
  background-position:top center;
  background-size:100% 100vh;
  color:var(--text);
  font-family:'Be Vietnam Pro', 'BVP Fallback', 'Segoe UI', system-ui, sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-weight:600; letter-spacing:-.02em; }
section { position:relative; z-index:2; }

/* accessibility primitives (present from day one) */
.skip-link {
  position:fixed; left:12px; top:-60px; z-index:300;
  padding:10px 18px; border-radius:10px;
  background:var(--gold); color:#171007; font-weight:600; font-size:14px;
  transition:top .25s;
}
.skip-link:focus-visible { top:12px; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ─────────── section hue shifts ───────────
   one static canvas gave no compositional rhythm — key sections carry their own
   barely-there hue so each block reads as its own room over one background */
.steps    { background:linear-gradient(180deg, rgba(216,150,60,0), rgba(216,150,60,.06) 20%, rgba(216,150,60,.06) 80%, rgba(216,150,60,0)); }
.signature{ background:linear-gradient(180deg, rgba(64,150,125,0), rgba(64,150,125,.055) 20%, rgba(64,150,125,.055) 80%, rgba(64,150,125,0)); }
.features { background:linear-gradient(180deg, rgba(208,69,60,0), rgba(208,69,60,.05) 20%, rgba(208,69,60,.05) 80%, rgba(208,69,60,0)); }
.trust    { background:linear-gradient(180deg, rgba(96,130,180,0), rgba(96,130,180,.055) 20%, rgba(96,130,180,.055) 80%, rgba(96,130,180,0)); }
.pricing  { background:linear-gradient(180deg, rgba(216,150,60,0), rgba(216,150,60,.07) 25%, rgba(216,150,60,.07) 75%, rgba(216,150,60,0)); }
.faq      { background:linear-gradient(180deg, rgba(64,150,125,0), rgba(64,150,125,.045) 20%, rgba(64,150,125,.045) 80%, rgba(64,150,125,0)); }

/* ─────────── app chip (the product mark tile) ─────────── */
.app-chip {
  width:96px; aspect-ratio:1; border-radius:26%;
  background:linear-gradient(145deg, #FFD98A 0%, #F0AE4B 45%, #C97F1E 100%);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.45),
    inset 0 -6px 14px rgba(96,58,8,.55),
    0 0 44px rgba(239,181,88,.45),
    0 18px 50px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
}
.app-chip .chip-mark {
  font-weight:600; letter-spacing:-.02em; color:#241503;
  font-size:38%; line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* living mark: gentle breathing everywhere it appears */
@keyframes markBreath {
  0%, 100% { transform:scale(1); filter:drop-shadow(0 0 4px rgba(239,181,88,.35)); }
  50%      { transform:scale(1.1); filter:drop-shadow(0 0 13px rgba(239,181,88,.85)); }
}
@keyframes chipBreath {
  0%, 100% {
    box-shadow:
      inset 0 2px 6px rgba(255,255,255,.45),
      inset 0 -6px 14px rgba(96,58,8,.55),
      0 0 44px rgba(239,181,88,.45),
      0 18px 50px rgba(0,0,0,.5);
  }
  50% {
    box-shadow:
      inset 0 2px 6px rgba(255,255,255,.5),
      inset 0 -6px 14px rgba(96,58,8,.55),
      0 0 78px rgba(239,181,88,.85),
      0 18px 50px rgba(0,0,0,.5);
  }
}
.app-chip { animation:chipBreath 3.6s ease-in-out infinite; }
.nav-logo .logo-glyph { animation:markBreath 3.6s ease-in-out infinite; }

/* the tiger mark (temporary brand face) inside glyphs and chips */
.tiger-mark { width:auto; height:80%; display:block; }

/* 3D rotating chip (scroll-scrubbed) */
.chip3d { position:relative; transform-style:preserve-3d; }
.chip-face { position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden; }
.chip-face.back { transform:rotateY(180deg); filter:brightness(.82); }

/* ─────────── canvas layers & progress ─────────── */
#gl { position:fixed; inset:0; z-index:0; pointer-events:none; }
.vignette {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(10,7,5,.75) 100%);
}
#grain { position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.07; mix-blend-mode:overlay; }
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:linear-gradient(90deg, var(--gold), var(--red));
  transform-origin:0 50%; transform:scaleX(0);
  box-shadow:0 0 12px rgba(239,181,88,.8);
  pointer-events:none;
}

/* ─────────── scroll-to-top button ─────────── */
.to-top {
  position:fixed; right:26px; bottom:26px; z-index:80;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(145deg, #FFD98A 0%, #F0AE4B 45%, #C97F1E 100%);
  border:1px solid rgba(255,255,255,.3);
  color:#241503; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(216,150,60,.45);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .35s, transform .35s, visibility .35s, box-shadow .35s;
}
.to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover { box-shadow:0 14px 44px rgba(216,150,60,.75); }
@media (max-width: 640px) { .to-top { right:16px; bottom:16px; width:46px; height:46px; } }

/* ─────────── custom cursor (tech reticle, desktop pointer only) ───────────
   keyboard users keep native focus outlines; touch devices never see this */
.cursor { display:none; }
@media (pointer: fine) {
  body:has(#cursor), body:has(#cursor) * { cursor:none !important; }
  .cursor {
    display:block; position:fixed; left:0; top:0; z-index:210;
    width:38px; height:38px; pointer-events:none;
    will-change:transform;
  }
  .cursor svg {
    position:absolute; inset:0; width:100%; height:100%;
    filter:drop-shadow(0 0 8px rgba(239,181,88,.95));
    transition:scale .3s ease;
  }
  .cursor.is-hover svg { scale:1.5; }
}

/* ─────────── circuit nets & connectors ─────────── */
.net path {
  stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke;
  stroke-linecap:round;
}
.net path.faint { stroke:rgba(216,166,88,.22); stroke-width:2; }
.net path.spine { stroke:rgba(239,181,88,.55); stroke-width:3.4; }
.net path[data-pulse] {
  stroke:#FFE3AE; stroke-width:4.5; opacity:.95;
  filter:drop-shadow(0 0 8px rgba(239,181,88,1));
}
.connector {
  position:relative; z-index:2; height:36vh; min-height:220px;
  display:flex; justify-content:center;
}
.connector svg { width:min(560px, 90vw); height:100%; overflow:visible; }
.connector path {
  stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round;
}
.connector path[data-pulse] {
  stroke:#FFE3AE; stroke-width:4.6;
  filter:drop-shadow(0 0 9px rgba(239,181,88,1));
}

/* edge glows */
.edge-glow {
  position:absolute; top:12%; bottom:12%; width:120px; z-index:0; pointer-events:none;
  filter:blur(34px); opacity:.55;
}
.edge-glow.left  { left:-56px; background:radial-gradient(ellipse at center, rgba(216,150,60,.55), transparent 70%); }
.edge-glow.right { right:-56px; background:radial-gradient(ellipse at center, rgba(216,150,60,.55), transparent 70%); }

/* ─────────── nav ─────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px, 4vw, 56px);
  transition:background .4s, backdrop-filter .4s;
}
.nav.is-solid { background:rgba(19,16,16,.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.nav-logo { display:flex; align-items:center; gap:10px; font-weight:600; font-size:18px; letter-spacing:.02em; }
.nav-logo .logo-glyph {
  width:30px; aspect-ratio:1; border-radius:26%;
  background:linear-gradient(145deg, #FFD98A 0%, #F0AE4B 45%, #C97F1E 100%);
  border:1px solid rgba(255,255,255,.3);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:#241503; letter-spacing:0;
}
.nav-right { display:flex; align-items:center; gap:clamp(14px, 2.5vw, 32px); }
.nav-link { font-size:13px; color:var(--muted-2); letter-spacing:.05em; transition:color .3s; }
.nav-link:hover { color:var(--text); }
.nav-cta {
  font-size:13px; padding:10px 22px; border-radius:100px;
  background:linear-gradient(100deg, var(--gold), #E09A2E);
  color:#171007 !important; font-weight:600;
  white-space:nowrap;
  box-shadow:0 0 24px rgba(239,181,88,.4);
  transition:transform .3s, box-shadow .3s;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(239,181,88,.6); }

/* compact nav menu (mobile) */
.nav-menu { position:relative; display:none; }
.nav-menu-btn {
  display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:inherit; font-size:12.5px; letter-spacing:.06em;
  color:var(--muted-2); background:rgba(240,234,228,.05);
  border:1px solid var(--line); border-radius:100px;
  padding:8px 12px; cursor:pointer; transition:all .3s;
}
.nav-menu-btn:hover { color:var(--text); border-color:rgba(239,181,88,.5); }
.nav-drop {
  position:absolute; top:calc(100% + 10px); right:0; min-width:200px;
  background:rgba(26,21,18,.97); border:1px solid var(--line);
  border-radius:14px; padding:6px; z-index:60;
  display:none; flex-direction:column;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.nav-drop.is-open { display:flex; }
.nav-drop a {
  display:block; font-size:13.5px; color:var(--muted-2);
  padding:9px 14px; border-radius:9px; transition:all .25s;
}
.nav-drop a:hover { color:var(--text); background:var(--gold-dim); }

/* ─────────── hero ─────────── */
.hero {
  min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  /* bottom-anchored: leftover space goes above, so the net's end sits flush
     with the hero's bottom edge */
  align-items:center; justify-content:flex-end; text-align:center;
  padding:80px 0 72px;
}
.hero-content { padding:0 24px; position:relative; }
.hero-title, .hero-sub, .hero-badges { position:relative; z-index:2; }

/* the launcher window BEHIND the headline (the reference's product-in-hand slot):
   bottom third tucks behind the title and dissolves — no hard edge */
.hero-app {
  position:relative; z-index:0;
  width:clamp(290px, 28vw, 415px);
  margin:0 auto -110px;
  padding-top:34px; /* headroom so the 3D pose + float never clips the top edge */
  pointer-events:none;
  will-change:transform;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  -webkit-mask-image:linear-gradient(180deg, #000 64%, transparent 94%);
  mask-image:linear-gradient(180deg, #000 64%, transparent 94%);
}
.hero-app img {
  width:100%; height:auto; display:block;
  border-radius:10px; border:1px solid rgba(240,234,228,.14);
  /* 3D pose: turned to face left, slight top-back lean — GSAP floats around it */
  transform:perspective(1100px) rotateY(-16deg) rotateX(3deg);
}

.hero-sub span { display:inline-block; }
.hero-title {
  font-size:clamp(38px, 6.4vw, 88px); line-height:1.02; margin-bottom:18px;
}
/* headline shadow (Boss-ruled 2026-08-17): the dark plate bleeds through gradient
   glyph edges and muddies the colour — the accent line carries NO shadow;
   the plain line keeps a soft one for depth */
.hero-title .line:not(.accent) { text-shadow:0 4px 24px rgba(0,0,0,.45); }
.hero-title .line { display:block; overflow:hidden; }
.word-w { display:inline-block; white-space:nowrap; }
.hero-title .char { display:inline-block; will-change:transform; }
.hero-title .accent, .hero-title .accent .char {
  background:linear-gradient(100deg, var(--gold) 20%, var(--red) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub { max-width:560px; margin:0 auto 22px; color:var(--muted-2); font-size:clamp(15px, 1.6vw, 18px); font-weight:400; line-height:1.6; }
.reveal-line { overflow:hidden; }
/* breathing room so the buttons' hover lift is never clipped by the reveal mask */
.hero-badges.reveal-line { padding:8px 0 14px; margin:-8px 0 -14px; }
.badges-wrap { display:inline-flex; gap:14px; }
/* download / channel buttons: the reference's store-badge language —
   black rounded rectangle, thin light outline, two-line label, icon left */
.dl-btn {
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:12px 24px 12px 16px; border-radius:14px;
  background:#000;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.dl-btn:hover {
  transform:translateY(-3px); border-color:rgba(255,255,255,.75);
  box-shadow:0 16px 55px rgba(239,181,88,.35);
}
.dl-btn svg { width:30px; height:30px; flex-shrink:0; color:var(--gold); }
.dl-btn.alt svg { color:#6CB8E8; }
.dl-btn span { display:flex; flex-direction:column; line-height:1.15; font-size:16px; font-weight:500; color:#fff; }
.dl-btn b { font-weight:500; white-space:nowrap; color:#fff; }
.dl-btn small { font-size:10px; font-weight:400; color:rgba(255,255,255,.75); letter-spacing:.04em; }

/* hero circuit visual — full-bleed traces that wrap down the screen edges */
.hero-visual {
  position:relative; width:100vw; max-width:none; margin-top:8px;
  height:clamp(150px, 24vh, 260px);
  display:flex; align-items:center; justify-content:center;
  perspective:900px;
}
.hero-net { width:100%; height:100%; display:block; overflow:visible; }
.hero-chip {
  position:absolute; left:50%; top:50%;
  width:clamp(72px, 8vw, 96px); aspect-ratio:1;
  transform:translate(-50%, -50%);
}
.hero-chip .app-chip { width:100%; height:100%; }

/* ─────────── statement (pinned story, PCB frame) ─────────── */
.statement-pin {
  position:relative;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:0 24px;
}
.statement-net {
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.statement-net path.s-pulse {
  stroke:#FFE3AE; stroke-width:4.5; vector-effect:non-scaling-stroke; stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(239,181,88,1));
  opacity:0;
}
.statement-text { position:relative; z-index:2; }
.statement-text {
  max-width:1000px; text-align:center;
  font-size:clamp(28px, 4.6vw, 60px); font-weight:500; line-height:1.25; letter-spacing:-.02em;
  /* animated narrative text — selectable text here reads as accidental highlighting */
  user-select:none; -webkit-user-select:none;
}
.statement-text .word { color:rgba(240,234,228,.3); transition:color .3s linear; }
.statement-text .word.is-on { color:var(--text); }

/* ─────────── shared type ─────────── */
.section-kicker {
  font-size:clamp(14px, 1.6vw, 18px); font-weight:600; letter-spacing:.34em;
  color:var(--gold); text-align:center; margin-bottom:38px;
  text-shadow:0 0 24px rgba(239,181,88,.45);
}

/* ─────────── steps (Cách dùng) ─────────── */
.steps-pin { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:90px var(--space-inline) 60px; }
.steps-head { text-align:center; margin-bottom:clamp(28px, 5vh, 64px); }
.steps-head h2 { font-size:var(--fs-h2); line-height:1.1; }
.steps-body {
  display:grid; grid-template-columns:1fr minmax(300px, 480px); gap:clamp(24px, 6vw, 96px);
  align-items:center; max-width:1200px; margin:0 auto; width:100%;
}
.steps-text { position:relative; padding-left:34px; }

/* vertical rail — total progress through the four steps */
.steps-rail {
  position:absolute; left:0; top:8px; bottom:54px; width:3px;
  background:rgba(240,234,228,.08); border-radius:3px;
}
.steps-rail-fill {
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg, var(--gold), var(--red));
  border-radius:3px;
  box-shadow:0 0 14px rgba(239,181,88,.8);
}
.steps-rail-dot {
  position:absolute; left:50%; top:0%;
  width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:#FFEFD2;
  box-shadow:0 0 0 4px rgba(239,181,88,.35), 0 0 18px rgba(239,181,88,1);
}
.steps-counter {
  position:absolute; right:0; top:-8px;
  font-weight:400; color:var(--muted); font-size:14px; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.steps-counter #stepsCounterNum { font-size:30px; font-weight:500; color:var(--gold); }

.step-item {
  padding:22px 0; opacity:.45; border-top:1px solid var(--line);
  transform:translateX(-14px);
  transition:opacity .5s, transform .5s cubic-bezier(.22,1,.36,1);
  cursor:pointer; /* steps are switchable by click */
}
.step-item:hover { opacity:.75; }
.step-item:first-child { border-top:none; }
.step-item.is-active { opacity:1; transform:translateX(0); }

/* 01–04 switcher dots: the tap targets on mobile, where only the active item shows */
.steps-dots { display:none; gap:8px; justify-content:center; margin:10px 0 4px; }
.steps-dots button {
  font-family:inherit; font-size:12px; letter-spacing:.14em;
  color:var(--muted-2); background:transparent;
  border:1px solid var(--line); border-radius:100px;
  padding:8px 14px; cursor:pointer; transition:all .3s;
}
.steps-dots button.is-active, .steps-dots button:hover {
  color:var(--text); border-color:var(--gold); background:var(--gold-dim);
}
.step-num { font-size:12px; letter-spacing:.35em; color:var(--gold); margin-bottom:8px; }
.step-item h3 { font-size:clamp(20px, 2.4vw, 30px); margin-bottom:8px; }
.step-item p { color:var(--muted-2); font-weight:400; font-size:15px; line-height:1.6; max-width:440px; }
/* auto-advance progress line under the active step (6s per step) */
.step-line {
  height:3px; max-width:440px; margin-top:14px; border-radius:3px; overflow:hidden;
  background:var(--line); opacity:0; transition:opacity .4s;
}
.step-item.is-active .step-line { opacity:1; }
.step-line-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold), var(--red));
  box-shadow:0 0 10px rgba(239,181,88,.7);
}

/* the launcher-window media frame (recordings drop in later) */
.steps-media { position:relative; display:flex; justify-content:center; }
.win-glow {
  position:absolute; inset:-12%; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(239,181,88,.22), transparent 65%);
  filter:blur(30px);
}
.win-frame {
  position:relative; z-index:1; width:min(480px, 88vw); aspect-ratio:4/3;
  border-radius:14px; overflow:hidden;
  background:linear-gradient(170deg, rgba(33,27,23,.97), rgba(19,16,16,.97));
  border:1px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.win-bar {
  position:absolute; top:0; left:0; right:0; height:34px; z-index:2;
  display:flex; align-items:center; gap:7px; padding:0 12px;
  background:rgba(240,234,228,.04); border-bottom:1px solid var(--line);
}
.win-bar span { width:10px; height:10px; border-radius:50%; background:rgba(240,234,228,.16); }
.win-bar span:first-child { background:rgba(208,69,60,.55); }
.win-bar b { margin-left:6px; font-size:11.5px; font-weight:500; letter-spacing:.08em; color:var(--muted); }
.step-shot {
  position:absolute; inset:34px 0 0 0;
  opacity:0; transition:opacity .6s;
  /* placeholder roster-row texture until the real recordings land */
  background:
    repeating-linear-gradient(180deg, rgba(240,234,228,.045) 0 26px, rgba(240,234,228,0) 26px 34px),
    linear-gradient(160deg, rgba(216,150,60,.05), rgba(0,0,0,0) 60%);
  display:flex; align-items:center; justify-content:center;
}
.step-shot.is-active { opacity:1; }
.step-shot i {
  font-style:normal; font-weight:600; font-size:64px; letter-spacing:-.02em;
  color:rgba(239,181,88,.18);
}

/* ─────────── icon tiles: one consistent line-icon language ─────────── */
.icon-tile {
  width:46px; height:46px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius:13px;
  background:rgba(216,150,60,.12);
  border:1px solid rgba(239,181,88,.28);
  color:var(--gold);
}
.icon-tile svg { width:22px; height:22px; }
.icon-tile--lg { width:60px; height:60px; border-radius:16px; }
.icon-tile--lg svg { width:28px; height:28px; }

/* ─────────── signature (điểm khác biệt) ─────────── */
.signature { padding:var(--space-section) var(--space-inline); overflow:hidden; }
.sig-title { text-align:center; font-size:var(--fs-h2); line-height:1.1; margin-bottom:var(--space-title); }
.sig-title .dim { color:var(--muted); }
.sig-row {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:minmax(280px, 1fr) minmax(280px, 1fr);
  gap:clamp(30px, 5vw, 90px); align-items:center;
}
/* sideways PCB trace between rows */
.sig-connector {
  max-width:var(--container); margin:0 auto; height:clamp(120px, 18vh, 200px);
}
.sig-connector svg { width:100%; height:100%; overflow:visible; }
.sig-connector path {
  stroke:var(--trace); stroke-width:3; vector-effect:non-scaling-stroke; stroke-linecap:round;
}
.sig-connector path[data-pulse] {
  stroke:#FFE3AE; stroke-width:4.6;
  filter:drop-shadow(0 0 9px rgba(239,181,88,1));
}
.sig-rev .sig-copy { order:2; }
.sig-rev .sig-shot { order:1; }
.sig-badge {
  display:inline-block; margin-bottom:18px;
  font-size:11.5px; font-weight:600; letter-spacing:.26em;
  padding:9px 16px; border-radius:100px; color:#fff;
  background:linear-gradient(120deg, var(--gold), var(--red));
  box-shadow:0 8px 26px rgba(239,181,88,.4);
}
.sig-copy h3 { font-size:clamp(26px, 3.2vw, 44px); line-height:1.12; margin-bottom:18px; }
.sig-copy h3 .lav { color:var(--gold); }
.sig-copy p { color:var(--muted-2); font-size:clamp(15px, 1.5vw, 17.5px); line-height:1.65; margin-bottom:22px; }
.sig-copy ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.sig-copy li {
  position:relative; padding-left:26px;
  color:var(--muted-2); font-size:14.5px; line-height:1.5;
}
.sig-copy li::before {
  content:''; position:absolute; left:0; top:7px;
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--red));
  box-shadow:0 0 10px rgba(239,181,88,.6);
}
.sig-shot { display:flex; justify-content:center; }
.sig-shot img, .sig-ph {
  width:100%; max-width:360px; height:auto; display:block;
  aspect-ratio:605 / 747; /* reserve space before lazy-load — no layout jumps */
  border-radius:12px; border:1px solid rgba(240,234,228,.14);
  filter:drop-shadow(0 34px 80px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(216,150,60,.22));
  will-change:transform;
}
.sig-ph {
  background:
    repeating-linear-gradient(180deg, rgba(240,234,228,.045) 0 26px, rgba(240,234,228,0) 26px 34px),
    linear-gradient(160deg, rgba(216,150,60,.07), rgba(19,16,16,.6) 60%);
  display:flex; align-items:center; justify-content:center;
}
.sig-ph i { font-style:normal; font-weight:600; font-size:26px; color:rgba(239,181,88,.25); letter-spacing:.04em; }

/* ─────────── features (bảng mạch tính năng) ─────────── */
.features { padding:var(--space-section) var(--space-inline); }
.features-title {
  font-size:var(--fs-h2); line-height:1.12; margin-bottom:var(--space-title); text-align:center;
  max-width:var(--container); margin-left:auto; margin-right:auto;
}
.features-title .dim { color:var(--muted); font-weight:500; }
.features-wrap {
  position:relative; display:grid;
  grid-template-columns:1fr clamp(220px, 26vw, 360px) 1fr;
  align-items:stretch; max-width:var(--container); margin:0 auto;
}
.f-col { display:flex; flex-direction:column; gap:22px; justify-content:space-between; }
.f-card {
  display:flex; gap:16px; align-items:center;
  flex:1; /* every card in a column gets the same height */
  background:linear-gradient(160deg, rgba(33,27,23,.92), rgba(23,19,16,.92));
  border:1px solid var(--line); border-radius:20px;
  padding:26px 26px;
  transition:transform .4s, border-color .4s, box-shadow .4s;
}
.f-card:hover {
  transform:translateY(-4px); border-color:rgba(239,181,88,.4);
  box-shadow:0 16px 50px rgba(216,150,60,.18);
}
.f-card h3 { font-size:18px; margin-bottom:6px; }
.f-card p { color:var(--muted-2); font-weight:400; font-size:14px; line-height:1.55; }
.f-center { position:relative; min-height:420px; }
.f-net { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.f-chip {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(84px, 9vw, 110px);
}

/* ─────────── job marquee ─────────── */
.jobs { padding:clamp(48px, 7vh, 90px) 0 clamp(24px, 4vh, 48px); overflow:hidden; }
.connector.short { height:20vh; min-height:140px; }
.marquee { overflow:hidden; padding:12px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display:flex; gap:18px; width:max-content; will-change:transform; }
.job-chip {
  display:flex; align-items:center; gap:12px;
  padding:16px 30px; border-radius:100px;
  background:var(--panel); border:1px solid var(--line);
  font-size:clamp(16px, 2vw, 22px); font-weight:500; white-space:nowrap;
  color:var(--muted-2);
}
.job-chip::before {
  content:''; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--red));
  box-shadow:0 0 8px rgba(239,181,88,.7);
}

/* ─────────── trust: connected rows ─────────── */
.trust { padding:clamp(40px, 6vh, 90px) var(--space-inline); }
.trust-head { text-align:center; margin-bottom:clamp(20px, 3.5vh, 44px); }
.trust-title { font-size:var(--fs-h2); line-height:1.1; }
.trust-title .dim { color:var(--muted); }
.trust-list {
  position:relative; max-width:var(--container); margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(12px, 2.2vh, 26px);
}
/* vertical spine running through the tile column */
.trust-list::before {
  content:''; position:absolute; left:115px; top:-24px; bottom:-24px; width:3px;
  background:linear-gradient(180deg, transparent, var(--trace) 8%, var(--trace) 92%, transparent);
  border-radius:3px;
}
.i-row {
  display:grid; grid-template-columns:230px 1fr minmax(260px, 46%);
  align-items:center; gap:0; position:relative;
}
.i-tile {
  width:230px; height:clamp(92px, 13vh, 128px); border-radius:22px;
  background:linear-gradient(160deg, rgba(40,32,26,.96), rgba(24,19,16,.96));
  border:1px solid rgba(239,181,88,.28);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  position:relative; z-index:1;
  /* no transform transition here — it would fight the GSAP entrance scale */
  transition:border-color .35s, box-shadow .35s;
}
.i-tile:hover {
  border-color:rgba(239,181,88,.6);
  box-shadow:0 24px 60px rgba(216,150,60,.25);
}
.i-tile > span:last-child { font-size:13.5px; letter-spacing:.08em; color:var(--muted-2); font-weight:400; }
.i-tile.chip-tile { background:none; border:none; box-shadow:none; }
.x-chip { width:clamp(76px, 11vh, 104px); }
.i-trace { height:54px; width:100%; align-self:center; overflow:visible; }
/* PCB routing: chamfered main line, solder pads, traveling light */
.i-trace .i-line {
  stroke:rgba(239,181,88,.62); stroke-width:3.2;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
}
.i-trace .i-pulse {
  stroke:#FFE3AE; stroke-width:4.2; opacity:0;
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 7px rgba(239,181,88,1));
}
.i-trace .i-pad {
  stroke:#FFD98A; stroke-width:8; stroke-linecap:round; vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(239,181,88,.8));
}
.i-trace .i-pad.ring { stroke:rgba(239,181,88,.28); stroke-width:15; filter:none; }
.i-info h3 { font-size:clamp(16px, 1.8vw, 20px); margin-bottom:6px; }
.i-info p { font-size:14px; color:var(--muted-2); font-weight:400; line-height:1.6; }

/* ─────────── pricing (cấu trúc — giá chưa công bố) ─────────── */
.pricing { padding:var(--space-section) var(--space-inline); text-align:center; }
.pricing h2 { font-size:var(--fs-h2); line-height:1.1; margin-bottom:var(--space-title); }
.price-card {
  max-width:520px; margin:0 auto; padding:44px 38px;
  background:linear-gradient(170deg, rgba(33,27,23,.95), rgba(19,16,16,.95));
  border:1px solid rgba(239,181,88,.3); border-radius:32px;
  box-shadow:0 0 80px rgba(239,181,88,.12);
}
.price-plans { display:flex; gap:8px; justify-content:center; margin-bottom:36px; flex-wrap:wrap; }
.plan {
  font-family:inherit; font-size:13px; color:var(--muted-2);
  background:transparent; border:1px solid var(--line); border-radius:100px;
  padding:9px 18px; cursor:pointer; transition:all .3s;
  white-space:nowrap;
}
.plan.is-active, .plan:hover { color:var(--text); border-color:var(--gold); background:var(--gold-dim); }
.price-amount { font-size:clamp(34px, 4.6vw, 52px); font-weight:600; letter-spacing:-.02em;
  background:linear-gradient(100deg, var(--gold), #E09A2E);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.price-note { color:var(--gold); font-size:14px; margin:14px 0 30px; }
.price-badges { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }

/* ─────────── faq ─────────── */
.faq { padding:var(--space-section) var(--space-inline); max-width:calc(860px + 2 * var(--space-inline)); margin:0 auto; }
.faq-title { text-align:center; font-size:var(--fs-h2); margin-bottom:var(--space-title); }
.faq-title .dim { color:var(--muted); }
.faq-list { display:flex; flex-direction:column; gap:14px; }
.faq-item {
  background:linear-gradient(160deg, rgba(33,27,23,.92), rgba(23,19,16,.92));
  border:1px solid var(--line); border-radius:18px;
  transition:border-color .35s;
}
.faq-item[open] { border-color:rgba(239,181,88,.4); }
.faq-item summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 26px;
  font-size:clamp(16px, 1.9vw, 19px); font-weight:500;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+'; flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(239,181,88,.45); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:400;
  transition:transform .35s, background .35s;
}
.faq-item[open] summary::after { transform:rotate(45deg); background:var(--gold-dim); }
.faq-body { padding:0 26px 24px; color:var(--muted-2); font-size:15px; line-height:1.7; }
.faq-body p + p { margin-top:10px; }
.faq-body strong { color:var(--text); font-weight:500; }

/* ─────────── final cta ─────────── */
.cta { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--space-section) var(--space-inline); }
.cta-title { font-size:clamp(34px, 5.6vw, 84px); line-height:1.08; margin-bottom:48px; max-width:1100px; }
.cta-title .line { display:block; overflow:hidden; }
.cta-title .char { display:inline-block; }
.cta-title .accent, .cta-title .accent .char {
  background:linear-gradient(100deg, var(--gold) 20%, var(--red) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.qr-box { margin-top:34px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.qr-pair { display:flex; gap:clamp(28px, 5vw, 52px); justify-content:center; }
.qr-tile { display:flex; flex-direction:column; align-items:center; gap:10px; }
.qr-tile .qr-ph {
  width:clamp(110px, 14vw, 140px); aspect-ratio:1; border-radius:14px;
  border:1px dashed rgba(239,181,88,.4);
  background:rgba(240,234,228,.03);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 40px rgba(216,150,60,.14);
}
.qr-tile .qr-ph i { font-style:normal; font-weight:600; color:rgba(239,181,88,.35); letter-spacing:.1em; }
.qr-tile figcaption { font-size:12.5px; color:var(--muted-2); letter-spacing:.06em; }
.qr-box > span { font-size:12.5px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase; }

/* ─────────── changelog page (static, no JS) ─────────── */
.page-static { background-image:none; }
.log-main { max-width:760px; margin:0 auto; padding:130px var(--space-inline) 40px; }
.log-title { font-size:clamp(34px, 5vw, 56px); margin-bottom:10px; }
.log-sub { color:var(--muted-2); line-height:1.6; margin-bottom:44px; }
.log-empty { color:var(--muted); padding:34px 0; border-top:1px solid var(--line); }
.log-entry { border-top:1px solid var(--line); padding:30px 0 26px; }
.log-entry header { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.log-entry h2 { font-size:clamp(20px, 2.4vw, 26px); color:var(--gold); }
.log-entry time, .log-size { color:var(--muted); font-size:13px; letter-spacing:.05em; }
.log-entry ul { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.log-entry li { position:relative; padding-left:22px; color:var(--muted-2); line-height:1.6; font-size:15px; }
.log-entry li::before {
  content:''; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), var(--red));
}
.log-sha { font-size:12px; color:var(--muted); word-break:break-all; margin-bottom:14px; }
.log-sha code { font-family:Consolas, monospace; }
.log-dl {
  display:inline-block; padding:9px 20px; border-radius:100px; font-size:13.5px; font-weight:600;
  background:linear-gradient(100deg, var(--gold), #E09A2E); color:#171007;
  transition:transform .3s, box-shadow .3s;
}
.log-dl:hover { transform:translateY(-2px); box-shadow:0 0 30px rgba(239,181,88,.5); }

/* ─────────── footer ─────────── */
.footer { display:flex; flex-direction:column; align-items:center; gap:14px; padding:60px 24px 46px; border-top:1px solid var(--line); }
.footer .logo-glyph {
  width:34px; aspect-ratio:1; border-radius:26%; opacity:.85;
  background:linear-gradient(145deg, #FFD98A 0%, #F0AE4B 45%, #C97F1E 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600; color:#241503;
}
.footer-links { display:flex; gap:12px; align-items:center; font-size:13px; color:var(--muted); }
.footer-links a { color:var(--muted-2); transition:color .3s; }
.footer-links a:hover { color:var(--text); }
.footer p { font-size:12px; color:var(--muted); letter-spacing:.05em; }

/* ─────────── responsive ─────────── */
/* tablet */
@media (max-width: 1080px) {
  .steps-body { gap:28px; }
  .features-wrap { grid-template-columns:1fr clamp(170px, 20vw, 240px) 1fr; }
  .f-card { padding:20px; }
  .i-row { grid-template-columns:230px 1fr minmax(240px, 50%); }
}
@media (max-width: 900px) {
  .nav-link { display:none; }
  .nav-menu { display:block; }
  .nav { padding:16px 18px; }
  .hero { padding-top:88px; }
  /* trim the window so it ends at the headline — soft fade, no hard edge */
  .hero-app {
    width:min(250px, 70vw); margin-bottom:-95px;
    -webkit-mask-image:linear-gradient(180deg, #000 48%, transparent 84%);
    mask-image:linear-gradient(180deg, #000 48%, transparent 84%);
  }
  .hero-title { font-size:clamp(34px, 10vw, 52px); }
  .hero-sub { font-size:14px; padding:0 6px; }
  .badges-wrap { flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .dl-btn { padding:9px 16px 9px 12px; }
  .dl-btn span { font-size:14px; }
  .hero-visual { height:clamp(130px, 20vh, 200px); }
  .hero-chip { width:clamp(56px, 7vh, 72px); }
  .statement-text { font-size:clamp(24px, 6.6vw, 34px); }
  /* mobile steps: window + ONLY the active step, with the counter + progress bar */
  .steps-pin { padding:74px 18px 36px; }
  .steps-head { margin-bottom:14px; }
  .steps-body { grid-template-columns:1fr; gap:14px; }
  .steps-media { order:-1; }
  .win-frame { width:min(320px, 82vw); }
  .steps-text { padding-left:0; text-align:center; }
  .steps-rail { display:none; }
  .steps-counter { position:static; display:block; margin-bottom:2px; font-size:13px; }
  .steps-counter #stepsCounterNum { font-size:26px; }
  .steps-dots { display:flex; }
  .step-item { display:none; padding:6px 0 0; border-top:none; }
  .step-item.is-active { display:block; transform:none; }
  .step-num { display:none; } /* the big counter already shows the step number */
  .step-item p { font-size:13.5px; max-width:100%; }
  .step-line { margin:14px auto 0; }
  .sig-row { grid-template-columns:1fr; gap:34px; }
  .sig-rev .sig-copy { order:1; }
  .sig-rev .sig-shot { order:2; }
  .sig-shot img, .sig-ph { max-width:280px; width:100%; }
  .features { padding:8vh 18px; }
  .features-wrap { grid-template-columns:1fr; }
  .f-center { order:-1; min-height:190px; }
  .f-net path { display:none; }
  .f-net path.spine { display:block; }
  .f-col { gap:14px; }
  .f-col + .f-col { margin-top:14px; }
  .trust { padding:9vh 18px; }
  .trust-list::before { display:none; }
  .i-row { grid-template-columns:1fr; gap:12px; justify-items:center; text-align:center; }
  .i-trace { display:none; }
  .i-info { max-width:420px; }
  .price-card { padding:32px 20px; }
  .cta-title { font-size:clamp(26px, 7.4vw, 44px); }
  .connector { height:20vh; min-height:130px; }
  .edge-glow { display:none; }
  .footer { padding:44px 18px 36px; }
}
@media (max-width: 640px) {
  .nav { padding:10px 6px; }
  .nav-logo { gap:6px; }
  .nav-logo .logo-glyph { width:22px; font-size:9px; }
  .nav-logo .logo-name { font-size:14.5px; }
  .nav-right { gap:4px; }
  .nav-cta { padding:7px 9px; font-size:11px; }
  .hide-xs { display:none; }
  .nav-menu-btn { padding:6px 7px; }
  .to-top { right:34px; bottom:16px; width:44px; height:44px; }
}
/* ultra-narrow phones: icon-only logo so every nav control fits */
@media (max-width: 360px) {
  .nav-logo .logo-name { display:none; }
  .nav-logo .logo-glyph { width:28px; }
  .footer { padding:44px 18px 112px; }
  .footer-links { flex-wrap:wrap; justify-content:center; row-gap:6px; }
}
/* ─────────── large displays (QHD / 4K): scale the whole experience up ─────────── */
@media (min-width: 2000px) {
  .nav { padding:26px 64px; }
  .nav-logo .logo-glyph { width:36px; font-size:14px; }
  .nav-logo .logo-name { font-size:24px; }
  .nav-link { font-size:17px; }
  .nav-cta { font-size:16px; padding:13px 28px; }
  .hero-title { font-size:110px; }
  .hero-sub { font-size:23px; max-width:780px; }
  .hero-app { width:460px; margin-bottom:-190px; }
  .dl-btn { padding:14px 28px 14px 20px; }
  .dl-btn svg { width:40px; height:40px; }
  .dl-btn span { font-size:20px; }
  .dl-btn small { font-size:12.5px; }
  .hero-visual { height:340px; }
  .statement-text { font-size:58px; max-width:1240px; }
  .section-kicker { font-size:22px; }
  .steps-head h2 { font-size:84px; }
  .steps-body { max-width:1720px; gap:130px; }
  .win-frame { width:640px; }
  .step-item h3 { font-size:42px; }
  .step-item p { font-size:20px; max-width:640px; }
  .steps-counter #stepsCounterNum { font-size:44px; }
  .sig-title { font-size:84px; }
  .sig-row, .sig-connector { max-width:1620px; }
  .sig-copy h3 { font-size:60px; }
  .sig-copy p { font-size:22px; }
  .sig-copy li { font-size:19px; padding-left:32px; }
  .sig-badge { font-size:14px; padding:12px 22px; }
  .sig-shot img, .sig-ph { max-width:470px; }
  .features-title { font-size:78px; max-width:1620px; }
  .features-wrap { max-width:1620px; grid-template-columns:1fr clamp(300px, 22vw, 440px) 1fr; }
  .f-card { padding:28px 30px; gap:20px; }
  .f-card h3 { font-size:24px; }
  .f-card p { font-size:17px; }
  .f-chip { width:150px; }
  .job-chip { font-size:21px; padding:18px 34px; gap:14px; }
  .trust-title { font-size:84px; }
  .trust-list { max-width:1520px; }
  .i-row { grid-template-columns:350px 1fr minmax(320px, 44%); }
  .i-tile { width:350px; min-height:195px; }
  .i-tile .icon-tile--lg { width:78px; height:78px; border-radius:20px; }
  .i-tile .icon-tile--lg svg { width:36px; height:36px; }
  .i-tile > span:last-child { font-size:19px; }
  .i-tile .app-chip { width:150px; }
  .i-info h3 { font-size:27px; }
  .i-info p { font-size:17.5px; }
  .pricing h2 { font-size:78px; }
  .price-card { max-width:680px; padding:60px 54px; }
  .plan { font-size:16px; padding:12px 24px; }
  .price-note { font-size:17px; }
  .faq { max-width:1180px; }
  .faq-title { font-size:78px; }
  .faq-item summary { font-size:22px; padding:28px 32px; }
  .faq-body { font-size:18px; padding:0 32px 30px; }
  .cta-title { font-size:112px; max-width:1560px; }
  .qr-tile .qr-ph { width:180px; }
  .qr-tile figcaption { font-size:15px; }
  .connector svg { width:760px; }
  .to-top { width:64px; height:64px; right:40px; bottom:40px; }
  .footer .logo-glyph { width:46px; }
  .footer-links { font-size:16px; }
  .footer p { font-size:14px; }
}

/* reduced motion: a complete, still, fully readable page.
   JS checks the same query and skips Lenis + every animation; canvases go dark here. */
@media (prefers-reduced-motion: reduce) {
  #gl, #grain, .cursor { display:none !important; }
  .app-chip, .nav-logo .logo-glyph { animation:none; }
  .scroll-progress { display:none; }
}

/* ===== TRANG TINH TRANG DICH VU (status.html) + KHOI KENH CHINH THUC =========
   Added 2026-09-04. The status page is the only surface that stays up when the
   licence server does not, so it must be legible on its own. */
.svc-state { border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:10px;
             background:var(--panel); padding:20px 24px; margin-bottom:32px; }
.svc-state[data-state="ok"]       { border-left-color:#5FB87A; }
.svc-state[data-state="degraded"] { border-left-color:var(--gold); }
.svc-state[data-state="down"]     { border-left-color:var(--red); }
.svc-headline { font-size:19px; line-height:1.5; margin:0 0 6px; color:var(--text); }
.svc-sub { font-size:13px; color:var(--muted); margin:0; }
.svc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-bottom:38px; }
.svc-item { border:1px solid var(--line); border-radius:10px; background:var(--bg-2); padding:16px 18px; }
.svc-item h3 { font-size:15px; margin:0 0 7px; color:var(--text); }
.svc-item p  { font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; }
.svc-log-list { list-style:none; padding:0; margin:0; }
.svc-log-list li { border-top:1px solid var(--line); padding:13px 0; font-size:14px;
                   line-height:1.6; color:var(--muted-2); }
.svc-log-list time { color:var(--gold); font-variant-numeric:tabular-nums; margin-right:8px; }
.svc-note { margin-top:38px; padding-top:22px; border-top:1px solid var(--line);
            font-size:14px; line-height:1.65; color:var(--muted); }
.svc-note a { color:var(--muted-2); border-bottom:1px solid var(--trace); }
.svc-note a:hover { color:var(--gold); }

/* the official-channel + anti-impersonation block on the landing page */
.channel-never { border:1px solid var(--line); border-left:3px solid var(--red); border-radius:10px;
                 background:var(--panel); padding:20px 24px; margin:22px 0; }
.channel-never h3 { font-size:15px; margin:0 0 12px; color:var(--text); letter-spacing:.02em; }
.channel-never ul { margin:0 0 14px; padding-left:20px; }
.channel-never li { font-size:14.5px; line-height:1.7; color:var(--muted-2); margin-bottom:5px; }
.channel-never p  { font-size:14.5px; line-height:1.7; color:var(--muted-2); margin:0; }
.channel-dl { font-size:14.5px; line-height:1.7; color:var(--muted); }
.channel-dl a { color:var(--muted-2); border-bottom:1px solid var(--trace); }
.channel-dl a:hover { color:var(--gold); }