/* ============================================================
   PINENOX — editorial studio system
   ink + bone · flat electric violet · acid accent
   Space Grotesk / Space Mono / Instrument Serif
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  /* surfaces */
  --ink:    #0B0A0F;
  --ink-2:  #121017;
  --ink-3:  #181520;
  --paper:  #ECE7DB;   /* warm bone */
  --paper-2:#E3DDCD;

  /* brand */
  --violet:       #3B0B81;
  --violet-bright:#6D2BC7;
  --violet-deep:  #2A0860;
  --acid:         #FFE36D;

  /* text on ink */
  --text:      #F1ECE2;
  --text-dim:  rgba(241,236,226,0.60);
  --text-mute: rgba(241,236,226,0.38);
  /* text on paper */
  --on-paper:      #16131C;
  --on-paper-dim:  rgba(22,19,28,0.62);
  --on-paper-mute: rgba(22,19,28,0.42);

  --border:      rgba(241,236,226,0.15);
  --border-soft: rgba(241,236,226,0.08);
  --rule:        rgba(241,236,226,0.15);

  /* legacy aliases kept so older inline refs resolve */
  --bg:#0B0A0F; --bg-2:#121017; --surface:#121017;
  --grad:var(--violet); --grad-soft:var(--violet); --lime:var(--acid);

  --font-display:'Space Grotesk', sans-serif;
  --font-body:   'Space Grotesk', sans-serif;
  --font-mono:   'Space Mono', monospace;
  --font-serif:  'Instrument Serif', Georgia, serif;

  --maxw:1320px;
  --nav-h:72px;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  background:var(--ink); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.6; letter-spacing:-0.01em;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--acid); color:#0B0A0F; }

/* kill the old custom cursor + glows */
.cursor-dot,.cursor-ring,.hero-glow,.hero-grid,.page-hero-glow,.cta-glow,.contact-glow{ display:none !important; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 36px; position:relative; }
section{ position:relative; }
.pad{ padding:130px 0; }
.pad-sm{ padding:84px 0; }
.rule{ height:1px; background:var(--rule); border:0; width:100%; }

/* ---------- paper (inverted) sections ---------- */
.paper{ background:var(--paper); color:var(--on-paper); }
.paper .dim{ color:var(--on-paper-dim); }
.paper .mute{ color:var(--on-paper-mute); }
.paper .rule{ background:rgba(22,19,28,0.16); }
.paper .eyebrow{ color:var(--on-paper); }
.paper .eyebrow .idx{ color:var(--violet-deep); }
.paper .serif-ital{ color:var(--violet-deep); }
.paper .outline-text{ -webkit-text-stroke-color:rgba(22,19,28,0.6); }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:0.98; letter-spacing:-0.035em; }

.display{ font-size:clamp(3.1rem,9.5vw,9rem); line-height:0.9; letter-spacing:-0.05em; font-weight:700; }
.h-xl{ font-size:clamp(2.4rem,5.6vw,4.8rem); line-height:0.98; letter-spacing:-0.04em; }
.h-lg{ font-size:clamp(2rem,3.8vw,3.4rem); letter-spacing:-0.035em; }
.h-md{ font-size:clamp(1.45rem,2.3vw,2rem); letter-spacing:-0.025em; }

/* editorial italic accent — the signature, replaces gradient text */
.serif-ital, .grad-text{
  font-family:var(--font-serif);
  font-weight:400; font-style:italic;
  letter-spacing:-0.01em;
  color:var(--violet-bright);
  /* serif sits a touch smaller optically; nudge up */
  font-size:1.04em; padding-right:0.04em;
  -webkit-text-fill-color:currentColor; background:none;
}
.outline-text{
  -webkit-text-stroke:1.4px var(--text);
  -webkit-text-fill-color:transparent; color:transparent;
}

/* mono label system */
.eyebrow{
  font-family:var(--font-mono); font-weight:700;
  font-size:12px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text); display:inline-flex; align-items:baseline; gap:10px;
}
.eyebrow::before{ content:none; }
.eyebrow .idx{ color:var(--violet-bright); }
.eyebrow.center{ justify-content:center; }
.mono{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.04em; }

.lead{ font-size:clamp(1.05rem,1.4vw,1.3rem); color:var(--text-dim); line-height:1.55; max-width:58ch; text-wrap:pretty; }
.dim{ color:var(--text-dim); }
.mute{ color:var(--text-mute); }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:-0.01em;
  padding:14px 24px; border:1px solid transparent; border-radius:7px;
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
  will-change:transform;
}
.btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn-primary{ background:var(--violet); color:#fff; }
.btn-primary:hover{ background:var(--acid); color:#0B0A0F; }
.btn-ghost{ border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ background:var(--text); color:var(--ink); border-color:var(--text); }
.paper .btn-ghost{ border-color:rgba(22,19,28,0.25); color:var(--on-paper); }
.paper .btn-ghost:hover{ background:var(--ink); color:var(--text); border-color:var(--ink); }
.btn-lime{ background:var(--acid); color:#0B0A0F; }
.btn-lime:hover{ background:var(--violet); color:#fff; }

/* text link with arrow */
.tlink{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid currentColor; padding-bottom:3px; transition:color .25s, gap .25s var(--ease); color:var(--text); }
.tlink:hover{ color:var(--violet-bright); gap:13px; }
.tlink svg{ width:14px; height:14px; }

/* ---------- nav ---------- */
.nav{ position:fixed; top:0; left:0; right:0; height:var(--nav-h); display:flex; align-items:center; z-index:200; transition:background .35s, border-color .35s; border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(11,10,15,0.82); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--border-soft); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-0.03em; }
.brand .mark{ width:28px; height:28px; }
.brand .mark svg{ width:100%; height:100%; display:block; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-links a{ position:relative; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-dim); padding:8px 15px; transition:color .22s; }
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{ color:var(--text); }
.nav-links a.active::before{ content:""; position:absolute; left:15px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--acid); }
.nav-links a.active{ padding-left:26px; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.menu-btn{ display:none; }

/* ---------- footer ---------- */
.footer{ border-top:1px solid var(--border-soft); padding:84px 0 38px; background:var(--ink-2); }
.footer-top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px; align-items:start; }
.footer h4{ font-family:var(--font-mono); font-weight:700; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-mute); margin-bottom:18px; }
.footer-col a{ display:block; color:var(--text-dim); font-size:15px; padding:6px 0; transition:color .2s, padding-left .2s; }
.footer-col a:hover{ color:var(--violet-bright); padding-left:6px; }
.footer-big{ font-family:var(--font-display); font-weight:700; font-size:clamp(3rem,13vw,11rem); line-height:0.86; letter-spacing:-0.05em; margin:64px 0 28px; color:transparent; -webkit-text-stroke:1.4px var(--border); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--border-soft); color:var(--text-mute); font-family:var(--font-mono); font-size:12px; letter-spacing:0.03em; flex-wrap:wrap; gap:16px; }
.footer-socials{ display:flex; gap:8px; }
.footer-socials a{ width:38px; height:38px; border:1px solid var(--border); display:grid; place-items:center; transition:all .28s var(--ease); }
.footer-socials a:hover{ border-color:var(--acid); color:var(--acid); }
.footer-socials svg{ width:16px; height:16px; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.07s; } .reveal-d2{ transition-delay:.14s; }
.reveal-d3{ transition-delay:.21s; } .reveal-d4{ transition-delay:.28s; }

/* ---------- marquee (editorial running line) ---------- */
.marquee{ overflow:hidden; white-space:nowrap; display:flex; user-select:none; }
.marquee-track{ display:inline-flex; align-items:center; animation:marquee 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,3vw,2.4rem); letter-spacing:-0.03em; padding:0 30px; color:var(--text); }
.marquee-item .dot{ width:7px; height:7px; background:var(--acid); margin-left:30px; transform:rotate(45deg); }
.marquee-item.ghost{ font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--violet-bright); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- chips / cards ---------- */
.chip{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; padding:7px 13px; border:1px solid var(--border); color:var(--text-dim); }

.card{ position:relative; background:var(--ink-2); border:1px solid var(--border); border-radius:10px; padding:32px; overflow:hidden; transition:border-color .35s, background .35s, transform .45s var(--ease); }
.card::before{ display:none; }
.card:hover{ border-color:var(--violet-bright); }
.paper .card{ background:#fff; border-color:rgba(22,19,28,0.12); }
.paper .card:hover{ border-color:var(--violet-deep); }

/* stat */
.stat-num{ font-family:var(--font-display); font-weight:500; font-size:clamp(2.6rem,5vw,4rem); letter-spacing:-0.05em; line-height:1; }
.stat-num .unit{ color:var(--violet-bright); }

/* ---------- responsive ---------- */
@media (max-width:880px){
  .nav-links{ position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0; align-items:stretch; background:rgba(11,10,15,0.98); backdrop-filter:blur(20px); padding:12px 18px 22px; border-bottom:1px solid var(--border); transform:translateY(-130%); transition:transform .4s var(--ease); }
  .nav-links.open{ transform:none; }
  .nav-links a{ padding:15px 12px; font-size:15px; }
  .nav-links a.active{ padding-left:12px; } .nav-links a.active::before{ display:none; }
  .nav .nav-cta .btn{ display:none; }
  .menu-btn{ display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--border); background:transparent; }
  .menu-btn span{ display:block; width:18px; height:2px; background:var(--text); position:relative; transition:.3s; }
  .menu-btn span::before,.menu-btn span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text); }
  .menu-btn span::before{ top:-6px; } .menu-btn span::after{ top:6px; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:30px; }
  .pad{ padding:84px 0; }
}
@media (max-width:560px){
  .wrap{ padding:0 22px; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}