/* ============================================================
   ELITE WRAP & PPF STUDIO — Design System
   Hollywood, FL · Premium PPF / Wraps / Ceramic / Tint
   Palette: matte black + champagne gold
   Type: Sora (display) + Inter (body)
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  /* surfaces */
  --bg:        #08080A;
  --bg-2:      #0C0D11;
  --surface:   #131419;
  --surface-2: #1A1C23;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);

  /* ink */
  --text:      #F4F2ED;
  --muted:     #9C998F;
  --muted-2:   #6E6C66;

  /* gold */
  --gold-1:#F8E3A6;
  --gold-2:#E3B85A;
  --gold:  #D9A741;
  --gold-3:#A9781F;
  --gold-grad: linear-gradient(135deg,#F8E3A6 0%,#E3B85A 38%,#C9962F 70%,#9C6E1C 100%);
  --gold-soft: rgba(217,167,65,.14);
  --gold-line: rgba(217,167,65,.40);

  /* fx */
  --radius:   18px;
  --radius-sm:12px;
  --radius-lg:26px;
  --shadow:   0 30px 80px -30px rgba(0,0,0,.85);
  --shadow-gold: 0 24px 60px -24px rgba(217,167,65,.35);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* layout */
  --maxw: 1240px;
  --gut: clamp(20px,5vw,64px);
  --topbar-h: 40px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:"Satoshi",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit }
ul{ list-style:none }
input,textarea,select{ font-family:inherit; font-size:1rem; color:inherit }
::selection{ background:var(--gold); color:#000 }

/* subtle film grain + vignette on body */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(217,167,65,.10), transparent 55%),
    radial-gradient(100% 60% at 100% 0%, rgba(217,167,65,.05), transparent 60%);
}

/* ---------- TYPOGRAPHY ---------- */
h1,h2,h3,h4{ font-family:"Clash Display",sans-serif; font-weight:700; line-height:1.04; letter-spacing:-.02em }
h1{ font-size:clamp(2.6rem,7vw,5.6rem); font-weight:700 }
h2{ font-size:clamp(2rem,4.6vw,3.5rem) }
h3{ font-size:clamp(1.3rem,2.4vw,1.8rem) }
p{ color:var(--muted) }
strong{ color:var(--text); font-weight:600 }

.display{ font-family:"Clash Display",sans-serif }
.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Satoshi",sans-serif; font-weight:600;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-2);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold-line) }
.eyebrow.center::after{ content:""; width:26px; height:1px; background:var(--gold-line) }
.lead{ font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--muted); max-width:62ch }

/* ---------- LAYOUT ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:1 }
.section{ padding-block:clamp(72px,11vw,140px); position:relative; z-index:1 }
.section.tight{ padding-block:clamp(48px,7vw,90px) }
.section-head{ max-width:760px; margin-bottom:clamp(36px,5vw,64px) }
.section-head.center{ margin-inline:auto; text-align:center }
.section-head .eyebrow{ margin-bottom:20px }
.section-head p{ margin-top:18px; font-size:1.08rem }
.divider{ height:1px; background:var(--line); border:0 }
.bg-2{ background:var(--bg-2) }
.surface{ background:var(--surface) }

/* ---------- BUTTONS ---------- */
.btn{
  --b: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:100px;
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  border:1px solid var(--b);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap; will-change:transform;
}
.btn svg{ width:18px; height:18px }
.btn:hover{ transform:translateY(-3px) }
.btn-primary{
  background:var(--gold-grad); color:#1a1303; font-weight:700;
  box-shadow:var(--shadow-gold);
}
.btn-primary:hover{ box-shadow:0 30px 70px -22px rgba(217,167,65,.55) }
.btn-ghost{ --b:var(--line-2); color:var(--text); background:rgba(255,255,255,.02) }
.btn-ghost:hover{ --b:var(--gold-line); background:var(--gold-soft) }
.btn-dark{ background:#000; color:#fff; --b:rgba(255,255,255,.12) }
.btn-lg{ padding:18px 34px; font-size:1.02rem }
.btn-block{ width:100% }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; color:var(--gold-2); font-size:.95rem;
}
.link-arrow svg{ width:16px; height:16px; transition:transform .35s var(--ease) }
.link-arrow:hover svg{ transform:translateX(5px) }

/* ---------- TOPBAR ---------- */
.topbar{
  height:var(--topbar-h); background:#000; border-bottom:1px solid var(--line);
  font-size:.8rem; position:relative; z-index:60;
}
.topbar .container{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px }
.topbar-left{ display:flex; gap:26px; color:var(--muted) }
.topbar-item{ display:inline-flex; align-items:center; gap:8px }
.topbar-item svg{ width:14px; height:14px; color:var(--gold-2) }
.topbar-right{ display:flex; align-items:center; gap:22px }
.topbar-right a{ color:var(--text); font-weight:600; display:inline-flex; align-items:center; gap:8px }
.topbar-right a svg{ width:14px; height:14px; color:var(--gold-2) }
.topbar-star{ color:var(--gold-2); font-weight:600 }
@media(max-width:880px){ .topbar-left{ display:none } .topbar .container{ justify-content:center } }

/* ---------- HEADER ---------- */
.header{ position:sticky; top:14px; z-index:50; transition:top .4s }
.header .container{
  display:flex; align-items:center; gap:20px;
  background:rgba(11,12,16,.92);
  border:1px solid var(--line-2); border-radius:80px;
  padding:9px 9px 9px 26px; box-shadow:0 20px 54px -28px rgba(0,0,0,.95);
  transition:background .4s, border-color .4s;
}
.header.scrolled .container{ background:rgba(9,9,12,.9); border-color:var(--line) }
@media(max-width:680px){
  .header{ top:0 }
  .header .container{ border-radius:0; border-left:0; border-right:0; padding:12px var(--gut) }
}

.logo{ display:flex; align-items:center; gap:13px }
.logo-mark{
  width:52px; height:52px; flex:none; position:relative;
  background:url(../logo/logo.png) center/contain no-repeat;
}
.logo-mark svg{ display:none }
.logo-text{ display:flex; flex-direction:column; line-height:1 }
.logo-text .name{ font-family:"Clash Display",sans-serif; font-weight:700; font-size:1.02rem; letter-spacing:.02em }
.logo-text .sub{ font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-2); margin-top:4px }

.nav{ display:flex; align-items:center; gap:2px; margin-left:auto }
.nav>a,.nav-item>a{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:11px 17px; font-size:.92rem; font-weight:500; color:var(--muted);
  transition:color .25s;
}
.nav>a::after,.nav-item>a::after{
  content:""; position:absolute; left:17px; right:17px; bottom:4px; height:2px; border-radius:2px;
  background:var(--gold-grad); transform:scaleX(0); transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav>a:hover,.nav-item:hover>a,.nav>a.active{ color:var(--text) }
.nav>a:hover::after,.nav-item:hover>a::after,.nav>a.active::after{ transform:scaleX(1) }
.nav>a.active{ color:var(--gold-2) }

.nav-item{ position:relative }
.dropdown{
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(8px);
  width:560px; background:rgba(20,21,26,.96); backdrop-filter:blur(20px); border:1px solid var(--line-2);
  border-radius:var(--radius); padding:12px; box-shadow:var(--shadow);
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  opacity:0; visibility:hidden; transition:opacity .3s, transform .3s var(--ease);
}
.dropdown::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px }
.nav-item:hover .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.dropdown a{ display:flex; gap:13px; padding:13px; border-radius:12px; transition:background .25s }
.dropdown a:hover{ background:var(--surface-2) }
.dropdown .di-ic{ width:38px; height:38px; flex:none; border-radius:10px; background:var(--gold-soft); display:grid; place-items:center }
.dropdown .di-ic svg{ width:19px; height:19px; color:var(--gold-2) }
.dropdown strong{ display:block; font-size:.92rem; font-weight:600 }
.dropdown span{ display:block; font-size:.78rem; color:var(--muted-2); margin-top:2px }

.header-cta{ display:flex; align-items:center; gap:12px }
.menu-toggle{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2); place-items:center }
.menu-toggle svg{ width:22px; height:22px }

@media(max-width:1080px){
  .nav{ display:none }
  .menu-toggle{ display:grid }
  .header-cta .btn-ghost{ display:none }
}

/* ---------- MOBILE MENU ---------- */
.menu-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.35s; z-index:70 }
.menu-backdrop.open{ opacity:1; visibility:visible }
.mobile-menu{
  position:fixed; top:0; right:0; height:100dvh; width:min(380px,86vw);
  background:var(--bg-2); border-left:1px solid var(--line); z-index:80;
  transform:translateX(100%); transition:transform .45s var(--ease);
  padding:26px 24px; display:flex; flex-direction:column; gap:6px; overflow-y:auto;
}
.mobile-menu.open{ transform:translateX(0) }
.mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px }
.mobile-menu-close{ width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); display:grid; place-items:center }
.mobile-menu nav{ display:flex; flex-direction:column }
.mobile-menu nav a{ padding:14px 6px; border-bottom:1px solid var(--line); font-size:1.05rem; font-weight:500; color:var(--text) }
.mobile-menu nav a.sub{ padding-left:22px; font-size:.95rem; color:var(--muted) }
.mobile-menu .mm-cta{ margin-top:22px; display:flex; flex-direction:column; gap:12px }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:clamp(620px,94vh,960px); display:flex; align-items:center; overflow:hidden; isolation:isolate }
.hero-media{ position:absolute; inset:0; z-index:-2 }
.hero-media img,.hero-media video{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05) }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,6,9,.92) 0%, rgba(6,6,9,.62) 46%, rgba(6,6,9,.18) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(6,6,9,.35) 24%, transparent 52%);
}
.hero-glow{ position:absolute; top:-20%; left:-10%; width:60%; height:80%; z-index:-1;
  background:radial-gradient(circle, rgba(217,167,65,.18), transparent 65%); filter:blur(40px) }
.hero-inner{ max-width:760px; padding-block:120px }
.hero .eyebrow{ margin-bottom:26px }
.hero h1{ margin-bottom:24px }
.hero h1 .gold-text{ display:inline-block }
.hero-sub{ font-size:clamp(1.05rem,1.5vw,1.25rem); color:#d9d6cf; max-width:54ch; margin-bottom:38px }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:42px }
.hero-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px }
.hero-trust .ht{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--muted) }
.hero-trust .stars{ color:var(--gold-2); letter-spacing:2px }
.hero-trust strong{ color:var(--text) }
.hero-trust .dot{ width:4px; height:4px; border-radius:50%; background:var(--muted-2) }
.scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); z-index:2 }
.scroll-cue .mouse{ width:22px; height:36px; border:1.5px solid var(--line-2); border-radius:14px; position:relative }
.scroll-cue .mouse::after{ content:""; position:absolute; top:7px; left:50%; width:3px; height:7px; border-radius:3px; background:var(--gold-2); transform:translateX(-50%); animation:wheel 1.6s var(--ease) infinite }
@keyframes wheel{ 0%{opacity:1; top:7px} 70%{opacity:0; top:17px} 100%{opacity:0} }

/* ---------- BRAND MARQUEE / TRUST STRIP ---------- */
.brandstrip{ border-block:1px solid var(--line); background:var(--bg-2); padding-block:26px }
.brandstrip .label{ text-align:center; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted-2); margin-bottom:20px }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.marquee-track{ display:flex; gap:64px; width:max-content; animation:scrollx 32s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
.brand-logo{ font-family:"Clash Display",sans-serif; font-weight:700; font-size:1.4rem; letter-spacing:.04em; color:var(--muted); opacity:.65; transition:opacity .3s,color .3s; white-space:nowrap }
.brand-logo:hover{ opacity:1; color:var(--gold-2) }
.brand-logo small{ font-size:.6rem; letter-spacing:.2em; vertical-align:super; color:var(--muted-2) }
@keyframes scrollx{ to{ transform:translateX(-50%) } }

/* ---------- STATS ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.stat{ background:var(--bg-2); padding:34px 26px; text-align:center }
.stat .num{ font-family:"Clash Display",sans-serif; font-weight:700; font-size:clamp(2.2rem,4vw,3rem); line-height:1 }
.stat .lbl{ margin-top:10px; font-size:.82rem; letter-spacing:.04em; color:var(--muted) }
@media(max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr) } }

/* ---------- SERVICE CARDS ---------- */
.grid{ display:grid; gap:22px }
.grid-3{ grid-template-columns:repeat(3,1fr) }
.grid-2{ grid-template-columns:repeat(2,1fr) }
@media(max-width:980px){ .grid-3{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:680px){ .grid-3,.grid-2{ grid-template-columns:1fr } }

.scard{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  padding:30px; overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.scard::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 0% 0%, var(--gold-soft), transparent 50%); opacity:0; transition:opacity .5s }
.scard:hover{ transform:translateY(-6px); border-color:var(--gold-line); box-shadow:var(--shadow) }
.scard:hover::before{ opacity:1 }
.scard .ic{ width:54px; height:54px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; margin-bottom:22px; position:relative }
.scard .ic svg{ width:26px; height:26px; color:var(--gold-2) }
.scard h3{ font-size:1.3rem; margin-bottom:10px }
.scard p{ font-size:.95rem; margin-bottom:20px }
.scard .link-arrow{ position:relative }
.scard .num-tag{ position:absolute; top:24px; right:28px; font-family:"Clash Display",sans-serif; font-weight:700; font-size:1rem; color:var(--line-2) }

/* big editorial feature row */
.feature-row{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:center }
.feature-row.flip{ direction:rtl } .feature-row.flip>*{ direction:ltr }
.feature-media{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--surface); position:relative }
.feature-media img{ width:100%; height:100%; object-fit:cover }
.feature-body .eyebrow{ margin-bottom:18px }
.feature-body h2{ margin-bottom:18px }
.feature-list{ display:flex; flex-direction:column; gap:14px; margin:26px 0 32px }
.feature-list li{ display:flex; gap:13px; align-items:flex-start; color:var(--muted) }
.feature-list .chk{ width:24px; height:24px; flex:none; border-radius:50%; background:var(--gold-soft); display:grid; place-items:center; margin-top:1px }
.feature-list .chk svg{ width:13px; height:13px; color:var(--gold-2) }
.feature-list strong{ display:block }
@media(max-width:860px){ .feature-row,.feature-row.flip{ grid-template-columns:1fr; direction:ltr } }

/* ---------- BEFORE / AFTER SLIDER ---------- */
.ba{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; user-select:none; touch-action:none; background:#000 }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none }
.ba .after{ clip-path:inset(0 0 0 50%) }
.ba .ba-label{ position:absolute; bottom:16px; padding:7px 14px; border-radius:100px; font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); border:1px solid var(--line-2) }
.ba .lbl-before{ left:16px } .ba .lbl-after{ right:16px; color:var(--gold-2) }
.ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--gold); transform:translateX(-50%) }
.ba-grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; border-radius:50%; background:var(--gold-grad); display:grid; place-items:center; box-shadow:0 6px 24px rgba(0,0,0,.5); cursor:ew-resize }
.ba-grip svg{ width:24px; height:24px; color:#1a1303 }
/* Before/After showcase — real client build as the block's hero */
.ba-section{ position:relative; overflow:hidden }
.ba-section::before{ content:''; position:absolute; left:-8%; top:50%; width:62%; height:130%; transform:translateY(-50%); background:radial-gradient(closest-side, rgba(230,178,78,.15), transparent 72%); pointer-events:none }
.ba-section .container{ position:relative; z-index:1 }
.feature-row--ba{ grid-template-columns:1.32fr .68fr; gap:clamp(34px,5vw,82px) }
.feature-row--ba .ba{ aspect-ratio:16/9; border:1px solid rgba(230,178,78,.34); box-shadow:0 54px 120px -46px rgba(0,0,0,.92), 0 0 0 1px rgba(230,178,78,.10), 0 26px 90px -54px rgba(230,178,78,.5) }
.ba-badge{ position:absolute; top:16px; left:16px; z-index:4; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:#1a1303; background:linear-gradient(135deg,#F8E3A6,#D9A741); padding:7px 12px; border-radius:100px; font-weight:700; box-shadow:0 8px 24px -8px rgba(0,0,0,.6) }
@media(max-width:860px){ .feature-row--ba{ grid-template-columns:1fr } }

/* ---------- PROCESS ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step }
.pstep{ position:relative; padding-top:30px }
.pstep::before{ counter-increment:step; content:"0" counter(step); font-family:"Clash Display",sans-serif; font-weight:700; font-size:1rem; color:var(--gold-2); position:absolute; top:0; left:0 }
.pstep::after{ content:""; position:absolute; top:8px; left:34px; right:-11px; height:1px; background:var(--line) }
.pstep:last-child::after{ display:none }
.pstep h3{ font-size:1.18rem; margin:16px 0 8px }
.pstep p{ font-size:.92rem }
.pstep .pdot{ width:14px; height:14px; border-radius:50%; border:2px solid var(--gold); background:var(--bg); position:absolute; top:1px; left:62px }
@media(max-width:860px){ .process{ grid-template-columns:1fr 1fr } .pstep::after{ display:none } }
@media(max-width:480px){ .process{ grid-template-columns:1fr } }

/* ---------- WHY / FEATURE GRID ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.why-cell{ background:var(--bg-2); padding:34px 30px; transition:background .4s }
.why-cell:hover{ background:var(--surface) }
.why-cell .ic{ width:48px; height:48px; border-radius:12px; background:var(--gold-soft); display:grid; place-items:center; margin-bottom:20px }
.why-cell .ic svg{ width:23px; height:23px; color:var(--gold-2) }
.why-cell h3{ font-size:1.15rem; margin-bottom:9px }
.why-cell p{ font-size:.93rem }
@media(max-width:860px){ .why-grid{ grid-template-columns:1fr } }

/* ---------- GALLERY ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.gallery a{ position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1; background:var(--surface); border:1px solid var(--line) }
.gallery a.tall{ grid-row:span 2; aspect-ratio:1/2 }
.gallery a.wide{ grid-column:span 2; aspect-ratio:2/1 }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease) }
.gallery a:hover img{ transform:scale(1.06) }
.gallery a::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.5),transparent 50%); opacity:0; transition:.4s }
.gallery a:hover::after{ opacity:1 }
@media(max-width:860px){ .gallery{ grid-template-columns:repeat(2,1fr) } .gallery a.wide{ grid-column:span 2 } .gallery a.tall{ grid-row:span 1; aspect-ratio:1 } }

/* ---------- REVIEWS ---------- */
.rev-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-bottom:40px }
.gscore{ display:flex; align-items:center; gap:18px; padding:18px 24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-2) }
.gscore .big{ font-family:"Clash Display",sans-serif; font-weight:700; font-size:2.6rem; line-height:1 }
.gscore .stars{ color:var(--gold-2); letter-spacing:2px; font-size:1.05rem }
.gscore .sub{ font-size:.82rem; color:var(--muted); margin-top:3px }
.gscore .g-ic{ width:26px; height:26px }
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.review{ border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:28px; display:flex; flex-direction:column; gap:16px }
.review .stars{ color:var(--gold-2); letter-spacing:2px }
.review p{ color:var(--text); font-size:1.02rem; line-height:1.6 }
.review .who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px }
.review .av{ width:40px; height:40px; border-radius:50%; background:var(--gold-grad); display:grid; place-items:center; font-weight:700; color:#1a1303; font-family:"Clash Display",sans-serif }
.review .who .nm{ font-weight:600; font-size:.92rem }
.review .who .src{ font-size:.76rem; color:var(--muted-2) }
@media(max-width:980px){ .reviews{ grid-template-columns:1fr 1fr } }
@media(max-width:680px){ .reviews{ grid-template-columns:1fr } }

/* ---------- CTA / QUOTE BAND ---------- */
.cta-band{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--gold-line); padding:clamp(40px,6vw,80px); text-align:center; isolation:isolate }
.cta-band::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg,#15110a,#0c0d11 60%) }
.cta-band::after{ content:""; position:absolute; inset:-2px; z-index:-1; background:radial-gradient(60% 120% at 50% 0%, rgba(217,167,65,.22), transparent 60%) }
.cta-band h2{ margin-bottom:18px } .cta-band p{ max-width:56ch; margin:0 auto 32px; font-size:1.1rem }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }

/* ---------- QUOTE FORM ---------- */
.quote-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,64px); align-items:start }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(26px,4vw,40px) }
.field{ margin-bottom:18px }
.field label{ display:block; font-size:.82rem; font-weight:600; letter-spacing:.04em; color:var(--muted); margin-bottom:9px }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:12px; transition:border-color .25s, box-shadow .25s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--gold-line); box-shadow:0 0 0 4px var(--gold-soft) }
.field textarea{ resize:vertical; min-height:96px }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form-note{ font-size:.8rem; color:var(--muted-2); margin-top:14px; text-align:center }
.form-success{ display:none; text-align:center; padding:30px 10px }
.form-success.show{ display:block }
.form-success .ok{ width:62px; height:62px; margin:0 auto 18px; border-radius:50%; background:var(--gold-soft); display:grid; place-items:center }
.form-success .ok svg{ width:30px; height:30px; color:var(--gold-2) }

.contact-aside .ca-item{ display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line) }
.contact-aside .ca-item:first-child{ padding-top:0 }
.ca-ic{ width:46px; height:46px; flex:none; border-radius:12px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center }
.ca-ic svg{ width:21px; height:21px; color:var(--gold-2) }
.ca-item .ca-l{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:4px }
.ca-item .ca-v{ font-size:1.05rem; font-weight:600 }
.ca-item .ca-v a:hover{ color:var(--gold-2) }
.map-embed{ margin-top:24px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); height:240px }
.map-embed iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) hue-rotate(180deg) }
@media(max-width:860px){ .quote-wrap{ grid-template-columns:1fr } .field-row{ grid-template-columns:1fr } }

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{ position:relative; padding-block:clamp(70px,11vw,130px) clamp(40px,6vw,70px); overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line) }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(80% 120% at 80% -10%, var(--gold-soft), transparent 55%) }
.page-hero .crumbs{ font-size:.82rem; color:var(--muted); margin-bottom:20px; display:flex; gap:9px; align-items:center }
.page-hero .crumbs a:hover{ color:var(--gold-2) }
.page-hero .crumbs span{ color:var(--muted-2) }
.page-hero h1{ max-width:18ch }
.page-hero p{ margin-top:20px; max-width:60ch; font-size:1.12rem }

/* ---------- FOOTER ---------- */
.footer{ background:var(--bg-2); border-top:1px solid var(--line); padding-top:clamp(56px,8vw,90px); position:relative; z-index:1 }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--line) }
.footer .logo{ margin-bottom:20px }
.footer-about p{ font-size:.92rem; max-width:34ch; margin-bottom:22px }
.foot-social{ display:flex; gap:10px }
.foot-social a{ width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); display:grid; place-items:center; transition:.3s }
.foot-social a:hover{ border-color:var(--gold-line); background:var(--gold-soft); color:var(--gold-2) }
.foot-social svg{ width:19px; height:19px }
.foot-col h4{ font-family:"Satoshi",sans-serif; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:20px; font-weight:700 }
.foot-col a,.foot-col p{ display:block; font-size:.94rem; color:var(--muted); padding:7px 0; transition:color .25s }
.foot-col a:hover{ color:var(--gold-2) }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding-block:26px; font-size:.84rem; color:var(--muted-2) }
.footer-bottom a:hover{ color:var(--muted) }
@media(max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr } }

/* ---------- STICKY MOBILE ACTION BAR ---------- */
.mobile-bar{ position:fixed; bottom:0; left:0; right:0; z-index:60; display:none; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(8,8,10,.97); border-top:1px solid var(--line) }
.mobile-bar .btn{ flex:1; padding:14px }
@media(max-width:680px){ .mobile-bar{ display:flex } body{ padding-bottom:76px } .scroll-cue{ display:none } }

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.reveal.in{ opacity:1; transform:none }
@media(prefers-reduced-motion:reduce){ .reveal{ filter:none } }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
  .reveal{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}

/* ============================================================
   V2 — visual-forward additions
   ============================================================ */

/* ---------- MEGA-MENU footer link ---------- */
.dropdown .dd-all{ grid-column:1/-1; justify-content:center; align-items:center; gap:8px; margin-top:4px; padding-top:15px; border-top:1px solid var(--line); color:var(--gold-2); font-weight:600; font-size:.9rem }
.dropdown .dd-all:hover{ background:transparent; color:var(--gold-1) }
.dropdown .dd-all svg{ width:15px; height:15px; transition:transform .35s var(--ease) }
.dropdown .dd-all:hover svg{ transform:translateX(4px) }

/* ---------- HERO bottom trust strip ---------- */
.hero-strip{ position:absolute; left:0; right:0; bottom:0; z-index:3; border-top:1px solid var(--line); background:linear-gradient(0deg, rgba(6,6,9,.94), rgba(6,6,9,.15)); }
.hero-strip .container{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; padding-block:16px }
.hero-strip .hs{ display:flex; align-items:center; gap:9px; font-size:.85rem; color:var(--muted) }
.hero-strip .hs strong{ color:var(--text); font-weight:600 }
.hero-strip .stars{ color:var(--gold-2); letter-spacing:1px }
.hero-strip .dot{ width:4px; height:4px; border-radius:50%; background:var(--muted-2) }
@media(max-width:680px){ .hero-strip{ position:static; background:var(--bg-2) } }

/* ---------- SERVICE image tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.stile{ position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); display:block }
.stile img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease) }
.stile:hover img{ transform:scale(1.08) }
.stile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,5,8,.95) 4%, rgba(5,5,8,.35) 48%, rgba(5,5,8,.04) 100%) }
.stile .st-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:24px; transform:translateY(8px); transition:transform .5s var(--ease) }
.stile:hover .st-body{ transform:translateY(0) }
.stile .st-tag{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); font-weight:600 }
.stile h3{ font-size:1.45rem; margin:8px 0 0; color:#fff }
.stile .st-go{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:.85rem; font-weight:600; color:#fff; opacity:0; transform:translateY(6px); transition:.45s var(--ease) }
.stile:hover .st-go{ opacity:1; transform:none }
.stile .st-go svg{ width:15px; height:15px }
@media(max-width:900px){ .tiles{ grid-template-columns:1fr 1fr } }
@media(max-width:560px){ .tiles{ grid-template-columns:1fr } .stile{ aspect-ratio:4/3 } }

/* ---------- AMBIENT video band ---------- */
.vband{ position:relative; overflow:hidden; isolation:isolate; border-block:1px solid var(--line) }
.vband video,.vband .vbg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2 }
.vband::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(6,6,9,.94) 0%, rgba(6,6,9,.7) 50%, rgba(6,6,9,.45) 100%); }
.vband .container{ padding-block:clamp(72px,11vw,140px) }
.vband h2{ max-width:15ch } .vband p{ max-width:46ch; margin-top:16px }
.vband .cta-actions{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap }

/* ============================================================
   V3 — motion backgrounds, car strip, 3D tilt, real-photo CTA
   ============================================================ */

/* ---------- Animated aurora backgrounds ---------- */
.fx{ position:relative; isolation:isolate; overflow:hidden }
.fx>.container{ position:relative; z-index:1 }
.fx::before,.fx::after{ display:none }  /* removed: 10 animated blur(110px) layers tanked scroll perf; bg now in body */
.fx::before{ width:48vw; height:48vw; top:-16%; left:-12%; background:radial-gradient(circle, rgba(217,167,65,.26), transparent 66%); animation:auroraA 22s ease-in-out infinite alternate }
.fx::after{ width:44vw; height:44vw; bottom:-20%; right:-10%; background:radial-gradient(circle, rgba(96,140,210,.16), transparent 66%); animation:auroraB 26s ease-in-out infinite alternate }
@keyframes auroraA{ to{ transform:translate(16%,18%) scale(1.2) } }
@keyframes auroraB{ to{ transform:translate(-14%,-12%) scale(1.16) } }

/* ---------- Moving car strip (cars sliding sideways) ---------- */
.carstrip{ overflow:hidden; border-block:1px solid var(--line); background:var(--bg-2); padding-block:20px; position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent) }
.carstrip-track{ display:flex; gap:18px; width:max-content; animation:scrollx 55s linear infinite }
.carstrip:hover .carstrip-track{ animation-play-state:paused }
.carstrip figure{ position:relative; flex:none; width:clamp(260px,28vw,380px); aspect-ratio:16/10; border-radius:16px; overflow:hidden; border:1px solid var(--line) }
.carstrip img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.25) brightness(.92); transition:filter .5s, transform .9s var(--ease) }
.carstrip figure:hover img{ filter:none; transform:scale(1.06) }
.carstrip figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,5,8,.55), transparent 55%) }
.carstrip figcaption{ position:absolute; left:14px; bottom:12px; z-index:2; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; opacity:.85 }

/* ---------- 3D tilt on service tiles ---------- */
.tiles{ perspective:1300px }
.stile{ transform-style:preserve-3d; will-change:transform; transition:transform .4s var(--ease) }

/* ---------- before/after realism (one photo, dull vs protected) ---------- */
.ba .after{ filter:saturate(1.05) }

/* ---------- Final CTA (aurora + parallax car photo, no video) ---------- */
.cta-final{ text-align:center }
.cta-final .cta-bgimg{ position:absolute; left:0; top:-14%; width:100%; height:128%; object-fit:cover; z-index:-2; opacity:.62; filter:grayscale(0) contrast(1.07) saturate(1.1) brightness(1.04) }
.cta-final::before{ content:""; position:absolute; inset:0; z-index:-1; background:
   radial-gradient(48% 56% at 50% 47%, rgba(5,6,10,.84), rgba(5,6,10,.34) 60%, transparent 84%),
   linear-gradient(180deg, var(--bg), transparent 16%, transparent 84%, var(--bg)) }
.cta-final h2{ margin-bottom:18px } .cta-final p{ max-width:52ch; margin:0 auto 30px; font-size:1.1rem }
.cta-final .cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
@media(prefers-reduced-motion:reduce){ .carstrip-track,.fx::before,.fx::after{ animation:none !important } }

/* ============================================================
   V4 — custom cursor · pinned horizontal scroll · drive-by · kinetic type
   ============================================================ */

/* ---------- Custom cursor (fine pointers only) ---------- */
html.has-cursor, html.has-cursor *{ cursor:none !important }
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; border-radius:50%; z-index:10000; will-change:transform }
.cursor-dot{ width:6px; height:6px; background:var(--gold) }
.cursor-ring{ width:38px; height:38px; border:1.5px solid var(--gold-line); z-index:9999;
  display:grid; place-items:center; transition:width .28s var(--ease), height .28s var(--ease), background .28s, border-color .28s, opacity .3s }
.cursor-ring.is-hover{ width:60px; height:60px; background:rgba(217,167,65,.10); border-color:var(--gold) }
.cursor-ring.is-label{ width:82px; height:82px; background:rgba(217,167,65,.16); border-color:var(--gold) }
.cursor-ring .cl{ font-family:"Satoshi",sans-serif; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--gold-1); opacity:0; transition:opacity .2s }
.cursor-ring.is-label .cl{ opacity:1 }
@media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none !important } html.has-cursor,html.has-cursor *{ cursor:auto !important } }

/* ---------- Pinned horizontal scroll: Recent Builds ---------- */
.hscroll{ position:relative; height:340vh; background:var(--bg-2) }
.hscroll-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; gap:clamp(24px,4vw,46px) }
.hscroll-head{ padding-inline:var(--gut); display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap }
.hscroll-head h2{ max-width:16ch } .hscroll-head .eyebrow{ margin-bottom:14px }
.hscroll-count{ font-family:"Clash Display",sans-serif; font-weight:700; font-size:1rem; color:var(--muted) }
.hscroll-count b{ color:var(--gold-2) }
.hscroll-track{ display:flex; gap:22px; padding-inline:var(--gut); will-change:transform }
.hcard{ position:relative; flex:none; width:min(460px,80vw); aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line) }
.hcard img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
.hcard:hover img{ transform:scale(1.06) }
.hcard::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,5,8,.92), rgba(5,5,8,.1) 55%) }
.hcard .hc-body{ position:absolute; left:0; bottom:0; z-index:2; padding:26px }
.hcard .hc-idx{ font-family:"Clash Display",sans-serif; font-weight:700; font-size:.82rem; color:var(--gold-2); letter-spacing:.04em }
.hcard h3{ font-size:1.65rem; margin-top:6px; color:#fff }
.hcard .hc-tag{ font-size:.82rem; color:var(--muted); margin-top:4px }
.hscroll-progress{ margin-inline:var(--gut); height:3px; border-radius:3px; background:var(--line); overflow:hidden }
.hscroll-progress span{ display:block; height:100%; width:0; background:var(--gold-grad); border-radius:3px }
@media(max-width:760px){
  .hscroll{ height:auto }
  .hscroll-sticky{ position:static; height:auto; padding-block:64px }
  .hscroll-track{ overflow-x:auto; transform:none !important; scroll-snap-type:x mandatory; padding-bottom:8px }
  .hcard{ width:78vw; scroll-snap-align:center }
  .hscroll-progress{ display:none }
}

/* ---------- Drive-by band (supercar in motion) ---------- */
.driveby{ position:relative; overflow:hidden; isolation:isolate; min-height:clamp(440px,72vh,680px); display:flex; align-items:center; border-block:1px solid var(--line) }
.driveby .drive-car{ position:absolute; top:0; left:-8%; width:116%; height:100%; object-fit:cover; z-index:-2; will-change:transform; animation:drivepan 16s ease-in-out infinite alternate }
@keyframes drivepan{ from{ transform:scale(1.08) translateX(-2.5%) } to{ transform:scale(1.14) translateX(2.5%) } }
.driveby::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(6,6,9,.92) 0%, rgba(6,6,9,.45) 55%, rgba(6,6,9,.82) 100%) }
.speedlines{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent); mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent) }
.speedlines i{ position:absolute; left:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold-2),#fff,transparent); border-radius:2px; transform:translateX(-40vw); animation:streak linear infinite }
@keyframes streak{ to{ transform:translateX(140vw) } }
.driveby .container{ position:relative; z-index:1 }
.driveby h2{ font-size:clamp(2.3rem,6vw,4.6rem) } .driveby p{ max-width:42ch; margin-top:16px }

/* ---------- Kinetic giant marquee text ---------- */
.kinetic{ overflow:hidden; padding-block:clamp(18px,2.6vw,36px); background:var(--bg); border-block:1px solid var(--line) }
.kinetic-track{ display:flex; align-items:center; white-space:nowrap; width:max-content; animation:scrollx 30s linear infinite }
.kinetic:hover .kinetic-track{ animation-play-state:paused }
.kinetic .kw{ font-family:"Clash Display",sans-serif; font-weight:700; font-size:clamp(2.1rem,6vw,5.2rem); text-transform:uppercase; letter-spacing:-.02em; line-height:1; padding-right:.42em }
.kinetic .kw.outline{ color:transparent; -webkit-text-stroke:1.4px var(--gold-line) }
.kinetic .kw.solid{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
.kinetic .kstar{ color:var(--gold-2); font-size:clamp(1.1rem,2.4vw,2rem); padding-right:.42em; transform:translateY(-.12em) }
@media(prefers-reduced-motion:reduce){ .kinetic-track,.driveby .drive-car,.speedlines i{ animation:none !important } }

/* ============================================================
   V5 — finishing polish: preloader · hero line reveal · scroll bar · grain · magnetic
   ============================================================ */

/* ---------- Preloader (pure CSS, self-hiding) ---------- */
.preloader{ position:fixed; inset:0; z-index:10001; background:var(--bg); display:grid; place-items:center;
  animation:plOut .9s var(--ease-out) 1.45s forwards }
.pl-inner{ text-align:center; animation:plFade .5s var(--ease) 1.35s forwards }
.pl-logo{ font-family:"Clash Display",sans-serif; font-weight:700; font-size:clamp(1.9rem,4.4vw,2.8rem); letter-spacing:.01em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
.pl-sub{ font-size:.68rem; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); margin-top:9px }
.pl-bar{ width:160px; height:2px; background:var(--line-2); border-radius:2px; margin:24px auto 0; overflow:hidden }
.pl-bar span{ display:block; height:100%; width:0; background:var(--gold-grad); animation:plFill 1.3s var(--ease) forwards }
@keyframes plFill{ to{ width:100% } }
@keyframes plFade{ to{ opacity:0; transform:translateY(-10px) } }
@keyframes plOut{ to{ transform:translateY(-100%); visibility:hidden } }

/* ---------- Hero line-mask reveal ---------- */
.hero-title.reveal{ opacity:1; transform:none }
.hero-title .line{ display:block; overflow:hidden; padding-bottom:.06em }
.hero-title .line-i{ display:block; transform:translateY(118%); transition:transform 1.05s var(--ease-out) }
.hero-title.in .line-i{ transform:none }
.hero-title .line:nth-child(1) .line-i{ transition-delay:1.42s }
.hero-title .line:nth-child(2) .line-i{ transition-delay:1.56s }
.hero .eyebrow.reveal{ transition-delay:1.34s }
.hero-sub.reveal{ transition-delay:1.74s }
.hero-cta.reveal{ transition-delay:1.9s }

/* ---------- Scroll progress bar ---------- */
.scrollbar{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9998; background:var(--gold-grad); box-shadow:0 0 12px rgba(217,167,65,.5); transition:width .1s linear }

/* ---------- Film grain ---------- */
.grain{ position:fixed; inset:0; z-index:9997; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }

.btn{ will-change:transform }

@media(prefers-reduced-motion:reduce){
  .preloader{ animation:plOut .1s linear .25s forwards } .pl-bar span{ animation:none; width:100% }
  .hero-title .line-i{ transform:none !important; transition:none !important }
  .grain{ display:none }
}

/* ============================================================
   V6 — micro-polish: gold shimmer + cinematic hero zoom
   ============================================================ */
.gold-text{ background-size:220% auto; animation:goldShine 7s linear infinite }
@keyframes goldShine{ to{ background-position:220% center } }
.hero-media video,.hero-media img{ animation:heroZoom 22s ease-in-out infinite alternate }
@keyframes heroZoom{ from{ transform:scale(1.03) } to{ transform:scale(1.13) } }
@media(prefers-reduced-motion:reduce){ .gold-text,.hero-media video,.hero-media img{ animation:none !important } }

/* ============================================================
   V7 — break up the flat dark: faint ambient imagery + carbon
   ============================================================ */
/* subtle carbon weave over the whole page (kills "flat black") */
.fx-carbon{ position:fixed; inset:0; z-index:38; pointer-events:none; opacity:.55;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.013) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.013) 50%, rgba(255,255,255,.013) 75%, transparent 75%),
    radial-gradient(60% 50% at 85% 8%, rgba(217,167,65,.05), transparent 60%),
    radial-gradient(55% 45% at 10% 92%, rgba(96,140,210,.04), transparent 60%);
  background-size:7px 7px, 100% 100%, 100% 100% }

/* faint, darkened photo behind empty text sections → depth, not flat */
.amb-garage,.amb-car,.amb-night,.amb-trails{ background-color:#08080b; background-size:cover; background-position:center; background-attachment:fixed }
.amb-garage{ background-image:radial-gradient(120% 95% at 50% 42%, rgba(8,8,11,.85), rgba(8,8,11,.58)), url('../img/feature.jpg') }
.amb-car{ background-image:radial-gradient(120% 95% at 50% 42%, rgba(8,8,11,.85), rgba(8,8,11,.6)), url('../img/sc2.jpg') }
.amb-night{ background-image:radial-gradient(120% 95% at 50% 42%, rgba(8,8,11,.86), rgba(8,8,11,.6)), url('../img/night-hero.jpg') }
.amb-trails{ background-image:radial-gradient(120% 95% at 50% 42%, rgba(8,8,11,.86), rgba(8,8,11,.6)), url('../img/trails.jpg') }
@media(max-width:760px){ .amb-garage,.amb-car,.amb-night,.amb-trails{ background-attachment:scroll } }

/* ============================================================
   V8 — ONE living animated background (drifting aurora) through all blocks
   ============================================================ */
#bg-carbon,#bg-sweep,.fx-carbon{ display:none }
#bg-wave{ position:fixed; inset:0; z-index:-1; pointer-events:none }
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; transform:scaleX(0); transform-origin:left; background:var(--gold-grad); z-index:9998; box-shadow:0 0 12px rgba(217,167,65,.5); will-change:transform }
@media(prefers-reduced-motion:reduce){ #bg-wave{ display:none } }
/* sections transparent so the single animated bg flows through (cards keep their own bg) */
.section.bg-2{ background:transparent }
.brandstrip{ background:transparent }
.amb-garage,.amb-car,.amb-night,.amb-trails{ background:transparent !important }
.footer{ background:rgba(6,6,9,.94) }

/* Lightweight premium background — pure CSS (replaces the heavy gold dot-mesh) */
body{ background:#040507 }
/* ===== Premium / aggressive global backdrop — gold, steel & carbon ===== */
body::before{ content:""; position:fixed; inset:0; z-index:-5; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.020) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.020) 0 1px, transparent 1px 5px),
    linear-gradient(119deg, transparent 30%, rgba(233,182,86,.090) 31.4%, transparent 33.2%),
    linear-gradient(119deg, transparent 51.5%, rgba(233,182,86,.060) 52.6%, transparent 54.4%),
    linear-gradient(119deg, transparent 72.5%, rgba(233,182,86,.080) 73.8%, transparent 76%),
    radial-gradient(96% 74% at 86% -14%, rgba(233,182,86,.26), transparent 50%),
    radial-gradient(92% 70% at 3% 112%, rgba(72,112,182,.18), transparent 54%),
    radial-gradient(140% 108% at 50% 44%, #0c0e16 0%, #07080d 50%, #040507 100%) }
body::after{ content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:radial-gradient(140% 116% at 50% 44%, transparent 45%, rgba(1,1,4,.85) 100%) }
.bgfloor{ display:none }

/* GPU-smooth drifting aurora (transform-animated blobs — no per-frame repaint) */
.aura{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none }
.aura span{ position:absolute; border-radius:50%; filter:blur(90px); will-change:transform }
.aura span:nth-child(1){ width:66vw; height:66vw; top:-18%; left:-14%; background:radial-gradient(circle, rgba(233,182,86,.52), transparent 70%); animation:aura1 26s ease-in-out infinite alternate }
.aura span:nth-child(2){ width:56vw; height:56vw; bottom:-20%; right:-14%; background:radial-gradient(circle, rgba(86,130,205,.34), transparent 70%); animation:aura2 33s ease-in-out infinite alternate }
.aura span:nth-child(3){ width:46vw; height:46vw; top:24%; right:14%; background:radial-gradient(circle, rgba(198,74,50,.18), transparent 70%); animation:aura3 29s ease-in-out infinite alternate }
@keyframes aura1{ to{ transform:translate3d(22%,18%,0) scale(1.22) } }
@keyframes aura2{ to{ transform:translate3d(-18%,-14%,0) scale(1.16) } }
@keyframes aura3{ to{ transform:translate3d(-14%,16%,0) scale(1.12) } }
@media(prefers-reduced-motion:reduce){ .aura span{ animation:none } }

/* ---- V10: gloss sweep on tiles + parallax-ready images ---- */
.stile::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(120deg, transparent 32%, rgba(255,255,255,.20) 48%, transparent 64%); }
.stile:hover::before{ opacity:1; animation:glossSweep 1.05s var(--ease) }
@keyframes glossSweep{ 0%{ transform:translateX(-70%) } 100%{ transform:translateX(70%) } }
.feature-media{ overflow:hidden }
.feature-media img[data-parallax]{ position:relative; height:120%; top:-10%; will-change:transform }
.gallery a img[data-parallax]{ height:118%; position:relative; top:-9%; will-change:transform }
@media(prefers-reduced-motion:reduce){ .stile:hover::before{ animation:none; opacity:0 } }

/* ===== Legal pages (privacy / terms / cookies) ===== */
.legal{ max-width:840px; margin:0 auto; color:#c9c7c0; font-size:1.04rem; line-height:1.78 }
.legal .legal-updated{ font-family:var(--mono,'JetBrains Mono',monospace); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-2); margin-bottom:26px }
.legal h2{ font-family:'Clash Display',sans-serif; color:#fff; font-size:1.4rem; margin:40px 0 14px }
.legal p{ margin-bottom:16px }
.legal ul{ margin:0 0 18px; padding-left:22px; display:flex; flex-direction:column; gap:9px }
.legal li{ padding-left:4px }
.legal a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:3px }
.legal a:hover{ color:var(--gold-1) }
.legal strong{ color:#fff; font-weight:600 }
.legal code{ font-family:var(--mono,monospace); font-size:.85em; background:rgba(255,255,255,.06); padding:2px 7px; border-radius:6px; color:var(--gold-2) }

/* ===== Footer legal links ===== */
.foot-legal{ display:block }
.foot-legal a{ color:inherit; text-decoration:none }
.foot-legal a:hover{ color:var(--gold-2) }

/* ===== Cookie consent banner ===== */
.cookie-banner{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(24px); z-index:300;
  width:min(700px, calc(100% - 30px)); display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:rgba(13,14,19,.97); border:1px solid var(--line-2); border-radius:16px; padding:18px 22px;
  box-shadow:0 34px 90px -34px rgba(0,0,0,.92); opacity:0; transition:opacity .4s ease, transform .4s ease }
.cookie-banner.show{ opacity:1; transform:translateX(-50%) translateY(0) }
.cookie-banner p{ flex:1 1 260px; margin:0; font-size:.87rem; line-height:1.5; color:#c9c7c0 }
.cookie-banner a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:2px }
.cookie-banner .ck-actions{ display:flex; gap:10px; flex:none }
.cookie-banner button{ font-family:'Clash Display',sans-serif; font-weight:600; font-size:.82rem; padding:10px 20px; border-radius:100px; cursor:pointer; border:0; transition:transform .2s }
.cookie-banner button:hover{ transform:translateY(-1px) }
.cookie-banner .ck-accept{ background:linear-gradient(135deg,#F8E3A6,#D9A741); color:#1a1303 }
.cookie-banner .ck-decline{ background:transparent; border:1px solid var(--line-2); color:#c9c7c0 }
@media(max-width:560px){ .cookie-banner{ bottom:78px; padding:16px } .cookie-banner .ck-actions{ width:100% } .cookie-banner button{ flex:1 } }