/* Atlas Wyborczy – strona główna: głębia tła, szklane karty, mikro-interakcje.
   Ładuj PO landing.css. Wszystko dotyczy tylko #landing, nie rusza map. */

:root{
  --aw-shadow-1:0 1px 2px rgba(0,0,0,.18),0 1px 1px rgba(0,0,0,.12);
  --aw-shadow-2:0 10px 30px -12px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.18);
}
:root[data-theme="light"]{
  --aw-shadow-1:0 1px 2px rgba(20,30,50,.10),0 1px 1px rgba(20,30,50,.06);
  --aw-shadow-2:0 12px 30px -14px rgba(20,30,50,.28),0 2px 6px rgba(20,30,50,.08);
}

/* ---- tło: niebieski (lewa) i czerwony (prawa) poświata u góry, złoto u dołu, ledwo widoczna siatka kropek ---- */
#landing{
  background:
    radial-gradient(58% 38% at 10% -6%,rgba(47,111,228,.24),transparent 70%),
    radial-gradient(58% 38% at 90% -6%,rgba(224,70,63,.15),transparent 70%),
    radial-gradient(80% 46% at 50% 118%,rgba(200,169,106,.11),transparent 70%),
    radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--fg) 6%,transparent) 1px,transparent 0) 0 0/28px 28px,
    var(--bg);
}
:root[data-theme="light"] #landing{
  background:
    radial-gradient(58% 38% at 10% -6%,rgba(47,111,228,.12),transparent 70%),
    radial-gradient(58% 38% at 90% -6%,rgba(224,70,63,.08),transparent 70%),
    radial-gradient(80% 46% at 50% 118%,rgba(200,169,106,.12),transparent 70%),
    radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--fg) 7%,transparent) 1px,transparent 0) 0 0/28px 28px,
    var(--bg);
}

/* ---- hero ---- */
#landing .l-hero .l-hemi{filter:drop-shadow(0 8px 26px rgba(88,118,210,.38))}
#landing .l-title{font-weight:800;letter-spacing:-.035em}
@supports (background-clip:text) or (-webkit-background-clip:text){
  #landing .l-title span{
    background:linear-gradient(90deg,#7fb0ff,#ff8a80);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  :root[data-theme="light"] #landing .l-title span{background-image:linear-gradient(90deg,#2f6fe4,#e0463f)}
}
#landing .l-lead{letter-spacing:-.011em;color:var(--mut)}
#landing .lx-search{font-family:var(--aw-font);box-shadow:0 14px 38px -20px rgba(77,127,209,.9),inset 0 1px 0 color-mix(in srgb,var(--fg) 10%,transparent)}

/* ---- szklane karty: kraje, narzędzia, liczniki, karty „Co oferuje", blok wsparcia ---- */
#landing .l-grid>.c,
#landing .l-grid>.c.on,
#landing .lx-tools>button,
#landing .l-cd .cdw:not(.lx-next) .cd,
#landing .lx-card,
#landing .l-foot.l-sup{
  background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 7.5%,transparent),color-mix(in srgb,var(--fg) 2%,transparent));
  border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 10%,transparent),var(--aw-shadow-1);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s cubic-bezier(.2,.7,.2,1),border-color .18s,background-color .18s;
}
@media(min-width:721px){
  #landing .l-grid>.c,
  #landing .lx-tools>button,
  #landing .lx-card{-webkit-backdrop-filter:blur(8px) saturate(1.15);backdrop-filter:blur(8px) saturate(1.15)}
}
/* najbliższe wybory: złota poświata wokół istniejącego banera */
#landing .l-cd .lx-next .cd{box-shadow:0 18px 44px -26px rgba(224,165,38,.75),inset 0 1px 0 rgba(255,235,190,.14)}

@media(hover:hover){
  #landing .l-grid>.c:hover,
  #landing .lx-tools>button:hover,
  #landing .lx-card:hover{
    transform:translateY(-3px);
    border-color:color-mix(in srgb,#7da2ff 55%,transparent);
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 14%,transparent),
               0 20px 44px -22px rgba(77,127,209,.65),var(--aw-shadow-2);
  }
  #landing .l-cd .cd:hover{border-color:currentColor}
}
#landing .l-grid>.c:active,#landing .lx-tools>button:active{transform:translateY(-1px) scale(.995)}

/* przyciski „Wejdź / Otwórz / Zacznij": zostają w złotym kolorze marki, dostają tylko połysk i miękki cień */
#landing .l-grid>.c small,#landing .lx-tools>button>small{
  box-shadow:0 8px 18px -10px rgba(212,184,114,.75),inset 0 1px 0 rgba(255,255,255,.35);
  font-weight:650;letter-spacing:-.005em;
}

@media(prefers-reduced-motion:reduce){
  #landing .l-grid>.c,#landing .lx-tools>button,#landing .lx-card{transition:none}
  #landing .l-grid>.c:hover,#landing .lx-tools>button:hover,#landing .lx-card:hover{transform:none}
}