/* Byte Core V12 — interaction polish */
:root{--v12-orange:#f35a08;--v12-orange-hi:#ff7a28;--v12-ink:#3e3d3c;--v12-paper:#fffdfa}

/* 1. Hero: apenas um véu quente/cinza para separar visualmente do navbar branco. */
.hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(47,43,40,.042),rgba(72,58,48,.024) 46%,rgba(255,255,255,0) 82%);mix-blend-mode:multiply}
.hero-shade{background:radial-gradient(circle at 75% 46%,rgba(255,111,34,.075),transparent 32%),linear-gradient(90deg,rgba(252,250,248,.94) 0%,rgba(250,247,244,.84) 42%,rgba(248,245,242,.46) 68%,rgba(249,247,245,.16) 100%)!important}

/* 2. Travessia: corredor 3D real em CSS, controlado pelo scroll via JS. */
.transit{background:linear-gradient(180deg,#fff 0%,#fbf7f3 38%,#f9f3ed 53%,#fff 100%)!important}
.transit-sticky{position:sticky;top:0;perspective:1200px;isolation:isolate;background:transparent!important}
.transit-copy,.transit-hud{position:relative;z-index:8}
.transit-tunnel{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;perspective:900px;transform-style:preserve-3d;opacity:var(--tunnel-opacity,.82);transition:opacity .2s linear}
.tunnel-vignette{position:absolute;inset:0;background:radial-gradient(circle at 67% 50%,transparent 0 13%,rgba(255,250,246,.10) 25%,rgba(255,255,255,.72) 67%,rgba(255,255,255,.97) 90%);z-index:4}
.tunnel-core{position:absolute;left:67%;top:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%) scale(var(--tunnel-core-scale,1));background:#ff7628;box-shadow:0 0 18px rgba(243,90,8,.55),0 0 50px rgba(243,90,8,.20);opacity:.75;z-index:3}
.tunnel-ring{position:absolute;left:67%;top:50%;width:560px;height:360px;margin-left:-280px;margin-top:-180px;border:1px solid rgba(239,91,10,.20);border-radius:50%;box-shadow:inset 0 0 30px rgba(240,91,8,.025),0 0 22px rgba(240,91,8,.02);transform-style:preserve-3d;will-change:transform,opacity;opacity:0}
.tunnel-ring:before,.tunnel-ring:after{content:"";position:absolute;inset:9%;border-radius:50%;border:1px dashed rgba(85,75,68,.08)}
.tunnel-ring:after{inset:22%;border-style:solid;border-color:rgba(240,91,8,.07)}
.tunnel-rail{position:absolute;left:67%;top:50%;width:72vw;height:1px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(243,90,8,.44),rgba(243,90,8,.08) 35%,transparent 78%);opacity:.3;will-change:transform,opacity}
.tunnel-rail-a{transform:rotate(22deg)}.tunnel-rail-b{transform:rotate(-22deg)}.tunnel-rail-c{transform:rotate(158deg)}.tunnel-rail-d{transform:rotate(202deg)}
.transit-title{position:relative;z-index:9;transform-style:preserve-3d}
.transit-line{display:block;backface-visibility:hidden}
.transit-description{max-width:610px;position:relative;z-index:9}
.transit-hud{z-index:9!important}

/* 3. Showcase: cena responde ao scroll e ao ponteiro novamente. */
.showcase-sticky{isolation:isolate}
.product-orbit{will-change:transform;transition:filter .24s ease;transform:perspective(1500px) rotateX(var(--show-ry,0deg)) rotateY(var(--show-rx,0deg)) translate3d(0,var(--show-lift,0px),0)!important}
.product-panel{will-change:transform;transition:box-shadow .28s ease,border-color .28s ease}
.product-orbit:hover .product-panel{border-color:rgba(240,91,8,.36)!important;box-shadow:0 34px 88px rgba(91,54,30,.14),0 0 58px rgba(240,91,8,.04)!important}
.panel-dashboard{transform:perspective(1100px) translate3d(var(--dash-x,0px),var(--dash-y,0px),0) rotateY(calc(-7deg + var(--dash-ry,0deg))) rotateX(calc(2deg + var(--dash-rx,0deg))) scale(var(--dash-scale,1))!important}
.panel-tablet{transform:perspective(900px) translate3d(var(--tab-x,0px),var(--tab-y,0px),0) rotateY(calc(-10deg + var(--tab-ry,0deg))) rotateZ(calc(1deg + var(--tab-rz,0deg)))!important}
.panel-phone{transform:perspective(800px) translate3d(var(--phone-x,0px),var(--phone-y,0px),0) rotateY(calc(8deg + var(--phone-ry,0deg))) rotateZ(calc(-2deg + var(--phone-rz,0deg)))!important}
.orbit-one,.orbit-two{will-change:transform;transition:opacity .2s linear}.orbit-one{transform:rotate(var(--orbit-a,0deg)) scale(var(--orbit-scale-a,1))!important}.orbit-two{transform:rotate(var(--orbit-b,0deg)) scale(var(--orbit-scale-b,1))!important}
.ui-chart span{transform-origin:left bottom;transform:scaleX(var(--chart-progress,.48));transition:none!important}

/* 4. Starfield laranja discreto: visível, mas sem competir com texto. */
.micro-particles{opacity:.68!important;mix-blend-mode:normal!important;z-index:7!important}

@media(max-width:900px){
  .hero:after{background:linear-gradient(180deg,rgba(52,47,43,.035),rgba(255,255,255,0) 74%)}
  .transit-tunnel{opacity:.68}.tunnel-core{left:50%;top:58%}.tunnel-ring{left:50%;top:58%;width:390px;height:250px;margin-left:-195px;margin-top:-125px}.tunnel-rail{left:50%;top:58%;width:86vw}
  .transit-copy{z-index:9}.product-orbit{transform:none!important}
  .panel-dashboard,.panel-tablet,.panel-phone{--dash-x:0px;--dash-y:0px;--dash-ry:0deg;--dash-rx:0deg;--dash-scale:1;--tab-x:0px;--tab-y:0px;--tab-ry:0deg;--tab-rz:0deg;--phone-x:0px;--phone-y:0px;--phone-ry:0deg;--phone-rz:0deg}
  .micro-particles{opacity:.54!important}
}
@media(max-width:560px){
  .transit-tunnel{opacity:.55}.tunnel-ring{width:310px;height:200px;margin-left:-155px;margin-top:-100px}.tunnel-rail{opacity:.20}
  .micro-particles{opacity:.48!important}
}
@media(prefers-reduced-motion:reduce){.transit-tunnel{opacity:.26!important}.product-orbit{transform:none!important}}