/* ============================================================
 *  DICOM TEAM — base.css
 *  Один из 6 модульных CSS-файлов дизайн-системы.
 *  См. также: base, layout, hero, components, pages, responsive.
 * ============================================================ */

/* ============================================================
 *  DICOM TEAM — ДИЗАЙН-СИСТЕМА
 *  Все стили строятся на CSS-переменных (см. :root ниже).
 *  Применимо ко всем страницам сайта.
 *
 *  ОСНОВНЫЕ ПРИНЦИПЫ:
 *    1. Секции чередуются по типу фона: --light → --dark → --gray
 *    2. Карточки — единый компонент .card с модификаторами
 *    3. Заголовки секций: подзаголовок с синей чертой, цифра (01/02/03/04)
 *    4. На тёмных секциях инвертируются: цифра становится синей, eyebrow белым
 * ============================================================ */

:root {
    /* ---- цвета ---- */
    --c-text:        #181431;
    --c-text-soft:   #5B5B6B;
    --c-text-muted:  #818181;
    --c-bg:          #FFFFFF;
    --c-bg-gray:     #F6F7F9;
    --c-bg-dark:     #0F1B33;
    --c-line:        #E5E7EB;
    --c-accent:      #0D75B2;
    --c-accent-d:    #0B6396;
    --c-accent-soft: #DDEAF5;
    --c-number-light:#EEF0F4;   /* цифры 01-04 на светлых секциях */
    --c-number-dark: rgba(13,117,178,.18);  /* цифры на тёмных секциях */

    /* ---- сетка ---- */
    --max:           1440px;
    --gutter:        clamp(20px, 5vw, 100px);
    --section-pad:   clamp(64px, 10vw, 140px);
    --gap-island:    clamp(24px, 4vw, 48px);   /* вертикальный отступ между секциями-островами */
    --gutter-h:      clamp(0px, 2vw, 24px);    /* горизонтальный отступ от края экрана для островов */
    --r-island:      clamp(20px, 2.5vw, 32px); /* радиус скругления островов */

    /* ---- тени ---- */
    --shadow-sm: 0 2px 8px rgba(24,20,49,.04);
    --shadow:    0 4px 24px rgba(24,20,49,.06);
    --shadow-md: 0 12px 32px rgba(24,20,49,.10);
    --shadow-lg: 0 24px 60px -20px rgba(24,20,49,.18);

    /* ---- радиусы ---- */
    --r-sm: 6px;
    --r:    16px;
    --r-lg: 24px;

    /* ---- timing ---- */
    --t: 220ms cubic-bezier(.4,0,.2,1);

    /* ---- шрифты ---- */
    --f-body: 'Roboto', system-ui, sans-serif;
}

/* ----------- reset ----------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--c-text);
    /* Серый фон — основа страницы. Контентные секции "плавают" поверх него. */
    background: var(--c-bg-gray);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; transition: color var(--t); }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ============================================================
 *  ФОНОВЫЕ КВАДРАТЫ (декорация)
 * ============================================================ */
.bg-squares {
    position: fixed; inset: 0; z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.bg-squares .square {
    position: absolute;
    border-radius: 4px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.18);
    opacity: 0;
    transition: opacity 4s ease-in-out;
}
@media (max-width: 767px) { .bg-squares { display: none; } }

@media (max-width: 899px) {
    .team-grid { grid-template-columns: 1fr !important; }
}