/* newCode site. Light Glass, the app's own look: frosted white panels over a soft
   colour field, SF/Inter type, one blue accent. Scroll scenes are tall sections with a
   sticky stage; main.js sets --p (0..1) on each scene as you scroll through it. */
:root {
  --ink: #12121a; --ink-2: rgba(18, 18, 26, 0.84); --muted: rgba(18, 18, 26, 0.6); --dim: rgba(18, 18, 26, 0.42);
  --bg: #f5f5f7; --line: rgba(0, 0, 0, 0.08);
  --blue: #0a6cff; --violet: #7c5cff; --pink: #ff5fa2; --orange: #ff7a3d; --mint: #12b886; --amber: #f59f00; --cyan: #06b6d4;
  --g-fill: rgba(255, 255, 255, 0.55); --g-strong: rgba(255, 255, 255, 0.78); --g-rim: rgba(255, 255, 255, 0.95);
  --g-shadow: 0 18px 50px rgba(40, 40, 90, 0.12), 0 2px 6px rgba(40, 40, 90, 0.06);
  --r: 22px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --grad: linear-gradient(90deg, #0a6cff, #7c5cff 45%, #ff5fa2 80%, #ff7a3d);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.45; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
b { font-weight: 600; }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); font-size: 0.86em; }
kbd { font: 500 0.78em var(--mono); padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.05); border: 1px solid var(--line); }
code { font: 0.88em var(--mono); background: rgba(0, 0, 0, 0.05); padding: 1px 5px; border-radius: 5px; }

/* soft colour field, like the Glass wallpaper */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(160deg, #f1f2fb, #f8f1f6 60%, #f6f4ef); }
.ambient i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: 0.45; animation: drift 26s ease-in-out infinite alternate; }
.ambient i:nth-child(1) { background: #9db4ff; left: -18vmax; top: -20vmax; }
.ambient i:nth-child(2) { background: #f0b4ff; right: -20vmax; top: -10vmax; animation-delay: -6s; }
.ambient i:nth-child(3) { background: #ffc9a8; right: -10vmax; bottom: -26vmax; animation-delay: -12s; }
.ambient i:nth-child(4) { background: #a8eedd; left: -16vmax; bottom: -22vmax; animation-delay: -18s; }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.1); } }

/* ---------- nav ---------- */
.nav { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 16px; width: min(980px, calc(100% - 24px));
  border-radius: 999px; background: rgba(255, 255, 255, 0.62); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--g-rim), 0 8px 30px rgba(40, 40, 90, 0.08); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -0.02em; }
.brand img { border-radius: 6px; }
.nav-links { display: flex; gap: 20px; margin-left: auto; font-size: 13px; color: var(--muted); }
.nav-links a:hover { color: var(--ink); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--g-strong); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.pill-dark { background: var(--ink); color: #fff; box-shadow: none; }
.pill-blue { background: var(--blue); color: #fff; box-shadow: none; }
.pill.small { padding: 5px 11px; font-size: 11.5px; }
.pill.big { padding: 13px 26px; font-size: 16px; }
@media (max-width: 760px) { .nav-links { display: none; } .nav { gap: 10px; } .nav .pill { margin-left: auto; } }

/* ---------- type ---------- */
.eyebrow { font-size: 15px; font-weight: 600; color: var(--blue); letter-spacing: 0; margin-bottom: 10px; }
h1, h2, h3 { letter-spacing: -0.035em; line-height: 1.04; }
h2 { font-size: clamp(36px, 5.6vw, 72px); font-weight: 700; }
h3 { font-size: 22px; letter-spacing: -0.02em; font-weight: 650; }
.sub { font-size: clamp(17px, 1.6vw, 21px); color: var(--muted); max-width: 640px; margin-top: 14px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-head { text-align: center; max-width: 900px; margin: 0 auto; padding: 0 16px; }
.sec-head .sub { margin-left: auto; margin-right: auto; }

/* ---------- scenes ---------- */
.scene { position: relative; height: var(--len, 200vh); --p: 0; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.sticky.center { align-items: center; }
.block { padding: 120px 20px; max-width: 1180px; margin: 0 auto; }
.block.tight { padding-bottom: 20px; }
.reveal { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.9s ease, transform 1s cubic-bezier(0.2, 0.7, 0.1, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- window chrome (the app) ---------- */
.win { position: relative; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  box-shadow: inset 0 0 0 1px var(--g-rim), 0 50px 120px rgba(40, 40, 90, 0.22), 0 10px 30px rgba(40, 40, 90, 0.1); }
.win-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid rgba(0, 0, 0, 0.05); background: rgba(255, 255, 255, 0.45); }
.tl { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.tl + .tl { background: #febc2e; } .tl + .tl + .tl { background: #28c840; }
.win-title { display: flex; align-items: center; gap: 6px; margin-left: 10px; font-weight: 600; color: var(--ink); }
.win-title img { width: 15px; height: 15px; border-radius: 4px; }
.crumb { font-style: normal; font-weight: 500; color: var(--muted); margin-left: 8px; padding: 2px 9px; border-radius: 99px; background: rgba(0, 0, 0, 0.04); }
.win-search { margin: 0 auto; width: 34%; min-width: 0; padding: 4px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.04); color: var(--dim); display: flex; justify-content: space-between; white-space: nowrap; overflow: hidden; }
.win-search kbd { font-size: 10px; }
.win-cap { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.04); white-space: nowrap; margin-left: auto; }
.win-search + .win-cap { margin-left: 0; }
.spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(10, 108, 255, 0.25); border-top-color: var(--blue); animation: spin 0.9s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.ring { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(var(--blue) 22%, rgba(0, 0, 0, 0.08) 0); display: inline-block; }

.card { border-radius: 14px; padding: 12px 14px; background: var(--g-fill); box-shadow: inset 0 0 0 1px var(--g-rim), 0 8px 24px rgba(40, 40, 90, 0.07); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 12px; }
.card h5 { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.card h5 em { margin-left: auto; font-style: normal; font: 500 11px var(--mono); color: var(--dim); }
.card h5 i, .pchip i, .dossier h5 i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); display: inline-block; }
i.amb { background: var(--amber) !important; box-shadow: 0 0 8px var(--amber); } i.cy { background: var(--blue) !important; box-shadow: 0 0 8px var(--blue); }
i.vi { background: var(--violet) !important; } i.or { background: var(--orange) !important; }
.card .row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.card .row span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .field { padding: 6px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px var(--line); color: var(--dim); margin-bottom: 7px; min-height: 28px; }
.card .check { display: flex; gap: 7px; align-items: center; color: var(--ink-2); }
.card .check i, .todo-sim li i { width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--dim); flex: none; }
.card .big { font-size: 2.2em; font-weight: 700; letter-spacing: -0.03em; }
.card .big small { font-size: 0.42em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.seg { display: flex; gap: 3px; } .seg i { width: 14px; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.1); } .seg i.on { background: var(--violet); }

/* ---------- hero ---------- */
.hero .sticky { justify-content: flex-start; align-items: center; padding-top: 14vh; }
.hero-copy { text-align: center; position: relative; z-index: 2; transform: translateY(calc(var(--p) * -60px)) scale(calc(1 - var(--p) * 0.25)); opacity: calc(1 - var(--p) * 2.2); }
.mega { font-size: clamp(72px, 15vw, 200px); font-weight: 800; letter-spacing: -0.06em; line-height: 0.92; }
.mega .dot { color: var(--blue); }
.lede { font-size: clamp(20px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.02em; margin-top: 16px; color: var(--ink-2); line-height: 1.2; }
.stage3d { perspective: 1800px; perspective-origin: 50% 0%; width: 100%; display: flex; justify-content: center; margin-top: 4vh; position: relative; z-index: 3; }
.hero-win { width: min(1200px, 94vw); aspect-ratio: 1389 / 868; transform-origin: 50% 0%;
  transform: translateY(calc((1 - var(--e, 0)) * 6vh - var(--e, 0) * var(--lift, 30vh))) rotateX(calc((1 - var(--e, 0)) * 34deg)) scale(calc(0.78 + var(--e, 0) * 0.22)); }
.scroll-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--dim); opacity: calc(1 - var(--p) * 6); }
.scroll-hint::after { content: ""; display: block; width: 1px; height: 26px; margin: 6px auto 0; background: linear-gradient(var(--dim), transparent); animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 50% { transform: translateY(6px); opacity: 0.4; } }

.home-mock { position: relative; height: calc(100% - 38px); padding: 1.4% 1.6%; display: grid; grid-template-columns: 22% 1fr 22%; grid-template-rows: auto 1fr auto; gap: 1.2%;
  background: radial-gradient(55% 50% at 12% 18%, rgba(120, 150, 255, 0.5), transparent 62%), radial-gradient(45% 50% at 88% 14%, rgba(225, 140, 255, 0.4), transparent 60%), radial-gradient(55% 55% at 78% 92%, rgba(255, 170, 120, 0.45), transparent 62%), radial-gradient(50% 55% at 18% 88%, rgba(90, 220, 200, 0.4), transparent 60%), linear-gradient(160deg, #eef0fb, #f6eef6); font-size: clamp(7px, 0.9vw, 12px); }
.home-mock .card { font-size: 1em; padding: 6% 7%; }
.home-mock .card h5 { font-size: 1.05em; }
.hm-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; color: var(--muted); }
.hm-top .live, .live { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); display: inline-block; margin-right: 4px; }
.hm-clock { font-size: 2.6em; font-weight: 300; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hm-rings { display: flex; gap: 6px; align-items: center; }
.hm-rings .g { width: 2.4em; height: 2.4em; border-radius: 50%; background: conic-gradient(var(--blue) 22%, rgba(0, 0, 0, 0.08) 0); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); }
.hm-rings .g2 { background: conic-gradient(var(--violet) 37%, rgba(0, 0, 0, 0.08) 0); }
.chip { padding: 0.4em 1em; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 600; }
.hm-left, .hm-right { display: flex; flex-direction: column; gap: 6%; }
.hm-strip { grid-column: 1 / -1; display: flex; gap: 0.6em; align-items: center; padding: 0.6em 1em; border-radius: 12px; background: var(--g-fill); box-shadow: inset 0 0 0 1px var(--g-rim); white-space: nowrap; overflow: hidden; }
.hm-strip span { padding: 0.2em 0.8em; border-radius: 99px; background: rgba(255, 255, 255, 0.7); color: var(--muted); }
.ask-orb { position: absolute; right: 2%; bottom: 13%; display: flex; gap: 0.6em; align-items: center; padding: 0.5em 1.2em 0.5em 0.5em; border-radius: 99px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--g-rim), 0 8px 20px rgba(40, 40, 90, 0.12); font-weight: 600; }
.ask-orb i { width: 2em; height: 2em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8fb4ff 40%, #7c5cff 80%); box-shadow: 0 0 12px rgba(124, 92, 255, 0.5); }
.ask-orb small { display: block; font-weight: 400; color: var(--muted); font-size: 0.82em; }
.typing::after { content: "▍"; animation: blink 1s steps(1) infinite; color: var(--blue); }
@keyframes blink { 50% { opacity: 0; } }

/* solar system (built in main.js) */
.solar { position: relative; perspective: 900px; }
.solar .plane { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(64deg); }
.solar .orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(60, 60, 120, 0.16); transform: translate(-50%, -50%); }
.solar .sun { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -62%); }
.solar .sun svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 14px rgba(10, 108, 255, 0.55)); animation: spin 18s linear infinite; }
.solar .planet { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: inset -4px -5px 10px rgba(0, 0, 0, 0.18), 0 6px 14px rgba(40, 40, 90, 0.2); }
.solar .planet b { position: absolute; top: 105%; left: 50%; transform: translateX(-50%); font-size: 0.85em; font-weight: 500; color: var(--muted); white-space: nowrap; }
.solar .planet.hot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--amber); animation: pulse 1.6s ease-out infinite; }
.solar .planet.work::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--blue); animation: pulse 1.2s ease-out infinite; }
@keyframes pulse { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }

/* ---------- statement ---------- */
.words { max-width: 1000px; padding: 0 24px; font-size: clamp(28px, 4.2vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; }
.words span { color: rgba(18, 18, 26, 0.14); transition: color 0.25s; }
.words span.on { color: var(--ink); }
.words span.on.hl { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- split layout (copy + stage) ---------- */
.split-layout { flex-direction: row; align-items: center; gap: 5vw; padding: 0 6vw; }
.split-layout .copy { flex: 0 0 34%; }
.steps { list-style: none; margin-top: 28px; display: grid; gap: 18px; counter-reset: s; }
.steps li { position: relative; padding-left: 40px; font-size: 17px; color: var(--dim); transition: color 0.4s; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: rgba(0, 0, 0, 0.05); color: var(--dim); transition: all 0.4s; }
.steps li.on { color: var(--ink); } .steps li.on::before { background: var(--blue); color: #fff; }
.steps li b { color: inherit; }
@media (max-width: 860px) {
  .split-layout { flex-direction: column; justify-content: center; gap: 22px; padding: 70px 16px 16px; }
  .split-layout .copy { flex: none; text-align: center; } .split-layout .copy h2 { font-size: 34px; }
  .steps { display: none; }
}

/* onboarding mock */
.onboard-win { flex: 1; max-width: 760px; aspect-ratio: 1.25; background: rgba(255, 255, 255, 0.82); padding: 3.4%; font-size: clamp(9px, 1vw, 13px); }
.ob-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4%; }
.brand-s { display: flex; gap: 6px; align-items: center; font-weight: 700; } .brand-s img { width: 18px; border-radius: 4px; }
.ob-tabs { display: flex; gap: 4px; } .ob-tabs i { font-style: normal; padding: 0.35em 0.9em; border-radius: 99px; background: rgba(0, 0, 0, 0.05); color: var(--dim); font-weight: 600; transition: all 0.4s; }
.ob-tabs i.on { background: var(--blue); color: #fff; }
.ob-pane { position: absolute; left: 3.4%; right: 3.4%; top: 13%; bottom: 3.4%; opacity: 0; transform: translateX(30px); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); pointer-events: none; }
.ob-pane.on { opacity: 1; transform: none; }
.ob-pane h3 { font-size: 2.6em; letter-spacing: -0.04em; } .ob-pane > p { color: var(--muted); margin: 0.5em 0 1.4em; font-size: 1.1em; }
.ob-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.8em; }
.ob-grid .tcard { aspect-ratio: 1.55; border-radius: 0.8em; position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.6em; color: #fff; font-weight: 600; font-size: 0.95em; transition: transform 0.4s, box-shadow 0.4s; }
.ob-grid .tcard.sel { transform: scale(1.06); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blue), 0 12px 24px rgba(10, 108, 255, 0.3); z-index: 1; }
.ob-mode { position: absolute; right: 0; bottom: 0; display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(0, 0, 0, 0.05); } .ob-mode span { padding: 0.4em 1em; border-radius: 99px; color: var(--muted); } .ob-mode .on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 0.6em; } .ob-chips span { padding: 0.5em 1em; border-radius: 99px; background: rgba(10, 108, 255, 0.08); color: var(--blue); font-weight: 600; opacity: 0; transform: scale(0.8); transition: all 0.4s; }
.ob-projects.on .ob-chips span { opacity: 1; transform: none; } .ob-chips span:nth-child(n) { transition-delay: calc(var(--i, 0) * 70ms); }
.ob-add { margin-top: 1.4em; color: var(--muted); }
.ob-ready ul { list-style: none; display: grid; gap: 1.2em; margin: 1.6em 0 2em; } .ob-ready li { display: flex; gap: 0.8em; align-items: baseline; color: var(--muted); font-size: 1.1em; } .ob-ready li b { color: var(--ink); } .ob-ready li i { font-style: normal; color: var(--blue); width: 1.2em; }

/* ---------- home scene ---------- */
.home-stage { position: relative; width: min(1200px, 96vw); height: 60vh; margin: 2vh auto 0; }
[data-scene="home"] .sticky, [data-scene="creature"] .sticky, .themes .sticky { padding-top: 64px; }
[data-scene="home"] h2, .creature h2, .themes h2 { font-size: clamp(32px, 4.4vw, 60px); }
.big-solar { position: absolute; inset: 0 0 6%; font-size: clamp(9px, 1.1vw, 14px); transform: scale(calc(0.9 + var(--p) * 0.15)); }
.callout { position: absolute; left: var(--x); top: var(--y); width: min(250px, 24%); padding: 14px 16px; border-radius: 16px; background: var(--g-strong); box-shadow: inset 0 0 0 1px var(--g-rim), var(--g-shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); font-size: 14px; color: var(--muted);
  opacity: 0; transform: translateY(24px) scale(0.96); transition: opacity 0.6s, transform 0.7s cubic-bezier(0.2, 0.7, 0.1, 1); }
.callout b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 3px; }
.callout.on { opacity: 1; transform: none; }
.dossier { position: absolute; right: 2%; top: 4%; width: min(320px, 40%); padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.86); box-shadow: inset 0 0 0 1px var(--g-rim), 0 30px 70px rgba(40, 40, 90, 0.2); font-size: 13px;
  opacity: 0; transform: translateX(40px) scale(0.96); transition: opacity 0.6s, transform 0.7s cubic-bezier(0.2, 0.7, 0.1, 1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.dossier.on { opacity: 1; transform: none; }
.dossier h5 { display: flex; gap: 8px; align-items: center; font-size: 15px; margin-bottom: 4px; } .dossier h5 em { margin-left: auto; font-style: normal; color: var(--dim); }
.dossier .lbl { margin-top: 12px; font-size: 11px; font-weight: 600; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.dossier-actions { display: flex; gap: 8px; margin-top: 16px; } .dossier-actions .pill:first-child { flex: 1; }
.home-caption { position: absolute; left: 50%; bottom: -2vh; transform: translateX(-50%); width: min(720px, 92%); text-align: center; font-size: clamp(17px, 1.8vw, 22px); font-weight: 600; opacity: 0; transition: opacity 0.6s; }
.home-caption.on { opacity: 1; }
.home-caption .dim { font-weight: 400; }
@media (max-width: 760px) { .callout { width: 44%; font-size: 12px; padding: 10px; } .callout b { font-size: 13px; } .callout[style*="72%"] { left: 52% !important; } .dossier { width: 70%; right: 4%; } .home-stage { height: 70vh; } }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
.tile { grid-column: span 2; border-radius: 28px; padding: 30px; background: rgba(255, 255, 255, 0.62); box-shadow: inset 0 0 0 1px var(--g-rim), var(--g-shadow); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); overflow: hidden; display: flex; flex-direction: column; gap: 22px; min-height: 360px; }
.tile.wide { grid-column: span 2; } .tile.tall { min-height: 480px; }
.tile-copy p { color: var(--muted); margin-top: 8px; font-size: 15.5px; }
@media (min-width: 1000px) { .tile { grid-column: span 1; } .tile.wide { grid-column: span 2; } }
@media (max-width: 700px) { .bento { grid-template-columns: 1fr; } .tile, .tile.wide { grid-column: span 1; min-height: 300px; padding: 22px; } }

.todo-sim { margin-top: auto; } .todo-sim ul { list-style: none; display: grid; gap: 8px; } .todo-sim li { display: flex; gap: 8px; align-items: center; animation: pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.2) both; }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(0.95); } }
.sticky-sim { margin-top: auto; height: 190px; position: relative; }
.note { position: absolute; left: 50%; top: 20px; width: 190px; min-height: 150px; padding: 12px; background: #fdf2a7; border-radius: 3px 3px 14px 3px; box-shadow: 0 16px 30px rgba(120, 100, 0, 0.18); transform: translate(-50%, -60px) rotate(-6deg) scale(0.6); opacity: 0; transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1.15); font-family: "Marker Felt", "Comic Sans MS", var(--font); }
.note.on { transform: translate(-50%, 0) rotate(-2deg); opacity: 1; }
.note .tag { font: 600 10px var(--font); padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.08); }
.note p { margin-top: 10px; font-size: 17px; }
.remind-sim, .chat-sim, .search-sim, .log-sim { margin-top: auto; }
.ask-box { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 6px 18px rgba(40, 40, 90, 0.08); font-size: 14px; min-height: 48px; }
.ask-box span { flex: 1; } .ask-box .orb { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8fb4ff 40%, #7c5cff 80%); flex: none; }
.ask-box .send, .composer .send { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 15px; flex: none; }
.ask-box.small { position: absolute; left: 12px; right: 12px; bottom: 12px; min-height: 40px; font-size: 13px; }
.toast { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.92); box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px rgba(40, 40, 90, 0.14); font-size: 13px; width: max-content; max-width: 100%; }
.toast i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); color: #fff; font-size: 12px; flex: none; }
.toast i.up { background: var(--blue); } .toast.warn i { background: var(--amber); }
.toast b { display: block; } .toast span { color: var(--muted); }
.remind-sim .toast { margin: 14px 0 0 auto; opacity: 0; transform: translateY(10px); transition: all 0.6s; } .remind-sim .toast.on { opacity: 1; transform: none; }
.msg { padding: 10px 14px; border-radius: 16px; font-size: 14px; max-width: 88%; margin-bottom: 8px; }
.msg.me { margin-left: auto; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.msg.bot { color: var(--ink-2); min-height: 3em; }
.sources { display: flex; flex-wrap: wrap; gap: 6px; } .sources span { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: rgba(10, 108, 255, 0.08); color: var(--blue); opacity: 0; transform: translateY(6px); transition: all 0.4s; }
.sources.on span { opacity: 1; transform: none; } .sources span:nth-child(2) { transition-delay: 0.12s; } .sources span:nth-child(3) { transition-delay: 0.24s; }
.log-sum { font-size: 14px; color: var(--muted); margin-bottom: 14px; } .log-sum b { color: var(--ink); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; } .bars i { flex: 1; border-radius: 6px 6px 3px 3px; background: linear-gradient(var(--blue), var(--violet)); height: 4%; transition: height 1s cubic-bezier(0.2, 0.7, 0.1, 1); }
.bars i:nth-child(3n) { background: linear-gradient(var(--pink), var(--orange)); }
.sbox { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; min-height: 46px; }
.sbox span { font: 500 11px var(--mono); padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.05); color: var(--muted); }
.search-sim ul { list-style: none; margin-top: 8px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--line); }
.search-sim li { padding: 9px 12px; font-size: 13px; display: flex; gap: 10px; align-items: center; opacity: 0; transition: opacity 0.4s; } .search-sim li:first-child { background: rgba(10, 108, 255, 0.08); }
.search-sim.on li { opacity: 1; } .search-sim li:nth-child(2) { transition-delay: 0.1s; } .search-sim li:nth-child(3) { transition-delay: 0.2s; }
.kind { font-style: normal; font: 600 10px var(--mono); padding: 2px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.06); color: var(--muted); width: 38px; text-align: center; }

/* ---------- build scene ---------- */
.build .sticky { align-items: center; justify-content: flex-start; padding-top: 11vh; }
.build-copy { text-align: center; padding: 0 16px; }
.build-copy h2 { transition: opacity 0.3s; }
.build-win { width: min(1160px, 94vw); aspect-ratio: 1000 / 600; margin-top: 3vh; font-size: clamp(8px, 1vw, 13px); }
.build-body { position: relative; height: calc(100% - 38px); background: radial-gradient(60% 60% at 30% 40%, rgba(124, 92, 255, 0.12), transparent 70%), linear-gradient(160deg, #eef0fb, #f6eef6); overflow: hidden; }
.links { position: absolute; inset: 0; width: 100%; height: 100%; }
.links path { fill: none; stroke: rgba(124, 92, 255, 0.45); stroke-width: 1.2; stroke-dasharray: 4 5; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.core { position: absolute; left: 36%; top: 44%; width: 8%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--cs, 1)); }
.core i { position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(135deg, #8fb4ff, #7c5cff 60%, #ff7ab6); animation: spin 6s linear infinite; filter: drop-shadow(0 0 18px rgba(124, 92, 255, 0.6)); }
.core i + i { inset: 26%; background: #fff; animation-duration: 3s; animation-direction: reverse; opacity: 0.9; }
.build.busy .core i { animation-duration: 1.4s; }
.creature-mini { position: absolute; left: 36%; top: 44%; width: 0; height: 0; }
.creature-mini b { position: absolute; width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c); box-shadow: 0 0 6px var(--c); animation: pop 0.4s both; }
.core-say { position: absolute; left: 36%; top: 64%; transform: translateX(-50%); font-size: 1.5em; font-weight: 650; letter-spacing: -0.02em; white-space: nowrap; text-align: center; }
.core-say small { display: block; font-size: 0.6em; font-weight: 400; color: var(--muted); }
.step-panels .sp { position: absolute; width: 23%; padding: 0.8em 1em; border-radius: 12px; background: rgba(255, 255, 255, 0.82); box-shadow: inset 0 0 0 1px var(--g-rim), 0 10px 24px rgba(40, 40, 90, 0.12); font-size: 0.95em; animation: pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.1) both; transition: opacity 0.6s; }
.sp .k { font: 600 0.8em var(--mono); color: var(--c, var(--violet)); display: flex; gap: 6px; align-items: center; } .sp .k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--violet)); }
.sp p { margin-top: 3px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp pre { margin-top: 5px; font: 0.8em/1.4 var(--mono); color: var(--muted); white-space: pre; overflow: hidden; }
.sp.old { opacity: 0.55; }
.sp.thumb { width: 18%; padding: 0.4em; } .sp.thumb img { border-radius: 8px; } .sp.thumb p { padding: 0.3em 0.3em 0; font-size: 0.85em; }
.composer { position: absolute; right: 2.4%; bottom: 3.5%; width: 34%; display: flex; gap: 8px; align-items: center; padding: 0.7em; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 26px rgba(40, 40, 90, 0.12); font-size: 1.05em; min-height: 3.6em; }
.composer .plus { color: var(--dim); } .composer .ctext { flex: 1; } .composer .ctext.typing::after { content: "▍"; color: var(--blue); animation: blink 1s steps(1) infinite; }
.result { position: absolute; inset: 0; background: linear-gradient(160deg, #eef0fb, #f6eef6); display: flex; flex-direction: column; align-items: center; padding: 1.4% 2% 2%; opacity: 0; transform: scale(0.9); transition: opacity 0.6s, transform 0.8s cubic-bezier(0.2, 0.7, 0.1, 1); pointer-events: none; }
.result.on { opacity: 1; transform: none; }
.result-bar { display: flex; gap: 10px; justify-content: space-between; width: 100%; margin-bottom: 1.2%; }
.seg-ctl { display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(0, 0, 0, 0.05); font-size: 0.95em; } .seg-ctl i { font-style: normal; padding: 0.3em 1em; border-radius: 99px; color: var(--muted); transition: all 0.3s; } .seg-ctl i.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.device { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.device .screen { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: #0d1a14; transition: width 0.7s cubic-bezier(0.2, 0.7, 0.1, 1), height 0.7s, border-radius 0.7s, box-shadow 0.7s; box-shadow: 0 10px 30px rgba(40, 40, 90, 0.18); }
.device .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity 0.8s; }
.device .screen img.alt { opacity: 0; } .device.green .screen img.alt { opacity: 1; }
.device.laptop .screen { width: 74%; height: 86%; border-radius: 10px 10px 4px 4px; box-shadow: 0 0 0 8px #1d1d1f, 0 30px 40px rgba(0, 0, 0, 0.25); }
.device.tablet .screen { width: 46%; height: 96%; border-radius: 22px; box-shadow: 0 0 0 10px #1d1d1f, 0 30px 40px rgba(0, 0, 0, 0.25); }
.device.phone .screen { width: 22%; height: 96%; border-radius: 26px; box-shadow: 0 0 0 7px #1d1d1f, 0 30px 40px rgba(0, 0, 0, 0.25); }
.device.phone .screen img, .device.tablet .screen img { object-fit: cover; object-position: 8% top; }
.build-meter { margin-top: 2.4vh; font: 500 13px var(--mono); color: var(--muted); padding: 6px 14px; border-radius: 99px; background: var(--g-fill); box-shadow: inset 0 0 0 1px var(--g-rim); }

/* ---------- gallery ---------- */
.gallery .sticky { justify-content: center; }
.rail-track { display: flex; gap: 3vw; padding: 0 8vw; width: max-content; transform: translateX(calc(var(--p) * var(--travel, 0px) * -1)); will-change: transform; }
.shot { width: min(820px, 80vw); flex: none; }
.shot img { border-radius: 20px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; box-shadow: 0 40px 90px rgba(40, 40, 90, 0.22), inset 0 0 0 1px var(--line); background: #fff; }
.shot figcaption { margin-top: 18px; font-size: 16px; color: var(--muted); } .shot figcaption b { display: block; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; } .shot figcaption em { display: block; font-style: normal; font-size: 13px; color: var(--dim); margin-top: 4px; font-family: var(--mono); }

/* ---------- devices / change / url tiles ---------- */
.dev-sim { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.dframe { width: 100%; aspect-ratio: 16 / 9.5; border-radius: 10px; overflow: hidden; transition: all 0.8s cubic-bezier(0.2, 0.7, 0.1, 1); box-shadow: 0 16px 34px rgba(40, 40, 90, 0.18); }
.dframe img { width: 100%; height: 100%; object-fit: cover; object-position: 8% top; }
.dframe.laptop { width: 78%; box-shadow: 0 0 0 7px #1d1d1f, 0 16px 34px rgba(0, 0, 0, 0.2); }
.dframe.tablet { width: 38%; aspect-ratio: 3 / 4; border-radius: 18px; box-shadow: 0 0 0 8px #1d1d1f, 0 16px 34px rgba(0, 0, 0, 0.2); }
.dframe.phone { width: 22%; aspect-ratio: 9 / 19; border-radius: 22px; box-shadow: 0 0 0 6px #1d1d1f, 0 16px 34px rgba(0, 0, 0, 0.2); }
.change-sim { position: relative; margin-top: auto; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; } .change-sim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.change-sim .after { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(0.6, 0, 0.2, 1); } .change-sim.done .after { clip-path: inset(0 0 0 0); }
.url-sim { margin-top: auto; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
.urlbar { display: flex; gap: 8px; align-items: center; padding: 8px 12px; font: 13px var(--mono); border-bottom: 1px solid var(--line); min-height: 36px; } .urlbar span { color: var(--dim); }
.url-sim img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; opacity: 0; transition: opacity 0.6s; } .url-sim.done img { opacity: 1; }

/* ---------- creature ---------- */
.creature .sticky { align-items: center; justify-content: flex-start; padding-top: 12vh; }
.creature-canvas { height: min(60vh, 62vw); width: auto; max-width: 96vw; aspect-ratio: 14 / 9; margin-top: 1vh; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 13px; color: var(--muted); margin-top: 0; padding: 0 16px; }
.legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; box-shadow: 0 0 6px var(--c); }

/* ---------- power tiles ---------- */
.split-sim { position: relative; margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; height: 260px; border-radius: 16px; overflow: hidden; background: rgba(0, 0, 0, 0.06); }
.split-sim .pane { position: relative; background: linear-gradient(160deg, #eef0fb, #f6eef6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.pchip { position: absolute; top: 10px; right: 10px; font-size: 11px; padding: 4px 10px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: flex; gap: 6px; align-items: center; } .pchip em { font-style: normal; color: var(--blue); font-weight: 600; }
.mini-core { width: 46px; height: 46px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: linear-gradient(135deg, #8fb4ff, #7c5cff 60%, #ff7ab6); animation: spin 1.6s linear infinite; filter: drop-shadow(0 0 12px rgba(124, 92, 255, 0.6)); }
.split-sim .say { font-weight: 600; font-size: 14px; } .badge-top { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); font-size: 11px; padding: 4px 10px; border-radius: 99px; background: #fff; display: flex; gap: 6px; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.agents-sim { position: relative; margin-top: auto; display: grid; gap: 10px; }
.par { justify-self: start; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 99px; background: rgba(236, 72, 153, 0.1); color: #c2255c; }
.ag { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; font-size: 14px; }
.ag i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); margin-top: 5px; } .ag span { color: var(--muted); font-size: 13px; }
.ag em { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--pink), var(--violet)); }
.agents-sim.on .ag em { animation: fill 3.4s var(--d) cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes fill { to { width: 100%; } }
.ag-result { border-radius: 12px; box-shadow: 0 16px 34px rgba(40, 40, 90, 0.18); max-height: 0; opacity: 0; transition: all 1s 3.8s; object-fit: cover; object-position: top; }
.agents-sim.on .ag-result { max-height: 220px; opacity: 1; }
.term-sim { margin-top: auto; padding: 16px; border-radius: 14px; background: #1d1d23; color: #e6e6ef; font: 12.5px/1.55 var(--mono); min-height: 190px; white-space: pre-wrap; }
.term-sim .p { color: #7cd992; } .term-sim .c { color: #8fb4ff; } .term-sim .y { color: #ffd479; }
.git-sim { margin-top: auto; font-size: 13px; display: grid; gap: 6px; } .git-sim .lbl { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.add { color: var(--mint); font-weight: 600; } .del { color: #e03131; font-weight: 600; }
.commit-box { padding: 10px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); min-height: 42px; margin: 6px 0; } .git-sim .pill { justify-self: start; }
.tm-sim { margin-top: auto; display: grid; gap: 12px; }
.tm-shot { position: relative; aspect-ratio: 16 / 7; border-radius: 14px; overflow: hidden; } .tm-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: opacity 0.6s; } .tm-shot .alt { opacity: 1; } .tm-shot.back .alt { opacity: 0; }
.tm-panel { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: #1d1d23; color: #fff; font-size: 13px; } .tm-panel .tag { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); } .tm-panel .dim { color: rgba(255, 255, 255, 0.5); } .tm-panel .pill { margin-left: auto; background: #fff; color: var(--ink); }
.tm-track { position: relative; height: 26px; border-radius: 99px; background: rgba(0, 0, 0, 0.05); }
.tm-track i { position: absolute; left: var(--x); top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); transform: translate(-50%, -50%); } .tm-track i.req { width: 4px; height: 16px; border-radius: 2px; background: var(--amber); }
.tm-track .knob { position: absolute; top: 50%; left: 88%; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), inset 0 0 0 4px var(--blue); transform: translate(-50%, -50%); transition: left 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.debug-sim { margin-top: auto; display: grid; gap: 8px; font-size: 13px; } .debug-sim p { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); flex-wrap: wrap; } .debug-sim .pill { margin-left: auto; }
.debug-sim .err b { color: #e03131; } .debug-sim .warn b { color: var(--amber); } .debug-sim .ok { color: var(--mint); opacity: 0; transition: opacity 0.6s 1.2s; } .debug-sim.on .ok { opacity: 1; }
.lock-sim { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--muted); font-size: 14px; }
.fp { width: 84px; height: 84px; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 60%, transparent 0 5px, rgba(255, 59, 92, 0.85) 5px 7px); -webkit-mask: radial-gradient(circle, #000 60%, transparent 62%); mask: radial-gradient(circle, #000 60%, transparent 62%); transition: filter 0.6s; }
.fp.ok { filter: hue-rotate(160deg) saturate(1.2); }

/* ---------- flow ---------- */
.flow-stage { flex: 1; position: relative; height: 70vh; max-width: 760px; }
.browser { position: absolute; left: 0; top: 0; width: 82%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px rgba(40, 40, 90, 0.2), inset 0 0 0 1px var(--line); transform: translateY(calc(var(--p) * -40px)); }
.bbar { display: flex; gap: 7px; align-items: center; padding: 10px 12px; background: #f1f1f4; } .burl { margin-left: 12px; padding: 3px 12px; border-radius: 7px; background: #fff; font: 12px var(--mono); color: var(--muted); }
.bbody { padding: 18px; background: #101114; color: #fff; }
.flow-prompt { padding: 12px 14px; border-radius: 12px; background: #1d1f25; font-size: 14px; min-height: 46px; }
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; } .flow-grid i, .flow-grid img { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(110deg, #22252c 30%, #343844 50%, #22252c 70%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; object-fit: cover; object-position: 50% 62%; }
.flow-grid img { opacity: var(--img, 0); transition: opacity 0.8s; }
@keyframes shimmer { to { background-position: -200% 0; } }
.flow-result { position: absolute; right: 0; bottom: 0; width: 52%; transform: translateY(calc((1 - var(--fr, 0)) * 60px)) scale(calc(0.9 + var(--fr, 0) * 0.1)); opacity: var(--fr, 0); }
@media (max-width: 860px) { .flow-stage { width: 100%; height: 60vh; flex: none; } }

/* ---------- themes ---------- */
.themes .sticky { justify-content: center; }
.theme-track { display: flex; gap: 22px; padding: 6vh 8vw 0; width: max-content; transform: translateX(calc(var(--p) * var(--travel, 0px) * -1)); }
.theme-card { width: min(380px, 70vw); flex: none; border-radius: 22px; overflow: hidden; aspect-ratio: 1.45; position: relative; box-shadow: 0 30px 60px rgba(40, 40, 90, 0.18); color: var(--tc, #fff); font-family: var(--tf, var(--font)); transform: rotate(calc((var(--i) - 7) * 0.4deg)); }
.theme-card .tbg { position: absolute; inset: 0; background: var(--tb); }
.theme-card .tcore { position: absolute; left: 50%; top: 42%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--ta); filter: drop-shadow(0 0 16px var(--ta)); animation: spin 8s linear infinite; }
.theme-card .tring { position: absolute; left: 50%; top: 42%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid var(--ta); opacity: 0.5; }
.theme-card .tpanel { position: absolute; left: 6%; top: 10%; width: 28%; height: 34%; border-radius: var(--tr, 10px); background: var(--tp); box-shadow: inset 0 0 0 1px var(--tl, rgba(255, 255, 255, 0.2)); }
.theme-card .tpanel.r { left: auto; right: 6%; top: 46%; }
.theme-card .tname { position: absolute; left: 7%; bottom: 8%; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.theme-card .tquote { position: absolute; right: 7%; bottom: 9%; font-size: 13px; opacity: 0.75; }

/* ---------- phone ---------- */
.phone-layout { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; }
.ticks { list-style: none; margin-top: 26px; display: grid; gap: 12px; } .ticks li { padding-left: 28px; position: relative; color: var(--muted); } .ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.phone { justify-self: center; width: 300px; aspect-ratio: 9 / 19; border-radius: 48px; padding: 12px; background: #1d1d1f; box-shadow: 0 50px 100px rgba(40, 40, 90, 0.28), inset 0 0 0 2px #3a3a3c; }
.ph-screen { height: 100%; border-radius: 38px; padding: 46px 18px 18px; background: linear-gradient(170deg, #17140f, #0e0c09); color: #efe6d2; font-family: Georgia, "Times New Roman", serif; position: relative; display: flex; flex-direction: column; gap: 10px; }
.ph-time { position: absolute; top: 14px; left: 30px; font: 600 13px var(--font); } .ph-kicker { font: 600 10px var(--mono); letter-spacing: 0.2em; color: #c9a45c; } .ph-screen h4 { font-size: 26px; font-weight: 400; margin-bottom: 6px; }
.ph-card { padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(201, 164, 92, 0.3); font: 13px var(--font); display: grid; gap: 2px; } .ph-card span { color: rgba(239, 230, 210, 0.6); } .ph-card.amb b { color: #ffc35c; } .ph-card.cy b { color: #7cc4ff; }
.ph-ask { margin-top: auto; padding: 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); font: 13px var(--font); color: rgba(239, 230, 210, 0.5); }
@media (max-width: 860px) { .phone-layout { grid-template-columns: 1fr; } .phone { width: 250px; } }

/* ---------- voice / limits / alerts / files ---------- */
.voice-sim { margin-top: auto; display: flex; flex-direction: column; gap: 14px; } .voice-sim p { font-size: 17px; font-weight: 600; min-height: 1.4em; }
.wave { display: flex; align-items: center; gap: 4px; height: 70px; } .wave i { flex: 1; border-radius: 99px; background: linear-gradient(var(--blue), var(--violet)); height: 10%; animation: wv 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -70ms); }
@keyframes wv { 50% { height: var(--h); } }
.limits-sim { margin: auto 0 0; display: flex; align-items: center; gap: 20px; } .limits-sim svg { width: 120px; transform: rotate(-90deg); }
.limits-sim circle { fill: none; stroke-width: 10; stroke-linecap: round; } .limits-sim .trk { stroke: rgba(0, 0, 0, 0.07); } .a1 { stroke: var(--blue); stroke-dasharray: 0 400; transition: stroke-dasharray 1.6s cubic-bezier(0.2, 0.7, 0.1, 1); } .a2 { stroke: var(--violet); stroke-dasharray: 0 400; transition: stroke-dasharray 1.6s 0.2s cubic-bezier(0.2, 0.7, 0.1, 1); }
.limits-sim b { font-size: 34px; letter-spacing: -0.03em; } .limits-sim p { color: var(--muted); }
.alerts-sim { margin-top: auto; display: grid; gap: 8px; justify-items: end; } .alerts-sim .toast { opacity: 0; transform: translateX(30px); transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.1); }
.alerts-sim.on .toast { opacity: 1; transform: none; } .alerts-sim .t2 { transition-delay: 0.5s; } .alerts-sim .t3 { transition-delay: 1s; }
.files-sim { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px; }
.files-sim .f { width: 104px; aspect-ratio: 0.8; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 8px 18px rgba(40, 40, 90, 0.08); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; font: 700 14px var(--font); color: var(--c); overflow: hidden; }
.files-sim .f b { font: 500 11px var(--font); color: var(--muted); } .files-sim .f.img img { width: 100%; height: 70%; object-fit: cover; }

/* ---------- specs / get / footer ---------- */
.specs { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; }
.specs h4 { font-size: 17px; letter-spacing: -0.01em; margin-bottom: 6px; padding-top: 14px; border-top: 1px solid var(--line); } .specs p { color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .specs { grid-template-columns: 1fr; } }
.get { text-align: center; display: flex; flex-direction: column; align-items: center; padding-bottom: 140px; }
.get-icon { border-radius: 28px; box-shadow: 0 30px 60px rgba(124, 92, 255, 0.3); margin-bottom: 26px; }
.code { margin-top: 30px; text-align: left; padding: 20px 24px; border-radius: 18px; background: #1d1d23; color: #e6e6ef; font: 14px/1.7 var(--mono); max-width: 100%; overflow-x: auto; }
.cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 28px max(20px, 6vw); font-size: 13px; border-top: 1px solid var(--line); } .foot span:first-child { display: flex; gap: 6px; align-items: center; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

/* phone and tablet show the real phone layout newCode built, not a cropped desktop */
.device .screen img.mob, .dframe img.mob { opacity: 0; }
.device.phone .screen img.mob, .device.tablet .screen img.mob, .dframe.phone img.mob, .dframe.tablet img.mob { opacity: 1; }
.dframe { position: relative; } .dframe img { position: absolute; inset: 0; transition: opacity 0.5s; } .dframe img.mob { object-position: top; }
.device.green .screen img.mob { opacity: 0; }
.split-layout .copy h2 { font-size: clamp(34px, 4.2vw, 58px); }
.badge-top { top: auto; bottom: 12px; }
.ag-result { width: 100%; }
@media (min-width: 1000px) { .tile.full { grid-column: 1 / -1; } }
.files-sim .f { width: 120px; }
.hand-sim { margin-top: auto; display: flex; align-items: center; gap: 16px; }
.term-sim.small { min-height: 0; flex: 1; padding: 14px; }
.hand-sim .arrow { font-size: 22px; color: var(--blue); animation: hint 1.6s ease-in-out infinite; }
.hand-phone { width: 120px; aspect-ratio: 9 / 16; border-radius: 22px; background: #1d1d1f; padding: 14px 10px; color: #fff; display: flex; flex-direction: column; gap: 6px; font-size: 12px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2); }
.hand-phone b { color: #d97757; font-size: 14px; } .hand-phone span { padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); } .hand-phone i { font-style: normal; color: #7cd992; font-size: 11px; margin-top: auto; }

/* Mockups scale as true miniatures: their type follows the window's own width. */
.win { container-type: inline-size; }
.home-mock { font-size: 1cqw; }
.build-win .build-body { font-size: 1.12cqw; }
.onboard-win { font-size: 1.7cqw; }
.win-bar { height: max(22px, 3.2cqw); font-size: max(7px, 1cqw); gap: max(4px, 0.6cqw); }
.tl { width: max(7px, 0.95cqw); height: max(7px, 0.95cqw); }
.home-mock .card { border-radius: 1.2cqw; } .hm-strip { border-radius: 1cqw; }
@media (max-width: 760px) {
  .hero .sticky { padding-top: 16vh; }
  .hero-win { width: 96vw; --lift: 14vh; }
  .build .sticky { padding-top: 12vh; }
  .build-copy h2 { font-size: 36px; } .build-copy .sub { font-size: 15px; }
  .composer { width: 60%; }
  .step-panels .sp { width: 30%; }
}
@media (max-width: 760px) { .step-panels .sp { font-size: 7.5px; padding: 5px 7px; border-radius: 8px; } .sp pre { display: none; } .core-say { font-size: 12px; } .composer { font-size: 9px; } }
.walls { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr 0.42fr 0.42fr; gap: 18px; align-items: end; }
.wall { display: grid; gap: 10px; font-size: 13px; color: var(--muted); text-align: center; }
.wall img { width: 100%; border-radius: 16px; box-shadow: 0 24px 50px rgba(40, 40, 90, 0.18); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.1, 1); }
.wall.ph img { border-radius: 22px; }
.wall:hover img { transform: translateY(-6px) scale(1.02); }
@media (max-width: 860px) { .walls { grid-template-columns: 1fr 1fr; } }
.req { margin-top: 18px; font-size: 13px; color: var(--dim); }