:root{
  --jamit-blue:#006EFE;
  --jamit-blue-2:#00A7F7;
  --jamit-blue-soft:#EAF4FF;
  --jamit-ink:#202936;
  --jamit-ink-2:#2B3442;
  --jamit-muted:#6F7C91;
  --jamit-line:#DCE8F5;
  --jamit-bg:#F3F6FB;
  --jamit-card:#FFFFFF;
  --jamit-shadow:0 30px 100px rgba(0,78,178,.22);
  --jamit-premium:#C9D7E8;
}


.demo-page{
  min-height:100vh;
  padding:40px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.demo-center{
  width:min(1100px,100%);
  padding:42px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,250,255,.82));
  box-shadow:0 24px 70px rgba(31,46,80,.10);
  backdrop-filter:blur(12px);
}
.demo-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.demo-logo img{height:42px;width:auto;display:block}
.demo-btn{
  border:0;
  border-radius:16px;
  padding:15px 22px;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#006EFE 0%,#008AFB 55%,#00A7F7 100%);
  box-shadow:0 14px 34px rgba(0,110,254,.24);
}
.demo-copy{
  margin-top:28px;
  max-width:760px;
}
.demo-copy h1{
  margin:0 0 16px;
  font-size:clamp(44px,6vw,78px);
  line-height:.95;
  letter-spacing:-.05em;
}
.demo-copy p{
  margin:0;
  color:var(--jamit-muted);
  font-size:19px;
  line-height:1.55;
}

.popup-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,55,128,.42);
  backdrop-filter:blur(10px);
}
.popup-backdrop.is-open{display:flex}

.popup{
  position:relative;
  width:min(980px,100%);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  overflow-x:hidden;
  border-radius:32px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.98));
  box-shadow:var(--jamit-shadow);
  border:1px solid rgba(190,220,255,.72);
  background-clip:padding-box;
}

.close-btn{
  position:absolute;
  right:22px;
  top:22px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid #d9e3ee;
  background:rgba(255,255,255,.92);
  cursor:pointer;
  font-size:26px;
  line-height:1;
  color:#33415b;
  z-index:2;
  box-shadow:0 10px 24px rgba(19,33,58,.08);
}

.popup-inner{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  min-height:650px;
}

.popup-side{
  position:relative;
  overflow:hidden;
  padding:34px 28px 30px;
  background:
    radial-gradient(circle at 12% 15%, rgba(101,211,255,.34), transparent 29%),
    radial-gradient(circle at 92% 12%, rgba(255,255,255,.18), transparent 24%),
    linear-gradient(155deg,#006EFE 0%, #087DF9 48%, #00A7F7 100%);
  color:#fff;
  border-right:1px solid rgba(255,255,255,.18);
}
.popup-side:before{
  content:"";
  position:absolute;
  inset:auto -80px -100px auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(120,224,255,.52), rgba(120,224,255,0) 70%);
  pointer-events:none;
}
.popup-side:after{
  content:"";
  position:absolute;
  right:-48px;
  top:150px;
  width:122px;
  height:122px;
  border-radius:28px;
  transform:rotate(38deg);
  background:linear-gradient(145deg,rgba(8,63,231,.42),rgba(60,208,255,.34));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    -92px 168px 0 -25px rgba(1,91,237,.28),
    -10px 220px 0 -38px rgba(89,214,255,.30);
  pointer-events:none;
}
.popup-brand{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:34px;
}
.popup-brand-logo{
  display:inline-flex;
  align-items:center;
  padding:9px 12px;
  border-radius:17px;
  background:#ffffff;
  border:1px solid rgba(255,255,255,.70);
  box-shadow:0 12px 28px rgba(0,63,160,.16);
}
.popup-brand-logo img{display:block;height:32px;width:auto}
.premium-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  color:#ffffff;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.20);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.premium-chip .dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,#D6F7FF,#69D9FF);
  box-shadow:0 0 0 5px rgba(255,255,255,.13);
}

.side-copy{
  position:relative;
  z-index:1;
  margin-bottom:28px;
}
.side-copy h3{
  margin:0 0 12px;
  font-size:36px;
  line-height:1;
  letter-spacing:-.04em;
}
.side-copy p{
  margin:0;
  font-size:15px;
  line-height:1.62;
  color:rgba(255,255,255,.82);
}

.side-badges{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:26px;
}
.side-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:12px;
  font-weight:600;
}
.side-badge .badge-mark{
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.18);
  color:#ffffff;
  font-size:11px;
  font-weight:800;
}

.benefits{position:relative;z-index:1;display:grid;gap:14px}
.benefit{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:20px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 12px 28px rgba(0,68,172,.10), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
}
.benefit-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.24);
}
.benefit strong{
  display:block;
  margin-bottom:5px;
  font-size:16px;
  line-height:1.25;
}
.benefit span{
  display:block;
  font-size:13px;
  line-height:1.42;
  color:rgba(255,255,255,.80);
}

.popup-main{
  padding:38px 38px 34px;
}
.main-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  padding-right:58px;
}
.main-logo-box{
  display:flex;
  align-items:center;
  gap:14px;
}
.main-logo-box img{display:block;height:34px;width:auto}
.main-signature{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid #D4E7FB;
  background:linear-gradient(180deg,#fff,#F2F8FF);
  color:#32608C;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(180deg,#EEF7FF,#E7F3FF);
  border:1px solid #D2E9FF;
  color:#0063D8;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.eyebrow .pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg,#006EFE 0%,#008AFB 55%,#00A7F7 100%);
}
.popup h2{
  margin:0 0 16px;
  font-size:clamp(34px,4.2vw,52px);
  line-height:1.02;
  letter-spacing:-.05em;
}
.popup-copy{
  margin:0 0 12px;
  font-size:16px;
  line-height:1.62;
  color:#4b5a73;
}
.popup-copy strong{color:#1e2b42}

.inset-panel{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin:24px 0 18px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:0;
  box-shadow:
    inset 0 0 0 1px rgba(114,184,255,.20),
    0 14px 30px rgba(29,50,89,.06);
}
.inset-panel:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(234,244,255,.45),rgba(255,255,255,0));
}
.inset-title{
  margin:0 0 12px;
  font-size:15px;
  font-weight:800;
  color:#27344b;
}
.check-list{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
.check-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#44516a;
  font-size:14px;
  line-height:1.45;
}
.check-list li:before{
  content:"✓";
  flex:0 0 20px;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-top:1px;
  background:linear-gradient(135deg,#006EFE 0%,#008AFB 55%,#00A7F7 100%);
  color:#fff;
  font-size:11px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(0,110,254,.22);
}

.form-shell{
  padding:18px;
  border-radius:24px;
  background:linear-gradient(180deg,#ffffff, #f8fbff);
  border:1px solid var(--jamit-line);
  box-shadow:0 16px 36px rgba(21,34,56,.06);
}
.form-grid{display:grid;gap:12px}
.field{display:grid;gap:7px}
.field label{
  font-size:12px;
  font-weight:800;
  color:#34425b;
  letter-spacing:.02em;
}
.field input,
.field textarea,
.field select{
  width:100%;
  border:1px solid #dbe3ee;
  background:#fff;
  border-radius:16px;
  padding:15px 16px;
  color:var(--jamit-ink);
  outline:none;
  transition:.18s;
}
.field input[type="checkbox"],
.field input[type="radio"]{
  width:auto;
  padding:0;
}
.field input:focus{
  border-color:#72B8FF;
  box-shadow:0 0 0 4px rgba(0,110,254,.09);
}
.submit-btn{
  width:100%;
  min-height:56px;
  border:0;
  border-radius:16px;
  margin-top:4px;
  background:linear-gradient(135deg,#006EFE 0%,#008AFB 55%,#00A7F7 100%);
  color:#fff;
  font-weight:900;
  font-size:17px;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(0,110,254,.25);
  transition:.2s;
}
.submit-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 20px 42px rgba(0,110,254,.32);
}
.submit-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.consent{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:10px;
  align-items:flex-start;
  margin-top:14px;
  font-size:11px;
  line-height:1.45;
  color:#6f7a8e;
}
.consent input{
  appearance:none;
  width:18px;
  height:18px;
  border:1.5px solid #b9c4d4;
  border-radius:5px;
  margin:1px 0 0;
  background:#fff;
  cursor:pointer;
  position:relative;
}
.consent input:checked{
  background:linear-gradient(135deg,#006EFE 0%,#008AFB 55%,#00A7F7 100%);
  border-color:#006EFE;
}
.consent input:checked:after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.bottom-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg,#f8fbff,#f3f8fd);
  box-shadow:inset 0 0 0 1px rgba(114,184,255,.12);
  color:#596a84;
  font-size:12px;
  font-weight:600;
}
.bottom-note .shield{
  width:20px;
  height:20px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background:#fff;
  border:1px solid #d8e2ee;
  color:#006EFE;
  font-size:11px;
  box-shadow:0 6px 12px rgba(18,33,56,.06);
}

@media(max-width:920px){
  .popup{width:min(690px,100%);border-radius:28px}
  .popup-inner{grid-template-columns:1fr}
  .popup-side{padding-bottom:24px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .popup-main{padding:28px 24px 24px}
  .popup h2{font-size:38px}
  .side-copy h3{font-size:32px}
}
@media(max-width:560px){
  .demo-center{padding:24px;border-radius:24px}
  .demo-copy h1{font-size:42px}
  .demo-copy p{font-size:16px}
  .popup-backdrop{padding:10px;align-items:flex-end}
  .popup{max-height:95vh;border-radius:24px 24px 0 0}
  .close-btn{right:14px;top:14px}
  .popup-side{padding:22px 18px 18px}
  .popup-brand{display:block}
  .popup-brand-logo{margin-bottom:12px;width:max-content}
  .popup-brand-logo img{height:28px}
  .side-copy h3{font-size:28px}
  .popup-main{padding:24px 16px 18px}
  .main-top{display:block;padding-right:46px}
  .main-logo-box{margin-bottom:12px}
  .main-logo-box img{height:28px}
  .main-signature{display:inline-flex}
  .popup h2{font-size:31px}
  .popup-copy{font-size:14px}
  .form-shell{padding:14px}
  .consent{font-size:10px}
}

/* === JAMIT compact one-screen layout === */
.popup{
  max-height:none;
  overflow:hidden;
}
.popup-inner{
  min-height:0;
}
.popup-side{
  padding:26px 24px 24px;
}
.popup-brand{
  margin-bottom:20px;
}
.popup-brand-logo{
  padding:7px 10px;
  border-radius:14px;
}
.popup-brand-logo img{
  height:28px;
}
.premium-chip{
  padding:8px 10px;
  font-size:10px;
}
.side-copy{
  margin-bottom:18px;
}
.side-copy h3{
  margin-bottom:9px;
  font-size:30px;
  line-height:1.02;
}
.side-copy p{
  font-size:13px;
  line-height:1.45;
}
.side-badges{
  display:none;
}
.benefits{
  gap:10px;
}
.benefit{
  grid-template-columns:46px 1fr;
  gap:12px;
  padding:12px;
  border-radius:16px;
}
.benefit-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  font-size:20px;
}
.benefit strong{
  margin-bottom:3px;
  font-size:14px;
}
.benefit span{
  font-size:12px;
  line-height:1.35;
}

.popup-main{
  padding:26px 30px 22px;
}
.main-top{
  margin-bottom:10px;
  padding-right:48px;
}
.main-logo-box img{
  height:28px;
}
.main-signature{
  padding:8px 11px;
  font-size:11px;
}
.eyebrow{
  margin-bottom:8px;
  padding:6px 10px;
  font-size:10px;
}
.popup h2{
  margin-bottom:10px;
  font-size:clamp(30px,3.6vw,44px);
  line-height:1.01;
}
.popup-copy{
  margin-bottom:7px;
  font-size:14px;
  line-height:1.45;
}
.form-shell{
  margin-top:14px;
  padding:14px;
  border-radius:20px;
}
.form-grid{
  gap:9px;
}
.field{
  gap:5px;
}
.field label{
  font-size:11px;
}
.field input,
.field textarea{
  padding:11px 13px;
  border-radius:12px;
  font-size:14px;
}
.field textarea{
  min-height:70px;
}
.submit-btn{
  min-height:48px;
  margin-top:2px;
  border-radius:13px;
  font-size:15px;
}
.consent{
  gap:8px;
  margin-top:7px;
  font-size:9.5px;
  line-height:1.32;
}
.consent input{
  width:16px;
  height:16px;
}
.consent input:checked:after{
  left:4px;
  top:1px;
}
.bottom-note{
  margin-top:7px;
  padding:8px 10px;
  border-radius:12px;
  font-size:11px;
}
.bottom-note .shield{
  width:18px;
  height:18px;
}
.close-btn{
  right:16px;
  top:16px;
  width:40px;
  height:40px;
  font-size:23px;
}

/* На десктопе логотип уже есть в синей колонке — не дублируем его справа. */
@media (min-width:921px){
  .main-logo-box{
    display:none;
  }
  .main-top{
    justify-content:flex-start;
  }
}

/* На планшетах и небольших экранах убираем презентационную колонку,
   чтобы форма гарантированно оставалась в пределах одного экрана. */
@media (max-width:920px){
  .popup-backdrop{
    padding:16px;
  }
  .popup{
    width:min(620px,100%);
    max-height:calc(100dvh - 32px);
    overflow:hidden;
  }
  .popup-inner{
    grid-template-columns:1fr;
  }
  .popup-side{
    display:none;
  }
  .popup-main{
    padding:24px 24px 20px;
  }
  .main-logo-box{
    display:flex;
  }
  .popup h2{
    font-size:34px;
  }
}

/* Компактный режим для ноутбуков с небольшой высотой экрана. */
@media (max-height:760px) and (min-width:921px){
  .popup-backdrop{
    padding:14px;
  }
  .popup-side{
    padding:22px 22px 20px;
  }
  .popup-brand{
    margin-bottom:15px;
  }
  .side-copy{
    margin-bottom:14px;
  }
  .side-copy h3{
    font-size:27px;
  }
  .side-copy p{
    font-size:12px;
    line-height:1.35;
  }
  .benefits{
    gap:8px;
  }
  .benefit{
    padding:10px;
  }
  .popup-main{
    padding:22px 26px 18px;
  }
  .main-top{
    margin-bottom:7px;
  }
  .popup h2{
    font-size:36px;
  }
  .popup-copy{
    font-size:13px;
    line-height:1.38;
  }
  .form-shell{
    margin-top:10px;
    padding:12px;
  }
  .form-grid{
    gap:7px;
  }
  .field input,
  .field textarea{
    padding:9px 12px;
  }
  .field textarea{
    min-height:58px;
  }
  .submit-btn{
    min-height:44px;
  }
  .consent{
    margin-top:5px;
    font-size:8.8px;
  }
  .bottom-note{
    margin-top:5px;
    padding:7px 9px;
  }
}

@media (max-width:560px){
  .popup-backdrop{
    padding:8px;
    align-items:center;
  }
  .popup{
    max-height:calc(100dvh - 16px);
    border-radius:20px;
  }
  .popup-main{
    padding:20px 14px 16px;
  }
  .main-top{
    margin-bottom:7px;
  }
  .main-logo-box img{
    height:25px;
  }
  .main-signature{
    padding:6px 9px;
    font-size:9.5px;
  }
  .eyebrow{
    margin-bottom:6px;
  }
  .popup h2{
    font-size:28px;
    margin-bottom:8px;
  }
  .popup-copy{
    font-size:12.5px;
    line-height:1.36;
  }
  .form-shell{
    margin-top:9px;
    padding:11px;
  }
  .field input,
  .field textarea{
    padding:9px 11px;
    font-size:13px;
  }
  .field textarea{
    min-height:54px;
  }
  .submit-btn{
    min-height:44px;
    font-size:14px;
  }
  .consent{
    font-size:8.5px;
    line-height:1.25;
  }
  .bottom-note{
    font-size:10px;
  }
}


/* На экранах до 1080px отдаём ширину самой форме вместо двух колонок. */
@media (max-width:1080px){
  .popup-backdrop{
    padding:14px;
  }
  .popup{
    width:min(620px,100%);
    max-height:calc(100dvh - 28px);
    overflow:hidden;
  }
  .popup-inner{
    grid-template-columns:1fr;
  }
  .popup-side{
    display:none;
  }
  .popup-main{
    padding:22px 24px 18px;
  }
  .main-logo-box{
    display:flex;
  }
}


/* === Clean right header: один акцент вместо трёх === */
.main-top{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  min-height:28px;
  margin:0 0 12px !important;
  padding:0 54px 0 0 !important;
}
.main-logo-box{
  display:none !important;
}
.eyebrow{
  display:none !important;
}
.main-signature{
  display:inline-flex !important;
  align-items:center;
  min-height:28px;
  padding:6px 11px !important;
  border-radius:999px;
  border:1px solid rgba(0,110,254,.14) !important;
  background:rgba(0,110,254,.045) !important;
  box-shadow:none !important;
  color:#35638F !important;
  font-size:10.5px !important;
  font-weight:700;
  letter-spacing:.015em;
}
.popup h2{
  margin-top:0 !important;
}
@media (max-width:1080px){
  .main-top{
    margin-bottom:10px !important;
  }
}
@media (max-width:560px){
  .main-top{
    min-height:24px;
    padding-right:44px !important;
    margin-bottom:8px !important;
  }
  .main-signature{
    min-height:24px;
    padding:5px 9px !important;
    font-size:9.5px !important;
  }
}
.popup-form-feedback {
  display: none;
  grid-column: 1 / -1;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
}

.popup-form-feedback.is-success,
.popup-form-feedback.is-error {
  display: block;
}

.popup-form-feedback.is-success {
  color: #176b3a;
  background: #e9f7ef;
}

.popup-form-feedback.is-error {
  color: #a12622;
  background: #fff0ef;
}