:root{
    --dark:#1C2840;
    --dark-2:#243250;
    --gold:#D6A233;
    --gold-light:#e5b95c;
    --gold-soft:#f3e4c2;
    --light:#f4f6f9;
    --white:#ffffff;
    --gray:#7c8799;
}

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:var(--light);
    color:var(--dark);
    line-height:1.7;
    overflow-x:hidden;
    padding-top:140px;
}


/* ===== HEADER ===== */

/* ===== HEADER ===== */

header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:#ffffff;
    backdrop-filter:blur(10px);
    z-index:1000;
    box-shadow:0 5px 25px rgba(0,0,0,0.15);
}

/* TO JEST TERAZ FLEX */
.header-inner{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1px 20px;
    min-height:100px;
    transition:min-height .3s ease, padding .3s ease;
}

/* LOGO */
.logo{
    display:flex;
    align-items:center;
}

.logo img{
    height:70px;
    transition:height .3s ease;
}

/* MENU */
.nav{
    display:flex;
    gap:30px;
    align-items:center;
}

.nav a{
    text-decoration:none;
    color: var(--dark);
    font-weight:500;
    position:relative;
    transition:.3s;
}

.nav a::after{
    content:'';
    position:absolute;
    bottom:-6px;
    left:0;
    width:0;
    height:2px;
    background:var(--gold);
    transition:.3s;
}

.nav a:hover{
    color:var(--gold);
}

.nav a:hover::after{
    width:100%;
}

/* ===== SCROLL STATE ===== */

header.scrolled{
    background:white;
    box-shadow:0 8px 25px rgba(0,0,0,0.12);
}

header.scrolled .header-inner{
    min-height:80px;
    padding:10px 20px;
}

header.scrolled .logo img{
    height:60px;
}

header.scrolled .nav a{
    color:#1C2840;
}

header.scrolled .nav a:hover{
    color:#D6A233;
}


/* SEKCJE */

section{
    padding:50px 20px;
    max-width:1100px;
    margin:auto;
	
}

section{
    scroll-margin-top:105px;
}

#top{
    scroll-margin-top:0;
}

/* HERO */

.hero{
    margin-top:20px;
    border-top-left-radius:30px;
    border-top-right-radius:30px;
    padding-top:80px;
	padding-bottom:70px;
    text-align:center;
    background:
    radial-gradient(circle at 30% 20%, rgba(214,162,51,0.15), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(214,162,51,0.12), transparent 40%),
    linear-gradient(135deg,#1C2840,#243250);
    color:white;
    border-bottom-left-radius:40px;
    border-bottom-right-radius:40px;
}

.hero h1{
    font-size:46px;
    margin-bottom:25px;
    line-height:1.2;
}

.hero p{
    font-size:20px;
    opacity:0.9;
    margin-bottom:35px;
}

/* TYPO */

h2{
    font-size:34px;
    margin-bottom:30px;
    position:relative;
}

h2::after{
    content:'';
    width:70px;
    height:4px;
    background:var(--gold);
    display:block;
    margin-top:14px;
    border-radius:2px;
}

h4{
    font-size:34px;
    margin-bottom:30px;
    position:relative;
}

h4::after{
    content:'';
    height:4px;
    background:var(--gold);
    display:block;
    margin-top:14px;
    border-radius:2px;
}

h3{
    margin-top:25px;
    margin-bottom:10px;
}

p{
    margin-bottom:15px;
}

ul{
    margin-left:20px;
    margin-top:15px;
}

ul li{
    margin-bottom:8px;
}


/* Sekcja Problem */
#problem{
    padding-left:60px;
    padding-right:60px;
}


/* JASNE SEKCJE */

.light-bg{
    background:var(--white);
    padding:60px 60px;
    border-radius:18px;
    box-shadow:0 25px 60px rgba(28,40,64,0.08);
    margin:0 auto;
}

.light-bg-faq{
    background:var(--white);
    padding:60px 60px;
    border-radius:18px;
    box-shadow:0 25px 60px rgba(28,40,64,0.08);
    margin:0 auto;
	margin-top:30px;
}

/* CIEMNE SEKCJE */

.dark-section{
    background:linear-gradient(135deg,#1C2840,#243250);
    color:white;
    border-radius:30px;
    padding:70px 60px;
	margin-top:30px;
	margin-bottom:30px;
}

.dark-section h2::after{
    background:var(--gold);
}

.yellow-section{
    background:linear-gradient(135deg,#f6e6c3,#f0d9a4);
    color:#1C2840;
    border-radius:30px;
    padding:70px 60px;
    margin-top:30px;
	margin-bottom:30px;
}

.yellow-section h2::after{
    background:var(--gold);
}

.model-lead{
    font-size:20px;
    max-width:800px;
    margin:30px auto 60px auto;
    line-height:1.8;
    letter-spacing:0.3px;
    color:#1C2840;
}

.model-example{
    max-width:700px;
    margin:0 auto;
    background:rgba(255,255,255,0.6);
    padding:50px 40px;
    border-radius:16px;
    box-shadow:0 20px 50px rgba(28,40,64,0.08);
}

.example-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
    padding:15px 0;
    border-bottom:1px solid rgba(28,40,64,0.1);
}

.example-row:last-child{
    border-bottom:none;
}

.example-row strong{
    font-size:24px;
    color:#1C2840;
}

.example-row.highlight strong{
    font-size:28px;
    color:#D6A233;
    letter-spacing:0.5px;
}

/* BUTTONS */

.btn{
    display:inline-block;
    padding:15px 32px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:.3s ease;
    margin:8px;
}

.btn-primary{
    background:var(--gold);
    color:#1C2840;
    box-shadow:0 10px 25px rgba(214,162,51,0.4);
}

.btn-primary:hover{
    background:var(--gold-light);
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(214,162,51,0.5);
}

.btn-outline{
    border:2px solid var(--gold);
    color:var(--gold);
}

.btn-outline:hover{
    background:var(--gold);
    color:#1C2840;
    transform:translateY(-4px);
}

/* FAQ */

#faq p{
    padding:18px 22px;
    border-radius:10px;
    background:var(--gold-soft);
    transition:.3s;
}

#faq p:hover{
    background:#ead29f;
}

/* CONTACT */

.contact{
    text-align:center;
    padding-bottom:10px;
}

/* FOOTER */

footer{
    background:#111a2e;
    color:#cfd6e3;
    text-align:center;
    padding:40px;
    margin-top:80px;
}

/* RESPONSIVE */

@media(max-width:768px){

    nav ul{
        display:none;
    }

    .hero h1{
        font-size:32px;
    }

    section{
        padding:90px 20px;
    }

    .light-bg,
    .dark-section{
        padding:50px 25px;
    }
}

/* ===== KARTY OBSZARÓW ===== */

/* ===== KARTY OBSZARÓW – WERSJA ZWARTA ===== */

.cards{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:24px;
    margin-top:40px;
}

/* 3 na górze */
.cards .card:nth-child(1),
.cards .card:nth-child(2),
.cards .card:nth-child(3){
    grid-column: span 2;
}

/* 2 na dole */
.cards .card:nth-child(4),
.cards .card:nth-child(5){
    grid-column: span 3;
}

.card{
    background:white;
    padding:28px 30px;
    border-radius:14px;
    box-shadow:0 15px 40px rgba(28,40,64,0.06);
    transition:all .25s ease;
    position:relative;
}

.card::before{
    content:"";
    position:absolute;
    top:0;
    left:3%;
    width:94%;
    height:3px;
    background:#D6A233;
    opacity:0.7;
    border-radius:2px;
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 50px rgba(28,40,64,0.1);
}

.card h3{
    font-size:18px;
    margin-bottom:10px;
    color:#1C2840;
}

.card p{
    font-size:14px;
    color:#5f6b7a;
    line-height:1.6;
}

/* ===== SEKCA REZULTATÓW ===== */

.results{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:40px;
    margin-top:60px;
}

.result-card{
    background:white;
    padding:50px 40px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 25px 60px rgba(0,0,0,0.15);
    transition:all .35s ease;
    position:relative;
}

.result-card:hover{
    transform:translateY(-8px);
    box-shadow:0 35px 80px rgba(0,0,0,0.2);
}

.result-header{
    margin-bottom:25px;
    font-size:14px;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:#6b7280;
}

.result-type{
    display:block;
    font-weight:600;
    color:#1C2840;
}

.result-size{
    display:block;
    margin-top:5px;
}

.result-value{
    font-size:42px;
    font-weight:700;
    color:#D6A233;
    margin-bottom:10px;
}

.result-label{
    font-size:15px;
    color:#6b7280;
}


/* ===== SEKCJA O NAS ===== */

.about-content{
    margin-top:40px;
    max-width:900px;
}

.about-content p{
    margin-bottom:22px;
    color:#4b5563;
    font-size:16px;
    line-height:1.8;
}

.about-lead{
    font-size:18px;
    color:#1C2840;
    font-weight:500;
}

.about-highlight{
    background:#f9f1de;
    padding:25px 30px;
    border-left:4px solid #D6A233;
    border-radius:8px;
    margin:35px 0;
}

.about-closing{
    font-size:18px;
    color:#1C2840;
    margin-top:30px;
}


/* ===== FAQ ACCORDION ===== */

.faq-container{
    margin-top:40px;
}

.faq-item{
    border-bottom:1px solid rgba(28,40,64,0.1);
}

.faq-question{
    width:100%;
    background:none;
    border:none;
    text-align:left;
    padding:22px 0;
    font-size:16px;
    font-weight:600;
    color:#1C2840;
    cursor:pointer;
    position:relative;
    transition:.3s;
}

.faq-question::after{
    content:"+";
    position:absolute;
    right:0;
    font-size:18px;
    color:#D6A233;
    transition:.3s;
}

.faq-question.active::after{
    content:"–";
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.faq-answer p,
.faq-answer ul{
    padding-bottom:20px;
    color:#4b5563;
    font-size:15px;
    line-height:1.7;
}

.faq-answer ul{
    margin-left:20px;
}





/* ======================================================= MOBILKI ======================================================= */

/* ===== HAMBURGER + MOBILE MENU ===== */

/* Domyślnie hamburger ukryty (desktop) */

.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;                 /* odstęp między kreskami */
}

.menu-toggle span{
  display:block;
  width:26px;
  height:3px;
  background:var(--dark);
  border-radius:2px;
  transition:all .3s ease;
}

/* Mobile nav domyślnie zamknięte */
.mobile-nav{
  display:none;
}

/* Gdy header jest biały po scrollu – zmień kolor hamburgera */
header.scrolled .menu-toggle span{
  background:#1C2840;
}

/* Stan otwarty (animacja X) */
header.menu-open .menu-toggle span:nth-child(1){
  transform:translateY(8px) rotate(45deg);
}
header.menu-open .menu-toggle span:nth-child(2){
  opacity:0;
}
header.menu-open .menu-toggle span:nth-child(3){
  transform:translateY(-8px) rotate(-45deg);
}

/* Mobile styles */
@media (max-width: 900px){
  /* chowamy desktopowe menu */
  .nav{ display:none; }

  /* pokazujemy hamburger */
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* mobilne menu jako dropdown pod headerem */
  .mobile-nav{
    display:block;
    max-height:0;
    overflow:hidden;
    background:rgba(28,40,64,0.98);
    backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,0.08);
    transition:max-height .3s ease;
  }

  /* gdy header scrolled (biały), menu też jasne */
  header.scrolled .mobile-nav{
    background:rgba(255,255,255,0.98);
    border-top:1px solid rgba(28,40,64,0.08);
  }

  .mobile-nav a{
    display:block;
    padding:16px 20px;
    text-decoration:none;
    color:#ffffff;
    font-weight:600;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }

  header.scrolled .mobile-nav a{
    color:#1C2840;
    border-bottom:1px solid rgba(28,40,64,0.08);
  }

  .mobile-nav a:hover{
    color:#D6A233;
  }

  /* Otwieranie menu */
  header.menu-open .mobile-nav{
    max-height:520px; /* wystarczy na linki */
  }
}