:root {
      --bg-dark: #040804;
      --bg-surface: #071007;
      --bg-card: #09160b;
      --bg-card-hover: #0f2212;

      /* Official Screezy Logo Palette */
      --neon-green: #4ba928;
      --neon-bright: #5dc333;
      --neon-lime: #f5fe5a;
      --neon-radioactive: #4ba928;
      --neon-emerald: #39881e;
      --neon-dark: #0d5a0a;

      --text-primary: #f2fef5;
      --text-secondary: #9cbca7;
      --text-muted: #627e6c;
      --text-subtle: #415949;

      --border-glass: rgba(75, 169, 40, 0.22);
      --border-subtle: rgba(255, 255, 255, 0.08);
      --border-bright: rgba(75, 169, 40, 0.5);

      --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

      /* Apple / Linear Kinetic Motion Easing Curves */
      --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      background-color: var(--bg-dark);
      color-scheme: dark;
      overflow-x: hidden;
      overflow-x: clip;
      max-width: 100%;
    }

    body {
      background-color: var(--bg-dark);
      color: var(--text-primary);
      font-family: var(--font-sans);
      font-size: 15.5px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      overflow-x: clip;
      max-width: 100%;
      background-image: radial-gradient(circle at 50% 0%, rgba(75, 169, 40, 0.06) 0%, transparent 60%);
      background-repeat: no-repeat;
    }

    a {
      color: var(--neon-bright);
      text-decoration: none;
      transition: color 0.15s ease, transform 0.15s ease;
    }
    a:hover {
      color: #fff;
    }

    h1, h2, h3, h4, h5 {
      font-family: var(--font-sans);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.15;
      color: var(--text-primary);
    }

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

    ::selection {
      background: rgba(75, 169, 40, 0.35);
      color: #ffffff;
    }

    :focus-visible {
      outline: 2px solid var(--neon-green);
      outline-offset: 2px;
    }

    button {
      font: inherit;
      border: none;
      background: transparent;
      cursor: pointer;
    }

    .container {
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 2;
    }

    /* ==========================================================================
       SCREEZY CINEMATIC LOAD CHOREOGRAPHY (Rhythmic & Interleaved Motion)
       ========================================================================== */

    /* 1. Top Announcement Bar: Slides down smoothly from above at T+0ms */
    @keyframes barSlideDown {
      0% {
        opacity: 0;
        transform: translateY(-100%);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .announcement-bar {
      animation: barSlideDown 0.65s var(--ease-spring) 0.05s both;
    }

    /* 2. Top Navigation Bar: Floats down softly at T+120ms with glass blur */
    @keyframes headerReveal {
      0% {
        opacity: 0;
        transform: translateY(-20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .site-header {
      animation: headerReveal 0.75s var(--ease-spring) 0.12s both;
    }

    /* 2b. Brand Logo: Tactile subtle tilt pop at T+250ms */
    @keyframes brandLogoPop {
      0% {
        opacity: 0;
        transform: scale(0.82) rotate(-10deg);
      }
      60% {
        transform: scale(1.06) rotate(2deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }
    .site-header .brand-logo-wrap {
      animation: brandLogoPop 0.8s var(--ease-bounce) 0.25s both;
    }

    /* 3. Hero Ambient Spotlight Glow: Gentle breathing expansion at T+50ms */
    /* Sólo opacidad: `transform` queda reservado para posicionar el halo. */
    @keyframes spotlightAwaken {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    .hero-spotlight {
      animation: spotlightAwaken 1.2s var(--ease-cinematic) 0.05s both;
    }

    /* 4. Hero Title (H1): Kinetic upward de-blur rise at T+220ms */
    @keyframes heroTitleEmerge {
      0% {
        opacity: 0;
        transform: translateY(28px) scale(0.98);
        filter: blur(6px);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
      }
    }
    .animate-hero-title {
      animation: heroTitleEmerge 0.85s var(--ease-spring) 0.22s both;
    }

    /* 5. INTERLEAVED: 3D Mockup on Right awakens early at T+340ms */
    @keyframes heroCardAwaken {
      0% {
        opacity: 0;
        transform: perspective(1200px) rotateX(10deg) rotateY(-8deg) translateY(36px) scale(0.92);
      }
      70% {
        transform: perspective(1200px) rotateX(1deg) rotateY(-1deg) translateY(-4px) scale(1.01);
      }
      100% {
        opacity: 1;
        transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(0) scale(1);
      }
    }
    .animate-hero-card {
      animation: heroCardAwaken 1.05s var(--ease-spring) 0.30s both;
    }

    /* 6. Hero Description: Slides in with smooth focus at T+460ms */
    @keyframes heroDescEmerge {
      0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(3px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .animate-hero-desc {
      animation: heroDescEmerge 0.75s var(--ease-spring) 0.38s both;
    }

    /* 7. Hero Primary CTA Button: Spring tactile pop at T+580ms */
    @keyframes btnSpringPop {
      0% {
        opacity: 0;
        transform: scale(0.85) translateY(16px);
      }
      65% {
        transform: scale(1.04) translateY(-2px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }
    .animate-hero-btn-primary {
      animation: btnSpringPop 0.62s var(--ease-bounce) 0.46s both;
    }

    /* 8. Hero Secondary Pro Button: Frosted slide at T+660ms */
    @keyframes btnProSlide {
      0% {
        opacity: 0;
        transform: translateX(18px) translateY(10px);
      }
      100% {
        opacity: 1;
        transform: translateX(0) translateY(0);
      }
    }
    .animate-hero-btn-pro {
      animation: btnProSlide 0.62s var(--ease-spring) 0.54s both;
    }

    /* 9. Official Mac Assurance Shield & Pill at T+760ms */
    @keyframes assurancePillDrop {
      0% {
        opacity: 0;
        transform: translateY(14px) scale(0.96);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @keyframes pulseAssuranceIcon {
      0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(75, 169, 40, 0)); }
      50% { transform: scale(1.18); filter: drop-shadow(0 0 8px rgba(75, 169, 40, 0.75)); }
    }
    .animate-hero-assurance {
      animation: assurancePillDrop 0.65s var(--ease-spring) 0.62s both;
    }
    .animate-hero-assurance svg {
      animation: pulseAssuranceIcon 2.4s infinite ease-in-out 1.2s;
    }

    /* 10. Keyboard Shortcut Hint & Micro Key Tap at T+860ms */
    @keyframes shortcutHintFade {
      0% {
        opacity: 0;
        transform: translateY(12px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @keyframes keyBadgePop {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 10px rgba(75, 169, 40, 0.45); }
    }
    .animate-hero-shortcuts {
      animation: shortcutHintFade 0.6s var(--ease-spring) 0.86s both;
    }
    .animate-hero-shortcuts .key-badge:nth-child(1) { animation: keyBadgePop 2.2s ease-in-out 1.5s infinite; }
    .animate-hero-shortcuts .key-badge:nth-child(2) { animation: keyBadgePop 2.2s ease-in-out 1.8s infinite; }
    .animate-hero-shortcuts .key-badge:nth-child(3) { animation: keyBadgePop 2.2s ease-in-out 2.1s infinite; }

    /* 11. Social Proof Ticker at T+950ms */
    @keyframes tickerEmerge {
      0% {
        opacity: 0;
        transform: translateY(24px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .social-proof-section {
      animation: tickerEmerge 0.85s var(--ease-spring) 0.95s both;
    }

    /* ==========================================================================
       GLOBAL TACTILE SCROLL REVEAL SYSTEM
       ========================================================================== */
    .reveal-on-scroll {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.75s var(--ease-spring), transform 0.75s var(--ease-spring), filter 0.75s var(--ease-spring);
      will-change: transform, opacity;
    }

    .reveal-on-scroll.reveal-slide-left {
      transform: translateX(-36px);
    }
    .reveal-on-scroll.reveal-slide-right {
      transform: translateX(36px);
    }
    .reveal-on-scroll.reveal-scale {
      transform: scale(0.92) translateY(24px);
    }
    .reveal-on-scroll.reveal-blur {
      filter: blur(8px);
    }

    .reveal-on-scroll.is-revealed {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
      filter: blur(0) !important;
    }

    /* Stagger Delays for Grid Children */
    .stagger-1 { transition-delay: 0.06s; }
    .stagger-2 { transition-delay: 0.12s; }
    .stagger-3 { transition-delay: 0.18s; }
    .stagger-4 { transition-delay: 0.24s; }
    .stagger-5 { transition-delay: 0.30s; }
    .stagger-6 { transition-delay: 0.36s; }

    /* Feature Card Bento Lift on Reveal */
    .feature-card {
      transition: transform 0.5s var(--ease-spring), box-shadow 0.5s ease, border-color 0.3s ease, opacity 0.65s var(--ease-spring);
    }

    /* Comparison Table Row Subtle Entrance */
    .compare-row {
      transition: background-color 0.2s ease, opacity 0.5s var(--ease-spring);
    }

    /* Featured Pricing Card Aura Glow */
    .pricing-card.featured.is-revealed {
      animation: featuredAuraPulse 3.5s infinite ease-in-out;
    }
    @keyframes featuredAuraPulse {
      0%, 100% {
        box-shadow: 0 0 35px rgba(75, 169, 40, 0.25), 0 20px 50px rgba(0,0,0,0.8);
      }
      50% {
        box-shadow: 0 0 55px rgba(75, 169, 40, 0.45), 0 24px 60px rgba(0,0,0,0.9);
      }
    }

    /* Downloads Card Glow */
    .download-card-active.is-revealed {
      animation: downloadCardGlow 4s infinite ease-in-out;
    }
    @keyframes downloadCardGlow {
      0%, 100% {
        border-color: var(--border-glass);
      }
      50% {
        border-color: rgba(75, 169, 40, 0.55);
        box-shadow: 0 0 35px rgba(75, 169, 40, 0.25);
      }
    }

    /* Telemetry Badge Pop */
    .telemetry-badges-bar .telem-chip {
      transition: transform 0.3s var(--ease-bounce), background-color 0.3s ease;
    }
    .showcase-display-window.is-revealed .telem-chip {
      transform: scale(1.05);
    }

    /* Accessibility: Reduced Motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
      }
    }

    /* ==========================================================================
       Apple macOS Sequoia / VisionOS Liquid Glassmorphism Buttons
       ========================================================================== */
    @keyframes glassSpecularSweep {
      0% {
        transform: translateX(-160%) skewX(-20deg);
        opacity: 0;
      }
      20% {
        opacity: 0.85;
      }
      50% {
        transform: translateX(250%) skewX(-20deg);
        opacity: 0;
      }
      100% {
        transform: translateX(250%) skewX(-20deg);
        opacity: 0;
      }
    }

    /* Primary Apple Emerald Glass Capsule Button */
    .btn-hero-primary,
    .btn-header-neon,
    .btn-plan-neon,
    .cta-btn-center,
    .btn-submit-purchase {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px 30px;
      border-radius: 9999px;
      font-family: var(--font-body);
      font-size: 15.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      text-decoration: none;
      color: #020904 !important;
      background: linear-gradient(180deg, #5fe42e 0%, #44bf1f 40%, #2ea013 100%);
      border: 1px solid rgba(145, 255, 95, 0.55);
      box-shadow: 
        0 0 0 1px rgba(110, 245, 60, 0.25),
        0 4px 18px -2px rgba(75, 215, 40, 0.4),
        0 12px 32px -4px rgba(0, 0, 0, 0.55),
        inset 0 1.2px 1px rgba(255, 255, 255, 0.8),
        inset 0 -1.5px 3px rgba(10, 50, 10, 0.35);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      cursor: pointer;
      overflow: hidden;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
      -webkit-user-select: none;
    }

    /* El icono no es texto: no se encoge.
       En el hero los dos botones comparten una fila con ancho fijo y `white-space:
       nowrap`, así que el flex reparte el faltante entre los hijos y el SVG —que sí es
       encogible por defecto— quedaba aplastado a una rayita, y volvía a su tamaño de
       golpe cuando el precio del botón vecino acortaba la fila. */
    .btn-hero-primary > svg,
    .btn-header-neon > svg,
    .btn-plan-neon > svg,
    .cta-btn-center > svg,
    .btn-submit-purchase > svg,
    .btn-hero-pro > svg {
      flex: 0 0 auto;
    }

    /* Top Glass Specular Meniscus */
    .btn-hero-primary::before,
    .btn-header-neon::before,
    .btn-plan-neon::before,
    .cta-btn-center::before,
    .btn-submit-purchase::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 48%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.04) 80%, transparent 100%);
      border-radius: 9999px 9999px 0 0;
      pointer-events: none;
      z-index: 1;
    }

    /* Soft Lux Glass Shimmer Sweep */
    .btn-hero-primary::after,
    .btn-header-neon::after,
    .btn-plan-neon::after,
    .cta-btn-center::after,
    .btn-submit-purchase::after {
      content: "";
      position: absolute;
      top: -60%;
      left: -60%;
      width: 75px;
      height: 220%;
      background: linear-gradient(
        115deg,
        transparent 0%,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(210, 255, 215, 0.2) 65%,
        transparent 100%
      );
      filter: blur(1px);
      animation: glassSpecularSweep 4.2s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
      pointer-events: none;
      z-index: 2;
    }

    .btn-hero-primary:hover,
    .btn-header-neon:hover,
    .btn-plan-neon:hover,
    .cta-btn-center:hover,
    .btn-submit-purchase:hover {
      background: linear-gradient(180deg, #71f43a 0%, #52d227 40%, #36b318 100%);
      transform: translateY(-2px);
      box-shadow: 
        0 0 0 1px rgba(160, 255, 110, 0.65),
        0 6px 26px -2px rgba(85, 245, 50, 0.65),
        0 18px 42px -4px rgba(0, 0, 0, 0.6),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
        inset 0 -1.5px 4px rgba(10, 50, 10, 0.35);
      border-color: rgba(180, 255, 130, 0.85);
      color: #020904 !important;
    }

    .btn-hero-primary:active,
    .btn-header-neon:active,
    .btn-plan-neon:active,
    .cta-btn-center:active,
    .btn-submit-purchase:active {
      transform: translateY(0px) scale(0.98);
      box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.4),
        inset 0 2px 3px rgba(0, 0, 0, 0.2),
        inset 0 -1px 2px rgba(255, 255, 255, 0.2);
    }

    /* Secondary Apple Frosted Obsidian Glass Button */
    .btn-hero-pro,
    .btn-plan-ghost,
    .btn-header-ghost,
    .btn-blog-ghost {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 15px 24px;
      border-radius: 9999px;
      font-family: var(--font-body);
      font-size: 15.5px;
      font-weight: 600;
      letter-spacing: -0.01em;
      text-decoration: none;
      color: var(--text-primary) !important;
      background: rgba(8, 20, 12, 0.65);
      border: 1px solid rgba(85, 220, 45, 0.28);
      backdrop-filter: blur(20px) saturate(190%);
      -webkit-backdrop-filter: blur(20px) saturate(190%);
      box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 12px rgba(75, 169, 40, 0.08);
      cursor: pointer;
      overflow: hidden;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-hero-pro::before,
    .btn-plan-ghost::before,
    .btn-header-ghost::before,
    .btn-blog-ghost::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 48%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
      border-radius: 9999px 9999px 0 0;
      pointer-events: none;
    }

    .btn-hero-pro:hover,
    .btn-plan-ghost:hover,
    .btn-header-ghost:hover,
    .btn-blog-ghost:hover {
      color: #ffffff !important;
      background: rgba(14, 34, 20, 0.85);
      border-color: rgba(110, 245, 60, 0.55);
      transform: translateY(-2px);
      box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(75, 210, 40, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 0 16px rgba(75, 210, 40, 0.15);
    }

    .btn-hero-pro:active,
    .btn-plan-ghost:active,
    .btn-header-ghost:active,
    .btn-blog-ghost:active {
      transform: translateY(0px) scale(0.98);
    }

    /* High-Performance Neon Headline Accent (Hardware Accelerated, 60fps) */
    .squiggly-text {
      display: inline-block;
      position: relative;
      cursor: default;
      background: linear-gradient(135deg, #74ff3d 0%, #4ba928 45%, #9fff6b 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 16px rgba(75, 169, 40, 0.35));
      transform: translateZ(0);
    }

    /* ==========================================================================
       Aceternity UI — Interactive Tooltip Cards (Solid Dark Opaque Theme)
       ========================================================================== */
    .tooltip-card-trigger {
      position: relative;
      display: inline;
      cursor: pointer;
      color: #ffffff;
      font-weight: 600;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
      text-decoration-color: rgba(255, 255, 255, 0.3);
      transition: color 0.15s ease, text-decoration-color 0.15s ease;
      white-space: normal;
    }

    .tooltip-card-trigger:hover,
    .tooltip-card-trigger:focus-visible,
    .tooltip-card-trigger:focus-within {
      color: var(--neon-bright);
      text-decoration-color: var(--neon-bright);
      outline: none;
      z-index: 100000 !important;
    }

    .tooltip-card-trigger.tooltip-pill {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      color: inherit;
    }

    .author-name .tooltip-card-trigger {
      text-decoration: none !important;
      color: #ffffff !important;
      font-weight: 700;
    }
    .author-name .tooltip-card-trigger:hover {
      color: var(--neon-bright) !important;
    }

    /* Tooltip Card Floating Wrapper */
    .tooltip-card-wrapper {
      position: absolute;
      bottom: calc(100% + 12px);
      left: 50%;
      transform: translateX(-50%) translateY(8px) scale(0.94);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                  visibility 0.22s ease;
      z-index: 100000 !important;
      width: 290px;
      transform-origin: bottom center;
      filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.95));
    }

    .tooltip-card-trigger:hover > .tooltip-card-wrapper,
    .tooltip-card-trigger:focus-visible > .tooltip-card-wrapper,
    .tooltip-card-trigger:focus-within > .tooltip-card-wrapper {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0) scale(1) !important;
    }

    /* Directional Alignments */
    .tooltip-card-wrapper.align-left {
      left: 0 !important;
      transform: translateX(0) translateY(8px) scale(0.94);
    }
    .tooltip-card-trigger:hover > .tooltip-card-wrapper.align-left,
    .tooltip-card-trigger:focus-within > .tooltip-card-wrapper.align-left {
      transform: translateX(0) translateY(0) scale(1) !important;
    }

    .tooltip-card-wrapper.align-right {
      left: auto !important;
      right: 0 !important;
      transform: translateX(0) translateY(8px) scale(0.94);
    }
    .tooltip-card-trigger:hover > .tooltip-card-wrapper.align-right,
    .tooltip-card-trigger:focus-within > .tooltip-card-wrapper.align-right {
      transform: translateX(0) translateY(0) scale(1) !important;
    }

    .tooltip-card-wrapper.flipped-bottom {
      bottom: auto !important;
      top: calc(100% + 12px) !important;
      transform: translateX(-50%) translateY(-8px) scale(0.94);
    }
    .tooltip-card-trigger:hover > .tooltip-card-wrapper.flipped-bottom,
    .tooltip-card-trigger:focus-within > .tooltip-card-wrapper.flipped-bottom {
      transform: translateX(-50%) translateY(0) scale(1) !important;
    }

    .tooltip-card-wrapper.flipped-bottom.align-left {
      transform: translateX(0) translateY(-8px) scale(0.94);
    }
    .tooltip-card-trigger:hover > .tooltip-card-wrapper.flipped-bottom.align-left,
    .tooltip-card-trigger:focus-within > .tooltip-card-wrapper.flipped-bottom.align-left {
      transform: translateX(0) translateY(0) scale(1) !important;
    }

    .tooltip-card-wrapper.flipped-bottom.align-right {
      transform: translateX(0) translateY(-8px) scale(0.94);
    }
    .tooltip-card-trigger:hover > .tooltip-card-wrapper.flipped-bottom.align-right,
    .tooltip-card-trigger:focus-within > .tooltip-card-wrapper.flipped-bottom.align-right {
      transform: translateX(0) translateY(0) scale(1) !important;
    }

    /* 100% Solid Dark Opaque Tooltip Card Box */
    .tooltip-card-box {
      background-color: #0b1710 !important;
      background: #0b1710 !important;
      opacity: 1 !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: 1.5px solid rgba(75, 169, 40, 0.5) !important;
      border-radius: 14px !important;
      padding: 15px 17px !important;
      color: #f2fef5 !important;
      box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.98),
        0 0 0 1px rgba(75, 169, 40, 0.35),
        0 0 35px rgba(75, 169, 40, 0.22) !important;
      font-size: 13px !important;
      line-height: 1.5 !important;
      text-align: left !important;
      position: relative !important;
      display: block !important;
      z-index: 100000 !important;
    }

    .tooltip-card-box::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--neon-bright), transparent);
    }

    /* Solid Opaque Tooltip Arrow */
    .tooltip-card-arrow {
      position: absolute !important;
      top: 100% !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 0 !important;
      height: 0 !important;
      border-left: 7px solid transparent !important;
      border-right: 7px solid transparent !important;
      border-top: 8px solid #0b1710 !important;
      z-index: 100001 !important;
    }
    .tooltip-card-arrow::before {
      content: "" !important;
      position: absolute !important;
      top: -9px !important;
      left: -8px !important;
      width: 0 !important;
      height: 0 !important;
      border-left: 8px solid transparent !important;
      border-right: 8px solid transparent !important;
      border-top: 9px solid rgba(75, 169, 40, 0.6) !important;
      z-index: -1 !important;
    }

    .tooltip-card-wrapper.align-left .tooltip-card-arrow {
      left: 24px !important;
      transform: none !important;
    }
    .tooltip-card-wrapper.align-right .tooltip-card-arrow {
      left: auto !important;
      right: 24px !important;
      transform: none !important;
    }

    .tooltip-card-wrapper.flipped-bottom .tooltip-card-arrow {
      top: auto !important;
      bottom: 100% !important;
      border-top: none !important;
      border-bottom: 8px solid #0b1710 !important;
    }
    .tooltip-card-wrapper.flipped-bottom .tooltip-card-arrow::before {
      top: auto !important;
      bottom: -1px !important;
      border-top: none !important;
      border-bottom: 9px solid rgba(75, 169, 40, 0.6) !important;
    }

    /* Inner Components */
    .tooltip-card-header {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }

    .tooltip-card-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--neon-bright);
      background: #0e2416;
      border: 1px solid rgba(75, 169, 40, 0.35);
      padding: 3px 8px;
      border-radius: 6px;
    }

    .tooltip-card-chip {
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: #9cbca7;
      background: #122017;
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 2px 6px;
      border-radius: 4px;
    }

    .tooltip-card-title {
      display: block !important;
      font-size: 13.5px;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 5px;
      letter-spacing: -0.02em;
    }

    .tooltip-card-desc {
      display: block !important;
      font-size: 12px;
      color: #9cbca7;
      line-height: 1.45;
      margin-bottom: 8px;
    }

    .tooltip-card-footer {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 11px;
    }

    .tooltip-stat {
      color: var(--neon-bright);
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    /* Author Card Components */
    .tooltip-author-banner {
      display: flex !important;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
    }

    .tooltip-avatar-ring {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #11281a;
      border: 1.5px solid var(--neon-bright);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      color: #fff;
      font-size: 13px;
      flex-shrink: 0;
      box-shadow: 0 0 12px rgba(75, 169, 40, 0.3);
    }

    .tooltip-author-meta {
      display: flex !important;
      flex-direction: column;
    }

    .tooltip-author-name {
      font-size: 13.5px;
      font-weight: 700;
      color: #ffffff;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .tooltip-verified-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      background: var(--neon-green);
      color: #040705;
      font-size: 9.5px;
      font-weight: 900;
      border-radius: 50%;
    }

    .tooltip-author-role {
      font-size: 11px;
      color: #627e6c;
    }

    .tooltip-quote-box {
      display: block !important;
      background: #050b07 !important;
      border-left: 2px solid var(--neon-green) !important;
      padding: 8px 10px !important;
      border-radius: 0 6px 6px 0 !important;
      font-style: italic !important;
      font-size: 12px !important;
      color: #9cbca7 !important;
      margin-bottom: 8px !important;
      border-top: 1px solid rgba(255,255,255,0.04);
      border-right: 1px solid rgba(255,255,255,0.04);
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }

    /* Sticky Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(4, 7, 5, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-subtle);
      transition: padding 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    }
    .site-header.scrolled {
      background: rgba(3, 5, 4, 0.96);
      border-bottom-color: rgba(75, 169, 40, 0.18);
    }
    .header-inner {
      display: flex;
      align-items: center;
      gap: 32px;
      /* Longhand a propósito: este div es a la vez `.container`, y el atajo
         `padding: 16px 0` le borraba el padding horizontal de 32px. Cada regla
         toca sólo su eje. Ver la misma nota en css/topbar.css. */
      padding-top: 16px;
      padding-bottom: 16px;
      transition: padding 0.25s ease;
    }
    .site-header.scrolled .header-inner {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .brand-link {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-right: auto;
    }
    .brand-logo-wrap {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(75, 169, 40, 0.15);
      border: 1px solid var(--border-glass);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    }
    .brand-link:hover .brand-logo-wrap {
      transform: rotate(-8deg) scale(1.08);
      box-shadow: 0 0 20px rgba(75, 169, 40, 0.45);
    }
    .brand-logo {
      height: 22px;
      width: auto;
    }
    .brand-name {
      font-family: var(--font-display, "Outfit", sans-serif);
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .brand-name .brand-badge {
      color: var(--neon-green);
      font-size: 11px;
      padding: 2px 7px;
      border-radius: 6px;
      background: rgba(75, 169, 40, 0.12);
      border: 1px solid rgba(75, 169, 40, 0.28);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      font-weight: 700;
    }

    .nav-links {
      display: flex;
      gap: 28px;
      align-items: center;
      font-size: 14.5px;
    }
    .nav-links a {
      color: var(--text-secondary);
      font-weight: 500;
      position: relative;
      padding: 4px 0;
      transition: color 0.15s ease;
    }
    /* Enlace de tienda: es una pieza gráfica, no texto. Se le quita el
       subrayado animado que llevan los demás enlaces porque debajo de una
       imagen queda suelto. */
    .nav-store-pill {
      display: inline-flex;
      align-items: center;
      padding: 0;
      line-height: 0;
    }
    .nav-store-pill::after {
      display: none;
    }
    .nav-store-pill img {
      /* A 30px la palabra pintada caía por debajo de los 14.5px de los enlaces
         vecinos y la pieza parecía un sello, no un enlace. */
      height: 34px;
      width: auto;
      display: block;
      transition: transform 0.18s ease, filter 0.18s ease;
    }
    .nav-store-pill:hover img {
      transform: translateY(-1px);
      filter: drop-shadow(0 3px 10px rgba(93, 195, 51, 0.45));
    }
    .nav-links a::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0%;
      height: 2px;
      background: var(--neon-green);
      border-radius: 2px;
      transition: width 0.2s ease;
    }
    .nav-links a:hover,
    .nav-links a.active {
      color: #fff;
    }
    .nav-links a.active::after,
    .nav-links a:hover::after {
      width: 100%;
    }

    /* Animated Language Switcher Capsule & Text Pop Animations */
    .lang-switcher-wrap {
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-glass);
      border-radius: 12px;
      padding: 3px;
      gap: 2px;
      position: relative;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    }
    .lang-switcher-btn {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-secondary);
      font-size: 11.5px;
      font-weight: 700;
      padding: 5px 9px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      letter-spacing: 0.03em;
    }
    .lang-switcher-btn:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.06);
    }
    .lang-switcher-btn.active {
      background: rgba(75, 169, 40, 0.22) !important;
      color: var(--neon-bright) !important;
      border-color: rgba(93, 195, 51, 0.45) !important;
      box-shadow: 0 0 14px rgba(75, 169, 40, 0.35) !important;
      transform: scale(1.05);
    }

    /* Price Number Flip Animation */
    @keyframes priceNumberFlip {
      0% {
        transform: translateY(-8px) scale(0.92);
        opacity: 0.2;
        filter: blur(4px);
      }
      50% {
        transform: translateY(2px) scale(1.04);
        opacity: 0.95;
        filter: blur(0px);
      }
      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
        filter: blur(0px);
      }
    }
    .price-animating {
      animation: priceNumberFlip 0.38s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }
    .btn-header-ghost {
      padding: 9px 18px;
      font-size: 14px;
    }
    .btn-header-neon {
      padding: 9px 20px;
      font-size: 14px;
    }

    /* Hero Section with Cinematic Background & Fluid Liquid Idle Loop */
    .hero-section {
      position: relative;
      min-height: 88vh;
      display: flex;
      align-items: center;
      padding: 80px 0 95px;
      background-color: #040705;
      overflow: hidden;
    }

    .hero-section::before {
      content: "";
      position: absolute;
      inset: -20px;
      background: #040705 url('../assets/hero-green.jpg') no-repeat center top / cover;
      opacity: 0;
      transform: scale(1.08) translateY(-10px);
      animation: heroBgCinematicReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
      pointer-events: none;
      z-index: 0;
    }

    /* La entrada del fondo. Corre una sola vez, pero justo durante la carga, que es
       cuando el navegador está más ocupado: desenfocar y aclarar una capa del tamaño
       de la ventana durante 1,4 s competía con el primer dibujado. Queda el mismo
       acercamiento con desvanecido, que es composición pura. */
    @keyframes heroBgCinematicReveal {
      0% {
        opacity: 0;
        transform: scale(1.12) translateY(-15px);
      }
      40% {
        opacity: 0.85;
      }
      100% {
        opacity: 1;
        transform: scale(1.02) translateY(0);
      }
    }

    /* El vaivén de fondo del hero.
       Antes cada fotograma cambiaba también `filter` (brightness, contrast, saturate y
       hue-rotate) sobre una capa del tamaño de la ventana: eso obliga al navegador a
       rehacer el filtro entero 60 veces por segundo y de forma indefinida, y era la
       causa de que el inicio se sintiera trabado justo arriba y se soltara al bajar.
       El movimiento queda igual; sólo se anima `transform`, que la GPU compone sin
       repintar. Si algún día se quiere volver al latido de color, tiene que ser una
       transición corta y puntual, nunca un bucle infinito a pantalla completa. */
    @keyframes heroLiquidIdleWave {
      0% {
        transform: scale(1.02) translate(0px, 0px) rotate(0deg);
      }
      25% {
        transform: scale(1.06) translate(14px, -10px) rotate(0.8deg);
      }
      50% {
        transform: scale(1.03) translate(-10px, 12px) rotate(-0.5deg);
      }
      75% {
        transform: scale(1.07) translate(12px, 8px) rotate(0.6deg);
      }
      100% {
        transform: scale(1.04) translate(-14px, -8px) rotate(-0.7deg);
      }
    }

    .hero-liquid-glow {
      position: absolute;
      top: -10%;
      right: -5%;
      width: 55vw;
      height: 55vw;
      background: radial-gradient(circle at 60% 40%, rgba(75, 169, 40, 0.16) 0%, rgba(93, 195, 51, 0.05) 45%, transparent 70%);
      pointer-events: none;
      z-index: 1;
      transform: translate3d(0,0,0);
      animation: heroLiquidGlowPulse 16s ease-in-out infinite alternate;
    }

    .hero-neon-ribbon {
      position: absolute;
      right: -18vw;
      bottom: 4%;
      width: min(920px, 62vw);
      height: auto;
      opacity: 0.34;
      transform: rotate(-9deg);
      pointer-events: none;
      z-index: 1;
      mix-blend-mode: screen;
      animation: heroRibbonDrift 20s ease-in-out infinite alternate;
    }

    @keyframes heroRibbonDrift {
      0% {
        transform: translate3d(0, 0, 0) rotate(-9deg) scale(1);
      }
      100% {
        transform: translate3d(-26px, -18px, 0) rotate(-6deg) scale(1.04);
      }
    }

    @keyframes heroLiquidGlowPulse {
      0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.7;
      }
      50% {
        transform: translate3d(-20px, 15px, 0) scale(1.08);
        opacity: 0.9;
      }
      100% {
        transform: translate3d(15px, -10px, 0) scale(0.95);
        opacity: 0.75;
      }
    }

    /* El halo que sigue al puntero.
       Antes era una capa del tamaño de la ventana con el degradado dibujado en la
       posición del ratón: mover el ratón obligaba a repintar toda esa superficie en
       cada cuadro. Ahora es un círculo de tamaño fijo que se mueve con `transform`,
       que la GPU compone sin repintar nada. Se ve igual. */
    .hero-spotlight {
      position: absolute;
      top: 0;
      left: 0;
      width: 900px;
      height: 900px;
      margin-left: -450px;
      margin-top: -450px;
      pointer-events: none;
      z-index: 1;
      background: radial-gradient(circle 450px at center, rgba(75, 169, 40, 0.14) 0%, transparent 80%);
      transform: translate3d(50vw, 40vh, 0);
      will-change: transform;
      transition: opacity 0.3s ease;
    }

    .hero-backdrop-overlay {
      position: absolute;
      inset: 0;
      background: 
        linear-gradient(180deg, rgba(4, 7, 5, 0.65) 0%, rgba(4, 7, 5, 0.88) 55%, #040705 100%),
        radial-gradient(ellipse at 50% 15%, transparent 0%, rgba(4, 7, 5, 0.75) 65%, #040705 100%);
      pointer-events: none;
      z-index: 1;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 48px;
      align-items: center;
      position: relative;
      z-index: 2;
      width: 100%;
      min-width: 0;
    }

    .hero-grid > * {
      min-width: 0;
    }

    .hero-title {
      font-size: 58px;
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -0.035em;
      margin-bottom: 22px;
      color: #fff;
    }
    .hero-title .gradient-text {
      background: linear-gradient(135deg, #ffffff 15%, var(--neon-bright) 65%, #16b83e 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline;
    }

    .hero-desc {
      font-size: 18px;
      line-height: 1.65;
      color: var(--text-secondary);
      max-width: 48ch;
      margin-bottom: 34px;
    }

    .hero-actions {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-width: 460px;
    }
    .hero-btn-group {
      display: flex;
      gap: 14px;
    }

    .btn-hero-primary {
      padding: 16px 32px;
      font-size: 16px;
      white-space: nowrap;
    }

    .btn-hero-pro {
      padding: 16px 26px;
      font-size: 16px;
      white-space: nowrap;
    }

    .hero-terminal-pill {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: rgba(8, 15, 11, 0.95);
      border: 1px solid rgba(75, 169, 40, 0.25);
      border-radius: 12px;
      padding: 10px 16px;
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--text-secondary);
    }
    .hero-terminal-pill code {
      color: var(--neon-bright);
      overflow-x: auto;
      white-space: nowrap;
    }
    .btn-copy-inline {
      background: rgba(75, 169, 40, 0.12);
      border: 1px solid rgba(75, 169, 40, 0.3);
      color: var(--neon-bright);
      padding: 5px 12px;
      border-radius: 7px;
      font-size: 12px;
      font-family: var(--font-mono);
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.15s ease;
    }
    .btn-copy-inline:hover {
      background: var(--neon-green);
      color: #021206;
      transform: scale(1.04);
    }
    .btn-copy-inline.copied {
      background: var(--neon-green) !important;
      color: #021206 !important;
      transform: scale(0.96);
    }

    .hero-mockup-3d-wrap {
      perspective: 1200px;
      transform-style: preserve-3d;
    }
    .hero-mockup-card {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      background: #08100c;
      border: 1px solid rgba(75, 169, 40, 0.35);
      box-shadow: 
        0 30px 90px rgba(0, 0, 0, 0.85),
        0 0 50px rgba(75, 169, 40, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.2s ease;
    }
    .hero-mockup-card picture,
    .hero-mockup-card img {
      width: 100%;
      height: auto;
      display: block;
    }

    .keyboard-shortcut-hint {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12.5px;
      color: var(--text-muted);
      margin-top: 4px;
    }
    .key-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 7px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.15);
      font-family: var(--font-mono);
      font-size: 11px;
      color: #fff;
      font-weight: 700;
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
    }

    /* High-Tech Dark Wave Toast Notification (From Uiverse.io by akshat-patel28 adapted for Screezy) */
    .screezy-toast-card,
    #toast-notification {
      position: fixed;
      bottom: 28px;
      right: 28px;
      width: 350px;
      max-width: calc(100vw - 32px);
      min-height: 76px;
      border-radius: 14px;
      box-sizing: border-box;
      padding: 10px 14px;
      background: rgba(7, 18, 10, 0.94);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(75, 169, 40, 0.35);
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.85), 0 0 25px rgba(75, 169, 40, 0.22);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      z-index: 100000;
      opacity: 0;
      pointer-events: none;
      transform: translateY(20px) scale(0.95);
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .screezy-toast-card.show,
    #toast-notification.show {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .screezy-toast-card .wave,
    #toast-notification .wave {
      position: absolute;
      transform: rotate(90deg);
      left: -31px;
      top: 32px;
      width: 84px;
      fill: rgba(75, 169, 40, 0.2);
      pointer-events: none;
      z-index: 0;
    }
    .screezy-toast-card .icon-container,
    #toast-notification .icon-container {
      width: 36px;
      height: 36px;
      min-width: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(93, 195, 51, 0.16);
      border: 1px solid rgba(93, 195, 51, 0.35);
      border-radius: 50%;
      margin-left: 4px;
      position: relative;
      z-index: 1;
      box-shadow: 0 0 14px rgba(93, 195, 51, 0.22);
    }
    .screezy-toast-card .icon,
    #toast-notification .icon {
      width: 18px;
      height: 18px;
      color: #5dc333;
      flex-shrink: 0;
    }
    .screezy-toast-card .message-text-container,
    #toast-notification .message-text-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      flex-grow: 1;
      position: relative;
      z-index: 1;
      min-width: 0;
      padding-right: 4px;
    }
    .screezy-toast-card .message-text,
    #toast-notification .message-text {
      margin: 0;
      cursor: default;
      color: #f2fef5;
      font-size: 14.5px;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.3;
    }
    .screezy-toast-card .sub-text,
    #toast-notification .sub-text {
      margin: 2px 0 0;
      font-size: 12px;
      color: #9cbca7;
      line-height: 1.35;
      cursor: default;
    }
    .screezy-toast-card .cross-icon,
    #toast-notification .cross-icon {
      width: 18px;
      height: 18px;
      min-width: 18px;
      color: #627e6c;
      cursor: pointer;
      position: relative;
      z-index: 1;
      transition: color 0.15s ease, transform 0.15s ease;
      margin-right: 4px;
    }
    .screezy-toast-card .cross-icon:hover,
    #toast-notification .cross-icon:hover {
      color: #ffffff;
      transform: scale(1.15);
    }

    /* Social Proof Bar */
    .social-proof-section {
      position: relative;
      z-index: 100;
      overflow: visible;
      padding: 38px 0 44px;
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
      background: #060b08;
    }
    .social-proof-section .container {
      position: relative;
      overflow: visible;
    }
    .social-proof-title {
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 20px;
    }
    .logos-ticker {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
    }
    .ticker-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-mono);
      font-size: 14px;
      font-weight: 600;
      color: var(--text-secondary);
      padding: 6px 14px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }
    .ticker-item svg {
      stroke: var(--neon-green);
    }

    /* Features Bento Grid */
    .features-section {
      padding: 96px 0;
      position: relative;
    }
    .section-header-center {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 60px;
      position: relative;
    }

    /* ==========================================================================
       Cinematic Dark Mode Floating Cursor
       ========================================================================== */
    .cinematic-cursor-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      pointer-events: none;
      user-select: none;
      z-index: 25;
    }

    .cinematic-cursor-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 52px;
      height: 52px;
      margin-top: -6px;
      margin-left: -6px;
      will-change: transform;
      transform-origin: 6px 4px;
      pointer-events: none;
      filter: drop-shadow(0 26px 38px rgba(0, 0, 0, 0.95))
              drop-shadow(0 10px 18px rgba(0, 0, 0, 0.75))
              drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
    }

    .cinematic-cursor-svg {
      width: 100%;
      height: 100%;
      display: block;
      will-change: filter;
    }

    @media (max-width: 768px) {
      .cinematic-cursor-wrapper {
        transform: scale(0.68);
      }
    }

    @media (max-width: 480px) {
      .cinematic-cursor-wrapper {
        transform: scale(0.55);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .cinematic-cursor-wrapper {
        display: none;
      }
    }

    /* ==========================================================================
       Cursor Click Presets & Animations
       ========================================================================== */
    /* STREAMING_CHUNK:Defining CSS Keyframes for Studio Micro-Hold... */
    /*
    Efecto 7: Studio Micro-Hold (#1 Studio + #4 Soft Ease + #7 Hold)

    Duración total: 400ms (0.40s)

    Curva Easing: cubic-bezier(0.28, 1, 0.38, 1)

    Secuencia: 1.0 → 0.78 (Hold 48ms) → 1.04 → 1.0
    */

    @keyframes clickStudioMicroHold {
      0% {
        transform: scale(1);
      }
      /* Compresión rápida hasta el 78% */
      28% {
        transform: scale(0.78);
      }
      /* Retención táctil (Micro-Hold en la base) */
      40% {
        transform: scale(0.78);
      }
      /* Rebote orgánico con sobreimpulso (+4%) */
      75% {
        transform: scale(1.04);
      }
      /* Retorno al tamaño original */
      100% {
        transform: scale(1);
      }
    }

    /* STREAMING_CHUNK:Creating animation trigger class... */
    /* Clase que aplicas al elemento del puntero o contenedor del cursor */
    .click-studio-micro-hold {
      animation: clickStudioMicroHold 0.40s cubic-bezier(0.28, 1, 0.38, 1);
    }

    .section-eyebrow {
      font-family: var(--font-mono);
      font-size: 12.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--neon-bright);
      margin-bottom: 12px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .section-title {
      font-size: 42px;
      font-weight: 800;
      margin-bottom: 16px;
      color: #fff;
      letter-spacing: -0.03em;
    }
    .section-subtitle {
      font-size: 17.5px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      perspective: 1000px;
    }

    .feature-card {
      background: var(--bg-card);
      border: 1px solid var(--border-glass);
      border-radius: 22px;
      padding: 34px 30px;
      position: relative;
      overflow: hidden;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease;
      opacity: 1;
      transform: translateY(0);
    }
    .feature-card.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* Bento Card Spotlight */
    .feature-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 22px;
      padding: 1px;
      background: radial-gradient(
        260px circle at var(--card-mouse-x, 50%) var(--card-mouse-y, 50%),
        rgba(75, 169, 40, 0.6) 0%,
        rgba(75, 169, 40, 0.15) 35%,
        transparent 70%
      );
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      -webkit-mask-composite: xor;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .feature-card:hover::before {
      opacity: 1;
    }

    .feature-card:hover {
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(75, 169, 40, 0.18);
      background: var(--bg-card-hover);
    }

    .feature-icon-box {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      background: rgba(75, 169, 40, 0.12);
      border: 1px solid var(--border-glass);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 22px;
      color: var(--neon-bright);
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    }
    .feature-card:hover .feature-icon-box {
      transform: scale(1.12) rotate(-5deg);
      background: rgba(75, 169, 40, 0.22);
      color: #fff;
    }

    .feature-card-num {
      position: absolute;
      top: 30px;
      right: 30px;
      font-family: var(--font-mono);
      font-size: 15px;
      font-weight: 800;
      color: var(--text-subtle);
      transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
    }
    .feature-card:hover .feature-card-num {
      color: var(--neon-bright);
      text-shadow: 0 0 15px rgba(75, 169, 40, 0.6);
      transform: scale(1.1);
    }

    .feature-card-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #fff;
    }
    .feature-card-desc {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .feature-card-tags {
      display: flex;
      gap: 8px;
      margin-top: 20px;
      flex-wrap: wrap;
    }
    .feature-tag {
      font-family: var(--font-mono);
      font-size: 11.5px;
      color: var(--neon-bright);
      background: rgba(75, 169, 40, 0.08);
      border: 1px solid rgba(75, 169, 40, 0.22);
      padding: 4px 10px;
      border-radius: 6px;
      transition: all 0.2s ease;
      cursor: default;
    }
    .feature-tag:hover {
      background: rgba(75, 169, 40, 0.2);
      border-color: var(--neon-bright);
      color: #fff;
      transform: translateY(-2px);
    }

    /* Mesh Palette Dots & Card 05 Background */
    #card-feature-5 {
      background: var(--card-mesh-bg, radial-gradient(circle at 80% 0%, rgba(75, 169, 40, 0.25) 0%, transparent 60%)), var(--bg-card);
      transition: background 0.4s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
    }
    #card-feature-5:hover {
      background: var(--card-mesh-bg, radial-gradient(circle at 80% 0%, rgba(75, 169, 40, 0.35) 0%, transparent 60%)), var(--bg-card-hover);
    }
    .mesh-palette-dots {
      display: flex;
      gap: 10px;
      margin-top: 18px;
      align-items: center;
      background: rgba(6, 12, 8, 0.7);
      border: 1px solid rgba(75, 169, 40, 0.2);
      border-radius: 8px;
      padding: 6px 12px;
      width: fit-content;
      transition: all 0.25s ease;
    }
    .feature-card:hover .mesh-palette-dots {
      border-color: rgba(75, 169, 40, 0.55);
      background: rgba(8, 18, 11, 0.95);
      box-shadow: 0 0 15px rgba(75, 169, 40, 0.2);
      transform: translateY(-2px);
    }
    .mesh-dot {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      position: relative;
      z-index: 5;
    }
    .mesh-dot:hover, .mesh-dot.active {
      transform: scale(1.3);
      border-color: #fff;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
    }
    .mesh-dot-1 { background: linear-gradient(135deg, #4ba928, #0d5a0a); }
    .mesh-dot-2 { background: linear-gradient(135deg, #f5fe5a, #4ba928); }
    .mesh-dot-3 { background: linear-gradient(135deg, #5dc333, #083307); }
    .mesh-dot-4 { background: linear-gradient(135deg, #f5fe5a, #0d5a0a); }

    /* ==========================================================================
       Master Feature Showcases ("El Mostrador de Features")
       ========================================================================== */
    .features-showcase-deck {
      display: flex;
      flex-direction: column;
      gap: 56px;
      margin-top: 48px;
    }
    .feature-showcase-item {
      display: grid;
      grid-template-columns: 1fr 1.15fr;
      gap: 44px;
      align-items: center;
      background: linear-gradient(135deg, rgba(8, 18, 11, 0.7) 0%, rgba(3, 7, 4, 0.85) 100%);
      border: 1px solid rgba(75, 169, 40, 0.22);
      border-radius: 28px;
      padding: 42px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .feature-showcase-item:hover {
      border-color: rgba(75, 169, 40, 0.45);
      box-shadow: 0 35px 90px rgba(0, 0, 0, 0.75), 0 0 35px rgba(75, 169, 40, 0.12);
    }
    .feature-showcase-item.reverse {
      grid-template-columns: 1.15fr 1fr;
    }
    .feature-showcase-item.reverse .showcase-info-col {
      order: 2;
    }
    .feature-showcase-item.reverse .showcase-stage-col {
      order: 1;
    }
    @media (max-width: 992px) {
      .feature-showcase-item,
      .feature-showcase-item.reverse {
        grid-template-columns: 1fr;
        padding: 28px 20px;
        gap: 30px;
      }
      .feature-showcase-item.reverse .showcase-info-col {
        order: 1;
      }
      .feature-showcase-item.reverse .showcase-stage-col {
        order: 2;
      }
    }

    .showcase-info-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .showcase-eyebrow-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      color: var(--neon-bright);
      background: rgba(75, 169, 40, 0.12);
      border: 1px solid rgba(75, 169, 40, 0.3);
      padding: 4px 12px;
      border-radius: 100px;
      width: fit-content;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .showcase-heading {
      font-size: clamp(23px, 2.8vw, 30px);
      font-weight: 800;
      color: #ffffff;
      line-height: 1.25;
      letter-spacing: -0.02em;
    }
    .showcase-body {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.65;
    }
    .showcase-controls-panel {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
      padding: 12px 14px;
      background: rgba(3, 7, 4, 0.8);
      border: 1px solid rgba(75, 169, 40, 0.2);
      border-radius: 12px;
    }
    .showcase-ctrl-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text-secondary);
      font-size: 11.5px;
      font-weight: 700;
      padding: 5px 11px;
      border-radius: 7px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: var(--font-mono);
    }
    .showcase-ctrl-btn:hover {
      background: rgba(75, 169, 40, 0.15);
      border-color: rgba(75, 169, 40, 0.35);
      color: #fff;
    }
    .showcase-ctrl-btn.active {
      background: rgba(75, 169, 40, 0.25);
      border-color: var(--neon-bright);
      color: var(--neon-bright);
      box-shadow: 0 0 12px rgba(75, 169, 40, 0.3);
    }
    .showcase-stage-col {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      background: #030804;
      border: 1px solid rgba(75, 169, 40, 0.25);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      aspect-ratio: 16 / 10;
      min-height: 280px;
    }

    .showcase-stage-col::before {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(168, 255, 40, 0.16);
      border-radius: 15px;
      pointer-events: none;
      z-index: 2;
      box-shadow: inset 0 0 20px rgba(75, 169, 40, 0.08);
    }

    .capture-widget-showcase {
      isolation: isolate;
      position: relative;
      overflow: hidden;
    }

    .capture-widget-flourish {
      position: absolute;
      right: -86px;
      top: 50%;
      width: 210px;
      height: auto;
      opacity: 0.16;
      transform: translateY(-50%) rotate(6deg);
      pointer-events: none;
      z-index: -1;
      mix-blend-mode: screen;
    }

    /* Live Webcam Stage & Auto-Dodge Simulator */
    .webcam-stage-viewport {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: linear-gradient(135deg, #051408 0%, #020703 100%);
      display: flex;
      flex-direction: column;
    }
    .webcam-mock-screen-content {
      position: relative;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    /* Escritorio grabado: va a sangre para que la burbuja de cámara se lea
       encima de una pantalla real y no de un bloque de código. */
    .webcam-mock-desktop {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }
    /* Vela el escritorio lo justo para que el cursor blanco y la burbuja no se
       pierdan entre los verdes de la imagen. */
    .webcam-mock-screen-content::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, rgba(2, 7, 3, 0.30) 0%, rgba(2, 7, 3, 0.62) 100%);
      pointer-events: none;
    }
    .mock-editor-lines {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 11px;
      color: #7da588;
    }
    .mock-editor-lines .line-hl {
      color: #ffffff;
      background: rgba(75, 169, 40, 0.15);
      padding: 2px 6px;
      border-radius: 4px;
      border-left: 2px solid var(--neon-bright);
    }
    .webcam-dodge-bubble {
      position: absolute;
      bottom: 18px;
      left: 18px;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      overflow: hidden;
      background: #091a0c;
      border: 2.5px solid var(--neon-bright);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.85), 0 0 25px rgba(93, 195, 51, 0.4);
      z-index: 10;
      transform: translate3d(0, 0, 0);
      transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                  border-radius 0.3s ease,
                  border-color 0.3s ease,
                  box-shadow 0.3s ease;
      user-select: none;
    }
    .webcam-dodge-bubble.dodged-right {
      transform: translate3d(225px, 0, 0) scale(1.02);
    }
    .webcam-dodge-bubble.dodged-top-right {
      transform: translate3d(225px, -110px, 0) scale(1.02);
    }
    .webcam-dodge-bubble.dodged-top-left {
      transform: translate3d(0, -110px, 0) scale(1.02);
    }
    .webcam-dodge-bubble.squircle {
      border-radius: 20px;
    }
    .webcam-dodge-bubble.no-glow {
      border-color: rgba(255, 255, 255, 0.3);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.85);
    }
    .webcam-avatar-media {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: #000;
    }
    .webcam-avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .webcam-mic-ring {
      position: absolute;
      inset: -4px;
      border: 1.5px solid rgba(93, 195, 51, 0.7);
      border-radius: inherit;
      animation: micPulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
      pointer-events: none;
    }
    @keyframes micPulse {
      0% { transform: scale(1); opacity: 0.8; }
      100% { transform: scale(1.18); opacity: 0; }
    }
    .webcam-centerstage-badge {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 7.5px;
      font-weight: 800;
      text-transform: uppercase;
      background: rgba(3, 7, 4, 0.85);
      color: var(--neon-bright);
      padding: 1px 5px;
      border-radius: 4px;
      border: 1px solid rgba(75, 169, 40, 0.4);
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 3px;
    }
    .badge-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--neon-bright);
      box-shadow: 0 0 6px var(--neon-bright);
    }
    .webcam-dodge-cursor {
      position: absolute;
      top: 0;
      left: 0;
      width: 26px;
      height: 26px;
      pointer-events: none;
      z-index: 20;
      transition: transform 0.05s linear;
      will-change: transform;
      backface-visibility: hidden;
      transform: translateZ(0);
    }
    .webcam-dodge-bubble {
      will-change: transform;
      backface-visibility: hidden;
    }
    .zoom-canvas {
      will-change: transform;
      backface-visibility: hidden;
      transform: translateZ(0);
    }
    .webcam-action-target {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 8px;
      border-radius: 5px;
      background: rgba(75, 169, 40, 0.15);
      border: 1px solid rgba(75, 169, 40, 0.35);
      color: #fff;
      font-size: 11px;
      font-family: var(--font-mono);
      transition: all 0.2s ease;
    }
    /* Anclado sobre el escritorio, no en el flujo del texto. La esquina inferior
       izquierda no es decorativa: initWebcamDodgeEngine dispara el esquive con
       el puntero en y>105 / x<165, y la burbuja lo tapa hasta que se corre. */
    #webcam-target-line {
      position: absolute;
      left: 22px;
      bottom: 52px;
      z-index: 5;
      background: rgba(7, 22, 10, 0.82);
      border-color: rgba(93, 195, 51, 0.55);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
    }
    .webcam-action-target.clicked {
      background: var(--neon-bright);
      color: #020904;
      font-weight: 800;
      box-shadow: 0 0 15px rgba(93, 195, 51, 0.6);
      transform: scale(0.96);
    }

    /* Auto-Zoom Showcase Interactive Target */
    .zoom-code-action-box {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 8px;
      background: rgba(75, 169, 40, 0.15);
      border: 1px solid rgba(75, 169, 40, 0.4);
      color: #ffffff;
      font-weight: 700;
      font-family: var(--font-mono);
      transition: all 0.25s ease;
      cursor: pointer;
    }
    .zoom-code-action-box.clicked {
      background: var(--neon-bright);
      color: #020904;
      box-shadow: 0 0 20px rgba(93, 195, 51, 0.7);
      transform: scale(0.96);
    }
    .zoom-code-action-box.clicked svg {
      color: #020904 !important;
    }

    /* Live Dynamic Karaoke Subtitles */
    .live-karaoke-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 12px;
      max-width: 90%;
      text-align: center;
      transition: all 0.3s ease;
      will-change: transform;
      transform: translateZ(0);
    }
    .live-k-word {
      font-size: 16px;
      font-weight: 800;
      font-family: var(--font-display);
      padding: 2px 6px;
      border-radius: 6px;
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      opacity: 0.45;
      color: #ffffff;
    }
    .live-k-word.active {
      opacity: 1;
      transform: scale(1.12);
    }

    /* Style 1: Resaltado Neón */
    .live-karaoke-bar.style-neon {
      background: rgba(3, 7, 4, 0.85);
      border: 1px solid rgba(75, 169, 40, 0.3);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    }
    .live-karaoke-bar.style-neon .live-k-word.active {
      color: var(--neon-bright);
      text-shadow: 0 0 14px rgba(93, 195, 51, 0.6);
    }

    /* Style 2: Píldora Flotante */
    .live-karaoke-bar.style-pill {
      background: transparent;
    }
    .live-karaoke-bar.style-pill .live-k-word {
      background: rgba(0, 0, 0, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 100px;
      padding: 3px 10px;
    }
    .live-karaoke-bar.style-pill .live-k-word.active {
      background: var(--neon-bright);
      color: #020904;
      border-color: var(--neon-bright);
      box-shadow: 0 0 18px rgba(93, 195, 51, 0.6);
    }

    /* Style 3: Clásico Minimal */
    .live-karaoke-bar.style-minimal {
      background: rgba(0, 0, 0, 0.75);
      border-radius: 6px;
    }
    .live-karaoke-bar.style-minimal .live-k-word.active {
      color: #ffffff;
      border-bottom: 2px solid var(--neon-bright);
      border-radius: 0;
    }

    /* Live Equalizer Spectrum Animation (100% GPU Transform) */
    .live-eq-spectrum {
      display: flex;
      align-items: center;
      gap: 3.5px;
      height: 16px;
    }
    .eq-col {
      width: 3px;
      height: 14px;
      background: var(--neon-bright);
      border-radius: 2px;
      transform-origin: bottom;
      animation: eqScaleY 0.75s ease-in-out infinite alternate;
      will-change: transform;
      transform: translateZ(0);
    }
    .eq-col:nth-child(1) { animation-delay: 0.05s; }
    .eq-col:nth-child(2) { animation-delay: 0.25s; }
    .eq-col:nth-child(3) { animation-delay: 0.45s; }
    .eq-col:nth-child(4) { animation-delay: 0.15s; }
    .eq-col:nth-child(5) { animation-delay: 0.35s; }
    .eq-col:nth-child(6) { animation-delay: 0.55s; }
    @keyframes eqScaleY {
      0% { transform: scaleY(0.25); opacity: 0.4; }
      100% { transform: scaleY(1.0); opacity: 1; }
    }

    /* Card 6 Export Progress */
    .export-progress-track {
      width: 50px;
      height: 5px;
      background: rgba(255, 255, 255, 0.15);
      border-radius: 3px;
      overflow: hidden;
    }
    .export-progress-bar {
      width: 100%;
      height: 100%;
      background: var(--neon-bright);
      border-radius: 3px;
      transform: translateX(-100%);
      animation: exportFill 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    }
    @keyframes exportFill {
      0% { transform: translateX(-100%); }
      50%, 100% { transform: translateX(0); }
    }

    /* Aceternity UI — Expandable Feature Card Modal */
    .feature-card {
      cursor: pointer;
    }
    .feature-expand-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 18px;
      font-size: 13px;
      font-weight: 700;
      color: var(--neon-bright);
      transition: gap 0.15s ease, color 0.15s ease;
    }
    .feature-card:hover .feature-expand-link {
      color: #fff;
      gap: 10px;
    }

    #feature-expand-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(3, 7, 4, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    #feature-expand-modal.open {
      opacity: 1;
      pointer-events: auto;
    }
    .expand-card-modal-content {
      background: var(--bg-card);
      border: 1.5px solid var(--border-glass);
      border-radius: 24px;
      width: 100%;
      max-width: 580px;
      max-height: 90vh;
      overflow-y: auto;
      padding: 36px 36px 32px;
      position: relative;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(75, 169, 40, 0.15);
      transform: scale(0.92) translateY(12px);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #feature-expand-modal.open .expand-card-modal-content {
      transform: scale(1) translateY(0);
    }
    .expand-modal-close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .expand-modal-close-btn:hover {
      background: rgba(255, 255, 255, 0.18);
      color: #fff;
      transform: rotate(90deg);
    }
    .expand-modal-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
    }
    .expand-modal-icon {
      width: 56px;
      height: 56px;
      border-radius: 14px;
      background: rgba(75, 169, 40, 0.15);
      border: 1px solid var(--border-glass);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--neon-bright);
      flex-shrink: 0;
    }
    .expand-modal-badge {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--neon-bright);
      background: rgba(75, 169, 40, 0.12);
      border: 1px solid rgba(75, 169, 40, 0.3);
      padding: 3px 8px;
      border-radius: 6px;
      margin-bottom: 4px;
    }
    .expand-modal-title {
      font-size: 22px;
      font-weight: 800;
      color: #fff;
      line-height: 1.25;
    }
    .expand-modal-body {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.65;
    }
    .expand-modal-body p {
      margin-bottom: 14px;
    }
    .expand-modal-highlight-box {
      background: #040905;
      border: 1px solid var(--border-subtle);
      border-radius: 14px;
      padding: 18px 20px;
      margin: 18px 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .expand-highlight-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 13.5px;
    }
    .expand-highlight-row svg {
      color: var(--neon-bright);
      flex-shrink: 0;
      margin-top: 3px;
    }
    .expand-highlight-row strong {
      color: #fff;
    }
    .expand-modal-actions {
      display: flex;
      gap: 12px;
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid var(--border-subtle);
      flex-wrap: wrap;
    }

    /* Interactive Metal 3 Studio Section */
    .interactive-showcase-section {
      padding: 100px 0;
      position: relative;
      background: #060c09;
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
    }
    .showcase-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 52px;
      align-items: center;
    }

    .showcase-nav-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 32px;
    }
    .showcase-tab-item {
      display: flex;
      gap: 18px;
      padding: 18px 22px;
      border-radius: 16px;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
      text-align: left;
    }
    .showcase-tab-item:hover {
      background: var(--bg-card-hover);
      border-color: rgba(75, 169, 40, 0.3);
      transform: translateX(4px);
    }
    .showcase-tab-item.active {
      background: #0e2216;
      border-color: var(--neon-bright);
      box-shadow: 0 0 25px rgba(75, 169, 40, 0.2);
    }
    .showcase-tab-icon {
      flex: none;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(75, 169, 40, 0.12);
      border: 1px solid rgba(75, 169, 40, 0.28);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--neon-bright);
      margin-top: 2px;
    }
    .showcase-tab-title {
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px;
    }
    .showcase-tab-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .showcase-display {
      position: relative;
    }
    .showcase-ambient-glow {
      position: absolute;
      inset: -20px;
      background: radial-gradient(circle at 50% 50%, rgba(75, 169, 40, 0.22) 0%, transparent 70%);
      filter: blur(40px);
      z-index: 0;
      pointer-events: none;
      transition: background 0.4s ease;
    }

    .showcase-display-window {
      position: relative;
      z-index: 1;
      background: #08100c;
      border: 1px solid rgba(75, 169, 40, 0.35);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(75, 169, 40, 0.2);
    }

    .showcase-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 18px;
      background: #0a140e;
      border-bottom: 1px solid rgba(75, 169, 40, 0.15);
    }
    .mac-window-dots {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .mac-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 900;
      color: rgba(0,0,0,0.6);
      transition: filter 0.15s ease;
    }
    .mac-dot.dot-close { background: #ff5f56; }
    .mac-dot.dot-min { background: #ffbd2e; }
    .mac-dot.dot-max { background: #27c93f; }
    .mac-window-dots:hover .mac-dot.dot-close::before { content: "x"; }
    .mac-window-dots:hover .mac-dot.dot-min::before { content: "-"; }
    .mac-window-dots:hover .mac-dot.dot-max::before { content: "+"; }

    .telemetry-badges-bar {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .telem-chip {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 5px;
      background: rgba(75, 169, 40, 0.1);
      border: 1px solid rgba(75, 169, 40, 0.25);
      color: var(--neon-bright);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    /* ==========================================================================
       Interactive Studio Playground (3 Live Feature Stages)
       ========================================================================== */
    .interactive-showcase-section {
      padding: 100px 0;
      position: relative;
      background: #060c09;
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
    }
    .showcase-grid {
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      gap: 52px;
      align-items: center;
    }
    .showcase-nav-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 32px;
    }
    .showcase-tab-item {
      display: flex;
      gap: 18px;
      padding: 18px 22px;
      border-radius: 16px;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
      text-align: left;
    }
    .showcase-tab-item:hover {
      background: var(--bg-card-hover);
      border-color: rgba(75, 169, 40, 0.3);
      transform: translateX(4px);
    }
    .showcase-tab-item.active {
      background: #0e2216;
      border-color: var(--neon-bright);
      box-shadow: 0 0 25px rgba(75, 169, 40, 0.2);
    }
    .showcase-tab-icon {
      flex: none;
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(75, 169, 40, 0.12);
      border: 1px solid rgba(75, 169, 40, 0.28);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--neon-bright);
      margin-top: 2px;
    }
    .showcase-tab-title {
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 4px;
    }
    .showcase-tab-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .showcase-display {
      position: relative;
    }
    .showcase-ambient-glow {
      position: absolute;
      inset: -20px;
      background: radial-gradient(circle at 50% 50%, rgba(75, 169, 40, 0.22) 0%, transparent 70%);
      filter: blur(40px);
      z-index: 0;
      pointer-events: none;
      transition: background 0.4s ease;
    }
    .showcase-display-window {
      position: relative;
      z-index: 1;
      background: #08100c;
      border: 1px solid rgba(75, 169, 40, 0.35);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8), 0 0 40px rgba(75, 169, 40, 0.2);
    }
    .showcase-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      background: #0a140e;
      border-bottom: 1px solid rgba(75, 169, 40, 0.15);
    }
    .mac-window-dots {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .mac-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: inline-block;
    }
    .mac-dot.dot-close { background: #ff5f56; }
    .mac-dot.dot-min { background: #ffbd2e; }
    .mac-dot.dot-max { background: #27c93f; }

    .telemetry-badges-bar {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .telem-chip {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 5px;
      background: rgba(75, 169, 40, 0.1);
      border: 1px solid rgba(75, 169, 40, 0.25);
      color: var(--neon-bright);
    }

    /* Stage 1: Auto-Zoom Viewport */
    .studio-live-stage {
      min-height: 400px;
      display: flex;
      flex-direction: column;
      position: relative;
      background: #030804;
      overflow: hidden;
    }
    .zoom-viewport {
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
      cursor: crosshair;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at center, #0b1c0e 0%, #030804 80%);
    }
    .zoom-canvas {
      width: 100%;
      padding: 24px;
      transform-origin: center center;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
    }
    .demo-mac-app {
      background: #08140a;
      border: 1px solid var(--border-glass);
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    .demo-app-nav {
      display: flex;
      gap: 10px;
      margin-bottom: 18px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .demo-chip {
      font-size: 12px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      background: rgba(255, 255, 255, 0.04);
      padding: 4px 10px;
      border-radius: 6px;
    }
    .demo-app-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .demo-card-box {
      background: #040905;
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      padding: 16px;
      text-align: left;
    }
    .demo-action-btn {
      margin-top: 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--neon-bright);
      color: #020703;
      font-size: 12.5px;
      font-weight: 800;
      padding: 8px 14px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .demo-action-btn.secondary {
      background: rgba(75, 169, 40, 0.2);
      border: 1px solid var(--border-glass);
      color: var(--neon-bright);
    }
    .demo-action-btn:hover {
      transform: scale(1.05);
      background: #f5fe5a;
    }
    .zoom-target-reticle {
      position: absolute;
      width: 40px;
      height: 40px;
      border: 2px dashed var(--neon-bright);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
      transition: transform 0.4s ease, opacity 0.4s ease;
      box-shadow: 0 0 20px var(--neon-bright);
    }
    .zoom-target-reticle.active {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    .zoom-hint-banner {
      position: absolute;
      bottom: 14px;
      background: rgba(4, 9, 5, 0.85);
      border: 1px solid var(--border-glass);
      border-radius: 9999px;
      padding: 5px 14px;
      font-size: 12px;
      color: var(--text-secondary);
      font-family: var(--font-mono);
      pointer-events: none;
    }

    /* Stage 2: Subtitles AI Karaoke Simulator */
    .subtitles-playground-box {
      padding: 24px;
      display: flex;
      flex-direction: column;
      height: 400px;
      justify-content: space-between;
      background: radial-gradient(circle at center, #091a0c 0%, #030804 90%);
    }
    .subtitles-style-selector {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(4, 9, 5, 0.85);
      border: 1px solid var(--border-subtle);
      padding: 6px 12px;
      border-radius: 10px;
      width: fit-content;
    }
    .sub-style-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid transparent;
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .sub-style-btn.active {
      background: rgba(75, 169, 40, 0.2);
      border-color: var(--neon-bright);
      color: var(--neon-bright);
    }
    .karaoke-screen-preview {
      position: relative;
      height: 250px;
      border-radius: 14px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border-glass);
      background: #000;
    }
    .karaoke-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.35;
      filter: blur(2px);
    }
    .karaoke-subtitles-bar {
      position: absolute;
      bottom: 28px;
      display: flex;
      gap: 8px;
      background: rgba(3, 7, 4, 0.85);
      border: 1px solid var(--border-glass);
      padding: 10px 18px;
      border-radius: 12px;
      backdrop-filter: blur(8px);
    }
    .karaoke-word {
      font-size: 16px;
      font-weight: 800;
      color: #64816e;
      transition: all 0.3s ease;
    }
    .karaoke-word.highlight {
      transform: scale(1.1);
    }
    .style-green .karaoke-word.highlight {
      color: var(--neon-bright);
      text-shadow: 0 0 12px rgba(93, 195, 51, 0.8);
    }
    .style-lime .karaoke-word.highlight {
      color: #f5fe5a;
      text-shadow: 0 0 12px rgba(245, 254, 90, 0.8);
    }
    .style-white .karaoke-word.highlight {
      color: #ffffff;
      text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
    }
    .subtitles-audio-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      color: var(--text-secondary);
      font-family: var(--font-mono);
    }
    .subtitles-audio-indicator svg {
      color: var(--neon-bright);
    }

    /* Stage 3: Social Canvas Aspect Ratios */
    .social-playground-box {
      padding: 24px;
      display: flex;
      flex-direction: column;
      height: 400px;
      justify-content: space-between;
      background: radial-gradient(circle at center, #0c1c0f 0%, #030804 90%);
    }
    .social-controls-bar {
      display: flex;
      justify-content: center;
    }
    .aspect-ratio-btn-group {
      display: flex;
      gap: 8px;
      background: rgba(4, 9, 5, 0.85);
      border: 1px solid var(--border-subtle);
      padding: 4px;
      border-radius: 10px;
    }
    .aspect-ratio-btn {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .aspect-ratio-btn.active {
      background: rgba(75, 169, 40, 0.2);
      border-color: var(--neon-bright);
      color: var(--neon-bright);
    }
    .social-canvas-backdrop {
      height: 250px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0d3810 0%, #030a04 100%);
      border: 1px solid var(--border-glass);
      transition: background 0.4s ease;
      overflow: hidden;
      padding: 16px;
    }
    .social-video-frame {
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
      border: 1px solid rgba(255, 255, 255, 0.15);
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      height: 100%;
    }
    .social-video-frame.aspect-16-9 {
      aspect-ratio: 16 / 9;
      width: auto;
    }
    .social-video-frame.aspect-9-16 {
      aspect-ratio: 9 / 16;
      width: auto;
    }
    .social-video-frame.aspect-1-1 {
      aspect-ratio: 1 / 1;
      width: auto;
    }
    .social-frame-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .social-hint-footer {
      font-size: 12.5px;
      color: var(--text-muted);
      text-align: center;
      font-family: var(--font-mono);
    }

    .showcase-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid var(--border-subtle);
    }
    .stat-box {
      background: rgba(10, 20, 14, 0.75);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      padding: 14px;
      text-align: center;
    }
    .stat-number {
      font-size: 26px;
      font-weight: 800;
      color: var(--neon-bright);
      font-family: var(--font-mono);
    }
    .stat-label {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
      font-weight: 500;
    }

    /* ==========================================================================
       Aceternity UI — Animated Testimonials (Casos de Uso Especiales)
       ========================================================================== */
    .use-cases-section {
      padding: 110px 0 90px;
      position: relative;
      background: radial-gradient(circle at 50% 30%, rgba(75, 169, 40, 0.04) 0%, transparent 70%);
    }

    .animated-testimonials-wrap {
      max-width: 1020px;
      margin: 40px auto 0;
      background: rgba(8, 18, 12, 0.7);
      border: 1px solid rgba(75, 169, 40, 0.2);
      border-radius: 24px;
      padding: 48px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      position: relative;
      overflow: hidden;
    }

    .at-grid {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 56px;
      align-items: center;
    }

    /* Stacked Image Cards */
    .at-images-col {
      position: relative;
      height: 380px;
      width: 100%;
      perspective: 1000px;
    }

    .at-images-stack {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .at-card-item {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 20px;
      overflow: hidden;
      border: 1.5px solid rgba(75, 169, 40, 0.35);
      background: #040d07;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                  opacity 0.5s ease,
                  filter 0.5s ease,
                  z-index 0s linear 0.2s;
      transform-origin: bottom center;
      cursor: pointer;
      user-select: none;
    }

    .at-card-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .at-card-item::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(4, 13, 7, 0.85) 100%);
      pointer-events: none;
    }

    /* Persona Meta & Quote Column */
    .at-content-col {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 320px;
    }

    .at-use-case-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--neon-bright);
      background: rgba(75, 169, 40, 0.1);
      border: 1px solid rgba(75, 169, 40, 0.3);
      padding: 4px 10px;
      border-radius: 6px;
      margin-bottom: 14px;
      width: fit-content;
    }

    .at-name {
      font-size: 26px;
      font-weight: 800;
      color: #ffffff;
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }

    .at-role {
      font-size: 14px;
      color: var(--text-secondary);
      margin-bottom: 24px;
    }

    .at-quote-box {
      background: rgba(4, 9, 6, 0.6);
      border-left: 3px solid var(--neon-bright);
      padding: 20px 24px;
      border-radius: 0 12px 12px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.04);
      border-right: 1px solid rgba(255, 255, 255, 0.04);
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      margin-bottom: 30px;
    }

    .at-quote {
      font-size: 16.5px;
      line-height: 1.6;
      color: #e2f5e8;
      font-style: normal;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .at-quote.fade-out {
      opacity: 0;
      transform: translateY(6px);
    }

    .at-nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

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

    .at-dot {
      width: 8px;
      height: 8px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.2);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      cursor: pointer;
    }

    .at-dot.active {
      width: 28px;
      background: var(--neon-bright);
      box-shadow: 0 0 10px rgba(75, 169, 40, 0.5);
    }

    .at-buttons-group {
      display: flex;
      gap: 12px;
    }

    .at-nav-btn {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(14, 28, 18, 0.8);
      border: 1px solid rgba(75, 169, 40, 0.3);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .at-nav-btn:hover {
      background: var(--neon-bright);
      color: #040705;
      border-color: var(--neon-bright);
      transform: scale(1.08);
      box-shadow: 0 0 20px rgba(75, 169, 40, 0.4);
    }

    .at-nav-btn:active {
      transform: scale(0.94);
    }

    @media (max-width: 860px) {
      .animated-testimonials-wrap {
        padding: 28px;
      }
      .at-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .at-images-col {
        height: 280px;
        max-width: 280px;
        margin: 0 auto;
      }
    }

    /* Comparison Section */
    .compare-section {
      padding: 100px 0 80px;
      position: relative;
      overflow: hidden;
    }
    /* La comparativa es el tramo más largo y denso del inicio: cinco tablas
       seguidas. Esta textura le da algo que mirar sin robarle contraste al
       texto — de ahí la opacidad baja y el velo oscuro encima. Se difumina en
       los dos extremos para que no aparezca un corte recto contra la sección
       anterior ni la siguiente. */
    .compare-section::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(180deg, rgba(2, 7, 3, 0.86) 0%, rgba(2, 7, 3, 0.62) 45%, rgba(2, 7, 3, 0.9) 100%),
        url("/assets/fondo-comparativa.webp");
      background-size: cover, cover;
      background-position: center, center;
      background-repeat: no-repeat, no-repeat;
      opacity: 0.5;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
    }
    .compare-section > .container {
      position: relative;
      z-index: 1;
    }

    .compare-filter-bar {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }
    .filter-tab-btn {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      padding: 8px 16px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .filter-tab-btn:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #fff;
    }
    .filter-tab-btn.active {
      background: rgba(75, 169, 40, 0.14);
      border-color: var(--neon-bright);
      color: var(--neon-bright);
      box-shadow: 0 0 15px rgba(75, 169, 40, 0.2);
    }

    .compare-table-card {
      background: #071009;
      border: 1px solid var(--border-glass);
      border-radius: 22px;
      overflow: hidden;
      box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
    }
    .compare-header {
      display: grid;
      grid-template-columns: 1.35fr 1.45fr 1.1fr 1.1fr;
      column-gap: 36px;
      padding: 22px 32px;
      background: #0b180f;
      border-bottom: 1px solid var(--border-glass);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      align-items: center;
    }
    .compare-header .col-screezy {
      color: var(--neon-bright);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14.5px;
    }
    
    .compare-row {
      display: grid;
      grid-template-columns: 1.35fr 1.45fr 1.1fr 1.1fr;
      column-gap: 36px;
      padding: 22px 32px;
      border-bottom: 1px solid var(--border-subtle);
      align-items: center;
      font-size: 14.5px;
      transition: background 0.15s ease, border-left-color 0.15s ease;
      border-left: 3px solid transparent;
      background: transparent;
    }
    .compare-row:hover {
      background: rgba(75, 169, 40, 0.04);
      border-left-color: var(--neon-green);
    }
    .compare-feature {
      font-weight: 600;
      color: #fff;
      display: flex;
      flex-direction: column;
    }
    .compare-feature-sub {
      font-size: 12.5px;
      color: var(--text-muted);
      font-weight: 400;
      margin-top: 3px;
      line-height: 1.4;
    }
    .screezy-val {
      color: #f6fdf8;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 12px;
      background: transparent !important;
      padding: 0;
      line-height: 1.45;
    }
    .screezy-check-icon {
      width: 22px;
      height: 22px;
      min-width: 22px;
      border-radius: 6px;
      background: rgba(75, 169, 40, 0.15);
      border: 1px solid rgba(75, 169, 40, 0.35);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--neon-bright);
      flex-shrink: 0;
    }
    .screezy-check-icon svg {
      width: 13px;
      height: 13px;
      stroke: var(--neon-bright);
      stroke-width: 2.8;
    }
    .other-val {
      color: var(--text-muted);
      font-weight: 400;
      line-height: 1.45;
      font-size: 14px;
    }

    /* Live Savings Calculator Card */
    .savings-calc-card {
      margin-top: 48px;
      background: linear-gradient(135deg, #0a1810 0%, #06110a 100%);
      border: 1px solid var(--neon-bright);
      border-radius: 20px;
      padding: 32px 36px;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 36px;
      align-items: center;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 35px rgba(75, 169, 40, 0.18);
    }
    .calc-title {
      font-size: 22px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 8px;
    }
    .calc-desc {
      font-size: 14.5px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 20px;
    }
    .calc-slider-wrap {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .calc-slider-wrap label {
      font-family: var(--font-mono);
      font-size: 13px;
      color: #fff;
      display: flex;
      justify-content: space-between;
    }
    .calc-range-input {
      -webkit-appearance: none;
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: #060b08;
      border: 1px solid rgba(75, 169, 40, 0.3);
      outline: none;
      cursor: pointer;
    }
    .calc-range-input::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--neon-bright);
      box-shadow: 0 0 15px var(--neon-bright);
      cursor: pointer;
    }
    .calc-result-box {
      background: rgba(4, 8, 5, 0.85);
      border: 1px solid var(--border-glass);
      border-radius: 16px;
      padding: 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .calc-savings-number {
      font-size: 44px;
      font-weight: 800;
      color: var(--neon-bright);
      font-family: var(--font-mono);
      letter-spacing: -0.03em;
    }
    .calc-savings-label {
      font-size: 13px;
      color: var(--text-secondary);
    }

    /* Pricing Section */
    .pricing-section {
      padding: 100px 0;
      position: relative;
    }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      align-items: stretch;
      margin-top: 36px;
    }
    .pricing-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 24px;
      padding: 38px 32px;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .pricing-card:hover {
      transform: translateY(-4px);
      border-color: rgba(75, 169, 40, 0.35);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    }

    .pricing-card.featured {
      background: linear-gradient(180deg, #0e2015 0%, #08130d 100%);
      border: 2px solid var(--neon-bright);
      box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(75, 169, 40, 0.3);
      transform: scale(1.02);
      z-index: 2;
    }
    .pricing-card.featured:hover {
      transform: scale(1.03) translateY(-4px);
    }

    .pricing-badge-popular {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--neon-green) 0%, var(--neon-emerald) 100%);
      color: #021206;
      font-size: 12px;
      font-weight: 800;
      padding: 4px 14px;
      border-radius: 9999px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: 0 0 20px rgba(75, 169, 40, 0.6);
      white-space: nowrap;
    }

    .plan-name {
      font-size: 22px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 6px;
    }
    .plan-desc {
      font-size: 14px;
      color: var(--text-secondary);
      min-height: 42px;
      margin-bottom: 22px;
    }
    .plan-price-wrap {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 28px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .plan-currency {
      font-size: 24px;
      font-weight: 700;
      color: var(--text-secondary);
    }
    .plan-price {
      font-size: 52px;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
    }
    .plan-price.neon {
      color: var(--neon-bright);
    }
    .plan-period {
      font-size: 13.5px;
      color: var(--text-muted);
      font-weight: 500;
    }

    .plan-features-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 34px;
      flex: 1;
    }
    .plan-features-list li {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      font-size: 14.5px;
      color: var(--text-secondary);
      transition: transform 0.15s ease, color 0.15s ease;
    }
    .plan-features-list li:hover {
      color: #fff;
      transform: translateX(3px);
    }
    .plan-features-list li svg {
      flex: none;
      stroke: var(--neon-green);
      margin-top: 3px;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .plan-features-list li:hover svg {
      transform: scale(1.25);
    }
    .plan-features-list li strong {
      color: #fff;
    }

    .btn-plan {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 15px 22px;
      border-radius: 9999px;
      font-size: 15.5px;
      font-weight: 700;
      transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
      width: 100%;
      text-align: center;
      position: relative;
    }
    .btn-plan-ghost {
      background: rgba(10, 24, 14, 0.78);
      border: 1px solid rgba(85, 220, 45, 0.35);
      color: #e9faee !important;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 8px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }
    .btn-plan-ghost:hover {
      background: rgba(18, 42, 24, 0.9);
      border-color: rgba(115, 245, 65, 0.7);
      color: #fff !important;
      transform: translateY(-2px) scale(1.02);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 22px rgba(75, 210, 40, 0.3);
    }
    .btn-plan-neon {
      color: #020904 !important;
      font-weight: 800;
      border-radius: 9999px;
    }

    /* Sticky Bottom Conversion Bar */
    #sticky-cta-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      background: rgba(4, 7, 5, 0.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-top: 1px solid rgba(75, 169, 40, 0.3);
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7);
      padding: 12px 0;
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #sticky-cta-bar.visible {
      transform: translateY(0);
    }
    .sticky-bar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .sticky-info-group {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .sticky-app-title {
      font-size: 15px;
      font-weight: 800;
      color: #fff;
    }
    .sticky-app-tagline {
      font-size: 13px;
      color: var(--text-muted);
    }

    /* Purchase Modal */
    #purchase-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(2, 5, 3, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    #purchase-modal.open {
      opacity: 1;
      pointer-events: auto;
    }
    .modal-card {
      background: #09140e;
      border: 1px solid var(--neon-bright);
      border-radius: 24px;
      max-width: 520px;
      width: 100%;
      padding: 36px 32px;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 50px rgba(75, 169, 40, 0.3);
      position: relative;
      transform: scale(0.95) translateY(10px);
      transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    #purchase-modal.open .modal-card {
      transform: scale(1) translateY(0);
    }
    .modal-close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-subtle);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.15s ease;
    }
    .modal-close-btn:hover {
      color: #fff;
      background: rgba(255, 255, 255, 0.1);
    }
    .payment-option-pill {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      border-radius: 12px;
      background: #060b08;
      border: 1px solid var(--border-subtle);
      margin-bottom: 10px;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .payment-option-pill:hover {
      border-color: var(--neon-bright);
      background: #0c1c13;
    }

    /* Modal Checkout & Licensing */
    .checkout-input-wrap {
      margin-bottom: 16px;
      text-align: left;
    }
    .checkout-input-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 6px;
    }
    .checkout-input {
      width: 100%;
      background: #040805;
      border: 1px solid rgba(75, 169, 40, 0.3);
      border-radius: 10px;
      padding: 12px 16px;
      font-size: 14.5px;
      color: #fff;
      font-family: var(--font-sans);
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .checkout-input:focus {
      border-color: var(--neon-bright);
      box-shadow: 0 0 12px rgba(75, 169, 40, 0.4);
    }
    .license-success-box {
      background: #040905;
      border: 1.5px solid var(--neon-bright);
      border-radius: 16px;
      padding: 24px;
      margin: 18px 0;
      text-align: center;
    }
    .license-key-display {
      font-family: var(--font-mono);
      font-size: 20px;
      font-weight: 700;
      color: var(--neon-bright);
      letter-spacing: 0.08em;
      background: rgba(75, 169, 40, 0.1);
      border: 1px dashed rgba(75, 169, 40, 0.4);
      padding: 12px 16px;
      border-radius: 10px;
      margin: 12px 0 16px;
      user-select: all;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .btn-activate-app {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      background: linear-gradient(135deg, #5dc333 0%, #4ba928 100%);
      color: #030a04;
      padding: 14px 20px;
      border-radius: 12px;
      font-size: 15.5px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 0 25px rgba(75, 169, 40, 0.4);
      transition: all 0.2s ease;
      text-decoration: none;
    }
    .btn-activate-app:hover {
      background: linear-gradient(135deg, #f5fe5a 0%, #5dc333 100%);
      transform: translateY(-2px);
      box-shadow: 0 0 35px rgba(75, 169, 40, 0.6);
      color: #020703;
    }

    /* Self-Service License Recovery Modal */
    #license-recovery-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    #license-recovery-modal.open {
      opacity: 1;
      pointer-events: auto;
    }
    #license-recovery-modal.open .modal-card {
      transform: scale(1) translateY(0);
    }
    .recovery-result-box {
      margin-top: 20px;
      text-align: left;
    }
    .recovery-license-item {
      background: #050b07;
      border: 1px solid rgba(75, 169, 40, 0.3);
      border-radius: 14px;
      padding: 18px;
      margin-bottom: 14px;
    }
    .recovery-machines-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 12px 0;
    }
    .recovery-machine-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      font-size: 13px;
    }
    .btn-unlink-mac {
      background: rgba(255, 82, 82, 0.12);
      border: 1px solid rgba(255, 82, 82, 0.3);
      color: #ff7b7b;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .btn-unlink-mac:hover {
      background: rgba(255, 82, 82, 0.25);
      color: #fff;
    }

    /* Hero Assurance Pill */
    .hero-assurance-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(9, 22, 11, 0.85);
      border: 1px solid rgba(75, 169, 40, 0.28);
      border-radius: 20px;
      padding: 7px 16px;
      font-size: 13px;
      color: var(--text-secondary);
      font-weight: 500;
      margin-top: 14px;
      width: fit-content;
    }
    .hero-assurance-pill svg {
      color: var(--neon-bright);
      flex-shrink: 0;
    }

    /* Apple Silicon Autodetection Badge */
    .arch-detected-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--neon-bright);
      background: rgba(75, 169, 40, 0.15);
      border: 1px solid rgba(75, 169, 40, 0.4);
      padding: 2px 8px;
      border-radius: 6px;
      letter-spacing: 0.04em;
    }

    /* Floating Back to Top Button with Circular Reading Progress Ring */
    .back-to-top-wrap {
      position: fixed;
      bottom: 32px;
      right: 32px;
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(12px) scale(0.9);
      transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .back-to-top-wrap.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .back-to-top-btn {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #061009;
      border: 1px solid rgba(75, 169, 40, 0.3);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(75, 169, 40, 0.25);
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    .back-to-top-btn:hover {
      transform: scale(1.1);
      border-color: var(--neon-bright);
      background: #0d2613;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(75, 169, 40, 0.5);
    }
    .back-to-top-btn:active {
      transform: scale(0.95);
    }
    .progress-ring-svg {
      position: absolute;
      inset: -3px;
      width: 54px;
      height: 54px;
      transform: rotate(-90deg);
      pointer-events: none;
    }
    .progress-ring-circle-bg {
      fill: none;
      stroke: rgba(255, 255, 255, 0.08);
      stroke-width: 2.5;
    }
    .progress-ring-circle {
      fill: none;
      stroke: var(--neon-green);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-dasharray: 157;
      stroke-dashoffset: 157;
      transition: stroke-dashoffset 0.1s linear, stroke 0.2s ease;
    }
    .back-to-top-btn:hover .progress-ring-circle {
      stroke: var(--neon-lime);
    }

    /* Dismissible Top Announcement Bar */
    .announcement-bar {
      background: linear-gradient(90deg, #071509 0%, #0d2612 50%, #071509 100%);
      border-bottom: 1px solid rgba(75, 169, 40, 0.25);
      padding: 9px 0;
      font-size: 13.5px;
      color: #fff;
      position: relative;
      z-index: 101;
      transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    }
    .announcement-bar.hidden {
      display: none;
    }
    .announcement-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-align: center;
      position: relative;
      padding: 0 36px;
    }
    .announcement-chip {
      background: rgba(75, 169, 40, 0.2);
      border: 1px solid rgba(75, 169, 40, 0.4);
      color: var(--neon-bright);
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-right: 6px;
    }
    .announcement-link {
      color: var(--neon-lime);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.15s ease;
      white-space: nowrap;
    }
    .announcement-link:hover {
      color: #fff;
    }
    .announcement-close-btn {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: color 0.15s ease;
    }
    .announcement-close-btn:hover {
      color: #fff;
    }

    /* Pricing Micro-Tooltips */
    .pricing-tooltip-trigger {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      cursor: help;
      border-bottom: 1px dashed rgba(255, 255, 255, 0.3);
    }
    .pricing-tooltip-trigger:hover {
      border-bottom-color: var(--neon-bright);
    }
    .pricing-tooltip-box {
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%) translateY(4px);
      background: #061109;
      border: 1px solid rgba(75, 169, 40, 0.35);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12px;
      color: #fff;
      font-weight: 400;
      line-height: 1.4;
      width: 220px;
      text-align: center;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 15px rgba(75, 169, 40, 0.2);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
      z-index: 50;
    }
    .pricing-tooltip-box::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: #061109 transparent transparent transparent;
    }
    .pricing-tooltip-trigger:hover .pricing-tooltip-box {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    /* Changelog Modal */
    #changelog-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(2, 5, 3, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    #changelog-modal.open {
      opacity: 1;
      pointer-events: auto;
    }
    #changelog-modal.open .modal-card {
      transform: scale(1) translateY(0);
    }
    .changelog-entry {
      border-left: 2px solid var(--neon-green);
      padding-left: 16px;
      margin: 16px 0;
      text-align: left;
    }
    .changelog-version {
      font-family: var(--font-mono);
      font-size: 13px;
      font-weight: 700;
      color: var(--neon-bright);
      margin-bottom: 4px;
    }
    .changelog-date {
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }
    .changelog-list {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 13.5px;
      color: var(--text-secondary);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .changelog-list li {
      display: flex;
      align-items: baseline;
      gap: 8px;
    }
    .changelog-list li::before {
      content: "•";
      color: var(--neon-bright);
    }
    .downloads-section {
      padding: 90px 0;
      position: relative;
      border-top: 1px solid var(--border-subtle);
    }
    .os-tabs-nav {
      display: flex;
      gap: 12px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }
    .os-tab-button {
      flex: 1;
      min-width: 200px;
      padding: 16px 20px;
      border-radius: 14px;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      color: var(--text-secondary);
      text-align: left;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .os-tab-button:hover {
      background: var(--bg-card-hover);
      border-color: rgba(75, 169, 40, 0.2);
    }
    .os-tab-button.active {
      background: #0e2015;
      border-color: var(--neon-bright);
      color: #fff;
      box-shadow: 0 0 20px rgba(75, 169, 40, 0.2);
    }
    .os-tab-label {
      font-size: 16px;
      font-weight: 700;
      display: block;
      margin-bottom: 2px;
    }
    .os-tab-sub {
      font-size: 12.5px;
      color: var(--text-muted);
      font-family: var(--font-mono);
    }

    .download-layout-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 28px;
    }
    .download-card-active {
      background: var(--bg-card);
      border: 1px solid var(--border-glass);
      border-radius: 20px;
      padding: 34px 32px;
    }

    .dl-header-flex {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }
    .dl-hero-heading {
      font-size: 26px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 6px;
    }
    .dl-hero-meta {
      font-family: var(--font-mono);
      font-size: 13.5px;
      color: var(--text-secondary);
    }

    .file-table-dark {
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 24px;
      background: #060c09;
    }
    .file-table-header {
      display: grid;
      grid-template-columns: 2fr 1.2fr 0.8fr auto;
      gap: 12px;
      padding: 12px 18px;
      background: #0d1a12;
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
    }
    .file-row-dark {
      display: grid;
      grid-template-columns: 2fr 1.2fr 0.8fr auto;
      gap: 12px;
      padding: 14px 18px;
      border-top: 1px solid var(--border-subtle);
      align-items: center;
      font-size: 13.5px;
      transition: background 0.15s ease;
    }
    .file-row-dark:hover {
      background: rgba(75, 169, 40, 0.04);
    }
    .file-name-cell {
      font-family: var(--font-mono);
      color: #fff;
      font-weight: 500;
    }
    .file-badge-arch {
      color: var(--text-secondary);
    }
    .file-size-cell {
      font-family: var(--font-mono);
      color: var(--text-muted);
    }
    .file-link-action {
      color: var(--neon-bright);
      font-weight: 600;
    }

    .terminal-install-box {
      margin-top: 24px;
      background: #060c09;
      border: 1px solid rgba(75, 169, 40, 0.28);
      border-radius: 12px;
      padding: 16px 20px;
    }
    .terminal-box-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .terminal-box-head span {
      font-size: 11.5px;
      font-family: var(--font-mono);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
    }
    .terminal-cmd-display {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--neon-bright);
    }

    /* Testimonials Section */
    .testimonials-section {
      padding: 90px 0;
      position: relative;
    }
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .testimonial-card {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 18px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }
    .testimonial-card:hover {
      border-color: var(--border-glass);
      transform: translateY(-3px);
    }
    .testimonial-stars {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
    }
    .testimonial-quote {
      font-size: 15px;
      line-height: 1.6;
      color: var(--text-secondary);
      margin-bottom: 22px;
      font-style: normal;
    }
    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .author-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(75, 169, 40, 0.15);
      border: 1px solid var(--border-glass);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: var(--neon-bright);
      font-size: 15px;
    }
    .author-name {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
    }
    .author-role {
      font-size: 12.5px;
      color: var(--text-muted);
    }

    /* FAQ Section */
    .faq-section {
      padding: 90px 0;
      position: relative;
    }
    .faq-wrapper {
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .faq-item {
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 16px;
      overflow: hidden;
      transition: border-color 0.15s ease;
    }
    .faq-item:hover {
      border-color: var(--border-glass);
    }
    .faq-item.active {
      border-color: var(--neon-bright);
    }
    .faq-question-btn {
      width: 100%;
      padding: 22px 26px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      text-align: left;
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
    }
    .faq-icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: rgba(75, 169, 40, 0.1);
      border: 1px solid rgba(75, 169, 40, 0.28);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--neon-bright);
      flex: none;
      transition: transform 0.2s ease;
    }
    .faq-item.active .faq-icon {
      transform: rotate(45deg);
      background: var(--neon-green);
      color: #021206;
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease, padding 0.25s ease;
      padding: 0 26px;
      color: var(--text-secondary);
      font-size: 15.5px;
      line-height: 1.65;
    }
    .faq-item.active .faq-answer {
      max-height: 240px;
      padding: 0 26px 22px;
    }

    /* Final CTA Banner */
    /* Entrada a la tienda, justo antes del cierre de la página. */
    .store-entry-section {
      padding: 70px 0 0;
      position: relative;
    }
    .store-entry-link {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .store-entry-link img {
      height: auto;
      transition: transform 0.25s var(--ease-cinematic), filter 0.25s var(--ease-cinematic);
      filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.6));
    }
    .store-entry-banner {
      width: 100%;
      max-width: 520px;
    }
    .store-entry-card {
      width: 168px;
    }
    .store-entry-link:hover img {
      transform: translateY(-3px) scale(1.02);
      filter: drop-shadow(0 14px 34px rgba(93, 195, 51, 0.4));
    }

    /* Generated visual assets: scoped placements only. */
    .app-section-divider-asset {
      display: block;
      width: min(430px, 72vw);
      height: auto;
      margin: 16px auto -18px;
      opacity: 0.42;
      pointer-events: none;
      filter: drop-shadow(0 0 18px rgba(168, 255, 40, 0.18));
    }

    .capture-hotkey-asset {
      position: absolute;
      left: 24px;
      bottom: 18px;
      width: 112px;
      height: auto;
      opacity: 0.32;
      transform: rotate(-7deg);
      pointer-events: none;
      mix-blend-mode: screen;
      filter: drop-shadow(0 0 18px rgba(168, 255, 40, 0.16));
    }

    .subtitles-audio-indicator {
      position: relative;
    }

    .subtitles-audio-wave-asset {
      position: absolute;
      left: 50%;
      bottom: 50%;
      width: min(220px, 58%);
      height: auto;
      opacity: 0.22;
      transform: translate(-50%, 48%);
      pointer-events: none;
      mix-blend-mode: screen;
      filter: drop-shadow(0 0 16px rgba(168, 255, 40, 0.14));
    }

    .timeline-asset-card {
      position: relative;
      overflow: hidden;
    }

    .timeline-asset-card > *:not(.timeline-capture-ornament-asset):not(.timeline-glow-asset) {
      position: relative;
      z-index: 1;
    }

    .timeline-capture-ornament-asset {
      position: absolute;
      right: -78px;
      top: -76px;
      width: 210px;
      height: auto;
      opacity: 0.18;
      pointer-events: none;
      mix-blend-mode: screen;
      filter: drop-shadow(0 0 22px rgba(168, 255, 40, 0.12));
    }

    .timeline-glow-asset {
      position: absolute;
      left: 34px;
      bottom: 132px;
      width: calc(100% - 68px);
      height: 76px;
      object-fit: fill;
      opacity: 0.26;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .pricing-pro-seal-asset {
      position: absolute;
      top: 18px;
      right: 16px;
      width: 76px;
      height: auto;
      opacity: 0.28;
      pointer-events: none;
      mix-blend-mode: screen;
      filter: drop-shadow(0 0 18px rgba(168, 255, 40, 0.18));
    }

    .download-security-shield-asset {
      display: block;
      width: 70px;
      height: auto;
      margin: -8px 0 14px;
      opacity: 0.62;
      filter: drop-shadow(0 0 18px rgba(168, 255, 40, 0.16));
    }

    .store-entry-link {
      position: relative;
      isolation: isolate;
    }

    .store-badge-asset,
    .store-filmstrip-asset {
      position: absolute;
      height: auto;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: -1;
    }

    .store-badge-asset {
      width: 104px;
      right: calc(50% - 330px);
      top: -34px;
      opacity: 0.46;
      filter: drop-shadow(0 0 20px rgba(168, 255, 40, 0.18));
    }

    .store-filmstrip-asset {
      width: 210px;
      left: calc(50% - 365px);
      bottom: -46px;
      opacity: 0.22;
      transform: rotate(-5deg);
      filter: drop-shadow(0 0 18px rgba(168, 255, 40, 0.12));
    }

    .store-entry-link:hover .store-badge-asset,
    .store-entry-link:hover .store-filmstrip-asset {
      transform: none;
    }

    .store-entry-link:hover .store-filmstrip-asset {
      transform: rotate(-5deg);
    }

    .cta-banner-section {
      padding: 90px 0 110px;
      position: relative;
    }
    .cta-banner-card {
      background: linear-gradient(135deg, #0e2216 0%, #06110a 100%);
      border: 1px solid var(--neon-bright);
      border-radius: 28px;
      padding: 68px 48px;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8), 0 0 45px rgba(75, 169, 40, 0.25);
    }
    .cta-banner-title {
      font-size: 46px;
      font-weight: 800;
      color: #fff;
      margin-bottom: 18px;
      letter-spacing: -0.03em;
    }
    .cta-banner-subtitle {
      font-size: 18px;
      color: var(--text-secondary);
      max-width: 58ch;
      margin: 0 auto 36px;
      line-height: 1.6;
    }
    .cta-btn-center {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: #020904 !important;
      padding: 18px 38px;
      border-radius: 9999px;
      font-size: 17.5px;
      font-weight: 800;
      text-decoration: none;
      position: relative;
    }

    /* Footer */
    .site-footer {
      background: #030504;
      border-top: 1px solid var(--border-subtle);
      padding: 60px 0 32px;
      position: relative;
      z-index: 1;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
    }
    .footer-brand-bio {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-top: 14px;
      max-width: 32ch;
    }
    .footer-col-head {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 18px;
    }
    .footer-links-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-links-list a {
      color: var(--text-secondary);
      font-size: 14px;
      transition: color 0.15s ease;
    }
    .footer-links-list a:hover {
      color: var(--neon-bright);
    }

    .footer-bottom-row {
      padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: var(--text-muted);
      flex-wrap: wrap;
      gap: 16px;
    }

    /* Responsive Queries */
    @media (max-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .showcase-grid {
        grid-template-columns: 1fr;
      }
      .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
      }
      .pricing-card.featured {
        transform: none;
      }
      .pricing-card.featured:hover {
        transform: translateY(-4px);
      }
      .savings-calc-card {
        grid-template-columns: 1fr;
      }
      .testimonials-grid {
        grid-template-columns: 1fr;
      }
      .download-layout-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 1140px) {
      .header-inner {
        gap: 16px;
      }
      .nav-links {
        gap: 16px;
        font-size: 13.5px;
      }
      .nav-store-pill img {
        height: 28px;
      }
      .btn-header-neon {
        padding: 8px 16px;
        font-size: 13px;
      }
    }

    @media (max-width: 1024px) {
      .nav-links {
        display: none !important;
      }
      .header-inner {
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
      }
      .header-actions {
        margin-left: auto;
      }
    }

    /* Base Desktop / Mobile Visibility Rules */
    .mobile-only {
      display: none !important;
    }
    .desktop-only {
      display: block;
    }
    span.desktop-only, strong.desktop-only, a.desktop-only {
      display: inline;
    }
    a.btn-header-neon.desktop-only {
      display: inline-flex;
    }
    div.desktop-only.flex-desktop {
      display: flex;
    }

    @media (max-width: 768px) {
      body {
        padding-bottom: 96px !important;
      }
      .container {
        padding: 0 16px !important;
      }
      .desktop-only {
        display: none !important;
      }
      .mobile-only {
        display: block !important;
      }
      .mobile-only.mobile-flex {
        display: flex !important;
      }
      .mobile-only.mobile-grid {
        display: grid !important;
      }
      .mobile-only.mobile-inline {
        display: inline !important;
      }
      .mobile-only.mobile-inline-flex {
        display: inline-flex !important;
      }

      /* Dismissible Announcement Bar Hidden on Mobile */
      .announcement-bar {
        display: none !important;
      }

      /* Heavy Desktop Sections Hidden on Mobile */
      #descargas,
      .downloads-section,
      .features-showcase-deck,
      #interfaz,
      #timeline,
      .social-proof-section,
      #casos-de-uso,
      .use-cases-section,
      .compare-table-card,
      .compare-filter-bar,
      .at-images-col,
      .marquee-3d-section,
      .store-entry-section {
        display: none !important;
      }

      /* Header Adjustments & Proper Breathing Room */
      .nav-links {
        display: none !important;
      }
      .site-header {
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      .site-header .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      .header-inner {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
      }
      .brand-link {
        gap: 8px !important;
        margin-right: auto !important;
      }
      .brand-logo-wrap {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
      }
      .brand-name {
        font-size: 18px !important;
      }
      .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
      }
      .lang-switcher-wrap {
        padding: 2px !important;
        border-radius: 7px !important;
        gap: 1px !important;
      }
      .lang-switcher-btn {
        padding: 4px 6px !important;
        font-size: 10.5px !important;
        border-radius: 5px !important;
      }
      .btn-header-neon.mobile-only {
        padding: 8px 13px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        border-radius: 9px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
      }

      /* Hero Mobile Polish */
      .hero-section {
        padding: 28px 0 20px 0 !important;
        min-height: auto !important;
      }
      .hero-title {
        font-size: 25px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 10px !important;
      }
      .hero-desc {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        color: var(--text-secondary) !important;
        margin-bottom: 16px !important;
      }
      .hero-btn-group {
        flex-direction: column !important;
        gap: 10px !important;
      }
      .hero-mockup-3d-wrap {
        margin-top: 16px !important;
        transform: none !important;
      }
      .hero-mockup-card {
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8) !important;
        border-radius: 14px !important;
      }

      /* Section Common Adjustments */
      .section-header-center {
        margin-bottom: 24px !important;
      }
      .section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
      }
      .section-subtitle {
        font-size: 13px !important;
        line-height: 1.45 !important;
      }
      .section-eyebrow {
        font-size: 10.5px !important;
        margin-bottom: 4px !important;
      }
      .features-section,
      .compare-section,
      .pricing-section,
      .testimonials-section,
      .faq-section {
        padding: 36px 0 !important;
      }

      /* Mobile Clean Features Swipe Reel */
      .mobile-features-summary {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        margin: 18px -16px 0 -16px !important;
        padding: 4px 16px 16px 16px !important;
        scrollbar-width: none !important;
      }
      .mobile-features-summary::-webkit-scrollbar {
        display: none !important;
      }
      .mobile-feat-card {
        flex: 0 0 82% !important;
        max-width: 295px !important;
        scroll-snap-align: start !important;
        background: linear-gradient(145deg, rgba(12, 28, 16, 0.7) 0%, rgba(5, 13, 8, 0.8) 100%) !important;
        border: 1px solid rgba(75, 169, 40, 0.25) !important;
        border-radius: 16px !important;
        padding: 18px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
        box-sizing: border-box !important;
      }
      .mobile-feat-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: rgba(75, 169, 40, 0.15) !important;
        border: 1px solid rgba(75, 169, 40, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--neon-bright) !important;
        flex-shrink: 0 !important;
      }
      .mobile-feat-content {
        flex: 1 !important;
        width: 100% !important;
      }
      .mobile-feat-badge {
        font-size: 10px !important;
        font-weight: 800 !important;
        font-family: var(--font-mono) !important;
        color: var(--neon-bright) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        display: block !important;
        margin-bottom: 3px !important;
      }
      .mobile-feat-title {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #fff !important;
        margin: 0 0 5px 0 !important;
        line-height: 1.3 !important;
      }
      .mobile-feat-desc {
        font-size: 12px !important;
        color: var(--text-secondary) !important;
        line-height: 1.45 !important;
        margin: 0 !important;
      }

      /* Mobile Mac Utility Card */
      .mobile-mac-utility-card {
        background: rgba(7, 20, 11, 0.45) !important;
        border: 1px solid rgba(75, 169, 40, 0.2) !important;
        border-radius: 16px !important;
        padding: 16px 14px !important;
        margin-top: 14px !important;
        box-shadow: none !important;
        text-align: center !important;
      }
      .mobile-mac-icon-wrap {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        background: rgba(75, 169, 40, 0.12) !important;
        border: 1px solid rgba(75, 169, 40, 0.22) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 8px auto !important;
      }
      .mobile-mac-text h4 {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #fff !important;
        margin: 0 0 4px 0 !important;
      }
      .mobile-mac-text p {
        font-size: 11.5px !important;
        color: var(--text-secondary) !important;
        line-height: 1.4 !important;
        margin: 0 0 10px 0 !important;
      }
      .mobile-mac-btns-row {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
      }
      .btn-mobile-util {
        flex: 1 !important;
        min-width: 120px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 9px 12px !important;
        border-radius: 9px !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
      }
      .btn-mobile-share {
        background: var(--neon-green) !important;
        color: #020703 !important;
        border: none !important;
      }
      .btn-mobile-copy {
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid var(--border-subtle) !important;
        color: #fff !important;
      }

      /* Mobile Comparison Section - Ultra Clean Modern Card */
      .mobile-compare-card {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 14px 0 0 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        overflow: visible !important;
      }
      .m-comp-header {
        text-align: center !important;
        margin-bottom: 14px !important;
      }
      .m-comp-pill {
        font-size: 10px !important;
        font-family: var(--font-mono) !important;
        color: var(--neon-bright) !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        background: rgba(75, 169, 40, 0.15) !important;
        padding: 3px 9px !important;
        border-radius: 6px !important;
        letter-spacing: 0.04em !important;
      }
      .m-comp-title {
        font-size: 17px !important;
        font-weight: 800 !important;
        color: #fff !important;
        margin: 6px 0 0 0 !important;
      }
      .m-comp-card {
        border-radius: 14px !important;
        padding: 14px !important;
        margin-bottom: 10px !important;
        box-sizing: border-box !important;
      }
      .m-comp-card.m-comp-screezy {
        background: linear-gradient(135deg, rgba(75, 169, 40, 0.12) 0%, rgba(5, 15, 8, 0.85) 100%) !important;
        border: 1.5px solid var(--neon-bright) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
      }
      .m-comp-card.m-comp-competitor {
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        opacity: 0.85 !important;
      }
      .m-comp-card-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
      }
      .m-comp-brand {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 13px !important;
        color: #fff !important;
      }
      .m-comp-comp-icon {
        width: 18px !important;
        height: 18px !important;
        border-radius: 5px !important;
        background: rgba(239, 68, 68, 0.15) !important;
        color: #ef4444 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        font-weight: 900 !important;
      }
      .m-comp-price-tag {
        text-align: right !important;
      }
      .m-price-val {
        font-size: 19px !important;
        font-weight: 900 !important;
        color: var(--neon-bright) !important;
        display: block !important;
        line-height: 1 !important;
      }
      .m-price-val.m-price-gray {
        color: #cbd5e1 !important;
      }
      .m-price-sub {
        font-size: 10px !important;
        color: var(--text-secondary) !important;
        display: block !important;
        margin-top: 2px !important;
      }
      .m-comp-features {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
      }
      .m-comp-features li {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        font-size: 11.5px !important;
        color: #e2e8f0 !important;
        line-height: 1.35 !important;
      }
      .m-comp-features li svg {
        flex-shrink: 0 !important;
        margin-top: 2px !important;
      }
      .m-comp-savings-badge {
        text-align: center !important;
        background: rgba(75, 169, 40, 0.14) !important;
        border: 1px dashed rgba(75, 169, 40, 0.35) !important;
        border-radius: 10px !important;
        padding: 9px 12px !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        color: #fff !important;
      }

      /* Pricing Mobile Polish - Single Featured Pro Card */
      .pricing-grid {
        display: flex !important;
        flex-direction: column !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        gap: 14px !important;
      }
      .pricing-card {
        padding: 22px 16px !important;
        border-radius: 16px !important;
      }
      .pricing-card.featured {
        order: 1;
        border: 2px solid var(--neon-bright) !important;
        background: linear-gradient(180deg, rgba(75, 169, 40, 0.14) 0%, rgba(7, 18, 10, 0.9) 100%) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(75, 169, 40, 0.25) !important;
      }
      .pricing-card:not(.featured) {
        display: none !important;
      }
      .plan-price {
        font-size: 38px !important;
      }
      .plan-features-list {
        margin: 16px 0 !important;
      }
      .plan-features-list li {
        font-size: 12px !important;
        gap: 8px !important;
        line-height: 1.35 !important;
      }
      .btn-plan {
        padding: 13px 18px !important;
        font-size: 13.5px !important;
        border-radius: 10px !important;
      }
      .mobile-pricing-trial-note {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 11.5px;
        color: var(--text-muted);
        margin-top: 14px;
        line-height: 1.4;
      }

      /* Testimonials Mobile Polish - Horizontal Swipe Reel */
      .testimonials-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        margin: 0 -16px !important;
        padding: 4px 16px 16px 16px !important;
        scrollbar-width: none !important;
      }
      .testimonials-grid::-webkit-scrollbar {
        display: none !important;
      }
      .testimonial-card {
        flex: 0 0 85% !important;
        max-width: 310px !important;
        scroll-snap-align: start !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
        background: rgba(7, 18, 10, 0.65) !important;
        border: 1px solid rgba(75, 169, 40, 0.22) !important;
        box-sizing: border-box !important;
      }
      .testimonial-quote {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin: 0 !important;
      }

      /* Final CTA & Footer Mobile Polish */
      .cta-banner-section {
        padding: 30px 0 16px 0 !important;
      }
      .cta-banner-card {
        padding: 26px 16px !important;
        border-radius: 18px !important;
        background: linear-gradient(135deg, #091a0c 0%, #040c06 100%) !important;
        border: 1.5px solid rgba(75, 169, 40, 0.35) !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8) !important;
      }
      .cta-banner-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin-bottom: 8px !important;
      }
      .cta-banner-subtitle {
        font-size: 12.5px !important;
        margin-bottom: 18px !important;
      }
      .cta-actions-mobile {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
      }
      .cta-actions-mobile .cta-btn-center {
        width: 100% !important;
        padding: 13px 18px !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        border-radius: 11px !important;
        justify-content: center !important;
      }
      .cta-actions-mobile .btn-hero-pro {
        width: 100% !important;
        padding: 12px 18px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        border-radius: 11px !important;
        justify-content: center !important;
      }
      .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
      }
      .site-footer {
        padding: 36px 0 20px 0 !important;
      }
      .footer-bottom-row {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
      }

      /* Sticky CTA Bar Mobile */
      #sticky-cta-bar {
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)) 0 !important;
        background: rgba(3, 7, 4, 0.96) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(75, 169, 40, 0.28) !important;
        box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.85) !important;
      }
      .sticky-bar-inner {
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
      }
      .sticky-info-group {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        flex: 1 !important;
      }
      .sticky-info-group img {
        height: 20px !important;
        width: 20px !important;
      }
      .sticky-app-title {
        font-size: 12.5px !important;
        font-weight: 800 !important;
        color: #fff !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
      }
      .sticky-app-tagline {
        display: none !important;
      }
      .sticky-actions-mobile {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
      }
      .sticky-actions-mobile .btn-header-ghost {
        padding: 6px 9px !important;
        font-size: 11.5px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #fff !important;
      }
      .sticky-actions-mobile .btn-header-neon {
        padding: 7px 12px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        background: var(--neon-green) !important;
        color: #020703 !important;
      }
    }

    /* Send to Mac Modal (Mobile Bottom Sheet) */
    .send-mac-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 10000;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0;
    }
    .send-mac-sheet {
      background: #07150a;
      border: 1px solid var(--border-glass);
      border-bottom: none;
      border-radius: 24px 24px 0 0;
      width: 100%;
      max-width: 500px;
      padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px)) 20px;
      position: relative;
      animation: sheetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9);
    }
    @keyframes sheetSlideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }
    .send-mac-handle {
      width: 40px;
      height: 4px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 2px;
      margin: 0 auto 16px auto;
    }
    .send-mac-options-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .send-mac-opt-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--border-glass);
      border-radius: 14px;
      padding: 12px 14px;
      text-decoration: none;
      color: #fff;
      cursor: pointer;
      text-align: left;
      width: 100%;
      transition: all 0.15s ease;
    }
    .send-mac-opt-btn:active {
      transform: scale(0.98);
      background: rgba(75, 169, 40, 0.15);
    }
    .send-mac-opt-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .send-mac-opt-text {
      flex: 1;
    }
    .send-mac-opt-text strong {
      display: block;
      font-size: 14px;
      color: #fff;
      margin-bottom: 2px;
    }
    .send-mac-opt-text span {
      display: block;
      font-size: 11.5px;
      color: var(--text-secondary);
    }
    .send-mac-opt-arrow {
      color: var(--text-muted);
      font-size: 14px;
    }

    /* Language Switcher Styles */
    .lang-switcher-wrap {
      display: inline-flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border-subtle);
      border-radius: 8px;
      padding: 3px;
    }
    .lang-switcher-btn {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      font-family: var(--font-mono);
      font-size: 11.5px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
    }
    .lang-switcher-btn:hover {
      color: #fff;
    }
    .lang-switcher-btn.active {
      background: rgba(75, 169, 40, 0.25);
      color: var(--neon-bright);
    }


/* ==========================================================================
   Estado «Próximamente»
   ==========================================================================
   Reemplaza al botón de compra de un producto que todavía no se puede
   entregar (hoy: Screezy Snap, que no tiene DMG publicado). Mide igual que
   .btn-hero-primary para que la fila no salte al intercambiarlos, pero está
   apagado y no lleva a ninguna parte: es un <span>, no un <a>, así que no hay
   destino que abrir ni foco de teclado que ofrecer.
   ========================================================================== */
.btn-soon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 30px;
  border-radius: 9999px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-secondary, #9cbca7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.btn-soon svg {
  opacity: 0.75;
  flex-shrink: 0;
}
.btn-soon.btn-soon-sm {
  padding: 8px 16px;
  font-size: 13px;
}
/* Aclaración que acompaña al estado: por qué no se puede comprar todavía. */
.soon-note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted, #627e6c);
  max-width: 620px;
  margin: 14px auto 0;
}
.soon-note strong {
  color: var(--text-secondary, #9cbca7);
  font-weight: 700;
}

/* ==========================================================================
   Movimiento reducido
   ==========================================================================
   Quien pide menos animación en su sistema (macOS: Accesibilidad → Pantalla →
   Reducir movimiento) deja de pagar los bucles infinitos del fondo del hero y
   de los brillos de las tarjetas. También es la vía de escape en equipos justos
   de potencia. Las revelaciones al hacer scroll quedan resueltas al instante en
   vez de anularse, para que nada se quede invisible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-section::before,
  .hero-liquid-glow,
  .btn-hero-primary::after,
  .btn-header-neon::after,
  .btn-plan-neon::after,
  .cta-btn-center::after,
  .btn-submit-purchase::after {
    animation: none !important;
  }

  .hero-section::before {
    opacity: 1;
    transform: scale(1.02);
  }

  .reveal-on-scroll,
  .reveal-child {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Aviso de precio de lanzamiento —"sube a $49 el 15 de octubre · quedan 12 días"—.
   Lo rellena js/pricing.js desde la promoción del catálogo y sólo se ve mientras la
   promoción está viva: sin promoción el elemento queda `hidden` y no ocupa nada.
   La regla está repetida en css/main.css y css/topbar.css a propósito: el sitio tiene
   dos familias de páginas y cada una carga sólo una de las dos hojas. */
.launch-note {
  display: block;
  margin: 10px auto 0;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--neon-bright, #71e641);
  text-align: center;
}
/* `display:block` de arriba le gana al `[hidden] { display:none }` del navegador,
   que es una regla del estilo por defecto y pierde por especificidad. Sin esta
   línea, el aviso se vería (vacío, ocupando sitio) justo cuando NO hay promoción. */
.launch-note[hidden] { display: none; }
.launch-note:empty { display: none; }

#sticky-cta-bar .launch-note {
  margin: 3px 0 0;
  font-size: 11.5px;
  text-align: left;
}

/* ==============================================================================
   Uiverse.io Isometric Cube Pattern by mobinkakei
   Adapted with Screezy Cyber-Emerald Palette
   ============================================================================== */
.screezy-pattern-cubes {
  --u: 5px;
  --c1: rgba(75, 169, 40, 0.22);
  --c2: #030804;
  --c3: #08160a;
  --gp: 50% / calc(var(--u) * 16.9) calc(var(--u) * 12.8);
  background:
    conic-gradient(from 122deg at 50% 85.15%, var(--c2) 0 58deg, var(--c3) 0 116deg, #fff0 0 100%) var(--gp),
    conic-gradient(from 122deg at 50% 72.5%, var(--c1) 0 116deg, #fff0 0 100%) var(--gp),
    conic-gradient(from 58deg at 82.85% 50%, var(--c3) 0 64deg, #fff0 0 100%) var(--gp),
    conic-gradient(from 58deg at 66.87% 50%, var(--c1) 0 64deg, var(--c2) 0 130deg, #fff0 0 100%) var(--gp),
    conic-gradient(from 238deg at 17.15% 50%, var(--c2) 0 64deg, #fff0 0 100%) var(--gp),
    conic-gradient(from 172deg at 33.13% 50%, var(--c3) 0 66deg, var(--c1) 0 130deg, #fff0 0 100%) var(--gp),
    linear-gradient(98deg, var(--c3) 0 15%, #fff0 calc(15% + 1px) 100%) var(--gp),
    linear-gradient(-98deg, var(--c2) 0 15%, #fff0 calc(15% + 1px) 100%) var(--gp),
    conic-gradient(from -58deg at 50.25% 14.85%, var(--c3) 0 58deg, var(--c2) 0 116deg, #fff0 0 100%) var(--gp),
    conic-gradient(from -58deg at 50% 28.125%, var(--c1) 0 116deg, #fff0 0 100%) var(--gp),
    linear-gradient(90deg, var(--c2) 0 50%, var(--c3) 0 100%) var(--gp);
}

.screezy-pattern-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--border-glass, rgba(75, 169, 40, 0.3));
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 30px rgba(75, 169, 40, 0.12);
}

/* ==============================================================================
   1. 3D Crystal Emerald Loader (From Uiverse.io by Z4drus)
   Adapted with Screezy Neon-Emerald Palette & Scalable Matrix
   ============================================================================== */
.screezy-crystal-container,
.crystal-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.screezy-crystal-loader,
.screezy-crystal-container .loader {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 800px;
}

.screezy-crystal,
.screezy-crystal-container .crystal,
.screezy-crystal-loader .crystal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  opacity: 0;
  transform-origin: bottom center;
  transform: translate(-50%, -50%) rotateX(45deg) rotateZ(0deg);
  animation: crystalSpin 4s linear infinite, crystalEmerge 2s ease-in-out infinite alternate,
    crystalFadeIn 0.3s ease-out forwards;
  border-radius: 10px;
  visibility: hidden;
}

@keyframes crystalSpin {
  from {
    transform: translate(-50%, -50%) rotateX(45deg) rotateZ(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotateX(45deg) rotateZ(360deg);
  }
}

@keyframes crystalEmerge {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes crystalFadeIn {
  to {
    visibility: visible;
    opacity: 0.85;
  }
}

.screezy-crystal:nth-child(1),
.screezy-crystal-loader .crystal:nth-child(1),
.screezy-crystal-container .crystal:nth-child(1) {
  background: linear-gradient(45deg, #07260e, #0f4d1e);
  box-shadow: 0 0 16px rgba(15, 77, 30, 0.45);
  animation-delay: 0s;
}

.screezy-crystal:nth-child(2),
.screezy-crystal-loader .crystal:nth-child(2),
.screezy-crystal-container .crystal:nth-child(2) {
  background: linear-gradient(45deg, #0d5a0a, #1b7a24);
  box-shadow: 0 0 18px rgba(27, 122, 36, 0.5);
  animation-delay: 0.3s;
}

.screezy-crystal:nth-child(3),
.screezy-crystal-loader .crystal:nth-child(3),
.screezy-crystal-container .crystal:nth-child(3) {
  background: linear-gradient(45deg, #1b7a24, #39881e);
  box-shadow: 0 0 20px rgba(57, 136, 30, 0.55);
  animation-delay: 0.6s;
}

.screezy-crystal:nth-child(4),
.screezy-crystal-loader .crystal:nth-child(4),
.screezy-crystal-container .crystal:nth-child(4) {
  background: linear-gradient(45deg, #39881e, #4ba928);
  box-shadow: 0 0 22px rgba(75, 169, 40, 0.6);
  animation-delay: 0.9s;
}

.screezy-crystal:nth-child(5),
.screezy-crystal-loader .crystal:nth-child(5),
.screezy-crystal-container .crystal:nth-child(5) {
  background: linear-gradient(45deg, #4ba928, #5dc333);
  box-shadow: 0 0 25px rgba(93, 195, 51, 0.7);
  animation-delay: 1.2s;
}

.screezy-crystal:nth-child(6),
.screezy-crystal-loader .crystal:nth-child(6),
.screezy-crystal-container .crystal:nth-child(6) {
  background: linear-gradient(45deg, #5dc333, #a3ff70);
  box-shadow: 0 0 28px rgba(116, 255, 61, 0.85);
  animation-delay: 1.5s;
}

/* ==============================================================================
   2. Glassmorphic High-Tech Checkbox (From Uiverse.io by ahmed_8975)
   Adapted with Screezy Cyber-Emerald Palette
   ============================================================================== */
.gl-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-sans, -apple-system, "Segoe UI", system-ui, sans-serif);
}

.gl-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.gl-checkbox__box {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Ripple on check */
.gl-checkbox__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(93, 195, 51, 0.45) 0%,
    transparent 70%
  );
  opacity: 0;
  transform: scale(0);
  transition:
    opacity 0.3s ease,
    transform 0.4s ease;
}

.gl-checkbox:hover .gl-checkbox__box {
  border-color: rgba(93, 195, 51, 0.55);
  transform: scale(1.06);
}

.gl-checkbox__input:checked ~ .gl-checkbox__box {
  background: linear-gradient(135deg, #74ff3d, #30b815);
  border-color: transparent;
  box-shadow:
    0 0 0 3px rgba(93, 195, 51, 0.2),
    0 4px 14px rgba(75, 169, 40, 0.4);
  transform: scale(1.05);
}

.gl-checkbox__input:checked ~ .gl-checkbox__box::before {
  opacity: 1;
  transform: scale(1.5);
}

.gl-checkbox__check {
  width: 13px;
  height: 13px;
  color: #030804;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}

.gl-checkbox__input:checked ~ .gl-checkbox__box .gl-checkbox__check {
  stroke-dashoffset: 0;
}

.gl-checkbox__label {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  transition: color 0.25s ease;
}

.gl-checkbox:hover .gl-checkbox__label {
  color: rgba(255, 255, 255, 0.9);
}

.gl-checkbox__input:checked ~ .gl-checkbox__label {
  color: #f2fef5;
}

/* ==============================================================================
   3. Fluctuating Green Energy Orb (From Uiverse.io by andrew-manzyk)
   Dynamic Multi-Shade Green Liquid Core with Specular Glow & Entrance Motion
   ============================================================================== */
.screezy-energy-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.screezy-energy-orb .loader,
.screezy-energy-orb .orb-loader {
  --color-one: #74ff3d;
  --color-two: #166534;
  --color-three: rgba(116, 255, 61, 0.55);
  --color-four: rgba(15, 77, 30, 0.65);
  --color-five: rgba(163, 255, 112, 0.25);
  --time-animation: 2.2s;
  --size: 0.42;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  transform: scale(var(--size));
  box-shadow:
    0 0 25px 0 var(--color-three),
    0 15px 40px 0 var(--color-four);
  animation: orbColorize calc(var(--time-animation) * 3) ease-in-out infinite,
             orbEntrance 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.screezy-energy-orb .loader::before,
.screezy-energy-orb .orb-loader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-top: solid 1.5px var(--color-one);
  border-bottom: solid 1.5px var(--color-two);
  background: linear-gradient(180deg, var(--color-five), var(--color-four));
  box-shadow:
    inset 0 10px 10px 0 var(--color-three),
    inset 0 -10px 10px 0 var(--color-four);
}

.screezy-energy-orb .loader .box,
.screezy-energy-orb .orb-loader .box {
  width: 100px;
  height: 100px;
  background: linear-gradient(
    180deg,
    var(--color-one) 30%,
    var(--color-two) 70%
  );
  mask: url(#screezy-orb-clipping);
  -webkit-mask: url(#screezy-orb-clipping);
}

.screezy-energy-orb .loader svg,
.screezy-energy-orb .orb-loader svg {
  position: absolute;
}

.screezy-energy-orb svg #screezy-orb-clipping {
  filter: contrast(15);
  animation: orbRoundness calc(var(--time-animation) / 2) linear infinite;
}

.screezy-energy-orb svg #screezy-orb-clipping polygon {
  filter: blur(7px);
}

.screezy-energy-orb svg #screezy-orb-clipping polygon:nth-child(1) {
  transform-origin: 75% 25%;
  transform: rotate(90deg);
}

.screezy-energy-orb svg #screezy-orb-clipping polygon:nth-child(2) {
  transform-origin: 50% 50%;
  animation: orbRotation var(--time-animation) linear infinite reverse;
}

.screezy-energy-orb svg #screezy-orb-clipping polygon:nth-child(3) {
  transform-origin: 50% 60%;
  animation: orbRotation var(--time-animation) linear infinite;
  animation-delay: calc(var(--time-animation) / -3);
}

.screezy-energy-orb svg #screezy-orb-clipping polygon:nth-child(4) {
  transform-origin: 40% 40%;
  animation: orbRotation var(--time-animation) linear infinite reverse;
}

.screezy-energy-orb svg #screezy-orb-clipping polygon:nth-child(5) {
  transform-origin: 40% 40%;
  animation: orbRotation var(--time-animation) linear infinite reverse;
  animation-delay: calc(var(--time-animation) / -2);
}

.screezy-energy-orb svg #screezy-orb-clipping polygon:nth-child(6) {
  transform-origin: 60% 40%;
  animation: orbRotation var(--time-animation) linear infinite;
}

.screezy-energy-orb svg #screezy-orb-clipping polygon:nth-child(7) {
  transform-origin: 60% 40%;
  animation: orbRotation var(--time-animation) linear infinite;
  animation-delay: calc(var(--time-animation) / -1.5);
}

@keyframes orbRotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes orbRoundness {
  0%, 100% {
    filter: contrast(15);
  }
  20%, 40% {
    filter: contrast(3);
  }
  60% {
    filter: contrast(15);
  }
}

@keyframes orbColorize {
  0% {
    filter: hue-rotate(0deg) saturate(1);
  }
  20% {
    filter: hue-rotate(-25deg) saturate(1.25);
  }
  40% {
    filter: hue-rotate(30deg) saturate(1.4);
  }
  60% {
    filter: hue-rotate(-15deg) saturate(1.1);
  }
  80% {
    filter: hue-rotate(40deg) saturate(1.3);
  }
  100% {
    filter: hue-rotate(0deg) saturate(1);
  }
}

@keyframes orbEntrance {
  0% {
    opacity: 0;
    transform: scale(0.08) rotate(-140deg);
  }
  65% {
    opacity: 1;
    transform: scale(calc(var(--size) * 1.14)) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: scale(var(--size)) rotate(0deg);
  }
}

/* ==============================================================================
   4. Custom Animated Error Alert (From Uiverse.io by seyed-mohsen-mousavi)
   Adapted for Screezy Dark Theme with Neon/Coral Warning Palette
   ============================================================================== */
.screezy-error-alert-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  font-size: 11.5px;
  z-index: 9999;
  margin-top: 8px;
  margin-bottom: 8px;
  box-sizing: border-box;
  animation: screezyAlertEntrance 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards,
             screezyAlertShake 0.4s ease 0.12s;
}

@keyframes screezyAlertEntrance {
  0% {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes screezyAlertShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.screezy-error-alert {
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  border-radius: 10px;
  background-color: #121813;
  border: 1px solid rgba(214, 85, 99, 0.4);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65), 0 0 16px rgba(214, 85, 99, 0.15);
  padding: 8px 12px;
  box-sizing: border-box;
  gap: 10px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.screezy-error-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.screezy-error-icon-box {
  color: #d65563;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(214, 85, 99, 0.28);
}

.screezy-error-icon-box svg {
  width: 18px;
  height: 18px;
  stroke: #d65563;
}

.screezy-error-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  text-align: left;
}

.screezy-error-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
  margin: 0;
}

.screezy-error-desc {
  color: #9cbca7;
  font-size: 11px;
  line-height: 1.35;
  margin: 2px 0 0;
}

.screezy-error-close-btn {
  color: #708a79;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.screezy-error-close-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: scale(1.1);
}

.screezy-error-close-btn svg {
  width: 15px;
  height: 15px;
}

.screezy-input-error-glow {
  border-color: #d65563 !important;
  box-shadow: 0 0 0 2px rgba(214, 85, 99, 0.22), 0 0 12px rgba(214, 85, 99, 0.28) !important;
}

/* ==========================================================================
   5. Animated Isometric Cyber Node / Server (From Uiverse.io by Juanes200122)
   Customized for Screezy Cyber-Emerald Palette
   ========================================================================== */
/* Este gráfico vivía detrás del video del hero. Se mudó a la comparativa, que
   era una pared de texto, y el hero se quedó con el video solo. Las medidas de
   allá arriba (420x600, opacidad 0.62) se fueron con él en su propio bloque. */
.screezy-iso-server-svg {
  overflow: visible;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

@keyframes iso-fade-particles {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@keyframes iso-float-up {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    transform: translateY(-44px);
    opacity: 0;
  }
}

.iso-particles {
  animation: iso-fade-particles 5s infinite alternate;
}

.iso-particles .particle {
  animation: iso-float-up linear infinite;
}

.iso-particles .p1 { animation-duration: 2.2s; animation-delay: 0s; }
.iso-particles .p2 { animation-duration: 2.5s; animation-delay: 0.3s; }
.iso-particles .p3 { animation-duration: 2s; animation-delay: 0.6s; }
.iso-particles .p4 { animation-duration: 2.8s; animation-delay: 0.2s; }
.iso-particles .p5 { animation-duration: 2.3s; animation-delay: 0.4s; }
.iso-particles .p6 { animation-duration: 3s; animation-delay: 0.1s; }
.iso-particles .p7 { animation-duration: 2.1s; animation-delay: 0.5s; }
.iso-particles .p8 { animation-duration: 2.6s; animation-delay: 0.2s; }
.iso-particles .p9 { animation-duration: 2.4s; animation-delay: 0.3s; }

@keyframes iso-bounce-lines {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.iso-line-v1,
.iso-line-v2,
.iso-node-server,
.iso-panel-right,
.iso-reflectores,
.iso-particles {
  animation: iso-bounce-lines 3s ease-in-out infinite alternate;
}

.iso-line-v2 {
  animation-delay: 0.2s;
}

.iso-node-server,
.iso-panel-right,
.iso-reflectores,
.iso-particles {
  animation-delay: 0.4s;
}


/* ==========================================================================
   Nodo isométrico de la comparativa
   El mismo gráfico del hero, detrás del título y corrido a la derecha. Acá es
   sólo decorado: va más apagado que en el hero y flota apenas, para que la
   sección deje de ser un bloque de texto sin nada que mirar. No debe robarle
   la vista a la tabla, así que no reacciona al puntero ni al scroll.
   ========================================================================== */
.compare-iso-backdrop {
  position: absolute;
  top: 40px;
  right: calc(50% - 640px);
  width: 320px;
  height: 460px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Más tenue que el hero (0.62): acá compite con texto que hay que leer. */
  opacity: 0;
  filter: drop-shadow(0 0 40px rgba(75, 169, 40, 0.18));
  transform: translateY(24px);
  transition: opacity 1s var(--ease-cinematic), transform 1s var(--ease-cinematic);
}

.compare-iso-backdrop.revealed {
  opacity: 0.34;
  transform: translateY(0);
}

/* La flotación va en el SVG y la entrada en el contenedor: son dos elementos
   distintos a propósito. Si compartieran `transform`, el translateY del reveal
   y el de la animación se pisarían y uno cortaría al otro. */
.compare-iso-backdrop .screezy-iso-server-svg {
  animation: compare-iso-float 11s ease-in-out infinite;
}

@keyframes compare-iso-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

/* El contenido por delante del adorno. */
.compare-section > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 1400px) {
  .compare-iso-backdrop {
    right: -40px;
    width: 260px;
    height: 380px;
  }
  .compare-iso-backdrop.revealed {
    opacity: 0.26;
  }
}

/* Por debajo de esto el título ocupa el ancho y el gráfico quedaría encima
   del texto, no detrás. */
@media (max-width: 1100px) {
  .compare-iso-backdrop {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compare-iso-backdrop .screezy-iso-server-svg {
    animation: none;
  }
  .compare-iso-backdrop {
    transition: opacity 0.3s linear;
    transform: none;
  }
}

/* Mobile information architecture: the Mac app is the product, so the phone
   view keeps the proof, the price and a short feature sampler within reach. */
@media (max-width: 768px) {
  #casos-de-uso,
  #comparar,
  .social-proof-section,
  .testimonials-section,
  .faq-section,
  .marquee-3d-section,
  .store-entry-section,
  .cta-banner-section,
  .dither-brand-section {
    display: none !important;
  }

  .features-section {
    padding-top: 24px !important;
    padding-bottom: 26px !important;
  }

  .pricing-section {
    padding-top: 28px !important;
    padding-bottom: 22px !important;
  }

  .pricing-section .section-header-center {
    margin-bottom: 16px !important;
  }

  .pricing-section .section-subtitle {
    max-width: 31rem;
    margin-left: auto;
    margin-right: auto;
  }

  #sticky-cta-bar {
    padding: 0 !important;
    background:
      linear-gradient(180deg, rgba(18, 35, 22, 0.46), rgba(3, 8, 5, 0.88)),
      rgba(5, 10, 7, 0.78) !important;
    border-top: 1px solid rgba(146, 221, 117, 0.22) !important;
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    -webkit-backdrop-filter: blur(24px) saturate(0.72) !important;
    backdrop-filter: blur(24px) saturate(0.72) !important;
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: hidden;
  }

  #sticky-cta-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.14;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  }

  #sticky-cta-bar .sticky-bar-inner {
    min-height: 70px;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    display: block !important;
    position: relative;
    z-index: 1;
  }

  #sticky-cta-bar .sticky-info-group,
  #sticky-cta-bar .sticky-actions-mobile {
    display: none !important;
  }

  .mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    gap: 3px;
  }

  .mobile-bottom-nav-item {
    min-width: 0;
    min-height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(219, 236, 222, 0.66);
    border-radius: 12px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-bottom-nav-item svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.82;
  }

  .mobile-bottom-nav-item.is-active,
  .mobile-bottom-nav-item:active,
  .mobile-bottom-nav-item:focus-visible {
    color: #d5f7a3;
    background: rgba(91, 190, 57, 0.13);
  }

  .mobile-bottom-nav-item:active {
    transform: translateY(1px) scale(0.97);
  }

  .mobile-bottom-nav-buy {
    color: #071108;
    background: linear-gradient(145deg, #d9f86b, #62ca3b 58%, #3b9b2a);
    box-shadow: 0 4px 14px rgba(77, 190, 52, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }

  .mobile-bottom-nav-buy svg {
    opacity: 0.9;
  }

  .mobile-bottom-nav-buy span {
    display: flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
  }

  .mobile-bottom-nav-buy strong {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -0.04em;
  }

  .mobile-bottom-nav-buy small {
    font: inherit;
    font-size: 8px;
    text-transform: uppercase;
  }
}