:root {
    --ink: #071321;
    --ink-soft: #0d1d31;
    --blue: #2864ff;
    --blue-deep: #174bd5;
    --paper: #f7f9fc;
    --white: #fff;
    --muted: #657286;
    --line: #dfe5ee;
    --green: #3bd17f;
    --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.product-nav {
    position: absolute;
    z-index: 5;
    inset: 0 0 auto;
    max-width: 1240px;
    height: 82px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 42px;
    align-items: center;
    color: #fff;
}
.product-nav nav { display: flex; gap: 34px; }
.product-nav nav a { color: #aebbd0; text-decoration: none; font-size: 14px; }
.product-nav nav a:hover { color: #fff; }
.product-nav > .button { justify-self: end; }
.product-brand, .topbar .brand {
    color: #fff;
    text-decoration: none;
    font-weight: 850;
    letter-spacing: .1em;
    font-size: 22px;
}
.product-brand span, .topbar .brand span { color: var(--blue); }

.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    color: #fff;
    background: var(--blue);
    border: 1px solid var(--blue);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: transform .16s ease, background .16s ease;
}
.button:hover { background: var(--blue-deep); transform: translateY(-1px); }
.button--small { min-height: 40px; padding: 0 16px; }
.button--ghost { color: #d9e5f6; background: transparent; border-color: #415168; }
.button--ghost:hover { background: rgba(255,255,255,.06); }

.hero {
    min-height: 720px;
    padding: 158px max(28px, calc((100vw - 1184px) / 2)) 90px;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
    gap: 62px;
    align-items: center;
    color: #fff;
    background:
        radial-gradient(circle at 72% 38%, rgba(40,100,255,.17), transparent 26%),
        linear-gradient(135deg, #050d17 0%, #081522 54%, #07101c 100%);
}
.hero__copy { max-width: 570px; }
.hero h1 { margin: 0; font-size: clamp(46px, 5vw, 70px); line-height: 1.03; letter-spacing: -.052em; }
.hero h1 span { color: var(--blue); }
.hero__copy > p { max-width: 545px; margin: 28px 0 0; color: #aebbd0; font-size: 18px; line-height: 1.65; }
.hero__actions { display: flex; gap: 14px; margin-top: 36px; }

.flow-visual {
    position: relative;
    min-height: 380px;
    display: grid;
    grid-template-columns: 1fr 1.18fr 1fr;
    gap: 28px;
    align-items: center;
}
.flow-card, .flow-engine {
    position: relative;
    z-index: 2;
    min-height: 218px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(8, 21, 36, .9);
    border: 1px solid #31445e;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.flow-card strong { display: block; margin: 20px 0 8px; font-size: 30px; letter-spacing: -.03em; }
.flow-card small, .flow-engine small { color: #8291a6; }
.flow-card__direction { color: #dce6f5; font-weight: 700; }
.flow-card__direction span { float: right; color: var(--blue); }
.flow-engine { min-height: 276px; align-items: center; text-align: center; border-color: #43618b; }
.flow-engine__brand { font-weight: 850; letter-spacing: .08em; font-size: 20px; }
.flow-engine__brand span { color: var(--blue); }
.flow-engine__matrix {
    width: 92px;
    height: 92px;
    margin: 28px 0 20px;
    opacity: .88;
    background-image: radial-gradient(var(--blue) 1.6px, transparent 1.6px);
    background-size: 10px 10px;
}
.flow-visual__line {
    position: absolute;
    z-index: 1;
    top: 50%;
    width: 27%;
    height: 2px;
    background: var(--blue);
    box-shadow: 0 0 18px #2864ff, 0 -12px 22px rgba(40,100,255,.55), 0 12px 22px rgba(40,100,255,.55);
}
.flow-visual__line--left { left: 24%; }
.flow-visual__line--right { right: 24%; }
.flow-status {
    position: absolute;
    z-index: 3;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    padding: 9px 15px;
    color: #72e9a8;
    background: #071e19;
    border: 1px solid #176343;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.flow-status i { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--green); }

.section { padding: 110px max(28px, calc((100vw - 1184px) / 2)); }
.section--light { background: #fff; }
.section-heading { max-width: 690px; margin-bottom: 44px; }
.section-heading--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-kicker { margin: 0 0 13px !important; color: var(--blue) !important; text-transform: uppercase; letter-spacing: .13em; font-size: 12px !important; font-weight: 800; }
.section-heading h2, .integration-preview h2, .final-cta h2 { margin: 0; font-size: clamp(34px, 4vw, 50px); line-height: 1.08; letter-spacing: -.042em; }
.section-heading > p:last-child { margin: 18px 0 0; color: var(--muted); font-size: 17px; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-card { min-height: 260px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #fbfcfe; }
.feature-card__number { color: var(--blue); font-size: 13px; font-weight: 800; }
.feature-card h3 { margin: 52px 0 12px; font-size: 23px; letter-spacing: -.02em; }
.feature-card p { margin: 0; color: var(--muted); line-height: 1.62; }

.process { background: #f4f7fb; }
.process-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; margin: 56px 0 0; padding: 0; list-style: none; }
.process-grid::before { content: ""; position: absolute; top: 23px; left: 8%; right: 8%; border-top: 1px dashed #9ebdff; }
.process-grid li { position: relative; z-index: 1; text-align: center; }
.process-grid li > span { width: 46px; height: 46px; margin: 0 auto 28px; display: grid; place-items: center; color: #fff; background: var(--blue); border: 7px solid #e5edff; border-radius: 50%; font-size: 12px; font-weight: 800; }
.process-grid h3 { margin: 0 0 10px; font-size: 19px; }
.process-grid p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }

.scenarios { background: #fff; }
.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.scenario-card { min-height: 310px; padding: 34px; background: #f8faff; border: 1px solid var(--line); border-radius: var(--radius); }
.scenario-card__label { color: var(--blue); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 850; }
.scenario-card h3 { margin: 62px 0 16px; font-size: 31px; letter-spacing: -.035em; }
.scenario-card p { max-width: 470px; margin: 0; color: var(--muted); line-height: 1.65; }
.scenario-card code, .limits-grid code, .security__note code, .faq code { color: inherit; font-size: .9em; }
.scenario-card--ledger { color: #fff; background: var(--ink-soft); border-color: #263b55; }
.scenario-card--ledger h3 { margin: 24px 0 28px; }
.scenario-row { padding: 14px 0; display: flex; justify-content: space-between; gap: 20px; color: #b8c6d8; border-top: 1px solid #2b4059; font-size: 14px; }
.scenario-row strong { color: #fff; font-weight: 700; }
.scenario-note { margin: 22px 0 0; color: var(--muted); font-size: 14px; }

.kinetic-intro {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 430px);
    gap: clamp(36px, 6vw, 86px);
    align-items: center;
    margin-bottom: 44px;
}
.kinetic-intro .section-heading { max-width: 690px; margin-bottom: 0; }
.kinetic-object {
    --object-opacity: 1;
    --object-y: 0px;
    --object-scale: 1;
    --object-rotate-x: 0deg;
    --object-rotate-y: 0deg;
    min-width: 0;
    margin: 0;
    display: grid;
    place-items: center;
    opacity: var(--object-opacity);
    transform: translate3d(0, var(--object-y), 0) scale(var(--object-scale)) rotateX(var(--object-rotate-x)) rotateY(var(--object-rotate-y));
    transform-style: preserve-3d;
    transform-origin: 50% 54%;
    perspective: 1100px;
    pointer-events: none;
    will-change: transform, opacity;
}
.kinetic-object img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform-origin: 50% 50%;
    will-change: transform;
}
.kinetic-object--match { min-height: 275px; }
.kinetic-object--match img {
    max-width: 430px;
    animation: kinetic-match-float 8.4s ease-in-out infinite;
}
.kinetic-object--cubes { min-height: 300px; }
.kinetic-object--cubes img {
    max-width: 330px;
    filter: drop-shadow(0 28px 54px rgba(24, 92, 255, .2));
    animation: kinetic-cubes-float 10s ease-in-out infinite;
}
.product-page.has-scroll-objects .kinetic-object { transition: opacity .16s linear; }

.security { color: #fff; background: var(--ink); }
.security .section-heading > p:last-child { color: #9dafc6; }
.security-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #273a52; border-bottom: 1px solid #273a52; }
.security-grid article { min-height: 220px; padding: 38px 34px; border-right: 1px solid #273a52; }
.security-grid article:last-child { border-right: 0; }
.security-grid article > span { color: var(--blue); font-size: 30px; }
.security-grid h3 { margin: 24px 0 10px; font-size: 20px; }
.security-grid p { margin: 0; color: #9dafc6; line-height: 1.58; }
.security__note { margin: 24px 0 0; color: #7f90a7; font-size: 13px; }

.limits { background: #f4f7fb; }
.limits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.limits-grid article { min-height: 250px; padding: 28px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.limits-grid article > span { color: var(--blue); font-size: 12px; font-weight: 850; }
.limits-grid h3 { margin: 48px 0 12px; font-size: 20px; letter-spacing: -.02em; }
.limits-grid p { margin: 0; color: var(--muted); line-height: 1.58; font-size: 14px; }

.integration-preview { display: grid; grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr); gap: 72px; align-items: center; background: #fff; }
.integration-preview__copy > p:not(.section-kicker) { margin: 20px 0; color: var(--muted); line-height: 1.65; }
.integration-preview__copy ul { margin: 24px 0 30px; padding: 0; list-style: none; }
.integration-preview__copy li { margin: 11px 0; color: #35445a; }
.integration-preview__copy li::before { content: "✓"; margin-right: 10px; color: var(--blue); font-weight: 900; }
.integration-preview__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.integration-preview__actions .button--ghost { color: #23436f; border-color: #b9c8dc; }
.integration-preview__actions .button--ghost:hover { color: var(--blue); background: #edf3ff; }
.code-window { overflow: hidden; color: #dce8f6; background: #071321; border: 1px solid #20364f; border-radius: 16px; box-shadow: 0 26px 70px rgba(7,19,33,.18); }
.code-window__bar { height: 50px; padding: 0 18px; display: flex; align-items: center; gap: 7px; background: #0d1d31; border-bottom: 1px solid #20364f; }
.code-window__bar > span { width: 9px; height: 9px; border-radius: 50%; background: #344b66; }
.code-window__bar small { margin-left: auto; color: #8da0b8; }
.code-window pre { margin: 0; padding: 28px; overflow-x: auto; font: 13px/1.7 "SFMono-Regular", Consolas, monospace; }
.code-blue { color: #76a3ff; }.code-green { color: #78dba3; }
.code-window__result { min-height: 58px; padding: 0 20px; display: flex; align-items: center; gap: 10px; background: #0a1929; border-top: 1px solid #20364f; font-size: 12px; }
.code-window__result i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.code-window__result code { margin-left: auto; color: #7f93ac; }

.faq { background: #f4f7fb; }
.faq-list { max-width: 900px; }
.faq-list details { background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.faq-list details + details { margin-top: 12px; }
.faq-list summary { padding: 22px 52px 22px 24px; cursor: pointer; list-style: none; position: relative; font-size: 17px; font-weight: 750; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--blue); font-size: 24px; font-weight: 500; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details[open] summary { padding-bottom: 14px; }
.faq-list details p { margin: 0; padding: 0 52px 24px 24px; color: var(--muted); line-height: 1.65; }

.final-cta { padding: 94px 28px; color: #fff; background: #0b1a2d; text-align: center; }
.final-cta p { margin: 18px auto 28px; color: #9fb0c5; }
.product-footer { padding: 34px max(28px, calc((100vw - 1184px) / 2)); display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 38px; color: #9dafc6; background: #06101c; font-size: 13px; }
.product-footer p { margin: 0; }.product-footer a { color: #dbe7f5; }

/* Premium product visuals */
.product-page main { overflow: hidden; }
.product-page .hero { position: relative; isolation: isolate; }
.product-page .hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 680px;
    height: 680px;
    right: -180px;
    top: 20px;
    opacity: .16;
    background-image: radial-gradient(#5f87ff 1px, transparent 1px);
    background-size: 18px 18px;
    mask-image: radial-gradient(circle, #000, transparent 69%);
}
.flow-visual { min-height: 450px; gap: 24px; padding-bottom: 80px; }
.flow-card,
.flow-engine {
    overflow: hidden;
    min-height: 334px;
    padding: 22px;
    background: linear-gradient(155deg, rgba(16,35,58,.96), rgba(6,18,31,.96));
    border-color: #304965;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.025);
    transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.flow-card::before,
.flow-engine::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(118deg, transparent 0 38%, rgba(75,121,255,.055) 50%, transparent 62%);
    transform: translateX(-100%);
    animation: panel-sheen 7s ease-in-out infinite;
}
.flow-card__direction {
    position: absolute;
    z-index: 2;
    top: 19px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    color: #dae6f7;
    font-size: 12px;
    letter-spacing: .035em;
}
.flow-card__direction span {
    float: none;
    min-width: 26px;
    padding: 2px 6px;
    color: #88a9ff;
    background: rgba(40,100,255,.13);
    border: 1px solid rgba(81,130,255,.3);
    border-radius: 6px;
    text-align: center;
    font-size: 10px;
}
.flow-card > small { position: relative; z-index: 3; margin-top: auto; color: #778ca7; font-size: 10px; line-height: 1.4; }
.receipt-stack { position: relative; z-index: 3; height: 180px; margin: 39px 0 9px; }
.mini-receipt {
    position: absolute;
    left: 50%;
    overflow: hidden;
    width: 94%;
    height: 55px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 9px 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0 9px;
    color: #152a45;
    background: #f8fbff;
    border: 1px solid #c8d5e7;
    border-radius: 10px;
    box-shadow: 0 12px 26px rgba(1,8,17,.22);
    transform-origin: bottom center;
    transform: translateX(-50%);
    transition: color .4s ease, background .4s ease, border-color .4s ease, box-shadow .4s ease, opacity .3s ease;
    animation: receipt-enter .42s ease both;
}
.mini-receipt i { grid-row: 1 / 3; align-self: center; width: 8px; height: 8px; background: #2864ff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(40,100,255,.11); }
.mini-receipt b { min-width: 0; align-self: end; white-space: nowrap; font-size: 13px; }
.mini-receipt small { min-width: 0; align-self: start; overflow-wrap: anywhere; color: #728096; font-size: 8px; line-height: 1.12; }
.mini-receipt--slot-1 { z-index: 2; top: 4px; }
.mini-receipt--slot-2 { z-index: 3; top: 64px; }
.mini-receipt--slot-3 { z-index: 4; top: 124px; }
.flow-visual[data-scenario="11"] .mini-receipt--slot-1 { top: 64px; }
.mini-receipt.is-sending { border-color: #6c95f5; box-shadow: 0 12px 30px rgba(40,100,255,.32), 0 0 0 2px rgba(40,100,255,.13); }
.mini-receipt.is-sending i { animation: receipt-dot-pulse .75s ease-in-out infinite; }
.mini-receipt.is-sent { background: #edf4ff; border-color: #9ebcf2; box-shadow: 0 12px 28px rgba(19,64,135,.22); }
.mini-receipt.is-sent i { background: #326eff; }
.mini-receipt.is-matched { color: #123c2a; background: #eaf9f1; border-color: #8ad2aa; box-shadow: 0 12px 28px rgba(33,146,83,.18); }
.mini-receipt.is-matched i { background: #2dbd6c; box-shadow: 0 0 0 4px rgba(45,189,108,.13); }
.mini-receipt.is-matched small { color: #3b7658; }
.flow-engine {
    min-height: 334px;
    padding: 18px;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 45%, rgba(40,100,255,.18), transparent 46%), #08182a;
    border-color: #3f6395;
    box-shadow: 0 28px 90px rgba(0,0,0,.32), inset 0 0 70px rgba(40,100,255,.045);
}
.flow-engine__core { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; }
.flow-engine__brand { font-size: 18px; }
.flow-engine__matrix {
    width: 82px;
    height: 82px;
    margin: 22px 0 17px;
    border: 1px solid rgba(83,131,255,.25);
    border-radius: 50%;
    background-image: radial-gradient(#5f8bff 1.4px, transparent 1.4px);
    background-size: 9px 9px;
    box-shadow: inset 0 0 22px rgba(40,100,255,.22), 0 0 30px rgba(40,100,255,.13);
    animation: matrix-breathe 3.2s ease-in-out infinite;
}
.engine-orbit { position: absolute; z-index: 1; width: 228px; height: 228px; border: 1px solid rgba(73,117,201,.22); border-radius: 50%; animation: engine-rotate 17s linear infinite; }
.engine-orbit::before,
.engine-orbit::after { content: ""; position: absolute; border: 1px solid rgba(73,117,201,.15); border-radius: 50%; }
.engine-orbit::before { inset: 19px; }.engine-orbit::after { inset: 48px; }
.engine-orbit i { position: absolute; width: 7px; height: 7px; background: #4e7eff; border-radius: 50%; box-shadow: 0 0 13px #4e7eff; }
.engine-orbit i:nth-child(1) { top: 24px; left: 39px; }.engine-orbit i:nth-child(2) { top: 52%; right: -4px; }.engine-orbit i:nth-child(3) { bottom: 12px; left: 51%; }
.engine-metrics { position: absolute; z-index: 4; right: 17px; bottom: 16px; left: 17px; display: flex; justify-content: center; gap: 8px; }
.engine-metrics span { padding: 4px 6px; color: #7f98b8; background: rgba(5,15,26,.74); border: 1px solid #263e5b; border-radius: 5px; font-size: 8px; }
.engine-metrics i { display: inline-block; width: 4px; height: 4px; margin-right: 4px; background: #45d383; border-radius: 50%; }
.payout-slip {
    position: relative;
    z-index: 3;
    margin: 50px 0 14px;
    padding: 10px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 6px;
    background: rgba(15,34,56,.84);
    border: 1px solid #344e6b;
    border-radius: 11px;
}
.payout-slip__icon { grid-column: 1; grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; color: #8fafff; background: #142b48; border-radius: 8px; }
.payout-slip > div:nth-child(2) { display: contents; }
.payout-slip small { grid-column: 2 / 4; grid-row: 1; min-width: 0; margin: 0; overflow: hidden; color: #758ba6; white-space: nowrap; text-overflow: ellipsis; font-size: 8px; }
.payout-slip strong { grid-column: 2; grid-row: 2; min-width: 0; margin: 0; white-space: nowrap; font-size: clamp(12px, 1vw, 15px); font-variant-numeric: tabular-nums; }
.payout-slip > i { grid-column: 3; grid-row: 2; width: 18px; height: 18px; display: grid; place-items: center; color: #88a0bd; background: rgba(125,153,188,.08); border: 1px solid rgba(125,153,188,.23); border-radius: 50%; font-style: normal; font-size: 9px; transition: color .4s ease, background .4s ease, border-color .4s ease; }
.payout-progress { position: relative; z-index: 3; height: 4px; margin-bottom: 14px; overflow: hidden; background: #1e334d; border-radius: 99px; }
.payout-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #2864ff, #4cde91); border-radius: inherit; transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform .7s cubic-bezier(.22,.74,.28,1); }
.flow-visual__line { top: calc((100% - 80px) / 2); width: 24%; opacity: .72; background: linear-gradient(90deg, transparent, #2864ff 18%, #6791ff 82%, transparent); }
.flow-visual__line::after { content: ""; position: absolute; inset: -3px 0; opacity: .35; background: linear-gradient(90deg, transparent, #5a87ff, transparent); filter: blur(5px); }
.flow-visual__line--left { left: 22%; }.flow-visual__line--right { right: 22%; }
.flow-packet {
    position: absolute;
    z-index: 6;
    top: 9px;
    width: 58px;
    height: 34px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #dce8f8;
    background: #0f2742;
    border: 1px solid #4b73aa;
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 18px rgba(40,100,255,.2);
    font-size: 8px;
}
.flow-packet i { width: 5px; height: 5px; background: #65e29c; border-radius: 50%; }
.flow-packet span { white-space: nowrap; }
.flow-packet--one { left: 20%; opacity: 0; }
.flow-packet--two { left: 56%; opacity: 0; }
.flow-visual.is-transferring .flow-packet--one { animation: packet-left-once 1.2s ease-in-out both; }
.flow-visual.is-finalizing .flow-packet--two { animation: packet-right-once 1.1s ease-in-out both; }
.flow-status { bottom: 7px; max-width: calc(100% - 20px); color: #a9c1ff; background: #0b203b; border-color: #385f9c; box-shadow: 0 12px 32px rgba(0,0,0,.24); text-align: center; white-space: normal; line-height: 1.5; transition: color .4s ease, background .4s ease, border-color .4s ease; }
.flow-status i { background: #628dff; transition: background .4s ease, box-shadow .4s ease; }
.flow-visual.is-transferring .flow-card--payin,
.flow-visual.is-transferring .flow-engine { border-color: #628bd8; box-shadow: 0 28px 90px rgba(0,0,0,.3), 0 0 34px rgba(40,100,255,.19); }
.flow-visual.is-partial .flow-card--payin,
.flow-visual.is-partial .flow-card--payout { border-color: #4c71a9; background: linear-gradient(155deg, rgba(18,43,72,.97), rgba(7,24,42,.97)); }
.flow-visual.is-finalizing .flow-engine,
.flow-visual.is-finalizing .flow-card--payout { border-color: #628bd8; box-shadow: 0 28px 90px rgba(0,0,0,.3), 0 0 34px rgba(40,100,255,.19); }
.flow-visual.is-complete .flow-card,
.flow-visual.is-complete .flow-engine { border-color: #347b59; background: linear-gradient(155deg, rgba(17,53,43,.97), rgba(6,27,26,.97)); box-shadow: 0 28px 88px rgba(0,0,0,.28), 0 0 34px rgba(53,193,112,.12); }
.flow-visual.is-complete .payout-slip { background: rgba(17,61,45,.76); border-color: #3f8765; }
.flow-visual.is-complete .payout-slip > i { color: #65e29c; background: rgba(61,205,124,.12); border-color: rgba(61,205,124,.38); }
.flow-visual.is-complete .flow-status { color: #72e9a8; background: #071e19; border-color: #24734f; }
.flow-visual.is-complete .flow-status i { background: var(--green); box-shadow: 0 0 10px rgba(59,209,127,.55); }

.feature-grid { gap: 16px; }
.feature-card {
    position: relative;
    min-height: 348px;
    overflow: hidden;
    padding: 25px;
    background: linear-gradient(155deg, #fff, #f8fbff);
    box-shadow: 0 16px 42px rgba(22,43,72,.055);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.feature-card::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -90px;
    top: -95px;
    background: radial-gradient(circle, rgba(40,100,255,.08), transparent 68%);
}
.feature-card:hover { transform: translateY(-5px); border-color: #bfd0f5; box-shadow: 0 24px 56px rgba(22,43,72,.1); }
.feature-card__visual {
    position: relative;
    height: 104px;
    margin: 28px 0 25px;
    overflow: hidden;
    background: #f2f6fc;
    border: 1px solid #dce5f1;
    border-radius: 12px;
}
.feature-card h3 { margin: 0 0 12px; }
.feature-card__visual--direct { display: flex; align-items: center; justify-content: center; gap: 11px; }
.visual-account { width: 43px; height: 43px; display: grid; place-items: center; color: #244d8c; background: #fff; border: 1px solid #cad7e8; border-radius: 10px; font-size: 9px; font-weight: 850; }
.visual-route { position: relative; width: 92px; height: 2px; background: #afc6f5; }
.visual-route::before,
.visual-route::after { content: ""; position: absolute; top: -2px; width: 6px; height: 6px; background: #2864ff; border-radius: 50%; }
.visual-route::before { left: 0; }.visual-route::after { right: 0; }
.visual-route b { position: absolute; top: -4px; width: 10px; height: 10px; background: #2864ff; border: 2px solid #dbe6ff; border-radius: 50%; animation: direct-dot 2.7s ease-in-out infinite; }
.feature-card__visual--merge { padding: 17px 20px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: repeat(3, 1fr); align-items: center; gap: 5px 12px; }
.feature-card__visual--merge span { position: relative; width: var(--size); height: 7px; background: linear-gradient(90deg, #2864ff, #90afff); border-radius: 99px; animation: merge-bar 4s ease-in-out infinite; }
.feature-card__visual--merge span:nth-child(2) { animation-delay: .35s; }.feature-card__visual--merge span:nth-child(3) { animation-delay: .7s; }
.feature-card__visual--merge i { grid-column: 2; grid-row: 1 / 4; width: 45px; height: 64px; background: #0b1d33; border: 1px solid #325584; border-radius: 10px; }
.feature-card__visual--merge i::after { content: "1"; height: 100%; display: grid; place-items: center; color: #7ea0ff; font-style: normal; font-size: 16px; font-weight: 850; }
.feature-card__visual--status { padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.feature-card__visual--status span { padding: 8px 10px; color: #53647a; background: #fff; border: 1px solid #d3deeb; border-radius: 8px; font: 9px "SFMono-Regular", Consolas, monospace; }
.feature-card__visual--status span:last-child { color: #16713d; background: #f0fbf5; border-color: #bfe7d0; }
.feature-card__visual--status span i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; background: #e1a729; border-radius: 50%; }
.feature-card__visual--status span:last-child i { background: #31bc6d; }
.feature-card__visual--status b { width: 24px; height: 1px; background: #9fb8e6; animation: status-line 2.6s ease-in-out infinite; }

.process-rail { position: relative; margin-top: 56px; }
.process-grid { margin: 0; }
.process-packet {
    position: absolute;
    z-index: 4;
    top: 5px;
    left: 7%;
    width: 76px;
    height: 36px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #31568e;
    background: #fff;
    border: 1px solid #9fbbf5;
    border-radius: 9px;
    box-shadow: 0 9px 24px rgba(40,100,255,.15);
    font-size: 9px;
    opacity: 0;
}
.process-packet i { width: 6px; height: 6px; background: #2864ff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(40,100,255,.1); }
.process-grid::before { border-top-style: solid; border-color: #b8c9e9; }
.process-grid li > span { box-shadow: 0 0 0 1px #c4d3ed, 0 8px 22px rgba(40,100,255,.16); transition: transform .2s ease; }
.process-grid li:hover > span { transform: scale(1.08); }
.process-packet--request { animation: process-request 9s ease-in-out infinite; }
.process-packet--match { animation: process-match 9s ease-in-out infinite; }
.process-packet--webhook { animation: process-webhook 9s ease-in-out infinite; }
.process-grid li:nth-child(1) > span { animation: process-step-one 9s ease-in-out infinite; }
.process-grid li:nth-child(2) > span { animation: process-step-two 9s ease-in-out infinite; }
.process-grid li:nth-child(3) > span { animation: process-step-three 9s ease-in-out infinite; }
.process-grid li:nth-child(4) > span { animation: process-step-four 9s ease-in-out infinite; }

.scenario-card { position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 16px 42px rgba(22,43,72,.055); }
.scenario-card::before { content: ""; position: absolute; width: 260px; height: 260px; right: -130px; bottom: -150px; background: radial-gradient(circle, rgba(40,100,255,.09), transparent 68%); }
.scenario-match { max-width: 330px; margin-top: 42px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.scenario-match span { padding: 8px 10px; color: #254a7e; background: #fff; border: 1px solid #ccdaec; border-radius: 8px; font-size: 10px; font-weight: 750; }
.scenario-match i { position: relative; height: 2px; background: #aac3f6; }
.scenario-match i::before,
.scenario-match i::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; background: #2864ff; border-radius: 50%; }.scenario-match i::before { left: 0; }.scenario-match i::after { right: 0; }
.scenario-match b { position: absolute; top: -4px; width: 10px; height: 10px; background: #54d38b; border-radius: 50%; animation: direct-dot 3.2s ease-in-out infinite; }
.scenario-card:not(.scenario-card--ledger) h3 { margin-top: 30px; }
.scenario-row span { min-width: 45%; }
.scenario-row span i { display: block; width: var(--fill); height: 3px; margin-top: 7px; background: linear-gradient(90deg, #2864ff, #51d58c); border-radius: 99px; animation: ledger-fill 4.6s ease-in-out infinite; }

.security { position: relative; overflow: hidden; }
.security::after { content: ""; position: absolute; width: 560px; height: 560px; right: -180px; top: -120px; opacity: .13; background-image: radial-gradient(#5a82dd 1px, transparent 1px); background-size: 16px 16px; mask-image: radial-gradient(circle, #000, transparent 68%); }
.security-grid { position: relative; z-index: 2; gap: 14px; border: 0; }
.security-grid article {
    min-height: 310px;
    padding: 27px;
    background: linear-gradient(155deg, #0c1d31, #091726);
    border: 1px solid #243a54 !important;
    border-radius: 15px;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.security-visual { position: relative; height: 112px; margin-bottom: 28px; overflow: hidden; background: #081523; border: 1px solid #203650; border-radius: 11px; }
.security-visual--link { display: flex; align-items: center; justify-content: center; gap: 29px; }
.security-visual--link span { width: 38px; height: 48px; background: #10263f; border: 1px solid #31557c; border-radius: 8px; }
.security-visual--link span::before { content: ""; display: block; width: 19px; height: 3px; margin: 13px auto 0; background: #517aad; box-shadow: 0 8px #355779, 0 16px #355779; }
.security-visual--link i { position: absolute; width: 52px; height: 1px; background: #4170b3; }
.security-visual--link b { position: absolute; width: 9px; height: 9px; background: #4f7fff; border-radius: 50%; box-shadow: 0 0 14px #4f7fff; animation: security-link 2.8s ease-in-out infinite; }
.security-visual--scan span { position: absolute; inset: 19px 50px; border: 1px solid #315174; border-radius: 8px; }
.security-visual--scan span::before { content: ""; position: absolute; inset: 12px; background: repeating-linear-gradient(0deg, #2b4868 0 2px, transparent 2px 8px); opacity: .65; }
.security-visual--scan i { position: absolute; z-index: 2; top: 22px; right: 48px; left: 48px; height: 2px; background: #4e82ff; box-shadow: 0 0 12px #4e82ff; animation: scanner 3s ease-in-out infinite; }
.security-visual--scan b { position: absolute; right: 13px; bottom: 12px; width: 7px; height: 7px; background: #47d488; border-radius: 50%; }
.security-visual--signature { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 20px; }
.security-visual--signature span { color: #7ba1ff; font: 10px "SFMono-Regular", Consolas, monospace; }
.security-visual--signature i { height: 28px; background: repeating-linear-gradient(90deg, #345b89 0 2px, transparent 2px 6px); clip-path: polygon(0 43%,10% 31%,18% 58%,29% 23%,39% 76%,50% 34%,62% 66%,72% 18%,83% 57%,100% 40%,100% 60%,83% 75%,72% 38%,62% 84%,50% 51%,39% 92%,29% 43%,18% 76%,10% 50%,0 62%); }
.security-visual--signature b { width: 28px; height: 28px; display: grid; place-items: center; color: #60df99; background: rgba(60,204,123,.09); border: 1px solid rgba(60,204,123,.29); border-radius: 50%; }
.security-grid h3 { margin-top: 0; }

@keyframes kinetic-match-float {
    0%, 100% { transform: translate3d(0, 4px, 0) rotateZ(-1.4deg); }
    50% { transform: translate3d(0, -9px, 22px) rotateZ(1.2deg); }
}
@keyframes kinetic-cubes-float {
    0%, 100% { transform: translate3d(0, 5px, 0) rotateZ(-2deg) scale(.98); }
    50% { transform: translate3d(0, -11px, 24px) rotateZ(2.2deg) scale(1.02); }
}

.limits-grid { gap: 14px; }
.limits-grid article {
    position: relative;
    min-height: 326px;
    overflow: hidden;
    padding: 23px;
    border-radius: 15px;
    box-shadow: 0 14px 38px rgba(18,40,69,.05);
    transition: transform .2s ease, box-shadow .2s ease;
}
.limits-grid article:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(18,40,69,.09); }
.capability-visual { position: relative; height: 91px; margin: 28px 0 23px; overflow: hidden; background: #f5f8fc; border: 1px solid #e0e7f0; border-radius: 11px; }
.limits-grid h3 { margin: 0 0 12px; }
.capability-visual--match { display: flex; align-items: center; justify-content: center; gap: 45px; }
.capability-visual--match i { width: 31px; height: 41px; background: #fff; border: 1px solid #bfd0e5; border-radius: 7px; }
.capability-visual--match b { position: absolute; width: 70px; height: 2px; background: #aac2f0; }
.capability-visual--match b::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; background: #2864ff; border-radius: 50%; animation: direct-dot 2.7s ease-in-out infinite; }
.capability-visual--methods { padding: 16px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.capability-visual--methods i { padding: 8px 9px; color: #31537f; background: #fff; border: 1px solid #cbd8e9; border-radius: 7px; font-style: normal; font-size: 9px; font-weight: 800; }
.capability-visual--amount { padding: 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
.capability-visual--amount small { grid-column: 1; color: #7b8ca2; font: 8px "SFMono-Regular", Consolas, monospace; }
.capability-visual--amount strong { color: #142d4f; font: 17px "SFMono-Regular", Consolas, monospace; }
.capability-visual--amount i { grid-column: 2; grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; color: #199958; background: #eaf9f1; border-radius: 50%; font-style: normal; font-size: 10px; }
.capability-visual--balance { padding: 20px; display: flex; align-items: flex-end; gap: 7px; }
.capability-visual--balance span { width: 19px; height: 27px; background: #b7c9eb; border-radius: 4px 4px 0 0; animation: balance-bar 3.8s ease-in-out infinite; }
.capability-visual--balance span:nth-child(2) { height: 45px; animation-delay: .3s; }.capability-visual--balance span:nth-child(3) { height: 34px; animation-delay: .6s; }
.capability-visual--balance b { margin: 0 0 4px auto; color: #2e5994; font-size: 9px; }

@keyframes panel-sheen { 0%, 55% { transform: translateX(-110%); } 85%, 100% { transform: translateX(110%); } }
@keyframes receipt-enter { from { opacity: 0; transform: translateX(-50%) translateY(13px) scale(.97); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes receipt-dot-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(40,100,255,.11); } 50% { box-shadow: 0 0 0 8px rgba(40,100,255,.06), 0 0 12px rgba(40,100,255,.6); } }
@keyframes matrix-breathe { 0%, 100% { opacity: .68; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes engine-rotate { to { transform: rotate(360deg); } }
@keyframes packet-left-once { 0% { left: 18%; opacity: 0; transform: scale(.92); } 14%, 76% { opacity: 1; } 48% { left: 47%; } 100% { left: 78%; opacity: 0; transform: scale(.98); } }
@keyframes packet-right-once { 0% { opacity: 0; transform: translateX(0) scale(.92); } 16%, 72% { opacity: 1; } 100% { opacity: 0; transform: translateX(118px) scale(.98); } }
@keyframes direct-dot { 0%, 100% { left: 0; } 50% { left: calc(100% - 10px); } }
@keyframes merge-bar { 0%, 100% { opacity: .5; transform: scaleX(.7); transform-origin: left; } 45% { opacity: 1; transform: scaleX(1); } }
@keyframes status-line { 0%, 100% { opacity: .35; transform: scaleX(.4); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes process-request { 0%, 3% { left: 7%; opacity: 0; } 6% { opacity: 1; } 25% { left: 32%; opacity: 1; } 29%, 100% { left: 32%; opacity: 0; } }
@keyframes process-match { 0%, 31% { left: 32%; opacity: 0; } 35% { opacity: 1; } 55% { left: 57%; opacity: 1; } 59%, 100% { left: 57%; opacity: 0; } }
@keyframes process-webhook { 0%, 62% { left: 57%; opacity: 0; } 66% { opacity: 1; } 86% { left: 82%; opacity: 1; } 91%, 100% { left: 82%; opacity: 0; } }
@keyframes process-step-one { 0%, 8% { transform: scale(1.14); box-shadow: 0 0 0 8px rgba(40,100,255,.12); } 14%, 100% { transform: scale(1); } }
@keyframes process-step-two { 0%, 23% { transform: scale(1); } 28%, 36% { transform: scale(1.14); box-shadow: 0 0 0 8px rgba(40,100,255,.12); } 42%, 100% { transform: scale(1); } }
@keyframes process-step-three { 0%, 53% { transform: scale(1); } 58%, 66% { transform: scale(1.14); box-shadow: 0 0 0 8px rgba(40,100,255,.12); } 72%, 100% { transform: scale(1); } }
@keyframes process-step-four { 0%, 83% { transform: scale(1); } 88%, 96% { transform: scale(1.14); box-shadow: 0 0 0 8px rgba(49,186,105,.14); } 100% { transform: scale(1); } }
@keyframes ledger-fill { 0%, 100% { opacity: .65; transform: scaleX(.72); transform-origin: left; } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes security-link { 0%, 100% { transform: translateX(-28px); } 50% { transform: translateX(28px); } }
@keyframes scanner { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(64px); } }
@keyframes balance-bar { 0%, 100% { transform: scaleY(.7); transform-origin: bottom; } 50% { transform: scaleY(1); } }

/* Merchant guide pages */
.topbar {
    position: sticky;
    z-index: 10;
    top: 0;
    min-height: 66px;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 230px auto 1fr;
    gap: 24px;
    align-items: center;
    color: #fff;
    background: var(--ink);
    border-bottom: 1px solid #20344c;
}
.topbar__section { color: #dbe7f6; font-weight: 650; }
.topbar__links { justify-self: end; display: flex; gap: 22px; }
.topbar__links a { color: #9fb0c5; text-decoration: none; font-size: 13px; }
.topbar__links a:hover { color: #fff; }
.docs-layout { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 230px minmax(0, 860px); gap: 56px; align-items: start; }
.docs-sidebar { position: sticky; top: 92px; padding: 36px 0; display: flex; flex-direction: column; gap: 6px; }
.docs-sidebar__label { margin-bottom: 12px; color: #8190a5; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
.docs-sidebar a { padding: 10px 12px; color: #4e5e73; border-radius: 8px; text-decoration: none; font-size: 14px; }
.docs-sidebar a:hover { color: var(--blue); background: #eaf1ff; }
.docs-sidebar__meta { margin-top: 20px; padding: 16px 12px; color: #8b98aa; border-top: 1px solid var(--line); font-size: 11px; }
main.doc { min-width: 0; padding: 48px 0 100px; font-size: 16px; line-height: 1.7; }
main.doc h1 { margin: 0 0 22px; font-size: 42px; line-height: 1.12; letter-spacing: -.04em; }
main.doc h2 { margin: 56px 0 18px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 27px; line-height: 1.25; letter-spacing: -.025em; }
main.doc h3 { margin: 32px 0 12px; font-size: 19px; }
main.doc p, main.doc li { color: #4d5c70; }
main.doc a { color: var(--blue); }
main.doc code { padding: .18em .42em; color: #153b74; background: #eaf1fb; border-radius: 5px; font: .88em "SFMono-Regular", Consolas, monospace; }
main.doc pre { margin: 20px 0; padding: 20px; overflow: auto; color: #dbe7f5; background: var(--ink); border: 1px solid #1e354e; border-radius: 12px; }
main.doc pre code { padding: 0; color: inherit; background: none; }
main.doc table { width: 100%; margin: 22px 0; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
main.doc th, main.doc td { padding: 11px 12px; text-align: left; vertical-align: top; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
main.doc th { color: #293a51; background: #eef3f9; }
main.doc tr:last-child td { border-bottom: 0; } main.doc th:last-child, main.doc td:last-child { border-right: 0; }
main.doc blockquote { margin: 22px 0; padding: 15px 18px; color: #49607d; background: #edf4ff; border-left: 3px solid var(--blue); border-radius: 0 9px 9px 0; }
main.doc blockquote p { margin: 0; }
main.doc hr { margin: 44px 0; border: 0; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
    .product-nav { grid-template-columns: 1fr auto; }.product-nav nav { display: none; }
    .hero { grid-template-columns: 1fr; padding-top: 132px; }.hero__copy { max-width: 680px; }
    .flow-visual { max-width: 720px; }
    .feature-grid, .security-grid { grid-template-columns: 1fr; }
    .feature-card { min-height: 210px; }.feature-card h3 { margin-top: 34px; }
    .scenario-grid { grid-template-columns: 1fr; }
    .kinetic-intro { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 30px; }
    .kinetic-object--match { min-height: 220px; }.kinetic-object--cubes { min-height: 230px; }
    .limits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .security-grid article { border-right: 0; border-bottom: 1px solid #273a52; }
    .security-grid article:last-child { border-bottom: 0; }
    .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }.process-grid::before { display: none; }.process-packet { display: none; }
    .integration-preview { grid-template-columns: 1fr; }.code-window { max-width: 760px; }
    .docs-layout { grid-template-columns: 1fr; padding: 0 24px; }.docs-sidebar { display: none; }
    .topbar { grid-template-columns: 1fr auto; }.topbar__section { display: none; }
}

@media (max-width: 620px) {
    .product-nav { height: 72px; padding: 0 18px; }.product-brand { font-size: 18px; }
    .hero { min-height: 0; padding: 118px 18px 70px; gap: 46px; }.hero h1 { font-size: 43px; }.hero__copy > p { font-size: 16px; }
    .hero__actions { flex-direction: column; align-items: stretch; }.hero__actions .button { width: 100%; }
    .flow-visual { min-height: 0; grid-template-columns: 1fr; gap: 12px; align-content: center; padding-bottom: 94px; }
    .flow-visual::before { content: ""; position: absolute; z-index: 0; top: 12%; bottom: 94px; left: 50%; width: 2px; background: linear-gradient(#2864ff, #5a85ff, #3bd17f); box-shadow: 0 0 17px rgba(40,100,255,.65); }
    .flow-card { padding: 10px; border-radius: 14px; }.flow-card strong { font-size: 24px; }
    .flow-card__direction { top: 9px; left: 10px; right: 10px; font-size: 12px; }
    .flow-card__direction span { min-width: 23px; font-size: 10px; }
    .flow-card > small { display: none; }
    .flow-card--payin { min-height: 170px; }
    .receipt-stack { height: 126px; margin: 30px 0 0; }
    .mini-receipt { width: 88%; height: 37px; padding: 5px 9px; grid-template-columns: 7px 1fr; gap: 0 8px; border-radius: 8px; }
    .mini-receipt i { width: 6px; height: 6px; }
    .mini-receipt b { font-size: 13px; }
    .mini-receipt small { font-size: 8px; line-height: 1; }
    .mini-receipt--slot-1 { top: 0; }.mini-receipt--slot-2 { top: 42px; }.mini-receipt--slot-3 { top: 84px; }.flow-visual[data-scenario="11"] .mini-receipt--slot-1 { top: 42px; }
    .flow-engine { grid-column: auto; grid-row: auto; min-height: 128px; padding: 8px; border-radius: 14px; }
    .flow-engine__brand { font-size: 18px; }
    .flow-engine__matrix { width: 44px; height: 44px; margin: 6px 0; background-size: 7px 7px; }
    .flow-engine__core small { font-size: 13px; }
    .engine-orbit { width: 104px; height: 104px; }
    .engine-metrics { display: none; }
    .flow-card--payout { min-height: 135px; }
    .payout-slip { margin: 31px 0 9px; }
    .payout-progress { margin-bottom: 0; }
    .flow-visual__line { display: none; }
    .flow-packet { display: flex; left: calc(50% - 29px); }
    .flow-packet--one { top: 29%; opacity: 0; animation: none; }
    .flow-packet--two { top: 64%; opacity: 0; animation: none; }
    .flow-visual.is-transferring .flow-packet--one { animation: packet-mobile-one-once 1.2s ease-in-out both; }
    .flow-visual.is-finalizing .flow-packet--two { animation: packet-mobile-two-once 1.1s ease-in-out both; }
    .flow-status { bottom: 1px; max-width: calc(100% - 20px); overflow: visible; padding: 7px 10px; text-align: center; text-overflow: clip; white-space: normal; font-size: 13px; line-height: 1.5; }
    .section { padding: 76px 18px; }.section-heading h2, .integration-preview h2, .final-cta h2 { font-size: 34px; }
    .feature-card { min-height: 330px; padding: 24px; }.process-rail { margin-top: 42px; }.process-grid { grid-template-columns: 1fr; row-gap: 38px; }.process-grid::before { display: block; top: 22px; bottom: 22px; left: 22px; right: auto; width: 1px; border: 0; border-left: 1px solid #b8c9e9; }.process-grid li { text-align: left; padding-left: 66px; }.process-grid li > span { position: absolute; left: 0; top: 0; }.process-packet { display: block; top: 4px; left: 17px; width: 12px; height: 12px; padding: 0; border-radius: 50%; }.process-packet span, .process-packet i { display: none; }.process-packet--request { animation: process-mobile-request 9s ease-in-out infinite; }.process-packet--match { animation: process-mobile-match 9s ease-in-out infinite; }.process-packet--webhook { animation: process-mobile-webhook 9s ease-in-out infinite; }
    .scenario-card { min-height: 0; padding: 26px; }.scenario-card h3 { margin-top: 38px; font-size: 27px; }.scenario-card--ledger h3 { margin-top: 22px; }
    .kinetic-intro { grid-template-columns: 1fr; gap: 18px; margin-bottom: 34px; }
    .kinetic-object { width: min(100%, 330px); margin-inline: auto; }
    .kinetic-object--match { min-height: 190px; }.kinetic-object--match img { max-width: 315px; }
    .kinetic-object--cubes { min-height: 200px; }.kinetic-object--cubes img { max-width: 235px; }
    .scenario-row { align-items: flex-start; flex-direction: column; gap: 5px; }
    .limits-grid { grid-template-columns: 1fr; }.limits-grid article { min-height: 300px; }.limits-grid h3 { margin-top: 0; }
    .security-grid article { padding: 22px; }.integration-preview { gap: 42px; }.code-window pre { padding: 20px; font-size: 11px; }
    .integration-preview__actions { flex-direction: column; }.integration-preview__actions .button { width: 100%; }
    .faq-list summary { padding: 19px 48px 19px 18px; font-size: 16px; }.faq-list summary::after { right: 18px; }.faq-list details p { padding: 0 18px 20px; }
    .code-window__result { align-items: flex-start; flex-wrap: wrap; padding: 14px; }.code-window__result code { width: 100%; margin: 0; overflow: hidden; }
    .product-footer { grid-template-columns: 1fr; gap: 12px; }.topbar { padding: 0 16px; }.topbar__links a:nth-child(-n+2) { display: none; }
    main.doc { padding: 36px 0 72px; font-size: 15px; } main.doc h1 { font-size: 34px; } main.doc h2 { font-size: 24px; }
    main.doc table { display: block; overflow-x: auto; }
}

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

@keyframes packet-mobile-one-once { 0% { top: 20%; opacity: 0; transform: scale(.92); } 14%, 76% { opacity: 1; } 48% { top: 50%; } 100% { top: 82%; opacity: 0; transform: scale(.98); } }
@keyframes packet-mobile-two-once { 0% { opacity: 0; transform: translateY(-20px) scale(.92); } 16%, 72% { opacity: 1; } 100% { opacity: 0; transform: translateY(48px) scale(.98); } }
@keyframes process-mobile-request { 0%, 3% { top: 4px; opacity: 0; } 6% { opacity: 1; } 25% { top: 30%; opacity: 1; } 29%, 100% { top: 30%; opacity: 0; } }
@keyframes process-mobile-match { 0%, 31% { top: 30%; opacity: 0; } 35% { opacity: 1; } 55% { top: 60%; opacity: 1; } 59%, 100% { top: 60%; opacity: 0; } }
@keyframes process-mobile-webhook { 0%, 62% { top: 60%; opacity: 0; } 66% { opacity: 1; } 86% { top: calc(100% - 14px); opacity: 1; } 91%, 100% { top: calc(100% - 14px); opacity: 0; } }