/* AI pre všetkých — kvíz | obal okolo Tally embedu
   Brand tokeny podľa grafického manuálu UIV. */

:root{
  --uiv-purple:#5917FF;
  --uiv-orange:#FF6600;
  --uiv-dark:#0D2438;
  --uiv-white:#FFFFFF;
  --uiv-pink:#FDA4FF;
  --uiv-violet:#8C7BFF;
  --page-max:760px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100dvh;
  background-color:var(--uiv-dark);
  color:var(--uiv-white);
  font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.5;
}

/* Gradient ako fixná vrstva — spoľahlivejšie než background-attachment:fixed,
   ktoré na iOS Safari nefunguje. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 120% at 0% 0%,   rgba(255,102,0,.55) 0%, rgba(255,102,0,0) 45%),
    radial-gradient(120% 120% at 100% 100%, rgba(13,36,56,.90) 0%, rgba(13,36,56,0) 55%),
    linear-gradient(135deg,#B13F7E 0%,var(--uiv-purple) 60%,var(--uiv-dark) 100%);
}

.page{
  max-width:var(--page-max);
  margin-inline:auto;
  padding:36px 20px 48px;
}

/* --- hlavička --- */

.hdr{text-align:center;margin-bottom:28px}

.uiv-logo{
  width:180px;
  height:auto;
  display:block;
  margin:0 auto 26px;
}

.hdr__title{
  margin:0 0 10px;
  font-size:clamp(28px,6vw,44px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
}


/* --- karta s formulárom --- */

.quiz{
  background:rgba(13,36,56,.38);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:8px;
  box-shadow:0 18px 50px rgba(0,0,0,.32);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.quiz iframe{
  display:block;
  width:100%;
  min-height:300px; /* len poistka pre pripad, ze embed.js zlyha; vysku inak riadi Tally iframe-resizer */
  border:0;
  border-radius:14px;
}

/* --- pätička --- */

.ftr{
  margin-top:26px;
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,.55);
}

.ftr a{color:rgba(255,255,255,.75)}
.ftr a:hover{color:var(--uiv-orange)}

:focus-visible{
  outline:2px solid var(--uiv-orange);
  outline-offset:3px;
}

@media (max-width:600px){
  .page{padding:22px 14px 32px}
  .uiv-logo{width:140px;margin-bottom:20px}
  .quiz{border-radius:16px;padding:6px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}