*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#02070b}
body{overflow:hidden}
.hero-bg{
  position:fixed;
  inset:0;
  background:url("assets/paid-final-hero.png") center/cover no-repeat;
  transform:scale(1.015);
  transition:transform .12s linear;
}
.hero-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 44%,transparent 0 42%,rgba(0,0,0,.04) 72%,rgba(0,0,0,.14) 100%);
  pointer-events:none;
}
.cursor-glow{
  position:fixed;
  width:440px;
  height:440px;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,223,150,.10),rgba(80,210,225,.035) 34%,transparent 70%);
  mix-blend-mode:screen;
}
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;
  opacity:.021;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{position:fixed;inset:0;z-index:4}
.hotspot{
  position:absolute;
  border-radius:20px;
  transition:.25s ease;
}
.hotspot:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);
  opacity:0;
  transition:.25s;
}
.hotspot:hover:before{opacity:1}
.hotspot:hover{
  box-shadow:0 0 38px rgba(255,223,150,.06),0 0 65px rgba(80,210,225,.03);
}
.david{left:16%;bottom:19%;width:31%;height:11%}
.dandre{right:15%;bottom:19%;width:31%;height:11%}
.tnt{left:35%;bottom:8%;width:30%;height:10%}
@media(max-width:900px){
  .hotspot{display:none}
}
@media(max-width:650px){
  body{overflow:auto}
  .hero-bg{background-size:cover;background-position:center}
  .cursor-glow{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg{transition:none}
  .cursor-glow{display:none}
}
/* V8 MOBILE FIX — show the full approved artwork instead of cropping/zooming */
@media(max-width:900px){
  html,body{
    min-height:100%;
    background:#02070b;
  }

  body{
    overflow:auto;
  }

  .hero-bg{
    position:fixed;
    inset:0;
    background-color:#02070b;
    background-size:contain !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    transform:none !important;
  }

  .hero-bg:after{
    background:
      linear-gradient(180deg,rgba(2,7,11,.12),rgba(2,7,11,.18)),
      radial-gradient(circle at 50% 50%,transparent 0 46%,rgba(2,7,11,.18) 78%,rgba(2,7,11,.34) 100%);
  }

  .cursor-glow{display:none}

  main{
    position:relative;
    min-height:100svh;
  }

  .hotspot{
    display:none !important;
  }
}

/* Phones in portrait: keep the entire 3:2 layout visible, centered, with dark letterboxing */
@media(max-width:650px) and (orientation:portrait){
  .hero-bg{
    background-size:100% auto !important;
    background-position:center 45% !important;
  }

  body{
    min-height:100svh;
  }
}

/* Phones in landscape: fit by height */
@media(max-width:900px) and (orientation:landscape){
  .hero-bg{
    background-size:auto 100% !important;
    background-position:center center !important;
  }
}


/* V10 — ORIGINAL DESIGN, VERTICAL MOBILE ONLY
   No new sections, wording, branding, or visual concepts. */
@media(max-width:650px){
  html, body{
    width:100%;
    min-height:100%;
    margin:0;
    background:#02070b;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  main{
    position:relative;
    width:100%;
    min-height:165svh !important;
    overflow:visible !important;
  }

  /* Keep the exact original approved artwork/design.
     Make it a tall mobile canvas rather than a static square. */
  .hero-bg{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:165svh !important;
    min-height:165svh !important;
    background-size:auto 100% !important;
    background-repeat:no-repeat !important;
    background-position:center top !important;
    transform:none !important;
  }

  /* Preserve original overlay treatment */
  .hero-bg:after{
    position:absolute;
    inset:0;
  }

  /* Restore original hotspots/content instead of hiding them on mobile */
  .hotspot{
    display:block !important;
  }

  /* Gentle movement only — same visual language, no new content */
  .hero-bg{
    animation:paidMobileDrift 12s ease-in-out infinite alternate;
  }

  @keyframes paidMobileDrift{
    from{background-position:49% top}
    to{background-position:51% top}
  }
}

@media(max-width:650px) and (prefers-reduced-motion:reduce){
  .hero-bg{animation:none !important}
}


/* V11 MOBILE — FIX ZOOM/CROPPING
   Preserve the original design, but show the COMPLETE artwork width on phones. */
@media(max-width:650px){
  html, body{
    width:100%;
    min-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:#02070b !important;
  }

  main{
    width:100% !important;
    min-height:170svh !important;
    overflow:visible !important;
  }

  .hero-bg{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    height:170svh !important;

    /* KEY FIX: fit the artwork to PHONE WIDTH, not to the tall container height */
    background-size:100% auto !important;
    background-repeat:no-repeat !important;
    background-position:center top !important;

    transform:none !important;
    animation:paidMobileFloat 10s ease-in-out infinite alternate !important;
    background-color:#02070b !important;
  }

  @keyframes paidMobileFloat{
    from{background-position:center 0px}
    to{background-position:center 16px}
  }

  .hotspot{
    display:block !important;
  }
}

@media(max-width:650px) and (prefers-reduced-motion:reduce){
  .hero-bg{animation:none !important}
}


/* V12 MOBILE — COHESIVE FULL-LENGTH BACKGROUND
   Keep the full approved artwork visible at the top,
   then continue the same texture down the entire page. */
@media(max-width:650px){
  html{
    background:#02070b;
  }

  body{
    position:relative;
    min-height:170svh !important;
    background:#02070b !important;
  }

  /* Continuous texture layer behind the whole vertical page */
  body:before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-10;
    background:
      linear-gradient(180deg,
        rgba(2,7,11,.06) 0%,
        rgba(2,7,11,.20) 45%,
        rgba(2,7,11,.34) 100%
      ),
      url("assets/paid-final-hero.png") center center / cover no-repeat;
    filter:saturate(.94) brightness(.64);
    transform:scale(1.08);
  }

  /* Full original design stays perfectly readable at the top */
  .hero-bg{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:calc(100vw * 0.6667) !important;
    min-height:0 !important;
    background:
      url("assets/paid-final-hero.png") center top / 100% auto no-repeat !important;
    background-color:transparent !important;
    animation:paidMobileFloat 10s ease-in-out infinite alternate !important;
    z-index:0 !important;
  }

  /* Seamlessly dissolve the bottom edge into the continued texture */
  .hero-bg:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-2px;
    height:28%;
    background:linear-gradient(
      to bottom,
      rgba(2,7,11,0),
      rgba(2,7,11,.18) 35%,
      rgba(2,7,11,.58) 72%,
      rgba(2,7,11,.82) 100%
    ) !important;
    pointer-events:none;
  }

  main{
    position:relative !important;
    min-height:170svh !important;
    background:
      linear-gradient(
        180deg,
        transparent 0,
        transparent 30vw,
        rgba(2,7,11,.04) 48vw,
        rgba(2,7,11,.14) 100%
      );
  }

  /* subtle light wash further down so the lower half doesn't feel dead */
  main:after{
    content:"";
    position:absolute;
    left:-20%;
    right:-20%;
    top:72vw;
    height:95svh;
    pointer-events:none;
    z-index:-1;
    background:
      radial-gradient(circle at 28% 24%,rgba(20,110,124,.12),transparent 32%),
      radial-gradient(circle at 75% 63%,rgba(125,88,34,.08),transparent 30%);
  }
}