/* OptiVault homepage — premium motion and product showcase layer */

:root {
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
    --grid-size: 68px;
    --dark-panel: #0b0e0b;
    --dark-panel-soft: #111510;
}

body {
    background:
        radial-gradient(circle at 18% 9%, rgba(200, 243, 74, 0.11), transparent 27rem),
        radial-gradient(circle at 84% 33%, rgba(116, 235, 184, 0.08), transparent 31rem),
        #fafbf7;
}

.page-grid {
    inset: 0;
    z-index: 0;
    opacity: 1;
    background-image:
        linear-gradient(rgba(27, 36, 22, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 36, 22, 0.055) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    mask-image: none;
    -webkit-mask-image: none;
}

.cursor-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    opacity: 0;
    background-image:
        linear-gradient(rgba(124, 188, 18, 0.42) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 188, 18, 0.42) 1px, transparent 1px),
        radial-gradient(circle, rgba(190, 242, 65, 0.29), rgba(190, 242, 65, 0.08) 42%, transparent 72%);
    background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), 100% 100%;
    background-position: 0 0;
    mix-blend-mode: multiply;
    transform: none;
    mask-image: radial-gradient(330px circle at var(--cursor-x, -500px) var(--cursor-y, -500px), #000 0%, rgba(0, 0, 0, 0.82) 43%, transparent 76%);
    -webkit-mask-image: radial-gradient(330px circle at var(--cursor-x, -500px) var(--cursor-y, -500px), #000 0%, rgba(0, 0, 0, 0.82) 43%, transparent 76%);
    transition: opacity 240ms ease;
}

.cursor-glow.visible {
    opacity: 1;
}

.ambient-glow {
    opacity: 0.17;
    transition: none;
}

.hero,
.status-strip,
.section,
.final-cta,
.site-footer {
    position: relative;
}

.roadmap-section,
.trust-section,
.faq-section {
    background-color: rgba(255, 255, 255, 0.78);
}

.decisions-section,
.intelligence-section,
.site-footer {
    background-color: rgba(241, 245, 236, 0.9);
}

/* Brand and restored pill navigation */

.site-header {
    top: 18px;
    padding: 0 20px;
}

.site-nav {
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: min(100%, 1240px);
    min-height: 76px;
    padding: 10px 12px 10px 20px;
    border: 1px solid rgba(20, 28, 16, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 252, 0.96);
    box-shadow: 0 12px 35px rgba(29, 39, 23, 0.1), inset 0 1px 0 #fff;
}

.site-header.scrolled .site-nav {
    border-color: rgba(20, 28, 16, 0.17);
    background: rgba(255, 255, 252, 0.985);
    box-shadow: 0 18px 55px rgba(29, 39, 23, 0.14), inset 0 1px 0 #fff;
}

.brand {
    gap: 10px;
    min-width: 168px;
}

.brand .brand-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    filter: none;
    animation: brand-turn 15s linear infinite;
    transform-origin: center;
    will-change: transform;
}

.brand .brand-wordmark {
    width: 128px;
    height: auto;
    object-fit: contain;
    filter: brightness(0);
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
    animation-duration: 3.5s;
}

.nav-links {
    gap: 7px;
}

.nav-links .nav-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid rgba(20, 28, 16, 0.15);
    border-radius: 999px;
    color: #5f675b;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-size: 0.72rem;
    transition:
        color 200ms ease,
        border-color 200ms ease,
        background 200ms ease,
        box-shadow 200ms ease,
        transform 200ms var(--ease-premium);
}

.nav-links .nav-pill::after {
    display: none;
}

.nav-pill img {
    width: 13px;
    height: 13px;
    opacity: 0.52;
    filter: none;
    transition: opacity 180ms ease, transform 260ms var(--ease-premium);
}

.nav-links .nav-pill:hover,
.nav-links .nav-pill:focus-visible {
    color: var(--text);
    border-color: rgba(20, 28, 16, 0.28);
    background: #fff;
    box-shadow: 0 8px 20px rgba(31, 42, 24, 0.08), inset 0 1px 0 #fff;
    transform: translateY(-2px);
}

.nav-links .nav-pill:hover img,
.nav-links .nav-pill:focus-visible img {
    opacity: 0.9;
    transform: rotate(45deg);
}

.nav-links .nav-pill.active {
    color: #3f6100;
    border-color: rgba(99, 153, 0, 0.52);
    background: linear-gradient(135deg, rgba(238, 250, 210, 0.96), rgba(249, 252, 242, 0.96));
    box-shadow: 0 7px 18px rgba(86, 122, 22, 0.09), inset 0 1px 0 #fff;
}

.nav-links .nav-pill.active img {
    opacity: 0.76;
}

.nav-download {
    min-width: 127px;
    min-height: 50px;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(99, 145, 7, 0.22), 0 0 0 0 rgba(200, 243, 74, 0.3);
    animation: nav-cta-pulse 4.8s ease-in-out infinite;
}

.nav-download::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -45%;
    width: 32%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.54), transparent);
    transform: skewX(-18deg);
    animation: nav-button-sheen 5.7s 1s ease-in-out infinite;
}

/* More expressive global motion primitives */

.motion-ready .reveal {
    --reveal-x: 0px;
    --reveal-y: 28px;
    --reveal-scale: 0.985;
    --reveal-rotate: 0deg;
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(var(--reveal-x), var(--reveal-y), 0) scale(var(--reveal-scale)) rotate(var(--reveal-rotate));
    transition:
        opacity 620ms ease var(--reveal-delay, 0ms),
        filter 680ms ease var(--reveal-delay, 0ms),
        transform 780ms var(--ease-premium) var(--reveal-delay, 0ms),
        clip-path 820ms var(--ease-premium) var(--reveal-delay, 0ms);
}

.motion-ready .reveal.revealed {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

.motion-ready .reveal-left {
    --reveal-x: -52px;
    --reveal-y: 0px;
}

.motion-ready .reveal-right {
    --reveal-x: 52px;
    --reveal-y: 0px;
}

.motion-ready .reveal-scale {
    --reveal-y: 18px;
    --reveal-scale: 0.955;
}

.motion-ready .reveal-clip {
    clip-path: inset(0 0 100% 0 round 24px);
}

.motion-ready .reveal-clip.revealed {
    clip-path: inset(0 0 0 0 round 0);
}

.section-word {
    display: inline-block;
}

.section-heading h2 .section-word,
.availability-card h2 .section-word,
.final-cta h2 .section-word,
.native-showcase h2 .section-word {
    color: inherit;
    background: none;
}

.motion-ready .reveal .section-word {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 22px, 0) rotate(1.4deg);
    transition:
        opacity 460ms ease,
        filter 540ms ease,
        transform 650ms var(--ease-premium);
    transition-delay: calc(110ms + (var(--section-word-index, 0) * 38ms));
}

.motion-ready .reveal.revealed .section-word {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotate(0);
}

.section-kicker,
.native-eyebrow {
    position: relative;
}

.section-kicker::before,
.native-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 2px;
    border-radius: 50%;
    background: #6f9818;
    box-shadow: 0 0 0 5px rgba(111, 152, 24, 0.1), 0 0 18px rgba(111, 152, 24, 0.3);
    animation: signal-dot 2.6s ease-in-out infinite;
}

.motion-section {
    --section-shift: 0px;
    overflow-x: clip;
}

.motion-section::after {
    content: "";
    position: absolute;
    inset: 12% 4%;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, rgba(200, 243, 74, 0.08), transparent 67%);
    transform: translate3d(0, 24px, 0) scale(0.94);
    transition: opacity 900ms ease, transform 1200ms var(--ease-premium);
}

.motion-section.section-active::after {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.card-spotlight {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(420px circle at var(--local-x, 50%) var(--local-y, 50%), rgba(200, 243, 74, 0.17), transparent 45%);
    transition: opacity 220ms ease;
}

.spotlight-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.spotlight-card:hover > .card-spotlight {
    opacity: 1;
}

.spotlight-card > :not(.card-spotlight) {
    position: relative;
    z-index: 1;
}

/* Bank network — reference section */

.bank-network-section {
    position: relative;
    z-index: 2;
    min-height: 238px;
    padding: 52px 0 40px;
    overflow: hidden;
    color: #f5f7f2;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    background:
        radial-gradient(circle at 12% 75%, rgba(190, 242, 65, 0.15), transparent 24rem),
        radial-gradient(circle at 87% 35%, rgba(190, 242, 65, 0.11), transparent 24rem),
        var(--dark-panel);
}

.bank-network-section::after,
.native-showcase::after {
    display: none;
}

.bank-grid-glow,
.native-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.085) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.085) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

.bank-network-heading {
    display: flex;
    justify-content: center;
    z-index: 2;
}

.bank-network-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #aeb5aa;
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.bank-network-label strong {
    color: #f6f8f3;
    font-weight: 700;
}

.bank-network-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 5px rgba(200, 243, 74, 0.07), 0 0 18px rgba(200, 243, 74, 0.8);
    animation: bank-dot-pulse 2.2s ease-in-out infinite;
}

.bank-ticker {
    position: relative;
    z-index: 2;
    margin-top: 38px;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.bank-ticker-track {
    display: flex;
    width: max-content;
    animation: bank-marquee 42s linear infinite;
    will-change: transform;
}

.bank-ticker-group {
    display: flex;
    align-items: center;
    gap: clamp(52px, 6vw, 105px);
    padding-right: clamp(52px, 6vw, 105px);
}

.bank-item {
    flex: 0 0 auto;
    color: rgba(228, 232, 225, 0.35);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.7vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    white-space: nowrap;
    transition: color 220ms ease, text-shadow 220ms ease;
}

.bank-item:hover {
    color: rgba(241, 247, 235, 0.86);
    text-shadow: 0 0 24px rgba(200, 243, 74, 0.18);
}

.bank-ticker:hover .bank-ticker-track,
.bank-ticker:focus-within .bank-ticker-track {
    animation-play-state: paused;
}

/* Native product gallery — reference section */

.native-showcase {
    position: relative;
    z-index: 2;
    min-height: 920px;
    padding: 112px 0 88px;
    overflow: hidden;
    color: #f7f8f4;
    background:
        radial-gradient(circle at 7% 65%, rgba(200, 243, 74, 0.13), transparent 24rem),
        radial-gradient(circle at 92% 26%, rgba(104, 129, 61, 0.11), transparent 25rem),
        var(--dark-panel);
}

.native-grid {
    opacity: 0.72;
    mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}

.native-showcase-heading {
    z-index: 2;
    max-width: 920px;
    margin: 0 auto 62px;
    text-align: center;
}

.native-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #aeb6aa;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.native-eyebrow::before {
    background: var(--lime);
}

.native-showcase h2 {
    margin: 23px 0 0;
    color: #f8faf5;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 6.5vw, 6.6rem);
    font-weight: 600;
    letter-spacing: -0.068em;
    line-height: 0.95;
}

.native-showcase h2 > span {
    color: var(--lime);
}

.native-showcase-heading p {
    max-width: 620px;
    margin: 25px auto 0;
    color: #aeb6aa;
    font-size: 0.95rem;
    line-height: 1.75;
    text-wrap: balance;
}

.phone-viewport {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 26px 0 60px;
    mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.phone-track {
    display: flex;
    width: max-content;
    animation: phone-marquee 50s linear infinite;
    will-change: transform;
}

.phone-group {
    display: flex;
    align-items: flex-start;
    gap: 34px;
    padding: 0 34px 0 0;
}

.phone-frame {
    --phone-y: 0px;
    --phone-rotate: 0deg;
    position: relative;
    flex: 0 0 auto;
    width: 292px;
    aspect-ratio: 1125 / 2436;
    margin: 0;
    overflow: hidden;
    border: 8px solid #20231f;
    border-radius: 48px;
    background: #fff;
    box-shadow: 0 32px 68px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255, 255, 255, 0.08);
    transform: translateY(var(--phone-y)) rotate(var(--phone-rotate));
    transform-origin: center bottom;
    transition:
        transform 420ms var(--ease-premium),
        border-color 260ms ease,
        box-shadow 320ms ease;
    scroll-snap-align: center;
}

.phone-frame:nth-child(2),
.phone-frame:nth-child(5) {
    --phone-y: 26px;
    --phone-rotate: 0.5deg;
}

.phone-frame:nth-child(3),
.phone-frame:nth-child(6) {
    --phone-y: -13px;
    --phone-rotate: -0.45deg;
}

.phone-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.phone-frame figcaption {
    position: absolute;
    right: 18px;
    bottom: 16px;
    left: 18px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    color: #f8faf5;
    background: rgba(11, 14, 11, 0.72);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(12px);
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 280ms var(--ease-premium);
}

.phone-viewport:hover .phone-track,
.phone-viewport:focus-within .phone-track {
    animation-play-state: paused;
}

.phone-frame:hover {
    border-color: #343934;
    box-shadow: 0 42px 82px rgba(0, 0, 0, 0.54), 0 0 34px rgba(200, 243, 74, 0.1);
    transform: translateY(calc(var(--phone-y) - 14px)) rotate(0deg) scale(1.018);
}

.phone-frame:hover figcaption {
    opacity: 1;
    transform: translateY(0);
}

/* Bespoke choreography for every existing section */

.status-strip {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.86);
}

.status-grid > div {
    position: relative;
}

.status-grid > div::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 34px;
    width: 0;
    height: 2px;
    background: var(--lime);
    transition: width 520ms var(--ease-premium);
}

.status-grid.revealed > div::after {
    width: calc(100% - 68px);
    transition-delay: calc(var(--status-index, 0) * 90ms + 280ms);
}

.status-grid > div:nth-child(1) { --status-index: 0; }
.status-grid > div:nth-child(2) { --status-index: 1; }
.status-grid > div:nth-child(3) { --status-index: 2; }

.motion-ready .status-grid.reveal .status-icon {
    opacity: 0;
    transform: scale(0.55) rotate(-35deg);
    transition: opacity 420ms ease, transform 620ms var(--ease-premium);
}

.motion-ready .status-grid.revealed .status-icon {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.product-section .section-heading {
    --reveal-y: 44px;
}

.comparison-wrap {
    position: relative;
    isolation: isolate;
}

.motion-ready .comparison-wrap.reveal {
    --reveal-scale: 0.96;
    --reveal-y: 24px;
}

.motion-ready .comparison-wrap.reveal .comparison-intro {
    opacity: 0;
    transform: translateX(-36px);
    transition: opacity 520ms ease 200ms, transform 700ms var(--ease-premium) 200ms;
}

.motion-ready .comparison-wrap.revealed .comparison-intro {
    opacity: 1;
    transform: translateX(0);
}

.comparison-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -35%;
    z-index: 2;
    width: 22%;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(200, 243, 74, 0.22), transparent);
    transform: skewX(-14deg);
}

.comparison-wrap.revealed::after {
    animation: comparison-sheen 1.15s 620ms var(--ease-premium) 1 forwards;
}

.category-table tbody tr {
    transition: background 180ms ease;
}

.category-table tbody tr:hover {
    background: rgba(200, 243, 74, 0.075);
}

.decisions-section .section-heading {
    --reveal-x: -52px;
    --reveal-y: 0px;
}

.motion-ready .feature-list li {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
    transition: opacity 420ms ease, transform 580ms var(--ease-premium);
}

.motion-ready .section-heading.revealed .feature-list li {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.section-heading.revealed .feature-list li:nth-child(1) { transition-delay: 250ms; }
.section-heading.revealed .feature-list li:nth-child(2) { transition-delay: 320ms; }
.section-heading.revealed .feature-list li:nth-child(3) { transition-delay: 390ms; }
.section-heading.revealed .feature-list li:nth-child(4) { transition-delay: 460ms; }

.motion-ready .section-heading .feature-list li::before {
    transform: scale(0);
    transition: transform 450ms var(--ease-premium);
}

.motion-ready .section-heading.revealed .feature-list li::before {
    transform: scale(1);
}

.weekly-wrap {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform-style: preserve-3d;
}

.motion-ready .weekly-wrap.reveal {
    --reveal-x: 54px;
    --reveal-y: 0px;
    --reveal-scale: 0.97;
}

.roadmap-heading {
    --reveal-y: 46px;
}

.motion-ready .roadmap.reveal .roadmap-card {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 46px, 0) rotateX(5deg);
    transform-origin: center bottom;
    transition: opacity 500ms ease, filter 540ms ease, transform 780ms var(--ease-premium);
}

.motion-ready .roadmap.revealed .roadmap-card {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) rotateX(0);
}

.roadmap-card.current .stage-label::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #668f10;
    box-shadow: 0 0 0 4px rgba(102, 143, 16, 0.11);
    animation: signal-dot 2.2s ease-in-out infinite;
}

.roadmap-card.money-os {
    position: relative;
    overflow: hidden;
}

.roadmap-card.money-os::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -50%;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.44), transparent);
    transform: skewX(-18deg);
}

.roadmap.revealed .roadmap-card.money-os::after {
    animation: money-os-sheen 1.4s 840ms var(--ease-premium) 1 forwards;
}

.motion-ready .evolution-line.reveal > * {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 360ms ease, transform 460ms var(--ease-premium);
}

.motion-ready .evolution-line.revealed > * {
    opacity: 1;
    transform: translateX(0);
}

.evolution-line.revealed > :nth-child(1) { transition-delay: 80ms; }
.evolution-line.revealed > :nth-child(2) { transition-delay: 130ms; }
.evolution-line.revealed > :nth-child(3) { transition-delay: 180ms; }
.evolution-line.revealed > :nth-child(4) { transition-delay: 230ms; }
.evolution-line.revealed > :nth-child(5) { transition-delay: 280ms; }
.evolution-line.revealed > :nth-child(6) { transition-delay: 330ms; }
.evolution-line.revealed > :nth-child(7) { transition-delay: 380ms; }
.evolution-line.revealed > :nth-child(8) { transition-delay: 430ms; }
.evolution-line.revealed > :nth-child(9) { transition-delay: 480ms; }
.evolution-line.revealed > :nth-child(10) { transition-delay: 530ms; }
.evolution-line.revealed > :nth-child(11) { transition-delay: 580ms; }

.intelligence-section .section-heading {
    --reveal-x: -52px;
    --reveal-y: 0px;
}

.intelligence-loop {
    --reveal-x: 52px;
    --reveal-y: 0px;
}

.motion-ready .intelligence-loop .loop-line {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.15s var(--ease-premium) 240ms;
}

.motion-ready .intelligence-loop.revealed .loop-line {
    transform: scaleY(1);
}

.intelligence-loop article {
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 220ms var(--ease-premium);
}

.intelligence-loop article:hover {
    border-color: var(--border-strong);
    box-shadow: 0 13px 32px rgba(33, 45, 25, 0.075);
    transform: translateX(6px);
}

.trust-heading {
    --reveal-scale: 0.97;
    --reveal-y: 34px;
}

.trust-card {
    --card-rotate: 0deg;
    overflow: hidden;
    transform-style: preserve-3d;
}

.trust-card:nth-child(odd) { --reveal-rotate: -1.4deg; }
.trust-card:nth-child(even) { --reveal-rotate: 1.4deg; }

.disclosure {
    overflow: hidden;
    clip-path: inset(0 100% 0 0 round 18px);
}

.disclosure.revealed {
    clip-path: inset(0 0 0 0 round 18px);
}

.availability-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.availability-card::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 9%;
    z-index: 0;
    width: 260px;
    height: 260px;
    opacity: 0.035;
    background: url("../Asset 4.svg") center / contain no-repeat;
    transform: translateY(-50%);
    animation: watermark-turn 25s linear infinite;
}

.availability-card > * {
    position: relative;
    z-index: 2;
}

.availability-card .availability-copy,
.final-cta-inner p,
.final-cta-inner .final-actions {
    transition: opacity 520ms ease, transform 680ms var(--ease-premium);
}

.motion-ready .availability-card:not(.revealed) .availability-copy,
.motion-ready .final-cta-inner:not(.revealed) p,
.motion-ready .final-cta-inner:not(.revealed) .final-actions {
    opacity: 0;
    transform: translateY(18px);
}

.availability-card.revealed .availability-copy { transition-delay: 250ms; }
.final-cta-inner.revealed p { transition-delay: 260ms; }
.final-cta-inner.revealed .final-actions { transition-delay: 340ms; }

.faq-grid > .section-heading {
    --reveal-x: -50px;
    --reveal-y: 0px;
}

.faq-list {
    --reveal-x: 50px;
    --reveal-y: 0px;
}

.motion-ready .faq-list.reveal .faq-item {
    opacity: 0;
    transform: translateX(18px);
    transition: opacity 420ms ease, transform 560ms var(--ease-premium);
}

.motion-ready .faq-list.revealed .faq-item {
    opacity: 1;
    transform: translateX(0);
}

.faq-list.revealed .faq-item:nth-child(1) { transition-delay: 120ms; }
.faq-list.revealed .faq-item:nth-child(2) { transition-delay: 190ms; }
.faq-list.revealed .faq-item:nth-child(3) { transition-delay: 260ms; }
.faq-list.revealed .faq-item:nth-child(4) { transition-delay: 330ms; }

.faq-answer p {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 240ms ease 70ms, transform 300ms var(--ease-premium) 70ms;
}

.faq-item.open .faq-answer p {
    opacity: 1;
    transform: translateY(0);
}

.final-cta {
    overflow: hidden;
}

.final-cta::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 520px;
    height: 520px;
    opacity: 0.035;
    background: url("../Asset 4.svg") center / contain no-repeat;
    transform: translate(-50%, -50%);
    animation: watermark-turn-centered 30s linear infinite;
}

.final-cta-inner {
    z-index: 2;
}

.footer-brand,
.footer-links > div,
.footer-bottom {
    --reveal-y: 22px;
}

.footer-links a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    height: 1px;
    background: var(--accent-text);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 220ms var(--ease-premium);
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Button movement across the site */

.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.65), transparent 56%);
    transform: translateY(35%);
    transition: opacity 220ms ease, transform 300ms var(--ease-premium);
}

.button:hover::before,
.button:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

.hero-product::after {
    animation: hero-stage-breathe 6.5s ease-in-out infinite;
}

/* Keyframes */

@keyframes brand-turn {
    to { transform: rotate(360deg); }
}

@keyframes hero-stage-breathe {
    0%, 100% { opacity: 0.78; transform: scaleY(0.42) scaleX(0.96); }
    50% { opacity: 1; transform: scaleY(0.5) scaleX(1.06); }
}

@keyframes nav-cta-pulse {
    0%, 72%, 100% { box-shadow: 0 10px 28px rgba(99, 145, 7, 0.22), 0 0 0 0 rgba(200, 243, 74, 0); }
    82% { box-shadow: 0 13px 34px rgba(99, 145, 7, 0.27), 0 0 0 8px rgba(200, 243, 74, 0.08); }
}

@keyframes nav-button-sheen {
    0%, 74% { translate: 0 0; }
    100% { translate: 470% 0; }
}

@keyframes signal-dot {
    0%, 100% { transform: scale(0.86); opacity: 0.72; }
    50% { transform: scale(1.12); opacity: 1; }
}

@keyframes bank-dot-pulse {
    0%, 100% { transform: scale(0.82); box-shadow: 0 0 0 3px rgba(200, 243, 74, 0.06), 0 0 11px rgba(200, 243, 74, 0.45); }
    50% { transform: scale(1.12); box-shadow: 0 0 0 7px rgba(200, 243, 74, 0.075), 0 0 25px rgba(200, 243, 74, 0.86); }
}

@keyframes bank-marquee {
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes phone-marquee {
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes comparison-sheen {
    0% { left: -35%; opacity: 0; }
    18% { opacity: 1; }
    100% { left: 122%; opacity: 0; }
}

@keyframes money-os-sheen {
    from { translate: 0 0; }
    to { translate: 520% 0; }
}

@keyframes watermark-turn {
    from { transform: translateY(-50%) rotate(0); }
    to { transform: translateY(-50%) rotate(360deg); }
}

@keyframes watermark-turn-centered {
    from { transform: translate(-50%, -50%) rotate(0); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsive */

@media (max-width: 1160px) {
    .site-nav {
        width: min(100%, 1080px);
        padding-left: 16px;
    }

    .brand {
        min-width: 148px;
    }

    .brand .brand-wordmark {
        width: 108px;
    }

    .nav-links {
        gap: 5px;
    }

    .nav-links .nav-pill {
        gap: 5px;
        padding: 8px 10px;
        font-size: 0.66rem;
    }

    .nav-download {
        min-width: 112px;
    }
}

@media (max-width: 1040px) {
    .site-nav {
        grid-template-columns: auto auto 1fr auto;
    }

    .menu-toggle {
        position: relative;
        display: block;
        width: 44px;
        height: 44px;
        min-width: 44px;
        margin-left: 12px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: #fff;
        cursor: pointer;
    }

    .menu-toggle span {
        position: absolute;
        left: 13px;
        width: 16px;
        height: 1px;
        background: var(--text);
        transition: transform 180ms ease, top 180ms ease;
    }

    .menu-toggle span:first-child { top: 16px; }
    .menu-toggle span:last-child { top: 25px; }
    .menu-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

    .nav-links {
        position: fixed;
        top: 104px;
        right: 24px;
        left: 24px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        max-height: calc(100dvh - 120px);
        padding: 14px;
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: 28px;
        background: #fffffc;
        box-shadow: 0 24px 65px rgba(31, 42, 24, 0.18);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px) scale(0.98);
        transition: opacity 200ms ease, visibility 200ms ease, transform 280ms var(--ease-premium);
    }

    .nav-links.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .nav-links .nav-pill {
        justify-content: flex-start;
        min-height: 50px;
        padding: 11px 14px;
        font-size: 0.78rem;
    }

    .nav-links .nav-pill:last-child {
        grid-column: 1 / -1;
    }

    .nav-download {
        grid-column: 4;
    }
}

@media (max-width: 700px) {
    :root {
        --grid-size: 52px;
    }

    .page-grid {
        opacity: 0.72;
    }

    .site-header {
        top: 10px;
        padding: 0 10px;
    }

    .site-nav {
        min-height: 64px;
        padding: 8px 8px 8px 13px;
    }

    .brand {
        min-width: 0;
        gap: 8px;
    }

    .brand .brand-mark {
        width: 27px;
        height: 27px;
    }

    .brand .brand-wordmark {
        width: 91px;
    }

    .menu-toggle {
        margin-left: 7px;
    }

    .nav-links {
        top: 84px;
        right: 10px;
        left: 10px;
        grid-template-columns: 1fr;
        border-radius: 23px;
    }

    .nav-links .nav-pill:last-child {
        grid-column: auto;
    }

    .nav-download {
        min-width: 44px;
        min-height: 46px;
        width: 44px;
        padding: 0;
    }

    .nav-download span {
        display: none;
    }

    .bank-network-section {
        min-height: 210px;
        padding: 43px 0 32px;
    }

    .bank-network-label {
        gap: 8px;
        font-size: 0.61rem;
        letter-spacing: 0.11em;
    }

    .bank-ticker {
        margin-top: 32px;
    }

    .bank-ticker-group {
        gap: 48px;
        padding-right: 48px;
    }

    .bank-item {
        font-size: 1.12rem;
    }

    .native-showcase {
        min-height: auto;
        padding: 88px 0 70px;
    }

    .native-showcase-heading {
        margin-bottom: 48px;
    }

    .native-eyebrow {
        font-size: 0.59rem;
        letter-spacing: 0.13em;
    }

    .native-showcase h2 {
        margin-top: 19px;
        font-size: clamp(3rem, 13.2vw, 4.35rem);
    }

    .native-showcase-heading p {
        font-size: 0.84rem;
    }

    .phone-viewport {
        overflow-x: auto;
        padding: 20px 0 45px;
        mask-image: none;
        -webkit-mask-image: none;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .phone-viewport::-webkit-scrollbar {
        display: none;
    }

    .phone-track {
        animation: none;
    }

    .phone-group {
        gap: 18px;
        padding: 0 18px;
    }

    .phone-group[aria-hidden="true"] {
        display: none;
    }

    .phone-frame {
        --phone-y: 0px !important;
        --phone-rotate: 0deg !important;
        width: min(74vw, 255px);
        border-width: 7px;
        border-radius: 42px;
        box-shadow: 0 24px 52px rgba(0, 0, 0, 0.4);
    }

    .phone-frame figcaption {
        opacity: 1;
        transform: none;
    }

    .status-grid > div::after {
        left: 0;
        width: 0;
    }

    .status-grid.revealed > div::after {
        width: 100%;
    }

    .availability-card::after {
        left: 50%;
        width: 220px;
        height: 220px;
        transform: translate(-50%, -50%);
        animation: watermark-turn-centered 25s linear infinite;
    }
}

@media (max-width: 390px) {
    .brand .brand-wordmark {
        width: 82px;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
        min-width: 42px;
        margin-left: 5px;
    }

    .nav-download {
        width: 42px;
        min-width: 42px;
        min-height: 42px;
    }
}

@media (max-width: 340px) {
    .brand .brand-wordmark {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand .brand-mark,
    .nav-download,
    .nav-download::after,
    .section-kicker::before,
    .native-eyebrow::before,
    .bank-network-dot,
    .bank-ticker-track,
    .phone-track,
    .hero-product::after,
    .roadmap-card.current .stage-label::before,
    .availability-card::after,
    .final-cta::after,
    .comparison-wrap.revealed::after,
    .roadmap.revealed .roadmap-card.money-os::after {
        animation: none !important;
    }

    .cursor-glow,
    .ambient-glow {
        display: none;
    }

    .motion-ready .reveal,
    .motion-ready .reveal .section-word,
    .motion-ready .status-grid.reveal .status-icon,
    .motion-ready .feature-list li,
    .motion-ready .section-heading .feature-list li::before,
    .motion-ready .roadmap.reveal .roadmap-card,
    .motion-ready .evolution-line.reveal > *,
    .motion-ready .intelligence-loop .loop-line,
    .motion-ready .faq-list.reveal .faq-item,
    .faq-answer p {
        opacity: 1 !important;
        filter: none !important;
        clip-path: none !important;
        transform: none !important;
        transition: none !important;
    }

    .bank-ticker,
    .phone-viewport {
        overflow-x: auto;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .bank-ticker-track,
    .phone-track {
        transform: none;
    }
}