/* ============================================================
   GRUPA KIL — style.css  v2
   premium athletic landing page
   ============================================================ */

/* ── VARIABLES ──────────────────────────────────────────────── */
:root {
  --g:          #5aff00;          /* accent green */
  --g10:        rgba(90,255,0,.10);
  --g20:        rgba(90,255,0,.20);
  --g40:        rgba(90,255,0,.40);

  --bg:         #080808;
  --bg1:        #0d0d0d;
  --bg2:        #131313;
  --bg3:        #1c1c1c;

  --w:          #ffffff;
  --w60:        rgba(255,255,255,.60);
  --w30:        rgba(255,255,255,.30);
  --w10:        rgba(255,255,255,.07);
  --w05:        rgba(255,255,255,.03);

  --fd:         'Barlow Condensed', sans-serif;
  --fb:         'Barlow', sans-serif;

  --ease:       cubic-bezier(.16,1,.3,1);
  --ease2:      cubic-bezier(.4,0,.2,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--w);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img, video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }

/* ── CUSTOM CURSOR ──────────────────────────────────────────── */
.cursor-dot {
  display: none;
  position: fixed;
  width: 8px; height: 8px;
  background: var(--g);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform .1s, width .2s var(--ease), height .2s var(--ease);
  mix-blend-mode: difference;
}

@media (pointer:fine) {
  .cursor-dot { display:block; }
  body { cursor: none; }
  a, button { cursor: none; }
}

/* ── CONTAINER ──────────────────────────────────────────────── */
.container {
  width: min(1400px,100%);
  margin-inline: auto;
  padding-inline: clamp(1.25rem,5vw,5rem);
}

/* page max-width cap at 1920px */
body > * { max-width: 1920px; margin-inline: auto; }

/* ── EYEBROW ────────────────────────────────────────────────── */
.eyebrow-line, .el {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--g);
  vertical-align: middle;
  margin-right: .7rem;
  flex-shrink: 0;
}

.about__eyebrow, .values__eyebrow,
.numbers__eyebrow, .cta__eyebrow {
  display: flex;
  align-items: center;
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--g);
  margin-bottom: 2rem;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fd);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .8rem 1.75rem;
  border-radius: 2px;
  border: none;
  cursor: none;
  transition: all .3s var(--ease);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* primary: clean white/dark — not neon-slapping */
.btn--primary {
  background: var(--w);
  color: #000;
}

.btn--primary svg { transition: transform .3s var(--ease); }
.btn--primary:hover {
  background: #e8e8e8;
  transform: translateY(-2px);
}
.btn--primary:hover svg { transform: translateX(3px); }
.btn--primary:active { transform: translateY(0); box-shadow: none; }

/* ghost */
.btn--ghost {
  background: transparent;
  color: var(--w60);
  border: 1px solid rgba(255,255,255,.18);
}
.btn--ghost:hover {
  border-color: rgba(255,255,255,.5);
  color: var(--w);
  transform: translateY(-2px);
}
.btn--ghost:active { transform: translateY(0); }

.btn--lg {
  font-size: 14px;
  padding: 1rem 2.25rem;
}

/* ── TAGS ───────────────────────────────────────────────────── */
.tag {
  font-family: var(--fd);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g);
  background: var(--g10);
  border: 1px solid rgba(90,255,0,.2);
  padding: .3rem .75rem;
  border-radius: 2px;
}

/* ── REVEAL ANIMATIONS ──────────────────────────────────────── */

/* HERO — fires on load */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
}
[data-reveal].is-live {
  animation: revealUp .85s var(--ease) forwards;
}
[data-delay="0"]  { animation-delay: .05s !important; }
[data-delay="1"]  { animation-delay: .12s !important; }
[data-delay="2"]  { animation-delay: .24s !important; }
[data-delay="3"]  { animation-delay: .4s  !important; }
[data-delay="4"]  { animation-delay: .56s !important; }
[data-delay="5"]  { animation-delay: .7s  !important; }
[data-delay="6"]  { animation-delay: .84s !important; }

@keyframes revealUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── SCROLL REVEALS — all variants ─────────────────────────── */

/* fade up — default */
.reveal-up {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal-up.on { opacity:1; transform:translateY(0); }

/* fade from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal-left.on { opacity:1; transform:translateX(0); }

/* clip reveal — text masking */
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease);
}
.reveal-clip.on { clip-path: inset(0 0% 0 0); }

/* value panels — slide up + fade */
.reveal-panel {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-panel.on { opacity:1; transform:translateY(0); }

/* number rows — slide from left */
.reveal-nrow {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-nrow.on { opacity:1; transform:translateX(0); }

/* scale-in for CTA right side */
.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal-scale.on { opacity:1; transform:scale(1); }

/* fade only */
.reveal-fade {
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.reveal-fade.on { opacity:1; }

/* ── STAGGER HELPERS ────────────────────────────────────────── */
/* eyebrow always fastest */
.about__eyebrow.reveal-up,
.values__eyebrow .reveal-up,
.numbers__eyebrow .reveal-up,
.cta__eyebrow .reveal-up { transition-delay: 0s; }

.reveal-up + .reveal-up   { transition-delay: .1s; }

/* value panels */
.vp:nth-child(2).reveal-panel { transition-delay: .1s; }
.vp:nth-child(3).reveal-panel { transition-delay: .2s; }

/* number rows */
.nrow[data-idx="1"].reveal-nrow { transition-delay: .14s; }
.nrow[data-idx="2"].reveal-nrow { transition-delay: .28s; }

/* about text stagger */
.about__lead.reveal-up   { transition-delay: .05s; }
.about__p.reveal-up:nth-of-type(1) { transition-delay: .15s; }
.about__p.reveal-up:nth-of-type(2) { transition-delay: .25s; }
.about__tags.reveal-up   { transition-delay: .35s; }

/* cta stagger */
.cta__eyebrow.reveal-up   { transition-delay: 0s; }
.cta__headline.reveal-up  { transition-delay: .1s; }
.cta__text.reveal-up      { transition-delay: .22s; }
.cta__right .reveal-up    { transition-delay: .3s; }

/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  background: #000;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0; z-index: 1;
  background:
    linear-gradient(160deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 50%),
    linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.97) 100%);
}

/* subtle film grain */
.hero__grain {
  position: absolute;
  inset: 0; z-index: 2;
  opacity: .4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.hero__content {
  position: relative; z-index: 3;
  width: 100%;
  padding: clamp(2rem,6vw,5rem) clamp(1.25rem,5vw,5rem);
  padding-bottom: clamp(3.5rem,7vh,6rem);
}

/* top bar */
.hero__topbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: clamp(2rem,5vh,4rem);
}

.hero__dog {
  width: 34px; height: 34px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.hero__brand-label {
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--w60);
  text-transform: uppercase;
}

.hero__brand-dash {
  color: var(--g);
  font-size: .8rem;
  opacity: .7;
}

.hero__brand-city {
  font-family: var(--fd);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  color: var(--w30);
  text-transform: uppercase;
}

/* headline */
.hero__headline {
  font-family: var(--fd);
  font-size: clamp(5.5rem,12vw,14rem);
  font-weight: 900;
  line-height: .87;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin-bottom: clamp(1.5rem,3vh,2.5rem);
}

.hero__hl { display: block; }
.hero__hl--accent { color: var(--g); }

/* sub row: motto left, CTAs right */
.hero__subrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem,5vh,4rem);
}

.hero__sub {
  font-family: var(--fb);
  font-size: clamp(.88rem,1.3vw,1rem);
  font-weight: 300;
  color: var(--w60);
  letter-spacing: .06em;
  line-height: 1.5;
}

.hero__ctas {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* stats strip */
.hero__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--w10);
  padding-top: 1.5rem;
}

.hero__stat {
  padding: .75rem 1.5rem .75rem 0;
}

/* remove separators on mobile grid — use border instead */
.hero__stat-sep { display: none; }

/* desktop: back to flex row */
@media (min-width: 700px) {
  .hero__stats {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
  }

  .hero__stat {
    padding: 0 clamp(1.5rem,3vw,3rem) 0 0;
  }

  .hero__stat-sep {
    display: block;
    width: 1px;
    height: 36px;
    background: var(--w10);
    margin-right: clamp(1.5rem,3vw,3rem);
    flex-shrink: 0;
    align-self: center;
  }
}

.hero__stat-val {
  font-family: var(--fd);
  font-size: clamp(1.3rem,2.2vw,1.8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--w);
  letter-spacing: -.01em;
}

.hero__stat-val b {
  font-family: var(--fd);
  font-size: .6rem;
  font-weight: 600;
  color: var(--g);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-left: .2rem;
  vertical-align: middle;
  font-style: normal;
}

.hero__stat-lbl {
  font-size: .62rem;
  font-weight: 400;
  color: var(--w30);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .25rem;
}

/* scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  right: clamp(1.25rem,5vw,5rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.hero__scroll span {
  font-family: var(--fd);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--w30);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hero__scroll-rail {
  width: 1px;
  height: 56px;
  background: var(--w10);
  position: relative;
  overflow: hidden;
}

.hero__scroll-pill {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, transparent, var(--g));
  animation: scrollTrail 1.8s ease-in-out infinite;
}

@keyframes scrollTrail {
  0%   { top:-50%; }
  100% { top:150%; }
}

/* ════════════════════════════════════════════════════════════
   MARQUEE
════════════════════════════════════════════════════════════ */
.marquee-wrap {
  background: #111;
  border-top: 1px solid var(--w10);
  border-bottom: 1px solid var(--w10);
  overflow: hidden;
  padding: .7rem 0;
  position: relative;
  z-index: 10;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: mScroll 36s linear infinite;
}

.marquee-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.mi, .md {
  font-family: var(--fd);
  font-size: clamp(.7rem,1.2vw,.82rem);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--w30);
  padding-inline: .5rem;
  line-height: 1;
}

.md { opacity:.3; padding-inline:.25rem; }
.mi--a { color: var(--g); }

@keyframes mScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion:reduce) {
  .marquee-track { animation-play-state:paused; }
}

/* ════════════════════════════════════════════════════════════
   ABOUT
════════════════════════════════════════════════════════════ */
.about {
  padding: clamp(4rem,8vh,7rem) 0;
  background: var(--bg1);
  position: relative;
  overflow: hidden;
}

.about__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,6rem);
  align-items: start;
}

.about__left-col {
  position: sticky;
  top: 4rem;
}

.about__headline {
  font-family: var(--fd);
  font-size: clamp(3.5rem,6.5vw,7.5rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.about__hl-word {
  display: block;
  color: var(--w);
}

.about__hl-word--accent {
  color: var(--g);
}

/* stagger the two headline words */
.about__hl-word:nth-child(1).reveal-up { transition-delay: 0s; }
.about__hl-word:nth-child(2).reveal-up { transition-delay: .12s; }

.about__qline {
  width: 40px;
  height: 2px;
  background: var(--g);
  margin-top: 2rem;
  transition: width .8s var(--ease);
}
.about__qline.on { width: 80px; }

.about__text-col {
  padding-top: .25rem;
}

.about__lead {
  font-size: clamp(.95rem,1.3vw,1.1rem);
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  color: var(--w);
}

.about__p {
  font-size: .92rem;
  color: var(--w60);
  line-height: 1.8;
  margin-bottom: .9rem;
}
.about__p strong { color: var(--w); font-weight: 600; }

.about__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.5rem;
}

.about__deco {
  margin-top: clamp(2rem,4vh,3.5rem);
  display: flex;
  justify-content: flex-end;
  opacity: .04;
  pointer-events: none;
}
.about__deco img {
  width: clamp(80px,12vw,140px);
  filter: brightness(0) invert(1);
}

/* ════════════════════════════════════════════════════════════
   VALUES — full-bleed panels
════════════════════════════════════════════════════════════ */
.values {
  background: var(--bg);
  padding-top: clamp(4rem,8vh,7rem);
  padding-bottom: clamp(4rem,8vh,7rem);
}

.values__eyebrow {
  margin-bottom: clamp(2rem,4vh,3.5rem);
}

/* each panel is full-width with a left-border accent on hover */
.vp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  padding: clamp(2.5rem,4vw,4rem) clamp(1.25rem,5vw,5rem);
  border-top: 1px solid var(--w10);
  transition: background .35s;
  cursor: default;
}

.vp:last-child { border-bottom: 1px solid var(--w10); }

.vp::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--g);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s var(--ease);
}

.vp:hover { background: var(--bg2); }
.vp:hover::before { transform: scaleY(1); }

/* left side: no number - removed */

/* content block */
.vp__body {
  grid-column: 1 / 2;
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}

.vp__icon {
  width: 32px; height: 32px;
  color: var(--g);
  flex-shrink: 0;
  margin-top: .3rem;
  transition: transform .35s var(--ease);
}

.vp__icon svg { width:100%; height:100%; }
.vp:hover .vp__icon { transform: scale(1.2) rotate(-5deg); }

.vp__title {
  font-family: var(--fd);
  font-size: clamp(2.5rem,4vw,4.5rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.01em;
  color: var(--w);
  transition: color .3s;
}

.vp:hover .vp__title { color: var(--g); }

.vp__text {
  font-size: .88rem;
  color: var(--w60);
  line-height: 1.7;
  margin-top: .75rem;
  max-width: 380px;
}

/* ghost big text right side */
.vp__ghost {
  position: absolute;
  right: clamp(1.25rem,5vw,5rem);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fd);
  font-size: clamp(3rem,8vw,9rem);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px var(--w05);
  letter-spacing: -.02em;
  line-height: 1;
  pointer-events: none;
  transition: -webkit-text-stroke-color .35s, color .35s;
  user-select: none;
}

.vp:hover .vp__ghost {
  -webkit-text-stroke-color: var(--g20);
}

/* ════════════════════════════════════════════════════════════
   NUMBERS — stacked oversized rows
════════════════════════════════════════════════════════════ */
.numbers {
  background: #000;
  padding: clamp(5rem,10vh,9rem) 0;
  position: relative;
  overflow: hidden;
}

.numbers::before {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(90,255,0,.05) 0%, transparent 70%);
  pointer-events:none;
}

.numbers__eyebrow {
  margin-bottom: clamp(2rem,4vh,3.5rem);
}

.nstack {
  width: 100%;
}

.nrow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: end;
  padding: clamp(1.5rem,3vh,2.5rem) clamp(1.25rem,5vw,5rem);
  border-top: 1px solid var(--w10);
  position: relative;
  overflow: hidden;
  transition: background .3s;
}

.nrow:last-child { border-bottom: 1px solid var(--w10); }
.nrow:hover { background: var(--bg2); }

.nrow::before {
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:0;
  background: var(--g10);
  transition: width .6s var(--ease);
}

.nrow.on::before { width: 100%; }

.nrow__label {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--fd);
  font-size: clamp(.7rem,1vw,.85rem);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--w30);
  margin-bottom: .4rem;
  position: relative;
  z-index: 1;
}

.nrow__val-wrap {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  position: relative;
  z-index: 1;
}

.nrow__val {
  font-family: var(--fd);
  font-size: clamp(4rem,9vw,10rem);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--g);
}

.nrow__unit {
  font-family: var(--fd);
  font-size: clamp(1rem,1.8vw,1.8rem);
  font-weight: 600;
  color: var(--w30);
  letter-spacing: .05em;
}

.nrow__bar-bg {
  grid-column: 1 / -1;
  grid-row: 3;
  height: 2px;
  background: var(--w10);
  border-radius: 99px;
  margin-top: 1.25rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.nrow__bar-fg {
  height: 100%;
  background: linear-gradient(90deg, var(--g) 0%, rgba(90,255,0,.4) 100%);
  border-radius: 99px;
  width: 0;
  transition: width 1.5s var(--ease);
}

.nrow.on .nrow__bar-fg {
  /* width driven by JS */
}

/* ════════════════════════════════════════════════════════════
   CTA — diagonal split
════════════════════════════════════════════════════════════ */
.cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(500px,70vh,800px);
  overflow: hidden;
}

.cta__left {
  background: var(--bg1);
  display: flex;
  align-items: center;
  padding: clamp(4rem,8vw,8rem) clamp(1.25rem,6vw,6rem);
  position: relative;
}

.cta__left::after {
  content: '';
  position: absolute;
  top: 0; right: -40px; bottom: 0;
  width: 80px;
  background: var(--bg1);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
  z-index: 1;
}

.cta__left-inner { max-width: 560px; position: relative; z-index: 2; }

.cta__headline {
  font-family: var(--fd);
  font-size: clamp(3.5rem,6vw,7rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}

.cta__text {
  font-size: clamp(.88rem,1.2vw,1rem);
  color: var(--w60);
  line-height: 1.75;
  margin-bottom: 2rem;
  font-weight: 300;
  max-width: 440px;
}

.cta__right {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: clamp(3rem,6vw,6rem);
  position: relative;
  overflow: hidden;
}

.cta__dog {
  width: clamp(60px,8vw,90px);
  height: clamp(60px,8vw,90px);
  object-fit: contain;
  /* green tint */
  opacity: .85;
}

.cta__big-text {
  font-family: var(--fd);
  font-size: clamp(3.5rem,7vw,8rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .88;
  letter-spacing: -.02em;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(90,255,0,.35);
}

/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
.footer {
  background: #000;
  border-top: 1px solid var(--w10);
  padding: 1.75rem 0;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
}

.footer__left {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fd);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.footer__dog {
  width: 26px; height: 26px;
  object-fit: contain;
  opacity: .6;
}

.footer__mid {
  font-size: .75rem;
  color: var(--w30);
}

.footer__right {
  font-family: var(--fd);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--g);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

/* VALUES — tablet */
@media (max-width:900px) {
  .vp {
    grid-template-columns: 1fr;
    padding-left: clamp(1.25rem,5vw,3rem);
    padding-right: clamp(1.25rem,5vw,3rem);
  }

  .vp__num  { position:relative; top:auto; left:auto; transform:none; margin-bottom:.75rem; font-size:4rem; -webkit-text-stroke-width:1px; }
  .vp__body { grid-column:1; }
  .vp__ghost { display:none; }

  .about__body { grid-template-columns:1fr; gap:2rem; }
  .about__left-col { position: static; }
  .about__headline { font-size: clamp(2.8rem,9vw,5rem); }

  .cta {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .cta__left::after { display:none; }
  .cta__right { padding: 3rem 2rem; }

  .hero__subrow { flex-direction: column; align-items: flex-start; }
}

/* MOBILE */
@media (max-width:600px) {
  .hero__headline { font-size: clamp(4rem,20vw,6.5rem); }
  .hero__ctas { flex-direction: column; width: 100%; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .nrow__val { font-size:clamp(3rem,15vw,6rem); }

  .footer__inner { flex-direction:column; align-items:flex-start; }
}

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--g); border-radius:99px; }

/* ── SELECTION ──────────────────────────────────────────────── */
::selection { background:var(--g); color:#000; }