:root{
  --rose:#E8BDD0;
  --rose-700:#D590AE;
  --ink:#3D3340;
  --ink-60: rgba(61,51,64,.6);
  --sand:#F3E7EF;
  --sea:#74C7C7;
  --white:#FFFFFF;
  --shadow: 0 20px 60px rgba(61,51,64,.15);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(116,199,199,.18), transparent 60%),
    radial-gradient(900px 700px at -10% 120%, rgba(232,189,208,.25), transparent 60%),
    linear-gradient(180deg, #fff, #fff);
  line-height:1.6;
}

/* NAV */
.header{
  position:fixed; inset:0 0 auto 0; height:76px; display:flex; align-items:center; gap:24px;
  padding:0 24px; z-index:1000; backdrop-filter: blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48));
  border-bottom:1px solid rgba(61,51,64,.08);
}
.brand{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--ink)}
.brand img{height:42px; width:auto}
.brand .title{font-family: Georgia, "Times New Roman", serif; letter-spacing:.14em; font-weight:700; text-transform:uppercase; font-size:14px}

.nav{margin-left:auto; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.nav a{
  text-decoration:none; color:var(--ink); padding:10px 14px; border-radius:999px;
  transition:all .25s ease; font-weight:600; letter-spacing:.04em;
}
.nav a:hover, .nav a:focus{background:rgba(232,189,208,.35); outline:none}

/* HERO */
.hero{
  position:relative; min-height:92vh; display:grid; place-items:center; padding:120px 24px 64px; overflow:hidden;
  background: radial-gradient(1200px 900px at 20% 0%, rgba(232,189,208,.55), transparent 60%),
             radial-gradient(1000px 700px at 85% 100%, rgba(116,199,199,.45), transparent 60%),
             linear-gradient(135deg, #F9F1F6 0%, #EDE4F4 40%, #D8F0F0 100%);
}
.hero::after{
  content:""; position:absolute; inset:-20% -10% -10% -10%;
  background:
    radial-gradient(120px 120px at 15% 25%, rgba(255,255,255,.7) 0, rgba(255,255,255,0) 70%),
    radial-gradient(200px 200px at 75% 40%, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 70%),
    radial-gradient(160px 160px at 35% 80%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 70%);
  pointer-events:none; filter: blur(1px);
}
.hero-card{
  position:relative; text-align:center; padding:36px 28px; max-width:900px; width:min(92vw,900px);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.6));
  box-shadow: var(--shadow); backdrop-filter: blur(8px); border:1px solid rgba(61,51,64,.07);
  animation: fadeUp .8s ease both;
}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
h1{
  font-family: Georgia, "Times New Roman", serif;
  text-transform:uppercase; letter-spacing:.18em; margin:0 0 10px; font-size: clamp(24px, 5vw, 40px);
}
.lead{font-size: clamp(16px, 2.4vw, 20px); opacity:.9; margin:0 0 22px}

.btn{
  display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:999px; text-decoration:none;
  font-weight:700; letter-spacing:.04em;
  border:1.2px solid var(--ink-60); color:var(--ink); background:#fff; transition: all .25s ease;
  box-shadow: 0 8px 24px rgba(61,51,64,.08);
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 12px 26px rgba(61,51,64,.12)}
.btn-primary{background: linear-gradient(90deg, var(--rose), var(--sea)); color:#1F1724; border-color: transparent}
.btn-ghost{background:#fff}

.btn .dot{width:10px;height:10px;border-radius:999px;background:#25D366; box-shadow:0 0 0 6px rgba(37,211,102,.15)}

/* Sections */
.section{padding:80px 20px}
.section .wrap{max-width:1100px; margin:0 auto}
.section h2{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 4.5vw, 34px); letter-spacing:.12em; text-transform:uppercase; margin:0 0 24px
}
.grid-cards{
  display:grid; grid-template-columns: repeat( auto-fit, minmax(220px,1fr) ); gap:18px;
}
.card{
  padding:22px; border-radius:16px; background:linear-gradient(180deg, #fff, rgba(255,255,255,.86));
  border:1px solid rgba(61,51,64,.08); box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform: translateY(-3px); box-shadow: 0 20px 50px rgba(61,51,64,.16)}
.card .icon{width:38px; height:38px}
.card h3{margin:10px 0 6px; font-size:18px}
.card p{margin:0; opacity:.9; font-size:14.5px}

/* Portfolio */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin: 12px 0 24px}
.filter-btn{cursor:pointer}
.gallery{columns: 1; column-gap:14px}
@media (min-width:700px){ .gallery{columns:2} }
@media (min-width:1000px){ .gallery{columns:3} }
.item{break-inside:avoid; position:relative; margin-bottom:14px; border-radius:16px; overflow:hidden; box-shadow: var(--shadow)}
.item img{width:100%; height:auto; display:block; transition: transform .35s ease}
.item:hover img{transform: scale(1.03)}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(15,12,18,.8); display:none; align-items:center; justify-content:center; z-index:2000}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw; max-height:86vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox:focus{outline:none}

/* Timeline */
.timeline{display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
@media (max-width:900px){ .timeline{grid-template-columns:1fr} }
.step{padding:22px; border-radius:16px; border:1px dashed rgba(61,51,64,.18); background:#fff; box-shadow: var(--shadow)}

/* CTA band */
.cta{ text-align:center; padding:70px 20px; background: linear-gradient(90deg, rgba(232,189,208,.35), rgba(116,199,199,.35)); border-top:1px solid rgba(61,51,64,.08); border-bottom:1px solid rgba(61,51,64,.08)}

/* Footer */
.footer{padding:40px 20px; text-align:center; font-size:14px; color:#2a2430; border-top:1px solid rgba(61,51,64,.08)}

/* Floating WhatsApp */
.whats{
  position:fixed; right:18px; bottom:18px; width:58px; height:58px; border-radius:999px; display:grid; place-items:center;
  background:#25D366; color:#fff; text-decoration:none; z-index:1500; box-shadow:0 20px 40px rgba(37,211,102,.35);
  animation: halo 2.4s ease-in-out infinite;
}
@keyframes halo{0%,100%{box-shadow:0 0 0 6px rgba(37,211,102,.22)} 50%{box-shadow:0 0 0 14px rgba(37,211,102,.08)}}
.whats svg{width:28px; height:28px; fill:#fff}

/* Focus styles */
a:focus-visible, button:focus-visible{outline: 3px solid var(--sea); outline-offset:3px}


/* --- Mobile-first improvements & hamburger --- */
.burger{
  margin-left:auto; display:inline-flex; flex-direction:column; gap:6px; background:transparent; border:0; cursor:pointer;
}
.burger span{width:26px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease}
@media (min-width: 900px){ .burger{display:none} }

.nav{ position:fixed; top:76px; left:0; right:0; background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9)); padding:10px 16px; transform:translateY(-120%); transition: transform .3s ease; box-shadow: 0 12px 30px rgba(0,0,0,.08)}
.nav.open{ transform:translateY(0) }
@media (min-width: 900px){
  .nav{ position:static; transform:none; background:transparent; box-shadow:none; padding:0}
}

/* Hero mobile spacing */
@media (max-width: 600px){
  .hero{padding:110px 16px 56px}
  .hero-card{padding:28px 18px}
  .btn{padding:12px 16px}
}

/* Reveal animation for sections */
.reveal{opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Elevated luxury details */
.card{background: radial-gradient(120% 100% at 0% 0%, #fff 0, rgba(255,255,255,.9) 60%, rgba(255,255,255,.86) 100%); border:1px solid rgba(61,51,64,.12)}
.item::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(50% 60% at 30% 20%, rgba(255,255,255,.25), transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.item:hover::after{opacity:.9}

/* Gallery spacing on mobile */
@media (max-width:700px){ .gallery{columns:1} }