/* Extracted from index.html — styles moved from inline */

/* VelaSans font (local assets/) */
@font-face {
    font-family: 'VelaSans';
    src: url('assets/fonts/VelaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* VelaSans Light */
@font-face {
    font-family: 'VelaSans';
    src: url('assets/fonts/VelaSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* VelaSans Medium */
@font-face {
    font-family: 'VelaSans';
    src: url('assets/fonts/VelaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* VelaSans SemiBold */
@font-face {
    font-family: 'VelaSans';
    src: url('assets/fonts/VelaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* VelaSans Bold */
@font-face {
    font-family: 'VelaSans';
    src: url('assets/fonts/VelaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* VelaSans ExtraBold */
@font-face {
    font-family: 'VelaSans';
    src: url('assets/fonts/VelaSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

/* VelaSans ExtraLight */
@font-face {
    font-family: 'VelaSans';
    src: url('assets/fonts/VelaSans-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

/* VelaSans GX (Variable Font) */
@font-face {
    font-family: 'VelaSans';
    src: url('assets/fonts/VelaSans-GX.ttf') format('truetype-variations');
    font-weight: 100 900; /* переменные веса */
    font-style: normal;
}

/* ============================================
   BOOTSTRAP 5 NATIVE INTEGRATION
   ============================================ */

*{box-sizing:border-box}
html{height:100%; scroll-snap-type: y proximity; scroll-padding-top: 99px}
body{
  height:100%;
  margin:0;
  background-color:#181822;
  line-height:1.35;
  font-family: VelaSans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  letter-spacing:.1px;
  overflow-x:hidden;
  color: #eef0f6;
}
a{color:inherit; text-decoration:none;}
a:hover{color:inherit;}
img{max-width:100%;display:block}
button, input, select, textarea{font:inherit; color:inherit}
::selection{background:rgba(255,255,255,.20)}

/* Bootstrap container override для нашего дизайна */
.wrap{
  width:1600px !important; 
  max-width:85% !important; 
  margin:0 auto !important; 
  padding-right:0 !important;
  padding-left:0 !important;
}

/* Layout helpers совместимые с Bootstrap */
.grid{display:grid; gap:16px}
.row-custom{display:flex; gap:16px}
.muted{color:rgba(238,240,246,.68) !important}

h1{font-size:48px; margin:0 0 18px; letter-spacing:-.6px; font-weight: 600;line-height: 56px}
h2{font-size:40px; color: #fff; margin:0px; letter-spacing:-.4px; line-height: 48px; font-weight: 500;}
h3{font-size:18px; margin:0 0 8px}
h4{font-size: 20px;line-height: 24px; color: #fff;font-weight: 500;}
.textmuted{font-size:16px; margin-top:2px;line-height: 20px; color: #9898a2; font-weight: 700;}

h5{font-size:24px; color:#ffffff; margin:0; font-weight: 500;}
.subtext{font-size: 20px; color: #c8c8d2;; line-height: 24px; font-weight: 400;}
.text{font-size: 14px;line-height: 16px;font-weight: 400; color: #9898a2;}
.textprice{color: #a99aff;font-size: 16px; line-height: 20px;font-weight: 400;}
.lead{font-size:24px; color:#c8c8d2; margin:0 0 50px; line-height: 28px;}
.section{ padding-bottom:140px; scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: 99px}
.section.tight{padding:32px 0}

/* Card - переопределение Bootstrap .card */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); 
  background-color:#15171c ; 
  border:1px solid rgba(255,255,255,.10); 
  border-radius:28px !important; 
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  margin-bottom:0 !important;
  word-wrap: normal !important;
}
.card.pad-lg{padding:22px}
.card.soft{box-shadow: 0 10px 30px rgba(0,0,0,.28) }
.card.white{
  background:#f7f7fb ; 
  color:#0d0f14 ; 
  border-color:rgba(0,0,0,.06); 
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

/* Buttons - переопределение Bootstrap .btn */
.btn{
  appearance:none ;
  border:1px solid rgba(255,255,255,.16); 
  background:transparent; 
  color:#eef0f6 ; 
  padding:10px 20px; 
  border-radius:999px; 
  cursor:pointer; 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:10px; 
  transition:transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease; 
  user-select:none; 
  text-decoration:none; 
  min-height:42px;
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  text-align:center;
  vertical-align:middle;
}
.btn:hover{transform:translateY(-1px) !important; border-color:rgba(255,255,255,.30) !important; color:#eef0f6 !important;}
.btn:active{transform:translateY(0px) !important; opacity:.92 !important;}
.btn:focus, .btn:focus-visible{
  color:#eef0f6 !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset !important;
}
.btn.primary{
  background:#ffffff !important; 
  color:#0b0c0f !important; 
  border-color:transparent !important;
}
.btn.primary:hover{
  filter:brightness(.98) !important; 
  color:#0b0c0f !important; 
  background:#ffffff !important;
  transform:translateY(-1px) !important;
}
.btn.primary:focus{color:#0b0c0f !important;}
.btn.ghost{background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.14) !important;}
.btn.small{min-height:34px !important; padding:7px 12px !important; font-size:13px !important;}

.btn.primary.block{
  background:linear-gradient(90deg, #7F6BFF 0%, #5548AA 100%) !important; 
  color:#ffffff !important; 
  border-radius:16px !important; 
  padding:11px 54px !important; 
  margin:16px 20px 28px 20px !important; 
  border-color:transparent !important;
  font-size: 16px !important;
  font-weight: 700;
}
.btn.primary.block:hover{color:#ffffff !important; background:linear-gradient(90deg, #7F6BFF 0%, #5548AA 100%) !important;}
.btn:focus-visible{outline:none !important; box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset !important;}
.icon{display:inline-block; flex:0 0 auto}

/* Hero buttons */
.btn.hero-primary{
  background:linear-gradient(90deg,#7F6BFF,#5548AA) !important; 
  color:#ffffff !important; 
  border:0 !important; 
  border-radius:16px !important; 
  font-size: 17px !important;
  font-weight: 500 !important;

}
.btn.hero-primary:hover{color:#ffffff !important;}
.btn.hero-outline{
  background:rgba(255,255,255,0.02) !important; 
  color:#ffffff !important; 
  border:1px solid rgba(255,255,255,0.9) !important; 
  border-radius:16px !important; 
  font-size:20px !important; 
  font-weight:500 !important; 
  backdrop-filter:blur(6px) !important; 
  -webkit-backdrop-filter:blur(6px) !important; 
  box-shadow: inset 0 6px 18px rgba(255,255,255,0.03) !important; 
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
.btn.hero-outline:hover{
  background:rgba(255,255,255,0.035) !important; 
  box-shadow: inset 0 8px 22px rgba(255,255,255,0.045) !important; 
  transform:translateY(-1px) !important;
  color:#ffffff !important;
}
.hero-actions .btn{border-radius:16px !important; width:100%; max-width:100%; font-size:20px !important; line-height: 100%;color: #fff;font-weight: 700; justify-content:center}

/* Socials + header helpers */
.socials{display:flex; align-items:center; gap:8px; margin-right:8px}
.icon-link{display:inline-flex; align-items:center; justify-content:center; color:rgba(238,240,246,.9); text-decoration:none}
.region, .channel{font-size:15px}

/* Inputs - переопределение Bootstrap форм */
.field{display:grid; gap:8px}
.label{font-size: 14px; color: #fff;line-height: 16px; font-weight: 500;}
.control, .form-control.control{
  width:100% !important; 
  background:rgba(255,255,255,.03) !important; 
  border:1px solid rgba(255,255,255,.14) !important; 
  border-radius:14px !important; 
  padding:11px 12px !important; 
  min-height:44px !important; 
  transition:border-color .2s ease, background .2s ease, transform .15s ease !important; 
  outline:none !important;
  color: #eef0f6 !important;
  font-size:14px !important;
  line-height:1.6 !important;
}
.control:hover, .form-control.control:hover{border-color:rgba(255,255,255,.22) !important;}
.control:focus, .form-control.control:focus{
  border-color:rgba(255,255,255,.36) !important; 
  box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset !important;
  background:rgba(255,255,255,.03) !important;
  color: #eef0f6 !important;
}
.control.active, .form-control.control.active{background-color:rgba(127, 107, 255, 0.35) !important;}
.control::placeholder, .form-control.control::placeholder{color:rgba(238,240,246,.45) !important;}
select.control, select.form-control.control{padding-right:38px !important;}
.control-wrap{position:relative}
.chev{position:absolute; right:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.75; pointer-events:none}

/* Checkbox / radio */
.checks{display:grid; gap:10px}
.check{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.10); border-radius:14px; cursor:pointer; transition:background .2s ease, border-color .2s ease, transform .15s ease}
.check:hover{background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.18)}
.check:active{transform:translateY(1px)}
.check input{margin-top:2px}
.check input:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset}
.check .t{display:grid; gap:2px}
.check .t b{font-weight:650}
.check .t span{font-size:12px; color:rgba(238,240,246,.52)}

/* Top nav */
header{position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(10,11,15,.85), rgba(10,11,15,.62)); backdrop-filter: blur(12px); border-bottom:1px solid rgba(255,255,255,.08); height:99px; font-size:15px}
.nav{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 0; height:100%; width:100%;}

/* Make the <nav> element grow so the right group is pinned to the edge */
.nav > nav{flex:1; min-width:0}

/* Ensure brand doesn't grow and flexible nav can shrink if needed */
.brand{flex:0 0 auto}
nav ul{min-width:0}

/* Center header content vertically */
header > .wrap{height:100%; display:flex; align-items:center}
.brand{display:flex; align-items:center; gap:10px;  text-decoration:none}
.logo{ height:30px;}
.brand span{font-weight:650; letter-spacing:-.3px}
nav ul{list-style:none; padding:0; margin:0;margin-left: 15px; display:flex; align-items:center; gap:6px}
nav a{text-decoration:none; color:rgba(238,240,246,.86); font-size:15px; padding:8px 10px; border-radius:999px; transition:background .2s ease, color .2s ease}
nav a:hover{background:rgba(255,255,255,.06); color:#eef0f6}
nav a:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset}
.nav-right{display:flex; align-items:center; margin-left:auto; margin-right:0px; }

/* Keep `.nav-right` in the normal flow; flex + margin-left:auto aligns it to the right edge of .nav */
.nav{position:static}
.phone{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; font-size:15px; color:rgba(238,240,246,.88)}
.phone .dot{width:7px; height:7px; border-radius:999px; background:#35d07f; box-shadow:0 0 0 4px rgba(53,208,127,.14)}
.burger{display:none; width:42px; height:42px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease, border-color .2s ease, background .2s ease}
.burger:hover{border-color:rgba(255,255,255,.25); transform:translateY(-1px)}
.burger:active{transform:translateY(0px)}
.burger:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset}
.burger i{width:18px; height:2px; background:rgba(255,255,255,.86); display:block; position:relative; border-radius:999px}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:18px; height:2px; background:rgba(255,255,255,.86); border-radius:999px}
.burger i::before{top:-6px}
.burger i::after{top:6px}

/* Mobile menu */
.mnav{display:none; padding:10px 0 16px}
.mnav .card{padding:12px}
.mnav a{display:block; padding:10px 12px; border-radius:12px}
.mnav a:hover{background:rgba(255,255,255,.05)}

.hero{height:700px; position:relative; padding:0; color:#eef0f6; scroll-snap-align: start}
.hero .wrap{height:100%; display:flex; align-items:center}
.hero-card{width:826px;  min-height:250px; display:grid; align-content:start; gap:12px; position:relative; overflow:hidden; background:transparent; border:0; box-shadow:none; margin-bottom: 30px;}
.hero-card > *{position:relative; z-index:1}
.hero-video{position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:100%; object-fit:cover; z-index:-1; pointer-events:none}
.hero .h1{margin-bottom: 30px;}
/* Dark overlay above video (50% black) */
.hero-overlay{position:absolute; inset:0; background:rgba(0,0,0,0.5); z-index:0; pointer-events:none}
.hero-actions{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; align-items:stretch}
.hero-sub{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.hero .btn{padding: 17px 29px !important;}
.pill{display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); color:rgba(238,240,246,.86); font-size:12px; transition:background .2s ease, transform .15s ease, border-color .2s ease}
.pill:hover{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.18); transform:translateY(-1px)}
.pill:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset}
.pill svg{opacity:.9}

/* Section: chooser */
.chooser{display:grid; grid-template-columns: 1fr 385px; gap:20px; align-items:stretch; height:573px}
.chooser-left{display:flex; justify-content:flex-end; align-items:stretch; position:relative; overflow:hidden; border-radius:32px; background: radial-gradient(circle at left bottom, rgba(255,255,255,0.40) 0%, rgba(192,182,255,0.40) 5%, rgba(127,107,255,0.40) 10%, rgba(97,81,194,0.53) 14%, rgba(64,54,128,0.68) 19%, rgba(56,47,113,0.71) 24%, rgba(48,40,96,0.76) 29%, rgba(40,33,80,0.80) 33%, rgba(32,27,64,0.84) 38%, rgba(28,23,56,0.86) 43%, rgba(24,20,48,0.88) 48%, rgba(21,18,43,0.89) 52%, rgba(20,17,40,0.90) 57%, rgba(18,15,35,0.91) 62%, rgba(16,13,32,0.92) 67%, rgba(16,14,31,0.93) 71%, rgba(16,14,30,0.94) 76%, rgba(17,15,29,0.95) 81%, rgba(17,16,28,0.96) 86%, rgba(17,16,27,0.97) 90%, rgba(17,17,26,0.98) 95%, rgba(18,18,24,1.00) 100%)}
.chooser-left::before{content:""; position:absolute; inset:0; background-image:url('images/chooser-back.png'); background-size: 68% 110%; background-position:-120%; background-repeat:no-repeat; pointer-events:none; z-index:-1}
.chooser-left::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at right bottom, rgba(255,255,255,0.04) 0%, transparent 40%); pointer-events:none; z-index:-1}
.chooser-left > *{position:relative; z-index:1}
.chooser-logo{position:absolute; top:32px; left:32px; height:30px; z-index:2}
.chooser-title{position:absolute; bottom:32px; left:32px; font-size:clamp(22px, 2.5vw, 34px); margin:0; letter-spacing:-.4px; color:#eef0f6; z-index:2; max-width:500px}
.chooser-right{display:flex; align-items:stretch}

/* System cards */
.system-card{width:385px; display:grid; align-content:start; position:relative; overflow:hidden; background:transparent; border: 1px solid rgba(255,255,255,.10);padding: 4px; box-shadow:none; height:100%}
.system-card::before{content:""; position:absolute; inset:-1px; background:none; opacity:.65; pointer-events:none}
.system-card > *{position:relative}
.system-header{box-shadow: 0px 0px 20px rgba(27, 27, 27, 0.1) inset; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: 28px; background-color: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); align-items: flex-start; padding: 20px; gap: 16px; display: grid; margin-bottom: 16px}
.system-title{font-size:24px; font-weight:700; letter-spacing:-.3px; margin:0; color:#eef0f6}
.system-info{display:grid;  padding-bottom:0; border-bottom:0}
.system-info .info-item{font-size:14px; color:rgba(238,240,246,.82)}
.system-info .info-item strong{color:#eef0f6; font-weight:650}
.system-info .text{margin-bottom:1px;}
.system-info .textprice{margin-top:7px;}
.system-sections-wrapper{padding:0 20px}
.system-section{display:grid; gap:10px; margin-bottom: 16px;}
.system-section h4{font-size:20px; font-weight:500; line-height: 24px; margin:0; color:#eef0f6}
.system-list{margin:0; padding-left:20px; color:rgba(238,240,246,.82); font-size:14px; display:grid; gap:4px; list-style:disc;line-height: 16px;font-weight: 400;}
.system-card .btn{margin-top:auto}

/* Benefits row before chooser */
.benefits{margin:41px 0px} 
.benefits-list{display:flex; justify-content: space-between; gap:20px; align-items:center; width:100%}
.benefit{display:flex; gap:16px; align-items:center; color:rgba(238,240,246,.92); font-size:18px;}

.benefit-icon{flex:0 0 auto; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center}
.benefit-icon svg,
.benefit-icon img{width:18px; height:18px; min-width:18px; min-height:18px; object-fit:contain; opacity:.95; flex:0 0 auto}
.benefit-icon--wide{width:32px}
.benefit-icon--wide img{width:32px; height:18px; min-width:28px; object-fit:contain}
.benefit-text{font-size:18px; font-weight:600}
.package{padding:18px; display:grid; gap:10px; min-height:250px; position:relative; overflow:hidden}
.package::before{content:""; position:absolute; inset:-1px; background:radial-gradient(520px 220px at 20% 0%, rgba(255,255,255,.09), transparent 55%); opacity:.65; pointer-events:none}
.package > *{position:relative}
.package header{position:static; background:transparent; border:none; backdrop-filter:none}
.package .name{font-weight:700; letter-spacing:-.3px}
.package .price{font-size:12px; color:rgba(238,240,246,.52)}
.list{margin:0; padding-left:16px; color:rgba(238,240,246,.82); font-size:13px; display:grid; gap:7px}
.package .btn{margin-top:auto}
.package[aria-selected="true"]{border-color:rgba(255,255,255,.28); box-shadow: 0 18px 55px rgba(0,0,0,.52)}

/* Projects */
.proj-header{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:40px}
.proj-header .btn.primary.block{padding: 11px 102px !important; margin: 0 !important; align-items:center !important; white-space:nowrap; text-wrap:nowrap;}
.proj-header h2{margin-bottom: 10px;}
#projects-all{display:none !important;}
.projects{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:stretch}
.proj-list{background:transparent; border:0; box-shadow:none}
.proj-list .bot{display:none}
.proj-items{display:grid; gap:20px}
.proj-item{
  border:1px solid transparent;
  background:
    linear-gradient(#21212b, #21212b) padding-box,
    radial-gradient(42.89% 100% at 50% 100%, rgba(255, 255, 255, 0.24), rgba(43, 43, 44, 0.3)) border-box,
    radial-gradient(50.94% 71.2% at 101.52% 50%, rgba(255, 255, 255, 0.24), rgba(43, 43, 44, 0.3)) border-box;
  border-radius:16px;
  cursor:pointer;
  transition:transform .15s ease, filter .2s ease;
}
.proj-item:hover{transform:translateY(-1px); filter:brightness(1.05)}
.proj-item:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset}
.proj-item-inner{padding:29px; display:grid;}
.proj-item .top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.proj-item h5{padding-bottom:16px}
.proj-item .textmuted{padding-bottom:20px;}
.proj-item .tags{display:flex; justify-content:space-between; align-items:center; gap:10px}
.proj-item .tags-list{display:flex; gap:8px; flex-wrap:wrap; }
.proj-item .tags-link{font-size:16px; color:#ffffff; white-space:nowrap; display:none !important;}
.tag{font-size: 12px; line-height: 12px; font-weight: 400; padding:8px 12px; border-radius:999px; background:#2B2B38; border:1px solid rgba(255,255,255,.10); color:#A99AFF; white-space:nowrap}
.proj-item[aria-selected="true"]{box-shadow:0 14px 40px rgba(0,0,0,.35)}
.proj-preview{padding:0; overflow:hidden}
.preview-box{border-radius:32px; border:1px solid rgba(255,255,255,.10); background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), radial-gradient(600px 240px at 20% 20%, rgba(255,255,255,.14), transparent 55%), radial-gradient(600px 240px at 80% 40%, rgba(255,255,255,.08), transparent 55%); min-height:260px; width:100%; height:100%; position:relative; overflow:hidden}
.preview-box::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.35), transparent 55%); pointer-events:none}
.preview-meta{display:none}
.preview-meta .mini{font-size:12px; color:rgba(238,240,246,.52)}
.divider-dots{display:flex; gap:8px; justify-content:center; margin:14px 0 0}
.dot{width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.30); transition:transform .2s ease, background .2s ease}
.dot[aria-current="true"]{background:rgba(255,255,255,.92); transform:scale(1.2)}

/* Work stages */
.stages-header{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; padding:0px 0px 40px 0px ; background:transparent; margin-bottom:0}
.stages-header .subtext{margin-top:4px}
.stages-wrapper{display:grid; grid-template-columns: 1fr 2fr; gap:20px; align-items:start}
.stages-list{display:grid; gap:30px; align-content:start; backdrop-filter:blur(4px);  background-color:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.24); padding:30px}
.stage-item{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.stage-item:hover{transform:translateY(-1px)}
.stage-item > .parent{align-self:stretch; display:flex; align-items:center; gap:16px}
.stage-number{position:relative; font-size:24px; line-height:28px; font-weight:500; color:#a99aff; text-align:center}
.stage-content{display:flex; flex-direction:column; gap:6px; flex:1}
.stage-content h5{margin:0; position:relative; font-size:24px; line-height:28px; font-weight:500;color:#fff; text-align:left}
.stage-item .sub-text{width:100%; position:relative; font-size:16px; line-height:20px;  color:#9898a2; text-align:left; display:inline-block}
.stages-diagram{min-height:100%; display:grid; place-items:center; background: rgba(255, 255, 255, 0.04);border-radius: 32px; outline: 1px rgba(255, 255, 255, 0.30) solid; outline-offset: -1px; border:0; box-shadow:none; overflow:hidden}
.stages-image{width:100%; height:auto; max-height:100%; max-width:100%; display:block; object-fit:contain}
.seg{display:inline-flex; gap:8px;  border-bottom:1px solid rgba(127,107,255,.35)}
.seg button{border:0; background:transparent; color:#70707c; padding:8px 10px 8px; cursor:pointer; transition:color .2s ease, border-color .2s ease; font-size:20px; line-height: 24px; font-weight: 400;position:relative; border-bottom:2px solid transparent}
.seg button:hover{color:#eef0f6}
.seg button[aria-pressed="true"]{color:#A99AFF; border-bottom-color:#A99AFF}
.seg button:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset}

/* How system works - comparison slider */
.how-system-header{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:40px}
.comparison-slider-wrapper{padding:0; overflow:hidden; min-height:660px}
.comparison-slider{position:relative; width:100%; height:660px}
.comparison-images{position:relative; width:100%; height:100%; overflow:hidden}
.image-before, .image-after{position:absolute; top:0; width:100%; height:100%; background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), radial-gradient(600px 240px at 40% 20%, rgba(255,255,255,.12), transparent 60%)}
.image-before{left:0; clip-path:inset(0 50% 0 0); z-index:2}
.image-after{right:0; z-index:1}
.comparison-slider .slider-handle{position:absolute; top:0; left:0; width:100%; height:100%; -webkit-appearance:none; appearance:none; background:transparent; outline:none; margin:0; cursor:ew-resize; z-index:5}
.comparison-slider .slider-handle::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:40px; height:40px; border-radius:50%; background:#13131C; border:3px solid #13131C; box-shadow:0 4px 12px rgba(0,0,0,.35); cursor:ew-resize; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23A99AFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='12' x2='20' y2='12'/><polyline points='9,7 4,12 9,17'/><polyline points='15,7 20,12 15,17'/></svg>"); background-repeat:no-repeat; background-position:center; background-size:18px 18px}
.comparison-slider .slider-handle::-moz-range-thumb{width:40px; height:40px; border-radius:50%; background:#13131C; border:3px solid #13131C; box-shadow:0 4px 12px rgba(0,0,0,.35); cursor:ew-resize; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23A99AFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='12' x2='20' y2='12'/><polyline points='9,7 4,12 9,17'/><polyline points='15,7 20,12 15,17'/></svg>"); background-repeat:no-repeat; background-position:center; background-size:18px 18px}
.slider-divider{position:absolute; top:0; left:50%; width:2px; height:100%; background:#13131C; pointer-events:none; z-index:4}
.label-left, .label-right{position:absolute; bottom:32px; background:rgba(24,24,34,.3); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#ffffff; padding:22px 34px; width:300px; z-index:6}
.label-left{left:0px; border-radius:0px 12px 12px 0px; border-left:0}
.label-right{right:0px; border-radius:12px 0px 0px 12px; border-right:0}
.label-title{font-size:20px; font-weight:500; margin-bottom:8px;line-height: 24px;color: #fff;;}
.label-list{display:flex; flex-direction:column; gap:4px}
.label-list div{font-size:16px; line-height:20px;color: #c8c8d2;font-weight: 400;}

/* What's included */
.inclheader{margin-bottom:40px;}
.inclheader h2{margin-bottom:10px;}
.incl{display:grid; grid-template-columns: 1fr 1fr; gap:16px}

.feature{width:100%; position:relative; border-radius:32px; background:radial-gradient(50% 50% at 0% 0%, rgba(255,255,255,0.16), rgba(127,107,255,0.16) 12.5%, rgba(64,54,128,0.27) 25%, rgba(48,40,96,0.3) 37.5%, rgba(32,27,64,0.33) 50%, rgba(24,20,48,0.35) 62.5%, rgba(16,13,32,0.37) 75%, rgba(17,16,28,0.38) 87.5%, rgba(18,18,24,0.4)), rgba(255,255,255,0.04) !important; border:1px solid rgba(255,255,255,0.24) !important; box-sizing:border-box; display:flex; align-items:center; padding:24px; gap:24px; cursor:pointer; transition:transform .15s ease, filter .2s ease; overflow:hidden}
.feature > *{position:relative; z-index:1}
.card.white.feature{color:#eef0f6; box-shadow:0 14px 40px rgba(0,0,0,.45) ; flex-direction:row !important}

.feature:hover{transform:translateY(-1px)}
.feature:focus-visible{outline:none; box-shadow: 0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset}
.feature-img{width:359px; height:200px; object-fit:cover; border-radius:12px; flex-shrink:0}
.feature-content{display:grid; gap:8px; flex:1}
.feature-content h3{font-size:20px; font-weight:700; margin:0; line-height: 24px; color:#A99AFF}
.feature-list{margin:0; padding-left:20px; list-style:disc; display:grid; gap:6px}
.feature-list li{font-size:16px; color:#C8C8D2; line-height: 20px; font-weight: 400;}

/* Plans */
.plans-head{display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; margin-bottom:50px}
.plans-head h2{margin:0 0 10px 0}
.seg-plans{display:inline-flex; gap:8px; padding:5px 5px 0; border-bottom:1px solid rgba(127,107,255,.35)}
.segbtn-plans{border:0; background:transparent; color:#70707c; padding:8px 10px 8px; cursor:pointer; transition:color .2s ease, border-color .2s ease; font-size:20px; line-height:24px; font-weight:400; position:relative; border-bottom:2px solid transparent}
.segbtn-plans:hover{color:#eef0f6}
.segbtn-plans[aria-pressed="true"]{color:#A99AFF; border-bottom-color:#A99AFF}
.segbtn-plans:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset}

.plans{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; align-items:stretch; align-items: center}
.plan-item[data-system="wireless"]{display:none}
.plans.show-wireless .plan-item[data-system="wired"]{display:none}
.plans.show-wireless .plan-item[data-system="wireless"]{display:flex}

.plan-item{border-radius:32px; background-color:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.24); display:flex; flex-direction:column; justify-content:space-between; padding:4px; gap:16px; min-height:557px; height:auto}
.plan-item.plan-featured{border-color:rgba(127,107,255,.35); min-height:597px; height:auto; justify-self:stretch}

.plan-wrapp{display:flex; flex-direction:column; gap:32px}

.plan-top{box-shadow:0px 0px 20px rgba(27,27,27,.1) inset; backdrop-filter:blur(24px); border-radius:28px; background-color:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); padding:20px; display:flex; flex-direction:column; gap:16px}
.plan-featured .plan-top{border-color:rgba(127,107,255,.35)}

.plan-top-header{display:flex; align-items:center; justify-content:space-between; gap:10px}

.plan-name{font-size:16px; line-height:20px; font-weight:500; color:#fff}

.plan-badge{border-radius:16px; background-color:#7F6BFF; padding:8px 12px; font-size:12px; line-height:12px; color:#fff; text-align:center}

.plan-price-wrap{display:flex; flex-direction:column; gap:16px}

.plan-price{font-size:32px; line-height:40px; font-weight:600; color:#A99AFF}
.plan-price .price-prefix{font-size:0.6em; line-height:1; color:#ffffff; font-weight:500; margin-right:6px; vertical-align:baseline}

.plan-desc{font-size:14px; line-height:16px; color:#C8C8D2}

.plan-data{display:flex; flex-direction:column}

.plan-list{display:flex; flex-direction:column; padding:0 20px; gap:16px}
.plan-list-scroll{max-height:272px; overflow:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.plan-list-scroll::-webkit-scrollbar{width:0; height:0}

/* Featured: список не должен обрезаться */
.plan-item.plan-featured .plan-list-scroll{overflow: inherit; max-height:none; padding-bottom:0}

.plan-list-item{display:flex; align-items:center; gap:8px; font-size:16px; line-height:20px; font-weight:500; color:#fff}
.plan-list-item svg{flex-shrink:0; color:#A99AFF}
.plan-list-item span{flex:1}

.plan-bot{display:flex; flex-direction:column; padding:20px}
.plan-bot .btn{text-align:center}

/* Calculator */
.cost {
  	display: flex;
  	align-items: flex-start;
  	gap: 20px;
  	font-size: 40px;
  	color: #fff;
}
.cost .left {
  	width: 1060px;
  	border-radius: 32px;
  	background-color: rgba(255, 255, 255, 0.04);
  	border: 1px solid rgba(255, 255, 255, 0.24);
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	padding: 32px;
  	gap: 40px;
}
.cost .top {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 5px;
}
.cost .headline {
  	align-self: stretch;
  	line-height: 48px;
  	font-weight: 500;
}
.cost .sub-text {
  	align-self: stretch;
  	font-size: 20px;
  	line-height: 24px;
  	color: #c8c8d2;
}
.cost .frame-parent {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 30px;
  	font-size: 24px;
  	color: #a99aff;
}
.cost .text-parent {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 20px;
}
.cost .text-parent .text h3  {
font-size: 24px;
line-height: 28px;
color: #fff;
}
.cost .text-parent .text .calcaccent {
color: #a99aff;

}
.cost .text {
  	display: flex;
  	align-items: center;
  	gap: 10px;
}
.cost .headline2 {
  	line-height: 28px;
  	font-weight: 500;
}
.cost .headline3 {
  	line-height: 28px;
  	font-weight: 500;
  	color: #fff;
}
.cost .choice {
  	align-self: stretch;
  	display: flex;
  	align-items: flex-start;
  	gap: 8px;
  	font-size: 20px;
}
.cost .choicebox {
  	flex: 1;
  	border-radius: 16px;
  	background-color: rgba(255, 255, 255, 0.06);
  	border: 2px solid #a99aff;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	padding: 14px;
  	gap: 8px;
  	cursor: pointer;
  	transition: all 0.2s ease;
}
.cost .choice-radio-wrapper {
  	align-self: stretch;
  	display: flex;
  	align-items: center;
  	justify-content: flex-end;
}
.cost .choice-radio {
  	display: flex;
  	align-items: center;
  	gap: 12px;
}
.cost .choicebox .choice-radio-dot {
  	height: 20px;
  	width: 20px;
  	border-radius: 9999px;
  	border: 6px solid #a99aff;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 4px;
}
.cost .choice-content {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 4px;
  	font-size: 16px;
  	color: #a99aff;
}
.cost .choice-title {
  	line-height: 20px;
  	font-weight: 500;
    font-size: 16px;
    color: #a99aff;
}
.cost .choice-subtitle {
  	align-self: stretch;
  	font-size: 14px;
  	line-height: 16px;
  	color: #c8c8d2;
}
.cost .choicebox2 {
  	flex: 1;
  	border-radius: 16px;
  	background-color: #1c1c24;
  	border: 2px solid rgba(255, 255, 255, 0.15);
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	padding: 14px;
  	gap: 8px;
  	font-size: 16px;
  	color: #fff;
  	cursor: pointer;
  	transition: all 0.2s ease;
}
.cost .choicebox2 .choice-radio-dot {
  	height: 20px;
  	width: 20px;
  	border-radius: 9999px;
  	border: 6px solid rgba(255, 255, 255, 0.15);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 4px;
}
.cost .choicebox2 .choice-title {
  	color: #fff;
}
.cost .choicebox2:hover, .cost .choicebox:hover {
  	transform: translateY(-2px);
}
.cost .item-parent {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 30px;
}
.cost .segment {
  	align-self: stretch;
  	border-radius: 9999px;
  	background-color: #1c1c24;
  	border: 1px solid rgba(255, 255, 255, 0.15);
  	overflow: hidden;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 2px;
  	text-align: center;
  	font-size: 14px;
  	color: #fff;
}
.cost .control {
  	flex: 1;
  	border-radius: 9999px;
  	background-color: rgba(127, 107, 255, 0.35);
  	border: 1px solid rgba(255, 255, 255, 0.2);
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 12px 8px;
  	cursor: pointer;
  	transition: all 0.2s ease;
}
.cost .label {
  	line-height: 16px;
  	font-weight: 500;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: nowrap;
}
.cost .control2 {
  	flex: 1;
  	border-radius: 9999px;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	padding: 12px 8px;
  	cursor: pointer;
  	transition: all 0.2s ease;
}
.cost .control2:hover {
  	background-color: rgba(255, 255, 255, 0.05);
}
.cost .item2 {
  	width: 100%;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 20px;
  	font-size: 16px;
  	color: #fff;
}
.cost .desc {
  	align-self: stretch;
  	display: flex;
  	align-items: center;
  	gap: 10px;
}
.cost .left2 {
  	flex: 1;
  	display: flex;
  	align-items: center;
}
.cost .right {
  	display: flex;
  	align-items: center;
  	justify-content: center;
}
.cost .calc-option-title {
  	line-height: 20px;
  	color: #eef0f6;
  	transition: color 0.2s ease;
}
.cost .bot3 {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 50px;
}
.cost .slider-handle {
  	width: 100%;
  	background: transparent;
  	-webkit-appearance: none;
  	appearance: none;
  	outline: none;
  	cursor: pointer;
}
.cost .slider-handle::-webkit-slider-runnable-track {
  	width: 100%;
  	height: 12px;
  	background: transparent;
  	border: 1px solid rgb(255, 255, 255);
  	border-radius: 9999px;
  	cursor: pointer;
}
.cost .slider-handle::-moz-range-track {
  	width: 100%;
  	height: 12px;
  	background: transparent;
  	border: 1px solid rgb(255, 255, 255);
  	border-radius: 9999px;
  	cursor: pointer;
}
.cost .slider-handle::-webkit-slider-thumb {
  	-webkit-appearance: none;
  	appearance: none;
  	width: 20px;
  	height: 20px;
  	border-radius: 999px;
  	background-color: #7f6bff;
  	border: 6px solid #d9d9d9;
  	cursor: pointer;
  	margin-top: -4px;
}
.cost .slider-handle::-moz-range-thumb {
  	width: 20px;
  	height: 20px;
  	border-radius: 999px;
  	background-color: #7f6bff;
  	border: 6px solid #d9d9d9;
  	cursor: pointer;
}
.cost .wrapp2 {
  	align-self: stretch;
  	display: flex;
  	align-items: flex-start;
  	gap: 20px;
  	font-size: 16px;
}
.cost .left3,
.cost .left4 {
  	flex: 1;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 10px;
}
.cost .check,
.cost .check4,
.cost .check13,
.cost .calc-option-row {
  	display: flex;
  	align-items: flex-start;
  	gap: 12px;
}
.cost .wrapp3,
.cost .calc-label-wrapper {
  	display: flex;
  	align-items: center;
  	gap: 12px;
}
.cost .check5,
.cost .calc-checkbox-wrapper {
  	width: 18px;
  	display: flex;
  	align-items: flex-start;
  	flex-shrink: 0;
}
.cost .check6 {
  	height: 18px;
  	width: 18px;
  	border-radius: 4px;
  	border: 1.5px solid rgba(255, 255, 255, 0.15);
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	cursor: pointer;
  	background-color: transparent;
  	-webkit-appearance: none;
  	appearance: none;
  	margin: 0;
  	position: relative;
}
.cost .check6:checked {
  	background-color: #a99aff;
  	border-color: #a99aff;
}
.cost .check6:checked::after {
  	content: '';
  	position: absolute;
  	width: 4px;
  	height: 8px;
  	border: solid #000000;
  	border-width: 0 2px 2px 0;
  	transform: rotate(45deg);
  	top: 2px;
}
.cost .right11 {
  	align-self: stretch;
  	width: 520px;
  	border-radius: 32px;
  	background-color: rgba(255, 255, 255, 0.04);
  	border: 1px solid rgba(255, 255, 255, 0.24);
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	padding: 32px;
  	gap: 123px;
}
.cost .top-parent {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 50px;
}
.cost .frame-group {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 40px;
  	font-size: 24px;
}
.cost .item-wrapper {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
}
.cost .item4,
.cost .item5 {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 12px;
}
.cost .item5 {
  	flex: 1;
}
.cost .top6 {
  	align-self: stretch;
  	display: flex;
  	align-items: center;
}
.cost .wrapp12 {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 10px;
  	font-size: 20px;
}
.cost .headline12 {
  	line-height: 24px;
}
.cost .headline13 {
  	line-height: 24px;
  	color: #a99aff;
}
.cost .left5 {
  	flex: 1;
  	display: flex;
  	align-items: center;
}
.cost .headline19 {
  	align-self: stretch;
  	font-size: 32px;
  	line-height: 40px;
  	font-weight: 600;
  	color: #a99aff;
}
.cost .calc-note{
  margin-top:6px;
  font-size:12px;
  line-height:14px;
  color:#9898a2;
}
.cost .component-2 {
  	align-self: stretch;
  	height: 48px;
  	box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.5) inset, 0px 0px 20px rgba(127, 107, 255, 0.5) inset;
  	backdrop-filter: blur(70px);
  	border-radius: 16px;
  	background: linear-gradient(180deg, rgba(127, 107, 255, 0.6), rgba(85, 72, 170, 0.6));
  	display: flex;
  	align-items: center;
  	justify-content: center;
  padding: 0;
  	text-align: center;
  	font-size: 16px;
  	cursor: pointer;
  	transition: all 0.2s ease;
  	border: none;
  	margin-top: auto;
}
.cost .component-2:hover {
  	transform: translateY(-2px);
  	box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.7) inset, 0px 0px 20px rgba(127, 107, 255, 0.7) inset;
}
.cost .button {
  	line-height: 100%;
  	font-weight: 500;
  	background: none;
  	border: none;
  	color: #fff;
  	cursor: pointer;
}

/* KPIs */
.metrics {
  	border-radius: 32px;
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	justify-content: center;
  	padding: 73px 32px;
  	font-size: 40px;
  	color: #fff;
  	position: relative;
  	overflow: hidden;
  	background: radial-gradient(circle at left bottom, rgba(255,255,255,0.40) 0%, rgba(192,182,255,0.40) 5%, rgba(127,107,255,0.40) 10%, rgba(97,81,194,0.53) 14%, rgba(64,54,128,0.68) 19%, rgba(56,47,113,0.71) 24%, rgba(48,40,96,0.76) 29%, rgba(40,33,80,0.80) 33%, rgba(32,27,64,0.84) 38%, rgba(28,23,56,0.86) 43%, rgba(24,20,48,0.88) 48%, rgba(21,18,43,0.89) 52%, rgba(20,17,40,0.90) 57%, rgba(18,15,35,0.91) 62%, rgba(16,13,32,0.92) 67%, rgba(16,14,31,0.93) 71%, rgba(16,14,30,0.94) 76%, rgba(17,15,29,0.95) 81%, rgba(17,16,28,0.96) 86%, rgba(17,16,27,0.97) 90%, rgba(17,17,26,0.98) 95%, rgba(18,18,24,1.00) 100%);
}
.metrics::before {
  	content: "";
  	position: absolute;
  	inset: 0;
  	background-image: url('images/chooser-back.png');
  	background-size: 19% 99%;
  	background-position: -13%;
  	background-repeat: no-repeat;
  	pointer-events: none;
  	z-index: -1;
  	opacity: 0.35;
}
.metrics::after {
  	content: "";
  	position: absolute;
  	inset: 0;
  	background: radial-gradient(circle at right bottom, rgba(255,255,255,0.04) 0%, transparent 40%);
  	pointer-events: none;
  	z-index: -1;
}
.metrics > * {
  	position: relative;
  	z-index: 1;
}
.metrics .wrapp {
  	align-self: stretch;
  	display: flex;
  	align-items: flex-start;
  	gap: 179px;
}
.metrics .left {
  	flex: 1;
  	display: flex;
  	align-items: center;
  	justify-content: center;
}
.metrics .headline {
  	flex: 1;
  	line-height: 48px;
  	font-weight: 500;
  	margin: 0;
}
.metrics .right {
  	width: 808px;
  	display: flex;
  	align-items: flex-start;
  	gap: 68px;
  	font-size: 64px;
  	color: #a99aff;
}
.metrics .item {
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	gap: 20px;
}
.metrics .kpi-value {
  	align-self: stretch;
  	line-height: 48px;
  	font-weight: 500;
}
.metrics .kpi-label {
  	align-self: stretch;
  	max-width: 178px;
  	font-size: 20px;
  	line-height: 24px;
  	color: #c8c8d2;
}

/* Reviews - Figma Design */
.review-section{
  width: 100%;
}

.review-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.review-left{
  max-width: 787px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.review-headline{
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
  color: #fff;
}

.review-subtext{
  font-size: 20px;
  line-height: 24px;
  color: #c8c8d2;
}

.btn-review-leave{
  background:linear-gradient(90deg, #7F6BFF 0%, #5548AA 100%) !important; 
  color:#ffffff !important; 
  border-radius:16px !important; 
  padding:11px 102px !important; 
  margin:0 !important;
  border-color:transparent !important;
  font-size: 16px !important;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-review-leave:hover{
  color:#ffffff !important; 
  background:linear-gradient(90deg, #7F6BFF 0%, #5548AA 100%) !important;
}

.btn-review-leave:active{
  transform: translateY(0);
}

.review-bot{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.review-content{
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 20px;
}

/* Карточка рейтинга */
.review-rating-card{
  flex-shrink: 0;
  width: 250px;
  height: auto;
  padding: 32px;
  border-radius: 32px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(127, 107, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-rating-wrapp{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.review-rating-info{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.review-rating-title{
  font-size: 16px;
  line-height: 20px;
  text-align: center;
}

.review-rating-count{
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.rating-value{
  font-size: 32px;
  line-height: 40px;
  color: #a99aff;
}

.rating-max{
  font-size: 28px;
  line-height: 150%;
  color: #fff;
  display: none;
}

.review-rating-stars{
  display: flex;
  align-items: center;
  gap: 2px;
}

.review-rating-stars svg{
  width: 24px;
  height: 24px;
}

.review-details-btn{
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.review-details-btn:hover{
  opacity: 0.8;
}

.review-details-btn svg{
  width: 24px;
  height: 24px;
}

/* Карусель отзывов */
.review-carousel{
  flex: 1;
  min-width: 0;
  height: auto;
  
  display: flex;
  align-items: stretch;
  gap: 20px;
}

.review-item{
  flex-shrink: 0;
  width: 520px;
  height: auto;
  padding: 32px;
  border-radius: 32px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: flex;
  flex-direction: column;
}

.review-item-wrapp{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}

.review-item-header{
  display: flex;
  align-items: center;
  gap: 16px;
}

.review-avatar{
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  object-fit: cover;
}

.review-meta{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.review-name{
  font-size: 20px;
  line-height: 24px;
  color: #fff;
}

.review-object{
  font-size: 16px;
  line-height: 20px;
  color: #c8c8d2;
}

.review-text{
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Управление каруселью */
.review-controls{
  display: flex;
  align-items: center;
  gap: 8px;
}

.how-system-controls{
  display:none;
  align-items:center;
  gap:8px;
}

.review-nav-btn{
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 24px;
  background-color: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background-image 0.2s ease;
  position: relative;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.review-nav-btn img{
  width: 48px;
  height: 48px;
  position: absolute;
  transition: opacity 0.2s ease;
  transform: none;
}

/* Левая кнопка: Vector.png по умолчанию */
#rev-prev .arrow-default,
#blog-prev .arrow-default,
#how-prev .arrow-default{
  opacity: 1;
}

#rev-prev .arrow-hover,
#blog-prev .arrow-hover,
#how-prev .arrow-hover{
  opacity: 0;
  transform: rotate(180deg) !important;
}

/* Правая кнопка: Vector.png по умолчанию, повернут на 180 градусов */
#rev-next .arrow-default,
#blog-next .arrow-default,
#how-next .arrow-default{
  opacity: 1;
  transform: rotate(180deg) !important;
}

#rev-next .arrow-hover,
#blog-next .arrow-hover,
#how-next .arrow-hover{
  opacity: 0;
  transform: rotate(0deg) !important;
}

.review-nav-btn:hover{
  transform: translateY(-1px);
}

/* Левая кнопка при hover */
#rev-prev:hover,
#blog-prev:hover,
#how-prev:hover{
  transform: translateY(-1px);
}

/* Правая кнопка: оставляем только смену прозрачности стрелок */

/* При hover меняем видимость стрелок */
.review-nav-btn:active .arrow-default{
  opacity: 0;
}

#rev-prev:active .arrow-hover,
#blog-prev:active .arrow-hover,
#how-prev:active .arrow-hover{
  opacity: 1;
}

#rev-next:active .arrow-hover,
#blog-next:active .arrow-hover,
#how-next:active .arrow-hover{
  opacity: 1;
}

.review-nav-btn:active{
  transform: translateY(0);
}

.review-nav-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(127, 107, 255, 0.4);
}

/* Адаптивность */
@media (max-width: 1440px){
  .review-carousel{
    gap: 16px;
  }
  
  .review-item{
    width: 480px;
  }
}

@media (max-width: 1200px){
  .review-content{
    flex-direction: column;
    align-items: stretch;
  }
  
  .review-rating-card{
    width: 100%;
    height: auto;
  }
  
  .review-carousel{
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  
  .review-item{
    width: 100%;
    height: auto;
  }
}

@media (max-width: 768px){
  .review-headline{
    font-size: 32px;
    line-height: 38px;
  }
  
  .review-subtext{
    font-size: 16px;
    line-height: 20px;
  }
  
  .btn-review-leave{
    width: 100%;
    justify-content: center;
  }
  
  .review-top{
    margin-bottom: 32px;
  }
  
  .review-bot{
    gap: 24px;
  }
  
  .review-item{
    padding: 24px;
  }
  
  .review-rating-card{
    padding: 24px;
  }

  .how-system-controls{
    display:flex;
    justify-content:center;
    margin-top:16px;
    width:100%;
  }

  #how-system .seg{
    gap: 8px;
  }

  #how-system .seg button{
    height: 24px;
    min-width: 24px;
    padding: 0 8px;
    border-radius: 12px;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 24px;
    transition: transform 0.15s ease, color 0.2s ease;
  }
}

/* FAQ + Blog - Figma Design */
.faq-section{
  width: 100%;
}

.faqblog{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

/* FAQ Left Column */
.faq-left{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}

.faq-accordion{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* FAQ Row (Question/Answer) */
.faq-row{
  border-radius: 32px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.24);
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.faq-row.faq-active{
  background-color: rgba(255, 255, 255, 0.06);
  border-color: #a99aff;
}

.faq-wrapp{
  display: flex;
  align-items: flex-start;
  padding: 30px;
  gap: 16px;
}

.faq-row.faq-active .faq-wrapp{
  padding-bottom: 20px;
}

.faq-number{
  font-size: 20px;
  line-height: 24px;
  color: #fff;
  flex-shrink: 0;
}

.faq-row.faq-active .faq-number{
  color: #a99aff;
}

.faq-data{
  flex: 1;
  display: flex;
  flex-direction: column;
}

.faq-question-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.faq-headline{
  flex: 1;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
}

.faq-row.faq-active .faq-headline{
  color: #a99aff;
}

.faq-icon{
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #fff;
  transition: transform 0.3s ease, color 0.2s ease;
}

.faq-row.faq-active .faq-icon{
  transform: rotate(180deg);
  color: #a99aff;
}

.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-row.faq-active .faq-answer{
  max-height: 200px;
  padding-top: 10px;
}

.faq-answer p{
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #c8c8d2;
}

/* FAQ CTA */
.faq-cta{
  border-radius: 32px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.faq-cta-wrapp{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  gap: 20px;
}

.faq-cta-content{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-cta-headline{
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  color: #a99aff;
}

.faq-cta-text{
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}

.btn-faq-cta{
  flex-shrink: 0;
  width: 322px;
  height: 48px;
  padding: 16px 48px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(180deg, rgba(127, 107, 255, 0.6), rgba(85, 72, 170, 0.6));
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.5) inset, 0px 0px 20px rgba(127, 107, 255, 0.5) inset;
  backdrop-filter: blur(70px);
  color: #fff;
  font-size: 16px;
  line-height: 100%;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn-faq-cta:hover{
  transform: translateY(-2px);
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.6) inset, 0px 0px 30px rgba(127, 107, 255, 0.6) inset;
}

.btn-faq-cta:active{
  transform: translateY(0);
}

/* Blog Right Column */
.blog-column{
  flex: 1;
  flex-shrink: 0;
  min-width: 0;
}

.blog-wrapp{
  width: 100%;
  position: relative;
  padding: 32px;
  border-radius: 32px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.16), rgba(127, 107, 255, 0.16) 12.5%, rgba(64, 54, 128, 0.27) 25%, rgba(48, 40, 96, 0.3) 37.5%, rgba(32, 27, 64, 0.33) 50%, rgba(24, 20, 48, 0.35) 62.5%, rgba(16, 13, 32, 0.37) 75%, rgba(17, 16, 28, 0.38) 87.5%, rgba(18, 18, 24, 0.4)), rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.blog-header{
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.blog-headline{
  align-self: stretch;
  position: relative;
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
  color: #fff;
}

.blog-subtext{
  align-self: stretch;
  position: relative;
  margin: 0;
  font-size: 20px;
  line-height: 24px;
  color: #c8c8d2;
}

.blog-content{
  align-self: stretch;
  flex: 1;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  min-height: 0;
}

.blog-article{
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.blog-image{
  align-self: stretch;
  width: 100%;
  height: 200px;
  max-width: 100%;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), radial-gradient(600px 240px at 40% 20%, rgba(255,255,255,.12), transparent 60%);
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
  position: relative;
}

.blog-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.38), transparent 55%);
  pointer-events: none;
}

.blog-article-content{
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.blog-article-text{
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.blog-article-title{
  align-self: stretch;
  position: relative;
  margin: 0;
  font-size: 24px;
  line-height: 28px;
  color: #a99aff;
}

.blog-article-desc{
  align-self: stretch;
  position: relative;
  margin: 0;
  font-size: 16px;
  line-height: 20px;
  color: #c8c8d2;
  display: -webkit-box;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.blog-details-btn{
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  line-height: 100%;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.blog-details-btn:hover{
  opacity: 0.8;
}

.blog-details-btn svg{
  width: 24px;
  height: 24px;
}

.blog-nav{
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.blog-nav-btn{
  width: 48px;
  height: 48px;
  position: relative;
  padding: 0;
  border: none;
  border-radius: 24px;
  background-color: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.blog-nav-btn:hover{
  transform: translateY(-1px);
}

.blog-nav-btn:active{
  transform: translateY(0);
}

.blog-nav-btn svg{
  width: 48px;
  height: 48px;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Адаптивность */
@media (max-width: 1600px){
  .faq-left{
    width: 100%;
    max-width: 925px;
  }
  
  .blog-column{
    width: 100%;
    max-width: 655px;
  }
}

@media (max-width: 1200px){
  .faqblog{
    flex-direction: column;
    align-items: stretch;
  }
  
  .faq-left{
    width: 100%;
  }
  
  .blog-column{
    width: 100%;
    height: auto;
  }
  
  .blog-wrapp{
    height: auto;
  }
}

@media (max-width: 768px){
  .faq-wrapp{
    padding: 24px;
    gap: 12px;
  }
  
  .faq-number{
    font-size: 16px;
  }
  
  .faq-headline{
    font-size: 18px;
    line-height: 22px;
  }
  
  .faq-answer p{
    font-size: 14px;
    line-height: 18px;
  }
  
  .faq-cta-wrapp{
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
  }
  
  .btn-faq-cta{
    width: 100%;
  }
  
  .blog-wrapp{
    padding: 24px;
    gap: 24px;
  }
  
  .blog-headline{
    font-size: 32px;
    line-height: 38px;
  }
  
  .blog-subtext{
    font-size: 16px;
    line-height: 20px;
  }
  
  .blog-article-title{
    font-size: 20px;
    line-height: 24px;
  }
}

/* === CONTACTS SECTION (Figma Design) === */
.contact {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
}

.contact .top {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 50px;

}

.contact .headline {
  align-self: stretch;
  position: relative;
  margin: 0;
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
  color: #fff;
}

.contact .sub-text {
  align-self: stretch;
  position: relative;
  font-size: 20px;
  line-height: 24px;
  color: #c8c8d2;
}

.contact .data {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  gap: 20px;
}

/* Left Form Block */
.wrapp-left {
  flex: 0 0 calc((100% - 20px) / 3);
  min-width: 0;
  border-radius: 32px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 30px;
  gap: 40px;
}

.wrapp-left .top2 {
  align-self: stretch;
  display: flex;
  align-items: center;
}

.wrapp-left .headline2 {
  position: relative;
  margin: 0;
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  color: #fff;
}

.wrapp-left .data2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.wrapp-left .top3 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* Input Fields */
.contact .input,
.contact .textarea,
.consultation-popup .input,
.consultation-popup .textarea {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.contact .wrapp,
.contact .wrapp2,
.consultation-popup .wrapp,
.consultation-popup .wrapp2 {
  align-self: stretch;
  border-radius: 20px;
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.contact .left,
.consultation-popup .left {
  align-self: stretch;
  width: 16px;
  border-radius: 12px 0px 0px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0px 12px 12px;
}

.contact .left4,
.consultation-popup .left4 {
  align-self: stretch;
  width: 16px;
  border-radius: 12px 0px 0px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0px 16px 12px;
}

.contact .data3,
.consultation-popup .data3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact .label,
.consultation-popup .label {
  align-self: stretch;
  height: 12px;
  display: flex;
  align-items: flex-end;
}

.contact .label-container,
.consultation-popup .label-container {
  align-self: stretch;
  height: 16px;
  display: flex;
  align-items: flex-end;
}

.contact .label2,
.consultation-popup .label2 {
  height: 20px;
  display: flex;
  align-items: flex-start;
  padding: 0px 4px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.contact .label7,
.consultation-popup .label7 {
  height: 24px;
  display: flex;
  align-items: flex-start;
  padding: 0px 4px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.contact .div,
.consultation-popup .div {
  position: relative;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: #c8c8d2;
}

.contact .padding,
.consultation-popup .padding {
  height: 12px;
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.contact .padding4,
.consultation-popup .padding4 {
  height: 16px;
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.contact .place,
.contact .place3,
.consultation-popup .place,
.consultation-popup .place3 {
  align-self: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0px 0px 12px 4px;
}

.contact .place input,
.contact .place3 input,
.consultation-popup .place input,
.consultation-popup .place3 input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  font-family: 'Vela Sans', sans-serif;
}

.contact .place input::placeholder,
.contact .place3 input::placeholder,
.consultation-popup .place input::placeholder,
.consultation-popup .place3 input::placeholder {
  color: #70707c;
  opacity: 0.6;
}

.contact .input4,
.consultation-popup .input4 {
  align-self: stretch;
  min-height: 96px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0px 0px 12px 4px;
}

.contact .input4 textarea,
.consultation-popup .input4 textarea {
  width: 100%;
  min-height: 80px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  font-family: 'Vela Sans', sans-serif;
  resize: vertical;
}

.contact .input4 textarea::placeholder,
.consultation-popup .input4 textarea::placeholder {
  color: #fff;
  opacity: 0.4;
}

.contact .right,
.consultation-popup .right {
  align-self: stretch;
  width: 16px;
  border-radius: 0px 12px 12px 0px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0px 12px 12px;
}

.contact .right4,
.consultation-popup .right4 {
  align-self: stretch;
  width: 16px;
  border-radius: 0px 12px 12px 0px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0px 16px 12px;
}

/* Checkboxes */
.contact .bot,
.consultation-popup .bot {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.contact .check,
.contact .check2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact .check2 {
  align-self: stretch;
}

.contact .wrapp5 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.contact .wrapp6 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}

.contact .left5 {
  display: flex;
  align-items: flex-start;
}

.contact .checkbox-input {
  height: 18px;
  width: 18px;
  position: relative;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact .checkbox-input::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 5px;
  border-left: 2px solid #a99aff;
  border-bottom: 2px solid #a99aff;
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.contact .checkbox-input.is-checked {
  border-color: rgba(169, 154, 255, 0.6);
  background: rgba(127, 107, 255, 0.15);
}

.contact .checkbox-input.is-checked::after {
  opacity: 1;
}

.contact .checkbox-input.is-error {
  border-color: #ff4444;
  background: rgba(255, 68, 68, 0.08);
}

.contact .checkbox-input input[type="checkbox"] {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.contact .checkbox-input input[type="checkbox"]:focus-visible {
  outline: none;
}

.contact .right5,
.contact .right6 {
  display: flex;
  align-items: center;
  min-width: 0;
}

.contact .right6 {
  flex: 1;
}

.contact .title,
.contact .infomaybesmartru {
  position: relative;
  font-size: 16px;
  line-height: 20px;
  color: #c8c8d2;
  cursor: pointer;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.contact .infomaybesmartru .span {
  font-weight: 500;
  color: #fff;
}

/* Submit Button */
.contact .component-2 {
  align-self: stretch;
  height: 48px;
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.5) inset, 0px 0px 20px rgba(127, 107, 255, 0.5) inset;
  backdrop-filter: blur(70px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(127, 107, 255, 0.6), rgba(85, 72, 170, 0.6));
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact .component-2:hover {
  transform: translateY(-2px);
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.6) inset, 0px 0px 30px rgba(127, 107, 255, 0.6) inset;
}

.contact .component-2:active {
  transform: translateY(0);
}

.contact .button {
  position: relative;
  font-size: 16px;
  line-height: 100%;
  font-weight: 500;
  color: #fff;
}

/* Right Info Block */
.bot2 {
  flex: 0 0 calc((100% - 20px) * 2 / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.contact-info-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.contact-info-item {
  width: 100%;
  border-radius: 32px;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-info-item-large {
  flex: 1 1 auto;
}

.contact-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}

.contact-info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-info-title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  color: #fff;
}

.contact-info-text {
  font-size: 16px;
  line-height: 20px;
  color: #c8c8d2;
}

.contact-info-schedule {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.schedule-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  line-height: 20px;
  color: #c8c8d2;
}

.contact-info-note {
  font-size: 20px;
  padding-top: 20px;
  color: #c8c8d2;
}

/* =================================================================
   NEWS SUBSCRIPTION SECTION
   ================================================================= */

.news-section {
  width: 100%;
  background-image: url('images/news.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  padding: 120px 0;
}

.news-modal-container {
  display: flex;
  justify-content: center;
}

.news-modal {
  width: 520px;
  max-width: 100%;
  box-shadow: 0px 30px 70px rgba(66, 66, 66, 0.3) inset, 
              30px 30px 100px rgba(0, 0, 0, 0.2), 
              0px 0px 20px rgba(69, 69, 69, 0.2) inset;
  backdrop-filter: blur(20px);
  border-radius: 32px;
  background-color: rgba(24, 24, 34, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px;
}

.news-wrapp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.news-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.news-headline {
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.news-subtext {
  font-size: 16px;
  line-height: 20px;
  color: #c8c8d2;
}

/* News Form */
.news-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* News Input (Email field) */
.news-input {
  width: 100%;
  border-radius: 20px;
}

.news-input-wrapp {
  display: flex;
  align-items: flex-start;
  border-radius: 12px;
}

.news-input-left {
  align-self: stretch;
  width: 16px;
  border-radius: 12px 0 0 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 0 12px 12px;
}

.news-input-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-input-label {
  height: 12px;
  display: flex;
  align-items: flex-end;
}

.news-input-label-text {
  height: 20px;
  display: flex;
  align-items: flex-start;
  padding: 0 4px;
}

.news-input-label-title {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: #c8c8d2;
}

.news-input-label-line {
  height: 12px;
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.news-input-field {
  height: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0 0 12px 4px;
}

.news-input-field input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  font-family: 'Vela Sans', sans-serif;
}

.news-input-field input::placeholder {
  color: rgba(200, 200, 210, 0.4);
}

.news-input-right {
  align-self: stretch;
  width: 16px;
  border-radius: 0 12px 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px 0 12px 12px;
}

/* News Checkboxes */
.news-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

.news-checkbox input[type="checkbox"] {
  display: none;
}

.news-checkbox-box {
  min-width: 18px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
}

.news-checkbox input[type="checkbox"]:checked + .news-checkbox-box {
  background: linear-gradient(135deg, #7f6bff, #5548aa);
  border-color: #7f6bff;
}

.news-checkbox input[type="checkbox"]:checked + .news-checkbox-box::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  top: 2px;
}

.news-checkbox-text {
  flex: 1;
  font-size: 16px;
  line-height: 20px;
  color: #c8c8d2;
}

.news-checkbox-link {
  font-weight: 500;
  color: #fff;
  text-decoration: underline;
  cursor: pointer;
}

/* News Submit Button */
.news-submit {
  width: 100%;
  height: 48px;
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.5) inset,
              0px 0px 20px rgba(127, 107, 255, 0.5) inset;
  backdrop-filter: blur(70px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(127, 107, 255, 0.6), rgba(85, 72, 170, 0.6));
  border: none;
  padding: 16px 48px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.news-submit:hover {
  transform: translateY(-2px);
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.7) inset,
              0px 0px 25px rgba(127, 107, 255, 0.7) inset,
              0px 5px 20px rgba(127, 107, 255, 0.3);
}

.news-submit-text {
  font-size: 16px;
  line-height: 100%;
  font-weight: 500;
  color: #fff;
}

/* News Social */
.news-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.news-social-title {
  font-size: 16px;
  line-height: 20px;
  color: #c8c8d2;
}

.news-social-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-social-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8c8d2;
  transition: color 0.2s ease;
  text-decoration: none;
}

.news-social-icon:hover {
  color: #7f6bff;
}

/* News Responsive */
@media (max-width: 768px) {
  .news-section {
    padding: 80px 20px;
  }
  
  .news-modal {
    width: 100%;
    padding: 24px;
  }
  
  .news-wrapp {
    gap: 30px;
  }
  
  .news-headline {
    font-size: 20px;
    line-height: 24px;
  }
  
  .news-subtext {
    font-size: 14px;
    line-height: 18px;
  }
}

/* Contacts Responsive */
@media (max-width: 1200px) {
  .contact .data {
    flex-direction: column;
  }
  
  .wrapp-left,
  .bot2 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .contact {
    gap: 32px;
  }
  
  .contact .headline {
    font-size: 32px;
    line-height: 38px;
  }
  
  .contact .sub-text {
    font-size: 18px;
    line-height: 22px;
  }
  
  .wrapp-left {
    padding: 24px;
    gap: 24px;
  }
  
  .wrapp7,
  .wrapp10 {
    padding: 24px;
  }
}

/* Footer */
footer {
  width: 100%;
  position: relative;
  background-color: #1b1638;
  padding: 0;
}

.footer {
  width: 1600px;
  max-width: 85%;
  margin: 0 auto;
  position: relative;
  min-height: 469px;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
}

.footer-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 12px;
  color: #c8c8d2;
  font-weight: 700;
}

.footer-columns {
  position: absolute;
  top: 79px;
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: 121px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
}

.footer-col:nth-child(1) {
  width: auto;
}

.footer-col:nth-child(2) {
  width: auto;
}

.footer-col-wide {
  width: auto;
}

.footer-title {
  align-self: stretch;
  position: relative;
  line-height: 24px;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}

.footer-links {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-link {
  align-self: stretch;
  position: relative;
  line-height: 20px;
  font-size: 16px;
  color: #c8c8d2;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #fff;
}

.footer-contact {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer-contact-list {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-contact-item {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.footer-contact-text {
  flex: 1;
  position: relative;
  line-height: 20px;
  font-size: 16px;
  color: #c8c8d2;
  font-weight: 400;
}

.footer-start {
  position: absolute;
  top: 32px;
  left: 0;
  width: 385px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;
}

.footer-start-content {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.footer-start-top {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer-logo {
  width: 130px;
  max-height: 100%;
  object-fit: cover;
}

.footer-start-text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.footer-start-subtitle {
  align-self: stretch;
  position: relative;
  font-size: 14px;
  line-height: 16px;
  color: #c8c8d2;
  font-weight: 700;
}

.footer-buttons {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
}

.footer-btn {
  width: 100%;
  height: 56px;
  padding: 20px 64px;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(127, 107, 255, 0.6), rgba(85, 72, 170, 0.6));
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.5) inset, 0px 0px 20px rgba(127, 107, 255, 0.5) inset;

  color: #ffffff !important;
  border-radius: 16px !important;
  border-color: transparent !important;
  font-size: 20px !important;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease;
  white-space: nowrap;
}

.footer-btn:hover {
  color: #ffffff !important;
  background: linear-gradient(90deg, #7F6BFF 0%, #5548AA 100%) !important;
  transform: translateY(-1px) !important;
}

.footer-btn:active {
  transform: translateY(0) !important;
}

.footer-start-bottom {
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Privacy policy link (inline button style) */
.privacy-policy-link{
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  color:#a99aff;
  text-decoration:underline;
  cursor:pointer;
  font:inherit;
}
.privacy-policy-link:hover{color:#c6bbff;}
.privacy-policy-link:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.20), 0 0 0 1px rgba(255,255,255,.30) inset; border-radius:6px;}



/* Modal - переопределение Bootstrap .modal */
.modal{
  position:fixed !important; 
  inset:0 !important; 
  background:rgba(0,0,0,.55) !important; 
  display:none !important; 
  align-items:center !important; 
  justify-content:center !important; 
  z-index:1055 !important; 
  padding:18px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}
.modal[aria-hidden="false"]{display:flex !important;}

/* Hide old modal when thank you popup is active */
.thankyou-popup[aria-hidden="false"] ~ .modal {
  display:none !important;
}

.modal .box{
  width:min(420px, 100%); 
  border-radius:18px !important; 
  border:1px solid rgba(255,255,255,.14) !important; 
  background: radial-gradient(700px 240px at 50% 0%, rgba(255,255,255,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)) !important; 
  background-color:#15171c !important; 
  box-shadow: 0 30px 90px rgba(0,0,0,.65) !important; 
  padding:18px !important; 
  display:grid; 
  gap:10px; 
  transform:translateY(8px); 
  animation:pop .18s ease-out forwards;
  position:relative !important;
}
@keyframes pop{to{transform:translateY(0px)}}
.modal .box .ok{display:flex; gap:10px; align-items:center; justify-content:flex-start; padding:10px 12px; border-radius:14px; border:1px solid rgba(53,208,127,.22); background:rgba(53,208,127,.08); color:rgba(238,240,246,.92); font-size:13px}
.modal .box .ok i{width:26px; height:26px; border-radius:10px; display:grid; place-items:center; background:rgba(53,208,127,.18); border:1px solid rgba(53,208,127,.24)}
.modal .box .actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px}

/* Отключаем Bootstrap модальные стили которые конфликтуют */
.modal.show{display:flex !important;}
.modal-backdrop{display:none !important;}

/* Privacy policy popup */
.privacy-popup{
  position:fixed;
  inset:0;
  z-index:10050;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:6vh 20px 24px;
  overflow:auto;
}
.privacy-popup[aria-hidden="false"]{display:flex;}
.privacy-popup-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
}
.privacy-popup-content{
  position:relative;
  width:min(920px, 100%);
  max-height:88vh;
  background:#15171c;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.news-input-wrapp.is-error .news-input-left,
.news-input-wrapp.is-error .news-input-right,
.news-input-wrapp.is-error .news-input-label-line,
.news-input-wrapp.is-error .news-input-field{
  border-color:#ff4444;
}

.news-checkbox.is-error .news-checkbox-box{
  border-color:#ff4444;
  box-shadow:0 0 0 2px rgba(255,68,68,.18);
}

.news-checkbox.is-error .news-checkbox-text{
  color:#ffb3b3;
}

.news-checkbox input[type="checkbox"][aria-invalid="true"] + .news-checkbox-box{
  border-color:#ff4444;
  box-shadow:0 0 0 2px rgba(255,68,68,.18);
}

.news-checkbox input[type="checkbox"][aria-invalid="true"] ~ .news-checkbox-text{
  color:#ffb3b3;
}

.privacy-popup-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.privacy-popup-title{
  margin:0;
  font-size:22px;
  line-height:28px;
  font-weight:600;
  color:#fff;
}
.privacy-popup-close{
  width:28px;
  height:28px;
  padding:0;
  background:none;
  border:none;
  color:#fff;
  opacity:.75;
  cursor:pointer;
}
.privacy-popup-close:hover{opacity:1;}
.privacy-popup-body{
  padding:18px;
  overflow:auto;
  color:rgba(238,240,246,.86);
  font-size:14px;
  line-height:1.5;
}
.privacy-popup-body h4{
  margin:16px 0 8px;
  font-size:16px;
  line-height:20px;
  color:#fff;
}
.privacy-popup-body p{margin:0 0 10px;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important; scroll-behavior:auto !important}}

/* Calculator responsive */
@media (max-width: 1640px){
  .cost{flex-direction: column;}
  .cost .left{width: 100%; max-width: 100%;}
  .cost .right11{width: 100%; max-width: 100%;}
}

@media (max-width: 1040px){
  .cost .wrapp2{flex-direction: column; gap: 16px;}
  .cost .left{padding: 24px;}
  .cost .right11{padding: 24px; gap: 40px;}
  .cost .headline{font-size: 32px; line-height: 40px;}
  .cost .frame-parent{gap: 32px;}
  .cost .item-parent{gap: 24px;}
}

@media (max-width: 640px){
  .cost .choice{flex-direction: column;}
  .cost .choicebox, .cost .choicebox2{width: 100%;}
  .cost .segment{flex-direction: row; flex-wrap:nowrap; padding: 4px; overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .cost .segment .label{white-space:nowrap;}
  .cost .control, .cost .control2{padding: 10px 8px;}
  .cost .left{padding: 20px; gap: 32px;}
  .cost .right11{padding: 20px; gap: 32px;}
  .cost .headline{font-size: 28px; line-height: 36px;}
  .cost .headline2{font-size: 20px; line-height: 24px;}
  .cost .headline3{font-size: 20px; line-height: 24px;}
  .cost .frame-parent{gap: 28px;}
}

/* ============================================
   CONSULTATION POPUP FORM
   ============================================ */

.consultation-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  align-items: flex-start !important;
  justify-content: center;
  padding: 6vh 20px 20px !important;
  font-family: 'VelaSans', sans-serif;
}

.consultation-popup[aria-hidden="false"] {
  display: flex;
}

.consultation-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(6px) !important;
}

.consultation-popup-content {
  position: relative;
  display: flex;
  max-width: 1310px;
  width: 100%;
  max-height: 90vh;
  border-radius: 32px;
  overflow: hidden;
  background: #18181f;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  margin-top: 0;
}

.consultation-popup-image {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.consultation-popup-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.consultation-popup-form-wrapper {
  width: 520px;
  min-width: 520px;
  max-height: 90vh;
  border-radius: 0px 32px 32px 0px;
  background: radial-gradient(150.21% 60.54% at 0.92% 0%, rgba(255, 255, 255, 0.16), rgba(127, 107, 255, 0.16) 12.5%, rgba(64, 54, 128, 0.27) 25%, rgba(48, 40, 96, 0.3) 37.5%, rgba(32, 27, 64, 0.33) 50%, rgba(24, 20, 48, 0.35) 62.5%, rgba(16, 13, 32, 0.37) 75%, rgba(17, 16, 28, 0.38) 87.5%, rgba(18, 18, 24, 0.4)), linear-gradient(#18181f, #18181f);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  box-sizing: border-box;
  gap: 40px;
  overflow-y: auto;
}

.consultation-popup-header {
  width: 456px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
}

.consultation-popup-title {
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.consultation-popup-close {
  height: 24px;
  width: 24px;
  padding: 0;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.consultation-popup-close:hover {
  opacity: 1;
}

.consultation-popup-form {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex-shrink: 0;
}

.consultation-popup-form .top3 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.consultation-datetime-row {
  width: 100%;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.consultation-datetime-row .textarea {
  flex: 1;
}

.consultation-popup-form .bot {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.consultation-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.consultation-checkbox-input {
  height: 18px;
  width: 18px;
  border-radius: 4px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  position: relative;
  flex-shrink: 0;
}

.consultation-checkbox-input:checked {
  background-color: #a99aff;
  border-color: #a99aff;
}

.consultation-checkbox-input:checked::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 8px;
  border: solid #000000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  top: 2px;
}

.consultation-checkbox-label {
  font-size: 16px;
  line-height: 20px;
  color: #c8c8d2;
  text-align: left;
  cursor: pointer;
}

.consultation-checkbox-wrapper.is-error .consultation-checkbox-input{
  border-color:#ff4444;
  box-shadow:0 0 0 2px rgba(255,68,68,.18);
}

.consultation-checkbox-wrapper.is-error .consultation-checkbox-label{
  color:#ffb3b3;
}

.consultation-privacy-link {
  font-weight: 500;
  color: #fff;
}

.consultation-submit-btn {
  align-self: stretch;
  height: 48px;
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.5) inset, 0px 0px 20px rgba(127, 107, 255, 0.5) inset;
  backdrop-filter: blur(70px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(127, 107, 255, 0.6), rgba(85, 72, 170, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px;
  box-sizing: border-box;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.consultation-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.6) inset, 
              0px 0px 25px rgba(127, 107, 255, 0.6) inset;
}

.consultation-submit-btn:active {
  transform: translateY(0);
}

.consultation-submit-text {
  font-size: 16px;
  line-height: 100%;
  font-weight: 500;
  color: #fff;
}

.consultation-socials {

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-shrink: 0;
}

.consultation-socials-title {
  font-size: 16px;
  line-height: 20px;
  color: #fff;
  text-align: center;
}

.consultation-socials-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.consultation-socials-icons a {

  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}

.consultation-socials-icons a:hover {
  color: rgba(255, 255, 255, 1);
}

@media (min-width: 1201px) {
  .consultation-popup {
    align-items: center !important;
    padding: 20px !important;
    overflow-y: auto;
  }

  .consultation-popup-content {
    max-height: none;
    margin: 20px auto;
  }

  .consultation-popup-form-wrapper {
    max-height: none;
    overflow: visible;
  }

  .consultation-popup-form {
    gap: 20px;
  }
}

/* Responsive для popup */
@media (max-width: 1200px) {
  .consultation-popup-content {
    flex-direction: column;
    max-height: 85vh;
  }
  
  .consultation-popup-image {
    width: 100%;
    min-width: 100%;
    height: 200px;
    flex-shrink: 0;
  }
  
  .consultation-popup-form-wrapper {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  
  .consultation-popup-header {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .consultation-popup-content {
    border-radius: 20px;
  }
  
  .consultation-popup-image {
    height: 150px;
  }
  
  .consultation-popup-form-wrapper {
    padding: 24px;
    gap: 24px;
  }
  
  .consultation-popup-title {
    font-size: 20px;
  }
}

@media (max-width: 520px) {
  .consultation-popup {
    padding: 0;
    align-items: stretch;
  }
  .consultation-popup-content {
    max-height: 100vh;
    
    border-radius: 20px;
    overflow-y: auto;
    margin-top: 0;
  }
  .consultation-popup-image{
    display:none;
  }
  .consultation-popup-form-wrapper {
    max-height: none;
    height: auto;
    width: 100%;
    min-width: 0;
    padding: 16px;
    box-sizing: border-box;
  }
  .consultation-popup-form{
    width:100%;
  }
}

/* Thank You Popup Styles */
.thankyou-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.thankyou-popup[aria-hidden="false"] {
  opacity: 1;
  pointer-events: all;
}

.thankyou-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.thankyou-popup-content {
  position: relative;
  z-index: 1;
  
  width: 90%;
  max-width: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thankyou-popup .wrapp-left {
  width: 100%;
  flex: 1 1 100%;
  max-width: 100%;
  position: relative;
  border-radius: 32px;
  background: radial-gradient(150.21% 60.54% at 0.92% 0%, rgba(255, 255, 255, 0.16), rgba(127, 107, 255, 0.16) 12.5%, rgba(64, 54, 128, 0.27) 25%, rgba(48, 40, 96, 0.3) 37.5%, rgba(32, 27, 64, 0.33) 50%, rgba(24, 20, 48, 0.35) 62.5%, rgba(16, 13, 32, 0.37) 75%, rgba(17, 16, 28, 0.38) 87.5%, rgba(18, 18, 24, 0.4)), linear-gradient(#18181f, #18181f);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  box-sizing: border-box;
  gap: 24px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  font-family: 'VelaSans';
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.thankyou-popup .top-parent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 24px;
}

.thankyou-popup .top {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thankyou-popup .headline {
  position: relative;
  line-height: 28px;
  font-weight: 500;
  text-align: center;
}

.thankyou-popup .div {
  position: relative;
  font-size: 20px;
  line-height: 24px;
  color: #c8c8d2;
  text-align: center;
}

.thankyou-popup .component-2 {
  width: 100%;
  max-width: 390px;
  height: 48px;
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.5) inset, 0px 0px 20px rgba(127, 107, 255, 0.5) inset;
  backdrop-filter: blur(70px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(127, 107, 255, 0.6), rgba(85, 72, 170, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 48px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
}

.thankyou-popup .component-2:hover {
  transform: translateY(-2px);
  box-shadow: 30px 0px 70px rgba(127, 107, 255, 0.6) inset, 0px 0px 30px rgba(127, 107, 255, 0.6) inset;
}

.thankyou-popup .component-2:active {
  transform: translateY(0);
}

.thankyou-popup .button {
  position: relative;
  line-height: 100%;
  font-weight: 500;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.thankyou-popup .bot {
  width: 100%;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.thankyou-popup .row-1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.thankyou-popup .sub-text {
  position: relative;
  line-height: 20px;
}

.thankyou-popup .row-2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.thankyou-popup .brand-telegram-icon {

  position: relative;
}

@media (max-width: 640px) {
  .thankyou-popup-content {
    width: 95%;
  }
  
  .thankyou-popup .wrapp-left {
    padding: 24px;
    border-radius: 20px;
  }
  
  .thankyou-popup .headline {
    font-size: 20px;
    line-height: 24px;
  }
  
  .thankyou-popup .div {
    font-size: 16px;
    line-height: 20px;
  }
  
  .thankyou-popup .component-2 {
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* Responsive */
@media (max-width: 1040px){.wrap{width:100%; max-width:none; padding:0 20px} .chooser{grid-template-columns: 1fr} .projects{grid-template-columns:1fr} .how{grid-template-columns:1fr} .calc{grid-template-columns:1fr} .reviews{grid-template-columns:1fr} .faqblog{flex-direction:column} .contacts{grid-template-columns:1fr} .kpis{grid-template-columns: repeat(2,1fr)} .plans{grid-template-columns:1fr} .incl{grid-template-columns:1fr} .nav-right{position:static; transform:none} .how-system-header{flex-direction:column; align-items:flex-start} .label-left, .label-right{max-width:240px; padding:12px 16px} .label-left{left:20px; bottom:20px} .label-right{right:20px; bottom:20px} .footer{min-height:auto} .footer-start{position:static; width:100%; margin-bottom:40px} .footer-columns{position:static; flex-direction:column; gap:40px; margin-bottom:40px} .footer-caption{position:static; transform:none; margin-top:20px; text-align:center; left:auto}}
@media (max-width: 1040px){
  .benefits-list{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 860px){nav ul{display:none} .burger{display:flex} .mnav{display:none} .mnav.open{display:block} .brand{min-width:auto} .phone{display:none} .hero-card{padding:22px} .comparison-slider-wrapper{min-height:400px} .comparison-slider{height:400px} .label-left, .label-right{max-width:250px; font-size:12px} .label-title{font-size:14px; margin-bottom:6px} .label-list div{font-size:11px}}
@media (max-width: 520px){.wrap{padding:0 14px} .hero{padding:22px 0 18px} .hero-card{border-radius:18px} .card{border-radius:18px} .kpis{grid-template-columns:1fr 1fr} .calc .cols{grid-template-columns:1fr} .comparison-slider-wrapper{min-height:350px} .comparison-slider{height:350px} .label-left{left:12px; bottom:12px} .label-right{right:12px; bottom:12px} .label-left, .label-right{max-width:170px; padding:10px 12px} .label-title{font-size:12px; margin-bottom:4px} .label-list{gap:2px} .label-list div{font-size:10px}}
@media (max-width: 520px){
  .benefits-list{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .footer{
    max-width:none;
    width:100%;
    padding:32px 14px;
  }

  .footer-columns{
    position:static;
    display:grid;
    grid-template-columns:minmax(0, 70fr) minmax(0, 90fr) minmax(0, 136fr);
    align-items:start;
    gap:16px;
    width:100%;
  }

  .footer-col{
    width:100%;
    min-width:0;
  }

  .news-section{
    padding:80px 0;
  }

  .news-submit,
  .footer-btn{
    height:48px;
    padding:16px 48px;
    border-radius:16px;
    background:linear-gradient(180deg, rgba(127, 107, 255, 0.6), rgba(85, 72, 170, 0.6));
    box-shadow:30px 0px 70px rgba(127, 107, 255, 0.5) inset, 0px 0px 20px rgba(127, 107, 255, 0.5) inset;
    backdrop-filter:blur(70px);
    border:none;
    font-size:16px;
    font-weight:500;
    line-height:100%;
    color:#fff;
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }

  .news-submit:hover,
  .footer-btn:hover{
    transform:translateY(-2px);
    box-shadow:30px 0px 70px rgba(127, 107, 255, 0.6) inset, 0px 0px 30px rgba(127, 107, 255, 0.6) inset;
  }

  .news-submit:active,
  .footer-btn:active{
    transform:translateY(0);
  }

  .footer-start-top{
    gap:16px;
  }

  .footer-start-text{
    gap:8px;
  }

  .footer-start-content{
    gap:16px;
  }

  .footer-buttons{
    gap:10px;
  }

  .footer-start{
    gap:16px;
    margin-bottom:30px;
  }

  .footer-col{
    gap:16px;
  }
}