/* AGENT 021 — founders.su apex landing. No inline styles: the CSP is style-src 'self'. */
:root {
  --bg: #0b0a10;
  --bg-2: #110c1a;
  --p-1: #1b0f2e;
  --p-2: #2e1650;
  --violet: #7b4dd8;
  --violet-hi: #b583ff;
  --line: rgba(181, 131, 255, 0.22);
  --text: #f3effa;
  --muted: #bdb3d1;
  --accent: #ffc233;
  --accent-ink: #15100a;
  --radius: 18px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
.screen[id] { scroll-margin-top: 72px; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Drifting purple fields behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 18% 22%, rgba(123, 77, 216, 0.30), transparent 70%),
    radial-gradient(34vmax 30vmax at 82% 12%, rgba(46, 22, 80, 0.85), transparent 70%),
    radial-gradient(40vmax 34vmax at 70% 78%, rgba(91, 42, 160, 0.30), transparent 70%),
    radial-gradient(26vmax 20vmax at 22% 88%, rgba(255, 194, 51, 0.06), transparent 70%),
    var(--bg);
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
b { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 10px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Sides clear the notch / rounded corners of a phone on its side (safe-area insets; 0 elsewhere). */
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
.accent { color: var(--accent); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: rgba(11, 10, 16, 0.94);
  border-bottom: 1px solid rgba(181, 131, 255, 0.12);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.brand img { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 2px var(--p-2), 0 0 16px rgba(181, 131, 255, 0.5); }
.topnav { display: none; gap: 28px; margin-left: auto; }
.topnav a { color: var(--muted); text-decoration: none; font-size: 15px; transition: color 0.2s; }
.topnav a:hover, .topnav a:focus-visible { color: var(--text); }
.topbar .btn-small { margin-left: auto; }

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 700 16px/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s, border-color 0.25s, color 0.25s;
}
.btn-ico { width: 20px; height: 20px; fill: currentColor; flex: none; }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 28px rgba(255, 194, 51, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
/* A light sweep across the CTA. */
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-150%) skewX(-20deg);
  animation: sweep 4.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes sweep { 0%, 70% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
.btn-primary:hover, .btn-primary:focus-visible {
  transform: translateY(-3px) scale(1.03);
  background: #ffd05c;
  box-shadow: 0 14px 44px rgba(255, 194, 51, 0.5), 0 0 0 6px rgba(255, 194, 51, 0.16);
}
.btn-primary:active { transform: translateY(0) scale(0.99); }
.btn-big { min-height: 60px; padding: 16px 32px; font-size: 18px; }
.btn-ghost { background: rgba(46, 22, 80, 0.4); color: var(--text); border-color: var(--line); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--violet-hi); background: rgba(46, 22, 80, 0.75); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(123, 77, 216, 0.35); }
.btn-small { min-height: 44px; padding: 8px 16px; font-size: 14px; background: transparent; color: var(--accent); border-color: rgba(255, 194, 51, 0.55); }
.btn-small:hover, .btn-small:focus-visible { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 22px rgba(255, 194, 51, 0.35); }

/* ---------- screens ---------- */
.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 72px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--violet-hi);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.8); } }
h1 { font-size: clamp(34px, 9vw, 64px); line-height: 1.05; letter-spacing: -0.025em; font-weight: 800; }
h2 { font-size: clamp(28px, 6.4vw, 46px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }
h3 { font-size: 19px; line-height: 1.25; font-weight: 750; }
.sec-head { max-width: 760px; margin-bottom: 40px; }
.sec-lead { margin-top: 16px; color: var(--muted); font-size: 18px; }

/* ---------- hero ---------- */
.hero { padding-top: 32px; }
.hero-grid { display: grid; gap: 24px; align-items: center; }
.lead { margin-top: 20px; color: var(--muted); font-size: 18px; max-width: 600px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.note { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--muted); font-size: 14px; }
.lock { width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--accent); }

.hero-visual { order: -1; display: grid; justify-items: center; gap: 8px; }
.orbit { position: relative; width: min(68vw, 290px); aspect-ratio: 1; display: grid; place-items: center; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(181, 131, 255, 0.28); }
.r1 { inset: 4%; animation: spin 60s linear infinite; }
.r2 { inset: 13%; border-style: solid; border-color: rgba(255, 194, 51, 0.16); animation: spin 90s linear infinite reverse; }
.r3 { inset: -3%; border-color: rgba(123, 77, 216, 0.18); }
@keyframes spin { to { transform: rotate(360deg); } }
.avatar {
  position: relative;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}
.avatar::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 40%, rgba(123, 77, 216, 0.75), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(255, 194, 51, 0.45), transparent 58%);
  filter: blur(26px);
  animation: glow 5s ease-in-out infinite alternate;
  will-change: transform, opacity;
  z-index: -1;
}
.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(181, 131, 255, 0.55), 0 0 0 10px rgba(46, 22, 80, 0.6), 0 30px 80px rgba(0, 0, 0, 0.6);
}
@keyframes float { 50% { transform: translateY(-12px) rotate(-1.5deg); } }
@keyframes glow { from { opacity: 0.65; transform: scale(0.95); } to { opacity: 1; transform: scale(1.06); } }
.chip {
  position: absolute;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(27, 15, 46, 0.88);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: bob 5s ease-in-out infinite;
}
.c1 { top: 6%; left: 2%; }
.c2 { top: 2%; right: 6%; animation-delay: -1s; }
.c3 { top: 47%; right: -14%; animation-delay: -2s; border-color: rgba(255, 194, 51, 0.5); color: var(--accent); }
.c4 { bottom: 6%; right: 10%; animation-delay: -3s; }
.c5 { bottom: 14%; left: -2%; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.avatar-name { font-weight: 900; letter-spacing: 0.32em; font-size: 15px; color: var(--muted); }
.avatar-name span { color: var(--accent); }

/* A 44 × 44 tap target; the 28 × 44 mouse outline is drawn inside it. */
.scroll-cue { position: absolute; left: 50%; bottom: 18px; width: 44px; height: 44px; margin-left: -22px; }
.scroll-cue::before { content: ""; position: absolute; top: 0; left: 8px; width: 28px; height: 44px; border: 2px solid var(--line); border-radius: 16px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--accent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.scroll-cue:hover::before { border-color: var(--violet-hi); }

/* ---------- funnel ---------- */
.funnel { position: relative; }
.funnel-line { position: absolute; pointer-events: none; overflow: visible; }
.funnel-line .track { fill: none; stroke: rgba(181, 131, 255, 0.14); stroke-width: 3; vector-effect: non-scaling-stroke; }
.funnel-line .draw {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(181, 131, 255, 0.7));
}
/* The script arms the line (undrawn) and draws it on scroll; without JS it is simply drawn. */
.js .funnel .draw { stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease); }
.js .funnel.is-in .draw { stroke-dashoffset: 0; }
.funnel-line-h { display: none; }
.funnel-line-v { left: 2px; top: 24px; bottom: 24px; width: 40px; height: calc(100% - 48px); }

.stages { position: relative; display: grid; gap: 16px; }
.stage {
  position: relative;
  margin-left: 56px;
  padding: 20px 20px 18px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(46, 22, 80, 0.72), rgba(27, 15, 46, 0.85));
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.stage:hover, .stage:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255, 194, 51, 0.6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 194, 51, 0.25), 0 0 34px rgba(255, 194, 51, 0.14);
}
.stage h3 { margin-bottom: 10px; font-size: 22px; }
.stage li { position: relative; padding-left: 18px; color: var(--muted); font-size: 16px; line-height: 1.45; }
.stage li + li { margin-top: 6px; }
.stage li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--violet-hi); }
.node {
  position: absolute;
  left: -54px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--p-2);
  border: 2px solid var(--violet-hi);
  color: var(--text);
  font-weight: 800;
  box-shadow: 0 0 0 6px var(--bg), 0 0 22px rgba(181, 131, 255, 0.55);
  transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.node-accent { border-color: var(--accent); color: var(--accent); }
.stage:hover .node, .stage:focus-visible .node { transform: scale(1.15); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- roles ---------- */
.roles { display: grid; gap: 24px; margin-top: 48px; align-items: center; }
.role-cards { display: grid; gap: 16px; }
.role {
  padding: 22px;
  border-radius: var(--radius);
  background: rgba(17, 12, 26, 0.82);
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.role:hover, .role:focus-visible { transform: translateY(-4px); border-color: var(--violet-hi); box-shadow: 0 18px 44px rgba(123, 77, 216, 0.28); }
.role-agent:hover, .role-agent:focus-visible { border-color: rgba(255, 194, 51, 0.6); box-shadow: 0 18px 44px rgba(255, 194, 51, 0.14); }
.role h3 { margin-bottom: 12px; }
.role-tag { display: inline-block; margin-right: 8px; vertical-align: 2px; padding: 3px 10px; border-radius: 8px; background: var(--p-2); color: var(--violet-hi); font-size: 14px; letter-spacing: 0.04em; }
.role-tag-accent { background: rgba(255, 194, 51, 0.14); color: var(--accent); }
.role li { position: relative; padding-left: 24px; color: var(--muted); }
.role li + li { margin-top: 8px; }
.role li::before { content: "✓"; position: absolute; left: 0; color: var(--violet-hi); font-weight: 800; }
.role-agent li::before { color: var(--accent); }

/* ---------- illustrations ---------- */
.ill { position: relative; border-radius: 28px; overflow: hidden; isolation: isolate; aspect-ratio: 1; background: var(--p-1); }
.ill img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.ill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(181, 131, 255, 0.25), inset 0 -60px 80px rgba(11, 10, 16, 0.55); pointer-events: none; }
.ill:hover img { transform: scale(1.05); }
.ill-link { display: block; width: 100%; height: 100%; cursor: pointer; }
.ill-link:focus-visible { outline-offset: -3px; }
.ill-research { max-width: 460px; margin: 0 auto; width: 100%; }

/* ---------- offer ---------- */
.offer-grid { display: grid; gap: 40px; }
.deck { display: grid; gap: 14px; }
/* Phones: the artefacts are a swipeable row (the next card peeks in). */
@media (max-width: 719px) {
  .deck {
    display: flex;
    gap: 12px;
    margin: 0 calc(-1 * max(20px, env(safe-area-inset-right))) 0 calc(-1 * max(20px, env(safe-area-inset-left)));
    padding: 6px max(20px, env(safe-area-inset-right)) 18px max(20px, env(safe-area-inset-left));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
    scrollbar-width: thin;
    scrollbar-color: rgba(181, 131, 255, 0.4) transparent;
  }
  .artefact { flex: 0 0 80%; scroll-snap-align: start; }
}
.artefact {
  position: relative;
  padding: 20px 20px 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(155deg, rgba(46, 22, 80, 0.95), rgba(23, 13, 38, 0.95));
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
/* The hover glow is a pre-painted layer that only fades: no box-shadow is re-rasterised per frame. */
.artefact::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 36px rgba(255, 194, 51, 0.18);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.artefact:hover, .artefact:focus-visible {
  border-color: rgba(255, 194, 51, 0.7);
  transform: translateY(-4px);
  z-index: 5;
}
.artefact:hover::after, .artefact:focus-visible::after { opacity: 1; }
.a-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: rgba(255, 194, 51, 0.12); border: 1px solid rgba(255, 194, 51, 0.35); transition: transform 0.3s var(--ease), background-color 0.3s; }
.a-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.artefact:hover .a-ico, .artefact:focus-visible .a-ico { transform: rotate(-8deg) scale(1.1); background: rgba(255, 194, 51, 0.22); }
.artefact h3 { margin-bottom: 6px; }
.artefact p { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* chat mock-up */
.chat-col { display: grid; justify-items: center; }
.phone {
  width: 100%;
  max-width: 380px;
  padding: 0 0 16px;
  border-radius: 34px;
  background: #0e0b16;
  border: 1px solid rgba(181, 131, 255, 0.3);
  box-shadow: 0 0 0 8px rgba(27, 15, 46, 0.9), 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(123, 77, 216, 0.2);
  overflow: hidden;
  contain: layout paint;
}
.phone-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: rgba(46, 22, 80, 0.6); border-bottom: 1px solid rgba(181, 131, 255, 0.15); }
.phone-top img { width: 36px; height: 36px; border-radius: 50%; }
.phone-top div { display: grid; line-height: 1.2; }
.phone-top span { color: var(--muted); font-size: 13px; }
.chat { display: grid; gap: 10px; padding: 16px 14px 4px; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 15px; line-height: 1.45; }
.msg-me { justify-self: end; background: #3b1f68; border-bottom-right-radius: 6px; }
.msg-bot { justify-self: start; background: #1d1630; border: 1px solid rgba(181, 131, 255, 0.14); border-bottom-left-radius: 6px; }
.chat-btns { display: grid; gap: 6px; margin-top: 10px; }
.chat-btn { display: block; padding: 8px 10px; border-radius: 10px; background: rgba(46, 22, 80, 0.85); color: var(--text); font-size: 14px; font-weight: 600; text-align: center; transition: background-color 0.2s, transform 0.2s; }
.chat-btn-star { background: rgba(255, 194, 51, 0.16); color: var(--accent); border: 1px solid rgba(255, 194, 51, 0.45); }
.chat-btn-wide { margin-top: 10px; }
.chat-btn:hover { transform: translateY(-1px); background: rgba(91, 42, 160, 0.9); }
.chat-btn-star:hover { background: rgba(255, 194, 51, 0.26); }
.card-title { font-weight: 800; margin-bottom: 4px; }
.msg-file { display: flex; align-items: center; gap: 12px; }
.file-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 900; flex: none; }
.msg-file p { display: grid; }
.msg-file p span { color: var(--muted); font-size: 13px; }
.chat-caption { margin-top: 10px; padding: 0 16px; color: var(--muted); font-size: 12px; text-align: center; }
/* Messages type in one by one once the phone is in view (JS only). */
.js .phone .msg { opacity: 0; transform: translateY(12px) scale(0.97); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.js .phone .msg.is-shown { opacity: 1; transform: none; }
.typing { justify-self: start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 16px; background: #1d1630; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-hi); animation: typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 50% { transform: translateY(-4px); opacity: 0.4; } }

/* why */
.why { display: grid; gap: 16px; margin-top: 48px; }
.why-card {
  padding: 22px;
  border-radius: var(--radius);
  background: rgba(17, 12, 26, 0.82);
  border: 1px solid var(--line);
  border-top: 3px solid var(--violet);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.why-card:hover, .why-card:focus-visible { transform: translateY(-5px); border-color: rgba(255, 194, 51, 0.55); border-top-color: var(--accent); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 194, 51, 0.12); }
.why-card h3 { margin-bottom: 8px; }
.why-card p { color: var(--muted); font-size: 16px; }
.ill-package { max-width: 360px; width: 100%; margin: 0 auto; }

/* ---------- start ---------- */
.start { background: radial-gradient(70% 55% at 28% 62%, rgba(46, 22, 80, 0.6), transparent 72%), radial-gradient(40% 40% at 78% 40%, rgba(255, 194, 51, 0.06), transparent 70%); }
.start-grid { display: grid; gap: 40px; align-items: center; }
.steps { display: grid; gap: 14px; counter-reset: none; }
.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px;
  border-radius: var(--radius);
  background: rgba(27, 15, 46, 0.8);
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.step:hover, .step:focus-visible { transform: translateX(6px); border-color: rgba(255, 194, 51, 0.6); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); }
.step-n { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--p-2); color: var(--accent); font-size: 20px; font-weight: 900; border: 1px solid rgba(255, 194, 51, 0.4); transition: background-color 0.3s, color 0.3s; }
.step:hover .step-n, .step:focus-visible .step-n { background: var(--accent); color: var(--accent-ink); }
.step h3 { margin-bottom: 4px; }
.step p { color: var(--muted); font-size: 16px; }
.cta-final { margin-top: 28px; }
.cta-final .btn-big { width: 100%; }
.start-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.start-visual .ill-start { margin-top: 36px; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; width: 100%; max-width: 1180px; margin: 72px auto 0; padding: 20px max(20px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border-top: 1px solid rgba(181, 131, 255, 0.12); color: var(--muted); font-size: 14px; }

/* ---------- scroll reveal (JS adds .js; content is visible without it) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .stages .reveal:nth-child(2) { transition-delay: 0.12s; }
.js .stages .reveal:nth-child(3) { transition-delay: 0.24s; }
.js .stages .reveal:nth-child(4) { transition-delay: 0.36s; }

/* ---------- tablet+ ---------- */
@media (min-width: 720px) {
  .wrap { padding: 0 max(32px, env(safe-area-inset-right)) 0 max(32px, env(safe-area-inset-left)); }
  .c3 { right: -4%; }
  .topbar { padding: 12px max(32px, env(safe-area-inset-right)) 12px max(32px, env(safe-area-inset-left)); }
  .deck { grid-template-columns: 1fr 1fr; }
  .why { grid-template-columns: 1fr 1fr; }
  .role-cards { grid-template-columns: 1fr 1fr; }
}

/* ---------- desktop ---------- */
@media (min-width: 1024px) {
  .topnav { display: flex; }
  .topbar .btn-small { margin-left: 12px; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
  .hero-visual { order: 0; gap: 12px; }
  .chip { font-size: 13px; }
  .lead { font-size: 20px; }
  .orbit { width: min(40vw, 480px); }

  .funnel { padding-top: 110px; }
  .funnel-line-v { display: none; }
  .funnel-line-h { display: block; left: 0; right: 0; top: 0; width: 100%; height: 120px; }
  .stages { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .stage { margin-left: 0; padding-top: 34px; }
  .node { left: 20px; top: -20px; }
  .stage:nth-child(1) { margin-top: 0; }

  .roles { grid-template-columns: 0.8fr 1.2fr; gap: 40px; }

  .offer-grid { grid-template-columns: 1.25fr 0.75fr; gap: 48px; align-items: center; }
  /* A calm grid: cards stay still; only the one under the pointer lifts (transform + a fading glow). */
  .deck { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .deck .artefact:hover, .deck .artefact:focus-visible { transform: translateY(-6px); }

  .why { grid-template-columns: repeat(3, 1fr) 0.8fr; align-items: stretch; }
  .ill-package { max-width: none; align-self: center; }

  .start-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
  .foot { padding: 20px max(32px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left)); }
}

@media (min-width: 1280px) {
  .hero-grid { gap: 72px; }
}

/* ---------- phones: the CTA on the first screen ----------
   Under 720 px, and on a phone turned sideways, the hero copy comes first and the CTA row follows the
   headline (the lead and the note move below it); the fox moves under the copy. Desktop is unchanged. */
@media (max-width: 719px), (max-height: 500px) and (min-width: 720px) {
  .hero-visual { order: 0; }
  .hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-copy .eyebrow { order: 1; }
  .hero-copy h1 { order: 2; }
  .hero-copy .cta-row { order: 3; margin-top: 24px; }
  .hero-copy .lead { order: 4; }
  .hero-copy .note { order: 5; }
}
/* A short screen (a phone on its side): the hero is not a full screen and the headline is smaller. */
@media (max-height: 500px) {
  .hero { min-height: 0; padding-top: 24px; padding-bottom: 72px; }
  .hero h1 { font-size: clamp(26px, 4.2vw, 40px); }
  .lead { font-size: 17px; }
}
/* … and wide enough for two columns: the copy left, a smaller fox right. */
@media (max-height: 500px) and (min-width: 720px) {
  .hero-grid { grid-template-columns: 1.2fr 0.8fr; gap: 32px; align-items: start; }
  .orbit { width: min(36vw, 60vh); width: min(36vw, 60svh); }
  .hero-visual { gap: 6px; }
}

/* ---------- reduced motion: everything still, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .phone .msg { opacity: 1; transform: none; }
  .js .funnel .draw { stroke-dashoffset: 0; }
  .artefact:hover, .artefact:focus-visible { transform: none; }
}

/* Off-screen screens stop their infinite motion (site.js toggles .is-off). */
.js .screen.is-off *, .js .screen.is-off *::before, .js .screen.is-off *::after { animation-play-state: paused !important; }