/* ==========================================================================
   BIT-RATE v0.1
   ========================================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --bg:#050505;
    --surface:#0f0f0f;
    --border:#222b36;
    --text:#f5f7fa;
    --muted:#8b96a5;
    --accent:#6ea8fe;
    --container:1200px;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:"Space Grotesk",Arial,sans-serif;
    line-height:1.6;
    min-height:100vh;
    overflow-x:hidden;
}

/* Легкий шум */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.035;
    background-image:
        radial-gradient(circle at 20% 20%,#fff 1px,transparent 1px),
        radial-gradient(circle at 80% 70%,#fff 1px,transparent 1px);
    background-size:28px 28px,34px 34px;
}

a{
    color:inherit;
    text-decoration:none;
    transition:.25s;
}

a:hover{
    color:var(--accent);
}

.container{
    width:min(calc(100% - 48px),var(--container));
    margin:0 auto;
}

.site-header{
    border-bottom:1px solid var(--border);
	background:rgba(11,15,20,.75);
	position:sticky;
	top:0;
	z-index:100;
    backdrop-filter:blur(8px);
}

/* Шапка */
.site-header .container{
	/* Высота шапки */
    height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    font-size:1.15rem;
    letter-spacing:.35rem;
    font-weight:700;
}

.hero{
    min-height:calc(100vh - 78px);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:120px 20px;
}

.hero-label{
    display:block;
    color:var(--muted);
    letter-spacing:.35rem;
    font-size:.8rem;
    margin-bottom:25px;
}

/* BIT-RATE */
.hero-title{
    /* Размер букв (rem минимум, vw растягивается, rem больше этого уже не станет) */
	font-size:clamp(5rem,14vw,11rem);
	/* Толщина букв */
    font-weight:800;
	/* Расстояние между строками */
    line-height:.9;
	/* Расстояние между буквами */
    letter-spacing:-4px;
	/* Отступ снизу */
    margin-bottom:30px;
	
	/* Градиент */
    background:linear-gradient(
		/* Направление градиента
		to bottom  ↓
		to top     ↑
		to left    ←
		to right   →
		45deg      ↘ */
        to bottom,
		/* Цвета градиента
		0%   - начало
		35%  - середина
		100% - конец */
        #ffffff 0%,
        #d0d0d0 35%,
        #3d3d3d 100%
    );

	/* показывать градиент только внутри текста */
    -webkit-background-clip:text;
	/* Делаем сам текст прозрачным. */
    -webkit-text-fill-color:transparent;
	/* То же самое. Но уже для других браузеров. */
    background-clip:text;
}

.hero-description{
    color:var(--muted);
	max-width:620px;
	margin:auto;
	opacity:.75;
    font-size:1.15rem;
}

/* ========================================================================== */
/* Карточки проекта                                                            */
/* ========================================================================== */

/* Контейнер карточек */

.services{

    /* Максимальная ширина */
    max-width:1200px;

    /* Центрирование */
    margin:0 auto;

    /* Отступы сверху/снизу */
    padding:120px 20px;

    /* Три карточки в ряд */
    display:grid;

    grid-template-columns:repeat(3,1fr);

    /* Расстояние между карточками */
    gap:24px;
}


/* -------------------------------------------------------------------------- */
/* Карточка                                                                    */
/* -------------------------------------------------------------------------- */

.service{

    /* Цвет карточки */
    background:var(--surface);

    /* Граница */
    border:1px solid var(--border);

    /* Скругление */
    border-radius:18px;

    /* Внутренние отступы */
    padding:36px;

    /* Минимальная высота */
    min-height:300px;

    /* Расположение элементов */
    display:flex;

    flex-direction:column;

    /* Анимация */
    transition:.35s ease;
}


/* Наведение */

.service:hover{

    border-color:var(--accent);

    transform:translateY(-6px);
}


/* -------------------------------------------------------------------------- */
/* Заголовок                                                                   */
/* -------------------------------------------------------------------------- */

.service h2{

    font-size:1.8rem;

    margin-bottom:24px;
}


/* -------------------------------------------------------------------------- */
/* Описание                                                                    */
/* -------------------------------------------------------------------------- */

.card-text{

    color:var(--muted);

    line-height:1.7;

    /* Заполняет свободное место */
    flex:1;
}


/* -------------------------------------------------------------------------- */
/* Нижняя ссылка                                                               */
/* -------------------------------------------------------------------------- */

.card-action{

    align-self:flex-end;

    color:var(--accent);

    font-size:.95rem;

    opacity:.65;

    transition:.3s;
}


/* Наведение */

.service:hover .card-action{

    opacity:1;

    transform:translateX(6px);
}

footer{
    border-top:1px solid var(--border);
    text-align:center;
    padding:40px 20px;
    color:var(--muted);
}

/* ========================================================================== */
/* Верхнее меню                                                               */
/* ========================================================================== */

.top-menu{

    /* Расположить элементы в одну строку */
    display:flex;

    /* Выравнивание по вертикали */
    align-items:center;

    /* Расстояние между RU и EN */
    gap:5px;

    /* Размер текста */
    font-size:.85rem;

    /* Расстояние между буквами */
    letter-spacing:.12rem;

    /* Цвет обычных элементов */
    color:var(--muted);
}

/* -------------------------------------------------------------------------- */
/* Ссылки меню                                                                */
/* -------------------------------------------------------------------------- */

.top-menu a{

    /* Цвет наследуется от меню */
    color:inherit;

    /* Плавное изменение цвета */
    transition:.25s;
}

/* При наведении */

.top-menu a:hover{

    color:var(--text);
}

/* -------------------------------------------------------------------------- */
/* Активный язык                                                              */
/* -------------------------------------------------------------------------- */

.top-menu .active{

    /* Белый цвет */
    color:var(--text);

    /* Чуть жирнее */
    font-weight:600;
}

/* -------------------------------------------------------------------------- */
/* Кнопка "Войти"                                                             */
/* -------------------------------------------------------------------------- */

.top-menu .login{

    /* Отступ слева */
    margin-left:50px;
}