/* ─── ZMIENNE (identyczne z główną stroną) ─── */
    :root {
      --solar-orange: #f97316;
      --solar-amber:  #fbbf24;
      --solar-dark:   #0f1a2e;
      --solar-navy:   #162236;
      --solar-mid:    #1e3a5f;
      --solar-light:  #e8f4fd;
      --solar-white:  #ffffff;
      --solar-gray:   #64748b;
      --solar-green:  #22c55e;
      --gradient-hero:   linear-gradient(135deg, #0f1a2e 0%, #1e3a5f 60%, #162236 100%);
      --gradient-orange: linear-gradient(135deg, #f97316, #fbbf24);
      --shadow-card:   0 8px 32px rgba(0,0,0,0.12);
      --shadow-orange: 0 4px 24px rgba(249,115,22,0.35);
      --radius-lg: 1.25rem;
      --radius-xl: 2rem;
      --dark1: #0c1f2e;
      --dark2: #0a2233;
      --dark3: #0d3040;
      --green: #2ecc71;
      --green2: #27ae60;
      --red: #e05050;
      --text: #e8f4f0;
      --muted: #9bbcb0;        
      font-family: 'DM Sans', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body { font-family: 'Barlow', sans-serif; background: var(--dark1); color: var(--text); overflow-x: hidden; }
    h4, h5, h6 { font-family: 'Outfit', sans-serif; font-weight: 700; }
    h1,h2,h3,.heading { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; text-transform: uppercase; }  

    /* ─── NAVBAR ─── */
    .navbar-solar {
      background: rgba(15,26,46,0.97);
      backdrop-filter: blur(12px);
      padding: 1rem 0;
      position: sticky;
      top: 0;
      z-index: 1000;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      transition: padding 0.3s;
    }
    .navbar-solar.scrolled { padding: 0.6rem 0; }

    .navbar-brand-logo {
      font-family: 'Outfit', sans-serif;
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--solar-white) !important;
      letter-spacing: -0.02em;
    }
    .navbar-brand-logo span { color: var(--solar-orange); }

    .navbar-solar .nav-link {
      color: rgba(255,255,255,0.8) !important;
      font-weight: 500;
      font-size: 0.93rem;
      padding: 0.5rem 1rem !important;
      transition: color 0.2s;
      position: relative;
    }
    .navbar-solar .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%; right: 50%;
      height: 2px;
      background: var(--solar-orange);
      transition: left 0.25s, right 0.25s;
      border-radius: 2px;
    }
    .navbar-solar .nav-link:hover { color: #fff !important; }
    .navbar-solar .nav-link:hover::after { left: 1rem; right: 1rem; }

    .btn-cta-nav {
      background: var(--gradient-orange);
      color: #fff !important;
      border: none;
      border-radius: 50px;
      padding: 0.5rem 1.4rem !important;
      font-weight: 600;
      font-size: 0.9rem;
      transition: transform 0.2s, box-shadow 0.2s;
      box-shadow: var(--shadow-orange);
    }
    .btn-cta-nav:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 30px rgba(249,115,22,0.45);
    }
    .navbar-toggler { border: none; color: #fff; }
    .navbar-toggler:focus { box-shadow: none; }

    /* ─── NAGŁÓWEK PODSTRONY (mini-hero) ─── */
    .page-header {
      background: var(--gradient-hero);
      padding: 4rem 0 3.5rem;
      position: relative;
      overflow: hidden;
    }
    .page-header::before {
      content: '';
      position: absolute;
      top: -100px; right: -100px;
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, transparent 65%);
      border-radius: 50%;
    }
    .page-header-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

    /* Breadcrumb */
    .breadcrumb-solar .breadcrumb-item a {
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      font-size: 0.85rem;
      transition: color 0.2s;
    }
    .breadcrumb-solar .breadcrumb-item a:hover { color: var(--solar-amber); }
    .breadcrumb-solar .breadcrumb-item.active { color: var(--solar-amber); font-size: 0.85rem; }
    .breadcrumb-solar .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.3); }

    .page-title {
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      font-weight: 900;
      color: #fff;
      letter-spacing: -0.02em;
      margin: 0.75rem 0 0;
    }
    .page-title .accent { color: var(--solar-orange); }

    /* ─── TREŚĆ PODSTRONY ─── */
    .page-content {
      padding: 4rem 0 5rem;
      background: #fff;
      min-height: 60vh;
    }

    /* Pomocnicze style typografii dla treści podstron */
    .content-area h2 {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--solar-dark);
      margin: 2.5rem 0 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 2px solid var(--solar-light);
    }
    .content-area h2:first-child { margin-top: 0; }
    .content-area h3 {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--solar-mid);
      margin: 1.75rem 0 0.6rem;
    }
    .content-area p {
      color: var(--solar-gray);
      line-height: 1.8;
      font-size: 0.97rem;
      margin-bottom: 1rem;
    }
    .content-area ul, .content-area ol {
      color: var(--solar-gray);
      line-height: 1.8;
      font-size: 0.97rem;
      padding-left: 1.5rem;
      margin-bottom: 1rem;
    }
    .content-area a {
      color: var(--solar-orange);
      text-decoration: none;
    }
    .content-area a:hover { text-decoration: underline; }
    .content-area strong { color: var(--solar-dark); }

    /* Pogrubiona ramka informacyjna */
    .content-area .info-box {
      background: var(--solar-light);
      border-left: 4px solid var(--solar-orange);
      border-radius: 0 0.75rem 0.75rem 0;
      padding: 1.25rem 1.5rem;
      margin: 1.75rem 0;
    }
    .content-area .info-box p { margin: 0; color: var(--solar-dark); }

    /* ─── FOOTER ─── */
    .footer {
      background: #0a1220;
      padding: 3rem 0 1.5rem;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .footer-brand {
      font-family: 'Outfit', sans-serif;
      font-size: 1.3rem;
      font-weight: 800;
      color: #fff;
    }
    .footer-brand span { color: var(--solar-orange); }
    .footer p { color: rgba(255,255,255,0.5); font-size: 0.88rem; line-height: 1.6; }

    .footer-links { list-style: none; padding: 0; margin: 0; }
    .footer-links li {
      margin-bottom: 0.5rem;
      color: rgba(255,255,255,0.65);
      font-size: 0.9rem;
      line-height: 1.55;
    }
    .footer-links a {
      color: rgba(255,255,255,0.65);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--solar-orange); }

    .footer-divider { border-color: rgba(255,255,255,0.08); margin: 2rem 0 1.5rem; }
    .footer-copy { color: rgba(255,255,255,0.3); font-size: 0.82rem; }
    .footer-copy a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
    .footer-copy a:hover { color: var(--solar-orange); }

    /* ─── SCROLL TO TOP ─── */
    #scrollTopBtn {
      position: fixed;
      bottom: 2rem; right: 2rem;
      width: 48px; height: 48px;
      background: var(--gradient-orange);
      border: none; border-radius: 50%;
      color: #fff; font-size: 1.2rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      opacity: 0; transform: translateY(10px);
      transition: opacity 0.3s, transform 0.3s, box-shadow 0.2s;
      box-shadow: var(--shadow-orange);
      z-index: 999;
    }
    #scrollTopBtn.visible { opacity: 1; transform: translateY(0); }
    #scrollTopBtn:hover { box-shadow: 0 8px 28px rgba(249,115,22,0.55); }

    /* ─── REVEAL ANIMATION ─── */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
      
    /* ── SECTION 1: HERO ── */
    #hero {
      min-height: 70vh;
      background: linear-gradient(150deg, #0b2030 0%, #0d3545 45%, #0b3825 100%);
      display: flex; align-items: center;
      padding: 100px 0 60px;
      position: relative; overflow: hidden;
    }
    #hero::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 70% 50%, rgba(46,204,113,.07) 0%, transparent 60%);
      pointer-events: none;
    }
    .hero-title {
      font-size: clamp(3rem, 6vw, 5.5rem);
      line-height: 1;
      color: #fff;
      letter-spacing: -1px;
    }
    .hero-sub {
      font-size: clamp(1.1rem, 2vw, 1.35rem);
      color: var(--muted);
      line-height: 1.7;
      max-width: 420px;
      font-style: italic;
      margin-top: 20px;
    }
    .phone-img {
      max-width: 420px;
      width: 100%;
      filter: drop-shadow(0 40px 80px rgba(0,0,0,.55));
      animation: floatY 5s ease-in-out infinite;
    }
    @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
    .btn-hero {
      display: inline-block;
      margin-top: 36px;
      background: var(--green);
      color: #0a2d1a;
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1.1rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 14px 40px;
      border-radius: 50px;
      text-decoration: none;
      transition: all .25s;
      border: 2px solid var(--green);
    }
    .btn-hero:hover { background: transparent; color: var(--green); }

    /* ── SECTION 2: KORZYŚCI ── */
    #benefits {
      background: linear-gradient(170deg, #0d2030 0%, #0a1c2a 100%);
      padding: 90px 0;
    }
    .sec-heading {
      font-size: clamp(2.2rem, 5vw, 4rem);
      color: #fff;
    }
    .underline-green {
      display: block; width: 56px; height: 4px;
      background: var(--green); border-radius: 2px; margin: 14px 0 40px;
    }
    .benefit-list li {
      list-style: none;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,.07);
      font-size: 1.05rem;
      color: var(--text);
      display: flex; align-items: flex-start; gap: 12px;
    }
    .benefit-list li::before {
      content: '•';
      color: var(--green);
      font-size: 1.6rem;
      line-height: 1;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .benefit-list li:last-child { border-bottom: none; }
    .info-box {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 14px;
      padding: 28px 32px;
      text-align: center;
      font-size: 1.05rem;
      color: var(--muted);
      line-height: 1.7;
      margin-top: 36px;
    }
    .advanced-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700;
      font-size: 1.05rem;
      color: #fff;
      margin-top: 40px;
      margin-bottom: 14px;
    }
    .feat-list li {
      list-style: none;
      padding: 8px 0 8px 20px;
      position: relative;
      font-size: 1rem;
      color: var(--text);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .feat-list li::before {
      content: '•';
      color: var(--green);
      position: absolute; left: 0;
      font-size: 1.3rem; line-height: 1; top: 10px;
    }
    .feat-list li:last-child { border-bottom: none; }

    /* CTA banner inside benefits */
    .cta-banner {
      background: var(--green);
      border-radius: 12px;
      padding: 22px 30px;
      text-align: center;
      margin-top: 44px;
    }
    .cta-banner p {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(1.3rem, 3vw, 1.9rem);
      color: #0a2d1a;
      text-transform: uppercase;
      letter-spacing: 1px;
      line-height: 1.2;
    }
    .contact-row { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
    .contact-pill {
      display:flex; align-items:center; gap:10px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.15);
      border-radius:50px;
      padding:12px 32px;
      color:#fff; text-decoration:none; font-size:1rem;
      transition:all .25s;
      min-width: 200px; justify-content: center;
    }
    .contact-pill:hover { background:var(--green); color:#0a2d1a; border-color:var(--green); }
    .pill-icon {
      width:38px; height:38px;
      background:var(--green);
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }
    .pill-icon svg { fill:#0a2d1a; }

    /* ── SECTION 3: ZIMA ── */
    #winter {
      background: linear-gradient(160deg, #0b2030 0%, #0d3545 100%);
      padding: 90px 0;
    }

    /* ── SECTION 4: LATO ── */
    #summer {
      background: linear-gradient(160deg, #0b2518 0%, #0d3525 100%);
      padding: 90px 0;
    }

    /* shared season styles */
    .season-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:36px; }
    .season-title { font-size: clamp(2.5rem, 5vw, 4rem); color:#fff; }
    .season-logo { height: 56px; }
    .season-desc {
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: var(--muted);
      line-height: 1.75;
      text-align: center;
      max-width: 720px;
      margin: 0 auto 44px;
    }
    .compare-box {
      border-radius: 16px;
      padding: 28px 24px;
      height: 100%;
    }
    .compare-box.green-box {
      background: rgba(46,204,113,.13);
      border: 2px solid var(--green);
    }
    .compare-box.red-box {
      background: rgba(220,70,70,.12);
      border: 2px solid var(--red);
    }
    .cb-tag {
      font-family:'Barlow Condensed',sans-serif;
      font-weight:700;
      font-size:.82rem;
      letter-spacing:2px;
      text-transform:uppercase;
      border-radius:6px;
      padding:5px 14px;
      display:inline-block;
      margin-bottom:16px;
    }
    .green-box .cb-tag { background:var(--green); color:#0a2d1a; }
    .red-box .cb-tag { background:var(--red); color:#fff; }
    .cb-price {
      font-family:'Barlow Condensed',sans-serif;
      font-weight:900;
      font-size:3rem;
      color:#fff;
      line-height:1;
    }
    .cb-unit { font-size:1.1rem; font-weight:400; }
    .cb-unit2 { font-size:.82rem; color:var(--muted); margin-top:4px; }
    .cb-desc { font-size:.97rem; color:var(--muted); margin-top:16px; line-height:1.6; }
    .cb-desc strong { color:#fff; }
    .cb-small { font-size:.78rem; color:var(--muted); margin-top:10px; font-style:italic; }
    .savings-pill {
      display:inline-flex; align-items:center; gap:10px;
      background:rgba(46,204,113,.15);
      border:1px solid rgba(46,204,113,.4);
      border-radius:50px;
      padding:10px 28px;
      font-size:1.05rem;
      color:#fff;
      margin:32px 0;
    }
    .savings-pill strong { color:var(--green); font-size:1.2rem; }
    .chart-wrap {
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.07);
      border-radius:16px;
      padding:28px 24px 20px;
      margin-top:12px;
    }
    .chart-label {
      font-family:'Barlow Condensed',sans-serif;
      font-weight:700;
      font-size:1rem;
      letter-spacing:2px;
      text-transform:uppercase;
      color:var(--muted);
      margin-bottom:20px;
    }

    /* reveal */
    .reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
    .reveal.show { opacity:1; transform:none; }

    @media(max-width:767px){
      .phone-img { max-width:260px; margin:0 auto; }
      .season-logo { height:36px; }
      .cb-price { font-size:2.2rem; }
    }