:root {
  --bg: #07111f;
  --bg-soft: #0c1828;
  --card: rgba(255,255,255,.075);
  --card-strong: rgba(255,255,255,.11);
  --line: rgba(255,255,255,.13);
  --text: #f6f8fb;
  --muted: #9dacbf;
  --accent: #52e0a4;
  --accent-2: #72a7ff;
  --danger: #ff6e78;
  --warning: #ffc96a;
  --shadow: 0 26px 60px rgba(0,0,0,.35);
  --radius: 26px;
  --nav-h: 76px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(82,224,164,.13), transparent 34%),
    radial-gradient(circle at 100% 30%, rgba(114,167,255,.12), transparent 32%),
    linear-gradient(180deg,#07111f 0%,#081522 48%,#06101c 100%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Gujarati", "Noto Sans Devanagari", Arial, sans-serif;
  overflow-x: hidden;
}
button,input,select,textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(82,224,164,.42); outline-offset: 2px; }

.ambient { position: fixed; pointer-events: none; border-radius: 999px; filter: blur(70px); opacity: .24; z-index: 0; }
.ambient-one { width: 260px; height: 260px; background: #25db9b; left: -140px; top: 20%; }
.ambient-two { width: 320px; height: 320px; background: #4c83ed; right: -180px; bottom: 8%; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: 72px; padding: max(12px, env(safe-area-inset-top)) 18px 10px;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg,rgba(7,17,31,.94),rgba(7,17,31,.72),transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: var(--accent); background: rgba(82,224,164,.1); border: 1px solid rgba(82,224,164,.26); border-radius: 13px; box-shadow: inset 0 0 22px rgba(82,224,164,.08); }
.brand-mark svg { width: 28px; }
.brand b { display: block; letter-spacing: -.02em; font-size: 16px; }
.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 1px; letter-spacing: .08em; text-transform: uppercase; }
.top-actions { display: flex; gap: 8px; }
.icon-btn,.close-btn { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.055); display: grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { position: relative; z-index: 1; width: min(100%, 640px); margin: 0 auto; padding: 4px 16px calc(var(--nav-h) + 34px + env(safe-area-inset-bottom)); }
.view { animation: reveal .45s cubic-bezier(.2,.8,.2,1); }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } to { opacity:1; transform:none; } }

.hero { padding: 18px 2px 8px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.hero h1 { margin: 0; font-size: clamp(34px,9vw,58px); line-height: .98; letter-spacing: -.055em; max-width: 560px; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-copy { margin: 18px 0 0; max-width: 520px; color: var(--muted); font-size: 16px; line-height: 1.62; }

.hero-visual { position: relative; margin: 24px 0 18px; min-height: 330px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); border-radius: 34px; box-shadow: var(--shadow); }
.road-lines { position:absolute; inset:0; opacity:.2; background: repeating-linear-gradient(90deg,transparent 0 62px,rgba(255,255,255,.15) 62px 64px,transparent 64px 126px); transform: perspective(300px) rotateX(60deg) scale(1.6); transform-origin:center bottom; }
.car-shell { position: relative; width: 250px; height: 126px; border-radius: 70px 70px 35px 35px; background: linear-gradient(160deg,#dfe8f4,#8799b0 52%,#53657b); box-shadow: 0 35px 55px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,255,255,.4); transform: translateY(18px); }
.car-shell::before { content:""; position:absolute; width:150px; height:65px; left:50px; top:-38px; border-radius:70px 70px 15px 15px; background:linear-gradient(150deg,#9bb3ca,#35455b 64%); border:3px solid rgba(255,255,255,.25); }
.car-shell::after { content:""; position:absolute; inset:46px 18px 14px; border-radius:27px; border-top:2px solid rgba(255,255,255,.35); }
.wheel { position:absolute; bottom:-19px; width:52px; height:52px; border-radius:50%; background:#0b0f15; border:8px solid #1d2632; box-shadow:inset 0 0 0 3px #65768a; }
.wheel.left { left:31px; } .wheel.right { right:31px; }
.qr-sticker { position:absolute; right:27px; top:39px; width:74px; background:#fff; color:#07111f; border-radius:12px; padding:8px; transform:rotate(-2deg); box-shadow:0 10px 24px rgba(0,0,0,.28); }
.qr-sticker img { width:100%; display:block; border-radius:3px; }
.qr-sticker span { display:block; text-align:center; margin-top:5px; font-size:7px; font-weight:900; letter-spacing:.04em; }
.scan-beam { position:absolute; z-index:2; width:100px; height:2px; right:12px; top:35px; background:var(--accent); box-shadow:0 0 15px var(--accent),0 0 40px var(--accent); animation:scan 2.2s ease-in-out infinite; }
@keyframes scan { 0%,100%{ transform:translateY(0); opacity:.35} 50%{transform:translateY(72px);opacity:1} }
.floating-chip { position:absolute; padding:10px 13px; border-radius:14px; border:1px solid var(--line); background:rgba(7,17,31,.84); backdrop-filter:blur(12px); font-size:12px; font-weight:750; box-shadow:0 14px 30px rgba(0,0,0,.25); }
.floating-chip.a { top:23px; left:19px; } .floating-chip.b { right:18px; bottom:21px; color:var(--accent); }

.cta-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin:18px 0; }
.btn { min-height:56px; border:0; border-radius:18px; padding:15px 18px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; transition:transform .18s ease,filter .18s ease,background .18s ease; }
.btn:active { transform:scale(.975); }
.btn-primary { background:var(--accent); color:#062118; box-shadow:0 13px 30px rgba(82,224,164,.2); }
.btn-secondary { background:rgba(255,255,255,.075); border:1px solid var(--line); }
.btn-danger { background:rgba(255,110,120,.13); color:#ffafb5; border:1px solid rgba(255,110,120,.22); }
.btn-small { min-height:44px; border-radius:14px; padding:11px 14px; font-size:13px; }
.btn.full { width:100%; }

.section { margin:28px 0 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:13px; }
.section-head h2,.panel h2 { margin:0; font-size:24px; letter-spacing:-.03em; }
.section-head p { color:var(--muted); margin:5px 0 0; font-size:13px; }
.text-link { color:var(--accent); border:0; background:none; font-weight:800; padding:6px; cursor:pointer; }

.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.feature-card,.panel,.vehicle-card,.issue-card,.stat-card,.alert-card,.sticker-card { border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); border-radius:var(--radius); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.feature-card { padding:18px; min-height:154px; }
.feature-icon { width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:rgba(82,224,164,.1);color:var(--accent);font-size:21px;margin-bottom:19px; }
.feature-card h3 { margin:0 0 7px; font-size:15px; }
.feature-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }

.panel { padding:19px; margin:14px 0; }
.panel-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:17px; }
.status-badge { display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 10px;background:rgba(82,224,164,.1);border:1px solid rgba(82,224,164,.2);color:var(--accent);font-weight:800;font-size:11px; }
.status-badge::before { content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor; }

.vehicle-card { padding:22px; position:relative; overflow:hidden; }
.vehicle-card::after { content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:rgba(82,224,164,.08);right:-50px;top:-55px; }
.vehicle-meta { display:flex; gap:15px; align-items:center; position:relative;z-index:1; }
.vehicle-avatar { width:62px;height:62px;border-radius:20px;background:linear-gradient(145deg,rgba(82,224,164,.17),rgba(114,167,255,.14));display:grid;place-items:center;font-size:30px;border:1px solid var(--line); }
.vehicle-title { margin:0;font-size:21px;letter-spacing:-.03em; }
.vehicle-number { display:inline-block;margin-top:7px;padding:6px 9px;border-radius:9px;background:#f7f8fa;color:#0c1520;font-weight:900;letter-spacing:.1em;font-size:12px; }
.vehicle-sub { color:var(--muted);font-size:12px;margin:7px 0 0; }
.privacy-note { margin:17px 0 0;padding:12px 13px;border-radius:15px;background:rgba(82,224,164,.075);color:#bfeeda;font-size:12px;line-height:1.5;border:1px solid rgba(82,224,164,.13); }

.issue-list { display:grid;gap:10px;margin:14px 0; }
.issue-card { width:100%;text-align:left;padding:15px 15px;display:flex;align-items:center;gap:13px;cursor:pointer;transition:transform .15s ease,border-color .15s ease; }
.issue-card:active { transform:scale(.985); }
.issue-card:hover { border-color:rgba(82,224,164,.35); }
.issue-emoji { width:48px;height:48px;border-radius:17px;display:grid;place-items:center;font-size:24px;background:rgba(255,255,255,.055); }
.issue-text { flex:1; }
.issue-text b { display:block;font-size:14px;margin-bottom:4px; }
.issue-text span { display:block;color:var(--muted);font-size:11px;line-height:1.4; }
.issue-arrow { color:var(--muted);font-size:20px; }
.issue-card.emergency { border-color:rgba(255,110,120,.22);background:linear-gradient(145deg,rgba(255,110,120,.11),rgba(255,255,255,.025)); }
.issue-card.emergency .issue-text b { color:#ffadb4; }

.notice { padding:13px 15px;border:1px solid rgba(255,201,106,.18);background:rgba(255,201,106,.075);border-radius:16px;color:#f5ddb0;font-size:12px;line-height:1.55;margin:14px 0; }
.notice strong { color:#ffe9c1; }

.form-grid { display:grid;gap:12px; }
.field { display:grid;gap:7px; }
.field label { font-size:11px;color:#c3cddd;font-weight:800;letter-spacing:.06em;text-transform:uppercase; }
.field input,.field select,.field textarea { width:100%;border:1px solid var(--line);border-radius:15px;background:rgba(0,0,0,.14);color:var(--text);padding:14px 14px;min-height:50px; }
.field input::placeholder,.field textarea::placeholder { color:#6e7c90; }
.field select option { color:#111; }
.two-col { display:grid;grid-template-columns:1fr 1fr;gap:11px; }
.field-help { color:var(--muted);font-size:10px;line-height:1.45; }

.stats { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0; }
.stat-card { padding:14px 10px;text-align:center; }
.stat-card b { display:block;font-size:22px;letter-spacing:-.03em; }
.stat-card span { color:var(--muted);font-size:10px; }
.alert-list { display:grid;gap:10px;margin:12px 0; }
.alert-card { padding:15px; }
.alert-top { display:flex;justify-content:space-between;gap:10px;align-items:flex-start; }
.alert-top b { font-size:13px; }
.alert-time { color:var(--muted);font-size:10px;white-space:nowrap; }
.alert-card p { margin:8px 0 0;color:var(--muted);font-size:11px;line-height:1.45; }
.reply-row { display:flex;gap:7px;overflow-x:auto;padding:11px 0 1px;scrollbar-width:none; }
.reply-row::-webkit-scrollbar { display:none; }
.reply-chip { flex:0 0 auto;border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:999px;padding:9px 11px;font-size:10px;font-weight:800;cursor:pointer; }
.reply-chip.active { background:rgba(82,224,164,.12);color:var(--accent);border-color:rgba(82,224,164,.2); }
.empty { text-align:center;padding:28px 15px;color:var(--muted); }
.empty-icon { font-size:34px;margin-bottom:8px; }

.sent-state { text-align:center;padding:28px 10px 10px; }
.pulse-icon { width:84px;height:84px;margin:0 auto 18px;border-radius:28px;background:rgba(82,224,164,.12);display:grid;place-items:center;font-size:39px;color:var(--accent);position:relative; }
.pulse-icon::after { content:"";position:absolute;inset:-9px;border:1px solid rgba(82,224,164,.35);border-radius:34px;animation:pulse 1.8s ease-out infinite; }
@keyframes pulse { 0%{transform:scale(.85);opacity:.75} 100%{transform:scale(1.32);opacity:0} }
.sent-state h2 { margin:0 0 9px; }
.sent-state p { margin:0 auto;color:var(--muted);line-height:1.55;max-width:380px; }
.live-status { margin:18px 0;padding:14px;border-radius:17px;background:rgba(114,167,255,.1);border:1px solid rgba(114,167,255,.18);color:#c5d9ff;font-weight:700;font-size:13px; }

.sticker-wrap { display:grid;place-items:center;padding:12px 0 4px; }
.sticker-card { width:min(100%,360px);background:#f8fafc;color:#101924;padding:19px;border-radius:28px;box-shadow:0 30px 70px rgba(0,0,0,.38);position:relative;overflow:hidden; }
.sticker-card::before { content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:#dcfff1;right:-45px;top:-65px; }
.sticker-top { display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1; }
.sticker-brand { display:flex;align-items:center;gap:8px;font-weight:900; }
.sticker-brand-mark { width:31px;height:31px;border-radius:10px;background:#07111f;color:#52e0a4;display:grid;place-items:center;font-size:17px; }
.sticker-id { font-size:9px;color:#728096;font-weight:800;letter-spacing:.08em; }
.sticker-main { display:grid;grid-template-columns:1fr 124px;gap:14px;align-items:center;margin-top:18px;position:relative;z-index:1; }
.sticker-copy h3 { margin:0 0 9px;font-size:25px;line-height:1.05;letter-spacing:-.045em; }
.sticker-copy p { margin:0;color:#667385;font-size:11px;line-height:1.5; }
.sticker-copy strong { color:#111c2b; }
.sticker-qr { background:#fff;border:1px solid #dfe5ec;border-radius:17px;padding:9px;box-shadow:0 10px 24px rgba(21,31,44,.08); }
.sticker-qr img { width:100%;display:block; }
.sticker-footer { display:flex;align-items:center;justify-content:space-between;margin-top:17px;padding-top:13px;border-top:1px dashed #d6dde5;font-size:9px;color:#667385;position:relative;z-index:1; }
.sticker-footer b { color:#0d1826; }
.color-dots { display:flex;gap:7px;margin:12px 0; }
.color-dot { width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.18);cursor:pointer; }

.bottom-nav { position:fixed;z-index:40;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 20px),620px);height:var(--nav-h);padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:rgba(7,17,31,.88);border:1px solid var(--line);border-radius:25px;box-shadow:0 24px 55px rgba(0,0,0,.43);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }
.nav-item { border:0;border-radius:18px;background:transparent;color:var(--muted);display:grid;place-items:center;align-content:center;gap:3px;font-size:9px;font-weight:800;cursor:pointer; }
.nav-icon { font-size:20px;line-height:1; }
.nav-item.active { color:var(--text);background:rgba(255,255,255,.075); }
.nav-item.active .nav-icon { color:var(--accent); }

.toast { position:fixed;z-index:80;left:50%;bottom:calc(var(--nav-h) + 28px + env(safe-area-inset-bottom));transform:translate(-50%,20px);width:min(calc(100% - 32px),440px);padding:13px 16px;border-radius:16px;background:#eafdf5;color:#082117;box-shadow:0 18px 45px rgba(0,0,0,.4);font-weight:800;font-size:12px;opacity:0;pointer-events:none;transition:.25s ease; }
.toast.show { opacity:1;transform:translate(-50%,0); }

.sheet-dialog { width:100%;max-width:none;height:auto;margin:auto 0 0;border:0;padding:0;background:transparent;color:var(--text); }
.sheet-dialog::backdrop { background:rgba(0,0,0,.62);backdrop-filter:blur(4px); }
.sheet-card { width:min(100%,640px);margin:0 auto;background:#0b1726;border:1px solid var(--line);border-radius:28px 28px 0 0;padding:11px 18px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.45); }
.grabber { width:42px;height:4px;border-radius:999px;background:#526075;margin:0 auto 17px; }
.sheet-head { display:flex;align-items:center;justify-content:space-between; }
.sheet-head h2 { margin:0;font-size:23px; }
.close-btn { font-size:25px;line-height:1; }
.language-grid { display:grid;gap:9px;margin-top:18px; }
.language-grid button { border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:17px;padding:14px 16px;text-align:left;display:flex;justify-content:space-between;cursor:pointer; }
.language-grid span { color:var(--muted);font-size:12px; }

.demo-ribbon { display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:rgba(114,167,255,.11);border:1px solid rgba(114,167,255,.2);color:#bad1ff;font-size:10px;font-weight:800; }
.divider { height:1px;background:var(--line);margin:18px 0; }
.code-block { padding:13px;border-radius:15px;background:rgba(0,0,0,.18);border:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#bcebd8;overflow-wrap:anywhere; }
.mini-list { margin:0;padding-left:18px;color:var(--muted);font-size:12px;line-height:1.65; }

@media (min-width: 700px) {
  .topbar { padding-left:calc((100% - 640px)/2);padding-right:calc((100% - 640px)/2); }
  .app-shell { padding-left:20px;padding-right:20px; }
  .feature-grid { grid-template-columns:repeat(4,1fr); }
  .feature-card { min-height:170px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size:42px; }
  .hero-visual { min-height:300px; }
  .car-shell { transform:scale(.86) translateY(20px); }
  .sticker-main { grid-template-columns:1fr 106px; }
  .sticker-copy h3 { font-size:22px; }
  .two-col { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important; }
}