/* ==========================================================================
   Added Daylight — Design System
   Typography: Space Grotesk (display) + Inter (body)
   ========================================================================== */

:root{
  /* --- Surfaces & neutrals (dark ramp, neutral-to-warm to sit with the gold) --- */
  --bg:            #0A0A0A;
  --bg-raised:     #0F0F0E;
  --surface:       #141413;
  --surface-2:     #1B1B19;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.18);

  /* --- Text --- */
  --text:          #EDECEA;
  --muted:         #90908A;
  --on-gold:       #0A0A0A;

  /* --- Brand accent --- */
  --gold:          #D4AA00;
  --gold-light:    #EFC63F;
  --gold-dim:      rgba(212,170,0,.28);

  /* --- Type --- */
  --display:'Space Grotesk',Arial,Helvetica,sans-serif;
  --body:'Inter',Arial,Helvetica,sans-serif;

  --fs-kicker: .72rem;
  --fs-small:  .92rem;
  --fs-body:   1.05rem;
  --fs-h3:     1.5rem;
  --fs-h2:     clamp(2rem, 1.2rem + 2.4vw, 3.2rem);
  --fs-h1:     clamp(2.4rem, 1rem + 4.4vw, 4.7rem);

  /* --- Space (8px rhythm) --- */
  --space-1:.5rem;  --space-2:1rem;   --space-3:1.5rem;
  --space-4:2rem;   --space-6:3rem;   --space-8:4rem;
  --space-12:6rem;  --space-16:8rem;
  --section:8.5rem;

  --page:1280px;
  --gutter:3rem;
  --radius:4px;
  --radius-lg:10px;
  --ease:.25s cubic-bezier(.2,.6,.3,1);
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.wrap{max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--section)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--on-gold);padding:.75rem 1.25rem;
}
.skip-link:focus{left:1rem;top:1rem}

:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}

/* ===== Shared type ===== */
.kicker{
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--display);font-size:var(--fs-kicker);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.kicker::before{content:"";width:42px;height:1px;background:var(--gold);flex:none}

h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;line-height:1.06}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:500;letter-spacing:-.02em;line-height:1.2}

.section-head{margin-bottom:var(--space-8)}
.section-head .kicker{margin-bottom:var(--space-3)}

/* ===== Buttons ===== */
.btn{
  display:inline-block;font-family:var(--display);font-size:.88rem;font-weight:500;
  padding:.95rem 1.8rem;border-radius:var(--radius);white-space:nowrap;
  transition:background var(--ease),transform var(--ease);
}
.btn-primary{background:var(--gold);color:var(--on-gold)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--gold-light);transform:translateY(-2px)}
.btn-large{font-size:1.05rem;padding:1.2rem 2.6rem}

/* ===== Header ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background var(--ease),border-color var(--ease),backdrop-filter var(--ease);
}
.site-header.is-scrolled{
  background:rgba(10,10,10,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.header-inner{
  max-width:var(--page);margin-inline:auto;
  padding:1.25rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
}
.brand{display:flex;align-items:center;gap:.75rem;flex:none}
.brand-mark{height:30px;width:auto}
.brand-name{
  font-family:var(--display);font-weight:500;font-size:1.02rem;
  letter-spacing:-.01em;color:var(--text);white-space:nowrap;
}
.site-nav{display:flex;gap:var(--space-4)}
.site-nav a{
  font-family:var(--display);font-size:.92rem;font-weight:500;color:var(--muted);
  transition:color var(--ease);
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--gold)}

/* ===== Hero ===== */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding-block:9rem 7rem;overflow:hidden;
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 50%,black,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 30% 50%,black,transparent 75%);
}
.hero-mark{
  position:absolute;right:-2vw;top:50%;transform:translateY(-50%);
  width:38vw;max-width:520px;opacity:.07;pointer-events:none;
}
.hero-inner{position:relative;z-index:2;max-width:900px;width:100%}
.hero .kicker{margin-bottom:var(--space-4)}
.hero h1{font-size:var(--fs-h1);font-weight:700;line-height:1.04;letter-spacing:-.035em}
.hero h1 span{color:var(--gold)}
.hero-deck{
  margin-top:var(--space-4);max-width:52ch;color:var(--muted);
  line-height:1.75;padding-left:1.4rem;border-left:2px solid var(--line-strong);
}
.hero-actions{
  margin-top:var(--space-6);
  display:flex;align-items:center;gap:var(--space-3) var(--space-4);flex-wrap:wrap;
}
.hero-note{font-size:.86rem;color:var(--muted);max-width:34ch}

.scroll-cue{
  position:absolute;bottom:2.4rem;left:var(--gutter);z-index:2;
  display:flex;align-items:center;gap:.9rem;
  font-family:var(--display);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.scroll-cue span{width:52px;height:1px;background:linear-gradient(90deg,var(--line-strong),transparent)}

/* ===== Intro video =====
   Markup is currently pulled from index.html pending a new video; kept here so
   restoring snippets/video-section.html needs no CSS work. */
.intro-video{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-6);
}
.video-frame{
  width:100%;max-width:960px;aspect-ratio:16/9;
  background:#000;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.video-frame video{width:100%;height:100%;object-fit:cover}

.cta-box{
  display:block;text-align:center;
  background:var(--gold);color:var(--on-gold);
  padding:2rem 3rem;border-radius:var(--radius-lg);
  transition:background var(--ease),transform var(--ease);
}
.cta-box:hover,.cta-box:focus-visible{background:var(--gold-light);transform:translateY(-2px)}
.cta-box-main{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,1rem + 1.8vw,2.25rem);line-height:1.1;letter-spacing:-.03em;
}
.cta-box-sub{
  display:block;margin-top:.5rem;font-size:.98rem;
  color:rgba(10,10,10,.78);max-width:32ch;margin-inline:auto;
}

/* ===== Pain points carousel ===== */
.pain-points{padding-inline:0;overflow:hidden}
.pain-points .section-head{margin-bottom:var(--space-6)}

.carousel{--card-w:min(620px,78vw)}
.carousel-stage{position:relative}
.carousel-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent);
}
.carousel-track{
  display:flex;align-items:stretch;gap:var(--space-3);
  will-change:transform;
  transition:transform .5s cubic-bezier(.3,.7,.2,1);
}
.carousel-track.no-anim{transition:none}

.pain-card{
  flex:0 0 auto;
  width:var(--card-w);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:2.75rem;
  display:flex;flex-direction:column;gap:var(--space-2);
  opacity:.32;
  transition:opacity var(--ease),border-color var(--ease),background var(--ease);
}
.pain-card.is-active{opacity:1;border-color:var(--line-strong);background:var(--surface-2)}
.pain-card h3{margin-bottom:.4rem}
.pain-card p{color:var(--muted)}
.pain-lead{
  font-family:var(--display);font-size:.78rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  margin-top:var(--space-2);
}
.pain-card ul{display:flex;flex-direction:column;gap:.6rem}
.pain-card li{position:relative;padding-left:1.5rem;color:var(--text);font-size:.98rem}
.pain-card li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:var(--gold);
}

.carousel-controls{
  margin-top:var(--space-6);
  display:flex;align-items:center;justify-content:center;
}
.carousel-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;flex:none;
  display:grid;place-items:center;
  background:rgba(10,10,10,.6);backdrop-filter:blur(6px);
  border:1px solid var(--line-strong);border-radius:50%;
  color:var(--text);cursor:pointer;
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
/* flank the centered card, not the window */
.carousel-prev{left:calc(50% - var(--card-w) / 2 - 4.5rem)}
.carousel-next{right:calc(50% - var(--card-w) / 2 - 4.5rem)}
.carousel-arrow svg{width:20px;height:20px}
.carousel-arrow:hover,.carousel-arrow:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.carousel-dots{display:flex;align-items:center;gap:.6rem}
.carousel-dots button{
  width:28px;height:3px;padding:0;border:none;border-radius:2px;
  background:var(--line-strong);cursor:pointer;transition:background var(--ease);
}
.carousel-dots button.is-active{background:var(--gold)}

/* ===== Our Model ===== */
.model-intro{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:var(--space-6);align-items:start;
  padding-bottom:var(--space-6);margin-bottom:var(--space-6);
  border-bottom:1px solid var(--line);
}
.model-intro p{color:var(--muted)}
.model-emphasis{
  font-family:var(--display);font-size:1.5rem;font-weight:700;
  letter-spacing:-.02em;line-height:1.2;color:var(--text)!important;
}
.model-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.model-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:2rem;
  display:flex;flex-direction:column;gap:.9rem;
  transition:border-color var(--ease),background var(--ease),transform var(--ease);
}
.model-card:hover{border-color:var(--gold-dim);background:var(--surface-2);transform:translateY(-3px)}
.model-card h3::before{
  content:"";display:block;width:28px;height:2px;background:var(--gold);margin-bottom:1rem;
}
.model-card p{color:var(--muted);font-size:.98rem}

/* ===== What to Expect — horizontal sequence ===== */
.process-head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-6);align-items:end;
  padding-bottom:var(--space-4);border-bottom:1px solid var(--line-strong);
}
.process-head p{color:var(--muted)}

.track{position:relative;padding-top:3.5rem}
.track-line{
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--gold-dim),var(--line-strong) 60%,var(--line));
  color:var(--muted);
}
.track-arrow{position:absolute;right:-2px;top:50%;transform:translateY(-50%);width:12px;height:12px}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-3)}
.step{position:relative;padding-right:var(--space-2)}
.step::before{
  content:"";position:absolute;top:-3.5rem;left:0;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 5px var(--bg),0 0 18px rgba(212,170,0,.55);
}
.step h3{font-size:1.2rem;margin-bottom:.6rem}
.step p{font-size:.94rem;color:var(--muted);line-height:1.65}

.process-note{
  margin-top:var(--space-8);padding-left:1.4rem;
  border-left:2px solid var(--gold);max-width:66ch;
}

/* ===== Bottom CTA ===== */
.bottom-cta{
  background:
    radial-gradient(ellipse 60% 120% at 50% 100%,rgba(212,170,0,.12),transparent 70%),
    var(--bg-raised);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.bottom-cta-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.bottom-cta h2{max-width:22ch}
.bottom-cta h2 span{color:var(--gold)}

/* ===== Footer ===== */
.site-footer{padding-block:var(--space-8)}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;
}
.footer-contact{display:flex;align-items:center;gap:.75rem;font-size:var(--fs-small)}
.footer-contact a{color:var(--muted);transition:color var(--ease)}
.footer-contact a:hover{color:var(--gold)}
.footer-contact span{color:var(--line-strong)}
.footer-legal{
  display:flex;align-items:center;gap:1.25rem;
  font-size:.84rem;color:var(--muted);width:100%;
  padding-top:var(--space-3);border-top:1px solid var(--line);
}
.footer-legal a{transition:color var(--ease)}
.footer-legal a:hover{color:var(--gold)}

/* ===== Legal page ===== */
.legal-page{padding-block:calc(var(--section) + 3rem) var(--section)}
.legal-page-inner{max-width:70ch;display:flex;flex-direction:column;gap:1.25rem}
.legal-page h1{font-size:clamp(2rem,1.2rem + 2.6vw,3rem);font-weight:700}
.legal-page h2{font-size:1.35rem;font-weight:500;margin-top:var(--space-3)}
.legal-page p{color:var(--muted)}
.legal-page a{color:var(--gold)}
.legal-updated{font-size:var(--fs-small);color:var(--muted)}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr);gap:var(--space-6) var(--space-4)}
  .track{padding-top:0}
  .track-line{display:none}
  .step{padding-left:1.75rem}
  .step::before{top:.55rem;left:0;transform:none}
  .model-cards{grid-template-columns:1fr;gap:var(--space-2)}
  .model-intro{grid-template-columns:1fr;gap:var(--space-3)}
  .process-head{grid-template-columns:1fr;gap:var(--space-2);align-items:start}
}

@media (max-width:768px){
  :root{--gutter:1.5rem;--section:5.5rem}
  .site-nav{display:none}
  .header-inner{padding-block:.9rem}
  .brand-mark{height:26px}
  .brand-name{font-size:.95rem}
  .header-cta{font-size:.8rem;padding:.7rem 1.1rem}
  .hero{padding-block:8rem 6rem;min-height:auto}
  .hero-mark{opacity:.35;right:-28vw;width:80vw}
  .scroll-cue{left:var(--gutter)}
  .carousel{--card-w:86vw}
  .carousel-prev{left:.25rem}
  .carousel-next{right:.25rem}
  .carousel-arrow{width:42px;height:42px}
  .pain-card{padding:2rem}
  .cta-box{padding:1.75rem 1.5rem}
  .steps{grid-template-columns:1fr;gap:var(--space-4)}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .footer-legal{flex-direction:column;align-items:flex-start;gap:.5rem}
}