:root{
  --zelo-blue:#1f6fff;--zelo-purple:#7b5cff;

  --zelo-blue:#1f6fff;
  --zelo-purple:#7b5cff;
  --dark:#0f1724;
  --bg:#f6f8ff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:#0f1724}
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.8);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(15,23,36,.08);padding:12px 18px}
nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
nav a{color:#0f1724;text-decoration:none;font-weight:900;padding:8px 10px;border-radius:12px}
nav a:hover{background:rgba(15,23,36,.06)}
.brand{display:flex;align-items:center;gap:10px;font-weight:1000;letter-spacing:.6px}
.brand img{height:48px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;font-weight:1000;
  border:1px solid rgba(15,23,36,.12);background:rgba(255,255,255,.7);text-decoration:none;color:#0f1724;
  backdrop-filter:blur(10px);cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(15,23,36,.10);background:#fff}
.btn.primary{border:0;color:#fff;background:linear-gradient(135deg,var(--zelo-blue),var(--zelo-purple));
  box-shadow:0 18px 50px rgba(31,111,255,.22)}
.btn.primary:hover{box-shadow:0 22px 70px rgba(31,111,255,.30)}
.section{padding:70px 18px;max-width:1100px;margin:auto}
.card{background:#fff;border-radius:18px;padding:26px;box-shadow:0 20px 60px rgba(15,23,36,.08)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.kicker{opacity:.92;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;font-size:12px}
.h1{font-size:56px;font-weight:1100;margin:10px 0 12px;letter-spacing:.8px}
.p{font-size:16px;opacity:.92;max-width:62ch;line-height:1.6}
.hero{min-height:86vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(1000px 600px at 20% 20%, rgba(255,255,255,.22), transparent 60%),
             linear-gradient(135deg,var(--zelo-blue),var(--zelo-purple));color:#fff}
.carousel{position:relative;width:100%;height:86vh}
.slide{position:absolute;inset:0;opacity:0;transform:scale(1.02);transition:opacity .8s ease, transform .8s ease;
  display:flex;align-items:center;justify-content:center}
.slide.active{opacity:1;transform:scale(1)}
.slide .media{position:absolute;inset:-2%;background-size:cover;background-position:center;z-index:0;filter:saturate(1.05)}
.slide .parallax{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(800px 500px at 30% 20%, rgba(255,255,255,.28), transparent 60%),
             radial-gradient(900px 600px at 70% 70%, rgba(0,212,255,.20), transparent 65%);
  mix-blend-mode:screen;transform:translateY(0)}
.slide .content{position:relative;z-index:2;width:min(1100px,92vw)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:10px;z-index:3}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.35);
  cursor:pointer;transition:transform .2s ease, background .2s ease}
.dot.active{background:#fff;transform:scale(1.25)}
.reveal{opacity:0;transform:translateY(34px);transition:.8s}
.reveal.active{opacity:1;transform:none}
footer{background:var(--dark);color:#aab;padding:28px 18px;text-align:center}
.disclaimer{background:rgba(255,255,255,.06);border-top:1px solid rgba(255,255,255,.10);padding:14px 18px;margin-top:18px}
.code{background:#0f1724;color:#e6eef8;border-radius:14px;padding:14px;overflow:auto;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;font-size:13px}
.hero-video{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;z-index:0;opacity:.55;filter:saturate(1.08) contrast(1.05)}