@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

:root {
    --header-height: 3rem;

    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;

    --dark-color: #141414;
    --dark-color-light: #8A8A8A;
    --dark-color-lighten: #F2F2F2;
    --white-color: #FFFFFF;

    --body-font: 'Poppins', sans-serif;
    --signature-font: 'Turret Road', sans-serif;
    --big-font-size: 1.25rem;
    --bigger-font-size: 1.5rem;
    --biggest-font-size: 2rem;
    --h2-font-size: 1.25rem;
    --normal-font-size: .938rem;
    --smaller-font-size: .813rem;

    --m1: .5rem;
    --m2: 1rem;
    --m3: 1.5rem;
    --m4: 2rem;
    --m5: 2.5rem;
    --m6: 3rem;

    --z-fixed: 100;

    --rotate-img: rotate(-30deg);
}

.home-title span{
    color: #fe9264
}

@media screen and (min-width: 768px){
    :root {
        --big-font-size: 1.5rem;
        --bigger-font-size: 2rem;
        --biggest-font-size: 3rem;
        --normal-font-size: 1rem;
        --smaller-font-size: .875rem;
    }
}

*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: var(--header-height) 0 0 0; font-family: var(--body-font); font-size: var(--normal-font-size); font-weight: var(--font-medium); color: var(--dark-color); line-height: 1.6; }
h1, h2, h3, p, ul { margin: 0; }
    ul { padding: 0; list-style: none; }
a { text-decoration: none; color: var(--dark-color); }
img { max-width: 100%; height: auto; display: block; }
section { padding: 0rem 0 0rem; }
.section-title { position: relative; font-size: var(--big-font-size); margin-bottom: var(--m4); text-align: center; letter-spacing: 0.1rem; }
    .section-title::after { content: ''; position: absolute; width: 56px; height: 0.18rem; top: -1rem; left: 0; right: 0; margin: auto; background-color: var(--dark-color); }
.bd-grid { max-width: 1024px; display: grid; grid-template-columns: 100%; column-gap: 2rem; width: calc(100% - 2rem); margin-left: var(--m2); margin-right: var(--m2); }
.button { display: inline-block; background-color: var(--dark-color); color: var(--white-color); padding: 1.125rem 2rem; font-weight: var(--font-medium); border-radius: .5rem; transition: .4s; }
    .button:hover { transform: translateY(-.25rem); }
.button-light { display: inline-flex; color: var(--dark-color); font-weight: var(--font-bold); align-items: center; transition: .4s; }
.button-icon { font-size: 1.25rem; margin-left: var(--m1); transition: .4s; }
    .button-light:hover, .button-icon:hover { transform: translateX(.25rem); }

/*Header*/
.l-header { width: 100%; position: fixed; top: 0; left: 0; z-index: var(--z-fixed); background-color: var(--dark-color-lighten); }
.nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; }

@media screen and (max-width: 768px) {
    .nav-menu { position: fixed; top: var(--header-height); left: -100%; width: 70%; height: 100vh; padding: 2rem; background-color: var(--white-color); transition: .5s; }
    .show { left: 0; }
}

.nav-item { margin-bottom: var(--m4); }
.nav-logo { font-weight: var(--font-semi-bold); }
.nav-toggle, .nav-shop { font-size: 1.3rem; cursor: pointer; }
.active { position: relative; }
    .active::before { content: ''; position: absolute; bottom: -0.5rem; left: 45%; width: 4px; height: 4px; background-color: var(--dark-color); border-radius: 50%; }
.scroll-header { background-color: var(--white-color); box-shadow: 0 2px 4px rgba(0, 0, 0, .1); }

/*Home*/

.home { background-color: var(--dark-color-lighten); overflow: hidden; }
.home-container { height: calc(100vh - var(--header-height)); }
.home-sneaker { position: relative; display: flex; justify-content: center; align-self: center; }
.home-shape { width: 220px; height: 220px; background-color: var(--dark-color); border-radius: 50%; }
.home-img { position: absolute; top: 1.5rem; max-width: initial; width: 275px; transform: var(--rotate-img); }
.home-new { display: block; font-size: var(--smaller-font-size); font-weight: var(--font-semi-bold); margin-bottom: var(--m2); }
.home-title { font-size: var(--bigger-font-size); margin-bottom: var(--m1); }
.home-description { margin-bottom: var(--m6); }

/*Featured*/

.featured-container { row-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sneaker { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4rem; background-color: var(--dark-color-lighten); border-radius: 1.5rem; transition: .4s; }
    .sneaker:hover { transform: translateY(-.5rem); }
.sneaker-sale { position: absolute; left: 0.5rem; background-color: var(--dark-color); color: var(--white-color); padding: 0.25rem .5rem; border-radius: .25rem; font-size: var(--h2-font-size); transform: rotate(-90deg); letter-spacing: 0.1rem; }
.sneaker-img { width: 220px; margin-top: var(--m3); margin-bottom: var(--m6); filter: drop-shadow(0 12px 8px rgba(0, 0, 0, .2)); }
.sneaker-name, .sneaker-price { font-size: var(--h2-font-size); letter-spacing: 0.1rem; font-weight: var(--font-bold); }
    .sneaker-name { margin-bottom: var(--m1); }
    .sneaker-price { margin-bottom: var(--m4); }

/*Collection*/

.collection-container { row-gap: 2rem; justify-content: center; }
.collection-card { position: relative; display: flex; height: 328px; background-color: var(--dark-color-lighten); padding: 2rem; border-radius: .5rem; transition: .4s; }
    .collection-card:hover { transform: translateY(-.5rem); }
.collection-data { align-self: flex-end; }
.collection-img { position: absolute; top: 0; right: 0; width: 230px; }
.collection-name { font-size: var(--bigger-font-size); margin-bottom: .25rem; }
.collection-description { margin-bottom: var(--m2); }

/*Women*/

.women-container { row-gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/*Offer*/

.offer-container { grid-template-columns: 55% 45%; column-gap: 0; background-color: var(--dark-color-lighten); border-radius: .5rem; justify-content: center; }
.offer-data { padding: 4rem 0 4rem 1.5rem; }
.offer-title { font-size: var(--biggest-font-size); margin-bottom: .25rem; }
.offer-description { margin-bottom: var(--m3); }
.offer-img { width: 153px; }

/*New*/

.new-container { row-gap: 2rem; }
.new-mens { display: flex; flex-direction: column; justify-content: center; background-color: var(--dark-color-lighten); border-radius: .5rem; padding: 2rem; }
.new-mens-img { width: 276px; margin-bottom: var(--m3); }
.new-title { font-size: var(--bigger-font-size); margin-bottom: .25rem; }
.new-price { display: block; margin-bottom: var(--m3); }
.new-sneaker { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.new-sneaker-card { position: relative; padding: 3.5rem 1.5rem; background-color: var(--dark-color-lighten); border-radius: .5rem; overflow: hidden; display: flex; justify-content: center; }
.new-sneaker-img { width: 220px; }
.new-sneaker-overlay { position: absolute; left: 0; bottom: -100%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: rgba(138, 138, 138, .3); transition: .4s; }
    .new-sneaker-card:hover .new-sneaker-overlay { bottom: 0 !important; }

/*Newsletter*/

.newsletter-container { background-color: var(--dark-color); color: var(--white-color); padding: 2rem .5rem; border-radius: .5rem; text-align: center; }
.newsletter-title { font-size: var(--bigger-font-size); margin-bottom: var(--m2); }
.newsletter-description { margin-bottom: var(--m5); }
.newsletter-subscribe { display: flex; column-gap: .5rem; background-color: var(--white-color); padding: 0.5rem; border-radius: .5rem; }
.newsletter-input { outline: none; border: none; width: 90%; font-size: var(--normal-font-size); }
    .newsletter-input::placeholder { color: var(--dark-color); font-family: var(--body-font); font-size: var(--normal-font-size); font-weight: var(--font-semi-bold); }

/*Footer*/

.footer-container { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.footer-box { margin-bottom: var(--m4); }
.footer-title { font-size: var(--big-font-size); }
.footer-link { display: block; width: max-content; margin-bottom: var(--m1); }
.footer-social { font-size: 1.5rem; margin-right: 1.25rem; }
.footer-copy { padding-top: 3rem; font-size: var(--smaller-font-size); color: var(--dark-color-light); text-align: center; }
    .footer-copy a { font-size: var(--smaller-font-size); color: var(--dark-color-light); transition: .4s; font-family: var(--signature-font); }
        .footer-copy a:hover { color: var(--dark-color); }

/*Media Queries*/

@media screen and (min-width: 398px) {
    .new-mens { align-items: center; }
}

@media screen and (min-width: 576px) {
    .collection-container { grid-template-columns: 415px; }
    .collection-img { width: 260px; }

    .offer-container { grid-template-columns: max-content max-content; }
    .offer-data { text-align: center; }
}

@media screen and (min-width: 768px) {
    body { margin: 0; }
    .section { padding: 7rem 0; }
    .section-title::after { width: 76px; }
    .nav { height: calc(var(--header-height) + 1.5rem); }
    .nav-menu { margin-left: auto; }
    .nav-list { display: flex; }
    .nav-item { margin-left: var(--m6); margin-bottom: 0; }
    .nav-toggle { display: none; }

    .home-container { height: 100vh; grid-template-columns: max-content max-content; justify-content: center; align-items: center; }
    .home-sneaker { order: 1; }
    .home-shape { width: 376px; height: 376px; }
    .home-img { width: 470px; top: 3.5rem; right: 0; left: -3rem; }

    .newsletter-container { grid-template-columns: max-content max-content; justify-content: center; align-items: center; padding: 4.5rem 2rem; column-gap: 3rem; }
    .newsletter-description { margin-bottom: 0; }
    .newsletter-subscribe { width: 360px; height: max-content; }
}

@media screen and (min-width: 1024px) {
    .bd-grid { margin-left: auto; margin-right: auto; }
    .home-container { column-gap: 8rem; }
    .collection-container { grid-template-columns: 720px; }
    .new-container { grid-template-columns: max-content 1fr; }
    .new-mens { align-items: initial; justify-content: flex-end; padding: 4rem 2rem; }
    .new-mens-img { margin-bottom: var(--m6); }
}



.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center; 
  align-items: center;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  max-height: 80vh; /* Ограничиваем высоту окна */
  overflow-y: auto;  /* Включаем вертикальный скролл */
  background: #fff;
  padding: 30px 25px;
  border-radius: 16px;
  max-width: 460px;
  width: 90%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  animation: slideUp 0.35s ease;
  position: relative;
  font-family: "Segoe UI", sans-serif;
}

/* Заголовок */
.modal-title {
  margin: 0 0 20px 0;
  font-size: 22px;
  font-weight: 600;
  color: #222;
  text-align: center;
}

/* Кнопка закрытия */
.close {
  position: absolute;
  right: 20px; top: 15px;
  font-size: 26px;
  cursor: pointer;
  color: #888;
  transition: color 0.2s;
}
.close:hover { color: #000; }

/* ====== Форма ====== */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

input[type="text"], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: 0.2s;
}

input[type="text"]:focus, select:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79,70,229,0.2);
}

.checkbox-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.checkbox-group label {
  font-size: 14px;
  color: #555;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Кнопка отправки */
.submit-btn {
  background: #4f46e5;
  color: #fff;
  padding: 12px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transition: 0.3s;
}
.submit-btn:hover {
  background: #3730a3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79,70,229,0.3);
}

/* ====== Анимации ====== */
@keyframes fadeIn {
  from {opacity: 0;} to {opacity: 1;}
}

@keyframes slideUp {
  from {transform: translateY(30px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}



.video-comparison {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 4rem 0;
}

.video-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 320px; /* ширина айфона */
}

.video-container video {
  width: 100%;
  border-radius: 2rem; /* скругление углов как у iPhone */
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.video-label {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  color: #555;
}

.about-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 2rem;
  margin-top: 2rem;
}

.about-img img {
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: transparent;
}

.about-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-text span {
  font-weight: 700;
  font-size: 24px;
  color: #242424; /* акцент */
  margin-bottom: 1rem;
  display: inline-block;
  position: relative;
}

.about-text span::after {
  content: "";
  display: block;
  width: 120px;
  height: 3px;
  background: #fe9264; /* цвет из твоей палитры */
  margin-top: 6px;
  border-radius: 2px;
}

.about-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  z-index: 1;
  margin-left: -37%;
  margin-bottom: 20px;
}


.about-more {
  text-align: center;
  margin: 60px auto;
  max-width: 800px;
}

.about-file img {
  max-width: 100%;
  border-radius: 12px;
}


.download-link {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  background: #ff6b3d;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}
.download-link:hover {
  background: #e85c30;
}



@media screen and (max-width: 768px) {
  .about-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-img {
    order: -1; /* поднимаем картинку наверх */
  }

  .about-text {
    align-items: center;
  }

  .about-text span::after {
    margin-left: auto;
    margin-right: auto;
  }

  .about-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  z-index: 0;
  margin-left: 0px;
}
}


.future h1{
    margin-top: 72px;
    display: flex;
    justify-content: center; /* горизонтальное выравнивание */
    align-items: center;     /* вертикальное выравнивание */
}