* {
    box-sizing: border-box;
}

@font-face {
    font-family: "MyFont";
    src: url("fonts/Musinka.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Panama";
    src: url("fonts/Panama.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: "Inter";
    src: url("fonts/Inter.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}



html,
body {
    margin: 0;
    padding: 0;
    background: #000000;
    color: #ffffff;
    transition: opacity 0.3s ease;
}

body.page-loading {
    opacity: 0;
    background-color: #000;
}



  .stage {
    position: relative;
    width: 100%;
    max-width: 900px;
  
  }

  .photo {
    position: relative;
    width: 80%;           /* ширина фото — 75% от контейнера */
    left: 10%;            /* отступ от края — 10% ширины */
    top: -10%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0s;
    padding: 1%;
  }

  .photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  /* Первое фото — сверху по умолчанию */
  .photo--first {
    top: -10;
    z-index: 2;
  }

  /* Второе фото — сдвинуто вниз так, чтобы нахлёст был 30% высоты первого фото */
  .photo--second {
    top: -40%;   /* сдвиг = 100% высоты первого - 30% нахлёста */
    left: 18%;
    z-index: 2;
  }

  .photo.on-top {
    z-index: 3;
  }

  .photo:hover {
    transform: scale(1.02);
  }

.photo--fullscreen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: auto;
    max-height: 90vh;
    z-index: 9999;
    cursor: zoom-out;
    object-fit: contain;
}
/*
body {
    font-family: "MyFont", sans-serif;
}
*/

.hero {
    width: 100%;
    overflow: hidden;
    font-family: "Panama", sans-serif;
}

.hero__title,
.hero__name {
    margin: 0;
    padding: 0 18px;

    font-size: clamp(42px, 13vw, 82px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

/*
Блок с именем изначально имеет нулевую высоту.
Техника 0fr → 1fr позволяет плавно раскрывать
блок без фиксированной высоты.
*/

.hero__name-wrapper {
    display: grid;
    grid-template-rows: 0fr;

    opacity: 0;
    transform: translateY(-20px);

    transition:
        grid-template-rows 1.1s cubic-bezier(0.76, 0, 0.24, 1),
        opacity 0.65s ease 0.15s,
        transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}

.hero__name-inner {
    min-height: 0;
    overflow: hidden;
}

.hero__name {
    padding-top: 6px;
    padding-bottom: 14px;
}

.hero__image {
    width: 100%;
    overflow: hidden;

    transition: height 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}

.hero__image img {
    display: block;
    width: 100%;
    height: auto;

    clip-path: inset(0 0 0 0);

    transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}

.hero__image.is-collapsed {
    height: 0 !important;
}

.hero__image.is-collapsed img {
    clip-path: inset(0 0 100% 0);
}

/* Состояние после запуска анимации */

.hero.is-visible .hero__name-wrapper {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
}

/* блок вопрос-ответ */
.faq  {
    width: 100%;
    padding: 30px 30px;

    position: relative;
    overflow: hidden;
    z-index: 2;
}

.faq__title {
    margin: 0 0 60px;

    color: #ffffff;
    font-size: clamp(38px, 11vw, 72px);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.05em;
}

/* Отдельный класс для вопроса */

.faq__question {
    margin: 0 0 18px;
    font-family: "Panama", sans-serif;
    color: #ffffff;
    font-size: clamp(26px, 7vw, 44px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.035em;
}

/* Отдельный класс для ответа */

.faq__answer {
    margin: 0;
    font-family: "Inter", sans-serif;
    color: #ffffff;
    font-size: clamp(19px, 10vw, 30px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.faq__item {
    padding: 32px 0;
    border-top: none
}

.faq__item:last-child {
    border-bottom: none
}

/* 3D */
.model-section {
    width: 100%;
    padding: clamp(40px, 8vw, 120px) 0;
    overflow: hidden;
    background-color: #000000;
}

.model-3d{
    
    
    position:absolute;
    width:min(70vw,850px);
    height:min(70vw,850px);

    transform:translateY(-50%);
    opacity:1.0;
    pointer-events:none;
}


.model-3d2{
position:absolute;
   top:110%;
    
}

.model-3d3{
position:absolute;
   top:230%;
    
}



/* Canvas создаётся через JavaScript */

.model-3d canvas {
    display: block;
    width: 100%;
    height: 100%;

    touch-action: pan-y;
}

/* Надпись во время загрузки */

.model-3d__status {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;

    margin: 0;

    color: #777777;
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 400;

    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* После загрузки надпись исчезает */

.model-3d.is-loaded .model-3d__status {
    display: none;
}

/* Сообщение при ошибке */

.model-3d.has-error .model-3d__status {
    color: #ffffff;
}


/* Преимущества */

.advantages{
padding: 30px 30px;
}


.advantages-title {
    
    font-family: "Panama", sans-serif;
    font-size: clamp(2rem, 10vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 3rem;
}

.advantage-title {
    font-family: "Panama", sans-serif;
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.advantage-text {
    font-family: "Inter", sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
}

.lesson {
 width: 100%;

}
.lesson-text {
 font-family: "Inter", sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    padding: 30px 30px;
}

.lesson-title {
    font-family: "Panama", sans-serif;
    font-size: clamp(2.5rem, 5vw, 0.75rem);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.01rem;
    padding: 30px;
}


.contacts-title{margin: 0 0 18px;
    font-family: "Panama", sans-serif;
    font-size: clamp(2.5rem, 5vw, 0.75rem);
    font-weight: 600;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.035em;
    padding-top: 20dvh;
    padding: 30px;
}

.contacts-phone{
    color: #abf0ad;
    font-family: "Inter", cursive;
    font-size: 8.5ch;
    padding: 5%;
}

.final-photo {
    width: 100%;
    padding: clamp(40px, 8vw, 120px) var(--page-padding);
    overflow: hidden;
}

.final-photo__image {
    display: block;

    width: 100%;
    max-width: 90%;
    height: auto;

    margin-inline: auto;

    object-fit: cover;
    border-radius: clamp(8px, 2vw, 24px);
}