/* GDPR self-host: zero transfer IP do USA (LG München I 2022 ruling) — fonts.css JEST loaded
   z <link rel=stylesheet> w każdym HTML (panel/, /, /kontakt/, /uslugi/, /eco/, /cennik/,
   /realizacje/, /polityka-prywatnosci/). @import tutaj duplikowało fonts.css fetch (browser
   nie dedupes between top-level <link> i CSS @import). Usunięte: -1 fetch (~2 KB) plus
   eliminacja drugiego @font-face evaluation = -57 KB jetbrains-mono duplikat. */

/* ─────────────────────────────────────────────────
   klyo.pl — portfolio
   Targo-inspired: black / EE3F2C red / white / Rubik
   Single-file styles, hand-tuned.
   ───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; }

:root {
  --bg:        #04050a;
  --bg-2:      #08080a;
  --bg-3:      #0e0e11;
  --ink:       #f5f5f7;  /* Apple/Linear off-white — less harsh, more readable */
  --ink-2:     rgba(245,245,247,.78);
  --ink-3:     rgba(245,245,247,.52);
  --ink-4:     rgba(245,245,247,.20);
  --line:      rgba(245,245,247,.10);
  --line-2:    rgba(245,245,247,.06);

  --red:       #EE3F2C;
  --red-hi:    #ff5a47;
  --red-deep:  #b62716;

  /* clipped corner depth (top-right + bottom-left) */
  --clip-md: 12px;
  --clip-sm: 9px;

  /* type scale */
  --t-display: clamp(40px, 7.4vw, 88px);
  --t-h1:      clamp(38px, 5.6vw, 64px);
  --t-h2:      clamp(32px, 4.8vw, 56px);
  --t-h3:      clamp(20px, 1.7vw, 26px);
  --t-body:    clamp(15px, 1.05vw, 17px);
  --t-mono:    12px;

  --tracking-tight: -0.04em;
  --tracking-mono:  0.04em;

  --pad-x: clamp(20px, 4.6vw, 64px);
  --pad-y: clamp(48px, 8vw, 120px);

  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-emp:   cubic-bezier(.4,0,.1,1);
}

html {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Rubik', system-ui, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
  /* NATIVE APP FEEL: wyłącz iOS Safari rubber-band bounce + Android edge glow + pull-to-refresh.
     Gdy brak czego scrollować, strona ZERO ruchu — jak natywna aplikacja. */
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
body {
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: -0.01em;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(238,63,44,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(255,255,255,.04), transparent 60%),
    var(--bg);
  /* CELOWO BEZ overflow-x: hidden — CSS Overflow L3 spec: gdy overflow-x:hidden + overflow-y:visible,
     browser auto-rewrite overflow-y → auto → body staje się scroll container → window.scrollY=0.
     html ma overflow-x: hidden (line 62) który chroni przed horizontal page scroll. */
  max-width: 100vw;
  width: 100%;
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  /* NATIVE APP FEEL: 'none' (NIE 'contain'). contain tylko blokuje propagation
     ale dopuszcza domyślny browser bounce/glow. none wyłącza WSZYSTKO. */
  overscroll-behavior: none;
}
/* Globalnie nic nie wystaje poza viewport (anti horizontal swipe) */
*, *::before, *::after { max-width: 100vw; }
/* Native: brak text selection callout dla buttonów/linków (mobile UX) */
button, a, [role="button"] { -webkit-touch-callout: none; }

::selection { background: var(--red); color: #fff; }

a { color: inherit; text-decoration: none; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: normal; color: var(--red); }

/* ───────── reusable: clipped-corner buttons (Targo) ───────── */
.btn {
  --c: var(--clip-md);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--ink);
  position: relative;
  isolation: isolate;
  clip-path: polygon(
    0 0,
    calc(100% - var(--c)) 0,
    100% var(--c),
    100% 100%,
    var(--c) 100%,
    0 calc(100% - var(--c))
  );
  transition: transform .25s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--sm { padding: 10px 16px; font-size: 11.5px; --c: var(--clip-sm); }

.btn--red       { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-hi); }

.btn--white       { background: #fff; color: #000; }
.btn--white:hover { background: #f1f1f1; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-4);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }

/* ───────────────────── NAV — MEGA MENU ───────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 14px var(--pad-x);
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));
  transition: backdrop-filter .3s, background .3s, border-color .3s;
}
.nav.is-stuck {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line-2);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* MEGA MENU — Apple/Linear morph pattern.
   Wszystkie panele dzielą jeden „stage" z jedną pozycją. Hover/click zamienia tylko zawartość.
   Smooth height + cross-fade między panelami. Pojedyncze źródło prawdy: .mega.is-open + data-active. */

.mega {
  position: relative;
  display: flex;
  justify-content: center;
}
.mega__bar {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2px;
  position: relative;
  z-index: 2;
}
.mega__item { position: relative; }

.mega__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-family: 'Rubik', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  border-radius: 10px;
  transition: color .25s var(--ease-out), background .25s var(--ease-out);
  white-space: nowrap;
  position: relative;
}
.mega__trigger:hover,
.mega__item.is-active .mega__trigger,
.mega__trigger[aria-expanded="true"] {
  color: var(--ink);
  background: rgba(255,255,255,.07);
}
/* animated underline accent under active trigger */
.mega__trigger::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--red);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.34,1.4,.42,1);
  pointer-events: none;
}
.mega__item.is-active .mega__trigger::after,
.mega__trigger[aria-expanded="true"]::after {
  transform: scaleX(1);
}
.mega__trigger svg {
  opacity: .55;
  transition: transform .3s var(--ease-out);
}
.mega__item.is-active .mega__trigger svg,
.mega__trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
  opacity: 1;
}

/* SHARED STAGE — single positioned container under the bar, holds all panels */
.mega__stage {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px) scale(.98);
  width: clamp(640px, 64vw, 960px);
  max-width: calc(100vw - 32px);
  background:
    radial-gradient(600px 240px at 80% 0%, rgba(238,63,44,.10), transparent 60%),
    linear-gradient(180deg, rgba(14,14,18,.95) 0%, rgba(8,8,12,.96) 100%);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border-radius: 18px;
  box-shadow:
    0 56px 120px rgba(0,0,0,.7),
    0 18px 40px rgba(238,63,44,.10),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.4);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .28s cubic-bezier(.22,1,.36,1),
    visibility .28s,
    transform .42s cubic-bezier(.34,1.4,.42,1),
    height .42s cubic-bezier(.22,1,.36,1),
    width .42s cubic-bezier(.22,1,.36,1);
  z-index: 60;
  overflow: hidden;
  height: 0;
  /* hover bridge */
  margin-top: -14px;
  padding-top: 14px;
}
.mega.is-open .mega__stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* animated top accent line */
.mega__stage::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238,63,44,.6), rgba(255,255,255,.3), rgba(238,63,44,.6), transparent);
  background-size: 200% 100%;
  animation: shimmer-bar 6s linear infinite;
  z-index: 1;
}
@keyframes shimmer-bar {
  to { background-position: -200% 0; }
}
/* subtle prismatic glow under active item */
.mega__stage::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60%;
  background: radial-gradient(80% 100% at 50% 100%, rgba(238,63,44,.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.mega.is-open .mega__stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* hover bridge: invisible bar between trigger row and stage */
.mega::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 18px;
  pointer-events: none;
}
.mega.is-open::before { pointer-events: auto; }

/* PANELS — all stacked in same place inside stage, cross-fade between them */
.mega__panel {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  opacity: 0;
  transform: translateY(8px) scale(.985);
  filter: blur(4px);
  pointer-events: none;
  transition:
    opacity .26s var(--ease-out),
    transform .32s cubic-bezier(.22,1,.36,1),
    filter .26s var(--ease-out);
}
.mega__panel.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}
/* cennik panel is 2-col + cta */
#mega-cennik { grid-template-columns: repeat(2, 1fr); }

/* stagger reveal of links inside active panel */
.mega__panel.is-active .mega__link,
.mega__panel.is-active .mega__cta {
  animation: mega-stagger .35s var(--ease-out) both;
}
.mega__panel.is-active .mega__col:nth-child(1) .mega__link:nth-child(2) { animation-delay: .04s; }
.mega__panel.is-active .mega__col:nth-child(1) .mega__link:nth-child(3) { animation-delay: .08s; }
.mega__panel.is-active .mega__col:nth-child(1) .mega__link:nth-child(4) { animation-delay: .12s; }
.mega__panel.is-active .mega__col:nth-child(1) .mega__link:nth-child(5) { animation-delay: .16s; }
.mega__panel.is-active .mega__col:nth-child(2) .mega__link:nth-child(2) { animation-delay: .06s; }
.mega__panel.is-active .mega__col:nth-child(2) .mega__link:nth-child(3) { animation-delay: .10s; }
.mega__panel.is-active .mega__col:nth-child(2) .mega__link:nth-child(4) { animation-delay: .14s; }
.mega__panel.is-active .mega__col:nth-child(3) .mega__link:nth-child(2) { animation-delay: .08s; }
.mega__panel.is-active .mega__col:nth-child(3) .mega__link:nth-child(3) { animation-delay: .12s; }
.mega__panel.is-active .mega__col:nth-child(3) .mega__link:nth-child(4) { animation-delay: .16s; }
.mega__panel.is-active .mega__cta { animation-delay: .2s; }
@keyframes mega-stagger {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mega__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.mega__h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mega__h::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 1px;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(238,63,44,.6);
}
.mega__link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 2px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  position: relative;
  transition:
    background .25s var(--ease-out),
    transform .35s cubic-bezier(.22,1,.36,1),
    padding-left .25s var(--ease-out);
}
.mega__link::before {
  content: counter(megalink, decimal-leading-zero);
  grid-row: 1 / 3;
  grid-column: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  align-self: center;
  transition: color .25s, transform .35s;
}
.mega__col { counter-reset: megalink; }
.mega__col .mega__link { counter-increment: megalink; }

.mega__link:hover {
  background: linear-gradient(90deg, rgba(238,63,44,.14), rgba(238,63,44,.04));
  transform: translateX(2px);
}
.mega__link:hover::before {
  color: var(--red);
}
/* arrow that appears on hover */
.mega__link::after {
  content: '→';
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) translateX(-4px);
  color: var(--red);
  font-size: 14px;
  opacity: 0;
  transition: opacity .25s, transform .35s var(--ease-out);
}
.mega__link:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.mega__link-name {
  grid-column: 2;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.mega__link-desc {
  grid-column: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  transition: color .25s;
}
.mega__link:hover .mega__link-desc { color: var(--ink-2); }

.mega__link--accent {
  background: linear-gradient(90deg, rgba(238,63,44,.10), rgba(238,63,44,.02));
  box-shadow: inset 0 0 0 1px rgba(238,63,44,.18);
}
.mega__link--accent .mega__link-name { color: var(--red); }
.mega__link--accent::before { color: var(--red); }

/* live pulse dot for live projects */
.mega__link--live .mega__link-name::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  background: #4ade80;
  border-radius: 50%;
  vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(74,222,128,.5);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.6); }
  100% { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
}

.mega__cta {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(238,63,44,.12), rgba(238,63,44,.04));
  border: 1px solid rgba(238,63,44,.18);
  border-radius: 10px;
}
.mega__cta--green {
  background: linear-gradient(135deg, rgba(74,222,128,.10), rgba(74,222,128,.03));
  border-color: rgba(74,222,128,.18);
}
.mega__cta-num {
  font-family: 'Rubik', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: var(--red);
  letter-spacing: -0.02em;
  line-height: 1;
  min-width: 38px;
  text-align: center;
}
.mega__cta strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.mega__cta span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.nav__cta { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   BURGER + MOBILE DRAWER · PREMIUM 2026 · zero-JS-render fallback
   ═══════════════════════════════════════════════════════════════ */
.nav__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .18s var(--ease-out);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.nav__burger:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.32);
}
.nav__burger:active { transform: scale(.94); }
.nav__burger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nav__burger-ico {
  display: block;
  color: #fff;
  pointer-events: none;
}
.nav__burger-ico line {
  transition: transform .35s cubic-bezier(.6,.04,.2,1), opacity .2s var(--ease-out);
  transform-origin: 12px 12px;
}
.nav__burger[aria-expanded="true"] {
  background: linear-gradient(135deg, rgba(238,63,44,.14), rgba(238,63,44,.04));
  border-color: rgba(238,63,44,.55);
}
.nav__burger[aria-expanded="true"] .nav__burger-ico { color: #ff6a52; }
.nav__burger[aria-expanded="true"] .nav__burger-ico .b1 { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .nav__burger-ico .b2 { opacity: 0; transform: scaleX(0); }
.nav__burger[aria-expanded="true"] .nav__burger-ico .b3 { transform: translateY(-5px) rotate(-45deg); }
/* fallback if CSS animation transforms are blocked: 3 bars stay visible as solid lines */

/* DRAWER HEAD · sticky top z X button + brand */
.drawer__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(20px, 5vw, 36px);
  background: linear-gradient(180deg, rgba(4,5,10,.85), rgba(4,5,10,.55) 80%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.drawer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.drawer__brand strong {
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  transition: background .22s var(--ease-out), border-color .22s var(--ease-out), transform .18s;
  -webkit-tap-highlight-color: transparent;
}
.drawer__close:hover { background: linear-gradient(135deg, rgba(238,63,44,.14), rgba(238,63,44,.04)); border-color: rgba(238,63,44,.55); color: #ff6a52; }
.drawer__close:active { transform: scale(.94); }
.drawer__close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* DRAWER — full-screen glass overlay */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 750px at 78% -10%, rgba(238,63,44,.18), transparent 55%),
    radial-gradient(900px 700px at -10% 110%, rgba(139,92,246,.18), transparent 55%),
    radial-gradient(700px 500px at 50% 50%, rgba(77,216,255,.06), transparent 70%),
    rgba(4,5,10,.94);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .38s cubic-bezier(.16,1,.3,1), visibility 0s linear .38s;
}
.drawer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .38s cubic-bezier(.16,1,.3,1), visibility 0s linear 0s;
}
.drawer::before {
  /* subtle top border with gradient (Apple-vibe) */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2) 30%, rgba(238,63,44,.4) 50%, rgba(255,255,255,.2) 70%, transparent);
  pointer-events: none;
}
.drawer__nav {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(20px, 4vh, 32px) clamp(22px, 6vw, 44px) clamp(48px, 9vh, 80px);
  gap: 2px;
  transform: translateY(-18px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1) .06s, opacity .35s cubic-bezier(.16,1,.3,1) .06s;
}
.drawer.is-open .drawer__nav { transform: translateY(0); opacity: 1; }
.drawer__nav details {
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0;
}
.drawer__nav summary {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(22px, 5.6vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .22s var(--ease-out);
}
.drawer__nav summary::-webkit-details-marker { display: none; }
.drawer__nav summary::after {
  content: '';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: relative;
  flex: none;
}
.drawer__nav summary::before {
  /* + / − via two pseudo bars — actually use ::after as block with linear-gradients */
}
.drawer__nav summary::after {
  background:
    linear-gradient(currentColor, currentColor) center / 22px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 22px no-repeat;
  color: var(--red);
  transition: transform .35s cubic-bezier(.6,.04,.2,1), background-size .25s var(--ease-out);
}
.drawer__nav details[open] summary { color: var(--red); }
.drawer__nav details[open] summary::after {
  background:
    linear-gradient(currentColor, currentColor) center / 22px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 0 22px no-repeat;
  transform: rotate(180deg);
}
.drawer__nav details a {
  display: block;
  padding: 13px 18px;
  margin: 2px 0;
  font-family: 'Rubik', sans-serif;
  font-size: clamp(14.5px, 3.8vw, 15.5px);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid rgba(255,255,255,.1);
  border-radius: 0 8px 8px 0;
  transition: color .2s var(--ease-out), border-color .2s, padding-left .25s var(--ease-out), background .25s;
  -webkit-tap-highlight-color: transparent;
}
.drawer__nav details a:hover,
.drawer__nav details a:active,
.drawer__nav details a:focus-visible {
  color: var(--ink);
  border-color: var(--red);
  padding-left: 22px;
  background: linear-gradient(90deg, rgba(238,63,44,.08), transparent 60%);
  outline: none;
}
.drawer__nav .drawer__more {
  color: var(--red);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(11.5px, 3vw, 12.5px);
  letter-spacing: .06em;
  border-color: rgba(238,63,44,.4);
}
.drawer__solo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 4px;
  font-family: 'Rubik', sans-serif;
  font-size: clamp(22px, 5.6vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: color .22s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.drawer__solo::after {
  content: '→';
  font-weight: 400;
  color: rgba(255,255,255,.28);
  transition: transform .25s var(--ease-out), color .25s;
}
.drawer__solo:hover,
.drawer__solo:active,
.drawer__solo:focus-visible {
  color: var(--red);
  outline: none;
}
.drawer__solo:hover::after,
.drawer__solo:active::after { color: var(--red); transform: translateX(6px); }
.drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 28px 0 0;
  padding: 18px 24px;
  background: linear-gradient(135deg, #EE3F2C, #c52d1a);
  color: #fff !important;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(238,63,44,.42), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .2s var(--ease-out), box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.drawer__cta:hover { box-shadow: 0 18px 36px rgba(238,63,44,.55), inset 0 1px 0 rgba(255,255,255,.22); }
.drawer__cta:active { transform: scale(.985); }

/* Body scroll-lock — KRYTYCZNE: NIE używaj touch-action: none na body bo blokuje
   touchpad/wheel gestures NA WSZYSTKICH DZIECIACH (w tym .cart__panel/.drawer).
   Per MDN: touch-action propaguje na descendants. Sam overflow:hidden wystarcza. */
html.menu-open, body.menu-open,
html.cart-open, body.cart-open {
  overflow: hidden !important;
  overflow-y: hidden !important;
}

/* desktop / mobile breakpoint switch — SINGLE source of truth */
@media (max-width: 1100px) {
  .mega { display: none !important; }
  .nav { grid-template-columns: auto 1fr auto auto auto; gap: 8px; padding: 10px 14px; }
  .nav.is-stuck { padding-top: 8px; padding-bottom: 8px; }
  .nav__cta {
    display: inline-flex !important;
    padding: 8px 12px;
    font-size: 11.5px;
    align-items: center;
    justify-content: center;
    min-height: 38px;
  }
  .nav__burger { display: inline-flex; align-items: center; justify-content: center; }
}
@media (min-width: 1101px) {
  .drawer { display: none !important; }
  .nav__burger { display: none !important; }
}
@media (max-width: 480px) {
  .nav__wordmark { display: none; }
  .nav__brand { gap: 6px; }
  .nav { gap: 6px; padding: 9px 12px; }
  .nav-cart { width: 36px; height: 36px; }
  .nav__cta { padding: 7px 10px; min-height: 36px; }
  .nav__burger { width: 40px; height: 40px; }
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}
.nav__logo {
  width: 24px;
  height: 24px;
  color: #fff;
}
.nav__wordmark {
  font-weight: 700;
  font-size: 15px;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}
/* legacy .nav__links removed — replaced by .mega */

/* nav cart button */
.nav-cart {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .25s;
}
.nav-cart:hover {
  background: rgba(238,63,44,.10);
  border-color: rgba(238,63,44,.4);
  transform: translateY(-1px);
}
.nav-cart__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  border-radius: 9px;
  border: 2px solid #000;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34,1.6,.42,1);
}
.nav-cart__badge[data-count]:not([data-count="0"]) { transform: scale(1); }
.nav-cart.is-bump { animation: cart-bump .4s cubic-bezier(.34,1.6,.42,1); }
@keyframes cart-bump {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* CART DRAWER */
/* ═══ MENU MOBILNE — identyczny pattern jak .cart (slide-in z prawej) ═══ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}
.menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(238,63,44,.12), transparent 60%),
    linear-gradient(180deg, #0c0c10 0%, #060608 100%);
  border-left: 1px solid var(--line);
  box-shadow: -40px 0 80px rgba(0, 0, 0, .7);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.menu.is-open { pointer-events: auto; }
.menu.is-open .menu__backdrop { opacity: 1; }
.menu.is-open .menu__panel { transform: translateX(0); }
.menu__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.menu__title {
  font-family: 'Rubik', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.menu__sub {
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .04em;
}
.menu__close {
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s, color .2s, border-color .2s;
}
.menu__close:hover, .menu__close:active {
  background: rgba(238, 63, 44, .15);
  color: #fff;
  border-color: rgba(238, 63, 44, .55);
}
.menu__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 24px;
  gap: 4px;
}
.menu__nav details {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.menu__nav summary {
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}
.menu__nav summary::-webkit-details-marker { display: none; }
.menu__nav summary::after {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  color: var(--red);
  transition: transform .25s var(--ease-out);
}
.menu__nav details[open] summary { color: var(--red); }
.menu__nav details[open] summary::after { transform: rotate(45deg); }
.menu__nav details a {
  display: block;
  padding: 9px 14px 9px 12px;
  margin-top: 3px;
  font-family: 'Rubik', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-left: 2px solid var(--line);
  transition: color .2s, border-color .2s, padding-left .2s;
}
.menu__nav details a:hover, .menu__nav details a:active {
  color: var(--ink);
  border-color: var(--red);
  padding-left: 16px;
}
.menu__more {
  border-color: rgba(238, 63, 44, .5) !important;
  color: var(--red) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 11.5px !important;
  letter-spacing: .06em;
}
.menu__solo {
  display: block;
  padding: 15px 0;
  font-family: 'Rubik', sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.menu__solo:hover, .menu__solo:active { color: var(--red); }
.menu__cta {
  display: block;
  margin-top: 16px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--red), #c52d1a);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(238, 63, 44, .4);
}

.cart {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  /* Zatrzymaj scroll chaining: wheel events nad cart NIE propaguje do body. */
  overflow: hidden;
  overscroll-behavior: contain;
}
.cart__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  /* Backdrop musi reagować na CLICK (data-cart-close), ale wheel events NIE łapać —
     inaczej user scrollujący "obok panelu" przesuwa stronę pod. Click delegowany w JS
     (cart-close handler) i tak działa nawet z pointer-events:none przez event bubbling,
     ale my chcemy CLICK na backdrop = close. Rozwiązanie: pointer-events: auto, ale
     overflow:hidden na .cart rodzicu zatrzymuje wheel propagation. */
}
/* REVERT do transform: translateX (strzałki działały z tym). Compositor bug naprawiamy
   przez window-capture JS handler poniżej w main.js — wheel events manual scroll panel. */
.cart__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 100vw);
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(238,63,44,.12), transparent 60%),
    linear-gradient(180deg, #0c0c10 0%, #060608 100%);
  border-left: 1px solid var(--line);
  box-shadow: -40px 0 80px rgba(0,0,0,.7);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
.cart__panel::-webkit-scrollbar { width: 8px; }
.cart__panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
.cart__panel::-webkit-scrollbar-track { background: transparent; }
.cart.is-open { pointer-events: auto; }
.cart.is-open .cart__backdrop { opacity: 1; }
.cart.is-open .cart__panel { transform: translateX(0); }

.cart__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
  background: rgba(12,12,16,.92);
}
.cart__head::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 24px;
  width: 32px; height: 1px;
  background: var(--red);
}
.cart__title {
  font-family: 'Rubik', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--ink);
}
.cart__sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.cart__close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.cart__close:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: rotate(90deg);
}

.cart__list {
  /* Już NIE scrollowane — cały cart__panel jest scrollable. Lista po prostu rośnie. */
  padding: 16px 24px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cart__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  position: relative;
  animation: cart-item-in .35s cubic-bezier(.34,1.4,.42,1);
}
@keyframes cart-item-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cart__item-tld {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 36px;
  padding: 4px 6px;
  background: rgba(238,63,44,.1);
  border-radius: 4px;
  text-align: center;
}
.cart__item-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cart__item-body span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.cart__item-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.cart__item-rm {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 18px;
  transition: color .2s, transform .2s;
}
.cart__item-rm:hover { color: var(--red); transform: scale(1.2); }

.cart__empty {
  padding: 36px 24px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.cart__empty strong {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.cart__form {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cart__form-h {
  grid-column: 1 / -1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 4px;
}
.cart__field { display: flex; flex-direction: column; gap: 4px; }
.cart__field--full { grid-column: 1 / -1; }
.cart__field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cart__field input {
  padding: 9px 11px;
  font-family: 'Rubik', sans-serif;
  font-size: 13.5px;
  background: rgba(0,0,0,.5);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  transition: border-color .2s;
}
.cart__field input:focus {
  outline: none;
  border-color: var(--red);
}
.cart__check {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.cart__check input { accent-color: var(--red); margin-top: 2px; }
.cart__check small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.cart__foot {
  padding: 16px 24px 22px;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12,12,16,.78), rgba(12,12,16,.95));
  position: relative;
}
.cart__totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.cart__totals > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.cart__totals strong { color: var(--ink-2); font-weight: 600; }
.cart__totals-grand {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.cart__totals-grand span { color: var(--ink) !important; }
.cart__totals-grand strong {
  font-family: 'Rubik', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--red) !important;
}
.cart__pay {
  width: 100%;
  padding: 16px;
  font-size: 14px;
  justify-content: center;
}
.cart__notice {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(238, 63, 44, 0.06);
  border-left: 2px solid var(--red);
  padding: 10px 12px;
  margin-bottom: 10px;
  letter-spacing: 0.005em;
}
.cart__notice strong { color: #fff; font-weight: 600; }
.cart__notice small {
  display: block;
  margin-top: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.04em;
}

/* ── krDialog · custom modal system ─────────────────── */
.krdialog-root {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
}
.krdialog {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.22s ease-out;
}
.krdialog.is-show { opacity: 1; }
.krdialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.krdialog__panel {
  position: relative;
  width: min(480px, 92vw);
  background: #0c0c0c;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-left: 2px solid var(--red, #EE3F2C);
  display: flex;
  flex-direction: column;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(238, 63, 44, 0.08);
}
.krdialog.is-show .krdialog__panel { transform: translateY(0) scale(1); }

/* WIDE — form modali (Dodaj domenę, Nowa skrzynka) */
.krdialog--wide .krdialog__panel { width: min(720px, 94vw); }
.krdialog--wider .krdialog__panel { width: min(880px, 94vw); }

/* LUX — premium glass + animated scanline + corner halos ($100k design) */
.krdialog--lux .krdialog__panel {
  border: 1px solid rgba(238,63,44,.35);
  border-left: 1px solid rgba(238,63,44,.35);
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(238,63,44,.12), transparent 60%),
    radial-gradient(600px 400px at 0% 100%, rgba(255,138,91,.06), transparent 60%),
    linear-gradient(180deg, #11111a 0%, #050507 100%);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    0 60px 120px rgba(0,0,0,.85),
    0 0 0 1px rgba(238,63,44,.25),
    0 0 80px rgba(238,63,44,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}
.krdialog--lux .krdialog__panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red) 25%, #ff8a5b 50%, var(--red) 75%, transparent);
  box-shadow: 0 0 18px rgba(238,63,44,.7), 0 0 36px rgba(238,63,44,.3);
  animation: krdialogScan 2.8s ease-in-out infinite;
}
.krdialog--lux .krdialog__panel::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238,63,44,.4) 50%, transparent);
  pointer-events: none;
}
@keyframes krdialogScan {
  0%, 100% { opacity: .55; transform: scaleX(.92); }
  50%      { opacity: 1; transform: scaleX(1); }
}
.krdialog--lux.krdialog--green .krdialog__panel {
  border-color: rgba(77,255,140,.35);
  box-shadow: 0 60px 120px rgba(0,0,0,.75), 0 0 0 1px rgba(77,255,140,.20), inset 0 1px 0 rgba(255,255,255,.05);
}
.krdialog--lux.krdialog--green .krdialog__panel::before {
  background: linear-gradient(90deg, transparent, #4dff8c 30%, #b3ff5c 50%, #4dff8c 70%, transparent);
  box-shadow: 0 0 14px rgba(77,255,140,.55);
}
.krdialog--lux .krdialog__num { color: var(--red); font-size: .68rem; letter-spacing: .18em; }
.krdialog--lux.krdialog--green .krdialog__num { color: #4dff8c; }
.krdialog--lux .krdialog__head h3 {
  font-size: 1.35rem;
  background: linear-gradient(105deg, #fff 0%, #ffd5cf 70%, var(--red) 110%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.krdialog--lux.krdialog--green .krdialog__head h3 {
  background: linear-gradient(105deg, #fff 0%, #c5ffd9 70%, #4dff8c 110%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Premium FIELD layout */
.krdialog__body .kr-field {
  display: block;
  margin: 1.1rem 0 .5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.krdialog__body .kr-field small {
  display: block;
  margin-top: .25rem;
  font-family: 'Rubik', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
}
.krdialog__body .kr-input-wrap {
  position: relative;
  margin-top: .55rem;
}
.krdialog__body .kr-input {
  width: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border: 1.5px solid rgba(238,63,44,.3);
  color: #fff;
  padding: 1rem 1.1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
  -webkit-text-fill-color: #fff;
  box-sizing: border-box;
  --c: 8px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.krdialog__body .kr-input:focus {
  border-color: rgba(238,63,44,.85);
  background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.4));
  box-shadow: 0 0 0 4px rgba(238,63,44,.12), inset 0 0 24px rgba(238,63,44,.05), 0 8px 30px rgba(238,63,44,.15);
}
.krdialog--green .krdialog__body .kr-input { border-color: rgba(77,255,140,.3); }
.krdialog--green .krdialog__body .kr-input:focus {
  border-color: rgba(77,255,140,.85);
  box-shadow: 0 0 0 4px rgba(77,255,140,.12), inset 0 0 24px rgba(77,255,140,.05), 0 8px 30px rgba(77,255,140,.15);
}
.krdialog__body .kr-input::placeholder { color: rgba(255,255,255,.28); font-weight: 400; }
/* Anti-Chrome-autofill (białe tło) — wymuś dark background */
.krdialog__body .kr-input:-webkit-autofill,
.krdialog__body .kr-input:-webkit-autofill:hover,
.krdialog__body .kr-input:-webkit-autofill:focus,
.krdialog__body .kr-input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff !important;
  -webkit-box-shadow: 0 0 0 1000px #050507 inset !important;
  box-shadow: 0 0 0 1000px #050507 inset !important;
  caret-color: #fff !important;
  transition: background-color 9999s ease-out 0s !important;
}

/* Numbered step list (premium $100k design) */
.krdialog__body .kr-steps {
  margin: 1.2rem 0 .5rem;
  padding: 1rem 1.1rem 1rem 1rem;
  background:
    linear-gradient(180deg, rgba(77,216,255,.05), rgba(77,216,255,.02)),
    radial-gradient(600px 200px at 0% 0%, rgba(77,216,255,.06), transparent 70%);
  border: 1px solid rgba(77,216,255,.18);
  border-left: 2px solid #4dd8ff;
  --c: 10px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.krdialog__body .kr-steps-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4dd8ff;
}
.krdialog__body .kr-steps-head::before {
  content: '';
  width: 14px; height: 1px;
  background: linear-gradient(90deg, #4dd8ff, transparent);
}
.krdialog__body .kr-step {
  display: grid !important;
  grid-template-columns: 32px 1fr !important;
  gap: .8rem !important;
  align-items: center !important;
  padding: .65rem 0 !important;
  font-size: .88rem !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.88) !important;
  border-bottom: 1px dashed rgba(255,255,255,.07) !important;
}
.krdialog__body .kr-step:last-child { border-bottom: 0; }
.krdialog__body .kr-step-n {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  background: linear-gradient(135deg, rgba(77,216,255,.28), rgba(77,216,255,.08)) !important;
  border: 1.5px solid rgba(77,216,255,.55) !important;
  border-radius: 50% !important;
  color: #4dd8ff !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(77,216,255,.32), inset 0 1px 0 rgba(255,255,255,.15) !important;
  flex: none !important;
}
.krdialog__body .kr-step strong { color: #fff; font-weight: 700; }
.krdialog__body .kr-step code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8rem;
  background: rgba(77,216,255,.1);
  border: 1px solid rgba(77,216,255,.25);
  padding: 1px 6px;
  border-radius: 3px;
  color: #4dd8ff;
}

/* Premium OK button — wewnątrz modal (lux flag dodaje glow) */
.krdialog--lux .krdialog__foot {
  padding: 1rem 1.4rem 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.4));
}
.krdialog--lux .krdialog__foot [data-kr-ok] {
  position: relative;
  padding: .9rem 1.6rem;
  font-size: .92rem;
  letter-spacing: .02em;
  box-shadow: 0 12px 32px rgba(238,63,44,.42), inset 0 1px 0 rgba(255,255,255,.15);
}
.krdialog--lux .krdialog__foot [data-kr-ok]::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, var(--red), #ff8a5b, var(--red));
  background-size: 200% 100%;
  z-index: -1;
  animation: krBtnShimmer 4s linear infinite;
  filter: blur(12px);
  opacity: .3;
  pointer-events: none;
}
.krdialog--lux .krdialog__foot [data-kr-ok]:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(238,63,44,.55), inset 0 1px 0 rgba(255,255,255,.2);
}
.krdialog--lux.krdialog--green .krdialog__foot [data-kr-ok] {
  background: linear-gradient(135deg, #4dff8c, #2dd66b);
  color: #000;
  box-shadow: 0 12px 32px rgba(77,255,140,.42), inset 0 1px 0 rgba(255,255,255,.25);
}
.krdialog--lux.krdialog--green .krdialog__foot [data-kr-ok]::before {
  background: linear-gradient(135deg, #4dff8c, #b3ff5c, #4dff8c);
  background-size: 200% 100%;
}
@keyframes krBtnShimmer {
  to { background-position: 200% 50%; }
}

/* Info block (cyan glass) — używane przed/po stepsach */
.krdialog__body .kr-info {
  margin-top: 1rem;
  padding: .7rem .9rem;
  background: rgba(77,216,255,.06);
  border-left: 2px solid #4dd8ff;
  font-size: .8rem;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
}
.krdialog__body .kr-info strong { color: #4dd8ff; }
.krdialog__body .kr-info code { color: #4dd8ff; }
.krdialog__body .kr-msg {
  margin-top: .7rem;
  font-size: .82rem;
  min-height: 1.2rem;
}
.krdialog__body .kr-msg.is-error { color: #ff5a47; }
.krdialog__body .kr-msg.is-ok    { color: #4dff8c; }
.krdialog__body .kr-msg.is-wait  { color: #4dd8ff; }
.krdialog__body .kr-preview {
  margin-top: .9rem;
  padding: .7rem .9rem;
  background: rgba(77,255,140,.08);
  border-left: 2px solid #4dff8c;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  font-weight: 600;
  color: #4dff8c;
  word-break: break-all;
}
.krdialog__body .kr-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: .55rem;
  align-items: end;
  margin-top: .9rem;
}
@media (max-width: 520px) {
  .krdialog__body .kr-row { grid-template-columns: 1fr; }
}
.krdialog__head {
  padding: 1.1rem 1.4rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.krdialog__num {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red, #EE3F2C);
  margin-bottom: 0.45rem;
}
.krdialog__head h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
}
.krdialog__body {
  padding: 1.1rem 1.4rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.krdialog__body strong { color: #fff; font-weight: 600; }
.krdialog__body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.05rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.krdialog__body p:first-child { margin-top: 0; }
.krdialog__body p:last-child { margin-bottom: 0; }
.krdialog__foot {
  padding: 0.9rem 1.4rem 1.1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.krdialog--danger .krdialog__panel {
  border-left-color: #FF6B6B;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 107, 107, 0.18);
}
.krdialog--danger .krdialog__num { color: #FF6B6B; }
.krdialog--success .krdialog__panel { border-left-color: #5BE49B; }
.krdialog--success .krdialog__num { color: #5BE49B; }
.krdialog--warn .krdialog__panel { border-left-color: #FFC107; }
.krdialog--warn .krdialog__num { color: #FFC107; }
.krdialog--error .krdialog__panel { border-left-color: #FF6B6B; }
.krdialog--error .krdialog__num { color: #FF6B6B; }

/* ── krToast · ephemeral notifications ──────────────── */
#krtoast-stack {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: 0.55rem;
  z-index: 100000;
  pointer-events: none;
  max-width: min(520px, 90vw);
}
.krtoast {
  background: #0c0c0c;
  color: #fff;
  padding: 0.85rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 2px solid var(--red, #EE3F2C);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  transform: translateY(120px);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.22s ease-out;
  pointer-events: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.krtoast.is-show { transform: translateY(0); opacity: 1; }

/* ═══ SMART WIZARD (przepinanie domeny) ═══════════════════ */
.kr-wizard__overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(8px);
  z-index: 100001;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .25s ease;
  font-family: 'JetBrains Mono', monospace;
}
.kr-wizard__overlay.is-show { opacity: 1; }
.kr-wizard {
  max-width: 640px; width: min(640px, 92vw);
  background: #0a0a0c;
  border: 1px solid rgba(255,255,255,.14);
  border-left: 2px solid #EE3F2C;
  color: #fff;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
.kr-wizard__h {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.3rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.kr-wizard__steps { display: flex; gap: 1rem; font-size: .72rem; letter-spacing: .08em; }
.kr-wizard__step { opacity: .35; transition: opacity .2s, color .2s; }
.kr-wizard__step.is-active { opacity: 1; color: #EE3F2C; }
.kr-wizard__step.is-done { opacity: .7; color: #5BE49B; }
.kr-wizard__close {
  background: none; border: none; color: rgba(255,255,255,.6);
  font-size: 1.1rem; cursor: pointer; padding: .25rem .55rem;
}
.kr-wizard__close:hover { color: #fff; }
.kr-wizard__body { padding: 1.4rem 1.5rem 1.5rem; }
.kr-wizard__body h2 {
  font-family: 'Cabinet Grotesk', serif;
  font-size: 1.35rem; margin: 0 0 .9rem;
  font-weight: 500; letter-spacing: -.01em;
}
.kr-wizard__body p { font-size: .85rem; line-height: 1.55; opacity: .85; margin: 0 0 .9rem; }
.kr-wizard__body code {
  background: rgba(255,255,255,.08); padding: .1rem .4rem;
  font-size: .78rem; border-radius: 2px;
}
.kr-wizard__label {
  display: block; margin-top: 1rem;
  font-size: .76rem; letter-spacing: .06em;
}
.kr-wizard__label span {
  display: block; margin-bottom: .35rem;
  text-transform: uppercase; opacity: .55; font-size: .68rem;
}
.kr-wizard__select, .kr-wizard__input {
  width: 100%; box-sizing: border-box;
  background: #050507; border: 1px solid rgba(255,255,255,.16);
  color: #fff; padding: .7rem .85rem;
  font-family: inherit; font-size: .85rem; letter-spacing: .02em;
}
.kr-wizard__select:focus, .kr-wizard__input:focus {
  outline: none; border-color: #EE3F2C;
}
.kr-wizard__or {
  text-align: center; margin: 1rem 0;
  font-size: .72rem; letter-spacing: .12em; opacity: .4;
}
.kr-wizard__actions {
  display: flex; gap: .75rem; justify-content: flex-end;
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.kr-wizard__success {
  padding: .85rem 1rem;
  background: rgba(91,228,155,.08);
  border-left: 2px solid #5BE49B;
  margin: .5rem 0 1rem;
}
.kr-wizard__checklist {
  list-style: none; padding: 0; margin: 1rem 0;
  font-size: .82rem;
}
.kr-wizard__checklist li { padding: .35rem 0; opacity: .85; }
.kr-wizard__dns-box {
  margin: 1rem 0; padding: .85rem 1rem;
  background: rgba(255,255,255,.04);
  border-left: 2px solid #EE3F2C;
}
.kr-wizard__dns-box--alt { border-left-color: rgba(255,255,255,.3); }
.kr-wizard__dns-box strong {
  display: block; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; opacity: .65; margin-bottom: .45rem;
}
.kr-wizard__dns-box pre {
  margin: 0; padding: .55rem .75rem;
  background: #000; border: 1px solid rgba(255,255,255,.08);
  font-size: .76rem; overflow-x: auto;
}
.kr-wizard__dns-box pre code {
  background: none; padding: 0; font-size: inherit;
}
.kr-wizard__dns-box small {
  display: block; margin-top: .5rem; font-size: .72rem; opacity: .55;
}
.kr-wizard__hint {
  font-size: .76rem !important; opacity: .55 !important;
  margin-top: 1rem !important;
}
.kr-wizard__live-row {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .9rem 1rem; margin-bottom: .65rem;
  background: rgba(255,255,255,.04);
  border-left: 2px solid rgba(255,255,255,.18);
  transition: border-color .25s ease;
}
.kr-wizard__live-row.is-ok { border-left-color: #5BE49B; }
.kr-wizard__live-row.is-pending { border-left-color: #FFC107; }
.kr-wizard__live-row strong { font-size: .82rem; }
.kr-wizard__live-icon {
  font-size: 1.1rem; line-height: 1.3;
  min-width: 1.5rem;
}
.kr-wizard__live-meta { font-size: .72rem; opacity: .55; margin-top: .2rem; }
/* Live-bar: singleton toast updateowany w miejscu. Brak animacji per text-update,
   tylko font-size growth na progress feedback. HA-friendly. */
.krtoast--live {
  border-left-color: #5BE49B;
  min-width: 280px;
  font-variant-numeric: tabular-nums;
}
.krtoast--live span {
  display: inline-block;
  /* Tabularne cyfry → brak skoków szerokości przy update 30477→30478 */
}
.krtoast--success { border-left-color: #5BE49B; }
.krtoast--error { border-left-color: #FF6B6B; }
.krtoast--warn { border-left-color: #FFC107; }
.cart__pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cart__pay-methods span {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
}

@media (max-width: 540px) {
  .cart__form { grid-template-columns: 1fr; }
}

/* NIP autofill state */
.cart__nip-status {
  grid-column: 1 / -1;
  margin-top: -4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cart__nip-status.is-loading { color: var(--red); }
.cart__nip-status.is-loading::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  border-top-color: transparent;
  animation: cart-spin .8s linear infinite;
}
.cart__nip-status.is-ok    { color: #4ade80; }
.cart__nip-status.is-ok::before { content: '✓'; font-size: 13px; }
.cart__nip-status.is-error { color: #fbbf24; }
.cart__nip-status.is-error::before { content: '!'; font-weight: 700; }
@keyframes cart-spin { to { transform: rotate(360deg); } }

/* STRIPE MODAL — embedded checkout */
.stripe-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.stripe-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.stripe-modal__panel {
  --c: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(.92);
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(238,63,44,.10), transparent 60%),
    linear-gradient(180deg, #0c0c10 0%, #060608 100%);
  border: 1px solid var(--line);
  box-shadow:
    0 60px 120px rgba(0,0,0,.7),
    0 0 0 1px rgba(238,63,44,.12),
    inset 0 1px 0 rgba(255,255,255,.05);
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity .35s var(--ease-out), transform .42s cubic-bezier(.34,1.4,.42,1);
}
.stripe-modal.is-open { pointer-events: auto; }
.stripe-modal.is-open .stripe-modal__backdrop { opacity: 1; }
.stripe-modal.is-open .stripe-modal__panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.stripe-modal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.stripe-modal__head::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 22px;
  width: 32px; height: 1px;
  background: var(--red);
}
.stripe-modal__head strong {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--ink);
}
.stripe-modal__head span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
}
.stripe-modal__close {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  transition: all .25s;
}
.stripe-modal__close:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: rotate(90deg);
}
.stripe-modal__mount {
  flex: 1;
  min-height: 480px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  background: #fff;
  /* Stripe iframe will live here */
}
.stripe-modal__foot {
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.stripe-modal__foot strong { color: var(--ink-2); }
@media (max-width: 540px) {
  .stripe-modal__panel {
    width: 100vw;
    max-height: 100vh;
    top: 0; left: 0;
    transform: translate(0, 0) scale(1);
    clip-path: none;
  }
  .stripe-modal.is-open .stripe-modal__panel { transform: translate(0, 0) scale(1); }
}

/* SECTION SEPARATORS — for /domeny/ + /cennik/ etc */
.sep {
  max-width: 1280px;
  margin: clamp(40px, 5vw, 80px) auto 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
.sep::before, .sep::after {
  content: '';
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.sep__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  padding: 8px 16px;
  border: 1px solid rgba(238,63,44,.3);
  border-radius: 999px;
  background: rgba(238,63,44,.05);
  white-space: nowrap;
}

/* ZIGZAG editorial layout (image left/text right alternating) */
.zigzag {
  max-width: 1280px;
  margin: clamp(28px, 3.5vw, 48px) auto;
  padding: 0 var(--pad-x);
}
.zigzag__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(36px, 5vw, 72px);
}
.zigzag__row--reverse .zigzag__visual { order: 2; }
.zigzag__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.zigzag__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 200px at 50% 50%, rgba(238,63,44,.10), transparent 60%);
}
.zigzag__visual svg { width: 70%; height: auto; }
.zigzag__h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.zigzag__title {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0 0 14px;
  line-height: 1;
}
.zigzag__title em { color: var(--red); font-style: normal; }
.zigzag__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
.zigzag__body strong { color: var(--ink); font-weight: 600; }
@media (max-width: 800px) {
  .zigzag__row { grid-template-columns: 1fr; }
  .zigzag__row--reverse .zigzag__visual { order: 0; }
}

/* scroll-to-top FAB */
.totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.7);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(.8);
  pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), background .2s, border-color .2s;
  z-index: 40;
}
.totop.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.totop:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-2px) scale(1.05);
}
@media (max-width: 720px) {
  .totop { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* hero v3 — sub line + social proof */
.hero__title .line--sub {
  font-size: .55em;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  text-transform: none;
  margin-top: 4px;
}
.hero__lede strong { color: var(--ink); font-weight: 600; }
.hero__social {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  animation: rise .8s var(--ease-out) both .6s;
}
.hero__social-label { color: var(--red); }
.hero__social-logos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--ink-2);
}

/* ───────────────────── HERO ───────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(238,63,44,.18), transparent 55%),
    radial-gradient(900px 600px at 0% 110%, rgba(238,63,44,.10), transparent 60%),
    linear-gradient(180deg, #0a0a0c 0%, #000 100%);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero__mesh {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(420px 320px at 18% 30%, rgba(238,63,44,.35), transparent 60%),
    radial-gradient(380px 300px at 78% 18%, rgba(238,63,44,.18), transparent 60%),
    radial-gradient(500px 380px at 60% 90%, rgba(120,40,200,.18), transparent 60%);
  filter: blur(60px) saturate(140%);
  opacity: .9;
  animation: meshShift 24s ease-in-out infinite alternate;
}
@keyframes meshShift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1); }
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 75%);
}
.hero__grain {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  opacity: .5;
}

.hero__inner {
  position: relative;
  height: 100%;
  min-height: inherit;
  padding: 120px var(--pad-x) 120px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
}
.hero__copy {
  max-width: 880px;
  width: 100%;
  align-self: start;
  padding-top: clamp(20px, 5vw, 56px);
}

/* spec panel right side */
.hero__specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  width: clamp(220px, 22vw, 280px);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding: 1px;
}
.hero__spec {
  background: rgba(0,0,0,.5);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.hero__spec::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 1px;
  background: var(--red);
}
.hero__spec-num {
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero__spec-num i {
  font-style: normal;
  color: var(--red);
  font-size: .55em;
  font-weight: 600;
  margin-left: 2px;
}
.hero__spec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__specs {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 700px;
  }
  .hero__spec { padding: 12px 14px; }
}
@media (max-width: 640px) {
  .hero__specs { grid-template-columns: repeat(2, 1fr); }
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--t-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-2);
  background: rgba(0,0,0,.45);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  --c: 8px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
}
.hero__eyebrow .dot {
  width: 6px;
  height: 6px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(238,63,44,.18);
  animation: pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(238,63,44,.18); }
  50%      { box-shadow: 0 0 0 7px rgba(238,63,44,.06); }
}

.hero__title {
  margin: 22px 0 18px;
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0,0,0,.55);
}
.hero__title .line {
  display: block;
  animation: rise .8s var(--ease-out) both;
}
.hero__title .line:nth-child(1) { animation-delay: .05s; }
.hero__title .line:nth-child(2) { animation-delay: .15s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__lede {
  max-width: 540px;
  margin: 0 0 28px;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--ink-2);
  line-height: 1.5;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
  animation: rise .8s var(--ease-out) both .3s;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: rise .8s var(--ease-out) both .45s;
}

/* glass card bottom-left */
.glass {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(20px, 4vw, 40px);
  z-index: 3;
  width: min(420px, calc(100% - var(--pad-x) * 2));
  padding: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02) 60%);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 24px 60px rgba(0,0,0,.45);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: rise .9s var(--ease-out) forwards 1s;
}
.glass__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 35%);
  mix-blend-mode: screen;
}
.glass__row {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
}
.glass__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #fff;
}
.glass__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.glass__title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}

/* ticker */
.hero__ticker {
  position: absolute;
  right: 0;
  bottom: clamp(20px, 4vw, 40px);
  z-index: 2;
  width: clamp(280px, 36vw, 480px);
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker {
  overflow: hidden;
  padding: 8px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ticker__track {
  display: inline-flex;
  gap: 14px;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
}
.ticker__track span:nth-child(odd) { color: var(--ink-2); }
@keyframes marquee {
  to { transform: translateX(-50%); }
}

@media (max-width: 720px) {
  .hero__inner { padding-top: 96px; }
  .hero__ticker { display: none; }
  .glass {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    padding: 12px;
  }
  .glass__row { gap: 10px; }
  .glass__title { font-size: 13.5px; }
  .glass__label { font-size: 9.5px; }
}

/* ───────────────────── STRIP ───────────────────── */
.strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.strip__inner {
  padding: clamp(40px, 6vw, 80px) var(--pad-x);
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: baseline;
}
.strip__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.strip__text {
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 1000px;
}
.strip__faded { color: var(--ink-3); }

@media (max-width: 720px) {
  .strip__inner { grid-template-columns: 1fr; gap: 12px; }
}

/* ───────────────────── METRICS ───────────────────── */
.metrics {
  padding: clamp(40px, 6vw, 80px) var(--pad-x);
  max-width: 1280px;
  margin: 0 auto;
}
.metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.metric {
  background: var(--bg);
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 1px;
  background: var(--red);
}
.metric__value {
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.metric__value span {
  color: var(--red);
  font-weight: 600;
  font-size: .55em;
  letter-spacing: 0;
}
.metric__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}

@media (max-width: 900px) { .metrics__grid { grid-template-columns: repeat(2, 1fr); } }

/* ───────────────────── SECTION HEADS ───────────────────── */
.section-head {
  padding: 0 var(--pad-x);
  max-width: 1280px;
  margin: 0 auto clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: baseline;
}
.section-head__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.section-head__title {
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}
.section-head__sub {
  grid-column: 2 / -1;
  margin: 14px 0 0;
  max-width: 640px;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; gap: 10px; }
  .section-head__sub { grid-column: auto; }
}

/* ───────────────────── WORK / CARDS ───────────────────── */
.work {
  padding: var(--pad-y) 0;
}
.cards {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}

/* perf: skip rendering of off-screen sections until close to viewport */
.process,
.stack,
.contact,
.foot {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

.card {
  --c: 18px;
  position: relative;
  grid-column: span 3;
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  transition: transform .5s var(--ease-out), border-color .3s, box-shadow .4s;
  cursor: default;
  outline: none;
  contain: layout paint;
  will-change: transform;
  transform: translateZ(0);
}
.card:hover, .card:focus-visible {
  transform: translateY(-6px) translateZ(0);
  border-color: rgba(238,63,44,.35);
  box-shadow:
    0 30px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(238,63,44,.2);
}
/* subtle gradient halo on hover — opacity-only, no per-frame paints */
.card::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(238,63,44,.18), transparent 50%);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  mix-blend-mode: screen;
}
.card:hover::after { opacity: 1; }

.card--xl       { grid-column: span 6; }
.card--featured { background: linear-gradient(180deg, #14080a 0%, #0c0c10 100%); }
.card--mini     { grid-column: span 3; }

@media (max-width: 980px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card, .card--xl, .card--mini { grid-column: span 2; }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .card, .card--xl, .card--mini { grid-column: 1; }
}

.card__index {
  position: absolute;
  top: 16px;
  right: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  z-index: 2;
}

.card__visual {
  position: relative;
  aspect-ratio: 16 / 8;
  width: 100%;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}
.card--xl .card__visual { aspect-ratio: 21 / 8; }

.card__body {
  padding: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.card__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tag {
  padding: 4px 8px;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.tag--live  { border-color: rgba(238,63,44,.5); color: var(--red); background: rgba(238,63,44,.08); }
.tag--ship  { border-color: rgba(255,255,255,.3); }

.card__role {
  margin-left: auto;
  color: var(--ink-3);
}
.card__title {
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  line-height: 1;
}
.card__title span {
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 6px;
  text-transform: lowercase;
  letter-spacing: -0.01em;
}
.card--featured .card__title { font-size: clamp(28px, 3vw, 44px); }
.card__desc {
  margin: 0;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}
.card__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.card__stack li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

/* card links footer */
.card__links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.card__link {
  --c: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line);
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  transition: background .2s, color .2s, transform .2s;
}
.card__link:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-1px);
}
.card__link--primary {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.card__link--primary:hover {
  background: var(--red-hi);
}
.card__code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  padding: 8px 10px;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--line);
  margin-left: auto;
}

/* card screenshot images */
.card__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: .55;
  filter: grayscale(20%) contrast(1.05);
  transition: opacity .5s var(--ease-out), filter .5s var(--ease-out), transform 1.2s var(--ease-out);
}
.card:hover .card__shot {
  opacity: .85;
  filter: grayscale(0) contrast(1.1);
  transform: scale(1.02);
}
.card__shot--full { opacity: .7; }
.card__shot--video {
  z-index: 0;
  opacity: .9;
}

/* overlay versions of decorative SVGs (sit above image) */
.dyno--overlay,
.frames--overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 100%);
}
.dyno--overlay {
  padding: 18px;
  display: flex;
  align-items: flex-end;
}
.dyno--overlay svg { width: 100%; height: 70%; }
.frames--overlay {
  padding: 24px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.7) 100%);
}

/* ── BROWSER WINDOW (iframe-in-card live preview) ── */
.card__visual--xl   { aspect-ratio: 21 / 9; }
.card__visual--mini { aspect-ratio: 16 / 8.5; border-bottom: 1px solid var(--line); }

.browser {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #161618, #0c0c0e);
  overflow: hidden;
}
.browser__chrome {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background:
    linear-gradient(180deg, #2a2a2e 0%, #1c1c1f 100%);
  border-bottom: 1px solid rgba(0,0,0,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.browser__lights {
  display: flex;
  gap: 6px;
}
.browser__lights span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #555;
  box-shadow: inset 0 0 0 .5px rgba(0,0,0,.5);
}
.browser__lights span:nth-child(1) { background: #ff5f57; }
.browser__lights span:nth-child(2) { background: #febc2e; }
.browser__lights span:nth-child(3) { background: #28c840; }

.browser__url {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
  max-width: 560px;
  padding: 5px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.browser__lock {
  color: var(--ink-3);
  font-size: 10px;
}

.browser__expand {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s;
}
.browser__expand:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  transform: scale(1.05);
}

/* viewport scales a 1440×900 iframe down to fit the card */
.browser__viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #0a0a0c;
  isolation: isolate;
}
.browser__frame,
.browser__video-el {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 900px;
  border: 0;
  background: #0a0a0c;
  transform-origin: 0 0;
  transform: scale(0.42) translateZ(0);
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s var(--ease-out);
  will-change: opacity;
  backface-visibility: hidden;
}
.browser__video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  background: #000;
}
.browser__frame.is-loaded,
.browser__video-el { opacity: 1; }

/* skeleton with shimmer */
.browser__skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 50%, transparent 100%) 0 0/200% 100%,
    linear-gradient(180deg, #0e0e12 0%, #07070a 100%);
  animation: shimmer 2.4s linear infinite;
  pointer-events: none;
  transition: opacity .6s var(--ease-out);
}
.browser__frame.is-loaded ~ .browser__skeleton,
.browser:has(.browser__frame.is-loaded) .browser__skeleton {
  opacity: 0;
}
@keyframes shimmer {
  to { background-position: 200% 0, 0 0; }
}

.browser__hint {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  z-index: 5;
}
.card:hover .browser__hint,
.card:focus-within .browser__hint {
  opacity: 1;
  transform: translateY(0);
}

/* whole-visual click affordance */
.card__visual {
  cursor: pointer;
}
.card__visual::before {
  content: '';
  position: absolute;
  inset: 44px 0 0 0; /* below the chrome bar */
  pointer-events: none;
  background: radial-gradient(400px 300px at 50% 50%, rgba(238,63,44,.18), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
  z-index: 4;
  mix-blend-mode: screen;
}
.card:hover .card__visual::before {
  opacity: 1;
}
.card__visual:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* expand button gets bigger / glow on card hover */
.card:hover .browser__expand {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 0 24px rgba(238,63,44,.55);
}

/* fullscreen state — needs !important to beat .card--xl/.card--mini scale rules */
.browser.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000;
  background: #000;
}
.browser.is-fullscreen .browser__chrome {
  height: 44px;
}
.browser.is-fullscreen .browser__viewport {
  background: #fff;
}
.browser.is-fullscreen .browser__frame {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}
.browser.is-fullscreen .browser__video-el {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
}
.browser.is-fullscreen .browser__skeleton,
.browser.is-fullscreen .browser__hint { display: none !important; }
.browser.is-fullscreen .browser__expand {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}

.card--mini .browser__frame { transform: scale(0.32) translateZ(0); }
.card--xl   .browser__frame { transform: scale(0.55) translateZ(0); }

@media (max-width: 980px) {
  .browser__frame             { transform: scale(0.5)  translateZ(0); }
  .card--xl   .browser__frame { transform: scale(0.55) translateZ(0); }
  .card--mini .browser__frame { transform: scale(0.4)  translateZ(0); }
}

/* mobile: cards become tall, iframe gets larger scale + bigger viewport */
@media (max-width: 640px) {
  .card__visual,
  .card__visual--xl,
  .card__visual--mini { aspect-ratio: 4 / 3; }

  .browser__frame,
  .card--xl   .browser__frame,
  .card--mini .browser__frame {
    transform: scale(0.32) translateZ(0);
  }

  .browser__chrome { padding: 7px 10px; gap: 8px; }
  .browser__url    { max-width: 100%; font-size: 10px; padding: 4px 9px; }
  .browser__lights span { width: 9px; height: 9px; }
}

/* ── per-project visuals ─────────────────────────── */

/* 1. ROUTENCE — animated route map */
.card__visual--routence {
  background:
    radial-gradient(800px 300px at 70% 50%, rgba(238,63,44,.18), transparent 60%),
    linear-gradient(180deg, #100608, #06060a);
}
.route-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 24px;
  z-index: 2;
}
.route-map svg { width: 100%; height: 100%; }
.card--featured .card__shot { opacity: .25; mix-blend-mode: luminosity; }
.card--featured:hover .card__shot { opacity: .4; }
.route-map__path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: draw 4s var(--ease-out) infinite alternate;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}
.route-map__pins circle:nth-child(2) {
  animation: blink 1.6s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { transform-origin: center; transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: .55; }
}

/* 2. SEBA — dyno chart */
.card__visual--seba {
  background:
    radial-gradient(500px 200px at 30% 100%, rgba(255,122,26,.18), transparent 60%),
    linear-gradient(180deg, #110a04, #06060a);
}
.dyno { width: 100%; height: 100%; padding: 24px; }
.dyno svg { width: 100%; height: 100%; }
.dyno--overlay svg { width: 100%; height: auto; }

/* 3. TAPICERKI — leather panel */
.card__visual--tapicerki {
  background:
    repeating-linear-gradient(45deg,
      #1a1612 0px, #1a1612 2px, #14110d 2px, #14110d 4px),
    #1a1612;
  position: relative;
}
.leather {
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(232,210,170,.25);
  border-radius: 4px;
}
.leather__stitch {
  position: absolute;
  left: 14px; right: 14px;
  top: 30%;
  border-top: 1.5px dashed rgba(232,210,170,.4);
}
.leather__stitch--2 { top: 70%; }
.leather__label {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232,210,170,.55);
}

/* 4. RUSTSHIP — code preview */
.card__visual--rustship {
  background:
    linear-gradient(180deg, #07090c, #050608);
  align-items: flex-start;
  padding: 0;
}
.code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.65;
  color: #cfd2d6;
  padding: 22px 26px;
  margin: 0;
  white-space: pre;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.code .kw  { color: #ff7a60; }
.code .var { color: #ffd16a; }
.code .cmt { color: rgba(255,255,255,.32); font-style: italic; }
.code .op  { color: var(--red); }

/* 5. YT2MP3 — queue dashboard */
.card__visual--yt2mp3 {
  background:
    radial-gradient(500px 200px at 80% 0%, rgba(155,113,255,.18), transparent 60%),
    linear-gradient(180deg, #0a0814, #06060a);
  padding: 24px;
}
.queue {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.queue__row {
  display: grid;
  grid-template-columns: 14px 80px 1fr 50px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}
.led {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
}
.queue__row--done .led  { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.queue__row--prog .led  { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; animation: blink 1s infinite; }
.queue__row--queue .led { background: rgba(255,255,255,.3); }
.q-id  { color: var(--ink-2); }
.q-bar {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}
.q-bar > span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #9b71ff, #ee3f2c);
  border-radius: 2px;
}
.q-pct { color: var(--ink-3); text-align: right; }

/* 6. HYPERFRAMES — timeline */
.card__visual--hyperframes {
  background:
    linear-gradient(180deg, #0a0a14, #050608);
  padding: 28px;
}
.frames {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-bottom: 14px;
}
.frames__bar {
  flex: 1;
  background: linear-gradient(180deg, var(--red), #6a2cee);
  height: 30%;
  animation: bars 2.4s var(--ease-out) infinite alternate;
}
.frames__bar--1 { animation-delay: 0s;    height: 40%; }
.frames__bar--2 { animation-delay: .1s;   height: 70%; }
.frames__bar--3 { animation-delay: .2s;   height: 55%; }
.frames__bar--4 { animation-delay: .3s;   height: 90%; }
.frames__bar--5 { animation-delay: .4s;   height: 35%; }
.frames__bar--6 { animation-delay: .5s;   height: 65%; }
.frames__bar--7 { animation-delay: .6s;   height: 80%; }
.frames__bar--8 { animation-delay: .7s;   height: 45%; }
@keyframes bars {
  to { transform: scaleY(.4); transform-origin: bottom; }
}
.frames__playhead {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(255,255,255,.1);
}
.frames__playhead::before {
  content: '';
  position: absolute;
  top: -3px; left: 0;
  width: 30%;
  height: 8px;
  background: #fff;
  animation: play 4s linear infinite;
}
@keyframes play {
  to { transform: translateX(233%); }
}

/* ───────────────────── CARD PRICING STRIP ───────────────────── */
.card__pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 4px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.card__price-cell {
  background: rgba(0,0,0,.35);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.card__price-cell span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card__price-cell strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (max-width: 600px) {
  .card__pricing { grid-template-columns: 1fr; }
}

/* ───────────────────── PRICING (cennik) ───────────────────── */
.pricing {
  padding: var(--pad-y) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.pricing__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 1280px) { .pricing__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .pricing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pricing__grid { grid-template-columns: 1fr; } }
.pkg--start { background: linear-gradient(180deg, #0c0c14, #050508); }
.pkg {
  --c: 14px;
  background: var(--bg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  transition: background .3s var(--ease-out);
}
.pkg:hover { background: var(--bg-3); }
.pkg::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 1px;
  background: var(--ink-4);
}
.pkg--featured { background: linear-gradient(180deg, #150a0a 0%, #0a0606 100%); }
.pkg--featured::before { background: var(--red); width: 56px; height: 2px; }
.pkg--featured:hover { background: linear-gradient(180deg, #1c0c0c 0%, #100808 100%); }
.pkg--ent { background: #0a0a0e; }

.pkg__head { display: flex; flex-direction: column; gap: 10px; }
.pkg__tag {
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.pkg__tag--red { color: var(--red); border-color: rgba(238,63,44,.5); background: rgba(238,63,44,.06); }
.pkg__name {
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
}
.pkg__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.pkg__price strong {
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  line-height: 1;
}
.pkg__price span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pkg__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.pkg__list li {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
}
.pkg__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--red);
  font-weight: 700;
}
.pkg__foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pricing__notes {
  max-width: 1280px;
  margin: 24px auto 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.pricing__note {
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.pricing__note strong { color: var(--ink); }
.pricing__note em { color: var(--red); font-style: normal; margin-left: 4px; font-weight: 500; }
.pricing__icon {
  font-family: 'JetBrains Mono', monospace;
  color: var(--red);
  font-size: 16px;
  line-height: 1;
}

@media (max-width: 1100px) {
  .pricing__notes { grid-template-columns: 1fr; }
}

/* ───────── SERVICES (Usługi techniczne) ───────── */
.services {
  padding: var(--pad-y) 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(900px 500px at 100% 100%, rgba(238,63,44,.08), transparent 60%),
    var(--bg);
}
.svc__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.svc {
  background: var(--bg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: background .3s var(--ease-out);
}
.svc:hover { background: var(--bg-3); }
.svc::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 1px;
  background: var(--ink-4);
}
.svc--featured { background: linear-gradient(180deg, #150a0a, #0a0606); }
.svc--featured::before { background: var(--red); width: 56px; height: 2px; }
.svc--db { background: #0a0d0a; }
.svc--security { background: #0d0a0a; }

.svc__head { display: flex; flex-direction: column; gap: 8px; }
.svc__tag {
  display: inline-flex;
  width: fit-content;
  padding: 3px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.svc__tag--red { color: var(--red); border-color: rgba(238,63,44,.5); background: rgba(238,63,44,.06); }
.svc__head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.1;
}
.svc__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  flex: 1;
}
.svc__desc strong { color: var(--red); font-weight: 600; }
.svc__price {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.svc__price strong {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  line-height: 1;
}
.svc__price span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
@media (max-width: 1100px) { .svc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .svc__grid { grid-template-columns: 1fr; } }

/* ───────── DOMENY: payment flow ───────── */
.dom__flow {
  margin-top: 32px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0e0a0a, #0a0a0c);
}
.dom__flow-h {
  margin: 0 0 20px;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.dom__flow-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  counter-reset: step;
}
.dom__flow-list li {
  background: var(--bg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  counter-increment: step;
}
.dom__flow-list li::before {
  content: counter(step) ".";
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--red);
  letter-spacing: 0.1em;
}
.dom__flow-list strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: uppercase;
}
.dom__flow-list span {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.dom__flow-list code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--red);
  background: rgba(238,63,44,.1);
  padding: 1px 4px;
  border-radius: 2px;
}
.dom__renew {
  padding: 16px 18px;
  background: rgba(238,63,44,.06);
  border-left: 3px solid var(--red);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.dom__renew strong:first-of-type { color: var(--red); display: block; margin-bottom: 4px; text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; }
.dom__renew strong { color: var(--ink); }
@media (max-width: 1100px) {
  .dom__flow-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .dom__flow-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .pricing__grid { grid-template-columns: 1fr; }
}

/* ───────────────────── CO ROBIĘ INACZEJ ───────────────────── */
.diff {
  padding: var(--pad-y) 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(238,63,44,.08), transparent 60%),
    var(--bg);
}
.diff__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.diff__cell {
  background: var(--bg);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .3s;
}
.diff__cell:hover { background: var(--bg-3); }
.diff__icon {
  font-size: 22px;
  filter: grayscale(.3);
}
.diff__cell h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
}
.diff__cell p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.diff__cell p strong { color: var(--red); font-weight: 600; }
@media (max-width: 1100px) { .diff__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .diff__grid { grid-template-columns: 1fr; } }

/* ───────────────────── DOMENY ───────────────────── */
.domeny {
  padding: var(--pad-y) 0;
  border-top: 1px solid var(--line);
  position: relative;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(238,63,44,.10), transparent 60%),
    var(--bg);
}
.dom {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.dom__form {
  --c: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 32px;
}
.dom__input-wrap {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  padding: 0 16px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  transition: border-color .25s, background .25s;
}
.dom__input-wrap:focus-within {
  border-color: var(--red);
  background: rgba(238,63,44,.05);
}
.dom__prefix,
.dom__sld {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.dom__prefix { padding-right: 4px; }
.dom__sld    { padding-left: 12px; color: var(--ink-2); }
.dom__input {
  width: 100%;
  padding: 22px 0;
  font-family: 'Rubik', sans-serif;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--ink);
}
.dom__input::placeholder { color: rgba(255,255,255,.3); }
.dom__btn {
  padding: 22px 28px;
  font-size: 14px;
}

.dom__results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  min-height: 80px;
}
.dom__hint {
  grid-column: 1 / -1;
  padding: 18px 22px;
  border: 1px dashed var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dom__hint span { color: var(--red); }
.dom__hint-hurt {
  color: #FFC107 !important;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.dom__row.is-wholesale {
  border-color: rgba(255, 193, 7, 0.32) !important;
  background: linear-gradient(90deg, rgba(255, 193, 7, 0.05), var(--bg-3) 40%);
}
.dom__row.is-wholesale .dom__name strong { color: #FFC107; }
.dom__row.is-wholesale .dom__name s {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
  margin-left: 6px;
}
.dom__hurt {
  display: inline-block;
  background: #FFC107;
  color: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
}

.dom__row {
  --c: 10px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  transition: border-color .25s, background .25s, transform .25s;
}
.dom__row.is-available {
  border-color: rgba(74,222,128,.3);
}
.dom__row.is-taken {
  opacity: .55;
}
.dom__row.is-unknown {
  border-color: rgba(255,255,255,.08);
}
.dom__row:hover { transform: translateY(-2px); }

.dom__tld {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  min-width: 50px;
}
.dom__name {
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.dom__name small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.dom__row.is-available .dom__name small { color: #4ade80; }
.dom__row.is-taken     .dom__name small { color: var(--ink-3); }
.dom__row.is-unknown   .dom__name small { color: #fbbf24; }
.dom__buy {
  --c: 8px;
  padding: 9px 14px;
  font-family: 'Rubik', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  border: 0;
  cursor: pointer;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  transition: background .2s, transform .2s;
  white-space: nowrap;
}
.dom__buy:hover { background: var(--red-hi); transform: translateY(-1px); }
.dom__buy[disabled] {
  background: rgba(255,255,255,.06);
  color: var(--ink-3);
  cursor: not-allowed;
}
.dom__buy strong { font-weight: 700; }
.dom__buy small { font-weight: 400; opacity: .8; margin-left: 4px; }

.dom__pricing {
  margin-top: 40px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.dom__pricing-h {
  margin: 0 0 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.dom__price-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
.dom__price {
  background: var(--bg);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dom__price .tld {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.dom__price strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dom__included {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.dom__included li::first-letter { color: var(--red); margin-right: 6px; }

@media (max-width: 1100px) {
  .dom__price-grid { grid-template-columns: repeat(4, 1fr); }
  .dom__included   { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dom__form { grid-template-columns: 1fr; }
  .dom__results, .dom__price-grid { grid-template-columns: 1fr; }
  .dom__sld { display: none; }
}

/* ───────────────────── PROCESS ───────────────────── */
.process {
  padding: var(--pad-y) 0;
  border-top: 1px solid var(--line);
}
.steps {
  list-style: none;
  margin: 0;
  padding: 0 var(--pad-x);
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--line);
}
.step {
  background: var(--bg);
  padding: clamp(22px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: background .3s;
}
.step:hover { background: var(--bg-3); }
.step__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.step__title {
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  line-height: 1.05;
}
.step__body {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

/* ───────────────────── STACK ───────────────────── */
.stack {
  padding: var(--pad-y) 0;
  border-top: 1px solid var(--line);
}
.stack__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
}
.stack__col ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
}
.stack__col li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}
.stack__col li:last-child { border-bottom: 1px solid var(--line); }
.stack__head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
@media (max-width: 900px) { .stack__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .stack__grid { grid-template-columns: 1fr; } }

/* ───────────────────── CONTACT ───────────────────── */
.contact {
  position: relative;
  padding: var(--pad-y) var(--pad-x);
  border-top: 1px solid var(--line);
  background:
    radial-gradient(1000px 500px at 80% 0%, rgba(238,63,44,.16), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(255,255,255,.03), transparent 60%),
    var(--bg);
  overflow: hidden;
}
.contact__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
}
.contact__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.contact__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.contact__title {
  margin: 16px 0 12px;
  font-size: clamp(56px, 9vw, 132px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.contact__sub {
  max-width: 560px;
  margin: 0 0 36px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.55;
}
.contact__row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: end;
}
.contact__cta {
  --c: 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 28px 32px;
  background: var(--red);
  color: #fff;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  transition: background .25s var(--ease-out);
}
.contact__cta:hover { background: var(--red-hi); }
.contact__cta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: .8;
}
.contact__cta-value {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}
.contact__cta-arrow {
  font-size: 28px;
  transition: transform .3s var(--ease-out);
}
.contact__cta:hover .contact__cta-arrow { transform: translateX(8px); }

.contact__meta {
  display: grid;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.contact__meta > div {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contact__meta > div:last-child { border-bottom: 1px solid var(--line); }
.contact__meta span    { color: var(--ink-3); }
.contact__meta strong  { color: var(--ink); font-weight: 500; }

@media (max-width: 760px) {
  .contact__row { grid-template-columns: 1fr; }
  .contact__cta { grid-template-columns: 1fr auto; padding: 22px; }
  .contact__cta-label { grid-column: 1 / -1; }
}

/* ───────────────────── FOOTER ───────────────────── */
.foot {
  padding: 32px var(--pad-x) 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.foot__row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.foot__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
}
.foot__logo { width: 18px; height: 18px; color: #fff; }

.foot__big {
  margin-top: 24px;
  font-family: 'Rubik', sans-serif;
  font-size: clamp(80px, 22vw, 320px);
  font-weight: 900;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  line-height: 0.85;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.12);
  user-select: none;
  white-space: nowrap;
  transform: translateY(15%);
}

/* ───────────────────── PAGES (subpages) ───────────────────── */
.page { padding-top: 96px; }
.page__head {
  max-width: 1280px;
  margin: 0 auto clamp(28px, 4vw, 56px);
  padding: clamp(48px, 6vw, 80px) var(--pad-x) clamp(28px, 3vw, 48px);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--red); }
.crumbs strong { color: var(--ink); font-weight: 500; }
.page__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.page__title {
  margin: 0 0 18px;
  font-size: clamp(40px, 6vw, 88px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.page__sub {
  margin: 0;
  max-width: 720px;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
}
.page__sub strong { color: var(--ink); font-weight: 600; }
.page__cta-strip {
  max-width: 1280px;
  margin: clamp(40px, 5vw, 80px) auto;
  padding: clamp(28px, 4vw, 56px) var(--pad-x);
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(600px 200px at 50% 50%, rgba(238,63,44,.08), transparent 70%);
}
.page__cta-strip h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.page__cta-strip p {
  margin: 0 0 22px;
  color: var(--ink-2);
  font-size: 15px;
}

/* mega active state */
.mega__active {
  color: var(--red) !important;
  background: rgba(238,63,44,.08);
}

/* KONTAKT page */
.kont {
  max-width: 1100px;
  margin: 0 auto clamp(40px, 6vw, 80px);
  padding: 0 var(--pad-x);
}
.kont__cta {
  --c: 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 28px 32px;
  margin-bottom: 36px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: background .25s var(--ease-out);
}
.kont__cta:hover { background: var(--red-hi); }
.kont__cta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: .85;
}
.kont__cta-value {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.kont__cta-arrow {
  font-size: 28px;
  transition: transform .3s var(--ease-out);
}
.kont__cta:hover .kont__cta-arrow { transform: translateX(8px); }

.kont__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 36px;
}
.kont__cell {
  background: var(--bg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.kont__cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 1px;
  background: var(--red);
}
.kont__h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.kont__cell strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 2px;
}
.kont__cell span {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
}

.kont__faq {
  border: 1px solid var(--line);
  background: var(--bg-3);
  padding: 16px 20px;
  margin-bottom: 8px;
}
.kont__faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.kont__faq summary::after {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  color: var(--red);
  transition: transform .25s;
}
.kont__faq[open] summary::after { transform: rotate(45deg); }
.kont__faq[open] { border-color: rgba(238,63,44,.3); }
.kont__faq div { padding-top: 12px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.kont__faq p { margin: 0 0 10px; }

@media (max-width: 900px) { .kont__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .kont__grid { grid-template-columns: 1fr; } }

/* utility */
.domeny--bare { border: 0; padding-top: 0; }
.section-head--tight { padding-bottom: 12px; }

/* ─────── DOMENY: live stats banner ─────── */
.dom-stats {
  max-width: 1280px;
  margin: 0 auto clamp(20px, 3vw, 36px);
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.dom-stat {
  background: var(--bg);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.dom-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 1px;
  background: var(--red);
}
.dom-stat__num {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dom-stat__num i { font-style: normal; color: var(--red); font-size: .55em; font-weight: 600; margin-left: 2px; }
.dom-stat__lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.45;
}
@media (max-width: 900px) { .dom-stats { grid-template-columns: repeat(2, 1fr); } }

/* ─────── TLD pill selector ─────── */
.dom-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.dom-pills__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}
.dom-pill {
  --c: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s var(--ease-out);
}
.dom-pill:hover {
  color: var(--ink);
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.dom-pill em {
  font-style: normal;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0;
}
.dom-pill.is-on {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}
.dom-pill.is-on em { color: rgba(255,255,255,.8); }
.dom-pills__toggle {
  margin-left: auto;
  padding: 7px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: transparent;
  border: 1px dashed var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.dom-pills__toggle:hover { color: var(--red); border-color: rgba(238,63,44,.5); }

/* ─────── Domain anatomy infographic ─────── */
.dom-anatomy {
  margin: 22px 0;
  padding: 22px;
  background:
    radial-gradient(500px 200px at 50% 0%, rgba(238,63,44,.06), transparent 70%),
    var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.dom-anatomy__h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.dom-anatomy__demo {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: baseline;
  color: var(--ink);
  padding: 14px 6px 28px;
}
.dom-anat-part {
  position: relative;
  padding: 4px 6px;
  border-radius: 4px;
  transition: background .2s;
  white-space: nowrap;
}
.dom-anat-part:hover { background: rgba(238,63,44,.12); }
.dom-anat-part--proto { color: var(--ink-3); }
.dom-anat-part--sub   { color: var(--ink-2); }
.dom-anat-part--sld   { color: #fff; background: rgba(238,63,44,.18); }
.dom-anat-part--tld   { color: var(--red); background: rgba(238,63,44,.12); }
.dom-anat-part--path  { color: var(--ink-3); }
.dom-anat-dot { color: var(--ink-3); padding: 0 1px; }
.dom-anat-tag {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  opacity: 0.85;
}
.dom-anat-part--sld .dom-anat-tag { color: var(--ink); }
.dom-anat-part--tld .dom-anat-tag { color: var(--red); }
.dom-anatomy__note {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.dom-anatomy__note strong { color: var(--red); font-weight: 600; }
@media (max-width: 720px) {
  .dom-anatomy__demo { font-size: 16px; padding-bottom: 36px; }
  .dom-anat-tag { font-size: 9px; }
}

/* ─────── Bundle calculator ─────── */
.dom-bundle {
  margin: 24px 0 32px;
  padding: 22px;
  background: linear-gradient(180deg, #0e0a0a, #0a0a0c);
  border: 1px solid rgba(238,63,44,.18);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.dom-bundle::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.dom-bundle__head { margin-bottom: 16px; }
.dom-bundle__h {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dom-bundle__sub {
  font-size: 14px;
  color: var(--ink-2);
}
.dom-bundle__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.dom-bundle__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all .25s var(--ease-out);
}
.dom-bundle__item:hover {
  background: rgba(238,63,44,.04);
  border-color: rgba(238,63,44,.3);
}
.dom-bundle__item input {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
  cursor: pointer;
}
.dom-bundle__item input:disabled { cursor: not-allowed; opacity: .8; }
.dom-bundle__item strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.dom-bundle__item span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.dom-bundle__item em {
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}
.dom-bundle__item.is-base {
  background: rgba(238,63,44,.06);
  border-color: rgba(238,63,44,.3);
}
.dom-bundle__item.is-base em { color: var(--ink); }
.dom-bundle__item:has(input:checked) {
  background: rgba(74,222,128,.06);
  border-color: rgba(74,222,128,.3);
}

.dom-bundle__total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(238,63,44,.10), rgba(238,63,44,.02));
  border: 1px solid rgba(238,63,44,.3);
  border-radius: 10px;
}
.dom-bundle__total-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dom-bundle__total strong {
  display: block;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
  transition: transform .25s var(--ease-out);
}
.dom-bundle__total small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
}
.dom-bundle__cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.dom-bundle__hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .dom-bundle__grid { grid-template-columns: 1fr; }
  .dom-bundle__total { grid-template-columns: 1fr; }
  .dom-bundle__cta { align-items: stretch; }
}

/* ─────── 3-col compare table ─────── */
.dom-compare3 {
  padding: clamp(40px, 5vw, 80px) 0;
  border-top: 1px solid var(--line);
}
.cmp3 {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cmp3__row {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
/* 3-col variant (anonimowo) */
.cmp3--3col .cmp3__row { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 900px) {
  .cmp3--3col .cmp3__row { grid-template-columns: 1.4fr 1fr 1fr; }
  .cmp3--3col .cmp3__row > div:nth-child(3) { display: none; }
}
.cmp3__row > div {
  background: var(--bg);
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.cmp3__row--head > div {
  background: var(--bg-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.cmp3__lbl {
  font-weight: 500;
  color: var(--ink) !important;
}
.cmp3__row > div small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
}
.cmp3__me {
  background: rgba(238,63,44,.08) !important;
  color: var(--ink) !important;
  font-weight: 600;
}
.cmp3__row--head .cmp3__me { color: var(--red) !important; }
.cmp3__row--total > div {
  background: rgba(238,63,44,.04);
  border-top: 2px solid var(--red);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  padding-top: 14px;
}
.cmp3__row--total .cmp3__me { background: rgba(238,63,44,.18) !important; }
.cmp3__note {
  max-width: 1280px;
  margin: 18px auto 0;
  padding: 14px 20px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
  border-left: 3px solid var(--red);
  background: rgba(238,63,44,.04);
}
.cmp3__note strong { color: var(--ink); }
.cmp3__note em { color: var(--red); font-style: normal; }

/* SAVINGS highlight panel */
.cmp3-saving {
  max-width: 1280px;
  margin: 24px auto 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}
.cmp3-saving__cell {
  --c: 14px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(74,222,128,.10), rgba(74,222,128,.02));
  border: 1px solid rgba(74,222,128,.3);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
}
.cmp3-saving__cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 1px;
  background: #4ade80;
}
.cmp3-saving__lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}
.cmp3-saving__num {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmp3-saving__num strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4ade80;
  font-weight: 600;
}
.cmp3-saving__num span {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cmp3-saving__pct {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: 0.04em;
  background: rgba(74,222,128,.1);
  padding: 4px 8px;
  border-radius: 4px;
}
.cmp3-saving__cell--bonus {
  background: linear-gradient(180deg, rgba(238,63,44,.08), rgba(238,63,44,.02));
  border-color: rgba(238,63,44,.3);
}
.cmp3-saving__cell--bonus::before { background: var(--red); }
.cmp3-saving__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.cmp3-saving__list span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--red);
  padding: 4px 9px;
  background: rgba(238,63,44,.10);
  border: 1px solid rgba(238,63,44,.2);
  border-radius: 4px;
}
@media (max-width: 900px) { .cmp3-saving { grid-template-columns: 1fr; } }

/* ─────── SSL EXPLAINER ─────── */
.dom-ssl {
  padding: clamp(40px, 5vw, 80px) 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(74,222,128,.06), transparent 60%),
    var(--bg);
}
.ssl-flow {
  max-width: 1280px;
  margin: 0 auto 32px;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(10px, 1.4vw, 18px);
  align-items: stretch;
}
.ssl-flow__step {
  --c: 12px;
  padding: 20px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
}
.ssl-flow__num {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: 'Rubik', sans-serif;
  font-size: 36px;
  font-weight: 800;
  color: rgba(74,222,128,.25);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.ssl-flow__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ssl-flow__desc {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.ssl-flow__desc strong { color: #4ade80; font-weight: 600; }
.ssl-flow__arrow {
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--red);
  font-weight: 600;
}
@media (max-width: 1100px) {
  .ssl-flow { grid-template-columns: 1fr; }
  .ssl-flow__arrow { transform: rotate(90deg); padding: 4px 0; }
}

.ssl-options {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.ssl-opt {
  --c: 14px;
  padding: 22px 22px 18px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  transition: background .25s, transform .35s var(--ease-out);
}
.ssl-opt:hover { transform: translateY(-3px); background: #15151a; }
.ssl-opt--default {
  background: linear-gradient(180deg, #0a1108, #0a0a0c);
  border-color: rgba(74,222,128,.3);
}
.ssl-opt__tag {
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--line);
}
.ssl-opt--default .ssl-opt__tag {
  color: #4ade80;
  border-color: rgba(74,222,128,.4);
  background: rgba(74,222,128,.06);
}
.ssl-opt h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.ssl-opt p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.ssl-opt p strong { color: var(--ink); font-weight: 600; }
.ssl-opt p code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--red);
  background: rgba(238,63,44,.1);
  padding: 1px 5px;
  border-radius: 3px;
}
.ssl-opt ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.ssl-opt li strong { color: var(--ink); font-weight: 600; }

@media (max-width: 1100px) { .ssl-options { grid-template-columns: 1fr; } }

.ssl-myth {
  max-width: 1280px;
  margin: 32px auto 0;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 16px;
  background: rgba(238,63,44,.06);
  border: 1px solid rgba(238,63,44,.2);
  border-radius: 12px;
}
.ssl-myth__icon { font-size: 24px; color: var(--red); }
.ssl-myth strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 4px;
}
.ssl-myth div span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.ssl-myth strong:not(:first-of-type) {
  display: inline;
  font-family: 'Rubik', sans-serif;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 900px) {
  .cmp3__row { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .cmp3__row > div:nth-child(3),
  .cmp3__row > div:nth-child(4) { display: none; }
}

/* ─────── Premium marketplace ─────── */
.dom-market {
  padding: clamp(40px, 5vw, 80px) 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(238,63,44,.06), transparent 60%),
    var(--bg);
}
.dom-market__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
}
.market-card {
  --c: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: transform .35s var(--ease-out), background .25s;
}
.market-card:hover {
  transform: translateY(-3px);
  background: #15151a;
}
.market-card--featured {
  background: linear-gradient(180deg, rgba(238,63,44,.08), rgba(238,63,44,.02));
  border-color: rgba(238,63,44,.3);
}
.market-card__tld {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
}
.market-card--featured .market-card__tld { color: var(--ink); }
.market-card__name {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  word-break: break-all;
}
.market-card__name span { color: var(--ink-3); font-weight: 500; }
.market-card__age {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.market-card__price {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.market-card__price strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: var(--tracking-tight);
}
.market-card__price span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.market-card__tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--red);
  padding: 4px 8px;
  background: rgba(238,63,44,.08);
  border-radius: 4px;
  align-self: flex-start;
}
.market-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  max-width: 1280px;
  margin: 18px auto 0;
  padding: 18px 22px;
  background: var(--bg-3);
  border: 1px dashed var(--line);
  text-decoration: none;
  font-size: 14px;
  color: var(--ink-2);
  transition: border-color .25s, background .25s;
}
.market-cta em {
  font-style: normal;
  font-size: 22px;
  color: var(--red);
  font-weight: 600;
  transition: transform .25s var(--ease-out);
}
.market-cta:hover { border-color: var(--red); background: rgba(238,63,44,.04); }
.market-cta:hover em { transform: translateX(6px); }

@media (max-width: 1100px) {
  .dom-market__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dom-market__grid { grid-template-columns: 1fr; }
}

/* ─────── FAQ ─────── */
.dom-faq {
  padding: clamp(40px, 5vw, 80px) 0;
  border-top: 1px solid var(--line);
}
.dom-faq__list {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dom-faq__item {
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 16px 22px;
  border-radius: 12px;
  transition: border-color .25s, background .25s;
}
.dom-faq__item[open] {
  border-color: rgba(238,63,44,.4);
  background: linear-gradient(180deg, #150a0a, #0a0a0c);
}
.dom-faq__item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.dom-faq__item summary::after {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  color: var(--red);
  transition: transform .3s var(--ease-out);
  flex-shrink: 0;
}
.dom-faq__item[open] summary::after { transform: rotate(45deg); }
.dom-faq__item div {
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}
.dom-faq__item p { margin: 0 0 10px; }
.dom-faq__item p:last-child { margin-bottom: 0; }
.dom-faq__item p strong { color: var(--ink); font-weight: 600; }

/* ─────── Trust badges ─────── */
.dom-trust {
  padding: clamp(40px, 5vw, 80px) var(--pad-x);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.dom-trust__row {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.dom-trust__badge {
  background: var(--bg);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  transition: background .25s;
}
.dom-trust__badge:hover { background: var(--bg-3); }
.dom-trust__icon {
  font-size: 24px;
  margin-bottom: 4px;
  filter: grayscale(.2);
}
.dom-trust__badge strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.dom-trust__badge span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  line-height: 1.4;
}
@media (max-width: 1100px) {
  .dom-trust__row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .dom-trust__row { grid-template-columns: repeat(2, 1fr); }
}

/* DOMENY: comparison table */
.dom__compare {
  margin-top: 32px;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0d0808, #0a0a0c);
}
.dom__compare-lead {
  margin: 0 0 18px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.dom__compare-lead strong { color: var(--red); }
.dom__compare-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: rgba(74,222,128,.06);
  border-left: 3px solid #4ade80;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cmp th, .cmp td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.cmp th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.cmp__me {
  color: var(--ink) !important;
  font-weight: 600;
  background: rgba(238,63,44,.06);
}
.cmp__total td {
  border-top: 2px solid var(--red);
  padding-top: 14px;
  font-size: 14.5px;
}
.cmp__total td:first-child { color: var(--ink); }

/* ───────────────────── MORE-CTA strip ───────────────────── */
.more-cta {
  max-width: 1280px;
  margin: clamp(20px, 2.5vw, 40px) auto 0;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.more-cta__link {
  --c: 0;
  background: var(--bg);
  padding: 22px 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  position: relative;
  transition: background .25s var(--ease-out);
}
.more-cta__link::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 1px;
  background: var(--red);
  transition: width .35s var(--ease-out);
}
.more-cta__link:hover { background: var(--bg-3); }
.more-cta__link:hover::before { width: 100%; }
.more-cta__link strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.more-cta__link span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 2px;
}
.more-cta__link em {
  font-style: normal;
  font-size: 28px;
  color: var(--red);
  font-weight: 600;
  transition: transform .3s var(--ease-out);
}
.more-cta__link:hover em { transform: translateX(8px); }

/* ───────────────────── PANEL klienta ───────────────────── */
.panel-login {
  max-width: 1280px;
  margin: 0 auto clamp(40px, 5vw, 80px);
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}
.panel-login__card {
  --c: 18px;
  padding: clamp(28px, 3.4vw, 48px);
  background: linear-gradient(180deg, #15090a 0%, #0a0a0c 100%);
  border: 1px solid rgba(238,63,44,.3);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  position: relative;
}
.panel-login__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 2px;
  background: var(--red);
}
.panel-login__h {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.panel-login__card h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1;
}
.panel-login__card > p {
  margin: 0 0 24px;
  color: var(--ink-2);
  font-size: 14.5px;
}
.panel-login__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.panel-login__form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.panel-login__form input {
  padding: 14px 16px;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  background: rgba(0,0,0,.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: border-color .25s, background .25s;
}
.panel-login__form input:focus {
  outline: none;
  border-color: var(--red);
  background: rgba(238,63,44,.04);
}
.panel-login__form button {
  margin-top: 6px;
  padding: 16px;
  width: 100%;
  justify-content: center;
}
.panel-login__forgot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--red);
  text-decoration: none;
  margin-top: 4px;
  align-self: flex-start;
  letter-spacing: 0.04em;
}
.panel-login__forgot:hover { text-decoration: underline; }
.panel-login__alt {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
}
.panel-login__alt a { color: var(--red); text-decoration: underline; }

.panel-login__perks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel-login__perk {
  position: relative;
  padding: 18px 22px 18px 60px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.panel-login__perk-num {
  position: absolute;
  top: 18px;
  left: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.04em;
}
.panel-login__perk strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.panel-login__perk span {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}
@media (max-width: 900px) { .panel-login { grid-template-columns: 1fr; } }

/* DASHBOARD */
.panel-dash {
  max-width: 1280px;
  margin: 0 auto clamp(40px, 5vw, 80px);
  padding: 0 var(--pad-x);
}
.panel-dash__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.panel-dash__crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.panel-dash__head h2 {
  margin: 4px 0 0;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.panel-dash__head h2 em { color: var(--red); font-style: normal; }
.panel-dash__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.panel-dash__avatar {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 13px;
  border-radius: 50%;
}
.panel-dash__user strong {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
}
.panel-dash__user span {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
}

.panel-dash__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dash-card {
  --c: 12px;
  padding: 18px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: background .25s;
}
.dash-card:hover { background: #15151a; }
.dash-card--span2 { grid-column: span 2; }
.dash-card--full  { grid-column: 1 / -1; }
.dash-card__h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.dash-card__h a {
  color: var(--red);
  text-decoration: none;
  font-size: 10.5px;
}
.dash-card__h a:hover { text-decoration: underline; }
.dash-stat-num {
  font-size: clamp(36px, 3.6vw, 48px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  line-height: 1;
}
.dash-stat-num small {
  font-size: .55em;
  font-weight: 600;
  color: var(--red);
}
.dash-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: -4px;
}

.dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dash-list li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,.3);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}
.dash-list__tld {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
  padding: 3px 8px;
  background: rgba(238,63,44,.1);
  border-radius: 4px;
  min-width: 48px;
  text-align: center;
}
.dash-list strong { color: var(--ink); font-weight: 600; }
.dash-list__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.dash-list__badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.dash-list__badge--ok   { color: #4ade80; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.3); }
.dash-list__badge--warn { color: #fbbf24; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); }

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dash-table th, .dash-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.dash-table th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.dash-table td { color: var(--ink-2); }
.dash-table td:first-child { font-family: 'JetBrains Mono', monospace; color: var(--ink); font-size: 12px; }
.dash-table a { color: var(--red); text-decoration: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; }
.dash-table a:hover { text-decoration: underline; }

@media (max-width: 1100px) { .panel-dash__grid { grid-template-columns: repeat(2, 1fr); } .dash-card--span2 { grid-column: 1 / -1; } }
@media (max-width: 600px)  { .panel-dash__grid { grid-template-columns: 1fr; } .dash-card--span2, .dash-card--full { grid-column: 1; } }

/* ARCHITECTURE diagram */
.panel-arch {
  padding: clamp(40px, 5vw, 80px) 0;
  background:
    radial-gradient(800px 400px at 0% 0%, rgba(238,63,44,.06), transparent 60%),
    var(--bg);
}
.arch-diagram {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.arch-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.arch-row--3 { grid-template-columns: repeat(3, 1fr); }
.arch-row--4 { grid-template-columns: repeat(4, 1fr); }
.arch-box {
  --c: 10px;
  padding: 16px 18px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  font-family: 'Rubik', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: background .25s, border-color .25s, transform .25s;
}
.arch-box:hover { transform: translateY(-2px); background: #15151a; }
.arch-box small {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 2px;
}
.arch-box--cf     { background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); }
.arch-box--vps    { background: linear-gradient(180deg, #15090a, #0a0a0c); border-color: rgba(238,63,44,.4); }
.arch-box--accent { background: linear-gradient(180deg, #15090a, #0a0a0c); border-color: rgba(238,63,44,.6); color: var(--red); }
.arch-box--svc strong { color: var(--red); }
.arch-box--db {
  background: linear-gradient(180deg, #08130d, #0a0a0c);
  border-color: rgba(74,222,128,.3);
}
.arch-box--db small { color: rgba(74,222,128,.7); }
.arch-arrow {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  color: var(--red);
  font-size: 14px;
  margin: 2px 0;
}
@media (max-width: 800px) {
  .arch-row--3, .arch-row--4 { grid-template-columns: 1fr 1fr; }
}

/* HETZNER cards */
.panel-hetzner {
  padding: clamp(40px, 5vw, 80px) 0;
  border-top: 1px solid var(--line);
}
.het-grid {
  max-width: 1280px;
  margin: 0 auto 40px;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.het-card {
  --c: 14px;
  padding: 26px 24px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: background .25s, transform .35s var(--ease-out);
}
.het-card:hover { transform: translateY(-3px); background: #15151a; }
.het-card--featured {
  background: linear-gradient(180deg, rgba(238,63,44,.08), rgba(238,63,44,.02));
  border-color: rgba(238,63,44,.4);
}
.het-card__sku {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--red);
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(238,63,44,.1);
  border-radius: 4px;
  align-self: flex-start;
}
.het-card h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--ink);
}
.het-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.het-card li {
  padding-left: 16px;
  position: relative;
}
.het-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--red);
  font-weight: 700;
}
.het-card__price {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.het-card__price strong {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.het-card__price span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  margin-left: 4px;
}
.het-card__cost {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.het-volumes {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.het-volumes h3 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.het-vol-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.het-vol {
  background: var(--bg);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.het-vol strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.het-vol span {
  font-size: 13px;
  color: var(--red);
  font-weight: 600;
}
.het-vol__note {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.het-vol__note strong { color: var(--ink); }

@media (max-width: 1100px) { .het-grid { grid-template-columns: 1fr; } .het-vol-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .het-vol-grid { grid-template-columns: repeat(2, 1fr); } }

/* SERVER PROVISIONING MODAL */
.dash-card__action {
  background: transparent;
  border: 0;
  color: var(--red);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background .2s;
}
.dash-card__action:hover { background: rgba(238,63,44,.1); }

.srvmodal {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.srvmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.srvmodal__panel {
  --c: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(.94);
  width: min(820px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: linear-gradient(180deg, #0c0c10 0%, #060608 100%);
  border: 1px solid var(--line);
  box-shadow: 0 60px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(238,63,44,.12);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity .35s var(--ease-out), transform .42s cubic-bezier(.34,1.4,.42,1);
}
.srvmodal.is-open { pointer-events: auto; }
.srvmodal.is-open .srvmodal__backdrop { opacity: 1; }
.srvmodal.is-open .srvmodal__panel { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.srvmodal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.srvmodal__head::after { content:''; position: absolute; bottom: -1px; left: 22px; width: 32px; height: 1px; background: var(--red); }
.srvmodal__head strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.srvmodal__head span { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
.srvmodal__close { width: 36px; height: 36px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 22px; cursor: pointer; transition: all .25s; }
.srvmodal__close:hover { background: var(--red); border-color: var(--red); transform: rotate(90deg); }

.srvmodal__body { flex: 1; overflow-y: auto; padding: 22px; }
.srvstep { display: none; }
.srvstep.is-active { display: block; animation: srvstep-in .35s var(--ease-out); }
@keyframes srvstep-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.srvstep h3 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: var(--tracking-tight); text-transform: uppercase; }
.srvstep__hint { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.srvstep__hint strong { color: var(--ink); font-weight: 600; }

.srvloc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.srvloc {
  --c: 10px;
  padding: 18px 16px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  transition: all .25s var(--ease-out);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.srvloc:hover { background: rgba(238,63,44,.06); border-color: rgba(238,63,44,.4); transform: translateY(-2px); }
.srvloc.is-selected { background: rgba(238,63,44,.15); border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 8px 20px rgba(238,63,44,.15); }
.srvloc__flag { grid-row: 1 / 3; font-size: 28px; line-height: 1; align-self: center; }
.srvloc__city { font-size: 15px; font-weight: 700; color: var(--ink); }
.srvloc__zone { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.srvloc__avail { grid-column: 2 / -1; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-3); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.srvloc__extra {
  grid-row: 1;
  grid-column: 3;
  align-self: start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(74,222,128,.1);
  color: #4ade80;
  white-space: nowrap;
}
.srvloc__extra--up { color: var(--red); background: rgba(238,63,44,.1); }
.srvloc--loading { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }
@media (max-width: 720px) { .srvloc-grid { grid-template-columns: 1fr 1fr; } }

/* SRVGROUP — kategorie (Shared / Dedicated) */
.srvtier-list { display: flex; flex-direction: column; gap: 18px; }
.srvgroup {
  --c: 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  overflow: hidden;
}
.srvgroup__head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(238,63,44,.04), transparent);
}
.srvgroup__cat {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.srvgroup__cat strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--ink);
}
.srvgroup__parent {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.srvgroup__parent--shared { color: var(--ink-3); border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.srvgroup__parent--dedicated { color: #4ade80; border: 1px solid rgba(74,222,128,.3); background: rgba(74,222,128,.06); }
.srvgroup__desc {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.srvgroup__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.srvgroup__pills span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-2);
}
.srvgroup__arch {
  color: var(--red) !important;
  border-color: rgba(238,63,44,.3) !important;
  background: rgba(238,63,44,.06) !important;
}

.srvtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.srvtable thead th {
  text-align: left;
  padding: 10px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  background: rgba(0,0,0,.3);
  border-bottom: 1px solid var(--line);
}
.srvtable thead th:last-child { text-align: right; }
.srvtable__row {
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.srvtable__row td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.srvtable__row td:last-child { text-align: right; }
.srvtable__row td small { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); }
.srvtable__row strong { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.srvtable__row:hover { background: rgba(238,63,44,.04); }
.srvtable__row.is-selected { background: rgba(238,63,44,.10); position: relative; }
.srvtable__row.is-selected::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
}
.srvtable__sku {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  background: rgba(238,63,44,.1);
  color: var(--red);
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .srvtable thead th:nth-child(4),
  .srvtable thead th:nth-child(5),
  .srvtable thead th:nth-child(6),
  .srvtable td:nth-child(4),
  .srvtable td:nth-child(5),
  .srvtable td:nth-child(6) { display: none; }
}

.srvos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.srvos {
  --c: 8px;
  padding: 14px 16px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .25s var(--ease-out);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.srvos:hover { background: rgba(238,63,44,.06); border-color: rgba(238,63,44,.4); }
.srvos.is-selected { background: rgba(238,63,44,.15); border-color: var(--red); }
.srvos strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.srvos span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.04em; }
@media (max-width: 720px) { .srvos-grid { grid-template-columns: 1fr 1fr; } }

.srvconfirm { display: flex; flex-direction: column; gap: 16px; }
.srvfield { display: flex; flex-direction: column; gap: 6px; }
.srvfield > span { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.srvfield input, .srvfield textarea {
  padding: 12px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: rgba(0,0,0,.5);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  resize: vertical;
}
.srvfield input:focus, .srvfield textarea:focus { outline: none; border-color: var(--red); }
.srvfield small { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.02em; }

.srvsummary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid rgba(238,63,44,.3);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 6px;
}
.srvsummary > div {
  background: rgba(238,63,44,.04);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.srvsummary > div span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.srvsummary > div strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.srvsummary__total { grid-column: 1 / -1; background: rgba(238,63,44,.12) !important; }
.srvsummary__total strong { font-size: 22px !important; color: var(--red) !important; letter-spacing: var(--tracking-tight); }

.srvdone {
  text-align: center;
  padding: 32px 16px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
}
.srvdone__creds {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(74,222,128,.06);
  border: 1px solid rgba(74,222,128,.3);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.srvdone__creds dt { color: var(--ink-3); }
.srvdone__creds dd { color: var(--ink); margin: 0; font-weight: 600; word-break: break-all; }

.srvmodal__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-top: 1px solid var(--line);
}
.srvmodal__foot #srv-back { justify-self: start; }
.srvmodal__foot #srv-next { justify-self: end; }
.srvmodal__progress { display: flex; gap: 6px; }
.srvmodal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s; }
.srvmodal__dot.is-on { background: var(--red); }
.srvmodal__dot.is-done { background: rgba(238,63,44,.5); }

@media (max-width: 720px) {
  .srvmodal__panel { width: 100vw; height: 100vh; max-height: 100vh; top: 0; left: 0; transform: none; clip-path: none; }
  .srvmodal.is-open .srvmodal__panel { transform: none; }
}

/* AUTH MODAL — editorial brutalist split layout */
/* z-index 100001 → ZAWSZE nad krDialog (99999) i ponad step-up overlayem */
.authmodal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  pointer-events: none;
}
.authmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  /* Start with no blur — animate it in to avoid first-frame paint spike */
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  transition: opacity .3s ease-out, backdrop-filter .4s ease-out, -webkit-backdrop-filter .4s ease-out;
  will-change: opacity, backdrop-filter;
}
.authmodal__panel {
  --c: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  /* translate3d FORCE compositor layer; scale animated on GPU */
  transform: translate3d(-50%, -50%, 0) scale(.96);
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: linear-gradient(180deg, #0c0c10 0%, #060608 100%);
  border: 1px solid rgba(238,63,44,.4);
  box-shadow:
    0 60px 120px rgba(0,0,0,.75),
    0 0 0 1px rgba(238,63,44,.2),
    inset 0 1px 0 rgba(255,255,255,.05);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  display: grid;
  grid-template-columns: 280px 1fr;
  opacity: 0;
  /* out-expo: feels "snappy then graceful" — no bounce overshoot which can stutter */
  transition: opacity .26s cubic-bezier(.16,1,.3,1), transform .36s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
  /* isolate compositor work */
  contain: layout style paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.authmodal.is-open { pointer-events: auto; }
.authmodal.is-open .authmodal__backdrop {
  opacity: 1;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.authmodal.is-open .authmodal__panel {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

/* Reserve space for Turnstile widget so form doesn't jump when it loads */
.cf-turnstile {
  min-height: 65px;
  display: block;
  margin: 6px 0;
  contain: layout;
}
.cf-turnstile iframe { display: block; }

/* RAIL — left sidebar with brand + perks */
.authmodal__rail {
  background:
    radial-gradient(400px 200px at 100% 0%, rgba(238,63,44,.18), transparent 60%),
    linear-gradient(180deg, #15090a 0%, #0a0a0c 100%);
  border-right: 1px solid var(--line);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.authmodal__rail::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px;
  height: 2px;
  background: var(--red);
}
.authmodal__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.authmodal__rail-h {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 8px;
}
.authmodal__perks {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.authmodal__perks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding-left: 0;
}
.authmodal__perks span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.authmodal__perks strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.authmodal__perks div {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.authmodal__rail-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  line-height: 1.5;
}

/* MAIN — right side: header + tabs + form */
.authmodal__main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* HFT BUG FIX: scroll wewnątrz modalu zamiast body pod spodem.
     Gdy form rośnie (toggle Firma → +5 pól NIP/company/address), bez tego
     scrollIntoView() przewijał stronę-pod-modalem zamiast samego modalu.
     overscroll-behavior: contain zapobiega "scroll chaining" do body
     gdy user dochodzi do końca scroll w modalu. */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.authmodal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 24px 26px 16px;
  border-bottom: 1px solid var(--line);
}
.authmodal__head strong {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--ink);
}
.authmodal__head span {
  display: block;
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 4px;
}
.authmodal__close {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  transition: all .25s;
}
.authmodal__close:hover { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(90deg); }

/* ═══ PREMIUM AUTH TABS — 4 tabs in row, animated gradient underline ═══ */
.authmodal__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 10px 12px 0;
  background:
    linear-gradient(180deg, rgba(238,63,44,.04) 0%, transparent 100%);
  border-bottom: 1px solid rgba(238,63,44,.18);
  position: relative;
}
.authmodal__tabs::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238,63,44,.55) 30%, rgba(77,216,255,.4) 50%, rgba(238,63,44,.55) 70%, transparent);
  pointer-events: none;
}
.authmodal__tab {
  --tab-accent: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.005));
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: 0;
  padding: 11px 8px 12px;
  font-family: 'Rubik', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: color .3s var(--ease-out), background .3s var(--ease-out), border-color .3s var(--ease-out), transform .25s var(--ease-out);
  position: relative;
  border-radius: 10px 10px 0 0;
  white-space: nowrap;
  overflow: hidden;
}
.authmodal__tab-i {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  transition: transform .35s var(--ease-out);
  filter: grayscale(.4);
}
.authmodal__tab:hover {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-color: rgba(255,255,255,.18);
}
.authmodal__tab:hover .authmodal__tab-i {
  transform: scale(1.15) rotate(-4deg);
  filter: grayscale(0);
}

/* Active state: glow halo + gradient underline + filled icon */
.authmodal__tab.is-active {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(238,63,44,.22) 0%, rgba(238,63,44,.05) 100%);
  border-color: rgba(238,63,44,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 -2px 14px rgba(238,63,44,.18);
}
.authmodal__tab.is-active .authmodal__tab-i {
  filter: grayscale(0) drop-shadow(0 0 8px rgba(238,63,44,.5));
}
.authmodal__tab.is-active::after {
  content: '';
  position: absolute;
  left: 14%; right: 14%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tab-accent) 20%, #ff8a5b 50%, var(--tab-accent) 80%, transparent);
  box-shadow: 0 0 10px var(--tab-accent), 0 0 18px rgba(238,63,44,.4);
  border-radius: 2px;
  animation: tabActiveIn .5s cubic-bezier(.16,1,.3,1);
}
@keyframes tabActiveIn {
  from { transform: scaleX(.3); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Per-tab accent colors — visual differentiation */
.authmodal__tab[data-tab="magic"]    { --tab-accent: #ffb84d; }
.authmodal__tab[data-tab="passkey"]  { --tab-accent: #4dd8ff; }
.authmodal__tab[data-tab="login"]    { --tab-accent: #ff8a5b; }
.authmodal__tab[data-tab="register"] { --tab-accent: #4dff8c; }
.authmodal__tab[data-tab="magic"].is-active    { background: linear-gradient(180deg, rgba(255,184,77,.18), rgba(255,184,77,.04)); border-color: rgba(255,184,77,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 -2px 14px rgba(255,184,77,.20); }
.authmodal__tab[data-tab="passkey"].is-active  { background: linear-gradient(180deg, rgba(77,216,255,.18), rgba(77,216,255,.04)); border-color: rgba(77,216,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 -2px 14px rgba(77,216,255,.20); }
.authmodal__tab[data-tab="register"].is-active { background: linear-gradient(180deg, rgba(77,255,140,.16), rgba(77,255,140,.04)); border-color: rgba(77,255,140,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 -2px 14px rgba(77,255,140,.20); }

/* Mobile: horizontal scroll if too tight */
@media (max-width: 520px) {
  .authmodal__tabs {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .authmodal__tabs::-webkit-scrollbar { display: none; }
  .authmodal__tab { font-size: 11.5px; padding: 9px 6px 10px; gap: 5px; }
  .authmodal__tab-i { font-size: 13px; }
}

/* ═══ MODAL BODY — fixed scroll + smooth scrollbar ═══ */
.authmodal__body {
  padding: 22px 26px 24px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-padding-top: 8px;
  scrollbar-gutter: stable both-edges;
}
.authmodal__body::-webkit-scrollbar { width: 6px; }
.authmodal__body::-webkit-scrollbar-track { background: transparent; }
.authmodal__body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(238,63,44,.4), rgba(238,63,44,.15));
  border-radius: 3px;
}
.authmodal__body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--red), rgba(238,63,44,.5));
}
.authpane { display: none; }
.authpane.is-active {
  display: block;
  animation: pane-in .32s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
.authpane.is-success { animation: pane-pulse .9s var(--ease-out); }
@keyframes pane-in {
  from { opacity: 0; transform: translate3d(0,10px,0); }
  to   { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes pane-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  30%  { box-shadow: 0 0 0 12px rgba(74,222,128,.08); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.authpane__hint {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.authpane__hint strong { color: var(--red); font-weight: 600; }

.authform { display: flex; flex-direction: column; gap: 14px; }
.authform.shake { animation: form-shake .4s; }
@keyframes form-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.authform label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.authform input[type="email"],
.authform input[type="password"],
.authform input[type="text"],
.authform input[type="tel"],
.authform input[type="number"] {
  padding: 13px 15px;
  font-family: 'Rubik', sans-serif;
  font-size: 14.5px;
  background: rgba(0,0,0,.5);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: border-color .25s, background .25s, box-shadow .25s;
  /* defeat browser autofill yellow/blue bg (Chrome/Safari) */
  -webkit-text-fill-color: var(--ink);
}
.authform input:focus {
  outline: none;
  border-color: var(--red);
  background: rgba(238,63,44,.04);
  box-shadow: 0 0 0 3px rgba(238,63,44,.12);
}
/* Defeat autofill bg color (Chrome forces yellow, Safari forces light) */
.authform input:-webkit-autofill,
.authform input:-webkit-autofill:hover,
.authform input:-webkit-autofill:focus,
.authform input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px rgba(0,0,0,.5) inset !important;
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  transition: background-color 5000s ease-in-out 0s;
}

/* AUTORSKI TELEFON WRAPPER — pokazuje "+48" przed inputem, lewy spacing dopasowany.
   User pisze tylko cyfry, prefiks wizualnie domyślny. */
.authform__tel {
  position: relative;
  display: block;
}
.authform__tel-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font: 14.5px/1 'JetBrains Mono', monospace;
  color: var(--c-text-2, rgba(255,255,255,.45));
  pointer-events: none;
  user-select: none;
  letter-spacing: .02em;
  /* HFT BUG FIX: jednolity gap między "+48" a user input. Bez border-right wizualnie
     "+48" najezdza na pierwsze cyfry (zwłaszcza po focus). Subtle 1px separator + 6px
     padding-right = clear visual boundary. */
  padding-right: 8px;
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.authform__tel input[type="tel"] {
  /* Padding 56px = 14 (left edge) + ~26 (prefix "+48" width) + 8 (prefix padding) + 8 (gap) */
  padding-left: 56px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.authform__tel input[type="tel"]:focus + .authform__tel-prefix,
.authform__tel:has(input:focus) .authform__tel-prefix {
  color: var(--red);
}
/* Entity radio toggle (Osoba prywatna / JDG) */
/* ─── PILL TOGGLE Firma/Prywatne — autorski, animowany slider ────────────────
   Zamiast 2 osobnych radio "kart" z border, pojedyncza pigułka z animowanym
   ::before pseudo-elementem (czerwony slider) który translateX między opcjami.
   :has(input[value=jdg]:checked) selector = pure CSS, zero JS state.
   Easing cubic-bezier(.16,1,.3,1) = out-expo, "snappy then graceful".
   GPU-accelerated (transform translateX, will-change). ~280ms = premium feel. */
.authform__entity {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 4px 0 2px;
  background: rgba(0, 0, 0, .5);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  isolation: isolate; /* żeby ::before nie wybijał poza border-radius */
}
.authform__entity::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: linear-gradient(135deg, var(--red) 0%, #d63322 100%);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(238, 63, 44, .4), inset 0 1px 0 rgba(255, 255, 255, .15);
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  z-index: 0;
}
.authform__entity:has(input[value="jdg"]:checked)::before {
  transform: translateX(100%);
}
.authform__radio {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: transform .15s;
  /* Hide poprzedniego styling (nadpisanie poprzednich reguł niżej) */
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}
/* Override stare reguły z pill toggle — ukryj native radio input, slider robi cały effect */
.authform__radio input { display: none !important; }
.authform__radio span {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: 0.005em;
  font-weight: 500;
  transition: color .22s, font-weight .22s;
  position: relative;
  z-index: 1;
}
.authform__radio:has(input:checked) span {
  color: #fff;
  font-weight: 700;
}
.authform__radio:hover:not(:has(input:checked)) span {
  color: rgba(255, 255, 255, .8);
}

/* Firma fields (collapsible) */
.authform__firma {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: rgba(238, 63, 44, 0.04);
  border: 1px solid rgba(238, 63, 44, 0.2);
  border-left: 2px solid var(--red);
}
.authform__firma[hidden] { display: none !important; }
.authform__firma small {
  display: block;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  font-weight: 400;
}
.authform__row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 8px;
}
.authform__rodo-note {
  font-style: italic;
  color: rgba(255, 193, 7, 0.85) !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 11px !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

/* ─── CUSTOM CHECKBOX TOS — autorski SVG checkmark draw animation ─────────────
   Pattern: appearance:none ukrywa native, ::after rysuje checkmark (border+rotate trick,
   zero SVG inline = mniej DOM). Animation @keyframes draw — scale 0→1 z bounce
   feel (1.15 overshoot → 1 settle). Wzór z iOS Settings, Stripe Dashboard. */
.authform__check {
  flex-direction: row !important;
  align-items: center;
  gap: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 13px !important;
  color: var(--ink-2) !important;
  cursor: pointer;
  /* Lekka hover indication na całym labelu (klikalna powierzchnia szersza niż checkbox) */
  transition: color .15s;
}
.authform__check:hover { color: var(--ink) !important; }
.authform__check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, .25);
  border-radius: 5px;
  background: rgba(0, 0, 0, .5);
  cursor: pointer;
  position: relative;
  transition: all .2s cubic-bezier(.16, 1, .3, 1);
}
.authform__check input[type="checkbox"]:hover {
  border-color: rgba(238, 63, 44, .5);
  background: rgba(238, 63, 44, .06);
}
.authform__check input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--red) 0%, #d63322 100%);
  border-color: var(--red);
  box-shadow: 0 2px 8px rgba(238, 63, 44, .4);
}
.authform__check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
  animation: check-draw .32s cubic-bezier(.34, 1.4, .64, 1);
}
.authform__check input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(238, 63, 44, .4);
  outline-offset: 2px;
}
@keyframes check-draw {
  0%   { transform: rotate(45deg) scale(0);    opacity: 0; }
  60%  { transform: rotate(45deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(45deg) scale(1);    opacity: 1; }
}
.authform__submit {
  margin-top: 6px;
  padding: 14px;
  width: 100%;
  justify-content: center;
  position: relative;
}
.authform__submit.is-loading::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 1.5px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  transform: translateY(-50%);
  animation: cart-spin .8s linear infinite;
}

.authpane__msg {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  display: none;
  line-height: 1.5;
}
.authpane__msg.is-info { display: block; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.3); color: #60a5fa; }
.authpane__msg.is-error { display: block; background: rgba(238,63,44,.08); border: 1px solid rgba(238,63,44,.3); color: #fca5a5; }
.authpane__msg.is-ok { display: block; background: rgba(74,222,128,.08); border: 1px solid rgba(74,222,128,.3); color: #4ade80; }
.authpane__msg strong { color: inherit; }
.authpane__msg a { color: inherit; text-decoration: underline; word-break: break-all; }

/* Cross-links between modes */
.authpane__cross {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  align-items: center;
}
.authpane__cross a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px dashed rgba(238,63,44,.4);
  transition: border-color .2s, color .2s;
}
.authpane__cross a:hover { color: var(--red-hi); border-bottom-color: var(--red); }
.authpane__sep { color: var(--ink-3); }

/* Password strength meter */
.pw-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ink-3);
}
.pw-meter span {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  transition: background .3s;
}
.pw-meter[data-score="1"] span:nth-child(1) { background: #fbbf24; }
.pw-meter[data-score="2"] span:nth-child(-n+2) { background: #fbbf24; }
.pw-meter[data-score="3"] span:nth-child(-n+3) { background: #4ade80; }
.pw-meter[data-score="4"] span:nth-child(-n+4) { background: #4ade80; }
.pw-meter em { font-style: normal; color: var(--ink-2); padding-left: 6px; }

/* TOAST after login */
.auth-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 110;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(74,222,128,.16), rgba(74,222,128,.04));
  border: 1px solid rgba(74,222,128,.4);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.auth-toast.is-show { opacity: 1; transform: translateX(0); }
.auth-toast strong { font-weight: 700; color: #4ade80; }
.auth-toast span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-2); }

@media (max-width: 720px) {
  .authmodal__panel {
    grid-template-columns: 1fr;
    width: 100vw;
    max-height: 100vh;
    top: 0; left: 0;
    transform: none;
    clip-path: none;
  }
  .authmodal.is-open .authmodal__panel { transform: none; }
  .authmodal__rail { display: none; }
}

/* ───────────────────── REVEAL ───────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ─────── custom cursor ─────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
  transition: width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out);
}
.cursor-ring {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid rgba(255,255,255,.5);
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              margin .35s var(--ease-out), border-color .25s var(--ease-out),
              background .25s var(--ease-out);
}
body.cursor-active .cursor-dot {
  width: 0;
  height: 0;
  margin: 0;
}
body.cursor-active .cursor-ring {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-color: rgba(238,63,44,.9);
  background: rgba(238,63,44,.18);
  mix-blend-mode: normal;
}
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ─────── metric values keep monoinline + cursor smooth ─────── */
.metric__value { font-variant-numeric: tabular-nums; }

/* prevent body scroll-bar shift jitter — TYLKO desktop, na mobile rezerwowanie miejsca tworzy czarny pasek z prawej */
@media (min-width: 1024px) { html { scrollbar-gutter: stable; } }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero__video { display: none; }
  .hero { background: linear-gradient(180deg, #0a0a0c, #000); }
}

/* ════════════════════════════════════════════════════
   COSMIC HERO v2 + LUX PRICING — premium overrides
   Late in cascade, win over base .hero / .pkg rules.
   ════════════════════════════════════════════════════ */

:root {
  --space-void:     #04050a;
  --space-deep:     #070912;
  --space-2:        #0a0d1f;
  --aurora-cyan:    #4dd8ff;
  --aurora-violet:  #8b5cf6;
  --aurora-magenta: #ff3da9;
  --aurora-amber:   #ffb84d;
  --glass-soft:     rgba(255,255,255,.05);
  --glass-mid:      rgba(255,255,255,.09);
  --glass-line:     rgba(255,255,255,.14);
}

/* ── HERO container ── */
.hero.hero--cosmos {
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1400px 900px at 80% -8%, rgba(238,63,44,.22), transparent 60%),
    radial-gradient(900px 700px at -8% 110%, rgba(139,92,246,.24), transparent 60%),
    radial-gradient(700px 600px at 28% 50%, rgba(77,216,255,.08), transparent 70%),
    linear-gradient(180deg, var(--space-deep) 0%, var(--space-void) 100%);
  overflow: hidden;
}

/* canvas (network of nodes) */
.hero__cosmos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
.hero__cosmos.is-ready { opacity: 1; }

/* layered sky behind canvas */
.hero--cosmos .hero__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero--cosmos .hero__sky > * {
  position: absolute;
  inset: 0;
}

.hero--cosmos .hero__nebula {
  background:
    radial-gradient(60% 50% at 22% 28%, rgba(139,92,246,.45), transparent 55%),
    radial-gradient(50% 40% at 78% 18%, rgba(238,63,44,.32), transparent 60%),
    radial-gradient(55% 50% at 65% 88%, rgba(77,216,255,.25), transparent 60%),
    radial-gradient(40% 30% at 8% 82%, rgba(255,61,169,.18), transparent 60%);
  filter: blur(72px) saturate(160%);
  mix-blend-mode: screen;
  animation: nebulaDrift 28s ease-in-out infinite alternate;
}
@keyframes nebulaDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(3%,-2%,0) scale(1.04); }
  100% { transform: translate3d(-2%,2%,0) scale(1.02); }
}

.hero--cosmos .hero__aurora {
  background: conic-gradient(
    from 220deg at 50% 32%,
    rgba(77,216,255,0) 0deg,
    rgba(77,216,255,.18) 60deg,
    rgba(139,92,246,.18) 120deg,
    rgba(238,63,44,.22) 175deg,
    rgba(255,61,169,.16) 240deg,
    rgba(77,216,255,0) 360deg
  );
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: .55;
  animation: auroraSpin 96s linear infinite;
}
@keyframes auroraSpin { to { transform: rotate(1turn); } }

/* 3D perspective floor — looks like server-rack grid receding */
.hero--cosmos .hero__floor {
  inset: auto 0 0 0 !important;
  height: 62%;
  perspective: 900px;
  perspective-origin: 50% 0%;
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 80%, transparent 100%);
}
.hero__floor-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(77,216,255,.14)  1px, transparent 1px);
  background-size: 80px 80px;
  transform: rotateX(72deg) translateZ(-80px);
  transform-origin: 50% 100%;
  animation: floorRun 14s linear infinite;
  will-change: background-position;
}
@keyframes floorRun { from { background-position: 0 0; } to { background-position: 0 80px; } }

.hero--cosmos .hero__vignette {
  background: radial-gradient(120% 95% at 50% 50%, transparent 56%, rgba(0,0,0,.6) 100%);
}
.hero--cosmos .hero__grain {
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  opacity: .42;
  mix-blend-mode: overlay;
}

/* content over everything */
.hero--cosmos .hero__inner {
  position: relative;
  z-index: 2;
  padding: clamp(112px, 14vw, 168px) var(--pad-x) clamp(140px, 16vw, 200px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
}
.hero--cosmos .hero__copy { max-width: 760px; }

/* eyebrow refined */
.hero--cosmos .hero__eyebrow {
  background: linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 8px 30px rgba(0,0,0,.6),
    0 0 30px rgba(77,216,255,.12);
}

/* TITLE — gradient inside em */
.hero--cosmos .hero__title {
  font-size: clamp(46px, 7.2vw, 96px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.94;
  margin: 22px 0 18px;
  text-shadow: 0 4px 32px rgba(0,0,0,.55);
}
.hero--cosmos .hero__title em {
  background: linear-gradient(105deg, #ff8a5b 0%, var(--red) 35%, var(--aurora-magenta) 75%, var(--aurora-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(238,63,44,.4));
}
.hero--cosmos .hero__title .line--sub {
  display: block;
  color: var(--ink-3);
  font-weight: 500;
  font-size: .42em;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-top: 14px;
  text-shadow: none;
}

/* LEDE */
.hero--cosmos .hero__lede {
  max-width: 600px;
  font-size: clamp(15px, 1.15vw, 18px);
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 30px;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
}
.hero--cosmos .hero__lede strong {
  color: var(--ink);
  font-weight: 600;
  background: linear-gradient(105deg, #ffffff, #ffd4cd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* CTA */
.hero--cosmos .hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

/* lux button polish */
.btn.btn--lux { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s; }
.btn--red.btn--lux {
  box-shadow:
    0 12px 32px rgba(238,63,44,.42),
    0 0 0 0 rgba(238,63,44,0);
}
.btn--red.btn--lux:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 48px rgba(238,63,44,.58),
    0 0 0 6px rgba(238,63,44,.08);
}
.btn--ghost.btn--lux {
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,.20);
}
.btn--ghost.btn--lux:hover {
  border-color: rgba(255,255,255,.40);
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}

/* KPI bar */
.hero__kpis {
  list-style: none;
  margin: 6px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  position: relative;
  --c: 12px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
}
.hero__kpis::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,216,255,.45), transparent);
  pointer-events: none;
}
.hero__kpi {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.hero__kpi:last-child { border-right: 0; }
.hero__kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 16px; height: 1px;
  background: var(--red);
}
.hero__kpi-num {
  font-size: clamp(22px, 2.3vw, 32px);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
}
.hero__kpi-num i {
  font-style: normal;
  color: var(--red);
  font-size: .5em;
  font-weight: 600;
  margin-left: 3px;
}
.hero__kpi-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
}
@media (max-width: 720px) {
  .hero__kpis { grid-template-columns: repeat(2, 1fr); }
  .hero__kpi { border-bottom: 1px solid rgba(255,255,255,.06); padding: 12px 14px; }
  .hero__kpi:nth-child(2) { border-right: 0; }
  .hero__kpi:nth-last-child(-n+2) { border-bottom: 0; }
}

/* social line */
.hero--cosmos .hero__social {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.hero--cosmos .hero__social-label { color: var(--red); }

/* GLASS PANEL right side */
.hero__panel {
  position: relative;
  align-self: start;
  margin-top: 8px;
  width: clamp(280px, 28vw, 340px);
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02) 60%);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 24px 60px rgba(0,0,0,.65),
    0 0 80px rgba(238,63,44,.10);
  --c: 14px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  opacity: 0;
  transform: translateY(20px);
  animation: rise .9s var(--ease-out) forwards .55s;
}
.hero__panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.hero__panel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4dff8c;
  box-shadow: 0 0 12px rgba(77,255,140,.7);
  animation: pulse 1.8s ease-out infinite;
  flex: none;
}
.hero__panel-name { flex: 1; }
.hero__panel-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  padding: 3px 7px;
  color: #4dff8c;
  border: 1px solid rgba(77,255,140,.45);
  background: rgba(77,255,140,.06);
}
.hero__panel-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero__panel-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(255,255,255,.07);
  font-size: 12.5px;
}
.hero__panel-rows li:last-child { border-bottom: 0; }
.hero__panel-rows span {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-3);
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero__panel-rows strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hero__panel-rows strong i {
  font-style: normal;
  color: var(--red);
  font-size: .65em;
  font-weight: 600;
  margin-left: 3px;
}
.hero__panel-pulse {
  color: rgba(77,216,255,.75);
  height: 24px;
  filter: drop-shadow(0 0 6px rgba(77,216,255,.5));
}
.hero__panel-pulse svg {
  width: 100%;
  height: 100%;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: pulseLine 4.4s linear infinite;
}
@keyframes pulseLine {
  0%   { stroke-dashoffset: 600; }
  100% { stroke-dashoffset: 0; }
}
.hero__panel-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__panel-foot em { color: var(--red); font-style: normal; font-weight: 600; }

@media (max-width: 1100px) {
  .hero--cosmos .hero__inner { grid-template-columns: 1fr; gap: 32px; }
  .hero__panel { width: 100%; max-width: 460px; align-self: stretch; }
}
@media (max-width: 720px) {
  .hero--cosmos .hero__inner { padding-top: 96px; padding-bottom: 120px; }
  .hero--cosmos .hero__title { font-size: clamp(40px, 11vw, 56px); }
}

/* ── LUX PRICING ── */
.pricing.pricing--lux {
  padding: clamp(56px, 8vw, 120px) 0 clamp(56px, 8vw, 100px);
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(238,63,44,.06), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(139,92,246,.08), transparent 60%);
  position: relative;
}
.pricing--lux .pricing__grid {
  background: transparent;
  border: 0;
  padding: 0 var(--pad-x);
  gap: clamp(14px, 1.4vw, 22px);
  max-width: 1440px;
  margin: 0 auto;
}
@media (min-width: 1281px) {
  .pricing--lux .pricing__grid { grid-template-columns: repeat(5, 1fr); }
}

.pkg.pkg--lux {
  --pkg-glow: rgba(238,63,44,.30);
  --pkg-edge: rgba(238,63,44,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    var(--space-deep);
  border: 1px solid var(--glass-line);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  isolation: isolate;
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
  --c: 14px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 16px 36px rgba(0,0,0,.4);
}
.pkg.pkg--lux::before { display: none; }
.pkg.pkg--lux:hover {
  transform: translateY(-6px);
  border-color: var(--pkg-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 28px 60px rgba(0,0,0,.6),
    0 0 70px var(--pkg-glow);
}

.pkg--lux.pkg--start    { --pkg-glow: rgba(77,216,255,.26); --pkg-edge: rgba(77,216,255,.45); }
.pkg--lux:nth-child(2)  { --pkg-glow: rgba(139,92,246,.28); --pkg-edge: rgba(139,92,246,.55); }
.pkg--lux.pkg--featured {
  --pkg-glow: rgba(238,63,44,.48);
  --pkg-edge: rgba(238,63,44,.75);
  background:
    linear-gradient(180deg, rgba(238,63,44,.14), rgba(238,63,44,.03) 55%, rgba(255,255,255,.01)),
    #110707;
  border-color: rgba(238,63,44,.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 20px 50px rgba(0,0,0,.55),
    0 0 80px rgba(238,63,44,.18);
}
.pkg--lux.pkg--premium  { --pkg-glow: rgba(255,184,77,.30); --pkg-edge: rgba(255,184,77,.55); }
.pkg--lux.pkg--ent      { --pkg-glow: rgba(255,61,169,.28); --pkg-edge: rgba(255,61,169,.55); }

/* orbit number watermark (top-right) */
.pkg--lux[data-orbit]::after {
  content: attr(data-orbit);
  position: absolute;
  right: 18px;
  top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .15em;
  color: rgba(255,255,255,.16);
  pointer-events: none;
}

/* halo glow on hover */
.pkg__halo {
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(140px 90px at 50% 0%, var(--pkg-glow), transparent 75%);
  opacity: 0;
  transition: opacity .45s;
}
.pkg.pkg--lux:hover .pkg__halo { opacity: 1; }
.pkg--lux.pkg--featured .pkg__halo { opacity: .7; }
.pkg--lux.pkg--featured:hover .pkg__halo { opacity: 1; }

/* crown ribbon */
.pkg__crown {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: linear-gradient(135deg, #ff7259, var(--red) 50%, #b62716);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(238,63,44,.55), inset 0 1px 0 rgba(255,255,255,.3);
  z-index: 3;
  white-space: nowrap;
}
.pkg__crown svg { color: #fff; flex: none; }

/* lux tag */
.pkg.pkg--lux .pkg__tag {
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid var(--glass-line);
  color: var(--ink-2);
  letter-spacing: .12em;
  padding: 5px 11px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.pkg.pkg--lux .pkg__tag--red {
  color: #ffe5e0;
  border-color: rgba(238,63,44,.6);
  background: linear-gradient(135deg, rgba(238,63,44,.28), rgba(238,63,44,.08));
  box-shadow: inset 0 0 0 1px rgba(238,63,44,.16);
}

/* lux name */
.pkg.pkg--lux .pkg__name {
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.0;
  text-transform: none;
  margin: 4px 0 6px;
  color: var(--ink);
}

/* lux price */
.pkg.pkg--lux .pkg__price {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
  gap: 4px;
}
.pkg.pkg--lux .pkg__price strong {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #ffd5cf 60%, var(--red) 110%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.pkg--lux.pkg--featured .pkg__price strong {
  background: linear-gradient(135deg, #fff 0%, #ffaa8e 50%, var(--red) 110%);
  -webkit-background-clip: text;
  background-clip: text;
}
.pkg--lux.pkg--premium .pkg__price strong {
  background: linear-gradient(135deg, #fff 0%, #ffd99a 50%, var(--aurora-amber) 110%);
  -webkit-background-clip: text;
  background-clip: text;
}
.pkg--lux.pkg--ent .pkg__price strong {
  background: linear-gradient(135deg, #fff 0%, #ffbada 50%, var(--aurora-magenta) 110%);
  -webkit-background-clip: text;
  background-clip: text;
}
.pkg.pkg--lux .pkg__price-prefix {
  font-size: .38em;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
  -webkit-text-fill-color: var(--ink-3);
  text-transform: uppercase;
  margin-right: 4px;
  align-self: center;
}
.pkg.pkg--lux .pkg__price-num { font-variant-numeric: tabular-nums; }
.pkg.pkg--lux .pkg__price i {
  font-style: normal;
  font-size: .4em;
  font-weight: 700;
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
  letter-spacing: .04em;
  margin-left: 2px;
}
.pkg.pkg--lux .pkg__price span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* lux list with neon checks */
.pkg.pkg--lux .pkg__list { gap: 9px; }
.pkg.pkg--lux .pkg__list li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-left: 22px;
  position: relative;
}
.pkg.pkg--lux .pkg__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 6px;
  border-left: 1.6px solid var(--red);
  border-bottom: 1.6px solid var(--red);
  transform: rotate(-45deg);
  border-radius: 1px;
}
.pkg--lux.pkg--start .pkg__list li::before    { border-color: var(--aurora-cyan); }
.pkg--lux:nth-child(2) .pkg__list li::before  { border-color: var(--aurora-violet); }
.pkg--lux.pkg--premium .pkg__list li::before  { border-color: var(--aurora-amber); }
.pkg--lux.pkg--ent .pkg__list li::before      { border-color: var(--aurora-magenta); }

/* lux foot */
.pkg.pkg--lux .pkg__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.45;
}

/* notes premium glass */
.pricing--lux .pricing__notes { margin-top: 32px; }
.pricing--lux .pricing__note {
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px 20px;
  --c: 10px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
}

/* lux grid responsive */
@media (max-width: 1280px) {
  .pricing--lux .pricing__grid { grid-template-columns: repeat(3, 1fr); }
  .pricing--lux .pkg--lux.pkg--featured { grid-column: span 1; }
}
@media (max-width: 900px) {
  .pricing--lux .pricing__grid { grid-template-columns: repeat(2, 1fr); }
  .pricing--lux .pkg--lux.pkg--featured { grid-column: span 2; }
}
@media (max-width: 600px) {
  .pricing--lux .pricing__grid { grid-template-columns: 1fr; }
  .pricing--lux .pkg--lux.pkg--featured { grid-column: span 1; }
}

/* hide existing hero glass card in cosmos hero — we have hero__panel now (keeps DOM but invisible) */
.hero--cosmos > .glass {
  bottom: clamp(18px, 3vw, 34px);
  left: var(--pad-x);
  z-index: 4;
}

/* reduced-motion guards for cosmos */
@media (prefers-reduced-motion: reduce) {
  .hero__cosmos { display: none; }
  .hero__nebula, .hero__aurora, .hero__floor-grid, .hero__panel-pulse svg, .hero__panel-dot { animation: none !important; }
}

/* ════════════════════════════════════════════════════
   COSMIC SECTION LUX v3
   - section-head premium
   - strip cinematic
   - diff lux cards (12 unique accents)
   - metrics cinematic numbers
   - cosmic strip dividers
   - dom__price-grid lux
   ════════════════════════════════════════════════════ */

:root {
  --aurora-green: #4dff8c;
  --aurora-amber: #ffb84d;
}

/* ── SECTION HEAD premium ── */
.section-head {
  position: relative;
  padding: 0 var(--pad-x) clamp(8px, 1.2vw, 16px);
  max-width: 1280px;
  margin: 0 auto clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: baseline;
}
.section-head__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  position: relative;
  padding-left: 22px;
}
.section-head__num::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red));
}
.section-head__title {
  font-size: clamp(36px, 5.4vw, 72px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.section-head__title em {
  background: linear-gradient(105deg, #ff8a5b 0%, var(--red) 35%, var(--aurora-magenta) 75%, var(--aurora-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(238,63,44,.32));
}
.section-head__sub {
  grid-column: 2 / -1;
  max-width: 720px;
  margin: 16px 0 0;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--ink-2);
  line-height: 1.6;
}
.section-head__sub strong { color: var(--ink); }
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; gap: 8px; }
  .section-head__sub { grid-column: 1; }
}

/* ── COSMIC SECTION DIVIDER (helper) ── */
.cosmic-divider, section + section { /* no-op fallback */ }
.cosmic-rule {
  position: relative;
  height: 1px;
  max-width: 1280px;
  margin: 0 auto;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(238,63,44,.45) 25%,
    rgba(139,92,246,.45) 50%,
    rgba(77,216,255,.45) 75%,
    transparent 100%);
  filter: drop-shadow(0 0 14px rgba(238,63,44,.25));
}

/* ── STRIP cinematic ── */
.strip {
  border: 0;
  background:
    radial-gradient(900px 350px at 20% 0%, rgba(238,63,44,.10), transparent 60%),
    radial-gradient(800px 300px at 80% 100%, rgba(77,216,255,.10), transparent 60%),
    linear-gradient(180deg, var(--space-deep), var(--bg));
  position: relative;
  overflow: hidden;
}
.strip::before,
.strip::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238,63,44,.5), rgba(139,92,246,.4), rgba(77,216,255,.5), transparent);
}
.strip::before { top: 0; }
.strip::after  { bottom: 0; }
.strip__inner {
  padding: clamp(56px, 8vw, 120px) var(--pad-x);
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: baseline;
  position: relative;
  z-index: 1;
}
.strip__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  position: relative;
  padding-left: 22px;
}
.strip__num::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red));
}
.strip__text {
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.3;
  letter-spacing: -0.025em;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  max-width: 1000px;
}
.strip__text strong {
  font-weight: 700;
  background: linear-gradient(105deg, #fff, #ffd5cf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.strip__faded { color: var(--ink-3); display: block; margin-top: 8px; font-size: .76em; line-height: 1.5; }
@media (max-width: 720px) {
  .strip__inner { grid-template-columns: 1fr; gap: 14px; }
}

/* ── DIFF LUX — 12 premium glass cards with cycled accents ── */
.diff {
  padding: clamp(56px, 8vw, 120px) 0 clamp(56px, 8vw, 100px);
  border: 0;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(238,63,44,.07), transparent 60%),
    radial-gradient(800px 450px at 100% 100%, rgba(139,92,246,.10), transparent 60%);
  position: relative;
}
.diff__grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
  background: transparent;
  border: 0;
}
.diff__cell {
  --accent: var(--red);
  --accent-rgb: 238, 63, 44;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    var(--space-deep);
  border: 1px solid var(--glass-line);
  padding: 22px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  isolation: isolate;
  --c: 12px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 28px rgba(0,0,0,.35);
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s, background .4s;
}
.diff__cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 28px; height: 2px;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
}
.diff__cell::after {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(160px 90px at 50% 0%, rgba(var(--accent-rgb), .25), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.diff__cell:hover {
  transform: translateY(-5px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
    var(--space-deep);
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 22px 50px rgba(0,0,0,.55),
    0 0 60px rgba(var(--accent-rgb), .25);
}
.diff__cell:hover::after { opacity: 1; }
.diff__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .04));
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 12px;
  color: var(--accent);
  filter: grayscale(0) drop-shadow(0 0 12px rgba(var(--accent-rgb), .35));
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.diff__cell:hover .diff__icon {
  transform: scale(1.06) rotate(-4deg);
  box-shadow: 0 0 24px rgba(var(--accent-rgb), .45), inset 0 1px 0 rgba(255,255,255,.18);
}
.diff__cell h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.2;
}
.diff__cell p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.diff__cell p strong { color: var(--accent); font-weight: 700; }

/* 12 unique accents — cycled */
.diff__grid > .diff__cell:nth-child(12n+1)  { --accent: #4dd8ff; --accent-rgb: 77,216,255; }
.diff__grid > .diff__cell:nth-child(12n+2)  { --accent: #8b5cf6; --accent-rgb: 139,92,246; }
.diff__grid > .diff__cell:nth-child(12n+3)  { --accent: #ffb84d; --accent-rgb: 255,184,77; }
.diff__grid > .diff__cell:nth-child(12n+4)  { --accent: #ff7a5c; --accent-rgb: 255,122,92; }
.diff__grid > .diff__cell:nth-child(12n+5)  { --accent: #ee3f2c; --accent-rgb: 238,63,44; }
.diff__grid > .diff__cell:nth-child(12n+6)  { --accent: #ff3da9; --accent-rgb: 255,61,169; }
.diff__grid > .diff__cell:nth-child(12n+7)  { --accent: #4dff8c; --accent-rgb: 77,255,140; }
.diff__grid > .diff__cell:nth-child(12n+8)  { --accent: #4dd8ff; --accent-rgb: 77,216,255; }
.diff__grid > .diff__cell:nth-child(12n+9)  { --accent: #8b5cf6; --accent-rgb: 139,92,246; }
.diff__grid > .diff__cell:nth-child(12n+10) { --accent: #ff3da9; --accent-rgb: 255,61,169; }
.diff__grid > .diff__cell:nth-child(12n+11) { --accent: #ffb84d; --accent-rgb: 255,184,77; }
.diff__grid > .diff__cell:nth-child(12n)    { --accent: #4dff8c; --accent-rgb: 77,255,140; }

@media (max-width: 1100px) { .diff__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .diff__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .diff__grid { grid-template-columns: 1fr; } }

/* ── METRICS cinematic ── */
.metrics {
  padding: clamp(56px, 8vw, 100px) var(--pad-x);
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.metrics::before {
  content: '';
  position: absolute;
  top: 50%; left: var(--pad-x); right: var(--pad-x);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238,63,44,.35) 25%, rgba(77,216,255,.3) 75%, transparent);
  filter: drop-shadow(0 0 8px rgba(238,63,44,.25));
  z-index: 0;
  pointer-events: none;
}
.metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  background: transparent;
  border: 0;
  position: relative;
  z-index: 1;
}
.metric {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    var(--space-deep);
  border: 1px solid var(--glass-line);
  padding: clamp(22px, 2.6vw, 38px) clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --c: 14px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.4);
  transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s;
}
.metric::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 32px; height: 2px;
  background: var(--red);
  box-shadow: 0 0 14px var(--red);
}
.metric::after {
  content: '';
  position: absolute;
  inset: -50% -10%;
  background: radial-gradient(40% 30% at 50% 100%, rgba(238,63,44,.16), transparent 60%);
  z-index: -1;
  pointer-events: none;
}
.metric:hover {
  transform: translateY(-4px);
  border-color: rgba(238,63,44,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 55px rgba(0,0,0,.55), 0 0 70px rgba(238,63,44,.18);
}
.metric:nth-child(2)::after { background: radial-gradient(40% 30% at 50% 100%, rgba(77,216,255,.16), transparent 60%); }
.metric:nth-child(2)::before { background: #4dd8ff; box-shadow: 0 0 14px #4dd8ff; }
.metric:nth-child(2):hover { border-color: rgba(77,216,255,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 55px rgba(0,0,0,.55), 0 0 70px rgba(77,216,255,.18); }
.metric:nth-child(3)::after { background: radial-gradient(40% 30% at 50% 100%, rgba(139,92,246,.18), transparent 60%); }
.metric:nth-child(3)::before { background: #8b5cf6; box-shadow: 0 0 14px #8b5cf6; }
.metric:nth-child(3):hover { border-color: rgba(139,92,246,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 55px rgba(0,0,0,.55), 0 0 70px rgba(139,92,246,.18); }
.metric:nth-child(4)::after { background: radial-gradient(40% 30% at 50% 100%, rgba(255,184,77,.16), transparent 60%); }
.metric:nth-child(4)::before { background: #ffb84d; box-shadow: 0 0 14px #ffb84d; }
.metric:nth-child(4):hover { border-color: rgba(255,184,77,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 26px 55px rgba(0,0,0,.55), 0 0 70px rgba(255,184,77,.18); }
.metric__value {
  font-size: clamp(48px, 6.5vw, 88px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ffffff 0%, #fff 50%, rgba(255,255,255,.65) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(238,63,44,.18));
}
.metric:nth-child(2) .metric__value { filter: drop-shadow(0 0 22px rgba(77,216,255,.22)); }
.metric:nth-child(3) .metric__value { filter: drop-shadow(0 0 22px rgba(139,92,246,.22)); }
.metric:nth-child(4) .metric__value { filter: drop-shadow(0 0 22px rgba(255,184,77,.22)); }
.metric__value span {
  color: var(--red);
  font-weight: 700;
  font-size: .42em;
  letter-spacing: 0;
  -webkit-text-fill-color: var(--red);
  margin-left: 4px;
  vertical-align: super;
}
.metric:nth-child(2) .metric__value span { color: #4dd8ff; -webkit-text-fill-color: #4dd8ff; }
.metric:nth-child(3) .metric__value span { color: #8b5cf6; -webkit-text-fill-color: #8b5cf6; }
.metric:nth-child(4) .metric__value span { color: #ffb84d; -webkit-text-fill-color: #ffb84d; }
.metric__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.55;
}
@media (max-width: 900px) { .metrics__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .metrics__grid { grid-template-columns: 1fr; } .metrics::before { display: none; } }

/* ── DOMENY pricing grid lux ── */
.dom__pricing {
  margin-top: 48px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--glass-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)),
    radial-gradient(800px 400px at 100% 0%, rgba(77,216,255,.08), transparent 60%),
    var(--space-deep);
  --c: 16px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  position: relative;
}
.dom__pricing-h {
  margin: 0 0 22px;
  font-family: 'Rubik', sans-serif;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--ink);
}
.dom__price-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(8px, 1vw, 14px);
  background: transparent;
  border: 0;
  margin-bottom: 26px;
}
.dom__price {
  --accent: #4dd8ff;
  --accent-rgb: 77,216,255;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)), rgba(0,0,0,.4);
  border: 1px solid var(--glass-line);
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  isolation: isolate;
  --c: 10px;
  clip-path: polygon(
    0 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% 100%, var(--c) 100%, 0 calc(100% - var(--c))
  );
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}
.dom__price::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.dom__price:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), .55);
  box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 50px rgba(var(--accent-rgb), .22);
}
.dom__price .tld {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
}
.dom__price strong {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* per-TLD accents — by position */
.dom__price:nth-child(1) { --accent: #ee3f2c; --accent-rgb: 238,63,44; }    /* .pl */
.dom__price:nth-child(2) { --accent: #4dd8ff; --accent-rgb: 77,216,255; }   /* .com */
.dom__price:nth-child(3) { --accent: #ffb84d; --accent-rgb: 255,184,77; }   /* .eu */
.dom__price:nth-child(4) { --accent: #8b5cf6; --accent-rgb: 139,92,246; }   /* .net */
.dom__price:nth-child(5) { --accent: #4dff8c; --accent-rgb: 77,255,140; }   /* .org */
.dom__price:nth-child(6) { --accent: #ff3da9; --accent-rgb: 255,61,169; }   /* .dev */
.dom__price:nth-child(7) { --accent: #ff7a5c; --accent-rgb: 255,122,92; }   /* .io */
.dom__price:nth-child(8) { --accent: #ee3f2c; --accent-rgb: 238,63,44; }    /* .ai */

@media (max-width: 1100px) { .dom__price-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px)  { .dom__price-grid { grid-template-columns: repeat(2, 1fr); } }

.dom__included {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.dom__included li {
  padding-left: 22px;
  position: relative;
}
.dom__included li::first-letter { color: transparent; margin: 0; }
.dom__included li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 6px;
  border-left: 1.6px solid #4dff8c;
  border-bottom: 1.6px solid #4dff8c;
  transform: rotate(-45deg);
  filter: drop-shadow(0 0 4px rgba(77,255,140,.5));
}
@media (max-width: 700px) { .dom__included { grid-template-columns: 1fr; } }

/* ── DOMENY section bg unified with cosmos ── */
.domeny {
  padding: clamp(0px, 0vw, 0px) 0 clamp(56px, 8vw, 100px);
  border: 0;
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(77,216,255,.06), transparent 60%),
    radial-gradient(800px 400px at 0% 100%, rgba(238,63,44,.06), transparent 60%);
}

/* page__head reset when hero-cosmos present on /domeny/ — already handled by hero replacement */

/* ════════════════════════════════════════════════════
   HERO v3 — viewport-fit, no duplicates, polish layer
   ════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────
   HERO v4 — HFT-grade responsive: 320 → 8K
   Vertical centering via grid 1fr row + align-items.
   Padding = nav clearance only (no excess space).
   ───────────────────────────────────────────────── */
.hero--cosmos .hero__inner {
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  padding: clamp(84px, 9vh, 112px) var(--pad-x) clamp(54px, 6vh, 88px);
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: minmax(min-content, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 80px);
  max-width: min(1640px, 100%);
  margin: 0 auto;
}

/* DROP KPI bar (HTML removed; CSS noop guard) */
.hero__kpis { display: none !important; }

/* TITLE — bigger, more dramatic; tighter line-height for stack */
.hero--cosmos .hero__title {
  font-size: clamp(44px, 7.4vw, 112px);
  margin: 18px 0 16px;
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-shadow: 0 4px 36px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.4);
}
.hero--cosmos .hero__title .line {
  animation: rise 1.05s var(--ease-expo) both;
}
.hero--cosmos .hero__title .line:nth-child(1) { animation-delay: .08s; }
.hero--cosmos .hero__title .line:nth-child(2) { animation-delay: .22s; }
.hero--cosmos .hero__title .line:nth-child(3) { animation-delay: .36s; }

/* LEDE compact, readable */
.hero--cosmos .hero__lede {
  margin: 0 0 26px;
  font-size: clamp(15.5px, 1.2vw, 19px);
  line-height: 1.55;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
  animation: rise 1.1s var(--ease-expo) both .48s;
}
.hero--cosmos .hero__cta {
  margin-bottom: 20px;
  animation: rise 1.1s var(--ease-expo) both .62s;
}
.hero--cosmos .hero__social {
  animation: rise 1.1s var(--ease-expo) both .76s;
}
.hero--cosmos .hero__eyebrow {
  animation: rise .9s var(--ease-expo) both 0s;
}

/* ─── PANEL — hide below 1100, keep clean hero on tablet/mobile ─── */
@media (max-width: 1100px) {
  .hero--cosmos .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__panel { display: none; }
}

/* ═══ ULTRAWIDE LADDER (HFT-grade scaling 1440 → 8K) ═══ */
@media (min-width: 1440px) {
  .hero--cosmos .hero__inner { max-width: 1480px; }
  .hero--cosmos .hero__title { font-size: clamp(56px, 6.6vw, 116px); }
}
@media (min-width: 1680px) {
  .hero--cosmos .hero__inner { max-width: 1640px; gap: clamp(40px, 4vw, 90px); }
  .hero--cosmos .hero__title { font-size: clamp(64px, 6.6vw, 130px); }
  .hero--cosmos .hero__lede { font-size: clamp(16px, 1.15vw, 21px); max-width: 660px; }
  .hero__panel { width: clamp(320px, 22vw, 380px); }
}
@media (min-width: 1920px) {
  .hero--cosmos .hero__inner { max-width: 1800px; padding-top: clamp(100px, 8vh, 132px); }
  .hero--cosmos .hero__title { font-size: clamp(72px, 6.6vw, 148px); }
  .hero--cosmos .hero__lede { font-size: clamp(17px, 1.1vw, 23px); max-width: 720px; }
  .hero__panel { width: clamp(360px, 22vw, 420px); padding: 22px 24px 18px; }
  .hero__panel-rows li { font-size: 13.5px; padding: 8px 0; }
  .hero__panel-rows strong { font-size: 16px; }
}
@media (min-width: 2560px) {
  .hero--cosmos .hero__inner { max-width: 2100px; padding: clamp(120px, 8vh, 160px) var(--pad-x) clamp(80px, 6vh, 120px); gap: clamp(60px, 4vw, 120px); }
  .hero--cosmos .hero__title { font-size: clamp(96px, 6.6vw, 180px); }
  .hero--cosmos .hero__lede { font-size: clamp(20px, 1.05vw, 28px); max-width: 820px; }
  .hero__panel { width: clamp(420px, 22vw, 520px); padding: 26px 28px 22px; }
  .hero__panel-head { font-size: 12.5px; }
  .hero__panel-rows li { font-size: 15px; padding: 9px 0; }
  .hero__panel-rows strong { font-size: 18px; }
  .hero__panel-rows span { font-size: 12px; }
  .hero__eyebrow { font-size: 13.5px; padding: 9px 14px; }
}
@media (min-width: 3440px) {
  /* 32" ultrawide / 4K & 5K editorial */
  .hero--cosmos .hero__inner { max-width: 2600px; padding: clamp(140px, 8vh, 200px) var(--pad-x) clamp(96px, 6vh, 140px); }
  .hero--cosmos .hero__title { font-size: clamp(120px, 6vw, 220px); }
  .hero--cosmos .hero__lede { font-size: clamp(22px, 1vw, 32px); max-width: 940px; }
  .hero__panel { width: clamp(480px, 20vw, 600px); }
  .hero__floor-grid { background-size: 120px 120px; }
}

/* ═══ SHORT-VIEWPORT GUARDS (laptop heights 768/720/600) ═══ */
@media (max-height: 880px) {
  .hero--cosmos .hero__inner { padding-top: clamp(78px, 8vh, 100px); padding-bottom: clamp(48px, 5vh, 68px); }
  .hero--cosmos .hero__title { font-size: clamp(40px, 6.4vw, 86px); }
  .hero--cosmos .hero__lede { margin-bottom: 20px; }
  .hero--cosmos .hero__cta { margin-bottom: 16px; }
}
@media (max-height: 740px) {
  .hero--cosmos .hero__title { font-size: clamp(36px, 5.4vw, 70px); margin: 14px 0 12px; }
  .hero--cosmos .hero__title .line--sub { margin-top: 10px; }
  .hero--cosmos .hero__lede { font-size: 15px; margin-bottom: 18px; line-height: 1.5; }
  .hero__panel { padding: 14px 18px 12px; gap: 10px; }
  .hero__panel-pulse { display: none; }
}
@media (max-height: 640px) {
  .hero--cosmos .hero__title { font-size: clamp(32px, 4.8vw, 56px); margin: 10px 0 10px; }
  .hero--cosmos .hero__title .line--sub { display: none; }
  .hero--cosmos .hero__lede { display: none; }
  .hero__scroll { display: none; }
  .hero__ticker { display: none; }
}
@media (max-height: 540px) {
  .hero--cosmos .hero__inner { padding-top: 72px; padding-bottom: 30px; }
  .hero--cosmos .hero__title { font-size: clamp(28px, 4.4vw, 44px); }
  .hero--cosmos .hero__social { display: none; }
}

/* ═══ NARROW WIDTH GUARDS (phones 320-720) ═══ */
@media (max-width: 720px) {
  .hero--cosmos .hero__inner {
    padding: clamp(80px, 14vw, 96px) var(--pad-x) clamp(48px, 8vw, 72px);
    grid-template-rows: minmax(min-content, 1fr);
    align-items: center;
  }
  .hero--cosmos .hero__title {
    font-size: clamp(36px, 11.5vw, 60px);
    margin: 14px 0 12px;
  }
  .hero--cosmos .hero__lede { font-size: 14.5px; margin-bottom: 18px; max-width: 100%; }
  .hero--cosmos .hero__cta { margin-bottom: 14px; }
  .hero__scroll { display: none; }
}
@media (max-width: 480px) {
  .hero--cosmos .hero__title { font-size: clamp(32px, 11vw, 52px); }
}

/* SCROLL HINT — bottom-center mini cosmic indicator */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 3vw, 36px);
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink-3);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color .3s var(--ease-out);
  opacity: 0;
  animation: rise .9s var(--ease-out) forwards 1.2s;
}
.hero__scroll:hover { color: var(--ink); }
.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, rgba(255,255,255,.4), transparent);
  overflow: hidden;
}
.hero__scroll-line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--red), transparent);
  animation: scrollDot 2s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { transform: translateY(-100%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* DOMENY hero scroll cyan accent */
.hero--domeny .hero__scroll-line::before { background: linear-gradient(180deg, #4dd8ff, transparent); }

/* Hide hero__ticker on narrow screens (already in base, repeat for cosmos safety) */
@media (max-width: 720px) { .hero__ticker { display: none; } }

/* TITLE polish — bigger glow on em + stronger text-shadow drama */
.hero--cosmos .hero__title em {
  background-size: 200% 100%;
  animation: titleGradient 18s linear infinite;
}
@keyframes titleGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* CTA polish — magnetic glow on red */
.hero--cosmos .hero__cta .btn--red.btn--lux::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, var(--red), #ff8a5b, var(--red));
  background-size: 200% 100%;
  z-index: -1;
  animation: ctaShimmer 5s linear infinite;
  filter: blur(14px);
  opacity: .35;
  pointer-events: none;
}
.hero--cosmos .hero__cta .btn--red.btn--lux { position: relative; }
@keyframes ctaShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ─── READABILITY: subtle dark vignette under hero__copy text ─── */
.hero--cosmos .hero__copy {
  position: relative;
  z-index: 2;
}
.hero--cosmos .hero__copy::before {
  content: '';
  position: absolute;
  inset: -50px -80px -40px -60px;
  background: radial-gradient(60% 60% at 25% 50%, rgba(0,0,0,.32), transparent 70%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
}

/* ─── SMOOTHER nebula motion (slower, more cinematic) ─── */
.hero--cosmos .hero__nebula { animation-duration: 38s; }
.hero--cosmos .hero__aurora { animation-duration: 120s; opacity: .48; }

/* Slow floor (more contemplative) */
.hero--cosmos .hero__floor-grid { animation-duration: 22s; }

/* PRO TYPOGRAPHY — eyebrow refinement */
.hero--cosmos .hero__eyebrow {
  padding: 8px 14px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  border-radius: 0;
}

/* DOMENY hero — cyan-violet-red title gradient (different theme) */
.hero--domeny {
  background:
    radial-gradient(1400px 900px at 80% -8%, rgba(77,216,255,.22), transparent 60%),
    radial-gradient(900px 700px at -8% 110%, rgba(238,63,44,.18), transparent 60%),
    radial-gradient(700px 600px at 28% 50%, rgba(139,92,246,.12), transparent 70%),
    linear-gradient(180deg, var(--space-deep) 0%, var(--space-void) 100%);
}
.hero--domeny .hero__title em {
  background: linear-gradient(105deg, #4dd8ff 0%, #8b5cf6 35%, #ff3da9 75%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(77,216,255,.45));
  background-size: 200% 100%;
  animation: titleGradient 18s linear infinite;
}
.hero--domeny .hero__lede strong {
  background: linear-gradient(105deg, #fff, #cfeaff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero--domeny .hero__eyebrow { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 30px rgba(0,0,0,.6), 0 0 30px rgba(77,216,255,.22); }
.hero--domeny .hero__panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.65), 0 0 80px rgba(77,216,255,.14); }
.hero--domeny .hero__panel-foot em { color: #4dd8ff; }
.hero--domeny .hero__panel-rows strong i { color: #4dd8ff; }
.hero--domeny .hero__cta .btn--red.btn--lux::before {
  background: linear-gradient(135deg, #4dd8ff, #8b5cf6, var(--red));
}

/* prefers-reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  .hero__title em, .hero__scroll-line::before, .btn--red.btn--lux::before { animation: none !important; }
}

/* ════════════════════════════════════════════════════
   STEP-UP MFA pane — branded interstitial after password
   while waiting for passkey biometric
   ════════════════════════════════════════════════════ */
.authpane--stepup { padding: 0; }
.stepup {
  padding: 32px 28px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background:
    radial-gradient(400px 240px at 50% 0%, rgba(238,63,44,.10), transparent 70%),
    radial-gradient(400px 240px at 50% 100%, rgba(77,216,255,.06), transparent 70%);
}
.stepup__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--glass-line);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  --c: 8px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.stepup__brand .stepup__logo { width: 18px; height: 18px; color: var(--red); flex: none; }
.stepup__brand strong { color: var(--ink); font-weight: 700; }

.stepup__fp {
  position: relative;
  width: 110px; height: 110px;
  display: grid;
  place-items: center;
  margin: 6px 0;
  color: var(--ink);
}
.stepup__fp svg { color: var(--ink); position: relative; z-index: 2; }
.stepup__fp-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--red);
  border-radius: 50%;
  opacity: 0.5;
  animation: stepupPulse 2s ease-out infinite;
}
.stepup__fp-ring--2 { animation-delay: 1s; }
@keyframes stepupPulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.4); opacity: 0; }
}

.stepup--error .stepup__fp-ring { border-color: #ff5a47; animation-duration: 0.8s; }
.stepup--success .stepup__fp-ring { border-color: #4dff8c; }
.stepup--success .stepup__fp svg { color: #4dff8c; }

.stepup__title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
  text-transform: none;
}
.stepup__sub {
  margin: 0;
  max-width: 380px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.stepup__sub strong { color: var(--ink); font-weight: 700; }

.stepup__progress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin: 6px 0 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stepup__step {
  padding: 5px 10px;
  border: 1px solid var(--line);
  color: var(--ink-3);
  --c: 6px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.stepup__step--done {
  color: #4dff8c;
  border-color: rgba(77,255,140,.45);
  background: rgba(77,255,140,.06);
}
.stepup__step--active {
  color: var(--red);
  border-color: rgba(238,63,44,.5);
  background: rgba(238,63,44,.08);
  animation: stepupActive 1.4s ease-in-out infinite alternate;
}
@keyframes stepupActive {
  from { box-shadow: 0 0 0 0 rgba(238,63,44,.4); }
  to   { box-shadow: 0 0 0 6px rgba(238,63,44,0); }
}

.stepup__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.stepup__why {
  max-width: 420px;
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-3);
  text-align: left;
  padding: 10px 14px;
  border-left: 2px solid var(--red);
  background: rgba(238,63,44,.04);
}
.stepup__why strong { color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .stepup__fp-ring, .stepup__step--active { animation: none !important; }
}

/* ════════════════════════════════════════════════════
   MAIL inline ADD DOMAIN — $100k UX: 1-click expand
   ════════════════════════════════════════════════════ */
.mail-add-domain-inline {
  margin: 12px 0 22px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s ease-out;
  will-change: max-height, opacity;
}
.mail-add-domain-inline.is-show {
  opacity: 1;
  max-height: 600px;
}
.mail-add-domain-inline .ccard {
  position: relative;
  overflow: hidden;
}
.mail-add-domain-inline .ccard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red) 30%, #ff8a5b 50%, var(--red) 70%, transparent);
  box-shadow: 0 0 12px rgba(238,63,44,.6);
  animation: scanline 3s ease-in-out infinite;
}
@keyframes scanline {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
.mail-add-domain-form input[type="text"] {
  background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.2));
  border: 1px solid rgba(238,63,44,.25);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 12px 16px;
  width: 100%;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
  -webkit-text-fill-color: #fff;
}
.mail-add-domain-form input[type="text"]:focus {
  border-color: rgba(238,63,44,.7);
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.3));
  box-shadow: 0 0 0 4px rgba(238,63,44,.08), inset 0 0 20px rgba(238,63,44,.05);
}
.mail-add-domain-form input[type="text"]::placeholder {
  color: rgba(255,255,255,.35);
  font-weight: 400;
}

/* ════════════════════════════════════════════════════
   SUDO TOAST — bottom-right notification for sudo events
   ════════════════════════════════════════════════════ */
.sudo-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(0,0,0,.92), rgba(0,0,0,.85));
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  box-shadow: 0 20px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  --c: 10px;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transform: translate3d(0, 100px, 0);
  opacity: 0;
  transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease-out;
  pointer-events: none;
  will-change: transform, opacity;
}
.sudo-toast.is-show { transform: translate3d(0, 0, 0); opacity: 1; }
.sudo-toast--ok { border-color: rgba(77,255,140,.4); box-shadow: 0 20px 40px rgba(0,0,0,.6), 0 0 30px rgba(77,255,140,.18), inset 0 1px 0 rgba(255,255,255,.08); }
.sudo-toast--error { border-color: rgba(238,63,44,.5); box-shadow: 0 20px 40px rgba(0,0,0,.6), 0 0 30px rgba(238,63,44,.2); }
@media (prefers-reduced-motion: reduce) {
  .sudo-toast { transition: opacity .15s ease-out; transform: none; }
  .sudo-toast.is-show { transform: none; }
}

/* ════════════════════════════════════════════════════
   MILLION-DOLLAR POLISH v5
   - body fade-in (FOUC kill via JS class)
   - typewriter caret
   - off-white ink applied everywhere
   - custom scrollbar, selection, focus rings
   - smooth scroll
   ════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* Refined selection — brand red, off-white text */
::selection { background: var(--red); color: #fff; text-shadow: 0 0 8px rgba(238,63,44,.4); }
::-moz-selection { background: var(--red); color: #fff; }

/* Custom scrollbar — slim, premium */
* { scrollbar-width: thin; scrollbar-color: rgba(245,245,247,.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(245,245,247,.18), rgba(245,245,247,.10));
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(238,63,44,.5), rgba(238,63,44,.3)); background-clip: padding-box; }

/* Focus ring — accessibility + premium */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible { outline-offset: 4px; }

/* ─── TYPEWRITER em — caret + locked sizing ─── */
.hero__type {
  display: inline-block;
  position: relative;
  vertical-align: top;
  /* preserve gradient text fill (from base .hero__title em rules) */
}
.hero__type::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 0.78em;
  margin-left: 0.06em;
  background: linear-gradient(180deg, #ff8a5b, var(--red));
  vertical-align: -0.04em;
  animation: caretBlink 1s steps(2, jump-none) infinite;
  box-shadow: 0 0 12px rgba(238,63,44,.7);
  border-radius: 1px;
  /* WebKit text-fill-color: transparent on parent leaks to child; force solid */
  -webkit-text-fill-color: initial;
}
.hero--domeny .hero__type::after { background: linear-gradient(180deg, #6ee0ff, #4dd8ff); box-shadow: 0 0 12px rgba(77,216,255,.7); }
@keyframes caretBlink { 50% { opacity: 0; } }

/* Disable caret on reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero__type::after { animation: none; }
}

/* ─── Lede gradient text override safety (off-white ink) ─── */
.hero--cosmos .hero__lede strong {
  background: linear-gradient(105deg, #fafafa, #ffd4cd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero--domeny .hero__lede strong {
  background: linear-gradient(105deg, #fafafa, #cfeaff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ─── Type-color authority: lede + paragraph readability boost ─── */
p, .pkg__list li, .diff__cell p, .dom__included li, .dom__pricing p, .hero__lede {
  color: var(--ink-2);
}

/* Ensure full ink color on key headlines */
h1, h2, h3, .hero__title, .section-head__title, .page__title { color: var(--ink); }

/* ─── Button hover micro-elevation ─── */
.btn { transition: background .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .35s var(--ease-out); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ─── Skip anchor smooth offset for fixed nav ─── */
:target { scroll-margin-top: 100px; }

/* ─── prefers-reduced-motion safety — disable body fade timing */
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE POLISH · phone (≤480) + tablet (≤768) edge cases
   Premium 2026 — every page works on every display
   ═══════════════════════════════════════════════════════════════ */

/* phone ≤ 480px — KPI grids & metric stacks collapse to 1 col */
@media (max-width: 480px) {
  .metrics__grid,
  .dom-stats,
  .pricing__notes,
  .stats__row,
  .kpi-row { grid-template-columns: 1fr !important; }

  .hero__kpis { grid-template-columns: repeat(2, 1fr); }
  .hero__kpi { padding: 12px 12px; }
  .hero__kpi-num { font-size: clamp(20px, 6vw, 26px); }
  .hero__kpi-lbl { font-size: 9.5px; }

  .hero__panel {
    padding: 14px 14px 12px;
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero__panel-rows li { font-size: 12px; padding: 6px 0; }
  .hero__panel-rows strong { font-size: 13.5px; }

  .hero__title { font-size: clamp(38px, 11vw, 56px); }
  .hero__lede { font-size: 14.5px; }
  .hero__cta { gap: 8px; }
  .hero__cta .btn { padding: 12px 16px; font-size: 12px; flex: 1 1 auto; min-width: 0; }

  .cards { gap: 16px; padding-left: 14px; padding-right: 14px; }
  .card { padding: 16px; }

  .browser__url { font-size: 10.5px; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* tablet 481–768px — intermediate KPI/grid behavior */
@media (min-width: 481px) and (max-width: 768px) {
  .metrics__grid,
  .dom-stats { grid-template-columns: repeat(2, 1fr); }
}

/* generic safety: any 3-col card grid drops to 1 on phone */
@media (max-width: 540px) {
  .svc__grid,
  .pkg__grid,
  .dom__price-grid,
  .pricing__cards { grid-template-columns: 1fr !important; }
  .kont__grid { grid-template-columns: 1fr !important; gap: 18px; }
}

/* horizontal scroll fallback for wide tables (pricing comparison) */
@media (max-width: 900px) {
  .pricing__table-wrap,
  .compare__wrap,
  .diff__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    scrollbar-width: thin;
  }
}

/* iOS notch + safe area */
@supports (padding: max(0px)) {
  .nav { padding-left: max(var(--pad-x), env(safe-area-inset-left)); padding-right: max(var(--pad-x), env(safe-area-inset-right)); }
  .drawer__nav { padding-left: max(clamp(22px, 6vw, 44px), env(safe-area-inset-left)); padding-right: max(clamp(22px, 6vw, 44px), env(safe-area-inset-right)); padding-bottom: max(clamp(48px, 9vh, 80px), env(safe-area-inset-bottom)); }
}

/* Prevent input zoom on iOS (font-size ≥16px) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="password"],
  textarea,
  select { font-size: 16px; }
}

/* respect reduced motion for menu */
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer__nav, .nav__burger-ico line { transition: opacity .15s linear !important; }
}
/* fresh-test2-1778703095715168567 */

/* ═══ DMARC CHECKER ════════════════════════════════════════════════════ */
.dmarc-check {
  padding: 100px var(--pad-x);
  background: linear-gradient(180deg, transparent, rgba(238, 63, 44, .04) 50%, transparent);
}
.dmarc-check__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.dmarc-check__form {
  display: flex;
  gap: 10px;
  max-width: 600px;
  margin: 30px auto 20px;
  background: rgba(0, 0, 0, .4);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  align-items: stretch;
}
.dmarc-check__prefix {
  display: flex; align-items: center; padding-left: 14px;
  font: 500 13px/1 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, .4);
}
.dmarc-check__input {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 14px 8px;
  color: var(--ink);
  font: 500 15px/1 'JetBrains Mono', monospace;
  letter-spacing: -.005em;
  outline: none;
}
.dmarc-check__input::placeholder { color: rgba(255, 255, 255, .35); }
.dmarc-check__btn { white-space: nowrap; }
.dmarc-check__results {
  margin-top: 26px;
  text-align: left;
  display: none;
}
.dmarc-check__results.is-show { display: block; }
.dmarc-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  margin-bottom: 8px;
}
.dmarc-row__ico { font-size: 20px; }
.dmarc-row__h { flex: 1; }
.dmarc-row__h strong { display: block; font-size: 14px; color: #fff; margin-bottom: 3px; }
.dmarc-row__h small { font-size: 12px; color: rgba(255, 255, 255, .55); }
.dmarc-row--ok { border-color: rgba(74, 222, 128, .25); background: rgba(74, 222, 128, .04); }
.dmarc-row--warn { border-color: rgba(251, 191, 36, .25); background: rgba(251, 191, 36, .04); }
.dmarc-row--bad { border-color: rgba(248, 113, 113, .25); background: rgba(248, 113, 113, .04); }

/* ═══ STATUS LIVE ═══════════════════════════════════════════════════════ */
.status-live {
  padding: 100px var(--pad-x);
}
.status-live__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.status-live__grid {
  margin: 40px 0 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, .35);
}
.status-live__row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  transition: background .2s;
}
.status-live__row:last-child { border-bottom: 0; }
.status-live__row:hover { background: rgba(255, 255, 255, .02); }
.status-live__svc {
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
}
.status-live__metric {
  font: 600 13px/1 'JetBrains Mono', monospace;
  color: var(--ink-2);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.status-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  position: relative;
}
.status-dot--ok {
  background: #4ade80;
  box-shadow: 0 0 14px rgba(74, 222, 128, .6);
  animation: status-pulse 2s ease-in-out infinite;
}
.status-dot--warn { background: #fbbf24; }
.status-dot--bad { background: #f87171; animation: status-pulse 1s ease-in-out infinite; }
@keyframes status-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(1.2); }
}
.status-live__foot {
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
  padding-top: 18px;
}
.status-live__foot a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-color: rgba(238, 63, 44, .4);
}

/* ═══ EXTRAS (6 cards) ═══════════════════════════════════════════════════ */
.extras {
  padding: 100px var(--pad-x);
  background: linear-gradient(180deg, transparent, rgba(74, 222, 128, .025) 50%, transparent);
}
.extras__inner {
  max-width: 1300px;
  margin: 0 auto;
}
.extras__grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.extras__card {
  padding: 28px 26px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
    var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform .35s var(--ease-out), border-color .35s;
  display: flex;
  flex-direction: column;
}
.extras__card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, .2);
}
.extras__card--security:hover { border-color: rgba(238, 63, 44, .4); }
.extras__card--api:hover { border-color: rgba(74, 222, 128, .35); }
.extras__card--calc:hover { border-color: rgba(74, 222, 128, .35); }
.extras__icon {
  font-size: 26px;
  margin-bottom: 12px;
}
.extras__card h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0 0 12px;
  color: #fff;
}
.extras__card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 14px;
  flex: 1;
}
.extras__card ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  flex: 1;
}
.extras__card ul li {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
}
.extras__card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #4ade80;
  font-weight: 700;
}
.extras__link {
  display: inline-block;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font: 600 13px/1 'JetBrains Mono', monospace;
  letter-spacing: .04em;
  color: var(--red);
  text-decoration: none;
  transition: color .2s;
}
.extras__link:hover { color: var(--red-hi); }
.extras__link--big {
  font-size: 22px;
  letter-spacing: 0;
  color: #4ade80;
  font-family: 'JetBrains Mono', monospace;
}
.extras__card a:not(.extras__link) {
  color: #86efac;
  text-decoration: underline;
  text-decoration-color: rgba(74, 222, 128, .3);
}

@media (max-width: 980px) {
  .extras__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .extras__grid { grid-template-columns: 1fr; }
  .dmarc-check__form { flex-direction: column; align-items: stretch; }
  .status-live__row { grid-template-columns: 24px 1fr; }
  .status-live__metric { grid-column: 2; padding-top: 4px; }
}

/* ─── Auth modal: live email check hint (debounced backend feedback) ─────────── */
/* States: is-loading (szary spinner), is-ok (zielony ✓), is-taken (czerwony + link),
   is-suggest (niebieski click-to-fix), is-warn (żółty disposable). Aria-live polite. */
.authform__email-hint {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .55);
  min-height: 0;             /* zero-height gdy pusty (no layout shift) */
  transition: color .15s ease;
}
.authform__email-hint:empty { display: none; }
.authform__email-hint.is-loading { color: rgba(255, 255, 255, .42); }
.authform__email-hint.is-ok      { color: rgba(110, 231, 183, .92); }   /* mint green */
.authform__email-hint.is-taken   { color: rgba(248, 113, 113, .92); }   /* red */
.authform__email-hint.is-suggest { color: rgba(125, 211, 252, .92); }   /* sky blue */
.authform__email-hint.is-warn    { color: rgba(251, 191, 36, .92); }    /* amber */
.authform__email-hint a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.authform__email-hint a:hover { opacity: .85; }

/* ─── Auth modal: "Zapomniałem hasła?" + flash field highlight ─────────────── */
/* Pattern: link mały pod polem hasła, hint pod nim z wyjaśnieniem flow.        */
/* Reset hasła = magic-link login → klw.rpc('user.password.change.v1')          */
.authpane__forgot-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin: -8px 0 8px;
  font-size: .72rem;
}
.authpane__forgot-hint a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .15s ease;
}
.authpane__forgot-hint a:hover { color: var(--c-red, #EE3F2C); text-decoration: underline; }
.authpane__forgot-hint small { color: rgba(255, 255, 255, .42); font-size: .66rem; line-height: 1.3; }

/* Flash highlight gdy nowe pole pojawia się (np. po toggle Firma → NIP) */
@keyframes klyoFieldFlash {
  0%   { box-shadow: 0 0 0 3px rgba(238, 63, 44, .6), 0 0 20px 6px rgba(238, 63, 44, .25); }
  100% { box-shadow: 0 0 0 0 rgba(238, 63, 44, 0),    0 0 0 0 rgba(238, 63, 44, 0); }
}
.field-flash {
  animation: klyoFieldFlash .9s ease-out;
  border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH MODAL · MOBILE RESPONSIVE (touch-friendly, iOS Safari quirks handled)
   Breakpoint 640px = większość mobile portrait. <480 = small mobile (osobny).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Modal full-screen na mobile — bezsens scale + center na małym ekranie */
  .authmodal__panel {
    width: 100vw;
    height: 100dvh;            /* dynamic viewport height — Safari URL bar handled */
    max-width: 100vw;
    max-height: 100dvh;
    top: 0;
    left: 0;
    transform: translate3d(0, 100%, 0);  /* slide-up animation from bottom */
    border-radius: 0;
    clip-path: none;           /* polygon notches znika na mobile */
    border: 0;
    /* 1-column layout: sidebar hidden, main = full width */
    grid-template-columns: 1fr;
  }
  .authmodal.is-open .authmodal__panel {
    transform: translate3d(0, 0, 0);
  }
  /* Hidden sidebar (rail) — perks/branding nie potrzebne na mobile */
  .authmodal__rail {
    display: none !important;
  }
  /* Main panel: większy padding, scroll momentum (iOS) */
  .authmodal__main {
    padding: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .authmodal__head {
    margin-bottom: 14px;
  }
  /* Tabs full-width grid (zamiast wrap flex) */
  .authmodal__tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 12px;
  }
  .authmodal__tab {
    padding: 10px 4px;
    font-size: 11px;
    min-height: 44px;          /* Apple HIG touch target minimum */
  }
  .authmodal__tab-i {
    font-size: 14px;
  }
  /* Form inputs: 16px font = NIE zoom auto na iOS Safari (focus). */
  .authform input[type="email"],
  .authform input[type="password"],
  .authform input[type="text"],
  .authform input[type="tel"],
  .authform input[type="number"] {
    font-size: 16px !important;
    padding: 14px 15px;
    min-height: 48px;          /* większy touch target */
  }
  /* Pill toggle Firma/Prywatne: większy padding, większe target */
  .authform__entity {
    padding: 5px;
  }
  .authform__radio {
    padding: 12px;
    min-height: 44px;
  }
  .authform__radio span {
    font-size: 14px;
  }
  /* Custom checkbox: 22px (Apple HIG dla touch). */
  .authform__check input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
  .authform__check input[type="checkbox"]:checked::after {
    top: 3px;
    left: 6px;
    width: 6px;
    height: 11px;
    border-width: 0 2.5px 2.5px 0;
  }
  /* Submit button: pełna szerokość + większy padding */
  .authform__submit {
    padding: 16px;
    font-size: 15px;
    min-height: 52px;
  }
  /* NIP/firma row na mobile: stack (zamiast 2-col grid Kod+Miasto) */
  .authform__row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  /* Tel field: większe touch target + prefix nie kolizji */
  .authform__tel input[type="tel"] {
    min-height: 48px;
    padding-left: 58px;        /* trochę więcej miejsca dla "+48" pill */
  }
  /* Email hint mniejszy ale czytelny */
  .authform__email-hint {
    font-size: .78rem;
    line-height: 1.4;
    padding-top: 2px;
  }
  /* Forgot link hint: stack pionowo */
  .authpane__forgot-hint {
    align-items: stretch;
    text-align: right;
  }
  .authpane__forgot-hint small {
    font-size: .7rem;
  }
  /* Close button większy + bardziej widoczny */
  .authmodal__close {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}

/* Bardzo małe ekrany — kompaktuj jeszcze bardziej */
@media (max-width: 380px) {
  .authmodal__main { padding: 12px; }
  .authmodal__tab {
    font-size: 10px;
    padding: 8px 2px;
  }
  .authmodal__tab-i { display: none; }  /* icon ukryty żeby tekst się zmieścił */
  .authform { gap: 12px; }
  .authform input[type="email"],
  .authform input[type="password"],
  .authform input[type="text"],
  .authform input[type="tel"] { padding: 12px 14px; min-height: 46px; }
}