/* ==========================================================================
   Better Human Now / Nick Knows — design tokens
   Layout conventions follow Relume's section architecture:
   eyebrow + heading + description header, consistent container/gutter
   scale, and predictable section rhythm (py-24/32/40).
   ========================================================================== */

:root{
  /* Better Human Now — dark, cinematic */
  --bhn-bg: #08080a;
  --bhn-bg-2: #101014;
  --bhn-ink: #f5f4f0;
  --bhn-ink-dim: #9a9aa4;
  --bhn-line: rgba(245,244,240,0.12);
  --bhn-accent: #7f77dd;
  --bhn-accent-2: #4a4470;

  /* Nick Knows — energetic, gen-Z */
  --nk-1: #ff5c5c;
  --nk-2: #7f77dd;
  --nk-3: #1d9e75;
  --nk-4: #fac775;
  --nk-ink: #12100e;
  --nk-bg: #fdf5f0;

  --container: 1240px;
  --gutter: clamp(24px, 6vw, 96px);
  --radius-lg: 24px;
  --radius-md: 14px;
  --ease: cubic-bezier(.16,1,.3,1);

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-sans: "General Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bhn-bg);
  color: var(--bhn-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section{ padding: clamp(72px, 10vw, 160px) 0; position:relative; }
.section-tight{ padding: clamp(48px, 6vw, 96px) 0; }

/* Relume-style section header: eyebrow / heading / description */
.section-head{
  max-width: 720px;
  margin-bottom: clamp(40px, 6vw, 72px);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bhn-accent);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background: currentColor;
}
h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
h1{ font-size: clamp(44px, 7vw, 92px); }
h2{ font-size: clamp(32px, 4.6vw, 58px); }
h3{ font-size: clamp(22px, 2.6vw, 30px); }
p{ line-height: 1.6; color: var(--bhn-ink-dim); margin: 0 0 16px; font-size: 17px; }
.lede{ font-size: clamp(17px, 1.6vw, 21px); max-width: 640px; }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform .4s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
  will-change: transform;
}
.btn-primary{ background: var(--bhn-ink); color: var(--bhn-bg); }
.btn-primary:hover{ transform: translateY(-2px); }
.btn-ghost{ border-color: var(--bhn-line); color: var(--bhn-ink); }
.btn-ghost:hover{ border-color: var(--bhn-ink); }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* ---------- Nav ---------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 20px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(8,8,10,0.85), rgba(8,8,10,0));
  transition: background .4s ease;
}
.nav-logo{ display:flex; flex-direction:column; line-height:1; }
.nav-logo b{ font-family: var(--font-display); font-size:18px; letter-spacing:-0.01em; }
.nav-logo span{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color: var(--bhn-ink-dim); margin-top:3px; }
.nav-links{ display:flex; gap:36px; font-size:14px; }
.nav-links a{ position:relative; color: var(--bhn-ink-dim); transition: color .3s ease; }
.nav-links a:hover{ color: var(--bhn-ink); }
.nav-cta{ font-size:13px; padding:11px 22px; }
.nav-menu-btn{ display:none; }

/* ---------- Hero ---------- */
.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  position: relative;
  padding-top: 120px;
}
#hero-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
}
/* Legibility scrim over the fractal so hero copy stays readable even
   when the shape brightens near the cursor. Sits above the canvas,
   below the text. */
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(105deg, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0.22) 42%, rgba(8,8,10,0) 66%);
  pointer-events:none;
}

.spline-wrap{
  position:absolute; inset:0; z-index:0; opacity:0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.spline-wrap.is-ready{ opacity: 1; pointer-events: auto; }
.hero .container{ position:relative; z-index:2; }
.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--bhn-ink-dim); margin-bottom: 28px;
  border: 1px solid var(--bhn-line); padding: 8px 16px; border-radius: 999px;
  width: fit-content;
}
.hero h1{ max-width: 15ch; overflow:hidden; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line span{ display:inline-block; transform: translateY(110%); }
.hero-sub{ max-width: 480px; margin: 24px 0 40px; }
.scroll-cue{
  position:absolute; bottom:40px; left: var(--gutter);
  display:flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--bhn-ink-dim);
  z-index:2;
}
.scroll-cue .stick{ width:1px; height:36px; background: linear-gradient(var(--bhn-ink-dim), transparent); }
.tilt-enable{
  position:absolute; bottom:40px; right: var(--gutter);
  z-index:2; padding:11px 20px; font-size:12px;
  background: rgba(8,8,10,0.4); backdrop-filter: blur(14px);
}
.tilt-enable[hidden]{ display:none; }

/* ---------- Pillars (Relume feature grid) ---------- */
.pillars-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--bhn-line);
  border: 1px solid var(--bhn-line);
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.pillar{
  background: var(--bhn-bg);
  padding: 40px 28px;
  min-width: 0;
  transition: background .4s ease;
}
.pillar:hover{ background: var(--bhn-bg-2); }
.pillar .num{ font-family: var(--font-display); font-size:13px; color: var(--bhn-accent); margin-bottom:24px; display:block; }
.pillar h3{ margin-bottom:10px; }
.pillar p{ font-size:14.5px; margin:0; }

/* ---------- Stats ---------- */
.stats-band{
  background: var(--bhn-bg-2);
  border-top: 1px solid var(--bhn-line);
  border-bottom: 1px solid var(--bhn-line);
}
.stats-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat{ min-width: 0; }
.stat b{
  font-family: var(--font-display); font-weight:500;
  font-size: clamp(40px, 5vw, 64px); display:block; letter-spacing:-0.02em;
}
.stat span{ font-size:13px; color: var(--bhn-ink-dim); letter-spacing:.04em; text-transform:uppercase; }

/* ---------- Transition band: BHN -> Nick Knows ---------- */
.morph{
  position:relative;
  padding: clamp(100px,14vw,200px) 0;
  text-align:center;
  overflow:hidden;
}
.morph h2{ max-width: 16ch; margin: 0 auto; }
.morph-bg{
  position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse at 50% 50%, var(--bhn-accent-2), var(--bhn-bg) 70%);
}
.morph .container{ position:relative; z-index:1; }

/* ---------- Nick Knows section ---------- */
.nk{
  background: var(--nk-bg);
  color: var(--nk-ink);
  position: relative;
}
.nk p{ color: #4a453f; }
.nk .eyebrow{ color: var(--nk-1); }
.nk .btn-primary{ background: var(--nk-ink); color: var(--nk-bg); }
.nk .btn-ghost{ border-color: rgba(18,16,14,0.2); color: var(--nk-ink); }
.nk .btn-ghost:hover{ border-color: var(--nk-ink); }

.marquee{
  border-top: 2px solid var(--nk-ink);
  border-bottom: 2px solid var(--nk-ink);
  overflow: hidden;
  padding: 22px 0;
  background: var(--nk-4);
}
.marquee-track{ display:flex; width: max-content; gap: 48px; will-change: transform; }
.marquee-track span{
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  white-space: nowrap;
  display:flex; align-items:center; gap:20px;
}
.marquee-track span::after{ content:"—"; opacity:.5; font-family: var(--font-sans); }

.nk-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.nk-card{
  border-radius: var(--radius-lg);
  padding: 32px;
  min-height: 260px;
  min-width: 0;
  display:flex; flex-direction:column; justify-content:flex-end;
  position: relative;
  overflow:hidden;
  transition: transform .5s var(--ease);
}
.nk-card:hover{ transform: translateY(-8px) rotate(-0.6deg); }
.nk-card h3{ color: #fff; position:relative; z-index:1; margin-bottom:6px; }
.nk-card p{ color: rgba(255,255,255,0.82); position:relative; z-index:1; margin:0; font-size:14px; }
.nk-card .tag{
  position:absolute; top:24px; left:24px; z-index:1;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background: rgba(255,255,255,0.16);
  padding:6px 12px; border-radius:999px;
}
.nk-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  opacity:.95;
}
.nk-card.c1::before{ background: linear-gradient(155deg, var(--nk-1), #b32e2e); }
.nk-card.c2::before{ background: linear-gradient(155deg, var(--nk-2), #453f8e); }
.nk-card.c3::before{ background: linear-gradient(155deg, var(--nk-3), #0f6e56); }

/* ---------- Testimonial ---------- */
.quote{
  max-width: 780px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.quote-attr{ margin-top:28px; display:flex; align-items:center; gap:14px; }
.quote-avatar{ width:44px; height:44px; border-radius:50%; background: var(--bhn-accent-2); }
.quote-attr b{ display:block; font-size:14px; }
.quote-attr span{ font-size:13px; color: var(--bhn-ink-dim); }

/* ---------- Final CTA ---------- */
.final-cta{
  text-align:center;
  border-top: 1px solid var(--bhn-line);
}
.final-cta h2{ max-width: 18ch; margin: 0 auto 32px; }
.final-cta .btn-row{ justify-content:center; }

/* ---------- Footer ---------- */
footer{
  border-top: 1px solid var(--bhn-line);
  padding: 64px 0 32px;
}
.footer-top{
  display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px;
  margin-bottom: 56px;
}
.footer-col h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--bhn-ink-dim); margin-bottom:18px; font-family: var(--font-sans); font-weight:600; }
.footer-col a{ display:block; font-size:14.5px; color: var(--bhn-ink-dim); margin-bottom:12px; transition: color .3s ease; }
.footer-col a:hover{ color: var(--bhn-ink); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--bhn-line);
  font-size:13px; color: var(--bhn-ink-dim);
}

/* ---------- Cursor ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background: var(--bhn-ink); pointer-events:none; z-index:9999;
  mix-blend-mode: difference;
  margin: -5px 0 0 -5px;
  transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease);
}
.cursor-dot.is-active{ width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* ---------- Reveal utility ---------- */
.reveal{ opacity:0; transform: translateY(28px); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nav-links{ display:none; }
  .pillars-grid{ grid-template-columns: repeat(2,1fr); }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap: 40px 24px; }
  .nk-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
  .pillars-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-top{ grid-template-columns: 1fr; gap:32px; }
  .cursor-dot{ display:none; }
  .tilt-enable{ bottom:auto; top:120px; right: var(--gutter); padding:9px 16px; }
}
@media (max-width: 480px){
  .stats-grid{ grid-template-columns: 1fr; gap: 32px; }
  .stat b{ font-size: clamp(36px, 12vw, 40px); }
  .nk-card{ padding: 24px; min-height: 220px; }
}