:root {
    --dx: 0px;
    --dy: 0px;
    --rot: 0deg;
    --strip-duration: 60s;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    background: #F5F3EF;
    color: #2b2520;
    font-family: "Manrope", serif;
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
    overscroll-behavior-x: none;
    transition: background .8s ease, color .8s ease;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
}

button {
    font-family: inherit;
    color: inherit;
    cursor: pointer;
}

.container {
    width: min(1280px, calc(100% - 140px));
    margin: auto;
}


/* dark mode */

body.dark {
    background: #151014;
    color: #f5eee9;
}

body.dark .logo {
    color: #fff;
}

body.dark .logo span {
    color: #8db6e8;
}


body.dark .book-btn {
    background: #f5eee9;
    color: #29231f !important;
}

body.dark .book-btn:hover {
    background: #8db6e8;
}

body.dark .lang-btn {
    border-color: rgba(255, 255, 255, .18);
    color: #e7ded9;
}

.workshops-menu a:hover {
    color: #2669b7;
}

body.dark .workshops-menu a:hover {
    color: #8db6e8;
}

body.dark .lang-btn.active {
    background: #f5eee9;
    color: #29231f;
}


/* hero */

.hero {
    min-height: 100vh;
    position: relative;
    /*
    overflow: hidden;
    */
    overflow-x: clip;
    overflow-y: visible;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 150px 20px 90px;

    background:
            radial-gradient(
                    circle at center,
                    rgba(38, 105, 183, .09),
                    transparent 45%
            ),
            #F5F3EF;

    transition: background .8s ease;
}




body.dark .hero {
    background:
            radial-gradient(
                    circle at center,
                    rgba(141, 182, 232, .12),
                    transparent 45%
            ),
            #151014;
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    pointer-events: none;
}

.hero::before {
    width: 650px;
    height: 650px;

    border: 1px solid rgba(138, 119, 104, .12);
}

.hero::after {
    width: 900px;
    height: 900px;

    border: 1px solid rgba(138, 119, 104, .06);
}

body.dark .hero::before,
body.dark .hero::after {
    border-color: rgba(255, 255, 255, .07);
}

.hero-content {
    position: relative;
    z-index: 5;

    width: min(1000px, 90%);
    text-align: center;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 26px;

    color: #4f78a8;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;

    opacity: 0;

    animation: heroReveal 1s .25s forwards;
}

.hero-kicker::before,
.hero-kicker::after {
    content: "";

    width: 28px;
    height: 1px;

    background: #a7bdd8;
}

.hero-title {
    font-family: "Playfair Display", serif;

    font-size: clamp(54px, 7vw, 100px);
    font-weight: 400;

    line-height: .92;
    letter-spacing: -4px;

    color: #2b2520;

    opacity: 0;

    animation: heroReveal 1.2s .45s forwards;
}

.hero-title em {
    color: #2669b7;
    font-style: italic;
}

body.dark .hero-title {
    color: #f7f0eb;
}

body.dark .hero-title em {
    color: #8db6e8;
}

.hero-description {
    max-width: 480px;

    margin: 0 auto;

    color: #88776e;

    font-size: 15px;
    line-height: 1.8;
}

body.dark .hero-description {
    color: #b8aaa4;
}


/* prostor za chinijata */

.plate-area {
    position: relative;
    z-index: 4;

    width: min(850px, 90vw);
    height: 450px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 10px;

    perspective: 1000px;

    opacity: 0;

    animation: heroFade 1.2s .7s forwards;
}


.plate-area::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(49, 91, 120, .09),
                    rgba(212, 119, 82, .04) 45%,
                    transparent 70%
            );

    filter: blur(18px);

    pointer-events: none;
}

.plate {
    position: relative;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    box-shadow:
            0 35px 55px rgba(40, 30, 20, .16),
            inset 0 8px 12px rgba(255, 255, 255, .9),
            inset 0 -12px 20px rgba(80, 60, 40, .12);

    transform: rotateX(12deg);

    animation: plateFloat 6s ease-in-out infinite;

    cursor: pointer;

    outline: none;
}

.plate:focus-visible {
    box-shadow:
            0 35px 55px rgba(40, 30, 20, .16),
            inset 0 8px 12px rgba(255, 255, 255, .9),
            inset 0 -12px 20px rgba(80, 60, 40, .12),
            0 0 0 3px #2669b7;
}

body.dark .plate {
    box-shadow:
            0 35px 60px rgba(0, 0, 0, .45),
            inset 0 8px 12px rgba(255, 255, 255, .9),
            inset 0 -12px 20px rgba(80, 60, 40, .12);
}


/* otkrivanje so boja */

.plate-disc {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    overflow: hidden;
}

.plate-img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    pointer-events: none;
    user-select: none;
}

.plate-base {
    z-index: 1;
}

/* gotovata slika se crta samo preku maskata na canvas */
.plate-painted {
    visibility: hidden;
}

.paint-canvas {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    pointer-events: none;
}

.splash-field {
    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: 3;
}

.splash-dot {
    position: absolute;

    left: 0;
    top: 0;

    border-radius: 50%;

    transform: translate(-50%, -50%) scale(0);

    opacity: 0;

    filter: blur(.15px);

    animation: splashPop 620ms cubic-bezier(.16, .86, .28, 1) forwards;
}

.splash-dot.big {
    border-radius: 42% 58% 55% 45%;
}

.paint-flash {
    position: absolute;

    left: 0;
    top: 0;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    transform: translate(-50%, -50%) scale(.25);

    opacity: 0;

    border: 2px solid rgba(255, 255, 255, .55);

    box-shadow: 0 0 0 7px rgba(212, 119, 82, .10);

    animation: paintFlash 480ms ease-out forwards;

    pointer-events: none;
}


/* hint za hover */

.plate-hint {
    position: absolute;

    left: 50%;
    bottom: 6px;

    transform: translateX(-50%);

    padding: 9px 18px;

    border-radius: 40px;

    border: 1px solid rgba(38, 105, 183, .25);

    background: rgba(250, 247, 242, .85);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    color: #4f78a8;

    font-family: "Playfair Display", serif;
    font-style: italic;

    font-size: 14px;

    white-space: nowrap;

    transition: opacity .35s ease, transform .35s ease;

    animation: hintBob 2.4s ease-in-out infinite;

    z-index: 6;
}

body.dark .plate-hint {
    background: rgba(36, 28, 32, .8);
    border-color: rgba(141, 182, 232, .22);
    color: #d9cbc5;
}

.plate-area.is-busy .plate-hint {
    opacity: 0;

    transform: translateX(-50%) translateY(6px);

    animation: none;
}


/* tekst pod chinijata */

.plate-info {
    position: relative;
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 26px;

    margin-top: 22px;

    text-align: center;

    opacity: 0;

    animation: heroReveal 1s .9s forwards;
}

body {
    --paper: #FAF7F2;
    --paper-alt: #ebe5de;
    --ink: #2b2520;
    --muted: #85746c;
    --soft: #5f86b3;
    --line: rgba(43, 37, 32, .14);
    --accent: #2669b7;
    --placeholder: #ddd6ce;
}

body.dark {
    --paper: #151014;
    --paper-alt: #1d171b;
    --ink: #f5eee9;
    --muted: #a99b96;
    --soft: #7c9fc8;
    --line: rgba(255, 255, 255, .11);
    --accent: #8db6e8;
    --placeholder: #2a2126;
}


/* zaednichki delovi na sekciite */

.intro,
.process,
.finish,
.atmosphere,
.after {
    padding: 120px 0 140px;

    overflow-x: clip;

    color: var(--ink);

    transition: background .8s ease;
}

.intro,
.finish,
.after {
    background: var(--paper);
}

.process,
.atmosphere {
    background: var(--paper-alt);
}


.section-label {
    display: flex;
    align-items: baseline;

    gap: 16px;

    padding-bottom: 18px;
    margin-bottom: 70px;

    border-bottom: 1px solid var(--line);

    color: var(--soft);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;

    text-transform: uppercase;
}

.intro h2,
.section-head h2,
.atmosphere-head h2,
.after-copy h2 {
    font-family: "Playfair Display", serif;

    font-size: clamp(44px, 5.2vw, 76px);
    font-weight: 400;

    line-height: .98;
    letter-spacing: -2.5px;
}

.intro h2 em,
.section-head h2 em,
.atmosphere-head h2 em,
.after-copy h2 em {
    color: var(--accent);
    font-style: italic;
}

.section-head {
    display: grid;

    grid-template-columns: 1.2fr .8fr;

    gap: 90px;

    align-items: end;

    margin-bottom: 90px;
}

.section-head p {
    max-width: 400px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}


/* voved */

.intro-grid {
    display: grid;

    grid-template-columns: 1.1fr .9fr;

    gap: 100px;

    align-items: start;
}

.intro-side > p {
    max-width: 470px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.8;
}

.spec {
    margin-top: 45px;

    border-top: 1px solid var(--line);
}

.spec-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;

    gap: 20px;

    padding: 17px 0;

    border-bottom: 1px solid var(--line);
}

.spec dt {
    color: var(--soft);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;

    text-transform: uppercase;
}

.spec dd {
    font-family: "Playfair Display", serif;

    font-size: 21px;
}


/* proces (horizontalen akordeon od sliki) */

.steps {
    display: flex;

    gap: 12px;

    height: min(600px, 72vh);
}

.step {
    position: relative;

    flex: 1 1 0;

    min-width: 0;

    padding: 0;

    border: 0;
    border-radius: 4px;

    overflow: hidden;

    background: var(--placeholder);

    text-align: left;

    transition: flex-grow .5s cubic-bezier(.4, 0, .2, 1);
}

.step.active {
    flex-grow: 3.8;

    cursor: default;
}

.step:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.step-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: brightness(.55) saturate(.8);

    transform: scale(1.08);

    transition:
            filter .5s ease,
            transform .8s ease;
}

.step:hover .step-bg {
    filter: brightness(.7) saturate(.9);
}

.step.active .step-bg {
    filter: none;

    transform: scale(1);
}

.step::after {
    content: "";

    position: absolute;
    inset: 40% 0 0;

    background:
            linear-gradient(
                    transparent,
                    rgba(43, 35, 30, .85)
            );

    opacity: 0;

    transition: opacity .5s ease;

    pointer-events: none;
}

.step.active::after {
    opacity: 1;
}

/* potesni panel so samo naslovot napishan vertikalno */
.step-label-vertical {
    position: absolute;

    left: 50%;
    bottom: 28px;

    z-index: 2;

    transform: translateX(-50%) rotate(180deg);

    writing-mode: vertical-rl;

    color: #fff;

    font-family: "Playfair Display", serif;
    font-style: italic;

    font-size: 22px;
    line-height: 1;

    white-space: nowrap;

    transition: opacity .3s ease;
}

.step.active .step-label-vertical {
    opacity: 0;
}

/* cel panel so broj naslov i opis */
.step-content {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 2;

    display: flex;
    flex-direction: column;

    /* fiksna shirina za tekstot da ne se prerasporeduva dodeka se otvora panelot */
    width: min(560px, calc(55vw - 100px));

    padding: 0 36px 34px;

    color: #fff;

    opacity: 0;

    transform: translateY(14px);

    transition:
            opacity .3s ease,
            transform .3s ease;

    pointer-events: none;
}

.step.active .step-content {
    opacity: 1;

    transform: none;

    transition:
            opacity .4s ease .25s,
            transform .4s ease .25s;
}

.step-title {
    font-family: "Playfair Display", serif;

    font-size: 34px;
    font-weight: 400;

    line-height: 1.1;
    letter-spacing: -.5px;
}

.step-desc {
    max-width: 440px;

    margin-top: 12px;

    color: rgba(255, 255, 255, .85);

    font-size: 15px;
    line-height: 1.8;
}

.finish-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;
}

.finish-option {
    padding-right: 60px;
}

.finish-option + .finish-option {
    padding-right: 0;
    padding-left: 60px;

    border-left: 1px solid var(--line);
}

.finish-photo {
    aspect-ratio: 4 / 3;

    border-radius: 4px;

    overflow: hidden;

    background: var(--placeholder);
}

.finish-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}

.finish-option:hover .finish-photo img {
    transform: scale(1.04);
}

.option-tag {
    margin-top: 34px;

    color: var(--soft);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 4px;

    text-transform: uppercase;
}

.finish-option h3 {
    margin-top: 10px;

    font-family: "Playfair Display", serif;

    font-size: 46px;
    font-weight: 400;

    letter-spacing: -1.5px;
}

.option-lead {
    max-width: 420px;

    margin-top: 12px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.75;
}

.option-steps {
    list-style: none;

    margin-top: 34px;
}

.option-steps li {
    display: grid;

    padding: 20px 0;

    border-top: 1px solid var(--line);
}

.option-steps strong {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;

    text-transform: uppercase;
}

.option-steps p {
    max-width: 400px;

    margin-top: 6px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.75;
}

.finish-note {
    margin-top: 80px;
    padding-top: 30px;

    border-top: 1px solid var(--line);

    font-family: "Playfair Display", serif;
    font-style: italic;

    font-size: 22px;

    color: var(--muted);
}


/* infinite lenta */

.atmosphere {
    overflow: hidden;
}

.atmosphere-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-bottom: 60px;
}

.atmosphere-head p {
    max-width: 480px;

    margin-top: 26px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.8;
}

.strip-nav {
    display: flex;

    gap: 10px;

    flex-shrink: 0;
}

.strip-nav button {
    width: 52px;
    height: 52px;

    border-radius: 50%;

    border: 1px solid var(--line);

    background: transparent;

    color: var(--ink);

    font-size: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: .3s ease;
}

.strip-nav button:hover {
    background: var(--accent);
    border-color: var(--accent);

    color: #fff;
}

.strip {
    overflow: hidden;

    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* lentata gi sodrzhi slikite dvapati za polovina go pravi krugot bez prekin */
.strip-track {
    display: flex;

    width: max-content;

    animation: stripMarquee var(--strip-duration, 60s) linear infinite;
}

@keyframes stripMarquee {
    to {
        transform: translateX(-50%);
    }
}

.strip-item {
    flex: 0 0 auto;

    width: 310px;


    margin-right: 20px;
}

.strip-item.wide {
    width: 480px;
}

.strip-item img {
    width: 100%;
    height: 430px;

    object-fit: cover;

    border-radius: 4px;

    background: var(--placeholder);
}

.strip-item figcaption {
    display: flex;
    align-items: baseline;

    margin-top: 16px;

    font-family: "Playfair Display", serif;
    font-style: italic;

    font-size: 17px;
    line-height: 1.4;
}



/* posle pechkata */

.after-grid {
    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 130px;

    align-items: center;
}

.after-visual {
    position: relative;

    max-width: 430px;
}

.after-arch {
    aspect-ratio: 4 / 5;

    border-radius: 999px 999px 4px 4px;

    overflow: hidden;

    background: var(--placeholder);
}

.after-round {
    position: absolute;

    right: -60px;
    bottom: -40px;

    width: 46%;
    aspect-ratio: 1 / 1;

    border-radius: 50%;

    border: 8px solid var(--paper);

    overflow: hidden;

    background: var(--placeholder);

    transition: border-color .8s ease;
}

.after-arch img,
.after-round img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.after-copy p {
    max-width: 460px;

    margin-top: 30px;

    color: var(--muted);

    font-size: 16px;
    line-height: 1.85;
}

.after-timeline {
    display: grid;

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

    margin-top: 130px;

    border-top: 1px solid var(--line);
}

.after-stage {
    padding: 28px 30px 0 0;
}

.after-stage + .after-stage {
    padding-left: 30px;

    border-left: 1px solid var(--line);
}

.after-stage small {
    display: block;

    color: var(--accent);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;

    text-transform: uppercase;
}

.after-stage strong {
    display: block;

    margin-top: 12px;

    font-family: "Playfair Display", serif;

    font-size: 26px;
    font-weight: 400;
}

.after-stage p {
    max-width: 320px;

    margin-top: 10px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.75;
}


.final {
    padding: 130px 0;

    background: #EBE5DE;

    color: #2b2520;

    transition: background .8s ease;
}

body.dark .final {
    background: #151014;
    color: #f3ece7;

    border-top: 1px solid rgba(255, 255, 255, .08);
}

.final-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 60px;
}

.final h2 {
    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 6vw, 88px);
    font-weight: 400;

    line-height: .95;
    letter-spacing: -3px;
}

.final h2 em {
    color: #8db6e8;
    font-style: italic;
}

.final p {
    max-width: 470px;

    margin-top: 28px;

    color: #b8aaa4;

    font-size: 15px;
    line-height: 1.8;
}


/* kopchinja */

.btn-primary,
.btn-light {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 16px 34px;

    border-radius: 40px;

    font-size: 12px;
    font-weight: 600;

    transition: .3s ease;
}

.btn-primary {
    background: #121212;

    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-3px);

    background: #337fb7;
}

.btn-light {
    flex-shrink: 0;

    padding: 20px 40px;

    background: #f5eee9;

    color: #2b2520;

    font-size: 13px;
}

.btn-light:hover {
    transform: translateY(-3px);

    background: #8db6e8;
}


/* skrol reveal */

.reveal {
    opacity: 0;

    transform: translateY(30px);

    transition:
            opacity .9s ease,
            transform .9s cubic-bezier(.2, .7, .2, 1);
}

.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}


/* animacii */

@keyframes heroReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFade {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes plateFloat {

    0%, 100% {
        transform:
                rotateX(12deg)
                translateY(0)
                rotateZ(-1deg);
    }

    50% {
        transform:
                rotateX(12deg)
                translateY(-9px)
                rotateZ(1deg);
    }
}

@keyframes splashPop {

    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }

    18% {
        opacity: .95;
    }

    55% {
        transform:
                translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                scale(1)
                rotate(var(--rot));
        opacity: .85;
    }

    100% {
        transform:
                translate(calc(-50% + var(--dx)), calc(-50% + var(--dy)))
                scale(.55)
                rotate(var(--rot));
        opacity: 0;
    }
}

@keyframes paintFlash {

    0% {
        transform: translate(-50%, -50%) scale(.25);
        opacity: .7;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.35);
        opacity: 0;
    }
}

@keyframes hintBob {

    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(3px);
    }
}


/* tablet */

@media (max-width: 900px) {

    /*.navbar {*/
    /*    height: 90px;*/
    /*    padding: 0 25px;*/
    /*}*/

    /*.nav-links {*/
    /*    gap: 16px;*/
    /*    padding: 14px 18px;*/
    /*}*/

    /*.nav-links li:not(.nav-cta):not(.nav-toggle):not(.nav-lang) {*/
    /*    display: none;*/
    /*}*/

    .container {
        width: calc(100% - 50px);
    }

    .hero {
        padding-top: 130px;
    }

    .plate {
        width: 330px;
        height: 330px;
    }

    .plate-area {
        height: 400px;
    }

    .intro,
    .process,
    .finish,
    .atmosphere,
    .after {
        padding: 100px 0 110px;
    }

    .section-label {
        margin-bottom: 50px;
    }

    .intro-grid,
    .section-head,
    .after-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .section-head {
        margin-bottom: 60px;
    }

    .steps {
        flex-direction: column;

        height: auto;
    }

    .step {
        flex: none;

        height: 84px;

        transition: height .5s cubic-bezier(.4, 0, .2, 1);
    }

    .step.active {
        height: 440px;
    }

    .step-label-vertical {
        left: 24px;
        top: 50%;
        bottom: auto;

        transform: translateY(-50%);

        writing-mode: horizontal-tb;

        font-size: 22px;
    }

    .step-content {
        width: 100%;

        padding: 0 24px 26px;
    }

    .finish-option {
        padding-right: 28px;
    }

    .finish-option + .finish-option {
        padding-left: 28px;
    }

    .finish-option h3 {
        font-size: 38px;
    }

    .after-visual {
        max-width: 380px;
    }

    .after-round {
        right: -20px;
    }

    .after-timeline {
        margin-top: 100px;
    }

    .final-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* mali ekrani */

@media (max-width: 650px) {

    /*.navbar {*/
    /*    height: 80px;*/
    /*    padding: 0 18px;*/
    /*}*/

    /*.nav-links {*/
    /*    padding: 11px 14px;*/
    /*    gap: 12px;*/
    /*}*/

    .book-btn {
        padding: 11px 18px;
    }

    .hero {
        min-height: 100svh;

        padding: 115px 18px 70px;
    }

    .hero::before {
        width: 430px;
        height: 430px;
    }

    .hero::after {
        width: 650px;
        height: 650px;
    }

    .hero-kicker {
        letter-spacing: 2.5px;
    }

    .hero-kicker::before,
    .hero-kicker::after {
        display: none;
    }

    .hero-title {
        font-size: clamp(50px, 15vw, 80px);
        letter-spacing: -3px;
    }

    .hero-description {
        max-width: 330px;
        font-size: 13px;
    }

    .plate {
        width: 290px;
        height: 290px;
    }

    .plate-area {
        height: 370px;
    }

    .plate-area::before {
        width: 360px;
        height: 360px;
    }

    .plate-hint {
        font-size: 12.5px;
    }

    .intro,
    .process,
    .finish,
    .atmosphere,
    .after {
        padding: 80px 0 90px;
    }

    .intro h2,
    .section-head h2,
    .atmosphere-head h2,
    .after-copy h2 {
        font-size: 44px;
        letter-spacing: -2px;
    }

    .step-title {
        font-size: 28px;
    }

    .finish-grid {
        grid-template-columns: 1fr;
    }

    .finish-option,
    .finish-option + .finish-option {
        padding: 0;

        border-left: 0;
    }

    .finish-option + .finish-option {
        margin-top: 70px;
    }

    .finish-note {
        margin-top: 60px;

        font-size: 19px;
    }

    .atmosphere-head {
        flex-direction: column;
        align-items: flex-start;

        gap: 30px;

        margin-bottom: 40px;
    }

    .strip-item {
        width: 250px;
    }

    .strip-item.wide {
        width: 320px;
    }

    .strip-item img {
        height: 340px;
    }

    .after-visual {
        max-width: 78%;
    }

    .after-round {
        right: -8%;
        bottom: -30px;
    }

    .after-grid {
        gap: 80px;
    }

    .after-timeline {
        grid-template-columns: 1fr;

        margin-top: 70px;

        border-top: 0;
    }

    .after-stage,
    .after-stage + .after-stage {
        padding: 26px 0;

        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .final {
        padding: 90px 0;
    }

    .final h2 {
        font-size: clamp(44px, 13vw, 70px);
        letter-spacing: -2px;
    }
}


@media (max-width: 400px) {

    .container {
        width: calc(100% - 36px);
    }

    .logo {
        font-size: 19px;
    }

    .book-btn {
        padding: 10px 14px;
        font-size: 11px;
    }

    .hero-title {
        font-size: 48px;
    }

    .plate {
        width: 260px;
        height: 260px;
    }

    .plate-area {
        height: 340px;
    }

    .plate-hint {
        white-space: normal;

        width: 230px;

        text-align: center;
    }

    .intro h2,
    .section-head h2,
    .atmosphere-head h2,
    .after-copy h2 {
        font-size: 38px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .plate,
    .plate-hint {
        animation: none;
    }

    .splash-dot {
        display: none;
    }

    .step,
    .step-bg,
    .step-label-vertical,
    .step-content {
        transition: none;
    }
}

/* boi na pozadinata */

/* light mode */
body {
    background: #FAF7F2;
}

/* hero */
.hero {
    background:
            radial-gradient(
                    circle at center,
                    rgba(38, 105, 183, .09),
                    transparent 45%
            ),
            #FAF7F2;
}

.intro,
.finish,
.after {
    background: #FAF7F2;
}

.process,
.atmosphere {
    background: #EBE5DE;
}

/* dark mode */
body.dark {
    background: #151014;
}

body.dark .hero {
    background:
            radial-gradient(
                    circle at center,
                    rgba(141, 182, 232, .12),
                    transparent 45%
            ),
            #151014;
}

body.dark .intro,
body.dark .process,
body.dark .finish,
body.dark .atmosphere,
body.dark .after {
    background: #151014;
}

body.dark {
    --paper: #151014;
    --paper-alt: #151014;
}

/* boite na futerot i tekstot ostanuvaat isti */