@import url("fonts.css");

:root {
  /* czerń / biel / karmazyn: barwy godła */
  --ink: #07080b;
  --green: #0d0f14;      /* ciemne pola */
  --green-2: #1b1e28;    /* ciemne pole, podniesione */
  --paper: #f7f5f0;
  --paper-2: #ebe8e0;
  --white: #ffffff;
  --on-green: #f7f5f0;
  --on-green-2: #a5a8b4;
  --on-paper: #0e1015;
  --on-paper-2: #50535e;
  --mint: #ec3552;       /* karmazyn na ciemnym */
  --seal: #c21c36;       /* karmazyn na jasnym */
  --seal-d: #96132a;
  --rule-g: rgba(247, 245, 240, .16);
  --rule-p: rgba(14, 16, 21, .16);

  --display: "Bodoni Moda", "Bodoni MT", Didot, serif;
  --text: "Archivo", "Segoe UI", system-ui, sans-serif;
  --gut: clamp(1rem, 4vw, 3.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --sec: clamp(4.5rem, 10vw, 9rem);
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; scrollbar-color: var(--green-2) var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--on-paper);
  font: 400 1.0625rem/1.6 var(--text); font-stretch: 100%;
  font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--seal); color: #fff; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--green-2); border: 3px solid var(--ink); border-radius: 8px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }

.wrap { width: min(100% - 2 * var(--gut), 1320px); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- typografia ---------- */
.d1, .d2, .d3 { font-family: var(--display); font-optical-sizing: auto; font-weight: 700; line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.d1 { font-size: clamp(3.4rem, 10.5vw, 6rem); font-weight: 800; }
.d2 { font-size: clamp(2.25rem, 5.4vw, 4.1rem); }
.d3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.1; letter-spacing: -.01em; }
.lab { font: 600 .74rem/1.3 var(--text); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; max-width: 56ch; text-wrap: pretty; }
.num { font-stretch: 88%; font-weight: 600; letter-spacing: .02em; }

/* ---------- ikony (maska, jeden krój kreski) ---------- */
.i { display: inline-block; flex: none; width: 1.15em; height: 1.15em; background: currentColor; vertical-align: -.22em;
  -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.i-clock { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.i-pin { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-5.6 6.5-11a6.5 6.5 0 1 0-13 0c0 5.4 6.5 11 6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.i-phone { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h3l1.5 4-2 1.5a11 11 0 0 0 6 6l1.5-2 4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4.5 5.7 2 2 0 0 1 6.5 3.5z'/%3E%3C/svg%3E"); }
.i-mail { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); }
.i-bank { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5 12 4l8.5 5.5M5 9.5h14M6.5 9.5v7M10.5 9.5v7M13.5 9.5v7M17.5 9.5v7M4 19.5h16M5 16.5h14'/%3E%3C/svg%3E"); }
.i-down { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11m0 0-4-4m4 4 4-4M5 19.5h14'/%3E%3C/svg%3E"); }
.i-arrow { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15m0 0-5-5m5 5-5 5'/%3E%3C/svg%3E"); }
.i-check { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.i-copy { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11' height='11' rx='1.5'/%3E%3Cpath d='M15.5 8.5v-3A1.5 1.5 0 0 0 14 4H6a1.5 1.5 0 0 0-1.5 1.5V14A1.5 1.5 0 0 0 6 15.5h2.5'/%3E%3C/svg%3E"); }
.i-user { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.5'/%3E%3Cpath d='M5 19.5c1-3.5 3.8-5 7-5s6 1.5 7 5'/%3E%3C/svg%3E"); }
.i-info { --g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.2'/%3E%3C/svg%3E"); }

/* ---------- przyciski ---------- */
.btn {
  --bg: var(--seal); --fg: #fff; --hov: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  padding: 1.05em 1.7em; border: 1px solid var(--bg); border-radius: 10px;
  font: 600 .95rem/1 var(--text); font-stretch: 108%; letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  color: var(--fg); background: linear-gradient(var(--hov), var(--hov)) bottom / 100% 0 no-repeat var(--bg);
  transition: background-size .5s var(--ease), color .3s, border-color .3s, transform .5s var(--ease), translate .5s var(--ease);
}
.btn:hover { background-size: 100% 100%; border-color: var(--hov); color: var(--ink); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn .i { transition: transform .5s var(--ease); }
.btn:hover .i-arrow { transform: translateX(.3em); }
.btn--line { --bg: transparent; --fg: var(--on-green); --hov: var(--on-green); border-color: rgba(247, 245, 240, .45); }
.btn--white { --bg: var(--white); --fg: var(--ink); --hov: var(--ink); }
.btn--white:hover { color: #fff; }
.btn--ink { --bg: var(--ink); --fg: #fff; --hov: var(--seal); }
.btn--ink:hover { color: #fff; }
.btn--inkline { --bg: transparent; --fg: var(--on-paper); --hov: var(--ink); border-color: var(--on-paper); }
.btn--inkline:hover { color: #fff; }
.btn--sm { padding: .8em 1.15em; font-size: .86rem; }
.btns { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- nagłówek ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--on-green); view-transition-name: hdr; transition: box-shadow .4s; }
.hdr.is-stuck { box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7); }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--mint); transform: scaleX(var(--prog, 0)); transform-origin: left; }
.hdr__top { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; align-items: center; padding-block: .5rem; font-size: .78rem; color: var(--on-green-2); border-bottom: 1px solid var(--rule-g); }
.hdr__top > * { display: inline-flex; align-items: center; gap: .45em; text-decoration: none; }
.hdr__top a:hover { color: var(--mint); }
.hdr__top .push { margin-left: auto; }
.hdr__main { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .7rem; }
.brand { display: flex; align-items: center; gap: .85rem; text-decoration: none; }
.brand img { width: 2.5rem; height: auto; transition: transform .8s var(--ease); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.brand:hover img { transform: translateY(-2px) scale(1.06); }
.brand b { display: block; font: 700 1.3rem/1.05 var(--display); letter-spacing: -.01em; }
.brand small { display: block; margin-top: .3rem; font: 600 .62rem/1 var(--text); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }
.nav { display: flex; align-items: center; gap: .3rem; }
.nav__a { position: relative; padding: .7rem 1rem; font: 500 .93rem/1 var(--text); text-decoration: none; color: var(--on-green-2); transition: color .3s; }
.nav__a::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .25rem; height: 1px; background: var(--mint); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.nav__a:hover, .nav__a[aria-current] { color: var(--on-green); }
.nav__a:hover::after, .nav__a[aria-current]::after { transform: scaleX(1); }
.nav .btn { margin-left: 1rem; }
.nav__extra { display: none; }
.hdr__toggle { display: none; width: 2.9rem; height: 2.9rem; border: 1px solid var(--rule-g); border-radius: 2px; position: relative; }
.hdr__toggle::before, .hdr__toggle::after { content: ""; position: absolute; left: 28%; right: 28%; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.hdr__toggle::before { top: 40%; }
.hdr__toggle::after { top: 58%; }
.hdr__toggle[aria-expanded="true"]::before { top: 49%; transform: rotate(45deg); }
.hdr__toggle[aria-expanded="true"]::after { top: 49%; transform: rotate(-45deg); }

@media (max-width: 960px) {
  .hide-s { display: none !important; }
  .hdr__toggle { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem var(--gut) 2rem; background: var(--ink); border-top: 1px solid var(--rule-g);
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .7s var(--ease), visibility 0s .7s;
  }
  .nav.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .7s var(--ease); }
  .nav__a { padding: 1.1rem 0; font: 700 1.9rem/1 var(--display); color: var(--on-green); border-bottom: 1px solid var(--rule-g); }
  .nav__a::after { display: none; }
  .nav__a[aria-current] { color: var(--mint); }
  .nav .btn { display: none; }
  .nav__extra { display: grid; gap: .9rem; margin-top: 1.4rem; color: var(--mint); font-weight: 600; }
  .nav__extra a { display: inline-flex; gap: .6em; align-items: center; text-decoration: none; }
}

/* ---------- stopka ---------- */
.ftr { background: var(--ink); color: var(--on-green-2); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; font-size: .94rem; position: relative; overflow: hidden; }
.ftr__grid { display: grid; grid-template-columns: 1.7fr 1fr 1.1fr; gap: 3rem clamp(2rem, 5vw, 5rem); }
.ftr .brand { color: var(--on-green); margin-bottom: 1.4rem; }
.ftr__about { max-width: 44ch; margin-bottom: 1.6rem; }
.ftr__list { display: grid; gap: .65rem; }
.ftr__list > * { display: flex; gap: .7em; align-items: baseline; }
.ftr__list .i { color: var(--mint); translate: 0 .18em; }
.ftr a { text-decoration: none; transition: color .3s; }
.ftr a:hover { color: var(--mint); }
.ftr h2 { color: var(--mint); margin-bottom: 1.3rem; }
.ftr__svc { display: grid; gap: .6rem; }
.ftr__svc a { display: inline-block; transition: color .3s, transform .5s var(--ease); }
.ftr__svc a:hover { transform: translateX(.4rem); }
.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: .34rem 0; border-bottom: 1px solid var(--rule-g); }
.hours td:last-child { text-align: right; color: var(--on-green); font-weight: 600; }
.hours tr.is-closed td:last-child { color: var(--on-green-2); font-weight: 400; }
.hours tr.is-today td { color: var(--mint); }
.hours tr.is-today td:first-child::before { content: ""; display: inline-block; width: .45em; height: .45em; margin-right: .6em; border-radius: 50%; background: var(--mint); vertical-align: .12em; }
.ftr__recv { margin-top: 1.1rem; line-height: 1.5; }
.ftr__recv strong { color: var(--mint); font-weight: 600; }
.ftr__end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 3rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--rule-g); font-size: .8rem; }
.ftr__end p { max-width: 62ch; }
.ftr::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(#fff 50%, var(--seal) 50%); }
@media (max-width: 900px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .ftr__grid { grid-template-columns: 1fr; } }

/* ---------- ruch: wejścia ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.js [data-r] { opacity: 0; transform: translateY(1.6rem); filter: blur(6px); transition: opacity .9s var(--ease), transform 1.1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js [data-r].in { opacity: 1; transform: none; filter: none; }
.js .ln { display: block; clip-path: inset(0 0 105% 0); transform: translateY(.35em); transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
.js .in .ln, .js .ln.in { clip-path: inset(-.15em -.1em -.25em -.1em); transform: none; }
.ico { display: block; width: 3rem; height: 3rem; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.js .ico svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease) .15s; }
.js .in .ico svg > *, .js .in.ico svg > * { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-r], .js .ln { opacity: 1; transform: none; filter: none; clip-path: none; }
  .js .ico svg > * { stroke-dashoffset: 0; }
}