/* ============================================
   Help Gerald Sleep — design tokens
   ============================================ */
:root{
  --night-900:#12192F;
  --night-700:#1E2C4F;
  --night-600:#28375F;
  --moon-50:#FBF7ED;
  --moon-100:#F6F1E4;
  --amber-500:#E9A23B;
  --amber-300:#F3C374;
  --asphalt-600:#3D4454;
  --asphalt-800:#252A34;
  --signal-red:#C1502E;

  --display:'Fraunces', serif;
  --body:'Inter', system-ui, sans-serif;
  --mono:'IBM Plex Mono', monospace;

  --radius:14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--asphalt-800);
  background:var(--moon-50);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber-300);
  margin:0 0 0.75rem;
}
.eyebrow-dark{color:var(--amber-500);}

h1,h2{font-family:var(--display);font-weight:600;margin:0;}

.btn{
  display:inline-block;
  font-family:var(--body);
  font-weight:600;
  text-decoration:none;
  padding:0.85rem 1.7rem;
  border-radius:999px;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-amber{
  background:var(--amber-500);
  color:var(--night-900);
  box-shadow:0 6px 20px rgba(233,162,59,0.35);
}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(233,162,59,0.45);}
.btn-large{padding:1rem 2.4rem;font-size:1.05rem;}

/* ============================================
   Top band: hero + counter, side by side
   ============================================ */
.top-band{
  position:relative;
  overflow:hidden;
  background:radial-gradient(120% 140% at 50% -10%, var(--night-600) 0%, var(--night-900) 60%);
  padding:4rem 1.5rem;
  color:var(--moon-50);
}
.sky{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(251,247,237,0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 15%, rgba(251,247,237,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 8%, rgba(251,247,237,0.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 55%, rgba(251,247,237,0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 25% 60%, rgba(251,247,237,0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 45%, rgba(251,247,237,0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 5%, rgba(251,247,237,0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 30%, rgba(251,247,237,0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 35%, rgba(251,247,237,0.28) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 70%, rgba(251,247,237,0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 78%, rgba(251,247,237,0.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 88%, rgba(251,247,237,0.25) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 10%, rgba(251,247,237,0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 50%, rgba(251,247,237,0.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 82%, rgba(251,247,237,0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 40%, rgba(251,247,237,0.32) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 92%, rgba(251,247,237,0.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 92%, rgba(251,247,237,0.22) 50%, transparent 51%);
  opacity:0.9;
}
.top-band-inner{
  position:relative;
  max-width:1080px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.25rem;
  text-align:center;
}
@media(min-width:860px){
  .top-band-inner{
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    gap:1.75rem;
    text-align:left;
  }
  .hero-col{flex:1;}
  .counter-col{flex:0.85;}
}
.hero-col{max-width:480px;}
.mark-wrap{display:flex;justify-content:center;margin-bottom:0.5rem;}
@media(min-width:860px){
  .mark-wrap{justify-content:flex-start;}
}
.gerald-scene{position:relative;width:350px;height:350px;}
.car-track{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;}.gerald-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  z-index:2;
  pointer-events:none;
}

.car-track .car-zoom{animation:zoom 3.2s ease-in-out infinite;}
@keyframes zoom{
  0%{transform:translateX(-340px);opacity:0;}
  20%{opacity:1;}
  55%{transform:translateX(40px);opacity:1;}
  85%{transform:translateX(340px);opacity:0;}
  100%{transform:translateX(340px);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .car-track .car-zoom{animation:none;}
}

.hero-col h1{font-size:clamp(2.3rem,6vw,3.4rem);margin-bottom:1rem;}
.tagline{
  font-style:italic;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--moon-100);
  opacity:0.9;
  margin:0 0 2rem;
}
@media(max-width:859px){
  .tagline{max-width:480px;margin:0 auto 2rem;}
}

/* ============================================
   Counter column
   ============================================ */
.counter-col{
  position:relative;
  text-align:center;
  padding:3rem 3rem;
  background:rgba(251,247,237,0.05);
  border:1px solid rgba(251,247,237,0.12);
  border-radius:24px;
  overflow:hidden;
  width:100%;
  max-width:500px;
}
.counter-glow{
  position:absolute;top:-25%;left:50%;transform:translateX(-50%);
  width:420px;height:420px;
  background:radial-gradient(circle, rgba(243,195,116,0.4) 0%, transparent 70%);
}
.counter-eyebrow{
  position:relative;
  font-family:var(--mono);
  font-size:0.85rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber-300);
  margin:0 0 0.75rem;
}
.counter-number{
  position:relative;
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(4.5rem,16vw,7.5rem);
  line-height:1;
  margin:0;
  letter-spacing:-0.02em;
}
.counter-label{
  position:relative;
  margin:1rem auto 0;
  max-width:320px;
  color:var(--moon-100);
  opacity:0.9;
  font-size:1.05rem;
  line-height:1.5;
}

.counter-col .btn{margin-top:1.75rem;}
.story{padding:5rem 1.5rem;max-width:1080px;margin:0 auto;}
.story-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start;}
@media(min-width:860px){
  .story-grid{grid-template-columns:1.05fr 0.95fr;gap:3.5rem;}
}
.story-text h2{font-size:clamp(1.6rem,3.4vw,2.1rem);margin-bottom:1.2rem;line-height:1.25;}
.story-text p{line-height:1.75;margin:0 0 1.1rem;color:var(--asphalt-600);}
.story-text p:last-child{margin-bottom:0;}

.video-frame{
  background:var(--asphalt-800);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 20px 40px -20px rgba(18,25,47,0.4);
}
.video-frame-bar{
  display:flex;align-items:center;gap:6px;
  padding:0.7rem 0.9rem;
  background:#1B1F29;
}
.dot{width:8px;height:8px;border-radius:50%;background:#4A5064;}
.video-frame-label{
  margin-left:0.6rem;
  font-family:var(--mono);
  font-size:0.7rem;
  color:#8A90A3;
  letter-spacing:0.04em;
}
.video-embed{position:relative;padding-top:56.25%;}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-caption{
  font-size:0.85rem;
  color:var(--asphalt-600);
  opacity:0.75;
  margin:0.75rem 0 0;
  text-align:center;
}

/* ============================================
   Research
   ============================================ */
.research{
  background:var(--moon-100);
  padding:5rem 1.5rem;
  text-align:center;
}
.research h2{
  font-size:clamp(1.7rem,3.6vw,2.3rem);
  max-width:640px;
  margin:0 auto 1rem;
  line-height:1.25;
}
.research-intro{
  max-width:640px;
  margin:0 auto 2.8rem;
  color:var(--asphalt-600);
  line-height:1.7;
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1.25rem;
  max-width:1000px;
  margin:0 auto 2.5rem;
  text-align:left;
}
.stat-card{
  background:var(--moon-50);
  border:1px solid rgba(61,68,84,0.1);
  border-radius:var(--radius);
  padding:1.6rem 1.5rem;
}
.stat-number{
  font-family:var(--mono);
  font-weight:600;
  font-size:1.9rem;
  color:var(--signal-red);
  margin:0 0 0.3rem;
}
.stat-label{
  font-weight:600;
  font-size:0.92rem;
  margin:0 0 0.6rem;
  color:var(--asphalt-800);
}
.stat-detail{
  font-size:0.87rem;
  line-height:1.55;
  color:var(--asphalt-600);
  margin:0;
}
.paper-link{
  display:inline-block;
  font-weight:600;
  text-decoration:none;
  border-bottom:2px solid var(--amber-500);
  padding-bottom:2px;
}

/* ============================================
   Support CTA
   ============================================ */
.support{
  background:var(--night-900);
  color:var(--moon-50);
  text-align:center;
  padding:5.5rem 1.5rem;
}
.support h2{font-size:clamp(1.8rem,4vw,2.4rem);margin-bottom:1rem;}
.support-copy{
  max-width:480px;
  margin:0 auto 2rem;
  color:var(--moon-100);
  opacity:0.85;
  line-height:1.7;
}
.support-note{
  margin:1.25rem 0 0;
  font-size:0.85rem;
  color:var(--moon-100);
  opacity:0.6;
}

/* ============================================
   Sticky CTA (mobile canvassing aid)
   ============================================ */
.sticky-cta{
  position:fixed;
  right:1rem;
  bottom:1rem;
  background:var(--amber-500);
  color:var(--night-900);
  font-family:var(--body);
  font-weight:600;
  font-size:0.9rem;
  text-decoration:none;
  padding:0.75rem 1.3rem;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(18,25,47,0.25);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
  z-index:50;
}
.sticky-cta.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background:var(--night-900);
  color:var(--moon-100);
  opacity:0.6;
  text-align:center;
  font-size:0.8rem;
  line-height:1.7;
  padding:1.5rem 1.5rem 2.5rem;
}
.site-footer p{margin:0.2rem 0;}

:focus-visible{
  outline:3px solid var(--amber-500);
  outline-offset:3px;
}