/* =======================================================
   SYSTEM – POGADAJNIK
   ======================================================= */

:root{
  --text-main:#2C2A28;
  --text-strong:#1F1E1C;
  --text-soft:#6B6762;
  --accent:#2F5F57;
  --bg:#F4F1EB;
  --axis:#D9D4CC;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text-main);
  font-family:'Inter', sans-serif;
  font-size:18px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  text-wrap:pretty;
}

a,
a:visited{
  color:inherit;
}

p{
  margin:0 0 28px 0;
  hyphens:auto;
}

/* =======================================================
   NAV
   ======================================================= */

nav{
  padding:80px 0 60px 0;
}

.nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 60px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.brand{
  font-family:'Playfair Display', serif;
  font-size:21px;
  letter-spacing:0.2px;
  color:var(--text-strong);
  text-decoration:none;
}

.menu a{
  font-size:13px;
  letter-spacing:1.2px;
  color:rgba(0,0,0,0.55);
  text-decoration:none;
  transition:0.25s ease;
}

.menu a:hover{
  color:rgba(0,0,0,0.9);
}

/* MOBILE TOGGLE */

.menu-toggle{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(0,0,0,0.55);
  background:none;
  border:none;
  padding:0 0 8px 0;
  position:relative;
  transition:0.25s ease;
}

.menu-toggle::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:rgba(0,0,0,0.18);
  transition:0.25s ease;
}

.menu-toggle:hover{
  color:rgba(0,0,0,0.9);
}

.menu-toggle:hover::after{
  background:rgba(0,0,0,0.5);
}

/* =======================================================
   LAYOUT SYSTEM
   ======================================================= */

.section{
  max-width:720px;
  margin-left:clamp(9%,12vw,170px);
  margin-right:auto;
  padding:200px 0;
}

.section-czym{
  padding:260px 0 160px 0;
}

.section-o-mnie{
  padding:320px 0;
}

.section-oferta{
  padding:380px 0 340px;
  margin-left:calc(clamp(9%,12vw,170px) - 8px);
}

.section-pauza{
  padding:200px 0;
}

.section-faq{
  padding:160px 0;
}

/* =======================================================
   HERO
   ======================================================= */

.hero{
  padding:300px 0 240px;
}

.hero h1{
  font-family:'Playfair Display', serif;
  font-size:clamp(48px, 6vw, 66px);
  line-height:1.12;
  letter-spacing:-0.5px;
  margin-bottom:80px;
  color:var(--text-strong);
  position:relative;
  max-width:640px;
}

.hero h1::after{
  content:"";
  display:block;
  width:40px;
  height:1px;
  background:rgba(0,0,0,0.18);
  margin-top:40px;
}

.hero-subtle{
  font-size:13px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  opacity:0.55;
  margin-top:-10px;
  margin-bottom:70px;
}

/* =======================================================
   HEADINGS
   ======================================================= */

h2{
  font-family:'Playfair Display', serif;
  font-size:clamp(34px,4vw,40px);
  font-weight:400;
  color:var(--text-strong);
  margin:0 0 70px 0;
}

/* =======================================================
   ABOUT
   ======================================================= */

.about{
  display:flex;
  align-items:center;
  gap:80px;
  flex-wrap:wrap;
}

.about h2{
  font-size:clamp(44px,5vw,56px);
  line-height:1.15;
  letter-spacing:-0.5px;
  margin-bottom:70px;
}

.about p{
  max-width:520px;
}

.about img{
  margin-top:-40px;
  margin-left:-42px;
  max-width:480px;
  width:100%;
  height:auto;
  filter:saturate(0.9) contrast(0.95);
  box-shadow:
    18px 35px 80px rgba(0,0,0,0.08),
    0 6px 18px rgba(0,0,0,0.04);
}

/* =======================================================
   OFERTA
   ======================================================= */

.info-pricing{
  margin:120px 0 140px 0;
  display:flex;
  flex-direction:column;
  gap:80px;
  position:relative;
}

.info-pricing::before{
  content:"";
  display:block;
  width:40px;
  height:1px;
  background:rgba(0,0,0,0.15);
  margin:0 auto 80px;
}

.pricing-block{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.price-main{
  font-size:18px;
  font-weight:500;
  letter-spacing:0.4px;
  color:var(--text-strong);
}

.price-value{
  font-family:'Playfair Display', serif;
  font-size:26px;
  letter-spacing:-0.3px;
  margin-bottom:18px;
  color:var(--text-main);
}

.price-actions{
  display:flex;
  gap:32px;
  margin-left:2px;
}

.price-actions a{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1.8px;
  color:rgba(0,0,0,0.55);
  text-decoration:none;
  position:relative;
  transition:color 0.25s ease;
}

.price-actions a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-5px;
  width:100%;
  height:1px;
  background:rgba(0,0,0,0.25);
  transition:background 0.25s ease;
}

.price-actions a:hover{
  color:rgba(0,0,0,0.9);
}

.price-actions a:hover::after{
  background:rgba(0,0,0,0.6);
}

/* =======================================================
   OŚ KONSTRUKCYJNA
   ======================================================= */

.atelier-axis{
  position:relative;
}

.atelier-axis::before{
  content:"";
  position:absolute;
  top:0;
  left:calc(clamp(9%,12vw,170px) - 28px);
  width:1px;
  height:100%;
  background:var(--axis);
}

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

.faq-item{
  margin-bottom:36px;
}

.faq-question{
  font-weight:500;
  color:var(--text-strong);
  margin-bottom:6px;
}

.faq-answer{
  color:var(--text-soft);
}

/* =======================================================
   FOOTER
   ======================================================= */

footer{
  padding:300px 0 180px 0;
  font-size:15px;
  color:var(--text-soft);
  max-width:720px;
  margin-left:clamp(9%,12vw,170px);
  position:relative;
}

footer::before{
  content:"";
  display:block;
  width:40px;
  height:1px;
  background:rgba(0,0,0,0.15);
  margin-bottom:60px;
}

/* =======================================================
   MENU SYSTEM
   ======================================================= */

@media(min-width:900px){

  .menu-toggle{
    display:none;
  }

  .menu{
    display:flex;
    gap:42px;
  }

}

@media(max-width:899px){

  .section{
    margin-left:24px;
    margin-right:24px;
    padding:160px 0;
  }

  .about{
    flex-direction:column;
    gap:60px;
  }

  .about img{
    margin-left:0;
  }

  .atelier-axis::before{
    display:none;
  }

  .menu{
    display:none;
    flex-direction:column;
    gap:32px;
    margin-top:60px;
  }

  .menu.menu-open{
    display:flex;
  }

}

/* =======================================================
   DOMKNIĘCIE ROZMOWY
   ======================================================= */

.closing-soft{
  font-size:15px;
  color:var(--text-soft);
  margin-top:40px;
}

.closing-final{
  font-family:'Playfair Display', serif;
  font-size:26px;
  line-height:1.35;
  margin-top:140px;
  letter-spacing:-0.2px;
}

/* =======================================================
   BLOG
   ======================================================= */

.blog-list p{
  margin:0 0 80px 0;
}

.blog-list a{
  font-family:'Playfair Display', serif;
  font-size:clamp(24px, 2.4vw, 32px);
  line-height:1.25;
  letter-spacing:-0.3px;
  text-decoration:none;
  color:var(--text-strong);
  transition:opacity 0.25s ease;
}

.blog-list a::after{
  display:none;
}

.blog-list a:hover{
  opacity:0.65;
}

/* =======================================================
   PURCHASE NOTE – LEGAL SOFT
   ======================================================= */

.note{
  margin-top:90px;
  font-size:13px;
  color:rgba(0,0,0,0.45);
  max-width:420px;
}

@media(max-width:899px){

  .note{
    margin-top:60px;
    font-size:13px;
    line-height:1.6;
  }

}