/* ========== RESET & BASE ========== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://rsms.me/inter/inter.css');
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.faq-question-text {
    display: inline-flex;
    align-items: baseline;
    gap: 14px;
}

.faq-number {
    display: inline-block;
    min-width: 2ch;
    font-size: 0.85em;
    font-weight: 700;
    color: #ff4d00;
    letter-spacing: 0.02em;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Scroll indicator with 3 arrows in bottom-left */
.scroll-indicator {
    position: fixed;
    bottom: var(--menu-gap, 16px);
    left: var(--menu-gap, 16px);
    z-index: 1300;
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.scroll-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-indicator.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.scroll-arrow {
    color: #F0F8FF;
    opacity: 0;
    animation: arrowFade 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    width: 20px;
    height: 20px;
    margin-top: -10px; /* Even tighter overlap */
}

.scroll-arrow:first-child {
    margin-top: 0;
}

.scroll-arrow-1 {
    animation-delay: 0s;
}

.scroll-arrow-2 {
    animation-delay: 0.2s;
}

.scroll-arrow-3 {
    animation-delay: 0.4s;
}

@keyframes arrowFade {
    0% { opacity: 0; transform: translateY(-3px); }
    50% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(3px); }
}

/* Scroll progress indicator — thin line on right edge */
.scroll-progress {
    position: fixed;
    top: 0;
    right: 0;
    width: 3px;
    height: 0%;
    background: #ff4d00;
    z-index: 9998;
    pointer-events: none;
    transition: none;
    border-radius: 0 0 2px 2px;
}

body {
    background-color: #05070c;
    background-image:
        radial-gradient(1200px 900px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
        radial-gradient(900px 700px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
        linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0 0;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    color: #F0F8FF;
}

/* Fixed gradient overlay for mobile — background-attachment:fixed is broken on iOS/Android */
@supports (-webkit-touch-callout: none) {
    body.hero-bg-lock .fixed-bg {
        background-image: none !important;
        background-color: transparent !important;
    }
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -2;
        background-color: #05070c;
        background-image:
            radial-gradient(600px 450px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
            radial-gradient(450px 350px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
            linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
        background-repeat: no-repeat;
        pointer-events: none;
    }
}

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    body {
        background-image: none;
    }
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: -2;
        background-color: #05070c;
        background-image:
            radial-gradient(600px 450px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
            radial-gradient(450px 350px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
            linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
        background-repeat: no-repeat;
        pointer-events: none;
    }
}

@media (max-width: 480px) {
    body::before {
        background-image:
            radial-gradient(400px 300px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
            radial-gradient(300px 250px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
            linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
    }
}

/* Loading screen — matches body gradient exactly */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: all;
    overflow: hidden;
    background-color: #05070c;
    background-image:
        radial-gradient(1200px 900px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
        radial-gradient(900px 700px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
        linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .loading-screen {
        background-image:
            radial-gradient(600px 450px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
            radial-gradient(450px 350px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
            linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
    }
}

@media (max-width: 480px) {
    .loading-screen {
        background-image:
            radial-gradient(400px 300px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
            radial-gradient(300px 250px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
            linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
    }
}

/* Subpage loading screen — same visual style as homepage loading screen */
.subpage-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: all;
    overflow: hidden;
    background-color: #05070c;
    background-image:
        radial-gradient(1200px 900px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
        radial-gradient(900px 700px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
        linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .subpage-loading-screen {
        background-image:
            radial-gradient(600px 450px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
            radial-gradient(450px 350px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
            linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
    }
}

@media (max-width: 480px) {
    .subpage-loading-screen {
        background-image:
            radial-gradient(400px 300px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
            radial-gradient(300px 250px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
            linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
    }
}

.subpage-loading-screen.dismissed {
    display: none;
}

:root {
    --header-pad: 48px;
    --header-max-width: 1200px;
}

.glass-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ---- Menu panel: clip-path reveal from bottom-right ---- */
.menu-panel {
    --menu-w: max(6vw, 280px);
    --menu-h: 55vh;
    --btn-size: 50px;
    --menu-gap: 1rem;
    position: fixed;
    bottom: var(--menu-gap);
    right: var(--menu-gap);
    z-index: 1300;
    width: var(--menu-w);
    height: var(--menu-h);
    min-height: 380px;
    background: #15171c;
    border-radius: 0;
    border: none; /* Changed from border to none, using pseudo-element now */
    overflow: hidden;
    cursor: pointer;
    clip-path: inset(calc(100% - var(--btn-size)) 0 0 calc(100% - var(--btn-size)) round 14px);
    opacity: 0;
    transform: translate(-200px, -200px);
    transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 2s cubic-bezier(0.16, 1, 0.3, 1), transform 2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Orange glow background - expands from bottom-right corner when menu opens */
.menu-panel::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse 150% 150% at bottom right,
        rgba(255, 77, 0, 0.12) 0%,
        rgba(255, 77, 0, 0.08) 20%,
        rgba(255, 77, 0, 0.04) 40%,
        rgba(255, 77, 0, 0.02) 60%,
        transparent 80%
    );
    opacity: 0;
    transform: scale(0.3);
    transform-origin: bottom right;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}

/* Orange glowing border - permanent, stays on button */
.menu-panel::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: var(--btn-size);
    height: var(--btn-size);
    border-radius: 14px;
    border-top: 2px solid #ff4d00;
    border-left: 2px solid #ff4d00;
    box-shadow: 0 0 20px rgba(255, 77, 0, 0.6),
                0 0 40px rgba(255, 77, 0, 0.3),
                inset 0 0 20px rgba(255, 77, 0, 0.1);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 25;
    transition: opacity 0.3s ease;
}

.menu-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hidden during loading screen — removed by JS after fade-in */
.menu-panel--hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-panel-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--btn-size, 50px);
    padding: clamp(28px, 3vw, 40px);
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
    z-index: 2;
}

/* Nav links */
.menu-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.menu-link {
    text-decoration: none;
    color: #F0F8FF;
    font-size: clamp(17px, 1.5vw, 24px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(11px, 1.3vh, 18px) 0;
    min-height: 44px;
    position: relative;
}

.menu-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: rgba(240, 248, 255, 0.08);
}

.menu-link::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(240, 248, 255, 0.5);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition:
        transform 1.15s cubic-bezier(0.22, 0, 0.15, 1),
        opacity 1.25s cubic-bezier(0.22, 0, 0.15, 1);
    will-change: transform;
}

.menu-link:hover::before,
.menu-link:focus-visible::before {
    transform: scaleX(1);
    opacity: 1;
    transition:
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-link:hover {
    color: #ffffff;
}

/* Letter-by-letter hover animation */
.nav-anim {
    display: inline-flex;
    align-items: flex-start;
}

.nav-arrow {
    display: inline-block;
    margin-left: 16px;
    transform: translateY(0.02em);
    font-size: 0.72em;
    color: rgba(240, 248, 255, 0.35);
    transition:
        color 0.25s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-link:hover .nav-arrow,
.menu-link:focus-visible .nav-arrow {
    color: #ff4d00;
    transform: translateY(0.02em) rotate(180deg);
}

 .menu-legal-link:hover .nav-arrow,
 .menu-legal-link:focus-visible .nav-arrow {
     color: #ff4d00;
     transform: translateY(0.02em) rotate(180deg);
 }

.nav-letter {
    display: inline-block;
    height: 1.28em;
    line-height: 1.28em;
    overflow: hidden;
    vertical-align: bottom;
}

.nav-letter-inner {
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--d, 0s);
    will-change: transform;
}

.nav-letter-top,
.nav-letter-bottom {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.28em;
    height: 1.28em;
    display: block;
}

.nav-letter-top {
    color: #F0F8FF;
}

.nav-letter-bottom {
    color: #F0F8FF;
    text-shadow: none;
    transform: translateY(0.03em);
}

.menu-link:hover .nav-letter-inner,
.menu-link:focus-visible .nav-letter-inner,
.menu-legal-link:hover .nav-letter-inner,
.menu-legal-link:focus-visible .nav-letter-inner {
    transform: translateY(calc(-1 * 1.28em));
}

/* Button letter-by-letter hover animation */
.btn-letter-anim {
    display: inline-flex;
    align-items: flex-start;
}

.btn-letter {
    display: inline-block;
    height: 1.28em;
    line-height: 1.28em;
    overflow: hidden;
    vertical-align: bottom;
}

.btn-letter-inner {
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--d, 0s);
    will-change: transform;
}

.btn-letter-top,
.btn-letter-bottom {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.28em;
    height: 1.28em;
    display: block;
}

.btn-letter-top {
    color: inherit;
}

.btn-letter-bottom {
    color: inherit;
    transform: translateY(0.03em);
}

.about-btn:hover .btn-letter-inner,
.footer-cta-btn:hover .btn-letter-inner,
.projects-btn:hover .btn-letter-inner,
.cjenik-more:hover .btn-letter-inner,
.header-kontakt:hover .btn-letter-inner,
.about-step-cta:hover .btn-letter-inner,
.about-story-cta:hover .btn-letter-inner,
.projects-view-all-btn:hover .btn-letter-inner,
.pricing-btn-neumorphic:hover .btn-letter-inner,
.project-link-btn:hover .btn-letter-inner,
.project-tab:hover .btn-letter-inner,
.project-tab.active .btn-letter-inner,
.form-submit:hover .btn-letter-inner,
.contact-info-value:hover .btn-letter-inner {
    transform: translateY(calc(-1 * 1.28em));
}

/* Keep active tab letters raised even on hover */
.project-tab.active:hover .btn-letter-inner {
    transform: translateY(calc(-1 * 1.28em));
}

.project-panel {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.project-content {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mockup-group {
    height: 80vh;
}

.mockup-mobile {
    width: 50vw;
    height: 80vh;
}

/* Menu footer: legal + socials */
.menu-footer {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2vh, 28px);
    padding-top: clamp(18px, 2.5vh, 28px);
}

.menu-legal {
    display: flex;
    flex-direction: row;
    gap: clamp(12px, 1.5vw, 24px);
    width: 100%;
}

.menu-legal-link {
    text-decoration: none;
    color: rgba(240, 248, 255, 0.7);
    font-size: clamp(11px, 0.95vw, 14px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(6px, 0.8vh, 10px) 0;
    min-height: 30px;
    position: relative;
    flex: 1;
}

.menu-legal-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: rgba(240, 248, 255, 0.08);
}

.menu-legal-link::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(240, 248, 255, 0.5);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition:
        transform 1.15s cubic-bezier(0.22, 0, 0.15, 1),
        opacity 1.25s cubic-bezier(0.22, 0, 0.15, 1);
    will-change: transform;
}

.menu-legal-link:hover::before,
.menu-legal-link:focus-visible::before {
    transform: scaleX(1);
    opacity: 1;
    transition:
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-legal-link:hover {
    color: #ffffff;
}

/* Social icons */
.menu-socials {
    display: flex;
    gap: clamp(8px, 1vw, 14px);
    align-items: center;
}

.menu-social-icon {
    color: rgba(240, 248, 255, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease;
}

.menu-social-icon:hover {
    color: #ff4d00;
}

.menu-social-icon svg {
    width: clamp(20px, 1.6vw, 24px);
    height: clamp(20px, 1.6vw, 24px);
}

/* Open state: clip-path reveals full panel from bottom-right */
body.menu-open .menu-panel {
    clip-path: inset(0 0 0 0 round 20px);
    cursor: default;
}

/* Trigger orange glow background expansion when menu opens */
body.menu-open .menu-panel::after {
    opacity: 1;
    transform: scale(1.8);
}

/* Keep border on button - just fade it slightly when menu opens */
body.menu-open .menu-panel::before {
    opacity: 0.3;
}

body.menu-open .menu-panel-content {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.3s;
}

/* ========== FIXED BACKGROUND ========== */
.fixed-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: none;
    transform: scale(1.05);
    transform-origin: center;
    will-change: transform;
}

 body.hero-bg-lock .fixed-bg {
     background-image: none !important;
     background-color: transparent !important;
 }

.fixed-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
}

.fixed-bg::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40vh;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.65) 65%,
        rgba(0, 0, 0, 0.96) 100%
    );
}

@media (max-width: 768px) {
    .fixed-bg::after {
        background: rgba(0, 0, 0, 0.18);
    }
}

@media (max-width: 480px) {
    .fixed-bg::after {
        background: rgba(0, 0, 0, 0.18);
    }
}

/* ========== PAGE TRANSITION ========== */
.page-transition {
    position: fixed;
    inset: 0;
    background: #1a1d24;
    z-index: 9998;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.page-transition.fade-out {
    opacity: 0;
}

/* ========== MAIN WRAPPER ========== */
.main-wrapper {
    position: relative;
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100vw;
}

/* ========== HERO FADE IN ========== */
.hero-fade-in {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========== HERO SECTION ========== */
.hero-section {
    height: 95vh;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 5vw;
    overflow: hidden;
}

.hero-fluid-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.rubik-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
}

/* Ensure hero headline is above rubik cube on subpages */
.hero-section .rubik-container {
    z-index: 100;
}

/* Hero content wrapper */
.hero-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-top: 10vh;
}

/* Hero text block */
.hero-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1400px;
    user-select: none;
}

.hero-line {
    display: block;
    font-size: clamp(40px, 9.5vw, 155px);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: #F0F8FF;
    text-transform: uppercase;
}

.hero-line-1 {
    align-self: flex-start;
}

.hero-line-2 {
    align-self: center;
    opacity: 0.6;
}

.hero-line-3 {
    align-self: flex-end;
}

.hero-dot {
    color: #ff4d00;
    font-size: 1em;
    line-height: 0;
}

/* Hero bottom logo */
.hero-bottom {
    display: flex;
    justify-content: center;
    padding-bottom: clamp(24px, 4vh, 60px);
    width: 100%;
}

.hero-logo {
    height: clamp(48px, 7.2vw, 96px);
    width: auto;
    opacity: 0.25;
    filter: brightness(0) invert(1);
}

/* ========== HERO HEADLINE (subpage slogan) ========== */
.hero-headline {
    position: absolute;
    inset: 0;
    z-index: 150;
    pointer-events: none;
    user-select: none;
}

.hero-headline-line {
    position: absolute;
    font-size: clamp(36px, 7.5vw, 118px);
    font-weight: 300;
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: #F0F8FF;
    text-transform: uppercase;
    white-space: nowrap;
    will-change: transform;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Initial/Loading state - shifted 20vw towards center */
.hero-headline.is-loading .hero-headline-line:first-child {
    transform: translateX(20vw);
}

.hero-headline.is-loading .hero-headline-line--accent {
    transform: translate(-20vw, -50%);
}

.hero-headline.is-loading .hero-headline-line:last-child {
    transform: translateX(20vw);
}

/* Final state - default positions */
.hero-headline .hero-headline-line:first-child {
    transform: translateX(0);
}

.hero-headline .hero-headline-line--accent {
    transform: translate(0, -50%);
}

.hero-headline .hero-headline-line:last-child {
    transform: translateX(0);
}

/* Letter drop animation */
.hero-headline-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(-0.5em);
    font-weight: 700;
    will-change: transform, opacity;
}

@keyframes letterDropIn {
    0% {
        opacity: 0;
        transform: translateY(-0.5em);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* First line: top-left */
.hero-headline-line:first-child {
    top: clamp(100px, 18vh, 180px);
    left: clamp(32px, 6vw, 100px);
}

/* Accent line: right-center */
.hero-headline-line--accent {
    top: 50%;
    right: clamp(32px, 6vw, 100px);
    color: rgba(240, 248, 255, 0.35);
}

/* Last line: bottom-left */
.hero-headline-line:last-child {
    bottom: clamp(100px, 18vh, 180px);
    left: clamp(80px, 12vw, 200px);
}

.hero-headline-dot {
    color: #ff4d00;
}

/* Clean up old animation classes if any remain in HTML */
.hero-headline-word {
    display: inline-block;
}

@media (max-width: 768px) {
    .hero-headline-line {
        font-size: clamp(32px, 9vw, 70px);
    }

    .hero-headline-line:first-child {
        top: clamp(80px, 15vh, 120px);
        left: clamp(20px, 5vw, 48px);
    }

    .hero-headline-line--accent {
        right: clamp(20px, 5vw, 48px);
    }

    .hero-headline-line:last-child {
        bottom: clamp(80px, 15vh, 120px);
        left: clamp(48px, 10vw, 100px);
    }
}

@media (max-width: 480px) {
    .hero-headline-line {
        font-size: clamp(28px, 11vw, 52px);
    }

    .hero-headline-line:first-child {
        top: clamp(90px, 20vh, 140px);
        left: clamp(16px, 4vw, 32px);
    }

    .hero-headline-line--accent {
        right: clamp(16px, 4vw, 32px);
    }

    .hero-headline-line:last-child {
        bottom: clamp(100px, 22vh, 160px);
        left: clamp(32px, 8vw, 64px);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .hero-line {
        font-size: clamp(30px, 11vw, 68px);
        letter-spacing: -0.02em;
    }

    .hero-line-2 {
        align-self: flex-start;
    }

    .hero-line-3 {
        align-self: flex-end;
    }

    .hero-content {
        padding-top: 15vh;
    }
}

@media (max-width: 768px) {
    .panel-title,
    .panel-title-inner {
        font-size: clamp(40px, 10vw, 80px);
    }
}

@media (max-width: 480px) {
    .hero-line {
        font-size: clamp(26px, 12vw, 50px);
        line-height: 0.95;
    }

    .hero-logo {
        height: 36px;
    }

    .panel-title,
    .panel-title-inner {
        font-size: clamp(36px, 12vw, 64px);
    }
}

/* ========== PANEL SECTIONS ========== */
.panel-section {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 70vh;
}

.panel-section.last-panel {
    margin-bottom: 0;
}

/* Cjenik subpage: add spacing before footer for last panel */
body:has(.panel-section--cjenik.last-panel) .panel-section.last-panel {
    margin-bottom: 0;
}

/* Cjenik subpage: footer must sit directly after last panel without being covered */
body:has(.panel-section--cjenik.last-panel) .footer-section {
    position: relative;
    z-index: 2;
}

/* Section title — scrolls normally, JS slows it when panel reaches 70vh */
.panel-title {
    align-self: flex-start;
    padding: clamp(16px, 3vh, 40px) 7.5vw;
    z-index: 4;
    font-size: clamp(48px, 9vw, 128px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #f2f4f6;
    mix-blend-mode: normal;
    pointer-events: none;
    white-space: nowrap;
    will-change: transform;
}

/* Hide panel titles on subpages (only show on homepage) */
body:not(.homepage) .panel-section:not(#hero) .panel-title,
body:not(.homepage) .panel-section:not(#hero) .panel-title-inner {
    display: none;
}

/* Panel card styling */
.panel-card {
    --expansion: 0;
    width: calc(85vw + (15vw * var(--expansion)));
    min-height: 110vh;
    background: #e8e8e8;
    color: #111318;
    border-radius: 24px;
    box-shadow: none;
    overflow: hidden;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: width;
}

/* Inner title not used (kept in HTML but hidden) */
.panel-title-inner {
    display: none;
}

/* ========== ABOUT SECTION CONTENT ========== */
.about-content {
    width: 100%;
    max-width: 1100px;
    padding: clamp(40px, 7vw, 100px) clamp(32px, 6vw, 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(20px, 3vh, 40px);
}

.about-kicker {
    display: inline-block;
    font-size: clamp(11px, 0.85vw, 14px);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ff4d00;
    padding-bottom: 4px;
    border-bottom: 1.5px solid rgba(255, 77, 0, 0.3);
}

.about-statement {
    font-size: clamp(28px, 4.2vw, 60px);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: #1a1d24;
}

.about-word {
    display: inline;
    color: rgba(26, 29, 36, 0.15);
    transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-word.revealed {
    color: #1a1d24;
}

.about-strong {
    font-weight: 800;
}

.about-strong.revealed {
    color: #ff4d00;
}

.about-dash {
    font-weight: 400;
}

.about-dash.revealed {
    color: #ff4d00;
}

.about-icon {
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    vertical-align: -0.08em;
    margin: 0 0.08em;
    opacity: 0.12;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-icon.revealed {
    opacity: 1;
}

.about-dot {
    font-weight: 900;
    font-size: 1.15em;
}

.about-dot.revealed {
    color: #ff4d00;
}

/* ========== ORIGIN BUTTON COMPONENT ========== */
.origin-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background-color: transparent;
    color: #1a1d24;
    border: 1.5px solid rgba(26, 29, 36, 0.25);
    border-radius: 99px;
    font-family: "Inter Variable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.55s ease, border-color 0.55s ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    /* Fix for Safari overflow radius bug */
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.origin-button:hover,
.origin-button:focus-visible {
    color: #fff;
    border-color: #ff4d00;
}

.origin-button:active {
    transform: none;
}

.origin-button .btn-text {
    position: relative;
    z-index: 2;
    pointer-events: none;
    /* Inherit color from parent button, will change to white on hover */
}

.origin-button .hover-reveal {
    position: absolute;
    width: 0;
    height: 0;
    background-color: #ff4d00;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: none;
    z-index: 1;
    will-change: width, height, top, left;
}

/* Origin button variants */
.origin-button.origin-button--light {
    border-color: rgba(240, 248, 255, 0.25);
    color: #F0F8FF;
}

.origin-button.origin-button--orange {
    color: #ff4d00;
    border-color: rgba(255, 77, 0, 0.3);
}

.origin-button.origin-button--orange:hover {
    color: #F0F8FF;
}

/* Specific button adjustments */
.origin-button.about-btn {
    margin-top: clamp(16px, 2.5vh, 32px);
}

.origin-button.footer-cta-btn {
    width: fit-content;
    align-self: center;
}

.origin-button .arrow {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.origin-button:hover .arrow {
    transform: translateX(4px);
}

@media (max-width: 480px) {
    .origin-button {
        padding: 9px 18px;
        font-size: 12px;
    }
}

/* OLD BUTTON STYLES - REPLACED BY ORIGIN-BUTTON COMPONENT - KEPT FOR REFERENCE */
/*
.about-btn,
.footer-cta-btn,
.projects-btn,
.cjenik-more,
.pricing-btn-neumorphic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 6px;
    position: relative;
    padding: 12px 24px;
    border: 1.5px solid rgba(26, 29, 36, 0.25);
    border-radius: 99px;
    background: transparent;
    color: #1a1d24;
    text-decoration: none;
    font-family: "Inter Variable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: color 0.55s ease, border-color 0.55s ease;
}

.about-btn::before,
.footer-cta-btn::before,
.projects-btn::before,
.cjenik-more::before,
.pricing-btn-neumorphic::before,
.header-kontakt::before,
.about-step-cta::before,
.about-story-cta::before,
.projects-arrow::before,
.form-submit::before,
.projects-view-all-btn::before,
.contact-info-value::before {
    content: '';
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    background: #ff4d00;
    border-radius: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-btn:hover,
.footer-cta-btn:hover,
.projects-btn:hover,
.cjenik-more:hover,
.pricing-btn-neumorphic:hover,
.about-btn:focus-visible,
.footer-cta-btn:focus-visible,
.projects-btn:focus-visible,
.cjenik-more:focus-visible,
.pricing-btn-neumorphic:focus-visible {
    color: #fff;
    border-color: #ff4d00;
}

.about-btn:hover::before,
.footer-cta-btn:hover::before,
.projects-btn:hover::before,
.cjenik-more:hover::before,
.pricing-btn-neumorphic:hover::before,
.header-kontakt:hover::before,
.about-step-cta:hover::before,
.about-story-cta:hover::before,
.projects-arrow:hover::before,
.form-submit:hover::before,
.projects-view-all-btn:hover::before,
.contact-info-value:hover::before,
.about-btn:focus-visible::before,
.footer-cta-btn:focus-visible::before,
.projects-btn:focus-visible::before,
.cjenik-more:focus-visible::before,
.pricing-btn-neumorphic:focus-visible::before,
.header-kontakt:focus-visible::before {
    width: 300%;
    height: 300%;
}

.about-btn,
.footer-cta-btn,
.projects-btn,
.cjenik-more,
.pricing-btn-neumorphic,
.header-kontakt,
.about-step-cta,
.about-story-cta,
.projects-arrow,
.form-submit,
.projects-view-all-btn,
.project-link-btn,
.contact-info-value {
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.about-btn > *:not(.hover-reveal),
.footer-cta-btn > *:not(.hover-reveal),
.projects-btn > *:not(.hover-reveal),
.cjenik-more > *:not(.hover-reveal),
.pricing-btn-neumorphic > *:not(.hover-reveal),
.header-kontakt > *:not(.hover-reveal),
.about-step-cta > *:not(.hover-reveal),
.about-story-cta > *:not(.hover-reveal),
.projects-arrow > *:not(.hover-reveal),
.form-submit > *:not(.hover-reveal),
.projects-view-all-btn > *:not(.hover-reveal),
.project-link-btn > *:not(.hover-reveal),
.contact-info-value > *:not(.hover-reveal) {
    position: relative;
    z-index: 2;
}

.about-btn .hover-reveal,
.footer-cta-btn .hover-reveal,
.projects-btn .hover-reveal,
.cjenik-more .hover-reveal,
.pricing-btn-neumorphic .hover-reveal,
.header-kontakt .hover-reveal,
.about-step-cta .hover-reveal,
.about-story-cta .hover-reveal,
.projects-arrow .hover-reveal,
.form-submit .hover-reveal,
.projects-view-all-btn .hover-reveal,
.project-link-btn .hover-reveal,
.contact-info-value .hover-reveal {
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    background-color: #ff4d00;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    pointer-events: none;
    z-index: 1;
    will-change: width, height, top, left;
}

.about-btn {
    margin-top: clamp(16px, 2.5vh, 32px);
}

.about-btn-text {
    display: inline-block;
    position: relative;
}

.footer-cta-btn {
    border-color: rgba(240, 248, 255, 0.25);
    color: #F0F8FF;
    width: fit-content;
    align-self: center;
}

.footer-cta-btn .arrow {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.footer-cta-btn:hover .arrow {
    transform: translateX(4px);
}

.about-story-cta {
    color: #ff4d00;
    translate: 0 25px;
    border-color: rgba(255, 77, 0, 0.3);
}

.about-story-cta:hover {
    color: #F0F8FF;
}

.header-kontakt {
    text-transform: uppercase;
}
*/

@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .contact-info-groups {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .about-block-content {
        margin-left: 5vw;
        margin-right: 5vw;
        width: 90vw;
    }

    .about-block-text {
        font-size: clamp(18px, 5vw, 24px);
    }
    
    .about-block-num {
        display: block;
        width: auto;
        margin-left: 0;
        margin-bottom: 8px;
        color: #ff4d00;
        font-size: 12px;
        font-weight: 600;
    }

    .about-block-text {
        text-indent: 0;
    }

    .contact-detail-content {
        padding: clamp(40px, 8vw, 80px) 0;
        width: 88%;
    }

    .contact-grid {
        gap: 48px;
    }

    .contact-main-heading {
        font-size: clamp(32px, 8vw, 48px);
        margin-bottom: 24px;
    }

    .contact-intro-text {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .form-checkboxes,
    .form-radios {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .contact-info-groups {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* OLD - Now handled by .origin-button media query above */
/*
@media (max-width: 480px) {
    .about-btn,
    .footer-cta-btn,
    .projects-btn,
    .cjenik-more {
        padding: 9px 18px;
        font-size: 12px;
    }
}
*/

@media (max-width: 768px) {
    .about-content {
        width: 85vw;
        max-width: 85vw;
        padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 32px);
        align-items: center;
        text-align: center;
    }

    .about-statement {
        font-size: clamp(32px, 7.5vw, 58px);
    }
}

@media (max-width: 480px) {
    .about-content {
        width: 85vw;
        max-width: 85vw;
        padding: clamp(16px, 3vw, 28px) clamp(12px, 2.5vw, 20px);
        align-items: center;
        text-align: center;
    }

    .about-statement {
        font-size: clamp(30px, 8.5vw, 48px);
    }
}

/* ========== PROJECTS SECTION (PREMIUM CLEAN) ========== */
.projects-premium-container {
    width: 100%;
    max-width: 1400px;
    height: 85vh;
    padding: clamp(24px, 2vh, 32px) clamp(24px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

/* Header: Tabs Left + Title Right */
.projects-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 40px;
    width: 100%;
    position: relative;
    z-index: 10;
    margin-bottom: 0;
}

.projects-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(26, 29, 36, 0.1) 0%, rgba(26, 29, 36, 0.3) 50%, rgba(26, 29, 36, 0.1) 100%);
    margin: clamp(6px, 0.8vh, 10px) 0;
}

.projects-visit-button {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 0;
    margin-top: 0;
    margin-bottom: clamp(6px, 0.8vh, 10px);
}

/* Horizontal Spotlight Tabs */
.projects-tabs-nav {
    display: flex;
    flex-direction: row;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
}

.project-tab {
    position: relative;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 16px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: clamp(12px, 1vw, 14px);
    color: rgba(26, 29, 36, 0.4);
    transition: color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Glow Line (Top) */
.glow-line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 140px;
    height: 2px;
    background-color: transparent;
    transition: all 0.2s ease-out;
}

/* Beam Effect */
.glow-line::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 80px;
    background: radial-gradient(ellipse at top, rgba(255, 77, 0, 0.4) 0%, rgba(255, 77, 0, 0.1) 40%, transparent 80%);
    filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.tab-label {
    position: relative;
    z-index: 10;
    font-weight: 600;
    white-space: nowrap;
}

/* Hover State */
.project-tab:hover {
    color: #1a1d24;
}

.project-tab:hover .tab-label {
    text-shadow: none;
}

.project-tab:hover .glow-line {
    background-color: rgba(255, 77, 0, 0.3);
    box-shadow: none;
}

.project-tab:hover .glow-line::after {
    opacity: 0;
}

/* Active State */
.project-tab.active {
    color: #1a1d24;
}

.project-tab.active .tab-label {
    text-shadow: 0 0 20px rgba(255, 77, 0, 0.5);
}

/* Active Glow - Strictly Downwards */
.project-tab.active .glow-line {
    background-color: #ff4d00 !important;
    box-shadow: 
        0 4px 12px 0 rgba(255, 77, 0, 0.5),
        0 12px 24px 0 rgba(255, 77, 0, 0.3),
        0 20px 40px 0 rgba(255, 77, 0, 0.1);
    z-index: 2;
}

.project-tab.active .glow-line::after {
    opacity: 1;
    background: radial-gradient(ellipse at top, rgba(255, 77, 0, 0.4) 0%, rgba(255, 77, 0, 0.1) 40%, transparent 80%);
}

/* Project Name Display (Top Right) */
.projects-title-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
}

.project-name-display {
    font-size: clamp(36px, 4vw, 72px);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #1a1d24;
    margin: 0;
    line-height: 1.15;
    text-align: right;
    position: relative;
    overflow: visible;
    min-height: 1.15em;
    white-space: nowrap;
    min-width: 420px;
}

.project-name-text {
    display: block;
    will-change: transform, opacity;
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
    white-space: nowrap;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.project-name-text.is-active {
    position: relative;
}

.project-name-text.is-incoming {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(12px) scale(0.96);
    opacity: 0;
    filter: blur(4px);
}

.project-name-text.is-enter {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
}

.project-name-text.is-leaving {
    transform: translateY(-12px) scale(0.96);
    opacity: 0;
    filter: blur(4px);
}

/* Subpage variant - centered header */
.projects-header--centered {
    justify-content: center;
}

.projects-header--centered .project-name-display {
    text-align: center;
}

/* Display Area */
.projects-display {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}

.project-slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(300px, 0.7fr) minmax(400px, 1.3fr);
    grid-template-rows: auto 1fr;
    align-items: flex-start;
    gap: clamp(40px, 1vw, 60px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.98);
    filter: blur(8px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.6s;
    width: 100%;
    height: 100%;
    position: relative;
    left: 0;
    top: 0;
}

.project-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    filter: blur(0px);
    z-index: 2;
    transition-delay: 0s;
}

/* Staggered text animations inside slide */
.project-slide .projects-subtitle,
.project-slide .projects-title,
.project-slide .projects-desc,
.project-slide .projects-link {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(4px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-slide.active .projects-subtitle { transition-delay: 0.2s; opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.project-slide.active .projects-title { transition-delay: 0.3s; opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.project-slide.active .projects-desc { transition-delay: 0.4s; opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
.project-slide.active .projects-link { transition-delay: 0.5s; opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

/* Staggered image animations */
.project-slide .project-visuals {
    opacity: 0;
    transform: scale(0.9) translateY(40px) rotateX(10deg);
    filter: blur(10px);
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), 
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: bottom center;
}
.project-slide.active .project-visuals {
    transition-delay: 0.35s;
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0deg);
    filter: blur(0);
}

.project-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 440px;
    padding-left: clamp(24px, 4vw, 48px);
    border-left: 2px solid #ff4d00;
    z-index: 2;
    position: relative;
    grid-column: 1;
    grid-row: 1 / 3;
}

.project-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.project-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    background: rgba(26, 29, 36, 0.05);
    color: rgba(26, 29, 36, 0.6);
    border-radius: 100px;
}

.project-subtitle {
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 700;
    color: #1a1d24;
    margin: 0;
    line-height: 1.2;
}

.project-description {
    font-size: clamp(14px, 1vw, 16px);
    color: rgba(26, 29, 36, 0.7);
    margin: 0;
    line-height: 1.6;
    font-weight: 400;
}

.project-highlights {
    list-style: none;
    padding: 0;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-highlights li {
    font-size: clamp(13px, 0.9vw, 15px);
    color: #1a1d24;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.project-highlights li::before {
    content: '✓';
    color: #ff4d00;
    font-weight: 900;
    font-size: 14px;
}

.project-link-btn {
    margin-top: 10px;
}

.project-highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px; /* Matched with description */
}

.project-highlights li {
    font-size: clamp(14px, 1.1vw, 16px);
    color: #1a1d24;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

.project-highlights li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: #ff4d00;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Info link button */
.project-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1a1d24;
    text-decoration: none;
    transition: color 0.3s ease;
    flex-shrink: 0;
}

.project-link-btn:hover {
    color: #ff4d00;
}

.project-link-btn .arrow {
    transition: transform 0.3s ease;
}

.project-link-btn:hover .arrow {
    transform: translateX(5px);
}

.project-link-btn--disabled {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.project-link-btn--disabled:hover {
    color: #1a1d24;
}

.project-mockup-container {
    position: relative;
    width: 100%;
    max-width: 1300px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: clamp(600px, 85vh, 850px);
    padding-left: 0;
    translate: 50px -20px;
    perspective: 1200px;
    grid-column: 2;
    grid-row: 2;
}

/* Override translate for projekti page */
body.projekti-page .project-mockup-container {
    translate: 0 -20px;
}

.project-mockup--desktop {
    width: auto;
    max-width: 85%;
    max-height: 100%;
    height: auto;
    position: relative; 
    left: -4%;
    top: 3%;
    transform: none; 
    filter: none;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: none;
    border-radius: 0;
}

body.projekti-page .project-mockup--desktop {
    left: 0;
    top: 0;
}

.project-mockup--mobile {
    position: absolute; 
    width: clamp(320px, 42vw, 560px); 
    height: auto;
    top: auto; 
    right: -14%;
    bottom: 28%;
    transform: none; 
    filter: none;
    z-index: 2;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: none; 
    border-radius: 0;
}

/* Hover effects removed to keep layout completely static */

/* Footer with "Svi projekti" button */
.projects-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
}

.projects-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding: 12px 24px;
    border: 1.5px solid rgba(26, 29, 36, 0.25);
    border-radius: 99px;
    background: transparent;
    color: #1a1d24;
    text-decoration: none;
    font-family: "Inter Variable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: color 0.55s ease, border-color 0.55s ease;
}

.projects-view-all-btn:hover {
    color: #fff;
    border-color: #ff4d00;
}

.projects-view-all-btn .arrow {
    transition: transform 0.3s ease;
}

.projects-view-all-btn::before {
    content: '';
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    background: #ff4d00;
    border-radius: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.projects-view-all-btn:hover::before {
    width: 300%;
    height: 300%;
}

.projects-view-all-btn:hover .arrow {
    transform: translateX(4px);
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .projects-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    
    .projects-title-wrapper {
        width: 100%;
        justify-content: flex-start;
    }
    
    .project-name-display {
        text-align: left;
        font-size: clamp(32px, 6vw, 56px);
    }
    
    .projects-tabs-nav {
        overflow-x: auto;
        overflow-y: visible;
        gap: 16px;
        padding-top: 8px;
        padding-bottom: 60px;
        margin-bottom: -60px;
    }
}

@media (max-width: 768px) {
    .projects-premium-container {
        padding: 40px 20px;
        gap: 24px;
        justify-content: flex-start;
    }
    
    .projects-header {
        gap: 20px;
        flex-direction: column;
        align-items: center;
    }
    
    .projects-title-wrapper {
        width: 100%;
        justify-content: flex-start;
        order: -1;
    }
    
    .project-name-display {
        font-size: clamp(28px, 7vw, 48px);
        text-align: left;
        white-space: normal;
        word-break: break-word;
    }
    
    .projects-tabs-nav {
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        gap: clamp(4px, 1.5vw, 8px);
        padding-top: 8px;
        padding-bottom: 60px;
        margin-bottom: -60px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        justify-content: center;
    }
    
    .projects-tabs-nav::-webkit-scrollbar {
        height: 3px;
    }
    
    .projects-tabs-nav::-webkit-scrollbar-track {
        background: rgba(26, 29, 36, 0.05);
        border-radius: 2px;
    }
    
    .projects-tabs-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 77, 0, 0.3);
        border-radius: 2px;
    }
    
    .project-tab {
        padding: clamp(10px, 3vw, 14px) clamp(6px, 2vw, 9px);
        font-size: clamp(9px, 2.5vw, 11.5px);
        min-width: fit-content;
        flex-shrink: 0;
    }
    
    .glow-line {
        max-width: 100%;
        height: 2px;
    }
    
    .projects-divider {
        display: none;
    }
    
    .project-slide .projects-visit-button {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        translate: 0 -10vw;
        margin-bottom: 0;
        order: 3;
        grid-column: unset;
        grid-row: unset;
    }
    
    .projects-display {
        min-height: auto;
        order: 5;
    }
    
    .project-slide {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .project-info {
        display: flex;
        order: 1;
        padding-left: 0;
        border-left: none;
        max-width: 100%;
        gap: 12px;
        align-items: flex-start;
        text-align: left;
        margin-top: 0;
        padding-right: 20px;
    }

    .project-subtitle {
        display: none;
    }
    
    .project-mockup-container {
        order: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        translate: 0;
        left: 0;
        transform: none;
    }
    
    .project-description {
        padding-left: 24px;
    }

    .project-tags {
        justify-content: center;
    }

    .project-highlights {
        align-items: center;
    }
    
    .project-mockup-container {
        grid-column: 1;
        padding: 16px 0;
        height: clamp(300px, 46vh, 480px);
    }
    
    .project-mockup--desktop {
        position: relative;
        top: 0;
        left: 0;
        width: 85vw;
        max-width: 85vw;
        height: auto;
    }
    
    .project-mockup--mobile {
        right: 0;
        bottom: 15%; /* Increase mobile bottom offset for smaller screens too */
        width: clamp(160px, 45vw, 260px);
    }

    body.projekti-page .project-mockup--mobile {
        right: 0;
        bottom: 0;
    }

    .project-mockup-container {
        padding: 32px 0 56px 0;
    }
}

@media (max-width: 480px) {
    .projects-premium-container {
        padding: 32px 16px;
        gap: 20px;
    }
    
    .projects-header {
        gap: 16px;
    }
    
    .project-name-display {
        font-size: clamp(24px, 8vw, 40px);
        min-height: auto;
    }
    
    .projects-tabs-nav {
        gap: clamp(3px, 1vw, 6px);
        padding-bottom: 60px;
        margin-bottom: -60px;
    }
    
    .project-tab {
        padding: clamp(9px, 2.5vw, 11px) clamp(5px, 1.5vw, 7px);
        font-size: clamp(8.5px, 2.2vw, 10.5px);
    }
    
    .tab-label {
        white-space: nowrap;
    }
    
    .glow-line {
        max-width: 100%;
        height: 2px;
    }
    
    .project-slide {
        gap: 10px;
    }
    
    .project-info {
        gap: 10px;
        padding-right: 16px;
        grid-column: unset;
        grid-row: unset;
    }

    .project-subtitle {
        display: none;
    }
    
    .project-description {
        font-size: 14px;
        line-height: 1.6;
        padding-left: 20px;
    }
    
    .project-highlights {
        gap: 8px;
        display: none;
    }
    
    .project-highlights li {
        font-size: 13px;
    }
    
    .projects-footer {
        display: none;
    }
    
    .project-mockup-container {
        height: auto;
        translate: 0;
        left: 0;
        transform: none;
    }
    
    .project-mockup--desktop {
        position: relative;
        top: 0;
        left: 0;
        width: 85vw;
        max-width: 85vw;
        height: auto;
    }
    
    .project-mockup--mobile {
        right: 0;
        bottom: 0;
        scale: 2;
        width: clamp(120px, 40vw, 200px);
    }
    
    .project-description {
        font-size: 12px;
    }
    
    .project-link-btn {
        font-size: 11px;
        padding: 10px 20px;
    }

    .projects-footer {
        padding-top: 8px;
    }
}


.cjenik-detail-pkg {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vh, 20px);
    padding: clamp(32px, 4vh, 56px) 0;
}

.cjenik-detail-header {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 20px);
}

.cjenik-detail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: clamp(6px, 0.8vw, 10px) clamp(12px, 1.5vw, 18px);
    border-radius: 10px;
    background: rgba(26, 29, 36, 0.06);
    font-size: clamp(16px, 1.8vw, 24px);
    font-weight: 800;
    color: #1a1d24;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.cjenik-detail-name {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 800;
    color: #1a1d24;
    letter-spacing: -0.03em;
    margin: 0;
}

.cjenik-detail-desc {
    font-size: clamp(14px, 1.1vw, 17px);
    color: rgba(26, 29, 36, 0.6);
    line-height: 1.7;
    margin: 0;
    max-width: 580px;
}

.cjenik-detail-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cjenik-detail-features li {
    font-size: clamp(13px, 1vw, 15px);
    color: rgba(26, 29, 36, 0.7);
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
}

.cjenik-detail-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff4d00;
}

.cjenik-detail-pricing {
    display: flex;
    gap: clamp(24px, 3vw, 48px);
    padding-top: clamp(8px, 1vh, 16px);
}

.cjenik-detail-price-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cjenik-detail-price-label {
    font-size: clamp(10px, 0.75vw, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(26, 29, 36, 0.35);
}

.cjenik-detail-price-value {
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 800;
    color: #1a1d24;
    letter-spacing: -0.02em;
}

.cjenik-detail-delivery {
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 600;
    color: rgba(26, 29, 36, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cjenik-detail-divider {
    display: none;
}

.cjenik-detail-cta {
    align-self: flex-start;
    margin-top: clamp(24px, 3vh, 40px);
    border-color: rgba(26, 29, 36, 0.25);
    color: #1a1d24;
}

@media (max-width: 768px) {
    .cjenik-detail-pricing {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .cjenik-detail-content {
        width: 92vw;
        padding: clamp(24px, 4vh, 48px) clamp(12px, 2vw, 20px);
    }
}

/* ========== CJENIK SECTION ========== */
.panel-section--cjenik {
    height: 110vh; /* Panel stack height on desktop */
    display: flex;
    align-items: center;
}

.panel-section--cjenik .panel-card {
    background: #e0e5ec;
    color: #5a677a;
    border-radius: 24px;
    box-shadow: none;
    overflow: hidden;
    margin-top: 0;
    height: auto;
    padding-bottom: 0;
    scroll-behavior: auto;
    -webkit-overflow-scrolling: auto;
}

.panel-section--cjenik .panel-card::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* ========== PROJECTS SECTION SCALING ========== */
.panel-section--projects {
    height: 110vh;
    display: flex;
    align-items: center;
}

.panel-section--projects .panel-card {
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 12.5vh;
}

.cjenik-content {
    width: 100%;
    height: 85vh;
    max-height: 85vh;
    padding: clamp(24px, 4vh, 48px) clamp(24px, 4vw, 60px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* Pricing Wrapper */
.pricing-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    gap: clamp(20px, 3vh, 32px);
}

.pricing-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.pricing-badge-neumorphic {
    display: inline-block;
    padding: 8px 20px;
    background: #e0e5ec;
    color: #ff4d00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 30px;
    box-shadow: 
        5px 5px 10px #a3b1c6,
        -5px -5px 10px #ffffff;
    margin-bottom: 8px;
}

.pricing-subtitle {
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.6;
    color: rgba(26, 29, 36, 0.7);
    margin: 0;
    font-weight: 500;
    max-width: 650px;
}

.pricing-title-neumorphic {
    font-size: clamp(40px, 4.5vw, 64px);
    font-weight: 800;
    color: #1a1d24;
    text-shadow: none;
    margin: 0;
    text-transform: none;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.pricing-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(24px, 4vw, 48px);
    width: 100%;
    align-items: center;
    overflow: visible;
}

/* Left: Package Options */
.pricing-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(12px, 1.5vh, 16px);
    height: 55vh;
    max-height: 480px;
}

.pricing-option {
    display: flex;
    align-items: center;
    padding: clamp(14px, 2vh, 18px) clamp(20px, 2.5vw, 24px);
    background-color: #e0e5ec;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    border: 2px solid transparent;
    position: relative;
    box-shadow: 
        7px 7px 14px #a3b1c6,
        -7px -7px 14px #ffffff;
    flex: 1;
    min-height: 0;
}

.pricing-detail-card {
    display: flex;
    align-items: center;
    padding: clamp(14px, 2vh, 18px) clamp(20px, 2.5vw, 24px);
    background-color: #e0e5ec;
    border-radius: 16px;
    box-shadow: 
        7px 7px 14px #a3b1c6,
        -7px -7px 14px #ffffff;
    border: 2px solid #ff4d00;
    flex-shrink: 0;
}

.pricing-description {
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.7;
    color: #5a677a;
    font-weight: 400;
    margin: 8px 0;
    flex-grow: 1;
}

/* ===== Cjenik Subpage Detail Panels ===== */
.cjenik-detail-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: clamp(40px, 6vw, 80px);
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    align-items: center;
}

.cjenik-detail-left {
    display: flex;
    justify-content: center;
}

.cjenik-detail-card {
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 3.5vh, 40px) clamp(24px, 3vw, 32px);
    background-color: #e0e5ec;
    border-radius: 24px;
    box-shadow:
        12px 12px 24px #a3b1c6,
        -12px -12px 24px #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    width: 100%;
    max-width: 380px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cjenik-detail-card:hover {
    transform: translateY(-4px);
    box-shadow:
        14px 14px 28px #a3b1c6,
        -14px -14px 28px #ffffff;
}

.cjenik-detail-card--popular {
    border: 2px solid rgba(255, 77, 0, 0.4);
}

.cjenik-detail-card--custom {
    border: 2px solid rgba(255, 77, 0, 0.25);
    background: linear-gradient(135deg, #e0e5ec 0%, #e8ecf2 100%);
}

.cjenik-detail-badge {
    display: inline-block;
    padding: 5px 14px;
    background: #e0e5ec;
    color: #ff4d00;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 20px;
    box-shadow:
        4px 4px 8px #a3b1c6,
        -4px -4px 8px #ffffff;
    margin-bottom: 16px;
    align-self: flex-start;
}

.cjenik-detail-name {
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 8px 0;
}

.cjenik-detail-tagline {
    font-size: clamp(13px, 1.1vw, 15px);
    line-height: 1.5;
    color: #64748b;
    margin: 0 0 20px 0;
    font-weight: 400;
}

.cjenik-detail-price-block {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.cjenik-detail-from {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

.cjenik-detail-amount {
    font-size: clamp(32px, 3vw, 44px);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.03em;
    line-height: 1;
}

.cjenik-detail-amount--text {
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 700;
    color: #ff4d00;
}

.cjenik-detail-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 24px;
}

.cjenik-detail-maintenance {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.cjenik-detail-delivery {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 400;
}

.cjenik-detail-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(13px, 1.5vh, 17px) 24px;
    background: #e0e5ec;
    color: #ff4d00;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 700;
    border-radius: 14px;
    text-decoration: none;
    letter-spacing: 0.02em;
    box-shadow:
        6px 6px 12px #a3b1c6,
        -6px -6px 12px #ffffff;
    transition: all 0.25s ease;
}

.cjenik-detail-cta:hover {
    box-shadow:
        3px 3px 6px #a3b1c6,
        -3px -3px 6px #ffffff;
    transform: translateY(1px);
    color: #e04400;
}

.cjenik-detail-example {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: clamp(13px, 1.5vh, 17px) 24px;
    background: transparent;
    color: #5a677a;
    font-size: clamp(13px, 1vw, 14px);
    font-weight: 600;
    border-radius: 14px;
    text-decoration: none;
    letter-spacing: 0.02em;
    border: 1.5px solid rgba(90, 103, 122, 0.3);
    transition: all 0.25s ease;
}

.cjenik-detail-example:hover {
    border-color: #ff4d00;
    color: #ff4d00;
    background: rgba(255, 77, 0, 0.05);
}

.cjenik-detail-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cjenik-detail-highlights {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: clamp(16px, 2vh, 24px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.cjenik-highlight {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cjenik-highlight-label {
    font-size: clamp(12px, 1vw, 13px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ff4d00;
}

.cjenik-highlight-text {
    font-size: clamp(14px, 1.1vw, 15px);
    line-height: 1.5;
    color: #475569;
    font-weight: 400;
}

.cjenik-detail-features {
    display: flex;
    flex-direction: column;
}

.cjenik-detail-features-title {
    font-size: clamp(12px, 1vw, 13px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-top: clamp(16px, 2vh, 24px);
    margin-bottom: clamp(16px, 2vh, 24px);
}

.cjenik-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vh, 16px);
}

.cjenik-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(14px, 1.1vw, 15px);
    color: #1e293b;
    font-weight: 500;
    line-height: 1.4;
}

.cjenik-detail-item--missing {
    opacity: 0.35;
}

.cjenik-detail-item--missing span:last-child {
    text-decoration: line-through;
    text-decoration-color: rgba(100, 116, 139, 0.4);
}

.cjenik-detail-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 7px;
    background: #e0e5ec;
    box-shadow:
        3px 3px 6px #a3b1c6,
        -3px -3px 6px #ffffff;
}

.cjenik-detail-check svg {
    width: 14px;
    height: 14px;
    stroke: #ff4d00;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cjenik-detail-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 7px;
    background: #e0e5ec;
    box-shadow:
        2px 2px 4px #a3b1c6,
        -2px -2px 4px #ffffff;
    position: relative;
}

.cjenik-detail-x::before,
.cjenik-detail-x::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 2px;
    background: #cbd5e1;
    border-radius: 1px;
}

.cjenik-detail-x::before {
    transform: rotate(45deg);
}

.cjenik-detail-x::after {
    transform: rotate(-45deg);
}

/* Tablet responsive */
@media (max-width: 768px) {
    .cjenik-detail-grid {
        grid-template-columns: 1fr;
        gap: clamp(24px, 4vh, 40px);
        max-width: 480px;
    }

    .cjenik-detail-card {
        max-width: 100%;
    }

    .cjenik-detail-left {
        justify-content: center;
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .cjenik-detail-grid {
        gap: 24px;
        max-width: 100%;
    }

    .cjenik-detail-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .cjenik-detail-name {
        font-size: 26px;
    }

    .cjenik-detail-amount {
        font-size: 32px;
    }

    .cjenik-detail-amount--text {
        font-size: 26px;
    }

    .cjenik-detail-item {
        font-size: 14px;
        gap: 10px;
    }

    .cjenik-detail-check,
    .cjenik-detail-x {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .cjenik-detail-check svg {
        width: 12px;
        height: 12px;
    }

    .cjenik-detail-cta {
        padding: 14px 20px;
        font-size: 14px;
    }
}

.pricing-option:hover {
    box-shadow: 
        10px 10px 18px #a3b1c6,
        -10px -10px 18px #ffffff;
    transform: translateY(-2px);
}

.pricing-input {
    display: none;
}

.pricing-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #e0e5ec;
    border: none;
    margin-right: clamp(16px, 2vw, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
    box-shadow:
        5px 5px 10px #a3b1c6,
        -5px -5px 10px #ffffff;
}

.pricing-option:hover .pricing-checkbox {
    box-shadow:
        3px 3px 6px #a3b1c6,
        -3px -3px 6px #ffffff;
}

.pricing-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.pricing-name {
    font-size: clamp(15px, 1.1vw, 16px);
    font-weight: 600;
    color: #5a677a;
    margin-bottom: 2px;
    display: block;
    transition: color 0.4s ease;
}

.pricing-delivery {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ba8bd;
    background: rgba(155, 168, 189, 0.15);
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
    padding: 4px 8px;
    box-shadow: inset 2px 2px 4px rgba(163, 177, 198, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.5);
}

.pricing-price-wrap {
    margin-left: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.pricing-amount {
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 700;
    color: #5a677a;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.pricing-amount::before {
    content: 'od';
    font-size: 14px;
    font-weight: 600;
    color: #9ba8bd;
    text-transform: lowercase;
}

/* Hide "od" for Custom pricing (Po mjeri) */
.pricing-option:has(input[value="Custom"]) .pricing-amount::before {
    content: none;
}

.pricing-period {
    font-size: clamp(11px, 0.85vw, 12px);
    color: #9ba8bd;
    font-weight: 500;
    transition: color 0.3s ease;
}

.pricing-checkmark {
    width: 14px;
    height: 14px;
    stroke: #ff4d00;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.pricing-option:has(.pricing-input:checked) {
    background-color: #e0e5ec;
    z-index: 2;
    box-shadow: 
        inset 5px 5px 10px #a3b1c6,
        inset -5px -5px 10px #ffffff;
    border: 2px solid #ff4d00;
    transform: none;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pricing-option:has(.pricing-input:checked) .pricing-checkbox {
    background: #ff4d00;
    border-color: #ff4d00;
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pricing-option:has(.pricing-input:checked) .pricing-checkmark {
    opacity: 1;
    stroke: #ffffff;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pricing-option:has(.pricing-input:checked) .pricing-name,
.pricing-option:has(.pricing-input:checked) .pricing-amount {
    color: #9ba8bd;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pricing-option:has(.pricing-input:checked) .pricing-period {
    color: #9ba8bd;
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pricing-option:has(.pricing-input:checked) .pricing-delivery {
    color: #ff4d00;
    background: rgba(155, 168, 189, 0.15);
    box-shadow: inset 2px 2px 4px rgba(163, 177, 198, 0.1), inset -2px -2px 4px rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Billing Toggle */
.pricing-billing-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: #e8e8e8;
    border-radius: 40px;
    width: fit-content;
    margin-bottom: 8px;
}

.billing-label {
    font-size: 15px;
    font-weight: 600;
    color: rgba(26, 29, 36, 0.5);
    cursor: pointer;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.billing-label.active {
    color: #1a1d24;
}

.discount-badge {
    background: rgba(255, 77, 0, 0.1);
    color: #ff4d00;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(26, 29, 36, 0.2);
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #ff4d00;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Right: Features List */
.pricing-right {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    height: 55vh;
    max-height: 480px;
    padding: 0 16px;
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
}

.pricing-features-title {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-shadow: none;
}

.pricing-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    gap: 0;
    overflow-y: visible;
    max-height: none;
}

/* Slide Up Fade Animation for Features */
@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.pricing-feature-section-title {
    font-size: clamp(12px, 1vw, 13px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-top: clamp(16px, 2vh, 24px);
    margin-bottom: clamp(8px, 1vh, 12px);
    list-style: none;
}

.pricing-feature-section-title:first-child {
    margin-top: 0;
}

.pricing-feature-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 0;
    background: transparent;
    margin-bottom: 0;
    box-shadow: none;
    border-bottom: none;
    transition: opacity 0.3s ease;
}

.pricing-feature-item:first-child {
    padding-top: 0;
}

.pricing-feature-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.pricing-feature-icon {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #e0e5ec;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        3px 3px 6px rgba(163, 177, 198, 0.6),
        -3px -3px 6px rgba(255, 255, 255, 0.7);
}

.pricing-feature-icon svg {
    width: 14px;
    height: 14px;
    stroke: #ff4d00;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pricing-feature-icon.missing {
    box-shadow:
        inset 3px 3px 6px #a3b1c6,
        inset -3px -3px 6px #ffffff;
}

.pricing-feature-icon.missing svg {
    display: none;
}

.pricing-feature-text {
    font-size: clamp(13px, 1vw, 14px);
    font-weight: 500;
    color: #475569;
    line-height: 1.4;
}

.pricing-feature-text strong {
    font-weight: 700;
    color: #0f172a;
}

.pricing-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 24px;
    padding-top: 0;
}

/* Pricing button uses universal .pricing-btn-neumorphic class now synced with pill buttons */

/* Read more button — sizing override only, base from universal button */
.cjenik-more {
    padding: clamp(8px, 1vh, 12px) clamp(16px, 1.8vw, 24px);
    font-size: clamp(12px, 0.9vw, 14px);
    flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .panel-section--cjenik {
        height: auto !important;
    }

    .panel-section--cjenik-detail .panel-card {
        background: linear-gradient(135deg, #0a0c14 0%, #0f1419 25%, #1a1f2e 50%, #0f1419 75%, #0a0c14 100%);
        position: relative;
        top: auto;
        height: auto;
        min-height: 100vh;
    }

    .panel-section--projects {
        height: auto;
    }

    .cjenik-content {
        height: auto !important;
        min-height: auto;
        max-height: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: clamp(48px, 6vh, 64px) clamp(20px, 4vw, 32px);
    }

    .pricing-right {
        height: auto;
        max-height: none;
        padding: 0;
    }
}


/* ========== ABOUT PAGE ========== */

 .about-story {
     height: 100vh;
     padding: 0;
 }

 .about-story-inner {
     position: relative;
     height: 100%;
     width: 100%;
     display: grid;
     grid-template-columns: minmax(180px, 240px) 1fr;
     align-items: end;
     gap: clamp(18px, 2.5vw, 36px);
     padding: clamp(20px, 4vw, 56px);
 }

 .about-story-nav {
     align-self: center;
 }

 .about-story-nav-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .about-story-nav-item {
     display: grid;
     grid-template-columns: 44px 1fr;
     gap: 10px;
     font-size: 11px;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: rgba(240, 248, 255, 0.55);
 }

 .about-story-nav-num {
     color: rgba(240, 248, 255, 0.35);
     font-variant-numeric: tabular-nums;
 }

 .about-story-hero {
     width: 100%;
 }

 .about-story-title {
     margin: 0 0 clamp(16px, 3vh, 28px);
     font-size: clamp(44px, 8.5vw, 124px);
     line-height: 0.9;
     letter-spacing: -0.02em;
     text-transform: uppercase;
 }

 .about-story-title-line {
     display: block;
 }

 .about-story-steps {
     display: grid;
     gap: clamp(18px, 3vh, 28px);
     max-width: 980px;
 }

 .about-step {
     display: grid;
     grid-template-columns: 76px 1fr;
     gap: clamp(14px, 2vw, 24px);
     align-items: start;
 }

 .about-step-kicker {
     font-size: 12px;
     letter-spacing: 0.08em;
     color: rgba(240, 248, 255, 0.45);
     font-variant-numeric: tabular-nums;
 }

 .about-step-text {
     margin: 0;
     font-size: clamp(16px, 2.2vw, 28px);
     line-height: 1.18;
     letter-spacing: -0.01em;
     text-transform: uppercase;
     color: rgba(240, 248, 255, 0.92);
 }

 .about-step-cta {
     margin-top: 14px;
     justify-self: start;
 }

 @media (max-width: 768px) {
     .about-story-inner {
         grid-template-columns: 1fr;
         align-items: start;
         padding: clamp(18px, 5vw, 36px);
     }

     .about-story-nav {
         order: 2;
         margin-top: 18px;
     }

     .about-step {
         grid-template-columns: 62px 1fr;
     }
 }

 @media (max-width: 480px) {
     .about-story {
         height: auto;
         min-height: 100vh;
     }

     .about-step {
         grid-template-columns: 1fr;
         gap: 10px;
     }

     .about-step-kicker {
         font-size: 11px;
     }

     .about-step-text {
         font-size: 16px;
         line-height: 1.25;
     }
 }

/* Hero text overlay */
.about-hero-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 clamp(32px, 8vw, 120px);
    z-index: 2;
    gap: clamp(16px, 3vh, 36px);
}

.about-hero-heading {
    font-size: clamp(3.5vw, 8vw, 9vw);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #F0F8FF;
    margin: 0;
    z-index: 2;
    position: relative;
}

.about-hero-sub {
    font-size: clamp(1.2vw, 2.2vw, 2.5vw);
    line-height: 1.4;
    color: rgba(240, 248, 255, 0.75);
    margin: clamp(16px, 2vh, 24px) 0 0;
    max-width: 45vw;
    z-index: 2;
    position: relative;
}

/* Panel card for about detail */
#about-detail {
    height: auto;
}

.about-detail-card {
    overflow: visible;
    align-items: stretch;
    justify-content: flex-start;
}

/* Scrollable container inside panel-card */
.about-scroll {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(48px, 8vw, 100px) 0;
    display: grid;
    grid-template-columns: 25vw 1fr; /* Reserve space for stepper */
    gap: 0;
}

.about-block {
    position: relative;
    padding: clamp(48px, 6vh, 80px) 0;
}

.about-block--visual {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-block-content {
    margin-left: 0;
    margin-right: 10vw;
    width: auto; /* Allow fluid width in grid */
    max-width: none;
    position: relative;
    z-index: 8;
    display: block;
}

.about-block-num {
    display: inline-block;
    font-size: 0.65em; /* Smaller number relative to text */
    color: inherit;
    font-weight: 500;
    margin-right: 0.8em;
    width: 4em;
    margin-left: -4em;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    vertical-align: 2px; /* Slight lift to align nicely with caps */
}

.about-block-text {
    margin: 0;
    font-size: clamp(18px, 2.75vw, 30px);
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: rgba(26, 29, 36, 0.15); /* Dimmed initially for animation */
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-indent: 4em; /* Indent first line */
    padding-left: 0;
}

.about-block-word {
    display: inline;
    color: rgba(26, 29, 36, 0.15);
    transition: color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-block-word.revealed,
.about-block-num.revealed {
    color: #1a1d24;
}

.about-highlight {
    /* Style is applied to the words, but we keep this for reference if needed */
    font-weight: 800;
}

/* When a highlight word is revealed, it takes the highlight color (orange) */
.about-block-word.about-highlight.revealed {
    color: #ff4d00;
}

.about-block-text em {
    font-style: italic;
    color: #ff4d00;
}

 .about-stepper {
     display: flex;
     flex-direction: column;
     gap: 10px;
     padding: 18px 0 6px;
     position: sticky;
     left: 12.5vw;
     top: clamp(86px, 11vh, 132px);
     z-index: 9;
     transform: translateX(-50%) translateZ(0);
     will-change: transform;
     align-items: center;
     align-self: flex-start; /* Important for sticky in flex/grid */
     height: fit-content;
 }

 .about-stepper-label {
     display: none;
 }

 .about-stepper-title {
     display: none;
 }

 .about-stepper-items {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-top: 6px;
 }

 .about-stepper-item {
     display: grid;
     grid-template-columns: 32px 1fr;
     gap: 6px;
     text-decoration: none;
     color: rgba(26, 29, 36, 0.55);
     font-size: clamp(0.6vw, 0.8vw, 1vw);
     letter-spacing: 0.12em;
     text-transform: uppercase;
     width: fit-content;
     transition: color 0.25s ease;
     font-weight: 600;
 }

 .about-stepper-num {
     color: rgba(26, 29, 36, 0.35);
     font-variant-numeric: tabular-nums;
 }

 .about-stepper-item:hover {
     color: #1a1d24;
 }

 .about-stepper-item.is-active {
     color: #1a1d24;
 }

 .about-stepper-item.is-active .about-stepper-num {
     color: #ff4d00;
 }

 .about-stepper-item:hover .about-stepper-num {
     color: #ff4d00;
 }

/* Visual decorative elements */
.about-block-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
    transform: translateZ(0);
    will-change: transform, opacity;
}

.about-block-orb--1 {
    width: 600px;
    height: 600px;
    top: 50%;
    right: -10%;
    transform: translateY(-50%) translateZ(0);
    background: radial-gradient(circle, 
        rgba(255, 77, 0, 0.4) 0%, 
        rgba(255, 165, 0, 0.3) 35%, 
        rgba(255, 200, 100, 0.15) 70%, 
        transparent 100%);
}

.about-block-orb--2 {
    width: 500px;
    height: 500px;
    top: 20%;
    left: -8%;
    transform: translateZ(0);
    background: radial-gradient(circle, 
        rgba(255, 200, 100, 0.35) 0%, 
        rgba(255, 150, 50, 0.25) 40%, 
        rgba(255, 100, 0, 0.12) 70%, 
        transparent 100%);
}

.about-block-orb--3 {
    width: 700px;
    height: 700px;
    top: 50%;
    left: -15%;
    transform: translateY(-50%) translateZ(0);
    background: radial-gradient(circle, 
        rgba(100, 150, 255, 0.35) 0%, 
        rgba(150, 100, 255, 0.25) 40%, 
        rgba(200, 150, 255, 0.12) 70%, 
        transparent 100%);
}

.about-block-orb--4 {
    width: 800px;
    height: 800px;
    top: 50%;
    right: -20%;
    transform: translateY(-50%) translateZ(0);
    background: radial-gradient(circle, 
        rgba(255, 100, 150, 0.4) 0%, 
        rgba(255, 150, 100, 0.3) 35%, 
        rgba(255, 200, 150, 0.15) 70%, 
        transparent 100%);
}

.about-block-orb--5 {
    width: 550px;
    height: 550px;
    bottom: 10%;
    left: -5%;
    transform: translateZ(0);
    background: radial-gradient(circle, 
        rgba(150, 100, 255, 0.38) 0%, 
        rgba(200, 150, 255, 0.28) 40%, 
        rgba(255, 200, 200, 0.14) 70%, 
        transparent 100%);
}

.about-block-lines {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.25;
}

.about-block-lines::before,
.about-block-lines::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(26, 29, 36, 0.2);
    border-radius: 50%;
}

.about-block-lines::before {
    width: 400px;
    height: 400px;
    top: 20%;
    left: 10%;
    animation: float-line 20s ease-in-out infinite;
    transform: translateZ(0);
}

.about-block-lines::after {
    width: 600px;
    height: 600px;
    bottom: 10%;
    right: 5%;
    animation: float-line 25s ease-in-out infinite reverse;
    transform: translateZ(0);
}

@keyframes float-line {
    0%, 100% { transform: translate(0, 0) rotate(0deg) translateZ(0); }
    25% { transform: translate(20px, -30px) rotate(5deg) translateZ(0); }
    50% { transform: translate(-15px, 20px) rotate(-3deg) translateZ(0); }
    75% { transform: translate(25px, 15px) rotate(4deg) translateZ(0); }
}

.about-block-accent {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
    transform: translateZ(0);
}

.about-block-accent--1 {
    width: 280px;
    height: 280px;
    top: 15%;
    left: 5%;
    border: 2px solid rgba(255, 77, 0, 0.3);
    border-radius: 50%;
}

.about-block-accent--2 {
    width: 200px;
    height: 2px;
    top: 30%;
    right: 8%;
    background: linear-gradient(90deg, transparent, rgba(255, 77, 0, 0.4), transparent);
}

.about-block-accent--3 {
    width: 320px;
    height: 320px;
    bottom: 20%;
    right: 10%;
    border: 2px solid rgba(100, 150, 255, 0.25);
    border-radius: 12px;
    transform: rotate(12deg) translateZ(0);
}

.about-block-accent--4 {
    width: 240px;
    height: 240px;
    top: 25%;
    left: 8%;
    border: 2px solid rgba(255, 100, 150, 0.3);
    border-radius: 50%;
}

.about-block-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.08;
    background-image: 
        linear-gradient(rgba(26, 29, 36, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 29, 36, 0.15) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: translateZ(0);
}

.about-highlight {
    color: #1a1d24;
    font-weight: 400;
}

.about-story-track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(26, 29, 36, 0), rgba(26, 29, 36, 0.18), rgba(26, 29, 36, 0));
    margin: 24px 0;
}

.projects-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(26, 29, 36, 0.1) 0%, rgba(26, 29, 36, 0.3) 50%, rgba(26, 29, 36, 0.1) 100%);
    margin: 24px 0;
}

.projects-visit-button {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: start;
    margin-bottom: 16px;
}

.about-values {
    margin-top: clamp(30px, 5vh, 64px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 20px);
}

.about-value-card {
    border: 1px solid rgba(26, 29, 36, 0.12);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.42)),
        radial-gradient(120% 140% at 90% 10%, rgba(255, 77, 0, 0.08), rgba(255, 77, 0, 0));
    padding: clamp(18px, 2.2vw, 24px);
}

.about-value-title {
    margin: 0 0 8px;
    font-size: clamp(1.4vw, 2.5vw, 2.8vw);
    font-weight: 700;
    color: #1a1d24;
    margin: 0 0 clamp(8px, 1vh, 12px);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.about-value-text {
    margin: 0;
    font-size: clamp(1vw, 1.8vw, 2vw);
    line-height: 1.5;
    color: rgba(26, 29, 36, 0.75);
}

.about-block-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(14px, 1.1vw, 17px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(26, 29, 36, 0.5);
    text-decoration: none;
    padding: 12px 24px;
    border: 1.5px solid rgba(26, 29, 36, 0.15);
    border-radius: 98px;
    width: fit-content;
    transition: color 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.about-block-link:hover {
    color: #1a1d24;
    border-color: rgba(255, 77, 0, 0.6);
    box-shadow:
        0 0 0 1px rgba(255, 77, 0, 0.4),
        0 0 18px rgba(255, 77, 0, 0.3),
        0 0 42px rgba(255, 77, 0, 0.15);
}

.about-arrow {
    transition: transform 0.3s ease;
    display: inline-block;
}

.about-block-link:hover .about-arrow {
    transform: translateX(4px);
}

/* Tablet */
@media (max-width: 768px) {
    .about-hero-inner {
        padding: 0 clamp(20px, 6vw, 48px);
    }

    .about-hero-heading {
        font-size: clamp(40px, 13vw, 90px);
    }

    .about-hero-sub {
        font-size: clamp(14px, 3.5vw, 18px);
    }

    .about-scroll {
        padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 48px);
    }

    .about-block {
        padding: clamp(32px, 4vh, 56px) 0;
        gap: clamp(16px, 2.5vh, 28px);
    }

    .about-block-text {
        font-size: clamp(24px, 7vw, 42px);
        word-spacing: 0.12em;
    }

    .about-stepper-title {
        font-size: clamp(36px, 8vw, 60px);
    }

    .about-block-link {
        font-size: clamp(13px, 3vw, 16px);
        padding: 10px 20px;
    }

    .about-block--visual {
        min-height: 50vh;
    }

    .about-block-content {
        grid-template-columns: 62px 1fr;
        gap: clamp(12px, 2vw, 20px);
    }

    .about-block-text {
        font-size: clamp(26px, 7vw, 48px);
        word-spacing: 0.12em;
    }

    .about-block-orb--1,
    .about-block-orb--2,
    .about-block-orb--3,
    .about-block-orb--4,
    .about-block-orb--5 {
        width: 450px;
        height: 450px;
        filter: blur(50px);
        opacity: 0.45;
    }

    .about-block-accent--1,
    .about-block-accent--2,
    .about-block-accent--3,
    .about-block-accent--4 {
        opacity: 0.1;
    }

    .about-block-lines::before {
        width: 300px;
        height: 300px;
    }

    .about-block-lines::after {
        width: 450px;
        height: 450px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .about-hero-inner {
        padding: 0 clamp(16px, 5vw, 32px);
    }

    .about-hero-heading {
        font-size: clamp(36px, 14vw, 64px);
    }

    .about-hero-sub {
        font-size: clamp(13px, 4vw, 16px);
    }

    .about-scroll {
        padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 36px);
    }

    .about-block {
        padding: clamp(24px, 3.5vh, 40px) 0;
        gap: clamp(14px, 2vh, 22px);
    }

    .about-block-text {
        font-size: clamp(22px, 8vw, 36px);
        word-spacing: 0.1em;
    }

    .about-stepper-item {
        grid-template-columns: 42px 1fr;
        font-size: 11px;
    }

    .about-block-link {
        font-size: clamp(12px, 3.5vw, 15px);
        padding: 10px 18px;
    }

    .about-hero-inner {
        padding: 0 clamp(16px, 5vw, 32px);
    }

    .about-hero-heading {
        font-size: clamp(40px, 15vw, 72px);
    }

    .about-detail-card {
        padding: clamp(20px, 4vw, 32px);
    }

    .about-scroll {
        padding: clamp(20px, 4vw, 32px) clamp(18px, 3vw, 28px);
    }

    .about-block {
        padding: clamp(24px, 3.5vh, 40px) 0;
    }

    .about-block--visual {
        min-height: auto;
        padding: clamp(32px, 5vh, 56px) 0;
    }

    .about-block-content {
        grid-template-columns: 1fr;
        gap: clamp(12px, 2vh, 18px);
    }

    .about-block-num {
        display: block;
        width: auto;
        margin-left: 0;
        font-size: 11px;
    }

    .about-block-text {
        font-size: clamp(24px, 9vw, 40px);
        text-indent: 0;
        line-height: 1.18;
        word-spacing: 0.1em;
        text-align: center;
    }

    .about-story-cta {
        margin: 0 auto;
        display: block;
        width: fit-content;
        transform: scale(1.2);
    }

    .about-stepper-title {
        font-size: clamp(32px, 10vw, 52px);
    }

    .about-stepper-item {
        grid-template-columns: 42px 1fr;
        font-size: 10px;
    }

    .about-block-link {
        font-size: clamp(12px, 3.5vw, 15px);
        padding: 10px 18px;
    }

    .about-block-orb--1,
    .about-block-orb--2,
    .about-block-orb--3,
    .about-block-orb--4,
    .about-block-orb--5 {
        width: 320px;
        height: 320px;
        filter: blur(40px);
        opacity: 0.35;
    }

    .about-block-accent--1,
    .about-block-accent--2,
    .about-block-accent--3,
    .about-block-accent--4 {
        opacity: 0.08;
    }

    .about-block-grid {
        background-size: 40px 40px;
        opacity: 0.05;
    }

    .about-block-orb--1 {
        right: -30%;
    }

    .about-block-orb--3 {
        left: -30%;
    }

    .about-block-orb--4 {
        right: -35%;
    }

    .about-block-lines::before {
        width: 220px;
        height: 220px;
    }

    .about-block-lines::after {
        width: 320px;
        height: 320px;
    }
}

/* About final responsive overrides */
@media (max-width: 768px) {
    .about-scroll {
        display: block;
        grid-template-columns: 1fr;
        gap: 0;
        padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 48px);
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .about-stepper {
        display: none;
    }
    
    .about-story-track {
        width: 100%;
        max-width: 100%;
    }
    
    .about-block-content {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
    
    .about-detail-card {
        overflow-x: hidden;
    }

    .about-values {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .about-stepper {
        display: none;
    }

    .about-stepper-items {
        gap: 6px;
    }

    .about-stepper-item {
        font-size: 10px;
    }
    
    .about-scroll {
        padding: clamp(28px, 5vw, 44px) clamp(20px, 5vw, 36px);
        width: 100%;
        overflow-x: hidden;
    }
    
    .about-block {
        width: 100%;
        overflow-x: hidden;
    }
}

/* ========== FAQ SECTION ========== */

.panel-section--faq .panel-card {
    overflow: hidden;
}

.faq-layout {
    display: grid;
    /* Give FAQ left column a bit less space and the questions more space */
    grid-template-columns: minmax(280px, 0.7fr) minmax(400px, 1.3fr);
    gap: clamp(40px, 6vw, 100px);
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(40px, 5vh, 80px) clamp(24px, 4vw, 60px);
    height: 100%;
    align-items: start;
}

.faq-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(16px, 2vh, 24px);
    height: 100%;
    padding-top: clamp(20px, 4vh, 60px);
}

.faq-subtitle {
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ff4d00;
    margin-bottom: 8px;
    display: inline-block;
}

.faq-left-title {
    font-size: clamp(36px, 4.5vw, 64px);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    color: #1a1d24;
    letter-spacing: -0.04em;
    margin: 0;
    position: relative;
    padding-top: clamp(20px, 2.5vw, 36px);
}

.faq-left-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: clamp(40px, 5vw, 60px);
    height: 3px;
    background: #ff4d00;
}

.faq-left-desc {
    font-size: clamp(15px, 1.2vw, 18px);
    color: rgba(26, 29, 36, 0.7);
    line-height: 1.6;
    margin: 0;
    max-width: 420px;
    margin-bottom: 12px;
}

.faq-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1a1d24;
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.faq-btn:hover {
    color: #ff4d00;
    border-bottom-color: #ff4d00;
}

.faq-btn .arrow {
    transition: transform 0.3s ease;
}

.faq-btn:hover .arrow {
    transform: translateX(5px);
}

.faq-right {
    width: 100%;
}

.faq-item {
    border-bottom: 1px solid rgba(17, 19, 24, 0.08);
}

.faq-item:first-child {
    border-top: 1px solid rgba(17, 19, 24, 0.08);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: clamp(24px, 3vh, 36px) 0;
    padding-left: 48px;
    padding-right: 48px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: clamp(17px, 1.3vw, 21px);
    font-weight: 600;
    color: #111318;
    text-align: left;
    line-height: 1.4;
    transition: color 0.25s ease;
}

.faq-question:hover {
    color: #ff4d00;
}

.faq-icon {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: color 0.35s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease;
}

.faq-icon::before {
    width: 16px;
    height: 2px;
    transform: translate(-50%, -50%);
}

.faq-icon::after {
    width: 2px;
    height: 16px;
    transform: translate(-50%, -50%);
}

.faq-item.active .faq-icon {
    color: #ff4d00;
}

.faq-item.active .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding-left: calc(48px + 2ch + 14px); /* Left padding of question (48px) + number width (2ch) + gap (14px) */
    padding-right: 48px;
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-answer p {
    font-size: clamp(15px, 1.15vw, 18px);
    color: rgba(17, 19, 24, 0.55);
    line-height: 1.7;
    margin: 0;
    padding-bottom: clamp(18px, 2.2vh, 26px);
    padding-right: calc(24px + 14px); /* Icon width (24px) + gap (14px) */
}

@media (max-width: 768px) {
    .faq-layout {
        grid-template-columns: 1fr;
        gap: clamp(24px, 4vh, 48px);
        padding: clamp(32px, 4vh, 56px) clamp(20px, 4vw, 32px);
    }

    .faq-left {
        height: auto;
        padding-top: 0;
        gap: 16px;
        margin-bottom: 24px;
    }
    
    .faq-left-desc {
        font-size: 14px;
        max-width: 100%;
    }

    .faq-left-title {
        font-size: clamp(34px, 10vw, 60px);
    }

    .faq-question {
        padding-left: 0;
        padding-right: 0;
    }
    
    .faq-answer {
        padding-left: calc(2ch + 14px); /* Number width (2ch) + gap (14px) */
        padding-right: 0;
    }
    
    .faq-answer p {
        padding-right: calc(24px + 14px); /* Icon width (24px) + gap (14px) */
    }
}

@media (max-width: 480px) {
    .faq-layout {
        padding: clamp(24px, 3vh, 40px) clamp(16px, 3vw, 24px);
    }

    .faq-left-title {
        font-size: clamp(30px, 12vw, 52px);
    }

    .faq-question {
        font-size: clamp(14px, 3.8vw, 16px);
        padding: clamp(16px, 2vh, 22px) 0;
    }
    
    .faq-answer {
        padding-left: calc(2ch + 14px); /* Number width (2ch) + gap (14px) */
        padding-right: 0;
    }
    
    .faq-answer p {
        padding-right: calc(24px + 14px); /* Icon width (24px) + gap (14px) */
    }
}

.footer-email-link {
    text-transform: none !important;
    line-height: 1.1;
    padding-bottom: 2px;
    margin-top: 18px;
}

.footer-email-link::after,
.footer-email-link::before {
    bottom: 0px;
}

/* ========== FOOTER/CONTACT SECTION ========== */
.footer-section {
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #05070c;
    background-image:
        radial-gradient(1200px 900px at 86% 12%, rgba(0, 62, 110, 0.95) 0%, rgba(0, 36, 70, 0.55) 45%, rgba(5, 7, 12, 0) 72%),
        radial-gradient(900px 700px at 20% 30%, rgba(0, 0, 0, 0.78) 0%, rgba(5, 7, 12, 0) 62%),
        linear-gradient(135deg, #05070c 0%, #05070c 38%, #001a30 70%, #00345f 100%);
    overflow: hidden;
}

.footer-inner {
    position: relative;
    z-index: 5;
    width: min(90vw, 1280px);
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(32px, 5vh, 56px);
    padding: clamp(80px, 12vh, 140px) 0 clamp(32px, 5vh, 60px);
}

/* Footer time with water reflection */
.footer-time-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(6px, 0.8vh, 12px);
}

.footer-time-location {
    font-size: clamp(11px, 0.85vw, 13px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(240, 248, 255, 0.35);
}

.footer-time-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.footer-time-main {
    font-size: clamp(36px, 6vw, 80px);
    font-weight: 800;
    color: #F0F8FF;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.footer-time-reflection {
    font-size: clamp(36px, 6vw, 80px);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: #F0F8FF;
    transform: scaleY(-1);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, transparent 75%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, transparent 75%);
    pointer-events: none;
    user-select: none;
    line-height: 1;
    margin-top: -2px;
}

.footer-time-date {
    font-size: clamp(12px, 0.95vw, 15px);
    font-weight: 500;
    color: rgba(240, 248, 255, 0.35);
    letter-spacing: 0.02em;
    margin-top: clamp(4px, 0.5vh, 8px);
}

/* Dashboard — flat, no cards */
.footer-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 64px);
    padding-top: clamp(16px, 2vh, 32px);
    border-top: 1px solid rgba(240, 248, 255, 0.06);
    padding-bottom: clamp(16px, 2vh, 32px);
    border-bottom: 1px solid rgba(240, 248, 255, 0.06);
}

.dash-col {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vh, 20px);
}

.dash-title {
    font-size: clamp(11px, 0.85vw, 13px);
    font-weight: 700;
    color: rgba(240, 248, 255, 0.35);
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Bar chart */
.dash-chart {
    display: flex;
    align-items: flex-end;
    gap: clamp(4px, 0.6vw, 8px);
    height: clamp(90px, 12vh, 160px);
}

.chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
    cursor: pointer;
}

.chart-bar-fill {
    width: 100%;
    border-radius: 3px 3px 0 0;
    background: rgba(240, 248, 255, 0.1);
    transition: background 0.3s ease, height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-height: 2px;
}

.chart-bar:hover .chart-bar-fill {
    background: rgba(240, 248, 255, 0.3);
}

.chart-bar--current .chart-bar-fill {
    background: #ff4d00;
}

.chart-bar.chart-bar--active .chart-bar-fill {
    background: #ff4d00;
}

.chart-bar-value {
    font-size: clamp(11px, 0.85vw, 14px);
    font-weight: 700;
    color: #F0F8FF;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.chart-bar-value:empty,
.chart-bar[data-count="0"] .chart-bar-value {
    visibility: hidden;
}

.chart-bar-label {
    font-size: clamp(10px, 0.7vw, 12px);
    font-weight: 600;
    color: rgba(240, 248, 255, 0.25);
    font-variant-numeric: tabular-nums;
}

.chart-bar--current .chart-bar-label {
    color: rgba(240, 248, 255, 0.6);
}


/* People dot grid */
.dash-dots {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1vw, 16px);
}

.dot {
    width: clamp(22px, 2.2vw, 32px);
    height: clamp(22px, 2.2vw, 32px);
    border-radius: 50%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dot:hover {
    transform: scale(1.15);
}

.dot--on {
    background: #F0F8FF;
}

.dot--off {
    background: rgba(240, 248, 255, 0.08);
    border: 1px dashed rgba(240, 248, 255, 0.15);
}

.dash-legend {
    display: flex;
    gap: clamp(16px, 1.8vw, 28px);
}

.dash-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(11px, 0.8vw, 13px);
    color: rgba(240, 248, 255, 0.4);
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-dot--on {
    background: #F0F8FF;
}

.legend-dot--off {
    background: rgba(240, 248, 255, 0.08);
    border: 1px dashed rgba(240, 248, 255, 0.15);
}

.menu-inverted .legend-dot--on {
    background: rgba(26, 29, 36, 0.1);
}

.menu-inverted .legend-dot--off {
    background: rgba(26, 29, 36, 0.08);
    border: 1px dashed rgba(26, 29, 36, 0.15);
}

.menu-inverted .legend-dot {
    background: rgba(26, 29, 36, 0.1);
}

/* Donut chart */
.dash-donut-wrap {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 40px);
}

.dash-donut {
    position: relative;
    width: clamp(100px, 12vw, 160px);
    height: clamp(100px, 12vw, 160px);
    flex-shrink: 0;
}

.donut-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.donut-segment {
    transition: opacity 0.3s ease;
}

.donut-total {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 2.8vw, 42px);
    font-weight: 800;
    color: #F0F8FF;
    letter-spacing: -0.02em;
    pointer-events: none;
}

.dash-donut-legend {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vh, 14px);
}

.donut-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(12px, 0.95vw, 15px);
    color: rgba(240, 248, 255, 0.6);
}

.donut-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.donut-legend-label {
    font-weight: 600;
    color: rgba(240, 248, 255, 0.8);
}

.donut-legend-count {
    font-weight: 400;
    color: rgba(240, 248, 255, 0.4);
    font-variant-numeric: tabular-nums;
}

/* Footer Hero CTA — large bold asymmetric typography */
.footer-hero-cta {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vh, 32px);
    padding-bottom: clamp(32px, 4vh, 56px);
    border-bottom: 1px solid rgba(240, 248, 255, 0.06);
    align-items: center;
}

.footer-hero-heading {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: clamp(36px, 7.5vw, 120px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: #F0F8FF;
    text-transform: uppercase;
    text-align: left;
    max-width: 90vw;
}

.footer-hero-line {
    display: block;
}

.footer-hero-line--indent-sm {
    padding-left: clamp(32px, 5vw, 100px);
}

.footer-hero-line--indent-lg {
    padding-left: clamp(64px, 10vw, 200px);
}

.footer-hero-line--accent {
    color: rgba(240, 248, 255, 0.35);
}

.footer-hero-dot {
    color: #ff4d00;
}

.footer-block-title {
    font-size: clamp(12px, 0.9vw, 14px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(240, 248, 255, 0.3);
    margin-bottom: 12px;
}

/* Footer mid — two-column: info left, time right */
.footer-mid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(32px, 4vw, 64px);
    padding-bottom: clamp(24px, 3vh, 40px);
    border-bottom: 1px solid rgba(240, 248, 255, 0.06);
}

.footer-mid-left {
    display: flex;
    gap: clamp(32px, 4vw, 64px);
    flex-wrap: wrap;
}

.footer-mid-right {
    flex-shrink: 0;
}

.footer-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.footer-block-link {
    font-size: clamp(12px, 0.9vw, 14px);
    color: rgba(240, 248, 255, 0.6);
    text-decoration: none;
    font-weight: 500;
    line-height: 1.1;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    position: relative;
    padding: 4px 0;
    width: fit-content;
}

.footer-block-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: rgba(240, 248, 255, 0.08);
}

.footer-block-link::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(240, 248, 255, 0.5);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition:
        transform 1.15s cubic-bezier(0.22, 0, 0.15, 1),
        opacity 1.25s cubic-bezier(0.22, 0, 0.15, 1);
    will-change: transform;
}

.footer-block-link:hover::before,
.footer-block-link:focus-visible::before {
    transform: scaleX(1);
    opacity: 1;
    transition:
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-block-link:hover {
    color: #F0F8FF;
}

/* Footer link letter-by-letter animation */
.footer-nav-anim {
    display: inline-flex;
    align-items: flex-start;
}

.footer-nav-letter {
    display: inline-block;
    height: 1.1em;
    line-height: 1.1em;
    overflow: hidden;
    vertical-align: bottom;
}

.footer-nav-letter-inner {
    display: flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--d, 0s);
    will-change: transform;
}

.footer-nav-letter-top,
.footer-nav-letter-bottom {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.1em;
    height: 1.1em;
    display: block;
}

 .footer-block-link:hover .footer-nav-letter-inner,
 .footer-block-link:focus-visible .footer-nav-letter-inner,
 .menu-legal-link:hover .footer-nav-letter-inner,
 .menu-legal-link:focus-visible .footer-nav-letter-inner,
 .footer-legal-link:hover .footer-nav-letter-inner,
 .footer-legal-link:focus-visible .footer-nav-letter-inner {
     transform: translateY(calc(-1 * 1.1em));
 }

.footer-nav-letter-top {
    color: rgba(240, 248, 255, 0.6);
}

.footer-nav-letter-bottom {
    color: #F0F8FF;
    transform: translateY(0.03em);
}

.footer-block-text {
    font-size: clamp(13px, 1vw, 15px);
    color: rgba(240, 248, 255, 0.6);
    font-weight: 500;
    line-height: 1.6;
}

.footer-block-socials {
    display: flex;
    gap: clamp(12px, 1.5vw, 24px);
}

.footer-block-socials--col {
    flex-direction: column;
    gap: 4px;
}

.footer-sitemap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Footer graph — horizontal bars */
.footer-graph {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-graph-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-graph-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-graph-bar-label {
    font-size: clamp(10px, 0.75vw, 12px);
    font-weight: 600;
    color: rgba(240, 248, 255, 0.4);
    min-width: 80px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.footer-graph-bar-val {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    width: calc(var(--bar-h, 50%) * 0.8 + 28px);
    min-width: 28px;
    max-width: 120px;
    background: rgba(240, 248, 255, 0.08);
    border-radius: 4px;
    font-size: clamp(11px, 0.85vw, 13px);
    font-weight: 700;
    color: rgba(240, 248, 255, 0.6);
    font-variant-numeric: tabular-nums;
    transition: background 0.3s ease;
}

.footer-graph-bar--active .footer-graph-bar-val {
    background: #ff4d00;
    color: #fff;
}

/* Footer compact time — far right with reflection */
.footer-time-compact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.footer-time-city {
    font-size: clamp(10px, 0.75vw, 12px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(240, 248, 255, 0.3);
    margin-bottom: 4px;
}

.footer-time-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}

.footer-time-clock {
    font-size: clamp(28px, 3.5vw, 56px);
    font-weight: 800;
    color: #F0F8FF;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.4) 0%, #000 20%);
    mask-image: linear-gradient(to top, rgba(0,0,0,0.4) 0%, #000 20%);
}

.footer-time-reflection {
    font-size: clamp(28px, 3.5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: #F0F8FF;
    transform: scaleY(-1);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 80%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 80%);
    pointer-events: none;
    user-select: none;
    line-height: 1;
    margin-top: -0.1em;
}

.footer-time-date {
    font-size: clamp(11px, 0.85vw, 14px);
    font-weight: 500;
    color: rgba(240, 248, 255, 0.35);
    letter-spacing: 0.01em;
    margin-top: clamp(4px, 0.5vh, 8px);
}

/* Footer bottom — single clean row */
.footer-bottom {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 40px);
}

.footer-legal {
    display: flex;
    gap: clamp(16px, 2vw, 32px);
    flex-wrap: wrap;
}

.footer-legal-link {
    font-size: clamp(10px, 0.75vw, 12px);
    font-weight: 600;
    color: rgba(240, 248, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    height: 1.1em;
    display: inline-block;
    align-items: flex-start;
    transition: color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-legal-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 1px;
    background: rgba(240, 248, 255, 0.08);
}

.footer-legal-link::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;
    height: 1px;
    background: rgba(240, 248, 255, 0.5);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    transition:
        transform 1.15s cubic-bezier(0.22, 0, 0.15, 1),
        opacity 1.25s cubic-bezier(0.22, 0, 0.15, 1);
    will-change: transform;
}

.footer-legal-link:hover::before,
.footer-legal-link:focus-visible::before {
    transform: scaleX(1);
    opacity: 1;
    transition:
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-legal-link:hover {
    color: #F0F8FF;
}

.footer-copy {
    font-size: clamp(10px, 0.75vw, 12px);
    font-weight: 600;
    color: rgba(240, 248, 255, 0.3);
    letter-spacing: 0.06em;
    margin-left: auto;
}


/* ========== CUSTOM CURSOR ========== */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ff4d00;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.2s ease;
    will-change: transform;
}

.cursor-dot.visible {
    opacity: 1;
}

.cursor-dot.shrink {
    width: 12px;
    height: 12px;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

@media (hover: none), (pointer: coarse) {
    .cursor-dot {
        display: none;
    }
}

@media (max-width: 768px) {
    .footer-section {
        height: 100vh;
        min-height: 100vh;
    }

    .footer-inner {
        justify-content: space-between;
    }

    .footer-hero-heading {
        font-size: clamp(28px, 8vw, 56px);
    }

    .footer-hero-cta {
        padding-bottom: clamp(24px, 3vh, 32px);
    }

    .footer-mid {
        flex-direction: column;
        gap: clamp(20px, 3vh, 32px);
        padding-bottom: clamp(20px, 2.5vh, 32px);
    }

    .footer-mid-left {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(20px, 3vw, 32px);
        width: 100%;
    }

    .footer-block {
        gap: 6px;
    }

    .footer-time-compact {
        align-items: flex-start;
        text-align: left;
    }

    .footer-time-display {
        align-items: flex-start;
    }

    .footer-time-clock {
        font-size: clamp(24px, 6vw, 40px);
    }

    .footer-time-reflection {
        font-size: clamp(24px, 6vw, 40px);
    }

    .footer-bottom {
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-legal {
        gap: clamp(12px, 3vw, 20px);
    }
}

@media (max-width: 480px) {
    .footer-section {
        height: auto;
        min-height: 100vh;
    }

    .footer-inner {
        padding: clamp(40px, 6vh, 60px) 0 clamp(20px, 3vh, 28px);
        gap: clamp(16px, 2.5vh, 24px);
        justify-content: flex-end;
    }

    .footer-hero-heading {
        font-size: clamp(24px, 10vw, 42px);
        line-height: 0.95;
    }

    .footer-hero-cta {
        padding-bottom: clamp(12px, 2vh, 20px);
        gap: clamp(12px, 1.5vh, 18px);
    }

    .footer-mid {
        gap: clamp(12px, 2vh, 20px);
        padding-bottom: clamp(12px, 1.5vh, 18px);
    }

    .footer-mid-left {
        grid-template-columns: 1fr 1fr;
        gap: clamp(16px, 2.5vw, 24px);
    }

    .footer-block {
        gap: 5px;
    }

    .footer-block-title {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .footer-block-link {
        font-size: 11px;
        padding: 3px 0;
    }

    .footer-time-compact {
        margin-top: clamp(8px, 1.5vh, 16px);
    }

    .footer-time-clock {
        font-size: clamp(20px, 8vw, 36px);
    }

    .footer-time-reflection {
        font-size: clamp(20px, 8vw, 36px);
    }

    .footer-time-date {
        font-size: 10px;
        margin-top: 3px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: 0;
        padding-top: clamp(12px, 2vh, 16px);
    }

    .footer-legal {
        gap: clamp(10px, 2.5vw, 16px);
    }

    .footer-legal-link {
        font-size: 9px;
    }

    .footer-copy {
        margin-left: 0;
        font-size: 9px;
    }
}

/* Reset for semantic nav list */
ul.menu-nav,
ul.menu-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ========== HEADER ========== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2vh 0 8px 0;
    z-index: 2000;
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
}

.header.header-hidden {
    transform: translateY(-100%);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90vw;
    margin: 0 auto;
    mix-blend-mode: normal;
    pointer-events: auto;
}

.header .logo img {
    filter: brightness(0) invert(1);
}


/* ========== LOGO ========== */
.logo {
    display: inline-flex;
    position: relative;
    z-index: 1200;
    align-items: center;
    text-decoration: none;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo.visible {
    opacity: 1;
    transform: translateY(0);
}

.logo img {
    height: clamp(36px, 3.8vw, 52px);
    width: auto;
    display: block;
    transform: scale(1);
    transition: filter 0.4s ease;
}

/* ========== BREADCRUMB NAVIGATION ========== */
.breadcrumb {
    position: absolute;
    bottom: 0;
    right: calc(var(--btn-size) + 16px);
    display: flex;
    align-items: center;
    height: var(--btn-size);
    z-index: 10;
    pointer-events: auto;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-link {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.breadcrumb-link:hover {
    color: #ff4d00;
}

.breadcrumb-separator {
    color: #ff4d00;
    font-size: 14px;
    line-height: 1;
    user-select: none;
}

.breadcrumb-current {
    color: #ff4d00;
    font-weight: 500;
    white-space: nowrap;
}

/* Hide breadcrumb on mobile */
@media (max-width: 768px) {
    .breadcrumb {
        display: none;
    }
}

/* ========== HAMBURGER BUTTON ========== */
.hamburger {
    position: absolute;
    bottom: 0;
    right: 0;
    width: var(--btn-size);
    height: var(--btn-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #F0F8FF;
    border-radius: 14px;
    background: rgba(26, 29, 36, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    padding: 0;
    pointer-events: auto;
    transition: color 0.4s ease;
}

/* Hamburger visibility is now controlled by parent .menu-panel */

.header .hamburger {
    position: relative;
    bottom: auto;
    right: auto;
}

.hamburger:hover {
    color: rgba(240, 248, 255, 0.7);
}

.hamburger:focus {
    outline: none;
}

/* --- Lines/X containers --- */
.hamburger-lines,
.hamburger-x {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 20px;
}

.hamburger-lines .line {
    display: block;
    position: absolute;
    height: 2px;
    background-color: currentColor;
    border-radius: 0;
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.line-1 {
    top: 3px;
    left: 0;
    width: 50%;
    transform-origin: left center;
}

.line-2 {
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    transform-origin: right center;
}

.line-3 {
    bottom: 3px;
    right: 0;
    width: 50%;
    transform-origin: right center;
}

/* --- Lines ACTIVE state: undraw --- */
.hamburger.active .line-1 {
    transform: scaleX(0);
    transition-delay: 0s;
}

.hamburger.active .line-2 {
    transform: translateY(-50%) scaleX(0);
    transition-delay: 0.14s;
}

.hamburger.active .line-3 {
    transform: scaleX(0);
    transition-delay: 0.28s;
}

.hamburger-x {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.x-svg {
    width: 26px;
    height: 20px;
    overflow: visible;
}

.x-line {
    stroke-dasharray: 28;
    stroke-dashoffset: 28;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    transform-box: fill-box;
    transform-origin: top center;
}

.x-line-1a,
.x-line-1b,
.x-line-1 {
    transition-delay: 0s;
}

.x-line-2 {
    transition-delay: 0s;
}

/* --- X ACTIVE state: draw in --- */
.hamburger.active .x-line-1a,
.hamburger.active .x-line-1b {
    stroke-dashoffset: 0;
    transition-delay: 0.35s;
    animation: x-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.hamburger.active .x-line-2 {
    stroke-dashoffset: 0;
    transition-delay: 0.5s;
    animation: x-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

/* --- Reverse: when going back to hamburger --- */
.hamburger:not(.active) .x-line-1a,
.hamburger:not(.active) .x-line-1b {
    stroke-dashoffset: 28;
    transition-delay: 0s;
}

.hamburger:not(.active) .x-line-2 {
    stroke-dashoffset: 28;
    transition-delay: 0s;
}

.hamburger:not(.active) .x-line {
    animation: none;
}

.hamburger:not(.active) .line-1 {
    transition-delay: 0.35s;
}

.hamburger:not(.active) .line-2 {
    transition-delay: 0.49s;
}

.hamburger:not(.active) .line-3 {
    transition-delay: 0.63s;
}

@keyframes x-pop {
    0% { transform: translateY(-4px) scale(0.92); }
    55% { transform: translateY(0) scale(1.14); }
    78% { transform: translateY(0) scale(0.985); }
    100% { transform: translateY(0) scale(1); }
}

/* ========== HEADER RIGHT SECTION ========== */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ========== LANGUAGE SWITCHER ========== */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(32px, 3vw, 42px);
    width: clamp(32px, 3vw, 42px);
    border: 1.5px solid #F0F8FF;
    border-radius: 50%;
    background: transparent;
    color: #F0F8FF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.lang-switcher:hover,
.lang-switcher:focus-visible {
    color: #1a1d24;
    background: #F0F8FF;
    border-color: #F0F8FF;
}

.lang-switcher:focus-visible {
    outline: 2px solid #ff4d00;
    outline-offset: 2px;
}

/* ========== HEADER KONTAKT BUTTON ========== */
.header-kontakt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(32px, 3vw, 42px);
    padding: 0 22px;
    border: 1.5px solid #F0F8FF;
    border-radius: 99px;
    color: #F0F8FF;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transform: translateY(100px);
    transition: color 0.55s ease, border-color 0.55s ease, opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.header-kontakt.visible {
    opacity: 1;
    transform: translateY(0);
}

.header-kontakt::before {
    content: '';
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    background: #ff4d00;
    border-radius: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.header-kontakt:hover,
.header-kontakt:focus-visible {
    color: #fff;
    border-color: #ff4d00;
}

.header-kontakt:hover::before,
.header-kontakt:focus-visible::before {
    width: 300%;
    height: 300%;
}

/* ========== RESPONSIVE: TABLET ========== */
@media (max-width: 768px) {
    .bg-fx {
        opacity: 0.32;
    }

    :root {
        --header-pad: 28px;
    }

    .header {
        padding: 8px 28px;
    }

    .header-inner {
        width: 92vw;
    }

    .logo img {
        height: 38px;
    }
    
    .header .logo {
        scale: 1.2;
        margin: 1rem 0 0 1rem;
    }

    .hero-section {
        padding: 0 4vw;
    }

    .panel-card {
        border-radius: 18px;
    }

    .menu-panel {
        --menu-w: clamp(240px, 60vw, 320px);
        --menu-h: 55vh;
        --btn-size: 50px;
        --menu-gap: 12px;
    }

    .menu-link {
        font-size: clamp(15px, 3.5vw, 20px);
        padding: clamp(8px, 1.5vh, 12px) clamp(6px, 1vw, 12px);
    }

    .header-kontakt {
        height: 38px;
        padding: 0 20px;
        font-size: 16px;
        margin: 1rem 1rem 0 0;
    }
}

/* ========== RESPONSIVE: MOBILE ========== */
@media (max-width: 480px) {
    .bg-fx {
        opacity: 0.26;
    }

    :root {
        --header-pad: 20px;
    }

    .header {
        padding: 6px 16px;
    }

    .header-inner {
        width: 94vw;
    }

    .logo img {
        height: 35px;
    }
    
    .header .logo {
        scale: 1.2;
        margin: 1rem 0 0 1rem;
    }

    .hero-section {
        padding: 0 3vw;
    }

    .panel-card {
        border-radius: 14px;
    }

    .menu-panel {
        --menu-w: clamp(220px, 65vw, 300px);
        --menu-h: 55vh;
        --btn-size: 50px;
        --menu-gap: 10px;
    }

    .header-kontakt {
        height: 35px;
        padding: 0 18px;
        font-size: 15px;
        margin: 1rem 1rem 0 0;
    }

    .hamburger-lines,
    .hamburger-x {
        width: 24px;
        height: 18px;
    }

    .x-svg {
        width: 24px;
        height: 18px;
    }

    .menu-link {
        font-size: clamp(15px, 4.5vw, 19px);
        padding: clamp(7px, 1.2vh, 10px) clamp(4px, 1vw, 10px);
    }

    .menu-legal-link {
        font-size: 11px;
        padding: clamp(6px, 1vh, 10px) 0;
    }

    .menu-social-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ===========================
   CONTACT GRID LAYOUT
   =========================== */

.contact-detail-content {
    max-width: 1300px;
    margin: 0 auto;
    width: 90%;
    padding: clamp(80px, 12vw, 160px) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(80px, 10vw, 160px);
    align-items: start;
}

.sticky-info {
    position: sticky;
    top: clamp(86px, 11vh, 132px);
    height: fit-content;
    align-self: start;
}

.contact-main-heading {
    font-size: clamp(42px, 6vw, 84px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #1a1d24;
    margin: 0 0 clamp(32px, 5vh, 56px);
    text-transform: uppercase;
}

.contact-main-heading em {
    font-style: normal;
    color: #ff4d00;
    font-weight: 800;
}

.contact-intro-text {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.6;
    color: rgba(26, 29, 36, 0.7);
    max-width: 480px;
    margin-bottom: clamp(60px, 8vh, 100px);
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

.contact-info-groups {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-info-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-info-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(26, 29, 36, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'Inter', sans-serif;
}

.contact-info-value {
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 500;
    color: #1a1d24;
    text-decoration: none;
    line-height: 1.3;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
    display: inline-flex;
    width: fit-content;
}

a.contact-info-value:hover {
    color: #ff4d00;
}

.contact-info-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

/* ===========================
   CONTACT FORM
   =========================== */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: clamp(32px, 5vh, 56px);
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-question {
    font-size: 12px;
    font-weight: 600;
    color: rgba(26, 29, 36, 0.5);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 4px;
    font-family: 'Inter', sans-serif;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 14px 0;
    font-family: 'Inter', sans-serif;
    font-size: clamp(15px, 1.3vw, 17px);
    font-weight: 400;
    color: #1a1d24;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(26, 29, 36, 0.15);
    border-radius: 0;
    transition: border-color 0.3s ease;
    outline: none;
    letter-spacing: -0.01em;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(26, 29, 36, 0.25);
    font-weight: 400;
}

.form-input:focus,
.form-textarea:focus {
    border-bottom-color: #ff4d00;
}

.form-checkboxes,
.form-radios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.form-checkbox,
.form-radio {
    padding: 12px 16px;
    background: rgba(26, 29, 36, 0.03);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.form-checkbox:hover,
.form-radio:hover {
    background: rgba(26, 29, 36, 0.06);
}

.form-checkbox input:checked + .checkbox-label,
.form-radio input:checked + .radio-label {
    color: #ff4d00;
}

.form-checkbox input:checked,
.form-radio input:checked {
    border-color: #ff4d00;
}

.checkbox-label,
.radio-label {
    font-size: 13px;
    font-weight: 600;
}

.form-submit {
    margin-top: 20px;
}

/* Checkboxes */
.form-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1.2vh, 14px) clamp(12px, 1.5vw, 16px);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 10px);
    cursor: pointer;
    user-select: none;
    padding: 12px 15px;
    border-radius: 12px;
    transition: box-shadow 0.3s ease;
}

.form-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(26, 29, 36, 0.24);
    transition: box-shadow 0.3s ease;
    box-shadow:
        5px 5px 10px rgba(163, 177, 198, 0.4),
        -5px -5px 10px rgba(255, 255, 255, 0.8);
    background: #F0F8FF;
}

.form-checkbox:hover .custom-checkbox {
    box-shadow:
        3px 3px 6px rgba(163, 177, 198, 0.4),
        -3px -3px 6px rgba(255, 255, 255, 0.8);
}

.form-checkbox input[type="checkbox"]:checked + .custom-checkbox {
    border-color: #ff4d00;
    box-shadow:
        inset 5px 5px 10px rgba(163, 177, 198, 0.4),
        inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}

.checkbox-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff4d00;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.form-checkbox input[type="checkbox"]:checked + .custom-checkbox .checkbox-dot {
    opacity: 1;
}

.checkbox-label {
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 600;
    color: rgba(26, 29, 36, 0.7);
    letter-spacing: 0.04em;
    line-height: 1.3;
    transition: color 0.4s ease;
}

.form-checkbox input[type="checkbox"]:checked ~ .checkbox-label {
    color: rgba(26, 29, 36, 0.5);
}

/* Radio buttons */
.form-radios {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(10px, 1.2vh, 14px) clamp(12px, 1.5vw, 16px);
}

.form-radio {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1vw, 10px);
    cursor: pointer;
    user-select: none;
    padding: 12px 15px;
    border-radius: 12px;
    transition: box-shadow 0.3s ease;
}

.form-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-radio {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(26, 29, 36, 0.24);
    transition: box-shadow 0.3s ease;
    box-shadow:
        5px 5px 10px rgba(163, 177, 198, 0.4),
        -5px -5px 10px rgba(255, 255, 255, 0.8);
    background: #F0F8FF;
    position: relative;
}

.form-radio:hover .custom-radio {
    box-shadow:
        3px 3px 6px rgba(163, 177, 198, 0.4),
        -3px -3px 6px rgba(255, 255, 255, 0.8);
}

.form-radio input[type="radio"]:checked + .custom-radio {
    border-color: #ff4d00;
    box-shadow:
        inset 5px 5px 10px rgba(163, 177, 198, 0.4),
        inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}

.radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff4d00;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.form-radio input[type="radio"]:checked + .custom-radio .radio-dot {
    opacity: 1;
}

.radio-label {
    font-size: clamp(11px, 0.9vw, 13px);
    font-weight: 600;
    color: rgba(26, 29, 36, 0.7);
    letter-spacing: 0.04em;
    line-height: 1.3;
    transition: color 0.4s ease;
}

.form-radio input[type="radio"]:checked ~ .radio-label {
    color: rgba(26, 29, 36, 0.5);
}

.form-textarea {
    resize: vertical;
    min-height: clamp(100px, 15vh, 140px);
    line-height: 1.6;
}

.form-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: clamp(14px, 1.8vh, 18px) clamp(32px, 4vw, 48px);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 600;
    color: #1a1d24;
    background: transparent;
    border: 2px solid rgba(26, 29, 36, 0.2);
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.55s ease, border-color 0.55s ease;
    margin-top: clamp(8px, 1vh, 16px);
}

.form-submit::before {
    content: '';
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #ff4d00;
    transform: translate(-50%, -50%);
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
}

.form-submit:hover {
    color: #F0F8FF;
    border-color: #ff4d00;
}

.form-submit:hover::before {
    width: 300%;
    height: 300%;
}

.form-submit-text {
    position: relative;
    z-index: 1;
}

.form-submit-arrow {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.form-submit:hover .form-submit-arrow {
    transform: translateX(4px);
}

/* Mobile responsive */
@media (max-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .sticky-info {
        position: static;
        top: auto;
        height: auto;
    }
    
    .contact-intro-text {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .contact-info-groups {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-form {
        gap: clamp(28px, 3.5vh, 36px);
    }

    .form-checkboxes,
    .form-radios {
        flex-direction: column;
        gap: clamp(12px, 1.5vh, 16px);
    }

    .form-submit {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .contact-form {
        gap: clamp(24px, 3vh, 32px);
        margin-top: clamp(24px, 3vh, 32px);
    }

    .form-question {
        font-size: 12px;
        letter-spacing: 0.04em;
    }

    .form-input,
    .form-textarea {
        padding: 12px 14px;
        font-size: 14px;
    }

    .form-checkbox input[type="checkbox"],
    .form-radio input[type="radio"] {
        width: 18px;
        height: 18px;
    }

    .checkbox-label,
    .radio-label {
        font-size: 12px;
    }

    .form-submit {
        padding: 14px 28px;
        font-size: 14px;
    }
}

/* Process Tracker (Neumorphic Design adapted from habit-tracker) */
.process-tracker-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-left: 25vw; /* Match the text indent */
}

.process-tracker {
    background-color: #e8e8e8;
    border-radius: 20px;
    box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.8);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 320px;
    max-width: 100%;
    font-family: 'Inter', sans-serif;
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-tracker:hover {
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    box-shadow: 12px 12px 20px rgba(163, 177, 198, 0.7), -12px -12px 20px rgba(255, 255, 255, 0.9);
}

.process-title {
    font-size: 14px;
    font-weight: 700;
    color: #5a677a;
    margin-bottom: 8px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.process-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.process-item:hover {
    background-color: rgba(255,255,255,0.4);
}

.process-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.process-checkbox-custom {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    margin-right: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease;
    background-color: #e8e8e8;
    box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6), -5px -5px 10px rgba(255, 255, 255, 0.8);
}

.process-item:hover .process-checkbox-custom {
    box-shadow: 3px 3px 6px rgba(163, 177, 198, 0.6), -3px -3px 6px rgba(255, 255, 255, 0.8);
}

.process-checkmark {
    width: 14px;
    height: 14px;
    stroke: #ff4d00;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    filter: drop-shadow(0 0 2px rgba(255, 77, 0, 0.5));
}

.process-text {
    color: #5a677a;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.4s ease, text-decoration 0.4s ease;
}

/* Checked State */
.process-checkbox-input:checked + .process-checkbox-custom {
    box-shadow: inset 5px 5px 10px rgba(163, 177, 198, 0.6), inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}

.process-checkbox-input:checked + .process-checkbox-custom .process-checkmark {
    opacity: 1;
}

.process-checkbox-input:checked ~ .process-text {
    color: #9ba8bd;
    text-decoration: line-through;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .process-tracker-wrapper {
        padding-left: 0;
        justify-content: center;
        margin-top: 30px;
    }
    
    .process-tracker {
        width: 100%;
        max-width: 300px;
        transform: none;
    }
}

/* =========================================
   GENERATE GLOW BUTTON (Adapted)
   ========================================= */
@property --angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}

@property --angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

:root {
  --glow-btn-size: clamp(2rem, 4vw, 5rem);
  --glow-anim-time: 400ms;
  --glow-anim-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

.glow-button-wrap {
  position: relative;
  z-index: 2;
  border-radius: 999vw;
  background: transparent;
  pointer-events: none;
  transition: all var(--glow-anim-time) var(--glow-anim-ease);
  display: inline-block;
}

.glow-button-shadow {
  --shadow-cuttoff-fix: 2em;
  position: absolute;
  width: calc(100% + var(--shadow-cuttoff-fix));
  height: calc(100% + var(--shadow-cuttoff-fix));
  top: calc(0% - var(--shadow-cuttoff-fix) / 2);
  left: calc(0% - var(--shadow-cuttoff-fix) / 2);
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
  overflow: visible;
  pointer-events: none;
}

.glow-button-shadow::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 999vw;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  width: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  height: calc(100% - var(--shadow-cuttoff-fix) - 0.25em);
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  left: calc(var(--shadow-cuttoff-fix) - 0.875em);
  padding: 0.125em;
  box-sizing: border-box;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: all var(--glow-anim-time) var(--glow-anim-ease);
  overflow: visible;
  opacity: 1;
}

.glow-button {
  --border-width: clamp(1px, 0.0625em, 4px);
  all: unset;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: auto;
  z-index: 3;
  background: linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05)
  );
  border-radius: 999vw;
  box-shadow:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0 0 0 rgba(255, 255, 255, 1);
  backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -webkit-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -moz-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  -ms-backdrop-filter: blur(clamp(1px, 0.125em, 4px));
  transition: all var(--glow-anim-time) var(--glow-anim-ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.glow-button:hover {
  transform: scale(0.975);
  backdrop-filter: blur(0.01em);
  -webkit-backdrop-filter: blur(0.01em);
  -moz-backdrop-filter: blur(0.01em);
  -ms-backdrop-filter: blur(0.01em);
  box-shadow:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25),
    0 0 0.05em 0.1em inset rgba(255, 255, 255, 0.5),
    0 0 0 0 rgba(255, 255, 255, 1);
}

.glow-button span {
  position: relative;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.05em;
  font-weight: 600;
  font-size: 1.1rem;
  color: rgba(50, 50, 50, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
  transition: all var(--glow-anim-time) var(--glow-anim-ease);
  padding-inline: 2em;
  padding-block: 1.25em;
  white-space: nowrap;
}

.glow-button:hover span {
  text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12);
}

.glow-button span::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 1;
  width: calc(100% - var(--border-width));
  height: calc(100% - var(--border-width));
  top: calc(0% + var(--border-width) / 2);
  left: calc(0% + var(--border-width) / 2);
  box-sizing: border-box;
  border-radius: 999vw;
  overflow: clip;
  background: linear-gradient(
    var(--angle-2),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 40% 50%,
    rgba(255, 255, 255, 0) 55%
  );
  z-index: 3;
  mix-blend-mode: screen;
  pointer-events: none;
  background-size: 200% 200%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition:
    background-position calc(var(--glow-anim-time) * 1.25) var(--glow-anim-ease),
    --angle-2 calc(var(--glow-anim-time) * 1.25) var(--glow-anim-ease);
}

.glow-button:hover span::after {
  background-position: 25% 50%;
}

.glow-button:active span::after {
  background-position: 50% 15%;
  --angle-2: -15deg;
}

@media (hover: none) and (pointer: coarse) {
  .glow-button span::after,
  .glow-button:active span::after {
    --angle-2: -45deg;
  }
}

.glow-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999vw;
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  padding: var(--border-width);
  box-sizing: border-box;
  background: conic-gradient(
      from var(--angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.5)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition:
    all var(--glow-anim-time) var(--glow-anim-ease),
    --angle-1 500ms ease;
  box-shadow: inset 0 0 0 calc(var(--border-width) / 2) rgba(255, 255, 255, 0.5);
}

.glow-button:hover::after {
  --angle-1: -125deg;
}

.glow-button:active::after {
  --angle-1: -75deg;
}

@media (hover: none) and (pointer: coarse) {
  .glow-button::after,
  .glow-button:hover::after,
  .glow-button:active::after {
    --angle-1: -75deg;
  }
}

.glow-button-wrap:has(.glow-button:hover) .glow-button-shadow {
  filter: blur(clamp(2px, 0.0625em, 6px));
  -webkit-filter: blur(clamp(2px, 0.0625em, 6px));
  -moz-filter: blur(clamp(2px, 0.0625em, 6px));
  -ms-filter: blur(clamp(2px, 0.0625em, 6px));
  transition: filter var(--glow-anim-time) var(--glow-anim-ease);
}

.glow-button-wrap:has(.glow-button:hover) .glow-button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.875em);
  opacity: 1;
}

.glow-button-wrap:has(.glow-button:active) {
  transform: rotate3d(1, 0, 0, 25deg);
}

.glow-button-wrap:has(.glow-button:active) .glow-button {
  box-shadow:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5),
    0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0.1em 0.25em inset rgba(255, 255, 255, 0.2),
    0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05),
    0 0.25em 0 0 rgba(255, 255, 255, 0.75),
    inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15);
}

.glow-button-wrap:has(.glow-button:active) .glow-button-shadow {
  filter: blur(clamp(2px, 0.125em, 12px));
  -webkit-filter: blur(clamp(2px, 0.125em, 12px));
  -moz-filter: blur(clamp(2px, 0.125em, 12px));
  -ms-filter: blur(clamp(2px, 0.125em, 12px));
}

.glow-button-wrap:has(.glow-button:active) .glow-button-shadow::after {
  top: calc(var(--shadow-cuttoff-fix) - 0.5em);
  opacity: 0.75;
}

.glow-button-wrap:has(.glow-button:active) span {
  text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12);
}

/* =========================================
   INSTA BLOOM BUTTON (Adapted)
   ========================================= */
.bloom-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-block;
}

.bloom-wrapper {
  position: relative;
  transition: all 0.2s ease-in-out;
  border: none;
  background: none;
}

.bloom-wrapper .bloom-container-main {
  width: 50px; /* Scaled down from 110px for header/footer icons */
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: grid;
  place-content: center;
  border-right: 2px solid white;
  border-left: 2px solid rgba(128, 128, 128, 0.147);
  transform: rotate(-45deg);
  transition: all 0.5s ease-in-out;
}

.bloom-wrapper .bloom-container-main .bloom-inner {
  height: 30px; /* Scaled down from 60px */
  width: 30px;
  border-radius: 50%;
  position: relative;
  box-shadow: rgba(100, 100, 111, 0.5) -5px 2.5px 5px 0px;
  transition: all 0.5s ease-in-out;
}

.bloom-wrapper .bloom-container-main .bloom-inner .back {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    60deg,
    #833ab4 0%,
    #fd1d1d 50%,
    #fcb045 100%
  );
}

.bloom-button.facebook .bloom-wrapper .bloom-container-main .bloom-inner .back {
  background: linear-gradient(
    60deg,
    #1877f2 0%,
    #0d5bb9 100%
  );
}

.bloom-wrapper .bloom-container-main .bloom-inner .front {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: linear-gradient(
    60deg,
    #833ab4 0%,
    #fd1d1d 50%,
    #fcb045 100%
  );
  display: grid;
  place-content: center;
}

.bloom-button.facebook .bloom-wrapper .bloom-container-main .bloom-inner .front {
  background: linear-gradient(
    60deg,
    #1877f2 0%,
    #0d5bb9 100%
  );
}

.bloom-wrapper .bloom-container-main .bloom-inner .front .svg {
  fill: #ffffff;
  opacity: 0.5;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  transition: all 0.2s ease-in;
}

.bloom-wrapper .bloom-container-main .bloom-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.888) 100%
  );
  transform: translate(0%, -50%) rotate(0deg);
  transform-origin: bottom center;
  transition: all 0.5s ease-in-out;
}

.bloom-wrapper .bloom {
  height: 1px;
  width: 1px;
  position: absolute;
  background: white;
}

.bloom-wrapper .bloom1 {
  top: 5px;
  right: 10px;
  box-shadow:
    rgb(255, 255, 255) 0px 0px 5px 5px,
    rgb(255, 255, 255) 0px 0px 10px 10px;
}

.bloom-wrapper .bloom2 {
  bottom: 5px;
  left: 10px;
  box-shadow:
    rgba(255, 255, 255, 0.5) 0px 0px 5px 5px,
    rgba(255, 255, 255, 0.5) 0px 0px 15px 10px;
}

.bloom-wrapper:hover {
  transform: scale(1.1);
}

.bloom-wrapper:hover .bloom-container-main .bloom-glass {
  transform: translate(0%, -40%);
}

.bloom-wrapper:hover .bloom-container-main .bloom-inner .front .svg {
  opacity: 1;
  filter: drop-shadow(0 0 5px white);
}

.bloom-wrapper:active {
  transform: scale(0.7);
}

.bloom-wrapper:active .bloom-container-main .bloom-inner {
  transform: scale(1.2);
}