/* ==========================================================================
   24on.pl — arkusz stylów
   Przewozy busem Polska – Niemcy
   ========================================================================== */

:root{
  color-scheme: light;

  /* Kolory bazowe */
  --ink:        #0A0C22;
  --ink-2:      #12162F;
  --ink-3:      #1D2342;
  --ink-deep:   #06071A;
  --bg:         #F5F6FA;
  --bg-2:       #FFFFFF;
  --card:       #FFFFFF;

  --gold:       #F0C048;
  --gold-2:     #FFD470;
  --gold-soft:  #FBF0D4;
  --gold-line:  #EBD9A8;

  --orange:     #F03800;
  --orange-btn: #D93400;
  --orange-dark:#B32B00;
  --orange-soft:#FFEDE6;

  --lav:        #F0E9F9;
  --sky:        #DCEFF8;
  --mint:       #E0F2E8;

  --text:       #0F1226;
  --muted:      #565C73;
  --muted-2:    #7A8095;
  --line:       #E3E6EE;
  --line-2:     #EDEFF5;

  --on-ink:     #FFFFFF;
  --on-ink-mut: #A9AFC6;
  --ink-line:   rgba(255,255,255,.12);

  /* Skala odstępów (4/8) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px;
  --s-9: 72px; --s-10: 96px; --s-11: 128px;

  /* Promienie */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 30px; --r-2xl: 40px; --r-pill: 999px;

  /* Cienie */
  --sh-1: 0 1px 2px rgba(14,18,38,.05);
  --sh-2: 0 4px 16px -4px rgba(14,18,38,.09), 0 1px 3px rgba(14,18,38,.05);
  --sh-3: 0 18px 44px -18px rgba(14,18,38,.22), 0 2px 8px rgba(14,18,38,.05);
  --sh-4: 0 34px 80px -32px rgba(10,12,34,.42);

  /* Ruch */
  --e-out: cubic-bezier(.22,.61,.36,1);
  --e-spring: cubic-bezier(.34,1.4,.5,1);
  --t-fast: 140ms var(--e-out);
  --t: 240ms var(--e-out);
  --t-slow: 420ms var(--e-out);

  --container: 1220px;
  --z-nav: 100;
  --z-menu: 120;
  --z-bar: 90;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  font-feature-settings:"kern","liga","cv05";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-family:"Plus Jakarta Sans","Inter",sans-serif; font-weight:800; letter-spacing:-.022em; line-height:1.1; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:700; color:var(--text); }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--gold); color:var(--ink); }

.skip-link{
  position:absolute; left:16px; top:-70px; z-index:1000;
  background:var(--ink); color:#fff; padding:12px 20px;
  border-radius:var(--r-sm); font-weight:600; transition:top var(--t);
}
.skip-link:focus{ top:16px; }

/* ----------------------------------------------------------- typografia -- */
.h-xxl{ font-size:clamp(2.35rem,6.2vw,4.35rem); line-height:1.03; letter-spacing:-.032em; }
.h-xl { font-size:clamp(2rem,4.4vw,3.15rem); line-height:1.08; letter-spacing:-.028em; }
.h-lg { font-size:clamp(1.6rem,3vw,2.35rem); line-height:1.15; letter-spacing:-.024em; }
.h-md { font-size:clamp(1.28rem,2vw,1.6rem); line-height:1.25; }
.h-sm { font-size:1.11rem; line-height:1.35; letter-spacing:-.012em; }

.lead{ font-size:clamp(1.04rem,1.5vw,1.18rem); line-height:1.68; color:var(--muted); }
.small{ font-size:.9rem; }
.tiny{ font-size:.8rem; letter-spacing:.01em; }
.accent{ color:var(--gold); }
.accent-o{ color:var(--orange); }
.muted{ color:var(--muted); }
.tabnum{ font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------- layout -- */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:22px; }
@media (min-width:768px){ .wrap{ padding-inline:34px; } }
@media (min-width:1280px){ .wrap{ padding-inline:24px; } }

.section{ padding-block:clamp(56px,8vw,104px); }
.section--tight{ padding-block:clamp(40px,5vw,64px); }
.section--white{ background:var(--bg-2); }
.section--ink{ background:var(--ink); color:var(--on-ink); }

.grid{ display:grid; gap:var(--s-5); }
@media (min-width:700px){
  .g-2{ grid-template-columns:repeat(2,1fr); }
  .g-3{ grid-template-columns:repeat(2,1fr); }
  .g-4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1000px){
  .g-3{ grid-template-columns:repeat(3,1fr); }
  .g-4{ grid-template-columns:repeat(4,1fr); }
}

.stack > * + *{ margin-top:var(--s-4); }
.center{ text-align:center; }
.measure{ max-width:68ch; }
.measure-sm{ max-width:56ch; }

/* --------------------------------------------------------------- eyebrow -- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gold); color:var(--ink);
  font-size:.715rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  padding:7px 14px 6px; border-radius:var(--r-xs);
  margin-bottom:var(--s-4);
}
.eyebrow--ghost{ background:var(--gold-soft); border:1px solid var(--gold-line); }
.eyebrow--ink{ background:rgba(240,192,72,.15); color:var(--gold); }

.sec-head{ max-width:760px; margin-bottom:var(--s-8); }
.sec-head.center{ margin-inline:auto; }
.sec-head p{ margin-top:var(--s-4); }

/* -------------------------------------------------------------- przyciski -- */
.btn{
  --btn-bg:var(--orange-btn); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 26px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd); border-radius:var(--r-pill);
  font-weight:700; font-size:.98rem; letter-spacing:-.005em;
  cursor:pointer; text-align:center;
  transition:transform var(--t-fast), box-shadow var(--t), background-color var(--t), color var(--t), border-color var(--t);
  box-shadow:0 8px 20px -8px rgba(217,52,0,.55);
  touch-action:manipulation; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(217,52,0,.62); background:var(--orange-dark); }
.btn:active{ transform:translateY(0) scale(.985); }

.btn--ink{ --btn-bg:var(--ink); box-shadow:0 8px 20px -10px rgba(10,12,34,.5); }
.btn--ink:hover{ background:var(--ink-3); box-shadow:0 14px 30px -12px rgba(10,12,34,.55); }

.btn--gold{ --btn-bg:var(--gold); --btn-fg:var(--ink); box-shadow:0 8px 20px -10px rgba(240,192,72,.7); }
.btn--gold:hover{ background:var(--gold-2); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--line); box-shadow:none; }
.btn--ghost:hover{ background:var(--bg-2); border-color:var(--ink); box-shadow:var(--sh-2); }

.btn--ghost-ink{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.26); box-shadow:none; }
.btn--ghost-ink:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.55); }

.btn--sm{ min-height:44px; padding:10px 20px; font-size:.9rem; }
.btn--wide{ width:100%; }
.btn .ic{ width:19px; height:19px; flex:0 0 auto; }

.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center; }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; color:var(--orange); font-size:.96rem;
  transition:gap var(--t), color var(--t);
}
.link-arrow:hover{ gap:13px; color:var(--orange-dark); }
.link-arrow .ic{ width:17px; height:17px; }

/* ------------------------------------------------------------------ topbar -- */
.topbar{
  background:var(--ink-deep); color:var(--on-ink-mut);
  font-size:.82rem; border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:42px; }
.topbar__list{ display:flex; align-items:center; gap:22px; min-width:0; }
@media (max-width:899px){ .topbar__list{ gap:14px; } .topbar__in{ min-height:38px; } }
.topbar__list li{ display:flex; align-items:center; gap:7px; }
.topbar__list .ic{ width:15px; height:15px; color:var(--gold); }
.topbar a{ transition:color var(--t); }
.topbar a:hover{ color:#fff; }
.topbar__list li.topbar__hide{ display:none; }
@media (min-width:900px){ .topbar__list li.topbar__hide{ display:flex; } }

/* --------------------------------------------------------------- nawigacja -- */
.nav-shell{ position:sticky; top:0; z-index:var(--z-nav); padding-top:14px; transition:padding var(--t); }
.nav-shell.is-stuck{ padding-top:8px; }
.nav-shell::before{
  content:""; position:absolute; inset:-14px 0 auto 0; height:96px;
  background:linear-gradient(180deg,var(--bg) 40%,rgba(245,246,250,0));
  opacity:0; transition:opacity var(--t); pointer-events:none;
}
.nav-shell.is-stuck::before{ opacity:1; }

.nav{
  display:flex; align-items:center; gap:var(--s-4);
  background:var(--ink); color:#fff;
  border-radius:var(--r-lg); padding:11px 11px 11px 20px;
  box-shadow:var(--sh-3);
  transition:box-shadow var(--t), background var(--t);
}
.nav-shell.is-stuck .nav{ box-shadow:0 16px 40px -18px rgba(10,12,34,.55); }

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; flex:0 0 auto; }
.brand__mark{ width:38px; height:38px; flex:0 0 auto; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:1.16rem; letter-spacing:-.03em; }
.brand__name span{ color:var(--gold); }
.brand__sub{ font-size:.63rem; letter-spacing:.19em; text-transform:uppercase; color:var(--on-ink-mut); margin-top:4px; }

.nav__menu{ display:none; align-items:center; gap:2px; }
@media (min-width:1080px){ .nav__menu{ display:flex; } }
.nav__link{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:10px 13px; border-radius:var(--r-xs);
  font-size:.92rem; font-weight:600; color:#D7DAE6;
  transition:color var(--t), background var(--t);
}
.nav__link:hover{ color:#fff; background:rgba(255,255,255,.07); }
.nav__link[aria-current="page"]{ color:#fff; }
.nav__link[aria-current="page"]::after{
  content:""; position:absolute; left:13px; right:13px; bottom:4px; height:2px;
  background:var(--gold); border-radius:2px;
}
.nav__link .ic-chev{ width:13px; height:13px; opacity:.6; transition:transform var(--t); }

.nav__item{ position:relative; }
.nav__item:hover .ic-chev,.nav__item:focus-within .ic-chev{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:-6px; min-width:290px;
  background:#fff; color:var(--text); border-radius:var(--r-md);
  border:1px solid var(--line); box-shadow:var(--sh-3);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--t), transform var(--t), visibility var(--t);
}
.nav__item:hover .dropdown,.nav__item:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:var(--r-xs); font-size:.9rem; font-weight:600;
  transition:background var(--t), color var(--t);
}
.dropdown a:hover{ background:var(--bg); color:var(--orange); }
.dropdown a .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:0 0 auto; }

.nav__cta{ display:none; }
@media (min-width:640px){ .nav__cta{ display:inline-flex; } }

.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; flex:0 0 auto;
  background:rgba(255,255,255,.09); border:1px solid var(--ink-line);
  border-radius:var(--r-sm); cursor:pointer; transition:background var(--t);
}
.burger:hover{ background:rgba(255,255,255,.16); }
@media (min-width:1080px){ .burger{ display:none; } }
.burger .ic{ width:22px; height:22px; }

/* menu mobilne */
.mobile{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:var(--ink); color:#fff;
  display:flex; flex-direction:column;
  transform:translateX(100%); visibility:hidden;
  transition:transform 320ms var(--e-out), visibility 320ms step-end;
  overflow-y:auto; overscroll-behavior:contain;
}
.mobile.is-open{ transform:translateX(0); visibility:visible; transition:transform 320ms var(--e-out); }
.mobile__top{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--ink-line); }
.mobile__body{ padding:22px; flex:1; }
.mobile__group + .mobile__group{ margin-top:26px; }
.mobile__label{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:800; margin-bottom:10px; }
.mobile__body a{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:600; font-size:1.02rem;
}
.mobile__body a .ic{ width:17px; height:17px; opacity:.4; }
.mobile__foot{ padding:22px; border-top:1px solid var(--ink-line); display:grid; gap:10px; }

/* --------------------------------------------------------------------- hero -- */
.hero{ padding-top:18px; padding-bottom:clamp(40px,6vw,72px); }
.hero__panel{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  border-radius:var(--r-2xl);
  padding:clamp(38px,5.5vw,76px) clamp(24px,4.5vw,68px) clamp(38px,5vw,64px);
  box-shadow:var(--sh-4);
  isolation:isolate;
}
.hero__panel::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:
    radial-gradient(720px 420px at 84% 4%, rgba(240,56,0,.30), transparent 62%),
    radial-gradient(640px 460px at 8% 96%, rgba(240,192,72,.16), transparent 64%),
    linear-gradient(155deg,#141936 0%,#0A0C22 52%,#080A1E 100%);
}
.hero__panel::after{
  content:""; position:absolute; z-index:-1; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);
}
.hero__grid{ display:grid; gap:clamp(32px,4vw,52px); align-items:center; }
@media (min-width:1000px){ .hero__grid{ grid-template-columns:1.06fr .94fr; } }

.hero h1{ margin-bottom:var(--s-5); }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero__lead{ color:#C6CBDD; font-size:clamp(1.02rem,1.4vw,1.14rem); max-width:54ch; line-height:1.66; }
.hero .btn-row{ margin-top:var(--s-6); }

.hero__proof{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5);
  margin-top:var(--s-7); padding-top:var(--s-5);
  border-top:1px solid var(--ink-line);
}
.proof-item{ display:flex; align-items:center; gap:11px; }
.proof-item__k{ font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-.03em; line-height:1; }
.proof-item__v{ display:block; font-size:.79rem; color:var(--on-ink-mut); line-height:1.35; max-width:15ch; }
.stars{ display:inline-flex; gap:2px; }
.stars .ic{ width:15px; height:15px; color:var(--gold); }

/* wizualizacja trasy */
.hero__art{ position:relative; }
.route-card{
  background:rgba(255,255,255,.055);
  border:1px solid var(--ink-line);
  border-radius:var(--r-xl);
  padding:22px;
  backdrop-filter:blur(8px);
}
.route-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.route-card__title{ font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--on-ink-mut); font-weight:800; }
.badge-live{
  display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:700;
  background:rgba(240,192,72,.14); color:var(--gold); padding:5px 11px; border-radius:var(--r-pill);
}
.badge-live i{ width:6px; height:6px; border-radius:50%; background:var(--gold); display:block; }

.route-line{ position:relative; padding-left:30px; }
.route-line::before{
  content:""; position:absolute; left:9px; top:12px; bottom:12px; width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(240,56,0,.9));
  border-radius:2px;
}
.route-stop{ position:relative; padding:11px 0; }
.route-stop::before{
  content:""; position:absolute; left:-26px; top:19px;
  width:12px; height:12px; border-radius:50%;
  background:var(--ink); border:2.5px solid var(--gold);
}
.route-stop:last-child::before{ border-color:var(--orange); background:var(--orange); }
.route-stop__city{ display:block; font-weight:700; font-size:1rem; }
.route-stop__meta{ display:block; margin-top:2px; font-size:.79rem; line-height:1.45; color:var(--on-ink-mut); }

.route-card__foot{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--ink-line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
}
.route-card__foot .link-arrow{ white-space:nowrap; }
.route-price{ font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:1.42rem; letter-spacing:-.03em; }
.route-price span{ font-size:.78rem; font-weight:600; color:var(--on-ink-mut); letter-spacing:0; }

.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.07); border:1px solid var(--ink-line);
  color:#DDE1EE; padding:7px 13px; border-radius:var(--r-pill);
  font-size:.79rem; font-weight:600;
}
.chip .ic{ width:14px; height:14px; color:var(--gold); }

/* pasek zaufania */
.trust-strip{ background:var(--bg-2); border-block:1px solid var(--line); }
.trust-strip__in{ display:grid; gap:var(--s-5); padding-block:var(--s-6); grid-template-columns:1fr; }
@media (min-width:560px){ .trust-strip__in{ grid-template-columns:repeat(2,1fr); gap:var(--s-4); } }
@media (min-width:900px){ .trust-strip__in{ grid-template-columns:repeat(4,1fr); gap:var(--s-5); } }
.trust-item{ display:flex; gap:13px; align-items:flex-start; }
.trust-item__ic{
  width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:var(--r-sm);
}
.trust-item__ic .ic{ width:21px; height:21px; color:var(--ink); }
.trust-item h2,.trust-item h3{ font-size:.98rem; font-weight:800; margin-bottom:3px; letter-spacing:-.012em; }
.trust-item p{ font-size:.85rem; color:var(--muted); line-height:1.5; overflow-wrap:break-word; hyphens:auto; }

/* ---------------------------------------------------------------- karty -- */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-5);
  box-shadow:var(--sh-1);
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.card--pad{ padding:clamp(24px,3vw,36px); }
.card--hover:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); border-color:#D3D8E6; }
.card--ink{ background:var(--ink); color:#fff; border-color:transparent; }
.card--ink p{ color:var(--on-ink-mut); }
.card--lav{ background:var(--lav); border-color:#E4D8F3; }
.card--sky{ background:var(--sky); border-color:#C6E4F2; }
.card--mint{ background:var(--mint); border-color:#C6E6D5; }
.card--gold{ background:var(--gold-soft); border-color:var(--gold-line); }

.card__ic{
  width:50px; height:50px; display:grid; place-items:center;
  background:var(--ink); color:var(--gold); border-radius:var(--r-sm);
  margin-bottom:var(--s-4);
}
.card__ic .ic{ width:24px; height:24px; }
.card--ink .card__ic{ background:rgba(240,192,72,.14); }
.card h3{ font-size:1.11rem; margin-bottom:9px; }
.card p{ font-size:.93rem; color:var(--muted); line-height:1.6; overflow-wrap:break-word; }
.card--ink h3{ color:#fff; }

.card__link{ margin-top:var(--s-4); display:inline-flex; }

/* bento */
.bento{ display:grid; gap:var(--s-4); }
@media (min-width:760px){ .bento{ grid-template-columns:repeat(4,1fr); } }
.bento > *{ min-height:150px; }
.b-2{ grid-column:span 2; }
.b-3{ grid-column:span 3; }
.b-4{ grid-column:span 4; }
@media (max-width:759px){ .b-2,.b-3,.b-4{ grid-column:auto; } }

.stat{ display:flex; flex-direction:column; justify-content:center; }
.stat__k{
  font-family:"Plus Jakarta Sans",sans-serif; font-weight:800;
  font-size:clamp(2.1rem,4vw,3rem); letter-spacing:-.04em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat__v{ font-size:.88rem; color:var(--muted); margin-top:9px; line-height:1.45; }
.card--ink .stat__v{ color:var(--on-ink-mut); }
.card--ink .stat__k{ color:var(--gold); }

.bento__img{ position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid var(--line); }
.bento__img img{ width:100%; height:100%; object-fit:cover; min-height:200px; }

/* ------------------------------------------------------- lista z ptaszkami -- */
.checks{ display:grid; gap:13px; }
.checks li{ display:flex; gap:12px; align-items:flex-start; font-size:.97rem; line-height:1.55; }
.checks .ic{ width:21px; height:21px; flex:0 0 auto; color:var(--orange); margin-top:2px; }
.checks--gold .ic{ color:var(--gold); }
.checks--ink .ic{ color:var(--gold); }
.checks--ink li{ color:#D5D9E6; }

.arrows li{ display:flex; gap:12px; align-items:flex-start; font-size:.97rem; line-height:1.55; padding:11px 0; border-bottom:1px dashed var(--line); }
.arrows li:last-child{ border-bottom:0; }
.arrows .ic{ width:19px; height:19px; flex:0 0 auto; color:var(--gold); margin-top:3px; }

/* ------------------------------------------------------------------ kroki -- */
.steps{ display:grid; gap:var(--s-4); counter-reset:step; }
@media (min-width:860px){ .steps{ grid-template-columns:repeat(4,1fr); gap:var(--s-5); } }
.step{ position:relative; padding-top:var(--s-5); }
.step::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:.85rem;
  color:var(--ink); background:var(--gold);
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:16px;
}
@media (min-width:860px){
  .step::after{
    content:""; position:absolute; top:calc(var(--s-5) + 19px); left:46px; right:-16px;
    height:1.5px; background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 13px);
  }
  .step:last-child::after{ display:none; }
}
.step h3{ font-size:1.05rem; margin-bottom:8px; }
.step p{ font-size:.9rem; color:var(--muted); line-height:1.58; }

/* -------------------------------------------------------------- kierunki -- */
.dirs{ display:grid; gap:12px; }
@media (min-width:620px){ .dirs{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .dirs{ grid-template-columns:repeat(3,1fr); } }
.dir{
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:15px 17px; transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.dir:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#CDD3E3; }
.dir__pin{
  width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--ink); color:var(--gold); border-radius:10px;
}
.dir__pin .ic{ width:18px; height:18px; }
.dir__txt strong{ display:block; font-size:.98rem; font-weight:700; }
.dir__txt span{ display:block; font-size:.81rem; color:var(--muted-2); margin-top:1px; }
.dir__go{ margin-left:auto; color:var(--muted-2); }
.dir__go .ic{ width:17px; height:17px; }
.dir:hover .dir__go{ color:var(--orange); }

/* ---------------------------------------------------------------- tabela -- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card); -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; min-width:560px; font-size:.93rem; }
thead th{
  background:var(--ink); color:#fff; text-align:left;
  padding:15px 18px; font-weight:700; font-size:.79rem;
  letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
tbody td{ padding:14px 18px; border-bottom:1px solid var(--line-2); vertical-align:top; }
tbody tr:last-child td{ border-bottom:0; }
tbody tr{ transition:background var(--t-fast); }
tbody tr:hover{ background:#FAFBFD; }
td strong{ font-weight:700; }
.td-price{ font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink); }
.table-note{ font-size:.83rem; color:var(--muted-2); margin-top:12px; }

/* -------------------------------------------------------------- akordeon -- */
.faq{ display:grid; gap:11px; }
.faq details{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
  transition:border-color var(--t), box-shadow var(--t);
}
.faq details[open]{ border-color:#D0D6E5; box-shadow:var(--sh-2); }
.faq summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:19px 22px; cursor:pointer; list-style:none;
  font-weight:700; font-size:1.01rem; line-height:1.45;
  transition:color var(--t-fast);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--orange); }
.faq summary .ic{
  width:22px; height:22px; flex:0 0 auto; color:var(--orange); margin-top:1px;
  transition:transform var(--t);
}
.faq details[open] summary .ic{ transform:rotate(45deg); }
.faq__body{ padding:0 22px 21px; color:var(--muted); font-size:.95rem; line-height:1.68; }
.faq__body p + p{ margin-top:.85em; }

/* ------------------------------------------------------------ CTA sklepu -- */
.shop{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  border-radius:var(--r-2xl); padding:clamp(30px,4.5vw,58px);
  box-shadow:var(--sh-4);
}
.shop::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(620px 340px at 88% 10%,rgba(240,56,0,.34),transparent 60%),
             radial-gradient(520px 320px at 4% 92%,rgba(240,192,72,.14),transparent 62%);
}
.shop > *{ position:relative; }
.shop__grid{ display:grid; gap:var(--s-6); align-items:center; }
@media (min-width:900px){ .shop__grid{ grid-template-columns:1.25fr .75fr; gap:var(--s-8); } }
.shop h2{ margin-bottom:var(--s-4); }
.shop p{ color:#C6CBDD; }
.shop__logo{
  background:#fff; border-radius:var(--r-lg); padding:22px;
  display:grid; place-items:center; box-shadow:var(--sh-3);
}
.shop__logo img{ max-width:190px; }
.shop__side{ display:grid; gap:14px; }
.shop__note{ font-size:.8rem; color:var(--on-ink-mut); text-align:center; }

.promo-band{ display:block; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--ink-line); }
.promo-band img{ width:100%; }

/* ------------------------------------------------------------- referencje -- */
.quote{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-4);
  box-shadow:var(--sh-1);
}
.quote blockquote{ margin:0; font-size:.97rem; line-height:1.65; color:var(--text); }
.quote__who{ display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:var(--s-4); border-top:1px solid var(--line-2); }
.avatar{
  width:44px; height:44px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--ink); color:var(--gold);
  font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:.95rem;
}
.quote__who strong{ display:block; font-size:.92rem; }
.contact-line__ic .ic{ color:var(--ink); }
.quote__who span{ display:block; font-size:.8rem; color:var(--muted-2); }

/* ------------------------------------------------------------------ proza -- */
.prose-grid{ display:grid; gap:clamp(22px,3vw,56px); }
@media (min-width:980px){
  .prose-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }
  .prose-grid .sec-head{ margin-bottom:0; }
}
.split-grid{ display:grid; gap:clamp(28px,4vw,60px); align-items:start; }
@media (min-width:980px){ .split-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

.prose h2{ font-size:clamp(1.5rem,2.6vw,2.05rem); margin:0 0 var(--s-4); letter-spacing:-.026em; }
.prose h3{ font-size:clamp(1.16rem,1.7vw,1.34rem); margin:var(--s-6) 0 var(--s-3); letter-spacing:-.018em; }
.prose p{ color:var(--muted); }
.prose > * + h2{ margin-top:var(--s-7); }
.prose a:not(.btn):not(.link-arrow){
  color:var(--orange); font-weight:600;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px;
  text-decoration-color:rgba(240,56,0,.35);
  transition:text-decoration-color var(--t);
}
.prose a:not(.btn):not(.link-arrow):hover{ text-decoration-color:var(--orange); }
.prose ul:not(.checks):not(.arrows){ margin:0 0 1.05em; display:grid; gap:9px; }
.prose ul:not(.checks):not(.arrows) li{
  position:relative; padding-left:22px; color:var(--muted); font-size:.97rem; line-height:1.6;
}
.prose ul:not(.checks):not(.arrows) li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; border-radius:2px; background:var(--gold); transform:rotate(45deg);
}

.callout{
  background:var(--gold-soft); border:1px solid var(--gold-line);
  border-left:4px solid var(--gold);
  border-radius:var(--r-sm); padding:19px 22px; margin:var(--s-5) 0;
  font-size:.95rem; line-height:1.62;
}
.callout strong{ display:block; margin-bottom:5px; font-size:1rem; }
.callout--o{ background:var(--orange-soft); border-color:#FFD5C6; border-left-color:var(--orange); }

/* ------------------------------------------------------------ breadcrumbs -- */
.crumbs{ padding-block:var(--s-4) 0; font-size:.83rem; color:var(--muted-2); }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.crumbs a{ transition:color var(--t); }
.crumbs a:hover{ color:var(--orange); }
.crumbs .ic{ width:13px; height:13px; opacity:.5; }
.crumbs [aria-current]{ color:var(--text); font-weight:600; }

/* ------------------------------------------------------------ nagłówek pod -- */
.page-head{ padding-block:var(--s-6) var(--s-8); }
.page-head__panel{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--ink); color:#fff; border-radius:var(--r-xl);
  padding:clamp(30px,4.4vw,58px);
  box-shadow:var(--sh-3);
}
.page-head__panel::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background:radial-gradient(680px 400px at 92% 0%,rgba(240,56,0,.26),transparent 60%),
             linear-gradient(150deg,#151A38,#0A0C22 60%);
}
.page-head__panel::after{
  content:""; position:absolute; z-index:-1; inset:0; opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 70% 80% at 70% 30%,#000,transparent 100%);
}
.page-head h1{ max-width:20ch; margin-bottom:var(--s-4); }
.page-head__lead{ color:#C6CBDD; max-width:62ch; font-size:clamp(1rem,1.35vw,1.1rem); line-height:1.66; }
.page-head .btn-row{ margin-top:var(--s-6); }
.page-head__meta{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s-6);
  padding-top:var(--s-5); border-top:1px solid var(--ink-line);
}

/* ------------------------------------------------------------- powiązane -- */
.related{ display:grid; gap:12px; }
@media (min-width:700px){ .related{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .related{ grid-template-columns:repeat(3,1fr); } }
.rel{
  display:block; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:18px 20px;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t);
}
.rel:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:#CDD3E3; }
.rel strong{ display:block; font-size:.99rem; font-weight:700; margin-bottom:5px; }
.rel span{ display:block; font-size:.85rem; color:var(--muted); line-height:1.5; }
.rel .link-arrow{ margin-top:11px; font-size:.86rem; }

/* -------------------------------------------------------------- kontakt -- */
.contact-grid{ display:grid; gap:var(--s-5); }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 1fr; gap:var(--s-7); } }
.contact-line{
  display:flex; gap:14px; align-items:flex-start;
  padding:17px 0; border-bottom:1px solid var(--line);
}
.contact-line:last-child{ border-bottom:0; }
.contact-line__ic{
  width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--gold-soft); border:1px solid var(--gold-line); border-radius:var(--r-sm);
}
.contact-line__ic .ic{ width:20px; height:20px; }
.contact-line strong{ display:block; font-size:.79rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); font-weight:700; margin-bottom:3px; }
.contact-line a,.contact-line p{ font-size:1.06rem; font-weight:700; color:var(--text); }
.contact-line a{ transition:color var(--t); }
.contact-line a:hover{ color:var(--orange); }

/* --------------------------------------------------------------- stopka -- */
.footer{ background:var(--ink); color:var(--on-ink-mut); padding-top:clamp(48px,6vw,76px); }
.footer__grid{ display:grid; gap:var(--s-6); padding-bottom:var(--s-8); }
@media (min-width:700px){ .footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:var(--s-7); } }
.footer h2,.footer h3{ color:#fff; font-size:.82rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:var(--s-4); }
.footer a{ transition:color var(--t); font-size:.92rem; }
.footer a:hover{ color:var(--gold); }
.footer__links{ display:grid; gap:10px; }
.footer__about p{ font-size:.92rem; line-height:1.62; margin-bottom:var(--s-4); }
.footer .brand{ margin-bottom:var(--s-4); }
.footer__call{
  background:rgba(255,255,255,.05); border:1px solid var(--ink-line);
  border-radius:var(--r-md); padding:18px;
}
.footer__call strong{ display:block; color:#fff; font-size:1.32rem; font-family:"Plus Jakarta Sans",sans-serif; letter-spacing:-.02em; }
.footer__call span{ font-size:.8rem; }
.footer__bottom{
  border-top:1px solid var(--ink-line); padding-block:var(--s-5);
  display:flex; flex-wrap:wrap; gap:var(--s-4); align-items:center; justify-content:space-between;
  font-size:.83rem;
}
.footer__bottom nav{ display:flex; flex-wrap:wrap; gap:var(--s-4); }

/* ------------------------------------------------------- mobilny pasek CTA -- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-bar);
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--ink-line);
  box-shadow:0 -6px 24px -8px rgba(10,12,34,.3);
  padding-bottom:env(safe-area-inset-bottom,0);
}
@media (min-width:860px){ .callbar{ display:none; } }
.callbar a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; background:var(--ink); color:#fff;
  font-weight:700; font-size:.94rem;
}
.callbar a:last-child{ background:var(--orange-btn); }
.callbar .ic{ width:19px; height:19px; }
@media (max-width:859px){ .footer{ padding-bottom:64px; } }

/* -------------------------------------------------------------- animacje -- */
.js-reveal .reveal{ opacity:0; transform:translateY(22px); }
.js-reveal .reveal.is-in{ opacity:1; transform:none; transition:opacity 620ms var(--e-out), transform 620ms var(--e-out); }
.js-reveal .reveal-d1.is-in{ transition-delay:70ms; }
.js-reveal .reveal-d2.is-in{ transition-delay:140ms; }
.js-reveal .reveal-d3.is-in{ transition-delay:210ms; }
.js-reveal .reveal-d4.is-in{ transition-delay:280ms; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js-reveal .reveal{ opacity:1; transform:none; }
}

/* ------------------------------------------------------------------ ikony -- */
.ic{ display:inline-block; vertical-align:middle; stroke-width:1.75; }

/* ------------------------------------------------------------------ druk -- */
@media print{
  .nav-shell,.topbar,.callbar,.shop,.mobile{ display:none !important; }
  body{ background:#fff; font-size:12pt; }
  .hero__panel,.page-head__panel{ background:#fff !important; color:#000 !important; box-shadow:none; }
}