:root{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#fff;font-synthesis:none;font-size:16px;--ink:#143448;--sky:#0584e1}*{box-sizing:border-box}body{margin:0;padding:14px;background:#f8fcff}button,a,input,select{font:inherit}button{cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c8ff6b;outline-offset:5px}a{color:inherit;text-decoration:none}.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;--scene-scale:1;--scene-width:1100px;--scene-height:350px;min-height:calc(100svh - 28px);height:auto;overflow:hidden;background:linear-gradient(180deg,#0374d0 0%,#0499ee 70%,#8cd2f5 100%);border-radius:22px}.sky,.sky-light{position:absolute;inset:0;z-index:-2;pointer-events:none}.sky-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}.sky-light{background:radial-gradient(ellipse at 50% -15%,#88d8ff33,transparent 64%),linear-gradient(180deg,#00327b1a,transparent 65%);z-index:-1}.header{position:relative;display:flex;align-items:center;justify-content:space-between;width:calc(100% - 88px);margin:26px auto 0;height:54px;flex-shrink:0}.brand{font-size:28px;letter-spacing:-1.5px;font-weight:650;display:flex;gap:5px;align-items:center}.brand svg{width:36px;height:36px}.brand>span{font-size:11px;align-self:flex-start;letter-spacing:0;margin-top:8px}.header nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:5px;border:1px solid #ffffff32;background:#e2f5ff15;box-shadow:inset 0 1px 1px #fff1;backdrop-filter:blur(16px);border-radius:30px;padding:5px}.header nav button{background:transparent;color:#f0faff;padding:10px 20px;font-size:14px;border-radius:22px;transition:background .2s}.header nav button:hover{background:#ffffff24}.nav-cta{display:flex;align-items:center;gap:20px;color:var(--ink);background:#f7fffa;padding:12px 16px 12px 20px;border-radius:25px;font-size:14px;font-weight:600}.nav-cta svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none}.intro{position:relative;text-align:center;padding:52px 24px 0;z-index:3}.eyebrow{display:flex;justify-content:center;gap:9px;align-items:center;font-size:11px;letter-spacing:1.8px;font-weight:550;color:#e8f6ff}.eyebrow-symbol{font-size:21px;line-height:1}h1{font-size:clamp(66px,7.2vw,104px);font-weight:450;line-height:.99;letter-spacing:-5.8px;margin:23px 0 20px}h1 span{color:#d9f2ff}.intro>p{font-size:17px;line-height:1.5;letter-spacing:-.2px;color:#e7f6ff;margin:0}.actions{display:flex;gap:12px;justify-content:center;margin-top:25px}.button{height:49px;border-radius:28px;display:inline-flex;align-items:center;justify-content:center;padding:0 23px;gap:14px;font-size:14px;font-weight:550;transition:transform .2s,box-shadow .2s,background .2s}.button:hover,.nav-cta:hover{transform:translateY(-2px)}.primary{color:white;background:#113d48;box-shadow:0 4px 12px #06457420}.primary svg{width:19px;height:19px;fill:#c9ff83}.secondary{color:white;background:#ffffff16;border:1px solid #ffffff4a;backdrop-filter:blur(10px)}.secondary:hover{background:#ffffff26}.play-icon{font-size:22px;line-height:1}.payment-stage{position:relative;width:100%;height:calc(var(--scene-height) * var(--scene-scale));margin:16px auto 0;flex-shrink:0}.payment-scene{position:absolute;width:var(--scene-width);height:var(--scene-height);left:50%;top:0;margin-left:calc(var(--scene-width) / -2);perspective:1300px;transform:scale(var(--scene-scale));transform-origin:center top}.orbit{position:absolute;inset:0;width:100%;height:100%;stroke:#fff;stroke-opacity:.36;stroke-width:1;stroke-dasharray:3 7;pointer-events:none}.payment-card{display:block;position:absolute;text-align:left;box-shadow:0 18px 45px -12px #065ba24d,0 2px 5px #0746730a;border:1px solid #fff9;transition:box-shadow .3s,scale .3s;color:#18354b;background:#fff;will-change:transform}.payment-card:hover{scale:1.035;box-shadow:0 24px 60px -12px #065ba27a}.received-card{width:246px;height:224px;left:110px;top:49px;border-radius:19px;padding:22px;transform:rotate(-12deg);z-index:2}.card-head{display:flex;align-items:center;justify-content:space-between}.icon-square{width:35px;height:35px;border-radius:10px;background:#edf8f3;color:#32786c;display:flex;align-items:center;justify-content:center}.icon-square svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.status{font-size:12px;display:flex;gap:5px;align-items:center;background:#edf8f3;color:#377761;padding:5px 8px;border-radius:20px}.status i{background:#74b498;width:4px;height:4px;border-radius:50%}.card-label{font-size:12px;color:#7c8992;margin:18px 0 5px}.received-amount{font-weight:500;font-size:33px;letter-spacing:-1.5px}.received-amount>span{color:#97a5ae}.card-separator{height:1px;background:#eef1f2;margin:15px 0 13px}.company{display:flex;gap:9px;align-items:center;font-size:12px;line-height:1.4}.company-icon{width:29px;height:29px;background:#e9eddf;display:grid;place-items:center;border-radius:8px;font-size:19px;font-weight:650}.company small{display:block;font-size:10px;color:#8d969e}.check{margin-left:auto;color:#68a38d}.transfer-card{width:310px;height:294px;left:calc(50% - 155px);top:23px;border-radius:21px;padding:19px 21px 15px;transform:rotate(-2deg);z-index:5;background:#fbfdff}.mini-brand{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:550}.mini-brand svg{height:24px;width:24px}.card-menu{color:#9dabb5;letter-spacing:2px;font-size:12px}.amount-block{margin-top:16px}.amount-block>span{display:block;font-size:12px;color:#7c8e9c;margin-bottom:5px}.amount-block>div{display:flex;justify-content:space-between;align-items:center;gap:7px}.amount-block strong{font-size:31px;letter-spacing:-1.4px;font-weight:500}.amount-block strong>span{color:#a1acb5}.currency-label{display:flex;align-items:center;gap:5px;font-size:12px;background:white;padding:7px 7px;border:1px solid #e8edef;border-radius:20px;font-weight:550}.flag{width:19px;height:19px;display:grid;place-items:center;border-radius:50%;font-size:17px;overflow:hidden}.eu-flag{background:#1546b4;color:#ffdd3a;font-size:15px}.chevron{color:#96a3b0}.transfer-divider{display:flex;gap:8px;align-items:center;font-size:9px;color:#96a4ae;margin-top:11px}.swap-icon{display:grid;place-items:center;width:21px;height:21px;border:1px solid #e4edf2;border-radius:50%;font-size:16px;color:#6b91a7}.destination{margin-top:8px}.card-cta{border-radius:10px;background:#e0f1ff;margin-top:19px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:500;color:#1668a8}.card-cta>span{font-size:18px;line-height:1}.balance-card{width:250px;height:227px;right:110px;top:48px;border-radius:19px;transform:rotate(11deg);background:#123e4a;color:#fff;padding:22px;z-index:2;border-color:#ffffff42}.balance-title{font-size:12px;color:#cee2e5}.balance-symbol{width:21px;height:21px;fill:#d7f3b7}.balance-amount{display:block;font-size:31px;font-weight:500;letter-spacing:-1.2px;margin-top:19px}.balance-amount>span{color:#769ba5}.balance-sub{font-size:11px;color:#99b8c0}.chart{position:absolute;left:18px;bottom:34px;width:213px;height:60px}.balance-bottom{position:absolute;bottom:17px;left:22px;right:22px;display:flex;gap:7px;align-items:center}.balance-bottom span{font-size:9px;padding:4px 7px;border:1px solid #ffffff21;border-radius:5px;color:#bfd6d8}.balance-bottom .balance-plus{margin-left:auto;font-size:15px;border:0;padding:0}.currency-token{position:absolute;display:grid;place-items:center;width:61px;height:61px;border-radius:50%;border:1px solid #fff6;box-shadow:inset 0 2px 4px #fff5,0 6px 25px #216cba22;font-size:29px;background:#d9f0ff38;backdrop-filter:blur(15px);color:#f1fbff}.euro{left:44px;top:16px;transform:rotate(-19deg)}.dollar{right:52px;bottom:26px;transform:rotate(17deg);width:53px;height:53px;font-size:24px}.mini-pill{position:absolute;right:120px;top:8px;display:flex;align-items:center;gap:9px;font-size:11px;background:#e7f7ff2b;border:1px solid #fff6;padding:9px 13px;border-radius:20px;transform:rotate(8deg);backdrop-filter:blur(12px)}.mini-pill span{color:#d9ffc1}.settled-pill{position:absolute;bottom:4px;left:152px;display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f6fffdc4;color:#426679;font-size:10px;backdrop-filter:blur(10px);border:1px solid #fff7;border-radius:20px;transform:rotate(-5deg)}.settled-pill>span{background:#e0f1e7;color:#5c9475;width:17px;height:17px;border-radius:50%;display:grid;place-items:center}.hero-bottom{position:relative;width:calc(100% - 88px);margin:auto auto 0;padding-top:32px;flex-shrink:0}.benefits{display:flex;justify-content:center;gap:32px;margin-bottom:35px;font-size:12px;color:#174969;text-shadow:0 1px 6px #ffffff70}.benefits>span{display:flex;gap:7px;align-items:center}.benefits svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.15}dialog{color:var(--ink);border:1px solid #fff9;border-radius:26px;padding:0;width:min(470px,calc(100% - 28px));max-height:calc(100svh - 32px);overflow:auto;background:#f9fcff;box-shadow:0 30px 100px #00255166}dialog::backdrop{background:#0436617a;backdrop-filter:blur(14px)}.dialog-shell{padding:32px;position:relative}.dialog-close{position:absolute;right:17px;top:15px;width:32px;height:32px;border-radius:50%;font-size:24px;background:#e9f1f7;color:#476578}.dialog-kicker{font-size:11px;letter-spacing:1.8px;color:#5d829b;text-transform:uppercase;margin:0 0 13px}.dialog-shell h2{font-size:32px;line-height:1.08;letter-spacing:-1.3px;font-weight:500;margin:0 0 12px}.dialog-description{font-size:14px;line-height:1.6;color:#6a8395}.dialog-shell .button{width:100%;margin-top:12px}.dialog-shell .secondary{color:#42657d;border-color:#cbdce8;background:transparent}.demo-note{font-size:12px;color:#718a9c;line-height:1.5;margin:18px 0 0;text-align:center}
@media(min-width:1500px) and (min-height:1001px){.intro{padding-top:65px}.payment-stage{margin-top:30px}}
@media(max-width:1100px){.received-card{left:6%}.balance-card{right:6%}.euro{left:2%}.dollar{right:2%}.mini-pill{right:8%}.settled-pill{left:8%}.hero{--scene-scale:.8}h1{font-size:88px}.payment-stage{margin-top:22px}.header{width:calc(100% - 52px)}.hero-bottom{width:calc(100% - 52px)}}
@media(max-width:800px){.header{width:calc(100% - 40px);margin-top:18px}.header nav{display:none}.intro{padding-top:42px}h1{font-size:78px;letter-spacing:-4.5px}.payment-stage{margin-top:22px}.hero{--scene-width:800px;--scene-scale:.8}.received-card{left:20px}.balance-card{right:20px}.euro,.dollar,.mini-pill,.settled-pill{display:none}.hero-bottom{padding-top:28px}.benefits{gap:20px;font-size:11px;margin-bottom:29px}}
@media(max-width:520px){body{padding:8px}.hero{border-radius:18px;--scene-height:450px;--scene-scale:.77;min-height:calc(100svh - 16px);height:auto}.header{width:calc(100% - 32px);margin-top:16px}.brand{font-size:26px}.nav-cta{padding:11px 14px;font-size:12px;gap:10px}.intro{padding:39px 14px 0}.eyebrow{font-size:8px;letter-spacing:1.05px;gap:6px}.eyebrow-symbol{font-size:17px}h1{font-size:clamp(53px,14.5vw,72px);letter-spacing:-3.5px;margin:22px 0 18px}.intro>p{font-size:14px;line-height:1.55}.actions{gap:8px;margin-top:23px}.button{font-size:12px;padding:0 16px;gap:8px;height:45px}.payment-stage{margin-top:28px}.transfer-card{top:0}.received-card{top:210px;left:150px;transform:rotate(-12deg);width:230px;height:210px;padding:19px}.balance-card{top:209px;right:148px;width:230px;height:211px;padding:19px;transform:rotate(11deg)}.card-label{margin-top:12px}.card-separator{margin:11px 0}.balance-amount{font-size:29px}.chart{width:190px;bottom:29px}.balance-bottom{bottom:12px}.orbit{top:150px}.hero-bottom{width:calc(100% - 34px);padding-top:30px}.benefits{gap:12px;flex-wrap:wrap;font-size:10px;margin-bottom:24px}.benefits svg{width:13px;height:13px}.benefits>span{gap:4px}.dialog-shell{padding:29px 22px}.dialog-shell h2{font-size:29px}}
/* Sky, depth, and motion */
.sky{animation:sky-drift 28s ease-in-out infinite alternate;transform-origin:center 30%}
.sky-light{background:radial-gradient(ellipse at var(--pointer-x,50%) var(--pointer-y,25%),#99e8ff24,transparent 55%),linear-gradient(180deg,#00387815,transparent 60%,#076bac40)}
.header{animation:enter .8s .08s both}.eyebrow{animation:enter .85s .15s both}h1{animation:enter .95s .23s both}.intro>p{animation:enter .95s .35s both}.actions{animation:enter .9s .45s both}.payment-scene{animation:scene-enter 1.3s .3s both}.received-card{animation:float-left 7s ease-in-out infinite}.transfer-card{animation:float-center 8s ease-in-out infinite}.balance-card{animation:float-right 7.5s ease-in-out infinite}.currency-token{animation:float-token 6.5s ease-in-out infinite}.dollar{animation-delay:-3s}.mini-pill{animation:float-right 9s ease-in-out infinite}.settled-pill{animation:float-left 8.5s ease-in-out infinite}.orbit{animation:orbit-flow 32s linear infinite}.hero-bottom{animation:enter 1s .65s both}.motion-paused *{animation-play-state:paused!important}
@keyframes enter{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}@keyframes scene-enter{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}@keyframes float-left{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -12px;rotate:2deg}}@keyframes float-center{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:1.5deg}}@keyframes float-right{0%,100%{translate:0 -6px;rotate:0deg}50%{translate:0 7px;rotate:-2deg}}@keyframes float-token{0%,100%{translate:0 0}50%{translate:0 -17px}}@keyframes sky-drift{from{transform:scale(1)}to{transform:scale(1.055) translate(0,5px)}}@keyframes orbit-flow{to{stroke-dashoffset:-240}}@keyframes success-pop{from{scale:.7;opacity:0}to{scale:1;opacity:1}}
.dialog-open{overflow:hidden}.mode-switch{display:flex;padding:4px;background:#e9f1f7;border-radius:12px;margin:24px 0 21px}.mode-switch button{width:50%;padding:10px;border-radius:9px;color:#71889a;background:transparent;font-size:14px}.mode-switch button[aria-pressed=true]{background:white;box-shadow:0 2px 5px #2849660d;color:#244559;font-weight:550}.field-label{font-size:13px;color:#597287;display:block;margin:15px 0 7px}.text-input{width:100%;height:46px;border:1px solid #dce7ee;border-radius:10px;background:#fff;padding:0 13px;color:#274a61;font-size:15px;outline-offset:2px}.form-amount{margin-top:17px;padding:1px 14px 13px;border:1px solid #dce7ee;background:white;border-radius:12px}.form-amount>.field-label{margin-top:12px}.form-amount>div{display:flex;align-items:center;gap:9px}.form-amount input{min-width:0;width:100%;font-size:28px;letter-spacing:-1px;border:0;outline-offset:0;color:#1a405b;background:transparent;-moz-appearance:textfield}.form-amount input::-webkit-inner-spin-button{appearance:none}.form-amount select{width:89px;border:0;border-radius:8px;background:#edf5fa;color:#3d6480;padding:8px 4px;font-size:14px}.field-hint{font-size:11px;color:#718a9c;margin:7px 0}.quote-result{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;background:#e9f4fb;padding:15px;border-radius:12px;margin:19px 0 7px;gap:10px}.quote-result>span{font-size:13px;color:#597b91}.quote-result output{font-size:23px;font-weight:500;letter-spacing:-.6px}.quote-result small{font-size:11px;color:#69879c;width:100%;border-top:1px solid #d5e6f1;padding-top:9px}.how-steps{list-style:none;padding:0;margin:24px 0}.how-steps li{display:flex;gap:15px;margin:21px 0;align-items:flex-start}.how-steps li>span{font-size:12px;display:grid;place-items:center;min-width:32px;height:32px;border-radius:50%;background:#e1f0fa;color:#477c9f}.how-steps strong{font-size:15px;font-weight:550}.how-steps p{font-size:13px;line-height:1.5;color:#728898;margin:4px 0 0}.review-amount{font-size:45px;letter-spacing:-2px;margin:24px 0;color:#19425d}.review-details{margin:20px 0 24px}.review-details>div{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #e4edf3;padding:13px 0;font-size:14px}.review-details dt{color:#718799}.review-details dd{margin:0;text-align:right;overflow-wrap:anywhere;max-width:65%}.demo-badge{color:#377469}.success-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#e0f3e9;color:#429576;font-size:30px;margin:8px 0 24px;animation:success-pop .4s}.success-note{border-radius:12px;background:#e8f3f5;color:#517684;font-size:13px;line-height:1.6;padding:14px 16px;margin:20px 0 15px}.text-button{display:block;background:transparent;color:#628199;font-size:13px;margin:20px auto 0}.dialog-description strong{font-weight:550;color:#2f556b}dialog[open]{animation:enter .25s ease-out}
/* The stage reserves the animated cards' full bounds; the benefits stay in flow. */
@media(min-width:801px) and (max-height:1000px){.hero{--scene-scale:.85}.intro{padding-top:25px}h1{font-size:84px;margin:20px 0 17px}.actions{margin-top:22px}.payment-stage{margin-top:8px}.hero-bottom{padding-top:40px}.benefits{margin-bottom:24px}}
@media(min-width:801px) and (max-height:850px){.hero{--scene-scale:.72}.header{margin-top:18px;height:44px}.intro{padding-top:18px}.eyebrow{min-height:18px}h1{font-size:68px;margin:14px 0 12px}.intro>p{font-size:14px}.actions{margin-top:16px}.actions .button{height:45px}.payment-stage{margin-top:12px}.hero-bottom{padding-top:40px}.benefits{margin-bottom:18px}}
@media(min-width:521px) and (max-width:650px){.hero{--scene-scale:.62}}
@media(max-width:360px){.hero{--scene-scale:.67}h1{font-size:48px;letter-spacing:-2.8px}}
@media(max-width:520px){.sky-image{object-position:50% bottom}.sky-light{background:linear-gradient(180deg,#035dc620,transparent 45%,#076bac55)}.field-label{font-size:14px}.form-amount input{font-size:27px}.dialog-shell .button{height:48px;font-size:14px}.demo-note{font-size:12px}.benefits{color:#194969;text-shadow:0 1px 4px #fff8}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.header,.intro>*,.payment-scene,.hero-bottom{opacity:1;translate:none}}
@media(forced-colors:active){button,.payment-card,.nav-cta,.form-amount{border:1px solid ButtonText}.sky,.sky-light{display:none}}
@media(max-width:520px){.received-card{left:200px;width:205px}.balance-card{right:200px;width:205px}.received-amount,.balance-amount{font-size:27px}.chart{width:167px}.balance-title{font-size:11px}.balance-symbol{width:18px;min-width:18px}.company{font-size:11px}.status{font-size:11px}}