/* THEME SYSTEM ------------------------------------------------------------ */
:root{
  --bg:#0b1223; --card:#0a1020; --muted:#94a3b8; --text:#e2e8f0;
  --brand:#003153; --brand-2:#0A4C6A; --accent:#4F9CF9;
  --radius:18px; --shadow:0 10px 25px rgba(0,0,0,.25); --max:1120px
}
/* Light/Dark */
.theme-light{ --bg:#f8fafc; --card:#ffffff; --text:#0b1223; --muted:#475569; }
.theme-dark{  --bg:#0b1223; --card:#0a1020; --text:#e2e8f0; --muted:#94a3b8; }
/* Brand palettes */
.brand-prussian{ --brand:#003153; --brand-2:#0A4C6A; --accent:#4F9CF9; }
.brand-emerald{  --brand:#065f46; --brand-2:#047857; --accent:#34d399; }
.brand-purple{   --brand:#4c1d95; --brand-2:#6d28d9; --accent:#a78bfa; }

/* BASE ------------------------------------------------------------------- */
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; color:var(--text); background:var(--bg); line-height:1.6; overflow-x:hidden}
a{color:inherit; text-decoration:none}
.container{max-width:var(--max); margin-inline:auto; padding:0 20px}

/* BG Canvas FX */
#bgfx{position:fixed; inset:0; z-index:-1; background:radial-gradient(1200px 600px at 10% -10%, color-mix(in oklab, var(--accent) 35%, transparent), transparent 60%), radial-gradient(800px 400px at 100% 0%, color-mix(in oklab, var(--brand) 38%, transparent), transparent 60%)}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in oklab, var(--bg) 80%, transparent); border-bottom:1px solid color-mix(in oklab, var(--muted) 30%, transparent)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.4px}
.brand .logo{width:36px; height:36px; border-radius:10px; background:conic-gradient(from 0deg, var(--brand), var(--accent), var(--brand)); box-shadow:var(--shadow)}
.nav ul{display:flex; align-items:center; gap:24px; list-style:none; margin:0}
.nav a{opacity:.9}
.controls{display:flex; gap:8px; margin-right:12px}
.controls select{background:transparent; color:var(--text); border:1px solid color-mix(in oklab, var(--muted) 35%, transparent); border-radius:10px; padding:6px 10px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#e6f0ff; font-weight:700; border:0; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px color-mix(in oklab, var(--brand) 45%, transparent)}
.ghost{background:transparent; color:var(--text); border:1px solid color-mix(in oklab, var(--muted) 35%, transparent)}
.hamb{display:none}
@media (max-width:880px){.nav ul{display:none} .hamb{display:inline-flex; background:transparent; border:1px solid color-mix(in oklab, var(--muted) 35%, transparent); padding:8px 10px; border-radius:10px} #mobile{display:none; position:absolute; inset:60px 16px auto 16px; background:color-mix(in oklab, var(--bg) 92%, transparent); border:1px solid color-mix(in oklab, var(--muted) 30%, transparent); border-radius:16px; padding:14px} #mobile a{display:block; padding:12px 10px; border-radius:10px} #mobile a:hover{background:color-mix(in oklab, var(--muted) 12%, transparent)}}

/* Hero */
.hero{padding:90px 0 40px; position:relative}
.hero .grid{display:grid; grid-template-columns:1.2fr .8fr; gap:36px}
.kicker{display:inline-block; font-size:12px; letter-spacing:.2em; color:var(--accent); text-transform:uppercase}
h1{font-size:clamp(28px, 4vw, 48px); line-height:1.12; margin:8px 0 14px}
.grad{background:linear-gradient(90deg,var(--accent),color-mix(in oklab, var(--accent) 50%, white)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size:clamp(15px, 1.6vw, 18px); color:var(--muted)}
.hero .cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}

/* Device + Carousel */
.mock{min-height:320px; border-radius:var(--radius); background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 18%, transparent), transparent 35%), linear-gradient(180deg, color-mix(in oklab, var(--brand) 28%, transparent), transparent 55%), var(--card); border:1px solid color-mix(in oklab, var(--muted) 25%, transparent); box-shadow:var(--shadow); position:relative; overflow:hidden}
.status{position:absolute; top:14px; left:14px; display:flex; gap:8px}
.chip{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid color-mix(in oklab, var(--muted) 30%, transparent); background:color-mix(in oklab, var(--bg) 75%, transparent)}
.device{position:absolute; right:20px; bottom:-20px; width:min(44%, 300px); aspect-ratio:9/19; border-radius:28px; border:1px solid color-mix(in oklab, var(--muted) 30%, transparent); background:linear-gradient(180deg, color-mix(in oklab, var(--bg) 88%, black), color-mix(in oklab, var(--bg) 94%, black)); box-shadow:0 20px 50px rgba(0,0,0,.6); overflow:hidden}
.device img{position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:cover; border-radius:22px; filter:contrast(1.02) saturate(1.02)}
.device-notch{position:absolute; top:6px; left:50%; transform:translateX(-50%); width:40%; height:10px; border-radius:0 0 12px 12px; background:color-mix(in oklab, var(--bg) 88%, black)}
.carousel-dots{position:absolute; right:20px; bottom:14px; display:flex; gap:8px}
.carousel-dots button{width:8px; height:8px; border-radius:50%; border:0; background:color-mix(in oklab, var(--muted) 40%, transparent); cursor:pointer}
.carousel-dots button.active{background:var(--text)}

/* Sections */
section{padding:70px 0; position:relative}
h2{font-size:clamp(22px, 3.2vw, 34px); margin:0 0 10px}
.sub{color:var(--muted); max-width:800px}
.cards{margin-top:26px; display:grid; gap:16px; grid-template-columns:repeat(12, 1fr)}
.card{grid-column:span 4; background:var(--card); border:1px solid color-mix(in oklab, var(--muted) 25%, transparent); border-radius:16px; padding:18px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease}
.card h3{margin:6px 0 6px}
.muted{color:var(--muted)}
.tiny{font-size:12px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase}
@media (max-width:960px){.card{grid-column:span 6}}
@media (max-width:640px){.card{grid-column:span 12}}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:880px){.hero .grid, .grid-2{grid-template-columns:1fr}}
.pill-list{display:flex; gap:10px; flex-wrap:wrap}
.pill{padding:8px 12px; border-radius:999px; border:1px solid color-mix(in oklab, var(--muted) 30%, transparent); background:color-mix(in oklab, var(--bg) 75%, transparent)}

.glass{background:color-mix(in oklab, var(--bg) 88%, white); border:1px solid color-mix(in oklab, var(--muted) 25%, transparent); border-radius:14px; padding:14px}
.shadowed{border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.35)}

.gallery{columns:3 280px; column-gap:12px; margin-top:18px}
.gallery img{width:100%; border-radius:12px; margin:6px 0; break-inside:avoid; box-shadow:0 8px 22px rgba(0,0,0,.25); transition:transform .2s ease}
.gallery img:hover{transform:translateY(-2px)}

/* Testimonials */
.testimonials{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:18px}
.tcard{grid-column:span 4; background:var(--card); border:1px solid color-mix(in oklab, var(--muted) 25%, transparent); border-radius:16px; padding:16px; display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; position:relative}
.tcard img{width:56px; height:56px; border-radius:999px; box-shadow:0 6px 14px rgba(0,0,0,.25)}
.tmeta{display:flex; flex-direction:column}
.tmeta .role{color:var(--muted); font-size:12px}
.stars{letter-spacing:2px}
.tcard.highlight{outline:2px solid var(--accent)}
.tcard .nps{position:absolute; top:-12px; right:12px; background:var(--accent); color:color-mix(in oklab, var(--bg) 20%, black); padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px}
@media (max-width:960px){.tcard{grid-column:span 6}}
@media (max-width:640px){.tcard{grid-column:span 12}}

.plan .price{font-size:28px}
.plan.featured{outline:2px solid var(--accent); position:relative}
.plan.featured .badge{position:absolute; top:-10px; right:16px; background:var(--accent); color:color-mix(in oklab, var(--bg) 20%, black); padding:6px 10px; border-radius:999px; font-size:12px}

footer{padding:44px 0; border-top:1px solid color-mix(in oklab, var(--muted) 25%, transparent); color:var(--muted)}
.footgrid{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
.foot-brand{display:flex; align-items:center; gap:12px}
.foot-brand .logo{width:30px; height:30px; border-radius:8px; background:conic-gradient(from 0deg, var(--brand), var(--accent), var(--brand))}
.copy{margin-top:12px; font-size:13px}
@media (max-width:880px){.footgrid{grid-template-columns:1fr}}

/* Effects */
.hover-tilt:hover{transform:perspective(600px) rotateX(1.5deg) rotateY(-2deg); box-shadow:0 30px 60px rgba(0,0,0,.35)}
.reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Lightbox */
#lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center}
#lightbox.active{display:flex}
.lightbox-bg{position:absolute; inset:0; background:rgba(5,10,20,.85); backdrop-filter:blur(6px)}
.lightbox-content{position:relative; width:min(960px, 92vw);}
.lightbox-close{position:absolute; top:-40px; right:0; background:transparent; border:0; color:#fff; font-size:24px; cursor:pointer}
.responsive-iframe{position:relative; width:100%; padding-top:56.25%}
.responsive-iframe iframe{position:absolute; inset:0; width:100%; height:100%}

/* Floating WhatsApp */
.whatsapp{position:fixed; right:16px; bottom:86px; width:56px; height:56px; border-radius:999px; display:grid; place-items:center; background:linear-gradient(90deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 10px 24px color-mix(in oklab, var(--brand) 45%, transparent); font-size:22px; z-index:60}

/* Sticky CTA (mobile) */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; gap:10px; padding:10px; background:color-mix(in oklab, var(--bg) 90%, transparent); border-top:1px solid color-mix(in oklab, var(--muted) 25%, transparent); z-index:59}
.sticky-cta .btn{padding:10px 18px}
@media (min-width:900px){ .sticky-cta{display:none} }


/* --- New Visual Sections --- */
.alt-section{background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, transparent), transparent 20%)}
.vcenter{align-items:center}
.radius{border-radius:16px}
.stack{display:grid; gap:10px}
.field{display:grid; gap:6px}
.field input, .field textarea{background:color-mix(in oklab, var(--bg) 92%, white); border:1px solid color-mix(in oklab, var(--muted) 28%, transparent); color:var(--text); border-radius:12px; padding:10px 12px}
.field input::placeholder, .field textarea::placeholder{color:color-mix(in oklab, var(--muted) 70%, transparent)}
.row{display:flex; gap:10px; align-items:center}
.narrow{max-width:720px; margin-inline:auto}

/* Before/After compare slider */
.compare{position:relative; width:100%; max-width:1000px; margin:14px auto 0; overflow:hidden; border-radius:16px; box-shadow:0 18px 50px rgba(0,0,0,.35)}
.compare img{display:block; width:100%; height:auto}
.compare .after{position:absolute; inset:0; width:50%; overflow:hidden; transition:width .08s linear}
.compare input[type="range"]{position:absolute; left:0; right:0; bottom:12px; width:60%; margin-inline:auto; display:block; appearance:none; height:6px; border-radius:999px; background:color-mix(in oklab, var(--muted) 30%, transparent)}
.compare input[type="range"]::-webkit-slider-thumb{appearance:none; width:22px; height:22px; border-radius:50%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); box-shadow:0 6px 16px color-mix(in oklab, var(--brand) 45%, transparent)}
.compare input[type="range"]::-moz-range-thumb{width:22px; height:22px; border:none; border-radius:50%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); box-shadow:0 6px 16px color-mix(in oklab, var(--brand) 45%, transparent)}


/* --- Interactive Drawer (Recursos) --- */
.drawer{margin-top:18px; background:var(--card); border:1px solid color-mix(in oklab, var(--muted) 25%, transparent); border-radius:16px; padding:16px; box-shadow:0 18px 50px rgba(0,0,0,.35); display:none}
.drawer[aria-hidden="false"]{display:block; animation:drawerIn .28s ease both}
@keyframes drawerIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.drawer-header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.drawer-header button{background:transparent; color:var(--text); border:1px solid color-mix(in oklab, var(--muted) 35%, transparent); border-radius:10px; padding:6px 10px; cursor:pointer}
.drawer-bullets{margin:8px 0 12px; display:grid; gap:6px}
.drawer-bullets li{list-style:'• '; margin-left:16px}

/* --- Quem Somos --- */
.check-list{display:grid; gap:8px; margin:8px 0 0}
.timeline{display:grid; gap:8px; margin:8px 0 0}
.timeline li{list-style:none}
.timeline li span{display:inline-block; min-width:64px; font-weight:700; color:var(--accent)}
.team{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:18px}
.person{grid-column:span 4; background:var(--card); border:1px solid color-mix(in oklab, var(--muted) 25%, transparent); border-radius:16px; padding:12px; display:flex; gap:12px; align-items:center}
.person img{width:56px; height:56px; border-radius:999px; box-shadow:0 6px 14px rgba(0,0,0,.25)}
@media (max-width:960px){.person{grid-column:span 6}}
@media (max-width:640px){.person{grid-column:span 12}}