*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
:root{
--bg:#0A0A0A;
--bg-alt:#111114;
--bg-card:#16161a;
--pink:#FF1493;
--yellow:#CCFF00;
--white:#f5f5f7;
--gray:#9a9aa3;
--border:rgba(255,20,147,.25);
--font-head:'Raleway',sans-serif;
--font-body:'Nunito',sans-serif;
--max-width:1200px;
--header-h:80px;
}
body{
font-family:var(--font-body);
background:var(--bg);
color:var(--white);
line-height:1.7;
font-weight:400;
overflow-x:hidden;
min-height:100vh;
}
body::before{
content:'';
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(255,20,147,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(204,255,0,.04) 1px,transparent 1px);
background-size:48px 48px;
pointer-events:none;
z-index:0;
}
h1,h2,h3,h4,h5,h6{
font-family:var(--font-head);
font-weight:300;
line-height:1.2;
letter-spacing:.5px;
}
h1{font-size:clamp(2.2rem,5vw,3.8rem)}
h2{font-size:clamp(1.8rem,4vw,2.6rem)}
h3{font-size:clamp(1.3rem,3vw,1.7rem)}
p{margin-bottom:1rem;color:var(--gray)}
a{color:var(--yellow);text-decoration:none;transition:color .3s ease}
a:hover{color:var(--pink)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
.container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}
section{position:relative;padding:5rem 0;z-index:1}
.section-alt{background:var(--bg-alt)}
.section-alt::before{
content:'';
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(204,255,0,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,20,147,.03) 1px,transparent 1px);
background-size:64px 64px;
pointer-events:none;
}
.section-title{text-align:center;margin-bottom:3rem}
.section-title h2{
display:inline-block;
position:relative;
padding-bottom:.8rem;
}
.section-title h2::after{
content:'';
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
width:60px;
height:3px;
background:linear-gradient(90deg,var(--pink),var(--yellow));
}
.section-title p{margin-top:1rem;max-width:600px;margin-left:auto;margin-right:auto}
.site-header{
position:fixed;
top:0;
left:0;
right:0;
height:var(--header-h);
z-index:1000;
background:transparent;
transition:background .4s ease,box-shadow .4s ease,backdrop-filter .4s ease;
border-bottom:1px solid transparent;
}
.site-header.scrolled{
background:rgba(10,10,10,.92);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-bottom-color:var(--border);
box-shadow:0 4px 30px rgba(255,20,147,.1);
}
.nav-wrapper{
max-width:var(--max-width);
margin:0 auto;
padding:0 1.5rem;
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
}
.logo{
font-family:var(--font-head);
font-size:1.5rem;
font-weight:700;
letter-spacing:1px;
color:var(--white);
text-transform:uppercase;
display:flex;
align-items:center;
gap:.5rem;
}
.logo .logo-mark{color:var(--pink);font-size:1.6rem}
.logo .logo-accent{color:var(--yellow)}
.logo:hover{color:var(--white)}
.nav-menu{
display:flex;
align-items:center;
gap:.3rem;
}
.nav-menu a{
font-family:var(--font-head);
color:var(--white);
font-size:.9rem;
text-transform:uppercase;
letter-spacing:1.5px;
padding:.6rem 1rem;
position:relative;
transition:color .3s ease;
}
.nav-menu a::after{
content:'';
position:absolute;
bottom:0;
left:50%;
width:0;
height:2px;
background:var(--yellow);
transition:width .3s ease,left .3s ease;
}
.nav-menu a:hover{color:var(--yellow)}
.nav-menu a:hover::after{width:60%;left:20%}
.nav-menu a.active,
.nav-menu a[aria-current="page"]{
color:var(--pink);
}
.nav-menu a.active::after,
.nav-menu a[aria-current="page"]::after{
width:60%;
left:20%;
background:var(--pink);
box-shadow:0 0 8px var(--pink);
}
.nav-toggle{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
padding:.5rem;
z-index:1001;
}
.nav-toggle span{
width:26px;
height:2px;
background:var(--white);
transition:transform .3s ease,opacity .3s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--pink)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--yellow)}
.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
padding-top:var(--header-h);
overflow:hidden;
}
.hero::before{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(ellipse at 20% 40%,rgba(255,20,147,.25),transparent 50%),
radial-gradient(ellipse at 80% 60%,rgba(204,255,0,.12),transparent 50%),
linear-gradient(135deg,#0A0A0A 0%,#1a0a14 50%,#0A0A0A 100%);
z-index:0;
}
.hero::after{
content:'';
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,20,147,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(204,255,0,.06) 1px,transparent 1px);
background-size:40px 40px;
mask-image:linear-gradient(180deg,transparent,black 30%,black 70%,transparent);
-webkit-mask-image:linear-gradient(180deg,transparent,black 30%,black 70%,transparent);
z-index:0;
}
.hero .container{
display:flex;
align-items:center;
justify-content:flex-end;
min-height:calc(100vh - var(--header-h));
}
.hero-card{
background:var(--white);
color:#1a1a1a;
padding:3rem;
border-radius:8px;
max-width:480px;
width:100%;
position:relative;
box-shadow:0 0 40px rgba(255,20,147,.3),0 20px 60px rgba(0,0,0,.5);
z-index:2;
}
.hero-card::before{
content:'';
position:absolute;
top:-2px;
left:-2px;
right:-2px;
bottom:-2px;
background:linear-gradient(135deg,var(--pink),var(--yellow));
z-index:-1;
border-radius:10px;
opacity:.5;
filter:blur(8px);
}
.hero-card .eyebrow{
display:inline-block;
font-family:var(--font-head);
font-size:.75rem;
letter-spacing:3px;
text-transform:uppercase;
color:var(--pink);
margin-bottom:1rem;
padding:.3rem .8rem;
border:1px solid var(--pink);
border-radius:4px;
}
.hero-card h1{color:#1a1a1a;margin-bottom:1rem;font-weight:300}
.hero-card h1 span{color:var(--pink);font-weight:700}
.hero-card p{color:#555;margin-bottom:1.8rem}
.btn{
display:inline-flex;
align-items:center;
gap:.6rem;
font-family:var(--font-head);
font-size:.85rem;
text-transform:uppercase;
letter-spacing:2px;
padding:.9rem 2rem;
border:2px solid var(--pink);
color:var(--white);
background:transparent;
cursor:pointer;
transition:all .3s ease;
text-decoration:none;
position:relative;
overflow:hidden;
}
.btn::before{
content:'';
position:absolute;
inset:0;
background:var(--pink);
transform:translateX(-100%);
transition:transform .3s ease;
z-index:-1;
}
.btn:hover{
color:#0A0A0A;
border-color:var(--pink);
box-shadow:0 0 25px rgba(255,20,147,.5);
transform:scale(1.03);
}
.btn:hover::before{transform:translateX(0)}
.btn .arrow{transition:transform .3s ease}
.btn:hover .arrow{transform:translateX(5px)}
.btn-yellow{border-color:var(--yellow);color:var(--yellow)}
.btn-yellow::before{background:var(--yellow)}
.btn-yellow:hover{
color:#0A0A0A;
box-shadow:0 0 25px rgba(204,255,0,.5);
}
.btn-solid{background:var(--pink);color:#0A0A0A;border-color:var(--pink);font-weight:700}
.btn-solid::before{background:var(--yellow)}
.btn-solid:hover{color:#0A0A0A;border-color:var(--yellow)}
.wave-divider{
position:relative;
width:100%;
line-height:0;
}
.wave-divider svg{
display:block;
width:100%;
height:60px;
}
.wave-divider.flip svg{transform:rotate(180deg)}
.cards-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:2rem;
margin-top:2rem;
}
.card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:10px;
padding:2rem;
transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
position:relative;
overflow:hidden;
}
.card::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:3px;
background:linear-gradient(90deg,var(--pink),var(--yellow));
transform:scaleX(0);
transform-origin:left;
transition:transform .35s ease;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(255,20,147,.15),0 0 20px rgba(204,255,0,.08);
border-color:rgba(204,255,0,.3);
}
.card:hover::before{transform:scaleX(1)}
.card-icon{
font-size:2.2rem;
margin-bottom:1.2rem;
display:inline-block;
width:60px;
height:60px;
line-height:60px;
text-align:center;
border-radius:50%;
background:rgba(255,20,147,.1);
border:1px solid var(--border);
}
.card h3{margin-bottom:.8rem;color:var(--white)}
.card h3 a{color:inherit}
.card p{margin-bottom:1.2rem;font-size:.95rem}
.card .btn{padding:.6rem 1.2rem;font-size:.75rem}
.content-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem;
align-items:center;
margin-bottom:4rem;
}
.content-row:last-child{margin-bottom:0}
.content-row.reverse .content-text{order:2}
.content-row.reverse .content-image{order:1}
.content-text h2{margin-bottom:1.2rem}
.content-text h2 span{color:var(--pink)}
.content-text p{margin-bottom:1rem}
.content-text .btn{margin-top:.5rem}
.content-image{
border-radius:12px;
overflow:hidden;
position:relative;
border:1px solid var(--border);
}
.content-image::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,rgba(255,20,147,.15),transparent 50%,rgba(204,255,0,.1));
pointer-events:none;
}
.content-image img{
width:100%;
height:320px;
object-fit:cover;
transition:transform .5s ease;
}
.content-image:hover img{transform:scale(1.05)}
.image-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:1.5rem;
margin:2rem 0;
}
.image-grid figure{
border-radius:10px;
overflow:hidden;
border:1px solid var(--border);
position:relative;
}
.image-grid img{
width:100%;
height:220px;
object-fit:cover;
transition:transform .4s ease;
}
.image-grid figure:hover img{transform:scale(1.08)}
.image-grid figcaption{
position:absolute;
bottom:0;
left:0;
right:0;
padding:.8rem 1rem;
background:linear-gradient(transparent,rgba(10,10,10,.9));
font-size:.85rem;
color:var(--yellow);
font-family:var(--font-head);
letter-spacing:1px;
}
.features-bar{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:2rem;
padding:2rem 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
margin:2rem 0;
}
.feature-pill{
display:flex;
align-items:center;
gap:.6rem;
font-family:var(--font-head);
font-size:.85rem;
letter-spacing:1px;
text-transform:uppercase;
color:var(--gray);
}
.feature-pill .dot{
width:8px;
height:8px;
border-radius:50%;
background:var(--pink);
box-shadow:0 0 8px var(--pink);
}
.feature-pill:nth-child(even) .dot{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
.contact-block{
max-width:600px;