/* ── HERO ─────────────────────────────────── */
  .hero {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem 2rem;
    position: relative;
    overflow: hidden;
  }

  /* Lottie animation background */
  #lottie-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
     opacity: 0.15;
     filter: grayscale(1) brightness(0) contrast(1.35);
  }

  /* Left decorative letter S */
  .hero-bg-letter-left {
    position: absolute;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 55vw;
    color: rgba(0,0,0,0.03);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    bottom: -10vw;
    left: -6vw;
    z-index: 1;
  }

  /* Right decorative letter N */
  .hero-bg-letter-right {
    position: absolute;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 55vw;
    color: rgba(0,0,0,0.03);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    bottom: -10vw;
    right: -6vw;
    z-index: 1;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 960px;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 1.2rem;
    opacity: 0;
    animation: fadeUp 0.6s 0.1s ease forwards;
  }

  .eyebrow::before,
  .eyebrow::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1.5px;
    background: var(--black);
  }

  .headline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.5rem, 7.5vw, 7rem);
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--black);
    margin-bottom: 1.2rem;
    opacity: 0;
    animation: fadeUp 0.7s 0.25s ease forwards;
  }

  .headline-line2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.22em;
    flex-wrap: nowrap;
  }

  .headline .highlight {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    padding: 0.02em 0.16em 0.04em;
    line-height: 1;
  }

  .sub {
    font-size: 0.95rem;
    font-weight: 300;
    color: #111;
    max-width: 460px;
    margin: 0 auto 1.8rem;
    line-height: 1.65;
    opacity: 0;
    animation: fadeUp 0.7s 0.4s ease forwards;
  }

  /* ── Hero Buttons — round pill style, no arrows ── */
  .btn-group {
    display: flex;
    gap: 0.85rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 0.7s 0.55s ease forwards;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.75rem 2rem;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    border: 2px solid var(--black);
  }

  .btn-primary {
    background: var(--black);
    color: var(--white);
  }

  .btn-primary:hover {
    background: #333;
  }

  .btn-secondary {
    background: var(--white);
    color: var(--black);
  }

  .btn-secondary:hover {
    background: var(--black);
    color: var(--white);
  }