:root{
 --sand:#d8c7a4;
 --blue:#6f95b5;
 --text:#2f3133;
 --bg:#faf8f4;
}
*{box-sizing:border-box}
body{
 margin:0;
 font-family:Inter,Arial,sans-serif;
 color:var(--text);
 background:var(--bg);
}
.hero img{
 width:100%;
 height:min(60vh,520px);
 object-fit:cover;
 display:block;
 animation:fade .7s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.container{
 max-width:900px;
 margin:auto;
 padding:2rem;
}
h1{
 font-family:"Cormorant Garamond",serif;
 font-size:3rem;
 margin:.2rem 0;
 text-align:center;
}
.subtitle{
 text-align:center;
 color:#666;
 font-size:1.2rem;
}
.features{
 display:flex;
 justify-content:center;
 gap:1.5rem;
 flex-wrap:wrap;
 margin:2rem 0;
 font-weight:600;
}
.card{
 background:white;
 border-left:6px solid var(--sand);
 padding:1.5rem;
 border-radius:10px;
 margin:1.5rem 0;
 box-shadow:0 2px 10px rgba(0,0,0,.06);
}
h2{
 color:var(--blue);
 margin-top:0;
}
a{color:var(--blue);text-decoration:none}
.button{
 display:inline-block;
 background:var(--blue);
 color:white;
 padding:.9rem 1.4rem;
 border-radius:8px;
 font-weight:600;
 margin-top:.5rem;
}
.button:hover{opacity:.92}
footer{
 text-align:center;
 color:#777;
 margin:3rem 0 1rem;
}
@media(max-width:700px){
 h1{font-size:2.3rem}
 .container{padding:1.2rem}
}