/* ═══ ABOUT — FULL REDESIGN ═══ */
  .abt-section {
      position: relative;
      z-index: 1;
      padding: 100px 0;
      background: var(--ink-2);
      overflow: hidden;
  }

  .abt-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
          radial-gradient(ellipse 50% 60% at 0% 50%, rgba(0, 194, 255, 0.06), transparent 55%),
          radial-gradient(ellipse 40% 50% at 100% 50%, rgba(0, 212, 170, 0.05), transparent 55%);
      pointer-events: none;
  }

  /* ── Grid ── */
  .abt-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 1;
  }

  /* ════════════════════
   VISUAL COLUMN
════════════════════ */
  .abt-visual {
      position: relative;
  }

  /* Main frame */
  .abt-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 4.2;
      border-radius: var(--r-xl);
      overflow: hidden;
      border: 1px solid rgba(0, 194, 255, 0.18);
      background: linear-gradient(135deg, rgba(30, 106, 255, 0.12), rgba(0, 212, 170, 0.08));
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .abt-frame-glow {
      position: absolute;
      inset: 0;
      background:
          radial-gradient(circle at 25% 25%, rgba(30, 106, 255, 0.18), transparent 50%),
          radial-gradient(circle at 75% 75%, rgba(0, 212, 170, 0.13), transparent 50%);
      pointer-events: none;
  }

  .abt-frame-grid {
      position: absolute;
      inset: 0;
      background-image:
          linear-gradient(rgba(0, 194, 255, 0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0, 194, 255, 0.05) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
  }

  /* Decorative corner rings */
  .abt-ring {
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      border: 1px solid rgba(0, 194, 255, 0.15);
      pointer-events: none;
      z-index: 2;
  }

  .abt-ring::after {
      content: '';
      position: absolute;
      inset: 10px;
      border-radius: 50%;
      border: 1px solid rgba(0, 194, 255, 0.1);
  }

  .abt-ring--tl {
      top: -20px;
      left: -20px;
  }

  .abt-ring--br {
      bottom: -20px;
      right: -20px;
  }

  .abt-img {
      width: 88%;
      height: 88%;
      object-fit: contain;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 12px 48px rgba(0, 194, 255, 0.12));
  }

  /* ── Floating badges ── */
  .abt-badge {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 11px;
      background: rgba(5, 12, 28, 0.92);
      border: 1px solid rgba(0, 194, 255, 0.2);
      border-radius: 16px;
      padding: 12px 16px;
      backdrop-filter: blur(20px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04);
      z-index: 3;
  }

  .abt-badge--br {
      bottom: -18px;
      right: -18px;
      animation: abtFloat 4s ease-in-out infinite;
  }

  .abt-badge--tl {
      top: 18px;
      left: -18px;
      animation: abtFloat 4s ease-in-out infinite 2s;
  }

  @keyframes abtFloat {

      0%,
      100% {
          transform: translateY(0);
      }

      50% {
          transform: translateY(-7px);
      }
  }

  .abt-badge-icon {
      width: 38px;
      height: 38px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      border: 1px solid;
  }

  .abt-badge-icon--cyan {
      background: rgba(0, 194, 255, 0.12);
      border-color: rgba(0, 194, 255, 0.25);
  }

  .abt-badge-icon--yellow {
      background: rgba(245, 197, 24, 0.1);
      border-color: rgba(245, 197, 24, 0.25);
  }

  .abt-badge-img {
      width: 22px;
      height: 22px;
      object-fit: contain;
  }

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

  .abt-badge-val {
      font-size: 1.1rem;
      font-weight: 900;
      line-height: 1;
      letter-spacing: -0.02em;
  }

  .abt-badge-lbl {
      font-size: 0.65rem;
      font-weight: 600;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.07em;
  }

  /* ── Vertical stat strip ── */
  .abt-stat-strip {
      position: absolute;
      right: -52px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      border-radius: var(--r-lg);
      padding: 16px 14px;
      backdrop-filter: blur(16px);
      z-index: 2;
  }

  .abt-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 10px 6px;
      text-align: center;
  }

  .abt-stat-num {
      font-size: 1rem;
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 1;
      white-space: nowrap;
  }

  .abt-stat-lbl {
      font-size: 0.58rem;
      font-weight: 700;
      color: var(--text-dimmer);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      white-space: nowrap;
  }

  .abt-stat-line {
      width: 24px;
      height: 1px;
      background: var(--glass-border);
  }

  /* ════════════════════
   TEXT COLUMN
════════════════════ */
  .abt-heading {
      color: var(--text-white);
      margin-bottom: 16px;
  }

  .abt-lead {
      font-size: 1rem;
      color: var(--text-mid);
      line-height: 1.8;
      margin-bottom: 36px;
  }

  /* ── Features ── */
  .abt-feats {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 36px;
  }

  .abt-feat {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 18px;
      background: var(--glass);
      border: 1px solid var(--glass-border);
      border-radius: var(--r-lg);
      transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease);
      cursor: default;
      position: relative;
      overflow: hidden;
  }

  /* Left color bar */
  .abt-feat::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      border-radius: 0 2px 2px 0;
      opacity: 0;
      transition: opacity 0.25s;
  }

  .abt-feat:hover {
      border-color: rgba(0, 194, 255, 0.2);
      background: rgba(0, 194, 255, 0.03);
      transform: translateX(5px);
  }

  .abt-feat:hover::before {
      opacity: 1;
  }

  .abt-feat:nth-child(1)::before {
      background: var(--blue-glow);
  }

  .abt-feat:nth-child(2)::before {
      background: var(--cyan);
  }

  .abt-feat:nth-child(3)::before {
      background: var(--teal);
  }

  /* Icon */
  .abt-feat-icon {
      width: 44px;
      height: 44px;
      min-width: 44px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid;
      transition: transform 0.28s var(--ease), box-shadow 0.28s;
  }

  .abt-feat:hover .abt-feat-icon {
      transform: scale(1.1) rotate(-4deg);
  }

  .abt-feat-icon--blue {
      background: rgba(30, 106, 255, 0.12);
      border-color: rgba(30, 106, 255, 0.25);
  }

  .abt-feat-icon--cyan {
      background: rgba(0, 194, 255, 0.1);
      border-color: rgba(0, 194, 255, 0.22);
  }

  .abt-feat-icon--teal {
      background: rgba(0, 212, 170, 0.1);
      border-color: rgba(0, 212, 170, 0.22);
  }

  .abt-feat:hover .abt-feat-icon--blue {
      box-shadow: 0 0 16px rgba(30, 106, 255, 0.28);
  }

  .abt-feat:hover .abt-feat-icon--cyan {
      box-shadow: 0 0 16px rgba(0, 194, 255, 0.25);
  }

  .abt-feat:hover .abt-feat-icon--teal {
      box-shadow: 0 0 16px rgba(0, 212, 170, 0.22);
  }

  .abt-feat-img {
      width: 24px;
      height: 24px;
      object-fit: contain;
  }

  /* Body */
  .abt-feat-body {
      flex: 1;
      min-width: 0;
  }

  .abt-feat h4 {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text-white);
      margin-bottom: 3px;
  }

  .abt-feat p {
      font-size: 0.8rem;
      color: var(--text-dim);
      line-height: 1.55;
  }

  /* Arrow */
  .abt-feat-arrow {
      font-size: 1rem;
      color: var(--text-dimmer);
      transition: color 0.2s, transform 0.2s;
      flex-shrink: 0;
  }

  .abt-feat:hover .abt-feat-arrow {
      color: var(--cyan);
      transform: translateX(3px);
  }

  /* ── CTA Row ── */
  .abt-cta-row {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
  }

  .abt-cta-note {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-dim);
  }

  .abt-cta-note svg {
      color: var(--teal);
      flex-shrink: 0;
  }

  /* ════════════════════
   RESPONSIVE
════════════════════ */
  @media (max-width: 1060px) {
      .abt-stat-strip {
          right: -44px;
      }
  }

  @media (max-width: 900px) {
      .abt-grid {
          grid-template-columns: 1fr;
          gap: 60px;
      }

      .abt-visual {
          order: -1;
          max-width: 480px;
          margin: 0 auto;
          width: 100%;
      }

      .abt-stat-strip {
          position: static;
          transform: none;
          flex-direction: row;
          justify-content: center;
          padding: 14px 20px;
          margin-top: 16px;
          border-radius: var(--r-full);
      }

      .abt-stat-line {
          width: 1px;
          height: 28px;
      }

      .abt-section {
          padding: 72px 0;
      }
  }

  @media (max-width: 560px) {
      .abt-badge--tl {
          left: 8px;
          top: 10px;
      }

      .abt-badge--br {
          right: 8px;
          bottom: 10px;
      }

      .abt-feat {
          padding: 14px;
      }

      .abt-cta-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;
      }

      .abt-cta-row .btn {
          width: 100%;
          justify-content: center;
      }
  }