/* FORWEB Landing Wieliszew — style scoped to .fw */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap");

.fw {
  --navy: #202040;
  --navy-deep: #14142b;
  --cyan: #40C0F0;
  --cyan-deep: #1ba4dc;
  --ink: #1a1a2e;
  --text: #4a4a63;
  --muted: #8a8aa3;
  --line: #e4e8f2;
  --soft: #f5f8fc;
  --green: #17a56b;

  font-family: "Quicksand", system-ui, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.55;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}
.fw *, .fw *::before, .fw *::after { box-sizing: border-box; }

/* Reset motywu: niektore motywy narzucaja lamanie slow / dziwne szerokosci.
   Wymuszamy normalne lamanie i pelna szerokosc kontenera landingu. */
.fw {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
/* Kazda sekcja landingu bierze pelna szerokosc rodzica (niezaleznie od motywu).
   align-self:stretch + flex-basis chronia przed kurczeniem, gdy motyw owija
   landing we flex/grid container (czest przyczyna zwezenia paska promocji). */
.fw > .fw-hero,
.fw > .fw-strip,
.fw > .fw-section,
.fw > div {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  align-self: stretch !important;
  flex: 1 1 100% !important;
}
.fw .fw-wrap,
.fw .fw-strip-card,
.fw .fw-strip-card--combined {
  width: 100% !important;
  box-sizing: border-box;
}
.fw p, .fw h1, .fw h2, .fw h3, .fw span, .fw strong, .fw small, .fw a, .fw li {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
/* Motyw moze narzucac display:grid na bezposrednie dzieci tresci (constrained
   layout WP), przez co .fw-wrap dostaje waska kolumne (~390px) i karta sie
   kurczy. Wymuszamy zwykly blok pelnej szerokosci. */
.fw .fw-wrap,
.fw-wrap {
  display: block !important;
  width: 100% !important;
  max-width: 1160px;
  margin: 0 auto !important;
  padding: 0 24px;
  grid-template-columns: none !important;
  box-sizing: border-box;
}

/* Linki wewnatrz landingu, ktore nie sa przyciskami: bez podkreslenia motywu,
   dziedzicza kolor sekcji. Przyciski (.fw-btn) maja wlasne style ponizej. */
.fw a:not(.fw-btn) { color: inherit; text-decoration: none; }
.fw a:not(.fw-btn):hover { text-decoration: underline; }

/* Reveal on scroll */
.fw [data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.fw [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fw [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Buttons — wymuszone nad stylami linkow motywu */
.fw a.fw-btn,
.fw-btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 50px; padding: 13px 24px; border-radius: 12px; border: 0;
  font-family: inherit; font-size: 16px; font-weight: 700;
  text-decoration: none !important; box-shadow: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
}
.fw a.fw-btn:hover, .fw a.fw-btn:focus, .fw a.fw-btn:active,
.fw-btn:hover, .fw-btn:focus, .fw-btn:active { text-decoration: none !important; }
.fw-btn svg { width: 18px; height: 18px; flex: none; }

.fw a.fw-btn--primary,
.fw-btn--primary {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-deep) 100%);
  color: var(--navy-deep) !important; box-shadow: 0 8px 22px rgba(64,192,240,.38);
}
.fw-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(64,192,240,.5); }

.fw a.fw-btn--light,
.fw-btn--light { background: #fff; color: var(--navy) !important; box-shadow: 0 6px 18px rgba(20,20,43,.16); }
.fw-btn--light:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20,20,43,.22); }

.fw a.fw-btn--ghost,
.fw-btn--ghost { background: rgba(255,255,255,.08); color: #fff !important; border: 1px solid rgba(255,255,255,.34); }
.fw-btn--ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.fw-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* Hero */
.fw-hero {
  position: relative; overflow: hidden; min-height: 660px;
  display: flex; align-items: center;
  background:
    radial-gradient(1200px 600px at 88% 20%, rgba(64,192,240,.20), transparent 60%),
    linear-gradient(105deg, #14142b 0%, #202040 46%, #2b2b58 100%);
}
.fw-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(100deg, rgba(20,20,43,.96) 0%, rgba(20,20,43,.80) 40%, rgba(20,20,43,.30) 72%, rgba(20,20,43,.05) 100%),
    var(--fw-hero-img, none) center right / cover no-repeat;
}
.fw-hero__threads { position: absolute; inset: 0; z-index: 0; opacity: .9; pointer-events: none; }

/* statyczne wlokna — to "kabel": cienkie, chlodne, ledwo widoczne */
.fw-hero__threads .fw-fibers path {
  fill: none; stroke: #4a6ea8; stroke-width: 1.6;
  stroke-linecap: round; opacity: .38;
}

/* poswiata wiazki pod spodem — grube, mocno rozmyte, daje wrazenie swiecenia */
.fw-hero__threads .fw-glow path {
  fill: none; stroke: #40C0F0; stroke-width: 10;
  stroke-linecap: round; opacity: .10;
  filter: blur(7px);
}

/* plynace impulsy swiatla — grubsze, jasne, biegna w jednym kierunku */
.fw-hero__threads .fw-strand {
  fill: none; stroke: url(#fwGrad); stroke-width: 3.2;
  stroke-linecap: round;
  animation-name: fwFlow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  filter: drop-shadow(0 0 5px rgba(64,192,240,.65));
}
@keyframes fwFlow { to { stroke-dashoffset: -1400; } }

@media (prefers-reduced-motion: reduce) {
  .fw-hero__threads .fw-strand { animation: none; opacity: .5; }
}

.fw-hero__content { position: relative; z-index: 1; width: min(640px, 100%); padding: 76px 0; color: #fff; }
.fw-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 20px; padding: 8px 14px;
  border: 1px solid rgba(64,192,240,.5); border-radius: 999px; background: rgba(64,192,240,.12);
  color: #cdeeff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.fw-ping { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(64,192,240,.7); animation: fwPing 2s ease-out infinite; }
@keyframes fwPing { 70%,100% { box-shadow: 0 0 0 9px rgba(64,192,240,0); } }
@media (prefers-reduced-motion: reduce) { .fw-ping { animation: none; } }

.fw-hero h1 { margin: 0 0 20px; font-size: clamp(36px, 5.4vw, 58px); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.fw-hero h1 .fw-accent { color: var(--cyan); }
.fw-hero__lead { margin: 0 0 32px; max-width: 560px; color: #dbe4f5; font-size: clamp(17px, 2.2vw, 20px); font-weight: 500; }
.fw-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fw-hero__note { margin: 22px 0 0; color: #aeb7d4; font-size: 14px; font-weight: 500; }

/* Offer strip */
.fw-strip { position: relative; z-index: 3; margin-top: -46px; width: 100%; }

/* Polaczony panel: promocja (lewo) + widzet adresu (prawo) w jednej karcie.
   FLEXBOX (nie grid) — grid auto-fit kurczyl sie do zawartosci w niektorych
   motywach. Flex z flex:1 1 0 rozdziela szerokosc po rowno i wypelnia rodzica. */
.fw-strip-card--combined {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
  padding: 0;
}
.fw-combined__promo,
.fw-combined__addr {
  flex: 1 1 360px;      /* rozne strefy dziela szerokosc; zawijaja ponizej ~360px */
  min-width: 0;         /* pozwala sie kurczyc bez przepelnienia */
  padding: 28px 30px;
  display: flex; flex-direction: column; justify-content: center;
  box-sizing: border-box;
}
/* Pionowa linia podzialu miedzy strefami (gdy obok siebie). */
.fw-combined__addr { border-left: 1px solid var(--line); }
/* Gdy strefy zawinely sie pionowo (waska kolumna) — linia pozioma u gory adresu. */

@media (max-width: 760px) {
  .fw-combined__addr { border-left: 0; border-top: 1px solid var(--line); }
}
.fw-combined__promo h2 { margin: 0 0 5px; font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.fw-combined__promo p { margin: 0 0 18px; color: var(--text); font-size: 15.5px; font-weight: 500; }
.fw-combined__addr > *:first-child { margin-top: 0; }
.fw-combined__addr > *:last-child { margin-bottom: 0; }

.fw-strip-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px; align-items: center;
  padding: 26px 30px; border-radius: 18px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(20,20,43,.16);
}
.fw-strip-card h2 { margin: 0 0 5px; font-size: 21px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.fw-strip-card p { margin: 0; color: var(--text); font-size: 15.5px; font-weight: 500; }
.fw-strip-price { display: flex; gap: 12px; align-items: stretch; justify-content: flex-end; }
.fw-badge { flex: 1; min-width: 120px; padding: 14px 12px; border-radius: 13px; text-align: center; }
.fw-badge strong { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; }
.fw-badge span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; margin-top: 3px; }
.fw-badge--free { background: linear-gradient(135deg, #1ddc8e, #0fa968); color: #fff; }
.fw-badge--from { background: var(--soft); border: 1px solid var(--line); color: var(--navy); }
.fw-badge--from span { color: var(--muted); }

/* Sections */
.fw-section { padding: 88px 0; }
.fw-section--soft { background: var(--soft); }
.fw-head { max-width: 720px; margin: 0 0 44px; }
.fw-kicker { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan-deep); }
.fw-head h2 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; line-height: 1.14; letter-spacing: -.01em; color: var(--ink); }
.fw-head p { margin: 0; color: var(--text); font-size: 18px; font-weight: 500; }

/* Benefits */
.fw-benefits { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.fw-benefit { padding: 30px 28px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: transform .22s ease, box-shadow .28s ease; }
.fw-benefit:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(20,20,43,.10); }
.fw-benefit__icon {
  display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center;
  margin-bottom: 18px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(64,192,240,.16), rgba(32,32,64,.10)); color: var(--cyan-deep);
}
.fw-benefit__icon svg { width: 26px; height: 26px; }
.fw-benefit h3 { margin: 0 0 9px; font-size: 20px; font-weight: 700; color: var(--ink); }
.fw-benefit p { margin: 0; color: var(--text); font-size: 15.5px; font-weight: 500; }

/* Shop mount (frames [metroport_sklep]) */
.fw-shop-mount { margin-top: 8px; }
.fw-shop-mount .fws-shop, .fw-shop-mount .metroport-sklep { max-width: 100%; }

/* Promo callout */
.fw-callout {
  padding: 34px 30px; border-radius: 18px; color: #fff;
  background:
    radial-gradient(600px 300px at 110% -10%, rgba(64,192,240,.30), transparent 60%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.fw-callout h2 { margin: 0 0 14px; font-size: 26px; font-weight: 700; color: #fff !important; line-height: 1.2; }
.fw-callout p { margin: 0 0 24px; color: #cdd6ee !important; font-size: 16px; font-weight: 500; }
.fw-callout ul {
  margin: 0 0 26px; padding: 0 !important; list-style: none !important;
  display: grid; gap: 12px;
}
.fw .fw-callout ul li,
.fw-callout li {
  display: flex; gap: 11px; align-items: flex-start;
  color: #eef3ff !important; font-size: 15px; font-weight: 600;
  list-style: none !important; padding: 0; margin: 0; text-indent: 0;
}
/* usun ewentualne bullet-points dokladane przez motyw */
.fw-callout li::before { content: none !important; display: none !important; }
.fw-callout li::marker { content: "" !important; color: transparent !important; font-size: 0 !important; }
.fw-callout li svg { width: 20px; height: 20px; flex: none; color: var(--cyan); margin-top: 1px; }

/* Address / availability */
.fw-final {
  color: #fff;
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(64,192,240,.28), transparent 60%),
    linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 60%, #2c2c5c 100%);
}
.fw-final-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px; align-items: start; }
.fw-final h2 { margin: 0 0 12px; font-size: clamp(28px, 3.6vw, 38px); font-weight: 700; color: #fff; line-height: 1.14; }
.fw-final p { margin: 0; max-width: 560px; color: #d3dcf2; font-size: 18px; font-weight: 500; }

.fw-addr-mount {
  background: rgba(255,255,255,.96); border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px; padding: 22px; box-shadow: 0 24px 60px rgba(20,20,43,.32);
}
.fw-addr-mount > *:first-child { margin-top: 0; }
.fw-addr-mount > *:last-child { margin-bottom: 0; }

.fw-legal { padding: 26px 0 40px; color: var(--muted); font-size: 13px; font-weight: 500; }

/* Responsive */

/* Container queries: landing reaguje na szerokosc WLASNEGO kontenera,
   a nie okna. Dzieki temu w waskiej kolumnie motywu (np. z sidebarem)
   uklad lamie sie poprawnie zamiast sciskac tekst do jednego slowa. */

/* Fallback @media dla przegladarek bez container queries */
@media (max-width: 980px) {
  .fw-strip-card { grid-template-columns: 1fr; }
  .fw-strip-price { justify-content: stretch; }
  .fw-benefits { grid-template-columns: 1fr; }
  .fw-final-grid { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .fw-hero::before {
    background:
      linear-gradient(110deg, rgba(20,20,43,.96) 0%, rgba(20,20,43,.82) 56%, rgba(20,20,43,.4) 100%),
      var(--fw-hero-img, none) center right / cover no-repeat;
  }
}
@media (max-width: 600px) {
  .fw-hero { min-height: auto; align-items: flex-end; }
  .fw-hero::before {
    background:
      linear-gradient(180deg, rgba(20,20,43,.45) 0%, rgba(20,20,43,.9) 55%, rgba(20,20,43,.97) 100%),
      var(--fw-hero-img, none) center top / cover no-repeat;
  }
  .fw-hero__content { padding: 240px 0 48px; }
  .fw-section { padding: 56px 0; }
  .fw-strip { margin-top: -32px; }
  .fw-btn { width: 100%; justify-content: center; }
  .fw-actions .fw-btn { flex: 1; }
}