/* ════════════════════════════════════════════════════════════
   AURORA HEURE — style.css
   „Ta godzina jest twoja." — scroll to jedna doba: niebo płynie
   od świtu (krem) przez złotą godzinę po l'heure bleue i noc.
   Paleta: kremy + zgaszony błękit (pierwszy w rodzinie Aurora)
   + złoto pierwszej gwiazdy. Fonty: Bodoni Moda + Figtree.
   ════════════════════════════════════════════════════════════ */

:root{
  /* papier / atrament (atrament z nutą granatu) */
  --paper:  #F6F4EF;
  --paper2: #EFECE4;
  --paper3: #E3E0D6;
  --ink:    #232733;
  --ink-mid:#666D7C;
  --ink-lt: #98A0AF;

  /* l'heure bleue */
  --blue:      #5E7396;
  --blue-hover:#48597A;
  --blue-mid:  #8298B8;
  --blue-pale: #E7ECF4;
  --blue-soft: #D3DCE9;

  /* pierwsza gwiazda + świt */
  --gold: #D9B380;
  --rose: #D9BFB7;

  /* noc */
  --night:  #141A28;
  --night2: #0F1420;
  --night-ink: #E8EBF2;
  --night-mid: #9AA4BB;
  --night-line: rgba(232,235,242,.14);

  --line: rgba(35,39,51,.14);

  /* niebo — JS lerpuje scrollem (świt → dzień → l'heure bleue → noc) */
  --sky-a: #F2EBE1;
  --sky-b: #F6F4EF;

  --serif: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --sans:  'Figtree', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }

html{ background:var(--paper); scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:transparent;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--blue); color:var(--paper); }

body.has-cursor, body.has-cursor a, body.has-cursor button,
body.has-cursor input, body.has-cursor label{ cursor:none; }

/* ── EYEBROW / NAGŁÓWKI SEKCJI ─────────────────────────────── */
.eyebrow{
  display:inline-block;
  font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue);
}
.section-head{ max-width:1180px; margin:0 auto 4.5rem; padding:0 24px; }
.section-head__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem, 4.6vw, 3.7rem);
  line-height:1.08; margin-top:1rem; letter-spacing:-.01em;
}
.section-head__title em{ font-style:italic; color:var(--blue); }
.section-head__sub{ margin-top:1rem; color:var(--ink-mid); max-width:520px; }

/* ── PRZYCISKI — język N°5: świt w środku przycisku
      (kropka rośnie od lewej jak wschodzące słońce) ─────────── */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:.6em;
  padding:1em 1.7em;
  font-weight:600; font-size:.92rem; letter-spacing:.02em;
  border-radius:10px;
  border:1px solid var(--blue);
  transition:color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
  isolation:isolate;
}
.btn::before{
  content:''; position:absolute; z-index:-1;
  left:1.1em; top:50%; width:8px; height:8px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  transition:transform .55s var(--ease);
}
.btn:hover::before{ transform:translate(-50%,-50%) scale(60); }
.btn i{ font-style:normal; transition:transform .3s var(--ease); }
.btn:hover i{ transform:translateX(4px); }

.btn--primary{ background:var(--blue); color:var(--paper); }
.btn--primary::before{ background:var(--blue-hover); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost::before{ background:var(--blue-pale); }
.btn--ghost:hover{ border-color:var(--blue); }
.btn--small{ padding:.62em 1.15em; font-size:.82rem; }
.btn--block{ width:100%; justify-content:center; }

.magnetic{ will-change:transform; }

/* ════════════════════════════════════════════════════════════
   PRELOADER — tarcza nabija godzinę, horyzont się rozstępuje
   ════════════════════════════════════════════════════════════ */
.loader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  pointer-events:none;
}
.loader__half{
  position:absolute; left:0; right:0; height:50.5%;
  background:linear-gradient(180deg, #F2EBE1, #F6F4EF);
  transition:transform 1s var(--ease) .15s;
}
.loader__half--top{ top:0; border-bottom:1px solid var(--line); }
.loader__half--bot{ bottom:0; background:linear-gradient(0deg, #EFECE4, #F6F4EF); }
.loader__stage{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:1.3rem;
  transition:opacity .4s ease;
}
.loader__dial{
  position:relative; width:96px; height:96px;
  border:1px solid var(--blue-soft); border-radius:50%;
}
.loader__hand{
  position:absolute; left:50%; bottom:50%;
  width:1.5px; height:38px; background:var(--blue);
  transform-origin:bottom center;
  transform:translateX(-50%) rotate(0deg);
}
.loader__pin{
  position:absolute; left:50%; top:50%;
  width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--gold);
}
.loader__word{
  font-family:var(--serif); font-size:1.35rem; color:var(--ink);
}
.loader__word em{ font-style:italic; color:var(--blue); }
.loader__time{
  font-size:.85rem; font-weight:600; letter-spacing:.18em;
  color:var(--ink-mid); font-variant-numeric:tabular-nums;
}
.loader.is-done .loader__half--top{ transform:translateY(-102%); }
.loader.is-done .loader__half--bot{ transform:translateY(102%); }
.loader.is-done .loader__stage{ opacity:0; }
/* bezpiecznik — kurtyna nigdy nie zostaje (nawet bez JS) */
@keyframes loader-safety{ to{ visibility:hidden; opacity:0; } }
.loader{ animation:loader-safety .01s 5.2s forwards; }

/* ════════════════════════════════════════════════════════════
   NIEBO — jedna doba na całej stronie
   ════════════════════════════════════════════════════════════ */
.sky{
  position:fixed; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 100%);
  overflow:hidden;
}
.sky__glow{
  position:absolute; width:56vmax; height:56vmax;
  left:var(--sun-x, 18%); top:var(--sun-y, 70%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(233,196,143,var(--glow-a, .34)) 0%, rgba(233,196,143,0) 62%);
  pointer-events:none;
}
.sky__sun{
  position:absolute; width:76px; height:76px;
  left:var(--sun-x, 18%); top:var(--sun-y, 70%);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #FBEBD3, var(--sun-c, #E9C48F));
  box-shadow:0 0 44px 6px rgba(233,196,143,.5);
  opacity:var(--sun-o, .9);
}

/* ── GRAIN / PROGRESS ──────────────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity:.045; animation:grain 9s steps(10) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); } 20%{ transform:translate(-3%,2%); }
  40%{ transform:translate(2%,-3%); } 60%{ transform:translate(-2%,-2%); }
  80%{ transform:translate(3%,3%); }
}
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:130;
  background:transparent; pointer-events:none;
}
.progress i{ display:block; width:0; height:100%; background:var(--blue); }

/* ── HUD — mała tarcza dnia (scroll = godzina) ─────────────── */
.hud{
  position:fixed; left:26px; bottom:26px; z-index:105;
  display:flex; align-items:center; gap:12px;
  pointer-events:none;
  opacity:0; transition:opacity .8s ease .2s;
}
body.is-loaded .hud{ opacity:1; }
.hud__dial{
  position:relative; width:36px; height:36px; flex:0 0 auto;
  border:1px solid var(--line); border-radius:50%;
  background:color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter:blur(4px);
}
.hud__hand{
  position:absolute; left:50%; bottom:50%;
  width:1.5px; height:13px; background:var(--blue);
  transform-origin:bottom center;
  transform:translateX(-50%) rotate(0deg);
}
.hud__hand::after{
  content:''; position:absolute; left:50%; bottom:-2px;
  width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:var(--gold);
}
.hud__meta{ display:flex; flex-direction:column; line-height:1.25; }
.hud__meta b{
  font-size:.8rem; font-weight:700; letter-spacing:.08em;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.hud__meta span{
  font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-mid);
}

/* ── KURSOR-CADRAN ─────────────────────────────────────────── */
.cursor,.cursor-ring{
  position:fixed; top:0; left:0; z-index:240; pointer-events:none;
  display:none;
}
body.has-cursor .cursor, body.has-cursor .cursor-ring{ display:block; }
.cursor{
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:var(--blue);
}
.cursor-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid color-mix(in srgb, var(--blue) 55%, transparent);
  border-radius:50%;
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), border-color .3s;
}
.cursor-ring i{
  position:absolute; inset:0;
  animation:cur-spin 10s linear infinite;
}
.cursor-ring i::before{
  content:''; position:absolute; top:-1px; left:50%;
  width:1.5px; height:7px; margin-left:-.75px;
  background:var(--gold);
}
@keyframes cur-spin{ to{ transform:rotate(360deg); } }
.cursor.is-hover{ transform:scale(2.1); background:var(--gold); }
.cursor-ring.is-hover{
  width:52px; height:52px; margin:-26px 0 0 -26px;
  border-color:color-mix(in srgb, var(--gold) 70%, transparent);
}
.cursor.is-down{ transform:scale(.7); }
.cursor.is-out,.cursor-ring.is-out{ opacity:0; }

/* ════════════════════════════════════════════════════════════
   HERO — tarcza godzin o świcie
   ════════════════════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:120px 6vw 140px;
  overflow:hidden;
}
.hero__motes{ position:absolute; inset:0; width:100%; height:100%; }
.hero__dial{
  position:absolute; top:50%; right:-16vw;
  width:min(62vw, 900px); aspect-ratio:1;
  transform:translateY(-50%);
  color:var(--blue);
  opacity:.5;
  pointer-events:none;
}
.hero__dial svg{ width:100%; height:100%; animation:dial-slow 240s linear infinite; }
@keyframes dial-slow{ to{ transform:rotate(360deg); } }
.hero__orbit{
  position:absolute; inset:0;
  animation:dial-orbit 64s linear infinite;
}
.hero__orbit i{
  position:absolute; top:-5px; left:50%;
  width:10px; height:10px; margin-left:-5px;
  border-radius:50%; background:var(--gold);
  box-shadow:0 0 14px 3px rgba(217,179,128,.55);
}
@keyframes dial-orbit{ to{ transform:rotate(360deg); } }

.hero__inner{ position:relative; z-index:2; max-width:760px; }
.hero__eyebrow{ margin-bottom:2rem; color:var(--ink-mid); }
.hero__eyebrow b{
  color:var(--blue); font-variant-numeric:tabular-nums; font-weight:700;
}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.4rem, 9.4vw, 8rem);
  line-height:1.02; letter-spacing:-.015em;
}
.hero__line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__line i{
  display:inline-block; font-style:normal;
  transform:translateY(112%);
  transition:transform 1.1s var(--ease);
}
.hero__line--em i em{ font-style:italic; color:var(--blue); }
body.is-loaded .hero__line i{ transform:translateY(0); }
body.is-loaded .hero__line:nth-child(2) i{ transition-delay:.12s; }

.hero__lede{
  margin-top:2.1rem; max-width:480px;
  font-size:1.06rem; color:var(--ink-mid);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.6rem; }

.hero__foot{
  position:absolute; left:6vw; right:6vw; bottom:34px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-size:.8rem; color:var(--ink-mid);
}
.hero__badge{ display:flex; align-items:center; gap:10px; }
.hero__badge-stars{ color:var(--gold); letter-spacing:.18em; }
.hero__badge strong{ color:var(--ink); }
.hero__scroll{ display:flex; align-items:center; gap:10px; letter-spacing:.1em; }
.hero__scroll i{
  position:relative; width:1px; height:34px; background:var(--line); overflow:hidden;
}
.hero__scroll i::after{
  content:''; position:absolute; left:0; top:-8px;
  width:1px; height:8px; background:var(--blue);
  animation:scroll-drop 2.2s var(--ease) infinite;
}
@keyframes scroll-drop{ 70%,100%{ transform:translateY(46px); } }
.hero__est{ letter-spacing:.14em; }
.hero__horizon{
  position:absolute; left:0; right:0; bottom:17%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

/* reveals ogólne */
[data-fade]{ opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s var(--ease); }
[data-fade].is-in{ opacity:1; transform:none; }
[data-lines]{ display:block; opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s var(--ease); }
[data-lines].is-in{ opacity:1; transform:none; }
.manifest__title span:nth-child(2){ transition-delay:.08s; }
.manifest__title span:nth-child(3){ transition-delay:.16s; }
.manifest__title span:nth-child(4){ transition-delay:.24s; }
.manifest__title span:nth-child(5){ transition-delay:.32s; }

/* ════════════════════════════════════════════════════════════
   NAV (fixed; w DOM za hero)
   ════════════════════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 26px;
  transition:background .5s ease, box-shadow .5s ease, padding .4s ease;
}
.nav.is-scrolled{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line);
  padding:12px 26px;
}
body.menu-open .nav{ background:transparent; box-shadow:none; backdrop-filter:none; }
.nav__logo{ font-family:var(--serif); font-size:1.2rem; color:var(--ink); transition:color .4s; }
.nav__logo em{ font-style:italic; color:var(--blue); transition:color .4s; }
.nav__meta{
  display:flex; align-items:center; gap:10px;
  font-size:.78rem; letter-spacing:.1em; color:var(--ink-mid);
  font-variant-numeric:tabular-nums;
  transition:color .4s;
}
.nav__right{ display:flex; align-items:center; gap:14px; }
.nav__menu{
  display:flex; align-items:center; gap:9px;
  font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); transition:color .4s;
}
.nav__menu-ico{ display:flex; flex-direction:column; gap:5px; width:22px; }
.nav__menu-ico i{ height:1.5px; background:currentColor; transition:transform .45s var(--ease), width .3s; }
.nav__menu-ico i:last-child{ width:70%; align-self:flex-end; }
.nav__menu.is-open .nav__menu-ico i:first-child{ transform:translateY(3.2px) rotate(45deg); }
.nav__menu.is-open .nav__menu-ico i:last-child{ width:100%; transform:translateY(-3.3px) rotate(-45deg); }
body.menu-open .nav__logo, body.menu-open .nav__logo em,
body.menu-open .nav__meta, body.menu-open .nav__menu{ color:var(--night-ink); }
body.menu-open .nav__logo em{ color:var(--gold); }

/* tryb nocny — kiedy scroll wjeżdża w l'heure bleue / noc */
body.is-night .nav.is-scrolled{
  background:rgba(20,26,40,.72);
  box-shadow:0 1px 0 var(--night-line);
}
body.is-night .nav__logo, body.is-night .nav__meta, body.is-night .nav__menu{ color:var(--night-ink); }
body.is-night .nav__logo em{ color:var(--gold); }
body.is-night .hud__dial{ border-color:var(--night-line); background:rgba(20,26,40,.5); }
body.is-night .hud__hand{ background:var(--night-ink); }
body.is-night .hud__meta b{ color:var(--night-ink); }
body.is-night .hud__meta span{ color:var(--night-mid); }
body.is-loaded .hud.is-off{ opacity:0; }

/* ════════════════════════════════════════════════════════════
   MENU — noc rozlewa się z rogu (clip-path circle spod przycisku)
   z-index 110 POD nav 120 — lekcja Miroir/Ligne
   ════════════════════════════════════════════════════════════ */
.menu{
  position:fixed; inset:0; z-index:110;
  background:linear-gradient(200deg, #1B2334 0%, var(--night) 55%, var(--night2) 100%);
  clip-path:circle(0px at calc(100% - 120px) 40px);
  visibility:hidden;
  transition:clip-path .95s var(--ease), visibility 0s .95s;
  overflow:hidden;
}
.menu.is-open{
  clip-path:circle(150% at calc(100% - 120px) 40px);
  visibility:visible;
  transition:clip-path .95s var(--ease), visibility 0s;
}
.menu__stars i, .night__stars i{
  position:absolute;
  left:calc(var(--sx) * 1%); top:calc(var(--sy) * 1%);
  width:2px; height:2px; border-radius:50%;
  background:var(--night-ink);
  opacity:.7;
  animation:twinkle 4.6s ease-in-out infinite;
  animation-delay:calc(var(--sd) * 1s);
}
@keyframes twinkle{ 50%{ opacity:.12; transform:scale(.6); } }
.menu__stars, .night__stars{ position:absolute; inset:0; pointer-events:none; }
.menu__inner{
  position:relative; z-index:2; height:100%;
  display:grid; grid-template-columns:1.5fr 1fr; gap:6vw;
  align-items:center;
  padding:110px 7vw 60px;
  max-width:1400px; margin:0 auto;
}
.menu__links{ display:flex; flex-direction:column; gap:.4em; }
.menu__links a{
  display:flex; align-items:baseline; gap:22px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem, 4.6vw, 3.6rem);
  color:var(--night-ink); line-height:1.22;
  opacity:0; transform:translateY(26px);
  transition:opacity .6s ease, transform .6s var(--ease), color .3s;
}
.menu.is-open .menu__links a{ opacity:1; transform:none; }
.menu.is-open .menu__links a:nth-child(1){ transition-delay:.25s; }
.menu.is-open .menu__links a:nth-child(2){ transition-delay:.32s; }
.menu.is-open .menu__links a:nth-child(3){ transition-delay:.39s; }
.menu.is-open .menu__links a:nth-child(4){ transition-delay:.46s; }
.menu.is-open .menu__links a:nth-child(5){ transition-delay:.53s; }
.menu__links a:hover{ color:var(--gold); }
.menu__links a s{
  text-decoration:none;
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; color:var(--gold);
  font-variant-numeric:tabular-nums;
  flex:0 0 54px;
}
.menu__info{
  display:flex; flex-direction:column; gap:1.6rem;
  opacity:0; transform:translateY(20px);
  transition:opacity .6s ease .55s, transform .6s var(--ease) .55s;
}
.menu.is-open .menu__info{ opacity:1; transform:none; }
.menu__label{
  display:block; font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--night-mid); margin-bottom:.35rem;
}
.menu__block p{ color:var(--night-ink); font-size:.95rem; }
.menu__block a{ text-decoration:underline; text-underline-offset:3px; }
.menu__block a:hover{ color:var(--gold); }
.menu__info .btn--primary{ align-self:flex-start; border-color:var(--gold); background:var(--gold); color:var(--night); }
.menu__info .btn--primary::before{ background:#E8CA9C; }

/* ════════════════════════════════════════════════════════════
   MANIFEST
   ════════════════════════════════════════════════════════════ */
.manifest{
  position:relative;
  max-width:980px; margin:0 auto;
  padding:20vh 24px 14vh;
  text-align:center;
}
.manifest__dial{
  position:absolute; top:50%; left:50%;
  width:min(78vw, 640px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  color:var(--blue); opacity:.09;
  pointer-events:none;
}
.manifest__dial svg{ width:100%; height:100%; }
.manifest__dial line{
  transform-origin:300px 300px;
  transform:rotate(var(--mh, 0deg));
}
.manifest__title{
  position:relative;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 4.4vw, 3.4rem);
  line-height:1.22; margin-top:1.4rem;
}
.manifest__title em{ font-style:italic; color:var(--blue); }
.manifest__stats{
  display:flex; justify-content:center; gap:clamp(2rem, 7vw, 6rem);
  margin-top:4.5rem;
}
.stat strong{
  display:block;
  font-family:var(--serif); font-size:clamp(2.2rem, 4vw, 3.2rem);
  color:var(--blue);
}
.stat span{ font-size:.8rem; letter-spacing:.08em; color:var(--ink-mid); }

/* ── LINIA GODZIN (marquee) ────────────────────────────────── */
.marq{
  overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:16px 0;
}
.marq__track{
  display:flex; align-items:center; gap:2.4rem;
  width:max-content;
  animation:marq 30s linear infinite;
}
.marq:hover .marq__track{ animation-play-state:paused; }
.marq__track span{
  font-family:var(--serif); font-style:italic;
  font-size:1.05rem; color:var(--ink-mid);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.marq__track i{ color:var(--gold); font-style:normal; font-size:.8rem; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ════════════════════════════════════════════════════════════
   PLAN DNIA — usługi na osi godzin
   ════════════════════════════════════════════════════════════ */
.services{ padding:16vh 0 10vh; }
.plan{
  display:grid; grid-template-columns:minmax(230px, 330px) 1fr;
  gap:clamp(2rem, 6vw, 6rem);
  max-width:1180px; margin:0 auto; padding:0 24px;
}
.plan__now{
  position:sticky; top:130px; align-self:start;
  padding-top:.5rem;
}
.plan__now-label{
  display:block; font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-lt);
}
.plan__now-hour{
  display:block;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.6rem, 6.5vw, 6rem);
  line-height:1.05; color:var(--blue);
  font-variant-numeric:tabular-nums;
  margin:.4rem 0 .6rem;
  transition:opacity .3s ease;
}
.plan__now-name{ display:block; color:var(--ink-mid); font-size:.95rem; max-width:240px; }

.plan__list{ position:relative; padding-left:56px; }
.plan__line{
  position:absolute; left:20px; top:8px; bottom:8px;
  width:1px; background:var(--line);
}
.plan__line i{
  display:block; width:1px; height:var(--fill, 0%);
  background:var(--blue);
  transition:height .2s linear;
}
.tl{ position:relative; border-bottom:1px solid var(--line); }
.tl:first-child{ border-top:1px solid var(--line); }
.tl__dot{
  position:absolute; left:-41px; top:34px;
  width:10px; height:10px; border-radius:50%;
  border:1.5px solid var(--blue); background:var(--paper);
  transition:background .3s, box-shadow .3s, transform .3s;
}
.tl.is-past .tl__dot{ background:var(--blue); }
.tl.is-now .tl__dot{
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--gold) 22%, transparent);
  transform:scale(1.15);
}
.tl__head{
  display:grid; grid-template-columns:70px 1fr auto 30px;
  align-items:baseline; gap:18px;
  width:100%; text-align:left;
  padding:26px 0;
}
.tl__hour{
  font-size:.82rem; font-weight:700; letter-spacing:.08em;
  color:var(--blue); font-variant-numeric:tabular-nums;
}
.tl__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  line-height:1.15;
  transition:color .3s, transform .45s var(--ease);
}
.tl:hover .tl__name, .tl.is-open .tl__name{ color:var(--blue); transform:translateX(6px); }
.tl__meta{ font-size:.82rem; color:var(--ink-mid); white-space:nowrap; }
.tl__sign{ position:relative; width:14px; height:14px; justify-self:end; align-self:center; }
.tl__sign i{
  position:absolute; left:0; top:50%; width:14px; height:1.5px;
  background:var(--ink-mid); transition:transform .4s var(--ease), background .3s;
}
.tl__sign i:last-child{ transform:rotate(90deg); }
.tl.is-open .tl__sign i:last-child{ transform:rotate(0deg); }
.tl.is-open .tl__sign i{ background:var(--blue); }
.tl__body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease);
}
.tl__body-in{ overflow:hidden; }
.tl.is-open .tl__body{ grid-template-rows:1fr; }
.tl__desc{
  max-width:560px; color:var(--ink-mid);
  padding:2px 0 20px 88px;
}
.tl__body-in .btn{ margin:0 0 28px 88px; }

/* ════════════════════════════════════════════════════════════
   CZTERY PORY DNIA — zespół
   ════════════════════════════════════════════════════════════ */
.atelier{ padding:12vh 0; }
.poras{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 2vw, 26px);
  max-width:1240px; margin:0 auto; padding:0 24px;
}
/* karty ułożone po łuku słońca (offset per pora dnia — działa dla dowolnej liczby stylistek) */
.pcard[data-pora="swit"]{          --off:26px; }
.pcard[data-pora="poranek"]{       --off:6px; }
.pcard[data-pora="przedpoludnie"]{ --off:-10px; }
.pcard[data-pora="poludnie"]{      --off:-16px; }
.pcard[data-pora="popoludnie"]{    --off:-10px; }
.pcard[data-pora="zlota"]{         --off:4px; }
.pcard[data-pora="zmierzch"]{      --off:18px; }
.pcard[data-pora="noc"]{           --off:38px; }
.pcard{
  position:relative;
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter:blur(6px);
  border:1px solid var(--line); border-radius:18px;
  padding:16px 16px 24px;
  transform:translateY(var(--off, 0));
  transition:transform .5s var(--ease), box-shadow .5s ease, border-color .4s;
}
.pcard:hover{
  transform:translateY(calc(var(--off, 0px) - 8px));
  border-color:color-mix(in srgb, var(--tone) 55%, var(--line));
  box-shadow:0 26px 60px -30px color-mix(in srgb, var(--tone) 45%, transparent);
}
.pcard__sky{
  position:relative; height:150px;
  border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--tone) 42%, #FBF9F4) 0%,
    color-mix(in srgb, var(--tone) 74%, #2A3143) 100%);
  transition:filter .5s ease;
}
.pcard:hover .pcard__sky{ filter:brightness(1.07) saturate(1.06); }
.pcard__horizon{
  position:absolute; left:0; right:0; bottom:26%;
  height:1px; background:rgba(255,255,255,.5);
}
.pcard__orb{
  position:absolute;
  width:24px; height:24px; border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #FDF3E1, var(--gold));
  box-shadow:0 0 18px 4px color-mix(in srgb, var(--gold) 55%, transparent);
  transition:transform .6s var(--ease);
}
/* pozycja słońca = pora dnia stylistki (per data-pora, nie nth-child) */
.pcard[data-pora="swit"] .pcard__orb{          left:16%; bottom:22%; }
.pcard[data-pora="poranek"] .pcard__orb{       left:28%; top:34%; }
.pcard[data-pora="przedpoludnie"] .pcard__orb{ left:40%; top:18%; }
.pcard[data-pora="poludnie"] .pcard__orb{      left:46%; top:14%; }
.pcard[data-pora="popoludnie"] .pcard__orb{    right:34%; top:20%; }
.pcard[data-pora="zlota"] .pcard__orb{         right:22%; top:36%; }
.pcard[data-pora="zmierzch"] .pcard__orb{      right:14%; bottom:20%; }
.pcard[data-pora="noc"] .pcard__orb{
  right:20%; top:16%; width:18px; height:18px;
  background:radial-gradient(circle at 60% 40%, #FFFFFF, #D9DFEC);
  box-shadow:0 0 14px 3px rgba(217,223,236,.5);
}
.pcard:hover .pcard__orb{ transform:scale(1.25); }
.pcard__star{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff; opacity:.9;
  animation:twinkle 3.8s ease-in-out infinite;
}
.pcard__star--a{ left:26%; top:22%; }
.pcard__star--b{ left:58%; top:38%; animation-delay:1.6s; }
.pcard__init{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-family:var(--serif); font-style:italic;
  font-size:2rem; color:rgba(255,255,255,.65);
  letter-spacing:.06em;
}
.pcard__pora{
  display:inline-block; margin-top:18px;
  font-size:.66rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:color-mix(in srgb, var(--tone) 78%, var(--ink));
}
.pcard__name{
  font-family:var(--serif); font-weight:400;
  font-size:1.45rem; margin-top:.35rem;
}
.pcard__role{ display:block; font-size:.8rem; color:var(--ink-mid); margin-top:.15rem; }
.pcard__note{ font-size:.86rem; color:var(--ink-mid); margin-top:.8rem; min-height:3.6em; }
.pcard__btn{
  display:inline-flex; align-items:center; gap:.5em;
  margin-top:1rem;
  font-size:.85rem; font-weight:600; color:var(--blue);
  border-bottom:1px solid color-mix(in srgb, var(--blue) 40%, transparent);
  padding-bottom:2px;
  transition:color .3s, border-color .3s;
}
.pcard__btn:hover{ color:var(--blue-hover); border-color:var(--blue-hover); }
.pcard__btn i{ font-style:normal; transition:transform .3s var(--ease); }
.pcard__btn:hover i{ transform:translateX(4px); }
/* reveal karty (main.js nadaje .member data-reveal) */
.member[data-reveal]{ opacity:0; transition:opacity .9s ease; }
.member[data-reveal].is-in{ opacity:1; }

/* ════════════════════════════════════════════════════════════
   MIGAWKI — galeria pionowych pasków
   ════════════════════════════════════════════════════════════ */
.gallery{ padding:12vh 0; }
.strips{
  display:flex; gap:10px;
  height:min(66vh, 620px);
  max-width:1340px; margin:0 auto; padding:0 24px;
}
.gphoto{
  position:relative; flex:1;
  border-radius:14px; overflow:hidden;
  cursor:pointer;
  transition:flex .7s var(--ease);
  background:var(--paper3);
}
.gphoto:hover{ flex:3.4; }
.gphoto img{ width:100%; height:100%; object-fit:cover; }
/* reveal opacity-only — flex robi układ, transform nietykany */
.gphoto[data-reveal]{ opacity:0; transition:opacity .9s ease, flex .7s var(--ease); }
.gphoto[data-reveal].is-in{ opacity:1; }
.gphoto__num{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.64rem; font-weight:700; letter-spacing:.14em;
  color:var(--paper);
  background:color-mix(in srgb, var(--night) 55%, transparent);
  backdrop-filter:blur(4px);
  padding:4px 9px; border-radius:99px;
  white-space:nowrap;
}
.gphoto__dot{
  position:absolute; left:50%; top:44%;
  width:8px; height:8px; margin:-4px;
  border-radius:50%; background:rgba(255,255,255,.85);
  box-shadow:0 0 16px 4px rgba(255,255,255,.45);
}
.gphoto__year{
  position:absolute; right:14px; top:12px;
  font-family:var(--serif); font-style:italic;
  font-size:.8rem; color:rgba(255,255,255,.75);
}
.gphoto__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:34px 14px 12px;
  font-size:.8rem; font-weight:600; color:#fff;
  background:linear-gradient(0deg, rgba(15,20,32,.72), transparent);
  opacity:0; transform:translateY(8px);
  transition:opacity .45s ease .1s, transform .45s var(--ease) .1s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gphoto:hover .gphoto__cap{ opacity:1; transform:none; }
.gallery__loading{ display:flex; gap:8px; align-items:center; justify-content:center; width:100%; }
.gallery__loading span{
  width:8px; height:8px; border-radius:50%; background:var(--blue-soft);
  animation:load-b 1.2s ease-in-out infinite;
}
.gallery__loading span:nth-child(2){ animation-delay:.15s; }
.gallery__loading span:nth-child(3){ animation-delay:.3s; }
.gallery__loading span:nth-child(4){ animation-delay:.45s; }
@keyframes load-b{ 50%{ transform:translateY(-8px); background:var(--blue); } }

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center;
  background:rgba(15,20,32,.94);
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility 0s .4s;
}
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .4s ease; }
.lightbox figure{ max-width:88vw; max-height:86vh; }
.lightbox img{ max-width:88vw; max-height:78vh; object-fit:contain; border-radius:8px; }
.lightbox figcaption{ margin-top:14px; text-align:center; color:var(--night-mid); font-size:.9rem; }
.lightbox__close{
  position:absolute; top:22px; right:26px;
  font-size:2rem; color:var(--night-ink); line-height:1;
}
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:2.4rem; color:var(--night-ink);
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--night-line);
  display:grid; place-items:center;
  transition:background .3s;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.08); }
.lightbox__nav--prev{ left:22px; }
.lightbox__nav--next{ right:22px; }

/* ── ZMIERZCH ──────────────────────────────────────────────── */
.dusk{ padding:16vh 24px; text-align:center; }
.dusk__note{
  font-family:var(--serif); font-size:clamp(1.3rem, 2.6vw, 1.9rem);
  color:var(--ink-mid);
}
.dusk__note em{ font-style:italic; color:var(--blue); }

/* ════════════════════════════════════════════════════════════
   O TEJ GODZINIE — opinie na tarczy
   ════════════════════════════════════════════════════════════ */
.voices{ padding:6vh 0 14vh; }
.voices .section-head{ text-align:center; }
.voices .section-head__sub{ margin-inline:auto; }
.hours{
  position:relative;
  max-width:820px; margin:0 auto; padding:0 24px;
  min-height:300px;
}
.quote{
  position:absolute; inset-inline:24px; top:0;
  text-align:center;
  opacity:0; transform:translateY(16px);
  transition:opacity .8s ease, transform .8s var(--ease);
  pointer-events:none;
}
.quote.is-on{ opacity:1; transform:none; pointer-events:auto; }
.quote__time{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  font-family:var(--serif); font-size:clamp(3.6rem, 7vw, 5.5rem);
  color:var(--blue); opacity:.13;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.quote__text{
  position:relative;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.25rem, 2.6vw, 1.8rem);
  line-height:1.45;
  padding-top:3.6rem;
}
.quote__by{
  display:flex; flex-direction:column; gap:.3rem;
  margin-top:1.6rem; font-size:.86rem;
}
.quote__stars{ color:var(--gold); letter-spacing:.2em; }
.quote__by strong{ font-weight:700; }
.quote__date{ color:var(--ink-mid); font-variant-numeric:tabular-nums; }

.hours__ctrl{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1.4rem, 4vw, 2.6rem);
  margin-top:3rem;
}
.hours__arrow{
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  font-size:1rem;
  transition:background .3s, border-color .3s, color .3s;
}
.hours__arrow:hover{ background:var(--blue); border-color:var(--blue); color:var(--paper); }
.hours__dial{
  position:relative; width:78px; height:78px;
  border:1px solid var(--line); border-radius:50%;
}
.hours__hand{
  position:absolute; left:50%; bottom:50%;
  width:1.5px; height:28px;
  background:var(--blue);
  transform-origin:bottom center;
  transform:translateX(-50%) rotate(var(--ha, 0deg));
  transition:transform .8s var(--ease);
}
.hours__hand::after{
  content:''; position:absolute; left:50%; top:-3px;
  width:6px; height:6px; margin-left:-3px;
  border-radius:50%; background:var(--gold);
}
.hours__tick{
  position:absolute; left:50%; top:50%;
  width:6px; height:6px; margin:-3px;
  border-radius:50%;
  background:var(--blue-soft);
  transform:rotate(var(--a)) translateY(-32px);
  transition:background .3s, box-shadow .3s;
  cursor:pointer;
}
.hours__tick.is-on{
  background:var(--gold);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent);
}
.voices__google{
  display:flex; justify-content:center; gap:10px;
  margin-top:2.6rem; font-size:.82rem; color:var(--ink-mid);
}
.voices__google span:first-child{ font-weight:700; color:var(--ink); }

/* ════════════════════════════════════════════════════════════
   NOC — kontakt + stopka po zmroku
   ════════════════════════════════════════════════════════════ */
.night{
  position:relative;
  margin-top:8vh;
  background:linear-gradient(180deg,
    rgba(20,26,40,0) 0%, rgba(20,26,40,.8) 280px, var(--night) 560px, var(--night2) 100%);
  color:var(--night-ink);
}
.night .eyebrow{ color:var(--gold); }
.night .section-head__title em{ color:var(--gold); }
.night .section-head__sub{ color:var(--night-mid); }

.contact{ position:relative; z-index:2; padding:20vh 0 10vh; }
.contact__grid{
  display:grid; grid-template-columns:1.2fr .8fr;
  gap:clamp(2.5rem, 6vw, 6rem);
  max-width:1180px; margin:0 auto; padding:0 24px;
}
.contact__rows div{
  display:grid; grid-template-columns:110px 1fr; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--night-line);
}
.contact__rows dt{
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--night-mid); align-self:baseline; padding-top:3px;
}
.contact__rows dd{ font-size:1.02rem; }
.contact__rows a{ text-decoration:underline; text-underline-offset:3px; }
.contact__rows a:hover{ color:var(--gold); }
.contact__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.2rem; }
.night .btn--primary{ background:var(--gold); border-color:var(--gold); color:var(--night); }
.night .btn--primary::before{ background:#E8CA9C; }
.night .btn--ghost{ color:var(--night-ink); border-color:var(--night-line); }
.night .btn--ghost::before{ background:rgba(255,255,255,.08); }
.night .btn--ghost:hover{ border-color:var(--gold); }

.contact__hours-label{
  display:block; font-size:.7rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--night-mid); margin-bottom:1rem;
}
.contact__hours table{ width:100%; border-collapse:collapse; font-size:.94rem; }
.contact__hours td{ padding:11px 4px; border-bottom:1px solid var(--night-line); }
.contact__hours td:last-child{ text-align:right; font-variant-numeric:tabular-nums; color:var(--night-mid); }
.contact__hours tr.is-today td{ color:var(--gold); font-weight:600; }
.contact__hours tr.is-today td:last-child{ color:var(--gold); }
.contact__info[data-reveal], .contact__hours[data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s ease, transform .9s var(--ease);
}
.contact__info[data-reveal].is-in, .contact__hours[data-reveal].is-in{ opacity:1; transform:none; }

/* ── FOOTER ────────────────────────────────────────────────── */
.footer{ position:relative; z-index:2; padding:6vh 0 0; }
.footer__word{
  position:relative;
  text-align:center;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(5.5rem, 19vw, 17rem);
  line-height:.95;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,235,242,.3);
  user-select:none;
}
.footer__moon{
  position:absolute; right:18%; top:4%;
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 62% 38%, #FFF, #CBD4E6);
  box-shadow:0 0 26px 6px rgba(203,212,230,.35);
  animation:moon-float 7s ease-in-out infinite alternate;
}
@keyframes moon-float{ to{ transform:translateY(-12px); } }
.footer__main{
  display:grid; grid-template-columns:1.1fr 1.6fr;
  gap:clamp(2rem, 5vw, 5rem);
  max-width:1180px; margin:4rem auto 0; padding:0 24px;
}
.footer__logo{ font-family:var(--serif); font-size:1.3rem; }
.footer__logo em{ font-style:italic; color:var(--gold); }
.footer__brand p{ margin-top:.9rem; font-size:.9rem; color:var(--night-mid); max-width:320px; }
.footer__cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem; }
.footer__col-label{
  display:block; font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--night-mid); margin-bottom:.9rem;
}
.footer__cols ul{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.footer__cols a{ font-size:.92rem; transition:color .3s; }
.footer__cols a:hover{ color:var(--gold); }
.footer__brand[data-reveal], .footer__cols > div[data-reveal]{
  opacity:0; transition:opacity .9s ease;
}
.footer__brand[data-reveal].is-in, .footer__cols > div[data-reveal].is-in{ opacity:1; }
.footer__bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  max-width:1180px; margin:4rem auto 0; padding:22px 24px;
  border-top:1px solid var(--night-line);
  font-size:.78rem; color:var(--night-mid);
}
.footer__bottom a{ text-decoration:underline; text-underline-offset:3px; }
.footer__bottom a:hover{ color:var(--gold); }

/* ── FLOAT CTA ─────────────────────────────────────────────── */
.float-cta{
  position:fixed; right:24px; bottom:24px; z-index:100;
  display:flex; align-items:center; gap:.6em;
  padding:.95em 1.5em;
  background:var(--night); color:var(--night-ink);
  border:1px solid rgba(232,235,242,.2);
  border-radius:99px;
  font-weight:600; font-size:.88rem;
  box-shadow:0 18px 44px -14px rgba(15,20,32,.5);
  transform:translateY(160%);
  transition:transform .6s var(--ease), background .3s;
}
.float-cta.is-on{ transform:none; }
.float-cta:hover{ background:var(--blue-hover); }
.float-cta i{ font-style:normal; color:var(--gold); }

/* ════════════════════════════════════════════════════════════
   BOOKING — wschód nad horyzontem (circular reveal)
   ════════════════════════════════════════════════════════════ */
.drawer{
  position:fixed; inset:0; z-index:140;
  visibility:hidden;
  transition:visibility 0s .85s;
}
.drawer.is-open{ visibility:visible; transition:visibility 0s; }
.drawer__backdrop{ position:absolute; inset:0; }
.drawer__panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(94,115,150,.45) 0%, rgba(94,115,150,0) 55%),
    linear-gradient(195deg, #202A3E 0%, var(--night) 55%, var(--night2) 100%);
  color:var(--night-ink);
  clip-path:circle(0% at 86% 88%);
  transition:clip-path .85s var(--ease);
}
.drawer.is-open .drawer__panel{ clip-path:circle(142% at 86% 88%); }

.drawer__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:30px clamp(22px, 5vw, 54px) 6px;
}
.drawer__eyebrow{
  display:block; font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
}
.drawer__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem, 3vw, 2.2rem); margin-top:.4rem;
}
.drawer__title em{ font-style:italic; color:var(--gold); }
.drawer__close{
  position:relative; width:46px; height:46px; flex:0 0 auto;
  border:1px solid var(--night-line); border-radius:50%;
  transition:background .3s, transform .4s var(--ease);
}
.drawer__close span{
  position:absolute; left:50%; top:50%;
  width:17px; height:1.5px; margin:-0.75px 0 0 -8.5px;
  background:var(--night-ink);
}
.drawer__close span:first-child{ transform:rotate(45deg); }
.drawer__close span:last-child{ transform:rotate(-45deg); }
.drawer__close:hover{ background:rgba(255,255,255,.08); transform:rotate(90deg); }

/* stepper = łuk słońca (pipsy siedzą na krzywej) */
.drawer__arc{
  position:relative;
  max-width:620px; width:100%;
  margin:0 auto; padding:0 20px;
  height:118px; flex:0 0 auto;
  color:var(--night-line);
}
.drawer__arc svg{ position:absolute; inset:0 20px; width:calc(100% - 40px); height:100%; }
.drawer__steps span{
  position:absolute;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:.64rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--night-mid);
  transform:translate(-50%,-50%);
  transition:color .4s;
}
.drawer__steps span i{
  width:11px; height:11px; border-radius:50%;
  border:1.5px solid var(--night-mid);
  background:transparent;
  transition:background .4s, border-color .4s, box-shadow .4s;
}
.drawer__steps span[data-step-pip="1"]{ left:13%;  top:64%; }
.drawer__steps span[data-step-pip="2"]{ left:37.5%; top:26%; }
.drawer__steps span[data-step-pip="3"]{ left:62.5%; top:26%; }
.drawer__steps span[data-step-pip="4"]{ left:87%;  top:64%; }
.drawer__steps span.is-active{ color:var(--gold); }
.drawer__steps span.is-active i{
  background:radial-gradient(circle at 36% 32%, #FBEBD3, var(--gold));
  border-color:var(--gold);
  box-shadow:0 0 16px 4px color-mix(in srgb, var(--gold) 45%, transparent);
}
.drawer__steps span.is-done i{ background:var(--night-mid); border-color:var(--night-mid); }

.drawer__body{
  flex:1; overflow-y:auto;
  padding:10px clamp(22px, 5vw, 54px) 30px;
}
.step{ display:none; max-width:620px; margin:0 auto; }
.step.is-active{ display:block; animation:step-in .5s var(--ease); }
@keyframes step-in{ from{ opacity:0; transform:translateY(14px); } }
.step__sub{ color:var(--night-mid); margin-bottom:1.4rem; font-size:.95rem; }

.opt-list{ display:flex; flex-direction:column; gap:10px; }
.opt{
  display:flex; align-items:center; gap:16px;
  width:100%; text-align:left;
  padding:15px 18px;
  border:1px solid var(--night-line); border-radius:12px;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.opt:hover{ background:rgba(255,255,255,.05); transform:translateX(4px); }
.opt.is-picked{
  border-color:var(--gold);
  background:color-mix(in srgb, var(--gold) 12%, transparent);
}
.opt__hour{
  flex:0 0 62px;
  font-size:.72rem; font-weight:700; letter-spacing:.1em;
  color:var(--gold); font-variant-numeric:tabular-nums;
  text-transform:uppercase;
}
.opt__body{ flex:1; display:flex; flex-direction:column; gap:2px; }
.opt__title{ font-weight:600; font-size:.98rem; }
.opt__meta{ font-size:.8rem; color:var(--night-mid); }
.opt__arrow{ color:var(--night-mid); transition:transform .3s var(--ease), color .3s; }
.opt:hover .opt__arrow{ transform:translateX(4px); color:var(--gold); }

/* datebar + sloty */
.datebar{
  display:flex; gap:8px; overflow-x:auto;
  padding-bottom:12px; margin-bottom:18px;
  scrollbar-width:thin;
}
.datebar__d{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:64px; padding:10px 8px;
  border:1px solid var(--night-line); border-radius:12px;
  transition:background .3s, border-color .3s;
}
.datebar__d:hover{ background:rgba(255,255,255,.05); }
.datebar__d.is-picked{
  border-color:var(--gold);
  background:color-mix(in srgb, var(--gold) 14%, transparent);
}
.datebar__dow{ font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--night-mid); }
.datebar__day{ font-family:var(--serif); font-size:1.3rem; }
.datebar__mon{ font-size:.66rem; color:var(--night-mid); }
.slots__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; }
.slot{
  padding:10px 6px; text-align:center;
  border:1px solid var(--night-line); border-radius:99px;
  font-size:.88rem; font-variant-numeric:tabular-nums;
  transition:background .25s, border-color .25s, color .25s;
}
.slot:hover{ background:rgba(255,255,255,.06); }
.slot.is-picked{ background:var(--gold); border-color:var(--gold); color:var(--night); font-weight:700; }
.slot.is-taken{ opacity:.32; text-decoration:line-through; cursor:not-allowed; }
.slots__hint,.slots__empty{ color:var(--night-mid); font-size:.9rem; padding:6px 2px; }

/* formularz */
.form{ display:flex; flex-direction:column; gap:16px; }
.form label{ display:flex; flex-direction:column; gap:6px; }
.form label > span{
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--night-mid);
}
.form input{
  background:transparent; border:0; border-bottom:1px solid var(--night-line);
  padding:9px 2px; font:inherit; color:var(--night-ink);
  border-radius:0;
  transition:border-color .3s;
}
.form input:focus{ outline:none; border-color:var(--gold); }
.form input::placeholder{ color:rgba(154,164,187,.5); }
.form__summary{
  border:1px dashed var(--night-line); border-radius:12px;
  padding:14px 16px;
  display:flex; flex-direction:column; gap:4px;
  font-size:.88rem; color:var(--night-mid);
}
.form__summary strong{ color:var(--night-ink); }
.form__error{ color:#E89A9A; font-size:.88rem; }
.form__legal{ font-size:.74rem; color:var(--night-mid); }
.form__legal a{ text-decoration:underline; }

/* weryfikacja + sukces */
.verify__title{ font-family:var(--serif); font-weight:400; font-size:1.5rem; }
.verify__intro{ color:var(--night-mid); margin:.6rem 0 1.4rem; font-size:.92rem; }
.verify__inputs{ display:flex; gap:12px; margin-bottom:1.4rem; }
.verify__inputs input{
  width:58px; height:66px; text-align:center;
  font-size:1.6rem; font-variant-numeric:tabular-nums;
  background:transparent; color:var(--night-ink);
  border:1px solid var(--night-line); border-radius:12px;
  transition:border-color .3s;
}
.verify__inputs input:focus{ outline:none; border-color:var(--gold); }
.success{ text-align:center; padding:2.5rem 0; }
.success__mark{
  display:grid; place-items:center;
  width:64px; height:64px; margin:0 auto 1.4rem;
  border-radius:50%;
  background:radial-gradient(circle at 36% 32%, #FBEBD3, var(--gold));
  color:var(--night); font-size:1.5rem; font-weight:700;
  box-shadow:0 0 34px 8px color-mix(in srgb, var(--gold) 40%, transparent);
}
.success h3{ font-family:var(--serif); font-weight:400; font-size:1.7rem; }
.success h3 em{ font-style:italic; color:var(--gold); }
.success p{ color:var(--night-mid); margin:.9rem auto 1.8rem; max-width:380px; font-size:.94rem; }

.drawer__foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px clamp(22px, 5vw, 54px) 22px;
  border-top:1px solid var(--night-line);
}
.drawer__back{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--night-mid);
  transition:color .3s;
}
.drawer__back:hover{ color:var(--night-ink); }
.drawer__foot .btn--primary{ background:var(--gold); border-color:var(--gold); color:var(--night); }
.drawer__foot .btn--primary::before{ background:#E8CA9C; }
.drawer__foot .btn--primary:disabled{ opacity:.35; cursor:not-allowed; }
.drawer__foot .btn--primary:disabled::before{ display:none; }

/* ════════════════════════════════════════════════════════════
   RESPONSYWNOŚĆ
   ════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .poras{ grid-template-columns:repeat(2, 1fr); }
  .pcard{ --off:0px !important; }
  .hero__dial{ right:-34vw; opacity:.35; }
}
@media (max-width:860px){
  .nav__meta{ display:none; }
  .menu{ clip-path:circle(0px at calc(100% - 46px) 40px); }
  .menu.is-open{ clip-path:circle(160% at calc(100% - 46px) 40px); }
  .menu__inner{ grid-template-columns:1fr; gap:3rem; align-content:start; padding-top:120px; overflow-y:auto; }
  .plan{ grid-template-columns:1fr; }
  .plan__now{ display:none; }
  .plan__list{ padding-left:34px; }
  .plan__line{ left:8px; }
  .tl__dot{ left:-31px; }
  .tl__head{ grid-template-columns:54px 1fr 30px; }
  .tl__meta{ grid-column:2; grid-row:2; }
  .tl__sign{ grid-column:3; grid-row:1; }
  .tl__desc, .tl__body-in .btn{ margin-left:0; padding-left:0; }
  .tl__desc{ padding:2px 0 18px; }
  .tl__body-in .btn{ margin-bottom:26px; }
  .strips{
    height:auto;
    overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:14px;
  }
  .gphoto{ flex:0 0 70vw; height:54vh; scroll-snap-align:center; }
  .gphoto:hover{ flex:0 0 70vw; }
  .gphoto__cap{ opacity:1; transform:none; }
  .contact__grid{ grid-template-columns:1fr; }
  .footer__main{ grid-template-columns:1fr; }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:12px; }
  .hero__est{ display:none; }
  .drawer__arc{ height:96px; }
  .drawer__steps span{ font-size:.56rem; }
  .hud{ left:16px; bottom:16px; }
}
@media (max-width:560px){
  .poras{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .hero{ padding:110px 24px 150px; }
  .hero__actions .btn{ width:100%; justify-content:center; }
  .verify__inputs input{ width:52px; height:60px; }
  .nav__cta{ display:none; }
  .hud__meta{ display:none; }
}

/* ── REDUCED MOTION ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .hero__line i{ transform:none; }
  [data-fade],[data-lines]{ opacity:1; transform:none; }
  .loader{ display:none; }
  .marq__track{ animation:none; }
}