@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --bg: #fbf7f0;
  --bg-deep: #f5eee4;
  --text: #202b3b;
  --headline: #102f67;
  --body: #27313d;
  --gold: #c79743;
  --gold-bright: #d6ad5d;
  --line: rgba(199, 151, 67, 0.8);
  --blue: #082f6a;
  --blue-button: #063574;
  --surface: rgba(255, 252, 247, 0.9);
  --card-shadow: 0 14px 30px rgba(34, 35, 41, 0.13);
  --banner-overlay: linear-gradient(180deg, rgba(251, 247, 240, 0.03) 12%, rgba(251, 247, 240, 0.12) 58%, var(--bg) 100%);
  --logo-shadow: 0 12px 34px rgba(43, 39, 28, 0.17);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10141b;
  --bg-deep: #0d1016;
  --text: #f5efe2;
  --headline: #f8f2e6;
  --body: #e6dece;
  --gold: #c89b46;
  --gold-bright: #e0b85d;
  --line: rgba(201, 155, 70, 0.82);
  --blue: #081d3f;
  --blue-button: #062655;
  --surface: rgba(14, 18, 25, 0.95);
  --card-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --banner-overlay: linear-gradient(180deg, rgba(4, 7, 11, 0.38) 0%, rgba(4, 7, 11, 0.48) 56%, var(--bg) 100%);
  --logo-shadow: 0 17px 42px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  transition: background-color 0.32s, color 0.32s;
}

a { color: inherit; text-decoration: none; }

svg.icon { width: 1em; height: 1em; display: block; fill: currentColor; }

.directory-page {
  background:
    radial-gradient(circle at 50% 44%, rgba(199, 151, 67, 0.05), transparent 36%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  min-height: 100svh;
  position: relative;
  overflow: hidden;
}

.photo-banner { height: clamp(276px, 40.7vh, 385px); position: relative; overflow: hidden; }
.photo-banner img {
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(1.03) contrast(1.02);
  width: 100%;
  height: 133%;
  position: absolute;
  inset: 0;
  transform: translateY(-16%);
}
:root[data-theme="dark"] .photo-banner img { filter: saturate(0.88) contrast(1.02) brightness(0.72); }

.banner-overlay { background: var(--banner-overlay); transition: background 0.3s; position: absolute; inset: 0; }

.content-shell { min-height: calc(100svh - clamp(276px, 40.7vh, 385px)); padding: 94px 26px 28px; position: relative; }

.logo-wrap {
  aspect-ratio: 1;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(184px, 13.3vw, 220px);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -51%);
}
.brand-logo {
  object-fit: contain;
  width: 100%;
  height: 100%;
  filter: drop-shadow(var(--logo-shadow));
  background-color: var(--bg);
  border-radius: 50%;
  display: block;
}

.main-content { text-align: center; width: min(100%, 850px); margin: 0 auto; }
.main-content h1 {
  color: var(--headline);
  letter-spacing: -0.025em;
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.75rem, 4vw, 3.8rem);
  font-weight: 600;
  line-height: 1.03;
  transition: color 0.32s;
}

.tagline { color: var(--gold); display: flex; justify-content: center; align-items: center; gap: 20px; margin: 10px auto 0; }
.tagline span { background: var(--line); width: clamp(34px, 4vw, 65px); height: 1px; }
.tagline p { letter-spacing: 0.005em; margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.45rem, 2vw, 1.78rem); font-weight: 600; }

.ornament { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 12px auto 11px; }
.ornament span { background: var(--line); width: 73px; height: 1px; }
.ornament i { border: 1px solid var(--gold); width: 8px; height: 8px; display: block; transform: rotate(45deg); }

.about-copy { max-width: 805px; color: var(--body); margin: 0 auto; font-size: clamp(0.94rem, 1.07vw, 1.08rem); font-weight: 400; line-height: 1.58; transition: color 0.32s; }
.about-copy p { margin: 0 0 13px; }
.about-copy sup { font-size: 0.65em; position: relative; top: -0.25em; }

.primary-cta {
  background: var(--blue-button);
  color: #fff;
  border-radius: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-width: min(100%, 500px);
  margin-top: 22px;
  padding: 17px 22px;
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  font-weight: 600;
  transition: transform 0.18s, box-shadow 0.18s, background 0.3s;
  box-shadow: 0 11px 23px rgba(7, 42, 92, 0.24);
}
:root[data-theme="dark"] .primary-cta { border: 1px solid rgba(201, 155, 70, 0.42); box-shadow: 0 0 0 1px rgba(201, 155, 70, 0.1), 0 10px 27px rgba(0, 0, 0, 0.35); }
.primary-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 29px rgba(7, 42, 92, 0.3); }
.primary-cta svg.icon { flex: none; width: 1.45rem; height: 1.45rem; }
.primary-cta .cta-arrow { width: 1.2rem; height: 1.2rem; }

.social-rail { z-index: 4; display: flex; flex-direction: column; gap: 15px; position: absolute; top: clamp(105px, 13.2vh, 130px); left: clamp(22px, 2.6vw, 48px); }
.social-button {
  border: 4px solid var(--bg);
  border-radius: 999px;
  display: grid;
  place-items: center;
  width: clamp(52px, 4.2vw, 64px);
  height: clamp(52px, 4.2vw, 64px);
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.18);
}
:root[data-theme="dark"] .social-button { border-color: rgba(201, 155, 70, 0.47); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32); }
.social-button:hover { transform: translate(3px); box-shadow: 0 11px 23px rgba(0, 0, 0, 0.22); }
.social-button svg.icon { color: #fff; width: clamp(1.35rem, 1.65vw, 1.72rem); height: clamp(1.35rem, 1.65vw, 1.72rem); }
.social-button.telegram { background: #25a9e8; }
.social-button.website { background: #082e67; }
.social-button.email { background: #ce9b3f; }
.social-button.whatsapp { background: #18ba5d; }

.verification-card {
  z-index: 4;
  background: var(--surface);
  min-width: 278px;
  color: var(--headline);
  box-shadow: var(--card-shadow);
  border-radius: 17px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 20px 13px 14px;
  transition: background 0.32s, color 0.32s;
  position: absolute;
  bottom: clamp(30px, 6vh, 70px);
  right: clamp(26px, 3.2vw, 52px);
}
:root[data-theme="dark"] .verification-card { border: 1px solid rgba(199, 151, 67, 0.65); }

.shield { background: #082e67; border-radius: 999px; flex: none; display: grid; place-items: center; width: 56px; height: 56px; }
.shield svg.icon { color: var(--gold-bright); width: 1.7rem; height: 1.7rem; }

.verification-card strong, .verification-card span { display: block; }
.verification-card strong { font-size: 1.03rem; font-weight: 650; line-height: 1.25; }
.verification-card span { color: var(--body); margin-top: 4px; font-size: 0.86rem; opacity: 0.78; }

.theme-toggle {
  z-index: 20;
  background: var(--surface);
  border: 1px solid rgba(199, 151, 67, 0.35);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 13px;
  position: fixed;
  top: 22px;
  right: 22px;
  backdrop-filter: blur(12px);
  color: var(--headline);
  cursor: pointer;
  font: 600 0.82rem Inter, sans-serif;
  transition: background 0.32s, color 0.32s, transform 0.18s;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.09);
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle svg.icon { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { color: var(--gold-bright); display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

@media (max-width: 1080px) {
  .content-shell { padding-top: 90px; padding-bottom: 135px; }
  .main-content { width: min(100%, 730px); }
  .social-rail { background: rgba(255, 252, 247, 0.85); flex-direction: row; position: fixed; top: auto; bottom: 18px; left: 50%; transform: translateX(-50%); backdrop-filter: blur(10px); border-radius: 999px; padding: 8px; }
  :root[data-theme="dark"] .social-rail { background: rgba(14, 18, 25, 0.85); }
  .verification-card { width: max-content; margin: 28px auto 0; position: relative; bottom: auto; right: auto; }
}

@media (max-width: 640px) {
  .theme-toggle { top: 14px; right: 14px; }
  .photo-banner { height: 240px; }
  .photo-banner img { object-position: center center; height: 100%; transform: none; }
  .content-shell { padding: 84px 18px 118px; }
  .logo-wrap { width: 164px; }
  .main-content h1 { font-size: 2.35rem; }
  .tagline { gap: 10px; }
  .tagline p { font-size: 1.23rem; }
  .tagline span { width: 22px; }
  .about-copy { font-size: 0.94rem; line-height: 1.54; }
  .primary-cta { gap: 10px; width: 100%; padding-inline: 14px; }
  .verification-card { width: 100%; min-width: 0; }
}