@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Manrope:wght@300;400;600&display=swap');

:root{
--bg:#0F0F14;
--card:#181820;
--pink:#C67A8B;
--pinkSoft:#E5A6B3;
--text:#F5F5F5;
--muted:#A5A5A5;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;}

body{
margin:0;
font-family:'Manrope',sans-serif;
background:var(--bg);
color:var(--text);
}

a{color:var(--pinkSoft);text-decoration:none;}
a:hover{color:var(--pink);}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
background:#111;
position:sticky;
top:0;
z-index:1000;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-family:'Playfair Display',serif;
font-size:20px;
}

.logo img{width:50px;border-radius:50%;}

nav{display:flex;gap:20px;}
nav a{font-weight:500;}

.menu-toggle{display:none;font-size:28px;cursor:pointer;}

.hero{
min-height:90vh;
display:flex;
align-items:center;
justify-content:space-between;
padding:60px 8%;
background:radial-gradient(circle at top,#22161c,var(--bg));
}

.hero-text{max-width:600px}
.hero-text h1{
font-family:'Playfair Display',serif;
font-size:60px;
margin-bottom:10px;
}

.hero img{
width:320px;
border-radius:50%;
}

.btn{
display:inline-block;
margin-top:20px;
padding:14px 36px;
background:linear-gradient(45deg,var(--pink),var(--pinkSoft));
border-radius:40px;
color:white;
border:none;
cursor:pointer;
}

section{padding:80px 8%;text-align:center;}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:40px;
}

.card{
background:var(--card);
padding:30px;
border-radius:16px;
transition:.35s;
cursor:pointer;
}

.card:hover{
transform:translateY(-10px);
box-shadow:0 0 30px rgba(198,122,139,.6);
}

.form-wrapper{
display:flex;
justify-content:center;
margin-top:40px;
}

.form-card{
background:var(--card);
padding:40px;
border-radius:16px;
max-width:500px;
width:100%;
box-shadow:0 0 30px rgba(0,0,0,.4);
}

.form-card input,
.form-card textarea,
.form-card select{
width:100%;
padding:12px;
margin-top:10px;
margin-bottom:20px;
background:#111;
border:1px solid #333;
border-radius:8px;
color:white;
font-family:inherit;
}

footer{
background:#0b0b10;
padding:40px;
text-align:center;
}

@media(max-width:900px){

.menu-toggle{display:block;}

nav{
position:absolute;
top:70px;
right:0;
background:#111;
flex-direction:column;
width:200px;
padding:20px;
display:none;
}

nav.active{display:flex;}

.hero{flex-direction:column;text-align:center;}
.hero img{width:200px;margin-top:30px;}
.hero-text h1{font-size:40px;}
}