/* ═══════════════════════════════════════════════════════════
   Life Intelligence Group — Design System v3 "Cinema"
   Restraint. One accent. Big type. The brand's four colours
   live in the ribbon mark — the interface stays monochrome.
   ═══════════════════════════════════════════════════════════ */

:root {
  --accent: #3E9EE8;            /* single interface accent (brand blue, lifted) */
  --accent-2: #25B4B6;          /* secondary, used only in the hero gradient */
  --red: #E8505B; --teal: #1B7C7D; --yellow: #FBC72E; --navy: #17457A; /* logo only */

  --bg: #000000;
  --bg-2: #0A0D12;              /* raised section */
  --card: #101319;              /* card surface */
  --card-2: #14181F;
  --stroke: rgba(255,255,255,.07);
  --stroke-2: rgba(255,255,255,.12);

  --white: #F5F7FA;
  --grey: #9BA3AE;              /* body on dark */
  --grey-2: #6E7681;            /* muted */
  --grey-3: #3D434B;            /* ghost text for scrub */

  --grad-hero: linear-gradient(100deg, #5AB8F5, #3E9EE8 45%, #25B4B6);
  --radius: 24px;
  --font-head: "Space Grotesk", sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, sans-serif;
  --ease: cubic-bezier(.22,.8,.24,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-body); color:var(--white); background:var(--bg);
  line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:600; line-height:1.08; letter-spacing:-.025em; }
a { color:var(--accent); text-decoration:none; }
img { max-width:100%; }
.wrap { max-width:1200px; margin:0 auto; padding:0 32px; position:relative; z-index:2; }
::selection { background:rgba(62,158,232,.3); }

/* ── Scroll progress — hairline ── */
.progress { position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:1000; opacity:.9; }

/* ── Ambient light (replaces loud orbs) ── */
.orb { position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; will-change:transform; }
.orb.o1 { width:700px; height:700px; background:radial-gradient(circle, rgba(28,80,140,.34), transparent 65%); top:-260px; right:-160px; }
.orb.o2 { width:520px; height:520px; background:radial-gradient(circle, rgba(24,96,100,.25), transparent 65%); bottom:-200px; left:-140px; }
.orb.o3 { display:none; }

/* ── Nav ── */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; transition:background .4s var(--ease), border-color .4s; border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(0,0,0,.65); backdrop-filter:blur(22px) saturate(1.6); border-bottom-color:var(--stroke); }
.nav-inner { max-width:1200px; margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; }
.logo { font-family:var(--font-head); font-weight:600; font-size:1.08rem; color:#fff; display:flex; align-items:center; gap:12px; letter-spacing:-.01em; }
.logo .mark { width:34px; height:37px; display:grid; place-items:center; flex:0 0 34px; }
.logo .mark img { width:100%; height:100%; object-fit:contain; }
.logo sup { font-size:.5em; color:var(--grey-2); margin-left:3px; position:relative; top:-.35em; font-family:var(--font-body); }
.logo span.dim { color:var(--grey-2); }
.nav-links { display:flex; gap:34px; align-items:center; }
.nav-links a { color:var(--grey); font-size:.9rem; font-weight:500; transition:color .25s; }
.nav-links a:hover, .nav-links a.active { color:#fff; }
.nav-cta {
  background:rgba(255,255,255,.1); border:1px solid var(--stroke-2); color:#fff!important;
  padding:10px 20px; border-radius:99px; font-weight:500!important; backdrop-filter:blur(10px);
  transition:background .25s, border-color .25s;
}
.nav-cta:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.25); }
.burger { display:none; background:none; border:none; cursor:pointer; width:40px; height:40px; z-index:10; }
.burger span { display:block; width:22px; height:1.5px; background:#fff; margin:6px auto; transition:.3s; }

/* ── Buttons ── */
.btn {
  display:inline-block; font-family:var(--font-body); font-weight:500; font-size:1.02rem;
  padding:15px 34px; border-radius:99px; transition:all .3s var(--ease); cursor:pointer; border:none;
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:#57ACEE; transform:scale(1.03); box-shadow:0 10px 40px rgba(62,158,232,.35); }
.btn-ghost { border:1px solid var(--stroke-2); color:#fff; margin-left:14px; background:rgba(255,255,255,.04); backdrop-filter:blur(8px); }
.btn-ghost:hover { background:rgba(255,255,255,.1); transform:scale(1.03); }
.btn-dark { background:#fff; color:#000; }
.btn-dark:hover { transform:scale(1.03); box-shadow:0 10px 40px rgba(255,255,255,.15); }

/* ── Kicker ── */
.kicker {
  display:inline-block; font-family:var(--font-body); font-weight:600; font-size:.75rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--grey-2); margin-bottom:26px;
}

/* ── Hero ── */
.hero { position:relative; background:var(--bg); overflow:hidden; min-height:100vh; display:flex; align-items:center; }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.55; }
.hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:220px; background:linear-gradient(transparent, var(--bg)); z-index:1; pointer-events:none; }
.hero-inner { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:190px 32px 150px; width:100%; }
.hero h1 { font-size:clamp(3rem,7vw,5.6rem); font-weight:600; max-width:980px; color:#fff; }
.hero h1 em {
  font-style:normal; background:var(--grad-hero); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shimmer 7s ease-in-out infinite alternate;
}
@keyframes shimmer { to { background-position:120% center; } }
.hero .sub { margin:34px 0 48px; font-size:1.3rem; color:var(--grey); max-width:600px; font-weight:400; line-height:1.6; }
.hero-badges { margin-top:96px; display:flex; gap:56px; flex-wrap:wrap; }
.hero-badges div { font-size:.85rem; color:var(--grey-2); }
.hero-badges strong { display:block; font-family:var(--font-head); font-size:1.7rem; color:#fff; font-weight:600; margin-bottom:2px; letter-spacing:-.02em; }

/* ── Cinematic scrub chapters ── */
.chapter { position:relative; padding:26vh 0; }
.chapter .ch-kicker { font-family:var(--font-body); font-weight:600; font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color:var(--grey-2); margin-bottom:34px; }
.scrub { font-family:var(--font-head); font-weight:600; font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.22; letter-spacing:-.02em; max-width:1000px; }
.scrub .w { color:var(--grey-3); transition:color .35s linear; }
.scrub .w.lit { color:var(--white); }
.scrub .w.accent.lit { color:var(--accent); }

/* ── Sections ── */
section { padding:130px 0; position:relative; }
section[id] { scroll-margin-top:90px; }   /* clears the fixed nav on anchor jumps */
section.dark { background:var(--bg-2); }
.section-head { max-width:820px; margin-bottom:70px; position:relative; z-index:2; }
.section-head h2 { font-size:clamp(2.1rem,4.2vw,3.4rem); margin-bottom:20px; color:#fff; }
.section-head p { color:var(--grey); font-size:1.18rem; max-width:640px; }
.center { text-align:center; margin-left:auto; margin-right:auto; }
.center p { margin-left:auto; margin-right:auto; }

/* ── Icons (inline SVG, injected) ── */
.icon { width:46px; height:46px; margin-bottom:26px; color:var(--accent); opacity:.95; }
.icon svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

/* ── Cards ── */
.grid { display:grid; gap:20px; position:relative; z-index:2; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }
.card, .pcard {
  position:relative; background:var(--card); border:1px solid var(--stroke);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .45s var(--ease), background .45s, border-color .45s;
}
.card::before, .pcard::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.045), transparent 46%);
}
.card:hover::before, .pcard:hover::before { opacity:1; }
.card { padding:42px 36px; }
.card:hover, .pcard:hover { transform:translateY(-6px); background:var(--card-2); border-color:var(--stroke-2); }
.card h3 { font-size:1.3rem; margin-bottom:12px; color:#fff; font-weight:600; }
.card p { color:var(--grey); font-size:.98rem; }

/* ── Friction (problem) section — editorial list, no boxes ── */
.friction { display:grid; grid-template-columns:1fr 1.2fr; gap:80px; align-items:start; }
.friction .sticky { position:sticky; top:140px; }
.friction-list { border-top:1px solid var(--stroke); }
.friction-item { display:flex; align-items:baseline; gap:28px; padding:30px 4px; border-bottom:1px solid var(--stroke); }
.friction-item .n { font-family:var(--font-head); font-size:.85rem; color:var(--grey-3); font-weight:600; min-width:32px; }
.friction-item .t { font-family:var(--font-head); font-size:clamp(1.25rem,2.2vw,1.7rem); font-weight:600; color:var(--grey-2); transition:color .5s var(--ease), transform .5s var(--ease); letter-spacing:-.02em; }
.friction-item.in .t { color:var(--white); }
.friction-item:hover .t { color:var(--accent); transform:translateX(6px); }
.friction-close { margin-top:44px; font-family:var(--font-head); font-weight:600; font-size:1.5rem; color:#fff; }
.friction-close span { color:var(--accent); }

/* ── Timeline ── */
.timeline { position:relative; margin-top:70px; z-index:2; }
.timeline::before { content:""; position:absolute; left:8px; top:6px; bottom:6px; width:1px; background:linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.04)); }
.t-item { position:relative; padding:0 0 66px 64px; }
.t-item:last-child { padding-bottom:0; }
.t-dot { position:absolute; left:2px; top:8px; width:13px; height:13px; border-radius:50%; background:var(--bg); border:1.5px solid var(--grey-2); transition:.5s; }
.t-item.in .t-dot { border-color:var(--accent); box-shadow:0 0 16px rgba(62,158,232,.6); background:var(--accent); }
.t-item .year { font-family:var(--font-head); font-weight:600; font-size:.85rem; letter-spacing:.24em; color:var(--grey-2); text-transform:uppercase; }
.t-item h3 { font-size:clamp(1.4rem,2.4vw,1.9rem); margin:12px 0 12px; color:#fff; letter-spacing:-.02em; }
.t-item p { color:var(--grey); max-width:620px; font-size:1.02rem; }

/* ── Products ── */
.product {
  border-radius:28px; padding:52px 44px; position:relative; overflow:hidden; color:#fff;
  min-height:400px; display:flex; flex-direction:column; border:1px solid var(--stroke);
  background:var(--card); transition:transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.product::before {
  content:""; position:absolute; width:520px; height:520px; border-radius:50%; left:50%; top:-340px; transform:translateX(-50%);
  filter:blur(70px); opacity:.5; transition:opacity .6s; pointer-events:none;
}
.p-appclick::before { background:radial-gradient(circle, rgba(23,69,122,.85), transparent 66%); }
.p-taskspur::before { background:radial-gradient(circle, rgba(27,124,125,.8), transparent 66%); }
.p-ari::before { background:radial-gradient(circle, rgba(120,40,52,.75), transparent 66%); }
.p-chatmoto::before { background:radial-gradient(circle, rgba(120,96,20,.7), transparent 66%); }
.product:hover { transform:translateY(-8px); border-color:var(--stroke-2); box-shadow:0 40px 90px rgba(0,0,0,.6); }
.product:hover::before { opacity:.85; }
.product .plogo { height:56px; width:auto; align-self:flex-start; margin-bottom:22px; position:relative; object-fit:contain; }
.product .plogo.lg { height:120px; margin-bottom:28px; }
.product h3 sup { font-size:.45em; color:rgba(255,255,255,.55); margin-left:2px; position:relative; top:-.5em; font-family:var(--font-body); }
.product .tag { font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:18px; font-weight:600; position:relative; }
.product h3 { font-size:2rem; margin-bottom:14px; position:relative; letter-spacing:-.02em; }
.product p { color:var(--grey); font-size:1rem; flex:1; position:relative; }
.product .plink { margin-top:28px; font-weight:500; color:#fff; position:relative; }
.product .plink::after { content:" →"; transition:.25s; display:inline-block; }
.product:hover .plink::after { transform:translateX(5px); }
.award-pill {
  display:inline-block; width:fit-content; background:rgba(255,255,255,.06); color:rgba(255,255,255,.75);
  border:1px solid var(--stroke-2); font-size:.78rem; padding:5px 15px; border-radius:99px;
  margin-bottom:18px; font-weight:500; position:relative;
}

/* ── Numbers — monumental ── */
.numbers { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; z-index:2; border-top:1px solid var(--stroke); }
.numbers > div { padding:52px 30px 46px; border-bottom:1px solid var(--stroke); border-right:1px solid var(--stroke); transition:background .4s; }
.numbers > div:nth-child(4n) { border-right:none; }
.numbers > div:hover { background:rgba(255,255,255,.025); }
.numbers strong { display:block; font-family:var(--font-head); font-size:clamp(2.2rem,3.6vw,3.2rem); font-weight:600; color:#fff; letter-spacing:-.03em; margin-bottom:6px; }
.numbers span { font-size:.9rem; color:var(--grey-2); }

/* ── Process — one line ── */
.process { display:flex; flex-wrap:wrap; gap:0; align-items:center; justify-content:center; margin-top:50px; position:relative; z-index:2; }
.process .step { font-family:var(--font-head); font-weight:600; font-size:clamp(1rem,1.8vw,1.3rem); color:var(--grey-2); padding:10px 0; transition:color .4s; letter-spacing:-.01em; }
.process .step.in { color:#fff; }
.process .arrow { color:var(--grey-3); margin:0 22px; font-weight:400; }
.process .step.forever { color:var(--accent); }

/* ── Difference ── */
.diff { display:grid; grid-template-columns:repeat(2,1fr); gap:0; position:relative; z-index:2; border-top:1px solid var(--stroke); border-left:1px solid var(--stroke); }
.diff .d { padding:52px 46px; border-bottom:1px solid var(--stroke); border-right:1px solid var(--stroke); background:transparent; transition:background .4s; position:relative; overflow:hidden; }
.diff .d:hover { background:rgba(255,255,255,.025); }
.diff .d::before { display:none; }
.diff .no { color:var(--grey-2); font-size:.95rem; }
.diff .yes { font-family:var(--font-head); font-weight:600; font-size:clamp(1.3rem,2.2vw,1.7rem); margin-top:10px; color:#fff; letter-spacing:-.02em; }

/* ── Portfolio ── */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:50px; position:relative; z-index:2; }
.filters button {
  font-family:var(--font-body); font-weight:500; font-size:.86rem; padding:9px 18px; border-radius:99px;
  border:1px solid transparent; background:transparent; color:var(--grey-2); cursor:pointer; transition:.25s;
}
.filters button:hover { color:#fff; }
.filters button.on { background:rgba(255,255,255,.09); border-color:var(--stroke-2); color:#fff; }
.pcard { padding:36px 32px; cursor:pointer; display:flex; flex-direction:column; }
.pcard .meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.pcard .meta span, .modal .meta span { font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:5px 13px; border-radius:99px; background:rgba(255,255,255,.05); border:1px solid var(--stroke); color:var(--grey); }
.pcard .meta .st.done, .modal .meta .st.done { color:var(--accent); }
.pcard h3 { font-size:1.22rem; margin-bottom:6px; color:#fff; }
.pcard .client { color:var(--grey-2); font-size:.88rem; margin-bottom:16px; }
.pcard .outcome { font-size:.94rem; flex:1; }
.pcard .outcome li { margin-left:18px; margin-bottom:5px; color:var(--grey); }
.pcard .stat { font-family:var(--font-head); font-weight:600; font-size:2rem; color:#fff; letter-spacing:-.02em; margin-bottom:2px; }
.pcard .statlabel { font-size:.85rem; color:var(--grey-2); margin-bottom:16px; }
.pcard .more { margin-top:18px; font-weight:500; font-size:.9rem; color:var(--accent); }

/* ── Modal ── */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.82); backdrop-filter:blur(14px); z-index:200; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:80px 20px; }
.modal-bg.open { display:flex; animation:fadeIn .35s; }
@keyframes fadeIn { from{opacity:0} }
.modal {
  background:var(--card); border:1px solid var(--stroke-2); border-radius:28px; max-width:780px; width:100%;
  padding:56px 54px; position:relative; box-shadow:0 50px 140px rgba(0,0,0,.8); animation:rise .5s var(--ease);
}
@keyframes rise { from{opacity:0; transform:translateY(36px)} }
.modal .x { position:absolute; top:22px; right:26px; background:rgba(255,255,255,.06); border:1px solid var(--stroke); border-radius:50%; width:38px; height:38px; font-size:1.25rem; cursor:pointer; color:var(--grey); transition:.25s; }
.modal .x:hover { color:#fff; background:rgba(255,255,255,.12); }
.modal h2 { font-size:1.85rem; margin:16px 0 6px; color:#fff; letter-spacing:-.02em; }
.modal .client { color:var(--grey-2); margin-bottom:26px; }
.modal .meta { display:flex; gap:8px; flex-wrap:wrap; }
.modal h4 { font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; margin:28px 0 10px; color:var(--accent); font-family:var(--font-body); font-weight:600; }
.modal p, .modal li { color:var(--grey); }
.modal ul { margin-left:20px; }
.modal ul li { margin-bottom:6px; }
.modal .tech { font-size:.94rem; }

/* ── Testimonials ── */
.testimonial { position:relative; padding:64px 0; border-top:1px solid var(--stroke); }
.testimonial:last-child { border-bottom:1px solid var(--stroke); }
.testimonial .qmark { font-family:var(--font-head); font-size:4rem; line-height:0; color:var(--accent); opacity:.55; display:block; margin-bottom:34px; }
.testimonial blockquote { font-family:var(--font-head); font-weight:500; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.55; color:var(--ink); max-width:900px; letter-spacing:-.01em; }
.testimonial.long blockquote { font-size:clamp(1rem,1.5vw,1.15rem); font-family:var(--font-body); font-weight:400; color:var(--grey); }
.testimonial .who { display:flex; align-items:center; gap:16px; margin-top:32px; }
.testimonial .who .avatar {
  width:52px; height:52px; border-radius:50%; flex:0 0 52px; object-fit:cover;
  border:1.5px solid var(--stroke-2); box-shadow:0 4px 18px rgba(0,0,0,.45);
}
.testimonial .who .name { font-family:var(--font-head); font-weight:600; color:#fff; }
.testimonial .who .role { font-size:.85rem; color:var(--grey-2); }

/* ── Legal pages (privacy, terms) ── */
.legal { max-width:780px; }
.legal h2 {
  font-size:1.45rem; color:#fff; margin:60px 0 16px; padding-top:34px;
  border-top:1px solid var(--stroke); letter-spacing:-.02em;
}
.legal h2:first-of-type { margin-top:0; padding-top:0; border-top:none; }
.legal h3 { font-size:1.05rem; color:#fff; margin:30px 0 10px; }
.legal p { color:var(--grey); margin-bottom:18px; }
.legal ul { margin:0 0 18px 22px; }
.legal li { color:var(--grey); margin-bottom:9px; }
.legal strong { color:var(--white); font-weight:600; }
.legal a { color:var(--accent); }
.legal .updated {
  display:inline-block; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey-2); border:1px solid var(--stroke); border-radius:99px;
  padding:7px 16px; margin-bottom:40px;
}
.legal .callout {
  background:var(--card); border:1px solid var(--stroke); border-left:2px solid var(--accent);
  border-radius:14px; padding:26px 28px; margin:0 0 44px;
}
.legal .callout p:last-child { margin-bottom:0; }

/* ── Marquee ── */
.tech-strip { position:relative; z-index:2; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq-track { display:flex; gap:52px; width:max-content; animation:mq 46s linear infinite; padding:6px 0; align-items:center; }
.tech-strip:hover .mq-track { animation-play-state:paused; }
@keyframes mq { to { transform:translateX(-50%); } }
.tech-strip span { font-family:var(--font-head); font-weight:600; font-size:1.25rem; white-space:nowrap; color:var(--grey-3); transition:color .3s; letter-spacing:-.01em; }
.tech-strip span:hover { color:var(--grey); }
.tech-strip:not(.mq) { display:flex; flex-wrap:wrap; gap:28px; justify-content:center; mask-image:none; }

/* ── CTA band ── */
.cta-band {
  position:relative; text-align:center; border-radius:32px; padding:110px 48px; overflow:hidden;
  background:radial-gradient(90% 130% at 50% -20%, #12283E 0%, #0A0D12 70%);
  border:1px solid var(--stroke); z-index:2;
}
.cta-band::after {
  content:""; position:absolute; width:640px; height:340px; left:50%; top:-200px; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(62,158,232,.22), transparent 65%); filter:blur(30px); pointer-events:none;
}
.cta-band h2 { font-size:clamp(2rem,4vw,3rem); margin-bottom:18px; color:#fff; position:relative; z-index:2; letter-spacing:-.02em; }
.cta-band p { color:var(--grey); margin-bottom:42px; font-size:1.15rem; position:relative; z-index:2; max-width:560px; margin-left:auto; margin-right:auto; }
.cta-band .btn { position:relative; z-index:2; }

/* ── Forms ── */
.form { display:grid; gap:18px; max-width:640px; }
.form label { font-weight:500; font-size:.9rem; display:block; margin-bottom:8px; color:#fff; }
.form input, .form select, .form textarea {
  width:100%; padding:15px 18px; border:1px solid var(--stroke-2); border-radius:14px;
  font-family:var(--font-body); font-size:1rem; background:rgba(255,255,255,.04); color:var(--white); transition:.25s;
}
.form select option { background:var(--card); }
.form input:focus, .form select:focus, .form textarea:focus { outline:none; border-color:var(--accent); background:rgba(255,255,255,.06); }
.form ::placeholder { color:var(--grey-3); }

/* ── Footer ── */
footer { background:var(--bg); border-top:1px solid var(--stroke); color:var(--grey-2); padding:90px 0 44px; font-size:.92rem; position:relative; }
.foot-grid { display:grid; grid-template-columns:1.5fr .85fr .85fr 1.15fr .85fr 1.2fr; gap:34px; margin-bottom:60px; position:relative; z-index:2; }
footer h4 { color:#fff; font-size:.9rem; margin-bottom:20px; font-family:var(--font-body); font-weight:600; }
footer a { color:var(--grey-2); display:block; margin-bottom:11px; transition:color .25s; }
footer a:hover { color:#fff; }
footer .logo { display:inline-flex; }
.foot-bottom { border-top:1px solid var(--stroke); padding-top:32px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:var(--grey-3); position:relative; z-index:2; }

/* ── Reveal ── */
.reveal { opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0s); }
.reveal.in { opacity:1; transform:none; }

/* ── Page hero ── */
.page-hero { background:var(--bg); color:#fff; padding:210px 0 110px; position:relative; overflow:hidden; }
.page-hero h1 { font-size:clamp(2.4rem,5vw,4rem); max-width:860px; letter-spacing:-.025em; }
.page-hero p { margin-top:24px; color:var(--grey); max-width:620px; font-size:1.18rem; }

/* ── Responsive ── */
@media (max-width:980px){
  .g3,.g4 { grid-template-columns:repeat(2,1fr); }
  .numbers { grid-template-columns:repeat(2,1fr); }
  .numbers > div:nth-child(2n) { border-right:none; }
  .foot-grid { grid-template-columns:1fr 1fr; }
  .friction { grid-template-columns:1fr; gap:40px; }
  .friction .sticky { position:static; }
}
@media (max-width:680px){
  .g2,.g3,.g4,.diff { grid-template-columns:1fr; }
  .nav-links { position:fixed; inset:0 0 auto 0; top:0; padding:110px 32px 44px; background:rgba(0,0,0,.96); backdrop-filter:blur(24px); flex-direction:column; align-items:flex-start; display:none; }
  .nav-links.open { display:flex; }
  .burger { display:block; }
  .btn-ghost { margin-left:0; margin-top:12px; }
  section { padding:86px 0; }
  .hero-inner { padding:150px 24px 100px; }
  .hero-badges { gap:32px; margin-top:64px; }
  .modal { padding:40px 28px; }
  .chapter { padding:18vh 0; }
}
@media (prefers-reduced-motion:reduce){
  *, .mq-track { animation:none!important; transition:none!important; }
}