
:root{
  --bg:#0F0F10;
  --surface:#141416;
  --muted:#1B1C1F;
  --text:#F4F4F5;
  --subtext:#C8C8CC;
  --brand:#C5A572; /* champagne gold */
  --brand-2:#9C7E44;
  --ring: rgba(197,165,114,.35);
  --radius:20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0F0F10 0%, #121214 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

.container{max-width:1100px;margin:0 auto;padding:0 1.2rem}
.section{padding:4rem 0}
.section.muted{background:linear-gradient(180deg,#121214 0%, #141416 100%);border-top:1px solid #202023;border-bottom:1px solid #202023}
.section-head{margin-bottom:1.5rem}
.section-head h2{font-family:"Playfair Display",serif;font-size:2.2rem;letter-spacing:.2px}
.section-head p{color:var(--subtext)}

.topbar{background:var(--muted);border-bottom:1px solid #202023}
.topbar p{padding:.55rem 0;color:#AFAFB4;font-size:.95rem}
.topbar a{color:#E9E9EE;text-decoration:none;border-bottom:1px dotted transparent}
.topbar a:hover{border-color:var(--brand)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(20,20,22,0.86);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid #202023}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{font-family:"Playfair Display",serif;font-weight:700;font-size:1.35rem;color:#fff;text-decoration:none;letter-spacing:.4px}
.nav{display:flex;gap:1rem}
.nav a{color:#EAEAF0;text-decoration:none;padding:.55rem .8rem;border-radius:10px}
.nav a:hover{background:#1D1E22}
.menu-toggle{display:none;background:transparent;border:none;color:#fff;font-size:1.4rem}

.hero{position:relative;overflow:hidden}
.hero img{width:100%;height:62vh;object-fit:cover;filter:brightness(.6)}
.hero .hero-text{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1rem}
.hero h1{font-family:"Playfair Display",serif;font-size:3rem;line-height:1.1;margin-bottom:.6rem;text-shadow:0 10px 40px rgba(0,0,0,.5)}
.hero p{color:#EDEDF2;font-size:1.05rem}
.cta-group{margin-top:1rem;display:flex;gap:.8rem;justify-content:center}

.btn{display:inline-block;border:1px solid #2A2A2E;border-radius:999px;padding:.7rem 1.1rem;text-decoration:none;color:#fff;transition:transform .2s, box-shadow .2s, background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.btn.primary{background:linear-gradient(180deg,var(--brand),var(--brand-2));border-color:transparent;color:#0B0B0C}
.btn.primary:hover{box-shadow:0 12px 32px var(--ring)}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .menu-toggle{display:block}
  .nav{display:none;flex-direction:column;position:absolute;top:64px;right:1.2rem;background:#17181B;border:1px solid #202023;border-radius:var(--radius);padding:.6rem;width:min(92vw,320px)}
  .nav a{padding:.8rem 1rem}
}

.card{background:linear-gradient(180deg,#16171A 0%, #121316 100%);border:1px solid #1F2023;border-radius:var(--radius);overflow:hidden;transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.card-body{padding:1rem}
.card h3{font-family:"Playfair Display",serif;font-size:1.3rem;margin-bottom:.3rem}
.card p{color:#CFCFD6}
.link{color:#EDEDF2;text-underline-offset:3px}
.link:hover{text-decoration:underline}

.page-head{padding:2.4rem 0 1.2rem}
.page-head h1{font-family:"Playfair Display",serif;font-size:2.2rem}
.page-head p{color:var(--subtext)}

.panel{background:#15161A;border:1px solid #202023;border-radius:var(--radius);padding:1.1rem;margin:1rem 0}
.list{margin:1rem 0 0 1.2rem}
.list li{margin:.4rem 0;color:#D8D8DE}

.fun{display:flex;flex-direction:column;gap:.6rem}
.fun-output{color:#EDEDF2;font-weight:600}

.site-footer{border-top:1px solid #202023;background:#121214;padding:2rem 0;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.2rem}
.footer-grid h4{font-size:1rem;margin-bottom:.4rem;color:#EFEFF5}
.footer-grid p,.footer-nav{color:#B6B6BC}
.footer-nav{list-style:none;padding:0;margin:0}
.footer-nav li{margin:.35rem 0}
.footer-nav a{color:#DADAE0;text-decoration:none}
.footer-nav a:hover{text-decoration:underline}
.meta{color:#9E9EA4;font-size:.9rem}
.copyright{color:#8E8E95;margin-top:1rem;font-size:.9rem;text-align:center}

.whatsapp-float{
  position:fixed;right:18px;bottom:18px;height:54px;width:54px;border-radius:999px;
  background:linear-gradient(180deg,#25D366,#1EBE59);display:grid;place-items:center;
  color:#0B0B0C;text-decoration:none;border:0;box-shadow:0 14px 38px rgba(0,0,0,.35);
  transition:transform .2s, box-shadow .2s; z-index:60
}
.whatsapp-float:hover{transform:translateY(-2px);box-shadow:0 18px 48px rgba(0,0,0,.4)}

.brand, h1, h2, h3 { letter-spacing: .2px }
