/* clip instead of hidden so position:sticky on .hero isn't broken */
    html, body { overflow-x: clip; }

    /* ─── Fix navbar to float above hero ─── */
    .navbar-wrap {
      position: fixed;
      top: 14px;
      left: 0;
      right: 0;
      padding: 0;
      z-index: 200;
    }

    /* ─────────────────────────────────────────
       HERO — scroll-driven frame sequence
    ───────────────────────────────────────── */

    /* Tall wrapper = the scroll room for the animation */
    .hero-scroll-wrap {
      height: 210vh;
      position: relative;
    }

    .hero {
      position: sticky;
      top: 0;
      height: 100vh;
      min-height: 640px;
      background: #1a0a04; /* warm dark fallback while frames load */
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Canvas is the video — sits behind everything */
    #heroCanvas {
      position: absolute;
      top: 0; left: 0;
      z-index: 0;
    }

    /* Warm dark vignette on the left where text lives.
       No blue/teal — pure warm darks that let the sunset palette pop. */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        100deg,
        rgba(12, 5, 0, 0.80) 0%,
        rgba(12, 5, 0, 0.50) 40%,
        rgba(12, 5, 0, 0.12) 70%,
        transparent 100%
      );
      z-index: 1;
      pointer-events: none;
    }

    /* Soft bottom fade so the hero blends into the next section */
    .hero::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 180px;
      background: linear-gradient(to bottom, transparent, rgba(255, 250, 245, 0.55));
      z-index: 2;
      pointer-events: none;
    }

    /* ── Hero header: compact left-aligned block at top ── */
    .hero-header {
      position: relative;
      z-index: 3;
      padding-top: 108px; /* clears fixed navbar */
      transition: opacity 0.2s ease;
    }

    .hero-header-inner {
      max-width: 560px;
    }

    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(199, 94, 142, 0.18);
      border: 1px solid rgba(199, 94, 142, 0.45);
      color: var(--sunset-glow);
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .hero-title {
      font-family: 'Sora', sans-serif;
      font-size: clamp(2.2rem, 4.5vw, 3.8rem);
      font-weight: 800;
      color: var(--sunset-orange);
      line-height: 1.08;
      letter-spacing: -0.028em;
      margin-bottom: 22px;
      text-shadow: 0 2px 20px rgba(0,0,0,0.55);
    }

    .hero-title .accent {
      color: var(--sunset-glow); /* warm pink-peach */
      display: block;
    }

    .hero-cta {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    /* Primary CTA — orange instead of teal */
    .btn-hero-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      background: var(--sunset-orange);
      color: white;
      border-radius: var(--radius);
      font-family: 'Sora', sans-serif;
      font-size: 0.96rem;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 8px 28px rgba(199, 94, 142, 0.45);
      transition: all 0.22s ease;
      border: none;
    }
    .btn-hero-primary:hover {
      background: var(--sunset-orange-dk);
      transform: translateY(-3px);
      box-shadow: 0 14px 38px rgba(199, 94, 142, 0.60);
    }

    .btn-hero-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 28px;
      background: rgba(199, 94, 142, 0.12);
      color: var(--sunset-glow);
      border: 1.5px solid rgba(199, 94, 142, 0.50);
      border-radius: var(--radius);
      font-family: 'Sora', sans-serif;
      font-size: 0.96rem;
      font-weight: 700;
      text-decoration: none;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: all 0.22s ease;
    }
    .btn-hero-outline:hover {
      background: rgba(199, 94, 142, 0.24);
      border-color: rgba(199, 94, 142, 0.85);
      color: white;
      transform: translateY(-3px);
    }

    /* ─────────────────────────────────────────
       DESKTOP — full-screen sections, smooth scroll (no snap)
    ───────────────────────────────────────── */
    @media (min-width: 769px) {
      html {
        scroll-behavior: smooth;
      }
      .hero,
      .section {
        min-height: 100vh;
      }
      /* Video section: tighten up so the 3 cards fit on screen */
      #video {
        padding: 56px 0 48px;
      }
      #video .video-frame {
        max-height: 42vh;
      }
      #video .trust-item {
        padding: 14px 18px;
      }
      #video .trust-icon {
        width: 38px;
        height: 38px;
        font-size: 1.05rem;
      }
      #video .trust-item-text strong { font-size: 0.86rem; }
      #video .trust-item-text span   { font-size: 0.76rem; }
      /* Pricing+contact section: can overflow naturally past 100vh */
      #pricing {
        min-height: 100vh;
        height: auto;
        padding-bottom: 60px;
      }
    }

    /* ─── Override section backgrounds to universal cream ─── */
    .section { padding: 92px 0; }
    .section-alt  { background: transparent !important; }
    .section-teal { background: transparent !important; }

    /* ─────────────────────────────────────────
       VIDEO SECTION
    ───────────────────────────────────────── */
    .video-panel { max-width: 900px; margin: 0 auto; }

    .video-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: var(--radius-lg);
      overflow: hidden;
      background: var(--teal-dark);
      box-shadow: 0 24px 72px rgba(17, 24, 39, 0.22);
    }
    .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

    .video-placeholder {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
    }
    .play-btn-wrap {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.14);
      border: 2px solid rgba(255, 255, 255, 0.26);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .play-btn-wrap:hover { background: rgba(255,255,255,0.24); transform: scale(1.10); }
    .play-btn-wrap svg { width: 28px; height: 28px; fill: white; margin-left: 4px; }
    .video-placeholder p { font-size: 0.9rem; color: rgba(255,255,255,0.50); font-weight: 500; }

    /* Trust strip — sunset style */
    .trust-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 36px;
    }

    .trust-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: linear-gradient(135deg, #FFFDF9 0%, #FFF4E8 100%);
      border-radius: var(--radius);
      padding: 22px 24px;
      box-shadow: 0 4px 18px rgba(199, 94, 142, 0.10);
      border: 1px solid rgba(199, 94, 142, 0.18);
      transition: transform 0.22s ease, box-shadow 0.22s ease;
    }
    .trust-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(199, 94, 142, 0.18);
    }

    .trust-icon {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      background: linear-gradient(135deg, var(--sunset-orange), var(--sunset-orange-dk));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(199, 94, 142, 0.32);
    }

    .trust-item-text strong {
      display: block;
      font-family: 'Sora', sans-serif;
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--teal-dark);
    }
    .trust-item-text span {
      font-size: 0.82rem;
      color: var(--text-soft);
      margin-top: 2px;
      display: block;
    }

    /* ─────────────────────────────────────────
       TESTIMONIALS — carousel + site preview
    ───────────────────────────────────────── */
    .testimonials-carousel { position: relative; overflow: hidden; }

    .carousel-track {
      display: flex;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
    }

    .carousel-slide {
      flex: 0 0 100%;
      min-width: 0;
      display: flex;
      justify-content: center;
    }

    .testimonial-card {
      background: linear-gradient(145deg, #FFFDF9 0%, #FFF3E6 100%);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(199, 94, 142, 0.13);
      border: 1px solid rgba(199, 94, 142, 0.16);
      display: flex;
      flex-direction: column;
      max-width: 840px;
      width: 100%;
      cursor: pointer;
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
    .testimonial-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 56px rgba(199, 94, 142, 0.22);
    }

    /* Browser chrome */
    .preview-browser { display: flex; flex-direction: column; }

    .preview-browser-bar {
      background: linear-gradient(135deg, #2C2C2E, #3A3A3C);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .browser-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }
    .browser-dot:nth-child(1) { background: #FF5F57; }
    .browser-dot:nth-child(2) { background: #FFBD2E; }
    .browser-dot:nth-child(3) { background: #28CA41; }

    .browser-address {
      flex: 1;
      margin-left: 8px;
      background: rgba(255, 255, 255, 0.10);
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.60);
      font-family: 'Inter', monospace;
      text-align: center;
    }

    /* Demo badge on the second carousel slide */
    .demo-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      background: linear-gradient(135deg, var(--teal), var(--teal-dark));
      color: #fff;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 999px;
      z-index: 10;
      box-shadow: 0 3px 12px rgba(199,94,142,0.35);
    }

    /* Scaled iframe preview */
    .preview-frame-wrap {
      position: relative;
      width: 100%;
      height: 300px;
      overflow: hidden;
      background: #f0f0f0;
    }

    .preview-frame {
      position: absolute;
      top: 0;
      left: 0;
      width: 1280px;
      height: 900px;
      border: none;
      transform: scale(0.656);
      transform-origin: top left;
      pointer-events: none;
    }

    .preview-click-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      padding: 16px;
      background: linear-gradient(to bottom, transparent 50%, rgba(17, 24, 39, 0.38) 100%);
      transition: background 0.3s ease;
    }
    .testimonial-card:hover .preview-click-overlay {
      background: linear-gradient(to bottom, transparent 35%, rgba(17, 24, 39, 0.55) 100%);
    }
    .preview-click-overlay span {
      background: rgba(255, 255, 255, 0.94);
      color: var(--teal-dark);
      font-size: 0.82rem;
      font-weight: 700;
      font-family: 'Sora', sans-serif;
      padding: 7px 14px;
      border-radius: 999px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.14);
      transition: transform 0.2s ease;
    }
    .testimonial-card:hover .preview-click-overlay span {
      transform: scale(1.04);
    }

    /* Quote + author below preview */
    .testimonial-bottom {
      padding: 24px 28px 28px;
      border-top: 1px solid rgba(199, 94, 142, 0.12);
    }

    .testimonial-quote-area { margin-bottom: 16px; }

    .stars { color: #FBBF24; font-size: 1rem; letter-spacing: 2px; margin-bottom: 10px; }

    .testimonial-quote {
      font-size: 0.96rem;
      color: var(--text);
      line-height: 1.72;
      font-style: italic;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px solid rgba(199, 94, 142, 0.12);
    }

    .author-avatar {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(135deg, var(--teal), var(--teal-light));
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 800;
      font-family: 'Sora', sans-serif;
      font-size: 1rem;
      flex-shrink: 0;
    }
    .author-avatar img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 4px;
      background: white;
    }

    .author-info strong {
      display: block;
      font-family: 'Sora', sans-serif;
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--teal-dark);
    }
    .author-info span {
      font-size: 0.78rem;
      color: var(--text-soft);
    }

    .verified-badge {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      background: linear-gradient(135deg, #ecfdf5, #d1fae5);
      color: #065f46;
      border-radius: 99px;
      font-size: 0.72rem;
      font-weight: 700;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* Carousel controls */
    .carousel-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      margin-top: 28px;
    }

    .carousel-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 2px solid rgba(199, 94, 142, 0.28);
      background: white;
      color: var(--sunset-orange-dk);
      font-size: 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: var(--shadow-sm);
      line-height: 1;
    }
    .carousel-btn:hover:not(:disabled) {
      background: var(--sunset-orange);
      border-color: var(--sunset-orange);
      color: white;
      transform: scale(1.08);
      box-shadow: 0 4px 14px rgba(199, 94, 142, 0.35);
    }
    .carousel-btn:disabled { opacity: 0.35; cursor: default; }

    .carousel-dots { display: flex; gap: 8px; align-items: center; }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(199, 94, 142, 0.30);
      border: none;
      cursor: pointer;
      transition: all 0.25s ease;
      padding: 0;
    }
    .dot.active {
      background: var(--sunset-orange);
      width: 24px;
      border-radius: 4px;
    }

    /* ─────────────────────────────────────────
       SITE PREVIEW MODAL
    ───────────────────────────────────────── */
    .site-preview-modal {
      position: fixed;
      inset: 0;
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .site-preview-modal.is-open {
      opacity: 1;
      pointer-events: all;
    }

    .spm-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(17, 24, 39, 0.72);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .spm-content {
      position: relative;
      z-index: 1;
      width: 80vw;
      height: 85vh;
      background: white;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: 0 36px 90px rgba(0, 0, 0, 0.38);
      display: flex;
      flex-direction: column;
      transform: scale(0.90) translateY(12px);
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .site-preview-modal.is-open .spm-content {
      transform: scale(1) translateY(0);
    }

    .spm-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 18px;
      background: linear-gradient(135deg, #1e1e20, #2C2C2E);
      flex-shrink: 0;
    }
    .spm-title {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255, 255, 255, 0.82);
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
    }
    .spm-logo {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      object-fit: contain;
      background: white;
      padding: 2px;
    }
    .spm-close {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 255, 255, 0.18);
      color: rgba(255, 255, 255, 0.85);
      font-size: 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      padding: 0;
      line-height: 1;
    }
    .spm-close:hover { background: rgba(255, 70, 70, 0.35); }

    .spm-iframe-wrap { flex: 1; position: relative; }
    .spm-iframe-wrap iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    .spm-unavailable {
      position: absolute;
      inset: 0;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: var(--cream);
      color: var(--text-soft);
      font-size: 0.95rem;
      text-align: center;
      padding: 40px;
    }
    .spm-unavailable.show { display: flex; }
    .spm-unavail-icon { font-size: 3rem; }
    .spm-unavailable a { color: var(--teal); font-weight: 700; text-decoration: underline; }

    /* ─────────────────────────────────────────
       PANEL — sunset tinted white
    ───────────────────────────────────────── */
    .panel {
      background: linear-gradient(145deg, #FFFDF9 0%, #FFF5EE 100%);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(199, 94, 142, 0.14);
      box-shadow: 0 12px 52px rgba(199, 94, 142, 0.10);
      padding: 52px;
      overflow: hidden;
    }

    /* ─────────────────────────────────────────
       PRICING
    ───────────────────────────────────────── */
    .pricing-panel {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0 auto;
      min-width: 0;
    }
    .pricing-panel .panel {
      flex: 1;
      width: 100%;
    }

    .pricing-panel-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 28px;
      flex-wrap: wrap;
    }

    .pricing-panel-head h3 {
      font-family: 'Sora', sans-serif;
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--teal-dark);
      letter-spacing: -0.02em;
    }
    .pricing-panel-head p {
      margin-top: 8px;
      font-size: 0.98rem;
      color: var(--text-soft);
      max-width: 440px;
      line-height: 1.65;
    }

    .pricing-price-block { text-align: right; }
    .was-price { font-size: 0.9rem; color: var(--text-soft); text-decoration: line-through; }
    .main-price {
      font-family: 'Sora', sans-serif;
      font-size: 3.4rem;
      font-weight: 800;
      color: #1F6B3A;
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .price-note { font-size: 0.8rem; color: var(--text-soft); margin-top: 4px; }

    .pricing-features {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 32px;
    }
    .pricing-features li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.94rem;
      color: var(--text);
      font-weight: 500;
    }
    .check-icon {
      width: 24px;
      height: 24px;
      border-radius: 7px;
      background: linear-gradient(135deg, #fff3e8, #ffe0c8);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.72rem;
      color: var(--sunset-orange-dk);
      font-weight: 700;
    }

    .guarantee-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 28px;
      padding: 10px 20px;
      background: linear-gradient(135deg, #fff7ed, #fff3e8);
      border: 1.5px solid rgba(199, 94, 142, 0.28);
      border-radius: 999px;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--sunset-orange-dk);
    }

    /* Centered CTA row */
    .pricing-cta-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      flex-wrap: wrap;
      margin-top: 32px;
    }

    /* Sale-green button — pops on the sunset theme */
    .btn-sale {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      background: linear-gradient(135deg, #2EAA5E, #1D8A47);
      color: white;
      border: none;
      border-radius: var(--radius);
      font-family: 'Sora', 'Inter', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 6px 22px rgba(46, 170, 94, 0.36);
      transition: all 0.22s ease;
      text-decoration: none;
      white-space: nowrap;
    }
    .btn-sale:hover {
      background: linear-gradient(135deg, #1D8A47, #156635);
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(46, 170, 94, 0.46);
    }

    /* ─────────────────────────────────────────
       CONTACT
    ───────────────────────────────────────── */
    .contact-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    .contact-copy h2 {
      font-family: 'Sora', sans-serif;
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      font-weight: 800;
      color: var(--teal-dark);
      letter-spacing: -0.025em;
      line-height: 1.1;
    }
    .contact-copy p {
      margin-top: 14px;
      font-size: 1rem;
      color: var(--text-soft);
      line-height: 1.7;
    }

    .contact-info-box { display: flex; flex-direction: column; gap: 16px; }

    .contact-row {
      display: flex;
      align-items: center;
      gap: 16px;
      background: linear-gradient(135deg, #FFFDF9, #FFF3E6);
      border-radius: var(--radius);
      padding: 18px 22px;
      box-shadow: 0 3px 14px rgba(199, 94, 142, 0.08);
      border: 1px solid rgba(199, 94, 142, 0.14);
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .contact-row:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(199, 94, 142, 0.16); }

    .contact-row-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--sunset-orange), var(--sunset-orange-dk));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(199, 94, 142, 0.30);
    }

    .contact-row-info strong {
      display: block;
      font-family: 'Sora', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--text-soft);
    }
    .contact-row-info span {
      font-size: 1rem;
      font-weight: 700;
      color: var(--teal-dark);
      font-family: 'Sora', sans-serif;
    }

    .contact-book-btn { margin-top: 8px; }

    /* ─── Pricing + Contact: side-by-side on desktop ─── */
    .pricing-contact-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      align-items: stretch;
      justify-items: center;
      max-width: 960px;
      margin: 0 auto;
    }
    @media (min-width: 900px) {
      .pricing-contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
      }
    }

    /* New contact card — complements the pricing card */
    .contact-card {
      background: linear-gradient(145deg, #FFFDF9, #FFF0E2);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(199, 94, 142, 0.20);
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(199, 94, 142, 0.10);
      padding: 40px 36px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      width: 100%;
      margin: 0 auto;
      min-width: 0;
    }
    .contact-card h2 {
      font-family: 'Sora', sans-serif;
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      font-weight: 800;
      color: var(--teal-dark);
      letter-spacing: -0.025em;
      line-height: 1.1;
      margin-top: 6px;
    }
    .contact-card > p {
      font-size: 0.98rem;
      color: var(--text-soft);
      line-height: 1.7;
    }
    .contact-rows {
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
    }
    .contact-row {
      width: 100%;
      max-width: 420px;
      margin: 0 auto;
      justify-content: center;
    }
    .contact-row-info {
      min-width: 0;
      text-align: left;
    }
    .contact-card .btn-primary { align-self: flex-start; margin-top: 4px; }

    .page-copyright {
      text-align: center;
      margin-top: 36px;
      padding-bottom: 8px;
      color: var(--text-soft);
      font-size: 0.85rem;
    }

    /* ─────────────────────────────────────────
       EYEBROW — warm sunset tint
    ───────────────────────────────────────── */
    .eyebrow {
      background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,243,232,0.96)) !important;
    }

    /* footer element removed — copyright lives inside #pricing section */

    /* ─────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────── */
    @media (max-width: 960px) {
      .trust-strip { grid-template-columns: 1fr; }
      .pricing-panel-top { flex-direction: column-reverse; }
      .pricing-price-block { text-align: left; }
      .pricing-features { grid-template-columns: 1fr; }
      .contact-panel { grid-template-columns: 1fr; gap: 32px; }
      .panel { padding: 36px 28px; }
      .pricing-cta-row { flex-direction: column; }
      .pricing-cta-row .btn-primary,
      .pricing-cta-row .btn-outline { width: 100%; justify-content: center; }
    }

    @media (max-width: 768px) {
      /* Hero: center image on mobile */
      .hero { background-position: center center; animation: none; }

      /* Cards: ensure carousel slides center properly */
      .carousel-slide { justify-content: center; width: 100%; }
      .testimonial-card { max-width: 100%; width: 100%; }
    }

    @media (max-width: 640px) {
      .hero-title { font-size: clamp(2.6rem, 9vw, 3.6rem); }
      .hero-cta { flex-direction: column; }
      .hero-cta a { width: 100%; justify-content: center; }
      .preview-frame { transform: scale(0.40); }
      .preview-frame-wrap { height: 200px; }
      .spm-content { width: 96vw; height: 90vh; }
    }

    /* ═════════════════════════════════════════
       ANIMATIONS — making the page breathe
    ═════════════════════════════════════════ */

    /* Navbar: slide down on load */
    @keyframes navIn {
      from { opacity: 0; transform: translateY(-20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .navbar-wrap {
      animation: navIn 0.65s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Hero background: driven by scroll frame sequence (heroDrift removed) */

    /* Hero text: direct CSS entrance (above the fold, no AOS needed) */
    @keyframes heroTextIn {
      from { opacity: 0; transform: translateY(36px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero-inner {
      animation: heroTextIn 1.1s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .hero-cta {
      animation: heroTextIn 0.95s 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Hero accent text: warm glow pulse */
    @keyframes accentGlow {
      0%, 100% { text-shadow: 0 0 0 rgba(199,94,142,0); }
      50%       { text-shadow: 0 2px 28px rgba(199,94,142,0.40); }
    }
    .hero-title .accent {
      animation: accentGlow 4.5s 2s ease-in-out infinite;
    }

    /* Hero primary CTA: breathing glow */
    @keyframes heroBtnPulse {
      0%, 100% { box-shadow: 0 8px 28px rgba(199,94,142,0.48); }
      50%       { box-shadow: 0 8px 40px rgba(199,94,142,0.72), 0 0 0 6px rgba(199,94,142,0.12); }
    }
    .btn-hero-primary {
      animation: heroBtnPulse 3.5s 2.5s ease-in-out infinite;
    }
    /* Pause pulse on hover so hover effect takes full control */
    .btn-hero-primary:hover { animation: none; }

    /* Sale button: green glow pulse */
    @keyframes saleGlow {
      0%, 100% { box-shadow: 0 6px 22px rgba(46,170,94,0.36); }
      50%       { box-shadow: 0 6px 36px rgba(46,170,94,0.65), 0 0 0 5px rgba(46,170,94,0.14); }
    }
    .btn-sale {
      animation: saleGlow 3s 1s ease-in-out infinite;
    }
    .btn-sale:hover { animation: none; }

    /* Video play button: gentle float */
    @keyframes floatUp {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-7px); }
    }
    .play-btn-wrap {
      animation: floatUp 3.2s ease-in-out infinite;
    }

    /* Guarantee pill: subtle warm pulse ring */
    @keyframes pillRing {
      0%, 100% { box-shadow: 0 0 0 0 rgba(199,94,142,0); }
      60%       { box-shadow: 0 0 0 7px rgba(199,94,142,0.12); }
    }
    .guarantee-pill {
      animation: pillRing 3.5s 1.5s ease-in-out infinite;
    }

    /* Trust icons: pop spin on hover */
    @keyframes iconPop {
      0%   { transform: scale(1) rotate(0deg); }
      40%  { transform: scale(1.22) rotate(-8deg); }
      100% { transform: scale(1) rotate(0deg); }
    }
    .trust-item:hover .trust-icon {
      animation: iconPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Contact row icons: same pop on hover */
    .contact-row:hover .contact-row-icon {
      animation: iconPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Testimonial card preview: shimmer hint on load */
    @keyframes previewShimmer {
      0%   { opacity: 0.85; }
      50%  { opacity: 1; }
      100% { opacity: 0.85; }
    }
    .preview-click-overlay span {
      animation: previewShimmer 2.8s 1.8s ease-in-out infinite;
    }

    /* Pricing main price: attention-catching number pop on scroll */
    @keyframes pricePop {
      from { transform: scale(0.8); opacity: 0; }
      to   { transform: scale(1); opacity: 1; }
    }
    .main-price[data-aos].aos-animate {
      animation: pricePop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    /* Section titles: subtle underline draw */
    .section-title {
      position: relative;
      display: block;
    }

    /* Eyebrow tags: shimmer sweep */
    @keyframes eyebrowShimmer {
      0%   { background-position: -200% center; }
      100% { background-position: 300% center; }
    }
    .eyebrow {
      background: linear-gradient(
        90deg,
        rgba(255,255,255,0.96) 0%,
        rgba(255,243,232,0.96) 40%,
        rgba(255,250,240,1)    55%,
        rgba(255,243,232,0.96) 70%,
        rgba(255,255,255,0.96) 100%
      ) !important;
      background-size: 250% 100% !important;
      animation: eyebrowShimmer 5s 2s ease-in-out infinite;
    }

    /* Scroll-progress: navbar gets a warm bottom border when scrolled */
    .navbar-wrap.scrolled .navbar {
      border-bottom: 1px solid rgba(199,94,142,0.18);
      box-shadow: 0 8px 32px rgba(17,24,39,0.12);
    }