:root{
  /* Blueish–greyish palette */
  --bg: #0b1220;                 /* deep slate/navy */
  --bg-alt: #0f1a2b;             /* slightly lighter */
  --surface: #111827;            /* card/nav background */
  --text: #E5EDF7;               /* primary text */
  --muted: #B7C2D6;              /* muted text */
  --line: #334155;               /* hairlines */
  --brand: #3B82F6;              /* blue primary */
  --brand-600: #2563EB;          /* darker hover */
  --accent: #94A3B8;             /* grey-blue accent */
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #0f1a2b 0%, #0b1220 60%), #0b1220;
  line-height:1.6;
}

/* Global links & buttons */
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-600); text-decoration:underline}
.btn-brand{
  display:inline-block; background:linear-gradient(135deg,var(--brand),var(--brand-600));
  color:white; border:none; padding:12px 18px; border-radius:999px; font-weight:600; letter-spacing:.2px;
  box-shadow:var(--shadow-sm);
}
.btn-brand:hover{filter:brightness(1.05); text-decoration:none}
.btn-ghost{display:inline-block; padding:10px 16px; border-radius:999px; border:1px solid var(--accent); color:var(--text)}
.btn-ghost:hover{border-color:var(--text); text-decoration:none}

/* Layout helpers */
.section{padding:72px 0}
.section-tight{padding:48px 0}
.container-narrow{max-width:980px; margin:0 auto}
.container-wide{max-width:1180px; margin:0 auto}

/* Header / Nav */
.navbar-custom{backdrop-filter:saturate(140%) blur(8px); background:rgba(17,24,39,.78) !important; border-bottom:1px solid rgba(148,163,184,.18)}
.navbar-brand{font-weight:800; letter-spacing:.5px}
.navbar .nav-link{color:var(--muted) !important}
.navbar .nav-link:hover{color:var(--text) !important}
.nav-cta{margin-left:10px}

/* Hero */
.hero{padding:110px 0 70px; background: radial-gradient(1200px 700px at 80% -10%, rgba(37,99,235,.18), transparent 60%)}
.hero h1{font-weight:800; letter-spacing:.3px}
.hero p.lead{color:var(--muted)}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)); border:1px solid rgba(148,163,184,.18); border-radius:var(--radius); box-shadow:var(--shadow);}

/* Cards & surfaces */
.card-surface{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0)); border:1px solid rgba(148,163,184,.18); border-radius:var(--radius);}
.card-surface .card-title{color:#DCE7F8}
.card-surface .card-text{color:var(--muted)}

/* Footer */
.footer{border-top:1px solid rgba(148,163,184,.18); background:#0b1220}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--text)}

/* Lists */
.check-list{list-style:none; padding-left:0}
.check-list li{margin:8px 0; padding-left:28px; position:relative}
.check-list li:before{content:"✓"; color:var(--ok); position:absolute; left:0}

.muted{color:var(--muted)}
.small{font-size:.92rem}
.hr-soft{border-color:rgba(148,163,184,.18)}

/* Responsive tweaks */
@media (max-width: 575.98px){
  .hero{padding-top:90px}
}