:root {
  --bg:#0B1220; --panel:#0F172A; --text:#E2E8F0; --muted:#94A3B8; --border:#1E293B;
  --accent:#2DD4BF; --accent-hover:#14B8A6; --success:#22C55E;
}
html[data-theme="light"]{
  --bg:#F8FAFC; --panel:#FFFFFF; --text:#0F172A; --muted:#334155; --border:#E2E8F0;
  --accent:#14B8A6; --accent-hover:#0D9488; --success:#16A34A;
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
a{text-decoration:none;color:inherit}

.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(2,6,23,.7);backdrop-filter:blur(6px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo{color:var(--accent)}
.nav{display:flex;align-items:center;gap:14px}
.nav a{color:#cbd5e1}
.nav a:hover{color:var(--text)}
.toggle{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:999px;padding:6px 10px;cursor:pointer}
.toggle:focus-visible,.btn:focus-visible,.card:focus-visible,.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.wrap{max-width:1120px;margin:0 auto;padding:24px 16px 64px}
.hero{text-align:center;padding:32px 0 8px}
.hero h1{font-size:clamp(26px,3.2vw,40px);margin:4px 0 8px}
.sub{color:var(--muted);max-width:720px;margin:0 auto}
.actions{display:flex;justify-content:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;font-weight:700;border:1px solid transparent}
.btn-accent{background:var(--accent);color:#04221f}
.btn-accent:hover{background:var(--accent-hover)}
.link{color:var(--accent);padding:12px 8px}
.link:hover{color:var(--accent-hover)}

.badges{margin:24px auto 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:900px}
.badge{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid color-mix(in oklab,var(--border),var(--accent) 10%);background:color-mix(in oklab,var(--panel),var(--accent) 5%);border-radius:999px;font-size:14px;justify-content:center}
.dot{width:8px;height:8px;background:var(--success);border-radius:999px;display:inline-block}
@media (max-width:720px){.badges{grid-template-columns:1fr}}

.tools{margin-top:24px}
.tools h2{font-size:28px;margin:8px 0 12px;text-align:center}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:720px){.grid{grid-template-columns:1fr}}
.card{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;transition:border-color .2s}
.card:hover{border-color:var(--accent)}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:var(--muted)}
.icon{color:var(--accent)}
.card:hover .icon{color:var(--accent-hover)}

.how{margin-top:28px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
.how h2{font-size:22px;margin:4px 0 12px;text-align:center}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:720px){.steps{grid-template-columns:1fr}}
.step{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:12px;padding:12px}
.emoji{font-size:22px}
.step-sub{font-size:12px;color:var(--muted);margin-bottom:2px}
.step h3{margin:0;font-size:16px}

.why{margin-top:28px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px}
.why h2{font-size:22px;margin:4px 0 12px}

.faq{margin-top:28px}
.faq h2{font-size:22px;margin:4px 0 12px;text-align:center}
.faq-item{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 16px;margin-bottom:10px}
.faq-item>summary{cursor:pointer;font-weight:600;list-style:none}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::after{content:"⌄";float:right;transition:transform .2s}
.faq-item[open]>summary::after{transform:rotate(180deg)}
.faq-item p{margin:8px 0 0;color:var(--muted)}

.footer{border-top:1px solid var(--border);padding:16px;color:#9aa7b8}
.foot-wrap{max-width:1120px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.foot-links{display:flex;gap:16px}
.foot-links a{color:#cbd5e1}
.foot-links a:hover{color:var(--text)}
.copy{color:var(--muted)}

/* Reusable dropzone */
.dropzone {
position: relative;
display: grid; place-items: center;
min-height: 160px; padding: 16px;
border: 1.5px dashed var(--border);
border-radius: 14px;
background: radial-gradient(1200px 200px at 20% -30%, rgba(45,212,191,.08), transparent 70%), #0b1325;
color: var(--text); text-align: center;
transition: border-color .2s, box-shadow .2s, background .2s;
cursor: pointer;
}
.dropzone:hover { border-color: var(--accent); }
.dropzone.is-dragover {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%);
background: linear-gradient(0deg, rgba(45,212,191,.06), rgba(45,212,191,.06)), #0b1325;
}
.dropzone__icon { margin-bottom: 8px; color: #94a3b8; }
.dropzone__title { font-weight: 700; }
.dropzone__hint { color: var(--muted); font-size: 12px; }
.dropzone__files { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.dropzone__chip { border:1px solid var(--border); background:#0f172a; padding:4px 8px; border-radius:999px; font-size:12px; color:#cbd5e1; }
.dropzone input[type="file"] { display: none; }