:root {
  --ink: #f6f9ff;
  --muted: #9badc6;
  --soft: #d8e8ff;
  --blue: #4b83ff;
  --cyan: #69ddff;
  --green: #8dfd8a;
  --bg: #030711;
  --bg-2: #060b18;
  --panel: rgba(8, 17, 35, .72);
  --panel-strong: rgba(11, 25, 51, .88);
  --line: rgba(154, 190, 255, .18);
  --line-strong: rgba(141, 205, 255, .42);
  --shadow: 0 32px 100px rgba(0, 0, 0, .42);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --p: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

.ambient {
  pointer-events: none;
  position: fixed;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .28;
  z-index: 0;
}
.ambient-one { top: -18vw; right: -12vw; background: #1d5cff; }
.ambient-two { bottom: 8vh; left: -20vw; background: #0ed2ff; opacity: .16; }

.nav {
  height: 78px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 0 4vw;
  border-bottom: 1px solid transparent;
  transition: .45s var(--ease);
}
.nav.scrolled {
  backdrop-filter: blur(18px);
  background: rgba(3, 7, 17, .72);
  border-color: rgba(151, 190, 255, .14);
}
.brand {
  color: #fff;
  text-decoration: none;
  font: 700 12px/1 DM Mono, monospace;
  letter-spacing: .1em;
  display: flex;
  align-items: center;
  gap: 9px;
}
.glyph { display: flex; gap: 2px; align-items: flex-end; height: 15px; }
.glyph i { width: 3px; background: linear-gradient(var(--cyan), var(--blue)); border-radius: 99px; box-shadow: 0 0 14px rgba(105, 221, 255, .7); }
.glyph i:nth-child(1) { height: 5px; }
.glyph i:nth-child(2) { height: 10px; }
.glyph i:nth-child(3) { height: 15px; }
.nav-links { justify-self: center; display: flex; gap: 6px; padding: 5px; border: 1px solid rgba(153, 190, 255, .12); background: rgba(5, 12, 26, .34); border-radius: 99px; }
.nav-links a { padding: 10px 14px; border-radius: 99px; color: #aebdd3; text-decoration: none; font: 500 9px DM Mono, monospace; letter-spacing: .08em; transition: .25s var(--ease); }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-right { display: flex; align-items: center; gap: 22px; font: 500 9px DM Mono, monospace; letter-spacing: .08em; }
.nav-cta { text-decoration: none; padding: 12px 15px; border: 1px solid rgba(159, 202, 255, .36); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.01)); transition: .3s var(--ease); }
.nav-cta:hover { background: #eef7ff; color: #061120; transform: translateY(-2px); }
.online { color: #afbdd2; }
.online b, .mini-dot { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 14px var(--green); margin-right: 8px; }

.journey { height: 540vh; position: relative; z-index: 1; }
.journey-pin { height: 100vh; position: sticky; top: 0; overflow: hidden; background: radial-gradient(circle at 50% 38%, #102553 0%, #071026 35%, #03050c 74%); }
.world { position: absolute; inset: 0; perspective: 1200px; transform-style: preserve-3d; overflow: hidden; }
.starfield { position: absolute; inset: -40%; background-image: radial-gradient(#dff5ff 1px, transparent 1.7px), radial-gradient(#4f7ee8 1px, transparent 1.4px); background-size: 89px 89px, 137px 137px; background-position: 0 0, 31px 55px; opacity: .52; transform: scale(calc(.72 + var(--p) * .88)) translateZ(calc(var(--p) * -500px)); }
.floor { position: absolute; left: -30%; right: -30%; bottom: -32%; height: 70%; background: linear-gradient(transparent 0 49%, rgba(88, 143, 255, .16) 50%, transparent 51%) 0 0 / 100% 55px, linear-gradient(90deg, transparent 0 49%, rgba(88, 143, 255, .14) 50%, transparent 51%) 0 0 / 60px 100%; transform-origin: 50% 100%; transform: perspective(700px) rotateX(69deg) translateY(calc(var(--p) * 55px)) scale(calc(1 + var(--p) * 1.3)); mask-image: linear-gradient(to top, black, transparent 72%); opacity: .5; }
.portal { position: absolute; top: 50%; left: 50%; width: min(74vw, 940px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(117, 174, 255, .36); transform: translate(-50%, -50%) rotateX(74deg); box-shadow: 0 0 120px rgba(53, 124, 255, .12), inset 0 0 70px rgba(53, 124, 255, .1); }
.portal::before, .portal::after { content: ""; position: absolute; inset: 11%; border-radius: inherit; border: 1px dashed rgba(137, 207, 255, .25); }
.portal::after { inset: 29%; border-style: solid; border-color: rgba(137, 227, 255, .3); }
.portal span { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #9bebff; box-shadow: 0 0 22px 6px #4ca0ff; }
.p-far { transform: translate(-50%, -50%) rotateX(74deg) scale(calc(.26 + var(--p) * 2.2)); opacity: calc(.22 + var(--p) * .78); }
.p-mid { transform: translate(-50%, -50%) rotateX(74deg) scale(calc(.55 + var(--p) * 2.8)); opacity: calc(.3 + var(--p) * .7); }
.p-near { transform: translate(-50%, -50%) rotateX(74deg) scale(calc(.92 + var(--p) * 4.1)); opacity: calc(.16 + var(--p) * .8); }
.portal span:first-child { transform: translate(-260px, -120px); }
.portal span:last-child { transform: translate(250px, 110px); }
.axis-line { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: linear-gradient(transparent, rgba(96, 156, 255, .5), transparent); transform: translateX(-50%) scaleY(calc(.7 + var(--p) * .6)); opacity: .55; }
.signal { position: absolute; left: 50%; top: 50%; height: 1px; width: 50vw; background: linear-gradient(90deg, transparent, #6bdcff, transparent); transform-origin: 0 50%; opacity: calc(var(--p) * .78); filter: drop-shadow(0 0 8px #4a9dff); }
.s1 { transform: rotate(17deg) scaleX(calc(.35 + var(--p) * .8)); }
.s2 { transform: rotate(-29deg) scaleX(calc(.15 + var(--p) * .95)); }
.s3 { transform: rotate(153deg) scaleX(calc(.25 + var(--p) * .9)); }

.business-core { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; transform-style: preserve-3d; transform: translate(-50%, -50%) scale(calc(.22 + var(--p) * .95)); opacity: calc((var(--p) - .18) * 1.5); }
.core-halo { position: absolute; inset: 0; border: 1px solid rgba(129, 185, 255, .36); border-radius: 50%; animation: spin 16s linear infinite; }
.core-halo.h2 { inset: 22px; border-style: dashed; animation-duration: 22s; animation-direction: reverse; }
.core-halo.h3 { inset: 50px; border-color: rgba(105, 221, 255, .55); box-shadow: 0 0 50px rgba(68, 154, 255, .24); animation-duration: 9s; }
.building { position: absolute; left: 50%; top: 50%; width: 118px; height: 108px; transform: translate(-50%, -50%) perspective(300px) rotateX(56deg) rotateZ(45deg); background: linear-gradient(135deg, #102a58, #081323); box-shadow: 0 0 42px rgba(57, 112, 240, .78); }
.building span { position: absolute; width: 10px; height: 10px; border: 1px solid #75e5ff; box-shadow: 0 0 12px #75e5ff; }
.building span:nth-child(1) { left: 17px; top: 18px; }.building span:nth-child(2) { left: 48px; top: 18px; }.building span:nth-child(3) { left: 78px; top: 18px; }.building span:nth-child(4) { left: 17px; top: 51px; }.building span:nth-child(5) { left: 48px; top: 51px; }
.core-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font: 700 11px/1.1 DM Mono; letter-spacing: .1em; text-shadow: 0 0 18px #69ddff; }
.node { position: absolute; width: 148px; padding: 14px 14px 13px; border: 1px solid rgba(142, 189, 255, .28); background: rgba(6, 14, 31, .78); backdrop-filter: blur(12px); transform: translate(-50%, -50%) scale(calc(.35 + var(--p) * .85)); opacity: calc((var(--p) - .30) * 1.9); box-shadow: var(--shadow); }
.node i { position: absolute; left: -5px; top: 17px; width: 8px; height: 8px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 16px var(--cyan); }
.node b { display: block; font: 500 9px DM Mono; letter-spacing: .08em; }.node small { display: block; font: 500 8px DM Mono; color: var(--green); margin-top: 4px; }
.cloud { left: 69%; top: 28%; }.voice { left: 76%; top: 55%; }.secure { left: 26%; top: 62%; }.network { left: 34%; top: 28%; }.ai { left: 50%; top: 76%; }
.data-stream { position: absolute; border-radius: 99px; border: 1px solid rgba(119, 211, 255, .3); filter: drop-shadow(0 0 9px #3b8fff); opacity: calc((var(--p) - .42) * 1.8); }
.stream-a { width: 42vw; height: 1px; top: 46%; left: 29%; transform: rotate(20deg); }.stream-b { width: 31vw; height: 1px; top: 55%; left: 49%; transform: rotate(-28deg); }.stream-c { width: 38vw; height: 1px; top: 59%; left: 31%; transform: rotate(-144deg); }
.vignette { position: absolute; z-index: 2; inset: 0; background: radial-gradient(ellipse at center, transparent 24%, rgba(2, 4, 10, .36) 66%, rgba(2, 4, 10, .92) 100%); pointer-events: none; }

.journey-ui { position: relative; z-index: 3; min-height: 100%; padding: 112px 7vw 7vh; pointer-events: none; }
.progress { position: absolute; top: 116px; right: 5vw; display: flex; align-items: center; gap: 12px; color: #a8b5cc; font: 500 8px DM Mono; letter-spacing: .11em; }
.progress > div { width: 82px; height: 1px; background: rgba(140, 177, 245, .24); }.progress i { display: block; width: calc(var(--p) * 100%); height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.chapter, .section-kicker { font: 500 9px DM Mono; letter-spacing: .13em; color: #8ea8ce; opacity: .78; }
.hero-copy, .scene-copy, .challenge-copy { position: absolute; left: 7vw; top: 34%; max-width: 760px; transition: opacity .45s var(--ease), transform .55s var(--ease); pointer-events: auto; }
.eyebrow { font: 500 9px DM Mono; letter-spacing: .14em; color: #aab9cf; display: flex; align-items: center; gap: 10px; }.eyebrow span { width: 38px; height: 1px; background: var(--cyan); }
.hero-copy h1, .scene-copy h2, .challenge-copy h2, .bridge h2, .stack h2, .process h2, .ai-copy h2, .assessment h2 { letter-spacing: -.075em; line-height: .98; font-weight: 700; }
.hero-copy h1 { margin: 16px 0 20px; font-size: clamp(45px, 6vw, 96px); max-width: 900px; }
em { color: var(--cyan); font-style: normal; }
.hero-body, .scene-copy > p:last-child, .challenge-copy > p:last-child { color: var(--muted); font-size: 16px; line-height: 1.7; max-width: 590px; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.enter-card { border: 1px solid rgba(180, 214, 255, .45); background: linear-gradient(135deg, rgba(12, 28, 58, .78), rgba(5, 13, 28, .58)); color: #f2f7ff; padding: 17px 18px; text-align: left; min-width: 270px; display: grid; grid-template-columns: 1fr 32px; gap: 10px; cursor: pointer; transition: .35s var(--ease); font: 500 10px DM Mono; letter-spacing: .08em; box-shadow: 0 20px 70px rgba(0, 0, 0, .28); }
.enter-card:hover { background: #eef7ff; color: #061120; transform: translateY(-4px); }
.enter-card i { width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; }.enter-card i b { width: 4px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.enter-card small { grid-column: 1 / -1; color: #94a8c6; font: 400 8px DM Mono; letter-spacing: 0; }
.ghost-link { color: #d9ecff; text-decoration: none; font: 500 10px DM Mono; letter-spacing: .09em; border-bottom: 1px solid rgba(105, 221, 255, .45); padding-bottom: 8px; }
.status-card { position: absolute; right: 6vw; bottom: 12vh; width: 270px; display: flex; align-items: center; gap: 10px; padding: 13px; background: var(--panel); border: 1px solid rgba(151, 190, 255, .2); backdrop-filter: blur(14px); opacity: calc(.38 + var(--p) * .62); box-shadow: 0 22px 80px rgba(0,0,0,.28); }
.status-card small { display: block; font: 400 8px DM Mono; color: #91a9cb; letter-spacing: .09em; }.status-card strong { display: block; margin-top: 4px; font: 500 10px DM Mono; }.status-card > i { margin-left: auto; color: var(--cyan); }
.scroll-hint { position: absolute; bottom: 7vh; left: 7vw; display: flex; gap: 10px; align-items: center; font: 500 8px DM Mono; letter-spacing: .12em; color: #819abb; transition: .3s; }.scroll-hint i { width: 46px; height: 1px; background: var(--cyan); position: relative; }.scroll-hint i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid var(--cyan); border-right: 1px solid var(--cyan); transform: rotate(45deg); }
.scene-copy, .challenge-copy { opacity: 0; transform: translateY(24px); }.scene-copy h2, .challenge-copy h2 { font-size: clamp(39px, 4.8vw, 78px); }

.trust-rail { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: rgba(151, 190, 255, .12); border-block: 1px solid rgba(151, 190, 255, .14); }
.trust-rail span { padding: 22px 12px; text-align: center; background: rgba(5, 10, 22, .94); color: #c4d3e8; font: 500 10px DM Mono; letter-spacing: .09em; }
.bridge { position: relative; z-index: 2; background: #edf5ff; color: #071223; min-height: 52vh; display: grid; grid-template-columns: 1.45fr .85fr; align-items: center; gap: 8vw; padding: 11vh 10vw; }
.bridge span, .stack header span, .ai-copy > span, .assessment span { font: 500 9px DM Mono; letter-spacing: .13em; color: #2e70d8; }.bridge h2 { font-size: clamp(38px, 4vw, 70px); margin: 20px 0; }.bridge p { font-size: 16px; line-height: 1.8; color: #52647e; }
.outcomes { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(151, 190, 255, .12); padding: 1px; }
.outcomes article { background: linear-gradient(145deg, #071022, #050914); padding: 44px 5vw; min-height: 260px; }.outcomes strong { color: var(--cyan); font: 500 10px DM Mono; }.outcomes h3 { font-size: 28px; letter-spacing: -.05em; margin: 55px 0 12px; }.outcomes p { color: var(--muted); line-height: 1.7; }
.stack, .process { position: relative; z-index: 2; padding: 13vh 7vw; background: radial-gradient(circle at 78% 12%, rgba(37, 95, 219, .22), transparent 34%), #050914; }
.stack header { max-width: 760px; margin-bottom: 48px; }.stack h2, .process h2 { font-size: clamp(42px, 5vw, 76px); margin: 16px 0; }.stack header p { color: var(--muted); line-height: 1.7; max-width: 620px; }
.stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stack article, .process article { position: relative; overflow: hidden; min-height: 330px; padding: 32px; border: 1px solid rgba(151, 190, 255, .18); background: linear-gradient(145deg, rgba(13, 29, 60, .86), rgba(5, 11, 24, .94)); box-shadow: 0 18px 70px rgba(0,0,0,.22); transition: .35s var(--ease); }
.stack article::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent); transform: translateX(-120%); transition: .7s var(--ease); }
.stack article::after { content: ""; position: absolute; right: -56px; bottom: -82px; width: 250px; height: 250px; border-radius: 50%; border: 1px solid rgba(94, 156, 255, .25); box-shadow: 0 0 70px rgba(35,101,255,.18); }
.stack article:hover { transform: translateY(-7px); border-color: rgba(116, 205, 255, .56); }.stack article:hover::before { transform: translateX(120%); }
.stack article.featured { grid-column: span 2; background: radial-gradient(circle at 82% 20%, rgba(105,221,255,.2), transparent 32%), linear-gradient(145deg, rgba(16, 39, 82, .94), rgba(5, 11, 24, .96)); }
.stack article.wide { grid-column: span 2; min-height: 270px; }.stack .icon { font-size: 34px; color: var(--cyan); line-height: 1; margin-bottom: 46px; }.stack small { font: 500 9px DM Mono; color: #97acd0; letter-spacing: .1em; }.stack h3 { font-size: clamp(22px, 2.1vw, 34px); line-height: 1.08; letter-spacing: -.055em; max-width: 580px; margin: 13px 0; }.stack p { max-width: 510px; line-height: 1.65; color: var(--muted); font-size: 14px; }.stack ul { display: flex; gap: 8px; flex-wrap: wrap; padding: 0; margin: 24px 0 0; list-style: none; }.stack li { border: 1px solid rgba(105,221,255,.25); color: #ccecff; padding: 8px 10px; font: 500 9px DM Mono; }
.process { background: #edf5ff; color: #071223; }.process .section-kicker { color: #2e70d8; }.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 42px; }.process article { background: rgba(255,255,255,.66); border-color: #c7d8ee; min-height: 245px; box-shadow: none; }.process article span { color: #2e70d8; font: 500 10px DM Mono; }.process h3 { font-size: 27px; margin: 48px 0 10px; letter-spacing: -.05em; }.process p { color: #586a83; line-height: 1.65; }
.ai-demo { position: relative; z-index: 2; padding: 13vh 9vw; display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: center; background: radial-gradient(circle at 72% 48%, #0d285e 0, #050914 38%); }.ai-copy h2, .assessment h2 { font-size: clamp(40px, 4.9vw, 74px); margin: 18px 0; }.ai-copy p, .assessment p { color: #a6b8cf; line-height: 1.75; max-width: 540px; font-size: 15px; }.ai-copy button, .assessment button { margin-top: 24px; border: 1px solid var(--cyan); background: transparent; color: #e9f7ff; padding: 15px 19px; font: 500 10px DM Mono; letter-spacing: .08em; cursor: pointer; transition: .3s var(--ease); }.ai-copy button:hover { background: #e6f5ff; color: #051227; }.demo-note { display: block; color: #7f93b2; margin-top: 14px; font: 400 10px DM Mono; }
.call-terminal { background: rgba(6,15,32,.92); border: 1px solid rgba(133, 192, 255, .34); box-shadow: 0 34px 100px rgba(0,0,0,.42); }.terminal-top { height: 42px; border-bottom: 1px solid rgba(123,178,255,.16); display: flex; align-items: center; gap: 6px; padding: 0 14px; }.terminal-top span { width: 7px; height: 7px; border-radius: 50%; background: #5a78a3; }.terminal-top em { font: 400 8px DM Mono; letter-spacing: .1em; color: #90a6c7; margin-left: 8px; }.call-stages { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(123,178,255,.13); }.call-stages b { background: rgba(8, 18, 38, .96); padding: 12px; text-align: center; color: #778daf; font: 500 8px DM Mono; text-transform: uppercase; }.call-stages b.active { color: var(--cyan); }.call-main { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; }.avatar { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; font: 500 15px DM Mono; color: #bdeeff; box-shadow: 0 0 36px rgba(105,221,255,.48); }.wave { height: 36px; display: flex; align-items: center; gap: 4px; margin: 24px 0; }.wave i { height: 4px; width: 3px; background: var(--cyan); border-radius: 99px; }.wave.live i { animation: wave .55s ease-in-out infinite alternate; }.wave.live i:nth-child(2n) { animation-delay: .15s; }.wave.live i:nth-child(3n) { animation-delay: .3s; }.call-main strong { font: 500 12px DM Mono; letter-spacing: .06em; }.call-main small { color: #89a5ca; font: 400 9px DM Mono; margin-top: 8px; }.transcript { border-top: 1px solid rgba(123,178,255,.16); padding: 22px 24px; }.transcript span { font: 500 8px DM Mono; color: var(--cyan); letter-spacing: .1em; }.transcript p { font-size: 14px; line-height: 1.6; color: #d7e7fb; margin: 8px 0 0; }
.assessment { position: relative; z-index: 2; overflow: hidden; background: #edf5ff; color: #061226; padding: 13vh 9vw; display: grid; grid-template-columns: 1.15fr .85fr; gap: 10vw; align-items: center; }.assessment p { color: #586a83; }.assessment-orb { position: absolute; width: 64vw; height: 64vw; border: 1px solid rgba(44,105,221,.2); border-radius: 50%; left: -23vw; bottom: -51vw; box-shadow: 0 0 0 50px rgba(69,123,218,.05), 0 0 0 112px rgba(69,123,218,.04); pointer-events: none; }.next-steps { margin-top: 28px; padding: 18px; border-left: 2px solid #2e70d8; background: rgba(255,255,255,.52); max-width: 480px; }.next-steps b { display: block; }.next-steps small { display: block; color: #586a83; line-height: 1.6; margin-top: 6px; }.assessment form { position: relative; z-index: 1; display: grid; gap: 12px; padding: 20px; background: rgba(255,255,255,.55); border: 1px solid #c4d5eb; box-shadow: 0 30px 80px rgba(42, 74, 122, .12); }.assessment label span { display: block; margin-bottom: 7px; color: #4e617c; font: 500 9px DM Mono; letter-spacing: .08em; }.assessment input, .assessment select { width: 100%; height: 50px; border: 1px solid #bfd0e6; background: rgba(255,255,255,.78); padding: 0 14px; color: #10203a; outline: none; }.assessment input:focus, .assessment select:focus { border-color: #317dff; box-shadow: 0 0 0 3px rgba(49,125,255,.13); }.assessment button { height: 54px; border: 0; background: #0b2457; color: #fff; margin-top: 4px; }.assessment button span { color: #8fd9ff; margin-left: 8px; }.assessment form.sent { border-color: #2e70d8; }
footer { position: relative; z-index: 2; background: #030711; padding: 38px 7vw; color: #91a4bf; display: flex; align-items: center; gap: 18px; font-size: 11px; }footer span { color: #fff; font: 700 12px DM Mono; letter-spacing: .08em; }footer p { margin: 0; }footer small { margin-left: auto; font: 400 8px DM Mono; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes wave { from { height: 4px; } to { height: 31px; } }

@media (max-width: 980px) { .nav-links { display: none; }.trust-rail { grid-template-columns: repeat(3, 1fr); }.stack-grid, .process-grid, .outcomes { grid-template-columns: 1fr 1fr; }.stack article.featured, .stack article.wide { grid-column: span 2; }.bridge, .ai-demo, .assessment { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .nav { height: 64px; padding: 0 18px; grid-template-columns: auto auto; }.online { display: none; }.nav-cta { padding: 10px 11px; font-size: 8px; }.journey { height: 500vh; }.journey-ui { padding: 92px 7vw 6vh; }.progress { top: 87px; right: 7vw; }.chapter { font-size: 8px; }.hero-copy, .scene-copy, .challenge-copy { top: 25%; left: 7vw; right: 7vw; }.hero-copy h1, .scene-copy h2, .challenge-copy h2 { font-size: clamp(38px, 11.2vw, 57px); }.hero-body { font-size: 13px; max-width: 350px; }.hero-actions { align-items: flex-start; flex-direction: column; }.status-card { right: 7vw; left: 7vw; bottom: 14vh; width: auto; }.portal { width: 125vw; }.node { transform: translate(-50%, -50%) scale(calc(.3 + var(--p) * .56)); width: 120px; }.cloud { left: 76%; top: 31%; }.voice { left: 78%; top: 55%; }.secure { left: 20%; top: 62%; }.network { left: 26%; top: 34%; }.ai { left: 53%; top: 78%; }.business-core { transform: translate(-50%, -50%) scale(calc(.18 + var(--p) * .69)); }.trust-rail, .stack-grid, .process-grid, .outcomes { grid-template-columns: 1fr; }.stack article.featured, .stack article.wide { grid-column: auto; }.bridge, .stack, .process, .ai-demo, .assessment { padding: 10vh 7vw; }.outcomes article { padding: 34px 7vw; min-height: 220px; }.bridge h2, .ai-copy h2, .assessment h2, .process h2, .stack h2 { font-size: clamp(38px, 11vw, 56px); } footer { padding: 28px 7vw; flex-wrap: wrap; gap: 7px; } footer small { margin-left: 0; width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* =========================
   ABOUT PAGE
   ========================= */
.about-page { background: #030711; }
.about-page .nav-links a.active { color: #fff; background: rgba(255,255,255,.08); }

.about-hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .55fr);
  gap: 7vw;
  padding: 160px 9vw 92px;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 65% 37%, rgba(36, 95, 210, .24), transparent 35%),
    radial-gradient(ellipse at 77% 70%, rgba(81, 213, 255, .10), transparent 33%),
    linear-gradient(130deg, #030711 0%, #040c1d 50%, #030711 100%);
}
.about-hero::before,
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.about-hero::before {
  background:
    linear-gradient(90deg, rgba(116, 171, 255, .08) 1px, transparent 1px) 0 0 / 8.33% 100%,
    linear-gradient(rgba(116, 171, 255, .06) 1px, transparent 1px) 0 0 / 100% 12.5%;
  mask-image: linear-gradient(90deg, black 18%, transparent 78%);
  opacity: .45;
}
.about-hero::after {
  background: radial-gradient(circle at 72% 38%, transparent 0 7%, rgba(117, 186, 255, .22) 7.3% 7.45%, transparent 7.7% 14%, rgba(117, 186, 255, .11) 14.2% 14.35%, transparent 14.7% 24%, rgba(117, 186, 255, .08) 24.2% 24.35%, transparent 24.8%);
  opacity: .9;
  transform: scale(1.45);
  transform-origin: 73% 39%;
}
.about-grid {
  position: absolute;
  right: -10vw;
  top: 17vh;
  width: min(56vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(115, 187, 255, .22);
  box-shadow: 0 0 0 58px rgba(100, 171, 255, .025), 0 0 0 128px rgba(100, 171, 255, .02), inset 0 0 96px rgba(47, 112, 241, .16);
  transform: rotateX(62deg) rotateZ(-18deg);
  z-index: -1;
}
.about-orbit {
  position: absolute;
  width: min(64vw, 900px);
  aspect-ratio: 1;
  border: 1px solid rgba(99, 181, 255, .14);
  border-radius: 50%;
  right: -11vw;
  top: 14vh;
  z-index: -1;
}
.about-orbit-a { transform: rotateX(66deg) rotateZ(22deg); animation: orbitSpin 24s linear infinite; }
.about-orbit-b { inset: auto -10vw 0 auto; width: min(49vw, 650px); border-color: rgba(105, 221, 255, .10); transform: rotateX(69deg) rotateZ(-34deg); animation: orbitSpin 31s linear infinite reverse; }
.about-pulse {
  position: absolute;
  right: 22vw;
  top: 33vh;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 9px rgba(105, 221, 255, .12), 0 0 45px 18px rgba(79, 139, 255, .35);
  animation: pulseDot 2.6s ease-in-out infinite;
}
.about-hero-copy { position: relative; z-index: 2; max-width: 840px; }
.about-hero h1 {
  margin: 18px 0 25px;
  max-width: 860px;
  font-size: clamp(50px, 7vw, 106px);
  line-height: .95;
  letter-spacing: -.083em;
}
.about-lead {
  max-width: 620px;
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.7;
}
.about-hero-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 30px; }
.solid-link {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  padding: 15px 19px;
  color: #061120;
  background: #eef7ff;
  border: 1px solid #eef7ff;
  text-decoration: none;
  font: 500 10px DM Mono, monospace;
  letter-spacing: .08em;
  transition: .25s var(--ease);
}
.solid-link:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(118, 196, 255, .18); }
.about-status {
  position: relative;
  z-index: 2;
  justify-self: end;
  width: min(100%, 340px);
  padding: 22px;
  border: 1px solid rgba(151, 198, 255, .22);
  background: linear-gradient(145deg, rgba(10, 25, 51, .77), rgba(3, 10, 23, .58));
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.about-status-top { display: flex; align-items: center; gap: 8px; color: #b4c4db; font: 500 9px DM Mono, monospace; letter-spacing: .1em; }
.about-status-top .mini-dot { margin-right: 0; }
.about-status-number { display: flex; align-items: flex-end; gap: 14px; padding: 29px 0 22px; border-bottom: 1px solid rgba(157, 198, 255, .14); }
.about-status-number strong { font-size: 76px; letter-spacing: -.09em; line-height: .75; color: #f1f7ff; }
.about-status-number span { color: #b8c7dd; font: 500 9px/1.5 DM Mono, monospace; letter-spacing: .07em; padding-bottom: 3px; }
.about-status-list { display: grid; gap: 11px; padding-top: 19px; color: #b7c6dc; font: 500 10px DM Mono, monospace; letter-spacing: .04em; }
.about-status-list span { display: flex; align-items: center; gap: 10px; }
.about-status-list i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px var(--cyan); }
.about-scroll { position: absolute; left: 9vw; bottom: 36px; display: flex; gap: 12px; align-items: center; color: #9bb0cb; font: 500 9px DM Mono, monospace; letter-spacing: .12em; }
.about-scroll i { width: 38px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); }

.about-intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 9vw;
  padding: clamp(84px, 12vw, 180px) 9vw;
  background: #eaf3ff;
  color: #061120;
}
.about-intro .section-kicker { color: #3c6daa; }
.about-intro h2 { margin: 12px 0 0; max-width: 570px; font-size: clamp(38px, 4.7vw, 74px); letter-spacing: -.075em; line-height: .98; }
.about-intro > p { align-self: end; max-width: 650px; margin: 0; color: #38526d; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.65; }

.about-story {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr);
  gap: clamp(50px, 8vw, 140px);
  align-items: center;
  padding: clamp(105px, 15vw, 200px) 9vw;
  background: radial-gradient(circle at 74% 48%, rgba(33, 86, 194, .18), transparent 34%), #050b17;
}
.story-main h2 { margin: 15px 0 26px; max-width: 660px; font-size: clamp(39px, 5vw, 78px); line-height: .98; letter-spacing: -.078em; }
.story-main > p:not(.section-kicker) { max-width: 605px; color: var(--muted); font-size: 17px; line-height: 1.75; }
.story-system {
  position: relative;
  width: min(100%, 570px);
  aspect-ratio: 1;
  justify-self: end;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(81, 161, 255, .13), transparent 29%);
}
.story-system::before {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 1px solid rgba(119, 189, 255, .18);
  box-shadow: 0 0 0 52px rgba(96, 168, 255, .026), 0 0 0 113px rgba(96, 168, 255, .018);
}
.story-system-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 178px;
  height: 178px;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  gap: 7px;
  text-align: center;
  border: 1px solid rgba(121, 202, 255, .58);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(38, 98, 209, .55), rgba(7, 20, 48, .72) 61%, rgba(4, 10, 25, .22));
  box-shadow: 0 0 90px rgba(64, 141, 255, .25), inset 0 0 40px rgba(110, 205, 255, .16);
}
.story-system-core b { font: 700 13px DM Mono, monospace; letter-spacing: .13em; }
.story-system-core small { color: #bcd7f4; font: 500 7px DM Mono, monospace; letter-spacing: .09em; }
.system-eye { margin: 0 auto 5px; width: 23px; height: 23px; border: 1px solid #8cecff; border-radius: 50%; position: relative; box-shadow: 0 0 22px #58bcff; }
.system-eye::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #c0f5ff; box-shadow: 0 0 12px #8cecff; }
.story-ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(120, 192, 255, .24); border-radius: 50%; transform: translate(-50%, -50%); }
.story-ring span { position: absolute; color: #9fb7d4; font: 500 8px DM Mono, monospace; letter-spacing: .1em; }
.ring-one { width: 62%; aspect-ratio: 1; animation: orbitSpin 18s linear infinite; }
.ring-one span:nth-child(1) { left: 5%; top: 19%; }.ring-one span:nth-child(2) { right: 0; bottom: 20%; }
.ring-two { width: 88%; aspect-ratio: 1; border-style: dashed; animation: orbitSpin 29s linear infinite reverse; }
.ring-two span:nth-child(1) { left: 12%; bottom: 16%; }.ring-two span:nth-child(2) { right: 8%; top: 15%; }.ring-two span:nth-child(3) { left: 44%; top: -3%; }
.story-node { position: absolute; padding: 9px 11px; border: 1px solid rgba(121, 194, 255, .23); background: rgba(7, 16, 35, .82); color: #d6e8ff; font: 500 8px DM Mono, monospace; letter-spacing: .09em; box-shadow: 0 13px 30px rgba(0,0,0,.24); }
.node-one { left: 3%; top: 31%; }.node-two { right: 2%; top: 27%; }.node-three { left: 17%; bottom: 13%; }.node-four { right: 12%; bottom: 16%; }

.about-principles { padding: clamp(98px, 13vw, 175px) 9vw; background: #07101e; }
.about-principles > header { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw 9vw; align-items: end; max-width: 1240px; }
.about-principles h2 { margin: 12px 0 0; font-size: clamp(40px, 5vw, 78px); line-height: .97; letter-spacing: -.08em; }
.about-principles > header > p:last-child { margin: 0 0 7px; color: var(--muted); line-height: 1.7; font-size: 17px; max-width: 470px; }
.principles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 72px; background: rgba(123, 181, 255, .17); border: 1px solid rgba(123, 181, 255, .17); }
.principles-grid article { min-height: 260px; padding: 24px; background: #07101e; transition: .32s var(--ease); }
.principles-grid article:hover { background: #0a1930; transform: translateY(-5px); }
.principles-grid span { color: var(--cyan); font: 500 9px DM Mono, monospace; letter-spacing: .1em; }
.principles-grid h3 { font-size: 23px; line-height: 1.05; letter-spacing: -.05em; margin: 50px 0 13px; }
.principles-grid p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.7; }

.about-capability { display: grid; grid-template-columns: .85fr 1.15fr; gap: 7vw; align-items: center; padding: clamp(105px, 14vw, 190px) 9vw; background: linear-gradient(115deg, #e7f1ff 0%, #f2f7ff 54%, #e4f0ff 100%); color: #061120; }
.about-capability .section-kicker { color: #4779b7; }
.about-capability h2 { margin: 13px 0 19px; max-width: 580px; font-size: clamp(40px, 4.9vw, 76px); line-height: .98; letter-spacing: -.08em; }
.about-capability p:not(.section-kicker) { max-width: 520px; color: #48617d; font-size: 17px; line-height: 1.75; }
.capability-flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border: 1px solid rgba(32, 85, 143, .16); background: rgba(32, 85, 143, .16); box-shadow: 0 24px 80px rgba(47, 100, 158, .13); }
.capability-flow article { padding: 23px; min-height: 176px; background: rgba(255,255,255,.76); }
.capability-flow small { display: block; color: #5a83b5; font: 500 9px DM Mono, monospace; letter-spacing: .1em; }
.capability-flow b { display: block; margin: 45px 0 8px; font-size: 24px; letter-spacing: -.055em; }
.capability-flow span { display: block; color: #49637f; font-size: 14px; line-height: 1.6; }

.about-quote { position: relative; overflow: hidden; padding: clamp(110px, 16vw, 220px) 15vw; text-align: center; background: radial-gradient(circle at 50% 40%, rgba(42, 109, 236, .24), transparent 27%), #030711; }
.quote-mark { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); color: rgba(100, 189, 255, .24); font: 400 170px/1 Georgia, serif; }
.about-quote blockquote { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; font-size: clamp(38px, 5.8vw, 92px); line-height: .98; letter-spacing: -.08em; }
.about-quote p { margin: 32px 0 0; color: #a2b5cd; font: 500 9px DM Mono, monospace; letter-spacing: .14em; }

.about-assessment { margin-top: 0; }

@keyframes orbitSpin { to { transform: rotateX(66deg) rotateZ(382deg); } }
@keyframes pulseDot { 50% { transform: scale(1.45); box-shadow: 0 0 0 15px rgba(105, 221, 255, .07), 0 0 62px 25px rgba(79, 139, 255, .3); } }

@media (max-width: 980px) {
  .about-hero { grid-template-columns: 1fr; gap: 48px; padding: 135px 7vw 100px; }
  .about-status { justify-self: start; width: min(100%, 380px); }
  .about-grid { width: 92vw; right: -34vw; top: 16vh; }
  .about-orbit { width: 95vw; right: -40vw; }
  .about-pulse { right: 28vw; }
  .about-intro, .about-story, .about-principles > header, .about-capability { grid-template-columns: 1fr; }
  .about-intro { gap: 35px; }
  .about-story { gap: 70px; }
  .story-system { justify-self: center; }
  .about-principles > header { gap: 18px; }
  .about-capability { gap: 62px; }
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .about-hero { padding: 118px 7vw 82px; min-height: 850px; }
  .about-hero h1 { font-size: clamp(49px, 15vw, 72px); }
  .about-status { padding: 19px; }
  .about-status-number strong { font-size: 66px; }
  .about-scroll { left: 7vw; bottom: 24px; }
  .about-intro, .about-story, .about-principles, .about-capability { padding-left: 7vw; padding-right: 7vw; }
  .about-intro h2, .story-main h2, .about-principles h2, .about-capability h2 { font-size: 43px; }
  .story-system { width: 110%; margin-left: -5%; }
  .principles-grid, .capability-flow { grid-template-columns: 1fr; }
  .principles-grid article { min-height: 200px; }
  .principles-grid h3 { margin-top: 36px; }
  .about-quote { padding-left: 8vw; padding-right: 8vw; }
  .about-quote blockquote { font-size: 45px; }
}

/* =========================
   SCENARIO AI VOICE DEMO
   ========================= */
.scenario-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 6px; }
.scenario-btn { flex: 1 1 132px; text-align: left; cursor: pointer; padding: 12px 14px; border: 1px solid rgba(151,190,255,.22); background: rgba(6,14,31,.6); color: #cdddf3; transition: .28s var(--ease); }
.scenario-btn b { display: block; font: 600 12px Manrope, sans-serif; letter-spacing: -.01em; }
.scenario-btn small { display: block; margin-top: 4px; font: 500 8px DM Mono, monospace; letter-spacing: .09em; color: #8ea6c8; }
.scenario-btn:hover { border-color: rgba(116,205,255,.5); transform: translateY(-2px); }
.scenario-btn.active { border-color: var(--cyan); background: linear-gradient(135deg, rgba(105,221,255,.16), rgba(75,131,255,.06)); box-shadow: 0 0 30px rgba(105,221,255,.15); }
.scenario-btn.active small { color: var(--cyan); }

/* =========================
   PRODUCTS TEASER (home)
   ========================= */
.products { position: relative; z-index: 2; padding: 13vh 7vw; background: radial-gradient(circle at 20% 8%, rgba(37,95,219,.2), transparent 36%), #050914; }
.products-head { max-width: 760px; margin-bottom: 46px; }
.products-head > span { font: 500 9px DM Mono, monospace; letter-spacing: .13em; color: #7fa8ff; }
.products-head h2 { font-size: clamp(40px, 5vw, 72px); letter-spacing: -.075em; line-height: .98; margin: 16px 0; font-weight: 700; }
.products-head p { color: var(--muted); line-height: 1.7; max-width: 600px; }
.product-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.product-card { position: relative; overflow: hidden; padding: 32px; border: 1px solid rgba(151,190,255,.18); background: linear-gradient(145deg, rgba(13,29,60,.86), rgba(5,11,24,.94)); box-shadow: 0 18px 70px rgba(0,0,0,.22); transition: .35s var(--ease); }
.product-card:hover { transform: translateY(-6px); border-color: rgba(116,205,255,.5); }
.product-card.featured-product { background: radial-gradient(circle at 82% 12%, rgba(105,221,255,.16), transparent 34%), linear-gradient(145deg, rgba(16,39,82,.94), rgba(5,11,24,.96)); }
.product-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.product-tag { font: 500 9px DM Mono, monospace; letter-spacing: .11em; color: #9fbdff; border: 1px solid rgba(105,221,255,.28); padding: 6px 9px; }
.product-card .icon { font-size: 30px; color: var(--cyan); line-height: 1; }
.product-card h3 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.05em; margin: 0 0 12px; }
.product-card > p { color: var(--muted); line-height: 1.65; font-size: 14px; max-width: 440px; }
.tier-list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 1px; background: rgba(151,190,255,.14); border: 1px solid rgba(151,190,255,.14); }
.tier-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: rgba(7,15,32,.9); padding: 12px 14px; }
.tier-list b { font: 600 13px Manrope, sans-serif; }
.tier-list span { color: #93a9c9; font: 500 9px DM Mono, monospace; letter-spacing: .03em; text-align: right; }
.products-cta { margin-top: 34px; }

/* =========================
   PACKAGE FINDER
   ========================= */
.finder { position: relative; z-index: 2; padding: 13vh 7vw; background: radial-gradient(circle at 78% 82%, rgba(105,221,255,.12), transparent 42%), radial-gradient(circle at 14% 12%, rgba(37,95,219,.18), transparent 38%), #04091a; }
.finder-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.finder-head > span { font: 500 9px DM Mono, monospace; letter-spacing: .13em; color: var(--cyan); }
.finder-head h2 { font-size: clamp(38px, 4.6vw, 68px); letter-spacing: -.075em; line-height: 1; margin: 16px 0; font-weight: 700; }
.finder-head p { color: var(--muted); line-height: 1.7; }
.finder-card { position: relative; max-width: 720px; margin: 0 auto; min-height: 372px; padding: 40px clamp(20px, 4vw, 48px); border: 1px solid rgba(133,192,255,.32); background: rgba(6,15,32,.82); backdrop-filter: blur(16px); box-shadow: 0 34px 100px rgba(0,0,0,.42); overflow: hidden; }
.finder-progress { position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: rgba(123,178,255,.14); }
.finder-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 12px var(--cyan); transition: width .45s var(--ease); }
.finder-back { position: absolute; top: 18px; left: 18px; background: none; border: 0; color: #8ea6c8; font: 500 9px DM Mono, monospace; letter-spacing: .06em; cursor: pointer; padding: 6px; transition: .2s; }
.finder-back:hover { color: var(--cyan); }
.finder-stage > * { animation: finderIn .4s var(--ease) both; }
@keyframes finderIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.finder-q { font: 500 9px DM Mono, monospace; letter-spacing: .11em; color: var(--cyan); text-align: center; }
.finder-title { font-size: clamp(23px, 2.7vw, 34px); letter-spacing: -.05em; line-height: 1.1; text-align: center; margin: 12px 0 28px; font-weight: 700; }
.finder-options { display: grid; gap: 12px; max-width: 520px; margin: 0 auto; }
.finder-option { display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; width: 100%; padding: 17px 20px; border: 1px solid rgba(151,190,255,.22); background: rgba(9,19,40,.7); color: #e6f0ff; transition: .26s var(--ease); }
.finder-option:hover { border-color: var(--cyan); background: rgba(16,34,68,.8); transform: translateY(-2px); }
.finder-option .opt-icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(105,221,255,.4); border-radius: 50%; color: var(--cyan); font-size: 17px; }
.finder-option b { display: block; font: 600 15px Manrope, sans-serif; letter-spacing: -.01em; }
.finder-option small { display: block; margin-top: 3px; color: #95abcb; font: 400 12px Manrope, sans-serif; }
.finder-result { text-align: center; }
.result-eyebrow { font: 500 9px DM Mono, monospace; letter-spacing: .12em; color: var(--cyan); }
.result-name { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.05em; line-height: 1.05; margin: 12px 0 8px; font-weight: 700; }
.result-tier { display: inline-block; margin-bottom: 16px; font: 500 9px DM Mono, monospace; letter-spacing: .08em; color: #bfe6ff; border: 1px solid rgba(105,221,255,.35); padding: 6px 11px; }
.finder-result p { color: var(--muted); line-height: 1.7; max-width: 460px; margin: 0 auto 26px; }
.result-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.result-primary { cursor: pointer; text-decoration: none; padding: 15px 22px; background: #eef7ff; color: #061120; border: 1px solid #eef7ff; font: 500 10px DM Mono, monospace; letter-spacing: .07em; transition: .28s var(--ease); }
.result-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(118,196,255,.2); }
.result-restart { cursor: pointer; background: none; border: 1px solid rgba(151,190,255,.3); color: #d9ecff; padding: 15px 20px; font: 500 10px DM Mono, monospace; letter-spacing: .07em; transition: .24s; }
.result-restart:hover { border-color: var(--cyan); }

/* =========================
   PRODUCTS PAGE
   ========================= */
.products-page { background: #030711; }
.products-page .nav-links a.active { color: #fff; background: rgba(255,255,255,.08); }
.prod-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 82vh; display: grid; align-items: center; padding: 170px 9vw 92px; background: radial-gradient(ellipse at 68% 40%, rgba(36,95,210,.24), transparent 36%), radial-gradient(ellipse at 80% 72%, rgba(81,213,255,.1), transparent 33%), linear-gradient(130deg, #030711, #040c1d 52%, #030711); }
.prod-hero-copy { position: relative; z-index: 2; max-width: 920px; }
.prod-hero h1 { margin: 18px 0 24px; max-width: 920px; font-size: clamp(46px, 6.4vw, 96px); line-height: .96; letter-spacing: -.08em; font-weight: 700; }
.prod-family { position: relative; z-index: 2; padding: clamp(90px, 12vw, 160px) 9vw; background: #050b17; }
.prod-family.alt { background: linear-gradient(180deg, #07101e, #050b17); }
.prod-family-head { max-width: 720px; margin-bottom: 52px; }
.prod-family-head .section-kicker { color: var(--cyan); }
.prod-family-head h2 { font-size: clamp(40px, 5vw, 74px); letter-spacing: -.08em; line-height: .98; margin: 14px 0 18px; font-weight: 700; }
.prod-family-head p { color: var(--muted); line-height: 1.75; font-size: 16px; max-width: 620px; }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tier-card { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid rgba(151,190,255,.18); background: linear-gradient(155deg, rgba(12,26,54,.8), rgba(5,11,24,.9)); transition: .34s var(--ease); }
.tier-card:hover { transform: translateY(-6px); border-color: rgba(116,205,255,.5); }
.tier-card.featured-tier { border-color: rgba(105,221,255,.5); background: radial-gradient(circle at 80% 0%, rgba(105,221,255,.16), transparent 40%), linear-gradient(155deg, rgba(16,39,82,.92), rgba(5,11,24,.94)); box-shadow: 0 24px 80px rgba(9,26,62,.5); }
.tier-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tier-top b { font-size: 26px; letter-spacing: -.04em; }
.tier-tag { font: 500 8px DM Mono, monospace; letter-spacing: .09em; color: #9fbdff; border: 1px solid rgba(151,190,255,.3); padding: 5px 8px; }
.tier-tag.hot { color: #04121f; background: var(--cyan); border-color: var(--cyan); }
.tier-card > p { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
.feature-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.feature-list li { position: relative; padding-left: 22px; color: #cdddf3; font-size: 13.5px; line-height: 1.45; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 5px; border-left: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan); transform: rotate(-45deg); }
.feature-list.two-col { grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.tier-fit { color: #8ea6c8; font-size: 12.5px; line-height: 1.5; margin: 0 0 20px; }
.tier-fit b { color: #cddff5; font: 500 8px DM Mono, monospace; letter-spacing: .08em; display: block; margin-bottom: 4px; }
.tier-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; text-decoration: none; padding: 13px 17px; border: 1px solid rgba(105,221,255,.4); color: #e9f7ff; font: 500 9px DM Mono, monospace; letter-spacing: .07em; transition: .28s var(--ease); cursor: pointer; }
.tier-cta:hover { background: #eef7ff; color: #061120; border-color: #eef7ff; transform: translateY(-2px); }
.tier-cta span { transition: .28s var(--ease); }
.tier-cta:hover span { transform: translateX(3px); }
.includes-strip { border: 1px solid rgba(151,190,255,.2); background: rgba(8,17,35,.6); padding: 24px 28px; margin-bottom: 26px; }
.includes-title { display: block; font: 500 9px DM Mono, monospace; letter-spacing: .11em; color: var(--cyan); margin-bottom: 16px; }
.includes-strip ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 20px; }
.includes-strip li { position: relative; padding-left: 20px; color: #cdddf3; font-size: 13px; }
.includes-strip li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.vertical-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.vertical-card { padding: 30px; border: 1px solid rgba(151,190,255,.18); background: linear-gradient(155deg, rgba(12,26,54,.8), rgba(5,11,24,.9)); }
.vertical-card .icon { font-size: 26px; color: var(--cyan); }
.vertical-card h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.05em; margin: 0 0 12px; }
.vertical-card > p { color: var(--muted); font-size: 14px; line-height: 1.65; margin: 0 0 20px; }
.safety-note { color: #8ea6c8; font-size: 12.5px; line-height: 1.55; border-left: 2px solid rgba(105,221,255,.4); padding-left: 12px; margin: 4px 0 0; }
.coreplus { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 30px; }
.coreplus-col { padding: 26px 28px; border: 1px solid rgba(151,190,255,.18); background: rgba(8,17,35,.5); }
.coreplus-col.plus { border-color: rgba(105,221,255,.4); background: linear-gradient(135deg, rgba(105,221,255,.1), rgba(75,131,255,.04)); }
.coreplus-tag { display: inline-block; font: 500 9px DM Mono, monospace; letter-spacing: .1em; color: var(--cyan); border: 1px solid rgba(105,221,255,.35); padding: 5px 10px; margin-bottom: 14px; }
.coreplus-col h4 { font-size: 19px; letter-spacing: -.03em; margin: 0 0 8px; }
.coreplus-col p { color: var(--muted); font-size: 13.5px; line-height: 1.65; margin: 0; }
.frontoffice-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.tier-cta.ghosted { border-color: rgba(151,190,255,.3); color: #c6d8f2; }
.custom-note { margin: 20px 0 0; color: #8ea6c8; font-size: 13px; line-height: 1.6; max-width: 600px; }

@media (max-width: 980px) {
  .product-split, .tier-grid, .vertical-grid, .coreplus { grid-template-columns: 1fr; }
  .includes-strip ul { grid-template-columns: repeat(2, 1fr); }
  .products, .finder, .prod-family { padding-left: 7vw; padding-right: 7vw; }
}
@media (max-width: 700px) {
  .products, .finder { padding: 10vh 7vw; }
  .scenario-btn { flex: 1 1 100%; }
  .includes-strip ul, .feature-list.two-col { grid-template-columns: 1fr; }
  .finder-card { padding: 34px 18px; }
  .finder-option { padding: 15px 16px; gap: 12px; }
  .prod-hero { padding: 130px 7vw 80px; min-height: 78vh; }
  .prod-hero h1 { font-size: clamp(42px, 12vw, 62px); }
  .result-actions { flex-direction: column; }
  .result-primary, .result-restart { width: 100%; }
}

/* =========================
   SITE FOOTER
   ========================= */
.site-footer { display: block; position: relative; z-index: 2; background: #030711; border-top: 1px solid rgba(151,190,255,.14); padding: 0; color: #91a4bf; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 5vw; padding: 64px 7vw 44px; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 14px DM Mono, monospace; letter-spacing: .1em; }
.footer-tagline { margin: 18px 0 0; color: #cdddf3; font: 500 12px DM Mono, monospace; letter-spacing: .04em; }
.footer-blurb { margin: 14px 0 0; max-width: 360px; color: #8298b6; font-size: 13px; line-height: 1.7; }
.footer-col h4 { margin: 0 0 16px; color: #7f93b2; font: 500 9px DM Mono, monospace; letter-spacing: .13em; text-transform: uppercase; }
.footer-col a, .footer-col address { display: block; color: #b3c4dc; text-decoration: none; font-size: 14px; font-style: normal; line-height: 1.5; margin-bottom: 11px; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--cyan); }
.footer-col address { color: #8298b6; margin-top: 4px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 7vw; border-top: 1px solid rgba(151,190,255,.1); }
.footer-bottom small { margin-left: 0; color: #7288a6; font: 400 11px DM Mono, monospace; letter-spacing: .03em; }
.footer-cta { color: #d9ecff; text-decoration: none; font: 500 10px DM Mono, monospace; letter-spacing: .08em; border: 1px solid rgba(159,202,255,.3); padding: 11px 15px; transition: .28s var(--ease); }
.footer-cta:hover { background: #eef7ff; color: #061120; border-color: #eef7ff; }
.footer-cta span { color: var(--cyan); margin-left: 6px; }
.footer-cta:hover span { color: #061120; }
@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr; gap: 34px; padding: 48px 7vw 36px; }
}