/* ==========================================================================
   nextweb. — design system
   Light base, dark statement sections, one accent: the red dot.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* brand (kept from nextweb.bg) */
  --c-black: #000000;
  --c-ink: #070707;
  --c-red: #ED1D2E;
  --c-red-ink: #D2182A;          /* red for small text: 5.4:1 on white */
  --c-yellow: #F6CE45;

  /* neutrals */
  --c-paper: #FFFFFF;
  --c-paper-2: #F5F5F3;
  --c-paper-3: #ECECE8;
  --c-line: #E6E6E1;
  --c-line-2: #D3D3CC;
  --c-muted: #5B6770;            /* body grey, AA on paper (5.8:1) */
  --c-muted-2: #6E7A84;          /* original grey — large text & decoration only */
  --c-night: #0A0A0B;
  --c-night-2: #131315;
  --c-night-3: #1C1C1F;
  --c-night-muted: #A1A7AE;      /* 8:1 on night */

  /* semantic (re-mapped inside .section--dark) */
  --bg: var(--c-paper);
  --bg-soft: var(--c-paper-2);
  --surface: var(--c-paper);
  --fg: var(--c-ink);
  --fg-muted: var(--c-muted);
  --border: var(--c-line);
  --border-strong: var(--c-line-2);
  --accent: var(--c-red);

  /* type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Unbounded", "Geist", ui-sans-serif, system-ui, sans-serif;  /* bold headings (hero, h1, h2) */
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* Unbounded is ~15% wider than Geist — sizes are compensated */
  --fs-giant: clamp(2.3rem, 1.1rem + 3.8vw, 5rem);
  --fs-display: clamp(2rem, 1.1rem + 2.6vw, 3.9rem);
  --fs-h2: clamp(1.65rem, 1.1rem + 1.6vw, 2.7rem);
  --fs-h3: clamp(1.3rem, 1.1rem + .7vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  --fs-lead: clamp(1.1rem, 1rem + .45vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;

  /* space */
  --gutter: clamp(1rem, .4rem + 2.8vw, 3rem);
  --section-y: clamp(5rem, 2.5rem + 8vw, 10rem);
  --container: 1440px;
  --measure: 68ch;

  /* shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(10, 10, 11, .05);
  --sh-2: 0 16px 40px -18px rgba(10, 10, 11, .22);
  --sh-3: 0 40px 100px -30px rgba(10, 10, 11, .35);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --d-1: .18s;
  --d-2: .38s;
  --d-3: .8s;
  --d-4: 1.2s;

  /* layers */
  --z-header: 100;
  --z-mega: 110;
  --z-menu: 200;
  --z-cursor: 300;
  --z-cookie: 350;
  --z-modal: 400;

  --header-h: 76px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main { display: block; outline: none; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
address { font-style: normal; }
blockquote, figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }
code { font-family: var(--font-mono); font-size: .9em; padding: .1em .4em; border-radius: 6px; background: var(--bg-soft); }
::selection { background: var(--c-red); color: #fff; }
:focus-visible { outline: 2px solid var(--c-red); outline-offset: 3px; border-radius: 6px; }

.i { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--c-black); color: #fff; font-weight: 500;
  transform: translateY(-160%); transition: transform var(--d-2) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---------- 3. Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--tight { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.section--dark {
  --bg: var(--c-night);
  --bg-soft: var(--c-night-2);
  --surface: var(--c-night-2);
  --fg: #FFFFFF;
  --fg-muted: var(--c-night-muted);
  --border: rgba(255, 255, 255, .1);
  --border-strong: rgba(255, 255, 255, .2);
  background: var(--bg);
  color: var(--fg);
}
.section--dark ::selection { background: var(--c-red); color: #fff; }

/* ---------- 4. Typography ---------- */
.t-giant, .t-display, .t-h2, .display-font,
.fact__value, .case-next__title, .price-card__price, .big-number, .nf__code, .mmenu__link, .block-title {
  font-family: var(--font-display);
  font-feature-settings: "locl" 0;   /* standard Cyrillic forms (no Bulgarian locl) */
  font-weight: 600;
}
.t-giant { font-size: var(--fs-giant); line-height: 1.02; letter-spacing: -.035em; }
.t-display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.03em; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.025em; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.03em; font-weight: 600; }
.t-h4 { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.015em; font-weight: 600; }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; letter-spacing: -.012em; color: var(--fg-muted); max-width: 46ch; }
.t-mono { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 450; letter-spacing: .06em; text-transform: uppercase; }
.t-muted { color: var(--fg-muted); }

/* the brand period — a true circle like the logo's dot */
.dot { display: inline-block; width: .15em; height: .15em; margin-left: .055em; border-radius: 50%; background: var(--c-red); vertical-align: baseline; }
.t-giant .dot, .t-display .dot { width: .14em; height: .14em; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 1.4rem;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fg);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 4px rgba(237, 29, 46, .14); }
.eyebrow--light { color: #fff; }

.link-u {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--d-3) var(--ease-out);
  padding-bottom: 1px;
}
.link-u:hover { background-size: 0 1px; background-position: 100% 100%; }
.link-u-hover {
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transition: background-size var(--d-3) var(--ease-out), color var(--d-1);
  padding-bottom: 1px;
}
.link-u-hover:hover { background-size: 100% 1px; background-position: 0 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.link-arrow .i { transition: transform var(--d-2) var(--ease-out); }
.link-arrow:hover .i { transform: translateX(4px); }

/* ---------- 5. Buttons ---------- */
.btn {
  --h: 56px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: var(--h); padding: 0 8px 0 26px; border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; overflow: hidden;
  transition: background-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), border-color var(--d-2), transform var(--d-1);
  touch-action: manipulation;
}
.btn:active { transform: scale(.98); }
.btn:not(:has(.btn__icon)) { padding: 0 26px; }
.btn__label { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; }
.btn__label > span { display: block; transition: transform var(--d-2) var(--ease-out); }
.btn__label::after {
  content: attr(data-text); position: absolute; left: 0; top: 100%; width: 100%;
  transition: transform var(--d-2) var(--ease-out);
}
.btn:hover .btn__label > span, .btn:hover .btn__label::after { transform: translateY(-100%); }
.btn__icon {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: calc(var(--h) - 16px); height: calc(var(--h) - 16px); border-radius: 50%;
  transition: background-color var(--d-2) var(--ease-out), color var(--d-2);
}
.btn__icon .i { grid-area: 1 / 1; transition: transform var(--d-2) var(--ease-out); }
.btn__icon .i + .i { transform: translateX(-160%); }
.btn:hover .btn__icon .i:first-child { transform: translateX(160%); }
.btn:hover .btn__icon .i + .i { transform: none; }

.btn--primary { background: var(--c-black); color: #fff; }
.btn--primary .btn__icon { background: #fff; color: var(--c-black); }
.btn--primary:hover .btn__icon { background: var(--c-red); color: #fff; }
.btn--light { background: #fff; color: var(--c-black); }
.btn--light .btn__icon { background: var(--c-black); color: #fff; }
.btn--light:hover .btn__icon { background: var(--c-red); }
.btn--outline { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn--outline:hover { border-color: var(--fg); }
.btn--outline .btn__icon { background: var(--fg); color: var(--bg); }
.btn--ghost { background: var(--bg-soft); color: var(--fg); }
.btn--sm { --h: 46px; font-size: .9375rem; padding-left: 20px; }
.btn--sm:not(:has(.btn__icon)) { padding: 0 20px; }
.btn--lg { --h: 64px; font-size: 1.0625rem; padding-left: 30px; }

.btn__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__icon { display: none; }
.btn.is-loading .btn__spinner { display: block; margin-right: 18px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border-strong); color: var(--fg); background: transparent;
  transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2), transform var(--d-1);
}
.icon-btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.icon-btn:active { transform: scale(.94); }
.icon-btn--light { color: #fff; border-color: rgba(255, 255, 255, .22); }
.icon-btn--light:hover { background: #fff; color: var(--c-black); border-color: #fff; }

.icon-tile {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px;
  background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border);
  transition: background-color var(--d-2), color var(--d-2), transform var(--d-2) var(--ease-out);
}
.icon-tile--sm { width: 42px; height: 42px; border-radius: 12px; }

/* chips */
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: .875rem; font-weight: 500; color: var(--fg);
}
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2s var(--ease-out) infinite; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip, .chip-check span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 500; color: var(--fg); cursor: pointer; user-select: none;
  transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2);
}
.filter-chip:hover, .chip-check:hover span { border-color: var(--fg); }
.filter-chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.filter-chip .count { font-family: var(--font-mono); font-size: .75rem; opacity: .6; }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-check input:checked + span { background: #fff; color: var(--c-black); border-color: #fff; }
.chip-check input:focus-visible + span { outline: 2px solid var(--c-red); outline-offset: 3px; }

/* ---------- 6. Header & navigation ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header);
  transition: transform .5s var(--ease-out), background-color var(--d-2), box-shadow var(--d-2), color var(--d-2);
}
.header__inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.header__logo { flex-shrink: 0; display: block; width: 156px; margin-right: auto; }
.header__logo img { width: 100%; height: auto; }
.header.is-scrolled {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 rgba(10, 10, 11, .06);
}
.header.is-hidden:not(.is-mega-open) { transform: translateY(-100%); }

.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 500; letter-spacing: -.01em;
  transition: background-color var(--d-2);
}
.nav__link:hover { background: rgba(10, 10, 11, .05); }
.nav__link[aria-current="page"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-red); }
.nav__item--mega .nav__link { padding-right: 4px; }
.nav__toggle {
  display: grid; place-items: center; width: 32px; height: 44px; margin-left: -2px; border-radius: var(--r-pill);
  transition: transform var(--d-2) var(--ease-out);
}
.nav__toggle[aria-expanded="true"] .i { transform: rotate(180deg); }
.nav__toggle .i { transition: transform var(--d-2) var(--ease-out); }

.header__actions { display: flex; align-items: center; gap: 12px; }
.header__phone { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 6px; font-size: .9375rem; font-weight: 500; font-variant-numeric: tabular-nums; }

.burger { display: none; width: 48px; height: 48px; border-radius: 50%; background: var(--c-black); color: #fff; place-items: center; }
.burger__lines { position: relative; display: block; width: 18px; height: 10px; }
.burger__lines span { position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform var(--d-2) var(--ease-out), top var(--d-2) var(--ease-out); }
.burger__lines span:first-child { top: 0; }
.burger__lines span:last-child { top: 8.4px; }
.burger[aria-expanded="true"] { background: #fff; color: var(--c-black); }
.burger[aria-expanded="true"] .burger__lines span:first-child { top: 4.2px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines span:last-child { top: 4.2px; transform: rotate(-45deg); }

/* mega menu */
.mega {
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: var(--z-mega);
  padding: 8px 0 32px;
  visibility: hidden; opacity: 0; transform: translateY(-10px);
  transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out), visibility 0s linear var(--d-2);
}
.mega::before {
  content: ""; position: absolute; inset: 0 0 0 0; z-index: -1;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border); box-shadow: 0 30px 60px -30px rgba(10, 10, 11, .25);
}
.nav__item--mega.is-open .mega { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
html:not(.js) .nav__item--mega:hover .mega, html:not(.js) .nav__item--mega:focus-within .mega { visibility: visible; opacity: 1; transform: none; }
.mega__inner { display: grid; grid-template-columns: 1.55fr 1fr .95fr; gap: 40px; padding-top: 24px; }
.mega__label { color: var(--fg-muted); margin-bottom: 14px; }
.mega__services { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega__service { display: flex; gap: 14px; padding: 14px; border-radius: var(--r-md); transition: background-color var(--d-2); }
.mega__service:hover { background: var(--c-paper-2); }
.mega__service:hover .icon-tile { background: var(--c-black); color: #fff; border-color: var(--c-black); }
.mega__service strong { display: block; font-size: .9875rem; font-weight: 600; letter-spacing: -.01em; }
.mega__service small { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.45; color: var(--fg-muted); }
.mega__list { margin-bottom: 18px; }
.mega__list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: .9375rem; font-weight: 500; transition: color var(--d-1), padding var(--d-2) var(--ease-out); }
.mega__list a:hover { padding-left: 6px; }
.mega__price { color: var(--fg-muted); white-space: nowrap; }
.mega__card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border-radius: var(--r-lg); background: var(--c-night); color: #fff; }
.mega__card::after { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -70px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(237, 29, 46, .9), rgba(237, 29, 46, 0) 65%); filter: blur(10px); opacity: .6; }
.mega__card .eyebrow { margin-bottom: 18px; }
.mega__card-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 10px; }
.mega__card-text { color: var(--c-night-muted); font-size: .9375rem; margin-bottom: 22px; }
.mega__phone { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: .9375rem; color: var(--c-night-muted); }
.mega__phone:hover { color: #fff; }
.mega-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 11, .2); opacity: 0; visibility: hidden; transition: opacity var(--d-2), visibility 0s linear var(--d-2); }
.is-mega-open ~ .mega-scrim, body.mega-open .mega-scrim { opacity: 1; visibility: visible; transition-delay: 0s; }

/* mobile menu */
.mmenu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--c-night); color: #fff; overflow-y: auto;
  clip-path: circle(0% at calc(100% - 44px) 38px);
  visibility: hidden;
  transition: clip-path .7s var(--ease-in-out), visibility 0s linear .7s;
}
.mmenu.is-open { clip-path: circle(150% at calc(100% - 44px) 38px); visibility: visible; transition-delay: 0s; }
.mmenu__inner { min-height: 100%; display: flex; flex-direction: column; gap: 40px; padding: calc(var(--header-h) + 24px) var(--gutter) 40px; }
.mmenu__list { list-style: none; }
.mmenu__link { display: flex; align-items: baseline; gap: 16px; padding: 8px 0; font-size: clamp(1.45rem, 6vw, 2.1rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.mmenu__link[aria-current="page"] { color: var(--c-red); }
.mmenu__num { color: var(--c-night-muted); font-size: .75rem; letter-spacing: .08em; }
.mmenu__list li { opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.mmenu.is-open .mmenu__list li { opacity: 1; transform: none; }
.mmenu.is-open .mmenu__list li:nth-child(2) { transition-delay: .05s; }
.mmenu.is-open .mmenu__list li:nth-child(3) { transition-delay: .1s; }
.mmenu.is-open .mmenu__list li:nth-child(4) { transition-delay: .15s; }
.mmenu.is-open .mmenu__list li:nth-child(5) { transition-delay: .2s; }
.mmenu.is-open .mmenu__list li:nth-child(6) { transition-delay: .25s; }
.mmenu.is-open .mmenu__list li:nth-child(7) { transition-delay: .3s; }
.mmenu__services .t-mono { color: var(--c-night-muted); margin-bottom: 12px; }
.mmenu__services ul { list-style: none; display: grid; gap: 10px; }
.mmenu__services a { color: rgba(255, 255, 255, .86); }
.mmenu__foot { margin-top: auto; display: grid; gap: 10px; justify-items: start; }
.mmenu__contact { font-size: 1.125rem; font-weight: 500; }
.mmenu__foot .btn { margin-top: 14px; }
body.menu-open { overflow: hidden; }
body.menu-open .header { color: #fff; z-index: calc(var(--z-menu) + 1); }
body.menu-open .header.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .header__logo img { filter: invert(1) hue-rotate(180deg) saturate(1.6); }

/* ---------- 7. Section heads ---------- */
.section-head { display: grid; gap: 28px 64px; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.section-head--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
.section-head--split .section-head__aside { display: grid; gap: 22px; justify-items: start; padding-bottom: 6px; }
.section-head--center { text-align: center; justify-items: center; }
.section-head--center .t-lead { margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--stack .section-head__aside { display: grid; gap: 22px; justify-items: start; }

/* ---------- 8. Backgrounds ---------- */
.grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(10, 10, 11, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 10, 11, .06) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 20%, transparent 72%);
}

/* ---------- 9. Hero ---------- */
.hero { position: relative; min-height: max(720px, 100svh); display: flex; flex-direction: column; justify-content: center; padding: calc(var(--header-h) + 28px) 0 32px; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(48% 42% at 8% 12%, rgba(237, 29, 46, .08), transparent 70%),
  radial-gradient(42% 40% at 92% 8%, rgba(246, 206, 69, .22), transparent 70%),
  radial-gradient(60% 55% at 78% 92%, rgba(10, 10, 11, .045), transparent 70%),
  var(--c-paper); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.hero__chip { margin-bottom: 24px; }
.hero__copy { container-type: inline-size; }
/* one H1, four lines, same style — widest line "Изработка на" is 8.45em */
.hero__title { margin: 0; font-size: min(clamp(2rem, 1rem + 3.1vw, 4.2rem), 11.4cqi, 9.4vh); line-height: 1.04; }
.hero__title .line { display: block; white-space: nowrap; }
.hero__lead { margin-top: 26px; max-width: 50ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }

/* hero rail — quick service links + latest project */
.hero-rail { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(36px, 6vh, 72px); }
.hero-rail__services { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.hero-rail__label { margin: 0; color: var(--fg-muted); line-height: 1; }
.hero-rail__services ul { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-rail__services a { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px 0 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .72); border: 1px solid var(--border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .9375rem; font-weight: 500; transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2), transform var(--d-2) var(--ease-out); }
.hero-rail__services a .i { color: var(--c-red); transition: color var(--d-2); }
.hero-rail__services a:hover { background: var(--c-black); color: #fff; border-color: var(--c-black); transform: translateY(-2px); }
.hero-rail__services a:hover .i { color: #fff; }
.hero-rail__project { display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 8px; border-radius: 18px; background: rgba(255, 255, 255, .82); border: 1px solid var(--border); box-shadow: var(--sh-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2); }
.hero-rail__project:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.hero-rail__thumb { width: 96px; aspect-ratio: 1000 / 707; border-radius: 11px; overflow: hidden; background: var(--tone, var(--c-paper-2)); flex-shrink: 0; }
.hero-rail__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-rail__meta { display: grid; line-height: 1.25; }
.hero-rail__meta .t-mono { color: var(--fg-muted); font-size: .68rem; }
.hero-rail__meta strong { margin-top: 3px; font-weight: 600; letter-spacing: -.015em; }
.hero-rail__meta small { font-size: .8125rem; color: var(--fg-muted); }
.hero-rail__arrow { display: grid; place-items: center; width: 40px; height: 40px; margin-left: 12px; border-radius: 50%; background: var(--c-black); color: #fff; transition: background-color var(--d-2), transform var(--d-2) var(--ease-out); }
.hero-rail__project:hover .hero-rail__arrow { background: var(--c-red); transform: rotate(45deg); }

/* hero orb — CSS-only 3D sphere with orbiting brand dots */
.orb { position: relative; width: min(100%, 500px); aspect-ratio: 1; justify-self: center; perspective: 1400px; }
.orb__stage { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.2s var(--ease-out); }
.orb__sphere {
  position: absolute; inset: 11%; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #FFFFFF 0%, rgba(255, 255, 255, .95) 16%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 70% 78%, rgba(10, 10, 11, .14) 0%, rgba(10, 10, 11, 0) 52%),
    radial-gradient(circle at 50% 50%, #F4F4F1 0%, #E8E8E3 58%, #D8D8D1 100%);
  box-shadow: inset -24px -40px 70px rgba(10, 10, 11, .12), inset 18px 26px 50px rgba(255, 255, 255, .9), 0 70px 120px -50px rgba(10, 10, 11, .35);
}
.orb__sphere::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 60% 62%, rgba(237, 29, 46, .08), transparent 55%); }
.orb__shadow { position: absolute; left: 22%; right: 22%; bottom: 2%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 10, 11, .22), transparent); filter: blur(6px); }
.orbit { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(72deg) rotateZ(-16deg); }
.orbit--b { transform: rotateX(64deg) rotateY(-26deg) rotateZ(24deg); }
.orbit__track { position: absolute; inset: 2%; border-radius: 50%; border: 1px solid rgba(10, 10, 11, .14); transform-style: preserve-3d; animation: spin 16s linear -9s infinite; }
.orbit--b .orbit__track { inset: 12%; border-style: dashed; border-color: rgba(10, 10, 11, .12); animation: spin 24s linear -9s infinite reverse; }
.orbit__arm { position: absolute; left: 50%; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.orbit__dot { position: absolute; width: 38px; height: 38px; left: -19px; top: -19px; border-radius: 50%; transform-style: preserve-3d; animation: billboard 16s linear -9s infinite; }
.orbit--b .orbit__dot { width: 24px; height: 24px; left: -12px; top: -12px; animation: billboard-b 24s linear -9s infinite reverse; }
.orbit__dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.orbit__dot--red::before { background: radial-gradient(circle at 32% 30%, #FF7A85 0%, #ED1D2E 45%, #A80F1C 100%); box-shadow: 0 10px 30px -6px rgba(237, 29, 46, .6); }
.orbit__dot--yellow::before { background: radial-gradient(circle at 32% 30%, #FFF2B8 0%, #F6CE45 50%, #C99A12 100%); box-shadow: 0 8px 22px -6px rgba(201, 154, 18, .6); }
.orb__chip { position: absolute; z-index: 2; animation: bob 6s var(--ease-in-out) infinite; }
.orb__chip .chip { background: rgba(255, 255, 255, .78); box-shadow: var(--sh-2); }
.orb__chip--1 { left: -4%; top: 20%; }
.orb__chip--2 { right: -2%; top: 46%; animation-delay: -2s; }
.orb__chip--3 { left: 8%; bottom: 12%; animation-delay: -4s; }
.orb__chip .i { color: var(--c-red); }

/* ---------- 10. Logos marquee ---------- */
.logos { padding: clamp(3rem, 2rem + 3vw, 5rem) 0; }
.logos__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.logos__title { font-family: var(--font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-muted); }
.logos__toggle { width: 40px; height: 40px; }
.logos__play { display: none; }
.logos__toggle[aria-pressed="true"] .logos__pause { display: none; }
.logos__toggle[aria-pressed="true"] .logos__play { display: block; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee + .marquee { margin-top: 12px; }
.marquee__track { display: flex; flex-shrink: 0; gap: 12px; padding-right: 12px; list-style: none; animation: marquee 55s linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 65s; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .logos.is-paused .marquee__track { animation-play-state: paused; }
.logo-tile { display: grid; place-items: center; width: clamp(180px, 16vw, 240px); height: clamp(96px, 8vw, 124px); border-radius: var(--r-md); background: var(--c-paper-2); transition: background-color var(--d-2); }
.logo-tile img { width: auto; max-width: 70%; max-height: 58%; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .78; mix-blend-mode: multiply; transition: filter var(--d-3) var(--ease-out), opacity var(--d-3); }
.logo-tile:hover { background: var(--c-paper-3); }
.logo-tile:hover img { filter: none; opacity: 1; }

/* ---------- 11. Statement ---------- */
.statement__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 32px 64px; }
.statement__text { font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.75rem); line-height: 1.14; letter-spacing: -.035em; font-weight: 500; margin: 0; }
.statement__text .w { transition: opacity .4s linear, color .4s linear; }
.js .statement__text[data-words] .w { opacity: .16; }
.js .statement__text[data-words] .w.is-on { opacity: 1; }
.statement__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); border-top: 1px solid var(--border); }
.fact { padding: 28px 24px 0 0; }
.fact + .fact { padding-left: 24px; border-left: 1px solid var(--border); }
.fact__value { display: flex; align-items: baseline; gap: 6px; font-size: clamp(1.9rem, 1.3rem + 1.5vw, 2.9rem); font-weight: 500; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fact__value small { font-size: .38em; letter-spacing: -.02em; color: var(--fg-muted); font-weight: 500; }
.fact__value .dot { width: .12em; height: .12em; }
.fact__label { margin-top: 12px; color: var(--fg-muted); font-size: .9375rem; max-width: 24ch; }

/* ---------- 12. Services list (interactive rows) ---------- */
.svc-list { list-style: none; border-top: 1px solid var(--border); }
.svc-row { position: relative; border-bottom: 1px solid var(--border); }
.svc-row__link { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1.2fr) minmax(0, 1fr) 64px; align-items: center; gap: 24px; padding: clamp(24px, 2vw, 36px) 0; isolation: isolate; }
.svc-row__link::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--c-black); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-out); }
.svc-row__num { color: var(--fg-muted); transition: color var(--d-2); }
.svc-row__title { font-size: clamp(1.35rem, 1rem + 1.1vw, 2.1rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; transition: color var(--d-2), transform .55s var(--ease-out); }
.svc-row__body { display: grid; gap: 14px; }
.svc-row__desc { color: var(--fg-muted); font-size: .9875rem; line-height: 1.55; transition: color var(--d-2); max-width: 44ch; }
.svc-row__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.svc-row__tags span { padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); font-size: .78rem; font-weight: 500; transition: border-color var(--d-2), color var(--d-2); }
.svc-row__arrow { justify-self: end; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--border-strong); transition: background-color var(--d-2), border-color var(--d-2), color var(--d-2), transform .55s var(--ease-out); }
@media (hover: hover) {
  .svc-row__link:hover::before { transform: scaleY(1); transform-origin: top; }
  .svc-row__link:hover { color: #fff; }
  .svc-row__link:hover .svc-row__num, .svc-row__link:hover .svc-row__desc { color: rgba(255, 255, 255, .72); }
  .svc-row__link:hover .svc-row__title { transform: translateX(10px); }
  .svc-row__link:hover .svc-row__tags span { border-color: rgba(255, 255, 255, .3); }
  .svc-row__link:hover .svc-row__arrow { background: var(--c-red); border-color: var(--c-red); transform: rotate(-45deg); }
}
.svc-preview { position: fixed; left: 0; top: 0; z-index: 60; width: 300px; aspect-ratio: 4 / 3; pointer-events: none; border-radius: var(--r-lg); overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity var(--d-2), transform .5s var(--ease-out); box-shadow: var(--sh-3); }
.svc-preview.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.svc-preview__item { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-2); }
.svc-preview__item.is-active { opacity: 1; }

/* mini visuals used in service previews & cards */
.mv { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(145deg, #F6F6F3, #E7E7E1); }
.mv--dark { background: radial-gradient(120% 90% at 20% 10%, #25252A, #0A0A0B); }
.mv__window { width: 72%; height: 64%; border-radius: 14px; background: #fff; box-shadow: 0 24px 48px -20px rgba(10, 10, 11, .35); overflow: hidden; }
.mv__bar { height: 18%; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--c-line); }
.mv__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-line-2); }
.mv__bar i:first-child { background: var(--c-red); }
.mv__body { padding: 10% 10%; display: grid; gap: 8px; }
.mv__line { height: 8px; border-radius: 6px; background: var(--c-paper-3); }
.mv__line--title { height: 16px; width: 70%; background: var(--c-black); }
.mv__line--s { width: 45%; }
.mv__btn { width: 38%; height: 20px; border-radius: 999px; background: var(--c-red); margin-top: 6px; }
.mv__wp { width: 44%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c-black); box-shadow: 0 24px 48px -20px rgba(10, 10, 11, .35); }
.mv__wp .i { width: 62%; height: 62%; stroke-width: 1.3; }
.mv__pulse { width: 78%; color: var(--c-red); }
.mv__pulse path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mv__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 74%; }
.mv__grid span { aspect-ratio: 1; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.mv__grid span:nth-child(5) { background: var(--c-red); border-color: var(--c-red); }
.mv__grid span:nth-child(3) { background: var(--c-yellow); border-color: var(--c-yellow); }
.mv__bars { display: flex; align-items: flex-end; gap: 10px; height: 56%; }
.mv__bars span { width: 26px; border-radius: 8px 8px 4px 4px; background: var(--c-black); }
.mv__bars span:nth-child(1) { height: 30%; opacity: .25; }
.mv__bars span:nth-child(2) { height: 48%; opacity: .45; }
.mv__bars span:nth-child(3) { height: 64%; opacity: .7; }
.mv__bars span:nth-child(4) { height: 100%; background: var(--c-red); }

/* ---------- 13. Projects ---------- */

/* compact project grid */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 20px; }
.pcard__link { display: block; }
.pcard__media { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4 / 3; background: var(--tone, var(--c-paper-2)); isolation: isolate; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1s var(--ease-out); }
.pcard__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .06); pointer-events: none; }
.pcard__badge { position: absolute; left: 14px; top: 14px; z-index: 1; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .75rem; font-weight: 500; }
.pcard__link:hover .pcard__media img { transform: scale(1.045); }
.pcard__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.pcard__title { font-size: 1.2rem; letter-spacing: -.02em; line-height: 1.25; }
.pcard__tags { margin-top: 4px; color: var(--fg-muted); font-size: .72rem; }
.pcard__arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-strong); flex-shrink: 0; transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2), transform var(--d-2) var(--ease-out); }
.pcard__link:hover .pcard__arrow { background: var(--c-black); color: #fff; border-color: var(--c-black); transform: rotate(45deg); }


/* ---------- 14. AI section ---------- */
.ai { overflow: hidden; }
.ai__glow { position: absolute; width: 900px; height: 900px; left: 50%; top: -380px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(237, 29, 46, .22), rgba(237, 29, 46, 0)); pointer-events: none; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(230px, auto) minmax(230px, auto) auto; gap: 14px; grid-template-areas: "term term a1 a2" "term term a3 a4" "a5 a5 a6 a6"; }
.bento__cell {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: 28px; border-radius: var(--r-lg); background: var(--c-night-2); border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color var(--d-2);
}
.bento__cell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .07), transparent 60%); opacity: 0; transition: opacity var(--d-2); pointer-events: none; }
.bento__cell:hover { border-color: rgba(255, 255, 255, .18); }
.bento__cell:hover::before { opacity: 1; }
.bento__cell .icon-tile { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #fff; }
.bento__cell:hover .icon-tile { background: var(--c-red); border-color: var(--c-red); }
.bento__title { font-size: 1.3rem; letter-spacing: -.025em; margin-bottom: 10px; }
.bento__text { color: var(--c-night-muted); font-size: .9375rem; line-height: 1.55; }
.bento__cell--term { grid-area: term; padding: 0; background: #0E0E10; }
.bento__cell:nth-of-type(2) { grid-area: a1; }
.bento__cell:nth-of-type(3) { grid-area: a2; }
.bento__cell:nth-of-type(4) { grid-area: a3; }
.bento__cell:nth-of-type(5) { grid-area: a4; }
.bento__cell:nth-of-type(6) { grid-area: a5; flex-direction: row; align-items: flex-end; }
.bento__cell:nth-of-type(7) { grid-area: a6; flex-direction: row; align-items: flex-end; }
.bento__cell:nth-of-type(6) > div, .bento__cell:nth-of-type(7) > div { max-width: 44ch; }

.term { display: flex; flex-direction: column; height: 100%; font-family: var(--font-mono); font-size: .8125rem; }
.term__bar { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--c-night-muted); }
.term__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.term__bar i:first-child { background: var(--c-red); }
.term__bar span { margin-left: 10px; letter-spacing: .04em; }
.term__body { flex: 1; padding: 24px 22px; display: grid; align-content: start; gap: 12px; color: rgba(255, 255, 255, .86); }
.term__line { display: flex; gap: 12px; align-items: baseline; }
.term__line .p { color: var(--c-red); }
.term__line .k { color: var(--c-night-muted); }
.term__line .ok { margin-left: auto; color: #7DDE9A; white-space: nowrap; }
.term__line .val { color: var(--c-yellow); }
.js .term__line[data-term-line] { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.js .term__line[data-term-line].is-on { opacity: 1; transform: none; }
.term__caret { display: inline-block; width: 8px; height: 15px; background: var(--c-red); vertical-align: middle; animation: blink 1s steps(1) infinite; }
.term__foot { padding: 16px 22px; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--c-night-muted); font-family: var(--font-sans); font-size: .8125rem; }

.ai__outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.outcome { padding: 26px 28px; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .08); }
.outcome .t-mono { color: var(--c-red); }
.outcome p:last-child { margin-top: 10px; color: rgba(255, 255, 255, .86); font-size: 1.05rem; line-height: 1.45; letter-spacing: -.01em; }

/* ---------- 15. Process ---------- */
.process__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px 96px; }
.process__sticky { position: sticky; top: calc(var(--header-h) + 40px); }
.process__sticky .t-lead { margin-top: 22px; }
.process__counter span { color: var(--fg); }
.process__steps { position: relative; list-style: none; }
.process__rail { position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: var(--border); border-radius: 2px; }
.process__fill { position: absolute; inset: 0 0 auto; height: var(--progress, 0%); background: var(--c-red); border-radius: 2px; }
.step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 6px 0; padding: 0 0 clamp(2.5rem, 2rem + 2vw, 4rem) 44px; }
.step:last-child { padding-bottom: 0; }
.step__dot { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border-strong); transition: border-color var(--d-2), background-color var(--d-2), transform var(--d-2) var(--ease-spring); }
.step.is-active .step__dot { border-color: var(--c-red); background: var(--c-red); transform: scale(1.15); }
.step__num { color: var(--fg-muted); padding-top: 4px; }
.step__title { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); letter-spacing: -.035em; }
.step__text { grid-column: 2; color: var(--fg-muted); max-width: 52ch; margin-top: 6px; }

/* ---------- 16. WordPress services ---------- */
.wp-teaser__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 48px 80px; align-items: start; }
.wp-teaser__aside { position: sticky; top: calc(var(--header-h) + 40px); }
.wp-teaser__aside .btn { margin-top: 36px; }
.wp-list { list-style: none; display: grid; gap: 10px; }
.wp-row { display: grid; grid-template-columns: 52px 1fr auto 40px; align-items: center; gap: 20px; padding: 18px 22px 18px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); transition: border-color var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2); }
.wp-row:hover { border-color: var(--c-black); transform: translateY(-2px); box-shadow: var(--sh-2); }
.wp-row__title { font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.wp-row__sub { display: block; margin-top: 2px; font-size: .875rem; color: var(--fg-muted); font-weight: 400; }
.wp-row__price { font-family: var(--font-mono); font-size: .875rem; white-space: nowrap; }
.wp-row__price strong { font-family: var(--font-sans); font-size: 1.25rem; letter-spacing: -.03em; }
.wp-row .i-arrow { color: var(--fg-muted); transition: transform var(--d-2) var(--ease-out), color var(--d-2); }
.wp-row:hover .i-arrow { transform: translateX(4px); color: var(--c-red); }
.wp-row:hover .icon-tile { background: var(--c-black); color: #fff; border-color: var(--c-black); }

.wp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.wp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wp-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: border-color var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2); }
.wp-card:hover { border-color: var(--c-black); transform: translateY(-3px); box-shadow: var(--sh-2); }
.wp-card:hover .icon-tile { background: var(--c-black); color: #fff; border-color: var(--c-black); }
.wp-card[hidden] { display: none; }
.wp-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.wp-card__cat { color: var(--fg-muted); font-size: .7rem; text-align: right; max-width: 14ch; }
.wp-card__title { font-size: 1.25rem; letter-spacing: -.025em; line-height: 1.2; }
.wp-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wp-card__text { color: var(--fg-muted); font-size: .9375rem; line-height: 1.55; flex: 1; }
.wp-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.wp-card__price { margin: 0; display: grid; }
.wp-card__price .t-mono { color: var(--fg-muted); font-size: .7rem; }
.wp-card__price strong { font-size: 1.75rem; letter-spacing: -.04em; line-height: 1.1; font-weight: 600; }
.wp-card__actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.wp-card__more { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--c-black); color: #fff; transition: background-color var(--d-2), transform var(--d-2) var(--ease-out); }
.wp-card__more:hover { background: var(--c-red); transform: rotate(-45deg); }
.wp-empty { padding: 60px 0; text-align: center; color: var(--fg-muted); }

.steps-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; list-style: none; }
.steps-3 li { position: relative; padding: 30px 28px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); counter-increment: s; }
.steps-3 li::before { content: "0" counter(s); display: block; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; color: var(--c-red); margin-bottom: 40px; }
.steps-3 h3 { font-size: 1.35rem; letter-spacing: -.03em; margin-bottom: 10px; }
.steps-3 p { color: var(--fg-muted); font-size: .9375rem; }

/* service detail */
.svc-detail__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr); gap: 48px 72px; align-items: start; }
.price-card { position: sticky; top: calc(var(--header-h) + 24px); padding: 30px; border-radius: var(--r-lg); background: var(--c-night); color: #fff; overflow: hidden; isolation: isolate; }
.price-card::after { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; right: -120px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(237, 29, 46, .5), transparent); }
.price-card__label { color: var(--c-night-muted); }
.price-card__price { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 24px; font-size: 3.2rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.price-card__price small { font-size: 1rem; letter-spacing: 0; color: var(--c-night-muted); font-weight: 400; }
.price-card__meta { list-style: none; display: grid; gap: 12px; padding: 20px 0; margin-bottom: 24px; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.price-card__meta li { display: flex; justify-content: space-between; gap: 16px; font-size: .9375rem; }
.price-card__meta span:first-child { color: var(--c-night-muted); }
.price-card .btn { width: 100%; justify-content: space-between; }
.price-card__note { margin-top: 18px; font-size: .8125rem; line-height: 1.5; color: var(--c-night-muted); }
.check-list { list-style: none; display: grid; gap: 2px; }
.check-list li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--border); font-size: 1.0625rem; letter-spacing: -.01em; }
.check-list .tick { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-black); color: #fff; margin-top: -1px; }
.for-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.for-list li { padding: 22px; border-radius: var(--r-md); background: var(--bg-soft); font-weight: 500; letter-spacing: -.01em; line-height: 1.45; }
.for-list li::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-red); margin-bottom: 16px; }
.block-title { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); letter-spacing: -.025em; line-height: 1.15; margin-bottom: 24px; }
.svc-detail__block + .svc-detail__block { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }

/* ---------- 17. Service groups (Baunfire list) ---------- */
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 56px; }
.group__head { display: flex; align-items: center; gap: 14px; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--fg); }
.group__head h3 { font-size: 1.5rem; letter-spacing: -.03em; }
.plus-list { list-style: none; }
.plus-item { border-bottom: 1px solid var(--border); }
.plus-item summary, .plus-item > a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 1.125rem; font-weight: 500; letter-spacing: -.015em; cursor: pointer; list-style: none; }
.plus-item summary::-webkit-details-marker { display: none; }
.plus-item .plus { color: var(--c-red); transition: transform var(--d-2) var(--ease-out); }
.plus-item[open] .plus { transform: rotate(45deg); }
.plus-item > a .i { color: var(--c-red); transition: transform var(--d-2) var(--ease-out); }
.plus-item > a:hover .i { transform: translateX(4px); }
.plus-item p { padding: 0 0 20px; margin: 0; color: var(--fg-muted); font-size: .9375rem; max-width: 40ch; }
.plus-item p a { color: var(--fg); }

.svc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.svc-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 360px; padding: 32px; border-radius: var(--r-xl); overflow: hidden; background: var(--c-paper-2); isolation: isolate; transition: color var(--d-3) var(--ease-out); }
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-night); clip-path: circle(0% at 100% 0%); transition: clip-path .8s var(--ease-in-out); }
.svc-card:hover { color: #fff; }
.svc-card:hover::before { clip-path: circle(150% at 100% 0%); }
.svc-card:hover .svc-card__text { color: var(--c-night-muted); }
.svc-card:hover .icon-tile { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.svc-card:hover .svc-card__arrow { background: #fff; color: var(--c-black); transform: rotate(-45deg); }
.svc-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.svc-card__num { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; }
.svc-card__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); letter-spacing: -.045em; line-height: 1.05; margin-bottom: 14px; }
.svc-card__title a::after { content: ""; position: absolute; inset: 0; }
.svc-card__text { color: var(--fg-muted); max-width: 42ch; transition: color var(--d-3); }
.svc-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.svc-card__arrow { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-black); color: #fff; flex-shrink: 0; transition: background-color var(--d-2), color var(--d-2), transform var(--d-3) var(--ease-out); }
.svc-card .svc-row__tags span { border-color: currentColor; opacity: .6; }

/* numbered types (01. Сайт-визитка ...) */
.types { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.types li { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 200px; padding: 24px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background-color var(--d-2); }
.types li:hover { background: var(--bg-soft); }
.types .t-mono { color: var(--c-red); }
.types .icon-tile { background: transparent; }
.types h3 { font-size: 1.25rem; letter-spacing: -.025em; }

/* ---------- 18. Testimonials ---------- */
.testimonials { overflow: hidden; }
.testimonials__bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(40% 40% at 10% 20%, rgba(246, 206, 69, .16), transparent 70%),
  radial-gradient(40% 45% at 90% 30%, rgba(237, 29, 46, .06), transparent 70%),
  var(--c-paper-2); }
.testimonials { isolation: isolate; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 3.2); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel__track::-webkit-scrollbar { display: none; }
.t-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 28px; padding: 34px; border-radius: var(--r-lg); background: var(--c-paper); border: 1px solid var(--border); }
.stars { display: flex; gap: 3px; color: #F59E0B; }
.t-card__quote { flex: 1; font-size: 1.2rem; line-height: 1.45; letter-spacing: -.02em; font-weight: 500; }
.t-card__person { display: flex; align-items: center; gap: 14px; }
.t-card__person strong { display: block; font-weight: 600; letter-spacing: -.01em; }
.t-card__person small { display: block; font-size: .875rem; color: var(--fg-muted); }
.avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-black); color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .02em; flex-shrink: 0; }
.t-card:nth-child(2n) .avatar { background: var(--c-red); }
.t-card:nth-child(3n) .avatar { background: var(--c-yellow); color: var(--c-black); }
.carousel__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }
.carousel__status { min-width: 64px; text-align: center; color: var(--fg-muted); }

/* ---------- 19. Blog ---------- */
.posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.post-card__link { display: block; }
.post-card__media { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 16 / 10; background: var(--c-paper-2); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.post-card__link:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding-top: 22px; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--fg-muted); margin-bottom: 12px; }
.post-card__cat { color: var(--c-red-ink); }
.post-card__title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); letter-spacing: -.03em; line-height: 1.22; transition: color var(--d-2); }
.post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-card__excerpt { margin-top: 14px; color: var(--fg-muted); }
.post-card--featured { grid-column: 1 / -1; }
.post-card--featured .post-card__link { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.post-card--featured .post-card__media { aspect-ratio: 16 / 10; }
.post-card--featured .post-card__title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); letter-spacing: -.035em; line-height: 1.1; }
.post-card[hidden] { display: none; }

/* article */
.article-hero { padding: calc(var(--header-h) + 56px) 0 48px; }
.article-hero__inner { max-width: 980px; }
.article-hero h1 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.035em; margin: 22px 0 28px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: var(--fg-muted); font-size: .9375rem; }
.article-meta .avatar { width: 40px; height: 40px; font-size: .8rem; }
.article-meta__author { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); font-weight: 500; }
.article-cover { border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 16 / 8; background: var(--c-paper-2); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-layout { display: grid; grid-template-columns: 240px minmax(0, 720px) 1fr; gap: 64px; padding-top: 64px; }
.toc { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.toc .t-mono { color: var(--fg-muted); margin-bottom: 14px; }
.toc ol { list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--border); }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; font-size: .875rem; line-height: 1.4; color: var(--fg-muted); transition: color var(--d-1), border-color var(--d-1); }
.toc a:hover { color: var(--fg); }
.toc a.is-active { color: var(--fg); border-left-color: var(--c-red); }
.share { display: flex; gap: 8px; margin-top: 32px; }
.share .icon-btn { width: 42px; height: 42px; }
.reading-progress { position: fixed; left: 0; top: 0; z-index: calc(var(--z-header) + 1); height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--c-red); }

.prose { font-size: 1.125rem; line-height: 1.75; color: #1D2226; }
.prose > * + * { margin-top: 1.25em; }
.prose .lead { font-size: 1.35rem; line-height: 1.6; letter-spacing: -.015em; color: var(--c-ink); }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.55rem, 1.3rem + .9vw, 2.1rem); letter-spacing: -.035em; line-height: 1.15; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { margin-top: 1.8em; font-size: 1.35rem; letter-spacing: -.02em; }
.prose p { margin: 0; }
.prose a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose a:hover { color: var(--c-red-ink); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .55em; }
.prose li::marker { color: var(--c-red); font-weight: 600; }
.prose blockquote { position: relative; padding: 32px 36px; border-radius: var(--r-lg); background: var(--c-night); color: #fff; font-size: 1.5rem; line-height: 1.35; letter-spacing: -.025em; font-weight: 500; }
.prose blockquote::before { content: ""; position: absolute; left: 36px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-red); }
.prose .numbered-blocks { list-style: none; padding: 0; counter-reset: n; gap: 12px; }
.prose .numbered-blocks li { counter-increment: n; position: relative; padding: 22px 24px 22px 76px; border-radius: var(--r-md); background: var(--c-paper-2); }
.prose .numbered-blocks li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 24px; top: 24px; font-family: var(--font-mono); font-size: .85rem; color: var(--c-red); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); }
.prose thead th { background: var(--c-paper-2); font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.prose tbody th { font-weight: 600; }
.prose tr:last-child > * { border-bottom: 0; }

/* ---------- 20. FAQ / accordion ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 48px 96px; align-items: start; }
.faq__aside { position: sticky; top: calc(var(--header-h) + 40px); display: grid; justify-items: start; gap: 0; }
.faq__aside .t-lead { margin: 24px 0 32px; }
.acc { border-bottom: 1px solid var(--border); }
.acc:first-child { border-top: 1px solid var(--border); }
.acc__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; }
.acc__q::-webkit-details-marker { display: none; }
.acc__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); flex-shrink: 0; transition: transform var(--d-2) var(--ease-out), background-color var(--d-2), color var(--d-2), border-color var(--d-2); }
.acc__q:hover .acc__icon { border-color: var(--fg); }
.acc[open] .acc__icon { transform: rotate(45deg); background: var(--c-black); color: #fff; border-color: var(--c-black); }
.acc__a { overflow: hidden; }
.acc__inner { padding: 0 64px 28px 0; color: var(--fg-muted); }
.acc__inner ul { padding-left: 1.2em; margin-top: .6em; display: grid; gap: .35em; }
.acc__inner li::marker { color: var(--c-red); }

/* ---------- 21. Contact ---------- */
.contact { overflow: hidden; isolation: isolate; padding-bottom: clamp(3.5rem, 2rem + 4vw, 6rem); }
.contact__glow { position: absolute; z-index: -1; width: 1100px; height: 1100px; right: -380px; top: -520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(237, 29, 46, .26), rgba(237, 29, 46, 0)); }
.contact__head { margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.contact__head .t-giant { max-width: none; font-size: clamp(1.9rem, 1rem + 2.4vw, 3.4rem); }
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 56px 96px; align-items: start; }
.contact__info .t-lead { margin-bottom: 48px; }
.contact__list { display: grid; gap: 28px; margin-bottom: 36px; }
.contact__list li { display: grid; gap: 6px; }
.contact__list .t-mono { color: var(--c-night-muted); }
.contact__big { justify-self: start; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.3; }
.socials { display: flex; gap: 10px; list-style: none; }

.form { position: relative; display: grid; gap: 22px; padding: clamp(24px, 2vw + 12px, 44px); border-radius: var(--r-xl); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form__label { display: block; margin-bottom: 10px; font-size: .9rem; font-weight: 500; color: rgba(255, 255, 255, .86); }
.form__needs { border: 0; padding: 0; margin: 0; }
.form__needs legend { padding: 0; }
.req { color: var(--c-red); }
.input {
  display: block; width: 100%; min-height: 56px; padding: 14px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
  font-size: 1rem; transition: border-color var(--d-2), background-color var(--d-2), box-shadow var(--d-2);
}
.input::placeholder { color: rgba(255, 255, 255, .45); }
.input:hover { border-color: rgba(255, 255, 255, .3); }
.input:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 4px rgba(237, 29, 46, .35); }
.input--area { min-height: 132px; resize: vertical; line-height: 1.55; }
.field.is-invalid .input { border-color: #FF6B76; }
.field__error { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .875rem; color: #FF8A93; }
.field__error::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #FF8A93; color: var(--c-night); font-size: .7rem; font-weight: 700; }
.field__help { margin: 8px 0 0; font-size: .8125rem; color: var(--c-night-muted); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .8); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.check__box { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .3); color: transparent; transition: background-color var(--d-1), border-color var(--d-1), color var(--d-1); }
.check input:checked + .check__box { background: #fff; border-color: #fff; color: var(--c-black); }
.check input:focus-visible + .check__box { outline: 2px solid var(--c-red); outline-offset: 3px; }
.field--check { position: relative; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 6px; }
.form__note { margin: 0; font-size: .875rem; color: var(--c-night-muted); }
.form__summary { padding: 16px 20px; border-radius: 14px; background: rgba(255, 107, 118, .12); border: 1px solid rgba(255, 107, 118, .4); color: #FFD5D8; font-size: .9375rem; }
.form__summary ul { margin: 8px 0 0; padding-left: 1.2em; }
.form__summary a { text-decoration: underline; }
.form__success { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 32px; text-align: center; border-radius: inherit; background: var(--c-night-2); animation: fade-up .6s var(--ease-out); }
.form__success[hidden] { display: none; }
.form__success-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--c-red); color: #fff; margin-bottom: 8px; }
.form__success p { color: var(--c-night-muted); max-width: 34ch; }

/* ---------- 22. Page hero (inner) ---------- */
.page-hero { position: relative; padding: calc(var(--header-h) + clamp(28px, 4vw, 56px)) 0 clamp(48px, 6vw, 88px); overflow: hidden; isolation: isolate; }
.page-hero__bg { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(40% 60% at 0% 0%, rgba(237, 29, 46, .07), transparent 70%),
  radial-gradient(38% 60% at 100% 0%, rgba(246, 206, 69, .18), transparent 70%),
  var(--c-paper); }
/* split hero: text left, art right */
.page-hero__wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px clamp(32px, 5vw, 88px); align-items: center; }
.page-hero--plain { padding-bottom: 0; }
.page-hero--plain .page-hero__wrap { grid-template-columns: minmax(0, 1fr); }
.page-hero__text .crumbs { margin-bottom: clamp(26px, 3.4vw, 44px); }
.page-hero__text .eyebrow { margin-bottom: 18px; }
.page-hero__lead { margin-top: 22px; max-width: 54ch; }
.page-hero__actions { margin-top: 30px; }
.page-hero__text .hero-stats, .page-hero__text .hero-tags { margin-top: 30px; }
.page-hero__art { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-xl); background: var(--c-paper-2); box-shadow: var(--sh-2), inset 0 0 0 1px rgba(10, 10, 11, .05); isolation: isolate; }
.page-hero__media { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__after { margin-top: clamp(40px, 5vw, 64px); }
.page-hero__art--image { aspect-ratio: 1000 / 707; }
.page-hero__art--image .page-hero__media { background: var(--tone, var(--c-paper-2)); }
.page-hero__art--image .page-hero__media img { object-position: top center; }
.page-hero__art--orb { display: grid; place-items: center; background: radial-gradient(60% 55% at 70% 20%, rgba(246, 206, 69, .22), transparent 70%), radial-gradient(50% 50% at 20% 90%, rgba(237, 29, 46, .08), transparent 70%), var(--c-paper-2); }
.orb--art { width: 74%; }
.page-hero__art--stack { background: transparent; box-shadow: none; }
.stack-card { position: absolute; width: 72%; aspect-ratio: 1000 / 707; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--tone, var(--c-paper-2)); box-shadow: var(--sh-3), inset 0 0 0 1px rgba(10, 10, 11, .06); transition: transform .8s var(--ease-out); animation: fan-in 1.1s var(--ease-out) backwards; }
.stack-card img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.stack-card--1 { left: 14%; top: 20%; z-index: 3; --r: -2deg; animation-delay: .1s; }
.stack-card--2 { left: 0; top: 2%; z-index: 2; --r: -9deg; animation-delay: .2s; }
.stack-card--3 { right: 0; top: 34%; z-index: 1; --r: 8deg; animation-delay: .3s; }
.stack-card { transform: rotate(var(--r)); }
.page-hero__art--stack:hover .stack-card--2 { transform: rotate(-12deg) translate(-16px, -10px); }
.page-hero__art--stack:hover .stack-card--3 { transform: rotate(11deg) translate(16px, 10px); }
.page-hero__art--icon { display: grid; place-items: center; background: radial-gradient(circle at 50% 44%, #2A2A2F 0%, #0A0A0B 72%); color: #fff; }
.art-halo { position: relative; display: grid; place-items: center; width: min(76%, 420px); aspect-ratio: 1; }
.art-halo__ring { position: absolute; border-radius: 50%; }
.art-halo__ring--1 { inset: 13%; border: 1px solid rgba(255, 255, 255, .12); }
.art-halo__ring--2 { inset: 0; border: 1px dashed rgba(255, 255, 255, .16); animation: spin 36s linear infinite; }
.art-halo__ring--2::after { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #FF7A85, #ED1D2E 50%, #A80F1C); box-shadow: 0 0 0 6px rgba(237, 29, 46, .18); }
.art-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 42%; aspect-ratio: 1; border-radius: 28%; background: linear-gradient(145deg, #2A2A30, #121214); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 0 0 12px rgba(237, 29, 46, .08); }
.art-icon .i { width: 48%; height: 48%; stroke-width: 1.25; }
.art-chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 11px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .9); color: var(--c-ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--sh-2); font-size: .875rem; font-weight: 500; white-space: nowrap; animation: bob 6s var(--ease-in-out) infinite; }
.art-chip .i { color: var(--c-red); }
.art-chip--1 { left: -16px; top: 12%; }
.art-chip--2 { right: -14px; top: 50%; animation-delay: -2s; }
.art-chip--3 { left: 12%; bottom: -18px; animation-delay: -4s; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .875rem; color: var(--fg-muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--c-line-2); margin-right: 2px; }
.crumbs a { transition: color var(--d-1); }
.crumbs a:hover { color: var(--fg); }
.crumbs [aria-current] { color: var(--fg); font-weight: 500; }

/* ---------- 23. Project detail ---------- */
.case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.case-meta > div { padding: 24px 24px 24px 0; }
.case-meta > div + div { padding-left: 24px; border-left: 1px solid var(--border); }
.case-meta dt { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px; }
.case-meta dd { margin: 0; font-size: 1.125rem; font-weight: 500; letter-spacing: -.015em; }
.browser { border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--sh-3); }
.browser__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: var(--c-paper-2); border-bottom: 1px solid var(--border); }
.browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--c-line-2); }
.browser__bar i:first-child { background: #FF5F57; }
.browser__bar i:nth-child(2) { background: #FEBC2E; }
.browser__bar i:nth-child(3) { background: #28C840; }
.browser__url { margin-left: 14px; flex: 1; max-width: 420px; padding: 6px 14px; border-radius: 8px; background: #fff; border: 1px solid var(--border); font-family: var(--font-mono); font-size: .75rem; color: var(--fg-muted); }
.browser__view { position: relative; height: clamp(420px, 60vw, 760px); overflow: hidden; }
.browser__view img { width: 100%; height: auto; transform: translateY(0); transition: transform 6s cubic-bezier(.45, 0, .25, 1); }
.browser__view:hover img, .browser.is-scrolling .browser__view img { transform: translateY(var(--scroll-to, -70%)); }
.browser__hint { position: absolute; right: 18px; bottom: 18px; }
.case-next { display: block; padding: clamp(3rem, 2rem + 4vw, 6rem) 0; border-top: 1px solid var(--border); }
.case-next__label { color: var(--fg-muted); }
.case-next__title { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; }
.case-next__title .icon-btn { width: clamp(64px, 6vw, 96px); height: clamp(64px, 6vw, 96px); flex-shrink: 0; transition: transform var(--d-3) var(--ease-out), background-color var(--d-2), color var(--d-2); }
.case-next:hover .icon-btn { background: var(--c-red); border-color: var(--c-red); color: #fff; transform: rotate(-45deg); }
.more-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.more-projects figure { border-radius: var(--r-lg); overflow: hidden; background: var(--c-paper-2); }
.more-projects img { width: 100%; aspect-ratio: 1000 / 707; object-fit: cover; }
.more-projects figcaption { padding: 16px 20px; font-weight: 600; letter-spacing: -.02em; }

/* ---------- 24. About ---------- */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.value { display: flex; flex-direction: column; gap: 56px; padding: 30px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); transition: border-color var(--d-2), transform var(--d-2) var(--ease-out); }
.value:hover { border-color: var(--fg); transform: translateY(-3px); }
.value h3 { font-size: 1.35rem; letter-spacing: -.03em; margin-bottom: 10px; }
.value p { color: var(--fg-muted); font-size: .9375rem; }
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 96px; align-items: start; }
.about-intro .prose { font-size: 1.125rem; }
.big-number { font-size: clamp(5rem, 3.4rem + 6vw, 9.5rem); font-weight: 600; letter-spacing: -.045em; line-height: .9; }
.big-number .dot { width: .1em; height: .1em; }

/* contacts page */
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.contact-card { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 240px; padding: 30px; border-radius: var(--r-lg); background: var(--c-paper-2); transition: background-color var(--d-2), color var(--d-2); }
.contact-card:hover { background: var(--c-black); color: #fff; }
.contact-card:hover .icon-tile { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.contact-card__value { font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; word-break: break-word; }
.contact-card .t-mono { color: inherit; opacity: .6; margin-bottom: 8px; }

/* legal */
.legal { max-width: 760px; }
.placeholder-note { display: flex; gap: 12px; padding: 18px 20px; border-radius: var(--r-md); background: #FFF8E1; border: 1px solid #F6CE45; color: #5A4300; font-size: .9375rem; }

/* 404 */
.nf { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header-h) + 40px) var(--gutter) 80px; }
.nf__code { font-size: clamp(5rem, 2.6rem + 10vw, 12rem); font-weight: 600; letter-spacing: -.05em; line-height: .9; }
.nf__code .dot { width: .1em; height: .1em; }
.nf p { margin: 28px auto 36px; max-width: 40ch; }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- 24b. Inner page components ---------- */
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.hero-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-tags li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .72); border: 1px solid var(--border); font-size: .875rem; font-weight: 500; }
.hero-tags .i { color: var(--c-red); }
.hero-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 40px; }
.hero-stats strong { display: block; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.hero-stats span { display: block; margin-top: 6px; font-size: .875rem; color: var(--fg-muted); }

.ai-band { overflow: hidden; }
.ai-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 80px; align-items: end; }
.ai-band__aside { display: grid; gap: 28px; }
.ai-band__list { list-style: none; display: grid; gap: 12px; }
.ai-band__list li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); font-weight: 500; }
.ai-band__list .i { color: var(--c-red); }

.statement-band { overflow: hidden; text-align: center; }
.statement-band__text { max-width: 26ch; margin: 0 auto; font-size: clamp(1.5rem, 1rem + 2vw, 2.9rem); line-height: 1.2; letter-spacing: -.025em; font-weight: 500; }

.types__text { margin-top: 8px; color: var(--fg-muted); font-size: .9375rem; line-height: 1.5; }

.monitor { overflow: hidden; }
.monitor__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 48px 80px; align-items: center; }
.status-card { padding: 26px; border-radius: var(--r-xl); background: var(--c-night-2); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }
.status-card__head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-family: var(--font-mono); font-size: .8125rem; }
.status-card__head .live-dot { background: #3DDC84; }
.status-card__badge { margin-left: auto; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(61, 220, 132, .12); color: #7DDE9A; font-family: var(--font-sans); font-weight: 500; }
.status-card__list { list-style: none; }
.status-card__list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: .9375rem; }
.status-card__list span { display: inline-flex; align-items: center; gap: 12px; color: var(--c-night-muted); }
.status-card__list strong { font-weight: 500; color: #7DDE9A; }
.status-card__foot { margin: 16px 0 0; font-size: .8125rem; color: var(--c-night-muted); }

.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.cta-strip--card { margin-top: 16px; padding: 30px 32px; border-radius: var(--r-lg); background: var(--c-paper); border: 1px solid var(--border); }

.steps-3--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps-3--compact li { padding: 24px; }
.steps-3--compact li::before { margin-bottom: 22px; }
.price-card__call { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-size: .9rem; color: var(--c-night-muted); }
.price-card__call:hover { color: #fff; }
.case-next--compact { margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-bottom: 0; }
.case-next--compact .case-next__title { font-size: var(--fs-h2); }

.case-full { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 48px 72px; align-items: center; }
.approach { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--border); }
.approach li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--border); }
.approach .t-mono { color: var(--c-red); padding-top: 4px; }
.approach h3 { font-size: 1.2rem; letter-spacing: -.02em; margin-bottom: 6px; }
.approach p { color: var(--fg-muted); }
.big-number__plus { color: var(--c-red); }
.about-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }

.article-hero, .nf { position: relative; isolation: isolate; overflow: hidden; }
.article-hero .page-hero__bg, .nf .page-hero__bg { z-index: -1; }
.contact-card > span:last-child { display: block; }

/* ---------- 25. Footer ---------- */
.footer { background: var(--c-night); color: #fff; padding: 0 0 32px; }
.footer__top { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2.6fr); gap: 56px 64px; padding: clamp(3rem, 2rem + 3vw, 5rem) 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.footer__logo { display: block; width: 188px; }
.footer__logo img { width: 100%; height: auto; }
.footer__about { margin: 24px 0 28px; color: var(--c-night-muted); font-size: .9375rem; line-height: 1.6; max-width: 40ch; }
.footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 28px; }
.footer__title { color: var(--c-night-muted); margin-bottom: 18px; }
.footer__cols ul { display: grid; gap: 12px; font-size: .9375rem; }
.footer__cols a { color: rgba(255, 255, 255, .88); }
.footer__cols a:hover { color: #fff; }
.footer__all { color: #fff !important; font-weight: 500; }
.footer__bottom { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px 32px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .875rem; color: var(--c-night-muted); }
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }
.footer__legal a, .footer__legal button { color: var(--c-night-muted); font-size: .875rem; }
.footer__legal a:hover, .footer__legal button:hover { color: #fff; }
.footer__clock { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .86); font-variant-numeric: tabular-nums; }
.to-top { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.to-top__ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke: var(--c-red); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; }
.to-top:hover { background: rgba(255, 255, 255, .08); }
.to-top .i { transition: transform var(--d-2) var(--ease-out); }
.to-top:hover .i { transform: translateY(-3px); }

/* ---------- 26. Overlays ---------- */
.cookie { position: fixed; left: 16px; bottom: 16px; z-index: var(--z-cookie); width: min(420px, calc(100% - 32px)); padding: 22px; border-radius: var(--r-lg); background: #fff; color: var(--c-ink); border: 1px solid var(--border); box-shadow: var(--sh-3); animation: fade-up .6s var(--ease-out); }
.cookie[hidden] { display: none; }
.cookie__title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.cookie__text { font-size: .875rem; color: var(--c-muted); line-height: 1.55; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.dialog { width: min(620px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--c-night); color: #fff; box-shadow: var(--sh-3); }
.dialog::backdrop { background: rgba(10, 10, 11, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dialog[open] { animation: dialog-in .45s var(--ease-out); }
.dialog__inner { position: relative; display: grid; gap: 20px; padding: clamp(28px, 4vw, 44px); }
.dialog__close { position: absolute; right: 18px; top: 18px; color: #fff; border-color: rgba(255, 255, 255, .2); }
.dialog__close:hover { background: #fff; color: var(--c-black); }
.dialog .eyebrow { margin: 0; color: #fff; }
.dialog__price { color: var(--c-night-muted); margin: -8px 0 4px; }
.dialog__price strong { color: #fff; }
.dialog__submit { justify-self: start; }
.dialog .form__row { gap: 16px; }

.cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--c-red); opacity: 0; transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), opacity var(--d-2), background-color var(--d-2); display: grid; place-items: center; will-change: transform; }
.cursor.is-visible { opacity: 1; }
.cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(237, 29, 46, .16); }
.cursor.is-label { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--c-red); }
.cursor__label { color: #fff; font-size: .8125rem; font-weight: 600; letter-spacing: -.01em; opacity: 0; transform: scale(.6); transition: opacity var(--d-2), transform var(--d-2) var(--ease-out); text-align: center; line-height: 1.2; padding: 0 10px; }
.cursor.is-label .cursor__label { opacity: 1; transform: none; }

/* ---------- 27. Motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--delay, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* line masks — room for Cyrillic ascenders (й) and descenders (щ, д, у) */
.line-mask { display: block; overflow: hidden; padding: .08em 0 .18em; margin: -.08em 0 -.18em; }
/* hero & page titles animate with CSS on first paint (no JS, no flash, LCP-friendly) */
.hero__title .line-mask > span { display: block; animation: line-up 1.1s var(--ease-out) var(--delay, 0s) both; }
.hero__title .dot { animation: dot-drop .9s var(--ease-spring) .9s both; }
.page-hero__title { animation: title-in .9s var(--ease-out) .05s both; }
.page-hero__title .dot { animation: dot-drop .9s var(--ease-spring) .6s both; }
.js [data-split] .line-mask > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); transition-delay: var(--delay, 0s); }
.js [data-split].is-in .line-mask > span { transform: none; }
.js [data-split] .dot { transform: translateY(-2.2em) scale(.4); opacity: 0; }
.js [data-split].is-in .dot { transform: none; opacity: 1; animation: dot-drop .9s var(--ease-spring) var(--dot-delay, .6s) backwards; }
.js .hero [data-hero-fade] { opacity: 0; transform: translateY(18px); animation: fade-up 1s var(--ease-out) forwards; animation-delay: var(--delay, .4s); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes billboard { from { transform: rotateZ(0deg) rotateZ(16deg) rotateX(-72deg); } to { transform: rotateZ(-360deg) rotateZ(16deg) rotateX(-72deg); } }
@keyframes billboard-b { from { transform: rotateZ(0deg) rotateZ(-24deg) rotateY(26deg) rotateX(-64deg); } to { transform: rotateZ(-360deg) rotateZ(-24deg) rotateY(26deg) rotateX(-64deg); } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes scroll-cue { 0% { top: -40%; } 60%, 100% { top: 100%; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes title-in { from { opacity: .01; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes dot-drop { 0% { transform: translateY(-2.2em) scale(.4); opacity: 0; } 55% { transform: translateY(.06em) scale(1.12, .88); opacity: 1; } 78% { transform: translateY(-.12em) scale(.96, 1.04); } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-split] .line-mask > span, .js [data-split] .dot, .js .hero [data-hero-fade] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .statement__text[data-words] .w { opacity: 1; }
  .js .term__line[data-term-line] { opacity: 1; transform: none; }
  .marquee { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .marquee__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); width: 100%; padding: 0 var(--gutter); animation: none; }
  .marquee__track .logo-tile { width: auto; }
  .marquee__track[aria-hidden="true"], .marquee--reverse, .logos__toggle { display: none; }
  .orb__chip, .art-chip, .live-dot::after { animation: none !important; }
  .orbit__track, .orbit__dot { animation-duration: 16s !important; animation-delay: -9s !important; animation-iteration-count: infinite !important; animation-play-state: paused !important; }
  .orbit--b .orbit__track, .orbit--b .orbit__dot { animation-duration: 24s !important; }
  .browser__view { overflow-y: auto; }
  .browser__view img { transition: none; transform: none !important; }
  .cursor, .svc-preview { display: none !important; }
}

/* ---------- 28. Responsive ---------- */
@media (max-width: 1200px) {
  .nav, .header__phone { display: none; }
  .burger { display: grid; }
  .mega { display: none; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "term term" "a1 a2" "a3 a4" "a5 a5" "a6 a6"; }
  .bento__cell--term { min-height: 440px; }
  .footer__top { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: minmax(0, 1fr); max-width: 760px; gap: 32px; padding-top: 40px; }
  .toc { position: static; display: none; }
}
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero .orb { position: absolute; right: -18%; top: 12%; width: 62vw; max-width: 460px; opacity: .55; z-index: -1; pointer-events: none; }
  .hero .orb__chip { display: none; }
  .section-head--split, .statement__grid, .process__grid, .faq__grid, .contact__grid, .wp-teaser__grid, .svc-detail__grid, .about-intro, .page-hero__wrap { grid-template-columns: 1fr; }
  .process__sticky, .faq__aside, .wp-teaser__aside, .price-card { position: static; }
  .statement__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { margin-top: 12px; border-top: 1px solid var(--border); }
  .wp-grid, .posts-grid, .values, .contact-cards, .more-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .groups { grid-template-columns: 1fr; }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-row__link { grid-template-columns: 48px minmax(0, 1fr) 56px; }
  .svc-row__body { grid-column: 2; grid-row: 2; }
  .svc-row__arrow { grid-row: 1 / span 2; grid-column: 3; }
  .post-card--featured .post-card__link { grid-template-columns: 1fr; gap: 0; }
  .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-meta > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .case-meta > div:nth-child(n+3) { border-top: 1px solid var(--border); }
  .carousel__track { grid-auto-columns: calc((100% - 16px) / 1.6); }
  .for-list { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --header-h: 68px; }
  .header__logo { width: 132px; }
  .header__actions .btn { display: none; }
  .hero { min-height: auto; padding-top: calc(var(--header-h) + 40px); }
  .hero .orb { top: 4%; right: -30%; width: 88vw; opacity: .35; }
  .svc-cards { grid-template-columns: minmax(0, 1fr); }
  .svc-card { min-height: 0; padding: 24px; gap: 36px; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "term" "a1" "a2" "a3" "a4" "a5" "a6"; grid-auto-rows: auto; }
  .bento__cell:nth-of-type(6), .bento__cell:nth-of-type(7) { flex-direction: column; align-items: flex-start; }
  .form__row { grid-template-columns: 1fr; }
  .statement__facts { grid-template-columns: 1fr 1fr; }
  .types { grid-template-columns: 1fr; }
  .svc-row__link { grid-template-columns: minmax(0, 1fr) 48px; gap: 14px 16px; }
  .svc-row__num { display: none; }
  .svc-row__body { grid-column: 1; }
  .svc-row__arrow { grid-column: 2; width: 48px; height: 48px; }
  .carousel__track { grid-auto-columns: 88%; }
  .wp-row { grid-template-columns: 44px 1fr; gap: 6px 14px; padding: 16px; }
  .wp-row .icon-tile { width: 44px; height: 44px; grid-row: span 2; }
  .wp-row__price { grid-column: 2; }
  .wp-row .i-arrow { display: none; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer__bottom { grid-template-columns: 1fr auto; }
  .footer__legal { justify-content: flex-start; grid-column: 1 / -1; grid-row: 2; }
  .case-next__title { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .acc__inner { padding-right: 0; }
  .price-card__price { font-size: 3.25rem; }
  .cookie { left: 12px; bottom: 12px; width: calc(100% - 24px); }
  .contact__head .t-giant { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .pgrid { gap: 28px 12px; }
  .pcard__title { font-size: 1rem; }
  .pcard__arrow, .pcard__badge { display: none; }
}
@media (max-width: 400px) {
  .pgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (hover: none) {
  .cursor, .svc-preview { display: none !important; }
}

/* inner pages — responsive */
@media (max-width: 1024px) {
  .ai-band__grid, .monitor__grid, .case-full { grid-template-columns: 1fr; }
  .steps-3--compact { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero-stats { gap: 16px 28px; }
  .cta-strip--card { padding: 24px; }
  .status-card { padding: 20px; }
}

/* ==========================================================================
   Technologies — list + 3D orbit (same visual language as the hero orb)
   ========================================================================== */
.tech { overflow: hidden; }
.tech__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(32px, 5vw, 88px); align-items: center; }
.tech__lead { margin-top: 22px; }
.tech__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-top: 40px; }
.tech__label { margin-bottom: 12px; color: var(--fg-muted); }
.tech__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tech-chip { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 15px 0 11px; border-radius: var(--r-pill); background: var(--c-paper); border: 1px solid var(--border); font-size: .875rem; font-weight: 500; transition: border-color var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2); }
.tech-chip:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-2); }
.tech-logo { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; background-color: var(--c-ink); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; transition: background-color var(--d-2); }
.tech-chip:hover .tech-logo { background-color: var(--brand); }

.tech-orbit { position: relative; width: min(100%, 560px); aspect-ratio: 1; justify-self: center; perspective: 1600px; }
.tech-orbit__stage { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.2s var(--ease-out); }
.tech-orbit__sphere {
  position: absolute; inset: 31%; display: grid; place-items: center; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #FFFFFF 0%, rgba(255, 255, 255, .95) 16%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 70% 78%, rgba(10, 10, 11, .14) 0%, rgba(10, 10, 11, 0) 52%),
    radial-gradient(circle at 50% 50%, #F4F4F1 0%, #E8E8E3 58%, #D8D8D1 100%);
  box-shadow: inset -18px -28px 50px rgba(10, 10, 11, .12), inset 14px 20px 40px rgba(255, 255, 255, .9), 0 50px 90px -40px rgba(10, 10, 11, .35);
}
.tech-orbit__dot { width: 16%; aspect-ratio: 1; margin: 22% 0 0 26%; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #FF7A85, #ED1D2E 50%, #A80F1C); box-shadow: 0 0 0 7px rgba(237, 29, 46, .12); }
.tech-orbit__shadow { position: absolute; left: 28%; right: 28%; bottom: 8%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 10, 11, .2), transparent); filter: blur(6px); }
.torbit { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz)); }
.torbit--outer { --rx: 73deg; --ry: 0deg; --rz: 8deg; }
.torbit--inner { --rx: 64deg; --ry: -16deg; --rz: -18deg; }
.torbit__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(10, 10, 11, .14); }
.torbit--outer .torbit__ring, .torbit--outer .torbit__track { inset: 1%; }
.torbit--inner .torbit__ring, .torbit--inner .torbit__track { inset: 17%; }
.torbit--inner .torbit__ring { border-style: dashed; border-color: rgba(10, 10, 11, .12); }
.torbit__track { position: absolute; border-radius: 50%; transform-style: preserve-3d; animation: spin var(--dur) linear var(--d) infinite; }
.torbit__arm { position: absolute; left: 50%; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.torbit__planet { position: absolute; left: -27px; top: -27px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: 0 12px 28px -12px rgba(10, 10, 11, .4), inset 0 0 0 1px rgba(10, 10, 11, .06); transform-style: preserve-3d; animation: tplanet var(--dur) linear var(--d) infinite; }
.torbit--inner .torbit__planet { width: 46px; height: 46px; left: -23px; top: -23px; }
.torbit__planet .tech-logo { width: 24px; height: 24px; }
.torbit--inner .torbit__planet .tech-logo { width: 20px; height: 20px; }
.tech-orbit.is-paused .torbit__track, .tech-orbit.is-paused .torbit__planet { animation-play-state: paused; }
@keyframes tplanet {
  from { transform: rotateZ(0deg) rotateZ(calc(var(--rz) * -1)) rotateY(calc(var(--ry) * -1)) rotateX(calc(var(--rx) * -1)); }
  to { transform: rotateZ(-360deg) rotateZ(calc(var(--rz) * -1)) rotateY(calc(var(--ry) * -1)) rotateX(calc(var(--rx) * -1)); }
}
@keyframes fan-in { from { opacity: 0; transform: translateY(26px) rotate(0deg) scale(.96); } }

@media (prefers-reduced-motion: reduce) {
  .torbit__track, .torbit__planet { animation-duration: var(--dur) !important; animation-delay: var(--d) !important; animation-iteration-count: infinite !important; animation-play-state: paused !important; }
}
@media (max-width: 1024px) {
  .tech__grid { grid-template-columns: minmax(0, 1fr); }
  .tech-orbit { width: min(100%, 460px); }
  .page-hero__art { max-width: 640px; aspect-ratio: 16 / 11; }
  .art-chip--1 { left: 10px; }
  .art-chip--2 { right: 10px; }
}
@media (max-width: 720px) {
  .tech__groups { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .tech-orbit { width: min(100%, 360px); }
  .torbit__planet { width: 42px; height: 42px; left: -21px; top: -21px; }
  .torbit--inner .torbit__planet { width: 36px; height: 36px; left: -18px; top: -18px; }
  .torbit__planet .tech-logo { width: 19px; height: 19px; }
  .torbit--inner .torbit__planet .tech-logo { width: 16px; height: 16px; }
  .hero-rail { align-items: stretch; }
  .hero-rail__label { width: 100%; }
  .hero-rail__services a { height: 42px; padding: 0 14px 0 12px; font-size: .875rem; }
  .hero-rail__project { width: 100%; }
  .hero-rail__arrow { margin-left: auto; }
  .art-chip { font-size: .8125rem; padding: 7px 12px 7px 9px; }
  .art-chip--3 { bottom: -14px; }
}

/* ==========================================================================
   Site types — link cards, sitemap diagram, linked types grid
   ========================================================================== */
.type-links { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.type-link { position: relative; display: flex; flex-direction: column; gap: 22px; height: 100%; min-height: 196px; padding: 22px; border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid transparent; transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2); }
.section--soft .type-link { background: var(--c-paper); border-color: var(--border); }
.type-link .icon-tile { transition: background-color var(--d-2), border-color var(--d-2), color var(--d-2); }
.type-link__body { display: grid; gap: 6px; margin-top: auto; padding-right: 8px; }
.type-link__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.type-link small { font-size: .875rem; line-height: 1.45; color: var(--fg-muted); transition: color var(--d-2); }
.type-link__arrow { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2), transform var(--d-2) var(--ease-out); }
.type-link:hover { background: var(--c-black); color: #fff; border-color: var(--c-black); transform: translateY(-3px); box-shadow: var(--sh-3); }
.type-link:hover small { color: rgba(255, 255, 255, .64); }
.type-link:hover .icon-tile { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.type-link:hover .type-link__arrow { background: #fff; border-color: #fff; color: var(--c-black); transform: rotate(45deg); }

/* sitemap: root page on top, child pages on a rail below */
.smap { --gap: 14px; --drop: 34px; }
.smap__root { position: relative; display: flex; justify-content: center; padding-bottom: var(--drop); }
.smap__root::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: var(--drop); background: var(--c-line-2); }
.smap__root-card { display: inline-flex; align-items: center; gap: 14px; max-width: 540px; padding: 14px 24px 14px 14px; border-radius: 20px; background: var(--c-night); color: #fff; box-shadow: var(--sh-3); }
.smap__root-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-red); flex-shrink: 0; }
.smap__root-card strong { display: block; font-weight: 600; letter-spacing: -.015em; }
.smap__root-card small { display: block; margin-top: 2px; font-size: .875rem; color: var(--c-night-muted); }
.smap__items { list-style: none; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap); padding-top: var(--drop); }
.smap__items::before { content: ""; position: absolute; top: 0; height: 1px; background: var(--c-line-2); left: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) / 2); right: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n) / 2); }
.smap__item { position: relative; padding: 20px 20px 22px; border-radius: var(--r-md); background: var(--bg-soft); }
.smap__item::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--drop)); width: 1px; height: var(--drop); background: var(--c-line-2); }
.smap__item::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 4px var(--c-paper); }
.smap__num { color: var(--c-red); }
.smap__title { margin-top: 12px; font-size: 1.0625rem; letter-spacing: -.015em; line-height: 1.25; }
.smap__text { margin-top: 6px; font-size: .875rem; line-height: 1.5; color: var(--fg-muted); }

.type-for__title { margin: 40px 0 6px; }

/* "Какъв сайт ви трябва" grid → links */
.types li.types__item--link { padding: 0; }
.types__link { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 24px; }
.types__arrow { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); transition: background-color var(--d-2), color var(--d-2), border-color var(--d-2), transform var(--d-2) var(--ease-out); }
.types__link:hover .types__arrow { background: var(--c-black); border-color: var(--c-black); color: #fff; transform: rotate(45deg); }
.types__link:focus-visible { outline-offset: -4px; }

/* mega menu: site types row */
.mega__label--types { margin-top: 28px; }
.mega__types { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.mega__types a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--c-paper-2); font-size: .8125rem; font-weight: 500; transition: background-color var(--d-2), color var(--d-2); }
.mega__types a:hover { background: var(--c-black); color: #fff; }

@media (max-width: 1200px) {
  .smap__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .smap__items::before, .smap__item::before, .smap__item::after { display: none; }
  .smap__root::after { display: none; }
  .smap__root { padding-bottom: 16px; }
  .smap__items { padding-top: 0; }
}
@media (max-width: 1024px) {
  .type-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .smap { --drop: 0px; }
  .smap__root { justify-content: flex-start; }
  .smap__root-card { width: 100%; }
  .smap__items { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-left: 26px; }
  .smap__items::before { display: block; top: -16px; bottom: 32px; left: 10px; right: auto; width: 1px; height: auto; }
  .smap__item::before { display: block; left: -16px; top: 30px; width: 16px; height: 1px; }
  .smap__item::after { display: block; left: -16px; top: 26px; margin-left: -5px; }
  .smap__item { padding: 16px 18px; }
  .type-links { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .type-link { flex-direction: row; align-items: center; min-height: 0; gap: 14px; padding: 14px 56px 14px 14px; }
  .type-link__body { margin-top: 0; }
  .type-link small { display: none; }
  .type-link__arrow { top: 50%; margin-top: -17px; right: 14px; }
}

/* spam honeypot (forms) — invisible to people, filled by bots */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Free tools (/tools/): calculator, speed test, SEO check
   ========================================================================== */
.btn--block { width: 100%; justify-content: space-between; }
.tools-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tools-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-card { position: relative; display: flex; flex-direction: column; gap: 28px; height: 100%; min-height: 250px; padding: 30px; border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid transparent; transition: background-color var(--d-2), color var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2); }
.tool-card:hover { background: var(--c-black); color: #fff; transform: translateY(-3px); box-shadow: var(--sh-3); }
.tool-card:hover .icon-tile { background: var(--c-red); border-color: var(--c-red); color: #fff; }
.tool-card__body { display: grid; gap: 10px; margin-top: auto; }
.tool-card__num { color: var(--fg-muted); }
.tool-card__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.tool-card__text { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.55; transition: color var(--d-2); }
.tool-card:hover .tool-card__text, .tool-card:hover .tool-card__num { color: rgba(255, 255, 255, .64); }
.tool-card__go { position: absolute; top: 26px; right: 26px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); transition: transform var(--d-2) var(--ease-out), background-color var(--d-2), color var(--d-2); }
.tool-card:hover .tool-card__go { background: #fff; color: var(--c-black); border-color: #fff; transform: rotate(45deg); }

/* calculator */
.tool { scroll-margin-top: var(--header-h, 80px); }
.calc { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .9fr); gap: 32px 56px; align-items: start; }
.calc__form { display: grid; gap: 40px; }
.calc__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc__step legend { display: flex; align-items: center; gap: 14px; padding: 0; margin-bottom: 18px; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.02em; }
.calc__num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--fg); font-size: .75rem; }
.calc-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.calc-type { position: relative; }
.calc-type input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.calc-type__box { display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 108px; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--border-strong); font-size: .9375rem; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background-color var(--d-2), border-color var(--d-2), color var(--d-2); }
.calc-type__box .i { color: var(--fg-muted); transition: color var(--d-2); }
.calc-type:hover .calc-type__box { border-color: var(--fg); }
.calc-type input:checked + .calc-type__box { background: #fff; color: var(--c-black); border-color: #fff; }
.calc-type input:checked + .calc-type__box .i { color: var(--c-red); }
.calc-type input:focus-visible + .calc-type__box { outline: 2px solid var(--c-red); outline-offset: 3px; }
.calc-range { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 18px; align-items: center; }
.calc-range input[type="range"] { width: 100%; height: 44px; background: transparent; accent-color: var(--c-red); cursor: pointer; }
.calc-range__value { display: grid; place-items: center; height: 48px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .06); border: 1px solid var(--border); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.calc__result { position: sticky; top: calc(var(--header-h, 80px) + 24px); }
.calc-result { display: grid; gap: 14px; padding: clamp(24px, 2vw + 12px, 36px); border-radius: var(--r-xl); background: linear-gradient(160deg, #1A1A1D, #0F0F11); border: 1px solid var(--border); box-shadow: 0 40px 100px -40px rgba(237, 29, 46, .35); }
.calc-result__label { color: var(--fg-muted); }
.calc-result__total { font-family: var(--font-display); font-size: clamp(1.7rem, 1.1rem + 1.5vw, 2.4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc-result__total.is-quote { color: var(--c-yellow); }
.calc-result__type { color: var(--fg-muted); font-size: var(--fs-sm); }
.calc-result__lines { list-style: none; display: grid; gap: 0; margin: 4px 0; border-top: 1px solid var(--border); }
.calc-result__lines li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.calc-result__lines li span { color: var(--fg-muted); }
.calc-result__lines li strong { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-result__lines li.calc-result__quote { display: block; color: var(--fg-muted); line-height: 1.55; }
.calc-result__extra { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(246, 206, 69, .1); color: #F8E3A0; font-size: .875rem; line-height: 1.5; }
.calc-result__note { margin: 0 0 6px; color: var(--fg-muted); font-size: .8125rem; line-height: 1.55; }
.calc-factors { display: grid; gap: 40px; }
.calc-factors .check-list { max-width: 900px; }

/* URL tools: form, status, results */
.tool-form { display: grid; gap: 12px; max-width: 1080px; }
.tool-form__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: end; }
.tool-form__row--2 { grid-template-columns: minmax(0, 1fr) auto; }
.tool-form .input { height: 64px; font-size: 1.0625rem; }
.tool-form .chips { flex-wrap: nowrap; }
.tool-form .chip-check span { min-height: 64px; }
.tool-form__go { white-space: nowrap; }
.tool-status { display: flex; align-items: center; gap: 14px; max-width: 1080px; margin-top: 28px; padding: 18px 22px; border-radius: var(--r-md); background: rgba(255, 255, 255, .05); border: 1px solid var(--border); color: var(--fg-muted); }
.tool-status.is-error { background: rgba(255, 107, 118, .12); border-color: rgba(255, 107, 118, .4); color: #FFD5D8; }
.tool-status__spin { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .2); border-top-color: var(--c-red); animation: tool-spin .8s linear infinite; }
@keyframes tool-spin { to { transform: rotate(360deg); } }
.tool-out { display: grid; gap: 36px; margin-top: 48px; scroll-margin-top: calc(var(--header-h, 80px) + 16px); }
.speed-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: clamp(22px, 2vw + 10px, 36px); border-radius: var(--r-xl); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.speed-top__url { color: var(--fg-muted); overflow-wrap: anywhere; text-transform: none; letter-spacing: .02em; }
.speed-top__text { display: grid; gap: 10px; }
.speed-top__lead { color: var(--fg-muted); max-width: 60ch; }
.speed-top__shot { width: 132px; border-radius: 14px; border: 1px solid var(--border); background: #fff; }
.gauge { --v: 0; --c: var(--c-yellow); position: relative; display: grid; place-items: center; width: 148px; height: 148px; }
.gauge--good { --c: #3DDC84; }
.gauge--bad { --c: #FF5A66; }
.gauge svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 9; }
.gauge__track { stroke: rgba(255, 255, 255, .1); }
.gauge__val { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v)); transition: stroke-dashoffset 1.2s var(--ease-out); }
.gauge__num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; line-height: 1; color: var(--c); margin-top: -10px; }
.gauge__label { position: absolute; bottom: 36px; color: var(--fg-muted); font-size: .68rem; }
.speed-block { display: grid; gap: 16px; }
.speed-block__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: var(--fs-h4); font-weight: 600; letter-spacing: -.02em; }
.speed-block__title .t-mono { color: var(--fg-muted); font-weight: 400; text-transform: none; letter-spacing: .01em; }
.metrics { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.metric { position: relative; display: grid; gap: 6px; padding: 20px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.metric::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: rgba(255, 255, 255, .2); }
.metric--good::before { background: #3DDC84; }
.metric--warn::before { background: var(--c-yellow); }
.metric--bad::before { background: #FF5A66; }
.metric__abbr { color: var(--fg-muted); }
.metric__value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric__label { color: var(--fg-muted); font-size: .875rem; }
.metric__cat { justify-self: start; margin-top: 4px; padding: 3px 10px; border-radius: var(--r-pill); font-size: .75rem; font-weight: 600; }
.metric__cat--good { background: rgba(61, 220, 132, .14); color: #7DEBAE; }
.metric__cat--warn { background: rgba(246, 206, 69, .14); color: #F8E3A0; }
.metric__cat--bad { background: rgba(255, 90, 102, .16); color: #FFB0B6; }
.opps { list-style: none; counter-reset: opp; display: grid; gap: 0; border-top: 1px solid var(--border); }
.opps li { counter-increment: opp; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--border); }
.opps li::before { content: counter(opp, decimal-leading-zero); font-family: var(--font-mono); font-size: .75rem; color: var(--c-red); }
.opps__value { color: var(--fg-muted); text-transform: none; letter-spacing: .01em; text-align: right; }
.opps li.opps__none { grid-template-columns: 1fr; color: var(--fg-muted); }
.opps li.opps__none::before { content: none; }
.tool-out__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.link-arrow--light { color: #fff; }

/* SEO check */
.serp-preview { display: grid; gap: 4px; max-width: 680px; padding: 22px 24px; border-radius: var(--r-md); background: #fff; color: #202124; font-family: Arial, sans-serif; }
.serp-preview__label { margin-bottom: 8px; color: #70757a; font-family: var(--font-mono); }
.serp-preview__site { font-size: .85rem; color: #4d5156; overflow-wrap: anywhere; }
.serp-preview__title { font-size: 1.25rem; line-height: 1.3; color: #1a0dab; overflow-wrap: anywhere; }
.serp-preview__desc { font-size: .875rem; line-height: 1.55; color: #4d5156; overflow-wrap: anywhere; }
.seo-group { display: grid; gap: 14px; }
.seo-checks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.seo-check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 18px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.seo-check__icon { padding-top: 1px; }
.seo-check--ok .seo-check__icon { color: #3DDC84; }
.seo-check--warn .seo-check__icon { color: var(--c-yellow); }
.seo-check--bad .seo-check__icon { color: #FF5A66; }
.seo-check--bad { border-color: rgba(255, 90, 102, .35); }
.seo-check__body { display: grid; gap: 4px; min-width: 0; }
.seo-check__body p, .serp-preview p, .speed-top__text p, .tool-svc p, .calc-result p { margin: 0; }
[data-seo-groups] { display: grid; gap: 32px; }
.section.tool { padding-block: clamp(3.5rem, 2rem + 4vw, 6rem); }
.seo-check__label { font-weight: 600; }
.seo-check__detail { color: var(--fg-muted); font-size: .875rem; overflow-wrap: anywhere; }
.seo-check__fix { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: .875rem; line-height: 1.5; }
.seo-stats { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.seo-stats li { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.seo-stats strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.seo-stats span { color: var(--fg-muted); font-size: .8125rem; }

/* recommended service + lead form */
.tool-svc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 32px; align-items: center; padding: clamp(24px, 2vw + 12px, 40px); border-radius: var(--r-xl); background: var(--bg-soft); }
.tool-svc__eyebrow { color: var(--c-red-ink); margin-bottom: 8px; }
.tool-svc__text { margin-top: 8px; color: var(--fg-muted); max-width: 62ch; }
.tool-svc__side { display: grid; justify-items: start; gap: 14px; }
.tool-svc__price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; letter-spacing: -.02em; }
.tool-svc__price .t-mono { color: var(--fg-muted); font-family: var(--font-mono); font-size: .75rem; vertical-align: middle; }
.tool-lead__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 48px 96px; align-items: start; }
.tool-lead__info { display: grid; gap: 22px; justify-items: start; }
.tool-lead__info .t-lead { color: var(--fg-muted); }
.tool-lead__points { list-style: none; display: grid; gap: 12px; }
.tool-lead__points li { display: flex; gap: 10px; align-items: center; color: rgba(255, 255, 255, .86); }
.tool-lead__points .i { color: var(--c-red); flex: none; }

@media (max-width: 1200px) {
  .calc-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .tools-grid { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc__result { position: static; }
  .tool-form__row { grid-template-columns: 1fr; }
  .tool-form__row .btn { justify-self: start; }
  .speed-top { grid-template-columns: auto minmax(0, 1fr); }
  .speed-top__shot { display: none; }
  .tool-svc { grid-template-columns: auto minmax(0, 1fr); }
  .tool-svc__side { grid-column: 1 / -1; grid-auto-flow: column; align-items: center; justify-content: start; }
  .tool-lead__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tools-grid--two { grid-template-columns: 1fr; }
  .calc-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .speed-top { grid-template-columns: 1fr; justify-items: start; }
  .seo-checks { grid-template-columns: 1fr; }
  .seo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opps li { grid-template-columns: 32px minmax(0, 1fr); }
  .opps__value { grid-column: 2; text-align: left; }
  .tool-svc { grid-template-columns: 1fr; }
  .tool-svc__side { grid-auto-flow: row; }
  .tool-form .chips { flex-wrap: wrap; }
  .tool-form .chip-check span { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .gauge__val { transition: none; }
  .tool-status__spin { animation-duration: 2s; }
}
/* domain check */
.domains { list-style: none; display: grid; gap: 10px; }
.domain-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .6fr) auto; gap: 12px 20px; align-items: center; min-height: 76px; padding: 14px 18px 14px 24px; border-radius: var(--r-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.domain-row.is-first { border-color: var(--border-strong); background: rgba(255, 255, 255, .07); }
.domain-row--free { border-color: rgba(61, 220, 132, .35); }
.domain-row__name { font-family: var(--font-display); font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); font-weight: 600; letter-spacing: -.02em; overflow-wrap: anywhere; }
.domain-row__status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.domain-row__status--free { background: rgba(61, 220, 132, .14); color: #7DEBAE; }
.domain-row__status--taken { background: rgba(255, 255, 255, .08); color: var(--fg-muted); }
.domain-row__status--invalid, .domain-row__status--unknown { background: rgba(246, 206, 69, .12); color: #F8E3A0; }
.domain-row__meta { color: var(--fg-muted); text-transform: none; letter-spacing: .01em; overflow-wrap: anywhere; }
.domain-row__act { justify-self: end; }
.domain-row--taken .domain-row__name { color: rgba(255, 255, 255, .6); }
@media (max-width: 720px) {
  .domain-row { grid-template-columns: minmax(0, 1fr) auto; padding: 16px; }
  .domain-row__meta { grid-column: 1 / -1; }
  .domain-row__meta:empty { display: none; }
  .domain-row__act { grid-column: 1 / -1; justify-self: start; }
  .domain-row__act:empty { display: none; }
}
/* homepage: free tools */
.tools-home .section-head { margin-bottom: 40px; }
.tools-home__domain { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; max-width: 880px; margin-bottom: 28px; padding: 8px 8px 8px 22px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); border: 1px solid var(--border-strong); transition: border-color var(--d-2), box-shadow var(--d-2); }
.tools-home__domain:focus-within { border-color: #fff; box-shadow: 0 0 0 4px rgba(237, 29, 46, .35); }
.tools-home__domain > .i { color: var(--c-red); }
.tools-home__domain .input { height: 52px; padding: 0; border: 0; background: transparent; font-size: 1.0625rem; box-shadow: none; }
.tools-home__domain .input:focus { background: transparent; box-shadow: none; }
.tools-home__grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tool-card--dark { background: rgba(255, 255, 255, .04); border-color: var(--border); }
.tool-card--dark .icon-tile { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #fff; }
.tool-card--dark:hover { background: #fff; color: var(--c-black); }
.tool-card--dark:hover .tool-card__text, .tool-card--dark:hover .tool-card__num { color: var(--c-muted); }
.tool-card--dark:hover .tool-card__go { background: var(--c-black); color: #fff; border-color: var(--c-black); }
@media (max-width: 1200px) { .tools-home__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .tools-home__grid { grid-template-columns: 1fr; }
  .tools-home__grid .tool-card { min-height: 0; }
  .tools-home__domain { grid-template-columns: minmax(0, 1fr) auto; padding-left: 18px; }
  .tools-home__domain > .i { display: none; }
}.tools-home__grid .tool-card__body { margin-top: 0; }
.tools-home__grid .tool-card { min-height: 0; }

/* WordPress services mega menu */
.mega__inner--wp { grid-template-columns: minmax(0, 2.6fr) minmax(260px, .95fr); }
.mega-wp { columns: 3; column-gap: 32px; }
.mega-wp__group { break-inside: avoid; padding-bottom: 22px; }
.mega-wp__group .mega__label { margin-bottom: 4px; }
.mega-wp .mega__list { margin-bottom: 0; }
.mega-wp .mega__list li:last-child a { border-bottom: 0; }
.mega-wp .mega__list a { padding: 7px 0; font-size: .875rem; }
@media (max-width: 1200px) { .mega-wp { columns: 2; } }

/* WordPress maintenance plans (catalog page) */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 30px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: border-color var(--d-2), transform var(--d-2) var(--ease-out), box-shadow var(--d-2); }
.plan-card:hover { border-color: var(--c-black); transform: translateY(-3px); box-shadow: var(--sh-2); }
.plan-card--dark { background: var(--c-night); color: #fff; border-color: var(--c-night); overflow: hidden; isolation: isolate; }
.plan-card--dark:hover { border-color: var(--c-night); }
.plan-card--dark::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; right: -120px; top: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(237, 29, 46, .45), transparent); pointer-events: none; }
.plan-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.plan-card__top .t-mono { color: var(--fg-muted); font-size: .7rem; }
.plan-card--dark .icon-tile { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: #fff; }
.plan-card__title { font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.15; }
.plan-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.plan-card__text { margin-top: 8px; color: var(--fg-muted); font-size: .9375rem; line-height: 1.55; }
.plan-card__price { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.plan-card__price strong { font-size: 2.75rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.plan-card__price span { color: var(--fg-muted); font-size: .8rem; }
.plan-card__list { list-style: none; display: grid; gap: 10px; flex: 1; align-content: start; }
.plan-card__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: .9375rem; line-height: 1.45; }
.plan-card__list .i { color: var(--c-red); margin-top: 3px; }
.plan-card__actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.plan-card__actions .btn { flex: 1; justify-content: space-between; }
.plan-card--dark .plan-card__text, .plan-card--dark .plan-card__price span, .plan-card--dark .plan-card__top .t-mono { color: var(--c-night-muted); }
.plan-card--dark .plan-card__price { border-color: rgba(255, 255, 255, .12); }
.plan-card--dark .wp-card__more { background: #fff; color: var(--c-black); }
.plan-card--dark .wp-card__more:hover { background: var(--c-red); color: #fff; }
.wp-plans__note { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; color: var(--fg-muted); font-size: .875rem; line-height: 1.55; max-width: 92ch; }
.wp-plans__note .i { flex: none; margin-top: 2px; }
@media (max-width: 1024px) { .plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }