/* === BISTRO TEI — STILURI PARTAJATE === */
:root{
  --verde:#1E3A2F;
  --verde-inchis:#152922;
  --verde-clar:#2D5346;
  --auriu:#C9A04B;
  --auriu-clar:#E5C77E;
  --auriu-inchis:#A07E2F;
  --crem:#FBF7EE;
  --crem-cald:#F5EDD9;
  --crem-rece:#F0EBDD;
  --piatra:#2A2520;
  --text:#2B2724;
  --text-mut:#6B6258;
  --text-mut2:#8A7F6F;
  --linie:#E5DCC6;
  --linie-soft:#EFE7D2;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:400;
  color:var(--text);
  background:var(--crem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.serif{font-family:'Fraunces',Georgia,serif;font-weight:400;letter-spacing:-0.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s}
.container{max-width:1240px;margin:0 auto;padding:0 32px}
.container-narrow{max-width:880px;margin:0 auto;padding:0 32px}

/* === NAV === */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,238,0.92);
  border-bottom:1px solid var(--linie);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;max-width:1240px;margin:0 auto;
}
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{
  width:44px;height:44px;border-radius:50%;
  background:var(--verde);
  display:flex;align-items:center;justify-content:center;
  color:var(--auriu);font-size:9.5px;font-weight:500;letter-spacing:1.2px;
  line-height:1;text-align:center;flex-shrink:0;
}
.logo-text{font-family:'Fraunces',serif;font-size:21px;color:var(--verde);letter-spacing:0.3px}
nav.main{display:flex;gap:32px}
nav.main a{font-size:14px;color:var(--text);font-weight:400}
nav.main a:hover,nav.main a.active{color:var(--verde)}
nav.main a.active{font-weight:500}
.btn-primary{
  font-size:13px;padding:11px 22px;border-radius:2px;
  background:var(--verde);color:var(--crem);
  letter-spacing:0.5px;font-weight:500;
  display:inline-block;border:none;cursor:pointer;
  transition:background .2s;
}
.btn-primary:hover{background:var(--verde-inchis);color:var(--crem)}
.btn-outline{
  font-size:13px;padding:11px 22px;border-radius:2px;
  border:1px solid var(--verde);color:var(--verde);
  background:transparent;letter-spacing:0.5px;font-weight:500;
  display:inline-block;cursor:pointer;
  transition:all .2s;
}
.btn-outline:hover{background:var(--verde);color:var(--crem)}
.btn-gold{
  font-size:13px;padding:11px 22px;border-radius:2px;
  background:var(--auriu);color:var(--piatra);
  letter-spacing:0.5px;font-weight:500;
  display:inline-block;border:none;cursor:pointer;
  transition:background .2s;
}
.btn-gold:hover{background:var(--auriu-clar);color:var(--piatra)}
.btn-outline-gold{
  font-size:13px;padding:11px 22px;border-radius:2px;
  border:1px solid var(--auriu);color:var(--auriu);
  background:transparent;letter-spacing:0.5px;font-weight:500;
  display:inline-block;cursor:pointer;
  transition:all .2s;
}
.btn-outline-gold:hover{background:var(--auriu);color:var(--piatra)}

/* === PAGE HEADER === */
.page-header{
  background:var(--verde);color:var(--crem);
  padding:96px 0 80px;text-align:center;
  border-bottom:1px solid rgba(201,160,75,0.2);
}
.page-header .eyebrow{
  font-size:11px;letter-spacing:3.5px;color:var(--auriu-clar);
  margin-bottom:16px;text-transform:uppercase;font-weight:500;
}
.page-header h1{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(40px,5vw,60px);line-height:1.1;
  letter-spacing:-0.02em;color:var(--crem);
}
.page-header .lede{
  font-size:17px;color:rgba(251,247,238,0.78);
  max-width:580px;margin:20px auto 0;line-height:1.6;font-weight:300;
}

/* === SECTION HEADS === */
.section-head{text-align:center;margin-bottom:60px}
.section-head .eyebrow{
  font-size:11px;letter-spacing:3px;color:var(--auriu);
  margin-bottom:14px;text-transform:uppercase;font-weight:500;
}
.section-head h2{
  font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(32px,4vw,46px);color:var(--verde);
  letter-spacing:-0.01em;line-height:1.1;
}
.section-head .lede{
  font-size:16px;color:var(--text-mut);max-width:580px;margin:18px auto 0;
  line-height:1.6;
}

/* === FOOTER === */
footer.contact{
  background:var(--verde-inchis);color:var(--crem);padding:80px 0 32px;
}
.contact-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.contact-col h4{
  font-size:11px;letter-spacing:3px;color:var(--auriu);
  margin-bottom:18px;text-transform:uppercase;font-weight:500;
}
.contact-col p,.contact-col a{font-size:14px;line-height:1.8;color:rgba(251,247,238,0.85)}
.contact-col a:hover{color:var(--auriu-clar)}
.contact-brand{
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.contact-brand .logo-mark{width:48px;height:48px;font-size:10px}
.contact-brand .logo-text{color:var(--crem);font-size:22px}
.contact-bottom{
  border-top:1px solid rgba(201,160,75,0.18);
  padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12px;color:rgba(251,247,238,0.48);letter-spacing:0.8px;
}
.socials{display:flex;gap:10px;margin-top:14px}
.socials a{
  width:34px;height:34px;border:1px solid rgba(201,160,75,0.4);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--auriu);font-size:13px;font-weight:500;
  transition:all .2s;
}
.socials a:hover{background:var(--auriu);color:var(--verde-inchis)}

/* === DEMO BADGE === */
.demo-badge{
  position:fixed;bottom:20px;right:20px;z-index:100;
  background:var(--piatra);color:var(--auriu-clar);
  padding:9px 14px;border-radius:2px;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;
  border:1px solid var(--auriu);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  pointer-events:none;
}

/* === MOBILE === */
@media(max-width:880px){
  nav.main{display:none}
  .nav-inner{padding:14px 20px}
  .container,.container-narrow{padding:0 20px}
  .page-header{padding:64px 0 56px}
  .contact-grid{grid-template-columns:1fr 1fr;gap:32px}
  .section-head{margin-bottom:42px}
}
@media(max-width:480px){
  .contact-grid{grid-template-columns:1fr}
  nav.main + .btn-primary{padding:9px 16px;font-size:12px}
  .logo-text{font-size:18px}
  .logo-mark{width:38px;height:38px;font-size:9px}
}