:root{
  --bg:#060816;
  --panel:#0d1022;
  --panel-2:#12162d;
  --text:#f8fafc;
  --muted:#9ca3af;
  --line:rgba(255,255,255,.08);
  --primary:#7c3aed;
  --secondary:#3b82f6;
  --success:#22c55e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  background:radial-gradient(circle at top left, rgba(124,58,237,.16), transparent 30%),
             radial-gradient(circle at 80% 15%, rgba(59,130,246,.12), transparent 25%),
             var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{width:min(1180px, calc(100% - 32px)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(6,8,22,.65);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; justify-content:space-between; align-items:center; padding:18px 0}
.nav nav{display:flex; gap:22px; flex-wrap:wrap}
.nav a{color:#dbe4f1}
.logo{font-weight:800; letter-spacing:.02em}
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:42px;
  align-items:center; min-height:84vh; padding:56px 0 36px;
}
.eyebrow{
  display:inline-block;
  color:#c4b5fd;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-bottom:12px;
}
h1{font-size:clamp(42px,7vw,78px); line-height:.96; margin:0 0 18px}
h2{font-size:clamp(30px,4vw,48px); line-height:1.05; margin:0 0 14px}
h3{margin:0 0 10px; font-size:22px}
p{color:var(--muted); font-size:18px; line-height:1.65; margin:0}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 18px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:999px; font-weight:700;
  border:1px solid var(--line);
}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:white; box-shadow:0 12px 40px rgba(124,58,237,.25);
}
.btn-secondary{background:rgba(255,255,255,.04)}
.full{width:100%}
.hint-pill{
  display:inline-flex; gap:6px; align-items:center; margin-top:6px;
  padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.04);
  border:1px solid var(--line); color:#cbd5e1; font-size:13px;
}
.hint-pill a{text-decoration:underline}
.hero-trust{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.hero-trust span{
  font-size:13px; color:#d1d5db;
  padding:9px 12px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.03);
}
.glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:0 20px 80px rgba(0,0,0,.3);
  backdrop-filter:blur(18px);
}
.dashboard-preview{padding:22px}
.card-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; color:#e2e8f0}
.status-dot{width:10px; height:10px; border-radius:50%; background:var(--success); box-shadow:0 0 18px var(--success)}
.preview-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:20px}
.metric{
  padding:16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--line)
}
.metric strong{display:block; font-size:28px; margin-bottom:6px}
.metric span{color:var(--muted); font-size:14px}
.mini-chart{display:flex; align-items:flex-end; gap:8px; height:160px}
.bar{flex:1; border-radius:20px 20px 8px 8px; background:linear-gradient(180deg, #8b5cf6, #3b82f6)}
.h1{height:35%}.h2{height:55%}.h3{height:42%}.h4{height:80%}.h5{height:62%}.h6{height:70%}.h7{height:94%}
.section{padding:64px 0}
.section-heading{max-width:780px; margin-bottom:26px}
.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.feature-card{
  padding:24px; background:rgba(255,255,255,.035); border:1px solid var(--line);
  border-radius:22px;
}
.feature-card p{font-size:15px}
.demo-shell{padding:20px}
.demo-toolbar{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px
}
.demo-tabs,.demo-actions{display:flex; gap:10px; flex-wrap:wrap}
.demo-tab,.chip{
  background:rgba(255,255,255,.04); color:#e5e7eb; border:1px solid var(--line);
  padding:10px 14px; border-radius:999px; cursor:pointer;
}
.demo-tab.active,.chip.active{
  background:linear-gradient(135deg, rgba(124,58,237,.34), rgba(59,130,246,.28));
  border-color:rgba(124,58,237,.4);
}
.demo-layout{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
.demo-loads{display:grid; gap:14px}
.load-card{
  padding:18px; border-radius:22px; background:rgba(255,255,255,.04);
  border:1px solid var(--line); transition:transform .2s ease, border-color .2s ease;
}
.load-card:hover{transform:translateY(-3px); border-color:rgba(124,58,237,.45)}
.load-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.load-route{font-size:20px; font-weight:700; margin-bottom:6px}
.load-meta, .load-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.tag{
  font-size:12px; color:#dbe4f1; padding:7px 10px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid var(--line)
}
.load-price{font-size:26px; font-weight:800}
.side-card{
  padding:18px; border-radius:22px; background:rgba(255,255,255,.04); border:1px solid var(--line); margin-bottom:14px
}
.side-card p{font-size:15px}
.activity-feed{padding-left:18px; margin:0; color:#cbd5e1}
.activity-feed li{margin:0 0 10px; line-height:1.5}
.pulse-card{position:relative; overflow:hidden}
.pulse-card::after{
  content:""; position:absolute; inset:auto -20% -70% -20%; height:160px;
  background:radial-gradient(circle, rgba(124,58,237,.25), transparent 60%);
}
.value-split{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.value-card{
  padding:28px; border:1px solid var(--line); border-radius:24px; background:rgba(255,255,255,.035)
}
.value-card ul{margin:16px 0 0; padding-left:18px; color:#dbe4f1}
.value-card li{margin-bottom:10px}
.waitlist-card{
  display:grid; grid-template-columns:1fr .9fr; gap:24px; padding:28px
}
.waitlist-form{display:grid; gap:12px}
.waitlist-form input,.waitlist-form select{
  width:100%; padding:14px 16px; border-radius:16px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:white;
}
.waitlist-form input::placeholder{color:#94a3b8}
.small-note{color:#cbd5e1; margin-top:14px; font-size:14px}
.site-footer{padding:42px 0 60px; border-top:1px solid var(--line); margin-top:30px}
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:20px
}
.footer-grid h4{margin:0 0 12px}
.footer-grid p,.footer-grid a,.footer-grid span{
  display:block; color:var(--muted); margin-bottom:10px; font-size:15px
}
.bg-orb{
  position:fixed; border-radius:50%; filter:blur(80px); opacity:.25; pointer-events:none; z-index:-1
}
.orb-1{width:280px; height:280px; background:#7c3aed; top:80px; left:-60px}
.orb-2{width:260px; height:260px; background:#3b82f6; right:0; top:240px}
@media (max-width: 980px){
  .hero,.demo-layout,.waitlist-card,.footer-grid,.value-split{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 700px){
  .nav{gap:16px; align-items:flex-start; flex-direction:column}
  .feature-grid{grid-template-columns:1fr}
  .preview-grid{grid-template-columns:1fr 1fr}
  p{font-size:16px}
}