:root{
  --bg:#0b0e13; --panel:rgba(255,255,255,0.06); --stroke:rgba(255,255,255,0.12);
  --text:#e9eef7; --sub:#b3bfd4; --brand:#6ee7ff; --brand2:#a78bfa;
  --radius:18px; --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  --blur:18px;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 10% -10%, #1a1f2b 0%, transparent 60%),
    radial-gradient(1000px 800px at 120% 20%, #11222b 0%, transparent 55%),
    linear-gradient(180deg, #0b0e13 0%, #0b0e13 100%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";
  line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline; opacity:.9}
.wrap{max-width:1100px; margin:0 auto; padding:0 16px}
header{position:sticky; top:0; z-index:30; backdrop-filter:saturate(140%) blur(14px); background:rgba(10,12,18,.55); border-bottom:1px solid var(--stroke)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px; white-space:nowrap}
.logo-badge{width:32px; height:32px; border-radius:10px; background:linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow:var(--shadow)}
.menu{display:flex; align-items:center; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{padding:8px 10px; border-radius:10px; flex:0 0 auto}
.menu a.cta{background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#081018; font-weight:700; border:none; box-shadow:var(--shadow)}
.hero{padding:56px 0 28px}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:860px){ .grid-2{grid-template-columns:1.5fr 1fr} .grid-3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--panel); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); backdrop-filter: blur(var(--blur))}
.card.pad{padding:20px}
@media(min-width:860px){ .card.pad{padding:24px} }
h1{font-size:clamp(24px, 4.8vw, 44px); line-height:1.15; margin:10px 0 6px}
h2{font-size:clamp(20px, 3.4vw, 30px); margin:0 0 12px}
h3{font-size:clamp(16px, 2.8vw, 20px); margin:0 0 8px}
.muted{color:var(--sub)}
.tag{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--stroke); border-radius:999px; background:rgba(255,255,255,.04)}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke); color:var(--text); background:rgba(255,255,255,.03); cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#0a0f16; border:none; font-weight:800}
.btn.full{width:100%}
@media(max-width:480px){ .cta-row .btn{flex:1 1 100%} }
.list{display:grid; gap:10px; padding-left:0; list-style:none}
.list li{padding-left:22px; position:relative}
.list li::before{content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand2))}
.hero-img{width:100%; height:auto; display:block; border-radius:18px; border:1px solid rgba(255,255,255,0.12)}
footer{margin:36px 0 72px}
.top{position:fixed; right:16px; bottom:16px; z-index:50}
.backhome{display:inline-block;margin-top:14px}
/* Encouraging panel */
.reassure{display:flex; flex-direction:column; gap:12px; padding:22px; border-radius:22px; border:1px solid var(--stroke);
 background:linear-gradient(135deg, rgba(110,231,255,.10), rgba(167,139,250,.10)); box-shadow:var(--shadow)}
.reassure h3{margin:0 0 4px}