@charset "utf-8";
/* Domain Genesis - Unified Theme
   Visual treatment only.
   Supports either body.theme-light / body.theme-dark
   or [data-theme="light"] / [data-theme="dark"].
*/

:root,
body.theme-light,
body[data-theme="light"] {
  --bg: #f7f3ec;
  --bg-soft: #fcfaf7;
  --text: #1f1c18;
  --text-mid: #332d27;
  --text-soft: #564e45;
  --text-muted: #6f665c;
  --text-quiet: #8a7f72;
  --footer-muted: #7d7368;

  --line: #ddd3c6;
  --line-soft: #d7cbbc;
  --panel-border: #d7cbbc;
  --button-border: #bcae9b;
  --button-border-hover: #9f937f;

  --gold: #c6a85a;
  --gold-hover: #c5a354;
  --gold-deep: #9b7d38;
  --gold-text: #171512;

  --body-radial: rgba(184, 145, 63, 0.07);
  --body-gradient-end: var(--bg);

  --brand-color: var(--text-muted);
  --brand-mark-border: rgba(184, 145, 63, 0.42);
  --brand-mark-bg: rgba(255, 255, 255, 0.72);

  --hero-gold-start: #d8bc6a;
  --hero-gold-mid: #ba9846;
  --hero-gold-end: #7a5a22;
  --hero-text-shadow: 0 1px 0 rgba(40, 28, 10, 0.10);
  --tagline-color: var(--text-soft);
  --price-color: var(--text-muted);

  --primary-border: #b08d3c;
  --primary-shadow: 0 6px 18px rgba(40, 28, 10, 0.08);
  --primary-grid-line: rgba(0, 0, 0, 0.018);
  --primary-grid-opacity: 0.28;
  --primary-grid-opacity-hover: 0.38;
  --primary-hover-filter: brightness(1.02);
  --primary-hover-start: #d7ba68;
  --primary-hover-mid: var(--gold);
  --primary-hover-end: var(--gold-deep);

  --secondary-bg-start: rgba(255, 255, 255, 0.94);
  --secondary-bg-end: rgba(255, 255, 255, 0.94);
  --secondary-text: var(--text-mid);
  --secondary-hover-text: var(--text);
  --secondary-shadow: none;
  --secondary-grid-line: rgba(0, 0, 0, 0.012);
  --secondary-grid-opacity: 0.32;
  --secondary-grid-opacity-hover: 0.4;
  --secondary-hover-bg-start: #f7f1e7;
  --secondary-hover-bg-end: #f7f1e7;

  --panel-bg-start: rgba(255, 255, 255, 0.96);
  --panel-bg-end: rgba(248, 244, 237, 0.96);
  --panel-shadow: 0 10px 30px rgba(31, 28, 24, 0.05);
  --panel-grid-line: rgba(0, 0, 0, 0.012);
  --panel-grid-opacity: 0.35;
  --panel-grid-opacity-hover: 0.35;

  --heading-accent: var(--gold);
  --feature-color: var(--text-soft);
  --feature-marker: var(--gold);
  --mid-note-color: var(--text-muted);

  --faq-title-color: var(--text);
  --faq-question-color: var(--text-mid);
  --faq-question-hover: var(--text);
  --faq-chevron-color: var(--text-quiet);
  --faq-answer-color: var(--text-muted);
  --faq-link-color: var(--gold);

  --footer-brand-color: var(--gold);
  --footer-bullet-color: var(--gold);
  --footer-line-color: var(--footer-muted);
}

body.theme-dark,
body[data-theme="dark"] {
  --bg: #121214;
  --bg-soft: #17171a;
  --text: #f5f5f3;
  --text-mid: #ddddda;
  --text-soft: #a9a9a4;
  --text-muted: #989894;
  --text-quiet: #85857f;
  --footer-muted: #767670;

  --line: #4E4E56;
  --line-soft: #3a3a40;
  --panel-border: #5c5c5f;
  --button-border: #666666;
  --button-border-hover: #858585;

  --gold: #c6a85a;
  --gold-hover: #ceb268;
  --gold-deep: #9b7d38;
  --gold-text: #121214;

  --body-radial: rgba(255, 255, 255, 0.022);
  --body-gradient-end: #101012;

  --brand-color: #b8b8b8;
  --brand-mark-border: rgba(198, 168, 90, 0.35);
  --brand-mark-bg: transparent;

  --hero-gold-start: #d8b862;
  --hero-gold-mid: #b8913f;
  --hero-gold-end: #d4af37;
  --hero-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  --tagline-color: #a1a1a1;
  --price-color: var(--text-quiet);

  --primary-border: #b59645;
  --primary-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  --primary-grid-line: rgba(0, 0, 0, 0.02);
  --primary-grid-opacity: 0.24;
  --primary-grid-opacity-hover: 0.34;
  --primary-hover-filter: brightness(1.02);
  --primary-hover-start: #dec474;
  --primary-hover-mid: var(--gold-hover);
  --primary-hover-end: #a88a41;

  --secondary-bg-start: rgba(255, 255, 255, 0.045);
  --secondary-bg-end: rgba(255, 255, 255, 0.02);
  --secondary-text: #e5e5e5;
  --secondary-hover-text: #f0f0f0;
  --secondary-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  --secondary-grid-line: rgba(255, 255, 255, 0.015);
  --secondary-grid-opacity: 0.24;
  --secondary-grid-opacity-hover: 0.34;
  --secondary-hover-bg-start: rgba(255, 255, 255, 0.06);
  --secondary-hover-bg-end: rgba(255, 255, 255, 0.03);

  --panel-bg-start: rgba(255, 255, 255, 0.028);
  --panel-bg-end: rgba(255, 255, 255, 0.016);
  --panel-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  --panel-grid-line: rgba(255, 255, 255, 0.012);
  --panel-grid-opacity: 0.22;
  --panel-grid-opacity-hover: 0.3;

  --heading-accent: var(--gold);
  --feature-color: var(--text-soft);
  --feature-marker: var(--gold);
  --mid-note-color: var(--text-muted);

  --faq-title-color: var(--text-mid);
  --faq-question-color: var(--text-mid);
  --faq-question-hover: #ededed;
  --faq-chevron-color: #7f7f7f;
  --faq-answer-color: var(--text-muted);
  --faq-link-color: var(--gold);

  --footer-brand-color: var(--gold);
  --footer-bullet-color: var(--gold);
  --footer-line-color: var(--footer-muted);
}

body {
  background:
    radial-gradient(circle at top, var(--body-radial), transparent 36%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--body-gradient-end) 100%);
  color: var(--text);
}

a {
  color: inherit;
}

.section-rule,
.price-line,
.faq-list,
.faq-item {
  border-color: var(--line);
}

/* Top brand */

.brand {
  color: var(--brand-color);
}

.brand-mark {
  border-color: var(--brand-mark-border);
  background: var(--brand-mark-bg);
}

.brand-mark::before {
  color: var(--gold);
}

/* Hero */

.hero h1 {
  background: linear-gradient(
    180deg,
    var(--hero-gold-start) 0%,
    var(--hero-gold-mid) 48%,
    var(--hero-gold-end) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
  text-shadow: var(--hero-text-shadow);
}

.tagline {
  color: var(--tagline-color);
}

.price-line {
  color: var(--price-color);
}

/* Buttons */

.btn-primary,
.btn-secondary,
.editorial-block {
  position: relative;
  overflow: hidden;
}

.btn-primary::before,
.btn-secondary::before,
.editorial-block::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(
    180deg,
    #d7ba68 0%,
    var(--gold) 52%,
    var(--gold-deep) 100%
  );
  color: var(--gold-text);
  border-color: var(--primary-border);
  box-shadow: var(--primary-shadow);
}

.btn-primary::before {
  background-image:
    linear-gradient(0deg, var(--primary-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--primary-grid-line) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: var(--primary-grid-opacity);
}

.btn-primary:hover {
  background: linear-gradient(
    180deg,
    var(--primary-hover-start) 0%,
    var(--primary-hover-mid) 52%,
    var(--primary-hover-end) 100%
  );
  border-color: var(--gold-hover);
  filter: var(--primary-hover-filter);
}

.btn-primary:hover::before {
  opacity: var(--primary-grid-opacity-hover);
}

.btn-secondary {
  background: linear-gradient(
    180deg,
    var(--secondary-bg-start) 0%,
    var(--secondary-bg-end) 100%
  );
  color: var(--secondary-text);
  border-color: var(--button-border);
  box-shadow: var(--secondary-shadow);
}

.btn-secondary::before {
  background-image:
    linear-gradient(0deg, var(--secondary-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--secondary-grid-line) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: var(--secondary-grid-opacity);
}

.btn-secondary:hover {
  background: linear-gradient(
    180deg,
    var(--secondary-hover-bg-start) 0%,
    var(--secondary-hover-bg-end) 100%
  );
  color: var(--secondary-hover-text);
  border-color: var(--button-border-hover);
}

.btn-secondary:hover::before {
  opacity: var(--secondary-grid-opacity-hover);
}

/* Narrative */

.narrative-text {
  color: var(--text-soft);
}

/* Mid section */

.editorial-block {
  background: linear-gradient(
    180deg,
    var(--panel-bg-start) 0%,
    var(--panel-bg-end) 100%
  );
  border-color: var(--panel-border);
  box-shadow: var(--panel-shadow);
}

.editorial-block::before {
  background-image:
    linear-gradient(0deg, var(--panel-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--panel-grid-line) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: var(--panel-grid-opacity);
}

.editorial-block:hover::before {
  opacity: var(--panel-grid-opacity-hover);
}

.col-title {
  color: var(--heading-accent);
}

.feature-list {
  color: var(--feature-color);
}

.feature-list li::marker {
  color: var(--feature-marker);
}

.mid-note {
  color: var(--mid-note-color);
}

/* FAQ */

.faq-title {
  color: var(--faq-title-color);
}

.faq-question {
  color: var(--faq-question-color);
}

.faq-question:hover {
  color: var(--faq-question-hover);
}

.faq-chevron {
  border-right-color: var(--faq-chevron-color);
  border-bottom-color: var(--faq-chevron-color);
}

.faq-answer p {
  color: var(--faq-answer-color);
}

.faq-answer a {
  color: var(--faq-link-color);
  text-decoration: none;
}

.faq-answer a:hover {
  text-decoration: underline;
}

/* Footer */

.footer-brand-text {
  color: var(--footer-brand-color);
}

.footer-bullet {
  background-color: var(--footer-bullet-color);
}

.footer-line {
  color: var(--footer-line-color);
}