*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:#060b14;color:#e8eef7;min-height:100%}
a{color:#93c5fd;text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:'DM Mono',monospace;font-size:.85rem;background:rgba(255,255,255,.08);padding:2px 8px;border-radius:6px}

.bg-mesh{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%,rgba(37,99,235,.35),transparent),
    radial-gradient(ellipse 50% 40% at 90% 10%,rgba(255,196,86,.15),transparent),
    radial-gradient(ellipse 40% 30% at 50% 100%,rgba(16,185,129,.1),transparent);
}

.site-header{
  position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px clamp(20px,5vw,48px);flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(12px);
}
.brand{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.25rem;color:#fff;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{border-radius:12px;box-shadow:0 8px 20px rgba(37,99,235,.3)}
.site-nav{display:flex;gap:20px}
.site-nav a{color:#9fb0c4;font-weight:600;font-size:.9rem}
.site-nav a:hover{color:#fff;text-decoration:none}
.version-tag{font-size:.72rem;font-weight:700;padding:6px 12px;border-radius:999px;background:rgba(255,196,86,.15);color:#fcd34d;border:1px solid rgba(255,196,86,.25)}

main{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,48px) 60px}

.hero{padding:48px 0 56px;text-align:center}
.hero-badge{
  display:inline-block;padding:8px 16px;border-radius:999px;
  background:rgba(59,130,246,.15);color:#93c5fd;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px;
  border:1px solid rgba(59,130,246,.25);
}
.hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.2rem,6vw,3.5rem);line-height:1.05;letter-spacing:-.04em;margin:0 0 20px}
.hero h1 span{background:linear-gradient(135deg,#ffc456,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-lead{max-width:640px;margin:0 auto 32px;color:#9fb0c4;font-size:1.05rem;line-height:1.65}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:14px;
  font-weight:700;font-size:.95rem;transition:transform .2s,box-shadow .2s;text-decoration:none;
}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn-primary{background:linear-gradient(135deg,#ffc456,#f59e0b);color:#1a1208;box-shadow:0 12px 32px rgba(245,158,11,.35)}
.btn-ghost{background:rgba(255,255,255,.08);color:#e8eef7;border:1px solid rgba(255,255,255,.12)}
.hero-stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}
.hero-stats strong{display:block;font-size:1.5rem;font-weight:800;color:#fff}
.hero-stats span{font-size:.72rem;color:#7d92ab;text-transform:uppercase;letter-spacing:.08em}

.apps,.features{padding:56px 0}
.apps h2,.features h2{font-family:'Space Grotesk',sans-serif;font-size:1.75rem;letter-spacing:-.03em;text-align:center;margin:0 0 8px}
.section-sub{text-align:center;color:#7d92ab;margin:0 0 36px;font-size:.95rem}

.app-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.app-card{
  display:flex;flex-direction:column;padding:28px 24px;border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);color:inherit;text-decoration:none;
  transition:transform .25s,box-shadow .25s,border-color .25s;
  position:relative;overflow:hidden;
}
.app-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .25s}
.app-card-passenger::before{background:linear-gradient(135deg,rgba(59,130,246,.2),transparent)}
.app-card-driver::before{background:linear-gradient(135deg,rgba(34,197,94,.2),transparent)}
.app-card-admin::before{background:linear-gradient(135deg,rgba(255,196,86,.2),transparent)}
.app-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.35);border-color:rgba(255,255,255,.18);text-decoration:none}
.app-card:hover::before{opacity:1}
.app-card-icon{font-size:2.2rem;margin-bottom:16px;position:relative}
.app-card h3{margin:0 0 10px;font-size:1.2rem;position:relative}
.app-card p{margin:0 0 20px;color:#9fb0c4;font-size:.88rem;line-height:1.55;flex:1;position:relative}
.app-card-link{font-weight:700;color:#ffc456;font-size:.88rem;position:relative}

.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feature{
  padding:22px;border-radius:18px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);transition:transform .2s;
}
.feature:hover{transform:translateY(-3px)}
.feature span{font-size:1.6rem;display:block;margin-bottom:12px}
.feature h4{margin:0 0 8px;font-size:.95rem}
.feature p{margin:0;color:#7d92ab;font-size:.82rem;line-height:1.5}

.demo-box,.start-box{
  margin:32px 0;padding:28px;border-radius:22px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
}
.demo-box h3,.start-box h3{margin:0 0 16px;font-size:1.1rem}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.demo-grid div{padding:16px;border-radius:14px;background:rgba(0,0,0,.2)}
.demo-grid strong{display:block;margin-bottom:8px;color:#ffc456;font-size:.85rem}
.demo-grid code{display:block;margin-top:6px;font-size:.8rem}
.start-box pre{margin:0;padding:16px;border-radius:12px;background:#0f172a;overflow:auto}
.start-box pre code{background:none;padding:0;color:#86efac}
.start-box p{margin:16px 0 0;color:#9fb0c4;font-size:.9rem}

.site-footer{
  position:relative;z-index:1;text-align:center;padding:32px 20px 48px;
  border-top:1px solid rgba(255,255,255,.06);color:#64748b;font-size:.82rem;
}
.site-footer p{margin:6px 0}

@media(max-width:900px){
  .app-cards,.feature-grid,.demo-grid{grid-template-columns:1fr}
  .site-nav{display:none}
}