Stylizacja i poprawki w układzie

2025-11-26 08:00:00 +01:00
parent d3040f4917
commit 284009d411
56 changed files with 328 additions and 621 deletions
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
    "better-sqlite3": "^12.4.6",
    "globby": "^16.0.0",
    "js-yaml": "^4.1.0",
+    "jsdom": "^27.2.0",
    "marked": "^17.0.1",
    "nodemailer": "^7.0.10",
    "preact": "^10.27.2"
--- a/src/assets/hero/fiber2.webp
+++ b/src/assets/hero/fiber2.webp
--- a/src/assets/hero/section-fiber.webp
+++ b/src/assets/hero/section-fiber.webp
--- a/src/assets/hero/section-radiowy.webp
+++ b/src/assets/hero/section-radiowy.webp
--- a/src/assets/hero/section-telefon.webp
+++ b/src/assets/hero/section-telefon.webp
--- a/src/assets/hero/section-tv.webp
+++ b/src/assets/hero/section-tv.webp
--- a/src/assets/sections/fiber2.webp
+++ b/src/assets/sections/fiber2.webp
--- a/src/assets/sections/internet.webp
+++ b/src/assets/sections/internet.webp
--- a/src/assets/sections/section-fiber.webp
+++ b/src/assets/sections/section-fiber.webp
--- a/src/assets/sections/section-radiowy.webp
+++ b/src/assets/sections/section-radiowy.webp
--- a/src/assets/sections/section-range.webp
+++ b/src/assets/sections/section-range.webp
--- a/src/assets/sections/section-telefon.webp
+++ b/src/assets/sections/section-telefon.webp
--- a/src/assets/sections/section-tv.webp
+++ b/src/assets/sections/section-tv.webp
--- a/src/components/hero/Hero.astro
+++ b/src/components/hero/Hero.astro
@@ -38,7 +38,7 @@ const isLCP = true;
      fetchpriority={isLCP ? "high" : "auto"}
      decoding="async"
      format="webp"
-      widths={[640, 960, 1280, 1920]}
+      widths={[640, 960, 1280, 1350, 1920]}
      sizes="100vw"
    />
  )}
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -15,6 +15,7 @@ const footer = yaml.load(
        {footer.company.address.line1}<br />
        {footer.company.address.line2}
      </p>
+      <a href="/polityka-prywatnosci" title="Polityka prywatności">Polityka prywatności</a>
    </div>

    <div class="f-footer-col">
--- a/src/components/layout/Header.astro
+++ b/src/components/layout/Header.astro
@@ -20,7 +20,7 @@ const links = [
 <nav class="f-navbar">
  <div class="f-navbar-inner">
    <a href="/" class="flex items-center gap-2 font-semibold">
-      <img src="/assets/logo.webp" alt="FUZ Logo" class="my-0" />
+      <img src="/assets/logo.webp" alt="FUZ Logo" class="f-navbar-logo" />
    </a>

    <div class="hidden md:flex f-navbar-links">
--- a/src/components/sections/SectionDefault.astro
+++ b/src/components/sections/SectionDefault.astro
@@ -7,13 +7,11 @@ const { section, index } = Astro.props;
 const hasImage = !!section.image;
 const reverse = index % 2 === 1;

-// Automatyczny import obrazów sekcji
 const sectionImages = import.meta.glob<{ default: ImageMetadata }>(
  "/src/assets/sections/**/*.{png,jpg,jpeg,webp,avif}",
  { eager: true },
 );

-// Znajdź obraz zgodnie z YAML
 let sectionImage: ImageMetadata | null = null;

 if (section.image) {
@@ -23,17 +21,16 @@ if (section.image) {
 }
 ---

-<section class="fuz-section">
+<section class="f-section">
  <div
-    class={`fuz-section-grid ${hasImage ? "md:grid-cols-2" : "md:grid-cols-1"}`}
+    class={`f-section-grid ${hasImage ? "md:grid-cols-2" : "md:grid-cols-1"}`}
  >
    {
      sectionImage && (
        <Image
          src={sectionImage}
          alt={section.title}
-          class={`fuz-section-image ${reverse ? "md:order-1" : "md:order-2"} 
-        ${section.dimmed ? "fuz-image-dimmed" : ""}`}
+          class={`f-section-image ${reverse ? "md:order-1" : "md:order-2"} ${section.dimmed ? "f-image-dimmed" : ""}`}
          loading="lazy"
          decoding="async"
          format="webp"
@@ -44,15 +41,16 @@ if (section.image) {
    }

    <div
-      class={`fuz-section text-center ${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}
+      class={`f-section-grid ${hasImage ? (reverse ? "md:order-2" : "md:order-1") : ""}`}
    >
-      <h2 class="fuz-section-title">{section.title}</h2>
+    <!-- TODO: Styl nagłowka powinien byc trochę niżej -->
+      <h2 class="f-section-title">{section.title}</h2>

      <Markdown text={section.content} />

      {
        section.button && (
-          <div class="mt-8 flex justify-center">
+          <div class="f-section-nav">
            <a
              href={section.button.url}
              class="btn btn-outline"
--- a/src/components/sections/SectionRenderer.astro
+++ b/src/components/sections/SectionRenderer.astro
@@ -8,10 +8,8 @@ import SectionIframeChannels from "./SectionIframeChannels.astro";

 const { src } = Astro.props;

-// Load YAML
 const data = yaml.load(fs.readFileSync(src, "utf8")) ?? { sections: [] };

-// Markdown → HTML
 const sections = (data.sections as any[]).map((s: any) => ({
  ...s,
  html: marked(s.content || "")
--- a/src/content/internet-radiowy/hero.yaml
+++ b/src/content/internet-radiowy/hero.yaml
@@ -1,27 +0,0 @@
-title:
-  - Internet radiowy Wyszków i okolice
-subtitle:
-  - DLACZEGO INTERNET RADIOWY FUZ ?
-  - To szybkie i stabilne łącze bezprzewodowe
-  - Idealny dla domów i firm w miejscach, gdzie inne technologie zawodzą
-  - Szybka instalacja
-
-description: |
-  Internet radiowy to bezprzewodowa technologia dostępu do sieci, która sprawdza się idealnie tam, gdzie doprowadzenie kabli nie jest możliwe. 
-  Dzięki niezależności od nadajników GSM, nasza usługa jest często dostępna w miejscach, gdzie zasięg LTE czy 3G zawodzi.
-imageUrl: "section-radiowy.webp"
-ctas:
-  - label: "Zobacz ofertę internetu światłowodowego"
-    href: "/internet-swiatlowodowy"
-    title: "Przejdź do oferty Internetu światłowodowego"
-    primary: false
-
-  - label: "Zobacz ofertę Internetu + Telewizji"
-    href: "/internet-telewizja"
-    title: "Przejdź do oferty Internet + Telewizja w FUZ"
-    primary: false
-
-  - label: "Sprawdź dostępność"
-    href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ"
-    primary: false    
--- a/src/content/internet-radiowy/offers.yaml
+++ b/src/content/internet-radiowy/offers.yaml
@@ -1,82 +0,0 @@
-przelaczniki:
-  - id: "umowa"
-    etykieta: "Okres umowy"
-    domyslny: "24m"
-    title: Wybierz okres umowy by zobaczyć odpowiednie ceny
-    opcje:
-      - id: "24m"
-        nazwa: "24 miesiące"
-      - id: "12m"
-        nazwa: "12 miesięcy"
-      - id: "bezterminowa"
-        nazwa: "Bezterminowa"
-
-funkcje:
-  - id: "predkosc"
-    etykieta: "Prędkość pobierania"
-  - id: "wysylanie"
-    etykieta: "Prędkość wysyłania"
-  - id: "instalacja"
-    etykieta: "Aktywacja"
-  - id: "umowa_info"
-    etykieta: "Umowa"
-  - id: "adres_ip"
-    etykieta: "Adres IP"
-
-plany:
-  - id: "fuz-4"
-    nazwa: "FUZ-4"
-    predkosc: "4 Mb/s"
-    popularny: false
-    ceny:
-      24m: "38 zł/mc"
-      12m: "45 zł/mc"
-      bezterminowa: "80 zł/mc"
-    funkcje:
-      predkosc: "4 Mb/s"
-      wysylanie: "1 Mb/s"
-      sprzet: "W zestawie"
-      instalacja: "199 zł"
-      adres_ip: "Dynamiczny"
-
-  - id: "fuz-6"
-    nazwa: "FUZ-6"
-    predkosc: "6 Mb/s"
-    popularny: true
-    ceny:
-      24m: "45 zł/mc"
-      12m: "60 zł/mc"
-      bezterminowa: "110 zł/mc"
-    funkcje:
-      predkosc: "6 Mb/s"
-      wysylanie: "1 Mb/s"
-      instalacja: "199 zł"
-      adres_ip: "Dynamiczny"
-  
-  - id: "fuz-8"
-    nazwa: "FUZ-8"
-    predkosc: "8 Mb/s"
-    popularny: false
-    ceny:
-      24m: "55 zł/mc"
-      12m: "75 zł/mc"
-      bezterminowa: "120 zł/mc"
-    funkcje:
-      predkosc: "8 Mb/s"
-      wysylanie: "1.5 Mb/s"
-      instalacja: "199 zł"
-      adres_ip: "Dynamiczny"
-
-  - id: "fuz-10"
-    nazwa: "FUZ-10"
-    predkosc: "10 Mb/s"
-    popularny: false
-    ceny:
-      24m: "80 zł/mc"
-      12m: "110 zł/mc"
-      bezterminowa: "160 zł/mc"
-    funkcje:
-      predkosc: "10 Mb/s"
-      wysylanie: "2 Mb/s"
-      instalacja: "199 zł"
-      adres_ip: "Dynamiczny"
--- a/src/content/internet-radiowy/page.yaml
+++ b/src/content/internet-radiowy/page.yaml
@@ -1,23 +0,0 @@
-title:
-  - PAKIET RADIOWY WYSZKÓW I OKOLICE
-paragraphs:
-  - title:
-    content: |
-      Internet radiowy to bezprzewodowa technologia dostępu do sieci, która sprawdza się idealnie tam, gdzie doprowadzenie kabli nie jest możliwe. 
-      
-      Dzięki niezależności od nadajników GSM, nasza usługa jest często dostępna w miejscach, gdzie zasięg LTE czy 3G zawodzi.
-
-      W przeciwieństwie do internetu mobilnego, oferujemy nielimitowany dostęp do sieci. 
-      
-      Możesz korzystać z internetu bez obaw o wyczerpanie pakietu danych – oglądaj, pobieraj i surfuj bez żadnych ograniczeń.
-
-      Sprawdź dostępność internetu radiowego FUZ w Twojej okolicy i ciesz się swobodą dostępu do sieci.
-
-  - title:
-    content: 
-      Dostępność usług zależy od lokalizacji abonenta.
-      
-      Zapraszamy do kontaktu w celu sprawdzenia zasięgu.
-
-
-# Kolejne sekcje mozna dodawać poja wiać się bedą pod tabela produktów
--- a/src/content/internet-radiowy/seo.yaml
+++ b/src/content/internet-radiowy/seo.yaml
@@ -1,17 +0,0 @@
-site:
-  name: "FUZ – Internet światłowodowy i radiowy w Wyszkowie"
-  description: "Stabilny i szybki internet"
-  url: "https://www.fuz.pl"
-  lang: "pl"
-
-company:
-  name: "FUZ Adam Rojek"
-  phone: "+48 (29) 643 80 55"
-  email: "biuro@fuz.pl"
-  street: "ul. Świętojańska 46"
-  city: "Wyszków"
-  postal: "07-200"
-  country: "PL"
-  lat: 52.597385
-  lon: 21.456797
-  logo: "/images/logo-fuz.webp"
--- a/src/content/internet-swiatlowodowy/hero.yaml
+++ b/src/content/internet-swiatlowodowy/hero.yaml
@@ -8,21 +8,21 @@ subtitle:
  - Lokalny operator, znamy Twoją okolicę

 description: |
-  Szybki i stabilny Internet światłowodowy i radiowy w Wyszkowie oraz okolicach. 
+  Szybki i stabilny Internet światłowodowy w Wyszkowie oraz okolicach. 
  Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
 imageUrl: "section-fiber.webp"
 ctas:
-  - label: "Zobacz ofertę Internetu Radiowego"
-    href: "/internet-radiowy"
-    primary: false
-    title: "Przejdź do oferty Internetu radiowego"
-
  - label: "Zobacz ofertę Internetu + Telewizja"
    href: "/internet-telewizja"
    title: "Przejdź do oferty Internet + Telewizja w FUZ"
    primary: false

+  - label: "Zobacz ofertę telefonu "
+    href: "/telefon"
+    primary: false
+    title: "Przejdź do oferty telefonu"
+
  - label: "Sprawdź dostępność"
    href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ"
+    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
    primary: false  
--- a/src/content/internet-swiatlowodowy/offers.yaml
+++ b/src/content/internet-swiatlowodowy/offers.yaml
@@ -36,7 +36,7 @@ funkcje:
  - id: "adres_ip"
    etykieta: "Adres IP"

-# PLANY – jedna lista, ceny zależą od kombinacji przełączników
+plany_title: 
 plany:
  - id: "fiber100"
    nazwa: "FIBER 100"
@@ -44,13 +44,13 @@ plany:
    popularny: false
    ceny:
      jednorodzinny:
-        # 12m: "59 zł/mies."
-        24m: "64 zł/mies."
-        bezterminowa: "84 zł/mies."
+        # 12m: "59 zł/mc"
+        24m: "64 zł/mc"
+        bezterminowa: "84 zł/mc"
      wielorodzinny:
-        # 12m: "55 zł/mies."
-        24m: "54 zł/mies."
-        bezterminowa: "74 zł/mies."
+        # 12m: "55 zł/mc"
+        24m: "54 zł/mc"
+        bezterminowa: "74 zł/mc"
    funkcje:
      pobieranie: "do 100 Mb/s"
      wysylanie: "do 50 Mb/s"
@@ -66,13 +66,13 @@ plany:
    popularny: true
    ceny:
      jednorodzinny:
-        # 12m: "79 zł/mies."
-        24m: "75 zł/mies."
-        bezterminowa: "95 zł/mies."
+        # 12m: "79 zł/mc"
+        24m: "75 zł/mc"
+        bezterminowa: "95 zł/mc"
      wielorodzinny:
-        # 12m: "69 zł/mies."
-        24m: "65 zł/mies."
-        bezterminowa: "85 zł/mies."
+        # 12m: "69 zł/mc"
+        24m: "65 zł/mc"
+        bezterminowa: "85 zł/mc"
    funkcje:
      pobieranie: "do 300 Mb/s"
      wysylanie: "do 150 Mb/s"
@@ -87,11 +87,11 @@ plany:
    popularny: false
    ceny:
      jednorodzinny:
-        24m: "85 zł/mies."
-        bezterminowa: "105 zł/mies."
+        24m: "85 zł/mc"
+        bezterminowa: "105 zł/mc"
      wielorodzinny:
-        24m: "75 zł/mies."
-        bezterminowa: "95 zł/mies."
+        24m: "75 zł/mc"
+        bezterminowa: "95 zł/mc"
    funkcje:
      pobieranie: "do 600 Mb/s"
      wysylanie: "do 300 Mb/s"
@@ -100,6 +100,13 @@ plany:
      instalacja: "149 zł"
      adres_ip: "Dynamiczny"

+uslugi:
+  title: Usługi dodatkowe
+  description: Do wybranej opcji możesz dokupić dotakowe usługi.
+  items:
+    - Nazwa usługi
+    - Cena
+    - Szczegóły
 uslugi_dodatkowe:
  - id: "public_ip"
    nazwa: "Publiczny adres IP"
--- a/src/content/internet-swiatlowodowy/page.yaml
+++ b/src/content/internet-swiatlowodowy/page.yaml
@@ -6,13 +6,13 @@ paragraphs:
    content: |
      Światłowody to najbardziej zaawansowana technologia przesyłu danych. 
      
-      Gwarantują błyskawiczną prędkość, stabilność i niezawodność – bez względu na warunki.
+      Gwarantują błyskawiczną prędkość, stabilność i niezawodność bez względu na warunki.

      Dedykowane pasmo,pełna prędkość tylko dla Ciebie.

      Stała jakość, pogoda ani liczba użytkowników w sieci nie mają znaczenia.

-      Wiele urządzeń jednocześnie, komputer, telefon, tablet, konsola – wszystko działa płynnie.
+      Wiele urządzeń jednocześnie, komputer, telefon, tablet, konsola wszystko działa płynnie.

      Światłowód to również dostęp do telewizji i telefonu w najwyższej jakości.
  
--- a/src/content/internet-swiatlowodowy/section.yaml
+++ b/src/content/internet-swiatlowodowy/section.yaml
@@ -1,18 +1,16 @@
 sections:
  - title: Sprawdź dostępność usługi
-    image: "internet.webp"
+    image: section-range.webp
    button:
      text: "Sprawdź dostępność pod Twoim adresem →"
      url: "/mapa-zasiegu" 
-      title: "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ"  
+      title: "Sprawdź zasięg Internetu światłowodowego FUZ"  
    content: |
-      Światłowody nie docierają jeszcze niestety do wszystkich domów.
+      Naszą sieć światłowodową systematycznie rozbudowujemy, ale infrastruktura nie dociera jeszcze do wszystkich adresów. 

-      [Sprawdź](/mapa-zasięgu "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ") czy pod Twoim adresem dostępna jest nasza usługa internetu światłowodowego.
+      Proces budowy wymaga czasu może jednak akurat Twoja lokalizacja jest już podłączona?

-      Tam gdzie nie docierają światłowody stosuje się inne technologie. 
-      
-      Jeśli pod Twoim adresem nie ma jeszcze usług światłowodowych, to sprawdź czy dociera tam nasz [internet radiowy](/internet-radiowy "Przejdź do oferty Internetu radiowego").
+      [Sprawdź](/mapa-zasięgu "Sprawdź zasięg naszego Internetu") na interaktywnej mapie, czy internet światłowodowy jest już dostępny pod Twoim adresem.

  - title: Router WiFi 5 AC1200
    image: "E5400.webp"
--- a/src/content/internet-swiatlowodowy/seo.yaml
+++ b/src/content/internet-swiatlowodowy/seo.yaml
@@ -1,5 +1,5 @@
 site:
-  name: "FUZ – Internet światłowodowy i radiowy w Wyszkowie"
+  name: "FUZ – Internet światłowodowy w Wyszkowie"
  description: "Stabilny i szybki internet w Wyszkowie i okolicach"
  url: "https://www.fuz.pl"
  lang: "pl"
@@ -17,13 +17,13 @@ company:
  logo: "/images/logo-fuz.webp"

 page:
-  title: "FUZ – Internet światłowodowy i radiowy w Wyszkowie"
-  description: "Szybki, stabilny internet światłowodowy i radiowy w Wyszkowie. Lokalny operator, realny serwis, błyskawiczne wsparcie."
+  title: "FUZ – Internet światłowodowy w Wyszkowie"
+  description: "Szybki, stabilny internet światłowodowy w Wyszkowie. Lokalny operator, realny serwis, błyskawiczne wsparcie."
  image: "/images/og-home.webp"
  url: "/"
  keywords:
    - internet Wyszków
    - światłowód Wyszków
-    - internet radiowy Wyszków
+    - internet światłowodowy Wyszków
    - lokalny operator internetu
  schema: {}
--- a/src/content/internet-telewizja/hero.yaml
+++ b/src/content/internet-telewizja/hero.yaml
@@ -23,5 +23,5 @@ ctas:

  - label: "Sprawdź dostępność"
    href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ"
+    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
    primary: false   
--- a/src/content/internet-telewizja/offers.yaml
+++ b/src/content/internet-telewizja/offers.yaml
@@ -35,6 +35,7 @@ funkcje:
  - id: "instalacja"
    etykieta: "Aktywacja"

+plany_title: 
 plany:
  - id: "pakiet-1"
    nazwa: "SMART"
@@ -150,6 +151,13 @@ plany:
      umowa_info: "24 / Bezterminowa"
      instalacja: "99 zł"

+uslugi:
+  title: Usługi dodatkowe
+  description: Do wybranej opcji możesz dokupić dotakowe usługi.
+  items:
+    - Nazwa usługi
+    - Cena
+    - Szczegóły
 uslugi_dodatkowe:
  - id: "public_ip"
    nazwa: "Publiczny adres IP"
--- a/src/content/internet-telewizja/page.yaml
+++ b/src/content/internet-telewizja/page.yaml
@@ -10,7 +10,7 @@ paragraphs:

      Jedna umowa, jeden rachunek, jedno miejsce kontaktu. Internet, telewizja i telefon – wszystko w jednym miejscu. Jeśli masz pytania lub potrzebujesz pomocy, jesteśmy do Twojej dyspozycji.

-      Oszczędzaj czas i ciesz się prostotą – wszystko, czego potrzebujesz, w jednym miejscu.
+      Oszczędzaj czas i ciesz się prostotą, wszystko czego potrzebujesz, w jednym miejscu.

 # Kolejne sekcje mozna dodawać poja wiać się bedą pod tabela produktów

--- a/src/content/internet-telewizja/seo.yaml
+++ b/src/content/internet-telewizja/seo.yaml
@@ -1,5 +1,5 @@
 site:
-  name: "FUZ – Internet światłowodowy i radiowy w Wyszkowie"
+  name: "FUZ – Internet światłowodowy w Wyszkowie"
  description: "Stabilny i szybki internet"
  url: "https://www.fuz.pl"
  lang: "pl"
--- a/src/content/site/site.section.yaml
+++ b/src/content/site/site.section.yaml
@@ -24,19 +24,6 @@ sections:

     Korzystaj z internetu bez limitów i oglądaj swoje ulubione programy w perfekcyjnej jakości — w jednym prostym pakiecie.

-  - title: "Internet Radiowy"
-    image: "section-radiowy.webp"
-    dimmed: true
-    type: default
-    button:
-      text: "Zobacz ofertę Internetu Radiowego →"
-      url: "/internet-radiowy/" 
-      title: "Przejdź do oferty Internetu radiowego"  
-    content: |
-     Nowoczesna technologia radiowa gwarantuje stabilny internet o wysokiej wydajności tam, gdzie inne łącza nie mają szans. 
-     
-     To szybki start w świat cyfrowej pracy i rozrywki — bez konieczności instalacji kabli.
-
  - title: "Telefon"
    image: "section-telefon.webp"
    dimmed: true
--- a/src/content/telefon/hero.yaml
+++ b/src/content/telefon/hero.yaml
@@ -7,7 +7,7 @@ subtitle:
  - Wszystko, czego potrzebujesz w jednym miejscu
 description: |
  Dziś dla wielu to niezbędne narzędzie pełne funkcji – „bez telefonu jak bez ręki". 
-imageUrl: "section-telefon.webp"
+imageUrl: section-telefon.webp
 ctas:
  - label: "Zobacz ofertę internetu światłowodowego"
    href: "/internet-swiatlowodowy"
@@ -21,5 +21,5 @@ ctas:

  - label: "Sprawdź dostępność"
    href: "/mapa-zasiegu"
-    title: "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ"
+    title: "Sprawdź zasięg Internetu światłowodowego FUZ"
    primary: false   
--- a/src/content/telefon/offers.yaml
+++ b/src/content/telefon/offers.yaml
@@ -8,6 +8,7 @@ funkcje:
  - id: "instalacja"
    etykieta: "Aktywacja"

+plany_title: 
 plany:
  - id: "tele30"
    nazwa: "TELE 30"
--- a/src/content/telefon/seo.yaml
+++ b/src/content/telefon/seo.yaml
@@ -1,5 +1,5 @@
 site:
-  name: "FUZ – Internet światłowodowy i radiowy w Wyszkowie"
+  name: "FUZ – Internet światłowodowy w Wyszkowie"
  description: "Stabilny i szybki internet"
  url: "https://www.fuz.pl"
  lang: "pl"
--- a/src/islands/Offers/OffersExtraServices.jsx
+++ b/src/islands/Offers/OffersExtraServices.jsx
@@ -6,39 +6,41 @@ export default function OffersExtraServices({
  extraServices,
  openId,
  toggle,
+  services
 }) {
  if (!extraServices.length) return null;

  return (
-    <div class="fuz-extra-services">
-      <h1 class="fuz-title-small">Usługi dodatkowe</h1>
+    <div class="f-extra-services">
+      <h1 class="f-services-title">{services.title}</h1>
+      <p class="f-services-body">{services.description}</p>

-      <div class="fuz-table-wrapper">
-        <table class="fuz-table">
-          <thead class="fuz-table-head">
+      <div class="f-table-wrapper">
+        <table class="f-table">
+          <thead class="f-table-head">
            <tr>
-              <th class="fuz-table-heading">Usługa</th>
-              <th class="fuz-table-heading center">Cena</th>
-              <th class="fuz-table-heading center w-32">Więcej</th>
+              <th class="f-table-heading">{services.items[0]}</th>
+              <th class="f-table-heading center">{services.items[1]}</th>
+              <th class="f-table-heading center w-32">{services.items[2]}</th>
            </tr>
          </thead>

          <tbody>
            {extraServices.map((srv, i) => (
              <>
-                <tr class={i % 2 === 0 ? "fuz-row-even" : "fuz-row-odd"}>
-                  <td class="fuz-feature-name">{srv.nazwa}</td>
-                  <td class="fuz-feature-cell center">{srv.cena}</td>
-                  <td class="fuz-feature-cell-btn center">
-                    <button class="btn-link" onClick={() => toggle(srv.id)} title={openId === srv.id ? "Zwiń opis usługi" : "Rozwiń opis usługi"}>
-                      {openId === srv.id ? "Zwiń" : "Więcej"}
+                <tr class={i % 2 === 0 ? "f-row-even" : "f-row-odd"}>
+                  <td class="f-feature-name">{srv.nazwa}</td>
+                  <td class="f-feature-cell center">{srv.cena}</td>
+                  <td class="f-feature-cell-btn center">
+                    <button class="f-feature-link" onClick={() => toggle(srv.id)} title={openId === srv.id ? "Zwiń opis usługi" : "Rozwiń opis usługi"}>
+                      {openId === srv.id ? "Zwiń" : "Przeczytaj ..."}
                    </button>
                  </td>
                </tr>

                {openId === srv.id && (
                  <tr>
-                    <td colSpan={3} class="fuz-expand-details">
+                    <td colSpan={3} class="f-expand-details">
                      <FuzMarkdown text={srv.opis} ctx={{ kanaly: srv.kanaly }} />
                    </td>
                  </tr>
--- a/src/islands/Offers/OffersSwitches.jsx
+++ b/src/islands/Offers/OffersSwitches.jsx
@@ -1,17 +1,17 @@
-import "../../styles/offers/offers-switches.css";
+// import "../../styles/offers/offers-switches.css";

 export default function OffersSwitches({ switches, selected, onSwitch }) {
  if (!switches.length) return null;

  return (
-    <div class="fuz-switches-wrapper">
+    <div class="f-switches-wrapper">
      {switches.map((sw) => (
-        <div class="fuz-switch-block">
-          <div class="fuz-switch-group">
+        <div class="f-switch-box">
+          <div class="f-switch-group">
            {sw.opcje.map((op) => (
              <button
                type="button"
-                class={`fuz-switch ${selected[sw.id] === op.id ? "active" : ""
+                class={`f-switch ${selected[sw.id] === op.id ? "active" : ""
                  }`}
                onClick={() => onSwitch(sw.id, op.id)}
                title={sw.title}
--- a/src/islands/Offers/OffersTable.jsx
+++ b/src/islands/Offers/OffersTable.jsx
@@ -3,25 +3,24 @@ import { getActiveLabel } from "../../helpers/getActiveLabel";
 import "../../styles/offers/offers-table.css";


-export default function OffersTable({ switches, selected, plans, features }) {
+export default function OffersTable({ switches, selected, plans, features, plan_title }) {
  return (
-    <div class="fuz-table-wrapper">
-      <table class="fuz-table">
-        <thead class="fuz-table-head">
+    <div class="f-table-wrapper">
+      <table class="f-table">
+        <thead class="f-table-head">
          <tr>
-            <th class="fuz-table-heading">Parametr</th>
-
+            <th class="f-table-heading">{plan_title}</th>
            {plans.map((plan) => (
              <th
-                class={`fuz-plan-heading ${
-                  plan.popularny ? "is-popular fuz-popular-top" : ""
+                class={`f-plan-heading ${plan.popularny ? "is-popular f-popular-top" : ""
                  }`}
              >
-                <div class="fuz-plan-title">{plan.nazwa}</div>
-                <div class="fuz-plan-price">
+                {/* {plan.popularny && (<div class="f-popular-badge">Popularny</div>)} */}
+                <div class="f-plan-title">{plan.nazwa}</div>
+                <div class="f-plan-price">
                  {getPrice(plan, switches, selected)}
                </div>
-                <div class="fuz-plan-speed">{plan.predkosc}</div>
+                {/* <div class="f-plan-speed">{plan.predkosc}</div> */}
              </th>
            ))}
          </tr>
@@ -29,8 +28,8 @@ export default function OffersTable({ switches, selected, plans, features }) {

        <tbody>
          {features.map((f, rowIndex) => (
-            <tr class={rowIndex % 2 === 0 ? "fuz-row-even" : "fuz-row-odd"}>
-              <td class="fuz-feature-name">{f.etykieta}</td>
+            <tr class={rowIndex % 2 === 0 ? "f-row-even" : "f-row-odd"}>
+              <td class="f-feature-name">{f.etykieta}</td>

              {plans.map((plan) => {
                const isPopular = plan.popularny;
@@ -39,10 +38,8 @@ export default function OffersTable({ switches, selected, plans, features }) {
                if (f.id === "umowa_info") {
                  return (
                    <td
-                      class={`fuz-feature-cell ${
-                        isPopular
-                          ? `is-popular ${
-                              isLastRow ? "fuz-popular-bottom" : ""
+                      class={`f-feature-cell ${isPopular
+                          ? `is-popular ${isLastRow ? "f-popular-bottom" : ""
                          }`
                          : ""
                        }`}
@@ -56,17 +53,15 @@ export default function OffersTable({ switches, selected, plans, features }) {

                const baseClass =
                  val === true
-                    ? "fuz-feature-yes"
+                    ? "f-feature-yes"
                    : val === false || val == null
-                    ? "fuz-feature-no"
-                    : "fuz-feature-cell";
+                      ? "f-feature-no"
+                      : "f-feature-cell";

                return (
                  <td
-                    class={`${baseClass} ${
-                      isPopular
-                        ? `is-popular ${
-                            isLastRow ? "fuz-popular-bottom" : ""
+                    class={`${baseClass} ${isPopular
+                        ? `is-popular ${isLastRow ? "f-popular-bottom" : ""
                        }`
                        : ""
                      }`}
--- a/src/islands/OffersIsland.jsx
+++ b/src/islands/OffersIsland.jsx
@@ -4,13 +4,15 @@ import FuzMarkdown from "./Markdown.jsx";
 import OffersSwitches from "./Offers/OffersSwitches.jsx";
 import OffersTable from "./Offers/OffersTable.jsx";
 import OffersExtraServices from "./Offers/OffersExtraServices.jsx";
-import "../styles/offers/offers-main.css";
+// import "../styles/offers/offers-main.css";

 export default function InternetOffersIsland({ data }) {
  const switches = data.przelaczniki ?? [];
  const features = data.funkcje ?? [];
  const plans = data.plany ?? [];
+  const plan_title = data.plany_title ?? "";
  const extraServices = data.uslugi_dodatkowe ?? [];
+  const services = data.uslugi ?? [];

  const initialSelected = {};
  switches.forEach((sw) => {
@@ -27,10 +29,10 @@ export default function InternetOffersIsland({ data }) {
    setSelected((prev) => ({ ...prev, [switchId]: optionId }));

  return (
-    <section class="fuz-offers-section">
-      <div class="fuz-offers-container">
+    <section class="f-offers-section">
+      <div class="f-offers-container">
        {data.opis_gorny && (
-          <div class="fuz-offers-description">
+          <div class="f-offers-description">
            <FuzMarkdown text={data.opis_gorny} />
          </div>
        )}
@@ -46,12 +48,14 @@ export default function InternetOffersIsland({ data }) {
          selected={selected}
          plans={plans}
          features={features}
+          plan_title={plan_title}
        />

        <OffersExtraServices
          extraServices={extraServices}
          openId={openServiceId}
          toggle={toggleService}
+          services={services}
        />

        {data.opis_dolny && (
--- a/src/pages/internet-radiowy/index.astro
+++ b/src/pages/internet-radiowy/index.astro
@@ -1,54 +0,0 @@
---
-import DefaultLayout from "../../layouts/DefaultLayout.astro";
-import Hero from "../../components/hero/Hero.astro";
-import Markdown from "../../islands/Markdown.jsx";
-import OffersIsland from "../../islands/OffersIsland.jsx";
-
-import yaml from "js-yaml";
-import fs from "fs";
-
-const seo = yaml.load(
-  fs.readFileSync("./src/content/internet-radiowy/seo.yaml", "utf8"),
-);
-const hero = yaml.load(
-  fs.readFileSync("./src/content/internet-radiowy/hero.yaml", "utf8"),
-);
-const page = yaml.load(
-  fs.readFileSync("./src/content/internet-radiowy/page.yaml", "utf8"),
-);
-
-type Paragraph = {
-  title?: string;
-  content: string;
-};
-
-const data = yaml.load(
-  fs.readFileSync("./src/content/internet-radiowy/offers.yaml", "utf8"),
-);
-const first = page.paragraphs[0];
-const rest = page.paragraphs.slice(1);
---
-
-<DefaultLayout seo={seo}>
-  <Hero {...hero} />
-
-  <section class="fuz-section text-center">
-    <div class="fuz-section-grid md:grid-cols-1">
-      {page.title.map((line: any) => <h1 class="fuz-section-title">{line}</h1>)}
-      {first.title && <h3>{first.title}</h3>}
-      <Markdown text={first.content} />
-    </div>
-  </section>
-
-  <OffersIsland client:load data={data} />
-  {
-    rest.map((p: Paragraph) => (
-      <section class="fuz-section text-center">
-        <div class="fuz-section-grid md:grid-cols-1">
-          {p.title && <h3 class="fuz-section-title">{p.title}</h3>}
-          <Markdown text={p.content.replace(/\n/g, "\n\n")} />
-        </div>
-      </section>
-    ))
-  }
-</DefaultLayout>
--- a/src/pages/internet-swiatlowodowy/index.astro
+++ b/src/pages/internet-swiatlowodowy/index.astro
@@ -33,9 +33,9 @@ const rest = page.paragraphs.slice(1);
 <DefaultLayout seo={seo}>
  <Hero {...hero} />

-  <section class="fuz-section text-center">
-    <div class="fuz-section-grid md:grid-cols-1">
-      {page.title.map((line: any) => <h1 class="fuz-section-title">{line}</h1>)}
+  <section class="f-section">
+    <div class="f-section-grid-single md:grid-cols-1">
+      {page.title.map((line: any) => <h1 class="f-section-title">{line}</h1>)}
      {first.title && <h3>{first.title}</h3>}
      <Markdown text={first.content} />
    </div>
@@ -44,21 +44,14 @@ const rest = page.paragraphs.slice(1);
  <OffersIsland client:load data={data} />

  {rest.map((p: Paragraph) => (
-  <section class="fuz-section text-center">
-    <div class="fuz-section-grid md:grid-cols-1">
-      {p.title && <h3 class="fuz-section-title">{p.title}</h3>}
+  <section class="f-section">
+    <div class="f-section-grid-single md:grid-cols-1">
+      {p.title && <h3 class="f-section-title">{p.title}</h3>}
      <Markdown text={p.content.replace(/\n/g, "\n\n")} />
    </div>
  </section>
 ))}

  <SectionRenderer src="./src/content/internet-swiatlowodowy/section.yaml" />
-  <!-- <section class="fuz-section">
-    <div class="fuz-container">
-      <h1 class="fuz-hero-title">Internet – FUZ</h1>
-      <p class="mt-4 text-gray-600 dark:text-gray-300">
-        Ta podstrona jest na razie szkieletem. Możemy tu później wczytać treść z YAML.
-      </p>
-    </div>
-  </section> -->
+
 </DefaultLayout>
--- a/src/pages/internet-telewizja/index.astro
+++ b/src/pages/internet-telewizja/index.astro
@@ -37,9 +37,9 @@ const rest = page.paragraphs.slice(1);
 <DefaultLayout seo={seo}>
  <Hero {...hero} />

-  <section class="fuz-section text-center">
-    <div class="fuz-section-grid md:grid-cols-1">
-      {page.title.map((line: any) => <h1 class="fuz-section-title">{line}</h1>)}
+  <section class="f-section">
+    <div class="f-section-grid-single md:grid-cols-1">
+      {page.title.map((line: any) => <h1 class="f-section-title">{line}</h1>)}
      {first.title && <h3>{first.title}</h3>}
      <Markdown text={first.content} />
    </div>
@@ -48,9 +48,9 @@ const rest = page.paragraphs.slice(1);
  <OffersIsland client:load data={data} />
  {
    rest.map((p: Paragraph) => (
-      <section class="fuz-section text-center">
-        <div class="fuz-section-grid md:grid-cols-1">
-          {p.title && <h3 class="fuz-section-title">{p.title}</h3>}
+      <section class="f-section">
+        <div class="f-section-grid-single md:grid-cols-1">
+          {p.title && <h3 class="f-section-title">{p.title}</h3>}
          <Markdown text={p.content.replace(/\n/g, "\n\n")} />
        </div>
      </section>
--- a/src/pages/polityka-prywatnosci/index.astro
+++ b/src/pages/polityka-prywatnosci/index.astro
@@ -10,9 +10,9 @@ const privacy = yaml.load(
 ---

 <DefaultLayout title={privacy.title}>
-    <section class="fuz-section">
-        <div class="fuz-section-grid">
-            <h1 class="text-3xl font-bold">
+    <section class="f-section">
+        <div class="f-section-grid-single">
+            <h1 class="f-section-title">
                {privacy.title}
            </h1>
            <Markdown text={privacy.content} />
--- a/src/pages/telefon/index.astro
+++ b/src/pages/telefon/index.astro
@@ -33,9 +33,9 @@ const rest = page.paragraphs.slice(1);
 <DefaultLayout seo={seo}>
  <Hero {...hero} />

-  <section class="fuz-section text-center">
-    <div class="fuz-section-grid md:grid-cols-1">
-      {page.title.map((line: any) => <h1 class="fuz-section-title">{line}</h1>)}
+  <section class="f-section">
+    <div class="f-section-grid-single md:grid-cols-1">
+      {page.title.map((line: any) => <h1 class="f-section-title">{line}</h1>)}
      {first.title && <h3>{first.title}</h3>}
      <Markdown text={first.content} />
    </div>
@@ -44,9 +44,9 @@ const rest = page.paragraphs.slice(1);
  <OffersIsland client:load data={data} />
  {
    rest.map((p: Paragraph) => (
-      <section class="fuz-section text-center">
-        <div class="fuz-section-grid md:grid-cols-1">
-          {p.title && <h3 class="fuz-section-title">{p.title}</h3>}
+      <section class="f-section">
+        <div class="f-section-grid-single md:grid-cols-1">
+          {p.title && <h3 class="f-section-title">{p.title}</h3>}
          <Markdown text={p.content.replace(/\n/g, "\n\n")} />
        </div>
      </section>
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -1,3 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
+/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */
+/* @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap'); */
+
@import "./tailwind.css";
@import "./theme.css";
@import "./navbar.css";
@@ -8,6 +12,21 @@
@import "./footer.css";
@import "./cookie.css";
@import "./contact.css";
+@import "./offers/offers-main.css";
+@import "./offers/offers-switches.css";
+
+
+html {
+  font-family: 'Nunito', sans-serif;
+  /* font-family: "Lora", sans-serif; */
+  font-optical-sizing: auto;
+  font-weight: 500;
+  scroll-behavior: smooth;
+}
+
+body {
+  /* @apply bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100 antialiased; */
+}

 .grecaptcha-badge {
  display: none !important;
--- a/src/styles/footer.css
+++ b/src/styles/footer.css
@@ -1,6 +1,6 @@
@layer components {
    .f-footer {
-        @apply mt-0 border-t border-[var(--fuz-border)] bg-[var(--f-background)] text-[var(--f-text)] pt-2;
+        @apply mt-2 border-t border-[var(--f-input-border)] bg-[var(--f-background-o)] text-[var(--f-text)] pt-2;
    }

    .f-footer-inner {
--- a/src/styles/hero.css
+++ b/src/styles/hero.css
@@ -8,7 +8,7 @@
 }

 .f-hero-bg {
-  @apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.7];
+  @apply absolute top-0 left-0 w-full h-full object-cover opacity-[0.4];
 }

 .f-hero-inner {
--- a/src/styles/markdown.css
+++ b/src/styles/markdown.css
@@ -41,8 +41,7 @@
 }

 .fuz-markdown a {
-  @apply no-underline hover:no-underline;
-  color: var(--fuz-accent);
+  @apply no-underline hover:no-underline text-[var(--f-link-text)];
 }

 .fuz-markdown button.modal-link {
--- a/src/styles/navbar.css
+++ b/src/styles/navbar.css
@@ -31,3 +31,7 @@
  @apply text-lg py-2 border-b text-[var(--f-text)] hover:text-[var(--fuz-accent)];
  border-color: var(--f-border-color);
 }
+
+.f-navbar-logo{
+  @apply w-[70] h-[36];
+}
--- a/src/styles/offers/offers-extra.css
+++ b/src/styles/offers/offers-extra.css
@@ -1,27 +1,22 @@
-.fuz-extra-services {
-  @apply mt-16;
-  color: var(--f-text);
+.f-extra-services {
+  @apply mt-6 max-w-6xl mx-auto;
 }

-.fuz-title-small {
-  @apply text-xl font-semibold mb-4;
-  color: var(--f-text);
+.f-services-title {
+  @apply text-2xl font-semibold mb-4 ml-10;
+}
+.f-services-body {
+  @apply text-lg font-semibold mb-4 ml-10;
 }

-.fuz-expand-details {
+.f-expand-details {
  @apply px-4 py-4;
-  background: rgba(0, 0, 0, 0.04);
 }

-:root.dark .fuz-expand-details {
-  background: rgba(255, 255, 255, 0.04);
+.f-feature-link {
+  @apply underline cursor-pointer w-full h-full text-[var(--f-link-text)];
 }

-.btn-link {
-  @apply underline cursor-pointer;
-  color: var(--fuz-accent);
-}
-
-.btn-link:hover {
-  opacity: 0.7;
+.f-feature-link:hover {
+  @apply text-[var(--f-link-text-hover)];
 }
--- a/src/styles/offers/offers-main.css
+++ b/src/styles/offers/offers-main.css
@@ -1,14 +1,11 @@
 .fuz-offers-section {
-  @apply py-12;
-  background: var(--f-background);
-  color: var(--f-text);
+  @apply py-6;
 }

-.fuz-offers-container {
+.f-offers-container {
  @apply max-w-7xl mx-auto px-6;
 }

-.fuz-offers-description {
+.f-offers-description {
  @apply mb-10 text-base leading-relaxed;
-  color: var(--f-text);
 }
--- a/src/styles/offers/offers-switches.css
+++ b/src/styles/offers/offers-switches.css
@@ -1,31 +1,19 @@
-.fuz-switches-wrapper {
+.f-switches-wrapper {
  @apply flex flex-wrap justify-center gap-6 mb-12;
 }

-.fuz-switch-group {
-  @apply inline-flex overflow-hidden relative;
-  background: rgba(0, 0, 0, 0.08);
+.f-switch-group {
+  @apply inline-flex overflow-hidden relative bg-[var(--f-background-switch)];
 }

-:root.dark .fuz-switch-group {
-  background: rgba(255, 255, 255, 0.12);
-}
-
-
-
-.fuz-switch {
+.f-switch {
  @apply px-6 py-2 text-sm font-semibold cursor-pointer select-none transition-all;
-  color: var(--f-text);
-  /* opacity: 0.7; */
 }

-.fuz-switch:hover {
-  /* opacity: 0.9; */
+.f-switch.active {
+  @apply text-[var(--f-text-switcher)]  bg-[var(--f-background-switcher)] ;
 }

-.fuz-switch.active {
-  background: var(--fuz-accent);
-  color: var(--btn-text);
-  /* opacity: 1; */
-  /* box-shadow: 0 2px 8px rgba(0,0,0,0.18); */
+.f-switch:hover {
+  @apply opacity-[0.6]
 }
--- a/src/styles/offers/offers-table.css
+++ b/src/styles/offers/offers-table.css
@@ -1,212 +1,96 @@
-/* =========================================
-   TABELA — KONTENER
-   ========================================= */
-
-.fuz-table-wrapper {
-  @apply overflow-x-auto rounded-3xl shadow-lg mb-0;
-  background: var(--f-background);
-  border: 1px solid rgba(0,0,0,0.07);
+.f-table-wrapper {
+  @apply overflow-x-auto rounded-3xl shadow-lg mb-0 border border-[var(--f-offers-border)];
 }

-:root.dark .fuz-table-wrapper {
-  border: 1px solid rgba(255,255,255,0.12);
-}
-
-.fuz-table {
+.f-table {
  @apply min-w-full border-collapse;
-  color: var(--f-text);
 }

-
-
-/* =========================================
-   NAGŁÓWEK
-   ========================================= */
-
-.fuz-table-head {
+.f-table-head {
  background: color-mix(in srgb, var(--f-text) 6%, transparent);
 }

-:root.dark .fuz-table-head {
-  background: color-mix(in srgb, var(--f-text) 12%, transparent);
+.f-table-heading {
+  @apply text-center font-semibold text-xl  py-4 px-4 text-wrap;
 }

-.fuz-table-heading {
-  @apply text-center font-semibold  py-4 px-4 text-lg;
-  color: var(--f-text);
+.f-plan-heading {
+  @apply text-center py-4 px-4 align-bottom relative;
 }

-
-
-/* =========================================
-   NAGŁÓWEK PLANU
-   ========================================= */
-
-.fuz-plan-heading {
-  @apply text-center py-4 px-4 align-bottom;
-  position: relative;
+.f-plan-title {
+  @apply text-xl font-semibold mb-1;
 }

-.fuz-plan-title {
-  @apply text-lg font-semibold mb-1;
-  color: var(--f-text);
+.f-plan-price {
+  @apply text-2xl font-extrabold mb-1 text-[var(--f-offers-price)];
 }

-.fuz-plan-price {
-  @apply text-2xl font-extrabold mb-1;
-  color: var(--fuz-accent);
+/* Na ten moment ukryte */
+.f-plan-speed {
+  @apply text-xs opacity-[0.7];
 }

-.fuz-plan-speed {
-  @apply text-xs;
-  opacity: 0.7;
-}
-
-
-/* Badge popularności – jeśli używasz */
-.fuz-plan-badge {
-  @apply text-[10px] px-2 py-0.5 rounded-full uppercase tracking-wide inline-block mb-2;
-  background: var(--fuz-accent);
-  color: var(--fuz-accent-text);
-}
-
-
-
-/* =========================================
-   WIERSZE
-   ========================================= */
-
-.fuz-row-even {
-  background: color-mix(in srgb, var(--f-text) 4%, transparent);
-}
-
-:root.dark .fuz-row-even {
-  background: color-mix(in srgb, var(--f-text) 10%, transparent);
-}
-
-.fuz-row-odd {
+.f-row-even {
  background: transparent;
 }

-.fuz-feature-name {
+.f-row-odd {
+  background: color-mix(in srgb, var(--f-text) 4%, transparent);
+}
+
+.f-feature-name {
  @apply py-3 px-4 text-lg font-medium ;
-  color: var(--f-text);
-  border-top: 1px solid rgba(0,0,0,0.07);
 }

-:root.dark .fuz-feature-name {
-  border-top: 1px solid rgba(255,255,255,0.12);
-}
-
-.fuz-feature-cell {
+.f-feature-cell {
  @apply py-3 px-4 text-center text-lg;
-  color: var(--f-text);
-  border-top: 1px solid rgba(0,0,0,0.07);
 }

-:root.dark .fuz-feature-cell {
-  border-top: 1px solid rgba(255,255,255,0.12);
-}
-
-.fuz-feature-cell-btn {
-  @apply py-3 px-4 text-center text-sm;
-}
-
-
-
-/* =========================================
-   CHECKMARKS
-   ========================================= */
-
-/* ✔ = kolor accent */
-.fuz-feature-yes {
+.f-feature-yes {
  @apply py-3 px-4 text-center font-bold text-base;
-  color: var(--fuz-accent);
-  border-top: 1px solid rgba(0,0,0,0.07);
 }

-:root.dark .fuz-feature-yes {
-  border-top: 1px solid rgba(255,255,255,0.12);
+.f-feature-no {
+  @apply py-3 px-4 text-center font-bold text-base opacity-[0.45];
 }

-/* ✕ = szary / low opacity */
-.fuz-feature-no {
-  @apply py-3 px-4 text-center font-bold text-base;
-  opacity: 0.45;
-  border-top: 1px solid rgba(0,0,0,0.07);
-}
-
-:root.dark .fuz-feature-no {
-  border-top: 1px solid rgba(255,255,255,0.12);
-}
-
-
-
-/* =========================================
-   POPULARNY PLAN — WARIANT C (MOCNY)
-   ========================================= */
-
-/* pełne tło pastel na ACCENT (mocniejsze – C) */
+/* Popularny */
 .is-popular,
-.fuz-popular-col {
-  background: color-mix(in srgb, var(--fuz-accent) 22%, transparent) !important;
-  border-left: 2px solid var(--fuz-accent);
-  border-right: 2px solid var(--fuz-accent);
+.f-popular-col {
+  background: var(--f-offers-popular-bg);
+  /* color-mix(in srgb, var(--f-offers-popular) 22%, transparent) !important; */
+  border-left: 2px solid var(--f-offers-popular);
+  border-right: 2px solid var(--f-offers-popular);
  position: relative;
  z-index: 10;
 }

-:root.dark .is-popular,
-:root.dark .fuz-popular-col {
-  background: color-mix(in srgb, var(--fuz-accent) 32%, transparent) !important;
+.f-popular-top {
+  border-top: 2px solid var(--f-offers-popular);
 }

-/* górny border */
-.fuz-popular-top {
-  border-top: 2px solid var(--fuz-accent);
+.f-popular-bottom {
+  border-bottom: 2px solid var(--f-offers-popular);
 }

-/* dolny border */
-.fuz-popular-bottom {
-  border-bottom: 2px solid var(--fuz-accent);
-}
-
-/* zbijamy border wewnątrz popularnych */
-.fuz-popular-col.fuz-feature-cell,
-.fuz-popular-col.fuz-feature-yes,
-.fuz-popular-col.fuz-feature-no {
+/* .f-popular-col.f-feature-cell,
+.f-popular-col.f-feature-yes,
+.f-popular-col.f-feature-no {
  border-top: none !important;
-}
+} */

-/* USŁUGI DODATKOWE */
-/* Górny border pierwszego wiersza sekcji */
-.fuz-extra-services table tbody tr:first-child td {
-  border-top: 1px solid rgba(0,0,0,0.07);
-}
-:root.dark .fuz-extra-services table tbody tr:first-child td {
-  border-top: 1px solid rgba(255,255,255,0.15);
-}

-/* Wiersz "Szczegóły" (opis) — zawsze pełny border-top */
-.fuz-expand-details {
-  border-top: 0px solid rgba(0,0,0,0.1);
-}
-:root.dark .fuz-expand-details {
-  border-top: 1px solid rgba(255,255,255,0.15);
-}
-
-/* I zawsze ładny border-bottom na końcu sekcji */
-.fuz-extra-services table tbody tr:last-child td {
-  border-bottom: 1px solid rgba(0,0,0,0.1);
-}
-:root.dark .fuz-extra-services table tbody tr:last-child td {
-  border-bottom: 1px solid rgba(255,255,255,0.15);
-}
-
-/* Usunięcie "pustych" borderów kolumny szczegóły */
-.fuz-feature-cell-btn {
-  border-top: 1px solid rgba(0,0,0,0.07);
-}
-:root.dark .fuz-feature-cell-btn {
-  border-top: 1px solid rgba(255,255,255,0.12);
+.f-popular-badge {
+  @apply bg-blue-500 text-white text-xs font-semibold px-3 py-1 rounded-full inline-block mb-2 uppercase tracking-wide;
+  /* background: #3b82f6; 
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  display: inline-block;
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.025em; */
 }
--- a/src/styles/sections.css
+++ b/src/styles/sections.css
@@ -3,40 +3,48 @@
  .f-section-header {
    @apply text-3xl md:text-4xl font-bold mb-6 text-[var(--f-header)];
  }
-}

  .f-section {
    @apply pt-10 pb-1 mx-2;
  }
-.fuz-section {
-  @apply py-10 mx-2;
+
+  .f-section-center {
+    @apply f-section text-center;
  }

-.fuz-section-grid {
+  .f-section-grid {
    @apply grid items-center gap-5 max-w-7xl mx-auto;
  }

-.fuz-section-image {
-  /* @apply w-full h-5/6 object-cover ; */
+  .f-section-grid-single {
+    @apply grid items-center gap-5 max-w-6xl mx-auto;
+  }
+
+  .f-section-grid-single-center {
+    @apply f-section-grid-single text-center;
+  }
+
+  .f-section-image {
    @apply w-full object-contain;
  }

-.fuz-image-dimmed {
-  opacity: 0.75;
+  .f-image-dimmed {
+    @apply opacity-[1];
  }

-.fuz-section-title {
-  @apply text-4xl md:text-5xl font-bold mb-6;
+  .f-section-title {
+    @apply text-4xl md:text-5xl font-bold mb-2 text-[var(--f-header)];
+  }
+
+  .f-section-nav {
+    @apply mt-0 flex justify-center;
  }

-.fuz-section-text {
-  @apply max-w-4xl mx-auto;
 }


 .fuz-iframe-box {
-  @apply bg-white dark:bg-slate-800 p-4 rounded-xl 
-         border border-gray-200 dark:border-slate-700 shadow;
+  @apply bg-white dark:bg-slate-800 p-4 rounded-xl border border-gray-200 dark:border-slate-700 shadow;
 }

 .fuz-iframe-wrapper {
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -1,11 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  @apply bg-white text-gray-900 dark:bg-slate-900 dark:text-gray-100 antialiased;
-}
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -27,22 +27,34 @@
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
  --border1-dark: hsl(var(--brand-hue) 40% 70%);
+
+  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
 }

 :root {
  --f-background: var(--surface2-light);

-  --f-header: var(--brand-light);
+  --f-background-switch: var(--surface3-light);
+  --f-text-switcher: var(--brand-dark);
+  --f-background-switcher: var(--surface4-dark);
+
+  --f-header: var(--text1-light);
  --f-header-2: var(--text1-light);
  --f-header-items: (var(--text2-light));

  --f-text: var(--text2-light);
-  --f-link-text: var(--f-header);
+  --f-text-1: var(--text1-light);
+
+  --f-link-text: var(--brand-dim);
+
+  /* var(--brand-light); */
  --f-link-text-hover: var(--f-text2-light);

  --btn-background: var(--surface2-light);
  --btn-text: var(--text1-light);

+  --f-background-o: var(--surface4-light);
+
  --btn-outline-background: transparent;
  --btn-outline-border: var(--border1-light);
  --btn-outline-text: var(--text1-light);
@@ -52,39 +64,49 @@

  --f-input-border: var(--surface1-light);

+  --f-offers-border: var(--surface4-light);
+  --f-offers-price: var(--brand-light);
+  --f-offers-popular: var(--brand-light);
+  --f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
+
  /* Invert Color */
-  --f-background-invert: #0d1117;
+  /* --f-background-invert: #0d1117;
  --f-text-invert: #e6edf3;
  --btn-bg-invert: #58a6ff;
  --btn-text-invert: #0d1117;
  --btn-outline-invert: #58a6ff;
-  --btn-outline-bg-invert: rgba(88, 166, 255, 0.15);
+  --btn-outline-bg-invert: rgba(88, 166, 255, 0.15); */
  /* Links */
-  --fuz-link: #0050c8;
-  --fuz-link-hover: #003f9a;
+  /* --fuz-link: #0050c8;
+  --fuz-link-hover: #003f9a; */

  /* Accent (buttons, highlights) */
-  --fuz-accent: #0066ff;
+  /* --fuz-accent: #0066ff;
  --fuz-accent-hover: #004bcc;
  --fuz-accent-text: #ffffff;


  --btn-ghost-text: var(--f-text);
  --btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
-  ---f-border-color: rgb(209 213 219);
+  ---f-border-color: rgb(209 213 219); */
  /* / var(--tw-border-opacity, 1)); */
 }

 :root.dark {
-
  --f-background: var(--surface1-dark);
+  --f-background-switch: var(--surface2-dark);

-  --f-header: var(--brand-dark);
+  --f-background-switch: var(--surface3-dark);
+  --f-text-switcher: var(--brand-dark);
+  --f-background-switcher: var(--text2-light);
+
+  --f-header: var(--text1-dark);
  --f-header-2: var(--text1-dark);
  --f-header-items: (var(--text2-dark));

  --f-text: var(--text1-dark);
-  --f-link-text: var(--f-header);
+  --f-text-1: var(--text1-dark);
+  --f-link-text: var(--brand-dark);
  --f-link-text-hover: var(--f-text2-dark);

  --btn-background: var(--surface4-dark);
@@ -97,8 +119,17 @@
  --btn-outline-background-hover: var(--surface4-dark);
  --btn-outline-text-hover: var(--brand-dark);

+  --f-background-o: var(--surface2-dark);
+
  --f-input-border: var(--surface4-dark);

+  --f-offers-border: var(--surface4-dark);
+  --f-offers-price: var(--brand-dark);
+  --f-offers-popular: var(--brand-dark);
+  --f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
+
+
+
  /* Invert Color */
  --f-background-invert: #ffffff;
  --f-text-invert: #0d0d0d;