/* ==========================================
   CYBERMUSE HOMEPAGE
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{

--black:#080808;
--charcoal:#17141c;
--violet:#8d76ff;
--gold:#d4af37;
--champagne:#eadfcf;
--white:#ffffff;
--muted:rgba(255,255,255,.72);

}

html{

scroll-behavior:smooth;

}

body{

min-height:100vh;

font-family:'Poppins',sans-serif;

background:
linear-gradient(
135deg,
#080808 0%,
#19141e 24%,
#655b6c 58%,
#cdbfae 80%,
#f4eee6 100%
);

color:var(--white);

overflow-x:hidden;

position:relative;

}

body.menuOpen{

overflow:hidden;

}

a{

color:inherit;
text-decoration:none;

}

img{

display:block;
max-width:100%;

}

button{

font-family:inherit;

}


/* ==========================================
   BACKGROUND GLOWS
========================================== */

.glow{

position:fixed;

border-radius:50%;

filter:blur(130px);

pointer-events:none;

z-index:-1;

}

.glowViolet{

width:420px;
height:420px;

background:rgba(141,118,255,.24);

top:-150px;
left:-130px;

}

.glowGold{

width:520px;
height:520px;

background:rgba(212,175,55,.17);

right:-190px;
bottom:-180px;

}


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

.mainHeader{

position:fixed;

top:0;
left:0;
right:0;

height:95px;

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

padding:0 6%;

z-index:100;

background:
linear-gradient(
180deg,
rgba(0,0,0,.52),
rgba(0,0,0,0)
);

}

.logo{

font-family:'Space Grotesk',sans-serif;

font-size:1.35rem;

font-weight:700;

letter-spacing:6px;

}

.desktopNav{

display:flex;

align-items:center;

gap:34px;

}

.desktopNav a{

font-size:.72rem;

font-weight:500;

letter-spacing:2px;

text-transform:uppercase;

color:rgba(255,255,255,.78);

transition:.3s;

}

.desktopNav a:hover{

color:var(--champagne);

}

.bookBtn{

height:48px;

display:flex;

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

padding:0 24px;

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

font-size:.72rem;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

backdrop-filter:blur(15px);

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

transition:.35s;

}

.bookBtn:hover{

background:white;
color:#111;

}

.menuBtn{

display:none;

width:45px;
height:45px;

border:none;

background:transparent;

cursor:pointer;

}

.menuBtn span{

display:block;

width:28px;
height:2px;

margin:7px auto;

background:white;

}


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

.mobileMenu{

position:fixed;

inset:0;

background:
linear-gradient(
135deg,
#070707,
#1d1722
);

z-index:999;

display:flex;
flex-direction:column;
justify-content:center;

padding:40px;

transform:translateX(100%);

transition:.45s ease;

}

.mobileMenu.active{

transform:translateX(0);

}

.closeMenu{

position:absolute;

top:25px;
right:28px;

width:48px;
height:48px;

border:none;

background:transparent;

color:white;

font-size:2.5rem;

cursor:pointer;

}

.mobileMenu nav{

display:flex;
flex-direction:column;

gap:20px;

}

.mobileMenu nav a{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(2.2rem,10vw,4rem);

font-weight:600;

text-transform:uppercase;

letter-spacing:-1px;

}


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

.hero{

min-height:100vh;

position:relative;

display:flex;
align-items:center;

padding:145px 6% 70px;

overflow:hidden;

}

.heroContent{

width:48%;

max-width:640px;

position:relative;

z-index:5;

}

.smallTitle{

font-size:.72rem;

font-weight:600;

letter-spacing:6px;

text-transform:uppercase;

color:#f5d98d;

margin-bottom:22px;

}

.hero h1{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(4rem,8vw,8rem);

line-height:.86;

font-weight:700;

letter-spacing:-5px;

text-transform:uppercase;

margin-bottom:28px;

text-shadow:
0 15px 40px rgba(0,0,0,.3);

}

.hero h1 span{

display:block;

color:transparent;

-webkit-text-stroke:
1px rgba(255,255,255,.75);

}

.heroText{

max-width:520px;

font-size:1rem;

line-height:1.9;

color:rgba(255,255,255,.78);

margin-bottom:36px;

}

.heroButtons{

display:flex;

align-items:center;

gap:16px;

flex-wrap:wrap;

}

.primaryBtn,
.secondaryBtn,
.lightBtn{

min-height:58px;

display:inline-flex;

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

padding:0 28px;

font-size:.75rem;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

transition:.35s;

}

.primaryBtn{

background:white;

color:#111;

border:1px solid white;

}

.primaryBtn:hover{

transform:translateY(-4px);

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

}

.secondaryBtn{

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

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

backdrop-filter:blur(15px);

}

.secondaryBtn:hover{

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

transform:translateY(-4px);

}

.heroLocation{

display:flex;

gap:30px;

margin-top:55px;

}

.heroLocation span{

font-size:.65rem;

letter-spacing:3px;

text-transform:uppercase;

color:rgba(255,255,255,.55);

}

.heroVisual{

position:absolute;

right:0;
bottom:0;

width:58%;
height:100%;

display:flex;
align-items:flex-end;
justify-content:center;

z-index:2;

}

.heroCircle{

position:absolute;

width:620px;
height:620px;

border-radius:50%;

background:
linear-gradient(
135deg,
rgba(255,255,255,.2),
rgba(255,255,255,.03)
);

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

backdrop-filter:blur(8px);

right:5%;
bottom:2%;

}

.heroModels{

position:relative;

height:92vh;

width:100%;

object-fit:contain;

object-position:bottom center;

z-index:3;

filter:
drop-shadow(
0 35px 45px rgba(0,0,0,.35)
);

}

.scrollText{

position:absolute;

right:35px;
bottom:42px;

font-size:.62rem;

letter-spacing:3px;

text-transform:uppercase;

writing-mode:vertical-rl;

color:rgba(255,255,255,.55);

z-index:6;

}


/* ==========================================
   MODELS SECTION
========================================== */

.modelsSection{

padding:120px 6%;

background:#090909;

}

.sectionHeading{

display:flex;

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

gap:30px;

margin-bottom:55px;

}

.sectionHeading h2,
.agencySection h2,
.applySection h2,
.contactSection h2{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(2.8rem,6vw,5.5rem);

line-height:.95;

letter-spacing:-3px;

text-transform:uppercase;

}

.sectionLink{

font-size:.72rem;

letter-spacing:2px;

text-transform:uppercase;

padding-bottom:8px;

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

}

.modelGrid{

display:grid;

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

gap:22px;

}

.modelCard{

position:relative;

height:600px;

overflow:hidden;

background:#222;

}

.modelCard img{

width:100%;
height:100%;

object-fit:cover;

filter:saturate(.8);

transition:
transform .75s ease,
filter .5s ease;

}

.modelCard:hover img{

transform:scale(1.05);

filter:saturate(1);

}

.modelInfo{

position:absolute;

left:0;
right:0;
bottom:0;

padding:70px 24px 26px;

background:
linear-gradient(
transparent,
rgba(0,0,0,.9)
);

}

.modelInfo h3{

font-family:'Space Grotesk',sans-serif;

font-size:1.7rem;

font-weight:600;

letter-spacing:1px;

text-transform:uppercase;

}

.modelInfo p{

margin-top:7px;

font-size:.7rem;

letter-spacing:2px;

text-transform:uppercase;

color:rgba(255,255,255,.65);

}


/* ==========================================
   AGENCY
========================================== */

.agencySection{

min-height:80vh;

display:flex;
flex-direction:column;
justify-content:center;

padding:120px 8%;

background:
linear-gradient(
135deg,
#f4eee6,
#d7cbbd
);

color:#111;

}

.agencySection .smallTitle{

color:#6b5b3b;

}

.agencySection h2{

max-width:1050px;

}

.agencySection h2 span{

display:block;

color:transparent;

-webkit-text-stroke:1px #111;

}

.agencySection > p:not(.smallTitle){

max-width:650px;

margin:35px 0;

font-size:1.05rem;

line-height:1.9;

color:#444;

}


/* ==========================================
   APPLY
========================================== */

.applySection{

min-height:75vh;

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

gap:50px;

padding:120px 8%;

background:
linear-gradient(
135deg,
#17121b,
#080808
);

}

.applyContent{

max-width:700px;

}

.applyContent > p:not(.smallTitle){

max-width:560px;

margin:28px 0 35px;

font-size:1rem;

line-height:1.9;

color:var(--muted);

}

.lightBtn{

background:var(--champagne);

color:#111;

}

.lightBtn:hover{

transform:translateY(-4px);

box-shadow:
0 18px 45px rgba(0,0,0,.3);

}

.applyNumber{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(4rem,10vw,10rem);

font-weight:700;

letter-spacing:-7px;

color:rgba(255,255,255,.05);

white-space:nowrap;

}


/* ==========================================
   CONTACT
========================================== */

.contactSection{

display:flex;

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

gap:50px;

padding:110px 8%;

background:
linear-gradient(
135deg,
#8e8070,
#d8cbbb
);

color:#111;

}

.contactSection > div{

max-width:780px;

}

.contactSection .smallTitle{

color:#554936;

}

.contactSection p:not(.smallTitle){

margin-top:25px;

max-width:600px;

line-height:1.8;

color:#3f3b36;

}

.contactSection .primaryBtn{

flex-shrink:0;

background:#111;

border-color:#111;

color:white;

}


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

.mainFooter{

padding:70px 6% 35px;

background:#050505;

display:grid;

grid-template-columns:2fr 1fr;

gap:35px;

align-items:end;

}

.footerLogo{

font-family:'Space Grotesk',sans-serif;

font-size:clamp(2.8rem,8vw,7rem);

font-weight:700;

letter-spacing:-5px;

line-height:.9;

}

.footerLinks{

display:flex;

justify-content:flex-end;

gap:24px;

}

.footerLinks a{

font-size:.72rem;

letter-spacing:2px;

text-transform:uppercase;

color:rgba(255,255,255,.7);

}

.mainFooter > p{

font-size:.68rem;

letter-spacing:2px;

text-transform:uppercase;

color:rgba(255,255,255,.45);

}

.mainFooter > p:last-child{

text-align:right;

}


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

@media(max-width:1000px){

.desktopNav,
.bookBtn{

display:none;

}

.menuBtn{

display:block;

}

.hero{

padding-top:120px;

align-items:flex-start;

}

.heroContent{

width:62%;

}

.heroVisual{

width:60%;

right:-12%;

}

.heroModels{

height:82vh;

}

.heroCircle{

width:500px;
height:500px;

}

.modelCard{

height:500px;

}

}


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

@media(max-width:700px){

.mainHeader{

height:78px;

padding:0 22px;

}

.logo{

font-size:1.05rem;

letter-spacing:4px;

}

.hero{

min-height:100svh;

padding:
105px 22px 0;

display:block;

}

.heroContent{

width:100%;

max-width:none;

position:relative;

z-index:5;

}

.smallTitle{

font-size:.61rem;

letter-spacing:4px;

margin-bottom:15px;

}

.hero h1{

font-size:clamp(3.6rem,17vw,5.4rem);

letter-spacing:-3px;

margin-bottom:18px;

}

.heroText{

max-width:95%;

font-size:.88rem;

line-height:1.7;

margin-bottom:24px;

}

.heroButtons{

gap:10px;

}

.primaryBtn,
.secondaryBtn,
.lightBtn{

min-height:52px;

padding:0 18px;

font-size:.65rem;

letter-spacing:1.4px;

}

.heroLocation{

display:none;

}

.heroVisual{

position:absolute;

width:100%;
height:57%;

right:0;
bottom:0;

}

.heroModels{

height:100%;
width:115%;

object-position:bottom center;

}

.heroCircle{

width:370px;
height:370px;

right:50%;

transform:translateX(50%);

bottom:-30px;

}

.scrollText{

display:none;

}

.modelsSection{

padding:85px 20px;

}

.sectionHeading{

align-items:flex-start;

margin-bottom:35px;

}

.sectionHeading h2,
.agencySection h2,
.applySection h2,
.contactSection h2{

font-size:2.7rem;

letter-spacing:-2px;

}

.sectionLink{

display:none;

}

.modelGrid{

grid-template-columns:1fr;

gap:16px;

}

.modelCard{

height:520px;

}

.agencySection,
.applySection,
.contactSection{

padding:90px 22px;

}

.agencySection{

min-height:auto;

}

.applySection{

min-height:auto;

display:block;

}

.applyNumber{

font-size:4rem;

letter-spacing:-3px;

margin-top:60px;

white-space:normal;

}

.contactSection{

display:block;

}

.contactSection .primaryBtn{

margin-top:35px;

}

.mainFooter{

grid-template-columns:1fr;

padding:60px 22px 30px;

}

.footerLogo{

font-size:3.3rem;

letter-spacing:-3px;

}

.footerLinks{

justify-content:flex-start;

flex-wrap:wrap;

}

.mainFooter > p:last-child{

text-align:left;

}

}


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

@media(max-width:420px){

.hero h1{

font-size:3.35rem;

}

.heroButtons{

display:grid;

grid-template-columns:1fr 1fr;

}

.primaryBtn,
.secondaryBtn{

width:100%;

padding:0 10px;

}

.heroVisual{

height:53%;

}

.modelCard{

height:470px;

}

}
/* ==========================================
   CYBERMUSE COMPACT CLASSIC LAYOUT OVERRIDE
   PLACE AT THE END OF style.css
========================================== */


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

.mainHeader{

position:sticky;

top:0;

height:82px;

padding:0 5%;

background:rgba(10,8,14,.96);

backdrop-filter:blur(18px);

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

z-index:1000;

}

.logo{

font-size:1.15rem;

letter-spacing:5px;

}

.menuBtn{

flex-shrink:0;

}


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

.hero{

min-height:auto;

display:block;

padding:100px 6% 90px;

overflow:hidden;

background:
radial-gradient(
circle at 85% 75%,
rgba(212,175,55,.15),
transparent 38%
),
linear-gradient(
135deg,
#0a0910 0%,
#17121e 55%,
#211c1c 100%
);

}

.heroContent{

width:100%;

max-width:920px;

margin:0 auto;

}

.hero h1{

max-width:850px;

font-size:clamp(4rem,9vw,7.5rem);

line-height:.9;

margin-bottom:28px;

}

.heroText{

max-width:680px;

font-size:1.05rem;

line-height:1.85;

margin-bottom:32px;

}

.heroButtons{

display:flex;

align-items:center;

gap:14px;

}

.heroButtons a{

width:auto;

min-width:210px;

}

.heroLocation{

margin-top:45px;

padding-top:25px;

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

}

.scrollText{

display:none;

}


/* ==========================================
   ALL SECTIONS
========================================== */

.agencySection,
.applySection,
.contactSection{

min-height:auto;

}

.agencySection .primaryBtn,
.applySection .lightBtn,
.contactSection .primaryBtn{

width:auto;

align-self:flex-start;

}


/* ==========================================
   AGENCY
========================================== */

.agencySection{

display:block;

padding:100px 7%;

background:
linear-gradient(
135deg,
#f4eee5,
#ddd1c1
);

}

.agencySection h2{

max-width:950px;

font-size:clamp(3rem,7vw,6rem);

line-height:.94;

}

.agencySection > p:not(.smallTitle){

max-width:680px;

margin:30px 0 35px;

font-size:1.05rem;

line-height:1.85;

}

.agencySection .primaryBtn{

display:inline-flex;

min-width:230px;

}


/* ==========================================
   APPLY
========================================== */

.applySection{

display:grid;

grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);

align-items:center;

gap:60px;

padding:100px 7%;

background:
linear-gradient(
135deg,
#0c0a10,
#17121c
);

}

.applyContent{

max-width:690px;

}

.applySection h2{

font-size:clamp(3rem,7vw,6rem);

}

.applyContent > p:not(.smallTitle){

max-width:610px;

margin:28px 0 34px;

font-size:1.02rem;

line-height:1.85;

}

.applyNumber{

font-size:clamp(4.5rem,10vw,9rem);

line-height:.85;

letter-spacing:-6px;

text-align:right;

color:rgba(255,255,255,.07);

}


/* ==========================================
   CONTACT
========================================== */

.contactSection{

display:grid;

grid-template-columns:minmax(0,1fr) auto;

align-items:center;

gap:60px;

padding:90px 7%;

background:
linear-gradient(
135deg,
#bbae9e,
#e0d4c5
);

}

.contactSection h2{

font-size:clamp(3rem,6vw,5.5rem);

}

.contactSection p:not(.smallTitle){

max-width:620px;

margin-top:22px;

font-size:1rem;

line-height:1.8;

}

.contactSection .primaryBtn{

min-width:210px;

}


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

.mainFooter{

padding:65px 7% 35px;

grid-template-columns:1fr auto;

gap:35px;

}

.footerLogo{

font-size:clamp(2.8rem,7vw,6.5rem);

}


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

@media(max-width:900px){

.hero{

padding-top:85px;

padding-bottom:75px;

}

.applySection{

grid-template-columns:1fr;

gap:45px;

}

.applyNumber{

text-align:left;

font-size:5rem;

}

.contactSection{

grid-template-columns:1fr;

gap:35px;

}

}


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

@media(max-width:700px){

.mainHeader{

height:74px;

padding:0 20px;

}

.hero{

padding:72px 22px 65px;

}

.heroContent{

margin:0;

}

.hero h1{

font-size:clamp(3.45rem,15vw,5.2rem);

line-height:.92;

letter-spacing:-3px;

margin-bottom:24px;

}

.heroText{

font-size:.94rem;

line-height:1.75;

margin-bottom:28px;

}

.heroButtons{

display:grid;

grid-template-columns:1fr;

gap:12px;

}

.heroButtons a{

width:100%;

min-width:0;

}

.heroLocation{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-top:34px;

padding-top:20px;

}

.agencySection,
.applySection,
.contactSection{

padding:75px 22px;

}

.agencySection h2,
.applySection h2,
.contactSection h2{

font-size:clamp(2.8rem,12vw,4rem);

line-height:.96;

letter-spacing:-2px;

}

.agencySection > p:not(.smallTitle),
.applyContent > p:not(.smallTitle),
.contactSection p:not(.smallTitle){

font-size:.95rem;

line-height:1.8;

margin-top:24px;

}

.agencySection .primaryBtn,
.applySection .lightBtn,
.contactSection .primaryBtn{

width:100%;

margin-top:0;

}

.applyNumber{

margin-top:20px;

font-size:4.5rem;

letter-spacing:-4px;

}

.mainFooter{

display:block;

padding:55px 22px 30px;

}

.footerLinks{

justify-content:flex-start;

margin:30px 0;

}

.mainFooter > p{

margin-top:14px;

}

}


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

@media(max-width:420px){

.hero{

padding-left:18px;

padding-right:18px;

}

.hero h1{

font-size:3.25rem;

}

.agencySection,
.applySection,
.contactSection{

padding-left:18px;

padding-right:18px;

}

}
/* ==========================================
   CYBERMUSE GLOBAL BACKGROUND IMAGE
========================================== */

body{

background:
linear-gradient(
135deg,
rgba(7,7,10,.94),
rgba(19,15,24,.90),
rgba(47,40,37,.88)
),
url("../assets/images/cybermuse-bg.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

background-attachment:fixed;

}


/* Allow background to subtly show through */

.hero{

background:
linear-gradient(
135deg,
rgba(8,7,12,.82),
rgba(22,17,27,.76),
rgba(37,31,29,.72)
);

}

.applySection{

background:
linear-gradient(
135deg,
rgba(8,7,12,.91),
rgba(20,15,24,.87)
);

}


/* Light sections remain readable */

.agencySection{

background:
linear-gradient(
135deg,
rgba(244,238,229,.94),
rgba(221,209,193,.92)
);

}

.contactSection{

background:
linear-gradient(
135deg,
rgba(187,174,158,.94),
rgba(224,212,197,.92)
);

}


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

@media(max-width:700px){

body{

background-attachment:scroll;

background-position:center top;

}

.hero{

background:
linear-gradient(
180deg,
rgba(8,7,12,.80),
rgba(17,13,20,.74),
rgba(34,29,27,.78)
);

}

}
body{

min-height:100vh;

background:
linear-gradient(
135deg,
rgba(7,7,10,.88),
rgba(19,15,24,.84),
rgba(47,40,37,.80)
),
url("../assets/images/cybermuse-bg.jpg");

background-size:contain;

background-position:center top;

background-repeat:no-repeat;

background-attachment:fixed;

background-color:#0b0910;

}
@media(max-width:700px){

body{

background-size:100% auto;

background-position:center 74px;

background-attachment:scroll;

}

}
/* ==========================================
   BALANCED HERO IMAGE
========================================== */

.hero{

min-height:100svh;

position:relative;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:30px;

padding:110px 6% 50px;

overflow:hidden;

background:
linear-gradient(
135deg,
#08070c,
#17121d,
#241f1d
);

}

.heroContent{

position:relative;

z-index:3;

width:100%;

max-width:650px;

}

.heroImageWrap{

position:relative;

width:100%;

height:calc(100svh - 130px);

display:flex;

align-items:flex-end;

justify-content:center;

overflow:hidden;

z-index:2;

}

.heroBackgroundImage{

width:100%;

height:100%;

object-fit:contain;

object-position:center bottom;

display:block;

}


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

@media(max-width:700px){

.hero{

min-height:auto;

display:flex;

flex-direction:column;

align-items:stretch;

gap:35px;

padding:105px 22px 0;

}

.heroContent{

width:100%;

}

.heroImageWrap{

width:100%;

height:auto;

min-height:500px;

margin-top:5px;

}

.heroBackgroundImage{

width:100%;

height:auto;

max-height:650px;

object-fit:contain;

object-position:center bottom;

}

}
/* ==========================================
   FULL-WIDTH HERO MODEL IMAGE — MOBILE
========================================== */

@media(max-width:700px){

.hero{

padding:
105px 22px 0;

overflow:hidden;

}

.heroImageWrap{

width:100vw;

height:auto;

min-height:0;

margin-left:calc(50% - 50vw);

margin-right:calc(50% - 50vw);

margin-top:35px;

display:flex;

align-items:flex-end;

justify-content:center;

overflow:hidden;

}

.heroBackgroundImage{

display:block;

width:100vw;

height:auto;

max-width:none;

object-fit:contain;

object-position:center bottom;

}

}
/* ==========================================
   MOBILE MENU ACCOUNT
========================================== */

.menuAccount{

position:absolute;

top:85px;
left:50%;

transform:translateX(-50%);

width:calc(100% - 44px);
max-width:430px;

display:flex;
align-items:center;

gap:16px;

padding:16px;

background:
linear-gradient(
135deg,
rgba(255,255,255,.12),
rgba(255,255,255,.05)
);

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

backdrop-filter:blur(18px);

}

.menuAccountPhoto{

width:62px;
height:62px;

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

flex-shrink:0;

overflow:hidden;

border-radius:50%;

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

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

font-size:1.6rem;

}

.menuAccountPhoto img{

display:none;

width:100%;
height:100%;

object-fit:cover;

}

.menuAccountInfo{

min-width:0;

display:flex;
flex-direction:column;

gap:5px;

}

.menuAccountInfo strong{

font-family:'Space Grotesk',sans-serif;

font-size:1rem;

letter-spacing:1px;

text-transform:uppercase;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

.menuAccountInfo span{

font-size:.72rem;

color:rgba(255,255,255,.6);

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

.mobileMenu nav{

margin-top:110px;

}
/* ==========================================
   SPECIAL REQUEST MODAL
========================================== */

.specialRequestModal{
position:fixed;
inset:0;
z-index:5000;
display:none;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,.82);
backdrop-filter:blur(16px);
}

.specialRequestModal.active{
display:flex;
}

.specialRequestBox{
position:relative;
width:min(100%,650px);
max-height:92vh;
overflow-y:auto;
padding:38px;
border:1px solid rgba(255,255,255,.14);
background:
linear-gradient(
135deg,
#19151e,
#0c0a10
);
box-shadow:0 35px 100px rgba(0,0,0,.5);
}

.closeSpecialRequest{
position:absolute;
top:15px;
right:16px;
width:42px;
height:42px;
border:0;
background:rgba(255,255,255,.08);
color:#fff;
font-size:1.7rem;
cursor:pointer;
}

.specialRequestBox h2{
font-family:'Space Grotesk',sans-serif;
font-size:clamp(2.2rem,7vw,3.8rem);
line-height:1;
text-transform:uppercase;
margin-bottom:15px;
}

.specialRequestIntro{
margin-bottom:28px;
font-size:.86rem;
line-height:1.75;
color:rgba(255,255,255,.65);
}

.specialRequestGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:17px;
}

.specialInput{
display:flex;
flex-direction:column;
gap:8px;
}

.fullSpecialWidth{
grid-column:1 / -1;
}

.specialInput label{
font-size:.62rem;
font-weight:600;
letter-spacing:1.6px;
text-transform:uppercase;
color:rgba(255,255,255,.72);
}

.specialInput input,
.specialInput select,
.specialInput textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:0;
outline:none;
background:rgba(255,255,255,.055);
color:#fff;
}

.specialInput input,
.specialInput select{
height:54px;
padding:0 15px;
}

.specialInput textarea{
min-height:145px;
padding:15px;
resize:vertical;
line-height:1.7;
}

.specialInput input:focus,
.specialInput select:focus,
.specialInput textarea:focus{
border-color:var(--champagne);
background:rgba(255,255,255,.085);
}

.specialInput select option{
background:#17141c;
color:#fff;
}

.submitSpecialRequest{
width:100%;
min-height:58px;
margin-top:24px;
border:1px solid #fff;
background:#fff;
color:#111;
font-size:.68rem;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
cursor:pointer;
}

.submitSpecialRequest:disabled{
opacity:.55;
cursor:not-allowed;
}

.specialRequestStatus{
min-height:22px;
margin-top:14px;
text-align:center;
font-size:.76rem;
color:rgba(255,255,255,.65);
}

.specialRequestStatus.success{
color:#9ef0b4;
}

.specialRequestStatus.error{
color:#ff9aad;
}

@media(max-width:700px){

.specialRequestModal{
padding:0;
align-items:flex-end;
}

.specialRequestBox{
width:100%;
max-height:94vh;
padding:34px 18px 24px;
}

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

.fullSpecialWidth{
grid-column:auto;
}

}
/* ==========================================
   KEEP SPECIAL REQUEST VISIBLE
========================================== */

#specialRequestBtn{
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.3);
color:#fff;
cursor:pointer;
}


/* MOBILE */

@media(max-width:1000px){

#specialRequestBtn{
display:inline-flex;
min-height:40px;
height:40px;
padding:0 12px;
margin-left:auto;
margin-right:8px;

font-size:.56rem;
letter-spacing:1px;
white-space:nowrap;
}

}


/* SMALL MOBILE */

@media(max-width:420px){

#specialRequestBtn{
padding:0 9px;
font-size:.5rem;
letter-spacing:.7px;
}

}
/* CYBERMUSE wallet / paid access features */
.featureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.featureLink{display:block;padding:16px;border:1px solid #3b3241;border-radius:14px;background:#15111b;color:#fff;text-decoration:none;font-weight:800}.featureLink small{display:block;color:#b9aebe;font-weight:500;margin-top:5px}@media(max-width:700px){.featureGrid{grid-template-columns:1fr}}