/* viaBanking \002014 home page Design tokens and layout mirror the Figma file "viaBanking / Home Page". Section geometry (paddings, column ratios, background art) is taken 1:1 from the 1440px artboard and expressed in vw so it scales proportionally. */ /* ============================================================ viaBanking \002014 design tokens (Figma collection "Home Page") ============================================================ */ :root{ /* base palette */ --navy-950:#00142F; --navy-900:#001D46; --navy-800:#0D3164; --blue-700:#0052AC; --blue-600:#0067D7; --blue-400:#47AAFF; --blue-100:#D3E3FD; --blue-75:#DFEBFF; --blue-70:#D8E6FD; --blue-60:#ECF2FF; --blue-50:#F0F5FF; --blue-40:#EBF3FF; --blue-30:#F6F9FF; --blue-20:#F0F4FD; --steel-400:#9EB0C8; --steel-300:#AFC4E8; --steel-200:#BED3EB; --steel-100:#E3ECF7; --yellow-500:#FDD009; --yellow-100:#FFF7D3; --red-500:#FF4646; --white:#FFFFFF; --ink-900:#171717; --pale-blue:#D6E3F5; /* semantic \002014 text */ --text-primary:var(--navy-900); --text-secondary:rgba(0,29,70,.82); --text-tertiary:rgba(0,29,70,.64); --text-muted:rgba(0,29,70,.55); --text-neutral:var(--ink-900); --text-accent:var(--blue-600); --text-highlight:var(--yellow-500); --text-inverse:var(--white); --text-inverse-secondary:rgba(255,255,255,.82); --text-inverse-tertiary:rgba(255,255,255,.64); --text-inverse-muted:rgba(255,255,255,.56); --text-inverse-faint:rgba(255,255,255,.52); --text-disabled:rgba(0,29,70,.35); /* semantic \002014 surface */ --surface-page:var(--white); --surface-subtle:var(--blue-30); --surface-card:var(--white); --surface-card-tint:var(--blue-40); --surface-accent:var(--blue-600); --surface-inverse:var(--navy-900); --surface-inverse-alt:var(--navy-800); --surface-pill:var(--white); --surface-pill-icon:var(--blue-60); --surface-badge:rgba(227,236,247,.51); --surface-badge-inverse:rgba(227,236,247,.11); --surface-badge-on-navy:rgba(227,236,247,.03); --surface-glass:rgba(255,255,255,.10); --surface-overlay-light:rgba(255,255,255,.23); --surface-pale:var(--pale-blue); /* semantic \002014 border */ --border-default:var(--blue-75); --border-subtle:rgba(190,211,235,.40); --border-inverse:rgba(255,255,255,.20); --border-focus:var(--blue-600); --border-rule:rgba(0,29,70,.07); --border-on-inverse:rgba(204,219,244,.23); /* interactive */ --i-primary-bg:var(--navy-900); --i-primary-bg-hover:var(--navy-800); --i-primary-bg-active:var(--navy-950); --i-primary-bg-disabled:rgba(0,29,70,.25); --i-primary-fg:var(--white); --i-secondary-bg:var(--white); --i-secondary-bg-hover:var(--blue-30); --i-secondary-fg:var(--navy-900); --i-accent-bg:var(--blue-600); --i-accent-bg-hover:var(--blue-700); --i-link:var(--blue-600); --i-link-hover:var(--blue-700); /* radius */ --r-xs:3px; --r-sm:10px; --r-md:15px; --r-lg:22px; --r-xl:30px; --r-pill:100px; --r-full:999px; /* spacing */ --s-2:2px; --s-4:4px; --s-6:6px; --s-8:8px; --s-10:10px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px; --s-28:28px; --s-32:32px; --s-40:40px; --s-48:48px; --s-56:56px; --s-64:64px; --s-80:80px; --s-96:96px; --s-120:120px; --s-160:160px; /* layout */ --content-max:1148px; --page-pad:24px; --grid-gap:20px; /* sizes */ --control-md:40px; --control-lg:54px; --icon-tile:55px; --step-marker:37px; --accordion-toggle:39px; /* type ramp \002014 fluid */ --t-hero:clamp(32px,5.2vw,48px); --t-h2:clamp(26px,3.6vw,36px); --t-h3:clamp(20px,2.2vw,24px); --t-h4:clamp(17px,1.55vw,20px); --t-body-lg:17px; --t-body-md:clamp(15px,1.15vw,16px); --t-body-sm:15px; --t-body-xs:14px; --t-caption:13px; --t-label:12px; --t-eyebrow:11.8px; --t-link:15.2px; --t-stat-xl:clamp(30px,3.1vw,40px); --t-stat-lg:clamp(28px,2.9vw,36px); --lh-tight:1.18; --lh-body:1.4; /* elevation */ --e-card-navy: 0 2.77px 2.21px rgba(0,29,70,.020), 0 6.65px 5.32px rgba(0,29,70,.030), 0 12.5px 10.0px rgba(0,29,70,.035), 0 22.3px 17.9px rgba(0,29,70,.030), 0 41.8px 33.4px rgba(0,29,70,.045), 0 100px 80px rgba(0,29,70,.020); --e-card-blue: 0 2.77px 2.21px rgba(0,103,215,.020), 0 6.65px 5.32px rgba(0,103,215,.030), 0 12.5px 10.0px rgba(0,103,215,.040), 0 22.3px 17.9px rgba(0,103,215,.050), 0 41.8px 33.4px rgba(0,103,215,.070), 0 100px 80px rgba(0,103,215,.090); --e-card-neutral: 0 2.77px 2.21px rgba(158,176,200,.020), 0 6.65px 5.32px rgba(158,176,200,.030), 0 12.5px 10.0px rgba(158,176,200,.035), 0 22.3px 17.9px rgba(158,176,200,.030), 0 41.8px 33.4px rgba(158,176,200,.050), 0 100px 80px rgba(158,176,200,.060); --e-soft-blue: 4px 4px 20px rgba(216,230,253,.55); /* gradients */ --g-sky: linear-gradient(135deg, #F0F4FD 0%, #D3E3FD 100%); --g-mist: linear-gradient(180deg, #F6F9FF 66%, #FFFFFF 100%); --g-card-navy: linear-gradient(135deg, #001D46 0%, #0D3164 100%); --g-card-frost: linear-gradient(135deg, #FFFFFF 0%, #EBF3FF 63%, #FFFFFF 100%); --g-icon-blue: linear-gradient(140deg, #0067D7 0%, #47AAFF 100%); --g-gold: linear-gradient(135deg, #FDD009 0%, #FFF7D3 100%); --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); } /* ============================================================ reset */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--surface-page);color:var(--text-primary); font-family:'Arimo',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; font-size:var(--t-body-md);line-height:var(--lh-body); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; /* Clip decorations without creating a second vertical scroll container. */ overflow-x:clip; } img,svg,video{display:block;max-width:100%} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p{margin:0} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--border-focus);outline-offset:3px;border-radius:6px} /* ============================================================ layout */ .wrap{width:100%;max-width:calc(var(--content-max) + var(--page-pad)*2);margin-inline:auto;padding-inline:var(--page-pad)} .section{position:relative;isolation:isolate;padding-block:clamp(56px,7vw,96px)} .section--tint{background:var(--g-mist)} .section--sky{background:var(--g-sky)} .dots{position:absolute;inset:0;pointer-events:none;opacity:.55; background-image:radial-gradient(rgba(0,29,70,.10) 1px, transparent 1px); background-size:22px 22px;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)} .rule{height:1px;background:var(--border-rule);border:0;margin:0} .sec-head{position:relative;display:grid;grid-template-columns:minmax(0,389fr) minmax(0,532fr);gap:clamp(24px,15.8vw,228px);align-items:start} .sec-head--stack{grid-template-columns:1fr} @media(max-width:900px){.sec-head{grid-template-columns:1fr;gap:24px}} /* ============================================================ type */ .h1{font-size:var(--t-hero);font-weight:600;line-height:var(--lh-tight);letter-spacing:-.01em} .h2{font-size:var(--t-h2);font-weight:600;line-height:var(--lh-tight);letter-spacing:-.005em} .h3{font-size:var(--t-h3);font-weight:600;line-height:var(--lh-tight)} .h4{font-size:var(--t-h4);font-weight:600;line-height:var(--lh-tight)} .lead{font-size:var(--t-body-md);color:var(--text-secondary)} .body-sm{font-size:var(--t-body-sm);color:var(--text-secondary)} .title-case{text-transform:capitalize} .on-dark{color:var(--text-inverse)} .on-dark-2{color:var(--text-inverse-secondary)} /* ============================================================ button */ .btn{ display:inline-flex;align-items:center;gap:var(--s-16); min-height:var(--control-lg);padding:var(--s-8) var(--s-8) var(--s-8) var(--s-20); border-radius:var(--r-md);background:var(--i-primary-bg);color:var(--i-primary-fg); font-weight:500;font-size:var(--t-body-md);white-space:nowrap; transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease); will-change:transform; } .btn__icon{ flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm); background:var(--g-gold);transition:transform .3s var(--ease-out) } .btn__icon svg{width:27px;height:27px} .btn:hover{background:var(--i-primary-bg-hover);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,29,70,.18)} .btn:hover .btn__icon{transform:translateX(3px)} .btn:active{background:var(--i-primary-bg-active);transform:translateY(0);box-shadow:0 4px 10px rgba(0,29,70,.16)} .btn[disabled],.btn.is-disabled{background:var(--i-primary-bg-disabled);color:var(--text-inverse-tertiary);pointer-events:none} .btn--no-icon{padding-inline:18px} .btn--accent{background:var(--i-accent-bg)} .btn--accent:hover{background:var(--i-accent-bg-hover)} .btn--accent:active{background:var(--surface-inverse-alt)} .btn--secondary{background:var(--i-secondary-bg);color:var(--i-secondary-fg);box-shadow:inset 0 0 0 1px var(--border-default)} .btn--secondary:hover{background:var(--i-secondary-bg-hover)} .btn--secondary:active{background:var(--surface-pill-icon);box-shadow:inset 0 0 0 1px var(--border-focus)} .btn--block{display:flex;justify-content:space-between;width:100%} /* ============================================================ nav item */ .navlink{ display:inline-flex;align-items:center;justify-content:center; height:var(--control-md);padding-inline:23px;border-radius:var(--r-md); font-size:var(--t-body-md);color:var(--text-primary); transition:background .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease) } .navlink:hover{background:var(--surface-subtle)} .navlink:active{background:var(--surface-pill-icon)} .navlink.is-active{background:var(--surface-pill);box-shadow:var(--e-soft-blue)} /* ============================================================ badge pill */ .pill{ display:inline-flex;align-items:center;gap:var(--s-8); height:var(--control-md);padding:var(--s-4) var(--s-12) var(--s-4) var(--s-4); border-radius:var(--r-pill);background:var(--surface-pill); font-size:var(--t-body-md);font-weight:500;color:var(--text-neutral) } .pill--on-image{background:var(--surface-overlay-light);backdrop-filter:blur(6px)} .pill__icon{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-pill);background:var(--surface-pill-icon)} .pill--on-image .pill__icon{background:var(--surface-pill)} .pill__icon svg{width:20px;height:20px} .pill--wide{padding-inline:var(--s-4) var(--s-16)} /* ============================================================ tag */ .tag{ display:inline-flex;align-items:center;gap:7px; padding:var(--s-8) var(--s-12);border-radius:var(--r-full); background:var(--surface-badge);border:1px solid var(--border-subtle); font-size:var(--t-eyebrow);letter-spacing:.01em;color:var(--text-accent) } .tag::before{content:"";width:6px;height:6px;border-radius:var(--r-xs);background:currentColor;flex:0 0 auto} .tag--on-navy{background:var(--surface-badge-on-navy);border-color:var(--border-inverse);color:var(--text-inverse)} .tag--on-blue{background:var(--surface-badge-inverse);border-color:var(--border-inverse);color:var(--text-inverse)} .tag--upper{text-transform:uppercase} /* ============================================================ link */ .link{ display:inline-flex;align-items:center;gap:var(--s-6); font-weight:700;font-size:var(--t-link);color:var(--i-link); transition:color .2s var(--ease) } .link .arw{font-family:'Manrope',sans-serif;font-weight:700;transition:transform .28s var(--ease-out)} .link:hover{color:var(--i-link-hover)} .link:hover .arw{transform:translateX(5px)} .link:active{opacity:.75} .link--dark{color:var(--text-inverse)} .link--dark:hover{color:var(--text-inverse-secondary)} /* ============================================================ header */ .hdr{position:fixed;inset:0 0 auto;z-index:60;transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s} .hdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-16);height:76px} .hdr.is-stuck{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);box-shadow:0 1px 0 var(--border-rule)} .hdr__logo{display:block;width:140px;flex:0 0 auto} .hdr__logo svg{width:100%;height:auto} .hdr__nav{display:flex;align-items:center;gap:var(--s-24)} .hdr__cta{flex:0 0 auto} .burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px; width:44px;height:44px;border-radius:var(--r-pill); background:var(--surface-pill);border:1px solid var(--border-subtle);transition:transform .2s var(--ease),background .2s} .burger:hover{transform:scale(1.05)} .burger:active{transform:scale(.96)} .burger span{display:block;flex:0 0 auto;width:18px;height:2px;border-radius:1px;background:var(--text-primary);transition:transform .3s var(--ease-out),opacity .2s} @media(max-width:1080px){.hdr__nav,.hdr__cta{display:none}.burger{display:flex}} /* mobile menu */ .menu{position:fixed;inset:0;z-index:70;background:var(--surface-page);display:flex;flex-direction:column; justify-content:space-between;transform:translateY(-100%);transition:transform .5s var(--ease-out);visibility:hidden} .menu.is-open{transform:none;visibility:visible} .menu__top{padding-top:14px} .menu__bar{display:flex;align-items:center;justify-content:space-between;height:48px} .menu__close{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill); background:var(--surface-subtle);border:1px solid var(--border-default)} .menu__close svg{width:16px;height:16px} .menu__list{margin-top:12px} .menu__item{display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;padding-block:18px;border-bottom:1px solid var(--border-default); font-size:20px;font-weight:700;color:var(--text-primary);transition:color .2s,padding-left .25s var(--ease-out)} .menu__item:hover{padding-left:6px} .menu__item:active{background:var(--surface-subtle)} .menu__item.is-active{color:var(--text-accent)} .menu__item svg{width:15px;height:9px;flex:0 0 auto;color:var(--steel-400);transform:rotate(90deg);transition:transform .25s var(--ease-out),color .2s} .menu__item:hover svg{color:var(--text-accent);transform:rotate(90deg) translateY(-3px)} .menu__res{margin-top:28px} .menu__res h4{font-size:var(--t-label);font-weight:700;color:var(--text-muted);letter-spacing:.06em} .menu__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:16px} .menu__grid a{display:block;padding-block:8px;font-size:19px;line-height:1.3;color:var(--text-secondary);transition:color .2s} .menu__grid a:hover{color:var(--text-accent)} .menu__bottom{padding-block:24px 28px;display:grid;gap:20px} .menu__note{text-align:center;color:var(--text-tertiary);font-size:var(--t-body-sm)} .menu__util{display:flex;align-items:center;justify-content:space-between;gap:12px; border-top:1px solid var(--border-default);padding-top:20px;font-size:var(--t-label);color:var(--text-muted)} .menu__util .l{display:flex;gap:20px} .menu__status{display:flex;align-items:center;gap:6px} .menu__status i{width:8px;height:8px;border-radius:50%;background:var(--yellow-500);display:block} /* ============================================================ HERO Proportions locked to Figma: art band 1440x946, section 1440x1002 */ .hero{ --hero-h:clamp(620px, 75.90vw, 1500px); /* Pale blue page tint behind the hero video. On ultra-wide screens the video is `object-fit:contain` and leaves letterbox bars; `#EEF4FF` stops those bars reading as a crop (operator request 2026-10-06). */ position:relative;overflow:hidden;background:#EEF4FF; display:flex;flex-direction:column;justify-content:flex-end; min-height:var(--hero-h); } /* Soft left/right fades over the video edges so the join with the pale blue background has no hard line. Only drawn where the video is letterboxed (>=901px, where object-fit switches to contain). */ .hero::before, .hero::after{ content:"";position:absolute;top:0;bottom:0;width:clamp(80px,18vw,420px); pointer-events:none;z-index:1;display:none; } .hero::before{left:0;background:linear-gradient(270deg,rgba(232,239,253,0) 0%,#F1F6FF 100%)} .hero::after{right:0;background:linear-gradient(90deg,rgba(232,239,253,0) 0%,#F1F6FF 100%)} @media(min-width:901px){ .hero::before,.hero::after{display:block} } .hero__stage{position:absolute;top:0;left:0;right:0;height:calc(var(--hero-h) * .8664); pointer-events:none;overflow:hidden} .hero__media{ position:absolute;inset:0; } .hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center center} /* Kill every UA-drawn media control on the decorative hero + CTA clips. Without this, Chrome/Safari briefly paint a black overlay button (PiP / cast / remote-playback) above the video before autoplay grabs focus \002014 the "unclear black icon at the top" the operator reported. */ .hero__media video,.cta__bg video{pointer-events:none} .hero__media video::-webkit-media-controls, .hero__media video::-webkit-media-controls-panel, .hero__media video::-webkit-media-controls-enclosure, .hero__media video::-webkit-media-controls-overlay-play-button, .hero__media video::-internal-media-controls-overlay-cast-button, .cta__bg video::-webkit-media-controls, .cta__bg video::-webkit-media-controls-panel, .cta__bg video::-webkit-media-controls-enclosure, .cta__bg video::-webkit-media-controls-overlay-play-button, .cta__bg video::-internal-media-controls-overlay-cast-button{display:none!important;-webkit-appearance:none!important;appearance:none!important;opacity:0!important} .hero__glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(86% 78% at 50% 44%, rgba(255,255,255,0) 76%, rgba(255,255,255,.42) 94%, rgba(255,255,255,.9) 100%)} .hero__scrim{position:absolute;inset:auto 0 -1px;height:26%;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 38%,rgba(255,255,255,.72) 70%,rgba(255,255,255,.97) 90%,#fff 100%)} /* The supplied artwork already fades to white below the platform. Keep its glass edges and yellow rim intact instead of fading the image a second time. */ @media(min-width:901px){ .hero__glow,.hero__scrim{display:none} .hero__media video,.hero__media img{object-fit:contain;object-position:center top} /* The media box is sized to the clip itself (1920x1260) so its edges ARE the picture's edges, and the mask below dissolves exactly those. The bottom of the clip is pure white while the hero is #EEF4FF, so the lower band fades out under the platform instead of ending on a seam. */ .hero__media{ left:0;right:0;margin-inline:auto; width:min(100%, calc(var(--hero-h) * .8664 * 1.5238)); -webkit-mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,.5) 81%,transparent 88%); mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,.5) 81%,transparent 88%); } } /* Ultra-wide: --hero-h hits its 1500px cap here, the clip stops filling the width and its left/right edges show. Fade them into the page tint too (operator request 2026-10-06, "the join must not be noticeable"). */ @media(min-width:1977px){ .hero__media{ -webkit-mask-image: linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 10%,#000 20%,#000 80%,rgba(0,0,0,.5) 90%,transparent 100%), linear-gradient(180deg,#000 74%,rgba(0,0,0,.5) 81%,transparent 88%); -webkit-mask-composite:source-in; mask-image: linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 10%,#000 20%,#000 80%,rgba(0,0,0,.5) 90%,transparent 100%), linear-gradient(180deg,#000 74%,rgba(0,0,0,.5) 81%,transparent 88%); mask-composite:intersect; } } .hero__in{position:relative;z-index:2;width:100%;margin-bottom:calc(var(--hero-h) * .2443)} .hero__copy{max-width:394px;display:grid;gap:18px;justify-items:start} .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,315px);gap:clamp(24px,5vw,80px);align-items:end} .hero__aside{padding-bottom:calc(var(--control-lg) + 26px)} /* button height + column gap: lines the lead up with the bottom of the H1 */ .hero__aside .hero__note{display:grid;gap:14px;justify-items:start} .hero__icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%; background:#fff} .hero__icon svg{width:20px;height:20px;fill:none;stroke:#171717} .hero__proof{position:relative;z-index:2;padding-bottom:calc(var(--hero-h) * .0432)} /* --- guide arrows: drawn simultaneously, then pulses run along them ------- */ .hero__arrows{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible; width:100%;height:100%} .hero__arrows .arw-line{fill:none;stroke:#9DB0CF;stroke-width:2;stroke-dasharray:5 5; stroke-linecap:butt;stroke-linejoin:miter} .hero__arrows .arw-mask{fill:none;stroke:#fff;stroke-width:16;stroke-linecap:round;stroke-linejoin:round; stroke-dashoffset:var(--len);stroke-dasharray:var(--len); transition:stroke-dashoffset 1.05s cubic-bezier(.33,.8,.35,1) .15s} .hero__arrows .arw-dot{fill:#9DB0CF;opacity:0;transform:scale(.4);transform-origin:center; transition:opacity .5s ease .1s, transform .5s cubic-bezier(.2,1.5,.4,1) .1s} .hero__arrows .arw-head{fill:#9DB0CF;opacity:0;transition:opacity .45s ease var(--hdelay,1s)} .hero__arrows .arw-pulse{fill:none;stroke:#152641;stroke-width:2;stroke-linecap:round; opacity:0;animation:none} .hero.is-drawn .hero__arrows .arw-mask{stroke-dashoffset:0} .hero.is-drawn .hero__arrows .arw-dot{opacity:1;transform:scale(1)} .hero.is-drawn .hero__arrows .arw-head{opacity:1} .hero.is-drawn .hero__arrows .arw-pulse{ animation:arwPulse var(--pdur,2.8s) linear infinite; animation-delay:var(--pdelay,1.2s)} @keyframes arwPulse{ 0% {stroke-dashoffset:var(--o0);opacity:0} 4% {opacity:var(--op,1)} 56% {opacity:var(--op,1)} 62% {stroke-dashoffset:var(--o1);opacity:0} 100% {stroke-dashoffset:var(--o1);opacity:0} } @media(max-width:1080px){ .hero__arrows{display:none} } @media(prefers-reduced-motion:reduce){ .hero__arrows .arw-mask{transition:none;stroke-dashoffset:0} .hero__arrows .arw-dot{transition:none;opacity:1;transform:none} .hero__arrows .arw-head{transition:none;opacity:1} .hero__arrows .arw-pulse{display:none} } @media(max-width:900px){ .hero{--hero-h:auto;min-height:100svh;padding-top:96px} .hero__stage{height:78%} .hero__scrim{height:48%; background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.30) 26%,rgba(255,255,255,.78) 58%,rgba(255,255,255,.97) 84%,#fff 100%)} .hero__glow{background:radial-gradient(120% 62% at 50% 34%, rgba(255,255,255,0) 74%, rgba(255,255,255,.5) 96%, #fff 100%)} /* Figma mobile: centred headline (title case), supporting copy, full-width button */ .hero__grid{grid-template-columns:1fr;gap:20px;align-items:stretch;text-align:center} .hero__copy,.hero__aside{display:contents} .hero__copy .h1{order:1;max-width:none;text-transform:capitalize} .hero__aside .hero__note{order:2;gap:0;justify-items:stretch} .hero__copy .btn{order:3;display:flex;justify-content:space-between;width:100%;text-align:left} .hero__icon{display:none} .hero__in{margin-bottom:56px} .hero__proof{padding-bottom:clamp(24px,5vw,40px)} } /* --------- section connector arrow: same draw + pulse as the hero arrows --- */ .sec-arrow{position:absolute;height:12px;display:block;pointer-events:none;z-index:1;overflow:visible} .sec-arrow .sa-line{fill:none;stroke:#9DB0CF;stroke-width:2;stroke-dasharray:5 5;stroke-linecap:butt} .sec-arrow .sa-mask{fill:none;stroke:#fff;stroke-width:16;stroke-linecap:round; stroke-dasharray:var(--len);stroke-dashoffset:var(--len); transition:stroke-dashoffset .95s cubic-bezier(.33,.8,.35,1) .1s} .sec-arrow .sa-dot{fill:#9DB0CF;opacity:0;transform:scale(.4);transform-origin:center; transition:opacity .45s ease .05s, transform .45s cubic-bezier(.2,1.5,.4,1) .05s} .sec-arrow .sa-head{fill:#9DB0CF;opacity:0;transition:opacity .4s ease var(--hdelay,.85s)} .sec-arrow .sa-pulse{fill:none;stroke:#152641;stroke-width:2;stroke-linecap:round;opacity:0} .sec-arrow.is-in .sa-mask{stroke-dashoffset:0} .sec-arrow.is-in .sa-dot{opacity:1;transform:scale(1)} .sec-arrow.is-in .sa-head{opacity:1} .sec-arrow.is-in .sa-pulse{animation:arwPulse var(--pdur,2.6s) linear infinite;animation-delay:var(--pdelay,1.1s)} [data-rv="arrow"]{opacity:1;transform:none;filter:none;transition:none} @media(max-width:1080px){.sec-arrow{display:none}} @media(prefers-reduced-motion:reduce){ .sec-arrow .sa-mask{transition:none;stroke-dashoffset:0} .sec-arrow .sa-dot{transition:none;opacity:1;transform:none} .sec-arrow .sa-head{transition:none;opacity:1} .sec-arrow .sa-pulse{display:none} } /* ============================================================ MARQUEES */ .marquee{position:relative;overflow:hidden;padding-block:26px;margin-block:-26px} .marquee__track{display:flex;width:max-content;gap:var(--s-20);will-change:transform; animation:slide var(--dur,42s) linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} @keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} .stat{flex:0 0 auto;width:220px;padding:21px;border-radius:var(--r-sm); background:var(--surface-subtle);border:1px solid var(--border-default); transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s} .stat:hover{transform:translateY(-4px);box-shadow:var(--e-soft-blue);border-color:var(--blue-100)} .stat__label{font-size:var(--t-body-md);color:var(--text-secondary)} .stat__value{margin-top:17px;font-size:var(--t-stat-lg);font-weight:600;line-height:var(--lh-tight)} /* ============================================================ BACKGROUND GLOW */ .glow{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden} #positioning .glow{background: radial-gradient(18vw 23vw at 61.4% calc(100% - 0.4vw), rgba(254,238,205,.92) 0%, rgba(254,241,215,.5) 45%, rgba(254,241,215,0) 72%), radial-gradient(16vw 17vw at 45.8% calc(100% - 2.4vw), rgba(0,103,215,.14) 0%, rgba(0,103,215,.06) 46%, rgba(0,103,215,0) 72%)} .flow .glow{background: radial-gradient(18vw 23vw at 61.4% -0.4vw, rgba(254,238,205,.92) 0%, rgba(254,241,215,.5) 45%, rgba(254,241,215,0) 72%), radial-gradient(16vw 17vw at 45.8% -2.4vw, rgba(0,103,215,.14) 0%, rgba(0,103,215,.06) 46%, rgba(0,103,215,0) 72%)} /* ============================================================ POSITIONING */ #positioning{background:var(--blue-30)} #positioning .sec-head{grid-template-columns:minmax(0,489fr) minmax(0,440fr);gap:clamp(24px,15.2vw,219px)} @media(max-width:900px){#positioning .sec-head{grid-template-columns:1fr;gap:24px}} /* ============================================================ METRIC CARDS */ .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)} @media(max-width:900px){.grid-3{grid-template-columns:1fr}} .mcard{display:flex;align-items:center;min-height:140px;border-radius:var(--r-md);padding-right:28px;overflow:hidden; transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)} .mcard:hover{transform:translateY(-5px)} .mcard__v{flex:0 0 161px;display:grid;place-items:center;font-size:var(--t-stat-xl);font-weight:600;line-height:var(--lh-tight)} .mcard__c{font-size:var(--t-body-md)} .mcard--navy{background:var(--g-card-navy);box-shadow:var(--e-card-navy);color:var(--text-inverse)} .mcard--navy .mcard__c{color:var(--text-inverse-secondary)} .mcard--frost{background:var(--g-card-frost);border:1px solid var(--border-default);box-shadow:var(--e-card-neutral)} .mcard--frost .mcard__v{color:var(--text-accent)} .mcard--frost .mcard__c{color:var(--text-secondary)} .mcard--blue{background:var(--surface-accent);box-shadow:var(--e-card-blue);color:var(--text-inverse)} .mcard--blue .mcard__c{color:var(--text-inverse-secondary)} @media(max-width:520px){.mcard__v{flex-basis:120px}} /* ============================================================ PAYMENT FLOW */ .flow{position:relative;overflow:hidden; background:linear-gradient(180deg,var(--blue-30) 0%,var(--blue-30) 8%,var(--surface-page) 44%)} .flow__curve{position:absolute;left:0;right:0;top:-4px;z-index:1;pointer-events:none; /* Lift the complete SVG, including its markers, above the step numerals. */ transform:translateY(clamp(-88px,-6.1vw,-55px))} .flow__curve svg{width:100%;height:auto;overflow:visible} .flow__path{fill:none;stroke:var(--navy-900);stroke-width:5;stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 20px 12px rgba(55,52,169,.22)); stroke-dasharray:var(--len);stroke-dashoffset:var(--len); transition:stroke-dashoffset 2.2s var(--ease-out)} .flow.is-drawn .flow__path{stroke-dashoffset:0} .flow__dot{fill:var(--navy-900);stroke:#fff;stroke-width:11;opacity:0;transform-box:fill-box;transform-origin:center; transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);transform:scale(.2)} .flow.is-drawn .flow__dot{opacity:1;transform:scale(1)} .flow.is-drawn .flow__dot:nth-of-type(1){transition-delay:.85s} .flow.is-drawn .flow__dot:nth-of-type(2){transition-delay:1.4s} .flow.is-drawn .flow__dot:nth-of-type(3){transition-delay:1.95s} .flow__cols{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)} @media(max-width:900px){.flow__cols{grid-template-columns:1fr}.flow__curve{display:none}} .flow__col{position:relative;display:flex;flex-direction:column} .flow__col--1 .step-wrap{margin-top:clamp(28px,18vw,260px)} .step-wrap{position:relative} /* Anchor the whole numeral above the heading, with a consistent clear gap. */ .step__num{bottom:calc(100% + 16px)} .flow__col--2{padding-top:clamp(0px,26vw,376px)} .flow__col--3{padding-top:clamp(0px,18vw,258px)} @media(max-width:900px){.flow__col--2,.flow__col--3{padding-top:0}.flow__col--1 .step-wrap{margin-top:0}.flow__cols{gap:12px}.step-wrap{display:contents}} .step{position:relative;z-index:2;display:grid;gap:12px;justify-items:start} .step__head{display:contents} .step__badge{display:none} .step__num{position:absolute;right:0;z-index:0;font-size:clamp(90px,14.2vw,204px);font-weight:800;line-height:1;color:var(--blue-50);letter-spacing:-.04em;white-space:nowrap;overflow-wrap:normal;word-break:normal;pointer-events:none;user-select:none;font-family:'Manrope',sans-serif} @media(max-width:900px){ /* Figma mobile: card with a round step marker beside the heading */ .step{padding:20px;border-radius:var(--r-md);background:var(--g-card-frost);border:1px solid var(--border-default); justify-items:stretch} .step__num{display:none} .step__head{display:flex;align-items:center;gap:12px} .step__head .h3{flex:1 1 auto;font-size:17px;line-height:1.24} .step__badge{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%; background:var(--navy-900);color:#fff;font-family:'Manrope',sans-serif;font-size:12px;font-weight:700;line-height:1} .step .lead{font-size:15px;line-height:1.34} .step .tag,.step .link{align-self:start} } .flow__intro{display:grid;gap:14px;justify-items:start} @media(max-width:900px){.flow__intro{margin-bottom:8px}} /* ============================================================ LAYER CARDS */ .lcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:22px; min-height:397px;padding:31px 27px 28px;border-radius:var(--r-md);overflow:hidden; transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)} .lcard:hover{transform:translateY(-6px)} .lcard__cube{position:absolute;right:14px;top:22px;width:60px;height:69px;opacity:.95; transition:transform .5s var(--ease-out);pointer-events:none} .lcard:hover .lcard__cube{transform:translateY(-6px) rotate(-6deg)} .lcard__h{max-width:250px;position:relative;z-index:1} .lcard__b{position:relative;z-index:1;font-size:var(--t-body-md)} .lcard--navy{background:var(--g-card-navy);box-shadow:var(--e-card-navy);color:var(--text-inverse)} .lcard--navy .lcard__b{color:var(--text-inverse-secondary)} .lcard--frost{background:var(--g-card-frost);border:1px solid var(--border-default);box-shadow:var(--e-card-neutral)} .lcard--frost .lcard__b{color:var(--text-secondary)} .lcard--blue{background:var(--surface-accent);box-shadow:var(--e-card-blue);color:var(--text-inverse)} .lcard--blue .lcard__b{color:var(--text-inverse-secondary)} /* ============================================================ COVERAGE */ .cov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,566px);gap:clamp(28px,5vw,72px);align-items:center} @media(max-width:980px){.cov{grid-template-columns:1fr}} .dash{border-radius:var(--r-md);background:var(--surface-inverse);box-shadow:var(--e-card-navy);padding:16px 21px 32px} .dash__bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .dash__bar h3{padding-top:13px;color:var(--text-inverse)} .dash__dots{display:flex;gap:6px;align-items:center;padding-top:4px} .dash__dots i{width:13px;height:13px;border-radius:50%;display:block} .dash__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px} @media(max-width:560px){.dash__tiles{grid-template-columns:1fr}} .dtile{padding:25px 14px;border-radius:var(--r-md);transition:transform .3s var(--ease-out)} .dtile:hover{transform:translateY(-3px)} .dtile__v{font-size:var(--t-h3);font-weight:600;color:var(--text-inverse);line-height:var(--lh-tight)} .dtile__l{margin-top:3px;font-size:var(--t-body-md);color:var(--text-inverse-secondary)} .dtile--accent{background:var(--surface-accent);box-shadow:var(--e-card-blue)} .dtile--glass{background:var(--surface-glass);border:1px solid var(--border-inverse);backdrop-filter:blur(25px)} .logos{position:relative;left:50%;width:100vw;margin-left:-50vw} .logos.marquee{-webkit-mask-image:none;mask-image:none; padding-block:30px;margin-top:clamp(6px,1.6vw,22px);margin-bottom:-30px} .logos .marquee__track{padding-inline:10px} .logo-card{flex:0 0 auto;display:grid;place-items:center;width:214px;height:92px;border-radius:var(--r-sm); background:#fff;box-shadow:var(--e-soft-blue);transition:transform .3s var(--ease-out)} .logo-card:hover{transform:translateY(-4px)} .logo-card svg{width:137px;height:48px;max-width:100%} .logo-card img{max-width:137px;max-height:48px;width:auto;height:auto;object-fit:contain} @media(max-width:520px){.logo-card{width:164px;height:76px} .logo-card svg{width:104px;height:36px} .logo-card img{max-width:104px;max-height:36px}} /* ============================================================ USE CASES */ .grid-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)} @media(max-width:1000px){.grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.grid-cards{grid-template-columns:1fr}} .ucard{position:relative;display:grid;gap:22px;align-content:start;padding:110px 27px 32px; border-radius:var(--r-md);background:var(--g-card-frost);border:1px solid var(--border-default); transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s} .ucard:hover{transform:translateY(-6px);box-shadow:var(--e-card-neutral);border-color:var(--blue-100)} .ucard__tile{position:absolute;left:27px;top:19px;display:grid;place-items:center; width:var(--icon-tile);height:var(--icon-tile);border-radius:var(--r-md); background:var(--g-icon-blue);box-shadow:var(--e-card-blue); transition:transform .45s var(--ease-out)} .ucard:hover .ucard__tile{transform:translateY(-4px) scale(1.06)} .ucard__tile svg{width:24px;height:24px} .ucard__b{font-size:var(--t-body-md);color:var(--text-secondary)} @media(max-width:680px){.ucard{padding:90px 20px 24px}.ucard__tile{left:20px}} /* ============================================================ FAQ */ .faq{display:grid;grid-template-columns:minmax(0,487px) minmax(0,620px);gap:clamp(28px,5vw,64px);align-items:start;justify-content:space-between} @media(max-width:980px){.faq{grid-template-columns:1fr}} .acc{display:grid;gap:13px} .acc__item{border-radius:var(--r-md);background:var(--g-card-frost);border:1px solid var(--border-default); overflow:hidden;transition:border-color .3s var(--ease),box-shadow .35s var(--ease)} .acc__item:hover{border-color:var(--border-focus);box-shadow:var(--e-card-neutral)} .acc__item.is-open{border-color:var(--border-focus);box-shadow:var(--e-card-neutral)} .acc__btn{display:flex;align-items:center;gap:20px;width:100%;text-align:left;padding:24px 15px 24px 28px} .acc__q{flex:1;font-size:var(--t-h4);font-weight:600;line-height:var(--lh-tight);color:var(--text-primary)} .acc__t{flex:0 0 auto;display:grid;place-items:center;width:var(--accordion-toggle);height:var(--accordion-toggle); border-radius:8px;background:var(--surface-inverse);color:var(--text-inverse);transition:transform .35s var(--ease-out),background .25s} .acc__t svg{width:15px;height:9px;transform:rotate(180deg);transition:transform .35s var(--ease-out)} .acc__item.is-open .acc__t{background:var(--i-accent-bg)} .acc__item.is-open .acc__t svg{transform:rotate(0deg)} .acc__btn:hover .acc__t{transform:scale(1.06)} /* Collapsed only when scripting can open it again (`.js`, set by the layout). The toggle is a