:root {
  --bg: #0d0d0d;
  --surface: rgba(18, 18, 20, 0.82);
  --surface-strong: #161416;
  --surface-soft: #111113;
  --surface-dark: #070707;
  --paper: #f7f5f7;
  --paper-strong: #ffffff;
  --ink: #151217;
  --ink-soft: #5f5862;
  --ink-line: rgba(21, 18, 23, 0.12);
  --text: #f8f5f8;
  --text-soft: #c8bec8;
  --text-on-dark: #f8f5f8;
  --line: rgba(255, 255, 255, 0.12);
  --line-dark: rgba(255, 255, 255, 0.12);
  --accent: #b99bb1;
  --accent-hover: #d0b9ca;
  --accent-deep: #8f7186;
  --blue: #38d5f4;
  --success: #68e0b4;
  --orange: #b99bb1;
  --brand-rose: #b99bb1;
  --brand-cyan: #38d5f4;
  --brand-plum: #8f7186;
  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow-soft: 0 22px 54px rgba(0, 0, 0, 0.34);
  --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.24);
  --glass-bg: rgba(255, 255, 255, 0.058);
  --glass-bg-strong: rgba(255, 255, 255, 0.09);
  --glass-border: rgba(255, 255, 255, 0.14);
}

body {
  font-family: Satoshi, "General Sans", Inter, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(ellipse 780px 520px at 8% 8%, rgba(185, 155, 177, 0.18), transparent 64%),
    radial-gradient(ellipse 620px 420px at 92% 0%, rgba(56, 213, 244, 0.08), transparent 62%),
    radial-gradient(ellipse 680px 460px at 86% 88%, rgba(143, 113, 134, 0.10), transparent 66%),
    var(--bg);
}

h1,
h2,
h3,
h4,
.button,
.nav-link,
.nav-sublink,
.eyebrow {
  font-family: "Space Grotesk", "General Sans", Satoshi, Inter, "Segoe UI", Arial, sans-serif;
}

.site-header,
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(21, 18, 23, 0.10);
  box-shadow: 0 14px 40px rgba(21, 18, 23, 0.10);
}

.site-header,
.site-header.is-scrolled,
.nav-shell,
.main-nav,
.nav-item-group {
  overflow: visible;
}

.nav-item-group {
  z-index: 60;
}

.nav-dropdown {
  z-index: 80;
  border-color: rgba(21, 18, 23, 0.10);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(21, 18, 23, 0.18);
  color: var(--ink);
}

.nav-dropdown .nav-mega-heading,
.nav-dropdown .nav-mega-heading strong,
.nav-dropdown .nav-category-link,
.nav-dropdown .nav-category-link strong,
.nav-dropdown .nav-capability-card,
.nav-dropdown .nav-capability-card strong,
.nav-dropdown .nav-capability-chip-panel,
.nav-dropdown .nav-capability-chip-panel strong,
.nav-dropdown .nav-capability-chip,
.nav-dropdown .nav-single-page-panel,
.nav-dropdown .nav-single-page-panel strong {
  color: var(--ink) !important;
}

.nav-dropdown .nav-mega-heading span,
.nav-dropdown .nav-category-link span,
.nav-dropdown .nav-category-link small,
.nav-dropdown .nav-capability-card span,
.nav-dropdown .nav-capability-card small,
.nav-dropdown .nav-capability-chip-panel span,
.nav-dropdown .nav-single-page-panel span,
.nav-dropdown .nav-single-page-panel small {
  color: var(--ink-soft) !important;
}

.nav-dropdown .nav-category-link,
.nav-dropdown .nav-capability-card,
.nav-dropdown .nav-capability-chip-panel,
.nav-dropdown .nav-capability-chip,
.nav-dropdown .nav-single-page-panel {
  border-color: rgba(21, 18, 23, 0.12) !important;
  background: rgba(247, 245, 247, 0.92) !important;
  box-shadow: none !important;
}

.nav-dropdown .nav-category-link:hover,
.nav-dropdown .nav-category-link.is-active,
.nav-dropdown .nav-capability-card:hover,
.nav-dropdown .nav-capability-chip:hover {
  border-color: rgba(185, 155, 177, 0.42) !important;
  background: rgba(185, 155, 177, 0.14) !important;
}

.site-header::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(249, 246, 249, 0.88) 48%, rgba(255, 255, 255, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(246, 247, 251, 0.84));
}

.brand-mark img,
.footer-brand img {
  filter: none;
}

.nav-link {
  color: rgba(21, 18, 23, 0.66);
  letter-spacing: 0.04em;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--ink);
}

.button {
  border-radius: 12px;
  letter-spacing: 0.08em;
}

.button-primary {
  border-color: rgba(185, 155, 177, 0.62);
  background: linear-gradient(135deg, #d0b9ca, #b99bb1 54%, #8f7186);
  color: #111113;
  box-shadow: 0 18px 44px rgba(185, 155, 177, 0.28);
}

.button-primary:hover {
  background: linear-gradient(135deg, #ddccd8, #b99bb1 56%, #8f7186);
  box-shadow: 0 22px 54px rgba(185, 155, 177, 0.34);
}

.button-on-dark.button-primary,
.button-primary.button-on-dark {
  color: #111113;
}

.section-soft .button-secondary.button-on-dark,
.home-proof-section .button-secondary.button-on-dark,
.home-dual-section .button-secondary.button-on-dark,
.creative-catalog-section .button-secondary.button-on-dark,
.process-roadmap-section .button-secondary.button-on-dark,
.pricing-menu-section .button-secondary.button-on-dark,
.contact-action-section .button-secondary.button-on-dark,
.service-benefit-section .button-secondary.button-on-dark {
  border-color: rgba(21, 18, 23, 0.18) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: var(--ink) !important;
  box-shadow: 0 14px 32px rgba(21, 18, 23, 0.10) !important;
}

.section-soft .button-secondary.button-on-dark:hover,
.home-proof-section .button-secondary.button-on-dark:hover,
.home-dual-section .button-secondary.button-on-dark:hover,
.creative-catalog-section .button-secondary.button-on-dark:hover,
.process-roadmap-section .button-secondary.button-on-dark:hover,
.pricing-menu-section .button-secondary.button-on-dark:hover,
.contact-action-section .button-secondary.button-on-dark:hover,
.service-benefit-section .button-secondary.button-on-dark:hover {
  border-color: rgba(185, 155, 177, 0.52) !important;
  background: #ffffff !important;
  color: var(--ink) !important;
}

.eyebrow {
  color: var(--accent);
  letter-spacing: 0.12em;
}

.eyebrow::before {
  background: linear-gradient(90deg, var(--accent) 0 8px, rgba(56, 213, 244, 0.24) 8px 100%);
}

.home-hero-copy h1,
.page-hero-copy h1,
.simple-empty h1,
.cta-card h2,
.section-intro h2 {
  letter-spacing: 0;
}

.section-soft,
.section-dark,
.home-dual-section,
.home-proof-section,
.creative-catalog-section,
.software-process-section,
.process-roadmap-section,
.pricing-menu-section,
.contact-action-section,
.service-benefit-section,
.service-stack-section {
  background-blend-mode: normal;
}

.surface-card,
.home-proof-card,
.pricing-card,
.process-card,
.contact-card,
.creative-service-card,
.service-detail-card,
.technical-process-step,
.home-service-track-social {
  border-radius: var(--radius-lg) !important;
}

.capability-tags span,
.platform-strip span,
.technology-pill,
.benefit-list span,
.mini-panel,
.gateway-system-row strong {
  border-radius: var(--radius-md) !important;
}

.service-layout-trading-automation .service-detail-card,
.service-layout-trading-automation .technology-pill,
.service-layout-trading-automation .workflow-step,
.pricing-menu-section .pricing-card:nth-child(2) {
  background:
    linear-gradient(145deg, rgba(185, 155, 177, 0.12), transparent 48%),
    var(--paper-strong);
}

.section-dark .service-layout-trading-automation .service-detail-card,
.section-dark .technology-pill,
.section-dark .workflow-step {
  background:
    linear-gradient(180deg, rgba(185, 155, 177, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(13, 13, 13, 0.86);
}

.home-command-hero .human-hero-card,
.creative-studio-hero .creative-showcase,
.software-lab-hero .architecture-panel,
.page-hero-panel,
.service-detail-visual {
  border-radius: var(--radius-xl);
  border-color: rgba(255, 255, 255, 0.14);
}

@media (max-width: 720px) {
  :root {
    --container: min(100% - 28px, 1180px);
  }

  .button {
    min-height: 46px;
    padding-inline: 18px;
  }
}

/* Keep the desktop header light, with a dark/readable Services dropdown. */
@media (min-width: 901px) {
  .nav-dropdown {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: rgba(10, 10, 12, 0.96) !important;
    color: var(--text) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44) !important;
  }

  .nav-dropdown .nav-mega-heading,
  .nav-dropdown .nav-mega-heading strong,
  .nav-dropdown .nav-category-link,
  .nav-dropdown .nav-category-link strong,
  .nav-dropdown .nav-capability-card,
  .nav-dropdown .nav-capability-card strong,
  .nav-dropdown .nav-capability-chip-panel,
  .nav-dropdown .nav-capability-chip-panel strong,
  .nav-dropdown .nav-capability-chip,
  .nav-dropdown .nav-single-page-panel,
  .nav-dropdown .nav-single-page-panel strong {
    color: var(--text) !important;
  }

  .nav-dropdown .nav-mega-heading span,
  .nav-dropdown .nav-category-link span,
  .nav-dropdown .nav-category-link small,
  .nav-dropdown .nav-capability-card span,
  .nav-dropdown .nav-capability-card small,
  .nav-dropdown .nav-capability-chip-panel span,
  .nav-dropdown .nav-single-page-panel span,
  .nav-dropdown .nav-single-page-panel small {
    color: var(--text-soft) !important;
  }

  .nav-dropdown .nav-category-link,
  .nav-dropdown .nav-capability-card,
  .nav-dropdown .nav-capability-chip-panel,
  .nav-dropdown .nav-capability-chip,
  .nav-dropdown .nav-single-page-panel {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background:
      radial-gradient(circle at 14% 18%, rgba(185, 155, 177, 0.16), transparent 34%),
      rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
  }

  .nav-dropdown .nav-category-link:hover,
  .nav-dropdown .nav-category-link.is-active,
  .nav-dropdown .nav-capability-card:hover,
  .nav-dropdown .nav-capability-chip:hover {
    border-color: rgba(185, 155, 177, 0.32) !important;
    background: rgba(185, 155, 177, 0.11) !important;
  }
}