:root{
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-heading: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --radius-xl: 1.25rem;
  --shadow-soft: 0 12px 30px rgba(18, 24, 40, 0.10);
  --shadow-soft-2: 0 8px 22px rgba(18, 24, 40, 0.08);

  --hero-grad-1: rgba(99, 102, 241, 0.18);
  --hero-grad-2: rgba(16, 185, 129, 0.12);
}

html, body { height: 100%; }
body{
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}

h1, h2, h3, .navbar-brand .brand-text{
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

.shadow-soft{ box-shadow: var(--shadow-soft); border-radius: var(--radius-xl); }

.skip-link{
  position: absolute;
  left: -999px;
  top: 0;
  padding: .75rem 1rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  z-index: 9999;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

/* Minimal header (reference UI) */
.app-header{
  background: var(--bs-body-bg);
  border-bottom: 0;
}
.brand-minimal{ text-decoration: none; }
.brand-minimal .brand-text{ font-weight: 700; }

.header-actions{
  font-weight: 600;
}

.header-locale{
  font-size: .9rem;
  letter-spacing: .02em;
}

.header-icon{
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bs-secondary-color);
}
.header-icon:hover{ color: var(--bs-body-color); }
.header-icon:focus-visible{
  outline: none;
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--bs-primary) 25%, transparent);
}

.header-link{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  font-size: .95rem;
}
.header-link:hover{ color: var(--bs-body-color); }

.brand-mark{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, #6366f1, #0ea5e9);
  box-shadow: var(--shadow-soft-2);
}

.hero-section{
  position: relative;
  padding: 4.5rem 0 3.5rem;
  overflow: hidden;
}

.hero-glow{
  position: absolute;
  inset: -80px;
  background: radial-gradient(800px 600px at 20% 25%, var(--hero-grad-1), transparent 60%),
              radial-gradient(700px 520px at 85% 10%, var(--hero-grad-2), transparent 60%);
  pointer-events: none;
}

.hero-title{ line-height: 1.05; }
.hero-subtitle{ max-width: 54ch; }

.hero-badge{
  padding: .5rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--bs-border-color);
  background: color-mix(in srgb, var(--bs-body-bg) 80%, transparent);
  box-shadow: var(--shadow-soft-2);
  font-size: .92rem;
}

.hero-card{ border-radius: var(--radius-xl); }

.feature-row{
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.feature-row i{ color: var(--bs-success); font-size: 1.1rem; margin-top: .15rem; }

.mini-stat{
  display: flex;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
  box-shadow: var(--shadow-soft-2);
}
.mini-stat-icon{
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
}
.mini-stat-title{ font-weight: 700; }
.mini-stat-sub{ font-size: .9rem; }

.trust-card{
  height: 100%;
  padding: 1rem 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius-xl);
  background: var(--bs-body-bg);
  box-shadow: var(--shadow-soft-2);
}
.trust-icon{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  margin-bottom: .75rem;
}
.trust-icon i{ color: var(--bs-primary); font-size: 1.1rem; }

.step-card{
  height: 100%;
  padding: 1.1rem 1.1rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  box-shadow: var(--shadow-soft-2);
}
.step-number{
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bs-success) 13%, transparent);
  color: var(--bs-success);
  font-weight: 800;
  margin-bottom: .75rem;
}

.progress-thin{ height: 10px; border-radius: 999px; }
.progress-thin .progress-bar{ border-radius: 999px; }

.segmented{
  display: inline-flex;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  padding: .35rem;
  gap: .35rem;
  background: var(--bs-body-bg);
}
.segmented .btn{
  border-radius: 999px;
  padding: .5rem 1rem;
}

/* Gradient buttons (smooth click) */
.btn-grad{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: var(--radius-xl);
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  transform: translateZ(0);
  will-change: transform, box-shadow;
  transition: transform 140ms ease, box-shadow 220ms ease;
  box-shadow: 0 12px 28px rgba(2, 6, 23, .18);
  touch-action: manipulation;
}
.btn-grad > *{ position: relative; z-index: 1; }
.btn-grad:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(2, 6, 23, .20);
}
.btn-grad:active{
  transform: translateY(0) scale(.99);
  box-shadow: 0 10px 24px rgba(2, 6, 23, .18);
}
.btn-grad:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 .25rem rgba(59, 130, 246, .22),
    0 16px 36px rgba(2, 6, 23, .18);
}
.btn-grad::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 55%);
  opacity: .35;
  pointer-events: none;
}

/* Normalize when old markup still uses rounded-pill */
.btn-grad.rounded-pill{ border-radius: var(--radius-xl) !important; }

.hero-checks i{
  color: var(--bs-success);
  font-size: 1.1rem;
}

/* Variants */
.btn-grad-sunset{ background-image: linear-gradient(180deg, #fbbf24, #f59e0b); }
.btn-grad-ocean{ background-image: linear-gradient(180deg, #3b82f6, #2563eb); }
.btn-grad-emerald{ background-image: linear-gradient(180deg, #34d399, #10b981); }

/* Segmented toggle uses btn-grad (outline when not selected) */
.segmented .btn.btn-grad{
  background-image: none;
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--bs-primary) 45%, var(--bs-border-color));
  color: var(--bs-primary);
  box-shadow: none;
}
.segmented .btn.btn-grad:hover{
  transform: none;
  filter: none;
  box-shadow: none;
}
.segmented .btn.btn-grad:active{ transform: scale(.98); }
.segmented .btn-check:checked + .btn.btn-grad{
  background-image: linear-gradient(180deg, #3b82f6, #2563eb);
  border-color: transparent;
  color: #fff;
}
.segmented .btn-check:focus-visible + .btn.btn-grad{
  box-shadow: 0 0 0 .25rem rgba(99, 102, 241, .22);
}
html[data-theme="dark"] .segmented .btn.btn-grad{
  border-color: var(--neon-border);
  color: #7dd3fc;
}
html[data-theme="dark"] .segmented .btn-check:checked + .btn.btn-grad{
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .18), 0 18px 50px rgba(34, 211, 238, .14);
}

html[data-theme="dark"] .btn-grad{
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .12),
    0 18px 60px rgba(34, 211, 238, .14),
    0 14px 40px rgba(167, 139, 250, .10);
}
html[data-theme="dark"] .btn-grad:hover{
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .18),
    0 22px 78px rgba(34, 211, 238, .18),
    0 18px 56px rgba(167, 139, 250, .14);
}

.form-step{ display: none; opacity: 0; transform: translateY(6px); }
.form-step.active{ display: block; animation: stepIn 180ms ease-out forwards; }
@keyframes stepIn{ to { opacity: 1; transform: translateY(0); } }

.info-strip{
  display: flex;
  gap: .75rem;
  padding: 1rem;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bs-info) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bs-info) 25%, var(--bs-border-color));
}
.info-strip i{ color: var(--bs-info); font-size: 1.1rem; margin-top: .1rem; }

.summary-list{
  display: grid;
  gap: .6rem;
}
.summary-item{
  padding: .65rem .75rem;
  border-radius: 1rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}
.summary-item .k{ font-weight: 700; font-size: .9rem; }
.summary-item .v{ color: var(--bs-secondary-color); font-size: .95rem; margin-top: .1rem; white-space: pre-wrap; }

.score-card{
  padding: 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  box-shadow: var(--shadow-soft-2);
}

/* Dark mode (neon) */
html[data-theme="dark"]{
  --neon-cyan: #22d3ee;
  --neon-purple: #a78bfa;
  --neon-pink: #fb7185;
  --neon-green: #34d399;

  --neon-border: rgba(34, 211, 238, .28);
  --neon-border-2: rgba(167, 139, 250, .22);
  --neon-bg: rgba(15, 23, 42, .72);
  --neon-bg-2: rgba(15, 23, 42, .50);
  --neon-shadow:
    0 0 0 1px rgba(34, 211, 238, .18),
    0 18px 50px rgba(34, 211, 238, .12),
    0 12px 30px rgba(167, 139, 250, .10);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(34, 211, 238, .10), transparent 55%),
    radial-gradient(900px 600px at 80% 0%, rgba(167, 139, 250, .10), transparent 50%),
    radial-gradient(800px 520px at 50% 80%, rgba(52, 211, 153, .06), transparent 55%),
    #070a12;
}

html[data-theme="dark"] .hero-glow{
  background:
    radial-gradient(900px 650px at 20% 25%, rgba(34, 211, 238, .18), transparent 60%),
    radial-gradient(800px 600px at 85% 10%, rgba(167, 139, 250, .16), transparent 60%),
    radial-gradient(700px 520px at 70% 70%, rgba(251, 113, 133, .10), transparent 60%);
}

html[data-theme="dark"] .brand-mark{
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .25),
    0 18px 60px rgba(34, 211, 238, .18),
    0 16px 48px rgba(167, 139, 250, .14);
}

html[data-theme="dark"] .shadow-soft,
html[data-theme="dark"] .trust-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .mini-stat,
html[data-theme="dark"] .score-card,
html[data-theme="dark"] .hero-card{
  background: linear-gradient(180deg, var(--neon-bg), var(--neon-bg-2));
  border: 1px solid var(--neon-border);
  box-shadow: var(--neon-shadow);
}

html[data-theme="dark"] .hero-badge{
  border-color: var(--neon-border);
  background: rgba(2, 6, 23, .55);
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .12),
    0 18px 50px rgba(34, 211, 238, .10);
}

html[data-theme="dark"] .segmented{
  border-color: var(--neon-border);
  background: rgba(2, 6, 23, .45);
}

html[data-theme="dark"] .progress-thin{ background: rgba(148, 163, 184, .18); }
html[data-theme="dark"] .progress-thin .progress-bar{
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink));
}

html[data-theme="dark"] .btn-primary{
  box-shadow: 0 10px 30px rgba(34, 211, 238, .14);
}
html[data-theme="dark"] .btn-primary:hover{
  box-shadow: 0 14px 42px rgba(34, 211, 238, .18);
}

html[data-theme="dark"] .hero-title{
  filter: drop-shadow(0 14px 34px rgba(34, 211, 238, .12));
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{
  background-color: rgba(2, 6, 23, .35);
  border-color: var(--neon-border-2);
}
html[data-theme="dark"] .form-control::placeholder{
  color: rgba(226, 232, 240, .55);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{
  border-color: rgba(34, 211, 238, .85);
  box-shadow: 0 0 0 .25rem rgba(34, 211, 238, .16);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)){
  html[data-theme="dark"] .hero-title,
  html[data-theme="dark"] h2.h3,
  html[data-theme="dark"] h2.h4,
  html[data-theme="dark"] h3.h5,
  html[data-theme="dark"] .navbar-brand .brand-text{
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  html[data-theme="dark"] .navbar-brand .brand-text{
    filter: drop-shadow(0 10px 26px rgba(34, 211, 238, .12));
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .form-step.active{ animation: none; opacity: 1; transform: none; }
}