:root {
      --bg-dark: #050816;
      --bg-card: #0b1020;
      --bg-soft: #0f172a;
      --accent: #3b82f6;
      --accent-soft: rgba(59, 130, 246, 0.12);
      --text-main: #f9fafb;
      --text-muted: #9ca3af;
      --border-soft: #1f2937;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --shadow-soft: 0 18px 40px rgba(0,0,0,0.45);
      --max-width: 1120px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, #111827 0, #020617 48%, #000 100%);
      color: var(--text-main);
      line-height: 1.5;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .page {
      min-height: 100vh;
      color: var(--text-main);
    }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 20px;
    }

    /* === HEADER (шапка сайта) === */
    header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(14px);
      background: linear-gradient(to bottom, rgba(3,7,18,0.95), rgba(3,7,18,0.8), transparent);
      border-bottom: 1px solid rgba(55,65,81,0.5);
    }

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

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo-img {
      width: 62px;
      height: 62px;
      object-fit: contain;
    }

    .logo-mark {
      display: none;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .logo-title {
      font-weight: 700;
      font-size: 16px;
      letter-spacing: 0.04em;
    }

    .logo-sub {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      color: var(--text-muted);
    }

    nav {
      display: flex;
      gap: 20px;
      font-size: 14px;
      color: #e5e7eb;
    }

    nav a {
      position: relative;
      padding-bottom: 2px;
    }

    nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, #3b82f6, #22c55e);
      transition: width 0.18s ease-out;
    }

    nav a:hover::after {
      width: 100%;
    }

    .header-cta {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .btn {
      border-radius: 999px;
      padding: 9px 18px;
      font-size: 14px;
      font-weight: 500;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
      white-space: nowrap;
    }

    .btn-primary {
      background: linear-gradient(135deg, #3b82f6, #22c55e);
      color: #020617;
      box-shadow: 0 14px 30px rgba(37,99,235,0.35);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 20px 40px rgba(37,99,235,0.5);
    }

    .btn-ghost {
      background: rgba(15,23,42,0.9);
      color: #e5e7eb;
      border-color: rgba(75,85,99,0.7);
    }

    .btn-ghost:hover {
      background: rgba(15,23,42,1);
      border-color: #9ca3af;
      transform: translateY(-1px);
    }

    /* === HERO (первый экран) === */
    .hero {
      padding: 32px 0 48px;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: 40px;
      align-items: stretch;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px 4px 4px;
      border-radius: 999px;
      background: rgba(15,23,42,0.85);
      border: 1px solid rgba(55,65,81,0.9);
      color: #e5e7eb;
      font-size: 11px;
      margin-bottom: 16px;
    }

    .hero-badge-dot {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, #bbf7d0, #22c55e);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 0 1px rgba(15,23,42,1), 0 0 18px rgba(34,197,94,0.9);
    }

    .hero-badge-dot span {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #052e16;
    }

    .hero-badge-text {
      font-weight: 500;
    }

    .hero-badge-label {
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(37,99,235,0.16);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: #93c5fd;
    }

    .hero-title {
      font-size: clamp(30px, 4vw, 38px);
      font-weight: 800;
      letter-spacing: 0.02em;
      margin: 0 0 12px;
    }

    .hero-title span {
      background: linear-gradient(120deg, #bfdbfe, #38bdf8, #22c55e);
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      font-size: 16px;
      color: var(--text-muted);
      max-width: 480px;
      margin-bottom: 18px;
    }

    .hero-bullets {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
    }

    .hero-tag {
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(15,23,42,0.9);
      border: 1px solid rgba(55,65,81,0.9);
      color: #e5e7eb;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .hero-tag-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
    }

    .hero-cta-row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-bottom: 16px;
    }

    .hero-cta-row .btn-primary {
      padding: 14px 48px;
      font-size: 15px;
      border-radius: 999px;
    }

    .hero-note {
      font-size: 12px;
      color: var(--text-muted);
      max-width: 560px;
      margin-top: 4px;
      margin-bottom: 18px;
    }

    .hero-note strong {
      color: #e5e7eb;
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
      margin-top: 18px;
      font-size: 13px;
      color: var(--text-muted);
      width: 100%;
    }

    .hero-meta-item {
      min-width: 210px;
      padding: 10px 14px;
      border-radius: 14px;
      border: 1px solid var(--border-soft);
      background: rgba(15,23,42,0.96);
      box-shadow: 0 10px 22px rgba(0,0,0,0.45);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .hero-meta-item span:first-child {
      font-size: 15px;
      font-weight: 600;
      color: #e5e7eb;
    }

    .hero-bottom-wide {
      margin-top: 24px;
    }

    .hero-bottom-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    /* HERO VISUAL */
    .hero-visual {
      position: relative;
    }

    .hero-card {
      position: relative;
      background:
        radial-gradient(circle at top left, rgba(59,130,246,0.16), transparent 55%),
        radial-gradient(circle at bottom right, rgba(34,197,94,0.16), transparent 60%),
        var(--bg-card);
      border-radius: 28px;
      padding: 20px 18px 18px;
      box-shadow: var(--shadow-soft);
      border: 1px solid rgba(55,65,81,0.9);
      overflow: hidden;
    }

    .hero-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
    }

    .hero-card-title {
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .hero-card-dots {
      display: flex;
      gap: 4px;
    }

    .hero-card-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(148,163,184,0.9);
    }

    .hero-card-dot:nth-child(1) { background: #f97373; }
    .hero-card-dot:nth-child(2) { background: #fbbf24; }
    .hero-card-dot:nth-child(3) { background: #22c55e; }

    .hero-card-body {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: stretch;
    }

    .scenario {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 14px;
      background: rgba(15,23,42,0.96);
      border: 1px solid rgba(55,65,81,0.9);
    }

    .scenario-icon {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--accent-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }

    .scenario-text-title {
      font-size: 13px;
      font-weight: 600;
    }

    .scenario-text-sub {
      font-size: 11px;
      color: var(--text-muted);
    }

    .hero-note-small {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 4px;
    }

    .hero-stats {
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 12px;
    }

    .pill {
      padding: 7px 10px;
      border-radius: 12px;
      background: rgba(15,23,42,0.91);
      border: 1px solid rgba(55,65,81,0.9);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .pill-label {
      color: var(--text-muted);
      font-size: 11px;
    }

    .pill-value {
      font-weight: 600;
      font-size: 12px;
    }

    .pill-chip {
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(22,163,74,0.16);
      font-size: 10px;
      color: #bbf7d0;
    }

    .hero-devices {
      background: rgba(15,23,42,0.95);
      border-radius: 18px;
      border: 1px solid rgba(55,65,81,0.9);
      padding: 10px;
      font-size: 11px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .hero-devices-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .device-pill {
      padding: 4px 9px;
      border-radius: 999px;
      background: rgba(15,23,42,0.9);
      border: 1px solid rgba(55,65,81,0.85);
    }

    .hero-locations {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 11px;
      color: var(--text-muted);
    }

    .glow-spot {
      position: absolute;
      inset: auto auto -60px -40px;
      width: 180px;
      height: 180px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(59,130,246,0.2), transparent);
      filter: blur(2px);
      opacity: 0.9;
      pointer-events: none;
    }

    /* === ОБЩИЕ СЕКЦИИ === */
    section {
      padding: 26px 0;
    }

    /* Универсальная шапка секции: заголовок + подзаголовок по центру */
    .section-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 8px;
      margin-bottom: 18px;
    }

    .section-header > div {
      max-width: 920px;
    }

    .section-title {
      font-size: 22px;
      font-weight: 700;
    }

    .section-subtitle {
      font-size: 13px;
      color: var(--text-muted);
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 14px;
    }

    .card {
      background: rgba(15,23,42,0.96);
      border-radius: var(--radius-lg);
      padding: 14px 14px 13px;
      border: 1px solid var(--border-soft);
      box-shadow: 0 10px 30px rgba(0,0,0,0.4);
      font-size: 13px;
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .card-icon {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      background: var(--accent-soft);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      position: relative;
    }

    /* Спец-иконка "без рекламы" */
    .card-icon-noads {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .card-icon-noads::after {
      content: "";
      position: absolute;
      left: 6px;
      right: 6px;
      top: 50%;
      height: 2px;
      background: linear-gradient(90deg, #f97373, #fb7185);
      border-radius: 999px;
      transform: rotate(-25deg);
    }

    .card-title {
      font-weight: 600;
      font-size: 14px;
    }

    .card-body {
      color: var(--text-muted);
      font-size: 13px;
    }

    /* === DEVICES (устройства) === */
    .devices-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 20px;
    }

    .list-badge {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
    }

    .pill-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
      font-size: 12px;
    }

    .pill-soft {
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid var(--border-soft);
      background: rgba(15,23,42,0.98);
    }

    .platform-icon {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.96);
      border: 1px solid rgba(55, 65, 81, 0.9);
      box-shadow:
        0 0 0 1px rgba(15, 23, 42, 1),
        0 0 12px rgba(15, 23, 42, 0.9);
    }

    .platform-icon--windows {
      background: radial-gradient(circle at 30% 30%, #bfdbfe, #3b82f6);
    }

    .platform-icon--macos {
      background: radial-gradient(circle at 30% 30%, #e5e7eb, #9ca3af);
    }

    .platform-icon--ios {
      background: radial-gradient(circle at 30% 30%, #fee2e2, #fb7185);
    }

    .platform-icon--android {
      background: radial-gradient(circle at 30% 30%, #bbf7d0, #22c55e);
    }

    .platform-icon--linux {
      background: radial-gradient(circle at 30% 30%, #fee4a3, #f59e0b);
    }

    .platform-icon--tv {
      background: radial-gradient(circle at 30% 30%, #ddd6fe, #6366f1);
    }

    .platform-icon--router {
      background: radial-gradient(circle at 30% 30%, #bae6fd, #0ea5e9);
    }

    .platform-label {
      font-size: 12px;
    }

    .platform-pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 18px;
      border-radius: 999px;
      background:
        radial-gradient(circle at top left, rgba(59,130,246,0.16), transparent 60%)
        rgba(15,23,42,0.98);
      border: 1px solid rgba(148,163,184,0.35);
      box-shadow: 0 10px 26px rgba(0,0,0,0.45);
      transition:
        background 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.12s ease;
    }

    .platform-icon-svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.95;
    }

    .platform-label {
      font-size: 13px;
      font-weight: 500;
    }

    .platform-pill:hover {
      border-color: rgba(59,130,246,0.9);
      background:
        radial-gradient(circle at top left, rgba(59,130,246,0.22), transparent 60%)
        rgba(15,23,42,1);
      box-shadow: 0 16px 40px rgba(15,23,42,0.9);
      transform: translateY(-1px);
    }

    .devices-card {
      background: var(--bg-card);
      border-radius: var(--radius-xl);
      border: 1px solid var(--border-soft);
      padding: 16px 16px 14px;
      box-shadow: var(--shadow-soft);
      font-size: 12px;
    }

    .devices-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 10px;
      margin-top: 10px;
    }

    .devices-col-title {
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .devices-note {
      font-size: 13px;
      line-height: 1.6;
      color: #e5e7eb;
      margin-top: 16px;
      max-width: 720px;
    }

    /* === LOCATIONS (локации) === */
    .locations-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 12px;
      font-size: 13px;
    }

    .stats-row {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 12px;
      color: var(--text-muted);
    }

    .stats-item span:first-child {
      color: #e5e7eb;
      font-weight: 500;
      display: block;
    }

    /* Локации: компактные метрики */
    #locations .stats-row {
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      font-size: 12px;
      color: var(--text-muted);
    }
    
    #locations .stats-item {
      padding: 10px 14px;
      border-radius: 14px;
      background: rgba(15, 23, 42, 0.96);
      border: 1px solid var(--border-soft);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
      text-align: left;
    }
    
    #locations .stats-item span:first-child {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #e5e7eb;
      margin-bottom: 2px;
    }
    
    #locations .stats-item span:last-child {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
    }
    
    /* Адаптив для сетки метрик */
    @media (max-width: 960px) {
      #locations .stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    
    @media (max-width: 640px) {
      #locations .stats-row {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* === PRICING (тарифы) === */
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
    }

    .pricing-card {
      background: rgba(15,23,42,0.98);
      border-radius: var(--radius-xl);
      border: 1px solid var(--border-soft);
      padding: 16px 16px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
    }

    .pricing-card.featured {
      border-color: #3b82f6;
      box-shadow: 0 20px 50px rgba(37,99,235,0.5);
    }

    .pricing-badge {
      position: absolute;
      top: 10px;
      right: 12px;
      font-size: 10px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(59,130,246,0.18);
      color: #bfdbfe;
      text-transform: uppercase;
      letter-spacing: 0.18em;
    }

    .pricing-name {
      font-size: 15px;
      font-weight: 600;
    }

    .pricing-price {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .pricing-period {
      font-size: 12px;
      color: var(--text-muted);
    }

    .pricing-list {
      margin: 8px 0 10px;
      padding-left: 0;
      list-style: none;
      font-size: 13px;
      color: var(--text-muted);
    }

    .pricing-list li {
      margin-bottom: 4px;
      display: flex;
      gap: 6px;
      align-items: flex-start;
    }

    .pricing-dot {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: #22c55e;
      margin-top: 6px;
      flex-shrink: 0;
    }

    .pricing-footer-note {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 10px;
    }

    /* === STEPS (как это работает) === */
    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
      font-size: 13px;
    }

    .step-number {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: rgba(59,130,246,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      color: #bfdbfe;
      margin-bottom: 6px;
    }

    /* === FAQ === */
      .faq-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 14px;
        font-size: 13px;
      }

      .faq-item {
        background: rgba(15,23,42,0.97);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-soft);
        padding: 12px 14px 10px;
        box-shadow: 0 12px 28px rgba(0,0,0,0.45);
      }

      .faq-q {
        font-weight: 600;
        margin-bottom: 4px;
      }

      .faq-a {
        color: var(--text-muted);
      }

    /* === FINAL CTA (последний экран) === */
    .cta-final {
      background: radial-gradient(circle at top, rgba(59,130,246,0.28), rgba(37,99,235,0.22), #020617);
      border-radius: 28px;
      padding: 22px 18px 18px;
      border: 1px solid rgba(59,130,246,0.7);
      box-shadow: 0 24px 60px rgba(30,64,175,0.8);
      display: grid;
      grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);
      gap: 18px;
      align-items: center;
    }

    .cta-title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .cta-text {
      font-size: 13px;
      color: #e5e7eb;
      max-width: 480px;
      margin-bottom: 10px;
    }

    .cta-note {
      font-size: 11px;
      color: #d1d5db;
    }

    .cta-right {
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 10px;
    }

    footer {
      padding: 16px 0 24px;
      font-size: 11px;
      color: var(--text-muted);
      text-align: center;
    }

    footer a {
      color: #93c5fd;
    }

    /* === ADAPTIVE === */
    @media (max-width: 960px) {
      nav {
        display: none;
      }
    
      .hero-inner {
        grid-template-columns: minmax(0,1fr);
      }
    
      .hero-visual {
        order: -1;
      }
    
      .cards-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
    
      .devices-grid {
        grid-template-columns: minmax(0,1fr);
      }
    
      .locations-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
    
      .pricing-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
      }
    
      .steps-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
      }
    
      .faq-grid {
        grid-template-columns: minmax(0,1fr);
      }
    
      .cta-final {
        grid-template-columns: minmax(0,1fr);
        text-align: left;
      }
    
      .cta-right {
        align-items: flex-start;
        text-align: left;
      }
    }
    
    @media (max-width: 640px) {
      .hero {
        padding-top: 22px;
      }
    
      .hero-card-body {
        grid-template-columns: minmax(0,1fr);
      }
    
      .cards-grid,
      .locations-grid,
      .pricing-grid,
      .steps-grid {
        grid-template-columns: minmax(0,1fr);
      }
    
      /* шапка: просто чуть компактнее, без ломания сетки */
      .header-inner {
        padding: 10px 0;
        gap: 8px;
        /* оставляем:
           display: flex;
           justify-content: space-between;
           align-items: center;
        */
      }
    
      .header-cta .btn-primary {
        font-size: 12px;
        padding: 6px 16px;
        margin-right: 12px;
      }
    
      .hero-meta {
        flex-direction: column;
        align-items: stretch;
      }
    
      /* нижний CTA-блок — кнопки одна под другой и по центру */
      .cta-final {
        text-align: center;
      }
    
      .cta-right {
        align-items: center;
        text-align: center;
      }
    
      /* оборачиваем две кнопки в колонку */
      .cta-right > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 12px;          /* расстояние между кнопками */
        width: 100%;
        max-width: 320px;
        margin: 0 auto 8px;
      }
    
      .cta-right .btn {
        width: 100%;
        justify-content: center;
      }
    }
    
        /* === REVEAL ANIMATIONS === */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition:
        opacity 0.55s ease-out,
        transform 0.55s ease-out;
      will-change: opacity, transform;
    }
    
    .reveal-visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Усиленная анимация для Персонального тарифа */
    .pricing-card.featured.reveal {
      transform: translateY(28px) scale(0.96);
    }
    
    .pricing-card.featured.reveal-visible {
      animation: pricing-pop 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }
    
    @keyframes pricing-pop {
      0% {
        opacity: 0;
        transform: translateY(28px) scale(0.9);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.0);
      }
      55% {
        opacity: 1;
        transform: translateY(0) scale(1.03);
        box-shadow: 0 22px 52px rgba(37, 99, 235, 0.55);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 20px 50px rgba(37, 99, 235, 0.5);
      }
    }