/* ============================================================
   TOKENS / RESET
   ============================================================ */
:root{
  --bg:#0D0B10;
  --bg-alt:#120F17;
  --card:#17131E;
  --card-alt:#141019;
  --text:#F4F1F6;
  --text-body:#CFC9D6;
  --text-list:#E7E2EC;
  --text-muted:#8F8899;
  --magenta:#E6198C;
  --pink:#FF4DAE;
  --pink-light:#FF7CC4;
  --border:rgba(255,255,255,0.1);
  --border-row:rgba(255,255,255,0.07);
  --border-line:rgba(255,255,255,0.12);
  --header-h:64px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--pink); }
a:hover{ color:var(--pink-light); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }
section[id]{ scroll-margin-top:var(--header-h); }
::selection{ background:var(--magenta); color:#fff; }
h1,h2,h3{ font-family:'Anton', sans-serif; font-weight:400; }

@keyframes cueBounce{
  0%,100%{ transform:translateY(0); opacity:.9; }
  50%{ transform:translateY(10px); opacity:.35; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.eyebrow{
  font-size:clamp(11px,1.4vw,13px); font-weight:700; letter-spacing:.24em;
  color:var(--pink); text-transform:uppercase;
}
.section-subtitle{
  margin:18px 0 0; font-size:clamp(16px,1.8vw,19px); line-height:1.55;
  color:var(--text-body); max-width:52ch;
}
.accent-line{ width:64px; height:4px; background:var(--magenta); margin:26px 0 0; }
.accent-line--sm{ width:48px; margin:20px 0 0; }

.btn-outline{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--magenta); color:var(--pink);
  padding:16px 22px; font-weight:800; letter-spacing:.08em;
  text-decoration:none; font-size:clamp(12px,1.5vw,14px);
  border-radius:3px; text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.btn-outline:hover{ background:var(--magenta); color:#fff; }
.btn-outline--sm{ padding:14px 22px; font-size:13px; }

.btn-cta{
  background:var(--magenta); color:#fff; text-decoration:none;
  font-size:13px; font-weight:800; letter-spacing:.08em;
  padding:10px 18px; border-radius:3px; text-transform:uppercase;
  transition:background .2s ease;
}
.btn-cta:hover{ background:var(--pink); color:#fff; }
.btn-cta--sm{ font-size:12px; padding:10px 14px; }
.btn-cta--block{ margin-top:18px; padding:15px 18px; font-size:14px; text-align:center; }

.photo-frame{
  aspect-ratio:3/4; position:relative; border:1px solid var(--border);
  border-radius:6px; overflow:hidden;
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,11,16,0.9); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.header__inner{
  max-width:1280px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:0 20px; height:64px;
}
.logo{
  font-family:'Anton', sans-serif; font-size:26px; letter-spacing:.08em;
  color:var(--text); text-decoration:none; line-height:1;
}
.logo:hover{ color:var(--text); }
.logo__dot{ color:var(--pink); }

.nav{ display:none; align-items:center; gap:20px; }
.nav a{
  color:var(--text-body); text-decoration:none; font-size:13px;
  font-weight:600; letter-spacing:.02em; white-space:nowrap;
  transition:color .2s ease;
}
.nav a:hover{ color:var(--pink); }
.nav a.is-active{ color:var(--pink); }

.header__mobile{ display:flex; align-items:center; gap:14px; }
.burger{
  background:none; border:1px solid rgba(255,255,255,0.15); border-radius:3px;
  width:44px; height:44px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; cursor:pointer; padding:0;
}
.burger span{ display:block; width:18px; height:2px; background:var(--text); }

.mobile-menu{
  display:none; flex-direction:column; padding:8px 20px 24px;
  background:var(--bg); border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  max-height:calc(100svh - 64px); overflow:auto;
}
.mobile-menu.is-open{ display:flex; }
.mobile-menu a{
  color:var(--text-body); padding:15px 0; font-size:16px; font-weight:600;
  text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.06);
}
.mobile-menu a.is-active{ color:var(--pink); }

@media (min-width:1180px){
  .nav{ display:flex; }
  .header__mobile{ display:none; }
  .mobile-menu{ display:none !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:calc(100svh - 64px); display:flex; flex-direction:column;
  justify-content:center; position:relative; padding:48px 20px 88px;
}
.hero__inner{
  max-width:1160px; margin:0 auto; width:100%; display:flex; flex-wrap:wrap;
  align-items:center; gap:clamp(28px,4vw,64px);
}
.hero__photo{ flex:1 1 280px; max-width:430px; margin:0 auto; width:100%; }
.hero__text{ flex:1 1 340px; min-width:0; }

.wordmark{ margin:16px 0 0; line-height:.95; width:fit-content; }
.wordmark__first{
  display:block; font-family:'Anton', sans-serif; font-weight:400;
  font-size:clamp(30px,4.5vw,52px); letter-spacing:.1em; color:var(--text-body);
  text-align:right; text-transform:uppercase;
}
.wordmark__big{
  display:block; font-family:'Anton', sans-serif; font-weight:400;
  font-size:clamp(84px,13vw,176px); letter-spacing:.02em; color:var(--text);
  padding-top:.06em; text-transform:uppercase;
}

.hero__claim{
  margin:24px 0 0; font-size:clamp(19px,2.4vw,26px); line-height:1.4;
  font-weight:600; color:var(--text); max-width:22ch;
}
.hero__text .btn-outline{ margin-top:34px; }

.hero__cue{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.hero__cue-label{ font-size:10px; letter-spacing:.24em; color:var(--text-muted); font-weight:700; text-transform:uppercase; }
.hero__cue-line{
  width:1px; height:40px; background:linear-gradient(var(--pink), transparent);
  animation:cueBounce 1.8s ease-in-out infinite;
}

/* ============================================================
   PRIORITY GRID
   ============================================================ */
.priority{
  min-height:100svh; display:flex; align-items:center;
  padding:96px 20px; background:var(--bg-alt);
}
.priority__container{ max-width:1040px; margin:0 auto; width:100%; }
.priority h2{ font-size:clamp(36px,6vw,68px); line-height:1.02; margin:0; text-transform:uppercase; }

.priority__grid{
  margin-top:44px; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:14px;
}
.priority__card{
  display:flex; flex-direction:column; gap:14px; padding:24px;
  border:1px solid var(--border); background:var(--card);
  text-decoration:none; color:var(--text); border-radius:6px;
  transition:border-color .2s ease;
}
.priority__card:hover{ border-color:var(--pink); color:var(--text); }
.priority__num{ font-family:'Anton', sans-serif; font-size:15px; letter-spacing:.1em; color:var(--pink); }
.priority__title{
  font-family:'Anton', sans-serif; font-size:clamp(20px,2vw,24px); line-height:1.15;
  text-transform:uppercase; letter-spacing:.02em;
}
.priority__arrow{ margin-top:auto; color:var(--pink); font-weight:800; font-size:13px; letter-spacing:.08em; }

/* ============================================================
   PRIORITY DETAIL SECTIONS (peniaze / parkovanie / bezpecnost / rodiny)
   ============================================================ */
.prio{ min-height:100svh; display:flex; align-items:center; padding:96px 20px; }
.prio--alt{ background:var(--bg-alt); }
.prio__container{ max-width:1040px; margin:0 auto; width:100%; }
.prio h2{
  font-size:clamp(32px,5.5vw,60px); line-height:1.05; margin:14px 0 0;
  text-transform:uppercase;
}
.prio__tagline{
  margin:20px 0 0; font-size:clamp(17px,2vw,21px); line-height:1.5;
  font-weight:600; color:var(--text); max-width:52ch;
}
.prio__tagline--wide{
  font-size:clamp(16px,1.9vw,19px); line-height:1.55; font-weight:500; max-width:64ch;
}

.how{ margin-top:32px; display:flex; align-items:center; gap:14px; }
.how__label{ font-size:14px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.how__line{ flex:1; height:1px; background:var(--border-line); }

.prio__list{
  list-style:none; margin:10px 0 0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); column-gap:32px;
}
.prio__list li{
  display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-row);
  font-size:16px; line-height:1.5; color:var(--text-list);
}
.check{ color:var(--pink); font-weight:800; }
.hl-text{ color:var(--text); }

.prio__actions{ display:flex; align-items:center; gap:36px; margin-top:26px; flex-wrap:wrap; }
.toggle-btn{
  background:none; border:none; cursor:pointer; color:var(--pink);
  font-family:'Archivo', sans-serif; font-weight:800; font-size:14px;
  letter-spacing:.08em; padding:12px 0; min-height:44px;
}
.video-link{
  color:var(--pink); font-weight:800; font-size:14px; letter-spacing:.08em;
  text-decoration:none; padding:12px 0; min-height:44px; display:inline-flex; align-items:center;
}

.accordion{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .6s cubic-bezier(.4,0,.2,1);
}
.accordion.is-open{ grid-template-rows:1fr; }
.accordion__inner{ overflow:hidden; min-height:0; }
.accordion__content{ padding:18px 0 6px; border-top:1px solid var(--border); margin-top:8px; }
.accordion__content p{ margin:0 0 16px; color:var(--text-body); font-size:16px; line-height:1.7; max-width:70ch; }
.accordion__content p:last-child{ margin-bottom:0; }
.accordion__content--legal p{ font-size:15px; }
.accordion__content .hl{ color:var(--pink-light); }
.accordion__final{ color:var(--text) !important; font-weight:700; }

/* ============================================================
   RESULTS
   ============================================================ */
.results{ min-height:100svh; display:flex; align-items:center; padding:96px 20px; }
.results__container{ max-width:1040px; margin:0 auto; width:100%; }
.results__title{
  font-size:clamp(32px,5.5vw,60px); line-height:1.05; margin:0;
  text-transform:uppercase; max-width:16ch;
}

.card-grid{
  margin-top:40px; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(270px,1fr)); gap:14px;
}
.subhead + .card-grid{ margin-top:18px; }
.card{
  display:flex; flex-direction:column; gap:14px; padding:24px;
  border:1px solid var(--border); background:var(--card); border-radius:6px;
}
.card--muted{ background:var(--card-alt); }
.card__source{ font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--text-muted); text-transform:uppercase; }
.card__text{ margin:0; font-size:16px; line-height:1.55; color:var(--text-list); flex:1; }
.card__link{ color:var(--pink); font-weight:800; font-size:13px; letter-spacing:.06em; text-decoration:none; }
.card__link--center{ text-align:center; line-height:1.5; }

.subhead{ margin-top:44px; display:flex; align-items:center; gap:14px; }
.subhead h3{ margin:0; font-size:14px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--text); }
.subhead__line{ flex:1; height:1px; background:var(--border-line); }

.video-grid{
  margin-top:18px; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
  gap:14px; align-items:start;
}
.video-card{
  aspect-ratio:9/16; border:1px solid var(--border); border-radius:6px;
  overflow:hidden; background:var(--card);
}
.video-card iframe{ width:100%; height:100%; border:0; display:block; }

.results__more{ margin-top:24px; display:flex; justify-content:center; }

/* ============================================================
   KTO SOM
   ============================================================ */
.ktosom{ display:flex; align-items:center; padding:96px 20px; background:var(--bg-alt); }
.ktosom__inner{
  max-width:860px; margin:0 auto; width:100%; display:flex; flex-wrap:wrap;
  align-items:center; gap:clamp(28px,4vw,56px); justify-content:center;
}
.ktosom__photo{ flex:0 0 auto; width:min(240px,70vw); }
.ktosom__text{ flex:1 1 300px; min-width:0; }
.ktosom h2{ font-size:clamp(32px,5vw,52px); line-height:1.05; margin:0; text-transform:uppercase; }
.ktosom__lead{
  margin:22px 0 0; font-size:clamp(19px,2.4vw,25px); line-height:1.45;
  font-weight:600; color:var(--text);
}

/* ============================================================
   SUPPORT (PODPORTE MA)
   ============================================================ */
.support{ min-height:100svh; display:flex; align-items:center; padding:96px 20px; }
.support__container{ max-width:1040px; margin:0 auto; width:100%; }
.support h2{ font-size:clamp(32px,5.5vw,60px); line-height:1.05; margin:0; text-transform:uppercase; }
.support__grid{
  margin-top:36px; display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,64px); align-items:flex-start;
}
.support__text{ flex:1 1 380px; min-width:0; }
.support__text p{ margin:0 0 16px; color:var(--text-body); font-size:16px; line-height:1.7; max-width:70ch; }
.support__thanks{ color:var(--text) !important; font-size:17px; font-weight:600; }
.support__legal-toggle{ margin-top:22px; }
.support__legal-toggle + .accordion .accordion__content{ margin-top:4px; }

.support__qr-card{
  flex:0 1 300px; display:flex; flex-direction:column; align-items:center; gap:18px;
  margin:0 auto; padding:28px; border:1px solid var(--border); background:var(--card);
  border-radius:6px;
}
.qr-box{
  width:216px; background:#fff; border-radius:4px; padding:8px;
  box-sizing:border-box; display:flex; align-items:center; justify-content:center;
}
.qr-box img{ width:100%; height:auto; }
.qr-iban{
  font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--text-body);
  text-align:center;
}

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */
.contact{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:96px 20px 0; background:var(--bg-alt);
}
.contact__container{ max-width:1040px; margin:0 auto; width:100%; flex:1; display:flex; flex-direction:column; justify-content:center; }
.contact h2{ font-size:clamp(32px,5.5vw,60px); line-height:1.05; margin:0; text-transform:uppercase; }
.contact__grid{ margin-top:32px; display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,64px); align-items:flex-start; }
.contact__text{ flex:1 1 380px; min-width:0; }
.contact__text p{ margin:0 0 16px; color:var(--text-body); font-size:16px; line-height:1.7; max-width:70ch; }
.contact__text p:last-child{ margin-bottom:0; }

.contact__card{ flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.contact__name{ font-family:'Anton', sans-serif; font-size:clamp(24px,3vw,32px); letter-spacing:.03em; text-transform:uppercase; }
.contact__link{
  color:var(--pink); font-weight:700; font-size:clamp(17px,2vw,20px);
  text-decoration:none; padding:10px 0; display:inline-block;
}

.footer{
  border-top:1px solid var(--border); margin-top:72px; padding:28px 0 32px;
  display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center;
}
.footer__name{ font-size:14px; font-weight:700; color:var(--text); }
.footer__url{ font-size:13px; color:var(--pink); text-decoration:none; font-weight:600; }
.footer__copy{ font-size:12px; color:var(--text-muted); }
