:root {
  --black: #02080c;
  --black-soft: #071116;
  --ink: #111a20;
  --ink-2: #27343b;
  --white: #ffffff;
  --surface: #f2f5f5;
  --surface-2: #e8eded;
  --line: rgba(14, 37, 43, 0.14);
  --line-dark: rgba(71, 211, 213, 0.17);
  --muted: #65737a;
  --muted-dark: #8fa3aa;
  --teal: #0cc1b8;
  --cyan: #11add0;
  --blue: #0c94d2;
  --deep-blue: #0879bb;
  --display: "Krona One", "Arial Black", sans-serif;
  --body: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --container: min(1240px, calc(100vw - 64px));
  --header-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img { display: block; max-width: 100%; }
::selection { color: #001415; background: var(--teal); }

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 999; padding: 10px 16px; background: white; color: black; transform: translateY(-150%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.container { width: var(--container); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: 11px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
.dark-section { position: relative; overflow: hidden; background: var(--black); color: white; }
.light-section { background: var(--white); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); color: white; border-bottom: 1px solid rgba(255,255,255,.09); transition: background .25s, border-color .25s, height .25s; }
.site-header.scrolled { background: rgba(2,8,12,.91); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-color: rgba(68,211,210,.16); }
.header-inner { width: var(--container); height: 100%; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.desktop-nav a, .text-link { font-size: 14px; font-weight: 500; }
.desktop-nav a { color: #c7d4d8; transition: color .2s; }
.desktop-nav a:hover, .text-link:hover { color: var(--teal); }
.header-actions { display: flex; align-items: center; gap: 22px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: 3px; font-weight: 600; font-size: 14px; transition: transform .2s, color .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.button-small { min-height: 40px; padding: 0 17px; background: white; color: var(--black); }
.button-small:hover { background: var(--teal); }
.button-primary { color: #001011; background: linear-gradient(120deg, #16d5c9, #159dd8); box-shadow: 0 0 0 1px rgba(94,255,244,.16) inset, 0 12px 40px rgba(5,177,189,.14); }
.button-primary:hover { background: linear-gradient(120deg, #27e0d4, #28afe7); box-shadow: 0 0 35px rgba(12,193,184,.22); }
.button-secondary { color: white; border-color: rgba(255,255,255,.23); background: rgba(255,255,255,.04); }
.button-secondary:hover { border-color: rgba(52,220,216,.6); background: rgba(12,193,184,.08); }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: #16323a; }
.menu-button { display: none; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; background: transparent; }
.menu-button span { display: block; width: 17px; height: 1px; margin: 5px auto; background: white; transition: transform .2s; }
.mobile-nav { display: none; }

.technical-grid { position: absolute; inset: 0; pointer-events: none; opacity: .38; background-image: linear-gradient(rgba(27,181,186,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(27,181,186,.16) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(to bottom, black 0, rgba(0,0,0,.82) 55%, transparent 100%); }
.technical-grid::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(65,216,213,.28) 1px, transparent 1px), linear-gradient(90deg, rgba(65,216,213,.28) 1px, transparent 1px); background-size: 304px 304px; }
.technical-grid.fine { opacity: .23; background-size: 48px 48px; mask-image: none; }
.technical-grid.fine::after { background-size: 240px 240px; }
.ambient { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; opacity: .18; }
.ambient-one { width: 540px; height: 540px; right: 6%; top: 8%; background: var(--teal); }
.ambient-two { width: 430px; height: 430px; left: -12%; top: 35%; background: var(--blue); opacity: .08; }

.hero { min-height: 100vh; padding-top: var(--header-h); }
.hero-inner { position: relative; z-index: 2; width: var(--container); min-height: 790px; margin-inline: auto; padding: 116px 0 94px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(530px, .92fr); align-items: center; gap: 72px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 25px; color: #a7bbc0; font-family: var(--mono); font-size: 11px; line-height: 1.3; letter-spacing: .11em; text-transform: uppercase; }
.pulse { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }
.pulse::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(23,211,200,.55); border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { transform: scale(.65); opacity: 0; } 45% { transform: scale(1); opacity: 1; } }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 730px; margin-bottom: 28px; font-family: var(--display); font-size: clamp(48px, 4.6vw, 70px); font-weight: 400; line-height: 1.08; letter-spacing: -.055em; }
.gradient-text { display: block; color: transparent; background: linear-gradient(100deg, #22d9cd 10%, #14a5d4 65%, #1184cb); background-clip: text; -webkit-background-clip: text; }
.hero-lede { max-width: 640px; margin-bottom: 35px; color: #b8c6ca; font-size: 19px; line-height: 1.55; letter-spacing: -.01em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 9px 20px; margin-top: 37px; color: #82979d; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust span::before { content: ""; width: 4px; height: 4px; background: var(--teal); transform: rotate(45deg); }

.hero-system { position: relative; perspective: 1200px; }
.system-shell { position: relative; min-height: 604px; padding: 25px; border: 1px solid rgba(74,218,216,.22); background: linear-gradient(145deg, rgba(13,34,41,.92), rgba(3,11,16,.96)); box-shadow: 0 35px 100px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.025) inset; transform: rotateY(-2deg); overflow: hidden; }
.system-shell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(13,193,184,.06) 50%, transparent 70%); transform: translateX(-100%); animation: scan 8s ease-in-out infinite; }
@keyframes scan { 0%,22% { transform: translateX(-100%); } 70%,100% { transform: translateX(100%); } }
.system-label { position: absolute; top: 26px; left: 26px; color: #6d8a91; }
.system-status { position: absolute; top: 22px; right: 24px; display: flex; align-items: center; gap: 7px; color: #9ab0b6; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.system-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 9px var(--teal); }
.source-stack { position: relative; z-index: 2; display: grid; gap: 8px; margin-top: 46px; }
.source-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 13px; min-height: 64px; padding: 10px 14px; border: 1px solid rgba(95,210,210,.12); background: rgba(7,22,28,.77); animation: sourceIn .8s both; }
.source-two { animation-delay: .14s; transform: translateX(12px); }
.source-three { animation-delay: .28s; transform: translateX(24px); }
@keyframes sourceIn { from { opacity: 0; margin-left: -20px; } to { opacity: 1; margin-left: 0; } }
.source-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(35,216,208,.34); background: rgba(12,193,184,.08); color: #54ddd6; font-family: var(--mono); font-size: 11px; }
.source-row strong { display: block; color: #d9e5e7; font-size: 13px; font-weight: 500; }
.source-row span { display: block; color: #6e858b; font-family: var(--mono); font-size: 9px; }
.source-row b { color: #49636a; font-family: var(--mono); font-size: 10px; font-weight: 400; }
.translation-core { position: relative; z-index: 2; display: grid; grid-template-columns: 74px 1fr 50px; align-items: center; gap: 18px; min-height: 120px; margin: 23px 18px 22px; padding: 16px 20px; border: 1px solid rgba(35,219,210,.29); background: linear-gradient(90deg, rgba(12,193,184,.10), rgba(12,148,210,.08)); box-shadow: 0 0 35px rgba(12,193,184,.07) inset; }
.translation-core::before, .translation-core::after { content: ""; position: absolute; left: 50%; width: 1px; height: 24px; background: linear-gradient(var(--teal), transparent); }
.translation-core::before { top: -24px; }
.translation-core::after { bottom: -24px; transform: rotate(180deg); }
.core-logo-wrap { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.19); }
.core-logo-wrap img { width: 54px; height: 54px; }
.core-copy span { color: var(--teal); }
.core-copy strong { display: block; margin: 7px 0 2px; font-size: 15px; font-weight: 500; }
.core-copy small { display: block; color: #81969c; font-size: 11px; }
.core-lines { display: grid; gap: 6px; }
.core-lines i { height: 1px; background: linear-gradient(90deg, var(--teal), transparent); animation: lineFlow 1.8s ease-in-out infinite; }
.core-lines i:nth-child(2) { animation-delay: .3s; }
.core-lines i:nth-child(3) { animation-delay: .6s; }
@keyframes lineFlow { 0%,100% { opacity: .2; transform: scaleX(.4); transform-origin: left; } 50% { opacity: 1; transform: scaleX(1); } }
.output-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.output-tile { min-height: 83px; padding: 13px 14px; border: 1px solid rgba(90,199,207,.13); background: rgba(9,25,31,.73); }
.output-tile strong, .output-tile small { display: block; }
.output-tile strong { margin: 8px 0 1px; color: #d9e5e7; font-size: 12px; font-weight: 500; }
.output-tile small { color: #6d858b; font-size: 10px; }
.output-dot { display: block; width: 7px; height: 7px; transform: rotate(45deg); }
.output-dot.teal { background: var(--teal); }.output-dot.cyan { background: var(--cyan); }.output-dot.blue { background: var(--blue); }.output-dot.deep { background: var(--deep-blue); }
.hero-foot { position: relative; z-index: 2; display: grid; grid-template-columns: 190px 1fr; gap: 50px; align-items: start; padding: 34px 0 38px; border-top: 1px solid rgba(111,215,214,.16); }
.hero-foot span { color: var(--teal); }
.hero-foot p { max-width: 750px; margin: 0; color: #8fa2a8; font-size: 15px; }
.hero-foot strong { color: #e6eeee; font-weight: 500; }

.problem { padding: 130px 0 150px; }
.section-intro { display: grid; grid-template-columns: 170px minmax(0, 1.3fr) minmax(250px, .58fr); gap: 42px; align-items: start; margin-bottom: 80px; }
.section-index { color: #0a9897; padding-top: 13px; }
.section-intro h2, .principles-header h2, .company h2, .final-cta h2 { margin-bottom: 0; font-family: var(--display); font-size: clamp(37px, 4.3vw, 62px); font-weight: 400; line-height: 1.12; letter-spacing: -.045em; }
.section-intro > p:last-child { color: var(--muted); font-size: 17px; line-height: 1.65; padding-top: 11px; }
.section-intro.inverse > p:last-child { color: var(--muted-dark); }
.gap-comparison { display: grid; grid-template-columns: 1fr 42px 1fr; align-items: center; }
.gap-side { min-height: 450px; padding: 28px; border: 1px solid var(--line); background: var(--surface); }
.gap-before { color: #748086; background: #f5f6f6; }
.gap-after { color: white; border-color: rgba(16,177,181,.22); background: var(--ink); box-shadow: 0 30px 80px rgba(9,31,38,.14); }
.gap-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.gap-heading span { color: #849096; }.gap-after .gap-heading span { color: var(--teal); }
.gap-heading b { font-size: 13px; font-weight: 500; }
.fragment-map { position: relative; height: 255px; overflow: hidden; }
.fragment-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fragment-map path { fill: none; stroke: #b8c0c3; stroke-width: 1; stroke-dasharray: 3 4; }
.fragment-map circle { fill: #889499; }
.fragment { position: absolute; z-index: 2; padding: 8px 11px; border: 1px solid #cfd5d6; background: #fff; font-family: var(--mono); font-size: 9px; }
.f1 { left: 2%; top: 13%; }.f2 { left: 33%; top: 36%; }.f3 { right: 2%; top: 8%; }.f4 { left: 8%; bottom: 10%; }.f5 { right: 0; bottom: 14%; }
.gap-side > p { margin: 20px 0 0; color: #77858a; font-size: 13px; }.gap-after > p { color: #82989f; }
.comparison-arrow { color: #0aa6a4; font-family: var(--mono); font-size: 22px; text-align: center; }
.record-preview { min-height: 255px; padding: 22px; border: 1px solid rgba(75,213,211,.18); background: linear-gradient(135deg, rgba(12,193,184,.07), rgba(0,0,0,.1)); }
.record-top { display: grid; grid-template-columns: 1fr auto; gap: 1px 15px; padding-bottom: 17px; border-bottom: 1px solid rgba(255,255,255,.09); }
.record-top span { color: #879ba0; font-size: 11px; }.record-top b { grid-row: 2; font-family: var(--mono); font-size: 13px; font-weight: 400; }.record-top i { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 4px 8px; color: var(--teal); border: 1px solid rgba(12,193,184,.3); font-family: var(--mono); font-size: 8px; font-style: normal; text-transform: uppercase; }
.record-preview dl { margin: 12px 0; }.record-preview dl div { display: grid; grid-template-columns: 1fr auto; padding: 5px 0; }.record-preview dt { color: #789097; font-size: 11px; }.record-preview dd { margin: 0; color: #c7d4d7; font-family: var(--mono); font-size: 10px; }
.record-outputs { display: flex; flex-wrap: wrap; gap: 6px; }.record-outputs span { padding: 5px 7px; background: rgba(255,255,255,.05); color: #91a7ac; font-family: var(--mono); font-size: 8px; }

.platform { padding: 140px 0; }
.platform .container { position: relative; z-index: 2; }
.engine-stage { border: 1px solid rgba(78,204,205,.2); background: #061015; }
.engine-tabs { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid rgba(78,204,205,.16); }
.engine-tab { padding: 21px; color: #71878d; border: 0; border-right: 1px solid rgba(78,204,205,.12); background: transparent; text-align: left; font-size: 14px; cursor: pointer; transition: color .2s, background .2s; }
.engine-tab span { margin-right: 10px; color: #3e5b62; font-family: var(--mono); font-size: 9px; }
.engine-tab.active { color: white; background: rgba(12,193,184,.08); box-shadow: inset 0 -2px 0 var(--teal); }.engine-tab.active span { color: var(--teal); }
.engine-panel { min-height: 440px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 60px; padding: 62px; }
.engine-copy > span { color: var(--teal); }
.engine-copy h3 { margin: 17px 0; font-family: var(--display); font-size: 29px; font-weight: 400; line-height: 1.25; letter-spacing: -.035em; }
.engine-copy p { color: var(--muted-dark); font-size: 15px; }
.engine-copy ul { list-style: none; margin: 25px 0 0; padding: 0; }
.engine-copy li { position: relative; padding: 8px 0 8px 19px; color: #b4c2c6; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; }
.engine-copy li::before { content: ""; position: absolute; left: 1px; top: 16px; width: 5px; height: 5px; background: var(--teal); transform: rotate(45deg); }
.engine-visual { position: relative; min-height: 310px; display: grid; place-items: center; border: 1px solid rgba(63,192,197,.13); background: linear-gradient(135deg, rgba(12,193,184,.055), transparent 60%), repeating-linear-gradient(0deg, transparent 0 31px, rgba(49,153,160,.06) 32px); overflow: hidden; }
.data-stream { width: min(420px, 82%); border: 1px solid rgba(40,210,205,.2); background: rgba(3,10,14,.8); box-shadow: 0 22px 60px rgba(0,0,0,.35); }
.data-stream div { display: grid; grid-template-columns: 1fr 1.4fr; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.06); font-family: var(--mono); font-size: 9px; }.data-stream div:last-child { border-bottom: 0; }.data-stream span { color: #537078; }.data-stream b { color: #a9bfc3; font-weight: 400; }
.stream-indicator { position: absolute; right: 20px; display: grid; gap: 18px; }.stream-indicator span { width: 3px; height: 3px; background: var(--teal); box-shadow: 0 0 8px var(--teal); animation: stream 1.6s infinite; }.stream-indicator span:nth-child(2){animation-delay:.2s}.stream-indicator span:nth-child(3){animation-delay:.4s}.stream-indicator span:nth-child(4){animation-delay:.6s}
@keyframes stream { 0%,100% { opacity: .2; transform: translateY(-4px); } 50% { opacity: 1; transform: translateY(4px); } }
.capability-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 80px; border-top: 1px solid rgba(69,198,199,.17); border-left: 1px solid rgba(69,198,199,.17); }
.capability-grid article { min-height: 300px; display: flex; flex-direction: column; padding: 27px; border-right: 1px solid rgba(69,198,199,.17); border-bottom: 1px solid rgba(69,198,199,.17); background: rgba(5,17,22,.7); transition: background .2s, transform .2s; }.capability-grid article:hover { background: rgba(10,40,47,.75); transform: translateY(-4px); }
.cap-num { color: var(--teal); }
.capability-grid h3 { margin: auto 0 13px; font-size: 20px; font-weight: 500; }
.capability-grid p { min-height: 66px; color: #83979d; font-size: 13px; }
.capability-grid a { color: #c8d8da; font-size: 12px; }.capability-grid a span { color: var(--teal); margin-left: 5px; }

.use-cases { padding: 140px 0; }
.use-case-list { border-top: 1px solid var(--line); }
.use-case { min-height: 430px; display: grid; grid-template-columns: 130px minmax(300px, .8fr) minmax(380px, 1.2fr); align-items: center; gap: 40px; padding: 50px 0; border-bottom: 1px solid var(--line); }
.use-case-number { align-self: start; padding-top: 10px; color: #159b9a; }
.use-case-copy .mono { color: #159b9a; }.use-case-copy h3 { margin: 17px 0; font-family: var(--display); font-size: 29px; font-weight: 400; line-height: 1.25; letter-spacing: -.035em; }.use-case-copy > p:last-child { color: var(--muted); font-size: 15px; }
.use-case-art { position: relative; justify-self: end; width: min(510px, 100%); height: 300px; border: 1px solid var(--line); background-color: var(--surface); background-image: linear-gradient(rgba(19,95,102,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(19,95,102,.08) 1px, transparent 1px); background-size: 32px 32px; overflow: hidden; }
.coin { position: absolute; z-index: 3; left: 60px; top: 100px; display: grid; place-items: center; width: 80px; height: 80px; border: 1px solid rgba(11,164,166,.35); border-radius: 50%; background: white; color: #0b9799; font-family: var(--mono); font-size: 23px; box-shadow: 0 20px 55px rgba(19,79,86,.12); }
.rail { position: absolute; left: 130px; width: 185px; height: 1px; background: linear-gradient(90deg,#0cc1b8,#0c94d2); transform-origin: left; }.r1{top:122px;transform:rotate(-15deg)}.r2{top:140px}.r3{top:158px;transform:rotate(15deg)}
.ledger-sheet { position: absolute; right: 55px; top: 67px; width: 130px; height: 164px; padding: 32px 20px; border: 1px solid rgba(10,144,157,.25); background: white; box-shadow: 0 20px 60px rgba(15,73,78,.13); }.ledger-sheet::before { content: "PAYMENT"; color: #149b9b; font-family: var(--mono); font-size: 8px; }.ledger-sheet span { display: block; height: 1px; margin-top: 20px; background: #d1dddd; }
.http-card, .response-card { position: absolute; top: 96px; width: 135px; height: 105px; display: grid; place-content: center; border: 1px solid rgba(8,151,162,.25); background: white; color: #6b7d83; font-family: var(--mono); font-size: 9px; box-shadow: 0 18px 50px rgba(12,71,77,.1); }.http-card{left:42px}.response-card{right:42px}.http-card b{display:block;color:#159b9b;font-size:31px;font-weight:400;text-align:center}.response-card{color:#159b9b;font-size:25px}.response-card span{display:block;color:#72868b;font-size:8px}
.api-flow { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:13px}.api-flow i{width:9px;height:9px;background:var(--teal);transform:rotate(45deg);animation:flowDot 1.8s infinite}.api-flow i:nth-child(2){animation-delay:.25s}.api-flow i:nth-child(3){animation-delay:.5s}@keyframes flowDot{0%,100%{opacity:.15;transform:translateX(-8px) rotate(45deg)}50%{opacity:1;transform:translateX(8px) rotate(45deg)}}
.hub { position:absolute;left:50%;top:50%;display:grid;place-items:center;width:96px;height:96px;border:1px solid rgba(11,181,181,.27);background:white;transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 18px 50px rgba(12,71,77,.1)}.hub img{width:63px;transform:rotate(-45deg)}
.satellite{position:absolute;display:grid;place-items:center;width:72px;height:40px;border:1px solid #c8d6d7;background:white;color:#537078;font-family:var(--mono);font-size:8px}.satellite::after{content:"";position:absolute;height:1px;background:linear-gradient(90deg,#86bfc0,#0cc1b8)}.s1{left:40px;top:45px}.s1::after{width:150px;left:72px;top:39px;transform:rotate(23deg);transform-origin:left}.s2{right:40px;top:45px}.s2::after{width:150px;right:72px;top:39px;transform:rotate(-23deg);transform-origin:right}.s3{left:40px;bottom:45px}.s3::after{width:150px;left:72px;bottom:39px;transform:rotate(-23deg);transform-origin:left}.s4{right:40px;bottom:45px}.s4::after{width:150px;right:72px;bottom:39px;transform:rotate(23deg);transform-origin:right}

.x402-section { padding: 145px 0; }
.x402-inner { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.x402-copy h2 { margin: 22px 0 26px; font-family: var(--display); font-size: clamp(37px,4vw,55px); font-weight: 400; line-height: 1.13; letter-spacing: -.045em; }.x402-copy h2 span { color: transparent; background: linear-gradient(90deg,var(--teal),var(--blue)); background-clip:text;-webkit-background-clip:text }.x402-copy > p:not(.section-index) { max-width: 590px; color: var(--muted-dark); font-size: 16px; }
.x402-actions { display:flex;align-items:center;gap:24px;margin-top:33px;flex-wrap:wrap}.inverse-link{color:#b8c8cb}
.protocol-flow{position:relative;display:grid;gap:0;padding:24px;border:1px solid rgba(62,202,202,.2);background:rgba(4,16,21,.8)}.protocol-node{min-height:98px;padding:19px 22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}.protocol-node span{color:#5f7a81}.protocol-node strong,.protocol-node small{display:block}.protocol-node strong{margin:8px 0 2px;font-size:16px;font-weight:500}.protocol-node small{color:#70868c;font-family:var(--mono);font-size:9px}.protocol-node.emphasized{border-color:rgba(12,193,184,.33);background:linear-gradient(90deg,rgba(12,193,184,.1),rgba(12,148,210,.06))}.protocol-node.emphasized span{color:var(--teal)}
.protocol-connector{position:relative;height:66px;padding-left:82px;display:flex;align-items:center}.protocol-connector b{position:absolute;left:22px;display:grid;place-items:center;width:38px;height:24px;border:1px solid rgba(12,193,184,.35);color:var(--teal);font-family:var(--mono);font-size:9px;font-weight:400}.protocol-connector i{position:absolute;left:41px;top:24px;width:1px;height:18px;background:linear-gradient(var(--teal),transparent)}.protocol-connector small{color:#5f747b;font-family:var(--mono);font-size:9px}

.developers { padding: 145px 0; background: var(--surface); }
.developers-grid { display:grid;grid-template-columns:.82fr 1.18fr;gap:100px;align-items:center}.developer-copy h2{margin:22px 0 26px;font-family:var(--display);font-size:clamp(37px,4vw,55px);font-weight:400;line-height:1.14;letter-spacing:-.045em}.developer-copy>p:not(.section-index){color:var(--muted);font-size:16px}.developer-links{display:flex;align-items:center;gap:25px;margin-top:32px;flex-wrap:wrap}.sdk-row{display:flex;flex-wrap:wrap;gap:13px 20px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line)}.sdk-row span{width:100%;color:#159b9b}.sdk-row b{color:#67777d;font-size:11px;font-weight:500}
.code-window{border:1px solid #20383e;background:#061116;color:#cad7da;box-shadow:0 30px 75px rgba(8,31,37,.16)}.code-bar{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08)}.code-bar>div{display:flex;gap:6px}.code-bar i{display:block;width:7px;height:7px;border-radius:50%;background:#284148}.code-bar>span{color:#688188}.code-bar button{padding:5px 8px;border:1px solid rgba(255,255,255,.11);background:transparent;color:#8fa5aa;font-family:var(--mono);font-size:8px;cursor:pointer}.code-window pre{margin:0;padding:30px;overflow:auto;font-family:var(--mono);font-size:11px;line-height:1.8}.c-muted{color:#4d6a71}.c-key{color:#1cc9c0}.c-string{color:#6bb8e5}.code-response{display:grid;grid-template-columns:100px 1fr;gap:15px;padding:17px 25px;border-top:1px solid rgba(255,255,255,.08);background:rgba(12,193,184,.05)}.code-response span{color:var(--teal)}.code-response code{color:#8ca2a7;font-family:var(--mono);font-size:9px}

.principles { padding: 135px 0; }
.principles-header { display:grid;grid-template-columns:170px 1fr;gap:42px;margin-bottom:70px}.principles-header .section-index{padding-top:13px}.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.principle-grid article{min-height:285px;padding:27px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.principle-glyph{display:grid;place-items:center;width:43px;height:43px;border:1px solid rgba(12,166,166,.24);color:#0b9e9d;font-family:var(--mono)}.principle-grid h3{margin:72px 0 13px;font-size:18px;font-weight:600}.principle-grid p{color:var(--muted);font-size:13px}

.company{padding:140px 0}.company-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:120px;align-items:start}.company h2{max-width:760px}.company-copy p{color:#91a4a9;font-size:17px}.company-copy .text-link{display:inline-block;margin-top:18px;color:white}
.team{padding:140px 0;background:var(--surface)}.team-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.team-member{min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.62)}.team-portrait{width:100%;height:430px;object-fit:cover;object-position:center top;border-bottom:1px solid var(--line);filter:saturate(.84) contrast(1.02)}.team-content{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 18px;padding:30px}.team-index{grid-row:1/4;color:#159b9a;padding-top:7px}.team-heading h3{margin:0 0 7px;font-family:var(--display);font-size:23px;font-weight:400;line-height:1.2;letter-spacing:-.035em}.team-heading p{margin:0;color:#738188;font-size:14px}.team-bio{margin-top:25px;padding-top:22px;border-top:1px solid var(--line)}.team-bio p{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.65}.team-bio p:last-child{margin-bottom:0}.team-links{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px}.team-links a{color:#4f666d;font-size:12px;font-weight:600}.team-links a:hover{color:#0a9897}.careers-band{display:grid;grid-template-columns:1fr .75fr auto;align-items:center;gap:50px;margin-top:45px;padding:36px;border:1px solid var(--line);background:white}.careers-band span{color:#159b9a}.careers-band h3{max-width:520px;margin:13px 0 0;font-size:21px;font-weight:600}.careers-band p{margin:0;color:var(--muted);font-size:14px}
.final-cta{padding:145px 0;text-align:center}.final-cta .technical-grid{opacity:.2}.cta-orbit{position:absolute;left:50%;top:50%;width:650px;height:650px;transform:translate(-50%,-50%);border:1px solid rgba(12,193,184,.07);border-radius:50%}.cta-orbit::before,.cta-orbit::after{content:"";position:absolute;inset:75px;border:1px solid rgba(12,193,184,.08);border-radius:50%}.cta-orbit::after{inset:170px}.cta-orbit span{position:absolute;width:9px;height:9px;background:var(--teal);transform:rotate(45deg);box-shadow:0 0 15px var(--teal)}.cta-orbit span:nth-child(1){left:74px;top:107px}.cta-orbit span:nth-child(2){right:67px;top:158px;background:var(--cyan)}.cta-orbit span:nth-child(3){left:50%;bottom:71px;background:var(--blue)}
.final-cta-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}.final-cta-inner>img{margin-bottom:25px}.final-cta-inner>p.mono{color:var(--teal)}.final-cta h2{max-width:940px;margin:23px auto 25px}.final-cta-inner>p:not(.mono){max-width:590px;color:#91a5aa;font-size:17px}.final-cta-inner>div:last-child{display:flex;gap:12px;margin-top:25px}

.site-footer{padding:60px 0 26px;background:#010508;color:white;border-top:1px solid rgba(57,198,199,.15)}.footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}.footer-top p{max-width:430px;margin:0;color:#789097;font-size:14px;text-align:right}.footer-grid{display:grid;grid-template-columns:.65fr .65fr .65fr 1.3fr;gap:60px;padding:55px 0}.footer-grid>div{display:flex;flex-direction:column;gap:9px}.footer-grid span{margin-bottom:10px;color:#56737a}.footer-grid a{color:#a3b3b7;font-size:13px}.footer-grid a:hover{color:var(--teal)}.footer-note{padding-left:30px;border-left:1px solid rgba(255,255,255,.1)}.footer-note p{color:#668087;font-size:11px}.footer-bottom{display:flex;justify-content:space-between;padding-top:22px;border-top:1px solid rgba(255,255,255,.08);color:#506970;font-family:var(--mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase}

/* Content stays visible without JavaScript and during full-page capture. */
.reveal { opacity: 1; transform: none; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  :root { --container: min(100% - 42px, 1000px); }
  .desktop-nav { display: none; }.menu-button{display:block}.desktop-only{display:none}.mobile-nav.open{display:flex;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;padding:20px 22px 30px;background:rgba(2,8,12,.98);border-bottom:1px solid rgba(54,206,203,.18)}.mobile-nav a{padding:13px 0;color:#c6d3d6;border-bottom:1px solid rgba(255,255,255,.07)}
  .hero-inner { grid-template-columns: 1fr; padding-top: 100px; gap: 60px; }.hero-copy{max-width:780px}.hero-system{max-width:730px;margin-inline:auto;width:100%}
  .section-intro { grid-template-columns: 125px 1fr; }.section-intro>p:last-child{grid-column:2;max-width:680px;margin-top:-22px}
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .use-case { grid-template-columns: 80px 1fr; }.use-case-art{grid-column:2;justify-self:start;width:100%}
  .x402-inner,.developers-grid,.company-inner{grid-template-columns:1fr;gap:65px}.protocol-flow{max-width:720px}.code-window{max-width:760px;width:100%}.principle-grid{grid-template-columns:1fr 1fr}.careers-band{grid-template-columns:1fr 1fr}.careers-band .button{grid-column:1/-1;justify-self:start}.footer-grid{grid-template-columns:1fr 1fr}.footer-note{padding-left:0;border-left:0}
}

@media (max-width: 720px) {
  :root { --container: calc(100% - 48px); --header-h: 66px; }
  body{font-size:15px}.site-header{height:var(--header-h)}.brand span{font-size:16px}.brand img{width:30px;height:30px}.button-small{display:none}.header-actions{gap:12px}
  .hero-inner{min-height:auto;padding:86px 0 65px;gap:48px;grid-template-columns:minmax(0,1fr);overflow:hidden}.hero-copy,.hero-system{min-width:0;width:100%;max-width:100%;overflow:hidden}.hero-copy>*{max-width:100%}.eyebrow{font-size:8px}h1{font-size:30px;line-height:1.16;letter-spacing:-.045em}.hero-lede{font-size:16px;overflow-wrap:anywhere}.hero-actions{display:grid;max-width:100%}.hero-actions .button{width:100%;max-width:100%}.hero-trust{display:grid;grid-template-columns:1fr 1fr;font-size:8px}.system-shell{min-height:545px;padding:16px}.system-label{left:17px;top:20px}.system-status{right:16px;top:16px}.source-stack{margin-top:44px}.source-row{grid-template-columns:34px 1fr auto;min-height:58px;padding:7px 9px}.source-icon{width:31px;height:31px}.source-row strong{font-size:11px}.source-row span{font-size:7px}.translation-core{grid-template-columns:54px 1fr;margin:18px 7px;padding:13px}.core-logo-wrap{width:52px;height:52px}.core-logo-wrap img{width:42px;height:42px}.core-lines{display:none}.core-copy strong{font-size:12px}.core-copy small{font-size:8px}.output-tile{min-height:72px;padding:10px}.output-tile strong{font-size:10px}.output-tile small{font-size:8px}.hero-foot{grid-template-columns:1fr;gap:15px;padding:26px 0}.technical-grid{background-size:48px 48px}.technical-grid::after{background-size:192px 192px}
  .problem,.platform,.use-cases,.x402-section,.developers,.principles,.company,.team,.final-cta{padding:90px 0}.section-intro{grid-template-columns:1fr;gap:18px;margin-bottom:48px}.section-intro>p:last-child{grid-column:auto;margin:0;padding-top:0}.section-intro h2,.principles-header h2,.company h2,.final-cta h2{font-size:clamp(32px,10vw,44px)}.section-index{padding:0}.gap-comparison{grid-template-columns:1fr;gap:14px}.comparison-arrow{transform:rotate(90deg)}.gap-side{min-height:415px;padding:20px}
  .engine-tabs{grid-template-columns:1fr 1fr}.engine-tab{padding:16px}.engine-panel{grid-template-columns:1fr;gap:32px;padding:25px;min-height:610px}.engine-copy h3{font-size:24px}.engine-visual{min-height:250px}.capability-grid{grid-template-columns:1fr;margin-top:50px}.capability-grid article{min-height:230px}.capability-grid h3{margin-top:50px}
  .use-case{grid-template-columns:1fr;gap:15px;padding:38px 0}.use-case-number{padding:0}.use-case-art{grid-column:auto;height:260px}.use-case-copy h3{font-size:24px}.coin{left:26px}.ledger-sheet{right:25px}.rail{left:95px;width:150px}.http-card{left:15px}.response-card{right:15px}.http-card,.response-card{width:110px}.satellite{width:57px}.s1,.s3{left:15px}.s2,.s4{right:15px}.s1::after,.s2::after,.s3::after,.s4::after{width:110px}.s1::after,.s3::after{left:57px}.s2::after,.s4::after{right:57px}
  .x402-copy h2,.developer-copy h2{font-size:clamp(32px,10vw,44px)}.x402-actions,.developer-links{align-items:flex-start;flex-direction:column}.protocol-flow{padding:14px}.protocol-node{min-height:88px}.developers-grid{gap:50px}.code-window pre{padding:18px;font-size:9px}.code-response{grid-template-columns:1fr}.sdk-row{gap:10px 15px}
  .principles-header{grid-template-columns:1fr;gap:18px}.principle-grid{grid-template-columns:1fr}.principle-grid article{min-height:230px}.principle-grid h3{margin-top:48px}.company-inner{gap:45px}.team-grid{grid-template-columns:1fr}.team-portrait{height:auto;aspect-ratio:4/4.35}.team-content{padding:24px;grid-template-columns:27px minmax(0,1fr);gap:0 12px}.team-heading h3{font-size:20px}.team-bio{margin-top:20px;padding-top:18px}.careers-band{grid-template-columns:1fr;gap:24px;padding:25px}.careers-band .button{grid-column:auto;width:100%}.final-cta-inner>div:last-child{width:100%;display:grid}.cta-orbit{width:460px;height:460px}.footer-top{align-items:flex-start;flex-direction:column;gap:25px}.footer-top p{text-align:left}.footer-grid{grid-template-columns:1fr 1fr;gap:35px 20px}.footer-note{grid-column:1/-1}.footer-bottom{align-items:flex-start;flex-direction:column;gap:8px}
}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}
}
