:root { --blue:#778beb; --blue-deep:#6a78d1; --pink:#fc427b; --pink-soft:#ff5b90; --ink:#1c1c24; --ink-soft:#474755; --paper:#f6f6f8; --line:#e9e9ee; --muted:#7e7e8e; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#111; font-family:Poppins,Arial,sans-serif; }
body::before { content:""; position:fixed; z-index:-2; inset:0 0 auto; height:456px; background:radial-gradient(circle at 88% -24%,rgba(252,66,123,.3),transparent 38%),linear-gradient(135deg,#111,#1b1920); border-radius:0 0 22% 22% / 0 0 11% 11%; }
body::after { content:""; position:fixed; z-index:-1; width:440px; height:440px; border:76px solid rgba(252,66,123,.10); border-radius:50%; right:-145px; top:-215px; }
.shell { width:min(100% - 40px, 1050px); margin:auto; }
.topbar { height:92px; display:flex; justify-content:space-between; align-items:center; color:white; }
.brand { display:inline-flex; align-items:center; text-decoration:none; }.brand img{display:block;width:174px;max-width:42vw;height:auto}.secure-label { color:#f4f4f4; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:99px; padding:7px 11px; font:500 11px Poppins,sans-serif; letter-spacing:.01em; }.lock{color:var(--pink);font-size:15px;margin-right:4px}
.hero { color:white; padding:43px 0 88px; }.eyebrow,.step,.result-label { font:600 10px Poppins,sans-serif; letter-spacing:.13em; }.eyebrow{color:#dedee3;display:flex;gap:9px;align-items:center}.eyebrow span,.result-label span{width:7px;height:7px;background:var(--pink);box-shadow:0 0 0 4px rgba(252,66,123,.18);border-radius:50%;display:inline-block}
h1 { margin:21px 0 16px; max-width:620px; font-size:clamp(43px,7vw,76px); line-height:.97; letter-spacing:-.07em; } h1 em{font-family:Poppins,Arial,sans-serif;font-style:normal;font-weight:300;color:var(--pink);letter-spacing:-.08em} .hero p { color:#d2d2d7; margin:0; font-size:16px; }
.payment-card { width:min(100%,615px); background:var(--white); margin:-13px auto 32px; border:1px solid rgba(255,255,255,.8); border-radius:16px; padding:37px; box-shadow:0 26px 62px rgba(0,0,0,.27); position:relative; overflow:hidden; }.payment-card::before{content:"";position:absolute;right:-37px;bottom:-55px;width:155px;height:155px;border-radius:50%;background:radial-gradient(circle,rgba(252,66,123,.12),rgba(252,66,123,0) 70%);pointer-events:none}.card-heading{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:28px}.step{color:var(--pink);margin:0 0 8px}.card-heading h2{margin:0;font-size:25px;letter-spacing:-1.2px}.card-orbit{height:50px;width:50px;border:1px solid #f2d6df;border-radius:50%;position:relative;background:#fff8fa}.card-orbit:before{content:"";height:26px;width:26px;background:rgba(252,66,123,.12);border-radius:50%;position:absolute;left:11px;top:11px}.card-orbit:after{content:"";width:9px;height:9px;background:var(--pink);box-shadow:0 0 0 4px #fff;border-radius:50%;position:absolute;top:6px;right:3px}
form { display:grid; gap:9px; } label { font-size:13px;font-weight:600;margin-top:4px;color:var(--ink-soft); } input{width:100%;height:54px;border:1px solid #ddddE5;border-radius:8px;padding:0 15px;font:500 16px Poppins,sans-serif;color:var(--ink);background:#fcfcfd;outline:none;transition:border .2s,box-shadow .2s,background .2s} input:focus{border-color:var(--pink);background:white;box-shadow:0 0 0 4px rgba(252,66,123,.13)}input::placeholder{color:#aeaebb}.form-message{min-height:18px;margin:0;color:#c33360;font-size:12px;font-weight:600}
button{font:600 14px Poppins,sans-serif;cursor:pointer}button:disabled{opacity:.7;cursor:wait}.primary-button,.pay-button{height:56px;border:0;border-radius:9px;background:var(--pink);box-shadow:0 10px 19px rgba(252,66,123,.24);color:#fff;margin-top:2px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;transition:transform .2s,box-shadow .2s,background .2s}.primary-button:hover,.pay-button:hover{background:var(--pink-soft);box-shadow:0 13px 23px rgba(252,66,123,.31);transform:translateY(-1px)}.primary-button b,.pay-button b{font-size:22px;font-weight:400}.primary-button:focus-visible,.pay-button:focus-visible{outline:3px solid rgba(119,139,235,.55);outline-offset:3px}
.invoice-result{animation:rise .35s ease-out}.result-label{color:var(--pink);margin:0 0 25px}.invoice-main{display:flex;justify-content:space-between;gap:18px;padding:0 0 24px;border-bottom:1px solid var(--line)}small{display:block;color:var(--muted);font:500 10px Poppins,sans-serif;letter-spacing:.08em;margin-bottom:7px}strong{font-size:19px;letter-spacing:-.7px}.amount{text-align:right}.amount strong{font-size:27px;color:var(--pink);white-space:nowrap}.invoice-details{margin:0;padding:20px 0;display:grid;gap:14px}.invoice-details div{display:flex;justify-content:space-between;gap:15px;font-size:13px}.invoice-details dt{color:var(--muted)}.invoice-details dt small{display:inline;margin:0 0 0 5px;font-size:8px}.invoice-details dd{margin:0;text-align:right;font-weight:600}.pay-button{width:100%;margin-top:4px}.text-button{background:none;border:0;color:var(--blue-deep);text-decoration:underline;width:100%;padding:18px 0 0;font-size:12px}
footer{border-top:1px solid rgba(255,255,255,.11);padding:19px 0 32px;display:flex;justify-content:space-between;color:#85858d;font:400 11px Poppins,sans-serif}footer strong{font:500 11px Poppins,sans-serif;color:#e4e4e9}@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:600px){.shell{width:min(100% - 28px,1050px)}body::before{height:395px;border-radius:0 0 16% 16% / 0 0 5% 5%}body::after{width:310px;height:310px;right:-155px;top:-160px}.topbar{height:76px}.secure-label{font-size:10px;padding:6px 8px}.hero{padding:40px 0 65px}.hero p{font-size:14px}.payment-card{padding:25px 20px;margin-top:-5px;border-radius:15px}.card-heading{padding-bottom:20px;margin-bottom:22px}.card-heading h2{font-size:22px}.invoice-main{display:block}.amount{text-align:left;margin-top:18px}.invoice-details div{display:block}.invoice-details dd{text-align:left;margin-top:4px}footer{gap:10px;font-size:9px}}