:root{--bg:#0b1220;--card:#111a2b;--text:#e9edf5;--muted:#b9c3d6;--accent:#5eead4;--accent2:#60a5fa;--danger:#fb7185;--radius:18px;--shadow:0 12px 30px rgba(0,0,0,.25);--max:1100px;--pad:18px;--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:radial-gradient(1200px 600px at 20% 0%,rgba(96,165,250,.22),transparent 60%),radial-gradient(900px 500px at 90% 10%,rgba(94,234,212,.18),transparent 55%),var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none}.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(11,18,32,.65);border-bottom:1px solid rgba(255,255,255,.06);}
.navbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.badge{font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(94,234,212,.14);border:1px solid rgba(94,234,212,.28);color:var(--accent)}
.navlinks{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.navlinks a{font-size:14px;color:var(--muted);padding:8px 10px;border-radius:10px}
.navlinks a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.lang{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text);padding:8px 10px;border-radius:12px;font-size:14px}
.hero{padding:44px 0 28px}.heroGrid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;align-items:stretch}
@media(max-width:900px){.heroGrid{grid-template-columns:1fr}}
.card{background:rgba(17,26,43,.82);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);box-shadow:var(--shadow)}
.heroCard{padding:26px}.h1{font-size:44px;line-height:1.05;margin:0 0 12px}
@media(max-width:560px){.h1{font-size:36px}}
.p{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(94,234,212,.18),rgba(96,165,250,.14));color:var(--text);font-weight:700}
.btn:hover{filter:brightness(1.06)}.quick{padding:18px;display:grid;gap:12px}
.kpi{padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.kpi h3{margin:0 0 6px;font-size:15px}.kpi p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.section{padding:26px 0}.section h2{margin:0 0 8px;font-size:26px}.section .note{margin:0 0 16px;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media(max-width:900px){.grid3{grid-template-columns:1fr}}
.list{display:grid;gap:10px}
.li{padding:14px 14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:var(--text)}
.form{padding:18px}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:700px){.row{grid-template-columns:1fr}}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
input,textarea{width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--text);outline:none}
textarea{min-height:110px;resize:vertical}.help{font-size:12px;color:var(--muted);margin-top:6px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:var(--text);font-weight:650}
.pill.danger{border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.12)}
.pill.good{border-color:rgba(94,234,212,.35);background:rgba(94,234,212,.12)}
.notice{padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--muted)}
.footer{padding:26px 0 40px;color:var(--muted)}.footer a{color:var(--text)}
.footerGrid{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.small{font-size:12px}.hr{height:1px;background:rgba(255,255,255,.08);margin:18px 0}
.cardsRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.cardLogo{padding:6px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);font-size:12px;color:var(--text)}
.modal{position:fixed;inset:0;display:none;place-items:center;z-index:100;background:rgba(0,0,0,.55)}
.modal.open{display:grid}.modalCard{max-width:560px;width:92%;padding:18px}.modalCard h3{margin:0 0 6px}


/* === HERO v4 (center+burger) === */
/* Mobile hamburger menu */
.navToggle{
  display:none;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  align-items:center;justify-content:center;
  cursor:pointer;
}
.navToggle span{display:block;width:18px;height:2px;background:rgba(255,255,255,.85);margin:3px 0;border-radius:2px}
@media(max-width:820px){
  .navlinks > a{display:none}
  .navlinks .lang{display:none}
  .navToggle{display:inline-flex}
  .navPanel{
    position:fixed; inset:70px 14px auto 14px;
    background:rgba(17,24,39,.92);
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    padding:12px;
    box-shadow:0 18px 55px rgba(0,0,0,.35);
    display:none;
    z-index:50;
    backdrop-filter: blur(14px);
  }
  body.menuOpen .navPanel{display:block}
  .navPanel a{
    display:block;
    padding:12px 12px;
    border-radius:14px;
    color:var(--text);
    text-decoration:none;
  }
  .navPanel a:active{transform:scale(.99)}
  .navPanel .row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:8px}
  .navPanel .lang{width:100%}
}

/* Hero: centered big mic + minimal UI */
.heroMin{padding:26px 0 8px}
.heroMin .heroWrap{max-width:720px;margin:0 auto}
.heroMin .heroCard{padding:22px 18px;text-align:center}
.heroMin .h1{font-size:42px;line-height:1.05;margin:0 0 10px}
@media(max-width:560px){.heroMin .h1{font-size:34px}}
.heroSub{margin:0 auto 14px;max-width:54ch;color:var(--muted);font-size:16px;line-height:1.45}

.heroStack{display:flex;flex-direction:column;align-items:center;gap:12px}
.micBig{
  -webkit-tap-highlight-color:transparent;
  appearance:none;
  width:160px;height:160px;border-radius:999px;
  padding:0;margin:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(70% 70% at 30% 25%, rgba(94,234,212,.34), rgba(96,165,250,.22) 55%, rgba(255,255,255,.03) 100%);
  box-shadow:0 18px 60px rgba(0,0,0,.32);
  font-size:58px; line-height:1;
  cursor:pointer; user-select:none;
}
.micBig:active{transform:scale(.985)}
.micBig.pulse{animation:pulse 1.05s ease-in-out infinite}
@keyframes pulse{
  0%{box-shadow:0 18px 60px rgba(0,0,0,.32)}
  50%{box-shadow:0 18px 88px rgba(94,234,212,.28)}
  100%{box-shadow:0 18px 60px rgba(0,0,0,.32)}
}
.heroHint{font-size:13px;color:var(--muted);max-width:52ch}
.heroCtas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.btnPrimary{padding:12px 18px;border-radius:16px}
.pillSmall{
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:650;font-size:13px;
}

/* Hide "chips" on hero for now (less clutter) */
.sloganChips{display:none}

/* PWA row compact */
.pwaRow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.pwaNote{font-size:12px;color:var(--muted);margin-top:2px}


/* === HERO v5 fixes (burger icon + desktop nav) === */
/* Ensure mobile panel is hidden on desktop */
.navPanel{display:none}

/* Burger icon: force 3 visible lines */
.navToggle{
  flex-direction:column;
  gap:4px;
}
.navToggle span{
  margin:0 !important;
  width:22px !important;
  height:2px !important;
  background:rgba(255,255,255,.88) !important;
  border-radius:2px;
}