/* ==========================================================================
       SECTION 3: COMPACT 3-PILLAR DARK STRIP
       ========================================================================== */
    .pillars-strip {
      background-color: var(--charcoal);
      color: var(--raw-bone);
      padding: 3.75rem 0;
      border-bottom: 1px solid var(--bronze-steel);
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.25rem;
    }

    .pillar-item {
      border-left: 2px solid var(--cadmium);
      padding-left: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    /* ==========================================================================
       SECTION 4: CLEAN 3-STEP PROGRESSION & DIRECT WHATSAPP CTA
       ========================================================================== */
    .process-section {
      padding: 4.5rem 0;
      border-bottom: 1px solid var(--hairline);
    }

    .steps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-bottom: 2.75rem;
    }

    .step-card {
      background: var(--warm-parchment);
      border: 1px solid var(--hairline);
      border-radius: 10px;
      padding: 1.85rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 1.25rem;
    }

    .step-price-badge {
      display: inline-block;
      padding: 0.42rem 0.85rem;
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(255, 237, 213, 0.6) 50%,
        rgba(255, 255, 255, 0.75) 100%
      );
      backdrop-filter: blur(20px) saturate(190%);
      -webkit-backdrop-filter: blur(20px) saturate(190%);
      border: 1.5px solid rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 700;
      color: #C2410C;
      letter-spacing: 0.02em;
      box-shadow:
        0 8px 20px -4px rgba(255, 90, 31, 0.22),
        0 2px 4px rgba(234, 88, 12, 0.06),
        inset 0 1.5px 1.5px #FFFFFF,
        inset 0 -1px 2px rgba(254, 215, 170, 0.4);
      transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .step-price-badge:hover {
      background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 237, 213, 0.85) 100%
      );
      box-shadow:
        0 12px 28px -4px rgba(255, 90, 31, 0.35),
        inset 0 1.5px 1.5px #ffffff;
      transform: translateY(-1.5px) scale(1.02);
      color: #EA580C;
    }

    .final-cta-banner {
      background: var(--charcoal);
      color: var(--raw-bone);
      border-radius: 12px;
      padding: 2.75rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1.75rem;
      flex-wrap: wrap;
      border-top: 3px solid var(--cadmium);
    }

    /* ==========================================================================
       FOOTER: DARK WORKSTATION LOCKUP
       ========================================================================== */
    .site-footer {
      background-color: var(--charcoal);
      color: var(--raw-bone);
      padding: 3rem 0 2rem;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.5rem;
      padding-bottom: 1.75rem;
      border-bottom: 1px solid var(--bronze-steel);
    }

    .footer-bottom {
      padding-top: 1.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      color: var(--text-muted-dark);
    }

    .footer-legal-links {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: wrap;
    }

    .footer-legal-btn {
      background: none;
      border: none;
      color: var(--text-muted-dark);
      font-family: var(--font-mono);
      font-size: 0.6875rem;
      cursor: pointer;
      padding: 0;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 140ms ease;
    }

    .footer-legal-btn:hover {
      color: var(--cadmium);
    }

    /* Legal Modal & Cookie Consent Banner */
    .legal-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 300;
      background: rgba(18, 19, 22, 0.62);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
    }

    .legal-modal-backdrop.open {
      display: flex;
    }

    .legal-modal {
      background: var(--warm-parchment);
      color: var(--charcoal);
      border: 1px solid var(--hairline);
      border-top: 3px solid var(--cadmium);
      border-radius: 12px;
      max-width: 680px;
      width: 100%;
      max-height: 82vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    }

    .legal-modal-header {
      padding: 1.15rem 1.65rem;
      border-bottom: 1px solid var(--hairline);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }

    .legal-close-btn {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid var(--hairline);
      background: rgba(18, 19, 22, 0.05);
      color: var(--charcoal);
      font-size: 1.25rem;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 120ms ease;
    }

    .legal-close-btn:hover {
      background: var(--charcoal);
      color: var(--raw-bone);
      border-color: var(--charcoal);
    }

    .legal-close-btn:active {
      transform: scale(0.95);
    }

    .legal-modal-body {
      padding: 1.5rem 1.75rem;
      overflow-y: auto;
      font-size: 0.88rem;
      line-height: 1.65;
      color: var(--text-muted);
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .legal-modal-body h4 {
      color: var(--charcoal);
      font-family: var(--font-display);
      font-size: 0.96rem;
      margin-top: 0.25rem;
    }

    .legal-modal-body ul {
      padding-left: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
    }

    .cookie-banner {
      position: fixed;
      bottom: 1.25rem;
      right: 1.25rem;
      left: 1.25rem;
      max-width: 520px;
      margin-left: auto;
      z-index: 250;
      background: rgba(18, 19, 22, 0.95);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      color: var(--raw-bone);
      border: 1px solid var(--bronze-steel);
      border-left: 3px solid var(--cadmium);
      border-radius: 10px;
      padding: 1.15rem 1.35rem;
      display: none;
      flex-direction: column;
      gap: 0.85rem;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    }

    .cookie-banner.visible {
      display: flex;
    }

    .cookie-banner-text {
      font-size: 0.8rem;
      line-height: 1.5;
      color: #D9D7CE;
    }

    .cookie-banner-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.6rem;
      flex-wrap: wrap;
    }

    .cookie-btn {
      font-family: var(--font-sans);
      font-size: 0.78rem;
      font-weight: 600;
      padding: 0.5rem 1.05rem;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 120ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    }

    .cookie-btn:active {
      transform: scale(0.97);
    }

    .cookie-btn-ghost {
      background: rgba(255, 255, 255, 0.06);
      color: var(--raw-bone);
      border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .cookie-btn-ghost:hover {
      background: rgba(255, 255, 255, 0.13);
      border-color: rgba(255, 255, 255, 0.32);
    }

    .cookie-btn-accept {
      background: var(--cadmium);
      color: var(--raw-bone);
      border: 1px solid var(--cadmium);
    }

    .cookie-btn-accept:hover {
      background: #E84E15;
      border-color: #E84E15;
    }

    @media (max-width: 920px) {
      .showcase-stage, .pillars-grid, .steps-grid, .dash-kpi-row {
        grid-template-columns: 1fr;
      }
      .stage-info {
        border-right: none;
        border-bottom: 1px solid var(--hairline);
        padding: 1.75rem;
      }
      .stage-visual {
        padding: 1.5rem;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.85);
      }
      .showcase-tabs-wrap {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        scrollbar-width: none;
      }
      .showcase-tabs-wrap::-webkit-scrollbar {
        display: none;
      }
      .showcase-segmented {
        min-width: 580px;
        width: max-content;
        margin: 0 auto;
      }
      .nav-links {
        display: none;
      }
    }

    @media (max-width: 640px) {
      .pillars-strip,
      .process-section,
      .showcase-section {
        padding: 2.75rem 0;
      }
      .final-cta-banner {
        padding: 1.85rem 1.35rem;
      }
      .final-cta-banner .btn {
        width: 100%;
      }
    }

    /* ==========================================================================
       SCROLL-DRIVEN TEXT & ELEMENT REVEAL ANIMATIONS (APPLE FLUID MOTION)
       ========================================================================== */
    .scroll-reveal {
      opacity: 0;
      transform: translate3d(0, 24px, 0);
      translate: 0 var(--scroll-shift, 0px);
      filter: blur(4px);
      transition:
        opacity 650ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
        filter 650ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
      will-change: opacity, transform, translate, filter;
    }

    .scroll-reveal.in-view {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      filter: blur(0px);
    }

    .scroll-word {
      display: inline-block;
      opacity: 0;
      transform: translate3d(0, 18px, 0);
      filter: blur(4px);
      transition:
        opacity 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-delay, 0ms) + var(--word-idx, 0) * 32ms),
        transform 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-delay, 0ms) + var(--word-idx, 0) * 32ms),
        filter 560ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-delay, 0ms) + var(--word-idx, 0) * 32ms);
      will-change: opacity, transform, filter;
    }

    .scroll-reveal.in-view .scroll-word {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      filter: blur(0px);
    }

    @media (prefers-reduced-motion: reduce) {
      .scroll-reveal,
      .scroll-word {
        transform: none !important;
        translate: none !important;
        filter: none !important;
        transition: opacity 200ms ease !important;
      }
    }

    /* ==========================================================================
       INTRO SPLASH SEQUENCE (BLACK -> 'A' + SWINGING PLOMO -> 0° -> 'APLOMO' -> OPEN)
       ========================================================================== */
    body.intro-locked {
      overflow: hidden;
    }

    .intro-splash {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background-color: var(--raw-bone);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
      opacity: 1;
      visibility: visible;
      transition:
        background-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 560ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0ms linear 560ms;
      will-change: background-color, opacity, transform;
    }

    .intro-splash.bg-black {
      background-color: #0D0E11;
    }

    [data-theme="dark"] .intro-splash {
      background-color: #0E1015;
    }

    .intro-splash.splash-exit {
      opacity: 0;
      transform: scale(1.035);
      visibility: hidden;
      pointer-events: none;
    }

    .intro-logo-svg {
      width: min(82vw, 470px);
      height: auto;
      overflow: visible;
      display: block;
    }

    /* Centers 'A' initially (translateX 232px puts A at x=48 right at 280 center), then glides left to 36px when PLOMO pops out */
    .intro-lockup-shift {
      transform: translate3d(232px, 0, 0);
      transition: transform 560ms cubic-bezier(0.2, 1.04, 0.32, 1);
      will-change: transform;
    }

    .intro-splash.wordmark-open .intro-lockup-shift {
      transform: translate3d(36px, 0, 0);
    }

    /* Dark mode 'A' logo pop-in BIG around its own local (0,0) center, then shrink to 1x when PLOMO comes in */
    .intro-a-pop {
      opacity: 0;
      transform: scale(1.25);
      transition:
        opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 460ms cubic-bezier(0.22, 1.24, 0.36, 1);
      will-change: opacity, transform;
    }

    .intro-splash.a-visible .intro-a-pop {
      opacity: 1;
      transform: scale(2.15);
    }

    .intro-splash.wordmark-open .intro-a-pop {
      opacity: 1;
      transform: scale(1);
      transition:
        opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 560ms cubic-bezier(0.2, 1.04, 0.32, 1);
    }

    /* PLOMO letters tucked behind the right edge of 'A', popping out to the right */
    .intro-letter {
      opacity: 0;
      transform: translate3d(-130px, 0, 0);
      transition:
        opacity 320ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--letter-idx, 0) * 42ms),
        transform 540ms cubic-bezier(0.18, 1.15, 0.32, 1) calc(var(--letter-idx, 0) * 42ms);
      will-change: opacity, transform;
    }

    .intro-splash.wordmark-open .intro-letter {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    /* ==========================================================================
       DARK MODE ADAPTATIONS FOR SECTIONS, STEP CARDS & PERMANENT DARK BLOCKS
       ========================================================================== */
    [data-theme="dark"] .pillars-strip {
      background-color: #0A0B0E;
      border-bottom-color: #1A1D24;
    }

    [data-theme="dark"] .process-section {
      border-bottom-color: #262A33;
    }

    [data-theme="dark"] .step-card {
      background: #15181E;
      border-color: #262A33;
    }

    [data-theme="dark"] .step-card .card-h3 {
      color: #F5F4F0;
    }

    [data-theme="dark"] .step-card p {
      color: #9EA3AE;
    }

    [data-theme="dark"] .step-price-badge {
      background: linear-gradient(
        135deg,
        rgba(42, 46, 56, 0.92) 0%,
        rgba(56, 42, 34, 0.8) 50%,
        rgba(42, 46, 56, 0.88) 100%
      );
      border: 1.5px solid rgba(255, 90, 31, 0.45);
      color: #FB923C;
      box-shadow:
        0 8px 20px -4px rgba(255, 90, 31, 0.28),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.18),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4);
    }

    [data-theme="dark"] .step-price-badge:hover {
      background: linear-gradient(
        135deg,
        rgba(54, 58, 70, 0.95) 0%,
        rgba(72, 48, 36, 0.9) 100%
      );
      border-color: rgba(255, 90, 31, 0.7);
      color: #FF7A3D;
      box-shadow:
        0 12px 28px -4px rgba(255, 90, 31, 0.4),
        inset 0 1.5px 1.5px rgba(255, 255, 255, 0.25);
    }

    [data-theme="dark"] .final-cta-banner {
      background: #0E1015;
      border-color: #262A33;
      border-top: 3px solid var(--cadmium);
      box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.6);
    }

    [data-theme="dark"] .site-footer {
      background-color: #0A0B0E;
    }

    [data-theme="dark"] .footer-inner {
      border-bottom-color: #1A1D24;
    }

    [data-theme="dark"] .legal-modal {
      background: #14171E;
      color: #F5F4F0;
      border-color: #262A33;
      border-top: 3px solid var(--cadmium);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    }

    [data-theme="dark"] .legal-modal-header {
      border-bottom-color: #262A33;
    }

    [data-theme="dark"] .legal-close-btn {
      background: rgba(255, 255, 255, 0.08);
      color: #F5F4F0;
      border-color: rgba(255, 255, 255, 0.14);
    }

    [data-theme="dark"] .legal-close-btn:hover {
      background: #F5F4F0;
      color: #121316;
      border-color: #F5F4F0;
    }

    [data-theme="dark"] .legal-modal-body {
      color: #9EA3AE;
    }

    [data-theme="dark"] .legal-modal-body h4 {
      color: #F5F4F0;
    }