/* Smartphone frame */
.phone-wrap{ position:relative; }
.phone-frame{
  position: relative;
  width: clamp(240px, 38vw, 420px);
  aspect-ratio: 9 / 19.5;
  /* Smaller on small screens, max 32px on large */
  border-radius: clamp(12px, 4vw, 32px);
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(0,0,0,.6);
}
.screen{
  position:absolute; inset:10px;
  /* Smaller on small screens, max 24px on large */
  border-radius: clamp(8px, 3vw, 24px);
  overflow:hidden;
  background:#000;
}

/* The clickable overlay covering the smartphone screen */
.screen-link{
  position:absolute;
  inset:0;
  z-index: 2;
  display:block;
}

/* Video sits below the overlay */
.demo-video{
  position: relative;
  z-index: 1;
  width:100%; height:100%;
  object-fit: cover; object-position: center;
  display:block;
}

/* Readability on dark bg */
.cyber-aurora h1, .cyber-aurora p{ text-shadow: 0 1px 16px rgba(0,0,0,.35); }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .disc-a, .disc-b, .blob { animation: none !important; }
  .aurora.disc, .aurora.blob { opacity:.42 }
}

/* Mobile tweaks */
@media (max-width: 576px){
  .cyber-aurora{ min-height: 100svh; }
  .cyber-aurora .display-5{ font-size: calc(1.6rem + 1.2vw); }
}