*{box-sizing:border-box} :root{color-scheme:dark;--bg:#101525;--panel:#171e2d;--muted:#8b96aa;--text:#f5f7fb;--line:#30394b;--cyan:#48d8ee;--purple:#8270f6} body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 18% 20%,#293654 0,transparent 38%),radial-gradient(ellipse at 85% 82%,#24234b 0,transparent 34%),var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;display:grid;place-items:center;padding:40px 22px;overflow-x:hidden}.page-shell{width:min(100%,1040px);position:relative}.ambient{position:absolute;border-radius:50%;filter:blur(70px);opacity:.14;pointer-events:none}.ambient-one{width:250px;height:250px;background:#4dd9ed;top:-90px;left:-80px}.ambient-two{width:280px;height:280px;background:#7867ff;right:-90px;bottom:-70px}.checkout{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:570px;border:1px solid #344056;border-radius:24px;overflow:hidden;background:rgba(21,28,43,.88);box-shadow:0 28px 90px #05081280;backdrop-filter:blur(20px)}.preview-panel{padding:38px 36px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#242e43,#1b2435 70%);border-right:1px solid #344056}.panel-topline,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#67dced}.panel-topline{display:flex;align-items:center;gap:9px;position:absolute;top:34px}.secure-dot,.pulse{width:7px;height:7px;background:#51d9c4;border-radius:50%;box-shadow:0 0 12px #51d9c4}.card-stage{perspective:1200px;display:grid;place-items:center;min-height:260px}.bank-card{width:min(100%,350px);aspect-ratio:1.586;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 22px 25px #05091670)}.bank-card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;overflow:hidden;padding:24px;background:linear-gradient(120deg,#244e83,#455bb0 55%,#7048a4);border:1px solid #ffffff30}.card-face:before{content:"";position:absolute;width:230px;height:230px;border-radius:50%;background:#ffffff0b;right:-65px;top:-100px}.card-front{display:flex;flex-direction:column;justify-content:space-between}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:flex-start;position:relative}.chip{width:38px;height:29px;border-radius:7px;background:linear-gradient(135deg,#f7df8c,#bd9a45);display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:5px}.chip i{border:1px solid #94742e66;border-radius:3px}.card-brand{font-weight:800;font-size:13px;letter-spacing:1.5px}.card-number{font-family:Manrope,sans-serif;font-weight:700;font-size:clamp(17px,2vw,21px);letter-spacing:2px;white-space:nowrap;position:relative}.card-bottom small,.signature-row span{display:block;font-size:7px;letter-spacing:1.2px;opacity:.75;margin-bottom:5px}.card-bottom strong{font-size:10px;letter-spacing:1px;text-transform:uppercase}.expiry-preview{text-align:right}.card-back{transform:rotateY(180deg);background:linear-gradient(135deg,#26344f,#192235)}.magnetic-strip{height:42px;background:#090e18;margin:12px -24px 26px}.signature-row{height:36px;background:#d8dce4;border-radius:4px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#1c2637}.signature-row span{margin:0;color:#566071}.signature-row strong{font-size:13px;color:#111827;letter-spacing:2px}.back-note{display:block;margin-top:20px;color:#9ba7bb;font-size:9px}.preview-caption{display:flex;align-items:center;justify-content:center;gap:9px;color:#aab5c7;font-size:11px;margin:8px 0 35px}.security-note{display:flex;align-items:center;gap:13px;padding:14px 16px;border:1px solid #ffffff12;border-radius:12px;background:#ffffff08}.lock-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#48d8ee18;color:#67dced;font-size:20px}.security-note b,.security-note small{display:block}.security-note b{font-size:11px;margin-bottom:4px}.security-note small{font-size:10px;color:#9aa6b8}.form-panel{padding:48px 44px 26px;display:flex;flex-direction:column}.form-heading{margin-bottom:30px}.form-heading h1{font-family:Manrope,sans-serif;font-size:30px;letter-spacing:-1.2px;margin:9px 0 6px}.form-heading p{font-size:12px;color:var(--muted);margin:0}.field{margin-bottom:19px;min-width:0}.field label{display:block;font-size:11px;font-weight:600;color:#c5ccda;margin-bottom:8px}.field input{width:100%;height:45px;border:1px solid #364154;border-radius:9px;background:#202939;color:#f5f7fb;padding:0 14px;font:500 13px "DM Sans",sans-serif;outline:none;transition:border .2s,box-shadow .2s}.field input::placeholder{color:#788499}.field input:focus{border-color:#55d5e9;box-shadow:0 0 0 3px #55d5e91a}.field input.invalid{border-color:#ff7585}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.error{display:block;color:#ff8b98;font-size:10px;min-height:13px;margin-top:5px}.pay-button,.reset-button{border:0;border-radius:10px;background:linear-gradient(100deg,#48d7e9,#7771f4);color:#111827;font:800 12px "DM Sans",sans-serif;height:48px;width:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 9px 22px #4c9be52a;transition:transform .2s,filter .2s}.pay-button:hover,.reset-button:hover{transform:translateY(-2px);filter:brightness(1.08)}.pay-button:active,.reset-button:active{transform:translateY(0)}.button-arrow{font-size:17px}.demo-disclaimer{text-align:center;font-size:9px;color:#778398;margin:11px 0 0}.form-footer{margin-top:auto;padding-top:25px;display:flex;justify-content:space-between;gap:8px;color:#758197;font-size:9px;border-top:1px solid #ffffff12}.success-state{text-align:center;margin:auto 0;padding:30px 0}.success-icon{width:58px;height:58px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;background:#3dd6a51c;border:1px solid #3dd6a566;color:#55e2b2;font-size:30px;box-shadow:0 0 35px #3dd6a522}.success-state h2{font:800 24px Manrope,sans-serif;margin:10px 0}.success-state p{font-size:12px;color:#9aa6b8;line-height:1.6;margin-bottom:24px}.reset-button{max-width:240px;margin:auto}.page-footer{text-align:center;color:#78849a;font-size:10px;margin-top:22px}.page-footer span{padding:0 7px;color:#4ed7e8}@media(max-width:760px){body{padding:22px 14px}.checkout{grid-template-columns:1fr}.preview-panel{padding:62px 24px 24px;border-right:0;border-bottom:1px solid #344056}.panel-topline{top:25px;left:25px}.card-stage{min-height:220px}.bank-card{max-width:330px}.preview-caption{margin:0 0 22px}.security-note{max-width:380px;width:100%;margin:auto}.form-panel{padding:32px 25px 22px}.form-heading h1{font-size:27px}.form-footer{margin-top:28px}}@media(max-width:380px){.field-row{gap:9px}.form-panel{padding-left:18px;padding-right:18px}.card-face{padding:18px}.card-number{font-size:15px;letter-spacing:1.2px}.card-bottom strong{font-size:8px}}