:root{
  --modal-accent:#ff4d6d;
  --modal-accent-2:#ffd84d;
  --modal-bg:#0d1630;
  --modal-panel:#101a38;
  --modal-text:#f6f7fb;
  --modal-muted:#b9c1d9;
  --modal-border:rgba(255,255,255,.11);
  --modal-shadow:0 30px 90px rgba(0,0,0,.55);
  --modal-radius:28px;
  --modal-font:Montserrat,Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--modal-font);min-height:100vh}
.csb-modal-overlay{
  position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 35%),
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--modal-accent) 30%, transparent), transparent 28%),
    rgba(5,8,18,.76);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  animation:csbFade .22s ease;
}
.csb-modal{
  position:relative;width:min(760px,100%);min-height:min(82vh,760px);padding:34px 30px 28px;color:var(--modal-text);
  border-radius:var(--modal-radius);border:1px solid var(--modal-border);box-shadow:var(--modal-shadow);overflow:hidden;
  background:
    radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--modal-accent) 34%, transparent), transparent 28%),
    radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--modal-accent-2) 22%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(16,26,56,.98) 0%, rgba(10,20,48,.98) 100%);
}
.csb-close{
  position:absolute;top:14px;right:14px;width:50px;height:50px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .16s ease, background .16s ease, border-color .16s ease;z-index:5;
}
.csb-close:hover{transform:scale(1.05);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}
.csb-close::before,.csb-close::after{
  content:"";position:absolute;width:20px;height:2.5px;border-radius:2px;background:#fff;
}
.csb-close::before{transform:rotate(45deg)}
.csb-close::after{transform:rotate(-45deg)}
.csb-badge{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:10px 18px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.09);color:#fff;font-size:13px;line-height:1;
  letter-spacing:.18em;font-weight:800;text-transform:uppercase;margin:28px auto 22px;
}
.csb-inner{max-width:620px;margin:0 auto;text-align:center;position:relative;z-index:2}
.csb-title{margin:0 0 16px;font-size:clamp(38px,7vw,72px);line-height:.96;font-weight:900;letter-spacing:-.03em}
.csb-title strong{
  display:block;background:linear-gradient(90deg,#ffd8f0 0%,#ff6e8e 35%,#ffa877 65%,#ffe36f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.csb-subtitle{
  margin:0 auto 28px;max-width:560px;color:var(--modal-muted);font-size:clamp(19px,2.4vw,25px);line-height:1.45;font-weight:600;
}
.csb-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 auto 28px}
.csb-feature{
  padding:14px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);
  font-size:15px;font-weight:700;color:#eef2ff;
}
.csb-cta-wrap{margin:12px 0 14px}
.csb-cta{
  display:inline-flex;align-items:center;justify-content:center;width:min(420px,100%);min-height:82px;padding:18px 26px;border-radius:20px;
  text-decoration:none;color:#fff;font-size:clamp(26px,4vw,36px);line-height:1;font-weight:900;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--modal-accent) 0%,var(--modal-accent-2) 100%);
  box-shadow:0 12px 30px color-mix(in srgb, var(--modal-accent) 30%, transparent),0 0 38px color-mix(in srgb, var(--modal-accent-2) 22%, transparent);
  transition:transform .16s ease, filter .16s ease;
}
.csb-cta:hover{transform:translateY(-1px) scale(1.01);filter:saturate(1.06)}
.csb-small{margin:0;color:#dce3fb;font-size:15px;line-height:1.5;font-weight:600}
.csb-small strong{color:#fff;font-weight:800}
.csb-note{margin:18px 0 0;color:rgba(255,255,255,.54);font-size:14px;line-height:1.4;font-weight:800;letter-spacing:.10em;text-transform:uppercase}
@keyframes csbFade{from{opacity:0}to{opacity:1}}
@media (max-width:760px){
  .csb-modal{min-height:calc(100vh - 16px);width:100%;border-radius:24px;padding:22px 18px 22px}
  .csb-close{top:10px;right:10px;width:46px;height:46px}
  .csb-badge{margin-top:34px;font-size:12px;letter-spacing:.14em}
  .csb-feature-grid{grid-template-columns:1fr;gap:10px}
  .csb-feature{padding:13px 12px;font-size:14px}
  .csb-cta{min-height:74px;border-radius:18px}
}
@media (prefers-reduced-motion:reduce){
  .csb-modal-overlay,.csb-close,.csb-cta{animation:none!important;transition:none!important}
}