/*
Theme Name: TakelazhGroup Theme
Theme URI: https://takelazhgroup.ru
Author: Shimolin Pavel
Author URI: https://shimolin-pavel.com
Description: Профессиональная тема для такелажной компании с расширенной воронкой продаж
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: takelazh-theme
Tags: business, industrial, services
*/

/* ============================================================
   ROOT VARIABLES
   ============================================================ */
:root {
  --color-primary: #FF6B00;
  --color-primary-light: #FF8C33;
  --color-primary-dark: #CC5500;
  --color-primary-glow: rgba(255,107,0,0.35);
  --color-primary-subtle: rgba(255,107,0,0.08);

  --color-bg-base: #0D0D0D;
  --color-bg-deep: #080808;
  --color-bg-surface: #141414;
  --color-bg-raised: #1A1A1A;
  --color-bg-elevated: #202020;

  --color-card-bg: #161616;
  --color-card-border: rgba(255,107,0,0.25);

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B0B0B0;
  --color-text-muted: #6B6B6B;
  --color-text-accent: #FF6B00;

  --color-border: rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.15);

  --font-display: 'Barlow Condensed', 'Impact', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-ui: 'Barlow', 'Inter', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-normal: 1.5;
  --lh-snug: 1.25;
  --lh-relaxed: 1.7;

  --ls-wide: 0.05em;
  --ls-wider: 0.10em;
  --ls-widest: 0.20em;
  --ls-tight: -0.02em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --container-xl: 1280px;
  --container-padding: clamp(1rem, 4vw, 4rem);

  --header-height: 80px;
  --topbar-height: 36px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl: 0 16px 64px rgba(0,0,0,0.7);
  --glow-sm: 0 0 8px rgba(255,107,0,0.35), 0 0 16px rgba(255,107,0,0.35);
  --glow-card: 0 0 1px rgba(255,107,0,0.25), 0 0 24px rgba(255,107,0,0.12), inset 0 1px 0 rgba(255,255,255,0.04);

  --glass-bg: rgba(22,22,22,0.85);
  --glass-blur: blur(16px);

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-industrial: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  --transition-base: all var(--duration-normal) var(--ease-default);
  --transition-color: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;

  --btn-padding-y: 0.75rem;
  --btn-padding-x: 1.75rem;
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--text-sm);
  --btn-font-weight: var(--fw-bold);
  --btn-letter-spacing: var(--ls-wider);
  --btn-primary-bg: var(--color-primary);
  --btn-primary-hover: var(--color-primary-light);

  --header-bg: rgba(13,13,13,0.92);
  --header-border: rgba(255,107,0,0.15);

  --section-py: clamp(4rem, 8vw, 8rem);

  --color-success: #2ECC71;
  --color-error: #E74C3C;

  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

/* ============================================================
   BASE RESET
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open {
  overflow: hidden;
}

body.modal-open {
  overflow: hidden;
}

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  color: var(--btn-primary-bg);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.btn:hover::before {
  opacity: 1;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: #000;
  box-shadow: 0 0 20px rgba(255,107,0,0.25);
}

.btn-primary:hover {
  background: var(--btn-primary-hover);
  box-shadow: 0 0 30px rgba(255,107,0,0.40);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-strong);
}

.btn-secondary:hover {
  border-color: rgba(255,255,255,0.5);
  color: var(--color-text-primary);
}

.btn-block {
  width: 100%;
}

/* ============================================================
   HEADER SHELL
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  transition: var(--transition-base);
}

.site-header.is-scrolled .header-topbar {
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.site-header.is-scrolled .header-main {
  background: rgba(8,8,8,0.98);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,107,0,0.12);
}

.site-main {
  padding-top: calc(var(--header-height) + var(--topbar-height));
  transition: padding-top var(--duration-normal) var(--ease-default);
}

.site-header.is-scrolled ~ .site-main {
  padding-top: var(--header-height);
}

/* ============================================================
   TOP BAR
   ============================================================ */
.header-topbar {
  background: var(--color-bg-deep);
  border-bottom: 1px solid rgba(255,107,0,0.08);
  height: var(--topbar-height);
  overflow: hidden;
  transition: height var(--duration-normal) var(--ease-default),
              opacity var(--duration-normal) var(--ease-default);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  gap: var(--space-6);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  overflow: hidden;
  min-width: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.topbar-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.topbar-item svg {
  flex-shrink: 0;
  opacity: 0.55;
}

.topbar-link {
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-default);
}

.topbar-link:hover {
  color: var(--color-text-secondary);
}

.topbar-geo {
  display: none;
}

@media (min-width: 1140px) {
  .topbar-geo {
    display: flex;
  }
}

.topbar-social {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: var(--transition-base);
}

.topbar-social--tg {
  background: rgba(36,161,222,0.10);
  color: #29B6F6;
  border: 1px solid rgba(36,161,222,0.18);
}

.topbar-social--tg:hover {
  background: rgba(36,161,222,0.18);
  border-color: rgba(36,161,222,0.35);
}

.topbar-social--wa {
  background: rgba(37,211,102,0.08);
  color: #4CAF50;
  border: 1px solid rgba(37,211,102,0.18);
}

.topbar-social--wa:hover {
  background: rgba(37,211,102,0.16);
  border-color: rgba(37,211,102,0.35);
}

.topbar-social--max {
  background: #5151f533;
    color: #5151f5;
    border: 1px solid #5151f570;
}

.topbar-social--max:hover {
  background: #9b9bff3d;
    border: 1px solid #5151f5b0;
}

/* ============================================================
   HEADER MAIN
   ============================================================ */
.header-main {
  background: var(--header-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--header-border);
  transition: var(--transition-base);
}

.header-main-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-height);
}

/* ============================================================
   LOGO
   ============================================================ */
.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.site-logo:hover {
  opacity: 0.85;
}

.site-logo svg {
  display: block;
}

.site-logo .logo-main {
  color: var(--color-text-primary);
}

.site-logo .logo-icon {
  color: var(--color-text-primary);
}

.site-logo .logo-subtitle {
  color: var(--color-text-muted);
}

/* ============================================================
   DESKTOP NAVIGATION
   ============================================================ */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.45rem 0.8rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
  letter-spacing: var(--ls-wide);
  transition: color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default);
  cursor: pointer;
  position: relative;
}

.menu-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.8rem;
  right: 0.8rem;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-normal) var(--ease-industrial);
}

.menu-link:hover {
  color: var(--color-text-primary);
  background: rgba(255,255,255,0.05);
}

.menu-item.is-open > .menu-link {
  color: var(--color-text-primary);
  background: rgba(255,255,255,0.05);
}

.menu-item.current > .menu-link {
  color: var(--color-text-primary);
  background: rgba(255,255,255,0.05);
}

.menu-link:hover::after {
  transform: scaleX(1);
}

.menu-item.is-open > .menu-link::after {
  transform: scaleX(1);
}

.menu-item.current > .menu-link::after {
  transform: scaleX(1);
}

.menu-chevron {
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform var(--duration-normal) var(--ease-industrial),
              opacity var(--duration-fast) var(--ease-default);
}

.menu-item.is-open > .menu-link .menu-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* ============================================================
   SIMPLE DROPDOWN (ИСПРАВЛЕНО: мостик не блокирует ссылку)
   ============================================================ */
.menu-item--has-dropdown {
  position: relative;
}

/* МОСТИК - активен только в зоне gap, не перекрывает ссылку */
.menu-item--has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 15px;
  background: transparent;
  z-index: calc(var(--z-dropdown) - 1);
  pointer-events: auto;
  display: none;
}

.menu-item--has-dropdown.is-open::after {
  display: block;
}

/* Расширяем зону самой ссылки ВНИЗ, но не мешаем повторному наведению */
.menu-item--has-dropdown > .menu-link {
  position: relative;
  z-index: calc(var(--z-dropdown) + 1);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  list-style: none;
  background: #181818;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,107,0,0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease-default),
              transform 0.18s var(--ease-industrial),
              visibility 0s 0.18s;
  z-index: var(--z-dropdown);
}

.menu-item--has-dropdown.is-open .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s var(--ease-default),
              transform 0.18s var(--ease-industrial);
}

.dropdown-panel li a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 14px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.dropdown-panel li a svg {
  opacity: 0.45;
  flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.dropdown-panel li a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

.dropdown-panel li a:hover svg {
  opacity: 0.85;
}

.dropdown-panel li + li a {
  border-top: 1px solid rgba(255,255,255,0.04);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.dropdown-panel li:last-child a {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.dropdown-panel li:first-child a {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.dropdown-panel li:only-child a {
  border-radius: var(--radius-lg);
}

/* ============================================================
   MEGA PANEL (ИСПРАВЛЕНО: мостик не блокирует ссылку)
   ============================================================ */
.menu-item--has-mega {
  position: static;
}

/* МОСТИК - покрывает gap, но не блокирует ссылку */
.menu-item--has-mega::after {
  content: '';
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
  z-index: calc(var(--z-dropdown) - 1);
  pointer-events: auto;
  display: none;
}

.menu-item--has-mega.is-open::after {
  display: block;
}

/* Ссылка ВЫШЕ мостика */
.menu-item--has-mega > .menu-link {
  position: relative;
  z-index: calc(var(--z-dropdown) + 1);
}

.mega-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: #161616;
  border-top: 2px solid var(--color-primary);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 24px 60px rgba(0,0,0,0.65);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease-default),
              transform 0.2s var(--ease-industrial),
              visibility 0s 0.2s;
  z-index: var(--z-dropdown);
}

.menu-item--has-mega.is-open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s var(--ease-default),
              transform 0.2s var(--ease-industrial);
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 220px;
  gap: 0;
  padding: 0;
}

.mega-col {
  padding: 1.5rem 1.25rem 1.75rem;
  border-right: 1px solid rgba(255,255,255,0.05);
}

.mega-col:last-child {
  border-right: none;
}

.mega-col__label {
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mega-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 7px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default);
}

.mega-link:hover {
  background: rgba(255,255,255,0.055);
}

.mega-link__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.055);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  color: rgba(255,255,255,0.45);
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.mega-link:hover .mega-link__icon {
  background: rgba(255,107,0,0.14);
  color: var(--color-primary);
}

.mega-link strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.82);
  line-height: 1.2;
  transition: color var(--duration-fast) var(--ease-default);
}

.mega-link em {
  display: block;
  font-size: 0.72rem;
  font-style: normal;
  color: rgba(255,255,255,0.32);
  margin-top: 2px;
}

.mega-link:hover strong {
  color: #fff;
}

.mega-col--cta {
  background: rgba(255,107,0,0.03);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  justify-content: center;
}

.mega-cta__badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,107,0,0.12);
  color: var(--color-primary);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,107,0,0.2);
}

.mega-cta__title {
  font-size: 0.95rem;
  font-weight: var(--fw-semibold);
  color: #fff;
  line-height: 1.35;
  margin: 0;
}

.mega-cta__sub {
  font-size: 0.775rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.55;
  margin: 0;
}

.mega-cta__btn {
  width: 100%;
  justify-content: center;
  padding: 0.6rem 1rem;
  font-size: var(--text-xs);
}

.mega-cta__phone {
  display: block;
  text-align: center;
  font-size: 0.83rem;
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.mega-cta__phone:hover {
  color: #fff;
}

.mega-cta__all {
  display: block;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: opacity var(--duration-fast) var(--ease-default);
}

.mega-cta__all:hover {
  opacity: 0.75;
}

/* ============================================================
   HEADER ACTIONS (right side)
   ============================================================ */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-left: auto;
}

.header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: var(--transition-base);
  flex-shrink: 0;
}

.header-search-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.header-search-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.header-phone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: color var(--duration-fast) var(--ease-default);
}

.header-phone:hover {
  color: var(--color-primary);
}

.header-phone__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
  transition: background var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.header-phone:hover .header-phone__icon {
  background: rgba(255,107,0,0.14);
  box-shadow: var(--glow-sm);
}

.header-phone__content {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.header-phone__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

.header-phone__number {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  font-family: var(--font-ui);
  letter-spacing: 0.02em;
}

.header-cta {
  padding: 0.58rem 1.2rem;
  font-size: 0.75rem;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.burger:hover {
  border-color: var(--color-primary);
}

.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--duration-normal) var(--ease-industrial),
              opacity var(--duration-fast) var(--ease-default);
  transform-origin: center;
}

.burger.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.is-active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.burger.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   SEARCH PANEL
   ============================================================ */
.search-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: #111;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: max-height 0.28s var(--ease-default),
              opacity 0.28s var(--ease-default);
}

.search-panel.is-open {
  max-height: 70px;
  opacity: 1;
}

.search-panel__form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 64px;
  color: rgba(255,255,255,0.28);
}

.search-panel__input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 1.05rem;
  color: #fff;
  font-family: var(--font-body);
}

.search-panel__input::placeholder {
  color: rgba(255,255,255,0.28);
}

.search-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-base);
}

.search-panel__close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* ============================================================
   MOBILE OVERLAY
   ============================================================ */
.mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
}

.mobile-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-default);
}

.mobile-overlay.is-open {
  pointer-events: auto;
}

.mobile-overlay.is-open::before {
  opacity: 1;
}

.mobile-menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 90vw);
  background: var(--color-bg-surface);
  border-left: 1px solid var(--color-card-border);
  
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-industrial);
  overflow: hidden;
}

.mobile-overlay.is-open .mobile-menu {
  transform: translateX(0);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.mobile-menu__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-base);
}

.mobile-menu__close:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.mobile-menu__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-6);
  gap: var(--space-4);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,0,0.3) transparent;
}

.mobile-phone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: #fff;
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary-glow);
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}

.mobile-phone svg {
  color: var(--color-primary);
  flex-shrink: 0;
}

.mobile-phone:hover {
  background: rgba(255,107,0,0.12);
}

.mobile-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 0 var(--space-3);
  color: rgba(255,255,255,0.28);
  flex-shrink: 0;
}

.mobile-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: 0.65rem 0;
  font-size: var(--text-sm);
  color: #fff;
  font-family: var(--font-body);
}

.mobile-search input::placeholder {
  color: rgba(255,255,255,0.28);
}

/* ============================================================
   MOBILE ACCORDION NAV
   ============================================================ */
.mnav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mnav-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mnav-item:last-child {
  border-bottom: none;
}

.mnav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0.9rem 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  text-align: left;
  transition: color var(--duration-fast) var(--ease-default);
}

.mnav-btn:hover {
  color: #fff;
}

.mnav-chevron {
  flex-shrink: 0;
  opacity: 0.45;
  transition: transform var(--duration-normal) var(--ease-industrial),
              opacity var(--duration-fast) var(--ease-default);
}

.mnav-item.is-open .mnav-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.mnav-link {
  display: block;
  padding: 0.9rem 0;
  font-size: var(--text-md);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.mnav-link:hover {
  color: #fff;
}

.mnav-sub {
  list-style: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-default);
}

.mnav-sub li {
  border-top: 1px solid rgba(255,255,255,0.04);
}

.mnav-sub li a {
  display: block;
  padding: 0.6rem 0 0.6rem var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default),
              padding-left var(--duration-fast) var(--ease-default);
}

.mnav-sub li a:hover {
  color: #fff;
  padding-left: calc(var(--space-3) + 6px);
}

.mnav-sub__all a {
  color: var(--color-primary) !important;
  font-weight: var(--fw-medium);
}

.mobile-menu__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  margin-top: auto;
}

.mobile-menu__social {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.mobile-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: var(--transition-base);
}

.mobile-social-link--tg {
  background: rgba(36,161,222,0.10);
  color: #29B6F6;
  border: 1px solid rgba(36,161,222,0.18);
}

.mobile-social-link--tg:hover {
  background: rgba(36,161,222,0.18);
}

.mobile-social-link--wa {
  background: rgba(37,211,102,0.08);
  color: #4CAF50;
  border: 1px solid rgba(37,211,102,0.18);
}

.mobile-social-link--wa:hover {
  background: rgba(37,211,102,0.16);
}

/* ============================================================
   MODALS
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-default),
              visibility var(--duration-normal) var(--ease-default);
}

.modal.is-open {
  opacity: 1;
  visibility: visible;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.80);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl), var(--glow-card);
  padding: var(--space-8);
  transform: translateY(16px) scale(0.98);
  transition: transform var(--duration-normal) var(--ease-industrial);
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary-glow) transparent;
}

.modal.is-open .modal__dialog {
  transform: translateY(0) scale(1);
}

.modal__dialog--sm {
  max-width: 420px;
}

.modal__dialog--centered {
  text-align: center;
}

.modal__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-base);
  z-index: 1;
}

.modal__close:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border-color: var(--color-border-strong);
}

.modal__head {
  margin-bottom: var(--space-6);
}

.modal__badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-glow);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.modal__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-xl);
  background: var(--color-primary-subtle);
  border: 1px solid var(--color-primary-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 100;
  color: #fff;
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2);
  letter-spacing: var(--ls-tight);
}

.modal__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-label .required {
  color: var(--color-primary);
  margin-left: 2px;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: #fff;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  appearance: none;
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
  background: var(--color-bg-elevated);
}

.form-textarea {
  resize: vertical;
  min-height: 70px;
}

.form-select-wrap {
  position: relative;
}

.form-select {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: #fff;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}

.form-select option {
  background: var(--color-bg-surface);
}

.form-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.form-checkbox input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-raised);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 1px;
  transition: var(--transition-base);
  position: relative;
}

.form-checkbox input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.form-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #000;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.form-checkbox label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  cursor: pointer;
}

.form-checkbox label a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-note {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.form-note a {
  color: var(--color-primary);
  text-decoration: none;
}

.form-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) 0;
}

.btn-submit {
  position: relative;
}

.btn-loader {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.3);
  border-top-color: #000;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn-submit.is-loading .btn-text {
  opacity: 0;
}

.btn-submit.is-loading .btn-loader {
  display: block;
  position: absolute;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(46,204,113,0.10);
  border: 2px solid rgba(46,204,113,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2ECC71;
  margin: 0 auto var(--space-5);
  animation: successPop 0.5s var(--ease-bounce) both;
}

@keyframes successPop {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.success-contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  margin: var(--space-5) 0;
}

.success-contacts__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.success-contacts__phone {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  font-family: var(--font-ui);
  color: #fff;
  text-decoration: none;
}

.success-contacts__phone:hover {
  color: var(--color-primary);
}

.success-contacts__messengers {
  display: flex;
  gap: var(--space-3);
}

.success-messenger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: var(--transition-base);
}

.success-messenger--tg {
  background: rgba(36,161,222,0.12);
  color: #29B6F6;
  border: 1px solid rgba(36,161,222,0.25);
}

.success-messenger--wa {
  background: rgba(37,211,102,0.10);
  color: #4CAF50;
  border: 1px solid rgba(37,211,102,0.25);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .header-phone__content {
    display: none;
  }
  
  .header-cta {
    display: none;
  }
}

@media (max-width: 1023px) {
  .main-nav {
    display: none;
  }
  
  .header-search-btn {
    display: none;
  }
  
  .burger {
    display: flex;
  }
}

@media (min-width: 1024px) {
  .burger {
    display: none;
  }
}

@media (max-width: 767px) {
  :root {
    --header-height: 64px;
    --topbar-height: 0px;
  }
  
  .header-topbar {
    display: none;
  }
  
  .site-main {
    padding-top: var(--header-height);
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .modal__dialog {
    padding: var(--space-6);
    border-radius: var(--radius-xl);
  }
  
  .modal__title {
    font-size: var(--text-xl);
  }
}

@media (max-width: 479px) {
  .modal {
    padding: 0;
    align-items: flex-end;
  }
  
  .modal__dialog {
    max-height: 95vh;
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

















































/* ============================================================
   BLOCK-02-HERO — TakelazhGroup
   Full-viewport hero with background image, overlays, form, stats
   ============================================================ */

/* ──────────────────────────────────────────
   SECTION SHELL
────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ──────────────────────────────────────────
   BACKGROUND LAYERS
────────────────────────────────────────── */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  /* Лёгкий desaturate — картинка не перетягивает на себя всё внимание */
  filter: brightness(0.6) saturate(0.8);
  transition: filter 0.6s ease;
}

/* Многослойный overlay — тёмный градиент слева и снизу */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      105deg,
      rgba(8,8,8,0.92) 0%,
      rgba(8,8,8,0.75) 45%,
      rgba(8,8,8,0.25) 100%
    ),
    linear-gradient(
      to top,
      rgba(8,8,8,0.85) 0%,
      transparent 50%
    );
}

/* Оранжевые боке-пятна — ambient glow */
.hero__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.18;
}
.hero__glow--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #FF6B00 0%, transparent 70%);
  top: -100px;
  right: 15%;
  animation: heroGlowFloat 8s ease-in-out infinite alternate;
}
.hero__glow--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #FF8C33 0%, transparent 70%);
  bottom: 10%;
  right: 35%;
  opacity: 0.10;
  animation: heroGlowFloat 12s ease-in-out infinite alternate-reverse;
}

@keyframes heroGlowFloat {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -30px) scale(1.1); }
}

/* Noise texture overlay — убирает пластиковость */
.hero__noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
}

/* Вертикальные декоративные линии-сетки */
.hero__grid-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: space-evenly;
  pointer-events: none;
  opacity: 0.04;
}
.hero__grid-lines span {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.6) 70%, transparent 100%);
}

/* ──────────────────────────────────────────
   CONTAINER
────────────────────────────────────────── */
.hero__container {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* ──────────────────────────────────────────
   BODY LAYOUT — two columns
────────────────────────────────────────── */
.hero__body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  width: 100%;
}

/* ──────────────────────────────────────────
   LEFT COLUMN
────────────────────────────────────────── */
.hero__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 680px;
}

/* Бейдж */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-full);
  padding: 5px 14px;
  width: fit-content;
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
  animation: heroBadgePulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes heroBadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

/* Заголовок */
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.5vw, 4rem);
  font-weight: 100;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 0.06em;
  margin: 0;
}

.hero__title-line { color: var(--color-text-primary); }

.hero__title-line--accent {
  color: var(--color-primary);
  text-shadow: 0 0 40px rgba(255,107,0,0.4);
  position: relative;
  width: fit-content;
}
/* Подчёркивание-акцент */
.hero__title-line--accent::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
  border-radius: 2px;
}

/* Подзаголовок */
.hero__sub {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
  color: rgba(255,255,255,0.55);
  line-height: var(--lh-relaxed);
  max-width: 520px;
  margin: 0;
}

/* USP chips */
.hero__usp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero__usp-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
  padding: 5px 12px;
  white-space: nowrap;
  transition: var(--transition-color);
}
.hero__usp-item svg { color: var(--color-primary); flex-shrink: 0; }
.hero__usp-item:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.85); }

/* ──────────────────────────────────────────
   FORM WRAP
────────────────────────────────────────── */
.hero__form-wrap {
  background: rgba(22,22,22,0.75);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero__form-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.hero__form-label svg { flex-shrink: 0; }

.hero__form { display: flex; flex-direction: column; gap: var(--space-3); }

.hero__form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.hero__field { position: relative; }

.hero__field .sr-only {
	margin: 0 0 10px;
    display: block;
}

.hero__input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: #fff;
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-default),
    background var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default);
  -webkit-appearance: none;
  appearance: none;
}
.hero__input::placeholder { color: rgba(255,255,255,0.28); }
.hero__input:focus {
  border-color: var(--color-primary);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}

/* CTA-кнопка в форме */
.hero__btn {
  width: 100%;
  justify-content: center;
  padding: 5px;
  font-size: var(--text-sm);
  gap: var(--space-3);
}

.hero__btn-icon {
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-default);
}
.hero__btn:hover .hero__btn-icon { transform: translateX(3px); }

.hero__form-note {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.28);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}
.hero__form-note a { color: rgba(255,255,255,0.45); text-decoration: underline; text-underline-offset: 2px; }
.hero__form-note a:hover { color: rgba(255,255,255,0.7); }

/* Сообщение формы */
.hero__form-msg {
  font-size: var(--text-xs);
  text-align: center;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
  min-height: 0;
  overflow: hidden;
}
.hero__form-msg:not(:empty) { padding: var(--space-2) var(--space-3); margin-top: var(--space-1); }
.hero__form-msg--success { background: rgba(46,204,113,0.12); color: #2ECC71; border: 1px solid rgba(46,204,113,0.2); }
.hero__form-msg--error   { background: rgba(231,76,60,0.12);  color: #E74C3C;  border: 1px solid rgba(231,76,60,0.2); }

/* ──────────────────────────────────────────
   RIGHT COLUMN — Visual card
────────────────────────────────────────── */
.hero__right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__card {
  position: relative;
  width: 320px;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-6);
}

/* Рамка-интерфейс */
.hero__card-frame {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,107,0,0.25);
  border-radius: var(--radius-xl);
  background: rgba(255,107,0,0.03);
  overflow: hidden;
}

/* Угловые акценты */
.hero__card-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--color-primary);
  border-style: solid;
  opacity: 0.9;
}
.hero__card-corner--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.hero__card-corner--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 var(--radius-xl) 0 0; }
.hero__card-corner--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-xl); }
.hero__card-corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Scan line animation */
.hero__card-scan {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0.6;
  animation: heroCardScan 3s linear infinite;
}
@keyframes heroCardScan {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* Центральный счётчик внутри карточки */
.hero__card-stat {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: var(--space-2);
}
.hero__card-num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  text-shadow: 0 0 40px rgba(255,107,0,0.4);
}
.hero__card-unit {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  align-self: flex-start;
  margin-top: 4px;
}
.hero__card-desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  line-height: 1.35;
  margin-left: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
}

/* Бейдж "лицензии" */
.hero__card-badge {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-full);
  padding: 5px 12px;
}
.hero__card-badge svg { color: #2ECC71; flex-shrink: 0; }

/* ──────────────────────────────────────────
   STATS BAR (bottom)
────────────────────────────────────────── */
.hero__stats {
  position: relative;
  z-index: 2;
  background: rgba(10,10,10,0.80);
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: var(--space-4) 0;
  flex-shrink: 0;
}

.hero__stats-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.hero__stat {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: var(--space-3) clamp(var(--space-5), 3vw, var(--space-10));
  white-space: nowrap;
}

.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color var(--duration-fast) var(--ease-default);
}

.hero__stat-unit {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  align-self: flex-start;
  margin-top: 2px;
}

.hero__stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  align-self: flex-end;
  margin-left: 4px;
  font-weight: var(--fw-medium);
}

.hero__stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* ──────────────────────────────────────────
   SCROLL INDICATOR
────────────────────────────────────────── */
.hero__scroll {
  position: absolute;
  bottom: 80px; /* над stats bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.3;
  animation: heroScrollFade 2s ease-in-out 2s both;
}

@keyframes heroScrollFade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  100% { opacity: 0.3; transform: translateX(-50%) translateY(0); }
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,107,0,0.8);
  animation: heroScrollDrop 2s ease-in-out infinite;
}
@keyframes heroScrollDrop {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* ──────────────────────────────────────────
   ENTRY ANIMATIONS
   Initial hidden state is set by JS only (js-animate-ready class on <html>).
   Without JS — elements are always visible.
────────────────────────────────────────── */
html.js-animate-ready [data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s var(--ease-default),
    transform 0.65s var(--ease-industrial);
}

html.js-animate-ready [data-animate="fade-left"] {
  transform: translateX(32px);
}

html.js-animate-ready [data-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ──────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────── */

/* ≤1199px — скрываем правую карточку */
@media (max-width: 1199px) {
  .hero__body {
    grid-template-columns: 1fr;
  }
  .hero__right {
    display: none;
  }
  .hero__left {
    max-width: 100%;
  }
}

/* ≤1023px */
@media (max-width: 1023px) {
  .hero__glow--1 { opacity: 0.12; }
  .hero__glow--2 { opacity: 0.07; }
  .hero__scroll  { display: none; }
}

/* ≤767px — мобильный */
@media (max-width: 767px) {
  .hero {
    min-height: 100vh;
  }
  .hero__container {
    padding-top: clamp(5rem, 10vw, 7rem);
    padding-bottom: var(--space-4);
    align-items: flex-start;
  }
  .hero__left { gap: var(--space-4); }

  .hero__title {
    font-size: clamp(2.5rem, 10vw, 3.8rem);
  }

  .hero__form-fields {
    grid-template-columns: 1fr;
  }

  .hero__form-wrap {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .hero__stats { padding: var(--space-3) 0; }
  .hero__stats-grid { gap: 0; }
  .hero__stat {
    padding: var(--space-2) var(--space-3);
  }
  .hero__stat-divider { height: 28px; }

  /* На совсем маленьких — 2 колонки в stats */
  .hero__stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .hero__stat-divider { display: none; }
  .hero__stat {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: var(--space-3) var(--space-4);
  }
  .hero__stat:nth-child(odd)  { border-right: 1px solid rgba(255,255,255,0.06); }
}

/* ≤479px */
@media (max-width: 479px) {
  .hero__title { font-size: clamp(2.2rem, 11vw, 3rem); }
  .hero__usp-item span { font-size: 0.68rem; }
  .hero__badge { font-size: 0.65rem; }
}




































































/* ============================================================
   BLOCK-03: MARQUEE RUNNING LINE
   BLOCK-04: SERVICES GRID
   TakelazhGroup
   ============================================================ */

/* ──────────────────────────────────────────
   MARQUEE
────────────────────────────────────────── */

.marquee {
  width: 100%;
  background: var(--color-primary);
  overflow: hidden;
  position: relative;
  z-index: 2;
  /* Тонкие рамки сверху и снизу */
  border-top:    1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(0,0,0,0.20);
}

.marquee__track {
  display: flex;
  width: 100%;
  overflow: hidden;
  /* Маски по краям для плавного fade-in/out */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

.marquee__inner {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  animation: marqueeScroll 32s linear infinite;
  will-change: transform;
}

.marquee__inner--clone {
  animation-delay: -16s;
}

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Пауза при hover */
.marquee:hover .marquee__inner {
  animation-play-state: paused;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.7rem 1.5rem;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: #000;
  white-space: nowrap;
  /* Разделитель между элементами */
  border-right: 1px solid rgba(0,0,0,0.12);
}

.marquee__dot {
  color: rgba(0,0,0,0.35);
  flex-shrink: 0;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .marquee__inner {
    animation: none;
  }
  .marquee__track {
    flex-wrap: wrap;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .marquee__inner--clone {
    display: none;
  }
  .marquee__item {
    border-right: none;
    padding: 0.5rem 1rem;
  }
}

/* ──────────────────────────────────────────
   SERVICES SECTION SHELL
────────────────────────────────────────── */

.services {
  position: relative;
  background: var(--color-bg-base);
  padding: 40px 0 40px;
  overflow: hidden;
}

/* Ambient glow blobs */
.services__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
  opacity: 0.09;
}
.services__glow--1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, #FF6B00 0%, transparent 70%);
  top: -150px;
  right: -100px;
}
.services__glow--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #FF8C33 0%, transparent 70%);
  bottom: 0;
  left: -80px;
  opacity: 0.06;
}

/* ──────────────────────────────────────────
   SECTION HEADER
────────────────────────────────────────── */

.services__head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 580px;
}

.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  position: relative;
  padding-left: 1.1rem;
}
.section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-primary);
}

.services__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 100;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
  /* Оранжевая линия-подчёркивание */
  position: relative;
  width: fit-content;
}
.services__title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.services__sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-5) 0 0;
}

/* ──────────────────────────────────────────
   CARDS GRID
────────────────────────────────────────── */

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  position: relative;
  z-index: 1;
}

/* ──────────────────────────────────────────
   SERVICE CARD
────────────────────────────────────────── */

.svc-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-industrial),
    box-shadow var(--duration-normal) var(--ease-default);
  cursor: default;
}

/* Hover state */
.svc-card:hover {
  border-color: rgba(255,107,0,0.45);
  transform: translateY(-4px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,107,0,0.2),
    0 0 40px rgba(255,107,0,0.06);
}

/* Featured / priority cards — чуть ярче рамка */
.svc-card--featured {
  border-color: rgba(255,107,0,0.20);
}
.svc-card--featured:hover {
  border-color: rgba(255,107,0,0.60);
}

/* Animated glow border (pseudo-element) */
.svc-card__border {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: transparent;
  border: 1px solid transparent;
  transition: border-color var(--duration-normal) var(--ease-default);
}

/* Corner accent top-left */
.svc-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 32px;
  height: 32px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--radius-xl) 0 0 0;
  transition: border-color var(--duration-normal) var(--ease-default);
}
.svc-card:hover::before {
  border-top-color: var(--color-primary);
  border-left-color: var(--color-primary);
}

/* Corner accent bottom-right */
.svc-card::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 32px;
  height: 32px;
  border-bottom: 2px solid transparent;
  border-right:  2px solid transparent;
  border-radius: 0 0 var(--radius-xl) 0;
  transition: border-color var(--duration-normal) var(--ease-default);
}
.svc-card:hover::after {
  border-bottom-color: var(--color-primary);
  border-right-color:  var(--color-primary);
}

/* Icon container */
.svc-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,107,0,0.07);
  border: 1px solid rgba(255,107,0,0.15);
  border-radius: var(--radius-lg);
  color: var(--color-primary);
  flex-shrink: 0;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default);
}
.svc-card:hover .svc-card__icon {
  background: rgba(255,107,0,0.13);
  border-color: rgba(255,107,0,0.35);
  box-shadow: 0 0 16px rgba(255,107,0,0.15);
}

/* Card body */
.svc-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.svc-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  transition: color var(--duration-fast) var(--ease-default);
  margin: 0;
}
.svc-card:hover .svc-card__title { color: #fff; }

.svc-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Read more link */
.svc-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  text-decoration: none;
  margin-top: auto;
  transition:
    color var(--duration-fast) var(--ease-default),
    gap var(--duration-fast) var(--ease-default);
}
.svc-card__link svg {
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-default);
}
.svc-card:hover .svc-card__link {
  color: var(--color-primary);
  gap: 9px;
}
.svc-card:hover .svc-card__link svg {
  transform: translateX(3px);
}

/* ──────────────────────────────────────────
   SECTION FOOTER
────────────────────────────────────────── */

.services__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.services__footer-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

.services__footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Entry animations для services управляются через block-02-hero.css
   (html.js-animate-ready [data-animate]) и hero.js observer */

/* ──────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────── */

/* ≤1100px — 2 колонки */
@media (max-width: 1100px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ≤767px — мобильный */
@media (max-width: 767px) {
  .services__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .svc-card {
    padding: var(--space-5) var(--space-4);
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* На мобиле — горизонтальная карточка */
  .svc-card__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .svc-card__body { gap: var(--space-2); }

  .svc-card__title { font-size: var(--text-base); }

  .services__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
  .services__footer-actions {
    width: 100%;
    flex-direction: column;
  }
  .services__footer-actions .btn { width: 100%; justify-content: center; }
}

/* ≤479px */
@media (max-width: 479px) {
  .svc-card {
    flex-direction: column;
  }
  .marquee__item {
    font-size: 0.72rem;
    padding: 0.65rem 1.1rem;
  }
}



















































































/* ============================================================
   BLOCK-05: CALCULATOR
   BLOCK-06: ABOUT
   TakelazhGroup
   ============================================================ */

/* ──────────────────────────────────────────
   SHARED: card-corner mixin via custom props
   Same pattern as .svc-card in block-03-04.css
────────────────────────────────────────── */

/* Reusable corner-border effect applied to
   .benefit-item and .about__photo-frame */
.has-corners {
  position: relative;
}
.has-corners::before,
.has-corners::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 28px;
  border-color: transparent;
  border-style: solid;
  transition: border-color var(--duration-normal) var(--ease-default);
  pointer-events: none;
  z-index: 2;
}
/* TL corner */
.has-corners::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
  border-radius: var(--radius-xl) 0 0 0;
}
/* BR corner */
.has-corners::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 var(--radius-xl) 0;
}
.has-corners:hover::before,
.has-corners:hover::after {
  border-color: var(--color-primary);
}

/* ──────────────────────────────────────────
   CALCULATOR SECTION
────────────────────────────────────────── */

.calc {
  position: relative;
  padding: 40px 0 40px;
  overflow: hidden;
}

.calc__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.calc__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.calc__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, rgb(8 8 8 / 58%) 0%, rgba(13, 13, 13, 0.88) 55%, rgb(8 8 8 / 19%) 100%);
}

/* Three-column layout */
.calc__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: clamp(2rem, 3.5vw, 4rem);
  align-items: start;
}

/* ── Left column ── */
.calc__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-4);
}

.calc__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0;
  position: relative;
  width: fit-content;
}
.calc__title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.calc__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-3) 0 0;
}

.calc__promises {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
}
.calc__promises li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.calc__promises li svg {
  color: var(--color-primary);
  flex-shrink: 0;
  background: rgba(255,107,0,0.10);
  border-radius: var(--radius-full);
  padding: 2px;
  box-sizing: content-box;
}

/* ── Center: form wrap ── */
.calc__form-wrap {
  background: rgba(18,18,18,0.90);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,107,0,0.05);
}

/* Step indicator */
.calc__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.calc__step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.calc__step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.35);
  transition: var(--transition-base);
}
.calc__step-label {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.25);
  transition: color var(--duration-fast) var(--ease-default);
}
.calc__step-item.is-active .calc__step-num {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #000;
  box-shadow: 0 0 16px rgba(255,107,0,0.35);
}
.calc__step-item.is-active .calc__step-label { color: var(--color-primary); }
.calc__step-item.is-done .calc__step-num {
  background: rgba(255,107,0,0.15);
  border-color: rgba(255,107,0,0.4);
  color: var(--color-primary);
}
.calc__step-item.is-done .calc__step-label { color: rgba(255,255,255,0.45); }

.calc__step-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.10);
  min-width: 40px;
  margin-bottom: 18px;
  transition: background var(--duration-normal) var(--ease-default);
}
.calc__step-line.is-done { background: rgba(255,107,0,0.35); }

/* Panes */
.calc__pane { display: none; }
.calc__pane.is-active {
  display: block;
  animation: calcPaneIn 0.3s var(--ease-industrial) both;
}
@keyframes calcPaneIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.calc__pane-title {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.80);
  margin: 0 0 var(--space-5);
}

/* ── Cargo tiles — fixed equal size ── */
.cargo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.cargo-tile { cursor: pointer; display: block; }
.cargo-tile__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.cargo-tile__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Fixed height — all tiles identical */
  height: 96px;
  padding: var(--space-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  transition: var(--transition-base);
  text-align: center;
}
.cargo-tile__inner:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
}
.cargo-tile__input:checked + .cargo-tile__inner {
  background: rgba(255,107,0,0.10);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}
.cargo-tile__icon {
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
  line-height: 0;
  transition: color var(--duration-fast) var(--ease-default);
}
.cargo-tile__input:checked + .cargo-tile__inner .cargo-tile__icon { color: var(--color-primary); }
.cargo-tile__label {
  font-size: 0.70rem;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.50);
  line-height: 1.3;
  transition: color var(--duration-fast) var(--ease-default);
}
.cargo-tile__input:checked + .cargo-tile__inner .cargo-tile__label { color: rgba(255,255,255,0.90); }

/* ── Fields grid ── */
.calc__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.calc__field { display: flex; flex-direction: column; gap: var(--space-2); }
.calc__field--full { grid-column: 1 / -1; }

.calc__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.calc__label .required { color: var(--color-primary); margin-left: 2px; }
.calc__optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.25); font-size: 0.7rem; }

.calc__input-wrap { position: relative; }
.calc__input-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  pointer-events: none;
}
.calc__input-wrap .calc__input { padding-right: 2.5rem; }

.calc__select-wrap { position: relative; }
.calc__select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.calc__select-wrap .calc__input { padding-right: 2.2rem; }

.calc__input {
  width: 100%;
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-default),
    background var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default);
  appearance: none;
  -webkit-appearance: none;
}
.calc__input::placeholder { color: rgba(255,255,255,0.22); }
.calc__input:focus {
  border-color: var(--color-primary);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.10);
}
.calc__input.is-invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(231,76,60,0.12);
}
.calc__textarea { resize: vertical; min-height: 80px; }

/* Live price preview bar (step 2) */
.calc__price-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,107,0,0.06);
  border: 1px solid rgba(255,107,0,0.18);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  transition: var(--transition-base);
}
.calc__price-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}
.calc__price-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Result card (step 3) */
.calc__result {
  background: rgba(255,107,0,0.05);
  border: 1px solid rgba(255,107,0,0.22);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
  position: relative;
  overflow: hidden;
}
.calc__result::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
}

.calc__result-badge {
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.calc__result-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.calc__result-from {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.40);
}
.calc__result-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.calc__result-sep {
  font-size: 1.5rem;
  color: rgba(255,255,255,0.25);
}
.calc__result-currency {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
}

.calc__result-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
  margin: 0 0 var(--space-4);
}

.calc__result-breakdown {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: var(--space-3);
  margin: 0;
}
.calc__result-breakdown li {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.40);
  line-height: 1.4;
}
.calc__result-breakdown li span:last-child {
  color: rgba(255,255,255,0.60);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  margin-left: var(--space-4);
}

/* Contact block inside step 3 */
.calc__contact-block { margin-bottom: var(--space-4); }
.calc__contact-title {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--space-4);
  line-height: var(--lh-relaxed);
}

/* Nav */
.calc__nav {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  align-items: center;
}
.calc__nav--result .calc__btn-submit {
  min-width: 180px;
}
.calc__nav .btn-secondary { padding: 0.68rem 1.2rem; font-size: var(--text-xs); }

.calc__form-msg {
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-default);
  min-height: 0;
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.calc__form-msg:not(:empty) { padding: var(--space-2) var(--space-3); }
.calc__form-msg--success { background: rgba(46,204,113,0.10); color: var(--color-success); border: 1px solid rgba(46,204,113,0.20); }
.calc__form-msg--error   { background: rgba(231,76,60,0.10);  color: var(--color-error);   border: 1px solid rgba(231,76,60,0.20); }

.calc__note {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.25);
  text-align: right;
  margin: var(--space-3) 0 0;
  line-height: 1.5;
}
.calc__note a { color: rgba(255,255,255,0.38); text-decoration: underline; text-underline-offset: 2px; }
.calc__note a:hover { color: rgba(255,255,255,0.6); }

/* ── Right: benefit items with corners + tilt ── */
.calc__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.benefit-item {
  /* Same structure as svc-card */
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-industrial),
    box-shadow var(--duration-normal) var(--ease-default);
}
.benefit-item:hover {
  border-color: rgba(255,107,0,0.40);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,107,0,0.12);
}

/* TL corner */
.benefit-item::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 20px; height: 20px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--radius-lg) 0 0 0;
  transition: border-color var(--duration-normal) var(--ease-default);
  pointer-events: none;
}
/* BR corner */
.benefit-item::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 20px; height: 20px;
  border-bottom: 2px solid transparent;
  border-right:  2px solid transparent;
  border-radius: 0 0 var(--radius-lg) 0;
  transition: border-color var(--duration-normal) var(--ease-default);
  pointer-events: none;
}
.benefit-item:hover::before { border-top-color: var(--color-primary); border-left-color: var(--color-primary); }
.benefit-item:hover::after  { border-bottom-color: var(--color-primary); border-right-color:  var(--color-primary); }

.benefit-item__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,107,0,0.08);
  border: 1px solid rgba(255,107,0,0.15);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  transition: var(--transition-base);
}
.benefit-item:hover .benefit-item__icon {
  background: rgba(255,107,0,0.14);
  border-color: rgba(255,107,0,0.30);
  box-shadow: 0 0 12px rgba(255,107,0,0.12);
}
.benefit-item__text { display: flex; flex-direction: column; gap: 3px; }
.benefit-item__text strong {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.85);
  line-height: 1.3;
}
.benefit-item__text span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */

.about {
  position: relative;
  background: var(--color-bg-base);
  padding: 40px 0 40px;
  overflow: hidden;
}

.about__glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
  opacity: 0.07;
}
.about__glow--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #FF6B00 0%, transparent 70%);
  top: -100px; left: -150px;
}
.about__glow--2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #FF8C33 0%, transparent 70%);
  bottom: -50px; right: -80px;
  opacity: 0.05;
}

.about__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

/* ── Photo frame — same corner + tilt pattern as svc-card ── */
.about__photo-col { position: relative; }

.about__photo-frame {
  position: relative;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(255,107,0,0.18);
  box-shadow:
    0 0 0 1px rgba(255,107,0,0.07),
    0 32px 80px rgba(0,0,0,0.55);
  aspect-ratio: 5 / 6;
  overflow: hidden;
  /* Tilt transition */
  transition:
    border-color var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-industrial),
    box-shadow var(--duration-normal) var(--ease-default);
}
.about__photo-frame:hover {
  border-color: rgba(255,107,0,0.45);
  box-shadow:
    0 0 0 1px rgba(255,107,0,0.20),
    0 20px 60px rgba(0,0,0,0.6),
    0 0 50px rgba(255,107,0,0.07);
}

/* Corner accents (4 corners — same as svc-card) */
.about__frame-corner {
  position: absolute;
  width: 28px; height: 28px;
  border-color: var(--color-primary);
  border-style: solid;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
  pointer-events: none;
}
.about__photo-frame:hover .about__frame-corner { opacity: 0.9; }
.about__frame-corner--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-2xl) 0 0 0; }
.about__frame-corner--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 var(--radius-2xl) 0 0; }
.about__frame-corner--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-2xl); }
.about__frame-corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-2xl) 0; }

/* Photo inner + image */
.about__photo-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.about__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-default);
  /* Colour-grade: darken + desaturate slightly to blend with dark theme */
  filter: brightness(0.82) saturate(0.75) contrast(1.05);
}
.about__photo-frame:hover .about__photo { transform: scale(1.03); }

/* Photo overlay — vignette + colour tint */
.about__photo-overlay {
  position: absolute;
  inset: 0;
  background:
    /* Vignette */
    radial-gradient(
      ellipse at center,
      transparent 40%,
      rgba(0,0,0,0.55) 100%
    ),
    /* Bottom fade to site bg */
    linear-gradient(
      to bottom,
      transparent 50%,
      rgba(8,8,8,0.60) 100%
    ),
    /* Subtle warm tint to match brand */
    linear-gradient(
      135deg,
      rgba(255,107,0,0.04) 0%,
      transparent 60%
    );
  pointer-events: none;
  z-index: 1;
}

/* Fallback gradient when no image loaded */
.about__photo-inner:not(:has(img[src])) {
  background: linear-gradient(
    135deg,
    rgba(30,20,10,0.95) 0%,
    rgba(20,15,8,0.98)  100%
  );
}
/* Manual fallback class for JS */
.about__photo-inner.no-image {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,107,0,0.03) 0px,
      rgba(255,107,0,0.03) 1px,
      transparent 1px,
      transparent 12px
    ),
    linear-gradient(135deg, #111 0%, #0d0d0d 100%);
  min-height: 400px;
}

/* Badge over photo */
.about__photo-badge {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  z-index: 2;
  background: rgba(10,10,10,0.82);
  border: 1px solid rgba(255,107,0,0.30);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.about__photo-badge-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.about__photo-badge-txt {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-medium);
}

/* ── Content ── */
.about__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 100;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: fit-content;
}
.about__title::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0;
  width: 52px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.about__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.about__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-5) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.about__stat {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: var(--space-2) clamp(var(--space-4), 2.5vw, var(--space-6));
  white-space: nowrap;
}
.about__stat:first-child { padding-left: 0; }

.about__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
}
.about__stat-unit {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  align-self: flex-start;
  margin-top: 3px;
}
.about__stat-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: flex-end;
  margin-left: 4px;
  font-weight: var(--fw-medium);
}
.about__stat-divider {
  width: 1px; height: 32px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.about__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {
  .calc__layout { grid-template-columns: 1fr 1fr; }
  .calc__head {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-8);
    padding-top: 0;
  }
  .calc__promises { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .calc__benefits { grid-column: 2; }
}

@media (max-width: 1023px) {
  .calc__layout { grid-template-columns: 1fr; }
  .calc__head { grid-template-columns: 1fr; }
  .calc__promises { grid-column: 1; grid-row: auto; }
  .calc__benefits { display: none; }

  .about__layout { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .about__photo-frame { aspect-ratio: 16 / 9; max-height: 380px; }
}

@media (max-width: 767px) {
  .cargo-grid { grid-template-columns: repeat(2, 1fr); }
  .cargo-tile__inner { height: 88px; }

  .calc__fields { grid-template-columns: 1fr; }
  .calc__field--full { grid-column: 1; }
  .calc__nav { flex-direction: column-reverse; }
  .calc__nav .btn { width: 100%; justify-content: center; }
  .calc__form-wrap { padding: var(--space-4); border-radius: var(--radius-xl); }
  .calc__result { padding: var(--space-4); }

  .about__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .about__stat { padding: var(--space-3) var(--space-2); border-bottom: 1px solid rgba(255,255,255,0.06); }
  .about__stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.06); }
  .about__stat:first-child { padding-left: var(--space-2); }
  .about__stat-divider { display: none; }
  .about__actions { flex-direction: column; }
  .about__actions .btn { width: 100%; justify-content: center; }
}

@media (max-width: 479px) {
  .cargo-grid { grid-template-columns: repeat(3, 1fr); }
  .cargo-tile__inner { height: 80px; padding: var(--space-2); }
  .cargo-tile__label { font-size: 0.62rem; }
}



















































/* ============================================================
   BLOCK-07: HOW WE WORK
   BLOCK-08: FLEET SLIDER
   TakelazhGroup
   ============================================================ */

/* ══════════════════════════════════════════
   BLOCK-07: HOW WE WORK
══════════════════════════════════════════ */

.hww {
  position: relative;
  padding: 40px 0 40px;
  overflow: hidden;
}

/* Metal texture bg (same approach as .calc) */
.hww__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hww__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hww__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, rgb(8 8 8 / 58%) 0%, rgba(13, 13, 13, 0.88) 55%, rgb(8 8 8 / 19%) 100%);
}

/* Hex / circuit-board pattern overlay */
.hww__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    radial-gradient(circle, rgba(255,107,0,0.8) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px);
  background-size: 48px 48px, 24px 24px;
  background-position: 0 0, 12px 12px;
}

/* ── Head ── */
.hww__head {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hww__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: fit-content;
}
.hww__title::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0;
  width: 52px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.hww__sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: var(--space-5) 0 0;
  line-height: var(--lh-relaxed);
}

/* ── Timeline wrapper ── */
.hww__timeline {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ── Icon rail (top row) ── */
.hww__rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.hww__rail-node {
  display: flex;
  align-items: center;
  flex: 1;
}
.hww__rail-node:last-child { flex: none; }

/* Icon ring */
.hww__icon-ring {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,107,0,0.25);
  background: rgba(255,107,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.40);
  position: relative;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    background var(--duration-normal) var(--ease-default),
    color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}
/* Active / hover state (driven by JS .is-active) */
.hww__rail-node.is-active .hww__icon-ring,
.hww__rail-node:hover .hww__icon-ring {
  border-color: var(--color-primary);
  background: rgba(255,107,0,0.14);
  color: var(--color-primary);
  box-shadow: 0 0 20px rgba(255,107,0,0.22);
}
/* Step number dot */
.hww__icon-ring::before {
  content: attr(data-num);
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: var(--color-primary);
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 800;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Connector arrow */
.hww__connector {
  flex: 1;
  padding: 0 4px;
  display: flex;
  align-items: center;
  color: rgba(255,107,0,0.30);
  min-width: 0;
}
.hww__connector-arrow {
  width: 100%;
  height: 16px;
  display: block;
  transition: color var(--duration-normal) var(--ease-default);
}
.hww__rail-node.is-active + .hww__connector + .hww__rail-node .hww__connector-arrow,
.hww__connector:hover .hww__connector-arrow {
  color: rgba(255,107,0,0.60);
}

/* ── Step cards grid (bottom row) ── */
.hww__cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}

.hww__card {
  position: relative;
  background: rgba(18,18,18,0.80);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  backdrop-filter: blur(8px);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-industrial),
    box-shadow var(--duration-normal) var(--ease-default);
}
.hww__card:hover {
  border-color: rgba(255,107,0,0.35);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,107,0,0.12);
}
/* TL corner */
.hww__card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 16px; height: 16px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-radius: var(--radius-lg) 0 0 0;
  transition: border-color var(--duration-normal) var(--ease-default);
}
/* BR corner */
.hww__card::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 16px; height: 16px;
  border-bottom: 2px solid transparent;
  border-right:  2px solid transparent;
  border-radius: 0 0 var(--radius-lg) 0;
  transition: border-color var(--duration-normal) var(--ease-default);
}
.hww__card:hover::before { border-top-color: var(--color-primary); border-left-color: var(--color-primary); }
.hww__card:hover::after  { border-bottom-color: var(--color-primary); border-right-color: var(--color-primary); }

/* Top connector dot */
.hww__card-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
  opacity: 0.70;
}
.hww__card-title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.88);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-2);
}
.hww__card-desc {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── CTA ── */
.hww__cta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.hww__cta-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.30);
  margin: 0;
}

/* ══════════════════════════════════════════
   BLOCK-08: FLEET SLIDER
══════════════════════════════════════════ */

.fleet {
  position: relative;
  background: var(--color-bg-base);
  padding: 40px 0 40px;
  overflow: hidden;
}

/* ── Head row ── */
.fleet__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fleet__head-text { flex: 1; }

.fleet__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: fit-content;
}
.fleet__title::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0;
  width: 52px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.fleet__sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin: var(--space-5) 0 0;
  line-height: var(--lh-relaxed);
}

/* ── Controls ── */
.fleet__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.fleet__btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  flex-shrink: 0;
}
.fleet__btn:hover:not(:disabled) {
  background: rgba(255,107,0,0.12);
  border-color: rgba(255,107,0,0.40);
  color: var(--color-primary);
}
.fleet__btn:disabled {
  opacity: 0.25;
  cursor: default;
}

.fleet__dots {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.fleet__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  cursor: pointer;
  transition: var(--transition-base);
  padding: 0;
}
.fleet__dot.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(255,107,0,0.40);
  transform: scale(1.3);
}

/* ── Slider wrapper ── */
.fleet__slider-wrap {
  overflow: hidden;
  border-radius: var(--radius-xl);
  /* Fade mask at edges */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 3%,
    black 97%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 3%,
    black 97%,
    transparent 100%
  );
}

.fleet__track {
  display: flex;
  gap: var(--space-4);
  transition: transform 0.45s var(--ease-industrial);
  will-change: transform;
  /* Cards visible count is driven by JS */
}

/* ── Fleet card ── */
.fleet__card {
  position: relative;
  flex-shrink: 0;
  /* Width set by JS based on visible count */
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-industrial),
    box-shadow var(--duration-normal) var(--ease-default);
}
.fleet__card:hover {
  border-color: rgba(255,107,0,0.50);
  transform: translateY(-4px);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,107,0,0.18),
    0 0 40px rgba(255,107,0,0.06);
}

/* Capacity badge */
.fleet__card-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  background: var(--color-primary);
  color: #000;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.03em;
  box-shadow: 0 2px 12px rgba(255,107,0,0.35);
}

/* Corner accents */
.fleet__corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--color-primary);
  border-style: solid;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
  pointer-events: none;
}
.fleet__card:hover .fleet__corner { opacity: 0.85; }
.fleet__corner--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.fleet__corner--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 var(--radius-xl) 0 0; }
.fleet__corner--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-xl); }
.fleet__corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Image */
.fleet__card-img-wrap {
  position: relative;
  aspect-ratio: 9 / 10;
  overflow: hidden;
  background: rgba(20,20,20,1);
}
.fleet__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-default);
  /* Colour-grade to match dark theme */
  filter: brightness(0.88) saturate(0.80) contrast(1.05);
}
.fleet__card:hover .fleet__card-img { transform: scale(1.04); }

.fleet__card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(10,10,10,0.65) 100%
  );
  pointer-events: none;
}

/* Placeholder when image missing */
.fleet__card-img-wrap:not(:has(img[src])),
.fleet__card-img-wrap.no-image {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,107,0,0.025) 0px,
      rgba(255,107,0,0.025) 1px,
      transparent 1px,
      transparent 14px
    ),
    rgba(15,15,15,1);
}

/* Card body */
.fleet__card-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.fleet__card-name {
  font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  margin: 0;
}

.fleet__card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Specs table */
.fleet__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.fleet__spec-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: rgba(15,15,15,1);
}
.fleet__spec-key {
  font-size: 0.55rem;
  color: rgba(255,255,255,0.28);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: var(--fw-medium);
}
.fleet__spec-val {
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.80);
}

.fleet__card-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* How We Work */
@media (max-width: 1199px) {
  /* 7 cols → 4 cols with scroll */
  .hww__cards {
    grid-template-columns: repeat(4, 1fr);
  }
  .hww__rail { display: none; }
}

@media (max-width: 767px) {
  .hww__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .hww__card { padding: var(--space-3); }
  .hww__card-desc { display: none; }
}

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

/* Fleet */
@media (max-width: 767px) {
  .fleet__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
  .fleet__controls { align-self: flex-start; }
}






























































/* ============================================================
   BLOCK-09: TYPES OF CARGO
   BLOCK-10: PRICING FACTORS
   TakelazhGroup
   ============================================================ */

/* ══════════════════════════════════════════
   BLOCK-09: CARGO TYPES
══════════════════════════════════════════ */

.cargo {
  position: relative;
  padding: 40px 0 40px;
  overflow: hidden;
}

/* Metal texture bg */
.cargo__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cargo__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.cargo__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(150deg, rgb(8 8 8 / 58%) 0%, rgba(13, 13, 13, 0.88) 55%, rgb(8 8 8 / 19%) 100%);
}

/* Dot matrix pattern */
.cargo__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.030;
  background-image:
    radial-gradient(circle, rgba(255,107,0,0.9) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Two-column layout: head left, grid right ── */
.cargo__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: start;
}

.cargo__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: calc(var(--space-8) + 80px); /* below fixed header */
}

.cargo__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: fit-content;
}
.cargo__title::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0;
  width: 48px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.cargo__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-3) 0 0;
}

/* ── Cargo grid ── */
.cargo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-3);
}

/* ── Featured cards (large, with photo bg) ── */
.cargo-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,107,0,0.18);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-industrial),
    box-shadow var(--duration-normal) var(--ease-default);
}
.cargo-card:hover {
  border-color: rgba(255,107,0,0.50);
  transform: translateY(-4px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,107,0,0.15),
    0 0 40px rgba(255,107,0,0.06);
}

/* TL + BR corners */
.cargo-card__corner {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--color-primary);
  border-style: solid;
  z-index: 4;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
  pointer-events: none;
}
.cargo-card:hover .cargo-card__corner { opacity: 0.9; }
.cargo-card__corner--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.cargo-card__corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Featured card spans 2 columns */
.cargo-card--feat-1 {
  grid-column: span 2;
  grid-row: 1;
  min-height: 220px;
}
.cargo-card--feat-2 {
  grid-column: span 2;
  grid-row: 1;
  min-height: 220px;
}

/* Photo background */
.cargo-card__bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cargo-card__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.45) saturate(0.60) contrast(1.05);
  transition: transform var(--duration-slow) var(--ease-default),
              filter var(--duration-normal) var(--ease-default);
}
.cargo-card:hover .cargo-card__bg-img {
  transform: scale(1.04);
  filter: brightness(0.55) saturate(0.70) contrast(1.05);
}
.cargo-card__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      135deg,
      rgba(8,8,8,0.70) 0%,
      rgba(0,0,0,0.30) 60%,
      rgba(255,107,0,0.08) 100%
    ),
    linear-gradient(
      to top,
      rgba(0,0,0,0.80) 0%,
      transparent 60%
    );
}

/* Featured card inner content */
.cargo-card__inner {
  position: relative;
  z-index: 2;
  padding: var(--space-5) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.cargo-card--featured .cargo-card__icon {
  width: 52px;
  height: 52px;
  background: rgba(255,107,0,0.12);
  border: 1px solid rgba(255,107,0,0.25);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}
.cargo-card--featured .cargo-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.60);
}
.cargo-card--featured .cargo-card__desc {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  margin: 0;
  line-height: var(--lh-relaxed);
}

/* ── Small cargo cards (bottom 2 rows) ── */
.cargo-card--small {
  grid-column: span 1;
  background: rgba(16,16,16,0.85);
  backdrop-filter: blur(8px);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cargo-card--small .cargo-card__icon {
  width: 40px;
  height: 40px;
  background: rgba(255,107,0,0.08);
  border: 1px solid rgba(255,107,0,0.15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: var(--transition-base);
}
.cargo-card--small:hover .cargo-card__icon {
  background: rgba(255,107,0,0.14);
  border-color: rgba(255,107,0,0.30);
}
.cargo-card--small .cargo-card__body { flex: 1; }
.cargo-card--small .cargo-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.85);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.cargo-card--small .cargo-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Capacity badge */
.cargo-card__badge {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  background: var(--color-primary);
  color: #000;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(255,107,0,0.35);
}

/* ══════════════════════════════════════════
   BLOCK-10: PRICING FACTORS
══════════════════════════════════════════ */

.pricing {
  position: relative;
  background: var(--color-bg-base);
  padding: 40px 0 40px;
  overflow: hidden;
}

/* Ambient glow */
.pricing::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,107,0,0.07) 0%, transparent 70%);
  border-radius: 50%;
  top: -100px; right: -100px;
  pointer-events: none;
  filter: blur(80px);
}
.pricing::after {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(255,107,0,0.05) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -80px; left: -80px;
  pointer-events: none;
  filter: blur(70px);
}

/* Two-column layout */
.pricing__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}

/* ── Left: factor list ── */
.pricing__factors {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pricing__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: fit-content;
}
.pricing__title::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0;
  width: 48px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.pricing__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
  line-height: var(--lh-relaxed);
}

/* Factor list */
.factor-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--space-2) 0 0;
}

.factor-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background var(--duration-fast) var(--ease-default);
}
.factor-item:first-child { padding-top: 0; }
.factor-item:last-child { border-bottom: none; }
.factor-item:hover { background: rgba(255,107,0,0.02); }

.factor-item__num {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,107,0,0.30);
  background: rgba(255,107,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.02em;
  transition: var(--transition-base);
}
.factor-item:hover .factor-item__num {
  background: rgba(255,107,0,0.14);
  border-color: rgba(255,107,0,0.55);
  box-shadow: 0 0 12px rgba(255,107,0,0.18);
}

.factor-item__body { flex: 1; }
.factor-item__title {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.88);
  margin: 0 0 4px;
  line-height: 1.3;
}
.factor-item__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── Right: pricing card ── */
.pricing__card-col {
  position: sticky;
  top: calc(var(--space-8) + 80px);
}

.pricing__card {
  position: relative;
  background: rgba(16,16,16,0.92);
  border: 1px solid rgba(255,107,0,0.22);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.50),
    0 0 0 1px rgba(255,107,0,0.06);
  overflow: hidden;
}
/* Top accent line */
.pricing__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
}

/* Card corners */
.pricing__corner {
  position: absolute;
  width: 26px; height: 26px;
  border-color: var(--color-primary);
  border-style: solid;
  opacity: 0.70;
  pointer-events: none;
}
.pricing__corner--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-2xl) 0 0 0; }
.pricing__corner--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 var(--radius-2xl) 0 0; }
.pricing__corner--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-2xl); }
.pricing__corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-2xl) 0; }

.pricing__card-head {
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pricing__card-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.30);
  margin: 0;
}

/* Price range rows */
.price-ranges {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.price-range-row {
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.price-range-row:last-child { border-bottom: none; }

.price-range-row__label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.80);
  margin-bottom: var(--space-2);
}

.price-range-row__scale {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.price-range-row__min,
.price-range-row__max {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 800;
  color: var(--color-primary);
  white-space: nowrap;
  line-height: 1;
}

.price-range-row__line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    rgba(255,107,0,0.40) 0px,
    rgba(255,107,0,0.40) 4px,
    transparent 4px,
    transparent 8px
  );
  min-width: 20px;
}

.price-range-row__desc {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.28);
  line-height: 1.4;
}

/* CTA */
.pricing__card-cta {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.pricing__cta-btn { width: 100%; justify-content: center; }
.pricing__cta-note {
  font-size: 0.70rem;
  color: rgba(255,255,255,0.25);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* Cargo types */
@media (max-width: 1200px) {
  .cargo__layout {
    grid-template-columns: 1fr;
  }
  .cargo__head {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: var(--space-4) var(--space-8);
  }
  .cargo__title { grid-column: 1; }
  .cargo__sub   { grid-column: 1; }
  .cargo__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1023px) {
  .cargo__head { grid-template-columns: 1fr; }
  .cargo__grid { grid-template-columns: repeat(2, 1fr); }
  .cargo-card--feat-1,
  .cargo-card--feat-2 { grid-column: span 1; min-height: 200px; }
}

@media (max-width: 767px) {
  .cargo__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .cargo-card--small { padding: var(--space-3); }
  .cargo-card--small .cargo-card__desc { display: none; }
}

@media (max-width: 479px) {
  .cargo__grid { grid-template-columns: 1fr; }
  .cargo-card--feat-1,
  .cargo-card--feat-2 { grid-column: span 1; }
}

/* Pricing */
@media (max-width: 1100px) {
  .pricing__layout {
    grid-template-columns: 1fr 380px;
  }
}

@media (max-width: 900px) {
  .pricing__layout {
    grid-template-columns: 1fr;
  }
  .pricing__card-col { position: static; }
}

@media (max-width: 767px) {
  .pricing__card { padding: var(--space-4); border-radius: var(--radius-xl); }
  .price-range-row__scale { flex-wrap: wrap; }
  .price-range-row__line { display: none; }
}



































































/* ============================================================
   BLOCK-11: PRICE LIST
   BLOCK-12: PORTFOLIO
   TakelazhGroup
   ============================================================ */

/* ══════════════════════════════════════════
   BLOCK-11: PRICE LIST
══════════════════════════════════════════ */

.pricelist {
  position: relative;
  padding: 40px 0 40px;
  overflow: hidden;
}

/* Background image — price-list-bg.jpg (same metal texture, different file) */
.pricelist__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pricelist__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.18) saturate(0.30);
  display: block;
}
.pricelist__bg-overlay {
  position: absolute;
  inset: 0;

}
.pricelist__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.025;
  background-image: radial-gradient(circle, rgba(255,107,0,0.9) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* ── Section head ── */
.pricelist__head {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.pricelist__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: fit-content;
}
.pricelist__title::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0;
  width: 52px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.pricelist__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-5) 0 0;
  line-height: var(--lh-relaxed);
}

/* ── Tabs ── */
.pricelist__tabs {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.pricelist__tab {
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.45);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
}
.pricelist__tab:hover {
  background: rgba(255,107,0,0.08);
  border-color: rgba(255,107,0,0.30);
  color: rgba(255,255,255,0.75);
}
.pricelist__tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #000;
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 16px rgba(255,107,0,0.30);
}

/* ── Table panels ── */
.pricelist__tables {
  position: relative;
  z-index: 2;
}
.pricelist__table-wrap {
  display: none;
}
.pricelist__table-wrap.is-active {
  display: block;
  animation: plTableIn 0.30s var(--ease-industrial) both;
}
@keyframes plTableIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Table container — glass card */
.pricelist__table {
  background: rgba(14,14,14,0.90);
  border: 1px solid rgba(255,107,0,0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Table rows */
.pricelist__row {
  display: grid;
  grid-template-columns: 1fr 80px 110px 130px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background var(--duration-fast) var(--ease-default);
}
.pricelist__row:last-child { border-bottom: none; }
.pricelist__row:not(.pricelist__row--head):not(.pricelist__row--complex):hover {
  background: rgba(255,107,0,0.03);
}

/* Header row */
.pricelist__row--head {
  background: rgba(255,107,0,0.06);
  border-bottom: 1px solid rgba(255,107,0,0.18);
}
.pricelist__row--head .pricelist__cell {
  font-size: 0.68rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-primary);
  padding: var(--space-3) var(--space-4);
}

/* Data cells */
.pricelist__cell {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.70);
  line-height: 1.4;
}
.pricelist__cell--name {
  color: rgba(255,255,255,0.88);
  font-weight: var(--fw-medium);
}
.pricelist__cell--unit,
.pricelist__cell--min {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.38);
  text-align: center;
}
.pricelist__cell--price {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 100;
  color: var(--color-primary);
  text-align: right;
  letter-spacing: -0.01em;
}

/* Complex project row — orange bg */
.pricelist__row--complex {
  background: rgba(255,107,0,0.92);
  grid-template-columns: 1fr auto;
  border-top: none;
  padding: 0;
}
.pricelist__row--complex:hover {
  background: rgba(255,107,0,1);
}
.pricelist__cell--complex-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 800;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pricelist__complex-note {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: rgba(0,0,0,0.55);
  text-transform: none;
  letter-spacing: 0;
}
.pricelist__cell--complex-cta {
  padding: var(--space-4) var(--space-5);
  flex-shrink: 0;
}
/* Dark btn inside orange row */
.btn-dark {
  background: rgba(0,0,0,0.85);
  color: var(--color-primary);
  border: 1px solid rgba(0,0,0,0.30);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.btn-dark:hover {
  background: #000;
  border-color: rgba(255,107,0,0.50);
  box-shadow: 0 4px 16px rgba(0,0,0,0.40);
}

/* Footer: note + PDF link */
.pricelist__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) 0 0;
}
.pricelist__footer-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.25);
  margin: 0;
  line-height: 1.5;
}
.pricelist__download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: none;
  border: 1px solid rgba(255,107,0,0.25);
  border-radius: var(--radius-full);
  padding: 0.4rem 1rem;
  transition: var(--transition-base);
  white-space: nowrap;
}
.pricelist__download:hover {
  background: rgba(255,107,0,0.10);
  border-color: rgba(255,107,0,0.50);
}

/* Bottom CTA */
.pricelist__cta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.pricelist__cta-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.28);
  margin: 0;
}

/* ══════════════════════════════════════════
   BLOCK-12: PORTFOLIO
══════════════════════════════════════════ */

.portfolio {
  position: relative;
  background: var(--color-bg-base);
  padding: 40px 0 40px;
  overflow: hidden;
}

/* Ambient glow */
.portfolio::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,107,0,0.06) 0%, transparent 70%);
  border-radius: 50%;
  top: -150px; right: -150px;
  pointer-events: none;
  filter: blur(80px);
}

/* ── Head ── */
.portfolio__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.portfolio__head-text { flex: 1; min-width: 220px; }

.portfolio__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: fit-content;
}
.portfolio__title::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0;
  width: 52px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.portfolio__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-5) 0 0;
  line-height: var(--lh-relaxed);
}
.portfolio__all-link { flex-shrink: 0; align-self: flex-start; }

/* ── Filter tabs ── */
.portfolio__filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.portfolio__filter {
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: rgba(255,255,255,0.40);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
}
.portfolio__filter:hover {
  background: rgba(255,107,0,0.07);
  border-color: rgba(255,107,0,0.28);
  color: rgba(255,255,255,0.70);
}
.portfolio__filter.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #000;
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 14px rgba(255,107,0,0.28);
}

/* ── Cards grid ── */
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* ── Portfolio card ── */
.portfolio-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.16);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-industrial),
    box-shadow var(--duration-normal) var(--ease-default);

  /* Hidden by filter — JS toggles */
}
.portfolio-card:hover {
  border-color: rgba(255,107,0,0.50);
  transform: translateY(-5px);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,107,0,0.15),
    0 0 40px rgba(255,107,0,0.06);
}
.portfolio-card.is-hidden {
  display: none;
}
.portfolio-card.is-entering {
  animation: cardEnter 0.35s var(--ease-industrial) both;
}
@keyframes cardEnter {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Corner accents */
.portfolio-card__corner {
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--color-primary);
  border-style: solid;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
  pointer-events: none;
}
.portfolio-card:hover .portfolio-card__corner { opacity: 0.85; }
.portfolio-card__corner--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.portfolio-card__corner--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 var(--radius-xl) 0 0; }
.portfolio-card__corner--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-xl); }
.portfolio-card__corner--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Image */
.portfolio-card__img-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(20,20,20,1);
}
.portfolio-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(0.80) saturate(0.75) contrast(1.05);
  transition: transform var(--duration-slow) var(--ease-default),
              filter var(--duration-normal) var(--ease-default);
}
.portfolio-card:hover .portfolio-card__img {
  transform: scale(1.05);
  filter: brightness(0.90) saturate(0.85) contrast(1.05);
}
.portfolio-card__img-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent 45%, rgba(8,8,8,0.75) 100%),
    linear-gradient(to top-right, rgba(255,107,0,0.04) 0%, transparent 60%);
  pointer-events: none;
}
/* Fallback when image missing */
.portfolio-card__img-wrap.no-image {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255,107,0,0.03) 0px,
      rgba(255,107,0,0.03) 1px,
      transparent 1px,
      transparent 14px
    ),
    rgba(15,15,15,1);
}

/* Badge — top-right */
.portfolio-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  background: var(--color-primary);
  color: #000;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  letter-spacing: 0.04em;
  box-shadow: 0 2px 10px rgba(255,107,0,0.35);
}

/* Play icon — top-left */
.portfolio-card__play {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  width: 32px; height: 32px;
  background: rgba(255,107,0,0.88);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  opacity: 0.85;
  transition: opacity var(--duration-fast) var(--ease-default);
}
.portfolio-card:hover .portfolio-card__play { opacity: 1; }

/* Card body */
.portfolio-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.portfolio-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.90);
  line-height: 1.3;
  margin: 0;
}
.portfolio-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.portfolio-card__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3) 0 0;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.portfolio-card__meta li {
  font-size: 0.70rem;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  white-space: nowrap;
}

/* Bottom link */
.portfolio__bottom {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* Price list */
@media (max-width: 900px) {
  .pricelist__row {
    grid-template-columns: 1fr 70px 100px;
  }
  .pricelist__cell--min { display: none; }
  .pricelist__row--head .pricelist__cell:nth-child(3) { display: none; }
}

@media (max-width: 640px) {
  .pricelist__row {
    grid-template-columns: 1fr auto;
  }
  .pricelist__cell--unit { display: none; }
  .pricelist__cell--min  { display: none; }
  .pricelist__row--head .pricelist__cell:nth-child(2),
  .pricelist__row--head .pricelist__cell:nth-child(3) { display: none; }
  .pricelist__row--complex { grid-template-columns: 1fr; }
  .pricelist__cell--complex-cta { padding-top: 0; }
  .pricelist__footer { flex-direction: column; align-items: flex-start; }
  .pricelist__tabs { gap: var(--space-2); }
  .pricelist__tab { font-size: var(--text-xs); padding: 0.45rem 0.9rem; }
}

/* Portfolio */
@media (max-width: 1023px) {
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .portfolio__grid { grid-template-columns: 1fr; }
  .portfolio__head { flex-direction: column; align-items: flex-start; }
  .portfolio__all-link { display: none; }
}




























































/* ============================================================
   BLOCK-13: TESTIMONIALS SLIDER
   BLOCK-14: THANK YOU LETTERS
   BLOCK-15: CLIENTS LOGOS
   TakelazhGroup
   ============================================================ */

/* ══════════════════════════════════════════
   BLOCK-13: TESTIMONIALS
══════════════════════════════════════════ */

.testi {
  position: relative;
  background: var(--color-bg-base);
  padding: 40px 0 40px;
  overflow: hidden;
}
/* Ambient background glow */
.testi::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255,107,0,0.06) 0%, transparent 70%);
  border-radius: 50%;
  top: -200px; right: -200px;
  pointer-events: none;
  filter: blur(80px);
}
.testi__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.022;
  background-image: radial-gradient(circle, rgba(255,107,0,1) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* ── Two-col layout ── */
.testi__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: center;
}

/* ── Left aside ── */
.testi__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.testi__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: fit-content;
}
.testi__title::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0;
  width: 40px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.testi__agg {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: var(--space-3);
}
.testi__agg-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.testi__agg-sep,
.testi__agg-max {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  line-height: 1;
}
.testi__stars {
  display: flex;
  gap: 3px;
}
.testi__star {
  width: 18px; height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.testi__count {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.35);
  margin: 0;
}
.testi__platforms-note {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.25);
  line-height: var(--lh-relaxed);
  margin: 0;
  border-left: 2px solid rgba(255,107,0,0.30);
  padding-left: var(--space-3);
}

/* Aside controls (≤1023px) */
.testi__controls-aside {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.testi__ctrl-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
}
.testi__ctrl-btn:hover {
  background: rgba(255,107,0,0.12);
  border-color: rgba(255,107,0,0.40);
  color: var(--color-primary);
}
.testi__dots-sm {
  display: flex;
  gap: var(--space-2);
}

/* ── Right slider column ── */
.testi__slider-col {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

/* Outer arrow buttons */
.testi__arrow {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
}
.testi__arrow:hover:not(:disabled) {
  background: rgba(255,107,0,0.12);
  border-color: rgba(255,107,0,0.40);
  color: var(--color-primary);
}
.testi__arrow:disabled { opacity: 0.25; cursor: default; }

/* Track */
.testi__track-wrap {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.testi__track {
  display: flex;
  gap: 0;  /* cards are full-width, no gap needed — offset calc uses card width only */
  transition: transform 0.45s var(--ease-industrial);
  will-change: transform;
  align-items: stretch;
}

/* ── Testimonial card ── */
.testi-card {
  flex-shrink: 0;
  width: 100%;
  background: rgba(16,16,16,0.90);
  border: 1px solid rgba(255,107,0,0.20);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  backdrop-filter: blur(10px);
  box-shadow:
    0 0 0 1px rgba(255,107,0,0.06),
    0 20px 60px rgba(0,0,0,0.50),
    inset 0 2px 0 rgba(255,107,0,0.55);  /* top accent — inset never clips border-radius */
  transition: box-shadow var(--duration-normal) var(--ease-default);
}
/* Top accent line — rendered as box-shadow so it never clips corners */
/* border-top inside border-radius always looks clipped, shadow does not */

/* Corner accents */
.testi-card__c {
  position: absolute;
  width: 20px; height: 20px;
  border-color: rgba(255,107,0,0.45);
  border-style: solid;
  opacity: 1;
  pointer-events: none;
}
.testi-card__c--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.testi-card__c--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 var(--radius-xl) 0 0; }
.testi-card__c--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-xl); }
.testi-card__c--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Quote icon */
.testi-card__quote {
  width: 52px; height: 36px;
  color: var(--color-primary);
  opacity: 0.80;
  flex-shrink: 0;
}
.testi-card__quote svg { width: 100%; height: 100%; }

/* Review text */
.testi-card__text {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.80);
  line-height: var(--lh-relaxed);
  margin: 0;
  flex: 1;
}

/* Footer */
.testi-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}
.testi-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.testi-card__av-wrap {
  position: relative;
  width: 44px; height: 44px;
  flex-shrink: 0;
}
.testi-card__av {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,107,0,0.25);
}
.testi-card__av-fb {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,107,0,0.14);
  border: 2px solid rgba(255,107,0,0.25);
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 100;
  color: var(--color-primary);
  position: absolute;
  top: 0; left: 0;
}
.testi-card__name {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.testi-card__pos {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.testi-card__stars {
  display: flex;
  gap: 2px;
}
.testi-card__star {
  width: 14px; height: 14px;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ── Screenshot card variant ── */
.testi-card--ss .testi-card__ss-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.40);
}
.testi-card--ss .testi-card__ss-label strong {
  color: rgba(255,255,255,0.70);
}
.testi-card__ss-wrap {
  position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    flex: 1;
    display: flex;
    background: rgba(20, 20, 20, 1);
    align-items: center;
    justify-content: center;
}
.testi-card__ss-img {
  width: 90%;
    height: auto;
    display: block;
    filter: brightness(0.90) contrast(1.02);
}
.testi-card__ss-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(8,8,8,0.60) 100%);
}
.testi-card__ss-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.testi-card__verified {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-full);
  padding: 2px 8px;
}

/* Dots row */
.testi__dots-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  position: relative;
  z-index: 1;
}
.testi__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-base);
}
.testi__dot.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.35);
  box-shadow: 0 0 8px rgba(255,107,0,0.40);
}

/* ══════════════════════════════════════════
   BLOCK-14: THANK YOU LETTERS
══════════════════════════════════════════ */

.letters {
  position: relative;
  background: var(--color-bg-alt, #0d0d0d);
  padding: clamp(4rem, 8vw, 7rem) 0;
  overflow: hidden;
}
/* Subtle dark separator from block above */
.letters::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,107,0,0.12);
}

/* ── Two-col layout ── */
.letters__layout {
  display: grid;
  grid-template-columns: 320px 1fr;  /* wider aside so title fits */
  gap: clamp(3rem, 5vw, 5rem);
  align-items: start;  /* align top, not center — prevents title overlap */
}

.letters__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.letters__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);  /* slightly smaller to stay within column */
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: 100%;  /* fill column, never overflow */
  word-break: break-word;
}
.letters__title::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0;
  width: 40px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.letters__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-2) 0 0;
}
.letters__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.letters__ctrl {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  flex-shrink: 0;
}
.letters__ctrl:hover:not(:disabled) {
  background: rgba(255,107,0,0.12);
  border-color: rgba(255,107,0,0.40);
  color: var(--color-primary);
}
.letters__ctrl:disabled { opacity: 0.25; cursor: default; }
.letters__dots {
  display: flex;
  gap: var(--space-2);
}
.letters__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-base);
}
.letters__dot.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 6px rgba(255,107,0,0.40);
}

/* ── Letters track ── */
.letters__track-wrap {
  overflow: hidden;
}
.letters__track {
  display: flex;
  gap: 12px;             /* JS reads this via getComputedStyle — do not remove */
  transition: transform 0.45s var(--ease-industrial);
  will-change: transform;
}

/* ── Letter card ── */
/* width is set dynamically by JS (same pattern as fleet slider) */
.letter-card {
  flex-shrink: 0;
  /* width: set by JS */
  min-height: 310px;     /* A4-ish portrait proportion */
  position: relative;
  background: rgba(20,20,20,1);
  border: 1px solid rgba(255,107,0,0.22);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* NO transform on hover — removed scale/translateY */
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}
.letter-card:hover {
  border-color: rgba(255,107,0,0.60);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.50),
    0 0 24px rgba(255,107,0,0.10);
  /* no transform here — animation removed as requested */
}
.letter-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Paper-fold corner */
.letter-card__fold {
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 28px 28px 0;
  border-color: transparent rgba(255,107,0,0.35) transparent transparent;
  z-index: 3;
}
.letter-card__fold::after {
  content: '';
  position: absolute;
  top: 2px; right: -26px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent rgba(14,14,14,1) transparent transparent;
}

/* Skeleton */
.letter-card__skeleton {
  position: absolute;
  inset: 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 0;
}
.letter-card__doc-icon {
  width: 28px; height: 28px;
  color: rgba(255,107,0,0.30);
  margin-bottom: var(--space-2);
}
.letter-card__sk-line {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
}
.letter-card__sk-seal {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(255,107,0,0.20);
  margin-top: auto;
  align-self: flex-end;
}

/* Real screenshot image */
.letter-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 1;
  filter: brightness(0.88) contrast(1.02);
  transition: opacity var(--duration-normal) var(--ease-default);
}
.letter-card__img[src=""] { opacity: 0; }

/* Hover overlay */
.letter-card__hover {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.letter-card:hover .letter-card__hover { opacity: 1; }
.letter-card__view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: #000;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(255,107,0,0.40);
}

/* Card footer */
.letter-card__footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 5;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  padding: var(--space-4) var(--space-3) var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.letter-card__co {
  font-size: 0.65rem;
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.70);
  line-height: 1.2;
}
.letter-card__yr {
  font-size: 0.60rem;
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* ── Lightbox ── */
.letters-lb {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.letters-lb[hidden] { display: none; }
.letters-lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.90);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.letters-lb__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.letters-lb__close {
  position: absolute;
  top: -44px; right: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.70);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
}
.letters-lb__close:hover { background: rgba(255,107,0,0.20); border-color: rgba(255,107,0,0.50); color: var(--color-primary); }
.letters-lb__img-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,107,0,0.25);
  box-shadow: 0 40px 100px rgba(0,0,0,0.80), 0 0 40px rgba(255,107,0,0.08);
  max-height: 80vh;
}
.letters-lb__img {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}
.letters-lb__caption {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin: 0;
}

/* ══════════════════════════════════════════
   BLOCK-15: CLIENTS LOGOS
══════════════════════════════════════════ */

.clients {
  position: relative;
  background: var(--color-bg-base);
  padding: clamp(3rem, 6vw, 5rem) 0;
  overflow: hidden;
}

.clients__head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.clients__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.clients__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
}

/* Filters */
.clients__filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.clients__filter {
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  color: rgba(255,255,255,0.38);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
}
.clients__filter:hover {
  background: rgba(255,107,0,0.07);
  border-color: rgba(255,107,0,0.28);
  color: rgba(255,255,255,0.70);
}
.clients__filter.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #000;
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 14px rgba(255,107,0,0.28);
}

/* ── Logo grid ── */
.clients__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ── Unified SVG logo item ── */
.client-logo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-6);   /* more horizontal padding */
  height: 66px;                /* taller pill */
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.32);
  cursor: default;
  transition:
    color var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default),
    background var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}
.client-logo-item:hover {
  color: var(--color-primary);
  border-color: rgba(255,107,0,0.35);
  background: rgba(255,107,0,0.06);
  box-shadow: 0 0 20px rgba(255,107,0,0.08);
}
.client-logo-item.is-hidden {
  display: none;
}
.client-logo-item.is-entering {
  animation: logoEnter 0.30s var(--ease-industrial) both;
}
@keyframes logoEnter {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

/* SVG inside — unified sizing, larger than before */
.client-logo-item svg {
  height: 36px;          /* was 28px */
  width: auto;
  max-width: 160px;      /* wider allowance */
  display: block;
  color: inherit;
}

/* ══════════════════════════════════════════
   RESPONSIVE — all three blocks
══════════════════════════════════════════ */

/* Testimonials */
@media (max-width: 1023px) {
  .testi__layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .testi__controls-aside { display: flex; }
  .testi__arrow { display: none; }
  .testi__dots-row { display: none; }
}
@media (max-width: 640px) {
  .testi-card { padding: var(--space-4); }
  .testi-card__footer { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* Letters */
@media (max-width: 1100px) {
  .letters__layout { grid-template-columns: 280px 1fr; }
}
@media (max-width: 1023px) {
  .letters__layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .letters__aside { max-width: 100%; }
  .letters__title { font-size: clamp(1.5rem, 4vw, 2rem); }
}
@media (max-width: 640px) {
  .letter-card { min-height: 255px; } /* width is JS-controlled */
}

/* Clients */
@media (max-width: 640px) {
  .client-logo-item { height: 54px; padding: 0 var(--space-4); }
  .client-logo-item svg { height: 28px; max-width: 120px; }
  .clients__filters { gap: var(--space-2); }
  .clients__filter { font-size: var(--text-xs); padding: 0.40rem 0.9rem; }
}
















































/* ============================================================
   BLOCK-16: GUARANTEES
   BLOCK-17: CERTIFICATES
   BLOCK-18: TEAM
   TakelazhGroup
   ============================================================ */

/* ══════════════════════════════════════════
   BLOCK-16: GUARANTEES
══════════════════════════════════════════ */

.guarantees {
  position: relative;
  background: var(--color-bg-base);
  padding: clamp(4rem, 8vw, 7rem) 0;
  overflow: hidden;
}
.guarantees__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.guarantees__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 90% 40%, rgba(255,107,0,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 70%, rgba(255,107,0,0.04) 0%, transparent 60%);
}
.guarantees__pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.020;
  background-image: radial-gradient(circle, rgba(255,107,0,1) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* ── Two-col layout: head left, cards right ── */
.guarantees__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: start;
}

.guarantees__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: calc(80px + var(--space-6));
}
.guarantees__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: fit-content;
}
.guarantees__title::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0;
  width: 44px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.guarantees__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-2) 0 0;
}
.guarantees__docs-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  transition: var(--transition-base);
  width: fit-content;
  margin-top: var(--space-2);
}
.guarantees__docs-link:hover {
  color: var(--color-primary);
  border-color: rgba(255,107,0,0.35);
  background: rgba(255,107,0,0.06);
}

/* ── Cards grid ── */
.guarantees__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* ── Guarantee card ── */
.guarantee-card {
  position: relative;
  background: rgba(16,16,16,0.88);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-industrial);
}
.guarantee-card:hover {
  border-color: rgba(255,107,0,0.40);
  box-shadow:
    0 16px 48px rgba(0,0,0,0.50),
    0 0 32px rgba(255,107,0,0.07);
  transform: translateY(-3px);
}

/* Orange top bar */
.guarantee-card__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  opacity: 0.70;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.guarantee-card:hover .guarantee-card__bar { opacity: 1; }

/* Bottom corner accents */
.guarantee-card__c {
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(255,107,0,0.25);
  border-style: solid;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.guarantee-card:hover .guarantee-card__c { opacity: 0.80; }
.guarantee-card__c--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-xl); }
.guarantee-card__c--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Icon */
.guarantee-card__icon {
  width: 52px; height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  opacity: 0.85;
  transition: opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-industrial);
}
.guarantee-card:hover .guarantee-card__icon { opacity: 1; transform: scale(1.08); }
.guarantee-card__icon svg { width: 100%; height: 100%; }

.guarantee-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.90);
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.guarantee-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ══════════════════════════════════════════
   BLOCK-17: CERTIFICATES
══════════════════════════════════════════ */

.certs {
  position: relative;
  background: var(--color-bg-alt, #0a0a0a);
  padding: clamp(4rem, 8vw, 7rem) 0;
  overflow: hidden;
}
.certs::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,107,0,0.10);
}

/* ── Two-col layout ── */
.certs__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: start;
}

.certs__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: calc(80px + var(--space-6));
}
.certs__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: 100%;
  word-break: break-word;
}
.certs__title::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0;
  width: 44px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.certs__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-2) 0 0;
}
.certs__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.certs__ctrl {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  flex-shrink: 0;
}
.certs__ctrl:hover:not(:disabled) {
  background: rgba(255,107,0,0.12);
  border-color: rgba(255,107,0,0.40);
  color: var(--color-primary);
}
.certs__ctrl:disabled { opacity: 0.25; cursor: default; }
.certs__dots { display: flex; gap: var(--space-2); }
.certs__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-base);
}
.certs__dot.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 6px rgba(255,107,0,0.40);
}

/* ── Slider ── */
.certs__slider-wrap { overflow: hidden; }
.certs__track {
  display: flex;
  gap: 12px; /* read by JS via getComputedStyle */
  transition: transform 0.45s var(--ease-industrial);
  will-change: transform;
}

/* ── Certificate card ── */
.cert-card {
  flex-shrink: 0;
  /* width set by JS */
  min-height: 320px;
  position: relative;
  background: rgba(18,18,18,1);
  border: 1px solid rgba(255,107,0,0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default);
}
.cert-card:hover {
  border-color: rgba(255,107,0,0.55);
  box-shadow: 0 8px 32px rgba(0,0,0,0.50), 0 0 24px rgba(255,107,0,0.10);
}
.cert-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* Paper fold */
.cert-card__fold {
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent rgba(255,107,0,0.30) transparent transparent;
  z-index: 3;
}
.cert-card__fold::after {
  content: '';
  position: absolute;
  top: 2px; right: -22px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent rgba(16,16,16,1) transparent transparent;
}

/* Corner accents */
.cert-card__c {
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(255,107,0,0.40);
  border-style: solid;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.cert-card:hover .cert-card__c { opacity: 0.80; }
.cert-card__c--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.cert-card__c--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Skeleton */
.cert-card__skeleton {
  position: absolute;
  inset: 0;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 0;
}
.cert-card__sk-icon {
  width: 26px; height: 26px;
  color: rgba(255,107,0,0.28);
  margin-bottom: var(--space-2);
}
.cert-card__sk-line {
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
}
.cert-card__sk-seal {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255,107,0,0.18);
  margin-top: auto;
  align-self: flex-end;
}

/* Image */
.cert-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 1;
  filter: brightness(0.90) contrast(1.02);
}

/* Hover overlay */
.cert-card__hover {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgba(0,0,0,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.cert-card:hover .cert-card__hover { opacity: 1; }
.cert-card__view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: #000;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 16px rgba(255,107,0,0.40);
}

/* Footer */
.cert-card__footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 5;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 100%);
  padding: var(--space-4) var(--space-3) var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2);
}
.cert-card__title-text {
  font-size: 0.63rem;
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.65);
  line-height: 1.3;
}
.cert-card__year {
  font-size: 0.60rem;
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

/* Lightbox */
.certs-lb {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.certs-lb[hidden] { display: none; }
.certs-lb__bd {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.certs-lb__inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.certs-lb__close {
  position: absolute;
  top: -44px; right: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.70);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
}
.certs-lb__close:hover { background: rgba(255,107,0,0.20); border-color: rgba(255,107,0,0.50); color: var(--color-primary); }
.certs-lb__img-wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,107,0,0.22);
  box-shadow: 0 40px 100px rgba(0,0,0,0.80), 0 0 40px rgba(255,107,0,0.08);
  max-height: 85vh;
}
.certs-lb__img {
  display: block;
  width: 100%;
  max-height: 85vh;
  object-fit: contain;
}
.certs-lb__cap {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.30);
  text-align: center;
  margin: 0;
}

/* ══════════════════════════════════════════
   BLOCK-18: TEAM
══════════════════════════════════════════ */

.team {
  position: relative;
  background: var(--color-bg-base);
  padding: 40px 0 40px;
  overflow: hidden;
}
.team::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,107,0,0.10);
}

/* Glow */
.team::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(255,107,0,0.06) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -100px; right: -100px;
  pointer-events: none;
  filter: blur(80px);
}

/* ── Two-col layout ── */
.team__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: start;
}

.team__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: calc(80px + var(--space-6));
}
.team__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 100;
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin: 0;
  position: relative;
  width: fit-content;
}
.team__title::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0;
  width: 44px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.team__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-2) 0 0;
}
.team__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.team__stat-num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.team__stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
  line-height: 1.4;
}
.team__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.team__ctrl {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  flex-shrink: 0;
}
.team__ctrl:hover:not(:disabled) {
  background: rgba(255,107,0,0.12);
  border-color: rgba(255,107,0,0.40);
  color: var(--color-primary);
}
.team__ctrl:disabled { opacity: 0.25; cursor: default; }
.team__dots { display: flex; gap: var(--space-2); }
.team__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-base);
}
.team__dot.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 6px rgba(255,107,0,0.40);
}

/* ── Slider ── */
.team__slider-wrap { overflow: hidden; }
.team__track {
  display: flex;
  gap: 16px; /* read by JS via getComputedStyle */
  transition: transform 0.45s var(--ease-industrial);
  will-change: transform;
}

/* ── Team card ── */
.team-card {
  flex-shrink: 0;
  /* width set by JS */
  background: rgba(16,16,16,0.90);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  position: relative;
  text-align: center;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-industrial);
}
.team-card:hover {
  border-color: rgba(255,107,0,0.40);
  box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 0 32px rgba(255,107,0,0.07);
}

/* Corner accents */
.team-card__c {
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(255,107,0,0.35);
  border-style: solid;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.team-card:hover .team-card__c { opacity: 0.80; }
.team-card__c--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.team-card__c--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 var(--radius-xl) 0 0; }
.team-card__c--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-xl); }
.team-card__c--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Round photo */
.team-card__photo-wrap {
  position: relative;
  width: 90px; height: 90px;
  flex-shrink: 0;
}
.team-card__photo-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(255,107,0,0.30);
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}
.team-card:hover .team-card__photo-ring {
  border-color: rgba(255,107,0,0.75);
  box-shadow: 0 0 20px rgba(255,107,0,0.20);
}
.team-card__photo {
  width: 90px; height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.08);
  display: block;
}
.team-card__photo-fb {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255,107,0,0.12);
  border: 2px solid rgba(255,107,0,0.25);
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 100;
  color: var(--color-primary);
}

/* Body */
.team-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  width: 100%;
}
.team-card__name {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.92);
  line-height: 1.2;
}
.team-card__pos {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}
.team-card__exp {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  background: rgba(255,107,0,0.10);
  border: 1px solid rgba(255,107,0,0.20);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  letter-spacing: 0.03em;
}

/* Skill tags */
.team-card__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: var(--space-1);
}
.team-card__tag {
  font-size: 0.60rem;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  white-space: nowrap;
}

/* Contacts */
.team-card__contacts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.05);
  width: 100%;
  margin-top: auto;
}
.team-card__contact-link {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--transition-base);
}
.team-card__contact-link:hover {
  background: rgba(255,107,0,0.12);
  border-color: rgba(255,107,0,0.35);
  color: var(--color-primary);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* Guarantees */
@media (max-width: 1100px) {
  .guarantees__layout { grid-template-columns: 220px 1fr; }
  .guarantees__cards  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .guarantees__layout { grid-template-columns: 1fr; }
  .guarantees__head   { position: static; }
  .guarantees__cards  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .guarantees__cards { grid-template-columns: repeat(1, 1fr); }
}
@media (max-width: 420px) {
  .guarantees__cards { grid-template-columns: 1fr; }
}

/* Certificates */
@media (max-width: 1100px) {
  .certs__layout { grid-template-columns: 240px 1fr; }
}
@media (max-width: 900px) {
  .certs__layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .certs__aside  { position: static; }
}

/* Team */
@media (max-width: 1100px) {
  .team__layout { grid-template-columns: 220px 1fr; }
}
@media (max-width: 900px) {
  .team__layout { grid-template-columns: 1fr; gap: var(--space-5); }
  .team__aside  { position: static; }
}















































































/* ============================================================
   BLOCK-19: GEOGRAPHY
   BLOCK-20: ADVANTAGES
   BLOCK-21: FAQ
   TakelazhGroup
   ============================================================ */

/* ══════════════════════════════════════════
   BLOCK-19: GEOGRAPHY
══════════════════════════════════════════ */

.geo {
  position: relative;
  background: var(--color-bg-alt, #0a0a0a);
  padding: 40px 0 40px;
  overflow: hidden;
}
.geo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 20% 50%, rgba(255,107,0,0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* Two-col: map left, aside right */
.geo__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: start;
}

/* ── Head ── */
.geo__head { margin-bottom: var(--space-5); }
.geo__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
  position: relative;
  width: fit-content;
}
.geo__title::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0;
  width: 44px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.geo__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-4) 0 0;
}

/* ── Map ── */
.geo__map-wrap {
  position: relative;
  background: rgba(12,12,12,0.90);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-xl);
  overflow: visible;
  padding: var(--space-3);
}
.geo__map-svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Map land */
.geo__map-land {
  fill: rgba(255,255,255,0.055);
  stroke: rgba(255,107,0,0.22);
  stroke-width: 1;
}

/* Grid lines */
.geo__grid-line {
  stroke: rgba(255,255,255,0.04);
  stroke-width: 0.5;
}

/* City pins */
.geo__pin { cursor: pointer; }
.geo__pin-ring {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.5;
  opacity: 0.55;
  transition: opacity 0.25s, r 0.25s;
}
.geo__pin-dot {
  fill: var(--color-primary);
  opacity: 0.80;
  transition: opacity 0.25s, r 0.25s;
}
.geo__pin--hq .geo__pin-ring  { opacity: 1; stroke-width: 2; }
.geo__pin--hq .geo__pin-dot   { opacity: 1; }
.geo__pin-pulse {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1;
  opacity: 0;
  animation: geoPulse 2.4s ease-out infinite;
}
@keyframes geoPulse {
  0%   { r: 10; opacity: 0.60; }
  100% { r: 26; opacity: 0; }
}
.geo__pin:hover .geo__pin-ring { opacity: 1; }
.geo__pin:hover .geo__pin-dot  { opacity: 1; }
.geo__pin:focus-visible .geo__pin-ring { opacity: 1; }

/* Tooltip */
.geo__tooltip {
  position: absolute;
  background: rgba(14,14,14,0.95);
  border: 1px solid rgba(255,107,0,0.35);
  border-radius: var(--radius-lg);
  padding: 8px 14px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 8px 32px rgba(0,0,0,0.60);
  transform: translateX(-50%) translateY(-100%);
  margin-top: -10px;
}
.geo__tooltip[hidden] { display: none; }
.geo__tooltip-city {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.90);
}
.geo__tooltip-stat {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-primary);
  margin-top: 2px;
}

/* Stats row */
.geo__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.geo__stat {
  border: 1px solid rgba(255,107,0,0.18);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255,255,255,0.02);
}
.geo__stat-num {
  font-family: var(--font-display);
    font-size: 1.0rem;
    font-weight: 100;
    color: var(--color-primary);
    line-height: 1;
    flex-shrink: 0;
}
.geo__stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.40);
  line-height: 1.3;
}

/* ── Aside ── */
.geo__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-2);
}
.geo__hq {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: rgba(255,107,0,0.06);
  border: 1px solid rgba(255,107,0,0.20);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
}
.geo__hq-pin {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}
.geo__hq-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.geo__hq-info strong {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.88);
  display: block;
}
.geo__hq-info span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
}
.geo__hq-link {
  font-size: var(--text-xs);
  color: var(--color-primary);
  text-decoration: none;
  margin-top: 4px;
  display: inline-block;
  transition: opacity 0.2s;
}
.geo__hq-link:hover { opacity: 0.70; }
.geo__aside-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.geo__cities-head {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-2);
}
.geo__cities-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.geo__city-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.40);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition-base);
}
.geo__city-btn:hover,
.geo__city-btn.is-active {
  color: var(--color-primary);
  border-color: rgba(255,107,0,0.35);
  background: rgba(255,107,0,0.06);
}
.geo__city-btn--hq { color: rgba(255,255,255,0.65); }
.geo__city-btn--hq svg { color: var(--color-primary); }
.geo__cta {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.geo__cta-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

/* ══════════════════════════════════════════
   BLOCK-20: ADVANTAGES
══════════════════════════════════════════ */

.adv {
  position: relative;
  background: var(--color-bg-base);
  padding: clamp(4rem, 8vw, 7rem) 0;
  overflow: hidden;
}
.adv__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 85% 30%, rgba(255,107,0,0.05) 0%, transparent 55%);
  pointer-events: none;
}
.adv__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.018;
  background-image: radial-gradient(circle, rgba(255,107,0,1) 1px, transparent 1px);
  background-size: 34px 34px;
}
.adv::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,107,0,0.10);
}

.adv__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(3rem, 5vw, 5rem);
  align-items: start;
}
.adv__head {
  position: sticky;
  top: calc(80px + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.adv__title {
  font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 100;
    text-transform: uppercase;
    color: var(--color-text-primary);
    line-height: var(--lh-snug);
    margin: 0;
    position: relative;
    width: 100%;
    word-break: break-word;
}
.adv__title::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 0;
  width: 44px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.adv__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: var(--space-2) 0 0;
}

/* Side stats column */
.adv__side-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-xl);
}
.adv__side-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.adv__side-stat:last-child { border-bottom: none; }
.adv__side-stat-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  min-width: 48px;
  flex-shrink: 0;
}
.adv__side-stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.32);
  line-height: 1.4;
}

/* Grid 3 cols */
.adv__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* Advantage card */
.adv-card {
  position: relative;
  background: rgba(14,14,14,0.88);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-industrial);
}
.adv-card:hover {
  border-color: rgba(255,107,0,0.35);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 24px rgba(255,107,0,0.06);
  transform: translateY(-3px);
}
/* Orange num — large display number top-right */
.adv-card__num {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 800;
  color: rgba(255,107,0,0.12);
  line-height: 1;
  letter-spacing: -0.03em;
  user-select: none;
  transition: color var(--duration-normal) var(--ease-default);
}
.adv-card:hover .adv-card__num { color: rgba(255,107,0,0.22); }

/* Icon */
.adv-card__icon {
  width: 32px; height: 32px;
  color: var(--color-primary);
  opacity: 0.75;
  flex-shrink: 0;
  transition: opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-industrial);
}
.adv-card:hover .adv-card__icon { opacity: 1; transform: scale(1.10); }
.adv-card__icon svg { width: 100%; height: 100%; }

.adv-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.88);
  line-height: 1.3;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.adv-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ══════════════════════════════════════════
   BLOCK-21: FAQ
══════════════════════════════════════════ */

.faq {
  position: relative;
  background: var(--color-bg-alt, #0a0a0a);
  padding: 40px 0 40px;
  overflow: hidden;
}
.faq::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,107,0,0.10);
}
.faq::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.04);
}

.faq__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.faq__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.faq__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
}

/* Two-col: questions left, answer right */
.faq__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(255,107,0,0.14);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 440px;
}

/* ── Question list ── */
.faq__list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,107,0,0.12);
  background: rgba(10,10,10,1);
  overflow-y: auto;
  max-height: 560px;
}
/* Custom scrollbar */
.faq__list::-webkit-scrollbar { width: 4px; }
.faq__list::-webkit-scrollbar-track { background: transparent; }
.faq__list::-webkit-scrollbar-thumb { background: rgba(255,107,0,0.22); border-radius: 2px; }

.faq__q {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-default),
    border-left-color var(--duration-fast) var(--ease-default);
  border-left: 3px solid transparent;
  position: relative;
}
.faq__q:last-child { border-bottom: none; }
.faq__q:hover { background: rgba(255,107,0,0.04); }
.faq__q.is-active {
  background: rgba(255,107,0,0.07);
  border-left-color: var(--color-primary);
}
.faq__q-num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: rgba(255,107,0,0.30);
  line-height: 1;
  flex-shrink: 0;
  transition: color var(--duration-fast);
}
.faq__q.is-active .faq__q-num,
.faq__q:hover   .faq__q-num { color: var(--color-primary); }

.faq__q-text {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.60);
  line-height: var(--lh-snug);
  transition: color var(--duration-fast);
}
.faq__q.is-active .faq__q-text,
.faq__q:hover     .faq__q-text { color: rgba(255,255,255,0.90); }

.faq__q-tag {
  display: none; /* shown on wider screens via media query */
  font-size: 0.60rem;
  font-weight: var(--fw-bold);
  color: rgba(255,107,0,0.50);
  background: rgba(255,107,0,0.08);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.faq__q.is-active .faq__q-tag { color: var(--color-primary); background: rgba(255,107,0,0.12); }

.faq__q-arrow {
  color: rgba(255,255,255,0.22);
  flex-shrink: 0;
  transition: color var(--duration-fast), transform var(--duration-normal) var(--ease-industrial);
}
.faq__q.is-active .faq__q-arrow { color: var(--color-primary); transform: rotate(90deg); }

/* ── Answer panel ── */
.faq__answers {
  position: relative;
  background: rgba(12,12,12,1);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.faq__answer {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  position: relative; /* было absolute; теперь все relative и в одной ячейке */
  inset: auto;        /* убираем inset:0 от старого absolute */
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  opacity: 0;
  transform: translateX(24px);
  transition:
    opacity 0.35s var(--ease-industrial),
    transform 0.35s var(--ease-industrial);
  pointer-events: none;
  visibility: hidden;
  min-height: 0;
}
.faq__answer.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  position: relative; /* остаётся relative */
}
.faq__answer[hidden] { display: flex !important; } /* keep in DOM for transitions */

/* Corner accents */
.faq__answer-c {
  position: absolute;
  width: 20px; height: 20px;
  border-color: rgba(255,107,0,0.30);
  border-style: solid;
  pointer-events: none;
}
.faq__answer-c--tl { top: 0; left: 0; border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.faq__answer-c--br { bottom: 0; right: 0; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

.faq__answer-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  background: rgba(255,107,0,0.10);
  border: 1px solid rgba(255,107,0,0.20);
  border-radius: var(--radius-full);
  padding: 3px 12px;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.faq__answer-q {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: var(--fw-bold);
  color: rgba(255,255,255,0.92);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Inner scrollable answer text */
.faq__answer-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: var(--space-2);
  min-height: 0;  /* allow flex shrink */
}
.faq__answer-scroll::-webkit-scrollbar { width: 4px; }
.faq__answer-scroll::-webkit-scrollbar-track { background: transparent; }
.faq__answer-scroll::-webkit-scrollbar-thumb { background: rgba(255,107,0,0.20); border-radius: 2px; }

.faq__answer-text {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.faq__answer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.faq__answer-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--duration-fast) var(--ease-default),
              opacity var(--duration-fast);
}
.faq__answer-cta:hover { opacity: 0.75; gap: var(--space-3); }
.faq__answer-counter {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.22);
  font-family: var(--font-display);
  font-weight: 700;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* Geography */
@media (max-width: 1100px) {
  .geo__layout { grid-template-columns: 1fr 260px; }
  .geo__stats  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .geo__layout { grid-template-columns: 1fr; }
  .geo__stats  { grid-template-columns: repeat(2, 1fr); }
  .geo__aside  { padding-top: 0; }
}
@media (max-width: 480px) {
  .geo__stats { grid-template-columns: 1fr 1fr; }
  .geo__stat  { padding: var(--space-2) var(--space-3); }
  .geo__stat-num { font-size: 1.3rem; }
}

/* Advantages */
@media (max-width: 1100px) {
  .adv__layout { grid-template-columns: 200px 1fr; }
  .adv__grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .adv__layout { grid-template-columns: 1fr; }
  .adv__head   { position: static; }
  .adv__grid   { grid-template-columns: repeat(3, 1fr); }
  .adv__side-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
  .adv__side-stat  { flex-direction: column; text-align: center; padding: var(--space-3); }
}
@media (max-width: 640px) {
  .adv__grid { grid-template-columns: repeat(1, 1fr); }
}
@media (max-width: 420px) {
  .adv__grid { grid-template-columns: 1fr; }
}

/* FAQ */
@media (min-width: 1100px) {
  .faq__q-tag { display: inline-block; }
}
@media (max-width: 900px) {
  .faq__layout {
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .faq__list {
    border-right: none;
    border-bottom: 1px solid rgba(255,107,0,0.12);
    max-height: 280px;
  }
  .faq__answers { min-height: 340px; }
  .faq__answer  { position: relative; }
}
@media (max-width: 640px) {
  .faq__q {
    grid-template-columns: 28px 1fr auto;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
  .faq__q-tag    { display: none !important; }
  .faq__answer   { padding: var(--space-4); }
}



































































/* ============================================================
   BLOCK-22: PREPARATION FOR WORK
   BLOCK-23: COMMON MISTAKES
   TakelazhGroup
   Uses CSS custom properties from root.css throughout.
   ============================================================ */

/* ══════════════════════════════════════════
   BLOCK-22: PREPARATION
══════════════════════════════════════════ */

.prep {
  position: relative;
  background: var(--color-bg-base);
  padding: var(--section-py) 0 clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}

/* Ambient orange glow top-right */
.prep__bg-glow {
  position: absolute;
  top: -160px;
  right: -160px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 68%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: var(--z-behind);
}

/* Dot-matrix pattern */
.prep__pattern {
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
  pointer-events: none;
  opacity: 0.018;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* ── Section head ── */
.prep__head {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.prep__head-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.prep__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
  letter-spacing: var(--ls-tight);
  position: relative;
  width: fit-content;
}

.prep__title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 52px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.prep__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
  margin: var(--space-5) 0 0;
  max-width: 480px;
}

/* Nav buttons */
.prep__head-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.prep__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 107, 0, 0.20);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  flex-shrink: 0;
}

.prep__nav-btn:hover:not(:disabled) {
  background: var(--color-primary-subtle);
  border-color: var(--color-card-border);
  color: var(--color-primary);
  box-shadow: var(--glow-sm);
}

.prep__nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

/* ── Timeline wrapper ── */
.prep__timeline {
  position: relative;
}

/* Dashed connector line */
.prep__connector {
  position: relative;
  height: 28px;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.prep__connector-line {
  flex: 1;
  height: 1px;
  /* Dashed via repeating-linear-gradient — matches reference dots */
  background: repeating-linear-gradient(
    90deg,
    var(--color-primary)        0px,
    var(--color-primary)        4px,
    transparent                 4px,
    transparent                10px
  );
  opacity: 0.55;
}

.prep__connector-arrow {
  color: var(--color-primary);
  opacity: 0.55;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Track wrap — clips overflow for slider */
.prep__track-wrap {
  overflow: hidden;
  padding-top: 10px;
}

.prep__track {
  display: flex;
  gap: var(--space-4);          /* JS reads via getComputedStyle */
  transition: transform 0.45s var(--ease-industrial);
  will-change: transform;
}

/* ── Preparation card ── */
.prep-card {
  flex-shrink: 0;
  /* width set by JS — fleet pattern */
  min-height: 240px;
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255, 107, 0, 0.18);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow    var(--duration-normal) var(--ease-default),
    transform     var(--duration-normal) var(--ease-industrial);
}

.prep-card:hover {
  border-color: var(--color-card-border-hover);
  box-shadow:
    0 0 2px  var(--color-card-border-hover),
    0 0 40px rgba(255, 107, 0, 0.16);
  transform: translateY(-4px);
}

.prep-card--done {
  border-color: rgba(255, 107, 0, 0.30);
}

.prep-card--done:hover {
  border-color: var(--color-card-border-hover);
}

/* Corner accents */
.prep-card__c {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--color-card-border);
  border-style: solid;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default),
              border-color var(--duration-normal) var(--ease-default);
}

.prep-card:hover .prep-card__c {
  opacity: 0.90;
  border-color: var(--color-primary);
}

.prep-card__c--tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.prep-card__c--br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Watermark step number */
.prep-card__wm {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: var(--fw-black);
  color: rgba(255, 107, 0, 0.08);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  user-select: none;
  transition: color var(--duration-normal) var(--ease-default);
  pointer-events: none;
}

.prep-card:hover .prep-card__wm {
  color: rgba(255, 107, 0, 0.14);
}

/* Icon */
.prep-card__icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary);
  opacity: 0.80;
  transition: opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-industrial);
  flex-shrink: 0;
}

.prep-card:hover .prep-card__icon {
  opacity: 1;
  transform: scale(1.10);
}

.prep-card__icon svg {
  width: 100%;
  height: 100%;
}

/* Title */
.prep-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* Desc */
.prep-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
  flex: 1;
}

/* Checkmark bottom-left */
.prep-card__check {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 107, 0, 0.18);
  background: var(--color-bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: var(--transition-base);
}

.prep-card__check--active {
  border-color: var(--color-card-border);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  box-shadow: var(--glow-sm);
}

.prep-card:hover .prep-card__check:not(.prep-card__check--active) {
  border-color: rgba(255, 107, 0, 0.30);
  color: rgba(255, 107, 0, 0.40);
}

/* Dots navigation */
.prep__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.prep__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 107, 0, 0.25);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: var(--transition-base);
}

.prep__dot.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.35);
  box-shadow: 0 0 8px var(--color-primary-glow);
}

/* ══════════════════════════════════════════
   FADE-UP UTILITY — используется JS через classList
   Изолировано от hover-transition карточек:
   transition задан только для opacity + transform,
   НЕ для border-color / box-shadow.
══════════════════════════════════════════ */

.fade-up--hidden {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up--visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity  0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ══════════════════════════════════════════
   BLOCK-23: MISTAKES
══════════════════════════════════════════ */

.mistakes {
  position: relative;
  background: var(--color-bg-surface);
  padding: var(--section-py) 0;
  overflow: hidden;
}

.mistakes::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-divider);
}

/* Dot-matrix pattern */
.mistakes__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.016;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
  z-index: var(--z-behind);
}

/* ── Section head ── */
.mistakes__head {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.mistakes__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
  letter-spacing: var(--ls-tight);
  position: relative;
  width: fit-content;
}

.mistakes__title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 52px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.mistakes__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
  margin: var(--space-5) 0 0;
}

/* Right warning badge */
.mistakes__head-right {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: rgba(255, 107, 0, 0.05);
  border: 1px solid rgba(255, 107, 0, 0.18);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

.mistakes__warning-badge {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 107, 0, 0.10);
  border: 1px solid rgba(255, 107, 0, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.mistakes__warning-text {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── 3×2 grid ── */
.mistakes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* ── Mistake card ── */
.mistake-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255, 107, 0, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow    var(--duration-normal) var(--ease-default),
    transform     var(--duration-normal) var(--ease-industrial);
}

.mistake-card:hover {
  border-color: var(--color-card-border);
  box-shadow:
    0 0 2px  var(--color-card-border),
    0 0 40px rgba(255, 107, 0, 0.12);
  transform: translateY(-3px);
}

/* Orange left accent bar */
.mistake-card__bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
  opacity: 0.60;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  transition: opacity var(--duration-normal) var(--ease-default);
}

.mistake-card:hover .mistake-card__bar {
  opacity: 1;
}

/* Corner accents */
.mistake-card__c {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(255, 107, 0, 0.25);
  border-style: solid;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.mistake-card:hover .mistake-card__c {
  opacity: 0.80;
}

.mistake-card__c--tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 var(--radius-xl) 0 0; }
.mistake-card__c--bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-xl); }

/* Card head: icon + number */
.mistake-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* Warning triangle icon */
.mistake-card__icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 107, 0, 0.10);
  border: 1px solid rgba(255, 107, 0, 0.25);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
  transition: background var(--duration-normal) var(--ease-default),
              box-shadow  var(--duration-normal) var(--ease-default);
}

.mistake-card__icon svg {
  width: 22px;
  height: 22px;
}

.mistake-card:hover .mistake-card__icon {
  background: rgba(255, 107, 0, 0.16);
  box-shadow: var(--glow-sm);
}

/* Step number */
.mistake-card__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: var(--fw-black);
  color: rgba(255, 107, 0, 0.12);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  user-select: none;
  transition: color var(--duration-normal) var(--ease-default);
}

.mistake-card:hover .mistake-card__num {
  color: rgba(255, 107, 0, 0.22);
}

/* Card title */
.mistake-card__title {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  margin: 0;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Risk description */
.mistake-card__risk {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
  flex: 1;
}

/* Solution footer */
.mistake-card__solve {
  border-top: 1px solid rgba(255, 107, 0, 0.10);
  margin-top: auto;
  padding: var(--space-4) 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mistake-card__solve-label {
  display: block;
  font-size: 0.62rem;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.mistake-card__solve-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
  transition: color var(--duration-normal) var(--ease-default);
}

.mistake-card:hover .mistake-card__solve-text {
  color: var(--color-text-secondary);
}

/* Bottom CTA strip */
.mistakes__cta-strip {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding: var(--space-5) var(--space-8);
  background: rgba(255, 107, 0, 0.05);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.mistakes__cta-lead {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
  flex: 1;
}

.mistakes__cta-how {
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-right: var(--space-2);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* Preparation */
@media (max-width: 1100px) {
  .prep__head-inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .prep__head-controls { align-self: flex-end; }
}

@media (max-width: 640px) {
  .prep__nav-btn { width: 38px; height: 38px; }
  .prep-card { min-height: 200px; padding: var(--space-4) var(--space-4) var(--space-8); }
  .prep-card__wm { font-size: 3.5rem; }
}

/* Mistakes */
@media (max-width: 1100px) {
  .mistakes__head { grid-template-columns: 1fr; }
  .mistakes__head-right { max-width: 480px; }
  .mistakes__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .mistakes__grid { grid-template-columns: 1fr; }
  .mistakes__cta-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5);
  }
}

@media (max-width: 480px) {
  .mistake-card__head { flex-direction: row-reverse; }
}

section.prep article.prep-card,
section.prep article.prep-card:focus,
section.prep article.prep-card:focus-visible {
  border-color: rgba(255, 107, 0, 0.18);
  outline: none;
  box-shadow: none;
}

section.prep article.prep-card:hover {
  border-color: rgba(255, 107, 0, 0.65) !important;
  outline: none !important;
  box-shadow:
    0 0 2px  rgba(255, 107, 0, 0.65),
    0 0 40px rgba(255, 107, 0, 0.16) !important;
}

section.prep article.prep-card--done {
  border-color: rgba(255, 107, 0, 0.30);
}

section.mistakes article.mistake-card,
section.mistakes article.mistake-card:focus,
section.mistakes article.mistake-card:focus-visible {
  border-color: rgba(255, 107, 0, 0.12);
  outline: none;
  box-shadow: none;
}

section.mistakes article.mistake-card:hover {
  border-color: rgba(255, 107, 0, 0.25) !important;
  outline: none !important;
  box-shadow:
    0 0 2px  rgba(255, 107, 0, 0.25),
    0 0 40px rgba(255, 107, 0, 0.12) !important;
  transform: translateY(-3px);
}




























/* ============================================================
   BLOCK-24: SPECIAL OFFERS  +  BLOCK-25: ADDITIONAL SERVICES
   TakelazhGroup — v6
   ИСПРАВЛЕНО:
   - Иконка справа вверху, ribbon слева (не перекрываются)
   - Карточки одинаковой высоты (grid stretch, min-height)
   - Overlay через opacity/pointer-events, высота не меняется
   - CTA: btn-primary с color:#fff + data-modal="calculate"
   - Кнопка закрытия: modal__close (32px, radius-md, SVG 20×20)
   - Нет rgba(255,255,255,…) в hover-правилах карточек
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   BLOCK-24  SPECIAL OFFERS
══════════════════════════════════════════════════════════ */

.offers {
  position: relative;
  background: var(--color-bg-deep);
  padding: var(--section-py) 0;
  overflow: hidden;
}

/* Bokeh blobs */
.offers__bokeh--l,
.offers__bokeh--r,
.offers__bokeh--c {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.offers__bokeh--l {
  width: 700px; height: 700px;
  bottom: -150px; left: -220px;
  background: radial-gradient(circle, rgba(255,107,0,0.30) 0%, rgba(255,107,0,0.08) 40%, transparent 70%);
  filter: blur(65px);
}
.offers__bokeh--r {
  width: 550px; height: 550px;
  top: -100px; right: -180px;
  background: radial-gradient(circle, rgba(255,107,0,0.22) 0%, rgba(255,140,51,0.06) 45%, transparent 72%);
  filter: blur(75px);
}
.offers__bokeh--c {
  width: 320px; height: 320px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(255,107,0,0.07) 0%, transparent 65%);
  filter: blur(45px);
}
.offers__dots {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.018;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* ── Head ── */
.offers__head {
  position: relative; z-index: 1;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.offers__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: var(--space-3) 0 var(--space-2);
  position: relative; width: fit-content;
}
.offers__title::after {
  content: '';
  position: absolute; bottom: -10px; left: 0;
  width: 52px; height: 3px;
  background: var(--color-primary); border-radius: 2px;
}
.offers__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-5) 0 0;
}

/* ── Grid — stretch чтобы карточки одинаковой высоты ── */
.offers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  position: relative; z-index: 1;
  align-items: stretch;   /* одинаковая высота */
}

/* ── Offer card ── */
section.offers article.offer-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.18);
  border-radius: var(--radius-xl);
  overflow: hidden;
  outline: none;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.28s ease,
    box-shadow   0.28s ease,
    transform    0.28s cubic-bezier(0.22,1,0.36,1);
}
section.offers article.offer-card:hover {
  border-color: rgba(255,107,0,0.65) !important;
  box-shadow: 0 0 2px rgba(255,107,0,0.65), 0 0 48px rgba(255,107,0,0.18) !important;
  outline: none !important;
}
section.offers article.offer-card--accent {
  border-color: rgba(255,107,0,0.38);
  box-shadow: 0 0 2px rgba(255,107,0,0.38), 0 0 32px rgba(255,107,0,0.12);
}

/* ── Ribbon — левый угол, длинная лента ── */
.offer-card__ribbon {
  position: absolute; top: 0; left: 0;
  width: 140px; height: 140px;
  overflow: hidden; pointer-events: none; z-index: 3;
}
.offer-card__ribbon span {
  position: absolute;
  top: 34px; left: -40px;
  width: 160px; text-align: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: var(--fw-black);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 0;
  transform: rotate(-45deg);
  color: var(--color-text-inverse);
  background: var(--color-primary);
  box-shadow: 0 4px 18px rgba(255,107,0,0.65);
}
.offer-card__ribbon--gift span   { background: var(--color-primary-light); }
.offer-card__ribbon--annual span { background: var(--color-primary-dark); }

/* ── Corner accents ── */
.offer-card__c {
  position: absolute;
  width: 20px; height: 20px;
  border-style: solid; border-color: rgba(255,107,0,0.35);
  opacity: 0; pointer-events: none; z-index: 2;
  transition: opacity 0.28s ease, border-color 0.28s ease;
}
section.offers article.offer-card:hover .offer-card__c {
  opacity: 1; border-color: var(--color-primary);
}
.offer-card__c--tl { top:-1px; left:-1px;    border-width:2px 0 0 2px; border-radius:var(--radius-xl) 0 0 0; }
.offer-card__c--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-xl) 0; }

/* ── Body ── */
.offer-card__body {
  padding: var(--space-6) var(--space-6) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  flex: 1;
}

/* ── Иконка — правый верхний угол, не перекрыта ribbon ── */
.offer-card__icon-wrap {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 2;
}
.offer-card__icon {
  width: 52px; height: 52px;
  color: var(--color-primary);
  opacity: 0.82;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
section.offers article.offer-card:hover .offer-card__icon {
  opacity: 1; transform: scale(1.08);
}
.offer-card__icon svg { width: 100%; height: 100%; }

/* Отступ сверху в body под ribbon + icon, чтобы не налезали на текст */
.offer-card__body { padding-top: 90px; }

/* ── Title ── */
.offer-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

/* ── Sub ── */
.offer-card__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── Bullets ── */
.offer-card__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  flex: 1;
}
.offer-card__item {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-secondary); line-height: var(--lh-normal);
}
.offer-card__item svg { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }

/* ── Toggle "Подробнее" ── */
.offer-card__toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  align-self: flex-start;
  font-family: var(--font-ui); font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: rgba(255,107,0,0.75);
  background: none; border: none; cursor: pointer; padding: 0;
  margin-top: auto;
  padding-top: var(--space-3);
  transition: color 0.2s ease, gap 0.2s ease;
}
.offer-card__toggle:hover { color: var(--color-primary); gap: var(--space-3); }
.offer-card__toggle-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  transition: transform 0.32s ease;
}
.offer-card__toggle[aria-expanded="true"] .offer-card__toggle-icon { transform: rotate(180deg); }

/* ── Overlay поверх карточки — абсолютный, не влияет на layout ── */
.offer-card__overlay {
  position: absolute; inset: 0;
  background: rgba(13,13,13,0.97);
  border-radius: var(--radius-xl);
  display: flex; flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
  z-index: 20;
}
.offer-card__overlay.is-visible {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* ── Кнопка закрытия overlay — идентична modal__close по стилю ── */
.offer-card__overlay-close {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-base);
  z-index: 21;
}
.offer-card__overlay-close:hover {
  background: rgba(255,255,255,0.10);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

/* ── Scrollable content внутри overlay ── */
.offer-card__overlay-content {
  flex: 1; overflow-y: auto;
  padding: var(--space-12) var(--space-6) var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,0,0.25) transparent;
}
.offer-card__overlay-content::-webkit-scrollbar { width: 3px; }
.offer-card__overlay-content::-webkit-scrollbar-thumb {
  background: rgba(255,107,0,0.25); border-radius: 2px;
}

.offer-card__overlay-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
}
.offer-card__overlay-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.offer-card__overlay-list li {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-secondary);
  padding: var(--space-2) var(--space-3);
  background: rgba(255,107,0,0.05);
  border-left: 2px solid rgba(255,107,0,0.35);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.offer-card__overlay-list li svg { width: 14px; height: 14px; color: var(--color-primary); flex-shrink: 0; }

/* (CTA в overlay удалена по требованию) */


/* ══════════════════════════════════════════════════════════
   BLOCK-25  ADDITIONAL SERVICES
══════════════════════════════════════════════════════════ */

.addserv {
  position: relative;
  background: var(--color-bg-surface);
  padding: var(--section-py) 0;
  overflow: hidden;
}
.addserv::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--color-divider);
}
.addserv::after {
  content: '';
  position: absolute;
  width: 700px; height: 400px;
  bottom: -100px; right: -200px;
  background: radial-gradient(ellipse, rgba(255,107,0,0.13) 0%, transparent 65%);
  filter: blur(80px);
  pointer-events: none; z-index: 0;
}
.addserv__dots {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.013;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Head ── */
.addserv__head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative; z-index: 1;
}
.addserv__title {
  font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 100;
    text-transform: uppercase;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    line-height: var(--lh-snug);
    position: relative;
    width: fit-content;
    margin: 0px;
}
.addserv__title::after {
  content: '';
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 52px; height: 3px; background: var(--color-primary); border-radius: 2px;
}
.addserv__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-5) 0 0;
}

/* ── Grid 6×2 ── */
.addserv__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  position: relative; z-index: 1;
}

/* ── Service card ── */
section.addserv article.addserv-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-3) var(--space-4);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: var(--space-2);
  overflow: hidden; outline: none; cursor: pointer;
  transition:
    border-color 0.28s ease,
    box-shadow   0.28s ease,
    transform    0.28s cubic-bezier(0.22,1,0.36,1);
}
section.addserv article.addserv-card:hover,
section.addserv article.addserv-card:focus-visible {
  border-color: rgba(255,107,0,0.65) !important;
  box-shadow: 0 0 2px rgba(255,107,0,0.65), 0 0 32px rgba(255,107,0,0.14) !important;
  transform: translateY(-4px);
  outline: none !important;
}
section.addserv article.addserv-card.is-active {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 4px var(--color-primary), 0 0 24px rgba(255,107,0,0.22) !important;
}

/* Four corner accents */
.asc {
  position: absolute;
  width: 14px; height: 14px;
  border-style: solid; border-color: var(--color-primary);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s ease;
}
section.addserv article.addserv-card:hover .asc,
section.addserv article.addserv-card.is-active .asc { opacity: 0.80; }
.asc--tl { top:-1px; left:-1px;    border-width:2px 0 0 2px; border-radius:var(--radius-xl) 0 0 0; }
.asc--tr { top:-1px; right:-1px;   border-width:2px 2px 0 0; border-radius:0 var(--radius-xl) 0 0; }
.asc--bl { bottom:-1px; left:-1px;  border-width:0 0 2px 2px; border-radius:0 0 0 var(--radius-xl); }
.asc--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-xl) 0; }

.addserv-card__icon {
  width: 44px; height: 44px;
  color: var(--color-primary); opacity: 0.78; flex-shrink: 0;
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
section.addserv article.addserv-card:hover .addserv-card__icon { opacity: 1; transform: scale(1.12); }
.addserv-card__icon svg { width: 100%; height: 100%; }

.addserv-card__title {
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-primary); line-height: var(--lh-snug); margin: 0;
}
.addserv-card__desc {
  font-size: 0.70rem; color: var(--color-text-muted);
  line-height: var(--lh-normal); margin: 0; flex: 1;
}
.addserv-card__more {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: 0.68rem; font-weight: var(--fw-semibold);
  color: rgba(255,107,0,0.65);
  padding: 3px 10px;
  border: 1px solid rgba(255,107,0,0.22);
  border-radius: var(--radius-full);
  margin-top: auto;
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}
.addserv-card__more svg { width: 12px; height: 12px; flex-shrink: 0; }
section.addserv article.addserv-card:hover .addserv-card__more {
  color: var(--color-primary);
  border-color: rgba(255,107,0,0.50);
  gap: var(--space-2);
}


/* ══════════════════════════════════════════════════════════
   SLIDE DRAWER (block-25)
══════════════════════════════════════════════════════════ */

.serv-drawer {
  position: fixed; inset: 0;
  z-index: var(--z-overlay); pointer-events: none;
}
.serv-drawer[aria-hidden="false"] { pointer-events: all; }

.serv-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(8,8,8,0.75);
  opacity: 0;
  transition: opacity 0.35s ease;
  backdrop-filter: blur(4px);
}
.serv-drawer[aria-hidden="false"] .serv-drawer__backdrop { opacity: 1; }

.serv-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 92vw);
  background: var(--color-bg-raised);
  border-left: 1px solid rgba(255,107,0,0.22);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.22,1,0.36,1);
  box-shadow: -12px 0 60px rgba(0,0,0,0.75);
}
.serv-drawer__panel::before {
  content: '';
  position: absolute; top: 0; left: -1px; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--color-primary) 30%, var(--color-primary) 70%, transparent 100%);
  opacity: 0.55;
}
.serv-drawer[aria-hidden="false"] .serv-drawer__panel { transform: translateX(0); }

/* ── Кнопка закрытия drawer — идентична overlay-close из блока 24 ── */
.serv-drawer__close {
  position: absolute; top: var(--space-5); right: var(--space-5);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-base);
  z-index: 2;
}
.serv-drawer__close:hover {
  background: rgba(255,255,255,0.10);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.serv-drawer__inner {
  flex: 1; overflow-y: auto;
  padding: var(--space-12) var(--space-8) var(--space-6);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,107,0,0.28) transparent;
}
.serv-drawer__inner::-webkit-scrollbar { width: 3px; }
.serv-drawer__inner::-webkit-scrollbar-thumb { background: rgba(255,107,0,0.28); border-radius: 2px; }

.serv-drawer__icon { width: 52px; height: 52px; color: var(--color-primary); margin-bottom: var(--space-5); }
.serv-drawer__icon svg { width: 100%; height: 100%; }

.serv-drawer__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}
.serv-drawer__desc {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(255,107,0,0.12);
}
.serv-drawer__full {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  line-height: var(--lh-relaxed); margin: 0 0 var(--space-5);
}
.serv-drawer__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.serv-drawer__list li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--lh-normal);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,107,0,0.04);
  border: 1px solid rgba(255,107,0,0.10);
  border-radius: var(--radius-lg);
}
.serv-drawer__list li svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }

.serv-drawer__footer {
  padding: var(--space-5) var(--space-8);
  border-top: 1px solid rgba(255,107,0,0.12);
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
}

/* CTA в drawer — btn btn-primary + data-modal, белый шрифт */
.serv-drawer__footer .btn.btn-primary,
.serv-drawer__footer a.btn.btn-primary {
  color: #fff !important;
  text-decoration: none;
}
.serv-drawer__footer .btn.btn-primary:hover,
.serv-drawer__footer a.btn.btn-primary:hover {
  color: #fff !important;
}

/* (btn--ghost удалён — кнопка «Закрыть» в footer drawer убрана) */


/* ══════════════════════════════════════════════════════════
   FADE-UP UTILITY
══════════════════════════════════════════════════════════ */
[data-animate].fade-up--hidden {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
[data-animate].fade-up--visible { opacity: 1; transform: translateY(0); }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) { .offers__grid { gap: var(--space-4); } }
@media (max-width: 780px)  {
  .offers__grid { grid-template-columns: 1fr; max-width: 500px; margin-inline: auto; }
}

@media (max-width: 1200px) { .addserv__grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 860px)  { .addserv__grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 580px)  {
  .addserv__grid { grid-template-columns: repeat(2,1fr); }
  .addserv-card__desc { display: none; }
}
@media (max-width: 360px) {
  .addserv__grid { grid-template-columns: 1fr 1fr; }
  .addserv-card__more { display: none; }
}

@media (max-width: 520px) {
  .serv-drawer__panel {
    width: 100vw; border-left: none;
    border-top: 1px solid rgba(255,107,0,0.22);
    top: auto; bottom: 0; right: 0; left: 0;
    max-height: 86vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%);
  }
  .serv-drawer[aria-hidden="false"] .serv-drawer__panel { transform: translateY(0); }
  .serv-drawer__panel::before { display: none; }
  .serv-drawer__inner { padding: var(--space-8) var(--space-5) var(--space-4); }
  .serv-drawer__footer { padding: var(--space-4) var(--space-5); }
}





















































































/* ============================================================
   BLOCK-26: TECHNOLOGIES & EQUIPMENT — TakelazhGroup
   Референс: 012.jpeg (верхняя половина)
   Слева — меню категорий, справа — сетка 3×2 карточек
   Переключение категорий без перезагрузки (JS)
   Все цвета — из root.css, шрифты — из root.css
   ============================================================ */

.tech {
  position: relative;
  background: var(--color-bg-base);
  padding: var(--section-py) 0;
  overflow: hidden;
}

/* Фоновые блики */
.tech__bg-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.tech__bg-glow--r {
  width: 600px; height: 600px;
  top: -120px; right: -200px;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 68%);
  filter: blur(80px);
}
.tech__bg-glow--l {
  width: 400px; height: 400px;
  bottom: -80px; left: -120px;
  background: radial-gradient(circle, var(--color-blob-2) 0%, transparent 68%);
  filter: blur(70px);
}
.tech__pattern {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.015;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Head ── */
.tech__head {
  position: relative; z-index: 1;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.tech__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: var(--space-3) 0 var(--space-2);
  position: relative; width: fit-content;
}
.tech__title::after {
  content: '';
  position: absolute; bottom: -10px; left: 0;
  width: 64px; height: 3px;
  background: var(--color-primary); border-radius: 2px;
}
.tech__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-5) 0 0;
}

/* ── Two-column layout ── */
.tech__layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-8);
  position: relative; z-index: 1;
  align-items: start;
}

/* ══════════════════════════════════════════════════════════
   LEFT: Category nav
══════════════════════════════════════════════════════════ */

.tech__nav {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  background: var(--color-bg-raised);
  border: 1px solid rgba(255,107,0,0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  overflow: hidden;
}

/* Accent top bar */
.tech__nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
}

.tech__nav-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,107,0,0.12);
}

.tech__nav-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--space-1);
}

.tech__nav-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}
.tech__nav-btn-text {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  line-height: var(--lh-snug);
  transition: color 0.22s ease;
}
.tech__nav-btn-arrow {
  width: 16px; height: 16px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 0.22s ease, transform 0.22s ease;
}

/* hover */
.tech__nav-btn:hover {
  background: rgba(255,107,0,0.06);
  border-color: rgba(255,107,0,0.18);
}
.tech__nav-btn:hover .tech__nav-btn-text { color: var(--color-text-primary); }
.tech__nav-btn:hover .tech__nav-btn-arrow { color: var(--color-primary); }

/* active */
.tech__nav-btn.is-active {
  background: rgba(255,107,0,0.10);
  border-color: rgba(255,107,0,0.35);
}
.tech__nav-btn.is-active .tech__nav-btn-text {
  color: var(--color-text-primary);
  font-weight: var(--fw-bold);
}
.tech__nav-btn.is-active .tech__nav-btn-arrow {
  color: var(--color-primary);
  transform: translateX(3px);
}

/* ══════════════════════════════════════════════════════════
   RIGHT: Panels + grid
══════════════════════════════════════════════════════════ */

.tech__panels {
  position: relative;
  min-height: 400px;
}

/* Panel — скрыт по умолчанию */
.tech__panel {
  display: none;
}
.tech__panel.is-active {
  display: block;
  animation: techPanelIn 0.35s var(--ease-industrial) both;
}

@keyframes techPanelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 3-column grid */
.tech__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

/* ══════════════════════════════════════════════════════════
   TECH CARD
══════════════════════════════════════════════════════════ */

.tech-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex; flex-direction: column;
  gap: var(--space-3);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow   var(--duration-normal) var(--ease-default),
    transform    var(--duration-normal) var(--ease-industrial);
}

/* Subtle gradient shimmer in top-right */
.tech-card::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle at top right, rgba(255,107,0,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.tech-card:hover {
  border-color: rgba(255,107,0,0.40);
  box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 0 32px rgba(255,107,0,0.07);
  transform: translateY(-4px);
}

/* Corner accents — точно как .team-card__c */
.tech-card__c {
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(255,107,0,0.35);
  border-style: solid;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.tech-card:hover .tech-card__c { opacity: 0.80; }
.tech-card__c--tl { top:-1px; left:-1px;    border-width:2px 0 0 2px; border-radius:var(--radius-xl) 0 0 0; }
.tech-card__c--tr { top:-1px; right:-1px;   border-width:2px 2px 0 0; border-radius:0 var(--radius-xl) 0 0; }
.tech-card__c--bl { bottom:-1px; left:-1px;  border-width:0 0 2px 2px; border-radius:0 0 0 var(--radius-xl); }
.tech-card__c--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-xl) 0; }

/* Top row: icon + tag */
.tech-card__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
}

.tech-card__icon {
  width: 44px; height: 44px;
  color: var(--color-primary);
  opacity: 0.85;
  flex-shrink: 0;
  transition: opacity 0.26s ease, transform 0.26s var(--ease-industrial);
}
.tech-card:hover .tech-card__icon { opacity: 1; transform: scale(1.08); }
.tech-card__icon svg { width: 100%; height: 100%; }

.tech-card__tag {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-subtle);
  border: 1px solid rgba(255,107,0,0.20);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
  white-space: nowrap;
}

/* Title */
.tech-card__title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

/* Desc */
.tech-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  flex: 1;
  margin: 0;
}

/* Footer: badge */
.tech-card__footer {
  display: flex; align-items: center;
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,107,0,0.10);
}

.tech-card__badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(255,107,0,0.08);
  border: 1px solid rgba(255,107,0,0.22);
  border-radius: var(--radius-md);
  padding: 3px var(--space-3);
}


/* ══════════════════════════════════════════════════════════
   FADE-UP (shared utility pattern)
══════════════════════════════════════════════════════════ */
.tech [data-animate].fade-up--hidden {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.50s ease, transform 0.50s var(--ease-industrial);
}
.tech [data-animate].fade-up--visible { opacity: 1; transform: translateY(0); }


/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

/* 1200px — уже немного */
@media (max-width: 1200px) {
  .tech__layout { grid-template-columns: 260px 1fr; gap: var(--space-6); }
}

/* 1024px — 2 карточки в строку */
@media (max-width: 1024px) {
  .tech__layout { grid-template-columns: 240px 1fr; }
  .tech__grid { grid-template-columns: repeat(2, 1fr); }
}

/* 860px — nav сверху, горизонтальный скролл */
@media (max-width: 860px) {
  .tech__layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .tech__nav {
    position: static;
    padding: var(--space-4) var(--space-5);
  }
  .tech__nav-label { display: none; }
  .tech__nav-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }
  .tech__nav-list::-webkit-scrollbar { display: none; }
  .tech__nav-btn {
    white-space: nowrap;
    padding: var(--space-2) var(--space-4);
    flex-shrink: 0;
  }
  .tech__nav-btn-arrow { display: none; }
  .tech__grid { grid-template-columns: repeat(2, 1fr); }
}

/* 580px — 1 карточка */
@media (max-width: 580px) {
  .tech__grid { grid-template-columns: 1fr; }
  .tech__nav-btn-text { font-size: var(--text-xs); }
}







































/* ============================================================
   BLOCK-27: BLOG & NEWS — TakelazhGroup
   Референс: 012.jpeg (нижняя половина)
   Слайдер: 3 карточки, drag / swipe / dots / arrows
   Паттерн: fleet / prep (block-22-23)
   Только стандартные записи WordPress (post_type = post)
   Все значения — из root.css / style.css, нет сырых цветов
   ============================================================ */

/* ── Section ── */
.tkl27-blog {
  position: relative;
  background: var(--color-bg-surface);
  padding: 40px 0 40px;
  overflow: hidden;
}

.tkl27-blog::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-divider);
}

.tkl27-blog__bg-glow {
  position: absolute;
  top: -140px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 68%);
  filter: blur(80px);
  pointer-events: none;
  z-index: var(--z-behind);
}

.tkl27-blog__pattern {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  opacity: 0.013;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}


/* ── Head ── */
.tkl27-blog__head {
  position: relative; z-index: var(--z-raised);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.tkl27-blog__head-left  { flex: 1; min-width: 220px; }

.tkl27-blog__title {
  font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 100;
    text-transform: uppercase;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    line-height: var(--lh-snug);
    position: relative;
    width: fit-content;
    margin: 0px;
}
.tkl27-blog__title::after {
  content: '';
  position: absolute; bottom: -10px; left: 0;
  width: 64px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.tkl27-blog__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-5) 0 0;
}

.tkl27-blog__head-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Nav prev / next — точная копия .prep__nav-btn */
.tkl27-blog__controls {
  display: flex;
  gap: var(--space-2);
}

.tkl27-blog__nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,107,0,0.20);
  background: var(--color-bg-raised);
  color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: var(--transition-base);
  flex-shrink: 0;
}
.tkl27-blog__nav-btn:hover:not(:disabled) {
  background: var(--color-primary-subtle);
  border-color: var(--color-card-border);
  color: var(--color-primary);
  box-shadow: var(--glow-sm);
}
.tkl27-blog__nav-btn:disabled {
  opacity: 0.25;
  cursor: default;
}

/* «Все статьи» */
a.tkl27-blog__all-btn.btn.btn-primary {
  color: #fff !important;
  text-decoration: none;
}
a.tkl27-blog__all-btn.btn.btn-primary:hover {
  color: #fff !important;
}


/* ── Slider track ── */
.tkl27-blog__track-wrap {
  overflow: hidden;
  position: relative;
  z-index: var(--z-raised);
  cursor: grab;
  user-select: none;
}
.tkl27-blog__track-wrap:active { cursor: grabbing; }

.tkl27-blog__track {
  display: flex;
  gap: var(--space-5);
  list-style: none;
  padding: 0; margin: 0;
  transition: transform 0.45s var(--ease-industrial);
  will-change: transform;
}


/* ── Dots — точная копия .prep__dot ── */
.tkl27-blog__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  position: relative;
  z-index: var(--z-raised);
}

.tkl27-blog__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255,107,0,0.25);
  background: transparent;
  cursor: pointer; padding: 0;
  transition: var(--transition-base);
}
.tkl27-blog__dot.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.35);
  box-shadow: 0 0 8px var(--color-primary-glow);
}


/* ══════════════════════════════════════════
   BLOG CARD
══════════════════════════════════════════ */

.tkl27-blog-card {
  flex-shrink: 0;
  /* ширина задаётся JS — fleet/prep паттерн */
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow   var(--duration-normal) var(--ease-default),
    transform    var(--duration-normal) var(--ease-industrial);
}

.tkl27-blog-card:hover {
  border-color: rgba(255,107,0,0.40);
  box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 0 32px rgba(255,107,0,0.07);
  transform: translateY(-4px);
}

/* Corner accents — как team-card / tech-card */
.tkl27-blog-card__c {
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(255,107,0,0.35);
  border-style: solid;
  opacity: 0; pointer-events: none;
  z-index: var(--z-raised);
  transition: opacity var(--duration-normal) var(--ease-default);
}
.tkl27-blog-card:hover .tkl27-blog-card__c { opacity: 0.80; }
.tkl27-blog-card__c--tl { top:-1px; left:-1px;    border-width:2px 0 0 2px; border-radius:var(--radius-xl) 0 0 0; }
.tkl27-blog-card__c--tr { top:-1px; right:-1px;   border-width:2px 2px 0 0; border-radius:0 var(--radius-xl) 0 0; }
.tkl27-blog-card__c--bl { bottom:-1px; left:-1px;  border-width:0 0 2px 2px; border-radius:0 0 0 var(--radius-xl); }
.tkl27-blog-card__c--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-xl) 0; }


/* Thumbnail */
.tkl27-blog-card__thumb-link {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
}

.tkl27-blog-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-elevated);
}
.tkl27-blog-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.55s var(--ease-industrial);
}
.tkl27-blog-card:hover .tkl27-blog-card__thumb img { transform: scale(1.05); }

/* Placeholder */
.tkl27-blog-card__no-thumb {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-elevated);
}
.tkl27-blog-card__no-thumb svg {
  width: 44px; height: 44px;
  color: var(--color-text-muted);
  opacity: 0.35;
}

/* «Статья» — иконка-метка в левом нижнем углу thumbnail */
.tkl27-blog-card__type {
  position: absolute;
  bottom: var(--space-3); left: var(--space-3);
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  background: var(--color-bg-overlay);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  backdrop-filter: var(--glass-blur);
  z-index: var(--z-raised);
  user-select: none;
}

/* Категория — правый верхний угол thumbnail */
.tkl27-blog-card__cat {
  position: absolute;
  top: var(--space-3); right: var(--space-3);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: #000;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  line-height: 1;
  z-index: var(--z-raised);
}


/* Body */
.tkl27-blog-card__body {
  flex: 1;
  padding: var(--space-4) var(--space-5) var(--space-4);
  display: flex; flex-direction: column;
  gap: var(--space-3);
}

/* Meta */
.tkl27-blog-card__meta {
  display: flex; align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.tkl27-blog-card__date,
.tkl27-blog-card__read {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.tkl27-blog-card__dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex-shrink: 0;
}

/* Title */
.tkl27-blog-card__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
.tkl27-blog-card__title-link {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.tkl27-blog-card__title-link:hover { color: var(--color-primary); }

/* Excerpt */
.tkl27-blog-card__excerpt {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  flex: 1; margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* «Читать далее» */
.tkl27-blog-card__more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255,107,0,0.75);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,107,0,0.10);
  transition:
    color var(--duration-fast) var(--ease-default),
    gap   var(--duration-fast) var(--ease-default);
}
.tkl27-blog-card__more svg {
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-default);
}
.tkl27-blog-card__more:hover {
  color: var(--color-primary);
  gap: var(--space-3);
}
.tkl27-blog-card__more:hover svg { transform: translateX(3px); }


/* Empty state */
.tkl27-blog__empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) 0;
  color: var(--color-text-muted);
  text-align: center;
  position: relative; z-index: var(--z-raised);
}
.tkl27-blog__empty svg { opacity: 0.30; }
.tkl27-blog__empty p { font-size: var(--text-sm); }


/* ── Fade-up — изолировано от hover transition ── */
.tkl27-blog [data-animate].fade-up--hidden {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.55s ease,
    transform 0.55s var(--ease-industrial);
}
.tkl27-blog [data-animate].fade-up--visible {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* 860px: head переносится в колонку */
@media (max-width: 860px) {
  .tkl27-blog__head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-4);
  }
  .tkl27-blog__head-right { padding-bottom: 0; }
}

/* 480px: кнопки навигации меньше */
@media (max-width: 480px) {
  .tkl27-blog__nav-btn { width: 38px; height: 38px; }
  .tkl27-blog__all-btn { font-size: var(--text-xs); padding: 0.6rem 1.1rem; }
}











































/* ============================================================
   BLOG ARCHIVE PAGE — page-blog.php
   TakelazhGroup
   Страница со всеми записями блога (post_type = post)
   Сетка 3 колонки → 2 → 1
   ============================================================ */

.tkl27-blog-archive {
  position: relative;
  background: var(--color-bg-base);
  padding: calc(var(--header-height) + clamp(3rem, 6vw, 6rem)) 0 var(--section-py);
  min-height: 80vh;
  overflow: hidden;
}

.tkl27-blog-archive__bg-glow {
  position: absolute;
  top: -100px; right: -180px;
  width: 550px; height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 68%);
  filter: blur(80px);
  pointer-events: none;
  z-index: var(--z-behind);
}
.tkl27-blog-archive__pattern {
  position: absolute; inset: 0;
  pointer-events: none; z-index: var(--z-behind);
  opacity: 0.013;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Head */
.tkl27-blog-archive__head {
  position: relative; z-index: var(--z-raised);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  max-width: 600px;
}
.tkl27-blog-archive__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: var(--space-3) 0 var(--space-2);
  position: relative; width: fit-content;
}
.tkl27-blog-archive__title::after {
  content: '';
  position: absolute; bottom: -10px; left: 0;
  width: 64px; height: 3px;
  background: var(--color-primary); border-radius: 2px;
}
.tkl27-blog-archive__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-5) 0 0;
  line-height: var(--lh-relaxed);
}

/* Grid */
.tkl27-blog-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  position: relative; z-index: var(--z-raised);
}

/* Archive card */
.tkl27-blog-archive-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow   var(--duration-normal) var(--ease-default),
    transform    var(--duration-normal) var(--ease-industrial);
}
.tkl27-blog-archive-card:hover {
  border-color: rgba(255,107,0,0.40);
  box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 0 32px rgba(255,107,0,0.07);
  transform: translateY(-4px);
}

.tkl27-blog-archive-card__c {
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(255,107,0,0.35);
  border-style: solid;
  opacity: 0; pointer-events: none;
  z-index: var(--z-raised);
  transition: opacity var(--duration-normal) var(--ease-default);
}
.tkl27-blog-archive-card:hover .tkl27-blog-archive-card__c { opacity: 0.80; }
.tkl27-blog-archive-card__c--tl { top:-1px; left:-1px;    border-width:2px 0 0 2px; border-radius:var(--radius-xl) 0 0 0; }
.tkl27-blog-archive-card__c--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-xl) 0; }

.tkl27-blog-archive-card__thumb-link { display: block; text-decoration: none; flex-shrink: 0; }
.tkl27-blog-archive-card__thumb {
  position: relative; width: 100%; aspect-ratio: 16/9;
  overflow: hidden; background: var(--color-bg-elevated);
}
.tkl27-blog-archive-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.55s var(--ease-industrial);
}
.tkl27-blog-archive-card:hover .tkl27-blog-archive-card__thumb img { transform: scale(1.05); }
.tkl27-blog-archive-card__no-thumb {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-elevated);
}
.tkl27-blog-archive-card__no-thumb svg { width: 44px; height: 44px; color: var(--color-text-muted); opacity: 0.30; }

.tkl27-blog-archive-card__type {
  position: absolute; bottom: var(--space-3); left: var(--space-3);
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui); font-size: 0.65rem;
  font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--color-text-inverse);
  background: var(--color-bg-overlay); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm); padding: 3px var(--space-2);
  backdrop-filter: var(--glass-blur); z-index: var(--z-raised);
}
.tkl27-blog-archive-card__cat {
  position: absolute; top: var(--space-3); right: var(--space-3);
  font-family: var(--font-ui); font-size: 0.65rem;
  font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: #000;
  background: var(--color-primary); border-radius: var(--radius-sm);
  padding: 3px var(--space-2); line-height: 1; z-index: var(--z-raised);
}

.tkl27-blog-archive-card__body {
  flex: 1; padding: var(--space-4) var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.tkl27-blog-archive-card__meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.tkl27-blog-archive-card__meta span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.tkl27-blog-archive-card__title {
  font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: var(--fw-extrabold); text-transform: uppercase;
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight); margin: 0;
}
.tkl27-blog-archive-card__title a {
  color: var(--color-text-primary); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.tkl27-blog-archive-card__title a:hover { color: var(--color-primary); }
.tkl27-blog-archive-card__excerpt {
  font-size: var(--text-xs); color: var(--color-text-secondary);
  line-height: var(--lh-relaxed); flex: 1; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.tkl27-blog-archive-card__more {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: rgba(255,107,0,0.75); text-decoration: none; margin-top: auto;
  padding-top: var(--space-3); border-top: 1px solid rgba(255,107,0,0.10);
  transition: color var(--duration-fast) var(--ease-default), gap var(--duration-fast) var(--ease-default);
}
.tkl27-blog-archive-card__more svg { flex-shrink: 0; transition: transform var(--duration-fast) var(--ease-default); }
.tkl27-blog-archive-card__more:hover { color: var(--color-primary); gap: var(--space-3); }
.tkl27-blog-archive-card__more:hover svg { transform: translateX(3px); }

/* Pagination */
.tkl27-blog-pagination {
  display: flex; justify-content: center; align-items: center;
  gap: var(--space-2); flex-wrap: wrap;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  position: relative; z-index: var(--z-raised);
}
.tkl27-blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--space-3);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition:
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    background var(--duration-fast) var(--ease-default);
}
.tkl27-blog-pagination .page-numbers:hover {
  border-color: rgba(255,107,0,0.40);
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}
.tkl27-blog-pagination .page-numbers.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #000;
  font-weight: var(--fw-bold);
}
.tkl27-blog-pagination .page-numbers.dots {
  border-color: transparent; background: transparent;
  pointer-events: none; color: var(--color-text-muted);
}
.tkl27-blog-pagination .prev svg,
.tkl27-blog-pagination .next svg { display: block; }

/* Empty */
.tkl27-blog-archive__empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4); padding: var(--space-12) 0;
  color: var(--color-text-muted); text-align: center;
}
.tkl27-blog-archive__empty svg { opacity: 0.25; }
.tkl27-blog-archive__empty p { font-size: var(--text-sm); }

/* Breadcrumbs */
.tkl27-blog-archive__breadcrumbs {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  position: relative; z-index: var(--z-raised);
}
.tkl27-blog-archive__breadcrumbs a {
  color: var(--color-text-muted); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.tkl27-blog-archive__breadcrumbs a:hover { color: var(--color-primary); }
.tkl27-blog-archive__breadcrumbs span[aria-hidden] { display: flex; align-items: center; opacity: 0.4; }
.tkl27-blog-archive__breadcrumbs span[aria-current] { color: var(--color-text-secondary); }

/* Category filter */
.tkl27-blog-archive__filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  position: relative; z-index: var(--z-raised);
}
.tkl27-blog-archive__filter-btn {
  display: inline-flex; align-items: center;
  padding: 6px var(--space-4);
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide);
  text-transform: uppercase; text-decoration: none;
  color: var(--color-text-secondary);
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.15);
  border-radius: var(--radius-full);
  transition:
    border-color var(--duration-fast) var(--ease-default),
    color var(--duration-fast) var(--ease-default),
    background var(--duration-fast) var(--ease-default);
}
.tkl27-blog-archive__filter-btn:hover {
  border-color: rgba(255,107,0,0.45);
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}
.tkl27-blog-archive__filter-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #000;
  font-weight: var(--fw-bold);
}

/* Responsive */
@media (max-width: 1024px) { .tkl27-blog-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .tkl27-blog-archive__grid { grid-template-columns: 1fr; } }
















































/* ============================================================
   BLOCK-28: ПАРТНЁРЫ И ПОСТАВЩИКИ — TakelazhGroup
   Референс: 013.jpeg (верхняя половина)
   Все значения — из root.css / style.css, нет сырых цветов
   ============================================================ */

/* ── Section ── */
.tkl28-partners {
  position: relative;
  background: var(--color-bg-base);
  padding: var(--section-py) 0;
  overflow: hidden;
}

.tkl28-partners::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-divider);
}

.tkl28-partners__bg-glow {
  position: absolute;
  bottom: -160px; left: -200px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 68%);
  filter: blur(80px);
  pointer-events: none;
  z-index: var(--z-behind);
}

.tkl28-partners__pattern {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  opacity: 0.012;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Layout: заголовок слева (1/4), сетка справа (3/4) ── */
.tkl28-partners__layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: flex-start;
  position: relative; z-index: var(--z-raised);
}

/* Intro поднимается к верхней границе сетки карточек */
.tkl28-partners__intro {
  padding-top: 0;
}

/* ── Intro (левая колонка) ── */
.tkl28-partners__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: var(--space-2) 0 var(--space-2);
  position: relative; width: fit-content;
}

.tkl28-partners__title::after {
  content: '';
  position: absolute; bottom: -10px; left: 0;
  width: 48px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.tkl28-partners__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: var(--space-5) 0 0;
}

/* ── Grid: 5 cols × 2 rows ── */
.tkl28-partners__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}

/* ── Partner card ── */
.tkl28-partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  background: var(--color-card-bg);
  border: 1px solid rgba(255, 107, 0, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-3);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow   var(--duration-normal) var(--ease-default),
    transform    var(--duration-normal) var(--ease-default),
    background   var(--duration-normal) var(--ease-default);
  overflow: hidden;
}

.tkl28-partner-card:hover {
  border-color: rgba(255, 107, 0, 0.45);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    var(--glow-card);
  transform: translateY(-3px);
  background: var(--color-bg-raised);
}

/* Corner accents */
.tkl28-partner-card__c {
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--color-primary);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
  pointer-events: none;
}

.tkl28-partner-card:hover .tkl28-partner-card__c { opacity: 0.75; }

.tkl28-partner-card__c--tl { top: -1px; left: -1px;
  border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.tkl28-partner-card__c--tr { top: -1px; right: -1px;
  border-width: 2px 2px 0 0; border-radius: 0 var(--radius-xl) 0 0; }
.tkl28-partner-card__c--bl { bottom: -1px; left: -1px;
  border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-xl); }
.tkl28-partner-card__c--br { bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Card inner: name + sub */
.tkl28-partner-card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.tkl28-partner-card__name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-primary);
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-default);
}

.tkl28-partner-card:hover .tkl28-partner-card__name {
  color: var(--color-primary);
}

.tkl28-partner-card__sub {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--color-text-muted);
  line-height: 1;
}

/* Badge */
.tkl28-partner-card__badge {
  position: absolute;
  bottom: var(--space-2); left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-bg-base);
  background: var(--color-primary);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.5;
}

/* ── Footer ── */
.tkl28-partners__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  flex-wrap: wrap;
  position: relative; z-index: var(--z-raised);
}

.tkl28-partners__footer-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.tkl28-partners__all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.tkl28-partners__all-link:hover {
  color: var(--color-primary-light);
  gap: var(--space-3);
}

.tkl28-partners__all-link svg {
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-default);
}

.tkl28-partners__all-link:hover svg { transform: translateX(3px); }

/* ── Fade-up (глобальный observer из block-02-hero.js) ── */
.tkl28-partners [data-animate] {
  transition: opacity var(--duration-slow) var(--ease-industrial),
              transform var(--duration-slow) var(--ease-industrial);
}

/* ── Адаптив ── */
@media (max-width: 1100px) {
  .tkl28-partners__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 900px) {
  .tkl28-partners__layout {
    grid-template-columns: 1fr;
  }

  .tkl28-partners__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 640px) {
  .tkl28-partners__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .tkl28-partner-card {
    min-height: 80px;
  }
}

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


/* ============================================================
   BLOCK-29: ВИДЕО О РАБОТЕ — TakelazhGroup
   Референс: 013.jpeg (нижняя половина)
   Плеер: кастомный HTML5, паттерн из block-12/DomRomanoff
   Все значения — из root.css / style.css, нет сырых цветов
   ============================================================ */

/* ── Section ── */
.tkl29-video {
  position: relative;
  background: var(--color-bg-surface);
  padding: var(--section-py) 0;
  overflow: hidden;
}

.tkl29-video::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-divider);
}

.tkl29-video__bg-glow {
  position: absolute;
  top: -100px; right: -180px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 68%);
  filter: blur(80px);
  pointer-events: none;
  z-index: var(--z-behind);
}

.tkl29-video__pattern {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  opacity: 0.012;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Layout: заголовок слева (1/4), плеер+превью справа (3/4) ── */
.tkl29-video__layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  position: relative; z-index: var(--z-raised);
}

/* ── Intro (левая колонка) ── */
.tkl29-video__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: var(--space-3) 0 var(--space-2);
  position: relative; width: fit-content;
}

.tkl29-video__title::after {
  content: '';
  position: absolute; bottom: -10px; left: 0;
  width: 48px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.tkl29-video__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: var(--space-5) 0 var(--space-8);
}

.tkl29-video__all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: none;
  transition: gap var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.tkl29-video__all-link:hover {
  color: var(--color-primary-light);
  gap: var(--space-3);
}

.tkl29-video__all-link svg {
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-default);
}

.tkl29-video__all-link:hover svg { transform: translateX(3px); }

/* ── Правая колонка: плеер + боковые превью ── */
.tkl29-video__right {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-3);
  align-items: center;
}

/* Угловые акценты обёртки */
.tkl29-video__frame-c {
  position: absolute;
  width: 20px; height: 20px;
  border: 2px solid var(--color-primary);
  opacity: 0.55;
  pointer-events: none;
  z-index: 2;
}

.tkl29-video__frame-c--tl { top: -8px; left: -8px;
  border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.tkl29-video__frame-c--tr { top: -8px; right: -8px;
  border-width: 2px 2px 0 0; border-radius: 0 var(--radius-xl) 0 0; }
.tkl29-video__frame-c--bl { bottom: -8px; left: -8px;
  border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-xl); }
.tkl29-video__frame-c--br { bottom: -8px; right: -8px;
  border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* ============================================================
   ПЛЕЕР
   ============================================================ */

/* [hidden] всегда выигрывает */
.tkl29-player [hidden] { display: none !important; }

.tkl29-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: #000;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 107, 0, 0.15);
  user-select: none;
  -webkit-user-select: none;
}

.tkl29-player.tkl29-player--hide-cursor { cursor: none; }

/* Видео */
.tkl29-player__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #000;
}

/* ── Центральная зона ── */
.tkl29-player__center {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-default);
}

.tkl29-player__center-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}

/* Круг-кнопка */
.tkl29-player__center-btn {
  width: 72px; height: 72px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 2px solid rgba(255, 107, 0, 0.5);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.tkl29-player__center-btn svg.tkl29-icon--play { margin-left: 3px; }

/* ПАУЗА: тёмный overlay, кнопка пульсирует */
.tkl29-player:not(.tkl29-player--playing) .tkl29-player__center {
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);
}

.tkl29-player:not(.tkl29-player--playing) .tkl29-player__center-btn {
  border-color: rgba(255, 107, 0, 0.65);
  animation: tkl29Pulse 2.8s ease-in-out infinite;
}

.tkl29-player:not(.tkl29-player--playing) .tkl29-icon--pause { display: none !important; }
.tkl29-player:not(.tkl29-player--playing) .tkl29-icon--play  { display: block !important; }

.tkl29-player:not(.tkl29-player--playing) .tkl29-player__center:hover .tkl29-player__center-btn {
  background: rgba(255, 107, 0, 0.22);
  border-color: var(--color-primary);
  transform: scale(1.08);
  animation: none;
  box-shadow: 0 0 0 12px rgba(255, 107, 0, 0.10);
}

/* ВОСПРОИЗВЕДЕНИЕ */
.tkl29-player--playing .tkl29-player__center {
  background: transparent;
}

.tkl29-player--playing .tkl29-player__center-state {
  opacity: 0;
  transform: scale(0.9);
}

.tkl29-player--playing .tkl29-icon--play  { display: none !important; }
.tkl29-player--playing .tkl29-icon--pause { display: block !important; }

.tkl29-player--playing .tkl29-player__center:hover .tkl29-player__center-state {
  opacity: 1;
  transform: scale(1);
}

.tkl29-player--playing .tkl29-player__center:hover .tkl29-player__center-btn {
  background: rgba(0, 0, 0, 0.52);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.06);
  animation: none;
}

/* IDLE */
.tkl29-player--playing.tkl29-player--idle .tkl29-player__center {
  pointer-events: none;
  opacity: 0;
}

/* ── Вспышка при клике ── */
.tkl29-player__flash {
  position: absolute;
  top: 50%; left: 50%;
  width: 68px; height: 68px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  z-index: 9;
}

.tkl29-player__flash svg.tkl29-icon--play  { margin-left: 3px; }
.tkl29-player__flash svg.tkl29-icon--pause { display: none !important; }
.tkl29-player__flash svg.tkl29-icon--play  { display: block !important; }

.tkl29-player__flash.is-pause svg.tkl29-icon--play  { display: none !important; }
.tkl29-player__flash.is-pause svg.tkl29-icon--pause { display: block !important; }

.tkl29-player__flash.tkl29-flash-run {
  animation: tkl29Flash 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Метаданные видео — верхняя часть, скрываются при воспроизведении ── */
.tkl29-player__meta {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  z-index: 6;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, transparent 100%);
  transition: opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
  pointer-events: none;
}

/* Скрываем при воспроизведении */
.tkl29-player--playing .tkl29-player__meta {
  opacity: 0;
  transform: translateY(-6px);
  transition-delay: 0.8s;
}

/* При hover во время воспроизведения — показываем */
.tkl29-player--playing .tkl29-player__center:hover ~ .tkl29-player__meta,
.tkl29-player--playing:hover .tkl29-player__meta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* При idle — тоже скрыто */
.tkl29-player--playing.tkl29-player--idle .tkl29-player__meta {
  opacity: 0;
  transform: translateY(-6px);
}

.tkl29-player__meta-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tkl29-player__meta-title {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  line-height: var(--lh-snug);
}

.tkl29-player__meta-sub {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  line-height: 1;
}


.tkl29-player__meta-dur {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0,0,0,0.65);
  padding: 3px var(--space-2);
  border-radius: var(--radius-md);
  white-space: nowrap;
}

/* ── Панель управления ── */
.tkl29-player__controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px var(--space-4) var(--space-3);
  background: linear-gradient(0deg,
    rgba(0,0,0,0.90) 0%,
    rgba(0,0,0,0.45) 55%,
    transparent 100%
  );
  transition: opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
  z-index: 6;
}

.tkl29-player--playing.tkl29-player--idle .tkl29-player__controls {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* Прогресс-бар */
.tkl29-player__progress {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
  cursor: pointer;
  transition: height var(--duration-fast) var(--ease-default);
}

.tkl29-player__progress:hover { height: 6px; }

.tkl29-player__buffer {
  position: absolute; top: 0; left: 0; height: 100%;
  background: rgba(255,255,255,0.25);
  border-radius: var(--radius-full);
  pointer-events: none;
}

.tkl29-player__played {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-full);
  pointer-events: none;
  width: 0%;
}

.tkl29-player__scrubber {
  position: absolute; top: 50%; left: 0%;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--duration-fast) var(--ease-default);
}

.tkl29-player__progress:hover .tkl29-player__scrubber {
  transform: translate(-50%, -50%) scale(1);
}

/* Нижняя строка панели */
.tkl29-player__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.tkl29-player__bar-left,
.tkl29-player__bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Кнопки панели */
.tkl29-ctrl-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.82);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
  padding: 0;
}

.tkl29-ctrl-btn:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
  transform: scale(1.06);
}

.tkl29-ctrl-btn:active { transform: scale(0.94); }

.tkl29-ctrl-btn--text {
  width: auto;
  min-width: 34px;
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  font-family: var(--font-ui);
  letter-spacing: var(--ls-wide);
  color: rgba(255,255,255,0.82);
}

.tkl29-ctrl-btn__badge {
  position: absolute;
  bottom: 2px; right: 2px;
  font-size: 7px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
  pointer-events: none;
}

.tkl29-ctrl-btn svg { flex-shrink: 0; }

/* Громкость */
.tkl29-player__vol {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tkl29-vol-track {
  width: 64px; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: var(--radius-full);
  position: relative;
  cursor: pointer;
  transition: height var(--duration-fast) var(--ease-default);
}

.tkl29-vol-track:hover { height: 6px; }

.tkl29-vol-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  pointer-events: none;
  width: 100%;
}

.tkl29-vol-thumb {
  position: absolute; top: 50%; left: 100%;
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--duration-fast) var(--ease-default);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.tkl29-vol-track:hover .tkl29-vol-thumb {
  transform: translate(-50%, -50%) scale(1);
}

/* Время */
.tkl29-player__time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 0 var(--space-2);
}

.tkl29-player__time-sep { color: rgba(255,255,255,0.3); }

/* ── Боковые превью ── */
.tkl29-video__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tkl29-thumb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow   var(--duration-normal) var(--ease-default),
    transform    var(--duration-normal) var(--ease-default);
}

.tkl29-thumb-card:hover {
  border-color: rgba(255,107,0,0.45);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), var(--glow-card);
  transform: translateY(-2px);
}

.tkl29-thumb-card.is-active {
  border-color: var(--color-primary);
  box-shadow: var(--glow-sm);
}

/* Corner accents */
.tkl29-thumb-card__c {
  position: absolute;
  width: 10px; height: 10px;
  border: 2px solid var(--color-primary);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
  pointer-events: none;
  z-index: 2;
}

.tkl29-thumb-card:hover .tkl29-thumb-card__c,
.tkl29-thumb-card.is-active .tkl29-thumb-card__c { opacity: 0.80; }

.tkl29-thumb-card__c--tl { top: -1px; left: -1px;
  border-width: 2px 0 0 2px; border-radius: var(--radius-lg) 0 0 0; }
.tkl29-thumb-card__c--br { bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-lg) 0; }

/* Превью-изображение */
.tkl29-thumb-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.tkl29-thumb-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-normal) var(--ease-default);
}

.tkl29-thumb-card:hover .tkl29-thumb-card__thumb img { transform: scale(1.05); }

/* Play overlay на превью */
.tkl29-thumb-card__play-icon {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  color: #fff;
  transition: background var(--duration-fast) var(--ease-default);
}

.tkl29-thumb-card:hover .tkl29-thumb-card__play-icon,
.tkl29-thumb-card.is-active .tkl29-thumb-card__play-icon {
  background: rgba(255,107,0,0.45);
}

.tkl29-thumb-card__play-icon svg {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

/* Длительность */
.tkl29-thumb-card__dur {
  position: absolute;
  bottom: var(--space-2); right: var(--space-2);
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(0,0,0,0.70);
  padding: 2px var(--space-2);
  border-radius: var(--radius-md);
  line-height: 1.5;
}

/* Текст превью */
.tkl29-thumb-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.tkl29-thumb-card__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
  transition: color var(--duration-fast) var(--ease-default);
}

.tkl29-thumb-card:hover .tkl29-thumb-card__title { color: var(--color-primary-light); }

.tkl29-thumb-card__views {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Анимации ── */
@keyframes tkl29Pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(255, 107, 0, 0.5); }
  50%       { box-shadow: 0 0 0 16px rgba(255, 107, 0, 0); }
}

@keyframes tkl29Flash {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}

/* ── Fade-up ── */
.tkl29-video [data-animate] {
  transition: opacity var(--duration-slow) var(--ease-industrial),
              transform var(--duration-slow) var(--ease-industrial);
}

/* ── Адаптив ── */
@media (max-width: 1100px) {
  .tkl29-video__right {
    grid-template-columns: 1fr 200px;
  }
}

@media (max-width: 900px) {
  .tkl29-video__layout {
    grid-template-columns: 1fr;
  }

  .tkl29-video__right {
    grid-template-columns: 1fr 200px;
  }

  .tkl29-video__all-link { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .tkl29-video__right {
    grid-template-columns: 1fr;
  }

  .tkl29-video__aside {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
  }

  .tkl29-video__aside::-webkit-scrollbar { display: none; }

  .tkl29-thumb-card {
    min-width: 200px;
    flex-shrink: 0;
  }

  .tkl29-video__frame-c { display: none; }

  .tkl29-player__meta-sub {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .tkl29-player__vol { display: none; }

  .tkl29-vol-track  { width: 48px; }
}



















































/* ============================================================
   BLOCK-30: СРАВНЕНИЕ — TakelazhGroup
   Референс: 014.jpeg (верхняя половина)
   Все значения — из root.css / style.css, нет сырых цветов
   ============================================================ */

/* ── Section ── */
.tkl30-compare {
  position: relative;
  background: var(--color-bg-base);
  padding: 40px 0 40px;
  overflow: hidden;
}

.tkl30-compare::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-divider);
}

.tkl30-compare__bg-glow {
  position: absolute;
  top: -120px; right: -160px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 68%);
  filter: blur(80px);
  pointer-events: none;
  z-index: var(--z-behind);
}

.tkl30-compare__pattern {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  opacity: 0.012;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* VS watermark */
.tkl30-compare__watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(8rem, 18vw, 18rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: var(--z-behind);
  line-height: 1;
  white-space: nowrap;
}

/* ── Head ── */
.tkl30-compare__head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  position: relative; z-index: var(--z-raised);
}

.tkl30-compare__title {
  font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 100;
    text-transform: uppercase;
    color: var(--color-text-primary);
    letter-spacing: -0.01em;
    line-height: var(--lh-snug);
    position: relative;
    margin: 0px;
}

.tkl30-compare__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Wrap: таблица с corner accents и бордером ── */
.tkl30-compare__wrap {
  position: relative;
  z-index: var(--z-raised);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--color-card-bg);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    var(--glow-card);
}

/* Corner accents */
.tkl30-compare__c {
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid var(--color-primary);
  opacity: 0.6;
  pointer-events: none;
  z-index: 2;
}

.tkl30-compare__c--tl { top: -1px; left: -1px;
  border-width: 2px 0 0 2px; border-radius: var(--radius-2xl) 0 0 0; }
.tkl30-compare__c--tr { top: -1px; right: -1px;
  border-width: 2px 2px 0 0; border-radius: 0 var(--radius-2xl) 0 0; }
.tkl30-compare__c--bl { bottom: -1px; left: -1px;
  border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-2xl); }
.tkl30-compare__c--br { bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-2xl) 0; }

/* ── Таблица ── */
.tkl30-compare__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Заголовки колонок */
.tkl30-compare__th {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--color-text-muted);
  background: var(--color-bg-raised);
  border-bottom: 1px solid rgba(255, 107, 0, 0.15);
  text-align: left;
  vertical-align: middle;
}

.tkl30-compare__th--param { width: 30%; }
.tkl30-compare__th--us    { width: 30%; }
.tkl30-compare__th--vs    { width: 6%;  text-align: center; }
.tkl30-compare__th--them  { width: 34%; }

.tkl30-compare__th--us {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tkl30-compare__col-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-widest);
}

.tkl30-compare__col-brand {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

/* Строки */
.tkl30-compare__row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--duration-fast) var(--ease-default);
}

.tkl30-compare__row:last-child { border-bottom: none; }

.tkl30-compare__row:hover {
  background: rgba(255, 107, 0, 0.04);
}

/* Ячейки */
.tkl30-compare__td {
  padding: var(--space-4) var(--space-5);
  vertical-align: middle;
}

/* Параметр */
.tkl30-compare__td--param {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0;
}

/* Мы */
.tkl30-compare__td--us {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(46, 204, 113, 0.04);
}

/* VS */
.tkl30-compare__td--vs {
  text-align: center;
  padding: 0;
  vertical-align: middle;
}

.tkl30-compare__vs-divider {
  display: block;
  width: 1px;
  height: 100%;
  min-height: 48px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 107, 0, 0.40) 30%,
    rgba(255, 107, 0, 0.40) 70%,
    transparent 100%
  );
  margin: 0 auto;
}

/* Другие */
.tkl30-compare__td--them {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Иконки */
.tkl30-compare__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tkl30-compare__icon--yes {
  background: rgba(46, 204, 113, 0.15);
  color: var(--color-success);
  border: 1px solid rgba(46, 204, 113, 0.3);
}

.tkl30-compare__icon--bad {
  background: rgba(231, 76, 60, 0.12);
  color: var(--color-error);
  border: 1px solid rgba(231, 76, 60, 0.25);
}

.tkl30-compare__icon--warn {
  background: rgba(243, 156, 18, 0.12);
  color: var(--color-warning);
  border: 1px solid rgba(243, 156, 18, 0.25);
}

/* Значения */
.tkl30-compare__val {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
}

.tkl30-compare__val--us {
  font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}

.tkl30-compare__val--them {
  color: var(--color-text-muted);
  font-weight: var(--fw-medium);
}

/* ── CTA-строка внутри обёртки ── */
.tkl30-compare__cta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5);
  background: var(--color-bg-raised);
  border-top: 1px solid rgba(255, 107, 0, 0.20);
  flex-wrap: wrap;
}

.tkl30-compare__cta-primary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: none;
  border-radius: var(--btn-radius);
  transition: background var(--duration-fast) var(--ease-default),
              box-shadow  var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  min-width: 0;
}

.tkl30-compare__cta-primary:hover {
  background: var(--color-primary-light);
  box-shadow: var(--glow-sm);
}

.tkl30-compare__cta-primary svg { flex-shrink: 0; }

.tkl30-compare__cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: none;
  border-radius: var(--btn-radius);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.tkl30-compare__cta-secondary:hover {
  color: var(--color-text-primary);
  border-color: var(--color-primary);
}

/* ── Адаптив блока 30 ── */
@media (max-width: 860px) {
  .tkl30-compare__table,
  .tkl30-compare__table thead,
  .tkl30-compare__table tbody,
  .tkl30-compare__table tr,
  .tkl30-compare__table th,
  .tkl30-compare__table td {
    display: block;
  }

  .tkl30-compare__th--vs,
  .tkl30-compare__td--vs { display: none; }

  .tkl30-compare__row {
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-2) var(--space-4);
  }

  .tkl30-compare__td--param {
    grid-column: 1 / -1;
    padding: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
  }

  .tkl30-compare__td--us,
  .tkl30-compare__td--them {
    padding: 0;
    background: none;
  }

  .tkl30-compare__th {
    display: none;
  }

  .tkl30-compare__cta {
    flex-direction: column;
  }

  .tkl30-compare__cta-primary { width: 100%; flex: none; }
  .tkl30-compare__cta-secondary { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .tkl30-compare__row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   BLOCK-31: ОПАСНЫЕ ГРУЗЫ — TakelazhGroup
   Референс: 014.jpeg (нижняя половина)
   Все значения — из root.css / style.css, нет сырых цветов
   ============================================================ */

/* ── Section ── */
.tkl31-danger {
  position: relative;
  background: var(--color-bg-surface);
  padding: var(--section-py) 0;
  overflow: hidden;
}

.tkl31-danger::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-divider);
}

.tkl31-danger__bg-glow {
  position: absolute;
  bottom: -100px; left: -160px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blob-2) 0%, transparent 68%);
  filter: blur(80px);
  pointer-events: none;
  z-index: var(--z-behind);
}

.tkl31-danger__pattern {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  opacity: 0.012;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Диагональные полосы — «опасная зона» — фоновая текстура */
.tkl31-danger__stripes {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  opacity: 0.018;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--color-primary) 0px,
    var(--color-primary) 2px,
    transparent 2px,
    transparent 28px
  );
}

/* ── Layout ── */
.tkl31-danger__layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  position: relative; z-index: var(--z-raised);
}

/* ── Intro ── */
.tkl31-danger__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: var(--space-2) 0 var(--space-2);
  position: relative; width: fit-content;
}

.tkl31-danger__title::after {
  content: '';
  position: absolute; bottom: -10px; left: 0;
  width: 48px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.tkl31-danger__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: var(--space-5) 0 var(--space-6);
}

/* ── Список карточек ── */
.tkl31-danger__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Карточка класса опасности ── */
.tkl31-danger-card {
  border-radius: var(--radius-lg);
  background: var(--color-card-bg);
  border: 1px solid rgba(255, 107, 0, 0.12);
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow   var(--duration-normal) var(--ease-default);
}

.tkl31-danger-card:hover,
.tkl31-danger-card.is-open {
  border-color: rgba(255, 107, 0, 0.40);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), var(--glow-card);
}

/* Цветовые акценты по типу */
.tkl31-danger-card--red   { border-left: 3px solid var(--color-error);   }
.tkl31-danger-card--yellow { border-left: 3px solid var(--color-warning); }
.tkl31-danger-card--orange { border-left: 3px solid var(--color-primary); }

/* Trigger */
.tkl31-danger-card__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background var(--duration-fast) var(--ease-default);
}

.tkl31-danger-card__trigger:hover {
  background: rgba(255, 107, 0, 0.04);
}

/* Иконка */
.tkl31-danger-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-default),
              color       var(--duration-fast) var(--ease-default);
}

.tkl31-danger-card--red    .tkl31-danger-card__icon { background: rgba(231, 76, 60, 0.12); color: var(--color-error);   }
.tkl31-danger-card--yellow .tkl31-danger-card__icon { background: rgba(243, 156, 18, 0.12); color: var(--color-warning); }

.tkl31-danger-card.is-open .tkl31-danger-card__icon,
.tkl31-danger-card__trigger:hover .tkl31-danger-card__icon {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

/* Текст */
.tkl31-danger-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tkl31-danger-card__label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
}

.tkl31-danger-card__desc-short {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

/* Бейдж класса */
.tkl31-danger-card__badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-bg-base);
  background: var(--color-primary);
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.5;
}

.tkl31-danger-card--red    .tkl31-danger-card__badge { background: var(--color-error); }
.tkl31-danger-card--yellow .tkl31-danger-card__badge { background: var(--color-warning); }

/* Стрелка */
.tkl31-danger-card__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  transition: transform var(--duration-normal) var(--ease-default),
              color     var(--duration-fast)   var(--ease-default);
}

.tkl31-danger-card.is-open .tkl31-danger-card__arrow {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* Раскрываемая часть */
.tkl31-danger-card__expand {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-slow) var(--ease-industrial),
              opacity    var(--duration-normal) var(--ease-default);
  opacity: 0;
}

.tkl31-danger-card.is-open .tkl31-danger-card__expand {
  max-height: 160px;
  opacity: 1;
}

/* hidden убирает элемент, JS снимает hidden и добавляет is-open */
.tkl31-danger-card__expand:not([hidden]) { display: block; }

.tkl31-danger-card__full-desc {
  padding: 0 var(--space-4) var(--space-4) calc(44px + var(--space-4) + var(--space-4));
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: var(--space-3);
}

/* ── Правая колонка: допуски ── */
.tkl31-approvals {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), var(--glow-card);
  /* sticky чтобы следовало за скроллом списка */
  position: sticky;
  top: 120px;
}

/* Corner accents */
.tkl31-approvals__c {
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--color-primary);
  opacity: 0.55;
  pointer-events: none;
}

.tkl31-approvals__c--tl { top: -1px; left: -1px;
  border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.tkl31-approvals__c--tr { top: -1px; right: -1px;
  border-width: 2px 2px 0 0; border-radius: 0 var(--radius-xl) 0 0; }
.tkl31-approvals__c--bl { bottom: -1px; left: -1px;
  border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-xl); }
.tkl31-approvals__c--br { bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-xl) 0; }

/* Бейдж */
.tkl31-approvals__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-bg-base);
  background: var(--color-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

/* Заголовок */
.tkl31-approvals__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-1);
}

.tkl31-approvals__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}

/* Чеклист */
.tkl31-approvals__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.tkl31-approvals__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-snug);
}

.tkl31-approvals__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 107, 0, 0.12);
  color: var(--color-primary);
  border: 1px solid rgba(255, 107, 0, 0.25);
  flex-shrink: 0;
}

/* CTA */
.tkl31-approvals__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: none;
  border-radius: var(--btn-radius);
  transition: background var(--duration-fast) var(--ease-default),
              box-shadow  var(--duration-fast) var(--ease-default);
}

.tkl31-approvals__cta:hover {
  background: var(--color-primary-light);
  box-shadow: var(--glow-sm);
}

.tkl31-approvals__cta svg { flex-shrink: 0; }

/* ── Fade-up ── */
.tkl30-compare [data-animate],
.tkl31-danger  [data-animate] {
  transition: opacity var(--duration-slow) var(--ease-industrial),
              transform var(--duration-slow) var(--ease-industrial);
}

/* ── Адаптив блока 31 ── */
@media (max-width: 900px) {
  .tkl31-danger__layout {
    grid-template-columns: 1fr;
  }

  .tkl31-approvals {
    position: static;
  }
}

@media (max-width: 560px) {
  .tkl31-danger-card__desc-short { display: none; }

  .tkl31-danger-card__full-desc {
    padding-left: var(--space-4);
  }
}




















































/* ============================================================
   BLOCK 32–33: КОНТАКТЫ + ФОРМА + КАРТА
   Все значения — из root.css, нет сырых цветов
   ============================================================ */

/* ── Section ── */
.tkl32-contacts {
  position: relative;
  background: var(--color-bg-base);
  padding: 40px 0 40px;
  overflow: hidden;
}

.tkl32-contacts::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--color-divider);
}

.tkl32-contacts__bg-glow {
  position: absolute;
  top: -80px; left: -100px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: var(--z-behind);
}

.tkl32-contacts__pattern {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  opacity: 0.012;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Верхняя часть: форма + инфо ── */
.tkl32-contacts__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  position: relative;
  z-index: var(--z-raised);
}

/* ── Form box ── */
.tkl32-form-box {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), var(--glow-card);
}

/* Corner accents */
.tkl32-form-box__c {
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid var(--color-primary);
  opacity: 0.55;
  pointer-events: none;
}

.tkl32-form-box__c--tl { top: -1px; left: -1px;
  border-width: 2px 0 0 2px; border-radius: var(--radius-2xl) 0 0 0; }
.tkl32-form-box__c--tr { top: -1px; right: -1px;
  border-width: 2px 2px 0 0; border-radius: 0 var(--radius-2xl) 0 0; }
.tkl32-form-box__c--bl { bottom: -1px; left: -1px;
  border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--radius-2xl); }
.tkl32-form-box__c--br { bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0; border-radius: 0 0 var(--radius-2xl) 0; }

/* Form head */
.tkl32-form-box__head { margin-bottom: var(--space-5); }

.tkl32-form-box__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  margin: var(--space-2) 0 var(--space-2);
}

.tkl32-form-box__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--lh-relaxed);
}

/* ── Правая: инфо ── */
.tkl32-contacts__info-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.tkl32-contacts__info-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  margin: var(--space-2) 0 var(--space-2);
}

.tkl32-contacts__info-sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* ── Список контактов ── */
.tkl32-info-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tkl32-info-item { display: block; }

.tkl32-info-item__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-raised);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-fast) var(--ease-default),
              background   var(--duration-fast) var(--ease-default),
              transform    var(--duration-fast) var(--ease-default);
}

a.tkl32-info-item__inner:hover {
  border-color: rgba(255, 107, 0, 0.35);
  background: var(--color-bg-elevated);
  transform: translateX(4px);
}

.tkl32-info-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  flex-shrink: 0;
}

.tkl32-info-item__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tkl32-info-item__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-weight: var(--fw-medium);
}

.tkl32-info-item__value {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  line-height: var(--lh-snug);
}

.tkl32-info-item__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Мессенджеры ── */
.tkl32-messengers {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tkl32-messengers__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.tkl32-messengers__row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tkl32-messenger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  color: var(--color-text-secondary);
  background: var(--color-bg-raised);
  transition: border-color var(--duration-fast) var(--ease-default),
              color        var(--duration-fast) var(--ease-default),
              background   var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}

.tkl32-messenger:hover {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  background: var(--color-primary-subtle);
}

/* ── Нижняя часть: офисы + карта ── */
.tkl32-contacts__map-section {
  position: relative;
  z-index: var(--z-raised);
}

/* ── Карточки офисов ── */
.tkl32-offices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: 0;
}

.tkl32-office-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255, 107, 0, 0.10);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow   var(--duration-normal) var(--ease-default);
}

.tkl32-office-card:hover,
.tkl32-office-card--featured {
  border-color: rgba(255, 107, 0, 0.40);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

/* CTA-карточка */
.tkl32-office-card--cta {
  border-color: rgba(255, 107, 0, 0.20);
  background: var(--color-primary-subtle);
}

/* Corner accents */
.tkl32-office-card__c {
  position: absolute;
  width: 10px; height: 10px;
  border: 2px solid var(--color-primary);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.tkl32-office-card--featured .tkl32-office-card__c,
.tkl32-office-card--cta .tkl32-office-card__c,
.tkl32-office-card:hover .tkl32-office-card__c { opacity: 0.6; }

.tkl32-office-card__c--tl { top: -1px; left: -1px;
  border-width: 2px 0 0 2px; border-radius: var(--radius-xl) 0 0 0; }
.tkl32-office-card__c--br { bottom: -1px; right: -1px;
  border-width: 0 2px 2px 0; border-radius: 0 0 0 0; }

.tkl32-office-card__name {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-accent);
}

.tkl32-office-card__address {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.tkl32-office-card__phone {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.tkl32-office-card__phone:hover { color: var(--color-primary); }

.tkl32-office-card__hours {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.tkl32-office-card__focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-primary);
  cursor: pointer;
  margin-top: var(--space-2);
  transition: color var(--duration-fast) var(--ease-default);
}

.tkl32-office-card__focus-btn:hover { color: var(--color-primary-light); }

.tkl32-office-card__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: var(--color-primary);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              box-shadow  var(--duration-fast) var(--ease-default);
  width: 100%;
  justify-content: center;
}

.tkl32-office-card__cta-btn:hover {
  background: var(--color-primary-light);
  box-shadow: var(--glow-sm);
}

/* ── Карта ── */
.tkl32-map-frame {
  position: relative;
  border: 1px solid rgba(255, 107, 0, 0.20);
  border-top: none;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.tkl32-ymap {
  width: 100%;
  height: clamp(300px, 38vw, 460px);
  display: block;
  background: var(--color-bg-raised);
}

.tkl32-map-label {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  pointer-events: none;
}

/* ── Действия под картой ── */
.tkl32-map-actions {
  display: flex;
  border: 1px solid rgba(255, 107, 0, 0.20);
  border-top: 1px solid rgba(255, 107, 0, 0.12);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
  background: var(--color-bg-raised);
}

.tkl32-map-actions__route,
.tkl32-map-actions__callback {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              color       var(--duration-fast) var(--ease-default);
}

.tkl32-map-actions__route {
  background: var(--color-primary);
  color: var(--color-text-primary);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.tkl32-map-actions__route:hover { background: var(--color-primary-light); }

.tkl32-map-actions__callback {
  background: transparent;
  color: var(--color-text-secondary);
}

.tkl32-map-actions__callback:hover {
  background: var(--color-primary-subtle);
  color: var(--color-text-primary);
}

/* ── Маркеры карты (внутри ymaps3) ── */
.tkl32-marker {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tkl32-marker-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  padding: 4px 8px;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.tkl32-marker:hover .tkl32-marker-tooltip { opacity: 1; }

/* ── Адаптив ── */
@media (max-width: 960px) {
  .tkl32-contacts__top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .tkl32-offices {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .tkl32-offices {
    grid-template-columns: 1fr;
  }

  .tkl32-office-card {
    border-radius: var(--radius-lg);
  }

  .tkl32-map-actions {
    flex-direction: column;
  }

  .tkl32-map-actions__route {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  }
}















































/* ============================================================
   BLOCK-34: ФУТЕР
   Референс: 015.jpeg (нижняя треть — 4 колонки + bottombar)
   ============================================================ */

.tkl34-footer {
  background: var(--color-bg-deep, #080808);
  position: relative;
  margin-top: 50px;
}

.tkl34-footer__top-border {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-primary) 30%,
    var(--color-primary) 70%,
    transparent 100%
  );
  opacity: 0.45;
}

.tkl34-footer__inner {
  padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
}

/* ── Main grid: brand + 4 nav cols ── */
.tkl34-footer__main {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* ── Brand ── */
.tkl34-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.tkl34-footer__logo {
  text-decoration: none;
  display: inline-flex;
}

.tkl34-footer__logo-text {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tkl34-footer__logo-icon { flex-shrink: 0; }

.tkl34-footer__logo-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  line-height: 1;
}

.tkl34-footer__logo-wordmark strong {
  color: var(--color-primary);
  font-weight: var(--fw-extrabold);
}

/* Тагline */
.tkl34-footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Сертификат */
.tkl34-footer__cert {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255, 107, 0, 0.18);
  border-radius: var(--radius-full);
  width: fit-content;
}

/* Соцсети */
.tkl34-footer__socials {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tkl34-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color       var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              background  var(--duration-fast) var(--ease-default),
              box-shadow  var(--duration-fast) var(--ease-default);
}

.tkl34-footer__social:hover {
  color: var(--color-text-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.10);
}

/* ── Навигационные колонки ── */
.tkl34-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
}

.tkl34-footer__nav-col { display: flex; flex-direction: column; gap: var(--space-4); }

.tkl34-footer__nav-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--color-primary);
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 107, 0, 0.18);
  position: relative;
}

.tkl34-footer__nav-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tkl34-footer__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default),
              gap   var(--duration-fast) var(--ease-default);
  line-height: var(--lh-snug);
}

.tkl34-footer__nav-link svg {
  color: var(--color-primary);
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}

.tkl34-footer__nav-link:hover {
  color: var(--color-text-primary);
  gap: var(--space-3);
}

.tkl34-footer__nav-link:hover svg { opacity: 1; }

/* Контактная колонка */
.tkl34-footer__contact-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tkl34-footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tkl34-footer__contact-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.tkl34-footer__contact-value {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: var(--fw-medium);
  transition: color var(--duration-fast) var(--ease-default);
  word-break: break-all;
}

a.tkl34-footer__contact-value:hover { color: var(--color-primary); }

/* ── Bottom bar ── */
.tkl34-footer__bottom {
  background: rgba(0, 0, 0, 0.35);
}

.tkl34-footer__bottom-border {
  height: 1px;
  background: var(--color-border);
}

.tkl34-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  flex-wrap: wrap;
}

.tkl34-footer__copy,
.tkl34-footer__inn {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--lh-normal);
}

.tkl34-footer__bottom-nav {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

.tkl34-footer__bottom-link {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
  white-space: nowrap;
  position: relative;
}

.tkl34-footer__bottom-link + .tkl34-footer__bottom-link::before {
  content: '·';
  position: absolute;
  left: calc(-1 * var(--space-2) - 4px);
  color: var(--color-text-muted);
  opacity: 0.4;
}

.tkl34-footer__bottom-link:hover { color: var(--color-primary); }

/* ── Адаптив block-34 ── */
@media (max-width: 1100px) {
  .tkl34-footer__main {
    grid-template-columns: 220px 1fr;
  }

  .tkl34-footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .tkl34-footer__main {
    grid-template-columns: 1fr;
  }

  .tkl34-footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .tkl34-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

@media (max-width: 440px) {
  .tkl34-footer__nav {
    grid-template-columns: 1fr;
  }

  .tkl34-footer__bottom-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .tkl34-footer__bottom-link + .tkl34-footer__bottom-link::before {
    display: none;
  }
}






















































/* ============================================================
   PORTFOLIO ARCHIVE — page-archive-projects.php
   ============================================================ */

/* ── Section ── */
.pf-archive {
  background: var(--color-bg-base);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.pf-archive__bg-glow {
  position: absolute;
  top: -120px; right: -160px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 68%);
  filter: blur(90px);
  pointer-events: none;
  z-index: var(--z-behind);
}

.pf-archive__pattern {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  opacity: 0.012;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Hero ── */
.pf-archive__hero {
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(2rem, 4vw, 3rem);
  position: relative;
  z-index: var(--z-raised);
}

.pf-archive__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin: var(--space-3) 0 var(--space-2);
}

.pf-archive__sub {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ── Фильтры ── */
.pf-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
  position: relative;
  z-index: var(--z-raised);
}

.pf-filters__cats {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pf-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color        var(--duration-fast) var(--ease-default),
              box-shadow   var(--duration-fast) var(--ease-default);
  white-space: nowrap;
}

.pf-filter:hover {
  border-color: rgba(255, 107, 0, 0.4);
  color: var(--color-text-primary);
}

.pf-filter.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  box-shadow: var(--glow-sm);
}

.pf-filter__count {
  font-size: var(--text-xs);
  opacity: 0.7;
  margin-left: 2px;
}

/* ── Сортировка ── */
.pf-sort-wrap {
  position: relative;
}

.pf-sort {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
  cursor: pointer;
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.pf-sort:focus { border-color: var(--color-primary); }

.pf-sort-arrow {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-text-muted);
}

/* ── Счётчик ── */
.pf-results-meta {
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pf-results-count strong { color: var(--color-text-secondary); }

/* ── Сетка ── */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
  position: relative;
  z-index: var(--z-raised);
}

/* ── Карточка проекта ── */
/* ══════════════════════════════════════════
   КАРТОЧКА ПРОЕКТА — pf-card
   Hover-параметры идентичны .tkl27-blog-card
══════════════════════════════════════════ */

.pf-card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255, 107, 0, 0.12);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--duration-normal) var(--ease-default),
    box-shadow   var(--duration-normal) var(--ease-default),
    transform    var(--duration-normal) var(--ease-industrial);
}

.pf-card:hover {
  border-color: rgba(255, 107, 0, 0.40);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.50), 0 0 32px rgba(255, 107, 0, 0.07);
  transform: translateY(-4px);
}

/* Corner accents — как .tkl27-blog-card__c */
.pf-card__c {
  position: absolute;
  width: 16px; height: 16px;
  border-color: rgba(255, 107, 0, 0.35);
  border-style: solid;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-raised);
  transition: opacity var(--duration-normal) var(--ease-default);
}

.pf-card:hover .pf-card__c { opacity: 0.80; }

.pf-card__c--tl { top:-1px; left:-1px;   border-width:2px 0 0 2px; border-radius:var(--radius-xl) 0 0 0; }
.pf-card__c--tr { top:-1px; right:-1px;  border-width:2px 2px 0 0; border-radius:0 var(--radius-xl) 0 0; }
.pf-card__c--bl { bottom:-1px; left:-1px;  border-width:0 0 2px 2px; border-radius:0 0 0 var(--radius-xl); }
.pf-card__c--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-xl) 0; }

/* ── Фото — как .tkl27-blog-card__thumb ── */
.pf-card__img-wrap {
  display: block;
  position: relative;
  aspect-ratio: 800 / 520;
  overflow: hidden;
  text-decoration: none;
  flex-shrink: 0;
  background: var(--color-bg-elevated);
}

.pf-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--ease-industrial);
}

.pf-card__img-placeholder {
  width: 100%; height: 100%;
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-card:hover .pf-card__img { transform: scale(1.05); }

/* Overlay — появляется при hover */
.pf-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.0) 30%, rgba(13,13,13,0.65) 100%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.pf-card:hover .pf-card__overlay { opacity: 1; }

/* Кнопка «Подробнее» по центру */
.pf-card__hover-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.82);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition:
    opacity  var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-bounce);
}

.pf-card:hover .pf-card__hover-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Бейдж веса / типа */
.pf-card__badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: var(--color-primary);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  z-index: var(--z-raised);
  line-height: 1;
}

/* ── Body — как .tkl27-blog-card__body ── */
.pf-card__body {
  flex: 1;
  padding: var(--space-4) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Верхняя строка: категория + дата */
.pf-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.pf-card__cat {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  line-height: 1;
}

.pf-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Заголовок */
.pf-card__title {
  font-family: var(--font-ui);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-snug);
    margin: 0;
}

.pf-card__title a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.pf-card__title a:hover { color: var(--color-primary); }

/* Краткий текст — как .tkl27-blog-card__excerpt */
.pf-card__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  flex: 1;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Показатели — pill-теги */
.pf-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 107, 0, 0.10);
}

.pf-card__spec {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1.5;
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.pf-card:hover .pf-card__spec {
  color: var(--color-text-secondary);
  border-color: rgba(255, 107, 0, 0.18);
}

.pf-card__spec--accent {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
  border-color: rgba(255, 107, 0, 0.25);
  font-weight: var(--fw-semibold);
}

/* Legacy .pf-card__meta — на случай если где-то осталось */
.pf-card__meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Skeleton */
.pf-card--skeleton { pointer-events: none; }

.pf-skeleton-img {
  aspect-ratio: 800 / 520;
  background: linear-gradient(90deg, var(--color-bg-raised) 25%, var(--color-bg-elevated) 50%, var(--color-bg-raised) 75%);
  background-size: 200% 100%;
  animation: pfSkeleton 1.4s infinite;
}

.pf-skeleton-line {
  background: var(--color-bg-raised);
  border-radius: var(--radius-sm);
  animation: pfSkeleton 1.4s infinite;
  background: linear-gradient(90deg, var(--color-bg-raised) 25%, var(--color-bg-elevated) 50%, var(--color-bg-raised) 75%);
  background-size: 200% 100%;
}

.pf-skeleton-line--title { height: 20px; width: 80%; margin-bottom: 8px; }
.pf-skeleton-line--cat   { height: 16px; width: 40%; margin-bottom: 8px; }
.pf-skeleton-line--meta  { height: 14px; width: 60%; }

@keyframes pfSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Кнопка «Загрузить ещё» ── */
.pf-loadmore-wrap {
  text-align: center;
  margin-bottom: var(--space-12);
}

.pf-loadmore {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-4) var(--space-10);
  background: var(--color-primary);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--ease-default),
              box-shadow  var(--duration-fast) var(--ease-default);
  min-width: 240px;
}

.pf-loadmore:hover { background: var(--color-primary-light); box-shadow: var(--glow-sm); }

.pf-loadmore__text { font-size: var(--text-sm); }
.pf-loadmore__count { font-size: var(--text-xs); opacity: 0.75; font-weight: var(--fw-medium); text-transform: none; letter-spacing: 0; }

.pf-loadmore__loader {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pfSpin 0.7s linear infinite;
}

.pf-loadmore.is-loading .pf-loadmore__text,
.pf-loadmore.is-loading .pf-loadmore__count { display: none; }
.pf-loadmore.is-loading .pf-loadmore__loader { display: block; }

@keyframes pfSpin { to { transform: rotate(360deg); } }

/* ── CTA под архивом ── */
.pf-cta { padding: var(--section-py) 0; background: var(--color-bg-surface); }

.pf-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.pf-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.pf-cta__sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }

.pf-cta__btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ── Пустое состояние ── */
.pf-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

/* ── Адаптив архива ── */
@media (max-width: 960px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .pf-filters { flex-direction: column; align-items: flex-start; }
  .pf-grid { grid-template-columns: 1fr; }
  .pf-cta__inner { flex-direction: column; text-align: center; }
  .pf-cta__btns { justify-content: center; }
}


/* ============================================================
   SINGLE PROJECT — single-tg_project.php
   ============================================================ */

.pj { background: var(--color-bg-base); min-height: 100vh; }

/* ── Hero ── */
.pj-hero {
  position: relative;
  height: clamp(360px, 55vw, 600px);
  background:
    var(--pj-hero-bg, none) center / cover no-repeat,
    var(--color-bg-raised);
  display: flex;
  align-items: flex-end;
}

.pj-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13,13,13,0.35) 0%,
    rgba(13,13,13,0.55) 50%,
    rgba(13,13,13,0.92) 100%
  );
}

.pj-hero__inner {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* Хлебные крошки */
.pj-breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.pj-breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.pj-breadcrumbs a:hover { color: var(--color-primary); }

.pj-hero__cat {
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-inverse);
  background: var(--color-primary);
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.pj-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 4rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
  max-width: 800px;
}

.pj-hero__tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pj-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

.pj-hero__tag--accent {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  font-weight: var(--fw-bold);
}

/* ── Section title ── */
.pj-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-6);
}

.pj-section-title__num {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-family: var(--font-ui);
  letter-spacing: var(--ls-wider);
  opacity: 0.8;
}

/* ── Задача и решение ── */
.pj-desc {
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.pj-desc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.pj-richtext {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
}

.pj-richtext p { margin: 0 0 var(--space-4); }
.pj-richtext h3 { color: var(--color-text-primary); font-size: var(--text-md); margin: var(--space-5) 0 var(--space-2); }
.pj-richtext strong { color: var(--color-text-primary); font-weight: var(--fw-semibold); }
.pj-richtext ul { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.pj-richtext li { margin-bottom: var(--space-2); }
.pj-richtext li::marker { color: var(--color-primary); }

/* ── Характеристики ── */
.pj-specs {
  padding: clamp(3rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.pj-specs__table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pj-specs__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-card-bg);
  transition: background var(--duration-fast) var(--ease-default);
}

.pj-specs__row:hover { background: var(--color-bg-raised); }

.pj-specs__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.pj-specs__value {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  text-align: right;
}

/* ── Результаты ── */
.pj-results {
  padding: clamp(3rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.pj-results__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-5);
}

.pj-results__item {
  text-align: center;
  padding: var(--space-5);
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.12);
  border-radius: var(--radius-xl);
}

.pj-results__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1;
}

.pj-results__suffix {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-left: 2px;
}

.pj-results__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  margin-top: var(--space-2);
}

/* ── Галерея ── */
.pj-gallery {
  padding: clamp(3rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.pj-gallery__filters {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.pj-gallery__filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color        var(--duration-fast) var(--ease-default);
}

.pj-gallery__filter.is-active,
.pj-gallery__filter:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.pj-gallery__filter-count {
  font-size: var(--text-xs);
  opacity: 0.75;
}

.pj-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.pj-gallery__thumb {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-raised);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-default),
              transform    var(--duration-normal) var(--ease-industrial),
              box-shadow   var(--duration-normal) var(--ease-default);
}

.pj-gallery__thumb:hover {
  border-color: var(--color-card-border);
  transform: scale(1.03);
  box-shadow: var(--glow-card);
}

.pj-gallery__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-industrial);
}

.pj-gallery__thumb:hover img { transform: scale(1.07); }

.pj-gallery__thumb[data-gcat="hidden"] { display: none; }

.pj-gallery__cat-badge {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  color: var(--color-text-secondary);
  padding: 2px 8px;
  pointer-events: none;
}

.pj-gallery__zoom {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px; height: 28px;
  background: rgba(13,13,13,0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.pj-gallery__thumb:hover .pj-gallery__zoom { opacity: 1; }

/* ── Lightbox ── */
.pj-lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.pj-lightbox.is-open {
  pointer-events: all;
  opacity: 1;
}

.pj-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
}

.pj-lightbox__close {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--duration-fast) var(--ease-default),
              color       var(--duration-fast) var(--ease-default);
}

.pj-lightbox__close:hover { background: var(--color-primary); color: #fff; }

.pj-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background var(--duration-fast) var(--ease-default),
              color       var(--duration-fast) var(--ease-default);
}

.pj-lightbox__nav:hover { background: var(--color-primary); color: #fff; }
.pj-lightbox__nav--prev { left: var(--space-5); }
.pj-lightbox__nav--next { right: var(--space-5); }

.pj-lightbox__stage {
  position: relative;
  z-index: 1;
  max-width: calc(100vw - 160px);
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pj-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
  border-radius: var(--radius-lg);
  user-select: none;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.pj-lightbox__caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  text-align: center;
}

.pj-lightbox__counter {
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  z-index: 2;
}

/* ── Видео: нативный плеер pj-player ── */
.pj-video {
  padding: clamp(3rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.pj-video__layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: var(--space-4);
  align-items: start;
}

.pj-player {
  position: relative;
  background: var(--color-bg-deep);
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid rgba(255,107,0,0.15);
  box-shadow: var(--glow-card);
}

.pj-player__c { position: absolute; width: 14px; height: 14px; border: 2px solid var(--color-primary); opacity: 0.5; }
.pj-player__c--tl { top:-1px; left:-1px;  border-width:2px 0 0 2px; border-radius:var(--radius-xl) 0 0 0; }
.pj-player__c--tr { top:-1px; right:-1px; border-width:2px 2px 0 0; border-radius:0 var(--radius-xl) 0 0; }
.pj-player__c--bl { bottom:-1px; left:-1px;  border-width:0 0 2px 2px; border-radius:0 0 0 var(--radius-xl); }
.pj-player__c--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-xl) 0; }

.pj-player__video {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  background: var(--color-bg-deep);
}

/* Мета (сверху) */
.pj-player__meta {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: var(--space-4) var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, transparent 100%);
  z-index: 6;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.pj-player--playing .pj-player__meta { opacity: 0; transition-delay: 0.8s; }
.pj-player--playing:hover .pj-player__meta { opacity: 1; transition-delay: 0s; }

.pj-player__meta-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
}

.pj-player__meta-dur {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: rgba(0,0,0,0.5);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

/* Center */
.pj-player__center {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  cursor: pointer;
}

.pj-player__center-btn {
  width: 68px; height: 68px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform var(--duration-fast) var(--ease-bounce),
              box-shadow var(--duration-fast) var(--ease-default);
  box-shadow: 0 0 0 0 rgba(255,107,0,0.4);
}

.pj-player__center:hover .pj-player__center-btn {
  transform: scale(1.1);
  box-shadow: 0 0 0 12px rgba(255,107,0,0.15);
}

.pj-player--playing .pj-player__center-btn { opacity: 0; pointer-events: none; }

/* Flash */
.pj-player__flash {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  z-index: 7;
}

.pj-player__flash.is-flash {
  animation: pjFlash 0.4s var(--ease-default) forwards;
}

@keyframes pjFlash {
  0%   { opacity: 0.9; transform: scale(1.1); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* Controls */
.pj-player__controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0 var(--space-4) var(--space-3);
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
  z-index: 6;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.pj-player--idle.pj-player--playing .pj-player__controls { opacity: 0; }

.pj-player__progress {
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  margin-bottom: var(--space-3);
  position: relative;
  cursor: pointer;
  transition: height var(--duration-fast) var(--ease-default);
}

.pj-player__progress:hover { height: 6px; }

.pj-player__buffer,
.pj-player__played {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 2px;
}

.pj-player__buffer { background: rgba(255,255,255,0.25); }
.pj-player__played { background: var(--color-primary); }

.pj-player__scrubber {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 14px; height: 14px;
  background: var(--color-primary);
  border-radius: 50%;
  transition: transform var(--duration-fast) var(--ease-default);
}

.pj-player__progress:hover .pj-player__scrubber { transform: translate(-50%, -50%) scale(1); }

.pj-player__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pj-player__bar-left,
.pj-player__bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pj-ctrl-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  padding: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease-default);
}

.pj-ctrl-btn:hover { color: #fff; }

.pj-ctrl-btn--speed {
  font-size: var(--text-xs);
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
}

.pj-player__time {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.75);
  display: flex;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

[hidden] { display: none !important; }

.pj-icon { display: block; }

/* YouTube/Vimeo wrapper */
.pj-iframe-wrap {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-bg-deep);
}

.pj-iframe-wrap iframe {
  width: 100%; height: 100%;
  border: none;
  display: block;
}

.pj-iframe-trigger {
  width: 100%; height: 100%;
  position: relative;
  cursor: pointer;
  border: none;
  padding: 0;
  background: none;
  display: block;
}

.pj-iframe-trigger img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.pj-iframe-trigger__btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform var(--duration-fast) var(--ease-bounce),
              box-shadow var(--duration-fast) var(--ease-default);
}

.pj-iframe-trigger:hover .pj-iframe-trigger__btn {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 0 14px rgba(255,107,0,0.15);
}

.pj-iframe-trigger__title {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  font-weight: var(--fw-semibold);
}

/* Aside videos */
.pj-video__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.pj-video__thumb {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.pj-video__thumb:hover { border-color: var(--color-card-border); }

.pj-video__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pj-video__thumb-placeholder { width: 100%; height: 100%; background: var(--color-bg-elevated); }

.pj-video__thumb-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.pj-video__thumb-title {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.85);
  font-weight: var(--fw-medium);
}

/* ── Отзыв ── */
.pj-testi {
  padding: clamp(3rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--color-border);
}

.pj-testi__inner {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-2xl);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--glow-card);
}

.pj-testi__c { position: absolute; width: 14px; height: 14px; border: 2px solid var(--color-primary); opacity: 0.5; }
.pj-testi__c--tl { top:-1px; left:-1px; border-width:2px 0 0 2px; border-radius:var(--radius-2xl) 0 0 0; }
.pj-testi__c--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-2xl) 0; }

.pj-testi__quote-icon { color: var(--color-primary); opacity: 0.25; margin-bottom: var(--space-4); }

.pj-testi__text {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  font-style: italic;
  margin: 0 0 var(--space-5);
  quotes: none;
}

.pj-testi__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.pj-testi__logo img {
  height: 36px;
  width: auto;
  object-fit: contain;
  filter: brightness(0.7);
}

.pj-testi__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

/* ── Похожие проекты ── */
.pj-related { padding: clamp(3rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--color-border); }

.pj-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ── CTA-форма ── */
.pj-cta {
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(4rem, 7vw, 7rem);
}

.pj-cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-2xl);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--glow-card);
}

.pj-cta__c { position: absolute; width: 14px; height: 14px; border: 2px solid var(--color-primary); opacity: 0.5; }
.pj-cta__c--tl { top:-1px; left:-1px; border-width:2px 0 0 2px; border-radius:var(--radius-2xl) 0 0 0; }
.pj-cta__c--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-2xl) 0; }

.pj-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  margin: var(--space-2) 0 var(--space-2);
}

.pj-cta__sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }

/* ── Адаптив single ── */
@media (max-width: 900px) {
  .pj-desc__grid        { grid-template-columns: 1fr; }
  .pj-specs__table      { grid-template-columns: 1fr; }
  .pj-related__grid     { grid-template-columns: repeat(2, 1fr); }
  .pj-cta__inner        { grid-template-columns: 1fr; }
  .pj-video__layout     { grid-template-columns: 1fr; }
  .pj-video__aside      { flex-direction: row; overflow-x: auto; }
  .pj-video__thumb      { min-width: 180px; }
  .pj-lightbox__nav--prev { left: var(--space-3); }
  .pj-lightbox__nav--next { right: var(--space-3); }
  .pj-lightbox__stage   { max-width: calc(100vw - 100px); }
}

@media (max-width: 600px) {
  .pj-gallery__grid     { grid-template-columns: repeat(2, 1fr); }
  .pj-related__grid     { grid-template-columns: 1fr; }
  .pj-hero__title       { font-size: clamp(1.5rem, 6vw, 2.5rem); }
  .pj-results__grid     { grid-template-columns: repeat(2, 1fr); }
  .pj-lightbox__nav     { width: 36px; height: 36px; }
}
















































/* ============================================================
   СВЕТЛАЯ ЗОНА — общая обёртка для статей/поиска
   Используется на single.php и search.php
   ============================================================ */

.sp-light-zone {
  background: #F8F7F5;
  color: #1A1A1A;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

/* ============================================================
   SINGLE ARTICLE — sp-*
   ============================================================ */

/* ── Hero ── */
.sp-hero {
  position: relative;
  background: var(--color-bg-surface);
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

.sp-hero--has-img {
  background:
    var(--sp-hero-img) center / cover no-repeat,
    var(--color-bg-surface);
  min-height: 380px;
  display: flex;
  align-items: flex-end;
}

.sp-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13,13,13,0.45) 0%,
    rgba(13,13,13,0.60) 45%,
    rgba(13,13,13,0.92) 100%
  );
}

.sp-hero__inner {
  position: relative;
  z-index: 2;
}

/* Хлебные крошки */
.sp-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
}

.sp-breadcrumbs a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.sp-breadcrumbs a:hover { color: var(--color-primary); }

.sp-hero__cat {
  display: inline-flex;
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-inverse);
  background: var(--color-primary);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
  text-decoration: none;
}

.sp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-5);
  max-width: 840px;
}

.sp-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.sp-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.sp-hero__meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex-shrink: 0;
}

/* ── Layout: контент + сайдбар ── */
.sp-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

/* ── Обложка (только если нет фото в hero) ── */
.sp-cover {
  margin-bottom: var(--space-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.sp-cover__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ── Типографика статьи ── */
.sp-prose {
  font-family: var(--font-body);
  font-size: 1.0625rem;       /* 17px — оптимум для чтения */
  line-height: 1.80;
  color: #2C2C2C;
  word-break: break-word;
}

.sp-prose > * + * { margin-top: 1.4em; }

.sp-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: #111;
  line-height: var(--lh-snug);
  margin-top: 2.2em;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-primary);
}

.sp-prose h3 {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  color: #111;
  margin-top: 1.8em;
}

.sp-prose h4 {
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: #333;
  margin-top: 1.5em;
}

.sp-prose p { margin: 0 0 1em; }

.sp-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--ease-default),
              text-decoration-color var(--duration-fast) var(--ease-default);
}

.sp-prose a:hover { color: var(--color-primary-dark); }

.sp-prose strong { font-weight: var(--fw-semibold); color: #111; }
.sp-prose em { font-style: italic; }

.sp-prose ul,
.sp-prose ol {
  padding-left: 1.5em;
  margin: 0 0 1em;
}

.sp-prose ul { list-style: none; padding-left: 0; }

.sp-prose ul li {
  padding-left: 1.4em;
  position: relative;
  margin-bottom: 0.4em;
}

.sp-prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.sp-prose ol li { margin-bottom: 0.4em; }
.sp-prose ol li::marker { color: var(--color-primary); font-weight: var(--fw-semibold); }

.sp-prose blockquote {
  margin: 1.8em 0;
  padding: var(--space-4) var(--space-6);
  border-left: 4px solid var(--color-primary);
  background: rgba(255, 107, 0, 0.04);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: #444;
  font-style: italic;
  font-size: 1.05rem;
}

.sp-prose blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--text-sm);
  color: #888;
}

.sp-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: var(--text-sm);
  overflow-x: auto;
  display: block;
}

.sp-prose th {
  background: #1A1A1A;
  color: #fff;
  font-weight: var(--fw-semibold);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.sp-prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid #E8E8E8;
  color: #333;
}

.sp-prose tr:hover td { background: rgba(255,107,0,0.03); }

.sp-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
  margin: 1.5em auto;
}

.sp-prose figure { margin: 1.5em 0; }

.sp-prose figcaption {
  text-align: center;
  font-size: var(--text-xs);
  color: #888;
  margin-top: var(--space-2);
}

.sp-prose pre {
  background: #1A1A1A;
  color: #e8e8e8;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.sp-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: #F0EFED;
  color: #c0392b;
  padding: 1px 5px;
  border-radius: 3px;
}

.sp-prose pre code { background: none; color: inherit; padding: 0; }

.sp-prose hr {
  border: none;
  border-top: 2px solid #E8E8E8;
  margin: 2.5em 0;
  position: relative;
}

.sp-prose hr::after {
  content: '';
  position: absolute;
  top: -2px; left: 0;
  width: 48px; height: 2px;
  background: var(--color-primary);
}

/* ── Теги ── */
.sp-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid #E8E8E8;
  color: #888;
}

.sp-tags svg { color: var(--color-primary); flex-shrink: 0; }

.sp-tag {
  display: inline-flex;
  font-size: var(--text-xs);
  color: #555;
  background: #EFEFED;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default),
              color       var(--duration-fast) var(--ease-default);
}

.sp-tag:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ── Шеринг ── */
.sp-share {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.sp-share__label {
  font-size: var(--text-xs);
  color: #888;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.sp-share__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}

.sp-share__btn:hover { opacity: 0.85; transform: translateY(-1px); }

.sp-share__btn--vk { background: #0077FF; color: #fff; }
.sp-share__btn--tg { background: #2AABEE; color: #fff; }

/* ── Навигация по статьям ── */
.sp-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid #E8E8E8;
}

.sp-post-nav__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  padding: var(--space-4);
  background: #EFEEEC;
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast) var(--ease-default);
}

.sp-post-nav__item:hover { background: #E6E5E3; }

.sp-post-nav__item--next { text-align: right; }

.sp-post-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.sp-post-nav__title {
  font-size: var(--text-sm);
  color: #333;
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Пагинация (shared) ── */
.sp-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.sp-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; height: 40px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  color: #555;
  background: #EFEFED;
  border: 1px solid transparent;
  transition: all var(--duration-fast) var(--ease-default);
  padding: 0 var(--space-3);
}

.sp-pagination .page-numbers:hover,
.sp-pagination .page-numbers.current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* ── Похожие статьи ── */
.sp-related {
  background: var(--color-bg-surface);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-top: 1px solid var(--color-divider);
}

.sp-related__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-8);
  position: relative;
  padding-bottom: var(--space-3);
}

.sp-related__title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 48px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.sp-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* ── CTA ── */
.sp-cta {
  background: var(--color-bg-base);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.sp-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.sp-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.sp-cta__sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
.sp-cta__btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }


/* ============================================================
   SIDEBAR — sp-sidebar
   Светлый стиль, соответствует sp-light-zone
   ============================================================ */

.sp-sidebar {
  position: sticky;
  top: 100px; /* учитываем высоту шапки */
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Виджет */
.sp-widget {
  background: #fff;
  border: 1px solid #E8E8E6;
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.sp-widget--cta {
  border-color: rgba(255, 107, 0, 0.25);
  background: #FFF8F4;
}

.sp-widget__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: #111;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
  position: relative;
}

/* Поиск */
.sp-widget--search { padding: var(--space-4) var(--space-5); }

.sp-search-form__wrap {
  display: flex;
  border: 1px solid #DDD;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow   var(--duration-fast) var(--ease-default);
}

.sp-search-form__wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.10);
}

.sp-search-form__input {
  flex: 1;
  border: none;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: #333;
  background: transparent;
  outline: none;
  min-width: 0;
}

.sp-search-form__input::placeholder { color: #AAA; }

.sp-search-form__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-default);
}

.sp-search-form__btn:hover { background: var(--color-primary-light); }

/* Рубрики */
.sp-cats-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-cats-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-default);
}

.sp-cats-list__item:hover,
.sp-cats-list__item.is-active { background: #F5F4F2; }

.sp-cats-list__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: #444;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
  flex: 1;
}

.sp-cats-list__link svg { color: var(--color-primary); opacity: 0.5; flex-shrink: 0; }
.sp-cats-list__item.is-active .sp-cats-list__link,
.sp-cats-list__item:hover .sp-cats-list__link { color: var(--color-primary); }
.sp-cats-list__item.is-active .sp-cats-list__link svg,
.sp-cats-list__item:hover .sp-cats-list__link svg { opacity: 1; }

.sp-cats-list__count {
  font-size: var(--text-xs);
  color: #AAA;
  padding: 0 var(--space-3);
  flex-shrink: 0;
}

/* Последние записи */
.sp-recent-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sp-recent-list__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.sp-recent-list__thumb {
  flex-shrink: 0;
  width: 60px; height: 60px;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
}

.sp-recent-list__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-normal) var(--ease-industrial);
}

.sp-recent-list__item:hover .sp-recent-list__thumb img { transform: scale(1.06); }

.sp-recent-list__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sp-recent-list__title {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: #222;
  text-decoration: none;
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--duration-fast) var(--ease-default);
}

.sp-recent-list__title:hover { color: var(--color-primary); }

.sp-recent-list__date {
  font-size: var(--text-xs);
  color: #AAA;
}

.sp-recent-list__cat {
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-primary);
  background: rgba(255,107,0,0.08);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  width: fit-content;
}

.sp-widget__all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255,107,0,0.8);
  text-decoration: none;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid #EAEAE8;
  transition: color var(--duration-fast) var(--ease-default),
              gap   var(--duration-fast) var(--ease-default);
}

.sp-widget__all-link:hover { color: var(--color-primary); gap: var(--space-3); }

/* CTA-виджет */
.sp-widget-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.sp-widget-cta__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,107,0,0.10);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-widget-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: #111;
  margin: 0;
}

.sp-widget-cta__text {
  font-size: var(--text-sm);
  color: #666;
  line-height: var(--lh-relaxed);
  margin: 0;
}

.sp-widget-cta__btn {
  width: 100%;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              box-shadow  var(--duration-fast) var(--ease-default);
}

.sp-widget-cta__btn:hover { background: var(--color-primary-light); box-shadow: var(--glow-sm); }

.sp-widget-cta__phone {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: #444;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.sp-widget-cta__phone:hover { color: var(--color-primary); }

/* Облако тегов */
.sp-tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sp-tag-cloud__item {
  display: inline-flex;
  color: #555;
  background: #F0EFED;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  text-decoration: none;
  line-height: 1.6;
  transition: background var(--duration-fast) var(--ease-default),
              color       var(--duration-fast) var(--ease-default);
}

.sp-tag-cloud__item:hover,
.sp-tag-cloud__item.is-active {
  background: var(--color-primary);
  color: #fff;
}


/* ============================================================
   SEARCH — sr-*
   ============================================================ */

.sr-page { background: var(--color-bg-base); }

.sr-hero {
  background: var(--color-bg-surface);
  padding: calc(var(--header-height) + clamp(2.5rem, 5vw, 4rem)) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--color-divider);
}

.sr-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  line-height: var(--lh-tight);
  margin: var(--space-3) 0 var(--space-3);
}

.sr-hero__query {
  color: var(--color-primary);
  font-style: normal;
}

.sr-hero__count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* Форма поиска */
.sr-form { margin-bottom: var(--space-5); }

.sr-form__wrap {
  display: flex;
  border: 1px solid #DDD;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  max-width: 100%;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow   var(--duration-fast) var(--ease-default);
}

.sr-form__wrap:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.10);
}

.sr-form__input {
  flex: 1;
  border: none;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
  color: #333;
  background: transparent;
  outline: none;
  min-width: 0;
}

.sr-form__input::placeholder { color: #AAA; }

.sr-form__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-default);
}

.sr-form__btn:hover { background: var(--color-primary-light); }

/* Фильтры */
.sr-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.sr-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: #EFEFED;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: #555;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default),
              color       var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}

.sr-filter:hover { background: #E6E5E3; color: #111; }

.sr-filter.is-active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.sr-filter__count {
  font-size: var(--text-xs);
  opacity: 0.75;
}

/* Результаты */
.sr-results {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sr-result {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  padding: var(--space-5) 0;
  border-bottom: 1px solid #E8E8E6;
  transition: background var(--duration-fast) var(--ease-default);
}

.sr-result:first-child { border-top: 1px solid #E8E8E6; }

.sr-result__thumb {
  flex-shrink: 0;
  width: 120px; height: 80px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: block;
  background: #EEE;
}

.sr-result__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-normal) var(--ease-industrial);
}

.sr-result:hover .sr-result__thumb img { transform: scale(1.06); }

.sr-result__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sr-result__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sr-result__type {
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  color: #fff;
}

.sr-result__type--post       { background: var(--color-info); }
.sr-result__type--tg_project { background: var(--color-primary); }
.sr-result__type--page       { background: #888; }

.sr-result__date {
  font-size: var(--text-xs);
  color: #AAA;
}

.sr-result__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0;
}

.sr-result__title a {
  color: #111;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.sr-result__title a:hover { color: var(--color-primary); }

.sr-result__title mark {
  background: rgba(255,107,0,0.15);
  color: var(--color-primary-dark);
  border-radius: 2px;
  padding: 0 2px;
}

.sr-result__excerpt {
  font-size: var(--text-sm);
  color: #555;
  line-height: var(--lh-relaxed);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sr-result__excerpt mark {
  background: rgba(255,107,0,0.12);
  color: var(--color-primary-dark);
  border-radius: 2px;
  padding: 0 2px;
}

.sr-result__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: rgba(255,107,0,0.8);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default),
              gap   var(--duration-fast) var(--ease-default);
  width: fit-content;
}

.sr-result__link:hover { color: var(--color-primary); gap: var(--space-2); }

/* Пустое */
.sr-empty {
  text-align: center;
  padding: var(--space-16) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  color: #888;
}

.sr-empty svg { opacity: 0.3; }
.sr-empty p { margin: 0; font-size: var(--text-base); color: #444; }
.sr-empty__hint { font-size: var(--text-sm); color: #888; }
.sr-empty__links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-2);
}

.sr-empty__links .btn-outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--btn-letter-spacing);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--btn-radius);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default),
              color      var(--duration-fast) var(--ease-default);
}

.sr-empty__links .btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
}


/* ============================================================
   404 — e404
   ============================================================ */

.e404 {
  position: relative;
  background: var(--color-bg-base);
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.e404__bg-glow {
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 68%);
  filter: blur(100px);
  pointer-events: none;
  z-index: var(--z-behind);
}

.e404__pattern {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  opacity: 0.012;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 32px 32px;
}

.e404__watermark {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(12rem, 28vw, 24rem);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: var(--z-behind);
  line-height: 1;
  white-space: nowrap;
}

.e404__content {
  position: relative;
  z-index: var(--z-raised);
  max-width: 600px;
}

.e404__title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
  margin: var(--space-4) 0 var(--space-4);
  position: relative;
}

.e404__title::after {
  content: '';
  position: absolute;
  bottom: -12px; left: 0;
  width: 64px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}

.e404__text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin: var(--space-8) 0 var(--space-6);
}

.e404__nav {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.e404__search { max-width: 480px; }

.e404__projects { margin-top: clamp(3rem, 6vw, 5rem); }

.e404__projects-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-6);
}

.e404__projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}


/* ============================================================
   АДАПТИВ
   ============================================================ */

@media (max-width: 960px) {
  .sp-layout { grid-template-columns: 1fr; }
  .sp-sidebar { position: static; }
  .sp-post-nav { grid-template-columns: 1fr; }
  .sp-related__grid { grid-template-columns: repeat(2, 1fr); }
  .e404__projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .sp-related__grid { grid-template-columns: 1fr; }
  .e404__projects-grid { grid-template-columns: 1fr; }
  .sr-result { flex-direction: column; }
  .sr-result__thumb { width: 100%; height: 180px; }
  .e404__nav { flex-direction: column; }
  .sp-cta__inner { flex-direction: column; }
  .sp-cta__btns { flex-direction: column; width: 100%; }
}


/* ── Секции в поиске (заголовки блоков) ── */
.sr-section-head {
  margin: var(--space-8) 0 var(--space-5);
}

.sr-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
  color: #111;
  margin: 0;
  padding-bottom: var(--space-3);
  border-bottom: 2px solid #E8E8E6;
}

.sr-section-title__badge {
  font-size: 0.65rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  color: #fff;
  line-height: 1;
}

.sr-section-title__badge--project { background: var(--color-primary); }
.sr-section-title__badge--post    { background: var(--color-info); }
.sr-section-title__badge--page    { background: #888; }

.sr-section-title__count {
  font-size: var(--text-xs);
  color: #AAA;
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: 0;
}

/* Сетка проектов в поиске — 3 колонки */
.sr-grid-projects {
  margin-bottom: 0;
}

/* Сетка статей в поиске использует тёмный фон — инвертируем */
.sp-light-zone .tkl27-blog-archive__grid {
  position: relative;
  z-index: 1;
}

/* Карточки статей в светлой зоне — адаптируем цвета */
.sp-light-zone .tkl27-blog-archive-card {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
}

.sp-light-zone .tkl27-blog-archive-card:hover {
  border-color: rgba(255,107,0,0.35);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10), 0 0 24px rgba(255,107,0,0.06);
}

.sp-light-zone .tkl27-blog-archive-card__body {
  background: #fff;
}

.sp-light-zone .tkl27-blog-archive-card__meta,
.sp-light-zone .tkl27-blog-archive-card__read {
  color: #AAA;
}

.sp-light-zone .tkl27-blog-archive-card__title a {
  color: #111;
}

.sp-light-zone .tkl27-blog-archive-card__title a:hover {
  color: var(--color-primary);
}

.sp-light-zone .tkl27-blog-archive-card__excerpt {
  color: #555;
}

.sp-light-zone .tkl27-blog-archive-card__more {
  border-top-color: rgba(255,107,0,0.12);
}

























































/* ============================================================
   SERVICE LANDING — landing-pages/service-landing.css
   Только уникальные стили лендинга.
   Всё что уже есть в style.css НЕ дублируется:
   .hww, .faq, .testi, .marquee, .calc, .mistakes, .pf-card — глобально.
   ============================================================ */

/* ════════════════════════════════════════
   1. HERO — .svc-hero
   Точная копия block-02 hero с префиксом svc-
════════════════════════════════════════ */

.svc-hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.svc-hero__bg { position: absolute; inset: 0; z-index: 0; }

.svc-hero__bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: brightness(0.6) saturate(0.8);
}

.svc-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.75) 45%, rgba(8,8,8,0.25) 100%),
    linear-gradient(to top, rgba(8,8,8,0.85) 0%, transparent 50%);
}

.svc-hero__glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,0,1) 0%, transparent 70%);
  top: -100px; right: 15%;
  filter: blur(80px);
  opacity: 0.18;
  pointer-events: none;
  animation: heroGlowFloat 8s ease-in-out infinite alternate;
}

.svc-hero__noise {
  position: absolute; inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
}

.svc-hero__grid-lines {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex;
  justify-content: space-evenly;
  pointer-events: none;
  opacity: 0.04;
}
.svc-hero__grid-lines span {
  display: block;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.6) 70%, transparent 100%);
}

.svc-hero__container {
  position: relative; z-index: 2; flex: 1;
  display: flex; align-items: center;
  padding-top: clamp(6rem, 12vw, 10rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.svc-hero__body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  width: 100%;
}

.svc-hero__left {
  display: flex; flex-direction: column;
  gap: var(--space-6); max-width: 680px;
}

.svc-hero__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-full); padding: 5px 14px; width: fit-content;
}

.svc-hero__badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
  animation: heroBadgePulse 2s ease-in-out infinite; flex-shrink: 0;
}

.svc-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 5.5rem);
  font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--color-text-primary); margin: 0;
}

.svc-hero__sub {
  font-size: clamp(var(--text-base), 1.5vw, var(--text-md));
  color: rgba(255,255,255,0.55);
  line-height: var(--lh-relaxed); max-width: 520px; margin: 0;
}

.svc-hero__usp { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.svc-hero__usp-item {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-full); padding: 5px 12px; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-default),
              color       var(--duration-fast) var(--ease-default);
}
.svc-hero__usp-item svg { color: var(--color-primary); flex-shrink: 0; }
.svc-hero__usp-item:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.85); }

.svc-hero__form-wrap {
  background: rgba(22,22,22,0.75);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

.svc-hero__form-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--space-4);
}

.svc-hero__form { display: flex; flex-direction: column; gap: var(--space-3); }

.svc-hero__form-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}

.svc-hero__field { position: relative; }

.svc-hero__input {
  width: 100%; padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-sm); color: #fff;
  outline: none; -webkit-appearance: none; appearance: none;
  transition: border-color var(--duration-fast) var(--ease-default),
              background    var(--duration-fast) var(--ease-default),
              box-shadow    var(--duration-fast) var(--ease-default);
}
.svc-hero__input::placeholder { color: rgba(255,255,255,0.28); }
.svc-hero__input:focus {
  border-color: var(--color-primary);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.12);
}

.svc-hero__btn { width: 100%; justify-content: center; padding: 0.9rem 1.5rem; font-size: var(--text-sm); gap: var(--space-3); }

.svc-hero__form-note {
  font-size: 0.72rem; color: rgba(255,255,255,0.28);
  text-align: center; line-height: 1.5; margin: 0;
}
.svc-hero__form-note a { color: rgba(255,255,255,0.45); text-decoration: underline; text-underline-offset: 2px; }

.svc-hero__form-msg {
  font-size: var(--text-xs); text-align: center;
  border-radius: var(--radius-md); overflow: hidden;
  transition: all var(--duration-fast) var(--ease-default);
}
.svc-hero__form-msg:not(:empty) { padding: var(--space-2) var(--space-3); margin-top: var(--space-1); }
.svc-hero__form-msg--success { background: rgba(46,204,113,0.12); color: #2ECC71; border: 1px solid rgba(46,204,113,0.2); }
.svc-hero__form-msg--error   { background: rgba(231,76,60,0.12);  color: #E74C3C;  border: 1px solid rgba(231,76,60,0.2); }

/* Правая карточка */
.svc-hero__right { display: flex; align-items: center; justify-content: center; }

.svc-hero__card {
  position: relative; width: 320px; aspect-ratio: 3/4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; padding: var(--space-6);
}

.svc-hero__card-frame {
  position: absolute; inset: 0;
  border: 1px solid rgba(255,107,0,0.25);
  border-radius: var(--radius-xl); background: rgba(255,107,0,0.03); overflow: hidden;
}

.svc-hero__card-corner { position: absolute; width: 20px; height: 20px; border-color: var(--color-primary); border-style: solid; opacity: 0.9; }
.svc-hero__card-corner--tl { top:-1px; left:-1px;   border-width:2px 0 0 2px; border-radius:var(--radius-xl) 0 0 0; }
.svc-hero__card-corner--tr { top:-1px; right:-1px;  border-width:2px 2px 0 0; border-radius:0 var(--radius-xl) 0 0; }
.svc-hero__card-corner--bl { bottom:-1px; left:-1px;  border-width:0 0 2px 2px; border-radius:0 0 0 var(--radius-xl); }
.svc-hero__card-corner--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-xl) 0; }

.svc-hero__card-scan {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0.6; animation: heroCardScan 3s linear infinite;
}

.svc-hero__card-stat {
  position: relative; z-index: 2;
  display: flex; align-items: baseline; gap: 2px; margin-bottom: var(--space-2);
}

.svc-hero__card-num {
  font-family: var(--font-display); font-size: clamp(3.5rem,6vw,5rem);
  font-weight: 800; color: var(--color-primary); line-height: 1;
  text-shadow: 0 0 40px rgba(255,107,0,0.4);
}

.svc-hero__card-unit {
  font-family: var(--font-display); font-size: 2rem; font-weight: 800;
  color: var(--color-primary); align-self: flex-start; margin-top: 4px;
}

.svc-hero__card-desc {
  font-size: 0.7rem; color: rgba(255,255,255,0.45); line-height: 1.35;
  margin-left: var(--space-2); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: var(--fw-medium);
}

.svc-hero__card-badge {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-full); padding: 5px 12px;
}
.svc-hero__card-badge svg { color: #2ECC71; flex-shrink: 0; }

/* Stats bar */
.svc-hero__stats {
  position: relative; z-index: 2;
  background: rgba(10,10,10,0.80);
  border-top: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: var(--space-4) 0; flex-shrink: 0;
}

.svc-hero__stats-grid {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0;
}

.svc-hero__stat {
  display: flex; align-items: baseline; gap: 4px;
  padding: var(--space-3) clamp(var(--space-5), 3vw, var(--space-10));
  white-space: nowrap;
}

.svc-hero__stat-num {
  font-family: var(--font-display); font-size: clamp(1.75rem,3vw,2.5rem);
  font-weight: 800; color: var(--color-primary); line-height: 1;
}

.svc-hero__stat-unit {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--color-primary); line-height: 1; align-self: flex-start; margin-top: 2px;
}

.svc-hero__stat-label {
  font-size: var(--text-xs); color: rgba(255,255,255,0.38);
  text-transform: uppercase; letter-spacing: 0.09em;
  align-self: flex-end; margin-left: 4px; font-weight: var(--fw-medium);
}

.svc-hero__stat-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.08); flex-shrink: 0; }


/* ════════════════════════════════════════
   2. ПРЕИМУЩЕСТВА — .svc-adv
════════════════════════════════════════ */

.svc-adv {
  background: var(--color-bg-base);
  padding: var(--section-py) 0;
  position: relative; overflow: hidden;
}

.svc-adv::before {
  content: '';
  position: absolute; top: -100px; left: -100px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, var(--color-blob-1) 0%, transparent 68%);
  filter: blur(80px); pointer-events: none;
}

.svc-adv__head { margin-bottom: clamp(2rem,4vw,3.5rem); position: relative; z-index: 1; }

.svc-adv__title {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3.5rem);
  font-weight: var(--fw-extrabold); text-transform: uppercase;
  letter-spacing: var(--ls-tight); color: var(--color-text-primary);
  margin: var(--space-2) 0 0; line-height: var(--lh-tight);
}

.svc-adv__grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: var(--space-5); position: relative; z-index: 1;
}

.svc-adv__card {
  position: relative;
  background: var(--color-card-bg);
  border: 1px solid rgba(255,107,0,0.10);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-5) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition:
    border-color var(--duration-normal) var(--ease-default),
    transform    var(--duration-normal) var(--ease-industrial),
    box-shadow   var(--duration-normal) var(--ease-default);
}

.svc-adv__card:hover {
  border-color: rgba(255,107,0,0.35);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 32px rgba(255,107,0,0.06);
}

.svc-adv__card-c {
  position: absolute; width: 14px; height: 14px;
  border-color: rgba(255,107,0,0.35); border-style: solid;
  opacity: 0; pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.svc-adv__card:hover .svc-adv__card-c { opacity: 0.8; }
.svc-adv__card-c--tl { top:-1px; left:-1px;   border-width:2px 0 0 2px; border-radius:var(--radius-xl) 0 0 0; }
.svc-adv__card-c--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-xl) 0; }

.svc-adv__num {
  font-family: var(--font-display); font-size: clamp(2.5rem,4vw,4rem);
  font-weight: var(--fw-extrabold); color: var(--color-primary);
  line-height: 1; opacity: 0.22;
  position: absolute; top: var(--space-4); right: var(--space-5);
  transition: opacity var(--duration-normal) var(--ease-default);
}
.svc-adv__card:hover .svc-adv__num { opacity: 0.45; }

.svc-adv__card-title {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--ls-tight); color: var(--color-text-primary);
  margin: 0; padding-right: var(--space-12); line-height: var(--lh-snug);
}

.svc-adv__card-desc {
  font-size: var(--text-sm); color: var(--color-text-secondary);
  line-height: var(--lh-relaxed); margin: 0;
}


/* ════════════════════════════════════════
   3. ТЕХНИЧЕСКИЕ ХАРАКТЕРИСТИКИ — .svc-specs
════════════════════════════════════════ */

.svc-specs {
  background: var(--color-bg-surface);
  padding: var(--section-py) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.svc-specs__inner {
  display: grid; grid-template-columns: 1fr 1.6fr;
  gap: clamp(3rem,6vw,6rem); align-items: start;
}

.svc-specs__head {
  position: sticky; top: 100px;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--space-4);
}

.svc-specs__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem,3vw,3rem); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--ls-tight);
  color: var(--color-text-primary); margin: var(--space-2) 0 0;
  line-height: var(--lh-tight);
}

.svc-specs__sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; line-height: var(--lh-relaxed); }
.svc-specs__cta { margin-top: var(--space-2); }

.svc-specs__table {
  display: flex; flex-direction: column;
  gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); overflow: hidden;
}

.svc-specs__row {
  display: flex; justify-content: space-between;
  align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-card-bg);
  transition: background var(--duration-fast) var(--ease-default);
}
.svc-specs__row:hover { background: var(--color-bg-raised); }
.svc-specs__key { font-size: var(--text-sm); color: var(--color-text-muted); }
.svc-specs__val { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-primary); text-align: right; }


/* ════════════════════════════════════════
   4. ВИДЕО — .svc-video (iframe wrapper)
   .tkl29-player стили уже есть глобально
════════════════════════════════════════ */

.svc-video { background: var(--color-bg-base); padding: var(--section-py) 0; }

.svc-video__head { margin-bottom: clamp(2rem,4vw,3rem); }

.svc-video__title {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3.5rem); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--ls-tight);
  color: var(--color-text-primary); margin: var(--space-2) 0 0; line-height: var(--lh-tight);
}

.svc-video__iframe-wrap {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: var(--color-bg-raised);
  box-shadow: var(--glow-card);
}

.svc-video__iframe-btn {
  display: block; width: 100%; position: relative; cursor: pointer;
  border: none; padding: 0; background: none;
  aspect-ratio: 16/9;
}

.svc-video__iframe-btn img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.75);
  transition: filter var(--duration-normal) var(--ease-default);
}

.svc-video__iframe-btn:hover img { filter: brightness(0.85); }

.svc-video__iframe-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration-fast) var(--ease-bounce),
              box-shadow var(--duration-fast) var(--ease-default);
}

.svc-video__iframe-btn:hover .svc-video__iframe-play {
  transform: translate(-50%,-50%) scale(1.1);
  box-shadow: 0 0 0 16px rgba(255,107,0,0.15);
}

.svc-video__iframe-title {
  position: absolute; bottom: var(--space-5); left: var(--space-5);
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}


/* ════════════════════════════════════════
   5. ПРОЕКТЫ — .svc-portfolio
   .pf-grid и .pf-card уже в style.css
════════════════════════════════════════ */

.svc-portfolio { background: var(--color-bg-base); padding: var(--section-py) 0; }

.svc-portfolio__head {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: var(--space-5);
  margin-bottom: clamp(2rem,4vw,3rem); flex-wrap: wrap;
}

.svc-portfolio__title {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3.5rem); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--ls-tight);
  color: var(--color-text-primary); margin: var(--space-2) 0 var(--space-2);
  line-height: var(--lh-tight);
}

.svc-portfolio__sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }


/* ════════════════════════════════════════
   6. CTA-ФОРМА — .svc-cta
════════════════════════════════════════ */

.svc-cta {
  position: relative; padding: var(--section-py) 0; overflow: hidden;
}

.svc-cta__bg { position: absolute; inset: 0; z-index: 0; }
.svc-cta__bg > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(0.12) saturate(0.4);
}
.svc-cta__bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.78) 100%);
}

.svc-cta__pattern {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.02; z-index: 1;
  background-image: radial-gradient(circle, var(--color-primary) 1px, transparent 1px);
  background-size: 28px 28px;
}

.svc-cta .container { position: relative; z-index: 2; }

.svc-cta__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(3rem,6vw,6rem); align-items: center;
}

.svc-cta__text { display: flex; flex-direction: column; gap: var(--space-4); }

.svc-cta__title {
  font-family: var(--font-display);
  font-size: clamp(2rem,3.5vw,3.5rem); font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: var(--ls-tight);
  color: var(--color-text-primary); margin: var(--space-2) 0 0; line-height: var(--lh-tight);
}

.svc-cta__sub { font-size: var(--text-base); color: var(--color-text-secondary); line-height: var(--lh-relaxed); margin: 0; }

.svc-cta__trust { display: flex; flex-direction: column; gap: var(--space-2); }
.svc-cta__trust span { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.svc-cta__trust svg { color: #2ECC71; flex-shrink: 0; }

.svc-cta__form-card {
  position: relative;
  background: rgba(22,22,22,0.88);
  border: 1px solid rgba(255,107,0,0.20);
  border-radius: var(--radius-2xl); padding: var(--space-8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), var(--glow-card);
}

.svc-cta__form-card-c { position: absolute; width: 16px; height: 16px; border-color: var(--color-primary); border-style: solid; opacity: 0.5; }
.svc-cta__form-card-c--tl { top:-1px; left:-1px;  border-width:2px 0 0 2px; border-radius:var(--radius-2xl) 0 0 0; }
.svc-cta__form-card-c--br { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 var(--radius-2xl) 0; }

.svc-cta__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.svc-cta__field { display: flex; flex-direction: column; gap: var(--space-2); }
.svc-cta__field--full { grid-column: 1/-1; }

.svc-cta__label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
}
.svc-cta__label svg { color: var(--color-primary); flex-shrink: 0; }

.svc-cta__input {
  width: 100%; padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md); font-family: var(--font-body);
  font-size: var(--text-sm); color: #fff; outline: none;
  -webkit-appearance: none; resize: vertical;
  transition: border-color var(--duration-fast) var(--ease-default),
              background    var(--duration-fast) var(--ease-default),
              box-shadow    var(--duration-fast) var(--ease-default);
}
.svc-cta__input::placeholder { color: rgba(255,255,255,0.22); }
.svc-cta__input:focus {
  border-color: var(--color-primary);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px rgba(255,107,0,0.10);
}
.svc-cta__textarea { min-height: 88px; }

.svc-cta__submit { grid-column: 1/-1; }
.svc-cta__note { grid-column: 1/-1; font-size: 0.72rem; color: rgba(255,255,255,0.28); text-align: center; margin: 0; }
.svc-cta__note a { color: rgba(255,255,255,0.4); text-decoration: underline; text-underline-offset: 2px; }

.svc-cta__msg { grid-column: 1/-1; font-size: var(--text-xs); text-align: center; border-radius: var(--radius-md); transition: all var(--duration-fast) var(--ease-default); }
.svc-cta__msg:not(:empty) { padding: var(--space-2) var(--space-3); }
.svc-cta__msg--success { background: rgba(46,204,113,0.12); color: #2ECC71; border: 1px solid rgba(46,204,113,0.2); }
.svc-cta__msg--error   { background: rgba(231,76,60,0.12);  color: #E74C3C;  border: 1px solid rgba(231,76,60,0.2); }

/* ══════════════════════════════════════════════
   SEO-ТЕКСТ УСЛУГИ
══════════════════════════════════════════════ */
.svc-seo{position: relative;padding: 64px 0;}
.svc-seo__inner{max-width: 1000px;margin: 0 auto;}
.svc-seo__title{margin: 0 0 24px;font-size: clamp(26px, 3vw, 38px);line-height: 1.2;font-weight: 700;}
.svc-seo__text{font-size: 16px;line-height: 1.8;overflow-wrap: anywhere;}
.svc-seo__text p{margin: 0 0 18px;}
.svc-seo__text h2, .svc-seo__text h3, .svc-seo__text h4{margin: 30px 0 14px;line-height: 1.3;}
.svc-seo__text ul, .svc-seo__text ol{margin: 0 0 20px;padding-left: 24px;}
.svc-seo__text li{margin-bottom: 8px;}
.svc-seo__text a{text-decoration: underline;text-underline-offset: 3px;}

/*Таблицы в описаниях услуг и на странице контактов*/
.descr-table{border-spacing:0;width:100%}
.descr-table th{font-weight:600;text-align:center}
.descr-table th, .descr-table td{border:1px solid #6B6B6B;padding:10px}

/* ════════════════════════════════════════
   АДАПТИВ
════════════════════════════════════════ */

@media (max-width: 1199px) {
  .svc-hero__body { grid-template-columns: 1fr; }
  .svc-hero__right { display: none; }
  .svc-hero__left { max-width: 100%; }
}

@media (max-width: 768px) {
  .svc-hero__form-fields { grid-template-columns: 1fr; }
  .svc-adv__grid { grid-template-columns: repeat(2,1fr); }
	
	.svc-seo {padding: 40px 0;}
    .svc-seo__title {margin-bottom: 18px;}
    .svc-seo__text {font-size: 15px;line-height: 1.7;}
}

@media (max-width: 640px) {
  .svc-adv__grid { grid-template-columns: 1fr; }
  .svc-specs__inner { grid-template-columns: 1fr; }
  .svc-specs__head { position: static; }
  .svc-cta__inner { grid-template-columns: 1fr; }
  .svc-cta__form { grid-template-columns: 1fr; }
  .svc-cta__submit, .svc-cta__note, .svc-cta__msg { grid-column: 1; }
  .svc-portfolio__head { flex-direction: column; align-items: flex-start; }
}























/* ============================================================
   service-landing.css — TakelazhGroup
   Уникальные стили для page-service.php лендинга.

   НЕ дублируем из style.css:
   .hero, .marquee, .adv, .hww, .guarantees, .testi,
   .tkl29-video, .portfolio, .faq, .mistakes, .tkl30-compare,
   .tkl32-contacts — всё это уже в style.css

   Здесь только:
   1. Микро-фиксы для работы блоков на лендинге
   2. .svc-landing — обёртка
   ============================================================ */

/* ── Обёртка лендинга ── */
.svc-landing {
    overflow-x: hidden;
}

/* ── Hero: на лендинге H1 — одна строка (не stack) ── */
.svc-landing .hero__title {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.2em;
    line-height: 1.05;
    font-size: clamp(2.2rem, 5vw, 5rem);
}

/* ── Смещение якорей под фиксированную шапку ── */
.svc-landing #svc-process,
.svc-landing #svc-guarantees,
.svc-landing #svc-testimonials,
.svc-landing #svc-video,
.svc-landing #svc-portfolio,
.svc-landing #svc-faq,
.svc-landing #svc-contacts {
    scroll-margin-top: calc(var(--header-height) + 20px);
}

/* ── Портфолио: на лендинге сетка 3 колонки всегда ── */
.svc-landing .portfolio__grid {
    grid-template-columns: repeat(3, 1fr);
}

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

@media (max-width: 580px) {
    .svc-landing .portfolio__grid {
        grid-template-columns: 1fr;
    }
    .svc-landing .hero__title {
        font-size: clamp(1.8rem, 7vw, 3rem);
    }
}









































/* ============================================================
   PATCH: BLOCK-05 CALCULATOR — additional styles
   Для добавленных в HTML элементов:
   - чекбоксы «Особенности объекта» (.calc__checks / .calc__check)
   - подпись-хинт у label (.calc__label-hint)
   - убираем нативные number-spinners (стрелочки) у input[type=number]
   ============================================================ */

/* ── Убираем стрелочки у input type="number" внутри калькулятора ── */
.calc__input[type="number"]::-webkit-outer-spin-button,
.calc__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.calc__input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ── Хинт в label — серый, в скобках, не отвлекает ── */
.calc__label-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.7rem;
  margin-left: 4px;
}

/* ── Сетка чекбоксов «Особенности объекта» ── */
.calc__checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
}

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

/* ── Один чекбокс — кастомный, в стиле остального калькулятора ── */
.calc__check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-default);
}

.calc__check:hover {
  background: rgba(255, 255, 255, 0.03);
}

.calc__check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  position: relative;
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  margin: 0;
}

.calc__check input[type="checkbox"]:hover {
  border-color: rgba(255, 107, 0, 0.45);
}

.calc__check input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}

.calc__check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border: 2px solid #000;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.calc__check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.calc__check span {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: var(--lh-snug);
  user-select: none;
  transition: color var(--duration-fast) var(--ease-default);
}

.calc__check:hover span {
  color: rgba(255, 255, 255, 0.85);
}

.calc__check input[type="checkbox"]:checked + span {
  color: rgba(255, 255, 255, 0.92);
}







































/* ============================================================
   PATCH: BLOCK-05 CALCULATOR — CUSTOM SELECT
   Кастомный dropdown поверх нативного <select.calc__select>
   Нативный select остаётся в DOM (скрыт), значения синхронизирует JS
   ============================================================ */

/* ── Скрываем нативный select после замены ── */
.calc__select.is-replaced {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
  opacity: 0;
}

/* ── Wrap должен быть позиционируемым (уже стоит в style.css), 
     но явно дублируем и чуть приподнимаем z-index при открытии ── */
.calc__select-wrap { position: relative; }
.calc__select-wrap.cs-is-open { z-index: 20; }

/* ── Триггер ── */
.cs-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-default),
    background   var(--duration-fast) var(--ease-default),
    box-shadow   var(--duration-fast) var(--ease-default);
}

.cs-trigger:hover {
  border-color: rgba(255, 107, 0, 0.30);
}

.cs-trigger:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.10);
}

.calc__select-wrap.cs-is-open .cs-trigger {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.10);
}

.cs-trigger[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.cs-trigger__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-trigger__arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  transition: transform var(--duration-normal) var(--ease-industrial),
              color     var(--duration-fast)   var(--ease-default);
}

.calc__select-wrap.cs-is-open .cs-trigger__arrow {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* ── Listbox (выпадающий список) ── */
.cs-listbox {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  background: #181818;
  border: 1px solid rgba(255, 107, 0, 0.25);
  border-radius: var(--radius-md);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 107, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity   0.18s var(--ease-default),
    transform 0.18s var(--ease-industrial);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 107, 0, 0.35) transparent;
}

.cs-listbox::-webkit-scrollbar {
  width: 6px;
}
.cs-listbox::-webkit-scrollbar-track {
  background: transparent;
}
.cs-listbox::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 0, 0.30);
  border-radius: 3px;
}
.cs-listbox::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 0, 0.50);
}

.calc__select-wrap.cs-is-open .cs-listbox {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Опция ── */
.cs-option {
  padding: 9px 12px;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-default),
    color      var(--duration-fast) var(--ease-default);
  outline: none;
  user-select: none;
  line-height: 1.35;
}

.cs-option:hover,
.cs-option.is-active,
.cs-option:focus-visible {
  background: rgba(255, 107, 0, 0.10);
  color: #fff;
  outline: none;
}

.cs-option.is-selected {
  background: rgba(255, 107, 0, 0.16);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.cs-option.is-selected:hover {
  background: rgba(255, 107, 0, 0.22);
}















/* убираем лишние обёртки CF7 внутри чекбокса */
.modal-form .form-checkbox .wpcf7-form-control-wrap,
.modal-form .form-checkbox .wpcf7-acceptance,
.modal-form .form-checkbox .wpcf7-list-item {
    display: contents;
}

/* выравниваем галочку и текст */
.modal-form .form-checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
}
.modal-form .form-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
}






















@media (max-width: 660px) {
.hero__stats-grid {
        grid-template-columns: 1fr;
    }
.btn {
    white-space: normal;
}
.cargo, .tkl30-compare, .adv__side-stats {
        display: none;
    }
.tkl32-map-actions {
    display: flex;
    flex-direction: column;
}
}