/* ============================================================
   MinhaSafra — site institucional (direção A: sala de controle)
   Identidade: manual-identidade.html · Sora + Inter · paleta Energia
   ============================================================ */

:root{
  --bg:#0C100E; --bg2:#0F1512; --card:#141A16; --ink:#E8EDE9; --sub:#93A099;
  --line:#242C27; --chip:#1B231E;
  --esmeralda:#0E9469; --seiva:#51B441; --lima:#93D31E; --limavivo:#A5DC28;
  --alerta:#E8736E;
  --grad:linear-gradient(90deg,#0E9469,#93D31E);
  --sora:'Sora',system-ui,sans-serif;
  --inter:'Inter',system-ui,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
  --w:1160px;
  --r:10px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--inter); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* trama global: grade gigante e discreta costurando a página inteira */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(81,180,65,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(81,180,65,.028) 1px,transparent 1px);
  background-size:96px 96px;
}
.wrap{max-width:var(--w); margin:0 auto; padding:0 24px; position:relative; z-index:1}
img{max-width:100%}

h1,h2,h3{font-family:var(--sora); letter-spacing:-.02em; text-wrap:balance}
h1{font-size:clamp(34px,5vw,54px); font-weight:800; line-height:1.08}
h2{font-size:clamp(24px,3.2vw,36px); font-weight:800; line-height:1.16}
h3{font-size:17px; font-weight:700}
.grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.lead{font-size:clamp(16px,1.6vw,18.5px); color:var(--sub); max-width:56ch}
.sub{font-size:16px; color:var(--sub); max-width:64ch}
.sub b{color:var(--ink); font-weight:600}
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--lima); font-weight:600;
}

/* ============ fundo geométrico da página ============ */
.fundo{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.fg{position:absolute; display:block; color:var(--seiva)}
.fg-circ{border:1px solid rgba(81,180,65,.10); border-radius:50%}
.fg-circ.c1{width:520px; height:520px; right:-180px; top:820px; animation:flutua 14s ease-in-out infinite}
.fg-circ.c2{width:340px; height:340px; left:-140px; top:2150px; animation:flutua 18s ease-in-out infinite reverse}
.fg-hex{width:190px; height:190px; opacity:.09; left:6%; top:1450px;
  background:conic-gradient(from 0deg, transparent 0 100%);
  border:1px solid var(--seiva);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation:gira 60s linear infinite;
}
.fg-quad{border:1px solid rgba(147,211,30,.10); transform:rotate(45deg)}
.fg-quad.q1{width:130px; height:130px; right:9%; top:2600px; animation:gira 48s linear infinite}
.fg-quad.q2{width:90px; height:90px; left:12%; top:3400px; animation:gira 38s linear infinite reverse}
.fg-cruz{
  font-family:var(--mono); font-size:26px; color:rgba(147,211,30,.16); font-weight:400;
  animation:pisca-suave 5s ease-in-out infinite;
}
.fg-cruz.x1{left:16%; top:1050px}
.fg-cruz.x2{right:20%; top:1900px; animation-delay:1.6s}
.fg-cruz.x3{left:8%; top:2950px; animation-delay:3s}
.fg-fio{width:1px; background:linear-gradient(180deg, transparent, rgba(81,180,65,.18), transparent)}
.fg-fio.f1{height:420px; left:50%; top:950px}
.fg-fio.f2{height:360px; right:26%; top:3050px}
@keyframes flutua{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
@keyframes gira{to{transform:rotate(405deg)}}
@keyframes pisca-suave{0%,100%{opacity:.16}50%{opacity:.38}}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sora); font-weight:700; font-size:14.5px; text-decoration:none;
  padding:12px 22px; border-radius:8px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-solid{
  background:var(--grad); color:#06120C;
  box-shadow:0 4px 24px -8px rgba(147,211,30,.45);
}
.btn-solid:hover{box-shadow:0 6px 32px -8px rgba(147,211,30,.65); transform:translateY(-1px)}
.btn-ghost{
  color:var(--ink); border:1px solid var(--line); background:rgba(20,26,22,.5);
}
.btn-ghost:hover{border-color:var(--seiva); background:var(--chip)}
.btn-lg{padding:15px 30px; font-size:16px}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(12,16,14,.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; gap:26px; padding:14px 24px}
.nav-logo img{height:26px; display:block}
.nav-links{display:flex; gap:22px; margin-left:auto}
.nav-links a{
  color:var(--sub); text-decoration:none; font-size:14px; font-weight:500;
  transition:color .15s;
}
.nav-links a:hover{color:var(--ink)}
.nav-ctas{display:flex; gap:10px}
.nav-cta{padding:9px 18px; font-size:13.5px}

/* ---------- hero ---------- */
.hero{position:relative; padding:58px 0 52px; overflow:hidden}
.hero .wrap{max-width:1280px}
.hero-glow{
  position:absolute; width:900px; height:600px; left:50%; top:-260px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(14,148,105,.22), transparent 65%);
  pointer-events:none;
}
.hero-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.75;
  background-image:linear-gradient(rgba(81,180,65,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(81,180,65,.06) 1px,transparent 1px),
                   radial-gradient(rgba(147,211,30,.10) 1px, transparent 1.4px);
  background-size:42px 42px, 42px 42px, 42px 42px;
  background-position:0 0, 0 0, 21px 21px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 24%, #000, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 24%, #000, transparent 85%);
}
.hero-in{
  position:relative; display:grid; grid-template-columns:1fr 1.12fr;
  gap:48px; align-items:center;
}
.hero-txt{display:grid; gap:24px; justify-items:start}
.hero-txt h1{font-size:clamp(36px,4.4vw,62px)}
.hero-txt .lead{font-size:clamp(16px,1.35vw,20px); max-width:52ch}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap}
.hero-nota{font-family:var(--mono); font-size:12.5px; color:var(--sub); letter-spacing:.04em}

/* ---------- painel vivo (Informativo Logística) ---------- */
.painel{
  background:linear-gradient(180deg, #131A16, #10150F 140%);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 2px 6px rgba(0,0,0,.4), 0 30px 70px -30px rgba(0,0,0,.85),
             0 0 90px -40px rgba(14,148,105,.5);
  padding:18px 20px; display:grid; gap:15px;
}
.painel-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.live-dot{
  width:8px; height:8px; border-radius:50%; background:var(--seiva); flex:none;
  box-shadow:0 0 8px var(--seiva); animation:pulsa 2s ease-in-out infinite;
}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}
.painel-nome{font-family:var(--sora); font-weight:700; font-size:13px}
.painel-dia{
  font-family:var(--mono); font-size:10.5px; color:var(--sub);
  border:1px solid var(--line); border-radius:5px; padding:3px 8px;
}
.painel-tag{
  margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sub); border:1px solid var(--line);
  padding:3px 8px; border-radius:4px;
}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:9px}
.kpi{
  background:var(--chip); border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; display:grid; gap:1px;
}
.kpi .k{font-family:var(--mono); font-size:8.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--sub)}
.kpi .k .ku, .kpi .v .ku{font-style:normal; font-size:9px; color:var(--sub); text-transform:none; letter-spacing:0}
.kpi .v{font-family:var(--sora); font-size:19.5px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.kpi .v b{font-weight:800}
.kpi .d{font-family:var(--mono); font-size:9.5px}
.d.up{color:var(--seiva)}
.d.down{color:var(--alerta)}

.painel-corpo{display:grid; grid-template-columns:1.5fr 1fr; gap:12px}
.pc-main{
  background:var(--chip); border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; display:grid; gap:8px; align-content:start;
}
.painel-gt{display:flex; align-items:baseline; justify-content:space-between}
.gk{font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--sub)}
.gk b{color:var(--limavivo); font-weight:600}
.gu{text-transform:none; letter-spacing:0}

/* barras por hora, com linha de meta */
.horas{
  display:flex; align-items:flex-end; gap:3px; height:124px; position:relative;
}
.horas::before{ /* linha de meta */
  content:""; position:absolute; left:0; right:0; top:26%;
  border-top:1px dashed rgba(165,220,40,.5);
}
.horas i{
  flex:1; display:block; border-radius:2px 2px 0 0; min-height:6%;
  background:linear-gradient(180deg, var(--seiva), var(--esmeralda));
  height:var(--h,50%);
  transition:height .9s cubic-bezier(.16,1,.3,1);
}
.horas i.atual{
  background:linear-gradient(180deg, var(--limavivo), var(--seiva));
  animation:pulsa 2s ease-in-out infinite;
}
.horas-eixo{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:8.5px; color:var(--sub);
}

.pc-lado{display:grid; gap:12px; align-content:stretch; grid-template-rows:auto 1fr}
.proj{
  background:var(--chip); border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; display:grid; gap:7px;
}
.proj-num{display:flex; align-items:baseline; gap:8px}
.proj-num b{
  font-family:var(--sora); font-size:26px; font-weight:800; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.proj-meta{font-family:var(--mono); font-size:9.5px; color:var(--limavivo)}
.proj-barra{height:7px; background:var(--line); border-radius:4px; overflow:hidden}
.proj-barra i{
  display:block; height:100%; width:var(--p,0%); border-radius:4px;
  background:var(--grad); transition:width 1.2s cubic-bezier(.16,1,.3,1);
}
.atrf{
  background:var(--chip); border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; display:grid; gap:8px; align-content:start;
}
.atrf-linhas{display:grid; gap:7px}
.al{display:grid; grid-template-columns:22px 1fr 40px; gap:8px; align-items:center}
.al span{font-family:var(--mono); font-size:9.5px; color:var(--sub)}
.al b{font-family:var(--mono); font-size:10.5px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums}
.al-t{height:7px; background:var(--line); border-radius:4px; overflow:hidden}
.al-t i{
  display:block; height:100%; width:var(--w,50%); border-radius:4px;
  background:linear-gradient(90deg, var(--esmeralda), var(--seiva));
  transition:width 1s cubic-bezier(.16,1,.3,1);
}
.painel-rodape{
  display:flex; justify-content:space-between; border-top:1px solid var(--line);
  padding-top:9px; font-family:var(--mono); font-size:9.5px; color:var(--sub);
}
.painel-rodape b{color:var(--ink); font-weight:600}

/* ---------- seções ---------- */
.sec{padding:88px 0; position:relative}
.sec-alt{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-head{display:grid; gap:12px; margin-bottom:44px; max-width:72ch}

/* ---------- texturas de fundo, uma por seção ---------- */
.sec::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
}
/* o caminho: matriz de pontos, mais forte no topo */
.caminho::before{
  background-image:radial-gradient(rgba(147,211,30,.085) 1.2px, transparent 1.7px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 85% 70% at 50% 12%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 12%, #000 30%, transparent 78%);
}
/* resultados: hachura diagonal entrando pela direita */
#resultados::before{
  background-image:repeating-linear-gradient(52deg,
    rgba(81,180,65,.06) 0 1px, transparent 1px 22px);
  mask-image:linear-gradient(105deg, transparent 42%, #000 88%);
  -webkit-mask-image:linear-gradient(105deg, transparent 42%, #000 88%);
}
/* demo: grade fina de quadrados, como a da hero */
#demo::before{
  background-image:linear-gradient(rgba(81,180,65,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(81,180,65,.055) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(ellipse 75% 90% at 50% 50%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 75% 90% at 50% 50%, #000 20%, transparent 75%);
}
/* calculadora: pontos em dois tamanhos, escorrendo pela esquerda */
#calculadora::before{
  background-image:radial-gradient(rgba(147,211,30,.09) 1.4px, transparent 1.9px),
                   radial-gradient(rgba(81,180,65,.055) 1px, transparent 1.4px);
  background-size:44px 44px, 22px 22px;
  background-position:0 0, 11px 11px;
  mask-image:linear-gradient(75deg, #000 12%, transparent 55%);
  -webkit-mask-image:linear-gradient(75deg, #000 12%, transparent 55%);
}
/* segurança: grade densa atrás do escudo */
#seguranca::before{
  background-image:linear-gradient(rgba(81,180,65,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(81,180,65,.05) 1px,transparent 1px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 46% 75% at 22% 55%, #000 25%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 46% 75% at 22% 55%, #000 25%, transparent 80%);
}
/* cta final: pontos subindo do rodapé */
.cta-final::before{
  background-image:radial-gradient(rgba(147,211,30,.08) 1.2px, transparent 1.7px);
  background-size:30px 30px;
  mask-image:linear-gradient(0deg, #000 8%, transparent 72%);
  -webkit-mask-image:linear-gradient(0deg, #000 8%, transparent 72%);
}

/* ============ o caminho: problema → solução ============ */
.caminho{padding-top:56px; padding-bottom:96px}
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; display:grid; gap:10px; align-content:start;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 44px -22px rgba(0,0,0,.7)}
.card p{font-size:14.5px; color:var(--sub); line-height:1.6}
.card.prob:hover{border-color:rgba(232,115,110,.45)}

.p-tag{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--alerta); font-weight:600;
}
.p-tag.ok{color:var(--lima)}

/* ícones animados */
.ico{
  width:58px; height:58px; border-radius:12px; display:grid; place-items:center;
  background:var(--chip); border:1px solid var(--line); margin-bottom:6px;
  color:var(--alerta); transition:background .25s, color .25s, border-color .25s;
}
.ico svg{width:34px; height:34px; overflow:visible}
.card.prob:hover .ico{background:rgba(232,115,110,.09); border-color:rgba(232,115,110,.35)}
.passo .ico{color:var(--seiva)}
.passo:hover .ico{background:rgba(81,180,65,.09); border-color:rgba(81,180,65,.4); color:var(--limavivo)}

/* relógio: ponteiros girando */
.pont-min{transform-origin:24px 24px; animation:gira-pont 6s linear infinite}
.pont-hora{transform-origin:24px 24px; animation:gira-pont 72s linear infinite}
@keyframes gira-pont{to{transform:rotate(360deg)}}

/* cadeado: alça balançando */
.alca{transform-origin:24px 21px; animation:tranca 3.4s ease-in-out infinite}
@keyframes tranca{0%,72%,100%{transform:none}78%{transform:translateY(-2.4px)}86%{transform:translateY(0)}}

/* planilha: células piscando desencontradas */
.cel{animation:pisca-cel 3.2s ease-in-out infinite}
.c-b{animation-delay:1.1s}
.c-c{animation-delay:2.1s}
@keyframes pisca-cel{0%,100%{opacity:.4}50%{opacity:.06}}

/* banco: pulso de dados */
.pulso-db{animation:sobe-db 2.6s ease-in-out infinite; opacity:0}
.pulso-db.p2{animation-delay:1.3s}
@keyframes sobe-db{0%{transform:translateY(8px); opacity:0}30%{opacity:1}70%{transform:translateY(-8px); opacity:1}100%{transform:translateY(-12px); opacity:0}}

/* check: traço que se desenha */
.check-c{stroke-dasharray:44; stroke-dashoffset:44; animation:desenha-check 3.6s ease-in-out infinite}
@keyframes desenha-check{0%{stroke-dashoffset:44}35%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-44}}

/* telas: barrinhas crescendo */
.mini-barras rect{transform-origin:bottom; animation:cresce-barra 2.8s ease-in-out infinite}
.mini-barras rect:nth-child(2){animation-delay:.3s}
.mini-barras rect:nth-child(3){animation-delay:.6s}
@keyframes cresce-barra{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

/* conector problema → solução */
.fluxo{
  display:grid; justify-items:center; gap:2px; margin:26px 0 30px;
}
.fluxo-svg{width:60px; height:130px}
.fluxo-linha{animation:corre-tracos 1.6s linear infinite}
@keyframes corre-tracos{to{stroke-dashoffset:-13}}
.fluxo-pulso{animation:desce-pulso 2.6s ease-in-out infinite}
@keyframes desce-pulso{0%{cy:4; opacity:0}12%{opacity:1}82%{opacity:1}100%{cy:110; opacity:0}}
.fluxo-rotulo{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lima);
}

/* passos (soluções) */
.passos{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.passo{
  background:linear-gradient(180deg, var(--card), rgba(14,148,105,.05));
  border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; display:grid; gap:10px; align-content:start; position:relative;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.passo:hover{transform:translateY(-4px); border-color:rgba(81,180,65,.45); box-shadow:0 18px 44px -22px rgba(0,0,0,.7)}
.passo p{font-size:14.5px; color:var(--sub); line-height:1.6}
.passo p b{color:var(--ink); font-weight:600}

/* ---------- resultados ---------- */
.nums{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.num{background:var(--card); padding:26px 24px; display:grid; gap:6px}
.num b{
  font-family:var(--sora); font-size:clamp(30px,3.4vw,42px); font-weight:800;
  letter-spacing:-.03em; background:var(--grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  font-variant-numeric:tabular-nums; line-height:1;
}
.num span{font-size:13.5px; color:var(--sub); line-height:1.5}
.nums-nota{margin-top:18px; font-size:14px; color:var(--sub); font-style:italic}

/* ---------- demo ---------- */
.demo-in{
  display:grid; grid-template-columns:1.5fr auto; gap:40px; align-items:center;
  background:linear-gradient(120deg, rgba(14,148,105,.12), rgba(147,211,30,.06));
  border:1px solid rgba(81,180,65,.25); border-radius:14px; padding:44px 48px;
}
.demo-in h2{margin:10px 0 12px}

/* ---------- calculadora ---------- */
.calc{
  display:grid; grid-template-columns:1.1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.calc-form{background:var(--card); padding:30px; display:grid; gap:22px; align-content:start}
.cf-item{display:grid; gap:10px}
.cf-q{font-size:14px; color:var(--ink); font-weight:500; line-height:1.45}
.cf-caixa{
  background:var(--chip); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px 18px; display:grid; gap:12px;
  transition:border-color .2s;
}
.cf-caixa:focus-within{border-color:var(--seiva)}
.cf-valor{display:flex; align-items:baseline; gap:8px}
.cf-valor b{
  font-family:var(--sora); font-size:26px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cf-un{font-family:var(--mono); font-size:11px; color:var(--sub)}

/* o slider em si: trilho com preenchimento verde */
.cf-range{
  -webkit-appearance:none; appearance:none; width:100%; height:22px;
  background:transparent; cursor:grab; touch-action:pan-y;
}
.cf-range:active{cursor:grabbing}
.cf-range::-webkit-slider-runnable-track{
  height:8px; border-radius:5px;
  background:linear-gradient(90deg, #0E9469 0%, #93D31E var(--fill,50%), var(--line) var(--fill,50%));
}
.cf-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%; margin-top:-7px;
  background:radial-gradient(circle at 35% 35%, #C6E96A, var(--limavivo) 60%);
  border:2px solid #06120C;
  box-shadow:0 0 0 4px rgba(165,220,40,.25), 0 2px 10px rgba(0,0,0,.5);
  transition:box-shadow .15s;
}
.cf-range::-webkit-slider-thumb:hover{box-shadow:0 0 0 7px rgba(165,220,40,.3), 0 2px 10px rgba(0,0,0,.5)}
.cf-range::-moz-range-track{height:8px; border-radius:5px; background:var(--line)}
.cf-range::-moz-range-progress{height:8px; border-radius:5px; background:linear-gradient(90deg,#0E9469,#93D31E)}
.cf-range::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #C6E96A, var(--limavivo) 60%);
  border:2px solid #06120C;
  box-shadow:0 0 0 4px rgba(165,220,40,.25), 0 2px 10px rgba(0,0,0,.5);
}
.cf-range:focus-visible{outline:2px solid var(--limavivo); outline-offset:4px; border-radius:6px}

.calc-res{background:var(--bg2); padding:30px; display:grid; gap:18px; align-content:center}
.cr-item{display:grid; gap:4px}
.cr-item span{font-size:13px; color:var(--sub)}
.cr-item b{
  font-family:var(--sora); font-size:26px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cr-forte b{
  font-size:clamp(30px,3vw,40px); background:var(--grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.cr-nota{font-size:13px; color:var(--sub); font-style:italic}
.calc-res .btn{justify-self:start}

/* ---------- segurança ---------- */
#seguranca{padding-top:72px; padding-bottom:72px}
#seguranca .sec-head{margin-bottom:32px}
.seg{display:grid; grid-template-columns:.9fr 1.35fr; gap:36px; align-items:center}

.seg-escudo{display:grid; justify-items:center; gap:18px}
.escudo-svg{width:min(260px,60vw); height:auto}
.anel{opacity:.35; transform-origin:110px 110px}
.anel.a1{animation:anel-pulso 4s ease-in-out infinite}
.anel.a2{animation:anel-pulso 4s ease-in-out 1.2s infinite}
@keyframes anel-pulso{0%,100%{opacity:.16; transform:scale(.98)}50%{opacity:.5; transform:scale(1.02)}}
.orbita{transform-origin:110px 110px; animation:gira 26s linear infinite; opacity:.6}
.escudo-corpo{filter:drop-shadow(0 0 22px rgba(81,180,65,.35))}
.escudo-check{
  stroke-dasharray:70; stroke-dashoffset:70;
  animation:trava-check 5s ease-in-out infinite;
}
@keyframes trava-check{0%{stroke-dashoffset:70}22%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.seg-camadas{display:grid; gap:7px; justify-items:center}
.cam{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--sub);
  border:1px solid var(--line); border-radius:20px; padding:5px 14px;
  background:rgba(20,26,22,.6);
}
.cam.ok-pisca{color:var(--seiva); border-color:rgba(81,180,65,.4); animation:pisca-suave 3s ease-in-out infinite}

.seg-lista{display:grid; gap:11px}
.seg-item{
  display:grid; grid-template-columns:48px 1fr 30px; gap:15px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 20px; position:relative; overflow:hidden;
  transition:transform .25s ease, border-color .25s ease;
}
.seg-item::before{ /* varredura de luz */
  content:""; position:absolute; top:0; bottom:0; width:60px; left:-80px;
  background:linear-gradient(100deg, transparent, rgba(147,211,30,.07), transparent);
  transition:left .7s ease;
}
.seg-item:hover{transform:translateX(6px); border-color:rgba(81,180,65,.45)}
.seg-item:hover::before{left:110%}
.seg-ico{
  width:48px; height:48px; border-radius:11px; display:grid; place-items:center;
  background:var(--chip); border:1px solid var(--line); color:var(--seiva);
  transition:color .25s, border-color .25s;
}
.seg-ico svg{width:28px; height:28px}
.seg-item:hover .seg-ico{color:var(--limavivo); border-color:rgba(81,180,65,.4)}
.seg-item h3{margin-bottom:4px}
.seg-item p{font-size:14px; color:var(--sub); line-height:1.55}
.seg-check{
  font-family:var(--sora); font-weight:800; color:var(--seiva); font-size:18px;
  opacity:.85;
}

/* ---------- CTA final ---------- */
.cta-final{
  background:radial-gradient(ellipse 60% 80% at 50% 110%, rgba(14,148,105,.18), transparent);
  border-top:1px solid var(--line);
}
.cta-in{display:grid; gap:18px; justify-items:center; text-align:center; max-width:760px}
.cta-in .sub{margin:0 auto}
.cta-in .hero-ctas{justify-content:center; margin-top:8px}

/* ---------- footer ---------- */
.rodape{border-top:1px solid var(--line); background:var(--bg2); padding:44px 0; position:relative; z-index:1}
.rodape::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(52deg,
    rgba(81,180,65,.045) 0 1px, transparent 1px 26px);
  mask-image:linear-gradient(255deg, #000 15%, transparent 60%);
  -webkit-mask-image:linear-gradient(255deg, #000 15%, transparent 60%);
}
.rodape-in{display:grid; gap:10px; justify-items:start}
.rodape-logo{height:24px}
.rodape p{font-size:14px; color:var(--sub)}
.rodape-fim{font-family:var(--mono); font-size:11.5px; color:var(--sub); margin-top:8px}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(16px)}
.rv.on{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.d1.on{transition-delay:.08s}
.d2.on{transition-delay:.16s}
.d3.on{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none}
  .live-dot,.horas i.atual,.pont-min,.pont-hora,.alca,.cel,.pulso-db,.check-c,
  .mini-barras rect,.fluxo-linha,.fluxo-pulso,.anel,.orbita,.escudo-check,
  .fg,.cam.ok-pisca{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- responsivo ---------- */
@media (max-width:1020px){
  .hero-in{grid-template-columns:1fr; gap:44px}
  .cards3,.passos{grid-template-columns:1fr 1fr}
  .nums{grid-template-columns:1fr 1fr}
  .demo-in{grid-template-columns:1fr; padding:36px 30px}
  .seg{grid-template-columns:1fr; gap:28px}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav-ctas .btn-ghost{display:none}
  .sec{padding:64px 0}
  .cards3,.passos,.nums{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .painel-corpo{grid-template-columns:1fr}
  .hero{padding:52px 0 64px}
  .seg-item{grid-template-columns:44px 1fr; }
  .seg-check{display:none}
  .fg-circ.c1{right:-260px}
}