/* PPmini — an original, lightweight public product experience. */

:root {
  --bg: #070b12;
  --text: #eff6fa;
  --muted: #99a9b9;
  --line: rgba(157,190,211,.14);
  --mint: #78f4ca;
  --purple: #a89aff;
  --panel: #101720;
  --font-display: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

html {
  scroll-padding-top: 110px
}

body {
  background: #070b12;
  font-size: 16px;
  line-height: 1.65
}

body::before {
  position: absolute;
  height: 1150px;
  background: radial-gradient(ellipse at 28% 18%,#13283760,transparent 55%),radial-gradient(ellipse at 78% 40%,#45247d26,transparent 48%);
  mask-image: none;
  z-index: -1
}

.shell {
  width: min(1320px,calc(100% - 64px));
  padding: 24px 0 30px
}

.hidden {
  display: none!important
}

button,a {
  -webkit-tap-highlight-color: transparent
}

button:focus-visible,a:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 5px
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  transform: translateY(-150%);
  background: var(--mint);
  color: #062c24;
  padding: 10px 20px;
  z-index: 100
}

.skip-link:focus {
  transform: translateY(0)
}

.topbar {
  top: 16px;
  min-height: 74px;
  padding: 12px 20px;
  border-radius: 16px;
  border: 1px solid #b6d3e31c;
  background: #0d141ee6;
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 40px #0003;
  z-index: 30
}

.brand {
  gap: 11px
}

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow: none
}

.brand strong {
  font-size: 24px;
  letter-spacing: -.8px
}

.brand small {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #97a7b7;
  margin-top: 0
}

.nav-actions {
  gap: 26px;
  align-items: center
}

.nav-actions>a {
  font-size: 14px;
  color: #b4c2ce
}

.nav-actions>a:hover {
  color: var(--mint)
}

.nav-actions .nav-primary {
  display: inline-flex;
  background: #79f0cb;
  color: #082c23;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  padding: 9px 19px;
  font-weight: 700;
  white-space: nowrap
}

.nav-actions .nav-primary:hover {
  color: #041b15;
  background: #acffdf
}

.locale-trigger {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 8px 2px;
  color: #bdcbd6;
  font-size: 14px;
  min-height: 40px
}

.locale-menu {
  background: #101a26;
  border: 1px solid #344250;
  max-height: 65vh;
  overflow: auto;
  box-shadow: 0 20px 60px #0008
}

.locale-option {
  font-size: 14px;
  min-height: 44px
}

.locale-option:hover,.locale-option[aria-current=true] {
  background: #1e303c;
  color: var(--mint)
}

.vision-hero {
  position: relative;
  padding-top: 88px;
  isolation: isolate
}

.hero-grid {
  position: absolute;
  inset: -20px -32px auto;
  height: 900px;
  background-image: linear-gradient(#789da00b 1px,transparent 1px),linear-gradient(90deg,#789da00b 1px,transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse at 50% 40%,#000 15%,transparent 66%);
  z-index: -1;
  pointer-events: none
}

.hero-intro {
  text-align: center;
  max-width: 940px;
  margin: auto
}

.eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mint);
  margin: 0 0 17px;
  font-weight: 600
}

.launch-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 1px;
  border: 1px solid #5cc9a832;
  background: #59c2a10c;
  padding: 7px 16px;
  border-radius: 30px;
  margin-bottom: 29px;
  color: #b4e3d3
}

.pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #79f3bf;
  border-radius: 50%;
  box-shadow: 0 0 12px #55efbb80;
  flex-shrink: 0;
  animation: pulse 3.2s ease-in-out infinite
}

.hero-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(48px,5.6vw,82px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -3.8px;
  margin: 0;
  text-wrap: balance
}

.hero-intro h1>span {
  display: block
}

.gradient-text {
  color: #8feddd;
  background: linear-gradient(100deg,#adffd3 15%,#79ddd6 46%,#b19bff 85%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.hero-description {
  max-width: 655px;
  margin: 26px auto 0;
  color: #9eafc0;
  font-size: 18px;
  line-height: 1.85;
  text-wrap: pretty
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 29px;
  flex-wrap: wrap
}

.primary-button,.ghost-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  min-height: 52px;
  padding: 13px 24px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 650;
  transition: transform .25s,background .25s,box-shadow .25s
}

.primary-button {
  background: #80f2ce;
  color: #062e25;
  border: 1px solid #a5ffde;
  box-shadow: 0 4px 22px #37c6aa14
}

.primary-button:hover {
  background: #aeffe4;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px #65e9c528
}

.ghost-button {
  background: #101822;
  border: 1px solid #2c3947;
  color: #d0dde6;
  gap: 11px
}

.ghost-button:hover {
  background: #192530;
  transform: translateY(-2px)
}

.play-icon {
  font-size: 23px;
  font-weight: 400;
  line-height: 1
}

.hero-principles {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 23px 0 0;
  color: #7e93a3;
  font-size: 12px
}

.hero-principles>span {
  display: inline-flex;
  gap: 7px;
  align-items: center
}

.hero-principles i {
  font-style: normal;
  color: #6da697
}

.hero-note {
  font-size: 12px;
  line-height: 1.8;
  max-width: 850px;
  margin: 23px auto 0;
  text-align: center;
  color: #798a9b
}

.experience-terminal {
  position: relative;
  margin-top: 58px;
  border: 1px solid #3a5f634f;
  border-radius: 17px;
  background: #0b111bee;
  box-shadow: 0 0 0 5px #121f2633,0 34px 110px #0007,0 -1px 30px #6defc510;
  overflow: hidden;
  transform-style: preserve-3d
}

.experience-terminal::before {
  content: "";
  position: absolute;
  inset: 0 15% auto;
  height: 1px;
  background: linear-gradient(90deg,transparent,#8ffee38c,transparent);
  pointer-events: none
}

.terminal-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background: #111925;
  border-bottom: 1px solid var(--line)
}

.terminal-brand {
  display: flex;
  gap: 10px;
  align-items: center
}

.terminal-brand img {
  border-radius: 7px
}

.terminal-brand strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px
}

.terminal-brand strong>span {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: #658294;
  margin-inline-start: 6px
}

.terminal-controls {
  display: flex;
  align-items: center;
  gap: 18px
}

.demo-label {
  font-size: 12px;
  color: #aab9c7
}

.motion-toggle {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid #c8dfe418;
  border-radius: 6px;
  background: #0c141c;
  color: #a4bbcb;
  cursor: pointer;
  font-size: 12px;
  min-height: 32px;
  white-space: nowrap
}

.motion-toggle:hover {
  border-color: #73c9af80;
  color: var(--mint)
}

.terminal-layout {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr) 258px
}

.asset-rail {
  border-inline-end: 1px solid var(--line);
  padding: 24px 12px 18px
}

.rail-heading {
  display: block;
  font-size: 10px;
  letter-spacing: 1.3px;
  color: #7b90a1;
  margin: 0 11px 17px
}

.asset-options {
  display: flex;
  flex-direction: column;
  gap: 7px
}

.asset-button {
  display: flex;
  align-items: center;
  text-align: start;
  gap: 10px;
  width: 100%;
  padding: 11px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #afbfcd;
  cursor: pointer;
  transition: background .2s,border-color .2s
}

.asset-button>span:nth-child(2) {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4
}

.asset-button small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #697f91;
  margin-top: 3px
}

.asset-button.is-active {
  border-color: #7ff1c62e;
  background: linear-gradient(100deg,#20493e66,#1132281a);
  color: #dbfff1
}

.asset-button:hover {
  background: #1a2933
}

.coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  flex: none
}

.coin-btc {
  background: #f59a2920;
  color: #eab25c
}

.coin-eth {
  background: #869bde25;
  color: #a1b5fb
}

.coin-bnb {
  background: #e5b62820;
  color: #dfc575
}

.coin-sol {
  background: #896ee320;
  color: #bd91ec
}

.coin-xrp {
  background: #c4d2df15;
  color: #d7e4eb
}

.asset-spark {
  font-size: 12px;
  letter-spacing: -1px;
  color: #428b77;
  margin-inline-start: auto
}

.rail-foot {
  font: 9px ui-monospace,monospace;
  letter-spacing: .5px;
  color: #5f7a8d;
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 29px 9px 0
}

.rail-foot .pulse-dot {
  width: 4px;
  height: 4px
}

.market-stage {
  min-width: 0;
  padding: 24px 24px 22px
}

.market-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px
}

.market-heading .eyebrow {
  font-size: 11px;
  color: #90a5b4;
  letter-spacing: 1px;
  margin: 0 0 4px
}

.market-heading h2 {
  font-size: 21px;
  margin: 0;
  font-weight: 600;
  line-height: 1.6
}

.market-quote {
  color: #5f788a;
  font-size: 14px;
  font-weight: 400
}

.chart-caption {
  font-size: 10px;
  color: #678294;
  text-align: end
}

.chart-wrap {
  position: relative;
  margin-top: 24px;
  direction: ltr;
  overflow: hidden
}

.market-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible
}

.chart-grid {
  stroke: #243e4854;
  stroke-width: .7
}

.chart-bottom {
  display: flex;
  justify-content: space-between;
  font: 10px ui-monospace,monospace;
  color: #557081;
  padding-inline-end: 7%;
  margin-top: 3px
}

.marker-halo {
  transform-origin: center;
  transform-box: fill-box;
  animation: chart-pulse 3s ease-in-out infinite
}

.chart-line-enter {
  animation: line-draw 1.4s cubic-bezier(.2,.7,.3,1)
}

.pipeline-tabs {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 5px;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line)
}

.pipeline-tabs button {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 10px 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #70899b;
  cursor: pointer;
  text-align: center
}

.pipeline-tabs button span {
  font: 10px ui-monospace,monospace;
  color: #486579
}

.pipeline-tabs button strong {
  font-weight: 500;
  font-size: 12px;
  overflow-wrap: anywhere
}

.pipeline-tabs button.is-active {
  border-color: #638c8050;
  background: #19322c60;
  color: #bcfbe3
}

.pipeline-tabs button.is-active span {
  color: #65c7a5
}

.pipeline-tabs button:hover {
  color: var(--mint);
  background: #1b2c34
}

.insight-panel {
  min-width: 0;
  padding: 26px 23px 18px;
  border-inline-start: 1px solid var(--line);
  background: radial-gradient(ellipse at 70% 10%,#43406420,transparent 80%)
}

.insight-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 650
}

.insight-header small {
  display: block;
  font-size: 8px;
  letter-spacing: .8px;
  color: #6d7d91;
  margin-top: 2px;
  font-weight: 400
}

.ai-orbit {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid #8d86c94a;
  border-radius: 50%;
  font-size: 15px;
  color: #c2b9ff;
  background: radial-gradient(circle,#8b70de29,transparent 75%);
  flex: none
}

.ai-orbit::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px dashed #9c8ff337;
  border-radius: 50%;
  animation: orbit 30s linear infinite
}

.insight-kicker {
  font-size: 10px;
  letter-spacing: 1px;
  color: #74809a;
  margin: 31px 0 9px
}

.insight-panel h3 {
  font-size: 21px;
  color: #d9d3ff;
  margin: 0 0 12px;
  line-height: 1.45;
  overflow-wrap: anywhere
}

.insight-panel #stageDescription {
  font-size: 13px;
  line-height: 1.85;
  color: #93a1b5;
  margin: 0;
  min-height: 76px
}

.analysis-lines {
  display: grid;
  gap: 7px;
  margin-top: 19px
}

.analysis-lines span {
  height: 3px;
  width: 86%;
  border-radius: 3px;
  background: linear-gradient(90deg,#69788535,#768db455,#69788515);
  background-size: 200%;
  animation: analyze 4s ease-in-out infinite
}

.analysis-lines span:nth-child(2) {
  width: 67%;
  animation-delay: .4s
}

.analysis-lines span:nth-child(3) {
  width: 76%;
  animation-delay: .8s
}

.insight-boundary {
  margin-top: 22px;
  padding: 12px 10px;
  border: 1px solid #b1ced11a;
  border-radius: 7px;
  display: flex;
  gap: 9px;
  align-items: center;
  background: #14201f3b
}

.boundary-icon {
  font-size: 23px;
  color: #78c4a7
}

.insight-boundary p {
  font-size: 11px;
  line-height: 1.8;
  color: #90a69e;
  margin: 0
}

.insight-step {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 10px ui-monospace,monospace;
  color: #53647c;
  margin-top: 22px
}

.insight-step #stepNumber {
  color: #ac98ed
}

.step-progress {
  height: 2px;
  background: #374253;
  flex: 1;
  margin-inline-start: 12px;
  position: relative
}

.step-progress::after {
  content: "";
  display: block;
  width: 25%;
  height: 100%;
  background: #ab91e8;
  transition: width .35s
}

.experience-terminal[data-step="1"] .step-progress::after {
  width: 50%
}

.experience-terminal[data-step="2"] .step-progress::after {
  width: 75%
}

.experience-terminal[data-step="3"] .step-progress::after {
  width: 100%
}

.terminal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 11px 22px;
  border-top: 1px solid var(--line);
  color: #5d788b;
  font-size: 10px
}

.terminal-footer>span:first-child {
  display: flex;
  gap: 8px;
  align-items: center
}

.terminal-footer>span:last-child {
  font: 9px ui-monospace,monospace;
  letter-spacing: 1px
}

.outline-dot {
  width: 5px;
  height: 5px;
  border: 1px solid #657f8d;
  border-radius: 50%;
  flex: none
}

.asset-coverage {
  padding: 48px 35px 46px;
  border-bottom: 1px solid #c8dce115;
  text-align: center
}

.asset-coverage>span {
  font-size: 12px;
  color: #637d8e;
  letter-spacing: 2px
}

.asset-coverage>div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  max-width: 990px;
  margin: 23px auto 0
}

.asset-coverage b {
  font-size: 25px;
  color: #7e8d9b;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  line-height: 1.2
}

.asset-coverage b span {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px
}

.content-section {
  padding: 0;
  margin-top: 106px;
  background: none;
  border: 0;
  box-shadow: none
}

.section-head {
  max-width: 740px;
  margin: 0 0 38px
}

.section-head h2 {
  font-size: clamp(29px,3.1vw,44px);
  line-height: 1.3;
  letter-spacing: -1.3px;
  margin: 0 0 18px;
  color: #e6eff4;
  text-wrap: balance
}

.section-head>p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.85;
  color: #90a2b2;
  margin: 0;
  max-width: 670px
}

.section-head .eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  color: #6cd2b2
}

.capability-grid.bento-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px
}

.bento-grid article {
  position: relative;
  overflow: hidden;
  border: 1px solid #c8dce119;
  background: #0e1620;
  padding: 29px 30px 0;
  border-radius: 15px;
  min-height: 315px;
  box-shadow: none;
  transition: border-color .3s,background .3s,transform .3s
}

.bento-grid article:hover {
  border-color: #74cebb50;
  transform: translateY(-3px);
  background: #111d26
}

.feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px
}

.feature-number {
  font: 11px ui-monospace,monospace;
  letter-spacing: 1.3px;
  color: #64818f
}

.feature-arrow {
  color: #91a7b0;
  font-size: 20px
}

.bento-grid h3 {
  font-size: 23px;
  margin: 0 0 13px;
  letter-spacing: -.4px;
  color: #dce9ef
}

.bento-grid p {
  font-size: 14px;
  line-height: 1.9;
  color: #8b9eac;
  max-width: 510px;
  margin: 0
}

.data-constellation {
  height: 140px;
  position: relative;
  margin-top: 15px;
  direction: ltr;
  max-width: 540px
}

.data-constellation svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 130px;
  fill: none;
  stroke: #36636580;
  stroke-width: 1
}

.data-constellation .flow-path {
  stroke: #7df0cc;
  stroke-dasharray: 5 70;
  animation: flow 10s linear infinite;
  opacity: .8
}

.data-node {
  position: absolute;
  font: 9px ui-monospace,monospace;
  padding: 6px 9px;
  background: #13292a;
  color: #68b6a8;
  border: 1px solid #82c9b633;
  border-radius: 5px;
  z-index: 1
}

.node-one {
  top: 28px;
  left: 0
}

.node-two {
  top: 12px;
  right: 1%
}

.node-three {
  bottom: 9px;
  right: 4%
}

.data-core {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 60px;
  border: 1px solid #80dcc057;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #172e2e;
  box-shadow: 0 0 35px #65d6b61c;
  color: #cbfae9;
  font-size: 22px;
  font-weight: 700;
  z-index: 2
}

.data-core span {
  font-size: 13px;
  font-weight: 400;
  color: #84baab
}

.risk-visual {
  margin-top: 24px;
  display: grid;
  gap: 16px;
  padding: 0 0 26px;
  direction: ltr
}

.risk-visual>div {
  display: flex;
  align-items: center;
  gap: 14px
}

.risk-visual span:first-child {
  width: 91px;
  font: 9px ui-monospace,monospace;
  letter-spacing: .6px;
  color: #7e859e
}

.risk-track {
  flex: 1;
  height: 5px;
  border-radius: 4px;
  background: #242a3a;
  overflow: hidden
}

.risk-track i {
  display: block;
  background: linear-gradient(90deg,#6f658e,#b29fec);
  width: 42%;
  height: 100%;
  border-radius: 4px
}

.risk-visual>div:nth-child(2) i {
  width: 28%;
  background: linear-gradient(90deg,#4e7e84,#86b9ba)
}

.risk-visual>div:nth-child(3) i {
  width: 0
}

.risk-visual b {
  font: 9px ui-monospace,monospace;
  color: #9c8fc1;
  width: 36px;
  text-align: end
}

.feature-records,.feature-connect {
  min-height: 275px!important
}

.record-visual {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 28px;
  padding: 14px 18px 32px;
  border: 1px solid #254150;
  background: #0b1720;
  border-radius: 8px 8px 0 0;
  direction: ltr;
  overflow: hidden
}

.record-visual>span {
  font: 10px ui-monospace,monospace;
  color: #6c98a8
}

.record-visual>div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 13px;
  background: repeating-linear-gradient(90deg,#37708820 0 18%,transparent 18% 26%)
}

.platform-visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 27px;
  padding-bottom: 26px
}

.platform-visual>span {
  border: 1px solid #324758;
  background: #111f2d;
  padding: 12px 15px;
  border-radius: 9px;
  color: #adc0d1;
  font-size: 14px;
  font-weight: 500;
  min-width: 74px;
  text-align: center
}

.platform-visual i {
  font-style: normal;
  color: #425969;
  font-size: 18px
}

.workflow-section {
  padding: 0;
  background: none;
  border: 0
}

.workflow-line {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 0;
  position: relative;
  overflow: hidden
}

.workflow-line::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,#68d5b575,#807eb755,#1a303a)
}

.workflow-line article {
  padding: 0 30px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: start
}

.workflow-line article>span {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #3c675f;
  border-radius: 13px;
  background: #0d1b22;
  color: #89d9bc;
  font: 15px ui-monospace,monospace;
  margin: 0 0 24px;
  box-shadow: 0 0 0 10px var(--bg)
}

.workflow-line article>strong {
  display: block;
  font-size: 18px;
  color: #d6e4e8;
  margin-bottom: 10px
}

.workflow-line article>p {
  font-size: 14px;
  line-height: 1.9;
  color: #8195a6;
  margin: 0
}

#program {
  border-top: 1px solid #9dbaca17;
  padding-top: 86px
}

.commission-layout {
  gap: 18px
}

.commission-card {
  border: 1px solid #bcd6d31c;
  border-radius: 14px;
  background: #0e1720;
  padding: 25px 28px;
  box-shadow: none
}

.commission-title h3 {
  font-size: 19px;
  line-height: 1.4;
  color: #cfdde6;
  margin: 0 0 10px
}

.commission-title p {
  font-size: 14px;
  color: #8097a9;
  line-height: 1.85
}

.commission-table {
  margin-top: 23px
}

.commission-table th {
  font-size: 12px;
  color: #7c92a1;
  font-weight: 400;
  padding: 12px 0;
  border-color: #c4dbe217
}

.commission-table td {
  font-size: 14px;
  color: #acbecb;
  padding: 14px 0;
  border-color: #c4dbe212
}

.commission-table td:last-child {
  font: 24px var(--font-display);
  font-weight: 500;
  color: #8edabf;
  letter-spacing: -1px
}

.benefit-grid {
  gap: 22px;
  margin-top: 26px
}

.benefit-grid article {
  padding: 22px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid #bbd3db1a
}

.tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .6px;
  border: 1px solid #6ba99a33;
  background: #69a9940d;
  color: #8ebda9;
  padding: 4px 9px;
  border-radius: 5px
}

.benefit-grid h3 {
  font-size: 17px;
  color: #c5d5df;
  margin: 15px 0 9px
}

.benefit-grid p {
  font-size: 14px;
  line-height: 1.85;
  color: #7f93a3
}

.exchange-grid {
  gap: 18px
}

.exchange-grid article {
  background: #0d151e;
  border: 1px solid #98b8c721;
  border-radius: 13px;
  padding: 25px 27px
}

.exchange-grid h3 {
  font-size: 21px;
  margin: 18px 0 15px;
  color: #d4e0e8
}

.exchange-grid ol {
  padding-inline-start: 20px;
  margin: 0;
  color: #8ea1b3;
  font-size: 14px;
  line-height: 1.9
}

.exchange-grid li+li {
  margin-top: 9px
}

.exchange-grid .tag {
  color: #c8d4de;
  background: #b5c9e40a;
  border-color: #92a4bf24
}

.download-section {
  margin-top: 104px;
  position: relative;
  padding: 52px 42px 32px;
  border: 1px solid #61ad9852;
  border-radius: 20px;
  background: radial-gradient(ellipse at 70% 0,#386e7526,transparent 70%),linear-gradient(135deg,#14252c,#101c28 60%,#19192a);
  box-shadow: 0 20px 60px #0003;
  overflow: hidden
}

.download-section .section-head {
  margin-bottom: 18px;
  max-width: 750px
}

.download-section .section-head h2 {
  font-size: 40px
}

.download-section .section-head p:not(.eyebrow) {
  max-width: 750px
}

.platform-hint {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  color: #75a596;
  margin-bottom: 18px
}

.download-grid {
  gap: 12px;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr))
}

.download-card {
  background: #0c19218c;
  border: 1px solid #a0ccc133;
  border-radius: 11px;
  padding: 22px 18px;
  min-height: 143px;
  box-shadow: none;
  text-align: start;
  transition: background .25s,transform .25s,border-color .25s
}

.download-card:not(.info-only):hover {
  background: #21423580;
  transform: translateY(-4px);
  border-color: #a2f5d566
}

.download-card>span {
  color: #9ddecb;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .9px;
  display: inline-block;
  margin-bottom: 12px
}

.download-card>strong {
  font-size: 17px;
  line-height: 1.5;
  display: block;
  overflow-wrap: anywhere;
  color: #e1f0f5
}

.download-card>small {
  font-size: 12px;
  color: #809ba7;
  line-height: 1.8;
  display: block;
  margin-top: 7px
}

.download-card.info-only {
  background: #a1c5ff08;
  cursor: default
}

.download-message {
  min-height: 0;
  font-size: 14px
}

.download-message:empty {
  margin: 0
}

.risk-card {
  margin-top: 64px;
  padding: 25px 0 0;
  border: 0;
  border-top: 1px solid #b3c9d61c;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none
}

.risk-card h2 {
  color: #9dafba;
  font-size: 15px;
  margin: 0 0 12px
}

.risk-card p {
  color: #647d8f;
  font-size: 12px;
  line-height: 1.9;
  margin: 8px 0
}

.site-footer {
  padding: 32px 0 0;
  border-top: 1px solid #b3c9d61c;
  margin-top: 30px;
  color: #627989
}

.site-footer strong {
  color: #b5c7d3;
  font-size: 23px;
  letter-spacing: -.8px
}

.site-footer>div {
  align-items: center;
  gap: 15px
}

.site-footer span,.site-footer p {
  font-size: 11px;
  color: #607587;
  line-height: 1.8
}

.reveal {
  opacity: 1
}

.motion-ready .reveal.is-pending {
  opacity: 0;
  transform: translateY(20px)
}

.motion-ready .reveal {
  transition: opacity .65s ease,transform .65s cubic-bezier(.2,.6,.2,1)
}

.motion-paused *,.motion-paused *::before,.motion-paused *::after {
  animation-play-state: paused!important
}

.motion-paused .reveal {
  opacity: 1!important;
  transform: none!important
}

.experience-terminal.is-offscreen *,.experience-terminal.is-offscreen *::before,.experience-terminal.is-offscreen *::after {
  animation-play-state: paused!important
}

.invite-mode .shell {
  max-width: 1100px
}

.invite-mode .skip-link {
  display: none
}

.invite-mode .register-card {
  border-radius: 20px;
  border-color: #728ca744;
  background: linear-gradient(135deg,#152331,#1e1c31);
  padding: 32px
}

.invite-mode .topbar {
  position: relative;
  top: 0
}

.invite-mode .risk-card {
  margin-top: 30px
}

.invite-mode .download-section {
  margin-top: 30px
}

.invite-mode .register-intro h2 {
  font-size: 32px
}

.invite-mode .register-form input {
  font-size: 16px
}

.invite-mode .primary-button {
  color: #082a24
}

.invite-mode .primary-button:disabled {
  opacity: .4;
  transform: none
}

.invite-mode .country-dialog {
  z-index: 70
}

[dir=rtl] .market-stage,[dir=rtl] .asset-button {
  direction: rtl
}

[dir=rtl] .workflow-line article {
  padding: 0 0 0 30px
}

[dir=rtl] .terminal-brand strong>span {
  direction: ltr;
  display: inline-block
}

[dir=rtl] .hero-intro h1 {
  letter-spacing: 0;
  line-height: 1.35
}

[dir=rtl] .hero-principles {
  gap: 20px
}

[dir=rtl] .feature-number {
  direction: ltr
}

@keyframes pulse {
  0%,100% {
    opacity: .65;
    box-shadow: 0 0 0 0 #80f4c220
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 5px #80f4c200
  }
}

@keyframes chart-pulse {
  0%,100% {
    opacity: .12;
    transform: scale(.8)
  }
  50% {
    opacity: .25;
    transform: scale(1.1)
  }
}

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

@keyframes analyze {
  0%,100% {
    background-position: 0 0;
    opacity: .45
  }
  50% {
    background-position: 100% 0;
    opacity: .9
  }
}

@keyframes flow {
  to {
    stroke-dashoffset: -150
  }
}

@keyframes line-draw {
  from {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200
  }
  to {
    stroke-dasharray: 1200;
    stroke-dashoffset: 0
  }
}

@media(min-width:1500px) {
  .vision-hero {
    padding-top: 102px
  }
  .hero-intro h1 {
    font-size: 88px
  }
  .hero-description {
    margin-top: 29px
  }
  .experience-terminal {
    margin-top: 65px
  }
}

@media(max-width:1150px) {
  .shell {
    width: calc(100% - 48px)
  }
  .nav-actions {
    gap: 16px
  }
  .nav-actions .nav-link {
    font-size: 13px
  }
  .brand small {
    display: none
  }
  .terminal-layout {
    grid-template-columns: 152px minmax(0,1fr) 228px
  }
  .asset-rail {
    padding-inline: 9px
  }
  .asset-spark {
    display: none
  }
  .market-stage {
    padding: 22px 18px
  }
  .insight-panel {
    padding: 24px 17px 18px
  }
  .insight-panel #stageDescription {
    min-height: 87px
  }
  .chart-caption {
    font-size: 9px;
    max-width: 100px
  }
  .pipeline-tabs button {
    flex-direction: column;
    gap: 3px;
    padding: 8px 3px
  }
  .terminal-brand strong>span {
    display: none
  }
  .asset-coverage {
    padding-inline: 10px
  }
  .asset-coverage b span {
    font-size: 12px
  }
  .bento-grid article {
    padding: 25px 25px 0
  }
  .download-section {
    padding: 40px 28px 28px
  }
  .download-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .download-card {
    min-height: 140px
  }
  .platform-visual>span {
    padding: 11px 12px;
    min-width: 55px
  }
  .platform-visual {
    gap: 8px
  }
}

@media(max-width:860px) {
  .shell {
    width: calc(100% - 40px);
    padding-top: 14px
  }
  .topbar {
    padding: 12px 15px;
    top: 10px
  }
  .nav-actions {
    gap: 15px
  }
  .nav-actions .nav-link {
    display: none
  }
  .nav-actions .nav-primary {
    display: inline-flex
  }
  .vision-hero {
    padding-top: 62px
  }
  .hero-intro h1 {
    font-size: 65px;
    letter-spacing: -2.5px
  }
  .hero-description {
    font-size: 17px;
    max-width: 550px
  }
  .terminal-layout {
    grid-template-columns: 128px minmax(0,1fr)
  }
  .insight-panel {
    grid-column: 1/-1;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 20px;
    padding: 20px 24px
  }
  .insight-header {
    grid-row: 1/4;
    align-self: start;
    margin-top: 7px
  }
  .insight-kicker {
    margin: 0 0 4px
  }
  .insight-panel h3 {
    font-size: 18px;
    margin-bottom: 4px
  }
  .insight-panel #stageDescription {
    min-height: 0;
    font-size: 12px
  }
  .analysis-lines,.insight-step {
    display: none
  }
  .insight-boundary {
    grid-column: 1/-1;
    justify-content: center;
    margin-top: 16px;
    padding: 5px 12px
  }
  .insight-boundary p {
    font-size: 11px
  }
  .asset-button {
    padding: 11px 7px;
    gap: 7px
  }
  .asset-button small {
    font-size: 9px
  }
  .rail-heading {
    font-size: 9px
  }
  .rail-foot {
    display: none
  }
  .terminal-footer>span:last-child {
    display: none
  }
  .asset-coverage>div {
    gap: 17px;
    flex-wrap: wrap;
    justify-content: center
  }
  .asset-coverage b span {
    font-size: 11px
  }
  .asset-coverage b {
    font-size: 23px
  }
  .content-section {
    margin-top: 76px
  }
  .section-head {
    margin-bottom: 28px
  }
  .section-head h2 {
    font-size: 34px
  }
  .capability-grid.bento-grid {
    gap: 14px;
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .bento-grid h3 {
    font-size: 21px
  }
  .bento-grid p {
    font-size: 13px
  }
  .data-node {
    font-size: 7px;
    padding: 5px
  }
  .data-core {
    font-size: 20px;
    width: 64px;
    height: 52px
  }
  .platform-visual {
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-start
  }
  .platform-visual i {
    display: none
  }
  .platform-visual>span {
    font-size: 12px;
    padding: 8px 10px
  }
  .workflow-line {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 32px 28px
  }
  .workflow-line::before {
    display: none
  }
  .workflow-line article {
    padding: 0!important;
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 15px
  }
  .workflow-line article>span {
    width: 44px;
    height: 44px;
    grid-row: 1/3;
    box-shadow: none;
    margin: 0
  }
  .workflow-line article>strong {
    font-size: 16px
  }
  .workflow-line article>p {
    font-size: 13px
  }
  .commission-layout {
    grid-template-columns: 1fr
  }
  .benefit-grid {
    gap: 20px
  }
  .benefit-grid article {
    padding-top: 16px
  }
  .benefit-grid h3 {
    font-size: 16px
  }
  .benefit-grid p {
    font-size: 13px
  }
  #program {
    padding-top: 64px
  }
  .exchange-grid {
    grid-template-columns: 1fr
  }
  .exchange-grid article {
    padding: 24px
  }
  .exchange-grid h3 {
    margin: 12px 0
  }
  .download-section {
    margin-top: 76px
  }
  .download-section .section-head h2 {
    font-size: 34px
  }
  .site-footer {
    display: block
  }
  .site-footer>div {
    display: flex;
    flex-wrap: wrap
  }
  .site-footer p {
    margin-top: 14px;
    max-width: 600px
  }
}

@media(max-width:560px) {
  html {
    scroll-padding-top: 95px
  }
  .shell {
    width: calc(100% - 28px);
    padding-top: 12px
  }
  .topbar {
    min-height: 63px;
    border-radius: 13px;
    padding: 10px 12px;
    gap: 8px
  }
  .brand {
    gap: 7px
  }
  .brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px
  }
  .brand strong {
    font-size: 21px
  }
  .nav-actions {
    gap: 11px
  }
  .locale-trigger {
    font-size: 11px;
    gap: 5px;
    min-width: 0
  }
  .locale-trigger>span:first-child {
    display: none
  }
  .nav-actions .nav-primary {
    font-size: 12px;
    padding: 8px 11px;
    border-radius: 7px
  }
  .locale-menu {
    min-width: 175px
  }
  .vision-hero {
    padding-top: 47px
  }
  .launch-label {
    font-size: 10px;
    letter-spacing: .4px;
    padding: 6px 11px;
    margin-bottom: 24px;
    max-width: 100%;
    text-align: center
  }
  .hero-intro h1 {
    font-size: clamp(42px,10.4vw,60px);
    line-height: 1.21;
    letter-spacing: -1.6px
  }
  .hero-description {
    font-size: 15px;
    line-height: 1.9;
    margin-top: 21px;
    padding: 0 12px
  }
  .hero-actions {
    gap: 10px;
    margin-top: 25px
  }
  .hero-actions .primary-button,.hero-actions .ghost-button {
    padding: 11px 17px;
    min-height: 48px;
    font-size: 13px;
    gap: 12px
  }
  .hero-principles {
    font-size: 10px;
    gap: 13px;
    margin-top: 20px
  }
  .hero-principles>span {
    gap: 4px
  }
  .experience-terminal {
    margin-top: 37px;
    border-radius: 12px;
    box-shadow: 0 0 0 3px #121f2633,0 20px 50px #0006
  }
  .terminal-topline {
    padding: 11px 13px
  }
  .terminal-brand {
    gap: 7px
  }
  .terminal-brand img {
    width: 23px;
    height: 23px
  }
  .terminal-brand strong {
    font-size: 12px
  }
  .terminal-controls {
    gap: 8px
  }
  .demo-label {
    font-size: 10px
  }
  .motion-toggle {
    font-size: 10px;
    min-height: 29px;
    padding: 5px 7px;
    gap: 4px
  }
  .terminal-layout {
    display: flex;
    flex-direction: column
  }
  .asset-rail {
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
    padding: 11px 12px
  }
  .rail-heading {
    display: none
  }
  .asset-options {
    flex-direction: row;
    justify-content: space-between;
    gap: 3px
  }
  .asset-button {
    width: auto;
    flex: 1;
    justify-content: center;
    padding: 7px 3px;
    gap: 4px;
    border-radius: 6px
  }
  .asset-button>span:nth-child(2) {
    font-size: 10px
  }
  .asset-button small {
    display: none
  }
  .coin {
    width: 18px;
    height: 18px;
    font-size: 13px
  }
  .market-stage {
    padding: 18px 16px 15px
  }
  .market-heading h2 {
    font-size: 20px
  }
  .market-heading .eyebrow {
    font-size: 10px
  }
  .chart-caption {
    font-size: 9px;
    max-width: none
  }
  .chart-wrap {
    margin-top: 17px
  }
  .pipeline-tabs {
    gap: 1px;
    margin-top: 15px;
    padding-top: 11px
  }
  .pipeline-tabs button {
    padding: 7px 3px;
    gap: 5px
  }
  .pipeline-tabs button strong {
    font-size: 10px
  }
  .pipeline-tabs button span {
    font-size: 8px
  }
  .insight-panel {
    display: grid;
    grid-template-columns: 46px 1fr;
    column-gap: 14px;
    padding: 19px 17px 15px
  }
  .insight-header {
    grid-row: 1/4;
    margin-top: 7px
  }
  .insight-header>span:last-child {
    display: none
  }
  .ai-orbit {
    width: 36px;
    height: 36px;
    font-size: 13px
  }
  .insight-kicker {
    font-size: 9px
  }
  .insight-panel h3 {
    font-size: 17px
  }
  .insight-panel #stageDescription {
    font-size: 12px;
    line-height: 1.8
  }
  .insight-boundary {
    margin-top: 15px
  }
  .terminal-footer {
    padding: 9px 12px;
    font-size: 9px;
    line-height: 1.8;
    gap: 0
  }
  .hero-note {
    padding: 0 8px;
    font-size: 10px;
    margin-top: 19px;
    color: #6d8291
  }
  .asset-coverage {
    padding: 31px 0 33px
  }
  .asset-coverage>span {
    font-size: 10px;
    letter-spacing: 1px
  }
  .asset-coverage>div {
    gap: 18px 23px;
    margin-top: 21px
  }
  .asset-coverage b {
    font-size: 20px;
    gap: 6px
  }
  .asset-coverage b span {
    font-size: 10px;
    letter-spacing: .7px
  }
  .content-section {
    margin-top: 62px
  }
  .section-head h2 {
    font-size: 29px;
    letter-spacing: -.7px;
    margin-bottom: 15px;
    line-height: 1.42
  }
  .section-head>p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.9
  }
  .section-head .eyebrow {
    font-size: 10px;
    letter-spacing: 1.5px;
    margin-bottom: 12px
  }
  .capability-grid.bento-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }
  .bento-grid article {
    padding: 24px 23px 0;
    min-height: 300px
  }
  .bento-grid h3 {
    font-size: 22px
  }
  .bento-grid p {
    font-size: 14px
  }
  .feature-top {
    margin-bottom: 16px
  }
  .feature-number {
    font-size: 10px
  }
  .feature-records,.feature-connect {
    min-height: 252px!important
  }
  .data-node {
    font-size: 9px
  }
  .data-core {
    width: 74px;
    height: 58px
  }
  .risk-visual {
    margin-top: 28px
  }
  .platform-visual {
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: space-between
  }
  .platform-visual>span {
    font-size: 13px;
    padding: 11px 14px
  }
  .workflow-line {
    grid-template-columns: 1fr;
    gap: 26px
  }
  .workflow-line article {
    grid-template-columns: 46px 1fr;
    column-gap: 19px
  }
  .workflow-line article>span {
    font-size: 14px
  }
  .workflow-line article>strong {
    font-size: 18px;
    margin-bottom: 7px
  }
  .workflow-line article>p {
    font-size: 14px
  }
  #program {
    padding-top: 52px
  }
  .commission-card {
    padding: 23px 21px
  }
  .commission-title h3 {
    font-size: 19px
  }
  .commission-title p {
    font-size: 13px
  }
  .commission-table td {
    font-size: 13px
  }
  .commission-table td:last-child {
    font-size: 22px
  }
  .benefit-grid {
    grid-template-columns: 1fr;
    gap: 19px
  }
  .benefit-grid article {
    display: block
  }
  .benefit-grid h3 {
    margin-top: 12px;
    font-size: 17px
  }
  .benefit-grid p {
    font-size: 14px
  }
  .exchange-grid article {
    padding: 24px 22px
  }
  .exchange-grid h3 {
    font-size: 20px
  }
  .exchange-grid ol {
    font-size: 13px
  }
  .download-section {
    padding: 30px 20px 22px;
    margin-top: 62px;
    border-radius: 15px
  }
  .download-section .section-head h2 {
    font-size: 28px
  }
  .download-section .section-head p:not(.eyebrow) {
    font-size: 14px
  }
  .download-grid {
    grid-template-columns: 1fr;
    gap: 11px
  }
  .download-card {
    padding: 19px 18px;
    min-height: 118px
  }
  .download-card>span {
    margin-bottom: 5px;
    font-size: 12px
  }
  .download-card>strong {
    font-size: 18px
  }
  .download-card>small {
    font-size: 13px;
    margin-top: 5px
  }
  .platform-hint {
    font-size: 11px
  }
  .risk-card {
    margin-top: 45px
  }
  .risk-card p {
    font-size: 11px
  }
  .site-footer {
    padding-top: 25px;
    margin-top: 25px
  }
  .site-footer strong {
    font-size: 22px
  }
  .site-footer span {
    font-size: 10px
  }
  .site-footer p {
    font-size: 10px
  }
  .invite-mode .register-card {
    padding: 22px 16px;
    border-radius: 15px
  }
  .invite-mode .nav-actions {
    gap: 10px
  }
  .invite-mode .register-intro h2 {
    font-size: 28px
  }
  .invite-mode .country-panel {
    max-width: calc(100vw - 24px)
  }
  [dir=rtl] .hero-intro h1 {
    font-size: clamp(36px,9vw,50px)
  }
  [dir=rtl] .hero-principles {
    gap: 10px
  }
  .feature-connect .platform-visual>span {
    min-width: 0
  }
}

@media(max-width:360px) {
  .shell {
    width: calc(100% - 20px)
  }
  .nav-actions {
    gap: 6px
  }
  .nav-actions .nav-primary {
    padding: 8px;
    font-size: 11px
  }
  .locale-trigger {
    font-size: 10px
  }
  .hero-principles {
    gap: 8px
  }
  .terminal-brand strong {
    font-size: 11px
  }
  .terminal-brand img {
    display: none
  }
  .launch-label {
    font-size: 9px
  }
  .hero-description {
    padding-inline: 4px
  }
  .asset-button {
    gap: 3px
  }
  .hero-actions .primary-button,.hero-actions .ghost-button {
    font-size: 12px
  }
  .demo-label {
    font-size: 9px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  *,*::before,*::after {
    animation: none!important;
    transition: none!important
  }
  .motion-ready .reveal.is-pending {
    opacity: 1;
    transform: none
  }
}

/* Suspend decorative motion when this browser tab is hidden. */

.page-hidden *,.page-hidden *::before,.page-hidden *::after {
  animation-play-state: paused!important
}

@media(min-width:561px) {
  html:lang(en) .hero-intro h1,html:lang(tr) .hero-intro h1 {
    font-size: clamp(48px,5.4vw,80px)
  }
}

/* Preserve a visible mobile language selector and the authorized download entry. */

.topbar {
  position: sticky
}

@media(max-width:640px) {
  .home-mode .nav-actions .nav-primary,.invite-mode.register-complete .nav-actions .nav-primary {
    display: inline-flex!important
  }
  .locale-trigger {
    width: auto;
    max-width: 100px;
    min-width: 36px
  }
  .locale-trigger #localeCurrent {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }
}

/* Kinetic data field: a layered visual model, never a live market indicator. */
.vision-hero {
  perspective: 1600px;
}
.hero-intro {
  position: relative;
  z-index: 2;
}
.tech-atmosphere {
  position: absolute;
  z-index: -1;
  top: -44px;
  inset-inline: -32px;
  height: 690px;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 77%, transparent 100%);
}
#techField {
  display: block;
  width: 100%;
  height: 100%;
}
.atmosphere-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #070b12d9 0%, #070b1280 24%, transparent 58%);
}
.horizon-light {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 67%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6ed9f16b, #a397ff80, #7eeac473, transparent);
  box-shadow: 0 0 22px #73cfe359;
  animation: horizon-breathe 6s ease-in-out infinite;
}
.hero-grid {
  opacity: .3;
}
.gradient-text {
  background-image: linear-gradient(110deg, #acffdc 5%, #85eff0 26%, #dfd9ff 37%, #af91ff 48%, #85eddd 68%, #acffdc 95%);
  background-size: 240% 100%;
  animation: headline-light 12s ease-in-out infinite;
}
.experience-terminal {
  --signal-color: #75eacb;
  --pointer-x: 50%;
  --pointer-y: 25%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .65s cubic-bezier(.2,.7,.2,1), box-shadow .6s;
  box-shadow: 0 0 0 5px #18313938, 0 35px 100px #0008, 0 -2px 45px #57d9c520;
}
.experience-terminal::before {
  inset: 0;
  height: auto;
  z-index: 0;
  background: radial-gradient(450px circle at var(--pointer-x) var(--pointer-y), #65edc40c, transparent 70%);
}
.terminal-topline, .terminal-layout, .terminal-footer {
  position: relative;
  z-index: 1;
}
.terminal-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.terminal-circuit rect {
  fill: none;
  stroke: #9cffe1;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 165 3603;
  stroke-linecap: round;
  animation: circuit-travel 11s linear infinite;
}
.market-chart #chartLine {
  filter: drop-shadow(0 0 3px #70eac267);
}
.chart-flux {
  fill: none;
  stroke: #dcfff4;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 7 132;
  animation: chart-packets 4s linear infinite;
}
.market-sweep {
  position: absolute;
  top: 0;
  bottom: 20px;
  left: -18%;
  width: 18%;
  background: linear-gradient(90deg, transparent, #5ed4df05 55%, #a6ffe625 100%);
  border-inline-end: 1px solid #a6ffe68c;
  box-shadow: 10px 0 24px -18px #89fff5;
  pointer-events: none;
  opacity: .8;
  animation: market-scan 5.5s cubic-bezier(.35,0,.65,1) infinite;
}
.market-boundary {
  position: absolute;
  left: 5%;
  right: 12%;
  top: 20%;
  bottom: 28%;
  border: 1px dashed #d3c08d00;
  background: #d3c08d00;
  pointer-events: none;
  transition: border-color .65s, background .65s;
}
.experience-terminal[data-step="1"] {
  --signal-color: #bc9bff;
}
.experience-terminal[data-step="2"] {
  --signal-color: #e3c887;
}
.experience-terminal[data-step="3"] {
  --signal-color: #70eacf;
}
.experience-terminal[data-step="2"] .market-boundary {
  border-color: #d3c08d59;
  background: #d3c08d07;
}
.experience-terminal[data-step="1"] .radar-node {
  box-shadow: 0 0 0 5px #b18cef20, 0 0 17px #b18cef99;
}
.experience-terminal[data-step="3"] .chart-flux {
  animation-duration: 2.5s;
}
.engine-radar {
  position: relative;
  width: 154px;
  height: 154px;
  margin: 17px auto 26px;
  color: var(--signal-color);
  transition: color .65s;
  isolation: isolate;
}
.engine-radar>svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-opacity: .2;
  stroke-width: .8;
}
.engine-radar .radar-trace {
  stroke-opacity: .8;
  stroke-width: 1.8;
  stroke-dasharray: 5 8;
  transform-origin: 80px 80px;
  animation: orbit 17s linear infinite reverse;
}
.radar-sweep {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 242deg, #74e8d60c 274deg, #74e8d638 332deg, transparent 333deg);
  animation: orbit 7s linear infinite;
}
.radar-ring {
  position: absolute;
  inset: 27%;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: radar-emit 4.5s linear infinite;
}
.ring-two {
  animation-delay: 2.25s;
}
.radar-core {
  position: absolute;
  inset: 39%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 9px;
  background: #102627;
  font: 12px ui-monospace, monospace;
  box-shadow: 0 0 24px #6ce5ce23;
}
.radar-node {
  position: absolute;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
  animation: node-transmit 4s ease-in-out infinite;
}
.node-a { top: 23%; left: 30%; }
.node-b { top: 58%; right: 17%; animation-delay: 1.2s; }
.node-c { bottom: 16%; left: 36%; animation-delay: 2.6s; }
.radar-caption {
  position: absolute;
  bottom: -20px;
  inset-inline: -20px;
  text-align: center;
  white-space: nowrap;
  color: #658995;
  font: 8px ui-monospace, monospace;
  letter-spacing: 1px;
}
.insight-panel #stageDescription { min-height: 76px; }
.insight-kicker { margin-top: 23px; }
.insight-boundary { margin-top: 10px; }
.insight-step { margin-top: 17px; }
.pipeline-tabs button.is-active::after {
  content: "";
  position: absolute;
  height: 2px;
  bottom: -1px;
  left: 18%;
  right: 18%;
  background: var(--signal-color);
  box-shadow: 0 0 12px var(--signal-color);
}
.bento-grid .data-core {
  box-shadow: 0 0 0 4px #65d6b608, 0 0 35px #65d6b631;
}
.bento-grid .flow-path { stroke-width: 1.8; animation-duration: 4s; }
@keyframes market-scan {
  0% { transform: translateX(0); opacity: 0; }
  10%, 80% { opacity: .8; }
  100% { transform: translateX(625%); opacity: 0; }
}
@keyframes chart-packets { to { stroke-dashoffset: -556; } }
@keyframes circuit-travel { to { stroke-dashoffset: -3768; } }
@keyframes headline-light { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes horizon-breathe { 0%,100% { opacity: .45; transform: scaleX(.8); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes radar-emit { 0% { opacity: .5; transform: scale(.75); } 100% { opacity: 0; transform: scale(2.05); } }
@keyframes node-transmit { 0%,100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
@media (min-width:861px) {
  .terminal-layout { grid-template-columns: 174px minmax(0,1fr) 265px; }
  .market-stage { display: flex; flex-direction: column; }
  .market-stage .chart-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 260px; }
  .market-stage .pipeline-tabs { margin-top: auto; }
  .insight-panel { padding-top: 23px; }
}
@media (max-width:860px) {
  .tech-atmosphere { height: 600px; inset-inline: -20px; }
  .engine-radar { width: 110px; height: 110px; grid-column: 1; grid-row: 2/5; margin: 16px auto 15px; }
  .insight-header { grid-row: 1; }
  .insight-kicker,.insight-panel h3,.insight-panel #stageDescription { grid-column: 2; }
  .insight-panel #stageDescription { min-height: 0; }
  .insight-boundary { grid-column: 2; margin-top: 13px; align-self: start; }
  .radar-caption { display: none; }
}
@media (max-width:560px) {
  .tech-atmosphere { height: 540px; top: -28px; inset-inline: -14px; }
  .atmosphere-vignette { background: radial-gradient(ellipse at 50% 35%,#070b12b3, #070b1260 24%, transparent 65%); }
  .terminal-circuit rect { stroke-width: 1; }
  .insight-panel { grid-template-columns: 82px minmax(0,1fr); gap: 3px 16px; padding: 18px 16px; }
  .insight-header { display: none; }
  .engine-radar { width: 86px; height: 86px; grid-row: 1/4; margin: 10px 0 0; }
  .radar-core { font-size: 9px; border-radius: 5px; }
  .insight-panel #stageDescription { font-size: 12px; }
  .insight-boundary { grid-column: 1/-1; margin-top: 13px; }
  .insight-kicker { margin-top: 0; }
  .chart-flux { stroke-width: 2.7; }
  .market-sweep { opacity: .65; }
  .experience-terminal { transform: none; }
}
@media (prefers-reduced-motion:reduce) {
  .experience-terminal { transform: none; }
  .market-sweep,.chart-flux,.terminal-circuit,.radar-sweep,.radar-ring { display: none; }
  .gradient-text { background-position: 50% 50%; }
}

.hero-offscreen *,.hero-offscreen *::before,.hero-offscreen *::after { animation-play-state: paused !important; }

.chart-scanner {
  position: absolute;
  inset: 0 7% 20px 0;
  overflow: hidden;
  pointer-events: none;
}
.chart-scanner .market-sweep { bottom: 0; }

/* Observatory composition: the signal network is the first viewport's focal point. */
.vision-hero {padding-top:42px;}
.hero-observatory {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;min-height:620px;padding-bottom:40px;}
.hero-observatory .hero-intro {text-align:start;max-width:none;margin:0;min-width:0;padding:24px 0 24px 10px;}
.hero-observatory .launch-label {padding:0;border:0;background:none;border-radius:0;font-size:12px;line-height:1.7;letter-spacing:1.5px;margin-bottom:30px;}
.hero-observatory .hero-intro h1 {font-size:clamp(48px,5.1vw,74px);font-weight:720;line-height:1.18;letter-spacing:-3px;text-wrap:balance;}
.hero-observatory .hero-description {max-width:510px;margin:26px 0 0;font-size:17px;line-height:1.95;color:#a2b6c6;}
.hero-observatory .hero-actions {justify-content:flex-start;gap:12px;flex-wrap:wrap;margin-top:30px;}
.hero-observatory .hero-actions>a {min-height:50px;font-size:14px;}
.hero-observatory .hero-actions>a:last-child {background:none;border-color:transparent;box-shadow:none;padding-inline:4px;}
.hero-observatory .hero-principles {justify-content:flex-start;gap:12px 20px;flex-wrap:wrap;margin-top:25px;font-size:12px;}
.core-display {--core-accent:#75e9ee;position:relative;min-width:0;padding:12px 0 0;isolation:isolate;}
.core-heading {display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #56849345;padding-top:14px;position:relative;z-index:2;}
.core-label {display:flex;align-items:center;gap:8px;color:#d2f2f7;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1px;}
.core-label i {width:5px;height:5px;background:var(--core-accent);box-shadow:0 0 12px var(--core-accent);border-radius:50%;}
.core-demo {font-size:12px;color:#7c96a7;line-height:1.5;text-align:end;}
.core-stage.tech-atmosphere {position:relative;z-index:0;top:auto;inset-inline:auto;height:auto;width:100%;aspect-ratio:1.12;overflow:hidden;pointer-events:none;mask-image:none;}
.core-stage::after {content:"";position:absolute;inset:5% 7%;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,#73c6d503 3px,#73c6d503 4px);mask-image:radial-gradient(ellipse,#000,transparent 72%);}
.core-stage #techField,.core-fallback {position:absolute;inset:0;width:100%;height:100%;display:block;}
.core-stage.canvas-ready .core-fallback {display:none;}
.core-wordmark {position:absolute;top:49%;left:50%;transform:translate(-50%,-50%);text-align:center;width:94px;height:94px;display:flex;flex-direction:column;justify-content:center;border-radius:50%;background:radial-gradient(ellipse,#081321d9,#08132150 58%,transparent 72%);text-shadow:0 0 24px #6deaf780;}
.core-wordmark>span {font-size:43px;font-weight:600;line-height:1;letter-spacing:-3px;color:#d3fbff;}
.core-wordmark small {font-size:12px;letter-spacing:2px;line-height:2.1;color:#9cc9d8;}
.core-axis {position:absolute;color:#7393a575;letter-spacing:2px;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;}
.axis-n {top:6%;left:50%;transform:translateX(-50%);}.axis-s {bottom:6%;left:50%;transform:translateX(-50%);}.axis-w {top:47%;left:1%;writing-mode:vertical-rl;}.axis-e {top:47%;right:1%;writing-mode:vertical-rl;}
.core-callout {position:absolute;width:142px;padding:12px 15px;background:linear-gradient(130deg,#102535df,#081420d9);border:1px solid #69cce639;border-radius:3px;box-shadow:0 14px 40px #0004;}
.core-callout::before,.core-callout::after {content:"";position:absolute;width:6px;height:6px;border-color:#84eafa90;border-style:solid;}
.core-callout::before {top:-1px;left:-1px;border-width:1px 0 0 1px;}.core-callout::after {bottom:-1px;right:-1px;border-width:0 1px 1px 0;}
.callout-market {top:18%;left:2%;animation:core-card-drift 7s ease-in-out infinite;}.callout-risk {right:2%;bottom:15%;animation:core-card-drift 7s -3.5s ease-in-out infinite;}
.core-callout small {display:block;color:#709fb2;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1.5px;margin-bottom:5px;}
.core-callout strong {font-size:15px;font-weight:600;color:#d4eff4;line-height:1.5;}.core-callout em {font-style:normal;font-size:11px;color:#94afbf;font-weight:400;}
.callout-line {position:absolute;width:42px;height:1px;background:linear-gradient(90deg,#7ecbd58c,#7ecbd500);top:50%;left:100%;transform:rotate(30deg);transform-origin:left;}.callout-risk .callout-line {left:auto;right:100%;transform:rotate(30deg);transform-origin:right;background:linear-gradient(90deg,#7ecbd500,#7ecbd58c);}
.callout-spectrum {height:20px;display:flex;align-items:flex-end;gap:5px;margin-top:7px;}.callout-spectrum i {flex:1;max-width:5px;height:40%;background:linear-gradient(#7decf4,#4f8f9c55);transform-origin:bottom;animation:spectrum-drift 3.6s ease-in-out infinite alternate;}.callout-spectrum i:nth-child(2n){height:75%;animation-delay:-1.3s}.callout-spectrum i:nth-child(3n){height:55%;animation-delay:-2.1s}.callout-spectrum i:nth-child(5){height:100%;animation-delay:-.7s}
.callout-checks {display:block;color:#78d7b0;font-size:10px;letter-spacing:8px;margin-top:5px;}
.core-asset-controls {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;position:relative;z-index:2;margin-top:-4px;direction:ltr;}
.core-asset-controls button {display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #577f983b;border-radius:5px;background:#0c1823;color:#839fb2;padding:10px 4px;font:14px ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s;min-height:44px;}
.core-asset-controls button>span {font-size:17px;}.core-asset-controls button:hover,.core-asset-controls button.is-active {color:#d3fcff;border-color:#77e5ed80;background:#163441;box-shadow:inset 0 0 18px #51cadd10,0 0 15px #51cadd0c;}
.core-stage-caption {display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:17px;font-size:12px;color:#9fb6c4;}.core-stage-number {font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--core-accent);}.core-caption-line {flex:1;height:1px;background:linear-gradient(90deg,#5ac5d34a,transparent);position:relative;overflow:hidden;}.core-caption-line::after {content:"";position:absolute;width:45px;height:1px;background:linear-gradient(90deg,transparent,#a2f1f7);animation:core-signal-travel 5s linear infinite;}.core-total {font:12px ui-monospace,SFMono-Regular,Consolas,monospace;color:#577486;}
.hero-grid {opacity:.65;background-size:56px 56px;mask-image:radial-gradient(ellipse at 57% 37%,#000 10%,transparent 73%);}
.experience-terminal {margin-top:8px;border-color:#789db640;border-radius:12px;box-shadow:0 0 0 1px #4ea9b31c,0 32px 90px #0009,0 -5px 50px #41b7d315;}
.terminal-topline {background:linear-gradient(90deg,#12222d,#101621);}.terminal-brand strong>span {color:#6899ae;}
.asset-coverage {border-block-color:#689ab229;}.content-section {position:relative;}
.bento-grid>article {border-color:#739ab529;background:linear-gradient(135deg,#10202d,#0c131e 64%);transition:border-color .3s,box-shadow .3s,transform .3s;}
.bento-grid>article:hover {border-color:#7acfe35e;box-shadow:inset 0 1px 0 #8fe4ea15,0 15px 40px #0003;}
.feature-number {color:#6db9ce;}.workflow-line {border-top-color:#64bdd044;}
.motion-ready .reveal {transition:opacity .7s ease,transform .8s cubic-bezier(.19,1,.22,1);}.motion-ready .reveal.is-pending {transform:translateY(26px);}
.motion-paused .core-stage *,.page-hidden .core-display *,.hero-offscreen .core-display *, .motion-paused .core-caption-line::after,.page-hidden .core-caption-line::after,.hero-offscreen .core-caption-line::after {animation-play-state:paused!important;}
[dir=rtl] .hero-observatory .hero-intro {padding:24px 10px 24px 0;}[dir=rtl] .core-heading,[dir=rtl] .core-stage-caption {direction:rtl;}[dir=rtl] .core-stage {direction:ltr;}
html:lang(en) .hero-observatory .hero-intro h1,html:lang(tr) .hero-observatory .hero-intro h1 {font-size:clamp(45px,4.5vw,66px);letter-spacing:-2.8px;}
@keyframes core-card-drift {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes spectrum-drift {from{transform:scaleY(.45);opacity:.55}to{transform:scaleY(1);opacity:1}}
@keyframes core-signal-travel {from{left:-45px}to{left:100%}}
@media(min-width:1500px){.hero-observatory{min-height:670px;gap:44px}.hero-observatory .hero-intro h1{font-size:78px;}}
@media(max-width:1100px){.hero-observatory{gap:20px;min-height:540px}.hero-observatory .hero-intro h1{font-size:54px}.hero-observatory .hero-description{font-size:16px}.core-callout{width:125px;padding:9px 11px}.hero-observatory .hero-actions{gap:8px}.hero-observatory .hero-actions>a{padding-inline:14px}.hero-observatory .hero-actions>a:last-child{padding-inline:0;min-height:36px}}
@media(max-width:860px){.vision-hero{padding-top:32px}.hero-observatory{grid-template-columns:minmax(0,1fr);gap:20px;padding-bottom:36px;min-height:0}.hero-observatory .hero-intro,[dir=rtl] .hero-observatory .hero-intro{text-align:center;padding:20px 0 0;max-width:650px;justify-self:center}.hero-observatory .hero-description{margin:22px auto 0}.hero-observatory .hero-actions,.hero-observatory .hero-principles{justify-content:center}.core-display{width:min(100%,560px);justify-self:center}.core-heading{padding-top:12px}.hero-observatory .launch-label{margin-bottom:23px}.core-stage.tech-atmosphere{height:auto;top:auto;inset-inline:auto}.hero-observatory .hero-intro h1{font-size:58px}.experience-terminal{margin-top:10px}}
@media(max-width:560px){.vision-hero{padding-top:24px}.hero-observatory{gap:22px;padding-bottom:30px}.hero-observatory .hero-intro{padding-top:12px}.hero-observatory .hero-intro h1,html:lang(en) .hero-observatory .hero-intro h1,html:lang(tr) .hero-observatory .hero-intro h1{font-size:clamp(36px,9.5vw,48px);letter-spacing:-1.6px;line-height:1.22}.hero-observatory .hero-description{font-size:16px;line-height:1.85;max-width:380px}.hero-observatory .launch-label{font-size:11px;letter-spacing:.4px;gap:8px;margin-bottom:22px}.hero-observatory .hero-actions{margin-top:24px;gap:8px}.hero-observatory .hero-actions>a{font-size:14px;padding-inline:16px;min-height:46px}.hero-observatory .hero-actions>a:last-child{flex-basis:100%;min-height:32px;font-size:14px}.hero-observatory .hero-principles{font-size:11px;gap:10px 16px;margin-top:16px}.core-heading{gap:8px}.core-label{font-size:10px;letter-spacing:.4px}.core-demo{font-size:11px}.core-stage.tech-atmosphere{aspect-ratio:1.02}.core-callout{width:110px;padding:8px 10px}.core-callout small{font-size:8px;letter-spacing:1px}.core-callout strong{font-size:13px}.core-callout em{font-size:10px}.callout-market{left:0;top:15%}.callout-risk{right:0;bottom:13%}.callout-line{width:25px}.callout-spectrum{height:15px}.core-wordmark{width:80px;height:80px}.core-wordmark>span{font-size:36px}.core-wordmark small{font-size:10px}.core-asset-controls{gap:6px}.core-asset-controls button{font-size:14px;gap:4px;padding:9px 2px}.core-asset-controls button>span{font-size:15px}.core-stage-caption{margin-top:13px}.hero-grid{height:960px}.axis-e,.axis-w{display:none}}
@media(prefers-reduced-motion:reduce){.core-callout,.callout-spectrum i,.core-caption-line::after{animation:none!important}.bento-grid>article,.core-asset-controls button{transition:none}.motion-ready .reveal{transition:none}.motion-ready .reveal.is-pending{transform:none;opacity:1}}

.core-stage-caption .motion-toggle {min-height:44px;max-width:100%;margin-inline-start:auto;font-size:12px;white-space:normal;text-align:start;line-height:1.4;}
.core-stage-caption .core-caption-line {min-width:12px;}

.core-display.core-offscreen *,.core-display.core-offscreen *::before,.core-display.core-offscreen *::after {animation-play-state:paused!important;}

/* Product control-plane illustration; the values and code below are intentionally not live. */
.control-plane { --signal-color:#69e8ce; background:radial-gradient(circle at 54% 38%,#26204374,transparent 45%),#080c14; border-color:#61859255; isolation:isolate; }
.control-plane::after { content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(90deg,#9ed4f007 0 1px,transparent 1px 76px);mask-image:linear-gradient(transparent,#000 24%,#000 82%,transparent); }
.control-plane[data-step="1"] { --signal-color:#ad95ff; }
.control-plane[data-step="2"] { --signal-color:#71d9fc; }
.control-plane[data-step="3"] { --signal-color:#e5c884; }
.control-plane[data-step="4"] { --signal-color:#6df3b8; }
.control-plane .terminal-topline { display:grid;grid-template-columns:1fr auto 1fr;min-height:58px;background:#090e17eb;border-bottom-color:#7b9acb22; }
.control-plane .terminal-topline .motion-toggle {justify-self:end;}
.console-mode { display:inline-flex;align-items:center;gap:9px;padding:6px 12px;border:1px solid #54d5ad39;border-radius:30px;background:#13372c4f;color:#9ee9c7;font:10px ui-monospace,monospace;letter-spacing:1.1px;white-space:nowrap; }
.console-mode i,.status-lamp { width:7px;height:7px;flex:none;border-radius:50%;background:#4bf0ac;box-shadow:0 0 0 4px #4bf0ac19,0 0 15px #4bf0ac;animation:console-beacon 2.8s ease-in-out infinite; }
.control-flow { position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;padding:18px 17px 14px;direction:ltr; }
.control-flow::before { content:"";position:absolute;left:10%;right:10%;top:38px;height:1px;background:linear-gradient(90deg,#77e6d227,#75c8eb70,#b392ef6b,#86e7c627);box-shadow:0 0 13px #6fe5d32a; }
.control-flow button { position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:0 6px 5px;border:0;background:transparent;color:#8595aa;cursor:pointer;transition:color .25s,transform .25s; }
.control-flow button:hover { color:#e6f4ff;transform:translateY(-3px); }
.control-flow button>span { display:grid;place-items:center;width:37px;height:37px;border:1px solid #6573877a;border-radius:50%;background:#111824;color:#9baec0;font:11px ui-monospace,monospace;z-index:1;transition:border-color .3s,box-shadow .3s,background .3s,color .3s; }
.control-flow button.is-active>span,.control-flow button:hover>span { border-color:var(--signal-color);background:#12252b;color:#f0fffa;box-shadow:0 0 0 6px #76dbe518,0 0 28px var(--signal-color); }
.control-flow button strong { font-size:12px;line-height:1.3;font-weight:650;text-align:center;overflow-wrap:anywhere; }
.control-flow button small { color:#62768a;font:9px ui-monospace,monospace;letter-spacing:.35px;text-align:center;white-space:nowrap; }
.control-flow button.is-active strong { color:#eafcff;text-shadow:0 0 15px var(--signal-color); }
.console-readout { position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:40px;margin:0 12px 10px;padding:7px 12px;border:1px solid #6acbcb2c;border-radius:7px;background:linear-gradient(90deg,#0c263073,#30224f59 53%,#111a2b7a);overflow:hidden; }
.console-readout::after { content:"";position:absolute;top:0;bottom:0;width:22%;left:-25%;background:linear-gradient(90deg,transparent,#9fe5ff0d,transparent);animation:console-sweep 7s linear infinite;pointer-events:none; }
.readout-label { color:#67c9e2;font:10px ui-monospace,monospace;letter-spacing:.7px;white-space:nowrap; }
.console-readout strong { color:#e8f3ff;font-size:12px;white-space:nowrap; }
.console-readout>span:nth-of-type(2) { color:#8e9aaf;font-size:11px;line-height:1.4;min-width:0; }
.readout-bars { display:flex;align-items:end;gap:3px;margin-inline-start:auto;min-width:30px;height:15px; }
.readout-bars i { width:3px;height:35%;background:var(--signal-color);box-shadow:0 0 8px var(--signal-color);animation:console-bars 1.4s ease-in-out infinite alternate; }
.readout-bars i:nth-child(2){animation-delay:.2s}.readout-bars i:nth-child(3){animation-delay:.5s}.readout-bars i:nth-child(4){animation-delay:.1s}.readout-bars i:nth-child(5){animation-delay:.35s}
.control-grid { position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.46fr) minmax(0,1fr);gap:10px;padding:0 12px 12px; }
.console-pane { min-width:0;min-height:355px;border:1px solid #58738b4b;border-radius:11px;background:linear-gradient(155deg,#111827e8,#0b101aeb 62%);box-shadow:inset 0 1px #d4faff08;overflow:hidden;transition:transform .24s,border-color .24s,box-shadow .24s; }
.console-pane:hover { transform:translateY(-3px);border-color:#8cbbea76;box-shadow:0 16px 42px #0005,0 0 30px #73bbe714; }
.pane-heading { display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:43px;padding:11px 15px;border-bottom:1px solid #70839a33;color:#aebcd2;font:10px ui-monospace,monospace;letter-spacing:.45px; }
.pane-heading>span {display:flex;align-items:center;gap:8px;min-width:0}.pane-heading strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pane-heading small {font:9px ui-monospace,monospace;color:#68bebe;white-space:nowrap}.code-marker {width:6px;height:6px;background:#74def7;box-shadow:0 0 12px #74def7;border-radius:50%}
.research-content {display:flex;flex-direction:column;min-height:310px;padding:18px 17px 15px}.research-kicker {font:9px ui-monospace,monospace;color:#8a93ad;letter-spacing:.7px;margin:0 0 10px}.research-content h3 {margin:0 0 8px;color:#e9f2ff;font-size:19px}.research-content>p:not(.research-kicker) {color:#a5b1c5;font-size:12px;line-height:1.7;min-height:62px;margin:0 0 14px}
.research-checks {list-style:none;display:grid;gap:3px;margin:0;padding:0;border-top:1px solid #6a7f9438}.research-checks li {display:flex;align-items:center;gap:10px;padding:7px 3px;color:#90a0b7;font:10px ui-monospace,monospace}.research-checks li>span {color:#66b6db}.research-checks b {color:#5dd7a4;font-size:7px;margin-inline-start:auto}
.console-assets {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:auto;padding-top:13px}.console-assets button {min-width:0;min-height:32px;border:1px solid #57708463;border-radius:5px;background:#0a1821;color:#88a4b5;font:10px ui-monospace,monospace;cursor:pointer;transition:color .2s,border-color .2s,box-shadow .2s,background .2s}.console-assets button:hover,.console-assets button.is-active {color:#eafff7;border-color:#6ce6c6a8;background:#1640365c;box-shadow:0 0 16px #62e9c72b}
.code-pane {border-color:#598db05c;box-shadow:inset 0 1px #c6f5ff0d,0 0 26px #57d9ef0c}.code-lines {list-style:none;display:grid;gap:1px;margin:0;padding:13px 0;direction:ltr;overflow-x:auto}.code-lines li {display:flex;align-items:center;min-height:31px;padding:5px 15px;white-space:nowrap;border-inline-start:2px solid transparent;color:#acb6cd;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;transition:background .3s,color .3s,border-color .3s}.code-lines li>span {width:31px;flex:none;color:#586981}.code-lines code {font:inherit}.code-lines em {font-style:normal;color:#d7e69c}.code-lines b {font-weight:600;color:#d9b7f7}.code-lines li.is-active {border-inline-start-color:var(--signal-color);background:linear-gradient(90deg,#59d9c421,transparent 82%);color:#ecf9ff;text-shadow:0 0 15px #80e3e760}.code-lines li:hover {background:#5b8db117}
.console-metrics {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #70839a33;direction:ltr}.console-metrics div {min-width:0;padding:12px 5px;text-align:center;border-inline-end:1px solid #70839a22}.console-metrics div:last-child {border:0}.console-metrics small {display:block;color:#6c8198;font:8px ui-monospace,monospace;letter-spacing:.6px}.console-metrics strong {display:block;color:#b8c6dc;font:9px ui-monospace,monospace;margin-top:6px;overflow-wrap:anywhere}
.runtime-pane {border-color:#588dab76}.runtime-network {position:relative;height:194px;margin:10px 12px 0;background:radial-gradient(circle at 50% 50%,#2b566a39,transparent 49%)}.runtime-network::before,.runtime-network::after {content:"";position:absolute;left:50%;top:50%;width:64%;height:1px;background:linear-gradient(90deg,transparent,#63c6d855,transparent);transform:translate(-50%,-50%)}.runtime-network::after {transform:translate(-50%,-50%) rotate(90deg)}.network-ring {position:absolute;left:50%;top:50%;width:118px;height:118px;border:1px dashed #6ee8f66c;border-radius:50%;transform:translate(-50%,-50%);animation:console-orbit 17s linear infinite}.network-ring::after {content:"";position:absolute;top:3px;left:17px;width:7px;height:7px;border-radius:50%;background:#7df5e4;box-shadow:0 0 12px #7df5e4}.network-core {position:absolute;left:50%;top:50%;display:grid;place-content:center;width:78px;height:78px;text-align:center;transform:translate(-50%,-50%);border:1px solid #72d4edaa;border-radius:50%;background:#071a22;color:#e7fbff;font:12px ui-monospace,monospace;box-shadow:0 0 0 8px #50cadc12,0 0 25px #66d1e243}.network-core small,.network-node small {display:block;color:#7290a3;font-size:8px;margin-top:3px}.network-node {position:absolute;z-index:1;display:block;min-width:67px;padding:7px 5px;border:1px solid #627d994d;border-radius:5px;background:#0c1420;color:#aec5d4;text-align:center;font:9px ui-monospace,monospace}.node-market{top:11px;left:2%}.node-risk{top:11px;right:2%}.node-audit{bottom:11px;left:2%}.node-user{bottom:11px;right:2%}
.runtime-status {margin:4px 16px 0;border-top:1px solid #6a7f9438}.runtime-status div {display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid #6a7f9424;color:#8f9cb0;font:9px ui-monospace,monospace}.runtime-status b {color:#6fd6aa;font-weight:600}
.runtime-progress {display:flex;align-items:center;gap:5px;margin:15px 16px;color:#7c8da3;font:10px ui-monospace,monospace}.runtime-progress #stepNumber {color:var(--signal-color)}.runtime-progress>i {display:block;flex:1;height:2px;margin-inline-start:12px;background:#354458}.runtime-progress>i>b {display:block;height:100%;width:20%;background:var(--signal-color);box-shadow:0 0 12px var(--signal-color);transition:width .35s}.control-plane[data-step="1"] .runtime-progress>i>b{width:40%}.control-plane[data-step="2"] .runtime-progress>i>b{width:60%}.control-plane[data-step="3"] .runtime-progress>i>b{width:80%}.control-plane[data-step="4"] .runtime-progress>i>b{width:100%}
@keyframes console-beacon {50%{opacity:.45;box-shadow:0 0 0 7px #4bf0ac0b,0 0 7px #4bf0ac}}
@keyframes console-sweep {to{left:120%}}
@keyframes console-bars {to{height:100%}}
@keyframes console-orbit {to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:1080px){.control-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}.runtime-pane{grid-column:1/-1;min-height:240px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:43px 1fr 30px}.runtime-pane .pane-heading{grid-column:1/-1}.runtime-network{height:185px;margin-top:0}.runtime-status{align-self:center}.runtime-progress{grid-column:1/-1;margin-top:0}.control-flow button small{font-size:8px}}
@media(max-width:700px){.control-plane .terminal-topline{grid-template-columns:1fr auto;gap:6px}.console-mode{grid-column:1/-1;grid-row:2;justify-self:start}.control-plane .terminal-topline .motion-toggle{grid-column:2;grid-row:1}.control-flow{display:flex;overflow-x:auto;gap:0;padding:17px 11px 13px;scroll-snap-type:x mandatory}.control-flow::before{display:none}.control-flow button{flex:0 0 94px;scroll-snap-align:start}.control-flow button strong{font-size:11px}.control-flow button small{font-size:7px}.console-readout{flex-wrap:wrap;gap:5px 10px;margin:0 10px 10px;padding:9px}.console-readout>span:nth-of-type(2){flex-basis:100%;order:3}.readout-bars{margin-inline-start:auto}.control-grid{grid-template-columns:1fr;gap:9px;padding:0 10px 12px}.console-pane{min-height:0}.research-content{min-height:0}.research-content>p:not(.research-kicker){min-height:0}.console-assets{margin-top:9px}.code-lines li{min-height:29px}.runtime-pane{display:block;min-height:0}.runtime-network{height:190px}.runtime-status{margin-top:0}.runtime-progress{margin-bottom:15px}}
@media(max-width:390px){.control-plane .terminal-brand strong>span{display:none}.pane-heading small{font-size:8px}.code-lines li{font-size:10px}}
@media(prefers-reduced-motion:reduce){.control-plane .console-mode i,.control-plane .status-lamp,.control-plane .console-readout::after,.control-plane .readout-bars i,.control-plane .network-ring{animation:none!important}.console-pane,.control-flow button,.console-assets button{transition:none}}