/*
 * Identidade XForce para o site público. Carregado DEPOIS do site.css: troca as cores, os cantos e os
 * blocos do topo. Fundo escuro, laranja→rosa da marca, cantos quase retos (6px), como no painel.
 */
:root{
  --ground:#07080b; --surface:#0e1016; --surface-2:#12151d; --inset:#181c26;
  --text:#eef0f5; --dim:#a0a7b6; --mute:#737b8b;
  --line:#1e2330; --line-2:#2c3344;
  --xf-a:#ff7a18; --xf-b:#ff3d57; --xf-grad:linear-gradient(90deg,#ff7a18,#ff3d57);
  --lime:#ff6a2b; --lime-deep:#ff8a4d; --ink:#0b0c10;
  --red:#ff5d6c; --green:#2fd27a;
  --shadow-s:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.28);
  --shadow-m:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px rgba(0,0,0,.45);
  --r:6px; --r-lg:6px;
  color-scheme:dark;
}
html{background:var(--ground)}
body{background:var(--ground)}
::selection{background:rgba(255,106,43,.35); color:#fff}

/* cantos: tudo no mesmo raio pequeno (os aparelhos de demonstração continuam arredondados) */
.btn,.btn-lg,.ico,.flow,.flow .n,.step::before,.via-ic,input,textarea,.contact a,.foot-social a,
details.q,.promo,.promo-card,.tag-free,.est-card,.est-eye,.hb-cta,.badge,.plantao,.via .tag,.promo-x,.hb-arrow{border-radius:6px}
.est-timer,.hb-dots button{border-radius:3px}

/* marca e topo */
.brand{align-items:center; font-weight:800; color:var(--text)}
.brand b,.brand .loc{color:var(--xf-a); font-weight:800}
header{background:rgba(7,8,11,.72); border-bottom:1px solid var(--line); backdrop-filter:saturate(160%) blur(18px); -webkit-backdrop-filter:saturate(160%) blur(18px)}
.nav nav a{position:relative}
.nav nav a::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--xf-grad); transform:scaleX(0); transform-origin:left; transition:transform .2s ease}
.nav nav a:hover::after{transform:scaleX(1)}

/* botões: um tamanho, um estilo */
.btn{height:44px; padding:0 20px; font-weight:650; letter-spacing:-.005em}
.btn-lg{height:52px; padding:0 28px}
.btn-lime{background:var(--xf-grad); color:#fff; box-shadow:0 8px 26px rgba(255,90,44,.28)}
.btn-lime:hover{background:var(--xf-grad); filter:brightness(1.1); transform:translateY(-1px)}
.btn-dark{background:#fff; color:#0b0c10}
.btn-dark:hover{background:#e9ebf1}
.btn-ghost{background:rgba(255,255,255,.04); border-color:var(--line-2); color:var(--text)}
.btn-ghost:hover{border-color:var(--xf-a); background:rgba(255,106,43,.08)}

.eyebrow{color:var(--xf-a); letter-spacing:.14em; font-weight:700}
h1,h2{font-weight:800; letter-spacing:-.035em}
.hero h1 span,.grad{background:var(--xf-grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ── Topo com água ── */
.hero{position:relative; isolation:isolate; overflow:hidden; padding:0; min-height:calc(100svh - 62px); display:flex; align-items:center;
  background:linear-gradient(180deg,#7a2a14 0%,#3a0f10 55%,#12080a 100%)}
#xf-agua{position:absolute; inset:0; width:100%; height:100%; z-index:-2; display:block; opacity:0; transition:opacity 1s ease}
#xf-agua.xf-agua-ok{opacity:1}
.hero::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(7,8,11,.86) 0%, rgba(7,8,11,.58) 38%, rgba(7,8,11,0) 66%), linear-gradient(180deg, rgba(7,8,11,0) 70%, var(--ground) 100%)}
.hero .hero-grid{position:relative; width:100%; grid-template-columns:minmax(0,640px) 1fr; padding-top:56px; padding-bottom:88px}
.hero h1{font-size:clamp(40px,6vw,76px); line-height:1.02}
.hero .lead{color:#c3c8d3}
.hero .micro{color:#8b93a3}
.plantao{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.plantao .pulse{background:var(--xf-a)} .plantao .pulse::after{border-color:var(--xf-a)}
.hero-dica{position:absolute; left:0; right:0; bottom:22px; text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#6f7787; pointer-events:none}
@media (max-width:900px){
  .hero{align-items:flex-end}
  .hero::before{background:linear-gradient(180deg, rgba(7,8,11,0) 20%, rgba(7,8,11,.78) 52%, var(--ground) 100%)}
  .hero .hero-grid{grid-template-columns:1fr; padding-top:46svh; padding-bottom:64px}
  .hero-dica{display:none}
}

/* faixa de números */
.strip{background:var(--surface); margin-top:0}
.stat b{background:var(--xf-grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ── Banners ── */
.hb{background:#0a0b10; border-bottom:1px solid var(--line)}
.hb::before{background:radial-gradient(circle, rgba(255,106,43,.22) 0%, rgba(255,61,87,.07) 42%, transparent 68%)}
.hb::after{content:''; position:absolute; z-index:0; left:-200px; bottom:-380px; width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,61,87,.12), transparent 66%)}
.hb-eyebrow{color:var(--xf-a)}
.hb-txt h2 b{background:var(--xf-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hb-cta{background:var(--xf-grad); color:#fff; height:46px; padding:0 22px; box-shadow:0 8px 26px rgba(255,90,44,.28)}
.hb-cta:hover{background:var(--xf-grad); filter:brightness(1.1)}
.hb-img::before{background:radial-gradient(ellipse, rgba(255,106,43,.30), transparent 70%)}
.hb-dots button[aria-current='true']{background:var(--xf-grad)}
.hb-arrow{background:rgba(255,255,255,.05)}

/* cartões e seções */
.card,.step,.via,details.q,.security-box,.pricing,.est-card{background:var(--surface); border-color:var(--line); box-shadow:var(--shadow-s)}
.card{position:relative; transition:border-color .2s ease, transform .2s ease}
.card:hover{border-color:rgba(255,106,43,.5); transform:translateY(-2px)}
.card::before{content:''; position:absolute; left:0; top:0; height:2px; width:44px; background:var(--xf-grad)}
.ico{background:rgba(255,106,43,.1); color:var(--xf-a)}
.app-sec{background:var(--surface-2)}
.app-sec .card,.app-sec .est-card{background:var(--surface)}
.pay{background:linear-gradient(135deg,#12090a 0%,#0b0c12 55%), var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.pay::before{content:''; position:absolute; right:-220px; top:-260px; width:680px; height:680px; border-radius:50%; background:radial-gradient(circle, rgba(255,106,43,.18), transparent 66%)}
.pay .wrap{position:relative}
.pay .eyebrow{color:var(--xf-a)}
.flow{background:var(--line); border-color:var(--line)}
.flow div{background:#11141b} .flow .last{background:#171b24}
.flow .n,.step::before{background:var(--xf-grad); color:#fff}
.via-ic{background:rgba(255,106,43,.12); color:var(--xf-a)}
.via .tag{background:rgba(255,106,43,.14); color:var(--lime-deep)}
.signup{background:var(--surface-2)}
input,textarea{background:#0b0d12; border-color:var(--line-2); color:var(--text)}
input::placeholder,textarea::placeholder{color:#5d6575}
input:focus,textarea:focus{background:#0b0d12; border-color:var(--xf-a); box-shadow:0 0 0 3px rgba(255,106,43,.2)}
.contact a{background:var(--surface)} .contact a:hover{background:var(--inset); border-color:var(--xf-a)}
footer{background:#05060a}
.foot-social a:hover{color:#fff; border-color:var(--xf-a)}

/* preços */
.pricing-head{background:var(--surface-2)}
.badge,.tag-free{background:var(--xf-grad); color:#fff}
.promo{background:rgba(255,106,43,.1); border-color:rgba(255,106,43,.35)}
.price-row.free{background:linear-gradient(90deg, rgba(255,106,43,.16), rgba(255,106,43,0))}
.promo-card{background:linear-gradient(180deg,#14171f,#0b0d12)}
details.q summary .plus::before, details.q summary .plus::after{background:var(--xf-a)}

/* demonstração do estoque e tela de bloqueio */
.est-eye{background:var(--xf-grad); color:#fff}
.est-eye[aria-pressed='true']{background:#fff; color:#0b0c10}
.est-eye:focus-visible{outline-color:rgba(255,106,43,.5)}
.ls-store,.est-timer b{color:var(--lime-deep)} .est-dot,.ls-brand i{background:var(--xf-a)}
.va-cta{background:var(--xf-grad); color:#fff}

/* telas do app do cliente, desenhadas em HTML (sem captura de tela) */
.tela-app{width:100%; height:100%; border-radius:37px; overflow:hidden; background:radial-gradient(120% 60% at 80% -10%, rgba(255,106,43,.28), transparent 60%), #0b0d12; color:#fff; padding:13% 8% 8%; display:flex; flex-direction:column; gap:7%; font-size:clamp(6px,1.55vw,9.5px); line-height:1.3; text-align:left}
.tela-app .ta-marca{display:flex; align-items:center; gap:.5em; font-weight:800; font-size:1.5em; letter-spacing:-.03em}
.tela-app .ta-marca svg{width:1.25em; height:1.25em}
.tela-app .ta-marca i{font-style:normal; color:var(--xf-a)}
.tela-app .ta-ola{color:#9aa2b1} .tela-app .ta-ola b{display:block; color:#fff; font-size:1.7em; letter-spacing:-.02em}
.tela-app .ta-cx{border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); border-radius:6px; padding:8% 8%; display:grid; grid-template-columns:1fr 1fr; gap:1em .8em}
.tela-app .ta-cx small{display:block; color:#8b93a3; font-size:.78em; letter-spacing:.08em; text-transform:uppercase}
.tela-app .ta-cx b{font-size:1.2em} .ta-am{color:#ffb020} .ta-vm{color:#ff5d6c} .ta-vd{color:#2fd27a}
.tela-app .ta-li{display:flex; align-items:center; gap:.7em; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); border-radius:6px; padding:6% 7%}
.tela-app .ta-li::before{content:''; width:.6em; height:.6em; border-radius:50%; background:var(--c,#ffb020); flex:none}
.tela-app .ta-li span{flex:1} .tela-app .ta-li small{display:block; color:#8b93a3}
.tela-app .ta-qr{align-self:center; width:62%; aspect-ratio:1; border-radius:6px; background:#fff; padding:7%; display:grid; grid-template-columns:repeat(7,1fr); gap:6%}
.tela-app .ta-qr i{background:#0b0d12; border-radius:1px} .tela-app .ta-qr i.v{background:transparent}
.tela-app .ta-bt{margin-top:auto; background:var(--xf-grad); border-radius:6px; text-align:center; font-weight:700; padding:6% 0; font-size:1.15em}
.tela-app .ta-valor{text-align:center} .tela-app .ta-valor b{display:block; font-size:2.4em; letter-spacing:-.03em} .tela-app .ta-valor small{color:#8b93a3}

/* entrada suave das seções ao rolar */
.xf-surge{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.xf-surge.xf-visto{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .xf-surge{opacity:1; transform:none} }

/* menu do topo enxuto em qualquer largura: o resto dos atalhos fica no rodapé */
.nav nav a[href="#supervisao"], .nav nav a[href="#seguranca"], .nav nav a[href="#recursos"], .nav nav a[href="#faq"], .nav nav a[href="/modulos"]{display:none}
.nav > .btn{flex:none}