:root{
  --bg:#0b1220;
  --fg:#eef2ff;
  --muted:rgba(148,163,184,.85);
  --card:rgba(255,255,255,.06);
  --accent:#38bdf8;
  --accentText:#081018;
  --accentBorder:rgba(56,189,248,.38);
  --accentGlow:rgba(56,189,248,.18);
  --border:rgba(148,163,184,.18);
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:radial-gradient(1200px 500px at 15% 0%, rgba(56,189,248,.14), transparent 60%),var(--bg);color:var(--fg)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}

/* Header */
.top{position:sticky;top:0;z-index:20;background:rgba(11,18,32,.78);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{font-weight:850;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px}
.brand img{display:block;max-height:34px;width:auto}
.links{display:flex;gap:14px;flex-wrap:wrap}
.links a{opacity:.9;padding:6px 8px;border-radius:10px}
.links a:hover{opacity:1;background:rgba(255,255,255,.05)}
.cta{display:flex;gap:10px;align-items:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;background:var(--accent);color:var(--accentText);font-weight:750;border:1px solid rgba(0,0,0,.08)}
.btn:hover{filter:brightness(.97)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid rgba(255,255,255,.18)}
.btn.ghost:hover{background:rgba(255,255,255,.05)}

/* Layout */
main.wrap{padding-top:10px}
main.wrap > section{padding:72px 0}
main.wrap > section.hero{padding:64px 0 44px}
main.wrap > section + section{border-top:1px solid var(--border)}

h1,h2{letter-spacing:-.02em}
h1{font-size:44px;line-height:1.04;margin:0 0 12px;max-width:18ch}
h2{font-size:28px;margin:0 0 10px}
.lead{font-size:18px;opacity:.92;max-width:72ch;margin:0}

/* Hero */
.hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero-right{perspective:1200px}
.hero-cta{display:flex;gap:12px;margin:18px 0 18px;flex-wrap:wrap}
.hero-points{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);font-size:13px;color:rgba(226,232,240,.95)}

/* App preview */
.app-preview{border-radius:16px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));box-shadow:0 22px 70px rgba(0,0,0,.38);overflow:hidden}
.app-preview--img{position:relative;overflow:visible;background:none;border-color:rgba(255,255,255,.16);padding:10px;border-radius:18px}
.app-preview--img::before{content:"";position:absolute;inset:-26px;border-radius:26px;z-index:0;opacity:.9;filter:blur(18px);background:
  radial-gradient(560px 260px at 25% 10%, rgba(56,189,248,.22), transparent 60%),
  radial-gradient(420px 240px at 80% 85%, rgba(167,139,250,.16), transparent 60%),
  radial-gradient(420px 240px at 55% 60%, rgba(255,255,255,.08), transparent 62%)}
.app-mock{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--accentBorder);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 22px 60px rgba(0,0,0,.35), 0 18px 80px var(--accentGlow);background:#0b1220}

@media (hover:hover) and (pointer:fine){
  .app-preview--img{transition:transform .18s ease, filter .18s ease}
  .app-preview--img:hover{transform:translateY(-6px) rotateX(2deg) rotateY(-2deg)}
}
.app-top{height:44px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.dot{width:8px;height:8px;border-radius:99px;background:rgba(226,232,240,.35)}
.app-title{margin-left:8px;font-size:13px;font-weight:800;color:rgba(226,232,240,.86)}
.app-body{padding:14px;display:grid;gap:10px}
.app-card{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.10);border-radius:14px;padding:12px}
.app-line{height:10px;border-radius:99px;background:rgba(226,232,240,.18);margin:8px 0}
.w35{width:35%}.w40{width:40%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w70{width:70%}.w72{width:72%}.w75{width:75%}.w78{width:78%}.w80{width:80%}.w85{width:85%}.w88{width:88%}.w90{width:90%}.w92{width:92%}.w95{width:95%}.w96{width:96%}

/* Cards + grids */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0}
.hero-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.card h3{margin:0 0 8px;font-size:16px}
.card p{margin:0;opacity:.92}
.card label{display:block;margin-top:10px;margin-bottom:6px;opacity:.85}
.card input,.card textarea{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:rgba(0,0,0,.10);color:inherit}

/* Pricing */
.price{display:flex;align-items:baseline;gap:10px;margin:10px 0 12px}
.money{font-size:32px;font-weight:900}
.bullets{margin:0;padding-left:18px;opacity:.95}
.bullets li{margin:6px 0}
.card.pop{border-color:rgba(56,189,248,.40);box-shadow:0 18px 70px rgba(56,189,248,.10)}

/* Footer */
.foot{padding:36px 0 46px;opacity:.95;border-top:1px solid var(--border);margin-top:26px}
.foot-grid{display:grid;grid-template-columns:1.1fr 1.9fr;gap:22px;align-items:start}
.foot-brand{display:grid;gap:10px}
.foot-logo{font-weight:900;letter-spacing:.2px}
.foot-h{font-size:12px;text-transform:uppercase;letter-spacing:.12em;opacity:.72;margin-bottom:8px}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:16px}
.foot-col a{display:block;padding:6px 0;opacity:.88}
.foot-col a:hover{opacity:1;text-decoration:underline}
.foot-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.foot-social a{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--border);border-radius:999px;opacity:.92}
.foot-social a:hover{opacity:1;background:rgba(255,255,255,.06)}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:16px;border-top:1px solid var(--border)}

/* Responsive */
@media (max-width: 920px){
  .hero-split{grid-template-columns:1fr;gap:18px}
  h1{max-width:none;font-size:36px}
  .links{display:none}
  .foot-grid{grid-template-columns:1fr;gap:18px}
  .foot-cols{grid-template-columns:repeat(2,minmax(150px,1fr))}
}
@media (max-width: 520px){
  .cta .btn.ghost{display:none}
  h1{font-size:32px}
  .nav{padding:12px 0}
}

/* Notices (used for contact form feedback) */
.notice{margin:14px 0;padding:12px 14px;border:1px solid rgba(15,23,42,.12);border-radius:12px;background:#fff}
.notice.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.notice.err{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}


/* Light/Dark toggle */
.mode-toggle{border:1px solid var(--line, var(--accentBorder, rgba(0,0,0,.15)));background:var(--panel, var(--card));color:inherit;border-radius:999px;padding:8px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow2, none)}
.mode-toggle:hover{filter:brightness(.98)}
.mode-glyph-sun,.mode-glyph-moon{font-size:14px;line-height:14px}
html[data-mode="dark"] .mode-glyph-sun{opacity:.35}
html[data-mode="light"] .mode-glyph-moon{opacity:.35}

/* MODE VAR OVERRIDES */
html[data-mode="light"]{
  --bg:#f6f8fb;
  --fg:#0f172a;
  --muted:rgba(71,85,105,.86);
  --card:rgba(15,23,42,.04);
  --accentText:#081018;
  --border:rgba(15,23,42,.12);
  --accentBorder:rgba(15,23,42,.12);
  --accentGlow:rgba(15,23,42,.08);
}
html[data-mode="dark"]{
  /* keep defaults from :root (dark) */
}

/* Light mode header/nav contrast */
html[data-mode="light"] .top{background:rgba(255,255,255,.88)}
html[data-mode="light"] .links a{color:rgba(15,23,42,.86);opacity:1}
html[data-mode="light"] .links a:hover{background:rgba(15,23,42,.06)}

/* Mode toggle (match dashboard style) */
.mode-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;}
.mode-toggle:hover{transform:translateY(-1px);}
.mode-toggle:active{transform:translateY(0);}
.mode-toggle .mode-glyph{font-size:16px;line-height:1;display:none;}
html[data-mode="dark"] .mode-glyph-moon{display:inline;}
html[data-mode="light"] .mode-glyph-sun{display:inline;}