/* ============================================================================
   Kashi Keefe — UNIVERSAL BRAND BLUEPRINT  (link this on every page)
   <link rel="stylesheet" href="/brand.css">
   One source of truth: Houdini era palette (2026-06-28).
   Plum-black base · violet + gold + emerald/mint accents · dark-glass aesthetic.
   ========================================================================== */
:root{
  /* base — plum-black, never flat black */
  --obsidian:#15101C; --base:#15101C; --panel:#1E1726; --panel2:#1B1426;
  /* accents — Houdini era: gold filigree + violet secondary + emerald/mint */
  --gold:#D4AF37;      /* filigree gold — premium CTAs / text accents */
  --warm-gold:#F1C75A; /* warm gold — CTA button fill */
  --emerald:#1E7A4D;   /* deep emerald */
  --mint:#86EFAC;      /* mint — borders / success / kicker labels */
  --violet:#8A5CFF;    /* violet — secondary accent */
  /* compat aliases (pages that still use var(--ember)/var(--magenta)) */
  --ember:#F1C75A; --magenta:#86EFAC;
  /* text */
  --bone:#F4EFEA; --muted:#C5BDD6; --dim:#9089A0; --hair:#2C2235;
  /* the ONE light band — pricing / guarantee / FAQ / checkout only */
  --light:#F7F4EF; --ink:#1A1320; --ink-muted:#6B6460; --light-hair:rgba(26,19,32,.12);
  /* type */
  --serif:'Fraunces',Georgia,serif; --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Inter',system-ui,sans-serif;
  /* signature gradient — violet > gold > emerald */
  --grad:linear-gradient(110deg,var(--violet),var(--gold) 58%,var(--emerald));
}

/* reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);color:var(--bone);background:var(--base);line-height:1.65;overflow-x:hidden}
/* dark-glass radial glow — overridden by inline body::before on light pages */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse 80% 50% at 15% -5%, rgba(138,92,255,.13) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 85% 5%,  rgba(212,175,55,.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 50% 90%, rgba(30,122,77,.07)  0%, transparent 55%)}
a{color:inherit;text-decoration:none}

/* layout */
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}

/* mono labels / eyebrows / kickers */
.eyebrow,.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint)}

/* buttons — ONE style; each page sets the real href */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:16px;
  padding:16px 30px;border-radius:40px;transition:transform .15s,box-shadow .25s,filter .2s;cursor:pointer;border:none;text-align:center}
.btn-primary{color:var(--ink);background:linear-gradient(110deg,var(--warm-gold),var(--gold));box-shadow:0 14px 40px rgba(212,175,55,.30)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 18px 52px rgba(212,175,55,.40)}
.btn-ghost{color:var(--bone);background:var(--violet);border:1px solid var(--violet);font-weight:700}
.btn-ghost:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 14px 38px rgba(138,92,255,.34)}
.btn-block{width:100%;justify-content:center}

/* nav pills */
.ghost{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);padding:8px 12px;border:1px solid var(--hair);border-radius:30px;transition:.25s}
.ghost:hover{color:var(--gold);border-color:rgba(212,175,55,.4)}

/* scroll-progress hairline */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;transform-origin:0 50%;transform:scaleX(0);
  background:var(--grad);box-shadow:0 0 12px rgba(138,92,255,.5)}

/* reveal-on-scroll primitive */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

/* full-bleed hero background video helper (drop a loop into /video/) */
.has-herobg{position:relative;isolation:isolate}
.hero-bg{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;
  object-fit:cover;z-index:-1;opacity:.55;pointer-events:none}
.hero-scrim{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 28%, transparent, rgba(21,16,28,.55) 72%, var(--base))}

/* THE light band — wrap pricing/guarantee/FAQ in <section class="lightband"> */
.lightband{background:var(--light);color:var(--ink)}
.lightband .muted,.lightband .pricing-note{color:var(--ink-muted)}
.lightband .btn-ghost{color:var(--ink);border-color:var(--light-hair)}
.lightband h1,.lightband h2,.lightband h3{color:var(--ink)}

/* accessibility: reduced motion kills all motion + the hero video */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;transform:none!important}
  .hero-bg{display:none!important}
  .progress{display:none!important}
}