:root{
  --bg-start:#0e1216;
  --bg-end:#0a0d10;
  --text:#e7ebef;
  --muted:#a9b1bb;
  --accent:#18d286;
  --card:#12161ad9;
  --stroke:#20262c;
  --badge-shadow:0 4px 14px rgba(0,0,0,.35);
}
/* Light palette for theme toggle */
:root[data-theme="light"]{
  --bg-start:#eafff2;
  --bg-end:#f9fffb;
  --text:#0e1116;
  --muted:#4b5563;
  --accent:#16c77d;
  --card:#ffffffd9;
  --stroke:#e6eef1;
  --badge-shadow:0 2px 8px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(160deg,var(--bg-start),var(--bg-end));color:var(--text)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

.header{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 0 10px}
.logo-wrap{display:inline-flex;align-items:center;gap:18px;justify-content:center;width:100%}
.logo{width:min(560px,86vw);transform:rotate(10deg);transition:transform 600ms ease;filter:brightness(3.3) contrast(1.1)}
.logo:hover{transform:rotate(6deg) scale(1.01)}
:root[data-theme="light"] .logo{filter:brightness(1) contrast(1)}
.theme-toggle{
  appearance:none;border:1px solid var(--stroke);background:var(--card);color:var(--text);
  padding:10px 14px;border-radius:999px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px;
  position:absolute;top:12px;left:16px; right:auto;z-index:5;
}
.theme-toggle span{opacity:.8;font-size:14px}
.theme-toggle svg{width:18px;height:18px;}

.hero{position:relative;z-index:3;display:grid;grid-template-columns:1fr;place-items:center;text-align:center;padding:20px 0 48px}
.tagline{margin-top:10px;font-size:clamp(28px,6vw,44px);font-weight:800}
.subtitle{max-width:720px;margin:10px auto 20px;color:#ffffff;font-size:clamp(15px,2.2vw,18px)}
:root[data-theme="light"] .subtitle{color:#000000}

.cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.store-badge{height:64px;filter:drop-shadow(var(--badge-shadow));transition:transform .2s ease}
.store-badge:hover{transform:scale(1.05)}
.store-badge-coming-soon{position:relative;display:inline-block;opacity:.7;cursor:not-allowed}
.store-badge-coming-soon .store-badge{opacity:.7;filter:drop-shadow(var(--badge-shadow)) grayscale(20%)}
.store-badge-coming-soon .store-badge:hover{transform:none}
.coming-soon-label{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;padding:4px 12px;border-radius:12px;font-size:11px;font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.5px}

.features{margin:28px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px}
.feature{background:var(--card);backdrop-filter:blur(8px);border:1px solid var(--stroke);border-radius:14px;padding:16px;text-align:left}
.feature h3{margin:2px 0 8px;font-size:1.05rem}
.muted{color:var(--muted)}

.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:20px;margin:34px 0 0;backdrop-filter:blur(8px)}
.contact-section{text-align:left}
.contact-section h2{text-align:left}
.contact-section p{text-align:left}

.footer{border-top:1px solid var(--stroke);margin-top:42px}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:16px 0;gap:12px}
.footer .muted{font-size:14px}

/* Background scattered app screens */
.bg-stage{position:fixed;inset:0;overflow:hidden;z-index:1;pointer-events:none;}
.screen{position:absolute;opacity:.2;filter:blur(.4px) saturate(105%);transform:rotate(var(--rot)) scale(var(--scale));transition:transform 20s ease-in-out, opacity .4s ease;border-radius:24px;border:1px solid #0002;}
body:hover .screen{transform:translateY(-4px) rotate(var(--rot)) scale(calc(var(--scale) * 1.02));}

/* Desktop positions */
.scr1{top:6%;left:4%;--rot:-10deg;--scale:.38}
.scr2{top:12%;right:-2%;--rot:8deg;--scale:.42}
.scr3{bottom:-6%;left:10%;--rot:4deg;--scale:.44}
.scr4{bottom:8%;right:10%;--rot:-6deg;--scale:.36}
.scr5{top:42%;left:-6%;--rot:12deg;--scale:.40}

/* FAQ */
.faq{margin:36px auto 0;max-width:960px;width:100%}
.faq h2{margin:0 0 12px;font-size:clamp(22px,3.2vw,28px)}
.downloads-bottom{margin:36px auto 0;max-width:960px;width:100%;text-align:center}
.downloads-bottom h2{font-size:clamp(22px,3.2vw,28px);margin-bottom:16px}
.accordion{display:grid;gap:10px}
details.ac-item{background:var(--card);border:1px solid var(--stroke);border-radius:14px;padding:14px 18px}
details.ac-item[open]{box-shadow:0 6px 30px #0003}
.ac-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:700}
.ac-item summary::-webkit-details-marker{display:none}
.ac-item .q{display:flex;align-items:center;gap:10px}
.ac-item .q .dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}
.ac-item .a{margin-top:10px;color:var(--muted);line-height:1.6}

/* Mobile tuning */
@media (max-width: 900px){ .features{grid-template-columns:1fr;gap:12px} .screen{opacity:.18} }
@media (max-width: 640px){
  .store-badge{height:54px}
}
@media (prefers-reduced-motion: reduce){
  .logo,.screen,body:hover .screen { transition:none !important; }
}