.cgb-homehow .container { width:min(1440px,100vw);margin:0 auto;padding-inline:50px }
.cgb-homehow .how-it-works { min-height:576px;padding:40px 0;background:#f3f3f3 }
.cgb-homehow .how-it-works h2 { margin:0 0 50px;font-size:48px;font-weight:400;line-height:1;letter-spacing:-.08em;text-align:center }
.cgb-homehow .how-it-works__layout { display:grid;grid-template-columns:328px minmax(0,1002px);gap:10px }
.cgb-homehow .how-tabs { display:flex;height:398px;flex-direction:column;gap:10px }
.cgb-homehow .how-tab { width:100%;color:inherit;font:inherit;text-align:left;cursor:pointer;display:grid;min-height:126px;grid-template-columns:24px minmax(0,1fr);gap:10px;padding:15px;overflow:hidden;border:1px solid transparent;border-radius:10px;background:#fff;transition:border-color .24s ease,transform .52s cubic-bezier(.22,1.35,.36,1),box-shadow .52s cubic-bezier(.22,1.35,.36,1) }
.cgb-homehow .how-tab--active { border-color:#0389cb }
.cgb-homehow .how-tab:hover { transform:translateY(-2px) }
.cgb-homehow .how-tab:active { transform:scale(.985) }
.cgb-homehow .how-tab:focus-visible { outline:2px solid rgba(3,137,203,.35);outline-offset:2px }
.cgb-homehow .how-tab__number { font-size:12px;font-weight:400;line-height:1.3;letter-spacing:-.05em;text-align:center }
.cgb-homehow .how-tab h3 { margin:0 0 6px;color:#0389cb;font-size:20px;font-weight:500;line-height:1.2;letter-spacing:-.05em }
.cgb-homehow .how-tab p { margin:0;color:#131313b3;font-size:16px;line-height:1.3;letter-spacing:-.04em }
.cgb-homehow .how-panel { position:relative;height:398px;min-width:0;overflow:hidden;border-radius:10px;background:#ebf6fb;transition:background-color .36s ease }
.cgb-homehow .how-panel[hidden], .cgb-homehow .how-panel__content[hidden] { display:none!important }
.cgb-homehow .how-panel--crm { background:#0389cb }
.cgb-homehow .how-panel--team { background:#d6e4ff }
.cgb-homehow .how-panel__content { display:grid;width:100%;height:100%;grid-template-columns:minmax(0,502px) 500px }
.cgb-homehow .how-panel__copy { position:relative;min-width:0;padding:25px 6px 25px 25px }
.cgb-homehow .how-panel__copy h3 { margin:0;font-size:36px;font-weight:400;line-height:1.05;letter-spacing:-.08em }
.cgb-homehow .how-panel__copy ul { display:flex;flex-direction:column;gap:10px;margin:20px 0 0;padding:0;list-style:none }
.cgb-homehow .how-panel__copy li { position:relative;padding-left:15px;color:#131313b3;font-size:16px;line-height:1.3;letter-spacing:-.04em }
.cgb-homehow .how-panel__copy li:before { position:absolute;top:.33em;left:0;width:10px;height:10px;background:url("data:image/svg+xml,%3csvg%20preserveAspectRatio='none'%20overflow='visible'%20style='display:%20block;'%20width='10'%20height='10'%20viewBox='0%200%2010%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='Triangle'%3e%3cpath%20id='Vector'%20d='M9.24922%208.27383C9.16505%208.41996%209.04352%208.54107%208.8971%208.62475C8.75069%208.70843%208.58465%208.75165%208.41602%208.75H1.58398C1.41535%208.75165%201.24931%208.70843%201.1029%208.62475C0.956481%208.54107%200.834955%208.41996%200.750781%208.27383C0.668647%208.13325%200.625362%207.97336%200.625362%207.81055C0.625362%207.64773%200.668647%207.48784%200.750781%207.34727L4.16602%201.41484C4.25138%201.2695%204.37324%201.14899%204.51953%201.06526C4.66581%200.981524%204.83144%200.937474%205%200.937474C5.16856%200.937474%205.33418%200.981524%205.48047%201.06526C5.62676%201.14899%205.74862%201.2695%205.83398%201.41484L9.25%207.34727C9.33202%207.48791%209.37517%207.64784%209.37503%207.81065C9.37489%207.97347%209.33147%208.13332%209.24922%208.27383Z'%20fill='%230389CB'/%3e%3c/g%3e%3c/svg%3e") center/contain no-repeat;content:"";transform:rotate(90deg) }
.cgb-homehow .button { display:inline-flex;min-height:42px;align-items:center;justify-content:center;padding:11px 20px;border:1px solid #0389cb;border-radius:5px;font-size:16px;font-weight:500;line-height:1;letter-spacing:-.04em;text-decoration:none;transition:color .25s,background-color .25s,transform .45s cubic-bezier(.22,1.35,.36,1) }
.cgb-homehow .button:hover { transform:translateY(-2px) }
.cgb-homehow .button:active { transform:scale(.96) }
.cgb-homehow .button--primary { color:#fff;background:#0389cb }
.cgb-homehow .how-panel__button { position:absolute;bottom:25px;left:25px }
.cgb-homehow .how-panel__visual { position:relative;width:500px;height:398px;overflow:hidden }
.cgb-homehow .how-panel__backdrop, .cgb-homehow .how-panel__assembled { position:absolute;inset:0;display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;will-change:opacity,transform;pointer-events:none }
.cgb-homehow .how-panel__backdrop { z-index:0;transform:scale(1.08);filter:blur(18px);will-change:opacity,transform,filter }
.cgb-homehow .how-panel__piece { position:absolute;z-index:1;overflow:hidden;pointer-events:none }
.cgb-homehow .how-panel__piece--top { inset:0 0 66%;-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent);mask-image:linear-gradient(to bottom,#000 72%,transparent) }
.cgb-homehow .how-panel__piece--right { inset:22% 0 22% 50%;-webkit-mask-image:linear-gradient(to right,transparent,#000 18%);mask-image:linear-gradient(to right,transparent,#000 18%) }
.cgb-homehow .how-panel__piece--bottom { inset:66% 0 0;-webkit-mask-image:linear-gradient(to top,#000 72%,transparent);mask-image:linear-gradient(to top,#000 72%,transparent) }
.cgb-homehow .how-panel__piece--left { inset:22% 50% 22% 0;-webkit-mask-image:linear-gradient(to left,transparent,#000 18%);mask-image:linear-gradient(to left,transparent,#000 18%) }
.cgb-homehow .how-panel__piece--center { inset:28% 24%;-webkit-mask-image:radial-gradient(ellipse,#000 55%,transparent 78%);mask-image:radial-gradient(ellipse,#000 55%,transparent 78%) }
.cgb-homehow .how-panel__piece-image { position:absolute;display:block;width:500px;height:398px;max-width:none;-o-object-fit:cover;object-fit:cover;filter:blur(7px);opacity:0;will-change:opacity,transform,filter }
.cgb-homehow .how-panel__piece--top .how-panel__piece-image { top:0;left:0 }
.cgb-homehow .how-panel__piece--right .how-panel__piece-image { top:-87.56px;left:-250px }
.cgb-homehow .how-panel__piece--bottom .how-panel__piece-image { top:-262.68px;left:0 }
.cgb-homehow .how-panel__piece--left .how-panel__piece-image { top:-87.56px;left:0 }
.cgb-homehow .how-panel__piece--center .how-panel__piece-image { top:-111.44px;left:-120px }
.cgb-homehow .how-panel__assembled { z-index:2;opacity:1;will-change:opacity;transition:opacity .3s ease }
.cgb-homehow .how-panel__subtabs { display:flex;height:40px;margin-bottom:20px;gap:5px }
.cgb-homehow .how-panel__subtabs[hidden] { display:none }
.cgb-homehow .how-panel__subtab { height:40px;padding:10px 15px;border:0;border-radius:40px;background:#fff;color:#131313b3;font:500 16px/1 Inter,sans-serif;letter-spacing:-.04em;white-space:nowrap;cursor:pointer;transition:color .25s ease,background-color .25s ease,transform .5s cubic-bezier(.22,1.35,.36,1) }
.cgb-homehow .how-panel__subtab:hover { color:#131313;transform:translateY(-2px) scale(1.02) }
.cgb-homehow .how-panel__subtab:active { transform:scale(.95) }
.cgb-homehow .how-panel__subtab:focus-visible { outline:2px solid rgba(255,255,255,.7);outline-offset:2px }
.cgb-homehow .how-panel__subtab.how-panel__subtab--active { background:#131313;color:#fff;-webkit-text-fill-color:#fff }
.cgb-homehow .how-panel--crm .how-panel__copy h3, .cgb-homehow .how-panel--crm .how-panel__copy li { color:#fff }
.cgb-homehow .how-panel--crm .how-panel__copy li:before { filter:brightness(0) invert(1) }
.cgb-homehow .how-panel--crm .how-panel__button { background:#fff;color:#0389cb }
.cgb-homehow .how-panel--crm .how-panel__button:hover { background:#131313;color:#fff }
.cgb-homehow .mobile-slider-nav { display:none }

@media (max-width:919px) {
  .cgb-homehow .container { padding-inline:30px }
  .cgb-homehow .how-it-works h2 { font-size:40px }
  .cgb-homehow .how-it-works__layout { grid-template-columns:260px minmax(0,1fr) }
  .cgb-homehow .how-panel__content { grid-template-columns:1fr }
  .cgb-homehow .how-panel__visual { display:none }
}

@media (max-width:619px) {
  .cgb-homehow .container { padding-inline:15px }
  .cgb-homehow .how-it-works { padding-block:35px }
  .cgb-homehow .how-it-works h2 { margin-bottom:30px;font-size:30px }
  .cgb-homehow .how-it-works__layout { display:block }
  .cgb-homehow .how-tabs { height:auto;margin-bottom:10px }
  .cgb-homehow .how-tab { min-height:0 }
  .cgb-homehow .how-panel { height:auto;min-height:398px }
  .cgb-homehow .how-panel__copy { padding:22px 20px 75px }
  .cgb-homehow .how-panel__copy h3 { font-size:29px }
  .cgb-homehow .how-panel__copy li { font-size:15px }
  .cgb-homehow .how-panel__button { right:20px;bottom:20px;left:20px }
  .cgb-homehow .how-panel__subtabs { margin-right:-20px;overflow-x:auto;scrollbar-width:none }
  .cgb-homehow .how-panel__subtabs::-webkit-scrollbar { display:none }
  .cgb-homehow .how-panel__subtab { flex:none;font-size:14px }
  .cgb-homehow .container { padding-inline:20px }
  .cgb-homehow .mobile-slider-nav { display:flex;align-items:center;justify-content:center;gap:20px;height:36px }
  .cgb-homehow .mobile-slider-nav__arrow { display:grid;width:36px;height:36px;padding:0;place-items:center;border:0;border-radius:50%;background:#1313131a;color:#131313;font:400 20px/1 Inter,sans-serif;cursor:pointer;transition:transform .52s cubic-bezier(.22,1.35,.36,1),opacity .2s ease }
  .cgb-homehow .mobile-slider-nav__arrow:active { transform:scale(.88) }
  .cgb-homehow .mobile-slider-nav__arrow:disabled { opacity:.32 }
  .cgb-homehow .mobile-slider-nav__dots { display:flex;align-items:center;gap:4px }
  .cgb-homehow .mobile-slider-nav__dots i { width:12px;height:12px;border-radius:99px;background:#13131329;transition:width .52s cubic-bezier(.22,1.35,.36,1),background .25s ease }
  .cgb-homehow .mobile-slider-nav__dots i.is-active { width:20px;background:#0389cb }
  .cgb-homehow .how-it-works { min-height:0;padding:30px 0;background:#f3f3f3 }
  .cgb-homehow .how-it-works h2 { margin:0 0 30px;letter-spacing:-.08em }
  .cgb-homehow .how-tabs { flex-direction:row;gap:10px;margin:0 0 10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none }
  .cgb-homehow .how-tabs::-webkit-scrollbar { display:none }
  .cgb-homehow .how-tab { display:grid;min-height:128px;flex:0 0 calc(100% - 30px);padding:15px;border-radius:10px;scroll-snap-align:start }
  .cgb-homehow .how-tab--active { border:1px solid #0389cb;background:#fff }
  .cgb-homehow .how-tab__number { font-size:16px }
  .cgb-homehow .how-tab h3 { font-size:20px;line-height:1.05 }
  .cgb-homehow .how-tab p { font-size:14px;line-height:1.3 }
  .cgb-homehow .how-panel { height:auto;min-height:0;border-radius:10px }
  .cgb-homehow .how-panel__content { position:relative;display:flex;height:auto;overflow:hidden;flex-direction:column }
  .cgb-homehow .how-panel__copy { position:relative;z-index:3;min-height:0;padding:15px 15px 0 }
  .cgb-homehow .how-panel__copy h3 { margin-bottom:20px;font-size:24px;line-height:1.05;letter-spacing:-.08em }
  .cgb-homehow .how-panel__copy ul { gap:10px }
  .cgb-homehow .how-panel__copy li { font-size:16px;line-height:1.3 }
  .cgb-homehow .how-panel__button { position:static;width:100%;height:40px;margin-top:20px }
  .cgb-homehow .how-panel__visual { position:relative;z-index:1;right:auto;bottom:auto;left:auto;display:block;width:100%;height:290px;margin-top:30px;flex:0 0 290px }
  .cgb-homehow .how-panel__visual img { -o-object-position:center bottom;object-position:center bottom }
  .cgb-homehow .how-panel__visual .how-panel__channel-final { -o-object-position:center;object-position:center }
}

/* Фирменная анимация панели: слои PNG/SVG, которые двигает Web Animations API (script.js), а не гифка/видео */
.cgb-homehow .how-panel__channel-motion,
.cgb-homehow .how-panel__channel-bg,
.cgb-homehow .how-panel__channel-final { position:absolute;inset:0;width:100%;height:100% }
.cgb-homehow .how-panel__channel-motion { overflow:hidden }
.cgb-homehow .how-panel__channel-bg { background:radial-gradient(circle at 86% 23%,rgba(70,192,239,.34),transparent 29%),radial-gradient(circle at 52% 74%,rgba(134,224,181,.2),transparent 31%),radial-gradient(circle at 78% 84%,rgba(55,160,232,.3),transparent 33%),#ebf6fb }
.cgb-homehow .how-panel__channel-final { z-index:1;display:block;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;opacity:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 94% 92% at center,#000 72%,rgba(0,0,0,.82) 84%,transparent 100%);mask-image:radial-gradient(ellipse 94% 92% at center,#000 72%,rgba(0,0,0,.82) 84%,transparent 100%) }
.cgb-homehow .how-panel__channel-icon { position:absolute;z-index:2;top:0;left:0;display:block;width:56px;height:56px;border-radius:10px;-o-object-fit:contain;object-fit:contain;pointer-events:none;transform-origin:center }
.cgb-homehow .how-panel__channel-motion--animating .how-panel__channel-icon,
.cgb-homehow .how-panel__channel-motion--animating .how-panel__channel-final { will-change:opacity,transform }

.cgb-homehow .how-panel__scene,
.cgb-homehow .how-panel__scene-bg { position:absolute;inset:0;width:100%;height:100% }
.cgb-homehow .how-panel__scene { overflow:hidden;isolation:isolate }
.cgb-homehow .how-panel__scene-bg { z-index:-1;overflow:hidden;background:#0389cb }
.cgb-homehow .how-panel__team-motion .how-panel__scene-bg { background:#d6e4ff }
.cgb-homehow .how-panel__bg-shape { position:absolute;display:block;max-width:none;pointer-events:none;transform:translate(-50%,-50%) rotate(-89.53deg) scaleY(-1) }
.cgb-homehow .how-panel__integration-motion .how-panel__bg-shape--1 { top:307px;left:351px;width:535px;height:729px }
.cgb-homehow .how-panel__integration-motion .how-panel__bg-shape--2 { top:138px;left:462px;width:454px;height:613px }
.cgb-homehow .how-panel__api-motion .how-panel__bg-shape--1 { top:236px;left:475px;width:535px;height:729px }
.cgb-homehow .how-panel__api-motion .how-panel__bg-shape--2 { top:199px;left:451px;width:454px;height:613px }
.cgb-homehow .how-panel__team-motion .how-panel__bg-shape--1 { top:328px;left:369px;width:535px;height:729px }
.cgb-homehow .how-panel__team-motion .how-panel__bg-shape--2 { top:133px;left:451px;width:454px;height:613px }
.cgb-homehow .how-panel__integration-screen,
.cgb-homehow .how-panel__integration-logo-card,
.cgb-homehow .how-panel__team-main,
.cgb-homehow .how-panel__team-side,
.cgb-homehow .how-panel__api-step { position:absolute;top:0;left:0;will-change:transform }
.cgb-homehow .how-panel__integration-screen { width:512px;height:265px;border-radius:22px;-o-object-fit:cover;object-fit:cover;box-shadow:0 20px 55px rgba(30,75,149,.16) }
.cgb-homehow .how-panel__integration-logo-card { display:grid;width:88px;height:88px;padding:12px;place-items:center;overflow:hidden;border-radius:20px;background:#fff;box-shadow:0 17px 38px rgba(30,75,149,.16) }
.cgb-homehow .how-panel__integration-logo-card img { display:block;width:64px;height:64px;border-radius:12px;-o-object-fit:contain;object-fit:contain }
.cgb-homehow .how-panel__team-main { width:284px;height:300px;overflow:hidden }
.cgb-homehow .how-panel__team-main img { position:absolute;top:-11.91%;left:-82.68%;display:block;width:182.68%;height:111.94%;max-width:none }
.cgb-homehow .how-panel__team-side { width:124px;height:323px;-o-object-fit:fill;object-fit:fill;filter:drop-shadow(0 18px 28px rgba(30,75,149,.16)) }
.cgb-homehow .how-panel__api-steps { position:absolute;top:76px;left:58px;width:381px;height:246px }
.cgb-homehow .how-panel__api-step { display:flex;width:381px;min-height:54px;padding:10px 16px;align-items:center;border-radius:10px;background:#fff;color:#131313;font:400 13px/1.3 Inter,sans-serif;letter-spacing:-.03em;box-shadow:0 12px 28px rgba(30,75,149,.08) }