@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
    color: white;
    font-family: "Inter", sans-serif;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

:root {
    --separator-color: #ffffff50;
    --contrast-color: #ffffff50;
}

h2 {
    font-size: 38px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: -5%;
}

h3 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -5%;
}

h4 {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -3%;
    font-weight: 500;
}

p.stack-local {
    font-size: 16px;
    letter-spacing: -5%;
    font-weight: 600;
}

p.menu-points {
    font-size: 14px;
    line-height: 23px;
    letter-spacing: -5%;
    font-weight: 500;
}

.title {
    font-size: 54px;
    line-height: 65px;
    letter-spacing: -5%;
    font-weight: 600;
}

p.project-stack {
    font-size: 12px;
    letter-spacing: -5%;
    font-weight: 500;
}

img {
    display: block;
    image-rendering: auto;
}

svg {
    shape-rendering: geometricPrecision;
    text-rendering: geometricPrecision;
}

.project-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0px;
}

.project {
    border: solid 1px var(--separator-color);
    height: 650px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
}

.project-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.project-card {
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pb-50 {
    padding-bottom: 50px;
}

.pt-150 {
    padding-top: 150px;
}

.pb-150 {
    padding-bottom: 150px;
}

.mt-150 {
    margin-top: 150px;
}

.mb-150 {
    margin-bottom: 150px;
}

.mb-50 {
    margin-bottom: 50px;
}

.separator {
    width: 100%;
    height: 1px;
    background-color: var(--separator-color);
}

.txt-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px;
    margin-bottom: 20px;
    margin-top: 150px;
    width: 950px;
}

span {
    color: var(--contrast-color);
}

.ml-40 {
    margin-left: 40px;
}

.mr-40 {
    margin-right: 40px;
}

.txt-content-2 {
    display: flex;
    flex-direction: column;
    gap: 100px;
    margin-top: 150px;
    margin-bottom: 150px;
    width: 1200px;
}


.image-container {
    width: 100%;
    height: 450px;
    background-image: url("./assets/img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 100px;
    margin-bottom: 100px;
}

.hr-block-content {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.hr-block {
    display: flex;
    flex-direction: column;
    gap: 27px;
}

button {
    gap: 10px;
    height: 55px;
    border-radius: 1000px;
    outline: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 23px;
    letter-spacing: -5%;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 25px 20px;
    align-items: center;
}

button.button-outline {
    background-color: transparent;
    border: solid 1px white;
    color: white;
}

button.button-white {
    background-color: white;
    color: black;
}

.btns {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.btn-icon-resume {
    background-image: url("./assets/resume.svg");
    width: 25px;
    height: 25px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.btn-icon-gh {
    background-image: url("./assets/gh.svg");
    width: 25px;
    height: 25px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 100px 50px;
}

.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 400px;
}

.stack-item {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.stack-img {
    width: 30px;
    height: 30px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.stack-item.claude .stack-img  {
    background-image: url("./assets/claude.svg");
}


.stack-item.codex .stack-img  {
    background-image: url("./assets/codex.svg");
}


.stack-item.mcp .stack-img  {
    background-image: url("./assets/mcp.svg");
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(22, 1fr);
}


.span-1 {
  grid-column: span 1;
}

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-5 {
  grid-column: span 5;
}

.span-6 {
  grid-column: span 6;
}

.span-7 {
  grid-column: span 7;
}

.span-8 {
  grid-column: span 8;
}

.span-9 {
  grid-column: span 9;
}

.span-10 {
  grid-column: span 10;
}


.span-11 {
  grid-column: span 11;
}


.span-12 {
  grid-column: span 12;
}


.span-13 {
  grid-column: span 13;
}

.span-14 {
  grid-column: span 14;
}

.span-15 {
  grid-column: span 15;
}

.span-16 {
  grid-column: span 16;
}

.span-17 {
  grid-column: span 17;
}

.span-18 {
  grid-column: span 18;
}

.span-19 {
  grid-column: span 19;
}

.span-20 {
  grid-column: span 20;
}

.span-21 {
  grid-column: span 21;
}

.span-22 {
  grid-column: span 22;
}

/* Дополнительно: чтобы картинки были квадратными */
.grid-item {
  height: 140px;
  display: flex;
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: solid 1px var(--separator-color);
  gap: 20px;
  position: relative;
}

.stack-descr {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #A2A2A2;
}

.ai, .const, .devops, .design, .instr, .desktop, .programming {
    border-left: none;
}

.programming, .desktop, .design {
    border-right: none;
}

.devops,.instr, .const, .design, .desktop {
    border-top: none;
}

.wp .stack-img {
    background-image: url("./assets/wp.svg");
}

.tilda .stack-img {
    background-image: url("./assets/tilda.svg");
    filter: invert(1);
}

.opencart .stack-img {
    background-image: url("./assets/opencart.svg");
}

.cs .stack-img {
    background-image: url("./assets/cs.svg");
}

.first-screen {
    background-image: url("./assets/background.svg");
    height: 100vh;
    background-size: 120%;
    background-position: center -290px;
    background-repeat: no-repeat;
}

.first-screen .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
}

.first-screen h1 {
    text-align: center;
    width: 1100px;
}

.first-screen .img {
    width: 200px;
    height: 250px;
    background-image:url('./assets/avatar.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: -100px;
}

.comp {
    width: 140px;
    height: 85px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(1) contrast(1.2) brightness(0.8);
    transition: filter 0.3s ease;
}

.comp:hover {
    filter: grayscale(0) contrast(1.2) brightness(1);
}

.work-company-list {
    margin-top: -100px;
}

.company-list {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow: hidden;
}

.about-me {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.about-me h4 {
    color: rgba(255, 255, 255, 0.408);
}

.sobha {
    background-image: url("./assets/companies/sobha.png");
}

.medeya {
    background-image: url("./assets/companies/medeya.png");
}

.ls {
    background-image: url("./assets/companies/ls.png");
}

.vk {
    background-image: url("./assets/companies/vk.png");
}

.best7 {
    background-image: url("./assets/companies/best7.png");
}

.wilmo {
    background-image: url("./assets/companies/wilmo.png");
}

.medicult {
    background-image: url("./assets/companies/medicult.png");
}

.sber {
    background-image: url("./assets/companies/sber.png");
}

.aim {
    background-image: url("./assets/companies/aim.png");
}

.var {
    background-image: url("./assets/companies/var.png");
}

/* Обертка слайдера */
.work-company-list {
    width: 100%;
    padding: 20px 0;
    overflow: hidden;
}

.work-company-list {
    overflow: hidden;
    width: 100%;
    padding: 20px 0;
}

.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    cursor: grab;
}

.marquee-wrapper:active {
    cursor: grabbing;
}

.marquee-track {
    display: flex;
    gap: 30px;
    width: max-content;
    will-change: transform; /* Для запаса */
}

.project-list > .project:nth-child(even) {
    border-left: none;
    border-right: none;
}

.project-list > .project:nth-child(odd) {
    border-left: none;
}

.footer-content {
    margin-top: 50px;
    margin-bottom: 150px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

.pre-footer {
    background-image: url("./assets/background.svg");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 700px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.pre-footer h2 {
    width: 620px;
    text-align: center;
}

form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

form input {
    width: 355px;
    height: 55px;
    padding: 20px;
    border-radius: 1000px;
    outline: none;
    border: solid 1px var(--separator-color);
    background-color: transparent;
    color: white;
    text-align: center;
}

form input::placeholder {
    text-align: center;
}

form button {
    width: 255px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.bullets {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

.bullet {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}

.social-media {
    width: 30px;
    height: 30px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.yt {
    background-image: url("./assets/social-media/yt.svg");
}

.tg {
    background-image: url("./assets/social-media/tg.svg");
}

.insta {
    background-image: url("./assets/social-media/insta.svg");
}

.wilmo2 {
    background-image: url("./assets/social-media/wilmo.svg");
}

.vc {
    background-image: url("./assets/social-media/vcru.svg");
}

.gh {
    background-image: url("./assets/social-media/gh.svg");
}