/* beecode: camada de acabamento. Só transform/opacity animam. */
h1,h2,h3,.lead,.sh p{text-wrap:balance}
p,li{text-wrap:pretty}
.nav{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
.nav-in{min-height:62px}
.nav-links{gap:2px}
.nav-links a{font-size:14px;color:var(--text-soft)}
.nav-links a:hover{background:var(--glass);color:var(--ink)}
@media(max-width:1060px){
 .nav-links,.nav-in>.btn{display:none}
 .burger{display:inline-grid}
 .nav-in .theme{margin-left:auto}
}
.sheet{position:absolute;left:0;right:0;top:100%;box-shadow:var(--sh)}
.sheet a{padding:15px var(--gutter)}
.btn{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -1px 0 rgba(0,0,0,.12) inset,0 12px 28px -14px var(--accent-glow)}
.btn.ghost{box-shadow:none}

/* hero */
.hero{padding:clamp(36px,5.5vw,76px) 0 clamp(48px,6vw,88px)}
.hero h1{font-size:clamp(36px,4.9vw,60px);line-height:1.04;letter-spacing:-.04em;margin:20px 0 20px}
.hero h1 .wordmark{font-size:1em;letter-spacing:-.04em}
.pill{padding:7px 14px 7px 12px;background:var(--glass-2);box-shadow:var(--glass-hi)}
.hero-grid>figure{position:relative}
.hero-grid>figure::before{content:"";position:absolute;inset:4% -8% 8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,var(--accent-glow),transparent 72%);opacity:.5;filter:blur(34px)}
.term{border-color:rgba(255,200,90,.22);box-shadow:var(--sh-lg),0 0 0 1px rgba(255,200,90,.06)}
.term::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;z-index:2;background:linear-gradient(90deg,transparent,#F5A623,transparent)}
.term{position:relative}
.meta{padding-top:22px;border-top:1px solid var(--line);margin-top:28px}
.meta .i{width:18px;height:18px}

/* seções */
section{padding:clamp(52px,6.5vw,92px) 0}
.alt{background:linear-gradient(180deg,transparent,var(--bg-2) 8%,var(--bg-2) 92%,transparent)}
.sh h2{letter-spacing:-.04em;font-size:clamp(28px,3.8vw,44px)}
.sh p{max-width:62ch}
.eyebrow{padding:6px 12px 6px 10px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--glass)}
.eyebrow .i{width:15px;height:15px}

/* painel de instalação */
.panel{background:linear-gradient(180deg,var(--glass-2),var(--paper));box-shadow:var(--sh);position:relative}
.panel::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.cmd{box-shadow:inset 0 0 0 1px rgba(255,201,92,.08)}
.facts li{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--glass);align-items:flex-start}
.facts{gap:10px}

/* bento de recursos */
.grid{gap:16px}
.card{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--glass-2),var(--paper));box-shadow:var(--sh-sm);padding:24px}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .3s}
.card:hover::after{opacity:.9}
.card.w2{grid-column:span 2}
.card .ico{width:46px;height:50px;margin-bottom:14px}
.card h3{font-size:18px;letter-spacing:-.02em}
.viz{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 12.5px var(--f-mono);color:var(--text-soft)}
.viz.modes span{display:grid;gap:2px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);min-width:118px}
.viz.modes span b{font-weight:600;color:var(--ink);font-size:13px}
.viz.modes span.on{border-color:var(--accent);background:var(--accent-soft)}
.viz.modes span.on b{color:var(--accent-strong)}
.viz kbd{margin-left:auto;padding:5px 10px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:7px;background:var(--bg-2);font:600 12px var(--f-mono);color:var(--ink)}
.viz.media{gap:14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.viz.media .thumb{width:64px;height:44px;border-radius:8px;background:linear-gradient(135deg,var(--honey-1),var(--honey-3));position:relative;flex:none}
.viz.media .thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,#FFF4DB 0 7px,transparent 8px),linear-gradient(160deg,transparent 55%,rgba(42,26,0,.7) 56%)}
.viz.media span:last-child{display:grid;gap:2px;font-size:12px}
.viz.media b{color:var(--ink);font-weight:600;font-size:12.5px}
.viz.envs span{padding:5px 11px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--bg-2)}
@media(max-width:980px){.card.w2{grid-column:span 2}}
@media(max-width:720px){.card.w2{grid-column:auto}.viz kbd{margin-left:0}}

/* login */
.steps li{background:linear-gradient(180deg,var(--glass-2),var(--paper));box-shadow:var(--sh-sm)}
@media(min-width:981px){
 .steps{position:relative}
 .steps::before{content:"";position:absolute;left:44px;right:44px;top:46px;border-top:2px dashed var(--line-2);z-index:0}
 .steps li{position:relative;z-index:1}
 .steps li::before{box-shadow:0 0 0 6px var(--bg)}
}
.kv>div{background:var(--glass-2)}

/* modelos */
.model{position:relative;background:linear-gradient(180deg,var(--glass-2),var(--paper));padding:26px;box-shadow:var(--sh-sm)}
.model.main{border-width:1px;border-color:var(--accent);box-shadow:0 30px 70px -36px var(--accent-glow),0 0 0 4px var(--accent-soft)}
.model .tag{position:absolute;top:22px;right:22px;margin:0}
.mhex{display:grid;place-items:center;width:46px;height:51px;margin-bottom:16px;background:linear-gradient(180deg,var(--honey-1),var(--honey-2));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);color:#2A1A00;font:700 17px var(--f-ui)}
.model:nth-child(2) .mhex{opacity:.82}.model:nth-child(3) .mhex{opacity:.64}

/* planos */
.plan{background:linear-gradient(180deg,var(--glass-2),var(--paper));box-shadow:var(--sh)}
.plan .eyebrow{border:0;background:none;padding:0}
.plan::after{display:none}
.plan::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.price{font-size:46px;letter-spacing:-.04em}
.plan ul{padding-top:16px;border-top:1px solid var(--line)}
.plan .i{width:18px;height:18px}

/* faq */
.faq details{transition:border-color .25s}
.faq details[open]{border-color:var(--accent)}
.faq summary{padding:17px 54px 17px 20px}
.faq summary:focus-visible{outline-offset:-3px}

/* cta final */
.final .box2{box-shadow:var(--sh-lg)}
.final .box2::after{content:"";position:absolute;width:70%;aspect-ratio:1;left:15%;top:-60%;z-index:-1;background:radial-gradient(closest-side,rgba(255,181,36,.28),transparent);filter:blur(30px)}

@media(max-width:720px){
 .hero h1{font-size:clamp(33px,9.6vw,42px)}
 .model .tag{top:18px;right:18px}
 .viz.modes span{min-width:0;flex:1 1 30%}
}
.hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}
.hero h1{font-size:clamp(34px,4.3vw,54px)}
@media(max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero h1{font-size:clamp(34px,6.4vw,48px)}}
@media(max-width:720px){.hero h1{font-size:clamp(33px,9.6vw,42px)}}