*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { color-scheme: light dark; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);
  color: var(--text);
}


:root{
  --bg:#f6f8fc;
  --surface:rgba(255,255,255,0.8);
  --surface-solid:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --primary:#1d4ed8;
  --ring:rgba(29,78,216,0.35);
  --card:rgba(255,255,255,0.6);
  --card-solid:#ffffff;
  --border:rgba(15,23,42,0.08);
  --shadow:0 10px 30px rgba(2,6,23,0.08);
  --glass-blur:14px;

 
  --wave1:#3b82f6;
  --wave2:#22d3ee;
  --wave3:#8b5cf6;

 
  --cta1:#4f9bff;
  --cta2:#7c6dff;

  --link:#1d4ed8;
  --link-hover:#1641c0;
  --link-visited:#7c3aed;
}
[data-theme="dark"]{
  --bg:#0a0f1e;
  --surface:rgba(12,18,32,0.75);
  --surface-solid:#0f172a;
  --text:#e6eaf2;
  --muted:#4a6391;
  --primary:#93c5fd;
  --ring:rgba(147,197,253,0.35);
  --card:rgba(18,26,46,0.68);
  --card-solid:#121a2f;
  --border:rgba(148,163,184,0.16);
  --shadow:0 10px 30px rgba(0,0,0,0.45);

  --wave1:#60a5fa;
  --wave2:#34d399;
  --wave3:#a78bfa;

  --cta1:#93c5fd;
  --cta2:#c4b5fd;

  --link:#93c5fd;
  --link-hover:#bfdbfe;
  --link-visited:#c4b5fd;
}


body::before{
  content:"";
  position:fixed; inset:0;
  background:conic-gradient(from 180deg at 50% 50%, rgba(99,102,241,0.15), rgba(34,211,238,0.14), rgba(99,102,241,0.15));
  filter:blur(70px) saturate(120%);
  animation:spin 40s linear infinite;
  z-index:-3; pointer-events:none;
}
@keyframes spin{to{transform:rotate(360deg)}}

#bg-canvas{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  opacity:.6; mix-blend-mode:screen;
}
[data-theme="dark"] #bg-canvas{ opacity:.45; mix-blend-mode:lighten; }


a{
  color:var(--link);
  text-decoration:none;
  transition:color .2s ease;
}
a:hover{ color:var(--link-hover); }
a:visited{ color:var(--link-visited); }


header.navbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(var(--glass-blur));
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1120px; margin:0 auto; padding:12px 16px;
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:10px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; color:var(--text); letter-spacing:.2px; text-decoration:none; font-size:18px; min-width:0;
}
.brand .logo{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, var(--wave1), var(--wave3));
  display:grid; place-items:center; color:#fff; font-weight:800;
  box-shadow:var(--shadow); flex:0 0 auto;
}


nav.links{
  margin-left:auto; display:flex; gap:12px; align-items:center; flex-wrap:nowrap;
}
nav.links a{
  color:var(--muted);
  text-decoration:none;
  font-weight:500; white-space:nowrap;
  padding:8px 12px; border-radius:8px;
  transition:background-color .2s ease, color .2s ease;
}
nav.links a:hover{ color:var(--text); background-color:rgba(0,0,0,0.03); }
[data-theme="dark"] nav.links a:hover{ background-color:rgba(255,255,255,0.06); }


.btn{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--border);
  background:var(--card);
  padding:10px 14px; border-radius:12px; color:var(--text);
  font-weight:600; text-decoration:none;
  box-shadow:var(--shadow);
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s, filter .2s;
  touch-action:manipulation; cursor:pointer;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); filter:brightness(.98); }

.btn-primary{
  background:linear-gradient(135deg, var(--cta1), var(--cta2));
  color:#fff; border:none;
  box-shadow:0 10px 28px rgba(80,130,255,.30);
}
.btn-primary:hover{
  filter:brightness(1.06);
  box-shadow:0 12px 32px rgba(80,130,255,.40);
}
.btn-primary:active{ filter:brightness(.98); }

.icon{ width:18px; height:18px; display:inline-block; flex:0 0 auto; }


.theme-toggle{ cursor:pointer; transition:transform .2s ease; }
.theme-toggle:hover{ transform:rotate(15deg); }


.menu-toggle{
  display:none;
  border:1px solid var(--border);
  background:var(--card);
  padding:9px 12px; border-radius:12px;
  box-shadow:var(--shadow); color:var(--text); cursor:pointer;
}
.menu-toggle .icon{ width:20px; height:20px; }


.mobile-menu{
  position:absolute; top:100%; right:12px; left:12px;
  display:none;
  background:var(--surface-solid);
  border:1px solid var(--border);
  border-radius:14px; padding:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  z-index:100;
}
.mobile-menu.open{ display:grid; gap:8px; }
.mobile-menu a, .mobile-menu button{ width:100%; justify-content:center; text-align:center; }


.mobile-menu .btn:not(.btn-primary) {
  background: var(--card-solid);
  border-color: var(--border);
  color: var(--text);
}


.mobile-menu .btn-primary {
  background: linear-gradient(135deg, var(--cta1), var(--cta2));
  color: #fff !important;
  border: none;
  box-shadow: 0 10px 28px rgba(80, 130, 255, 0.30);
}


.mobile-menu a.btn,
.mobile-menu a.btn-primary {
  text-decoration: none;
  color: inherit;
}
.mobile-menu a.btn-primary {
  color: #fff !important;
}


.hero{
  position:relative; max-width:1120px;
  margin:24px auto 0; padding:28px 16px 110px;
  display:grid; gap:18px; text-align:center;
}
.hero h1{
  font-size:clamp(26px,6vw,48px);
  line-height:1.08; margin:0; color:var(--text); letter-spacing:-.02em; font-weight:800;
}
.hero p{
  margin:0 auto; color:var(--muted); max-width:780px;
  font-size:clamp(15px,3.6vw,18px); line-height:1.6;
}
.cta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px; }


.waves{
  position:absolute; left:0; right:0; bottom:-1px; height:150px; pointer-events:none;
}
.waves svg{ width:100%; height:100%; display:block; }
.waves .layer{ transform-origin:center; }
.waves .l1{ animation:wave 18s ease-in-out infinite alternate; }
.waves .l2{ animation:wave 22s ease-in-out infinite alternate-reverse; opacity:.8; }
.waves .l3{ animation:wave 26s ease-in-out infinite alternate; opacity:.6; }
@keyframes wave{ 0%{ transform:translateX(-2%);} 100%{ transform:translateX(2%);} }


.badges{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.store-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:12px;
  background:var(--card); color:var(--text);
  border:1px solid var(--border);
  text-decoration:none; font-weight:600;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.store-badge:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(2,6,23,.12); }


.features{
  max-width:1120px; margin:30px auto; padding:0 16px 60px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px; padding:24px 20px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(var(--glass-blur));
  display:grid; gap:12px; min-height:100%;
  transition:transform .3s ease, box-shadow .3s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:0 15px 35px rgba(2,6,23,.12); }
.card h3{ margin:2px 0 0; color:var(--text); font-size:20px; font-weight:700; }
.card p{ margin:0; color:var(--muted); font-size:15px; line-height:1.5; }
.card .card-icon{
  width:48px; height:48px; border-radius:12px;
  display:grid; place-items:center; color:#fff; font-weight:700;
  background:linear-gradient(135deg, var(--wave2), var(--wave3));
  box-shadow:var(--shadow); font-size:20px;
}


.download{
  max-width:1120px; margin:0 auto 34px; padding:0 16px;
  display:grid; gap:12px; justify-items:center; text-align:center;
}
.download h2{ margin:0; color:var(--text); font-size:32px; font-weight:700; }
.download .note{ color:var(--muted); font-size:16px; max-width:600px; line-height:1.5; }


footer{
  border-top:1px solid var(--border);
  background:var(--surface);
  backdrop-filter:blur(var(--glass-blur));
  margin-top:40px;
}
.footer-inner{
  max-width:1120px; margin:0 auto; padding:24px 16px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  color:var(--muted); font-size:14px;
}
.footer-spacer{ flex:1 1 auto; }
.social a{
  color:var(--muted); text-decoration:none; margin-right:16px;
  transition:color .2s ease;
}
.social a:hover{ color:var(--primary); }


.modal-backdrop{
  position:fixed; inset:0; display:none;
  background:rgba(2,6,23,0.5);
  backdrop-filter:blur(4px);
  z-index:1000; align-items:center; justify-content:center; padding:16px;
}
.modal-backdrop.open{ display:flex; }
.modal{
  width:100%; max-width:420px;
  background:var(--surface-solid);
  border:1px solid var(--border);
  border-radius:16px; box-shadow:var(--shadow);
  padding:24px; animation:modalFadeIn .3s ease;
}
@keyframes modalFadeIn{ from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:translateY(0)} }
.modal h2{ margin:0 0 6px; color:var(--text); font-size:24px; }
.modal p{ margin:0 0 16px; color:var(--muted); line-height:1.5; }
.modal .field{ display:grid; gap:6px; margin-bottom:16px; }
.modal label{ font-weight:500; color:var(--text); font-size:14px; }
.modal input{
  padding:12px; border-radius:10px; border:1px solid var(--border);
  background:var(--card-solid); color:var(--text);
  outline:none; font-size:16px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.modal input:focus{ box-shadow:0 0 0 4px var(--ring); border-color:transparent; }
.modal .row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.modal .actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.modal .divider{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin:16px 0;
  color:var(--muted); font-size:12px;
}
.modal .divider::before, .modal .divider::after{ content:""; height:1px; background:var(--border); }
.kbd{ border:1px solid var(--border); border-bottom-width:2px; padding:2px 8px; border-radius:6px; font-size:12px; color:var(--muted); background:var(--surface-solid); }
.error{ color:#ef4444; font-size:13px; display:none; margin-top:4px; }
.error.show{ display:block; }


.modal a{
  color:var(--link) !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
}


.hide-sm{ display:none; }
@media (min-width:720px){
  .hide-sm{ display:inline-flex; }
  .features{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .features{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:719.98px){
  nav.links{ display:none; }
  .menu-toggle{ display:inline-flex; margin-left:auto; }
  .nav-inner{ grid-template-columns:auto auto; }
  .waves{ height:100px; }
  .hero{ padding:22px 14px 90px; }
  .btn, .store-badge{ padding:12px 14px; border-radius:14px; }
  .btn .icon, .store-badge .icon{ width:20px; height:20px; }
  .features{ grid-template-columns:1fr; }
  .footer-inner{ flex-direction:column; text-align:center; }
  .footer-spacer{ display:none; }
}


@media (prefers-reduced-motion:reduce){
  .waves .l1, .waves .l2, .waves .l3{ animation:none; }
  body::before{ animation:none; }
  .card, .btn, .store-badge, .theme-toggle{ transition:none; }
}