/*
 * SPHAERA TECHNOLOGIES | WEBSITE STYLES
 *
 * Editing guide
 * 01-08  Foundations, navigation, layouts and corporate styling
 * 09     Founder photograph, testimonials and intelligence graphic
 * 10-11  Product cards and animated module introductions
 * 12-17  Branding, application CTA and approved #FEF991 hover states
 * 18     White pulsing core and yellow outbound data packets
 * 19     Independent square login button and Janus frame containment
 * 20     Responsive refinements and colour founder photograph
 *
 * All sections retain their existing source order to preserve the CSS cascade.
 * CSS properties use standard names and 2-space indentation.
 */

/*
 * SPHAERA WEBSITE STYLES
 * Brand: #0B0B0B, #2A2A2A, #B1B1B1, #F0EFEA, #FFFFFF
 * Interactive hover/focus: #FEF991
 *
 * IMPORTANT: The cascade is intentionally preserved in its original order.
 * Newer component refinements and hover styles override older base styles.
 * Search for the numbered section comments to locate a component.
 */

/* ========== 01 / Base, typography, navigation and homepage ========== */

:root {
  --bg: #0B0B0B;
  --bg2: #141414;
  --panel: #222222;
  --line: rgba(177,177,177,.23);
  --white: #FFFFFF;
  --muted: #B1B1B1;
  --primary: #F0EFEA;
  --accent: #D8D8D8;
  --font: 'Monda',Arial,sans-serif;
  --sans: 'Monda', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --gutter: clamp(24px,6.5vw,116px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

::selection {
  background: #777777;
  color: #FFFFFF;
}

.wrap {
  width: min(100%,1680px);
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.page-progress {
  position: fixed;
  height: 2px;
  top: 0;
  left: 0;
  background: linear-gradient(90deg,#D0D0D0,#B1B1B1,#F0EFEA);
  z-index: 200;
  width: 0;
  box-shadow: 0 0 16px #B1B1B1;
}

.cursor-aura {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(131,131,131,.095),transparent 67%);
  pointer-events: none;
  transform: translate(-50%,-50%);
  z-index: 10;
  opacity: 0;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--gutter);
  transition: .35s;
  background: linear-gradient(180deg,rgba(9,9,9,.82),transparent);
}

.site-header.scrolled {
  padding-block: 15px;
  background: rgba(9,9,9,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(22px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.brand-word {
  font: 600 27px/1 var(--font);
  letter-spacing: -.065em;
}

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

.brand-symbol {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
  border: 1px solid rgba(189,189,189,.5);
  border-radius: 50%;
  transform: rotate(-26deg);
}

.brand-symbol i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #D0D0D0;
  box-shadow: 0 0 10px #AAAAAA;
}

.brand-symbol i:nth-child(1) {
  left: 3px;
  top: 14px;
}

.brand-symbol i:nth-child(2) {
  left: 11px;
  top: 3px;
}

.brand-symbol i:nth-child(3) {
  right: 2px;
  top: 13px;
  background: #D0D0D0;
}

.brand-symbol i:nth-child(4) {
  left: 14px;
  bottom: 2px;
}

.brand-symbol b {
  position: absolute;
  width: 20px;
  height: 1px;
  background: #F0EFEA;
  top: 17px;
  left: 7px;
  transform: rotate(30deg);
  opacity: .75;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(15px,2.1vw,36px);
}

.nav>a {
  font: 500 11px var(--mono);
  color: #CCCCCC;
  transition: .25s;
}

.nav>a:hover {
  color: #FFFFFF;
}

.nav .nav-cta {
  padding: 14px 18px;
  border: 1px solid rgba(179,179,179,.5);
  font-size: 10px;
}

.nav-cta span {
  margin-left: 17px;
  color: var(--accent);
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse at 67% 44%,#1C1C1C 0,#121212 40%,#121212 79%);
  display: flex;
  align-items: center;
  isolation: isolate;
}

#networkCanvas,
.hero-grid,
.hero-scan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-grid {
  background-image: linear-gradient(rgba(150,150,150,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(150,150,150,.06) 1px,transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(90deg,transparent,#000000 43%,#000000 95%);
  z-index: -1;
}

.hero-scan {
  height: 1px;
  top: 0;
  background: linear-gradient(90deg,transparent,#A0A0A0,transparent);
  opacity: .27;
  box-shadow: 0 0 80px 3px #828282;
  animation: scan 15s linear infinite;
  z-index: -1;
}

@keyframes scan {
  to {
    top: 100%;
  }

}

#networkCanvas {
  z-index: -1;
  opacity: .9;
}

.hero-content {
  padding-top: 142px;
  padding-bottom: 90px;
  position: relative;
  z-index: 1;
}

.eyebrow,
.section-kicker {
  font: 500 10px var(--mono);
  letter-spacing: .18em;
  color: #B6B6B6;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow-index {
  color: #767676;
  margin-left: 12px;
}

.status-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(202,202,202,.10),0 0 20px rgba(202,202,202,.5);
  animation: statusPulse 3s ease-in-out infinite;
}

@keyframes statusPulse {
  50% {
    box-shadow: 0 0 0 10px rgba(202,202,202,0),0 0 20px rgba(202,202,202,.5);
  }

}

.hero-heading {
  font: 500 clamp(74px,10.1vw,180px)/.95 var(--font);
  letter-spacing: -.09em;
  margin: 44px 0 35px;
  max-width: 1300px;
}

.hero-heading .outline-word {
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(204,204,204,.7);
}

.line-dot {
  color: #9F9F9F;
}

.hero-sub {
  font: 300 clamp(16px,1.42vw,21px)/1.72 var(--sans);
  color: #B5B5B5;
  max-width: 640px;
  margin-bottom: 37px;
}

.hero-sub strong {
  color: #F6F6F6;
  font-weight: 500;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 30px;
}

.button-primary {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
  padding: 19px 25px;
  background: #CFCFCF;
  color: #121212;
  font: 600 11px var(--mono);
  letter-spacing: .025em;
  transition: transform .3s,background .3s;
  min-width: 258px;
}

.button-primary:hover {
  background: #EBEBEB;
  transform: translateY(-3px);
}

.button-primary span {
  font-size: 19px;
  font-weight: 400;
}

.button-text {
  font: 500 11px var(--mono);
  color: #E4E4E4;
  display: inline-flex;
  gap: 19px;
  align-items: center;
}

.button-text span {
  color: var(--accent);
}

.hero-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: clamp(70px,10vh,130px);
  font: 500 9px var(--mono);
  letter-spacing: .13em;
  color: #848484;
}

.hero-bottom i {
  font-style: normal;
  color: #E4E4E4;
  margin-left: 14px;
}

.hero-side {
  position: absolute;
  right: 30px;
  top: 48%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  font: 500 9px var(--mono);
  letter-spacing: .09em;
  color: #939393;
}

.hero-side b {
  color: #DEDEDE;
  font-size: 9px;
}

.hero-side i {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 7px;
}

.ticker {
  overflow: hidden;
  background: #171717;
  border-block: 1px solid var(--line);
  padding: 17px 0;
}

.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0;
  animation: ticker 78s linear infinite;
  will-change: transform;
}

/* Each identical group takes exactly half the track width. */
.ticker-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  white-space: nowrap;
}

.ticker-track span {
  font: 500 10px var(--mono);
  color: #BBBBBB;
  letter-spacing: .14em;
}

.ticker-track i {
  font-style: normal;
  color: var(--accent);
}

@keyframes ticker {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.section {
  padding: clamp(95px,11vw,180px) 0;
  position: relative;
}

.dark-section {
  background: #121212;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 8vw;
  align-items: end;
}

.section-kicker {
  margin: 0 0 38px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #949494;
}

.section-kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--accent);
}

.display-title {
  font: 500 clamp(52px,6.4vw,106px)/1.04 var(--font);
  letter-spacing: -.078em;
  margin: 0;
}

.display-title span {
  color: #B1B1B1;
}

.display-title em {
  font-style: normal;
  color: var(--accent);
}

.intro-copy {
  max-width: 420px;
}

.intro-copy p {
  font: 300 17px/1.9 var(--sans);
  color: #AEAEAE;
}

.intro-copy p:first-of-type {
  font-size: 20px;
  color: #DEDEDE;
  line-height: 1.65;
}

.intro-copy strong {
  color: #FFFFFF;
  font-weight: 500;
}

.mini-glyph {
  font-size: 42px;
  color: var(--accent);
}

.underlined-link {
  border-bottom: 1px solid rgba(163,163,163,.65);
  padding: 14px 0;
  display: inline-flex;
  justify-content: space-between;
  gap: 35px;
  font: 500 10px var(--mono);
  letter-spacing: .045em;
  margin-top: 18px;
  transition: .25s;
}

.underlined-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.underlined-link span {
  font-size: 16px;
}

.pipeline {
  display: grid;
  grid-template-columns: 1fr 30px 1fr 30px 1fr;
  gap: 25px;
  margin-top: 115px;
  border-top: 1px solid var(--line);
  padding-top: 45px;
}

.pipe-step {
  min-height: 200px;
}

.pipe-number {
  font: 500 10px var(--mono);
  color: #808080;
}

.pipe-symbol {
  display: block;
  font: 300 52px var(--font);
  color: #B7B7B7;
  margin: 16px 0;
}

.pipe-step h3 {
  font: 500 21px var(--font);
  letter-spacing: -.03em;
}

.pipe-step p {
  font-size: 14px;
  color: #929292;
  max-width: 265px;
  line-height: 1.65;
}

.pipe-join {
  align-self: center;
  color: #6B6B6B;
}

.intelligence-section {
  background: radial-gradient(ellipse at 64% 35%,rgba(84,84,84,.13),transparent 55%),#121212;
}

.section-header {
  display: flex;
  justify-content: space-between;
  gap: 8vw;
  align-items: end;
  margin-bottom: 65px;
}

.section-abstract {
  color: #ADADAD;
  font: 300 17px/1.8 var(--sans);
  max-width: 385px;
}

.console {
  border: 1px solid #343434;
  background: #121212;
  box-shadow: 0 28px 110px rgba(0,0,0,.42),0 0 100px rgba(103,103,103,.09);
}

.console-top,
.console-bottom {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #1B1B1B;
  border-bottom: 1px solid #353535;
  font: 500 10px var(--mono);
  color: #8D8D8D;
  letter-spacing: .08em;
}

.console-label {
  display: flex;
  gap: 13px;
  align-items: center;
}

.console-label b {
  color: #F5F5F5;
  letter-spacing: .15em;
}

.console-clock span {
  color: var(--accent);
  margin-left: 13px;
}

.console-bottom {
  height: 40px;
  background: #131313;
  border-bottom: 0;
  border-top: 1px solid #323232;
  font-size: 9px;
}

.console-body {
  display: grid;
  grid-template-columns: 270px minmax(0,1fr);
  min-height: 600px;
}

.console-sidebar {
  background: #141414;
  border-right: 1px solid #323232;
  padding: 32px 17px;
  display: flex;
  flex-direction: column;
}

.console-company {
  font: 700 24px var(--font);
  color: var(--primary);
  margin: 0 13px 55px;
}

.console-company span {
  font: 500 10px var(--mono);
  letter-spacing: .12em;
  color: #B5B5B5;
}

.console-side-label {
  font: 500 10px var(--mono);
  color: #838383;
  letter-spacing: .08em;
  margin: 0 13px 20px;
}

.signal-tab {
  border: 0;
  background: none;
  text-align: left;
  color: #979797;
  font: 500 10px var(--mono);
  padding: 18px 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  transition: .25s;
  border-left: 2px solid transparent;
}

.signal-tab:hover,
.signal-tab.active {
  background: rgba(142,142,142,.09);
  border-color: #A5A5A5;
  color: #E7E7E7;
}

.signal-tab span {
  font-size: 16px;
  color: var(--accent);
}

.signal-tab i {
  font-style: normal;
  margin-left: auto;
  font-size: 9px;
  opacity: .45;
}

.console-sidebar-bottom {
  margin-top: auto;
  padding: 20px 13px 0;
  border-top: 1px solid #323232;
  font: 500 10px/1.8 var(--mono);
  color: #898989;
}

.console-sidebar-bottom span {
  font-size: 9px;
  color: #767676;
}

.console-main {
  padding: 38px;
}

.console-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}

.console-heading>div>span {
  font: 500 10px var(--mono);
  color: #939393;
}

.console-heading h3 {
  font: 500 clamp(28px,3vw,42px) var(--font);
  margin: 11px 0 35px;
  letter-spacing: -.06em;
}

.small-pill {
  font: 500 9px var(--mono);
  border: 1px solid #474747;
  padding: 8px;
  color: #959595;
}

.console-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border: 1px solid #333333;
}

.console-stats>div {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid #333333;
}

.console-stats>div:last-child {
  border: 0;
}

.console-stats>div>span {
  font: 500 9px var(--mono);
  color: #909090;
}

.console-stats strong {
  font: 500 clamp(30px,3vw,49px) var(--font);
  letter-spacing: -.06em;
}

.console-stats strong span {
  color: #CACACA;
  font-size: .52em;
}

.console-stats small {
  font: 400 10px var(--mono);
  color: #838383;
}

.chart-region {
  padding: 25px 0 20px;
}

.chart-heading,
.chart-foot {
  display: flex;
  justify-content: space-between;
  font: 500 10px var(--mono);
  color: #858585;
}

.live-light {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 6px;
}

.signal-chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 5px 0;
}

.recommendation {
  display: flex;
  gap: 17px;
  align-items: center;
  padding: 18px 22px;
  background: #202020;
  border: 1px solid #3F3F3F;
}

.rec-icon {
  font-size: 35px;
  color: #B2B2B2;
}

.recommendation>div:nth-child(2) {
  flex: 1;
}

.recommendation span {
  font: 500 10px var(--mono);
  color: #A5A5A5;
}

.recommendation p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #DCDCDC;
}

.rec-arrow {
  font-size: 18px !important;
  color: var(--accent) !important;
}

.modules-section {
  background: #121212;
}

.module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.module-card {
  border: 1px solid rgba(185,185,185,.17);
  background: #141414;
  min-height: 520px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .35s,border-color .35s;
}

.module-card:hover {
  transform: translateY(-7px);
  border-color: rgba(171,171,171,.6);
}

.module-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 30px 0;
  font: 500 10px var(--mono);
  color: #919191;
  position: relative;
  z-index: 2;
}

.module-top span:last-child {
  color: #DBDBDB;
  font-size: 20px;
}

.module-visual {
  position: relative;
  height: 225px;
  overflow: hidden;
}

.visual-apex {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  justify-content: center;
  padding: 25px 45px;
}

.visual-apex:after,
.visual-pulse:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 65%,#141414);
}

.visual-apex .bar {
  height: var(--h);
  width: 30px;
  background: linear-gradient(0deg,rgba(130,130,130,.08),rgba(164,164,164,.78));
  animation: barEnter 1.4s ease both;
  animation-delay: calc(var(--i)*.1s);
  border: 1px solid rgba(181,181,181,.3);
}

@keyframes barEnter {
  from {
    height: 0;
  }

}

.apex-trend {
  position: absolute;
  top: 0;
  right: 22%;
  font-size: 80px;
  color: #B1B1B1;
  opacity: .18;
}

.visual-onyx {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rings {
  width: 185px;
  height: 185px;
  border: 1px solid rgba(183,183,183,.45);
  border-radius: 50%;
  position: relative;
  display: grid;
  place-items: center;
  box-shadow: 0 0 80px rgba(183,183,183,.1);
}

.rings span {
  position: absolute;
  inset: 23px;
  border: 1px solid rgba(185,185,185,.34);
  border-radius: 50%;
}

.rings span:nth-child(2) {
  inset: 47px;
}

.rings span:nth-child(3) {
  inset: 69px;
  background: #B1B1B1;
  box-shadow: 0 0 40px rgba(161,161,161,.32);
}

.rings i {
  font-style: normal;
  color: #FFFFFF;
  z-index: 2;
}

.onyx-pill {
  position: absolute;
  bottom: 8px;
  font: 500 9px var(--mono);
  letter-spacing: .14em;
  color: #B6B6B6;
}

.visual-pulse {
  display: grid;
  place-items: center;
}

.visual-pulse svg {
  width: 90%;
  filter: drop-shadow(0 0 20px rgba(193,193,193,.2));
}

.visual-janus {
  display: grid;
  place-items: center;
}

.brain-orb {
  width: 175px;
  height: 175px;
  position: relative;
  border: 1px solid #9B9B9B;
  border-radius: 50%;
  display: grid;
  place-items: center;
  animation: orbspin 22s linear infinite;
  box-shadow: inset 0 0 65px rgba(153,153,153,.12),0 0 50px rgba(153,153,153,.12);
}

.brain-orb span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(170,170,170,.4);
  border-radius: 50%;
  transform: rotateX(62deg);
}

.brain-orb span:nth-child(2) {
  transform: rotateY(62deg);
}

.brain-orb span:nth-child(3) {
  transform: rotate(45deg) rotateY(62deg);
}

.brain-orb span:nth-child(4) {
  transform: rotate(-45deg) rotateY(62deg);
}

.brain-orb b {
  font: 400 60px var(--font);
  color: #E4E4E4;
}

.janus-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F0EFEA;
  box-shadow: 0 0 15px #BDBDBD;
}

.dot1 {
  top: 38px;
  left: 26%;
}

.dot2 {
  top: 120px;
  right: 23%;
}

.dot3 {
  bottom: 25px;
  left: 35%;
}

@keyframes orbspin {
  50% {
    transform: rotate(12deg);
  }

}

.module-bottom {
  padding: 6px 30px 34px;
  position: relative;
  z-index: 2;
  margin-top: auto;
}

.module-bottom>span:first-child {
  font: 500 10px var(--mono);
  color: #969696;
  letter-spacing: .08em;
}

.module-bottom h3 {
  font: 500 clamp(55px,6.5vw,93px)/1 var(--font);
  letter-spacing: -.095em;
  margin: 12px 0;
}

.module-bottom h3 span {
  color: #9F9F9F;
}

.module-bottom p {
  max-width: 400px;
  color: #ADADAD;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 25px;
}

.card-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #424242;
  padding-top: 17px;
  font: 500 10px var(--mono);
  color: #E4E4E4;
}

.card-link b {
  font: 400 19px var(--sans);
  color: var(--accent);
}

.architecture {
  background: #171717;
  overflow: hidden;
}

.architecture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 8vw;
}

.architecture-copy {
  max-width: 500px;
  font-size: 17px;
  line-height: 1.85;
  color: #BABABA;
  margin: 30px 0;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 24px;
  max-width: 470px;
}

.tech-tags span {
  border: 1px solid #444444;
  padding: 11px 13px;
  font: 500 10px var(--mono);
  color: #B7B7B7;
}

.architecture-diagram {
  width: min(100%,630px);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  margin: auto;
}

.data-orbit {
  position: absolute;
  border: 1px solid rgba(154,154,154,.28);
  border-radius: 50%;
  inset: 7%;
  animation: rotate 50s linear infinite;
}

.orbit-b {
  inset: 19%;
  border-style: dashed;
  animation-direction: reverse;
  animation-duration: 40s;
}

.orbit-c {
  inset: 31%;
  border-color: rgba(202,202,202,.28);
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }

}

.data-orbit:after {
  content: '';
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 50%;
  position: absolute;
  top: 15%;
  left: 12%;
  box-shadow: 0 0 22px rgba(254,249,145,.75);
}

.arch-centre {
  width: 35%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,#333333,#202020 55%,#161616);
  border: 1px solid #6D6D6D;
  box-shadow: 0 0 70px rgba(123,123,123,.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  z-index: 1;
}

.arch-centre span {
  font: 500 9px/1.5 var(--mono);
  color: #ACACAC;
}

.arch-centre b {
  font: 500 clamp(18px,2.5vw,33px) var(--font);
  letter-spacing: -.04em;
}

.arch-centre small {
  font: 400 8px var(--mono);
  color: var(--accent);
}

.arch-dot {
  position: absolute;
  z-index: 2;
  font: 500 10px var(--mono);
  background: #1E1E1E;
  border: 1px solid var(--accent);
  color: #D3D3D3;
  padding: 12px 14px;
}

.node1 {
  top: 10%;
  left: 15%;
}

.node2 {
  top: 30%;
  right: 0;
}

.node3 {
  bottom: 15%;
  right: 17%;
}

.node4 {
  bottom: 25%;
  left: 1%;
}

.arch-caption {
  position: absolute;
  bottom: 0;
  font: 400 9px var(--mono);
  color: #858585;
}

.founder {
  background: #121212;
}

.founder-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 9vw;
}

.founder-signature {
  font: 500 13px var(--mono);
  letter-spacing: .14em;
  color: var(--accent);
  margin-top: 50px;
}

.founder-quote {
  border-left: 1px solid #4C4C4C;
  padding-left: 46px;
}

.quote-symbol {
  font: 400 100px/1 Georgia,serif;
  color: #8A8A8A;
}

.founder-quote blockquote {
  font: 300 clamp(21px,2vw,30px)/1.7 var(--font);
  letter-spacing: -.035em;
  margin: 10px 0 38px;
  color: #D9D9D9;
}

.founder-person {
  display: flex;
  align-items: center;
  gap: 16px;
}

.person-mark {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #636363;
  color: #C5C5C5;
  font: 500 13px var(--mono);
}

.founder-person strong,
.founder-person small {
  display: block;
  font: 500 11px/1.8 var(--mono);
}

.founder-person small {
  color: #8F8F8F;
}

.founder-quote .underlined-link {
  margin-top: 45px;
}

.proof {
  background: #141414;
}

.proof-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 10vw;
  align-items: center;
}

.proof-note {
  font: 300 17px/1.8 var(--sans);
  color: #B2B2B2;
  max-width: 500px;
  margin: 30px 0;
}

.testimonial {
  border: 1px solid #454545;
  background: #1D1D1D;
  padding: 45px;
}

.testimonial-tag {
  font: 500 9px var(--mono);
  letter-spacing: .1em;
  color: #8F8F8F;
}

.testimonial p {
  font: 300 clamp(21px,2.4vw,35px)/1.6 var(--font);
  letter-spacing: -.045em;
}

.testimonial>div:last-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.testimonial strong {
  font: 500 11px var(--mono);
}

.testimonial span {
  color: #989898;
  font: 400 10px var(--mono);
}

.contact-section {
  position: relative;
  background: radial-gradient(ellipse at 52% 60%,#2A2A2A,#141414 47%,#121212);
  padding: 130px 0 150px;
  text-align: center;
  overflow: hidden;
}

.contact-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(169,169,169,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(169,169,169,.08) 1px,transparent 1px);
  background-size: 90px 90px;
  mask-image: linear-gradient(0deg,#000000,transparent 85%);
  transform: perspective(600px) rotateX(45deg) scale(1.5);
  pointer-events: none;
}

.contact-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-title {
  font: 500 clamp(55px,7.5vw,128px)/1.05 var(--font);
  letter-spacing: -.09em;
  margin: 8px 0 25px;
}

.contact-title span {
  color: #B6B6B6;
}

.contact-sub {
  font: 300 18px/1.7 var(--sans);
  max-width: 510px;
  color: #C1C1C1;
  margin: 0 0 35px;
}

.contact-note {
  font: 400 9px var(--mono);
  color: #8F8F8F;
  margin-top: 23px;
}

.footer {
  background: #080808;
}

.footer-top {
  padding-block: 55px;
  border-bottom: 1px solid #2D2D2D;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-links {
  display: flex;
  gap: 26px;
}

.footer-links a,
.back-top {
  font: 500 10px var(--mono);
  color: #B2B2B2;
}

.footer-links a:hover,
.back-top:hover {
  color: #FFFFFF;
}

.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 27px;
  font: 400 9px var(--mono);
  color: #7F7F7F;
}

.footer-base a:hover {
  color: #FFFFFF;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity .85s,transform .85s cubic-bezier(.2,.75,.2,1),filter .85s;
}

.reveal.visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.module-card:nth-child(2),
.module-card:nth-child(4) {
  transition-delay: .1s;
}


/* ========== 02 / Module pages ========== */

.subpage-hero {
  min-height: 80vh;
  position: relative;
  display: flex;
  align-items: center;
  background: radial-gradient(ellipse at 70% 48%,rgba(98,98,98,.25),transparent 45%),linear-gradient(130deg,#121212,#1B1B1B);
  overflow: hidden;
}

.subpage-hero .wrap {
  position: relative;
  z-index: 1;
  padding-top: 135px;
  padding-bottom: 100px;
}

.subpage-hero .display-title {
  font-size: clamp(78px,12vw,190px);
  margin: 20px 0;
}

.subpage-hero p.sublead {
  font: 300 20px/1.75 var(--sans);
  max-width: 630px;
  color: #BCBCBC;
}

.subpage-hero .orb-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: linear-gradient(90deg, rgba(8,8,8,.72), rgba(8,8,8,.34)), url("assets/technology-hero.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.subpage-label {
  font: 500 10px var(--mono);
  letter-spacing: .17em;
  color: var(--accent);
}

.subpage-back {
  display: inline-flex;
  gap: 15px;
  align-items: center;
  font: 500 10px var(--mono);
  border-bottom: 1px solid #737373;
  padding-bottom: 12px;
  margin-bottom: 50px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 17px;
}

.feature {
  padding: 35px;
  background: #1A1A1A;
  border: 1px solid #363636;
  min-height: 290px;
}

.feature-index {
  font: 500 10px var(--mono);
  color: var(--accent);
}

.feature h3 {
  font: 500 26px var(--font);
  letter-spacing: -.05em;
  margin-top: 50px;
}

.feature p {
  font: 300 15px/1.8 var(--sans);
  color: #B0B0B0;
}

.subpage-essay {
  max-width: 850px;
  font: 300 clamp(24px,3.3vw,47px)/1.5 var(--font);
  letter-spacing: -.05em;
  color: #DDDDDD;
}

.subpage-essay b {
  color: #A2A2A2;
  font-weight: 500;
}

.subpage-next {
  background: #1C1C1C;
  padding: 80px 0;
}

.subpage-next .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.subpage-next h2 {
  font: 500 clamp(45px,6vw,85px) var(--font);
  letter-spacing: -.07em;
  margin: 0;
}

.subpage-next a {
  font: 500 11px var(--mono);
  border: 1px solid #717171;
  padding: 20px 28px;
  white-space: nowrap;
}

@media (max-width:1150px) {
  .hero-side {
    display: none;
  }

  .hero-heading {
    font-size: clamp(70px,10vw,130px);
  }

  .console-body {
    grid-template-columns: 210px minmax(0,1fr);
  }

  .console-sidebar {
    padding-inline: 10px;
  }

  .signal-tab {
    font-size: 9px;
  }

  .architecture-grid {
    gap: 2vw;
  }

}

@media (max-width:800px) {
  :root {
    --gutter: 25px;
  }

  .site-header {
    padding: 20px var(--gutter);
  }

  .site-header.scrolled {
    padding: 15px var(--gutter);
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 7px;
    background: none;
    border: 0;
    padding: 12px;
    z-index: 2;
  }

  .menu-toggle span {
    width: 27px;
    height: 1px;
    background: #EBEBEB;
    transition: .3s;
  }

  .menu-toggle[aria-expanded=true] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .menu-toggle[aria-expanded=true] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .nav {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: rgba(9,9,9,.98);
    padding: 100px var(--gutter);
    gap: 25px;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
  }

  .nav.open {
    opacity: 1;
    visibility: visible;
  }

  .nav>a {
    font: 500 27px var(--font);
  }

  .nav .nav-cta {
    font: 500 14px var(--mono);
  }

  .hero-heading {
    font-size: clamp(55px,10vw,100px);
  }

  .hero-content {
    padding-top: 160px;
  }

  .hero-bottom span:last-child {
    display: none;
  }

  .intro-grid,
.founder-grid,
.proof-grid,
.architecture-grid {
    grid-template-columns: 1fr;
    gap: 65px;
  }

  .intro-copy {
    max-width: 650px;
  }

  .section-header {
    display: block;
  }

  .section-abstract {
    max-width: 600px;
    margin-top: 30px;
  }

  .console-body {
    grid-template-columns: 1fr;
  }

  .console-sidebar {
    border-right: 0;
    border-bottom: 1px solid #323232;
    padding: 20px;
    display: block;
  }

  .console-company,
.console-side-label,
.console-sidebar-bottom {
    display: none;
  }

  .signal-tab {
    display: inline-flex;
    width: auto;
    padding: 13px 10px;
    font-size: 9px;
  }

  .console-main {
    padding: 25px;
  }

  .module-grid {
    grid-template-columns: 1fr;
  }

  .module-card {
    min-height: 510px;
  }

  .architecture-diagram {
    max-width: 550px;
  }

  .founder-quote {
    padding-left: 25px;
  }

  .footer-top,
.footer-base {
    flex-wrap: wrap;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .subpage-next .wrap {
    flex-direction: column;
    align-items: flex-start;
  }

}

@media (max-width:530px) {
  .brand-word {
    font-size: 24px;
  }

  .brand-symbol {
    width: 30px;
    height: 30px;
  }

  .hero-heading {
    font-size: clamp(44px,12vw,70px);
    letter-spacing: -.08em;
  }

  .hero-sub {
    font-size: 16px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }

  .hero-bottom {
    margin-top: 90px;
  }

  .display-title {
    font-size: clamp(44px,10.6vw,72px);
  }

  .pipeline {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .pipe-join {
    transform: rotate(90deg);
    margin: 10px;
  }

  .pipe-step {
    min-height: 175px;
  }

  .console-top {
    font-size: 8px;
    padding: 0 12px;
  }

  .console-clock {
    display: none;
  }

  .signal-tab {
    font-size: 8px;
    width: 100%;
    padding: 12px;
  }

  .console-heading {
    flex-direction: column;
  }

  .console-stats {
    grid-template-columns: 1fr 1fr;
  }

  .console-stats>div:last-child {
    grid-column: 1/-1;
    border-top: 1px solid #333333;
  }

  .console-stats>div {
    padding: 15px;
  }

  .chart-region {
    padding: 20px 0 10px;
  }

  .recommendation {
    padding: 12px;
  }

  .recommendation p {
    font-size: 12px;
  }

  .module-visual {
    height: 190px;
  }

  .module-bottom h3 {
    font-size: 67px;
  }

  .testimonial {
    padding: 24px;
  }

  .contact-section {
    padding: 105px 0;
  }

  .contact-title {
    font-size: clamp(42px,10vw,70px);
  }

  .footer-links {
    flex-wrap: wrap;
  }

  .footer-base {
    font-size: 8px;
  }

  .subpage-hero .display-title {
    font-size: 75px;
  }

}

@media (prefers-reduced-motion:reduce) {
  *,
*::before,
*::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .cursor-aura {
    display: none;
  }

}


/* ========== 03 / Official Sphaera identity, supplied SVG wordmark and geometric data system ========== */

.brand {
  gap: 0;
  flex-shrink: 0;
  line-height: 0;
}

.brand-logo {
  width: clamp(132px,12vw,188px);
  height: auto;
  display: block;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}

.footer .brand-logo {
  width: clamp(160px,15vw,230px);
  max-height: 64px;
}

.hero-grid {
  background-image: linear-gradient(rgba(177,177,177,.095) 1px,transparent 1px),linear-gradient(90deg,rgba(177,177,177,.095) 1px,transparent 1px);
  background-size: 72px 72px;
}

.hero::after {
  content: "";
  position: absolute;
  width: min(38vw,460px);
  height: min(38vw,460px);
  right: 5vw;
  top: 25%;
  pointer-events: none;
  opacity: .16;
  background: linear-gradient(90deg,#B1B1B1 25%,transparent 25% 50%,#B1B1B1 50% 75%,transparent 75%) 0 0/88px 88px;
  mask-image: linear-gradient(135deg,#000000,transparent 90%);
  transform: rotate(-12deg);
}

.module-card,
.console,
.pipe-step {
  border-color: rgba(177,177,177,.23);
}

.module-card:hover {
  border-color: rgba(239,239,239,.56);
}

.button-primary,
.nav-cta {
  background: #F0EFEA;
  color: #0B0B0B;
  border-color: #F0EFEA;
}

.button-primary:hover,
.nav-cta:hover {
  background: #FFFFFF;
  color: #0B0B0B;
}

.status-pulse,
.live-light {
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(255,255,255,.07);
}

@media (max-width:800px) {
  .brand-logo {
    width: 140px;
    max-height: 45px;
  }

  .hero::after {
    opacity: .09;
  }

}


/* ========== 04 / Complete-site editorial and conversion layer ========== */

.founder-letter-heading {
  font-family: Monda,sans-serif;
  font-size: clamp(17px,2vw,24px);
  margin: 0 0 20px;
  letter-spacing: .04em;
}

.founder-letter-paragraph {
  line-height: 1.9;
  color: #C4C4C4;
  font-size: clamp(13px,1.1vw,15px);
  margin: 0 0 18px;
}

.founder-quote {
  max-width: 850px;
}

.founder-quote .founder-person {
  margin-top: 26px;
}

.trust-section {
  margin-top: 72px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-top: 26px;
}

.trust-grid article,
.insight-card {
  border: 1px solid #444444;
  background: #191919;
  padding: 26px;
  min-height: 190px;
}

.trust-grid strong,
.trust-grid small {
  display: block;
}

.trust-grid strong {
  font: 700 13px Monda;
}

.trust-grid small {
  font: 400 10px 'IBM Plex Mono';
  color: #BBBBBB;
  margin: 9px 0;
}

.trust-grid p,
.trust-disclaimer {
  font-size: 12px;
  line-height: 1.8;
  color: #B9B9B9;
}

.trust-disclaimer {
  margin-top: 18px;
}

.insights-section {
  background: #101010;
}

.insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 44px;
}

.insight-card {
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  transition: background .2s,border-color .2s;
}

.insight-card:hover {
  background: #292929;
  border-color: #BBBBBB;
}

.insight-card span,
.insight-card b {
  font: 11px 'IBM Plex Mono';
  color: #B1B1B1;
}

.insight-card h3 {
  font: 700 clamp(20px,2.5vw,31px) Monda;
  margin: 32px 0 17px;
}

.insight-card p {
  font-size: 14px;
  line-height: 1.8;
  color: #B1B1B1;
}

.insight-card b {
  display: block;
  margin-top: 30px;
}

.contact-content {
  max-width: 1180px;
}

.contact-form-panel {
  margin: 38px auto 0;
  padding: 28px;
  border: 1px solid #555555;
  background: rgba(9,9,9,.88);
  max-width: 870px;
  text-align: left;
}

.contact-form-panel .section-kicker {
  margin: 0 0 24px;
}

.lead-form {
  display: grid;
  gap: 19px;
}

.lead-form label {
  font: 500 10px 'IBM Plex Mono';
  letter-spacing: .08em;
  color: #DDDDDD;
  display: grid;
  gap: 10px;
}

.lead-form input:not([type=checkbox]),
.lead-form select,
.lead-form textarea {
  font: 400 15px Monda;
  background: #1B1B1B;
  border: 1px solid #595959;
  color: white;
  padding: 14px;
  width: 100%;
  outline: none;
  border-radius: 0;
  min-width: 0;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: white;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.form-consent {
  display: flex !important;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.form-consent input {
  margin-top: 4px;
}

.form-consent a {
  text-decoration: underline;
}

.lead-form .button-primary {
  border: 0;
  cursor: pointer;
  justify-self: start;
}

.lead-form .button-primary:disabled {
  opacity: .6;
  cursor: wait;
}

.form-status {
  min-height: 18px;
  font: 12px Monda;
  color: #D6D6D6;
}

.form-status[data-state=error] {
  color: #C3C3C3;
}

.form-captcha {
  min-height: 0;
  margin: 4px 0 2px;
}

.form-captcha:empty {
  display: none;
}

.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.newsletter-panel {
  max-width: 870px;
  margin-top: 18px;
}

.email-inline {
  display: flex;
  gap: 10px;
}

.email-inline button {
  background: #F0EFEA;
  color: #111111;
  border: 0;
  padding: 13px 20px;
  cursor: pointer;
  font: 700 11px Monda;
}

.form-footnote {
  font-size: 11px;
  color: #AAAAAA;
  margin-top: 16px;
}

.subpage-contact {
  background: #111111;
}

.subpage-contact .contact-form-panel {
  margin-left: 0;
}

.editorial-article {
  max-width: 850px;
  margin: 0 auto;
}

.editorial-article h2 {
  font: 700 clamp(23px,3vw,37px) Monda;
  color: #FFFFFF;
  margin: 45px 0 15px;
  letter-spacing: -.025em;
}

.editorial-article p {
  font: 400 15px/1.9 Monda;
  color: #BBBBBB;
  margin: 0 0 15px;
}

.editorial-article .article-intro {
  font-size: clamp(19px,2.1vw,26px);
  color: #F0EFEA;
  line-height: 1.7;
}

@media (max-width:800px) {
  .trust-grid {
    grid-template-columns: 1fr 1fr;
  }

  .insights-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width:520px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-panel {
    padding: 19px;
  }

  .email-inline {
    flex-direction: column;
  }

  .email-inline button {
    padding: 15px;
  }

}


/* ========== 05 /  Day / Night theme toggle  ========== */

.brand-logo {
  height: auto;
  max-height: 34px;
  width: auto;
  display: block;
}

.site-header {
  gap: 18px;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #F5F5F5;
  padding: 12px 14px;
  font: 500 10px var(--mono);
  letter-spacing: .12em;
  white-space: nowrap;
  transition: .25s;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
}

.theme-toggle-icon {
  font-size: 13px;
  line-height: 1;
}

.theme-toggle-label {
  display: inline-block;
}

.product-ui-section {
  background: radial-gradient(ellipse at top right,rgba(133,133,133,.08),transparent 45%),#101010;
}

.dashboard-showcase {
  border: 1px solid var(--line);
  background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  padding: 26px;
  box-shadow: 0 24px 120px rgba(0,0,0,.28);
}

.dashboard-showcase-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.dashboard-showcase-top p {
  margin: 0;
  max-width: 420px;
  font: 300 14px/1.7 var(--sans);
  color: #AFAFAF;
}

.dashboard-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-pills span {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line);
  font: 500 10px var(--mono);
  letter-spacing: .08em;
  color: #D7D7D7;
  background: rgba(255,255,255,.03);
}

.dashboard-frame {
  position: relative;
  border: 1px solid var(--line);
  padding: 12px;
  background: rgba(6,6,6,.72);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}

.dashboard-shot {
  display: block;
  width: 100%;
  height: auto;
}

.dashboard-shot-light {
  display: none;
}

.dashboard-meta {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-top: 18px;
}

.dashboard-meta>div {
  padding: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
}

.dashboard-meta strong {
  display: block;
  font: 600 16px var(--font);
  margin-bottom: 8px;
  letter-spacing: -.04em;
}

.dashboard-meta span {
  display: block;
  font: 300 14px/1.7 var(--sans);
  color: #B7B7B7;
}

.body-copy-muted,
.body-copy-muted p {
  color: #B7B7B7;
}

.footer {
  position: relative;
  overflow: hidden;
}

body.light-theme {
  --bg: #F0F0F0;
  --bg2: #F5F5F5;
  --panel: #FFFFFF;
  --line: rgba(18,18,18,.09);
  --white: #121212;
  --muted: #626262;
  --primary: #121212;
  --accent: #919191;
  background: var(--bg);
  color: var(--white);
}

body.light-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 10% 15%,rgba(181,181,181,.08),transparent 28%),radial-gradient(circle at 90% 12%,rgba(137,137,137,.08),transparent 24%),radial-gradient(circle at 50% 100%,rgba(176,176,176,.08),transparent 36%);
  z-index: -2;
}

.light-theme .page-progress {
  background: linear-gradient(90deg,#8E8E8E,#BBBBBB,#B1B1B1);
  box-shadow: 0 0 16px rgba(169,169,169,.5);
}

.light-theme .cursor-aura {
  background: radial-gradient(circle,rgba(133,133,133,.10),transparent 67%);
}

.light-theme .site-header {
  background: linear-gradient(180deg,rgba(245,245,245,.94),rgba(245,245,245,.7),transparent);
}

.light-theme .site-header.scrolled {
  background: rgba(245,245,245,.94);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.light-theme .nav>a {
  color: #535353;
}

.light-theme .nav>a:hover,
.light-theme .hero-bottom i,
.light-theme .button-text,
.light-theme .display-title em,
.light-theme .section-kicker,
.light-theme .hero-side b {
  color: #121212;
}

.light-theme .nav .nav-cta {
  border-color: rgba(0,0,0,.14);
}

.light-theme .theme-toggle {
  border-color: rgba(0,0,0,.1);
  background: rgba(255,255,255,.65);
  color: #181818;
}

.light-theme .theme-toggle:hover {
  border-color: rgba(0,0,0,.18);
  background: #FFFFFF;
}

.light-theme .hero {
  background: radial-gradient(ellipse at 67% 28%,rgba(153,153,153,.24) 0,rgba(225,225,225,.45) 35%,#F1F1F1 70%,#EDEDED 100%);
}

.light-theme .hero-grid {
  background-image: linear-gradient(rgba(108,108,108,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(108,108,108,.06) 1px,transparent 1px);
}

.light-theme .hero-scan {
  background: linear-gradient(90deg,transparent,#AAAAAA,transparent);
  box-shadow: 0 0 60px 2px rgba(170,170,170,.35);
  opacity: .4;
}

.light-theme .hero-heading .outline-word {
  -webkit-text-stroke: 1.3px rgba(18,18,18,.18);
}

.light-theme .hero-sub,
.light-theme .section-abstract,
.light-theme .intro-copy p,
.light-theme .pipe-step p,
.light-theme .sublead,
.light-theme .editorial-article p,
.light-theme .testimonial p,
.light-theme .trust-grid p,
.light-theme .trust-disclaimer,
.light-theme .form-footnote,
.light-theme .dashboard-showcase-top p,
.light-theme .dashboard-meta span {
  color: #5A5A5A;
}

.light-theme .eyebrow,
.light-theme .eyebrow-index,
.light-theme .hero-bottom,
.light-theme .hero-side,
.light-theme .ticker-track span,
.light-theme .pipe-number,
.light-theme .console-top,
.light-theme .console-bottom,
.light-theme .console-heading>div>span,
.light-theme .small-pill,
.light-theme .section-kicker,
.light-theme .subpage-label,
.light-theme .feature-index,
.light-theme .insight-card span,
.light-theme .insight-card b,
.light-theme .lead-form label,
.light-theme .form-status {
  color: #6F6F6F;
}

.light-theme .button-primary {
  background: #141414;
  color: #F7F7F7;
}

.light-theme .button-primary:hover {
  background: #0D0D0D;
}

.light-theme .underlined-link {
  border-color: rgba(18,18,18,.28);
}

.light-theme .underlined-link:hover {
  border-color: #121212;
  color: #121212;
}

.light-theme .ticker {
  background: #FAFAFA;
  border-block: 1px solid rgba(0,0,0,.08);
}

.light-theme .dark-section,
.light-theme .intelligence-section,
.light-theme .insights-section,
.light-theme .product-ui-section,
.light-theme .subpage-contact,
.light-theme .footer {
  background: #F4F4F4;
}

.light-theme .intro,
.light-theme .architecture,
.light-theme .proof,
.light-theme .section,
.light-theme .contact-section {
  background-color: transparent;
}

.light-theme .console,
.light-theme .module-card,
.light-theme .feature,
.light-theme .testimonial,
.light-theme .insight-card,
.light-theme .contact-form-panel,
.light-theme .trust-grid article,
.light-theme .dashboard-showcase,
.light-theme .dashboard-meta>div,
.light-theme .editorial-article,
.light-theme .pipeline .pipe-step {
  background: rgba(255,255,255,.8);
  border-color: rgba(18,18,18,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.05);
}

.light-theme .console {
  box-shadow: 0 30px 100px rgba(143,143,143,.08),0 18px 44px rgba(0,0,0,.05);
}

.light-theme .console-top,
.light-theme .console-bottom,
.light-theme .console-sidebar {
  background: #FCFCFC;
  border-color: rgba(18,18,18,.08);
}

.light-theme .console-company,
.light-theme .display-title,
.light-theme .feature h3,
.light-theme .founder-letter-heading,
.light-theme .insight-card h3,
.light-theme .subpage-essay b,
.light-theme .testimonial strong,
.light-theme .dashboard-meta strong,
.light-theme .console-heading h3,
.light-theme .pipe-step h3,
.light-theme .founder-person strong,
.light-theme .lead-form input:not([type=checkbox]),
.light-theme .lead-form select,
.light-theme .lead-form textarea {
  color: #121212;
}

.light-theme .signal-tab {
  color: #6C6C6C;
}

.light-theme .signal-tab:hover,
.light-theme .signal-tab.active {
  background: rgba(145,145,145,.08);
  border-color: #919191;
  color: #121212;
}

.light-theme .signal-tab span,
.light-theme .console-clock span,
.light-theme .rec-icon,
.light-theme .nav-cta span,
.light-theme .line-dot,
.light-theme .mini-glyph,
.light-theme .ticker-track i,
.light-theme .chart-heading span:last-child {
  color: #919191;
}

.light-theme .chart-region,
.light-theme .recommendation,
.light-theme .console-stats,
.light-theme .console-stats>div,
.light-theme .dashboard-frame {
  border-color: rgba(18,18,18,.08);
  background: rgba(255,255,255,.76);
}

.light-theme .signal-chart path[stroke="#404040"] {
  stroke: #DBDBDB;
}

.light-theme .lead-form input:not([type=checkbox]),
.light-theme .lead-form select,
.light-theme .lead-form textarea {
  background: #FFFFFF;
  border-color: rgba(18,18,18,.12);
}

.light-theme .email-inline button {
  background: #141414;
  color: #FFFFFF;
}

.light-theme .quote-symbol,
.light-theme .founder-signature {
  color: #919191;
}

.light-theme .module-visual,
.light-theme .orb-bg {
  opacity: .82;
}

.light-theme .dashboard-shot-dark {
  display: none;
}

.light-theme .dashboard-shot-light {
  display: block;
}

.light-theme .footer a {
  color: inherit;
}

.light-theme .back-top,
.light-theme .footer-base span {
  color: #696969;
}

.light-theme .status-pulse {
  background: #919191;
  box-shadow: 0 0 0 5px rgba(145,145,145,.12),0 0 20px rgba(145,145,145,.32);
}

.light-theme .hero-side i {
  background: #919191;
}

.light-theme .founder-letter-paragraph,
.light-theme .founder-letter-heading,
.light-theme .founder-person small {
  color: #616161;
}

.light-theme .subpage-hero {
  background: radial-gradient(circle at 80% 20%,rgba(153,153,153,.14),transparent 30%),linear-gradient(180deg,#F1F1F1,#EDEDED);
}

.light-theme .subpage-back {
  color: #686868;
}

.light-theme .subpage-back:hover {
  color: #141414;
}

.light-theme .menu-toggle span {
  background: #121212;
}

@media (max-width:1200px) {
  .dashboard-meta {
    grid-template-columns: 1fr;
  }

  .theme-toggle-label {
    display: none;
  }

  .theme-toggle {
    padding: 12px;
  }

  .site-header {
    gap: 10px;
  }

}

@media (max-width:960px) {
  .dashboard-showcase-top {
    flex-direction: column;
  }

  .site-header {
    flex-wrap: wrap;
  }

  .theme-toggle {
    order: 3;
  }

  .light-theme .nav.open,
.nav.open {
    background: rgba(19,19,19,.96);
  }

  .light-theme .nav.open {
    background: rgba(247,247,247,.98);
  }

}

@media (max-width:720px) {
  .brand-logo {
    max-height: 28px;
  }

  .dashboard-showcase {
    padding: 14px;
  }

  .dashboard-frame {
    padding: 7px;
  }

}


/* ========== 06 / Strict Sphaera brand: monochrome only, no blue, violet or other chromatic accents. ========== */

:root {
  --bg: #0B0B0B;
  --bg2: #141414;
  --panel: #2A2A2A;
  --line: rgba(177,177,177,.23);
  --white: #FFFFFF;
  --muted: #B1B1B1;
  --primary: #F0EFEA;
  --accent: #B1B1B1;
}

body.light-theme {
  --bg: #F0EFEA;
  --bg2: #FFFFFF;
  --panel: #FFFFFF;
  --line: rgba(42,42,42,.14);
  --white: #0B0B0B;
  --muted: #555555;
  --primary: #2A2A2A;
  --accent: #666666;
  background: #F0EFEA;
  color: #0B0B0B;
}

body.light-theme::before {
  background: none;
}

.light-theme .hero {
  background: radial-gradient(ellipse at 70% 34%,#FFFFFF 0,#F0EFEA 68%,#E4E4E4 100%);
}

.light-theme .dark-section,
.light-theme .intelligence-section,
.light-theme .insights-section,
.light-theme .subpage-contact {
  background: #F0EFEA;
}

.light-theme .site-header,
.light-theme .site-header.scrolled {
  background: rgba(240,240,240,.96);
}

.light-theme .console,
.light-theme .module-card,
.light-theme .feature,
.light-theme .testimonial,
.light-theme .insight-card,
.light-theme .trust-grid article,
.light-theme .contact-form-panel {
  background: #FFFFFF;
  color: #111111;
  border-color: rgba(42,42,42,.14);
  box-shadow: 0 18px 55px rgba(0,0,0,.06);
}

.light-theme .console-top,
.light-theme .console-bottom,
.light-theme .console-sidebar {
  background: #F5F5F5;
  color: #4A4A4A;
}

.light-theme .console-main,
.light-theme .console-stats,
.light-theme .console-stats>div,
.light-theme .chart-region,
.light-theme .recommendation {
  background: #FFFFFF;
  color: #111111;
  border-color: #D6D6D6;
}

.light-theme .console-stats strong,
.light-theme .console-heading h3,
.light-theme .console-company,
.light-theme .console-label b {
  color: #111111;
}

.light-theme .signal-chart #chartPath {
  stroke: #252525;
}

.light-theme .signal-chart #chartNode {
  fill: #252525;
  stroke: #999999;
}

.light-theme .nav-cta,
.light-theme .theme-toggle {
  border-color: #B1B1B1;
}

.light-theme .theme-toggle {
  background: #FFFFFF;
  color: #111111;
}

.light-theme .nav.open {
  background: #F0EFEA;
}

.light-theme .nav.open a {
  color: #111111;
}

.light-theme .hero-heading .outline-word {
  -webkit-text-stroke: 1.3px rgba(42,42,42,.30);
}

.light-theme .status-pulse,
.light-theme .hero-side i {
  background: #666666;
  box-shadow: 0 0 0 5px rgba(0,0,0,.07);
}

.light-theme .button-primary {
  background: #0B0B0B;
  color: #FFFFFF;
}

.light-theme .button-primary:hover {
  background: #2A2A2A;
}

.light-theme .module-card:hover,
.light-theme .insight-card:hover {
  background: #F7F7F7;
}

.light-theme .founder-letter-paragraph,
.light-theme .intro-copy p,
.light-theme .section-abstract,
.light-theme .hero-sub,
.light-theme .editorial-article p,
.light-theme .trust-grid p {
  color: #565656;
}

.light-theme .display-title span,
.light-theme .display-title em {
  color: #777777;
}

.light-theme .footer {
  background: #E8E8E8;
  color: #111111;
}


/* ========== 07 / SPHAERA 2026: official deck symbols and floating monochrome glass navigation ========== */

.hero-heading .outline-word {
  color: transparent !important;
  -webkit-text-stroke: 1.5px #fff !important;
  text-shadow: none !important;
}

.light-theme .hero-heading .outline-word {
  -webkit-text-stroke: 1.5px #151515 !important;
  color: transparent !important;
  text-shadow: none !important;
}

.site-header {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: 20px !important;
  width: min(calc(100% - 44px),1410px) !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(12px,1.8vw,26px) !important;
  justify-content: space-between !important;
  padding: 13px 18px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(37,37,37,.53) !important;
  backdrop-filter: blur(24px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(110%) !important;
  box-shadow: 0 14px 46px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.11) !important;
  transition: background .3s,box-shadow .3s !important;
}

.site-header.scrolled {
  padding: 13px 18px !important;
  background: rgba(24,24,24,.74) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.12) !important;
}

.light-theme .site-header,
.light-theme .site-header.scrolled {
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(10,10,10,.1) !important;
  box-shadow: 0 16px 54px rgba(0,0,0,.11),inset 0 1px #fff !important;
}

.site-header .brand-logo {
  max-height: 33px !important;
  width: auto !important;
  max-width: 155px !important;
}

.nav {
  gap: clamp(9px,1.1vw,18px) !important;
  justify-content: center;
  flex: 1;
}

.nav>a {
  color: #eee !important;
  font: 500 clamp(9px,.76vw,11px) var(--mono) !important;
  white-space: nowrap !important;
}

.light-theme .nav>a {
  color: #232323 !important;
}

.nav>a:not(.nav-cta):hover {
  opacity: .54;
}

.nav .nav-cta {
  border: 1px solid #fff !important;
  background: #fff !important;
  color: #080808 !important;
  border-radius: 12px !important;
  padding: 14px 15px !important;
  font: 700 10px var(--mono) !important;
  letter-spacing: .05em;
  box-shadow: 0 4px 21px rgba(255,255,255,.12);
  white-space: nowrap !important;
}

.nav .nav-cta span {
  color: inherit !important;
}

.nav .nav-cta:hover {
  background: #e9e9e9 !important;
  transform: translateY(-2px) !important;
}

.light-theme .nav .nav-cta {
  background: #0b0b0b !important;
  color: #fff !important;
  border-color: #0b0b0b !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.13);
}

.light-theme .nav .nav-cta:hover {
  background: #292929 !important;
}

.theme-toggle {
  border-radius: 12px !important;
  flex-shrink: 0 !important;
}

.light-theme .theme-toggle {
  color: #111 !important;
}

.menu-toggle {
  flex-shrink: 0;
}


/* ========== 08 / Apple-like frosted glass on existing UI modules, never coloured glass ========== */

.console,
.module-card,
.feature,
.testimonial,
.insight-card,
.contact-form-panel,
.trust-grid article {
  backdrop-filter: blur(22px) saturate(108%);
  -webkit-backdrop-filter: blur(22px) saturate(108%);
  border-radius: 23px !important;
  border: 1px solid rgba(255,255,255,.17) !important;
  background: linear-gradient(140deg,rgba(255,255,255,.075),rgba(255,255,255,.019) 60%,rgba(255,255,255,.035)) !important;
  box-shadow: 0 15px 44px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.11) !important;
}

.light-theme .console,
.light-theme .module-card,
.light-theme .feature,
.light-theme .testimonial,
.light-theme .insight-card,
.light-theme .contact-form-panel,
.light-theme .trust-grid article {
  background: linear-gradient(140deg,rgba(255,255,255,.91),rgba(255,255,255,.55)) !important;
  border-color: rgba(20,20,20,.11) !important;
  box-shadow: 0 12px 46px rgba(10,10,10,.065),inset 0 1px rgba(255,255,255,.95) !important;
}

.module-card {
  overflow: hidden !important;
  position: relative;
}

.module-official-mark {
  height: 106px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 22px 0;
  position: relative;
  z-index: 2;
}

.module-official-mark img {
  display: block;
  object-fit: contain;
  width: 85px;
  height: 82px;
}

.light-theme .module-official-mark img,
.light-theme .subpage-module-emblem img {
  filter: brightness(0);
}

.subpage-module-emblem {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
}

.subpage-module-emblem img {
  width: 92px;
  height: 96px;
  object-fit: contain;
}

.founder-image-placeholder {
  min-height: 280px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 32px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: linear-gradient(135deg,rgba(180,180,180,.12),rgba(0,0,0,.42)),repeating-linear-gradient(90deg,transparent,transparent 47px,rgba(255,255,255,.035) 48px);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.founder-image-placeholder span,
.founder-image-placeholder small {
  font: 500 10px var(--mono);
  color: #aaa;
  letter-spacing: .08em;
}

.founder-image-placeholder strong {
  font: 500 55px var(--font);
  letter-spacing: -.06em;
  color: #d6d6d6;
}

.light-theme .founder-image-placeholder {
  background: linear-gradient(130deg,#d5d5d5,#ededed);
  border-color: #bbb;
}

.light-theme .founder-image-placeholder strong {
  color: #414141;
}

.light-theme .founder-image-placeholder span,
.light-theme .founder-image-placeholder small {
  color: #666;
}

.corporate-footer {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1fr;
  gap: 24px;
  padding-top: 42px;
  padding-bottom: 35px;
  border-top: 1px solid var(--line);
}

.corp-identity,
.corp-address {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.corp-identity>span,
.corp-address>span {
  font: 600 10px var(--mono);
  letter-spacing: .14em;
  color: #959595;
}

.corp-identity strong {
  font: 600 14px var(--font);
  color: #f0f0f0;
}

.corp-identity small,
.corp-address address,
.corp-address a {
  font: 400 12px/1.8 var(--font);
  color: #aaa;
  font-style: normal;
}

.light-theme .corp-identity strong {
  color: #111;
}

.light-theme .corp-identity small,
.light-theme .corp-address address,
.light-theme .corp-address a {
  color: #515151;
}

@media (max-width:1250px) {
  .site-header {
    width: calc(100% - 30px) !important;
    top: 12px !important;
  }

  .nav {
    gap: 9px !important;
  }

  .nav>a {
    font-size: 9px !important;
  }

  .site-header .brand-logo {
    max-width: 129px !important;
  }

  .nav .nav-cta {
    padding: 12px 10px !important;
  }

}

@media (max-width:960px) {
  .site-header {
    width: calc(100% - 26px) !important;
    padding: 12px 16px !important;
    flex-wrap: nowrap !important;
  }

  .nav {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 19px !important;
    background: rgba(18,18,18,.96) !important;
    backdrop-filter: blur(30px) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    padding: 16px !important;
  }

  .nav.open {
    display: flex !important;
  }

  .light-theme .nav {
    background: rgba(246,246,246,.96) !important;
    border-color: rgba(0,0,0,.1) !important;
  }

  .theme-toggle {
    margin-left: auto !important;
    order: initial !important;
  }

  .corporate-footer {
    grid-template-columns: 1fr 1fr;
  }

  .hero-content {
    padding-top: 145px !important;
  }

}

@media (max-width:600px) {
  .corporate-footer {
    grid-template-columns: 1fr;
  }

  .module-official-mark {
    height: 94px;
  }

  .module-official-mark img {
    width: 70px;
    height: 72px;
  }

  .founder-image-placeholder {
    min-height: 200px;
  }

}


/* ========== 09 / Founder, original testimonials and monochrome intelligence motion ========== */

.founder-photo-frame {
  margin: 0 0 32px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  max-width: 760px;
  aspect-ratio: 1.5;
  background: #1c1c1c;
  isolation: isolate;
}

.founder-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 29%;
  filter: none;
  transition: transform 1.2s cubic-bezier(.22,1,.36,1);
}

.founder-photo-frame:hover img {
  transform: scale(1.035);
}

.founder-photo-frame:after {
  content: "";
  position: absolute;
  inset: 36% 0 0;
  background: linear-gradient(0deg,rgba(0,0,0,.72),transparent 80%);
  pointer-events: none;
}

.founder-photo-frame figcaption {
  position: absolute;
  bottom: 22px;
  left: 25px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 600 11px var(--mono);
  letter-spacing: .12em;
  color: white;
  z-index: 1;
}

.founder-photo-frame figcaption span {
  opacity: .75;
}

.founder-expand {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .6s cubic-bezier(.22,1,.36,1),opacity .35s,visibility .35s;
}

.founder-expand>* {
  overflow: hidden;
}

.founder-expand.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}

.founder-expand-inner {
  overflow: hidden;
  min-height: 0;
}

.read-more {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 177px;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 13px 16px 13px 20px;
  background: rgba(255,255,255,.075);
  color: var(--white);
  font: 600 10px var(--mono);
  letter-spacing: .08em;
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .25s,background .25s,border-color .25s;
}

.read-more:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.3);
}

.read-more-symbol {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  transition: transform .35s;
}

.read-more[aria-expanded=true] .read-more-symbol {
  transform: rotate(45deg);
}

.founder-read-more {
  margin: 8px 0 23px;
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border-radius: 20px !important;
  min-height: 254px;
  overflow: hidden;
  transition: transform .35s,box-shadow .35s;
}

.review-card:hover {
  transform: translateY(-4px);
}

.review-counter {
  font: 500 10px var(--mono);
  letter-spacing: .12em;
  color: var(--muted);
}

.review-quote-mark {
  position: absolute;
  right: 24px;
  top: 15px;
  font: 700 64px Georgia,serif;
  line-height: 1;
  color: rgba(177,177,177,.23);
}

.review-content {
  position: relative;
  transition: max-height .55s cubic-bezier(.22,1,.36,1);
}

.review-content.review-collapsed {
  max-height: 5.2em;
  overflow: hidden;
}

.review-content.review-collapsed:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.4em;
  background: linear-gradient(transparent,var(--review-fade,#191919));
  pointer-events: none;
}

.review-content.review-collapsed.is-open {
  max-height: 500px;
}

.review-content.review-collapsed.is-open:after {
  opacity: 0;
}

.review-content p {
  margin: 0 !important;
  color: var(--white) !important;
  line-height: 1.85 !important;
  font-size: 13px !important;
}

.review-card .review-author {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  gap: 2px;
  padding-top: 8px;
}

.review-card .review-author strong {
  font-size: 12px;
}

.review-card .review-author small {
  font-size: 9px;
}

.review-read-more {
  align-self: start;
  min-width: 136px;
  padding: 9px 13px 9px 15px;
  margin-top: 2px;
}

.review-read-more .read-more-symbol {
  font-size: 17px;
}

.light-theme .read-more {
  background: rgba(255,255,255,.74);
  border-color: rgba(0,0,0,.12);
  color: #121212;
}

.light-theme .review-content p {
  color: #252525 !important;
}

.light-theme .review-content.review-collapsed:after {
  --review-fade: #f8f8f5;
}

.signal-visual-section {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  color: var(--white);
  padding: clamp(90px,10vw,140px) 0;
}

.signal-visual-head {
  display: grid;
  grid-template-columns: 1.45fr .55fr;
  gap: 20px;
  align-items: end;
}

.signal-visual-head .section-kicker {
  grid-column: 1/-1;
  margin-bottom: 4px;
}

.signal-visual-head .display-title {
  font-size: clamp(45px,5.8vw,92px);
}

.data-field {
  margin-top: 54px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 20px;
  background: rgba(130,130,130,.055);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.data-field-copy,
.data-field-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font: 600 10px var(--mono);
  letter-spacing: .08em;
}

.flow-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 200px;
  max-height: 340px;
  overflow: visible;
}

.flow-lines {
  opacity: .23;
}

.flow-pulses path {
  stroke-dasharray: 16 900;
  stroke-dashoffset: 916;
  animation: stream-pulse 5s linear infinite;
}

.flow-pulses path:nth-child(2) {
  animation-delay: -1.75s;
}

.flow-pulses path:nth-child(3) {
  animation-delay: -3.5s;
}

.flow-nodes circle {
  fill: var(--white);
  opacity: .7;
}

.flow-nodes circle:nth-child(7) {
  fill: var(--bg);
  stroke: var(--white);
  stroke-width: 4;
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(200,200,200,.22));
}

.flow-nodes circle:not(:nth-child(7)) {
  animation: node-glow 4s ease-in-out infinite alternate;
}

.flow-nodes circle:nth-child(2n) {
  animation-delay: -2s;
}

@keyframes stream-pulse {
  to {
    stroke-dashoffset: 0;
  }

}

@keyframes node-glow {
  to {
    opacity: .25;
  }

}

.light-theme .data-field {
  background: rgba(255,255,255,.8);
}

.light-theme .review-card {
  --review-fade: #fff;
}

.light-theme .flow-pulses path {
  stroke: #202020;
}

.light-theme .flow-lines {
  opacity: .2;
}

@media (max-width:900px) {
  .signal-visual-head {
    grid-template-columns: 1fr;
  }

  .founder-photo-frame {
    aspect-ratio: 1.4;
  }

  .review-card {
    min-height: 0;
  }

}

@media (max-width:600px) {
  .founder-photo-frame {
    aspect-ratio: 1.12;
  }

  .founder-photo-frame figcaption {
    font-size: 9px;
    left: 15px;
    right: 15px;
    bottom: 15px;
  }

  .data-field {
    padding: 12px;
    border-radius: 15px;
  }

  .data-field-copy,
.data-field-footer {
    font-size: 7px;
  }

}

@media (prefers-reduced-motion:reduce) {
  .founder-expand,
.review-content,
.flow-pulses path,
.flow-nodes circle {
    animation: none !important;
    transition: none !important;
  }

}


/* ========== 10 / Compact official module cards, no decorative illustrations ========== */

.module-grid {
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  align-items: stretch;
}

.module-card {
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 22px !important;
  transition: transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.module-card:hover {
  transform: translateY(-5px);
}

.module-top {
  padding: 22px 22px 0;
  font-size: 9px;
  letter-spacing: .03em;
}

.module-official-mark {
  height: 104px !important;
  padding: 10px 22px 0 !important;
  justify-content: flex-start !important;
  flex-shrink: 0;
}

.module-official-mark img {
  width: 76px !important;
  height: 76px !important;
  object-fit: contain;
}

.module-bottom {
  padding: 0 22px 24px !important;
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.module-bottom>span:first-child {
  font-size: 9px;
}

.module-bottom h3 {
  font-size: clamp(31px,3.3vw,46px) !important;
  line-height: 1.1;
  margin: 12px 0 10px;
}

.module-bottom p {
  font-size: 12px;
  line-height: 1.65;
  margin: 0 0 24px;
  flex: 1;
}

.module-bottom .card-link {
  margin-top: auto;
}

@media (max-width:1120px) {
  .module-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}

@media (max-width:620px) {
  .module-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .module-card {
    min-height: 0 !important;
  }

  .module-top {
    padding-top: 18px;
  }

  .module-official-mark {
    height: 90px !important;
  }

  .module-official-mark img {
    width: 68px !important;
    height: 68px !important;
  }

  .module-bottom {
    padding-bottom: 20px !important;
  }

  .module-bottom h3 {
    font-size: 36px !important;
  }

  .module-bottom p {
    margin-bottom: 18px;
  }

}


/* ========== 11 / Animated module hero backgrounds ========== */

.module-hero {
  isolation: isolate;
}

.module-hero .wrap {
  z-index: 3;
}

.module-hero-grid,
.module-hero-streams,
.janus-cortex {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.module-hero-grid {
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size: 88px 88px,88px 88px;
  mask-image: linear-gradient(90deg,transparent 5%,rgba(0,0,0,.45) 34%,rgba(0,0,0,.9) 70%,transparent 100%);
  opacity: .3;
  animation: gridDrift 22s linear infinite;
}

.module-hero-streams {
  overflow: hidden;
}

.module-hero-streams .stream {
  position: absolute;
  display: block;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.85),rgba(175,175,175,.65),transparent);
  filter: drop-shadow(0 0 10px rgba(255,255,255,.18));
  opacity: .72;
}

.module-hero-streams .stream::before,
.module-hero-streams .stream::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255,255,255,.72);
}

.module-hero-streams .stream::before {
  left: 18%;
  width: 5px;
  height: 5px;
  box-shadow: 0 0 12px rgba(255,255,255,.28);
}

.module-hero-streams .stream::after {
  right: 12%;
  width: 3px;
  height: 3px;
  background: rgba(192,192,192,.72);
}

.stream-1 {
  width: 42%;
  right: 7%;
  top: 21%;
  transform: rotate(-8deg);
  animation: streamFloatA 12s ease-in-out infinite;
}

.stream-2 {
  width: 36%;
  right: 0;
  top: 36%;
  transform: rotate(6deg);
  animation: streamFloatB 10s ease-in-out infinite;
}

.stream-3 {
  width: 48%;
  right: 4%;
  top: 57%;
  transform: rotate(-10deg);
  animation: streamFloatC 14s ease-in-out infinite;
}

.stream-4 {
  width: 28%;
  right: 15%;
  top: 72%;
  transform: rotate(4deg);
  animation: streamFloatD 9s ease-in-out infinite;
}

.stream-data {
  position: absolute;
  font: 500 9px var(--mono);
  letter-spacing: .22em;
  color: rgba(232,232,232,.5);
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  animation: dataDrift 10s ease-in-out infinite;
}

.data-1 {
  top: 18%;
  right: 31%;
  animation-delay: -1s;
}

.data-2 {
  top: 43%;
  right: 18%;
  animation-delay: -4s;
}

.data-3 {
  top: 63%;
  right: 36%;
  animation-delay: -2s;
}

.data-4 {
  top: 78%;
  right: 20%;
  animation-delay: -6s;
}

.module-apex .stream-data::before,
.module-onyx .stream-data::before,
.module-pulse .stream-data::before,
.module-janus .stream-data::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 8px;
  background: rgba(255,255,255,.56);
  box-shadow: 0 0 12px rgba(255,255,255,.16);
}

.module-apex .stream-1 {
  width: 46%;
  top: 23%;
}

.module-apex .stream-2 {
  width: 34%;
  top: 41%;
}

.module-apex .stream-3 {
  width: 44%;
  top: 63%;
}

.module-apex .stream-data.data-1 {
  content: "PIPELINE";
}

.module-onyx .stream-1 {
  top: 19%;
  transform: rotate(-5deg);
}

.module-onyx .stream-2 {
  top: 33%;
  width: 39%;
  transform: rotate(8deg);
}

.module-onyx .stream-3 {
  top: 55%;
  width: 52%;
  transform: rotate(-13deg);
}

.module-onyx .stream-4 {
  top: 77%;
  width: 31%;
}

.module-pulse .stream-1 {
  top: 24%;
  width: 32%;
  transform: rotate(-14deg);
}

.module-pulse .stream-2 {
  top: 40%;
  width: 43%;
  transform: rotate(9deg);
}

.module-pulse .stream-3 {
  top: 58%;
  width: 37%;
  transform: rotate(-6deg);
}

.module-pulse .stream-4 {
  top: 73%;
  width: 46%;
  transform: rotate(12deg);
}

.module-pulse .stream::before {
  left: 12%;
}

.module-pulse .stream::after {
  right: 18%;
}

.janus-cortex {
  right: -2%;
  left: auto;
  width: min(48vw,680px);
  height: 100%;
  z-index: 1;
}

.cortex-ring {
  position: absolute;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  box-shadow: inset 0 0 45px rgba(255,255,255,.02);
}

.ring-1 {
  width: 420px;
  height: 420px;
  right: 6%;
  top: 14%;
  animation: ringPulse 9s ease-in-out infinite;
}

.ring-2 {
  width: 310px;
  height: 310px;
  right: 14%;
  top: 22%;
  animation: ringPulse 9s ease-in-out infinite -2s;
}

.ring-3 {
  width: 190px;
  height: 190px;
  right: 23%;
  top: 31%;
  animation: ringPulse 9s ease-in-out infinite -4s;
}

.thinking-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform-origin: left center;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.18));
}

.tl-1 {
  width: 180px;
  right: 39%;
  top: 39%;
  transform: rotate(-18deg);
  animation: thinkSweep 5.6s ease-in-out infinite;
}

.tl-2 {
  width: 126px;
  right: 30%;
  top: 48%;
  transform: rotate(14deg);
  animation: thinkSweep 6.2s ease-in-out infinite -1.3s;
}

.tl-3 {
  width: 210px;
  right: 20%;
  top: 55%;
  transform: rotate(-10deg);
  animation: thinkSweep 7s ease-in-out infinite -.8s;
}

.tl-4 {
  width: 138px;
  right: 36%;
  top: 63%;
  transform: rotate(22deg);
  animation: thinkSweep 5.2s ease-in-out infinite -2.2s;
}

.janus-node-cluster {
  position: absolute;
  right: 15%;
  top: 28%;
  width: 300px;
  height: 300px;
}

.jn-node {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 16px rgba(255,255,255,.25);
  opacity: .82;
  animation: nodeBlink 4.4s ease-in-out infinite;
}

.jn-node::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
}

.jn-1 {
  left: 22%;
  top: 21%;
  animation-delay: -.2s;
}

.jn-2 {
  left: 62%;
  top: 16%;
  animation-delay: -1.4s;
}

.jn-3 {
  left: 74%;
  top: 52%;
  animation-delay: -2.1s;
}

.jn-4 {
  left: 35%;
  top: 64%;
  animation-delay: -3.2s;
}

.jn-5 {
  left: 54%;
  top: 42%;
  animation-delay: -.9s;
}

.janus-readouts {
  position: absolute;
  right: 8%;
  bottom: 18%;
  display: grid;
  gap: 10px;
}

.janus-readouts span {
  font: 500 9px var(--mono);
  letter-spacing: .21em;
  color: rgba(242,242,242,.5);
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(10px);
  animation: dataDrift 9s ease-in-out infinite;
}

.janus-readouts span:nth-child(2) {
  animation-delay: -2s;
}

.janus-readouts span:nth-child(3) {
  animation-delay: -4s;
}

.subpage-hero .subpage-module-emblem,
.subpage-hero .subpage-back,
.subpage-hero .subpage-label,
.subpage-hero .display-title,
.subpage-hero .sublead,
.subpage-hero .underlined-link {
  position: relative;
  z-index: 3;
}

body.light-theme .module-hero-grid {
  background-image: linear-gradient(rgba(18,18,18,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(18,18,18,.05) 1px,transparent 1px);
  opacity: .45;
}

body.light-theme .module-hero-streams .stream {
  background: linear-gradient(90deg,transparent,rgba(15,15,15,.55),rgba(125,125,125,.55),transparent);
  filter: drop-shadow(0 0 10px rgba(0,0,0,.06));
}

body.light-theme .module-hero-streams .stream::before {
  background: rgba(18,18,18,.42);
  box-shadow: 0 0 10px rgba(0,0,0,.08);
}

body.light-theme .module-hero-streams .stream::after {
  background: rgba(92,92,92,.42);
}

body.light-theme .stream-data,
body.light-theme .janus-readouts span {
  color: rgba(45,45,45,.48);
  background: rgba(255,255,255,.48);
  border-color: rgba(18,18,18,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

body.light-theme .module-apex .stream-data::before,
body.light-theme .module-onyx .stream-data::before,
body.light-theme .module-pulse .stream-data::before,
body.light-theme .module-janus .stream-data::before {
  background: rgba(18,18,18,.42);
  box-shadow: none;
}

body.light-theme .cortex-ring {
  border-color: rgba(18,18,18,.08);
  box-shadow: inset 0 0 35px rgba(0,0,0,.02);
}

body.light-theme .thinking-line {
  background: linear-gradient(90deg,transparent,rgba(18,18,18,.6),transparent);
  filter: none;
}

body.light-theme .jn-node {
  background: rgba(18,18,18,.7);
  box-shadow: 0 0 12px rgba(0,0,0,.08);
}

body.light-theme .jn-node::after {
  border-color: rgba(18,18,18,.1);
}

@keyframes gridDrift {
  0% {
    transform: translate3d(0,0,0);
  }

  50% {
    transform: translate3d(-18px,10px,0);
  }

  100% {
    transform: translate3d(0,0,0);
  }

}

@keyframes streamFloatA {
  0%,
100% {
    transform: translateX(0) rotate(-8deg);
    opacity: .58;
  }

  50% {
    transform: translateX(-18px) rotate(-6deg);
    opacity: .92;
  }

}

@keyframes streamFloatB {
  0%,
100% {
    transform: translateX(0) rotate(6deg);
    opacity: .52;
  }

  50% {
    transform: translateX(-28px) rotate(9deg);
    opacity: .88;
  }

}

@keyframes streamFloatC {
  0%,
100% {
    transform: translateX(0) rotate(-10deg);
    opacity: .5;
  }

  50% {
    transform: translateX(-22px) rotate(-7deg);
    opacity: .84;
  }

}

@keyframes streamFloatD {
  0%,
100% {
    transform: translateX(0) rotate(4deg);
    opacity: .48;
  }

  50% {
    transform: translateX(-14px) rotate(7deg);
    opacity: .82;
  }

}

@keyframes dataDrift {
  0%,
100% {
    transform: translateY(0);
    opacity: .58;
  }

  50% {
    transform: translateY(-10px);
    opacity: .95;
  }

}

@keyframes ringPulse {
  0%,
100% {
    transform: scale(1);
    opacity: .32;
  }

  50% {
    transform: scale(1.04);
    opacity: .62;
  }

}

@keyframes thinkSweep {
  0%,
100% {
    opacity: .25;
    transform-origin: left center;
  }

  50% {
    opacity: .96;
  }

}

@keyframes nodeBlink {
  0%,
100% {
    opacity: .44;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.14);
  }

}

@media (max-width:1100px) {
  .module-hero-grid {
    background-size: 70px 70px,70px 70px;
  }

  .stream-data {
    font-size: 8px;
    padding: 7px 9px;
  }

  .janus-cortex {
    width: min(56vw,520px);
  }

  .ring-1 {
    width: 320px;
    height: 320px;
  }

  .ring-2 {
    width: 240px;
    height: 240px;
  }

  .ring-3 {
    width: 150px;
    height: 150px;
  }

  .janus-node-cluster {
    width: 220px;
    height: 220px;
    right: 12%;
  }

  .janus-readouts {
    bottom: 12%;
    right: 4%;
  }

}

@media (max-width:760px) {
  .module-hero-grid,
.module-hero-streams,
.janus-cortex {
    opacity: .55;
  }

  .module-hero-streams .stream {
    width: 55% !important;
  }

  .stream-data {
    display: none;
  }

  .janus-readouts {
    display: none;
  }

  .ring-1 {
    width: 220px;
    height: 220px;
    right: -2%;
    top: 22%;
  }

  .ring-2 {
    width: 165px;
    height: 165px;
    right: 8%;
    top: 30%;
  }

  .ring-3 {
    width: 110px;
    height: 110px;
    right: 18%;
    top: 38%;
  }

  .thinking-line {
    opacity: .6;
  }

  .tl-1 {
    width: 110px;
  }

  .tl-2 {
    width: 90px;
  }

  .tl-3 {
    width: 120px;
  }

  .tl-4 {
    width: 92px;
  }

}

@media (max-width:560px) {
  .module-hero-grid,
.module-hero-streams,
.janus-cortex {
    opacity: .42;
  }

  .module-hero-streams .stream {
    display: none;
  }

  .module-hero-grid {
    mask-image: none;
  }

  .ring-1 {
    right: -10%;
    top: 30%;
  }

  .subpage-module-emblem img {
    width: 78px;
    height: 82px;
  }

}


/* ========== 12 / Official uploaded Sphaera wordmark sizing ========== */

.brand-logo {
  width: clamp(155px,13vw,192px) !important;
  max-width: 192px !important;
  max-height: 58px !important;
  height: auto !important;
  object-fit: contain;
  object-position: left center;
}

@media (max-width:680px) {
  .brand-logo {
    width: 142px !important;
    max-width: 142px !important;
    max-height: 48px !important;
  }

}


/* ========== 13 / Primary login action replacing the day / night theme switch ========== */

.header-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  white-space: nowrap;
  padding: 13px 21px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  background: #F0EFEA;
  color: #0B0B0B;
  font: 700 11px var(--mono);
  letter-spacing: .1em;
  box-shadow: 0 8px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.68);
  transition: background .2s,transform .2s,box-shadow .2s;
}

.header-login:hover,
.header-login:focus-visible {
  background: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
  outline-offset: 3px;
}

.header-login span {
  font-size: 15px;
  line-height: 1;
}

@media (max-width:960px) {
  .header-login {
    margin-left: auto;
    padding: 11px 16px;
    order: 2;
  }

}

@media (max-width:530px) {
  .header-login {
    padding: 10px 13px;
    font-size: 10px;
    gap: 6px;
  }

}


/* ========== 14 / Application of interest presentation ========== */

.application-notice {
  margin: 0 0 28px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.19);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(12px);
  color: #d0d0d0;
  font: 400 14px/1.8 'Monda',Arial,sans-serif;
  max-width: 870px;
}


/* ========== 15 / Original-site inspired yellow accents and paired header actions ========== */

:root {
  --sphaera-yellow: #FEF991;
}

.site-header .header-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.site-header .header-login,
.site-header .header-apply {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 43px;
  min-width: 128px;
  padding: 0 17px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  font: 700 10px var(--mono) !important;
  letter-spacing: .065em !important;
  text-align: center;
  white-space: nowrap;
  gap: 10px;
  margin: 0 !important;
  order: initial !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
  transition: background .22s,color .22s,border-color .22s,transform .22s,box-shadow .22s;
}

.site-header .header-apply {
  background: var(--sphaera-yellow) !important;
  color: #0B0B0B !important;
  border-color: var(--sphaera-yellow) !important;
}

.site-header .header-login {
  background: #F0EFEA !important;
  color: #0B0B0B !important;
}

.site-header .header-actions a span {
  color: inherit !important;
  font-size: 14px;
  line-height: 1;
}

.site-header .header-apply:hover,
.site-header .header-apply:focus-visible {
  background: #FEF991 !important;
  border-color: #FEF991 !important;
  color: #0B0B0B !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 29px rgba(254,249,145,.25);
}

.site-header .header-login:hover,
.site-header .header-login:focus-visible {
  background: var(--sphaera-yellow) !important;
  border-color: var(--sphaera-yellow) !important;
  color: #0B0B0B !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 29px rgba(254,249,145,.2);
}

.nav>a:not(.nav-cta):hover,
.nav>a:not(.nav-cta):focus-visible,
.footer a:hover,
.footer a:focus-visible,
.footer-links a:hover,
.footer-links a:focus-visible,
.underlined-link:hover,
.underlined-link:focus-visible,
.button-text:hover,
.button-text:focus-visible,
.subpage-back:hover,
.subpage-back:focus-visible,
.subpage-next a:hover,
.subpage-next a:focus-visible,
.card-link:hover,
.insight-card:hover b,
.back-top:hover,
.back-top:focus-visible,
.corporate-footer a:hover,
.corporate-footer a:focus-visible {
  color: var(--sphaera-yellow) !important;
  opacity: 1 !important;
}

.nav>a:not(.nav-cta):hover,
.nav>a:not(.nav-cta):focus-visible {
  text-shadow: 0 0 15px rgba(254,249,145,.12);
}

.underlined-link:hover,
.underlined-link:focus-visible {
  border-bottom-color: var(--sphaera-yellow) !important;
}

.button-primary:hover,
.button-primary:focus-visible,
.lead-form button[type=submit]:hover,
.lead-form button[type=submit]:focus-visible,
.email-inline button:hover,
.email-inline button:focus-visible {
  background: var(--sphaera-yellow) !important;
  border-color: var(--sphaera-yellow) !important;
  color: #0B0B0B !important;
}

.module-card:hover,
.module-card:focus-visible,
.insight-card:hover,
.insight-card:focus-visible {
  border-color: rgba(254,249,145,.68) !important;
}

.signal-tab:hover,
.signal-tab:focus-visible {
  border-left-color: var(--sphaera-yellow) !important;
  color: var(--sphaera-yellow) !important;
}

.read-more:hover,
.read-more:focus-visible {
  color: var(--sphaera-yellow) !important;
  border-color: var(--sphaera-yellow) !important;
}

@media (max-width:1280px) {
  .site-header .header-actions {
    gap: 7px;
  }

  .site-header .header-login,
.site-header .header-apply {
    height: 39px;
    min-width: 106px;
    padding: 0 11px !important;
    font-size: 9px !important;
    gap: 6px !important;
  }

}

@media (max-width:960px) {
  .site-header .header-actions {
    margin-left: auto;
    order: 2;
  }

  .site-header .header-login,
.site-header .header-apply {
    min-width: 104px;
    height: 39px;
  }

  .menu-toggle {
    order: 3;
  }

}

@media (max-width:530px) {
  .site-header {
    gap: 8px !important;
  }

  .site-header .brand-logo {
    max-width: 112px !important;
  }

  .site-header .header-actions {
    gap: 5px;
  }

  .site-header .header-login,
.site-header .header-apply {
    font-size: 8px !important;
    height: 35px;
    min-width: 70px;
    padding: 0 8px !important;
    gap: 3px !important;
  }

  .site-header .header-actions a span {
    display: none;
  }

}


/* ========== 16 / Exact brand interaction accent, visible on hover and keyboard focus only ========== */

:root {
  --sphaera-yellow: #FEF991;
}

.site-header .header-apply,
.site-header .header-login {
  background: #F0EFEA !important;
  color: #0B0B0B !important;
  border-color: rgba(255,255,255,.55) !important;
}

.site-header .header-apply:hover,.site-header .header-apply:focus-visible,
.site-header .header-login:hover,.site-header .header-login:focus-visible {
  background: #FEF991 !important;
  border-color: #FEF991 !important;
  color: #0B0B0B !important;
  box-shadow: 0 10px 29px rgba(254,249,145,.22) !important;
}

a:hover,
a:focus-visible {
  color: #FEF991;
}

button:hover,
button:focus-visible {
  border-color: #FEF991;
}

.button-primary:hover,.button-primary:focus-visible,
.lead-form button[type=submit]:hover,.lead-form button[type=submit]:focus-visible,
.email-inline button:hover,.email-inline button:focus-visible {
  background: #FEF991 !important;
  border-color: #FEF991 !important;
  color: #0B0B0B !important;
}

.module-card:hover .card-link,.module-card:focus-visible .card-link,
.module-card:hover .module-bottom h3,.module-card:focus-visible .module-bottom h3,
.insight-card:hover b,.insight-card:focus-visible b,
.subpage-next a:hover,.subpage-next a:focus-visible,
.read-more:hover,.read-more:focus-visible,
.signal-tab:hover,.signal-tab:focus-visible,
.nav a:hover,.nav a:focus-visible {
  color: #FEF991 !important;
}


/* ========== 17 / Header action labels retain legible dark ink against the pale-yellow hover surface. ========== */

.site-header .header-actions a:hover,
.site-header .header-actions a:focus-visible {
  color: #0B0B0B !important;
}


/* =======================================================================
   18 / Intelligence in Motion
   Preserve the original look; only outbound moving dots turn yellow.
   ======================================================================= */
:root {
  --sphaera-data-yellow: #FEF991;
}

.flow-pulses path {
  stroke-dasharray: 16 900;
  stroke-dashoffset: 916;
  animation: stream-pulse 5s linear infinite;
}

.flow-pulses path:nth-child(2) {
  animation-delay: -1.75s;
}

.flow-pulses path:nth-child(3) {
  animation-delay: -3.5s;
}

.flow-pulses-out path {
  stroke: var(--sphaera-data-yellow);
  filter: drop-shadow(0 0 5px rgba(254,249,145,.24));
}

/* The original white processing core pulses. Yellow is reserved for outgoing packets. */
.flow-core-halo {
  fill: var(--white);
  opacity: 0.07;
  transform-box: fill-box;
  transform-origin: center;
  animation: sphaera-core-breathe 2.6s ease-in-out infinite;
}

.flow-core-wave {
  fill: none;
  stroke: var(--white);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: sphaera-core-wave 2.6s ease-out infinite;
}

@keyframes sphaera-core-breathe {
  0%,
100% { transform: scale(0.9); opacity: 0.05; }
  50% { transform: scale(1.28); opacity: 0.15; }
}

@keyframes sphaera-core-wave {
  0% { transform: scale(0.8); opacity: 0.65; }
  100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-pulses path, .flow-nodes circle,
  .flow-core-halo, .flow-core-wave {
    animation: none !important;
    transition: none !important;
  }
}



/* =====================================================================
   19 / Floating login shortcut
   Compact square, separate from and aligned with the header navigation.
   ===================================================================== */
.floating-login {
  position: fixed;
  z-index: 1100;
  top: 31px;
  right: 28px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 2px;
  color: #f0efea;
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font: 600 13px var(--mono);
  line-height: 1;
  text-decoration: none;
  transition: background .22s ease, color .22s ease,
              border-color .22s ease, box-shadow .22s ease;
}

.floating-login span {
  font-size: 11px;
  line-height: 1;
}

.floating-login:hover,
.floating-login:focus-visible {
  background: #FEF991;
  border-color: #FEF991;
  color: #0b0b0b;
  box-shadow: 0 8px 24px rgba(254, 249, 145, .18);
  outline-offset: 4px;
}

/* Reserve room for the separate floating shortcut. */
.site-header,
.site-header.scrolled {
  left: calc(50% - 38px) !important;
  width: min(calc(100% - 150px), 1320px) !important;
}

@media (max-width: 1250px) {
  .site-header,
  .site-header.scrolled {
    width: calc(100% - 150px) !important;
  }
}

@media (max-width: 960px) {
  .site-header,
  .site-header.scrolled {
    left: 12px !important;
    transform: none !important;
    width: calc(100% - 84px) !important;
  }

  .floating-login {
    top: 21px;
    right: 15px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 530px) {
  .site-header,
  .site-header.scrolled {
    width: calc(100% - 76px) !important;
    padding-inline: 10px !important;
    gap: 4px !important;
  }

  .site-header .brand-logo {
    max-width: 100px !important;
  }

  .floating-login {
    top: 21px;
    right: 10px;
    width: 42px;
    height: 42px;
    font-size: 12px;
  }
}

/* =======================================================================
   19 / Janus intelligence workspace, rounded-edge containment
   Keep the top header, side panels, and bottom strip inside the outer
   rounded frame at all viewport widths.
   ======================================================================= */
.console {
  overflow: hidden;
  isolation: isolate;
}

/* ======================================================================
   20 / Responsive refinements and colour founder photograph
   Keep each component contained at mobile, tablet and desktop widths.
   ====================================================================== */
.founder-photo-frame img {
  filter: none;
}

/* Prevent long content from stretching its grid column. */
.intro-grid > *,
.founder-layout > *,
.module-grid > *,
.console > *,
.contact-content > * {
  min-width: 0;
}

/* Respect keyboard users and the approved highlight colour. */
:focus-visible {
  outline: 2px solid #FEF991;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .founder-photo-frame {
    width: 100%;
    max-width: 100%;
  }

  .founder-photo-frame img {
    object-position: center 26%;
  }

  .flow-svg {
    max-width: 100%;
  }

  .data-field {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}


/* ======================================================================
   MODULES / Scrollable feature libraries
   Horizontal scroll-snap carousel, responsive card widths and controls.
   Shared presentation for Apex, Onyx, Pulse and Janus feature carousels.
   ====================================================================== */

.apex-feature-library {
  margin-top: 72px;
  min-width: 0;
}

.apex-carousel-header,
.apex-carousel-controls,
.apex-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.apex-carousel-header {
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.apex-carousel-kicker {
  color: #f1f1f1;
  font: 500 11px var(--mono);
  letter-spacing: .1em;
  margin: 0 0 9px;
}

.apex-carousel-hint,
.apex-carousel-footer,
.apex-capability-note {
  color: #a3a3a3;
  font: 400 11px/1.7 var(--mono);
}

.apex-carousel-hint {
  margin: 0;
}

.apex-carousel-controls {
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 9px;
}

.apex-carousel-counter {
  color: #b7b7b7;
  margin-right: 14px;
  font: 500 11px var(--mono);
  font-variant-numeric: tabular-nums;
}

.apex-carousel-arrow {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #f1f1f1;
  background: transparent;
  border: 1px solid #555;
  border-radius: 50%;
  cursor: pointer;
  font: 400 21px/1 var(--font);
  transition: background-color .2s, color .2s, border-color .2s;
}

.apex-carousel-arrow:hover:not(:disabled),
.apex-carousel-arrow:focus-visible {
  color: #111;
  background: #FEF991;
  border-color: #FEF991;
}

.apex-carousel-arrow:focus-visible {
  outline: 2px solid #FEF991;
  outline-offset: 3px;
}

.apex-carousel-arrow:disabled {
  opacity: .28;
  cursor: default;
}

.apex-feature-track {
  display: flex;
  gap: 18px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 2px 15px;
  -webkit-overflow-scrolling: touch;
}

.apex-feature-track::-webkit-scrollbar {
  display: none;
}

.apex-feature-track:focus-visible {
  outline: 2px solid #FEF991;
  outline-offset: 3px;
}

.apex-feature-card {
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 0;
  min-height: 315px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  border-radius: 24px;
  padding: 35px;
  box-sizing: border-box;
  background: linear-gradient(150deg, #212121, #181818);
  border: 1px solid #404040;
}

.apex-feature-card h3 {
  margin-top: auto;
  margin-bottom: 18px;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.35;
}

.apex-feature-card p {
  margin: 0;
  min-height: 84px;
  line-height: 1.75;
  font-size: 14px;
}

.apex-carousel-footer {
  margin-top: 7px;
  letter-spacing: .03em;
}

.apex-carousel-progress {
  width: min(380px, 48%);
  height: 2px;
  background: #3c3c3c;
  overflow: hidden;
}

.apex-carousel-progress > span {
  display: block;
  width: 18.75%;
  height: 100%;
  background: #f0efea;
  transform-origin: left center;
  transition: width .18s ease;
}

.apex-carousel-chevron {
  margin-left: 5px;
}

.apex-capability-note {
  margin: 24px 0 0;
  max-width: 780px;
  color: #8e8e8e;
}

@media (max-width: 1050px) {
  .apex-feature-card {
    flex-basis: calc((100% - 18px) / 2);
  }
}

@media (max-width: 640px) {
  .apex-feature-library {
    margin-top: 40px;
  }

  .apex-feature-track {
    gap: 12px;
    padding-bottom: 13px;
  }

  .apex-feature-card {
    flex-basis: min(86%, 360px);
    min-height: 315px;
    padding: 27px;
    border-radius: 18px;
  }

  .apex-feature-card h3 {
    margin-top: auto;
    font-size: 23px;
  }

  .apex-feature-card p {
    font-size: 14px;
    min-height: 0;
  }

  .apex-carousel-counter {
    margin-right: 5px;
  }

  .apex-carousel-footer {
    font-size: 9px;
  }

  .apex-carousel-progress {
    width: 38%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apex-carousel-arrow,
  .apex-carousel-progress > span {
    transition: none;
  }
}

/* ======================================================================
   22 / Module feature carousels, matching homepage hover behaviour
   Applied to all cards in Apex, Onyx, Pulse and Janus.
   The default dark card styling remains unchanged.
   ====================================================================== */

.apex-feature-card {
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.apex-feature-card h3,
.apex-feature-card .feature-index {
  transition: color 220ms ease;
}

@media (hover: hover) {
  .apex-feature-card:hover {
    border-color: #FEF991;
    box-shadow: 0 0 0 1px rgba(254, 249, 145, 0.16);
  }

  .apex-feature-card:hover h3,
  .apex-feature-card:hover .feature-index {
    color: #FEF991;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apex-feature-card,
  .apex-feature-card h3,
  .apex-feature-card .feature-index {
    transition: none;
  }
}


/* =====================================================================
   21 / Module hero image motion layers
   Uses the supplied monochrome hero artwork and adds subtle movement so
   each module header feels alive without becoming distracting.
   ===================================================================== */
.module-hero {
  --hero-image: none;
  --hero-focus: center center;
  --hero-scale: 1.08;
  isolation: isolate;
}

.module-hero::before,
.module-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.module-hero::before {
  z-index: 0;
  inset: -6%;
  background-image:
    linear-gradient(90deg,
      rgba(5, 5, 5, .94) 0%,
      rgba(5, 5, 5, .86) 28%,
      rgba(5, 5, 5, .54) 58%,
      rgba(5, 5, 5, .72) 100%),
    radial-gradient(circle at 76% 34%, rgba(255,255,255,.16), transparent 28%),
    var(--hero-image);
  background-size: auto, auto, cover;
  background-repeat: no-repeat;
  background-position: center center, center center, var(--hero-focus);
  filter: saturate(.84) contrast(1.08) brightness(.74);
  transform: translate3d(-1.2%, -0.8%, 0) scale(var(--hero-scale));
  transform-origin: center center;
  opacity: 1;
  will-change: transform, filter;
  animation: heroImageFloat 20s ease-in-out infinite alternate;
}

.module-hero::after {
  z-index: 1;
  inset: -10% -4%;
  background:
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.14), transparent 24%),
    radial-gradient(circle at 70% 62%, rgba(255,255,255,.08), transparent 18%),
    linear-gradient(118deg,
      transparent 0%,
      rgba(255,255,255,.03) 28%,
      rgba(255,255,255,.075) 44%,
      transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18));
  opacity: .92;
  will-change: transform, opacity;
  animation: heroSheen 15s ease-in-out infinite;
}

.module-hero .orb-bg {
  z-index: 1;
  opacity: .75;
}

.module-hero-grid,
.module-hero-streams,
.janus-cortex {
  z-index: 2;
}

.module-apex {
  --hero-image: url("assets/hero-apex.png");
  --hero-focus: 58% center;
  --hero-scale: 1.1;
}

.module-janus {
  --hero-image: url("assets/hero-janus.png");
  --hero-focus: 72% center;
  --hero-scale: 1.12;
}

.module-onyx {
  --hero-image: url("assets/hero-onyx.png");
  --hero-focus: center center;
  --hero-scale: 1.09;
}

.module-pulse {
  --hero-image: url("assets/hero-pulse.png");
  --hero-focus: 56% center;
  --hero-scale: 1.09;
}

@keyframes heroImageFloat {
  0% {
    transform: translate3d(-1.8%, -1.1%, 0) scale(var(--hero-scale)) rotate(-0.8deg);
  }
  50% {
    transform: translate3d(1.3%, 0.4%, 0) scale(var(--hero-scale)) rotate(0.25deg);
  }
  100% {
    transform: translate3d(-0.5%, 1.3%, 0) scale(var(--hero-scale)) rotate(0.9deg);
  }
}

@keyframes heroSheen {
  0% {
    transform: translate3d(-3%, 0, 0) scale(1);
    opacity: .45;
  }
  50% {
    transform: translate3d(2.4%, -1.2%, 0) scale(1.035);
    opacity: .92;
  }
  100% {
    transform: translate3d(4.5%, 1.3%, 0) scale(1.02);
    opacity: .55;
  }
}

@media (max-width: 760px) {
  .module-hero::before {
    inset: -10%;
    filter: saturate(.82) contrast(1.05) brightness(.66);
  }

  .module-hero::after {
    inset: -12% -6%;
    opacity: .72;
  }
}

@media (max-width: 560px) {
  .module-hero::before {
    filter: saturate(.8) contrast(1.02) brightness(.60);
  }

  .module-hero::after {
    opacity: .62;
  }
}


/* =====================================================================
   22 / Infinite keyword ticker, accessibility and compact screens
   ===================================================================== */
@media (max-width: 600px) {
  .ticker-group {
    gap: 20px;
    padding-right: 20px;
  }

  .ticker-track span {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
  }

  .ticker {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}


/* =====================================================================
   23 / Integrated original motion artworks and scroll-aware navigation
   ===================================================================== */

/* Keep the progress line pinned to the browser's very top edge. */
.page-progress,
body.light-theme .page-progress {
  background: #FEF991;
  box-shadow: 0 0 12px rgba(254, 249, 145, 0.28);
}

/* Current section, independent of hover effects. */
.site-header .nav > a.is-active-section,
.site-header .nav > a[aria-current="location"] {
  color: #FEF991 !important;
}

/* A live canvas animation replaces the old floating imagery and overlays. */
.canvas-module-hero {
  background: #080808;
  isolation: isolate;
}

.canvas-module-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5, 5, 5, 0.90) 0%,
    rgba(5, 5, 5, 0.70) 27%,
    rgba(5, 5, 5, 0.36) 51%,
    rgba(5, 5, 5, 0.02) 90%);
  opacity: 1;
}

.canvas-module-hero::after {
  display: none;
}

.canvas-module-hero > .module-canvas-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.canvas-module-hero .module-canvas-frame {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #090909;
  pointer-events: none;
}

.canvas-module-hero > .wrap {
  position: relative;
  z-index: 3;
}

@media (max-width: 760px) {
  .canvas-module-hero::before {
    background: linear-gradient(90deg,
      rgba(5, 5, 5, 0.86),
      rgba(5, 5, 5, 0.58) 55%,
      rgba(5, 5, 5, 0.20));
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-progress {
    transition: none;
  }
}

/* 26 / Homepage supplied signal pipeline visualization, standalone iframe preserves its canvas logic. */
.signal-pipeline-embed {
  margin-top: 54px;
  width: 100%;
  height: clamp(390px, 32vw, 540px);
  border-radius: 28px;
  overflow: hidden;
  background: #0f0f10;
}
.signal-pipeline-embed iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
  background: #0f0f10;
}
@media (max-width: 700px) {
  .signal-pipeline-embed { margin-top: 35px; height: 460px; border-radius: 20px; }
}


/* ========== 17 / Hero demo play button + glass video modal ========== */
.hero-cta-cluster {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hero-video-trigger {
  position: relative;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
  color: #f0efea;
  flex: 0 0 auto;
}

.hero-video-trigger__icon {
  position: relative;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
  margin-left: 3px;
}

.hero-video-trigger:hover,
.hero-video-trigger:focus-visible {
  background: #FEF991;
  border-color: #FEF991;
  color: #0B0B0B;
  box-shadow: 0 8px 24px rgba(254,249,145,.18);
  transform: translateY(-2px);
}

.video-modal[hidden] {
  display: none !important;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
}

.video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4,4,4,.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.video-modal-panel {
  position: relative;
  width: min(940px, calc(100vw - 40px));
  margin: min(8vh, 64px) auto;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(20,20,20,.72), rgba(10,10,10,.84));
  box-shadow: 0 30px 90px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.video-modal-meta {
  padding: 6px 54px 18px 2px;
}

.video-modal-kicker {
  display: inline-block;
  font: 600 10px var(--mono);
  letter-spacing: .24em;
  color: rgba(254,249,145,.88);
  margin-bottom: 8px;
}

.video-modal-meta h2 {
  margin: 0;
  font: 500 clamp(22px, 3vw, 30px)/1.1 var(--sans);
  color: #F2F2F2;
}

.video-modal-player {
  width: 100%;
  display: block;
  border-radius: 20px;
  background: #000;
  aspect-ratio: 16 / 9;
}

.video-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: #F4F4F4;
  font-size: 26px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}

.video-modal-close:hover,
.video-modal-close:focus-visible {
  background: #FEF991;
  border-color: #FEF991;
  color: #0B0B0B;
}

body.video-modal-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .hero-cta-cluster {
    width: 100%;
    flex-wrap: wrap;
  }

  .button-primary {
    min-width: 0;
  }

  .video-modal-panel {
    width: min(100vw - 24px, 940px);
    margin: 18px auto;
    padding: 16px;
    border-radius: 20px;
  }

  .video-modal-meta {
    padding-right: 42px;
    padding-bottom: 14px;
  }
}

@media (max-width: 640px) {
  .hero-cta-cluster {
    align-items: stretch;
    gap: 10px;
  }

  .hero-video-trigger {
    width: 54px;
    height: 54px;
  }

  .button-primary {
    min-width: 0;
    width: calc(100% - 64px);
    gap: 18px;
  }

  .video-modal-meta h2 {
    font-size: 22px;
  }
}


/* Final website: unboxed glass-video playback */
.video-modal-glass {background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; width: min(1040px, calc(100vw - 38px)) !important; margin: min(10vh, 90px) auto !important;}
.video-modal-glass .video-modal-player {border: 0; border-radius: 12px; opacity: .82; background: transparent; filter: saturate(.72) contrast(1.05); box-shadow: 0 24px 80px rgba(0,0,0,.38);}
.video-modal-glass .video-modal-close {top: -52px; right: 0; background: rgba(255,255,255,.065); backdrop-filter: blur(14px); border-radius: 2px;}
.video-modal-backdrop {background: rgba(3,3,3,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);}
.feature-story-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:36px 0 44px;}
.feature-story {padding:clamp(20px,2.5vw,32px);border:1px solid rgba(255,255,255,.14);border-radius:17px;background:rgba(255,255,255,.025);transition:border-color .22s ease,transform .22s ease;}
.feature-story:hover {border-color:#FEF991;transform:translateY(-2px);}
.feature-story-kicker {font:500 10px var(--mono);letter-spacing:.12em;color:#A5A5A5;margin:0 0 27px;}
.feature-story h3 {font:500 clamp(20px,2.25vw,29px)/1.23 var(--sans);color:#F5F5F5;margin:0 0 14px;}
.feature-story p:not(.feature-story-kicker) {font:400 14px/1.75 var(--sans);color:#ACACAC;margin:0;}
.readiness-modal[hidden] {display:none!important;}
.readiness-modal {position:fixed;inset:0;z-index:1700;display:flex;align-items:center;justify-content:center;padding:16px;}
.readiness-backdrop {position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.readiness-panel {position:relative;z-index:1;width:min(730px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:clamp(22px,3.5vw,42px);border:1px solid rgba(255,255,255,.2);border-radius:24px;background:rgba(19,19,19,.96);box-shadow:0 35px 100px rgba(0,0,0,.6);color:#EEE;}
.readiness-kicker {color:#FEF991;letter-spacing:.14em;font:500 10px var(--mono);margin:0 0 18px;}
.readiness-panel h2 {font:500 clamp(28px,4vw,42px)/1.2 var(--sans);margin:0 0 14px;color:#FFF;}
.readiness-description {font:400 14px/1.8 var(--sans);color:#BDBDBD;max-width:610px;margin:0 0 26px;}
.readiness-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.readiness-fields>label,.readiness-fields fieldset {display:flex;flex-direction:column;gap:8px;font:500 10px/1.5 var(--mono);letter-spacing:.06em;color:#CFCFCF;}
.readiness-fields input:not([type=checkbox]),.readiness-fields select {min-width:0;max-width:100%;height:48px;padding:0 12px;border:1px solid #3D3D3D;background:#171717;color:#F5F5F5;border-radius:5px;font:400 13px var(--sans);}
.readiness-fields input:focus-visible,.readiness-fields select:focus-visible {outline:2px solid #FEF991;outline-offset:2px;}
.readiness-fields .readiness-full {grid-column:1/-1;}
.readiness-fields fieldset {padding:0;border:0;margin:0;}
.readiness-fields legend {margin-bottom:11px;}
.readiness-checks {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.readiness-checks label {display:flex;align-items:center;gap:6px;font:400 12px/1.45 var(--sans);color:#C8C8C8;letter-spacing:normal;}
.readiness-checks input {accent-color:#FEF991;}
.readiness-submit {margin-top:25px;padding:17px 20px;display:flex;justify-content:space-between;align-items:center;width:100%;background:#F0EFEA;color:#0B0B0B;border:1px solid #F0EFEA;border-radius:3px;font:600 11px var(--mono);cursor:pointer;}
.readiness-submit:hover,.readiness-submit:focus-visible {background:#FEF991;color:#0B0B0B;border-color:#FEF991;}
.readiness-submit:disabled {opacity:.6;cursor:wait;}
.readiness-fine {font:400 11px/1.6 var(--sans);color:#999;}
.readiness-error {color:#FEF991;font:400 12px/1.6 var(--sans);}
.readiness-success-panel {max-width:530px;}
.readiness-checkmark {display:inline-flex;align-items:center;justify-content:center;width:45px;height:45px;color:#FEF991;border:1px solid #FEF991;border-radius:50%;margin-bottom:26px;}
body.readiness-modal-open {overflow:hidden;}
@media(max-width:750px){.feature-story-grid {grid-template-columns:1fr;}.readiness-fields {grid-template-columns:1fr;}.readiness-checks {grid-template-columns:repeat(2,minmax(0,1fr));}.readiness-panel {max-height:calc(100dvh - 20px);}}

/* Google Fonts appear only after visitor opt-in, otherwise retain system fallbacks. */
.sphaera-consent[hidden]{display:none!important}
.sphaera-consent{position:fixed;z-index:3000;left:18px;right:18px;bottom:18px;max-width:1120px;margin:auto;box-sizing:border-box;padding:20px 24px;border:1px solid rgba(255,255,255,.2);background:rgba(15,15,15,.96);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 16px 50px rgba(0,0,0,.55);color:#f0f0f0;font-family:Arial,Helvetica,sans-serif}
.sphaera-consent-content{display:flex;align-items:center;justify-content:space-between;gap:24px}
.sphaera-consent-text{max-width:670px}
.sphaera-consent-text strong{font-size:11px;letter-spacing:.1em}
.sphaera-consent-text p{font-size:12px;line-height:1.7;color:#bdbdbd;margin:8px 0 0}
.sphaera-consent-text a{color:#e6e6e6;text-decoration:underline}
.sphaera-consent-actions{display:flex;gap:10px;flex-shrink:0}
.sphaera-consent button{padding:13px 14px;min-height:42px;cursor:pointer;border-radius:2px;font:600 10px Arial,Helvetica,sans-serif;letter-spacing:.03em;transition:background .2s,border-color .2s,color .2s}
.sphaera-consent-decline{border:1px solid rgba(255,255,255,.3);background:transparent;color:#f4f4f4}
.sphaera-consent-accept{border:1px solid #eee;background:#eee;color:#111}
.sphaera-consent button:hover,.sphaera-consent button:focus-visible{border-color:#FEF991;background:#FEF991;color:#090909}
.font-consent-link{cursor:pointer}
@media(max-width:800px){.sphaera-consent{left:10px;right:10px;bottom:10px;padding:16px}.sphaera-consent-content{flex-direction:column;align-items:stretch;gap:16px}.sphaera-consent-actions{flex-wrap:wrap}.sphaera-consent-actions button{flex:1}}

/* Compact privacy consent, links to full legal notices. */
.sphaera-consent{max-width:820px;padding:14px 20px;border-color:rgba(255,255,255,.14)}
.sphaera-consent-content{position:relative;gap:26px;padding-right:26px}
.sphaera-consent-text strong{font-size:10px;letter-spacing:.12em}
.sphaera-consent-text p{font-size:12px;margin:4px 0 0;line-height:1.55}
.sphaera-consent-text a:hover,.sphaera-consent-text a:focus-visible{color:#FEF991}
.sphaera-consent-accept{min-width:100px}
.sphaera-consent-dismiss{position:absolute;right:-10px;top:-10px!important;background:transparent!important;border:0!important;color:#aaa!important;font:20px Arial,sans-serif!important;padding:4px!important;min-height:26px!important;width:26px!important}
.sphaera-consent-dismiss:hover,.sphaera-consent-dismiss:focus-visible{color:#FEF991!important}
@media(max-width:800px){.sphaera-consent-content{flex-direction:row;align-items:center;gap:12px}.sphaera-consent{padding:14px}.sphaera-consent-text p{font-size:11px}.sphaera-consent-actions{flex:0 0 auto}.sphaera-consent-actions button{min-width:76px;padding:10px}}
@media(max-width:480px){.sphaera-consent-content{align-items:flex-end;gap:9px}.sphaera-consent-text strong{font-size:9px}.sphaera-consent-accept{min-width:64px!important}.sphaera-consent-dismiss{right:-12px;top:-12px!important}}

/* Simple non-dismissible terms acknowledgement */
.sphaera-consent {max-width:850px; padding:13px 17px;}
.sphaera-consent-content {padding:0; display:flex; align-items:center; justify-content:space-between; gap:22px;}
.sphaera-consent-text {margin:0; max-width:none; color:#d4d4d4; font:400 12px/1.65 var(--sans);}
.sphaera-consent-text a {color:#f0f0f0; text-decoration:underline; text-underline-offset:3px;}
.sphaera-consent-accept {min-width:104px; padding:12px 20px; flex:0 0 auto; border:1px solid #eee; background:#eee; color:#111; cursor:pointer; font:600 11px var(--mono); border-radius:2px;}
.sphaera-consent-accept:hover,.sphaera-consent-accept:focus-visible {background:#FEF991; border-color:#FEF991; color:#111;}
@media (max-width:640px){.sphaera-consent-content {flex-direction:column; align-items:stretch; gap:10px;}.sphaera-consent-accept{width:100%;}.sphaera-consent-text{font-size:11px;}}

/* Keep the glass-video trigger and its adjacent hero CTA exactly equal height. */
.hero-cta-cluster { align-items: stretch; }
.hero-cta-cluster .hero-video-trigger {
  box-sizing: border-box;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  min-height: 56px;
  border-radius: 2px;
}
.hero-cta-cluster .button-primary {
  box-sizing: border-box;
  height: 56px;
  min-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  align-self: stretch;
}
@media (max-width: 640px) {
  .hero-cta-cluster .hero-video-trigger {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    min-height: 54px;
  }
  .hero-cta-cluster .button-primary {
    height: 54px;
    min-height: 54px;
  }
}

/* Consistent Sphaera yellow for the small editorial section headers across all pages. */
.section-kicker,
.section-kicker > span,
.subpage-label,
.feature-index,
.light-theme .section-kicker,
.light-theme .section-kicker > span,
.light-theme .subpage-label,
.light-theme .feature-index {
  color: #FEF991 !important;
}
.section-kicker::before {
  background: #FEF991 !important;
}

/* Enterprise Foundation orbital diagram, permanent brand-yellow accents. */
.architecture-diagram .data-orbit::after {
  background: #FEF991 !important;
  box-shadow: 0 0 8px rgba(254,249,145,.9), 0 0 24px rgba(254,249,145,.45) !important;
}
.architecture-diagram .arch-dot {
  border-color: #FEF991 !important;
}

/* Keep the shared Technology hero image visible across subpages. */
.subpage-hero .orb-bg { opacity: 1; }


/* ========== 24 / Mobile navigation dropdown fix ==========
   The base mobile rule sets `inset: 0`; the ≤960px dropdown rule moved `top` below the
   header but left `bottom: 0`, collapsing the panel to ~0px height. Its centred column
   then overflowed upward over the header pill. Give the panel its own height. */
@media (max-width:960px) {
  .site-header .nav {
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100svh - 110px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 10px !important;
    background: rgba(14,14,14,.985) !important;
  }

  .light-theme .site-header .nav {
    background: rgba(248,248,248,.985) !important;
  }

  .site-header .nav > a {
    display: block;
    width: 100%;
    padding: 13px 12px !important;
    border-radius: 12px;
    font-size: 12px !important;
    letter-spacing: .06em;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }

  .site-header .nav > a:active {
    background: rgba(255,255,255,.08);
  }

  .light-theme .site-header .nav > a:active {
    background: rgba(0,0,0,.06);
  }
}

html {
  -webkit-tap-highlight-color: transparent;
}