/* Direction A — Night. The profile cover, extended into the site: near-black, gold, the mark as hero. */
:root {
  --bg: #111214; --bg-alt: #17191c; --surface: #1c1e22; --surface-2: #23262a;
  --fg: #f3f1ec; --fg-2: #b9bec7; --fg-3: #868c96;
  --line: #2b2e33; --line-strong: #f3f1ec;
  --accent: #b8935a; --accent-text: #d4b07a;
  --btn-bg: #b8935a; --btn-fg: #111214; --btn2-fg: #ffffff; --btn2-line: #3a3e44;
  --header-bg: rgba(17,18,20,.84);
  --ok-bg: rgba(46,160,105,.16); --ok-fg: #6fd3a2;
  --soon-bg: rgba(226,132,70,.16); --soon-fg: #f0a877;
  --lens: #b8935a; --gap: #111214;
}
.lockup { color: #fff; }
.btn-primary:hover { opacity: 1; background: var(--gold-2); }

.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 70% at 78% 42%, rgba(184,147,90,.17), transparent 62%); pointer-events: none; }
html[dir="rtl"] .hero::before { background: radial-gradient(55% 70% at 22% 42%, rgba(184,147,90,.17), transparent 62%); }
.hero-grid { min-height: min(80vh, 720px); }
.v-emblem { display: block; width: min(100%, 440px); margin-inline: auto; overflow: visible; }
.v-emblem .ringL, .v-emblem .ringR { fill: none; stroke: #fff; stroke-width: 6; }
.v-emblem .lens { fill: var(--gold); stroke: var(--bg); stroke-width: 3.4; paint-order: stroke; transform-origin: 60px 60px; }
.v-emblem .halo { fill: none; stroke: rgba(184,147,90,.28); stroke-width: .4; stroke-dasharray: 1.5 2.5; transform-origin: 60px 60px; animation: a-spin 70s linear infinite; }
.js .v-emblem .ringL { animation: a-l 1.5s var(--ease) both .15s; }
.js .v-emblem .ringR { animation: a-r 1.5s var(--ease) both .15s; }
.js .v-emblem .lens { animation: a-lens .9s var(--ease) both 1.2s; }
@keyframes a-l { from { transform: translateX(-14px); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes a-r { from { transform: translateX(14px); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes a-lens { from { transform: scale(.25); } to { transform: none; } }
@keyframes a-spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .hero-grid { min-height: 0; } .v-emblem { width: min(70%, 300px); order: -1; } }

.chip { background: transparent; }
.vs .with { background: linear-gradient(160deg, #2a2418, #1c1e22 65%); border: 1px solid rgba(184,147,90,.35); }
.stats { border-radius: 22px; padding: clamp(26px, 3.4vw, 44px); background: radial-gradient(80% 140% at 0% 0%, #2a2418 0%, #17191c 60%); border: 1px solid rgba(184,147,90,.25); }
html[dir="rtl"] .stats { background: radial-gradient(80% 140% at 100% 0%, #2a2418 0%, #17191c 60%); }
.panel .mark, .callout .mark { color: #fff; --gap: var(--surface); }
.cta-band { background: radial-gradient(70% 120% at 100% 0%, rgba(184,147,90,.24), transparent 60%), var(--surface); border: 1px solid var(--line); --gap: var(--surface); }
html[dir="rtl"] .cta-band { background: radial-gradient(70% 120% at 0% 0%, rgba(184,147,90,.24), transparent 60%), var(--surface); }
.ticks li::before { background-color: rgba(184,147,90,.2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23d4b07a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.client .logo { background: #fff; }
.page-hero { background: radial-gradient(60% 120% at 85% 0%, rgba(184,147,90,.14), transparent 60%); }
html[dir="rtl"] .page-hero { background: radial-gradient(60% 120% at 15% 0%, rgba(184,147,90,.14), transparent 60%); }