:root{
  --bg:#f6f8ff;
  --panel:#ffffff;
  --text:#0b1020;
  --muted:#5b647a;
  --border:rgba(13, 18, 34, .10);
  --shadow: 0 18px 60px rgba(10, 20, 55, .12);
  --shadow2: 0 10px 30px rgba(10, 20, 55, .10);
  --accent1:#7b61ff;
  --accent2:#00d1ff;
  --accent3:#ff4fd8;
  --ring: 0 0 0 4px rgba(123, 97, 255, .18);
  --radius: 22px;
  --radius2: 16px;
  --max: 1180px;
}

html[data-theme="dark"]{
  --bg:#060814;
  --panel:#0c1022;
  --text:#f3f6ff;
  --muted:#a9b3cc;
  --border:rgba(243, 246, 255, .14);
  --shadow: 0 20px 70px rgba(0,0,0,.55);
  --shadow2: 0 12px 34px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: Manrope, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(900px 600px at 20% -10%, rgba(123,97,255,.22), transparent 60%),
              radial-gradient(900px 600px at 90% 10%, rgba(0,209,255,.18), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.45;
}

img{max-width:100%; display:block}

.container{max-width:var(--max); margin:0 auto; padding:0 20px}

.skip{position:absolute; left:-999px; top:10px; background:var(--panel); color:var(--text); padding:10px 12px; border-radius:12px; border:1px solid var(--border)}
.skip:focus{left:10px; outline:none; box-shadow:var(--ring)}

/* Top */
.top{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(255,255,255,.74), rgba(255,255,255,.54));
  border-bottom: 1px solid rgba(13,18,34,.08);
}
html[data-theme="dark"] .top{
  background: linear-gradient(to bottom, rgba(6,8,20,.78), rgba(6,8,20,.55));
  border-bottom: 1px solid rgba(243,246,255,.10);
}
.top__inner{display:flex; align-items:center; gap:16px; padding:14px 0}

.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand__logo{height:40px; width:auto}
.brand__title{font-weight:800; letter-spacing:-.02em}
.brand__sub{font-size:12px; color:var(--muted)}

.nav{margin-left:12px; display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.nav a{color:var(--muted); text-decoration:none; font-weight:600; font-size:13px}
.nav a:hover{color:var(--text)}

.top__actions{margin-left:auto; display:flex; align-items:center; gap:10px}

.toggle{
  height:40px; width:40px; border-radius:14px; border:1px solid var(--border);
  background:var(--panel); color:var(--text);
  box-shadow: var(--shadow2);
  cursor:pointer
}
.toggle:focus{outline:none; box-shadow: var(--ring)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  letter-spacing:-.01em;
  color:var(--text);
  background: var(--panel);
  box-shadow: var(--shadow2);
}
.btn:hover{transform: translateY(-1px)}

.btn--primary{
  border:none;
  background: linear-gradient(135deg, rgba(123,97,255,1), rgba(0,209,255,1));
  color:#081022;
}
.btn--ghost{
  background: rgba(255,255,255,.65);
}
html[data-theme="dark"] .btn--ghost{background: rgba(12,16,34,.72)}

.burger{display:none; margin-left:8px; height:42px; width:42px; border-radius:14px; border:1px solid var(--border); background:var(--panel); box-shadow:var(--shadow2)}
.burger span{display:block; height:2px; margin:7px 10px; background:var(--text); border-radius:2px}

.mobile{border-top:1px solid var(--border); padding:12px 0 18px}
.mobile__inner{display:flex; flex-direction:column; gap:10px}
.mobile a{color:var(--text); text-decoration:none; font-weight:700}
.mobile__cta{display:flex; gap:10px; padding-top:8px}

@media (max-width: 980px){
  .nav{display:none}
  .burger{display:block}
}

/* Hero */
.hero{padding:34px 0 26px}
.hero__grid{display:grid; grid-template-columns: 1.08fr .92fr; gap:22px; align-items:stretch}

.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.68); border:1px solid var(--border); color:var(--muted); font-weight:700; font-size:12px}
html[data-theme="dark"] .pill{background: rgba(12,16,34,.75)}

h1{font-size:52px; line-height:1.02; letter-spacing:-.04em; margin:14px 0 12px}
.lead{font-size:16px; color:var(--muted); margin:0 0 16px; max-width:56ch}

.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}

.chips{display:flex; flex-wrap:wrap; gap:8px; padding-top:6px}
.chip{font-size:12px; color:var(--muted); padding:8px 10px; background: rgba(255,255,255,.62); border:1px solid var(--border); border-radius:999px}
html[data-theme="dark"] .chip{background: rgba(12,16,34,.72)}

.heroCard{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}
html[data-theme="dark"] .heroCard{background: linear-gradient(180deg, rgba(12,16,34,.78), rgba(12,16,34,.62))}
.heroCard__head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px}
.heroCard__title{font-weight:900; letter-spacing:-.02em}
.heroCard__sub{color:var(--muted); font-weight:700; font-size:12px}
.heroCard__list{display:flex; flex-direction:column; gap:10px; padding:8px 0 12px}
.row{display:flex; gap:10px}
.tick{height:22px; width:22px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background: rgba(0,209,255,.16); border:1px solid rgba(0,209,255,.35); font-weight:900}
.row span{color:var(--muted); font-size:13px}
.heroCard__actions{display:flex; gap:10px; flex-wrap:wrap}

.heroVisual{
  margin-top:14px;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
  background: var(--panel);
}
.heroVisual img{width:100%; height:260px; object-fit:cover}

.stats{display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; margin-top:18px}
.stat{background: rgba(255,255,255,.60); border:1px solid var(--border); border-radius: 18px; padding:12px; box-shadow: var(--shadow2)}
html[data-theme="dark"] .stat{background: rgba(12,16,34,.70)}
.stat__n{font-weight:900; letter-spacing:-.02em}
.stat__t{font-size:12px; color:var(--muted); font-weight:700}

@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr;}
  h1{font-size:40px}
  .stats{grid-template-columns:1fr 1fr}
}
@media (max-width: 520px){
  h1{font-size:34px}
  .stats{grid-template-columns:1fr}
}

/* Sections */
.section{padding:58px 0}
.section--soft{background: rgba(255,255,255,.32)}
html[data-theme="dark"] .section--soft{background: rgba(12,16,34,.25)}

.sectionHead{margin-bottom:18px}
.sectionHead h2{margin:0 0 6px; font-size:32px; letter-spacing:-.03em}
.sectionHead p{margin:0; color:var(--muted); font-weight:600}

.grid{display:grid}
.cards{grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 980px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.cards{grid-template-columns:1fr}}

.card{background: rgba(255,255,255,.70); border:1px solid var(--border); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow2)}
html[data-theme="dark"] .card{background: rgba(12,16,34,.72)}
.card__icon{height:52px; width:52px; border-radius:18px; display:flex; align-items:center; justify-content:center; background: rgba(0,209,255,.10); border:1px solid rgba(0,209,255,.25); margin-bottom:10px}
.card h3{margin:0 0 6px; letter-spacing:-.02em}
.card p{margin:0 0 10px; color:var(--muted); font-weight:600}
.mini{margin:0; padding-left:18px; color:var(--muted); font-weight:600}
.mini li{margin:6px 0}

/* Timeline */
.timeline{display:grid; grid-template-columns: repeat(5, 1fr); gap:12px}
@media (max-width: 980px){.timeline{grid-template-columns: 1fr;}}
.step{background: rgba(255,255,255,.70); border:1px solid var(--border); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow2); display:flex; gap:12px}
html[data-theme="dark"] .step{background: rgba(12,16,34,.72)}
.step__n{height:38px; width:38px; border-radius: 14px; background: linear-gradient(135deg, rgba(123,97,255,.90), rgba(0,209,255,.85)); color:#071022; font-weight:900; display:flex; align-items:center; justify-content:center}
.step h3{margin:0 0 4px; letter-spacing:-.02em}
.step p{margin:0; color:var(--muted); font-weight:600; font-size:13px}

/* Trust */
.trustGrid{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
@media (max-width: 980px){.trustGrid{grid-template-columns:1fr}}
.trustCard{background: rgba(255,255,255,.70); border:1px solid var(--border); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow2); display:flex; gap:12px}
html[data-theme="dark"] .trustCard{background: rgba(12,16,34,.72)}
.trustCard__icon{height:52px; width:52px; border-radius:18px; display:flex; align-items:center; justify-content:center; background: rgba(123,97,255,.10); border:1px solid rgba(123,97,255,.25)}
.trustCard h3{margin:0 0 6px}
.trustCard p{margin:0; color:var(--muted); font-weight:600}

.trustLinks{grid-column: 1 / -1; display:grid; grid-template-columns: repeat(3, 1fr); gap:12px}
@media (max-width: 980px){.trustLinks{grid-template-columns:1fr}}
.doc{display:flex; flex-direction:column; gap:6px; text-decoration:none; background: rgba(255,255,255,.70); border:1px solid var(--border); border-radius: var(--radius2); padding:14px; box-shadow: var(--shadow2)}
html[data-theme="dark"] .doc{background: rgba(12,16,34,.72)}
.doc__title{font-weight:900; color:var(--text)}
.doc__meta{color:var(--muted); font-weight:700; font-size:12px}

/* Carousel */
.carousel{position:relative; margin-top:12px}
.carViewport{overflow:hidden; border-radius: var(--radius); border:1px solid var(--border); box-shadow: var(--shadow)}
.carTrack{display:flex; transition: transform .55s cubic-bezier(.2,.8,.2,1)}
.slide{min-width:100%; background: var(--panel)}
.slide__img{width:100%; height:520px; object-fit:cover}
@media (max-width: 980px){.slide__img{height:360px}}
@media (max-width: 520px){.slide__img{height:280px}}
.slide__cap{padding:14px 16px; display:flex; justify-content:space-between; gap:10px; align-items:flex-start; background: rgba(255,255,255,.72)}
html[data-theme="dark"] .slide__cap{background: rgba(12,16,34,.78)}
.slide__title{font-weight:900; letter-spacing:-.02em}
.slide__desc{color:var(--muted); font-weight:600; font-size:13px}

.carBtn{position:absolute; top:50%; transform: translateY(-50%); height:44px; width:44px; border-radius: 16px; border:1px solid var(--border); background: rgba(255,255,255,.72); box-shadow: var(--shadow2); cursor:pointer; font-size:26px; font-weight:900; color:var(--text)}
html[data-theme="dark"] .carBtn{background: rgba(12,16,34,.76)}
.carBtn--prev{left:-10px}
.carBtn--next{right:-10px}
@media (max-width: 520px){.carBtn{display:none}}

.carDots{display:flex; gap:6px; justify-content:center; padding-top:10px}
.dot{height:8px; width:8px; border-radius:999px; background: rgba(123,97,255,.22); border:1px solid rgba(123,97,255,.35); cursor:pointer}
.dot.is-active{width:22px; background: linear-gradient(90deg, rgba(123,97,255,1), rgba(0,209,255,1)); border:none}

.caseCards{display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:14px}
@media (max-width: 980px){.caseCards{grid-template-columns:1fr 1fr}}
@media (max-width: 640px){.caseCards{grid-template-columns:1fr}}

.case{
  background: rgba(255,255,255,.70);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow2);
}
html[data-theme="dark"] .case{background: rgba(12,16,34,.72)}
.case h3{margin:0 0 6px}
.case p{margin:0 0 10px; color:var(--muted); font-weight:600}
.case .btn{width:100%}

/* Video */
.videoWrap{border-radius: var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow: var(--shadow)}
.videoWrap iframe{display:block; width:100%; aspect-ratio: 16/9; height:auto}
.videoLinks{display:flex; gap:12px; padding-top:10px}
.link{color:var(--text); font-weight:800; text-decoration:none}
.link:hover{text-decoration:underline}

/* FAQ */
.faq{display:grid; gap:10px}
.faq details{background: rgba(255,255,255,.70); border:1px solid var(--border); border-radius: var(--radius); padding:14px; box-shadow: var(--shadow2)}
html[data-theme="dark"] .faq details{background: rgba(12,16,34,.72)}
.faq summary{cursor:pointer; font-weight:900; letter-spacing:-.02em}
.faq__body{color:var(--muted); font-weight:600; padding-top:10px}

/* Contact */
.contactGrid{display:grid; grid-template-columns: 1.12fr .88fr; gap:14px; align-items:start}
@media (max-width: 980px){.contactGrid{grid-template-columns:1fr}}

.form{background: rgba(255,255,255,.72); border:1px solid var(--border); border-radius: var(--radius); padding:18px; box-shadow: var(--shadow2)}
html[data-theme="dark"] .form{background: rgba(12,16,34,.72)}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.fieldRow{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width: 520px){.fieldRow{grid-template-columns:1fr}}
label{font-weight:800; font-size:13px}
input, select, textarea{
  border-radius: 14px;
  border:1px solid var(--border);
  padding:12px 12px;
  background: rgba(255,255,255,.82);
  color:var(--text);
  font-weight:600;
  font-size:14px;
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{background: rgba(6,8,20,.55)}
input:focus, select:focus, textarea:focus{outline:none; box-shadow: var(--ring)}

.form__actions{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap}
.fine{margin:0; color:var(--muted); font-weight:600; font-size:12px; max-width:52ch}
.form__note{margin-top:12px; color:var(--muted); font-weight:700}

.side{display:grid; gap:12px}
.sideCard{background: rgba(255,255,255,.70); border:1px solid var(--border); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow2)}
html[data-theme="dark"] .sideCard{background: rgba(12,16,34,.72)}
.sideCard h3{margin:0 0 6px}
.sideCard p{margin:0 0 10px; color:var(--muted); font-weight:600}
.sidePills{display:flex; gap:8px; flex-wrap:wrap}
.pill2{font-size:12px; color:var(--muted); padding:8px 10px; background: rgba(123,97,255,.10); border:1px solid rgba(123,97,255,.22); border-radius:999px; font-weight:700}
.links{margin:0; padding-left:18px}
.links li{margin:8px 0}
.links a{color:var(--text); font-weight:800; text-decoration:none}
.links a:hover{text-decoration:underline}

/* Footer */
.footer{padding:26px 0; border-top:1px solid var(--border)}
.footer__inner{display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap}
.footer__brand{font-weight:900}
.footer__sub{color:var(--muted); font-weight:700; font-size:12px}
.footer__right{display:flex; gap:10px; align-items:center}
.sep{color:var(--muted)}

/* Lightbox */
/* Ensure the HTML5 [hidden] attribute actually hides the lightbox even if
   component styles set display/grid. */
.lightbox[hidden]{display:none !important}
.lightbox{position:fixed; inset:0; z-index:100; display:none; place-items:center}
.lightbox.open{display:grid}
.lightbox__backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55)}
.lightbox__panel{position:relative; width:min(1100px, 92vw); max-height: 90vh; background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow)}
.lightbox__close{position:absolute; top:10px; right:10px; height:42px; width:42px; border-radius: 16px; border:1px solid var(--border); background: rgba(255,255,255,.74); cursor:pointer; font-size:26px; font-weight:900}
html[data-theme="dark"] .lightbox__close{background: rgba(12,16,34,.72); color:var(--text)}
.lightbox__media{background:#000}
.lightbox__media img{width:100%; height:auto; max-height: 70vh; object-fit:contain}
.lightbox__meta{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 16px}
.lightbox__title{font-weight:900; letter-spacing:-.02em}
.lightbox__desc{color:var(--muted); font-weight:600; font-size:13px}
.lightbox__actions{display:flex; gap:10px}



/* CONTACTS */
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.contactCard{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow)}
.contactCard__title{font-weight:700;color:var(--text);letter-spacing:.2px;margin-bottom:6px}
.contactCard__value{font-size:18px;font-weight:800;margin-bottom:8px}
.contactCard__note{color:var(--muted);font-size:14px;line-height:1.35;margin-bottom:14px}
.contactCard__actions{display:flex;gap:10px;flex-wrap:wrap}
.contactFine{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.pill2{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(255,255,255,.55);padding:8px 12px;border-radius:999px;color:var(--muted);font-size:13px}
[data-theme="dark"] .pill2{background:rgba(0,0,0,.25)}

/* Mobile header CTA fix */
@media (max-width: 420px){
  .mobile__cta{flex-direction:column;align-items:stretch}
  .mobile__cta .btn{width:100%}
}

@media (max-width: 980px){
  .top__actions{flex-wrap:wrap}
}


/* ===== Modal (success) ===== */
.nfModal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}
.nfModal.open{ display: flex; }
.nfModalCard{
  width: min(520px, 92vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(16,18,24,.92);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  padding: 18px 18px 16px;
  position: relative;
  color: #fff;
}
html[data-theme="light"] .nfModalCard{
  background: rgba(255,255,255,.96);
  color: var(--text);
  border-color: var(--line);
}
.nfModalClose{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
html[data-theme="light"] .nfModalClose{
  border-color: var(--line);
  background: rgba(0,0,0,.05);
}
.nfModalIcon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin: 4px 0 10px;
  font-weight: 900;
  font-size: 22px;
  background: linear-gradient(90deg, rgba(125,211,252,.95), rgba(167,139,250,.95));
  color: #0b1020;
}
.nfModalTitle{
  margin: 0 0 6px;
  font-size: 20px;
  letter-spacing: -0.2px;
}
.nfModalText{
  margin: 0 0 14px;
  opacity: .9;
  line-height: 1.45;
}
.nfModalActions{ display:flex; justify-content:flex-end; gap:10px; }

.form__note.error{
  color: #ffb4b4;
}
html[data-theme="light"] .form__note.error{
  color: #b42318;
}
/* ===== Contacts card (Request sidebar) ===== */
.sideCard--contacts .sideCard__head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}

.sideCard--contacts .sideCard__title{
  margin:0;
  font-size:18px;
  line-height:1.2;
}

.sideCard--contacts .sideCard__badge{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  opacity:.9;
  background: rgba(0,0,0,.06);
}

html[data-theme="dark"] .sideCard--contacts .sideCard__badge{
  background: rgba(255,255,255,.10);
}

.contactList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contactRow{
  display:flex;
  gap:12px;
  align-items:flex-start;
  text-decoration:none;
  color:inherit;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(0,0,0,.03);
  transition: transform .12s ease, background .12s ease;
}

html[data-theme="dark"] .contactRow{
  background: rgba(255,255,255,.06);
}

.contactRow:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.05);
}
html[data-theme="dark"] .contactRow:hover{
  background: rgba(255,255,255,.08);
}

.contactRow--plain:hover{
  transform:none;
}

.ico{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 36px;
  background: rgba(0,0,0,.06);
}
html[data-theme="dark"] .ico{
  background: rgba(255,255,255,.10);
}
.ico svg{
  width:18px;
  height:18px;
  opacity:.9;
}

.contactRow__body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.contactRow__label{
  font-size:12px;
  opacity:.7;
  line-height:1.2;
}

.contactRow__value{
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  word-break: break-word;
}

.contactRow__value--addr{
  font-weight:500;
}

.sideCard__divider{
  height:1px;
  margin:14px 2px;
  background: rgba(0,0,0,.10);
}
html[data-theme="dark"] .sideCard__divider{
  background: rgba(255,255,255,.14);
}

/* Requisites */
.requisites__title{
  font-size:14px;
  font-weight:700;
  margin-bottom:10px;
}

.requisites__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.kv{
  padding:10px 10px;
  border-radius:14px;
  background: rgba(0,0,0,.03);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
html[data-theme="dark"] .kv{
  background: rgba(255,255,255,.06);
}
.kv span{
  font-size:12px;
  opacity:.7;
}
.kv b{
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
}

/* На очень узких — реквизиты в 1 колонку */
@media (max-width: 420px){
  .requisites__grid{ grid-template-columns: 1fr; }
}
/* === Request: equal height columns === */
#request .contactGrid{
  display: grid;              /* если у тебя и так grid — ок, просто оставь */
  align-items: stretch;       /* ВАЖНО: растянуть по высоте */
}

/* Растягиваем именно карточки внутри колонок */
#request .contactGrid > .form,
#request .contactGrid > .side{
  height: 100%;
}

#request .contactGrid > .side{
  display: flex;
}

#request .sideCard{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* чтобы "Реквизиты" ушли вниз и блок выглядел собранно */
#request .sideCard .sideCard__divider{
  margin-top: 14px;
  margin-bottom: 14px;
}
#request .sideCard .requisites{
  margin-top: auto; /* прижимаем реквизиты к низу */
}
/* === Contact card header graphic === */
#request .contactHero{
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  background:
    radial-gradient(700px 160px at 20% 0%, rgba(80,120,255,.16), transparent 60%),
    radial-gradient(600px 140px at 90% 10%, rgba(50,200,255,.14), transparent 55%),
    rgba(0,0,0,.03);
}

html[data-theme="dark"] #request .contactHero{
  background:
    radial-gradient(700px 160px at 20% 0%, rgba(80,120,255,.22), transparent 60%),
    radial-gradient(600px 140px at 90% 10%, rgba(50,200,255,.18), transparent 55%),
    rgba(255,255,255,.06);
}

#request .contactHero__brand{
  display:flex;
  align-items:center;
  gap:12px;
}

#request .contactHero__logo{
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  padding: 6px;
}

html[data-theme="dark"] #request .contactHero__logo{
  background: rgba(0,0,0,.18);
}

#request .contactHero__name{
  font-weight: 800;
  line-height: 1.1;
}

#request .contactHero__tag{
  margin-top: 2px;
  font-size: 12px;
  opacity: .75;
}
#request .contactNote{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  font-size: 12px;
  opacity: .8;
}
html[data-theme="dark"] #request .contactNote{
  background: rgba(255,255,255,.06);
}