/* Фирменные токены Shinta и темы. */
:root  {
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --brand:#4c6fff;
  --brand-hover:#3d5ef0;
  --mint:#17c9b4;
  --brand-soft:#eef1ff;
  --bg:#f5f6fa;
  --surface:#fff;
  --surface-2:#edf0f7;
  --text:#161a2e;
  --text-2:#5b6178;
  --border:#e1e5ef;
  --grad:linear-gradient(120deg,#17c9b4,#4c6fff);
  --shadow:0 16px 60px rgba(22,26,46,.08);
  color-scheme:light
}
:root[data-theme=dark]  {
  --brand:#6b87ff;
  --brand-hover:#819aff;
  --mint:#22d8c2;
  --brand-soft:rgba(107,135,255,.12);
  --bg:#0d0e17;
  --surface:#161826;
  --surface-2:#1b1d2d;
  --text:#eceef8;
  --text-2:#a6aac2;
  --border:#272a3d;
  --grad:linear-gradient(120deg,#22d8c2,#6b87ff);
  --shadow:0 16px 60px rgba(0,0,0,.24);
  color-scheme:dark
}
*  {
  box-sizing:border-box
}
*::before  {
  box-sizing:border-box
}
*::after  {
  box-sizing:border-box
}
html  {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body  {
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
a  {
  color:inherit;
  text-decoration:none
}
button  {
  font:inherit;
  color:inherit
}
input  {
  font:inherit;
  color:inherit
}
select  {
  font:inherit;
  color:inherit
}
textarea  {
  font:inherit;
  color:inherit
}
button  {
  -webkit-tap-highlight-color:transparent
}
a  {
  -webkit-tap-highlight-color:transparent
}
input  {
  -webkit-tap-highlight-color:transparent
}
select  {
  -webkit-tap-highlight-color:transparent
}
textarea  {
  -webkit-tap-highlight-color:transparent
}
button  {
  cursor:pointer
}
img  {
  max-width:100%;
  height:auto
}
h1  {
  margin:0
}
h2  {
  margin:0
}
h3  {
  margin:0
}
p  {
  margin:0
}
h1  {
  line-height:1.16;
  letter-spacing:-.045em
}
h2  {
  line-height:1.16;
  letter-spacing:-.045em
}
h3  {
  line-height:1.16;
  letter-spacing:-.045em
}
h2  {
  font-weight:800
}
h3  {
  font-size:23px;
  letter-spacing:-.03em
}
p  {
  color:var(--text-2)
}
:focus-visible  {
  outline:3px solid var(--brand);
  outline-offset:5px
}
[hidden]  {
  display:none!important
}
.container  {
  width:100%;
  max-width:1256px;
  margin:auto;
  padding:0 32px
}
.section  {
  padding:108px 0
}
.icon  {
  flex-shrink:0;
  vertical-align:middle
}
.muted  {
  color:var(--text-2)
}
.gradient-text  {
  color:var(--brand);
  background:var(--grad);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent
}
.eyebrow  {
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
  color:var(--text-2)
}
.status-dot  {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--mint) 10%,transparent);
  display:inline-block;
  flex-shrink:0
}
.button  {
  border:0;
  display:inline-flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  padding:17px 22px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  font-size:13px;
  line-height:1.4;
  transition:transform .2s,background .2s,box-shadow .2s;
  box-shadow:0 6px 24px color-mix(in srgb,var(--brand) 18%,transparent)
}
.button:hover  {
  background:var(--brand-hover);
  transform:translateY(-2px);
  box-shadow:0 9px 28px color-mix(in srgb,var(--brand) 25%,transparent)
}
.button .icon  {
  width:18px;
  height:18px
}
.button-small  {
  padding:12px 16px;
  gap:12px
}
.text-link  {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  font-size:13px;
  background:none;
  border:0;
  padding:0;
  transition:color .2s
}
.text-link:hover  {
  color:var(--brand)
}
.text-link .icon  {
  width:20px
}
.skip-link  {
  position:absolute;
  top:-100px;
  left:20px;
  background:var(--surface);
  padding:12px;
  z-index:100
}
.skip-link:focus  {
  top:10px
}
/* Шапка сайта. */
.header  {
  position:sticky;
  top:0;
  z-index:50;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border)
}
.header-inner  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:88px;
  gap:28px
}
.logo  {
  display:flex;
  align-items:center;
  gap:16px;
  flex-shrink:0
}
.logo img  {
  width:114px;
  height:34px;
  object-fit:contain
}
.logo span  {
  font-size:10px;
  line-height:1.4;
  border-left:1px solid var(--border);
  padding-left:16px;
  color:var(--text-2);
  max-width:90px
}
.logo-dark  {
  display:none
}
.theme-sun  {
  display:none
}
:root[data-theme=dark] .logo-light  {
  display:none
}
:root[data-theme=dark] .theme-moon  {
  display:none
}
:root[data-theme=dark] .logo-dark  {
  display:block
}
:root[data-theme=dark] .theme-sun  {
  display:block
}
.header nav  {
  display:flex;
  gap:28px;
  font-size:12px;
  font-weight:600
}
.header nav a:hover  {
  color:var(--brand)
}
.header-actions  {
  display:flex;
  align-items:center;
  gap:16px
}
.icon-button  {
  border:1px solid var(--border);
  background:transparent;
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center
}
.icon-button .icon  {
  width:19px;
  height:19px
}
.icon-button:hover  {
  background:var(--surface)
}
.menu-toggle  {
  display:grid
}
/* Первый экран. */
.hero  {
  position:relative;
  overflow:hidden;
  padding:92px 0 76px
}
.hero-glow  {
  position:absolute;
  width:800px;
  height:800px;
  right:-130px;
  top:-190px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(76,111,255,.12),rgba(23,201,180,.07) 40%,transparent 67%);
  pointer-events:none
}
.hero-grid  {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:40px;
  align-items:center
}
.hero-copy  {
  position:relative;
  z-index:2
}
.hero h1  {
  font-weight:800;
  letter-spacing:-.06em;
  line-height:1.1;
  max-width:700px
}
.hero-description  {
  font-size:15px;
  line-height:1.85;
  max-width:490px;
  margin-top:26px
}
.hero-actions  {
  display:flex;
  gap:24px;
  align-items:center;
  margin-top:32px;
  flex-wrap:wrap
}
.hero-note  {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:17px;
  color:var(--text-2);
  font-size:11px
}
.mini-check  {
  color:var(--mint)
}
.mini-check .icon  {
  width:16px;
  height:16px
}
.hero-stats  {
  display:flex;
  gap:28px;
  margin-top:50px;
  padding-top:26px;
  border-top:1px solid var(--border)
}
.hero-stats>div  {
  display:flex;
  flex-direction:column;
  gap:4px
}
.hero-stats>div+div  {
  border-left:1px solid var(--border);
  padding-left:28px
}
.hero-stats strong  {
  font-size:24px;
  line-height:1.3;
  letter-spacing:-.035em
}
.hero-stats span  {
  font-size:10px;
  color:var(--text-2)
}
.card-symbol  {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--brand-soft);
  color:var(--brand)
}
.live-dot  {
  margin-left:auto;
  width:6px;
  height:6px;
  background:var(--mint);
  border-radius:50%
}
.chip-check  {
  width:30px;
  height:30px;
  background:color-mix(in srgb,var(--mint) 12%,transparent);
  border-radius:50%;
  display:grid;
  place-items:center
}
.chip-check .icon  {
  width:18px;
  color:var(--mint)
}
.expertise-strip  {
  border-block:1px solid var(--border);
  background:var(--surface)
}
.expertise-strip>.container  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:24px
}
.expertise-strip .container>span  {
  font-size:10px;
  color:var(--text-2)
}
.expertise-strip .container>div  {
  font-size:16px;
  font-weight:600;
  letter-spacing:-.03em
}
.strip-plus  {
  color:var(--text-2);
  font-weight:400
}
.expertise-strip a  {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:10px;
  color:var(--text-2)
}
.expertise-strip .icon  {
  width:16px
}
/* Услуги. */
.section-heading  {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:48px;
  margin-bottom:44px
}
.section-heading .eyebrow  {
  margin-bottom:18px
}
.section-heading>p  {
  max-width:320px;
  font-size:13px;
  line-height:1.8
}
.section-heading>.text-link  {
  margin-bottom:6px
}
.service-grid  {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}
.service-card  {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:27px 24px;
  display:flex;
  flex-direction:column;
  transition:border-color .25s,transform .25s,box-shadow .25s
}
.service-card:hover  {
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  transform:translateY(-5px);
  box-shadow:var(--shadow)
}
.service-top  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:30px
}
.service-icon  {
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:var(--brand-soft);
  color:var(--brand)
}
.service-card:nth-child(2) .service-icon  {
  color:var(--mint);
  background:color-mix(in srgb,var(--mint) 10%,transparent)
}
.number  {
  color:var(--text-2);
  font-size:10px
}
.tag  {
  font-size:9px;
  color:var(--text-2);
  margin-bottom:10px
}
.service-card h3  {
  font-size:21px;
  line-height:1.3;
  margin-bottom:14px
}
.service-card>p  {
  font-size:12px;
  line-height:1.8;
  flex-grow:1
}
.service-card ul  {
  list-style:none;
  padding:0;
  margin:24px 0;
  font-size:10px
}
.service-card li  {
  display:flex;
  gap:7px;
  align-items:center;
  margin:9px 0
}
.service-card li .icon  {
  width:13px;
  height:13px;
  color:var(--mint)
}
.service-link  {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  border-top:1px solid var(--border);
  padding-top:18px;
  font-size:11px;
  font-weight:700
}
.service-link .icon  {
  width:18px;
  height:18px
}
.service-link:hover  {
  color:var(--brand)
}
/* Подход. */
.approach-section  {
  background:var(--surface);
  border-block:1px solid var(--border)
}
.approach-grid  {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:100px;
  align-items:center
}
.approach-copy h3  {
  font-size:38px;
  line-height:1.24
}
.approach-copy>p  {
  font-size:13px;
  line-height:1.85;
  margin:24px 0;
  max-width:380px
}
.journey>div  {
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px 0;
  border-bottom:1px solid var(--border)
}
.journey>div:first-child  {
  padding-top:0
}
.journey>div:last-child  {
  border-bottom:0;
  padding-bottom:0
}
.journey-number  {
  font-size:12px;
  font-weight:700;
  color:var(--brand);
  border:1px solid var(--border);
  border-radius:50%;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex-shrink:0
}
.journey h3  {
  font-size:16px;
  letter-spacing:-.02em;
  margin-bottom:7px
}
.journey p  {
  font-size:11px
}
.journey>div>.icon  {
  margin-left:auto;
  color:var(--text-2);
  width:20px
}
/* Кейсы. */
.case-grid  {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.case-card  {
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:var(--surface)
}
.case-visual  {
  position:relative;
  overflow:hidden;
  height:235px;
  padding:27px;
  background:#d9f1ed;
  color:#164940
}
.case-blue .case-visual  {
  background:#e0e8ff;
  color:#283c84
}
.case-violet .case-visual  {
  background:#eae1f8;
  color:#584177
}
:root[data-theme=dark] .case-visual  {
  background:#13332f;
  color:#a6e8d9
}
:root[data-theme=dark] .case-blue .case-visual  {
  background:#1c284a;
  color:#bbcbff
}
:root[data-theme=dark] .case-violet .case-visual  {
  background:#302343;
  color:#dec5fa
}
.case-visual>span  {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  font-weight:700;
  position:relative;
  z-index:1
}
.case-visual>span .icon  {
  width:17px;
  height:17px
}
.case-visual>strong  {
  font-size:65px;
  letter-spacing:-.065em;
  line-height:1.1;
  display:block;
  margin-top:37px;
  position:relative;
  z-index:1
}
.case-visual>small  {
  display:block;
  position:relative;
  z-index:1
}
.case-bars  {
  position:absolute;
  right:14px;
  bottom:-20px;
  height:180px;
  display:flex;
  align-items:flex-end;
  gap:8px;
  transform:rotate(-10deg);
  opacity:.13
}
.case-bars i  {
  background:currentColor;
  width:23px;
  border-radius:5px 5px 0 0;
  height:40px
}
.case-bars i:nth-child(2)  {
  height:60px
}
.case-bars i:nth-child(3)  {
  height:80px
}
.case-bars i:nth-child(4)  {
  height:90px
}
.case-bars i:nth-child(5)  {
  height:125px
}
.case-bars i:nth-child(6)  {
  height:145px
}
.case-bars i:nth-child(7)  {
  height:180px
}
.case-body  {
  padding:26px;
  display:flex;
  flex-direction:column
}
.case-body h3  {
  font-size:20px;
  line-height:1.3;
  min-height:52px
}
.case-body p  {
  font-size:12px;
  margin-top:14px;
  line-height:1.8;
  min-height:65px
}
.case-body dl  {
  font-size:10px;
  margin:22px 0
}
.case-body dl>div  {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin:7px 0
}
.case-body dt  {
  color:var(--text-2)
}
.case-body dd  {
  margin:0;
  font-weight:700;
  white-space:nowrap
}
.section-note  {
  font-size:10px;
  margin-top:22px;
  color:var(--text-2)
}
/* Аудит. */
.audit-section  {
  padding-top:0
}
.audit-panel  {
  background:#152033;
  color:#fff;
  border-radius:24px;
  padding:56px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:70px;
  position:relative;
  overflow:hidden
}
.audit-panel::before  {
  content:'';
  position:absolute;
  width:700px;
  height:700px;
  top:-300px;
  right:-200px;
  background:radial-gradient(circle,rgba(23,201,180,.15),transparent 65%);
  pointer-events:none
}
.audit-panel .eyebrow  {
  color:#a7b6cc;
  font-size:10px
}
.audit-copy  {
  position:relative
}
.audit-copy h2 span  {
  color:#5ee0ce
}
.audit-copy>p:not(.eyebrow)  {
  color:#b6c3d6;
  font-size:13px;
  margin:24px 0;
  max-width:390px
}
.button-white  {
  background:#fff;
  color:#172339;
  box-shadow:none
}
.button-white:hover  {
  background:#e7f5f4
}
.audit-note  {
  display:block;
  font-size:9px;
  color:#b6c3d6;
  margin-top:14px
}
.audit-checklist  {
  align-self:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:24px;
  position:relative
}
.audit-checklist>div  {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  padding:13px 0;
  color:#e1e8f1
}
.audit-checklist .icon  {
  width:17px;
  height:17px;
  color:#5ee0ce
}
.audit-checklist .audit-checklist-head  {
  font-size:15px;
  font-weight:700;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:0 0 18px;
  margin-bottom:9px
}
.audit-checklist .audit-bottom  {
  font-size:9px;
  border-top:1px solid rgba(255,255,255,.12);
  padding:18px 0 0;
  margin-top:10px;
  justify-content:space-between
}
/* Процесс и агентство. */
.home-process  {
  padding-top:0
}
.process-grid  {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:30px
}
.process-card  {
  border-top:1px solid var(--border);
  padding-top:24px
}
.process-index  {
  font-size:38px;
  font-weight:800;
  letter-spacing:-.055em;
  color:var(--brand);
  display:block;
  line-height:1.3
}
.process-card small  {
  color:var(--text-2);
  display:block;
  margin:8px 0 20px
}
.process-card h3  {
  font-size:17px;
  line-height:1.4
}
.process-card p  {
  font-size:12px;
  line-height:1.85;
  margin-top:12px
}
.about-section  {
  background:var(--surface);
  border-block:1px solid var(--border)
}
.about-grid  {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:90px;
  align-items:center
}
.about-art  {
  position:relative;
  min-height:390px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background-image:radial-gradient(circle at 65% 60%,color-mix(in srgb,var(--mint) 13%,transparent),transparent 65%)
}
.about-art::before  {
  content:'';
  position:absolute;
  width:300px;
  height:300px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);
  border-radius:50%;
  transform:rotate(-20deg)
}
.about-art::after  {
  content:'';
  position:absolute;
  width:300px;
  height:300px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);
  border-radius:50%;
  transform:rotate(-20deg)
}
.about-art::after  {
  width:360px;
  height:230px
}
.about-monogram  {
  font-size:245px;
  font-weight:800;
  letter-spacing:-.12em;
  line-height:1;
  position:relative;
  z-index:1;
  color:var(--brand)
}
.about-monogram span  {
  color:var(--mint)
}
.about-art-label  {
  position:absolute;
  top:28px;
  left:28px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--text-2)
}
.about-badge  {
  position:absolute;
  right:20px;
  bottom:24px;
  z-index:2;
  transform:rotate(-4deg);
  padding:14px 24px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
  border-radius:12px;
  font-size:10px;
  color:var(--text-2)
}
.about-badge strong  {
  color:var(--text);
  font-size:20px;
  display:block;
  line-height:1.6
}
.about-badge .icon  {
  width:16px
}
.about-copy>p:not(.eyebrow)  {
  font-size:13px;
  line-height:1.9;
  margin-top:24px
}
.about-values  {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:24px 0;
  font-size:12px
}
.about-values .icon  {
  width:17px;
  height:17px;
  color:var(--mint);
  margin-right:8px
}
/* Частые вопросы. */
.faq-grid  {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:90px
}
.faq-intro  {
  font-size:12px;
  line-height:1.9;
  margin-top:28px
}
.faq-intro a  {
  color:var(--brand)
}
.faq-list details  {
  border-bottom:1px solid var(--border);
  padding:23px 0
}
.faq-list details:first-child  {
  padding-top:0
}
.faq-list summary  {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  cursor:pointer;
  font-size:15px;
  font-weight:700;
  line-height:1.5
}
.faq-list summary::-webkit-details-marker  {
  display:none
}
.faq-plus  {
  font-size:24px;
  line-height:1;
  font-weight:400;
  color:var(--brand);
  transition:transform .2s
}
.faq-list details[open] .faq-plus  {
  transform:rotate(45deg)
}
.faq-list details>p  {
  font-size:12px;
  line-height:1.85;
  padding:17px 35px 0 0
}
/* Контакты и подвал. */
.contact-section  {
  background:var(--surface);
  border-top:1px solid var(--border)
}
.contact-grid  {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:100px;
  align-items:center
}
.contact-copy>p:not(.eyebrow)  {
  font-size:14px;
  line-height:1.9;
  max-width:400px;
  margin:26px 0 34px
}
.contact-telegram  {
  display:flex;
  gap:15px;
  align-items:center;
  padding:18px 20px;
  background:var(--brand-soft);
  border:1px solid color-mix(in srgb,var(--brand) 20%,transparent);
  border-radius:14px;
  max-width:380px;
  transition:transform .2s
}
.contact-telegram:hover  {
  transform:translateY(-3px)
}
.contact-telegram>span  {
  color:var(--brand)
}
.contact-telegram strong  {
  font-size:13px
}
.contact-telegram small  {
  display:block;
  color:var(--text-2);
}
.contact-telegram>.icon  {
  margin-left:auto;
  width:17px;
  color:var(--brand)
}
.contact-email  {
  display:inline-block;
  font-size:14px;
  margin-top:22px;
  border-bottom:1px solid var(--border)
}
.brief-form  {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:20px;
  padding:32px
}
.brief-form h3  {
  font-size:22px
}
.form-intro  {
  font-size:11px;
  margin:10px 0 24px
}
.brief-form label  {
  font-size:10px;
  font-weight:700;
  display:block;
  margin:15px 0 7px
}
.brief-form input  {
  display:block;
  width:100%;
  border:1px solid var(--border);
  background:var(--surface);
  padding:12px 14px;
  border-radius:9px;
  font-size:12px;
  line-height:1.5;
  outline-offset:2px
}
.brief-form textarea  {
  display:block;
  width:100%;
  border:1px solid var(--border);
  background:var(--surface);
  padding:12px 14px;
  border-radius:9px;
  font-size:12px;
  line-height:1.5;
  outline-offset:2px
}
.brief-form select  {
  display:block;
  width:100%;
  border:1px solid var(--border);
  background:var(--surface);
  padding:12px 14px;
  border-radius:9px;
  font-size:12px;
  line-height:1.5;
  outline-offset:2px
}
.brief-form textarea  {
  resize:vertical;
  min-height:90px
}
.brief-form input::placeholder  {
  color:var(--text-2);
  opacity:.85
}
.brief-form textarea::placeholder  {
  color:var(--text-2);
  opacity:.85
}
.brief-form>.button  {
  width:100%;
  justify-content:space-between;
  margin-top:20px
}
.form-note  {
  font-size:9px;
  line-height:1.7;
  margin-top:13px
}
.brief-form #brief-result  {
  border-top:1px solid var(--border);
  margin-top:18px;
  padding-top:18px
}
.brief-form #brief-result p  {
  font-size:11px
}
.brief-form #brief-text  {
  margin:14px 0;
  min-height:160px
}
.brief-form #copy-status  {
  display:block;
  font-size:11px;
  color:var(--brand);
  margin-top:10px
}
.footer  {
  background:var(--bg);
  padding:54px 0 24px
}
.footer-top  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-bottom:44px;
  border-bottom:1px solid var(--border)
}
.footer-wordmark  {
  font-size:58px;
  letter-spacing:-.075em;
  font-weight:800;
  line-height:1
}
.footer-wordmark span  {
  font-size:15px;
  vertical-align:top;
  letter-spacing:0;
  margin-left:6px
}
.footer-top p  {
  font-size:12px;
  line-height:1.8
}
.footer-top>a:last-child  {
  font-size:12px;
  font-weight:700
}
.footer-top .icon  {
  width:18px;
  margin-left:12px
}
.footer-bottom  {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:15px;
  font-size:9px;
  color:var(--text-2);
  padding-top:24px
}
/* Содержимое доступно при сбое анимации. */
.reveal.is-pending  {
  opacity:0;
  transform:translateY(16px)
}
.reveal  {
  transition:opacity .6s ease,transform .6s ease
}
.reveal.is-visible  {
  opacity:1;
  transform:none
}
@keyframes draw-chart  {
  to  {
    stroke-dashoffset:0
  }
}
@media(min-width:1440px)  {
  .hero  {
    padding-block:110px 90px
  }
}
@media(max-width:1100px)  {
  .header nav  {
    gap:18px
  }
  .logo span  {
    display:none
  }
  .hero-grid  {
    gap:25px
  }
  .hero-actions  {
    gap:18px
  }
  .hero-actions .button  {
    font-size:11px;
    padding:16px
  }
  .hero-stats  {
    gap:18px
  }
  .hero-stats>div+div  {
    padding-left:18px
  }
  .service-grid  {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .service-card>p  {
    max-width:360px
  }
  .service-card h3  {
    font-size:24px
  }
  .approach-grid  {
    gap:50px
  }
  .about-grid  {
    gap:50px
  }
  .contact-grid  {
    gap:50px
  }
  .audit-panel  {
    padding:40px;
    gap:40px
  }
  .case-body  {
    padding:22px
  }
  .case-body h3  {
    font-size:18px
  }
  .case-body dl>div  {
    display:block
  }
  .case-body dd  {
    margin-top:3px
  }
  .case-visual  {
    padding:23px
  }
  .expertise-strip .container>div  {
    font-size:13px
  }
  .expertise-strip a  {
    max-width:140px
  }
  .faq-grid  {
    gap:50px
  }
}
@media(max-width:820px)  {
  .container  {
    padding-inline:24px
  }
  .section  {
    padding-block:76px
  }
  .header-inner  {
    height:76px
  }
  .header nav  {
    position:absolute;
    top:76px;
    left:0;
    right:0;
    padding:22px 24px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    flex-direction:column;
    gap:18px;
    display:none;
    font-size:15px
  }
  .header nav.is-open  {
    display:flex
  }
  .menu-toggle  {
    display:grid
  }
  .header-actions  {
    gap:10px
  }
  .hero  {
    padding:60px 0
  }
  .hero-grid  {
    grid-template-columns:1fr;
    gap:30px
  }
  .hero-copy  {
    max-width:620px
  }
  .hero-description  {
    max-width:550px
  }
  .hero-actions .button  {
    font-size:13px;
    padding:17px 22px
  }
  .hero-stats  {
    max-width:530px
  }
  .expertise-strip>.container  {
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:22px 32px
  }
  .expertise-strip .container>span  {
    width:100%
  }
  .expertise-strip a  {
    max-width:none;
    margin-left:auto
  }
  .section-heading  {
    align-items:flex-start;
    gap:24px;
    flex-direction:column;
    margin-bottom:34px
  }
  .section-heading>p  {
    max-width:500px
  }
  .approach-grid  {
    grid-template-columns:1fr;
    gap:40px
  }
  .approach-copy h3  {
    font-size:32px
  }
  .approach-copy>p  {
    max-width:550px
  }
  .case-grid  {
    grid-template-columns:1fr
  }
  .case-card  {
    display:grid;
    grid-template-columns:.85fr 1.15fr
  }
  .case-visual  {
    height:100%;
    min-height:280px
  }
  .case-body h3  {
    min-height:0
  }
  .case-body p  {
    min-height:0
  }
  .case-body dl>div  {
    display:flex
  }
  .case-visual>strong  {
    margin-top:75px
  }
  .audit-panel  {
    grid-template-columns:1fr;
    gap:36px;
    padding:38px
  }
  .audit-copy>p:not(.eyebrow)  {
    max-width:500px
  }
  .audit-section  {
    padding-top:0
  }
  .home-process  {
    padding-top:0
  }
  .process-grid  {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:35px
  }
  .about-grid  {
    grid-template-columns:1fr;
    gap:40px
  }
  .about-art  {
    min-height:340px;
    max-width:500px;
    width:100%
  }
  .faq-grid  {
    grid-template-columns:1fr;
    gap:38px
  }
  .contact-grid  {
    grid-template-columns:1fr;
    gap:38px
  }
  .brief-form  {
    max-width:580px;
    width:100%
  }
  .footer-top  {
    flex-wrap:wrap
  }
  .footer-top p  {
    margin-left:auto
  }
  .footer-top>a:last-child  {
    width:100%
  }
  .footer-bottom  {
    justify-content:flex-start;
    gap:16px 25px
  }
}
@media(max-width:480px)  {
  html  {
    scroll-padding-top:85px
  }
  .container  {
    padding-inline:20px
  }
  .header-inner  {
    height:70px;
    gap:14px
  }
  .header nav  {
    top:70px
  }
  .header-cta  {
    display:none
  }
  .logo img  {
    width:105px;
    height:31px
  }
  .header-actions  {
    gap:8px
  }
  .icon-button  {
    width:36px;
    height:36px
  }
  .hero  {
    padding-top:42px;
    padding-bottom:38px
  }
  .eyebrow  {
    font-size:9px;
    letter-spacing:.12em;
    margin-bottom:20px
  }
  .hero-description  {
    font-size:13px;
    margin-top:22px
  }
  .hero-actions  {
    gap:20px;
    margin-top:26px
  }
  .hero-actions .button  {
    width:100%;
    justify-content:space-between;
    font-size:12px
  }
  .hero-actions .text-link  {
    font-size:12px
  }
  .hero-note  {
    font-size:9px;
    gap:6px
  }
  .hero-stats  {
    margin-top:30px;
    padding-top:23px;
    gap:16px;
    justify-content:space-between
  }
  .hero-stats>div+div  {
    padding-left:16px
  }
  .hero-stats strong  {
    font-size:20px
  }
  .hero-stats span  {
    font-size:8px;
    max-width:87px
  }
  .card-symbol  {
    width:34px;
    height:34px
  }
  .expertise-strip>.container  {
    gap:16px 22px;
    padding-block:22px
  }
  .expertise-strip .container>div  {
    font-size:12px
  }
  .expertise-strip a  {
    width:100%;
    margin-left:0
  }
  .section  {
    padding-block:62px
  }
  .section-heading  {
    gap:20px;
    margin-bottom:28px
  }
  .section-heading>p  {
    font-size:12px
  }
  .service-grid  {
    grid-template-columns:1fr;
    gap:14px
  }
  .service-card  {
    padding:24px
  }
  .service-top  {
    margin-bottom:20px
  }
  .service-card h3  {
    font-size:23px
  }
  .service-card ul  {
    margin:18px 0
  }
  .service-card>p  {
    font-size:13px
  }
  .service-card li  {
    font-size:11px
  }
  .service-link  {
    font-size:12px
  }
  .approach-copy h3  {
    font-size:30px
  }
  .journey>div  {
    gap:12px;
    padding:22px 0
  }
  .journey-number  {
    width:34px;
    height:34px;
    font-size:10px
  }
  .journey h3  {
    font-size:14px
  }
  .journey p  {
    font-size:10px
  }
  .journey>div>.icon  {
    display:none
  }
  .case-card  {
    display:block
  }
  .case-visual  {
    height:210px;
    min-height:0
  }
  .case-visual>strong  {
    margin-top:30px;
    font-size:61px
  }
  .case-body h3  {
    font-size:21px
  }
  .case-body p  {
    font-size:12px
  }
  .case-body dl>div  {
    font-size:10px
  }
  .audit-section  {
    padding-top:0
  }
  .home-process  {
    padding-top:0
  }
  .audit-panel  {
    padding:28px 24px;
    border-radius:18px;
    gap:28px
  }
  .audit-copy>p:not(.eyebrow)  {
    font-size:12px
  }
  .audit-copy .button  {
    width:100%;
    padding:15px 16px;
    font-size:11px
  }
  .audit-checklist  {
    padding:20px 16px
  }
  .audit-checklist>div  {
    font-size:10px
  }
  .audit-checklist .audit-bottom  {
    font-size:8px
  }
  .process-grid  {
    gap:26px 20px
  }
  .process-index  {
    font-size:32px
  }
  .process-card h3  {
    font-size:15px
  }
  .process-card p  {
    font-size:11px
  }
  .about-art  {
    min-height:300px
  }
  .about-monogram  {
    font-size:200px
  }
  .about-copy>p:not(.eyebrow)  {
    font-size:12px
  }
  .faq-list summary  {
    font-size:13px
  }
  .faq-list details>p  {
    font-size:11px
  }
  .contact-copy>p:not(.eyebrow)  {
    font-size:12px
  }
  .brief-form  {
    padding:24px
  }
  .brief-form h3  {
    font-size:20px
  }
  .footer-wordmark  {
    font-size:49px
  }
  .footer-top p  {
    font-size:10px
  }
  .footer-top  {
    gap:22px;
    padding-bottom:30px
  }
  .footer-bottom  {
    font-size:8px;
    gap:12px 22px
  }
}
@media(prefers-reduced-motion:reduce)  {
  html  {
    scroll-behavior:auto
  }
  *  {
    animation:none!important;
    transition:none!important
  }
  *::before  {
    animation:none!important;
    transition:none!important
  }
  *::after  {
    animation:none!important;
    transition:none!important
  }
  .reveal.is-pending  {
    opacity:1;
    transform:none
  }
}
/* Дополнительные компоненты. */
html  {
  scrollbar-gutter:stable
}
.modal-open  {
  overflow:hidden
}
.header nav  {
  gap:22px
}
.service-grid  {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.service-card  {
  padding:28px
}
.service-price  {
  margin:0 0 22px
}
.service-price strong  {
  font-size:28px;
  letter-spacing:-.04em;
  line-height:1.2
}
.service-price>span  {
  font-size:10px;
  color:var(--text-2);
  margin-left:7px
}
.service-price small  {
  display:block;
  color:var(--text-2);
  margin-top:7px
}
.service-featured  {
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  background:linear-gradient(140deg,var(--surface),var(--brand-soft))
}
.service-card h3  {
  min-height:28px
}
.service-card>p  {
  font-size:13px
}
.service-card ul  {
  font-size:11px
}
.service-link  {
  background:transparent;
  border:0;
  border-top:1px solid var(--border);
  color:inherit;
  width:100%;
  text-align:left
}
.pain-section  {
  padding-bottom:0
}
.pain-grid  {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px
}
.pain-card  {
  border:1px solid var(--border);
  border-radius:16px;
  padding:25px;
  background:var(--surface)
}
.pain-mark  {
  display:block;
  font-size:11px;
  color:var(--brand);
  font-weight:800;
  margin-bottom:25px
}
.pain-card h3  {
  font-size:19px;
  line-height:1.35;
  min-height:52px
}
.pain-card p  {
  font-size:12px;
  line-height:1.8;
  margin-top:15px
}
.restart-panel  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  margin-top:24px;
  padding:30px 34px;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:16px;
  background:var(--brand-soft)
}
.restart-panel h3  {
  font-size:20px;
  line-height:1.35
}
.restart-panel p  {
  font-size:12px;
  max-width:680px;
  margin-top:10px
}
.restart-panel>.button  {
  flex-shrink:0
}
.niche-tags  {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:26px;
  align-items:center
}
.niche-tags>span  {
  border:1px solid var(--border);
  border-radius:30px;
  font-size:10px;
  color:var(--text-2);
  padding:5px 11px
}
.niche-tags>span:first-child  {
  border:0;
  padding-left:0;
  padding-right:12px
}
/* Слайдеры с нативной прокруткой. */
.slider  {
  min-width:0
}
.slider-track  {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 40px)/3);
  gap:20px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding:2px 1px 8px;
  scroll-padding-inline:1px
}
.slider-track::-webkit-scrollbar  {
  display:none
}
.slider-track>*  {
  scroll-snap-align:start;
  min-width:0
}
.slider-controls  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:25px;
  gap:20px
}
.slider-controls>div  {
  display:flex;
  align-items:center;
  gap:10px
}
.slider-hint  {
  font-size:10px;
  color:var(--text-2)
}
.slider-counter  {
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:var(--text-2);
  margin-right:12px
}
.slider-controls .icon-button  {
  font-size:20px;
  background:var(--surface)
}
.slider-controls .icon-button:disabled  {
  opacity:.3;
  cursor:default
}
.slider-controls .icon-button:not(:disabled):hover  {
  border-color:var(--brand);
  color:var(--brand)
}
.cases-slider .case-card  {
  display:flex;
  flex-direction:column
}
.cases-slider .case-visual  {
  min-height:0;
  height:220px;
  flex-shrink:0
}
.cases-slider .case-visual>strong  {
  margin-top:28px
}
.cases-slider .case-body  {
  flex:1;
  padding:24px
}
.case-geo  {
  display:block;
  color:var(--text-2);
  font-size:9px;
  min-height:16px;
  margin-bottom:12px
}
.cases-slider .case-body h3  {
  min-height:52px;
  font-size:20px
}
.cases-slider .case-body p  {
  min-height:85px;
  flex:1
}
.cases-slider .case-body dl  {
  font-size:10px
}
.cases-slider .case-body dl>div  {
  display:flex;
  justify-content:space-between
}
.cases-slider .service-link  {
  font-size:11px;
  margin-top:auto;
  line-height:1.5
}
.landing-section  {
  background:var(--surface);
  border-bottom:1px solid var(--border)
}
.landing-intro  {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:90px;
  align-items:center;
  margin-bottom:58px
}
.landing-intro>div>p:not(.eyebrow)  {
  font-size:13px;
  line-height:1.85;
  margin-top:25px;
  max-width:580px
}
.ai-tools  {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0 30px
}
.ai-tools>span  {
  font-size:10px;
  border:1px solid var(--border);
  border-radius:7px;
  padding:6px 10px;
  color:var(--text-2)
}
.landing-points>div  {
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:23px 0;
  border-bottom:1px solid var(--border)
}
.landing-points>div:last-child  {
  border-bottom:0
}
.landing-points .icon  {
  width:24px;
  height:24px;
  color:var(--brand);
  margin-top:2px
}
.landing-points strong  {
  display:block;
  font-size:14px;
  line-height:1.5
}
.landing-points small  {
  display:block;
  color:var(--text-2);
  margin-top:6px
}
.portfolio-caption  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-bottom:23px
}
.portfolio-caption h3  {
  font-size:18px
}
.portfolio-caption p  {
  font-size:10px
}
.landing-slider .slider-track  {
  grid-auto-columns:calc((100% - 24px)/2);
  gap:24px
}
.landing-card  {
  margin:0;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--bg)
}
.landing-card img  {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:5/3;
  object-fit:contain;
  background:#f5f6fa
}
.landing-card figcaption  {
  padding:20px 24px
}
.landing-card figcaption strong  {
  font-size:14px;
  display:block
}
.landing-card figcaption span  {
  font-size:9px;
  color:var(--text-2);
  display:block;
  margin-top:5px
}
.reviews-section  {
  padding-top:0
}
.review-card  {
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  overflow:hidden
}
.review-open  {
  position:relative;
  display:block;
  width:100%;
  padding:14px;
  background:#10141c;
  border:0;
  min-height:290px;
  flex-shrink:0
}
.review-open img  {
  display:block;
  width:100%;
  height:250px;
  object-fit:contain
}
.review-open>span  {
  position:absolute;
  bottom:15px;
  right:15px;
  display:flex;
  align-items:center;
  gap:6px;
  color:#fff;
  background:#202a3c;
  border:1px solid #354359;
  border-radius:8px;
  padding:7px 10px;
  font-size:9px
}
.review-open>span .icon  {
  width:12px;
  height:12px
}
.review-open:hover>span  {
  background:#4c6fff
}
.review-caption  {
  padding:24px
}
.review-stars  {
  font-size:11px;
  color:var(--mint);
  letter-spacing:.1em;
  display:block;
  margin-bottom:10px
}
.review-caption h3  {
  font-size:18px;
  line-height:1.35;
  margin-bottom:10px
}
.review-caption p  {
  font-size:11px;
  line-height:1.8
}
.about-logo-mark  {
  position:relative;
  z-index:1;
  width:225px;
  height:225px;
  object-fit:contain
}
.about-monogram  {
  display:none
}
/* Согласие на обработку данных. */
.brief-form .consent-control  {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:transparent;
  font-size:9px;
  line-height:1.8;
  font-weight:400;
  color:var(--text-2);
  margin:13px 0 0;
  cursor:pointer
}
.brief-form .consent-control input  {
  width:16px;
  height:16px;
  padding:0;
  margin:3px 0 0;
  accent-color:var(--brand);
  flex-shrink:0;
  cursor:pointer
}
.consent-control a  {
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--text-2)
}
.consent-control a:hover  {
  color:var(--brand)
}
.project-form>.button  {
  margin-top:20px;
  width:100%;
  justify-content:space-between
}
.project-form .brief-result  {
  border-top:1px solid var(--border);
  margin-top:20px;
  padding-top:18px
}
.project-form .brief-result p  {
  font-size:11px
}
.project-form .brief-result a  {
  color:var(--brand)
}
.project-form .brief-text  {
  min-height:150px;
  margin:15px 0
}
.project-form .copy-status  {
  display:block;
  font-size:10px;
  color:var(--brand);
  margin-top:10px
}
/* Диалоги и управление фокусом. */
dialog  {
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:0 24px 100px rgba(0,0,0,.28)
}
dialog::backdrop  {
  background:rgba(7,12,25,.66);
  backdrop-filter:blur(5px)
}
.project-dialog  {
  padding:0;
  border-radius:22px;
  width:min(520px,calc(100vw - 32px));
  max-height:calc(100svh - 40px);
  overflow-y:auto
}
.project-dialog .brief-form  {
  border:0;
  border-radius:0;
  background:var(--surface);
  padding:38px 34px 28px
}
.project-dialog .brief-form h3  {
  padding-right:28px;
  font-size:24px;
  line-height:1.3
}
.dialog-close  {
  position:absolute;
  right:14px;
  top:14px;
  z-index:3;
  width:30px;
  height:30px;
  background:var(--bg)
}
.dialog-close .icon  {
  width:15px;
  height:15px
}
.project-dialog input  {
  background:var(--bg)
}
.project-dialog select  {
  background:var(--bg)
}
.project-dialog textarea  {
  background:var(--bg)
}
.review-dialog  {
  width:min(1000px,calc(100vw - 32px));
  padding:24px;
  border-radius:18px;
  max-height:calc(100svh - 40px);
  overflow:auto
}
.review-dialog-head  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px
}
.review-dialog-head h3  {
  font-size:18px;
  line-height:1.4
}
.review-dialog-head .icon-button  {
  flex-shrink:0
}
.review-dialog>img  {
  display:block;
  max-width:100%;
  max-height:calc(100svh - 150px);
  width:auto;
  height:auto;
  object-fit:contain;
  margin:auto;
  border-radius:8px
}
/* Подвал и документы. */
.agency-footer  {
  padding:65px 0 28px
}
.footer-grid  {
  display:grid;
  grid-template-columns:1.25fr 1fr .8fr 1.1fr;
  gap:50px;
  padding-bottom:46px
}
.footer-brand .logo img  {
  width:155px;
  height:46px
}
.footer-brand p  {
  font-size:12px;
  line-height:1.9;
  margin:22px 0
}
.footer-column  {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px
}
.footer-column h3  {
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
  margin-bottom:9px
}
.footer-column a  {
  font-size:11px;
  color:var(--text-2);
  line-height:1.8
}
.footer-column button  {
  font-size:11px;
  color:var(--text-2);
  line-height:1.8
}
.footer-column>span  {
  font-size:11px;
  color:var(--text-2);
  line-height:1.8
}
.footer-column button  {
  background:transparent;
  border:0;
  padding:0;
  text-align:left
}
.footer-column a:hover  {
  color:var(--brand)
}
.footer-column button:hover  {
  color:var(--brand)
}
.footer-contacts a .icon  {
  width:17px;
  height:17px;
  color:var(--brand);
  margin-right:5px
}
.footer-contacts>span  {
  font-size:10px;
  margin-top:10px
}
.agency-footer .footer-bottom  {
  border-top:1px solid var(--border);
  padding-top:24px;
  align-items:flex-start
}
.agency-footer .footer-bottom>div  {
  display:flex;
  gap:20px;
  flex-wrap:wrap
}
.legal-document  {
  max-width:850px;
  margin:36px 0 0
}
.legal-document h1  {
  line-height:1.3;
  margin-bottom:35px
}
.legal-document h2  {
  letter-spacing:-.02em;
  line-height:1.4;
  margin-top:32px
}
.legal-document p  {
  font-size:14px;
  line-height:1.9;
  margin:18px 0
}
.legal-document a  {
  color:var(--brand);
  text-decoration:underline
}
@media(max-width:1100px)  {
  .service-grid  {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .pain-grid  {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .pain-card h3  {
    min-height:0
  }
  .landing-intro  {
    gap:45px
  }
  .cases-slider .case-body  {
    padding:20px
  }
  .cases-slider .case-body h3  {
    font-size:18px
  }
  .cases-slider .case-body dl>div  {
    display:block
  }
  .cases-slider .case-body p  {
    min-height:105px
  }
  .cases-slider .service-link  {
    font-size:10px
  }
  .footer-grid  {
    gap:25px
  }
  .header nav  {
    gap:16px
  }
  .header-inner  {
    gap:20px
  }
}
@media(max-width:820px)  {
  .pain-section  {
    padding-bottom:0
  }
  .restart-panel  {
    flex-direction:column;
    align-items:flex-start;
    padding:26px;
    gap:22px
  }
  .slider-track  {
    grid-auto-columns:calc((100% - 20px)/2)
  }
  .cases-slider .case-visual  {
    height:210px
  }
  .cases-slider .case-body h3  {
    min-height:48px
  }
  .cases-slider .case-body p  {
    min-height:90px
  }
  .cases-slider .case-body dl>div  {
    display:flex
  }
  .landing-intro  {
    grid-template-columns:1fr;
    gap:30px;
    margin-bottom:35px
  }
  .landing-points  {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
  }
  .landing-points>div  {
    display:block;
    border-bottom:0;
    padding:0
  }
  .landing-points .icon  {
    margin-bottom:14px
  }
  .landing-points strong  {
    font-size:12px
  }
  .portfolio-caption  {
    flex-direction:column;
    align-items:flex-start;
    gap:10px
  }
  .landing-slider .slider-track  {
    grid-auto-columns:85%;
    gap:20px
  }
  .reviews-section  {
    padding-top:0
  }
  .footer-grid  {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:38px
  }
  .agency-footer .footer-bottom  {
    justify-content:space-between
  }
  .agency-footer .footer-bottom>div  {
    max-width:300px;
    gap:8px
  }
  .review-open  {
    min-height:250px
  }
  .review-open img  {
    height:220px
  }
}
@media(max-width:480px)  {
  .service-grid  {
    grid-template-columns:1fr
  }
  .pain-grid  {
    grid-template-columns:1fr
  }
  .pain-card  {
    padding:23px
  }
  .pain-card h3  {
    font-size:18px
  }
  .restart-panel h3  {
    font-size:18px
  }
  .restart-panel>.button  {
    width:100%;
    justify-content:space-between;
    font-size:11px
  }
  .niche-tags>span  {
    font-size:9px;
    padding:4px 9px
  }
  .niche-tags>span:first-child  {
    width:100%
  }
  .service-price strong  {
    font-size:29px
  }
  .service-card h3  {
    min-height:0
  }
  .slider-track  {
    grid-auto-columns:100%;
    gap:16px
  }
  .slider-controls  {
    gap:15px;
    margin-top:20px
  }
  .slider-controls>div  {
    gap:8px
  }
  .slider-hint  {
    font-size:8px
  }
  .slider-counter  {
    font-size:10px;
    margin-right:6px
  }
  .cases-slider .case-visual  {
    height:200px
  }
  .cases-slider .case-body  {
    padding:23px
  }
  .cases-slider .case-body h3  {
    font-size:21px;
    min-height:0
  }
  .cases-slider .case-body p  {
    min-height:70px
  }
  .cases-slider .case-body dl>div  {
    display:flex
  }
  .cases-slider .service-link  {
    font-size:11px
  }
  .landing-intro>div>p:not(.eyebrow)  {
    font-size:12px
  }
  .landing-intro .button  {
    width:100%;
    justify-content:space-between
  }
  .ai-tools  {
    gap:7px
  }
  .ai-tools>span  {
    font-size:9px
  }
  .landing-points  {
    grid-template-columns:1fr;
    gap:0
  }
  .landing-points>div  {
    display:flex;
    gap:14px;
    padding:18px 0;
    border-bottom:1px solid var(--border)
  }
  .landing-points .icon  {
    margin:0
  }
  .landing-points strong  {
    font-size:13px
  }
  .landing-slider .slider-track  {
    grid-auto-columns:100%;
    gap:16px
  }
  .landing-card figcaption  {
    padding:16px 20px
  }
  .portfolio-caption h3  {
    font-size:16px
  }
  .portfolio-caption p  {
    font-size:9px
  }
  .review-open  {
    min-height:260px
  }
  .review-open img  {
    height:230px
  }
  .review-caption  {
    padding:22px
  }
  .review-caption h3  {
    font-size:18px
  }
  .about-logo-mark  {
    width:190px;
    height:190px
  }
  .project-dialog  {
    max-height:calc(100svh - 24px);
    width:calc(100vw - 24px);
    border-radius:17px
  }
  .project-dialog .brief-form  {
    padding:35px 22px 22px
  }
  .project-dialog .brief-form h3  {
    font-size:21px
  }
  .brief-form .consent-control  {
    font-size:8px;
    padding:10px;
    gap:8px
  }
  .review-dialog  {
    padding:16px;
    width:calc(100vw - 24px)
  }
  .review-dialog-head h3  {
    font-size:15px
  }
  .footer-grid  {
    gap:32px 22px
  }
  .footer-brand  {
    grid-column:1/-1
  }
  .footer-brand p  {
    margin:18px 0
  }
  .footer-contacts  {
    grid-column:1/-1
  }
  .agency-footer .footer-bottom  {
    font-size:9px;
    gap:20px
  }
  .agency-footer .footer-bottom>div  {
    flex-direction:column;
    max-width:none
  }
  .legal-document p  {
    font-size:12px
  }
}
@media(prefers-reduced-motion:reduce)  {
  .slider-track  {
    scroll-behavior:auto
  }
}
.sending-dialog  {
  padding:40px;
  border:1px solid var(--border);
  border-radius:24px;
  background:var(--surface);
  color:var(--text);
  text-align:center;
  max-width:calc(100vw - 32px)
}
.sending-dialog::backdrop  {
  background:rgba(10,16,28,.7)
}
.sending-spinner  {
  width:44px;
  height:44px;
  margin:0 auto 20px;
  border:4px solid rgba(23,201,180,.2);
  border-top-color:#17c9b4;
  border-radius:50%;
  animation:sending-spin 1s linear infinite
}
.form-error  {
  color:var(--text);
  border-left:3px solid #e77676;
  padding-left:12px
}
@keyframes sending-spin  {
  to  {
    transform:rotate(360deg)
  }
}
@media(prefers-reduced-motion:reduce)  {
  .sending-spinner  {
    animation:none
  }
}
.outcome-section  {
  padding:72px 0 54px;
  background:radial-gradient(ellipse at 8% 10%,color-mix(in srgb,var(--mint) 7%,transparent),transparent 55%),radial-gradient(ellipse at 95% 80%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 55%)
}
.outcome-panel  {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:32px;
  background:var(--surface);
  box-shadow:var(--shadow)
}
.outcome-copy  {
  padding:64px 56px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center
}
.outcome-status  {
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid color-mix(in srgb,var(--mint) 27%,var(--border));
  background:color-mix(in srgb,var(--mint) 8%,var(--surface));
  padding:7px 13px;
  border-radius:30px;
  font-size:11px;
  font-weight:700;
  margin-bottom:28px
}
.outcome-status>span  {
  height:6px;
  width:6px;
  border-radius:50%;
  background:var(--mint)
}
.outcome-status-neutral  {
  background:var(--brand-soft);
  border-color:var(--border)
}
.outcome-status-neutral>span  {
  background:var(--brand)
}
.outcome-copy h1  {
  line-height:1.17;
  letter-spacing:-.045em
}
.outcome-description  {
  margin-top:24px;
  max-width:440px;
  font-size:14px;
  line-height:1.9
}
.outcome-actions  {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px 24px;
  margin-top:34px
}
.outcome-secondary  {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-size:12px;
  font-weight:700;
  padding:15px 0
}
.outcome-secondary .icon  {
  width:16px;
  height:16px
}
.outcome-secondary:hover  {
  color:var(--brand)
}
.outcome-note  {
  font-size:10px;
  line-height:1.8;
  max-width:380px;
  margin-top:26px
}
.outcome-note a  {
  text-decoration:underline;
  text-underline-offset:3px
}
.outcome-side  {
  background:linear-gradient(145deg,color-mix(in srgb,var(--mint) 6%,var(--bg)),color-mix(in srgb,var(--brand) 6%,var(--bg)));
  border-left:1px solid var(--border);
  padding:36px 38px
}
.outcome-art  {
  height:240px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate
}
.outcome-orbit  {
  position:absolute;
  width:215px;
  height:215px;
  border:1px solid color-mix(in srgb,var(--brand) 17%,transparent);
  border-radius:50%;
  transform:rotate(-28deg)
}
.outcome-orbit::after  {
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  top:27px;
  right:27px;
  background:var(--mint);
  border:3px solid var(--surface);
  border-radius:50%;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--mint) 10%,transparent)
}
.outcome-check  {
  width:108px;
  height:108px;
  border-radius:30px;
  background:var(--grad);
  color:white;
  display:grid;
  place-items:center;
  box-shadow:0 16px 36px color-mix(in srgb,var(--mint) 20%,transparent);
  transform:rotate(-6deg)
}
.outcome-check svg  {
  width:54px;
  height:54px;
  transform:rotate(6deg)
}
.outcome-art-label  {
  position:absolute;
  bottom:0;
  font-size:9px;
  letter-spacing:.02em;
  text-align:center;
  color:var(--text-2);
  padding:0 8px
}
.outcome-next  {
  margin-top:28px;
  border:1px solid var(--border);
  border-radius:18px;
  padding:23px;
  background:var(--surface)
}
.outcome-next h2  {
  letter-spacing:-.02em;
  margin-bottom:20px
}
.outcome-next ol  {
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:21px
}
.outcome-next li  {
  display:flex;
  gap:15px
}
.outcome-next li>span  {
  font-size:10px;
  color:var(--brand);
  font-weight:800;
  padding-top:2px
}
.outcome-next strong  {
  font-size:11px;
  display:block
}
.outcome-next p  {
  font-size:10px;
  line-height:1.7;
  margin-top:5px
}
.outcome-footnote  {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  font-size:10px;
  color:var(--text-2);
  margin-top:28px
}
.outcome-footnote .status-dot  {
  width:5px;
  height:5px
}
.error-side  {
  display:flex;
  flex-direction:column;
  justify-content:center
}
.error-art  {
  height:300px
}
.error-art .outcome-orbit  {
  width:260px;
  height:260px
}
.error-number  {
  font-size:112px;
  line-height:1;
  letter-spacing:-.08em;
  font-weight:800;
  color:var(--brand);
  background:var(--grad);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  z-index:1
}
.error-destinations  {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  margin-top:28px
}
.error-destinations a  {
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:10px;
  font-size:10px
}
.error-destinations .icon  {
  width:13px;
  height:13px
}
.error-destinations a:hover  {
  border-color:var(--brand);
  color:var(--brand)
}
@media(max-width:1100px)  {
  .outcome-copy  {
    padding:44px 32px
  }
  .outcome-side  {
    padding:30px 25px
  }
  .outcome-actions  {
    gap:12px 20px
  }
}
@media(max-width:820px)  {
  .outcome-section  {
    padding:40px 0
  }
  .outcome-panel  {
    grid-template-columns:1fr;
    max-width:620px;
    margin:auto;
    border-radius:24px
  }
  .outcome-copy  {
    padding:38px 34px
  }
  .outcome-side  {
    border-left:0;
    border-top:1px solid var(--border);
    padding:24px 34px 32px
  }
  .outcome-art  {
    height:220px
  }
  .outcome-next  {
    margin-top:25px
  }
  .error-art  {
    height:270px
  }
}
@media(max-width:480px)  {
  .outcome-section  {
    padding:28px 0 36px
  }
  .outcome-section .container  {
    padding-inline:16px
  }
  .outcome-copy  {
    padding:30px 24px
  }
  .outcome-description  {
    font-size:12px;
    margin-top:20px
  }
  .outcome-status  {
    margin-bottom:22px;
    font-size:10px
  }
  .outcome-actions  {
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    margin-top:28px
  }
  .outcome-actions .button  {
    width:100%
  }
  .outcome-secondary  {
    padding:13px 0
  }
  .outcome-note  {
    margin-top:18px;
    font-size:9px
  }
  .outcome-side  {
    padding:20px 24px 26px
  }
  .outcome-next  {
    padding:20px
  }
  .outcome-footnote  {
    font-size:8px;
    gap:9px
  }
  .error-number  {
    font-size:98px
  }
  .error-art .outcome-orbit  {
    width:230px;
    height:230px
  }
}
.quick-contact  {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px
}
.quick-contact-label  {
  font-size:10px;
  font-weight:600;
  color:var(--text-2)
}
.messenger-links  {
  display:flex;
  align-items:center;
  gap:8px
}
.messenger-link  {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  padding:6px 13px 6px 7px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  font-size:11px;
  font-weight:700;
  transition:transform .18s,border-color .18s,box-shadow .18s
}
.messenger-link:hover  {
  transform:translateY(-2px);
  border-color:var(--brand);
  box-shadow:0 5px 18px color-mix(in srgb,var(--brand) 10%,transparent)
}
.messenger-link .icon  {
  height:28px;
  width:28px;
  padding:5px;
  background:#229ed9;
  border-radius:8px;
  color:#fff
}
.max-mark  {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex-shrink:0;
  font-size:8px;
  font-weight:800;
  letter-spacing:.3px;
  border-radius:8px;
  background:linear-gradient(135deg,#8a6cff,#c44fd9);
  color:#fff
}
.quick-contact-compact  {
  margin:0
}
.quick-contact-compact .messenger-link  {
  width:40px;
  height:40px;
  min-height:0;
  padding:0;
  border-radius:11px
}
.quick-contact-compact .messenger-telegram  {
  background:#229ed9;
  border-color:transparent;
  color:#fff
}
.quick-contact-compact .messenger-telegram .icon  {
  background:transparent
}
.quick-contact-compact .messenger-max  {
  background:linear-gradient(135deg,#8a6cff,#c44fd9);
  border-color:transparent
}
.quick-contact-compact .max-mark  {
  background:transparent;
  font-size:9px
}
.brief-form .quick-contact  {
  margin:20px 0;
  padding:16px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border)
}
.brief-form .form-intro  {
  margin-top:0
}
.header-actions  {
  gap:10px
}
.header-actions .messenger-links  {
  gap:6px
}
.footer-contacts .quick-contact  {
  margin:0 0 8px
}
.footer-contacts .messenger-link  {
  font-size:11px;
  color:var(--text)
}
.services-slider .slider-track  {
  align-items:stretch
}
.services-slider .service-card  {
  display:flex;
  flex-direction:column;
  transform:none
}
.services-slider .service-card h3  {
  font-size:23px;
  min-height:55px
}
.services-slider .service-card>p  {
  min-height:90px
}
.services-slider .service-card ul  {
  flex:1
}
.services-slider .service-price  {
  min-height:84px
}
.services-slider .service-link  {
  margin-top:auto
}
.service-card>.quick-contact  {
  margin-top:16px
}
.case-body>.quick-contact  {
  margin-top:16px
}
.services-slider .service-card:hover  {
  transform:none
}
.review-stars  {
  display:flex;
  gap:4px;
  color:#e5ae27
}
.review-stars .icon  {
  width:19px;
  height:19px;
  filter:drop-shadow(0 1px 1px rgba(130,83,0,.1))
}
.restart-actions  {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  flex-shrink:0
}
.restart-actions .button  {
  white-space:nowrap
}
.restart-actions .quick-contact  {
  margin:0
}
.audit-copy .quick-contact  {
  --surface:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.25);
  --text-2:rgba(255,255,255,.8);
  color:#fff
}
.audit-copy .messenger-link  {
  color:#fff
}
.audit-copy .audit-note  {
  display:block;
  margin-top:16px
}
.outcome-copy>.quick-contact  {
  margin-top:20px
}
@media(max-width:1200px)  {
  .header-cta  {
    display:none
  }
  .header nav  {
    gap:16px
  }
}
@media(max-width:820px)  {
  .restart-actions  {
    align-items:flex-start
  }
  .services-slider .service-card h3  {
    font-size:21px
  }
  .services-slider .service-card>p  {
    min-height:110px
  }
}
@media(max-width:480px)  {
  .header-inner  {
    gap:8px
  }
  .header .logo img  {
    width:92px;
    height:29px
  }
  .header-actions  {
    gap:6px
  }
  .header-actions .icon-button  {
    width:32px;
    height:32px
  }
  .header-actions .messenger-link  {
    width:32px;
    height:32px
  }
  .header-actions .messenger-links  {
    gap:6px
  }
  .header-actions .messenger-link .icon  {
    width:26px;
    height:26px
  }
  .header-actions .max-mark  {
    font-size:8px
  }
  .hero-copy>.quick-contact  {
    margin-top:19px
  }
  .quick-contact  {
    gap:10px
  }
  .quick-contact-label  {
    font-size:9px
  }
  .services-slider .service-card h3  {
    min-height:0
  }
  .services-slider .service-card>p  {
    min-height:0
  }
  .services-slider .service-price  {
    min-height:75px
  }
  .restart-actions  {
    width:100%;
    align-items:stretch
  }
  .restart-actions>.button  {
    width:100%;
    font-size:11px
  }
  .restart-actions .quick-contact  {
    justify-content:center
  }
}
/* Единые размеры текста и компактный первый экран. */
body h1  {
  line-height:1.3;
  letter-spacing:-.035em
}
body .hero h1  {
  line-height:1.3;
  letter-spacing:-.035em
}
body .direct-copy h1  {
  line-height:1.3;
  letter-spacing:-.035em
}
body h2  {
  line-height:1.35
}
body .audit-copy h2  {
  line-height:1.35
}
body .about-copy h2  {
  line-height:1.35
}
body .contact-copy h2  {
  line-height:1.35
}
body .direct-contact-panel h2  {
  line-height:1.35
}
body small  {
  line-height:1.65
}
body .landing-points small  {
  line-height:1.65
}
body .service-price small  {
  line-height:1.65
}
body .process-card small  {
  line-height:1.65
}
body .case-visual small  {
  line-height:1.65
}
body .direct-price-card small  {
  line-height:1.65
}
body .direct-scope-card small  {
  line-height:1.65
}
body .direct-contact-panel aside small  {
  line-height:1.65
}
.hero-illustration  {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0
}
.hero-illustration img  {
  display:block;
  width:100%;
  max-width:440px;
  height:auto;
  object-fit:contain
}
body .hero  {
  padding-block:46px
}
body .hero-grid  {
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center
}
body .direct-hero-grid  {
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center
}
body .hero-description  {
  font-size:14px;
  line-height:1.8;
  margin-top:20px;
  max-width:460px
}
body .direct-lead  {
  font-size:14px;
  line-height:1.8;
  margin-top:20px;
  max-width:460px
}
body .hero-stats  {
  margin-top:25px;
  padding-top:20px
}
body .direct-hero  {
  padding-top:24px;
  padding-bottom:44px
}
body .direct-breadcrumb  {
  margin-bottom:26px
}
body .hero-actions  {
  margin-top:24px
}
.lazy-image  {
  background:var(--surface-2)
}
@media(max-width:820px)  {
  body .hero-grid  {
    gap:28px
  }
  body .direct-hero-grid  {
    gap:28px
  }
  .hero-illustration img  {
    max-width:340px
  }
}
@media(max-width:600px)  {
  body .hero-grid  {
    grid-template-columns:1fr;
    gap:20px
  }
  body .direct-hero-grid  {
    grid-template-columns:1fr;
    gap:20px
  }
  body .hero  {
    padding-block:26px
  }
  body .hero-illustration img  {
    max-width:240px
  }
  body .hero-description  {
    font-size:12px;
    margin-block:14px
  }
  body .direct-lead  {
    font-size:12px;
    margin-block:14px
  }
  body .hero-stats  {
    margin-top:18px;
    padding-top:16px
  }
  body .direct-proof  {
    margin-top:18px;
    padding-top:16px
  }
  body .hero-stats strong  {
    font-size:18px
  }
  body .direct-proof strong  {
    font-size:18px
  }
  body .section  {
    padding-block:40px
  }
  body .direct-hero  {
    padding-top:18px
  }
}
/* Размеры заголовков и мелкого текста задаются в одном месте для всех страниц. */
:root  {
  --h1-size:36px;
  --h2-size:28px;
  --small-size:12px
}
h1  {
  font-size:var(--h1-size)
}
h2  {
  font-size:var(--h2-size)
}
small  {
  font-size:var(--small-size)
}
@media(max-width:600px)  {
  :root  {
    --h1-size:20px;
    --h2-size:18px;
    --small-size:10px
  }
}
/* Карточка роста и плавающие плашки согласованного первого экрана главной. */
.hero-visual {
  position:relative;
  height:470px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0
}
.orbit {
  position:absolute;
  border:1px dashed color-mix(in srgb,var(--brand) 20%,transparent);
  border-radius:50%;
  pointer-events:none
}
.orbit-one {
  width:460px;
  height:460px
}
.orbit-two {
  width:570px;
  height:570px;
  opacity:.45
}
.growth-card {
  width:430px;
  max-width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:22px;
  padding:24px;
  box-shadow:var(--shadow);
  position:relative;
  transform:rotate(-3deg)
}
.growth-top {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  font-weight:800;
  border-bottom:1px solid var(--border);
  padding-bottom:18px
}
.card-symbol {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--brand-soft);
  color:var(--brand)
}
.growth-top small {
  font-weight:400;
  color:var(--text-2)
}
.live-dot {
  margin-left:auto;
  width:6px;
  height:6px;
  background:var(--mint);
  border-radius:50%
}
.growth-heading {
  padding:20px 0 12px
}
.growth-heading>span {
  font-size:9px;
  color:var(--text-2);
  display:block;
  margin-bottom:6px
}
.growth-heading strong {
  font-size:23px;
  line-height:1.3;
  letter-spacing:-.025em
}
.growth-heading strong span {
  color:var(--text-2);
  font-weight:500
}
.chart {
  position:relative;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0 22px
}
.chart>svg {
  width:100%;
  height:130px;
  z-index:1
}
.chart>span {
  font-size:8px;
  color:var(--text-2)
}
.chart-grid {
  position:absolute;
  inset:0 0 20px;
  background:repeating-linear-gradient(to top,transparent 0,transparent 31px,var(--border) 32px,transparent 33px)
}
.chart-line {
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:draw-chart 1.6s ease-out .15s forwards
}
.pipeline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--border);
  padding-top:16px
}
.pipeline>div {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  font-size:8px;
  color:var(--text-2)
}
.pipeline .icon {
  width:20px;
  height:20px
}
.pipeline b {
  font-size:12px;
  color:var(--text-2)
}
.pipeline .pipeline-goal {
  color:var(--mint)
}
.floating-label {
  position:absolute;
  top:2px;
  left:54px;
  font-size:10px;
  border:1px solid var(--border);
  background:var(--surface);
  padding:11px 17px;
  border-radius:30px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:3;
  transform:rotate(-3deg)
}
.floating-chip {
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:11px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:14px 19px;
  border-radius:13px;
  font-size:10px;
  line-height:1.6
}
.floating-chip>.icon {
  color:var(--brand)
}
.floating-chip span {
  color:var(--text-2)
}
.floating-chip strong {
  color:var(--text);
  font-weight:800
}
.chip-one {
  right:-6px;
  top:75px;
  transform:rotate(5deg)
}
.chip-two {
  left:-12px;
  bottom:38px;
  transform:rotate(3deg)
}
.chip-check {
  width:30px;
  height:30px;
  background:color-mix(in srgb,var(--mint) 12%,transparent);
  border-radius:50%;
  display:grid;
  place-items:center
}
.chip-check .icon {
  width:18px;
  color:var(--mint)
}
.visual-caption {
  position:absolute;
  bottom:0;
  right:12px;
  font-size:8px;
  color:var(--text-2)
}
@media(max-width:1100px) {
  .hero-visual {
    height:450px
  }
  .growth-card {
    width:370px;
    padding:22px
  }
  .chip-one {
    right:-10px
  }
  .chip-two {
    left:0
  }
  .floating-label {
    left:25px
  }
}
@media(max-width:820px) {
  .hero-visual {
    max-width:550px;
    width:100%;
    height:460px;
    margin:20px auto 0
  }
  .growth-card {
    width:430px
  }
  .floating-label {
    left:60px
  }
  .chip-one {
    right:0
  }
  .chip-two {
    left:0
  }
}
@media(max-width:480px) {
  .hero-visual {
    height:390px;
    margin-top:6px
  }
  .growth-card {
    width:100%;
    padding:18px;
    border-radius:18px;
    transform:rotate(-2deg)
  }
  .growth-heading strong {
    font-size:21px
  }
  .growth-top {
    font-size:10px
  }
  .growth-top small {
  }
  .card-symbol {
    width:34px;
    height:34px
  }
  .chart>svg {
    height:100px
  }
  .floating-label {
    left:14px;
    top:0;
    font-size:8px;
    padding:8px 12px
  }
  .floating-chip {
    padding:10px 12px;
    font-size:8px;
    gap:7px
  }
  .floating-chip>.icon {
    width:18px
  }
  .chip-one {
    right:-3px;
    top:42px
  }
  .chip-two {
    left:8px;
    bottom:10px
  }
  .visual-caption {
    bottom:-9px;
    right:0;
    font-size:7px
  }
  .orbit-one {
    width:360px;
    height:360px
  }
  .orbit-two {
    width:420px;
    height:420px
  }
}
@media(prefers-reduced-motion:reduce) {
  .chart-line {
    stroke-dashoffset:0
  }
}
/* Цветные акценты, мягкая подсветка и фоновые фигуры. */
/* Живая композиция первого экрана каталога услуг. */
.catalog-stage {position:relative;min-width:0;height:500px;display:grid;place-items:center;isolation:isolate}
.catalog-ring {position:absolute;border:1px dashed color-mix(in srgb,var(--brand) 16%,transparent);border-radius:50%;z-index:-1;pointer-events:none}
.ring-wide {width:530px;height:530px;transform:rotate(-18deg)}
.ring-tight {width:430px;height:390px;transform:rotate(24deg);border-style:solid;border-color:color-mix(in srgb,var(--mint) 15%,transparent)}
.catalog-stage::before {content:'';position:absolute;inset:-30px;background:radial-gradient(ellipse,color-mix(in srgb,var(--mint) 14%,transparent),transparent 65%);z-index:-1;pointer-events:none}
.catalog-system-card {position:relative;width:min(100%,440px);border:1px solid var(--border);border-radius:24px;padding:25px;background:var(--surface);box-shadow:var(--shadow);transform:rotate(-2deg);animation:catalog-enter .8s ease both}
.catalog-card-header {display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);padding-bottom:17px}
.catalog-card-header strong {font-size:13px;display:block}
.catalog-card-header small {display:block;margin-top:3px;color:var(--text-2)}
.catalog-live {width:7px;height:7px;background:var(--mint);border-radius:50%;margin-left:auto;flex-shrink:0;animation:catalog-pulse 3.2s ease-in-out infinite}
.catalog-artwork {height:235px;position:relative;display:grid;place-items:center}
.catalog-artwork img {position:relative;width:265px;height:265px;object-fit:contain;z-index:1;animation:catalog-art-float 8s ease-in-out infinite}
.catalog-art-glow {position:absolute;width:240px;height:170px;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%);bottom:5px}
.catalog-route svg {display:block;width:100%;height:34px;overflow:visible}
.catalog-route path {stroke-width:2;stroke-linecap:round}
.catalog-route-base {stroke:var(--border)}
.catalog-route-draw {stroke:var(--mint);stroke-dasharray:330;stroke-dashoffset:330;animation:catalog-draw 1.6s .3s ease forwards}
.catalog-route circle {fill:var(--surface);stroke:var(--mint);stroke-width:2;animation:catalog-point 3.5s ease-in-out infinite}
.catalog-route circle:nth-of-type(2) {animation-delay:.5s}
.catalog-route circle:nth-of-type(3) {animation-delay:1s}
.catalog-route>div {display:flex;justify-content:space-between;padding:0 12px;font-size:11px;font-weight:600;color:var(--text-2)}
.catalog-card-footer {display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding-top:17px;margin-top:20px;font-size:10px;color:var(--text-2)}
.catalog-card-footer>span {display:flex;align-items:center;gap:6px}
.catalog-card-footer .icon {width:15px;height:15px;color:var(--brand)}
.catalog-float {position:absolute;display:flex;align-items:center;gap:11px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:14px;padding:15px 18px;font-size:11px;line-height:1.6;z-index:2;color:var(--text-2);animation:catalog-label-float 7s ease-in-out infinite}
.catalog-float strong {color:var(--text)}
.catalog-float>.icon {color:var(--brand);width:23px;flex-shrink:0}
.catalog-float-top {right:-4px;top:93px;--tilt:5deg}
.catalog-float-bottom {left:-9px;bottom:-25px;--tilt:-4deg;animation-delay:-3s}
.catalog-check {width:31px;height:31px;border-radius:50%;background:color-mix(in srgb,var(--mint) 12%,transparent);color:var(--mint);display:grid;place-items:center;position:relative;overflow:hidden}
.catalog-check .icon {width:17px;height:17px}
.catalog-check::after {content:'';position:absolute;inset:-50%;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-100%);animation:catalog-shine 6s ease-in-out infinite}
@keyframes catalog-enter {from{opacity:0;transform:translateY(14px) rotate(-2deg)}to{opacity:1;transform:translateY(0) rotate(-2deg)}}
@keyframes catalog-draw {to{stroke-dashoffset:0}}
@keyframes catalog-pulse {0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint) 20%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
@keyframes catalog-point {0%,100%{fill:var(--surface)}45%{fill:var(--mint)}}
@keyframes catalog-art-float {0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes catalog-label-float {0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-6px) rotate(var(--tilt))}}
@keyframes catalog-shine {0%,65%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
@media(max-width:1100px){.catalog-system-card{padding:22px}.catalog-float-top{right:-8px}.catalog-float{padding:12px 14px;font-size:10px}.catalog-card-header strong{font-size:12px}.catalog-card-footer{font-size:9px}}
@media(max-width:820px){.catalog-stage{width:100%;max-width:550px;margin:20px auto 0}.catalog-float-top{right:0}.catalog-float-bottom{left:0}}
@media(max-width:600px){.catalog-stage{height:450px;margin-top:12px}.catalog-system-card{padding:20px 17px;border-radius:19px}.catalog-artwork{height:210px}.catalog-artwork img{width:235px;height:235px}.catalog-card-header{gap:9px;padding-bottom:14px}.catalog-card-header .card-symbol{width:32px;height:32px}.catalog-card-header strong{font-size:11px}.catalog-float{font-size:9px;padding:11px 12px;gap:8px}.catalog-float-top{top:78px;right:-3px}.catalog-float-bottom{bottom:-24px;left:4px}.catalog-float>.icon{width:18px}.catalog-route>div{font-size:10px;padding:0 7px}.catalog-card-footer{font-size:9px;gap:6px}.ring-wide{width:410px;height:410px}.ring-tight{width:330px;height:330px}}
@media(prefers-reduced-motion:reduce){.catalog-system-card,.catalog-artwork img,.catalog-float,.catalog-live,.catalog-route circle,.catalog-check::after{animation:none}.catalog-float{transform:rotate(var(--tilt))}.catalog-route-draw{animation:none;stroke-dashoffset:0}}
@media(min-width:601px) and (max-width:1100px) {
  body .catalog-hero h1 {font-size:30px}
}
.direct-scope-card h3,.pain-card h3  {
  color:var(--brand)
}
h2 .muted  {
  color:var(--brand)
}
:root[data-theme=dark] h2 .muted  {
  color:#7edbd0
}
.section-heading h2 .muted  {
  background:var(--grad);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent
}
.approach-section,.reviews-section,#price,.direct-scope  {
  position:relative;
  isolation:isolate;
  overflow:clip
}
.approach-section::before,.reviews-section::before,#price::before,.direct-scope::before  {
  content:'';
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--mint) 10%,transparent),transparent 68%);
  pointer-events:none;
  z-index:-1;
  right:-180px;
  top:-180px
}
.reviews-section::before  {
  right:auto;
  left:-230px;
  top:60px;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 10%,transparent),transparent 68%)
}
#price::after  {
  content:'';
  position:absolute;
  width:240px;
  height:240px;
  border:1px solid color-mix(in srgb,var(--brand) 12%,transparent);
  border-radius:50%;
  right:5%;
  top:10%;
  pointer-events:none;
  z-index:-1
}
.direct-scope::before  {
  top:auto;
  bottom:-180px
}
.catalog-visual  {
  position:relative
}
.catalog-chip  {
  position:absolute;
  bottom:48px;
  left:15px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 20px;
  border:1px solid var(--border);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:var(--shadow);
  font-size:12px;
  line-height:1.6;
  transform:rotate(-3deg)
}
.catalog-chip .icon  {
  color:var(--brand)
}
.catalog-chip strong  {
  color:var(--text)
}
body .direct-copy h1  {
  font-size:30px
}
body .hero-visual  {
  height:480px;
  min-width:0
}
body .hero-copy>.hero-note  {
  margin-top:18px
}
body .hero:has(.hero-visual)  {
  padding-block:58px
}
@media(max-width:1100px) {
  body .direct-hero-grid {
    grid-template-columns:1fr
  }
  .direct-copy {
    max-width:720px
  }
  .direct-hero .hero-illustration {
    max-width:440px;
    width:100%;
    margin-inline:auto
  }
}
@media(max-width:820px) {
  body .hero-grid {
    grid-template-columns:1fr
  }
  .catalog-visual {
    max-width:500px;
    width:100%;
    margin-inline:auto
  }
  body .hero-visual {
    height:460px
  }
}
@media(max-width:600px) {
  body .direct-copy h1 {
    font-size:20px
  }
  body .hero:has(.hero-visual) {
    padding-block:30px
  }
  body .hero-visual {
    height:390px
  }
  .catalog-chip {
    bottom:10px;
    left:10px;
    padding:10px 14px;
    font-size:10px
  }
  .hero-visual small {
    font-size:var(--small-size)
  }
}
@media(max-width:600px) {
  .hero-visual .floating-label {
    top:-14px
  }
  .hero-visual .chip-one {
    top:64px
  }
}

/* Общая выпадающая навигация на всех экранах. */
.header-inner {position:relative}
.header-actions {margin-left:auto}
.header .menu-toggle {display:grid;position:relative;flex-shrink:0;color:var(--text);cursor:pointer;transition:background .2s,border-color .2s}
.header .menu-toggle[aria-expanded=true] {background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
.menu-toggle[aria-expanded=true]>.icon {visibility:hidden}
.menu-toggle[aria-expanded=true]::before,
.menu-toggle[aria-expanded=true]::after {content:'';position:absolute;width:17px;height:2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.menu-toggle[aria-expanded=true]::after {transform:rotate(-45deg)}
.header-dropdown {position:absolute;top:calc(100% - 5px);right:32px;width:min(680px,calc(100vw - 48px));max-height:calc(100dvh - 110px);overflow:auto;overscroll-behavior:contain;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:26px;box-shadow:var(--shadow);z-index:20;animation:dropdown-appear .2s ease both}
.header-dropdown[hidden] {display:none!important}
.header-dropdown-grid {display:grid;grid-template-columns:.7fr 1.3fr;gap:30px}
.header .header-dropdown nav {position:static;inset:auto;display:flex;flex-direction:column;gap:5px;padding:0;background:none;border:0;font-size:12px}
.dropdown-caption {font-size:9px;letter-spacing:.1em;font-weight:800;color:var(--text-2);margin-bottom:12px}
.dropdown-primary>a {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border-radius:10px}
.dropdown-primary .icon {width:14px;height:14px;color:var(--text-2)}
.dropdown-primary>a:hover {background:var(--brand-soft)}
.dropdown-services>a {display:flex;align-items:center;gap:12px;padding:11px;border-radius:12px;transition:background .2s}
.dropdown-services>a:hover,
.dropdown-services>a[aria-current=page] {background:var(--brand-soft);color:var(--brand)}
.dropdown-service-icon {width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:var(--brand-soft);color:var(--brand)}
.dropdown-service-icon>.icon {width:19px;height:19px}
.dropdown-services>a>span:nth-child(2) {min-width:0}
.dropdown-services strong {font-size:12px;line-height:1.5;display:block}
.dropdown-services small {display:block;margin-top:3px;color:var(--text-2);line-height:1.5}
.dropdown-services>a>.icon {width:14px;height:14px;margin-left:auto;flex-shrink:0;color:var(--text-2)}
.dropdown-contact {display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--border);padding-top:20px;margin-top:22px}
.dropdown-contact>div:first-child strong {display:block;font-size:12px}
.dropdown-contact>div:first-child>span {display:block;font-size:10px;color:var(--text-2);margin-top:4px}
.dropdown-contact .quick-contact {margin:0}
.dropdown-contact .messenger-link {padding:10px 12px}
@keyframes dropdown-appear {from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:820px) {
  .header-dropdown {right:24px;max-height:calc(100dvh - 95px)}
}
@media(max-width:600px) {
  .header-dropdown {right:20px;width:calc(100vw - 40px);padding:20px;border-radius:18px}
  .header-dropdown-grid {grid-template-columns:1fr;gap:22px}
  .header .dropdown-primary {display:grid;grid-template-columns:repeat(2,1fr);gap:3px}
  .dropdown-primary>.dropdown-caption {grid-column:1/-1;margin-bottom:6px}
  .dropdown-primary>a {padding:10px;font-size:11px}
  .dropdown-contact {align-items:flex-start;flex-direction:column;gap:12px}
  .dropdown-contact .quick-contact,.dropdown-contact .messenger-links {width:100%}
  .dropdown-contact .messenger-link {flex:1;justify-content:center}
}
@media(prefers-reduced-motion:reduce) {.header-dropdown{animation:none}}

/* Двухуровневая навигация ниш. */
.niches-toggle,.header-section-toggle {display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.niches-toggle:hover,.niches-toggle[aria-expanded=true] {background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.niche-dropdown {width:min(640px,calc(100vw - 48px))}
.niche-dropdown>.dropdown-caption {display:block}
.niche-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px}
.header .niche-categories {gap:4px}
.niche-categories button,.niche-categories>a,.niche-panel>a {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:13px;text-align:left;line-height:1.5;cursor:pointer}
.niche-categories button[aria-expanded=true],.niche-categories button:hover,.niche-categories>a:hover,.niche-panel>a:hover,.niche-panel>a[aria-current=page] {background:var(--brand-soft);color:var(--brand)}
.niche-panels {border-left:1px solid var(--border);padding-left:16px}
.header .niche-panel[hidden] {display:none!important}
.niche-grid .icon {width:13px;height:13px;flex-shrink:0;color:var(--text-2)}
@media(max-width:600px) {
 .niches-toggle {font-size:12px;padding:10px;gap:6px}
 .niche-grid {grid-template-columns:.95fr 1.05fr;gap:8px}
 .niche-panels {padding-left:8px}
 .niche-categories button,.niche-categories>a,.niche-panel>a {padding:9px 6px;font-size:11px;gap:5px}
 .niche-dropdown {padding:16px}
}
/* Дополнительные разделы навигации агентства. */
.header-section-toggle:hover,.header-section-toggle[aria-expanded=true]{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.company-dropdown{width:min(420px,calc(100vw - 40px))}.company-dropdown>.dropdown-caption,.useful-dropdown>.dropdown-caption{display:block;margin-bottom:16px}
.company-dropdown nav>a{display:flex;align-items:center;justify-content:space-between;padding:14px;border-radius:12px;gap:18px}.company-dropdown nav>a:hover,.useful-groups a:hover{background:var(--brand-soft);color:var(--brand)}.company-dropdown strong{font-size:14px;display:block}.company-dropdown small{font-size:12px;color:var(--text-2);display:block;margin-top:3px}.company-dropdown .icon,.useful-groups .icon{width:16px;height:16px;flex-shrink:0;color:var(--brand)}
.useful-groups{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}.useful-groups h3{margin:0 0 8px;font-size:13px;color:var(--brand)}.useful-groups a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px;border-radius:9px;font-size:12px}.useful-groups nav:nth-child(4){grid-column:2;grid-row:1 / span 3}
@media(max-width:1050px){.header .logo>span{display:none}.header-actions{gap:8px}.header-section-toggle,.niches-toggle{padding:10px 12px}}
@media(max-width:850px){.header-cta{display:none!important}}
@media(max-width:600px){.header .header-inner{height:auto;min-height:108px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 36px 36px;gap:10px 6px;padding-top:12px;padding-bottom:12px}.header .logo{grid-row:1;grid-column:1 / span 3}.header-actions{display:contents}.header .theme-toggle{grid-row:1;grid-column:4}.header .menu-toggle{grid-row:1;grid-column:5}.header .niches-toggle{grid-row:2;grid-column:1}.header .about-toggle{grid-row:2;grid-column:2}.header .useful-toggle{grid-row:2;grid-column:3 / span 3}.header-section-toggle,.niches-toggle{padding:8px;font-size:12px;gap:7px}.header-dropdown{max-height:calc(100dvh - 145px);top:calc(100% + 3px)}.company-dropdown small{font-size:10px}.useful-groups{grid-template-columns:1fr;gap:20px}.useful-groups nav:nth-child(4){grid-column:auto;grid-row:auto}html{scroll-padding-top:145px}}

/* Единая шапка: разделы сайта и содержание текущей страницы. */
.header .header-inner{gap:18px}.header .logo{flex:none}.header-actions{gap:8px}.header-chevron{display:block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);flex:none}.header [aria-expanded=true]>.header-chevron{transform:translateY(2px) rotate(225deg)}.header-section-toggle,.niches-toggle{height:42px;line-height:1;gap:10px}.header .page-toggle{font-size:12px;border-color:transparent;background:transparent;padding:8px}.header .header-cta{white-space:nowrap;font-size:12px}.services-dropdown{width:min(440px,calc(100vw - 40px))}.page-dropdown{left:160px;right:auto;width:min(390px,calc(100vw - 40px))}.page-dropdown nav>a{padding:11px 12px;border-radius:10px;line-height:1.5}.page-dropdown nav>a:hover{background:var(--brand-soft);color:var(--brand)}
@media(max-width:1100px){.header .header-inner{gap:8px}.header-section-toggle,.niches-toggle{padding:8px 10px;font-size:12px}.header .header-cta{padding:10px 12px}.header .page-toggle{font-size:11px}}
@media(min-width:601px) and (max-width:850px){.header .header-cta{display:none}.header .logo img{width:100px;height:auto}.header .header-inner{gap:6px}.header-actions{gap:5px}.header-section-toggle,.niches-toggle{padding:8px;font-size:11px}.header .page-toggle{max-width:95px;white-space:normal;line-height:1.3}}
@media(max-width:600px){.header .header-inner{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 6px;min-height:108px}.header .logo{grid-column:1 / span 2;grid-row:1}.header .page-toggle{grid-column:3;grid-row:1;font-size:10px;padding:4px;gap:6px;white-space:normal;line-height:1.3}.header .theme-toggle{grid-column:4;grid-row:1;justify-self:end}.header .services-toggle{grid-row:2;grid-column:1}.header .niches-toggle{grid-row:2;grid-column:2}.header .about-toggle{grid-row:2;grid-column:3}.header .useful-toggle{grid-row:2;grid-column:4}.header-section-toggle,.niches-toggle{font-size:11px;padding:8px 6px;height:36px;gap:7px}.header .header-cta{display:none}.page-dropdown{left:20px;right:20px}}

/* Кнопка навигации и выбор нескольких задач проекта. */
.header .page-toggle>.icon{width:18px;height:18px;flex:none}.page-toggle-text{display:inline}.service-picker{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:13px 15px;text-align:left;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font-size:13px;cursor:pointer;line-height:1.6}.service-picker>span:first-child{min-width:0}.service-picker>span:last-child{font-size:22px;color:var(--brand);flex:none}.service-picker:hover{border-color:var(--brand)}
.service-dialog{width:min(530px,calc(100vw - 32px));max-height:85dvh;border:1px solid var(--border);border-radius:24px;padding:26px;background:var(--surface);color:var(--text);box-shadow:var(--shadow);overflow:auto}.service-dialog::backdrop{background:rgba(5,9,25,.6);backdrop-filter:blur(5px)}.service-dialog-head{display:flex;gap:20px;justify-content:space-between;align-items:flex-start}.service-dialog-head h3{font-size:22px;margin:8px 0}.service-dialog-head p:not(.eyebrow){font-size:13px;color:var(--text-2);margin:0}.service-dialog-head .eyebrow{font-size:10px;margin:0}.service-options{display:grid;gap:8px;margin:24px 0}.service-options label{display:flex;align-items:center;gap:13px;padding:13px 15px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:var(--bg)}.service-options label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}.service-options input{width:18px;height:18px;accent-color:var(--brand);flex:none}.service-options strong{font-size:13px;font-weight:700}.service-options small{display:block;font-size:12px;color:var(--text-2);margin-top:3px}.service-dialog-bottom{position:sticky;bottom:-26px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--surface);border-top:1px solid var(--border);padding:16px 0 4px}.service-dialog-bottom>span{font-size:12px;color:var(--text-2)}
@media(max-width:600px){.header .page-toggle{justify-self:end;width:36px;height:36px;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.header .page-toggle-text,.header .page-toggle .header-chevron{display:none}.header .page-toggle>.icon{width:20px;height:20px}.service-dialog{padding:20px;border-radius:20px}.service-dialog-head h3{font-size:18px}.service-options small{font-size:10px}.service-dialog-bottom{bottom:-20px}.service-picker{font-size:12px}}

/* Полосы прокрутки в стиле основного сайта Shinta. */
:root{--sb-thumb:#cdd2e0;--sb-thumb-hover:#b3b9cc;--sb-grip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='7'%3E%3Cpath d='M0 .5h6M0 3.5h6M0 6.5h6' stroke='%23fff' stroke-opacity='.95'/%3E%3C/svg%3E");--sb-grip-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6'%3E%3Cpath d='M.5 0v6M3.5 0v6M6.5 0v6' stroke='%23fff' stroke-opacity='.95'/%3E%3C/svg%3E")}
:root[data-theme=dark]{--sb-thumb:#3a3e57;--sb-thumb-hover:#4d5274;--sb-grip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='7'%3E%3Cpath d='M0 .5h6M0 3.5h6M0 6.5h6' stroke='%23fff' stroke-opacity='.35'/%3E%3C/svg%3E");--sb-grip-h:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6'%3E%3Cpath d='M.5 0v6M3.5 0v6M6.5 0v6' stroke='%23fff' stroke-opacity='.35'/%3E%3C/svg%3E")}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{min-height:36px;min-width:36px;border:2px solid transparent;border-radius:99px;background-clip:padding-box;background-color:var(--sb-thumb);background-image:var(--sb-grip);background-position:center;background-repeat:no-repeat}
::-webkit-scrollbar-thumb:horizontal{background-image:var(--sb-grip-h)}
::-webkit-scrollbar-thumb:hover{background-color:var(--sb-thumb-hover)}
::-webkit-scrollbar-thumb:active{background-color:var(--brand)}
@supports not selector(::-webkit-scrollbar){html,.header-dropdown,dialog,.guide-table-wrap{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}}