/* =====================================================================
   VALLR — shared design system (mobile-first)
   ===================================================================== */
:root{
  --bg:#070707;
  --bg-2:#0c0c0d;
  --panel:#101012;
  --panel-2:#161619;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.18);
  --red:#E8001D;
  --red-2:#FF0A3B;
  --red-deep:#9c0014;
  --yellow:#FFD60A;
  --white:#fff;
  --ink:#ECECEC;
  --muted:#9c9ca1;
  --muted-2:#5f5f64;
  --font-display:"Special Gothic Expanded One","Arial Black",sans-serif;
  --font-cond:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --font-body:"DM Sans",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --maxw:1280px;
  --pad:22px;
  --gap:14px;
}
@media (min-width:768px){ :root{ --pad:40px; } }
@media (min-width:1080px){ :root{ --pad:60px; --gap:22px; } }

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:400;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
body.preload{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--red);color:#fff}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:.9;letter-spacing:-.01em;text-transform:uppercase}
.cond{font-family:var(--font-cond);letter-spacing:.04em;text-transform:uppercase}

/* ---- utilities ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{position:relative;padding-block:clamp(64px,11vw,150px)}
.eyebrow{font-family:var(--font-cond);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--red-2);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--red-2);display:inline-block}
.muted{color:var(--muted)}
.center{text-align:center}
.line-clip{overflow:hidden;display:block}

/* numbered section header (editorial / dragonfly) */
.shead{display:grid;gap:18px;margin-bottom:clamp(30px,5vw,56px)}
.shead .s-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line);padding-bottom:14px}
.shead .s-idx{font-family:var(--font-cond);letter-spacing:.2em;font-size:13px;color:var(--muted-2)}
.shead .s-idx b{color:var(--red-2)}
.shead h2{font-size:clamp(34px,9vw,92px);color:#fff;letter-spacing:-.02em}
.shead h2 em{color:var(--red);font-style:normal}
.shead .s-sub{color:var(--muted);font-size:15px;max-width:46ch}
@media (min-width:768px){
  .shead{grid-template-columns:1fr;gap:24px}
  .shead .s-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
}

/* corner markers */
.corners{position:absolute;inset:14px;pointer-events:none;z-index:4}
.corners span{position:absolute;width:14px;height:14px;opacity:.55}
.corners span::before,.corners span::after{content:"";position:absolute;background:var(--line-2)}
.corners span::before{width:100%;height:1px;top:0}.corners span::after{height:100%;width:1px;left:0}
.corners .tl{top:0;left:0}.corners .tr{top:0;right:0;transform:scaleX(-1)}
.corners .bl{bottom:0;left:0;transform:scaleY(-1)}.corners .br{bottom:0;right:0;transform:scale(-1)}

/* ---- FX ---- */
#grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:9001;opacity:.045;mix-blend-mode:overlay}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:8999;
  background:radial-gradient(125% 95% at 50% 0%,transparent 60%,rgba(0,0,0,.5) 100%)}
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:9200;
  background:linear-gradient(90deg,var(--red),var(--red-2),var(--yellow))}

/* cursor (desktop only) */
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;z-index:9500;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);will-change:transform}
.cursor-dot{width:6px;height:6px;background:var(--red-2)}
.cursor-ring{width:40px;height:40px;border:1px solid rgba(255,255,255,.5);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s,opacity .3s}
.cursor-ring .clabel{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-cond);font-size:11px;letter-spacing:.16em;color:#fff;opacity:0;transition:opacity .25s;text-transform:uppercase}
body.cursor-hover .cursor-ring{width:60px;height:60px;border-color:transparent;background:rgba(232,0,29,.15)}
body.cursor-active .cursor-ring{width:78px;height:78px;background:var(--red);border-color:transparent}
body.cursor-active .cursor-ring .clabel{opacity:1}
body.cursor-hide .cursor-dot,body.cursor-hide .cursor-ring{opacity:0}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none!important}}

/* ---- loader ---- */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center;overflow:hidden}
#loader .l-mark{font-family:var(--font-display);font-size:clamp(48px,18vw,140px);letter-spacing:.04em;color:#fff;text-align:center}
#loader .l-mark span{color:var(--red)}
#loader .l-bar{margin:22px auto 0;width:min(62vw,320px);height:2px;background:rgba(255,255,255,.13);position:relative;overflow:hidden}
#loader .l-bar i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--red),var(--red-2))}
#loader .l-meta{margin:12px auto 0;width:min(62vw,320px);display:flex;justify-content:space-between;font-family:var(--font-cond);letter-spacing:.2em;font-size:11px;color:var(--muted)}
#loader .l-grid{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 68%)}

/* ---- marquee ---- */
.marquee{display:flex;overflow:hidden;white-space:nowrap;user-select:none}
.marquee .track{display:flex;flex:0 0 auto;min-width:100%;will-change:transform;align-items:center}
.marquee .item{display:inline-flex;align-items:center;gap:16px;padding-inline:16px}

/* announcement */
.announce{position:relative;z-index:120;background:var(--red);color:#fff}
.announce .marquee{padding-block:8px}
.announce .item{font-family:var(--font-cond);letter-spacing:.16em;font-size:12px}
.announce .dot{width:4px;height:4px;border-radius:50%;background:#fff;opacity:.7}

/* ---- nav (mobile-first minimal) ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:transform .5s var(--ease);padding-top:env(safe-area-inset-top)}
.nav.hidden{transform:translateY(-130%)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px var(--pad);
  transition:background .4s,backdrop-filter .4s,border-color .4s,padding .4s;border-bottom:1px solid transparent}
.nav.solid .nav-inner{background:rgba(7,7,8,.72);backdrop-filter:blur(13px) saturate(140%);border-color:var(--line);padding-block:11px}
.brand{font-family:var(--font-display);font-size:21px;letter-spacing:.05em;color:#fff;display:flex;align-items:center;gap:8px}
.brand .blip{width:8px;height:8px;background:var(--red);border-radius:1px;box-shadow:0 0 12px 1px var(--red);animation:blip 2.6s var(--ease) infinite}
@keyframes blip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.5}}
.nav-links{display:none}
.nav-right{display:flex;align-items:center;gap:14px}
.bag{display:flex;align-items:center;gap:8px;font-family:var(--font-cond);letter-spacing:.12em;font-size:14px;color:#fff}
.bag .bag-c{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:20px;background:var(--red);font-size:11px;letter-spacing:0}
.menu-btn{display:grid;width:40px;height:40px;border:1px solid var(--line);border-radius:50%;place-items:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:15px;height:1.5px;background:#fff;content:"";position:relative}
.menu-btn span::before{position:absolute;top:-5px}.menu-btn span::after{position:absolute;top:5px}
@media (min-width:980px){
  .nav-links{display:flex;gap:30px;align-items:center}
  .nav-links a{font-family:var(--font-cond);letter-spacing:.14em;font-size:15px;position:relative;padding-block:6px;color:#fff}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--red-2);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
  .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
  .nav-links a.active{color:var(--red-2)}
  .menu-btn{display:none}
}

/* drawer */
.drawer{position:fixed;inset:0;z-index:300;background:var(--bg);transform:translateY(-100%);transition:transform .6s var(--ease);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--pad)}
.drawer.open{transform:translateY(0)}
.drawer a{font-family:var(--font-display);font-size:14vw;color:#fff;text-transform:uppercase;line-height:1.05}
.drawer a span{color:var(--red)}
.drawer .d-close{position:absolute;top:20px;right:var(--pad);font-family:var(--font-cond);letter-spacing:.18em;font-size:15px}
.drawer .d-foot{position:absolute;bottom:30px;left:var(--pad);font-family:var(--font-cond);letter-spacing:.18em;color:var(--muted);font-size:12px}

/* ---- buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:11px;font-family:var(--font-cond);letter-spacing:.14em;font-size:15px;
  text-transform:uppercase;padding:15px 26px;border-radius:2px;overflow:hidden;transition:color .4s var(--ease),transform .3s var(--ease);will-change:transform}
.btn .lbl,.btn .arrow{position:relative;z-index:2}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .45s var(--ease);z-index:1}
.btn-primary:hover{color:#000}.btn-primary:hover::before{transform:translateY(0)}
.btn-ghost{border:1px solid var(--line-2);color:#fff}
.btn-ghost::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .45s var(--ease);z-index:1}
.btn-ghost:hover{color:#fff;border-color:var(--red)}.btn-ghost:hover::before{transform:translateY(0)}

/* ---- hero (mobile-first: 3D centerpiece up top, type below) ---- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
#hero-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.hero-fallback{position:absolute;inset:0;z-index:0;display:none;overflow:hidden}
.hero-fallback .plate{position:absolute;left:50%;top:34%;width:min(74vw,420px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#3a3a3e,#0a0a0b 60%),conic-gradient(from 0deg,#1a1a1d,#444,#111,#3a3a3e,#111,#1a1a1d);
  box-shadow:inset 0 0 60px rgba(0,0,0,.9),0 0 100px rgba(232,0,29,.22);animation:spin 26s linear infinite}
.hero-fallback .plate::before{content:"";position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2a2a2e,#050505);box-shadow:inset 0 0 40px #000}
.hero-fallback .plate::after{content:"";position:absolute;inset:43%;border-radius:50%;background:#050505;box-shadow:inset 0 0 16px #000,0 0 0 5px #161618}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hero-grad{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(75% 60% at 50% 26%,rgba(232,0,29,.16),transparent 62%),linear-gradient(180deg,rgba(7,7,7,.4) 0%,transparent 24%,transparent 48%,rgba(7,7,7,.96) 100%)}
.hero-content{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(34px,8vw,84px)}
.hero h1{font-size:clamp(52px,16vw,190px);color:#fff;margin:.16em 0 .3em;letter-spacing:-.02em}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln i{display:block;font-style:normal}
.hero h1 .hl{color:var(--red)}
.hero-sub{max-width:48ch;font-size:clamp(15px,4vw,19px);color:var(--muted);line-height:1.55}
.hero-sub b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-cta .btn{flex:1;justify-content:center;min-width:140px}
.hero-cue{position:absolute;left:var(--pad);bottom:20px;z-index:3;display:none;align-items:center;gap:11px;font-family:var(--font-cond);letter-spacing:.2em;font-size:11px;color:var(--muted)}
.hero-cue .bar{width:1px;height:38px;background:linear-gradient(var(--red),transparent);position:relative;overflow:hidden}
.hero-cue .bar::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--red-2);animation:cue 1.8s var(--ease-2) infinite}
@keyframes cue{0%{top:-50%}100%{top:120%}}
@media (min-width:768px){
  .hero{justify-content:flex-end}
  .hero h1{margin-top:.1em}
  .hero-cta .btn{flex:0 0 auto}
  .hero-cue{display:flex}
}

/* ---- strip ---- */
.strip{border-block:1px solid var(--line);background:var(--bg-2);position:relative;z-index:5}
.strip .marquee{padding-block:14px}
.strip .item{font-family:var(--font-cond);letter-spacing:.18em;font-size:clamp(14px,4vw,20px);color:#fff}
.strip .item b{color:var(--red-2)}
.strip .star{color:var(--yellow)}

/* ---- stats ---- */
.stats-grid{display:grid;grid-template-columns:1fr 1fr}
.stat{padding:24px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.stat:nth-child(2n){border-right:none}
.stat .num{font-family:var(--font-display);font-size:clamp(30px,8vw,54px);color:#fff;line-height:1;display:flex;align-items:baseline;white-space:nowrap}
.stat .num .suf{color:var(--red-2);margin-left:.01em}
.stat .lab{font-family:var(--font-cond);letter-spacing:.16em;font-size:12px;color:#fff;margin-top:11px}
.stat .sub{font-size:13px;color:var(--muted);margin-top:4px}
.stat .ghost{position:absolute;right:-4px;bottom:-16px;font-family:var(--font-display);font-size:82px;color:#fff;opacity:.03;pointer-events:none}
@media (min-width:560px){
  .stat{padding:30px 22px}
  .stat .num{font-size:clamp(38px,5.4vw,56px)}
}
@media (min-width:1024px){
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .stat{border-bottom:none;padding:clamp(32px,3.4vw,50px) 16px}
  .stat .num{font-size:clamp(38px,3.6vw,52px)}
  .stat:nth-child(2n){border-right:1px solid var(--line)}
  .stat:last-child{border-right:none}
}

/* ---- collection ---- */
.htrack{display:flex;gap:14px;padding-inline:var(--pad);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.htrack::-webkit-scrollbar{display:none}
.gcard{position:relative;flex:0 0 78vw;max-width:420px;height:64vh;max-height:560px;border-radius:6px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);scroll-snap-align:center;isolation:isolate}
.gcard .gimg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.06);
  transition:transform .9s var(--ease);filter:grayscale(.32) contrast(1.05) brightness(.6)}
.gcard:hover .gimg,.gcard:active .gimg{transform:scale(1.13)}
.gcard .gmask{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,7,7,.06),rgba(7,7,7,.18) 40%,rgba(7,7,7,.95))}
.gcard .gnum{position:absolute;top:18px;left:18px;z-index:2;font-family:var(--font-cond);letter-spacing:.08em;font-size:14px;color:var(--red-2)}
.gcard .gtag{position:absolute;top:18px;right:18px;z-index:2;font-family:var(--font-cond);letter-spacing:.16em;font-size:11px;color:#fff;border:1px solid var(--line-2);padding:4px 10px;border-radius:30px}
.gcard .gbody{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px}
.gcard h3{font-family:var(--font-display);font-size:clamp(24px,6vw,38px);color:#fff;line-height:.94}
.gcard .gp{color:var(--muted);font-size:13.5px;margin-top:8px;max-width:32ch}
.gcard .gfoot{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.gcard .gprice{font-family:var(--font-cond);letter-spacing:.06em;font-size:19px;color:#fff}
.gcard .gprice s{color:var(--muted-2);margin-right:7px;font-size:14px}
.gcard .gcta{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--red);transition:transform .4s var(--ease)}
.gcard:hover .gcta{transform:rotate(-45deg) scale(1.06)}
.hbar{display:flex;align-items:center;gap:14px;padding:18px var(--pad) 0;color:var(--muted)}
.hbar-line{flex:1;height:1px;background:var(--line);position:relative;overflow:hidden}
.hbar-line i{position:absolute;left:0;top:0;height:100%;width:20%;background:var(--red);transform-origin:0 50%}
.hbar-hint{font-family:var(--font-cond);letter-spacing:.18em;font-size:12px;display:flex;align-items:center;gap:8px}
@media (min-width:768px){ .gcard{flex-basis:clamp(320px,36vw,420px);height:clamp(440px,60vh,580px)} }

/* ---- features ---- */
.feat{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.feat+.feat{margin-top:clamp(48px,8vw,120px)}
.feat-media{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3.4}
.feat-media .fimg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.35) contrast(1.06) brightness(.64);transform:scale(1.12);will-change:transform}
.feat-media .fmask{position:absolute;inset:0;background:linear-gradient(120deg,rgba(232,0,29,.15),transparent 50%),linear-gradient(0deg,rgba(7,7,7,.8),transparent 55%)}
.feat-media .fbadge{position:absolute;left:18px;bottom:16px;font-family:var(--font-cond);letter-spacing:.18em;font-size:12px;color:#fff;z-index:2}
.feat-media .fkpi{position:absolute;right:16px;top:16px;z-index:2;text-align:right;font-family:var(--font-display);font-size:40px;color:#fff;line-height:.9}
.feat-media .fkpi span{display:block;font-family:var(--font-cond);font-size:11px;letter-spacing:.16em;color:var(--red-2)}
.feat-body h3{font-size:clamp(30px,8vw,58px);color:#fff;margin-bottom:16px}
.feat-body h3 em{color:var(--red);font-style:normal}
.feat-body .fp{color:var(--muted);font-size:15.5px;max-width:46ch;line-height:1.62}
.flist{margin-top:22px;display:grid;gap:0}
.flist li{list-style:none;display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line);transition:padding-left .4s var(--ease)}
.flist li:hover{padding-left:9px}
.flist li:last-child{border-bottom:1px solid var(--line)}
.flist .fi{font-family:var(--font-cond);color:var(--red-2);font-size:13px;letter-spacing:.08em;min-width:30px}
.flist .ft{color:var(--ink);font-size:14.5px}
@media (min-width:768px){
  .feat{grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px)}
  .feat-media{aspect-ratio:4/4.4}
  .feat-media .fkpi{font-size:46px}
  .feat.rev .feat-media{order:2}
}

/* ---- blood & sweat ---- */
.bs{position:relative;min-height:130vh;background:#050505;overflow:clip}
.bs-sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.bs-img{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.2) contrast(1.1) brightness(.46);transform:scale(1.2);will-change:transform}
.bs-img::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent,rgba(5,5,5,.88));mix-blend-mode:multiply}
.bs-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(232,0,29,.12),transparent,rgba(232,0,29,.18))}
.bs-words{position:relative;z-index:3;text-align:center;mix-blend-mode:difference;padding-inline:10px}
.bs-words .w{display:block;font-family:var(--font-display);font-size:clamp(58px,22vw,290px);line-height:.82;color:#fff;letter-spacing:-.02em}
.bs-cap{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:4;font-family:var(--font-cond);letter-spacing:.3em;font-size:12px;color:var(--muted);text-align:center;width:90%}
.bs-mark{position:absolute;z-index:4;font-family:var(--font-cond);letter-spacing:.26em;font-size:11px;color:var(--red-2)}
.bs-mark.tl{top:8%;left:var(--pad)}.bs-mark.tr{top:8%;right:var(--pad)}

/* ---- accessories ---- */
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acard{position:relative;border:1px solid var(--line);border-radius:5px;padding:20px 16px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--panel);overflow:hidden;transition:border-color .4s,background .4s,transform .4s var(--ease)}
.acard:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-3px)}
.acard .ai{width:34px;height:34px;color:var(--red-2)}
.acard .ai svg{width:100%;height:100%}
.acard h3{font-family:var(--font-display);font-size:clamp(17px,4.4vw,23px);color:#fff;line-height:1}
.acard p{color:var(--muted);font-size:13px;margin-top:6px}
.acard .an{position:absolute;top:14px;right:16px;font-family:var(--font-cond);letter-spacing:.1em;font-size:12px;color:var(--muted-2)}
.acard .aspec{font-family:var(--font-cond);letter-spacing:.12em;font-size:11px;color:var(--red-2);margin-top:10px}
@media (min-width:680px){ .acc-grid{grid-template-columns:repeat(3,1fr);gap:14px} .acard{min-height:210px;padding:26px 22px} }
@media (min-width:1024px){ .acc-grid{grid-template-columns:repeat(4,1fr)} }

/* ---- 3D word band ---- */
.band{padding-block:clamp(34px,6vw,72px);border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden;perspective:700px}
.band .marquee{transform:rotateX(7deg)}
.band .item{font-family:var(--font-display);font-size:clamp(38px,10vw,116px);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45);letter-spacing:.01em}
.band .item.fill{color:var(--red);-webkit-text-stroke:1px var(--red)}
.band .star{font-size:.5em;color:var(--yellow);-webkit-text-stroke:0;vertical-align:middle}

/* ---- process ---- */
.proc-grid{display:grid;grid-template-columns:1fr;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pstep{position:relative;padding:26px var(--pad);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px;transition:background .5s var(--ease)}
.pstep:last-child{border-bottom:none}
.pstep:hover{background:var(--panel)}
.pstep .pn{font-family:var(--font-display);font-size:clamp(38px,9vw,72px);color:transparent;-webkit-text-stroke:1px var(--line-2);transition:all .5s var(--ease)}
.pstep:hover .pn{-webkit-text-stroke:1px var(--red);color:rgba(232,0,29,.1)}
.pstep h3{font-family:var(--font-display);font-size:clamp(19px,4.6vw,25px);color:#fff;margin-bottom:9px}
.pstep .pp{color:var(--muted);font-size:14px;line-height:1.6}
.pstep .pdot{position:absolute;top:26px;right:var(--pad);width:8px;height:8px;border-radius:50%;background:var(--red);opacity:.5;transition:opacity .4s,transform .4s}
.pstep:hover .pdot{opacity:1;transform:scale(1.5)}
@media (min-width:768px){
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .pstep{border-right:1px solid var(--line);min-height:clamp(280px,30vw,400px);justify-content:space-between}
  .pstep:nth-child(2n){border-right:none}
  .pstep:nth-child(1),.pstep:nth-child(2){border-bottom:1px solid var(--line)}
}
@media (min-width:1080px){
  .proc-grid{grid-template-columns:repeat(4,1fr)}
  .pstep{border-bottom:none!important}
  .pstep:nth-child(2n){border-right:1px solid var(--line)}
  .pstep:last-child{border-right:none}
}

/* ---- reviews ---- */
.reviews{background:linear-gradient(180deg,var(--bg),#080808);overflow:hidden}
.rev-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 30px}
.rev-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:40px;padding:8px 14px;font-family:var(--font-cond);letter-spacing:.12em;font-size:12px;color:#fff}
.rev-pill .stars{color:var(--yellow);letter-spacing:1px}
.rcar-view{overflow:hidden}
.rcar-track{display:flex;will-change:transform}
.rcard{flex:0 0 84vw;max-width:400px;margin-right:14px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:26px 24px;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;transition:border-color .4s,transform .4s var(--ease)}
.rcard::before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--red);transition:height .5s var(--ease)}
.rcard:hover{border-color:var(--line-2);transform:translateY(-4px)}.rcard:hover::before{height:100%}
.rcard .rq{font-family:var(--font-display);position:absolute;right:16px;top:4px;font-size:80px;color:#fff;opacity:.04;line-height:1}
.rcard .rstars{color:var(--yellow);letter-spacing:2px;font-size:14px}
.rcard .rtext{color:var(--ink);font-size:15px;line-height:1.6;flex:1}
.rcard .rfoot{display:flex;align-items:center;gap:12px;margin-top:4px}
.rcard .rav{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:16px;color:#fff;background:linear-gradient(135deg,var(--red),var(--red-deep));flex:0 0 auto}
.rcard .rname{font-family:var(--font-cond);letter-spacing:.06em;font-size:15px;color:#fff;line-height:1.1}
.rcard .rmeta{font-size:11.5px;color:var(--muted)}
.rcard .rver{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:11px;color:#34d058;font-family:var(--font-cond);letter-spacing:.08em}
.rcard .rprod{font-family:var(--font-cond);letter-spacing:.12em;font-size:11px;color:var(--red-2)}
.rcar-ctrls{display:flex;align-items:center;gap:10px;margin-top:28px;flex-wrap:wrap}
.rbtn{width:50px;height:50px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;color:#fff;transition:background .35s var(--ease),border-color .35s,transform .35s var(--ease)}
.rbtn:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.rbtn svg{width:17px;height:17px}
.rbtn.play .ic-pause{display:block}.rbtn.play .ic-play{display:none}
.rbtn.paused .ic-pause{display:none}.rbtn.paused .ic-play{display:block}
.rcar-meta{margin-left:4px;font-family:var(--font-cond);letter-spacing:.16em;font-size:13px;color:var(--muted)}
.rcar-meta b{color:#fff}
.rcar-prog{flex:1;height:2px;background:var(--line);position:relative;border-radius:2px;overflow:hidden;min-width:60px}
.rcar-prog i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--yellow))}
@media (min-width:768px){ .rcard{flex-basis:clamp(300px,32vw,400px);margin-right:20px} }

/* ---- instagram ---- */
.gram-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gram{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:1;background:var(--panel);border:1px solid var(--line)}
.gram img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.8);transition:transform .8s var(--ease),filter .5s}
.gram:hover img,.gram:active img{transform:scale(1.1);filter:grayscale(0) brightness(1)}
.gram .gov{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .4s;background:rgba(232,0,29,.28)}
.gram:hover .gov{opacity:1}
.gram .gov svg{width:26px;height:26px;color:#fff}
.gram:first-child{grid-column:span 2;aspect-ratio:2}
@media (min-width:680px){
  .gram-grid{grid-template-columns:repeat(6,1fr)}
  .gram:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .gram:nth-child(6){grid-column:span 2}
}

/* ---- newsletter / clan ---- */
.clan{position:relative;background:var(--red);color:#fff;overflow:hidden;border-radius:8px}
.clan-in{position:relative;z-index:2;padding:clamp(34px,8vw,90px) var(--pad);display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.clan h2{font-size:clamp(38px,11vw,100px);color:#fff;line-height:.86}
.clan h2 em{font-style:normal;-webkit-text-stroke:1.4px #fff;color:transparent}
.clan p{margin-top:14px;max-width:36ch;color:rgba(255,255,255,.92);font-size:15px}
.clan-form{display:flex;flex-direction:column;gap:11px}
.clan-form input{width:100%;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.35);color:#fff;padding:15px 16px;border-radius:3px;font-family:var(--font-body);font-size:15px;transition:border-color .3s,background .3s}
.clan-form input::placeholder{color:rgba(255,255,255,.65)}
.clan-form input:focus{outline:none;border-color:#fff;background:rgba(0,0,0,.3)}
.clan-form button{margin-top:3px;background:#0a0a0a;color:#fff;padding:16px;border-radius:3px;font-family:var(--font-cond);letter-spacing:.16em;font-size:15px;text-transform:uppercase;transition:transform .3s var(--ease),background .3s}
.clan-form button:hover{transform:translateY(-2px);background:#000}
.clan-form .ok{font-family:var(--font-cond);letter-spacing:.1em;font-size:14px;color:#fff;opacity:0;transition:opacity .4s;height:0;overflow:hidden}
.clan-form.done .ok{opacity:1;height:auto;margin-top:5px}
.clan .perks{margin-top:16px;display:flex;flex-wrap:wrap;gap:7px}
.clan .perks span{font-family:var(--font-cond);letter-spacing:.1em;font-size:11px;border:1px solid rgba(255,255,255,.4);padding:5px 11px;border-radius:30px}
.clan .clan-ghost{position:absolute;right:-3%;bottom:-26%;font-family:var(--font-display);font-size:46vw;color:rgba(0,0,0,.11);z-index:1;pointer-events:none;line-height:.8}
@media (min-width:768px){ .clan-in{grid-template-columns:1.1fr .9fr;gap:40px} }

/* ---- footer ---- */
.foot{position:relative;padding-top:clamp(50px,8vw,100px);overflow:hidden}
.foot-word{font-family:var(--font-display);font-size:clamp(44px,18vw,250px);line-height:.84;color:#fff;text-align:center;letter-spacing:.01em;white-space:nowrap;display:block;will-change:transform}
.foot-word .v{color:var(--red)}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding-block:clamp(34px,6vw,70px);border-top:1px solid var(--line);margin-top:clamp(26px,5vw,54px)}
.foot-cols .fcol-about{grid-column:1/-1}
.foot-cols h4{font-family:var(--font-cond);letter-spacing:.18em;font-size:12px;color:var(--muted-2);margin-bottom:14px;text-transform:uppercase}
.foot-cols a{display:block;color:var(--ink);padding:5px 0;font-size:15px;transition:color .3s,transform .3s var(--ease)}
.foot-cols a:hover{color:var(--red-2);transform:translateX(4px)}
.foot-cols .fabout{color:var(--muted);font-size:14px;max-width:40ch;line-height:1.6}
.foot-bot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:22px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted-2)}
.foot-bot a:hover{color:#fff}
@media (min-width:768px){ .foot-cols{grid-template-columns:2fr 1fr 1fr 1fr} .foot-cols .fcol-about{grid-column:auto} }
.totop{position:fixed;right:18px;bottom:18px;z-index:180;width:48px;height:48px;border-radius:50%;background:var(--red);display:grid;place-items:center;opacity:0;transform:translateY(20px) scale(.8);transition:opacity .4s,transform .4s var(--ease);pointer-events:none}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--red-2)}

/* =====================================================================
   PAGE: sub-hero (shop / accessories / clan headers)
   ===================================================================== */
.subhero{position:relative;padding:calc(env(safe-area-inset-top) + 120px) 0 clamp(36px,6vw,72px);overflow:hidden;border-bottom:1px solid var(--line)}
.subhero .sh-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:grayscale(.4) brightness(.34) contrast(1.1);transform:scale(1.1)}
.subhero .sh-grad{position:absolute;inset:0;z-index:1;background:radial-gradient(80% 90% at 80% 0%,rgba(232,0,29,.2),transparent 60%),linear-gradient(180deg,rgba(7,7,7,.6),var(--bg))}
.subhero .wrap{position:relative;z-index:2}
.subhero h1{font-size:clamp(46px,15vw,150px);color:#fff;letter-spacing:-.02em;line-height:.86}
.subhero h1 em{color:var(--red);font-style:normal}
.subhero .sh-sub{margin-top:16px;max-width:50ch;color:var(--muted);font-size:clamp(15px,4vw,18px)}
.subhero .crumbs{font-family:var(--font-cond);letter-spacing:.18em;font-size:12px;color:var(--muted-2);margin-bottom:16px}
.subhero .crumbs b{color:var(--red-2)}

/* filter chips */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,40px)}
.chip{font-family:var(--font-cond);letter-spacing:.12em;font-size:13px;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:40px;padding:9px 16px;transition:all .35s var(--ease)}
.chip:hover{color:#fff;border-color:var(--line-2)}
.chip.active{background:var(--red);border-color:var(--red);color:#fff}

/* product grid */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prod{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel);transition:border-color .4s,transform .4s var(--ease)}
.prod:hover{border-color:var(--line-2);transform:translateY(-4px)}
.prod .pmedia{position:relative;aspect-ratio:1;overflow:hidden}
.prod .pmedia img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.82);transition:transform .8s var(--ease),filter .5s}
.prod:hover .pmedia img{transform:scale(1.08);filter:grayscale(0) brightness(.95)}
.prod .pflag{position:absolute;top:12px;left:12px;font-family:var(--font-cond);letter-spacing:.12em;font-size:10.5px;color:#fff;background:var(--red);padding:4px 9px;border-radius:30px}
.prod .pfav{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .4s}
.prod:hover .pfav{opacity:1}
.prod .pbody{padding:16px}
.prod .pcat{font-family:var(--font-cond);letter-spacing:.14em;font-size:11px;color:var(--red-2)}
.prod h3{font-family:var(--font-display);font-size:clamp(17px,4.4vw,22px);color:#fff;margin:5px 0 2px;line-height:1}
.prod .prow{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.prod .pprice{font-family:var(--font-cond);letter-spacing:.05em;font-size:19px;color:#fff}
.prod .pprice s{color:var(--muted-2);font-size:14px;margin-right:6px}
.prod .pstars{color:var(--yellow);font-size:12px;letter-spacing:1px}
.prod .padd{display:block;width:100%;margin-top:14px;text-align:center;font-family:var(--font-cond);letter-spacing:.14em;font-size:13px;text-transform:uppercase;color:#fff;border:1px solid var(--line-2);padding:11px;border-radius:3px;transition:background .35s,border-color .35s,color .35s}
.prod .padd:hover{background:var(--red);border-color:var(--red)}
@media (min-width:640px){ .prod-grid{grid-template-columns:repeat(3,1fr);gap:16px} }
@media (min-width:1024px){ .prod-grid{grid-template-columns:repeat(4,1fr)} }

/* spec list (accessories detail) */
.specs{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.specrow{display:flex;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line)}
.specrow:last-child{border-bottom:none}
.specrow .sk{font-family:var(--font-cond);letter-spacing:.12em;font-size:12px;color:var(--muted);text-transform:uppercase}
.specrow .sv{color:#fff;font-size:14px;text-align:right}

/* split content block (clan story) */
.story{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.story-media{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.story-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.7) contrast(1.05)}
.story h2{font-size:clamp(30px,8vw,64px);color:#fff;margin-bottom:14px}
.story h2 em{color:var(--red);font-style:normal}
.story p{color:var(--muted);font-size:15.5px;line-height:1.65;max-width:48ch}
.story p+p{margin-top:14px}
@media (min-width:768px){ .story{grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px)} .story.rev .story-media{order:2} }

/* value cards */
.vals{display:grid;grid-template-columns:1fr;gap:12px}
.val{border:1px solid var(--line);border-radius:6px;padding:24px 22px;background:var(--panel);transition:border-color .4s,transform .4s var(--ease)}
.val:hover{border-color:var(--line-2);transform:translateY(-3px)}
.val .vn{font-family:var(--font-display);font-size:40px;color:transparent;-webkit-text-stroke:1px var(--red);line-height:1}
.val h3{font-family:var(--font-display);font-size:22px;color:#fff;margin:12px 0 8px}
.val p{color:var(--muted);font-size:14px;line-height:1.6}
@media (min-width:768px){ .vals{grid-template-columns:repeat(3,1fr);gap:16px} }

/* big CTA band */
.ctaband{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2);padding:clamp(36px,7vw,80px) var(--pad);text-align:center}
.ctaband h2{font-size:clamp(34px,9vw,84px);color:#fff;margin-bottom:14px}
.ctaband h2 em{color:var(--red);font-style:normal}
.ctaband p{color:var(--muted);max-width:42ch;margin:0 auto 26px;font-size:15px}
.ctaband .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* reveal helper initial state handled by JS; fallback visible */
[data-reveal]{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .marquee .track{animation:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}