:root{--bg:#f7f9fc;--card:#fff;--text:#172033;--muted:#5d687b;--brand:#2457d6;--border:#e3e8f0}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);line-height:1.7}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}header{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}.nav{max-width:1100px;margin:auto;padding:14px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.brand{font-weight:800;font-size:1.2rem;color:var(--text);margin-right:auto}.nav a{font-weight:650;font-size:.92rem}main{max-width:1100px;margin:auto;padding:38px 20px 70px}.hero{background:linear-gradient(135deg,#eef4ff,#f8fbff);border:1px solid #dbe6ff;border-radius:22px;padding:42px 34px;margin-bottom:28px}h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.12;margin:.2em 0 .35em}h2{margin-top:1.7em;line-height:1.25}.lead{font-size:1.12rem;color:var(--muted);max-width:850px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:22px 0}.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 4px 16px rgba(20,35,60,.04)}.card h3{margin-top:0}.tag{display:inline-block;font-size:.78rem;font-weight:750;background:#edf2ff;color:#244dbb;padding:4px 9px;border-radius:999px}.cta{display:inline-block;background:var(--brand);color:#fff;padding:11px 17px;border-radius:10px;font-weight:750;margin-top:8px}.cta:hover{color:#fff;text-decoration:none}.note{background:#fff;border-left:4px solid var(--brand);padding:14px 17px;margin:20px 0;border-radius:8px}li{margin:.4em 0}footer{background:#fff;border-top:1px solid var(--border);padding:28px 20px;color:var(--muted)}.footer-inner{max-width:1100px;margin:auto}.small{font-size:.9rem;color:var(--muted)}.breadcrumb{font-size:.9rem;color:var(--muted);margin-bottom:18px}code{background:#eef1f6;padding:2px 5px;border-radius:4px}@media(max-width:650px){.hero{padding:28px 20px}.nav{gap:10px}.nav a{font-size:.86rem}}

/* Premium navigation + editorial layout */
header{backdrop-filter:blur(14px);background:rgba(255,255,255,.92);box-shadow:0 8px 28px rgba(20,35,60,.06)}
.nav{min-height:68px;gap:8px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:900;letter-spacing:-.03em}
.brand::before{content:"✦";display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,#2457d6,#7c3aed);color:#fff;font-size:.85rem;box-shadow:0 6px 16px rgba(76,70,229,.22)}
.nav a:not(.brand){padding:8px 11px;border-radius:10px;transition:.18s ease}
.nav a:not(.brand):hover{background:#eef2ff;text-decoration:none;color:#1d4ed8}
.nav .nav-app{background:linear-gradient(135deg,#2457d6,#6d3de0);color:#fff!important;box-shadow:0 7px 18px rgba(76,70,229,.22)}
.nav .nav-app:hover{background:linear-gradient(135deg,#1d4ed8,#5b21b6)!important}
.hero{box-shadow:0 20px 55px rgba(36,87,214,.08)}
.card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(20,35,60,.08);border-color:#d2dcf5}
@media(max-width:650px){.brand{width:100%;margin-right:0}.nav{padding:10px 14px}.nav a:not(.brand){font-size:.8rem;padding:7px 8px}}