/* ═══════════════════════════════════════════════════════════
   RAVYX — v3 Premium Cinematic CSS
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;overflow-x:hidden;scroll-behavior:auto}
img,video{display:block;max-width:100%}
button,input,textarea,select{font-family:inherit;border:none;background:none}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  /* Layered dark palette — no pure blacks, rich tonal depth */
  --void:   #090910;   /* deep navy-charcoal — base bg */
  --deep:   #0c0c14;   /* slightly lifted */
  --black:  #0f0f18;   /* section background A */
  --char:   #13131e;   /* section background B */
  --gun:    #191926;   /* card / panel background */
  --steel:  #1f1f2e;   /* elevated surface */
  --iron:   #272738;   /* border / divider */
  --blade:  #343448;   /* mid-surface accent */
  --muted:  #484860;   /* subtle UI */
  --dim:    #707088;   /* secondary text — improved readability */
  --mid:    #9898b0;   /* body text — brighter than before */
  --silver: #b8b8cc;   /* strong secondary */
  --light:  #d4d4e4;   /* near-white text */
  --white:  #eeeef6;   /* primary text */
  --pure:   #ffffff;

  --k:      #c8ab74;
  --k-lt:   #dcc898;
  --k-dk:   #8c7248;
  --k-dim:  #3a2e14;
  --k-glow: rgba(200,171,116,.11);

  --font-d: 'Barlow Condensed',sans-serif;
  --font-b: 'Barlow',sans-serif;
  --font-m: 'DM Mono',monospace;

  --ease:     cubic-bezier(.16,1,.3,1);
  --ease-in:  cubic-bezier(.7,0,.84,0);
  --ease-io:  cubic-bezier(.85,0,.15,1);
  --ease-sp:  cubic-bezier(.34,1.56,.64,1);

  --mx: 50%;  /* mouse X (JS) */
  --my: 50%;  /* mouse Y (JS) */

  --nav-h: 72px;
  --pad-x: clamp(24px, 5vw, 80px);
  --pad-s: clamp(80px, 10vw, 160px);
}

/* ── Base ────────────────────────────────────────────────── */
body {
  background: var(--void);
  color: var(--white);
  font-family: var(--font-b);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}
body.loading { overflow: hidden; }
body.transitioning { pointer-events: none; }
::selection { background: var(--k); color: var(--void); }
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--k-dk); }

/* ── Loader ──────────────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(145deg, #0a0a14 0%, #090910 60%, #0c0c16 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  transition: opacity .7s var(--ease), visibility .7s;
}
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark {
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.loader__logo {
  display: block;
  line-height: 0;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .95s var(--ease), opacity .4s var(--ease);
}
#loader.reveal .loader__logo {
  transform: translateY(0);
  opacity: 1;
}
.loader__bar-wrap {
  width: 180px;
  height: 1px;
  background: var(--blade);
  position: relative;
  overflow: hidden;
}
.loader__bar {
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  background: var(--k);
  width: 0%;
  transition: width .05s linear;
}
.loader__label {
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0;
  transition: opacity .4s;
}
#loader.reveal .loader__label { opacity: 1; }

/* ── Scroll Progress ─────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--k);
  z-index: 9999;
  width: 0%;
  transition: width .05s linear;
  pointer-events: none;
}

/* ── Custom Cursor ───────────────────────────────────────── */
#cur {
  position: fixed;
  top: 0; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--k);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .25s var(--ease), height .25s var(--ease),
              background .25s, border-radius .25s;
  will-change: transform;
}
#cur.big {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid rgba(200,171,116,.5);
}
#cur-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(200,171,116,.18);
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%,-50%);
  will-change: transform;
  transition: width .4s var(--ease), height .4s var(--ease), opacity .4s;
}

/* ── Nav ─────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  justify-content: space-between;
  transition: background .5s var(--ease), border-color .5s;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(9,9,16,.9);
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 4px 32px rgba(0,0,0,.4);
}
.nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  transition: opacity .2s var(--ease);
}
.nav__logo:hover { opacity: .8; }
.nav__center {
  display: flex;
  gap: 40px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav__link {
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .2s;
  position: relative;
  padding-bottom: 2px;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--k);
  transition: width .3s var(--ease);
}
.nav__link:hover, .nav__link.active { color: var(--white); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
.nav__cta {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--k);
  color: var(--void);
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 12px 24px;
  cursor: pointer;
  transition: background .2s;
  position: relative;
  overflow: hidden;
}
.nav__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
  transform: translateX(-100%);
  transition: transform .5s var(--ease);
}
.nav__cta:hover { background: var(--k-lt); }
.nav__cta:hover::before { transform: translateX(100%); }

/* Hamburger (mobile) */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
}
.nav__hamburger span {
  display: block;
  width: 22px; height: 1px;
  background: var(--white);
  transition: transform .35s var(--ease), opacity .35s;
}
.nav__hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
#nav-drawer {
  position: fixed;
  inset: 0;
  background: linear-gradient(145deg, #0d0d1e 0%, #090910 100%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  transform: translateY(-100%);
  transition: transform .6s var(--ease);
}
#nav-drawer.open { transform: none; }
.nav__drawer-link {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 48px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mid);
  transition: color .2s;
}
.nav__drawer-link:hover { color: var(--k); }

/* ── Page Transition Overlay ─────────────────────────────── */
#page-cover {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 9990;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}

/* ── Typography Helpers ──────────────────────────────────── */
.t-d  {
  font-family: var(--font-d);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .92;
}
.t-m  { font-family: var(--font-m); }
.t-k  { color: var(--k); }
.t-dim{ color: var(--dim); }
.t-mid{ color: var(--mid); }

/* Word reveal — with subtle scale for premium feel */
.wr { overflow: hidden; display: inline-block; }
.wi {
  display: inline-block;
  transform: translateY(108%) scale(1.02);
  opacity: 0;
  transition:
    transform 1.05s cubic-bezier(.16,1,.3,1),
    opacity .7s cubic-bezier(.16,1,.3,1);
}
.wi.in { transform: translateY(0) scale(1); opacity: 1; }

/* Clip-path wipe reveal — smoother, longer */
[data-wipe] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(.16,1,.3,1);
}
[data-wipe].in { clip-path: inset(0 0% 0 0); }

/* Standard fade-up — more vertical travel, slower */
[data-up] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
}
[data-up].in { opacity: 1; transform: none; }

[data-d="1"] { transition-delay: .1s !important; }
[data-d="2"] { transition-delay: .22s !important; }
[data-d="3"] { transition-delay: .36s !important; }
[data-d="4"] { transition-delay: .5s !important; }
[data-d="5"] { transition-delay: .64s !important; }
[data-d="6"] { transition-delay: .78s !important; }

/* ── Eyebrow ─────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--k);
  margin-bottom: 20px;
}
.eyebrow__line {
  width: 32px; height: 1px;
  background: var(--k-dk);
  flex-shrink: 0;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  transition: transform .2s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-fill {
  padding: 16px 36px;
  background: var(--k);
  color: var(--void);
}
.btn-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transform: translateX(-100%);
  transition: transform .5s var(--ease);
}
.btn-fill:hover { background: var(--k-lt); }
.btn-fill:hover::before { transform: translateX(100%); }
.btn-outline {
  padding: 15px 34px;
  border: 1px solid var(--iron);
  color: var(--mid);
  transition: border-color .25s, color .25s, transform .2s var(--ease);
}
.btn-outline:hover { border-color: var(--k-dk); color: var(--k); }
.btn-text {
  color: var(--k);
  gap: 8px;
  padding: 0;
  font-size: 9px;
  letter-spacing: .22em;
}
.btn-text:hover { gap: 14px; }
.btn svg { transition: transform .3s var(--ease), opacity .2s; }
.btn-text:hover svg { transform: translateX(4px); }

/* ── Section Layout ──────────────────────────────────────── */
.section {
  position: relative;
  padding: var(--pad-s) var(--pad-x);
  isolation: isolate;
}
/* Distinct tonal backgrounds — never same tone twice in a row */
.section--dark {
  background: var(--black);
  /* Subtle ambient light from top-left */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
              inset 80px 0 120px -80px rgba(200,171,116,.025);
}
.section--gun {
  background: var(--char);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
/* Default section (no modifier) gets the base void + subtle radial lift */
.section:not(.section--dark):not(.section--gun):not(.section--full) {
  background: var(--deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.section--full { padding-left: 0; padding-right: 0; }
.section .inner { max-width: 1440px; margin: 0 auto; }

/* Split header: label+title left, copy right */
.s-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 80px;
}
.s-head--center { grid-template-columns: 1fr; text-align: center; }
.s-title {
  font-size: clamp(48px,5.5vw,90px);
  line-height: .9;
}

/* ── Ambient Section Atmosphere ─────────────────────────── */
/* Adds a subtle directional light feel to alternating sections */
.section--dark::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(ellipse 80% 70% at 90% 30%, rgba(200,171,116,.04) 0%, transparent 70%);
  pointer-events: none;
}
.section--gun::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(ellipse 80% 70% at 10% 70%, rgba(200,171,116,.035) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Divider — with ambient light catch ──────────────────── */
.divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, rgba(200,171,116,.2), var(--iron) 20%, transparent 80%);
}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  height: 100svh;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--void);
}

/* Layered depth background */
.hero__atm {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Deep atmospheric radials — richer, multi-source lighting */
.hero__atm::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 75% at 62% 35%, rgba(200,171,116,.075) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 12% 72%, rgba(140,160,200,.04) 0%, transparent 50%),
    radial-gradient(ellipse 70% 60% at 85% 80%, rgba(200,171,116,.03) 0%, transparent 55%),
    linear-gradient(158deg, #111120 0%, #090910 45%, #0d0d18 100%);
}
/* Atmospheric top edge — subtle lighter gradient from top */
.hero__atm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.018) 0%, transparent 28%);
  pointer-events: none;
}
/* Grid floor — CSS 3D perspective receding into depth */
.hero__floor {
  position: absolute;
  bottom: -10%;
  left: 50%;
  width: 180%;
  height: 180%;
  transform: translateX(-50%) perspective(700px) rotateX(62deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(rgba(200,171,116,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,171,116,.07) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 70% 65% at 60% 80%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 60% 80%, black 20%, transparent 75%);
  pointer-events: none;
}
/* Horizontal scan line */
.hero__scan {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(200,171,116,.5) 30%, rgba(200,171,116,.75) 50%, rgba(200,171,116,.5) 70%, transparent 100%);
  top: 30%;
  opacity: 0;
  animation: scan 8s ease-in-out infinite 1.5s;
  pointer-events: none;
}
@keyframes scan {
  0%   { top: 10%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}
/* Vertical framing lines */
.hero__vline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(200,171,116,.12) 30%, rgba(200,171,116,.18) 50%, rgba(200,171,116,.12) 70%, transparent 100%);
  pointer-events: none;
}
.hero__vline--l { left: 15%; opacity: .7; }
.hero__vline--r { right: 15%; opacity: .7; }

/* Hero Content */
.hero__content {
  position: relative;
  z-index: 4;
  padding: 0 var(--pad-x);
  max-width: 760px;
  will-change: transform;
}
.hero__pre {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  overflow: hidden;
}
.hero__pre-line {
  width: 0;
  height: 1px;
  background: var(--k);
  transition: width 1s var(--ease) .3s;
}
.hero__pre.in .hero__pre-line { width: 36px; }
.hero__pre-label {
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: .26em;
  color: var(--k);
  text-transform: uppercase;
  transform: translateX(-20px);
  opacity: 0;
  transition: transform .7s var(--ease) .5s, opacity .5s var(--ease) .5s;
}
.hero__pre.in .hero__pre-label { transform: none; opacity: 1; }
.hero__h1 {
  font-size: clamp(80px, 11vw, 176px);
  color: var(--white);
  margin-bottom: 36px;
  letter-spacing: -.02em;
}
.hero__h1 em {
  font-style: normal;
  color: var(--k);
}
.hero__body {
  font-size: 15px;
  color: var(--silver);
  max-width: 380px;
  line-height: 1.82;
  margin-bottom: 52px;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Product visualization — right side, multi-layer depth */
.hero__viz {
  position: absolute;
  right: -2%; top: 0; bottom: 0;
  width: 56%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}
/* Primary warm glow — key light source */
.hero__viz-glow {
  position: absolute;
  top: 46%; left: 50%;
  transform: translate(-50%,-50%);
  width: 720px; height: 680px;
  background: radial-gradient(ellipse 60% 55% at 50% 45%,
    rgba(200,171,116,.22) 0%,
    rgba(200,171,116,.10) 30%,
    rgba(200,171,116,.03) 60%,
    transparent 78%);
  border-radius: 50%;
  animation: breathe 7s ease-in-out infinite;
  pointer-events: none;
}
/* Secondary cool fill — ambient underlight */
.hero__viz-glow-2 {
  position: absolute;
  top: 72%; left: 48%;
  transform: translate(-50%,-50%);
  width: 500px; height: 280px;
  background: radial-gradient(ellipse,
    rgba(120,140,200,.055) 0%,
    transparent 68%);
  border-radius: 50%;
  animation: breathe2 9s ease-in-out infinite 1.5s;
  pointer-events: none;
}
@keyframes breathe {
  0%,100% { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
  50%      { transform: translate(-50%,-50%) scale(1.1); opacity: .75; }
}
@keyframes breathe2 {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: 1; }
  50%      { transform: translate(-50%,-50%) scale(1.15); opacity: .6; }
}
/* Outer slow-spin ring */
.hero__viz-ring-outer {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(200,171,116,.05);
  animation: spinRingOut 60s linear infinite reverse;
  pointer-events: none;
}
/* Inner orbit ring */
.hero__viz-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 1px solid rgba(200,171,116,.13);
  animation: spinRing 28s linear infinite;
  pointer-events: none;
}
.hero__viz-ring::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%,-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--k);
  box-shadow: 0 0 8px rgba(200,171,116,.5);
  opacity: .7;
}
@keyframes spinRing    { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes spinRingOut { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Ghost depth cap — blurred shadow for 3D depth illusion */
.hero__cap-ghost {
  position: absolute;
  top: 18px; left: 16px;
  z-index: 1;
  opacity: .07;
  filter: blur(5px) saturate(0);
  pointer-events: none;
  transform: scale(1.02);
}

/* Main cap wrapper */
.hero__cap-wrap {
  position: relative;
  z-index: 2;
  animation: capFloat 8s cubic-bezier(.455,.03,.515,.955) infinite;
  transform-style: preserve-3d;
  overflow: hidden;  /* clips the shine sweep */
}
@keyframes capFloat {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-16px); }
}

/* Light sweep shimmer across cap surface */
.hero__cap-shine {
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    118deg,
    transparent 28%,
    rgba(255,255,255,.038) 44%,
    rgba(255,255,255,.065) 50%,
    rgba(255,255,255,.038) 56%,
    transparent 72%
  );
  transform: translateX(-130%) skewX(-12deg);
  animation: capShine 10s cubic-bezier(.4,0,.6,1) infinite 3.5s;
  pointer-events: none;
  z-index: 4;
}
@keyframes capShine {
  0%   { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
  4%   { opacity: 1; }
  48%  { opacity: 1; }
  52%  { transform: translateX(130%) skewX(-12deg); opacity: 0; }
  100% { transform: translateX(-130%) skewX(-12deg); opacity: 0; }
}

/* Corner brackets — tighter, more visible */
.hero__bracket {
  position: absolute;
  width: 26px; height: 26px;
  opacity: .55;
  transition: opacity 1s var(--ease);
}
.hero__bracket--tl { top: -26px; left: -4px;
  border-top: 1px solid var(--k); border-left: 1px solid var(--k); }
.hero__bracket--tr { top: -26px; right: -4px;
  border-top: 1px solid var(--k); border-right: 1px solid var(--k); }
.hero__bracket--bl { bottom: -26px; left: -4px;
  border-bottom: 1px solid var(--k); border-left: 1px solid var(--k); }
.hero__bracket--br { bottom: -26px; right: -4px;
  border-bottom: 1px solid var(--k); border-right: 1px solid var(--k); }

/* Spec callout beneath cap */
.hero__cap-spec {
  position: absolute;
  bottom: -52px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1s var(--ease) 1.8s;
}
.hero__cap-spec.in { opacity: 1; }
.hero__cap-spec-line {
  width: 48px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(200,171,116,.4));
}
.hero__cap-spec-line:last-child {
  background: linear-gradient(to left, transparent, rgba(200,171,116,.4));
}
.hero__cap-spec-label {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .3em;
  color: var(--k-dk);
  text-transform: uppercase;
}

/* Ground shadow beneath cap */
.hero__cap-shadow {
  position: absolute;
  bottom: -52px;
  left: 50%; transform: translateX(-50%);
  width: 75%; height: 28px;
  background: radial-gradient(ellipse, rgba(200,171,116,.28) 0%, transparent 68%);
  filter: blur(14px);
  animation: shadowPulse 8s ease-in-out infinite;
}
@keyframes shadowPulse {
  0%,100% { transform: translateX(-50%) scaleX(1);    opacity: .85; }
  50%      { transform: translateX(-50%) scaleX(.82);  opacity: .45; }
}
/* Right fade */
.hero__fade-r {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 20%;
  background: linear-gradient(to left, var(--void), transparent);
  z-index: 5;
  pointer-events: none;
}
.hero__fade-b {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28%;
  background: linear-gradient(to top, var(--void), transparent);
  z-index: 5;
  pointer-events: none;
}
/* Scroll cue */
.hero__scroll {
  position: absolute;
  bottom: 36px; left: var(--pad-x);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__scroll-track {
  width: 1px; height: 52px;
  background: var(--iron);
  position: relative;
  overflow: hidden;
}
.hero__scroll-fill {
  position: absolute;
  top: -100%; width: 1px; height: 100%;
  background: var(--k);
  animation: scrollDrip 2.2s var(--ease-in) infinite;
}
@keyframes scrollDrip {
  0%   { top: -100%; }
  100% { top: 100%; }
}
.hero__scroll-label {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .3em;
  color: var(--blade);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

/* ══════════════════════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════════════════════ */
.marquee {
  overflow: hidden;
  background: var(--steel);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 18px 0;
  box-shadow: 0 0 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
}
.marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
.marquee__track:hover { animation-play-state: paused; }
.marquee__item {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 32px;
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.marquee__item span { color: var(--k); }
.marquee__dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--k-dk);
  flex-shrink: 0;
}
@keyframes marqueeScroll { to { transform: translateX(-50%); } }

/* ══════════════════════════════════════════════════════════
   STATS STRIP
══════════════════════════════════════════════════════════ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--iron);
  background: var(--gun);
}
.stats__cell {
  padding: 44px 36px;
  border-right: 1px solid var(--iron);
  position: relative;
  overflow: hidden;
  /* Subtle top-edge specular — like light catching a surface */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.stats__cell:last-child { border-right: none; }
/* Ambient glow behind the number on reveal */
.stats__cell.in::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(200,171,116,.08) 0%, transparent 70%);
  pointer-events: none;
}
.stats__num {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  color: var(--pure);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.stats__num sup { font-size: 20px; color: var(--k); font-weight: 900; }
.stats__label {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 10px;
}
/* Animated bottom line */
.stats__cell::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px; width: 0;
  background: var(--k);
  transition: width 1.4s var(--ease);
}
.stats__cell.in::after { width: 100%; }

/* ══════════════════════════════════════════════════════════
   PROBLEM SECTION
══════════════════════════════════════════════════════════ */
.problem__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--iron);
  /* Slight outer glow — lifts the grid from its background */
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.4);
}
.problem__cell {
  background: var(--gun);
  padding: 52px 44px;
  position: relative;
  overflow: hidden;
  transition: background .3s;
  /* Top edge specular for depth */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.problem__cell:hover {
  background: var(--steel);
}
/* Left accent bar animates on entry */
.problem__cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 0;
  background: var(--k);
  transition: height .7s var(--ease);
}
.problem__cell.in::before { height: 100%; }
.problem__num {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--k);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.problem__ghost {
  position: absolute;
  bottom: -16px; right: 20px;
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 130px;
  color: rgba(255,255,255,.024);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  transition: color .3s;
}
.problem__cell:hover .problem__ghost { color: rgba(200,171,116,.055); }
.problem__title {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--white);
  margin-bottom: 14px;
}
.problem__desc {
  /* Slightly lifted readability */
  font-size: 13px;
  color: var(--dim);
  line-height: 1.78;
}
.problem__answer {
  grid-column: 1 / -1;
  background: var(--k);
  padding: 44px;
  display: flex;
  align-items: center;
  gap: 60px;
  /* Inner lighting — warm surface reflection */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.15);
}
.problem__answer-hed {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: clamp(32px,3vw,52px);
  text-transform: uppercase;
  color: var(--void);
  white-space: nowrap;
  flex-shrink: 0;
}
.problem__answer-body {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,.55);
  line-height: 1.72;
}

/* ══════════════════════════════════════════════════════════
   STATEMENT (full-width editorial line)
══════════════════════════════════════════════════════════ */
.statement {
  padding: var(--pad-s) var(--pad-x);
  border-top: 1px solid var(--iron);
  border-bottom: 1px solid var(--iron);
  overflow: hidden;
  /* Warm-tinted background — visually distinct from neighboring sections */
  background: linear-gradient(135deg, #111124 0%, #0e0e1c 40%, #0c0c14 80%, #0f0f18 100%);
  position: relative;
}
/* Atmospheric glow behind the text */
.statement::before {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 40%;
  height: 200%;
  background: radial-gradient(ellipse 80% 80% at 20% 50%, rgba(200,171,116,.07) 0%, transparent 70%);
  pointer-events: none;
}
.statement__text {
  font-size: clamp(28px,3.8vw,64px);
  font-family: var(--font-d);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.08;
  color: var(--white);
  max-width: 1000px;
}
.statement__text em {
  font-style: normal;
  color: var(--k);
}

/* ══════════════════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════════════════ */
.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
  background: var(--iron);
  gap: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 24px 80px rgba(0,0,0,.45);
}
.feat__visual {
  position: relative;
  background: linear-gradient(148deg, #131324 0%, #0e0e1c 60%, #14141e 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.feat__visual-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(200,171,116,.09) 0%, transparent 68%);
  pointer-events: none;
}
.feat__bg-word {
  position: absolute;
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 180px;
  color: rgba(255,255,255,.022);
  text-transform: uppercase;
  letter-spacing: -.06em;
  user-select: none;
  pointer-events: none;
  transition: opacity .5s;
}
.feat__panel {
  background: var(--gun);
  display: flex;
  flex-direction: column;
}
.feat__item {
  padding: 28px 36px;
  border-bottom: 1px solid var(--iron);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background .25s, border-color .25s;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.feat__item:last-child { border-bottom: none; }
.feat__item:hover { background: var(--steel); }
.feat__item.active {
  background: var(--steel);
  border-left-color: var(--k);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 8px 0 24px -8px rgba(200,171,116,.08);
}
.feat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feat__title {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
}
.feat__tag {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--k);
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .25s;
}
.feat__item.active .feat__tag { opacity: 1; }
.feat__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s var(--ease), margin .35s;
}
.feat__item.active .feat__body { max-height: 140px; margin-top: 14px; }
.feat__desc { font-size: 13px; color: var(--dim); line-height: 1.75; }
/* Progress bar under active item */
.feat__progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  background: var(--k);
  width: 0%;
  transition: width 0s;
}
.feat__item.active .feat__progress {
  width: 100%;
  transition: width 4.2s linear;
}

/* ══════════════════════════════════════════════════════════
   USE CASES
══════════════════════════════════════════════════════════ */
.use {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  min-height: 580px;
  gap: 2px;
  background: var(--iron);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03);
}
.use__panel {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--gun);
}
.use__panel-bg {
  position: absolute;
  inset: 0;
  transition: transform .7s var(--ease);
}
.use__panel:hover .use__panel-bg { transform: scale(1.04); }
.use__panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9,9,16,.96) 0%, rgba(9,9,16,.4) 50%, rgba(9,9,16,.15) 100%);
}
/* Distinct tonal + color tint per panel */
.use__panel:nth-child(1) .use__panel-bg {
  background: linear-gradient(148deg, #111120 0%, #1a1628 100%);
}
.use__panel:nth-child(2) .use__panel-bg {
  background: linear-gradient(148deg, #0e1018 0%, #141820 100%);
}
.use__panel:nth-child(3) .use__panel-bg {
  background: linear-gradient(148deg, #13120e 0%, #1c1a14 100%);
}
.use__corner {
  position: absolute;
  top: 32px; right: 32px;
  width: 36px; height: 36px;
  border-top: 1px solid rgba(200,171,116,.2);
  border-right: 1px solid rgba(200,171,116,.2);
  transition: border-color .3s, transform .3s;
}
.use__panel:hover .use__corner {
  border-color: var(--k);
  transform: scale(1.15);
}
.use__content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 48px 40px;
  z-index: 2;
}
.use__num {
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: .24em;
  color: var(--k);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.use__title {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
  color: var(--white);
  margin-bottom: 14px;
}
.use__body {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.72;
  max-width: 260px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.use__panel:hover .use__body { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   PRODUCT SHOWCASE
══════════════════════════════════════════════════════════ */
.products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--iron);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.4);
}
.prod__card {
  background: var(--gun);
  padding: 60px 52px;
  position: relative;
  overflow: hidden;
  transition: background .35s;
  /* Specular top edge */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.prod__card:hover {
  background: var(--steel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),
              inset 0 0 80px rgba(200,171,116,.04);
}
.prod__chip {
  display: inline-block;
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: var(--k);
  color: var(--void);
  padding: 5px 14px;
  margin-bottom: 36px;
}
.prod__viz {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
}
/* 3D tilt wrapper */
.prod__tilt {
  transition: transform .05s linear;
  transform-style: preserve-3d;
}
.prod__name {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 44px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--white);
  margin-bottom: 10px;
}
.prod__desc {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.72;
  margin-bottom: 32px;
}
.prod__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.prod__price {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 32px;
  color: var(--k);
}
.prod__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--dim);
  text-transform: uppercase;
}
.prod__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3fb950;
  animation: dotPulse 2.2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(63,185,80,.4); }
  50%      { box-shadow: 0 0 0 5px rgba(63,185,80,0); }
}
.prod__card .btn-fill { width: 100%; justify-content: center; }

/* ══════════════════════════════════════════════════════════
   MATERIALS
══════════════════════════════════════════════════════════ */
.mat__layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 100px;
  align-items: start;
}
.mat__list { display: flex; flex-direction: column; gap: 2px; }
.mat__row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 28px 28px;
  background: var(--gun);
  border: 1px solid transparent;
  transition: border-color .25s, background .25s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.mat__row:hover {
  background: var(--steel);
  border-color: var(--blade);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              inset 0 0 40px rgba(200,171,116,.04);
}
.mat__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--k);
  margin-top: 7px;
  flex-shrink: 0;
}
.mat__name {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
  margin-bottom: 6px;
}
.mat__desc { font-size: 13px; color: var(--dim); line-height: 1.72; }
.mat__visual {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
  aspect-ratio: 3/4;
  background: linear-gradient(145deg, #14141e 0%, #0f0f1a 60%, #131320 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 24px 80px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.07);
}
.mat__visual-tex {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent, transparent 10px,
      rgba(200,171,116,.04) 10px, rgba(200,171,116,.04) 11px
    );
}
.mat__visual-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 38%, rgba(200,171,116,.1) 0%, transparent 65%);
}

/* ══════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════ */
.faq__list { display: flex; flex-direction: column; gap: 2px; }
.faq__item {
  background: var(--gun);
  border: 1px solid transparent;
  transition: border-color .25s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.faq__item.open {
  border-color: var(--blade);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.2);
}
.faq__trigger {
  width: 100%;
  padding: 26px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
  cursor: pointer;
  background: none;
}
.faq__q {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--white);
}
.faq__icon {
  width: 28px; height: 28px;
  border: 1px solid var(--iron);
  display: grid;
  place-items: center;
  color: var(--k);
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .4s var(--ease), border-color .25s;
}
.faq__item.open .faq__icon { transform: rotate(45deg); border-color: var(--k); }
.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s var(--ease);
}
.faq__item.open .faq__answer { max-height: 240px; }
.faq__a {
  margin: 0 36px 28px;
  padding-top: 20px;
  border-top: 1px solid var(--iron);
  font-size: 14px;
  color: var(--dim);
  line-height: 1.78;
}

/* ══════════════════════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════════════════════ */
.cta-section {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 200px var(--pad-x);
  /* Warm dark, tonally distinct from surrounding sections */
  background: linear-gradient(180deg, #12121e 0%, #0c0c18 40%, #0a0a16 70%, #0d0d1e 100%);
}
.cta-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--k-dim) 25%, var(--k-dk) 50%, var(--k-dim) 75%, transparent);
  box-shadow: 0 0 20px rgba(200,171,116,.15);
}
.cta__glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(200,171,116,.1) 0%, rgba(200,171,116,.04) 35%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}
.cta__ghost {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--font-d);
  font-weight: 900;
  font-size: min(28vw, 380px);
  color: rgba(255,255,255,.012);
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
  letter-spacing: -.03em;
}
.cta__inner { position: relative; z-index: 2; }
.cta__hed {
  font-size: clamp(60px, 8.5vw, 130px);
  color: var(--white);
  margin-bottom: 28px;
}
.cta__hed span { color: var(--k); }
.cta__sub {
  font-size: 15px;
  color: var(--dim);
  max-width: 420px;
  margin: 0 auto 52px;
  line-height: 1.78;
}
.cta__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.cta__note {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .22em;
  color: var(--blade);
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
#footer {
  background: var(--void);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 80px var(--pad-x) 44px;
  /* Subtle top lighting edge */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.footer__inner { max-width: 1440px; margin: 0 auto; }
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 64px;
  margin-bottom: 64px;
}
.footer__logo {
  display: block;
  line-height: 0;
  margin-bottom: 20px;
}
.footer__tag {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.7;
  max-width: 240px;
}
.footer__col-label {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .26em;
  color: var(--k);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a {
  font-size: 13px;
  color: var(--dim);
  transition: color .2s;
}
.footer__links a:hover { color: var(--light); }
.footer__bottom {
  padding-top: 24px;
  border-top: 1px solid var(--iron);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer__copy {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--blade);
  text-transform: uppercase;
}
.footer__legal {
  display: flex;
  gap: 28px;
}
.footer__legal a {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--blade);
  text-transform: uppercase;
  transition: color .2s;
}
.footer__legal a:hover { color: var(--mid); }

/* ══════════════════════════════════════════════════════════
   INNER PAGE HERO (product, about, faq, contact)
══════════════════════════════════════════════════════════ */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + 80px);
  padding-bottom: 80px;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  overflow: hidden;
  background: linear-gradient(158deg, #10101e 0%, #0a0a14 45%, #0d0d1a 100%);
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(200,171,116,.3), var(--iron) 40%, transparent 80%);
}
.page-hero__eyebrow { margin-bottom: 24px; }
.page-hero__h1 { font-size: clamp(56px,7vw,110px); color: var(--white); }
.page-hero__h1 em { font-style: normal; color: var(--k); }
.page-hero__sub {
  font-size: 15px;
  color: var(--dim);
  max-width: 480px;
  margin-top: 24px;
  line-height: 1.78;
}
.page-hero__bg-num {
  position: absolute;
  right: var(--pad-x);
  bottom: -20px;
  font-family: var(--font-d);
  font-weight: 900;
  font-size: clamp(120px,16vw,220px);
  color: rgba(255,255,255,.02);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  letter-spacing: -.04em;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
══════════════════════════════════════════════════════════ */
.pd__layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 2px;
  background: var(--iron);
  min-height: 600px;
}
.pd__gallery {
  background: linear-gradient(145deg, #131320 0%, #0e0e1c 55%, #13131e 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.pd__gallery-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(200,171,116,.06) 0%, transparent 65%);
  pointer-events: none;
}
.pd__gallery-floor {
  position: absolute;
  bottom: 0; left: -10%; right: -10%;
  height: 50%;
  background-image:
    linear-gradient(rgba(200,171,116,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,171,116,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(600px) rotateX(55deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
  pointer-events: none;
}
.pd__sidebar {
  background: var(--gun);
  padding: 60px 52px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset -1px 0 0 rgba(255,255,255,.02);
}
.pd__sku {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .28em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.pd__name {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: clamp(40px,4.5vw,68px);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 12px;
  line-height: .92;
}
.pd__tagline {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.72;
  margin-bottom: 36px;
}
.pd__variants {
  display: flex;
  gap: 10px;
  margin-bottom: 36px;
}
.pd__var-btn {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid var(--iron);
  cursor: pointer;
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mid);
  background: none;
  transition: border-color .25s, color .25s, background .25s;
  position: relative;
}
.pd__var-btn.active {
  border-color: var(--k);
  color: var(--k);
  background: rgba(200,171,116,.05);
}
.pd__var-swatch {
  display: block;
  width: 14px; height: 14px;
  border-radius: 50%;
  margin: 0 auto 8px;
}
.pd__var-btn[data-v="black"] .pd__var-swatch { background: #1a1a1a; border: 1px solid var(--iron); }
.pd__var-btn[data-v="khaki"] .pd__var-swatch { background: var(--k); }
.pd__specs {
  border: 1px solid var(--iron);
  margin-bottom: 36px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 20px rgba(0,0,0,.2);
}
.pd__spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid var(--iron);
  transition: background .2s;
}
.pd__spec:hover { background: rgba(255,255,255,.02); }
.pd__spec:last-child { border-bottom: none; }
.pd__spec-k {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.pd__spec-v {
  font-family: var(--font-m);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--silver);
}
.pd__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.pd__price {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 38px;
  color: var(--k);
}
.pd__stock {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--dim);
  text-transform: uppercase;
}
.pd__order-btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 14px;
}
.pd__guarantee {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--blade);
  text-transform: uppercase;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════════════════════ */
.about__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}
.about__body {
  font-size: 16px;
  color: var(--mid);
  line-height: 1.85;
  max-width: 560px;
}
.about__body + .about__body { margin-top: 24px; }
.about__values {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about__value {
  background: var(--gun);
  padding: 36px 36px;
  border-left: 2px solid var(--iron);
  transition: border-color .25s, background .25s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.about__value:hover {
  background: var(--steel);
  border-left-color: var(--k);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              inset 8px 0 24px -8px rgba(200,171,116,.07);
}
.about__value-num {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .28em;
  color: var(--k);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.about__value-title {
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--white);
  margin-bottom: 10px;
}
.about__value-desc { font-size: 13px; color: var(--dim); line-height: 1.72; }
.about__roadmap {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2px;
  background: var(--iron);
}
.roadmap__phase {
  background: var(--gun);
  padding: 44px 36px;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.roadmap__label {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .26em;
  color: var(--k);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.roadmap__title {
  font-family: var(--font-d);
  font-weight: 900;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--white);
  margin-bottom: 14px;
}
.roadmap__items { display: flex; flex-direction: column; gap: 8px; }
.roadmap__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--dim);
}
.roadmap__item::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--k-dk);
  flex-shrink: 0;
}
.roadmap__phase--active .roadmap__item::before { background: var(--k); }
.roadmap__phase--active {
  background: var(--steel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
              inset 0 0 60px rgba(200,171,116,.05);
}
.roadmap__active-tag {
  position: absolute;
  top: 0; right: 0;
  background: var(--k);
  color: var(--void);
  font-family: var(--font-m);
  font-size: 7px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 5px 12px;
}

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════════════════ */
.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 100px;
  align-items: start;
}
.contact__info-label {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .26em;
  color: var(--k);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.contact__info-val {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
  margin-bottom: 36px;
}
.contact__note {
  font-size: 13px;
  color: var(--dim);
  line-height: 1.72;
  border-left: 2px solid var(--iron);
  padding-left: 20px;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form__label {
  font-family: var(--font-m);
  font-size: 8px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dim);
}
.form__input,
.form__select,
.form__textarea {
  background: var(--gun);
  border: 1px solid var(--blade);
  color: var(--white);
  font-family: var(--font-b);
  font-size: 14px;
  padding: 14px 18px;
  transition: border-color .25s, background .25s;
  width: 100%;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--k-dk);
  background: var(--steel);
  box-shadow: 0 0 0 1px rgba(200,171,116,.15), 0 4px 20px rgba(0,0,0,.2);
}
.form__input::placeholder,
.form__textarea::placeholder { color: var(--muted); }
.form__textarea { resize: vertical; min-height: 140px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__submit {
  align-self: flex-start;
  margin-top: 8px;
}
.form__success {
  display: none;
  padding: 20px;
  background: rgba(63,185,80,.08);
  border: 1px solid rgba(63,185,80,.2);
  font-family: var(--font-m);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #3fb950;
}

/* ══════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════ */
#toast {
  position: fixed;
  bottom: 32px; right: 32px;
  background: var(--k);
  color: var(--void);
  font-family: var(--font-d);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 14px 26px;
  z-index: 9999;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
  pointer-events: none;
}
#toast.show { transform: none; opacity: 1; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .mat__layout { grid-template-columns: 1fr; gap: 48px; }
  .mat__visual { display: none; }
  .about__split { grid-template-columns: 1fr; gap: 48px; }
  .contact__layout { grid-template-columns: 1fr; gap: 52px; }
  .pd__layout { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --pad-x: 24px; --pad-s: 80px; }
  #nav { padding: 0 24px; }
  .nav__center { display: none; }
  .nav__cta  { display: none; }
  .nav__hamburger { display: flex; }
  .hero__viz { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .problem__grid { grid-template-columns: 1fr; }
  .problem__answer { flex-direction: column; gap: 16px; }
  .feat { grid-template-columns: 1fr; }
  .feat__visual { display: none; }
  .use { grid-template-columns: 1fr; }
  .products { grid-template-columns: 1fr; }
  .s-head { grid-template-columns: 1fr; gap: 24px; }
  .about__roadmap { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__bottom { flex-direction: column; gap: 20px; align-items: flex-start; }
  .cta__actions { flex-direction: column; align-items: center; }
  .form__row { grid-template-columns: 1fr; }
}