/* PixelForge Studio — combined desktop and mobile stylesheet */

/* ==========================================================
   MAIN DESKTOP STYLES
   ========================================================== */

:root {
  --ink:#030611;
  --navy:#071126;
  --pink:#ff25cf;
  --purple:#883cff;
  --blue:#1ba8ff;
  --text:#f8f7ff;
  --muted:#c3c8d8;
  --line:#ff2ed2
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:"DM Sans",sans-serif;
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
.topbar {
  height:78px;
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  padding:0 clamp(22px,4vw,64px);
  gap:38px;
  background:linear-gradient(180deg,rgba(2,5,15,.8),transparent)
}
.brand {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:max-content
}
.brand-star {
  font-size:42px;
  color:#b851ff;
  text-shadow:0 0 14px #7627ff
}
.brand b {
  display:block;
  font-size:27px;
  line-height:.9;
  letter-spacing:.02em;
  background:linear-gradient(90deg,#d0e4ff,#9a5eff,#00aaff);
  -webkit-background-clip:text;
  color:transparent
}
.brand b span,.sound h2 span {
  color:#ff23c9;
  -webkit-text-fill-color:#ff23c9
}
.brand small {
  display:block;
  color:#24ddff;
  letter-spacing:.55em;
  text-align:center;
  margin-top:7px;
  font-size:10px
}

.footer-brand {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:max-content
}

.footer-brand .brand-star {
  font-size:42px;
  color:#b851ff;
  text-shadow:0 0 14px #7627ff
}

.footer-brand b {
  display:block;
  font-size:27px;
  line-height:.9;
  letter-spacing:.02em;
  background:linear-gradient(90deg,#d0e4ff,#9a5eff,#00aaff);
  -webkit-background-clip:text;
  color:transparent
}

.footer-brand b span {
  color:#ff23c9;
  -webkit-text-fill-color:#ff23c9
}

.footer-brand small {
  display:block;
  color:#24ddff;
  letter-spacing:.55em;
  text-align:center;
  margin-top:7px;
  font-size:10px
}
.topbar nav {
  display:flex;
  justify-content:center;
  gap:30px;
  font-size:14px;
  flex:1
}
.topbar nav a {
  padding:29px 0 12px;
  border-bottom:2px solid transparent
}
.topbar nav a:hover,.topbar nav a.active {
  border-color:var(--pink);
  text-shadow:0 0 12px var(--pink)
}
.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:600;
  box-shadow:0 0 22px rgba(255,27,202,.48);
  transition:.25s transform,.25s box-shadow
}
.pill:hover {
  transform:translateY(-2px);
  box-shadow:0 0 34px rgba(255,27,202,.78)
}
.login {
  padding:10px 31px;
  background:linear-gradient(135deg,#d822ff,#ff119a)
}
.menu {
  display:none
}
.hero {
  min-height:720px;
  height:min(78vw,850px);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid #c620bd
}
.hero-image {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(2,5,15,.96) 0%,rgba(2,5,15,.72) 27%,rgba(2,5,15,.08) 55%,rgba(2,5,15,.16)),linear-gradient(0deg,rgba(2,5,15,.45),transparent 35%)
}
.hero-copy {
  position:absolute;
  z-index:2;
  left:clamp(30px,4vw,70px);
  top:20%;
  max-width:520px
}
.eyebrow {
  font-size:14px;
  letter-spacing:.3em;
  font-weight:600
}
.hero h1 {
  font-family:Italiana,serif;
  font-size:clamp(66px,6.8vw,112px);
  line-height:.83;
  margin:14px 0 22px;
  text-shadow:0 0 22px #a91f9d
}
.hero h1 span,.section-heading em {
  color:#ef8cff;
  font-style:normal
}
.lead {
  font-size:21px
}
.trust {
  display:flex;
  gap:32px;
  margin:30px 0
}
.trust>span {
  color:#ff4cdd;
  text-align:center;
  font-size:27px
}
.trust small {
  display:block;
  color:white;
  font-size:13px;
  line-height:1.25;
  margin-top:8px
}
.primary {
  font-size:19px;
  padding:14px 39px;
  background:linear-gradient(90deg,#df23d6,#ff1d9f);
  gap:15px
}
.hero-luna {
  position:absolute;
  z-index:2;
  right:8%;
  top:24%;
  text-align:center;
  transform:rotate(-4deg)
}
.hero-luna span {
  font-family:"Mrs Saint Delafield",cursive;
  font-size:90px;
  color:#fff;
  text-shadow:0 0 10px #ff29d8,0 0 24px #ff29d8
}
.hero-luna p {
  font-family:"Mrs Saint Delafield",cursive;
  font-size:39px;
  line-height:.8
}
.adult {
  position:absolute;
  right:5%;
  bottom:18px;
  z-index:2;
  background:#090a1a;
  border:1px solid var(--pink);
  border-radius:99px;
  padding:6px 17px
}
.section {
  padding:24px clamp(22px,3vw,48px) 30px;
  max-width:1600px;
  margin:auto
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px
}
.section-heading span {
  height:1px;
  max-width:280px;
  flex:1;
  background:linear-gradient(90deg,transparent,var(--pink))
}
.section-heading span:last-child {
  transform:scaleX(-1)
}
h2 {
  font-family:Italiana,serif;
  font-size:clamp(40px,4vw,62px);
  margin:0
}
.subhead {
  text-align:center;
  margin:0 0 20px;
  color:var(--muted)
}
.girl-grid {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px
}
.girl {
  min-height:420px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--pink);
  background:#080b17;
  box-shadow:0 0 0 transparent;
  transition:.3s
}
.girl:hover {
  transform:translateY(-7px);
  box-shadow:0 15px 38px rgba(230,27,209,.22)
}
.girl img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.girl>div {
  position:absolute;
  inset:auto 0 0;
  padding:60px 16px 14px;
  text-align:center;
  background:linear-gradient(transparent,rgba(2,3,10,.97) 52%)
}
.girl h3 {
  font-family:Italiana;
  font-size:31px;
  margin:0
}
.girl p {
  margin:4px 0 12px
}
.girl a {
  display:flex;
  justify-content:center;
  gap:14px;
  background:linear-gradient(90deg,#de23e3,#ff1897);
  border-radius:99px;
  padding:9px
}
.zara {
  min-height:630px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:80px 9%;
  isolation:isolate;
  background:radial-gradient(circle at 75% 25%,#4b1676 0,transparent 24%),radial-gradient(circle at 18% 72%,#6b284d 0,transparent 25%),linear-gradient(120deg,#080318,#061534 55%,#17052c);
  border-top:1px solid #d92ed1;
  border-bottom:1px solid #6436ff
}
.stars,.stars:after {
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:47px 47px;
  opacity:.45;
  content:""
}
.stars:after {
  background-size:83px 83px;
  transform:translate(19px,9px)
}
.zara:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:38%;
  z-index:-1;
  background:linear-gradient(160deg,transparent 48%,#0c0d37 49% 53%,#02040f 54%);
  clip-path:polygon(0 60%,16% 35%,30% 70%,46% 24%,61% 64%,77% 18%,100% 67%,100% 100%,0 100%)
}
.zara-copy {
  max-width:640px;
  margin-left:32%
}
.zara h2 span {
  font-family:"Mrs Saint Delafield";
  font-size:1.4em;
  color:#ffb52d
}
.zara-lead {
  font-size:22px
}
.zara ul,.ai-help ul {
  list-style:none;
  padding:0;
  font-size:18px;
  line-height:2
}
.zara li:before,.ai-help li:before {
  content:"✦";
  color:#ff43e3;
  margin-right:16px
}
.cosmic {
  padding:13px 28px;
  background:linear-gradient(90deg,#3358ff,#9c22ff)
}
.zara blockquote {
  position:absolute;
  right:7%;
  top:18%;
  font-family:"Mrs Saint Delafield";
  font-size:43px;
  color:#f37fff;
  transform:rotate(-8deg)
}
.zara-portrait {
  position:absolute;
  left:3%;
  bottom:0;
  width:36%;
  height:88%;
  background:radial-gradient(circle at 53% 30%,#d29878 0 9%,#7b3b2b 10% 15%,transparent 16%),radial-gradient(ellipse at 52% 70%,#77208c 0 30%,transparent 31%);
  filter:drop-shadow(0 0 30px #6626aa);
  opacity:.92
}
.ai-help {
  min-height:300px;
  display:grid;
  grid-template-columns:140px 1.5fr 1fr auto;
  align-items:center;
  gap:32px
}
.ai-help .brain {
  font-size:150px;
  color:#37b8ff;
  text-shadow:0 0 15px #397cff,0 0 30px #e72ee5
}
.ai-help h2 {
  font-size:48px
}
.ai-help p {
  color:var(--muted);
  max-width:580px
}
.sound {
  min-height:330px;
  border-top:1px solid #df20cd;
  border-bottom:1px solid #df20cd;
  padding:40px clamp(25px,5vw,80px);
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
  gap:60px;
  background:radial-gradient(circle at 58% 50%,#721447,transparent 25%),linear-gradient(90deg,#030814,#0c0a29)
}
.sound h2 {
  font-family:"DM Sans";
  font-weight:700;
  font-size:53px
}
.wave {
  color:#2198ff;
  letter-spacing:8px
}
.youtube {
  margin-top:18px;
  padding:13px 24px;
  background:#f41122
}
.filmstrip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  padding:14px;
  background:#070a17;
  border-block:7px dotted #40486b;
  transform:rotate(-2deg)
}
.filmstrip div {
  aspect-ratio:16/10;
  display:grid;
  place-items:center;
  text-align:center;
  font-weight:700;
  letter-spacing:.08em;
  background:linear-gradient(135deg,#1b0b41,#b51870 52%,#073357);
  box-shadow:inset 0 0 30px #040611
}
.filmstrip div:nth-child(2) {
  background:linear-gradient(135deg,#042d50,#d3458c)
}
.filmstrip div:nth-child(3) {
  background:linear-gradient(135deg,#472078,#087ead)
}
footer {
  min-height:170px;
  padding:38px 5%;
  display:flex;
  align-items:center;
  gap:55px;
  background:#020713
}
footer p {
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:11px;
  color:var(--muted)
}
footer nav {
  display:flex;
  gap:26px;
  flex:1;
  justify-content:center;
  font-size:13px
}
.footer-age {
  border:2px solid var(--pink);
  border-radius:50%;
  padding:11px 7px;
  font-size:20px
}
.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:.7s ease
}
.reveal.visible {
  opacity:1;
  transform:none
}
@media(max-width:980px) {
  .topbar {
    height:68px
  }
  .topbar nav {
    position:absolute;
    display:none;
    top:65px;
    left:18px;
    right:18px;
    padding:20px;
    background:#060a19;
    border:1px solid #8235b7;
    flex-direction:column;
    gap:5px
  }
  .topbar nav.open {
    display:flex
  }
  .topbar nav a {
    padding:9px
  }
  .menu {
    display:block;
    margin-left:auto;
    color:white;
    border:1px solid #a132b2;
    background:#090919;
    padding:8px 12px
  }
  .login {
    display:none
  }
  .hero {
    height:850px
  }
  .hero-image {
    object-position:58% center
  }
  .hero-shade {
    background:linear-gradient(0deg,rgba(2,5,15,.98) 5%,rgba(2,5,15,.68) 54%,rgba(2,5,15,.12) 100%)
  }
  .hero-copy {
    top:auto;
    bottom:38px;
    right:25px;
    max-width:none
  }
  .hero h1 {
    font-size:62px
  }
  .hero-luna {
    top:15%;
    right:5%
  }
  .trust {
    gap:18px
  }
  .girl-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .girl {
    min-height:520px
  }
  .zara-copy {
    margin-left:5%
  }
  .zara-portrait {
    opacity:.25;
    width:60%
  }
  .zara blockquote {
    display:none
  }
  .ai-help {
    grid-template-columns:100px 1fr
  }
  .ai-help ul,.ai-help>a {
    grid-column:2
  }
  .brain {
    font-size:100px!important
  }
  .sound {
    grid-template-columns:1fr
  }
  
  footer {
    flex-wrap:wrap
  }

  footer nav {
    order:3;
    flex-basis:100%
  }
}
@media(max-width:600px) {
  .brand b {
    font-size:20px
  }
  .brand-star {
    font-size:30px
  }
  .hero {
    height:760px;
    min-height:700px
  }
  .hero-image {
    height:56%;
    object-position:52% top
  }
  .hero-shade {
    background:linear-gradient(0deg,#030611 40%,transparent 77%)
  }
  .hero-copy {
    left:20px;
    right:20px;
    bottom:22px
  }
  .hero h1 {
    font-size:52px
  }
  .hero .lead {
    font-size:17px
  }
  .trust {
    justify-content:space-between;
    margin:22px 0
  }
  .trust>span {
    font-size:20px
  }
  .trust small {
    font-size:10px
  }
  .hero-luna {
    top:19%;
    right:4%
  }
  .hero-luna span {
    font-size:57px
  }
  .hero-luna p {
    display:none
  }
  .adult {
    font-size:10px;
    top:51%;
    bottom:auto
  }
  .section-heading h2 {
    font-size:35px
  }
  .girl-grid {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px
  }
  .girl {
    min-width:78vw;
    min-height:470px;
    scroll-snap-align:center
  }
  .zara {
    min-height:690px;
    padding:80px 24px
  }
  .zara-copy {
    margin:0
  }
  .zara h2 {
    font-size:45px
  }
  .zara-portrait {
    width:100%;
    left:-23%
  }
  .ai-help {
    display:block;
    padding-block:55px
  }
  .ai-help .brain {
    float:right
  }
  .ai-help ul {
    font-size:16px
  }
  .sound {
    padding:45px 22px;
    gap:35px
  }
  .sound h2 {
    font-size:39px
  }
  .filmstrip {
    grid-template-columns:1fr
  }
  .filmstrip div:not(:first-child) {
    display:none
  }
  footer {
    gap:24px
  }
  footer nav {
    flex-wrap:wrap;
    justify-content:flex-start
  }
}