body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#0f172a;background:#f8fafc}
.button{display:inline-block;background:#0b6bcb;color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}


/* premium header */
header{position:sticky;top:0;z-index:40;background:rgba(2,6,23,.7);backdrop-filter:blur(8px);border-bottom:1px solid rgba(148,163,184,.15)}
header nav,.navbar,.nav{display:flex;align-items:center;gap:18px;padding:10px 16px}
header nav a{color:#e2e8f0;text-decoration:none;font-weight:600;opacity:.9}
header nav a:hover{opacity:1;text-decoration:underline}
.nav-spacer{flex:1}
.header-cta{padding:8px 16px;border-radius:999px;background:#0ea5e9;color:#0b1220 !important;font-weight:800;box-shadow:0 8px 20px rgba(14,165,233,.25)}
.header-cta:hover{filter:brightness(1.05)}
/* footer */
footer{margin-top:40px;padding:24px 16px;border-top:1px solid rgba(15,23,42,.1);color:#475569;background:#f1f5f9}
footer .footer-inner{max-width:1100px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
/* content */
main{max-width:1100px;margin:0 auto;padding:22px}
section{margin:22px 0}
h1,h2,h3{color:#0f172a}
p{line-height:1.75;color:#334155}



/* =============== Premium Ultra Theme =============== */
:root{
  --bg:#0b1220; --panel:#0f172a; --muted:#94a3b8; --text:#e2e8f0; --accent:#8b5cf6; --accent-2:#22d3ee;
  --ring: rgba(136, 58, 234, .35);
}
html,body{background:var(--bg); color:var(--text);}
a{color:var(--accent-2); text-decoration:none}
a:hover{opacity:.95; text-decoration:underline}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(2,6,23,.9), rgba(2,6,23,.6));
  border-bottom:1px solid rgba(148,163,184,.14)
}
header .container{max-width:1180px; margin:0 auto; padding:10px 16px}
header nav{display:flex; align-items:center; gap:20px}
header nav a{color:var(--text); opacity:.9; font-weight:700}
header nav a:hover{opacity:1}
.nav-spacer{flex:1}
.button{display:inline-block; padding:10px 16px; border-radius:999px; background:#0ea5e9; color:#071521 !important; font-weight:800; box-shadow:0 8px 24px rgba(14,165,233,.25)}
.header-cta{background:#22d3ee}
.header-cta:hover{transform:translateY(-1px)}

/* Hero */
.hero{position:relative; display:flex; align-items:center; min-height:58vh;}
.hero::after{content:''; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 40%, rgba(34,211,238,.18), transparent 55%), radial-gradient(60% 60% at 60% 60%, rgba(139,92,246,.18), transparent 55%); pointer-events:none}
.hero .inner{max-width:1180px; margin:0 auto; padding:40px 16px; text-align:center}
.hero h1{font-size:clamp(36px, 6vw, 56px); color:#a78bfa; letter-spacing:.5px; margin-bottom:12px; font-weight:900}
.hero p{max-width:860px; margin:0 auto; line-height:1.85; color:var(--muted); font-size:1.05rem}

/* Sections */
.container{max-width:1180px; margin:0 auto; padding:0 16px}
section{padding:40px 0}
section h2{font-size:clamp(22px, 3.5vw, 30px); color:#a78bfa; margin:0 0 16px}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px}
.card{background:linear-gradient(180deg, #0f172a, #0b1220); border:1px solid rgba(148,163,184,.12);
  border-radius:18px; overflow:hidden; box-shadow:0 18px 40px rgba(2,6,23,.35)}
.card img{display:block; width:100%; height:auto}
.card .content{padding:16px}
.card .title{font-weight:800; margin:6px 0 10px}
.card p{color:var(--muted); line-height:1.75}

/* Footer */
footer{border-top:1px solid rgba(148,163,184,.12); padding:24px 16px; color:var(--muted); margin-top:40px}
footer .footer-inner{max-width:1180px; margin:0 auto; display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap}

/* Utilities */
.badge{display:inline-flex; align-items:center; gap:6px; background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.4);
  border-radius:999px; padding:6px 10px; font-size:.85rem; color:#a5f3fc}
.shadow-ring{box-shadow:0 0 0 6px var(--ring)}



/* === Premium Typography (Inter + Outfit) === */
:root{
  --text:#e5e7eb; --muted:#cbd5e1; --bg:#0b1220;
  --heading:#e2e8f0;
  --fs-base:17px; --lh-base:1.85;
  --fs-h1:clamp(34px, 6vw, 56px);
  --fs-h2:clamp(24px, 3.8vw, 32px);
  --fs-h3:clamp(18px, 3vw, 22px);
}
html{font-size:16px}
body{
  font-family:'Inter','Segoe UI',Roboto,Arial,system-ui,-apple-system,'Helvetica Neue',sans-serif;
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; background:var(--bg); color:var(--text);
}
h1,h2,h3{
  font-family:'Outfit','Inter','Segoe UI',Roboto,Arial,sans-serif;
  color:var(--heading); margin:0 0 .6rem;
}
h1{font-weight:800; font-size:var(--fs-h1); line-height:1.15; letter-spacing:.2px}
h2{font-weight:800; font-size:var(--fs-h2); line-height:1.2}
h3{font-weight:700; font-size:var(--fs-h3)}
p{color:var(--muted); margin:.8rem 0}
small, .text-muted{color:#a3b2c7}
.lead{font-size:1.1rem; color:#d5e0ee}
/* lists */
ul,ol{padding-left:1.25rem}
li{margin:.35rem 0}
/* buttons refine */
.button{font-family:'Inter',system-ui,sans-serif; font-weight:700; letter-spacing:.01em}