/* ===================================================================
   i4us Standalone Intake -- "Intelligent Precision" Premium Design
   Pixel-matched to React /i4us-preview/get-started
   Self-hosted fonts, zero external requests.
   =================================================================== */

/* --- Self-hosted Fonts --- */
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

/* --- Design Tokens (matched to DesignSystem.tsx COLORS) --- */
:root {
  --ink: #0A0E14;
  --ink-light: #0F1419;
  --ink-mid: #141A22;
  --accent: #3B82F6;          /* blue-500 */
  --accent-bright: #60A5FA;   /* blue-400 */
  --growth: #34D399;          /* emerald-400 */
  --growth-dark: #10B981;     /* emerald-500 */
  --text-primary: #E8ECF0;
  --text-secondary: #94A3B8;  /* slate-400 */
  --text-muted: #64748B;      /* slate-500 */
  --glass-border: rgba(255,255,255,0.08);
  --glass-bg: rgba(255,255,255,0.04);
  --glass-hover: rgba(255,255,255,0.06);
  --red: #f87171;
  --radius: 16px;             /* rounded-2xl */
  --radius-sm: 12px;          /* rounded-xl */
  --radius-full: 9999px;
  --transition: .2s ease;
  /* React uses 'Instrument Serif', Georgia, serif for headings.
     Instrument Serif is never loaded, so it renders as Georgia. */
  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
}

/* --- Base --- */
html, body {
  background: var(--ink);
  color: var(--text-primary);
  margin: 0;
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* --- Glow Effects (matches React absolute positioning) --- */
.hero-glow {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.glow {
  position: absolute; border-radius: 50%;
}
.glow-blue {
  top: -160px; left: 25%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,130,246,0.12) 0%, transparent 70%);
  filter: blur(180px);
}
.glow-emerald {
  bottom: 0; right: 25%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(52,211,153,0.08) 0%, transparent 70%);
  filter: blur(150px);
}

/* ═══ HEADER: matches React StickyNav exactly ═══ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: all .3s ease;
}
.site-header.scrolled {
  background: rgba(10,14,20,0.90);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 30px rgba(0,0,0,0.2);
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 1rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 640px) {
  .header-inner { padding: 1rem 1.5rem; }
}

/* Logo (image, brightness-0 invert to make white on dark) */
.logo {
  text-decoration: none; display: flex; align-items: center; gap: .5rem;
  transition: opacity .2s;
}
.logo:hover { opacity: .8; }
.logo-img {
  height: 36px; width: auto;
  filter: brightness(0) invert(1);
}
@media (min-width: 640px) { .logo-img { height: 40px; } }

/* Desktop nav links */
.nav-desktop {
  display: none; align-items: center; gap: 1.75rem;
}
@media (min-width: 1024px) { .nav-desktop { display: flex; } }
.nav-link {
  font-size: .875rem; font-weight: 500; text-decoration: none;
  color: #CBD5E1; /* slate-300 */
  transition: color .2s;
}
.nav-link:hover { color: #fff; }

/* Desktop CTA button */
.header-cta-wrap { display: none; align-items: center; gap: .75rem; }
@media (min-width: 1024px) { .header-cta-wrap { display: flex; } }
.header-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  padding: .625rem 1.5rem; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent), var(--growth));
  color: #fff; transition: filter .2s;
}
.header-cta:hover { filter: brightness(1.1); }

/* Mobile hamburger toggle */
.mobile-toggle {
  display: flex; padding: .5rem;
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.8);
  transition: color .2s;
}
.mobile-toggle:hover { color: #fff; }
.mobile-toggle svg { width: 24px; height: 24px; }
.mobile-toggle .close-icon { display: none; }
.mobile-toggle.open .hamburger-icon { display: none; }
.mobile-toggle.open .close-icon { display: block; }
@media (min-width: 1024px) { .mobile-toggle { display: none; } }

/* Mobile nav drawer */
.nav-mobile {
  display: none;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,14,20,0.95);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.nav-mobile.open { display: block; }
@media (min-width: 1024px) { .nav-mobile { display: none !important; } }
.nav-mobile-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 1.5rem 1rem;
  display: flex; flex-direction: column; gap: .25rem;
}
@media (min-width: 640px) { .nav-mobile-inner { padding: 1.5rem 1.5rem; } }
.nav-mobile-link {
  font-size: 1rem; font-weight: 500; text-decoration: none;
  color: #CBD5E1; padding: .75rem .75rem; border-radius: .5rem;
  transition: color .2s, background .2s;
}
.nav-mobile-link:hover { color: #fff; background: rgba(255,255,255,0.04); }
.nav-mobile-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 1rem; font-size: .875rem; font-weight: 600; text-decoration: none;
  padding: .75rem 1.5rem; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent), var(--growth));
  color: #fff;
}

/* ═══ FOOTER: matches React DarkFooter exactly ═══ */
.site-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 4rem; padding-bottom: 2rem;
  background: var(--ink-light);
}
.footer-container {
  max-width: 72rem; /* max-w-6xl = 72rem inside container */
  margin: 0 auto; padding: 0 1rem;
}
@media (min-width: 640px) { .footer-container { padding: 0 1.5rem; } }

/* 4-column grid: brand (col-span-2 on mobile, 1 on md+), services, company, locations */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Brand column spans 2 cols on mobile */
.footer-brand { grid-column: span 2; }
@media (min-width: 768px) { .footer-brand { grid-column: span 1; } }

.footer-logo-link { display: inline-block; margin-bottom: 1rem; }
.footer-logo-img {
  height: 40px; width: auto;
  filter: brightness(0) invert(1);
  opacity: .8;
}
.footer-tagline {
  font-size: .875rem; line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 1rem;
}
.footer-contact-list {
  display: flex; flex-direction: column; gap: .5rem;
}
.footer-contact-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; color: var(--text-muted);
  text-decoration: none; transition: color .2s;
}
.footer-contact-item:hover { color: #fff; }
.footer-contact-item svg { flex-shrink: 0; }

/* Footer columns */
.footer-col-title {
  font-size: .875rem; font-weight: 600;
  color: #fff; margin: 0 0 1rem;
}
.footer-link-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .5rem;
}
.footer-link-list a {
  font-size: .875rem; color: var(--text-muted);
  text-decoration: none; transition: color .2s;
}
.footer-link-list a:hover { color: #fff; }
.footer-location-link {
  display: flex; align-items: center; gap: .375rem;
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 1.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  font-size: .75rem; color: var(--text-muted);
}
@media (min-width: 640px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}
.footer-bottom p { margin: 0; }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a {
  color: var(--text-muted); text-decoration: none;
  transition: color .2s;
}
.footer-bottom-links a:hover { color: #fff; }

/* --- Hero Section (matches React pt-32 pb-8 sm:pt-40 sm:pb-12) --- */
.hero {
  position: relative; z-index: 1;
  padding: 8rem 1rem 2rem;
  text-align: center;
}
@media (min-width: 640px) {
  .hero { padding: 10rem 1.5rem 3rem; }
}
.hero-badge {
  display: inline-block; font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--growth); margin-bottom: 1rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: 1.875rem; font-weight: 700;
  line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 1rem;
}
@media (min-width: 640px) { .hero h1 { font-size: 2.25rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 3rem; } }
.hero h1 .gradient-text {
  background: linear-gradient(90deg, var(--accent-bright), var(--growth));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero p {
  font-size: 1rem; line-height: 1.6;
  color: var(--text-secondary);
  max-width: 36rem; margin: 0 auto;
}
@media (min-width: 640px) { .hero p { font-size: 1.125rem; } }

/* --- Form Container --- */
.form-area {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  padding: 0 1rem 5rem;
}
@media (min-width: 640px) {
  .form-area { padding: 0 1.5rem 7rem; }
}

/* --- Progress Bar (matches React ProgressBar) --- */
.progress {
  max-width: 672px; margin: 0 auto 2.5rem; /* max-w-2xl = 672px (42rem) */
}
.progress-dots {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: .75rem;
}
.progress-dot-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .375rem;
  width: 20%;
}
.progress-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 600;
  transition: all .3s ease;
}
.progress-dot.future {
  background: rgba(255,255,255,0.06); color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.1);
}
.progress-dot.current {
  background: linear-gradient(90deg, var(--accent), var(--growth));
  color: #fff;
  box-shadow: 0 0 20px rgba(59,130,246,0.25);
  transform: scale(1.1);
}
.progress-dot.done {
  background: rgba(52,211,153,0.20); color: var(--growth);
  border: 1px solid rgba(52,211,153,0.4);
}
.progress-dot.done svg {
  width: 14px; height: 14px; stroke: var(--growth); fill: none; stroke-width: 2;
}
.progress-dot-label {
  font-size: .625rem; font-weight: 500;
  color: var(--text-muted);
  transition: color .3s;
  display: none;
}
@media (min-width: 640px) { .progress-dot-label { display: block; } }
.progress-dot-label.current { color: #fff; }
.progress-dot-label.done { color: rgba(52,211,153,0.8); }

/* Progress track: React h-1 = 4px */
.progress-track {
  height: 4px; border-radius: 9999px;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, var(--accent), var(--growth));
  transition: width .5s ease-out;
}

/* --- Step content wrapper (matches React max-w-2xl / max-w-4xl) --- */
.step-content {
  max-width: 672px; margin: 0 auto; /* max-w-2xl */
}
.step-content.wide { max-width: 896px; } /* max-w-4xl */

/* --- Step header (matches React mb-8) --- */
.step-header {
  text-align: center; margin-bottom: 2rem;
}
.step-header h2 {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700;
  margin: 0 0 .5rem; line-height: 1.15;
}
@media (min-width: 640px) { .step-header h2 { font-size: 1.875rem; } }
.step-header h2 .gradient-text {
  background: linear-gradient(90deg, var(--accent-bright), var(--growth));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.step-header p {
  font-size: .875rem; color: var(--text-secondary); margin: 0;
}

/* --- Glass Card (matches React rounded-2xl border p-6 sm:p-8) --- */
.glass-card {
  border-radius: var(--radius); padding: 1.5rem;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
@media (min-width: 640px) {
  .glass-card { padding: 2rem; }
}

/* --- Industry Tiles (Step 1) --- */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width: 640px) { .industry-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1024px) { .industry-grid { grid-template-columns: repeat(4, 1fr); } }

.industry-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 1.25rem;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  cursor: pointer; transition: all .3s ease;
  color: var(--text-primary);
}
@media (min-width: 640px) { .industry-tile { padding: 1.5rem; } }
.industry-tile:hover {
  border-color: rgba(255,255,255,0.2);
  background: var(--glass-hover);
}
.industry-tile.selected {
  border-color: rgba(59,130,246,0.6);
  background: rgba(59,130,246,0.1);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.3), 0 8px 24px rgba(59,130,246,0.1);
}

/* Tile check icon (top-right) -- matches React CheckCircle2 */
.industry-tile .tile-check {
  position: absolute; top: .625rem; right: .625rem;
  width: 20px; height: 20px;
  display: none; align-items: center; justify-content: center;
  color: var(--accent-bright);
}
.industry-tile.selected .tile-check { display: flex; }
.industry-tile .tile-check svg {
  width: 20px; height: 20px;
}

/* Tile icon (SVG icons matching Lucide) */
.industry-tile .tile-icon {
  width: 28px; height: 28px; margin-bottom: .75rem;
  color: #94A3B8; /* slate-400 */
  transition: color .3s;
}
@media (min-width: 640px) { .industry-tile .tile-icon { width: 32px; height: 32px; } }
.industry-tile:hover .tile-icon { color: #CBD5E1; /* slate-300 */ }
.industry-tile.selected .tile-icon { color: var(--accent-bright); }
.industry-tile .tile-icon svg {
  width: 100%; height: 100%;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.industry-tile .tile-name {
  font-size: .875rem; font-weight: 600; margin-bottom: .25rem;
  color: #E2E8F0; /* slate-200 */
}
.industry-tile.selected .tile-name { color: #fff; }
.industry-tile .tile-tagline {
  font-size: .6875rem; color: var(--text-muted); line-height: 1.35;
  display: none;
}
@media (min-width: 640px) { .industry-tile .tile-tagline { display: block; } }

/* --- Question Blocks (matches React space-y-6 = 24px gap) --- */
.question-block { margin-bottom: 1.5rem; }
.question-block:last-child { margin-bottom: 0; }
.question-label {
  display: block; font-size: .875rem; font-weight: 500;
  color: #E2E8F0; /* slate-200 -- matches React text-slate-200 */
  margin-bottom: .5rem;
}
.question-label .req { color: var(--accent-bright); margin-left: .25rem; }
.helper-text {
  font-size: .75rem; color: var(--text-muted);
  line-height: 1.5; margin-top: .25rem;
}

/* --- Text / Textarea Inputs (matches React baseInputClass) --- */
.text-input, .textarea-input {
  width: 100%; border-radius: var(--radius-sm); /* rounded-xl */
  padding: .875rem 1rem; font-size: .875rem;
  color: var(--text-primary); font-family: var(--font-body);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  outline: none; transition: all var(--transition);
}
.text-input:hover, .textarea-input:hover { border-color: rgba(255,255,255,0.2); }
.text-input:focus, .textarea-input:focus {
  border-color: rgba(59,130,246,0.5);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.4); /* ring-2 ring-blue-500/40 */
}
.text-input.has-error, .textarea-input.has-error {
  border-color: rgba(248,113,113,0.6);
  background: rgba(248,113,113,0.05);
}
.textarea-input { min-height: 100px; resize: vertical; line-height: 1.5; }
.text-input::placeholder, .textarea-input::placeholder { color: var(--text-muted); }

/* --- Option Rows (single-select + multi-select) ---
   Matches React: w-full text-left rounded-xl px-4 py-3 text-sm border */
.option-list { display: flex; flex-direction: column; gap: .5rem; }
.option-row {
  width: 100%; text-align: left;
  border-radius: var(--radius-sm); /* rounded-xl */
  padding: .75rem 1rem; font-size: .875rem;
  font-family: var(--font-body);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #CBD5E1; /* slate-300 */
  cursor: pointer; transition: all var(--transition);
  display: flex; align-items: center; gap: .75rem;
}
.option-row:hover {
  border-color: rgba(255,255,255,0.2);
  background: var(--glass-hover);
}

/* Indicator circle/square -- matches React w-4 h-4 rounded-full/rounded-md border-2 */
.option-indicator {
  flex-shrink: 0; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.option-indicator.radio { border-radius: 50%; }
.option-indicator.check { border-radius: 6px; } /* rounded-md = 6px */
.option-indicator svg { display: none; width: 10px; height: 10px; }

/* Single-select selected state (blue) -- matches React blue-500 tokens */
.option-row.selected-single {
  border-color: rgba(59,130,246,0.6);
  background: rgba(59,130,246,0.1);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.3); /* ring-1 ring-blue-500/30 */
}
.option-row.selected-single .option-indicator {
  border-color: var(--accent); background: var(--accent);
}
.option-row.selected-single .option-indicator svg { display: block; }

/* Multi-select selected state (emerald) -- matches React emerald-500 tokens */
.option-row.selected-multi {
  border-color: rgba(52,211,153,0.6);   /* emerald-500/60 */
  background: rgba(52,211,153,0.1);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(52,211,153,0.3); /* ring-1 ring-emerald-500/30 */
}
.option-row.selected-multi .option-indicator {
  border-color: var(--growth-dark); background: var(--growth-dark);
}
.option-row.selected-multi .option-indicator svg { display: block; }

/* --- Inline Errors --- */
.field-error {
  font-size: .75rem; color: var(--red); margin-top: .25rem;
  display: none;
}
.field-error.visible { display: block; }

/* --- Navigation Buttons ---
   Matches React: rounded-full px-7 py-3.5 font-semibold text-sm */
.btn-row {
  max-width: 672px; margin: 2.5rem auto 0;
  display: flex; align-items: center; justify-content: space-between;
}
.btn-row.wide { max-width: 896px; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: var(--radius-full);
  font-size: .875rem; font-family: var(--font-body);
  cursor: pointer; transition: all var(--transition);
  border: none; outline: none;
}
.btn-primary {
  font-weight: 600;
  padding: .875rem 1.75rem; /* py-3.5 px-7 */
  background: linear-gradient(90deg, var(--accent), var(--growth));
  color: #fff;
}
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 8px 24px rgba(59,130,246,0.25);
}
.btn-primary:disabled { opacity: .6; cursor: not-allowed; filter: none; box-shadow: none; }
.btn-secondary {
  font-weight: 500;
  padding: .75rem 1.25rem; /* px-5 py-3 */
  background: transparent; color: #94A3B8; /* slate-400 */
  border: 1px solid rgba(255,255,255,0.1);
}
.btn-secondary:hover {
  border-color: rgba(255,255,255,0.2); color: #fff;
}
.btn svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* --- Confirmation (Step 5) --- */
.confirmation {
  text-align: center; padding: 2rem 0;
  max-width: 672px; margin: 0 auto;
}
.confirmation .conf-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(52,211,153,0.20), rgba(59,130,246,0.20));
  border: 1px solid rgba(52,211,153,0.3);
  margin-bottom: 1.5rem;
}
.confirmation .conf-icon svg {
  width: 36px; height: 36px; stroke: var(--growth); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.confirmation h2 {
  font-family: var(--font-display);
  font-size: 1.875rem; font-weight: 700;
  margin: 0 0 1rem;
}
@media (min-width: 640px) { .confirmation h2 { font-size: 2.25rem; } }
.confirmation .conf-body {
  font-size: 1rem; color: var(--text-secondary);
  margin: 0 0 .5rem; line-height: 1.6;
}
@media (min-width: 640px) { .confirmation .conf-body { font-size: 1.125rem; } }
.confirmation .conf-sub {
  font-size: .875rem; color: var(--text-muted);
  margin: 0 0 2.5rem;
}
.conf-actions {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
@media (min-width: 640px) { .conf-actions { flex-direction: row; justify-content: center; } }
.btn-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1rem 2rem; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--accent), var(--growth));
  color: #fff; font-weight: 600; font-size: .875rem;
  text-decoration: none; transition: all var(--transition);
}
.btn-cta:hover { filter: brightness(1.1); box-shadow: 0 8px 24px rgba(59,130,246,0.25); }
.btn-cta svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1rem 2rem; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-weight: 600; font-size: .875rem;
  text-decoration: none; transition: all var(--transition);
}
.btn-outline:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3); }

/* --- Honeypot --- */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --- Animations (React uses x:40 enter, x:-40 exit -- horizontal slide) --- */
.step-enter { animation: stepSlideIn .35s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes stepSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
.spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .6s linear infinite; vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Responsive --- */
@media (max-width: 480px) {
  .step-content, .btn-row { padding-left: 0; padding-right: 0; }
  .glass-card { padding: 1.25rem; }
  .btn-row { flex-direction: column-reverse; gap: .75rem; }
  .btn { width: 100%; justify-content: center; }
  .progress-dot { width: 28px; height: 28px; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .step-enter { animation: none; }
  .progress-fill { transition: none; }
  .glow { display: none; }
}