/* Relay public site. Dark, violet-accented; every effect degrades to a static page
   without JavaScript and is switched off under prefers-reduced-motion. */

@font-face {
  font-family: "DM Sans Variable";
  src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@property --orbit {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

:root {
  color-scheme: dark;
  --bg: #030305;
  --panel: rgba(255, 255, 255, 0.028);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #f4f4f6;
  --muted: #a3a3ae;
  --dim: #6f6f7a;
  --violet-300: #c9bdff;
  --violet-400: #a78bfa;
  --violet-500: #8b6cff;
  --violet-600: #6c4cf5;
  --violet-700: #5232e0;
  --glow: rgba(124, 92, 255, 0.55);
  --radius-lg: 24px;
  --radius: 18px;
  --container: 1200px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: "DM Sans Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans JP", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, Menlo, monospace;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
svg { display: block; }
button, select { font: inherit; color: inherit; }
::selection { background: rgba(139, 108, 255, 0.45); }
:focus-visible { outline: 2px solid var(--violet-400); outline-offset: 3px; border-radius: 10px; }

[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: 200; padding: 10px 16px; border-radius: 10px;
  background: var(--violet-600); color: #fff; font-weight: 500;
}
.skip-link:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.container { width: min(100% - 48px, var(--container)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(64px, 8vw, 112px); }
.section--tight { padding-block: clamp(36px, 6vw, 72px); }

:lang(ja) .hero__title, :lang(zh-CN) .hero__title, :lang(zh-TW) .hero__title,
:lang(ja) .display, :lang(zh-CN) .display, :lang(zh-TW) .display { letter-spacing: -0.01em; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.site-header.is-scrolled { background: rgba(3, 3, 5, 0.86); backdrop-filter: blur(14px) saturate(140%); }
.header__inner { display: flex; align-items: center; gap: 24px; height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
/* The name comes from the console, so it may be long: one line, cut with an ellipsis. */
.brand__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.brand__mark { width: 18px; height: 18px; fill: var(--violet-400); filter: drop-shadow(0 0 8px var(--glow)); }
.nav { display: flex; gap: 36px; margin-inline: auto; }
.nav__link { color: var(--muted); font-size: 0.95rem; transition: color 0.2s; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="page"] { text-shadow: 0 0 18px rgba(167, 139, 250, 0.55); }
.header__actions { display: flex; align-items: center; gap: 12px; }

.lang {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border-radius: 999px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); transition: color 0.2s;
}
.lang:hover { color: var(--text); }
.lang .icon { width: 16px; height: 16px; }
.lang__select { appearance: none; border: 0; background: transparent; font-size: 0.85rem; cursor: pointer; max-width: 92px; }
.lang__select:focus-visible { outline: none; }
.lang:focus-within { box-shadow: inset 0 0 0 1px var(--violet-400); }
.lang__select option { background: #0b0b10; color: var(--text); }

.menu-toggle {
  display: none; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer;
}
.mobile-nav { display: grid; gap: 2px; padding: 8px 24px 20px; background: rgba(3, 3, 5, 0.97); border-top: 1px solid var(--line); }
.mobile-nav[hidden] { display: none; }
.mobile-nav__link { padding: 12px 4px; color: var(--muted); border-bottom: 1px solid var(--line); }
.mobile-nav__link:hover, .mobile-nav__link[aria-current="page"] { color: var(--text); }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 500; font-size: 0.95rem; white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.25s, box-shadow 0.25s, color 0.25s;
}
.btn:active { transform: scale(0.98); }
.btn--lg { height: 50px; padding: 0 24px; font-size: 1rem; }
.btn .icon { transition: transform 0.25s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #8d70ff 0%, #6a45f5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 1px rgba(139, 108, 255, 0.65), 0 10px 32px -10px rgba(110, 80, 255, 0.9);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 0 0 1px rgba(180, 160, 255, 0.85), 0 12px 42px -8px rgba(124, 92, 255, 1);
}
.btn--light { color: #0a0a0f; background: #efeff2; box-shadow: 0 10px 30px -12px rgba(255, 255, 255, 0.45); }
.btn--light:hover { background: #fff; transform: translateY(-1px); }
.btn--glass { color: var(--text); background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.19); }

/* A light that runs around the border: a conic gradient on the border box, an opaque
   fill on the padding box, and a blurred copy behind the button for the glow. */
.btn--orbit {
  color: var(--text);
  border: 1.5px solid transparent;
  background:
    linear-gradient(#0a0a12, #0a0a12) padding-box,
    conic-gradient(from var(--orbit), rgba(255, 255, 255, 0.07) 0deg, rgba(255, 255, 255, 0.07) 70deg,
      rgba(139, 108, 255, 0.95) 110deg, #e6e0ff 125deg, rgba(255, 255, 255, 0.07) 150deg,
      rgba(255, 255, 255, 0.07) 250deg, rgba(139, 108, 255, 0.95) 290deg, #e6e0ff 305deg,
      rgba(255, 255, 255, 0.07) 330deg) border-box;
  animation: orbit 3.6s linear infinite;
}
.btn--orbit::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--orbit), transparent 0deg 90deg, rgba(139, 108, 255, 0.9) 120deg,
    transparent 150deg 270deg, rgba(139, 108, 255, 0.9) 300deg, transparent 330deg);
  filter: blur(9px); opacity: 0.75;
}
.btn--orbit:hover { color: #fff; }
@keyframes orbit { to { --orbit: 360deg; } }
/* The glow sits at z-index -1, so the button's container must form a stacking context;
   otherwise the glow would be painted behind the panel the button sits on. */
.header__actions, .hero__actions { position: relative; z-index: 0; }

/* ---------- pill ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.9rem; color: #e4e4e8;
}
.pill__pulse {
  position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: linear-gradient(180deg, #8d70ff, #5b3df5); box-shadow: 0 0 14px rgba(124, 92, 255, 0.7);
}
.pill__pulse::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.pill__pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(139, 108, 255, 0.65); } 100% { box-shadow: 0 0 0 12px rgba(139, 108, 255, 0); } }
.pill__icon {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px;
  background: linear-gradient(180deg, #8d70ff, #5b3df5); box-shadow: 0 0 14px rgba(124, 92, 255, 0.6);
}
.pill__icon svg { width: 14px; height: 14px; fill: #fff; stroke: none; }

/* ---------- hero ---------- */
.hero { position: relative; display: flex; flex-direction: column; padding-top: clamp(130px, 17vh, 170px); overflow: hidden; }
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 30%, #000 0%, transparent 75%);
}
.hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__title {
  display: flex; flex-direction: column; align-items: center; margin-top: 28px;
  font-weight: 500; font-size: clamp(2.5rem, 7vw, 5.6rem); line-height: 1.05; letter-spacing: -0.035em;
}
.hero__line--accent {
  padding-bottom: 0.08em;
  background: linear-gradient(90deg, #7a5bff 0%, #c2b3ff 35%, #8c6dff 60%, #c2b3ff 85%, #7a5bff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 9s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.hero__lead { margin-top: 24px; max-width: 580px; color: var(--muted); font-size: 1.06rem; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

/* The arc of light under the buttons: a ring drawn with gradients, softened by a blur and faded
   along its length by a mask. The sizes follow a measurement of the reference design at 1440px:
   centre-line radius 760px, band about 100px, brightness falling to zero about 45deg from the top. */
.horizon {
  --rc: clamp(320px, 52.8vw, 900px); /* radius of the ring's centre line */
  --band: clamp(44px, 4.6vw, 66px); /* half the ring's width, without its inner haze */
  --fall: max(var(--rc), 600px); /* how far down the arc fades out (not too abrupt on phones) */
  position: relative; height: max(200px, calc(var(--rc) * 0.3));
}
.horizon::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}
.arc {
  --ring: circle calc(var(--rc) + var(--band) * 1.06) at 50% calc(100px + var(--rc));
  --fade: linear-gradient(180deg, #000 calc(100px + var(--fall) * 0.03), rgba(0, 0, 0, 0.9) calc(100px + var(--fall) * 0.07),
    rgba(0, 0, 0, 0.8) calc(100px + var(--fall) * 0.13), rgba(0, 0, 0, 0.6) calc(100px + var(--fall) * 0.167),
    rgba(0, 0, 0, 0.3) calc(100px + var(--fall) * 0.215), transparent calc(100px + var(--fall) * 0.28));
  position: absolute; left: 50%; top: -67px; width: calc(var(--rc) * 2 + 240px); height: calc(100px + var(--fall) * 0.3);
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(var(--ring),
    transparent calc(var(--rc) - var(--band) * 1.97), rgba(110, 96, 245, 0.28) calc(var(--rc) - var(--band) * 1.15),
    rgb(128, 116, 255) calc(var(--rc) - var(--band) * 0.52), rgb(128, 116, 255) calc(var(--rc) + var(--band) * 0.45),
    transparent calc(var(--rc) + var(--band) * 1.06));
  filter: blur(clamp(10px, 1.1vw, 16px));
  -webkit-mask-image: var(--fade);
  mask-image: var(--fade);
  animation: arc-drift 8s ease-in-out infinite alternate;
}
/* Over the top the ring is lighter and a little thicker. */
.arc::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(var(--ring),
    transparent calc(var(--rc) - var(--band) * 0.9), rgba(200, 196, 255, 0.7) calc(var(--rc) - var(--band) * 0.24),
    rgba(200, 196, 255, 0.7) calc(var(--rc) + var(--band) * 0.24), transparent calc(var(--rc) + var(--band) * 0.85));
  -webkit-mask-image: linear-gradient(90deg, transparent 33%, #000 44%, #000 56%, transparent 67%);
  mask-image: linear-gradient(90deg, transparent 33%, #000 44%, #000 56%, transparent 67%);
}
@keyframes arc-drift {
  from { opacity: 0.88; transform: translateX(-50%) skewX(-0.5deg); }
  to { opacity: 1; transform: translateX(-50%) skewX(0.5deg); }
}

/* Model names under the arc: one row in a narrow window with soft edges, below a thin rule. */
.marquee {
  position: absolute; left: 50%; top: 69px; z-index: 2;
  width: min(100% - 32px, 640px); transform: translateX(-50%);
}
.marquee::before {
  content: ""; display: block; height: 1px; margin-bottom: 30px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
}
.marquee__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-duration, 600s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.model {
  display: inline-flex; align-items: center; gap: 10px; margin-right: 48px;
  font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; color: rgba(232, 228, 255, 0.55);
  transition: color 0.3s;
}
.model:hover { color: #fff; }
.model__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, #8b6cff); box-shadow: 0 0 10px var(--dot, #8b6cff); }
.model[data-family="Qwen"] { --dot: #8b6cff; }
.model[data-family="GLM"] { --dot: #60a5fa; }
.model[data-family="DeepSeek"] { --dot: #38bdf8; }
.model[data-family="Kimi"] { --dot: #e879f9; }
.model[data-family="MiniMax"] { --dot: #f472b6; }
.model[data-family="Claude"] { --dot: #fb923c; }
.model[data-family="GPT"] { --dot: #34d399; }
.model[data-family="Gemini"] { --dot: #a3e635; }
.model[data-family="Grok"] { --dot: #e5e7eb; }
.model[data-family="Doubao"] { --dot: #2dd4bf; }
.model[data-family="Hunyuan"] { --dot: #facc15; }
.model[data-family="Other"] { --dot: #94a3b8; }

/* ---------- terminal ---------- */
.terminal {
  position: relative; max-width: 900px; margin-inline: auto; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(22, 19, 36, 0.92), rgba(8, 8, 12, 0.96));
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 120px -40px rgba(110, 80, 255, 0.5);
}
.terminal::before {
  content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.9), transparent);
}
.terminal__bar { display: flex; align-items: center; gap: 18px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.terminal__dots { display: inline-flex; gap: 6px; }
.terminal__dots i { width: 10px; height: 10px; border-radius: 50%; background: #2a2a36; }
.terminal__tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.terminal__tab {
  border: 0; padding: 6px 12px; border-radius: 999px; background: transparent; color: var(--dim);
  font-size: 0.84rem; cursor: pointer; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.terminal__tab:hover { color: var(--text); }
.terminal__tab[aria-selected="true"] { color: var(--text); background: rgba(139, 108, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(139, 108, 255, 0.4); }
.terminal__body { display: grid; grid-template-columns: 1fr 1px 1fr; min-height: 270px; }
.terminal__divider { background: var(--line); }
.terminal__code {
  margin: 0; padding: 22px 24px; font-family: var(--mono); font-size: 0.83rem; line-height: 1.8;
  color: #d4d4de; white-space: pre-wrap; word-break: break-word;
}
.terminal__line { display: block; opacity: 1; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.terminal__line.is-pending { opacity: 0; transform: translateY(4px); }
.t-method { color: var(--violet-300); font-weight: 600; }
.t-path { color: #f4f4f6; }
.t-header { color: #7dd3fc; }
.t-key { color: var(--violet-400); }
.t-str { color: #bef264; }
.t-punc { color: var(--dim); }
.t-hl { color: #fff; background: rgba(139, 108, 255, 0.28); border-radius: 4px; padding: 0 3px; }
.terminal__glow {
  position: absolute; left: 10%; right: 10%; bottom: -45%; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.32), transparent); filter: blur(30px);
}

/* ---------- stats ---------- */
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat {
  position: relative; overflow: hidden; padding: 30px 20px; text-align: center; border-radius: var(--radius);
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--line);
}
.stat::before {
  content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.8), transparent);
}
.stat__value {
  display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 20%, #b3a3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat__label { display: block; margin-top: 6px; color: var(--muted); font-size: 0.92rem; }

/* ---------- features: arc of tiles ---------- */
/* --arc-r is set from the width by site.js; --arc-head places the heading inside the arch. */
.features { --arc-r: 576px; --arc-head: 0.36; overflow: hidden; padding-top: 0; }
.features::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 900px; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 30%, rgba(80, 50, 200, 0.28), transparent 70%);
}
.orbit-arc { position: absolute; left: 50%; top: calc(56px + var(--arc-r)); width: 0; height: 0; pointer-events: none; }
.tile {
  position: absolute; left: calc(var(--tile, 84px) / -2); top: calc(var(--tile, 84px) / -2);
  display: grid; place-items: center; width: var(--tile, 84px); height: var(--tile, 84px); border-radius: 24px;
  background: linear-gradient(160deg, #1f1c29 0%, #0d0c13 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 40px -12px rgba(0, 0, 0, 0.9), 0 0 44px -12px rgba(110, 80, 255, 0.45);
  will-change: transform, opacity;
}
.tile svg {
  width: 44%; height: 44%; fill: rgba(139, 108, 255, 0.3); stroke: #b39dff; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(124, 92, 255, 0.65));
}
.section__head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.section__head--arc { padding-top: calc(56px + var(--arc-r) * var(--arc-head)); }

.display { font-weight: 500; font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -0.03em; text-align: center; margin-top: 22px; }
.display--sm { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin-top: 0; }
.display__line { display: block; }
.display__line--muted { color: #9a9aa6; }
.word { transition: opacity 0.2s linear; }
.section__lead { max-width: 620px; margin: 20px auto 0; color: var(--muted); font-size: 1.05rem; text-align: center; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.chip { padding: 8px 15px; border-radius: 999px; font-size: 0.86rem; color: #d6d6dc; background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- cards ---------- */
.cards { display: grid; gap: 16px; margin-top: 64px; }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.card, .step {
  position: relative; isolation: isolate; overflow: hidden; padding: 28px 24px 26px; border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, transparent 18%, rgba(139, 108, 255, 0.9) 50%, transparent 82%) top center / 70% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.card::before, .step::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%);
}
.card::after, .step::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), rgba(139, 108, 255, 0.18), transparent 45%);
}
.card:hover, .step:hover { box-shadow: inset 0 0 0 1px rgba(139, 108, 255, 0.35); transform: translateY(-2px); }
.card:hover::after, .step:hover::after { opacity: 1; }
.card__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(180deg, #8d70ff, #5b3df5);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.12), 0 10px 26px -8px rgba(110, 80, 255, 0.95);
}
.card__icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card__title { margin-top: 20px; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
.card__text { margin-top: 8px; color: var(--muted); font-size: 0.93rem; line-height: 1.6; }

/* ---------- supported applications ---------- */
.focus-rail {
  position: relative; overflow: hidden; margin-top: 32px; padding-block: 44px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.focus-rail__ring {
  position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -54%);
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.38), rgba(124, 92, 255, 0.08) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgba(139, 108, 255, 0.28);
}
.focus-rail__track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.focus-rail:hover .focus-rail__track { animation-play-state: paused; }
.app {
  --focus: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 110px; margin-right: 40px;
  opacity: calc(0.42 + var(--focus) * 0.58); transform: scale(calc(1 + var(--focus) * 0.22));
}
.app__mark {
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  font-weight: 700; font-size: 0.95rem; color: #ece8ff; letter-spacing: 0.02em;
  background: linear-gradient(160deg, #221e33, #0f0e16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0 calc(var(--focus) * 34px) rgba(124, 92, 255, 0.85);
}
.app__name { font-size: 0.84rem; color: var(--muted); white-space: nowrap; }

/* ---------- how it works ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; }
.step__num { position: absolute; top: 24px; right: 24px; color: var(--dim); font-size: 0.85rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }

/* ---------- call to action ---------- */
/* A panel lit from above: the upper half glows violet, uneven beams fan out from a point just
   above the top edge, and a dot grid shows in the light. */
.spotlight {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  padding: clamp(64px, 9vw, 110px) 24px; border-radius: 28px; text-align: center;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(78, 46, 222, 0.9) 0%, rgba(58, 32, 184, 0.55) 40%, transparent 78%),
    #06050b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.spotlight > :not([aria-hidden]) { position: relative; }
.spotlight .display { margin-top: 0; }
.spotlight__rays {
  position: absolute; inset: 0 0 25% 0; pointer-events: none;
  background: conic-gradient(from 138deg at 50% -12%,
    transparent 0deg 6deg, rgba(150, 120, 255, 0.4) 8deg, transparent 10.5deg,
    transparent 13deg, rgba(150, 120, 255, 0.6) 17deg, transparent 21deg,
    transparent 25deg, rgba(170, 145, 255, 0.45) 27deg, transparent 29deg,
    transparent 30deg, rgba(170, 145, 255, 0.8) 35deg, transparent 40deg,
    transparent 43deg, rgba(160, 130, 255, 0.55) 46deg, transparent 49deg,
    transparent 50deg, rgba(170, 145, 255, 0.7) 54deg, transparent 59deg,
    transparent 62deg, rgba(150, 120, 255, 0.4) 64deg, transparent 66deg,
    transparent 69deg, rgba(150, 120, 255, 0.5) 72deg, transparent 76deg,
    transparent 80deg 360deg);
  -webkit-mask-image: radial-gradient(70% 100% at 50% 0%, #000 20%, transparent 100%);
  mask-image: radial-gradient(70% 100% at 50% 0%, #000 20%, transparent 100%);
  filter: blur(8px); transform-origin: 50% 0%; animation: sway 9s ease-in-out infinite alternate;
}
@keyframes sway {
  from { transform: rotate(-2deg); opacity: 0.85; }
  to { transform: rotate(2deg); opacity: 1; }
}
.spotlight__dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(80% 55% at 50% 0%, #000, transparent 85%);
  mask-image: radial-gradient(80% 55% at 50% 0%, #000, transparent 85%);
}

/* ---------- footer ---------- */
/* Light falls into the footer from a bright point on its top edge; the bottom glows violet. */
.site-footer {
  position: relative; overflow: hidden; padding: 80px 0 40px; border-top: 1px solid var(--line);
  background: radial-gradient(75% 100% at 50% 100%, rgba(66, 30, 170, 0.42), transparent 75%), var(--bg);
}
.site-footer::before {
  content: ""; position: absolute; left: 50%; top: -1px; width: 160px; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(214, 205, 255, 0.95), transparent);
  box-shadow: 0 0 18px 2px rgba(139, 108, 255, 0.7);
}
.site-footer__beam {
  position: absolute; left: 50%; top: 0; width: min(720px, 100%); height: 380px; transform: translateX(-50%); pointer-events: none;
  background: conic-gradient(from 145deg at 50% 0%, transparent, rgba(130, 100, 255, 0.62) 35deg, transparent 70deg);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, #000 10%, transparent 85%);
  mask-image: radial-gradient(50% 100% at 50% 0%, #000 10%, transparent 85%);
  filter: blur(10px);
}
.site-footer__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer__links { display: flex; gap: 28px; color: var(--muted); font-size: 0.92rem; }
.site-footer__links a:hover { color: var(--text); }
.site-footer__copy { width: 100%; margin-top: 18px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--dim); font-size: 0.86rem; }

/* ---------- cursor ----------
   A white dot that trails the pointer, just under the arrow's tip. The system cursor stays visible. */
.cursor { display: none; }
.has-cursor .cursor { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; transition: opacity 0.3s; }
.cursor.is-hidden { opacity: 0; }
.cursor__dot {
  position: fixed; left: 0; top: 0; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: #fff; will-change: transform;
}

/* ---------- reveal on scroll (only when JavaScript runs) ---------- */
.js .reveal {
  opacity: 0; transform: translateY(26px); filter: blur(10px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; filter: none; }
/* Printing does not scroll, so nothing would be revealed. */
@media print { .js .reveal { opacity: 1; transform: none; filter: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .features { --tile: 70px; }
}
@media (max-width: 960px) {
  .nav, .header__signin { display: none; }
  .menu-toggle { display: inline-grid; }
  .header__actions { margin-left: auto; }
}
@media (max-width: 760px) {
  .terminal__body { grid-template-columns: 1fr; }
  .terminal__divider { height: 1px; }
  .steps { grid-template-columns: 1fr; }
  /* The arch is too narrow for the heading: it becomes a crown above it. */
  .features { --tile: 56px; --arc-head: 0.9; }
  .tile { border-radius: 16px; }
}
@media (max-width: 560px) {
  .container { width: min(100% - 32px, var(--container)); }
  .cards--4 { grid-template-columns: 1fr; }
  .stat { padding: 22px 12px; }
  .header__cta { display: none; }
  .lang__select { max-width: 74px; }
  .model { font-size: 1.05rem; margin-right: 36px; }
}

/* ---------- 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; }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .has-cursor .cursor { display: none; }
}