:root{
--cream:#f7f3ed;
--dark:#24322d;
--accent:#d9a28f;
--muted:#6f716e;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:Manrope,sans-serif;
background:linear-gradient(135deg,#efe5db,#faf8f5);
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
color:var(--dark);
}
.hero{
background:white;
width:min(900px,92%);
padding:60px;
border-radius:28px;
box-shadow:0 25px 70px rgba(0,0,0,.12);
text-align:center;
}
.logo{
width:90px;height:90px;
margin:auto;
border-radius:50%;
border:1px solid var(--dark);
display:grid;
place-items:center;
font:600 52px 'Cormorant Garamond',serif;
}
h3{font-family:'Cormorant Garamond',serif;font-size:38px;margin:20px 0 0}
h1{font-family:'Cormorant Garamond',serif;font-size:72px;margin:15px 0}
.intro{max-width:600px;margin:0 auto 30px;color:var(--muted);line-height:1.8}
.status{display:inline-flex;gap:12px;align-items:flex-start;padding:16px 20px;background:#f6f1eb;border-radius:14px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:6px}
.contact-link{
display:block;
margin:30px auto 15px;
color:var(--dark);
font-weight:600;
text-decoration:none;
}
.webmail-button{
display:inline-block;
padding:14px 26px;
background:var(--dark);
color:#fff;
text-decoration:none;
border-radius:999px;
text-transform:uppercase;
font-size:12px;
letter-spacing:.08em;
font-weight:600;
transition:.2s;
}
.webmail-button:hover{
background:#3a4c45;
transform:translateY(-2px);
}
footer{margin-top:40px;color:var(--muted);font-size:12px}
@media(max-width:700px){
.hero{padding:35px 25px}
h1{font-size:48px}
h3{font-size:30px}
}