.srs{
  --srs-bg:#1A0509;
  --srs-gold:#F0C25E;
  --srs-red:#E30613;
  --srs-red-deep:#B4050F;
  --srs-transition:600ms;
  background:var(--srs-bg);
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif;
  overflow-x:hidden;
  position:relative;
}
.srs *{box-sizing:border-box;}
.srs h1,.srs h2,.srs h3{font-family:inherit;font-weight:800;margin:0;}

/* ---------------- starfield background ---------------- */
.srs-stars{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(2px 2px at 8% 12%, var(--srs-gold), transparent 60%),
    radial-gradient(2px 2px at 22% 30%, var(--srs-gold), transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 8%, var(--srs-gold), transparent 60%),
    radial-gradient(2px 2px at 48% 22%, var(--srs-gold), transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 14%, var(--srs-gold), transparent 60%),
    radial-gradient(2px 2px at 75% 34%, var(--srs-gold), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 10%, var(--srs-gold), transparent 60%),
    radial-gradient(2px 2px at 5% 55%, var(--srs-gold), transparent 60%),
    radial-gradient(1.5px 1.5px at 18% 70%, var(--srs-gold), transparent 60%),
    radial-gradient(2px 2px at 30% 85%, var(--srs-gold), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 62%, var(--srs-gold), transparent 60%),
    radial-gradient(2px 2px at 58% 78%, var(--srs-gold), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 60%, var(--srs-gold), transparent 60%),
    radial-gradient(2px 2px at 82% 90%, var(--srs-gold), transparent 60%),
    radial-gradient(1.5px 1.5px at 94% 46%, var(--srs-gold), transparent 60%);
  opacity:.55;
}

/* ---------------- HERO / SCROLL IMAGE SEQUENCE ---------------- */
.srs-hero-sequence{position:relative;z-index:1;}
.srs-hero-pin{
  position:absolute;top:0;left:0;width:100%;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
}
.srs-hero-pin.srs-fixed{position:fixed;top:0;left:0;width:100%;}
.srs-hero-pin.srs-bottom-pin{position:absolute;top:auto;bottom:0;}
.srs-hero-copy{position:relative;z-index:3;text-align:center;padding:40px 24px 0;}
.srs-hero-copy h1{
  font-size:clamp(3.4rem,11vw,7.5rem);line-height:.92;color:#fff;letter-spacing:-.01em;
  text-shadow:-3px -3px 0 var(--srs-gold),3px -3px 0 var(--srs-gold),
    -3px 3px 0 var(--srs-gold),3px 3px 0 var(--srs-gold),0 14px 28px rgba(0,0,0,.55);
}
.srs-hero-sub{font-weight:700;font-size:clamp(1.2rem,3vw,1.8rem);color:#fff;margin-top:18px;}
.srs-hero-phone{margin-top:38px;width:min(300px,72vw);filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));z-index:2;}
.srs-hero-sequence .srs-phone-screen img{transition:opacity var(--srs-transition) ease;}

@media (max-width:820px){
  .srs-hero-copy{padding-top:25px;}
  .srs-hero-phone{width:min(260px,58vw);}
}

/* ---------------- generic CSS phone frame ---------------- */
.srs-phone-frame{
  position:relative;width:100%;aspect-ratio:9/19.5;background:#0d0d0f;
  border-radius:15% / 7%;padding:3.2%;box-shadow:0 0 0 2px rgba(255,255,255,.08) inset;
}
.srs-phone-notch{
  position:absolute;top:3.2%;left:50%;transform:translateX(-50%);
  width:34%;height:3.2%;background:#000;border-radius:20px;z-index:3;
}
.srs-phone-screen{
  position:relative;width:100%;height:100%;border-radius:11% / 5.4%;overflow:hidden;background:#000;
}
.srs-phone-screen img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--srs-transition) ease;
}
.srs-phone-screen img.srs-active{opacity:1;}

/* ---------------- STICKY APP-SCROLL SECTION ---------------- */
.srs-scrollytell{position:relative;z-index:1;}
.srs-pin{
  position:absolute;top:0;left:0;width:100%;height:100vh;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.srs-pin.srs-fixed{position:fixed;top:0;left:0;width:100%;}
.srs-pin.srs-bottom-pin{position:absolute;top:auto;bottom:0;}

.srs-phone-stack{position:relative;width:min(320px,70vw);z-index:2;transition:transform .1s linear;}

.srs-caption{
  position:absolute;max-width:360px;opacity:0;transform:translateY(50px);
  transition:opacity var(--srs-transition) ease, transform var(--srs-transition) ease;
  z-index:3;pointer-events:none;
}
.srs-caption.srs-show{opacity:1;transform:translateY(0);}
.srs-caption h3{font-size:clamp(2rem,4.4vw,3.2rem);color:#fff;line-height:1.02;text-shadow:0 10px 24px rgba(0,0,0,.5);}
.srs-caption.srs-left{left:6%;top:50%;transform:translateY(80px);text-align:left;}
.srs-caption.srs-left.srs-show{transform:translateY(0);}
.srs-caption.srs-right{right:6%;top:50%;transform:translateY(80px);text-align:right;}
.srs-caption.srs-right.srs-show{transform:translateY(0);}
.srs-caption.srs-bottom{left:50%;bottom:8%;transform:translate(-50%,60px);text-align:center;width:100%;}
.srs-caption.srs-bottom.srs-show{transform:translate(-50%,0);}
.srs-caption.srs-bottom h3{font-size:clamp(2.4rem,6.5vw,4.6rem);}

@media (max-width:820px){
  .srs-caption.srs-left,.srs-caption.srs-right{
    left:50%;right:auto;top:12%;transform:translate(-50%,40px);text-align:center;
  }
  .srs-caption.srs-left.srs-show,.srs-caption.srs-right.srs-show{transform:translate(-50%,0);}
  .srs-phone-stack{width:56vw;}
}

@media (prefers-reduced-motion:reduce){
  .srs-caption,.srs-phone-screen img{transition:none;}
}