:root{
  --bg: #0b1020;
  --fg: #ffffff;
  --muted: rgba(255,255,255,.75);
  --card: rgba(255,255,255,.06);
  --card-border: rgba(255,255,255,.12);
  --pill-border: rgba(255,255,255,.24);
  --accentA: #3b82f6;
  --accentB: #8b5cf6;
  --good: #22c55e;
  --warn: #eab308;
  --bad:  #ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg); background:radial-gradient(1200px 800px at 10% -10%, var(--accentA) 0%, transparent 60%),
                                   radial-gradient(1200px 800px at 110% 10%, var(--accentB) 0%, transparent 50%), var(--bg);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
.container{max-width:1100px; margin:0 auto; padding:0 1rem}
.header{
  position:sticky; top:0; backdrop-filter:saturate(150%) blur(8px);
  background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.1);
}
.header-wrap{height:64px; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; gap:.5rem; color:#fff; text-decoration:none; font-weight:700}
.logo{width:28px; height:28px}
.nav{display:none; gap:.25rem}
@media (min-width: 768px){ .nav{display:flex} }
.nav a{color:rgba(255,255,255,.9); text-decoration:none; padding:.5rem .75rem; border-radius:.5rem}
.nav a.active{background:rgba(255,255,255,.1); color:#fff}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-radius:.75rem;
     border:1px solid rgba(255,255,255,.16); background:transparent; color:#fff; text-decoration:none; font-weight:600}
.btn.primary{background:#fff; color:#000; border-color:#fff}
.btn.ghost{background:transparent}
.pill{display:inline-block; border:1px solid var(--pill-border); padding:.25rem .5rem; border-radius:999px; font-size:.8rem}
.muted{color:var(--muted)}
.main{padding:3rem 0}
.grid2{display:grid; gap:2rem}
@media (min-width: 900px){ .grid2{grid-template-columns: 1.2fr 1fr} }
.grid3{display:grid; gap:1rem}
@media (min-width: 900px){ .grid3{grid-template-columns: repeat(3, 1fr)} }
.card{background:var(--card); border:1px solid var(--card-border); border-radius:1rem; padding:1.25rem}
.footer{border-top:1px solid rgba(255,255,255,.1)}
.footer-wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:2rem 0; color:var(--muted); font-size:.9rem}
h1{font-size:clamp(28px, 4vw, 44px); line-height:1.15; margin:0}
h2{font-size:clamp(22px, 3vw, 30px)}
h3{margin:0 0 .25rem; font-size:1.05rem}
ol{padding-left:1.25rem}
.badge-title{letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75); font-size:.8rem}
.pill.good{border-color:var(--good)} .pill.warn{border-color:var(--warn)} .pill.bad{border-color:var(--bad)}
pre{white-space:pre-wrap; word-break:break-word; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); padding:1rem; border-radius:.7rem}
.link{color:#9ecbff}


/* === Premium palette & layout refinements === */
:root{
  --bg: #0a0f1e;
  --bg2:#0e1428;
  --fg: #eef2ff;
  --muted: rgba(238,242,255,.78);
  --accentA: #4f7df0;   /* softened blue */
  --accentB: #7057e8;   /* softened purple */
  --accentGlowA: rgba(79,125,240,.22);
  --accentGlowB: rgba(112,87,232,.22);
}
body{
  background:
    radial-gradient(1400px 800px at 10% -10%, var(--accentGlowA) 0%, transparent 60%),
    radial-gradient(1200px 700px at 120% 20%, var(--accentGlowB) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
.kicker{letter-spacing:.12em; text-transform:uppercase; color:rgba(238,242,255,.65); font-size:.82rem}
.btn{box-shadow:0 8px 18px rgba(0,0,0,.35)}
.btn.primary{box-shadow:0 10px 24px rgba(79,125,240,.35)}
.hr{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); margin:2.5rem 0}
.hero{position:relative}
.tone-bg{position:absolute; inset:-60px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px 260px at 30% 45%, var(--accentGlowA), transparent 60%),
    radial-gradient(800px 320px at 85% 55%, var(--accentGlowB), transparent 60%);
  filter:saturate(110%);
}
.hero .lead{max-width:52ch}
.hero .cta-row .btn{height:44px}
.hero-panel{padding:1.25rem}
.hero-mock{height:300px}
.mock-bubble{backdrop-filter:blur(4px)}
.feature-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border-color:rgba(255,255,255,.14)}
.step{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border-color:rgba(255,255,255,.14)}
.step-num{background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.18)}
.footer{background: linear-gradient(180deg, rgba(255,255,255,.02), transparent)}
/* spacing helpers */
.section{padding: 3rem 0}
.section + .section{padding-top: 0; margin-top: 1rem}
.hero{display:grid; gap:2rem; align-items:center}
@media (min-width: 980px){ .hero{grid-template-columns: 1.1fr 1fr} }
.kicker{margin-bottom:.3rem}
h1.hero-title{font-size: clamp(32px, 5vw, 56px)}
.subtitle{font-size: clamp(16px, 2vw, 18px)}