/* ==========================================================================
   Bento Swiss Pragmatism — визуальная система публичного сайта.
   Подключается после style.css: токены переопределяют базовые цвета,
   раскладка строится на 4-колоночной сетке (desktop) и 2-колоночной (tablet/mobile).
   ========================================================================== */

/* ---------- Токены: светлая тема (по умолчанию) ---------- */
:root {
    --bg: #F3F4F6;
    --card: #FFFFFF;
    --card-border: #E5E7EB;
    --text: #18181B;
    --muted: #52525B;
    --accent: #2563EB;
    --accent-soft: rgba(37, 99, 235, 0.10);
    --accent-ink: #FFFFFF;
    --glow-size: 340px;

    /* алиасы для базовых стилей style.css: раскрываются по текущей теме */
    --primary: var(--accent);
    --primary-light: var(--accent-soft);
    --accent-light: var(--accent-soft);
    --dark: var(--text);
    --gray: var(--muted);
    --light: var(--bg);
    --white: var(--card);
    --border: var(--card-border);
    --shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px rgba(24, 24, 27, 0.05);
    --shadow-lg: 0 12px 32px rgba(24, 24, 27, 0.10);
    color-scheme: light;
}

/* ---------- Токены: тёмная тема (OLED) — по системной настройке ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #000000;
        --card: #111111;
        --card-border: #222222;
        --text: #F4F4F5;
        --muted: #A1A1AA;
        --accent: #22D3EE;
        --accent-soft: rgba(34, 211, 238, 0.12);
        --accent-ink: #000000;
        --shadow: none;
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
        color-scheme: dark;
    }
}

/* ---------- Токены: тёмная тема — выбрана вручную переключателем ---------- */
:root[data-theme="dark"] {
    --bg: #000000;
    --card: #111111;
    --card-border: #222222;
    --text: #F4F4F5;
    --muted: #A1A1AA;
    --accent: #22D3EE;
    --accent-soft: rgba(34, 211, 238, 0.12);
    --accent-ink: #000000;
    --shadow: none;
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--text); }
h1, h2, h3, h4, h5, .logo {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: -0.015em;
}

/* ---------- Шапка ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
nav {
    position: static;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--card-border);
}
nav.scrolled { box-shadow: none; }
.nav-inner { height: 64px; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-links a { color: var(--muted); }
.nav-links a:hover { color: var(--accent); }
.nav-links a::after { background: var(--accent); }
.nav-cta {
    color: var(--accent-ink); border-radius: 10px;
    transition: background-color 0.18s ease, transform 0.18s ease;
}
.nav-cta:hover { background: color-mix(in srgb, var(--accent) 85%, #000); transform: translateY(-1px); }
.nav-cta:active { transform: translateY(0) scale(0.98); }
.burger { color: var(--text); }

.theme-toggle {
    width: 40px; height: 40px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid var(--card-border);
    background: var(--card); color: var(--text);
    font-size: 1.1rem; cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }

/* ---------- Секции и общая сетка ---------- */
.bento-band { padding: 72px 0; background: transparent; }
.container { max-width: 1200px; }
.section-header { text-align: left; margin-bottom: 32px; }
.section-header h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: 12px; }
.section-header p { margin: 0; max-width: 640px; color: var(--muted); }
.section-header .tag {
    background: var(--accent-soft); color: var(--accent);
    border-radius: 8px; padding: 4px 12px; letter-spacing: 0.08em; margin-bottom: 14px;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(160px, auto);
    gap: 16px;
}

/* карточка-ячейка: тонкая матовая поверхность с обводкой */
.bento-card {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bento-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--card-border)); }
/* подсветка контура радиальным градиентом, следующим за курсором */
.bento-card.bento-card::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit; padding: 1px;
    pointer-events: none;
    background: radial-gradient(var(--glow-size) circle at var(--mx, 50%) var(--my, 50%), var(--accent), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0; transition: opacity 0.18s ease;
    animation: none; transform: none;
    left: 0; top: 0; width: auto; height: auto;
}
.bento-card.bento-card:hover::after,
.bento-card.bento-card:focus-within::after { opacity: 1; }

/* ---------- Hero: плитка 2x3 + метрики + стек ---------- */
.hero.bento-band { padding: 104px 0 32px; background: none; }
.hero::before, .hero::after { display: none; }
.bento-hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento-hero-main {
    grid-column: span 2; grid-row: span 3;
    display: flex; flex-direction: column; justify-content: center;
    padding: 40px;
}
.hero-content { position: relative; z-index: auto; max-width: none; }
.hero-badge {
    background: var(--accent-soft); color: var(--accent);
    box-shadow: none; margin-bottom: 20px;
    padding: 6px 14px; font-size: 0.82rem;
}
.hero-badge i { color: var(--accent); }
.hero h1 {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: currentColor; color: var(--text);
    font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800;
    line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 18px;
}
.hero p { color: var(--muted); font-size: 1.05rem; margin-bottom: 28px; max-width: 560px; }
.hero-buttons { gap: 12px; }

.btn-primary, .btn-outline {
    padding: 14px 24px; border-radius: 12px; font-size: 0.95rem;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border: 1px solid transparent; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #000); transform: translateY(-1px); box-shadow: none; }
.btn-primary:active, .btn-outline:active { transform: translateY(0) scale(0.98); }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--card-border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.btn-primary:focus-visible, .btn-outline:focus-visible, .stack-chip:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px;
}

/* метрики: плитки 1x1 и широкие 2x1 с крупным числом */
.stat-item {
    display: flex; flex-direction: column; justify-content: space-between;
    min-width: 0; padding: 22px;
    background: var(--card); border: 1px solid var(--card-border);
    border-radius: 20px; box-shadow: var(--shadow);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: border-color 0.18s ease;
}
.stat-item::before { display: none; }
.stat-item:hover { transform: none; box-shadow: var(--shadow); }
.stat-item.is-wide { grid-column: span 2; }
.stat-item h3 {
    color: var(--accent); font-size: clamp(2rem, 3.6vw, 2.8rem);
    font-weight: 800; line-height: 1; letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.stat-item p { color: var(--muted); font-size: 0.9rem; margin-top: 12px; }

/* «Стек в действии»: вытянутая ячейка 2x1 с циклической подсветкой тегов */
.bento-stack {
    grid-column: span 2;
    display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
}
.bento-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--muted);
}
.bento-label i { color: var(--accent); font-size: 1rem; }
.stack-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.stack-chip {
    padding: 10px 16px; border-radius: 12px;
    border: 1px solid var(--card-border); background: var(--bg);
    color: var(--text); font-weight: 600; font-size: 0.95rem;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.stack-chip.is-active {
    background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft); transform: translateY(-1px);
}

/* ---------- Продукты: квадратные плитки-ссылки (иконка, название, краткое описание) ---------- */
.products { background: transparent; }
/* цвет продукта задаётся переменной --tone (HEX) в атрибуте style; без неё — акцентный синий */
.product-tiles {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
@media (min-width: 720px) { .product-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .product-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.product-tile {
    display: flex; flex-direction: column; justify-content: flex-start;
    aspect-ratio: 1 / 1; min-width: 0; padding: 18px;
    background: color-mix(in srgb, var(--tone, var(--accent)) 9%, var(--card));
    border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 28%, var(--card-border));
    border-radius: 20px;
    box-shadow: var(--shadow); color: var(--text); text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.product-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--tone, var(--accent)) 60%, var(--card-border));
    box-shadow: var(--shadow-lg);
}
.product-tile:active { transform: scale(0.97); transition-duration: 0.15s; }
/* плитка без цвета: обычный фон карточки, рамка и подсветка в акцентном цвете сайта */
.product-tile.is-plain { background: var(--card); border-color: var(--card-border); }
.product-tile.is-plain:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--card-border)); }
.product-tile:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
.product-tile .product-icon {
    width: 44px; height: 44px; margin: 0; font-size: 1.25rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.product-tile-body { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; min-width: 0; }
.product-tile-title {
    font-size: 0.98rem; font-weight: 700; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-tile-desc {
    font-size: 0.85rem; line-height: 1.45; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .product-tile, .product-tile:hover, .product-tile:active { transform: none; transition: none; }
}

/* иконка карточки продукта (используется и на странице продукта) */
.product-icon {
    width: 48px; height: 48px; border-radius: 12px; margin-bottom: 18px;
    font-size: 1.35rem;
    background: color-mix(in srgb, var(--tone, var(--accent)) 14%, transparent);
    color: var(--tone, var(--accent));
}

/* ---------- Проекты ---------- */
.project-card {
    display: flex; flex-direction: column; padding: 24px; min-width: 0;
    text-decoration: none; color: inherit;
}
.project-card:hover { transform: none; box-shadow: var(--shadow); }
.project-card .project-type { color: var(--accent); }
.project-card h4 { font-size: 1.05rem; }
.project-card p { color: var(--muted); font-size: 0.88rem; margin-bottom: 16px; }
.project-card .tech-stack { margin-top: auto; }
.project-card .tech-tag {
    background: var(--bg); border: 1px solid var(--card-border);
    color: var(--muted); font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* ---------- Команда ---------- */
.team-card { grid-column: span 2; display: flex; flex-direction: column; }
.team-card:hover { transform: none; box-shadow: var(--shadow); }
.team-card .team-avatar { background: var(--accent-soft); color: var(--accent); }
.team-card .role { color: var(--accent); }
.team-card .contacts a { color: var(--muted); }
.team-card .contacts a:hover { color: var(--accent); }

/* ---------- Текст («Обо мне») ---------- */
.text-content.bento-card {
    max-width: none; margin: 0; padding: 32px;
    color: var(--muted); font-size: 1.02rem; line-height: 1.7;
}
.text-content h1, .text-content h2, .text-content h3 { color: var(--text); }
.text-content a { color: var(--accent); }

/* ---------- Форма заявки ---------- */
.form-section { background: transparent; }
.form-wrapper.bento-card { max-width: none; margin: 0; padding: 40px; box-shadow: var(--shadow); }
.form-group input, .form-group select, .form-group textarea {
    background: var(--bg); border-color: var(--card-border); color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    background: var(--card); border-color: var(--accent);
}
.form-group label { color: var(--text); }
.form-group input[type="checkbox"] { accent-color: var(--accent); }
.form-submit { background: var(--accent); color: var(--accent-ink); border-radius: 12px; }
.form-submit:hover { background: color-mix(in srgb, var(--accent) 85%, #000); transform: translateY(-1px); box-shadow: none; }
.form-error { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.form-success i { color: var(--accent); }

/* ---------- Подвал ---------- */
.site-footer {
    background: transparent; color: var(--muted);
    border-top: 1px solid var(--card-border);
    padding: 56px 0 32px;
}
.site-footer .footer-brand .logo { color: var(--accent); margin-bottom: 12px; }
.site-footer .footer-brand p { color: var(--muted); }
.site-footer .footer-col h5 { color: var(--text); }
.site-footer .footer-col a { color: var(--muted); }
.site-footer .footer-col a:hover { color: var(--accent); }
.site-footer .footer-bottom { color: var(--muted); border-top: 1px solid var(--card-border); }
.footer-legal { margin-top: 12px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.footer-legal a { color: var(--muted); text-decoration: none; font-size: 0.8rem; word-break: break-word; }
.footer-legal a:hover { color: var(--accent); }
.footer-legal span { color: var(--muted); font-size: 0.8rem; }

/* ---------- Движение: мягкие переходы 150–200 мс ---------- */
.fade-in { transition: opacity 0.5s ease, transform 0.5s ease; }

/* ==========================================================================
   Адаптивность
   ========================================================================== */
@media (max-width: 1023px) {
    .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(140px, auto); gap: 14px; }
    .bento-hero-main { grid-column: span 2; grid-row: auto; padding: 32px; }
    .bento-stack { grid-column: span 2; }
    .stat-item.is-wide { grid-column: span 2; }
    .team-card { grid-column: span 1; }
}

@media (max-width: 719px) {
    .container { padding: 0 16px; }
    .bento-band { padding: 44px 0; }
    .hero.bento-band { padding: 92px 0 20px; }
    .bento-grid { gap: 12px; }
    .section-header { margin-bottom: 20px; }
    .section-header h2 { font-size: 1.6rem; }

    .bento-hero-main { padding: 24px; }
    .hero h1 { font-size: 1.85rem; }
    .hero p { font-size: 0.98rem; margin-bottom: 22px; }
    .hero-buttons { flex-direction: column; }
    .btn-primary, .btn-outline { justify-content: center; width: 100%; }

    .stat-item { padding: 16px; min-height: 120px; }
    .stat-item h3 { font-size: 1.75rem; }
    .stat-item p { font-size: 0.82rem; }

    .bento-stack { padding: 18px; }
    /* ряд тегов свайпается по горизонтали */
    .stack-chips {
        flex-wrap: nowrap; overflow-x: auto;
        scroll-snap-type: x mandatory; scrollbar-width: none;
        margin: 0 -18px; padding: 2px 18px 4px;
    }
    .stack-chips::-webkit-scrollbar { display: none; }
    .stack-chip { flex: 0 0 auto; scroll-snap-align: start; padding: 8px 12px; font-size: 0.85rem; }

    /* плитки продуктов на телефоне: две в ряд, компактнее */
    .product-tiles { gap: 12px; }
    .product-tile { padding: 14px; border-radius: 18px; }
    .product-tile .product-icon { width: 38px; height: 38px; font-size: 1.1rem; border-radius: 10px; }
    .product-tile-title { font-size: 0.9rem; }
    .product-tile-desc { font-size: 0.78rem; -webkit-line-clamp: 5; }
    .product-icon { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: 12px; }

    .projects-grid { grid-template-columns: minmax(0, 1fr); }
    .project-card { padding: 20px; }
    .projects-grid .tech-stack {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
        scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 0;
    }
    .projects-grid .tech-stack::-webkit-scrollbar { display: none; }
    .projects-grid .tech-tag { flex: 0 0 auto; scroll-snap-align: start; }

    .team-card { grid-column: span 2; }
    .text-content.bento-card { padding: 22px; font-size: 0.98rem; }
    .form-wrapper.bento-card { padding: 24px 18px; }
    .footer-legal { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .bento-card, .bento-card::after, .stack-chip, .theme-toggle,
    .btn-primary, .btn-outline, .nav-cta, .fade-in {
        transition: none !important;
    }
}

/* ---------- Команда: карточки-ссылки ---------- */
a.team-card { text-decoration: none; color: inherit; }
.team-more {
    display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px;
    font-size: 0.88rem; font-weight: 600; color: var(--accent);
}
.team-more i { transition: transform 0.18s ease; }
a.team-card:hover .team-more i { transform: translateX(3px); }
a.team-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 3px; }

/* ---------- Страница сотрудника ---------- */
.staff-page { padding-top: 104px; }
.breadcrumbs { margin-bottom: 20px; }
.breadcrumbs a {
    display: inline-flex; align-items: center; gap: 8px; color: var(--muted);
    text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: color 0.18s ease;
}
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 3px; border-radius: 6px; }

.staff-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.staff-card {
    grid-column: span 2; grid-row: span 2;
    display: flex; flex-direction: column; justify-content: flex-end; padding: 36px;
}
.staff-avatar {
    width: 72px; height: 72px; border-radius: 20px; margin-bottom: auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800;
}
.staff-card h1 {
    font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; line-height: 1.1;
    letter-spacing: -0.025em; margin-top: 28px;
}
.staff-card .role { color: var(--accent); font-weight: 600; margin-top: 10px; }
.staff-bio { grid-column: span 2; grid-row: span 2; padding: 36px; }
.staff-bio h2, .staff-contacts h2 {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--muted); margin-bottom: 16px;
}
.staff-bio p { color: var(--text); font-size: 1rem; line-height: 1.7; margin-bottom: 14px; }
.staff-bio p:last-child { margin-bottom: 0; }
.staff-contacts { grid-column: span 4; }
.contact-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.contact-list a {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
    border: 1px solid var(--card-border); border-radius: 12px;
    color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.95rem;
    transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
    word-break: break-word;
}
.contact-list a i { color: var(--accent); }
.contact-list a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.contact-list a:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }

@media (max-width: 1023px) {
    .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-card, .staff-bio { grid-column: span 2; grid-row: auto; }
    .staff-contacts { grid-column: span 2; }
}
@media (max-width: 719px) {
    .staff-page { padding-top: 92px; }
    .staff-card, .staff-bio, .staff-contacts { padding: 22px; }
    .staff-avatar { width: 56px; height: 56px; font-size: 1.2rem; }
    .staff-card h1 { margin-top: 20px; }
}

/* ---------- Фото сотрудника ---------- */
.staff-photo {
    grid-column: span 2; padding: 0; aspect-ratio: 1; border-radius: 20px;
}
.staff-grid.has-photo .staff-card { grid-column: span 2; grid-row: auto; }
.staff-grid.has-photo .staff-bio { grid-column: span 2; grid-row: auto; }
.staff-grid.has-photo .staff-contacts { grid-column: span 2; }

.photo-mosaic {
    position: relative; width: 100%; height: 100%;
    overflow: hidden; border-radius: inherit; background: #000;
    container-type: inline-size;
}
.photo-plain { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-mosaic.is-mosaic .photo-plain { display: none; }

.mosaic-grid {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: repeat(32, minmax(0, 1fr));
    grid-template-rows: repeat(32, minmax(0, 1fr));
    --img: none;
}
.mosaic-tile {
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #000; color: #00ff41;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: calc(100cqw / 40); line-height: 1;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.55);
}
/* участок фото: тот же снимок, сдвинутый так, чтобы плитка показывала свой квадрат */
.mosaic-tile::before {
    content: '';
    position: absolute; inset: 0;
    background-image: var(--img);
    background-size: 3200% 3200%;
    background-position: var(--pos);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.mosaic-tile.is-photo::before { opacity: 1; }
/* вспышка плитки: цифра матрицы или затемнение */
.mosaic-tile.is-glitch::after {
    content: attr(data-glyph);
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.82); color: #00ff41;
    font-size: inherit;
}

/* металлические квадраты: золотая и серебряная фольга с бесконечным бликом */
.mosaic-tile {
    --foil-gold: linear-gradient(120deg, #6b4c0b 0%, #d4af37 22%, #fff4b8 38%, #b8860b 52%, #f5d76e 68%, #7a5a10 100%);
    --foil-silver: linear-gradient(120deg, #4b5563 0%, #c0c6cf 22%, #ffffff 38%, #9aa3ae 52%, #e5e7eb 68%, #4b5563 100%);
}
.mosaic-tile.is-gold,
.mosaic-tile.is-silver {
    background-color: #000;
    background-size: 300% 300%;
    animation: foil-shine 2.4s linear infinite;
}
.mosaic-tile.is-gold { background-image: var(--foil-gold); }
.mosaic-tile.is-silver { background-image: var(--foil-silver); }

/* вспышка металлической плитки поверх фото */
.mosaic-tile.is-flash-gold::after,
.mosaic-tile.is-flash-silver::after {
    content: '';
    position: absolute; inset: 0;
    background-size: 300% 300%;
    animation: foil-shine 0.6s linear infinite;
}
.mosaic-tile.is-flash-gold::after { background-image: var(--foil-gold); }
.mosaic-tile.is-flash-silver::after { background-image: var(--foil-silver); }

@keyframes foil-shine {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .mosaic-tile.is-gold,
    .mosaic-tile.is-silver,
    .mosaic-tile.is-flash-gold::after,
    .mosaic-tile.is-flash-silver::after { animation: none; }
}
.team-avatar-photo { width: 56px; height: 56px; padding: 0; object-fit: cover; border-radius: 16px; background: none; }

@media (max-width: 719px) {
    .staff-photo { grid-column: span 2; }
}

/* ---------- Логотип ---------- */
.logo-img {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 10px; object-fit: cover;
}

/* ---------- Карточка сотрудника: компетенции, принципы, контакты с кнопками ---------- */
.staff-competencies { grid-column: span 2; padding: 28px; }
.staff-principles { grid-column: span 4; padding: 28px 32px; }
.staff-competencies h2, .staff-principles h2 {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--muted); margin-bottom: 16px;
}
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li {
    padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
    background: var(--accent-soft); color: var(--accent);
    transition: transform 0.18s ease, background-color 0.18s ease;
}
.chip-list li:hover { transform: translateY(-1px); }

.principles {
    list-style: none; display: grid; gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.principles li { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.principle-num {
    font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.principles h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.principles p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

.contact-stack { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.contact-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 12px 14px; border: 1px solid var(--card-border); border-radius: 14px;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}
.contact-row:hover { border-color: var(--accent); }
.contact-icon {
    width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent); font-size: 1.15rem;
}
.contact-body { display: flex; flex-direction: column; min-width: 0; }
.contact-type { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.contact-value { font-weight: 600; color: var(--text); word-break: break-word; overflow-wrap: anywhere; }
.contact-action {
    display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 10px;
    background: var(--accent); color: #fff; text-decoration: none; font-weight: 700; font-size: 0.88rem; white-space: nowrap;
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.contact-action:hover { filter: brightness(1.08); }
.contact-action:active { transform: scale(0.98); }
.contact-action:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }

@media (max-width: 1023px) {
    .staff-competencies { grid-column: span 2; }
    .staff-principles { grid-column: span 2; }
    .principles { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
    .staff-competencies, .staff-principles { padding: 22px; }
    .contact-row { grid-template-columns: auto minmax(0, 1fr); }
    .contact-action { grid-column: 1 / -1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .chip-list li, .contact-row, .contact-action { transition: none; }
}

/* ---------- Карточка продукта ---------- */
.product-grid { align-items: stretch; }
.product-hero { grid-column: span 2; padding: 36px; }
.product-hero .product-icon { margin-bottom: 24px; }
.product-desc { grid-column: span 2; grid-row: span 2; padding: 36px; }
.product-features-card { grid-column: span 2; padding: 28px; }
.product-cta-card { grid-column: span 2; padding: 28px; }
.product-desc h2, .product-features-card h2, .product-cta-card h2 {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--muted); margin-bottom: 16px;
}
.product-desc p { color: var(--text); font-size: 1rem; line-height: 1.7; margin-bottom: 14px; }
.product-desc p:last-child { margin-bottom: 0; }
.product-check-list { list-style: none; display: grid; gap: 12px; }
.product-check-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.product-check-list i { color: var(--accent); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.product-cta {
    display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px;
    background: var(--accent); color: #fff; text-decoration: none; font-weight: 700;
    transition: transform 0.18s ease, filter 0.18s ease;
}
.product-cta:hover { filter: brightness(1.08); }
.product-cta:active { transform: scale(0.98); }
.product-cta:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
@media (max-width: 1023px) {
    .product-hero, .product-desc, .product-features-card, .product-cta-card { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 719px) {
    .product-hero, .product-desc, .product-features-card, .product-cta-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .product-cta { transition: none; }
}

/* ---------- Шапка: много пунктов меню (продукты) не ломают логотип и кнопки ---------- */
.logo, .nav-actions { flex-shrink: 0; }
.nav-links { min-width: 0; overflow-x: auto; scrollbar-width: none; margin-left: 24px; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { white-space: nowrap; }
@media (min-width: 769px) {
    .nav-links { gap: 18px; }
}

/* ---------- Карточка сотрудника: центровка имени и должности, плитки компетенций ---------- */
.staff-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
}
.staff-card h1 { margin-top: 0; }
.staff-card .role { margin-top: 12px; }
.staff-competencies { grid-column: span 4; }
.comp-grid {
    list-style: none; display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.comp-tile {
    display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
    min-height: 96px; padding: 16px 18px;
    border: 1px solid var(--card-border); border-radius: 16px;
    background: var(--accent-soft);
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.comp-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.comp-index {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.comp-text { font-weight: 700; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 719px) {
    .comp-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .comp-tile { min-height: 84px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .comp-tile { transition: none; }
}

/* ---------- Фото продукта ---------- */
.product-photo { grid-column: span 2; padding: 0; aspect-ratio: 1; border-radius: 20px; }
.product-grid.has-photo .product-hero { grid-column: span 2; }
@media (max-width: 1023px) {
    .product-photo { grid-column: span 2; }
}

/* ---------- Компетенции: квадратная плитка и табло вылетов ---------- */
.staff-competencies {
    grid-column: span 2; aspect-ratio: 1; padding: 0; overflow: hidden;
    background: #0a0a0b; border-color: #1f2328;
}
.board {
    height: 100%; display: flex; flex-direction: column;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    color: #ffb000; text-transform: uppercase;
}
.board-head, .board-row {
    display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px;
    padding: 0 20px;
}
.board-head {
    height: 46px; flex-shrink: 0; border-bottom: 1px solid rgba(255, 176, 0, 0.35);
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; color: rgba(255, 176, 0, 0.7);
}
.board-window { position: relative; flex: 1; overflow: hidden; min-height: 0; }
.board-track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.board-row {
    height: 52px; border-bottom: 1px solid rgba(255, 176, 0, 0.12);
    font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em;
}
.board-num { color: rgba(255, 176, 0, 0.5); font-variant-numeric: tabular-nums; }
.board-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-status { font-size: 0.75rem; letter-spacing: 0.12em; color: #7CFC9A; white-space: nowrap; }
.board-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #7CFC9A; margin-right: 4px; vertical-align: middle;
    animation: board-blink 1.6s steps(2, start) infinite;
}
@keyframes board-blink { to { visibility: hidden; } }

@media (max-width: 1023px) {
    .staff-competencies { grid-column: span 2; }
}
@media (max-width: 719px) {
    .staff-competencies { aspect-ratio: auto; height: 340px; }
    .board-head, .board-row { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 0 14px; }
    .board-row { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
    .board-dot { animation: none; }
}

/* стаж и обратный отсчёт в карточке сотрудника (версия 1.23.0) */
.staff-timeline { display: grid; gap: 14px; }
.staff-timeline h2 { font-size: 1.05rem; margin: 0 0 4px; }
.timeline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.timeline-value { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary); }
.timeline-label { color: inherit; }
.timeline-date { color: var(--gray); font-size: 0.85rem; width: 100%; }
.timeline-list li.is-past .timeline-value { color: var(--gray); }
.timeline-list li.is-past { opacity: 0.8; }
.footer-tenure { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 10px; }
.footer-tenure i { color: var(--accent); transition: transform 150ms ease; }
.footer-tenure:hover i { transform: rotate(-12deg); }