/* Les Merveilles de Boukhara — palette taken from the business card */
:root {
  --cream: #faf3e4;
  --paper: #fffaf0;
  --sand: #f1e4c6;
  --green: #1f4a2c;
  --green-dark: #132f1c;
  --gold: #c8942e;
  --gold-light: #e8c26a;
  --burgundy: #8b1a1a;
  --turquoise: #1f8fa8;
  --ink: #2a2418;
  --muted: #6b5f4a;
  --line: rgba(200, 148, 46, .35);

  --font-title: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", "Segoe UI", Arial, sans-serif;

  --radius: 14px;
  --shadow: 0 10px 30px -12px rgba(60, 40, 10, .25);
  --nav-h: 68px;

  /* Subtle girih-like star pattern */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c8942e' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M40 18l6 16 16 6-16 6-6 16-6-16-16-6 16-6z'/%3E%3Cpath d='M40 26l10 4 4 10-4 10-10 4-10-4-4-10 4-10z'/%3E%3Cpath d='M0 0l10 4 4 10M80 0l-10 4-4 10M0 80l10-4 4-10M80 80l-10-4-4-10'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); }
h1, h2, h3 { font-family: var(--font-title); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; color: var(--green); }
p { margin: 0 0 1em; }

.container { width: min(1180px, 100% - 32px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.6em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 600 .95rem/1.2 var(--font-body);
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--primary { background: linear-gradient(135deg, var(--gold), #a8741c); color: #fff; }
.btn--ghost { border-color: var(--green); color: var(--green); background: transparent; }
.btn--ghost:hover { background: var(--green); color: var(--paper); }
.btn--whatsapp { background: #25d366; color: #fff; }
.btn--telegram { background: #2aabee; color: #fff; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 243, 228, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  width: min(1180px, 100% - 32px); margin-inline: auto;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { width: 34px; height: auto; }
.brand__name { font: 700 1.25rem/1 var(--font-title); color: var(--green); white-space: nowrap; }
.brand__name em { color: var(--burgundy); font-style: italic; }

.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a {
  font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--ink);
  position: relative; padding: 4px 0;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gold); transform: scaleX(0); transition: transform .25s;
}
.menu a:hover::after, .menu a.active::after { transform: scaleX(1); }

.lang { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.lang button {
  border: 0; background: none; cursor: pointer;
  font: 600 .75rem/1 var(--font-body); letter-spacing: .05em; color: var(--muted);
  padding: 7px 9px; border-radius: 999px; transition: background .2s, color .2s;
}
.lang button:hover { color: var(--green); }
.lang button[aria-pressed="true"] { background: var(--green); color: var(--paper); }

.burger { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; padding: 8px; }
.burger span { display: block; height: 2px; margin: 5px 0; background: var(--green); border-radius: 2px; transition: transform .25s, opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 56px 0 72px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232, 194, 106, .28), transparent 60%),
    var(--pattern),
    var(--cream);
  overflow: hidden;
}
/* Scalloped corner ornaments, echoing the business card */
.hero__ornament {
  position: absolute; top: 0; width: 260px; height: 140px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 140'%3E%3Cpath d='M0 0H260C244 2 236 12 230 22 220 12 204 12 198 26 186 18 168 22 166 38 152 32 134 40 136 56 120 52 106 64 110 80 94 78 82 92 88 108 72 108 62 120 66 134 44 130 22 134 0 140Z' fill='%231f4a2c'/%3E%3Cg transform='scale%28.84%29'%3E%3Cpath d='M0 0H260C244 2 236 12 230 22 220 12 204 12 198 26 186 18 168 22 166 38 152 32 134 40 136 56 120 52 106 64 110 80 94 78 82 92 88 108 72 108 62 120 66 134 44 130 22 134 0 140Z' fill='%23c8942e'/%3E%3C/g%3E%3Cg transform='scale%28.7%29'%3E%3Cpath d='M0 0H260C244 2 236 12 230 22 220 12 204 12 198 26 186 18 168 22 166 38 152 32 134 40 136 56 120 52 106 64 110 80 94 78 82 92 88 108 72 108 62 120 66 134 44 130 22 134 0 140Z' fill='%23f3dfa6'/%3E%3C/g%3E%3Cg transform='translate%2840 30%29'%3E%3Ccircle r='13' fill='%231f4a2c'/%3E%3Cpath d='M0-10 3-3 10 0 3 3 0 10-3 3-10 0-3-3Z' fill='%23e8c26a'/%3E%3Ccircle r='3' fill='%238b1a1a'/%3E%3C/g%3E%3Ccircle cx='100' cy='20' r='4' fill='%238b1a1a'/%3E%3Ccircle cx='22' cy='80' r='4' fill='%238b1a1a'/%3E%3C/svg%3E") no-repeat left top / contain;
  opacity: .9;
}
.hero__ornament--left { left: 0; }
.hero__ornament--right { right: 0; transform: scaleX(-1); }

.hero__inner { position: relative; }
.hero__logo { display: block; max-width: 920px; margin: 0 auto 28px; }
.hero__logo img { width: 100%; filter: drop-shadow(0 8px 18px rgba(80, 50, 10, .12)); }
.hero__kicker, .kicker {
  font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .8em;
}
.hero__title {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  max-width: 820px; margin: 0 auto .35em;
}
.hero__slogan {
  font: italic 500 clamp(1.15rem, 2.2vw, 1.5rem)/1.4 var(--font-title);
  color: var(--burgundy); margin-bottom: 1.8em;
}
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Facts ---------- */
.facts { background: var(--green); color: var(--sand); padding: 40px 0; position: relative; }
.facts::before, .facts::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(45deg, var(--gold) 0 6px, transparent 6px 12px);
  opacity: .6;
}
.facts::before { top: 0; } .facts::after { bottom: 0; }
.facts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.fact svg { width: 40px; height: 40px; fill: none; stroke: var(--gold-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 10px; }
.fact h3 { color: #fff; font-size: 1.3rem; margin-bottom: .25em; }
.fact p { font-size: .88rem; margin: 0; opacity: .85; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section--pattern { background: var(--pattern), var(--paper); }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section__title { font-size: clamp(2rem, 4vw, 2.9rem); }
.section__lead { color: var(--muted); font-size: 1.02rem; }
.section__head::after {
  content: ""; display: block; width: 120px; height: 12px; margin: 22px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6h48M72 6h48' stroke='%23c8942e' stroke-width='1.5'/%3E%3Cpath d='M60 0l6 6-6 6-6-6z' fill='%23c8942e'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: center; }
.about__text p { font-size: 1.02rem; }
.about__logo { max-width: 420px; justify-self: center; }
.about__logo img { filter: drop-shadow(0 14px 24px rgba(139, 26, 26, .18)); }
.ornament-line { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.ornament-line::before, .ornament-line::after { content: ""; height: 1.5px; background: var(--gold); flex: 1; max-width: 120px; }
.ornament-line span { width: 10px; height: 10px; background: var(--burgundy); transform: rotate(45deg); }

/* ---------- Products ---------- */
.products__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 22px 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
}
.product::before {
  content: ""; position: absolute; inset: 6px; border-radius: calc(var(--radius) - 4px);
  border: 1px dashed rgba(200, 148, 46, .25); pointer-events: none;
}
.product:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); }
.product__icon {
  width: 84px; height: 84px; padding: 10px; margin-bottom: 14px;
  background: radial-gradient(circle, #fff 0%, var(--sand) 100%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(200, 148, 46, .3);
}
.product h3 { font-size: 1.4rem; margin-bottom: .3em; }
.product p { font-size: .9rem; color: var(--muted); flex: 1; }
.tag {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px; background: rgba(31, 74, 44, .08); color: var(--green);
}
.products__note { text-align: center; margin: 40px auto 0; font-style: italic; color: var(--muted); max-width: 640px; }

/* ---------- Delivery ---------- */
.steps {
  list-style: none; padding: 0; margin: 0 0 48px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  counter-reset: step; position: relative;
}
.steps::before {
  content: ""; position: absolute; top: 26px; left: 10%; right: 10%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 14px);
}
.step { position: relative; text-align: center; padding: 0 6px; }
.step__num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--green); color: var(--gold-light);
  font: 700 1.5rem/1 var(--font-title);
  box-shadow: 0 0 0 6px var(--cream), 0 0 0 7px var(--line);
}
.step h3 { font-size: 1.2rem; margin-bottom: .3em; }
.step p { font-size: .87rem; color: var(--muted); margin: 0; }

.info-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.info-card {
  background: var(--paper); border-radius: var(--radius); padding: 30px 32px;
  border-left: 4px solid var(--gold); box-shadow: 0 2px 0 var(--line);
}
.info-card h3 { font-size: 1.45rem; }
.info-card p { margin: 0; color: var(--muted); }
.info-card strong { color: var(--green); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { position: relative; padding-left: 26px; margin-bottom: .45em; color: var(--muted); }
.checklist li::before {
  content: ""; position: absolute; left: 4px; top: .55em; width: 9px; height: 9px;
  background: var(--gold); transform: rotate(45deg);
}

/* ---------- Volumes ---------- */
.section--dark {
  background:
    radial-gradient(ellipse at 50% 120%, rgba(200, 148, 46, .25), transparent 60%),
    var(--pattern),
    var(--green-dark);
  color: var(--sand);
}
.section--dark .section__title { color: #fff; }
.section--dark .section__lead { color: rgba(241, 228, 198, .8); }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.tier {
  border: 1px solid rgba(232, 194, 106, .35); border-radius: var(--radius);
  padding: 34px 28px; text-align: center; background: rgba(255, 255, 255, .03);
}
.tier--featured { background: linear-gradient(160deg, rgba(200, 148, 46, .22), rgba(200, 148, 46, .06)); border-color: var(--gold); transform: translateY(-8px); }
.tier__label { font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
.tier__value { font: 700 clamp(1.8rem, 3.4vw, 2.5rem)/1.1 var(--font-title); color: #fff; margin-bottom: .45em; }
.tier p:last-child { font-size: .9rem; opacity: .85; margin: 0; }
.packaging { margin-top: 48px; text-align: center; }
.packaging h3 { color: var(--gold-light); font-size: 1.5rem; }
.packaging ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.packaging li { padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(232, 194, 106, .4); font-size: .9rem; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 40px; }
.contact-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; text-align: center; display: flex; flex-direction: column; align-items: center;
  box-shadow: var(--shadow);
}
.contact-card__flag { display: flex; width: 48px; height: 32px; border-radius: 4px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.contact-card__flag span { flex: 1; }
.contact-card__flag--h { flex-direction: column; }
.contact-card__mailicon { width: 48px; height: 32px; margin-bottom: 14px; fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; }
.contact-card h3 { font-size: 1.6rem; margin-bottom: .1em; }
.contact-card__desc { font-size: .88rem; color: var(--muted); }
.contact-card__phone { font-weight: 600; font-size: 1.15rem; text-decoration: none; color: var(--ink); margin-bottom: 18px; }
.contact-card__email { font-size: .95rem; word-break: break-all; }
.contact-card__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; margin-top: auto; }

.quote {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; max-width: 900px; margin: 0 auto;
}
.quote h3 { font-size: 1.7rem; text-align: center; }
.quote__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote__full { grid-column: 1 / -1; }
.quote label span { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 4px; letter-spacing: .03em; }
.quote input, .quote textarea {
  width: 100%; padding: 11px 13px; border: 1px solid #dccca6; border-radius: 9px;
  background: #fff; font: inherit; font-size: .95rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.quote input:focus, .quote textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 148, 46, .2); }
.quote input.invalid { border-color: var(--burgundy); }
.quote textarea { resize: vertical; }
.quote__footer { display: flex; align-items: center; gap: 18px; margin-top: 20px; flex-wrap: wrap; }
.quote__note { font-size: .82rem; color: var(--muted); margin: 0; }

.person { text-align: center; margin-top: 56px; }
.person__name { font: 700 2rem/1.1 var(--font-title); color: var(--green); margin: 0; letter-spacing: .02em; }
.person__role { font-weight: 600; color: var(--gold); letter-spacing: .2em; margin-bottom: 14px; }
.person__cities { font: 600 1.05rem/1 var(--font-title); letter-spacing: .25em; text-transform: uppercase; margin: 0 0 6px; }
.person__cities span { color: var(--gold); font-size: .7em; vertical-align: middle; margin: 0 .5em; }
.person__country { font-size: .75rem; letter-spacing: .5em; text-transform: uppercase; color: var(--muted); }

/* ---------- Footer ---------- */
.footer { background: var(--green-dark); color: var(--sand); text-align: center; padding: 48px 0 40px; border-top: 4px solid var(--gold); }
.footer img { width: 40px; margin: 0 auto 12px; }
.footer__name { font: 700 1.5rem/1 var(--font-title); color: #fff; margin-bottom: 6px; }
.footer__tagline { font: italic 500 1.05rem/1.3 var(--font-title); color: var(--gold-light); }
.footer__copy { font-size: .8rem; opacity: .7; margin: 18px 0 0; }
.footer a { color: inherit; }

/* Floating chat button — mobile only */
.float-chat {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  display: none; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.float-chat svg { width: 30px; height: 30px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .product:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .menu { gap: 18px; }
  .products__grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .steps::before { display: none; }
}

@media (max-width: 900px) {
  .burger { display: block; order: 3; }
  .lang { margin-left: auto; }
  .menu {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-110%); visibility: hidden; transition: transform .3s, visibility .3s;
    z-index: -1;
  }
  .menu.open { transform: none; visibility: visible; }
  .menu a { padding: 14px 24px; border-top: 1px solid var(--line); font-size: 1rem; }
  .menu a::after { display: none; }

  .facts__grid { grid-template-columns: repeat(2, 1fr); }
  .about__grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .about__logo { max-width: 240px; order: -1; }
  .ornament-line { justify-content: center; }
  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .info-cards, .tiers, .contact__grid { grid-template-columns: 1fr; }
  .tier--featured { transform: none; }
  .quote__grid { grid-template-columns: 1fr 1fr; }
  .hero__ornament { width: 170px; height: 92px; }
  .float-chat { display: grid; }
}

@media (max-width: 560px) {
  :root { --nav-h: 60px; }
  .brand__name { display: none; }
  .section { padding: 68px 0; }
  .hero { padding: 36px 0 56px; }
  .hero__ornament { width: 120px; height: 65px; }
  .products__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product { padding: 20px 12px 18px; }
  .product__icon { width: 66px; height: 66px; }
  .product h3 { font-size: 1.15rem; }
  .product p { font-size: .8rem; }
  .steps { grid-template-columns: 1fr; }
  .facts__grid { gap: 22px 16px; }
  .quote { padding: 24px 18px; }
  .quote__grid { grid-template-columns: 1fr; }
  .lang button { padding: 7px 7px; }
}