/* ==========================================================================
   SecureOne website
   Dark by design: a security brand in deep navy. Tokens first, then layout,
   then components, then pages. Every animation has a reduced-motion override
   at the end of the file.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --bg: #040914;
  --bg-2: #081226;
  --surface: rgba(148, 178, 255, 0.045);
  --surface-2: rgba(148, 178, 255, 0.08);
  --border: rgba(148, 178, 255, 0.13);
  --border-strong: rgba(148, 178, 255, 0.26);
  --text: #e9effd;
  --muted: #95a6c6;
  --faint: #62739a;
  --navy: #0d1b2e;
  --blue: #1b4fe8;
  --blue-2: #3d7bff;
  --cyan: #36d6ff;
  --green: #2ee6a6;
  --amber: #ffb547;
  --red: #ff5d6c;
  --grad: linear-gradient(120deg, #36d6ff 0%, #3d7bff 45%, #7a5cff 100%);
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 30px 80px -30px rgba(10, 40, 140, 0.55);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.1; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
code { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
section[id], .doc-group { scroll-margin-top: calc(var(--nav-h) + 16px); }
::selection { background: rgba(54, 214, 255, 0.35); color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.container { width: min(1200px, 100% - 40px); margin-inline: auto; }
.container.narrow { width: min(820px, 100% - 40px); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 10px;
}
.skip:focus { top: 12px; }

/* --------------------------------------------------------- page motion */
.js main { animation: page-in 0.8s var(--ease-out) both; }
body.is-leaving main, body.is-leaving .footer { opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; }
@keyframes page-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- loader */
.loader { display: none; }
.intro .loader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(circle at 50% 45%, #0b1a3d 0%, var(--bg) 60%);
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.intro.intro-done .loader { opacity: 0; visibility: hidden; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.loader-shield { width: 84px; height: 84px; fill: none; stroke: var(--cyan); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 16px rgba(54, 214, 255, 0.7)); }
.loader-shield path { stroke-dasharray: 70; stroke-dashoffset: 70; animation: draw 0.9s var(--ease) forwards; }
.loader-shield .loader-check { stroke: var(--green); stroke-width: 1.6; animation-delay: 0.55s; animation-duration: 0.5s; }
.loader-word { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.02em; opacity: 0; animation: fade-up 0.6s 0.35s var(--ease) forwards; }
.loader-word b { color: var(--blue-2); }
.loader-bar { width: 160px; height: 2px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: 0 50%; animation: grow 1s var(--ease) forwards; transform: scaleX(0); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------- backdrop */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55;
  animation: drift 26s var(--ease) infinite alternate;
}
.aurora-a { width: 60vw; height: 60vw; left: -18vw; top: -22vw; background: radial-gradient(circle, #1b4fe8 0%, transparent 65%); }
.aurora-b { width: 50vw; height: 50vw; right: -16vw; top: 18vh; background: radial-gradient(circle, #0fb6ff 0%, transparent 65%); opacity: 0.32; animation-duration: 32s; }
.aurora-c { width: 55vw; height: 55vw; left: 20vw; bottom: -30vw; background: radial-gradient(circle, #5a3dff 0%, transparent 65%); opacity: 0.28; animation-duration: 38s; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(6vw, 4vh, 0) scale(1.12); }
}
.gridlines {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(148, 178, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 178, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: -1; width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(circle, rgba(61, 123, 255, 0.16) 0%, rgba(54, 214, 255, 0.06) 35%, transparent 65%);
  will-change: transform;
}
.cursor-glow.is-on { opacity: 1; }

.scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60; }
.scroll-progress span {
  display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  background: var(--grad); box-shadow: 0 0 12px rgba(54, 214, 255, 0.7);
}

/* ------------------------------------------------------------------ nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  display: flex; align-items: center;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(4, 9, 20, 0.74);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.brand img { border-radius: 10px; background: #eef3ff; transition: transform 0.5s var(--ease-out); }
.brand:hover img { transform: rotate(-8deg) scale(1.06); }
.brand b { color: var(--blue-2); font-weight: 700; }
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  position: relative; padding: 8px 14px; border-radius: 999px; color: var(--muted); font-size: 0.95rem;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px; margin-left: -8px;
  border-radius: 2px; background: var(--grad);
}
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  align-items: center; justify-content: center;
}

/* -------------------------------------------------------------- buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px; font-weight: 600; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; isolation: isolate;
  transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), background 0.3s, border-color 0.3s;
}
.btn-sm { padding: 9px 16px; font-size: 0.92rem; }
.btn-lg { padding: 15px 26px; font-size: 1.02rem; }
.btn-primary {
  color: #fff; overflow: hidden;
  background: linear-gradient(120deg, #1b4fe8, #2f7bff 55%, #1fb8ff);
  box-shadow: 0 10px 30px -8px rgba(27, 79, 232, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform 0.8s var(--ease);
}
.btn-primary:hover { box-shadow: 0 16px 40px -8px rgba(31, 140, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--border-strong); }
.btn .icon { transition: transform 0.25s var(--ease); }
.btn-ghost:hover .icon { transform: translateX(3px); }
.btn-pulse { overflow: visible; }
.btn-pulse::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -2;
  border: 2px solid rgba(54, 214, 255, 0.55); animation: ring 2.4s var(--ease) infinite;
}
@keyframes ring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.35, 1.7); opacity: 0; } }

/* ----------------------------------------------------------------- hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--nav-h) + 40px) 0 90px; }
.hero-grid { display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 40px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 999px;
  color: var(--muted); font-size: 0.88rem; margin-bottom: 26px;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(46, 230, 166, 0.6); animation: pulse 2.2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 230, 166, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(46, 230, 166, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 230, 166, 0); }
}
.hero-title { font-size: clamp(2.6rem, 6.2vw, 5.1rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
.hero-title .word:nth-last-child(-n+2) > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { margin-top: 24px; max-width: 560px; color: var(--muted); font-size: clamp(1.02rem, 1.4vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.92rem; }
.hero-chips li { display: inline-flex; align-items: center; gap: 8px; }
.hero-chips .icon { color: var(--green); }

.hero-visual { position: relative; height: min(640px, 72vh); min-height: 460px; }
.hero-stage { position: absolute; inset: -6% -10%; }
.hero-stage canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-stage canvas.is-ready { opacity: 1; }
.hero-fallback {
  position: absolute; left: 50%; top: 50%; width: 240px; height: auto; transform: translate(-50%, -50%);
  border-radius: 48px; background: #eef3ff; box-shadow: 0 0 120px rgba(54, 140, 255, 0.55);
  opacity: 0; transition: opacity 0.6s;
}
.hero-stage.no-webgl .hero-fallback { opacity: 1; animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -54%); } }

.float-card {
  position: absolute; z-index: 2; width: 250px; padding: 14px 16px;
  background: rgba(10, 20, 42, 0.62); border: 1px solid var(--border-strong); border-radius: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow); font-size: 0.82rem;
}
.float-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 60%, rgba(54, 214, 255, 0.8), transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-angle 6s linear infinite;
}
.float-card-a { right: -2%; top: 10%; }
.float-card-b { left: -4%; bottom: 16%; width: 220px; }
.float-card-b::before { animation-delay: -2s; }
.float-card-c { right: 4%; bottom: 2%; width: 210px; }
.float-card-c::before { animation-delay: -4s; }
@keyframes spin-angle { to { --angle: 360deg; } }
.fc-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.fc-head .icon { color: var(--cyan); }
.fc-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.fc-row span { color: var(--text); }
.fc-row em, .fc-big { font-style: normal; font-weight: 600; }
.ok { color: var(--green); }
.bad { color: var(--red); }
.warn { color: var(--amber); }
.fc-big { font-family: var(--display); font-size: 1.05rem; }
.fc-note { color: var(--muted); margin-top: 4px; }

.hero-scroll { position: absolute; left: 50%; bottom: 26px; width: 24px; height: 40px; border: 1.5px solid var(--border-strong); border-radius: 14px; transform: translateX(-50%); }
.hero-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; border-radius: 2px; background: var(--cyan); transform: translateX(-50%); animation: scrolldot 2s infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 14px); } }

/* -------------------------------------------------------------- sources */
.sources { padding: 30px 0 8px; border-block: 1px solid var(--border); background: linear-gradient(90deg, transparent, rgba(27, 79, 232, 0.07), transparent); }
.sources-label { text-align: center; color: var(--faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 16px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); padding-bottom: 18px; }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: #b9c7e6; white-space: nowrap; }
.marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 46s; gap: 40px; }
.marquee-dim .marquee-track span { font-size: clamp(0.85rem, 1.2vw, 1rem); color: var(--faint); text-transform: uppercase; letter-spacing: 0.16em; }
.marquee-dim .marquee-track span::before { content: "◆"; margin-right: 40px; color: rgba(54, 214, 255, 0.4); font-size: 0.6em; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------- sections */
.section { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.section-tight { padding: clamp(50px, 7vw, 90px) 0; }
.section-head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.section-head h2, .split-copy h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); font-weight: 700; }
.section-head p:not(.kicker) { color: var(--muted); margin-top: 18px; font-size: 1.08rem; }
.kicker { display: inline-block; color: var(--cyan); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 16px; font-variant-numeric: tabular-nums; min-height: 1.3em; }

.card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s; z-index: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 123, 255, 0.16), transparent 45%);
}
.spot:hover::before { opacity: 1; }

/* ----------------------------------------------------------------- stats */
.stats-section { padding-block: 70px; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat {
  position: relative; overflow: hidden; padding: 28px 24px; border-radius: var(--radius); border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), transparent);
}
.stat::after {
  content: ""; position: absolute; left: -40%; top: 0; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(54, 214, 255, 0.08), transparent);
  transform: skewX(-20deg); animation: sheen 6s var(--ease) infinite;
}
.stat:nth-child(2)::after { animation-delay: 1.5s; }
.stat:nth-child(3)::after { animation-delay: 3s; }
.stat:nth-child(4)::after { animation-delay: 4.5s; }
@keyframes sheen { 0%, 70% { left: -40%; } 100% { left: 140%; } }
.stat strong { display: block; font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat > span { display: block; color: var(--muted); margin-top: 10px; }

/* ------------------------------------------------------------ principles */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; perspective: 1200px; }
.principles .card { padding: 28px 24px; transform-style: preserve-3d; transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.principles .card:hover { border-color: var(--border-strong); box-shadow: 0 20px 50px -24px rgba(31, 140, 255, 0.6); }
.card-icon {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 20px;
  background: linear-gradient(140deg, rgba(54, 214, 255, 0.22), rgba(27, 79, 232, 0.22)); color: var(--cyan);
  border: 1px solid rgba(54, 214, 255, 0.25); font-size: 1.3rem;
}
.principles h3 { font-size: 1.2rem; margin-bottom: 10px; }
.principles p { color: var(--muted); font-size: 0.95rem; }

/* ----------------------------------------------------------------- bento */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bento-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; min-height: 280px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); overflow: hidden;
  transition: transform 0.4s var(--ease-out), border-color 0.3s, box-shadow 0.4s;
}
.bento-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: conic-gradient(from var(--angle), transparent 55%, #36d6ff, #7a5cff, transparent 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity 0.4s; animation: spin-angle 4s linear infinite;
}
.bento-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(31, 140, 255, 0.7); }
.bento-card:hover::after { opacity: 1; }
.bento-wide { grid-column: span 2; }
.bento-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bento-icon {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.45rem; color: #fff;
  background: linear-gradient(140deg, #1b4fe8, #1fb8ff); box-shadow: 0 10px 30px -8px rgba(31, 140, 255, 0.8);
}
.bento-count { font-family: var(--display); font-size: 3rem; font-weight: 700; line-height: 1; color: rgba(148, 178, 255, 0.12); transition: color 0.4s; }
.bento-card:hover .bento-count { color: rgba(54, 214, 255, 0.35); }
.bento-card h3 { font-size: 1.35rem; }
.bento-card > p { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 8px 0 0; }
.chips li { font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(2, 6, 14, 0.35); color: #c4d0ea; transition: border-color 0.3s, color 0.3s; }
.bento-card:hover .chips li { border-color: var(--border-strong); }
.bento-link { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-weight: 600; font-size: 0.95rem; }
.bento-link .icon { transition: transform 0.3s var(--ease); }
.bento-card:hover .bento-link .icon { transform: translateX(5px); }

/* -------------------------------------------------------------- pipeline */
.pipeline { position: relative; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { position: relative; z-index: 1; padding: 30px 22px 26px; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(8, 18, 38, 0.8); transition: border-color 0.5s, box-shadow 0.5s, transform 0.5s var(--ease-out); }
.step.is-active { border-color: rgba(54, 214, 255, 0.55); box-shadow: 0 0 0 1px rgba(54, 214, 255, 0.25), 0 24px 60px -24px rgba(54, 214, 255, 0.55); transform: translateY(-6px); }
.step-no { position: absolute; top: 18px; right: 20px; font-family: var(--display); font-size: 2.6rem; font-weight: 700; color: rgba(148, 178, 255, 0.08); line-height: 1; transition: color 0.5s; }
.step.is-active .step-no { color: rgba(54, 214, 255, 0.3); }
.step-icon {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px;
  font-size: 1.5rem; color: #fff; background: linear-gradient(140deg, #1b4fe8, #1fb8ff);
  box-shadow: 0 10px 30px -8px rgba(31, 140, 255, 0.8); transition: transform 0.5s var(--ease-out);
}
.step.is-active .step-icon { transform: scale(1.08) rotate(-4deg); }
.step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 0.94rem; }
.pipeline-track { position: absolute; left: 6%; right: 6%; top: 57px; height: 2px; z-index: 0; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); }
.packet {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 18px 4px rgba(255, 93, 108, 0.7); opacity: 0;
}
.pipeline.is-running .packet { animation: packet 5.5s linear infinite; }
@keyframes packet {
  0% { left: 0%; opacity: 0; background: var(--red); box-shadow: 0 0 18px 4px rgba(255, 93, 108, 0.7); }
  6% { opacity: 1; }
  55% { background: var(--amber); box-shadow: 0 0 18px 4px rgba(255, 181, 71, 0.7); }
  90% { left: 100%; opacity: 1; background: var(--cyan); box-shadow: 0 0 22px 6px rgba(54, 214, 255, 0.8); }
  100% { left: 100%; opacity: 0; }
}

/* ----------------------------------------------------------------- split */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 90px); }
.split-copy p { color: var(--muted); margin-top: 18px; font-size: 1.05rem; }
.split-copy .kicker { margin-bottom: 16px; }

/* ----------------------------------------------------------------- score */
.score-card { padding: 34px; display: grid; grid-template-columns: 1fr; justify-items: center; gap: 28px; box-shadow: var(--shadow); }
.gauge { position: relative; width: 210px; height: 210px; }
.gauge::before {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  background: conic-gradient(from var(--angle), transparent, rgba(54, 214, 255, 0.25), transparent 30%);
  animation: spin-angle 5s linear infinite; filter: blur(8px);
}
.gauge svg { position: relative; width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 14; stroke-linecap: round; }
.gauge-track { stroke: rgba(148, 178, 255, 0.1); }
.gauge-value { stroke: url(#gauge-grad); stroke-dasharray: 502.65; stroke-dashoffset: 502.65; transition: stroke-dashoffset 1.8s var(--ease); filter: drop-shadow(0 0 8px rgba(54, 214, 255, 0.6)); }
.gauge-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-label strong { font-family: var(--display); font-size: 3.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.gauge-label span { color: var(--faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 6px; }
.weights { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; }
.weights li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 42%) 44px; align-items: center; gap: 14px; font-size: 0.93rem; }
.weights i { display: block; height: 7px; border-radius: 99px; background: rgba(148, 178, 255, 0.1); overflow: hidden; }
.weights b { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width 1.4s var(--ease); }
.weights li:nth-child(2) b { transition-delay: 0.08s; }
.weights li:nth-child(3) b { transition-delay: 0.16s; }
.weights li:nth-child(4) b { transition-delay: 0.24s; }
.weights li:nth-child(5) b { transition-delay: 0.32s; }
.weights li:nth-child(6) b { transition-delay: 0.4s; }
.weights em { font-style: normal; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.score-note { width: 100%; color: var(--faint); font-size: 0.85rem; border-top: 1px solid var(--border); padding-top: 16px; }

/* ----------------------------------------------------------------- phone */
.phone-wrap { display: flex; flex-direction: column; align-items: center; perspective: 1400px; }
.phone {
  position: relative; width: min(340px, 100%); height: 560px; padding: 16px; border-radius: 46px;
  background: linear-gradient(160deg, #111d36, #070d1c); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow), inset 0 0 0 6px #050a15, 0 0 80px -10px rgba(27, 79, 232, 0.5);
  transform-style: preserve-3d; will-change: transform;
}
.phone::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.08) 0%, transparent 35%);
}
.phone-notch { position: absolute; top: 18px; left: 50%; width: 96px; height: 24px; border-radius: 16px; background: #02050b; transform: translateX(-50%); }
.phone-head { display: flex; align-items: center; gap: 12px; margin: 48px 10px 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.phone-head strong { display: block; font-size: 0.95rem; }
.phone-head small { color: var(--faint); }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 700; background: linear-gradient(140deg, #1b4fe8, #1fb8ff); }
.phone-body { display: flex; flex-direction: column; gap: 10px; padding: 0 6px; }
.bubble {
  max-width: 84%; padding: 10px 14px; border-radius: 18px; font-size: 0.86rem; line-height: 1.45;
  opacity: 0; transform: translateY(10px) scale(0.97); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.bubble.is-shown { opacity: 1; transform: none; }
.bubble.out { align-self: flex-end; background: linear-gradient(120deg, #1b4fe8, #2f7bff); color: #fff; border-bottom-right-radius: 6px; font-family: var(--mono); font-size: 0.8rem; }
.bubble.in { align-self: flex-start; background: rgba(148, 178, 255, 0.1); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.bubble.typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.bubble.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite; }
.bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
.bubble.is-gone { display: none; }
.phone-caption { color: var(--faint); font-size: 0.82rem; margin-top: 16px; text-align: center; max-width: 320px; }
.cmd-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.cmd-list li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: border-color 0.3s, background 0.3s; }
.cmd-list li:hover { border-color: var(--border-strong); background: var(--surface-2); }
.cmd-list code { color: var(--cyan); font-weight: 600; }
.cmd-list span { color: var(--muted); font-size: 0.95rem; }

/* --------------------------------------------------------------- privacy */
.privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 30px; }
.privacy-col { padding: 30px; }
.privacy-col h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin-bottom: 18px; }
.privacy-col h3 .icon { color: var(--cyan); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 26px; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-2); box-shadow: 0 0 10px rgba(61, 123, 255, 0.8); }
.ticks-safe li::before { background: var(--green); box-shadow: 0 0 10px rgba(46, 230, 166, 0.7); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-weight: 600; }
.text-link:hover .icon { transform: translateX(3px); }
.text-link .icon { transition: transform 0.25s var(--ease); }

/* ----------------------------------------------------------- coming soon */
.soon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.soon {
  position: relative; padding: 22px 20px 20px; border-radius: 18px; border: 1px dashed var(--border-strong);
  background: rgba(148, 178, 255, 0.025); transition: border-color 0.3s, transform 0.4s var(--ease-out);
}
.soon:hover { border-color: rgba(54, 214, 255, 0.45); transform: translateY(-3px); }
.soon::after {
  content: "Coming soon"; position: absolute; top: 16px; right: 14px; font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 3px 8px; border-radius: 99px;
  background: var(--surface-2);
}
.soon > .icon { font-size: 1.35rem; color: var(--faint); margin-bottom: 14px; }
.soon h3 { font-size: 1rem; margin-bottom: 6px; color: #c9d4ec; }
.soon p { color: var(--faint); font-size: 0.88rem; line-height: 1.5; }

/* -------------------------------------------------------------- download */
.download, .download-strip {
  border: 1px solid transparent; background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    conic-gradient(from var(--angle), rgba(54, 214, 255, 0.7), rgba(27, 79, 232, 0.2), rgba(122, 92, 255, 0.7), rgba(27, 79, 232, 0.2), rgba(54, 214, 255, 0.7)) border-box;
  animation: spin-angle 10s linear infinite;
}
.download { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; padding: clamp(28px, 4vw, 54px); }
.download-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(28px, 4vw, 48px); }
.download-strip h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin-bottom: 8px; }
.download-strip-actions { display: flex; flex-wrap: wrap; gap: 14px; position: relative; }
.download-glow { position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(31, 140, 255, 0.35), transparent 65%); pointer-events: none; }
.download h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.download-main { position: relative; }
.download-main > p { color: var(--muted); margin-top: 14px; }
.download-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin: 28px 0 30px; }
.verify h3 { font-size: 1.02rem; margin-bottom: 12px; }
.hash { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: rgba(2, 6, 14, 0.5); margin-bottom: 10px; }
.hash-label { grid-column: 1 / -1; color: var(--faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
.hash code { font-size: 0.78rem; color: #cfe0ff; word-break: break-all; }
.copy { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 0.82rem; transition: border-color 0.2s, color 0.2s; }
.copy:hover { border-color: var(--border-strong); }
.copy.is-copied { color: var(--green); border-color: rgba(46, 230, 166, 0.5); }
.spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: start; position: relative; }
.spec-list li { display: flex; gap: 14px; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.spec-list .icon { font-size: 1.4rem; color: var(--cyan); margin-top: 2px; }
.spec-list strong { display: block; }
.spec-list span { color: var(--muted); font-size: 0.92rem; }

/* ------------------------------------------------------------------- faq */
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); transition: border-color 0.3s, background 0.3s; }
.faq details[open] { border-color: var(--border-strong); background: var(--surface-2); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; position: relative; font-weight: 600; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); transform: rotate(45deg); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 22px 20px; color: var(--muted); }
.faq details[open] p { animation: fade-up 0.4s var(--ease); }

/* ------------------------------------------------------------------- cta */
.cta-section { padding-top: 40px; }
.cta { text-align: center; padding: clamp(50px, 7vw, 90px) 24px; background: radial-gradient(ellipse at top, rgba(27, 79, 232, 0.35), transparent 70%), var(--surface); }
.cta h2 { position: relative; font-size: clamp(1.9rem, 4vw, 3rem); max-width: 760px; margin: 0 auto; }
.cta p { position: relative; color: var(--muted); margin: 16px 0 30px; font-size: 1.08rem; }
.cta .btn { position: relative; }
.cta-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.cta-rings span { position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(54, 214, 255, 0.25); animation: cta-ring 6s var(--ease) infinite; }
.cta-rings span:nth-child(2) { animation-delay: 2s; }
.cta-rings span:nth-child(3) { animation-delay: 4s; }
@keyframes cta-ring { 0% { transform: scale(0.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(3.4); opacity: 0; } }

/* ---------------------------------------------------------------- footer */
.footer { border-top: 1px solid var(--border); padding: 44px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: start; }
.footer-brand p { margin-top: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--muted); }
.footer-links a:hover { color: var(--text); }
.footer-legal { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 22px; }

/* ------------------------------------------------------ inner-page hero */
.page-hero { padding: calc(var(--nav-h) + clamp(50px, 8vw, 100px)) 0 clamp(30px, 5vw, 60px); text-align: center; }
.page-title { font-size: clamp(2.3rem, 5.4vw, 4.2rem); font-weight: 700; letter-spacing: -0.03em; max-width: 900px; margin: 0 auto; }
.page-lede { max-width: 700px; margin: 22px auto 0; color: var(--muted); font-size: 1.12rem; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 30px; color: var(--muted); font-size: 0.92rem; }
.legend span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.legend .icon { color: var(--cyan); }
.legend .limit .icon { color: var(--amber); }

/* ---------------------------------------------------------- feature docs */
.docs { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 50px; align-items: start; padding-bottom: 100px; }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); padding: 18px; border-radius: 18px; border: 1px solid var(--border); background: rgba(8, 18, 38, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.toc-title { color: var(--faint); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 6px 10px; }
.toc nav { display: grid; gap: 2px; }
.toc nav a { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--muted); font-size: 0.93rem; transition: color 0.25s, background 0.25s; }
.toc nav a .icon { color: var(--faint); transition: color 0.25s; }
.toc nav a em { margin-left: auto; font-style: normal; font-size: 0.75rem; color: var(--faint); }
.toc nav a:hover { color: var(--text); background: var(--surface); }
.toc nav a.is-active { color: #fff; background: linear-gradient(120deg, rgba(27, 79, 232, 0.35), rgba(31, 184, 255, 0.18)); }
.toc nav a.is-active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--grad); }
.toc nav a.is-active .icon { color: var(--cyan); }
.toc-cta { width: 100%; margin-top: 14px; }

.doc-group { margin-bottom: 70px; }
.doc-head { display: flex; gap: 22px; align-items: flex-start; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.doc-num { font-family: var(--display); font-size: 3.4rem; font-weight: 700; line-height: 0.9; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.doc-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.doc-head p { color: var(--muted); margin-top: 8px; }
.doc-head code { color: var(--cyan); }
.doc {
  position: relative; padding: 26px 28px; margin-bottom: 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface);
  transition: border-color 0.3s, background 0.3s;
}
.doc:hover { border-color: var(--border-strong); background: var(--surface-2); }
.doc::before { content: ""; position: absolute; left: -1px; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--grad); opacity: 0; transition: opacity 0.3s; }
.doc:hover::before { opacity: 1; }
.doc h3 { font-size: 1.3rem; }
.doc-what { color: #c9d4ec; margin-top: 6px; font-size: 1.02rem; }
.doc dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 0; }
.doc dl > div { padding: 14px 16px; border-radius: 14px; background: rgba(2, 6, 14, 0.4); border: 1px solid var(--border); }
.doc dt { display: flex; align-items: center; gap: 7px; font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cyan); margin-bottom: 6px; }
.doc dt::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.doc dl > div:nth-child(2) dt { color: #9ab4ff; }
.doc dl > div.limit dt { color: var(--amber); }
.doc dd { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.doc dd em { color: var(--text); }
.doc-end { text-align: center; padding: clamp(36px, 5vw, 60px) 24px; background: radial-gradient(ellipse at top, rgba(27, 79, 232, 0.3), transparent 70%), var(--surface); }
.doc-end h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.doc-end p { color: var(--muted); margin: 12px 0 26px; }

/* -------------------------------------------------------- download page */
.steps-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: none; }
.step-card { padding: 28px 22px; }
.step-big { display: block; font-family: var(--display); font-size: 3.2rem; font-weight: 700; line-height: 1; margin-bottom: 14px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step-card p { color: var(--muted); font-size: 0.94rem; }
.terminal { padding: 0 0 20px; background: #030712; box-shadow: var(--shadow); }
.terminal-bar { display: flex; gap: 7px; padding: 14px 16px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.terminal-bar span { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.terminal-bar span:nth-child(2) { background: #febc2e; }
.terminal-bar span:nth-child(3) { background: #28c840; }
.terminal-label { color: var(--faint); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 14px 20px 6px; }
.terminal pre { margin: 0 20px; padding: 12px 14px; border-radius: 10px; background: rgba(148, 178, 255, 0.05); overflow-x: auto; }
.terminal code { font-size: 0.82rem; color: #cfe0ff; white-space: pre; }
.terminal code.ok { color: var(--green); white-space: pre-wrap; word-break: break-all; }
.perm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.perm { padding: 22px; }
.perm h3 { font-size: 1.05rem; margin-bottom: 6px; }
.perm p { color: var(--muted); font-size: 0.93rem; }

/* ------------------------------------------------------------ legal page */
.legal { padding: calc(var(--nav-h) + 60px) 0 100px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 12px; }
.legal h2 { font-size: 1.45rem; margin: 46px 0 14px; }
.legal h3 { font-size: 1.08rem; margin: 26px 0 10px; }
.legal p, .legal li { color: var(--muted); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }
.legal strong { color: var(--text); }
.legal table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 0.93rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.legal th { color: var(--text); font-weight: 600; background: var(--surface); }
.legal td { color: var(--muted); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.draft-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 14px; margin-bottom: 30px; border: 1px solid rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.08); color: #ffd79a; }

/* ------------------------------------------------------ reveal + motion */
.js [data-reveal] {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s var(--ease) var(--d, 0s), transform 0.9s var(--ease) var(--d, 0s);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Headings revealed word by word. */
[data-split] .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
[data-split] .word > span { display: inline-block; }
.js [data-split] .word > span { transform: translate3d(0, 115%, 0); transition: transform 1s var(--ease-out) calc(var(--wi, 0) * 70ms + var(--split-delay, 0ms)); }
.js [data-split].is-visible .word > span { transform: none; }
.intro [data-hero-title] { --split-delay: 900ms; }

/* Icons that draw themselves when their block appears. */
.js .icon-draw { stroke-dasharray: 90; stroke-dashoffset: 90; transition: stroke-dashoffset 1.6s var(--ease) calc(var(--d, 0s) + 0.25s); }
.js .is-visible .icon-draw, .js .icon-draw.is-visible { stroke-dashoffset: 0; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1080px) {
  .principles { grid-template-columns: repeat(2, 1fr); }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .pipeline-track { display: none; }
  .download { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-wide { grid-column: span 2; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .doc dl { grid-template-columns: 1fr; }
  .docs { grid-template-columns: 210px minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 960px) {
  :root { --nav-h: 64px; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 12px auto 12px; flex-direction: column; gap: 2px; padding: 10px;
    background: rgba(6, 12, 26, 0.96); border: 1px solid var(--border); border-radius: 18px;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding: 12px 14px; font-size: 1rem; }
  .nav-links a[aria-current="page"]::after { left: 14px; margin-left: 0; bottom: 6px; }
  .nav-toggle { display: inline-flex; }
  .hero { padding-top: calc(var(--nav-h) + 30px); min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .hero-visual { height: 460px; min-height: 0; order: -1; margin: -20px -20px 0; }
  .hero-stage { inset: 0; }
  .float-card-a { right: 2%; top: 4%; transform: scale(0.86); transform-origin: top right; }
  .float-card-b { left: 2%; bottom: 8%; transform: scale(0.86); transform-origin: bottom left; }
  .float-card-c { display: none; }
  .hero-scroll { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split-reverse .phone-wrap { order: 1; }
  .privacy-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .perm-grid { grid-template-columns: repeat(2, 1fr); }
  .docs { grid-template-columns: 1fr; gap: 20px; }
  .toc { position: sticky; top: var(--nav-h); z-index: 20; padding: 10px; margin: 0 -8px; border-radius: 16px; }
  .toc-title, .toc-cta { display: none; }
  .toc nav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .toc nav::-webkit-scrollbar { display: none; }
  .toc nav a { white-space: nowrap; flex: none; }
  .toc nav a.is-active::before { display: none; }
}
@media (max-width: 640px) {
  .container, .container.narrow { width: min(100% - 28px, 1200px); }
  .btn-sm span { display: none; }
  .btn-sm { padding: 10px; }
  .principles, .pipeline, .bento, .steps-grid, .perm-grid { grid-template-columns: 1fr; }
  .bento-wide { grid-column: auto; }
  .hero-actions .btn, .download-strip-actions .btn { width: 100%; }
  .hero-visual { height: 380px; }
  .float-card-a, .float-card-b { transform: scale(0.74); }
  .cmd-list li { grid-template-columns: 1fr; gap: 4px; }
  .weights li { grid-template-columns: minmax(0, 1fr) 70px 38px; font-size: 0.86rem; }
  .doc { padding: 22px 18px; }
  .doc-head { flex-direction: column; gap: 10px; }
  .doc-num { font-size: 2.6rem; }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .js main { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-split] .word > span { transform: none; }
  .js .icon-draw { stroke-dasharray: none; stroke-dashoffset: 0; }
  .marquee-track { animation: none; }
  .bubble { opacity: 1; transform: none; }
  .bubble.typing { display: none; }
  .cursor-glow { display: none; }
}
.reduced-motion .bubble { opacity: 1; transform: none; }
.reduced-motion .bubble.typing { display: none; }

/* ==========================================================================
   Theme layer: navy + warm orange, with light ivory bands.
   The colour rhythm (deep navy grounds, a warm orange accent, alternating
   light sections) is taken as inspiration from esds.co.in at the product
   owner's request. Brand blue stays on icons, the 3D mark and the logo.
   Semantic colours in examples (green ok, amber warn, red bad) are unchanged.
   ========================================================================== */
:root {
  --orange: #ff7a2f;
  --orange-2: #ffb15c;
  --orange-deep: #d9570f;
  --ivory: #faf7f2;
  --ink: #0d1b3a;
  --ink-muted: #52617c;
  --grad-warm: linear-gradient(120deg, #ffc27d 0%, #ff8a3d 50%, #ff6a2b 100%);
  --grad: var(--grad-warm);
}
.kicker { color: var(--orange-2); }
.eyebrow { border-color: rgba(255, 160, 90, 0.28); }
.btn-primary {
  color: #0b1633;
  background: linear-gradient(120deg, #ffb865, #ff8a3d 55%, #ff6a2b);
  box-shadow: 0 10px 30px -8px rgba(255, 122, 47, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-primary:hover { box-shadow: 0 16px 40px -8px rgba(255, 122, 47, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn-primary::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%); }
.btn-pulse::before { border-color: rgba(255, 160, 90, 0.65); }
.nav-links a[aria-current="page"]::after { background: var(--grad-warm); }
.scroll-progress span { background: var(--grad-warm); box-shadow: 0 0 12px rgba(255, 138, 61, 0.7); }
.bento-link, .text-link { color: var(--orange-2); }
.bento-card:hover .bento-count { color: rgba(255, 150, 80, 0.4); }
.bento-card::after { background: conic-gradient(from var(--angle), transparent 55%, #ff8a3d, #36d6ff, transparent 85%); }
.toc nav a.is-active { background: linear-gradient(120deg, rgba(255, 122, 47, 0.2), rgba(27, 79, 232, 0.22)); }
.toc nav a.is-active::before { background: var(--grad-warm); }
.toc nav a.is-active .icon { color: var(--orange-2); }
.download, .download-strip {
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    conic-gradient(from var(--angle), rgba(255, 138, 61, 0.75), rgba(27, 79, 232, 0.25), rgba(54, 214, 255, 0.6), rgba(27, 79, 232, 0.25), rgba(255, 138, 61, 0.75)) border-box;
}
.download-glow { background: radial-gradient(circle, rgba(255, 122, 47, 0.28), transparent 65%); }
.cta { background: radial-gradient(ellipse at top, rgba(255, 122, 47, 0.22), transparent 60%), radial-gradient(ellipse at bottom, rgba(27, 79, 232, 0.3), transparent 70%), var(--surface); }
.cta-rings span { border-color: rgba(255, 160, 90, 0.28); }
.footer { background: #06112b; border-top-color: rgba(255, 160, 90, 0.18); }
.hero-chips .icon { color: var(--orange-2); }

/* Full-bleed orange band. */
.band-orange { background: linear-gradient(115deg, #d9570f 0%, #ff7a2f 45%, #ffae5a 100%); color: var(--ink); }
.band-orange .stat { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.34); box-shadow: 0 20px 40px -30px rgba(80, 20, 0, 0.6); }
.band-orange .stat strong { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.band-orange .stat > span { color: rgba(13, 27, 58, 0.82); font-weight: 500; }
.band-orange .stat::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent); }

/* Light ivory band. */
.band-light { background: var(--ivory); color: var(--ink); }
.band-light h2, .band-light h3 { color: var(--ink); }
.band-light .section-head p:not(.kicker), .band-light .card p, .band-light .ticks li { color: var(--ink-muted); }
.band-light .kicker { color: var(--orange-deep); }
.band-light .grad { background: linear-gradient(120deg, #1b4fe8, #3d7bff 55%, #6a4dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band-light .card { background: #fff; border-color: rgba(13, 27, 58, 0.08); box-shadow: 0 24px 50px -34px rgba(13, 27, 58, 0.4); }
.band-light .principles .card:hover { border-color: rgba(255, 122, 47, 0.45); box-shadow: 0 30px 60px -30px rgba(255, 122, 47, 0.45); }
.band-light .card-icon { background: linear-gradient(140deg, rgba(255, 138, 61, 0.16), rgba(27, 79, 232, 0.1)); border-color: rgba(255, 122, 47, 0.28); color: var(--orange-deep); }
.band-light .spot::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 138, 61, 0.12), transparent 45%); }
.band-light .privacy-col h3 .icon { color: var(--orange-deep); }
.band-light .ticks li::before { background: #1b4fe8; box-shadow: none; }
.band-light .ticks-safe li::before { background: #10b27c; }
.band-light .text-link { color: var(--orange-deep); }
.band-light .perm { background: #fff; }

/* Directional reveals, in the manner of AOS. */
.js [data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.js [data-reveal="zoom"] { transform: scale(0.93); }
.js [data-reveal="left"].is-visible, .js [data-reveal="right"].is-visible, .js [data-reveal="zoom"].is-visible { transform: none; }

/* Hero reveals follow each other, and wait for the intro to finish. */
.hero-lede { --d: 0.12s; }
.hero-actions { --d: 0.22s; }
.hero-chips { --d: 0.32s; }
.intro .hero .eyebrow { --d: 0.95s; }
.intro .hero-lede { --d: 1.07s; }
.intro .hero-actions { --d: 1.17s; }
.intro .hero-chips { --d: 1.27s; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal="left"], .js [data-reveal="right"], .js [data-reveal="zoom"] { transform: none; }
}

/* ----------------------------------------------------- mobile corrections */
@media (max-width: 960px) {
  /* A grid track sized 1fr still grows to fit its widest child. The table of
     contents is a single scrolling row of chips, so without minmax(0, 1fr) it
     widened the whole column past the screen and cut every card off. */
  .docs { grid-template-columns: minmax(0, 1fr); }
  .toc, .doc-body { min-width: 0; }
  .toc .toc-cta, .toc .toc-title { display: none; }
}
@media (max-width: 640px) {
  /* The example cards crowd the 3D mark on a phone; the copy below says the same. */
  .float-card { display: none; }
}

/* ==========================================================================
   Simulations (home page) and compact feature cards
   ========================================================================== */

/* ---------------------------------------------------------------- demo */
.demo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.demo-tab {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 14px; text-align: left; cursor: pointer;
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-out);
}
.demo-tab:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.demo-tab .icon { font-size: 1.35rem; color: var(--faint); transition: color 0.3s; }
.demo-tab b { display: block; font-size: 0.98rem; }
.demo-tab small { display: block; color: var(--muted); font-size: 0.8rem; }
.demo-tab[aria-selected="true"] {
  border-color: rgba(255, 138, 61, 0.6);
  background: linear-gradient(120deg, rgba(255, 122, 47, 0.18), rgba(27, 79, 232, 0.16));
  box-shadow: 0 18px 40px -22px rgba(255, 122, 47, 0.7);
}
.demo-tab[aria-selected="true"] .icon { color: var(--orange-2); }

.demo-stage { display: grid; grid-template-columns: auto minmax(0, 420px); justify-content: center; align-items: center; gap: clamp(30px, 7vw, 90px); }
.demo-phone {
  position: relative; width: 300px; height: 610px; border-radius: 46px; overflow: hidden;
  background: linear-gradient(160deg, #111d36, #070d1c); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow), inset 0 0 0 6px #050a15, 0 0 90px -20px rgba(255, 122, 47, 0.35), 0 0 120px -30px rgba(27, 79, 232, 0.6);
}
.demo-notch { position: absolute; top: 18px; left: 50%; width: 90px; height: 22px; margin-left: -45px; border-radius: 14px; background: #02050b; z-index: 4; }
.demo-badge {
  position: absolute; top: 20px; right: 26px; z-index: 4; padding: 2px 9px; border-radius: 99px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #0b1633; background: var(--grad-warm);
}
.demo-screen {
  position: absolute; inset: 14px; border-radius: 34px; padding: 56px 18px 18px; display: flex; flex-direction: column; gap: 12px;
  background: radial-gradient(circle at 50% 0%, rgba(27, 79, 232, 0.28), transparent 60%), #060c1b;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.98);
  transition: opacity 0.5s var(--ease), transform 0.55s var(--ease-out), visibility 0.5s;
}
.demo-screen.is-active { opacity: 1; visibility: visible; transform: none; }
.ds-title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }

.ds-ring { position: relative; width: 150px; height: 150px; margin: 2px auto 0; }
.ds-ring::before {
  content: ""; position: absolute; inset: 10px; border-radius: 50%; opacity: 0; transition: opacity 0.4s;
  background: conic-gradient(from 0deg, transparent 65%, rgba(54, 214, 255, 0.4));
  animation: ds-spin 1.3s linear infinite;
}
.ds-ring.is-scanning::before { opacity: 1; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-ring svg { position: relative; width: 100%; height: 100%; transform: rotate(-90deg); }
.ds-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ds-ring-track { stroke: rgba(148, 178, 255, 0.12); }
.ds-ring-val { stroke: url(#scan-grad); stroke-dasharray: 326.73; stroke-dashoffset: 326.73; filter: drop-shadow(0 0 6px rgba(54, 214, 255, 0.6)); }
.ds-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ds-ring-label strong { font-family: var(--display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ds-ring-label small { color: var(--faint); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
.ds-now { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(148, 178, 255, 0.06); border: 1px solid var(--border); }
.ds-app-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--blue); box-shadow: inset 0 -10px 14px rgba(0, 0, 0, 0.22); transition: background 0.2s; }
.ds-now small { display: block; color: var(--faint); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; }
.ds-now b { font-size: 0.88rem; }
.ds-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ds-stats div { padding: 9px 12px; border-radius: 12px; background: rgba(148, 178, 255, 0.05); border: 1px solid var(--border); }
.ds-stats strong { display: block; font-family: var(--display); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.ds-stats small { color: var(--muted); font-size: 0.7rem; }
.ds-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-results li {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px;
  background: rgba(148, 178, 255, 0.06); border: 1px solid var(--border);
  opacity: 0; transform: translateY(10px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease-out);
}
.ds-results.is-shown li { opacity: 1; transform: none; }
.ds-results.is-shown li:nth-child(2) { transition-delay: 0.18s; }
.ds-results li div { flex: 1; min-width: 0; }
.ds-results b { display: block; font-size: 0.84rem; }
.ds-results small { color: var(--muted); font-size: 0.72rem; }
.ds-results em { font-style: normal; font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.ds-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.ds-results .bad .ds-dot { background: var(--red); box-shadow: 0 0 10px var(--red); }
.ds-results .bad em { color: var(--red); background: rgba(255, 93, 108, 0.14); }
.ds-results .warn .ds-dot { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.ds-results .warn em { color: var(--amber); background: rgba(255, 181, 71, 0.14); }

.dl-input {
  display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 12px; overflow: hidden; white-space: nowrap;
  border-radius: 14px; border: 1px solid var(--border-strong); background: rgba(2, 6, 14, 0.6); font-family: var(--mono); font-size: 0.72rem;
}
.dl-input .icon { flex: none; color: var(--cyan); }
.dl-caret { width: 2px; height: 15px; flex: none; background: var(--orange-2); animation: dl-blink 1s steps(1) infinite; }
@keyframes dl-blink { 50% { opacity: 0; } }
.dl-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dl-sources li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 12px; font-size: 0.8rem;
  border-radius: 12px; background: rgba(148, 178, 255, 0.05); border: 1px solid var(--border); transition: border-color 0.3s, background 0.3s;
}
.dl-sources em { font-style: normal; font-weight: 600; font-size: 0.74rem; color: var(--faint); }
.dl-sources li.is-checking { border-color: rgba(54, 214, 255, 0.45); }
.dl-sources li.is-checking em { color: var(--cyan); }
.dl-sources li.bad { border-color: rgba(255, 93, 108, 0.5); background: rgba(255, 93, 108, 0.09); }
.dl-sources li.bad em { color: var(--red); }
.dl-sources li.ok { border-color: rgba(46, 230, 166, 0.4); background: rgba(46, 230, 166, 0.06); }
.dl-sources li.ok em { color: var(--green); }
.dl-verdict {
  margin-top: auto; padding: 16px; border-radius: 16px; border: 1px solid var(--border);
  opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.dl-verdict.is-shown { opacity: 1; transform: none; }
.dl-verdict strong { display: block; font-family: var(--display); font-size: 1.15rem; }
.dl-verdict small { color: var(--muted); font-size: 0.76rem; }
.dl-verdict.bad { background: linear-gradient(140deg, rgba(255, 93, 108, 0.24), rgba(255, 93, 108, 0.05)); border-color: rgba(255, 93, 108, 0.55); }
.dl-verdict.bad strong { color: #ff939c; }
.dl-verdict.ok { background: linear-gradient(140deg, rgba(46, 230, 166, 0.2), rgba(46, 230, 166, 0.04)); border-color: rgba(46, 230, 166, 0.45); }
.dl-verdict.ok strong { color: #74f1c6; }

.demo-lock {
  background: radial-gradient(circle at 25% 8%, rgba(255, 122, 47, 0.38), transparent 50%), radial-gradient(circle at 85% 95%, rgba(27, 79, 232, 0.5), transparent 55%), #050a18;
}
.dm-time { text-align: center; font-family: var(--display); font-size: 3.1rem; font-weight: 700; line-height: 1; margin-top: 10px; font-variant-numeric: tabular-nums; }
.dm-date { text-align: center; color: rgba(233, 239, 253, 0.65); font-size: 0.8rem; margin: -4px 0 8px; }
.dm-notif {
  padding: 12px 14px; border-radius: 18px; background: rgba(20, 30, 55, 0.75); border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0; transform: translateY(-24px) scale(0.95); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.dm-notif.is-shown { opacity: 1; transform: none; }
.dm-app { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 0.66rem; color: rgba(233, 239, 253, 0.6); }
.dm-ic { width: 14px; height: 14px; border-radius: 4px; }
.dm-ic-sms { background: #2ee6a6; }
.dm-ic-s1 { background: var(--grad-warm); }
.dm-notif b { font-size: 0.84rem; }
.dm-notif p { font-size: 0.76rem; line-height: 1.4; color: rgba(233, 239, 253, 0.82); }
.dm-warn { border-color: rgba(255, 93, 108, 0.6); background: linear-gradient(140deg, rgba(255, 93, 108, 0.32), rgba(20, 30, 55, 0.85)); box-shadow: 0 12px 30px -10px rgba(255, 93, 108, 0.65); }
.dm-warn.is-shown { animation: dm-nudge 0.5s 0.55s var(--ease); }
@keyframes dm-nudge { 0%, 100% { translate: 0; } 25% { translate: -5px; } 75% { translate: 5px; } }
.dm-foot { margin-top: auto; text-align: center; font-size: 0.74rem; color: rgba(233, 239, 253, 0.8); opacity: 0; transition: opacity 0.6s; }
.dm-foot.is-shown { opacity: 1; }

.demo-side { display: grid; }
.demo-copy { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity 0.45s var(--ease), transform 0.5s var(--ease-out), visibility 0.45s; }
.demo-copy.is-active { opacity: 1; visibility: visible; transform: none; }
.demo-copy h3 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.demo-copy p { color: var(--muted); font-size: 1.08rem; margin: 14px 0 24px; }
.demo-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-btn { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 600; transition: border-color 0.3s, background 0.3s, color 0.3s; }
.chip-btn:hover { border-color: var(--border-strong); }
.chip-btn.is-on { border-color: rgba(255, 138, 61, 0.65); background: rgba(255, 122, 47, 0.18); color: #ffd3b0; }
.demo-note { grid-row: 2; color: var(--faint); font-size: 0.82rem; margin-top: 26px; }

/* ------------------------------------------------------- score simulator */
.sim-toggles { display: grid; gap: 10px; margin-top: 26px; }
.sim-toggle {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 13px 16px; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); transition: border-color 0.3s, background 0.3s;
}
.sim-toggle:hover { border-color: var(--border-strong); background: var(--surface-2); }
.sim-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sim-switch { position: relative; width: 44px; height: 25px; flex: none; border-radius: 99px; background: rgba(148, 178, 255, 0.2); transition: background 0.3s; }
.sim-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.3s var(--ease-out); }
.sim-toggle input:checked + .sim-switch { background: var(--grad-warm); }
.sim-toggle input:checked + .sim-switch::after { transform: translateX(19px); }
.sim-toggle input:focus-visible + .sim-switch { outline: 2px solid var(--cyan); outline-offset: 3px; }
.sim-arc { stroke-dasharray: 502.65; stroke-dashoffset: 502.65; transition: stroke-dashoffset 0.8s var(--ease-out); }
.sim-arc[data-tone="ok"] { stroke: url(#gauge-ok); filter: drop-shadow(0 0 8px rgba(46, 230, 166, 0.55)); }
.sim-arc[data-tone="warn"] { stroke: url(#gauge-warn); filter: drop-shadow(0 0 8px rgba(255, 138, 61, 0.55)); }
.sim-arc[data-tone="bad"] { stroke: url(#gauge-bad); filter: drop-shadow(0 0 8px rgba(255, 77, 97, 0.6)); }
.sim-band { font-family: var(--display); font-weight: 700; font-size: 1.15rem; margin-top: -8px; transition: color 0.3s; }
.sim-band.ok { color: var(--green); }
.sim-band.warn { color: var(--orange-2); }
.sim-band.bad { color: var(--red); }
.sim-reasons { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.sim-reasons li {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 0.88rem;
  border-radius: 10px; background: rgba(148, 178, 255, 0.05); border: 1px solid var(--border); animation: fade-up 0.35s var(--ease);
}
.sim-reasons em { font-style: normal; font-weight: 600; color: var(--red); font-variant-numeric: tabular-nums; }
.sim-reasons .sim-rule { color: var(--orange-2); border-color: rgba(255, 138, 61, 0.4); background: rgba(255, 122, 47, 0.08); font-size: 0.82rem; }

/* ------------------------------------------------ compact feature cards */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.fcard {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; overflow: hidden;
  border-radius: 16px; border: 1px solid var(--border); background: var(--surface);
  transition: border-color 0.3s, background 0.3s, transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.fcard::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--grad-warm); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.45s var(--ease-out); }
.fcard:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-4px); box-shadow: 0 20px 40px -26px rgba(255, 122, 47, 0.5); }
.fcard:hover::after { transform: scaleX(1); }
.fcard h3 { font-size: 1.05rem; }
.fcard p { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.fmeta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 10px; }
.fneed { display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; color: #a9c4ff; background: rgba(61, 123, 255, 0.14); border: 1px solid rgba(61, 123, 255, 0.28); }
.flimit { position: relative; padding-left: 18px; font-size: 0.8rem; color: #ffc08a; }
.flimit::before { content: "!"; position: absolute; left: 0; top: 1px; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; font-size: 0.6rem; font-weight: 800; color: #0b1633; background: var(--orange-2); }
.flimit-tag { display: inline-block; font-size: 0.74rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; color: #ffc08a; background: rgba(255, 122, 47, 0.14); border: 1px solid rgba(255, 122, 47, 0.3); }
.legend b { margin-right: 6px; }
.doc-group { margin-bottom: 56px; }
.doc-head { margin-bottom: 20px; padding-bottom: 18px; align-items: center; }

@media (max-width: 960px) {
  .demo-stage { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .demo-copy { transform: translateY(14px); }
  .demo-choices { justify-content: center; }
  .demo-note { text-align: center; }
}
@media (max-width: 640px) {
  .demo-tab { padding: 10px 14px 10px 12px; }
  .demo-tab small { display: none; }
  .demo-phone { width: min(300px, 100%); }
  .doc-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-ring::before, .dl-caret { animation: none; }
  .demo-screen, .demo-copy { transition: none; }
}

/* ------------------------------------------------------------------ plans */
/* Tier colours (--t1, --t2) and how much of the feature list each plan covers
   (--cover) are set per card, so the markup needs no inline styles - the
   Content-Security-Policy would refuse them. */
.plans-section { overflow: hidden; }
.plans-stage { position: relative; padding-bottom: 20px; }
.plans-floor {
  position: absolute; left: -15%; right: -15%; bottom: -80px; height: 560px; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 138, 61, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 123, 255, 0.2) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(700px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 50% 100%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 75% at 50% 100%, #000 15%, transparent 72%);
  animation: plans-floor 5s linear infinite;
}
@keyframes plans-floor { to { background-position: 0 60px, 0 0; } }

.plans { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan-slot { display: flex; min-width: 0; }
.js [data-reveal="flip"] { transform: perspective(1200px) rotateX(24deg) translate3d(0, 70px, -90px); transform-origin: 50% 100%; }
.js [data-reveal="flip"].is-visible { transform: none; }

.plan-basic { --t1: #5fe3ff; --t2: #3d7bff; --cover: 53.85%; }
.plan-plus { --t1: #ffc27d; --t2: #ff6a2b; --cover: 100%; }
.plan-family { --t1: #6ff5c8; --t2: #17b39a; --cover: 100%; }
.plan-business { --t1: #d2b8ff; --t2: #7a5cff; --cover: 100%; }

.plan {
  position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 30px 22px 24px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(22, 36, 70, 0.95), rgba(6, 12, 28, 0.97));
  box-shadow: 0 34px 60px -44px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out), translate 0.45s var(--ease-out), border-color 0.3s, box-shadow 0.45s;
}
.plan.is-tilting { transition: transform 0.12s linear, translate 0.45s var(--ease-out), border-color 0.3s, box-shadow 0.45s; }
.plan:hover {
  translate: 0 -8px;
  border-color: color-mix(in srgb, var(--t1) 45%, transparent);
  box-shadow: 0 46px 90px -44px color-mix(in srgb, var(--t2) 75%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.plan-popular {
  border-color: transparent;
  background:
    linear-gradient(165deg, #1f1a33, #0a0f22) padding-box,
    conic-gradient(from var(--angle), var(--t1), #36d6ff, var(--t2), #7a5cff, var(--t1)) border-box;
  animation: spin-angle 6s linear infinite;
  box-shadow: 0 40px 90px -40px rgba(255, 122, 47, 0.6);
}
@media (min-width: 1201px) { .plan-slot-popular { translate: 0 -18px; } }

/* A light that follows the pointer across the card. */
.plan-shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--t1) 22%, transparent), transparent 55%);
}
.plan:hover .plan-shine, .plan-popular .plan-shine { opacity: 1; }

/* Depth: when the card tilts, these layers move at different distances. */
.plan-top, .plan-meter { transform: translateZ(26px); }
.plan-price, .plan-month { transform: translateZ(44px); }
.plan-device { transform: translateZ(30px); }
.plan-list { transform: translateZ(14px); }
.plan-cta { transform: translateZ(36px); }

.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translate3d(-50%, 0, 60px); z-index: 2; white-space: nowrap;
  padding: 5px 14px; border-radius: 99px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #1a0d02; background: var(--grad-warm); box-shadow: 0 10px 24px -8px rgba(255, 122, 47, 0.8);
}

/* A three-layer shield per tier, turning slowly. */
.plan-emblem { position: relative; width: 70px; height: 78px; margin: 0 0 4px 2px; transform-style: preserve-3d; animation: plan-emblem 6s ease-in-out infinite; }
@keyframes plan-emblem {
  0%, 100% { transform: translateZ(64px) rotateY(-22deg) rotateX(6deg) translateY(0); }
  50% { transform: translateZ(64px) rotateY(22deg) rotateX(-4deg) translateY(-6px); }
}
.em-layer { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 15%, 100% 52%, 50% 100%, 0 52%, 0 15%); }
.em-back { background: linear-gradient(160deg, var(--t1), var(--t2)); opacity: 0.35; transform: translateZ(-18px) scale(1.12); }
.em-mid { background: linear-gradient(160deg, color-mix(in srgb, var(--t2) 70%, #000), #070d1c); transform: translateZ(-8px) scale(1.02); }
.em-front { display: grid; place-items: center; background: linear-gradient(160deg, var(--t1), var(--t2)); color: #0b1633; transform: translateZ(6px) scale(0.84); }
.em-front .icon { width: 30px; height: 30px; }
.plan-emblem::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -20px; height: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--t2) 60%, transparent), transparent);
  transform: translateZ(-30px);
}

.plan-top h3 { font-size: 1.4rem; }
.plan-top p { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }

.plan-meter { display: grid; gap: 7px; }
.plan-meter-bar { display: block; height: 6px; border-radius: 99px; background: rgba(148, 178, 255, 0.12); overflow: hidden; }
.plan-meter-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--t1), var(--t2)); transition: width 1.4s var(--ease-out) 0.35s; }
.plan-slot.is-visible .plan-meter-bar i, html:not(.js) .plan-meter-bar i { width: var(--cover); }
.plan-meter small { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.03em; color: color-mix(in srgb, var(--t1) 80%, #fff); }

.plan-price { display: flex; align-items: flex-start; gap: 2px; }
.plan-cur { font-family: var(--display); font-size: 1.5rem; font-weight: 700; margin-top: 5px; color: var(--t1); }
.plan-price strong {
  font-family: var(--display); font-size: clamp(2.5rem, 3.3vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums;
  text-shadow: 0 12px 34px color-mix(in srgb, var(--t2) 55%, transparent);
}
.plan-per { margin: 7px 0 0 8px; font-size: 0.76rem; line-height: 1.3; color: var(--muted); }
.plan-month { margin-top: -8px; font-size: 0.8rem; color: var(--faint); }
.plan-device {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 99px;
  font-size: 0.78rem; font-weight: 600; color: #dbe5ff; background: color-mix(in srgb, var(--t2) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--t1) 35%, transparent);
}
.plan-device .icon { width: 15px; height: 15px; color: var(--t1); }

.plan-list { list-style: none; margin: 2px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 9px; flex: 1; align-content: start; }
.plan-list li { position: relative; padding-left: 27px; font-size: 0.87rem; line-height: 1.35; color: #cdd7ee; }
.plan-list li::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; }
.plan-list li.yes::before { background: rgba(46, 230, 166, 0.16); box-shadow: inset 0 0 0 1px rgba(46, 230, 166, 0.38); }
.plan-list li.yes::after {
  content: ""; position: absolute; left: 6px; top: 5px; width: 7px; height: 4px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg);
}
.plan-list li.no { color: var(--faint); text-decoration: line-through; text-decoration-color: rgba(255, 93, 108, 0.5); }
.plan-list li.no::before { background: rgba(255, 93, 108, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 93, 108, 0.32); }
.plan-list li.no::after {
  content: ""; position: absolute; left: 4px; top: 4px; width: 10px; height: 10px;
  background:
    linear-gradient(45deg, transparent 43%, var(--red) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--red) 43% 57%, transparent 57%);
}
.plan-list .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plan-cta { width: 100%; margin-top: 6px; }
.plans-note { text-align: center; color: var(--faint); font-size: 0.85rem; margin-top: 30px; }

@media (max-width: 1200px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; } }
@media (max-width: 640px) {
  .plans { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .plans-floor { height: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .plans-floor, .plan-emblem, .plan-popular { animation: none; }
  .js [data-reveal="flip"] { transform: none; }
  .plan-emblem { transform: translateZ(64px); }
}

/* ------------------------------------------------------------------- film */
.film {
  /* width: 100% - inside the reveal wrapper the box shrink-wraps, and a video
     sized as 100% of a shrink-wrapped box collapses to nothing. */
  position: relative; width: 100%; max-width: 1000px; margin: 0 auto; padding: 2px; border-radius: 26px; overflow: hidden;
  background: conic-gradient(from var(--angle), #ff8a3d, #36d6ff, #3d7bff, #ff8a3d);
  animation: spin-angle 8s linear infinite;
  box-shadow: 0 40px 90px -40px rgba(255, 122, 47, 0.55), 0 30px 80px -30px rgba(27, 79, 232, 0.6);
}
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; background: #040914; }
.film-note { text-align: center; color: var(--faint); font-size: 0.85rem; margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .film { animation: none; } }

/* -------------------------------------------------------------- checkout */
.footer-links { flex-wrap: wrap; }
.pay { padding: calc(var(--nav-h) + 50px) 0 100px; }
.pay [hidden] { display: none !important; }
.pay h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 18px; }
.pay-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.pay-summary { position: sticky; top: calc(var(--nav-h) + 24px); padding: 26px; }
.pay-summary h3 { font-size: 1.5rem; }
.pay-mode { padding: 12px 16px; border-radius: 14px; margin-bottom: 24px; font-size: 0.92rem; border: 1px solid rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.08); color: #ffd79a; }
.pay-mode.is-off { border-color: var(--border-strong); background: var(--surface); color: var(--muted); }
.pay-step { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 16px; transition: opacity 0.3s; }
.pay-step h2 { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; margin-bottom: 14px; }
.pay-step.is-locked { opacity: 0.45; pointer-events: none; }
.pay-num { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; font-size: 0.85rem; font-weight: 700; color: #1a0d02; background: var(--grad-warm); }
.pay-step.is-done .pay-num { background: var(--green); color: #062d22; }
.pay-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 92px; }
.pay-plan {
  display: grid; gap: 3px; text-align: left; padding: 14px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--text);
  border: 1px solid var(--border); background: rgba(8, 18, 38, 0.6); transition: border-color 0.25s, background 0.25s, translate 0.25s, box-shadow 0.25s;
}
.pay-plan:hover { border-color: var(--border-strong); translate: 0 -2px; }
.pay-plan:focus-visible { outline: 2px solid var(--orange-2); outline-offset: 2px; }
.pay-plan[aria-checked="true"] { border-color: rgba(255, 138, 61, 0.75); background: rgba(255, 122, 47, 0.13); box-shadow: 0 14px 30px -18px rgba(255, 122, 47, 0.75); }
.pay-plan strong { font-size: 0.95rem; }
.pay-plan b { font-family: var(--display); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.pay-plan small { color: var(--muted); font-size: 0.74rem; }
.field { display: grid; gap: 7px; margin-bottom: 14px; flex: 1; min-width: 0; }
.field > span { font-size: 0.85rem; color: var(--muted); }
.field em { font-style: normal; color: var(--faint); }
.field input {
  width: 100%; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: rgba(4, 9, 20, 0.75); color: var(--text); font: inherit; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus { outline: none; border-color: rgba(255, 138, 61, 0.85); box-shadow: 0 0 0 3px rgba(255, 122, 47, 0.22); }
.field-row { display: flex; gap: 10px; align-items: flex-end; }
.field-row .btn { margin-bottom: 14px; flex: none; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font-size: 0.9rem; color: var(--muted); }
.check input { flex: none; margin-top: 3px; width: 17px; height: 17px; accent-color: var(--orange); }
.check a, .pay-assure a, a.inline, .legal a { color: var(--orange-2); text-decoration: underline; text-underline-offset: 3px; }
.pay-button { width: 100%; }
.pay-button:disabled, .field-row .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pay-status { min-height: 1.4em; margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.pay-status.is-bad { color: #ff939c; }
.pay-status.is-ok { color: var(--green); }
.linklike { background: none; border: 0; padding: 0; color: var(--orange-2); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.signin-signed { color: var(--muted); }
.pay-lines { margin: 18px 0 8px; display: grid; gap: 10px; }
.pay-lines div { display: flex; justify-content: space-between; gap: 10px; }
.pay-lines dt { color: var(--muted); }
.pay-lines dd { margin: 0; font-variant-numeric: tabular-nums; }
.pay-total { padding-top: 12px; border-top: 1px solid var(--border); font-weight: 700; align-items: baseline; }
.pay-total dd { font-family: var(--display); font-size: 1.6rem; }
.pay-assure { list-style: none; padding: 16px 0 0; margin: 14px 0 0; border-top: 1px solid var(--border); display: grid; gap: 9px; font-size: 0.84rem; color: var(--muted); }
.pay-assure li { position: relative; padding-left: 22px; }
.pay-assure li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 4px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.pay-done { padding: 36px 28px; text-align: center; border-radius: var(--radius); border: 1px solid rgba(46, 230, 166, 0.4); background: rgba(46, 230, 166, 0.06); }
.pay-done:focus { outline: none; }
.pay-done-icon { width: 54px; height: 54px; padding: 12px; border-radius: 50%; color: #062d22; background: var(--green); stroke-width: 3; }
.pay-done h2 { font-size: 1.8rem; margin: 14px 0 10px; }
.pay-done p { margin-bottom: 8px; }
.pay-done .btn { margin: 12px 6px 0; }
.pay-h2 { font-size: 1.3rem; margin: 10px 0 14px; }
.acct-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; color: var(--muted); }
.acct-plan { padding: 28px; margin: 10px 0 34px; display: grid; gap: 8px; }
.acct-plan h2 { font-size: 1.7rem; }
.acct-badge { justify-self: start; padding: 4px 12px; border-radius: 99px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.acct-badge.is-active { color: #062d22; background: var(--green); }
.acct-badge.is-expired { color: #fff; background: rgba(255, 93, 108, 0.85); }
.acct-badge.is-free { color: var(--text); background: var(--surface-2); }
.acct-plan .btn { justify-self: start; margin-top: 8px; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.acct-table th, .acct-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.acct-table th { background: var(--surface); }
.acct-table td { color: var(--muted); }
.acct-table code { font-family: var(--mono); font-size: 0.8rem; }
.acct-help { margin-top: 14px; }
.mode-tag { margin-left: 8px; padding: 1px 7px; border-radius: 6px; font-size: 0.66rem; font-weight: 700; color: #1a0d02; background: #ffd79a; }
.legal ol { padding-left: 20px; display: grid; gap: 8px; }
.legal ol li { color: var(--muted); }
@media (max-width: 960px) {
  .pay-grid { grid-template-columns: minmax(0, 1fr); }
  .pay-summary { position: static; }
  .pay-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .field-row { flex-direction: column; align-items: stretch; gap: 0; }
  .pay-step { padding: 20px 16px; }
}

/* ---------------------------------------------------------- phone polish */
/* Found by measuring every page at 360 px and 768 px. */
@media (max-width: 960px) {
  /* Touch targets: 44 px is the smallest a thumb hits reliably. */
  .btn-sm { min-width: 44px; min-height: 44px; justify-content: center; }
}
/* On phones .btn-sm drops its label and keeps its icon. A button with no icon
   (Sign out) would be left as an empty square, so it keeps its words. */
.btn-sm.keep-label span { display: inline; }
@media (max-width: 640px) {
  .btn-sm.keep-label { padding: 10px 16px; }
  .copy { min-height: 40px; padding: 8px 14px; }
  .linklike { display: inline-block; padding: 8px 0; }
  /* Commands wrap instead of scrolling sideways inside their box. */
  .terminal code { white-space: pre-wrap; word-break: break-all; }
}

/* ------------------------------------------------------------------ about */
.about { padding: calc(var(--nav-h) + 56px) 0 100px; }
.about-hero { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.about-photo-wrap { position: relative; justify-self: center; width: min(360px, 100%); aspect-ratio: 1; }
.about-photo-ring {
  position: absolute; inset: -10px; border-radius: 36px;
  background: conic-gradient(from var(--angle), #ffc27d, #ff6a2b, #36d6ff, #3d7bff, #ffc27d);
  animation: spin-angle 8s linear infinite;
  box-shadow: 0 40px 90px -40px rgba(255, 122, 47, 0.7);
}
.about-photo { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; border: 4px solid var(--bg); background: var(--bg-2); }
.about-intro h1 { font-size: clamp(2.4rem, 5.4vw, 3.8rem); line-height: 1.05; }
.about-role { margin: 10px 0 20px; font-size: 1.08rem; color: var(--orange-2); }
.about-intro p { color: var(--muted); }
.about-intro p + p { margin-top: 12px; }
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 64px; }
.about-stat { padding: 22px; display: grid; gap: 4px; }
.about-stat strong { font-family: var(--display); font-size: 2rem; background: linear-gradient(120deg, var(--t1, #ffc27d), var(--t2, #ff6a2b)); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateZ(40px); }
.about-stat > span:not(.tilt-shine) { color: var(--muted); font-size: 0.92rem; transform: translateZ(18px); }
.about-section { margin-top: 64px; }
.about-section > h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 20px; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.about-card { padding: 22px; display: grid; gap: 8px; align-content: start; }
.about-card .icon { width: 30px; height: 30px; color: var(--t1, #ffb15c); transform: translateZ(46px); }
.about-card h3 { font-size: 1.08rem; transform: translateZ(28px); }
.about-card p { color: var(--muted); font-size: 0.92rem; transform: translateZ(12px); }
.about-brand { padding: clamp(26px, 4vw, 44px); text-align: center; }
.about-brand h2 { font-size: clamp(2rem, 4.6vw, 3rem); margin: 6px 0 12px; }
.about-brand p { color: var(--muted); max-width: 640px; margin: 0 auto; }

.maker { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 4vw, 44px); align-items: center; padding: clamp(24px, 4vw, 40px); }
.maker-photo { width: 168px; height: 168px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255, 138, 61, 0.7); box-shadow: 0 20px 50px -20px rgba(255, 122, 47, 0.7); }
.maker-copy h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); margin: 4px 0 10px; }
.maker-copy p { color: var(--muted); margin-bottom: 18px; }

@media (max-width: 860px) {
  .about-hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .about-photo-wrap { width: min(280px, 80%); }
  .about-actions { justify-content: center; }
  .about-stats, .about-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .maker { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .maker-photo { width: 132px; height: 132px; }
}
@media (prefers-reduced-motion: reduce) { .about-photo-ring { animation: none; } }

/* ------------------------------------------------------------------ certs */
.certs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cert { display: grid; gap: 4px; align-content: start; padding: 20px 18px 18px; }
.cert::before { content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--t1), var(--t2)); }
/* The same three-layer shield as the plan cards, smaller, turning slowly. */
.cert-emblem { position: relative; display: block; width: 46px; height: 52px; margin: 2px 0 12px 2px; transform-style: preserve-3d; animation: cert-emblem 6s ease-in-out infinite; }
.certs .tilt-slot:nth-child(2n) .cert-emblem { animation-delay: -3s; }
.cert-emblem .em-front .icon { width: 22px; height: 22px; }
@keyframes cert-emblem {
  0%, 100% { transform: translateZ(44px) rotateY(-28deg) rotateX(6deg); }
  50% { transform: translateZ(44px) rotateY(28deg) rotateX(-4deg) translateY(-4px); }
}
.cert-name { font-family: var(--display); font-size: 1.35rem; letter-spacing: 0.02em; transform: translateZ(34px); }
.cert-full { color: var(--muted); font-size: 0.88rem; line-height: 1.35; transform: translateZ(14px); }
.cert-issuer { color: color-mix(in srgb, var(--t1) 80%, #fff); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 4px; transform: translateZ(22px); }
@media (max-width: 520px) { .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cert { padding: 18px 14px 16px; } .cert-name { font-size: 1.15rem; } }

/* -------------------------------------------------------------- about 3D */
/* Pointer tilt is desktop only (main.js). A touch screen still gets the
   entrances, the turning emblems, the orbits and the lean on scroll. */
.about { overflow-x: clip; }

/* Cards: the slot is revealed and supplies the perspective; the card inside
   leans towards the pointer, and its layers sit at different depths. */
.tilt-slot { display: flex; min-width: 0; perspective: 1000px; }
.tilt-slot > .tilt-card { flex: 1; min-width: 0; }
.tilt-card {
  --t1: #ffc27d; --t2: #ff6a2b;
  overflow: visible; transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out), translate 0.45s var(--ease-out), border-color 0.3s, box-shadow 0.45s;
}
.tilt-card.is-tilting { transition: transform 0.12s linear, translate 0.45s var(--ease-out), border-color 0.3s, box-shadow 0.45s; }
.tilt-card:hover {
  translate: 0 -6px;
  border-color: color-mix(in srgb, var(--t1) 45%, transparent);
  box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--t2) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.tint-cyan { --t1: #5fe3ff; --t2: #3d7bff; }
.tint-mint { --t1: #6ff5c8; --t2: #17b39a; }
.tint-violet { --t1: #d2b8ff; --t2: #7a5cff; }
.tilt-shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--t1, #ffc27d) 22%, transparent), transparent 55%);
}
.tilt-card:hover .tilt-shine, .about-stage:hover .tilt-shine { opacity: 1; }

/* Cards that turn in like a coin. */
.js [data-reveal="spin"] {
  transform: perspective(900px) rotateY(-100deg) translate3d(0, 24px, 0) scale(0.9); backface-visibility: hidden;
  transition: opacity 0.5s var(--ease) var(--d, 0s), transform 1.2s var(--ease-out) var(--d, 0s);
}
.js [data-reveal="spin"].is-visible { transform: none; }

/* The portrait: a grid floor, a lean as the page scrolls (main.js sets --st),
   a pointer tilt, a slow float, two orbits passing in front of and behind the
   photo, a scan line, and two chips standing out in front. */
.about-photo-wrap { isolation: isolate; }
.about-floor {
  position: absolute; left: -45%; right: -45%; bottom: -110px; height: 300px; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 138, 61, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 123, 255, 0.22) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(600px) rotateX(68deg); transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(ellipse 50% 80% at 50% 60%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 80% at 50% 60%, #000 10%, transparent 70%);
  animation: about-floor 4s linear infinite;
}
@keyframes about-floor { to { background-position: 0 44px, 0 0; } }
.about-lean { position: absolute; inset: 0; perspective: 1000px; transform: perspective(1000px) rotateX(calc(var(--st, 0) * 12deg)); }
.about-stage { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.8s var(--ease-out); }
.about-stage.is-tilting { transition: transform 0.12s linear; }
.about-float { position: absolute; inset: 0; transform-style: preserve-3d; animation: about-float 7s ease-in-out infinite; }
@keyframes about-float {
  0%, 100% { transform: rotateY(-9deg) rotateX(5deg); }
  50% { transform: rotateY(9deg) rotateX(-4deg) translateY(-12px); }
}
.about-photo-ring { transform: translateZ(-26px); }
.about-photo-frame { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; }
.about-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 38%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent, rgba(54, 214, 255, 0.16) 70%, rgba(160, 240, 255, 0.5) 97%, transparent);
  translate: 0 -100%; animation: about-scan 4.5s var(--ease) 1s infinite;
}
@keyframes about-scan { 0% { translate: 0 -100%; } 55%, 100% { translate: 0 280%; } }

.about-orbit {
  position: absolute; inset: -13%; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(54, 214, 255, 0.42);
  box-shadow: 0 0 22px rgba(54, 214, 255, 0.2), inset 0 0 22px rgba(54, 214, 255, 0.14);
  animation: about-orbit-a 12s linear infinite;
}
.about-orbit i { position: absolute; top: -7px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: #aef3ff; box-shadow: 0 0 16px 5px rgba(54, 214, 255, 0.8); }
.about-orbit-b {
  inset: -6%; border-color: rgba(255, 138, 61, 0.45);
  box-shadow: 0 0 22px rgba(255, 122, 47, 0.2), inset 0 0 22px rgba(255, 122, 47, 0.14);
  animation: about-orbit-b 9s linear infinite;
}
.about-orbit-b i { background: #ffd6ad; box-shadow: 0 0 16px 5px rgba(255, 122, 47, 0.85); }
@keyframes about-orbit-a { from { transform: rotateX(76deg) rotateY(-10deg) rotateZ(0deg); } to { transform: rotateX(76deg) rotateY(-10deg) rotateZ(360deg); } }
@keyframes about-orbit-b { from { transform: rotateY(74deg) rotateX(14deg) rotateZ(360deg); } to { transform: rotateY(74deg) rotateX(14deg) rotateZ(0deg); } }

.about-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; white-space: nowrap;
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  background: rgba(8, 16, 34, 0.88); border: 1px solid rgba(148, 178, 255, 0.28);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9);
  animation: about-chip 5s ease-in-out infinite;
}
.about-chip .icon { width: 18px; height: 18px; color: var(--orange-2); }
.about-chip-a { left: 4%; top: 12%; transform: translateZ(70px); }
.about-chip-b { right: -7%; bottom: 10%; transform: translateZ(90px); animation-delay: -2.5s; }
.about-chip-b .icon { color: var(--cyan); }
@keyframes about-chip { 50% { translate: 0 -10px; } }

/* AGC One, extruded, turning slightly. */
.about-brand-mark {
  display: inline-block;
  filter: drop-shadow(0 1px 0 #26386a) drop-shadow(0 1px 0 #1f2f5a) drop-shadow(0 1px 0 #19274c) drop-shadow(0 1px 0 #131e3c) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55));
  transform: translateZ(50px); animation: about-brand 7s ease-in-out infinite;
}
@keyframes about-brand {
  0%, 100% { transform: translateZ(50px) rotateY(-14deg) rotateX(8deg); }
  50% { transform: translateZ(50px) rotateY(14deg) rotateX(-6deg); }
}

@media (max-width: 860px) {
  .about-chip { font-size: 0.74rem; padding: 7px 11px; }
  .about-chip .icon { width: 15px; height: 15px; }
  .about-chip-a { left: -4%; top: 6%; }
  .about-chip-b { right: -4%; bottom: 6%; }
  .about-floor { bottom: -80px; height: 220px; }
  /* The near side of a tilted orbit is projected larger; keep it on screen. */
  .about-orbit-a { inset: 3%; }
  .about-orbit-b { inset: -3%; }
}
@media (prefers-reduced-motion: reduce) {
  .about-floor, .about-float, .about-orbit, .about-chip, .cert-emblem, .about-brand-mark { animation: none; }
  .about-scan { display: none; }
  .about-lean { transform: none; }
  .js [data-reveal="spin"] { transform: none; }
}
/* --------------------------------------------------------------- home 3D */
/* Cards that tilt towards the pointer follow it quickly; the slower reveal
   transition returns them flat when the pointer leaves. */
[data-tilt3d].is-tilting { transition: transform 0.12s linear, translate 0.45s var(--ease-out), border-color 0.3s, box-shadow 0.45s, opacity 0.9s var(--ease); }

/* The film leans back below the middle of the screen and settles flat as it
   arrives (main.js sets --st). */
.film-section .container { perspective: 1400px; }
.film { rotate: x calc(var(--st, 0) * 16deg); }

/* Coming-soon icons turn slowly, out of step with each other. */
.soon .icon { animation: soon-turn 6s ease-in-out infinite; }
.soon:nth-child(2n) .icon { animation-delay: -3s; }
@keyframes soon-turn {
  0%, 100% { transform: perspective(300px) rotateY(-35deg); }
  50% { transform: perspective(300px) rotateY(35deg); }
}

/* The maker's photo stands out from its card and turns a little. */
.maker { overflow: visible; transform-style: preserve-3d; }
.maker-photo { animation: maker-float 6s ease-in-out infinite; }
@keyframes maker-float {
  0%, 100% { transform: perspective(700px) translateZ(40px) rotateY(-12deg); }
  50% { transform: perspective(700px) translateZ(40px) rotateY(12deg) translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .film { rotate: none; }
  .soon .icon, .maker-photo { animation: none; }
}