/* SOST LABS — home brand accent refinement
   Brand mark color is taken directly from assets/logo-sost-labs.svg (#7582D6). */

body[data-page='home'] {
  --sost-brand: #7582d6;
  --sost-brand-strong: #6573c8;
  --point: var(--sost-brand);
  --point-strong: var(--sost-brand-strong);
}

/* HERO: compact two-column balance ------------------------------------- */
body[data-page='home'] .home-hero {
  padding-top: calc(var(--header-height) + 44px) !important;
  padding-bottom: 44px !important;
}

body[data-page='home'] .home-hero .home-hero-inner {
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(430px, .72fr) !important;
  gap: clamp(42px, 5vw, 78px) !important;
  align-items: center !important;
}

body[data-page='home'] .home-hero .hero-copy {
  max-width: 690px !important;
}

body[data-page='home'] .hero-copy .eyebrow {
  color: color-mix(in srgb, var(--sost-brand) 82%, var(--text-muted)) !important;
}

body[data-page='home'] .hero-copy h1::first-line {
  color: var(--sost-brand);
}

/* CTA: use the SOST brand instead of generic black --------------------- */
body[data-page='home'] .button-row {
  gap: 10px !important;
  margin-top: 26px !important;
}

body[data-page='home'] .button-row .button {
  min-height: 44px !important;
  padding: 0 18px !important;
  font-size: 12px !important;
  font-weight: 640 !important;
  line-height: 1 !important;
}

body[data-page='home'] .button-point {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-color: var(--sost-brand) !important;
  background: var(--sost-brand) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body[data-page='home'] .button-point span {
  margin-left: 0 !important;
  color: #fff !important;
}

body[data-page='home'] .button-point:hover,
body[data-page='home'] .button-point:focus-visible {
  border-color: var(--sost-brand-strong) !important;
  background: var(--sost-brand-strong) !important;
  color: #fff !important;
}

body[data-page='home'] .button-ghost {
  border-color: var(--line-strong) !important;
  background: transparent !important;
  color: var(--text) !important;
}

body[data-page='home'] .button-ghost:hover,
body[data-page='home'] .button-ghost:focus-visible {
  border-color: color-mix(in srgb, var(--sost-brand) 45%, var(--line-strong)) !important;
  background: color-mix(in srgb, var(--sost-brand) 4%, transparent) !important;
  color: var(--sost-brand) !important;
}

/* Use brand only as a restrained navigation cue ------------------------ */
body[data-page='home'] .home-scope-grid span,
body[data-page='home'] .home-selected-actions > p strong,
body[data-page='home'] .home-path-card:first-child footer strong,
body[data-page='home'] .home-pricing-links a span,
body[data-page='home'] .home-contact-inner > a span {
  color: var(--sost-brand) !important;
}

body[data-page='home'] .home-path-card:first-child {
  border-top-color: color-mix(in srgb, var(--sost-brand) 46%, var(--line)) !important;
}

/* HERO UI SCENE: quieter, flatter, brand-led ---------------------------- */
body[data-page='home'] .hero-ui-scene {
  width: min(43vw, 640px) !important;
  height: 430px !important;
  min-height: 0 !important;
  margin-right: 0 !important;
  justify-self: end !important;
}

body[data-page='home'] .hero-ui-browser {
  top: 15% !important;
  left: 9% !important;
  width: 78% !important;
  height: 68% !important;
  border-color: color-mix(in srgb, var(--sost-brand) 23%, var(--line)) !important;
  border-radius: 22px !important;
  box-shadow: 0 28px 64px color-mix(in srgb, var(--sost-brand) 13%, transparent), 0 12px 28px rgba(20,28,65,.07) !important;
  transform: rotateY(-4deg) rotateX(2deg) rotateZ(-.35deg) !important;
  animation: none !important;
}

body[data-page='home'] .hero-ui-float {
  min-width: 98px !important;
  padding: 11px 13px !important;
  border-color: color-mix(in srgb, var(--sost-brand) 19%, var(--line)) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 32px rgba(35,45,95,.08) !important;
  animation: none !important;
}

body[data-page='home'] .hero-ui-float b {
  font-size: 9px !important;
  letter-spacing: .08em !important;
}

body[data-page='home'] .hero-ui-block {
  background: linear-gradient(145deg, var(--sost-brand), var(--sost-brand-strong)) !important;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--sost-brand) 18%, transparent) !important;
}

body[data-page='home'] .hero-ui-block.block-a {
  width: 58px !important;
  height: 104px !important;
  opacity: .72 !important;
}

body[data-page='home'] .hero-ui-block.block-b {
  width: 70px !important;
  height: 70px !important;
  opacity: .66 !important;
}

body[data-page='home'] .hero-ui-block.block-c {
  width: 42px !important;
  height: 42px !important;
  opacity: .56 !important;
}

body[data-page='home'] .hero-ui-sidebar .side-logo,
body[data-page='home'] .hero-ui-action {
  background: linear-gradient(145deg, var(--sost-brand), var(--sost-brand-strong)) !important;
}

body[data-page='home'] .hero-ui-sidebar span.is-active,
body[data-page='home'] .ui-card-kicker {
  background: color-mix(in srgb, var(--sost-brand) 56%, transparent) !important;
}

body[data-page='home'] .hero-ui-chart::before {
  border-bottom-color: var(--sost-brand) !important;
}

body[data-page='home'] .hero-ui-metric {
  background: conic-gradient(var(--sost-brand) 0 68%, color-mix(in srgb, var(--sost-brand) 10%, transparent) 68% 100%) !important;
}

@media (max-width: 980px) {
  body[data-page='home'] .home-hero .home-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(350px, .72fr) !important;
    gap: 30px !important;
  }

  body[data-page='home'] .hero-ui-scene {
    width: 390px !important;
    height: 360px !important;
  }
}

@media (max-width: 820px) {
  body[data-page='home'] .home-hero .home-hero-inner {
    grid-template-columns: 1fr !important;
  }

  body[data-page='home'] .hero-ui-scene {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: min(100%, 520px) !important;
    height: 350px !important;
    margin-top: 26px !important;
    opacity: .82 !important;
    transform: none !important;
    justify-self: start !important;
  }
}

@media (max-width: 560px) {
  body[data-page='home'] .button-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body[data-page='home'] .button-row .button {
    width: 100% !important;
  }

  body[data-page='home'] .hero-ui-scene {
    width: 430px !important;
    height: 300px !important;
    margin-right: -120px !important;
    opacity: .58 !important;
  }
}