/* Immersive hero journey: the brain is a viewport background, not a card. */
.site-header {
  color: #edf5f5;
  border-bottom-color: rgba(155, 204, 212, .08);
  background: #051825;
  backdrop-filter: none;
}
.site-header.is-scrolled {
  border-bottom-color: rgba(155, 204, 212, .17);
  background: #051825;
  backdrop-filter: none;
  box-shadow: 0 8px 28px rgba(2, 14, 23, .12);
}
.site-header .brand-name { color: #eff8f7; }
.site-header .brand-mark { color: #326a67; }
.site-header .brand-tagline { color: #a1bdc2; }
.site-header .main-nav a { color: #bed0d7; }
.site-header .main-nav a:hover { color: #e4fff5; }
.site-header .main-nav a::after { background: #9bdacc; }
.site-header .nav-login { color: #d8ebed; font-size: 13px; font-weight: 500; }
.site-header .nav-login:hover { color: #b6f3df; }
.site-header .menu-toggle { color: #d2edef; border-color: #34545e; background: rgba(31, 67, 78, .35); }
.site-header .button-primary,
.hero .button-primary { color: #082e31 !important; border-color: #b2e9d8; background: #b2e9d8; box-shadow: 0 4px 24px rgba(143, 230, 209, .08); }
.site-header .button-primary:hover,
.hero .button-primary:hover { border-color: #d0f7e9; background: #d0f7e9; box-shadow: 0 6px 25px rgba(143, 230, 209, .14); }
.hero .button-secondary { color: #d7edf0; border-color: #4c7380; background: rgba(16, 53, 67, .35); }
.hero .button-secondary:hover { color: #efffff; border-color: #88bfc3; background: rgba(40, 89, 104, .48); }

.hero.hero-journey {
  --hero-header-height: 94px;
  --hero-progress: 0;
  --hero-exit: 0;
  position: relative;
  display: block;
  isolation: isolate;
  height: 220svh;
  min-height: 0;
  padding: 0;
  color: #edf7f7;
  background: #061b2a;
}
.hero-journey::before { display: none; }
.hero-journey::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 58px;
  background: linear-gradient(to bottom, rgba(247, 248, 243, 0), #f7f8f3);
  pointer-events: none;
}
.hero-sticky {
  position: sticky;
  top: var(--hero-header-height);
  height: calc(100svh - var(--hero-header-height));
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 67% 42%, rgba(27, 87, 112, .46), transparent 53%),
    radial-gradient(ellipse at 15% 84%, rgba(21, 77, 75, .18), transparent 50%),
    linear-gradient(120deg, #061b2a, #092b40 66%, #061b2a);
}
.hero-background,
.hero .hero-background .brain-stage {
  position: absolute;
  z-index: auto;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0;
}
.hero .hero-background .brain-stage { isolation: auto; }
.hero .brain-stage::before,
.hero .brain-stage::after { display: none; }
.hero .brain-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  contain: paint;
}
.hero .brain-scene::before,
.hero .brain-scene::after { display: none; }
.hero .brain-canvas { opacity: calc(1 - var(--hero-exit) * .8); }
.hero .brain-scene .brain-label-bg { fill: #0a2a3b; fill-opacity: .86; stroke: #416774; stroke-opacity: .7; filter: none; }
.hero .brain-scene .brain-label { fill: #d8eaf0; }
.hero .brain-scene .brain-region.is-active .brain-label-bg { fill: #184654; stroke: #78b8bc; }
.hero .brain-scene .brain-region.is-active .brain-label { fill: #edfff8; }
.hero .brain-scene .brain-connection { stroke: #79acbe; filter: none; }
.hero .brain-scene .brain-region.is-active .brain-connection { stroke: #9fdfdf; filter: drop-shadow(0 0 3px rgba(137, 235, 229, .32)); }
.hero .brain-overlay .brain-region { opacity: 0; transition: opacity .45s ease; }
.hero .brain-overlay .brain-region.is-active { opacity: 1; }
.hero .brain-orbits { display: none; }
.hero-shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 21, 34, .89), rgba(4, 21, 34, .62) 28%, rgba(4, 21, 34, .1) 53%, transparent 72%),
    linear-gradient(0deg, rgba(4, 21, 34, .94), rgba(4, 21, 34, .15) 28%, transparent 45%);
}

.hero-content { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; pointer-events: none; }
.hero .hero-copy {
  width: min(460px, 43%);
  max-width: 460px;
  padding: 0 0 90px;
  opacity: clamp(0, calc(1 - var(--hero-progress) * 3.8), 1);
  transform: translateY(calc(var(--hero-progress) * -70px));
  pointer-events: auto;
  will-change: opacity, transform;
}
.hero-story-active .hero-copy { pointer-events: none; }
.hero .eyebrow { color: #abd3cf; border-color: rgba(142, 197, 199, .26); background: rgba(35, 83, 93, .26); font-size: 10px; letter-spacing: 1.1px; }
.hero .status-dot { background: #a7e3ce; box-shadow: 0 0 0 3px rgba(155, 226, 199, .1); }
.hero h1 { max-width: 470px; margin-top: 25px; color: #edf7f7; font-size: clamp(2.6rem, 4.6vw, 4.1rem); font-weight: 400; letter-spacing: -2.2px; line-height: 1.12; }
.hero h1 em { color: #a7decc; }
.hero .hero-description { max-width: 435px; margin-top: 24px !important; color: #b2c7d0; font-size: 15px; line-height: 1.9; }
.hero .hero-actions { gap: 12px; margin-top: 29px; }
.hero .hero-note { color: #9ab6c1; font-size: 11px; }
.hero .hero-note svg { color: #9fd1c4; }
.hero-story {
  position: absolute;
  top: 50%;
  left: 0;
  width: min(460px, 43%);
  padding-bottom: 90px;
  opacity: clamp(0, calc((var(--hero-progress) - .28) * 6), 1);
  transform: translateY(-50%) translateY(clamp(0px, calc((.46 - var(--hero-progress)) * 90px), 24px));
  pointer-events: none;
  will-change: opacity, transform;
}
.hero-story .section-kicker { color: #a5d8d1; font-size: 11px; letter-spacing: 1.7px; }
.hero-story h2 { max-width: 450px; margin-top: 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.4rem, 4.2vw, 3.5rem); font-weight: 400; line-height: 1.16; letter-spacing: -1.9px; text-wrap: balance; }
.hero-story p:not(.section-kicker) { max-width: 400px; margin-top: 23px; color: #b7cdd5; font-size: 15px; line-height: 1.9; }

.hero-bottom { position: absolute; z-index: 3; left: 50%; bottom: 73px; transform: translateX(-50%); pointer-events: none; }
.hero .brain-controls { width: min(850px, calc(100% - 285px)); max-width: 850px; justify-content: flex-start; gap: 6px; margin: 0; pointer-events: auto; }
.hero .brain-control { padding: 6px 10px; min-height: 33px; color: #aec8d2; border-color: #315361; background: rgba(10, 37, 52, .8); font-size: 11px; }
.hero .brain-control:hover { color: #e6fff5; border-color: #75aaa7; background: #20474f; }
.hero .brain-control[aria-pressed="true"] { color: #e3fff3; border-color: #72a49e; background: #214f54; }
.hero .brain-description { max-width: 520px; min-height: 37px; margin: 11px 0 0 !important; color: #acc4ce; font-size: 11px; text-align: left; }
.hero-scroll-hint { display: block; margin-top: 13px; color: #9db8c6; font-size: 11px; line-height: 1.6; letter-spacing: .4px; }
.hero .brain-toolbar {
  position: absolute;
  z-index: 3;
  right: max(40px, calc((100% - 1240px) / 2));
  bottom: 133px;
  width: 265px;
  justify-content: flex-end;
  gap: 7px;
  margin: 0;
}
.hero .brain-rotation-toggle,
.hero .brain-reset { min-height: 32px; padding: 6px 11px; color: #bad3da; border-color: #355663; background: rgba(9, 35, 50, .85); font-size: 11px; }
.hero .brain-rotation-toggle:hover,
.hero .brain-reset:hover { color: #e6fff5; border-color: #76a79f; background: #245056; }
.hero .brain-rotation-toggle[aria-pressed="true"] { color: #c5eadc; border-color: #4d817d; background: #1c494c; }
.hero .brain-stage .brain-help,
.hero .brain-stage .brain-caption { position: absolute; z-index: 3; right: max(40px, calc((100% - 1240px) / 2)); width: 270px; margin: 0 !important; color: #a7c1cd; font-size: 10px; line-height: 1.75; text-align: right; }
.hero .brain-stage .brain-help { bottom: 106px; }
.hero .brain-stage .brain-caption { display: block; bottom: 65px; }
.hero :focus-visible,
.site-header :focus-visible { outline-color: #c3efe1; }
.hero .brain-canvas:focus-visible { outline-color: #c3efe1; }
.product-strip { border-top: 0; }

@media (max-width: 1120px) {
  .hero h1 { font-size: clamp(2.6rem, 4.7vw, 3.5rem); letter-spacing: -1.9px; }
  .hero .hero-description { font-size: 14px; }
  .hero .hero-actions .button { padding-inline: 17px; font-size: 12px; }
  .hero .brain-toolbar,
  .hero .brain-stage .brain-help,
  .hero .brain-stage .brain-caption { right: 28px; }
}

@media (max-width: 900px) {
  .hero.hero-journey { --hero-header-height: 78px; height: 240svh; }
  .site-header .site-menu { color: #e2f1f3; border-color: #355361; background: #0b2839; box-shadow: 0 18px 40px rgba(2, 15, 24, .3); }
  .site-header .nav-actions { border-top-color: #355361; }
  .hero .hero-copy,
  .hero .hero-story { width: min(415px, 50%); }
  .hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.1rem); letter-spacing: -1.8px; }
  .hero-story h2 { font-size: clamp(2.2rem, 4.7vw, 2.8rem); }
  .hero-story p:not(.section-kicker) { font-size: 13px; }
  .hero .brain-controls { width: calc(100% - 255px); }
  .hero .brain-toolbar,
  .hero .brain-stage .brain-help,
  .hero .brain-stage .brain-caption { width: 235px; }
}

@media (min-width: 641px) and (max-width: 900px) and (max-height: 860px) {
  /* Keep the CTA position; omit the supplementary note above the control dock. */
  .hero .hero-note { visibility: hidden; }
}

@media (max-width: 640px) {
  .hero.hero-journey { --hero-header-height: 74px; }
  .hero-shade { background: linear-gradient(180deg, rgba(4, 21, 34, .88), rgba(4, 21, 34, .68) 27%, rgba(4, 21, 34, .08) 55%, rgba(4, 21, 34, .62) 75%, #061b2a 94%); }
  .hero-content { display: block; }
  .hero .hero-copy,
  .hero .hero-story { position: absolute; top: 11%; left: 0; width: min(320px, 100%); max-width: 320px; padding: 0; }
  .hero .hero-copy { transform: translateY(calc(var(--hero-progress) * -50px)); }
  .hero .hero-story { transform: translateY(clamp(0px, calc((.46 - var(--hero-progress)) * 90px), 24px)); }
  .hero .eyebrow { padding: 6px 9px; font-size: 8px; letter-spacing: .75px; }
  .hero h1 { margin-top: 17px; font-size: 36px; line-height: 1.13; letter-spacing: -1.2px; }
  .hero .hero-description { margin-top: 16px !important; font-size: 12px; line-height: 1.85; }
  .hero .hero-actions { gap: 8px; margin-top: 18px; }
  .hero .hero-actions .button { min-height: 43px; padding: 10px 14px; font-size: 11px; }
  .hero .hero-note { max-width: 300px; margin-top: 13px !important; font-size: 10px; line-height: 1.7; }
  .hero-story h2 { margin-top: 14px; font-size: 34px; letter-spacing: -1.2px; }
  .hero-story p:not(.section-kicker) { margin-top: 16px; font-size: 12px; line-height: 1.85; }
  .hero .brain-overlay .brain-region { display: none; }
  .hero-bottom { bottom: 69px; }
  .hero .brain-controls { width: 100%; max-width: 390px; gap: 5px; }
  .hero .brain-control { min-height: 31px; padding: 6px 8px; font-size: 10px; }
  .hero .brain-description { min-height: 33px; margin-top: 9px !important; padding: 0; font-size: 10px; line-height: 1.75; }
  .hero .brain-toolbar { right: 20px; bottom: 284px; width: auto; max-width: calc(100% - 40px); justify-content: flex-end; padding: 0; }
  .hero .brain-rotation-toggle,
  .hero .brain-reset { min-height: 30px; padding: 6px 9px; font-size: 10px; }
  .hero .brain-stage .brain-help { right: 20px; bottom: 262px; width: calc(100% - 40px); font-size: 10px; }
  .hero .brain-stage .brain-caption { right: 20px; bottom: 42px; width: calc(100% - 40px); text-align: left; font-size: 9px; }
  .hero-scroll-hint { margin-top: 11px; font-size: 10px; }
}

@media (max-width: 360px) {
  .hero .hero-copy,
  .hero .hero-story { top: 8%; }
  .hero h1 { font-size: 32px; }
  .hero .hero-actions { flex-direction: row; }
  .hero .hero-note { font-size: 9px; }
  .hero .brain-toolbar { right: 16px; }
  .hero .brain-stage .brain-help,
  .hero .brain-stage .brain-caption { right: 16px; width: calc(100% - 32px); }
}

.landing-page:not(.has-js) .hero-journey { height: auto; min-height: calc(100svh - var(--hero-header-height)); }
.landing-page:not(.has-js) .hero-sticky { position: relative; top: 0; }
.landing-page:not(.has-js) .hero-copy { opacity: 1; transform: none; }
.landing-page:not(.has-js) .hero-story,
.landing-page:not(.has-js) .hero-scroll-hint { display: none; }

/* Short phones need document space rather than a compressed pinned scene. */
@media (max-width: 640px) and (max-height: 720px) {
  .hero.hero-journey { height: auto; min-height: 820px; }
  .hero-sticky { position: relative; top: 0; height: 820px; min-height: 820px; max-width: 100%; }
  .hero .hero-content { min-width: 0; }
  .hero .hero-copy {
    top: 42px;
    width: 100%;
    max-width: 320px;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    will-change: auto;
  }
  .hero .hero-story { display: none; }
  .hero .hero-description { max-width: 100%; overflow-wrap: break-word; }
  .hero .hero-actions { flex-wrap: wrap; }
  .hero .brain-canvas { opacity: 1; }
  .hero-bottom { bottom: 92px; min-width: 0; }
  .hero .brain-controls { max-width: 100%; }
  .hero .brain-control { max-width: 100%; overflow-wrap: break-word; }
  .hero .brain-description { max-width: 100%; overflow-wrap: break-word; }
  .hero .brain-toolbar { bottom: 318px; }
  .hero .brain-stage .brain-help { bottom: 290px; }
  .hero .brain-stage .brain-caption { bottom: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-journey { height: auto; min-height: calc(100svh - var(--hero-header-height)); }
  .hero-sticky { position: relative; top: 0; }
  .hero .hero-copy { opacity: 1 !important; transform: none !important; pointer-events: auto !important; will-change: auto; }
  .hero .hero-story { display: none; }
  .hero .brain-canvas { opacity: 1; }
  .hero .brain-overlay .brain-region { transition: none; }
  .hero-scroll-hint { display: none; }
}