:root{
  --bg:#090708; --panel:#121012; --text:#f8f1f3; --muted:#bbaeb2;
  --wine:#7f1832; --rose:#d89bac; --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}
a{text-decoration:none;color:inherit}
.hero{min-height:100vh;position:relative;overflow:hidden;padding:28px 7vw 70px;display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0;background:url('assets/hero.jpg') center 30%/cover no-repeat;transform:scale(1.03)}
.shade{position:absolute;inset:0;background:
linear-gradient(90deg,rgba(4,3,4,.85) 0%,rgba(4,3,4,.54) 44%,rgba(4,3,4,.12) 70%),
linear-gradient(0deg,rgba(4,3,4,.82),transparent 58%)}
.topbar{position:absolute;top:26px;left:7vw;right:7vw;z-index:2;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px;font-size:13px;letter-spacing:.15em}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.pulse{width:8px;height:8px;background:#ff446c;border-radius:99px;box-shadow:0 0 18px #ff446c}
.badge{color:#e0c9cf}
.hero-copy{position:relative;z-index:2;max-width:660px}
.kicker,.section-kicker{letter-spacing:.22em;font-size:12px;color:#d8a5b3;font-weight:700}
h1{font-size:clamp(64px,10vw,142px);line-height:.78;margin:18px 0 30px;letter-spacing:-.06em}
h1 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.75)}
.lead{max-width:560px;font-size:20px;line-height:1.55;color:#e5dadd}
.socials{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.socials a{border:1px solid var(--line);padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.05);backdrop-filter:blur(8px)}
.fanvue{display:flex;justify-content:space-between;gap:28px;align-items:center;max-width:520px;padding:19px 22px;border-radius:16px;background:linear-gradient(135deg,#a5284d,#6f102b);font-weight:800;letter-spacing:.05em;box-shadow:0 18px 60px rgba(111,16,43,.35)}
main{max-width:1260px;margin:auto;padding:90px 28px 120px}
.profile{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:end;margin-bottom:55px}
.profile h2,.cta-block h2{font-size:clamp(42px,6vw,80px);line-height:.95;margin:10px 0 0;letter-spacing:-.04em}
.profile-copy{font-size:20px;line-height:1.7;color:var(--muted);border-left:1px solid var(--line);padding-left:34px}
.gallery{display:grid;grid-template-columns:1.05fr .95fr .95fr;grid-auto-rows:330px;gap:14px}
.shot{overflow:hidden;border-radius:22px;background:var(--panel);border:1px solid var(--line)}
.shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.03);transition:.35s}
.shot:hover img{transform:scale(1.03)}
.tall{grid-row:span 2}
.wide{grid-column:span 2}
.cta-block{margin-top:70px;border:1px solid var(--line);border-radius:28px;padding:56px;background:
radial-gradient(circle at 80% 20%,rgba(127,24,50,.34),transparent 32%),#100d0f}
.cta-block p{color:var(--muted);font-size:18px}
.fanvue.dark{margin-top:30px;background:#f4e6ea;color:#220c13;box-shadow:none}
@media(max-width:800px){
  .hero{min-height:92vh;padding-left:20px;padding-right:20px}
  .topbar{left:20px;right:20px}.badge{display:none}
  .profile{grid-template-columns:1fr;gap:24px}.profile-copy{border-left:none;padding-left:0}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:260px}
  .wide{grid-column:span 2}
}
@media(max-width:560px){
  h1{font-size:64px}.lead{font-size:17px}
  .gallery{grid-template-columns:1fr;grid-auto-rows:auto}
  .shot,.tall,.wide{grid-column:auto;grid-row:auto;aspect-ratio:4/5}
  .fanvue{max-width:none}
}


/* ---------- Social buttons with brand marks ---------- */
.socials{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:30px 0 18px;
  max-width:760px;
}
.socials a{
  min-height:54px;
  border:1px solid rgba(255,255,255,.13);
  padding:12px 14px;
  border-radius:16px;
  background:rgba(16,11,14,.46);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:14px;
  font-weight:700;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.socials a:hover{
  transform:translateY(-2px);
  border-color:rgba(216,155,172,.62);
  background:rgba(25,16,21,.7);
}
.icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  font-size:20px;
  line-height:1;
}
.icon-svg svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-svg svg path{ fill:currentColor; stroke:none; }
.x-icon{font-size:20px;font-weight:700}
.threads-icon{font-size:22px;font-weight:800}
.fanvue-mark{
  border-radius:7px;
  background:linear-gradient(135deg,#eab0c1,#8c2344);
  color:#fff;
  font-size:14px;
  font-weight:900;
}
.fanvue-social{
  border-color:rgba(216,155,172,.36)!important;
  background:linear-gradient(135deg,rgba(127,24,50,.42),rgba(52,14,27,.5))!important;
}

/* ---------- Restyled private CTA ---------- */
.fanvue.private-cta{
  max-width:560px;
  min-height:78px;
  padding:0 22px 0 24px;
  border-radius:22px;
  background:
    linear-gradient(135deg,rgba(246,213,221,.98),rgba(205,132,154,.96));
  color:#241016;
  border:1px solid rgba(255,255,255,.48);
  box-shadow:
    0 18px 70px rgba(111,16,43,.38),
    inset 0 1px 0 rgba(255,255,255,.55);
  position:relative;
  overflow:hidden;
}
.fanvue.private-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.28) 42%,transparent 65%);
  transform:translateX(-100%);
  transition:transform .45s ease;
}
.fanvue.private-cta:hover::before{transform:translateX(100%)}
.fanvue.private-cta:hover{transform:translateY(-2px)}
.cta-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  position:relative;
  z-index:1;
}
.cta-copy small{
  font-size:10px;
  letter-spacing:.22em;
  opacity:.72;
}
.cta-copy strong{
  font-size:19px;
  letter-spacing:.01em;
}
.cta-arrow{
  width:42px;
  height:42px;
  border-radius:999px;
  background:#241016;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  position:relative;
  z-index:1;
  flex:0 0 42px;
}
.private-cta--light{
  margin-top:30px;
  max-width:520px;
  background:linear-gradient(135deg,#f7edf0,#d9b0bc)!important;
  color:#221016!important;
}

/* ---------- Better mobile behavior ---------- */
@media(max-width:920px){
  .socials{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:560px;
  }
  .socials .fanvue-social{grid-column:1 / -1}
}

@media(max-width:700px){
  .hero{
    min-height:auto;
    padding:100px 18px 38px;
    align-items:flex-end;
  }
  .hero-bg{
    background-position:58% center;
  }
  .shade{
    background:
      linear-gradient(0deg,rgba(5,3,4,.94) 0%,rgba(5,3,4,.74) 42%,rgba(5,3,4,.30) 72%,rgba(5,3,4,.16) 100%);
  }
  .topbar{
    top:18px;
    left:18px;
    right:18px;
    padding-bottom:14px;
  }
  .hero-copy{
    width:100%;
    max-width:none;
  }
  h1{
    font-size:clamp(58px,19vw,88px);
    line-height:.83;
    margin-bottom:22px;
  }
  .lead{
    font-size:17px;
    line-height:1.52;
    max-width:95%;
  }
  .socials{
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin:22px 0 14px;
  }
  .socials a{
    min-height:52px;
    justify-content:flex-start;
    padding-left:16px;
    border-radius:14px;
  }
  .socials .fanvue-social{grid-column:1 / -1}
  .fanvue.private-cta{
    width:100%;
    max-width:none;
    min-height:74px;
    border-radius:18px;
  }

  main{
    padding:56px 16px 84px;
  }
  .profile{
    margin-bottom:36px;
  }
  .profile h2,.cta-block h2{
    font-size:clamp(40px,13vw,58px);
  }
  .profile-copy{
    font-size:17px;
    line-height:1.55;
  }
  .gallery{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    grid-auto-rows:220px;
  }
  .gallery .tall{grid-row:span 2}
  .gallery .wide{grid-column:span 2}
  .shot{border-radius:18px}
  .cta-block{
    margin-top:38px;
    padding:30px 22px;
    border-radius:22px;
  }
}

@media(max-width:430px){
  .brand{font-size:12px;letter-spacing:.1em}
  .badge{font-size:10px;letter-spacing:.08em}
  .socials{
    grid-template-columns:1fr;
  }
  .socials .fanvue-social{grid-column:auto}
  .socials a{
    justify-content:flex-start;
  }
  .gallery{
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }
  .gallery .shot,
  .gallery .tall,
  .gallery .wide{
    grid-column:auto;
    grid-row:auto;
    aspect-ratio:4/5;
  }
}