/* =========================
   ProSaffeTec – Style v7 (tech leve, SEM dark mode)
   ========================= */

/* -------- Paleta / Tokens -------- */
:root{
  /* Cores base (claro) */
  --bg:#ffffff;
  --ink:#0E1A2B;             /* texto principal */
  --muted:#F8F9FA;           /* blocos claros */
  --mid:#6C757D;             /* texto secundário */
  --line:#DDE4EC;

  /* Identidade tech */
  --navy:#001F3F;            /* navy profundo (acentos fortes) */
  --electric:#007BFF;        /* azul elétrico */
  --neon:#00FF85;            /* verde neon p/ feedbacks/acento */
  --violet:#6A00F4;          /* roxo sutil p/ IA/pentest */
  --danger:#FF4D4D;          /* erros/alertas */

  /* Gradientes */
  --grad-cta: linear-gradient(135deg, var(--electric) 0%, #57A0FF 100%);
  --grad-hero: radial-gradient(1200px 600px at 15% -10%, rgba(0,123,255,.18), transparent 55%),
               linear-gradient(180deg, #F4F7FF 0%, #FFFFFF 60%);
  --grad-card: linear-gradient(180deg, #ffffff 0%, #FBFDFF 100%);

  /* UI */
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 6px 24px rgba(0,0,0,.06);
  --shadow-md:0 12px 28px rgba(3,19,39,.10);
  --shadow-xl:0 18px 48px rgba(3,19,39,.16);

  /* Espaços */
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px;
  --sp-5:32px; --sp-6:48px; --sp-7:72px; --sp-8:96px;

  /* Tipografia */
  --fs-hero: clamp(34px, 5vw, 48px);
  --fs-h2: clamp(22px, 2.6vw, 32px);
  --fs-h3: clamp(18px, 2vw, 22px);
  --fs-lead: clamp(16px, 1.6vw, 18px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;

  /* grid sutil no fundo para “tech” leve */
  background-image:
    linear-gradient(0deg, rgba(14,26,43,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,26,43,.035) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px;
  background-position: center top;
}

/* ===== Layout ===== */
.container{ width:min(1280px, 94vw); margin-inline:auto }
.container--xl{ width:min(1400px, 96vw) }
.section{ padding: var(--sp-7) 0 }
.section--muted{ background:var(--muted) }
.center{text-align:center}
.nowrap{white-space:nowrap}
.row{display:flex; gap:var(--sp-3)}
.between{justify-content:space-between}
.center{align-items:center}

/* ===== Header / Navbar ===== */
.site-header{
  position:sticky; top:0; z-index:80;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{ padding:12px 0 }
.brand{
  font-family: "Orbitron", Inter, system-ui, sans-serif;
  font-weight:800; color:var(--navy); text-decoration:none; letter-spacing:.2px
}
.nav a{margin-left:var(--sp-4); text-decoration:none; color:var(--ink); opacity:.9}
.nav a:hover{opacity:1}
.header-rule{
  height:2px;
  background: linear-gradient(90deg, var(--electric), transparent);
  opacity:.5;
}

/* Hamburger */
.nav-toggle{ display:none; background:transparent; border:0; color:var(--navy); font-size:22px; }
@media (max-width: 900px){
  .nav{ display:none; }
  .nav.is-open{ display:block; position:absolute; right:3vw; top:60px;
    background:#ffffff; border:1px solid var(--line);
    border-radius:12px; padding:10px 12px; box-shadow: var(--shadow-xl);
  }
  .nav a{ display:block; padding:10px 6px; margin:0; }
  .nav .btn{ width:100%; margin-top:6px }
  .nav-toggle{ display:block; }
}

/* ===== Hero ===== */
.hero{
  position: relative; overflow:clip;
  color:var(--ink); background: var(--grad-hero);
}
.hero .container{ position:relative; z-index:2 }
.hero h1{
  font-family:"Orbitron", Inter, system-ui, sans-serif;
  font-size:var(--fs-hero); line-height:1.1; margin:0 0 var(--sp-3);
  color:var(--navy); letter-spacing:.3px
}
.lead{font-size:var(--fs-lead); color:#31425A}

.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:
    radial-gradient(600px 300px at 85% 25%, rgba(0,123,255,.18), transparent 55%),
    url("data:image/svg+xml,%3Csvg width='800' height='600' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.06' stroke='%23001F3F'%3E%3Cpath d='M0 40h800M0 120h800M0 200h800M0 280h800M0 360h800M0 440h800M0 520h800'/%3E%3Cpath d='M40 0v600M120 0v600M200 0v600M280 0v600M360 0v600M440 0v600M520 0v600M600 0v600M680 0v600M760 0v600'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 800px 600px;
  mix-blend-mode: multiply;
}
#particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }

.hero-visual{ position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; }
.glow{
  position:absolute; inset:-40px; z-index:-1; border-radius:50%;
  background: radial-gradient(closest-side, rgba(0,123,255,.22), transparent 70%);
  filter: blur(22px); opacity:.9;
}

/* scan line */
.scanline{
  position:absolute; left:0; right:0; top:0; height:2px; opacity:.35; z-index:2;
  background: linear-gradient(90deg, transparent, rgba(0,123,255,.65), transparent);
  animation: scan 4.5s linear infinite;
}
@keyframes scan{ 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

.url-form{display:flex; gap:var(--sp-3); margin-top:var(--sp-4); flex-wrap:wrap}
.url-form input{
  flex:1 1 280px; padding:14px 16px; border:1px solid var(--line);
  border-radius:12px; outline:none; background:#fff; color:var(--ink);
}
.url-form input:focus{border-color:var(--electric); box-shadow: 0 0 0 3px rgba(0,123,255,.18)}
.muted{ color:#5b6a7d; font-size:13px }

/* ===== Shots (imagens) ===== */
.shot{ position: relative; border-radius: 24px; overflow: clip; background: transparent; isolation:isolate;}
.shot__img{ width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display:block; border-radius: 24px;}
.shot::after{
  content:""; position:absolute; inset:-10px; z-index:-1; border-radius:28px;
  background: radial-gradient(50% 40% at 50% 10%, rgba(0,123,255,.12), transparent 60%);
  filter: blur(12px); opacity:.9;
}
.shot--edge{ box-shadow: 0 14px 28px rgba(3,19,39,.12); }
.shot--float{ margin:6px; transform: translateY(0); box-shadow: var(--shadow-xl);
  transition: transform .2s ease, box-shadow .2s ease; }
.shot--float:hover{ transform: translateY(-4px); box-shadow: 0 28px 60px rgba(3,19,39,.18); }
.shot--overlap{ margin-top: 8px; }
@media (min-width: 900px){ .shot--overlap{ transform: translateX(8px); } }

/* ===== Divisores / Regras ===== */
.divider{ padding: 6px 0; }
.rule{ border:0; height:1px; width:100%; background: linear-gradient(90deg, transparent, rgba(3,19,39,.25), transparent); opacity:.7;}
.rule--accent{ height:2px; background: linear-gradient(90deg, transparent, var(--electric), transparent); opacity:.9;}
.rule--dashed{ height:0; border-top:1px dashed rgba(3,19,39,.35); opacity:.7;}
.divider--labeled{ position: relative; }
.rule-label{
  display:inline-block; padding:4px 10px; margin-bottom:8px; font-weight:700; font-size:12px; color:#0f1830;
  border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

/* ===== Grid ===== */
.grid{display:grid; gap:var(--sp-6)}
.grid-2{grid-template-columns: 1fr}
.grid-4{grid-template-columns: 1fr}
@media (min-width: 900px){
  .grid-2{grid-template-columns: 1.05fr .95fr}
  .grid-4{grid-template-columns: repeat(4, 1fr)}
}
.grid-2--image-big{grid-template-columns: 1fr}
@media (min-width: 900px){ .grid-2--image-big{ grid-template-columns: 1fr 1.25fr } }
@media (min-width: 1400px){ .grid-2--image-big{ grid-template-columns: 1fr 1.35fr } }

/* ===== Tipos ===== */
.stack > * + *{margin-top:var(--sp-3)}
h1,h2,h3{margin:0 0 var(--sp-3)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h2.accent{
  font-family:"Orbitron", Inter, system-ui, sans-serif;
  display:inline-block; position:relative; padding-bottom:8px; color:var(--navy);
}
h2.accent::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; border-radius:6px;
  background: linear-gradient(90deg, var(--electric), transparent); opacity:.35;
}

/* ===== Cards / Features ===== */
.cards{margin-top:var(--sp-5)}
.card{
  padding:var(--sp-4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--grad-card);
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 16px 38px rgba(3,19,39,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10), 0 26px 56px rgba(3,19,39,.14);
  border-color:#BBD4FF;
}
.card i{ color:var(--electric); font-size:19px; margin-right:8px }

/* acento lateral discreto */
.card--accentEdge{ position: relative; overflow: hidden; }
.card--accentEdge::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:5px; border-radius:6px;
  background: linear-gradient(180deg, var(--electric), transparent); opacity:.55;
}

/* KPIs */
.kpis .kpi{ text-align:center }
.kpis .kpi strong{ display:block; font-size:28px; line-height:1.2; color:var(--navy) }
.kpis .kpi span{ color:#5d6b81 }

/* ===== Chips ===== */
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
.chip{
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;
  border:1px solid #E6EEF9; background:#fff;
}
.chip--ok{ background:#E9FFF6; border-color:#C7FFE8; color:#137A52 }  /* usa neon de forma sutil */
.chip--warn{ background:#FFF6DB; border-color:#FFE6A9; color:#8f6c00 }

/* ===== Botões ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:12px; border:1px solid transparent;
  text-decoration:none; font-weight:800; cursor:pointer; letter-spacing:.2px;
}
.btn i{ font-size:18px }
.btn--primary{
  background: var(--grad-cta); color:#fff;
  box-shadow: 0 6px 18px rgba(0,123,255,.28);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  animation: ctaPulse 3s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{ filter: saturate(1); box-shadow: 0 6px 18px rgba(0,123,255,.28) }
  50%{ filter: saturate(1.1); box-shadow: 0 12px 26px rgba(0,123,255,.42) }
}
.btn--primary:hover{ transform: translateY(-2px) }
.btn--ghost{ background:#fff; border-color:var(--line); color:var(--ink) }
.btn--ghost:hover{ background:#F1F6FF; border-color:#BBD4FF }

/* ===== Trust ===== */
.trust-min__list {
  display:flex; gap:24px; flex-wrap:wrap; justify-content:center;
  margin:0; padding:0; list-style:none; color:#4b5a73;
}
.trust-min__list li { padding-left:26px; position:relative; }
.trust-min__list li::before {
  content:""; position:absolute; left:0; top:6px; width:10px; height:10px;
  border-radius:50%; background: var(--electric); opacity:.55;
}

/* ===== Pricing ===== */
.pricing-grid{
  display:grid; gap:20px; grid-template-columns: 1fr; margin-top:22px;
}
@media (min-width: 900px){ .pricing-grid{ grid-template-columns: repeat(3, 1fr); } }

.price-card{
  position:relative;
  border:1px solid #CFE0FF; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(0,31,63,.03), rgba(0,123,255,.05));
  padding:26px;
  box-shadow: 0 10px 30px rgba(3,19,39,.10);
}
.price-card.popular{
  border-color:#97C0FF;
  background: linear-gradient(180deg, rgba(0,123,255,.10), rgba(0,31,63,.05));
  transform: translateY(-4px);
}
.badge{
  position:absolute; right:18px; top:18px; font-size:12px; font-weight:800;
  color:#0b1b2a; background:#EAF3FF; border:1px solid #BBD4FF; padding:4px 10px; border-radius:999px;
}
.price{ font-size:28px; font-weight:900; color:var(--navy) }
.features{ margin:14px 0 0; padding:0; list-style:none }
.features li{ margin:8px 0; color:#2a3850 }
.features li i{ color:#3B82F6; margin-right:6px }

/* ===== Footer ===== */
.site-footer{
  background:#fff; color:var(--ink);
  padding:var(--sp-6) 0; border-top:1px solid var(--line);
}
.footer-grid{
  display:grid; gap:18px; grid-template-columns: 1fr;
}
@media (min-width: 900px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr 1.2fr; } }
.site-footer .brand{
  font-family:"Orbitron", Inter, system-ui, sans-serif;
  font-weight:800; margin-bottom:8px; color:var(--navy);
}
.link{color:var(--electric); text-decoration:none}
.link:hover{text-decoration:underline}
.site-footer small{ color:#51627a; }

/* Newsletter */
.news{ margin-top:12px; display:flex; gap:10px; }
.news input{
  flex:1; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--ink); outline:none;
}
.news input:focus{ border-color: var(--electric); box-shadow: 0 0 0 3px rgba(0,123,255,.16) }
.news button{ white-space:nowrap }

/* ===== Reveal on scroll ===== */
.reveal{ opacity:0; transform: translateY(14px); transition: all .5s ease }
.reveal.is-in{ opacity:1; transform: none }

/* ===== A11y ===== */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid rgba(0,123,255,.6); outline-offset:2px;
}

/* ===== Nav ativo ===== */
.nav a{ position: relative; padding-bottom: 6px; }
.nav a.active::after, .nav a:hover::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; border-radius:3px;
  background: linear-gradient(90deg, var(--electric), transparent); opacity:.9;
}

/* ===== Slices ===== */
.slice{ display:block; width:100%; height:28px; }
.slice polygon{ fill: var(--muted); opacity:.85; }
.slice--hero polygon{ fill:#ffffff; }

/* Prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  .reveal{ opacity:1; transform:none }
  .shot--float{ transform:none !important; }
}

/* --- Seções auxiliares --- */
.section-head .eyebrow{
  display:inline-block; font-weight:800; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:#0f1830; border:1px solid var(--line);
  background:#fff; padding:4px 10px; border-radius:999px; box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.section-head .sublead{ margin:10px auto 0; max-width:720px; color:#4b5a73 }
.rail-underline{ height:4px; width:min(520px, 60%); margin:18px auto 0; border-radius:4px;
  background: linear-gradient(90deg, var(--electric), transparent); opacity:.85; }