/* Miserabble — clean, system‑font landing page (PHP version) */
:root{
  --bg: #0b0c0e;
  --panel: #111317;
  --text: #e7e9ee;
  --muted: #a7adbb;
  --accent: #6ae3ff;
  --accent-2: #8cffc7;
  --danger: #ff6a7a;
  --ok: #7dffa7;
  --ring: rgba(106,227,255,.35);
  --shadow: 0 10px 40px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #ffffff; --panel: #f6f7f9; --text: #0b0c0e; --muted: #5b5f69;
    --accent: #0ea5e9; --accent-2: #10b981; --danger: #ef4444; --ok: #22c55e; --ring: rgba(14,165,233,.25);
    --shadow: 0 10px 30px rgba(2,6,23,.08);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:radial-gradient(1500px 800px at 20% -10%, rgba(106,227,255,.09), transparent 50%),
             radial-gradient(1000px 600px at 90% 10%, rgba(140,255,199,.08), transparent 40%),
             var(--bg);
  font: 16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:rgba(0,0,0,.08); backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; color:var(--text)}
.brand .wordmark{letter-spacing:.3px; font-size:17px}
.top-nav{display:flex; gap:16px; align-items:center}
.top-nav a{color:var(--muted)}
.top-nav a:hover{color:var(--text)}
.hero{max-width:940px; margin:80px auto 40px; padding:0 20px; text-align:center}
.hero-badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:linear-gradient(90deg, rgba(106,227,255,.2), rgba(140,255,199,.2));
  color:var(--muted); font-weight:600; font-size:12px; letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.08);
}
.hero h1{margin:18px 0 10px; font-size:clamp(30px, 6vw, 48px); line-height:1.1}
.lede{max-width:760px; margin:0 auto 28px; color:var(--muted); font-size:18px}
.lead-form{
  margin: 24px auto 10px; padding:18px; background:var(--panel);
  border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:var(--shadow);
  text-align:left; max-width:840px;
}
.form-row{display:grid; gap:14px; margin-bottom:14px}
.form-row.two{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:720px){ .form-row.two{grid-template-columns:1fr} }
label span{display:block; margin-bottom:6px; color:var(--muted); font-size:13px}
.req{color:var(--danger)}
input, select, textarea, button{font:inherit; color:inherit}
input[type="text"], input[type="email"], select, textarea, input[type="file"]{
  width:100%; padding:12px 14px; background:#0000; color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:10px; outline:none;
  transition:border .15s, box-shadow .15s, background .15s;
}
input[type="text"]:focus, input[type="email"]:focus, select:focus, textarea:focus, input[type="file"]:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); background:rgba(255,255,255,.02);
}
textarea{resize:vertical}
.check{display:flex; align-items:flex-start; gap:10px; margin:10px 0 12px}
.check input{margin-top:4px}
.hp{display:none !important}
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:12px; padding:12px 18px; background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#0b0c0e; font-weight:800; cursor:pointer; box-shadow:var(--shadow);
}
.cta[disabled]{opacity:.6; cursor:not-allowed}
.form-note{margin-top:10px; min-height:22px; color:var(--muted)}
.form-note.ok{color:var(--ok)}
.form-note.error{color:var(--danger)}
.hero-footnote{margin-top:16px; color:var(--muted); font-size:13px}
.hero-footnote .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:8px}
.features{
  max-width:1100px; margin:60px auto 40px; padding:0 20px; display:grid; gap:20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width:960px){ .features{grid-template-columns: repeat(2, 1fr);} }
@media (max-width:560px){ .features{grid-template-columns: 1fr;} }
.feature{
  background:var(--panel); padding:18px; border-radius:14px; border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
}
.feature .icon{font-size:22px}
.feature h3{margin:8px 0 6px}
.hiw{max-width:840px; margin:40px auto; padding:0 20px}
.hiw h2{margin-bottom:8px}
.hiw ol{counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:10px}
.hiw li{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px 14px 14px 48px; position:relative}
.hiw li::before{
  content: counter(step); counter-increment: step;
  position:absolute; left:14px; top:12px; width:24px; height:24px; border-radius:8px;
  display:grid; place-items:center; font-weight:800; color:#0b0c0e;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.faq{max-width:840px; margin:40px auto 100px; padding:0 20px}
.faq details{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; margin-bottom:10px}
.faq summary{cursor:pointer; font-weight:600}
.site-footer{
  padding:20px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.footer-brand{display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:700}
.footer-nav{display:flex; gap:14px}
.footer-nav a{color:var(--muted)}
.footer-nav a:hover{color:var(--text)}
@media (prefers-reduced-motion: reduce){
  *{animation: none !important; transition: none !important}
}