/* ===== Base ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --brand:#6c7cff; --brand2:#9b7cff;
  --text:#0e0f13; --muted:#8b93a6;
  --shadow:0 12px 30px rgba(0,0,0,.24);
  --radius:18px;
}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:#000}
.container{width:min(1100px,92%);margin-inline:auto}
.center{text-align:center}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.skip-link{position:absolute;inset:1rem auto auto -9999px;background:#111;color:#fff;padding:.5rem .75rem;border-radius:8px}
.skip-link:focus{inset:1rem auto auto 1rem}

/* ===== Header (transparent) ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .25s, box-shadow .25s}
.site-header .header-inner{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;max-width:1100px;margin:0 auto}
.site-header.minimal{background:transparent}
.site-header.scrolled{background:rgba(15,17,25,.55);backdrop-filter:saturate(160%) blur(10px);box-shadow:0 2px 14px rgba(0,0,0,.18)}
.brand{display:inline-flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font-weight:800}
.brand-dot{width:10px;height:10px;border-radius:999px;background:#7ea0ff;box-shadow:0 0 0 3px rgba(126,160,255,.2)}
.brand-name{letter-spacing:.2px}
.ghost-on-hero{background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff}
.ghost-on-hero:hover{background:rgba(255,255,255,.08)}

/* ===== Hero ===== */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center 55%;z-index:-3;transform:translateZ(0)}
/* Dark at top for text, softens to light */
.hero-overlay{position:absolute;inset:0;z-index:-2;background:
  linear-gradient(to bottom,
    rgba(8,12,20,.88) 0%,
    rgba(8,12,20,.70) 35%,
    rgba(8,12,20,.38) 70%,
    rgba(8,12,20,.15) 100%)
}
.hero-inner{width:min(900px,92%);text-align:center;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.36);padding:6.2rem 1rem 3rem}
.h1{margin:0 0 .8rem;font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:1.1;font-weight:900}
.sub{margin:.2rem auto 1.4rem;max-width:760px;font-size:clamp(1.05rem,2.1vw,1.25rem);opacity:.96}
.reassure{margin:.9rem 0 0;opacity:.9;font-size:.95rem}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.4rem;border-radius:999px;border:1px solid transparent;font-weight:800;text-decoration:none;cursor:pointer}
.btn-sm{padding:.55rem .95rem;font-size:.92rem}
.btn-xl{padding:1rem 1.6rem;font-size:1.1rem}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{filter:brightness(.98)}
/* Glow/pulse for hero button */
.btn-glow{position:relative}
.btn-glow::after{
  content:"";position:absolute;inset:-4px;border-radius:999px;
  background:radial-gradient(60% 60% at 50% 50%, rgba(74, 94, 243, 0.35), transparent 60%);
  filter:blur(10px);opacity:.7;z-index:-1;animation:pulse 2.8s ease-in-out infinite
}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:.9}}

/* ===== Micro-proof & CTA ===== */
.trust.micro{background:#0b0f1a;padding:1.1rem 0;border-top:1px solid rgba(255,255,255,.06)}
.pill{display:inline-block;color:#cfd6ff;background:rgba(180,192,255,.12);border:1px solid rgba(180,192,255,.18);padding:.35rem .7rem;border-radius:999px;margin:.15rem .25rem;font-size:.9rem}
.cta-final.compact{padding:2.6rem 0;background:#fff}
.h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin:0 0 .4rem}
.site-footer{padding:1.6rem 0;background:#fff;border-top:1px solid #eee}
.footer-grid{display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap;align-items:flex-start}
.footer-nav{display:flex;gap:1rem}
.footer-nav a{text-decoration:none;color:#111}
.footer-nav a:hover{text-decoration:underline}

/* ===== Responsive ===== */
@media (max-width:820px){
  .btn-xl{font-size:1rem;padding:.9rem 1.35rem}
  .hero-inner{padding:5.4rem 1rem 2.6rem}
}




/* ==== Quiz layout ==== */
.quiz-body{background:#0b0f1a;color:#fff}


.quiz-card{
  background:#0e1322e6; backdrop-filter:saturate(140%) blur(6px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:1.2rem 1rem 1.4rem; margin-bottom:2rem;
}
@media (min-width: 720px){
  .quiz-card{padding:1.6rem 1.6rem 1.6rem; width:min(800px,92%)}
}

/* Progress bar */
.quiz-progress{height:10px;background:rgba(255,255,255,.08);border-radius:999px;margin:.2rem 0 1rem}
.quiz-progress__bar{height:100%;background:linear-gradient(90deg,#6c7cff,#9b7cff);border-radius:999px;width:0%;transition:width .35s}

/* Steps */
.q-step{display:none}
.q-step.is-active{display:block}
.q-title{margin:.25rem 0 .75rem;font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2}
.q-sub{margin:-.2rem 0 .9rem}
.q-options{display:grid;gap:.6rem;margin:.6rem 0 1rem}
.q-opt{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:.75rem .9rem;border-radius:14px;cursor:pointer}
.q-opt input{accent-color:#7f8cff;transform:scale(1.1)}
.q-opt:hover{background:rgba(255,255,255,.09)}
.q-nav{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.4rem}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

.email-field input{
  width:100%; padding:1rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; outline:none;
}
.email-field input::placeholder{color:#dfe3ffb3}

/* Step label in header */
.quiz-steps-label{color:#d9ddff; font-weight:600}

/* Footer on dark bg */
.quiz-body .site-footer{background:#0b0f1a;border-top:1px solid rgba(255,255,255,.08)}
.quiz-body .footer-nav a{color:#e7e9ff}






/* Make sure hero behind the quiz can't intercept clicks */
.quiz-hero { z-index: 0; }
.quiz-main { position: relative; z-index: 1; }

/* Use [hidden] to hide steps reliably (paired with JS .hidden) */
.q-step[hidden] { display: none !important; }

.q-step { opacity:0; transition:opacity .3s ease; }
.q-step.is-active { opacity:1; }





/* Result page polish */
.result-card .pill{margin-bottom:.35rem}
.result-grid{display:grid;gap:1rem;margin:1rem 0}
.result-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:1rem}
.result-list{margin:.4rem 0 0;padding-left:1rem}
.result-cta{margin-top:1rem}
@media (min-width: 880px){
  .result-grid{grid-template-columns:1fr 1fr}
}





/* Limit max width for readability */
.result-card {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

/* Make sure container centers content and doesn't stretch full width */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
}



.result-card {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}









/* Keep all result sections aligned and centered */
.quiz-main > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Make every .quiz-card (result sections) share the same width + alignment */
.quiz-card {
  max-width: 900px;
  width: 100%;
  margin: 1rem auto;
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  box-sizing: border-box;
}

/* Testimonials and FAQ styling fix */
.quiz-card h3 {
  text-align: center;
  margin-bottom: 0.8rem;
}

.testimonials .card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* FAQ details spacing fix */
.quiz-card details {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  margin: 0.5rem 0;
}
.quiz-card summary {
  font-weight: 600;
  cursor: pointer;
}






/* Testimonials Section — Modern Redesign */
.testimonials-section {
  text-align: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px;
  backdrop-filter: blur(6px);
}

.testimonials-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.2rem;
}
@media (min-width: 900px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.testimonial:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.testimonial::before {
  content: "★ ★ ★ ★ ★";
  display: block;
  font-size: 0.8rem;
  color: #a890ff;
  letter-spacing: 1px;
  margin-bottom: 0.6rem;
}

.testimonial-text {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e6e6e6;
}

.testimonial-name {
  margin-top: 0.7rem;
  font-weight: 700;
  color: #fff;
}

.testimonial-meta {
  font-size: 0.8rem;
  color: #a5a5a5;
  margin-top: 0.2rem;
}






.testimonial {
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}
.testimonial:nth-child(2) { animation-delay: .15s; }
.testimonial:nth-child(3) { animation-delay: .3s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(10px); }
}







/* === HERO PATCH (final) — blend image + precise positioning === */
:root { --page-bg:#0b0f1a; }

.hero-landing.quiz-hero{
  --hero-h: 48vh;                 /* change 44–56vh to taste */
  position: relative !important;
  height: var(--hero-h) !important;
  min-height: 320px;
  z-index: 0;
}

/* Image layer fills hero, vertical offset controlled via --hero-pos */
.hero-landing.quiz-hero .hero-bg{
  position: absolute; inset: 0;
  background-image: var(--hero, url('./images/hero-sleep.jpg')) !important;
  background-size: cover !important;
  background-position: center var(--hero-pos, 70%) !important; /* ↑% moves image DOWN */
  background-repeat: no-repeat;
  transform: translateZ(0);
}

/* Overlay + smooth fade into the page background */
.hero-landing.quiz-hero .hero-overlay{
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8,12,20,.88) 0%,
      rgba(8,12,20,.70) 35%,
      rgba(8,12,20,.38) 65%,
      rgba(8,12,20,.20) 85%,
      rgba(8,12,20,0) 100%);
}
.hero-landing.quiz-hero .hero-overlay::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:150px;
  background:linear-gradient(to bottom, rgba(11,15,26,0) 0%, var(--page-bg) 100%);
}

/* Dark site background */
.quiz-body{ background: var(--page-bg); }

/* Card sits under hero with tasteful overlap (adjust - value to move card up/down) */
.quiz-main{
  position: relative; z-index: 1;
  padding-top: calc(var(--hero-h) - 140px);
}

/* Center all sections and unify widths */
.quiz-main > .container{ display:flex; flex-direction:column; align-items:center; }
.quiz-card{ max-width:900px; width:100%; margin:1rem auto; }

/* Safety: ensure step toggling is reliable */
.q-step{ display:none; } .q-step.is-active{ display:block; }








/* === HERO TUNE (lower image + stronger fade, remove seam) === */
:root { --page-bg:#0b0f1a; }

/* Taller hero so we can position the image lower without cropping */
.hero-landing.quiz-hero{
  --hero-h: 56vh;                 /* try 54–60vh */
  position: relative !important;
  height: var(--hero-h) !important;
  min-height: 360px;
  z-index: 0;

  /* Extra anti-seam: fade the whole hero container itself */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0) 100%);
}

/* Background image layer */
.hero-landing.quiz-hero .hero-bg{
  position: absolute; inset: 0;
  background-image: var(--hero, url('./images/hero-sleep.jpg')) !important;
  background-size: cover !important;
  background-position: center var(--hero-pos, 78%) !important; /* ↑% = move image DOWN */
  background-repeat: no-repeat;
  transform: translateZ(0);
}

/* Dark overlay (heavier top) + longer bottom fade */
.hero-landing.quiz-hero .hero-overlay{
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(8,12,20,.92) 0%,
      rgba(8,12,20,.78) 32%,
      rgba(8,12,20,.48) 60%,
      rgba(8,12,20,.28) 78%,
      rgba(8,12,20,0) 100%);
}
.hero-landing.quiz-hero .hero-overlay::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:220px; /* longer fade */
  background:linear-gradient(to bottom, rgba(11,15,26,0) 0%, var(--page-bg) 100%);
}

/* Page background */
.quiz-body{ background: var(--page-bg); }

/* Card overlap tuned for new hero height */
.quiz-main{
  position: relative; z-index: 1;
  /* If the card is too low, increase the negative value (e.g., -180px). Too high? move toward -120px. */
  padding-top: calc(var(--hero-h) - 160px);
}

/* Centering + safety (unchanged) */
.quiz-main > .container{ display:flex; flex-direction:column; align-items:center; }
.quiz-card{ max-width:900px; width:100%; margin:1rem auto; }
.q-step{ display:none; } .q-step.is-active{ display:block; }







/* ================================
   QUIZ & RESULT PAGES — FINAL OVERRIDES
   (safe: does NOT affect the landing page)
   ======================================= */

/* Dark site background for quiz/result only */
.quiz-body{ background:#0b0f1a !important; color:#fff; }

/* Hero container on quiz/result pages */
.hero.hero-landing.quiz-hero{
  --hero-h: 58vh;                     /* 54–62vh: overall hero height */
  position: relative !important;
  height: var(--hero-h) !important;
  min-height: 360px !important;
  z-index: 0 !important;

  /* cancel any global .hero min-height and add anti-seam mask */
  min-height: 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%) !important;
          mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%) !important;
}

/* Background image layer — LOWER the image */
.hero.hero-landing.quiz-hero .hero-bg{
  position: absolute !important; inset: 0 !important;
  background-image: var(--hero, url('./images/hero-sleep.jpg')) !important;
  background-size: cover !important;
  background-position: center 82% !important;  /* ↑ y% = move image DOWN (try 80–86%) */
  background-repeat: no-repeat !important;
  transform: translateZ(0) !important;
}

/* Strong overlay + long bottom fade (removes visible line) */
.hero.hero-landing.quiz-hero .hero-overlay{
  position: absolute !important; inset: 0 !important; pointer-events: none !important;
  background:
    linear-gradient(to bottom,
      rgba(8,12,20,.94) 0%,
      rgba(8,12,20,.80) 32%,
      rgba(8,12,20,.52) 60%,
      rgba(8,12,20,.30) 78%,
      rgba(8,12,20,0) 100%) !important;
}
.hero.hero-landing.quiz-hero .hero-overlay::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:260px !important;
  background:linear-gradient(to bottom, rgba(11,15,26,0) 0%, #0b0f1a 100%) !important;
}

/* Put the quiz/result card under the hero with a nice overlap */
.quiz-main{
  position: relative !important;
  z-index: 1 !important;
  padding-top: calc(var(--hero-h) - 190px) !important;
  /* TUNE:
     - make the -190px more negative (e.g. -210px) to move the card UP
     - make it less negative (e.g. -150px) to move it DOWN */
}

/* Center content + unify widths on these pages */
.quiz-main > .container{ display:flex; flex-direction:column; align-items:center; }
.quiz-card{ max-width:900px; width:100%; margin:1rem auto; }

/* Step visibility safety */
.q-step{ display:none; } .q-step.is-active{ display:block; }

/* Optional: slight fade-in of each step (polish) */
.q-step{ opacity:0; transition:opacity .28s ease; }
.q-step.is-active{ opacity:1; }







/* =========================================
   QUIZ + RESULT PAGES — FIX (safe for home)
   ========================================= */
.quiz-body{
  /* Define once so BOTH the hero and .quiz-main can read it */
  --hero-h: 56vh;             /* tweak 54–62vh */
  --hero-pos-y: 82%;          /* higher % = image lower (80–86% sweet spot) */
  --page-bg: #0b0f1a;

  background: var(--page-bg) !important;
  color:#fff;
}

/* Kill the old absolute hero and full-screen min-height */
.hero.hero-landing.quiz-hero{
  position: relative !important;
  inset: auto !important;                 /* overrides old .quiz-hero inset:0 */
  min-height: 0 !important;               /* cancels .hero 100svh */
  height: var(--hero-h) !important;
  z-index: 0 !important;

  /* Anti-seam: fade the whole hero container */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%) !important;
          mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%) !important;
}

/* Background image — LOWER it */
.hero.hero-landing.quiz-hero .hero-bg{
  position: absolute !important; inset: 0 !important;
  background-image: var(--hero, url('./images/hero-sleep.jpg')) !important;
  background-size: cover !important;
  background-position: center var(--hero-pos-y) !important;
  background-repeat: no-repeat !important;
  transform: translateZ(0) !important;
}

/* Dark overlay + long bottom fade (no visible line) */
.hero.hero-landing.quiz-hero .hero-overlay{
  position: absolute !important; inset: 0 !important; pointer-events: none !important;
  background:
    linear-gradient(to bottom,
      rgba(8,12,20,.94) 0%,
      rgba(8,12,20,.80) 32%,
      rgba(8,12,20,.52) 60%,
      rgba(8,12,20,.30) 78%,
      rgba(8,12,20,0) 100%) !important;
}
.hero.hero-landing.quiz-hero .hero-overlay::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:260px !important;
  background: linear-gradient(to bottom, rgba(11,15,26,0) 0%, var(--page-bg) 100%) !important;
}

/* Pull the card UP with proper overlap (variable now resolves) */
.quiz-main{
  position: relative !important; z-index: 1 !important;
  padding-top: calc(var(--hero-h) - 180px) !important;
  /* ↑ More negative (e.g. -200px) = higher card; less negative = lower card */
}

/* Keep widths/centering consistent */
.quiz-main > .container{ display:flex; flex-direction:column; align-items:center; }
.quiz-card{ max-width:900px; width:100%; margin:1rem auto; }

/* Step visibility + polish */
.q-step{ display:none; opacity:0; transition:opacity .28s ease; }
.q-step.is-active{ display:block; opacity:1; }






/* ==== QUIZ + RESULT FIX (safe for homepage) ==== */

/* 1) Define shared vars where BOTH hero and .quiz-main can read them */
.quiz-body{
  --hero-h: 56vh;          /* overall hero height; try 54–62vh */
  --hero-pos-y: 82%;       /* higher % = image sits lower (80–86% sweet spot) */
  --page-bg:#0b0f1a;
  background:var(--page-bg) !important;
  color:#fff;
}

/* 2) Neutralize old absolute hero + global 100svh min-height */
.hero.hero-landing.quiz-hero{
  position:relative !important;
  inset:auto !important;                 /* kills .quiz-hero { inset:0 } */
  min-height:0 !important;               /* cancels .hero { min-height:100svh } */
  height:var(--hero-h) !important;
  z-index:0 !important;

  /* anti-seam fade on the whole hero container */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%) !important;
          mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%) !important;
}

/* 3) Lower the image and keep it crisp */
.hero.hero-landing.quiz-hero .hero-bg{
  position:absolute !important; inset:0 !important;
  background-image:var(--hero, url('./images/hero-sleep.jpg')) !important;
  background-size:cover !important;
  background-position:center var(--hero-pos-y) !important;  /* uses the var above */
  background-repeat:no-repeat !important;
  transform:translateZ(0) !important;
}

/* 4) Strong overlay + long bottom fade (no visible line) */
.hero.hero-landing.quiz-hero .hero-overlay{
  position:absolute !important; inset:0 !important; pointer-events:none !important;
  background:linear-gradient(to bottom,
    rgba(8,12,20,.94) 0%,
    rgba(8,12,20,.80) 32%,
    rgba(8,12,20,.52) 60%,
    rgba(8,12,20,.30) 78%,
    rgba(8,12,20,0) 100%) !important;
}
.hero.hero-landing.quiz-hero .hero-overlay::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:260px !important;
  background:linear-gradient(to bottom, rgba(11,15,26,0) 0%, var(--page-bg) 100%) !important;
}

/* 5) Pull the card up using the shared height var */
.quiz-main{
  position:relative !important; z-index:1 !important;
  padding-top:calc(var(--hero-h) - 180px) !important;
  /* ↑ Use -200px to lift more; -150px to lower */
}

/* 6) Keep widths/centering */
.quiz-main > .container{ display:flex; flex-direction:column; align-items:center; }
.quiz-card{ max-width:900px; width:100%; margin:1rem auto; }

/* 7) Step visibility safety + polish */
.q-step{ display:none; opacity:0; transition:opacity .28s ease; }
.q-step.is-active{ display:block; opacity:1; }






/* ===== QUIZ + RESULT: final, minimal overrides ===== */
.quiz-body{
  --page-bg:#0b0f1a;
  --hero-h:58vh;          /* overall hero height */
  --hero-pos-y:86%;       /* y-position of the image (bigger = lower) */
  background:var(--page-bg) !important;
  color:#fff;
}

.hero.hero-landing.quiz-hero{
  position:relative !important;
  min-height:0 !important;                 /* cancels global 100svh hero */
  height:var(--hero-h) !important;
  z-index:0 !important;
  /* anti-seam mask on the whole hero */
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%) !important;
          mask-image:linear-gradient(to bottom,#000 0%,#000 78%,transparent 100%) !important;
}

.hero.hero-landing.quiz-hero .hero-bg{
  position:absolute !important; inset:0 !important;
  background-image:var(--hero) !important;
  background-size:cover !important;
  background-position:center var(--hero-pos-y) !important; /* uses the var above */
  background-repeat:no-repeat !important;
  transform:translateZ(0) !important;
}

.hero.hero-landing.quiz-hero .hero-overlay{
  position:absolute !important; inset:0 !important; pointer-events:none !important;
  background:linear-gradient(to bottom,
    rgba(8,12,20,.94) 0%,
    rgba(8,12,20,.80) 32%,
    rgba(8,12,20,.52) 60%,
    rgba(8,12,20,.30) 78%,
    rgba(8,12,20,0) 100%) !important;
}
.hero.hero-landing.quiz-hero .hero-overlay::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:300px !important; /* stronger fade */
  background:linear-gradient(to bottom, rgba(11,15,26,0) 0%, var(--page-bg) 100%) !important;
}

.quiz-main{
  position:relative !important; z-index:1 !important;
  padding-top:calc(var(--hero-h) - 200px) !important; /* pull card UP; -210 = higher, -150 = lower */
}



/* ——— NUKE ANY BOX/BLUE TINT AROUND THE QUIZ ——— */
.quiz-main .container,
.quiz-card,
.quiz-card .card,
.quiz-card .panel,
.quiz-card .box,
.quiz-main .container > * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
}

/* kill pseudo-elements some frameworks use for card chrome */
.quiz-main .container::before,
.quiz-main .container::after,
.quiz-card::before,
.quiz-card::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ensure steps themselves don’t draw a panel */
.q-step,
.q-step::before,
.q-step::after,
form {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* keep options clean (only a thin keyline); remove any global fills */
.q-options,
.q-opt {
  background: transparent !important;
  box-shadow: none !important;
}

/* footer/section wrappers sometimes add a dark-blue block; remove it */
.section, .section--dark, .wrapper, .container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* if a focus ring is showing as a big blue outline, tame it */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}