:root{
  --bg:#f6f1ff; --muted:#666; --accent:#8d6fb6; --accent-2:#2b2b2b; --container:1100px; --header-h:72px;
  --lav-100:#f6f1ff; --lav-200:#e9ddff; --lav-300:#d7c6ff;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; color:var(--accent-2); background:var(--bg);}
.container{max-width:var(--container); margin:0 auto; padding:1rem}
.site-header{position:fixed; top:0; left:0; right:0; z-index:60; height:var(--header-h); display:block; background:linear-gradient(90deg, rgba(183,110,121,0.95), rgba(192,138,149,0.95)); border-bottom:1px solid rgba(0,0,0,0.06); backdrop-filter:blur(6px); box-shadow:0 6px 20px rgba(0,0,0,0.08); transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease;}
.site-header.hidden{transform:translateY(calc(-1 * var(--header-h))); box-shadow:0 2px 6px rgba(0,0,0,0.04);}
body{padding-top:var(--header-h);} 
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem 1rem}
.brand{font-weight:800; font-size:1.05rem; text-decoration:none; color:#fff; display:flex; align-items:center; gap:.6rem}
.header-logo{height:48px; width:auto; display:block; border-radius:8px}
.brand-text{font-weight:700; margin-left:.4rem}
.header-tagline{display:block; font-size:.8rem; color:rgba(255,255,255,0.85); margin-left:.4rem}
.nav{display:flex; gap:0.75rem; align-items:center}
.nav a{color:rgba(255,255,255,0.95); text-decoration:none; padding:.45rem .6rem; border-radius:8px; transition:all .18s ease}
.nav a:hover{background:rgba(255,255,255,0.12); color:#fff}
.nav a.active{background:linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)); color:#fff}
.nav-toggle{display:none; background:transparent; border:0; font-size:1.4rem; padding:.35rem}

.hero{padding:4rem 0; background:linear-gradient(180deg,var(--lav-100),#fff)}
.hero{padding:0; background:linear-gradient(180deg,var(--lav-100),#fff)}
.hero.fullscreen{background-image:none; background-size:cover; background-position:center; background-repeat:no-repeat; min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; background:linear-gradient(180deg,var(--lav-100),#fff)}
.hero-overlay{width:100%; background:linear-gradient(rgba(10,10,10,0.35), rgba(10,10,10,0.15)); padding:4rem 0}
.hero.fullscreen .hero-inner{color:#fff; display:block; text-align:center; padding:2rem}
.hero h1{font-size:clamp(2rem,6vw,3.2rem); margin:0 0 .6rem; color:var(--accent-2)}
.hero.fullscreen .hero-inner h1{color:#fff}
.hero p{color:var(--muted); margin:0 0 1rem}
.hero.fullscreen .lead{font-size:1.05rem; color:rgba(255,255,255,0.95); margin-bottom:0.6rem}
.hero.fullscreen .muted{color:rgba(255,255,255,0.9); max-width:780px; margin:0.4rem auto 1rem}
.hero .btn.primary{background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.18); color:#fff}

.hero .brand-block{display:flex; align-items:center; gap:1rem}
.hero .brand-block .brand-text{font-size:1.1rem}

.card-preview .caption{font-size:0.9rem; color:var(--muted); text-align:right; margin-top:.5rem}

.btn{background:transparent; border:1px solid rgba(255,255,255,0.18); padding:.6rem .9rem; cursor:pointer; border-radius:8px; transition:transform .12s ease, box-shadow .12s ease; color:#fff}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.06)}
.btn.primary{background:rgba(255,255,255,0.12); color:#fff; border-color:rgba(255,255,255,0.18)}

.contact{background:linear-gradient(180deg,#fff,var(--lav-100)); padding:2rem 0}
.contact-grid{display:grid; grid-template-columns:1fr 420px; gap:2rem; align-items:start}
.map-wrap{margin-top:1rem; border-radius:8px; overflow:hidden; box-shadow:0 12px 40px rgba(45,20,64,0.04)}
.contact .contact-details{background:#fff; padding:1rem; border-radius:8px; box-shadow:0 8px 20px rgba(45,20,64,0.04)}
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.gallery-item{background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 8px 20px rgba(45,20,64,0.04)}
.gallery-item img{width:100%; height:220px; object-fit:cover; display:block}
.gallery-item figcaption{font-size:0.9rem; color:var(--muted); padding:0.75rem}
.gallery-item:hover{transform:translateY(-6px); transition:transform .18s ease}

.how, .contact{padding:2rem 0}

.site-footer{border-top:1px solid #eee; padding:1rem 0; text-align:center; color:var(--muted)}

.site-footer{background:linear-gradient(180deg,var(--lav-200),var(--lav-100)); border-top:1px solid rgba(0,0,0,0.04); padding:2.25rem 0 1.25rem; color:var(--accent-2)}
.footer-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.5rem; align-items:start}
.footer-col{padding:.25rem}
.footer-col h4{margin:0 0 .5rem; color:var(--accent-2)}
.footer-col p{margin:0 0 .35rem}
.footer-col .brand{font-size:1.05rem; font-weight:700; color:var(--accent-2)}
.footer-col.about .muted{color:rgba(43,43,43,0.7)}
.social-icons .social{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:transparent; border:1px solid rgba(0,0,0,0.06)}
.social-icons .social:hover{transform:translateY(-4px); box-shadow:0 10px 30px rgba(45,20,64,0.08)}
.social-icons .social img{width:20px; height:20px}
.footer-col.links a{color:var(--accent-2); text-decoration:none}
.footer-col.links a:hover{text-decoration:underline}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:1rem; color:var(--muted)}
.footer-bottom .back-top{color:var(--accent-2); text-decoration:none}

/* Decorative divider above bottom */
.site-footer::before{content:''; display:block; height:1px; background:linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0)); margin-bottom:1rem}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; align-items:flex-start}
  .social-icons{margin-top:.5rem}
}

.social-icons{margin-top:.5rem; display:flex; gap:.5rem}
.footer-col.contact .social-icons{justify-content:center}
.social{display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:50%; background:#fff; border:1px solid #eee; color:var(--accent-2); text-decoration:none}
.social svg{width:20px; height:20px}
.social img.social-img{width:20px; height:20px}
.social:hover{transform:translateY(-3px)}
.social.insta{color:#C13584}
.social.wa{color:#25D366}
.social.fb{color:#1877F2}

/* Floating left social bar */
.social-float{position:fixed; left:12px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:10px; z-index:9999}
.social-float .social{width:48px; height:48px; box-shadow:0 6px 18px rgba(0,0,0,0.08)}
@media (max-width:700px){
  .social-float{display:none}
}

.modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); opacity:0; pointer-events:none; transition:opacity .2s}
.modal[aria-hidden="false"]{opacity:1; pointer-events:auto}
.modal-content{background:#fff; padding:1.25rem; border-radius:8px; width:90%; max-width:420px; position:relative}
.modal-close{position:absolute; right:8px; top:8px; background:transparent; border:0; font-size:1rem}
.modal form{display:grid; gap:.5rem}
.modal label{display:block; font-size:.9rem}
.modal input{width:100%; padding:.5rem; border:1px solid #ddd; border-radius:6px}

@media (max-width:1100px){
  .hero.fullscreen .hero-inner{padding:2rem}
}
@media (max-width:900px){
  .hero h1{font-size:1.9rem}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  .hero.fullscreen{min-height:70vh}
  .hero.fullscreen .hero-inner{padding:1.6rem}
  .gallery{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav a{padding:.45rem .5rem}
}
@media (max-width:700px){
  .nav{display:none; position:fixed; right:12px; top:72px; background:#fff; border:1px solid #eee; padding:1rem; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,0.08); border-radius:10px; width:220px}
  .nav.show{display:flex}
  .nav-toggle{display:block}
  .header-inner{padding:.5rem .75rem}
  .brand{font-size:1rem}
  .header-logo{height:40px}
  .header-tagline{display:none}
}