/* ═══════════════════════════════════════════════
  A.S. BUSINESS · Landing Page
  Design System · Based on AS Business brandbook
  Deep Navy · Warm Gold · Luxury Ecosystem
═══════════════════════════════════════════════ */

/* ── BRAND TOKENS ────────────────────────────────── */
:root {
  /* Brandbook exact colors */
  --navy-900:  #0B1020;
  --navy-800:  #151B2D;
  --navy-700:  #24324A;
  --navy-600:  #3D4A63;
  --gold-warm:  #C7BCA6;
  --gold-light: #E6E2DA;
  --gold-deep:  #9F8866;
  --gold-muted: #8A7A63;
  --white:     #FFFFFF;

  /* Тёплое шампань-золото для заголовков секций (Apple/Champagne Gold) */
  --title-gold: #E1C998;


  /* Semantic aliases */
  --bg:        var(--navy-900);
  --s1:        var(--navy-800);
  --s2:        #1a2235;
  --s3:        var(--navy-700);
  --s4:        var(--navy-600);
  --gold:      var(--gold-warm);
  --gold2:     var(--gold-light);
  --gold3:     var(--gold-deep);
  --gold4:     var(--gold-muted);
  --muted:     #7a8aaa;
  --muted2:    #3a4a6a;
  --border:    rgba(199,188,166,.07);
  --border2:   rgba(199,188,166,.14);
  --border3:   rgba(199,188,166,.26);

  /* Typography */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Montserrat', sans-serif;

  /* Spacing */
  --r:  12px;
  --r2: 8px;
  --r3: 24px;
}

/* ── RESET ───────────────────────────────────────── */
*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
  /* Safe area для Android/iPhone notch */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ── ATMOSPHERIC BACKGROUND ──────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0%, rgba(199,188,166,.025) 30%, transparent 50%),
    linear-gradient(315deg, transparent 0%, rgba(199,188,166,.02) 30%, transparent 50%),
    radial-gradient(ellipse 80% 30% at 50% -10%, rgba(199,188,166,.08) 0%, transparent 70%),
    linear-gradient(180deg, #0a0f1e 0%, #0B1020 40%, #0e1428 100%);
}

/* ── CONTAINER ───────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* ── SECTION HEADER ──────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}

/* ═══════════════════════════════════════════════
   ГЛОБАЛЬНЫЙ РАЗДЕЛИТЕЛЬ СЕКЦИЙ (золотая точка + 2 линии)
   Единый ритм между крупными смысловыми блоками экосистемы.
   Использовать ТОЛЬКО между секциями (не внутри, не перед footer,
   не рядом с CTA). Стиль идентичен .ecosystem-divider. */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  position: relative;
  z-index: 1;
}

.section-divider__line {
  width: 90px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(199,188,166,.35),
    transparent
  );
}

.section-divider__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    0 0 8px rgba(199,188,166,.45),
    0 0 18px rgba(199,188,166,.25);
}

.section-divider__dot::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(199,188,166,.18) 0%,
      transparent 70%
    );
}



/* ── SECTION ORNAMENT (текстовый разделитель ◆ ... ◆) ── */
.sec-ornament {
  display: grid;
  grid-template-columns: minmax(60px, 1fr) auto auto auto minmax(60px, 1fr);
  align-items: stretch;
  column-gap: 16px;
  width: 100%;
  max-width: 1200px;
  margin: 80px auto 60px;
  padding: 0 32px;
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}
.sec-orn-line {
  display: block;
  background:
    linear-gradient(to right, transparent 0%, rgba(199,188,166,.22) 8%, rgba(199,188,166,.22) 100%)
    center / 100% 1px no-repeat;
}
.sec-orn-line--r {
  display: block;
  background:
    linear-gradient(to left, transparent 0%, rgba(199,188,166,.22) 8%, rgba(199,188,166,.22) 100%)
    center / 100% 1px no-repeat;
}
.sec-orn-diamond {
  width: 6px;
  height: 6px;
  background: rgba(199,188,166,.75);
  transform: rotate(45deg);
  justify-self: center;
  align-self: center;
}
.sec-orn-text {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(199,188,166,.82);
  white-space: nowrap;
  justify-self: center;
  align-self: center;
}
@media (max-width: 768px) {
  .sec-ornament {
    grid-template-columns: 32px auto auto auto 32px;
    column-gap: 10px;
    margin: 56px auto 40px;
    padding: 0 16px;
  }

  /* Внешний конец растворяется, к ромбику — насыщенный */
  .sec-orn-line {
    background:
      linear-gradient(to right, transparent 0%, rgba(199,188,166,.28) 100%)
      center / 100% 1px no-repeat;
  }
  .sec-orn-line--r {
    background:
      linear-gradient(to left, transparent 0%, rgba(199,188,166,.28) 100%)
      center / 100% 1px no-repeat;
  }

  .sec-orn-text {
    font-size: 9px;
    letter-spacing: .30em;
    white-space: normal;
    text-align: center;
    line-height: 1.6;
  }

  .sec-orn-diamond {
    width: 4px;
    height: 4px;
  }
}

/* ───────────────────────────────────────────── */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(38px, 3vw, 50px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .015em;
  color: var(--white);
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 8px rgba(255,255,255,.04);
  margin-bottom: 28px;
}

.title-gold {
  color: var(--title-gold);
  text-shadow:
    0 0 10px rgba(225,201,152,.18),
    0 0 20px rgba(225,201,152,.08);
}
.title-white { color: var(--white); }

/* НОВЫЙ независимый разделитель секций (v2) */
.section-divider-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 56px 0;
  gap: 18px;
  position: relative;
  z-index: 1;
}

.section-divider-v2::before,
.section-divider-v2::after {
  content: "";
  width: 120px;
  height: 1px;
  background: rgba(199,188,166,.45);
}

.section-divider-v2 span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C7BCA6;
  box-shadow:
    0 0 10px rgba(199,188,166,.35),
    0 0 20px rgba(199,188,166,.15);
}

@media (max-width: 768px) {
  .section-title {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.12;
    letter-spacing: .01em;
    margin-bottom: 24px;
  }
}

.section-description {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255,255,255,.82);
  text-align: left;
  letter-spacing: 0;
  margin-top: 20px;
  max-width: none;
}

@media(max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}


/* ── HEADER ──────────────────────────────────────── */
.landing-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10,15,30,.85);
  backdrop-filter: blur(28px) saturate(1.2);
  border-bottom: .5px solid var(--border2);
  box-shadow: 0 1px 40px rgba(0,0,0,.4);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 32px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Единый фирменный знак A.S. BUSINESS (public/assets/as-business-logo.png)
   через background-image, а не отдельная копия картинки — при обновлении
   файла лого меняется сразу везде. background-size/position — не 100%/0,
   т.к. круг в самом файле не касается краёв квадрата и не центрирован
   идеально (измерено попиксельно: центр 623×623 из 1254, радиус ~530) —
   те же числа, что и в certificateGenerator.js/verifyPage.js. Проценты
   не зависят от px-размера контейнера — работают на любом размере знака. */
.logo__mark {
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid #C6B08A;
  background-image: url('/assets/as-business-logo.png');
  background-size: 118.302% 118.302%;
  background-position: 47.938% 47.938%;
  background-repeat: no-repeat;
  background-color: #0B1020;
  flex-shrink: 0;
  box-shadow: 0 2px 16px rgba(199,188,166,.2);
}

.logo__name {
  display: block;
  font-size: 19px;
  font-weight: 600;
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-transform: uppercase;
}

.logo__sub {
  display: block;
  font-size: 7px;
  font-family: Inter, Montserrat, sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Navigation */
.nav {
  display: flex;
  gap: 28px;
  flex: 1;
  justify-content: center;
}

.nav__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
  letter-spacing: .02em;
}

.nav__link:hover {
  color: var(--gold);
}

.header-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

@media(max-width: 968px) {
  .nav {
    display: none;
  }
}

/* ── MOBILE HEADER (≤768px): только кнопка «Войти» ──────────────
   На мобильных скрываем «Получить доступ» (.btn--primary в .header-actions)
   и показываем только «Войти» (.btn--ghost), оформляя её как премиальную
   золотую кнопку (стиль прежней мобильной CTA: 52px / radius 16 / #C7BCA6).
   Desktop (>768px) НЕ затрагивается. */
@media(max-width: 768px) {
  .container {
    padding: 0 16px;
  }

  .header-inner {
    gap: 12px;
  }

  /* Скрываем подпись логотипа на мобильных — освобождаем место для кнопки */
  .logo__sub {
    display: none;
  }

  .header-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
  }

  /* «Получить доступ» — скрыть на мобильных */
  .header-actions .btn--primary {
    display: none;
  }

  /* «Войти» — единственная видимая кнопка.
     Премиальная стеклянно-золотая кнопка (Apple/Stripe/OpenAI):
     объёмный градиент, мягкий блик, лёгкое внутреннее свечение. */
  .header-actions .btn--ghost {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Компактная кнопка: высота ≈ высоте логотипа слева */
    width: 110px;
    min-width: 110px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 18px;
    border: none;
    /* Скругление ровно как у Hero-кнопки «Получить доступ» (.btn наследует var(--r2)=8px) */
    border-radius: var(--r2);

    background: linear-gradient(
      135deg,
      #E8DDCB 0%,
      #D9CBB4 35%,
      #C9B79C 70%,
      #BCA98E 100%
    );
    color: #0B1020;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .02em;
    white-space: nowrap;
    /* Свечение уменьшено ещё ~на 40% — элегантно, акцент на Hero, не на кнопке */
    box-shadow:
      0 3px 9px rgba(199,188,166,.08),
      0 0 10px rgba(199,188,166,.04),
      inset 0 1px 0 rgba(255,255,255,.25);
    transition: all .25s ease;
  }



  .header-actions .btn--ghost:hover {
    color: #0B1020;
    border: none;
    transform: translateY(-1px);
    background: linear-gradient(
      135deg,
      #E8DDCB 0%,
      #D9CBB4 35%,
      #C9B79C 70%,
      #BCA98E 100%
    );
  }

  .header-actions .btn--ghost:active {
    transform: translateY(1px);
    box-shadow:
      0 4px 16px rgba(199,188,166,.18),
      inset 0 1px 0 rgba(255,255,255,.3);
  }
}



@media(max-width: 640px) {
  .header-inner {
    padding: 12px 0;
  }

  .logo__sub {
    display: none;
  }

  .header-actions {
    gap: 8px;
  }

  /* ≤640px — поведение то же: только «Войти», «Получить доступ» скрыт */
  .header-actions .btn--primary {
    display: none;
  }
}



/* ── BUTTONS ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--r2);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  font-weight: 600;
  min-height: 42px;
  text-decoration: none;
  white-space: nowrap;
}

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

.btn--primary {
  background: linear-gradient(135deg, var(--gold4) 0%, var(--gold) 60%, var(--gold2) 100%);
  color: var(--bg);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 12px 24px;
  box-shadow: 0 4px 20px rgba(199,188,166,.18);
}

.btn--primary:hover {
  opacity: .9;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(199,188,166,.28);
}

.btn--ghost {
  background: rgba(255,255,255,.04);
  color: var(--muted);
  border: .5px solid var(--border2);
  font-size: 11px;
  padding: 12px 20px;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  color: var(--white);
  border-color: var(--border3);
  background: rgba(255,255,255,.07);
}

.btn--large {
  min-height: 52px;
  padding: 16px 32px;
  font-size: 12px;
}

.btn--full {
  width: 100%;
}

/* ═══════════════════════════════════════════════
   HERO SECTION · Dark Ecosystem Theme
   Navy-900 background · Warm Gold accents
═══════════════════════════════════════════════ */
.hero {
  position: relative;
  z-index: 1;
  padding: 120px 0 70px;
  min-height: 620px;
  background: transparent;
  isolation: isolate;
  overflow: hidden;
}


/* Soft golden glow accent behind hero (часть экосистемы, не отдельный лендинг) */
.hero::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -5%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle at center, rgba(199,188,166,.10) 0%, rgba(199,188,166,.04) 40%, transparent 70%);
  pointer-events: none !important;
  z-index: 0 !important;
}


.hero .container {
  position: relative;
  z-index: 5;
}

/* ── CONTENT LAYOUT ────────────────────────────── */
.hero-content {
  position: relative;
  z-index: 2;
  opacity: 1 !important;
  display: grid;
  grid-template-columns: 9fr 11fr;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 32px;
}

/* ── TEXT SECTION ──────────────────────────────── */
.hero-text {
  position: relative;
  z-index: 2;
  opacity: 1 !important;
  max-width: 720px;
}


/* ── BADGE ─────────────────────────────────────── */
.hero-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px;
  margin-bottom: 20px;
  background: rgba(199,188,166,.06);
  border: .5px solid var(--border3);
  border-radius: var(--r);
  backdrop-filter: blur(8px);
}

.hero-badge__brand {
  font-size: 12px;
  font-weight: 500;
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.15em;
  color: #D4B483 !important;
  text-transform: uppercase;
}

.hero-badge__sub {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  color: #FFFFFF !important;
  text-transform: uppercase;
}

/* ── TITLE ─────────────────────────────────────── */
.hero-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-style: normal;
  font-size: clamp(42px, 3vw, 54px);
  font-weight: 500;
  line-height: .95;
  color: #FFFFFF !important;
  opacity: 1 !important;
  margin-bottom: 20px;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.hero-title br {
  display: block;
}

.hero-title__gold {
  font-style: normal;
  color: var(--gold);
  font-weight: 500;
}

.hero-title__second {
  display: block;
  font-style: normal;
  font-size: clamp(22px, 1.8vw, 30px);
  font-weight: 400;
  color: rgba(199,188,166,.7);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-top: 10px;
}

/* ── DESCRIPTION ───────────────────────────────── */
.hero-description {
  position: relative;
  z-index: 2;
  font-size: 16px;
  color: #E6E2DA !important;
  opacity: 1 !important;
  line-height: 1.7;
  margin-top: 48px;
  margin-bottom: 16px;
  max-width: 620px;
}

.hero-description--secondary {
  font-size: 14px;
  color: rgba(255,255,255,.42) !important;
  text-align: center;
  max-width: 1100px;
  margin: 20px auto 0;
  padding-bottom: 4px;
}

/* ── BENEFITS (полная ширина Hero, 4 колонки) ─── */
.hero-benefits {
  position: relative;
  z-index: 2;
  opacity: 1 !important;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 0;
  padding: 24px 0;
}

.hero-benefit {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #C7BCA6 !important;
  opacity: 1 !important;
  line-height: 1.4;
  padding: 4px 28px;
  text-align: left;
}

.hero-benefit:not(:last-child) {
  border-right: .5px solid rgba(198,176,138,.12);
}

.hero-benefit__text {
  flex: 1;
}


.hero-benefit__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--bg);
  background: linear-gradient(135deg, var(--gold4) 0%, var(--gold) 100%);
  box-shadow: 0 2px 10px rgba(199,188,166,.22);
}

/* ── ACTIONS (left-aligned, auto-width) ─────────── */
.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: -108px;
  margin-bottom: 28px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.hero-actions .btn {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}

.hero-actions .btn--large {
  min-height: 44px;
  padding: 11px 36px;
}

/* ── NOTE ──────────────────────────────────────── */
.hero-note {
  position: relative;
  z-index: 2;
  font-size: 13px;
  color: #C7BCA6 !important;
  opacity: 1 !important;
  line-height: 1.6;
  max-width: 560px;
}


/* ── VISUAL SECTION (ядро экосистемы A.S. BUSINESS) ── */
.hero-visual {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 0;
}

.hero-ecosystem {
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 30px rgba(199,188,166,.20))
    drop-shadow(0 0 80px rgba(199,188,166,.10));
  transition:
    transform .4s ease,
    filter .4s ease;
}

.hero-ecosystem:hover {
  transform: scale(1.02);
  filter:
    drop-shadow(0 0 40px rgba(199,188,166,.28))
    drop-shadow(0 0 100px rgba(199,188,166,.15));
}


@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── HERO DESKTOP ≥1440px (компактный first-screen, стиль OpenAI/Linear) ──
   Меняем ТОЛЬКО на больших десктопах: шире левая колонка (заголовок в 2 строки),
   меньше и выше схема. Анимации/пропорции/связи между «шарами» не трогаем
   (transform добавлен на .hero-visual — обёртку, .hero-ecosystem с его hover-scale
   и анимациями остаётся нетронутым). */
@media (min-width: 1440px) {
  .hero-content {
    grid-template-columns: 9fr 11fr;
    gap: 48px;
  }

  /* Шире текстовый блок → заголовок укладывается ровно в 2 строки без <br> */
  .hero-text {
    max-width: 820px;
  }

  /* Заголовок: «Экосистема предпринимателей / новой эпохи» (2 строки).
     <br> в HTML не трогаем; перенос обеспечивает ширина .hero-title + font-size.
     line-height не меняем. */
  .hero-title {
    font-size: clamp(40px, 2.7vw, 50px);
    max-width: 820px;
  }

  /* Подзаголовок — ровно 2 строки за счёт ширины контейнера (без <br>) */
  .hero-description {
    max-width: 720px;
  }

  /* Доп. тексты (вторичное описание и note) — переносы через ширину контейнера */
  .hero-description--secondary {
    max-width: 720px;
  }

  .hero-note {
    max-width: 720px;
  }

  /* Кнопки в одну строку (1200px+) */
  .hero-actions .btn--large {
    padding: 14px 26px;
  }

  /* Правая схема меньше */
  .hero-ecosystem {
    max-width: 400px;
  }

  /* Поднять схему вверх — обёртка, чтобы не конфликтовать с hover/анимациями ядра */
  .hero-visual {
    transform: translateY(-30px);
  }
}

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

/* Планшет: одна колонка, визуал снизу */
@media (max-width: 968px) {
  .hero {
    padding: 120px 0 60px;
  }

  .hero-content {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 24px;
  }

  .hero-visual {
    order: 2;
  }
}

/* ── MOBILE HERO: полностью отдельная компоновка ──
   Порядок: Badge → H1 → Описание → Ecosystem → Кнопки → Преимущества → Note
   НЕ масштабировать десктоп — отдельная вертикальная сборка.
─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    padding: 88px 0 40px;
  }

  /* Сбрасываем десктопный grid → вертикальный стек */
  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }

  .hero-text {
    max-width: 100%;
  }

  /* Плашка */
  .hero-badge {
    margin-bottom: 16px;
    align-self: flex-start;
  }

  /* Заголовок */
  .hero-title {
    font-size: clamp(26px, 7.5vw, 36px);
    line-height: 1.18;
    margin-bottom: 16px;
    max-width: 100%;
  }

  /* Первое описание (под H1) */
  .hero-description {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.65;
    max-width: 100%;
  }

  /* Ecosystem sphere: отдельный блок после описания, по центру */
  .hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 300px;
    margin: 28px auto 8px;
    order: 0;
  }

  /* Кнопки: после сферы, колонка, 100% ширина */
  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;    /* сброс десктопного -108px */
    margin-bottom: 24px;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero-actions .btn--large {
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    white-space: normal;
    line-height: 1.35;
    height: auto;
  }

  /* Преимущества: 2 колонки, убираем вертикальные разделители */
  .hero-benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 16px 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .hero-benefit {
    min-width: 0;          /* ключевой фикс: grid-item может сжаться */
    padding: 10px 12px;
    font-size: 12px;
    border-right: none !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .hero-benefit__text {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Разделители: правый только у левого столбца, нижний у первой строки */
  .hero-benefit:nth-child(odd) {
    border-right: .5px solid rgba(198,176,138,.22) !important;
  }

  .hero-benefit:nth-child(-n+2) {
    border-bottom: .5px solid rgba(198,176,138,.15);
  }

  /* Нижний пояснительный текст */
  .hero-description--secondary {
    margin-top: 28px;
    margin-bottom: 0;
    font-size: 13px;
    text-align: center;
    max-width: 100%;
    padding-bottom: 8px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 80px 0 36px;
  }

  .hero-title {
    font-size: clamp(24px, 7vw, 30px);
    line-height: 1.2;
  }

  .hero-visual {
    max-width: 260px;
  }

  /* Сетка карточек направлений — уже перекрыто медиазапросом 600px */

  /* Section title не должен переполнять экран */
  .section-title {
    font-size: clamp(22px, 7vw, 36px);
  }

  /* Свободные баннеры и карточки — убрать горизонтальный overflow */
  .product-free-banner {
    padding: 20px;
  }

  .product-pricing-box {
    padding: 20px 16px;
  }

  .product-pricing-price {
    font-size: 34px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }
}

@media (max-width: 360px) {
  .container {
    padding: 0 14px;
  }

  /* Логотип ещё компактнее */
  .logo__mark {
    width: 30px;
    height: 30px;
  }

  .logo__name {
    font-size: 14px;
    letter-spacing: .08em;
  }

  /* Кнопка «Войти» чуть уже */
  .header-actions .btn--ghost {
    width: 90px;
    min-width: 90px;
    font-size: 14px;
  }

  .hero-title {
    font-size: 24px;
  }
}

/* ── PRODUCT HIGHLIGHT ───────────────────────────── */
.product-highlight {
  position: relative;
  padding: 70px 0 60px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(21,27,45,.34) 20%,
    rgba(21,27,45,.42) 55%,
    rgba(21,27,45,.34) 82%,
    transparent 100%
  );
}

.product-card {
  display: flex;
  align-items: center;
  gap: 40px;
  background: rgba(20,28,46,.6);
  backdrop-filter: blur(16px);
  border: .5px solid var(--border2);
  border-radius: var(--r3);
  padding: 48px;
}

.product-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--r);
  background: rgba(199,188,166,.08);
  border: .5px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  flex-shrink: 0;
}

/* Контурная SVG-иконка робота внутри круга первой карточки
   (ПЕРВЫЙ ПРОДУКТ → AI УПАКОВЩИК АВИТО) */
.product-icon__svg {
  width: 48px;
  height: 48px;
  color: #C7BCA6;
  filter: drop-shadow(0 0 4px rgba(199,188,166,.35));
}

.product-content {
  flex: 1;
}

.product-title {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold);
  margin-bottom: 16px;
}

.product-description {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 20px;
}

.product-note {
  font-size: 13px;
  color: var(--gold2);
  line-height: 1.6;
  padding: 12px 16px;
  background: rgba(199,188,166,.06);
  border-left: 2px solid var(--gold3);
  border-radius: 0 var(--r2) var(--r2) 0;
  margin-bottom: 24px;
}

.product-note strong {
  color: var(--gold);
  font-weight: 600;
}

.product-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media(max-width: 768px) {
  .product-card {
    flex-direction: column;
    text-align: center;
    padding: 32px;
  }

  /* Текстовый контейнер карточки выравниваем по левому краю на mobile */
  .product-content {
    align-items: flex-start;
  }

  /* Описание и блок цены — по левому краю на mobile */
  .product-description,
  .product-pricing {
    text-align: left;
  }
  
  .product-actions {
    justify-content: center;
  }
}

@media(max-width: 640px) {
  .product-actions {
    flex-direction: column;
    width: 100%;
  }
}

/* ── SECTIONS ────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 40px;
}


/* ── ECOSYSTEM ───────────────────────────────────── */
.ecosystem {
  padding: 60px 0;
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.ecosystem-card {
  background: rgba(20,28,46,.6);
  backdrop-filter: blur(16px);
  border: .5px solid var(--border2);
  border-radius: var(--r);
  padding: 32px 28px;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  text-align: center;
}

.ecosystem-card:hover {
  border-color: var(--border3);
  background: rgba(26,36,58,.7);
  transform: translateY(-4px);
}

.ecosystem-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: var(--r);
  background: rgba(199,188,166,.06);
  border: .5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.ecosystem-card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.3;
}

.ecosystem-card__text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── STATS ───────────────────────────────────────── */
.stats {
  padding: 60px 0;
  background: rgba(21,27,45,.3);
  border-top: .5px solid var(--border);
  border-bottom: .5px solid var(--border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(199,188,166,.06);
  border: .5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── PRICING ─────────────────────────────────────── */
.pricing {
  position: relative;
  padding: 60px 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(21,27,45,.18) 30%,
    rgba(21,27,45,.22) 60%,
    rgba(21,27,45,.14) 85%,
    transparent 100%
  );
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  max-width: 1000px;
  margin: 0 auto;
}

.pricing-card {
  background: rgba(20,28,46,.6);
  backdrop-filter: blur(16px);
  border: .5px solid var(--border2);
  border-radius: var(--r);
  padding: 36px 32px;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  position: relative;
}

.pricing-card:hover {
  border-color: var(--border3);
  transform: translateY(-4px);
}

.pricing-card--featured {
  border-color: var(--gold3);
  background: rgba(30,40,62,.7);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold4) 0%, var(--gold) 100%);
  color: var(--bg);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 20px;
  /* строгое центрирование текста внутри плашки (по гориз. и верт.) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
}


.pricing-card__header {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: .5px solid var(--border);
}

.pricing-card__name {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.price-value {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 600;
  color: var(--gold);
}

.price-period {
  font-size: 14px;
  color: var(--muted);
}

.price-coming {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--gold);
  text-align: center;
  line-height: 1.35;
}

.pricing-card__features {
  list-style: none;
  margin-bottom: 28px;
}

.pricing-card__features li {
  font-size: 14px;
  color: var(--muted);
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.pricing-card__features li::before {
  content: '';
  flex-shrink: 0;
}

/* Круглая ЗОЛОТАЯ ЗАКРАШЕННАЯ иконка-галочка тарифов (стиль Hero .hero-benefit__icon).
   Золотой градиент-фон, тёмная галочка внутри, мягкое золотое свечение. */
.pricing-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold4) 0%, var(--gold) 100%);
  box-shadow:
    0 2px 10px rgba(199,188,166,.22),
    0 0 12px rgba(216,196,154,.18);
}

.pricing-check svg {
  width: 13px;
  height: 13px;
  color: var(--bg);
}



.pricing-card__subtitle {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 12px;
  text-align: center;
}

.pricing-card__value {
  background: rgba(199,188,166,.06);
  border-left: 2px solid var(--gold3);
  border-radius: 0 var(--r2) var(--r2) 0;
  padding: 16px;
  margin-bottom: 20px;
}

.pricing-card__value strong {
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

.pricing-card__value p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.pricing-card__inherit {
  font-size: 14px;
  color: var(--gold2);
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: .5px solid var(--border);
}

/* Pricing Growth Section */
.pricing-growth {
  margin-top: 50px;
  padding-top: 50px;
  border-top: .5px solid var(--border);
}

.pricing-growth__path {

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 500px;
  margin: 0 auto;
}

.pricing-growth__step {
  background: rgba(20,28,46,.6);
  backdrop-filter: blur(16px);
  border: .5px solid var(--border2);
  border-radius: var(--r);
  padding: 24px 32px;
  text-align: center;
  width: 100%;
  transition: all .3s;
}

.pricing-growth__step:hover {
  border-color: var(--border3);
  transform: scale(1.02);
}

.pricing-growth__step-name {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--white);
  margin-bottom: 8px;
}

.pricing-growth__step-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.pricing-growth__arrow {
  font-size: 32px;
  color: var(--gold);
  line-height: 1;
}

/* ── COMMUNITY ───────────────────────────────────── */
.community {
  padding: 60px 0;
  background: rgba(21,27,45,.3);
  border-top: .5px solid var(--border);
  border-bottom: .5px solid var(--border);
}

.community-cta {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.community-text {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 32px;
}

/* ── CONTACTS ────────────────────────────────────── */
.contacts {
  padding: 60px 0;
}

.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  max-width: 800px;
  margin: 0 auto;
}

.contact-item {
  text-align: center;
}

.contact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.contact-value {
  font-size: 16px;
  color: var(--gold);
  text-decoration: none;
  transition: color .2s;
}

.contact-value:hover {
  color: var(--gold2);
}

/* ── FOOTER ──────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════
   FOOTER · Premium Minimal (Apple / OpenAI / Stripe)
   Тёмный navy-градиент, мягкое золотое свечение,
   стеклянные акценты. HTML-структура не меняется.
═══════════════════════════════════════════════════════ */
.footer {
  position: relative;
  padding: 130px 0 40px;
  border-top: 1px solid rgba(199,188,166,.18);
  background:
    radial-gradient(circle at 20% 20%, rgba(199,188,166,.08), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(199,188,166,.05), transparent 40%),
    linear-gradient(180deg, #050914 0%, #071126 45%, #050914 100%);
}

/* Золотая линия-переход между основным контентом и футером */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(960px, 92%);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(199,188,166,.70) 30%,
    rgba(199,188,166,.85) 50%,
    rgba(199,188,166,.70) 70%,
    transparent 100%);
  box-shadow: 0 0 32px 4px rgba(199,188,166,.22);
  pointer-events: none;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  margin-bottom: 56px;
}

.footer-brand {
  max-width: 380px;
}

.footer-description {
  font-size: 14px;
  color: rgba(255,255,255,.62);
  line-height: 1.65;
  margin-top: 16px;
}

/* ── Социальные сети ───────────────────────────── */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.footer-social__item {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  text-decoration: none;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(199,188,166,.15);
  transition: transform .25s ease, border-color .25s ease,
    box-shadow .25s ease, color .25s ease, background .25s ease;
}

.footer-social__item:hover {
  transform: translateY(-3px);
  color: var(--gold2);
  border-color: rgba(199,188,166,.45);
  background: rgba(199,188,166,.08);
  box-shadow: 0 8px 24px rgba(199,188,166,.18),
    0 0 0 1px rgba(199,188,166,.12) inset;
}

.footer-social__text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

/* ── Колонки ссылок ──────────────────────────── */
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.footer-col a {
  position: relative;
  display: block;
  font-size: 13.5px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  margin-bottom: 10px;
  transition: color .25s ease, transform .25s ease;
}

.footer-col a::after {
  content: "→";
  position: absolute;
  margin-left: 8px;
  opacity: 0;
  color: var(--gold);
  transform: translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
}

.footer-col a:hover {
  color: var(--gold);
  transform: translateX(3px);
  text-shadow: 0 0 12px rgba(198,176,138,.28);
}

.footer-col a:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* ── Community card ──────────────────────────── */
.footer-community {
  background: rgba(198,176,138,.06);
  border: 1px solid rgba(198,176,138,.22);
  border-radius: var(--r2);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-community h4 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
}

.fcom-desc {
  font-size: 12px;
  color: rgba(255,255,255,.40);
  line-height: 1.65;
  margin: 0;
}

.fcom-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.fcom-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(198,176,138,.14);
  color: rgba(255,255,255,.72);
  transition: color .25s, border-color .25s, box-shadow .25s, transform .25s;
  min-height: 44px;
}

.fcom-link:hover {
  color: var(--gold);
  border-color: rgba(198,176,138,.42);
  box-shadow: 0 0 18px rgba(198,176,138,.14);
  transform: translateX(3px);
}

.fcom-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(198,176,138,.10);
  border: 1px solid rgba(198,176,138,.22);
  color: var(--gold);
  transition: box-shadow .25s;
}

.fcom-link:hover .fcom-icon {
  box-shadow: 0 0 14px rgba(198,176,138,.35);
}

.fcom-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
}

/* ── Premium advantages card ─────────────────── */
.footer-advantages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  min-height: 120px;
  margin-bottom: 40px;
  padding: 24px 32px;
  border-radius: 20px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(199,188,166,.18);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.footer-advantage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 28px;
  transition: box-shadow .3s ease, background .3s ease;
  border-radius: 14px;
}

/* Тонкие вертикальные разделители между карточками */
.footer-advantage + .footer-advantage::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg,
    transparent,
    rgba(199,188,166,.22),
    transparent);
}

.footer-advantage:hover {
  background: rgba(199,188,166,.05);
  box-shadow: 0 0 30px rgba(199,188,166,.14) inset;
}

.footer-advantage__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  background: rgba(17,24,46,.85);
  border: 1px solid rgba(199,188,166,.2);
  box-shadow: 0 0 18px rgba(199,188,166,.1);
  transition: box-shadow .3s ease, border-color .3s ease;
}

.footer-advantage:hover .footer-advantage__icon {
  border-color: rgba(199,188,166,.45);
  box-shadow: 0 0 24px rgba(199,188,166,.28);
}

.footer-advantage__text h5 {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold2);
  margin-bottom: 6px;
  letter-spacing: .01em;
}

.footer-advantage__text p {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.6);
}

/* ── Копирайт ─────────────────────────────────── */
.footer-bottom {
  text-align: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-bottom__tagline {
  font-size: 12px;
  color: rgba(255,255,255,.22);
  margin-top: 6px;
  letter-spacing: .04em;
}

.footer-bottom p {
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.35);
}

/* ── Адаптивность Footer ──────────────────────── */
@media(max-width: 1024px) {
  .footer-inner {
    gap: 56px;
  }
  .footer-links {
    gap: 32px;
  }
  .footer-advantage {
    padding: 8px 18px;
    gap: 14px;
  }
}

@media(max-width: 768px) {
  .footer {
    padding: 64px 0 32px;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-links {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-advantages {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 20px;
  }
  /* На мобильных вертикальные разделители превращаются в горизонтальные */
  .footer-advantage + .footer-advantage::before {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(199,188,166,.22),
      transparent);
  }
  .footer-advantage {
    padding: 16px 12px;
  }
  /* Отступ между «ПРИСОЕДИНЯЙТЕСЬ К СООБЩЕСТВУ» и «ПАРТНЕРАМ» */
  .footer-community + .footer-col {
    margin-top: 44px;
  }
}

@media(max-width: 420px) {
  .footer-social__item {
    width: 44px;
    height: 44px;
  }
  .footer-advantage__text p br {
    display: none;
  }
}


/* ── FOOTER DESKTOP ≥1200px (Premium Minimal) ──────────
   Правая часть = 2 колонки: вертикальный стек ссылок (О ПРОЕКТЕ →
   СООБЩЕСТВО → ПАРТНЁРАМ) + отдельная колонка «ЮРИДИЧЕСКИЕ ДОКУМЕНТЫ» (340px).
   Верхние границы первой и второй колонок выровнены (align-items: start).
   Mobile/tablet (<1200px) не затрагиваются. */
@media (min-width: 1200px) {
  .footer-links {
    display: grid;
    grid-template-columns: minmax(260px, 320px) 360px;
    gap: 120px;
    align-items: start;
  }

  .footer-links-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .footer-links-main .footer-col {
    margin: 0;
  }

  .footer-col--legal {
    max-width: 360px;
  }
}


/* ── NEW SECTIONS V2.2 ───────────────────────────── */

/* Benefits Section */

.benefits {
  position: relative;
  padding: 60px 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(21,27,45,.28) 25%,
    rgba(21,27,45,.34) 55%,
    rgba(21,27,45,.28) 80%,
    transparent 100%
  );
}

.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 700px;
  margin: 0 auto 40px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(20,28,46,.6);
  backdrop-filter: blur(16px);
  border: .5px solid var(--border2);
  border-radius: var(--r);
  transition: all .3s;
}

.benefit-item:hover {
  border-color: var(--border3);
  transform: translateX(4px);
}

.benefit-icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* тонкая золотая обводка + мягкое внешнее свечение (в стиле Hero) */
  border: 1px solid var(--gold);
  box-shadow:
    0 0 0 1px rgba(199,188,166,.10),
    0 0 12px rgba(199,188,166,.25);
}

/* маленькая золотая точка по центру */
.benefit-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(199,188,166,.55);
  transform: translate(-50%, -50%);
}


.benefit-text {
  font-size: 15px;
  color: var(--white);
  font-weight: 500;
}

.benefits-cta {
  text-align: center;
}

.benefits-cta__note {
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

.benefits-cta__info {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(198,176,138,0.45);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

/* Mission Section */
.mission {
  position: relative;
  padding: 60px 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(21,27,45,.28) 25%,
    rgba(21,27,45,.34) 55%,
    rgba(21,27,45,.28) 82%,
    transparent 100%
  );
}
/* когда секции предшествует sec-ornament, убираем лишний padding-top */
.sec-ornament + .benefits,
.sec-ornament + .mission,
.sec-ornament + .directions,
.sec-ornament + .product-highlight,
.sec-ornament + .loyalty,
.sec-ornament + .growth,
.sec-ornament + .audience,
.sec-ornament + .can-do,
.sec-ornament + .pricing,
.sec-ornament + .founder {
  padding-top: 0;
}


.mission-content {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mission-text {
  font-size: 17px;
  color: rgba(255,255,255,.82);
  line-height: 1.8;
  text-align: left;
}

/* Сетка преимуществ «Вместо X — Y» */
.mission-advantages {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}

.mission-advantage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}

.mission-advantage__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(198,176,138,.12);
  border: 1px solid rgba(198,176,138,.25);
  color: #C6B08A;
  margin-top: 1px;
}

/* Итоговый акцент под преимуществами */
.mission-accent {
  max-width: 620px;
  margin: 36px auto 0;
  font-size: 15px;
  color: rgba(198,176,138,.65);
  line-height: 1.7;
  text-align: center;
  font-style: italic;
  border-top: 1px solid rgba(198,176,138,.12);
  padding-top: 28px;
}

@media (max-width: 640px) {
  .mission-advantages { grid-template-columns: 1fr; }
}

/* Декоративный разделитель — элемент орбит экосистемы (без анимации/SVG/JS) */
.ecosystem-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 72px;
  margin-bottom: 32px;   /* сокращено 72 → 32 для плотного перехода к Directions */
}


.ecosystem-divider__line {
  width: 90px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(199,188,166,.35),
    transparent
  );
}

.ecosystem-divider__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    0 0 8px rgba(199,188,166,.45),
    0 0 18px rgba(199,188,166,.25);
}

.ecosystem-divider__dot::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(199,188,166,.18) 0%,
      transparent 70%
    );
}



/* Directions Section — продолжение Hero Ecosystem.
   Верхний отступ уменьшен: золотой разделитель Mission уже задаёт «расстояние»,
   секция читается как продолжение, а не как оторванный блок. */
.directions {
  position: relative;
  padding: 60px 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(21,27,45,.30) 20%,
    rgba(21,27,45,.38) 55%,
    rgba(21,27,45,.30) 82%,
    transparent 100%
  );
  overflow: hidden;
}


/* Декоративные орбиты-фон (тонкие эллипсы, не интерактивны).
   Разные радиусы + смещения + поворот → «живая» геометрия, как в Hero. */
.directions .container {
  position: relative;
}

/* Подзаголовок секции — единый стиль .section-description */
.directions-subtitle {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255,255,255,.82);
  text-align: left;
  letter-spacing: 0;
  max-width: 760px;
  margin: 20px auto 0;
}

.directions .container::before,
.directions .container::after {
  display: none;
}


.directions-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1180px;
  margin: 0 auto;
}

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

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

/* Карточка: горизонтальный layout — иконка слева, текст справа */
.direction-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 20px;
  row-gap: 6px;
  align-items: start;
  background: rgba(16,22,42,.72);
  border: .5px solid rgba(198,176,138,.22);
  border-radius: var(--r2);
  padding: 24px 22px;
  transition: border-color .3s, box-shadow .3s;
}


.direction-card:hover {
  border-color: rgba(198,176,138,.42);
  box-shadow: 0 0 28px rgba(198,176,138,.08);
}

.direction-card--available {
  border-color: rgba(198,176,138,.42);
}

/* Иконка — соответствует стилю .audience-card__icon */
.direction-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: start;
  border: 1px solid rgba(198,176,138,.55);
  background: radial-gradient(
    circle at 35% 30%,
    rgba(198,176,138,.12) 0%,
    rgba(10,16,34,.60) 60%
  );
  box-shadow:
    0 0 20px rgba(198,176,138,.10),
    inset 0 1px 0 rgba(198,176,138,.14);
  transition: border-color .3s, box-shadow .3s;
}

.direction-icon__svg {
  width: 28px;
  height: 28px;
  color: var(--gold);
  filter: drop-shadow(0 0 4px rgba(198,176,138,.35));
  transition: filter .3s;
}

.direction-icon__svg--lg {
  width: 32px;
  height: 32px;
}

/* Бренд A.S. BUSINESS не должен переноситься между точками (никогда A.S. ↵ BUSINESS) */
.brand-nowrap {
  white-space: nowrap;
}



.direction-card:hover .direction-icon {
  border-color: rgba(198,176,138,.80);
  box-shadow: 0 0 28px rgba(198,176,138,.18), inset 0 1px 0 rgba(198,176,138,.22);
}

.direction-card:hover .direction-icon__svg {
  filter: drop-shadow(0 0 6px rgba(198,176,138,.55));
}


.direction-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--white);
  margin: 0;
}

.direction-desc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.44);
  margin: 0;
}

.directions-footer-note {
  text-align: center;
  margin-top: 48px;
  font-size: 14px;
  color: rgba(255,255,255,.38);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.status--available {
  color: var(--gold);
  font-size: 13px;
  font-weight: 500;
}

.status--soon {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  font-weight: 400;
}



/* Product Pricing (legacy, kept for safety) */
.product-pricing {
  font-size: 15px;
  color: var(--gold2);
  line-height: 1.7;
  margin-bottom: 12px;
}

.product-pricing strong {
  color: var(--gold);
  font-weight: 700;
}

/* ── PRODUCT HIGHLIGHT redesign ──────────────────────── */
.product-free-banner {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  background: linear-gradient(135deg, rgba(198,176,138,.11) 0%, rgba(18,24,42,.92) 100%);
  border: 1px solid rgba(198,176,138,.38);
  border-radius: var(--r3);
  padding: 32px 36px;
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}

.product-free-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,176,138,.55), transparent);
  pointer-events: none;
}

.product-free-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, rgba(198,176,138,.12) 0%, rgba(18,26,48,.9) 60%, rgba(13,19,34,.96) 100%);
  border: 1px solid rgba(198,176,138,.40);
  box-shadow:
    0 0 0 1px rgba(198,176,138,.08),
    0 0 24px rgba(198,176,138,.18),
    inset 0 1px 0 rgba(198,176,138,.12),
    inset 0 0 18px rgba(198,176,138,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  position: relative;
}

.product-free-icon svg {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 5px rgba(198,176,138,.45));
  position: relative;
  z-index: 1;
}

/* Список иконок (Lucide SVG, 16×16, gold) */
.product-list-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  margin-top: 1px;
}

.product-list-icon svg {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 0 3px rgba(198,176,138,.30));
}

.product-free-body {
  flex: 1;
}

.product-free-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(198,176,138,.12);
  border: 1px solid rgba(198,176,138,.22);
  border-radius: 20px;
  padding: 5px 14px 5px 10px;
  margin-bottom: 12px;
}

.product-free-tag svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(198,176,138,.35));
}

.product-free-text {
  font-size: 15px;
  color: rgba(255,255,255,.78);
  line-height: 1.68;
  margin: 0;
}

.product-main-desc {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.product-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

.product-info-card {
  background: rgba(20,28,46,.72);
  border: .5px solid var(--border2);
  border-radius: var(--r2);
  padding: 28px 30px;
}

.product-info-card--economy {
  background: rgba(15,20,38,.7);
}

.product-info-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.product-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.product-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.70);
  line-height: 1.5;
}


.product-pricing-box {
  background: rgba(14,18,34,.75);
  border: .5px solid var(--border);
  border-radius: var(--r2);
  padding: 28px 36px;
  text-align: center;
  margin-bottom: 36px;
}

.product-pricing-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
  margin-bottom: 6px;
}

.product-pricing-after {
  font-size: 13px;
  color: rgba(255,255,255,.42);
  margin-bottom: 16px;
}

.product-pricing-price {
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .02em;
  line-height: 1;
  margin-bottom: 10px;
}

.product-pricing-discount {
  font-size: 14px;
  color: var(--gold2);
  margin-bottom: 16px;
}

.product-pricing-discount strong {
  color: var(--gold);
  font-weight: 700;
}

.product-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.product-footer-note {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.30);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.75;
}

@media (max-width: 768px) {
  .product-free-banner {
    flex-direction: column;
    gap: 18px;
    padding: 24px;
  }
  .product-cards-grid {
    grid-template-columns: 1fr;
  }
  .product-info-card {
    padding: 22px 24px;
  }
  .product-pricing-box {
    padding: 24px;
  }
}

@media (max-width: 640px) {
  /* Product CTA: обе кнопки — на всю ширину, текст переносится */
  .product-cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .product-cta .btn {
    width: 100%;
    white-space: normal;
    line-height: 1.35;
    height: auto;
    min-height: 52px;
    padding: 14px 20px;
    text-align: center;
  }
}

/* Levels Section */
.levels {
  padding: 70px 0 60px;
}

.levels-subtitle {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  max-width: 640px;
  margin: 16px auto 0;
  text-align: center;
}

/* ── Путь уровней (горизонтальный flex) ─────────── */
.levels-path {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 40px;
}

.level-step {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.level-step .level-card {
  flex: 1;
  min-width: 0;
}

.level-arrow {
  width: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(198,176,138,.28);
}

.level-arrow svg {
  width: 16px;
  height: 16px;
}

.level-card {
  background: rgba(20,28,46,.6);
  backdrop-filter: blur(16px);
  border: .5px solid var(--border2);
  border-radius: var(--r);
  padding: 20px 14px 18px;
  text-align: center;
  transition: border-color .3s, transform .3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.level-card:hover {
  border-color: rgba(198,176,138,.38);
  transform: translateY(-3px);
}

.level-card--vip {
  border-color: rgba(198,176,138,.40);
  background: rgba(28,38,58,.75);
  box-shadow: 0 0 24px rgba(198,176,138,.08);
}

.level-index {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(198,176,138,.40);
  margin-bottom: 10px;
}

.level-card--vip .level-index {
  color: rgba(198,176,138,.65);
}

.level-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--white);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.level-tagline {
  font-size: 11px;
  color: rgba(255,255,255,.40);
  line-height: 1.4;
  margin-bottom: 14px;
}

.level-discount {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}

/* ── Что открывается с ростом ─────────────────── */
.levels-unlocks {
  background: rgba(14,20,36,.7);
  border: .5px solid var(--border2);
  border-radius: var(--r2);
  padding: 36px 44px;
  margin-bottom: 32px;
}

.levels-unlocks__title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  text-align: center;
}

.levels-unlocks__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 48px;
}

.levels-unlocks__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.68);
  line-height: 1.5;
}

.levels-unlock-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.levels-unlock-icon svg {
  width: 13px;
  height: 13px;
}

/* ── Юридический + эмоциональный финал ───────── */
.levels-legal {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.28);
  max-width: 560px;
  margin: 0 auto 20px;
  line-height: 1.7;
}

.levels-emotion {
  text-align: center;
  font-size: 15px;
  color: rgba(198,176,138,.55);
  font-style: italic;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.75;
  padding-top: 24px;
  border-top: 1px solid rgba(198,176,138,.10);
}

/* ── Мобильная адаптация ─────────────────────── */
@media (max-width: 900px) {
  .levels-path {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .level-step {
    flex-direction: column;
    align-items: stretch;
  }
  .level-arrow {
    display: none;
  }
  .level-discount {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .levels-path {
    grid-template-columns: 1fr 1fr;
  }
  .levels-unlocks {
    padding: 24px 20px;
  }
  .levels-unlocks__list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 380px) {
  .levels-path {
    grid-template-columns: 1fr;
  }
}

/* Credits Info Section */
/* ─── Loyalty Program ─────────────────────────────────────── */
.loyalty {
  position: relative;
  padding: 96px 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(21,27,45,.24) 22%,
    rgba(21,27,45,.30) 55%,
    rgba(21,27,45,.24) 80%,
    transparent 100%
  );
}
.loyalty-intro {
  max-width: 520px;
  margin: 0 auto 52px;
  font-size: 16px;
  color: rgba(255,255,255,.48);
  text-align: center;
  line-height: 1.7;
}

/* ── Gift banner ── */
.lgb-banner {
  display: flex;
  align-items: center;
  gap: 44px;
  background: linear-gradient(135deg, rgba(198,176,138,.10) 0%, rgba(16,22,42,.92) 100%);
  border: 1px solid rgba(198,176,138,.32);
  border-radius: var(--r2);
  padding: 36px 44px;
  margin-bottom: 64px;
  position: relative;
  overflow: hidden;
}
.lgb-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(198,176,138,.60) 50%, transparent 100%);
}
.lgb-visual {
  position: relative;
  width: 180px; height: 180px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.lgb-glow {
  position: absolute; inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,176,138,.16) 0%, transparent 65%);
  pointer-events: none;
}
.lgb-icon-outer {
  width: 168px; height: 168px;
  border-radius: 50%;
  border: 1px solid rgba(198,176,138,.10);
  display: flex; align-items: center; justify-content: center;
}
.lgb-icon-inner {
  width: 118px; height: 118px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(198,176,138,.20) 0%, rgba(14,20,44,.94) 55%, rgba(10,14,30,.98) 100%);
  border: 1px solid rgba(198,176,138,.48);
  box-shadow:
    0 0 70px rgba(198,176,138,.28),
    0 0 140px rgba(198,176,138,.10),
    inset 0 1px 0 rgba(198,176,138,.24),
    inset 0 0 32px rgba(198,176,138,.08);
}
.lgb-icon-inner svg { width: 52px; height: 52px; color: var(--gold); }
/* Единый фирменный знак A.S. BUSINESS — см. комментарий у .logo__mark выше */
.lgb-coin {
  position: absolute;
  bottom: 14px; right: 4px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background-image: url('/assets/as-business-logo.png');
  background-size: 118.302% 118.302%;
  background-position: 47.938% 47.938%;
  background-repeat: no-repeat;
  background-color: #0B1020;
  border: 1.5px solid rgba(198,176,138,.68);
  box-shadow: 0 4px 18px rgba(198,176,138,.24), inset 0 1px 0 rgba(255,255,255,.12);
  z-index: 2;
}
.lgb-content { flex: 1; min-width: 0; }
.lgb-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(198,176,138,.48);
  margin-bottom: 10px;
}
.lgb-value {
  font-family: var(--font-heading);
  font-size: 46px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.lgb-label {
  font-size: 18px;
  color: rgba(255,255,255,.65);
  font-weight: 500;
  margin-bottom: 14px;
}
.lgb-desc {
  font-size: 14px;
  color: rgba(255,255,255,.30);
  line-height: 1.65;
  max-width: 480px;
}

/* ── Ornamental dividers ── */
.loy-ornament {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 36px;
}
.loy-orn-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(198,176,138,.30) 100%);
}
.loy-orn-line--r {
  background: linear-gradient(270deg, transparent 0%, rgba(198,176,138,.30) 100%);
}
.loy-orn-diamond {
  width: 5px; height: 5px;
  background: rgba(198,176,138,.55);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.loy-orn-text {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}

/* ── How it works: 3 cards ── */
.loyalty-how {
  display: flex;
  align-items: stretch;
  margin-bottom: 64px;
  gap: 0;
}
.lhow-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(16,24,46,.72);
  border: .5px solid var(--border2);
  border-radius: var(--r2);
  padding: 28px 28px;
}
.lhow-card--result {
  background: linear-gradient(135deg, rgba(198,176,138,.10) 0%, rgba(16,24,46,.85) 100%);
  border-color: rgba(198,176,138,.42);
  box-shadow: 0 0 40px rgba(198,176,138,.10), inset 0 1px 0 rgba(198,176,138,.12);
}
.lhow-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(198,176,138,.06);
  border: 1px solid rgba(198,176,138,.20);
}
.lhow-icon svg { width: 22px; height: 22px; color: rgba(198,176,138,.60); }
.lhow-icon--result {
  background: rgba(198,176,138,.14);
  border-color: rgba(198,176,138,.52);
  box-shadow: 0 0 22px rgba(198,176,138,.16);
}
.lhow-icon--result svg { color: var(--gold); }
.lhow-body { min-width: 0; }
.lhow-value {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  color: rgba(255,255,255,.80);
  line-height: 1;
  margin-bottom: 6px;
}
.lhow-value--mid {
  font-size: 20px;
  color: rgba(198,176,138,.88);
  line-height: 1.25;
}
.lhow-value--result { color: var(--gold); font-size: 38px; }
.lhow-cur { font-size: 20px; font-weight: 400; }
.lhow-value--result .lhow-cur { font-size: 22px; }
.lhow-label {
  font-size: 13px;
  color: rgba(255,255,255,.30);
  line-height: 1.45;
}
.lhow-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(198,176,138,.12);
  border: 1px solid rgba(198,176,138,.28);
  border-radius: 20px;
  padding: 4px 12px;
  margin-top: 8px;
}
.lhow-arrow {
  width: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(198,176,138,.25);
}
.lhow-arrow svg { width: 20px; height: 20px; }

/* ── Levels timeline v3 ── */
.loyalty-levels-v3 {
  position: relative;
  margin-bottom: 56px;
}
.llv3-track {
  position: absolute;
  top: 34px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(198,176,138,.22) 8%,
    rgba(198,176,138,.22) 92%,
    transparent 100%);
  pointer-events: none;
}
.llv3-items {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.llv3-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 0 4px;
}
.llv3-circle {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,24,48,.88);
  border: 1px solid rgba(198,176,138,.26);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
  transition: box-shadow .25s;
}
.llv3-circle svg { width: 26px; height: 26px; color: rgba(198,176,138,.60); }
.llv3-circle--vip {
  background: linear-gradient(135deg, rgba(198,176,138,.22) 0%, rgba(16,24,48,.94) 100%);
  border-color: rgba(198,176,138,.65);
  box-shadow: 0 0 30px rgba(198,176,138,.32), inset 0 1px 0 rgba(198,176,138,.22);
}
.llv3-circle--vip svg { color: var(--gold); }
.llv3-name {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.40);
}
.llv3-item--vip .llv3-name { color: var(--gold); }
.llv3-tagline {
  font-size: 11px;
  color: rgba(255,255,255,.24);
  line-height: 1.4;
}
.llv3-disc {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
}
.llv3-disc--vip { color: var(--gold); font-size: 24px; }

/* ── 4 benefit cards ── */
.loyalty-perks-v3 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 44px;
}
.lpv3-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(12,18,34,.70);
  border: .5px solid var(--border2);
  border-radius: var(--r2);
  padding: 22px 18px;
}
.lpv3-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(198,176,138,.06);
  border: 1px solid rgba(198,176,138,.18);
}
.lpv3-icon svg { width: 17px; height: 17px; color: var(--gold); }
.lpv3-body { min-width: 0; }
.lpv3-title {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.78);
  line-height: 1.4;
  margin-bottom: 4px;
}
.lpv3-sub { font-size: 13px; color: rgba(255,255,255,.32); line-height: 1.4; }

/* ── CTA bar ── */
.loyalty-cta-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(12,18,34,.80);
  border: .5px solid var(--border2);
  border-left: 3px solid rgba(198,176,138,.55);
  border-radius: var(--r2);
  padding: 28px 36px;
}
.lcb-text { flex: 1; min-width: 0; }
.lcb-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.2;
  margin-bottom: 4px;
}
.lcb-sub { font-size: 13px; color: rgba(255,255,255,.36); }
.lcb-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.lcb-btn svg { width: 15px; height: 15px; }
.lcb-link {
  font-size: 13px;
  color: rgba(198,176,138,.40);
  text-decoration: none;
  text-align: right;
  flex-shrink: 0;
  line-height: 1.5;
  transition: color .2s;
  max-width: 170px;
}
.lcb-link:hover { color: var(--gold); }

/* ── Loyalty mobile ── */
@media (max-width: 1024px) {
  .llv3-tagline { display: none; }
}
@media (max-width: 900px) {
  .lgb-visual { width: 130px; height: 130px; }
  .lgb-icon-outer { width: 120px; height: 120px; }
  .lgb-icon-inner { width: 86px; height: 86px; }
  .lgb-icon-inner svg { width: 38px; height: 38px; }
  .lgb-coin { width: 36px; height: 36px; font-size: 10px; bottom: 8px; right: 0; }
  .lgb-value { font-size: 34px; }
  .loyalty-how { flex-direction: column; }
  .lhow-arrow { width: auto; height: 36px; padding-right: 26px; }
  .lhow-arrow svg { transform: rotate(90deg); }
  .loyalty-perks-v3 { grid-template-columns: repeat(2, 1fr); }
  .loyalty-cta-bar { flex-wrap: wrap; gap: 20px; }
  .lcb-link { max-width: none; text-align: left; }
}
@media (max-width: 640px) {
  .lgb-banner { flex-direction: column; align-items: center; text-align: center; padding: 28px 20px; gap: 24px; }
  .lgb-desc, .lgb-eyebrow { margin: 0 auto; }
  .lgb-value { font-size: 28px; }
  .lgb-label { font-size: 15px; }
  .llv3-track { display: none; }
  .llv3-items { flex-wrap: wrap; gap: 8px 0; }
  .llv3-item { width: 33.33%; flex: none; }
  .llv3-circle { width: 54px; height: 54px; }
  .llv3-circle svg { width: 20px; height: 20px; }
  .llv3-disc { font-size: 16px; }
  .llv3-disc--vip { font-size: 20px; }
  .loyalty-cta-bar { flex-direction: column; align-items: center; text-align: center; padding: 24px 20px; border-left: none; border-top: 3px solid rgba(198,176,138,.55); border-radius: var(--r2); }
  .lcb-link { text-align: center; max-width: none; }
  .lcb-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .loyalty { padding: 64px 0; }
  .loyalty-perks-v3 { grid-template-columns: 1fr; }
  .llv3-item { width: 50%; }
}

/* ─── Credits Info ─────────────────────────────────────── */
.credits-info {
  padding: 80px 0;
  background: rgba(21,27,45,.3);
  border-top: .5px solid var(--border);
  border-bottom: .5px solid var(--border);
}

.credits-lead {
  max-width: 640px;
  margin: 0 auto 48px;
  font-size: 17px;
  color: rgba(255,255,255,.68);
  line-height: 1.75;
  text-align: center;
}
.credits-lead strong {
  color: var(--gold);
  font-weight: 600;
}

/* Journey card */
.credits-journey {
  max-width: 740px;
  margin: 0 auto 32px;
  background: rgba(20,28,46,.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: .5px solid var(--border2);
  border-radius: var(--r2);
  padding: 36px 40px;
}
.credits-journey__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(198,176,138,.42);
  text-align: center;
  margin-bottom: 28px;
}
.credits-journey__steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.credits-journey__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.cj-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(198,176,138,.05);
  border: 1px solid rgba(198,176,138,.16);
  flex-shrink: 0;
}
.cj-icon svg {
  width: 22px;
  height: 22px;
  color: rgba(198,176,138,.48);
}
.credits-journey__step--result .cj-icon {
  background: rgba(198,176,138,.12);
  border-color: rgba(198,176,138,.45);
  box-shadow: 0 0 22px rgba(198,176,138,.14);
}
.credits-journey__step--result .cj-icon svg {
  color: var(--gold);
}
.cj-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.cj-value {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,.72);
  line-height: 1;
}
.credits-journey__step--mid .cj-value {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(198,176,138,.72);
  line-height: 1.3;
}
.credits-journey__step--result .cj-value {
  font-size: 28px;
  color: var(--gold);
}
.cj-label {
  font-size: 12px;
  color: rgba(255,255,255,.30);
  line-height: 1.4;
}
.cj-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(198,176,138,.10);
  border: 1px solid rgba(198,176,138,.24);
  border-radius: 20px;
  padding: 4px 10px;
  margin-top: 2px;
  white-space: nowrap;
}
.cj-arrow {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: rgba(198,176,138,.22);
  padding-top: 19px;
}
.cj-arrow svg {
  width: 18px;
  height: 18px;
}

/* Facts card */
.credits-facts {
  max-width: 640px;
  margin: 0 auto 32px;
  background: rgba(14,20,36,.70);
  border: .5px solid var(--border2);
  border-radius: var(--r2);
  padding: 28px 36px;
}
.credits-facts__title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.credits-facts__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.credits-facts__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
}
.credits-facts__check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--gold);
}
.credits-facts__check svg {
  width: 16px;
  height: 16px;
}

/* Emotion + link */
.credits-emotion {
  max-width: 520px;
  margin: 0 auto 20px;
  font-size: 15px;
  color: rgba(198,176,138,.48);
  font-style: italic;
  text-align: center;
  line-height: 1.65;
}
.credits-details-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(198,176,138,.42);
  text-decoration: none;
  transition: color .2s;
}
.credits-details-link:hover { color: var(--gold); }
.credits-details-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform .2s;
}
.credits-details-link:hover svg { transform: translateX(3px); }

/* Credits mobile */
@media (max-width: 640px) {
  .credits-journey { padding: 24px 18px; }
  .credits-journey__steps { flex-direction: column; align-items: center; gap: 0; }
  .credits-journey__step {
    flex-direction: row;
    text-align: left;
    gap: 14px;
    width: 100%;
    padding: 10px 0;
  }
  .credits-journey__step .cj-text { align-items: flex-start; }
  .cj-arrow {
    padding-top: 0;
    width: auto;
    height: 28px;
    padding-left: 19px;
  }
  .cj-arrow svg { transform: rotate(90deg); }
  .credits-facts { padding: 22px 18px; }
  .credits-lead { font-size: 15px; }
}

/* How It Works Section */
.how-it-works {
  padding: 60px 0;
}

.workflow {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.workflow-step {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 32px;
  background: rgba(20,28,46,.6);
  backdrop-filter: blur(16px);
  border: .5px solid var(--border2);
  border-radius: var(--r);
  width: 100%;
  transition: all .3s;
}

.workflow-step:hover {
  border-color: var(--border3);
  transform: translateX(8px);
}

.workflow-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold4) 0%, var(--gold) 100%);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.workflow-text {
  font-size: 15px;
  color: var(--white);
  font-weight: 500;
}

.workflow-arrow {
  font-size: 24px;
  color: var(--gold);
}

/* Mentorship Section */
.mentorship {
  padding: 60px 0;
  background: rgba(21,27,45,.3);
  border-top: .5px solid var(--border);
  border-bottom: .5px solid var(--border);
}

.mentorship-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.mentorship-text {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  text-align: left;
  max-width: 760px;
  margin: 0 auto 20px;
}

.mentorship-launch {
  font-size: 17px;
  color: var(--gold2);
  font-weight: 600;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Минималистичный премиальный индикатор запуска:
   ▼ треугольник вниз · тонкая золотая линия · ▲ треугольник вверх.
   Воспринимается как живой элемент экосистемы, а не иконка. */
.launch-hourglass {
  position: relative;
  width: 14px;
  height: 22px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  margin-right: 12px;
}

/* Верхний золотой треугольник (вниз) */
.launch-hourglass::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #d8c49a;
  filter: drop-shadow(0 0 4px rgba(216, 196, 154, 0.5));
}

/* Нижний золотой треугольник (вверх) */
.launch-hourglass::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid #d8c49a;
  filter: drop-shadow(0 0 4px rgba(216, 196, 154, 0.5));
}

/* Центральная тонкая золотая линия с лёгким свечением — «падающий песок» */
.launch-hourglass__line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  transform: translate(-50%, -50%);
  background: #d8c49a;
  box-shadow:
    0 0 6px rgba(216, 196, 154, 0.6),
    0 0 14px rgba(216, 196, 154, 0.3);
  animation: launchSand 3.5s ease-in-out infinite;
}

@keyframes launchSand {
  0%,
  100% {
    opacity: 0.9;
  }

  50% {
    opacity: 0.3;
  }
}

.mentorship-cta {
  display: flex;
  justify-content: center;
}


/* ─── Growth / Ecosystem Roadmap ─────────────────────────── */
.growth {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(21,27,45,.22) 22%,
    rgba(21,27,45,.28) 55%,
    rgba(21,27,45,.22) 80%,
    transparent 100%
  );
}

.growth-intro {
  max-width: 660px;
  margin: 0 auto 60px;
  font-size: 16px;
  color: rgba(255,255,255,.48);
  text-align: center;
  line-height: 1.80;
}

/* ── Roadmap timeline ────────────────────────────────────── */
.growth-roadmap {
  position: relative;
  margin-bottom: 60px;
  padding-bottom: 8px;
}

.grm-track {
  position: absolute;
  top: 8px;
  left: calc(100% / 14);
  right: calc(100% / 14);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(198,176,138,.55) 0%,
    rgba(198,176,138,.55) 10%,
    rgba(198,176,138,.22) 45%,
    rgba(198,176,138,.10) 100%
  );
}

.grm-items {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.grm-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 2px;
}

.grm-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(198,176,138,.10);
  border: 1px solid rgba(198,176,138,.22);
}

.grm-dot--active {
  background: rgba(198,176,138,.55);
  border-color: rgba(198,176,138,.90);
  box-shadow: 0 0 14px rgba(198,176,138,.50), 0 0 28px rgba(198,176,138,.20);
}

.grm-dot--flagship {
  background: rgba(198,176,138,.20);
  border-color: rgba(198,176,138,.50);
}

.grm-label {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,.28);
  text-align: center;
}

.grm-item--active .grm-label {
  color: rgba(255,255,255,.72);
  font-weight: 500;
}

.grm-item--flagship .grm-label {
  color: rgba(198,176,138,.58);
}

.grm-now {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(198,176,138,.12);
  border: 1px solid rgba(198,176,138,.22);
  border-radius: 10px;
  padding: 2px 7px;
  margin-top: 4px;
}

/* ── Features list ───────────────────────────────────────── */
.growth-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 56px;
  max-width: 720px;
  margin: 0 auto 52px;
}

.gf-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: rgba(255,255,255,.60);
  line-height: 1.4;
}

.gf-item--flagship {
  color: rgba(198,176,138,.80);
  font-weight: 500;
}

.gf-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(198,176,138,.06);
  border: 1px solid rgba(198,176,138,.16);
  color: var(--gold);
}

.gf-icon--flagship {
  background: rgba(198,176,138,.12);
  border-color: rgba(198,176,138,.30);
  box-shadow: 0 0 12px rgba(198,176,138,.12);
}

/* ── Flagship: nastavnichestvo ───────────────────────────── */
.growth-flagship {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  background: linear-gradient(135deg, rgba(198,176,138,.10) 0%, rgba(14,20,40,.90) 100%);
  border: 1px solid rgba(198,176,138,.30);
  border-radius: var(--r2);
  padding: 44px 48px;
  position: relative;
  overflow: hidden;
}

.growth-flagship::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(198,176,138,.60) 50%, transparent 100%);
}

.growth-flagship__shine { display: none; }

.growth-flagship__content { flex: 1; min-width: 0; }

.gfl-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(198,176,138,.45);
  margin-bottom: 10px;
}

.gfl-title {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 26px;
}

.gfl-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.gfl-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.60);
}

.gfl-features li svg {
  flex-shrink: 0;
  color: var(--gold);
}

.growth-flagship__side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 220px;
}

.gfl-launch {
  width: 100%;
  text-align: center;
  padding: 22px 20px;
  background: rgba(198,176,138,.06);
  border: 1px solid rgba(198,176,138,.20);
  border-radius: var(--r2);
}

.gfl-launch__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(198,176,138,.10);
  border: 1px solid rgba(198,176,138,.24);
  color: var(--gold);
  margin: 0 auto 12px;
}

.gfl-launch__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(198,176,138,.45);
  margin-bottom: 6px;
}

.gfl-launch__date {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
}

.gfl-cta {
  width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
  padding: 13px 16px;
  height: auto;
}

/* ── Growth responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  .grm-track { display: none; }
  .grm-items { flex-wrap: wrap; gap: 12px 0; justify-content: flex-start; }
  .grm-item { width: 25%; flex: none; }
  .growth-flagship { flex-direction: column; padding: 32px 28px; gap: 32px; }
  .growth-flagship__side { width: 100%; flex-direction: row; align-items: stretch; gap: 16px; }
  .gfl-launch { flex: 1; }
  .gfl-cta { flex: 1; }
}

@media (max-width: 640px) {
  .growth-features { grid-template-columns: 1fr; gap: 14px; max-width: 100%; }
  .grm-item { width: 50%; }
  .growth-flagship__side { flex-direction: column; }
  .gfl-cta { width: 100%; }
}

/* Audience Section */
.audience {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(21,27,45,.28) 22%,
    rgba(21,27,45,.34) 55%,
    rgba(21,27,45,.28) 80%,
    transparent 100%
  );
}

/* Лёгкое центральное атмосферное свечение (за группой карточек) */
.audience::before {
  content: "";
  position: absolute;
  width: 900px;
  height: 500px;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(
      ellipse,
      rgba(20,35,90,.18) 0%,
      rgba(10,15,30,0) 70%
    );
  pointer-events: none;
  z-index: 0;
}

/* Контейнер — точка отсчёта для абсолютных орбит/точек */
.audience .container {
  position: relative;
}

/* Подзаголовок секции — стиль .section-description (светлее, по центру) */
.audience-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 14px;
}

.audience-subtitle {
  color: rgba(255,255,255,.52);
  font-size: 17px;
  line-height: 1.8;
  text-align: center;
  max-width: 640px;
  margin: 16px auto 52px;
}

/* Декоративные орбиты (тонкие эллипсы, фон, ниже карточек) */
.audience-orbit {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(216,196,154,.14);
  border-radius: 50%;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}

.audience-orbit--1 {
  width: 1150px;
  height: 650px;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.audience-orbit--2 {
  width: 860px;
  height: 520px;
  transform: translate(-50%, -50%) rotate(11deg);
}

.audience-orbit--3 {
  width: 560px;
  height: 380px;
  transform: translate(-50%, -50%) rotate(-4deg);
}

/* Энергетические связи — тонкие золотые нити (~40% яркости Hero) */
.audience-link {
  position: absolute;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      rgba(216,196,154,0),
      rgba(216,196,154,.08),
      rgba(216,196,154,.55),
      rgba(216,196,154,.08),
      rgba(216,196,154,0)
    );
  box-shadow:
    0 0 8px rgba(216,196,154,.25),
    0 0 18px rgba(216,196,154,.12);
  transform-origin: left center;
  pointer-events: none;
  opacity: .55;
  z-index: 0;
}

/* Реальные координаты связей. Геометрия «живая»: верх, бока, низ.
   Верхние линии (--1, --2, --6) сходятся в звёздах-узлах, образуя сеть.
   ⭐1 (13%,32%) → ⭐6 (50%,24%) → ⭐2 (87%,32%). */
.audience-link--1 { top: 32%; left: 13%;  width: 39%;  transform: rotate(-4deg); }  /* ⭐1 → ⭐6 */
.audience-link--2 { top: 24%; left: 50%;  width: 39%;  transform: rotate(4deg); }   /* ⭐6 → ⭐2 */
.audience-link--3 { top: 56%; left: 12%;  width: 300px; transform: rotate(18deg); }
.audience-link--4 { top: 56%; right: 12%; width: 300px; transform: rotate(-18deg); }
.audience-link--5 { top: 78%; left: 32%;  width: 500px; transform: rotate(0deg); }
.audience-link--6 { top: 24%; left: 50%;  width: 26%;  transform: rotate(34deg); }  /* ⭐6 → центр-низ (третий луч узла) */
.audience-link--7 { top: 68%; left: 20%;  width: 320px; transform: rotate(-10deg); }

/* Светящиеся золотые звёзды (четырёхлучевые) — на контурах орбит */
.audience-star {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #D8C49A;
  clip-path: polygon(
    50% 0%,
    60% 40%,
    100% 50%,
    60% 60%,
    50% 100%,
    40% 60%,
    0% 50%,
    40% 40%
  );
  box-shadow:
    0 0 8px rgba(216,196,154,.6),
    0 0 20px rgba(216,196,154,.3);
  opacity: .9;
  pointer-events: none;
  z-index: 1;
}

/* Звёзды лежат на контурах орбит (центр группы ≈ 58% по вертикали) */
.audience-star--1 { top: 32%; left: 13%; }
.audience-star--2 { top: 32%; left: 87%; width: 10px; height: 10px; }
.audience-star--3 { top: 60%; left: 7%;  width: 9px;  height: 9px; }
.audience-star--4 { top: 62%; left: 93%; width: 10px; height: 10px; }
.audience-star--5 { top: 90%; left: 50%; width: 6px;  height: 6px; }
.audience-star--6 { top: 24%; left: 50%; width: 6px;  height: 6px; }
.audience-star--7 { top: 80%; left: 26%; width: 8px;  height: 8px; }

/* «Искры» — усиленное свечение у 2 крупных боковых звёзд */
.audience-star--2,
.audience-star--4 {
  box-shadow:
    0 0 10px rgba(216,196,154,.9),
    0 0 30px rgba(216,196,154,.5),
    0 0 50px rgba(216,196,154,.2);
}

/* Звёзды-УЗЛЫ сети: --1 (старт ⭐1→⭐6), --2 (конец ⭐6→⭐2),
   --6 (точка пересечения 3 линий). Линии сходятся в их центрах. */
.audience-star--1,
.audience-star--2,
.audience-star--6 {
  box-shadow:
    0 0 12px rgba(216,196,154,.9),
    0 0 30px rgba(216,196,154,.55),
    0 0 60px rgba(216,196,154,.25);
}

/* ⭐6 — центральный верхний узел (увеличен, в нём сходятся --1, --2, --6) */
.audience-star--6 { width: 9px; height: 9px; }

.audience-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.audience-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: rgba(16,22,42,.72);
  border: .5px solid rgba(198,176,138,.22);
  border-radius: var(--r2);
  padding: 24px 22px;
  transition: border-color .3s, box-shadow .3s;
}

.audience-card:hover {
  border-color: rgba(198,176,138,.42);
  box-shadow: 0 0 28px rgba(198,176,138,.08);
}

.audience-card__body {
  flex: 1;
  min-width: 0;
}

.audience-desc {
  font-size: 13px;
  color: rgba(255,255,255,.44);
  line-height: 1.6;
  margin-top: 6px;
}

.audience-card__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(198,176,138,.55);
  background: radial-gradient(
    circle at 35% 30%,
    rgba(198,176,138,.12) 0%,
    rgba(10,16,34,.60) 60%
  );
  box-shadow:
    0 0 20px rgba(198,176,138,.10),
    inset 0 1px 0 rgba(198,176,138,.14);
  transition: border-color .3s, box-shadow .3s;
}

.audience-icon__svg {
  width: 28px;
  height: 28px;
  color: var(--gold);
  filter: drop-shadow(0 0 4px rgba(198,176,138,.35));
  transition: filter .3s;
}

.audience-card:hover .audience-card__icon {
  border-color: rgba(198,176,138,.80);
  box-shadow: 0 0 28px rgba(198,176,138,.18), inset 0 1px 0 rgba(198,176,138,.22);
}

.audience-card:hover .audience-icon__svg {
  filter: drop-shadow(0 0 6px rgba(198,176,138,.55));
}

.audience-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.35;
  margin: 0;
}

/* ── Audience bar ─────────────────────────────────────── */
.audience-bar {
  display: flex;
  align-items: center;
  gap: 40px;
  background: linear-gradient(135deg, rgba(198,176,138,.10) 0%, rgba(14,20,40,.88) 100%);
  border: 1px solid rgba(198,176,138,.25);
  border-radius: var(--r2);
  padding: 28px 36px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}

.audience-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(198,176,138,.55) 50%, transparent 100%);
}

.abar-left {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: 1;
  min-width: 0;
}

/* Единый фирменный знак A.S. BUSINESS — см. комментарий у .logo__mark выше */
.abar-coin {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex-shrink: 0;
  background-image: url('/assets/as-business-logo.png');
  background-size: 118.302% 118.302%;
  background-position: 47.938% 47.938%;
  background-repeat: no-repeat;
  background-color: #0B1020;
  border: 1.5px solid rgba(198,176,138,.55);
  box-shadow:
    0 0 32px rgba(198,176,138,.18),
    0 0 64px rgba(198,176,138,.08),
    inset 0 1px 0 rgba(198,176,138,.24);
}

.abar-text { flex: 1; min-width: 0; }

.abar-headline {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  line-height: 1.4;
  margin-bottom: 6px;
}

.abar-headline em {
  font-style: normal;
  color: var(--gold);
}

.abar-sub {
  font-size: 13px;
  color: rgba(255,255,255,.42);
  line-height: 1.6;
}

.abar-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  flex-shrink: 0;
}

.abar-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.abar-feature__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(198,176,138,.08);
  border: 1px solid rgba(198,176,138,.18);
  color: var(--gold);
}

.abar-feature__name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  line-height: 1.25;
}

.abar-feature__sub {
  font-size: 12px;
  color: rgba(255,255,255,.38);
  line-height: 1.3;
  margin-top: 2px;
}

/* ── Audience note (footer line) ────────────────────── */
.audience-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.35);
  text-align: center;
}

.audience-note__star {
  color: var(--gold);
  font-size: 12px;
}

/* ── Audience responsive ─────────────────────────────── */
@media (max-width: 900px) {
  .audience-grid { grid-template-columns: 1fr 1fr; }
  .audience-bar { flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 24px; }
  .abar-features { width: 100%; }
}

@media (max-width: 640px) {
  .audience-grid { grid-template-columns: 1fr; }
  .abar-left { gap: 16px; }
  .abar-features { grid-template-columns: 1fr; }
}



/* ── Pricing: coming-soon label + info block ─────────── */
.pricing-card__value strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}

.pricing-info {
  max-width: 680px;
  margin: 40px auto 0;
  text-align: center;
  padding: 28px 32px;
  background: rgba(14,20,40,.60);
  border: .5px solid rgba(198,176,138,.18);
  border-radius: var(--r2);
  position: relative;
}

.pricing-info::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,176,138,.45), transparent);
}

.pricing-info__lead {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,.80);
  margin-bottom: 10px;
  line-height: 1.5;
}

.pricing-info__body {
  font-size: 14px;
  color: rgba(255,255,255,.42);
  line-height: 1.75;
  margin: 0;
}

/* ════════ Can-Do Section — «Что вы сможете делать» ════════ */
.can-do {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(21,27,45,.26) 22%,
    rgba(21,27,45,.32) 55%,
    rgba(21,27,45,.26) 82%,
    transparent 100%
  );
}

.can-do__subtitle {
  font-size: 17px;
  color: rgba(255,255,255,.50);
  text-align: center;
  max-width: 560px;
  margin: 14px auto 52px;
  line-height: 1.75;
}

/* ── 4×2 card grid ─────────────────────────────────────── */
.cd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.cd-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  background: rgba(16,22,42,.72);
  border: .5px solid rgba(198,176,138,.20);
  border-radius: var(--r2);
  padding: 28px 20px 24px;
  transition: border-color .3s, box-shadow .3s;
}

.cd-card:hover {
  border-color: rgba(198,176,138,.42);
  box-shadow: 0 0 28px rgba(198,176,138,.08);
}

.cd-card__icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(198,176,138,.55);
  background: radial-gradient(
    circle at 35% 30%,
    rgba(198,176,138,.14) 0%,
    rgba(10,16,34,.65) 60%
  );
  box-shadow:
    0 0 22px rgba(198,176,138,.10),
    inset 0 1px 0 rgba(198,176,138,.16);
  color: var(--gold);
  transition: border-color .3s, box-shadow .3s;
}

.cd-card:hover .cd-card__icon {
  border-color: rgba(198,176,138,.80);
  box-shadow: 0 0 30px rgba(198,176,138,.18), inset 0 1px 0 rgba(198,176,138,.22);
}

.cd-card__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.35;
  margin: 0;
}

.cd-card__desc {
  font-size: 13px;
  color: rgba(255,255,255,.42);
  line-height: 1.65;
  margin: 0;
}

/* ── Gift banner ────────────────────────────────────────── */
.cd-gift-banner {
  display: flex;
  align-items: center;
  gap: 32px;
  background: linear-gradient(135deg, rgba(14,20,44,.95) 0%, rgba(24,32,56,.90) 100%);
  border: 1px solid rgba(198,176,138,.25);
  border-radius: var(--r2);
  padding: 32px 36px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.cd-gift-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(198,176,138,.55) 50%, transparent 100%);
}

.cd-gift-visual {
  position: relative;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-gift-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,176,138,.18) 0%, transparent 70%);
}

.cd-gift-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at 35% 30%,
    rgba(198,176,138,.18) 0%,
    rgba(10,16,44,.92) 55%
  );
  border: 1px solid rgba(198,176,138,.45);
  box-shadow:
    0 0 50px rgba(198,176,138,.20),
    0 0 100px rgba(198,176,138,.08),
    inset 0 1px 0 rgba(198,176,138,.20);
  color: var(--gold);
  position: relative;
  z-index: 1;
}

/* Единый фирменный знак A.S. BUSINESS — см. комментарий у .logo__mark выше */
.cd-gift-coin {
  position: absolute;
  bottom: 8px;
  right: 6px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-image: url('/assets/as-business-logo.png');
  background-size: 118.302% 118.302%;
  background-position: 47.938% 47.938%;
  background-repeat: no-repeat;
  background-color: #0B1020;
  border: 1.5px solid rgba(198,176,138,.65);
  box-shadow: 0 0 12px rgba(198,176,138,.30);
  z-index: 2;
}

.cd-gift-content {
  flex: 1;
  min-width: 0;
}

.cd-gift-label {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: var(--gold);
  line-height: 1.2;
  margin-bottom: 2px;
}

.cd-gift-value {
  font-family: var(--font-heading);
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.1;
  margin-bottom: 12px;
}

.cd-gift-desc {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  line-height: 1.65;
  margin: 0;
  max-width: 380px;
}

.cd-gift-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.cd-gift-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
}

.cd-gift-checks li svg {
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 1px;
}

/* ── CTA bar ────────────────────────────────────────────── */
.cd-cta-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(10,16,34,.70);
  border: .5px solid rgba(198,176,138,.18);
  border-radius: var(--r2);
  padding: 22px 32px;
}

.cd-cta-bar__text {
  flex: 1;
  min-width: 0;
}

.cd-cta-bar__title {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 4px;
  line-height: 1.35;
}

.cd-cta-bar__sub {
  font-size: 13px;
  color: rgba(255,255,255,.40);
}

.cd-cta-bar__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.cd-cta-bar__security {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(198,176,138,.45);
  font-size: 12px;
  line-height: 1.45;
}

.cd-cta-bar__security svg {
  flex-shrink: 0;
  color: rgba(198,176,138,.45);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cd-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .cd-gift-banner { flex-wrap: wrap; }
  .cd-gift-visual { width: 90px; height: 90px; }
  .cd-gift-box { width: 76px; height: 76px; }
  .cd-cta-bar { flex-wrap: wrap; gap: 16px; }
  .cd-cta-bar__security { display: none; }
}

@media (max-width: 768px) {
  .cd-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .cd-grid { gap: 16px; }
  .cd-gift-checks { display: none; }
  .cd-cta-bar__btn { width: 100%; justify-content: center; }
}

/* ════════ Available Now Section — «Две орбиты» ════════ */
.available-now {
  position: relative;
  padding: 60px 0;
  background: rgba(21,27,45,.3);
  border-top: .5px solid var(--border);
  border-bottom: .5px solid var(--border);
  overflow: hidden;
}

.available-now .container {
  position: relative;
  z-index: 2;
}

.available-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Колонка-орбита: контейнер для декоративного фона + списка */
.available-orbit {
  position: relative;
  z-index: 1;
}

/* ── ДЕКОРАТИВНЫЕ ОРБИТЫ (тонкие эллипсы, фон) ── */
.avail-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(216,196,154,.14);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.avail-orbit--1 { width: 520px; height: 520px; }
.avail-orbit--2 { width: 400px; height: 400px; transform: translate(-50%, -50%) rotate(8deg); }
.avail-orbit--3 { width: 600px; height: 460px; transform: translate(-50%, -50%) rotate(-6deg); }

/* Левая колонка (ДОСТУПНО СЕЙЧАС) — чуть ярче */
.available-orbit--now .avail-orbit { opacity: .30; }
/* Правая колонка (В РАЗРАБОТКЕ) — немного прозрачнее */
.available-orbit--soon .avail-orbit { opacity: .20; }

/* ── ТОНКИЕ СВЯЗИ МЕЖДУ ЗВЁЗДАМИ ── */
.avail-link {
  position: absolute;
  height: 1.5px;
  background:
    linear-gradient(
      90deg,
      rgba(216,196,154,0),
      rgba(216,196,154,.45),
      rgba(216,196,154,0)
    );
  box-shadow: 0 0 6px rgba(216,196,154,.18);
  transform-origin: left center;
  pointer-events: none;
  z-index: 0;
}

.avail-link--1 { top: 18%; left: 8%;  width: 38%; transform: rotate(14deg); }
.avail-link--2 { top: 64%; left: 6%;  width: 34%; transform: rotate(-18deg); }
.avail-link--3 { top: 40%; right: 4%; width: 30%; transform: rotate(20deg); }

.available-orbit--now .avail-link  { opacity: .55; }
.available-orbit--soon .avail-link { opacity: .35; }

/* ── СВЕТЯЩИЕСЯ ЗОЛОТЫЕ ЗВЁЗДЫ (четырёхлучевые) ── */
.avail-star {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #D8C49A;
  clip-path: polygon(
    50% 0%,  60% 40%, 100% 50%, 60% 60%,
    50% 100%, 40% 60%, 0% 50%, 40% 40%
  );
  box-shadow:
    0 0 8px rgba(216,196,154,.6),
    0 0 20px rgba(216,196,154,.3);
  pointer-events: none;
  z-index: 0;
}

.avail-star--1 { top: 12%;  left: 10%; width: 10px; height: 10px; }
.avail-star--2 { top: 22%;  right: 6%; width: 8px;  height: 8px; }
.avail-star--3 { top: 52%;  left: 4%;  width: 9px;  height: 9px; }
.avail-star--4 { top: 78%;  left: 24%; width: 7px;  height: 7px; }
.avail-star--5 { top: 84%;  right: 12%; width: 8px; height: 8px; }

.available-orbit--now .avail-star  { opacity: .85; }
.available-orbit--soon .avail-star { opacity: .55; }

/* ── ЗАГОЛОВОК КОЛОНКИ ── */
.available-section {
  position: relative;
  z-index: 2;
}

.available-section__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--gold);
  margin-bottom: 24px;
  padding: 14px 18px;
  border: .5px solid rgba(216,196,154,.30);
  border-radius: var(--r);
  background: rgba(20,28,46,.5);
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 18px rgba(216,196,154,.06),
    inset 0 0 14px rgba(255,255,255,.015);
}

/* Иконка в заголовке колонки (круглая золотая, как в Hero) */
.available-section__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(216,196,154,.55);
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,.05),
      rgba(10,15,30,.35)
    );
  box-shadow:
    0 0 12px rgba(216,196,154,.20),
    inset 0 0 8px rgba(255,255,255,.03);
}

.available-section__icon svg {
  width: 14px;
  height: 14px;
  color: #D8C49A;
  filter: drop-shadow(0 0 3px rgba(216,196,154,.40));
}

/* ── СПИСОК ПУНКТОВ ── */
.available-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Компактная строка: ○ иконка → текст */
.available-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border: .5px solid var(--border2);
  border-radius: var(--r);
  background: rgba(20,28,46,.45);
  backdrop-filter: blur(10px);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}

.available-item:hover {
  border-color: rgba(216,196,154,.40);
  box-shadow: 0 0 20px rgba(216,196,154,.08);
  transform: translateY(-2px);
}

/* Круглая золотая иконка (тот же стиль, что в Hero / Audience) */
.available-item__icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(216,196,154,.55);
  background:
    radial-gradient(
      circle at 30% 30%,
      rgba(255,255,255,.05),
      rgba(10,15,30,.35)
    );
  box-shadow:
    0 0 12px rgba(216,196,154,.18),
    inset 0 0 8px rgba(255,255,255,.03);
}

.available-item__icon svg {
  width: 16px;
  height: 16px;
  color: #D8C49A;
  filter: drop-shadow(0 0 3px rgba(216,196,154,.40));
}

/* Песочные часы чуть тоньше/мягче — «в разработке» */
.available-item__icon--hourglass {
  border-color: rgba(216,196,154,.42);
}

.available-item__icon--hourglass svg {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 0 3px rgba(216,196,154,.30));
}

.available-item__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
}


/* Founder Section */
.founder {
  position: relative;
  padding: 60px 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(21,27,45,.16) 30%,
    rgba(21,27,45,.20) 60%,
    rgba(21,27,45,.10) 85%,
    transparent 100%
  );
}

.founder-content {
  max-width: 900px;
  margin: 0 auto;
}

.founder-info {
  background: rgba(20,28,46,.6);
  backdrop-filter: blur(16px);
  border: .5px solid var(--border2);
  border-radius: var(--r);
  padding: 48px;
}

.founder-name {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 12px;
  text-align: center;
}

.founder-role {
  font-size: 16px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 40px;
}

.founder-story {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
  padding: 28px 32px;
  background: rgba(198,176,138,.05);
  border: .5px solid rgba(198,176,138,.20);
  border-left: 3px solid rgba(198,176,138,.55);
  border-radius: 0 var(--r2) var(--r2) 0;
}

.founder-story p {
  font-size: 15px;
  color: rgba(255,255,255,.62);
  line-height: 1.80;
  margin: 0;
}

.founder-quote {
  font-size: 14px;
  font-style: italic;
  color: rgba(255,255,255,.48);
  line-height: 1.85;
  margin: 28px 0 0;
  padding: 22px 28px;
  border-left: 2px solid rgba(198,176,138,.35);
  background: rgba(198,176,138,.04);
  border-radius: 0 var(--r2) var(--r2) 0;
  position: relative;
}

.founder-quote::before {
  content: '«';
  position: absolute;
  top: 14px;
  left: 10px;
  font-family: var(--font-heading);
  font-size: 32px;
  font-style: normal;
  color: rgba(198,176,138,.25);
  line-height: 1;
}

.founder-results h4 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold);
  margin-bottom: 20px;
}

.founder-results ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.founder-results li {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}

.founder-experience {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 32px;
  padding: 24px;
  background: rgba(30,40,62,.5);
  border-left: 3px solid var(--gold3);
  border-radius: 0 var(--r2) var(--r2) 0;
}

.founder-goal {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  padding: 24px;
  background: rgba(30,40,62,.7);
  border: .5px solid var(--gold3);
  border-radius: var(--r);
}

.founder-goal strong {
  color: var(--gold);
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}

/* Footer Updates · Premium Minimal */
.footer-legal {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-legal h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.footer-legal p {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
}

.footer-contacts {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-contacts h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.footer-contacts p {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
}

.footer-contacts a {
  color: var(--gold);
  text-decoration: none;
  transition: color .25s ease, text-shadow .25s ease;
}

.footer-contacts a:hover {
  color: var(--gold2);
  text-shadow: 0 0 14px rgba(199,188,166,.35);
}


@media(max-width: 768px) {
  /* «Две орбиты» — на планшете/мобиле в одну колонку */
  .available-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Декоративные звёзды/орбиты заметно бледнее на узких экранах */
  .avail-orbit { display: none; }

  .workflow-step {
    padding: 16px 20px;
  }

  
  .founder-info {
    padding: 32px 24px;
  }

  /* Бренд A.S. BUSINESS в логотипе не переносится на mobile */
  .logo__name {
    white-space: nowrap;
  }
}

@media(max-width: 640px) {
  .available-content {
    grid-template-columns: 1fr;
  }
}

/* ── SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar { 
  width: 4px; 
}

::-webkit-scrollbar-track { 
  background: var(--bg); 
}

::-webkit-scrollbar-thumb { 
  background: var(--muted2); 
  border-radius: 2px; 
}

::-webkit-scrollbar-thumb:hover { 
  background: var(--gold4); 
}