/* ──────────────────────────────────────────────────────────────
   Quantum Leap Playbook — microsite shared styles
─────────────────────────────────────────────────────────────── */

/* ── FONTS ────────────────────────────────────────────────── */
@font-face { font-family:'Inter Tight'; src:url('fonts/InterTight-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter Tight'; src:url('fonts/InterTight-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter Tight'; src:url('fonts/InterTight-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter Tight'; src:url('fonts/InterTight-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter Tight'; src:url('fonts/InterTight-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --blurple-deepest:#19063A;
  --blurple-deep:#250D53;
  --blurple-mid:#501CD2;
  --creme:#F9F7F6;
  --creme-150:#F3EFED;
  --white:#FFFFFF;
  --gray:#5C5766;
  --lilac-100:#ECEAF1;
  --lilac-200:#D9D6E5;
  --lilac-300:#B4ADCA;
  --periwinkle-100:#F3F5FF;
  --periwinkle-200:#E1E7FE;
  --success-bg:#E4F2EB;
  --success-fg:#1E5A3B;
  --info-fg:#1D3FB5;
  --border:#E7E4EE;
  --border-strong:#D2CDE0;
  --font:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;
  --shadow-sm:0 1px 2px rgba(31,17,72,.04), 0 2px 8px rgba(31,17,72,.05);
  --shadow-md:0 6px 16px -4px rgba(31,17,72,.12), 0 3px 6px rgba(31,17,72,.06);
  --shadow-lg:0 24px 48px -12px rgba(31,17,72,.22);
  --ease:cubic-bezier(.2,.8,.2,1);
  --maxw:1180px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font); font-weight:400; color:var(--gray);
  background:var(--white); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* ── TYPE PRIMITIVES ──────────────────────────────────────── */
.eyebrow {
  font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blurple-mid); margin-bottom:18px;
}
h1,h2,h3 { color:var(--blurple-deep); letter-spacing:-0.025em; line-height:1.08; }
.lead { font-size:18px; line-height:1.6; color:var(--gray); }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font); font-weight:600; font-size:15px; letter-spacing:-0.01em;
  padding:13px 22px; border-radius:10px; border:1.5px solid transparent;
  cursor:pointer; transition:all .2s var(--ease); white-space:nowrap;
}
.btn-primary { background:var(--blurple-mid); color:#fff; }
.btn-primary:hover { background:#4316b0; transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(80,28,210,.5); }
.btn-ghost { background:transparent; color:var(--blurple-deep); border-color:var(--border-strong); }
.btn-ghost:hover { background:var(--creme); border-color:var(--lilac-300); }
.btn .arr { transition:transform .2s var(--ease); }
.btn:hover .arr { transform:translateX(3px); }

/* ── NAV ──────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled, .nav.solid {
  background:rgba(249,247,246,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border); box-shadow:0 2px 14px rgba(31,17,72,.04);
}
.nav-inner { max-width:var(--maxw); margin:0 auto; padding:0 32px; height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo { height:26px; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a.link {
  font-weight:500; font-size:14.5px; color:var(--blurple-deep); letter-spacing:-0.01em;
  position:relative; padding:4px 0; transition:color .2s var(--ease); white-space:nowrap;
}
.nav-links a.link::after {
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--blurple-mid); transform:scaleX(0); transform-origin:left; transition:transform .2s var(--ease);
}
.nav-links a.link:hover { color:var(--blurple-mid); }
.nav-links a.link.active { color:var(--blurple-mid); }
.nav-links a.link.active::after { transform:scaleX(1); }
@media (max-width:880px){
  .nav-inner { gap:14px; }
  .nav-links { gap:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .nav-links::-webkit-scrollbar { display:none; }
  .nav-links a.link { font-size:13.5px; }
  .nav-cta { display:none; }
}

/* ── HERO ─────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; background:var(--creme); padding:150px 0 96px; }
.hero-grid { position:absolute; inset:0; pointer-events:none; }
.hero .sq { position:absolute; border-radius:6px; opacity:.5; }
.hero-inner { position:relative; max-width:900px; }
.hero h1 { font-size:clamp(38px,5.4vw,68px); font-weight:600; letter-spacing:-0.035em; line-height:1.02; margin-bottom:28px; }
.hero h1 .accent { color:var(--blurple-mid); }
.hero-sub { font-size:clamp(17px,2vw,20px); line-height:1.55; max-width:640px; color:var(--gray); margin-bottom:36px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
.hero-meta {
  margin-top:46px; padding-top:22px; border-top:1px solid var(--lilac-200);
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--blurple-deep);
}
.hero-meta .dot { color:var(--lilac-300); }
.hero-meta .muted { color:var(--lilac-300); }

/* section rhythm */
section { scroll-margin-top:80px; }
.band { padding:96px 0; }
.sec-head { max-width:680px; margin-bottom:52px; }
.sec-head h2 { font-size:clamp(30px,4vw,44px); font-weight:600; margin-bottom:18px; }
.sec-head p { font-size:18px; }

/* ── OVERVIEW STATEMENT ───────────────────────────────────── */
.overview { background:var(--white); }
.statement {
  font-size:clamp(26px,3.4vw,40px); font-weight:600; letter-spacing:-0.025em; line-height:1.14;
  color:var(--blurple-deep); max-width:920px; margin-bottom:30px;
}
.statement .accent { color:var(--blurple-mid); }
.overview-body { display:grid; grid-template-columns:1fr 1fr; gap:28px 56px; max-width:920px; }
.overview-body p { font-size:16px; line-height:1.7; }
.overview-body strong { color:var(--blurple-deep); font-weight:600; }
@media (max-width:720px){ .overview-body { grid-template-columns:1fr; } }

/* ── STATS ────────────────────────────────────────────────── */
.stats { margin-top:64px; display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--creme); }
.stat { padding:28px 22px; border-right:1px solid var(--border); }
.stat:last-child { border-right:none; }
.stat .v { font-weight:600; font-size:23px; letter-spacing:-0.02em; color:var(--blurple-mid); line-height:1.05; margin-bottom:10px; }
.stat .l { font-size:12.5px; line-height:1.45; color:var(--gray); }
@media (max-width:900px){ .stats { grid-template-columns:repeat(2,1fr); } .stat:nth-child(2){border-right:none;} .stat{border-bottom:1px solid var(--border);} }
@media (max-width:520px){ .stats { grid-template-columns:1fr; } .stat{border-right:none;} }

/* ── FUNCTION CARDS ───────────────────────────────────────── */
.functions { background:var(--creme); }
.fn-cards { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:760px){ .fn-cards { grid-template-columns:1fr; } }
.fn-card {
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:20px;
  padding:34px 34px 30px; cursor:pointer; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.fn-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.fn-card .num { font-weight:600; font-size:13px; letter-spacing:.06em; color:var(--blurple-mid); margin-bottom:18px; }
.fn-card h3 { font-size:27px; font-weight:600; margin-bottom:14px; }
.fn-card .blurb { font-size:14.5px; line-height:1.6; color:var(--gray); margin-bottom:20px; flex:1; }
.fn-card .teams { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.chip { font-size:11.5px; font-weight:500; color:var(--blurple-deep); background:var(--creme-150); border:1px solid var(--border); border-radius:999px; padding:4px 11px; }
.fn-card .foot { display:flex; align-items:center; justify-content:space-between; padding-top:18px; border-top:1px solid var(--lilac-100); }
.fn-card .count { font-size:13px; font-weight:500; color:var(--gray); }
.fn-card .go { font-weight:600; font-size:14px; color:var(--blurple-mid); display:inline-flex; align-items:center; gap:6px; }
.fn-card .go .arr { transition:transform .2s var(--ease); }
.fn-card:hover .go .arr { transform:translateX(4px); }
.fn-card .cardglyph { position:absolute; right:-30px; top:-30px; width:130px; opacity:.05; pointer-events:none; }

/* ── FUNCTION DETAIL (function pages) ─────────────────────── */
.fn-banner { position:relative; overflow:hidden; background:var(--blurple-deepest); color:#fff; padding:118px 0 70px; }
.fn-banner .wrap { position:relative; z-index:1; }
.fn-banner .glyph { position:absolute; right:-30px; top:-20px; width:300px; opacity:.10; z-index:0; }
.fn-banner .crumb { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--lilac-300); margin-bottom:24px; }
.fn-banner .crumb a:hover { color:#fff; }
.fn-banner .lbl { font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--lilac-300); margin-bottom:14px; }
.fn-banner h1 { color:#fff; font-size:clamp(38px,6vw,62px); font-weight:600; letter-spacing:-0.03em; margin-bottom:20px; }
.fn-banner .teams { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.fn-banner .chip { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#EDEAF6; }
.fn-banner .desc { color:rgba(255,255,255,.78); font-size:18px; line-height:1.6; max-width:720px; }

/* framework block (R&D) */
.framework { background:var(--creme); padding:84px 0; border-bottom:1px solid var(--border); }
.framework .eyebrow { color:var(--blurple-mid); }
.framework h2 { font-size:clamp(28px,3.6vw,40px); font-weight:600; margin-bottom:16px; }
.framework .fr-intro { font-size:17px; line-height:1.62; max-width:720px; margin-bottom:36px; }
.modes3 { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:30px; }
@media (max-width:780px){ .modes3 { grid-template-columns:1fr; } }
.mode3 { background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px 26px 22px; box-shadow:var(--shadow-sm); }
.mode3 .mtag { display:inline-block; font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--blurple-mid); background:var(--periwinkle-100); border:1px solid var(--periwinkle-200); border-radius:999px; padding:5px 13px; margin-bottom:16px; }
.mode3 p { font-size:14.5px; line-height:1.6; color:var(--gray); margin-bottom:16px; }
.mode3 .role { font-size:12.5px; font-weight:600; color:var(--blurple-deep); padding-top:14px; border-top:1px solid var(--lilac-100); letter-spacing:.01em; }
.fr-note { font-size:15.5px; line-height:1.66; color:var(--gray); max-width:860px; padding:22px 26px; background:#fff; border:1px solid var(--border); border-left:3px solid var(--blurple-mid); border-radius:12px; }
.fr-note strong { color:var(--blurple-deep); font-weight:600; }

.subteam { padding:62px 0; border-bottom:1px solid var(--border); }
.subteam:last-child { border-bottom:none; }
.subteam .head { max-width:720px; margin-bottom:34px; }
.subteam .head h2 { font-size:clamp(24px,3vw,32px); font-weight:600; margin:8px 0 14px; }
.subteam .head p { font-size:16.5px; line-height:1.62; }

.cases { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px){ .cases { grid-template-columns:1fr; } }
.case {
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px 28px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.case:hover { box-shadow:var(--shadow-md); border-color:var(--border-strong); transform:translateY(-2px); }
.case .top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.case h3 { font-size:18px; font-weight:600; color:var(--blurple-deep); letter-spacing:-0.01em; line-height:1.25; }
.case p { font-size:14.5px; line-height:1.62; color:var(--gray); }
.pill { flex:none; font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; border-radius:999px; padding:4px 10px; white-space:nowrap; margin-top:2px; }
.pill-live { background:var(--success-bg); color:var(--success-fg); }
.pill-dev { background:var(--periwinkle-200); color:var(--info-fg); }

/* ── CONTINUE EXPLORING (function pages) ──────────────────── */
.explore { background:var(--creme); padding:84px 0; }
.explore .eyebrow { color:var(--blurple-mid); }
.explore h2 { font-size:clamp(26px,3.4vw,36px); font-weight:600; margin-bottom:36px; }
.explore-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:780px){ .explore-grid { grid-template-columns:1fr; } }
.explore-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px 26px 22px; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.explore-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.explore-card .num { font-weight:600; font-size:12px; letter-spacing:.06em; color:var(--blurple-mid); margin-bottom:12px; }
.explore-card h3 { font-size:21px; font-weight:600; margin-bottom:10px; }
.explore-card p { font-size:13.5px; line-height:1.55; color:var(--gray); margin-bottom:16px; flex:1; }
.explore-card .go { font-weight:600; font-size:13.5px; color:var(--blurple-mid); display:inline-flex; align-items:center; gap:6px; }
.explore-card .go .arr { transition:transform .2s var(--ease); }
.explore-card:hover .go .arr { transform:translateX(4px); }

/* ── PLATFORM (dark) ──────────────────────────────────────── */
.platform { position:relative; overflow:hidden; background:var(--blurple-deepest); color:#fff; padding:104px 0; }
.platform .glyph { position:absolute; left:-60px; bottom:-60px; width:340px; opacity:.07; }
.platform .wrap { position:relative; z-index:1; }
.platform .eyebrow { color:var(--lilac-300); }
.platform h2 { color:#fff; font-size:clamp(30px,4vw,46px); font-weight:600; max-width:760px; margin-bottom:24px; }
.platform .ptext { color:rgba(255,255,255,.76); font-size:17px; line-height:1.65; max-width:680px; margin-bottom:18px; }
.platform .ptext strong { color:#fff; font-weight:600; }
.modes { display:flex; flex-wrap:wrap; gap:12px; margin:34px 0 30px; }
.mode { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:16px 20px; min-width:150px; }
.mode .mt { font-weight:600; font-size:15px; color:#fff; margin-bottom:3px; }
.mode .md { font-size:12.5px; color:var(--lilac-300); }
.conn-label { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--lilac-300); margin:30px 0 14px; }
.connectors { display:flex; flex-wrap:wrap; gap:8px; }
.connectors .chip { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#EDEAF6; }
.compliance { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.compliance .badge { font-size:12px; font-weight:600; letter-spacing:.04em; color:#fff; background:rgba(80,28,210,.45); border:1px solid rgba(180,150,255,.4); border-radius:8px; padding:6px 12px; }

/* ── CLOSING CTA ──────────────────────────────────────────── */
.closing { background:var(--creme); padding:104px 0; }
.closing h2 { font-size:clamp(30px,4vw,46px); font-weight:600; max-width:760px; margin-bottom:22px; }
.closing .ctext { font-size:17px; line-height:1.65; max-width:680px; margin-bottom:16px; }
.closing .ctext strong { color:var(--blurple-deep); font-weight:600; }
.closing-cta { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

/* CTA box (bottom of every page) */
.btn-light { background:#fff; color:var(--blurple-deep); }
.btn-light:hover { transform:translateY(-1px); box-shadow:0 12px 26px -10px rgba(0,0,0,.45); }
.cta-box {
  position:relative; overflow:hidden;
  background:var(--blurple-deepest); color:#fff;
  border-radius:22px; padding:42px 46px; max-width:780px; margin-top:30px;
  box-shadow:var(--shadow-lg);
}
.cta-box .glyph { position:absolute; right:-26px; bottom:-30px; width:170px; opacity:.09; pointer-events:none; }
.cta-box .label { font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--lilac-300); margin-bottom:16px; }
.cta-box p { font-size:18px; line-height:1.6; color:rgba(255,255,255,.82); margin-bottom:28px; max-width:640px; }
.cta-box .btn-light { font-size:15.5px; padding:14px 24px; }
@media (max-width:560px){ .cta-box { padding:32px 26px; } .cta-box .btn-light { width:100%; justify-content:center; } }

/* ── FOOTER ───────────────────────────────────────────────── */
footer { background:var(--blurple-deepest); color:#fff; padding:46px 0; }
.foot-inner { max-width:var(--maxw); margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot-inner img { height:24px; }
.foot-inner .meta { font-size:12.5px; color:var(--lilac-300); letter-spacing:.02em; }

/* ── REVEAL ANIMATION ─────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} }