/* Lucas Popan — landing page system
   Colour and type from creative-folders/branding/marks/lp (locked 2026-10-15).
   Components 04, 05, 11, 13, 15, 17 carried over from coachtnf.com and recoloured under the LP rules. */

:root {
  --blue-50:#f2f5fc; --blue-100:#e1e9f8; --blue-200:#cad9f5; --blue-300:#a7c1f1; --blue-400:#79a0e9;
  --blue-500:#5483e1; --blue-600:#3569d4; --blue-700:#2658bf; --blue-800:#1c4394; --blue-900:#233f78; --blue-950:#182849;
  --charcoal:#2b2b2b; --charcoal-raised:#3a3a3a;
  --eggshell:#f4efe6; --eggshell-raised:#dcd6cb;

  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --radius-card:16px; --radius-tile:12px; --radius-pill:9999px;
  --ease-reveal:cubic-bezier(.2,.8,.2,1);
}

/* ---- Surfaces. Every component reads only these role tokens, so the rules live in one place. ----
   charcoal : eggshell type, blue-400 accents (both allowed)
   eggshell : charcoal type, blue-800 accents
   No blue surfaces on the site (DC, 2026-10-15). Blue is for components and buttons only.             */
.on-charcoal { --bg:var(--charcoal); --bg-raised:var(--charcoal-raised); --fg-rgb:244 239 230; --accent-rgb:121 160 233; --accent-ink:var(--charcoal); }
.on-eggshell { --bg:var(--eggshell); --bg-raised:var(--eggshell-raised); --fg-rgb:43 43 43;    --accent-rgb:28 67 148;   --accent-ink:var(--eggshell); }
.on-charcoal, .on-eggshell {
  --fg:rgb(var(--fg-rgb)); --fg-70:rgb(var(--fg-rgb)/.7); --fg-60:rgb(var(--fg-rgb)/.6); --fg-40:rgb(var(--fg-rgb)/.4);
  --accent:rgb(var(--accent-rgb)); --line:rgb(var(--fg-rgb)/.08); --line-strong:rgb(var(--fg-rgb)/.2);
  background:var(--bg); color:var(--fg);
}

/* ---- Base type ---- */
body { margin:0; font-family:var(--font-body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
.lp-display { font-family:var(--font-display); font-weight:900; line-height:.95; letter-spacing:-.02em; margin:0; }
.lp-display-xl { font-size:clamp(44px,8vw,96px); }
.lp-display-lg { font-size:clamp(32px,5vw,56px); }
.lp-display-md { font-size:clamp(24px,3vw,32px); }
.lp-tracked { font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.25em; text-transform:uppercase; }
.lp-lede { font-size:18px; color:var(--fg-60); max-width:52ch; }
.lp-small { font-size:13px; color:var(--fg-40); }

/* ---- Buttons ---- */
.lp-btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border:0; border-radius:var(--radius-pill); cursor:pointer;
  font:600 14px var(--font-body); background:var(--fg); color:var(--bg); transition:transform .2s; text-decoration:none; }
.lp-btn:hover { transform:scale(1.03); }
.lp-btn-accent { background:var(--accent); color:var(--accent-ink); }
.lp-btn-ghost { background:rgb(var(--fg-rgb)/.08); color:var(--fg-70); border:1px solid var(--line-strong); }
.lp-btn-ghost:hover { color:var(--fg); transform:none; border-color:rgb(var(--fg-rgb)/.4); }
.lp-btn-sm { padding:10px 20px; font:700 12px var(--font-display); letter-spacing:.02em; }

/* ---- 04 Grid background with centre glow ---- */
.lp-grid { position:relative; isolation:isolate; }
.lp-grid::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 50%, rgb(var(--accent-rgb)/.08) 0%, transparent 50%),
    linear-gradient(to right,  rgb(var(--fg-rgb)/.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--fg-rgb)/.03) 1px, transparent 1px);
  background-size:100% 100%, 50px 50px, 50px 50px; }
.lp-grid-fixed::before { position:fixed; height:120vh; }

/* ---- Video hero: the clip under charcoal with a blue-900 hue, grid on top ---- */
.lp-video-hero { position:relative; overflow:hidden; isolation:isolate; }
.lp-video-hero > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; }
.lp-video-hero > .lp-video-overlay { position:absolute; inset:0; z-index:-2; background:
  linear-gradient(to bottom, transparent 60%, var(--charcoal) 100%),
  linear-gradient(rgb(35 63 120 / .22), rgb(35 63 120 / .22)),
  linear-gradient(rgb(43 43 43 / .68), rgb(43 43 43 / .68)); }

/* ---- 05 Floating glass nav ---- */
.lp-nav { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1100px; margin:0 auto;
  background:rgb(var(--bg-rgb,43 43 43)/.6); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:12px 24px 12px 32px;
  box-shadow:0 25px 50px -12px rgb(var(--accent-rgb)/.08); }
.on-charcoal .lp-nav { --bg-rgb:43 43 43; }  .on-eggshell .lp-nav { --bg-rgb:244 239 230; }
.lp-nav-brand { display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; }
.lp-nav .lp-nav-brand svg { height:44px; width:auto; display:block; }
.lp-nav-brand span { font:700 12px var(--font-display); letter-spacing:.12em; line-height:1.1; white-space:nowrap; text-transform:uppercase; }
.lp-nav ul { display:flex; gap:36px; list-style:none; margin:0; padding:0; }
.lp-nav li a { font:600 12px var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-60); text-decoration:none; }
.lp-nav li a:hover { color:var(--fg); }
.lp-nav-wrap { position:sticky; top:16px; z-index:40; padding:0 16px; }
@media (max-width:720px) { .lp-nav ul { display:none; } .lp-nav { padding:8px 10px 8px 20px; } }

/* ---- 11 Feature card with icon tile ---- */
.lp-card { background:linear-gradient(180deg, rgb(var(--fg-rgb)/.05), rgb(var(--fg-rgb)/.02)); border:1px solid rgb(var(--fg-rgb)/.06);
  border-radius:var(--radius-card); padding:24px; transition:border-color .3s, background .3s; }
.lp-card:hover { border-color:rgb(var(--accent-rgb)/.35); background:linear-gradient(180deg, rgb(var(--fg-rgb)/.07), rgb(var(--fg-rgb)/.03)); }
.lp-tile { width:48px; height:48px; border-radius:var(--radius-tile); background:rgb(var(--accent-rgb)/.12); color:var(--accent);
  display:grid; place-items:center; margin-bottom:16px; transition:background .2s; }
.lp-card:hover .lp-tile { background:rgb(var(--accent-rgb)/.22); }
.lp-card h4 { margin:0 0 8px; font:700 20px var(--font-display); }
.lp-card p { margin:0; color:var(--fg-60); }

/* ---- 13 Numbered step card ---- */
.lp-step { display:flex; gap:24px; align-items:flex-start; padding:24px; border-radius:var(--radius-card);
  background:rgb(var(--fg-rgb)/.04); border:1px solid rgb(var(--fg-rgb)/.06); }
.lp-step-n { font:900 32px var(--font-display); color:rgb(var(--accent-rgb)/.4); line-height:1; min-width:48px; }
.lp-step .lp-tile { margin:12px 0 0; }
.lp-step h5 { margin:0 0 6px; font:700 22px var(--font-display); }
.lp-step p { margin:0; color:var(--fg-60); }

/* ---- 15 Testimonial card ---- */
.lp-quote { background:rgb(var(--fg-rgb)/.04); border:1px solid rgb(var(--fg-rgb)/.06); border-radius:var(--radius-card); padding:32px; }
.lp-stars { display:flex; gap:4px; color:var(--accent); margin-bottom:16px; letter-spacing:.1em; }
.lp-quote q { display:block; font-size:15px; margin-bottom:20px; quotes:'"' '"'; }
.lp-quote-who { display:flex; gap:12px; align-items:center; }
.lp-avatar { width:40px; height:40px; border-radius:var(--radius-pill); background:rgb(var(--accent-rgb)/.2); color:var(--accent);
  display:grid; place-items:center; font:700 13px var(--font-display); letter-spacing:.05em; }
.lp-quote-who b { display:block; font-size:14px; }
.lp-quote-who small { color:var(--fg-60); font-size:12px; }

/* ---- 17 Scroll reveal ---- */
.reveal { opacity:0; transform:translateY(30px) scale(.95); filter:blur(10px); transition:opacity .8s var(--ease-reveal), transform .8s var(--ease-reveal), filter .8s var(--ease-reveal); }
.reveal.active { opacity:1; transform:none; filter:blur(0); }
.reveal.delay-100 { transition-delay:.1s } .reveal.delay-200 { transition-delay:.2s } .reveal.delay-300 { transition-delay:.3s }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; filter:none; transition:none; } }

/* ---- Logos: inline SVG, coloured by currentColor ---- */
.lp-logo svg { display:block; height:100%; width:auto; }
.lp-logo path { fill:currentColor; }
.lp-plate { color:var(--fg); }
.lp-plate #plate { fill:var(--bg); }
.lp-plate #mark { fill:var(--fg); }