@font-face {
    font-family: DMSans;
    src: url('fonts/DMSans-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: DMSans;
    src: url('fonts/DMSans-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: DMSans;
    src: url('fonts/DMSans-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap
}

@font-face {
    font-family: DMSans;
    src: url('fonts/DMSans-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap
}

:root {
    --ink: #f5f7fb;
    --muted: #8c98ad;
    --dark: #070b14;
    --surface: #0b1120;
    --surface-2: #101827;
    --line: #1c2a3f;
    --cyan: #61e8d7;
    --blue: #6c9cff;
    --white: #fff;
    --max: 1180px;
    --ease: cubic-bezier(.2, .8, .2, 1)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--dark);
    color: var(--ink);
    font-family: DMSans, system-ui, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased
}

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

button {
    font: inherit;
    color: inherit
}

img {
    display: block;
    max-width: 100%
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.container {
    width: min(var(--max), calc(100% - 48px));
    margin: auto
}

.narrow {
    max-width: 760px
}

.center {
    text-align: center
}

.section {
    padding: 132px 0
}

.section-dark {
    background: var(--dark)
}

.section-light {
    background: #f5f7fb;
    color: #0c1422
}

.eyebrow {
    margin: 0 0 18px;
    color: var(--cyan);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

.section-title {
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.02;
    letter-spacing: -.065em;
    font-weight: 600
}

.section-title span,
.display em {
    color: var(--cyan);
    font-style: normal
}

.section-copy {
    max-width: 54ch;
    margin: 24px 0 0;
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.7
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 14px 20px;
    cursor: pointer;
    font-weight: 600;
    transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease)
}

.button:hover {
    transform: translateY(-2px)
}

.button:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 4px
}

.button-primary {
    background: var(--cyan);
    color: #061218;
    box-shadow: 0 10px 30px #61e8d726
}

.button-primary:hover {
    background: #8bf3e5
}

.button-ghost {
    border-color: #ffffff36;
    color: var(--ink)
}

.button-ghost:hover {
    border-color: var(--cyan);
    color: var(--cyan)
}

.button-small {
    padding: 10px 16px;
    background: var(--ink);
    color: var(--dark);
    font-size: .85rem
}

.button-block {
    width: 100%
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 16px 0;
    transition: padding .3s var(--ease)
}

.header-shell {
    width: min(1280px, calc(100% - 32px));
    height: 64px;
    margin: auto;
    padding: 0 12px 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border: 1px solid transparent;
    border-radius: 18px;
    transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease)
}

.site-header.scrolled .header-shell {
    background: #0b1120d9;
    border-color: var(--line);
    backdrop-filter: blur(18px)
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -.03em;
    white-space: nowrap
}

.brand img {
    width: 36px;
    height: 36px
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
    color: #aeb9c9;
    font-size: .9rem
}

.site-nav>a,
.nav-trigger {
    transition: color .2s ease
}

.site-nav>a:hover,
.nav-trigger:hover {
    color: var(--cyan)
}

.nav-group {
    position: relative
}

.nav-trigger {
    border: 0;
    background: none;
    cursor: pointer;
    padding: 22px 0;
    color: #aeb9c9
}

.nav-trigger span {
    margin-left: 5px;
    color: var(--cyan)
}

.mega-menu {
    position: absolute;
    top: 58px;
    left: 50%;
    width: 680px;
    transform: translateX(-30%) translateY(8px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #0d1524f2;
    box-shadow: 0 24px 80px #0008;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    backdrop-filter: blur(20px)
}

.nav-group.open .mega-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-30%) translateY(0)
}

.mega-menu.compact {
    grid-template-columns: 1fr;
    width: 250px
}

.mega-menu a {
    display: block;
    padding: 11px 10px;
    border-radius: 10px
}

.mega-menu a:hover {
    background: #ffffff0b
}

.mega-menu strong,
.mega-menu small {
    display: block
}

.mega-menu strong {
    font-size: .9rem;
    color: var(--ink)
}

.mega-menu small {
    margin-top: 4px;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.45
}

.menu-label,
.card-kicker,
.step-tag {
    margin: 0 0 10px;
    color: #72829a;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 16px
}

.app-link {
    font-size: .86rem;
    color: #aeb9c9
}

.app-link span,
.text-link span {
    color: var(--cyan)
}

.menu-toggle {
    display: none;
    margin-left: auto;
    border: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: 10px;
    padding: 11px
}

.menu-toggle span:not(.sr-only) {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    margin: 3px
}

.hero {
    position: relative;
    min-height: 900px;
    padding: 180px 0 0;
    overflow: hidden;
    background: radial-gradient(circle at 70% 20%, #173050 0, transparent 30%), linear-gradient(180deg, #070b14, #080f1e 72%, #0c1524)
}

.hero:before,
.multichain:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%)
}

.hero-inner {
    position: relative;
    z-index: 1;
    text-align: center
}

.announcement {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 9px 13px;
    border: 1px solid #ffffff20;
    border-radius: 999px;
    background: #ffffff08;
    color: #aeb9c9;
    font-size: .78rem
}

.announcement b {
    margin-right: 5px;
    color: var(--cyan)
}

.announcement .arrow {
    color: var(--cyan)
}

.pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 5px #61e8d71f
}

.hero .eyebrow {
    margin-top: 54px
}

.display {
    margin: 0;
    font-size: clamp(3.8rem, 9vw, 8.4rem);
    font-weight: 600;
    line-height: .93;
    letter-spacing: -.09em
}

.hero-copy {
    max-width: 600px;
    margin: 30px auto 0;
    color: #aeb9c9;
    font-size: 1.15rem;
    line-height: 1.65
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 34px
}

.proof-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 48px;
    color: #8897ad;
    font-size: .82rem
}

.proof-row i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #53637a
}

.avatar-stack {
    display: flex
}

.avatar-stack img {
    width: 25px;
    height: 25px;
    margin-left: -5px;
    border: 2px solid var(--dark);
    border-radius: 50%;
    object-fit: cover
}

.avatar-stack img:first-child {
    margin-left: 0
}

.hero-visual {
    position: relative;
    z-index: 1;
    width: min(1140px, calc(100% - 48px));
    margin: 90px auto 0
}

.hero-visual img {
    position: relative;
    width: 100%;
    filter: drop-shadow(0 36px 55px #0009);
    animation: float 8s ease-in-out infinite
}

.visual-glow {
    position: absolute;
    inset: 18% 10%;
    background: var(--cyan);
    filter: blur(100px);
    opacity: .12
}

.hero-orbit {
    position: absolute;
    border: 1px solid #61e8d71f;
    border-radius: 50%;
    pointer-events: none
}

.orbit-one {
    width: 700px;
    height: 700px;
    right: -300px;
    top: 100px
}

.orbit-two {
    width: 500px;
    height: 500px;
    left: -250px;
    top: 340px
}

.stats-strip {
    border-block: 1px solid var(--line);
    background: #0a111d
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 34px 0
}

.stats-grid div {
    padding: 0 28px;
    border-left: 1px solid var(--line)
}

.stats-grid div:first-child {
    padding-left: 0;
    border-left: 0
}

.stats-grid strong,
.stats-grid span {
    display: block
}

.stats-grid strong {
    font-size: 1.8rem;
    letter-spacing: -.05em
}

.stats-grid span {
    margin-top: 4px;
    color: var(--muted);
    font-size: .8rem
}

.intro {
    padding-bottom: 86px
}

.product-section {
    padding-top: 44px
}

.product-grid {
    display: grid;
    gap: 24px
}

.product-card {
    position: relative;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    min-height: 440px;
    overflow: hidden;
    border: 1px solid #dfe4eb;
    border-radius: 24px;
    background: #fff
}

.product-card.reverse {
    grid-template-columns: 1.2fr .8fr
}

.product-card.reverse .card-copy {
    order: 2
}

.product-card.reverse .card-art {
    order: 1
}

.card-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 54px
}

.card-copy h3 {
    max-width: 9ch;
    margin: 0;
    font-size: clamp(2.1rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -.07em
}

.card-copy p {
    max-width: 34ch;
    margin: 20px 0 28px;
    color: #657287;
    line-height: 1.65
}

.card-kicker {
    color: #5471a5
}

.text-link {
    font-weight: 600;
    color: #17243b
}

.card-art {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #e7f0ff
}

.card-art img {
    width: 84%;
    max-width: 538px;
    filter: drop-shadow(0 24px 28px #12274a25);
    transition: transform .5s var(--ease)
}

.product-card:hover .card-art img {
    transform: translateY(-7px) scale(1.03)
}

.art-airdrop {
    background: #e7f7f3
}

.capability-section {
    background: #f5f7fb;
    color: #0c1422;
    padding-top: 80px
}

.section-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 48px
}

.section-heading-row .section-copy {
    max-width: 34ch;
    margin: 0
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px
}

.capability-card {
    position: relative;
    min-height: 300px;
    padding: 26px;
    border: 1px solid #dce3ed;
    border-radius: 18px;
    background: #fff;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease
}

.capability-card:hover {
    transform: translateY(-6px);
    border-color: #b6c6dd;
    box-shadow: 0 20px 40px #14284412
}

.capability-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 42px;
    border-radius: 14px;
    background: #eff5ff
}

.capability-icon img {
    width: 28px;
    height: 28px
}

.capability-card h3 {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: -.05em
}

.capability-card p {
    max-width: 18ch;
    color: #69768b;
    font-size: .9rem;
    line-height: 1.55
}

.card-arrow {
    position: absolute;
    right: 23px;
    bottom: 23px;
    color: #5471a5
}

.multichain {
    position: relative;
    overflow: hidden
}

.multichain-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 80px
}

.multichain .section-copy {
    margin-bottom: 32px
}

.network-panel {
    position: relative;
    min-height: 440px;
    border: 1px solid #ffffff18;
    border-radius: 28px;
    background: radial-gradient(circle at center, #172841, #0c1423 62%);
    overflow: hidden
}

.network-line {
    position: absolute;
    inset: 14%;
    border: 1px dashed #61e8d73d;
    border-radius: 50%;
    transform: rotate(-19deg)
}

.network-center {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translate(-50%, -50%);
    white-space: nowrap
}

.network-center img {
    width: 48px
}

.network-center span {
    font-weight: 600
}

.network-center small {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 400
}

.network-orb {
    position: absolute;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid #ffffff25;
    border-radius: 50%;
    background: #15233a;
    box-shadow: 0 10px 28px #0006;
    animation: float 7s ease-in-out infinite
}

.network-orb img {
    width: 31px;
    height: 31px;
    object-fit: contain
}

.orb-sol {
    top: 20%;
    left: 21%
}

.orb-apt {
    right: 18%;
    top: 30%;
    animation-delay: -2s
}

.orb-sui {
    bottom: 16%;
    left: 35%;
    animation-delay: -4s
}

.resources {
    background: #f5f7fb;
    color: #0c1422
}

.resource-layout {
    display: grid;
    grid-template-columns: 1fr .8fr;
    align-items: center;
    gap: 80px
}

.resources .section-copy {
    color: #657287
}

.resource-links {
    border-top: 1px solid #ccd5e2
}

.resource-links a {
    display: flex;
    justify-content: space-between;
    padding: 22px 0;
    border-bottom: 1px solid #ccd5e2;
    font-size: 1.2rem;
    font-weight: 600
}

.resource-links b {
    color: #5471a5
}

.site-footer {
    padding: 76px 0 28px;
    background: #070b14;
    border-top: 1px solid var(--line)
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px
}

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

.footer-columns a {
    display: block;
    padding: 6px 0;
    color: var(--muted);
    font-size: .88rem
}

.footer-columns a:hover,
.footer-bottom a:hover {
    color: var(--cyan)
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 80px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    color: #66758d;
    font-size: .78rem
}

.footer-bottom div {
    display: flex;
    gap: 18px
}

.footer-bottom a {
    color: #aeb9c9
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease), transform .7s var(--ease)
}

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

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #02060dcc;
    backdrop-filter: blur(12px);
    opacity: 1;
    transition: opacity .25s ease
}

.modal-overlay[hidden] {
    display: none
}

.modal-overlay.closing {
    opacity: 0
}

.modal {
    width: min(720px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: auto;
    border: 1px solid #293b56;
    border-radius: 24px;
    background: #0d1626;
    box-shadow: 0 30px 100px #000b
}

.modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid var(--line);
    background: #0d1626ee;
    backdrop-filter: blur(16px)
}

.modal-head h2 {
    margin: 2px 0 0;
    font-size: 1.4rem
}

.modal-kicker {
    color: var(--cyan);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase
}

.modal-close,
.modal-back {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff08;
    cursor: pointer;
    font-size: 1.3rem
}

.modal-body {
    padding: 26px
}

.modal-label {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 600
}

.all-wallets,
.mode-card p {
    color: var(--muted);
    font-size: .88rem
}

.all-wallets {
    margin: 0 0 20px
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.search-box>span {
    position: absolute;
    left: 15px;
    color: var(--muted);
    font-size: 1.3rem
}

.search-box input,
.field input,
.field textarea,
.extra-field input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 42px;
    background: #080f1c;
    color: var(--ink);
    font: inherit;
    outline: 0
}

.search-box input:focus,
.field input:focus,
.field textarea:focus,
.extra-field input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px #61e8d71a
}

.search-clear {
    position: absolute;
    right: 10px;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1.2rem
}

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

.wcard {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #ffffff05;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s ease, background .2s ease
}

.wcard:hover {
    border-color: var(--cyan);
    background: #61e8d70b
}

.wcard .wicon,
.wallet-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: none
}

.wcard .wicon {
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #1a2a42;
    color: var(--cyan);
    font-size: 1.1rem
}

.wname {
    font-size: .78rem;
    line-height: 1.25
}

.wallet-empty {
    color: var(--muted)
}

.mode-card {
    position: relative;
    padding: 8px
}

.mode-card h3 {
    margin: 12px 0 8px;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -.06em
}

.mode-card p {
    line-height: 1.6
}

.stepper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px
}

.step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .75rem
}

.step.active {
    color: var(--ink)
}

.step .num {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1a2b43
}

.step.active .num {
    background: var(--cyan);
    color: var(--dark)
}

.step-line {
    width: 50px;
    height: 1px;
    background: var(--line)
}

.field {
    position: relative;
    margin: 20px 0
}

.field input,
.field textarea {
    padding-right: 48px
}

.field textarea {
    min-height: 120px;
    resize: vertical
}

.toggle-eye {
    position: absolute;
    right: 12px;
    top: 13px;
    border: 0;
    background: none;
    color: var(--cyan);
    cursor: pointer
}

.extra-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    color: var(--muted);
    font-size: .82rem
}

.extra-row b,
.extra-row span {
    display: block
}

.switch {
    display: flex !important;
    align-items: center;
    gap: 8px
}

.switch button {
    width: 38px;
    height: 22px;
    border: 0;
    border-radius: 99px;
    background: #25344a;
    position: relative;
    cursor: pointer
}

.switch button:after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #9aa8ba;
    transition: transform .2s ease
}

.switch button.on {
    background: var(--cyan)
}

.switch button.on:after {
    transform: translateX(16px);
    background: var(--dark)
}

.extra-field {
    margin-bottom: 16px
}

.spin-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    background: #0d1626eF;
    border-radius: 16px
}

.spinner {
    width: 38px;
    height: 38px;
    border: 3px solid #ffffff20;
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite
}

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

.status-icon {
    font-size: 2rem;
    color: var(--cyan)
}

.unavailable-card {
    text-align: center;
    min-height: 160px
}

@media(max-width:900px) {
    .site-nav {
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #0d1626f7
    }

    .site-nav.open {
        display: flex
    }

    .site-nav>a,
    .nav-trigger {
        padding: 14px 12px
    }

    .nav-group.open .mega-menu,
    .mega-menu,
    .mega-menu.compact {
        position: static;
        width: auto;
        transform: none;
        display: none;
        grid-template-columns: 1fr;
        padding: 8px;
        margin: 0;
        opacity: 1;
        pointer-events: auto;
        box-shadow: none;
        background: #ffffff05
    }

    .nav-group.open .mega-menu {
        display: grid
    }

    .header-actions {
        margin-left: auto
    }

    .app-link {
        display: none
    }

    .menu-toggle {
        display: block
    }

    .site-nav~.header-actions {
        margin-left: 0
    }

    .header-shell {
        gap: 12px
    }

    .capability-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .multichain-layout,
    .resource-layout {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .network-panel {
        min-height: 360px
    }
}

@media(max-width:620px) {
    .container {
        width: min(100% - 32px, var(--max))
    }

    .section {
        padding: 88px 0
    }

    .header-shell {
        width: calc(100% - 20px);
        padding-left: 10px
    }

    .brand span {
        font-size: .9rem
    }

    .header-actions .button {
        padding: 10px 12px;
        font-size: .75rem
    }

    .hero {
        min-height: 780px;
        padding-top: 145px
    }

    .hero .eyebrow {
        margin-top: 38px
    }

    .display {
        font-size: clamp(3.35rem, 16vw, 5rem)
    }

    .hero-copy {
        font-size: 1rem
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        padding: 0 10px
    }

    .proof-row {
        flex-wrap: wrap;
        gap: 9px;
        font-size: .7rem
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
        padding: 26px 0
    }

    .stats-grid div,
    .stats-grid div:first-child {
        padding: 0 12px;
        border-left: 1px solid var(--line)
    }

    .stats-grid div:nth-child(odd) {
        padding-left: 0;
        border-left: 0
    }

    .stats-grid strong {
        font-size: 1.45rem
    }

    .product-card,
    .product-card.reverse {
        grid-template-columns: 1fr
    }

    .product-card.reverse .card-copy,
    .product-card.reverse .card-art {
        order: initial
    }

    .card-copy {
        padding: 32px
    }

    .card-art {
        min-height: 260px
    }

    .section-heading-row {
        display: block
    }

    .section-heading-row .section-copy {
        margin-top: 20px
    }

    .capability-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .capability-card {
        min-height: 250px;
        padding: 18px
    }

    .capability-icon {
        margin-bottom: 28px
    }

    .capability-card h3 {
        font-size: 1.3rem
    }

    .network-center {
        font-size: .82rem
    }

    .network-panel {
        min-height: 310px
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .footer-columns {
        gap: 12px
    }

    .footer-bottom {
        display: block;
        margin-top: 54px
    }

    .footer-bottom div {
        margin-top: 16px
    }

    .wallet-grid {
        grid-template-columns: 1fr 1fr
    }

    .modal-body {
        padding: 18px
    }

    .mode-card h3 {
        font-size: 1.7rem
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

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

/* Streamflow identity overrides: disciplined navy surfaces, blue actions, no editorial white panels. */
:root {
    --ink: #fff;
    --muted: #cdd7e3;
    --dark: #000109;
    --surface: #1a1d2d;
    --surface-2: #121424;
    --line: #1a1d2d;
    --cyan: #7187ff;
    --blue: #193df9
}

.section-light,
.capability-section,
.resources {
    background: #000109;
    color: #fff
}

.section-copy,
.resources .section-copy,
.capability-card p {
    color: #cdd7e3
}

.section-title span,
.display em,
.eyebrow,
.announcement b,
.announcement .arrow,
.app-link span,
.text-link span,
.card-arrow {
    color: #7187ff
}

.hero {
    background-color: #000109;
    background-image: linear-gradient(180deg, rgba(5, 5, 6, 0), rgba(28, 62, 244, .2))
}

.hero:before,
.multichain:before,
.hero-orbit,
.visual-glow {
    display: none
}

.hero-visual img {
    animation: none
}

.button {
    border-radius: 4px
}

.button-primary {
    background: #193df9;
    color: #fff;
    box-shadow: none
}

.button-primary:hover {
    background: #7187ff
}

.button-ghost {
    border-color: #7187ff;
    color: #fff
}

.button-ghost:hover {
    background: #193df9;
    border-color: #193df9;
    color: #fff
}

.button-small {
    background: #193df9;
    color: #fff
}

.announcement {
    border-radius: 4px;
    background: #1a1d2d;
    border-color: #2a3441
}

.stats-strip {
    background: #121424;
    border-color: #1a1d2d
}

.stats-grid div {
    border-color: #2a3441
}

.product-card {
    border-color: #1a1d2d;
    border-radius: 4px;
    background: #121424
}

.card-copy p {
    color: #cdd7e3
}

.card-kicker {
    color: #7187ff
}

.text-link {
    color: #fff
}

.card-art,
.art-dashboard,
.art-airdrop {
    background: #1a1d2d
}

.capability-card {
    border-color: #1a1d2d;
    border-radius: 4px;
    background: #121424
}

.capability-card:hover {
    border-color: #7187ff;
    background: #1a1d2d;
    box-shadow: none
}

.capability-icon {
    border-radius: 4px;
    background: #1a1d2d
}

.multichain {
    background: #000109
}

.network-panel {
    border-radius: 4px;
    background: #121424;
    border-color: #1a1d2d
}

.network-orb {
    border-radius: 4px;
    background: #1a1d2d;
    box-shadow: none
}

.resources {
    border-top: 1px solid #1a1d2d
}

.resource-links,
.resource-links a {
    border-color: #1a1d2d
}

.resource-links a {
    color: #fff
}

.site-footer {
    background: #000109
}

.mega-menu {
    border-radius: 4px;
    background: #121424;
    border-color: #1a1d2d
}

.mega-menu a {
    border-radius: 4px
}

.modal {
    border-radius: 4px;
    background: #121424;
    border-color: #2a3441
}

.modal-head {
    background: #121424
}

.modal-close,
.modal-back,
.wcard {
    border-radius: 4px
}

.wcard {
    background: #1a1d2d;
    border-color: #2a3441
}

.wcard:hover {
    border-color: #7187ff;
    background: #121424
}

.search-box input,
.field input,
.field textarea,
.extra-field input {
    background: #1a1d2d;
    border-color: #2a3441
}

.search-box input:focus,
.field input:focus,
.field textarea:focus,
.extra-field input:focus {
    border-color: #7187ff;
    box-shadow: 0 0 0 3px #7187ff22
}

.spinner {
    border-top-color: #7187ff
}

.step.active .num {
    background: #193df9;
    color: #fff
}

:root {
    --identity-blue: #193df9;
    --identity-accent: #7187ff
}

.network-line {
    display: none
}

.network-orb {
    animation: none
}
:root{--identity-blue:#193df9;--identity-accent:#7187ff}.network-line{display:none}.network-orb{animation:none}.hero-visual{overflow:hidden}@media(max-width:620px){.hero-visual{height:300px;margin-top:56px}.hero-visual img{position:absolute;top:0;left:50%;width:auto;max-width:none;height:300px;transform:translateX(-50%)}}
.wallet-grid{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.wcard{min-width:0;overflow:hidden}.wname{min-width:0;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere}.unavailable{display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:24px}.unavailable .status-icon,.unavailable h3,.unavailable p{align-self:center;text-align:center}.unavailable h3{margin:0;font-size:1.35rem}.unavailable p{max-width:42ch;margin:8px auto 18px}.manual-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%}.manual-option{min-width:0;padding:12px;border:1px solid #2a3441;border-radius:4px;background:#1a1d2d;color:#fff;text-align:left;cursor:pointer}.manual-option:hover{border-color:#7187ff;background:#121424}.manual-option strong,.manual-option span{display:block}.manual-option strong{font-size:.8rem}.manual-option span{margin-top:4px;color:#cdd7e3;font-size:.7rem}@media(max-width:480px){.wallet-grid{grid-template-columns:1fr}.manual-options{grid-template-columns:1fr}}
@media(max-width:620px){.wallet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pulse-dot{display:none}.section-title span,.display em{color:#fff}.modal[data-view="unavailable"]{max-height:calc(100vh - 16px);overflow:visible}.modal[data-view="unavailable"] .modal-body{min-height:340px;display:flex;align-items:center}.modal[data-view="unavailable"] .mview{width:100%}.modal[data-view="unavailable"] .mode-card{padding:24px 8px}.modal[data-view="unavailable"] .unavailable{position:static;min-height:0}.manual-options{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:480px){.modal[data-view="unavailable"] .modal-body{min-height:390px}.manual-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.manual-option{padding:10px 7px}.manual-option strong{font-size:.72rem}.manual-option span{font-size:.62rem}}
.wallet-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.wcard{width:100%;min-height:68px;padding:13px}.wcard .wicon,.wcard .wallet-logo{flex:0 0 28px}@media(max-width:620px){.wallet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}@media(max-width:400px){.wallet-grid{grid-template-columns:1fr}}
.spin-overlay[hidden]{display:none}
.wallet-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.wcard{display:grid;grid-template-rows:1fr auto;align-content:center;justify-items:center;gap:10px;aspect-ratio:1/1;min-height:0;padding:16px;text-align:center}.wcard[hidden]{display:none}.wcard .wicon,.wcard .wallet-logo{width:48px;height:48px;flex:0 0 48px}.wcard .wicon{font-size:1.7rem}.wname{display:-webkit-box;max-width:100%;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.25}@media(max-width:620px){.wallet-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}@media(max-width:440px){.wallet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wcard .hgi-stroke:before{content:"◈"}
.wallet-grid[data-wallet-list]{display:grid;grid-template-columns:1fr;gap:22px}.wallet-group h3{margin:0 0 10px;color:#cdd7e3;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.wallet-group .wallet-grid{display:grid}.wallet-glyph{display:grid;place-items:center;width:48px;height:48px;border:1px solid #7187ff66;border-radius:8px;background:#193df91f;color:#7187ff;font-size:1.7rem;font-weight:600}
.modal .wallet-grid[data-wallet-list]{display:block;grid-template-columns:none;gap:0}.modal .wallet-group{display:block;margin:0 0 24px}.modal .wallet-group:last-child{margin-bottom:0}.modal .wallet-group .wallet-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:stretch}.modal .wallet-group .wcard{width:100%;min-width:0;aspect-ratio:1/1;min-height:0}@media(max-width:700px){.modal .wallet-group .wallet-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}@media(max-width:480px){.modal .wallet-group .wallet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}}@media(max-width:340px){.modal .wallet-group .wallet-grid{grid-template-columns:1fr}}
.wallet-result{width:min(100%,520px);margin:auto;text-align:left}.result-symbol{margin-bottom:12px;font-size:2rem}.result-kicker{margin:0;color:#fff;font-size:1.35rem;font-weight:700;letter-spacing:-.03em}.result-code{margin:6px 0 18px;color:#7187ff;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;font-weight:600;letter-spacing:.03em}.result-summary,.result-next-step{margin:0;color:#cdd7e3;font-size:.9rem;line-height:1.6}.result-reasons{margin:20px 0;padding:16px;border:1px solid #2a3441;border-radius:4px;background:#1a1d2d;color:#cdd7e3;font-size:.84rem;line-height:1.55}.result-reasons strong{color:#fff}.result-reasons ul{margin:10px 0 0;padding-left:20px}.result-reasons li+li{margin-top:8px}.result-next-step{padding-top:4px;color:#fff;font-weight:500}.modal[data-view="unavailable"] .wallet-result{max-height:calc(100vh - 180px);overflow:auto}@media(max-width:480px){.modal[data-view="unavailable"] .wallet-result{max-height:calc(100vh - 150px)}}
.modal[data-view="unavailable"] .wallet-result{max-height:none;overflow:visible}
.modal{max-height:min(820px,calc(100vh - 24px))}.modal-body{padding:34px 30px 42px}.spin-overlay.simulation-complete{display:block;overflow:auto;background:#121424;padding:42px 32px 48px}.simulation-complete .wallet-result{width:min(100%,560px);margin:0 auto}.result-symbol{font-size:2.25rem;line-height:1;margin-bottom:18px}.result-kicker{color:#ff8178;font-size:1.55rem;line-height:1.2}.result-code{color:#ffaaa3;font-size:.78rem}.result-summary{font-size:1rem;line-height:1.65}.result-reasons{margin:26px 0;padding:20px 22px;border-color:#49303a;background:#1a1d2d;color:#cdd7e3;font-size:.9rem;line-height:1.65}.result-reasons strong{color:#fff;font-size:.95rem}.result-reasons li+li{margin-top:10px}.result-next-step{font-size:.95rem;line-height:1.65}@media(max-width:480px){.modal{max-height:calc(100vh - 12px)}.modal-body{padding:28px 20px 36px}.spin-overlay.simulation-complete{padding:34px 20px 40px}.result-kicker{font-size:1.35rem}.result-summary,.result-next-step{font-size:.9rem}.result-reasons{padding:16px;margin:22px 0;font-size:.84rem}}
.sw-dynamic h3{margin:12px 0 8px;font-size:1.6rem;letter-spacing:-.04em}
.sw-dynamic p{color:#cdd7e3;font-size:.9rem;line-height:1.6}
.sw-dynamic .mono{font-family:ui-monospace,Menlo,monospace;font-size:.75rem;word-break:break-all;color:#fff}
.sw-asset{display:flex;justify-content:space-between;gap:10px;padding:10px 4px;border-bottom:1px solid #2a3441;font-size:.85rem}
.sw-dynamic .button{margin-top:12px}