/* Embers Valley — Molten design system (shared across all pages). Mobile-first. */
:root{
  --base:#120806; --surface:#1F0E0A; --surface2:#2C1410;
  --ember:#E2483D; --ember-bright:#FF7A45; --amber:#FFB067;
  --text:#FBEAE4; --muted:#A8817A; --line:rgba(251,234,228,.12);
  --glow:0 0 60px -10px rgba(255,122,69,.35);
  --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --wrap:1120px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); color:var(--text); line-height:1.55;
  background:radial-gradient(1200px 700px at 70% -10%, #3a1108 0%, #1c0b07 45%, var(--base) 100%);
  background-attachment:fixed; min-height:100vh; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.ember-text{background:linear-gradient(120deg,var(--amber),var(--ember-bright) 45%,var(--ember)); -webkit-background-clip:text; background-clip:text; color:transparent}
h1,h2,h3{font-family:var(--serif); font-weight:600; line-height:1.12}
.eyebrow{font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--muted)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:15px; padding:12px 22px; border-radius:999px; cursor:pointer; border:0; transition:.18s; font-family:var(--sans); white-space:nowrap}
.btn-primary{background:linear-gradient(120deg,var(--ember-bright),var(--ember)); color:#1b0a07; box-shadow:var(--glow)}
.btn-primary:hover{transform:translateY(-1px); filter:brightness(1.06)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ember-bright); color:var(--amber)}
.btn-login{background:transparent; color:var(--amber); border:1.5px solid var(--ember-bright); padding:10px 20px; font-size:14px}
.btn-login:hover{background:rgba(255,122,69,.12)}

/* top banners */
.proto{background:var(--ember); color:#1b0a07; text-align:center; font-size:12px; font-weight:700; padding:6px 10px; letter-spacing:.3px}
.offerbar{background:linear-gradient(120deg,var(--ember),var(--ember-bright)); color:#1b0a07; text-align:center; font-size:13px; font-weight:700; padding:9px 12px; letter-spacing:.2px}
.offerbar b{text-decoration:underline}

/* header / nav */
header{position:sticky; top:0; z-index:40; background:rgba(20,8,6,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:14px; height:64px}
.brand{font-family:var(--serif); font-size:21px; font-weight:700; letter-spacing:.3px}
.brand .dot{color:var(--ember-bright)}
.nav-links{display:flex; gap:22px; align-items:center; font-size:14px; color:var(--muted); margin-left:auto}
.nav-links a{padding:4px 0; border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.active{color:var(--text); border-color:var(--ember-bright)}
.nav-cta{display:flex; gap:12px; align-items:center}
.navtoggle{display:none; margin-left:auto; background:transparent; border:1px solid var(--line); color:var(--text); font-size:20px; width:42px; height:42px; border-radius:10px; cursor:pointer}

/* hero (home) */
.hero{display:grid; grid-template-columns:1fr; gap:30px; align-items:center; padding:44px 0 40px}
.hero h1{font-size:40px; letter-spacing:-.5px}
.hero p.sub{font-size:17px; color:var(--muted); margin:18px 0 26px; max-width:520px}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap}
.hero .trust{margin-top:20px; font-size:13px; color:var(--muted); display:flex; gap:16px; flex-wrap:wrap}
.hero .trust b{color:var(--amber); font-weight:600}
.hero-visual{position:relative; aspect-ratio:4/5; max-width:360px; margin:0 auto; width:100%; border-radius:22px; border:1px solid var(--line); overflow:hidden; box-shadow:var(--glow); background:var(--surface2)}
.hero-visual img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero-visual::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, rgba(18,8,6,.7))}
.hero-visual .live{position:absolute; top:14px; left:14px; z-index:2; font-size:12px; font-weight:600; background:rgba(20,8,6,.6); border:1px solid var(--line); padding:6px 11px; border-radius:999px; display:flex; align-items:center; gap:7px}
.hero-visual .who{position:absolute; bottom:14px; left:16px; z-index:2; font-family:var(--serif); font-size:21px}
.pulse{width:8px; height:8px; border-radius:50%; background:var(--ember-bright); animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,122,69,.6)} 70%{box-shadow:0 0 0 10px rgba(255,122,69,0)} 100%{box-shadow:0 0 0 0 rgba(255,122,69,0)}}

/* interior page hero */
.phero{text-align:center; padding:48px 0 20px}
.phero h1{font-size:38px; letter-spacing:-.5px}
.phero p{color:var(--muted); max-width:620px; margin:14px auto 0; font-size:17px}

/* sections */
section.block{padding:44px 0}
.sec-head{text-align:center; max-width:640px; margin:0 auto 32px}
.sec-head h2{font-size:30px; margin:10px 0}
.sec-head p{color:var(--muted)}

/* grids (auto-responsive) */
.props{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.prop{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px}
.prop .ico{width:42px; height:42px; border-radius:12px; background:linear-gradient(120deg,rgba(255,122,69,.22),rgba(226,72,61,.14)); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:12px}
.prop h3{font-size:17px; margin-bottom:6px; font-family:var(--sans); font-weight:700}
.prop p{font-size:14px; color:var(--muted)}

.roster{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px}
.girl{border-radius:18px; overflow:hidden; border:1px solid var(--line); background:var(--surface); transition:.18s; display:block}
.girl:hover{transform:translateY(-3px); border-color:var(--ember)}
.girl.feat{border-color:var(--ember); box-shadow:var(--glow)}
.girl .pic{position:relative; aspect-ratio:3/4; overflow:hidden; background:linear-gradient(160deg,var(--surface2),#180b08)}
.girl .pic img{width:100%; height:100%; object-fit:cover; transition:.3s}
.girl:hover .pic img{transform:scale(1.04)}
.girl .pic .badge{position:absolute; top:10px; left:10px; font-size:10px; letter-spacing:1px; font-weight:700; color:#1b0a07; background:linear-gradient(120deg,var(--amber),var(--ember-bright)); padding:4px 9px; border-radius:999px}
.girl .pic .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px; letter-spacing:1.5px}
.girl .meta{padding:13px 15px}
.girl .meta .nm{font-family:var(--serif); font-size:18px; font-weight:600}
.girl .meta .tg{font-size:13px; color:var(--muted); margin-top:3px; min-height:34px}
.girl .meta .go{margin-top:8px; font-size:13px; font-weight:600; color:var(--amber)}
.girl.make{display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(160deg,var(--surface2),#180b08); min-height:220px}
.girl.make .plus{font-family:var(--serif); font-size:40px; font-weight:700}

/* steps */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px}
.step{text-align:center; padding:12px}
.step .n{width:52px; height:52px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:22px; font-weight:700; color:#1b0a07; background:linear-gradient(120deg,var(--amber),var(--ember-bright))}
.step h3{font-size:18px; margin-bottom:6px; font-family:var(--sans); font-weight:700}
.step p{font-size:14px; color:var(--muted)}

/* pricing */
.billrow{display:flex; justify-content:center; gap:8px; margin-bottom:24px; flex-wrap:wrap}
.billtog{background:var(--surface); border:1px solid var(--line); color:var(--muted); padding:9px 18px; border-radius:999px; cursor:pointer; font-family:var(--sans); font-size:14px; font-weight:600; transition:.15s}
.billtog.on{background:linear-gradient(120deg,var(--amber),var(--ember-bright)); color:#1b0a07; border-color:transparent}
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; align-items:stretch}
.tier{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 22px; display:flex; flex-direction:column}
.tier.feat{border-color:var(--ember); box-shadow:var(--glow); position:relative}
.tier.feat .badge{position:absolute; top:-11px; left:22px; font-size:11px; letter-spacing:1px; font-weight:700; color:#1b0a07; background:linear-gradient(120deg,var(--amber),var(--ember-bright)); padding:4px 12px; border-radius:999px}
.tier h3{font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:1px; text-transform:uppercase; color:var(--muted)}
.tier .price{font-family:var(--serif); font-size:36px; font-weight:700; margin:8px 0 2px}
.tier .price span{font-size:15px; color:var(--muted); font-family:var(--sans)}
.tier ul{list-style:none; margin:16px 0 22px; display:flex; flex-direction:column; gap:9px}
.tier li{font-size:14px; padding-left:22px; position:relative}
.tier li::before{content:"\25C6"; position:absolute; left:0; color:var(--ember-bright); font-size:10px; top:4px}
.tier .btn{margin-top:auto; width:100%}
.note{text-align:center; font-size:12px; color:var(--muted); margin-top:16px}
.note.hot{color:var(--amber); font-size:13px}

/* faq */
.faq{max-width:760px; margin:0 auto}
details{border-bottom:1px solid var(--line); padding:16px 4px}
summary{cursor:pointer; font-weight:600; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--ember-bright); font-size:22px; line-height:1}
details[open] summary::after{content:"\2212"}
details p{color:var(--muted); font-size:14px; margin-top:12px}

/* footer */
footer{border-top:1px solid var(--line); margin-top:36px; padding:32px 0; color:var(--muted); font-size:13px}
.foot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start}
.foot a{color:var(--muted)} .foot a:hover{color:var(--text)}
.foot .links{display:flex; gap:16px; flex-wrap:wrap}

/* age gate + login modal (injected by site.js) */
.ov{position:fixed; inset:0; z-index:90; background:rgba(10,5,4,.92); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:22px}
.ov .box{position:relative; max-width:420px; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:30px; box-shadow:var(--glow); text-align:center}
.ov h2{font-size:24px; margin:6px 0 10px}
.ov p{color:var(--muted); font-size:14px; margin-bottom:20px}
.ov .field{margin-bottom:14px; text-align:left}
.ov label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.ov input{width:100%; background:var(--base); border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--text); font-family:var(--sans); font-size:15px}
.ov input:focus{outline:none; border-color:var(--ember-bright)}
.ov .row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.ov .mfoot{font-size:14px; color:var(--muted); margin-top:16px}
.ov .mfoot a{color:var(--amber)}
.ov .mclose{position:absolute; top:12px; right:14px; background:none; border:0; color:var(--muted); font-size:20px; cursor:pointer; line-height:1}

/* ---------- larger screens ---------- */
@media(min-width:861px){
  .hero{grid-template-columns:1.05fr .95fr; gap:40px; padding:60px 0 46px}
  .hero h1{font-size:54px}
  .phero h1{font-size:46px}
  .sec-head h2{font-size:34px}
}
/* ---------- mobile nav ---------- */
@media(max-width:820px){
  .navtoggle{display:block}
  .nav-links{position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:rgba(20,8,6,.98); border-bottom:1px solid var(--line); margin-left:0; max-height:0; overflow:hidden; transition:max-height .25s ease}
  .nav-links.open{max-height:340px}
  .nav-links a{padding:14px 22px; border-bottom:1px solid var(--line)}
  .nav-cta{margin-left:auto}
  .nav-cta .btn-login{padding:8px 14px}
  .nav-cta .btn-primary{padding:8px 16px; font-size:14px}
}
@media(max-width:420px){
  .brand{font-size:19px}
  .hero h1{font-size:34px}
  .phero h1{font-size:32px}
  .nav-cta{gap:8px}
  .btn{font-size:14px; padding:11px 16px}
}

/* video coming-soon container (drop a file into video/ to fill) */
.videobox{position:relative; max-width:820px; margin:0 auto; aspect-ratio:16/9; border-radius:18px; border:1px solid var(--line); overflow:hidden; background:linear-gradient(160deg,var(--surface2),#180b08); box-shadow:var(--glow); display:flex; align-items:center; justify-content:center}
.videobox video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.videobox .ph{position:relative; z-index:1; text-align:center; color:var(--muted); padding:20px}
.videobox .ph .play{width:64px; height:64px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(120deg,var(--amber),var(--ember-bright)); color:#1b0a07; font-size:24px}
.soon{display:inline-block; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#1b0a07; background:linear-gradient(120deg,var(--amber),var(--ember-bright)); padding:4px 10px; border-radius:999px; font-weight:700}
.feature{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px}
.feature h3{font-size:17px; margin-bottom:6px; font-family:var(--sans); font-weight:700; display:flex; align-items:center; gap:8px}
.feature p{font-size:14px; color:var(--muted)}
.feature .tags{margin-top:10px; display:flex; flex-wrap:wrap; gap:6px}
.feature .tag{font-size:11px; color:var(--amber); border:1px solid var(--line); border-radius:999px; padding:3px 9px}
@media(max-width:480px){
  .nav{gap:8px}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:8px 12px; font-size:13px}
  .btn-login{padding:8px 12px; font-size:13px}
  .navtoggle{width:38px; height:38px; font-size:18px}
  .brand{font-size:18px}
  .offerbar{font-size:12px}
  .phero h1{font-size:30px}
  section.block{padding:36px 0}
}