:root{
  --bg:#0b1220;--bg-alt:#0f172a;--text:#e2e8f0;--muted:#94a3b8;--card:#10172a;--line:#23314f;
  --brand:#7c3aed;--brand-2:#06b6d4;--accent:#22d3ee;--shadow:0 10px 30px rgba(0,0,0,.35);
  --font:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial
}
html[data-theme="light"]{--bg:#f8fafc;--bg-alt:#f1f5f9;--text:#0b1220;--muted:#475569;--card:#fff;--line:#e2e8f0;--brand:#6d28d9;--brand-2:#0891b2;--accent:#0ea5e9;--shadow:0 10px 30px rgba(2,6,23,.1)}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:var(--font);background:linear-gradient(180deg,var(--bg) 0%,var(--bg-alt) 100%);color:var(--text);line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.section{padding:80px 0}.section.alt{background:linear-gradient(180deg,var(--bg-alt) 0%,var(--bg) 100%)}
.center{text-align:center}.small{font-size:.9rem}.muted{color:var(--muted)}.lead{font-size:1.15rem}
.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;font-size:.82rem}
.grad{background:linear-gradient(90deg,var(--brand),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.btn{display:inline-block;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#fff;padding:12px 18px;border-radius:12px;border:none;box-shadow:var(--shadow);font-weight:600;letter-spacing:.02em;transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text);box-shadow:none}
.btn.small{padding:8px 12px;border-radius:10px;font-size:.95rem}
.btn.block{display:block;width:100%}
.icon-btn{border:1px solid var(--line);background:transparent;border-radius:10px;padding:8px 10px;cursor:pointer}

.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:800;font-size:1.1rem}
.logo .accent{color:var(--muted);font-weight:600;margin-left:6px}
.nav .menu{display:flex;align-items:center;gap:20px;list-style:none;margin:0;padding:0}
.nav-toggle{display:none}

@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .menu{position:absolute;right:20px;top:64px;background:var(--card);border:1px solid var(--line);
        border-radius:12px;padding:14px;display:none;flex-direction:column;gap:12px;min-width:220px;box-shadow:var(--shadow)}
  .menu.open{display:flex}
}

.site-header{position:sticky;top:0;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0));backdrop-filter:saturate(120%) blur(8px);z-index:20}

.hero .grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:36px;grid-template-areas:
  "copy side"
  "metrics metrics";
  align-items:center;
}
.hero .stack{grid-area:copy}
.hero .hero-card{grid-area:side}
.hero .metric-cards{grid-area:metrics;margin-top:18px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.v-center{align-items:center}
.stack{display:flex;flex-direction:column;gap:16px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.badges{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:4px 0 0;padding:0}
.badges li{padding:6px 10px;border:1px dashed var(--line);border-radius:999px;font-size:.9rem;color:var(--muted)}
.hero-card{display:flex;flex-direction:column;gap:16px}
.code-window{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.code-window pre{margin:0;overflow:auto}
.metric-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.metric{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.metric-num{font-weight:800;font-size:1.6rem}
.metric-label{color:var(--muted);font-size:.9rem}

.trust .logo-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:16px}
.logo-box{display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:12px;height:64px;color:var(--muted);font-weight:700;letter-spacing:.18em}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.bullets{padding-left:18px;margin:10px 0 0}
.bullets li{margin:6px 0}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;padding:0;margin:16px 0}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.step-num{display:inline-block;background:var(--bg-alt);border:1px solid var(--line);border-radius:8px;padding:2px 8px;margin-right:8px;color:var(--muted);font-weight:700}

.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}
.work-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.tags{list-style:none;padding:0;margin:8px 0;display:flex;gap:8px;flex-wrap:wrap}
.tags li{border:1px dashed var(--line);border-radius:999px;padding:4px 8px;color:var(--muted);font-size:.85rem}

.stat-card{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center}
.stat-num{font-weight:900;font-size:1.8rem}
.stat-label{color:var(--muted);font-size:.9rem}

.ai-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.checklist{padding-left:18px;margin:10px 0 0}
.checklist li{margin:6px 0}

.cta-block .grid-2{gap:18px}

.contact-form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.contact-form label{display:block;margin-top:10px}
.contact-form input,.contact-form textarea{
  width:100%;padding:12px 12px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text)
}
.row{display:flex;align-items:center;gap:10px;margin:10px 0}
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#cbd5e1;transition:.2s;border-radius:999px}
.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;top:3px;background:#fff;transition:.2s;border-radius:50%}
.switch input:checked + .slider{background:#22c55e}
.switch input:checked + .slider:before{transform:translateX(20px)}

.contact-list{list-style:none;margin:12px 0;padding:0;display:grid;gap:6px}

.site-footer{border-top:1px solid var(--line);padding:24px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-inner nav{display:flex;gap:12px}
.brand{display:flex;align-items:center;gap:10px}

.whatsapp-fab{
  position:fixed;right:18px;bottom:18px;width:52px;height:52px;border-radius:999px;
  display:grid;place-items:center;background:#25D366;color:#fff;font-size:24px;box-shadow:var(--shadow);
}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:10px;top:10px;width:auto;height:auto;background:var(--card);color:var(--text);padding:8px;border-radius:8px}

@media (max-width:1000px){
  .grid-2{grid-template-columns:1fr}
  .hero .grid-2{grid-template-columns:1fr;grid-template-areas:"copy" "side" "metrics"}
  .metric-cards{grid-template-columns:1fr 1fr 1fr}
  .services-grid{grid-template-columns:1fr 1fr}
  .work-grid{grid-template-columns:1fr 1fr}
  .stat-card{grid-template-columns:1fr 1fr 1fr}
  .trust .logo-row{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
}

@media (max-width:640px){
  .services-grid,.work-grid{grid-template-columns:1fr}
  .metric-cards{grid-template-columns:1fr 1fr}
  .stat-card{grid-template-columns:1fr 1fr}
}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}