
:root{
  --bg:#2e2116; --bg-alt:#3b2b1e; --text:#f5efe9; --muted:#d9c9b8;
  --brand:#e0b277; --accent:#b88f57; --card:#20160f; --stroke:rgba(255,255,255,.08);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.05)),
  repeating-linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px),
  var(--bg);
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}

/* Top bar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--brand);color:#1a120b;
  border-bottom:1px solid rgba(0,0,0,.08);animation: fadeInDown .6s ease-out both;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:34px}
.topbar-label{font-weight:700;letter-spacing:.2px}
.topbar-socials, .topbar-contacts{display:flex;gap:10px;align-items:center}
.topbar-socials a, .topbar-contacts a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;
  color:#1a120b;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.1);transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
  position:relative; overflow:visible;}
.topbar-socials a:hover, .topbar-contacts a:hover{transform:translateY(-1px) scale(1.05);
  box-shadow:0 0 10px rgba(186,139,71,0.6), 0 0 18px rgba(186,139,71,0.45);background:rgba(0,0,0,.12)}
/* Bold glow overlay */
.topbar-socials a::after, .topbar-contacts a::after{content:"";position:absolute;inset:-8px;border-radius:999px;
  background:radial-gradient(circle, rgba(224,178,119,0.55) 0%, rgba(224,178,119,0.25) 45%, rgba(224,178,119,0) 70%);
  opacity:0;transform:scale(0.85);transition:opacity .2s ease, transform .25s ease;pointer-events:none;}
.topbar-socials a:hover::after, .topbar-contacts a:hover::after{opacity:1;transform:scale(1.1)}
/* Nudge header below topbar */
.site-header{ position:sticky; top:34px; z-index:50; background:rgba(46,33,22,.85); backdrop-filter:blur(6px); border-bottom:1px solid var(--stroke);}

.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text);font-weight:800;letter-spacing:.3px}
.brand img{width:42px;height:42px;object-fit:contain;border-radius:8px;box-shadow:0 0 0 1px var(--stroke)}
nav a{margin-left:18px;font-weight:600}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid var(--accent);font-weight:700;text-decoration:none}
.btn-primary{background:var(--brand);color:#1a120b;border-color:transparent}
.btn-outline{background:transparent;color:var(--muted)}
.btn:hover{text-decoration:none;opacity:.95;box-shadow:0 0 12px rgba(224,178,119,0.7), 0 0 24px rgba(224,178,119,0.5);transform:scale(1.03);transition:all 0.25s ease-in-out}

.hero{padding:72px 0;background:radial-gradient(60% 60% at 20% 20%, rgba(224,178,119,.15), transparent), var(--bg-alt)}
.hero-inner{display:grid;grid-template-columns:1.3fr .9fr;gap:28px;align-items:center}
.hero h1{font-family:Merriweather, serif;font-size:42px;line-height:1.1;margin:0 0 12px}
.hero p{color:var(--muted);font-size:18px;margin:0 0 20px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.contact-inline{margin-top:16px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hero-card{background:var(--card);border:1px solid var(--stroke);border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.hero-card h3{margin-top:0;font-family:Merriweather, serif}
.hero-card ul{margin:0;padding-left:18px;color:var(--muted)}
.hero-banner{margin:20px 0;text-align:center}
.hero-banner img{max-width:100%;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.hero-banner img:hover{box-shadow:0 0 20px rgba(224,178,119,0.7), 0 0 40px rgba(224,178,119,0.5);transform:scale(1.02);transition:all 0.3s ease-in-out}

.section{padding:64px 0}
.section h2{font-family:Merriweather, serif;font-size:32px;margin:0 0 24px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:20px;min-height:140px}
.card h3{margin:0 0 8px}
.alt{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent), var(--bg-alt)}

.split{display:grid;grid-template-columns:1fr .9fr;gap:20px}
.checklist{list-style:none;padding-left:0;color:var(--muted)}
.checklist li::before{content:"✔";margin-right:8px;color:var(--brand)}

.contact-form{background:var(--card);border:1px solid var(--stroke);border-radius:16px;padding:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-weight:600;margin:10px 0 6px}
input,select,textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--stroke);background:#120c08;color:var(--text)}
input::placeholder,textarea::placeholder{color:#9e8f80}

.site-footer{border-top:1px solid var(--stroke);padding:28px 0;background:#1c140e}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:16px}
.brand-row{display:flex;align-items:center;gap:10px}
.brand-row img{width:32px;height:32px;border-radius:8px;object-fit:contain}
.socials{display:flex;gap:12px;align-items:center;margin-top:6px}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--stroke);
  color:var(--brand);background:#120c08;transition:transform .2s ease, box-shadow .25s ease;position:relative;overflow:visible}
.socials a:hover{transform:translateY(-1px) scale(1.05);box-shadow:0 0 12px rgba(224,178,119,0.7), 0 0 24px rgba(224,178,119,0.5)}
.socials a::after{content:"";position:absolute;inset:-8px;border-radius:999px;background:radial-gradient(circle, rgba(224,178,119,0.55) 0%, rgba(224,178,119,0.25) 45%, rgba(224,178,119,0) 70%);
  opacity:0;transform:scale(0.85);transition:opacity .2s ease, transform .25s ease;pointer-events:none}
.socials a:hover::after{opacity:1;transform:scale(1.1)}

.tiny{margin-top:12px;color:#a99683;font-size:12px;text-align:center}

@keyframes fadeInDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes sectionGlow{0%{box-shadow:0 0 0 rgba(224,178,119,0)}30%{box-shadow:0 0 24px rgba(224,178,119,0.7)}100%{box-shadow:0 0 0 rgba(224,178,119,0)}}
.section.glow-highlight,.hero.glow-highlight{animation:sectionGlow 1.2s ease-out;border-radius:16px}

@media (max-width: 880px){
  .hero-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr;gap:12px}
  .split{grid-template-columns:1fr}
  nav a{margin-left:12px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
