/* ==========================================================================
   HERO PRODUKTOWY (alertme.securand.pl) - lewa: obietnica + CTA; prawa: telefon
   z realnym ekranem AlertMe na subtelnej ciemnej mapie. Ekran zbudowany w HTML/CSS
   (ostry, wektorowy), nie raster. Laduje sie tylko na stronie glownej.
   ========================================================================== */

/* ---- tlo sekcji: ciemny gradient + subtelna poswiata (zamiast stockowego zdjecia) ---- */
.home-hero { min-height: min(82vh, 760px); display: flex; align-items: center; }
.home-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 120% at 12% 8%, rgba(120, 140, 200, .06), transparent 55%),
    linear-gradient(165deg, #101318 0%, #0b0d10 55%, #08090b 100%);
}
.home-hero__bg::after {  /* delikatna siatka wspolrzednych - klimat dyspozytorski */
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(245, 247, 250, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 247, 250, .022) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(120% 100% at 70% 40%, #000 30%, transparent 76%);
          mask-image: radial-gradient(120% 100% at 70% 40%, #000 30%, transparent 76%);
}

/* ---- uklad dwukolumnowy ---- */
.home-hero__grid { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(1.5rem, 3vw, 2.75rem); }
@media (min-width: 900px) {
  .home-hero__grid { grid-template-columns: 1.02fr 0.98fr; gap: clamp(2rem, 5vw, 4.5rem); }
}
.home-hero__copy { max-width: 34rem; min-width: 0; }

/* naglowek: akcent na "Zawsze." */
.home-hero__title { font-family: var(--fh); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; margin: 0 0 1.25rem; font-size: clamp(2.4rem, 5vw, 3.7rem); text-wrap: balance; }
.home-hero__title .hh-accent { color: var(--accent); }
.home-hero__price { margin: 1.5rem 0 0; font-family: var(--fh); font-size: .9375rem; color: var(--dark-muted); }
.home-hero__price strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--dark-ink); margin-right: .3rem; }
.home-hero__stores { margin-top: 1.25rem; }

/* ============================================================ WIZUAL / TELEFON */
.home-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; }
@media (max-width: 899px) { .home-hero__visual { margin-top: .5rem; } }


/* rama telefonu - mechanika 1:1 jak securand.pl: overflow:hidden na ramce + wideo z aspect-ratio steruje
   wysokoscia telefonu. Dzieki temu nagranie nigdy nie wystaje poza obramowke ani nie przycina sie od dolu. */
.phone {
  position: relative; z-index: 2; width: clamp(244px, 20.5vw, 342px);
  overflow: hidden; padding: 7px; border-radius: 34px; background: #000;
  border: 1px solid rgba(0, 0, 0, .1); outline: 1px solid rgba(18, 19, 22, .15);
  box-shadow: 0 40px 82px -30px rgba(0, 0, 0, .6);
}
.phone__video { display: block; width: 100%; aspect-ratio: 9 / 19.5; border-radius: 24px; object-fit: cover; background: #7a0f18; }
.phone__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3; width: 40px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .25); }

/* ---- miejscowosci obok mapy na ciemnej sekcji "mapsec": light-theme tokeny (--line,
   --ink, --muted) daja ciemny tekst niewidoczny na czarnym tle - nadpisujemy pod ciemne tlo ---- */
.mapsec .am-towns { margin-top: 0; }
.mapsec .am-town-group { border-top-color: rgba(245, 247, 250, .14); }
.mapsec .am-town-group__n { color: var(--dark-ink); }
.mapsec .am-town-group__s { color: rgba(245, 247, 250, .5); }
.mapsec .am-chip { color: rgba(245, 247, 250, .72); border-color: rgba(245, 247, 250, .2); }
.mapsec .am-chip:hover, .mapsec .am-chip:focus-visible { color: #fff; border-color: rgba(238, 212, 1, .55); background: rgba(238, 212, 1, .1); }
.mapsec .am-chip.is-active { color: var(--accent); border-color: var(--accent); background: rgba(238, 212, 1, .12); }