/* ===== Madame Esmeralda — общий стиль сайта ===== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --void: #06030f;
  --midnight: #11071f;
  --royal: #1c0a36;
  --plum: #2a0f4a;
  --burgundy: #3a0a26;
  --ruby: #7a1f3a;
  --rose: #d98a8a;
  --gold: #c9a44a;
  --gold-hi: #f4d98a;
  --brass: #a07a2a;
  --cream: #f1e6c8;
  --mist: #b6a5d4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--cream);
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, var(--plum) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 110%, var(--burgundy) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 20% 110%, var(--royal) 0%, transparent 55%),
    linear-gradient(180deg, var(--midnight) 0%, var(--void) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.65;
  overflow-x: hidden;
}

.display { font-family: 'Cinzel Decorative', 'Cinzel', serif; }
.title { font-family: 'Cinzel', serif; }

a { color: var(--gold-hi); text-decoration: none; transition: color .2s; }
a:hover { color: var(--cream); }

/* ===== Звёздный фон ===== */
.stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.stars span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--gold-hi); box-shadow: 0 0 4px var(--gold-hi);
  animation: tw 4s ease-in-out infinite;
}
@keyframes tw { 0%,100% { opacity: .2; } 50% { opacity: .9; } }

/* ===== Шапка ===== */
.site-header {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; max-width: 1100px; margin: 0 auto;
  flex-wrap: wrap; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-name { font-size: 22px; color: var(--gold-hi); letter-spacing: 1.5px; }
.nav { display: flex; gap: 22px; flex-wrap: wrap; }
.nav a {
  font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--mist);
}
.nav a:hover { color: var(--gold-hi); text-shadow: 0 0 10px rgba(244,217,138,.5); }

/* ===== Контейнер ===== */
.container { max-width: 860px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 5; }
.wide { max-width: 1100px; }

/* ===== Разделитель ===== */
.divider { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px 0; opacity: .8; }
.divider::before, .divider::after { content: ""; height: 1px; width: 90px; background: linear-gradient(to right, transparent, var(--gold), transparent); }
.divider span { color: var(--gold); font-size: 18px; }

/* ===== Кнопки ===== */
.btn-gold {
  display: inline-block; font-family: 'Cinzel', serif; letter-spacing: 1.5px;
  text-transform: uppercase; font-size: 14px; font-weight: 600;
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold) 45%, var(--brass) 100%);
  color: var(--midnight); padding: 15px 34px; border: 1px solid var(--gold-hi);
  border-radius: 7px; cursor: pointer; transition: all .25s;
  box-shadow: 0 4px 14px rgba(201,164,74,.3);
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.12); color: var(--midnight); box-shadow: 0 8px 24px rgba(201,164,74,.45); }

.btn-outline {
  display: inline-block; font-family: 'Cinzel', serif; letter-spacing: 1.5px;
  text-transform: uppercase; font-size: 13px;
  background: transparent; color: var(--cream); padding: 13px 28px;
  border: 1px solid rgba(201,164,74,.5); border-radius: 7px; transition: all .25s;
}
.btn-outline:hover { border-color: var(--gold-hi); color: var(--gold-hi); }

/* ===== Hero ===== */
.hero { text-align: center; padding: 50px 0 30px; position: relative; z-index: 5; }
.hero h1 { font-size: clamp(34px, 7vw, 58px); color: var(--gold-hi); letter-spacing: 2px; text-shadow: 0 0 24px rgba(244,217,138,.35); margin-bottom: 14px; line-height: 1.1; }
.hero .sub { font-size: clamp(17px, 3vw, 22px); color: var(--mist); font-style: italic; margin-bottom: 30px; }

/* ===== Карточки фич ===== */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin: 40px 0; }
.feature {
  background: linear-gradient(180deg, rgba(58,10,38,.5), rgba(28,10,54,.5));
  border: 1px solid rgba(201,164,74,.3); border-radius: 12px; padding: 26px 22px;
  text-align: center; transition: all .25s;
  box-shadow: inset 0 0 0 1px rgba(28,10,54,.6), inset 0 0 0 2px rgba(201,164,74,.2);
}
.feature:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 0 2px rgba(201,164,74,.4); }
.feature .icon { font-size: 38px; color: var(--gold-hi); margin-bottom: 14px; filter: drop-shadow(0 0 10px rgba(244,217,138,.4)); }
.feature h3 { font-family: 'Cinzel', serif; font-size: 18px; color: var(--gold-hi); margin-bottom: 10px; letter-spacing: .5px; }
.feature p { font-size: 16px; color: var(--cream); opacity: .85; }

/* ===== Секции контента ===== */
.section { padding: 30px 0; }
.section h2 { font-family: 'Cinzel', serif; font-size: clamp(24px, 4vw, 34px); color: var(--gold-hi); text-align: center; letter-spacing: 1px; margin-bottom: 8px; }
.section .lead { text-align: center; color: var(--mist); font-style: italic; font-size: 18px; margin-bottom: 20px; }

.prose { font-size: 18px; color: var(--cream); }
.prose p { margin-bottom: 18px; }
.prose h2 { font-family: 'Cinzel', serif; color: var(--gold-hi); font-size: 26px; margin: 30px 0 12px; letter-spacing: .5px; }
.prose h3 { font-family: 'Cinzel', serif; color: var(--gold); font-size: 20px; margin: 22px 0 10px; }
.prose ul { margin: 0 0 18px 22px; }
.prose li { margin-bottom: 8px; }
.prose .first-letter::first-letter { font-family: 'Cinzel Decorative', serif; font-size: 3.4em; float: left; line-height: .9; padding: 6px 12px 0 0; color: var(--gold-hi); text-shadow: 0 0 14px rgba(244,217,138,.45); }

/* ===== Сетка карточек-ссылок (для разделов значений карт/знаков) ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 24px 0; }
.mini-card {
  background: linear-gradient(160deg, var(--plum), var(--midnight));
  border: 1px solid var(--gold); border-radius: 10px; padding: 18px 12px;
  text-align: center; transition: all .25s; display: block;
  box-shadow: inset 0 0 0 3px var(--midnight), inset 0 0 0 4px var(--gold);
}
.mini-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 22px rgba(0,0,0,.5), inset 0 0 0 3px var(--midnight), inset 0 0 0 4px var(--gold-hi); }
.mini-card .sym { font-size: 32px; color: var(--gold-hi); display: block; margin-bottom: 8px; }
.mini-card .name { font-family: 'Cinzel', serif; font-size: 14px; color: var(--cream); letter-spacing: .5px; }
.mini-card .num { font-size: 11px; color: var(--mist); }

/* ===== Рекламные блоки ===== */
.ad-slot {
  margin: 28px auto; max-width: 100%; min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(201,164,74,.35); border-radius: 8px;
  background: rgba(28,10,54,.25); color: var(--mist); font-size: 12px;
  letter-spacing: 1px; text-transform: uppercase; font-family: 'Cinzel', serif;
  text-align: center; padding: 10px;
}
.ad-label { font-size: 10px; color: var(--mist); opacity: .5; text-align: center; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }

/* ===== Подвал ===== */
.site-footer {
  position: relative; z-index: 5; margin-top: 50px; padding: 30px 24px;
  border-top: 1px solid rgba(201,164,74,.2); text-align: center; color: var(--mist);
}
.site-footer .foot-nav { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.site-footer .foot-nav a { font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.site-footer .fine { font-size: 13px; opacity: .6; font-style: italic; }

/* ===== Встроенное приложение ===== */
.app-frame { width: 100%; border: none; border-radius: 14px; min-height: 1400px; box-shadow: 0 10px 40px rgba(0,0,0,.5); background: var(--midnight); }
.app-wrap { padding: 20px 0 40px; }

@media (max-width: 640px) {
  .site-header { padding: 14px 18px; }
  .nav { gap: 14px; }
  .hero { padding: 30px 0 20px; }
}