*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0E0B26;--ink-mid:#3F3A5C;--ink-light:#7A748F;
  --line:#ECE9F5;--bg:#FBFAFF;
  --indigo:#6366F1;--indigo-d:#4F46E5;
  --indigo-tint:#EEF0FF;--indigo-faint:#F4F3FF;
}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ========== HEADER ========== */
.hdr{position:sticky;top:0;z-index:80;background:rgba(251,250,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(236,233,245,.7)}
.hdr-row{max-width:1200px;margin:0 auto;height:78px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:0;color:var(--ink)}
.logo svg{height:30px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:4px}
.nav a{padding:9px 16px;font-size:14.5px;font-weight:500;color:var(--ink-mid);border-radius:100px;transition:.15s}
.nav a:hover{background:#fff;color:var(--ink)}
.hdr-login:hover{color:var(--ink);background:#fff}
.nav a.active{color:var(--indigo);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:100px;font-weight:600;font-size:14.5px;transition:all .2s;white-space:nowrap}
.pill-primary{background:var(--indigo);color:#fff;box-shadow:0 6px 20px rgba(99,102,241,.32),inset 0 -2px 0 rgba(0,0,0,.08)}
.pill-primary:hover{background:var(--indigo-d);transform:translateY(-1px);box-shadow:0 10px 26px rgba(99,102,241,.4)}
.pill-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.pill-ghost:hover{border-color:#c7c1d8}
.pill-lg{padding:15px 30px;font-size:15.5px}
.hdr-menu-btn{width:42px;height:42px;border-radius:11px;background:#fff;border:1px solid var(--line);display:none;align-items:center;justify-content:center;color:var(--ink)}

/* mobile menu */
.mob-menu{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 8px 24px rgba(14,11,38,.1);z-index:79}
.mob-menu.open{display:block}
.mob-menu-inner{max-width:1200px;margin:0 auto;padding:8px 20px 16px}
.mob-menu a{display:block;padding:13px 8px;font-size:15px;font-weight:500;color:var(--ink-mid);border-radius:8px;transition:.15s}
.mob-menu a:hover{background:var(--indigo-faint);color:var(--indigo)}
.mob-menu hr{border:none;border-top:1px solid var(--line);margin:8px 0}
.mob-menu .mob-login{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;font-size:15px;font-weight:600;border:1.5px solid var(--line);border-radius:9999px;transition:.15s}
.mob-menu .mob-login:hover{border-color:#c7c1d8}
.mob-menu .mob-cta{display:block;width:100%;padding:12px 16px;margin-top:8px;font-size:15px;font-weight:700;text-align:center;background:var(--indigo);color:#fff;border-radius:100px;box-shadow:0 6px 18px rgba(99,102,241,.3);transition:background .2s}
.mob-menu .mob-cta:hover{background:var(--indigo-d)}

/* ========== FOOTER ========== */
footer{background:#0E0B26;color:#a09bb8;padding:60px 28px 30px}
.ft-row{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
.ft-brand .logo{color:#fff;margin-bottom:14px}
.ft-brand p{font-size:14px;line-height:1.6;max-width:300px;color:#a09bb8}
.ft-col h4{font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.ft-col a{display:block;font-size:14px;color:#a09bb8;padding:6px 0;transition:.15s}
.ft-col a:hover{color:#fff}
.ft-bot{max-width:1200px;margin:0 auto;padding-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:13px;color:#6b6588}

/* ========== RESPONSIVE ========== */
@media(max-width:980px){
  .ft-row{grid-template-columns:1fr 1fr;gap:30px}
  .nav{display:none}
  .hdr-menu-btn{display:flex}
  .pill-header{display:none}
}
@media(max-width:560px){
  .ft-row{grid-template-columns:1fr}
}