:root{
  --bg1: #0f172a;      /* deep navy */
  --bg2: #6d28d9;      /* purple */
  --accent: #00d4ff;   /* cyan */
  --card: #ffffff;
  --muted: #64748b;
  --maxw: 1100px;
  --radius: 14px;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(180deg,#0b1020 0%, #081027 45%, #07122a 100%);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
  overflow-x:hidden;
}

/* Header */
.header{
  position:sticky;top:0;z-index:60;
  backdrop-filter: blur(6px);
}
.navwrap{
  max-width:var(--maxw);margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:12px;
}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.15rem;margin-right:8px}
.mainnav{display:flex;gap:14px;flex:1;align-items:center}
.mainnav a{color: #cfe9ff; text-decoration:none;font-weight:500;font-size:0.95rem;opacity:0.9}
.mainnav a:hover{color:#fff;transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#cfe9ff;padding:8px 12px;border-radius:10px;text-decoration:none;font-weight:600}

/* Hero */
.hero{
  position:relative;
  padding:76px 20px 84px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background: radial-gradient(1000px 500px at 10% 30%, rgba(109,40,217,0.25), transparent 8%),
              radial-gradient(900px 600px at 85% 70%, rgba(0,212,255,0.16), transparent 10%),
              linear-gradient(140deg, rgba(13,16,33,0.9), rgba(8,12,30,0.95));
  transform: translateY(0) scale(1.08);
  transition: transform 0.3s ease-out;
  filter: blur(18px);
  z-index:0;
}
.hero-inner{
  position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;text-align:center;color:#fff;padding:20px;
}
.hero h1{font-size:2.2rem;line-height:1.05;margin-bottom:12px;letter-spacing:-0.4px}
.sub{color:rgba(235,245,255,0.85);margin-bottom:20px;font-size:1.02rem}
.hero-ctas{display:flex;gap:12px;justify-content:center}
.btn-primary{
  background:linear-gradient(90deg,var(--accent),#7c5cff);
  color:#021023;padding:12px 22px;border-radius:999px;text-decoration:none;font-weight:700;box-shadow:0 8px 30px rgba(109,40,217,0.12);transition:transform .22s ease,box-shadow .22s ease;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(7,12,40,0.5)}
.btn-outline{color:#dbefff;background:transparent;border:1px solid rgba(255,255,255,0.07);padding:10px 18px;border-radius:10px;text-decoration:none}

/* Content wrapper */
.content{max-width:var(--maxw);margin:-36px auto 60px;padding:0 20px;display:block}

/* Cards / Sections */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  padding:26px;border-radius:var(--radius);backdrop-filter: blur(6px);
  margin:28px 0;box-shadow: 0 8px 30px rgba(3,8,23,0.45);
  transition: transform .28s ease, box-shadow .28s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(7,12,40,0.6)}
.card h2{color:#fff;margin-bottom:12px}
.card h3{color:var(--accent);margin-top:12px;margin-bottom:8px}
.card p{color:rgba(230,240,255,0.9);margin-bottom:12px}
.card ul{margin-left:18px;color:rgba(230,240,255,0.92);margin-bottom:8px}
.card ol{margin-left:18px;color:rgba(230,240,255,0.92);margin-bottom:8px}
.card li{margin-bottom:8px}

/* Alternate card background */
.card.alt{background: linear-gradient(180deg, rgba(124,92,255,0.06), rgba(12,17,40,0.02));}

/* CTA Section */
.cta{display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px;background:linear-gradient(90deg, rgba(109,40,217,0.06), rgba(0,212,255,0.03));border-radius:12px}
.cta p{color:rgba(235,245,255,0.95)}
.btn-primary.large{padding:14px 34px;font-size:1.02rem}

/* Footer */
.footer{margin-top:24px;padding:24px 20px;text-align:center;color:rgba(200,220,255,0.7)}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(18px) scale(0.996);transition:all .9s cubic-bezier(.12,.9,.3,1);}
.reveal.visible{opacity:1;transform:translateY(0) scale(1);}

/* Staggered delays (applied via classes) */
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.22s}
.delay-3{transition-delay:.34s}
.delay-4{transition-delay:.48s}
.delay-5{transition-delay:.62s}
.delay-6{transition-delay:.76s}
.delay-7{transition-delay:.9s}

/* Responsive */
@media (max-width:900px){
  .hero h1{font-size:1.6rem}
  .navwrap{padding:10px 16px}
  .mainnav{display:none}
  .brand{font-size:1.05rem}
}
@media (max-width:520px){
  .hero{padding:48px 16px}
  .hero h1{font-size:1.35rem}
  .card{padding:18px}
  .btn-primary{padding:10px 18px}
}

/* Subtle hover micro-interactions for lists */
.card li{position:relative;padding-left:10px}
.card li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:2px;background:linear-gradient(90deg,var(--accent),#7c5cff);opacity:0.95}