/*
 * AIBlocks — common design tokens.
 * Apple-style typography + colors used across all VTG blocks.
 * Загружается всегда когда есть хотя бы один vtg_* шорткод на странице.
 */

:root {
    --vtg-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
    --vtg-color-text: #1d1d1f;
    --vtg-color-text-muted: #666;
    --vtg-color-text-sub: #888;
    --vtg-color-brand: #1f2c37;
    --vtg-color-brand-hover: #2a3a47;
    --vtg-color-accent: #3aa6e1;
    --vtg-color-accent-hover: #2990c8;
    --vtg-color-tg: #3aa6e1;
    --vtg-color-tg-hover: #2990c8;
    --vtg-color-wa: #25d366;
    --vtg-color-viber: #7360f2;
    --vtg-color-fb: #1877f2;
    --vtg-color-tt: #000000;
    --vtg-color-ig: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    --vtg-color-bg-light: #f5f5f7;
    --vtg-color-bg-pill: #f0f2f5;
    --vtg-color-divider: #e8e8e8;
    --vtg-gradient-brand: linear-gradient(135deg, #1f2c37 0%, #2c4f6e 100%);
}

/* ─── Shared visual polish across all service pages ─── */
/* Number badges in process steps — gradient instead of flat dark. */
[id^="vtg-p-"][id$="-process"] .vtg-p-process-num,
[id^="vtg-i-"][id$="-process"] .vtg-i-process-num,
[id^="vtg-l-"][id$="-process"] .vtg-l-process-num,
[id^="vtg-s-"][id$="-process"] .vtg-s-process-num,
[id^="vtg-pr-"][id$="-process"] .vtg-pr-process-num {
    background: var(--vtg-gradient-brand) !important;
    box-shadow: 0 6px 16px rgba(31, 44, 55, 0.25);
}
/* Accent stripe on hover for process cards. */
[id$="-process"] [class$="-process-step"] {
    border-left: 3px solid transparent !important;
    transition: border-left-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
[id$="-process"] [class$="-process-step"]:hover {
    border-left-color: var(--vtg-color-accent) !important;
}
/* Icon badges in audience/services/team cards — subtle gradient. */
[class$="-aud-ico"],
[class$="-svc-ico"],
[class$="-team-ico"],
[class$="-card-ico"],
[class$="-req-ico"],
[class$="-service-ico"] {
    background: var(--vtg-gradient-brand) !important;
}
/* Eyebrow strip — accent color line + brand text for stronger visual rhythm. */
[class$="-eyebrow"]::before,
[class$="-eyebrow"]::after {
    background: var(--vtg-color-accent) !important;
}

/* Google rating display — yellow stars (used across all pages). */
.vtg-google-stars {
    display: inline-block;
    color: #fbbc04 !important;
    font-size: 32px !important;
    letter-spacing: 4px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: opacity 0.18s;
    margin-bottom: 10px;
}
.vtg-google-stars:hover { opacity: 0.85; color: #fbbc04 !important; }