/* ==========================================================================
   Certus — landing page
   Tokens, base, layout, preloader, hero, reveals, seções e refinamentos de motion.
   ========================================================================== */

:root{
  --accent:#a9bfe2;
  --accent-glow:rgba(169,191,226,.28);
  --bg:#06080c;
  --text:#eef1f6;
  --muted:#aab4c5;
  /* easings compartilhados: use estes em qualquer animação nova */
  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-in-out:cubic-bezier(.76,0,.24,1);
}

html{background:var(--bg)}
body{margin:0;background:var(--bg)}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--text)}
:focus-visible{outline:1px solid rgba(201,206,216,.7);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
section[id]{scroll-margin-top:24px}
.mono{font-family:'Geist Mono',ui-monospace,monospace}
.eyebrow{font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#aab4c5}

/* ---------- layout helpers ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:48px}
.quad{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.quad-cell{border-color:rgba(255,255,255,.15);border-style:solid;border-width:0}
.quad-cell.r{border-right-width:1px}.quad-cell.b{border-bottom-width:1px}
.faq{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:48px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.iso-scale{transform:scale(1.45)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{color:#e3e7ee;font-size:14px;padding:12px 17px;border-radius:999px;transition:color .3s,background .3s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.12)}
.btn-light{transition:background .3s,transform .3s,box-shadow .3s}
.btn-light:hover{background:#fff !important;transform:translateY(-1px);box-shadow:0 8px 30px rgba(255,255,255,.18)}
.btn-ghost{position:relative;transition:border-color .3s,color .3s,background .3s}
.btn-ghost:hover{color:#fff !important;border-color:rgba(255,255,255,.34)}
.brk{background:linear-gradient(#c9ced8,#c9ced8) left top/7px 1px no-repeat,linear-gradient(#c9ced8,#c9ced8) left top/1px 7px no-repeat,linear-gradient(#c9ced8,#c9ced8) right top/7px 1px no-repeat,linear-gradient(#c9ced8,#c9ced8) right top/1px 7px no-repeat,linear-gradient(#c9ced8,#c9ced8) left bottom/7px 1px no-repeat,linear-gradient(#c9ced8,#c9ced8) left bottom/1px 7px no-repeat,linear-gradient(#c9ced8,#c9ced8) right bottom/7px 1px no-repeat,linear-gradient(#c9ced8,#c9ced8) right bottom/1px 7px no-repeat,rgba(255,255,255,.05);transition:background-color .3s,color .3s}
.brk:hover{background-color:rgba(255,255,255,.12);color:#fff !important}

/* ---------- preloader + page lift ---------- */
.pre{position:fixed;inset:0;z-index:1;background:#06080c;display:none}
[data-anim] .pre{display:block}
.pre-fade{transition:opacity .45s ease}
.pre[data-done] .pre-fade{opacity:0}
.pre[data-gone]{display:none !important}
.pre-logo{animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.page{position:relative;z-index:2;background:#06080c;transition:transform 1.1s var(--ease-in-out)}
[data-intro] .page{transform:translateY(100vh)}
[data-intro][data-lift] .page{transform:translateY(0)}

/* ---------- nav ---------- */
.navwrap{position:fixed;top:18px;left:0;right:0;z-index:50;display:flex;justify-content:center;pointer-events:none;transition:transform .6s var(--ease-out)}
.navwrap[data-hide]{transform:translateY(-140%)}
.nav-stage{position:relative;width:calc(100% - 32px);max-width:920px;pointer-events:none}
.topnav{position:relative;pointer-events:auto;box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 24px;border-radius:999px}
.nav-logo{display:flex;align-items:center;gap:11px;height:48px}
.nav-logo img{width:28px;height:30px;object-fit:contain}
.nav-logo .nav-wordmark{width:auto;height:13px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.22))}
.nav-cta{display:inline-flex;align-items:center;height:48px;padding:0 26px;border-radius:999px;background:#f2f4f8;color:#06080c;font-size:14px;font-weight:500;white-space:nowrap}
/* depois do hero a nav fica um pouco mais densa para manter a leitura sobre o conteúdo */
.topnav{transition:background .5s ease}
.navwrap[data-solid] .topnav{background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.015) 60%,rgba(255,255,255,.04)),rgba(10,12,18,.22);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8)}

/* ---------- hero intro ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block}
[data-anim] [data-hero] .w>span{transform:translateY(112%);transition:transform 1.15s var(--ease-out)}
[data-anim] [data-hero][data-in] .w>span{transform:none}
[data-anim] [data-hero] .hx-obj{opacity:0;transform:translateY(70px) scale(.9);transition:opacity 1s ease,transform 1.5s var(--ease-out)}
[data-anim] [data-hero] .hx-fade{opacity:0;transition:opacity 1s ease .2s}
[data-anim] [data-hero] .hx-btn{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform 1s var(--ease-out)}
[data-anim] [data-hero][data-in] .hx-obj,[data-anim] [data-hero][data-in] .hx-btn{opacity:1;transform:none}
[data-anim] [data-hero][data-in] .hx-fade{opacity:1}
.navwrap .nav-stage.hx-nav{transition:opacity .9s ease .35s,transform 1.1s var(--ease-out) .35s}
[data-anim]:not([data-heroin]) .navwrap .hx-nav{opacity:0;transform:translateY(-14px)}

/* hero object */
.spin-a,.spin-b{background-size:1000% 900%;background-repeat:no-repeat;background-position:0% 0%}
/* sprite de 90 quadros: só entra como reserva quando o WebGL2 não está disponível (data-nogl, setado pelo JS) */
.spin-a,.spin-b{display:none}
.spin-box[data-nogl] .spin-a,.spin-box[data-nogl] .spin-b{display:block;background-image:url("../assets/img/hero-spin.webp")}
.hexgl{position:absolute;inset:0;width:100%;height:100%;display:block}
/* arrastar o logo gira o objeto; no toque, a rolagem vertical continua funcionando */
.spin-box{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.spin-box[data-drag]{cursor:grabbing}
.spin-box[data-nogl]{cursor:default}
.spin-box[data-nogl] .hexgl{display:none}

/* ---------- scroll reveals ---------- */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}
[data-anim] [data-rv=lines] .ln>span{transform:translateY(110%);transition:transform 1.2s var(--ease-out)}
[data-anim] [data-rv=lines] .ln:nth-child(2)>span{transition-delay:.08s}
[data-anim] [data-rv=lines] .ln:nth-child(3)>span{transition-delay:.16s}
[data-anim] [data-rv=lines] .ln:nth-child(4)>span{transition-delay:.24s}
[data-anim] [data-rv=lines][data-in] .ln>span{transform:none}
[data-anim] [data-rv=fade]{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1.2s var(--ease-out)}
[data-anim] [data-rv=fade][data-in]{opacity:1;transform:none}
[data-anim] [data-rv=panel]{opacity:0;transform:translateY(120px);transition:opacity 1s ease,transform 1.5s var(--ease-out)}
[data-anim] [data-rv=panel][data-in]{opacity:1;transform:none}
[data-anim] [data-rv=stagger]>*{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform 1.1s var(--ease-out)}
[data-anim] [data-rv=stagger]>*:nth-child(2){transition-delay:.08s}
[data-anim] [data-rv=stagger]>*:nth-child(3){transition-delay:.16s}
[data-anim] [data-rv=stagger]>*:nth-child(4){transition-delay:.24s}
[data-anim] [data-rv=stagger]>*:nth-child(5){transition-delay:.32s}
[data-anim] [data-rv=stagger]>*:nth-child(6){transition-delay:.40s}
[data-anim] [data-rv=stagger][data-in]>*{opacity:1;transform:none}
[data-anim] [data-rv=dim]>*{opacity:.18;transition:opacity 1s ease}
[data-anim] [data-rv=dim]>*:nth-child(2){transition-delay:.12s}
[data-anim] [data-rv=dim]>*:nth-child(3){transition-delay:.24s}
[data-anim] [data-rv=dim]>*:nth-child(4){transition-delay:.36s}
[data-anim] [data-rv=dim]>*:nth-child(5){transition-delay:.48s}
[data-anim] [data-rv=dim][data-in]>*{opacity:1}

/* ---------- stats ---------- */
.stat{border-left:1px solid rgba(255,255,255,.18);padding-left:18px;display:flex;flex-direction:column;justify-content:space-between;gap:56px}
.stat-num{position:relative;display:flex;align-items:flex-end;gap:8px;font-weight:300;font-size:clamp(56px,6vw,80px);line-height:.82;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat-num::before{content:"";position:absolute;left:-19px;bottom:2px;width:2px;height:70%;background:#eef1f6}

/* ---------- steps ---------- */
#processo{background:radial-gradient(ellipse 62% 48% at 74% 56%,rgba(200,214,240,.075),transparent 72%),radial-gradient(ellipse 46% 40% at 16% 40%,rgba(200,214,240,.045),transparent 72%)}
.step{position:relative;margin-left:22px}
.step-bg{display:block;position:absolute;inset:0 0 0 -22px;opacity:0;transform:translateX(-12px);transition:opacity .55s ease,transform .7s var(--ease-out);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));background:rgba(214,222,236,.7)}
.step-bg::after{content:"";position:absolute;inset:1px;clip-path:polygon(0 0,calc(100% - 13.6px) 0,100% 13.6px,100% 100%,13.6px 100%,0 calc(100% - 13.6px));background:linear-gradient(180deg,#2b3544,#1a212d)}
.step{display:block;width:calc(100% - 22px);padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.step:focus-visible{outline:1px solid rgba(201,206,216,.6);outline-offset:6px}
.step:not([data-on]) .step-bg{opacity:.38;transform:none}
.step[data-on] .step-bg{opacity:1;transform:none}
.step-dots{display:block;position:absolute;right:0;top:0;bottom:0;width:46%;background-image:radial-gradient(rgba(255,255,255,.2) 1px,transparent 1.3px);background-size:14px 14px;-webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%);opacity:.5;transition:opacity .5s}
.step[data-on] .step-dots{opacity:0}
.step .tick{width:2px;height:22px;border-radius:1px;background:linear-gradient(#fff,rgba(255,255,255,.25));flex:none}
.step .num{color:#9ca6b8;transition:color .5s}
.step .ttl{color:#c8ced9;transition:color .5s}
.step .desc{color:#9ca6b8;transition:color .5s}
.step[data-on] .num{color:#e3e8f0}
.step[data-on] .ttl{color:#fff}
.step[data-on] .desc{color:#d6dce6}
.step-rule{display:block;height:1px;width:130px;margin:22px 0 0 0;background:rgba(255,255,255,.2)}

/* dial */
.dial-grid{position:absolute;inset:-6%;background-image:radial-gradient(rgba(255,255,255,.26) 1px,transparent 1.4px);background-size:18px 18px;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent);opacity:.55}
.dial{position:absolute;inset:11%;border-radius:50%;background:radial-gradient(circle at 50% 42%,#262f3d,#121821 74%);border:1px solid rgba(255,255,255,.2);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 1px rgba(0,0,0,.4),0 0 90px rgba(190,205,235,.1),0 40px 90px rgba(0,0,0,.6)}
.dial-sector{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from -39deg,rgba(255,255,255,.2) 0deg 78deg,rgba(255,255,255,0) 78deg 360deg);will-change:transform}
.dial-ring{position:absolute;inset:-5%;border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.dial-orbit{position:absolute;inset:-5%;will-change:transform}
.dial-orbit>i{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.9)}
.gbtn{width:60px;height:60px;border-radius:17px;background:linear-gradient(180deg,#434b57,#232932);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.1),0 14px 30px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;color:#e6e9ef;flex:none}
.gcore{position:relative;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 50% 28%,#58606c,#222831 74%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 9px rgba(255,255,255,.06),0 24px 50px rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;flex:none}
.gcore::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(255,255,255,.18);animation:ping 2.8s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}
.dial-cross{position:absolute;left:50%;top:50%;width:0;height:0}
.dial-cross>*{position:absolute;left:0;top:0}
.dial-cross .gcore{transform:translate(-50%,-50%)}
.dash{width:16px;height:2px;border-radius:1px;background:#d2d9e4;flex:none}
.dash.n{width:2px;height:16px;transform:translate(-50%,-50%) translateY(-66px)}
.dash.s{width:2px;height:16px;transform:translate(-50%,-50%) translateY(66px)}
.dash.e{transform:translate(-50%,-50%) translateX(66px)}
.dash.w{transform:translate(-50%,-50%) translateX(-66px)}
.sym{border:0;padding:0;cursor:pointer;color:#d6dce6;transition:color .4s ease,box-shadow .5s ease,scale .5s var(--ease-out)}
.sym.n{transform:translate(-50%,-50%) translateY(-112px)}
.sym.e{transform:translate(-50%,-50%) translateX(112px)}
.sym.s{transform:translate(-50%,-50%) translateY(112px)}
.sym.w{transform:translate(-50%,-50%) translateX(-112px)}
.sym:hover{color:#e6e9ef;scale:1.04}
.sym:focus-visible{outline:1px solid rgba(201,206,216,.6);outline-offset:4px}
.sym[data-act]{color:#fff;scale:1.07;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.4),0 0 34px var(--accent-glow),0 14px 30px rgba(0,0,0,.6)}

/* ---------- platform tiles (CSS 3D boxes) ---------- */
.iso-stage{position:relative;height:800px;display:flex;align-items:center;justify-content:center}
.plane{position:relative;width:420px;height:420px;transform:rotateX(56deg) rotateZ(-45deg);transform-style:preserve-3d}
.floor{position:absolute;inset:-148px;background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);background-size:148px 148px;background-position:-12px -12px;-webkit-mask:radial-gradient(closest-side,#000 35%,transparent);mask:radial-gradient(closest-side,#000 35%,transparent)}
.streak{position:absolute;height:2px;width:90px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));animation:streak 5.5s linear infinite}
.streak.v{width:2px;height:90px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));animation-name:streakv}
@keyframes streak{0%{transform:translateX(-160px);opacity:0}10%,80%{opacity:1}100%{transform:translateX(620px);opacity:0}}
@keyframes streakv{0%{transform:translateY(-160px);opacity:0}10%,80%{opacity:1}100%{transform:translateY(620px);opacity:0}}
.box{position:absolute;width:124px;height:124px;transform-style:preserve-3d;transition:translate 1.2s var(--ease-out) var(--d,0s),opacity .9s ease var(--d,0s)}
.bx-in{position:absolute;inset:0;transform-style:preserve-3d;animation:bob 6s ease-in-out infinite;animation-delay:var(--f,0s)}
@keyframes bob{0%,100%{transform:translateZ(0)}50%{transform:translateZ(7px)}}
.top{position:absolute;inset:0;border-radius:16px;transform:translateZ(26px);background:linear-gradient(135deg,#454c57,#20252d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 1px 1px 0 rgba(255,255,255,.34);display:flex;align-items:center;justify-content:center;color:#d4d8de;transition:background .5s ease,box-shadow .5s ease}
.top.core{background:linear-gradient(135deg,#7d8593,#3c424c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 1px 1px 0 rgba(255,255,255,.35),0 0 60px rgba(255,255,255,.12)}
.side{position:absolute;background:linear-gradient(#262b33,#14171c)}
.side.y{left:10px;right:10px;height:26px;top:100%;transform-origin:top center;transform:rotateX(90deg)}
.side.x{top:10px;bottom:10px;width:26px;left:0;transform-origin:left center;transform:rotateY(-90deg)}
.port{position:absolute;left:12px;top:8px;width:20px;height:9px;border-radius:2px;border:1px solid #2f353e;background:#08090b}
.led{position:absolute;top:11px;width:3px;height:3px;border-radius:50%;background:#59606b}
.led.a{left:40px}.led.b{left:48px;background:#c9ced8;animation:blink 2.4s steps(1) infinite}
.slot{position:absolute;right:12px;top:12px;width:26px;height:1px;background:#3a4049}
.side.x .port{left:8px;top:12px;width:9px;height:20px}
.side.x .led{left:11px}.side.x .led.a{top:42px}.side.x .led.b{top:50px}
[data-anim] [data-rv=tiles] .box{opacity:0;translate:0 0 180px}
[data-anim] [data-rv=tiles][data-in] .box{opacity:1;translate:0 0 0}
[data-settled] .box{transition-delay:0s}
[data-anim] [data-rv=tiles][data-in] .box:hover{translate:0 0 18px}
.box:hover .top{background:linear-gradient(135deg,#566070,#2a303a)}
.box:hover .top.core{background:linear-gradient(135deg,#939cab,#474e5a)}
.iso-badge{position:absolute;left:50%;top:44px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;white-space:nowrap}
.iso-badge i{width:6px;height:6px;border-radius:50%;background:#5fc49a;box-shadow:0 0 10px #5fc49a;animation:blink 1.8s ease-in-out infinite}
[data-anim] .iso-badge{opacity:0;transform:translate(-50%,10px);transition:opacity .8s ease 1s,transform 1s var(--ease-out) 1s}
[data-anim] [data-badge-in] .iso-badge{opacity:1;transform:translate(-50%,0)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- solution widgets ---------- */
.wid{position:relative;width:270px;height:150px;display:flex;align-items:center;justify-content:center}
.dev{background:linear-gradient(180deg,#3f4651,#1f242c);border-radius:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.1),0 14px 30px rgba(0,0,0,.6)}
.sq{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:#d4d8de}
.k{height:40px;border-radius:9px;background:linear-gradient(180deg,#566070,#323943);box-shadow:inset 0 1px 0 rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;font-family:'Geist Mono',ui-monospace,monospace;font-size:11px;color:#e6e9ef}
.key{animation:keyp 3.2s ease-in-out infinite}
@keyframes keyp{0%,16%,100%{filter:brightness(1);transform:translateY(0)}8%{filter:brightness(1.7);transform:translateY(1px)}}
.bar{display:block;width:3px;height:15px;border-radius:1px;background:#d4d8de;transform-origin:bottom center;animation:barh 1.7s ease-in-out infinite}
@keyframes barh{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.mbar{display:block;width:8px;border-radius:2px 2px 0 0;background:#5d6776;transform-origin:bottom center;animation:barh 2.6s ease-in-out infinite}
.mbar.hi{background:linear-gradient(#fff,#9aa1ab);box-shadow:0 0 14px rgba(255,255,255,.4)}
.quad-cell{overflow:hidden}
.circ{position:absolute;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent);mask-image:radial-gradient(closest-side,#000 50%,transparent)}
.circ .t{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1}
.circ .s{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.4;stroke-linecap:round}
.circ .n{fill:#06080c;stroke:rgba(255,255,255,.38);stroke-width:1}
.circ .n.on{fill:#fff;stroke:rgba(255,255,255,.3);stroke-width:3}
.circ .p{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:6 200;stroke-dashoffset:6;animation:cpulse 3s cubic-bezier(.45,0,.55,1) infinite}
.circ .p.rev{animation-direction:reverse}
@keyframes cpulse{0%{stroke-dashoffset:6;opacity:0}12%,88%{opacity:1}100%{stroke-dashoffset:-100;opacity:0}}
.dots3{position:relative;display:flex;gap:7px}
.dots3>i{width:5px;height:5px;border-radius:50%;background:#59606b}
.dots3>b{position:absolute;left:0;top:0;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;animation:dotmv 3s steps(1) infinite}
@keyframes dotmv{0%{transform:translateX(0)}33%{transform:translateX(12px)}66%{transform:translateX(24px)}}
.arrow{animation:bobv 1.8s ease-in-out infinite}
.arrow.up{animation-direction:reverse}
@keyframes bobv{0%,100%{transform:translateY(-3px);opacity:.5}50%{transform:translateY(3px);opacity:1}}
.spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:blink 2.2s ease-in-out infinite}
.xrail{position:absolute;top:50%;height:2px;width:min(150px,16%);background:#fff;box-shadow:0 0 12px rgba(255,255,255,.6);margin-top:-1px;z-index:1}
.xrail.l{right:50%;transform-origin:right center}
.xrail.r{left:50%;margin-left:4px;transform-origin:left center}
[data-anim] [data-rv=rails] .xrail{transform:scaleX(0);transition:transform 1.6s var(--ease-out) .5s}
[data-anim] [data-rv=rails][data-in] .xrail{transform:scaleX(1)}

/* ---------- tool cards ---------- */
.tcard{transition:border-color .4s ease,transform .6s var(--ease-out),opacity .9s ease}
.tcard:hover{border-color:rgba(255,255,255,.36) !important}
[data-anim] [data-rv=stagger][data-in]>.tcard:hover,.tcard:hover{transform:translateY(-4px);transition-delay:0s}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid rgba(255,255,255,.18)}
.faq-q{width:100%;min-height:60px;padding:16px 0;background:none;border:0;color:#e6e9ef;font-family:inherit;font-size:15px;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:color .3s}
.faq-q:hover{color:#fff}
.faq-sign{font-size:26px;font-weight:200;line-height:1;color:#c9ced8;flex:none;transition:transform .5s var(--ease-out)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-out)}
.faq-clip{overflow:hidden;min-height:0}
.faq-p{margin:0 0 20px;max-width:560px;font-size:12px;line-height:1.7;color:#c0c7d3;opacity:0;transform:translateY(-8px);transition:opacity .5s ease,transform .6s var(--ease-out)}
.faq-item[data-open] .faq-a{grid-template-rows:1fr}
.faq-item[data-open] .faq-sign{transform:rotate(45deg)}
.faq-item[data-open] .faq-p{opacity:1;transform:none}

/* ---------- cta ---------- */
.cta-btn{transition:background 1s ease .5s,color 1s ease .5s,transform .3s,box-shadow .3s}
[data-anim] [data-rv=cta] .cta-btn{background:#3a3f47 !important;color:#c0c7d3 !important}
[data-anim] [data-rv=cta][data-in] .cta-btn{background:#f2f4f8 !important;color:#06080c !important}
.cta-btn:hover{transform:translateY(-1px);box-shadow:0 10px 40px rgba(255,255,255,.2);transition-delay:0s}

@media (max-width:1280px){.iso-scale{transform:scale(1.2)}.iso-stage{height:680px}}
@media (max-width:900px){
.split,.about,.faq{grid-template-columns:minmax(0,1fr);gap:40px}
.quad{grid-template-columns:minmax(0,1fr)}
.quad-cell.r{border-right-width:0}.quad-cell{border-bottom-width:1px}
.xrail{display:none}
.iso-scale{transform:scale(.68)}
.iso-stage{height:440px}
.stats{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:760px){.nav-links{display:none}.topnav{padding-left:20px}}
@media (prefers-reduced-motion:reduce){
.pre-logo,.gcore::after,.streak,.bx-in,.led.b,.iso-badge i,.key,.bar,.mbar,.circ .p,.dots3>b,.arrow,.spark{animation:none !important}
}
/* ---------- refinamentos de motion ---------- */
/* nav: link da seção visível (scrollspy) */
.nav-links a[aria-current="true"]{color:#fff;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
/* animações infinitas só rodam na seção que está na tela (data-offscreen vem do JS) */
section[data-offscreen] *,section[data-offscreen] *::before,section[data-offscreen] *::after{animation-play-state:paused !important}
/* camadas do parallax ganham a própria camada de composição */
[data-par-sky],[data-par-txt],[data-par-obj],[data-par-dunes]{will-change:transform}
[data-intro] .page{will-change:transform}
/* feedback de clique nos botões */
.btn-light:active,.btn-ghost:active,.cta-btn:active{transform:translateY(0) scale(.98);transition-duration:.1s}

/* ---------- efeito de vidro ---------- */
/* Vidro transparente: quase sem preenchimento e com desfoque leve, para o fundo aparecer através dele.
   O que denuncia o vidro são os reflexos: brilho na borda de cima, luz interna suave, borda em degradê (::before)
   e uma sombra de profundidade embaixo. */
.glass,.glass-panel{
  -webkit-backdrop-filter:blur(7px) saturate(1.5);backdrop-filter:blur(7px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),          /* brilho na quina de cima */
    inset 0 -1px 0 rgba(255,255,255,.10),         /* reflexo fraco embaixo */
    inset 0 14px 22px -16px rgba(255,255,255,.35),/* luz entrando pelo topo */
    inset 0 -14px 20px -18px rgba(0,0,0,.25),     /* espessura do vidro embaixo */
    0 12px 36px -14px rgba(0,0,0,.30)
}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%,rgba(255,255,255,.04)),rgba(14,16,22,.14)}
.btn-ghost.glass{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%,rgba(255,255,255,.04)),rgba(14,16,22,.24)}
.glass-panel{position:relative;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.012) 55%,rgba(255,255,255,.03))}
.glass-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 24px 48px -36px rgba(255,255,255,.18),0 30px 80px -40px rgba(0,0,0,.6)}
/* texto sobre vidro claro: sombra discreta para manter a leitura com o céu aparecendo por trás */
.glass{text-shadow:0 1px 2px rgba(0,0,0,.22)}
.glass .nav-cta{text-shadow:none}
/* borda: brilho forte no canto de cima à esquerda e reflexo no canto oposto, quase sumindo no meio */
.glass::before,.glass-panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.18) 30%,rgba(255,255,255,.04) 55%,rgba(255,255,255,.14) 78%,rgba(255,255,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)
}
.glass-panel::before{background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.12) 30%,rgba(255,255,255,.04) 58%,rgba(255,255,255,.1) 80%,rgba(255,255,255,.3))}

/* cartões de ferramenta: translúcidos, com o holofote do cursor; o ícone é desenhado em canvas (main.js) */
.lineico{display:block;width:78px;height:56px}
.tcard{
  background:radial-gradient(300px circle at var(--mx,-400px) var(--my,-400px),rgba(255,255,255,.12),rgba(255,255,255,0) 70%),linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.18);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(32,36,44,.92)}.glass-panel{background:#14181e}
}