/* Autodigit brand palette. Shared by all seven pages, including Twin Studio. */
:root {
  --brand-cyan: #00bcd4;
  --brand-blue: #205ec4;
  --brand-violet: #7439cf;
  --brand-magenta: #b02caa;
  --gradient-title: linear-gradient(100deg, #087995 0%, #215ed5 35%, #7134c5 72%, #ac268e 100%);
  --gradient-action: linear-gradient(110deg, #1268cf 0%, #633ad1 65%, #9127b1 100%);
  --gradient-action-hover: linear-gradient(110deg, #1059b1 0%, #512eaf 65%, #772092 100%);
  --gradient-soft: linear-gradient(120deg, #f0faff 0%, #f3f6ff 48%, #f8f1fc 100%);
  --gradient-dark: linear-gradient(120deg, #071a3a 0%, #153774 55%, #512477 100%);
  --gradient-light-title: linear-gradient(100deg, #86e9f4 0%, #b7d9ff 38%, #d4c3ff 72%, #f3baf0 100%);
}

/* Dark stops keep headings legible on the pale brand backgrounds. */
main :is(h1, h2, h3), .hero-content h1 span {
  color: var(--brand);
}
main :is(h1, h2, h3) { width: fit-content; }

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .cta-band h2 { color: #dbeaff; }
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  main :is(h1, h2, h3), .hero-content h1 span {
    background-image: var(--gradient-title);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* The opening headline follows the emphasis used on the hospitality site. */
  .hero-content h1 {
    background: none;
    color: var(--ink);
    -webkit-text-fill-color: currentColor;
  }

  .cta-band h2 {
    background-image: var(--gradient-light-title);
  }
}

.soft, .page-intro, .demo-page {
  background: var(--gradient-soft);
}

.button:not(.button-secondary),
.site-header nav .nav-contact,
.privacy-notice button {
  background: var(--gradient-action);
  border-color: transparent;
  color: #fff;
}

.button:not(.button-secondary):hover,
.site-header nav .nav-contact:hover,
.privacy-notice button:hover {
  background: var(--gradient-action-hover);
  color: #fff;
}

.button-secondary {
  background: #ffffffeb;
  border-color: #b7c8e0;
}

.button-secondary:hover {
  background: var(--gradient-soft);
}

.site-header nav > a:hover,
.site-header nav > a[aria-current]:not(.nav-contact),
.icon-tile,
.feature-card:nth-child(n) .icon-tile,
.agent-symbol,
.status-badge,
.development-note {
  background: var(--gradient-soft);
  color: var(--brand);
}

.cta-band, .site-footer {
  background: var(--gradient-dark);
}

.cta-band .eyebrow { color: #b7d9ff; }
.cta-band p:not(.eyebrow) { color: #d9e5f7; }
.cta-band .button:not(.button-secondary) {
  background: linear-gradient(110deg, #dcf6ff, #e4eaff 50%, #f2dfff);
  color: #153774;
}
.cta-band .button:not(.button-secondary):hover { background: #fff; }

.home-hero::after {
  background: linear-gradient(90deg, #f0fafff5 0%, #f3f6ffe6 32%, #f8f1fc38 69%, transparent 100%);
}

.studio-mark {
  background: var(--gradient-action);
  color: #fff;
}
.studio-tabs button[aria-pressed=true], .asset-strip button[aria-pressed=true] {
  background: var(--gradient-soft);
}

/* Explicit opt-in: green is reserved for sustainability / ESG content. */
.sustainability {
  --brand: #17634e;
  --brand-dark: #123e32;
  --gradient-title: linear-gradient(100deg, #125842 0%, #207840 65%, #367323 100%);
  --gradient-soft: linear-gradient(120deg, #edf8f1 0%, #f1f8e9 100%);
  background: var(--gradient-soft);
  border-color: #c9dfcd;
}
.sustainability:hover { border-color: #8eb79a; }
.sustainability .icon-tile {
  background: linear-gradient(120deg, #d8f0e4, #e4efce);
  color: var(--brand);
}

@media (max-width: 1000px) {
  .home-hero::after {
    background: linear-gradient(90deg, #f0fafff0, #f3f6ffd9 42%, #f8f1fc55);
  }
}
@media (max-width: 700px) {
  .home-hero::after {
    background: linear-gradient(180deg, #f0fafffa 0%, #f3f6fff0 43%, #f8f1fc70 73%, transparent);
  }
}

/* Gradient text remains visible with high-contrast settings or on paper. */
@media (forced-colors: active) {
  main :is(h1, h2, h3), .hero-content h1 span {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .button, .site-header nav .nav-contact, .privacy-notice button {
    border: 1px solid ButtonText;
  }
}
@media print {
  main :is(h1, h2, h3), .hero-content h1 span {
    background: none;
    color: #102544;
    -webkit-text-fill-color: currentColor;
  }
  .cta-band, .site-footer { background: #fff; color: #102544; }
  .cta-band p, .site-footer p, .footer-links > span, .footer-bottom { color: #354760; }
}