/* ============================================================
   Smart-Slate — Noomo-inspired edition
   Bright editorial canvas · gooey brand blobs · oversized type
   Fonts: Montserrat (display) · Inter (body) · JetBrains Mono (labels)
   ============================================================ */

:root{
  --paper:   #f4f1ea;
  --paper-2: #ebe7dc;
  --ink:     #0c0c12;
  --ink-2:   #2b2b34;
  --muted:   #6a6a76;
  --faint:   #9a9aa4;
  --line:    rgba(12,12,18,0.12);
  --line-2:  rgba(12,12,18,0.22);

  --red:     #e10600;
  --red-2:   #ff3b1f;
  --edu:     #3B6DFF;
  --tox:     #F5C518;
  --qur:     #0a6343;
  --qur-2:   #14b07a;

  --disp: 'Montserrat', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --ease:    cubic-bezier(.2,.7,.2,1);
  --ease-io: cubic-bezier(.16,1,.3,1);
  --maxw:    1440px;
  --pad:     clamp(24px, 5.5vw, 110px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; background:var(--paper); }
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--red); color:#fff; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.mono{ font-family:var(--mono); }
.tm{ font-size:0.42em; vertical-align:super; font-weight:600; }

.scroll-prog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:300;
  background:linear-gradient(90deg,var(--red),var(--tox),var(--qur),var(--edu)); }

/* ---------- Nav ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:200; display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad); transition:padding .4s var(--ease), background-color .4s, border-color .4s; border-bottom:1px solid transparent; mix-blend-mode:normal; }
.nav.scrolled{ background:rgba(244,241,234,0.8); backdrop-filter:blur(14px) saturate(150%); padding-block:13px; border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .badge{ width:34px; height:34px; border-radius:9px; background:var(--red); display:grid; place-items:center;
  font-family:var(--disp); font-weight:800; color:#fff; font-size:16px; letter-spacing:-0.03em; }
.brand .brand-logo{ width:42px; height:42px; border-radius:10px; object-fit:cover; background:#fff;
  box-shadow:0 2px 10px -3px rgba(12,12,18,0.25); }
.brand .wm{ font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:-0.02em; }
.brand .wm span{ color:var(--red); }
.brand .wm .tm{ color:var(--faint); }
.nav-right{ display:flex; align-items:center; gap:12px; }
.nav-links{ display:flex; align-items:center; gap:28px; margin-right:12px; font-family:var(--mono); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-2); }
.nav-links a{ position:relative; transition:color .2s var(--ease); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1.5px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-io); }
.nav-links a:hover{ color:var(--red); }
.nav-links a:hover::after{ transform:scaleX(1); }
@media (max-width:860px){ .nav-links{ display:none; } }

/* ---------- Buttons ---------- */
.btn{ --bg-btn:var(--ink); --fg-btn:var(--paper);
  position:relative; display:inline-flex; align-items:center; gap:11px; padding:16px 28px; border-radius:100px;
  border:1px solid transparent; font-family:var(--disp); font-weight:700; font-size:14px; letter-spacing:0.01em;
  background:var(--bg-btn); color:var(--fg-btn); overflow:hidden; isolation:isolate; white-space:nowrap; will-change:transform; }
.btn .arrow{ transition:transform .4s var(--ease-io); }
.btn:hover .arrow{ transform:translateX(5px); }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--red); transform:translateY(101%); transition:transform .5s var(--ease-io); }
.btn:hover::before{ transform:translateY(0); }
.btn.red{ --bg-btn:var(--red); --fg-btn:#fff; }
.btn.red::before{ background:var(--ink); }
.btn.ghost{ --bg-btn:transparent; --fg-btn:var(--ink); border-color:var(--line-2); }
.btn.ghost::before{ background:var(--ink); }
.btn.ghost:hover{ color:var(--paper); border-color:var(--ink); }
.btn.lg{ padding:20px 36px; font-size:15px; }

/* ---------- Kinetic + reveal ---------- */
.k-line{ display:block; overflow:hidden; }
.k-line > span{ display:inline-block; transform:translateY(112%); will-change:transform; }
.reveal-up{ opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease-io), transform 1s var(--ease-io); }
.reveal-up.in{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.08s; } [data-delay="2"]{ transition-delay:.16s; }
[data-delay="3"]{ transition-delay:.24s; } [data-delay="4"]{ transition-delay:.32s; }

.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--red); }
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--red); }
.eyebrow.c-edu{ color:var(--edu); } .eyebrow.c-edu .dot{ background:var(--edu); }
.eyebrow.c-tox{ color:#b8920a; } .eyebrow.c-tox .dot{ background:var(--tox); }
.eyebrow.c-qur{ color:var(--qur); } .eyebrow.c-qur .dot{ background:var(--qur); }

/* ============================================================
   HERO — giant type over gooey blob field
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:140px 0 40px; }
#gl{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-inner{ position:relative; z-index:2; width:100%; pointer-events:none; }
.hero-inner a, .hero-inner button{ pointer-events:auto; }
.hero h1{ font-family:var(--disp); font-weight:800; letter-spacing:-0.04em; line-height:0.82; font-size:clamp(60px,15vw,260px); text-transform:uppercase; }
.hero h1 .out{ -webkit-text-stroke:2px var(--ink); color:transparent; }
.hero h1 .red{ color:var(--red); }
.hero-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-top:38px; }
.hero-sub{ max-width:440px; font-size:clamp(17px,1.6vw,21px); color:var(--ink-2); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-foot{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-top:auto; padding-top:48px; }
.hero-tags{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-tags span{ font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-2); border-radius:100px; padding:8px 15px; background:rgba(244,241,234,0.5); }
.scroll-cue{ font-family:var(--mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; }
.scroll-cue .dotpulse{ width:9px; height:9px; border-radius:50%; background:var(--red); animation:pulse 1.6s var(--ease-io) infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.7); opacity:0.4; } }
@media (max-width:760px){ .hero h1{ line-height:0.86; } .hero-foot{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   SECTION scaffolding
   ============================================================ */
.section{ position:relative; padding-block:clamp(72px,9vw,150px); }
.section-head{ max-width:980px; }
.section-head .eyebrow{ margin-bottom:22px; }
.section-head h2{ font-family:var(--disp); font-weight:800; letter-spacing:-0.03em; line-height:0.94; font-size:clamp(38px,7vw,104px); text-transform:uppercase; text-wrap:balance; }
.section-head .lead{ margin-top:24px; max-width:600px; color:var(--ink-2); font-size:clamp(17px,1.5vw,20px); }

/* ---------- Marquee ---------- */
.marquee{ border-block:2px solid var(--ink); padding:26px 0; overflow:hidden; white-space:nowrap; display:flex; background:var(--red); color:var(--paper); }
.marquee-track{ display:inline-flex; gap:46px; padding-right:46px; will-change:transform; }
.marquee-item{ font-family:var(--disp); font-weight:800; font-size:clamp(26px,4vw,58px); letter-spacing:-0.02em; text-transform:uppercase; display:inline-flex; align-items:center; gap:46px; }
.marquee-item::after{ content:"✲"; font-size:0.7em; }

/* ---------- Manifesto ---------- */
.manifesto{ padding-block:clamp(80px,11vw,170px); }
.manifesto p{ font-family:var(--disp); font-weight:800; letter-spacing:-0.03em; line-height:1.02; font-size:clamp(30px,5.6vw,82px); max-width:18ch; text-transform:uppercase; text-wrap:balance; }
.manifesto .word{ display:inline-block; opacity:0.14; transition:opacity .5s var(--ease); }
.manifesto .word.lit{ opacity:1; }
.manifesto .accent{ color:var(--red); }

/* ---------- Products ---------- */
.products{ display:flex; flex-direction:column; gap:clamp(18px,2.6vw,30px); margin-top:60px; }
.product{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;
  padding:clamp(30px,4.4vw,64px); border-radius:34px; overflow:hidden; color:var(--ink);
  transition:transform .6s var(--ease-io); }
.product.rev{ grid-template-columns:1fr 1fr; }
.product.rev .p-copy{ order:2; }
.product.edu{ background:var(--edu); color:#fff; }
.product.tox{ background:var(--tox); color:var(--ink); }
.product.qur{ background:var(--qur); color:#fff; }
.product .p-copy{ position:relative; z-index:2; }
.product .idx{ font-family:var(--mono); font-size:12px; letter-spacing:0.16em; opacity:0.7; }
.product h3{ font-family:var(--disp); font-weight:800; letter-spacing:-0.03em; font-size:clamp(38px,5vw,76px); line-height:0.92; margin-top:14px; text-transform:uppercase; }
.product .role{ margin-top:16px; font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.85; }
.product p{ margin-top:18px; font-size:17px; max-width:42ch; opacity:0.92; }
.p-tags{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; }
.p-tags span{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; border:1px solid currentColor; border-radius:100px; padding:7px 13px; opacity:0.75; }
.p-cta{ margin-top:30px; display:inline-flex; align-items:center; gap:11px; font-family:var(--disp); font-weight:700; font-size:15px; padding:14px 26px; border-radius:100px; background:var(--ink); color:#fff; transition:transform .4s var(--ease-io), background-color .3s; }
.product.edu .p-cta{ background:#fff; color:var(--edu); } .product.qur .p-cta{ background:#fff; color:var(--qur); } .product.tox .p-cta{ background:var(--ink); color:#fff; }
.p-cta .arrow{ transition:transform .4s var(--ease-io); }
.p-cta:hover{ transform:translateY(-3px); } .p-cta:hover .arrow{ transform:translateX(5px); }

/* product playful visual */
.p-visual{ position:relative; z-index:2; aspect-ratio:1/1; border-radius:26px; overflow:hidden; display:grid; place-items:center;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25); }
.product.tox .p-visual{ background:rgba(12,12,18,0.06); border-color:rgba(12,12,18,0.16); }
.p-visual .big-glyph{ width:50%; height:50%; }
.p-visual .ring{ position:absolute; border-radius:50%; border:1.5px dashed currentColor; opacity:0.4; }
.p-visual .ring.r1{ inset:12%; animation:spin 26s linear infinite; }
.p-visual .ring.r2{ inset:26%; animation:spin 18s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (max-width:880px){ .product, .product.rev{ grid-template-columns:1fr; } .product.rev .p-copy{ order:0; } .p-visual{ order:-1; max-width:360px; } }

/* ---------- Principles ---------- */
.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
.principle{ border:1.5px solid var(--ink); border-radius:24px; padding:34px 30px; background:var(--paper); transition:transform .5s var(--ease-io), background-color .4s, color .4s; }
.principle:hover{ transform:translateY(-6px); background:var(--ink); color:var(--paper); }
.principle .pn{ font-family:var(--mono); font-size:12px; letter-spacing:0.16em; color:var(--red); }
.principle:hover .pn{ color:var(--red-2); }
.principle h4{ font-family:var(--disp); font-weight:800; font-size:26px; letter-spacing:-0.02em; margin-top:20px; line-height:1.04; text-transform:uppercase; }
.principle p{ margin-top:14px; font-size:15px; color:var(--muted); }
.principle:hover p{ color:rgba(244,241,234,0.7); }
@media (max-width:880px){ .principles{ grid-template-columns:1fr; } }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px; border-top:2px solid var(--ink); }
.stat{ padding:38px 26px 8px 0; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat .n{ font-family:var(--disp); font-weight:800; font-size:clamp(44px,5.5vw,80px); letter-spacing:-0.04em; line-height:1; }
.stat .n em{ font-style:normal; color:var(--red); }
.stat .l{ margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } .stat{ border-right:0; } }

/* ---------- CTA ---------- */
.cta{ position:relative; padding-block:clamp(90px,12vw,170px); overflow:hidden; }
.cta-inner{ position:relative; z-index:2; text-align:center; }
.cta h2{ font-family:var(--disp); font-weight:800; letter-spacing:-0.04em; line-height:0.86; font-size:clamp(48px,11vw,180px); text-transform:uppercase; }
.cta h2 .red{ color:var(--red); }
.cta p{ margin:28px auto 0; max-width:540px; color:var(--ink-2); font-size:19px; }
.cta .hero-cta{ justify-content:center; margin-top:38px; }
#gl-cta{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.9; }

/* ---------- Footer ---------- */
.footer{ border-top:2px solid var(--ink); padding:60px 0 38px; }
.footer-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-blurb{ margin-top:18px; max-width:340px; color:var(--muted); font-size:15px; }
.footer-cols{ display:flex; gap:clamp(40px,7vw,92px); flex-wrap:wrap; }
.footer-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.footer-col a{ display:block; color:var(--ink-2); font-size:14.5px; margin-bottom:11px; transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--red); }
.footer-mail a{ font-family:var(--disp); font-weight:800; font-size:clamp(22px,2.4vw,34px); letter-spacing:-0.02em; }
.footer-bottom{ margin-top:50px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--faint); font-size:13px; }
.footer-bottom .legal{ display:flex; gap:22px; }

@media (prefers-reduced-motion:reduce){
  .k-line > span{ transform:none !important; }
  .reveal-up{ opacity:1 !important; transform:none !important; }
  .manifesto .word{ opacity:1 !important; }
  .p-visual .ring{ animation:none !important; }
}