/* ── Inter (latin-ext) ── */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter-italic-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ── Inter (latin) ── */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter-italic-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Space Grotesk (latin-ext) ── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/space-grotesk-normal-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-grotesk-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-normal-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/space-grotesk-normal-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-grotesk-normal-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ── Space Grotesk (latin) ── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/space-grotesk-normal-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/space-grotesk-normal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/space-grotesk-normal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/space-grotesk-normal-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/space-grotesk-normal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ── */
:root {
  --bg:        #0A0A0A;
  --bg-2:      #111111;
  --bg-3:      #1A1A1A;
  --text:      #FAFAFA;
  --muted:     rgba(250,250,250,.45);
  --dim:       rgba(250,250,250,.12);
  --lime:      #CCFF00;
  --blue:      #00F0FF;
  --border:    rgba(250,250,250,.08);
  --border-s:  rgba(250,250,250,.18);

  --f-display: 'Space Grotesk', sans-serif;
  --f-body:    'Inter', sans-serif;

  --nav-h: 68px;

  --t-xs:  .75rem;
  --t-sm:  .875rem;
  --t-base: 1rem;
  --t-lg:  1.125rem;
  --t-xl:  1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.5rem;
  --t-4xl: 3.5rem;
  --t-5xl: 5rem;
  --t-6xl: 7.5rem;
  --t-7xl: 11rem;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none }
img,svg { display:block; max-width:100% }

/* ── Nav ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.5rem;
  height:var(--nav-h);
  background:rgba(10,10,10,.93);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo {
  font-family:var(--f-display);
  font-size:1.3rem; font-weight:700;
  letter-spacing:-.03em;
  transition:color .15s;
}
.nav-logo:hover { color:var(--lime) }

.nav-links { display:flex; gap:2.5rem; align-items:center }
.nav-links a {
  font-family:var(--f-display);
  font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  transition:color .15s;
}
.nav-links a:hover { color:var(--text) }
.nav-links a.active { color:var(--lime) }

.nav-right { display:flex; align-items:center; gap:1.5rem }

.lang-sw { display:flex; align-items:center; gap:.375rem }
.lang-btn {
  background:none; border:none; cursor:pointer;
  font-family:var(--f-display);
  font-size:.75rem; font-weight:700; letter-spacing:.1em;
  color:var(--muted);
  transition:color .15s;
  padding:.25rem .375rem;
}
.lang-btn:hover { color:var(--text) }
.lang-btn.active { color:var(--lime) }
.lang-sep { color:var(--border-s); font-size:.75rem }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:.5rem;
}
.hamburger span { display:block; width:22px; height:1.5px; background:var(--text); transition:all .25s }

.drawer {
  display:none;
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0; z-index:99;
  background:var(--bg);
  padding:3rem 2.5rem;
  flex-direction:column; gap:1.5rem;
  transform:translateX(-100%);
  transition:transform .35s var(--ease);
}
.drawer.open { transform:translateX(0) }
.drawer a {
  font-family:var(--f-display);
  font-size:var(--t-2xl); font-weight:700;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  padding-bottom:1.5rem;
  transition:color .15s;
}
.drawer a:hover { color:var(--lime) }

/* ── Layout ── */
.page { padding-top:var(--nav-h) }
.wrap { max-width:1200px; margin:0 auto; padding:0 2.5rem }
.wrap--narrow { max-width:780px; margin:0 auto; padding:0 2.5rem }

.section { padding:6rem 0 }
.section--xl { padding:9rem 0 }

/* ── Type ── */
h1,h2,h3,h4,h5,h6 {
  font-family:var(--f-display);
  font-weight:700; line-height:1.05; letter-spacing:-.03em;
}
.d-xl  { font-size:clamp(var(--t-5xl),10vw,var(--t-7xl)); line-height:.92; letter-spacing:-.05em }
.d-lg  { font-size:clamp(var(--t-4xl),7vw,var(--t-6xl));  line-height:.95; letter-spacing:-.04em }
.d-md  { font-size:clamp(var(--t-3xl),5vw,var(--t-5xl));  line-height:1.0; letter-spacing:-.03em }
.h-xl  { font-size:clamp(var(--t-2xl),3vw,var(--t-3xl));  line-height:1.1 }
.h-lg  { font-size:clamp(var(--t-xl),2.5vw,var(--t-2xl)); line-height:1.2 }
.h-md  { font-size:var(--t-xl); line-height:1.3 }
.body-lg  { font-size:var(--t-lg); line-height:1.75; color:var(--muted); font-weight:300 }
.body-base{ font-size:var(--t-base); line-height:1.8; color:var(--muted) }
.label {
  font-family:var(--f-display);
  font-size:var(--t-xs); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.25rem;
}
.label--lime { color:var(--lime) }

.accent { color:var(--lime) }
.accent-blue { color:var(--blue) }

/* ── Pull quote ── */
.pull {
  border-left:2px solid var(--lime);
  padding:1rem 0 1rem 2.5rem;
  margin:4rem 0;
}
.pull p {
  font-family:var(--f-display);
  font-size:clamp(var(--t-xl),3vw,var(--t-3xl));
  font-weight:600; line-height:1.3; letter-spacing:-.02em;
}

/* ── Divider ── */
hr { border:none; border-top:1px solid var(--border); margin:4rem 0 }
hr.strong { border-color:var(--border-s) }

/* ── Chapter tag ── */
.ch-tag {
  display:inline-block;
  font-family:var(--f-display);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--bg); background:var(--lime);
  padding:.25rem .75rem;
}

/* ── Page header ── */
.page-header {
  padding:5rem 0 4rem;
  border-bottom:1px solid var(--border);
}
.page-header-meta { display:flex; align-items:center; gap:1rem; margin-bottom:2rem }
.page-header-meta .label { margin-bottom:0 }

/* ── Grid ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem }

/* ── Chapter cards (home) ── */
.ch-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}
.ch-card {
  background:var(--bg);
  padding:3rem 2rem 2.5rem;
  transition:background .25s;
  position:relative; overflow:hidden;
  cursor:pointer;
}
.ch-card::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:2px;
  background:var(--lime);
  transform:scaleX(0);
  transition:transform .3s var(--ease);
  transform-origin:left;
}
.ch-card:hover { background:var(--bg-2) }
.ch-card:hover::after { transform:scaleX(1) }
.ch-num {
  font-family:var(--f-display);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.12em;
  color:var(--dim); margin-bottom:1.5rem;
}
.ch-card h3 { font-size:var(--t-xl); margin-bottom:.75rem }
.ch-card p { font-size:var(--t-sm); color:var(--muted); line-height:1.65 }
.ch-arrow {
  margin-top:2rem;
  font-family:var(--f-display);
  font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lime);
}

/* ── Principle cards ── */
.principle {
  padding:2rem;
  border:1px solid var(--border);
  position:relative;
}
.principle h4 { font-size:var(--t-lg); margin-bottom:.75rem }
.principle p { font-size:var(--t-sm); color:var(--muted); line-height:1.7 }
.principle-num {
  position:absolute; top:1rem; right:1rem;
  font-family:var(--f-display);
  font-size:var(--t-xs); color:var(--dim); font-weight:700; letter-spacing:.08em;
}

/* ── Highlight box ── */
.hl {
  background:var(--bg-2);
  border-left:3px solid var(--lime);
  padding:2rem 2rem 2rem 2.5rem;
  margin:3rem 0;
}
.hl--blue { border-color:var(--blue) }
.hl p { font-size:var(--t-base); color:var(--muted); line-height:1.8 }
.hl strong { color:var(--text) }

/* ── Big number ── */
.big-num {
  font-family:var(--f-display);
  font-size:clamp(4rem,12vw,9rem);
  font-weight:700; letter-spacing:-.05em;
  line-height:1;
  color:var(--lime);
}

/* ── Color swatches ── */
.swatch-row { display:flex; gap:.5rem; margin:2rem 0 }
.swatch {
  flex:1; height:80px; position:relative;
  display:flex; align-items:flex-end; padding:.5rem;
}
.swatch span {
  font-family:var(--f-display);
  font-size:.65rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; opacity:.8;
}

/* ── Type scale demo ── */
.type-scale { display:flex; flex-direction:column; gap:1.5rem }
.ts-row {
  display:flex; align-items:baseline; gap:2rem;
  border-bottom:1px solid var(--border); padding-bottom:1.5rem;
}
.ts-label {
  font-family:var(--f-display);
  font-size:.65rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
  min-width:90px;
}
.ts-sample { font-family:var(--f-display); font-weight:700; line-height:1 }

/* ── Hero sections ── */
.hero {
  min-height:calc(100svh - var(--nav-h));
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:5rem 0 4rem;
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.hero-bg-text {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--f-display);
  font-size:clamp(8rem,22vw,22rem);
  font-weight:700; letter-spacing:-.06em;
  color:rgba(204,255,0,.025);
  white-space:nowrap;
  pointer-events:none; user-select:none;
}

/* ── Footer ── */
.footer {
  border-top:1px solid var(--border);
  padding:3rem 0;
  margin-top:6rem;
}
.footer-inner {
  display:flex; justify-content:space-between; align-items:center;
}
.footer-logo {
  font-family:var(--f-display);
  font-size:var(--t-lg); font-weight:700; letter-spacing:-.02em;
}
.footer-note { font-size:var(--t-xs); color:var(--muted); letter-spacing:.04em }
.footer-right {
  display:flex; flex-direction:column; align-items:flex-end; gap:.75rem;
}
.footer-legal {
  display:flex; gap:1.5rem;
}
.footer-legal a {
  font-family:var(--f-display);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  transition:color .15s;
}
.footer-legal a:hover { color:var(--text) }

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px) }
  to   { opacity:1; transform:translateY(0) }
}
.fade-up { animation:fadeUp .8s var(--ease) both }
.d1 { animation-delay:.1s } .d2 { animation-delay:.2s }
.d3 { animation-delay:.3s } .d4 { animation-delay:.4s }
.d5 { animation-delay:.55s }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.reveal.in { opacity:1; transform:translateY(0) }

/* ── Responsive ── */
@media (max-width:1024px) {
  .nav-links { display:none }
  .hamburger { display:flex }
  .grid-2 { grid-template-columns:1fr; gap:3rem }
  .grid-3 { grid-template-columns:1fr 1fr }
  .ch-grid { grid-template-columns:1fr 1fr }
}
@media (max-width:768px) {
  .nav { padding:0 1.5rem }
  .wrap { padding:0 1.5rem }
  .wrap--narrow { padding:0 1.5rem }
  .section { padding:4rem 0 }
  .ch-grid { grid-template-columns:1fr }
  .grid-3 { grid-template-columns:1fr }
  .footer-inner { flex-direction:column; gap:1.5rem; text-align:center }
  .footer-right { align-items:center }
  .swatch-row { flex-wrap:wrap }
  .swatch { min-width:calc(50% - .25rem); flex:none }
}