/* ============================================
   Holographic AR Page - Complete Styles
   Wrapped in @layer for cascade management
   ============================================ */

@layer holographic {
  
  /* Base page styles */
  .page-holographic { 
    background: #000; 
    color: #fff; 
    overflow-x: hidden; 
    font-family: 'Poppins', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; 
    font-weight: 200;
  }

  /* Holo layout variables (used by all banners) */
  .holo-enhance,
  .holo-split { 
    --tileW: clamp(18%, 26vw, 28%); 
    --stripW: clamp(12px, 2.6vw, 24px); 
    --gAnchor: calc(var(--tileW) + (var(--stripW) * 0.5)); 
    --anchorShift: 0px;
  }
  
  /* Interactions and Comms: shift glasses left toward strip */
  .holo-interactions, 
  .holo-comms { 
    --gAnchor: calc(var(--tileW) + (var(--stripW) * 0.5) - 3vw);
  }
  
  /* Realworld: shift photo right toward strip */
  .holo-realworld { 
    --gAnchor: calc(100% - var(--tileW) - (var(--stripW) * 0.5) + 3vw);
  }
  
  .holo-enhance { 
    --gAnchor: calc(100% - var(--tileW) - (var(--stripW) * 0.5));
  }

  /* Decorative "glasses/photo" anchors always center on strip, float vertically only */
  .holo-enhance .holo-anchor,
  .holo-split .holo-anchor { 
    position: absolute; 
    left: calc(var(--gAnchor) + var(--anchorShift)); 
    top: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 5; 
    pointer-events: none;
  }
  
  .holo-anchor img { 
    width: clamp(210px, 39vw, 483px); 
    height: auto; 
    animation: holoFloat 6s ease-in-out infinite;
  }

  /* Ensure strip centering stays consistent on larger screens (≥1024px) */
  @media (min-width: 1024px) {
    /* Interactions and Comms: glasses centered on left strip */
    .page-holographic .holo-interactions .holo-anchor,
    .page-holographic .holo-comms .holo-anchor {
      left: calc(var(--tileW) + (var(--stripW) * 0.5) - 2vw) !important;
    }
    
    /* Real World: photo centered on right strip */
    .page-holographic .holo-realworld .holo-anchor {
      left: calc(100% - var(--tileW) - (var(--stripW) / 2)) !important;
    }
  }

  /* Hero: Augment Your World - Full vibrant gradient with dark fade left */
  .holo-hero { 
    position: relative; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    min-height: 85vh; 
    overflow: hidden; 
    background: linear-gradient(135deg, #000814 0%, #001d3d 20%, #003566 40%, #006d7a 70%, #00d9ff 100%);
  }
  
  .holo-hero::after { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    background:
      radial-gradient(600px 320px at 68% 52%, rgba(0,217,255,.22), transparent 60%),
      radial-gradient(480px 280px at 78% 38%, rgba(59,130,246,.18), transparent 62%),
      radial-gradient(380px 220px at 85% 70%, rgba(157,78,221,.18), transparent 65%);
    pointer-events: none; 
    z-index: 0;
  }
  
  .holo-hero-left { 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
    padding: clamp(60px, 10vh, 100px) clamp(40px, 8vw, 120px); 
    background: linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 50%, transparent 100%); 
    z-index: 2;
  }
  
  .holo-hero-title { 
    font-size: clamp(38px, 4.2vw, 60px); 
    font-weight: 200; 
    font-family: 'Poppins', sans-serif; 
    line-height: 1.05; 
    margin: 0 0 20px; 
    color: #fff;
  }
  
  .holo-hero-text { 
    font-size: clamp(14px, 1.2vw, 18px); 
    line-height: 1.65; 
    color: rgba(255,255,255,.9); 
    margin: 0 0 32px; 
    max-width: 620px;
  }
  
  .btn-holo-glow { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 14px 36px; 
    border-radius: 30px; 
    background: linear-gradient(135deg, #9d4edd, #c77dff); 
    color: #fff; 
    font-weight: 700; 
    font-size: 15px; 
    box-shadow: 0 0 30px rgba(157,78,221,.6), 0 8px 20px rgba(0,0,0,.3); 
    transition: all .35s ease; 
    border: none;
  }
  
  .btn-holo-glow:hover { 
    transform: translateY(-3px) scale(1.02); 
    box-shadow: 0 0 40px rgba(199,125,255,.8), 0 12px 28px rgba(0,0,0,.4);
  }
  
  .holo-hero-right { 
    position: relative; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: clamp(40px, 8vh, 80px) 40px; 
    z-index: 1;
  }
  
  .holo-hero-glasses { 
    width: 100%; 
    max-width: 540px; 
    height: auto; 
    display: block; 
    filter: drop-shadow(0 20px 60px rgba(0,217,255,.4)); 
    animation: float 6s ease-in-out infinite 0.5s; 
    transition: transform 0.3s ease, filter 0.3s ease;
  }
  
  .holo-hero-glasses:hover { 
    filter: drop-shadow(0 25px 70px rgba(0,217,255,.6));
  }

  /* Enhance Daily Life - Full width photo with right purple gradient tile */
  .holo-enhance { 
    position: relative; 
    display: flex; 
    min-height: 600px; 
    background: #000; 
    overflow: hidden; 
    isolation: isolate;
  }
  
  .holo-enhance-left { 
    position: absolute; 
    inset: 0; 
    background-image: url('https://static.wixstatic.com/media/044386_5ec0b31670d346fd928972391f844307~mv2.jpg'); 
    background-size: cover; 
    background-position: center; 
    z-index: 1;
  }
  
  .holo-enhance-left::after { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.2) 100%); 
    pointer-events: none;
  }
  
  /* Black strip positioned before the purple gradient */
  .holo-enhance-strip { 
    position: absolute; 
    right: 480px; 
    top: 0; 
    bottom: 0; 
    width: 24px; 
    background: #000; 
    z-index: 3;
  }
  
  /* Purple gradient tile on the right */
  .holo-enhance-right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 480px; 
    background: linear-gradient(135deg, #240046 0%, #3c096c 35%, #5a189a 70%, #7209b7 100%); 
    z-index: 2;
  }
  
  /* Title and content - base styles without positioning */
  .holo-section-title { 
    text-align: center; 
    font-size: clamp(28px, 3vw, 38px); 
    font-weight: 200; 
    font-family: 'Poppins', sans-serif; 
    line-height: 1.2; 
    margin: 0; 
    color: #fff; 
    text-shadow: 0 3px 25px rgba(0,0,0,.7); 
    max-width: min(600px, 40vw);
  }
  
  /* Video container - base styles */
  .holo-enhance-content { 
    z-index: 4;
  }
  
  .holo-video-wrapper { 
    position: relative; 
    width: 515px; 
    height: 333px; 
    border-radius: 12px; 
    overflow: hidden; 
    background: #000; 
    box-shadow: 0 25px 70px rgba(0,0,0,.9);
  }
  
  .holo-video-wrapper iframe { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    border: 0;
  }
  
  /* Glasses - base styles */
  .holo-enhance-glasses { 
    width: 360px; 
    height: auto; 
    display: block; 
    filter: drop-shadow(0 20px 60px rgba(114,9,183,.7)); 
    animation: float 6s ease-in-out infinite 2s; 
    transition: transform 0.3s ease, filter 0.3s ease;
  }
  
  .holo-enhance-glasses:hover { 
    transform: translateY(-50%) scale(1.05); 
    filter: drop-shadow(0 25px 70px rgba(114,9,183,.9));
  }

  /* Split Sections: Horizontal banners */
  .holo-split { 
    position: relative; 
    display: block; 
    height: auto; 
    min-height: 420px; 
    background: transparent; 
    overflow: hidden; 
    isolation: isolate;
  }

  /* Effortless Interactions: gradient tile left, strip, gray right */
  .holo-interactions .holo-split-left { 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    width: 28%; 
    background: linear-gradient(135deg, #0a0e27 0%, #1e3a8a 35%, #2563eb 70%, #3b82f6 100%); 
    z-index: 2;
  }
  
  .holo-interactions .holo-split-strip { 
    position: absolute; 
    left: 28%; 
    top: 0; 
    bottom: 0; 
    width: 24px; 
    background: #000; 
    z-index: 3;
  }
  
  .holo-interactions .holo-split-right { 
    position: absolute; 
    left: calc(28% + 24px); 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background: #3d3d3d; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 60px 80px; 
    z-index: 1;
  }
  
  .holo-interactions .holo-split-glasses { 
    position: absolute; 
    left: 14%; 
    top: 0; 
    bottom: 0; 
    margin: auto 0; 
    transform: translateX(calc(-50% + 250px)) !important; 
    width: 340px; 
    max-width: 20vw; 
    height: fit-content; 
    z-index: 4; 
    filter: drop-shadow(0 20px 50px rgba(59,130,246,.5)); 
    animation: float 6s ease-in-out infinite; 
    transition: transform 0.3s ease, filter 0.3s ease;
  }

  /* Real World: gray left with text, strip, darker tile right with photo */
  .holo-realworld .holo-split-left { 
    position: absolute; 
    left: 0; 
    right: calc(28% + 24px); 
    top: 0; 
    bottom: 0; 
    background: #2a2a2a; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 60px 80px; 
    z-index: 1;
  }
  
  .holo-realworld .holo-split-strip { 
    position: absolute; 
    right: 28%; 
    top: 0; 
    bottom: 0; 
    width: 24px; 
    background: #000; 
    z-index: 3;
  }
  
  .holo-realworld .holo-split-right { 
    position: absolute; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 28%; 
    background: #1a1a1a; 
    z-index: 2;
  }
  
  /* Accent glows on right tile */
  .holo-realworld .holo-split-right::before { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    background: radial-gradient(400px 260px at 90% 10%, rgba(59,130,246,.35), transparent 60%); 
    pointer-events: none; 
    z-index: 0;
  }
  
  .holo-realworld .holo-split-right::after { 
    content: ""; 
    position: absolute; 
    inset: 0; 
    background: radial-gradient(380px 240px at 10% 90%, rgba(114,9,183,.35), transparent 62%); 
    pointer-events: none; 
    z-index: 0;
  }
  
  .holo-split-content { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    align-items: center; 
    max-width: 550px; 
    text-align: center;
  }
  
  .holo-split-copy { 
    text-align: center;
  }
  
  .holo-realworld .holo-split-photo { 
    position: absolute; 
    right: 14%; 
    top: 0; 
    bottom: 0; 
    margin: auto 0; 
    transform: translateX(50%); 
    width: 340px; 
    max-width: 20vw; 
    height: fit-content; 
    border-radius: 12px; 
    box-shadow: 0 20px 50px rgba(0,0,0,.7); 
    z-index: 3;
  }

  /* Comms: gradient tile left, strip, gray right */
  .holo-comms .holo-split-left { 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    width: 28%; 
    background: linear-gradient(135deg, #10002b 0%, #240046 35%, #5a189a 70%, #9d4edd 100%); 
    z-index: 2;
  }
  
  .holo-comms .holo-split-strip { 
    position: absolute; 
    left: 28%; 
    top: 0; 
    bottom: 0; 
    width: 24px; 
    background: #000; 
    z-index: 3;
  }
  
  .holo-comms .holo-split-right { 
    position: absolute; 
    left: calc(28% + 24px); 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background: #3d3d3d; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 60px 80px; 
    z-index: 1;
  }
  
  .holo-comms .holo-split-glasses { 
    position: absolute; 
    left: 14%; 
    top: 0; 
    bottom: 0; 
    margin: auto 0; 
    transform: translateX(calc(-50% + 250px)) !important; 
    width: 340px; 
    max-width: 20vw; 
    height: fit-content; 
    z-index: 4; 
    filter: drop-shadow(0 20px 50px rgba(157,78,221,.5)); 
    animation: float 6s ease-in-out infinite 1s; 
    transition: transform 0.3s ease, filter 0.3s ease;
  }

  .holo-split-glasses { 
    width: 100%; 
    max-width: 420px; 
    height: auto; 
    display: block;
  }
  
  .holo-interactions .holo-split-glasses:hover,
  .holo-comms .holo-split-glasses:hover { 
    transform: translateX(calc(-50% + 250px)) scale(1.08) !important; 
    filter: drop-shadow(0 25px 60px rgba(157,78,221,.7));
  }

  .holo-split-title { 
    font-size: clamp(26px, 2.8vw, 36px); 
    font-weight: 200; 
    font-family: 'Poppins', sans-serif; 
    line-height: 1.2; 
    margin: 0 0 12px; 
    color: #fff; 
    text-align: center; 
    max-width: 100%;
  }
  
  .holo-split-text { 
    font-size: clamp(13px, 1.1vw, 16px); 
    line-height: 1.6; 
    color: rgba(255,255,255,.85); 
    margin: 0; 
    max-width: 480px; 
    text-align: center;
  }

  /* CTA: See Real Results */
  .holo-cta { 
    background: #f7f6f3; 
    padding: 100px 20px;
  }
  
  .holo-cta-inner { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 480px 1fr; 
    gap: 80px; 
    align-items: center; 
    position: relative;
  }
  
  .holo-cta-inner::before { 
    content: ""; 
    position: absolute; 
    left: -20px; 
    top: 0; 
    bottom: 0; 
    width: 8px; 
    background: #d4af37; 
    border-radius: 4px;
  }
  
  .holo-cta-figure img { 
    width: 100%; 
    height: auto; 
    display: block; 
    border-radius: 16px; 
    box-shadow: 0 16px 48px rgba(0,0,0,.12);
  }
  
  .holo-cta-title { 
    font-size: clamp(34px, 5vw, 48px); 
    font-weight: 800; 
    line-height: 1.15; 
    margin: 0 0 16px; 
    color: #1a1a1a;
  }
  
  .holo-cta-text { 
    font-size: 17px; 
    line-height: 1.7; 
    color: #4a4a4a; 
    margin: 0 0 28px; 
    max-width: 540px;
  }
  
  .btn-holo-dark { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    padding: 14px 36px; 
    border-radius: 6px; 
    background: #1a1a1a; 
    color: #fff !important; 
    font-weight: 700; 
    font-size: 15px; 
    box-shadow: 0 8px 24px rgba(0,0,0,.2); 
    transition: all .3s ease;
  }
  
  .btn-holo-dark:hover { 
    background: #2a2a2a; 
    transform: translateY(-2px); 
    box-shadow: 0 12px 32px rgba(0,0,0,.28);
  }

  /* Animations */
  @keyframes float {
    0%, 100% { transform: translateY(0px) }
    50% { transform: translateY(-20px) }
  }
  
  @keyframes holoFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) }
    50% { transform: translate(-50%, -50%) translateY(-20px) }
  }

  /* Holographic reveal animations */
  .page-holographic .reveal { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity .7s ease, transform .7s ease;
  }
  
  .page-holographic .reveal.in { 
    opacity: 1; 
    transform: none;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .page-holographic .reveal { 
      opacity: 1; 
      transform: none;
    }
    .holo-enhance .holo-anchor.reveal, 
    .holo-split .holo-anchor.reveal { 
      transform: translate(-50%, -50%) !important;
    }
  }

  /* Holographic text wrapping and guards (body text only) */
  .page-holographic :is(p,a,li) { 
    overflow-wrap: anywhere; 
    hyphens: auto;
  }
  
  .holo-split-right > *, 
  .holo-split-left > *, 
  .holo-hero-left > *, 
  .holo-cta-inner > * { 
    min-width: 0; 
    max-width: 100%;
  }

  /* Remove stray gutters on banners */
  section.holo-split { 
    margin: 0; 
    padding: 0;
  }

  /* Video above panels but below anchor (clickable); keep images non-interactive */
  .page-holographic .holo-video-wrapper { 
    position: relative; 
    z-index: 4;
  }

  /* Headings must not break inside words */
  .page-holographic .holo-section-title,
  .page-holographic .holo-split-title { 
    overflow-wrap: normal; 
    word-break: normal; 
    hyphens: manual; 
    text-wrap: balance;
  }

  /* =====================================================
     RESPONSIVE STYLES - Mobile and Tablet Optimizations
     ===================================================== */

  /* Tablet specific fix for Enhance section (768-834px) - Full background image */
  @media (min-width: 768px) and (max-width: 834px) {
    .page-holographic .holo-enhance {
      min-height: 100vh !important;
      height: 100vh !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: 50vh 50vh !important;
      background: #000 !important;
      position: relative !important;
    }
    
    /* Woman background image - fill entire bottom half */
    .page-holographic .holo-enhance-left {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      top: 50% !important;
      bottom: 0 !important;
      height: 50vh !important;
      background-size: cover !important;
      background-position: center top !important; /* Show full image from top */
      background-repeat: no-repeat !important;
      z-index: 1 !important;
    }
    
    /* Title and glasses in top half */
    .page-holographic .holo-enhance .holo-section-title {
      grid-row: 1 !important;
      grid-column: 1 !important;
      align-self: center !important;
      z-index: 2 !important;
    }
    
    .page-holographic .holo-enhance .holo-anchor {
      grid-row: 1 !important;
      grid-column: 1 !important;
      position: absolute !important;
      right: 10% !important;
      bottom: 10% !important;
      z-index: 2 !important;
    }
    
    /* Video centered in bottom half over the image */
    .page-holographic .holo-enhance .holo-enhance-content {
      grid-row: 2 !important;
      grid-column: 1 !important;
      align-self: center !important;
      justify-self: center !important;
      z-index: 3 !important;
      margin: 0 auto !important;
      width: min(90%, 600px) !important;
    }
  }

  /* Tablet override: Enhance unified two-halves layout (835–1194px) */
  @media (min-width: 835px) and (max-width: 1194px) {
    .page-holographic .holo-enhance {
      background: #000;
      min-height: 100vh;
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 50vh 50vh;
      justify-items: center;
      align-content: stretch;
      row-gap: 0;
    }
    
    .page-holographic .holo-enhance-left { 
      position: absolute; 
      left: 0;
      right: 0;
      top: 50%;
      bottom: 0; 
      height: 50vh;
      background-size: cover; 
      background-position: center top; 
      background-repeat: no-repeat;
      z-index: 1;
    }
    
    .page-holographic .holo-enhance-strip, 
    .page-holographic .holo-enhance-right { 
      display: none;
    }

    .page-holographic .holo-enhance .holo-section-title { 
      grid-row: 1;
      grid-column: 1;
      align-self: center;
      text-align: center;
      max-width: min(42ch, 80%);
      margin: 0 auto;
      position: relative;
      left: auto;
      top: auto;
      transform: none !important;
      z-index: 2;
    }
    
    .page-holographic .holo-enhance .holo-anchor { 
      grid-row: 1;
      grid-column: 1;
      position: absolute;
      right: 10%;
      bottom: 15%;
      left: auto;
      top: auto;
      transform: none;
      display: block;
      margin: 0;
      z-index: 2;
    }
    
    .page-holographic .holo-enhance .holo-anchor.reveal.in { 
      transform: none;
    }
    
    .page-holographic .holo-enhance .holo-anchor img { 
      width: clamp(180px, 20vw, 320px);
      animation: none;
    }

    .page-holographic .holo-enhance .holo-enhance-content { 
      grid-row: 2;
      grid-column: 1;
      z-index: 2;
      position: relative;
      left: auto;
      right: auto;
      top: auto;
      transform: none;
      justify-self: center;
      align-self: center;
      margin: 0 auto;
      width: min(88%, 720px);
    }
    
    .page-holographic .holo-video-wrapper { 
      width: 100%;
      aspect-ratio: 16/9;
      height: auto;
      margin: 0 auto;
    }
  }

  /* Base responsive at 900px */
  @media (max-width: 900px) {
    .holo-hero { grid-template-columns: 1fr; min-height: auto }
    .holo-hero-left { align-items: center; text-align: center; background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.6)) }
    .holo-hero-right { padding: 60px 20px }
    .holo-enhance { grid-template-columns: 1fr; grid-template-rows: auto auto }
    .holo-enhance-left { min-height: 380px; order: 1 }
    .holo-section-title { position: static; width: auto; margin: 0 0 24px; padding: 0 20px }
    .holo-enhance-content { position: static; padding: 0 20px }
    .holo-video-wrapper { width: 100%; height: auto; padding-bottom: 56.25% }
    .holo-video-wrapper iframe { height: 100% }
    .holo-split { grid-template-columns: 1fr; grid-template-rows: auto auto }
    .holo-interactions .holo-split-left { padding: 60px 40px; order: 1 }
    .holo-interactions .holo-split-right { order: 2 }
    .holo-split-content { flex-direction: column; gap: 40px }
    .holo-split-photo { width: 100%; max-width: 320px }
    .holo-cta-inner { grid-template-columns: 1fr; gap: 40px }
  }

  /* Small screens at 640px */
  @media (max-width: 640px) {
    .holo-hero-left { padding: 48px 20px }
    .holo-hero-title { font-size: clamp(32px, 9vw, 42px) }
    .holo-hero-right { padding: 40px 20px }
    .holo-enhance-left { min-height: 240px }
    .holo-enhance-right, 
    .holo-interactions .holo-split-left, 
    .holo-interactions .holo-split-right, 
    .holo-realworld .holo-split-right, 
    .holo-comms .holo-split-left, 
    .holo-comms .holo-split-right { padding: 48px 20px }
    .holo-cta { padding: 60px 20px }
  }

  /* Small-phone scaling and ultra-small */
  @media (max-width: 480px) { 
    .page-holographic .holo-anchor img { width: clamp(240px, 48vw, 520px) } 
  }

  @media (max-width: 420px) {
    .page-holographic .holo-enhance-right, 
    .page-holographic .holo-enhance-strip { display: none }
    .page-holographic .holo-enhance { grid-template-columns: 1fr !important }
    
    /* Collapse split tiles/strips across banners; show content only */
    .page-holographic .holo-interactions .holo-split-left,
    .page-holographic .holo-interactions .holo-split-strip,
    .page-holographic .holo-realworld .holo-split-right,
    .page-holographic .holo-realworld .holo-split-strip,
    .page-holographic .holo-comms .holo-split-left,
    .page-holographic .holo-comms .holo-split-strip { display: none }
    
    .page-holographic .holo-interactions,
    .page-holographic .holo-realworld,
    .page-holographic .holo-comms { grid-template-columns: 1fr !important }
    
    /* Recenter anchors when strip is hidden */
    .page-holographic .holo-enhance .holo-anchor,
    .page-holographic .holo-interactions .holo-anchor,
    .page-holographic .holo-realworld .holo-anchor,
    .page-holographic .holo-comms .holo-anchor { left: 50% }
  }

  @media (max-width: 360px) { 
    .page-holographic .holo-anchor { display: none } 
  }

  /* Ultrawide screens */
  @media (min-width: 1800px) {
    .holo-hero { max-width: 100% }
    .holo-enhance, .holo-split { max-width: 100% }
    .holo-cta-inner { max-width: 1400px }
  }

  /* z-index ladder and guards */
  @media (max-width: 1919px) {
    .holo-interactions .holo-split-left,
    .holo-comms .holo-split-left,
    .holo-realworld .holo-split-right,
    .holo-enhance-right { z-index: 1 }
    
    .holo-interactions .holo-split-strip,
    .holo-comms .holo-split-strip,
    .holo-realworld .holo-split-strip,
    .holo-enhance-strip { z-index: 2 }
    
    .holo-interactions .holo-split-right,
    .holo-comms .holo-split-right,
    .holo-realworld .holo-split-left,
    .holo-enhance .holo-section-title,
    .holo-enhance .holo-enhance-content { z-index: 3 }
    
    .holo-enhance .holo-anchor,
    .holo-split .holo-anchor { z-index: 4 }
    
    .holo-anchor img { pointer-events: none }
    
    /* neutralize legacy absolute placements so anchor owns horizontal centering */
    .holo-interactions .holo-split-glasses,
    .holo-comms .holo-split-glasses,
    .holo-realworld .holo-split-photo,
    .holo-enhance-glasses { position: static; left: auto; right: auto; top: auto; bottom: auto; transform: none !important }
    
    /* apply anchor positioning across laptop/tablet widths */
    .holo-enhance .holo-anchor,
    .holo-split .holo-anchor { position: absolute; left: var(--gAnchor); top: 50%; transform: translate(-50%, -50%); opacity: 1 }
    
    .holo-anchor img { width: clamp(180px, 34vw, 420px); height: auto; display: block }
    
    /* directional padding near strip to avoid overlay/video collision */
    .holo-interactions .holo-split-right,
    .holo-comms .holo-split-right { padding-left: clamp(24px, 6vw, 72px) }
    
    .holo-realworld .holo-split-left { padding-right: clamp(24px, 6vw, 72px) }
    
    .holo-enhance .holo-section-title,
    .holo-enhance .holo-enhance-content { padding-right: clamp(24px, 6vw, 72px) }
    
    /* min-width guards on grid children */
    .holo-interactions > *,
    .holo-comms > *,
    .holo-realworld > *,
    .holo-enhance > * { min-width: 0; max-width: 100% }
  }

  /* ENHANCE section: normalize 480–1366 so the black band stops above the photo */
  @media (min-width: 480px) and (max-width: 1366px) {
    body.page-holographic section.holo-enhance {
      position: relative !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: 44vh auto !important;  /* top black band + photo/video */
      row-gap: clamp(12px, 2.6vh, 24px) !important; /* clear separation between bands */
      height: auto !important;
      min-height: auto !important;
      background: #000 !important;
      overflow: hidden !important;
    }
    
    body.page-holographic section.holo-enhance .holo-enhance-left {
      position: relative !important;
      inset: auto !important;
      grid-column: 1 !important;
      grid-row: 2 !important;
      min-height: 56vh !important;
      background-image: url('https://static.wixstatic.com/media/044386_5ec0b31670d346fd928972391f844307~mv2.jpg') !important;
      background-size: cover !important;
      background-position: center top !important;
      z-index: 1 !important;
      justify-self: stretch !important;
      align-self: stretch !important;
      width: 100% !important;
      height: 56vh !important;
    }
    
    /* hide decorative strip/tile in this range */
    body.page-holographic .holo-enhance-strip,
    body.page-holographic .holo-enhance-right { display: none !important; }

    /* title centered in the black band */
    body.page-holographic .holo-enhance .holo-section-title {
      grid-column: 1 !important;
      grid-row: 1 !important;
      position: relative !important;
      align-self: center !important;
      justify-self: center !important;
      margin: 0 !important;
      padding: 0 24px !important;
      max-width: min(40ch,88%) !important;
      text-align: center !important;
      transform: none !important;
      z-index: 3 !important;
    }

    /* glasses: consistent offset to the right of the title, not on top of it */
    body.page-holographic .holo-enhance .holo-anchor {
      grid-column: 1 !important;
      grid-row: 1 !important;
      position: relative !important;
      align-self: end !important;
      justify-self: center !important;
      margin: clamp(8px,2vh,16px) 0 0 0 !important;
      transform: translateX(clamp(48px,10vw,140px)) !important;
      z-index: 4 !important;
    }
    
    body.page-holographic .holo-enhance .holo-anchor img {
      width: clamp(180px,22vw,320px) !important;
      animation: none !important;
    }

    /* video centered in the photo band */
    body.page-holographic .holo-enhance .holo-enhance-content {
      grid-column: 1 !important;
      grid-row: 2 !important;
      position: relative !important;
      align-self: center !important;
      justify-self: center !important;
      margin: 0 auto !important;
      width: min(92%,900px) !important;
      transform: none !important;
      left: auto !important; top: auto !important;
      z-index: 2 !important;
    }
    
    body.page-holographic .holo-video-wrapper {
      width: 100% !important;
      aspect-ratio: 16/9 !important;
      height: auto !important;
      background: transparent !important;
    }
  }

  /* Portrait iPad (1024×1366) */
  @media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .page-holographic .holo-split { --anchorShift: -8vw }
    body.page-holographic .holo-enhance { grid-template-rows: 44vh auto !important; }
  }

  /* ===== DESKTOP-ONLY placement (≥1367px) ===== */
  @media (min-width: 1367px) {
    .holo-section-title {
      position: absolute;
      z-index: 4;
      top: 60px;
      left: 25%;
      transform: translateX(calc(-50% + 250px)) !important;
    }

    .holo-enhance-content {
      position: absolute;
      z-index: 4;
      left: 25%;
      transform: translateX(-50%);
      top: 220px;
      bottom: auto;
    }

    .holo-enhance-glasses {
      position: absolute;
      z-index: 5;
      right: calc(480px - 168px);
      top: 50%;
      transform: translateY(-50%);
    }
  }

  /* ===== Small phones (<=480px): enforce 2-row grid like 480–1366 ===== */
  @media (max-width: 480px) {
    .page-holographic section.holo-enhance {
      position: relative !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: 48vh auto !important; /* top black band + media */
      height: auto !important;
      min-height: auto !important;
      background: #000 !important;
      overflow: hidden !important;
      isolation: isolate !important;
    }

    /* Place the background image strictly in the bottom row */
    .page-holographic section.holo-enhance .holo-enhance-left {
      position: relative !important;
      inset: auto !important;
      grid-column: 1 !important;
      grid-row: 2 !important;
      min-height: 52vh !important;
      background-image: url('https://static.wixstatic.com/media/044386_5ec0b31670d346fd928972391f844307~mv2.jpg') !important;
      background-size: cover !important;
      background-position: center top !important;
      z-index: 1 !important;
      justify-self: stretch !important;
      align-self: stretch !important;
      width: 100% !important;
      height: 52vh !important;
    }

    /* Hide decorative strip/tile on small phones */
    .page-holographic .holo-enhance-strip,
    .page-holographic .holo-enhance-right { display: none !important; }

    /* Title locked to the top (black band), fully centered */
    .page-holographic .holo-enhance .holo-section-title {
      grid-column: 1 !important;
      grid-row: 1 !important;
      position: relative !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      align-self: center !important;
      justify-self: center !important;
      margin: 0 !important;
      padding: 0 20px !important;
      max-width: min(42ch, 88%) !important;
      text-align: center !important;
      z-index: 3 !important;
    }

    /* Glasses: consistent offset under the title, centered */
    .page-holographic .holo-enhance .holo-anchor {
      grid-column: 1 !important;
      grid-row: 1 !important;
      position: relative !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      align-self: end !important;
      justify-self: center !important;
      margin: clamp(8px, 2vh, 16px) 0 0 0 !important;
      z-index: 4 !important;
    }
    .page-holographic .holo-enhance .holo-anchor img {
      width: clamp(160px, 42vw, 280px) !important;
      animation: none !important;
    }

    /* Video centered in bottom row */
    .page-holographic .holo-enhance .holo-enhance-content {
      grid-column: 1 !important;
      grid-row: 2 !important;
      position: relative !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      align-self: center !important;
      justify-self: center !important;
      margin: 0 auto !important;
      width: min(94%, 640px) !important;
      z-index: 2 !important;
    }
    .page-holographic .holo-video-wrapper {
      width: 100% !important;
      aspect-ratio: 16 / 9 !important;
      height: auto !important;
      border-radius: 12px !important;
      background: transparent !important;
    }

    /* Safety: no horizontal scroll from legacy rules */
    .holo-enhance, .holo-enhance * { max-width: 100% !important; }
  }

  /* 360–1366: force 2-row layout and restore background image band */
  @media (max-width: 1366px) {
    .page-holographic section.holo-enhance {
      position: relative !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: 46vh auto !important; /* black top band + background band */
      background: #000 !important;
      overflow: hidden !important;
      isolation: isolate !important;
    }

    /* Background image = full second row */
    .page-holographic section.holo-enhance .holo-enhance-left {
      position: relative !important;   /* remove absolute so it participates in grid */
      inset: auto !important;
      grid-column: 1 !important;
      grid-row: 2 !important;
      display: block !important;
      min-height: 56vh !important;
      background-image: url('https://static.wixstatic.com/media/044386_5ec0b31670d346fd928972391f844307~mv2.jpg') !important;
      background-size: cover !important;
      background-position: center top !important;
      background-repeat: no-repeat !important;
      z-index: 1 !important;
      opacity: 1 !important;
      justify-self: stretch !important;
      align-self: stretch !important;
      width: 100% !important;
      height: 56vh !important;
    }

    /* Remove any dark overlay on the image band in these sizes */
    .page-holographic section.holo-enhance .holo-enhance-left::after {
      background: none !important;
    }

    /* Hide decorative strip/tile on these sizes */
    .page-holographic .holo-enhance-strip,
    .page-holographic .holo-enhance-right { display: none !important; }

    /* Title centered in top band */
    .page-holographic .holo-enhance .holo-section-title {
      grid-column: 1 !important;
      grid-row: 1 !important;
      position: relative !important;
      left: auto !important; top: auto !important; transform: none !important;
      align-self: center !important; justify-self: center !important;
      margin: 0 !important;
      padding: 0 24px !important;
      max-width: min(42ch, 88%) !important;
      text-align: center !important;
      z-index: 3 !important;
    }

    /* Video centered over the background band */
    .page-holographic .holo-enhance .holo-enhance-content {
      grid-column: 1 !important;
      grid-row: 2 !important;
      position: relative !important;
      left: auto !important; top: auto !important; transform: none !important;
      align-self: center !important; justify-self: center !important;
      width: min(92%, 900px) !important;
      margin: 0 auto !important;
      z-index: 2 !important; /* above background, below floating effects */
    }

    .page-holographic .holo-video-wrapper {
      position: relative !important;    /* create positioning context for glasses */
      width: 100% !important;
      aspect-ratio: 16 / 9 !important;
      height: auto !important;
      border-radius: 12px !important;
      overflow: visible !important; /* allow the glasses to sit above the player */
      box-shadow: 0 25px 70px rgba(0,0,0,.9);
    }

    .page-holographic .holo-video-wrapper iframe { border-radius: 12px !important; display: block !important; }

    /* Pin the glasses to the video wrapper's top-right (above the player edge) */
    .page-holographic .holo-video-wrapper .holo-anchor {
      position: absolute !important;
      inset: auto !important;
      right: clamp(8px, 2.6vw, 20px) !important;
      left: auto !important; /* avoid earlier left:50% overrides */
      top: calc(-1 * clamp(16px, 5vw, 40px)) !important; /* sit above the card */
      bottom: auto !important;
      transform: none !important;
      margin: 0 !important;
      z-index: 5 !important;
      display: block !important; /* ensure visible even if earlier rules hid anchors */
      opacity: 1 !important; /* override .reveal initial opacity */
      pointer-events: none; /* keeps player controls clickable */
    }

    .page-holographic .holo-video-wrapper .holo-anchor img.holo-enhance-glasses {
      width: clamp(64px, 16%, 120px) !important; /* scales with player width */
      height: auto !important;
      filter: drop-shadow(0 12px 36px rgba(114,9,183,.5));
      animation: none !important;
    }

    /* Safety: kill legacy absolute placements on these sizes */
    .page-holographic .holo-enhance .holo-enhance-glasses,
    .page-holographic .holo-enhance .holo-section-title,
    .page-holographic .holo-enhance .holo-enhance-content {
      /* ensure no leftover absolute rules leak in */
      will-change: auto;
    }
  }

  @media (max-width: 420px) {
    .page-holographic section.holo-enhance {
      grid-template-rows: 50vh auto !important;
    }
    .page-holographic .holo-video-wrapper .holo-anchor { display: block !important; right: clamp(8px, 4vw, 16px) !important; left: auto !important; top: calc(-1 * clamp(14px, 8vw, 28px)) !important; bottom: auto !important; opacity: 1 !important; }
    .page-holographic .holo-video-wrapper .holo-anchor img.holo-enhance-glasses { width: clamp(56px, 22vw, 96px) !important; }
  }

  /* Force-show enhance glasses on very small widths (≤360px) */
  @media (max-width: 360px) {
    .page-holographic .holo-enhance .holo-video-wrapper .holo-anchor { display: block !important; right: clamp(6px, 5vw, 14px) !important; left: auto !important; top: calc(-1 * clamp(12px, 9vw, 24px)) !important; bottom: auto !important; z-index: 5 !important; opacity: 1 !important; }
    .page-holographic .holo-video-wrapper .holo-anchor img.holo-enhance-glasses { width: clamp(50px, 24vw, 84px) !important; }
  }

  @media (min-width: 1280px) and (max-width: 1366px) {
    .page-holographic .holo-enhance .holo-enhance-content { margin-top: clamp(18px, 3.6vh, 32px) !important; margin-bottom: clamp(20px, 4vh, 36px) !important; }
    .page-holographic section.holo-enhance { margin-bottom: clamp(18px, 4vh, 42px) !important; }
    .page-holographic .holo-video-wrapper { margin-left: auto !important; margin-right: auto !important; }
  }

  /* Keep the original absolute composition ONLY for large desktop */
  @media (min-width: 1367px) {
    /* existing absolute rules for title/content/glasses already defined above */
  }

  /* ===== Mobile/Tablet simplification for post-video sections (≤1024px) ===== */
  @media (max-width: 1024px) {
    /* Align with flex rebuild: no panel padding/gaps, thin separators handled elsewhere */
    .page-holographic .holo-split {
      position: relative !important;
      display: flex !important;
      min-height: clamp(360px, 55vh, 520px) !important;
      padding: 0 !important;
      background: transparent !important;
      border: none !important;
      margin: 0 !important;
    }
    
    /* Do NOT neutralize decorative halves/strips - only normalize right content */
    .page-holographic .holo-split-right {
      position: static !important;
      inset: auto !important;
      width: auto !important;
      height: auto !important;
      background: #3d3d3d !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      margin: 0 !important;
      min-width: 0 !important;
    }

    /* Hide all decorative/visual assets in these sections */
    .page-holographic .holo-split .holo-anchor,
    .page-holographic .holo-split .holo-split-glasses,
    .page-holographic .holo-realworld .holo-split-photo {
      display: none !important;
    }
    /* Show decorative halves/strips so the layout matches design */
    .page-holographic .holo-interactions .holo-split-left,
    .page-holographic .holo-interactions .holo-split-strip,
    .page-holographic .holo-realworld .holo-split-right,
    .page-holographic .holo-realworld .holo-split-strip,
    .page-holographic .holo-comms .holo-split-left,
    .page-holographic .holo-comms .holo-split-strip{
      display:block !important;
    }

    /* Make sure the text container fills the panel on each section */
    .page-holographic .holo-interactions .holo-split-right,
    .page-holographic .holo-comms .holo-split-right,
    .page-holographic .holo-realworld .holo-split-left{
      flex: 1 1 auto !important;
      min-width: 0 !important;
      width: auto !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      padding: 0 !important;
    }

    /* Make sure the copy block is centered and sized like your reference */
    .page-holographic .holo-split-content {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      gap: 14px !important;
      margin: 0 auto !important;
      max-width: min(44ch, 88vw) !important;
    }

    /* Titles & text scale comfortably on mobile/tablet */
    .page-holographic .holo-split-title {
      font-size: clamp(24px, 5.6vw, 28px) !important;
      line-height: 1.2 !important;
      margin: 0 0 10px !important;
      font-weight: 200 !important;
      text-align: center !important;
    }
    .page-holographic .holo-split-text {
      font-size: clamp(13px, 3.6vw, 15px) !important;
      line-height: 1.65 !important;
      color: rgba(255,255,255,.88) !important;
      margin: 0 !important;
      max-width: none !important; /* governed by .holo-split-content */
    }

    /* Remove decorative realworld glows */
    .page-holographic .holo-realworld .holo-split-right::before,
    .page-holographic .holo-realworld .holo-split-right::after{
      content: none !important; display: none !important; background: none !important;
    }

    /* Ensure content is visible even if reveal script doesn't trigger */
    .page-holographic .holo-split .reveal{ opacity:1 !important; transform:none !important }

    /* Mobile simplification handled above; further overrides appended below */
  }

  /* ===== Mobile/Tablet stacked panels: gradient accent bars (≤1024px) ===== */
  @media (max-width: 1024px) {
  /* Base: ensure panels can host pseudo-elements and content sits above */
  .page-holographic .holo-split { overflow: hidden !important; }
  .page-holographic .holo-split-content { position: relative !important; z-index: 1 !important; }

  /* Shared bar width and spacing */
  .page-holographic .holo-interactions,
  .page-holographic .holo-realworld,
  .page-holographic .holo-comms { --barW: clamp(20px, 3.2vw, 30px); }

  /* Effortless Interactions — left blue gradient bar */
  .page-holographic .holo-interactions { padding-left: calc(20px + var(--barW) + clamp(16px, 2.2vw, 28px)) !important; }
  .page-holographic .holo-interactions::before {
    content: "";
    position: absolute; top: 1px; bottom: 1px; left: 0; width: var(--barW);
    background: linear-gradient(90deg, #0e1a3a 0%, #1f4bcc 55%, rgba(15,15,15,0) 100%);
    pointer-events: none; z-index: 0;
  }

  /* Built for Real World Use — right purple/indigo gradient bar with soft fade */
  .page-holographic .holo-realworld { padding-right: calc(20px + var(--barW) + clamp(16px, 2.2vw, 28px)) !important; }
  .page-holographic .holo-realworld::before {
    content: "";
    position: absolute; top: 1px; bottom: 1px; right: 0; width: var(--barW);
    background: linear-gradient(270deg, #6a2edb 0%, #4c1599 55%, rgba(15,15,15,0) 100%);
    pointer-events: none; z-index: 0;
  }

  /* Communication Engine — left magenta→violet gradient bar */
  .page-holographic .holo-comms { padding-left: calc(20px + var(--barW) + clamp(16px, 2.2vw, 28px)) !important; }
  .page-holographic .holo-comms::before {
    content: "";
    position: absolute; top: 1px; bottom: 1px; left: 0; width: var(--barW);
    background: linear-gradient(90deg, #b0127f 0%, #7a2bcf 60%, rgba(15,15,15,0) 100%);
    pointer-events: none; z-index: 0;
  }
  }
  
  /* ===== DISABLED - Moved to production ready section below ===== */
  @media (max-width: 1024px) and (max-width: 0px) {
    /* Variables and panel container */
    .page-holographic .holo-split {
      --tileW: clamp(18%, 26vw, 28%) !important;
      --stripW: 24px !important;
      position: relative !important;
      display: block !important;
      padding: 0 !important;
      min-height: clamp(420px, 60vh, 620px) !important;
      background: transparent !important;
      overflow: hidden !important;
      border-top: 0 !important;
    }
    .page-holographic .holo-split:last-of-type { border-bottom: 0 !important; }

    /* Clear paddings added by accent-bars block and remove section-level ::before bars */
    .page-holographic .holo-interactions,
    .page-holographic .holo-realworld,
    .page-holographic .holo-comms { padding-left: 0 !important; padding-right: 0 !important; }
    .page-holographic .holo-interactions::before,
    .page-holographic .holo-realworld::before,
    .page-holographic .holo-comms::before { content: none !important; display: none !important; }

    /* Ensure split pieces are visible and reset geometry to absolute */
    .page-holographic .holo-interactions .holo-split-left,
    .page-holographic .holo-interactions .holo-split-strip,
    .page-holographic .holo-interactions .holo-split-right,
    .page-holographic .holo-realworld .holo-split-left,
    .page-holographic .holo-realworld .holo-split-strip,
    .page-holographic .holo-realworld .holo-split-right,
    .page-holographic .holo-comms .holo-split-left,
    .page-holographic .holo-comms .holo-split-strip,
    .page-holographic .holo-comms .holo-split-right {
      display: block !important;
      position: absolute !important;
      inset: auto !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* Interactions (blue tile left) */
    .page-holographic .holo-interactions .holo-split-left {
      left: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--tileW) !important;
      background: linear-gradient(135deg, #0a0e27 0%, #1e3a8a 35%, #2563eb 70%, #3b82f6 100%) !important; z-index: 2 !important;
    }
    .page-holographic .holo-interactions .holo-split-strip {
      left: var(--tileW) !important; top: 0 !important; bottom: 0 !important; width: var(--stripW) !important; background:#000 !important; z-index: 3 !important;
    }
    .page-holographic .holo-interactions .holo-split-right {
      left: calc(var(--tileW) + var(--stripW)) !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
      background: #3d3d3d !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
      padding-left: clamp(20px, 6vw, 56px) !important; z-index: 1 !important;
    }

    /* Real World (content left gray; strip; dark tile right with glows) */
    .page-holographic .holo-realworld .holo-split-left {
      left: 0 !important; right: calc(var(--tileW) + var(--stripW)) !important; top: 0 !important; bottom: 0 !important;
      background: #2a2a2a !important; display:flex !important; align-items:center !important; justify-content:center !important;
      padding-right: clamp(20px, 6vw, 56px) !important; z-index: 1 !important;
    }
    .page-holographic .holo-realworld .holo-split-strip {
      right: var(--tileW) !important; top: 0 !important; bottom: 0 !important; width: var(--stripW) !important; background:#000 !important; z-index:3 !important;
    }
    .page-holographic .holo-realworld .holo-split-right {
      right: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--tileW) !important; background:#1a1a1a !important; z-index:2 !important;
    }
    .page-holographic .holo-realworld .holo-split-right::before {
      content: "" !important; position:absolute !important; inset:0 !important; background: radial-gradient(400px 260px at 90% 10%, rgba(59,130,246,.35), transparent 60%) !important; pointer-events:none !important; z-index:0 !important;
    }
    .page-holographic .holo-realworld .holo-split-right::after {
      content: "" !important; position:absolute !important; inset:0 !important; background: radial-gradient(380px 240px at 10% 90%, rgba(114,9,183,.35), transparent 62%) !important; pointer-events:none !important; z-index:0 !important;
    }

    /* Comms (purple tile left) */
    .page-holographic .holo-comms .holo-split-left {
      left: 0 !important; top: 0 !important; bottom: 0 !important; width: var(--tileW) !important;
      background: linear-gradient(135deg, #10002b 0%, #240046 35%, #5a189a 70%, #9d4edd 100%) !important; z-index: 2 !important;
    }
    .page-holographic .holo-comms .holo-split-strip {
      left: var(--tileW) !important; top: 0 !important; bottom: 0 !important; width: var(--stripW) !important; background:#000 !important; z-index:3 !important;
    }
    .page-holographic .holo-comms .holo-split-right {
      left: calc(var(--tileW) + var(--stripW)) !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
      background: #3d3d3d !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important;
      padding-left: clamp(20px, 6vw, 56px) !important; z-index: 1 !important;
    }

    /* No images at ≤1024px */
    .page-holographic .holo-split .holo-anchor,
    .page-holographic .holo-split .holo-split-glasses,
    .page-holographic .holo-realworld .holo-split-photo { display:none !important; }

    /* Constrain copy block */
    .page-holographic .holo-split-content { max-width: min(550px, 88vw) !important; margin: 0 auto !important; text-align:center !important; }
  }

}

/* ===== ULTIMATE END-OF-FILE OVERRIDES (win cascade) ===== */
@media (min-width: 360px) and (max-width: 1366px) {
  /* Remove any vertical padding that creates visible gaps */
  .page-holographic .holo-split {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* No thick section borders at all */
  .page-holographic .holo-interactions,
  .page-holographic .holo-realworld,
  .page-holographic .holo-comms {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove all panel separators */
  .page-holographic .holo-split { border-bottom: 0 !important; }
  .page-holographic .holo-split:last-of-type { border-bottom: 0 !important; }

  /* Make sure the vertical strip exists between tile and content */
  .page-holographic .holo-split-strip {
    display: block !important;
    flex: 0 0 10px !important;
    width: 10px !important;
    background: #000 !important;
  }

  /* First panel should not have a thick top border */
  .page-holographic .holo-interactions { border-top: 0 !important; }
}

/* ============================================
   PRODUCTION READY - v2025.10.30
   Clean, consolidated fixes for split panels
   ============================================ */

@layer holographic {

  /* ============================================
     SPLIT PANELS REBUILD: 360×780 to 1366×768
     Clean flexbox approach for proper text and bars
     ============================================ */
  @media (min-width: 360px) and (max-width: 1366px) {
    
    /* Ensure page has black background and no gaps */
    .page-holographic {
      background: #000 !important;
    }
    
    /* Remove any potential gaps between ALL sections */
    .page-holographic section {
      margin: 0 !important;
      padding: 0 !important;
    }
    
    /* Parent sections - no thick borders; spacing removed */
    .page-holographic .holo-interactions,
    .page-holographic .holo-realworld,
    .page-holographic .holo-comms {
      position: relative !important;
      border-bottom: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      background: transparent !important;
    }
    
    /* Main container uses flexbox - no borders or gaps */
    .page-holographic .holo-split {
      display: flex !important;
      flex-direction: row !important;
      min-height: clamp(400px, 55vh, 580px) !important;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
      align-items: stretch !important;
      gap: 0 !important;
      column-gap: 0 !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
      border: none !important; /* Remove all borders */
    }
    
    /* Reset all split pieces to static positioning */
    .page-holographic .holo-split .holo-split-left,
    .page-holographic .holo-split .holo-split-strip,
    .page-holographic .holo-split .holo-split-right {
      display: block !important;
      position: static !important;
      margin: 0 !important;
      padding: 0 !important;
      flex-shrink: 0 !important;
    }
    
    /* INTERACTIONS - Blue gradient left */
    .page-holographic .holo-interactions .holo-split {
      flex-direction: row !important;
    }
    
    .page-holographic .holo-interactions .holo-split-left {
      width: clamp(80px, 22%, 120px) !important;
      background: linear-gradient(135deg, #0a0e27 0%, #1e3a8a 35%, #2563eb 70%, #3b82f6 100%) !important;
    }
    
    .page-holographic .holo-interactions .holo-split-strip {
      width: 10px !important;
      background: #000 !important;
    }
    
    .page-holographic .holo-interactions .holo-split-right {
      flex: 1 !important;
      background: #3d3d3d !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 40px 35px !important;
      min-width: 0 !important; /* Prevent flex child from overflowing */
    }
    
    /* REAL WORLD - Purple gradient right */
    .page-holographic .holo-realworld .holo-split {
      flex-direction: row !important;
    }
    
    .page-holographic .holo-realworld .holo-split-left {
      flex: 1 !important;
      background: #2a2a2a !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 40px 35px !important;
      min-width: 0 !important; /* Prevent flex child from overflowing */
    }
    
    .page-holographic .holo-realworld .holo-split-strip {
      width: 10px !important;
      background: #000 !important;
      order: 2 !important; /* Put strip after left content */
    }
    
    .page-holographic .holo-realworld .holo-split-right {
      width: clamp(80px, 22%, 120px) !important;
      background: linear-gradient(135deg, #240046 0%, #3c096c 35%, #5a189a 70%, #7209b7 100%) !important;
      order: 3 !important; /* Put tile at the end */
    }
    
    /* COMMUNICATIONS - Purple gradient left */
    .page-holographic .holo-comms .holo-split {
      flex-direction: row !important;
    }
    
    .page-holographic .holo-comms .holo-split-left {
      width: clamp(80px, 22%, 120px) !important;
      background: linear-gradient(135deg, #10002b 0%, #240046 35%, #5a189a 70%, #9d4edd 100%) !important;
    }
    
    .page-holographic .holo-comms .holo-split-strip {
      width: 10px !important;
      background: #000 !important;
    }
    
    .page-holographic .holo-comms .holo-split-right {
      flex: 1 !important;
      background: #3d3d3d !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 40px 35px !important;
      min-width: 0 !important; /* Prevent flex child from overflowing */
    }
    
    /* TEXT CONTENT - Properly contained within flex parent */
    .page-holographic .holo-split-content {
      width: 100% !important;
      max-width: 450px !important;
      margin: 0 auto !important;
      text-align: center !important;
      padding: 20px !important;
      box-sizing: border-box !important;
    }

    /* TEXT STYLING - Clean and scalable */
    .page-holographic .holo-split-title {
      font-size: clamp(24px, 5.5vw, 32px) !important;
      line-height: 1.2 !important;
      margin: 0 0 16px 0 !important;
      font-weight: 200 !important;
      word-wrap: break-word !important;
    }

    /* === OVERRIDES: remove gaps and ensure strips show === */
    /* Remove thick borders on parent sections that create big gaps */
    .page-holographic .holo-interactions,
    .page-holographic .holo-realworld,
    .page-holographic .holo-comms {
      border-top: 0 !important;
      border-bottom: 0 !important;
      background: transparent !important;
    }

    /* Remove all panel separators */
    .page-holographic .holo-split { border-bottom: 0 !important; }
    .page-holographic .holo-split:last-of-type { border-bottom: 0 !important; }

    /* Explicitly re-show hidden decorative halves/strips with higher specificity */
    .page-holographic .holo-interactions .holo-split-left,
    .page-holographic .holo-interactions .holo-split-strip,
    .page-holographic .holo-realworld .holo-split-right,
    .page-holographic .holo-realworld .holo-split-strip,
    .page-holographic .holo-comms .holo-split-left,
    .page-holographic .holo-comms .holo-split-strip {
      display: block !important;
    }

    /* Ensure strip dimensions and color are correct on all panels */
    .page-holographic .holo-interactions .holo-split-strip,
    .page-holographic .holo-realworld .holo-split-strip,
    .page-holographic .holo-comms .holo-split-strip {
      width: 10px !important;
      background: #000 !important;
    }
    
    .page-holographic .holo-split-text {
      font-size: clamp(14px, 3.5vw, 16px) !important;
      line-height: 1.6 !important;
      color: rgba(255,255,255,0.9) !important;
      margin: 0 !important;
      word-wrap: break-word !important;
    }
    
    /* Hide decorative images */
    .page-holographic .holo-split .holo-anchor,
    .page-holographic .holo-split-glasses,
    .page-holographic .holo-realworld .holo-split-photo {
      display: none !important;
    }
    
    /* Remove ALL conflicting pseudo-elements from sections */
    .page-holographic .holo-interactions::before,
    .page-holographic .holo-interactions::after,
    .page-holographic .holo-realworld::before,
    .page-holographic .holo-realworld::after,
    .page-holographic .holo-comms::before,
    .page-holographic .holo-comms::after {
      content: none !important;
      display: none !important;
    }
    
    /* First panel: no thick top border */
    .page-holographic .holo-interactions {
      border-top: 0 !important;
    }
  }
  
  /* NARROW SCREENS - 360-430px */
  @media (min-width: 360px) and (max-width: 430px) {
    .page-holographic .holo-split {
      min-height: clamp(380px, 55vh, 480px) !important;
    }
    
    /* Narrower tiles and strips */
    .page-holographic .holo-interactions .holo-split-left,
    .page-holographic .holo-comms .holo-split-left,
    .page-holographic .holo-realworld .holo-split-right {
      width: clamp(70px, 20%, 100px) !important;
    }
    
    .page-holographic .holo-split-strip {
      width: 8px !important;
    }
    
    .page-holographic .holo-interactions,
    .page-holographic .holo-realworld,
    .page-holographic .holo-comms {
      border-bottom-width: 0 !important;
    }
    
    .page-holographic .holo-interactions {
      border-top-width: 0 !important;
    }
    
    /* Smaller padding for narrow screens */
    .page-holographic .holo-interactions .holo-split-right,
    .page-holographic .holo-comms .holo-split-right,
    .page-holographic .holo-realworld .holo-split-left {
      padding: 30px 25px !important;
    }
    
    .page-holographic .holo-split-content {
      padding: 15px !important;
      max-width: 380px !important;
    }
    
    .page-holographic .holo-split-title {
      font-size: clamp(22px, 5.8vw, 26px) !important;
    }
    
    .page-holographic .holo-split-text {
      font-size: clamp(13px, 3.6vw, 15px) !important;
    }
  }
  
  /* TABLET ADJUSTMENTS - 768-1024px */
  @media (min-width: 768px) and (max-width: 1024px) {
    .page-holographic .holo-split {
      min-height: clamp(450px, 50vh, 600px) !important;
    }
    
    /* Wider tiles and strips for tablets */
    .page-holographic .holo-interactions .holo-split-left,
    .page-holographic .holo-comms .holo-split-left,
    .page-holographic .holo-realworld .holo-split-right {
      width: clamp(100px, 26%, 160px) !important;
    }
    
    .page-holographic .holo-split-strip {
      width: 12px !important;
    }
    
    .page-holographic .holo-interactions,
    .page-holographic .holo-realworld,
    .page-holographic .holo-comms {
      border-bottom-width: 0 !important;
    }
    
    .page-holographic .holo-interactions {
      border-top-width: 0 !important;
    }
    
    /* More generous padding for tablets */
    .page-holographic .holo-interactions .holo-split-right,
    .page-holographic .holo-comms .holo-split-right,
    .page-holographic .holo-realworld .holo-split-left {
      padding: 50px 40px !important;
    }
    
    .page-holographic .holo-split-content {
      padding: 25px !important;
      max-width: 500px !important;
    }
    
    .page-holographic .holo-split-title {
      font-size: clamp(28px, 4.5vw, 34px) !important;
    }
    
    .page-holographic .holo-split-text {
      font-size: clamp(15px, 3vw, 17px) !important;
    }
  }

  /* A) Left purple gradient with fade for mobile/tablet stacked panels */
  /* Only for very small screens below 360px where desktop split doesn't apply */
  @media (max-width: 359px) {
    /* Consistent purple gradient bar for all three panels */
    .page-holographic .holo-interactions,
    .page-holographic .holo-realworld,
    .page-holographic .holo-comms {
      --barW: clamp(18px, 3.2vw, 28px);
      position: relative !important;
    }
    
    /* Remove any existing gradient bars first */
    .page-holographic .holo-interactions::before,
    .page-holographic .holo-realworld::before,
    .page-holographic .holo-comms::before {
      content: none !important;
    }
    
    /* Apply consistent purple gradient to all panels */
    .page-holographic .holo-interactions::after,
    .page-holographic .holo-realworld::after,
    .page-holographic .holo-comms::after {
      content: "";
      position: absolute;
      left: 0;
      top: 1px;
      bottom: 1px;
      width: var(--barW);
      background: linear-gradient(90deg, #6a2edb 0%, #7a2bcf 55%, rgba(15,15,15,0) 100%);
      z-index: 0;
      pointer-events: none;
    }
    
    /* Ensure text content sits above gradient bar */
    .page-holographic .holo-split-content {
      position: relative !important;
      z-index: 1 !important;
    }
  }

  /* B) Thinner black strips for split sections */
  /* Override strip width globally */
  .page-holographic .holo-enhance,
  .page-holographic .holo-split {
    --stripW: clamp(8px, 2.2vw, 12px) !important;
  }
  
  /* Apply thin strip width to all split strips */
  .page-holographic .holo-interactions .holo-split-strip,
  .page-holographic .holo-realworld .holo-split-strip,
  .page-holographic .holo-comms .holo-split-strip,
  .page-holographic .holo-enhance-strip {
    width: var(--stripW) !important;
    background: #000 !important;
  }
  
  /* Adjust enhance strip positioning for thinner width */
  .page-holographic .holo-enhance-strip {
    right: calc(var(--tileW) + (var(--stripW) * 0.5)) !important;
  }

  /* C) Remove all panel separators */
  .page-holographic .holo-split {
    border-top: 0 !important;
    box-shadow: none !important;
  }
  
  .page-holographic .holo-split:last-of-type {
    border-bottom: 0 !important;
  }

  /* D) Refined text sizing and wrapping */
  .page-holographic .holo-split-title {
    font-size: clamp(24px, 5.6vw, 30px) !important;
    line-height: 1.18 !important;
    text-wrap: balance !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
    margin: 0 0 12px !important;
  }
  
  .page-holographic .holo-split-text {
    font-size: clamp(13px, 3.6vw, 16px) !important;
    line-height: 1.65 !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
  
  .page-holographic .holo-split-content {
    max-width: min(44ch, 88vw) !important;
    margin: 0 auto !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }
  
  /* Prevent heading breaks globally */
  .page-holographic h1,
  .page-holographic h2,
  .page-holographic h3,
  .page-holographic .holo-section-title,
  .page-holographic .holo-hero-title {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: manual !important;
    text-wrap: balance !important;
  }
  
  /* Allow wrapping for body text */
  .page-holographic p,
  .page-holographic a,
  .page-holographic li {
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }

  /* E) Ensure no overlap on mobile/tablet */
  @media (max-width: 1024px) {
    /* Already hidden, reinforce */
    .page-holographic .holo-split .holo-anchor,
    .page-holographic .holo-split-glasses,
    .page-holographic .holo-realworld .holo-split-photo {
      display: none !important;
      visibility: hidden !important;
    }
    
    /* Keep enhance video wrapper contained */
    .page-holographic .holo-enhance .holo-video-wrapper {
      position: relative !important;
      z-index: 4 !important;
      max-width: 100% !important;
    }
    
    .page-holographic .holo-enhance .holo-anchor {
      pointer-events: none !important;
      z-index: 3 !important;
    }
  }

  /* F) No horizontal scrollbars */
  .page-holographic {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  .page-holographic > * {
    max-width: 100% !important;
  }
  
  .page-holographic section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Responsive adjustments for specific breakpoints */

  /* ===== FINAL OVERRIDES (placed last to win cascade) ===== */
  @media (min-width: 360px) and (max-width: 1366px) {
    /* Remove any section-level borders that create big black gaps */
    .page-holographic .holo-interactions,
    .page-holographic .holo-realworld,
    .page-holographic .holo-comms {
      border: 0 !important;
    }

    /* Remove all borders to eliminate black bars */
    .page-holographic .holo-split { position: relative !important; border: none !important; border-bottom: 0 !important; }

    /* Guarantee the vertical black strip as a dedicated flex item */
    .page-holographic .holo-split-strip { 
      display: block !important; 
      flex: 0 0 10px !important; 
      width: 10px !important; 
      background: #000 !important; 
    }

    /* Safety: remove any top border added to the first panel */
    .page-holographic .holo-interactions { border-top: 0 !important; }

    /* Ensure Interactions order => tile (1), strip (2), content (3) */
    .page-holographic .holo-interactions .holo-split-left { order: 1 !important; }
    .page-holographic .holo-interactions .holo-split-strip { order: 2 !important; }
    .page-holographic .holo-interactions .holo-split-right { order: 3 !important; }
  }
  
  /* iPhone-class devices (360-430px) */
  @media (max-width: 430px) {
    .page-holographic .holo-split {
      min-height: clamp(320px, 55vh, 480px) !important;
      padding: 0 !important;
    }
    /* Remove bottom borders completely */
    .page-holographic .holo-split { border-bottom-width: 0 !important; }
    
    .page-holographic .holo-split-title {
      font-size: clamp(22px, 5.8vw, 26px) !important;
    }
    
    .page-holographic .holo-split-text {
      font-size: clamp(12px, 3.4vw, 14px) !important;
    }
    
    /* Adjust gradient bar for smallest screens */
    .page-holographic .holo-interactions::after,
    .page-holographic .holo-realworld::after,
    .page-holographic .holo-comms::after {
      width: clamp(16px, 3vw, 24px) !important;
    }
  }

  /* iPad portrait (768-834px) */
  @media (min-width: 768px) and (max-width: 834px) {
    .page-holographic .holo-split {
      min-height: clamp(420px, 50vh, 580px) !important;
      padding: 0 !important;
    }
    /* Remove bottom borders completely */
    .page-holographic .holo-split { border-bottom-width: 0 !important; }
    
    .page-holographic .holo-split-title {
      font-size: clamp(26px, 4.2vw, 32px) !important;
    }
    
    .page-holographic .holo-split-text {
      font-size: clamp(14px, 2.8vw, 17px) !important;
    }
  }

  /* iPad Pro portrait (1024-1366px) */
  @media (min-width: 1024px) and (max-width: 1366px) {
    .page-holographic .holo-split {
      min-height: clamp(480px, 45vh, 640px) !important;
    }
    
    /* Adjust tile and strip positioning for thinner strips */
    .page-holographic .holo-interactions .holo-split-left,
    .page-holographic .holo-comms .holo-split-left {
      width: calc(var(--tileW) - 2px) !important;
    }
    
    .page-holographic .holo-interactions .holo-split-strip,
    .page-holographic .holo-comms .holo-split-strip {
      left: calc(var(--tileW) - 2px) !important;
    }
    
    .page-holographic .holo-interactions .holo-split-right,
    .page-holographic .holo-comms .holo-split-right {
      left: calc(var(--tileW) + var(--stripW) - 2px) !important;
    }
    
    .page-holographic .holo-realworld .holo-split-right {
      width: calc(var(--tileW) - 2px) !important;
    }
    
    .page-holographic .holo-realworld .holo-split-strip {
      right: calc(var(--tileW) - 2px) !important;
    }
    
    .page-holographic .holo-realworld .holo-split-left {
      right: calc(var(--tileW) + var(--stripW) - 2px) !important;
    }
  }

  /* Desktop refinements (≥1280px) */
  @media (min-width: 1280px) {
    .page-holographic .holo-split-title {
      font-size: clamp(30px, 2.6vw, 36px) !important;
    }
    
    .page-holographic .holo-split-text {
      font-size: clamp(15px, 1.2vw, 17px) !important;
    }
  }

  /* Desktop large (≥1536px): adopt flex split design, no bottom bars */
  @media (min-width: 1536px) {
    /* Panel container */
    .page-holographic .holo-split {
      position: relative !important;
      display: flex !important;
      flex-direction: row !important;
      min-height: clamp(520px, 58vh, 760px) !important;
      margin: 0 !important;
      padding: 0 !important;
      gap: 0 !important;
      column-gap: 0 !important;
      align-items: stretch !important;
      border: none !important;            /* no separators on ≥1536 */
      border-bottom: 0 !important;        /* explicitly remove */
      overflow: hidden !important;
    }

    /* Reset children to flex pieces */
    .page-holographic .holo-split .holo-split-left,
    .page-holographic .holo-split .holo-split-strip,
    .page-holographic .holo-split .holo-split-right {
      position: static !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      flex-shrink: 0 !important;
    }

    /* Show decorative images on large screens */
    .page-holographic .holo-split .holo-anchor,
    .page-holographic .holo-split .holo-split-glasses,
    .page-holographic .holo-realworld .holo-split-photo { display: block !important; opacity: 1 !important; visibility: visible !important; }

    /* Interactions (blue tile left) */
    .page-holographic .holo-interactions .holo-split-left {
      width: var(--tileW) !important;
      background: linear-gradient(135deg, #0a0e27 0%, #1e3a8a 35%, #2563eb 70%, #3b82f6 100%) !important;
      order: 1 !important;
    }
    .page-holographic .holo-interactions .holo-split-strip {
      width: var(--stripW) !important; background:#000 !important; order: 2 !important;
    }
    .page-holographic .holo-interactions .holo-split-right {
      flex: 1 1 auto !important; min-width: 0 !important; order: 3 !important;
      background: #3d3d3d !important; display:flex !important; align-items:center !important; justify-content:center !important;
      padding: 64px 56px !important;
    }

    /* Real World (content left; strip; purple tile right) */
    .page-holographic .holo-realworld .holo-split-left {
      flex: 1 1 auto !important; min-width: 0 !important; order: 1 !important;
      background: #2a2a2a !important; display:flex !important; align-items:center !important; justify-content:center !important;
      padding: 64px 56px !important;
    }
    .page-holographic .holo-realworld .holo-split-strip { width: var(--stripW) !important; background:#000 !important; order: 2 !important; }
    .page-holographic .holo-realworld .holo-split-right {
      width: var(--tileW) !important; order: 3 !important;
      background: linear-gradient(135deg, #240046 0%, #3c096c 35%, #5a189a 70%, #7209b7 100%) !important;
    }

    /* Comms (purple tile left) */
    .page-holographic .holo-comms .holo-split-left {
      width: var(--tileW) !important; order: 1 !important;
      background: linear-gradient(135deg, #10002b 0%, #240046 35%, #5a189a 70%, #9d4edd 100%) !important;
    }
    .page-holographic .holo-comms .holo-split-strip { width: var(--stripW) !important; background:#000 !important; order: 2 !important; }
    .page-holographic .holo-comms .holo-split-right {
      flex: 1 1 auto !important; min-width: 0 !important; order: 3 !important;
      background: #3d3d3d !important; display:flex !important; align-items:center !important; justify-content:center !important;
      padding: 64px 56px !important;
    }

    /* Section wrappers: ensure no borders/padding at this size */
    .page-holographic .holo-interactions,
    .page-holographic .holo-realworld,
    .page-holographic .holo-comms {
      border: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important;
    }
    /* Enhance: shared vars to keep strip flush; thinner tile; shared content width */
    .page-holographic .holo-enhance { --enhTileW: clamp(120px, 10vw, 220px); --enhStripW: 12px; --enhContentW: clamp(640px, 44vw, 920px); }
    .page-holographic .holo-enhance::before { content: none !important; }
    .page-holographic .holo-enhance {
      display: grid !important;
      grid-template-columns: minmax(0, var(--enhContentW)) !important;
      grid-template-rows: auto auto !important;
      align-content: center !important;      /* center title+video as a unit */
      align-items: start !important;
      justify-items: center !important;
      justify-content: center !important;    /* center the column group */
      row-gap: clamp(20px, 3vh, 36px) !important; /* spacing within content column */
      padding: 0 !important;                 /* no padding offset */
      min-height: clamp(680px, 72vh, 920px) !important;
      background: #000 !important;
    }
    /* Right tile and strip occupy their grid columns, full height */
    .page-holographic .holo-enhance-right {
      position: absolute !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
      width: var(--enhTileW) !important; height: auto !important; z-index: 2 !important;
    }
    .page-holographic .holo-enhance-strip {
      position: absolute !important; right: var(--enhTileW) !important; top: 0 !important; bottom: 0 !important;
      width: var(--enhStripW) !important; height: auto !important; background: #000 !important; z-index: 3 !important;
    }
    /* Title and video centered in the left content column */
    .page-holographic .holo-enhance .holo-section-title {
      position: static !important; grid-column: 1 !important; grid-row: 1 !important;
      text-align: center !important; width: var(--enhContentW) !important; max-width: var(--enhContentW) !important; z-index: 4 !important; justify-self: center !important;
      margin: 0 0 clamp(20px, 3vh, 36px) !important; /* spacing managed only in content column */
      padding: 0 !important;
      transform: translateX(clamp(8px, 0.8vw, 16px)) !important; /* subtle right nudge */
    }
    .page-holographic .holo-enhance .holo-enhance-content {
      position: static !important; grid-column: 1 !important; grid-row: 2 !important; z-index: 4 !important; justify-self: center !important;
      width: var(--enhContentW) !important; display: grid !important; place-items: center !important; padding: 0 !important;
    }
    .page-holographic .holo-video-wrapper { width: var(--enhContentW) !important; aspect-ratio: 16 / 9 !important; height: auto !important; padding: 0 !important; }
    .page-holographic .holo-video-wrapper iframe { width: 100% !important; height: 100% !important; }
  }

  /* Strip-centered anchor images and bold titles for split panels (≥1536px) */
  @media (min-width: 1536px) {
    /* Match vars to actual tile widths so anchors center on strips */
    .page-holographic .holo-interactions,
    .page-holographic .holo-comms,
    .page-holographic .holo-realworld { --tileW: clamp(140px, 22%, 280px); --stripW: 12px; }

    /* Keep titles light (revert bold) */
    .page-holographic .holo-interactions .holo-split-title,
    .page-holographic .holo-realworld .holo-split-title,
    .page-holographic .holo-comms .holo-split-title { font-weight: 200 !important; }

    /* Center anchors on the strip; keep above content; non-interactive */
    .page-holographic .holo-split .holo-anchor { position: absolute !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 8 !important; pointer-events: none !important; display: block !important; opacity: 1 !important; }
    /* Ensure images are visible (override earlier hidden rules) */
    .page-holographic .holo-split .holo-split-glasses,
    .page-holographic .holo-realworld .holo-split-photo { display: block !important; }
    .page-holographic .holo-split.holo-interactions .holo-anchor,
    .page-holographic .holo-split.holo-comms .holo-anchor { left: calc(var(--tileW) + (var(--stripW) / 2) + var(--anchorShift, 0px)) !important; }
    .page-holographic .holo-split.holo-realworld .holo-anchor { left: calc(100% - var(--tileW) - (var(--stripW) / 2) + var(--anchorShift, 0px)) !important; }

    /* Proportionate image sizing; avoid touching text */
    .page-holographic .holo-split .holo-anchor img { width: clamp(260px, 24vw, 520px) !important; height: auto !important; }

    /* Extra breathing room so anchors don't visually touch text */
    .page-holographic .holo-interactions .holo-split-right,
    .page-holographic .holo-comms .holo-split-right { padding-left: clamp(96px, 10vw, 160px) !important; }
    .page-holographic .holo-realworld .holo-split-left { padding-right: clamp(96px, 10vw, 160px) !important; }

    /* Neutralize legacy absolute positioning on inner images so the anchor controls centering */
    .page-holographic .holo-interactions .holo-split-glasses,
    .page-holographic .holo-comms .holo-split-glasses,
    .page-holographic .holo-realworld .holo-split-photo {
      position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
      transform: none !important; display: block !important;
    }

    /* Disable strip ::after in favor of img anchors for precision */
    .page-holographic .holo-interactions .holo-split-strip::after,
    .page-holographic .holo-realworld .holo-split-strip::after,
    .page-holographic .holo-comms .holo-split-strip::after { content: none !important; display: none !important; }
  }

  /* Ultrawide screens (≥1800px) */
  @media (min-width: 1800px) {
    .page-holographic .holo-split { min-height: 520px !important; }
    .page-holographic .holo-split-title { font-size: 38px !important; font-weight: 200 !important; }

    /* Keep tile/strip proportions reasonable on very large widths */
    .page-holographic .holo-interactions,
    .page-holographic .holo-comms,
    .page-holographic .holo-realworld { --tileW: clamp(160px, 18%, 340px); --stripW: 12px; }

    /* Ensure anchors remain visible and centered on strips */
    .page-holographic .holo-split .holo-anchor { display:block !important; opacity:1 !important; z-index: 6 !important; }
    .page-holographic .holo-interactions .holo-anchor,
    .page-holographic .holo-comms .holo-anchor { left: calc(var(--tileW) + (var(--stripW) / 2)) !important; }
    .page-holographic .holo-realworld .holo-anchor { left: calc(100% - var(--tileW) - (var(--stripW) / 2)) !important; }

    /* Scale images appropriately for ultrawide */
    .page-holographic .holo-split .holo-anchor img { width: clamp(340px, 20vw, 680px) !important; height: auto !important; }

    /* Maintain breathing room between images and text */
    .page-holographic .holo-interactions .holo-split-right,
    .page-holographic .holo-comms .holo-split-right { padding-left: clamp(120px, 9vw, 200px) !important; }
    .page-holographic .holo-realworld .holo-split-left { padding-right: clamp(120px, 9vw, 200px) !important; }

    /* Fine centering tweak for Enhance title vs video */
    .page-holographic .holo-enhance .holo-section-title { transform: translateX(clamp(10px, 0.6vw, 18px)) !important; }
  }

  /* Ensure anchors visible and centered on all screens >1536px, with a dedicated guard for 1600–1799px */
  @media (min-width: 1600px) and (max-width: 1799.98px) {
    .page-holographic .holo-split .holo-anchor { display: block !important; opacity: 1 !important; z-index: 6 !important; position: absolute !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
    .page-holographic .holo-interactions .holo-anchor,
    .page-holographic .holo-comms .holo-anchor { left: calc(var(--tileW) + (var(--stripW) / 2)) !important; }
    .page-holographic .holo-realworld .holo-anchor { left: calc(100% - var(--tileW) - (var(--stripW) / 2)) !important; }
    .page-holographic .holo-split .holo-anchor img { width: clamp(280px, 22vw, 560px) !important; height: auto !important; }
    .page-holographic .holo-interactions .holo-split-right,
    .page-holographic .holo-comms .holo-split-right { padding-left: clamp(100px, 9vw, 170px) !important; }
    .page-holographic .holo-realworld .holo-split-left { padding-right: clamp(100px, 9vw, 170px) !important; }
  }

  /* Reinforce for ≥1800px at file end so it always wins */
  @media (min-width: 1800px) {
    .page-holographic .holo-split .holo-anchor { display: block !important; opacity: 1 !important; z-index: 7 !important; position: absolute !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
    .page-holographic .holo-interactions .holo-anchor,
    .page-holographic .holo-comms .holo-anchor { left: calc(var(--tileW) + (var(--stripW) / 2)) !important; }
    .page-holographic .holo-realworld .holo-anchor { left: calc(100% - var(--tileW) - (var(--stripW) / 2)) !important; }
    .page-holographic .holo-split .holo-anchor img { width: clamp(340px, 20vw, 680px) !important; height: auto !important; }
    .page-holographic .holo-interactions .holo-split-strip::after,
    .page-holographic .holo-realworld .holo-split-strip::after,
    .page-holographic .holo-comms .holo-split-strip::after {
      width: clamp(360px, 20vw, 720px) !important; aspect-ratio: 2 / 1 !important;
    }
  }

  /* Exact strip-centering for larger desktops (≥1920px) */
  @media (min-width: 1920px) and (max-width: 2559.98px) {
    /* Use anchors for precision */
    .page-holographic .holo-split .holo-anchor { display: block !important; }
    .page-holographic .holo-split .holo-anchor img { width: clamp(380px, 18vw, 680px) !important; height: auto !important; }
    .page-holographic .holo-interactions .holo-split-strip::after,
    .page-holographic .holo-realworld .holo-split-strip::after,
    .page-holographic .holo-comms .holo-split-strip::after { width: clamp(380px, 18vw, 680px) !important; }
    /* Breathing room near the strip */
    .page-holographic .holo-interactions .holo-split-right,
    .page-holographic .holo-comms .holo-split-right { padding-left: clamp(140px, 10vw, 240px) !important; }
    .page-holographic .holo-realworld .holo-split-left { padding-right: clamp(140px, 10vw, 240px) !important; }
    /* Remove purple accent glow on Real World for this range */
    .page-holographic .holo-realworld .holo-split-right::after { background: none !important; }
  }

  /* Ultra HD (≥2560px) */
  @media (min-width: 2560px) and (max-width: 3439.98px) {
    .page-holographic .holo-split .holo-anchor { display: block !important; }
    .page-holographic .holo-split .holo-anchor img { width: clamp(460px, 16vw, 820px) !important; height: auto !important; }
    .page-holographic .holo-interactions .holo-split-strip::after,
    .page-holographic .holo-realworld .holo-split-strip::after,
    .page-holographic .holo-comms .holo-split-strip::after { width: clamp(460px, 16vw, 820px) !important; }
    .page-holographic .holo-interactions .holo-split-right,
    .page-holographic .holo-comms .holo-split-right { padding-left: clamp(160px, 9vw, 260px) !important; }
    .page-holographic .holo-realworld .holo-split-left { padding-right: clamp(160px, 9vw, 260px) !important; }
    /* Remove purple accent glow on Real World for this range */
    .page-holographic .holo-realworld .holo-split-right::after { background: none !important; }
  }

  /* 21:9 and wider (≥3440px) */
  @media (min-width: 3440px) {
    .page-holographic .holo-split .holo-anchor { display: block !important; }
    .page-holographic .holo-split .holo-anchor img { width: clamp(520px, 14vw, 960px) !important; height: auto !important; }
    .page-holographic .holo-interactions .holo-split-strip::after,
    .page-holographic .holo-realworld .holo-split-strip::after,
    .page-holographic .holo-comms .holo-split-strip::after { width: clamp(520px, 14vw, 960px) !important; }
    .page-holographic .holo-interactions .holo-split-right,
  .page-holographic .holo-comms .holo-split-right { padding-left: clamp(180px, 9vw, 300px) !important; }
  .page-holographic .holo-realworld .holo-split-left { padding-right: clamp(180px, 9vw, 300px) !important; }
  /* Remove purple accent glow on Real World for this range */
  .page-holographic .holo-realworld .holo-split-right::after { background: none !important; }
  }

  /* Subtle, GPU-friendly animation base for parallax items on wide screens */
  @media (min-width: 1536px) {
    .holo-anim {
      will-change: transform;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      transition: none; /* rAF-driven transforms; smoothing handled in JS */
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .holo-anim { transition: none !important; }
  }

  /* Center strip images at 1366×768 class (anchor controls position; images static within) */
  @media screen and (min-width: 1280px) and (max-width: 1440px) and (min-height: 700px) and (max-height: 820px) {
    /* Ensure anchor is positioned relative to the split container */
    .page-holographic .holo-split { position: relative !important; }
    /* Match flex rebuild geometry so anchor math is correct */
    .page-holographic .holo-split { --tileW: 28%; --stripW: 24px; }
    /* Ensure anchors are active */
    .page-holographic .holo-split .holo-anchor { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 6 !important; position: absolute !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
    /* Exact strip center for left-strip sections */
    .page-holographic .holo-interactions .holo-anchor,
    .page-holographic .holo-comms .holo-anchor { left: calc(var(--tileW) + (var(--stripW) / 2)) !important; }
    /* Exact strip center for right-strip section */
    .page-holographic .holo-realworld .holo-anchor { left: calc(100% - var(--tileW) - (var(--stripW) / 2)) !important; }

    /* Force 1366 geometry to mirror large-desktop look: 28% tile, 24px strip */
    .page-holographic .holo-interactions .holo-split-left,
    .page-holographic .holo-comms .holo-split-left { flex: 0 0 28% !important; width: 28% !important; }
    .page-holographic .holo-realworld .holo-split-right { flex: 0 0 28% !important; width: 28% !important; }
    .page-holographic .holo-interactions .holo-split-strip,
    .page-holographic .holo-comms .holo-split-strip { flex: 0 0 24px !important; width: 24px !important; }
    .page-holographic .holo-realworld .holo-split-strip { flex: 0 0 24px !important; width: 24px !important; }
    /* Center anchors using fixed calc that matches the geometry above */
    .page-holographic .holo-interactions .holo-anchor,
    .page-holographic .holo-comms .holo-anchor { left: calc(28% + 12px) !important; }
    .page-holographic .holo-realworld .holo-anchor { left: calc(100% - 28% - 12px) !important; }
    /* Reset inner images to be centered within anchor and size for this class */
    .page-holographic .holo-interactions .holo-split-glasses,
    .page-holographic .holo-comms .holo-split-glasses,
    .page-holographic .holo-realworld .holo-split-photo {
      display: block !important; visibility: visible !important;
      position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
      margin: 0 !important; transform: none !important; height: auto !important;
    }
    /* Make sure reveal class doesn't hide them at this viewport */
    .page-holographic .holo-split .reveal { opacity: 1 !important; transform: none !important; }
    .page-holographic .holo-interactions .holo-split-glasses,
    .page-holographic .holo-comms .holo-split-glasses { width: clamp(208px, 17.6vw, 288px) !important; }
    .page-holographic .holo-realworld .holo-split-photo { width: clamp(240px, 19.2vw, 320px) !important; }
  }
  /* Center strip images at 1024×1366 class (portrait desktop/tablet) */
  @media screen and (min-width: 1000px) and (max-width: 1060px) and (min-height: 1300px) and (max-height: 1400px) {
    /* Ensure anchor is positioned relative to the split container */
    .page-holographic .holo-split { position: relative !important; }
    /* Match flex rebuild geometry so anchor math is correct */
    .page-holographic .holo-split { --tileW: clamp(80px, 22%, 120px); --stripW: 10px; }
    .page-holographic .holo-split .holo-anchor { display: none !important; visibility: hidden !important; opacity: 0 !important; z-index: 6 !important; position: absolute !important; top: 50% !important; transform: translate(-50%, -50%) !important; }
    .page-holographic .holo-interactions .holo-anchor,
    .page-holographic .holo-comms .holo-anchor { left: calc(var(--tileW) + (var(--stripW) / 2)) !important; }
    .page-holographic .holo-realworld .holo-anchor { left: calc(100% - var(--tileW) - (var(--stripW) / 2)) !important; }
    .page-holographic .holo-interactions .holo-split-glasses,
    .page-holographic .holo-comms .holo-split-glasses,
    .page-holographic .holo-realworld .holo-split-photo {
      display: none !important; visibility: hidden !important;
      position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
      margin: 0 !important; transform: none !important; height: auto !important;
    }
    /* Hidden at this viewport, no sizing needed */
  }

  /* Final 1366-class landscape fix (unlayered to win cascade) */
  @media screen and (min-width: 1360px) and (max-width: 1380px) and (min-height: 720px) and (max-height: 800px) {
    /* Container-owned background: section grows with content, owns all backgrounds */
    body.page-holographic section.holo-enhance {
      position: relative !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: 44vh auto !important;
      row-gap: 0 !important; /* eliminate seam */
      height: auto !important;  /* content-driven height */
      min-height: auto !important;  /* no viewport cap; grow with content */
      margin: 0 !important;
      padding: 0 !important;
      /* Layered background: black band (0-44vh) + photo (44vh-bottom) on single element */
      background-image: linear-gradient(#000 0 44vh, rgba(0,0,0,0) 44vh), url('https://static.wixstatic.com/media/044386_5ec0b31670d346fd928972391f844307~mv2.jpg') !important;
      background-size: auto, cover !important;
      background-position: top, center top !important;
      background-repeat: no-repeat, no-repeat !important;
      overflow: hidden !important;
      isolation: isolate !important;
    }
    /* Turn off decorative siblings - they don't paint/limit backgrounds here */
    body.page-holographic section.holo-enhance .holo-enhance-left,
    body.page-holographic .holo-enhance-strip,
    body.page-holographic .holo-enhance-right { display: none !important; }
    /* Ensure content participates in flow and has breathing room */
    body.page-holographic .holo-enhance .holo-enhance-content {
      position: relative !important;
      left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
      transform: none !important;
      margin: 0 auto !important;
      width: min(92%, 900px) !important;
      padding-block: 96px !important; /* ~80–100px breathing room above/below video */
    }
    /* Ensure video wrapper stays in painted area - no transforms/negative margins */
    body.page-holographic .holo-video-wrapper { position: relative !important; transform: none !important; }
    /* Prevent next section border/shadow from showing under video */
    body.page-holographic section.holo-enhance + * {
      border-top: 0 !important;
      margin-top: 0 !important;
      box-shadow: none !important;
    }
  }

  /* Remove all panel separators that appear as black bars across resolutions */
  .page-holographic .holo-split{ border:0 !important; border-bottom:0 !important; border-top:0 !important }
  .page-holographic .holo-split:last-of-type{ border-bottom:0 !important }
  .page-holographic .holo-split + .holo-cta{ border-top:0 !important }
}

/* ==============================================
   FINAL FIXES - OUTSIDE @LAYER TO WIN CASCADE
   ============================================== */

/* Fix button text color - overrides global a{color:inherit} from styles.css */
.page-holographic .btn-holo-dark,
.page-holographic a.btn-holo-dark,
.page-holographic .holo-cta .btn-holo-dark,
.page-holographic .holo-cta a.btn-holo-dark,
a.btn-holo-dark { 
  color: #fff !important; 
  text-decoration: none !important;
}

/* Hover state to ensure text stays white */
.page-holographic .btn-holo-dark:hover,
.page-holographic a.btn-holo-dark:hover,
.page-holographic .holo-cta .btn-holo-dark:hover,
.page-holographic .holo-cta a.btn-holo-dark:hover,
a.btn-holo-dark:hover {
  color: #fff !important;
}

/* Remove any remaining borders on panels at ALL resolutions */
@media all {
  .page-holographic .holo-split,
  .page-holographic .holo-interactions,
  .page-holographic .holo-realworld,
  .page-holographic .holo-comms {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  
  /* Specifically target 1366x768 and below */
  @media (max-width: 1366px) {
    .page-holographic .holo-split {
      border-top-width: 0 !important;
      border-bottom-width: 0 !important;
      border-top: none !important;
      border-bottom: none !important;
    }
  }
}

/* Remove margins/gaps between last panel and CTA to eliminate white bar */
.page-holographic .holo-comms {
  margin-bottom: 0 !important;
}

.page-holographic .holo-cta {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* Ensure no gap between last split panel and CTA section */
.page-holographic .holo-split:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.page-holographic .holo-split + .holo-cta,
.page-holographic .holo-comms + .holo-cta {
  margin-top: 0 !important;
  padding-top: 100px !important; /* Maintain internal padding */
}

/* Force button text white with maximum specificity */
body.page-holographic .holo-cta .holo-cta-copy a.btn-holo-dark,
body.page-holographic section.holo-cta div.holo-cta-copy a.btn-holo-dark,
.page-holographic section.holo-cta a[href].btn-holo-dark,
.holo-cta .btn-holo-dark {
  color: #ffffff !important;
  color: white !important;
}

/* Focus and active states */
.page-holographic .btn-holo-dark:focus,
.page-holographic .btn-holo-dark:active,
.page-holographic a.btn-holo-dark:focus,
.page-holographic a.btn-holo-dark:active {
  color: #fff !important;
  outline: 2px solid rgba(255,255,255,0.5);
  outline-offset: 2px;
}

/* Remove footer's black bottom band only on the Holographic page */
.page-holographic .site-footer .footer-bottom{
  background: #fbfaf7 !important; /* match footer background */
  color: #111827 !important;
  margin-top: 0 !important;
  border-top: 0 !important;
  padding-top: 0 !important; /* keep height minimal */
  padding-bottom: 0 !important;
}

/* Remove the footer's top gap on this page so no black bar shows above it */
.page-holographic .site-footer{ margin-top: 0 !important; }