:root{
  --page-bg: #071019;
  --bg-deep: #071019;
  --bg-mid: #0c1722;
  --surface: rgba(255,255,255,0.03);
  --muted: #9fb0c8;
  --text: #e8f0ff;
  --brand: #d62839;
  --brand-strong: #ff3f56;
  --accent: #4cd688;
  --glass: rgba(255,255,255,0.03);
  --line: rgba(255,255,255,0.06);
  --shadow-sm: 0 8px 26px rgba(2,6,23,0.6);
  --shadow-md: 0 24px 64px rgba(2,6,23,0.7);
  --radius-lg: 18px;
  --radius-md: 12px;
}

/* Modern clean baseline */

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:Inter,Manrope,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--text);
  background:
    radial-gradient(800px 600px at 6% 10%, rgba(214,40,57,0.06), transparent 18%),
    radial-gradient(600px 420px at 92% 20%, rgba(76,214,136,0.04), transparent 18%),
    linear-gradient(180deg,var(--bg-deep),var(--bg-mid));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;overflow-x:hidden
}

a{color:inherit;text-decoration:none}

.container{width:min(1160px,calc(100% - 40px));margin:0 auto}
.glass{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);box-shadow:var(--shadow-sm);backdrop-filter:blur(8px) saturate(120%)}

header{position:sticky;top:12px;z-index:50;padding:12px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px;border-radius:14px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:10px;display:block}
.brand b{font-family:"Barlow Condensed",sans-serif;letter-spacing:0.06em;font-size:1.05rem}
.brand span{font-size:0.78rem;color:var(--muted)}

nav{display:flex;gap:12px}
nav a{color:var(--muted);font-weight:600;padding:8px 10px;border-radius:8px}
nav a:hover,nav a:focus{color:var(--text);background:rgba(255,255,255,0.02);outline:none}
nav a:focus-visible{box-shadow:0 0 0 4px rgba(214,40,57,0.12)}

main{padding:36px 0 80px}
section{padding:36px 0}

.hero{min-height:calc(100vh - 160px);display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:transparent;color:var(--muted);font-weight:700;font-size:0.78rem}
.hero h1{margin-top:6px;font-family:"Barlow Condensed",sans-serif;font-size:clamp(2.6rem,5vw,4rem);line-height:1.02;color:var(--text)}
.hero h1 span{color:var(--brand)}
.hero p{margin-top:16px;color:var(--muted);font-size:1.02rem;max-width:680px}

.cta{margin-top:22px;display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:12px;padding:12px 18px;font-weight:700;cursor:pointer}
.btn.primary{background:linear-gradient(145deg,var(--brand),var(--brand-strong));color:#fff;box-shadow:0 10px 30px rgba(214,40,57,0.14)}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--text)}
.btn:focus-visible{box-shadow:0 10px 30px rgba(214,40,57,0.12)}

.hero-points{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.chip{border-radius:999px;padding:8px 12px;font-size:0.86rem;color:var(--muted);background:transparent;border:1px solid rgba(255,255,255,0.04)}

.panel{padding:20px;border-radius:var(--radius-lg);position:relative;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);box-shadow:var(--shadow-md)}
.splash-logo{width:100%;border-radius:10px;display:block;margin-bottom:12px;filter:brightness(1.03)}

.status{border-radius:10px;padding:12px;background:transparent;border:1px solid rgba(255,255,255,0.04);margin-bottom:10px}
.status h3{font-size:0.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em}
.status ul{margin-top:8px;list-style:none;display:grid;gap:8px}
.status li{display:flex;justify-content:space-between;color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px}
.ok{background:var(--accent)}.warn{background:#f59e0b}.danger{background:#ef4444}

.heading{display:flex;justify-content:space-between;align-items:end;gap:14px;margin-bottom:18px}
.heading h2{font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--text)}
.heading p{color:var(--muted);max-width:680px}
.kicker{font-size:0.74rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--muted);font-weight:800}

.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{border-radius:12px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.04);box-shadow:0 8px 30px rgba(2,6,23,0.5)}
.card h3{margin:6px 0 10px;font-size:1.05rem;color:var(--text)}
.card p{color:var(--muted);font-size:0.96rem}

.screenshots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.screenshot{width:100%;border-radius:10px;display:block;border:1px solid rgba(255,255,255,0.04)}

.list{margin-top:8px;list-style:none;display:grid;gap:8px;color:var(--muted);font-size:0.95rem}

.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.step{border-radius:12px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.04)}
.step b{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;background:rgba(255,255,255,0.02);margin-bottom:10px;font-weight:800;color:var(--brand)}
.step p{color:var(--muted);font-size:0.95rem;margin-top:6px}

.banner{border-radius:16px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);border:1px solid rgba(255,255,255,0.04);box-shadow:0 12px 30px rgba(2,6,23,0.45)}
.banner p{color:var(--muted);margin-top:6px}

footer{padding:28px 0;color:var(--muted);text-align:center}

@media (max-width:980px){.hero,.grid-3,.flow{grid-template-columns:1fr}.heading{flex-direction:column;align-items:start}}
@media (max-width:720px){.nav{border-radius:12px;flex-direction:column;align-items:start}.hero{min-height:auto}}

/* small helper */
code{background:rgba(255,255,255,0.02);padding:4px 8px;border-radius:6px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace}