:root {
    --cp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cp-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --cp-yellow: #FFD700;
    --cp-yellow-dark: #D9AA14;
    --cp-ink: #0A0A0A;
    --cp-panel: rgba(255, 255, 255, 0.88);
    --cp-border: rgba(10, 10, 10, 0.08);
    --cp-shadow-soft: 0 18px 55px rgba(10, 10, 10, 0.09);
    --cp-shadow-lift: 0 30px 80px rgba(10, 10, 10, 0.14);
    --cp-parallax: 0px;
}

html {
    scroll-behavior: smooth;
}

header,
.service-page nav {
    transition: background-color 0.26s var(--cp-ease), border-color 0.26s var(--cp-ease), box-shadow 0.26s var(--cp-ease);
}

body {
    background:
        linear-gradient(180deg, #FBFAF6 0%, #F6F5F0 42%, #FFFFFF 100%);
}

body::selection {
    background: var(--cp-yellow);
    color: var(--cp-ink);
}

body:not(.service-page) .bg-layer.active {
    opacity: 0.27;
    transform: none;
    transition: opacity 1.8s ease-in-out;
}

body:not(.service-page) .bg-overlay {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.86) 0%, rgba(248, 247, 241, 0.74) 48%, rgba(255, 255, 255, 0.9) 100%);
}

body:not(.service-page) .bg-overlay::before {
    background-image:
        linear-gradient(90deg, rgba(255, 215, 0, 0.06) 0 1px, transparent 1px),
        linear-gradient(0deg, rgba(10, 10, 10, 0.025) 0 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 85%);
    opacity: 0.7;
}

.service-page nav {
    border-bottom-color: rgba(10, 10, 10, 0.075);
    box-shadow: 0 14px 45px rgba(10, 10, 10, 0.07);
}

.service-page nav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.78), transparent);
    opacity: 0.65;
    pointer-events: none;
}

body:not(.service-page) nav,
.service-page .nav-container {
    isolation: isolate;
}

body:not(.service-page) nav {
    padding: 1.8rem 6rem 1.8rem 3rem;
    gap: 4rem;
}

body:not(.service-page) .logo-container {
    margin-left: 1.5rem;
}

body:not(.service-page) .logo-image {
    height: 70px;
    filter: none;
}

body:not(.service-page) .nav-links {
    gap: 4rem;
    margin-right: 2rem;
}

body:not(.service-page) .header-right {
    gap: 1.5rem;
    flex-shrink: 1;
}

body:not(.service-page) .header-phone {
    font-size: 1.1rem;
}

body:not(.service-page) .nav-links a,
.service-page .nav-links a,
.service-page .back-link,
.service-page .header-phone,
.header-phone,
.lang-current {
    transition: color 0.28s var(--cp-ease), border-color 0.28s var(--cp-ease), background-color 0.28s var(--cp-ease), box-shadow 0.28s var(--cp-ease);
}

body:not(.service-page) .nav-links a,
.service-page .nav-links a {
    transform: translateZ(0);
    will-change: color;
}

body:not(.service-page) .nav-links a::after,
.service-page .nav-links a::after {
    left: 0;
    right: 0;
    width: 100%;
    transform: scaleX(0) translateZ(0);
    transform-origin: center;
    transition: transform 0.32s var(--cp-ease);
}

body:not(.service-page) .nav-links a:hover,
.service-page .nav-links a:hover {
    transform: translateZ(0);
}

body:not(.service-page) .nav-links a:hover::after,
.service-page .nav-links a:hover::after {
    width: 100%;
    transform: scaleX(1) translateZ(0);
}

.logo-image,
.service-logo img {
    filter: drop-shadow(0 5px 16px rgba(10, 10, 10, 0.08));
}

body:not(.service-page) .hero {
    isolation: isolate;
    min-height: 100svh;
    padding-top: clamp(8.8rem, 11vh, 10.5rem);
    padding-bottom: clamp(3rem, 7vh, 5.5rem);
}

body:not(.service-page) .hero::before {
    content: "";
    position: absolute;
    inset: clamp(6.2rem, 8vh, 7.2rem) clamp(2rem, 3.5vw, 4rem) clamp(2rem, 4.5vh, 3.2rem);
    border: 1px solid rgba(255, 215, 0, 0.16);
    border-radius: 28px;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 42%),
        linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.22) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    opacity: 0.72;
    pointer-events: none;
    z-index: -1;
}

.hero h2.hero-main-title,
.section-title,
.service-page .hero.service-hero h1,
.service-page .section h2,
.service-hero-card h2 {
    letter-spacing: 0;
    text-wrap: balance;
}

.hero h2.hero-main-title .highlight,
.service-page .hero.service-hero .highlight {
    text-shadow: 0 10px 36px rgba(255, 215, 0, 0.2);
}

.hero-description,
.section-description,
.service-lead {
    text-wrap: pretty;
}

.hero-showcase {
    perspective: 1200px;
    height: clamp(420px, 55vh, 560px);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.showcase-card-hero {
    border: 1px solid rgba(255, 255, 255, 0.52);
    box-shadow: 0 24px 70px rgba(10, 10, 10, 0.16);
    transform: translateZ(0);
    transition: transform 0.36s var(--cp-ease), box-shadow 0.36s var(--cp-ease), border-color 0.36s var(--cp-ease);
    min-height: 0;
    height: auto !important;
    will-change: transform;
}

.showcase-card-hero:first-child {
    grid-row: 1 / span 2;
    grid-column: 1;
}

.showcase-card-hero:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
}

.showcase-card-hero:nth-child(3) {
    grid-row: 2;
    grid-column: 2;
}

.showcase-image-hero {
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.58s var(--cp-ease);
}

.showcase-overlay-hero {
    z-index: 3;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.84) 100%);
    transition: opacity 0.28s var(--cp-ease), transform 0.34s var(--cp-ease);
}

.showcase-card-hero:hover {
    z-index: 5;
    transform: translate3d(0, -6px, 0) scale(1.035);
    border-color: rgba(255, 215, 0, 0.42);
    box-shadow: 0 30px 80px rgba(10, 10, 10, 0.2);
}

.showcase-card-hero:hover .showcase-image-hero {
    transform: scale(1.065);
}

.showcase-card-hero:hover .showcase-overlay-hero {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.showcase-card-hero::before,
.product-card::before,
.review-card::after,
.service-page .section::before,
.service-hero-card::before,
.contact-form::before,
.config-builder::before,
.estimate-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--cp-spot-x, 50%) var(--cp-spot-y, 0%), rgba(255, 215, 0, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 48%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s var(--cp-ease);
    z-index: 1;
}

.showcase-card-hero:hover::before,
.product-card:hover::before,
.review-card:hover::after,
.service-page .section:hover::before,
.service-hero-card:hover::before,
.contact-form:hover::before,
.config-builder:hover::before,
.estimate-inner:hover::before {
    opacity: 1;
}

.showcase-card-hero > *,
.product-card > *,
.review-card > *,
.service-page .section > *,
.service-hero-card > *,
.contact-form > *,
.config-builder > *,
.estimate-inner > * {
    position: relative;
    z-index: 2;
}

.showcase-card-hero .showcase-overlay-hero {
    position: absolute;
    inset: auto 0 0;
    padding: 1.5rem;
    z-index: 4;
}

.showcase-card-hero:nth-child(1) {
    animation: none;
}

.showcase-card-hero:nth-child(2) {
    animation: none;
}

.showcase-card-hero:nth-child(3) {
    animation: none;
}

@keyframes cp-float {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -7px, 0);
    }
}

.btn,
.service-button,
.cta-button,
.btn-config,
.estimate-grid a,
.reviews-section a {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
}

.btn::before,
.service-button::before,
.cta-button::before,
.btn-config::before,
.estimate-grid a::before,
.reviews-section a::before {
    content: "";
    position: absolute;
    inset: -1px auto -1px -35%;
    width: 32%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.52), transparent);
    transform: skewX(-18deg) translateX(-120%);
    transition: transform 0.68s var(--cp-ease);
    pointer-events: none;
    z-index: -1;
}

.btn:hover::before,
.service-button:hover::before,
.cta-button:hover::before,
.btn-config:hover::before,
.estimate-grid a:hover::before,
.reviews-section a:hover::before {
    transform: skewX(-18deg) translateX(430%);
}

.btn-primary,
.service-button.primary,
.cta-button,
.btn-config-primary,
.estimate-grid a,
.reviews-section a {
    box-shadow: 0 16px 38px rgba(255, 215, 0, 0.24);
}

.btn-primary:hover,
.service-button.primary:hover,
.cta-button:hover,
.btn-config-primary:hover,
.estimate-grid a:hover,
.reviews-section a:hover {
    box-shadow: 0 22px 58px rgba(255, 215, 0, 0.34);
}

.service-card,
.product-card,
.review-card,
.contact-form,
.config-builder,
.estimate-inner,
.service-page .section,
.service-hero-card,
.service-page .feature-card,
.service-page .highlight-box {
    position: relative;
    overflow: hidden;
    border-color: rgba(10, 10, 10, 0.075);
    box-shadow: var(--cp-shadow-soft);
    transform: translateZ(0);
    transition: transform 0.34s var(--cp-ease), box-shadow 0.34s var(--cp-ease), border-color 0.34s var(--cp-ease), background 0.34s var(--cp-ease);
}

.service-card:hover,
.product-card:hover,
.review-card:hover,
.contact-form:hover,
.config-builder:hover,
.estimate-inner:hover,
.service-page .section:hover,
.service-hero-card:hover,
.service-page .feature-card:hover,
.service-page .highlight-box:hover {
    border-color: rgba(255, 215, 0, 0.28);
    box-shadow: var(--cp-shadow-lift);
}

.service-card:hover,
.product-card:hover,
.review-card:hover,
.service-page .feature-card:hover {
    transform: translate3d(0, -7px, 0);
}

.service-icon,
.contact-icon,
.config-option-icon,
.review-avatar {
    transition: transform 0.34s var(--cp-ease), box-shadow 0.34s var(--cp-ease);
}

.service-card:hover .service-icon,
.contact-item:hover .contact-icon,
.config-option:hover .config-option-icon,
.review-card:hover .review-avatar {
    transform: translateY(-2px) scale(1.04);
}

.portfolio-item,
.product-image,
.showcase-image-hero {
    will-change: transform;
}

.portfolio-item::after,
.product-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.16), transparent 40%, rgba(255, 255, 255, 0.1));
    opacity: 0;
    transition: opacity 0.28s var(--cp-ease);
    pointer-events: none;
}

.portfolio-item:hover::after,
.product-card:hover .product-image::after {
    opacity: 1;
}

.product-image {
    position: relative;
    overflow: hidden;
    transition: transform 0.5s var(--cp-ease);
}

.product-card:hover .product-image {
    transform: scale(1.035);
}

.config-tab,
.config-option,
.faq-item,
.contact-item {
    transition: transform 0.3s var(--cp-ease), box-shadow 0.3s var(--cp-ease), border-color 0.3s var(--cp-ease), background 0.3s var(--cp-ease);
}

.config-tab:hover,
.config-option:hover,
.faq-item:hover,
.contact-item:hover {
    transform: translate3d(0, -4px, 0);
}

.form-group input,
.form-group textarea {
    background: rgba(255, 255, 255, 0.84);
}

.form-group input:focus,
.form-group textarea:focus {
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.14), 0 14px 32px rgba(10, 10, 10, 0.06);
}

.floating-messengers {
    filter: drop-shadow(0 16px 28px rgba(10, 10, 10, 0.18));
}

.messenger-icon {
    animation-duration: 4.5s;
}

.service-page {
    background:
        linear-gradient(180deg, #F8F7F1 0%, #FFFFFF 50%, #F6F5F0 100%);
}

.service-page .hero.service-hero {
    background-position: center calc(50% + var(--cp-parallax));
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.service-page .hero.service-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 215, 0, 0.09), transparent 26%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.28));
    pointer-events: none;
}

.service-hero-inner {
    transform: translateZ(0);
}

.service-hero-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
        rgba(20, 17, 13, 0.52);
}

.service-page .section {
    position: relative;
    overflow: hidden;
}

.service-page .content {
    filter: drop-shadow(0 16px 40px rgba(10, 10, 10, 0.04));
}

[data-cp-reveal] {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    filter: blur(7px);
    transition:
        opacity 0.75s var(--cp-ease),
        transform 0.75s var(--cp-ease),
        filter 0.75s var(--cp-ease);
    transition-delay: var(--cp-reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

[data-cp-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    will-change: auto;
}

.cp-ready .hero-text,
.cp-ready .hero-visual,
.cp-ready .service-eyebrow,
.cp-ready .service-page .hero.service-hero h1,
.cp-ready .service-lead,
.cp-ready .service-hero-actions,
.cp-ready .service-hero-card {
    animation-fill-mode: both;
}

.cp-ready .hero-text {
    animation: cp-hero-in 0.9s var(--cp-ease) 0.05s both;
}

.cp-ready .hero-visual {
    animation: cp-hero-in 1s var(--cp-ease) 0.18s both;
}

.cp-ready .service-eyebrow {
    animation: cp-hero-in 0.7s var(--cp-ease) 0.05s both;
}

.cp-ready .service-page .hero.service-hero h1 {
    animation: cp-hero-in 0.86s var(--cp-ease) 0.14s both;
}

.cp-ready .service-lead {
    animation: cp-hero-in 0.86s var(--cp-ease) 0.22s both;
}

.cp-ready .service-hero-actions {
    animation: cp-hero-in 0.86s var(--cp-ease) 0.3s both;
}

.cp-ready .service-hero-card {
    animation: cp-card-in 0.9s var(--cp-ease) 0.25s both;
}

@keyframes cp-hero-in {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes cp-card-in {
    from {
        opacity: 0;
        transform: translate3d(0, 36px, 0) scale(0.98);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@media (max-width: 820px) {
    html {
        scroll-behavior: auto;
    }

    body:not(.service-page) .bg-container {
        display: none !important;
    }

    body:not(.service-page) .bg-layer {
        background-image: none !important;
        opacity: 0 !important;
        transition: none !important;
        will-change: auto;
    }

    body:not(.service-page) header,
    .service-page nav {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 8px 22px rgba(10, 10, 10, 0.08) !important;
    }

    body:not(.service-page) nav::after {
        animation: none !important;
        opacity: 0.35;
    }

    .logo-image,
    .service-logo img,
    .floating-messengers,
    .service-page .content {
        filter: none !important;
    }

    .messenger-icon {
        animation: none !important;
    }

    [data-cp-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .cp-ready .hero-text,
    .cp-ready .hero-visual,
    .cp-ready .service-eyebrow,
    .cp-ready .service-page .hero.service-hero h1,
    .cp-ready .service-lead,
    .cp-ready .service-hero-actions,
    .cp-ready .service-hero-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .showcase-card-hero,
    .service-card,
    .product-card,
    .review-card,
    .contact-form,
    .config-builder,
    .estimate-inner,
    .service-page .section,
    .service-hero-card,
    .service-page .feature-card,
    .service-page .highlight-box {
        box-shadow: 0 10px 26px rgba(10, 10, 10, 0.08) !important;
        transition: border-color 0.2s var(--cp-ease), background-color 0.2s var(--cp-ease) !important;
        will-change: auto !important;
    }

    .showcase-card-hero::before,
    .service-card::after,
    .product-card::before,
    .review-card::after,
    .service-page .section::before,
    .service-hero-card::before,
    .contact-form::before,
    .config-builder::before,
    .estimate-inner::before,
    .portfolio-item::after,
    .product-card .product-image::after {
        display: none !important;
    }

    .service-card::after {
        background-image: none !important;
        opacity: 0 !important;
        filter: none !important;
    }

    .showcase-image-hero,
    .portfolio-item,
    .product-card {
        will-change: auto !important;
    }

    .service-hero-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.12);
    }

    body:not(.service-page) nav {
        padding: 0.9rem 1.2rem;
    }

    body:not(.service-page) .hero {
        padding-top: 6.4rem;
        padding-bottom: 2.4rem;
    }

    body:not(.service-page) .hero::before {
        inset: 5.5rem 0.8rem 1.4rem;
        border-radius: 18px;
    }

    body:not(.service-page) .nav-links {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.24s var(--cp-ease), transform 0.24s var(--cp-ease), visibility 0.24s var(--cp-ease);
    }

    body:not(.service-page) .nav-links.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    body:not(.service-page) .hero-showcase {
        perspective: none;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 180px);
    }

    .showcase-card-hero {
        animation: none !important;
    }

    .showcase-card-hero:first-child,
    .showcase-card-hero:nth-child(2),
    .showcase-card-hero:nth-child(3) {
        grid-column: 1;
    }

    .showcase-card-hero:first-child {
        grid-row: 1;
    }

    .showcase-card-hero:nth-child(2) {
        grid-row: 2;
    }

    .showcase-card-hero:nth-child(3) {
        grid-row: 3;
    }

    .service-card:hover,
    .product-card:hover,
    .review-card:hover,
    .service-page .feature-card:hover,
    .config-tab:hover,
    .config-option:hover,
    .faq-item:hover,
    .contact-item:hover {
        transform: none;
    }
}

@media (min-width: 821px) and (max-width: 1500px) {
    body:not(.service-page) nav {
        padding: 1.3rem 2.4rem;
        gap: 2.2rem;
    }

    body:not(.service-page) .logo-container {
        margin-left: 0;
    }

    body:not(.service-page) .logo-image {
        height: 64px;
    }

    body:not(.service-page) .nav-links {
        gap: 2.4rem;
        margin-right: 1rem;
    }

    body:not(.service-page) .header-right {
        gap: 1rem;
        flex-shrink: 0;
    }

    body:not(.service-page) .header-phone {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero h2.hero-main-title,
    .section-title,
    .service-page .hero.service-hero h1,
    .service-page .section h2 {
        overflow-wrap: anywhere;
    }

    [data-cp-reveal] {
        transform: translate3d(0, 22px, 0);
        filter: blur(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    body:not(.service-page) .bg-layer.active,
    .service-page .hero.service-hero {
        transform: none;
        background-position: center;
    }

    .showcase-card-hero,
    .cp-ready .hero-text,
    .cp-ready .hero-visual,
    .cp-ready .service-eyebrow,
    .cp-ready .service-page .hero.service-hero h1,
    .cp-ready .service-lead,
    .cp-ready .service-hero-actions,
    .cp-ready .service-hero-card,
    .messenger-icon {
        animation: none !important;
    }

    [data-cp-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}