/* =========================================
   ROOT
========================================= */

:root{
  --bg:#08060b;
  --bg-soft:#100a13;

  --text:#fff8fc;
  --muted:#bbaeb8;

  --pink:#ff4f9f;
  --pink2:#ff79b8;
  --pink-soft:#ffb6d7;

  --gold:#d1a84f;
  --gold2:#f0d58f;

  --green:#54e684;

  --line:
    rgba(255,255,255,.11);

  --shadow:
    0 30px 85px
    rgba(0,0,0,.43);
}



*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


body{
  margin:0;

  color:var(--text);

  background:var(--bg);

  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  overflow-x:hidden;
}


body.age-locked{
  overflow:hidden;
}


a{
  color:inherit;

  text-decoration:none;
}


button{
  font:inherit;
}


img{
  display:block;

  max-width:100%;
}


.mobile-site{
  display:none;
}



/* =========================================
   SHARED
========================================= */

.eyebrow{
  display:inline-block;

  color:#f1bad3;

  font-size:11px;

  font-weight:800;

  letter-spacing:.22em;
}


.online-dot{
  width:8px;
  height:8px;

  display:inline-block;

  flex:0 0 auto;

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 0 4px
    rgba(84,230,132,.12),
    0 0 12px
    rgba(84,230,132,.4);
}


.pulse{
  animation:
    onlinePulse
    1.8s
    infinite;
}


@keyframes onlinePulse{

  0%{
    box-shadow:
      0 0 0 0
      rgba(84,230,132,.5);
  }

  70%{
    box-shadow:
      0 0 0 9px
      rgba(84,230,132,0);
  }

  100%{
    box-shadow:
      0 0 0 0
      rgba(84,230,132,0);
  }

}



/* =========================================
   BUTTONS
========================================= */

.btn{
  min-height:49px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:10px;

  padding:
    13px
    21px;

  border:0;

  border-radius:999px;

  cursor:pointer;

  font-weight:800;

  transition:
    transform .2s ease,
    filter .2s ease,
    box-shadow .2s ease;
}


.btn:hover{
  transform:
    translateY(-2px);

  filter:
    brightness(1.04);
}


.btn-large{
  min-height:56px;

  padding:
    16px
    25px;
}


.btn-primary{
  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--pink),
      #e965a6
    );
}


.btn-glow{
  box-shadow:
    0 15px 40px
    rgba(255,79,159,.3);
}


.btn-glow:hover{
  box-shadow:
    0 18px 48px
    rgba(255,79,159,.4);
}


.btn-premium{
  color:#241805;

  background:
    linear-gradient(
      135deg,
      #f3da96,
      #c59a45
    );

  box-shadow:
    0 15px 35px
    rgba(209,168,79,.2);
}


.btn-ghost{
  color:#fff;

  background:transparent;

  border:
    1px solid
    rgba(255,255,255,.18);
}



/* =========================================
   AGE GATE
========================================= */

.age-gate{
  position:fixed;

  inset:0;

  z-index:500;

  display:grid;

  place-items:center;

  padding:25px;

  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(255,79,159,.17),
      transparent 35%
    ),
    rgba(6,4,8,.97);

  transition:
    opacity .3s ease,
    visibility .3s ease;
}


.age-gate.hidden{
  opacity:0;

  visibility:hidden;

  pointer-events:none;
}


.age-card{
  width:
    min(500px,100%);

  padding:40px;

  text-align:center;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:28px;

  background:
    rgba(16,9,20,.92);

  box-shadow:
    var(--shadow);
}


.age-logo{
  width:56px;
  height:56px;

  display:grid;

  place-items:center;

  margin:
    0 auto
    18px;

  border:
    1px solid
    rgba(255,255,255,.24);

  border-radius:50%;

  font-family:
    "Playfair Display",
    serif;
}


.age-card h2{
  margin:
    12px
    0;

  font-family:
    "Playfair Display",
    serif;

  font-size:45px;
}


.age-card p{
  color:var(--muted);

  line-height:1.6;
}


.age-actions{
  display:flex;

  justify-content:center;

  gap:10px;

  margin-top:23px;
}



/* =========================================
   DESKTOP HEADER
========================================= */

.site-header{
  position:fixed;

  inset:
    0
    0
    auto
    0;

  z-index:100;

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:center;

  padding:
    18px
    clamp(28px,5vw,80px);

  border-bottom:
    1px solid transparent;

  transition:
    background .3s ease,
    border-color .3s ease;
}


.site-header.scrolled{
  background:
    rgba(8,6,11,.86);

  backdrop-filter:
    blur(18px);

  border-color:
    rgba(255,255,255,.08);
}


.header-space{
  width:1px;
}


.desktop-nav{
  display:flex;

  align-items:center;

  gap:33px;

  color:#e6dce4;

  font-size:14px;
}


.desktop-nav a{
  position:relative;
}


.desktop-nav a::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:-8px;

  height:1px;

  background:var(--pink2);

  transform:
    scaleX(0);

  transition:.2s ease;
}


.desktop-nav a:hover::after{
  transform:
    scaleX(1);
}


.header-cta{
  justify-self:end;

  display:inline-flex;

  align-items:center;

  gap:9px;

  padding:
    12px
    18px;

  color:#160f17;

  background:#fff;

  border-radius:999px;

  font-size:13px;

  font-weight:800;
}



/* =========================================
   DESKTOP HERO
========================================= */

.hero{
  position:relative;

  min-height:100svh;

  display:flex;

  align-items:center;

  overflow:hidden;

  padding:
    120px
    clamp(28px,5vw,80px)
    105px;
}


.hero-bg{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(7,5,9,.96) 0%,
      rgba(7,5,9,.84) 41%,
      rgba(7,5,9,.35) 72%,
      rgba(7,5,9,.5) 100%
    ),
    url("assets/victoria-view.webp")
    center 35% /
    cover
    no-repeat;
}


.hero-shade{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 65%,
      var(--bg) 100%
    );
}


.hero-inner{
  position:relative;

  z-index:2;

  width:
    min(1380px,100%);

  margin:
    0 auto;

  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(350px,.72fr);

  align-items:center;

  gap:
    clamp(55px,7vw,115px);
}


.hero-copy{
  max-width:700px;
}


.hero h1{
  max-width:730px;

  margin:
    15px
    0
    24px;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(50px,5.2vw,84px);

  line-height:.96;

  letter-spacing:-.04em;

  font-weight:600;
}


.hero h1 span{
  display:block;

  margin-top:7px;

  color:var(--pink2);

  font-style:italic;
}


.hero-lead{
  max-width:630px;

  margin:0;

  color:#ddd2da;

  font-size:
    clamp(17px,1.25vw,20px);

  line-height:1.68;
}


.hero-proof{
  display:flex;

  flex-wrap:wrap;

  gap:9px;

  margin-top:23px;
}


.hero-proof span{
  padding:
    8px
    11px;

  color:#bcb0b9;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:999px;

  background:
    rgba(255,255,255,.04);

  font-size:11px;
}


.hero-proof b{
  color:#fff;
}


.hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:28px;
}


.reply-note{
  display:flex;

  align-items:center;

  gap:8px;

  margin-top:17px;

  color:#a99aa5;

  font-size:11px;
}


.reply-note span{
  color:var(--pink2);
}



/* HERO PHOTO */

.hero-visual{
  position:relative;

  justify-self:end;

  width:
    min(430px,100%);
}


.photo-frame{
  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:30px;

  background:#100a13;

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.45);
}


.photo-frame > img{
  width:100%;

  height:
    min(62vh,630px);

  object-fit:cover;

  object-position:center 24%;
}


.photo-gradient{
  position:absolute;

  inset:
    54%
    0
    0;

  background:
    linear-gradient(
      transparent,
      rgba(8,5,10,.9)
    );
}


.photo-online-status{
  position:absolute;

  z-index:3;

  top:17px;
  right:17px;

  display:flex;

  align-items:center;

  gap:10px;

  padding:
    10px
    13px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:15px;

  background:
    rgba(12,8,15,.75);

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.3);
}


.photo-online-status strong{
  display:block;

  font-size:11px;
}


.photo-online-status small{
  display:block;

  margin-top:2px;

  color:#aca0aa;

  font-size:9px;
}


.photo-badge{
  position:absolute;

  left:16px;
  right:16px;
  bottom:16px;

  padding:
    15px
    17px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:16px;

  background:
    rgba(13,8,15,.82);

  backdrop-filter:
    blur(14px);
}


.photo-badge span{
  display:block;

  color:#b7aab4;

  font-size:8px;

  letter-spacing:.18em;
}


.photo-badge strong{
  display:block;

  margin-top:5px;

  font-family:
    "Playfair Display",
    serif;

  font-size:19px;
}



/* DISCOVER */

.discover{
  position:absolute;

  z-index:3;

  left:
    clamp(28px,5vw,80px);

  bottom:34px;

  display:flex;

  align-items:center;

  gap:13px;

  color:#c8bbc5;

  font-size:9px;

  letter-spacing:.18em;

  text-transform:uppercase;
}


.discover-line{
  width:45px;
  height:1px;

  background:#b8aab5;
}



/* =========================================
   DESKTOP COMMON SECTIONS
========================================= */

.section{
  width:
    min(
      1380px,
      calc(100% - 50px)
    );

  margin:
    0 auto;

  padding:
    clamp(85px,9vw,140px)
    0;
}


.section h2,
.closing-content h2{
  font-family:
    "Playfair Display",
    serif;

  font-weight:600;
}


em{
  color:var(--pink2);

  font-style:italic;
}



/* =========================================
   ABOUT
========================================= */

.about{
  display:grid;

  grid-template-columns:
    1.05fr
    .95fr;

  align-items:center;

  gap:
    clamp(55px,8vw,120px);
}


.about-image{
  position:relative;
}


.about-image > img{
  width:100%;

  max-height:740px;

  object-fit:cover;

  object-position:center 16%;

  border-radius:30px;
}


.about-tag{
  position:absolute;

  right:-25px;
  bottom:30px;

  padding:
    16px
    19px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:17px;

  background:
    rgba(14,8,16,.8);

  backdrop-filter:
    blur(15px);
}


.about-tag span{
  display:block;

  color:#aa9da8;

  font-size:9px;
}


.about-tag strong{
  display:block;

  margin-top:3px;

  font-family:
    "Playfair Display",
    serif;
}


.about-copy h2,
.gallery-section h2,
.exclusive h2{
  margin:
    14px
    0
    25px;

  font-size:
    clamp(45px,5vw,76px);

  line-height:1;
}


.about-copy p{
  max-width:610px;

  color:var(--muted);

  font-size:16px;

  line-height:1.8;
}


.text-link{
  display:inline-block;

  margin-top:9px;

  color:#ffd0e6;

  font-weight:800;
}



/* =========================================
   GALLERY
========================================= */

.section-heading{
  display:flex;

  align-items:flex-end;
  justify-content:space-between;

  gap:30px;

  margin-bottom:34px;
}


.section-heading p{
  max-width:380px;

  color:var(--muted);

  line-height:1.7;
}


.gallery{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  grid-auto-rows:310px;

  gap:13px;
}


.gallery-item{
  position:relative;

  overflow:hidden;

  padding:0;

  border:0;

  border-radius:21px;

  background:#140e16;

  cursor:zoom-in;
}


.gallery-item.tall{
  grid-row:
    span 2;
}


.gallery-item.wide{
  grid-column:
    span 2;
}


.gallery-item img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .45s ease,
    filter .45s ease;
}


.gallery-item:hover img{
  transform:
    scale(1.045);

  filter:
    brightness(1.05);
}



/* =========================================
   EXCLUSIVE
========================================= */

.exclusive-heading{
  max-width:840px;

  margin:
    0 auto
    44px;

  text-align:center;
}


.exclusive-heading p{
  max-width:620px;

  margin:
    0 auto;

  color:var(--muted);

  line-height:1.7;
}


.exclusive-grid{
  display:grid;

  grid-template-columns:
    1fr
    1fr;

  gap:17px;
}


.exclusive-card{
  position:relative;

  overflow:hidden;

  min-height:420px;

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  padding:
    clamp(30px,4vw,55px);

  border:
    1px solid var(--line);

  border-radius:29px;

  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(255,79,159,.13),
      transparent 30%
    ),
    #100a13;
}


.premium-card{
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(216,178,100,.16),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #120d12,
      #191007
    );
}


.premium-aura{
  position:absolute;

  width:300px;
  height:300px;

  right:-100px;
  top:-100px;

  border-radius:50%;

  background:
    rgba(216,178,100,.09);

  filter:
    blur(35px);
}


.card-topline{
  width:100%;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;
}


.pill{
  padding:
    7px
    10px;

  border-radius:999px;

  font-size:9px;

  font-weight:800;

  letter-spacing:.14em;
}


.free-pill{
  color:#ffafd2;

  background:
    rgba(255,79,159,.11);

  border:
    1px solid
    rgba(255,79,159,.22);
}


.premium-pill{
  color:#efd18e;

  background:
    rgba(216,178,100,.1);

  border:
    1px solid
    rgba(216,178,100,.23);
}


.mini-status{
  display:flex;

  align-items:center;

  gap:7px;

  color:#b6a8b3;

  font-size:10px;
}


.gold-text{
  color:#e0c079;
}


.exclusive-card h3{
  margin:
    46px
    0
    14px;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(37px,4vw,57px);
}


.exclusive-card p{
  max-width:550px;

  color:var(--muted);

  line-height:1.7;
}


.exclusive-card ul{
  display:grid;

  gap:9px;

  padding:0;

  margin:
    18px
    0
    27px;

  list-style:none;

  color:#d8ccd5;

  font-size:13px;
}


.exclusive-card li::before{
  content:"✦";

  margin-right:8px;

  color:var(--pink2);
}


.premium-card li::before{
  color:var(--gold2);
}


.exclusive-card .btn{
  margin-top:auto;
}



/* =========================================
   CLOSING CTA
========================================= */

.closing-cta{
  position:relative;

  min-height:630px;

  display:grid;

  place-items:center;

  overflow:hidden;

  margin-top:40px;
}


.closing-bg{
  position:absolute;

  inset:0;

  background:
    url("assets/victoria-pool.webp")
    center 42% /
    cover
    no-repeat;
}


.closing-shade{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(7,4,8,.92),
      rgba(7,4,8,.38),
      rgba(7,4,8,.8)
    );
}


.closing-content{
  position:relative;

  z-index:2;

  width:
    min(
      780px,
      calc(100% - 45px)
    );

  text-align:center;
}


.closing-content h2{
  margin:
    14px
    0
    17px;

  font-size:
    clamp(56px,7vw,90px);
}


.closing-content p{
  margin:
    0
    0
    27px;

  color:#ddd0d9;

  font-size:17px;
}



/* =========================================
   FOOTER
========================================= */

footer{
  width:
    min(
      1380px,
      calc(100% - 50px)
    );

  margin:
    0 auto;

  padding:
    27px
    0;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:20px;

  color:#968a94;

  border-top:
    1px solid
    rgba(255,255,255,.07);

  font-size:11px;
}


.footer-links{
  display:flex;

  gap:18px;
}



/* =========================================
   REVEAL ANIMATION
========================================= */

.reveal{
  opacity:0;

  transform:
    translateY(22px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}


.reveal.is-visible{
  opacity:1;

  transform:none;
}



/* =========================================
   LIGHTBOX
========================================= */

.lightbox{
  position:fixed;

  inset:0;

  z-index:450;

  display:grid;

  place-items:center;

  padding:25px;

  background:
    rgba(0,0,0,.93);

  opacity:0;

  visibility:hidden;

  transition:.2s ease;
}


.lightbox.open{
  opacity:1;

  visibility:visible;
}


.lightbox img{
  max-width:
    min(1000px,94vw);

  max-height:90vh;

  border-radius:17px;
}


.lightbox-close{
  position:absolute;

  top:18px;
  right:20px;

  width:45px;
  height:45px;

  border:0;

  border-radius:50%;

  color:#fff;

  background:
    rgba(255,255,255,.1);

  font-size:30px;

  cursor:pointer;
}



/* =========================================
   TABLET
========================================= */

@media (max-width:950px) and (min-width:621px){

  .hero-inner{
    grid-template-columns:
      1fr
      .8fr;

    gap:35px;
  }


  .hero h1{
    font-size:
      clamp(48px,6.5vw,70px);
  }


  .desktop-nav{
    gap:20px;
  }


  .hero-visual{
    width:100%;
  }


  .about{
    grid-template-columns:
      1fr;
  }


  .about-image{
    max-width:700px;
  }


  .gallery{
    grid-template-columns:
      repeat(2,1fr);
  }


  .exclusive-grid{
    grid-template-columns:
      1fr;
  }

}



/* =========================================
   MOBILE
========================================= */

@media (max-width:620px){


  /* Hide desktop entirely */

  .desktop-site{
    display:none !important;
  }


  .mobile-site{
    display:block;

    min-height:100svh;

    background:
      radial-gradient(
        circle at 50% -10%,
        rgba(255,79,159,.12),
        transparent 28%
      ),
      #09070b;
  }



  /* AGE */

  .age-card{
    padding:
      31px
      21px;
  }


  .age-card h2{
    font-size:38px;
  }


  .age-actions{
    display:grid;
  }



  /* TOP BAR */

  .mobile-topbar{
    position:sticky;

    top:0;

    z-index:80;

    height:52px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    padding:
      0
      16px;

    border-bottom:
      1px solid
      rgba(255,255,255,.07);

    background:
      rgba(9,7,11,.88);

    backdrop-filter:
      blur(18px);

    font-size:14px;

    font-weight:800;
  }


  .mobile-top-status{
    display:flex;

    align-items:center;

    gap:7px;

    color:#a99da7;

    font-size:10px;

    font-weight:600;
  }



  /* PROFILE */

  .mobile-profile{
    padding:
      22px
      16px
      18px;
  }


  .mobile-profile-main{
    display:flex;

    align-items:center;

    gap:15px;
  }


  .mobile-avatar-wrap{
    position:relative;

    flex:0 0 auto;
  }


  .mobile-avatar-ring{
    width:85px;
    height:85px;

    padding:3px;

    border-radius:50%;

    background:
      linear-gradient(
        135deg,
        #ff5da9,
        #ac47ed,
        #ffbe64
      );
  }


  .mobile-avatar-ring img{
    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center 18%;

    border:
      3px solid #09070b;

    border-radius:50%;
  }


  .mobile-presence{
    position:absolute;

    right:3px;
    bottom:5px;

    width:18px;
    height:18px;

    border:
      3px solid #09070b;

    border-radius:50%;

    background:var(--green);

    box-shadow:
      0 0 12px
      rgba(84,230,132,.5);
  }


  .mobile-profile-identity{
    min-width:0;
  }


  .mobile-name-line{
    display:flex;

    align-items:center;

    gap:7px;
  }


  .mobile-name-line h1{
    margin:0;

    font-family:
      "DM Sans",
      sans-serif;

    font-size:20px;

    font-weight:800;
  }


  .verified-badge{
    width:17px;
    height:17px;

    display:grid;

    place-items:center;

    color:#fff;

    border-radius:50%;

    background:
      var(--pink);

    font-size:10px;

    font-weight:900;
  }


  .mobile-username{
    display:block;

    margin-top:4px;

    color:#a296a0;

    font-size:11px;
  }


  .mobile-location{
    display:block;

    margin-top:5px;

    color:#d4c9d1;

    font-size:11px;
  }



  /* BIO */

  .mobile-bio{
    padding-top:16px;
  }


  .mobile-bio-title{
    margin-bottom:3px !important;

    color:#fff !important;

    font-weight:800;
  }


  .mobile-bio p{
    margin:0;

    color:#ddd3da;

    font-size:13px;

    line-height:1.58;
  }



  /* STATUS */

  .mobile-status-card{
    display:flex;

    align-items:center;

    gap:11px;

    margin-top:16px;

    padding:
      11px
      13px;

    border:
      1px solid
      rgba(255,255,255,.1);

    border-radius:14px;

    background:
      rgba(255,255,255,.035);
  }


  .mobile-status-card strong{
    display:block;

    font-size:11px;
  }


  .mobile-status-card small{
    display:block;

    margin-top:2px;

    color:#9f929c;

    font-size:9px;
  }



  /* MOBILE CTA */

  .mobile-actions{
    display:grid;

    gap:8px;

    margin-top:15px;
  }


  .mobile-free-btn,
  .mobile-premium-btn{
    min-height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    padding:
      12px
      14px;

    border-radius:12px;

    font-size:12px;

    font-weight:800;
  }


  .mobile-free-btn{
    color:#fff;

    background:
      linear-gradient(
        135deg,
        #ff4f9f,
        #df5a9b
      );

    box-shadow:
      0 12px 27px
      rgba(255,79,159,.2);
  }


  .mobile-premium-btn{
    color:#241805;

    background:
      linear-gradient(
        135deg,
        #f2da96,
        #c79b47
      );
  }


  .mobile-personal-note{
    margin-top:10px;

    text-align:center;

    color:#9e919b;

    font-size:9px;
  }



  /* STORIES */

  .mobile-stories{
    display:flex;

    gap:17px;

    overflow-x:auto;

    padding-top:21px;

    scrollbar-width:none;
  }


  .mobile-stories::-webkit-scrollbar{
    display:none;
  }


  .mobile-story{
    flex:0 0 auto;

    width:62px;

    text-align:center;
  }


  .story-ring{
    width:59px;
    height:59px;

    margin:
      0 auto;

    padding:3px;

    border-radius:50%;

    background:
      linear-gradient(
        135deg,
        #ff5ea9,
        #9f43df,
        #ffba62
      );
  }


  .gold-ring{
    background:
      linear-gradient(
        135deg,
        #f2da93,
        #aa7724
      );
  }


  .story-ring img{
    width:100%;
    height:100%;

    object-fit:cover;

    border:
      3px solid #09070b;

    border-radius:50%;
  }


  .mobile-story > span{
    display:block;

    margin-top:6px;

    color:#d8ced6;

    font-size:9px;
  }



  /* GRID NAV */

  .mobile-grid-nav{
    height:43px;

    display:grid;

    grid-template-columns:
      1fr
      1fr;

    border-top:
      1px solid
      rgba(255,255,255,.07);

    border-bottom:
      1px solid
      rgba(255,255,255,.07);
  }


  .grid-nav-item{
    position:relative;

    display:grid;

    place-items:center;

    color:#8c8189;

    border:0;

    background:transparent;

    font-size:18px;
  }


  .grid-nav-item.active{
    color:#fff;
  }


  .grid-nav-item.active::after{
    content:"";

    position:absolute;

    left:30%;
    right:30%;
    bottom:-1px;

    height:2px;

    background:#fff;
  }



  /* PHOTO GRID */

  .mobile-grid{
    display:grid;

    grid-template-columns:
      repeat(3,1fr);

    gap:2px;
  }


  .mobile-grid-item{
    position:relative;

    overflow:hidden;

    aspect-ratio:1 / 1;

    padding:0;

    border:0;

    background:#160f17;

    cursor:pointer;
  }


  .mobile-grid-item img{
    width:100%;
    height:100%;

    object-fit:cover;
  }


  .mobile-grid-item:active img{
    transform:
      scale(.97);
  }


  .mobile-grid-cta{
    display:grid;

    place-items:center;

    padding:8px;

    color:#fff;

    background:
      radial-gradient(
        circle at center,
        rgba(255,79,159,.22),
        #140d16 70%
      );
  }


  .mobile-grid-cta span{
    display:block;

    margin-bottom:4px;

    font-size:20px;
  }


  .mobile-grid-cta strong{
    display:block;

    font-size:10px;
  }


  .mobile-grid-cta small{
    display:block;

    margin-top:3px;

    color:#a99ba5;

    font-size:8px;
  }



  /* FINAL CTA */

  .mobile-final{
    padding:
      40px
      20px
      36px;

    text-align:center;

    background:
      radial-gradient(
        circle at 50% 10%,
        rgba(255,79,159,.13),
        transparent 45%
      );
  }


  .mobile-final h2{
    max-width:330px;

    margin:
      11px
      auto
      12px;

    font-family:
      "Playfair Display",
      serif;

    font-size:32px;

    line-height:1.03;

    font-weight:600;
  }


  .mobile-final p{
    max-width:300px;

    margin:
      0
      auto
      19px;

    color:#a99ba5;

    font-size:12px;

    line-height:1.6;
  }


  .mobile-final .mobile-free-btn{
    max-width:320px;

    margin:
      0 auto;
  }



  /* MOBILE FOOTER */

  .mobile-footer{
    padding:
      18px
      15px
      24px;

    color:#756a73;

    border-top:
      1px solid
      rgba(255,255,255,.06);

    text-align:center;

    font-size:9px;
  }



  /* LIGHTBOX */

  .lightbox{
    padding:14px;
  }


  .lightbox img{
    max-width:96vw;

    max-height:88vh;
  }

}

@media (max-width:620px){

  .age-gate{
    padding:18px;

    background:
      radial-gradient(
        circle at 50% 20%,
        rgba(255,79,159,.16),
        transparent 34%
      ),
      rgba(6,4,8,.98);
  }


  .age-card{
    width:100%;

    max-width:360px;

    padding:
      34px
      22px
      24px;

    border:
      1px solid
      rgba(255,255,255,.12);

    border-radius:24px;

    background:
      rgba(15,9,18,.96);

    box-shadow:
      0 25px 70px
      rgba(0,0,0,.45);

    text-align:center;
  }


  .age-card h2{
    margin:
      0
      0
      10px;

    font-family:
      "Playfair Display",
      serif;

    font-size:38px;

    line-height:1;

    font-weight:600;
  }


  .age-card p{
    max-width:280px;

    margin:
      0
      auto;

    color:#b9adb6;

    font-size:13px;

    line-height:1.6;
  }


  .age-actions{
    display:grid;

    grid-template-columns:1fr;

    gap:10px;

    margin-top:24px;
  }


  .age-actions .btn{
    width:100%;

    min-height:50px;

    border-radius:13px;

    font-size:13px;

    font-weight:800;
  }


  .age-actions .btn-primary{
    background:
      linear-gradient(
        135deg,
        #ff4f9f,
        #df5d9c
      );

    box-shadow:
      0 12px 28px
      rgba(255,79,159,.22);
  }


  .age-actions .btn-ghost{
    color:#d8ccd5;

    background:
      rgba(255,255,255,.035);

    border:
      1px solid
      rgba(255,255,255,.10);
  }

}