/* ═══════════════════════════════════════════════════════════════
   RUN SDK Landing: page styles (built on RUN design tokens)
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Tweakable accent: defaults to Orbit Blue */
:root {
  --accent: var(--orbit-blue);
  --accent-glow: rgba(23, 205, 255, 0.5);
  --accent-soft: rgba(23, 205, 255, 0.12);
  --maxw: 1200px;
  --font-head: 'Inter', system-ui, sans-serif;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ─── Brand wordmark ─────────────────────────────────────────── */
.wordmark {
  font-family: 'Unbounded', 'Work Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-foreground);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.wordmark .cur {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 400;
  margin-left: 0.06em;
  animation: runBlink 1.05s steps(2) infinite;
}
@keyframes runBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
[data-motion="off"] .wordmark .cur { animation: none; }

/* highlight word in copy */
.hl { color: var(--accent); }
.hl-green { color: var(--flux-green); }
.hl-yellow { color: var(--launch-yellow); }
.runword { color: var(--color-foreground); font-family: 'Unbounded', 'Work Sans', sans-serif; font-weight: 700; letter-spacing: -0.01em; }

/* ─── Eyebrow (terminal label) ───────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: 0.6; }

/* ─── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  height: 46px;
  transition: all var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.btn-primary:hover { box-shadow: var(--shadow-glow-primary); transform: translateY(-1px); }
.btn-secondary { background: var(--accent); color: var(--color-accent-foreground); }
.btn-secondary:hover { box-shadow: 0 0 16px var(--accent-glow); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--color-foreground); border: 1px solid var(--color-border); }
.btn-outline:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn-lg { height: 54px; padding: 0 30px; font-size: 16px; }

/* ─── Top nav ────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-bottom: 1px solid var(--glass-border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-right { display: flex; align-items: center; gap: 14px; }

/* SVG wordmark + blinking cursor (matches the /story-studio header) */
.nav .brand-mark { display: inline-flex; align-items: flex-end; gap: 4px; }
.nav .run-logo { height: 24px; width: auto; display: block; }
.nav .run-cursor {
  width: 11px; height: 3px; background: var(--orbit-blue);
  display: inline-block; margin-bottom: 4px; border-radius: 1px;
  box-shadow: 0 0 8px rgba(23, 205, 255, 0.55);
  animation: runBlink 1.05s steps(2) infinite;
}
[data-motion="off"] .nav .run-cursor { animation: none; }

/* ─── Hero ───────────────────────────────────────────────────── */
.hero { position: relative; padding: 86px 0 96px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(120% 90% at 70% 0%, rgba(23,205,255,0.10), transparent 55%);
}
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/catalog_bg.jpg') center/cover no-repeat;
  opacity: 0; transition: opacity var(--dur-slow);
}
[data-bg="cinematic"] .hero-photo { opacity: 0.22; }
[data-bg="cinematic"] .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(7,8,10,0.55), var(--color-background) 92%);
}
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}

.hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 22px;
}
.hero h1 .money { display: block; }
[data-headline="cyan"] .hero h1 .money { color: var(--accent); }
[data-headline="gradient"] .hero h1 .money {
  background: var(--gradient-hero);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: runGradient 5s ease infinite;
}
@keyframes runGradient { 0%{background-position:0% center;} 50%{background-position:100% center;} 100%{background-position:0% center;} }
[data-motion="off"] [data-headline="gradient"] .hero h1 .money { animation: none; }

.hero-sub {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: var(--color-foreground-secondary);
  max-width: 520px;
  margin: 0 0 30px;
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

/* metric chips */
.chips { display: flex; gap: 12px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 9px 16px 9px 12px;
  font-size: 14px;
  color: var(--color-foreground-secondary);
}
.chip svg { width: 18px; height: 18px; color: var(--accent); }
.chip b { color: var(--color-foreground); font-weight: 600; }

/* ─── Phone / portal mock ────────────────────────────────────── */
.portal-stage { position: relative; display: flex; justify-content: center; }
.phone {
  position: relative;
  width: 332px;
  aspect-ratio: 9 / 19;
  background: #000;
  border-radius: 42px;
  padding: 11px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-floating), 0 0 0 9px #0a0b0e;
}
.phone-screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 32px; overflow: hidden;
  background: #0a0c10;
}
/* host game backdrop inside phone */
.host-game {
  position: absolute; inset: 0;
  background: url('assets/game_pixel_titans.jpg') center/cover no-repeat;
  filter: brightness(0.5) saturate(1.05);
}
.host-game::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,8,10,0.35), rgba(7,8,10,0.78)); }
.notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; background: #000; border-radius: 14px; z-index: 5; }

/* the RUN offerwall sheet */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-top: 1px solid var(--glass-border);
  border-radius: 26px 26px 32px 32px;
  padding: 16px 14px 18px;
  height: 74%;
}
.sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: var(--color-border); margin: 0 auto 14px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sheet-head .wordmark { font-size: 19px; }
.sheet-head .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--color-foreground-tertiary); text-transform: uppercase; }
.sheet-title { font-size: 12px; font-weight: 600; color: var(--color-foreground-secondary); margin: 10px 2px 12px; letter-spacing: 0.02em; text-transform: uppercase; }

.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gcard { border-radius: var(--radius-lg); overflow: hidden; position: relative; transition: transform var(--dur-base) var(--ease-out); cursor: pointer; }
.gcard img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gcard .gname { position: absolute; left: 8px; bottom: 7px; right: 8px; font-size: 11px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.gcard:hover { transform: translateY(-3px); }
.gcard::after { content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); border-radius: var(--radius-lg); }

.sheet-foot { display: flex; align-items: center; gap: 8px; margin-top: 13px; font-family: var(--font-mono); font-size: 11px; color: var(--color-foreground-tertiary); }
.sheet-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--flux-green); box-shadow: 0 0 8px var(--flux-green); }
.sheet-foot b { color: var(--flux-green); font-weight: 400; }

/* floating earnings + coin */
.float-earn {
  position: absolute; z-index: 6; top: 34px; right: -26px;
  background: var(--color-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 11px 15px;
  box-shadow: var(--shadow-card);
  min-width: 150px;
}
.float-earn .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--color-foreground-tertiary); text-transform: uppercase; }
.float-earn .val { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--flux-green); margin-top: 3px; }
.coin { position: absolute; width: 54px; z-index: 6; bottom: 64px; left: -22px; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); }
[data-motion="on"] .coin { animation: floaty 4s var(--ease-in-out) infinite; }
[data-motion="on"] .float-earn { animation: floaty 5s var(--ease-in-out) infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }

/* ─── Generic section ────────────────────────────────────────── */
.section { padding: 92px 0; position: relative; }
.section-head { max-width: 740px; margin: 0 0 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.section-head p { font-size: 19px; line-height: 1.5; color: var(--color-muted); margin: 0; }

.divider { height: 1px; background: var(--color-border); max-width: var(--maxw); margin: 0 auto; }

/* ─── Inside-your-game feature rows ──────────────────────────── */
.feat-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.feat-list { display: flex; flex-direction: column; gap: 14px; }
.feat {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  transition: border-color var(--dur-base), transform var(--dur-base);
}
.feat:hover { border-color: rgba(23,205,255,0.4); transform: translateX(4px); }
.feat-ico {
  flex: none; width: 52px; height: 52px; border-radius: var(--radius-lg);
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid rgba(23,205,255,0.25);
}
.feat-ico svg { width: 26px; height: 26px; color: var(--accent); }
.feat h3 { font-size: 19px; font-weight: 600; margin: 2px 0 6px; }
.feat p { font-size: 15px; line-height: 1.5; color: var(--color-muted); margin: 0; }

/* integration bonus banner */
.bonus {
  margin-top: 22px;
  display: flex; align-items: center; gap: 20px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,210,63,0.4);
  background: linear-gradient(100deg, rgba(255,210,63,0.10), rgba(255,210,63,0.02));
  padding: 22px 26px;
}
.bonus-ico { flex: none; width: 54px; height: 54px; border-radius: var(--radius-lg); display: grid; place-items: center; background: rgba(255,210,63,0.14); border: 1px solid rgba(255,210,63,0.3); }
.bonus-ico svg { width: 28px; height: 28px; color: var(--launch-yellow); }
.bonus .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--launch-yellow); }
.bonus h3 { font-size: 20px; font-weight: 700; margin: 3px 0 4px; }
.bonus p { font-size: 14px; color: var(--color-muted); margin: 0; }

/* visual column: code + earn graphic */
.feat-visual { position: relative; }
.codecard {
  background: var(--color-overlay);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.code-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--color-border); }
.code-bar .d { width: 11px; height: 11px; border-radius: 50%; }
.code-bar .t { margin-left: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--color-foreground-tertiary); }
.code-body { font-family: var(--font-mono); font-size: 13px; line-height: 1.85; padding: 20px 20px 22px; white-space: pre; overflow-x: auto; }
.code-body .c-key { color: var(--accent); }
.code-body .c-com { color: var(--color-foreground-tertiary); }
.code-body .c-str { color: var(--flux-green); }
.code-body .c-num { color: var(--launch-yellow); }
.code-body .c-fn  { color: #C9A6FF; }

.earn-strip {
  margin-top: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
}
.estat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px 14px; }
.estat .n { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--color-foreground); }
.estat .n.green { color: var(--flux-green); }
.estat .n.cyan { color: var(--accent); }
.estat .l { font-size: 12px; color: var(--color-foreground-tertiary); margin-top: 4px; }

/* ─── Benefit cards (Bring your game) ────────────────────────── */
.bcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.bcard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.bcard::before { content:""; position:absolute; left:0; top:0; height:3px; width:100%; background: var(--bc, var(--accent)); opacity:0.85; transform: scaleX(0); transform-origin:left; transition: transform var(--dur-slow) var(--ease-out); }
.bcard:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--bc, var(--accent)) 45%, var(--color-border)); }
.bcard:hover::before { transform: scaleX(1); }
.bcard-ico { width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; background: color-mix(in srgb, var(--bc, var(--accent)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--bc, var(--accent)) 30%, transparent); margin-bottom: 20px; }
.bcard-ico svg { width: 26px; height: 26px; color: var(--bc, var(--accent)); }
.bcard h3 { font-size: 17px; font-weight: 600; line-height: 1.25; margin: 0 0 10px; }
.bcard p { font-size: 14px; line-height: 1.5; color: var(--color-muted); margin: 0; }

/* ─── Process / steps ────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.step { text-align: center; padding: 0 14px; position: relative; }
.step-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 14px; }
.step-ico {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 16px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  transition: all var(--dur-base) var(--ease-out);
}
.step-ico svg { width: 30px; height: 30px; color: var(--color-foreground); }
.step:hover .step-ico { border-color: var(--accent); box-shadow: 0 0 18px var(--accent-glow); }
.step:hover .step-ico svg { color: var(--accent); }
.step h3 { font-size: 16px; font-weight: 600; margin: 0 0 7px; }
.step p { font-size: 13px; line-height: 1.45; color: var(--color-foreground-tertiary); margin: 0; }
/* connector arrows */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 56px; right: -10px; width: 20px; height: 20px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.55;
}

/* ─── CTA band ───────────────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-overlay);
  padding: 48px;
  display: grid; grid-template-columns: 1fr 1.04fr; gap: 48px; align-items: center;
}
.cta-band::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(90% 130% at 100% 0%, rgba(23,205,255,0.12), transparent 55%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -0.03em; margin: 0; }
.cta-band h2 .l2 { color: var(--accent); }
.cta-band h2 .l3 { color: var(--flux-green); }
.cta-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-top: 30px; }
.cta-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-actions .note { font-family: var(--font-mono); font-size: 13px; color: var(--color-foreground-tertiary); }
.cta-actions .note a { color: var(--accent); }
.cta-visual { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-floating), 0 0 48px rgba(23,205,255,0.12); aspect-ratio: 16 / 11; }
.cta-visual img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.01); }
.cta-visual::after { content:""; position:absolute; inset:0; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); background: linear-gradient(180deg, transparent 52%, rgba(7,8,10,0.5)); }
.cta-visual-badge { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: var(--glass-bg); backdrop-filter: var(--glass-backdrop); -webkit-backdrop-filter: var(--glass-backdrop); border: 1px solid var(--glass-border); border-radius: var(--radius-full); padding: 7px 14px; font-family: var(--font-mono); font-size: 12px; color: var(--color-foreground-secondary); }
.cta-visual-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--flux-green); box-shadow: 0 0 8px var(--flux-green); }

/* ─── Terms + footer ─────────────────────────────────────────── */
.terms {
  display: flex; gap: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  padding: 28px 30px;
}
.terms-ico { flex: none; width: 46px; height: 46px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--accent-soft); border: 1px solid rgba(23,205,255,0.25); }
.terms-ico svg { width: 24px; height: 24px; color: var(--accent); }
.terms h4 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-foreground-secondary); margin: 4px 0 12px; }
.terms p { font-size: 12.5px; line-height: 1.6; color: var(--color-foreground-tertiary); margin: 0 0 9px; max-width: 880px; }
.terms p b { color: var(--color-muted); font-weight: 600; }

.footer { padding: 56px 0 64px; border-top: 1px solid var(--color-border); margin-top: 80px; }
.footer-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer .wordmark { font-size: 52px; }
.footer .tagline { font-family: 'Unbounded', 'Work Sans', sans-serif; font-style: italic; font-weight: 500; font-size: 19px; color: var(--color-foreground-secondary); }
.footer-meta { font-size: 13px; color: var(--color-foreground-tertiary); display: flex; gap: 22px; align-items: center; }
.footer-meta a:hover { color: var(--accent); }

/* ─── Submit form ────────────────────────────────────────────── */
.submit-main { padding: 64px 0 40px; }
.submit-wrap { max-width: 720px; }
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 32px 32px 30px;
  margin-top: 34px;
  box-shadow: var(--shadow-card);
}
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--color-foreground); }
.field label .req { color: var(--accent); }
.field label .opt { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-foreground-tertiary); margin-left: 6px; }
.field .hint { font-size: 12.5px; color: var(--color-foreground-tertiary); margin: 0 0 8px; }
.input, .textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-foreground);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.input::placeholder, .textarea::placeholder { color: var(--color-foreground-tertiary); }
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field-row .field { margin-bottom: 20px; }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.form-note { font-family: var(--font-mono); font-size: 13px; color: var(--color-foreground-tertiary); }
.form-note a { color: var(--accent); }
.form-err {
  color: #ff8080; font-size: 14px; margin: 0 0 18px;
  background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.32);
  border-radius: var(--radius-md); padding: 10px 14px;
}
.form-done {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(52,224,138,0.08); border: 1px solid rgba(52,224,138,0.35);
  border-radius: var(--radius-lg); padding: 18px 20px; margin-top: 24px;
}
.form-done[hidden] { display: none; }
.form-done > svg { width: 22px; height: 22px; color: var(--flux-green); flex: none; margin-top: 2px; }
.form-done h4 { margin: 0 0 4px; font-size: 15px; }
.form-done p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-muted); }
.form-done p b { color: var(--color-foreground-secondary); }
.form-done-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 24px 20px; }
}

/* ─── Scroll reveal ──────────────────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-motion="off"] [data-reveal] { opacity: 1; transform: none; transition: none; }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .portal-stage { order: -1; }
  .feat-layout { grid-template-columns: 1fr; gap: 40px; }
  .bcards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  .step:not(:last-child)::after { display: none; }
  .cta-band { grid-template-columns: 1fr; padding: 44px 32px; }
  .nav-links { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .section { padding: 64px 0; }
  .bcards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .float-earn { right: -10px; }
  .terms { flex-direction: column; }
}