/* ============================================================
   TCM TUNING — cinematic motorsport one-pager
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* surfaces */
  --bg:        oklch(0.155 0.012 264);
  --bg-1:      oklch(0.185 0.015 264);
  --surface:   oklch(0.215 0.018 264);
  --surface-2: oklch(0.255 0.020 264);
  --line:      oklch(0.40 0.02 264 / 0.45);
  --line-soft: oklch(0.40 0.02 264 / 0.22);

  /* ink */
  --ink:   oklch(0.975 0.004 264);
  --ink-2: oklch(0.82 0.012 264);
  --muted: oklch(0.66 0.016 264);

  /* brand */
  --brand:     oklch(0.60 0.20 266);
  --brand-2:   oklch(0.72 0.16 258);
  --brand-3:   oklch(0.82 0.12 250);
  --glow:      oklch(0.65 0.22 264 / 0.55);
  --redline:   oklch(0.64 0.235 27);
  --amber:     oklch(0.82 0.155 78);

  /* type */
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* widths / rhythm */
  --pad: clamp(1.25rem, 4vw, 5rem);
  --maxw: 1440px;

  /* z-scale */
  --z-bg: 0;
  --z-content: 10;
  --z-hud: 20;
  --z-nav: 60;
  --z-menu: 70;
  --z-cursor: 90;
  --z-preload: 100;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-variation-settings:"wght" 400,"wdth" 100;
  background:var(--bg);
  color:var(--ink-2);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; height:100vh; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--brand); color:#fff; }

h1,h2,h3{ color:var(--ink); line-height:1.02; font-weight:900; letter-spacing:-0.02em; text-wrap:balance; }
em{ font-style:normal; color:var(--brand-2); }

/* shared display utility (expanded width) */
.h2{
  font-size:clamp(2.1rem, 5.2vw, 4.1rem);
  font-variation-settings:"wght" 800,"wdth" 118;
  text-transform:uppercase;
  letter-spacing:-0.025em;
}
.kicker{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brand-2);
  display:inline-block;
}

/* ---------- BUTTONS ---------- */
.btn{
  --bh: 3.25rem;
  display:inline-flex; align-items:center; gap:0.55rem;
  height:var(--bh); padding:0 1.5rem;
  font-family:var(--sans); font-weight:700; font-size:0.95rem;
  letter-spacing:0.01em;
  border-radius:2px;
  position:relative; overflow:hidden;
  transition:transform .5s var(--ease), color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn--sm{ --bh:2.6rem; padding:0 1.1rem; font-size:0.85rem; }
.btn>*{ position:relative; z-index:1; }
.btn--primary{ background:var(--brand); color:#fff; box-shadow:0 8px 30px -10px var(--glow); }
.btn--primary::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg,var(--brand-2),var(--brand));
  transform:translateY(101%); transition:transform .5s var(--ease-expo);
}
.btn--primary:hover::after{ transform:translateY(0); }
.btn--primary:hover{ box-shadow:0 14px 44px -10px var(--glow); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost::after{
  content:""; position:absolute; inset:0; z-index:0; background:var(--ink);
  transform:translateY(101%); transition:transform .5s var(--ease-expo);
}
.btn--ghost:hover{ color:var(--bg); border-color:var(--ink); }
.btn--ghost:hover::after{ transform:translateY(0); }

.link-arrow{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-weight:700; color:var(--ink); width:max-content;
  border-bottom:1px solid var(--line); padding-bottom:0.3rem;
  transition:gap .4s var(--ease), border-color .4s var(--ease);
}
.link-arrow svg{ transition:transform .4s var(--ease); }
.link-arrow:hover{ gap:0.85rem; border-color:var(--brand-2); }
.link-arrow:hover svg{ transform:translateX(4px); color:var(--brand-2); }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{ position:fixed; top:0; left:0; z-index:var(--z-cursor); pointer-events:none; mix-blend-mode:difference; }
.cursor__dot{
  position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%;
  background:#fff; transform:translate(-50%,-50%);
}
.cursor__ring{
  position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.7); transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), background-color .3s var(--ease), border-color .3s;
}
.cursor.is-hover .cursor__ring{ width:64px; height:64px; background:rgba(255,255,255,.08); }
.cursor.is-down .cursor__ring{ width:28px; height:28px; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none; } }

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:var(--z-preload);
  background:var(--bg);
  display:grid; place-items:center;
}
.preloader__inner{ width:min(80vw,360px); text-align:center; }
.preloader__logo{ width:140px; margin:0 auto 2rem; opacity:.95;
  filter:drop-shadow(0 0 24px var(--glow)); }
.preloader__bar{ height:2px; background:var(--line-soft); border-radius:2px; overflow:hidden; }
.preloader__fill{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--brand-3)); }
.preloader__readout{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:1rem; font-family:var(--mono); color:var(--muted);
}
.preloader__label{ font-size:0.65rem; letter-spacing:0.2em; }
.preloader__count{ color:var(--ink); font-size:1.4rem; font-weight:700; margin-left:auto; }
.preloader__unit{ font-size:0.7rem; color:var(--brand-2); margin-left:0.25rem; }
.preloader.is-done{ pointer-events:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  display:flex; align-items:center; gap:2rem;
  padding:1.15rem var(--pad);
  transition:padding .5s var(--ease), background-color .5s var(--ease), backdrop-filter .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding-top:0.7rem; padding-bottom:0.7rem;
  background:oklch(0.155 0.012 264 / 0.72);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
}
.nav__brand img{ height:44px; width:auto; transition:transform .5s var(--ease); }
.nav.is-stuck .nav__brand img{ height:38px; }
.nav__brand:hover img{ transform:scale(1.06); }
.nav__links{ display:flex; gap:2rem; margin-left:auto; }
.nav__links a{
  font-size:0.92rem; font-weight:600; color:var(--ink-2);
  position:relative; padding:0.2rem 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:100%;
  background:var(--brand-2); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta svg{ transition:transform .4s var(--ease); }
.nav__cta:hover svg{ transform:translateX(3px); }
.nav__burger{ display:none; flex-direction:column; gap:6px; width:34px; height:34px; align-items:center; justify-content:center; margin-left:auto; }
.nav__burger span{ width:24px; height:2px; background:var(--ink); transition:transform .4s var(--ease), opacity .3s; }
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:var(--bg); display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start; gap:0.5rem;
  padding:0 var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease-expo);
  pointer-events:none;
}
.mobile-menu.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:0.25rem; }
.mobile-menu a{
  font-family:var(--sans); font-variation-settings:"wght" 800,"wdth" 115;
  text-transform:uppercase; font-size:clamp(2rem,9vw,3.2rem); color:var(--ink);
  letter-spacing:-0.02em;
}
.mobile-menu a:active{ color:var(--brand-2); }
.mobile-menu__phone{ margin-top:2rem; font-family:var(--mono); color:var(--brand-2); font-size:1.1rem; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; width:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(2.5rem,6vh,5rem);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:var(--z-bg); }
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  will-change:transform;
}
.hero__grade{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 80% 10%, transparent 40%, oklch(0.155 0.012 264 / .55) 100%),
    linear-gradient(180deg, oklch(0.155 0.012 264 / .55) 0%, transparent 22%, transparent 45%, oklch(0.155 0.012 264 / .82) 88%, var(--bg) 100%);
}
.hero__scan{
  position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px);
}
.hero.is-frozen .hero__grade{ background:
    radial-gradient(120% 90% at 80% 10%, transparent 35%, oklch(0.155 0.012 264 / .6) 100%),
    linear-gradient(180deg, oklch(0.155 0.012 264 / .6) 0%, transparent 25%, transparent 42%, oklch(0.155 0.012 264 / .9) 86%, var(--bg) 100%);
  transition:background 1.2s var(--ease);
}

.hero__inner{ position:relative; z-index:var(--z-content); max-width:1100px; }
.hero__tag{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.18em;
  color:var(--ink); text-transform:uppercase;
  padding:0.5rem 0.9rem; border:1px solid var(--line);
  border-radius:100px; background:oklch(0.155 0.012 264 / .35);
  backdrop-filter:blur(6px); margin-bottom:1.4rem;
}
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--brand-2); box-shadow:0 0 0 0 var(--glow); animation:pulse 2.2s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 var(--glow);} 70%{ box-shadow:0 0 0 9px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

.hero__title{
  font-size:clamp(3.2rem, 11.5vw, 8.5rem);
  font-variation-settings:"wght" 900,"wdth" 122;
  text-transform:uppercase; line-height:0.9; letter-spacing:-0.035em;
  margin-bottom:1.5rem;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line>span{ display:block; }
.line--accent>span{
  color:transparent; -webkit-text-stroke:1.5px var(--brand-2);
  position:relative;
}
.line--accent>span::after{
  content:"PUTERE"; position:absolute; left:0; top:0; color:var(--brand-2);
  clip-path:inset(0 100% 0 0); transition:clip-path 1s var(--ease-expo);
}
.hero.is-revealed .line--accent>span::after{ clip-path:inset(0 0 0 0); transition-delay:.9s; }

.hero__sub{
  max-width:46ch; font-size:clamp(1rem,1.5vw,1.18rem); color:var(--ink-2);
  margin-bottom:2rem;
}
.hero__sub strong{ color:var(--ink); font-weight:700; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:0.9rem; }

.hero__slogan{
  position:absolute; right:var(--pad); bottom:clamp(2.5rem,6vh,5rem); z-index:var(--z-content);
  font-family:var(--sans); font-variation-settings:"wght" 700,"wdth" 75;
  font-style:italic; font-size:clamp(0.9rem,1.4vw,1.15rem);
  color:var(--muted); writing-mode:vertical-rl; text-orientation:mixed;
  letter-spacing:0.05em;
}
.hero__scroll{
  position:absolute; left:var(--pad); bottom:clamp(2.5rem,6vh,5rem); z-index:var(--z-content);
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
}
.hero__scroll-txt{ font-family:var(--mono); font-size:0.6rem; letter-spacing:0.3em; color:var(--muted); writing-mode:vertical-rl; }
.hero__scroll-line{ width:1px; height:54px; background:var(--line); overflow:hidden; position:relative; }
.hero__scroll-line i{ position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--brand-2); animation:scrolldn 2s var(--ease) infinite; }
@keyframes scrolldn{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(300%);} }

/* HUD */
.hud{
  position:absolute; top:clamp(5rem,12vh,7rem); right:var(--pad); z-index:var(--z-hud);
  width:180px; font-family:var(--mono); color:var(--ink);
  padding:0.9rem 1rem; border:1px solid var(--line-soft);
  background:oklch(0.155 0.012 264 / .35); backdrop-filter:blur(8px);
  border-radius:4px;
}
.hud__row{ display:flex; align-items:baseline; gap:0.4rem; font-size:0.7rem; }
.hud__k{ color:var(--muted); letter-spacing:0.12em; }
.hud__v{ margin-left:auto; font-size:1rem; font-weight:700; }
.hud__u{ color:var(--brand-2); font-size:0.6rem; }
.hud__bar{ height:3px; background:var(--line-soft); margin:0.35rem 0 0.7rem; border-radius:2px; overflow:hidden; }
.hud__bar span{ display:block; height:100%; width:10%; background:var(--brand-2); }
.hud__bar span[data-hud-bar="rpm"]{ background:var(--amber); }

/* ============================================================
   STATS
   ============================================================ */
.stats{
  display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
  padding:clamp(3.5rem,8vh,6.5rem) var(--pad);
  max-width:var(--maxw); margin:0 auto;
  border-bottom:1px solid var(--line-soft);
}
.stats__lead p{ font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--ink); margin-top:0.8rem; text-wrap:balance; }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.stat{ background:var(--bg); padding:1.6rem 1.2rem; }
.stat__num{
  display:block; font-family:var(--mono); font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.9rem); color:var(--ink); line-height:1;
  letter-spacing:-0.03em;
}
.stat__num::first-letter{ color:var(--brand-2); }
.stat__label{ display:block; margin-top:0.5rem; font-size:0.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,10vh,8rem) var(--pad);
}
.about__media{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:4px; }
.about__media img{ position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; filter:saturate(.92) brightness(.92); }
.about__media-tag{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  font-family:var(--mono); font-size:0.72rem; color:var(--ink);
  padding:0.5rem 0.8rem; background:oklch(0.155 0.012 264 / .6); backdrop-filter:blur(8px);
  border:1px solid var(--line-soft); border-radius:3px;
}
.about__media-tag span{ color:var(--brand-2); }
.about__body .h2{ margin:0.9rem 0 1.3rem; }
.about__body>p{ font-size:1.05rem; max-width:54ch; }
.about__list{ list-style:none; margin:1.8rem 0; display:flex; flex-direction:column; gap:1rem; }
.about__list li{ position:relative; padding-left:1.6rem; color:var(--ink-2); max-width:52ch; }
.about__list li::before{
  content:""; position:absolute; left:0; top:0.62em; width:9px; height:9px;
  background:var(--brand); transform:rotate(45deg);
}
.about__list strong{ color:var(--ink); font-weight:700; }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ max-width:var(--maxw); margin:0 auto; padding:clamp(3rem,8vh,6rem) var(--pad); position:relative; }
.services__head{ margin-bottom:2.5rem; }
.services__head .h2{ margin-top:0.6rem; }
.svc-list{ border-top:1px solid var(--line-soft); }
.svc{
  display:grid; grid-template-columns:auto 1fr auto auto;
  align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.6rem,3.5vw,2.6rem) 0;
  border-bottom:1px solid var(--line-soft);
  position:relative; cursor:pointer;
  transition:padding-left .5s var(--ease);
}
.svc::before{
  content:""; position:absolute; inset:0 -1.5rem; z-index:-1;
  background:var(--surface); opacity:0; transform:scaleX(.96);
  transition:opacity .5s var(--ease), transform .5s var(--ease); border-radius:4px;
}
.svc:hover{ padding-left:1.5rem; }
.svc:hover::before{ opacity:1; transform:scaleX(1); }
.svc__idx{ font-family:var(--mono); font-size:0.9rem; color:var(--brand-2); padding-top:0.2rem; align-self:start; }
.svc__title{
  font-size:clamp(1.4rem,3.4vw,2.4rem); font-variation-settings:"wght" 800,"wdth" 110;
  text-transform:uppercase; letter-spacing:-0.02em; line-height:1; color:var(--ink);
  transition:color .4s var(--ease);
}
.svc:hover .svc__title{ color:var(--brand-3); }
.svc__desc{ margin-top:0.7rem; max-width:60ch; color:var(--ink-2); font-size:0.98rem;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s var(--ease), opacity .5s var(--ease), margin-top .5s var(--ease); }
.svc:hover .svc__desc{ max-height:8rem; opacity:1; }
.svc__meta{ font-family:var(--mono); font-size:0.74rem; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; justify-self:end; white-space:nowrap; }
.svc__plus{ position:relative; width:22px; height:22px; flex:none; }
.svc__plus::before,.svc__plus::after{ content:""; position:absolute; left:50%; top:50%; background:var(--ink); transform:translate(-50%,-50%); transition:transform .5s var(--ease); }
.svc__plus::before{ width:16px; height:1.5px; }
.svc__plus::after{ width:1.5px; height:16px; }
.svc:hover .svc__plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.svc:hover .svc__plus::before{ background:var(--brand-2); }

/* cursor-following preview */
.svc-preview{
  position:fixed; top:0; left:0; z-index:5; width:300px; height:200px;
  border-radius:6px; overflow:hidden; pointer-events:none;
  opacity:0; transform:translate(-50%,-50%) scale(.85);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7); border:1px solid var(--line);
}
.svc-preview.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.svc-preview img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   PROCES — horizontal scroll
   ============================================================ */
.proc{ position:relative; background:var(--bg-1); }
.proc__pin{ height:100svh; overflow:hidden; display:flex; align-items:center; }
.proc__track{ display:flex; gap:clamp(1.5rem,3vw,3rem); padding:0 var(--pad); will-change:transform; flex:none; width:max-content; }
.proc__panel{ flex:none; }
.proc__intro{ width:min(80vw,520px); display:flex; flex-direction:column; justify-content:center; }
.proc__h{ font-size:clamp(2.2rem,5vw,4rem); font-variation-settings:"wght" 800,"wdth" 116; text-transform:uppercase; margin:1rem 0; letter-spacing:-0.025em; line-height:0.98; }
.proc__intro p{ font-size:1.1rem; color:var(--ink-2); max-width:34ch; }
.proc__hint{ display:inline-flex; align-items:center; gap:0.5rem; margin-top:2rem; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--brand-2); }
.proc__hint svg{ animation:nudge 1.6s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(6px);} }

.proc__step{
  position:relative; width:min(78vw,440px); height:min(70svh,580px);
  border-radius:6px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  padding:2rem; border:1px solid var(--line-soft);
}
.proc__photo{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(1.02) brightness(.92) contrast(1.02); transform:scale(1.05);
  transition:transform .9s var(--ease);
}
.proc__step:hover .proc__photo{ transform:scale(1.11); }
.proc__step::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, oklch(0.155 0.012 264 / .5) 0%, oklch(0.155 0.012 264 / 0) 24%, oklch(0.155 0.012 264 / 0) 46%, oklch(0.155 0.012 264 / .6) 66%, oklch(0.155 0.012 264 / .95) 100%); }
.proc__step>*:not(.proc__photo){ position:relative; z-index:2; }
.proc__num{ font-family:var(--mono); font-size:0.95rem; color:var(--brand-2); position:absolute; top:1.6rem; left:2rem; }
.proc__num::before{ content:"STEP "; color:var(--muted); }
.proc__step h3{ font-size:clamp(1.5rem,3vw,2.1rem); font-variation-settings:"wght" 800,"wdth" 112; text-transform:uppercase; letter-spacing:-0.02em; margin-bottom:0.7rem; }
.proc__step p{ color:var(--ink-2); max-width:38ch; font-size:0.98rem; }

.proc__progress{ position:absolute; left:var(--pad); right:var(--pad); bottom:2.2rem; height:2px; background:var(--line-soft); z-index:3; }
.proc__progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--brand-3)); }

/* ============================================================
   DYNO
   ============================================================ */
.dyno{ max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,10vh,8rem) var(--pad); }
.dyno__head{ max-width:60ch; margin-bottom:3rem; }
.dyno__head .h2{ margin:0.6rem 0 1rem; }
.dyno__head p{ color:var(--ink-2); }
.dyno__chart{ display:grid; grid-template-columns:1.6fr 0.9fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.dyno__svg{ width:100%; height:auto; background:
    linear-gradient(180deg, var(--surface), var(--bg-1));
  border:1px solid var(--line-soft); border-radius:6px; padding:0.5rem; }
.dyno__grid line{ stroke:var(--line); stroke-width:1; }
.dyno__grid line.dim{ stroke:var(--line-soft); }
.dyno__axis .ax{ fill:var(--muted); font-family:var(--mono); font-size:13px; }
.dyno__axis .ax--unit{ fill:var(--brand-2); }
.dyno__area{ fill:url(#dynoFill); opacity:0; }
.dyno__line{ fill:none; stroke-width:3.5; stroke-linecap:round; }
.dyno__line--stock{ stroke:var(--muted); stroke-dasharray:6 7; }
.dyno__line--tuned{ stroke:var(--brand-2); filter:drop-shadow(0 0 10px var(--glow)); }
.dyno__readout{ display:flex; flex-direction:column; gap:1.4rem; }
.dyno__metric{ border-left:0; }
.dyno__delta{ display:block; font-family:var(--mono); font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem); color:var(--ink); line-height:1; }
.dyno__delta i{ font-style:normal; font-size:0.4em; color:var(--brand-2); }
.dyno__cap{ font-size:0.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; }
.dyno__legend{ display:flex; gap:1.2rem; margin-top:0.5rem; font-family:var(--mono); font-size:0.78rem; }
.lg{ display:inline-flex; align-items:center; gap:0.45rem; color:var(--ink-2); }
.lg::before{ content:""; width:18px; height:3px; border-radius:2px; }
.lg--stock::before{ background:var(--muted); }
.lg--tuned::before{ background:var(--brand-2); }

/* ============================================================
   BRANDS marquee
   ============================================================ */
.brands{ padding:clamp(3rem,7vh,5rem) 0; border-block:1px solid var(--line-soft); overflow:hidden; }
.brands__head{ padding:0 var(--pad); margin-bottom:2.5rem; max-width:var(--maxw); margin-inline:auto; }
.brands__head .h2{ margin-top:0.6rem; }
.marquee{ display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee--rev{ margin-top:1rem; }
.marquee__track{ display:flex; gap:1rem; flex:none; will-change:transform; }
.brand-chip{
  flex:none; width:150px; height:84px; display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:4px;
  transition:background-color .4s var(--ease), border-color .4s, transform .4s var(--ease);
}
.brand-chip img{ max-height:46px; max-width:90px; width:auto; object-fit:contain;
  filter:grayscale(1) brightness(1.4) contrast(.9); opacity:.7;
  transition:filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease); }
.brand-chip:hover{ background:var(--surface-2); border-color:var(--line); transform:translateY(-3px); }
.brand-chip:hover img{ filter:none; opacity:1; transform:scale(1.06); }

/* ============================================================
   TEAM
   ============================================================ */
.team{ max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,10vh,8rem) var(--pad); }
.team__head{ margin-bottom:3rem; }
.team__head .h2{ margin-top:0.6rem; }
.team__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.6rem); }
.member{ position:relative; }
.member--lift{ transform:translateY(2.4rem); }
.member__photo{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:5px; border:1px solid var(--line-soft); background:var(--surface); }
.member__photo img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  filter:grayscale(.4) brightness(.95) contrast(1.02);
  transition:transform .8s var(--ease), filter .6s var(--ease); }
.member__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, oklch(0.155 0.012 264 / .85) 100%); opacity:.7; transition:opacity .5s; }
.member:hover .member__photo img{ transform:scale(1.06); filter:grayscale(0) brightness(1); }
.member:hover .member__photo::after{ opacity:1; }
.member__info{ position:absolute; left:1.1rem; right:1.1rem; bottom:1.1rem; z-index:2; }
.member__info h3{ font-size:1.15rem; font-variation-settings:"wght" 800,"wdth" 108; text-transform:uppercase; letter-spacing:-0.01em; }
.member__info span{ display:block; font-family:var(--mono); font-size:0.72rem; color:var(--brand-3); margin-top:0.25rem;
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.member:hover .member__info span{ opacity:1; transform:translateY(0); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ max-width:var(--maxw); margin:0 auto; padding:clamp(4rem,10vh,8rem) var(--pad) clamp(3rem,6vh,5rem); }
.contact__cta{ text-align:center; max-width:none; margin:0 auto 4rem; }
.contact__big{
  font-size:clamp(2.5rem,8.5vw,6.5rem); font-variation-settings:"wght" 900,"wdth" 120;
  text-transform:uppercase; line-height:0.92; letter-spacing:-0.035em; margin-bottom:1.5rem;
}
.cb-line{ display:block; }
.contact__big .cb-line>span{ display:inline-block; }
.cb-line--accent>span{ color:transparent; -webkit-text-stroke:1.5px var(--brand-2); }
.contact__cta p{ font-size:1.1rem; color:var(--ink-2); margin:0 auto 2rem; max-width:42ch; }
.contact__actions{ display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap; }
.contact__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:6px; overflow:hidden; }
.cinfo{ background:var(--bg); padding:2rem 1.8rem; display:flex; flex-direction:column; gap:0.3rem; transition:background-color .4s var(--ease); }
.cinfo:hover{ background:var(--surface); }
.cinfo__k{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--brand-2); margin-bottom:0.6rem; }
.cinfo__v{ font-size:1.2rem; color:var(--ink); font-weight:700; }
.cinfo__s{ font-size:0.92rem; color:var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line-soft); padding:clamp(2.5rem,6vh,4rem) var(--pad) 2rem; max-width:var(--maxw); margin:0 auto; }
.footer__top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-bottom:2.5rem; border-bottom:1px solid var(--line-soft); }
.footer__brand img{ height:30px; margin-bottom:1rem; }
.footer__brand p{ max-width:40ch; color:var(--muted); font-size:0.92rem; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:1.2rem; align-content:flex-start; }
.footer__nav a{ font-size:0.92rem; color:var(--ink-2); transition:color .3s; }
.footer__nav a:hover{ color:var(--brand-2); }
.footer__bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.5rem; font-family:var(--mono); font-size:0.72rem; color:var(--muted); }

/* ============================================================
   REVEAL defaults (enhance already-visible content)
   ============================================================ */
[data-reveal],[data-reveal-word]{ will-change:transform,opacity; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .stats{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .about__media{ aspect-ratio:16/10; }
  .dyno__chart{ grid-template-columns:1fr; }
  .team__grid{ grid-template-columns:repeat(2,1fr); gap:1.2rem; }
  .member--lift{ transform:none; }
}
/* PROCES — native swipe carousel on touch/small screens (no JS pin) */
@media (max-width:768px){
  .proc__pin{ height:auto; display:block; overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:clamp(2.5rem,7vh,4rem) 0; scrollbar-width:none; }
  .proc__pin::-webkit-scrollbar{ display:none; }
  .proc__track{ transform:none !important; align-items:stretch; }
  .proc__panel{ scroll-snap-align:center; }
  .proc__intro{ width:78vw; }
  .proc__step{ width:78vw; height:auto; min-height:62vh; }
  .proc__progress{ display:none; }
  .proc__hint{ margin-top:1.2rem; }
}

@media (max-width:760px){
  .nav{ padding:0.9rem var(--pad); }
  .nav__brand img{ height:38px; }
  .nav.is-stuck .nav__brand img{ height:34px; }
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .hero{ padding-bottom:clamp(2rem,5vh,3.5rem); }
  .hero__scroll{ display:none; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .svc{ grid-template-columns:auto 1fr; row-gap:0.5rem; }
  .svc__meta{ grid-column:2; justify-self:start; }
  .svc__plus{ display:none; }
  .svc__desc{ max-height:none; opacity:1; } /* always show on touch */
  .contact__cards{ grid-template-columns:1fr; }
  .footer__top{ flex-direction:column; gap:1.5rem; }
  .footer__bottom{ flex-direction:column; }
  .hud{ display:none; }
  .hero__slogan{ display:none; }
  .cursor{ display:none; }
}

/* fine tuning for small phones */
@media (max-width:480px){
  :root{ --pad:1.15rem; }
  .hero__title{ font-size:clamp(2.6rem,13.5vw,3.8rem); }
  .hero__tag{ font-size:0.64rem; padding:0.45rem 0.75rem; }
  .hero__sub{ font-size:1rem; }
  .hero__actions{ width:100%; }
  .hero__actions .btn{ flex:1 1 150px; justify-content:center; }
  .h2{ font-size:clamp(1.9rem,7.8vw,2.5rem); }
  .stat{ padding:1.2rem 0.9rem; }
  .stat__num{ font-size:clamp(1.7rem,8vw,2rem); }
  .about__body>p{ font-size:1rem; }
  .svc__idx{ font-size:0.78rem; }
  .svc__title{ font-size:1.5rem; }
  .proc__h{ font-size:clamp(2rem,8.5vw,2.7rem); }
  .proc__step{ width:84vw; min-height:58vh; padding:1.5rem; }
  .proc__intro{ width:84vw; }
  .dyno__delta{ font-size:clamp(2.2rem,10vw,3rem); }
  .contact__big{ font-size:clamp(2.3rem,12.5vw,3.4rem); }
  .cinfo{ padding:1.6rem 1.4rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero__video{ display:none; }
  .hero__media{ background:linear-gradient(180deg,var(--surface),var(--bg)); }
  .preloader{ display:none; }
}