:root {
  --bg: #f4efe7;
  --bg-soft: #fffdf9;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-strong: rgba(255, 255, 255, 0.98);
  --text: #171517;
  --muted: #5f5851;
  --bronze: #ab6a2c;
  --gold: #d19a5b;
  --steel: #8f9aad;
  --line: rgba(47, 39, 32, 0.14);
  --success: #1d8f52;
  --danger: #c33b46;
  --radius: 20px;
  --shadow: 0 24px 70px rgba(87, 58, 25, 0.12);
  --container: min(1180px, 92vw);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font-family: "Manrope", sans-serif;
  line-height: 1.7;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(209, 154, 91, 0.35), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(143, 154, 173, 0.22), transparent 35%),
    linear-gradient(180deg, #f9f5ef, #efe7dd 35%, #f9f4ed 100%);
  animation: toneShift 14s ease-in-out infinite alternate;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: radial-gradient(rgba(56, 39, 20, 0.35) 0.5px, transparent 0.5px);
  background-size: 2.5px 2.5px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; border-radius: calc(var(--radius) - 6px); }
.container { width: var(--container); margin: 0 auto; }
.progress-bar { position: fixed; inset: 0 0 auto; height: 3px; width: 0; z-index: 120; background: linear-gradient(90deg, var(--steel), var(--gold), var(--bronze)); }
.site-header { position: sticky; top: 0; z-index: 90; background: rgba(255, 252, 247, 0.85); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(64, 44, 23, 0.1); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 78px; }
.logo { display: inline-flex; align-items: center; gap: 12px; font-family: "Cormorant Garamond", serif; font-size: 2rem; letter-spacing: 0.02em; }
.logo svg { width: 40px; height: 40px; }
.logo svg path { fill: #1f150e !important; }
.logo svg circle { stroke: #a7672d !important; stroke-width: 2.2; }
.nav-desktop { display: none; gap: 20px; align-items: center; }
.nav-desktop a { color: var(--muted); transition: color .25s, transform .25s; position: relative; }
.nav-desktop a::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s; background: linear-gradient(90deg, var(--gold), var(--bronze)); }
.nav-desktop a.active,.nav-desktop a:hover { color: var(--text); transform: translateY(-1px); }
.nav-desktop a.active::after,.nav-desktop a:hover::after { transform: scaleX(1); }
.btn,button,input,select,textarea { font: inherit; }
.btn { border: 1px solid var(--line); padding: .78rem 1.28rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .24s, background .24s, border-color .24s, box-shadow .24s; cursor: pointer; color: var(--text); background: rgba(255,255,255,.7); }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.btn-primary { background: linear-gradient(120deg, #f6d9ba, #e9c396 40%, #d7a66c 100%); border-color: rgba(157, 98, 35, .45); color: #1b1208; box-shadow: 0 10px 24px rgba(163, 101, 34, .2); }
.btn-primary:hover { box-shadow: 0 14px 30px rgba(163, 101, 34, .28); }
.menu-toggle { background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: .35rem .55rem; }
.mobile-drawer { position: fixed; right: 0; top: 0; height: 100vh; width: min(360px, 85vw); transform: translateX(105%); background: #fffaf4; border-left: 1px solid var(--line); box-shadow: var(--shadow); z-index: 120; padding: 24px; transition: transform .35s; }
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer nav { display: grid; gap: 12px; margin-top: 24px; }
.mobile-drawer a { color: var(--muted); padding: .35rem 0; }
.mobile-drawer a.active,.mobile-drawer a:hover { color: var(--text); }
.drawer-overlay { position: fixed; inset: 0; background: rgba(9,7,4,.35); opacity: 0; visibility: hidden; transition: .3s; z-index: 110; }
.drawer-overlay.show { opacity: 1; visibility: visible; }
.page { animation: fadeIn .55s ease; }
.hero { padding: 80px 0 44px; }
.hero-grid { display: grid; gap: 26px; }
.panel,.card,.price-item,.review,.faq,.contact-panel,.toc,.policy,.table-wrap { background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(250,243,234,.92)); border: 1px solid rgba(76,56,33,.14); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.panel,.card,.review,.price-item {
  transition: transform .35s ease, box-shadow .35s ease;
}
.panel:hover,.card:hover,.review:hover,.price-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(122, 80, 36, 0.16);
}
.kicker { color: var(--bronze); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 700; }
h1,h2,h3,h4 { font-family: "Cormorant Garamond", serif; line-height: 1.08; margin: 0 0 12px; color: #1f1711; }
h1 { font-size: clamp(2.2rem, 7vw, 4.35rem); }
h2 { font-size: clamp(1.8rem, 5vw, 2.9rem); }
p,li { color: var(--muted); font-size: 1.03rem; }
.section { padding: 44px 0; }
.grid-2,.grid-3,.grid-4,.reviews-grid,.blog-grid,.prices-grid,.cards-grid { display: grid; gap: 16px; }
.cards-grid article,.blog-grid article { overflow: hidden; }
.cards-grid img,.blog-grid img,.hero-image { aspect-ratio: 4/5; object-fit: cover; }
.hero-image { min-height: 340px; box-shadow: 0 24px 60px rgba(53,31,11,.2); }
.hero-image { transition: transform .5s ease; }
.list-clean { margin: 0; padding: 0; list-style: none; }
.price-item { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.price { color: #25180e; font-weight: 700; }
.tag { display: inline-flex; font-size: .76rem; border: 1px solid rgba(83,58,33,.25); border-radius: 999px; padding: .3rem .7rem; color: #533b25; margin-right: 8px; background: rgba(255,255,255,.85); }
blockquote { margin: 16px 0; border-left: 3px solid var(--bronze); padding: 10px 14px; color: #3d2f24; background: rgba(255,255,255,.7); border-radius: 0 12px 12px 0; }
.table { width: 100%; border-collapse: collapse; }
.table th,.table td { padding: 10px; border-bottom: 1px solid rgba(89,66,43,.2); text-align: left; color: #4d3d2f; }
.form { display: grid; gap: 12px; }
label { display: grid; gap: 6px; color: #281d14; font-size: .96rem; }
input,select,textarea { width: 100%; border: 1px solid rgba(85,63,39,.3); border-radius: 12px; padding: .72rem .9rem; background: rgba(255,255,255,.95); color: #1f1712; box-shadow: inset 0 1px 2px rgba(0,0,0,.04); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #6d4d2c 50%), linear-gradient(135deg, #6d4d2c 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 30px; }
textarea { min-height: 130px; resize: vertical; }
.notice { border: 1px solid rgba(29,143,82,.35); color: #0f5f35; background: rgba(214,246,227,.9); border-radius: 12px; padding: 12px; }
.error { border-color: rgba(195,59,70,.35); color: #82212a; background: rgba(255,230,233,.95); }
.floating-book { position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 95; min-width: 280px; color: #1e140b; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(35,22,10,.25); backdrop-filter: blur(7px); z-index: 140; opacity: 0; visibility: hidden; transition: .24s; }
.modal.open { opacity: 1; visibility: visible; }
.modal-card { width: min(700px, 100%); max-height: 92vh; overflow: auto; background: linear-gradient(180deg, #fffdfa, #f5ebdf); border: 1px solid rgba(102,74,45,.25); border-radius: 18px; padding: 20px; box-shadow: 0 30px 90px rgba(65,37,15,.25); }
.modal-header { display: flex; justify-content: space-between; align-items: center; }
.close { border: 1px solid rgba(90,63,36,.3); color: #2a1d12; background: rgba(255,255,255,.8); border-radius: 10px; padding: .38rem .62rem; }
.cookie-banner { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 130; display: none; }
.cookie-banner .panel { background: rgba(255,252,247,.97); border: 1px solid rgba(78,59,39,.2); }
.cookie-banner.show { display: block; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-actions .btn { background: #fff; color: #2e2117; }
.cookie-actions .btn-primary { background: linear-gradient(120deg, #f6d9ba, #e9c396, #d7a66c); color: #1d1208; }
.map-embed {
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: 16px;
  filter: sepia(15%) saturate(95%) contrast(103%);
}
footer { margin-top: 62px; border-top: 1px solid rgba(84,61,35,.18); padding: 36px 0 98px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(246,237,226,.8)); }
.footer-grid { display: grid; gap: 16px; }
.small { font-size: .9rem; }
.reveal { opacity: 0; transform: translateY(24px) scale(.99); transition: opacity .6s ease, transform .6s ease; }
.reveal.show { opacity: 1; transform: translateY(0) scale(1); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toneShift {
  0% { filter: saturate(100%); }
  100% { filter: saturate(108%); }
}
@media (min-width: 720px) {
  .hero-grid,.grid-2 { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .grid-3,.prices-grid,.reviews-grid,.blog-grid,.cards-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nav-desktop { display: flex; }
  .menu-toggle { display: none; }
  .cookie-banner { left: auto; width: min(560px, 95vw); right: 18px; }
}