/* ============================================================
   ATWAI glass dizajn pre voice/demo/klient stránky
   (SPP tréning, manažér, voice-demo, demo, dôvera, catering).
   PLNÝ glass štýl ako hlavná stránka: aurora pozadie, tenké
   modré písmo, glass karty a tlačidlá, brand modrá namiesto
   cyan. Prekrýva ich vlastné pozadie/grid/gate + cyan farby.
   Blobs injektuje /assets/stars.js. Načítať AŽ ZA inline <style>.
   Mení iba vzhľad (farby/fonty/povrchy), NIE layout ani logiku.
   ============================================================ */

/* ---- Pozadie ako hlavná stránka (žiadny predel, žiadny cyan grid) ---- */
html, body { background-color: #030308 !important; }
body {
  background-image: linear-gradient(180deg, #05060e 0%, #060816 52%, #05061c 100%) !important;
  color: #E7EBFF !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  font-weight: 400;
  letter-spacing: -0.003em;
}
body::before { display: none !important; content: none !important; background: none !important; opacity: 0 !important; }

/* ---- Aurora vrstva (za obsahom) ---- */
#atwai-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#atwai-aurora .ab { position: absolute; border-radius: 50%; filter: blur(100px); mix-blend-mode: screen; will-change: transform; }
#atwai-aurora .ab1 { width: 58vw; height: 58vw; left: -12vw; top: -18vw; background: radial-gradient(circle, rgba(58,110,246,0.50), transparent 66%); animation: agv1 38s ease-in-out infinite; }
#atwai-aurora .ab2 { width: 48vw; height: 48vw; right: -10vw; top: -6vw; background: radial-gradient(circle, rgba(120,80,255,0.40), transparent 66%); animation: agv2 46s ease-in-out infinite; }
#atwai-aurora .ab3 { width: 64vw; height: 64vw; left: 16vw; bottom: -32vw; background: radial-gradient(circle, rgba(30,150,255,0.40), transparent 66%); animation: agv3 42s ease-in-out infinite; }
#atwai-aurora .ab4 { width: 40vw; height: 40vw; right: 6vw; bottom: -14vw; background: radial-gradient(circle, rgba(90,120,255,0.30), transparent 66%); animation: agv4 52s ease-in-out infinite; }
@keyframes agv1 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(7vw,5vw) scale(1.12);} }
@keyframes agv2 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-6vw,4vw) scale(1.1);} }
@keyframes agv3 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(5vw,-5vw) scale(1.14);} }
@keyframes agv4 { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-4vw,-4vw) scale(1.12);} }
@media (prefers-reduced-motion: reduce) { #atwai-aurora .ab { animation: none !important; } }

/* ---- Fullscreen gate: priehľadné pozadie, nech presvitá aurora ---- */
.gate { background: transparent !important; background-image: none !important; }

/* ---- Typografia (tenké modré písmo ako hlavná stránka) ---- */
h1 {
  font-weight: 200 !important; letter-spacing: -0.025em !important;
  background: linear-gradient(180deg, #F4F7FF 0%, #AFC3FF 56%, #5E85F2 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
h1 .accent, .accent {
  -webkit-text-fill-color: #8FB4FF !important; color: #8FB4FF !important;
  background: none !important; background-image: none !important; font-weight: 400 !important;
}
h2, h3, .gate h2 { font-weight: 300 !important; color: #F2F5FF !important; }
.lead, .sub, .status, .hint, p, li, label { font-weight: 400 !important; }
.lead, .sub { color: #A9B2DE !important; }
.status { color: #A7AFD6 !important; }
.status.active { color: #8FB4FF !important; }
.hint, .footer { color: #7B84B4 !important; }
.footer a, .gate-note a, a.link { color: #7FA6FF !important; }
.logo, .glogo, .brand { font-weight: 500 !important; }
/* cyan bodky/akcenty -> brand modrá */
.logo-dot, .gate .glogo .d, .d { background: #8FB4FF !important; box-shadow: 0 0 12px rgba(143,180,255,0.6) !important; }

/* ---- Karty do glass (ako hlavná stránka) ---- */
.card, .gate .card, .fb-item {
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* ---- Inputy (glass) ---- */
.gate input, .name-input, input[type="text"], input[type="password"], input[type="search"], textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #EEF1FF !important;
}
.gate input::placeholder, .name-input::placeholder, input::placeholder { color: #6E77A6 !important; }

/* ---- Tlačidlá: glass pill (Vstúpiť, Obnoviť, sekundárne) ---- */
.gate button, .toolbar button, button.btn, .btn, .sf-btn {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #EAEFFF !important; font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.26), 0 8px 22px rgba(0,0,0,0.45) !important;
}
.gate button:hover, .toolbar button:hover, .btn:hover, .sf-btn:hover {
  background: linear-gradient(180deg, rgba(120,160,255,0.24), rgba(255,255,255,0.05)) !important;
  border-color: rgba(120,160,255,0.5) !important;
}

/* ---- Výber stupňa (SPP): glass + aktívny modrý ---- */
.level-btn {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #A7AFD6 !important;
}
.level-btn.active {
  background: linear-gradient(180deg, #6E9BFF, #3A6EF6) !important;
  border-color: rgba(120,160,255,0.6) !important;
  color: #fff !important; font-weight: 600 !important;
}

/* ---- Veľké call tlačidlo: brand modrá namiesto cyan ---- */
.callbtn {
  background: radial-gradient(120% 120% at 30% 25%, #6E9BFF 0%, #3A6EF6 72%) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 48px rgba(58,110,246,0.42) !important;
}
.callbtn:hover { box-shadow: 0 22px 60px rgba(58,110,246,0.55) !important; }
/* .callbtn.live (počas hovoru) ostáva pôvodná červená = jasný indikátor, nemeníme */