*{box-sizing:border-box}
:root{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#10203b;
  background:#eaf3ff;
  font-synthesis:none;
}
body{
  min-width:320px;
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 5% 5%,rgba(24,139,255,.18),transparent 30%),
    radial-gradient(circle at 95% 90%,rgba(21,82,221,.13),transparent 34%),
    linear-gradient(135deg,#edf6ff 0%,#f8fbff 54%,#eef5ff 100%);
}
button,input{font:inherit}
button{touch-action:manipulation}
.ambient{
  position:fixed;
  border-radius:999px;
  filter:blur(80px);
  opacity:.35;
  pointer-events:none;
}
.ambient-one{width:320px;height:320px;background:#20a6ff;top:-130px;left:-90px}
.ambient-two{width:420px;height:420px;background:#4361ee;right:-180px;bottom:-230px}
.page{
  position:relative;
  z-index:1;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:34px;
}
.checkout-card{
  width:min(1120px,100%);
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  border:1px solid rgba(255,255,255,.65);
  border-radius:32px;
  overflow:hidden;
  background:rgba(255,255,255,.86);
  box-shadow:0 30px 90px rgba(13,45,94,.18);
  backdrop-filter:blur(22px);
}
.brand-panel{
  min-height:760px;
  padding:36px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#fff;
  background:
    linear-gradient(165deg,rgba(2,9,31,.96),rgba(4,39,100,.94)),
    radial-gradient(circle at 50% 38%,rgba(24,147,255,.5),transparent 42%);
  position:relative;
  isolation:isolate;
}
.brand-panel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.brand-lockup{display:flex;align-items:center;gap:12px}
.logo-mark{
  width:48px;height:48px;border-radius:15px;
  display:flex;align-items:flex-end;justify-content:center;gap:4px;
  padding:12px;background:linear-gradient(145deg,#1eb5ff,#176cea);
  box-shadow:0 12px 30px rgba(0,137,255,.35)
}
.logo-mark span{display:block;width:5px;border-radius:6px;background:#fff}
.logo-mark span:nth-child(1){height:9px;opacity:.7}
.logo-mark span:nth-child(2){height:16px;opacity:.85}
.logo-mark span:nth-child(3){height:24px}
.brand-name{margin:0;font-size:.88rem;letter-spacing:.18em;font-weight:800}
.brand-subtitle{margin:3px 0 0;color:#b8d9ff;font-size:.78rem}
.art-frame{
  position:relative;
  width:100%;
  max-width:430px;
  margin:26px auto;
}
.art-frame img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 65px rgba(0,0,0,.4)
}
.signal-badge{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  width:max-content;max-width:90%;
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;
  background:rgba(3,17,47,.78);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(12px);
  color:#dcecff;font-size:.78rem;font-weight:700
}
.signal-dot{
  width:8px;height:8px;border-radius:50%;background:#39e28c;
  box-shadow:0 0 0 5px rgba(57,226,140,.15)
}
.benefit-grid{display:grid;gap:10px}
.benefit-grid article{
  display:flex;align-items:center;gap:12px;padding:13px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;background:rgba(255,255,255,.07)
}
.benefit-icon{
  flex:0 0 36px;height:36px;border-radius:11px;
  display:grid;place-items:center;background:rgba(28,150,255,.22);
  color:#fff;font-weight:800
}
.benefit-grid strong,.benefit-grid small{display:block}
.benefit-grid strong{font-size:.84rem}
.benefit-grid small{margin-top:2px;color:#aecaed;font-size:.72rem}
.form-panel{padding:50px 54px 44px}
.eyebrow,.section-kicker{
  margin:0;color:#0a83ee;font-size:.72rem;font-weight:800;letter-spacing:.13em
}
h1{margin:10px 0 0;color:#071a3d;font-size:clamp(2rem,3.6vw,3.15rem);line-height:1.06;letter-spacing:-.045em}
.description{margin:18px 0 28px;color:#65758b;font-size:.94rem;line-height:1.7}
.description strong{color:#263c5f}
form{display:grid;gap:18px}
fieldset{margin:0;padding:0;border:0;display:grid;gap:15px}
legend{margin-bottom:15px;color:#213657;font-size:.9rem;font-weight:800}
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:13px}
label{display:grid;gap:7px;color:#263b5b;font-size:.82rem;font-weight:700}
label small{color:#7f8da1;font-size:.72rem;font-weight:500}
input{
  width:100%;min-height:48px;padding:12px 14px;
  border:1px solid #d8e3ef;border-radius:14px;
  outline:none;color:#10203b;background:#fafdff;
  transition:border-color .2s,box-shadow .2s,background .2s
}
input::placeholder{color:#a2afbf}
input:focus{
  border-color:#1189f5;background:#fff;
  box-shadow:0 0 0 4px rgba(17,137,245,.11)
}
.ticket-section{
  padding:18px;border:1px solid #dbe8f5;border-radius:20px;
  background:linear-gradient(145deg,#f9fcff,#f0f7ff)
}
.ticket-heading-row{display:flex;align-items:center;justify-content:space-between;gap:18px}
.ticket-heading-row h2{margin:5px 0 0;color:#12284a;font-size:1.14rem}
.stepper{
  flex:0 0 auto;display:grid;grid-template-columns:44px 48px 44px;
  align-items:center;overflow:hidden;border:1px solid #ccdcec;
  border-radius:999px;background:#fff;box-shadow:0 7px 20px rgba(29,79,135,.07)
}
.stepper button{
  height:42px;border:0;background:transparent;color:#0d72d3;
  font-size:1.35rem;font-weight:700;cursor:pointer
}
.stepper button:hover:not(:disabled){background:#edf7ff}
.stepper button:disabled{color:#bdc8d5;cursor:not-allowed}
.stepper output{text-align:center;color:#10284c;font-weight:800}
.receive-box{
  margin-top:15px;padding:13px 14px;display:flex;align-items:center;gap:11px;
  border-radius:14px;background:#fff;border:1px solid #e0eaf4
}
.receive-box .check{
  flex:0 0 26px;height:26px;display:grid;place-items:center;
  border-radius:50%;color:#fff;background:#16b66b;font-weight:800
}
.receive-box p{margin:0;color:#718096;font-size:.78rem}
.receive-box strong{display:block;margin-top:3px;color:#20395e;font-size:.84rem}
.price-card{
  overflow:hidden;border-radius:20px;background:#071a3d;color:#fff;
  box-shadow:0 16px 34px rgba(7,26,61,.15)
}
.price-line,.total-line{display:flex;align-items:center;justify-content:space-between;gap:16px}
.price-line{padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.1);color:#bed0e7;font-size:.77rem}
.price-line strong{color:#eef6ff;font-size:.78rem}
.total-line{padding:18px}
.total-line span,.total-line small{display:block}
.total-line span{color:#b8cae2;font-size:.78rem}
.total-line small{margin-top:4px;color:#7892b5;font-size:.64rem}
.total-line>strong{font-size:1.65rem;letter-spacing:-.03em}
.form-message{min-height:18px;margin:-3px 0;color:#c93535;text-align:center;font-size:.78rem;font-weight:700}
.pay-button{
  min-height:54px;display:flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:16px;color:#fff;
  background:linear-gradient(135deg,#087bea,#0aa8f4);
  box-shadow:0 14px 28px rgba(8,123,234,.24);
  font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s,opacity .2s
}
.pay-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 18px 33px rgba(8,123,234,.29)}
.pay-button:disabled{opacity:.65;cursor:wait}
.lock{font-size:.88rem}
.fulfilment-note{margin:-3px 18px 0;text-align:center;color:#77879b;font-size:.72rem;line-height:1.5}
@media(max-width:900px){
  .page{padding:0}
  .checkout-card{grid-template-columns:1fr;border-radius:0}
  .brand-panel{min-height:auto;padding:24px}
  .art-frame{max-width:370px;margin:24px auto}
  .benefit-grid{grid-template-columns:repeat(3,1fr)}
  .benefit-grid article{padding:11px;align-items:flex-start}
  .form-panel{padding:38px 24px 44px}
}
@media(max-width:620px){
  .brand-panel{padding:20px}
  .art-frame{max-width:300px}
  .benefit-grid{grid-template-columns:1fr}
  .brand-panel .benefit-grid article:nth-child(n+2){display:none}
  .form-panel{padding:32px 18px 38px}
  .two-column{grid-template-columns:1fr}
  .ticket-heading-row{align-items:flex-start}
  .price-line{align-items:flex-start;flex-direction:column;gap:5px}
}