/* Vars */
:root {
    --color-gold: #D37F50;
    --color-gold-opacity-med: rgba(211, 127, 80, .6); 
    --color-gold-opacity-low: rgba(211, 127, 80, .16); 
    --color-gray: #ECECEC;
    --color-dark-gray: #131313;
    --color-dark-gray-opacity-med: rgba(19, 19, 19, .6); 
    --color-dark-gray-opacity-low: rgba(19, 19, 19, .16); 
    --color-white: #FFFFFF;
    --color-white-opacity-med: rgba(255, 255, 255, .6); 
    --color-white-opacity-low: rgba(255, 255, 255, .16); 

    --gap: 10px;
    --border-radius: 24px;

    --z-index-menu: 5;
    --z-index-content-bg: 1;

    --header-height: 60px;
    --max-width: 800px;
}

/* Fonts */
@font-face {
    font-family: 'Montserrat';
    src: url('./assets/fonts/Montserrat-Regular.woff') format('woff2'),
        url('./assets/fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Microgramma';
    src: url('./assets/fonts/Microgramma-Normal.woff2') format('woff2'),
        url('./assets/fonts/Microgramma-Normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Typography */
h1, h2, h3, h4 {
    font-weight: normal;
    font-family: "Microgramma";
    user-select: none;
}

h1, h2 {
    font-size: 30px;
    line-height: 32px;
}

h3 {
    font-size: 22px;
    line-height: 24px;
}

/* Helpers */
.content-width {
    max-width: var(--max-width);
}

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-white {
    color: var(--color-white);
}

.text-gold {
    color: var(--color-gold)
}

.text-gray {
    color: var(--color-gray);
}

.text-larger {
    font-size: 1.25em;
}

.opacity-75 {
    opacity: .75;
}

.content-background {
    position: relative;
}

.content-background::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-index-content-bg);
}

.block-in-center {
    margin: 0 auto;
}

.full-height {
    height: 100%;
}

img.grayscale {
    filter: grayscale(100%);
}

/* Components */
.image-caption {
    color: var(--color-white);
    padding: calc(var(--gap) * 2);
    border-radius: var(--border-radius);
    background: var(--color-dark-gray-opacity-med);
    backdrop-filter: blur(10px);
}

.photos {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.photo {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
}

.photos .photo {
    min-width: 324px;
    height: 355px;
}

.photo img {
    max-width: 100%;
    height: fit-content;
    aspect-ratio: 9/16;
    transform: translateY(-20%);
}


.photo .image-caption {
    position: absolute;
    left: var(--gap);
    right: var(--gap);
    bottom: var(--gap);
    z-index: calc(var(--z-index-menu) - 1);
}

@media screen and (min-width: 500px) {
    .photos {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .photos .photo {
        width: calc((100% - var(--gap)) / 2);
        height: unset;
        min-width: unset;
        aspect-ratio: 1/1;
    }

    .photo img {
        transform: translateY(-10%);
    }
}

ul li:not(:first-child) {
    margin-top: 10px;
}

ul.list-blocks li {
    border: 1px solid var(--color-dark-gray-opacity-low);
    border-radius: var(--border-radius);
    padding: calc(var(--gap) * 2);
    padding-right: calc(var(--gap) * 4.5);
    padding-left: calc(var(--gap) * 7);
    list-style: none;
    background-image: url("./assets/icons.svg#list");
    background-size: 34px 14px;
    background-repeat: no-repeat;
    background-position: calc(var(--gap) * 2) calc(var(--gap) * 2.5);
}

ul.list-blocks li.list-item-telegram {
    background-image: url("./assets/icons.svg#telegram");
    background-size: 32px 32px;
}

ul.list-blocks li.list-item-pdf {
    background-image: url("./assets/icons.svg#pdf");
    background-size: 32px 32px;
    background-position: calc(var(--gap) * 2) calc(var(--gap) * 1.5);
}

ul.list-blocks.colorized li:nth-child(3n+1) {
    color: var(--color-white);
    background-color: var(--color-dark-gray);
    border-color: transparent;
}

ul.list-blocks.colorized li:nth-child(3n+2) {
    background-color: var(--color-gray);
    border-color: transparent;
}
ul.list-blocks.colorized li:nth-child(3n) {
    background-color: var(--color-white);
}

.secondary-caption {
    font-size: 10px;
    font-family: "Microgramma";
    border-radius: var(--border-radius);
    border: 1px solid var(--color-white-opacity-low);
    background-color: var(--color-dark-gray);
    padding: var(--gap);
    user-select: none;
    color: var(--color-white);
}

.secondary-caption.reverted {
    background-color: var(--color-dark-gray-opacity-low);
    color: var(--color-dark-gray);
}

p {
    line-height: 1.5;
}

.price {
    font-family: "Montserrat";
    font-size: 36px;
    position: relative;
    padding-top: 20px;
    display: inline-block;
    font-weight: bold;
}

.price:before {
    content: "$" attr(data-oldprice);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: var(--color-dark-gray);
    opacity: .4;
    text-decoration: line-through;
    font-weight: normal;
}

a {
    color: var(--color-gold);
    text-decoration: underline;
}

a:hover, a:focus {
    text-decoration: none;
}

/* Form */
form label{
    font-size: 11px;
    line-height: 1.5;
}

input[type="text"],
input[type="email"] {
    background: var(--color-gray);
    border-radius: calc(var(--border-radius) / 2);
    padding: calc(var(--gap) * 1.5);
    border: none;
    color: var(--color-dark-gray);
    font-size: 15px;
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus {
    border: none;
    outline: none;
}

.button {
    font-size: 10px;
    font-family: "Microgramma";
    border-radius: calc(var(--border-radius) * 2);
    background: var(--color-gold);
    border: none;
    cursor: pointer;
    padding: 25px 30px;
    user-select: none;
    color: var(--color-white);
}

.link-icon {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: var(--color-dark-gray);
    border: 1px solid var(--color-white-opacity-low);
}

.link-icon.instagram {
    background-image: url("./assets/icons.svg#instagram");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

.link-icon.telegram {
    background-image: url("./assets/icons.svg#telegram2");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 17px 14px;
}

#hamburger-menu {
    display: block;
    width: 40px;
    height: 40px;
}

#hamburger-state {
    position: absolute;
    left: -9999px;
}

#hamburger {
    display: block;
    width: 100%;
    height: 100%;
    background: url("./assets/icons.svg#hamburger") no-repeat center;
    background-size: 40px 10px;
    cursor: pointer;
}

#hamburger-menu input:checked ~ #menu {
    left: 0;
}

#menu {
    position: fixed;
    z-index: var(--z-index-menu);
    left: -100%;
    top: var(--header-height);
    padding: var(--gap);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
    background: var(--color-dark-gray-opacity-med);
    overflow-y: auto;
    width: 100%;
    border-top: 1px solid var(--color-white-opacity-low)
}

#menu ul {
    font-family: "Microgramma";
}

#menu li {
    padding: 5px 0;
}

#menu ul a {
    color: var(--color-white);
    text-decoration: none;
    font-size: 18px;
}

.socials {
    display: flex;
    justify-content: center;
    gap: var(--gap);
}

@media screen and (max-width: 799px) {
    body:has(#hamburger-state:checked) {
        overflow: hidden;
    }
    
    #menu {
        bottom: 0px;
        background-color: var(--color-dark-gray);
    }

    #menu > * {
        position: relative;
    }
    
    #menu:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url("./assets/images/photos/photo_3.jpg");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;
        opacity: .2;
    }
}

@media screen and (min-width: 800px) {
    #menu {
        overflow-y: auto;
    }
}

.heading-extra {
    text-transform: uppercase;
    font-size: 10px;
    font-family: "Microgramma";
}

.space-between {
    display: flex;
    justify-content: space-between;
}

/* Accordion */
.accordion {
    list-style: none;
}

.accordion li {
    padding: 20px 0;
    border-bottom: 1px solid var(--color-dark-gray-opacity-low);
}

.accordion li:first-child {
    border-top: 1px solid var(--color-dark-gray-opacity-low);
}

.accordion label {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
    padding-left: 35px;
    min-height: 25px;
    background-position: 0 0;
    background: url("./assets/icons.svg#accordion-closed");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    cursor: pointer;
    display: block;
}

.accordion p {
    margin-top: calc(var(--gap) * 2);
    display: none;
}

.accordion input[type="checkbox"] {
    position: absolute;
    left: -9999px;
}

.accordion input:checked + label {
    background-image: url("./assets/icons.svg?1#accordion-opened");
}

.accordion input:checked ~ p {
    display: block;
}


/* Modal */
.modal {
    position: fixed;
    z-index: calc(var(--z-index-menu) + 1);
    top: var(--header-height);
    left: var(--gap);
    right: var(--gap);
    background-color: var(--color-gray);
    display: none;
    padding-top: 40px;
    overflow-y: auto;
}

.modal.visible {
    display: block;
}

.modal-block {
    padding: calc(var(--gap) * 2);
}

.modal-block:first-child {
    padding-top: 0;
}

.modal button[data-closeModal] {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
    background: url("./assets/icons.svg#close") center no-repeat;
    background-size: 13px 13px;
}

.modal h3 {
    margin-bottom: 30px;
    word-break: break-word;
}

.modal p {
    margin-bottom: 20px;
}

.modal#buy .heading-extra {
    opacity: .4;
    margin-bottom: var(--gap);
}

.modal#buy form,
.modal#buy form input[type="text"],
.modal#buy form input[type="email"] {
    background: var(--color-white);
}

.modal#buy form input[type="text"],
.modal#buy form input[type="email"] {
    border: 1px solid var(--color-dark-gray-opacity-low)
}

.modal#buy form {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

@media screen and (max-width: 799px) {
    .modal {
        max-height: calc(100% - var(--header-height) - var(--gap));
    }
}

@media screen and (min-width: 800px) {
    .modal {
        width: var(--max-width);
        right: unset;
        left: calc((100% - var(--max-width)) / 2)
    }
}

/* General */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat';
    font-size: 15px;
    line-height: 1.25;
    color: var(--color-dark-gray);
}

header {
    position: fixed;
    height: var(--header-height);
    background-color: var(--color-dark-gray);
    left: 0;
    top: 0;
    width: 100%;
    z-index: var(--z-index-menu);
}

header .content {
    display: flex;
    padding: var(--gap);
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.logo {
    font-size: 12px;
    font-family: "Microgramma";
    user-select: none;
}

#landing {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#landing .content, footer .content {
    padding: calc(var(--gap) * 6) var(--gap);
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
}

/* Home block */
#home {
    background: var(--color-dark-gray);
    height: 800px;
}

#home .content {
    position: relative;
    z-index: calc(var(--z-index-content-bg) + 1);
    align-items: center;
    justify-content: flex-end;
}

#home .heading-extra {
    opacity: .4;
}

#home .content-background::before {
    background: url("./assets/images/photos/photo_5.jpg") bottom left no-repeat;
    background-size: cover;
    filter: grayscale(100%);
    opacity: .4;
}

/* Description */
#description {
    background: var(--color-dark-gray);
}

#description .photos {
    counter-reset: count;
}

#description .photo {
    position: relative;
    counter-increment: count;
}

#description .photo img {
    aspect-ratio: 1/1.5;
}

#description .photo:after {
    content: "0" counter(count);
    position: absolute;
    right: var(--gap);
    top: var(--gap);
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: var(--color-dark-gray);
    color: rgba(255, 255, 255, .4);
    font-family: "Microgramma";
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pros */
#pros {
    background: var(--color-gray);
}

#pros h3 {
    margin-top: 40px;
}

#pros .list-blocks.custom li {
    border-color: transparent;
    background-color: var(--color-white);
}

/* About me */
#about-me {
    background: var(--color-dark-gray);
}

#about-me ul {
    list-style: none;
}

#about-me li {
    background-image: url("./assets/icons.svg#arrow");
    background-size: 25px 8px;
    background-repeat: no-repeat;
    background-position: 0 5px;
    padding-left: 35px;
}

#about-me li:not(:first-child) {
    margin-top: var(--gap);
}

#about-me-grid {
    display: grid;
    grid-template-rows: 5fr 2fr;
    grid-template-columns: 3fr 2fr;
    grid-template-areas:
        'photo1 photo2'
        'photo1 link'
    ;
    gap: var(--gap);
}

#about-me-grid div:nth-child(1) {
    grid-area: photo1;
    aspect-ratio: 1/1.3658;
}

#about-me-grid div:nth-child(1) img {
    aspect-ratio: 1/1.3658;
}

#about-me-grid div:nth-child(2) {
    grid-area: photo2;
    aspect-ratio: 1/1.4285;
}

#about-me-grid div:nth-child(2) img {
    aspect-ratio: 1/1.4285;
}

#about-me-grid a {
    grid-area: link;
    text-decoration: none;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-white-opacity-low);
    display: flex;
    justify-content: center;
    padding: calc(var(--gap) * 2);
    font-size: 19px;
    flex-direction: column;
}

#about-me-grid a span {
    font-size: 10px;
    opacity: .4;
    text-transform: uppercase;
}

#about-me-grid .photo img {
    min-height: 100%;
    transform: none;
}

#results {
    background-color: var(--color-gray);
}

/* Scrollable view */
.scrollable-view {
    display: flex;
    gap: var(--gap);
    overflow-x: scroll;
    overflow-y: hidden;
    padding-bottom: var(--gap);
}

.scrollable-view img {
    border: 1px solid var(--color-dark-gray-opacity-low);
    height: 485px;
    border-radius: var(--border-radius);
}

/* Short video */
#short-video {
    background: var(--color-dark-gray);
}

#short-video iframe {
    width: 100%;
    aspect-ratio: 16/9;
}

/* Price */
#price  .content {
    padding-bottom: 0;
}

#price-block {
    border-radius: var(--border-radius);
    background-color: var(--color-gold-opacity-low);
    padding: 50px 25px;
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) * 2);
}

#price-block ul {
    list-style: none;
}

#price-block li {
    padding: 20px 0 20px 60px;
    border-bottom: 1px solid var(--color-dark-gray-opacity-low);
    background-image: url("./assets/icons.svg#switch-on");
    background-repeat: no-repeat;
    background-position: left 20px;
    background-size: 40px 20px;
}

#price-block li:first-child {
    border-top: 1px solid var(--color-dark-gray-opacity-low);
}

/* Gift */
#gift-form {
    padding-top: 154px;
    background: url("./assets/gift-bg.png") top center no-repeat;
}

#gift-form form {
    background: var(--color-dark-gray);
    border-radius: var(--border-radius);
    padding: calc(var(--gap) * 4);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

#gift-form p {
    color: var(--color-white-opacity-med);
    font-size: 11px;
}

/* Faq */
#faq {
    background-color: var(--color-gray);
}

/* Footer */
footer {
    background-color: var(--color-dark-gray);
}

footer .content {
    padding-bottom: 0;
}

.footer-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.footer-row-label {
    font-size: 10px;
    color: var(--color-white-opacity-med);
    text-transform: uppercase;
}

.footer-row a:not(.link-icon) {
    color: var(--color-white);
    text-decoration: none;
}

.footer-row a:not(.link-icon):hover,
.footer-row a:not(.link-icon):focus {
    text-decoration: underline;
}

footer .policy {
    border-top: 1px solid var(--color-white-opacity-low);
    padding: calc(var(--gap) * 2) 0;
    font-size: 10px;
}

footer .policy a {
    color: var(--color-white-opacity-med);
}

footer .photos {
    justify-content: center;
}

footer .photo img {
    aspect-ratio: 1/1.5;
}

/* Thank you */
#thank-you {
    background: var(--color-dark-gray);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

#thank-you .content {
    position: relative;
    z-index: calc(var(--z-index-content-bg) + 1);
    align-items: center;
    justify-content: center;
}

#thank-you .content-background::before {
    background: url("./assets/images/photos/photo_4.jpg") bottom left no-repeat;
    background-size: cover;
    filter: grayscale(100%);
    opacity: .4;
}