:root{
  --bg:#ffffff;
  --text:#1e1e1e;

  --textMenu:#47D6CC; /* turkus */
  --hover:#ff42a1;    /* róż */
  --peach:#F7A77C;    /* pomarańcz */
  --lime:#DDF4A6;     /* limonka */
  --white:#ffffff;

  --maxw:1200px;
}

/* RESETY */
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text)}
a{text-decoration:none}
figure{margin:0}
section{margin:0;padding:0}

html, body {
  font-family: "Oxygen", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
}

/* ===== wspólne nagłówki ===== */
.section-title{
  font-family:"Josefin Sans",sans-serif;
  font-weight:400;
  font-style: italic;
  letter-spacing:.01em;
  margin:0;
  line-height:1.05;
  font-size: clamp(30px, 4.2vw, 48px);
}
.section-subtitle{
  font-family:"Josefin Sans",sans-serif;
  font-weight:400;
  font-style: italic;
  letter-spacing:.04em;
  margin:0 0 6px 0;
  font-size: clamp(14px,1.6vw,16px);
}

/* ===== TOPBAR ===== */
.topbar{
  position: sticky; top:0; z-index:50;
  background: var(--bg);
  border-bottom: 2px solid #eee;
}
.navwrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 12px 18px; /* +padding */
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center;
  column-gap: 16px;
}
.brand{ justify-self: center; display:inline-flex; align-items:center; }
.brand img{ height: clamp(40px, 6vw, 84px); width:auto; display:block; }
.nav-left, .nav-right{ display:flex; align-items:center; gap: clamp(12px, 2.5vw, 24px); }
.nav-left{  justify-self: end; }
.nav-right{ justify-self: start; }
.nav-left a, .nav-right a{ color: var(--textMenu); font-weight: 900; letter-spacing:.03em; }
.nav-left a:hover, .nav-right a:hover{ color: var(--hover); }

/* ===== KONCEPT ===== */
.koncept-hero{ background:#fff; }
.koncept-container{ max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.koncept-row{ position: relative; display: flex; align-items: stretch; gap: 18px; }
.bg-rect{ position: absolute; inset: 0; background: var(--peach); z-index: 0; }
.koncept-photo, .koncept-textbox{ position: relative; z-index:1; }
.koncept-photo img{ display: block; width: 100%; height: auto; max-width: 100%; }
.koncept-textbox{
  color: var(--white);
  display:flex; flex-direction:column; justify-content:center;
  gap:12px; line-height:1.6; padding: 0 34px;
}

/* ===== BUTTONY ===== */
.btn{
  display:block;
  margin: 16px auto 0;
  border-radius: 12px;
  background: var(--textMenu);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-family:"Oxygen",sans-serif;
  height:48px; line-height:48px;
  width:220px;
}
.btn--lime{ background: var(--lime); color:#1a1a1a; }
.btn--wide{ width:420px; height:56px; line-height:56px; font-size:18px; }

/* ===== PASKI CYTATÓW ===== */
.quote-section{ background: transparent; }
.quote-container{ max-width: var(--maxw); margin:0 auto; padding:0 18px; }
.quote-inner{
  background: var(--lime);
  color: var(--textMenu);
  font-family:"DM Serif Text",serif; font-style:italic; font-weight:400;
  font-size: clamp(20px, 3.6vw, 36px);
  line-height: 1.25; text-align:center;
  padding: clamp(16px, 3vw, 28px) 22px; /* większe paddingi */
  margin: 0;
  text-shadow: 2px 2px 4px rgba(255,255,255,0.85);
}
.quote-inner--inverse{
  background: var(--textMenu);
  color: var(--lime);
  text-shadow: 2px 2px 4px rgba(255,255,255,0.85);
}

/* ===== CO OFERUJEMY ===== */
.offer-one{ background:#fff; }
.offer-one__container{ max-width: var(--maxw); margin:0 auto; padding: 0 18px; }
.offer-one__grid{
  display:grid; grid-template-columns: 1fr minmax(380px, 40%);
  gap: clamp(18px,3vw,28px); align-items: stretch;
}
.offer-one__text{ display:flex; flex-direction:column; justify-content:center; gap: clamp(16px,2.6vw,22px); padding: 18px; }
.offer-one__title{ color:#F3704D; }
.offer-one__blocks p{ margin:0 0 10px 0; font-size: clamp(15px,1.6vw,19px); line-height:1.55; color:#2D2D2D; max-width:95%; }
.offer-one__blocks strong{ font-weight:800; font-size: clamp(16px,1.8vw,22px); line-height:1.35; }
.offer-one__photo{ display:block; width:100%; height:100%; }
.offer-one__photo img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; }

/* ===== TURKUSOWA LINIA ===== */
.divider-turquoise__container{ max-width: var(--maxw); margin:0 auto; padding:0 18px; }
.divider-turquoise__line{ height: 89px; background-color: var(--textMenu); width:100%; }

/* ===== OFERTA DÓŁ ===== */
.offer-two{ background:#fff; }
.offer-two__container{ max-width: var(--maxw); margin:0 auto; padding: 0 18px; }
.offer-two__grid{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px,3vw,28px); align-items: stretch; min-height: 520px;
}
.offer-two__left{
  position: relative;
  background: url('assets/fot2.png') center/cover no-repeat;
  overflow: hidden;
}
.offer-two__photo-frame{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:70%; height:80%;
}
.offer-two__photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.offer-two__right{ display:grid; grid-template-rows: 1fr 1fr 1fr; align-items:start; gap: clamp(10px,1.6vw,14px); color:#2D2D2D; padding: 18px; }
.offer-two__right p{ margin:0; font-size: clamp(15px,1.6vw,18px); line-height:1.55; }

/* ===== BENEFITS ===== */
.benefits{ background:#fff; }
.benefits__container{ max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.benefits__title{ padding: clamp(22px,3.2vw,28px) 0 clamp(6px,1.2vw,10px); }
.benefits__grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px,3vw,28px); align-items:start; padding-bottom: clamp(18px,3vw,28px);
}
.benefit{ text-align:center; display:grid; grid-template-rows:auto auto 1fr; gap:10px; padding: 12px; }
.benefit__icon{ width: clamp(78px, 10vw, 112px); height: clamp(78px, 10vw, 112px); object-fit:contain; display:block; margin:0 auto clamp(8px,1.2vw,12px); }
.benefit__heading{ margin:0; font-weight:800; letter-spacing:.06em; font-size: clamp(12px,1.3vw,15px); color:#1e1e1e; }
.benefit__text{ margin:0; color:#2D2D2D; font-size: clamp(14px,1.5vw,16px); line-height:1.6; max-width:26ch; margin-inline:auto; }
.benefits .btn--lime{ margin: clamp(16px,2vw,24px) auto clamp(22px,3vw,28px); }

/* ===== OPINIONS ===== */
.opinions{ background:#fff; }
.opinions__wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 18px; background: #f5f5f5; }
.opinions__title{ color:#1f1f1f; margin:0; padding: clamp(22px,3.2vw,28px) 0 clamp(10px,1.6vw,16px); font-family:"DM Serif Text",serif; font-style:italic; font-weight:400; font-size: clamp(30px,4.6vw,56px); line-height:1; text-align:center; }
.t-carousel{ overflow:hidden; margin: 0 0 clamp(18px,2.2vw,24px); }
.t-track{ display:flex; will-change: transform; }
.t-card{ flex:0 0 calc(100%/3); padding: clamp(16px,2vw,22px); text-align:center; color:#1f1f1f; }
.t-card blockquote{ margin:0 0 10px 0; font-size: clamp(15px,1.6vw,19px); line-height:1.6; }
.t-author{ font-weight:800; letter-spacing:.04em; font-size: clamp(13px,1.3vw,15px); }

.opinions__photos{ max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.p-carousel{ overflow:hidden; margin: clamp(12px,2vw,18px) 0 clamp(28px,3vw,36px); }
.p-track{ display:flex; will-change: transform; }
.p-item{ flex:0 0 calc(100%/3); padding: clamp(6px,1vw,10px); }
.p-item img{ width:100%; aspect-ratio: 1/1; object-fit:cover; display:block; }

/* ===== KONTAKT ===== */
.contact{ background:#fff; }
.contact__wrap{ background: var(--peach); }
.contact__container{ max-width: var(--maxw); margin:0 auto; padding: 0 18px 40px; color:#fff; }
.contact__title{ text-align:right; }
.contact__content{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.contact__logo-white{ max-width: 180px; width: auto; filter: brightness(0) invert(1); }
.contact__inline{ display:flex; align-items:center; justify-content:center; gap:12px; color:#fff; flex-wrap:wrap; }
.contact__inline-item{ display:inline-flex; align-items:center; gap:6px; color:#fff; }
.contact__sep{ color:#fff; }
.contact__icon--line{ width:22px; height:22px; color:#fff; }

/* ===== FOOTER ===== */
.footer{ background:#fff; border-top:1px solid #eee; padding:14px 0; }
.footer__container{ max-width: var(--maxw); margin:0 auto; padding:0 18px; font-size:14px; text-align:center; color:#666; }
.footer__container a{ color: inherit; font-weight:600; }
.footer__container a:hover{ color: var(--hover); }

/* Anchors offset pod sticky */
section[id]{ scroll-margin-top: 92px; }

/* ===== RESPONSYWNOŚĆ ===== */
@media (max-width: 1120px){
  .benefits__grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
  .benefits__grid{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
  .offer-one__grid{ grid-template-columns: 1fr; }
  .offer-one__photo img{ height:auto; }

  .offer-two__grid{ grid-template-columns: 1fr; min-height:0; }
  .offer-two__left{ min-height: 360px; }
  .offer-two__photo-frame{ width: 80%; height: 40%; }
}

@media (max-width: 920px){
  .t-card, .p-item{ flex: 0 0 calc(100%/2); }
}
@media (max-width: 560px){
  .t-card, .p-item{ flex: 0 0 100%; }
}

/* ——— BĄBELKI — maska na guttery ——— */
.co2-bg{
  position: fixed;
  inset: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 40;
  display: block;
  --gutter: calc((100vw - var(--maxw)) / 2);
  -webkit-mask:
    linear-gradient(#000 0 0) left top / max(var(--gutter),0px) 100% no-repeat,
    linear-gradient(#000 0 0) right top / max(var(--gutter),0px) 100% no-repeat;
  mask:
    linear-gradient(#000 0 0) left top / max(var(--gutter),0px) 100% no-repeat,
    linear-gradient(#000 0 0) right top / max(var(--gutter),0px) 100% no-repeat;
}