/* ─────────────────────────────────────────────────────────────────
   Bixen — Atmospheric Dark
   CSS variables drive theming; Tweaks panel rewrites them at :root.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* PALETTE — teal (default) */
  --bg:        #050709;
  --surface-1: #0b1015;
  --surface-2: #11181f;
  --surface-3: #18222b;
  --text:      #ffffff;
  --text-2:    rgba(255,255,255,.65);
  --text-3:    rgba(255,255,255,.42);
  --text-4:    rgba(255,255,255,.22);
  --border:    rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --accent:    #01F9C6;
  --accent-2:  #008794;
  --accent-soft: rgba(1,249,198,.08);

  /* TYPOGRAPHY */
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Plus Jakarta Sans', ui-monospace, monospace;
  --font-serif: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);
  --font-label:   var(--font-sans);
  --font-bixen:   var(--font-sans);

  /* DENSITY — controlled by tweak */
  --section-pad-y: clamp(96px, 12vw, 180px);
  --section-pad-x: clamp(24px, 5vw, 96px);
  --gap-block:     clamp(48px, 6vw, 96px);
  --gap-stack:     24px;
  --container-w:   1320px;

  /* CARD STYLE */
  --card-bg:     var(--surface-1);
  --card-border: 1px solid var(--border);
  --card-radius: 4px;
  --card-shadow: none;
  --card-blur:   none;

  /* RHYTHM */
  --line-tight: 1.02;
  --line-snug:  1.12;
  --line-body:  1.5;
  --tracking-tight: -0.025em;
  --tracking-display: -0.035em;
  --tracking-eyebrow: 0.16em;
}

/* ─── LIGHT THEME ── */
:root.light {
  --bg:        #f6f5f1;
  --surface-1: #ffffff;
  --surface-2: #ebe9e2;
  --surface-3: #e0ddd3;
  --text:      #0a0d10;
  --text-2:    rgba(10,13,16,.66);
  --text-3:    rgba(10,13,16,.45);
  --text-4:    rgba(10,13,16,.20);
  --border:    rgba(10,13,16,.10);
  --border-strong: rgba(10,13,16,.22);
  --accent:    #008794;
  --accent-2:  #00525a;
  --accent-soft: rgba(0,135,148,.08);
}

/* ─── PALETTE VARIANTS ── */
:root.palette-cobalt {
  --accent: #5DA9FF;
  --accent-2: #1F58D4;
  --accent-soft: rgba(93,169,255,.08);
}
:root.palette-amber {
  --accent: #F5B341;
  --accent-2: #B07A18;
  --accent-soft: rgba(245,179,65,.08);
}
:root.palette-violet {
  --accent: #B49CFF;
  --accent-2: #6F4DD9;
  --accent-soft: rgba(180,156,255,.08);
}
:root.palette-mono {
  --accent: #ffffff;
  --accent-2: rgba(255,255,255,.5);
  --accent-soft: rgba(255,255,255,.05);
}
:root.light.palette-mono {
  --accent: #0a0d10;
  --accent-2: rgba(10,13,16,.55);
  --accent-soft: rgba(10,13,16,.05);
}

/* ─── DENSITY VARIANTS ── */
:root.density-compact {
  --section-pad-y: clamp(64px, 8vw, 120px);
  --gap-block: clamp(32px, 4vw, 64px);
  --gap-stack: 16px;
}
:root.density-comfy {
  --section-pad-y: clamp(120px, 16vw, 240px);
  --gap-block: clamp(64px, 8vw, 128px);
  --gap-stack: 32px;
}

/* ─── CARD STYLE VARIANTS ── */
:root.cards-glass {
  --card-bg: rgba(255,255,255,.06);
  --card-border: 1px solid rgba(255,255,255,.12);
  --card-radius: 22px;
  --card-blur: blur(20px) saturate(140%);
  --card-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 10px 40px rgba(0,0,0,.3);
}
:root.light.cards-glass {
  --card-bg: rgba(255,255,255,.55);
  --card-border: 1px solid rgba(10,13,16,.08);
}
:root.cards-solid {
  --card-bg: var(--surface-2);
  --card-border: 1px solid transparent;
  --card-radius: 8px;
}
:root.cards-outlined {
  --card-bg: transparent;
  --card-border: 1px solid var(--border-strong);
  --card-radius: 4px;
}
:root.cards-flat {
  --card-bg: transparent;
  --card-border: 1px solid transparent;
  --card-radius: 0px;
}

/* ─── FONT-PAIR VARIANTS ── */
:root.font-editorial {
  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-label:   'Inter', ui-sans-serif, system-ui, sans-serif;
  --tracking-display: -0.015em;
}
:root.font-mono {
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-label:   'Inter', ui-sans-serif, system-ui, sans-serif;
  --tracking-display: -0.02em;
}

/* ════════════════════════════════════════════════════════════════
   RESET + BASE
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html { background: var(--bg); }
body {
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--line-body);
  font-feature-settings: 'ss01', 'cv01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .3s ease, color .3s ease;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--accent); color: var(--bg); }

/* ════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ════════════════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--section-pad-x);
}
.section { padding: var(--section-pad-y) 0; position: relative; }
.section--tight { padding-top: calc(var(--section-pad-y) * .55); padding-bottom: calc(var(--section-pad-y) * .55); }
#people { padding-bottom: clamp(40px, 5vw, 72px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.eyebrow--solo::before { display: none; }

.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--line-tight);
  margin: 0;
  text-wrap: balance;
}
.h-section {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-snug);
  margin: 0;
  text-wrap: balance;
  /* Gradient fade: full text at top, fading toward bottom */
  background: linear-gradient(
    180deg,
    var(--text) 0%,
    var(--text) 45%,
    color-mix(in oklab, var(--text) 55%, transparent) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* Emphasis inside gradient headings \u2014 solid accent color, no gradient */
.h-section em,
.h-section .italic-serif {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  font-style: normal;
  font-weight: inherit;
}
.h-card {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin: 0;
}
.body-lg {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.45;
  color: var(--text-2);
  margin: 0;
  text-wrap: pretty;
}

.accent { color: var(--accent); }
.italic-serif {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: inherit;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  background: none;
}
.font-bixen {
  font-family: var(--font-bixen) !important;
  font-weight: 800 !important;
}

/* ════════════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px var(--section-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--border);
}
.nav__logo { height: 22px; width: auto; display: block; }
:root.light .nav__logo { filter: invert(1); }
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__link {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 450;
  color: var(--text-2);
  letter-spacing: 0;
  transition: color .15s ease;
}
.nav__link:hover { color: var(--text); }
.nav__link--bold { font-weight: 600; color: var(--text); }
.nav__products { position: relative; display: inline-flex; align-items: center; }
.nav__products-trigger {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: inherit;
}
.nav__products-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  min-width: 232px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 200;
}
.nav__products-menu::before {
  content: "";
  position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}
.nav__products:hover .nav__products-menu,
.nav__products:focus-within .nav__products-menu,
.nav__products.open .nav__products-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav__products:hover .nav__products-trigger,
.nav__products.open .nav__products-trigger { color: var(--text); }
.nav__product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  text-decoration: none;
  transition: background .18s ease;
}
.nav__product:hover { background: var(--surface-2); }
.nav__product-mark {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FD366E;
  box-shadow: 0 0 12px rgba(253,54,110,.4);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
}
.nav__product-text { display: flex; flex-direction: column; gap: 2px; }
.nav__product-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1;
}
.nav__product-desc {
  font-family: var(--font-label);
  font-size: 10px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
}
.nav__cta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  transition: background-color .15s ease, border-color .15s ease;
}
.nav__cta:hover { background: var(--surface-2); border-color: var(--text-4); }
.nav__menu-btn { display: none; background: none; border: 0; color: var(--text); padding: 8px; cursor: pointer; }
.nav__menu-btn svg line {
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  transform-origin: center;
  transform-box: fill-box;
}
.nav__menu-btn.is-open svg line:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__menu-btn.is-open svg line:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__links, .nav__cta { display: none; }
  .nav__menu-btn { display: inline-flex; }
  .nav { padding: 11px var(--section-pad-x); }
  .nav__logo { height: 17px; }
  .nav__menu-btn { padding: 6px; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE MENU
   ════════════════════════════════════════════════════════════════ */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 78px var(--section-pad-x) 32px;
  background: color-mix(in oklab, var(--bg) 94%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
          backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transform: translateY(-101%);
  opacity: 0;
  pointer-events: none;
  transition: transform .34s cubic-bezier(.4,0,.2,1), opacity .26s ease;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu__links {
  display: flex;
  flex-direction: column;
}
.mobile-menu__link {
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  padding: 16px 2px;
  border-bottom: 1px solid var(--border);
  transition: color .15s ease;
}
.mobile-menu__link:active,
.mobile-menu__link:hover { color: var(--accent); }
.mobile-menu__cta {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 15px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text);
  transition: background-color .15s ease, border-color .15s ease;
}
.mobile-menu__cta:active,
.mobile-menu__cta:hover { background: var(--surface-2); border-color: var(--text-4); }
@media (min-width: 881px) {
  .mobile-menu { display: none; }
}