/* ═══ FONTS — self-hosted ════════════════════════════════════
   Served from the site itself instead of Google: no render-blocking
   request to a third-party origin before first paint, and no visitor
   IP handed to Google without consent. Latin + latin-ext covers PL/SK/EN. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════
   CATTLEMARKET — design system
   Forest / lime / paper. Archivo + DM Sans + JetBrains Mono.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Surfaces — deepened for richer contrast against lime */
  --forest:      #0a1a10;
  --forest-2:    #10261a;
  --forest-3:    #1b3b28;
  --forest-4:    #2a5a3d;

  --paper:       #f5f2ea;
  --paper-2:     #ebe7db;
  --paper-3:     #ded9c9;

  --ink:         #0a1a10;
  --ink-2:       #2c3a32;
  --ink-3:       #5c6b62;

  /* Brand */
  --lime:        #c4f15a;
  --lime-bright: #d6ff70;
  --lime-deep:   #9dcc32;
  --tag:         #f4b942;

  /* Lines */
  --line:        color-mix(in srgb, var(--ink) 12%, transparent);
  --line-2:      color-mix(in srgb, var(--ink) 20%, transparent);
  --line-d:      color-mix(in srgb, #fff 11%, transparent);
  --line-d2:     color-mix(in srgb, #fff 20%, transparent);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-2xl: 48px;

  /* Rhythm */
  --pad-x: clamp(20px, calc(5 * var(--vw)), 72px);
  --maxw: 1400px;
  --gutter: clamp(20px, calc(3 * var(--vw)), 40px);
  --section-y: clamp(80px, calc(11 * var(--vw)), 176px);

  /* Motion */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --t-press: 130ms var(--ease-out);   /* press feedback  */
  --t-fast:  180ms var(--ease-out);   /* hovers, chips   */
  --t-med:   240ms var(--ease-out);   /* cards, nav      */
  --t-panel: 380ms var(--ease-drawer);/* menus, modals   */
  --t-slow:  800ms var(--ease-out);   /* reveals only    */

  /* Layered elevation — never a single flat blur */
  --sh-sm: 0 1px 2px rgba(10,26,16,.06), 0 2px 8px -2px rgba(10,26,16,.08);
  --sh-md: 0 2px 4px rgba(10,26,16,.05), 0 12px 28px -8px rgba(10,26,16,.12);
  --sh-lg: 0 4px 8px rgba(10,26,16,.05), 0 24px 60px -16px rgba(10,26,16,.18);
  --sh-lime: 0 2px 6px rgba(120,160,40,.2), 0 16px 40px -12px rgba(157,204,50,.45);
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
/* Must out-rank component display rules (.btn is inline-flex, etc.) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: var(--lime); color: var(--forest); }

:focus-visible {
  outline: 2px solid var(--lime-deep);
  outline-offset: 3px;
  border-radius: 3px;
}
.section.dark :focus-visible,
.hero :focus-visible,
.nav :focus-visible { outline-color: var(--lime); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 999;
  background: var(--lime); color: var(--forest);
  padding: 12px 20px; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
}
.skip-link:focus { top: 0; }

/* ── Type ───────────────────────────────────────────────────── */
.display {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* Optical scale — tighter tracking as size grows */
.t-hero  { font-size: clamp(36px, calc(8.4 * var(--vw)), 148px); letter-spacing: -.045em; }
.t-1     { font-size: clamp(34px, calc(5.2 * var(--vw)), 82px);  letter-spacing: -.035em; line-height: .98; }
.t-2     { font-size: clamp(26px, calc(3.2 * var(--vw)), 46px);  letter-spacing: -.03em;  line-height: 1.05; }
.t-3     { font-size: clamp(19px, calc(1.7 * var(--vw)), 25px);  letter-spacing: -.02em;  line-height: 1.2; }

.lead {
  font-size: clamp(16px, calc(1.35 * var(--vw)), 19px);
  line-height: 1.65;
  color: var(--ink-2);
}
.dark .lead, .hero .lead { color: rgba(255,255,255,.72); }

/* Eyebrow — the section-marker device used site-wide */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px;
  background: var(--lime-deep); flex: none;
}
.dark .eyebrow, .hero .eyebrow { color: rgba(255,255,255,.55); }
.dark .eyebrow::before, .hero .eyebrow::before { background: var(--lime); }

.lime { color: var(--lime); }
.lime-deep { color: var(--lime-deep); }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section.paper  { background: var(--paper); }
.section.paper2 { background: var(--paper-2); }
.section.dark   { background: var(--forest); color: #fff; }

/* Section head — shared editorial header block */
.sec-head { max-width: 900px; }
.sec-head .t-1 { margin-top: 20px; }
.sec-head .lead { margin-top: 22px; max-width: 620px; }

/* Grain overlay — gives dark surfaces tactile depth */
.grain::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; z-index: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.grain > * { position: relative; z-index: 1; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--lime);
  --btn-fg: var(--forest);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  white-space: nowrap;
  position: relative; overflow: hidden;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.btn .arr { transition: transform var(--t-fast); }
.btn:hover { box-shadow: var(--sh-lime); background: var(--lime-bright); }
.btn:hover .arr { transform: translateX(4px); }
.btn:active { transform: scale(.97); transition-duration: 130ms; }

.btn-dark  { --btn-bg: var(--forest); --btn-fg: #fff; }
.btn-dark:hover { background: var(--forest-3); }

.btn-ghost {
  --btn-bg: transparent;
  border: 1px solid var(--line-2);
  color: inherit;
}
.dark .btn-ghost, .hero .btn-ghost { border-color: var(--line-d2); }
.btn-ghost:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
  box-shadow: none;
}

.btn-lg { padding: 19px 34px; font-size: 16px; }
.btn-block { width: 100%; }

/* ── Ear-tag chip — the signature brand device ──────────────── */
.tag-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 8px;
  background: var(--tag); color: #33230a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  border-radius: var(--r-xs);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}
.tag-chip::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: rgba(0,0,0,.28);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.4);
}
.tag-chip.is-lime { background: var(--lime); color: var(--forest); }

/* Live badge */
.live-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lime) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--lime) 28%, transparent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime);
}
.live-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--lime);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 70%, transparent);
  animation: ping 2s var(--ease) infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 60%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Reveal motion ──────────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.rv.in { opacity: 1; transform: none; }
.rv-group > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}
.rv-group.in > * { opacity: 1; transform: none; }
.rv-group.in > *:nth-child(1) { transition-delay: 0ms; }
.rv-group.in > *:nth-child(2) { transition-delay: 70ms; }
.rv-group.in > *:nth-child(3) { transition-delay: 140ms; }
.rv-group.in > *:nth-child(4) { transition-delay: 210ms; }
.rv-group.in > *:nth-child(5) { transition-delay: 280ms; }
.rv-group.in > *:nth-child(6) { transition-delay: 350ms; }

/* ── Scroll progress ────────────────────────────────────────── */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px;
  z-index: 200; pointer-events: none;
  background: transparent;
}
.progress i {
  /* scaled, not resized: width changes relayout the page on every scroll frame */
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; will-change: transform;
  background: linear-gradient(90deg, var(--lime-deep), var(--lime));
  box-shadow: 0 0 12px color-mix(in srgb, var(--lime) 60%, transparent);
}

/* ═══ NAV ═══════════════════════════════════════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 150;
  transition: background var(--t-med), box-shadow var(--t-med), backdrop-filter var(--t-med);
}
.nav::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,26,16,.88), rgba(10,26,16,0));
  transition: opacity var(--t-med);
}
.nav.stuck::before { opacity: 0; }
.nav.stuck {
  background: color-mix(in srgb, var(--forest) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line-d), 0 12px 32px -18px rgba(0,0,0,.8);
}
.nav-inner {
  position: relative;
  max-width: var(--maxw); margin-inline: auto;
  padding: 16px var(--pad-x);
  display: flex; align-items: center; gap: 24px;
  color: #fff;
  transition: padding var(--t-med);
}
.nav.stuck .nav-inner { padding-block: 11px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-mark {
  width: 38px; height: 38px; flex: none;
  border-radius: 10px;
  background: var(--lime);
  display: grid; place-items: center;
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--lime) 60%, transparent);
}
.brand-mark img { width: 26px; height: 26px; object-fit: contain; }
.brand-rule { width: 1px; height: 22px; background: var(--line-d2); }
.brand-word {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 17px; letter-spacing: .03em; text-transform: uppercase;
  white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: 30px; margin-inline: auto; }
.nav-link {
  position: relative; padding: 6px 0;
  font-size: 14.5px; font-weight: 500;
  color: rgba(255,255,255,.72);
  transition: color var(--t-fast);
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--lime); border-radius: 1px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: #fff; }

.nav-right { display: flex; align-items: center; gap: 12px; flex: none; }

.lang {
  display: flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line-d);
}
.lang button {
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-press);
}
.lang button:active { transform: scale(.94); }
.lang button:hover { color: #fff; }
.lang button.on { background: var(--lime); color: var(--forest); }

/* Mobile nav */
.burger {
  display: none;
  width: 44px; height: 44px; flex: none;
  place-items: center;
  border: 0; background: none;
  -webkit-tap-highlight-color: transparent;
}
.burger i {
  display: block; position: relative; pointer-events: none;
  width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 260ms var(--ease), background-color 140ms linear;
}
/* Top and bottom bars ride on pseudo-elements so the middle one can
   fade while the outer two rotate into a centred X. */
.burger i::before,
.burger i::after {
  content: ''; position: absolute; left: 0;
  width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 260ms var(--ease);
}
.burger i::before { top: -7px; }
.burger i::after  { top:  7px; }
.burger:active i { transform: scale(.9); }

body.menu-open .burger i { background-color: transparent; }
body.menu-open .burger i::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger i::after  { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 140;
  background: var(--forest);
  padding: 96px var(--pad-x) 40px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--t-panel), transform var(--t-panel), visibility var(--t-panel);
  overflow-y: auto;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(28px, calc(8 * var(--vw)), 40px); letter-spacing: -.03em;
  color: #fff; padding: 14px 0;
  border-bottom: 1px solid var(--line-d);
}
.mobile-menu .btn { margin-top: 26px; }

.mobile-menu .lang { display: none; }

@media (max-width: 1000px) and (pointer: coarse), (max-width: 1000px) and (max-width: 767px) {
  .nav-links { display: none; }
  .burger { display: grid; }
  .nav-right { margin-left: auto; }
}
/* Below 700px the bar can't hold brand + CTA + lang + burger without
   clipping, so the CTA and language switch move into the menu. */
@media (max-width: 700px) {
  .nav-right > .btn { display: none; }
  .nav-inner > .lang, .nav-right > .lang { display: none; }
  .mobile-menu .lang {
    display: flex; align-self: flex-start;
    margin-top: 30px; padding: 5px;
  }
  .mobile-menu .lang button { padding: 11px 20px; font-size: 14px; }
}
@media (max-width: 400px) {
  .brand-word { font-size: 15px; }
  .nav-inner { gap: 12px; }
}

/* ═══ HERO ══════════════════════════════════════════════════
   The photograph is art-directed: on desktop the bull sits in the
   right half, on mobile it sits in the bottom half. The copy takes
   whichever side is empty, so it never lands on the animal.
   Background matches the photo's own green (#07150c) so the image
   edges dissolve into the section at any viewport ratio.
   ═════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: clamp(560px, calc(55 * var(--vw)), 880px);
  padding-top: clamp(104px, calc(13 * var(--vh)), 156px);
  padding-bottom: 0;
  background: #07150c;
  color: #fff;
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;   /* keep the bull anchored right */
}
/* Scrim: heavy on the copy side, clear over the animal */
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #07150c 0%, rgba(7,21,12,.9) 26%, rgba(7,21,12,.4) 38%, rgba(7,21,12,0) 46%),
    linear-gradient(180deg, rgba(7,21,12,.6) 0%, rgba(7,21,12,0) 22%, rgba(7,21,12,0) 78%, rgba(7,21,12,.85) 100%);
}

.hero-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Copy column stops well short of the bull */
.hero-copy { max-width: min(45%, 640px); }
/* Sized to the column, not the viewport: at full .t-hero scale the
   Polish line "za każdą sztukę." wrapped to four lines. */
.hero-title {
  color: #fff;
  font-size: clamp(30px, calc(3.6 * var(--vw)), 52px);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: nowrap;
}
.hero-title .ln { display: block; }
.hero-sub { margin-top: 26px; max-width: 30rem; }
.hero-cta { margin-top: 34px; display: flex; gap: 13px; flex-wrap: wrap; }

/* Trust row is out of the hero on every size now */
.hero-stats { display: none; }
.hero-stats-unused {
  margin-top: clamp(44px, calc(6 * var(--vw)), 84px);
  padding-block: clamp(24px, calc(3 * var(--vw)), 36px);
  border-top: 1px solid var(--line-d);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
.stat .n {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(32px, calc(4 * var(--vw)), 58px);
  letter-spacing: -.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 5px;
}
.stat .n u {
  text-decoration: none; color: var(--lime);
  font-size: .42em; font-weight: 700; letter-spacing: -.01em;
}
.stat .l {
  margin-top: 10px; font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,.6); max-width: 210px;
}

/* Short landscape viewports keep the wide crop, but the bull sits further
   left there, so the copy column gives up a few percent. */
@media (max-width: 1090px) and (orientation: landscape) and (pointer: coarse), (max-width: 1090px) and (orientation: landscape) and (max-width: 767px) {
  .hero-copy { max-width: 42%; }
  .hero-sub { margin-top: 18px; font-size: 15px; }
  .hero-cta { margin-top: 24px; gap: 10px; }
  /* .btn is white-space:nowrap, so a full-size button overflows the
     narrowed column instead of wrapping. Trim it to fit. */
  .hero-cta .btn { padding: 15px 22px; font-size: 14.5px; }
}

/* Portrait art direction: bull drops to the bottom, copy owns the top.
   Gated on orientation so short landscape tablets keep the wide crop. */
@media (max-width: 1090px) and (orientation: portrait) and (pointer: coarse), (max-width: 1090px) and (orientation: portrait) and (max-width: 767px) {
  .hero {
    min-height: min(100svh, 900px);
    padding-top: clamp(96px, 12vh, 124px);
  }
  .hero-media img { object-position: center bottom; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(7,21,12,.94) 0%, rgba(7,21,12,.84) 32%, rgba(7,21,12,.28) 52%, rgba(7,21,12,0) 68%),
      linear-gradient(0deg, #07150c 0%, rgba(7,21,12,0) 14%);
  }
  .hero-body { justify-content: flex-start; }
  .hero-copy { max-width: none; }
  .hero-title { font-size: clamp(28px, calc(7.6 * var(--vw)), 38px); line-height: 1.04; }
  .hero-sub { margin-top: 20px; max-width: 34rem; }

  /* Phone hero is the photograph plus the promise — the buttons and the
     trust row were covering the bull, so both step aside here. The CTA
     lives in the menu and repeats further down the page. */
  .hero-cta,
  .hero-stats { display: none; }


}

@media (max-width: 480px) {
  .hero { padding-top: 92px; }
  .stat .n { font-size: 30px; }
  .stat .l { font-size: 12px; }
}

/* ── Marquee ────────────────────────────────────────────────── */
.marquee {
  background: var(--lime); color: var(--forest);
  overflow: hidden; padding-block: 17px;
}
/* Lives here now — it was defined in the price-ticker block that got
   removed, which silently stopped the marquee. */
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-inner { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee-seq { display: flex; flex: none; }
.marquee-item {
  display: flex; align-items: center; gap: 26px;
  padding-right: 26px;
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(15px, calc(1.7 * var(--vw)), 21px);
  letter-spacing: -.015em; text-transform: uppercase;
  white-space: nowrap;
}
.marquee-item::after {
  content: ''; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: currentColor; opacity: .55;
}

/* ═══ WHY US ════════════════════════════════════════════════ */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(36px, calc(5 * var(--vw)), 84px);
  align-items: start;
  margin-top: clamp(40px, calc(5 * var(--vw)), 72px);
}
.why-figure {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--forest-2);
  box-shadow: var(--sh-lg);
  position: sticky; top: 110px;
}
.why-figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.why-figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10,26,16,.75));
}
.why-figure .fig-badge {
  position: absolute; z-index: 2; top: 22px; right: 22px;
  background: var(--lime); color: var(--forest);
  padding: 13px 19px; border-radius: var(--r-md);
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 25px; letter-spacing: -.03em; line-height: 1;
  box-shadow: var(--sh-md);
  text-align: center;
}
.why-figure .fig-badge small {
  display: block; margin-top: 4px;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 9px; letter-spacing: .14em; opacity: .7;
}
.why-figure .fig-tag { position: absolute; z-index: 2; left: 22px; bottom: 22px; }

.why-body p + p { margin-top: 18px; }
.why-list { margin-top: clamp(32px, calc(4 * var(--vw)), 46px); display: grid; gap: 12px; }
.why-item {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid var(--line);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.why-item:hover {
  background: #fff;
  border-color: var(--line-2);
}
.why-item .ic {
  width: 42px; height: 42px; flex: none;
  border-radius: 12px;
  background: var(--lime); color: var(--forest);
  display: grid; place-items: center;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--lime-deep) 60%, transparent);
}
.why-item h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.why-item p { margin-top: 5px; font-size: 14.2px; color: var(--ink-3); line-height: 1.55; }

/* Satisfaction meter */
.meter { margin-top: 34px; }
.meter-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 12px; gap: 16px;
}
.meter-head .k {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.meter-head .v {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 30px; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.meter-track {
  height: 7px; border-radius: 999px;
  background: var(--paper-3); overflow: hidden;
}
.meter-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--lime-deep), var(--lime));
  transition: width 1.7s var(--ease-out);
}

@media (max-width: 900px) and (pointer: coarse), (max-width: 900px) and (max-width: 767px) {
  .why-grid { grid-template-columns: 1fr; }
  /* `static` here let the absolutely positioned 5% badge escape the
     figure and land on the section heading. `relative` keeps it home
     while still dropping the desktop sticky behaviour. */
  .why-figure { position: relative; top: auto; aspect-ratio: 16 / 11; }
}

/* ═══ FULL-BLEED PHOTO BAND ═════════════════════════════════ */
.band {
  position: relative;
  min-height: clamp(320px, calc(46 * var(--vw)), 560px);
  display: grid; align-items: end;
  overflow: hidden;
  background: var(--forest);
  color: #fff;
}
.band img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.6) brightness(.78);
}
.band::after {
  content: ''; position: absolute; inset: 0;
  /* Only the bottom carries a scrim — the top used to be dimmed for a
     meta line that no longer exists. */
  background: linear-gradient(180deg, rgba(10,26,16,.12) 0%, rgba(10,26,16,.06) 45%, rgba(10,26,16,.88) 100%);
}
.band .container { position: relative; z-index: 1; padding-block: clamp(34px, calc(4.4 * var(--vw)), 64px); text-align: center; }
.band-quote {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(22px, calc(3.4 * var(--vw)), 52px);
  letter-spacing: -.035em; line-height: 1.04;
  /* Runs the full width of the photo rather than stacking in a column */
  max-width: none; text-wrap: nowrap;
}
@media (max-width: 760px) {
  .band-quote { text-wrap: balance; font-size: clamp(24px, calc(7.4 * var(--vw)), 34px); }
}
.band-meta {
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

/* CTA variant — phone is the strongest conversion lever here */
.band-cta { min-height: clamp(280px, calc(34 * var(--vw)), 420px); }
.band-cta-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.band-cta .band-quote { max-width: 20ch; }
.band-cta .btn { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: -.01em; }

/* ═══ PROCESS — timeline rail ═══════════════════════════════ */
.steps {
  margin-top: clamp(44px, calc(5 * var(--vw)), 76px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  position: relative;
}
/* The connecting rail sits behind the nodes */
.steps::before {
  content: '';
  position: absolute; z-index: 0;
  top: 33px; left: calc(12.5% + 20px); right: calc(12.5% + 20px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 11px);
}
.step { position: relative; z-index: 1; }
.step-node {
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 23px; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  transition: background var(--t-med), border-color var(--t-med), transform var(--t-med), color var(--t-med);
}
.paper2 .step-node { background: var(--paper-2); }
.step:hover .step-node { background: var(--lime); border-color: var(--lime); }
.step-time {
  margin-top: 22px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lime-deep);
}
.step h3 { margin-top: 8px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.03em; }
.step p { margin-top: 9px; font-size: 14.2px; line-height: 1.6; color: var(--ink-3); max-width: 30ch; }

@media (max-width: 980px) and (pointer: coarse), (max-width: 980px) and (max-width: 767px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .steps::before { display: none; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .step { display: grid; grid-template-columns: 66px 1fr; gap: 0 20px; }
  .step-node { grid-row: span 3; }
  .step-time { margin-top: 4px; }
  .step p { max-width: none; }
}

/* ═══ CALCULATOR — dark controls, lime payout ═══════════════ */
.calc {
  margin-top: clamp(40px, calc(5 * var(--vw)), 68px);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.calc-controls {
  min-width: 0;
  background: var(--forest-2);
  border: 1px solid var(--line-d);
  border-radius: 32px;
  padding: clamp(24px, calc(3 * var(--vw)), 40px);
  color: #fff;
}

/* Cattle-type pills */
.calc-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-tab {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-d2);
  background: transparent;
  color: rgba(255,255,255,.78);
  font-weight: 700; font-size: 14px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-press);
}
.calc-tab.on {
  background: var(--lime); color: var(--forest);
  border-color: color-mix(in srgb, var(--lime) 30%, transparent);
}
.calc-tab:active { transform: scale(.96); }

.calc-field { margin-top: 30px; }
.calc-field:first-child { margin-top: 0; }
.calc-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.calc-label .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.calc-label .v {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 26px; letter-spacing: -.02em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.calc-field .range { margin-top: 12px; }

/* Range input — styled in both engines, with a real press state */
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  outline: none; cursor: pointer;
  accent-color: var(--lime);
}
.range::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px; background: transparent;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%;
  background: var(--lime);
  border: 3px solid var(--forest-2);
  box-shadow: 0 0 0 1px var(--lime), 0 2px 8px -2px rgba(0,0,0,.6);
  cursor: grab;
  transition: transform var(--t-press);
}
.range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.14); }
.range::-moz-range-track {
  height: 4px; border-radius: 999px; background: rgba(255,255,255,.16);
}
.range::-moz-range-progress {
  height: 4px; border-radius: 999px; background: var(--lime);
}
.range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--lime);
  border: 3px solid var(--forest-2);
  box-shadow: 0 0 0 1px var(--lime);
  cursor: grab;
}
.range:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

/* Currency pills */
.calc-cur { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.calc-cur button {
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line-d2);
  background: transparent; color: rgba(255,255,255,.72);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-press);
}
.calc-cur button.on { background: var(--lime); color: var(--forest); border-color: var(--lime); }
.calc-cur button:active { transform: scale(.95); }

/* Editable base rate — farmers know their own rate, so let them type it */
.rate-row {
  margin-top: 12px;
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line-d2);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.rate-row:focus-within {
  border-color: var(--lime);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 30%, transparent);
}
.rate-row input {
  flex: 1; min-width: 0;
  padding: 15px 18px;
  border: 0; background: transparent; color: #fff;
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 22px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.rate-row input:focus { outline: none; }
.rate-row input::-webkit-outer-spin-button,
.rate-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rate-row input[type=number] { -moz-appearance: textfield; }
.rate-row .suffix {
  display: flex; align-items: center;
  padding: 0 18px;
  border-left: 1px solid var(--line-d);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}
.rate-note {
  margin-top: 10px;
  font-size: 12.5px; line-height: 1.55;
  color: rgba(255,255,255,.45);
}

/* ── Payout panel — lime, so the number is unmissable ───────── */
.calc-out {
  min-width: 0;
  background: var(--lime);
  color: var(--forest);
  border-radius: 32px;
  padding: clamp(24px, calc(3 * var(--vw)), 40px);
  display: flex; flex-direction: column;
}
.calc-out-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--forest) 62%, transparent);
}
.calc-total {
  margin-top: 12px;
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(40px, calc(5 * var(--vw)), 72px);
  line-height: 1; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.calc-total .cur {
  font-size: .34em; letter-spacing: 0;
  color: color-mix(in srgb, var(--forest) 62%, transparent);
}
.calc-rule {
  margin: clamp(20px, calc(2.6 * var(--vw)), 30px) 0 0;
  border: 0; border-top: 1px solid color-mix(in srgb, var(--forest) 18%, transparent);
}
.calc-rows { margin-top: 4px; }
.calc-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0;
  font-size: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--forest) 10%, transparent);
}
.calc-row:last-child { border-bottom: 0; }
.calc-row span { color: color-mix(in srgb, var(--forest) 72%, transparent); }
.calc-row strong {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.calc-row.is-free strong { color: var(--forest); }

.calc-out .btn {
  margin-top: auto;
  margin-block-start: clamp(22px, calc(2.6 * var(--vw)), 30px);
}
.calc-fine {
  margin-top: 14px;
  font-size: 12.5px; line-height: 1.55;
  color: color-mix(in srgb, var(--forest) 58%, transparent);
}

@media (max-width: 900px) and (pointer: coarse), (max-width: 900px) and (max-width: 767px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ CONTACT ═══════════════════════════════════════════════ */
.contact-grid {
  margin-top: clamp(40px, calc(5 * var(--vw)), 64px);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--gutter);
  align-items: stretch;      /* both cards share the tallest height */
}
.contact-grid > * { min-width: 0; }

.info-card {
  position: relative; overflow: hidden;
  background: var(--forest); color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(26px, calc(3 * var(--vw)), 44px);
  box-shadow: var(--sh-lg);
  display: flex; flex-direction: column;
  height: 100%;
}
/* Channels take the slack so the area block settles at the bottom */
.info-card .channels { margin-top: clamp(26px, calc(3 * var(--vw)), 34px); }
.info-card .area-block { margin-top: auto; }
.info-card::after {
  content: ''; position: absolute; z-index: 0;
  right: -130px; bottom: -130px; width: 320px; height: 320px;
  border-radius: 50%; background: var(--lime); opacity: .08;
}
.info-card > * { position: relative; z-index: 1; }
.info-card h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(22px, calc(2.6 * var(--vw)), 32px); letter-spacing: -.03em; }
.info-card > p { margin-top: 14px; color: rgba(255,255,255,.68); font-size: 15px; }
.channels { margin-top: 30px; display: grid; gap: 11px; }
.channel {
  display: flex; align-items: center; gap: 15px;
  padding: 15px 17px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-d);
  transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
a.channel:active { transform: scale(.99); }
.channel:hover {
  background: rgba(255,255,255,.09);
  border-color: var(--line-d2);
}
.channel .ic {
  width: 42px; height: 42px; flex: none;
  border-radius: 11px; background: var(--lime); color: var(--forest);
  display: grid; place-items: center;
}
/* The wrapper is a <span>; without this the label and value flow
   inline and render as "TELEFON+48 692 123 195". */
.channel > span:last-child {
  display: flex; flex-direction: column; min-width: 0;
}
.channel .k {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}
.channel .v {
  font-weight: 600; font-size: 15px; margin-top: 3px;
  overflow-wrap: anywhere;
}

/* Form */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(22px, calc(3 * var(--vw)), 44px);
  box-shadow: var(--sh-md);
}
.form-bar { display: flex; gap: 7px; margin-bottom: 26px; }
.form-bar i {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--paper-3); overflow: hidden;
  position: relative;
}
.form-bar i::after {
  content: ''; position: absolute; inset: 0;
  background: var(--lime-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.form-bar i.done::after, .form-bar i.on::after { transform: scaleX(1); }

.form-step-k {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3);
}
.form-step-h {
  margin-top: 9px; margin-bottom: 26px;
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(22px, calc(2.6 * var(--vw)), 31px); letter-spacing: -.03em;
}
.fstep { display: none; }
.fstep.on { display: block; animation: fadein .45s var(--ease-out); }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field > label {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.field input, .field textarea {
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 15px; color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  width: 100%;
}
.field input:focus, .field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--forest-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 40%, transparent);
}
.field input.err, .field textarea.err { border-color: #c0392b; }
.field textarea { resize: vertical; min-height: 108px; }
.field-msg { font-size: 12.5px; color: #c0392b; font-weight: 600; }

/* Option buttons */
.opts { display: grid; gap: 10px; }
.opts.c2 { grid-template-columns: repeat(2, 1fr); }
.opts.c3 { grid-template-columns: repeat(3, 1fr); }
.opts.c4 { grid-template-columns: repeat(4, 1fr); }
.opt {
  padding: 15px 16px;
  border: 1.5px solid var(--line-2);
  border-radius: 13px;
  background: var(--paper);
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-press);
}
.opt:active { transform: scale(.985); }
.opt.on {
  background: var(--forest); border-color: var(--forest); color: #fff;
  box-shadow: var(--sh-md);
}
.opt .flag { font-size: 21px; line-height: 1; margin-bottom: 7px; }
.opt .t { font-weight: 700; font-size: 14.5px; }
.opt .s { font-size: 12px; opacity: .68; margin-top: 3px; }

/* Captcha */
.captcha {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 12px 15px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 13px;
}
.captcha-q {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: 21px; letter-spacing: .02em;
  user-select: none; white-space: nowrap;
}
.captcha-q em { font-style: normal; color: var(--lime-deep); }
.captcha input {
  flex: 1; min-width: 90px; max-width: 130px;
  padding: 11px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px; font-weight: 700; text-align: center;
}
.captcha input:focus {
  outline: none; border-color: var(--forest-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 40%, transparent);
}
.captcha input.err { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.14); }
.captcha-new {
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: #fff; display: grid; place-items: center;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-press);
}
.captcha-new:active { transform: scale(.92); }

.form-actions {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 28px; flex-wrap: wrap;
}
.form-actions .btn { flex: 1; min-width: 140px; }

.form-done { text-align: center; padding: 30px 8px; }
.form-done .check {
  width: 74px; height: 74px; margin: 0 auto 22px;
  border-radius: 50%; background: var(--lime); color: var(--forest);
  display: grid; place-items: center;
  animation: pop .55s var(--ease-out);
  box-shadow: var(--sh-lime);
}
@keyframes pop { from { transform: scale(0); opacity: 0; } 62% { transform: scale(1.13); } to { transform: scale(1); opacity: 1; } }
.form-done h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.035em; }
.form-done p { margin-top: 12px; color: var(--ink-3); }
.form-done .btn { margin-top: 26px; }

@media (max-width: 980px) and (pointer: coarse), (max-width: 980px) and (max-width: 767px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .fgrid { grid-template-columns: 1fr; }
  .opts.c3, .opts.c4 { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ FOOTER ════════════════════════════════════════════════ */
.footer {
  background: var(--forest); color: #fff;
  padding-top: clamp(56px, calc(7 * var(--vw)), 96px);
  position: relative; overflow: hidden;
}
.footer-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: clamp(28px, calc(4 * var(--vw)), 56px);
  padding-bottom: clamp(40px, calc(5 * var(--vw)), 64px);
  border-bottom: 1px solid var(--line-d);
}
.footer h2 {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 18px;
}
.footer-tag { margin-top: 20px; color: rgba(255,255,255,.62); font-size: 14.5px; max-width: 34ch; }
.footer-links { display: grid; gap: 11px; }
.footer-links a, .footer-links button {
  color: rgba(255,255,255,.72); font-size: 14.5px;
  transition: color var(--t-fast); text-align: left;
  width: fit-content;
}
.footer-links a:hover, .footer-links button:hover { color: var(--lime); }
.footer-links .market { color: rgba(255,255,255,.72); font-size: 14.5px; }
.footer-bottom {
  padding-block: 26px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255,255,255,.45);
}
.footer-bottom .legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom button:hover { color: var(--lime); }
/* Company disclosures required on a sp. z o.o. website (art. 206 KSH) */
.footer-company {
  margin: 0; padding: 0 0 26px;
  font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,.34);
  max-width: 980px;
}

/* Oversized wordmark watermark */
.footer-wm {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(56px, calc(15 * var(--vw)), 220px);
  letter-spacing: -.05em; line-height: .8;
  color: rgba(255,255,255,.035);
  text-align: center;
  padding-bottom: 10px;
  user-select: none; pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 900px) and (pointer: coarse), (max-width: 900px) and (max-width: 767px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ═══ COOKIE BANNER ═════════════════════════════════════════ */
.ck {
  position: fixed; z-index: 180;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 560px;
  background: var(--forest); color: #fff;
  border: 1px solid var(--line-d2);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  box-shadow: 0 20px 60px -12px rgba(0,0,0,.6);
  transform: translateY(140%);
  transition: transform .6s var(--ease-out);
}
.ck.in { transform: none; }
.ck p { font-size: 14px; color: rgba(255,255,255,.75); }
.ck-actions { display: flex; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.ck-actions .btn { padding: 11px 20px; font-size: 13.5px; }
.ck-prefs { margin-top: 18px; display: none; }
.ck-prefs.on { display: block; }
.ck-row {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 0; border-top: 1px solid var(--line-d);
}
.ck-row .txt { flex: 1; }
.ck-row .t { font-weight: 700; font-size: 14px; }
.ck-row .s { font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 3px; }

/* Toggle */
.tgl {
  width: 42px; height: 24px; flex: none; margin-top: 2px;
  border-radius: 999px; background: rgba(255,255,255,.16);
  position: relative; transition: background var(--t-fast);
}
.tgl::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform var(--t-fast);
}
.tgl.on { background: var(--lime); }
.tgl.on::after { transform: translateX(18px); }
.tgl[disabled] { opacity: .45; cursor: not-allowed; }

/* ═══ POLICY MODAL ══════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(6,16,10,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-panel), visibility var(--t-panel);
}
.modal.in { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-lg);
  width: min(720px, 100%); max-height: min(85vh, 900px);
  overflow-y: auto;
  padding: clamp(26px, calc(4 * var(--vw)), 48px);
  position: relative;
  box-shadow: 0 32px 90px -20px rgba(0,0,0,.6);
  transform: translateY(18px) scale(.98);
  transition: transform var(--t-med);
}
.modal.in .modal-box { transform: none; }
.modal-box h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(24px, calc(3 * var(--vw)), 34px); letter-spacing: -.03em; padding-right: 44px; }
.modal-date {
  display: inline-block; margin-top: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.modal-box h3 { margin-top: 26px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.modal-box p { margin-top: 7px; font-size: 14.5px; color: var(--ink-2); line-height: 1.62; }
.modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper-2); display: grid; place-items: center;
  font-size: 17px; transition: background var(--t-fast), transform var(--t-fast);
}
.modal-close:active { transform: scale(.9); }



/* ── Hover lift, gated ──────────────────────────────────────────
   Touch devices fire :hover on tap and leave the state stuck, so
   every transform-based hover lives behind a pointer query.       */
@media (hover: hover) and (pointer: fine) {
  .btn:hover              { transform: translateY(-2px); }
  .btn-dark:hover         { box-shadow: var(--sh-lg); }
  .phone-link:hover       { transform: translateY(-2px); }
  .why-item:hover         { transform: translateX(5px); }
  .channel:hover          { transform: translateX(4px); }
  .process-card:hover,
  .offer-card:hover,
  .post-card:hover,
  .arg:hover              { transform: translateY(-6px); }
  .step:hover .step-node  { transform: scale(1.08) rotate(-4deg); box-shadow: var(--sh-lime); }
  .why-figure:hover img,
  .offer-card:hover .offer-card-media img,
  .post-card:hover .post-media img { transform: scale(1.05); }
  .captcha-new:hover      { background: var(--lime); border-color: var(--lime-deep); transform: rotate(180deg); }
  .modal-close:hover      { background: var(--paper-3); transform: rotate(90deg); }
  .opt:hover              { border-color: var(--forest-3); background: #fff; }
  .card-link:hover        { gap: 13px; color: var(--lime-deep); }
  .post-card:hover .post-more { gap: 13px; }
}

/* ═══ Motion & print ════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv, .rv-group > * { opacity: 1 !important; transform: none !important; }
  .marquee-inner { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MULTI-PAGE — subpage hero, article prose, blog cards, offer grid
   ═══════════════════════════════════════════════════════════════ */

/* ── Subpage hero (shorter than the landing hero) ───────────── */
.page-hero {
  position: relative;
  background: #07150c; color: #fff;
  padding-top: clamp(148px, calc(17 * var(--vh)), 196px);
  padding-bottom: clamp(56px, calc(7 * var(--vw)), 92px);
  min-height: clamp(360px, calc(34 * var(--vw)), 520px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.page-hero > .container { width: 100%; }
.page-hero::before {
  content: ''; position: absolute; z-index: -1;
  top: -30%; right: -10%; width: calc(55 * var(--vw)); height: calc(55 * var(--vw));
  max-width: 760px; max-height: 760px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--lime) 14%, transparent), transparent 68%);
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: saturate(.5) brightness(.62);
}
.page-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,21,12,.78) 0%, rgba(7,21,12,.42) 42%, rgba(7,21,12,.92) 100%),
    linear-gradient(90deg, rgba(7,21,12,.86) 0%, rgba(7,21,12,.25) 58%, rgba(7,21,12,0) 82%);
}
.page-hero h1 { margin-top: 20px; color: #fff; font-size: clamp(30px, calc(4.4 * var(--vw)), 60px); }
.page-hero .lead { margin-top: 22px; max-width: 620px; }
.page-hero-cta { margin-top: 32px; display: flex; gap: 13px; flex-wrap: wrap; align-items: center; }

/* Phone link styled as a quiet secondary action */
.phone-link {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 24px; border-radius: 999px;
  border: 1px solid var(--line-d2);
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14.5px;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.phone-link:hover { background: rgba(255,255,255,.08); border-color: var(--lime); }

/* ── Breadcrumbs ────────────────────────────────────────────── */
.crumbs {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.crumbs a { transition: color var(--t-fast); }
.crumbs a:hover { color: var(--lime); }
.crumbs span[aria-current] { color: rgba(255,255,255,.85); }
.crumbs .sep { opacity: .4; }

/* ── Offer cards (skup-bydła: 3 categories) ─────────────────── */
.offer-grid {
  margin-top: clamp(38px, calc(5 * var(--vw)), 64px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter);
}
.offer-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.paper2 .offer-card { background: #fff; }
.offer-card:hover { box-shadow: var(--sh-lg); border-color: transparent; }
.offer-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--forest-2); }
.offer-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }

.offer-card-media .tag-chip { position: absolute; left: 16px; bottom: 16px; z-index: 1; }
.offer-card-body { padding: clamp(20px, calc(2.4 * var(--vw)), 30px); display: flex; flex-direction: column; flex: 1; }
.offer-card h3 {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(20px, calc(2 * var(--vw)), 26px); letter-spacing: -.03em;
}
.offer-card > .offer-card-body > p { margin-top: 11px; font-size: 14.5px; color: var(--ink-3); line-height: 1.6; }
.offer-specs { margin-top: 20px; display: grid; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); }
.offer-specs li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.8px; color: var(--ink-2); line-height: 1.5;
  min-width: 0; overflow-wrap: anywhere;
}
.offer-specs li::before {
  content: ''; flex: none; width: 6px; height: 6px; margin-top: 7px;
  border-radius: 50%; background: var(--lime-deep);
}
.offer-card .card-link {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14.5px; color: var(--ink);
  transition: gap var(--t-fast), color var(--t-fast);
}
@media (max-width: 980px) and (pointer: coarse), (max-width: 980px) and (max-width: 767px) { .offer-grid { grid-template-columns: 1fr; } }

/* ── Argument tiles (4 reasons) ─────────────────────────────── */
.args {
  margin-top: clamp(38px, calc(5 * var(--vw)), 64px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);
}
.arg {
  padding: clamp(24px, calc(2.6 * var(--vw)), 34px);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ink) 3.5%, transparent);
  border: 1px solid var(--line);
  transition: transform var(--t-med), box-shadow var(--t-med), background var(--t-med);
}
.dark .arg { background: rgba(255,255,255,.045); border-color: var(--line-d); }
.arg:hover { box-shadow: var(--sh-md); }
.arg .k {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(34px, calc(3.6 * var(--vw)), 48px); letter-spacing: -.045em; line-height: 1;
  color: var(--lime-deep);
}
.dark .arg .k { color: var(--lime); }
.arg h3 { margin-top: 16px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.arg p { margin-top: 9px; font-size: 14px; color: var(--ink-3); line-height: 1.6; }
.dark .arg p { color: rgba(255,255,255,.62); }

@media (max-width: 1000px) and (pointer: coarse), (max-width: 1000px) and (max-width: 767px) { .args { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .args { grid-template-columns: 1fr; } }

/* ── Blog listing ───────────────────────────────────────────── */
.post-grid {
  margin-top: clamp(38px, calc(5 * var(--vw)), 64px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter);
}
.post-card {
  grid-column: span 1;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.post-card:hover { box-shadow: var(--sh-lg); }
/* First post runs full width as the featured story */
.post-card.is-featured { grid-column: 1 / -1; flex-direction: row; }
.post-card.is-featured .post-media { width: 44%; aspect-ratio: auto; }
.post-card.is-featured .post-body { flex: 1; justify-content: center; padding: clamp(26px, calc(3.4 * var(--vw)), 48px); }
.post-card.is-featured h2 { font-size: clamp(23px, calc(2.9 * var(--vw)), 38px); }

.post-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--forest-2); }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }

.post-flag {
  position: absolute; top: 15px; left: 15px; z-index: 1;
  padding: 6px 12px; border-radius: 999px;
  background: var(--lime); color: var(--forest);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.post-body { padding: clamp(20px, calc(2.3 * var(--vw)), 28px); display: flex; flex-direction: column; flex: 1; }
.post-meta {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.post-meta .cat { color: var(--lime-deep); font-weight: 700; }
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
.post-card h2 {
  margin-top: 13px;
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(18px, calc(1.7 * var(--vw)), 22px); letter-spacing: -.03em; line-height: 1.18;
  text-wrap: balance;
}
.post-card h2 a { transition: color var(--t-fast); }
.post-card:hover h2 a { color: var(--lime-deep); }
.post-card > .post-body > p { margin-top: 11px; font-size: 14.3px; color: var(--ink-3); line-height: 1.6; }
.post-more {
  margin-top: auto; padding-top: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px;
  transition: gap var(--t-fast);
}


@media (max-width: 980px) and (pointer: coarse), (max-width: 980px) and (max-width: 767px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-card.is-featured { flex-direction: column; }
  .post-card.is-featured .post-media { width: 100%; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) { .post-grid { grid-template-columns: 1fr; } }

/* ── Article (prose) ────────────────────────────────────────── */
.article-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(36px, calc(5 * var(--vw)), 72px);
  align-items: start;
}
.prose { max-width: 72ch; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  margin-top: 2em;
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(23px, calc(2.4 * var(--vw)), 31px); letter-spacing: -.032em; line-height: 1.15;
  color: var(--ink);
  scroll-margin-top: 110px;
}
.prose h3 {
  margin-top: 1.7em;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: clamp(17.5px, calc(1.5 * var(--vw)), 20px); letter-spacing: -.02em;
  color: var(--ink);
  scroll-margin-top: 110px;
}
.prose p strong { color: var(--ink); font-weight: 700; }
.prose ul { margin-top: 1em; display: grid; gap: .6em; }
.prose li { position: relative; padding-left: 26px; }
.prose li::before {
  content: ''; position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep);
}
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--lime-deep);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.prose a:hover { color: var(--lime-deep); }
.prose hr { margin-top: 2.4em; border: 0; border-top: 1px solid var(--line); }
/* Sources block after the rule reads as fine print */
.prose hr + p { margin-top: 1.4em; font-size: 13.2px; line-height: 1.7; color: var(--ink-3); }
.prose hr + p a { word-break: break-word; font-family: 'JetBrains Mono', monospace; font-size: .94em; }

.article-lead {
  font-size: clamp(18px, calc(1.7 * var(--vw)), 21px);
  line-height: 1.6; color: var(--ink-2);
  max-width: 62ch;
}

/* Sticky aside */
.article-aside { position: sticky; top: 108px; display: grid; gap: 16px; }
.aside-card {
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--forest); color: #fff;
  box-shadow: var(--sh-md);
  position: relative; overflow: hidden;
}
.aside-card::after {
  content: ''; position: absolute; right: -90px; bottom: -90px;
  width: 220px; height: 220px; border-radius: 50%;
  background: var(--lime); opacity: .09;
}
.aside-card > * { position: relative; z-index: 1; }
.aside-card h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.03em; }
.aside-card p { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.68); line-height: 1.6; }
.aside-card .btn { margin-top: 18px; width: 100%; }
.aside-card .phone-link { margin-top: 9px; width: 100%; justify-content: center; padding: 13px 18px; font-size: 13.5px; }

.toc {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.toc h4 {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 14px;
}
.toc ol { display: grid; gap: 9px; counter-reset: toc; }
.toc a {
  display: block; font-size: 13.8px; line-height: 1.45; color: var(--ink-2);
  padding-left: 20px; position: relative;
  transition: color var(--t-fast);
}
.toc a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--lime-deep);
}
.toc a:hover { color: var(--lime-deep); }

@media (max-width: 1040px) and (pointer: coarse), (max-width: 1040px) and (max-width: 767px) {
  .article-wrap { grid-template-columns: 1fr; }
  .article-aside { position: static; grid-template-columns: 1fr 1fr; display: grid; }
}
@media (max-width: 700px) { .article-aside { grid-template-columns: 1fr; } }

/* ── Related posts ──────────────────────────────────────────── */
.related-grid { margin-top: clamp(32px, calc(4 * var(--vw)), 52px); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
@media (max-width: 760px) { .related-grid { grid-template-columns: 1fr; } }

/* ── Simple contact form (kontakt page) ─────────────────────── */
.simple-form .fgrid { gap: 17px; }
.simple-form .field-note {
  margin-top: 18px; font-size: 12.8px; color: var(--ink-3); text-align: center;
}
.req { color: var(--lime-deep); }

/* ═══════════════════════════════════════════════════════════════
   CONTACT — single-screen form (ported from the redesign)
   ═══════════════════════════════════════════════════════════════ */

/* Area-of-operation chips inside the dark info card */
.area-block { margin-top: clamp(26px, calc(3 * var(--vw)), 36px); padding-top: 24px; border-top: 1px solid var(--line-d); }
.area-block .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.area-chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.area-chips > span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-d2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}
.area-chips > span > span { border: 0; padding: 0; }

/* Native selects, matched to the text inputs */
.field select {
  padding: 14px 40px 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background-color: var(--paper);
  color: var(--ink);
  font-size: 15px;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235c6b62' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.field select:focus {
  outline: none; background-color: #fff;
  border-color: var(--forest-3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 40%, transparent);
}
.field select.err { border-color: #c0392b; }

/* The single-screen form card */
.form-card h2.form-title {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(22px, calc(2.6 * var(--vw)), 30px); letter-spacing: -.03em;
}
.form-card > form > .form-sub,
.form-card .form-sub {
  margin-top: 9px; margin-bottom: 26px;
  font-size: 14.5px; color: var(--ink-3);
}
.field-note { margin-top: 16px; font-size: 12.6px; color: var(--ink-3); text-align: center; }
.req { color: var(--lime-deep); }

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

/* ═══════════════════════════════════════════════════════════════
   MOBILE REFINEMENT
   Everything below fixes layout that technically fits but reads
   as unresolved on a phone: orphaned pills, uneven CTAs, dead
   space above the fold, spacing tuned for a 1440px canvas.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  /* Hero rules live with the hero now (it is art-directed and
     orientation-aware); duplicating them here overrode margin-top:auto
     on the stats and stopped them anchoring to the bottom. */

  /* Section rhythm: the desktop scale is too airy on a phone */
  .section { padding-block: 64px; }
  .sec-head .t-1 { margin-top: 14px; }
  .sec-head .lead { margin-top: 16px; }
}

@media (max-width: 620px) {
  /* Three pills wrapped 2 + 1, leaving "Cielęta" orphaned on its
     own row. A 3-up grid keeps them even at any label length. */
  .calc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .calc-tab { padding: 12px 6px; font-size: 13px; text-align: center; }

  .calc-cur { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .calc-cur button { padding: 10px 4px; text-align: center; }

  /* Tighten the control stack — 30px gaps made the card very tall */
  .calc-field { margin-top: 22px; }
  .calc-label .v { font-size: 22px; }
  .calc-controls, .calc-out { border-radius: 24px; }

  /* The payout is the point of the section: keep it large */
  .calc-total { font-size: clamp(38px, calc(12 * var(--vw)), 54px); }
  .calc-row { padding: 11px 0; font-size: 13.5px; }

  .rate-row input { font-size: 19px; padding: 13px 15px; }
  .rate-row .suffix { padding: 0 14px; font-size: 11.5px; }
}

@media (max-width: 560px) {
  /* Cards: trim the inner padding so content keeps its width */
  .info-card, .form-card { padding: 22px 20px; }
  .info-card .area-block { margin-top: 26px; padding-top: 20px; }

  /* Country chips wrapped 3 + 1; two even rows read better */
  .area-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .area-chips > span { justify-content: center; }

  .channel { padding: 13px 14px; gap: 13px; }
  .channel .ic { width: 38px; height: 38px; }
  .channel .v { font-size: 14.5px; }

  /* Full-bleed bands need less height when the type is smaller */
  .band { min-height: 280px; }
  .band-cta-inner { gap: 22px; }
  .band-cta .btn { width: 100%; justify-content: center; }

  .footer { padding-top: 56px; }
  .footer-links .market { color: rgba(255,255,255,.72); font-size: 14.5px; }
.footer-bottom { flex-direction: column; gap: 12px; }
}

@media (max-width: 400px) {
  .calc-tab { font-size: 12px; letter-spacing: -.01em; }
  .calc-cur button { font-size: 11px; }
  .area-chips > span { font-size: 9.5px; padding: 7px 9px; letter-spacing: .04em; }
}

/* Contact cards stack on narrow screens — equal height only
   applies while they sit side by side. */
@media (max-width: 980px) and (pointer: coarse), (max-width: 980px) and (max-width: 767px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .info-card { height: auto; }
  .info-card .area-block { margin-top: 26px; }
}


/* ═══════════════════════════════════════════════════════════════
   DESKTOP SCALE-TO-FIT
   JS sets `zoom` on <html>; the rules below stop the layout from
   reacting to the *scaled* width. Everything between the desktop
   breakpoint and the design width must behave as if it were 1440.
   ═══════════════════════════════════════════════════════════════ */
/* 1vw / 1vh of the DESIGN canvas (1440 × 900). Unscaled they are the real
   units; scaled they are pinned, otherwise every vw-based size shrinks twice
   (once with the window, once with the zoom) and the copy stops being exact. */
:root { --vw: 1vw; --vh: 1vh; }
html.is-scaled { --vw: 14.4px; --vh: 9px; }

html.is-scaled body { width: 1440px; }
/* The policy modal must fit the real screen, not the design canvas. */
html.is-scaled .modal-box { max-height: min(calc(var(--vh-css) * .85), 900px); }

/* Fixed elements measure the unzoomed viewport, so they need the
   post-zoom width/height that JS publishes. */
html.is-scaled .nav,
html.is-scaled .progress,
html.is-scaled .mobile-menu,
html.is-scaled .modal { width: var(--vw-css); }
html.is-scaled .mobile-menu,
html.is-scaled .modal { height: var(--vh-css); }
html.is-scaled .ck { right: auto; }

/* min-height in svh would shrink with the zoom, so pin the hero to
   the design height instead of the scaled viewport. */
html.is-scaled .hero { min-height: 792px; }
html.is-scaled .page-hero { min-height: 490px; }


/* ═══════════════════════════════════════════════════════════════
   MOBILE HERO — art-directed variants
   Desktop is untouched: copy left, wide crop, bull right. Below the
   portrait breakpoint the hero becomes a designed panel instead.
   The headline sits over an outlined V4, with a promise strip and a
   single full-width action pinned to the foot.
   ═══════════════════════════════════════════════════════════════ */

/* Condensed display cut, via Archivo's variable width axis */
.hero-title {
  font-stretch: 72%;
  text-transform: uppercase;
  letter-spacing: -.015em;
}
.hero-strip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
}
.hero-strip i { font-style: normal; opacity: .5; }

/* Desktop: the extra furniture stays out of the way */
.hero-foot { display: none; }
.hero-sub span { display: block; }

@media (max-width: 1090px) and (orientation: portrait) and (pointer: coarse), (max-width: 1090px) and (orientation: portrait) and (max-width: 767px) {
  .hero {
    display: flex; flex-direction: column;
    /* svh = viewport WITH the toolbars showing. Like lvh it is a constant —
       it never moves while scrolling — but it also matches what the visitor
       actually sees on load, so the foot CTA lands on screen instead of
       behind the address bar. (dvh would track the bar and re-crop the photo
       every frame; lvh makes the hero taller than the screen and pushed the
       CTA up into the middle of the bull.) */
    min-height: 100svh;
    padding-top: 0;
    background: #07150c;
  }
  .hero-body { flex: 0 0 auto; justify-content: flex-start; padding-top: 124px; }
  .hero-copy { max-width: none; }

  .hero-title {
    font-stretch: 66%;
    font-weight: 800;
    font-size: clamp(52px, calc(17 * var(--vw)), 86px);
    line-height: .84;
    letter-spacing: -.02em;
    margin: 0;
  }
  .hero-title .ln { display: block; }
  .hero-title .ln-3 { font-size: .52em; line-height: .95; margin-top: .1em; }

  .hero-sub {
    margin-top: 26px;
    font-size: 16.5px; line-height: 1.5;
    max-width: 30ch;
  }
  .hero-sub span { display: block; }

  /* Landing hero on a phone is headline + bull + one action, nothing else.
     Three lines of promise text sat right where the bull's head is, and no
     amount of spacing kept them clear on every screen height. The same
     promises are on the trust marquee immediately below, and the foot strip
     repeats the two that matter. Desktop keeps the copy — there is room. */
  .hero-b .hero-sub { display: none; }

  /* Buttons move to the fixed foot below */
  .hero-cta { display: none; }

  .hero-foot {
    display: block;
    margin-top: auto;
    position: relative; z-index: 2;
    padding: 0 var(--pad-x) calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .hero-strip {
    color: rgba(255,255,255,.72);
    font-size: clamp(8.5px, calc(2.5 * var(--vw)), 10px);
    letter-spacing: .06em;
    white-space: nowrap;
    margin-bottom: 14px;
    text-align: center;
  }
  .hero-action {
    width: 100%; justify-content: center; gap: 14px;
    padding: 21px 26px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 12px;
  }

  /* Photo sits low; the copy owns the top */
  .hero-media img { object-position: center bottom; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(7,21,12,.5) 0%, rgba(7,21,12,.1) 34%, rgba(7,21,12,0) 56%),
      linear-gradient(0deg, #07150c 4%, rgba(7,21,12,.7) 16%, rgba(7,21,12,0) 34%);
  }

  .hero-b .hero-body { position: relative; z-index: 1; }
  .hero-b .hero-title .ln-1,
  .hero-b .hero-title .ln-3 { color: var(--paper); }
  .hero-b .hero-sub { color: rgba(255,255,255,.82); }
}

@media (max-width: 380px) {
  .hero-title { font-size: clamp(44px, calc(15.5 * var(--vw)), 60px); }
  .hero-sub { font-size: 15.5px; }
  .hero-action { font-size: 13.5px; padding: 19px 20px; letter-spacing: .08em; }
}

/* Mobile menu CTA: a full-bleed lime slab shouted over the nav items
   and fought the brand. Outlined, with a lime rule and arrow instead. */
.mobile-menu .btn {
  align-self: flex-start;
  width: auto;
  background: transparent;
  color: #fff;
  border: 1px solid var(--line-d2);
  border-radius: 999px;
  padding: 15px 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  box-shadow: none;
}
.mobile-menu .btn .arr { color: var(--lime); }
.mobile-menu .btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .mobile-menu .btn:hover {
    background: rgba(255,255,255,.06);
    border-color: var(--lime);
    transform: none; box-shadow: none;
  }
}

/* Legal links parked at the bottom of the mobile menu */
.menu-legal {
  margin-top: auto;
  padding-top: 28px;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.menu-legal button {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  transition: color var(--t-fast);
}
.menu-legal button:active { color: var(--lime); }
@media (hover: hover) and (pointer: fine) {
  .menu-legal button:hover { color: var(--lime); }
}

/* ═══ /skup-bydla/ HERO ═════════════════════════════════════════
   Same full-bleed treatment as the landing page, plus a secondary
   text action and a meta line under the buttons.
   ═══════════════════════════════════════════════════════════════ */
.hero-skup .hero-title { font-size: clamp(40px, calc(5.6 * var(--vw)), 88px); line-height: .88; }
.hero-skup .hero-title .ln-1 { color: var(--paper); }
.hero-skup .hero-cta { align-items: center; gap: 18px; }

/* Secondary action reads as a link, not a second button */
.btn-text {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  padding: 6px 2px;
  transition: gap var(--t-fast), color var(--t-fast);
}
.btn-text .arr { width: 20px; height: 20px; }
.btn-text:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-text:hover { gap: 15px; color: var(--lime); }
}

.hero-meta {
  margin-top: 30px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.hero-meta i { font-style: normal; opacity: .55; }

/* The landing-page foot furniture has no place here */
.hero-skup .hero-foot { display: none; }

@media (max-width: 1090px) and (orientation: portrait) and (pointer: coarse), (max-width: 1090px) and (orientation: portrait) and (max-width: 767px) {
  .hero-skup .hero-title { font-size: clamp(44px, calc(14 * var(--vw)), 68px); }
  .hero-skup .hero-cta { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-skup .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-skup .btn-text { justify-content: center; }
  .hero-skup .hero-meta { margin-top: 24px; }
}

/* ═══ SUBPAGE HEROES (/kontakt/, /blog/) ════════════════════════ */
.hero-page .hero-title { font-size: clamp(38px, calc(5.4 * var(--vw)), 84px); line-height: .9; }
.hero-page .hero-title .ln-1 { color: var(--paper); }

/* The kontakt bull sits further left than the blog herd, and above the
   1440px design width the type stops growing while the crop keeps
   sliding right — so the headline needs a lower cap of its own to stay
   clear of his face in every language. Measured worst case is 1600px. */
@media (min-width: 1091px), (min-width: 768px) and (pointer: fine) {
  .hero-kontakt .hero-title { font-size: clamp(38px, calc(5 * var(--vw)), 76px); }
}
.hero-page .hero-sub { margin-top: 26px; }
.hero-page .hero-cta { margin-top: 32px; }
.hero-page .hero-foot { display: none; }
.hero-page .hero-meta { margin-top: 34px; }

/* Blog art has its subject centre-right and a bright sky, so it needs a
   wider scrim than the studio-lit bull shots. */
.hero-blog .hero-media::after {
  background:
    linear-gradient(90deg, #07150c 0%, rgba(7,21,12,.94) 30%, rgba(7,21,12,.5) 44%, rgba(7,21,12,0) 58%),
    linear-gradient(180deg, rgba(7,21,12,.55) 0%, rgba(7,21,12,0) 30%, rgba(7,21,12,0) 74%, rgba(7,21,12,.8) 100%);
}
.hero-blog .hero-meta {
  padding-top: 22px;
  border-top: 1px solid var(--line-d);
  max-width: 30rem;
}

/* Header login button */
.btn-login {
  background: transparent;
  color: var(--lime);
  border: 1px solid color-mix(in srgb, var(--lime) 55%, transparent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 24px;
  box-shadow: none;
}
.btn-login:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn-login:hover {
    background: color-mix(in srgb, var(--lime) 12%, transparent);
    border-color: var(--lime); transform: none; box-shadow: none;
  }
}

@media (max-width: 1090px) and (orientation: portrait) and (pointer: coarse), (max-width: 1090px) and (orientation: portrait) and (max-width: 767px) {
  .hero-page .hero-title { font-size: clamp(40px, calc(12.5 * var(--vw)), 62px); }
  .hero-page .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-page .hero-meta { margin-top: 26px; }
}

/* ═══ SUBPAGE HEROES ON MOBILE ══════════════════════════════════
   Portrait crop puts the animal in the lower half; copy owns the
   top, the action sits above a thin meta line at the foot.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1090px) and (orientation: portrait) and (pointer: coarse), (max-width: 1090px) and (orientation: portrait) and (max-width: 767px) {
  .hero-skup, .hero-page {
    display: flex; flex-direction: column;
    min-height: 100svh;
    padding-top: 0;
    background: #07150c;
  }
  /* flex:1 + a full-height copy column is what lets margin-top:auto
     push the action and meta line down to the foot. */
  .hero-skup .hero-body,
  .hero-page .hero-body {
    flex: 1; justify-content: flex-start;
    padding-top: 124px; padding-bottom: 0;
  }
  .hero-skup .hero-copy,
  .hero-page .hero-copy {
    max-width: none;
    display: flex; flex-direction: column;
    flex: 1;              /* percentage height did not resolve here */
  }

  .hero-skup .hero-title,
  .hero-page .hero-title {
    font-stretch: 66%; font-weight: 800;
    font-size: clamp(46px, calc(14.5 * var(--vw)), 74px);
    line-height: .86; letter-spacing: -.02em;
  }
  .hero-skup .hero-sub,
  .hero-page .hero-sub { margin-top: 22px; font-size: 16.5px; max-width: 32ch; }

  /* Photo drops to the bottom, copy is clear of it */
  .hero-skup .hero-media img,
  .hero-page .hero-media img { object-position: center bottom; }
  .hero-skup .hero-media::after,
  .hero-page .hero-media::after {
    background:
      linear-gradient(180deg, rgba(7,21,12,.92) 0%, rgba(7,21,12,.6) 28%, rgba(7,21,12,0) 52%),
      linear-gradient(0deg, #07150c 2%, rgba(7,21,12,.55) 14%, rgba(7,21,12,0) 30%);
  }

  /* Action + meta pinned to the foot */
  .hero-skup .hero-cta,
  .hero-page .hero-cta {
    display: flex; margin-top: auto;
    padding-top: 32px;
  }
  .hero-skup .hero-cta .btn,
  .hero-page .hero-cta .btn {
    width: auto; align-self: flex-start;
    padding: 19px 26px; border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
  }
  .hero-skup .btn-text { display: none; }   /* one action is enough here */

  .hero-skup .hero-meta,
  .hero-page .hero-meta {
    margin-top: 16px;
    padding: 0 0 calc(22px + env(safe-area-inset-bottom, 0px));
    border-top: 0;
    font-size: 10.5px; letter-spacing: .12em;
    white-space: nowrap;
  }
  .hero-skup .hero-meta { color: rgba(255,255,255,.6); }
  .hero-skup .hero-meta .lime-5 { color: var(--lime); }
}

@media (max-width: 380px) {
  .hero-skup .hero-title, .hero-page .hero-title { font-size: clamp(40px, calc(13 * var(--vw)), 56px); }
  .hero-skup .hero-cta .btn, .hero-page .hero-cta .btn { font-size: 12.5px; padding: 17px 20px; }
  .hero-skup .hero-meta, .hero-page .hero-meta { font-size: 9.5px; letter-spacing: .08em; }
}

/* Narrowest phones: keep each promise line on one row (measured at 320px) */
@media (max-width: 340px) and (orientation: portrait) {
  .hero .hero-sub,
  .hero-skup .hero-sub,
  .hero-page .hero-sub { font-size: 15px; }
}

/* Send failure sits above the submit button — the only place the user is
   looking when the request comes back. */
.form-send-msg {
  display: block; margin: 0 0 12px; padding: 12px 14px;
  border-radius: 10px; background: rgba(196, 60, 60, .1);
  border: 1px solid rgba(196, 60, 60, .3); color: #a33;
  font-size: 14px; font-weight: 600;
}
.form-send-msg[hidden] { display: none; }

/* Pages without a featured image: the hero keeps its proportions but drops
   the photo well, so the title never floats over empty space. */
.page-hero-plain { min-height: auto; padding: 148px 0 56px; background: var(--forest); }
.page-hero-plain .container { position: relative; }

/* Article hero: the base padding uses 17vh, which is live on iOS — the bar
   collapsing grew it by 5–15px and re-cropped the photo mid-scroll. lvh is
   the same measurement taken against a constant. */
@media (max-width: 1090px) and (orientation: portrait) and (pointer: coarse), (max-width: 1090px) and (orientation: portrait) and (max-width: 767px) {
  .page-hero { padding-top: clamp(148px, 17svh, 196px); }
}

/* ═══ TOUCH DEVICES — keep scrolling smooth ═════════════════════
   Phones repaint whatever sits under a fixed, blurred bar on every scroll
   frame, and the footer's SVG-noise overlay blends with everything beneath
   it. Both cost far more on a phone GPU than they add at that size. */
@media (hover: none), (pointer: coarse) {
  .nav.stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: color-mix(in srgb, var(--forest) 97%, transparent);
  }
  .modal { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,16,10,.86); }
  .grain::after { mix-blend-mode: normal; opacity: .18; }
  .marquee-inner { will-change: transform; }
}

/* If a consent plugin (CookieYes, Complianz …) is installed, it owns the banner. */
.cm-consent-plugin #cookieBar { display: none !important; }