/* ===== Premium layer: 3D product, showcase, micro-interactions ===== */
:root{--glow:0 0 0 1px rgba(255,255,255,.06),0 30px 80px -20px rgba(225,6,0,.55)}
body{background:radial-gradient(1200px 700px at 80% -10%,rgba(225,6,0,.16),transparent 60%),radial-gradient(900px 600px at -10% 40%,rgba(225,6,0,.08),transparent 60%),var(--bg)}
.display{letter-spacing:.01em;text-wrap:balance}
.lead{text-wrap:pretty}
.section{position:relative}
.section::before{content:"";position:absolute;left:50%;top:0;width:min(900px,80%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(225,6,0,.7),rgba(255,255,255,.35),rgba(225,6,0,.7),transparent);opacity:.55;pointer-events:none}
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.card:hover{transform:translateY(-4px);box-shadow:var(--glow)}
.btn--red{position:relative;overflow:hidden;box-shadow:0 10px 30px -8px rgba(225,6,0,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.btn--red::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn--red:hover::after{transform:translateX(120%)}
.btn{transition:transform .35s var(--ease),box-shadow .35s,background .3s}
/* grain + cursor glow */
.fx-grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fx-cursor{position:fixed;left:0;top:0;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(225,6,0,.13),transparent 65%);opacity:0;transition:opacity .4s;will-change:transform}
.has-cursor .fx-cursor{opacity:1}
@media (hover:none){.fx-cursor{display:none}}

/* ===== Hero 3D card ===== */
.hv3d{position:relative;min-height:400px;align-items:center;perspective:1100px}
.hv3d__halo{position:absolute;left:50%;top:48%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(225,6,0,.55),rgba(225,6,0,.12) 40%,transparent 66%);filter:blur(10px);pointer-events:none;animation:halo 6s ease-in-out infinite}
.hv3d__floor{position:absolute;left:-30%;right:-30%;bottom:-12%;height:55%;background:linear-gradient(rgba(225,6,0,.5) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(225,6,0,.5) 1px,transparent 1px) 0 0/44px 44px;transform:perspective(500px) rotateX(68deg);transform-origin:bottom;-webkit-mask-image:radial-gradient(ellipse at 50% 100%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at 50% 100%,#000 10%,transparent 70%);opacity:.55;animation:gridmove 4s linear infinite;pointer-events:none}
@keyframes gridmove{to{background-position:0 44px,0 0}}
@keyframes halo{50%{opacity:.7;transform:translate(-50%,-50%) scale(1.08)}}
.c3d{position:relative;width:min(78vw,380px);transform-style:preserve-3d;transform:rotateX(var(--rx,8deg)) rotateY(var(--ry,-14deg));transition:transform .6s var(--ease);z-index:2}
.c3d[data-float]{animation:float 6s ease-in-out infinite}
@keyframes float{50%{translate:0 -14px}}
.c3d__body{position:relative;transform-style:preserve-3d}
.c3d__img{position:relative;width:100%;height:auto;transform:translateZ(14px);filter:drop-shadow(0 0 1px rgba(255,255,255,.4)) drop-shadow(0 0 18px rgba(225,6,0,.65)) drop-shadow(0 40px 40px rgba(0,0,0,.7))}
.c3d__edge{position:absolute;inset:4% 3% 4% 3%;border-radius:12%;background:linear-gradient(135deg,#ff2a1f,#5a0200);transform:translateZ(-2px);box-shadow:0 0 50px 6px rgba(225,6,0,.55);filter:blur(1px)}
.c3d__sheen{position:absolute;inset:0;transform:translateZ(16px);border-radius:8%;pointer-events:none;mix-blend-mode:screen;-webkit-mask-image:url(assets/products/cut-front.webp);mask-image:url(assets/products/cut-front.webp);-webkit-mask-size:100% 100%;mask-size:100% 100%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 47%,rgba(255,120,110,.35) 52%,transparent 62%) var(--sx,-200%) 0/250% 100% no-repeat;animation:sheen 5.5s var(--ease) infinite}
@keyframes sheen{0%,35%{background-position:200% 0}75%,100%{background-position:-120% 0}}
.c3d__tap{position:absolute;left:62%;top:62%;transform:translateZ(30px);pointer-events:none}
.c3d__tap span{position:absolute;left:0;top:0;width:60px;height:60px;margin:-30px;border-radius:50%;border:2px solid rgba(255,60,50,.9);box-shadow:0 0 18px rgba(225,6,0,.9);animation:tap 2.4s ease-out infinite;opacity:0}
.c3d__tap span:nth-child(2){animation-delay:.8s}.c3d__tap span:nth-child(3){animation-delay:1.6s}
@keyframes tap{0%{transform:scale(.3);opacity:.95}100%{transform:scale(3.2);opacity:0}}
.hv3d__tag{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;background:rgba(10,10,10,.6);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap}
.hv3d__tag i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:halo 1.6s infinite}
@media (min-width:960px){.c3d{width:440px}.hv3d{min-height:560px}}

/* ===== Showcase ===== */
.showcase{overflow:hidden;isolation:isolate}
.showcase__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.showcase__grid{position:absolute;left:-20%;right:-20%;bottom:0;height:60%;background:linear-gradient(rgba(225,6,0,.35) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(225,6,0,.35) 1px,transparent 1px) 0 0/56px 56px;transform:perspective(600px) rotateX(70deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%);animation:gridmove2 5s linear infinite}
@keyframes gridmove2{to{background-position:0 56px,0 0}}
.showcase__orb{position:absolute;left:50%;top:55%;width:900px;height:900px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(225,6,0,.35),transparent 60%)}
.showcase .sec-head{text-align:center;margin-left:auto;margin-right:auto}
.showcase .lead{margin-left:auto;margin-right:auto}
.carousel{margin-top:40px}
.carousel__stage{position:relative;perspective:1600px;height:clamp(300px,42vw,500px)}
.carousel__ring{list-style:none;margin:0;padding:0;position:absolute;inset:0;transform-style:preserve-3d}
.carousel__item{position:absolute;left:50%;top:50%;width:min(82vw,520px);transform-style:preserve-3d;transition:transform .9s var(--ease),opacity .9s var(--ease),filter .9s;will-change:transform}
.pcard{margin:0;position:relative;border-radius:22px;overflow:hidden;transform-style:preserve-3d;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .5s var(--ease),box-shadow .5s;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -10px rgba(225,6,0,.45);background:#0a0a0a}
.pcard img{width:100%;height:auto;display:block}
.pcard__sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),transparent 45%);mix-blend-mode:screen;opacity:.8}
.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,80,70,.35)}
.pcard figcaption{position:absolute;left:14px;bottom:12px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(10,10,10,.65);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.carousel__item.is-active .pcard{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 50px 100px -30px rgba(0,0,0,.95),0 0 90px -5px rgba(225,6,0,.7)}
.carousel__ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:28px}
.carousel__btn{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);cursor:pointer;transition:background .3s,transform .3s,box-shadow .3s}
.carousel__btn svg{width:20px;height:20px}
.carousel__btn:hover{background:var(--red);box-shadow:0 0 24px rgba(225,6,0,.7);transform:scale(1.06)}
.carousel__btn:focus-visible,.carousel__dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.carousel__dots{display:flex;gap:4px}
.carousel__dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.carousel__dots button::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.3);transition:width .4s var(--ease),background .4s}
.carousel__dots button[aria-selected="true"]::before{width:22px;background:var(--red);box-shadow:0 0 10px var(--red)}
/* no-JS / reduced-motion fallback: swipe row */
.carousel--flat .carousel__stage{height:auto;perspective:none}
.carousel--flat .carousel__ring{position:static;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 20px;-webkit-overflow-scrolling:touch}
.carousel--flat .carousel__item{position:static;flex:0 0 min(82vw,460px);scroll-snap-align:center;transform:none!important;opacity:1!important;filter:none!important}
.carousel--flat .carousel__ctrl{display:none}
@media (prefers-reduced-motion:reduce){
  .c3d,.c3d[data-float],.c3d__sheen,.c3d__tap span,.hv3d__floor,.hv3d__halo,.showcase__grid,.hv3d__tag i{animation:none!important}
  .c3d__tap{display:none}.fx-cursor{display:none}
  .carousel__item,.pcard,.card{transition:none!important}
}

/* ===== Round 2: WebGL layers ===== */
.hv3d__canvas,.carousel__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s var(--ease);pointer-events:none;z-index:2}
.hv3d__canvas{inset:-10% -15%;width:130%;height:120%}
.hv3d.is-3d .hv3d__canvas{opacity:1}
.hv3d.is-3d .c3d,.hv3d.is-3d .hv3d__halo{visibility:hidden}
.carousel.is-3d .carousel__canvas{opacity:1;pointer-events:auto;cursor:grab}
.carousel.is-3d .carousel__ring{opacity:0;pointer-events:none}
.carousel.is-3d .carousel__stage{height:clamp(340px,44vw,560px)}
/* mobile: product first, compact */
@media (max-width:959px){
  .hero{padding-top:16px}
  .hero__grid{gap:4px}
  .hv3d{order:-1;min-height:300px;margin:0 -20px}
  .hv3d .c3d{width:min(58vw,240px)}
  .hv3d__tag{bottom:2%}
  .hero .display{margin-top:12px;font-size:clamp(38px,11vw,60px)}
}
/* typography / spacing polish */
.eyebrow{letter-spacing:.24em}
.sec-head .display{background:linear-gradient(180deg,#fff 30%,#bdbdbd);-webkit-background-clip:text;background-clip:text}
.sec-head .display .red{-webkit-text-fill-color:var(--red)}
.sec-head .display{-webkit-text-fill-color:transparent}
.hero .display{text-shadow:0 0 40px rgba(225,6,0,.25)}
.split-word{display:inline-block;will-change:transform}

/* ===== In action ===== */
.inaction{overflow:hidden}
.inaction .sec-head{text-align:center;margin-left:auto;margin-right:auto}
.acts{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:28px;perspective:1400px}
.act{transform-style:preserve-3d}
.act__card{margin:0;position:relative;border-radius:22px;overflow:hidden;background:#0a0a0a;transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .5s var(--ease),box-shadow .5s;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -12px rgba(225,6,0,.5);animation:float 7s ease-in-out infinite}
.act:nth-child(2) .act__card{animation-delay:-2.3s}.act:nth-child(3) .act__card{animation-delay:-4.6s}
.act__card:hover{box-shadow:0 0 0 1px rgba(255,255,255,.2),0 50px 100px -30px rgba(0,0,0,.95),0 0 90px -5px rgba(225,6,0,.75)}
.act__card img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.act__card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,80,70,.35);background:linear-gradient(180deg,transparent 55%,rgba(10,10,10,.85))}
.act__card figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;align-items:center;gap:10px;font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,5.4vw,26px);letter-spacing:.02em;line-height:1.05}
.act__num{flex:none;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;padding:5px 8px;border-radius:999px;background:var(--red);box-shadow:0 0 14px rgba(225,6,0,.8)}
@media (min-width:900px){.acts{grid-template-columns:repeat(3,1fr)}.act:nth-child(2){margin-top:48px}.act__card figcaption{font-size:22px}}
@media (prefers-reduced-motion:reduce){.act__card{animation:none!important;transition:none!important}}
.act.reveal{transition:opacity .9s var(--ease);transition-delay:var(--d,0s)}
/* ===== Carousel v2: big pop-out coverflow ===== */
.showcase__orb{width:520px;height:520px;opacity:.6}
.carousel__stage{height:calc(min(86vw,640px)*.8 + 90px);perspective:1400px;perspective-origin:50% 45%}
.carousel__item{width:min(86vw,640px);transition:transform .85s cubic-bezier(.16,1,.3,1),opacity .7s ease,filter .7s ease}
.carousel__item .pcard{cursor:pointer;-webkit-tap-highlight-color:transparent}
.carousel__item.is-active .pcard{box-shadow:0 0 0 2px rgba(255,42,31,.9),0 0 26px 2px rgba(255,42,31,.75),0 0 120px -10px rgba(225,6,0,.9),0 60px 110px -30px rgba(0,0,0,.95)}
.carousel__item.is-active .pcard::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.38) 46%,rgba(255,120,110,.25) 50%,rgba(120,200,255,.22) 54%,transparent 62%);background-size:250% 100%;background-position:120% 0;mix-blend-mode:screen}
.carousel__item.is-pop .pcard{animation:popOut .95s cubic-bezier(.2,1.2,.3,1) both}
.carousel__item.is-pop .pcard::before{animation:holo 1.1s .15s ease-out both}
.carousel__item.is-pop::after{content:"";position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.3);border-radius:50%;background:radial-gradient(circle,rgba(255,60,40,.75),rgba(225,6,0,.25) 40%,transparent 68%);pointer-events:none;z-index:-1;animation:burst .9s ease-out both}
@keyframes popOut{0%{transform:translateZ(-420px) scale(.6) rotateY(-24deg) rotateX(8deg);filter:brightness(.4)}55%{transform:translateZ(160px) scale(1.1) rotateY(5deg) rotateX(-3deg);filter:brightness(1.25)}100%{transform:none;filter:none}}
@keyframes holo{from{background-position:120% 0}to{background-position:-60% 0}}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
.carousel__ctrl{position:relative;z-index:30}
.carousel__snd{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);cursor:pointer;margin-right:4px;transition:background .3s,box-shadow .3s}
.carousel__snd svg{width:18px;height:18px}.carousel__snd .snd-off{display:none}.carousel__snd.is-off .snd-off{display:block}.carousel__snd.is-off .snd-on{display:none}.carousel__snd.is-off{color:var(--muted)}
.carousel__snd:hover{background:rgba(225,6,0,.6);box-shadow:0 0 18px rgba(225,6,0,.6)}
.carousel__snd:focus-visible{outline:2px solid #fff;outline-offset:3px}
.carousel--flat .carousel__stage{height:auto}
.lbx-lock,.lbx-lock body{overflow:hidden}
.lbx{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.lbx.is-open{visibility:visible;opacity:1}
.lbx__bg{position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 45%,rgba(225,6,0,.38),transparent 70%),rgba(5,5,5,.97)}
.lbx__stage{position:relative;perspective:1200px;width:min(94vw,1000px,calc((100vh - 150px)*1.25));touch-action:none;text-align:center;cursor:grab}
.lbx__stage:active{cursor:grabbing}
.lbx__card{margin:0 auto;position:relative;width:100%;border-radius:26px;overflow:hidden;transform-style:preserve-3d;transform:rotateX(var(--lrx,0)) rotateY(var(--lry,0));box-shadow:0 0 0 2px rgba(255,42,31,.95),0 0 40px 4px rgba(255,42,31,.7),0 0 160px rgba(225,6,0,.6),0 80px 140px -30px #000}
.lbx__card img{display:block;width:100%;height:auto;background:#0a0a0a;user-select:none;-webkit-user-drag:none;pointer-events:none}
.lbx__holo{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 47%,rgba(255,120,110,.18) 51%,rgba(120,200,255,.16) 55%,transparent 65%);background-size:220% 100%;background-position:var(--hx,50%) 0;mix-blend-mode:screen}
.lbx__card.is-in{animation:lbxIn .8s cubic-bezier(.2,1.2,.3,1) both}
@keyframes lbxIn{0%{opacity:0;transform:translateZ(-600px) scale(.5) rotateY(-30deg)}60%{opacity:1;transform:translateZ(80px) scale(1.04)}100%{opacity:1;transform:rotateX(var(--lrx,0)) rotateY(var(--lry,0))}}
.lbx__cap{margin:18px 0 0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#ddd}
.lbx__x,.lbx__nav{position:absolute;z-index:3;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(20,20,20,.7);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:background .3s,box-shadow .3s}
.lbx__x svg,.lbx__nav svg{width:22px;height:22px}
.lbx__x{top:max(16px,env(safe-area-inset-top));right:16px}
.lbx__prev{left:18px;top:50%;margin-top:-26px}.lbx__next{right:18px;top:50%;margin-top:-26px}
.lbx__x:hover,.lbx__nav:hover{background:var(--red);box-shadow:0 0 24px rgba(225,6,0,.7)}
.lbx__x:focus-visible,.lbx__nav:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:700px){.lbx__nav{top:auto;bottom:max(24px,env(safe-area-inset-bottom));margin:0}.lbx__prev{left:calc(50% - 66px)}.lbx__next{right:calc(50% - 66px)}}
@media (prefers-reduced-motion:reduce){.lbx__card.is-in,.carousel__item.is-pop .pcard,.carousel__item.is-pop::after{animation:none}.lbx{transition:none}}
.carousel__item{transform:translate(-50%,-50%) translateZ(-400px) scale(.6);opacity:0}
.carousel--flat .carousel__item{opacity:1}