:root{
  --violet:#6f54ea;
  --violet-dark:#5038c6;
  --violet-soft:#d8d0fb;
  --cream:#f5f4f1;
  --cream2:#fafaf8;
  --soft:#ececf2;
  --dark:#1c1b23;
  --muted:#6f6c7a;
  --white:#fff;
  --radius:26px;
  --shadow:0 10px 28px rgba(45,36,82,.06);
  --services-overlap-progress:0
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'M PLUS Rounded 1c',sans-serif;
  background:linear-gradient(180deg,#f8f7f4 0%,#fbfbfa 54%,#fff 100%);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 7vw;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid #efedf6;
  transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease
}
.site-header.header-scrolled{
  background:rgba(255,255,255,.9);
  border-bottom-color:#e7e3f3;
  box-shadow:0 8px 20px rgba(31,21,70,.06)
}
.logo{
  display:inline-flex;
  align-items:center;
  line-height:1
}
.logo img{
  width:138px;
  height:auto;
  display:block
}
nav{display:flex;gap:34px;font-size:14px;font-weight:700;color:#383448}
.site-header nav a{opacity:.82}
.site-header nav a:hover{opacity:1;color:var(--violet-dark)}
.site-header nav .menu-cta{display:none}
.menu-toggle{display:none}
.menu-backdrop{display:none}
.header-cta{display:inline-flex}
.menu-toggle{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #ddd7ef;
  background:#fff;
  color:#4e37bf;
  padding:0;
  cursor:pointer
}
.menu-toggle span{
  display:block;
  width:18px;
  height:2px;
  margin:4px auto;
  border-radius:99px;
  background:currentColor;
  transition:transform .25s ease,opacity .2s ease
}
body.mobile-menu-open{overflow:hidden}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  padding:15px 24px;
  font-weight:900;
  border:1px solid transparent;
  transition:.22s ease;
  line-height:1;
  white-space:nowrap
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--violet),#6046df);
  background-size:200% 200%;
  color:white;
  box-shadow:0 8px 20px rgba(82,61,190,.18);
  animation:btnGradient 6s ease infinite
}
.btn-ghost{
  border-color:#d9d3ef;
  color:#4e37bf;
  background:rgba(255,255,255,.88)
}
.btn-light{
  background:white;
  color:#4e37bf;
  box-shadow:0 8px 20px rgba(30,22,70,.11)
}

.section{margin:0 7vw;padding:70px 0}
.hero{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  min-height:560px;
  align-items:center;
  border-radius:0 0 var(--radius) var(--radius);
  position:relative;
  z-index:1;
  transform-origin:50% 0%;
  transform:scale(calc(1 - var(--services-overlap-progress) * .08));
  opacity:calc(1 - var(--services-overlap-progress) * .16);
  transition:transform .12s linear,opacity .12s linear
}
h1,h2,h3,h4{font-family:'M PLUS Rounded 1c',sans-serif;font-weight:800}
h1{font-size:76px;line-height:.95;margin:0 0 26px;letter-spacing:-3px;font-weight:900}
h2{font-size:42px;line-height:1.08;margin:0 0 22px;letter-spacing:-1.5px;font-weight:800}
h3{font-size:21px;margin:14px 0 10px;line-height:1.15;font-weight:800}
p{font-size:18px;line-height:1.65;color:var(--muted);font-weight:500}
.hero p{max-width:580px}
.actions{display:flex;gap:16px;margin-top:34px}

.mascot-card{position:relative;display:grid;place-items:center;min-height:430px}
.mascot-card:before{
  content:"";
  position:absolute;
  inset:10% 4% 5%;
  background:radial-gradient(circle,rgba(139,118,234,.18),transparent 64%);
  filter:blur(3px);
  z-index:-1
}
.mascot-img{width:min(680px,112%);filter:drop-shadow(0 20px 20px rgba(55,39,105,.13));animation:floaty 5s ease-in-out infinite}
.about-mascot{width:min(330px,100%);justify-self:center;filter:drop-shadow(0 14px 18px rgba(55,39,105,.10))}
.bubble{
  position:absolute;
  right:8%;
  top:10%;
  transform:rotate(7deg);
  background:#6a4ae6;
  color:white;
  border-radius:16px;
  padding:14px 22px;
  font-size:24px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(91,66,220,.2);
  z-index:2
}

.partners{
  display:flex;
  justify-content:space-around;
  gap:26px;
  margin:0 7vw;
  padding:24px 0 56px;
  color:#b8b4c4;
  font-size:24px;
  font-weight:900;
  transform:scale(calc(1 - var(--services-overlap-progress) * .03));
  opacity:calc(1 - var(--services-overlap-progress) * .12);
  transition:transform .12s linear,opacity .12s linear
}
.service-grid,.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:46px}
.service-card,.case-card,.contact-actions,.blog-card,.blog-visual{
  background:rgba(255,255,255,.9);
  border:1px solid #ece9f5;
  border-radius:24px;
  padding:30px;
  text-align:left;
  box-shadow:var(--shadow);
  transition:.22s ease
}
.service-card:hover,.case-card:hover,.blog-card:hover,.blog-visual:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(41,31,92,.1)
}
.services-section{
  background:linear-gradient(180deg,#fcfcfd 0%,#faf9ff 100%);
  border:1px solid #eeecf7;
  border-radius:30px;
  padding:42px 34px;
  margin-top:-130px;
  position:relative;
  z-index:3;
  transform:translateY(calc((1 - var(--services-overlap-progress)) * 130px));
  box-shadow:0 24px 46px rgba(31,20,78,.09)
}
.services-kicker{
  display:block;
  margin-bottom:8px;
  color:#8a82a6;
  letter-spacing:.08em;
  font-size:12px;
  font-weight:700
}
.services-section h2{margin-bottom:10px}
.services-intro{
  margin:0;
  max-width:560px;
  font-size:14px;
  line-height:1.5
}
.service-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:28px
}
.service-card{
  display:grid;
  grid-template-columns:1fr 190px;
  gap:14px;
  align-items:center;
  min-height:220px;
  padding:26px;
  background:#fff
}
.service-content{align-self:center}
.service-content h3{margin:0 0 12px}
.service-content p{
  margin:0 0 16px;
  max-width:290px
}
.service-content a{
  color:#5f42dc;
  font-weight:900
}
.icon{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:19px;
  background:linear-gradient(180deg,#f7f4ff,#efe9ff);
  color:#5f42dc;
  box-shadow:inset 0 0 0 1px rgba(123,97,255,.12)
}
.icon svg{width:38px}
.service-ill{
  align-self:center;
  justify-self:end;
  width:170px;
  aspect-ratio:1/1;
  border-radius:18px;
  background:linear-gradient(180deg,#fbfbff,#f2efff);
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px #ebe7f6
}
.service-ill img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  transition:transform .28s ease
}
.service-card:hover .service-ill img{
  transform:translateY(-3px) scale(1.02)
}

body.services-overlay-open{overflow:hidden}
.services-overlay{
  position:fixed;
  inset:0;
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease
}
.services-overlay.is-open{
  opacity:1;
  pointer-events:auto
}
.services-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(17,12,41,.46);
  backdrop-filter:blur(2px)
}
.services-overlay-card{
  position:absolute;
  left:20px;
  right:20px;
  top:50%;
  transform:translateY(calc(-50% + 20px)) scale(.98);
  background:#fff;
  border:1px solid #e7e1f5;
  border-radius:20px;
  box-shadow:0 20px 48px rgba(25,16,68,.26);
  padding:18px 16px 16px;
  transition:transform .34s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
  opacity:0
}
.services-overlay.is-open .services-overlay-card{
  transform:translateY(-50%) scale(1);
  opacity:1
}
.services-overlay-close{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid #dfd8f2;
  background:#fff;
  color:#4e37bf;
  font:inherit;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  display:grid;
  place-items:center
}
.services-overlay-title{
  margin:0 40px 10px 0;
  font-size:23px;
  line-height:1.2;
  letter-spacing:-.2px
}
.services-overlay-text{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.45;
  color:#5f5b6f
}
.services-overlay-image{
  width:min(280px,100%);
  aspect-ratio:1/1;
  object-fit:contain;
  margin:0 auto;
  border-radius:16px;
  background:linear-gradient(180deg,#fbfbff,#f2efff);
  border:1px solid #ebe7f6
}

.process{text-align:center}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.steps:before{content:"";position:absolute;left:10%;right:10%;top:28px;border-top:2px solid #e4e0f3}
.steps div{position:relative}
.steps b{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  margin:0 auto 18px;
  background:linear-gradient(135deg,#7b61ff,#4c31c9);
  color:white;
  border-radius:50%;
  box-shadow:0 8px 18px rgba(91,66,220,.2)
}
.steps p{font-size:15px}
.steps-dots{display:none}

.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:26px}
.case-grid{grid-template-columns:repeat(3,1fr)}
.case-preview{
  height:190px;
  border-radius:18px;
  background:linear-gradient(135deg,#f4f1ff,#e4dcff);
  margin-bottom:20px;
  position:relative;
  overflow:hidden
}
.case-preview:before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f1ecff);
  border:1px solid #dfd8f3
}
.case-card small,.about small,.section-head small,.blog-card small{color:#5f42dc;font-weight:900}
.case-card p{font-size:15px;color:#5f42dc;font-weight:900}

.about{display:grid;grid-template-columns:1.2fr .8fr;align-items:center}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.stats span{
  padding:22px;
  background:rgba(255,255,255,.9);
  border-radius:20px;
  border:1px solid #ece9f5;
  box-shadow:var(--shadow);
  font-weight:800;
  color:#534f5c
}
.stats b{display:block;color:#5f42dc;font-size:34px;line-height:1;font-weight:900}

.cases-section h2{margin-bottom:10px}
.cases-intro{
  max-width:560px;
  margin:0;
  font-size:16px;
  line-height:1.5
}
.cases-filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:24px 0 26px
}
.cases-filters button{
  border:1px solid #e5e0f3;
  background:#fff;
  color:#3f3a4f;
  border-radius:13px;
  padding:11px 18px;
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease,color .2s ease,border-color .2s ease,background .25s ease,box-shadow .25s ease
}
.cases-filters button:hover{
  border-color:#cdc4ee;
  color:#4e37bf;
  transform:translateY(-1px)
}
.cases-filters button:active{transform:translateY(0)}
.cases-filters .is-active{
  background:linear-gradient(135deg,#6e54ea,#5339cd);
  background-size:180% 180%;
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 18px rgba(91,66,220,.2);
  animation:casesFilterGlow 5s ease infinite
}
.cases-nav{
  display:flex;
  gap:8px;
  justify-content:center;
  margin:14px 0 2px
}
.cases-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:8px 0 0
}
.cases-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:0;
  background:#d8d2ed;
  padding:0;
  cursor:pointer;
  transition:transform .2s ease,background-color .2s ease,opacity .2s ease
}
.cases-dot.is-active{
  width:20px;
  border-radius:99px;
  background:#5e43da
}
.cases-dot:disabled{
  opacity:.35;
  cursor:default
}
.cases-nav-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid #d8d1ef;
  background:#fff;
  color:#4e37bf;
  font:inherit;
  font-size:18px;
  font-weight:800;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.2s ease
}
.cases-nav-btn:hover{
  background:#f5f2ff;
  border-color:#cfc4ef
}
.cases-nav-btn:disabled{
  opacity:.45;
  cursor:not-allowed
}
.cases-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scrollbar-width:none
}
.cases-grid::-webkit-scrollbar{display:none}
.case-item{
  background:#fff;
  border:1px solid #ece9f5;
  border-radius:24px;
  padding:26px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  flex:0 0 clamp(320px,31vw,420px);
  max-width:none;
  transition:transform .24s ease;
  scroll-snap-align:start
}
.case-item:hover{transform:translateY(-4px)}
.case-item small{
  display:block;
  margin:14px 0 8px;
  color:#5f42dc;
  font-weight:800
}
.case-item h3{
  margin:0 0 8px;
  font-size:21px;
  line-height:1.24;
  letter-spacing:-.2px
}
.case-result,.case-note{
  margin:0;
  font-size:16px;
  line-height:1.45
}
.case-result{color:#2e2b39;font-weight:700}
.case-note{margin-top:4px;color:#8a8698}
.case-actions{
  display:flex;
  margin-top:auto;
  padding-top:14px
}
.case-link{
  width:100%;
  justify-content:center
}
.case-thumb{
  position:relative;
  height:210px;
  border-radius:18px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#ece8f8;
  box-shadow:0 10px 30px rgba(23,19,45,.16);
  transition:transform .3s ease,box-shadow .3s ease
}
.case-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.16);
  transform-origin:center
}
.case-item:hover .case-thumb{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 16px 34px rgba(23,19,45,.22)
}
.case-thumb:before,.case-thumb:after{content:"";position:absolute}
.case-shine{
  position:absolute;
  inset:-40% auto -40% -55%;
  width:46%;
  transform:skewX(-20deg) translateX(-165%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:transform .7s ease;
  pointer-events:none
}
.case-item:hover .case-shine{transform:skewX(-20deg) translateX(430%)}
.case-thumb-one{background:linear-gradient(135deg,#1f2b3a,#141b26)}
.case-thumb-two{background:linear-gradient(135deg,#2e323a,#191b20)}
.case-thumb-three{background:linear-gradient(135deg,#202538,#101427)}
.case-thumb-four{background:linear-gradient(135deg,#172237,#4d2f19)}
.case-thumb-five{background:linear-gradient(135deg,#2b2f36,#1f2328)}
.case-thumb-six{background:linear-gradient(135deg,#f2f3f9,#e8eaf4)}
.case-thumb-one:before{left:14px;right:14px;top:20px;height:12px;border-radius:7px;background:#2e3e52}
.case-thumb-one:after{left:16px;right:16px;bottom:16px;height:70px;border-radius:12px;background:linear-gradient(180deg,#2d3b4d,#202b39)}
.case-thumb-two:before{left:18px;top:20px;width:58px;height:146px;border-radius:12px;background:#f2f5ff}
.case-thumb-two:after{right:20px;bottom:20px;width:128px;height:78px;border-radius:10px;background:#2f3338;box-shadow:0 -24px 0 #24272d inset}
.case-thumb-three:before{left:26px;top:24px;width:70px;height:118px;border-radius:10px;background:#f6f6ff}
.case-thumb-three:after{right:18px;bottom:22px;width:128px;height:74px;border-radius:10px;background:#f6f7fb}
.case-thumb-four:before{left:18px;top:22px;width:120px;height:68px;border-radius:10px;background:#203956}
.case-thumb-four:after{right:18px;bottom:18px;width:126px;height:80px;border-radius:10px;background:#2f3a47}
.case-thumb-five:before{left:22px;right:22px;top:24px;height:44px;border-radius:10px;background:#eceef5}
.case-thumb-five:after{left:22px;right:22px;bottom:20px;height:78px;border-radius:12px;background:#2e333a}
.case-thumb-six:before{left:12px;top:14px;width:calc(100% - 24px);height:calc(100% - 28px);border-radius:13px;background:#fff}
.case-thumb-six:after{left:26px;top:30px;width:82px;height:126px;border-radius:10px;background:linear-gradient(180deg,#f4f6fb,#ebedf6);box-shadow:98px 0 0 #f5f7fb}

.sale-sites h2{margin-bottom:10px}
.sale-intro{
  margin:0;
  max-width:620px;
  font-size:15px;
  line-height:1.5
}
.sale-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:26px;
  margin-top:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scrollbar-width:none
}
.sale-grid::-webkit-scrollbar{display:none}
.sale-card{
  background:#fff;
  border:1px solid #ece9f5;
  border-radius:24px;
  padding:26px;
  box-shadow:var(--shadow);
  flex:0 0 clamp(320px,31vw,420px);
  scroll-snap-align:start
}
.sale-card small{
  display:block;
  margin:14px 0 8px;
  color:#5f42dc;
  font-weight:800
}
.sale-card h3{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.05
}
.sale-result,.sale-note{
  margin:0;
  font-size:16px;
  line-height:1.45
}
.sale-result{color:#2e2b39;font-weight:700}
.sale-note{margin-top:4px;color:#8a8698}
.sale-thumb{
  display:grid;
  place-items:center;
  height:210px;
  border-radius:18px;
  border:1px solid #ece9f5;
  background:linear-gradient(135deg,#fff,#f6f2ff);
  overflow:hidden
}
.sale-nav{
  display:flex;
  gap:8px;
  justify-content:center;
  margin:14px 0 2px
}
.sale-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:8px 0 0
}
.sale-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.16);
  transform-origin:center
}
.sale-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px
}
.sale-actions .btn{
  width:100%;
  flex:1;
  justify-content:center;
  min-height:44px
}
.sale-link,.sale-buy-link{
  margin-top:0
}
.btn-buy{
  background:linear-gradient(135deg,#2fb96e,#229a58);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 20px rgba(36,153,91,.24)
}
.sale-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:0;
  background:#d8d2ed;
  padding:0;
  cursor:pointer;
  transition:transform .2s ease,background-color .2s ease,opacity .2s ease
}
.sale-dot.is-active{
  width:20px;
  border-radius:99px;
  background:#5e43da
}
.sale-dot:disabled{
  opacity:.35;
  cursor:default
}
.sale-nav-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid #d8d1ef;
  background:#fff;
  color:#4e37bf;
  font:inherit;
  font-size:18px;
  font-weight:800;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.2s ease
}
.sale-nav-btn:hover{
  background:#f5f2ff;
  border-color:#cfc4ef
}
.sale-nav-btn:disabled{
  opacity:.45;
  cursor:not-allowed
}

.blog-wrap{display:block}
.blog-card-wide{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:24px;
  align-items:center;
  padding:34px
}
.blog-main p{max-width:560px}
.blog-actions{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:14px;
  flex-wrap:wrap
}
.blog-channel-link{
  display:inline-flex;
  color:#5f42dc;
  font-weight:800
}
.blog-visual{
  display:grid;
  place-items:center;
  min-height:250px;
  background:linear-gradient(180deg,#f6f3ff,#fdfcff);
  border:1px solid #ece8f6;
  border-radius:22px
}
.blog-visual img{
  width:min(340px,100%);
  filter:drop-shadow(0 14px 18px rgba(55,39,105,.12))
}

.cta{
  position:relative;
  margin:50px 7vw;
  padding:45px 56px;
  border-radius:28px;
  background:linear-gradient(135deg,#7458ed,#5238cc);
  color:white;
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
  box-shadow:0 16px 44px rgba(91,66,220,.25)
}
.cta:after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-110px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  pointer-events:none
}
.cta h2,.cta p{color:white;position:relative}
.cta .btn{position:relative;z-index:1}

.contact{display:block}
.contact-panel{
  background:rgba(255,255,255,.9);
  border:1px solid #ece9f5;
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:28px 30px;
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(240px,380px) minmax(320px,1fr);
  align-items:center;
  gap:26px;
  overflow:hidden
}
.contact-panel > *{min-width:0}
.contact-info h2{margin-bottom:12px}
.contact-info p{
  margin:0 0 16px;
  max-width:340px
}
.contact-info{justify-self:start}
.contact-actions{
  justify-self:stretch;
  width:100%;
  min-width:0;
  display:grid;
  gap:12px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none
}
.contact-actions .btn{width:100%}
.btn-telegram{
  background:linear-gradient(135deg,#2aabee,#1f95d1);
  color:#fff;
  border-color:transparent;
  box-shadow:0 8px 20px rgba(44,147,209,.26)
}
.btn-telegram svg{
  width:16px;
  height:16px;
  fill:currentColor;
  margin-right:8px
}
.contact-links{
  display:grid;
  gap:9px
}
.contact-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#4e37bf;
  font-weight:700
}
.contact-item-icon{
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid #dcd5f2;
  display:grid;
  place-items:center;
  font-size:14px;
  color:#5d42da;
  background:#f8f5ff;
  flex:0 0 26px
}
.contact-item-icon svg{
  width:15px;
  height:15px;
  display:block;
  fill:currentColor
}
.tg-icon{
  background:#5b8df7;
  border-color:#5b8df7;
  color:#fff
}
.contact-mascot-wrap{
  display:grid;
  place-items:center;
  justify-self:center
}
.contact-mascot{
  width:min(340px,100%);
  filter:drop-shadow(0 10px 14px rgba(55,39,105,.12))
}
input,textarea{
  width:100%;
  padding:18px 20px;
  border:1px solid #ece8f4;
  border-radius:15px;
  font:inherit;
  font-weight:700;
  background:#fcfbff;
  outline:none;
  transition:.2s ease
}
.form-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none
}
.form-alert{
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  font-weight:700;
  margin:0 0 10px
}
.form-alert p{margin:0}
.form-alert p+p{margin-top:6px}
.form-alert-success{
  background:#e9f8ef;
  border:1px solid #bfe9cc;
  color:#207249
}
.form-alert-error{
  background:#fff0f3;
  border:1px solid #f4c4cf;
  color:#a2384d
}
.form-consent{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:2px 0 10px;
  font-size:13px;
  line-height:1.45;
  color:#5a5470
}
.form-consent input{
  width:16px;
  height:16px;
  margin-top:2px;
  padding:0;
  flex:0 0 16px
}
.form-consent input[type=checkbox]{
  appearance:auto;
  accent-color:#5f42dc;
  border:none;
  box-shadow:none;
  background:transparent
}
.form-consent a{
  color:#5f42dc;
  font-weight:700
}
input:focus,textarea:focus{
  border-color:#b9a9ff;
  box-shadow:0 0 0 4px rgba(123,97,255,.1);
  background:#fff
}
textarea{min-height:130px;resize:vertical}

footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:42px 7vw;
  border-top:1px solid #eeeaf3;
  color:#777
}
footer p{font-size:15px;margin:0}
.footer-contacts{
  display:grid;
  gap:6px;
  text-align:left
}
.footer-contacts a{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  color:#5f42dc;
  font-weight:700
}
.footer-contact-icon{
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid #dcd5f2;
  display:grid;
  place-items:center;
  color:#5d42da;
  background:#f8f5ff;
  flex:0 0 20px
}
.footer-contact-icon svg{
  width:12px;
  height:12px;
  fill:currentColor
}
.cookie-banner{
  position:fixed;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border:1px solid #e6def8;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 36px rgba(38,24,84,.16);
  transform:translateY(20px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease
}
.cookie-banner.is-visible{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto
}
.cookie-banner p{
  margin:0;
  font-size:14px;
  font-weight:700;
  color:#51437d
}
.cookie-banner .cookie-accept{
  flex:0 0 auto;
  padding:10px 16px;
  border-radius:12px
}
.cookie-actions{
  display:inline-flex;
  align-items:center;
  gap:8px
}
.cookie-banner .cookie-policy-link{
  padding:10px 14px;
  border-radius:12px;
  font-size:14px
}
.cookie-banner .cookie-reject{
  padding:10px 14px;
  border-radius:12px;
  font-size:14px;
  border-color:#f3c5cd;
  color:#b43a52;
  background:linear-gradient(180deg,#fff7f8 0%,#ffeef1 100%)
}
.cookie-banner .cookie-reject:hover{
  border-color:#eba6b4;
  color:#a53048;
  background:linear-gradient(180deg,#ffeef1 0%,#ffe2e8 100%)
}
.legal-main{
  max-width:980px;
  margin:0 auto;
  padding:110px 20px 54px
}
.legal-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.25) blur(10px);
  border-bottom:1px solid #eeeaf6
}
.legal-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px
}
.legal-main h1{
  margin:0 0 10px
}
.legal-main .legal-lead{
  margin:0 0 20px;
  color:#6a6280;
  font-weight:700
}
.legal-card{
  background:#fff;
  border:1px solid #ebe5fa;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(45,33,94,.07);
  padding:24px 24px 20px
}
.legal-card h2{
  font-size:24px;
  margin:18px 0 8px
}
.legal-card p{
  margin:0 0 10px;
  color:#4b4462
}
.legal-card ul{
  margin:0 0 10px 20px;
  padding:0
}
.legal-card li{
  margin:0 0 6px
}
.legal-note{
  margin-top:16px;
  font-size:14px;
  color:#726a8d
}

@keyframes btnGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes casesFilterGlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes serviceCardFadeIn{
  from{opacity:0;transform:scale(.94) translateY(4px)}
  to{opacity:1;transform:none}
}
@keyframes mobileHeaderCtaIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.reveal-ready .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform
}
.reveal-ready .reveal.is-visible{
  opacity:1;
  transform:none
}

@media (prefers-reduced-motion:reduce){
  .mascot-img,.btn-primary{animation:none}
  .cases-filters .is-active{animation:none}
  .services-overlay,.services-overlay-card{transition:none}
  .reveal-ready .reveal,.reveal-ready .reveal.is-visible{
    opacity:1;
    transform:none;
    transition:none
  }
  .service-card:hover .service-ill img,.btn:hover,.case-item:hover,.case-item:hover .case-thumb,.cases-filters button:hover{
    transform:none
  }
  .case-item:hover .case-shine{transform:skewX(-20deg) translateX(-165%)}
}

@media(max-width:980px){
  .site-header{
    padding:14px 20px;
    z-index:30
  }
  .menu-toggle{
    display:inline-block;
    margin-left:8px;
    margin-right:0;
    order:3
  }
  .site-header.show-mobile-cta .menu-toggle{margin-left:8px}
  .header-cta{
    display:none;
    margin-left:auto;
    padding:11px 16px;
    font-size:13px;
    transform:translateY(-4px);
    opacity:.01;
    order:2
  }
  .site-header.show-mobile-cta .header-cta{
    display:inline-flex;
    opacity:1;
    transform:none;
    animation:mobileHeaderCtaIn .24s ease
  }
  .site-header .site-nav{
    position:fixed;
    left:16px;
    right:16px;
    top:74px;
    display:grid;
    gap:8px;
    padding:12px;
    background:#fff;
    border:1px solid #e5dff4;
    border-radius:16px;
    box-shadow:0 16px 36px rgba(22,15,59,.18);
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:opacity .24s ease,transform .26s cubic-bezier(.22,.61,.36,1)
  }
  .site-header .site-nav a{
    opacity:1;
    padding:10px 12px;
    border:1px solid #e6e2f2;
    border-radius:12px;
    background:#fff;
    font-size:13px;
    text-align:center
  }
  .menu-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:transparent;
    opacity:0;
    pointer-events:none;
    transition:opacity .24s ease
  }
  .site-header.is-menu-open .menu-backdrop{
    opacity:1;
    pointer-events:auto
  }
  .site-header.is-menu-open .site-nav{
    opacity:1;
    transform:none;
    pointer-events:auto
  }
  .site-header.is-menu-open .menu-toggle span:nth-child(1){
    transform:translateY(6px) rotate(45deg)
  }
  .site-header.is-menu-open .menu-toggle span:nth-child(2){opacity:0}
  .site-header.is-menu-open .menu-toggle span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg)
  }
  .site-header nav .menu-cta{
    display:inline-flex;
    border-color:transparent;
    background:linear-gradient(135deg,#6e54ea,#5339cd);
    color:#fff;
    box-shadow:0 7px 16px rgba(91,66,220,.2)
  }
  .about{grid-template-columns:1fr}
  .hero{
    grid-template-columns:1fr;
    align-items:start;
    gap:10px;
    min-height:auto;
    padding:24px 20px;
    border-radius:0;
    border:0;
    background:transparent
  }
  .hero .hero-text{order:1}
  .hero p{
    max-width:none;
    font-size:16px;
    line-height:1.55
  }
  .hero .actions{
    margin-top:18px;
    grid-column:auto
  }
  .hero .actions .btn{flex:1}
  .mascot-card{
    order:2;
    min-height:190px;
    margin-top:4px
  }
  .mascot-card:before{
    inset:18% 6% 8%;
    filter:blur(2px)
  }
  .mascot-img{width:min(360px,88vw)}
  .service-grid,.case-grid{grid-template-columns:repeat(2,1fr)}
  .cases-nav{
    display:flex;
    gap:8px;
    justify-content:center;
    margin:14px 0 2px
  }
  .cases-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin:8px 0 0
  }
  .cases-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    border:0;
    background:#d8d2ed;
    padding:0;
    cursor:pointer;
    transition:transform .2s ease,background-color .2s ease,opacity .2s ease
  }
  .cases-dot.is-active{
    width:20px;
    border-radius:99px;
    background:#5e43da
  }
  .cases-dot:disabled{
    opacity:.35;
    cursor:default
  }
  .cases-nav-btn{
    width:38px;
    height:38px;
    border-radius:12px;
    border:1px solid #d8d1ef;
    background:#fff;
    color:#4e37bf;
    font:inherit;
    font-size:18px;
    font-weight:800;
    line-height:1;
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:.2s ease
  }
  .cases-nav-btn:hover{
    background:#f5f2ff;
    border-color:#cfc4ef
  }
  .cases-nav-btn:disabled{
    opacity:.45;
    cursor:not-allowed
  }
  .cases-grid{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-inline:0;
    scroll-padding-inline:0;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    scrollbar-width:none
  }
  .cases-grid::-webkit-scrollbar{display:none}
  .case-item{
    flex:0 0 100%;
    min-width:100%;
    padding:22px
  }
  .sale-nav{
    display:flex;
    gap:8px;
    justify-content:center;
    margin:14px 0 2px
  }
  .sale-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin:8px 0 0
  }
  .sale-grid{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-inline:0;
    scroll-padding-inline:0;
    padding-bottom:8px;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    scrollbar-width:none
  }
  .sale-grid::-webkit-scrollbar{display:none}
  .sale-card{
    flex:0 0 100%;
    min-width:100%
  }
  .case-thumb{height:230px}
  .sale-thumb{height:230px}
  .blog-card-wide{grid-template-columns:1fr}
  .contact-panel{
    grid-template-columns:1fr;
    padding:24px
  }
  .contact-mascot{width:min(300px,100%)}
  .hero,.partners,.services-section{
    transform:none;
    opacity:1
  }
  .services-section{margin-top:8px}
  .service-card{grid-template-columns:1fr;min-height:unset}
  .service-ill{justify-self:start}
  h1{font-size:54px}
  .steps{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-inline:16vw;
    padding-bottom:8px;
    touch-action:pan-x;
    scrollbar-width:none;
    justify-content:flex-start
  }
  .steps::-webkit-scrollbar{display:none}
  .steps div{
    flex:0 0 min(280px,68vw);
    min-width:min(280px,68vw);
    scroll-snap-align:center;
    position:relative;
    padding:0 28px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center
  }
  .steps b{
    width:44px;
    height:44px;
    margin:0 0 12px
  }
  .steps div h3{
    font-size:18px;
    margin:8px 0 8px;
    text-align:center
  }
  .steps div p{
    font-size:14px;
    line-height:1.4;
    text-align:center
  }
  .steps div:not(:last-child)::after{
    content:"→";
    position:absolute;
    right:2px;
    top:50%;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#f3efff;
    color:#6a4ae6;
    font-size:14px;
    font-weight:900
  }
  .steps-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin:8px 0 0
  }
  .steps-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    border:0;
    background:#d8d2ed;
    padding:0;
    cursor:pointer;
    transition:transform .2s ease,background-color .2s ease
  }
  .steps-dot.is-active{
    width:20px;
    border-radius:99px;
    background:#5e43da
  }
  .steps:before{display:none}
  .cta{display:block}
  .about-mascot{width:250px}
  .mascot-img{width:min(520px,106%)}
}

@media(max-width:620px){
  .section{margin:0 20px;padding:46px 0}
  .site-header{padding:12px 16px}
  .header-cta{
    padding:9px 12px;
    font-size:12px
  }
  .hero{
    grid-template-columns:1fr;
    gap:12px;
    padding:20px 14px;
    border-radius:0
  }
  .hero p{
    font-size:14px;
    line-height:1.55
  }
  .hero .actions{
    flex-direction:row;
    gap:10px;
    margin-top:16px
  }
  .hero .actions .btn{
    padding:12px 10px;
    font-size:13px
  }
  .hero .hero-text{order:1}
  .mascot-card{
    order:2;
    min-height:220px;
    margin-top:6px
  }
  .mascot-img{width:min(380px,92vw)}
  .site-header .site-nav{left:12px;right:12px;top:66px}
  .site-header nav a{padding:8px 11px;font-size:12px}
  .logo img{width:122px}
  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .service-card{
    padding:14px;
    gap:8px;
    position:relative;
    max-height:260px;
    transform-origin:50% 0%;
    transition:max-height .52s cubic-bezier(.22,.61,.36,1),opacity .42s ease,transform .46s cubic-bezier(.22,.61,.36,1),padding .34s ease,border-color .34s ease,box-shadow .42s ease,visibility .42s ease
  }
  .service-content p{
    display:block;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(-6px);
    margin:0;
    will-change:max-height,opacity,transform;
    transition:max-height .5s cubic-bezier(.22,.61,.36,1),opacity .4s ease,transform .44s cubic-bezier(.22,.61,.36,1),margin .32s ease
  }
  .service-content h3{
    margin:0 0 6px;
    font-size:18px;
    line-height:1.2
  }
  .service-content a{
    font-size:13px;
    display:inline-flex;
    min-height:20px;
    align-items:center
  }
  .service-card.is-expanded{
    grid-column:1/-1;
    grid-template-columns:1fr;
    align-items:start;
    padding:16px;
    z-index:4;
    box-shadow:0 16px 32px rgba(40,31,90,.14);
    transform:translateY(-2px);
    max-height:420px
  }
  .service-card.is-expanded .service-content p{
    max-height:220px;
    opacity:1;
    transform:translateY(0);
    margin:0 0 12px;
    font-size:14px;
    line-height:1.45
  }
  .service-card.is-collapsing{
    grid-column:1/-1;
    grid-template-columns:1fr;
    align-items:start;
    box-shadow:0 10px 22px rgba(40,31,90,.1);
    transform:translateY(0);
    max-height:300px
  }
  .service-card.is-collapsing .service-content p{
    max-height:0;
    opacity:0;
    transform:translateY(-4px);
    margin:0
  }
  .service-card.is-covered{
    opacity:0;
    transform:scale(.94);
    visibility:hidden;
    pointer-events:none
  }
  .service-card.is-revealing{
    animation:serviceCardFadeIn .44s cubic-bezier(.22,.61,.36,1)
  }
  .service-card.is-expanded .service-ill{
    width:148px;
    justify-self:end
  }
  .service-ill{
    width:110px;
    justify-self:center
  }
  .case-grid{grid-template-columns:1fr}
  .steps{
    gap:12px;
    margin-inline:calc(50% - 50vw);
    padding:0 20px 8px;
    scroll-padding-left:20px;
    touch-action:pan-x
  }
  .steps div{
    flex:0 0 calc(100vw - 40px);
    min-width:calc(100vw - 40px);
    margin-right:14px;
    padding:0 28px
  }
  .steps div:last-child{margin-right:0}
  .steps div:not(:last-child)::after{
    right:-12px;
    top:50%;
    transform:translateY(-50%);
    z-index:2
  }
  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .stats span{padding:16px 14px}
  .stats b{font-size:30px}
  .cases-grid{
    gap:14px;
    scroll-padding-inline:0;
    touch-action:pan-x
  }
  .case-item{
    flex-basis:100%;
    min-width:100%
  }
  .case-item{padding:18px}
  .sale-card{
    padding:18px
  }
  .sale-card h3{font-size:24px}
  .sale-grid{
    gap:14px;
    scroll-padding-inline:0;
    touch-action:pan-x
  }
  .sale-card{
    flex-basis:100%;
    min-width:100%
  }
  .sale-thumb{height:210px}
  .case-thumb{height:210px}
  .cases-filters{gap:8px}
  .cases-dots{margin-top:10px}
  .cases-filters button{padding:9px 14px;font-size:13px}
  .case-item h3{font-size:19px}
  .case-result,.case-note{font-size:14px}
  .services-section{padding:26px 16px;margin-top:0}
  .partners{
    margin:0 20px 6px;
    padding:8px 0 14px;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 18px;
    font-size:17px
  }
  h1{font-size:42px;letter-spacing:-1.8px}
  h2{font-size:31px;letter-spacing:-.8px}
  .hero .actions{flex-direction:row}
  .cta{margin:30px 20px;padding:30px}
  footer{
    display:grid;
    gap:14px;
    padding:28px 20px 34px;
    background:#fff;
    position:relative;
    z-index:2
  }
  footer nav{
    display:flex;
    flex-wrap:wrap;
    gap:12px
  }
  .footer-contacts{
    margin-top:14px;
    text-align:left
  }
  .cookie-banner{
    left:12px;
    right:12px;
    bottom:12px;
    flex-direction:column;
    align-items:stretch;
    gap:10px
  }
  .cookie-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:8px
  }
  .cookie-banner .cookie-policy-link{
    width:100%;
    text-align:center
  }
  .cookie-banner .cookie-reject{
    width:100%
  }
  .cookie-banner .cookie-accept{
    width:100%
  }
  .legal-main{
    padding:96px 16px 32px
  }
  .legal-header{
    position:static;
    padding:12px 16px;
    flex-wrap:wrap
  }
  .legal-nav{
    width:100%;
    order:3;
    gap:10px 14px
  }
  .legal-card{
    padding:18px 16px 14px;
    border-radius:14px
  }
  .hero{min-height:auto}
  .bubble{right:0;top:4%;font-size:18px}
}
@media(max-width:420px){
  .hero{
    grid-template-columns:1fr;
    align-items:start
  }
  .hero .actions{flex-direction:column}
  .mascot-card{min-height:200px}
  .mascot-img{width:min(340px,90vw)}
  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }
  .service-card{padding:12px}
  .service-card.is-expanded{
    grid-column:1/-1;
    padding:14px
  }
  .service-card.is-expanded .service-content p{max-height:200px}
  .service-content h3{font-size:16px}
  .service-content a{font-size:12px}
  .service-ill{width:92px}
}