:root{
  --c-ink:#111E47;
  --c-ink2:#103D94;
  --c-sky:#76D2FF;
  --c-bg:#F2F7FF;

  --glass: rgba(255,255,255,.76);
  --border: rgba(17, 30, 71, .10);

  --shadow: 0 18px 56px rgba(17, 30, 71, .16);
  --shadow2: 0 10px 26px rgba(17, 30, 71, .10);

  --radius: 22px;

  --primary: #4F86FF;
  --accent: #76D2FF;
  --dark:#111E47;

  --ease: cubic-bezier(.2,.9,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--c-ink);
  background: var(--c-bg);
  font-size:20px;
}

.bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(1100px 700px at 50% 22%, rgba(118,210,255,.28) 0%, rgba(118,210,255,0) 64%),
    radial-gradient(860px 620px at 16% 28%, rgba(16,61,148,.16) 0%, rgba(16,61,148,0) 62%),
    radial-gradient(900px 660px at 86% 34%, rgba(16,61,148,.14) 0%, rgba(16,61,148,0) 64%),
    radial-gradient(1200px 700px at 70% 92%, rgba(118,210,255,.18) 0%, rgba(118,210,255,0) 66%),
    linear-gradient(135deg, #F2F7FF 0%, rgba(118,210,255,.14) 48%, #F2F7FF 100%);
  z-index:-1;
}

.topbar{padding:22px 0}

.topbar-inner{
  max-width: 1120px;
  margin:0 auto;
  padding: 0 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}

.logo{
  width:52px;
  height:52px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  object-fit:contain;
}

.brand-name{
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.0;
  font-size:20px;
}

.brand-sub{
  font-size:15px;
  color: rgba(17, 30, 71, .62);
  margin-top:4px;
}

.page{
  max-width: 1120px;
  margin:0 auto;
  padding: 0 26px 56px;
}

.hero{padding: 8px 0 20px}

.h1{
  margin:0;
  font-size:52px;
  letter-spacing:-.04em;
  line-height:1.05;
}

.p{
  margin:12px 0 0;
  color: rgba(17, 30, 71, .66);
  font-size:20px;
  line-height:1.55;
  max-width: 820px;
}

.layout{
  display:grid;
  grid-template-columns: 1fr 440px;
  gap: 20px;
  align-items:start;
}

.card{
  background: var(--glass);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.card-left{padding: 28px}

.card-right{
  padding: 24px;
  position: sticky;
  top: 18px;
  overflow:hidden;
}

.card-right::before{
  content:"";
  position:absolute;
  inset:-90px -120px auto auto;
  width:380px;
  height:380px;
  border-radius:999px;
  background: radial-gradient(circle at 32% 32%, rgba(118,210,255,.46), rgba(16,61,148,0) 70%);
  opacity:.95;
}

.section-title{
  font-weight:900;
  letter-spacing:-.02em;
  font-size:20px;
  margin-bottom:16px;
}

.side-title{
  position:relative;
  z-index:1;
  font-weight:900;
  letter-spacing:-.02em;
  font-size:20px;
  margin-bottom:18px;
}

.segmented{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.segmented-item{
  position:relative;
  text-align:left;
  border:1px solid rgba(17,30,71,.12);
  background: rgba(255,255,255,.56);
  border-radius: 20px;
  padding: 20px;
  cursor:pointer;
  transform: translateZ(0);
  transition: transform .16s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}

.segmented-item:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.68);
}

.segmented-item.is-active{
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(118,210,255,.95);
  background: linear-gradient(135deg, rgba(118,210,255,.30), rgba(16,61,148,.10));
  box-shadow: 0 26px 60px rgba(16,61,148,.18);
  filter: saturate(1.05);
}

.segmented-item.is-active::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(118,210,255,.90), rgba(16,61,148,.40));
  opacity:.18;
  pointer-events:none;
}

.segmented-item.is-active::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 20px;
  background: radial-gradient(240px 140px at 24% 24%, rgba(255,255,255,.65), rgba(255,255,255,0) 65%);
  opacity:.55;
  pointer-events:none;
}

.seg-title{
  font-weight:900;
  letter-spacing:-.02em;
  font-size:20px;
}

.seg-sub{
  margin-top:6px;
  font-size:16px;
  color: rgba(17, 30, 71, .64);
}

.divider{
  height:1px;
  background: rgba(17,30,71,.12);
  margin: 22px 0;
}

.slider-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 16px;
}

.slider-caption{
  font-size: 17px;
  color: rgba(17, 30, 71, .66);
}

.pill{
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.60);
  border:1px solid rgba(17,30,71,.12);
  font-size: 17px;
  color: rgba(17, 30, 71, .86);
  box-shadow: 0 12px 26px rgba(17,30,71,.10);
}

.slider-shell{
  position:relative;
  padding: 34px 16px 28px;
  border-radius: 20px;
  border:1px solid rgba(17,30,71,.12);
  background: rgba(255,255,255,.50);
  overflow:hidden;
}

.slider{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  height: 70px;
  background: transparent;
  outline:none;
  position:relative;
  z-index:6;
}

.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 18px 44px rgba(16,61,148,.22);
  border: 5px solid rgba(255,255,255,.88);
  cursor:grab;
  transition: transform .12s var(--ease);
}

.slider:active::-webkit-slider-thumb{
  transform: scale(1.06);
  cursor:grabbing;
}

.slider::-moz-range-thumb{
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--primary);
  border: 5px solid rgba(255,255,255,.88);
  box-shadow: 0 18px 44px rgba(16,61,148,.22);
  cursor:grab;
}

.slider-track{
  position:absolute;
  left:24px;
  right:24px;
  top:50%;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(17,30,71,.10);
  z-index:1;
}

.slider-fill{
  position:absolute;
  left:24px;
  top:50%;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(16,61,148,.70), rgba(118,210,255,.94));
  z-index:2;
  width:0%;
  transition: width .10s linear;
}

.slider-stops{
  position:absolute;
  left:24px;
  right:24px;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  justify-content:space-between;
  z-index:3;
  pointer-events:none;
}

.stop{
  width: 18px;
  height: 18px;
  border-radius:999px;
  border:1px solid rgba(17,30,71,.20);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 18px rgba(17,30,71,.08);
  transition: background .20s var(--ease), border-color .20s var(--ease);
}

.stop.is-active{
  background: rgba(118,210,255,.74);
  border-color: rgba(118,210,255,.98);
}

.thumb-glow{
  position:absolute;
  width:240px;
  height:240px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(118,210,255,.40), rgba(118,210,255,0) 66%);
  filter: blur(2px);
  top:50%;
  transform: translate(-50%, -50%);
  z-index:0;
  opacity:.95;
  transition: left .06s linear;
  will-change: left;
  pointer-events:none;
}

.slider-hit{
  position:absolute;
  left:16px;
  right:16px;
  top:50%;
  height: 86px;
  transform: translateY(-50%);
  z-index:5;
  cursor:pointer;
  border-radius: 20px;
  background: rgba(0,0,0,0);
}

.slider-legend{
  display:flex;
  justify-content:space-between;
  margin-top: 16px;
  font-size: 17px;
  color: rgba(17, 30, 71, .64);
  padding: 0 2px;
}

.promo{position:relative; z-index:1}

.field-title{
  font-weight:900;
  letter-spacing:-.02em;
  font-size:18px;
  margin-bottom: 12px;
}

.promo-row{
  display:flex;
  gap: 12px;
  align-items:center;
}

.input{
  width:100%;
  border:1px solid rgba(17,30,71,.12);
  background: rgba(255,255,255,.68);
  border-radius: 18px;
  padding: 16px 16px;
  outline:none;
  color: rgba(17,30,71,.92);
  font-size: 18px;
}

.input:focus{
  border-color: rgba(118,210,255,.90);
  box-shadow: 0 0 0 6px rgba(118,210,255,.18);
}

.status{
  margin-top: 12px;
  min-height: 24px;
  font-size: 16px;
  color: rgba(17, 30, 71, .72);
}

.pricebox{
  position:relative;
  z-index:1;
  margin-top: 16px;
}

.line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top: 10px;
}

.line.big{margin-top: 12px}

.muted{
  color: rgba(17, 30, 71, .64);
  font-size: 17px;
}

.money-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.money{
  font-weight:900;
  letter-spacing:-.03em;
  font-size: 22px;
}

.money-xl{
  font-size: 48px;
  letter-spacing: -.04em;
}

.money-old{
  font-size: 16px;
  color: rgba(17, 30, 71, .55);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(17, 30, 71, .45);
}

.money-anim{
  display:inline-block;
}

.money-anim.is-swap{
  animation: moneySwap .35s var(--ease) both;
}

@keyframes moneySwap{
  from{opacity:.55}
  to{opacity:1}
}

.discount{
  margin-top: 12px;
  font-size: 16px;
  color: rgba(16,61,148,.95);
}

.hidden{display:none}

.pay-actions{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.small{
  position:relative;
  z-index:1;
  margin-top: 16px;
  font-size: 16px;
  color: rgba(17, 30, 71, .64);
  line-height:1.45;
}

.btn{
  border:0;
  border-radius: 20px;
  padding: 16px 16px;
  cursor:pointer;
  font-size: 17px;
  font-weight:900;
  transition: transform .10s var(--ease), filter .20s var(--ease), background .20s var(--ease);
  white-space:nowrap;
}

.btn:active{transform: scale(.99)}

.btn-ghost{
  background: rgba(255,255,255,.48);
  border:1px solid rgba(17,30,71,.12);
  color: rgba(17, 30, 71, .92);
  padding: 14px 16px;
}

.btn-soft{
  background: rgba(255,255,255,.60);
  border:1px solid rgba(17,30,71,.12);
  color: rgba(17, 30, 71, .92);
}

.btn-primary{
  background: linear-gradient(135deg, rgba(16,61,148,.96), rgba(118,210,255,.94));
  color: white;
  box-shadow: 0 18px 40px rgba(16,61,148,.20);
}

.btn-dark{
  background: rgba(17,30,71,.95);
  color:white;
  box-shadow: 0 18px 40px rgba(17,30,71,.18);
}

.btn-xl{
  padding: 18px 16px;
  font-size: 18px;
}

.footer{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: 18px;
  padding: 14px 4px;
}

@media (max-width: 1180px){
  .layout{grid-template-columns: 1fr}
  .card-right{position: static}
  .h1{font-size: 44px}
}

@media (max-width: 640px){
  body{font-size:18px}
  .page{padding: 0 18px 44px}
  .topbar-inner{padding: 0 18px}
  .segmented{grid-template-columns: 1fr}
  .promo-row{flex-direction:column; align-items:stretch}
}