/*
 * Helium Automations — heliumautomations.pl
 * Hand-written replica of the Framer design (website/docs/DESIGN.md).
 * Breakpoints (same as Framer): desktop ≥1480 (base), desktop S 1273–1479, tablet 810–1272, phone <810.
 * Values are measured from the live Framer site; see website/docs/MIGRATION_TEST_LOG.md.
 */

:root {
  --ink: #010104;
  --black: #000;
  --lime: #c8f423;
  --lime-icon: #cffe25;
  --lemon: #f3ff9b;
  --mint: #d8f7d6;
  --mint-strong: #cdfc8a;
  --white: #fff;
  --text: rgba(224, 224, 224, 0.9);
  --text-dim: rgba(204, 204, 204, 0.8);
  --muted: #757b83;
  --panel: rgba(26, 26, 29, 0.8);
  --faq-bg: #0c0c0f;
  --card-dark: #050505;
  --line: rgba(248, 248, 248, 0.05);
  --f-display: "Inter Display", "Inter", system-ui, sans-serif;
  --f-text: "Inter", system-ui, sans-serif;
  --f-geist: "Geist", "Inter", system-ui, sans-serif;
  --f-code: "Cascadia Code", ui-monospace, monospace;
  --f-mono: "Intel One Mono", ui-monospace, monospace;
  --f-logo: "Inria Sans", "Inter", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11";
  overflow-x: clip; /* clip, not hidden: keeps position: sticky working */
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
strong { font-weight: inherit; }
.ico { width: 24px; height: 24px; flex: none; fill: currentColor; }
.w400 { font-weight: 400; }
.w500 { font-weight: 500; }
.white { color: var(--white); }
.mint { color: var(--mint-strong); }
.phone-only { display: none; }
.pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.13; pointer-events: none; z-index: 1; }

/* Shared heading style (h2 of every section) */
.h2 {
  font-family: var(--f-display);
  font-size: 52px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-weight: 400;
}
.h2 strong { font-weight: 600; }

.eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 600; font-size: 18px; line-height: 1.4; letter-spacing: -0.02em;
}
.eyebrow .ico { width: 20px; height: 20px; color: var(--lime); }

/* ---------------------------------------------------------------- buttons (label roll on hover) */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 16px;
  font-family: var(--f-text); font-weight: 500;
  overflow: hidden;
  perspective: 1200px;
  transition: background-color 0.3s ease;
  white-space: nowrap;
  isolation: isolate;
}
.btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; pointer-events: none; }
.btn__label {
  display: flex; align-items: center; gap: 10px;
  transform-origin: 50% 50% -14px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.btn__label--back {
  position: absolute; inset: 0; justify-content: center;
  transform: rotateX(-90deg); opacity: 0;
}
.btn:hover .btn__label:not(.btn__label--back) { transform: rotateX(90deg); opacity: 0; }
.btn:hover .btn__label--back { transform: none; opacity: 1; }
.btn--lg { height: 57px; padding: 16px 32px; font-size: 18px; line-height: 1.4; }
.btn--md { height: 48px; padding: 12px 14px 12px 16px; font-size: 16px; line-height: 1.5; border-radius: 12px; }
.btn--md .btn__label { gap: 8px; }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--white); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: var(--lime); }
.btn--outline { background: transparent; color: var(--white); }
.btn--outline::after { border-color: rgba(255, 255, 255, 0.63); }
.btn--outline .btn__label--back { color: var(--lime); }
.btn--dark { background: #1a1a1a; color: var(--white); }
.btn--block { width: 100%; }
.btn .ico { width: 24px; height: 24px; }

/* ---------------------------------------------------------------- navigation */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
.nav.is-hidden { transform: translateY(-108px); opacity: 0; pointer-events: none; }
.nav__bar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 92px; padding: 20px 80px;
  background: linear-gradient(var(--ink) 0%, rgba(0, 0, 0, 0) 100%);
  transition: background-color 0.3s ease;
}
.nav.is-solid .nav__bar { background: var(--black); }
.logo { display: flex; align-items: center; gap: 12px; padding: 10px 8px; }
.logo__mark { width: 36px; height: 32px; }
.logo__text { font-family: var(--f-logo); font-weight: 300; font-size: 22px; line-height: 1; letter-spacing: -0.06em; color: var(--white); }
.nav__links {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 40px; padding: 5px;
}
.nav__links a { font-size: 16px; line-height: 1.5; transition: color 0.5s ease; }
.nav__links a:hover { color: var(--lime); }
.btn--nav { height: 45px; padding: 10px 24px; font-size: 18px; line-height: 1.4; font-weight: 400; }
.btn--nav .btn__label { font-weight: 500; }
.nav__toggle { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; }
.nav__dots { position: relative; display: grid; grid-template-columns: 8px 8px; gap: 6px; width: 34px; height: 34px; padding: 6px 6px; align-content: start; }
.nav__dots i { width: 8px; height: 8px; border-radius: 16px; background: var(--white); transition: transform 0.35s var(--ease-out), width 0.35s, height 0.35s; }
.nav__menu { display: none; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; overflow: hidden;
  display: flex; justify-content: center;
  padding: 250px 64px 224px;
  background: var(--ink);
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__photo {
  position: absolute; inset: 0; background: url(../img/hero-bg.webp) 0 0 / 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(#000 0%, transparent 100%); mask-image: linear-gradient(#000 0%, transparent 100%);
  z-index: 1;
}
.hero__mesh {
  position: absolute; left: 0; top: 0; width: 100%; height: 987px; z-index: 2; overflow: hidden;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 100%); mask-image: linear-gradient(0deg, transparent 0%, #000 100%);
}
.hero__particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__grid { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: stretch; }
.hero__grid--v { flex-direction: row; }
.hero__grid--h { flex-direction: column; }
.hero__grid i { position: relative; display: flex; align-items: center; justify-content: center; background: var(--line); overflow: hidden; flex: none; }
.hero__grid--v i { width: 1px; }
.hero__grid--h i { height: 1px; }
.hero__grid i:first-child, .hero__grid--v i:last-child { background: transparent; }
.dash { position: absolute; opacity: 0; }
.dash--v-down, .dash--v-up { width: 2px; height: 75px; left: -0.5px; top: calc(50% - 37px); }
.dash--h-left, .dash--h-right { height: 2px; width: 75px; top: -0.5px; left: calc(50% - 37px); }
.dash--v-down { background: linear-gradient(0deg, var(--lime) 0%, rgba(0, 219, 128, 0) 100%); animation: dash-down 6s linear infinite; }
.dash--v-up { width: 1px; background: linear-gradient(var(--lime) 0%, rgba(0, 219, 128, 0) 100%); animation: dash-up 6s linear 1.5s infinite; }
.dash--h-left { background: linear-gradient(90deg, var(--lime) 0%, rgba(0, 219, 128, 0) 100%); animation: dash-left 6s linear 3s infinite; }
.dash--h-right { background: linear-gradient(270deg, var(--lime) 0%, rgba(0, 219, 128, 0) 100%); animation: dash-right 6s linear 4.5s infinite; }
@keyframes dash-down { 0% { transform: translateY(-750px); opacity: 0; } 15%, 75% { opacity: 1; } 100% { transform: translateY(750px); opacity: 0; } }
@keyframes dash-up { 0% { transform: translateY(750px); opacity: 0; } 15%, 75% { opacity: 1; } 100% { transform: translateY(-750px); opacity: 0; } }
@keyframes dash-left { 0% { transform: translateX(1000px); opacity: 0; } 15%, 75% { opacity: 1; } 100% { transform: translateX(-1000px); opacity: 0; } }
@keyframes dash-right { 0% { transform: translateX(-1000px); opacity: 0; } 15%, 75% { opacity: 1; } 100% { transform: translateX(1000px); opacity: 0; } }
.hero__glow { position: absolute; border-radius: 100%; background: var(--white); z-index: 2; }
.hero__glow--a { left: -120px; top: -113px; width: 313px; height: 313px; opacity: 0.32; filter: blur(175px); transform: scale(0.8); }
.hero__glow--b { left: 1271px; top: -135px; width: 414px; height: 342px; opacity: 0.16; filter: blur(100px); transform: matrix(0.455, -0.122, -0.42, 0.6, 0, 0); animation: glow 8s ease-in-out infinite alternate; }
@keyframes glow { to { transform: matrix(0.5, -0.134, -0.462, 0.66, 0, 0); } }
.hero__content {
  position: relative; z-index: 2;
  /* Appear effect as in Framer: starts at opacity 0.001 (not 0) so the hero still counts for LCP, runs without waiting for JS. */
  animation: hero-appear 1.1s var(--ease-out) 0.2s both;
  width: 100%; max-width: 1280px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 48px;
}
.hero__title-wrap { display: flex; flex-direction: column; gap: 32px; }
.hero__title {
  max-width: 851px;
  font-family: var(--f-display); font-weight: 600; font-size: 62px; line-height: 1.3; letter-spacing: -0.04em;
}
.hero__title-light { font-weight: 300; letter-spacing: -0.02em; }
.hero__title .hl { color: var(--lime); }
.hero__lead { max-width: 582px; font-family: var(--f-display); font-size: 20px; line-height: 1.5; color: var(--text); }
.hero__buttons { display: flex; align-items: center; gap: 20px; }
.hero__points { display: flex; gap: 32px; }
.hero__points li { display: flex; align-items: center; gap: 12px; width: 203px; font-size: 16px; line-height: 1.5; color: var(--text); }
.hero__points .ico { color: var(--lemon); }

@keyframes hero-appear { from { opacity: 0.001; transform: translateY(35px); } }

/* ---------------------------------------------------------------- korzyści */
.benefits { position: relative; background: var(--ink); display: flex; flex-direction: column; gap: 160px; }
.benefits__inner { padding: 0 64px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.benefits__head { width: 100%; max-width: 1280px; display: flex; flex-direction: column; gap: 20px; }
.benefits__title { max-width: 984px; font-weight: 600; letter-spacing: -0.03em; }
.benefits__lead { max-width: 985px; font-family: var(--f-display); font-size: 18px; line-height: 1.5; letter-spacing: -0.02em; color: var(--text); }
.benefits__lead strong { font-weight: 500; color: var(--white); }
.benefit-cards { width: 100%; display: flex; gap: 30px; }
.benefit-card {
  position: relative; flex: 1 1 0; height: 411px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 20px; overflow: hidden;
  background: url(../img/card-bg.png) center / 100% 100% no-repeat;
  box-shadow: 0 45.94px 45.94px rgba(0, 0, 0, 0.3);
}
.benefit-card::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: inherit; pointer-events: none; }
.benefit-card__text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.benefit-card--ticker .benefit-card__text { padding-top: 0; }
.benefit-card__text h3 { font-family: var(--f-display); font-weight: 600; font-size: 23px; line-height: 1.3; }
.benefit-card__text p { font-size: 16px; line-height: 1.5; color: var(--text); }
.benefit-card__art { position: absolute; left: 0; right: 0; top: 0; z-index: 1; }

/* card 1: vertical ticker */
.ticker { height: 254px; padding: 0 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.ticker__muted, .ticker__list li { font-family: var(--f-display); font-size: 42px; line-height: 1.2; letter-spacing: -0.03em; text-align: center; white-space: nowrap; }
.ticker__muted { color: rgba(255, 255, 255, 0.18); }
.ticker__band { width: 100%; padding: 0 5px; }
.ticker__mask {
  width: 100%; height: 37px; overflow: hidden; background: var(--lime); transform: skewX(10deg);
}
.ticker__list { display: flex; flex-direction: column; align-items: center; will-change: transform;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(transparent 0%, #000 22%, #000 78%, transparent 100%); }
.ticker__list li { height: 50px; line-height: 50px; color: #0c0c0f; }

/* card 2: meter (original SVG parts; the large hexagon and the dial rotate continuously) */
.meter { height: 202px; }
.meter__fig { position: absolute; left: 50%; top: 27px; width: 258px; height: 226px; margin-left: -129px; }
.meter__fig > div { position: absolute; }
.meter__fig svg { overflow: visible; }
.meter__hex-lg { left: 31px; top: 2px; width: 201px; height: 234px; animation: spin 9.7s linear infinite; }
.meter__hex-sm { left: 51px; top: 26px; width: 162px; height: 188px; }
.meter__dial { left: 61px; top: 50px; width: 142px; height: 139px; animation: spin 12.4s linear infinite reverse; }
.meter__needle { left: 74px; top: 62px; width: 115px; height: 115px; transform: rotate(-176deg); }
.meter__needle > div { position: absolute; left: 16px; top: 28px; width: 49px; height: 57px; transform: rotate(119deg); }
@keyframes spin { to { transform: rotate(360deg); } }

/* card 3: 24/7 */
.sales { height: 255px; display: flex; align-items: center; justify-content: center; }
.sales__bg {
  font-family: var(--f-text); font-weight: 700; font-size: 173px; line-height: 1; letter-spacing: -0.04em; white-space: nowrap;
  color: rgba(248, 248, 248, 0.05); transform: scale(1.3); margin-top: -15px;
  -webkit-mask-image: linear-gradient(0deg, transparent 9.46%, #000 50%); mask-image: linear-gradient(0deg, transparent 9.46%, #000 50%);
}
.sales__pill {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px; height: 59px; padding: 12px 32px; border-radius: 50px;
  background: var(--lime); color: var(--ink);
  box-shadow: 0 0 60px rgba(207, 254, 37, 0.6);
  font-family: var(--f-display); font-weight: 500; font-size: 20px; line-height: 1.2; white-space: nowrap;
}
.sales__pill .ico { width: 32px; height: 32px; }
.is-in .sales__pill { animation: pill-pulse 2s ease-in-out 0.8s infinite; }
@keyframes pill-pulse { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 20px)) scale(1.1); } }

/* card 4: cursors */
.process { height: 239px; display: flex; align-items: center; justify-content: center; }
.process__bg {
  font-family: var(--f-text); font-weight: 700; font-size: 264px; line-height: 1; letter-spacing: -0.04em; white-space: nowrap;
  color: rgba(248, 248, 248, 0.05); transform: scale(0.52);
  -webkit-mask-image: linear-gradient(0deg, transparent 9.46%, #000 50%); mask-image: linear-gradient(0deg, transparent 9.46%, #000 50%);
}
.cursor { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-end; translate: var(--ax) var(--ay); transform-origin: 0 0; }
.is-in .cursor { animation: cursor-loop 4.5s ease-in-out 1s infinite; }
@keyframes cursor-loop {
  0%, 16% { translate: var(--ax) var(--ay); }
  33%, 50% { translate: var(--bx) var(--by); }
  66%, 83% { translate: var(--cx) var(--cy); }
  100% { translate: var(--ax) var(--ay); }
}
.cursor__arrow { width: 16px; height: 15px; }
.cursor__label {
  margin-right: 15px; padding: 5px 15px; border-radius: 100px 12px 100px 100px; background: var(--lime); color: var(--ink);
  font-family: var(--f-display); font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; white-space: nowrap;
}
.cursor--ty { --ax: 78px; --ay: 36px; --bx: 138px; --by: 25px; --cx: 221px; --cy: 60px; }
.cursor--klient { --ax: 204px; --ay: 143px; --bx: 223px; --by: 183px; --cx: 77px; --cy: 157px; }
.cursor--wsp { --ax: 66px; --ay: 175px; --bx: 44px; --by: 107px; --cx: 30px; --cy: 65px; align-items: flex-start; }
.cursor--wsp .cursor__label { margin: 0; background: var(--mint); border-radius: 100px 100px 12px 100px; }
.cursor--wsp .cursor__arrow { align-self: flex-end; margin-right: -1px; }

/* quote band */
.quote-band { position: relative; overflow: hidden; display: flex; justify-content: center; padding: 96px 0; background: rgba(26, 26, 29, 0.8); }
.quote-band__inner { position: relative; z-index: 2; width: 100%; max-width: 1141px; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.quote-band__rating { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.2; }
.quote-band__rating .ico { width: 28px; height: 28px; margin-bottom: 4px; }
.quote-band__quote { max-width: 981px; font-family: var(--f-display); font-size: 42px; line-height: 1.2; letter-spacing: -0.03em; text-align: center; }
.quote-band__quote strong { font-weight: 600; color: var(--lime); }
.quote-band__inner { gap: 30px; }
.quote-band__author { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.quote-band__author strong { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.2; }
.quote-band__author span { font-size: 18px; line-height: 1.4; color: var(--muted); }

/* ---------------------------------------------------------------- opinie */
.reviews { display: flex; justify-content: center; padding: 160px 30px; background: var(--ink); }
.reviews__inner { width: 100%; max-width: 1260px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.reviews__title { text-align: center; }
.reviews__grid { width: 100%; display: flex; gap: 20px; align-items: flex-start; }
.reviews__main { flex: 0 0 799px; display: flex; flex-direction: column; gap: 20px; }
.review-card {
  position: relative; height: 472px; padding: 45px; border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 47px;
  background: url(../img/testimonial-bg.webp) center / cover; box-shadow: 0 24px 24px rgba(0, 0, 0, 0.3);
}
.review-card::after, .stat::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: inherit; pointer-events: none; }
.review-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.tag { padding: 4px 20px 4px 15px; border-radius: 4px; font-size: 14px; line-height: 1.5; font-weight: 500; color: #0c0c0f; }
.tag--lemon { background: var(--lemon); box-shadow: 0 24px 24px rgba(0, 0, 0, 0.3); }
.tag--mint { padding: 8px 16px; border-radius: 12px; background: var(--mint); line-height: 1.3; text-align: center; }
.review-card__quote { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.5; color: var(--text); }
.review-card__author { display: flex; align-items: center; gap: 12px; }
.review-card__avatar { width: 63px; height: 63px; border-radius: 100%; object-fit: cover; object-position: 50% 0; box-shadow: 0 0 0 1px rgba(207, 254, 37, 0.1); margin: -2px; }
.review-card__who { flex: 1; display: flex; flex-direction: column; }
.review-card__who strong { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.5; }
.review-card__who span { font-family: var(--f-display); font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: var(--text); }
.review-card__logo { width: 136px; height: 42px; margin-right: 38px; }
.review-card__logo-m { display: none; width: 30px; height: 36px; }
.stats { display: flex; gap: 20px; }
.stat {
  position: relative; flex: 1 1 0; height: 185px; padding: 20px 20px 20px 32px; border-radius: 24px;
  display: flex; flex-direction: column; gap: 24px;
  background: rgba(255, 255, 255, 0.05); box-shadow: 0 24px 24px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.stat__top { display: flex; align-items: center; gap: 24px; }
.stat__num { display: flex; align-items: center; font-weight: 500; font-size: 46px; line-height: 1; white-space: nowrap; }
.stat__num > span:not(.odo) { display: block; width: 30px; text-align: center; }
.stat__num > span:not(.odo):first-child { margin-right: 4px; }
.stat__num > span:not(.odo):last-child { margin-left: 4px; }
.stat__num > span:last-child:not(.odo) { min-width: 30px; width: auto; }
.odo { display: block; position: relative; width: 30px; height: 46px; overflow: hidden; }
.odo__strip { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; transition: transform 2s var(--ease-out); }
.odo__strip span { display: block; height: 46px; line-height: 46px; text-align: center; }
.stat .tag--mint { flex: 1; }
.stat__text { padding-right: 12px; font-size: 18px; line-height: 1.4; }
.reviews__photo { flex: 1; height: 677px; border-radius: 24px; overflow: hidden; }
.reviews__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }

/* ---------------------------------------------------------------- obszary automatyzacji */
.areas { position: relative; display: flex; justify-content: center; padding: 160px 30px; background: var(--panel); }
.pattern--top { height: 654px; -webkit-mask-image: linear-gradient(#000 0%, transparent 100%); mask-image: linear-gradient(#000 0%, transparent 100%); }
.areas__inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.areas__head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.areas__title { max-width: 729px; font-weight: 600; color: var(--lime); }
.areas__lead { max-width: 582px; font-size: 18px; line-height: 1.4; color: var(--text-dim); }
.areas__list { width: 100%; display: flex; flex-direction: column; gap: 64px; }
.area {
  position: relative; display: flex; align-items: stretch; gap: 96px;
  padding: 0 32px 0 80px; border-radius: 48px; overflow: hidden;
  background: var(--card-dark); box-shadow: 0 -17px 50px rgba(0, 0, 0, 0.4);
}
/* Desktop and Desktop S (Framer change 2026-10-20, unpublished there): cards stick 96 px from the top and stack;
   site.js scales the cards behind the newest one down in 0.05 steps (scroll-target effect, "middle" of the viewport). */
@media (min-width: 1273px) {
  .area { position: sticky; top: 96px; transition: transform 0.7s cubic-bezier(0.34, 1.2, 0.64, 1); will-change: transform; }
}
.area::after { content: ""; position: absolute; inset: 0; border: 2px solid #222; border-radius: inherit; pointer-events: none; z-index: 4; }
.area__photo {
  position: absolute; left: -19px; top: 50px; width: 720px; height: 496px; object-fit: cover; z-index: 1;
  -webkit-mask-image: linear-gradient(57deg, rgba(0, 0, 0, 0.33) 3%, rgba(0, 0, 0, 0.06) 32%, rgba(0, 0, 0, 0.04) 50%, transparent 69%);
  mask-image: linear-gradient(57deg, rgba(0, 0, 0, 0.33) 3%, rgba(0, 0, 0, 0.06) 32%, rgba(0, 0, 0, 0.04) 50%, transparent 69%);
}
.area__num {
  position: absolute; left: -39px; top: -24px; z-index: 1;
  font-family: var(--f-mono); font-weight: 500; font-size: 167px; line-height: 1.2; letter-spacing: -0.11em;
  color: transparent; -webkit-text-stroke: 1px rgba(242, 242, 242, 0.25);
}
.area__main { position: relative; z-index: 2; flex: 0 0 467px; padding: 80px 0 64px; display: flex; flex-direction: column; }
.area__title { font-family: var(--f-display); font-weight: 600; font-size: 52px; line-height: 1.1; letter-spacing: -0.03em; }
.area__lead { margin-top: 24px; font-size: 20px; line-height: 1.5; color: var(--text); }
.area__effect { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.area__effect-label { font-family: var(--f-code); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.03em; color: var(--lime); }
.area__effect-pill { padding: 12px 24px; border-radius: 512px; background: #242424; font-weight: 500; font-size: 18px; line-height: 1.4; }
.area__auto { position: relative; z-index: 2; flex: 1; padding: 80px 0 64px; display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.area__auto-title { font-family: var(--f-code); font-weight: 700; font-size: 32px; line-height: 1.2; letter-spacing: -0.03em; color: var(--lime); }
.area__items { display: flex; flex-direction: column; gap: 24px; }
.area__items li { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 18px; line-height: 1.4; }
.area__items .ico { width: 32px; height: 32px; color: var(--lime-icon); }
.area__notch { position: absolute; left: -82px; width: 60px; height: 60px; border-radius: 50%; z-index: 3; }
.area__notch::after { content: ""; position: absolute; inset: 0; border: 2px solid #222; border-radius: 50%; }
.area__notch--a { top: -32px; background: #0f0f12; }
.area__notch--b { bottom: -32px; background: #141416; }
.area__scissors { position: absolute; left: 14px; top: -45px; width: 32px; height: 32px; fill: var(--muted); transform: rotate(-90deg); }
.area__dash { position: absolute; left: -53px; top: -174px; width: 3px; height: 830px; opacity: 0.5; z-index: 2;
  background: repeating-linear-gradient(to bottom, #fff 0 16px, transparent 16px 32px); background-size: 1px 100%; background-repeat: no-repeat; background-position: 1px 0; }

/* ---------------------------------------------------------------- dla kogo */
.audience { display: flex; justify-content: center; padding: 160px 30px; background: var(--ink); overflow: hidden; }
.audience__inner { width: 100%; max-width: 1280px; display: flex; flex-direction: column; gap: 64px; }
.audience__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.audience__title { max-width: 825px; }
.audience__btn { flex: none; }
.audience__photo { height: 372px; border-radius: 24px; overflow: hidden; }
.audience__photo img { width: 100%; height: 100%; object-fit: cover; }
.audience__cards { display: flex; justify-content: center; gap: 70px; }
.audience-card { flex: 0 0 380px; display: flex; gap: 24px; }
.audience-card__ico { width: 40px; height: 40px; color: var(--lime); }
.audience-card div { display: flex; flex-direction: column; gap: 22px; }
.audience-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1.3; }
.audience-card p { font-size: 18px; line-height: 1.6; color: var(--text); }
.audience-card strong { font-weight: 600; color: var(--white); }
.audience__inner > .audience__photo { margin-top: 0; }

/* ---------------------------------------------------------------- proces */
.process-sec { display: flex; justify-content: center; padding: 192px 30px; background: var(--panel); }
.process-sec__inner { width: 100%; max-width: 1280px; display: flex; flex-direction: column; gap: 60px; }
.process-sec .eyebrow { padding-bottom: 16px; border-bottom: 1px solid rgba(214, 214, 214, 0.25); }
.process-sec__body { display: flex; justify-content: space-between; align-items: flex-start; }
.process-sec__title { flex: 0 0 640px; padding-right: 96px; }
.steps { flex: 0 0 640px; display: flex; flex-direction: column; }
.steps li { display: flex; gap: 32px; padding: 20px 0; border-bottom: 1px solid rgba(214, 214, 214, 0.25); }
.steps li:first-child { padding-top: 0; padding-bottom: 24px; }
.steps li:last-child { border-bottom: 0; }
.steps__num { flex: 0 0 40px; font-family: var(--f-mono); font-weight: 700; font-size: 64px; line-height: 1.5; letter-spacing: -0.02em; color: var(--lime); }
.steps li > div { display: flex; flex-direction: column; gap: 12px; }
.steps h3 { font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 1.3; }
.steps p { max-width: 511px; font-size: 16px; line-height: 1.5; color: var(--text); opacity: 0.8; }

/* ---------------------------------------------------------------- realizacje */
.cases { position: relative; display: flex; justify-content: center; padding: 160px 64px; background: var(--muted); overflow: hidden; }
.pattern--lum { mix-blend-mode: luminosity; }
.cases__inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; display: flex; flex-direction: column; gap: 80px; }
.cases__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.cases__head > div { display: flex; flex-direction: column; gap: 16px; max-width: 774px; }
.cases__title { line-height: 1.2; }
.cases__btn { flex: none; }
.carousel { position: relative; }
.carousel__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 25%, #000 75%, transparent 100%);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel.is-scrolled .carousel__track {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.carousel.is-end .carousel__track {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 25%, #000 100%);
}
.case {
  flex: 0 0 339px; height: 604px; scroll-snap-align: start;
  display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #212121;
  box-shadow: 0 0.6px 1.08px -1px rgba(0, 0, 0, 0.06), 0 2.29px 4.12px -2px rgba(0, 0, 0, 0.06), 0 10px 18px -3px rgba(0, 0, 0, 0.04);
}
.case__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 24px 0; }
.case__client { display: flex; align-items: center; gap: 12px; }
.ico--phone { display: none; }
.case__ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #a0a19b; color: rgba(26, 26, 29, 0.8); }
.case__client p { display: flex; flex-direction: column; gap: 4px; width: 113px; font-family: var(--f-geist); font-weight: 500; font-size: 16px; line-height: 1.2; }
.case__client p span { font-size: 14px; line-height: 1.4; opacity: 0.7; }
.stars { display: flex; gap: 4px; }
.stars i { width: 18px; height: 18px; background: url(../img/star.svg) center / contain no-repeat; }
.case__body { flex: 1; padding: 32px 24px 0; display: flex; flex-direction: column; gap: 20px; font-family: var(--f-geist); }
.case__body h3 { font-weight: 600; font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; }
.case__body p { display: flex; flex-direction: column; gap: 8px; font-weight: 500; font-size: 14px; line-height: 1.4; }
.case__body p strong { color: var(--lime); font-weight: 500; }
.case__result { position: relative; height: 124px; padding: 24px; display: flex; align-items: center; background: var(--lime); font-family: var(--f-geist); }
.case__result p:last-child { font-weight: 700; font-size: 18px; line-height: 1.4; color: rgba(26, 26, 29, 0.8); }
.case__result-title {
  position: absolute; left: 24px; top: -28px; z-index: 1;
  display: flex; align-items: flex-end; gap: 12px;
  font-weight: 700; font-size: 28px; line-height: 1.3; color: var(--lime);
}
.case__result-title .ico { width: 32px; height: 32px; color: var(--lime-icon); margin-bottom: 0; }
.carousel__nav { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 32px; pointer-events: none; }
.carousel__btn { width: 48px; height: 48px; border-radius: 40px; overflow: hidden; background: var(--card-dark); pointer-events: auto; transition: opacity 0.3s ease; }
.carousel__btn img { width: 48px; height: 48px; }
.carousel__btn[disabled] { opacity: 0; pointer-events: none; }
.carousel__more { display: none; }

/* ---------------------------------------------------------------- dlaczego my */
.why { position: relative; display: flex; justify-content: center; padding: 160px 30px 0; background: var(--panel); overflow: hidden; }
.why__bg {
  position: absolute; inset: 0; z-index: 2; opacity: 0.69; background: #022e21;
  -webkit-mask-image: linear-gradient(#000 0%, transparent 100%); mask-image: linear-gradient(#000 0%, transparent 100%);
}
.why__bg img {
  position: absolute; left: 0; top: 0; width: 100%; height: 612px; object-fit: cover; opacity: 0.21;
  -webkit-mask-image: linear-gradient(#000 0%, transparent 100%); mask-image: linear-gradient(#000 0%, transparent 100%);
}
.why__inner { position: relative; z-index: 3; width: 100%; max-width: 1120px; display: flex; flex-direction: column; align-items: center; gap: 80px; }
.why__head { max-width: 970px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.why__title { font-weight: 600; line-height: 1.2; }
.why__lead { max-width: 617px; font-size: 18px; line-height: 1.4; color: var(--text); }
.why__body { width: 100%; display: flex; align-items: center; gap: 64px; }
.why__cards { flex: 0 0 720px; display: flex; flex-direction: column; gap: 32px; }
.why-card {
  padding: 32px; border-radius: 24px; display: flex; flex-direction: column; gap: 24px;
  background: rgba(247, 247, 247, 0.09); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.why-card h3 { display: flex; align-items: center; gap: 24px; font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.2; }
.why-card h3 img { width: 40px; height: 40px; }
.why-card p { font-size: 16px; line-height: 1.5; color: var(--text); }
.why__gains { flex: 1; display: flex; flex-direction: column; gap: 40px; }
.why__gains-title { font-family: var(--f-code); font-weight: 700; font-size: 31px; line-height: 1.1; letter-spacing: -0.06em; color: var(--lime); white-space: pre-wrap; }
.why__gains ul { display: flex; flex-direction: column; gap: 32px; }
.why__gains li { display: flex; flex-direction: column; gap: 12px; font-weight: 500; font-size: 18px; line-height: 1.4; }
.why__gains .ico { color: var(--lime); }

/* ---------------------------------------------------------------- konsultacja */
.consult { display: flex; justify-content: center; padding: 192px 30px 160px; background: var(--panel); }
.consult__box {
  position: relative; width: 100%; max-width: 1280px; padding: 96px 80px; border-radius: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 80px;
}
.consult__box::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--muted); border-radius: inherit; pointer-events: none; }
.consult__title { max-width: 1120px; text-align: center; line-height: 1.2; }
.consult__steps { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.consult__steps li { display: flex; flex-direction: column; gap: 32px; }
.consult__num { display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 100%); mask-image: linear-gradient(90deg, #000 35%, transparent 100%); }
.consult__num b { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: var(--lime); color: #24242b; font-weight: 800; font-size: 18px; line-height: 1.4; }
.consult__num i { flex: 1; height: 1px; background: var(--lime); }
.consult__steps li > div { display: flex; flex-direction: column; gap: 16px; }
.consult__steps h3 { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.2; }
.consult__steps p { font-size: 16px; line-height: 1.5; color: var(--text); }
.gain-box { width: 100%; display: flex; gap: 64px; border-radius: 32px; overflow: hidden; background: var(--line); }
.gain-box__photo { flex: 0 0 508px; height: 290px; border-radius: 32px; overflow: hidden; }
.gain-box__photo img { width: 100%; height: 100%; object-fit: cover; }
.gain-box__text { flex: 1; padding: 40px 40px 40px 0; display: flex; flex-direction: column; gap: 32px; }
.gain-box__text h3 { font-family: var(--f-display); font-weight: 500; font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; }
.gain-box__text ul { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gain-box__text li { display: flex; gap: 16px; font-size: 16px; line-height: 1.5; }
.gain-box__text .ico { color: var(--lime-icon); }

/* ---------------------------------------------------------------- faq */
.faq { display: flex; justify-content: center; padding: 160px 30px; background: var(--faq-bg); }
.faq__inner { width: 100%; max-width: 1120px; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.faq__head { max-width: 970px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.faq__title { line-height: 1.2; }
.faq__lead { max-width: 582px; font-size: 18px; line-height: 1.4; color: var(--text); }
.faq__list { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.faq-item { border-radius: 24px; background: var(--line); }
.faq-item summary { display: flex; align-items: flex-start; gap: 20px; padding: 40px; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item h3 { flex: 1; font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.2; transition: color 0.3s ease; }
.faq-item[open] h3 { color: var(--lime); }
.faq-item__chev { width: 30px; height: 30px; color: var(--lime); transform: rotate(179deg); transition: transform 0.35s var(--ease-out); }
.faq-item[open] .faq-item__chev { transform: none; }
.faq-item > p { max-width: calc((100% - 80px) * 0.85); margin: -24px 0 0 40px; padding: 0 0 40px; font-size: 16px; line-height: 1.5; color: var(--text); }
.faq__more { display: flex; align-items: center; justify-content: center; gap: 16px; font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--text); }
.faq__more strong { color: var(--white); }
.faq__more .ico { width: 32px; height: 32px; color: var(--lime); }

/* ---------------------------------------------------------------- final cta */
.final-cta { position: relative; overflow: hidden; display: flex; justify-content: center; padding: 128px 30px 160px; background: var(--panel); }
.final-cta__photo { position: absolute; left: 0; top: 0; width: 80%; max-width: 1184px; height: 100%; z-index: 1;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.08) 20.27%, rgba(0, 0, 0, 0.227) 44.14%, #000 86.94%);
  mask-image: linear-gradient(270deg, transparent 0%, rgba(0, 0, 0, 0.08) 20.27%, rgba(0, 0, 0, 0.227) 44.14%, #000 86.94%); }
.final-cta__photo img { width: 100%; height: 100%; object-fit: cover; }
.final-cta__content { position: relative; z-index: 3; width: 100%; max-width: 1260px; display: flex; justify-content: flex-end; }
.final-cta__box { width: 593px; display: flex; flex-direction: column; align-items: flex-start; }
.final-cta__mark { width: 55px; height: 47px; }
.final-cta__title { margin-top: 24px; font-family: var(--f-display); font-weight: 400; font-size: 56px; line-height: 1.2; letter-spacing: -0.03em; }
.final-cta__title strong { font-weight: 600; }
.final-cta__lead { margin-top: 24px; font-size: 18px; line-height: 1.6; }
.final-cta__btn { margin-top: 48px; }
.final-cta__tags { width: 100%; margin-top: 48px; display: flex; justify-content: space-between; }
.final-cta__tags li { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 1.5; }
.final-cta__tags li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--faq-bg); }
.footer__top { display: flex; justify-content: space-between; align-items: center; padding: 30px 60px; }
.footer__top .logo { padding: 0; }
.footer__links { display: flex; align-items: center; gap: 12px; }
.footer__links a { font-size: 16px; line-height: 1.5; color: var(--text); transition: color 0.3s ease; }
.footer__links a + a::before { content: ""; display: inline-block; width: 1px; height: 24px; margin-right: 12px; vertical-align: top; background: rgba(116, 122, 130, 0.47); }
.footer__links a:hover, .footer__policy:hover { color: var(--lime); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding: 24px 60px; border-top: 1px solid var(--line); }
.footer__copy { font-size: 16px; line-height: 1.5; color: var(--text); opacity: 0.8; }
.footer__policy { font-size: 16px; line-height: 1.5; color: var(--text); transition: color 0.3s ease; }

/* ---------------------------------------------------------------- promo modal (#promocja-modal, driven by promo-popup.js) */
.promo { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, 0.9); opacity: 0; pointer-events: none; overflow: hidden; }
.promo__backdrop { position: absolute; inset: 0; z-index: 1; }
.promo__box {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 626px; padding: 32px 48px; border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
  background: #202022; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.5);
}
.promo__box::after, .fab__card::after, .fab__icon::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(199, 245, 34, 0.16); border-radius: inherit; pointer-events: none; z-index: 5; }
.promo__photo { position: absolute; left: 0; top: -149px; width: 100%; height: 864px; object-fit: cover; z-index: 1; }
.promo__pattern { top: -149px; height: 864px; -webkit-mask-image: linear-gradient(1deg, #000 34.68%, transparent 89.19%); mask-image: linear-gradient(1deg, #000 34.68%, transparent 89.19%); }
.promo__tint, .fab__tint { position: absolute; inset: 0; z-index: 2; opacity: 0.69; background: linear-gradient(171deg, rgba(27, 46, 2, 0.88) 0%, rgba(2, 46, 33, 0) 60%); pointer-events: none; }
.promo__close { position: absolute; right: 20px; top: 20px; z-index: 4; width: 40px; height: 40px; border-radius: 512px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14); color: var(--white); }
.promo__text, .promo__btn, .promo__urgency { position: relative; z-index: 3; }
.promo__text { width: 100%; display: flex; flex-direction: column; gap: 24px; }
.promo__kicker { font-weight: 500; font-size: 18px; line-height: 1.5; color: var(--lime); }
.promo__title { margin-top: -14px; font-family: var(--f-display); font-weight: 700; font-size: 40px; line-height: 1.2; }
.promo__lead { font-size: 16px; line-height: 1.5; }
.promo__urgency { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.promo__note { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.3; }
.promo__progress { display: flex; align-items: center; gap: 10px; }
.promo__bar { position: relative; width: 300px; height: 8px; border-radius: 512px; overflow: hidden; background: #20211e; }
.promo__bar::after { content: ""; position: absolute; inset: 0; border: 1px solid #6a6d73; border-radius: inherit; }
.promo__bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 75%; /* 3 of 4 places taken (owner, 2026-10-21) */ border-radius: 512px; background: var(--lime); }
.promo__count { font-family: var(--f-code); font-weight: 700; font-size: 14px; line-height: 1.5; color: var(--lime); }
/* LED (copied from the Framer embed "Dioda") */
.led-pulse { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 14px; height: 14px; }
.led-pulse::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(200, 244, 35, 0.35); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.led-pulse::after { content: ''; position: relative; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #E2FF70, #C8F423 50%, #A3C91A); box-shadow: 0 0 4px 1px rgba(200, 244, 35, 0.6), 0 0 10px 2px rgba(200, 244, 35, 0.25); }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(2.1); opacity: 0; } }

/* ---------------------------------------------------------------- floating CTA (#przycisk-cta, driven by fab.js) */
.fab { position: fixed; left: 50%; bottom: 44px; z-index: 3; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; }
.fab__card {
  position: relative; width: 800px; height: 88px; padding: 20px 16px 20px 24px; border-radius: 20px; overflow: hidden;
  display: flex; align-items: center; gap: 10px; background: #202022; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.5);
}
.fab__pattern { top: -149px; height: 482px; -webkit-mask-image: linear-gradient(1deg, transparent 46%, #000 70%); mask-image: linear-gradient(1deg, transparent 46%, #000 70%); }
.fab__text { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.fab__title { font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1.3; }
.fab__lead { font-size: 14px; line-height: 1.5; color: var(--text); }
.fab__btn { position: relative; z-index: 3; flex: none; width: 291px; }
.fab__icon { position: relative; width: 64px; height: 64px; border-radius: 512px; display: flex; align-items: center; justify-content: center; background: #2f2f32; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; }
.fab__icon .ico { width: 32px; height: 32px; color: var(--white); }

/* ---------------------------------------------------------------- line wrapping as set in Framer ("Balance" / no wrap) */
.promo__kicker, .promo__lead, .promo__note, .fab__lead, .hero__points li, .tag--mint, .stat__text, .areas__title,
.why-card h3, .why__gains li, .consult__title, .consult__steps h3, .faq__title, .faq__lead, .final-cta__title { text-wrap: balance; }
.area__effect-pill, .faq__more span, .quote-band__rating, .quote-band__author, .tag--lemon, .eyebrow, .final-cta__tags li,
.footer__links, .footer__copy, .footer__policy, .ticker__muted { white-space: nowrap; }

/* ---------------------------------------------------------------- motion helpers (site.js) */
.js [data-reveal] { opacity: 0; transform: translateY(35px); }
.js [data-reveal="50"] { transform: translateY(50px); }
.js .is-in[data-reveal] { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.js [data-fade] { opacity: 0; }
.js [data-fade].is-in { opacity: 1; transition: opacity 1s ease; }
.js [data-pop] { opacity: 0; transform: scale(0.8) translateY(30px); }
.js .sales__pill[data-pop] { transform: translate(-50%, -50%) scale(0.8); }
.js .is-in [data-pop] { opacity: 1; transform: none; transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.js .is-in .sales__pill[data-pop] { transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-fade], .js [data-pop] { opacity: 1 !important; transform: none !important; }
  .hero__content { animation: none !important; }
  .area { transition: none !important; }
  .dash, .hero__glow--b, .led-pulse::before, .meter__hex-lg, .meter__dial, .cursor, .sales__pill { animation: none !important; }
}

/* ================================================================ Desktop S: 1273–1479 */
@media (max-width: 1479.98px) {
  .hero__mesh { height: 907px; }
  .hero__glow--a { left: -70px; top: -70px; width: 240px; height: 240px; }
  .hero__glow--b { left: auto; right: -237px; top: -122px; width: 408px; height: 337px; }
  .hero__buttons { gap: 18px; }
  .btn--hero, .btn--hero-2 { height: 56px; font-size: 16px; line-height: 1.5; }
  .benefit-cards { flex-wrap: wrap; gap: 48px; }
  .benefit-card { flex: 0 0 calc(50% - 24px); height: 407px; }
  .benefit-card__text h3, .benefit-card__text p { max-width: 400px; }
  .ticker__mask { height: 71px; }
  .benefits__lead { letter-spacing: 0; }
  .benefits__title { max-width: none; }
  .quote-band__quote { font-size: 38px; }
  .reviews__title, .areas__title, .audience__title, .cases__title, .why__title, .faq__title { font-size: 44px; }
  .reviews__main { flex-basis: 786px; }
  .areas { padding: 128px 30px 80px; }
  .areas__inner { gap: 48px; }
  .areas__head { gap: 16px; }
  .areas__title { font-size: 52px; max-width: 790px; }
  .area__main { flex-basis: 451px; }
  .audience { padding: 128px 30px 80px; }
  .audience__inner { gap: 50px; }
  .audience__head { flex-direction: column; align-items: flex-start; }
  .audience__title { max-width: none; }
  .audience__photo { height: 653px; border-radius: 20px; margin-bottom: 14px; }
  .audience__cards { flex-direction: column; gap: 40px; }
  .audience-card { flex: none; }
  .audience-card div { gap: 16px; }
  .process-sec { padding: 40px 30px 80px; }
  .process-sec__title { flex-basis: 620px; padding-right: 93px; }
  .steps { flex-basis: 620px; }
  .steps p { max-width: 494px; }
  .cases { padding: 128px 64px; }
  .cases__btn { height: 56px; font-size: 16px; line-height: 1.5; }
  .why { padding: 128px 30px 0; }
  .why__inner { gap: 50px; }
  .why__head { gap: 16px; }
  .consult { padding: 128px 30px 96px; }
  .consult__box { gap: 50px; }
  .consult__box > * + * { margin-top: 30px; }
  .consult__steps { margin-top: 30px; }
  .gain-box__photo { flex-basis: 488px; }
  .faq { padding: 128px 30px 96px; }
  .faq-item summary { padding: 35px; }
  .faq-item > p { max-width: calc((100% - 70px) * 0.85); margin: -19px 0 0 35px; padding-bottom: 35px; }
  .why-card { padding: 20px; border-radius: 16px; }
  .why-card h3 { flex-direction: column; align-items: flex-start; gap: 24px; }
  .faq__inner { gap: 50px; }
  .faq__head { gap: 16px; }
  .final-cta { padding: 96px 30px; }
  .final-cta__title { font-size: 44px; }
  .final-cta__btn .btn { height: 56px; font-size: 16px; line-height: 1.5; }
}

/* ================================================================ Tablet: 810–1272 */
@media (max-width: 1272.98px) {
  .nav__bar { padding: 20px 30px; }
  .nav__links, .btn--nav { display: none; }
  .nav__toggle { display: flex; }
  .nav__dots { transform: scale(1.4); }
  .nav.is-open .nav__dots i { position: absolute; left: 5px; top: 13px; width: 24px; height: 4px; }
  .nav.is-open .nav__dots i:nth-child(1), .nav.is-open .nav__dots i:nth-child(4) { transform: rotate(45deg); }
  .nav.is-open .nav__dots i:nth-child(2), .nav.is-open .nav__dots i:nth-child(3) { transform: rotate(-45deg); }
  .nav.is-open .nav__bar { background: var(--ink); }
  .nav.is-open .nav__menu { display: block; background: var(--ink); padding: 0 30px 57px; }
  .nav__menu-links { display: flex; justify-content: space-between; padding: 46px 5px 0; }
  .nav__menu-links a { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.5; }
  .nav__menu-ico { display: none; }
  .nav__menu-caret { width: 16px; height: 16px; }
  .nav__menu-cta { display: none; }

  .hero__mesh { height: 714px; }
  .hero__glow--b { right: -243px; top: -127px; width: 420px; height: 347px; }
  .benefits__inner { gap: 80px; }
  .benefits__head { gap: 16px; }
  .benefits__title { max-width: 896px; }
  .ticker__muted, .ticker__list li { font-size: 34px; }
  .ticker__list li { height: 41px; line-height: 41px; }
  .ticker__mask { height: 52px; }
  .cursor--ty { --ax: 76px; --ay: 36px; --bx: 236px; --by: 25px; --cx: 319px; --cy: 61px; }
  .cursor--klient { --ax: 307px; --ay: 145px; --bx: 327px; --by: 185px; --cx: 182px; --cy: 159px; }
  .cursor--wsp { --ax: 66px; --ay: 175px; --bx: 44px; --by: 107px; --cx: 30px; --cy: 64px; }
  .quote-band__quote { max-width: 881px; }
  .reviews { padding: 128px 30px 96px; }
  .reviews__inner { gap: 50px; }
  .reviews__main { flex: 1 1 auto; }
  .review-card { height: 436px; }
  .stats { gap: 12px; }
  .stat { height: 167px; }
  .reviews__photo { display: none; }

  .area { flex-direction: column; gap: 0; padding: 0 80px; height: auto; }
  .area__main { flex: none; padding: 80px 0 12px; }
  .areas__title { font-size: 44px; max-width: 729px; }
  .area__lead { max-width: 685px; }
  .area__effect { margin-top: 40px; padding-top: 0; }
  .area__auto { padding: 100px 0 64px; gap: 40px; }
  .area__notch { left: -115px; top: 2px; bottom: auto; }
  .area__notch--b { left: auto; right: -115px; background: #0f0f12; }
  .area__scissors { left: -28px; top: 14px; transform: none; }
  .area__dash { left: -110px; top: 32px; width: calc(100% + 220px); height: 3px;
    background: repeating-linear-gradient(to right, #fff 0 16px, transparent 16px 32px); background-size: 100% 1px; background-position: 0 1px; }
  .area__photo { left: -19px; top: 30px; }

  .audience { padding: 128px 30px 80px; }
  .audience__photo { height: 508px; }
  .process-sec__body { flex-direction: column; gap: 64px; }
  .process-sec__title { flex: none; padding-right: 0; font-size: 44px; line-height: 1.3; }
  .steps { flex: none; width: 100%; }
  .steps p { max-width: 803px; }
  .cases { padding: 80px 64px; }
  .cases__head { flex-direction: column; align-items: flex-start; }
  .cases__btn { display: none; }
  .why { padding: 80px 30px; }
  .why__cards { flex-basis: 596px; }
  .why-card { padding: 32px; border-radius: 24px; }
  .why-card h3 { flex-direction: row; align-items: center; }
  .consult { padding: 40px 30px 80px; }
  .consult__box { padding: 64px 0 0; gap: 64px; }
  .consult__box > * + *, .consult__steps { margin-top: 0; }
  .consult__title { font-size: 44px; }
  .consult__steps { grid-template-columns: 1fr; padding: 0 64px; }
  .consult__steps li { flex-direction: row; align-items: stretch; gap: 32px; }
  .consult__num { flex: 0 0 40px; flex-direction: column; -webkit-mask-image: linear-gradient(#000 37.8%, transparent 100%); mask-image: linear-gradient(#000 37.8%, transparent 100%); }
  .consult__num b { width: 40px; height: 40px; font-size: 16px; }
  .consult__num i { width: 1px; height: auto; }
  .gain-box { border-radius: 64px; gap: 48px; }
  .gain-box__photo { flex-basis: 438px; height: 354px; border-radius: 0; }
  .gain-box__text ul { grid-template-columns: 1fr; }
  .faq { padding: 80px 30px; }
  .faq__more span { max-width: 430px; text-align: left; white-space: normal; text-wrap: balance; }
  .final-cta__lead { text-wrap: balance; }
  .final-cta { padding: 360px 64px 96px; }
  .final-cta__photo { width: 100%; max-width: none; height: 559px; -webkit-mask-image: linear-gradient(#000 40%, transparent 100%); mask-image: linear-gradient(#000 40%, transparent 100%); }
  .final-cta__content { max-width: 896px; justify-content: flex-start; }
  .final-cta__box { width: 604px; }
  .final-cta__title { font-size: 56px; }
  .final-cta__btn { margin-top: 40px; }
  .final-cta__tags { margin-top: 40px; max-width: 604px; }
  .footer__top { flex-direction: column; gap: 20px; padding: 60px 40px; }
  .fab { flex-direction: column; align-items: flex-end; }
  .footer__bottom { padding: 20px 40px; }
}

/* ================================================================ Phone: <810 */
@media (max-width: 809.98px) {
  .phone-only { display: inline; }
  .br-desk { display: none; }
  .nav__bar { padding: 20px; }
  .nav.is-hidden { transform: translateY(-82px); }
  .nav.is-open { bottom: 0; background: var(--ink); }
  .nav.is-open .nav__menu { padding: 20px 20px 40px; }
  .nav__menu-links { flex-direction: column; justify-content: flex-start; gap: 24px; padding: 5px; }
  .nav__menu-links a { gap: 24px; font-size: 24px; line-height: 1.5; }
  .nav__menu-links a span { flex: 1; }
  .nav__menu-ico { display: block; width: 32px; height: 32px; }
  .nav__menu-caret { width: 24px; height: 24px; }
  .nav__menu-cta { display: block; padding: 24px 5px 0; }
  .nav__menu-cta .btn { height: 53px; padding: 14px 24px; }

  .h2 { font-size: 36px; }
  .hero { padding: 128px 20px 96px; }
  .hero__mesh { height: 600px; opacity: 0.7; }
  .hero__photo { background-image: url(../img/hero-bg-800.webp); }
  .review-card { background-image: url(../img/testimonial-bg-800.webp); }
  .hero__glow--a { left: -1px; top: 4px; width: 76px; height: 76px; opacity: 0.6; transform: scale(0.4); }
  .hero__glow--b { right: -187px; top: -106px; width: 346px; height: 285px; }
  .hero__content { gap: 32px; }
  .hero__title-wrap { gap: 20px; }
  .hero__title { font-size: 31px; letter-spacing: -0.04em; }
  .hero__title-light { letter-spacing: -0.02em; }
  .hero__lead { font-size: 18px; }
  .hero__buttons { width: 100%; flex-direction: column; gap: 16px; }
  .hero__buttons .btn { width: 100%; }
  .btn--hero { height: 57px; font-size: 18px; line-height: 1.4; }
  .btn--hero-2 { height: 48px; padding: 12px 32px; }
  .hero__points { flex-direction: column; gap: 16px; }
  .hero__points li { width: auto; color: var(--white); }

  .benefits { gap: 96px; }
  .benefits__inner { padding: 0 20px; gap: 64px; }
  .benefits__head { gap: 14px; }
  .benefits__title { font-size: 31px; letter-spacing: -0.03em; }
  .benefits__lead { line-height: 1.6; letter-spacing: 0; }
  .benefits__lead .hl-phone { color: var(--lime); }
  .benefit-cards { flex-direction: column; gap: 32px; }
  .benefit-card { flex: none; width: 100%; height: auto; min-height: 385px; }
  .benefit-card--meter { min-height: 405px; }
  .benefit-card--sales { min-height: 411px; }
  .benefit-card--process { min-height: 408px; }
  .benefit-card__text { gap: 12px; padding: 32px 24px; }
  .benefit-card--ticker .benefit-card__text { padding-top: 0; }
  .ticker { height: 180px; }
  .ticker__muted, .ticker__list li { font-size: 26px; }
  .ticker__mask { height: 37px; }
  .ticker__list li { height: 31px; line-height: 31px; }
  .cursor { scale: 0.8; }
  .is-in .cursor { animation-duration: 6s; }
  .cursor--ty { --ax: 45px; --ay: 23px; --bx: 238px; --by: 17px; --cx: 279px; --cy: 35px; }
  .cursor--klient { --ax: 262px; --ay: 150px; --bx: 272px; --by: 170px; --cx: 200px; --cy: 157px; }
  .cursor--wsp { --ax: 46px; --ay: 165px; --bx: 41px; --by: 137px; --cx: 29px; --cy: 42px; }
  .process__bg { transform: scale(0.5); }
  .quote-band { padding: 64px 0; }
  .quote-band__rating { font-size: 16px; }
  .quote-band__rating .ico { width: 20px; height: 20px; }
  .quote-band__quote { max-width: 335px; font-size: 26px; }
  .quote-band__author strong { font-size: 20px; }
  .quote-band__author span { font-family: var(--f-display); font-weight: 500; font-size: 16px; letter-spacing: -0.02em; }

  .reviews { padding: 80px 20px; }
  .reviews__inner { gap: 40px; }
  .reviews__title { font-size: 29px; text-align: left; }
  .reviews__grid { flex-direction: column; }
  .reviews__main { width: 100%; }
  .review-card { height: auto; padding: 25px; border-radius: 18px; gap: 26px; }
  .review-card__body { gap: 20px; }
  .tag--lemon { padding: 4px 18px 4px 10px; }
  .review-card__quote { font-weight: 400; font-size: 18px; letter-spacing: -0.02em; }
  .review-card__author { gap: 16px; }
  .review-card__avatar { width: 50px; height: 50px; margin: 0; }
  .review-card__who strong { font-weight: 400; font-size: 18px; letter-spacing: -0.02em; }
  .review-card__who span { font-size: 14px; }
  .review-card__logo { display: none; }
  .review-card__logo-m { display: block; margin-right: 24px; }
  .stats { flex-direction: column; gap: 20px; }
  .stat { height: auto; padding: 32px 18px; border-radius: 18px; align-items: center; }
  .stat__top { flex-direction: column; gap: 24px; width: 100%; }
  .stat__num { font-size: 58px; }
  .stat__num > span:not(.odo) { width: 38px; }
  .odo { width: 38px; height: 58px; }
  .odo__strip span { height: 58px; line-height: 58px; }
  .stat .tag--mint { width: 100%; padding: 8px 16px 8px 10px; }
  .stat__text { padding: 0; text-align: center; }

  .areas { padding: 80px 20px 64px; }
  .areas__inner { gap: 40px; }
  .areas__head { align-items: flex-start; gap: 14px; text-align: left; }
  .areas__title { font-size: 36px; }
  .areas__lead { max-width: 312px; }
  .area { padding: 0 24px; border-radius: 32px; }
  .area__main { padding: 48px 0 0; text-align: center; align-items: center; }
  .area__title { font-size: 36px; letter-spacing: 0; }
  .area__lead { font-size: 18px; }
  .area__effect { margin-top: 40px; flex-direction: row; align-items: flex-start; gap: 16px; padding-left: 20px; width: 100%; }
  .area__effect-label { position: absolute; left: -9px; margin-top: 23px; font-size: 16px; letter-spacing: 0.06em; transform: rotate(-90deg); }
  .area__effect-pill { flex: 1; padding: 12px 14px; border-radius: 16px; background: none; text-align: left; font-weight: 600; font-size: 14px; position: relative; }
  .area__effect-pill::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(199, 245, 34, 0.33); border-radius: inherit; }
  .area__auto { padding: 100px 0 48px; gap: 32px; }
  .area__auto-title { font-size: 28px; text-align: center; }
  .area__items li { font-size: 16px; line-height: 1.6; }
  .area__items .ico { width: 24px; height: 24px; }
  .area__notch { width: 48px; height: 48px; left: -56px; background: #111113; }
  .area__notch--b { right: -56px; background: #111113; }
  .area__scissors { left: -45px; top: 8px; }
  .area__dash { left: -48px; width: calc(100% + 96px); top: 24px; }
  .area__photo { left: -19px; top: 0; width: 369px; height: 450px;
    -webkit-mask-image: linear-gradient(158deg, rgba(0, 0, 0, 0.33) 3%, rgba(0, 0, 0, 0.06) 30%, rgba(0, 0, 0, 0.04) 58%, transparent 73%);
    mask-image: linear-gradient(158deg, rgba(0, 0, 0, 0.33) 3%, rgba(0, 0, 0, 0.06) 30%, rgba(0, 0, 0, 0.04) 58%, transparent 73%); }

  .audience { padding: 80px 20px; }
  .audience__inner { gap: 40px; }
  .audience__head { gap: 20px; }
  .audience__btn { width: 100%; height: 55px; padding: 16px 24px 14px; }
  .audience__photo { height: 219px; border-radius: 16px; margin: 0 0 24px; }
  .audience__cards { gap: 32px; }
  .audience-card { flex-direction: column; }
  .audience-card__ico { margin-bottom: 3px; }

  .process-sec { padding: 64px 20px 60px; }
  .process-sec__inner { gap: 48px; }
  .process-sec__title { font-size: 33px; }
  .steps li { gap: 24px; padding: 24px 0; }
  .steps p { max-width: none; }
  .steps li:last-child { padding-bottom: 0; }

  .cases { padding: 80px 20px 60px; }
  .cases__inner { gap: 48px; }
  .cases__head { gap: 24px; }
  .cases__title { font-size: 36px; }
  .cases__btn { display: inline-flex; width: 100%; height: 48px; padding: 12px 32px; font-size: 16px; line-height: 1.5; }
  .pattern--lum { height: 565px; -webkit-mask-image: linear-gradient(#000 62.6%, transparent 100%); mask-image: linear-gradient(#000 62.6%, transparent 100%); }
  .ico--desk { display: none; }
  .ico--phone { display: block; }
  .carousel { max-height: 2168px; overflow: hidden; }
  .carousel__track, .carousel.is-scrolled .carousel__track, .carousel.is-end .carousel__track { flex-direction: column; gap: 24px; overflow: visible; max-height: 2168px;
    -webkit-mask-image: linear-gradient(0deg, transparent 4.5%, #000 18.9%); mask-image: linear-gradient(0deg, transparent 4.5%, #000 18.9%); }
  .carousel.is-expanded, .carousel.is-expanded .carousel__track { max-height: none; }
  .carousel.is-expanded .carousel__track { -webkit-mask-image: none; mask-image: none; }
  .case { flex: none; height: auto; }
  .case__top { flex-direction: column; align-items: flex-start; }
  .case__client p { width: auto; }
  .case__body { padding-top: 24px; padding-bottom: 52px; }
  .carousel__nav { display: none; }
  .carousel__more { display: inline-flex; position: absolute; left: 50%; top: 2079px; transform: translateX(-50%); z-index: 2; width: 210px; }
  .carousel.is-expanded .carousel__more { display: none; }

  .why { padding: 64px 20px 80px; }
  .why__inner { gap: 40px; }
  .why__head { align-items: flex-start; gap: 14px; text-align: left; }
  .why__title { font-size: 36px; }
  .why__body { flex-direction: column; gap: 64px; }
  .why__cards { flex: none; width: 100%; }
  .why-card { padding: 20px; border-radius: 16px; gap: 12px; }
  .why-card h3 { flex-direction: column; align-items: flex-start; gap: 20px; }
  .why__gains { width: 100%; }
  .why__gains li { flex-direction: row; align-items: center; gap: 20px; }
  .why__gains .ico { width: 32px; height: 32px; }

  .consult { padding: 64px 20px; }
  .consult__box { padding: 0; gap: 64px; }
  .consult__box::after { display: none; }
  .consult__title { padding: 0; text-align: left; line-height: 1.3; }
  .consult__steps { padding: 0; }
  .consult__title { font-size: 36px; }
  .consult__steps li { gap: 24px; }
  .consult__num { -webkit-mask-image: linear-gradient(#000 34%, transparent 100%); mask-image: linear-gradient(#000 34%, transparent 100%); }
  .gain-box { flex-direction: column; gap: 32px; border-radius: 32px; }
  .gain-box__photo { flex: none; width: 100%; height: 222px; border-radius: 32px; }
  .gain-box__text { padding: 0 20px 40px; }
  .gain-box__text h3 { font-weight: 600; font-size: 28px; text-align: center; }
  .gain-box__text li { font-size: 18px; line-height: 1.4; }

  .faq { padding: 64px 20px; }
  .faq__inner { gap: 40px; }
  .faq__head { align-items: flex-start; gap: 14px; text-align: left; }
  .faq__title { font-size: 36px; line-height: 1.3; }
  .faq-item summary { padding: 24px; }
  .faq-item h3 { font-size: 22px; }
  .faq-item > p { max-width: calc((100% - 48px) * 0.85); margin: -8px 0 0 24px; padding-bottom: 24px; }
  .faq__more { flex-direction: column; font-size: 20px; text-align: center; }
  .faq__more span { max-width: none; text-align: center; }
  .area__effect-pill { white-space: normal; text-wrap: balance; }
  .why__gains li, .consult__title, .faq__title, .final-cta__lead { text-wrap: wrap; }

  .final-cta { padding: 115px 20px 80px; }
  .final-cta__photo { width: 100%; height: 275px; -webkit-mask-image: linear-gradient(#000 18.9%, rgba(0, 0, 0, 0.39) 55.9%, rgba(0, 0, 0, 0.08) 79.7%, transparent 100%); mask-image: linear-gradient(#000 18.9%, rgba(0, 0, 0, 0.39) 55.9%, rgba(0, 0, 0, 0.08) 79.7%, transparent 100%); }
  .final-cta__box { width: 100%; align-items: stretch; }
  .final-cta__mark { align-self: flex-end; }
  .final-cta__title { font-size: 35px; }
  .final-cta__lead { margin-top: 14px; font-size: 16px; }
  .final-cta__btn { margin-top: 35px; }
  .final-cta__btn .btn { width: 100%; height: 57px; font-size: 18px; }
  .final-cta__tags { margin-top: 35px; flex-direction: column; gap: 16px; padding-left: 4px; }
  .final-cta__tags li { font-size: 18px; line-height: 1.3; }
  .final-cta__tags li::before { width: 10px; height: 10px; }

  .footer__top { align-items: flex-start; gap: 24px; padding: 40px 20px 24px; }
  .footer__links { gap: 10px; }
  .footer__links a { font-size: 14px; }
  .footer__links a + a::before { height: 21px; margin-right: 10px; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 32px; padding: 24px 20px; }
  .footer__copy, .footer__policy { font-size: 14px; }

  .promo__box { width: 351px; padding: 32px 24px 24px; gap: 24px; align-items: center; background: #2f2f32; }
  .promo__text { gap: 16px; padding-right: 40px; }
  .promo__kicker { font-size: 14px; line-height: 1.4; }
  .promo__title { margin-top: 0; font-size: 32px; line-height: 1.1; }
  .promo__lead { margin-right: -40px; font-size: 15px; }
  .promo__btn { width: 100%; }
  .promo__urgency { gap: 12px; }
  .promo__bar { width: 268px; }
  .promo__photo { top: -149px; height: 931px; }
  .fab { left: 20px; right: 20px; bottom: 20px; transform: none; flex-direction: column; align-items: flex-end; padding: 0; gap: 20px; }
  .fab__card { width: 100%; height: 80px; padding: 16px; background: #2f2f32; }
  .fab__text { display: none; }
  .fab__btn { width: 100%; }
  .fab__icon { width: 54px; height: 54px; order: -1; }
  .fab__icon .ico { width: 28px; height: 28px; }
}

/* ================================================================ legal page (/polityka-prywatnosci) */
.legal { display: flex; justify-content: center; padding: 160px 64px 128px; }
.legal__inner { width: 100%; max-width: 950px; display: flex; flex-direction: column; gap: 40px; }
.legal__head { display: flex; flex-direction: column; align-items: center; gap: 15px; text-align: center; font-family: var(--f-geist); }
.legal__date { display: flex; gap: 10px; font-weight: 500; font-size: 18px; line-height: 1.4; letter-spacing: -0.01em; color: var(--muted); }
.legal__date span { color: var(--lime); }
.legal__title { font-weight: 500; font-size: 48px; line-height: 1.1; letter-spacing: -0.04em; }
.legal__site { font-size: 18px; line-height: 1.4; color: var(--text); }
.legal__rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--muted); }
.legal__text { font-family: var(--f-geist); font-size: 18px; line-height: 1.4; color: var(--text); }
.legal__text > * + * { margin-top: 14px; }
.legal__text strong { font-weight: 700; }
.legal__text a[href^="./"] { text-decoration: underline; }
.legal__text li { position: relative; padding-left: 23.868px; }
.legal__text li::before { content: "•"; position: absolute; left: 8px; }
@media (max-width: 809.98px) {
  .legal { padding: 160px 20px 128px; }
  .legal__head { align-items: flex-start; text-align: left; }
}

/* ================================================================ 404 */
.notfound { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 160px 20px 96px; text-align: center; }
.notfound__code { font-family: var(--f-mono); font-weight: 700; font-size: 96px; line-height: 1; color: var(--lime); }
.notfound__lead { max-width: 480px; font-size: 18px; line-height: 1.4; color: var(--text); margin-bottom: 20px; }

/* ===== Contact form modal (lead-form.js, website/docs/OWN_CONTACT_FORM_PLAN.md; approved mockup site/mockups/contact-form.html) ===== */
html.cf-open, html.cf-open body { overflow: hidden; }
.cf { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.2s ease; }
.cf[hidden] { display: none; }
.cf.is-open { opacity: 1; }
.cf__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* The box does not scroll (its border always frames the whole dialog); .cf__scroll does, .cf__foot (submit) stays at the bottom. */
.cf__box { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #161618; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); transform: translateY(12px); transition: transform 0.25s var(--ease-out, ease-out); outline: none; }
.cf.is-open .cf__box { transform: none; }
.cf__box::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; border: 1px solid rgba(199, 245, 34, 0.16); pointer-events: none; }
.cf__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 36px 40px 24px; }
.cf__foot { position: relative; flex: none; padding: 0 40px 24px; background: #161618; }
.cf__foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 40px; background: linear-gradient(rgba(22, 22, 24, 0), #161618); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.cf.has-more .cf__foot { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06); }
.cf.has-more .cf__foot::before { opacity: 1; }
.cf__foot .cf__note { margin-top: 10px; }
.cf.is-success .cf__foot, .cf.is-failure .cf__foot { display: none; }
.cf__close { position: absolute; right: 16px; top: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 512px; display: flex; align-items: center; justify-content: center; background: #2d2d2f; color: var(--white); font-size: 22px; line-height: 1; }
.cf__close:hover { background: #3a3a3c; }
.cf__kicker { color: var(--lime); font: 500 15px/1.4 var(--f-text); margin-bottom: 8px; }
.cf__title { font: 600 32px/1.2 var(--f-display); letter-spacing: -0.02em; color: var(--white); padding-right: 40px; }
.cf__lead { margin-top: 10px; font: 400 16px/1.5 var(--f-text); color: var(--text); }
.cf__form { margin-top: 24px; display: grid; gap: 18px; }
.cf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cf__field { display: grid; gap: 8px; align-content: start; }
.cf__label { font: 500 14px/1.3 var(--f-text); color: var(--white); }
.cf__label i, .cf__consent i { font-style: normal; color: var(--lime); }
.cf__label small { font: 400 13px/1.3 var(--f-text); color: var(--muted); margin-left: 4px; }
.cf__input { width: 100%; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--white); font: 400 16px/1.4 var(--f-text); transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; }
textarea.cf__input { height: 96px; padding: 14px 16px; resize: vertical; }
.cf__input::placeholder { color: rgba(255, 255, 255, 0.32); }
.cf__input:hover { border-color: rgba(255, 255, 255, 0.2); }
.cf__input:focus { outline: none; border-color: var(--lime); background: rgba(200, 244, 35, 0.04); box-shadow: 0 0 0 3px rgba(200, 244, 35, 0.14); }
.cf__field.is-invalid .cf__input { border-color: #ff6b5e; box-shadow: 0 0 0 3px rgba(255, 107, 94, 0.12); }
.cf__error { display: none; font: 400 13px/1.3 var(--f-text); color: #ff8a80; }
.cf__field.is-invalid .cf__error { display: block; }
.cf__consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font: 400 14px/1.45 var(--f-text); color: var(--text); cursor: pointer; }
.cf__consent input { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.04); display: grid; place-content: center; cursor: pointer; }
.cf__consent input::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--ink); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.cf__consent input:checked { background: var(--lime); border-color: var(--lime); }
.cf__consent input:checked::after { opacity: 1; }
.cf__consent input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.cf__consent a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.cf__field.is-invalid .cf__consent input { border-color: #ff6b5e; }
.cf__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf__ts { position: absolute; width: 0; height: 0; overflow: hidden; }
.cf__submit .btn__label { gap: 10px; }
.cf__plane { flex: none; }
/* Submit label "Chcę bezpłatną konsultację" + plane (measured 2026-10-23, Chromium = WebKit): full 270 px, without
   "bezpłatną" 179 px, text only 149 px. On phones the button is 100vw - 40 px with >= 24 px side padding (+3 px slack):
   full from 364 px, short + icon from 273 px, below that the text only. Tablet/desktop buttons are >= 488 px. */
@media (max-width: 599.98px) { .cf__submit.btn--lg { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 363.98px) { .cf__free { display: none; } }
@media (max-width: 272.98px) { .cf__plane { display: none; } }
.cf__spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(1, 1, 4, 0.25); border-top-color: var(--ink); animation: cf-spin 0.8s linear infinite; }
@keyframes cf-spin { to { transform: rotate(360deg); } }
.cf.is-sending .cf__input, .cf.is-sending .cf__consent { opacity: 0.55; }
.cf__note { font: 400 13px/1.4 var(--f-text); color: var(--muted); text-align: center; }
.cf__note svg { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.cf__result { display: none; text-align: center; padding: 16px 0 4px; outline: none; }
.cf.is-success .cf__form, .cf.is-failure .cf__form, .cf.is-success .cf__lead { display: none; }
.cf.is-success .cf__result--ok, .cf.is-failure .cf__result--fail { display: block; }
.cf__badge { width: 64px; height: 64px; margin: 8px auto 20px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--ink); }
.cf__badge--warn { background: rgba(255, 138, 128, 0.14); color: #ff8a80; }
.cf__result h3 { font: 600 26px/1.25 var(--f-display); color: var(--white); }
.cf__result p { margin: 10px auto 0; max-width: 400px; font: 400 16px/1.5 var(--f-text); color: var(--text); }
.cf__actions { margin-top: 24px; display: grid; gap: 10px; }
.cf__mail { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.cf__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Touch: no sticky hover colour on the submit button after a tap. */
@media (hover: none) {
  .cf__submit.btn--lime:hover { background: var(--lime); }
  .cf__submit:hover .btn__label:not(.btn__label--back) { transform: none; opacity: 1; }
  .cf__submit:hover .btn__label--back { opacity: 0; }
}
@media (max-width: 809.98px) {
  .cf { padding: 16px; }
}
/* Phones only: full-height sheet (tablets keep the centred dialog). */
@media (max-width: 599.98px) {
  .cf { padding: 0; align-items: stretch; }
  .cf__box { max-width: none; max-height: none; height: 100%; border-radius: 0; }
  /* 20 px side padding; the close button sits beside the kicker. */
  .cf__scroll { padding: calc(22px + env(safe-area-inset-top)) 20px 20px; }
  .cf__foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
  .cf__foot .cf__note { margin-top: 8px; }
  .cf__close { top: calc(12px + env(safe-area-inset-top)); right: 12px; }
  .cf__kicker { padding-right: 48px; }
  .cf__row { grid-template-columns: 1fr; }
  .cf__form { gap: 14px; margin-top: 20px; }
  .cf__title { font-size: 28px; }
  .cf__lead { font-size: 15px; }
  textarea.cf__input { height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .cf, .cf__box, .cf__foot::before { transition: none; }
}