*{box-sizing:border-box}
:root{
  --bg:#061628;
  --bg2:#0b223d;
  --card:#0f2744;
  --soft:#f4f8fd;
  --line:rgba(255,255,255,.12);
  --line-dark:#dbe7f4;
  --text:#14253c;
  --muted:#6b7d92;
  --white:#ffffff;
  --blue:#1894ff;
  --blue2:#2cc8ff;
  --blue3:#0b65ff;
  --accent:#ff4a67;
  --glow:0 16px 48px rgba(7,31,63,.16);
  --radius:28px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--text);
  background:#fff;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.container{width:min(1220px, calc(100% - 40px)); margin-inline:auto}
.page-bg{position:fixed; inset:0; z-index:-1; background:linear-gradient(180deg,#ffffff 0%, #f5f9ff 100%)}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(14,47,83,.08);
}
.nav{
  display:flex; align-items:center; gap:28px; min-height:78px;
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--blue2),var(--blue3));
  color:#fff; font-weight:900; font-size:24px;
  box-shadow:0 12px 32px rgba(24,148,255,.28)
}
.brand-copy{display:flex; flex-direction:column; line-height:1}
.brand-copy strong{font-weight:900; letter-spacing:.06em; color:#0b2b53; font-size:22px}
.brand-copy small{font-size:8px; letter-spacing:.18em; color:#6a7f95; font-weight:800; margin-top:4px}
.nav-menu{
  margin-left:auto; display:flex; align-items:center; gap:26px;
}
.nav-menu a{font-size:14px; font-weight:700; color:#36506f}
.nav-cta{margin-left:10px}
.nav-toggle{display:none; margin-left:auto; background:none; border:0; padding:8px}
.nav-toggle span{display:block; width:24px; height:2px; background:#18304f; margin:5px 0}

.section-pad{padding:92px 0}
.hero{position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(3,18,35,.84) 0%, rgba(3,18,35,.66) 33%, rgba(3,18,35,.26) 62%, rgba(3,18,35,.15) 100%),
    linear-gradient(180deg, rgba(4,19,36,.10) 0%, rgba(4,19,36,.35) 100%);
}
.hero-content{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .7fr; gap:36px; align-items:end;
}
.hero-copy{color:#fff; padding-top:60px}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.20em; font-weight:900; text-transform:uppercase;
  color:#8fe8ff; margin-bottom:16px;
}
.eyebrow::before{
  content:""; width:34px; height:3px; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#ff9b8c);
}
h1,h2{
  margin:0;
  font-family:Manrope,Inter,sans-serif;
  line-height:1.02; letter-spacing:-.04em;
}
.hero h1{font-size:clamp(44px,5.5vw,78px); max-width:760px}
.hero h1 span{color:#6edaff}
.hero-copy p{
  max-width:700px; margin:24px 0 32px;
  font-size:18px; color:rgba(255,255,255,.86)
}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.pill{
  padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:13px; font-weight:700;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 20px; border-radius:16px; border:1px solid transparent;
  font-weight:800; cursor:pointer; transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue3));
  box-shadow:0 16px 34px rgba(24,148,255,.32)
}
.btn-secondary{
  color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22)
}
.btn-large{padding:16px 26px}
.btn-block{width:100%}

.glass{
  background:rgba(10,31,57,.52);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(18px);
  box-shadow:var(--glow);
}
.hero-panel{
  color:#fff; padding:26px; border-radius:26px; max-width:420px; justify-self:end;
}
.hero-panel-head small{
  display:block; font-size:12px; letter-spacing:.18em; font-weight:900; color:#9ddfff;
  margin-bottom:8px;
}
.hero-panel-head strong{font-size:28px; line-height:1.1; display:block}
.hero-points{display:grid; gap:14px; margin:22px 0}
.hero-points div{display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:start}
.hero-points span{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:rgba(255,255,255,.10); color:#8ae6ff; font-size:18px; font-weight:900
}
.hero-points p{margin:0; color:rgba(255,255,255,.84); font-size:14px}

.floating-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:-44px; position:relative; z-index:2; margin-bottom:20px;
}
.floating-card{
  background:#fff; border:1px solid #e0ebf6; border-radius:24px; padding:24px;
  box-shadow:0 20px 40px rgba(14,51,90,.08);
}
.floating-card strong{display:block; font-size:22px; margin-bottom:8px}
.floating-card p{margin:0; color:var(--muted)}

.section-dark{
  background:
    radial-gradient(circle at 16% 8%, rgba(36,166,255,.10), transparent 26%),
    linear-gradient(180deg,#f8fbff 0%,#eef5fd 100%);
}
.two-col{
  display:grid; grid-template-columns:1.02fr .98fr; gap:34px; align-items:center;
}
.two-col.reverse{grid-template-columns:.98fr 1.02fr}
.visual-card{
  border-radius:30px; overflow:hidden; box-shadow:0 24px 60px rgba(10,46,88,.14);
}
.visual-card img{width:100%; height:100%; object-fit:cover}
.content-side h2{font-size:clamp(34px,4vw,56px)}
.content-side p{
  color:var(--muted); font-size:17px; margin:18px 0 26px; max-width:640px;
}
.service-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.service-chip{
  background:#fff; border:1px solid #e0ebf6; border-radius:20px; padding:18px;
  box-shadow:0 12px 30px rgba(14,51,90,.06)
}
.service-chip strong{display:block; font-size:18px; color:#0e2f5b; margin-bottom:4px}
.service-chip span{display:block; font-size:14px; color:var(--muted)}

.info-cards{display:grid; gap:14px}
.mini-card{
  background:#fff; border:1px solid #e0ebf6; border-radius:22px; padding:18px 20px;
  box-shadow:0 14px 34px rgba(14,51,90,.06)
}
.mini-card strong{display:block; font-size:28px; color:var(--blue3)}
.mini-card p{margin:6px 0 0; font-size:14px}

.section-soft{
  background:
    radial-gradient(circle at 82% 20%, rgba(0,189,255,.10), transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
}
.mission-layout{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:center;
}
.mission-copy h2{font-size:clamp(34px,4.2vw,58px)}
.tick-list{list-style:none; padding:0; margin:24px 0 28px; display:grid; gap:12px}
.tick-list li{
  position:relative; padding-left:30px; color:#31465d; font-weight:600;
}
.tick-list li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  color:var(--blue3); font-weight:900;
}
.mission-visual{
  border-radius:30px; overflow:hidden; box-shadow:0 24px 60px rgba(10,46,88,.14);
}
.mission-visual img{width:100%; height:100%; object-fit:cover}

.section-buy{
  background:
    radial-gradient(circle at 75% 12%, rgba(52,190,255,.14), transparent 28%),
    linear-gradient(180deg,#08192e 0%,#0b223d 100%);
  color:#fff;
}
.buy-layout{
  display:grid; grid-template-columns:1fr .88fr; gap:32px; align-items:center;
}
.buy-copy h2{font-size:clamp(34px,4vw,54px)}
.buy-copy p{color:rgba(255,255,255,.78); font-size:17px; margin:18px 0 28px}
.buy-steps{display:grid; gap:14px}
.buy-steps div{
  display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:center;
}
.buy-steps span{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  color:#6edaff; font-weight:900;
}
.buy-steps p{margin:0; color:#fff; font-weight:600}
.buy-card{
  border-radius:28px; padding:28px;
}
.buy-card-head strong{display:block; font-size:28px; color:#fff}
.buy-card-head small{display:block; margin-top:6px; color:#b8cee7}
.amount-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0 18px;
}
.amount{
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  color:#fff; padding:14px 10px; border-radius:14px; font-weight:800; cursor:pointer;
}
.amount.active{background:linear-gradient(135deg,var(--blue),var(--blue3)); border-color:transparent}
.buy-card label{display:block; font-size:12px; letter-spacing:.08em; font-weight:800; color:#b8cee7}
.input-wrap{
  display:flex; align-items:center; margin-top:8px; margin-bottom:18px;
  border-radius:16px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); padding:0 16px;
}
.input-wrap input{
  flex:1; padding:16px 0; color:#fff; background:transparent; border:0; outline:0;
}
.input-wrap input::placeholder{color:#b2c8df}
.input-wrap span{font-weight:900; color:#fff}
.summary{
  display:flex; justify-content:space-between; align-items:end;
  padding:14px 0 20px; border-top:1px solid rgba(255,255,255,.14);
  color:#dbe9f7;
}
.summary strong{font-size:30px; color:#fff}
.payment-row{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:16px; color:#d7e5f3; font-size:13px; font-weight:700;
}

.cta-banner{
  position:relative; min-height:78vh; display:flex; align-items:center; overflow:hidden;
}
.cta-banner > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cta-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,22,40,.88) 0%, rgba(6,22,40,.65) 40%, rgba(6,22,40,.18) 80%);
}
.cta-content{position:relative; z-index:2; color:#fff; max-width:800px}
.cta-content h2{font-size:clamp(38px,5vw,72px)}
.cta-content p{font-size:18px; color:rgba(255,255,255,.84); margin:18px 0 30px; max-width:680px}

footer{
  background:#061628; color:#d1dfec; padding:56px 0 18px;
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:26px;
}
.footer-grid p{max-width:360px; color:#91a7bd}
.footer-grid h4{margin:0 0 12px; color:#fff}
.footer-grid a{display:block; margin:7px 0; color:#afc1d3}
.footer-brand .brand-copy strong{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:28px; padding-top:16px; color:#7d95ac; font-size:13px;
}

.toast{
  position:fixed; right:22px; bottom:22px; z-index:100;
  max-width:340px; background:#091f38; color:#fff; padding:16px 18px;
  border-radius:18px; box-shadow:0 22px 50px rgba(0,0,0,.28);
  opacity:0; pointer-events:none; transform:translateY(12px); transition:.25s ease;
}
.toast.show{opacity:1; transform:translateY(0)}
.toast strong{display:block; margin-bottom:5px}
.toast span{font-size:13px; color:#c0d4e8}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1; transform:none}
.delay-1{transition-delay:.08s}
.delay-2{transition-delay:.16s}

@media (max-width:1100px){
  .nav-menu{display:none}
  .nav-toggle{display:block}
  .nav-cta{display:none}
  .nav-menu.open{
    display:flex; position:absolute; top:78px; left:0; right:0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid #e3edf8; box-shadow:0 18px 36px rgba(14,51,90,.08)
  }
  .nav-menu.open a{padding:16px 22px; border-top:1px solid #eef4fb}
  .hero-content,
  .two-col,
  .mission-layout,
  .buy-layout{grid-template-columns:1fr}
  .hero-panel{justify-self:start; max-width:460px}
  .floating-cards{grid-template-columns:1fr}
}
@media (max-width:760px){
  .container{width:min(100% - 28px, 1220px)}
  .nav{min-height:68px}
  .nav-menu.open{top:68px}
  .brand-copy strong{font-size:20px}
  .brand-copy small{display:none}
  .hero{min-height:auto}
  .section-pad{padding:72px 0}
  .hero-content{padding-top:42px; padding-bottom:48px}
  .hero h1{font-size:42px}
  .hero-copy p,.cta-content p{font-size:16px}
  .content-side h2,.mission-copy h2,.buy-copy h2{font-size:36px}
  .service-grid{grid-template-columns:1fr}
  .amount-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .hero-actions{flex-direction:column}
  .btn,.btn-large{width:100%}
  .pill-row{gap:8px}
  .pill{font-size:12px}
  .cta-overlay,.hero-overlay{
    background:linear-gradient(0deg, rgba(6,22,40,.92) 0%, rgba(6,22,40,.64) 48%, rgba(6,22,40,.22) 100%);
  }
  .footer-grid{grid-template-columns:1fr}
}


/* ---------- Payment simulation ---------- */
.buy-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.demo-badge,.simulation-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(122,224,255,.30);
  color:#8ee8ff;
  background:rgba(48,194,255,.10);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.11em;
  padding:8px 10px;
  border-radius:999px;
  white-space:nowrap;
}
.purchase-preview{
  gap:18px;
}
.purchase-preview > div{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.purchase-preview .summary-right{
  text-align:right;
}
.rate-note{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:10px;
  align-items:start;
  margin:-2px 0 18px;
  padding:12px 13px;
  border-radius:14px;
  background:rgba(82,197,255,.08);
  border:1px solid rgba(126,224,255,.14);
}
.rate-note > span{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#dff8ff;
  background:rgba(72,193,255,.18);
  font-weight:900;
}
.rate-note p{
  margin:0;
  font-size:11px;
  line-height:1.45;
  color:#c0d8ec;
}

.payment-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.payment-modal.open{display:flex}
.payment-backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,12,25,.78);
  backdrop-filter:blur(12px);
  animation:paymentFade .22s ease;
}
.payment-dialog{
  position:relative;
  z-index:1;
  width:min(980px,100%);
  max-height:min(92vh,820px);
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 34px 100px rgba(0,0,0,.45);
  animation:paymentPop .28s ease;
}
@keyframes paymentFade{from{opacity:0}to{opacity:1}}
@keyframes paymentPop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.payment-close{
  position:absolute;
  z-index:4;
  right:14px;
  top:14px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:rgba(7,26,48,.24);
  color:#fff;
  font-size:25px;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.payment-summary-panel{
  min-height:610px;
  padding:34px;
  color:#fff;
  background:
    radial-gradient(circle at 20% 10%,rgba(47,197,255,.18),transparent 32%),
    radial-gradient(circle at 80% 80%,rgba(35,94,255,.18),transparent 30%),
    linear-gradient(155deg,#07182e,#0b2a4d);
}
.payment-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}
.payment-brand > div{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.payment-brand strong{
  letter-spacing:.08em;
  font-size:19px;
}
.payment-brand small{
  margin-top:5px;
  color:#8eabc6;
  font-size:8px;
  font-weight:800;
  letter-spacing:.15em;
}
.order-product{
  margin:38px 0 24px;
}
.order-product small{
  display:block;
  color:#9eb9d1;
  font-size:13px;
  margin-bottom:6px;
}
.order-product strong{
  display:block;
  font-family:Manrope,Inter,sans-serif;
  font-size:42px;
  letter-spacing:-.04em;
}
.order-product > span{
  display:block;
  margin-top:4px;
  color:#75dcff;
  font-size:22px;
  font-weight:800;
}
.order-breakdown{
  display:grid;
  gap:10px;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.order-breakdown div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  font-size:13px;
}
.order-breakdown span{color:#9fb5ca}
.mission-choice{
  margin:22px 0;
}
.toggle-row{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:12px;
  align-items:start;
  cursor:pointer;
}
.toggle-row input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.toggle-ui{
  width:42px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.15);
  position:relative;
  transition:.2s;
  margin-top:2px;
}
.toggle-ui::after{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  transition:.2s;
}
.toggle-row input:checked + .toggle-ui{
  background:linear-gradient(135deg,#1aa6ff,#0c68ff);
}
.toggle-row input:checked + .toggle-ui::after{
  transform:translateX(18px);
}
.toggle-copy strong{
  display:block;
  font-size:13px;
}
.toggle-copy small{
  display:block;
  margin-top:4px;
  color:#91abc4;
  line-height:1.4;
}
.payment-security{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:9px;
  align-items:start;
  margin-top:24px;
  padding:13px;
  border-radius:15px;
  background:rgba(255,255,255,.06);
}
.payment-security > span{
  color:#67e4a7;
  font-weight:900;
}
.payment-security p{
  margin:0;
  color:#a9bfd3;
  font-size:11px;
  line-height:1.45;
}

.payment-form-panel{
  min-height:610px;
  overflow:auto;
  padding:38px 42px;
  background:#fff;
  color:#13253b;
}
.payment-form-head{
  padding-right:36px;
  margin-bottom:24px;
}
.step-label{
  display:inline-block;
  color:#157edc;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  margin-bottom:8px;
}
.payment-form-head h3,
.payment-success h3{
  margin:0;
  font-family:Manrope,Inter,sans-serif;
  font-size:30px;
  line-height:1.08;
}
.payment-form-head p,
.payment-success > p{
  margin:9px 0 0;
  color:#6e8092;
  font-size:13px;
  line-height:1.5;
}
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}
.field + .field{margin-top:15px}
.field label{
  color:#304861;
  font-size:12px;
  font-weight:800;
}
.field input{
  width:100%;
  height:48px;
  padding:0 14px;
  border:1px solid #dce6f0;
  border-radius:13px;
  outline:none;
  color:#12283f;
  background:#fbfdff;
  transition:.18s;
}
.field input:focus{
  border-color:#2d9eff;
  box-shadow:0 0 0 4px rgba(45,158,255,.10);
}
.field input.invalid{
  border-color:#ff5b6c;
  box-shadow:0 0 0 4px rgba(255,91,108,.08);
}
.field small{
  color:#8292a2;
  font-size:10px;
  margin-top:-1px;
}
.fake-card{
  margin-top:15px;
  padding:15px;
  border:1px solid #e4ebf3;
  border-radius:17px;
  background:#f8fbff;
}
.fake-card .field + .field{margin-top:0}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.consent-row{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:9px;
  align-items:start;
  margin:17px 0;
  color:#65778a;
  font-size:11px;
  line-height:1.45;
  cursor:pointer;
}
.consent-row input{
  margin:2px 0 0;
}
.payment-submit{
  display:flex;
  justify-content:space-between;
}
.payment-submit.loading{
  opacity:.75;
  pointer-events:none;
}
.payment-logos{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:15px;
  color:#8b99a8;
  font-size:10px;
  font-weight:800;
}
.payment-success{
  padding-top:38px;
  text-align:center;
}
.success-icon{
  width:76px;
  height:76px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,#2bc98b,#13a776);
  color:#fff;
  font-size:36px;
  font-weight:900;
  box-shadow:0 16px 38px rgba(25,180,125,.24);
}
.success-receipt{
  margin:24px 0;
  padding:16px 18px;
  border:1px solid #e3ebf4;
  border-radius:18px;
  background:#f8fbff;
  text-align:left;
}
.success-receipt div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:10px 0;
  border-bottom:1px solid #e6eef6;
  font-size:12px;
}
.success-receipt div:last-child{border-bottom:0}
.success-receipt span{color:#728296}
.success-receipt strong{
  max-width:62%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#17304b;
}
body.payment-open{overflow:hidden}

@media (max-width:820px){
  .payment-dialog{
    grid-template-columns:1fr;
    max-height:94vh;
    overflow:auto;
  }
  .payment-summary-panel{
    min-height:auto;
    padding:26px;
  }
  .order-product{
    margin:25px 0 18px;
  }
  .payment-form-panel{
    min-height:auto;
    overflow:visible;
    padding:30px 26px;
  }
  .payment-close{
    background:rgba(7,26,48,.7);
  }
}
@media (max-width:520px){
  .payment-modal{padding:8px}
  .payment-dialog{border-radius:22px}
  .payment-summary-panel{padding:22px 18px}
  .payment-form-panel{padding:26px 18px}
  .order-product strong{font-size:35px}
  .payment-form-head h3,.payment-success h3{font-size:26px}
  .field-row{grid-template-columns:1fr}
  .demo-badge{font-size:9px}
}