:root {
  color-scheme: light;
  font-family: "Inter", system-ui, sans-serif;
  --bg:#f9f4ec;
  --surface:#ffffff;
  --text:#1d1b16;
  --muted:#7e7056;
  --gold:#b89358;
  --gold-dark:#8f7545;
  --border:rgba(110,93,69,.15);
  --shadow:0 20px 60px rgba(29,27,22,.12);
}

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

html{scroll-behavior:smooth;}

body{
  background:
    radial-gradient(circle at top left,rgba(184,147,88,.14),transparent 32%),
    radial-gradient(circle at bottom right,rgba(201,175,129,.08),transparent 24%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
}

img{
  display:block;
  max-width:100%;
}

.container{
  width:min(1120px,calc(100% - 2rem));
  margin:auto;
}

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

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(110,93,69,.1);
}

.header-inner{
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.brand,
.logo-link{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.brand-logo{
  height:90px;
  width:auto;
  object-fit:contain;
}

.nav-menu{
  display:flex;
  gap:1.8rem;
  align-items:center;
}

.nav-menu a{
  color:var(--text);
  text-decoration:none;
  font-weight:500;
  transition:.3s;
}

.nav-menu a:hover,
.nav-menu a.active{
  color:var(--gold-dark);
}

.menu-toggle{
  display:none;
  border:none;
  background:none;
  font-size:1.8rem;
  cursor:pointer;
}

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

.hero-section{
    padding:5rem 0 6rem;
}

.hero-inner{
    display:grid;
    grid-template-columns:1.25fr .95fr;
    gap:5rem;
    align-items:center;
}

.hero-title{
    font-family: "DM Serif Display", serif;
    font-size: clamp(4.5rem, 8vw, 8rem);
    font-weight: 400;
    line-height: 0.88;
    letter-spacing: -3px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.hero-title .black{
    color:#1d1b16;
}

.hero-title .gold{
    color:#c8a35e;
}

.hero-copy p{
    color:#6e6557;
    font-size:1.1rem;
    max-width:520px;
    margin-bottom:2rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.hero-image-card{
  background:#fff;
  padding:1rem;
  border-radius:28px;
  box-shadow:var(--shadow);
}

.hero-image-card img{
  width:100%;
  height:620px;
  object-fit:cover;
  border-radius:20px;
}

.hero-section{
    position:relative;
    overflow:hidden;
}

.hero-section::before{
    content:"";
    position:absolute;
    width:140%;
    height:260px;
    left:-20%;
    top:70px;
    border-top:1px solid rgba(200,163,94,.35);
    border-radius:50%;
    z-index:0;
}

.hero-inner{
    position:relative;
    z-index:1;
}

/* ================= BUTTONS ================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.9rem 1.6rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
}

.btn-primary{
  background:var(--text);
  color:#fff;
}

.btn-secondary{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
}

/* ================= COMMON ================= */

.page-content,
.featured-section{
  padding:4rem 0;
}

.page-hero{
  margin-bottom:3rem;
}

.page-hero h1{
  font-size:clamp(2.3rem,4vw,4rem);
  margin-bottom:1rem;
}

.page-hero p{
  color:var(--muted);
  max-width:700px;
}

.featured-section,
.collections-grid,
.benefits-grid,
.contact-grid,
.reviews-grid{
  display:grid;
  gap:2rem;
}

.featured-section{
  grid-template-columns:repeat(3,1fr);
}

.collections-grid{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.benefits-grid,
.contact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.benefits-grid {
  margin-bottom: 90px;
}

.reviews-section{
    margin-top:40px;
}

.feature-card,
.collection-card,
.benefit-card,
.contact-card,
.review-card{
  background:#fff;
  border-radius:24px;
  padding:2rem;
  border:1px solid rgba(110,93,69,.08);
  box-shadow:0 18px 45px rgba(0,0,0,.06);
}

.collection-card img{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:18px;
  margin-bottom:1rem;
}

/* ================= ABOUT ================= */

.about-section{
  display:flex;
  gap:4rem;
  align-items:center;
}

.about-image,
.about-content{
  flex:1;
}

.about-image img{
  width:100%;
  height:650px;
  object-fit:cover;
  border-radius:20px;
  box-shadow:var(--shadow);
}

.about-content{
  display:flex;
  flex-direction:column;
  gap:2rem;
}

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

.contact-form-card form{
  display:grid;
  gap:1rem;
}

.contact-form-card input,
.contact-form-card textarea{
  width:100%;
  padding:1rem;
  border-radius:16px;
  border:1px solid var(--border);
  font:inherit;
}

.contact-form-card textarea{
  resize:vertical;
}

/* ================= REVIEWS ================= */

.review-card{
  transition:.3s;
}

.review-card:hover{
  transform:translateY(-8px);
}

.stars{
  color:var(--gold);
  font-size:1.3rem;
  letter-spacing:3px;
  margin-bottom:1rem;
}

.review-card p{
  color:var(--muted);
  font-style:italic;
  margin-bottom:1.5rem;
}

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

.site-footer{
  margin-top:3rem;
  background:#fff;
  border-top:1px solid var(--border);
}

.footer-inner{
  padding:1.5rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}

.footer-links{
  display:flex;
  gap:1rem;
}

.footer-links a{
  text-decoration:none;
  color:var(--muted);
}

/* Floating WhatsApp */

.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  font-size:30px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  z-index:999;
}

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

@media (max-width:900px){

.hero-inner,
.about-section,
.content-grid,
.contact-grid,
.benefits-grid,
.reviews-grid{
grid-template-columns:1fr;
display:grid;
}

.about-section{
display:flex;
flex-direction:column;
}

.about-image img{
height:450px;
}

.hero-image-card img{
height:500px;
}

.footer-inner{
flex-direction:column;
text-align:center;
}

}

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

@media (max-width:720px){

.header-inner{
min-height:80px;
flex-wrap:wrap;
}

.brand-logo{
height:65px;
}

.menu-toggle{
display:block;
}

.nav-menu{
display:none;
width:100%;
flex-direction:column;
padding:1rem 0;
border-top:1px solid var(--border);
}

.nav-menu.open{
display:flex;
}

.nav-menu a{
width:100%;
text-align:center;
padding:.5rem 0;
}

.hero-section{
padding:2rem 0;
}

.hero-inner{
grid-template-columns:1fr;
gap:2rem;
}

.hero-copy h1{
font-size:2.5rem;
line-height:1.1;
}

.hero-image-card img{
height:350px;
}

.collection-card img{
height:240px;
}

.contact-form-card{
padding:1.5rem;
}

.contact-form-card input,
.contact-form-card textarea{
padding:.8rem;
}

.footer-inner{
align-items:center;
text-align:center;
}

.footer-links{
justify-content:center;
flex-wrap:wrap;
}

}