@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto Slab", serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}
body {
    padding-top: 80px;
    background: #f5f5f5;
}


.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #EFF2EF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 60px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #E36397;
}

.header nav a {
    margin-left: 30px;
    text-decoration: none;
    color: #333;
    transition: 0.3s;
}

.header nav a:hover {
    color: #E36397;
}


.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: none;
    justify-content: center;
    align-items: center;
    
    
    
}

.modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    width: 820px;
    padding: 40px;
    border-radius: 24px;
    position: relative;
    transform: scale(0.9);
    transition: 0.3s;
}

.modal.active .modal-content {
    transform: scale(1);
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
}


.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 30px;
}


.modal-info h3 {
    margin-bottom: 25px;
}

.info-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.info-item img {
    width: 42px;
    height: 42px;
    padding: 10px;
    background: #eaf2ff;
    border-radius: 12px;
}

.info-item span {
    font-size: 14px;
    color: #777;
}

.info-item a,
.info-item p {
    color: #111;
    text-decoration: none;
    font-weight: 500;
}


.modal-form input,
.modal-form textarea {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #ccc;
    margin-bottom: 15px;
    font-size: 15px;
}

.modal-form textarea {
    height: 120px;
    resize: none;
}

.modal-form button {
    background: #E36397;
    color: white;
    border: none;
    padding: 16px;
    border-radius: 14px;
    font-size: 16px;
    cursor: pointer;
}

.main {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 70px);
    padding: 120px 80px;
    background: #ffffff;
}

.main-text h1 {
    font-size: 56px;
    line-height: 1.1;
    margin-bottom: 25px;
    color: #0f172a;
}

.main-text p {
    font-size: 18px;
    color: #475569;
    max-width: 520px;
    margin-bottom: 35px;
}

.main-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 16px 28px;
    background: #E36397;
    color: white;
    text-decoration: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 500;
    transition: 0.3s;
}

.main-btn:hover {
    background: #d44d84;
}


.services {
    padding: 100px 80px;
    background: #f5f7f6;
    text-align: center;
}

.services h2 {
    font-size: 42px;
    margin-bottom: 10px;
    color: #0f172a;
}

.services-sub {
    color: #64748b;
    margin-bottom: 50px;
    font-size: 18px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}


.service-card img {
    width: 46px;
    height: 46px;
    padding: 10px;
    background: #f1f5f9;
    border-radius: 14px;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #0f172a;
}

.service-card p {
    color: #64748b;
    line-height: 1.5;
}


.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}


.service-card.active {
    border: 2px solid #E36397;
}

.service-card img {
    width: 46px;
    height: 46px;
    max-width: 46px;
    max-height: 46px;
    object-fit: contain;
    display: block;
}
img {
    max-width: 100%;
    height: auto;
}


.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    border-color: #E36397;   
}


.service-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: left;

    border: 2px solid transparent;  
    transition: 0.3s;
}

.lastb {
    padding: 100px 80px;
    background: white;
    text-align: center;
}
.text4 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #0f172a;
}

.text3 {
    font-size: 36px;
    margin-bottom: 10px;
    color: #0f172a;
}

.text5 {
     font-size: 22px;
    margin-bottom: 10px;
    color: #0f172a;
}

.about {
    padding: 100px 80px;
    background: #f5f7f6;
    text-align: center;
}

.cards2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.about-card img {
    width: 54px;
    height: 54px;
    padding: 5px;
    background: #f1f5f9;
    border-radius: 14px;
    margin-bottom: 20px;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.about-card p {
    color: #64748b;
    line-height: 1.5;
}


.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
    border-color: #E36397;  
}


.about-card.active {
    border: 2px solid #E36397;
}


.about-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-card{
    background: #fff;
    padding: 35px;
    border-radius: 20px;
    text-align: center;
    transition: 0.3s;
}

.about-text{
    max-width: 600px;
}

.main {
    position: relative;
    display: grid;
    grid-template-columns: minmax(420px, 0.85fr) minmax(600px, 1.15fr);
    align-items: center;
    gap: 45px;

    min-height: calc(100vh - 70px);
    padding: 80px 70px 70px;
    background: #ffffff;
    overflow: hidden;
}

.main::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    right: -180px;
    top: 20px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(227, 99, 151, 0.08),
        rgba(227, 99, 151, 0) 70%
    );
    pointer-events: none;
}

.main-text {
    position: relative;
    z-index: 5;
    max-width: 620px;
}

.main-text h1 {
    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.08;
    margin-bottom: 25px;
    color: #0f172a;
}

.main-text p {
    max-width: 560px;
    margin-bottom: 34px;
    color: #475569;
    font-size: 18px;
    line-height: 1.5;
}

.hero-visual {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 590px;
}

.site-window {
    position: absolute;
    overflow: hidden;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 15px;

    box-shadow:
        0 22px 50px rgba(15, 23, 42, 0.10),
        0 5px 15px rgba(15, 23, 42, 0.05);

    backdrop-filter: blur(8px);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.site-window:hover {
    z-index: 20;
    box-shadow:
        0 28px 60px rgba(15, 23, 42, 0.16),
        0 8px 20px rgba(15, 23, 42, 0.08);
}

.window-header {
    height: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: rgba(248, 250, 252, 0.95);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.window-dots {
    display: flex;
    gap: 5px;
}

.window-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.window-dots span:nth-child(1) {
    background: #ff6b6b;
}

.window-dots span:nth-child(2) {
    background: #f7c948;
}

.window-dots span:nth-child(3) {
    background: #65c466;
}

.window-address {
    width: 45%;
    height: 5px;
    border-radius: 20px;
    background: #edf0f4;
}

.window-business {
    width: 450px;
    height: 305px;
    top: 18px;
    left: 65px;
    transform: rotate(-2deg);
    z-index: 4;
}

.window-business:hover {
    transform: rotate(-2deg) translateY(-7px);
}

.business-content {
    padding: 15px;
}

.mock-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.mock-nav strong {
    color: #E36397;
    font-size: 10px;
}

.mock-nav-lines {
    display: flex;
    gap: 10px;
}

.mock-nav-lines span {
    width: 30px;
    height: 4px;
    border-radius: 10px;
    background: #e8ebef;
}

.business-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 205px;
    overflow: hidden;
    border-radius: 10px;
    background: #faf8f8;
}

.business-text {
    padding: 30px 20px;
}

.business-text h3 {
    margin-bottom: 14px;
    color: #0f172a;
    font-size: 19px;
    line-height: 1.25;
}

.text-line {
    height: 5px;
    margin-bottom: 7px;
    border-radius: 10px;
    background: #dfe3e8;
}

.text-line.large {
    width: 95%;
}

.text-line.medium {
    width: 78%;
}

.text-line.small {
    width: 57%;
}

.mock-button {
    width: 68px;
    height: 19px;
    margin-top: 16px;
    border-radius: 5px;
    background: #E36397;
}

.interior-preview {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #f8f4f3 0%,
            #f8eeee 50%,
            #ffffff 100%
        );
}

.interior-preview::after {
    content: "";
    position: absolute;
    left: 26px;
    bottom: 23px;
    width: 95px;
    height: 5px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.08);
    filter: blur(4px);
}

.chair {
    position: absolute;
    left: 45px;
    bottom: 35px;
    width: 67px;
    height: 64px;
    border-radius: 22px 22px 15px 15px;
    background: #eba8ae;
    transform: rotate(-2deg);
}

.chair::before {
    content: "";
    position: absolute;
    width: 68px;
    height: 25px;
    left: 0;
    bottom: -10px;
    border-radius: 8px 8px 14px 14px;
    background: #dc929b;
}

.chair::after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: -37px;
    width: 47px;
    height: 37px;
    border-left: 3px solid #a07b72;
    border-right: 3px solid #a07b72;
}

.lamp {
    position: absolute;
    right: 35px;
    top: 14px;
    width: 2px;
    height: 57px;
    background: #b7b0ab;
}

.lamp::after {
    content: "";
    position: absolute;
    left: -16px;
    bottom: -9px;
    width: 34px;
    height: 16px;
    border-radius: 50% 50% 6px 6px;
    background: #c9c3bf;
}

.plant {
    position: absolute;
    right: 25px;
    bottom: 34px;
    width: 28px;
    height: 42px;
    border-radius: 50% 50% 8px 8px;
    background: #74946c;
}

.plant::after {
    content: "";
    position: absolute;
    left: -2px;
    bottom: -18px;
    width: 33px;
    height: 21px;
    border-radius: 5px;
    background: #d8c5b2;
}

.window-shop {
    width: 340px;
    height: 270px;
    top: 57px;
    right: -10px;
    transform: rotate(2deg);
    z-index: 3;
}

.window-shop:hover {
    transform: rotate(2deg) translateY(-7px);
}

.shop-content {
    padding: 14px;
}

.shop-content h4 {
    margin-bottom: 14px;
    color: #0f172a;
    font-size: 15px;
}

.cart-symbol {
    color: #E36397;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.product-card {
    padding: 7px;
    border: 1px solid #edf0f3;
    border-radius: 8px;
    background: #fff;
}

.product-image {
    position: relative;
    height: 75px;
    margin-bottom: 8px;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f2f2;
}

.product-chair::before {
    content: "";
    position: absolute;
    width: 34px;
    height: 37px;
    left: 20px;
    bottom: 17px;
    border-radius: 12px 12px 5px 5px;
    background: #eba8ae;
}

.product-light::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 41px;
    left: 35px;
    top: 9px;
    background: #9da3a8;
}

.product-light::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 39px;
    width: 26px;
    height: 13px;
    border-radius: 50% 50% 4px 4px;
    background: #c5c5c5;
}

.product-vase::before {
    content: "";
    position: absolute;
    left: 24px;
    bottom: 11px;
    width: 31px;
    height: 43px;
    border-radius: 50% 50% 30% 30%;
    background: #78837d;
}

.product-vase::after {
    content: "";
    position: absolute;
    left: 39px;
    top: 7px;
    width: 2px;
    height: 30px;
    background: #668c64;
    transform: rotate(18deg);
}

.product-title,
.product-price {
    height: 4px;
    margin-bottom: 5px;
    border-radius: 10px;
    background: #dde2e6;
}

.product-title {
    width: 85%;
}

.product-price {
    width: 62%;
}

.product-price.short {
    width: 45%;
}

.product-button {
    width: 45px;
    height: 13px;
    margin-top: 7px;
    border-radius: 4px;
    background: #E36397;
}




.window-dashboard {
    width: 395px;
    height: 255px;
    left: 0;
    bottom: 15px;
    transform: rotate(-2deg);
    z-index: 6;
}

.window-dashboard:hover {
    transform: rotate(-2deg) translateY(-7px);
}

.dashboard-content {
    display: grid;
    grid-template-columns: 62px 1fr;
    height: calc(100% - 28px);
}

.dashboard-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding-top: 18px;
    background: #f8fafc;
    border-right: 1px solid #edf0f3;
}

.dashboard-sidebar strong {
    color: #E36397;
}

.dashboard-sidebar span {
    width: 28px;
    height: 5px;
    border-radius: 10px;
    background: #dde2e6;
}

.dashboard-sidebar span.active {
    height: 18px;
    background: rgba(227, 99, 151, 0.18);
    border-left: 3px solid #E36397;
}

.dashboard-main {
    padding: 16px;
}

.dashboard-main h4 {
    margin-bottom: 12px;
    font-size: 14px;
    color: #0f172a;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.dashboard-stats > div {
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: 1px solid #edf0f3;
    border-radius: 7px;
}

.dashboard-stats small {
    color: #94a3b8;
    font-size: 7px;
}

.dashboard-stats strong {
    margin: 2px 0;
    color: #0f172a;
    font-size: 14px;
}

.dashboard-stats em {
    color: #3ca66b;
    font-size: 7px;
    font-style: normal;
}

.dashboard-chart {
    position: relative;
    height: 82px;
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid #edf0f3;
    border-radius: 7px;

    background:
        linear-gradient(#f2f4f6 1px, transparent 1px),
        linear-gradient(90deg, #f2f4f6 1px, transparent 1px);

    background-size: 100% 20px, 40px 100%;
}

.chart-line {
    position: absolute;
    left: 18px;
    bottom: 25px;
    width: 245px;
    height: 45px;

    border-top: 3px solid #E36397;
    border-radius: 50%;
    transform: rotate(-7deg);
}

.chart-point {
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px solid #E36397;
    border-radius: 50%;
    background: white;
}

.point-one {
    left: 35px;
    bottom: 30px;
}

.point-two {
    left: 100px;
    bottom: 43px;
}

.point-three {
    left: 175px;
    bottom: 51px;
}

.point-four {
    right: 25px;
    bottom: 61px;
}


.window-contact {
    width: 310px;
    height: 235px;
    right: 85px;
    bottom: 25px;
    transform: rotate(1.5deg);
    z-index: 5;
}

.window-contact:hover {
    transform: rotate(1.5deg) translateY(-7px);
}

.contact-preview {
    padding: 17px;
}

.contact-preview h4 {
    margin-bottom: 12px;
    color: #0f172a;
    font-size: 14px;
}

.preview-input,
.preview-textarea {
    width: 72%;
    margin-bottom: 8px;
    border: 1px solid #e3e7eb;
    border-radius: 5px;
    background: #fff;
}

.preview-input {
    height: 22px;
}

.preview-textarea {
    height: 52px;
}

.preview-submit {
    width: 110px;
    height: 21px;
    border-radius: 5px;
    background: #E36397;
}

.mobile-window {
    position: absolute;
    right: -5px;
    bottom: 0;
    z-index: 8;

    width: 135px;
    height: 285px;
    padding: 6px;

    border: 3px solid #20242a;
    border-radius: 23px;
    background: #ffffff;

    box-shadow:
        0 20px 35px rgba(15, 23, 42, 0.15),
        0 5px 10px rgba(15, 23, 42, 0.08);

    transform: rotate(2deg);
    transition: transform 0.35s ease;
}

.mobile-window:hover {
    transform: rotate(2deg) translateY(-8px);
}

.mobile-speaker {
    width: 35px;
    height: 4px;
    margin: 2px auto 6px;
    border-radius: 10px;
    background: #24282d;
}

.mobile-content {
    height: calc(100% - 14px);
    padding: 10px;
    overflow: hidden;
    border-radius: 15px;
    background: #fff;
}

.mobile-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mobile-nav strong {
    color: #E36397;
    font-size: 7px;
}

.mobile-nav span {
    font-size: 9px;
}

.mobile-content h4 {
    margin-bottom: 10px;
    color: #0f172a;
    font-size: 11px;
    line-height: 1.3;
}

.mobile-line {
    width: 95%;
    height: 4px;
    margin-bottom: 5px;
    border-radius: 10px;
    background: #e2e6ea;
}

.mobile-line.short {
    width: 62%;
}

.mobile-button {
    width: 55px;
    height: 16px;
    margin-top: 12px;
    border-radius: 4px;
    background: #E36397;
}

.mobile-device-preview {
    position: relative;
    height: 90px;
    margin-top: 20px;
    border-radius: 7px;
    background: #f7f4f4;
}

.tiny-monitor {
    position: absolute;
    left: 16px;
    top: 20px;
    width: 67px;
    height: 44px;
    border: 3px solid #4d5358;
    border-radius: 4px;
    background: white;
}

.tiny-monitor::after {
    content: "";
    position: absolute;
    left: 25px;
    bottom: -11px;
    width: 15px;
    height: 10px;
    border-bottom: 3px solid #4d5358;
}

.tiny-phone {
    position: absolute;
    right: 12px;
    bottom: 16px;
    width: 24px;
    height: 48px;
    border: 3px solid #4d5358;
    border-radius: 5px;
    background: white;
}


@media (max-width: 1250px) {
    .main {
        grid-template-columns: minmax(380px, 0.9fr) minmax(520px, 1.1fr);
        padding-left: 50px;
        padding-right: 50px;
    }

    .hero-visual {
        transform: scale(0.88);
        transform-origin: center right;
    }
}

@media (max-width: 1000px) {
    .main {
        grid-template-columns: 1fr;
        padding-top: 85px;
        text-align: center;
    }

    .main-text {
        max-width: 720px;
        margin: 0 auto;
    }

    .main-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-visual {
        width: 720px;
        max-width: 100%;
        margin: 0 auto;
        transform: scale(0.9);
        transform-origin: top center;
    }
}

@media (max-width: 720px) {
    .main {
        padding: 70px 20px 30px;
    }

    .main-text h1 {
        font-size: 40px;
    }

    .hero-visual {
        height: 410px;
        transform: scale(0.62);
        transform-origin: top center;
        width: 700px;
        margin-left: 50%;
        translate: -50% 0;
    }
}

@media (max-width: 480px) {
    .main-text h1 {
        font-size: 34px;
    }

    .main-text p {
        font-size: 16px;
    }

    .hero-visual {
        transform: scale(0.5);
        height: 340px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .window-business {
        animation: windowFloat 7s ease-in-out infinite;
    }

    .window-shop {
        animation: windowFloat 8s ease-in-out 1s infinite;
    }

    .window-dashboard {
        animation: windowFloat 9s ease-in-out 0.5s infinite;
    }

    .window-contact {
        animation: windowFloat 7.5s ease-in-out 1.5s infinite;
    }

    .mobile-window {
        animation: mobileFloat 8.5s ease-in-out infinite;
    }
}

@keyframes windowFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -7px;
    }
}

@keyframes mobileFloat {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }
}

.modal {
    z-index: 10000;
}


.modal-content {
    position: relative;
    z-index: 10001;
}

.nav-contact {
    margin-left: 30px;
    padding: 0;
    border: none;
    background: transparent;

    color: #333;
    font-family: inherit;
    font-size: inherit;

    cursor: pointer;
    transition: color 0.3s;
}

.nav-contact:hover {
    color: #E36397;
}

:root {
    color-scheme: light;

    --theme-page: #f5f5f5;
    --theme-main: #ffffff;
    --theme-soft: #f5f7f6;
    --theme-header: #EFF2EF;
    --theme-card: #ffffff;
    --theme-modal: #ffffff;
    --theme-input: #ffffff;
    --theme-icon-bg: #f1f5f9;
    --theme-mock-bg: #f8fafc;

    --theme-text: #0f172a;
    --theme-body-text: #475569;
    --theme-muted: #64748b;
    --theme-nav: #333333;

    --theme-border: #d7dce2;
    --theme-mock-line: #dfe3e8;

    --theme-shadow: rgba(15, 23, 42, 0.10);
    --theme-card-shadow: rgba(0, 0, 0, 0.08);
    --theme-overlay: rgba(0, 0, 0, 0.4);

    --theme-accent: #E36397;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --theme-page: #0d1117;
    --theme-main: #11161d;
    --theme-soft: #161c24;
    --theme-header: #12171d;
    --theme-card: #1b222c;
    --theme-modal: #171d25;
    --theme-input: #11161d;
    --theme-icon-bg: #252e3a;
    --theme-mock-bg: #202833;

    --theme-text: #f1f5f9;
    --theme-body-text: #c0cad6;
    --theme-muted: #9eabba;
    --theme-nav: #dce4ed;

    --theme-border: #374250;
    --theme-mock-line: #3b4653;

    --theme-shadow: rgba(0, 0, 0, 0.40);
    --theme-card-shadow: rgba(0, 0, 0, 0.35);
    --theme-overlay: rgba(0, 0, 0, 0.7);
}

.header nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.header nav a,
.nav-contact {
    margin-left: 0;
}

.theme-toggle {
    width: 42px;
    height: 42px;
    flex-shrink: 0;

    display: inline-grid;
    place-items: center;

    padding: 0;
    border: 1px solid var(--theme-border);
    border-radius: 13px;

    background: var(--theme-card);
    color: var(--theme-text);

    cursor: pointer;

    box-shadow: 0 4px 12px var(--theme-card-shadow);

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.theme-toggle {
    position: relative;
    overflow: hidden;
}

.theme-toggle .theme-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    will-change: opacity, transform;
    transition: opacity .26s ease, transform .42s cubic-bezier(.2,.85,.25,1);
}

.theme-toggle .theme-icon svg {
    width: 20px;
    height: 20px;
}
.theme-toggle .theme-icon-moon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    stroke: none;
    overflow: visible;
}
.theme-toggle .theme-icon-sun svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.theme-toggle .theme-icon-moon {
    opacity: 1;
    transform: translateY(0) rotate(-4deg) scale(1);
}
.theme-toggle .theme-icon-sun {
    opacity: 0;
    transform: translateY(5px) rotate(-65deg) scale(.52);
}
.theme-toggle .moon-star {
    transform-box: fill-box;
    transform-origin: center;
}
.theme-toggle .moon-star-a { animation: moonStarTwinkle 4.8s ease-in-out infinite; }
.theme-toggle .moon-star-b { animation: moonStarTwinkle 5.6s ease-in-out .9s infinite; }
.theme-toggle .moon-star-c { animation: moonStarTwinkle 6.2s ease-in-out 1.7s infinite; }

html[data-theme="dark"] .theme-toggle .theme-icon-moon {
    opacity: 0;
    transform: translateY(-5px) rotate(22deg) scale(.58);
}
html[data-theme="dark"] .theme-toggle .theme-icon-sun {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
}
.theme-toggle.is-switching { animation: themeToggleSoftPulse .42s cubic-bezier(.2,.85,.25,1); }
.theme-toggle.is-switching .theme-icon-sun { animation: sunArrival .42s cubic-bezier(.2,.85,.25,1); }
html:not([data-theme="dark"]) .theme-toggle.is-switching .theme-icon-moon { animation: moonArrival .46s cubic-bezier(.2,.85,.25,1); }
@keyframes moonStarTwinkle { 0%,72%,100%{opacity:.68;transform:scale(.92)} 82%{opacity:1;transform:scale(1.12)} }
@keyframes themeToggleSoftPulse { 0%{box-shadow:0 4px 12px var(--theme-card-shadow)} 48%{box-shadow:0 5px 18px color-mix(in srgb,var(--theme-accent) 28%,transparent)} 100%{box-shadow:0 4px 12px var(--theme-card-shadow)} }
@keyframes sunArrival { 0%{filter:blur(1.5px)} 100%{filter:blur(0)} }
@keyframes moonArrival { 0%{filter:blur(1.5px)} 100%{filter:blur(0)} }

@media (prefers-reduced-motion: reduce) {
    .theme-toggle .theme-icon,
    .theme-toggle .moon-star,
    .theme-toggle.is-switching,
    .theme-toggle.is-switching .theme-icon {
        transition: none !important;
        animation: none !important;
    }
}

.theme-toggle:hover {
    color: var(--theme-accent);
    border-color: var(--theme-accent);
    transform: translateY(-2px);
}

.theme-toggle:active {
    transform: translateY(0) scale(0.94);
}

body {
    background: var(--theme-page);
    color: var(--theme-text);
}

.header {
    background: var(--theme-header);
    box-shadow: 0 2px 10px var(--theme-card-shadow);
}

.header nav a,
.nav-contact {
    color: var(--theme-nav);
}

.header nav a:hover,
.nav-contact:hover {
    color: var(--theme-accent);
}

.main,
.lastb {
    background: var(--theme-main);
}

.services,
.about {
    background: var(--theme-soft);
}

.service-card,
.about-card {
    background: var(--theme-card);
    border-color: transparent;
}

.service-card:hover,
.about-card:hover {
    box-shadow: 0 12px 30px var(--theme-card-shadow);
}

.service-card img,
.about-card img,
.info-item img {
    background: var(--theme-icon-bg);
}


.main-text h1,
.services h2,
.service-card h3,
.text3,
.text4,
.text5,
.about-text h2,
.about-card h3,
.modal-content h2,
.modal-info h3 {
    color: var(--theme-text);
}

.main-text p,
.services-sub,
.service-card p,
.about-card p,
.about-text p {
    color: var(--theme-muted);
}

.modal {
    background: var(--theme-overlay);
    z-index: 10000;
}

.modal-content {
    background: var(--theme-modal);
    color: var(--theme-text);
    z-index: 10001;
}

.close {
    color: var(--theme-text);
}

.info-item span {
    color: var(--theme-muted);
}

.info-item a,
.info-item p {
    color: var(--theme-text);
}

.modal-form input,
.modal-form textarea {
    background: var(--theme-input);
    color: var(--theme-text);
    border-color: var(--theme-border);
}

.modal-form input::placeholder,
.modal-form textarea::placeholder {
    color: var(--theme-muted);
}

.modal-form input:focus,
.modal-form textarea:focus {
    border-color: var(--theme-accent);
    outline: 2px solid rgba(227, 99, 151, 0.15);
}

.site-window {
    background: var(--theme-card);
    border-color: var(--theme-border);

    box-shadow:
        0 22px 50px var(--theme-shadow),
        0 5px 15px var(--theme-card-shadow);
}

.window-header,
.dashboard-sidebar {
    background: var(--theme-mock-bg);
    border-color: var(--theme-border);
}

.window-address,
.mock-nav-lines span,
.text-line,
.product-title,
.product-price,
.dashboard-sidebar span,
.mobile-line {
    background: var(--theme-mock-line);
}

.business-hero,
.product-image,
.mobile-device-preview {
    background: var(--theme-mock-bg);
}

.product-card,
.mobile-window,
.mobile-content {
    background: var(--theme-card);
    border-color: var(--theme-border);
}

.business-text h3,
.shop-content h4,
.dashboard-main h4,
.contact-preview h4,
.mobile-content h4 {
    color: var(--theme-text);
}

.dashboard-stats > div,
.dashboard-chart,
.preview-input,
.preview-textarea {
    background: var(--theme-input);
    border-color: var(--theme-border);
}

.dashboard-stats strong {
    color: var(--theme-text);
}

.dashboard-stats small {
    color: var(--theme-muted);
}

.tiny-monitor,
.tiny-phone {
    background: var(--theme-card);
    border-color: var(--theme-muted);
}


html[data-theme="dark"] .interior-preview {
    background:
        linear-gradient(
            145deg,
            #292128 0%,
            #35242c 50%,
            #202731 100%
        );
}

html[data-theme="dark"] .dashboard-chart {
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        );

    background-size: 100% 20px, 40px 100%;
}


body,
.header,
.main,
.services,
.lastb,
.about,
.service-card,
.about-card,
.modal,
.modal-content,
.modal-form input,
.modal-form textarea,
.site-window,
.window-header,
.business-hero,
.product-card,
.dashboard-sidebar,
.dashboard-chart,
.mobile-window,
.mobile-content,
.theme-toggle {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.footer {
    padding: 60px 80px 0;
    background: #0f1929;
    color: #ffffff;
}

.footer-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 80px;
}

.footer-column h2 {
    margin-bottom: 24px;

    color: #ffffff;
    font-size: 23px;
    font-weight: 600;
}

.footer-brand .subtext1 {
    max-width: 400px;

    color: #9fb1ca;
    font-size: 18px;
    line-height: 1.65;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.footer-nav a {
    color: #9fb1ca;
    font-size: 18px;
    text-decoration: none;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-nav a:hover {
    color: #E36397;
    transform: translateX(5px);
}

.footer-contacts .subtext2 {
    color: #9fb1ca;
    font-size: 18px;
    line-height: 1.75;
}

.footer-bottom {
    width: 100%;
    max-width: 1320px;
    margin: 38px auto 0;

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

.rights {
    margin: 0;
    padding: 30px 0;

    color: #9fb1ca;
    font-size: 17px;
    text-align: center;
}

@media (max-width: 900px) {
    .footer {
        padding: 55px 40px 0;
    }

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }

    .footer-contacts {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .footer {
        padding: 45px 24px 0;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .footer-contacts {
        grid-column: auto;
    }

    .footer-column h2 {
        margin-bottom: 16px;
    }

    .footer-brand .subtext1,
    .footer-nav a,
    .footer-contacts .subtext2 {
        font-size: 16px;
    }

    .rights {
        padding: 24px 0;
        font-size: 14px;
    }
}

html,
body {
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

#footer {
    display: block;
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 65px 0 0 !important;

    border-radius: 0 !important;
    background: #101a2a;
    color: #ffffff;

    clear: both;
}


#footer .footer-container {
    width: calc(100% - 120px);
    max-width: 1320px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 90px;
}

#footer .footer-column {
    min-width: 0;
    text-align: left;
}

#footer .footer-column h2 {
    text-align: left;
}

#footer .footer-column p {
    text-align: left;
}

#footer .footer-bottom {
    width: calc(100% - 120px);
    max-width: 1320px;
    margin: 40px auto 0;

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

#footer .footer-bottom p {
    margin: 0;
    padding: 30px 0;
    text-align: center;
}

@media (max-width: 700px) {
    #footer {
        padding-top: 45px !important;
    }

    #footer .footer-container {
        width: calc(100% - 48px);
        grid-template-columns: 1fr;
        gap: 38px;
    }

    #footer .footer-bottom {
        width: calc(100% - 48px);
    }
}

/* =========================================
   ПОРТФОЛИО
========================================= */

.portfolio-section {
    position: relative;

    width: 100%;

    padding: 110px 80px 130px;

    background: var(--theme-main, #ffffff);

    overflow: visible;
}


/* =========================================
   ЗАГОЛОВОК
========================================= */

.portfolio-heading {
    width: 100%;
    max-width: 750px;

    margin: 0 auto 70px;

    text-align: center;
}

.portfolio-label {
    display: block;

    margin-bottom: 14px;

    color: #E36397;

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

    letter-spacing: 5px;
}

.portfolio-heading h2 {
    margin: 0 0 16px;

    color: var(--theme-text, #0f172a);

    font-size: 44px;
    font-weight: 600;
}

.portfolio-heading p {
    margin: 0;

    color: var(--theme-muted, #64748b);

    font-size: 18px;
    line-height: 1.6;
}


/* =========================================
   СЕТКА
========================================= */

.portfolio-grid {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    display: grid;

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

    gap: 30px;
}


/* =========================================
   ОБЁРТКА ОДНОГО ПРОЕКТА
========================================= */

.portfolio-item {
    position: relative;

    min-width: 0;
}


/* =========================================
   КАРТОЧКА
========================================= */

.portfolio-card {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    background: var(--theme-card, #ffffff);

    border: 1px solid var(--theme-border, #e3e7eb);
    border-radius: 22px;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.08);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.portfolio-card:hover {
    transform: translateY(-8px);

    border-color: #E36397;

    box-shadow:
        0 22px 45px rgba(15, 23, 42, 0.14),
        0 8px 18px rgba(227, 99, 151, 0.10);
}


/* =========================================
   МАЛЕНЬКОЕ ПРЕВЬЮ В КАРТОЧКЕ
========================================= */

.portfolio-card-image {
    position: relative;

    width: 100%;
    height: 235px;

    flex-shrink: 0;

    overflow: hidden;

    background: #211a17;
}


/*
    Сам сайт рендерится как страница 1440x900,
    затем уменьшается внутри карточки.
*/

.portfolio-card-image iframe {
    position: absolute;

    top: 0;
    left: 0;

    width: 1440px;
    height: 900px;

    border: none;

    pointer-events: none;

    transform: scale(0.31);
    transform-origin: top left;
}


/* =========================================
   ЗАТЕМНЕНИЕ МАЛЕНЬКОГО ПРЕВЬЮ
========================================= */

.portfolio-card-overlay {
    position: absolute;

    inset: 0;

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

    background: rgba(15, 23, 42, 0.62);

    opacity: 0;

    transition: opacity 0.3s ease;
}

.portfolio-card-overlay span {
    padding: 13px 20px;

    color: #ffffff;

    background: #E36397;

    border-radius: 10px;

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

    transform: translateY(12px);

    transition: transform 0.3s ease;
}

.portfolio-card:hover .portfolio-card-overlay {
    opacity: 1;
}

.portfolio-card:hover .portfolio-card-overlay span {
    transform: translateY(0);
}


/* =========================================
   ТЕКСТ КАРТОЧКИ
========================================= */

.portfolio-card-content {
    padding: 28px;

    flex: 1;

    display: flex;
    flex-direction: column;
}

.portfolio-type {
    display: inline-block;

    margin-bottom: 13px;

    color: #E36397;

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

    line-height: 1.5;
}

.portfolio-card-content h3 {
    margin: 0 0 13px;

    color: var(--theme-text, #0f172a);

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

    line-height: 1.3;
}

.portfolio-card-content p {
    margin: 0 0 22px;

    color: var(--theme-muted, #64748b);

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================
   ТЕХНОЛОГИИ
========================================= */

.portfolio-technologies {
    margin-top: auto;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.portfolio-technologies span {
    padding: 7px 11px;

    color: var(--theme-muted, #64748b);

    font-size: 12px;

    background: var(--theme-icon-bg, #f1f5f9);

    border-radius: 8px;
}


/* =========================================
   БОЛЬШОЕ ПРЕВЬЮ ПРИ НАВЕДЕНИИ
========================================= */

.portfolio-preview {
    position: fixed;

    z-index: 5000;

    left: 50%;
    top: 43%;

    width: 760px;
    height: 480px;

    max-width: calc(100vw - 60px);
    max-height: calc(100vh - 110px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

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

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}


/* Показываем большое окно */

.portfolio-item:hover .portfolio-preview,
.portfolio-item:focus-within .portfolio-preview {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* =========================================
   ОКНО БРАУЗЕРА
========================================= */

.portfolio-browser {
    width: 100%;
    height: 100%;

    overflow: hidden;

    background: var(--theme-card, #ffffff);

    border:
        1px solid var(--theme-border, #dfe4ea);

    border-radius: 17px;

    box-shadow:
        0 35px 80px rgba(15, 23, 42, 0.25),
        0 12px 30px rgba(15, 23, 42, 0.15);
}


/* =========================================
   ВЕРХНЯЯ ПАНЕЛЬ БРАУЗЕРА
========================================= */

.portfolio-browser-bar {
    height: 42px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 0 15px;

    background:
        var(--theme-mock-bg, #f8fafc);

    border-bottom:
        1px solid var(--theme-border, #e3e7eb);
}


/* =========================================
   КНОПКИ БРАУЗЕРА
========================================= */

.portfolio-browser-dots {
    display: flex;

    gap: 6px;

    flex-shrink: 0;
}

.portfolio-browser-dots span {
    display: block;

    width: 9px;
    height: 9px;

    border-radius: 50%;
}

.portfolio-browser-dots span:nth-child(1) {
    background: #ff6b6b;
}

.portfolio-browser-dots span:nth-child(2) {
    background: #f7c948;
}

.portfolio-browser-dots span:nth-child(3) {
    background: #65c466;
}


/* =========================================
   АДРЕСНАЯ СТРОКА
========================================= */

.portfolio-browser-address {
    flex: 1;

    min-width: 0;

    padding: 7px 14px;

    overflow: hidden;

    color: var(--theme-muted, #64748b);

    font-size: 11px;

    white-space: nowrap;
    text-overflow: ellipsis;

    background:
        var(--theme-input, #ffffff);

    border:
        1px solid var(--theme-border, #e3e7eb);

    border-radius: 8px;
}


/* =========================================
   ЭКРАН БОЛЬШОГО ПРЕВЬЮ
========================================= */

.portfolio-preview-screen {
    position: relative;

    width: 100%;
    height: calc(100% - 42px);

    overflow: hidden;

    background: #ffffff;
}


/* =========================================
   САЙТ В БОЛЬШОМ ПРЕВЬЮ
========================================= */

.portfolio-preview-screen iframe {
    position: absolute;

    top: 0;
    left: 0;

    width: 1440px;
    height: 900px;

    border: none;

    pointer-events: none;

    transform: scale(0.5);
    transform-origin: top left;
}


/* =========================================
   ПЛАНШЕТ
========================================= */

@media (max-width: 1100px) {

    .portfolio-section {
        padding-left: 45px;
        padding-right: 45px;
    }

    .portfolio-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    /*
        Карточки становятся шире,
        поэтому немного увеличиваем
        маленький preview.
    */

    .portfolio-card-image iframe {
        transform: scale(0.36);
    }

}


/* =========================================
   ТЕЛЕФОН
========================================= */

@media (max-width: 750px) {

    .portfolio-section {
        padding:
            80px 24px
            90px;
    }

    .portfolio-heading {
        margin-bottom: 45px;
    }

    .portfolio-heading h2 {
        font-size: 36px;
    }

    .portfolio-heading p {
        font-size: 16px;
    }

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

    .portfolio-card-content {
        padding: 26px;
    }

    /*
        На телефоне большого hover-preview
        не будет.
    */

    .portfolio-preview {
        display: none;
    }

    .portfolio-card-image {
        height: 240px;
    }

    .portfolio-card-image iframe {
        transform: scale(0.31);
    }

}


/* =========================================
   МАЛЕНЬКИЙ ТЕЛЕФОН
========================================= */

@media (max-width: 450px) {

    .portfolio-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .portfolio-heading h2 {
        font-size: 31px;
    }

    .portfolio-card-content h3 {
        font-size: 21px;
    }

    .portfolio-card-image {
        height: 210px;
    }

}
/* =========================================================
   KAMERTON 2026 REFRESH
   Header, language selector, portfolio highlight and blog.
   ========================================================= */
:root {
    --km-accent: #E36397;
    --km-accent-2: #9d5ee8;
    --km-radius: 22px;
    --km-shell: 1320px;
}

body { overflow-x: hidden; }
.header {
    height: 76px;
    padding: 0;
    background: color-mix(in srgb, var(--theme-header) 88%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 62%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.header-shell {
    width: min(calc(100% - 48px), var(--km-shell));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
}
.logo {
    flex: 0 0 auto;
    color: var(--theme-text);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .1em;
    text-decoration: none;
}
.logo span, .footer-brand h2 span { color: var(--km-accent); }
.desktop-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px !important;
}
.header .desktop-nav a {
    margin: 0;
    padding: 9px 12px;
    border-radius: 11px;
    color: var(--theme-muted);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.header .desktop-nav a:hover {
    color: var(--theme-text);
    background: color-mix(in srgb, var(--km-accent) 9%, transparent);
}
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-contact {
    margin: 0;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, var(--km-accent) 48%, transparent);
    border-radius: 12px;
    background: var(--km-accent);
    color: white !important;
    font-size: 13px;
    font-weight: 600;
}
.nav-contact:hover { background: #d65289; transform: translateY(-1px); }
.theme-toggle { width: 42px; height: 42px; box-shadow: none; border-radius: 12px; }
.theme-toggle::before { font-size: 20px; }
html[data-theme="dark"] .theme-toggle::before { font-size: 18px; }

.language-menu { position: relative; }
.language-button {
    height: 42px;
    min-width: 82px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-card);
    color: var(--theme-text);
    cursor: pointer;
    transition: .2s ease;
}
.language-button:hover, .language-menu.is-open .language-button { border-color: color-mix(in srgb, var(--km-accent) 60%, var(--theme-border)); }
.language-flag { font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 19px; line-height: 1; }
.language-code { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.language-chevron { margin-left: auto; color: var(--theme-muted); font-size: 15px; transition: transform .2s ease; }
.language-menu.is-open .language-chevron { transform: rotate(180deg); }
.language-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 12000;
    width: 208px;
    padding: 7px;
    display: grid;
    gap: 3px;
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--theme-card) 96%, transparent);
    box-shadow: 0 18px 48px var(--theme-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: .18s ease;
    backdrop-filter: blur(18px);
}
.language-menu.is-open .language-dropdown { opacity: 1; visibility: visible; transform: none; }
.language-option {
    width: 100%;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 25px 1fr auto;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--theme-text);
    text-align: left;
    cursor: pointer;
}
.language-option:hover, .language-option.is-active { background: color-mix(in srgb, var(--km-accent) 10%, transparent); }
.language-option small { color: var(--theme-muted); font-size: 10px; font-weight: 700; }
.mobile-menu-toggle, .mobile-site-nav { display: none; }

.main { padding-top: 96px; }
.hero-kicker, .section-kicker {
    display: inline-flex;
    margin-bottom: 16px;
    color: var(--km-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
}
.main-text h1 { letter-spacing: -.035em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; }
.hero-secondary {
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    background: var(--theme-card);
    color: var(--theme-text);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.hero-secondary:hover { border-color: var(--km-accent); color: var(--km-accent); }
.accent { color: var(--km-accent); }
.services { position: relative; }
.services-grid { max-width: var(--km-shell); margin: 0 auto; }
.service-card { border: 1px solid transparent; box-shadow: 0 10px 30px color-mix(in srgb, var(--theme-card-shadow) 70%, transparent); }

.portfolio-item-featured { grid-column: span 2; }
.portfolio-item-featured .portfolio-card { border-color: color-mix(in srgb, #b8ff3c 24%, var(--theme-border)); }
.portfolio-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.portfolio-meta-row .portfolio-type { margin: 0; }
.portfolio-type-live { color: #68a72e; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--theme-muted); font-size: 10px; font-weight: 700; }
.live-dot i { width: 7px; height: 7px; border-radius: 50%; background: #7dcf46; box-shadow: 0 0 0 4px rgba(125,207,70,.12); }
.ryvia-preview {
    height: 310px;
    padding: 28px;
    background: linear-gradient(145deg, #07110a, #102417 64%, #0a1a10);
    color: #eef9e9;
}
.ryvia-preview::after { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(184,255,60,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(184,255,60,.035) 1px,transparent 1px); background-size:32px 32px; pointer-events:none; }
.ryvia-orb { position:absolute; border-radius:50%; filter:blur(3px); opacity:.5; }
.ryvia-orb-one { width:210px;height:210px;right:-60px;top:-70px;background:radial-gradient(circle,#8ed63c,transparent 68%); }
.ryvia-orb-two { width:170px;height:170px;left:-70px;bottom:-70px;background:radial-gradient(circle,#50c87a,transparent 70%); }
.ryvia-preview-header { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; }
.ryvia-preview-header strong { font: 800 20px/1 system-ui,sans-serif; letter-spacing:.08em; }
.ryvia-preview-header strong span { color:#b8ff3c; }
.ryvia-preview-header small { color:rgba(238,249,233,.52); font:600 9px/1.2 system-ui,sans-serif; letter-spacing:.06em; }
.ryvia-preview-body { position:relative; z-index:1; min-height:210px; display:flex; align-items:center; justify-content:center; gap:38px; }
.ryvia-preview-body > div:last-child { display:grid; gap:8px; }
.ryvia-preview-body b { font:700 21px/1.2 system-ui,sans-serif; }
.ryvia-preview-body span { color:rgba(238,249,233,.55); font:500 11px/1.3 system-ui,sans-serif; }
.ryvia-cube { position:relative; width:90px; height:90px; transform:rotate(30deg) skew(-4deg); }
.ryvia-cube i { position:absolute; inset:0; border:2px solid rgba(184,255,60,.72); border-radius:16px; box-shadow:inset 0 0 30px rgba(184,255,60,.05),0 0 28px rgba(184,255,60,.06); }
.ryvia-cube i:nth-child(2){ transform:translate(11px,-11px); opacity:.62; }
.ryvia-cube i:nth-child(3){ transform:translate(22px,-22px); opacity:.32; }

/* Blog / Vlog */

.about { text-align:left; }
.about-container { max-width:var(--km-shell); margin:0 auto; }
.about-text h2 { margin-bottom:18px; font-size:clamp(34px,4vw,46px); line-height:1.12; letter-spacing:-.025em; }
.about-text p { line-height:1.8; }
#footer .footer-column a { color:#b4c1d2; text-decoration:none; }
#footer .footer-column a:hover { color:#E36397; }
#footer .footer-brand h2 { letter-spacing:.08em; }

.mobile-site-nav { position:absolute; left:0; right:0; top:76px; padding:10px 24px 18px; background:color-mix(in srgb,var(--theme-header) 97%,transparent); border-bottom:1px solid var(--theme-border); box-shadow:0 18px 40px var(--theme-shadow); }
.mobile-site-nav a,.mobile-contact { width:100%; min-height:46px; padding:0 8px; display:flex; align-items:center; border:0; border-bottom:1px solid color-mix(in srgb,var(--theme-border) 55%,transparent); background:transparent; color:var(--theme-text); text-decoration:none; font:600 14px/1.2 inherit; text-align:left; }
.mobile-contact { color:var(--km-accent); }

@media (max-width: 1120px) {
    .desktop-nav { display:none; }
    .mobile-menu-toggle { width:42px;height:42px;padding:10px;display:grid;align-content:center;gap:4px;border:1px solid var(--theme-border);border-radius:12px;background:var(--theme-card);cursor:pointer; }
    .mobile-menu-toggle span { width:100%;height:2px;border-radius:9px;background:var(--theme-text);transition:.2s ease; }
    .mobile-menu-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}.mobile-menu-toggle.is-open span:nth-child(2){opacity:0}.mobile-menu-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
    .mobile-site-nav.is-open { display:grid; }
    .portfolio-item-featured { grid-column:1 / -1; }
}
@media (max-width: 900px) {
    .blog-heading { grid-template-columns:1fr; gap:18px; }
}
@media (max-width: 720px) {
    body { padding-top:76px; }
    .header-shell { width:calc(100% - 24px); gap:8px; }
    .logo { font-size:17px; letter-spacing:.07em; margin-right:auto; }
    .nav-contact { display:none; }
    .language-button { min-width:70px; padding:0 8px; }
    .language-dropdown { position:fixed; top:70px; right:12px; width:min(240px,calc(100vw - 24px)); }
    .theme-toggle,.mobile-menu-toggle { width:40px;height:40px; }
    .main { padding-top:68px; }
    .hero-actions { justify-content:center; }
    .hero-secondary,.main-btn { min-height:50px; padding:0 18px; }
    .services { padding-left:20px; padding-right:20px; }
    .portfolio-item-featured { grid-column:auto; }
    .ryvia-preview { height:230px; padding:20px; }
    .ryvia-preview-body { min-height:170px; gap:20px; }
    .ryvia-cube { width:62px;height:62px; }
    .ryvia-preview-body b { font-size:17px; }
    .about { padding-left:20px; padding-right:20px; }
    .about-container { grid-template-columns:1fr; gap:40px; }
    .cards2 { gap:14px; }
    .about-card { padding:24px 14px; }
    .modal-content { width:calc(100% - 24px); max-height:calc(100dvh - 24px); overflow:auto; padding:28px 20px; }
    .modal-grid { grid-template-columns:1fr; gap:22px; }
}
@media (max-width: 430px) {
    .language-code { display:none; }
    .language-button { min-width:44px; width:44px; justify-content:center; }
    .language-chevron { display:none; }
    .cards2 { grid-template-columns:1fr 1fr; }
}

/* Portfolio: four projects work best as a clean 2×2 grid. */
@media (min-width: 1101px) {
    .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
    .portfolio-item-featured { grid-column: auto; }
    .portfolio-card-image iframe { transform: scale(.45); }
    .ryvia-preview { height: 235px; }
    .ryvia-preview-body { min-height: 165px; }
}
@media (min-width: 751px) and (max-width: 1100px) {
    .portfolio-item-featured { grid-column: auto; }
    .portfolio-card-image iframe { transform: scale(.36); }
    .ryvia-preview { height: 235px; }
    .ryvia-preview-body { min-height: 165px; }
}

/* =========================================================
   KAMERTON v2.1 — deterministic country flags
   Windows does not render Unicode flag emoji consistently,
   so the selector uses CSS flags instead of emoji glyphs.
   ========================================================= */
.language-flag {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 17px;
    flex: 0 0 25px;
    overflow: hidden;
    border-radius: 3px;
    border: 0;
    box-shadow: none;
    background: #ddd;
    background-clip: padding-box;
    font-size: 0;
}

.flag-ua { background: linear-gradient(to bottom, #0057b8 0 50%, #ffd700 50% 100%); }
.flag-ru { background: linear-gradient(to bottom, #fff 0 33.333%, #4da3ff 33.333% 66.666%, #d52b1e 66.666% 100%); }
.flag-et { background: linear-gradient(to bottom, #0072ce 0 33.333%, #000 33.333% 66.666%, #fff 66.666% 100%); }
.flag-gb {
    background: #012169 url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAzNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CjxyZWN0IHdpZHRoPSI2MCIgaGVpZ2h0PSIzNiIgZmlsbD0iIzAxMjE2OSIvPgo8cGF0aCBkPSJNLTQsLTIgTDY0LDM4IE02NCwtMiBMLTQsMzgiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSI3LjYiLz4KPGcgc3Ryb2tlPSIjQzgxMDJFIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJidXR0Ij4KPHBhdGggZD0iTS0zLDAuOCBMMzEuNSwyMS41Ii8+CjxwYXRoIGQ9Ik0yOC41LDE0LjUgTDYzLDM1LjIiLz4KPHBhdGggZD0iTTYzLDAuOCBMMjguNSwyMS41Ii8+CjxwYXRoIGQ9Ik0zMS41LDE0LjUgTC0zLDM1LjIiLz4KPC9nPgo8cGF0aCBkPSJNMzAsMCBWMzYgTTAsMTggSDYwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMTIiLz4KPHBhdGggZD0iTTMwLDAgVjM2IE0wLDE4IEg2MCIgc3Ryb2tlPSIjQzgxMDJFIiBzdHJva2Utd2lkdGg9IjcuMiIvPgo8L3N2Zz4=") center / 100% 100% no-repeat;
}

/* =========================================================
   KAMERTON v2.1 — portfolio carousel
   Desktop: 3 cards, tablet: 2, phone: 1.
   The arrow moves the ribbon by one project at a time.
   ========================================================= */
.portfolio-carousel {
    position: relative;
    width: min(100%, 1380px);
    margin: 0 auto;
    padding: 0 30px 42px;
}

.portfolio-viewport {
    width: 100%;
    overflow: hidden;
    padding: 10px 4px 20px;
}

.portfolio-carousel .portfolio-track {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    grid-template-columns: none;
    gap: 30px;
    transform: translate3d(0, 0, 0);
    transition: transform .42s cubic-bezier(.22, .74, .22, 1);
    will-change: transform;
}

.portfolio-carousel .portfolio-item {
    flex: 0 0 calc((100% - 60px) / 3);
    width: calc((100% - 60px) / 3);
    min-width: 0;
}

.portfolio-carousel .portfolio-card {
    min-height: 100%;
}

.portfolio-carousel .portfolio-item-featured {
    grid-column: auto;
}

.portfolio-arrow {
    position: absolute;
    z-index: 15;
    top: 44%;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--theme-border) 84%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-card) 94%, transparent);
    color: var(--theme-text);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 37px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-50%);
    transition: transform .2s ease, opacity .2s ease, border-color .2s ease, background .2s ease;
}

.portfolio-arrow:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.06);
    border-color: color-mix(in srgb, var(--km-accent) 62%, var(--theme-border));
    color: var(--km-accent);
}

.portfolio-arrow:active:not(:disabled) { transform: translateY(-50%) scale(.98); }
.portfolio-arrow:disabled { opacity: .28; cursor: default; }
.portfolio-arrow-prev { left: -2px; }
.portfolio-arrow-next { right: -2px; }

.portfolio-pagination {
    position: absolute;
    left: 50%;
    bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translateX(-50%);
}

.portfolio-page-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-muted) 48%, transparent);
    cursor: pointer;
    transition: width .22s ease, background .22s ease, transform .22s ease;
}

.portfolio-page-dot:hover { transform: scale(1.18); }
.portfolio-page-dot.is-active { width: 38px; background: var(--km-accent); }


@media (max-width: 1050px) {
    .portfolio-carousel { padding-inline: 28px; }
    .portfolio-carousel .portfolio-track { gap: 24px; }
    .portfolio-carousel .portfolio-item {
        flex-basis: calc((100% - 24px) / 2);
        width: calc((100% - 24px) / 2);
    }
    .portfolio-arrow { width: 48px; height: 48px; }
}

@media (max-width: 720px) {
    .portfolio-carousel { width: calc(100% + 16px); margin-left: -8px; padding: 0 15px 42px; }
    .portfolio-viewport { padding: 8px 3px 18px; }
    .portfolio-carousel .portfolio-track { gap: 16px; }
    .portfolio-carousel .portfolio-item { flex-basis: 100%; width: 100%; }
    .portfolio-arrow { top: 42%; width: 44px; height: 44px; font-size: 32px; }
    .portfolio-arrow-prev { left: -2px; }
    .portfolio-arrow-next { right: -2px; }
    .portfolio-page-dot.is-active { width: 28px; }
}


/* =========================================================
   KAMERTON v2.4.4 — section-bound ambient + corner tech window
   Layering model requested by user:
   z-index 0: section-local fragments / particles
   z-index 1: decorative browser/code window (services only)
   z-index 2: real content / cards / buttons
   ========================================================= */

:root {
    --ambient-fragment: rgba(92, 108, 133, .16);
    --ambient-fragment-soft: rgba(92, 108, 133, .09);
    --ambient-particle: rgba(227, 99, 151, .28);
}
html[data-theme="dark"] {
    --ambient-fragment: rgba(155, 174, 204, .18);
    --ambient-fragment-soft: rgba(155, 174, 204, .10);
    --ambient-particle: rgba(227, 99, 151, .36);
}

/* Ambient decoration is attached to EACH section instead of the viewport.
   It naturally scrolls away with the section and can never look like dirt on the screen. */
.section-ambient {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* z-index 0: tiny section-local particles */
.section-ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .72;
    background-image:
        radial-gradient(circle at 8% 18%, var(--ambient-particle) 0 1.15px, transparent 1.8px),
        radial-gradient(circle at 21% 76%, var(--ambient-particle) 0 .85px, transparent 1.45px),
        radial-gradient(circle at 37% 31%, var(--ambient-particle) 0 .95px, transparent 1.55px),
        radial-gradient(circle at 58% 82%, var(--ambient-particle) 0 1.05px, transparent 1.65px),
        radial-gradient(circle at 73% 23%, var(--ambient-particle) 0 .8px, transparent 1.4px),
        radial-gradient(circle at 91% 64%, var(--ambient-particle) 0 1.05px, transparent 1.65px);
    animation: sectionParticleFloat 28s ease-in-out infinite alternate;
}

/* z-index 0: SHORT digital fragments, never long sweeping lines. */
.section-ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .78;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(90deg, transparent 0, var(--ambient-fragment) 16%, var(--ambient-fragment) 84%, transparent 100%),
        linear-gradient(90deg, transparent 0, var(--ambient-fragment-soft) 14%, var(--ambient-fragment-soft) 86%, transparent 100%),
        linear-gradient(135deg, transparent 0, var(--ambient-fragment) 17%, var(--ambient-fragment) 83%, transparent 100%),
        linear-gradient(90deg, transparent 0, var(--ambient-fragment-soft) 16%, var(--ambient-fragment-soft) 84%, transparent 100%),
        linear-gradient(45deg, transparent 0, var(--ambient-fragment) 18%, var(--ambient-fragment) 82%, transparent 100%);
    background-size:
        118px 1px,
        74px 1px,
        96px 1px,
        82px 1px,
        68px 1px;
    background-position:
        7% 26%,
        82% 18%,
        93% 72%,
        28% 88%,
        62% 54%;
    animation: sectionFragmentFloat 34s ease-in-out infinite alternate;
}

/* Each section gets its own composition, so the fragments feel designed for the block. */
#home.section-ambient::after {
    background-position: 5% 22%, 88% 18%, 93% 70%, 31% 90%, 66% 58%;
}
#services.section-ambient::after {
    background-position: 11% 14%, 76% 20%, 93% 66%, 24% 88%, 56% 52%;
}
#portfolio.section-ambient::after {
    background-position: 8% 20%, 84% 15%, 95% 75%, 35% 92%, 60% 48%;
}
#about.section-ambient::after {
    background-position: 15% 18%, 78% 25%, 91% 73%, 30% 86%, 68% 55%;
}

/* z-index 2: all real section content sits above ambient decoration. */
.section-ambient > * {
    position: relative;
    z-index: 2;
}

@keyframes sectionParticleFloat {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(5px, -4px, 0); }
}
@keyframes sectionFragmentFloat {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-4px, 3px, 0); }
}

/* =========================================================
   Services decorative browser/code screen
   ========================================================= */
.services {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* This wrapper is the ONLY z-index 1 layer. */
.services > .services-tech-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.services > :not(.services-tech-backdrop) {
    position: relative;
    z-index: 2;
}

.tech-ghost {
    position: absolute;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-border) 74%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--theme-card) 62%, transparent);
    color: var(--theme-muted);
    box-shadow: 0 24px 55px color-mix(in srgb, var(--theme-shadow) 30%, transparent);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    filter: saturate(.78);
}

/* The screen is deliberately placed in the LOWER-RIGHT CORNER of services. */
.tech-ghost-corner {
    width: 310px;
    right: 26px;
    bottom: 22px;
    opacity: .34;
    transform: rotate(-4.5deg);
    animation: serviceCornerFloat 20s ease-in-out infinite alternate;
}
html[data-theme="dark"] .tech-ghost-corner { opacity: .31; }

.tech-ghost-bar {
    height: 31px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 56%, transparent);
    background: color-mix(in srgb, var(--theme-mock-bg) 58%, transparent);
}
.tech-ghost-bar span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme-muted);
    opacity: .43;
}
.tech-ghost-bar b {
    margin-left: 7px;
    font: 600 9px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .02em;
}
.tech-ghost-address {
    width: calc(100% - 28px);
    margin: 10px 14px 0;
    padding: 6px 9px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-mock-bg) 62%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-border) 44%, transparent);
    font: 500 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    opacity: .78;
}
.tech-ghost pre {
    margin: 0;
    padding: 11px 17px 16px;
    white-space: pre-wrap;
    font: 500 10px/1.68 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.tech-ghost code { color: inherit; }
.tech-ghost code i {
    display: inline-block;
    width: 23px;
    font-style: normal;
    color: color-mix(in srgb, var(--theme-muted) 53%, transparent);
}

@keyframes serviceCornerFloat {
    from { transform: rotate(-4.5deg) translate3d(0, 0, 0); }
    to   { transform: rotate(-3.8deg) translate3d(-7px, -6px, 0); }
}

/* Keep cards fully readable; the screen is decoration beneath them. */
.services .service-card {
    background: color-mix(in srgb, var(--theme-card) 97%, transparent);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
html[data-theme="dark"] .services .service-card {
    background: color-mix(in srgb, var(--theme-card) 95%, transparent);
}

/* =========================================================
   Preserve portfolio centering fixes
   ========================================================= */
.portfolio-card-image { --portfolio-frame-scale: .30; }
.portfolio-card-image > iframe {
    left: 50% !important;
    right: auto !important;
    top: 0 !important;
    transform: translateX(-50%) scale(var(--portfolio-frame-scale)) !important;
    transform-origin: top center !important;
}

.ryvia-preview { position: relative; isolation: isolate; }
.ryvia-preview::after { z-index: 0; }
.ryvia-preview-header,
.ryvia-preview-body { z-index: 2; }
.ryvia-preview > .portfolio-card-overlay {
    z-index: 8;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(5, 12, 8, .58);
}
.ryvia-preview > .portfolio-card-overlay span {
    padding: 11px 16px;
    font-size: 12px;
    transform: none;
}
.portfolio-card-content { position: relative; z-index: 1; }

.portfolio-preview-screen { --portfolio-preview-scale: .5278; }
.portfolio-preview-screen > iframe {
    left: 50% !important;
    right: auto !important;
    top: 0 !important;
    transform: translateX(-50%) scale(var(--portfolio-preview-scale)) !important;
    transform-origin: top center !important;
}

@media (max-width: 720px) {
    .section-ambient::before { opacity: .48; }
    .section-ambient::after { opacity: .48; }
    .tech-ghost-corner {
        width: 235px;
        right: -72px;
        bottom: 14px;
        opacity: .18;
    }
    html[data-theme="dark"] .tech-ghost-corner { opacity: .17; }
    .portfolio-card-image { --portfolio-frame-scale: .25; }
}

@media (prefers-reduced-motion: reduce) {
    .section-ambient::before,
    .section-ambient::after,
    .tech-ghost-corner {
        animation: none !important;
    }
}


/* =========================================================
   KAMERTON v2.5 — Featured Project portfolio
   Desktop: large live preview on the left + interactive project rail on the right.
   No autoplay: the visitor stays in control. The rail behaves like an accessible accordion.
   ========================================================= */
.portfolio-section {
    padding: 110px 48px 130px;
    overflow: hidden;
}
.portfolio-heading { margin-bottom: 52px; }
.portfolio-featured-layout {
    width: min(100%, 1320px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(350px, .78fr);
    gap: 24px;
    align-items: stretch;
}
.portfolio-featured-view { min-width: 0; }
.portfolio-showcase-browser {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --spot-x: 50%;
    --spot-y: 45%;
    position: relative;
    height: 640px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-border) 86%, var(--km-accent) 14%);
    border-radius: 28px;
    background: var(--theme-card);
    box-shadow: 0 26px 70px color-mix(in srgb, var(--theme-shadow) 66%, transparent), 0 8px 24px rgba(227,99,151,.06);
    transform: perspective(1300px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition: transform .24s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease;
}
.portfolio-showcase-browser::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--spot-x) var(--spot-y), rgba(255,255,255,.11), transparent 62%);
    opacity: .72;
    mix-blend-mode: soft-light;
}
html[data-theme="dark"] .portfolio-showcase-browser::after { opacity: .34; }
.portfolio-showcase-browser:hover {
    border-color: color-mix(in srgb, var(--km-accent) 38%, var(--theme-border));
    box-shadow: 0 32px 82px color-mix(in srgb, var(--theme-shadow) 76%, transparent), 0 10px 26px rgba(227,99,151,.08);
}
.portfolio-showcase-bar {
    position: relative;
    z-index: 9;
    height: 50px;
    flex: 0 0 50px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 0 17px;
    border-bottom: 1px solid var(--theme-border);
    background: color-mix(in srgb, var(--theme-card) 94%, var(--theme-mock-bg));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.portfolio-showcase-bar .portfolio-browser-dots { display: flex; gap: 6px; }
.portfolio-showcase-bar .portfolio-browser-dots span { width: 8px; height: 8px; border-radius: 50%; opacity: .72; }
.portfolio-showcase-address {
    min-width: 0;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--theme-main) 72%, transparent);
    color: var(--theme-muted);
    font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portfolio-showcase-mode {
    min-width: 47px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font: 800 9px/1 system-ui, sans-serif;
    letter-spacing: .09em;
    transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.portfolio-showcase-mode.is-live { color: #5e9d2f; background: rgba(125,207,70,.10); border: 1px solid rgba(125,207,70,.20); }
.portfolio-showcase-mode.is-demo { color: var(--km-accent); background: rgba(227,99,151,.09); border: 1px solid rgba(227,99,151,.18); }
.portfolio-featured-preview {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--theme-mock-bg) 78%, var(--theme-main));
}
.portfolio-featured-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translate3d(16px, 0, 0) scale(.992);
    transition: opacity .44s cubic-bezier(.2,.7,.2,1), transform .44s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
.portfolio-featured-layer.is-visible { opacity: 1; transform: none; }
.portfolio-featured-layer.is-leaving { opacity: 0; transform: translate3d(-14px, 0, 0) scale(.994); }
.portfolio-featured-layer > iframe,
.portfolio-rail-thumb > iframe {
    position: absolute;
    width: 1440px;
    height: 900px;
    max-width: none;
    border: 0;
    pointer-events: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--featured-frame-scale, .5));
    transform-origin: center center;
    background: white;
}
.portfolio-featured-layer .portfolio-featured-ryvia {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 46px 52px;
    display: flex;
    flex-direction: column;
    border-radius: 0;
}
.portfolio-featured-layer .portfolio-featured-ryvia .ryvia-preview-header strong { font-size: 27px; }
.portfolio-featured-layer .portfolio-featured-ryvia .ryvia-preview-header small { font-size: 11px; }
.portfolio-featured-layer .portfolio-featured-ryvia .ryvia-preview-body {
    flex: 1 1 auto;
    min-height: 0;
    gap: 56px;
}
.portfolio-featured-layer .portfolio-featured-ryvia .ryvia-cube { width: 132px; height: 132px; }
.portfolio-featured-layer .portfolio-featured-ryvia .ryvia-preview-body b { font-size: clamp(25px, 2.25vw, 38px); }
.portfolio-featured-layer .portfolio-featured-ryvia .ryvia-preview-body span { font-size: 13px; }
.portfolio-featured-footer {
    position: absolute;
    z-index: 10;
    left: 24px;
    right: 24px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    pointer-events: none;
}
.portfolio-featured-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: rgba(7,13,10,.48);
    color: rgba(255,255,255,.66);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font: 700 9px/1 system-ui,sans-serif;
}
.portfolio-featured-count b { color: white; }
.portfolio-featured-count i { width: 16px; height: 1px; background: rgba(255,255,255,.36); }
.portfolio-featured-progress {
    width: 112px;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
}
.portfolio-featured-progress span {
    display: block;
    width: 25%;
    height: 100%;
    border-radius: inherit;
    background: var(--km-accent);
    transition: width .42s cubic-bezier(.2,.8,.2,1);
}

.portfolio-project-rail {
    height: 640px;
    min-width: 0;
    padding: 15px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--theme-border);
    border-radius: 28px;
    background: color-mix(in srgb, var(--theme-card) 96%, transparent);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--theme-shadow) 48%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.portfolio-rail-heading {
    flex: 0 0 auto;
    padding: 5px 8px 13px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 72%, transparent);
}
.portfolio-rail-heading > div { display: grid; gap: 3px; }
.portfolio-rail-heading span { color: var(--theme-text); font-size: 14px; font-weight: 700; }
.portfolio-rail-heading small { color: var(--theme-muted); font-size: 10px; }
.portfolio-rail-heading .portfolio-rail-count { color: var(--km-accent); font-size: 11px; letter-spacing: .08em; }
.portfolio-project-list {
    min-height: 0;
    flex: 1 1 auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    overflow: auto;
    scrollbar-width: thin;
}
.portfolio-project-option {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 18px;
    background: transparent;
    transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.portfolio-project-option::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 999px;
    background: var(--km-accent);
    opacity: 0;
    transform: scaleY(.45);
    transition: opacity .25s ease, transform .25s ease;
}
.portfolio-project-option.is-active {
    border-color: color-mix(in srgb, var(--km-accent) 26%, var(--theme-border));
    background: color-mix(in srgb, var(--km-accent) 6%, var(--theme-card));
    box-shadow: 0 10px 26px rgba(227,99,151,.07);
}
.portfolio-project-option.is-active::before { opacity: 1; transform: scaleY(1); }
.portfolio-project-select {
    width: 100%;
    min-height: 88px;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 28px 104px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--theme-text);
    text-align: left;
    cursor: pointer;
}
.portfolio-project-select:focus-visible { outline: 2px solid var(--km-accent); outline-offset: -3px; }
.portfolio-project-index { color: var(--theme-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; transition: color .2s ease; }
.portfolio-project-option.is-active .portfolio-project-index { color: var(--km-accent); }
.portfolio-rail-thumb {
    --featured-frame-scale: .075;
    position: relative;
    width: 104px;
    height: 64px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--theme-border) 80%, transparent);
    border-radius: 11px;
    background: var(--theme-mock-bg);
    box-shadow: 0 5px 14px rgba(15,23,42,.08);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease;
}
.portfolio-project-select:hover .portfolio-rail-thumb { transform: translateY(-2px) scale(1.015); border-color: color-mix(in srgb, var(--km-accent) 34%, var(--theme-border)); }
.portfolio-rail-thumb-ryvia {
    display: block;
    background: linear-gradient(145deg,#07110a,#102417 68%,#0a1a10);
}
.portfolio-rail-thumb-ryvia::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(184,255,60,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(184,255,60,.035) 1px,transparent 1px);
    background-size: 14px 14px;
}
.rail-ryvia-logo { position: absolute; z-index: 2; left: 9px; top: 8px; color: #eef9e9; font: 800 8px/1 system-ui,sans-serif; letter-spacing: .08em; }
.rail-ryvia-logo i { color: #b8ff3c; font-style: normal; }
.rail-ryvia-shape { position: absolute; z-index: 2; right: 20px; bottom: 13px; width: 27px; height: 27px; transform: rotate(30deg) skew(-4deg); }
.rail-ryvia-shape i { position: absolute; inset: 0; border: 1px solid rgba(184,255,60,.72); border-radius: 6px; }
.rail-ryvia-shape i:nth-child(2) { transform: translate(4px,-4px); opacity: .62; }
.rail-ryvia-shape i:nth-child(3) { transform: translate(8px,-8px); opacity: .32; }
.portfolio-project-summary { min-width: 0; display: grid; gap: 4px; }
.portfolio-project-summary small {
    overflow: hidden;
    color: var(--km-accent);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.portfolio-project-summary strong {
    display: -webkit-box;
    overflow: hidden;
    color: var(--theme-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.portfolio-project-chevron {
    color: var(--theme-muted);
    font: 400 18px/1 system-ui,sans-serif;
    transform: rotate(0deg);
    transition: color .22s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
.portfolio-project-option.is-active .portfolio-project-chevron { color: var(--km-accent); transform: rotate(45deg); }
.portfolio-project-details {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .36s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}
.portfolio-project-details > div { min-height: 0; overflow: hidden; }
.portfolio-project-option.is-active .portfolio-project-details { grid-template-rows: 1fr; opacity: 1; }
.portfolio-flagship-badge {
    margin: 2px 13px 8px 49px;
    width: fit-content;
    padding: 5px 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: rgba(184,255,60,.10);
    color: #6c9f33;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.portfolio-project-details p {
    margin: 0;
    padding: 2px 13px 10px 49px;
    color: var(--theme-muted);
    font-size: 11px;
    line-height: 1.55;
}
.portfolio-project-tech {
    padding: 0 13px 12px 49px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.portfolio-project-tech span {
    padding: 5px 7px;
    border: 1px solid color-mix(in srgb, var(--theme-border) 78%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--theme-mock-bg) 72%, transparent);
    color: var(--theme-muted);
    font-size: 8px;
    font-weight: 600;
}
.portfolio-project-cta {
    margin: 0 13px 13px 49px;
    min-height: 34px;
    width: fit-content;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--km-accent);
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(227,99,151,.18);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.portfolio-project-cta:hover { transform: translateY(-1px); background: #d65289; box-shadow: 0 10px 22px rgba(227,99,151,.24); }

@media (max-width: 1120px) {
    .portfolio-featured-layout { grid-template-columns: minmax(0, 1.45fr) minmax(330px, .82fr); }
    .portfolio-showcase-browser, .portfolio-project-rail { height: 590px; }
    .portfolio-project-select { grid-template-columns: 25px 88px minmax(0,1fr) 20px; gap: 8px; min-height: 80px; }
    .portfolio-rail-thumb { width: 88px; height: 56px; }
    .portfolio-project-details p, .portfolio-project-tech { padding-left: 43px; }
    .portfolio-project-cta { margin-left: 43px; }
}

@media (max-width: 920px) {
    .portfolio-section { padding-inline: 28px; }
    .portfolio-featured-layout { grid-template-columns: 1fr; gap: 18px; }
    .portfolio-showcase-browser { height: min(66vw, 570px); min-height: 430px; }
    .portfolio-project-rail { height: auto; min-height: 0; }
    .portfolio-project-list { overflow: visible; }
    .portfolio-project-select { grid-template-columns: 30px 116px minmax(0,1fr) 24px; }
    .portfolio-rail-thumb { width: 116px; height: 70px; }
}

@media (max-width: 620px) {
    .portfolio-section { padding: 84px 18px 100px; }
    .portfolio-heading { margin-bottom: 34px; }
    .portfolio-heading h2 { font-size: clamp(31px, 9vw, 42px); }
    .portfolio-heading p { font-size: 15px; }
    .portfolio-showcase-browser { height: 390px; min-height: 0; border-radius: 21px; }
    .portfolio-showcase-bar { height: 44px; flex-basis: 44px; padding-inline: 12px; gap: 8px; }
    .portfolio-showcase-address { height: 28px; padding-inline: 9px; font-size: 8px; justify-content: flex-start; }
    .portfolio-showcase-mode { min-width: 42px; height: 24px; font-size: 8px; }
    .portfolio-featured-layer .portfolio-featured-ryvia { padding: 30px 22px 50px; }
    .portfolio-featured-layer .portfolio-featured-ryvia .ryvia-preview-header strong { font-size: 19px; }
    .portfolio-featured-layer .portfolio-featured-ryvia .ryvia-preview-header small { font-size: 8px; }
    .portfolio-featured-layer .portfolio-featured-ryvia .ryvia-preview-body { gap: 22px; }
    .portfolio-featured-layer .portfolio-featured-ryvia .ryvia-cube { width: 76px; height: 76px; }
    .portfolio-featured-layer .portfolio-featured-ryvia .ryvia-preview-body b { font-size: 20px; }
    .portfolio-featured-layer .portfolio-featured-ryvia .ryvia-preview-body span { font-size: 9px; }
    .portfolio-featured-footer { left: 14px; right: 14px; bottom: 12px; }
    .portfolio-project-rail { padding: 10px; border-radius: 21px; }
    .portfolio-rail-heading { padding: 5px 5px 10px; }
    .portfolio-project-list { gap: 6px; }
    .portfolio-project-select { grid-template-columns: 24px 86px minmax(0,1fr) 18px; min-height: 76px; padding: 8px; gap: 7px; }
    .portfolio-rail-thumb { width: 86px; height: 54px; }
    .portfolio-project-summary strong { font-size: 11px; }
    .portfolio-project-summary small { font-size: 7px; }
    .portfolio-flagship-badge { margin-left: 39px; }
    .portfolio-project-details p { padding: 2px 10px 9px 39px; font-size: 10px; }
    .portfolio-project-tech { padding: 0 10px 10px 39px; }
    .portfolio-project-cta { margin: 0 10px 11px 39px; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-showcase-browser,
    .portfolio-featured-layer,
    .portfolio-project-option,
    .portfolio-project-option::before,
    .portfolio-project-details,
    .portfolio-project-chevron,
    .portfolio-rail-thumb,
    .portfolio-featured-progress span {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   KAMERTON v2.7 — restrained motion system
   Scroll choreography, portfolio transitions, ambient drift,
   micro-interactions, nav indicator, theme transition and hero depth.
   ========================================================= */

/* 1. Page/section reveal choreography */
.km-motion-ready .km-reveal {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 18px, 0);
    transition:
        opacity .66s cubic-bezier(.2,.75,.2,1) var(--km-reveal-delay,0ms),
        transform .72s cubic-bezier(.18,.82,.22,1) var(--km-reveal-delay,0ms),
        filter .58s ease var(--km-reveal-delay,0ms);
    will-change: opacity, transform, filter;
}
.km-motion-ready .km-reveal.km-reveal-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0,0,0);
}

/* Hero intro: no redesign, only a short opening sequence. */
.km-motion-ready .main-text > * {
    opacity: 0;
    transform: translate3d(0,15px,0);
    filter: blur(4px);
}
.km-motion-ready body.km-loaded .main-text > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity .7s ease, transform .72s cubic-bezier(.2,.8,.2,1), filter .55s ease;
}
.km-motion-ready body.km-loaded .main-text > :nth-child(1) { transition-delay: 70ms; }
.km-motion-ready body.km-loaded .main-text > :nth-child(2) { transition-delay: 135ms; }
.km-motion-ready body.km-loaded .main-text > :nth-child(3) { transition-delay: 205ms; }
.km-motion-ready body.km-loaded .main-text > :nth-child(4) { transition-delay: 280ms; }
.km-motion-ready .hero-visual { opacity: 0; filter: blur(6px); }
.km-motion-ready body.km-loaded .hero-visual {
    opacity: 1;
    filter: none;
    transition: opacity .9s ease .2s, filter .8s ease .2s;
}
.km-motion-ready body.km-loaded .hero-visual .site-window,
.km-motion-ready body.km-loaded .hero-visual .mobile-window {
    animation: kmWindowMaterialize .78s cubic-bezier(.18,.82,.22,1) both;
}
.km-motion-ready body.km-loaded .hero-visual .window-shop { animation-delay: .10s; }
.km-motion-ready body.km-loaded .hero-visual .window-dashboard { animation-delay: .18s; }
.km-motion-ready body.km-loaded .hero-visual .window-contact { animation-delay: .25s; }
.km-motion-ready body.km-loaded .hero-visual .mobile-window { animation-delay: .31s; }
@keyframes kmWindowMaterialize {
    from { opacity: 0; filter: blur(5px) saturate(.8); }
    to { opacity: 1; filter: blur(0) saturate(1); }
}

/* Very small pointer depth. Existing per-window transforms remain untouched. */
.hero-visual::after {
    content:"";
    position:absolute;
    inset:12% 8%;
    z-index:-1;
    pointer-events:none;
    border-radius:50%;
    background:radial-gradient(circle at 52% 46%,rgba(227,99,151,.075),transparent 62%);
    transform:translate3d(var(--hero-depth-x,0),var(--hero-depth-y,0),0);
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

/* 2. Section-bound ambient elements keep their original placement and drift,
      with only a very slow opacity pulse added. */
.section-ambient::before {
    animation: sectionParticleFloat 28s ease-in-out infinite alternate, kmAmbientOpacity 17s ease-in-out infinite;
}
.section-ambient::after {
    animation: sectionFragmentFloat 34s ease-in-out infinite alternate, kmAmbientOpacity 21s ease-in-out -7s infinite;
}
#services.section-ambient::before { animation-delay: -5s, -4s; }
#portfolio.section-ambient::after { animation-delay: -9s, -11s; }
#about.section-ambient::before { animation-delay: -12s, -8s; }
@keyframes kmAmbientOpacity {
    0%,100% { opacity: .66; }
    50% { opacity: .82; }
}

/* 3. Featured-project transition: a little depth and material blur. */
.portfolio-featured-layer {
    opacity: 0;
    filter: blur(8px) saturate(.88);
    transform: translate3d(22px,0,0) scale(.972);
    transition:
        opacity .40s cubic-bezier(.2,.72,.2,1),
        transform .48s cubic-bezier(.16,.84,.24,1),
        filter .38s ease;
}
.portfolio-featured-layer.is-visible {
    opacity:1;
    filter:blur(0) saturate(1);
    transform:none;
}
.portfolio-featured-layer.is-leaving {
    opacity:0;
    filter:blur(7px) saturate(.9);
    transform:translate3d(-18px,0,0) scale(.982);
}
.portfolio-project-option::before {
    background:linear-gradient(180deg,transparent 0%,var(--km-accent) 20%,var(--km-accent) 80%,transparent 100%);
    background-size:100% 180%;
}
.portfolio-project-option.is-active::before {
    animation:kmRailPulse 2.8s ease-in-out infinite;
}
.portfolio-featured-layout.km-project-switched .portfolio-featured-count b {
    animation:kmCounterSwitch .42s cubic-bezier(.2,.8,.2,1);
}
.portfolio-featured-layout.km-project-switched .portfolio-showcase-address,
.portfolio-featured-layout.km-project-switched .portfolio-showcase-mode {
    animation:kmMetaSwitch .42s cubic-bezier(.2,.8,.2,1);
}
@keyframes kmRailPulse {
    0%,100% { background-position:0 0; filter:none; }
    50% { background-position:0 100%; filter:drop-shadow(0 0 5px rgba(227,99,151,.28)); }
}
@keyframes kmCounterSwitch {
    0% { opacity:.2; transform:translateY(5px); }
    100% { opacity:1; transform:none; }
}
@keyframes kmMetaSwitch {
    0% { opacity:.45; transform:translateY(-3px); }
    100% { opacity:1; transform:none; }
}

/* Main preview tilt stays subtle and recovers softly. */
.portfolio-showcase-browser {
    transition:transform .38s cubic-bezier(.16,.84,.24,1),border-color .25s ease,box-shadow .3s ease;
}
.portfolio-showcase-browser::after { transition:opacity .3s ease,background-position .3s ease; }

/* 4. Buttons: cursor-aware soft highlight + tactile press. */
.main-btn,.hero-secondary,.nav-contact,.mobile-contact,
.portfolio-project-cta,.kp-primary,.kp-secondary,.kp-account,.portfolio-project-select {
    position:relative;
    isolation:isolate;
    overflow:hidden;
}
.main-btn::after,.hero-secondary::after,.nav-contact::after,.mobile-contact::after,
.portfolio-project-cta::after,.kp-primary::after,.kp-secondary::after,.kp-account::before {
    content:"";
    position:absolute;
    z-index:-1;
    width:130px;
    height:130px;
    left:calc(var(--km-btn-x,50%) - 65px);
    top:calc(var(--km-btn-y,50%) - 65px);
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle,rgba(255,255,255,.22),transparent 67%);
    opacity:0;
    transform:scale(.65);
    transition:opacity .24s ease,transform .32s ease;
}
.hero-secondary::after,.kp-secondary::after,.kp-account::before {
    background:radial-gradient(circle,color-mix(in srgb,var(--km-accent) 14%,transparent),transparent 68%);
}
.main-btn:hover::after,.hero-secondary:hover::after,.nav-contact:hover::after,.mobile-contact:hover::after,
.portfolio-project-cta:hover::after,.kp-primary:hover::after,.kp-secondary:hover::after,.kp-account:hover::before {
    opacity:1;
    transform:scale(1);
}
.km-pressed { animation:kmButtonPress .2s ease; }
@keyframes kmButtonPress { 50% { transform:scale(.975); } }
.portfolio-project-cta::first-letter { transition:transform .2s ease; }

/* 5. One moving navigation indicator instead of five unrelated underlines. */
.desktop-nav { position:relative; }
.header .desktop-nav a::after { opacity:0 !important; }
.km-nav-indicator {
    position:absolute;
    left:0;
    bottom:-10px;
    width:var(--nav-w,0px);
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,var(--km-accent) 20%,var(--km-accent) 80%,transparent);
    opacity:0;
    transform:translateX(var(--nav-x,0px)) scaleX(.62);
    transform-origin:center;
    transition:transform .36s cubic-bezier(.2,.8,.2,1),width .36s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
    pointer-events:none;
}
.km-nav-indicator.is-ready { opacity:1; transform:translateX(var(--nav-x,0px)) scaleX(1); }
.km-nav-indicator.no-transition { transition:none; }
.header .desktop-nav a.is-section-active { color:var(--theme-text); }

/* 6. Theme material transition. The View Transition API is used when Chrome supports it;
      the soft wash remains as a lightweight fallback. */
::view-transition-old(root) { animation: kmThemeOld .26s ease both; }
::view-transition-new(root) { animation: kmThemeNew .34s ease both; }
@keyframes kmThemeOld { to { opacity:0; filter:blur(2px); } }
@keyframes kmThemeNew { from { opacity:0; filter:blur(2px); } to { opacity:1; filter:none; } }
body.km-theme-shift::before {
    content:"";
    position:fixed;
    z-index:9998;
    inset:0;
    pointer-events:none;
    background:radial-gradient(circle at calc(100% - 116px) 72px,color-mix(in srgb,var(--km-accent) 7%,transparent),transparent 32%);
    animation:kmThemeWash .42s ease both;
}
@keyframes kmThemeWash {
    0% { opacity:0; transform:scale(.98); }
    45% { opacity:1; }
    100% { opacity:0; transform:scale(1.015); }
}

/* 7. Client portal — stronger feedback without constant movement. */
.kp-status::before {
    height:4px;
    box-shadow:0 0 18px color-mix(in srgb,var(--status) 24%,transparent);
}
.kp-stage.current::after {
    content:"";
    position:absolute;
    inset:-1px;
    border:1px solid color-mix(in srgb,var(--status) 32%,transparent);
    border-radius:inherit;
    pointer-events:none;
    animation:kmStageHalo 2.8s ease-in-out infinite;
}
.kp-stage { position:relative; overflow:hidden; }
.kp-stage.km-stage-tap { animation:kmStageTap .42s cubic-bezier(.2,.8,.2,1); }
@keyframes kmStageHalo { 50% { opacity:.28; transform:scale(.96); } }
@keyframes kmStageTap { 50% { transform:translateY(-3px) scale(.985); } }
.kp-console-body,.kp-update-grid { transform-origin:top center; }
.kp-console-body.km-details-open,.kp-update-grid.km-details-open {
    animation:kmDetailsOpen .34s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes kmDetailsOpen {
    from { opacity:0; transform:translateY(-7px) scaleY(.985); filter:blur(2px); }
    to { opacity:1; transform:none; filter:none; }
}
.kp-chat-form:focus-within {
    background:color-mix(in srgb,var(--kp-accent) 3%,var(--theme-card));
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--kp-accent) 12%,transparent);
}
.kp-chat-form input:focus {
    border-color:color-mix(in srgb,var(--kp-accent) 46%,var(--kp-line));
    box-shadow:0 0 0 4px color-mix(in srgb,var(--kp-accent) 8%,transparent);
}
.kp-msg { animation-duration:.34s; }
.kp-viewer-media img { animation-duration:.48s; }

@media (hover:none), (pointer:coarse) {
    .hero-visual::after { transform:none !important; }
    .main-btn::after,.hero-secondary::after,.nav-contact::after,.mobile-contact::after,
    .portfolio-project-cta::after,.kp-primary::after,.kp-secondary::after,.kp-account::before { display:none; }
}

@media (prefers-reduced-motion:reduce) {
    .km-motion-ready .km-reveal,
    .km-motion-ready .main-text > *,
    .km-motion-ready .hero-visual {
        opacity:1 !important;
        filter:none !important;
        transform:none !important;
        transition:none !important;
    }
    .km-motion-ready body.km-loaded .hero-visual .site-window,
    .km-motion-ready body.km-loaded .hero-visual .mobile-window,
    .section-ambient::before,.section-ambient::after,
    .portfolio-project-option.is-active::before,
    .kp-stage.current::after,
    body.km-theme-shift::before {
        animation:none !important;
    }
    .km-nav-indicator,
    .portfolio-featured-layer,
    .portfolio-showcase-browser,
    .kp-console-body,.kp-update-grid {
        transition:none !important;
        animation:none !important;
    }
}


/* =========================================================
   KAMERTON v2.8.2 — performance + cross-browser polish
   ========================================================= */
.portfolio-rail-thumb > .portfolio-rail-thumb-image{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 42%;transform:translateZ(0)
}
@supports (content-visibility:auto){
  #services,#portfolio,#reviews,#about,.footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 820px;
  }
}
.section-ambient:not(.km-ambient-active)::before,
.section-ambient:not(.km-ambient-active)::after,
.section-ambient:not(.km-ambient-active) .services-ambient-window,
body.km-page-hidden .section-ambient::before,
body.km-page-hidden .section-ambient::after,
body.km-page-hidden .services-ambient-window,
body.km-page-hidden .theme-toggle .moon-star{
  animation-play-state:paused!important;
}
@supports (-webkit-backdrop-filter:blur(1px)){
  .language-dropdown{-webkit-backdrop-filter:blur(18px)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .language-dropdown,.portfolio-showcase-bar,.portfolio-featured-count{
    background-color:var(--theme-card);
  }
}
@media (pointer:coarse){
  .portfolio-showcase-browser{transform:none!important}
  .portfolio-showcase-browser::after{display:none}
}
@media (max-width:680px){
  .language-dropdown,.portfolio-showcase-bar{
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
  }
}
@supports not (color:color-mix(in srgb,white,black)){
  .portfolio-showcase-browser,.portfolio-project-rail,.services-ambient-window{
    border-color:var(--theme-border);
    box-shadow:0 18px 45px var(--theme-card-shadow);
  }
}


/* =========================================================
   KAMERTON v2.11.4 — commercial offer polish
   Starting prices + compact project-start flow.
   ========================================================= */
.services-heading {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: 0 auto;
}

.services-grid-offer {
    position: relative;
    z-index: 2;
    align-items: stretch;
}

.service-offer-card {
    display: flex;
    flex-direction: column;
    min-height: 430px;
    padding: 30px;
    border: 1px solid var(--theme-border);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .035);
}

.service-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.service-offer-card .service-card-top img {
    margin: 0;
    flex: 0 0 auto;
}

.service-price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 25%, var(--theme-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-accent) 6%, var(--theme-card));
    white-space: nowrap;
}

.service-price small {
    color: var(--theme-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.service-price strong {
    color: var(--theme-text);
    font-size: 15px;
    line-height: 1;
}

.service-offer-card > p {
    min-height: 72px;
    margin-bottom: 18px;
}

.service-outcomes {
    display: grid;
    gap: 9px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.service-outcomes li {
    position: relative;
    padding-left: 18px;
    color: var(--theme-muted);
    font-size: 14px;
    line-height: 1.45;
}

.service-outcomes li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: .64em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 11%, transparent);
}

.service-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--theme-border);
}

.service-card-foot > span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.service-card-foot small {
    color: var(--theme-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.service-card-foot b {
    color: var(--theme-text);
    font-size: 13px;
    font-weight: 700;
}

.service-start {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    color: var(--theme-accent);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    text-align: right;
    transition: transform .2s ease, opacity .2s ease;
}

.service-start:hover {
    transform: translateX(3px);
}

.services-quote-panel {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(240px, .85fr) minmax(520px, 1.5fr) auto;
    align-items: center;
    gap: 28px;
    max-width: 1280px;
    margin: 34px auto 0;
    padding: 24px 26px;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 22%, var(--theme-border));
    border-radius: 22px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--theme-accent) 5%, var(--theme-card)), var(--theme-card));
    box-shadow: 0 14px 36px var(--theme-card-shadow);
    text-align: left;
}

.services-quote-copy > span {
    display: block;
    margin-bottom: 7px;
    color: var(--theme-accent);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
}

.services-quote-copy h3 {
    margin: 0 0 8px;
    color: var(--theme-text);
    font-size: 19px;
    line-height: 1.25;
}

.services-quote-copy p {
    margin: 0;
    color: var(--theme-muted);
    font-size: 13px;
    line-height: 1.5;
}

.services-start-flow {
    display: grid;
    grid-template-columns: 1fr 24px 1fr 24px 1fr;
    align-items: center;
    gap: 8px;
}

.services-start-flow > div {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: start;
    gap: 9px;
    min-width: 0;
}

.services-start-flow > div > b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, var(--theme-border));
    border-radius: 50%;
    color: var(--theme-accent);
    font-size: 10px;
}

.services-start-flow > div > span {
    display: grid;
    gap: 4px;
}

.services-start-flow strong {
    color: var(--theme-text);
    font-size: 12px;
}

.services-start-flow small {
    color: var(--theme-muted);
    font-size: 11px;
    line-height: 1.4;
}

.services-start-flow > i {
    display: block;
    height: 1px;
    background: linear-gradient(90deg, var(--theme-border), color-mix(in srgb, var(--theme-accent) 40%, var(--theme-border)));
}

.services-quote-cta {
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--theme-accent);
    border-radius: 13px;
    background: var(--theme-accent);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 25px color-mix(in srgb, var(--theme-accent) 24%, transparent);
    transition: transform .2s ease, box-shadow .2s ease;
}

.services-quote-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--theme-accent) 30%, transparent);
}

.portfolio-project-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.portfolio-project-cta-secondary {
    color: var(--theme-muted);
    border-bottom-color: color-mix(in srgb, var(--theme-muted) 35%, transparent);
}

.portfolio-project-cta-secondary:hover {
    color: var(--theme-accent);
    border-bottom-color: var(--theme-accent);
}

@media (max-width: 1180px) {
    .services-grid-offer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-quote-panel {
        grid-template-columns: 1fr;
    }

    .services-start-flow {
        max-width: 820px;
    }

    .services-quote-cta {
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .services-grid-offer {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-offer-card {
        min-height: 0;
        padding: 24px 22px;
    }

    .service-offer-card > p {
        min-height: 0;
    }

    .services-quote-panel {
        margin-top: 22px;
        padding: 22px 20px;
        gap: 22px;
        border-radius: 18px;
    }

    .services-start-flow {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .services-start-flow > i {
        width: 1px;
        height: 16px;
        margin-left: 14px;
        background: linear-gradient(180deg, var(--theme-border), color-mix(in srgb, var(--theme-accent) 40%, var(--theme-border)));
    }

    .services-quote-cta {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .service-card-foot {
        align-items: flex-start;
        flex-direction: column;
    }

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

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .service-price { border-color: rgba(227,99,151,.25); }
    .service-outcomes li::before { box-shadow: 0 0 0 4px rgba(227,99,151,.10); }
    .services-quote-panel { border-color: rgba(227,99,151,.22); }
    .services-quote-cta { box-shadow: 0 10px 25px rgba(227,99,151,.22); }
}

/* =========================================================
   KAMERTON v2.13 — dedicated mobile website design
   Purpose-built phone composition, not desktop scaling.
   ========================================================= */
@media (max-width:720px){
  :root{--km-mobile-gutter:18px}
  html{scroll-padding-top:72px}
  body{padding-top:68px;overflow-x:hidden}

  .header{height:68px}
  .header-shell{width:calc(100% - 20px);gap:6px}
  .logo{font-size:17px;letter-spacing:.065em}
  .header-actions{gap:6px}
  .theme-toggle,.mobile-menu-toggle,.kp-account{width:40px;height:40px;min-width:40px;border-radius:12px;padding:0}
  .language-button{width:42px;min-width:42px;height:40px;padding:0;justify-content:center}
  .language-dropdown{top:64px;right:10px;width:min(250px,calc(100vw - 20px));border-radius:15px}
  .mobile-site-nav{top:68px;padding:10px 14px 16px;max-height:calc(100dvh - 68px);overflow:auto}
  .mobile-site-nav a,.mobile-contact{min-height:50px;padding:0 12px;border-radius:10px;border-bottom:1px solid color-mix(in srgb,var(--theme-border) 50%,transparent);font-size:15px}

  .main{
    min-height:auto;
    padding:54px var(--km-mobile-gutter) 58px;
    display:flex;
    flex-direction:column;
    gap:34px;
    text-align:left;
  }
  .main::before{width:360px;height:360px;right:-210px;top:-40px}
  .main-text{max-width:none;width:100%}
  .hero-kicker{margin-bottom:12px;font-size:10px;letter-spacing:.13em}
  .main-text h1{font-size:clamp(39px,11.5vw,52px);line-height:1.01;margin:0 0 18px;letter-spacing:-.045em}
  .main-text p{max-width:35ch;margin:0 0 25px;font-size:16px;line-height:1.65}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
  .hero-actions .main-btn,.hero-actions .hero-secondary{width:100%;min-height:52px;justify-content:center;border-radius:14px;font-size:15px}
  .hero-visual{width:100%;height:340px;margin-top:2px;transform:none}
  .site-window{border-radius:14px;box-shadow:0 16px 35px color-mix(in srgb,var(--theme-shadow) 40%,transparent)}
  .window-business{width:92%;left:0;top:4px;transform:none}
  .window-shop{width:76%;right:-2%;top:102px;transform:scale(.9)}
  .mobile-window{width:42%;right:4%;bottom:0;transform:scale(.88);transform-origin:bottom right}

  .services,.portfolio-section,.about,.lastb,.kp-reviews{
    padding-left:var(--km-mobile-gutter)!important;
    padding-right:var(--km-mobile-gutter)!important;
  }
  .services{padding-top:72px;padding-bottom:76px;text-align:left}
  .services h2,.portfolio-heading h2,.about-text h2{font-size:clamp(34px,9.5vw,44px);line-height:1.05;letter-spacing:-.035em}
  .services-sub,.portfolio-heading p{font-size:15px;line-height:1.65;margin-bottom:30px}
  .services-grid,.services-grid-offer{grid-template-columns:1fr!important;gap:14px}
  .service-card,.service-offer-card{padding:24px 20px;border-radius:18px}
  .service-card h3,.service-offer-card h3{font-size:20px}
  .service-card p,.service-offer-card p{font-size:14px;line-height:1.65}
  .service-card:hover,.about-card:hover{transform:none}
  .services-quote-panel{padding:20px 18px;border-radius:18px}
  .services-quote-cta{width:100%;min-height:50px;justify-content:center}

  .portfolio-section{padding-top:76px;padding-bottom:78px}
  .portfolio-heading{margin-bottom:28px;text-align:left}
  .portfolio-grid,.portfolio-carousel .portfolio-track{grid-template-columns:1fr!important;gap:16px}
  .portfolio-item,.portfolio-carousel .portfolio-item{width:100%!important;min-width:0!important}
  .portfolio-card{border-radius:19px}
  .portfolio-card-image{min-height:210px}
  .portfolio-card-content{padding:20px}
  .portfolio-card-content h3{font-size:22px}
  .portfolio-card-content p{font-size:14px;line-height:1.6}
  .portfolio-preview{display:none!important}
  .portfolio-carousel{padding:0}
  .portfolio-viewport{overflow:visible}
  .portfolio-arrow,.portfolio-dots{display:none!important}
  .ryvia-preview{height:220px;padding:18px}
  .ryvia-preview-body{min-height:165px;gap:16px}
  .ryvia-cube{width:58px;height:58px}
  .portfolio-project-actions{align-items:flex-start;flex-direction:column;gap:11px}

  .about{padding-top:74px;padding-bottom:78px;text-align:left}
  .about-container{grid-template-columns:1fr;gap:30px}
  .about-text{max-width:none}
  .about-text p{font-size:15px;line-height:1.75}
  .cards2{grid-template-columns:1fr 1fr;gap:10px}
  .about-card{padding:20px 12px;border-radius:17px}
  .about-card img{width:46px;height:46px;margin-bottom:13px}
  .about-card h3{font-size:24px}
  .about-card p{font-size:12px;line-height:1.45}

  .kp-reviews{padding-top:76px!important;padding-bottom:82px!important}
  .kp-reviews-head{margin-bottom:26px}
  .kp-reviews-head h2{font-size:39px}
  .kp-reviews-head p{font-size:14px;line-height:1.65}
  .kp-review-grid{grid-template-columns:1fr;gap:12px}
  .kp-review{min-height:220px;padding:21px;border-radius:19px}
  .kp-review blockquote{font-size:17px;margin:22px 0}

  .footer{padding:48px var(--km-mobile-gutter) 20px}
  .footer-container{grid-template-columns:1fr!important;gap:30px}
  .footer-column{max-width:none}
  .footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
  .footer-nav a{padding:8px 0}
  .footer-bottom{margin-top:34px;padding-top:18px;flex-direction:column;gap:8px;text-align:left}

  .modal-content{width:calc(100% - 18px);max-height:calc(100dvh - 18px);padding:24px 17px;border-radius:20px}
  .modal-grid{grid-template-columns:1fr;gap:20px}
  .modal-form input,.modal-form textarea{font-size:16px}
}

@media (max-width:430px){
  :root{--km-mobile-gutter:14px}
  .header-shell{width:calc(100% - 14px)}
  .logo{font-size:15px}
  .main{padding-top:44px}
  .main-text h1{font-size:39px}
  .hero-visual{height:300px}
  .window-shop{top:94px}
  .cards2{grid-template-columns:1fr 1fr}
  .about-card{padding-inline:9px}
  .footer-nav{grid-template-columns:1fr}
}

/* =========================================================
   KAMERTON v2.13.1 — compact phone header + hero composition
   Phone header intentionally contains only brand, language and theme.
   ========================================================= */
@media (max-width: 720px) {
  /* The older `.header nav` selector is more specific than `.desktop-nav`.
     Force the desktop navigation out of the phone layout entirely. */
  .header .desktop-nav,
  .header .mobile-site-nav,
  .header .mobile-menu-toggle {
    display: none !important;
  }

  body {
    padding-top: 62px;
  }

  html {
    scroll-padding-top: 66px;
  }

  .header {
    height: 62px;
  }

  .header-shell {
    width: calc(100% - 24px);
    max-width: none;
    gap: 7px;
  }

  .logo {
    margin-right: auto;
    font-size: 16px;
    line-height: 1;
    letter-spacing: .075em;
    white-space: nowrap;
  }

  .header-actions {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 6px;
  }

  .language-button,
  .theme-toggle {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 11px;
  }

  .language-button {
    justify-content: center;
  }

  .language-code,
  .language-chevron {
    display: none !important;
  }

  .language-flag {
    font-size: 18px;
  }

  .theme-toggle .theme-icon {
    width: 19px;
    height: 19px;
  }

  .language-dropdown {
    position: fixed;
    top: 58px;
    right: 10px;
    width: min(238px, calc(100vw - 20px));
    max-height: calc(100dvh - 72px);
    overflow: auto;
    border-radius: 14px;
  }

  /* Mobile hero is its own compact composition. Desktop mockups are
     deliberately scaled and layered instead of being squeezed to 100%. */
  .main {
    padding-top: 46px;
    gap: 28px;
  }

  .hero-visual {
    position: relative;
    width: 100%;
    max-width: 430px;
    height: 330px;
    margin: 0 auto;
    overflow: visible;
    transform: none !important;
  }

  .hero-visual .site-window,
  .hero-visual .mobile-window {
    margin: 0;
  }

  .hero-visual .window-business {
    width: 450px;
    height: 305px;
    top: 0;
    left: 50%;
    right: auto;
    z-index: 3;
    transform: translateX(-50%) scale(.68) rotate(-1deg) !important;
    transform-origin: top center;
  }

  .hero-visual .window-shop {
    width: 340px;
    height: 270px;
    top: 116px;
    left: -28px;
    right: auto;
    z-index: 5;
    transform: scale(.58) rotate(-2deg) !important;
    transform-origin: top left;
  }

  .hero-visual .window-dashboard {
    width: 395px;
    height: 255px;
    top: 128px;
    right: -24px;
    left: auto;
    bottom: auto;
    z-index: 7;
    transform: scale(.62) rotate(1.4deg) !important;
    transform-origin: top right;
  }

  /* These two are useful in the desktop collage, but make the phone hero
     unnecessarily crowded. The mobile composition is clearer without them. */
  .hero-visual .window-contact,
  .hero-visual .mobile-window {
    display: none !important;
  }

  .hero-visual .site-window:hover {
    transform-origin: inherit;
  }

  .window-header {
    height: 26px;
  }

  .window-dots span {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 430px) {
  .header-shell {
    width: calc(100% - 18px);
  }

  .logo {
    font-size: 15px;
    letter-spacing: .065em;
  }

  .language-button,
  .theme-toggle {
    width: 36px;
    min-width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .main {
    padding-top: 40px;
  }

  .hero-visual {
    height: 300px;
  }

  .hero-visual .window-business {
    transform: translateX(-50%) scale(.61) rotate(-1deg) !important;
  }

  .hero-visual .window-shop {
    top: 105px;
    left: -30px;
    transform: scale(.53) rotate(-2deg) !important;
  }

  .hero-visual .window-dashboard {
    top: 118px;
    right: -27px;
    transform: scale(.56) rotate(1.4deg) !important;
  }
}

@media (max-width: 360px) {
  .logo {
    font-size: 14px;
  }

  .header-shell {
    width: calc(100% - 14px);
    gap: 5px;
  }

  .language-button,
  .theme-toggle {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .hero-visual {
    height: 280px;
  }

  .hero-visual .window-business {
    transform: translateX(-50%) scale(.56) rotate(-1deg) !important;
  }

  .hero-visual .window-shop {
    top: 98px;
    transform: scale(.48) rotate(-2deg) !important;
  }

  .hero-visual .window-dashboard {
    top: 108px;
    transform: scale(.51) rotate(1.4deg) !important;
  }
}

/* v2.14 mobile header hardening: client account CTA belongs in the portal, not phone navigation. */
@media (max-width: 720px) {
  .header .kp-account,
  .desktop-nav,
  .mobile-menu-toggle,
  .mobile-menu { display: none !important; }
}


/* =========================================================
   KAMERTON v2.14.2 — phone header cleanup + improved theme toggle
   Fixes: remove any residual phone nav, hard-center the theme icon,
   and give the light-theme sun a cleaner visual style.
   ========================================================= */
.theme-toggle {
  position: relative;
  isolation: isolate;
}

.theme-toggle .theme-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  inset: auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: opacity, transform;
  transition: opacity .24s ease, transform .38s cubic-bezier(.2,.85,.25,1), filter .24s ease;
}

.theme-toggle .theme-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.theme-toggle .theme-icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-4deg) scale(1);
}

.theme-toggle .theme-icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-65deg) scale(.56);
}

.theme-toggle .theme-icon-sun svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.theme-toggle .theme-icon-sun svg circle {
  fill: currentColor;
  stroke: none;
}

.theme-toggle .theme-icon-sun svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .98;
}

html[data-theme="dark"] .theme-toggle .theme-icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(18deg) scale(.6);
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--km-accent) 20%, transparent));
}

@media (max-width: 900px) {
  .header .desktop-nav,
  .header .mobile-menu-toggle,
  .header .mobile-site-nav,
  .header nav,
  .header .nav-contact {
    display: none !important;
  }

  .header-shell {
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  .header {
    height: 64px;
  }

  body {
    padding-top: 64px;
  }

  html {
    scroll-padding-top: 68px;
  }

  .header-shell {
    width: calc(100% - 22px);
    min-height: 64px;
    gap: 8px;
    align-items: center;
  }

  .logo {
    font-size: 16px;
    white-space: nowrap;
  }

  .header-actions {
    gap: 8px;
  }

  .language-button,
  .theme-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .theme-toggle {
    border-color: color-mix(in srgb, var(--km-accent) 54%, var(--theme-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 96%, white 4%), color-mix(in srgb, var(--theme-card) 88%, var(--theme-soft)));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--theme-card-shadow) 55%, transparent);
  }

  .theme-toggle:hover,
  .theme-toggle:active {
    transform: none;
  }

  html[data-theme="dark"] .theme-toggle {
    background: linear-gradient(180deg, color-mix(in srgb, var(--theme-card) 88%, rgba(255,255,255,.08)), color-mix(in srgb, var(--theme-card) 96%, rgba(0,0,0,.08)));
  }

  html:not([data-theme="dark"]) .theme-toggle {
    color: #d95a90;
  }

  .theme-toggle .theme-icon-moon svg {
    width: 20px;
    height: 20px;
  }

  .theme-toggle .theme-icon-sun svg {
    width: 19px;
    height: 19px;
  }
}

@media (max-width: 430px) {
  .header-shell {
    width: calc(100% - 18px);
    gap: 7px;
  }

  .logo {
    font-size: 15px;
  }

  .language-button,
  .theme-toggle {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 12px;
  }
}


/* KAMERTON v2.14.3 — stable portfolio screenshots instead of blocked iframes. */
.portfolio-featured-snapshot {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  background: var(--theme-mock-bg);
}

.portfolio-rail-thumb-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}


/* =========================================================
   KAMERTON v2.14.5 — header polish + blog redesign support
   - hard-centers the theme icon on desktop/mobile
   - removes the old language chevron
   ========================================================= */
.theme-toggle,
.article-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.theme-toggle .theme-icon,
.article-theme .theme-icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  inset: auto !important;
  width: 20px;
  height: 20px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

.theme-toggle .theme-icon svg,
.article-theme .theme-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.theme-toggle .theme-icon-moon,
.article-theme .theme-icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-4deg) scale(1);
}

.theme-toggle .theme-icon-sun,
.article-theme .theme-icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-65deg) scale(.56);
}

html[data-theme="dark"] .theme-toggle .theme-icon-moon,
html[data-theme="dark"] .article-theme .theme-icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(18deg) scale(.6);
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun,
html[data-theme="dark"] .article-theme .theme-icon-sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

.language-chevron,
.article-lang-button i {
  display: none !important;
}

.language-button,
.article-lang-button {
  gap: 8px;
}

.language-button {
  min-width: 74px;
  padding: 0 12px;
}

@media (max-width: 430px) {
  .language-button {
    min-width: 44px;
    width: 44px;
    padding: 0;
    justify-content: center;
  }
}


/* =========================================================
   KAMERTON v2.14.6 — unified theme/language controls
   Authoritative final rules. Keep these at the end of the file.
   ========================================================= */
.theme-toggle {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  position: relative;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--theme-border);
  border-radius: 13px;
  background: var(--theme-card);
  color: var(--theme-text);
  box-shadow: none;
}
.theme-toggle .theme-icon {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none;
  transform-origin: center center;
  transition: opacity .24s ease, transform .32s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle .theme-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
}
.theme-toggle .theme-icon-moon svg { width: 21px; height: 21px; }
.theme-toggle .theme-icon-sun svg { width: 19px; height: 19px; }
.theme-toggle .theme-icon-moon {
  opacity: 1;
  transform: rotate(-4deg) scale(1);
}
.theme-toggle .theme-icon-sun {
  opacity: 0;
  transform: rotate(-55deg) scale(.58);
}
html[data-theme="dark"] .theme-toggle .theme-icon-moon {
  opacity: 0;
  transform: rotate(16deg) scale(.58);
}
html[data-theme="dark"] .theme-toggle .theme-icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.theme-toggle .theme-icon-sun svg circle { fill: currentColor; stroke: none; }
.theme-toggle .theme-icon-sun svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle:hover {
  transform: none;
  color: var(--theme-text);
  border-color: color-mix(in srgb,var(--theme-border) 55%,var(--theme-text));
}
.theme-toggle:active { transform: scale(.97); }
.language-chevron { display:none !important; }
.language-button {
  min-width: 74px;
  padding: 0 12px;
  justify-content: center;
  gap: 8px;
}
@media (max-width:720px) {
  .theme-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 12px;
    border-color: var(--theme-border);
    background: var(--theme-card);
    box-shadow: none;
  }
  .theme-toggle:hover,.theme-toggle:active { transform:none; }
}
@media (max-width:430px) {
  .language-button { min-width:44px;width:44px;padding:0; }
  .theme-toggle { width:38px;min-width:38px;height:38px; }
}


/* =========================================================
   KAMERTON v2.14.9 — mobile hero collage centering
   Keep the layered browser mockups centered on the phone viewport.
   ========================================================= */
@media (max-width: 720px) {
  .hero-visual {
    width: min(100%, 430px);
    margin-inline: auto !important;
    left: auto !important;
    right: auto !important;
  }

  .hero-visual .window-business,
  .hero-visual .window-shop,
  .hero-visual .window-dashboard {
    left: 50% !important;
    right: auto !important;
    transform-origin: top center !important;
  }

  .hero-visual .window-business {
    transform: translateX(-50%) scale(.68) rotate(-1deg) !important;
  }

  .hero-visual .window-shop {
    transform: translateX(calc(-50% - 34px)) scale(.58) rotate(-2deg) !important;
  }

  .hero-visual .window-dashboard {
    transform: translateX(calc(-50% + 34px)) scale(.62) rotate(1.4deg) !important;
  }
}

@media (max-width: 430px) {
  .hero-visual .window-business {
    transform: translateX(-50%) scale(.61) rotate(-1deg) !important;
  }

  .hero-visual .window-shop {
    transform: translateX(calc(-50% - 26px)) scale(.53) rotate(-2deg) !important;
  }

  .hero-visual .window-dashboard {
    transform: translateX(calc(-50% + 26px)) scale(.56) rotate(1.4deg) !important;
  }
}

@media (max-width: 360px) {
  .hero-visual .window-business {
    transform: translateX(-50%) scale(.56) rotate(-1deg) !important;
  }

  .hero-visual .window-shop {
    transform: translateX(calc(-50% - 20px)) scale(.48) rotate(-2deg) !important;
  }

  .hero-visual .window-dashboard {
    transform: translateX(calc(-50% + 20px)) scale(.51) rotate(1.4deg) !important;
  }
}

/* =========================================================
   KAMERTON v2.15.0 — exact mobile hero centering
   Phone-only fix. Each scaled mockup is positioned from its
   rendered width so its geometric center matches the hero center.
   No translateX tricks, no horizontal offsets, no phone rotation.
   Desktop/tablet layouts above 720px are untouched.
   ========================================================= */
@media (max-width: 720px) {
  .hero-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    overflow: visible !important;
  }

  .hero-visual .window-business,
  .hero-visual .window-shop,
  .hero-visual .window-dashboard {
    right: auto !important;
    transform-origin: top left !important;
  }

  /* 450 × .68 = 306px rendered width */
  .hero-visual .window-business {
    left: calc(50% - 153px) !important;
    transform: scale(.68) !important;
  }

  /* 340 × .58 = 197.2px rendered width */
  .hero-visual .window-shop {
    left: calc(50% - 98.6px) !important;
    transform: scale(.58) !important;
  }

  /* 395 × .62 = 244.9px rendered width */
  .hero-visual .window-dashboard {
    left: calc(50% - 122.45px) !important;
    transform: scale(.62) !important;
  }
}

@media (max-width: 430px) {
  /* 450 × .61 = 274.5px */
  .hero-visual .window-business {
    left: calc(50% - 137.25px) !important;
    transform: scale(.61) !important;
  }

  /* 340 × .53 = 180.2px */
  .hero-visual .window-shop {
    left: calc(50% - 90.1px) !important;
    transform: scale(.53) !important;
  }

  /* 395 × .56 = 221.2px */
  .hero-visual .window-dashboard {
    left: calc(50% - 110.6px) !important;
    transform: scale(.56) !important;
  }
}

@media (max-width: 360px) {
  /* 450 × .56 = 252px */
  .hero-visual .window-business {
    left: calc(50% - 126px) !important;
    transform: scale(.56) !important;
  }

  /* 340 × .48 = 163.2px */
  .hero-visual .window-shop {
    left: calc(50% - 81.6px) !important;
    transform: scale(.48) !important;
  }

  /* 395 × .51 = 201.45px */
  .hero-visual .window-dashboard {
    left: calc(50% - 100.725px) !important;
    transform: scale(.51) !important;
  }
}


/* =========================================================
   KAMERTON v2.15.1 — mobile portfolio switching + RYVIA case CTA
   ========================================================= */
.portfolio-project-cta-secondary {
  background: transparent !important;
  color: var(--theme-text) !important;
  border: 1px solid color-mix(in srgb, var(--theme-text) 18%, var(--theme-border)) !important;
  border-bottom-color: color-mix(in srgb, var(--theme-text) 18%, var(--theme-border)) !important;
  box-shadow: none !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .01em;
  opacity: 1 !important;
}

.portfolio-project-cta-secondary:hover,
.portfolio-project-cta-secondary:focus-visible {
  background: color-mix(in srgb, var(--km-accent) 9%, transparent) !important;
  color: var(--km-accent) !important;
  border-color: color-mix(in srgb, var(--km-accent) 52%, var(--theme-border)) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--km-accent) 12%, transparent) !important;
}

@media (max-width: 620px) {
  .portfolio-project-actions {
    gap: 8px;
    padding-right: 10px;
  }

  .portfolio-project-actions .portfolio-project-cta {
    margin-right: 0;
  }

  .portfolio-project-cta-secondary {
    min-height: 34px;
  }
}


/* =========================================================
   KAMERTON v2.15.2 — brute-force phone hero centering
   The previous mobile collage accumulated too many conflicting offsets.
   For phones we hard-center all three mockup cards on the same X axis.
   ========================================================= */
@media (max-width: 720px) {
  .hero-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 420px !important;
    height: 340px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    left: 0 !important;
    right: 0 !important;
  }

  .hero-visual .window-business,
  .hero-visual .window-shop,
  .hero-visual .window-dashboard {
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-visual .window-business {
    top: 2px !important;
    transform: translateX(-50%) scale(.64) rotate(-1deg) !important;
    transform-origin: top center !important;
    z-index: 3 !important;
  }

  .hero-visual .window-shop {
    top: 112px !important;
    transform: translateX(-50%) scale(.50) rotate(-2deg) !important;
    transform-origin: top center !important;
    z-index: 5 !important;
  }

  .hero-visual .window-dashboard {
    top: 140px !important;
    transform: translateX(-50%) scale(.54) rotate(1deg) !important;
    transform-origin: top center !important;
    z-index: 7 !important;
  }
}

@media (max-width: 430px) {
  .hero-visual {
    max-width: 390px !important;
    height: 318px !important;
  }

  .hero-visual .window-business {
    top: 0 !important;
    transform: translateX(-50%) scale(.58) rotate(-1deg) !important;
  }

  .hero-visual .window-shop {
    top: 104px !important;
    transform: translateX(-50%) scale(.46) rotate(-2deg) !important;
  }

  .hero-visual .window-dashboard {
    top: 132px !important;
    transform: translateX(-50%) scale(.50) rotate(1deg) !important;
  }
}

@media (max-width: 360px) {
  .hero-visual {
    max-width: 340px !important;
    height: 290px !important;
  }

  .hero-visual .window-business {
    transform: translateX(-50%) scale(.54) rotate(-1deg) !important;
  }

  .hero-visual .window-shop {
    top: 98px !important;
    transform: translateX(-50%) scale(.42) rotate(-2deg) !important;
  }

  .hero-visual .window-dashboard {
    top: 122px !important;
    transform: translateX(-50%) scale(.46) rotate(1deg) !important;
  }
}


/* =========================================================
   KAMERTON v2.15.3 — definitive mobile hero root-cause fix
   Old max-width:720px CSS left the independent `translate`
   longhand at -50% even after later transform/margin overrides.
   That shifted the entire hero-visual container half its width left.
   ========================================================= */
@media (max-width: 720px) {
  .hero-visual {
    translate: none !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
  }
}


/* =========================================================
   KAMERTON v2.15.4 — four-card mobile hero composition
   ========================================================= */
@media (max-width: 720px) {
  .hero-visual {
    position: relative !important;
    width: 100% !important;
    max-width: 430px !important;
    height: 470px !important;
    margin-inline: auto !important;
    overflow: visible !important;
    translate: none !important;
    transform: none !important;
  }

  .hero-visual .mobile-window { display: none !important; }

  .hero-visual .window-business,
  .hero-visual .window-shop,
  .hero-visual .window-dashboard,
  .hero-visual .window-contact {
    display: block !important;
    bottom: auto !important;
    margin: 0 !important;
    transform-origin: top center !important;
  }

  /* Main card — centered high, acts as the visual anchor. */
  .hero-visual .window-business {
    width: 450px !important;
    height: 305px !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) scale(.58) rotate(-.8deg) !important;
    z-index: 4 !important;
  }

  /* Shop card — left side. */
  .hero-visual .window-shop {
    width: 340px !important;
    height: 270px !important;
    top: 172px !important;
    left: 8px !important;
    right: auto !important;
    transform: scale(.46) rotate(-3.3deg) !important;
    transform-origin: top left !important;
    z-index: 6 !important;
  }

  /* Contact card — right side. */
  .hero-visual .window-contact {
    width: 310px !important;
    height: 235px !important;
    top: 176px !important;
    left: auto !important;
    right: 8px !important;
    transform: scale(.49) rotate(3deg) !important;
    transform-origin: top right !important;
    z-index: 5 !important;
  }

  /* Dashboard — centered below both side cards. */
  .hero-visual .window-dashboard {
    width: 395px !important;
    height: 255px !important;
    top: 310px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) scale(.50) rotate(.7deg) !important;
    z-index: 8 !important;
  }
}

@media (max-width: 430px) {
  .hero-visual { max-width: 390px !important; height: 455px !important; }
  .hero-visual .window-business { transform: translateX(-50%) scale(.54) rotate(-.8deg) !important; }
  .hero-visual .window-shop { top: 162px !important; left: 4px !important; transform: scale(.43) rotate(-3.3deg) !important; }
  .hero-visual .window-contact { top: 166px !important; right: 4px !important; transform: scale(.46) rotate(3deg) !important; }
  .hero-visual .window-dashboard { top: 294px !important; transform: translateX(-50%) scale(.47) rotate(.7deg) !important; }
}

@media (max-width: 360px) {
  .hero-visual { max-width: 340px !important; height: 420px !important; }
  .hero-visual .window-business { transform: translateX(-50%) scale(.48) rotate(-.8deg) !important; }
  .hero-visual .window-shop { top: 147px !important; left: 0 !important; transform: scale(.39) rotate(-3.3deg) !important; }
  .hero-visual .window-contact { top: 151px !important; right: 0 !important; transform: scale(.41) rotate(3deg) !important; }
  .hero-visual .window-dashboard { top: 270px !important; transform: translateX(-50%) scale(.42) rotate(.7deg) !important; }
}


/* =========================================================
   KAMERTON v2.15.9 — isolated production wordmark
   Never inherits the legacy .logo/image rules.
   ========================================================= */
.km-brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  min-width: 0;
  padding: 0;
  margin: 0;
  text-decoration: none;
  line-height: 0;
  overflow: visible;
}
.km-brand > img {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 42px !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: left center;
}
.km-brand--header { margin-right: 0; }
.km-brand--footer > img { height: 36px !important; max-height: 36px !important; }
@media (max-width: 720px) {
  .km-brand--header { margin-right: auto; }
  .km-brand--header > img { height: 34px !important; max-height: 34px !important; }
  .km-brand--footer > img { height: 32px !important; max-height: 32px !important; }
}
@media (max-width: 430px) {
  .km-brand--header > img { height: 31px !important; max-height: 31px !important; }
}


/* =========================================================
   KAMERTON v2.15.10 — header logo only
   The visible logo fills the header height exactly.
   ========================================================= */
.header .km-brand--header {
  align-self: stretch !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: stretch !important;
}
.header .km-brand--header > img {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 720px) {
  .header .km-brand--header {
    height: 100% !important;
    max-height: 100% !important;
  }
  .header .km-brand--header > img {
    height: 100% !important;
    max-height: 100% !important;
  }
}

html:not([data-theme="dark"]) .header .km-brand--header > img {
  filter:
    drop-shadow(0.65px 0 0 rgba(15, 23, 42, 0.55))
    drop-shadow(-0.65px 0 0 rgba(15, 23, 42, 0.55))
    drop-shadow(0 0.65px 0 rgba(15, 23, 42, 0.55))
    drop-shadow(0 -0.65px 0 rgba(15, 23, 42, 0.55));
}

html[data-theme="dark"] .header .km-brand--header > img {
  filter: none;
}

/* =========================================
   KAMERTON SOCIAL DOCK
========================================= */
#footer .footer-social-bar {
    width: calc(100% - 120px);
    max-width: 1320px;
    margin: 38px auto 0;
    padding: 18px 20px 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border: 1px solid rgba(227, 99, 151, 0.22);
    border-radius: 20px;
    background:
      radial-gradient(circle at 12% 0%, rgba(227, 99, 151, 0.12), transparent 36%),
      linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.footer-social-copy {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.footer-social-kicker {
    color: #E36397;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
}

.footer-social-title {
    color: #d8e0ec;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
}

.footer-social-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.footer-social-link {
    position: relative;
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 15px;
    background: rgba(255,255,255,0.035);
    color: #eef3fa !important;
    text-decoration: none;
    transform: translateY(0);
    transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease, color .24s ease;
}

.footer-social-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(227,99,151,.32), transparent 62%);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .24s ease, transform .24s ease;
}

.footer-social-link svg {
    position: relative;
    z-index: 1;
    width: 21px;
    height: 21px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.7;
}

.footer-social-link--instagram svg {
    fill: none;
}
.footer-social-link--instagram .social-dot {
    fill: currentColor;
    stroke: none;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
    color: #ffffff !important;
    transform: translateY(-4px);
    border-color: rgba(227,99,151,.58);
    background: rgba(227,99,151,.10);
    box-shadow: 0 12px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(227,99,151,.08);
    outline: none;
}

.footer-social-link:hover::before,
.footer-social-link:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

#footer .footer-social-bar + .footer-bottom {
    margin-top: 22px;
}

@media (max-width: 700px) {
    #footer .footer-social-bar {
        width: calc(100% - 48px);
        margin-top: 32px;
        padding: 18px;
        align-items: flex-start;
        border-radius: 18px;
    }
    .footer-social-copy {
        flex-direction: column;
        gap: 4px;
        padding-top: 3px;
    }
    .footer-social-title {
        font-size: 14px;
    }
    .footer-social-links {
        gap: 8px;
    }
    .footer-social-link {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }
}

@media (max-width: 430px) {
    #footer .footer-social-bar {
        flex-direction: column;
        gap: 16px;
    }
    .footer-social-links {
        width: 100%;
    }
    .footer-social-link {
        flex: 1 1 0;
        width: auto;
    }
}

/* KAMERTON BORDERLINE portfolio preview */
.portfolio-showcase-mode.is-wip {
    color: #9b741d;
    background: rgba(210,168,74,.10);
    border: 1px solid rgba(210,168,74,.24);
}
.portfolio-rail-thumb-game {
    display: block;
    background: #0b0b0d;
    border-color: #565860;
}
.portfolio-rail-thumb-game::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.035) 6px);
    pointer-events: none;
}
.rail-game-logo {
    position: absolute;
    z-index: 3;
    top: 8px;
    left: 8px;
    color: #d9d9dc;
    font: 800 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .08em;
}
.rail-game-grid {
    position: absolute;
    inset: 22px 8px 7px;
    border: 1px solid #484a50;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size: 9px 9px;
}
.rail-game-node {
    position: absolute;
    z-index: 2;
    width: 5px;
    height: 5px;
    border: 1px solid #cfd0d3;
    box-shadow: 0 0 0 2px rgba(207,208,211,.12);
}
.rail-game-node-a { right: 21px; top: 31px; }
.rail-game-node-b { left: 36px; bottom: 12px; }
.rail-game-player {
    position: absolute;
    z-index: 3;
    right: 43px;
    bottom: 13px;
    width: 9px;
    height: 9px;
    background: #dedee0;
}
.portfolio-featured-game {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 38px 44px 52px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 22px;
    background: linear-gradient(180deg,#09090b 0 78%,#111d2c 78% 100%);
    color: #d9d9dc;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.game-preview-scan {
    position: absolute;
    inset: 0;
    opacity: .16;
    background: repeating-linear-gradient(180deg,transparent 0 4px,rgba(255,255,255,.06) 5px,transparent 6px);
    pointer-events: none;
}
.game-preview-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #aeb0b4;
}
.game-preview-top strong {
    padding: 8px 10px;
    color: #0a0a0b;
    background: #d8d8da;
    font: 900 clamp(13px,1.3vw,19px)/1 system-ui,sans-serif;
    letter-spacing: .04em;
}
.game-preview-top small { color: #96989e; font: 700 9px/1 ui-monospace,monospace; letter-spacing: .13em; }
.game-preview-stage {
    position: relative;
    min-height: 0;
    border: 2px solid #aeb0b4;
    background: #08090b;
    box-shadow: 8px 8px 0 rgba(69,71,78,.34);
}
.game-preview-grid {
    position: absolute;
    inset: 14px;
    border: 1px solid #3f4147;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size: 20px 20px;
}
.game-preview-stage::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    height: 26%;
    background: #111c2a;
    border-top: 1px solid #2d3746;
}
.game-preview-node {
    position: absolute;
    z-index: 3;
    width: 15px;
    height: 15px;
    border: 2px solid #d5d5d7;
    box-shadow: 0 0 0 5px rgba(213,213,215,.08);
}
.game-preview-node.node-a { left: 18%; top: 30%; }
.game-preview-node.node-b { right: 22%; top: 22%; }
.game-preview-node.node-c { right: 34%; bottom: 27%; }
.game-preview-player {
    position: absolute;
    z-index: 4;
    left: 46%;
    bottom: 20%;
    width: 28px;
    height: 28px;
    background: #dadadd;
}
.game-preview-player i {
    position: absolute;
    top: 8px;
    width: 4px;
    height: 4px;
    background: #0a0a0b;
}
.game-preview-player i:first-child { left: 7px; }
.game-preview-player i:last-child { right: 7px; }
.game-preview-copy {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}
.game-preview-copy b { font: 800 clamp(15px,1.6vw,24px)/1.1 system-ui,sans-serif; }
.game-preview-copy span { color: #8f9197; font: 700 9px/1.3 ui-monospace,monospace; letter-spacing: .08em; text-align: right; }
@media (max-width: 620px) {
    .portfolio-featured-game { padding: 24px 18px 48px; gap: 14px; }
    .game-preview-top small { display: none; }
    .game-preview-copy { display: grid; }
    .game-preview-copy b { font-size: 14px; }
    .game-preview-copy span { font-size: 7px; text-align: left; }
    .game-preview-player { width: 20px; height: 20px; }
    .game-preview-player i { top: 6px; width: 3px; height: 3px; }
    .game-preview-player i:first-child { left: 5px; }
    .game-preview-player i:last-child { right: 5px; }
}

/* BORDERLINE long rail logo */
.rail-game-logo{font-size:clamp(7px,.62vw,10px)!important;letter-spacing:.02em!important}