/* ═══════════════════════════════════════════════════════════════
   ZENTRAFOCUS — DESIGN SYSTEM v2.0
   style.css → Tokens · Reset · Layout · Typography · Nav · Footer
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ───────────────────────────────────────────── */
:root {
  --c-black:       #060606;
  --c-surface:     #0a0a0a;
  --c-deep:        #0d0c0b;
  --c-card:        #111110;
  --c-card-2:      #141413;
  --c-border:      #1e1d1c;
  --c-border-2:    #2a2928;
  --c-mid:         #2e2d2c;
  --c-muted:       #5a5855;
  --c-soft:        #8a8784;
  --c-light:       #c4c1bc;
  --c-white:       #f0ede8;
  --c-white-2:     #fafaf9;
  --c-red:         #b91c1c;
  --c-red-2:       #dc2626;
  --c-red-bright:  #ef4444;
  --c-red-dim:     rgba(185,28,28,0.12);
  --c-red-glow:    rgba(185,28,28,0.08);
  --c-red-glow-2:  rgba(220,38,38,0.18);
  --font-sans:     'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:     'DM Mono', 'Fira Code', monospace;
  --fs-xs:    11px; --fs-sm:   13px; --fs-base: 16px;
  --fs-md:    18px; --fs-lg:   20px; --fs-xl:   24px;
  --fs-2xl:   32px; --fs-3xl:  40px;
  --fs-4xl:   clamp(36px, 6vw, 56px);
  --fs-5xl:   clamp(48px, 8vw, 80px);
  --fs-hero:  clamp(52px, 10vw, 96px);
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
  --sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
  --sp-20:80px;--sp-24:96px;--sp-32:128px;--sp-40:160px;
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:9999px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-red: 0 0 48px rgba(185,28,28,0.16);
  --ease-out: cubic-bezier(0.22,1,0.36,1);
  --ease-in:  cubic-bezier(0.64,0,0.78,0);
  --ease-io:  cubic-bezier(0.65,0,0.35,1);
  --t-fast:0.15s;--t-base:0.25s;--t-slow:0.4s;--t-xslow:0.6s;
  --max-w:1160px;--max-w-sm:640px;--max-w-md:800px;--nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--c-black);color:var(--c-white);font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{list-style:none}
input,textarea,select{font-family:inherit}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.1}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
:focus-visible{outline:2px solid var(--c-red-2);outline-offset:3px;border-radius:var(--r-sm)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-5)}
@media(min-width:640px){.container{padding:0 var(--sp-8)}}
@media(min-width:1024px){.container{padding:0 var(--sp-12)}}
.container--sm{max-width:var(--max-w-sm)}
.container--md{max-width:var(--max-w-md)}
.section{padding:var(--sp-20) 0}
@media(min-width:1024px){.section{padding:var(--sp-32) 0}}

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--c-red);margin-bottom:var(--sp-5)}
.eyebrow::before{content:'//'}
.display-xl{font-size:var(--fs-hero);font-weight:700;line-height:.95;letter-spacing:-.03em;color:var(--c-white)}
.display-lg{font-size:var(--fs-5xl);font-weight:700;line-height:1.0;letter-spacing:-.025em;color:var(--c-white)}
.display-md{font-size:var(--fs-4xl);font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--c-white)}
.heading-lg{font-size:var(--fs-3xl);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--c-white)}
.heading-md{font-size:var(--fs-2xl);font-weight:600;line-height:1.2;letter-spacing:-.015em;color:var(--c-white)}
.heading-sm{font-size:var(--fs-xl);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--c-white)}
.body-lg{font-size:clamp(16px,2vw,19px);font-weight:300;line-height:1.8;color:var(--c-soft)}
.body-md{font-size:var(--fs-base);font-weight:400;line-height:1.7;color:var(--c-soft)}
.body-sm{font-size:var(--fs-sm);font-weight:400;line-height:1.6;color:var(--c-muted)}
.text-red{color:var(--c-red-2)}
.text-white{color:var(--c-white)}
.text-soft{color:var(--c-soft)}
.text-muted{color:var(--c-muted)}
.text-mono{font-family:var(--font-mono)}
em.red,.em-red{color:var(--c-red-2);font-style:normal}

/* ── NAV ─────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);display:flex;align-items:center;transition:background var(--t-slow) var(--ease-out),border-color var(--t-slow) var(--ease-out);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(6,6,6,.9);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-color:var(--c-border)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-5)}
@media(min-width:640px){.nav__inner{padding:0 var(--sp-8)}}
@media(min-width:1024px){.nav__inner{padding:0 var(--sp-12)}}
.nav__logo{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--c-white);white-space:nowrap;flex-shrink:0}
.nav__logo span{color:var(--c-red-2)}
.nav__links{display:none;align-items:center;gap:var(--sp-8)}
@media(min-width:768px){.nav__links{display:flex}}
.nav__link{font-size:var(--fs-sm);font-weight:500;color:var(--c-soft);letter-spacing:.01em;transition:color var(--t-fast);position:relative}
.nav__link::after{content:'';position:absolute;bottom:-3px;left:0;right:0;height:1px;background:var(--c-red-2);transform:scaleX(0);transition:transform var(--t-base) var(--ease-out)}
.nav__link:hover{color:var(--c-white)}
.nav__link:hover::after{transform:scaleX(1)}
.nav__right{display:flex;align-items:center;gap:var(--sp-4)}
.nav__hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;padding:4px;cursor:pointer}
@media(min-width:768px){.nav__hamburger{display:none}}
.nav__hamburger span{display:block;height:1.5px;background:var(--c-white);transition:all var(--t-base) var(--ease-out);transform-origin:center}
.nav__hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav__hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.nav__mobile{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:rgba(6,6,6,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--c-border);padding:var(--sp-6) var(--sp-5) var(--sp-8);z-index:999}
.nav__mobile.open{display:block}
.nav__mobile-links{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-6)}
.nav__mobile-link{display:block;font-size:var(--fs-md);font-weight:500;color:var(--c-soft);padding:var(--sp-3) 0;border-bottom:1px solid var(--c-border);transition:color var(--t-fast)}
.nav__mobile-link:last-child{border-bottom:none}
.nav__mobile-link:hover{color:var(--c-white)}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer{border-top:1px solid var(--c-border);padding:var(--sp-16) 0 var(--sp-12)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:var(--sp-10);margin-bottom:var(--sp-12)}
@media(min-width:640px){.footer__grid{grid-template-columns:2fr 1fr 1fr;gap:var(--sp-8)}}
.footer__logo{font-size:16px;font-weight:700;color:var(--c-white);letter-spacing:-.01em;margin-bottom:var(--sp-3)}
.footer__logo span{color:var(--c-red-2)}
.footer__brand p{font-size:var(--fs-sm);color:var(--c-muted);line-height:1.7;max-width:280px;margin-top:var(--sp-3)}
.footer__col-title{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--c-muted);margin-bottom:var(--sp-4)}
.footer__links{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer__link{font-size:var(--fs-sm);color:var(--c-soft);transition:color var(--t-fast)}
.footer__link:hover{color:var(--c-white)}
.footer__bottom{padding-top:var(--sp-8);border-top:1px solid var(--c-border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4)}
.footer__copy{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-muted);letter-spacing:.05em}
.footer__legal{display:flex;gap:var(--sp-6)}
.footer__legal a{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--c-muted);letter-spacing:.05em;transition:color var(--t-fast)}
.footer__legal a:hover{color:var(--c-soft)}
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}