/* =========================
   00. GLOBAL TOKENS (BAZA)
   ========================= */
:root{
  --fontA:"Arsenal",Arial,sans-serif;
  --fontB:"Cormorant Garamond",serif;

  --heading:#62391D;
  --text:#8B4836;
  --ink:var(--text);
  --muted:rgba(139,72,54,.78);

  --bgSoft:#FDF7F2;
  --bg:var(--bgSoft);
  --paper:var(--bgSoft);
  --white:#fff;

  --detailsBtnBg:#AE9786;
  --detailsBtnText:#FCF5EE;
  --aboutBtnBg:#AE9786;
  --aboutBloczekBg:#62391D;
  --aboutBtnText:#FCF5EE;

  --brand:var(--detailsBtnBg);
  --brand2:#9f8675;

  --shadow:0 14px 34px rgba(98,57,29,.10);
  --shadowSoft:0 14px 34px rgba(98,57,29,.08);

  --r1:22px;
  --r2:16px;

  --container:1100px;
  --pad:clamp(22px,3.2vw,52px);

  --focus:rgba(98,57,29,.26);

  --coffeeInk:rgba(98,57,29,.96);
  --coffeeMuted:rgba(139,72,54,.72);
  --coffee:rgb(98,57,29);

  --latteA:rgba(252,245,238,.72);
  --latteB:rgba(252,245,238,.82);
  --latteC:rgba(252,245,238,.95);

  --coffeeLine:rgba(98,57,29,.12);
  --coffeeLine2:rgba(98,57,29,.16);
  --coffeeLine3:rgba(98,57,29,.20);

  --ringCoffee:rgba(98,57,29,.12);
  --ringCoffee2:rgba(98,57,29,.18);
  --ringCoffee3:rgba(98,57,29,.22);
  --ringCoffee4:rgba(98,57,29,.28);
  --ringCoffee5:rgba(98,57,29,.34);
  --ringCoffee6:rgba(98,57,29,.42);

  --glassWhiteA:rgba(255,255,255,.92);
  --glassWhiteB:rgba(255,255,255,.96);
  --glassWhiteD:rgba(255,255,255,.78);
  --glassWhiteE:rgba(255,255,255,.72);
  --glassWhiteF:rgba(255,255,255,.65);
}

/* =========================
   01. RESET I BAZA
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0}
li{list-style:none}
button,input,textarea,select{font:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
html{scroll-behavior:smooth}

body{
  overflow-x:hidden;
  font-family:var(--fontA);
  color:var(--ink);
  background:var(--bg);
}

.container{
  width:min(var(--container),92vw);
  margin:0 auto;
}

/* =========================
   02. A11Y SKIP LINK
   ========================= */
.skip-link{
  position:absolute;
  top:10px;
  left:-9999px;
  z-index:9999;
  padding:10px 12px;
  border-radius:12px;
  background:var(--white);
  color:#000;
  box-shadow:var(--shadow);
}

.skip-link:focus{
  left:12px;
}

/* =========================
   03. LAYOUT SEKCJI
   ========================= */
main > section{
  position:relative;
  background:var(--paper);
}

main > section > .container{
  padding:var(--pad) 0;
}

main > section.screen-section{
  height:100svh;
  min-height:100svh;
  overflow:hidden;
}

main > section.screen-section > .container{
  height:100%;
}

/* =========================
   04. WSPÓLNE KOMPONENTY
   ========================= */
.section-header{
  max-width:980px;
  margin:0 auto 14px;
  text-align:center;
}

.section-header h2{
  margin:0;
  font-family:var(--fontB);
  font-weight:600;
  letter-spacing:-.6px;
  font-size:clamp(2rem,3vw,3.6rem);
  color:var(--heading);
}

.section-header p{
  max-width:860px;
  margin:10px auto 0;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--muted);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 22px;
  border:2px solid transparent;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  font-weight:800;
  letter-spacing:.04em;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.btn:active{
  transform:none;
}

.btn-primary{
  background:var(--brand);
  color:var(--detailsBtnText);
  box-shadow:0 12px 28px rgba(98,57,29,.16);
}

.btn-primary:hover{
  background:var(--brand2);
  transform:translateY(-1px);
}

.btn-ghost{
  background:transparent;
  color:var(--btnGhostColor,var(--heading));
  border-color:var(--btnGhostBorder,rgba(98,57,29,.24));
}

.btn-ghost:hover{
  background:var(--btnGhostHover,rgba(98,57,29,.08));
  transform:translateY(-1px);
}

/* =========================
   05. GLOBAL MOBILE
   ========================= */
@media (max-width:900px){
  main > section.screen-section{
    height:auto;
    min-height:auto;
    overflow:visible;
  }

  main > section.screen-section > .container{
    height:auto;
  }
}

@media (max-width:520px){
  .container{
    width:min(var(--container),94vw);
  }
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  .btn{
    transition:none;
  }
}