@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

body.vk-indigo-home {
  --ink: #151632;
  --accent: #4c39d7;
  --lime: #ded8ff;
  --pink: #f0dcff;
  --muted: #525970;
  --line: #e1e3f0;
  --paper: #f8f8fe;
  background: #fafafe;
  color: var(--ink);
  font-family: Inter, "DM Sans", Arial, sans-serif;
}
.vk-indigo-home h1,.vk-indigo-home h2,.vk-indigo-home h3,.vk-indigo-home .brand {
  font-family: Geist, Inter, Arial, sans-serif;
}
.vk-indigo-home .wrap { width: min(1170px, calc(100% - 64px)); }
.vk-indigo-home :is(a,button,input,summary):focus-visible { outline-color: #6652e6; }
.vk-indigo-home .button { border-radius: 10px; }
.vk-indigo-home .button.lime,.vk-indigo-home .button.dark {
  background: linear-gradient(137deg, #4735ce, #604df1);
  color: #fff;
  box-shadow: 0 5px 12px #4433b324;
}
.vk-indigo-home .button:is(.lime,.dark):hover { background: #3f2bbd; }
.vk-indigo-home main {
  background: radial-gradient(ellipse 820px 450px at 84% 0, #eeefff, transparent 100%);
}
.vk-indigo-home .hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(24px, 6vw, 85px);
  padding-block: clamp(32px, 5.3vw, 78px) clamp(28px, 4.5vw, 63px);
}
.vk-indigo-home .hero h1 {
  font-size: clamp(45px, 5.3vw, 74px);
  line-height: 1.02;
  letter-spacing: -.058em;
  font-weight: 800;
}
.vk-indigo-home .eyebrow { color: #5d4bb9; letter-spacing: .11em; }
.vk-indigo-home .hero-copy > .eyebrow {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  border: 1px solid #e3ddfa;
  border-radius: 999px;
  padding: 5px 10px;
  margin-bottom: 18px;
  background: #f2eeff;
  font-size: 10px;
}
.vk-indigo-home .hero-copy > .eyebrow i { background: #8b73fa; border: 0; margin: 0; }
.vk-indigo-home .hero .highlight {
  color: var(--accent);
  white-space: normal;
  background: none;
}
.vk-indigo-home .hero .highlight::before { content: none; }
.vk-indigo-home .hero-copy > p { max-width: 44ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; margin-top: 20px; }
.vk-indigo-home .hero-actions { margin-top: 24px; gap: 15px 18px; }
.vk-indigo-home .hero-actions .button { min-height: 48px; font-size: 14px; padding: 10px 15px; }
.vk-indigo-home .hero-actions .text-link { color: var(--ink); text-decoration-color: #beb4ee; font-size: 14px; }
.vk-indigo-home .hero-checks { color: var(--muted); margin-top: 16px; gap: 8px 16px; font-size: 12px; }
.vk-indigo-home .hero-checks > span::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 6px; background: #7157e4; vertical-align: .16em; }
.vk-indigo-home .hero-art {
  min-width: 0;
  position: relative;
  isolation: isolate;
  height: clamp(320px, 35vw, 465px);
  overflow: hidden;
  border-radius: 25px;
  border: 1px solid #8a76f3;
  background: radial-gradient(ellipse at 95% 6%, #dfc8ff, transparent 54%),
    radial-gradient(ellipse at 4% 100%, #7896ff, transparent 60%), linear-gradient(150deg, #4534c6, #7963ee);
  box-shadow: 0 16px 38px -27px #3826949c;
}
.vk-indigo-home .hero-art .art-grid {
  opacity: .47;
  border-radius: inherit;
  background: repeating-radial-gradient(ellipse at 47% 37%, transparent 0 43px, #ffffff3a 44px 45px, transparent 46px 64px);
}
.vk-indigo-home .hero-art .creator-photo {
  inset: 8% 15% 8% 19%;
  width: auto;
  height: auto;
  transform: none;
  border: 4px solid #f6f3ff;
  border-radius: 18px;
  background: #e9e0fb;
  box-shadow: 0 12px 33px #2e18634a;
}
.vk-indigo-home .hero-art .creator-photo img { object-position: center 34%; }
.vk-indigo-home .photo-caption { padding: 36px 10px 9px; background: linear-gradient(transparent, #17112cd9); }
.vk-indigo-home .photo-caption span { font-size: 9px; color: #e6ddff; }
.vk-indigo-home .photo-caption strong { font-size: 14px; }
.vk-indigo-home .hero-art .vertical-label { right: 9px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 9px; letter-spacing: .15em; }
.vk-indigo-home .hero-art .sticker {
  border: 1px solid #e0d8fa;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 23px #2b186438;
  transform: none;
}
.vk-indigo-home .hero-art .sticker-top { inset: 7% auto auto 4%; padding: 8px 10px; color: #4633b7; font: 750 clamp(12px, 1.5vw, 20px)/1.02 Geist, Arial, sans-serif; letter-spacing: -.03em; }
.vk-indigo-home .hero-art .sticker-like { inset: 56% auto auto 4%; gap: 6px; padding: 7px 8px; font-size: 16px; color: #6737ad; background: #fbf3ff; }
.vk-indigo-home .hero-art .sticker-like::before { content: ''; width: 7px; height: 7px; border: 2px solid #996ac9; border-radius: 50%; flex: none; }
.vk-indigo-home .hero-art .sticker-like span { font-size: 11px; line-height: 1.12; }
.vk-indigo-home .hero-art .sticker-growth { inset: auto 5% 4% auto; padding: 7px 9px; }
.vk-indigo-home .hero-art .sticker-growth > span { font-size: 8px; color: #5a5282; letter-spacing: .06em; }
.vk-indigo-home .hero-art .sticker-growth strong { font: 740 17px/1.1 Geist, Arial, sans-serif; color: var(--accent); letter-spacing: -.025em; }
.vk-indigo-home .ticker { background: #ebe8fc; color: #44378c; border-block: 1px solid #ded7f7; padding-block: 8px; }
.vk-indigo-home .ticker > div { letter-spacing: .09em; font-size: 11px; gap: 24px; }
.vk-indigo-home .ticker span { width: 5px; height: 5px; border-radius: 50%; background: #8b73e5; flex: none; }
.vk-indigo-home .section-heading h2,.vk-indigo-home .seo-heading h2,.vk-indigo-home .faq h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.04; }
.vk-indigo-home .platform-tile,.vk-indigo-home .service-card,.vk-indigo-home .step-grid article,.vk-indigo-home .seo-grid article,.vk-indigo-home .vk-tool-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.vk-indigo-home .platform-tile:hover,.vk-indigo-home .service-card:hover,.vk-indigo-home .vk-tool-card:hover { background: #f4f0ff; border-color: #a993ee; box-shadow: 0 8px 26px #4f35b019; }
.vk-indigo-home .platform-tile .platform-icon {
  flex: none;
  width: 38px;
  height: 38px;
  background: #efeaff;
  color: #523bc2;
  border-radius: 10px;
  font: 750 18px/1 Geist, Inter, sans-serif;
}
.vk-indigo-home .platform-tile.platform-1 .platform-icon { background: #eaf4f4; color: #265d64; }
.vk-indigo-home .platform-tile.platform-2 .platform-icon { background: #f9eaf0; color: #963f61; }
.vk-indigo-home .platform-tile.platform-3 .platform-icon { background: #ede8ff; color: #5738ba; }
.vk-indigo-home .service-art { border-radius: 10px; }
.vk-indigo-home .service-art.art-0 { background: #eee8ff; }
.vk-indigo-home .service-art.art-1 { background: #f9eaf9; }
.vk-indigo-home .service-art.art-2 { background: #e8edff; }
.vk-indigo-home .service-art :is(b,span) { filter: none; }
.vk-indigo-home .round-arrow { background: #eeeaff; color: var(--accent); }
.vk-indigo-home .card-bottom strong { font-variant-numeric: tabular-nums; }
.vk-indigo-home .step-grid { gap: 15px; }
.vk-indigo-home .step-grid article { padding: 19px; }
.vk-indigo-home .step-grid article > span { background: #eee9ff; color: var(--accent); }
.vk-indigo-home .statement {
  border-radius: 19px;
  background: radial-gradient(ellipse at 95% 0%, #543c9a, transparent 63%), #211949;
}
.vk-indigo-home .statement :is(.eyebrow,p) { color: #e5dfff; }
.vk-indigo-home .statement > div + div { padding-top: 0; align-self: end; }
.vk-indigo-home .seo-grid a,.vk-indigo-home .faq details[open] summary { color: var(--accent); }
@media (max-width: 820px) {
  .vk-indigo-home .wrap { width: calc(100% - 38px); }
  .vk-indigo-home .hero { gap: 22px; }
  .vk-indigo-home .hero h1 { font-size: clamp(38px, 6vw, 58px); }
  .vk-indigo-home .hero-copy > p { font-size: 16px; }
}
@media (max-width: 680px) {
  .vk-indigo-home .wrap { width: calc(100% - 28px); }
  .vk-indigo-home .hero { grid-template-columns: minmax(0, 1fr); gap: 21px; padding-block: 28px 22px; }
  .vk-indigo-home .hero h1 { font-size: clamp(40px, 10vw, 61px); }
  .vk-indigo-home .hero-copy > .eyebrow { margin-bottom: 12px; }
  .vk-indigo-home .hero-copy > p { margin-top: 13px; }
  .vk-indigo-home .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 17px; }
  .vk-indigo-home .hero-actions .button { min-height: 44px; font-size: 13px; padding-inline: 10px; gap: 8px; }
  .vk-indigo-home .hero-actions .text-link { font-size: 13px; }
  .vk-indigo-home .hero-checks { display: flex; flex-direction: row; margin-top: 11px; }
  .vk-indigo-home .hero-art { height: clamp(255px, 69vw, 340px); border-radius: 18px; }
  .vk-indigo-home .hero-art .vertical-label { right: 5px; font-size: 7px; }
  .vk-indigo-home .section-heading h2,.vk-indigo-home .seo-heading h2,.vk-indigo-home .faq h2 { font-size: clamp(31px, 7.7vw, 46px); }
}
@media (max-width: 410px) {
  .vk-indigo-home .hero-actions { column-gap: 8px; }
  .vk-indigo-home .hero-actions .button { padding-inline: 8px; }
  .vk-indigo-home .hero-art .sticker-like { top: 45%; }
  .vk-indigo-home .hero-art .photo-caption { padding-bottom: 39px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.vk-indigo-home) { scroll-behavior: auto; }
  .vk-indigo-home :is(.ticker,.ticker *, .button, .service-card, .platform-tile, .hero-art, .hero-art *) { animation: none; transition: none; }
}