:root{
  --bg:#051e2a;
  --card:#0a2c3f;
  --muted:#b3cfdc;
  --brand:#00d4ff;
  --brand-2:#8bffda;
  --ok:#27ae60;
  --warn:#f2a54a;
  --danger:#eb5757;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
  --glass: rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#e6f6ff;
  background:radial-gradient(1200px 600px at 80% -10%, rgba(0,212,255,.12), transparent),
             radial-gradient(1000px 500px at -10% 20%, rgba(139,255,218,.10), transparent),
             var(--bg);}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}
.container{width: min(1200px, 92%); margin: 0 auto}
.section{padding: 3rem 0}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.2rem;border-radius:calc(var(--radius) - 6px);font-weight:600;letter-spacing:.2px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));box-shadow:var(--shadow);backdrop-filter: blur(6px);transition: .2s transform,.2s filter,.2s background}
.btn:hover{transform:translateY(-2px);}
.btn.primary{background:linear-gradient(180deg, var(--brand), #0fb39d);color:#07221e;border-color:transparent}
.btn.ghost{background:transparent}
.chip{display:inline-flex;gap:.5rem;align-items:center;padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:var(--glass);font-size:.85rem;color:#d7efe9}
.grid{display:grid;gap:1.2rem}
.grid-3{grid-template-columns: repeat(3, 1fr)}
.grid-2{grid-template-columns: repeat(2, 1fr)}
@media (max-width: 920px){.grid-3{grid-template-columns: 1fr}.grid-2{grid-template-columns: 1fr}}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius: var(--radius);box-shadow: var(--shadow)}
.card .body{padding:1.2rem}
.muted{color:var(--muted)}
.kicker{font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.title-xl{font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; letter-spacing:-.02em; font-weight:800; color:#ffffff;}
.title-lg{font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.15; font-weight:800; color:#ffffff;}
.title-md{font-size:1.15rem;font-weight:700; color:#ffffff;}
header.nav{position:sticky;top:0;z-index:50;background: rgba(5,30,42,.85);backdrop-filter: blur(12px);border-bottom: 1px solid rgba(255,255,255,.08)}
header.nav .inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.8rem}
.logo{width:40px;height:40px;border-radius:10px;background:linear-gradient(180deg, rgba(0,212,255,.14), rgba(0,212,255,.12)); border:1px solid rgba(255,255,255,.12)}
nav a{font-weight:600;margin: 0 .6rem;color:var(--muted)}
nav a:hover{color:var(--brand)}
.pill{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:rgba(0,212,255,.18);border:1px solid rgba(0,212,255,.35);font-size:.8rem;color:#e6f6ff}
.icon{background: linear-gradient(180deg, rgba(0,212,255,.14), rgba(0,212,255,.12)); border:1px solid rgba(255,255,255,.12)}
.faq details{background: rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem;color:var(--muted)}
footer{padding:2rem 0;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.15);color:var(--muted)}
.floating-wa{position:fixed;right:1rem;bottom:1rem;z-index:60}
.floating-wa a{display:inline-flex;padding:.8rem 1rem;border-radius:999px;background:#00d4ff;color:#001f2b;font-weight:700;box-shadow:var(--shadow)}
/* Form controls */
input, select, textarea{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#e8f6f1;
  padding:.8rem .9rem;
  border-radius:12px;
  outline:none;
}
input:focus, select:focus, textarea:focus{ box-shadow:0 0 0 3px rgba(45,212,191,.25); }
/* Utility lists & timeline */
ul.clean{list-style:none;padding:0;margin:.5rem 0 0 0}
.timeline{display:grid}
.timeline-item{display:grid;grid-template-columns:20px 1fr;gap:.8rem;align-items:start}
.dot{width:12px;height:12px;border-radius:999px;background:var(--brand);margin-top:.45rem}
/* Hero container (in case it's present) */
.hero .inner{ display:flex; flex-direction:column; gap:3rem; padding:3rem 0; } /* changed from column-reverse */
@media (min-width: 921px){
  .hero .inner{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:4rem; }
}
.hero-art{ position:relative; display:flex; justify-content:center; }