/* Pentestiverse — service page styles (plain CSS, no build step).
   Used by services/*.html. Tailwind v4 (local browser build) supplies the utilities; theme tokens
   (--color-ember-*, --font-*, --ease-*) come from the inline `@theme static` block in each page <head>.
   Orange leads. Teal marks "safe", red-orange marks "exploited". */

@layer theme, base, components, utilities;

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

@layer base {
  :root {
    color-scheme: dark;
    --ember: 237 91 46;
    --ember-soft: 255 138 92;
    --ember-pale: 255 211 189;
    --danger: 255 84 72;
    --safe: 94 234 212;
    --p: 0;
  }

  html { scroll-behavior: smooth; scroll-padding-top: 6rem; background: #050507; }
  body { overflow-x: clip; -webkit-tap-highlight-color: transparent; }
  ::selection { background: rgb(var(--ember) / 0.4); color: #fff; }
  [x-cloak] { display: none !important; }
}

@layer components {
  /* ── Backdrop ─────────────────────────────────────────────── */

  .backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .bd-glow { position: absolute; border-radius: 9999px; will-change: transform; }
  .bd-glow--a { top: -24%; right: -16%; width: 70vmax; height: 70vmax; background: radial-gradient(closest-side, rgb(var(--ember) / 0.3), rgb(var(--ember) / 0.08) 55%, transparent); animation: drift 22s ease-in-out infinite alternate; }
  .bd-glow--b { bottom: -30%; left: -22%; width: 70vmax; height: 70vmax; background: radial-gradient(closest-side, rgb(120 28 14 / 0.5), rgb(var(--ember) / 0.06) 55%, transparent); animation: drift 28s ease-in-out -9s infinite alternate-reverse; }
  .bd-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    mask-image: radial-gradient(ellipse 75% 60% at 60% 25%, #000 15%, transparent 80%);
  }
  .bd-noise {
    position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .progress { position: fixed; inset: 0 0 auto; z-index: 60; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--p)); background: linear-gradient(90deg, rgb(var(--ember)), rgb(var(--ember-soft)), #fff); box-shadow: 0 0 12px rgb(var(--ember) / 0.8); }

  /* ── Surfaces, type, buttons ──────────────────────────────── */

  .glass { background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .glass-strong { background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015)), rgb(12 8 8 / 0.7); border: 1px solid rgb(255 255 255 / 0.09); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

  .grad-text {
    background: linear-gradient(100deg, #ffe6d8 0%, #ffb08a 30%, #ff8a5c 60%, #ed5b2e 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: grad-shift 8s ease-in-out infinite alternate;
  }

  .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; letter-spacing: 0.3em; text-transform: uppercase; color: rgb(var(--ember-soft)); }
  .eyebrow::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: rgb(var(--ember-soft)); animation: ping 2.4s ease-out infinite; }

  .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-weight: 600; white-space: nowrap; border-radius: 0.875rem; outline: none; transition: translate 0.35s var(--ease-out-expo), box-shadow 0.35s ease, background-color 0.3s ease, border-color 0.3s ease; }
  .btn:focus-visible { box-shadow: 0 0 0 2px #050507, 0 0 0 4px rgb(var(--ember-pale) / 0.9); }
  .btn svg { width: 1rem; height: 1rem; transition: translate 0.35s var(--ease-out-expo); }
  .btn:hover svg { translate: 0.25rem 0; }
  .btn-primary { color: #fff; background: linear-gradient(100deg, #c8431b, #ed5b2e 50%, #ff8a5c); box-shadow: 0 10px 34px -10px rgb(var(--ember) / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.25); }
  .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.35) 50%, transparent 70%); translate: -120% 0; transition: translate 0.8s var(--ease-out-expo); }
  .btn-primary:hover { translate: 0 -2px; box-shadow: 0 16px 44px -10px rgb(var(--ember) / 1), inset 0 1px 0 rgb(255 255 255 / 0.3); }
  .btn-primary:hover::after { translate: 120% 0; }
  .btn-ghost { color: rgb(255 255 255 / 0.85); border: 1px solid rgb(255 255 255 / 0.16); background: rgb(255 255 255 / 0.03); }
  .btn-ghost:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(var(--ember-soft) / 0.5); translate: 0 -2px; }

  .js .reveal { opacity: 0; translate: 0 1.5rem; filter: blur(6px); transition: opacity 0.9s var(--ease-out-expo), translate 0.9s var(--ease-out-expo), filter 0.9s var(--ease-out-expo); transition-delay: var(--d, 0ms); }
  .js .reveal.is-in { opacity: 1; translate: 0 0; filter: none; }

  .spot { position: relative; isolation: isolate; }
  .spot::before, .spot::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
  .spot::before { inset: 0; z-index: -1; background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--ember) / 0.18), transparent 65%); }
  .spot::after { inset: -1px; padding: 1px; z-index: 1; background: radial-gradient(12rem circle at var(--mx, 50%) var(--my, 50%), rgb(var(--ember-soft) / 0.9), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
  .spot:hover::before, .spot:hover::after { opacity: 1; }

  /* ── Nav ──────────────────────────────────────────────────── */

  .nav-link { position: relative; padding-block: 0.25rem; color: rgb(255 255 255 / 0.6); transition: color 0.25s ease; }
  .nav-link:hover { color: #fff; }
  .menu-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; color: rgb(255 255 255 / 0.7); transition: background-color 0.2s ease, color 0.2s ease; }
  .menu-item:hover { background: rgb(255 255 255 / 0.06); color: #fff; }
  .menu-item[aria-current="page"] { color: rgb(var(--ember-soft)); background: rgb(var(--ember) / 0.1); }
  .menu-item span { font-family: var(--font-mono); font-size: 0.6875rem; color: rgb(255 255 255 / 0.35); }

  /* ── Hero ─────────────────────────────────────────────────── */

  .clock-pill { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.9rem 0.45rem 0.55rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; color: rgb(255 255 255 / 0.8); }
  .clock { position: relative; width: 1.4rem; height: 1.4rem; border-radius: 9999px; border: 1.5px solid rgb(var(--ember-soft)); box-shadow: 0 0 12px rgb(var(--ember) / 0.5); }
  .clock::before, .clock::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 1.5px; border-radius: 2px; background: rgb(var(--ember-pale)); transform-origin: bottom center; }
  .clock::before { height: 0.42rem; animation: spin 2.4s linear infinite; }
  .clock::after { height: 0.3rem; animation: spin 28.8s linear infinite; }

  .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.65rem; border: 1px solid rgb(255 255 255 / 0.1); border-radius: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; letter-spacing: 0.04em; color: rgb(255 255 255 / 0.55); background: rgb(255 255 255 / 0.03); white-space: nowrap; }
  .chip svg { width: 0.8rem; height: 0.8rem; color: rgb(var(--ember-soft)); }

  .tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; white-space: nowrap; color: rgb(255 255 255 / 0.75); animation: float 6s ease-in-out var(--fd, 0s) infinite; }
  .tag i { width: 0.4rem; height: 0.4rem; border-radius: 9999px; background: rgb(var(--ember-soft)); box-shadow: 0 0 8px rgb(var(--ember)); }

  .stage-aura { position: absolute; left: 50%; top: 45%; width: 125%; aspect-ratio: 1; translate: -50% -50%; border-radius: 9999px; pointer-events: none; background: radial-gradient(closest-side, rgb(var(--ember) / 0.32), rgb(var(--ember) / 0.08) 55%, transparent 72%); animation: breathe 5s ease-in-out infinite alternate; }

  /* ── Scene window ─────────────────────────────────────────── */

  .win { position: relative; contain: inline-size; border-radius: 1.25rem; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.1); background: linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.01)), rgb(10 7 7 / 0.82); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(var(--ember) / 0.08), 0 0 60px -20px rgb(var(--ember) / 0.35); }
  .win__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid rgb(255 255 255 / 0.07); background: rgb(255 255 255 / 0.02); }
  .win__dots { display: flex; gap: 0.35rem; }
  .win__dots i { width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: rgb(255 255 255 / 0.15); }
  .win__dots i:first-child { background: rgb(var(--ember)); }
  .win__title { margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.6875rem; color: rgb(255 255 255 / 0.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .win__right { margin-left: auto; }
  .win__body { position: relative; padding: 1rem; }

  .stack { display: grid; }
  .stack > * { grid-area: 1 / 1; }

  /* The scene engine: elements with data-in / data-out are shown and hidden by service.js. */
  .js .sc { opacity: 0; translate: 0 0.75rem; filter: blur(4px); transition: opacity 0.55s var(--ease-out-expo), translate 0.55s var(--ease-out-expo), filter 0.55s var(--ease-out-expo); }
  .js .sc.is-on { opacity: 1; translate: 0 0; filter: none; }
  .js .sc[data-fx="fade"] { translate: 0 0; filter: none; }
  .js .sc[data-fx="pop"] { translate: 0 0; filter: none; scale: 0.88; }
  .js .sc[data-fx="pop"].is-on { scale: 1; transition-timing-function: var(--ease-spring); }
  .js .sc-svg { opacity: 0; transform: scale(0.92); transform-box: fill-box; transform-origin: center; transition: opacity 0.5s ease, transform 0.5s var(--ease-spring); }
  .js .sc-svg.is-on { opacity: 1; transform: scale(1); }
  .js .sc-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s ease; }
  .js .sc-draw.is-on { stroke-dashoffset: 0; }
  .is-typing::after { content: "▍"; margin-left: 1px; color: rgb(var(--ember-soft)); animation: blink 0.9s steps(2) infinite; }

  .pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.55rem; border-radius: 9999px; font-family: var(--font-mono); font-size: 0.625rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
  .pill::before { content: ""; width: 0.35rem; height: 0.35rem; border-radius: 9999px; background: currentColor; box-shadow: 0 0 6px currentColor; }
  .pill--safe { color: rgb(var(--safe)); background: rgb(var(--safe) / 0.1); border-color: rgb(var(--safe) / 0.3); }
  .pill--bad { color: rgb(var(--danger)); background: rgb(var(--danger) / 0.12); border-color: rgb(var(--danger) / 0.35); }
  .pill--wait { color: rgb(255 255 255 / 0.4); background: rgb(255 255 255 / 0.05); border-color: rgb(255 255 255 / 0.1); }
  .pill--wait::before { animation: blink 1s steps(2) infinite; }
  .pill--warn { color: rgb(var(--ember-soft)); background: rgb(var(--ember) / 0.12); border-color: rgb(var(--ember) / 0.35); }

  /* ── Scene: LLM red teaming ───────────────────────────────── */

  .llm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  @media (width >= 40rem) { .llm { grid-template-columns: 1fr 12.75rem; } }
  .chat { position: relative; min-height: 26rem; display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.8125rem; line-height: 1.45; }
  .bub { max-width: 88%; padding: 0.55rem 0.8rem; border-radius: 0.9rem; }
  .bub small { display: block; margin-bottom: 0.2rem; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
  .bub--red { align-self: flex-end; border-bottom-right-radius: 0.25rem; background: rgb(var(--ember) / 0.12); border: 1px solid rgb(var(--ember) / 0.3); color: rgb(var(--ember-pale)); }
  .bub--bot { align-self: flex-start; border-bottom-left-radius: 0.25rem; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.09); color: rgb(255 255 255 / 0.85); }
  .leak { padding: 0.05rem 0.3rem; border-radius: 0.25rem; font-family: var(--font-mono); font-size: 0.75rem; color: #fff; background: rgb(var(--danger) / 0.35); box-shadow: inset 0 -1px 0 rgb(var(--danger)); }
  .finding { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.9rem; border-radius: 0.9rem; border: 1px solid rgb(var(--danger) / 0.45); background: linear-gradient(90deg, rgb(var(--danger) / 0.2), rgb(12 8 8 / 0.95)); box-shadow: 0 12px 30px -12px rgb(var(--danger) / 0.6); }
  .finding b { display: block; font-size: 0.8125rem; color: #fff; }
  .finding span { display: block; font-size: 0.6875rem; color: rgb(255 255 255 / 0.6); }
  .finding__sev { flex: none; padding: 0.35rem 0.5rem; border-radius: 0.4rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; color: #fff; background: rgb(var(--danger)); }
  .surf { display: flex; flex-direction: column; gap: 0.45rem; }
  .surf__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 0.7rem; background: rgb(255 255 255 / 0.03); border: 1px solid rgb(255 255 255 / 0.07); font-size: 0.75rem; color: rgb(255 255 255 / 0.75); }
  .surf__head { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.35); margin-bottom: 0.1rem; }
  .surf__score { margin-top: auto; padding: 0.6rem; border-radius: 0.7rem; text-align: center; font-family: var(--font-mono); font-size: 0.6875rem; color: rgb(var(--danger)); border: 1px dashed rgb(var(--danger) / 0.4); background: rgb(var(--danger) / 0.06); }

  /* ── Scene: architecture ──────────────────────────────────── */

  .arch { display: block; width: 100%; height: auto; }
  .arch .zone rect { fill: rgb(255 255 255 / 0.015); stroke: rgb(255 255 255 / 0.18); stroke-width: 1; stroke-dasharray: 4 4; }
  .arch .zone--app rect { stroke: rgb(var(--ember) / 0.3); fill: rgb(var(--ember) / 0.02); }
  .arch .zone--data rect { stroke: rgb(var(--ember-soft) / 0.55); fill: rgb(var(--ember) / 0.05); }
  .arch .zone text { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.2em; fill: rgb(255 255 255 / 0.4); }
  .arch .edge { fill: none; stroke: rgb(255 255 255 / 0.28); stroke-width: 1.4; }
  .arch .node rect { fill: rgb(22 16 15); stroke: rgb(255 255 255 / 0.2); stroke-width: 1; }
  .arch .node text { font-family: var(--font-display); font-size: 11px; font-weight: 600; fill: rgb(255 255 255 / 0.9); text-anchor: middle; dominant-baseline: central; }
  .arch .lock { fill: none; stroke: rgb(var(--ember-soft)); stroke-width: 1.6; filter: drop-shadow(0 0 4px rgb(var(--ember) / 0.7)); }
  .arch .pkt { fill: rgb(var(--ember-soft)); offset-rotate: 0deg; filter: drop-shadow(0 0 4px rgb(var(--ember))); opacity: 0; }
  .arch .pkt.is-on { opacity: 1; animation: flow 2.2s linear var(--d, 0s) infinite; }
  .arch .mark circle.core { fill: rgb(var(--danger)); }
  .arch .mark circle.ring { fill: none; stroke: rgb(var(--danger)); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 1.6s ease-out infinite; }
  .arch .mark text { font-family: var(--font-mono); font-size: 11px; font-weight: 800; fill: #fff; text-anchor: middle; dominant-baseline: central; }
  .arch .ok circle { fill: rgb(var(--safe) / 0.14); stroke: rgb(var(--safe)); stroke-width: 1.4; }
  .arch .ok path { fill: none; stroke: rgb(var(--safe)); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .arch .note rect { fill: rgb(var(--danger) / 0.14); stroke: rgb(var(--danger) / 0.5); stroke-width: 1; }
  .arch .note text { font-family: var(--font-mono); font-size: 8.5px; fill: rgb(255 200 195); text-anchor: middle; dominant-baseline: central; }
  .arch .note--fix rect { fill: rgb(var(--safe) / 0.12); stroke: rgb(var(--safe) / 0.5); }
  .arch .note--fix text { fill: rgb(190 255 245); }

  .cost { display: flex; align-items: flex-end; gap: 1rem; padding: 0.6rem 0.2rem 0; border-top: 1px solid rgb(255 255 255 / 0.07); margin-top: 0.5rem; }
  .cost__label { margin-right: auto; align-self: center; font-size: 0.75rem; line-height: 1.35; color: rgb(255 255 255 / 0.6); }
  .cost__label b { display: block; color: #fff; font-size: 0.8125rem; }
  .cost__bar { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.4); }
  .cost__bar i { display: block; width: 1.6rem; height: var(--h); border-radius: 0.3rem 0.3rem 0 0; transform-origin: bottom; background: linear-gradient(180deg, rgb(var(--ember-soft)), rgb(var(--ember) / 0.4)); }
  .cost__bar:nth-child(3) i { background: linear-gradient(180deg, rgb(var(--danger)), rgb(var(--danger) / 0.35)); }
  .js .cost__bar i { scale: 1 0; transition: scale 0.9s var(--ease-out-expo) calc(var(--i, 0) * 160ms); }
  .js .cost.is-on .cost__bar i { scale: 1 1; }

  /* ── Scene: app red teaming ───────────────────────────────── */

  .appsc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  @media (width >= 40rem) { .appsc { grid-template-columns: 1.1fr 0.9fr; } }
  .code { min-width: 0; max-width: 100%; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.75; color: rgb(255 255 255 / 0.7); border-radius: 0.8rem; padding: 0.7rem 0.2rem; background: rgb(0 0 0 / 0.35); border: 1px solid rgb(255 255 255 / 0.07); overflow: hidden; }
  .code__line { display: flex; gap: 0.7rem; padding: 0 0.7rem; min-width: 0; overflow: hidden; white-space: pre; border-left: 2px solid transparent; transition: background-color 0.4s ease, border-color 0.4s ease; }
  .code__line em { flex: none; width: 1rem; text-align: right; font-style: normal; color: rgb(255 255 255 / 0.22); }
  .code__line .k { color: rgb(var(--ember-soft)); }
  .code__line .s { color: rgb(190 230 200); }
  .code__line .c { color: rgb(255 255 255 / 0.35); }
  .code__line.is-hot { background: rgb(var(--danger) / 0.14); border-left-color: rgb(var(--danger)); }
  .code__line.is-fixed { background: rgb(var(--safe) / 0.1); border-left-color: rgb(var(--safe)); }
  .code__flag { display: inline-flex; margin: 0.35rem 0.7rem 0; }
  .net { display: flex; flex-direction: column; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; }
  .net__box { padding: 0.6rem 0.7rem; border-radius: 0.8rem; background: rgb(0 0 0 / 0.35); border: 1px solid rgb(255 255 255 / 0.07); color: rgb(255 255 255 / 0.75); line-height: 1.55; word-break: break-all; }
  .net__box small { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(255 255 255 / 0.35); }
  .net__payload { color: rgb(var(--ember-pale)); }
  .net__rows div { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0; border-bottom: 1px dashed rgb(255 255 255 / 0.07); }
  .net__rows div span:last-child { color: rgb(var(--danger)); white-space: nowrap; }
  .stamp { align-self: flex-start; padding: 0.35rem 0.6rem; border: 2px solid; border-radius: 0.4rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; white-space: nowrap; rotate: -4deg; }
  .stamp--bad { color: rgb(var(--danger)); border-color: rgb(var(--danger)); box-shadow: 0 0 20px rgb(var(--danger) / 0.35); }
  .stamp--ok { color: rgb(var(--safe)); border-color: rgb(var(--safe)); box-shadow: 0 0 20px rgb(var(--safe) / 0.3); }

  /* ── Scene: tech trainings ────────────────────────────────── */

  .lab { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  @media (width >= 40rem) { .lab { grid-template-columns: 1.15fr 0.85fr; } }
  .term { min-height: 17rem; padding: 0.8rem 0.9rem; border-radius: 0.8rem; background: rgb(0 0 0 / 0.45); border: 1px solid rgb(255 255 255 / 0.07); font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.7; color: rgb(255 255 255 / 0.75); display: flex; flex-direction: column; gap: 0.15rem; }
  .term .p { color: rgb(var(--ember-soft)); }
  .term .o { color: rgb(255 255 255 / 0.45); word-break: break-all; }
  .term .g { color: rgb(var(--safe)); }
  .flag { align-self: flex-start; margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; border-radius: 0.5rem; font-size: 0.6875rem; font-weight: 700; color: #1a0d07; background: linear-gradient(100deg, rgb(var(--ember-soft)), rgb(var(--ember-pale))); box-shadow: 0 0 24px rgb(var(--ember) / 0.55); }
  .board { display: flex; flex-direction: column; gap: 0.55rem; }
  .board__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.35); }
  .learner { display: grid; grid-template-columns: 1.7rem 1fr; gap: 0.2rem 0.6rem; align-items: center; font-size: 0.6875rem; color: rgb(255 255 255 / 0.65); }
  .learner b { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 9999px; font-size: 0.625rem; color: rgb(var(--ember-pale)); background: rgb(var(--ember) / 0.16); border: 1px solid rgb(var(--ember) / 0.35); grid-row: span 2; }
  .bar { height: 5px; border-radius: 9999px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
  .bar i { display: block; height: 100%; width: var(--w1); border-radius: inherit; background: linear-gradient(90deg, rgb(var(--ember)), rgb(var(--ember-soft)), #fff); transition: width 1s var(--ease-out-expo); }
  [data-step="2"] .bar i { width: var(--w2); }
  [data-step="3"] .bar i { width: var(--w3); }
  [data-step="4"] .bar i { width: var(--w4); }
  [data-step="5"] .bar i { width: var(--w5); }
  .levelup { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem; border-radius: 0.8rem; font-size: 0.75rem; color: rgb(var(--ember-pale)); border: 1px solid rgb(var(--ember) / 0.4); background: rgb(var(--ember) / 0.1); box-shadow: 0 0 30px -10px rgb(var(--ember) / 0.7); }
  .levelup b { color: #fff; display: block; }
  .levelup svg { width: 1.4rem; height: 1.4rem; flex: none; color: rgb(var(--ember-soft)); }

  /* ── Scene: public speaking ───────────────────────────────── */
  /* Note: elements with .sc must not use `translate` for positioning; the scene engine owns it. */

  .stage { --sx: 13%; position: relative; aspect-ratio: 4 / 3.35; border-radius: 1.25rem; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.1); background: radial-gradient(ellipse 60% 55% at 20% 0%, rgb(var(--ember) / 0.2), transparent 70%), linear-gradient(180deg, rgb(14 9 8), rgb(8 6 6)); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.9), 0 0 60px -20px rgb(var(--ember) / 0.35); }
  .beam { position: absolute; top: 0; left: calc(var(--sx) - 26%); width: 52%; height: 86%; clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgb(var(--ember-pale) / 0.22), rgb(var(--ember) / 0.05) 70%, transparent); }

  .chalkboard { position: absolute; left: 6%; right: 6%; top: 7%; height: 45%; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem 0.8rem 0.5rem; border-radius: 0.8rem; background: linear-gradient(160deg, #181210, #0d0a09); border: 1px solid rgb(var(--ember) / 0.4); box-shadow: inset 0 0 40px rgb(0 0 0 / 0.65), 0 0 40px -8px rgb(var(--ember) / 0.45); }
  .chalk-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.75); }
  .chalk-svg { flex: 1; min-height: 0; width: 100%; }
  .chalk { fill: none; stroke: rgb(255 255 255 / 0.5); stroke-width: 1.2; stroke-linecap: round; }
  .chalk-grid { stroke: rgb(255 255 255 / 0.14); stroke-dasharray: 2 4; }
  .chalk-trend { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgb(var(--ember-soft))); }
  .chalk-arrow { fill: #fff; filter: drop-shadow(0 0 4px rgb(var(--ember-soft))); }
  .chalk-label { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.08em; fill: rgb(255 255 255 / 0.45); text-anchor: middle; }
  .chalk-bar { fill: rgb(var(--ember) / 0.5); stroke: rgb(var(--ember-soft)); stroke-width: 1; transform-box: fill-box; transform-origin: bottom; }
  .js .chalk-bar { transform: scaleY(0); transition: transform 0.9s var(--ease-out-expo) calc(var(--i, 0) * 110ms); }
  .js .chalk-bar.is-on { transform: scaleY(1); }

  .podium { position: absolute; left: calc(var(--sx) - 1.1rem); bottom: 27%; width: 5.4rem; height: 0.45rem; border-radius: 0.3rem; background: linear-gradient(180deg, rgb(var(--ember) / 0.5), rgb(var(--ember) / 0.1)); box-shadow: 0 0 24px rgb(var(--ember) / 0.5); }
  .speaker { position: absolute; left: var(--sx); bottom: 29%; width: 3.2rem; display: flex; flex-direction: column; align-items: center; }
  .speaker .head { width: 1.15rem; height: 1.15rem; border-radius: 9999px; background: #0b0807; border: 1.5px solid rgb(var(--ember-soft)); box-shadow: 0 0 14px rgb(var(--ember) / 0.6); }
  .speaker .body { width: 2.4rem; height: 1.7rem; margin-top: 0.15rem; border-radius: 1.2rem 1.2rem 0.2rem 0.2rem; background: #0b0807; border: 1.5px solid rgb(var(--ember-soft)); border-bottom: 0; }
  .say { position: absolute; left: calc(var(--sx) + 4.2rem); bottom: 33%; max-width: 54%; padding: 0.5rem 0.8rem; border-radius: 0.9rem 0.9rem 0.9rem 0.2rem; font-size: 0.75rem; font-weight: 600; line-height: 1.35; color: #1a0d07; background: linear-gradient(100deg, rgb(var(--ember-soft)), rgb(var(--ember-pale))); box-shadow: 0 0 24px rgb(var(--ember) / 0.5); }

  /* Rings spreading from the speaker out to the community. */
  .pulse { position: absolute; left: calc(var(--sx) + 1.6rem); bottom: 36%; width: 0; height: 0; z-index: 0; }
  .pulse::before, .pulse::after { content: ""; position: absolute; left: -1.5rem; top: -1.5rem; width: 3rem; height: 3rem; border-radius: 9999px; border: 1.5px solid rgb(var(--ember-soft)); opacity: 0; animation: broadcast 2.8s ease-out infinite; }
  .pulse::after { animation-delay: 1.4s; }

  .crowd { position: absolute; inset: auto 6% 5% 6%; display: grid; grid-template-columns: repeat(9, 1fr); gap: 0.45rem 0.35rem; }
  .crowd i { position: relative; justify-self: center; width: 0.95rem; height: 0.95rem; border-radius: 9999px 9999px 0.35rem 0.35rem; background: rgb(255 255 255 / 0.08); transition: background-color 0.6s ease, box-shadow 0.6s ease; transition-delay: calc(var(--k, 0) * 55ms); }
  .crowd i:nth-child(n+10) { translate: 0 0.15rem; }
  .crowd i:nth-child(n+19) { translate: 0 0.3rem; }
  /* The community grows: a third lights up first, then two thirds, then everyone. */
  .crowd.is-on i:nth-child(3n+1),
  .stage[data-step="5"] .crowd i:nth-child(3n+2),
  .stage[data-step="6"] .crowd i:nth-child(3n+2),
  .stage[data-step="7"] .crowd i { background: rgb(var(--ember) / 0.55); box-shadow: 0 0 10px rgb(var(--ember) / 0.45); }
  .crowd-label { position: absolute; right: 6%; bottom: 19.5%; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.55); }
  .crowd-label b { font-weight: 500; color: rgb(var(--ember-soft)); }
  /* ── Scene: micro apps ────────────────────────────────────── */

  .mapp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  @media (width >= 40rem) { .mapp { grid-template-columns: 0.85fr 1.15fr; } }
  .col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.4rem; margin-bottom: 0.5rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(255 255 255 / 0.4); }
  .url { font-size: 0.625rem; letter-spacing: 0.02em; text-transform: none; color: rgb(var(--ember-pale)); }
  .reqs { display: flex; flex-direction: column; gap: 0.5rem; }
  .req { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.1rem 0.6rem; align-items: start; padding: 0.55rem 0.65rem; border-radius: 0.8rem; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.08); font-size: 0.75rem; line-height: 1.4; color: rgb(255 255 255 / 0.85); }
  .req b { grid-row: span 2; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 9999px; font-size: 0.625rem; color: rgb(var(--ember-pale)); background: rgb(var(--ember) / 0.16); border: 1px solid rgb(var(--ember) / 0.35); }
  .req small { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.4); }
  .req--us { background: rgb(var(--ember) / 0.1); border-color: rgb(var(--ember) / 0.3); color: rgb(var(--ember-pale)); }
  .req--us b { color: #1a0d07; background: linear-gradient(135deg, rgb(var(--ember-soft)), rgb(var(--ember-pale))); border-color: transparent; }
  .req--mini { align-items: center; padding: 0.35rem 0.6rem; grid-template-columns: 1.3rem 1fr; }
  .req--mini b { grid-row: auto; width: 1.3rem; height: 1.3rem; font-size: 0.5625rem; }
  @media (width < 40rem) { .req--mini { display: none; } }

  .appgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
  .appc { display: flex; flex-direction: column; gap: 0.45rem; min-height: 5.7rem; padding: 0.6rem 0.65rem; border-radius: 0.8rem; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.08); }
  .appc__top { display: flex; align-items: center; gap: 0.45rem; font-size: 0.6875rem; font-weight: 600; color: rgb(255 255 255 / 0.85); }
  .appc__top b { display: grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 0.35rem; font-size: 0.5625rem; color: #1a0d07; background: linear-gradient(135deg, rgb(var(--ember-soft)), rgb(var(--ember-pale))); }
  .appc__top span { margin-left: auto; font-family: var(--font-mono); font-weight: 400; font-size: 0.5625rem; color: rgb(255 255 255 / 0.4); }
  .appc__ui { display: flex; flex-direction: column; gap: 0.3rem; }
  .appc__ui i { display: block; height: 0.35rem; border-radius: 9999px; background: rgb(255 255 255 / 0.12); }
  .appc__ui i:nth-child(1) { width: 85%; }
  .appc__ui i:nth-child(2) { width: 60%; background: rgb(var(--ember) / 0.38); }
  .appc__ui i:nth-child(3) { width: 72%; }
  [data-step="2"] .appc--first .appc__ui i { background: linear-gradient(90deg, rgb(255 255 255 / 0.08), rgb(var(--ember-soft) / 0.65), rgb(255 255 255 / 0.08)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
  .appc__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
  .sub { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.06em; white-space: nowrap; color: rgb(var(--safe)); }
  .mfoot { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid rgb(255 255 255 / 0.07); font-size: 0.75rem; color: rgb(255 255 255 / 0.7); min-height: 1.6rem; }
  .mfoot b { font-weight: 600; color: rgb(var(--ember-soft)); }
  /* ── Pricing and process ──────────────────────────────────── */

  .pricecard { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.75rem; border-radius: 1.5rem; border: 1px solid rgb(var(--ember) / 0.4); background: linear-gradient(160deg, rgb(var(--ember) / 0.12), rgb(255 255 255 / 0.02) 60%); box-shadow: 0 30px 60px -30px rgb(var(--ember) / 0.55); }
  .pricecard__kicker { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; color: rgb(var(--ember-soft)); }
  .price-main { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #fff; }
  .price-main small { display: block; margin-top: 0.45rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; line-height: 1.45; color: rgb(255 255 255 / 0.55); }
  .paysplit { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .paysplit__half { padding: 0.85rem 0.9rem; border-radius: 0.9rem; border: 1px solid rgb(var(--ember) / 0.45); }
  .paysplit__half b { display: block; font-size: 1.5rem; line-height: 1; color: #fff; }
  .paysplit__half span { display: block; margin-top: 0.4rem; font-size: 0.75rem; line-height: 1.35; color: rgb(255 255 255 / 0.72); }
  .paysplit__half--a { background: linear-gradient(135deg, rgb(var(--ember) / 0.55), rgb(var(--ember) / 0.16)); }
  .paysplit__half--b { border-style: dashed; background: rgb(var(--ember) / 0.05); }
  .js .reveal .paysplit__half { opacity: 0; translate: 0 0.6rem; transition: opacity 0.7s var(--ease-out-expo), translate 0.7s var(--ease-out-expo); transition-delay: calc(0.35s + var(--j, 0) * 0.25s); }
  .js .reveal.is-in .paysplit__half { opacity: 1; translate: 0 0; }
  .pricecard__note { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.8rem; border-radius: 0.8rem; border: 1px dashed rgb(var(--ember) / 0.4); background: rgb(var(--ember) / 0.06); font-size: 0.8125rem; line-height: 1.45; color: rgb(var(--ember-pale)); }
  .pricecard__note svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; color: rgb(var(--ember-soft)); }

  .steps { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  .steps::before { content: ""; position: absolute; left: 1.1rem; top: 1.1rem; bottom: 1.1rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgb(var(--ember) / 0.7), rgb(var(--ember) / 0.12)); }
  .step-row { position: relative; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 1rem; padding-bottom: 1.25rem; }
  .step-row:last-child { padding-bottom: 0; }
  .step-node { position: relative; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 9999px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: rgb(var(--ember-pale)); background: #0b0807; border: 1.5px solid rgb(var(--ember) / 0.6); box-shadow: 0 0 0 4px #050507; }
  .step-node--gate { width: 1.8rem; height: 1.8rem; margin: 0.2rem 0.2rem; border-radius: 0.5rem; rotate: 45deg; }
  .step-node--gate > span { display: block; rotate: -45deg; }
  .step-node--pay { color: #1a0d07; background: linear-gradient(135deg, rgb(var(--ember-soft)), rgb(var(--ember-pale))); border-color: transparent; box-shadow: 0 0 0 4px #050507, 0 0 24px rgb(var(--ember) / 0.6); }
  .step-body { padding-top: 0.3rem; }
  .step-body h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: #fff; }
  .step-body p { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.5; color: rgb(255 255 255 / 0.6); }
  .step-note { display: flex; gap: 0.5rem; margin-top: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 0.75rem; border: 1px dashed rgb(var(--ember) / 0.4); background: rgb(var(--ember) / 0.06); font-size: 0.8125rem; line-height: 1.45; color: rgb(var(--ember-pale)); }
  /* ── Small screens ────────────────────────────────────────── */
  /* Grid tracks and flex children must be allowed to shrink, or the widest content stretches the whole hero. */
  .llm > *, .appsc > *, .lab > *, .mapp > * { min-width: 0; }
  .win__title { min-width: 0; flex: 0 1 auto; }
  .win__right { flex: none; }
  .appgrid > * { min-width: 0; }
  @media (width < 40rem) {
    .appc__foot { flex-wrap: wrap; row-gap: 0.3rem; }
    .code { font-size: clamp(0.4375rem, 2.3vw, 0.5625rem); }
    .code__line { gap: 0; }
    .code__line em { display: none; }
  }
  /* ── Positioning cards, CTA, footer ───────────────────────── */

  .pcard { position: relative; display: flex; flex-direction: column; gap: 0.9rem; height: 100%; padding: 1.75rem; border-radius: 1.5rem; }
  .pcard__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.85rem; color: rgb(var(--ember-soft)); background: rgb(var(--ember) / 0.12); box-shadow: inset 0 0 0 1px rgb(var(--ember) / 0.28); }
  .pcard__icon svg { width: 1.3rem; height: 1.3rem; }
  .pcard h3 { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: rgb(255 255 255 / 0.45); }
  .pcard p { font-size: 1.0625rem; line-height: 1.55; color: rgb(255 255 255 / 0.8); }
  .pcard--time { border-color: rgb(var(--ember) / 0.4); background: linear-gradient(160deg, rgb(var(--ember) / 0.14), rgb(255 255 255 / 0.02) 60%); box-shadow: 0 30px 60px -30px rgb(var(--ember) / 0.55); }
  .pcard--time p strong { display: block; margin-bottom: 0.4rem; font-size: 1.25rem; line-height: 1.25; color: #fff; }

  .other { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-radius: 1rem; font-weight: 600; transition: translate 0.4s var(--ease-out-expo), border-color 0.3s ease; }
  .other span { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; color: rgb(255 255 255 / 0.4); }
  .other svg { width: 1rem; height: 1rem; color: rgb(var(--ember-soft)); transition: translate 0.35s var(--ease-out-expo); }
  .other:hover { translate: 0 -3px; border-color: rgb(var(--ember) / 0.45); }
  .other:hover svg { translate: 0.25rem 0; }

  .foot-link { color: rgb(255 255 255 / 0.45); transition: color 0.25s ease; }
  .foot-link:hover { color: rgb(255 255 255 / 0.9); }
}

/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes drift { from { transform: translate3d(-3%, -3%, 0); } to { transform: translate3d(4%, 3%, 0); } }
@keyframes float { 50% { transform: translate3d(0, -0.55rem, 0); } }
@keyframes breathe { from { opacity: 0.65; scale: 0.94; } to { opacity: 1; scale: 1.04; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes grad-shift { to { background-position: 100% 0; } }
@keyframes blink { 50% { opacity: 0.2; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(var(--ember) / 0.6); } 70%, 100% { box-shadow: 0 0 0 0.5rem rgb(var(--ember) / 0); } }
@keyframes ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes flow { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes wave { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes broadcast { from { opacity: 0.6; transform: scale(0.4); } to { opacity: 0; transform: scale(7); } }
@keyframes applause { from { opacity: 0.8; scale: 0.4; } to { opacity: 0; scale: 3.4; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}