@font-face {
    font-family: 'Duepuntozero-Regular-Trial';
    src: url('../fonts/Duepuntozero-Regular-Trial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Duepuntozero-Bold-Trial';
    src: url('../fonts/Duepuntozero-Bold-Trial.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Duepuntozero-ExtraLight-Trial';
    src: url('../fonts/Duepuntozero-ExtraLight-Trial.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* Alias for backward compatibility */
@font-face {
    font-family: 'Duepuntozero';
    src: url('../fonts/Duepuntozero-Regular-Trial.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* === CSS Variables & Theme === */
:root {
    /* Primary Colors */
    --primary-1: #734BDF;
    /* New Brand Violet */
    --primary-2: #8A62FF;
    --primary-dark: #1F154E;
    --primary-darker: #150F35;

    /* Background Colors */
    --bg-white: #FFFFFF;
    --bg-light: #F4F5F9;
    --bg-dark: #1B1445;
    --bg-darker: #120D31;

    /* Text Colors */
    --text-dark: #1E293B;
    --text-dark-muted: #64748B;
    --text-light: #FFFFFF;
    --text-light-muted: #CBD5E1;

    /* Borders */
    --border-light: #E2E8F0;
    --border-dark: rgba(255, 255, 255, 0.1);

    /* Layout Rules */
    --border-radius: 12px;
    --section-spacing: 80px;
    /* Reduced for more compact architectural flow */
    /* Reduced to match user preference for tighter vertical rhythm */
    --container-width: 1200px;

    /* Shadows */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px -5px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
}

/* === Reset & Base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Onest', sans-serif;
}

/* === Technical Simple Strip (Minimalist) === */
.tech-simple-strip {
    background: #ffffff;
    padding: 30px 0 60px;
    /* Increased bottom padding for labels and separator */
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    /* Full-width separator underline */
}

.tss-wrapper {
    display: flex;
    justify-content: space-around;
    /* Spread icons wider across the container */
    align-items: center;
    flex-wrap: wrap;
    gap: 40px 60px;
    /* Vertical and horizontal gap */
    max-width: 1400px;
    /* Wider section width */
    margin: 0 auto;
    padding: 0 40px;
    /* Keep inside viewport safety */
}

.tss-icon {
    font-size: 2.5rem;
    color: #0f172a;
    filter: grayscale(1) opacity(0.5);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    cursor: pointer;
    position: relative;
}

.tss-icon:hover {
    filter: grayscale(0) opacity(1);
    color: var(--primary-1);
    transform: translateY(-10px) scale(1.1);
}

/* Minimal Tooltip - Permanently Visible */
.tss-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    /* Position below icon for desktop */
    left: 50%;
    transform: translateX(-50%) translateY(0);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-dark-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 1;
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.tss-icon:hover::after {
    color: var(--primary-1);
}

/* Mobile: Auto-Scroll Marquee */
@media (max-width: 991px) {
    .tech-simple-strip {
        padding-top: 30px !important;
        padding-bottom: 20px !important;
        /* Extremely compact */
    }

    .tss-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 60px !important;
        padding: 0 40px !important;
        width: max-content !important;
        animation: tssMarquee 20s linear infinite;
    }

    .tss-icon {
        filter: grayscale(1) opacity(0.4) !important;
        /* Match desktop inactive look */
        color: #0f172a !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Remove brand colors */

    .tss-icon::after {
        opacity: 1;
        top: auto !important;
        bottom: -15px !important;
        /* Tighter position to save space */
        transform: translateX(-50%) translateY(0);
        font-size: 0.7rem;
        color: var(--text-dark-muted);
    }

    @keyframes tssMarquee {
        0% {
            transform: translateX(0);
        }

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

    .tss-duplicate {
        display: flex !important;
    }
}

/* Hide duplicates on Desktop */
.tss-duplicate {
    display: none;
}

@media (max-width: 991px) {
    .tss-wrapper {
        gap: 40px;
    }

    .tss-icon {
        font-size: 2rem;
    }
}

@media (max-width: 640px) {
    .tss-wrapper {
        gap: 30px;
        padding: 0 20px;
    }

    .tss-icon {
        font-size: 1.75rem;
    }
}

/* === Customer Marquee === */
.customers-marquee-mask .marquee-track {
    animation: obsidianScroll 40s linear infinite;
}

.customers-marquee-mask .marquee-track:hover {
    animation-play-state: paused;
}

.customer-matrix-cell img {
    transition: all 0.4s ease;
}

.customer-matrix-cell:hover img {
    filter: grayscale(0) !important;
    opacity: 1 !important;
}

.customer-matrix-cell:hover {
    border-color: var(--primary-1) !important;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(115, 75, 223, 0.08);
}

@keyframes obsidianScroll {
    0% {
        transform: translateX(0);
    }

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Custom Global Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0B0E1E;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-2);
}

html,
body {
    width: 100%;
    position: relative;
}

/* Horizontal stability for mobile */
@media (max-width: 991px) {

    html,
    body {
        overflow-x: hidden;
    }
}

body {
    background-color: var(--bg-white);
    color: var(--text-dark);
    line-height: 1.6;
}

p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-dark-muted);
}

/* Sidebar Scroll Lock - Force hide scrollbars */
html.no-scroll,
body.no-scroll {
    overflow: hidden !important;
    height: 100dvh !important;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0;
}

@media (max-width: 1250px) {
    .container {
        padding: 0 24px;
    }
}

.section-padding {
    padding: var(--section-spacing) 0;
    position: relative;
}

#about.section-padding {
    padding-top: 40px !important;
    /* Tighten gap after tech strip */
}

/* === Breadcrumbs === */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0 0;
    margin-bottom: 0;
    position: relative;
    z-index: 20;
    justify-content: center;
}

.breadcrumb-item {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.breadcrumb-item:hover {
    color: rgba(255, 255, 255, 0.8);
}

.breadcrumb-item.current {
    color: #ffffff;
}

.breadcrumb-sep {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.2);
}

/* === Callback Modal === */
.callback-trigger {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 998;
    background: var(--primary-1);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(115, 75, 223, 0.3);
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.callback-trigger:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(115, 75, 223, 0.4);
    background: var(--primary-2);
}

.callback-trigger i {
    font-size: 1rem;
}

.callback-modal {
    position: fixed;
    bottom: 140px;
    right: 24px;
    z-index: 997;
    background: white;
    border-radius: 20px;
    padding: 32px;
    width: 320px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.callback-modal.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.callback-modal h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}

.callback-modal p {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
}

.cb-input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-family: 'Onest', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 12px;
    transition: border-color 0.3s ease;
}

.cb-input:focus {
    outline: none;
    border-color: var(--primary-1);
    box-shadow: 0 0 0 3px rgba(115, 75, 223, 0.1);
}

.cb-btn {
    width: 100%;
    padding: 14px;
    background: var(--primary-1);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cb-btn:hover {
    background: var(--primary-2);
    transform: translateY(-2px);
}

.cb-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.3s ease;
}

.cb-close:hover {
    color: #0f172a;
}

@media (max-width: 640px) {
    .callback-trigger {
        display: none;
    }

    .callback-modal {
        right: 16px;
        width: calc(100% - 32px);
    }
}

/* === Skip to content === */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    background: var(--primary-1);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 12px;
}

/* === Premium Page Loader === */
.loader-container {
    position: fixed;
    inset: 0;
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-darker);
    overflow: hidden;
}

.loader-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.loader-logo {
    font-family: 'Duepuntozero', sans-serif !important;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: normal;
    color: rgba(255, 255, 255, 0.05);
    position: relative;
    letter-spacing: 0.2em;
    line-height: 1;
    margin-bottom: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .loader-container {
        display: none;
    }
}

.loader-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.loader-logo {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.05);
    position: relative;
    letter-spacing: 0.2em;
    line-height: 1;
    margin-bottom: 20px;
}

.loader-logo::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: var(--primary-1);
    clip-path: inset(var(--loader-fill, 100%) 0 0 0);
    /* Dynamic fill handled by JS */
    transition: clip-path 0.1s linear;
}

.loader-progress-wrap {
    width: 200px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.loader-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--primary-1);
    box-shadow: 0 0 15px var(--primary-1);
}

.loader-percentage {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--primary-1);
    margin-top: 15px;
    letter-spacing: 4px;
    font-weight: 700;
    opacity: 0.6;
}

.loader-shutter-t,
.loader-shutter-b {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: #120D31;
    z-index: 5;
    transition: transform 0.7s cubic-bezier(0.85, 0, 0.15, 1);
    /* Sped up from 1.2s */
}

.loader-shutter-t {
    top: 0;
}

.loader-shutter-b {
    bottom: 0;
}

.loader-loaded .loader-shutter-t {
    transform: translateY(-100%);
}

.loader-loaded .loader-shutter-b {
    transform: translateY(100%);
}

.loader-loaded .loader-content {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    .loader-container {
        display: none;
    }

    .loader-shutter-t,
    .loader-shutter-b {
        transform: none !important;
        display: none;
    }

    .hp-scroll {
        display: none !important;
    }

    [class*="gs-reveal"] {
        opacity: 1 !important;
        transform: none !important;
    }

    .tss-wrapper {
        animation: none !important;
    }

    .tc-card:hover {
        transform: none !important;
    }

    .portfolio-card:hover {
        transform: none !important;
    }

    .split-card:hover {
        transform: none !important;
    }

    .fa-marquee-track {
        animation: none !important;
    }

    .hp-scroll-arrow {
        animation: none !important;
        opacity: 0.5 !important;
    }
}

/* Second .loader-container block removed — consolidated above */

/* === Background Classes === */
.bg-white {
    background-color: var(--bg-white);
}

.bg-light {
    background-color: var(--bg-light);
}

.bg-dark {
    background-color: var(--bg-dark);
    background-image: radial-gradient(circle at top center, #3A2F85 0%, transparent 70%);
    color: var(--text-light);
    position: relative;
}

.bg-darker {
    background-color: var(--bg-darker);
    color: var(--text-light);
}

/* === Typography === */
h1,
h2,
h3,
h4 {
    font-weight: 800;
    line-height: 1.2;
}

.section-label {
    color: var(--primary-1);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.75rem;
    margin-bottom: 20px;
    display: inline-block;
}

.bg-dark .section-header .section-label,
.bg-darker .section-header .section-label,
.services-section .section-label,
.testimonials-section .section-label {
    color: #ffffff !important;
}

.section-title {
    font-size: clamp(2.2rem, 6vw, 3.5rem);
    margin-bottom: 24px;
    letter-spacing: -1.5px;
    line-height: 1.1;
    font-weight: 800;
}

.text-thin {
    font-weight: 300;
}

.section-header.left {
    text-align: left;
    max-width: 900px;
    margin-bottom: 60px;
}

.section-header.center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

/* === Buttons === */
.btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary-1);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-2);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px rgba(115, 75, 223, 0.4);
}


.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-1);
    color: var(--primary-1);
}

.btn-outline:hover {
    background-color: var(--primary-1);
    color: white;
}

.btn-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    background: transparent;
    color: white;
    position: relative;
    overflow: hidden;
}

.btn-circle:hover {
    background: white;
    color: var(--primary-dark);
    transform: scale(1.1);
}

.btn-circle i {
    transform: rotate(-45deg);
}

.btn.lg {
    padding: 18px 36px;
    font-size: 1.1rem;
}

/* === Custom Brand Fonts === */
@font-face {
    font-family: 'Duepuntozero';
    src: url('../fonts/Duepuntozero-Regular-Trial_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* === Global Focus Styles === */
:focus-visible {
    outline: 3px solid var(--primary-1);
    outline-offset: 3px;
    border-radius: 4px;
}

/* === Hero Secondary Button === */
.hp-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.hp-btn-secondary:hover,
.hp-btn-secondary:focus-visible {
    background: rgba(255, 255, 255, 0.1);
}

/* === Hero Title with Duepuntozero === */
.hp-title-display {
    font-family: 'Duepuntozero', 'Onest', sans-serif !important;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 0.95;
    letter-spacing: -2px;
    text-align: center;
}

.hp-title-display .text-thin {
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    display: block;
    font-family: 'Duepuntozero', 'Onest', sans-serif !important;
    font-weight: 300;
}

.hp-title-display .hp-title-bold {
    font-weight: 800;
    color: #fff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    display: block;
    margin-top: 15px;
}

/* === Premium Page Loader === */

/* === Top Bar === */
.top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 36px;
    background: var(--primary-darker);
    z-index: 1001;
    display: flex;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

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

.top-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 24px;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.3s ease;
}

.top-bar-item i {
    font-size: 0.85rem;
    color: var(--primary-1);
}

.top-bar-item:hover {
    color: white;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-bar-social {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

.top-bar-social:hover {
    color: var(--primary-1);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

/* === WhatsApp Floating Button === */
.wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35);
    transition: all 0.3s ease;
    animation: waPulse 2s infinite;
}

.wa-float:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 32px rgba(37, 211, 102, 0.5);
    color: white;
}

@keyframes waPulse {

    0%,
    100% {
        box-shadow: 0 6px 24px rgba(37, 211, 102, 0.35);
    }

    50% {
        box-shadow: 0 6px 32px rgba(37, 211, 102, 0.55);
    }
}

/* === Navigation: Morphing Kinetic Modules === */
.nav {
    position: absolute;
    /* Integrated with Hero Scroll */
    top: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: var(--container-width);
    padding: 0 15px;
    /* Match container */
    display: flex;
    justify-content: space-between;
    /* Align modules to container edges */
    align-items: center;
    gap: 16px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    /* Hidden until Entrance Animation */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@media (max-width: 1250px) {
    .nav {
        padding: 0 24px;
    }
}

.nav.scrolled {
    position: fixed;
    /* Docks to Top */
}

.nav-module {
    pointer-events: auto;
    background: rgba(10, 12, 16, 0.5);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 12px 28px;
    display: flex;
    align-items: center;
    box-shadow:
        0 4px 24px -1px rgba(21, 15, 53, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.nav-module-logo {
    padding: 10px 30px;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}

.logo-main {
    font-size: 1.8rem;
    font-weight: normal;
    color: #ffffff;
    transition: color 0.4s ease;
}

.logo-tech,
.logo-maven {
    font-family: 'Duepuntozero', sans-serif !important;
    color: #ffffff;
    transition: color 0.4s ease;
}

/* Scrolled adjustments for logo colors */
.nav.scrolled .logo-tech,
.nav.scrolled .logo-maven {
    color: var(--primary-1);
    /* Primary color for main brand */
}

/* Scrolled Transformation: The Premium Background Layer (Atmospheric Fade) */
.nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 1);
    border-radius: 100px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    box-shadow:
        0 10px 15px -3px rgba(21, 15, 53, 0.05),
        0 4px 6px -2px rgba(21, 15, 53, 0.03);
}

.nav.scrolled::before {
    opacity: 1;
}

.nav-module:hover {
    background: rgba(10, 12, 16, 0.7);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow:
        0 10px 40px -10px rgba(21, 15, 53, 0.4),
        0 0 20px rgba(115, 75, 223, 0.1);
}

.logo {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: white;
    transition: all 0.4s ease;
}

.nav-module-links {
    padding: 10px 45px;
    position: relative;
}

.nav-links-dock {
    display: none;
    /* Desktop only toggle */
    list-style: none;
    gap: 36px;
    position: relative;
    z-index: 2;
}

@media (min-width: 992px) {
    .nav-links-dock {
        display: flex;
    }
}

.nav-item {
    color: white;
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    opacity: 0.5;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    padding: 8px 0;
}


.nav-item:hover {
    opacity: 1;
    color: var(--primary-1);
}

.nav-item.active {
    opacity: 1 !important;
    color: var(--primary-1) !important;
}





.nav-module-cta {
    padding: 8px 12px 8px 24px;
}

.nav-cta-pill {
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 800;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.nav-cta-pill i {
    font-size: 0.9rem;
    background: var(--primary-1);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-cta-pill:hover i {
    transform: rotate(-45deg) scale(1.1);
    background: white;
    color: var(--primary-1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Scrolled Transformation: The Unified White Dock (Flush Top + Container Constrained) */
.nav.scrolled {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    width: 100%;
    max-width: 100%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(21, 15, 53, 0.05);
    border-radius: 0;
    padding: 0 max(15px, calc((100% - var(--container-width)) / 2 + 15px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    overflow: visible;
}

.nav.scrolled::before {
    opacity: 1;
    border-radius: 0;
}

.nav.scrolled .nav-module {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 15px 0;
    flex: 0 0 auto;
}

.nav.scrolled .nav-module-links {
    flex: 1;
    justify-content: center;
}

.nav.scrolled .logo,
.nav.scrolled .nav-item {
    color: #0f172a;
}

.nav.scrolled .nav-item {
    opacity: 0.7;
}

.nav.scrolled .nav-item:hover {
    opacity: 1;
    color: var(--primary-1);
}

.nav.scrolled .nav-cta-pill {
    color: #0f172a;
}

.nav.scrolled .nav-cta-pill i {
    background: #0f172a;
    color: white;
}

.nav.scrolled .nav-cta-pill:hover i {
    background: var(--primary-1);
}



@media (max-width: 991px) {

    .nav,
    .nav.scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
        z-index: 1000;
        padding: 15px 20px !important;
        /* Balanced mobile padding */
        border: none !important;
        border-radius: 0 !important;
        transition: none !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .nav {
        background: transparent !important;
        box-shadow: none !important;
    }

    .nav.scrolled {
        background: #ffffff !important;
        box-shadow: 0 2px 15px rgba(21, 15, 53, 0.08) !important;
        backdrop-filter: none !important;
    }

    .nav-inner,
    .nav.scrolled .nav-inner {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Ensure container doesn't conflict */
    .nav .container {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .nav.scrolled .logo,
    .nav.scrolled .menu-text {
        color: var(--primary-1) !important;
        /* Keep purple in both cases */
    }

    .nav.scrolled .burger-icon .line {
        background-color: var(--primary-1) !important;
        /* Keep purple in both cases */
    }

    .nav-module-logo {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        /* Force zero radius */
        padding: 12px 0px !important;
        /* Consistent module padding */
        flex: 1 !important;
        display: flex !important;
        justify-content: flex-start !important;
        backdrop-filter: inherit !important;
        -webkit-backdrop-filter: inherit !important;
        box-shadow: none !important;
    }

    .nav-module-logo .logo {
        font-size: 1.4rem !important;
        font-weight: 800 !important;
        color: var(--primary-1) !important;
        letter-spacing: -0.04em !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    .nav-module-logo .logo .dot {
        color: var(--primary-1) !important;
    }

    .nav-module-links {
        position: static !important;
        transform: none !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        flex: 1 !important;
        justify-content: flex-end !important;
        padding: 12px 20px !important;
        /* Match logo module padding */
        backdrop-filter: inherit !important;
        -webkit-backdrop-filter: inherit !important;
        box-shadow: none !important;
        border: 0 !important;
        /* Force zero border */
        border-radius: 0 !important;
        /* Force zero radius */
    }

    .nav-module-cta,
    .nav-right,
    .nav-links-dock {
        display: none !important;
    }

    .menu-toggle {
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        gap: 12px !important;
        border-radius: 0 !important;
        /* Force zero radius */
    }

    .menu-text {
        font-size: 0.72rem !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        color: #ffffff !important;
        /* White in normal case */
        transition: color 0.4s ease !important;
    }

    .nav.scrolled .menu-text {
        color: var(--primary-1) !important;
        /* Primary color on scroll down */
    }

    .burger-icon {
        gap: 5px !important;
        align-items: flex-end !important;
        border-radius: 0 !important;
        /* Force zero radius */
    }

    .burger-icon .line {
        height: 1.5px !important;
        background-color: #ffffff !important;
        /* White in normal case */
        transition: background-color 0.4s ease !important;
    }

    .nav.scrolled .burger-icon .line {
        background-color: var(--primary-1) !important;
        /* Primary color on scroll down */
    }

    .line-1 {
        width: 26px !important;
    }

    .line-2 {
        width: 16px !important;
    }
}

/* Mobile Toggle refinement */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
}

.menu-text {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: white;
}

@media (min-width: 992px) {
    .nav .menu-toggle {
        display: none !important;
    }
}



.menu-text {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: white;
    transition: color 0.3s ease;
}

.nav.scrolled .menu-text {
    color: var(--text-dark);
}

.burger-icon {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.burger-icon .line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease;
}

.nav.scrolled .burger-icon .line {
    background-color: var(--text-dark);
}

.menu-toggle:hover .line-1 {
    width: 30px;
}

.menu-toggle:hover .line-2 {
    width: 18px;
}

/* === Perspective Portal Sidebar === */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.25);
    /* Subtle dark slate tint */
    backdrop-filter: blur(8px);
    /* Reduced blur for airy feel */
    z-index: 10900;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s ease;
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.sidebar-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 380px;
    /* Ultra-compact width */
    height: 100dvh;
    background: #ffffff;
    z-index: 30000;
    transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1);
    perspective: 2000px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 991px) {
    .sidebar-menu {
        width: 65%;
        /* Slim mobile profile */
    }
}

.sidebar-menu.active {
    right: 0;
}

.perspective-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 8%;
}

.perspective-stage {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.portal-links {
    list-style: none;
    transform: rotateX(15deg) rotateY(-15deg);
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Consistent editorial spacing */
}

.portal-link-item {
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 900;
    color: var(--text-dark);
    text-decoration: none;
    display: block;
    line-height: 0.85;
    letter-spacing: -5px;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    transform: translateZ(0);
}

.portal-link-item:hover {
    color: var(--primary-1);
    transform: translateZ(120px) scale(1.05) translateX(20px);
    letter-spacing: 0px;
    text-shadow: 0 10px 40px rgba(115, 75, 223, 0.4);
}

.portal-link-item.active {
    color: var(--primary-1);
    transform: translateZ(50px) translateX(15px);
}

.portal-sidebar {
    width: 320px;
    padding-bottom: 40px;
    padding-left: 40px;
    position: relative;
}

.portal-sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
}

.portal-label {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--primary-1);
    letter-spacing: 6px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.portal-info p {
    color: var(--text-dark-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 80px;
    font-weight: 500;
}

.ps-links {
    display: flex;
    gap: 1.5rem;
    /* Horizontal spacing for icons */
    align-items: center;
}

.ps-links a {
    color: var(--text-dark-muted);
    text-decoration: none;
    font-size: 1.5rem;
    /* High-fidelity icon size */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ps-links a:hover {
    color: var(--primary-1);
    transform: translateY(-3px);
    opacity: 1;
}

.perspective-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    font-size: 25vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02);
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    text-transform: uppercase;
}

.menu-close {
    position: absolute;
    top: -120px;
    right: 0;
    background: none;
    border: none;
    color: var(--text-dark);
    font-size: 2.8rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.menu-close:hover {
    color: var(--primary-1);
    transform: rotate(180deg) scale(1.2);
}

@media (max-width: 991px) {
    .perspective-container {
        padding: 100px 30px 60px;
        align-items: flex-start;
        height: auto;
        min-height: 100%;
    }

    .perspective-stage {
        flex-direction: column;
        align-items: flex-start;
        gap: 60px;
    }

    .portal-links {
        transform: none;
    }

    .portal-link-item {
        font-size: 1.4rem !important;
        /* Compact matching brand size */
        letter-spacing: -0.5px !important;
        font-weight: 800 !important;
    }

    .portal-links {
        gap: 1.2rem !important;
        /* Tighter spacing */
    }

    .portal-sidebar {
        width: 100%;
        padding-left: 0;
        padding-top: 40px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .portal-sidebar::before {
        display: none;
    }

    .menu-close {
        position: fixed;
        top: 20px;
        right: 30px;
        font-size: 2rem;
        z-index: 30005;
    }
}

.sidebar-contact-minimal {
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

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

.scm-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--primary-1);
    letter-spacing: 3px;
    font-weight: 700;
}

.scm-label i {
    font-size: 0.9rem;
}

.scm-value {
    color: rgba(15, 23, 42, 0.6);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.6;
}

.bento-contact {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(115, 75, 223, 0.05) 100%);
}

.bento-contact-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    display: block;
}

.bento-contact-link:hover {
    color: white;
    padding-left: 5px;
}

/* Mobile Adjustments for Sidebar */
@media (max-width: 768px) {
    .sidebar-menu {
        width: 100%;
        right: -100%;
    }
}

/* Hide scrollbar when menu is open */
html.no-scroll::-webkit-scrollbar,
body.no-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}

html.no-scroll,
body.no-scroll {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    overflow: hidden !important;
}

/* === 1. Premium Architectural Hero: Obsidian Ultra [STYLE_HERO_ACTIVE] === */
.hero-premium,
#hero {
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--bg-darker);
    overflow: hidden !important;
    padding: 0;
    color: white;
    z-index: 1;
}

.hp-container {
    position: relative;
    z-index: 30;
}

.hp-content {
    max-width: 900px;
    margin: 0 auto;
    z-index: 35;
}

/* Deep Field Background */
.hp-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100% !important;
    z-index: 0;
    overflow: hidden;
    background-color: var(--bg-darker);
    pointer-events: none;
}

.hp-bg-image {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    filter: saturate(1.1) contrast(1.15) brightness(0.85);
    z-index: -1;
}

.hp-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 10% 20%, rgba(115, 75, 223, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(115, 75, 223, 0.1) 0%, transparent 40%),
        linear-gradient(to bottom, transparent 0%, var(--bg-darker) 100%);
}

/* shimmer + grid + noise + HUD + scanner + AI tags removed */
}

100% {
    top: 100%;
    opacity: 0;
}
}

/* Typography & Content */
.hp-meta {
    display: none;
}

.hp-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    /* Reduced from 5.5rem */
    line-height: 1;
    font-weight: 800;
    color: #fff;
    margin-bottom: 30px;
    letter-spacing: -2px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 80px rgba(115, 75, 223, 0.1);
    max-width: 1000px;
}

.hp-title .text-thin {
    font-size: 0.28em;
    color: white !important;
    text-transform: uppercase;
    letter-spacing: 12px;
    font-weight: 300;
    display: block;
    margin-bottom: 20px;
}

.hp-reveal {
    display: block;
    overflow: hidden;
    perspective: 1000px;
}

.hp-reveal>span {
    display: block;
    /* Essential for transforms to work */
}

.hp-gradient-text {
    color: #fff;
    letter-spacing: 2px;
    display: inline-block;
}


.hp-subtitle {
    font-size: 1.25rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 60px;
    max-width: 700px;
    letter-spacing: 0.5px;
}

.hp-highlight {
    color: white;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.hp-highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--primary-1);
    box-shadow: 0 0 10px var(--primary-1);
}

.hp-actions {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
}

/* === Premium Button: Enter The Protocol === */
.hp-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 10px 10px 10px 28px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(115, 75, 223, 0.3);
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hp-btn-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(115, 75, 223, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.hp-btn-main:hover::before {
    transform: translateX(100%);
}

.hp-btn-main .btn-txt {
    color: white;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.hp-btn-main .btn-icon

/* === Kinetic Progress Stepper === */
.process-section {
    background: #f8f9fa;
    /* Luminous Light Grey */
    position: relative;
    overflow: visible;
    /* CRITICAL for sticky behavior */
    color: #0f0f11;
}

.process-split-stage {
    display: flex;
    /* align-items: stretch; is default, which we need for sticky height */
    gap: 80px;
    padding: 80px 0;
}

/* === Immersive Editorial Process === */
.process-section {
    background: #fdfdfd;
    position: relative;
    padding: 0;
    /* Removed padding */
    overflow: visible;
}

.process-bg-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(115, 75, 223, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.process-split-stage {
    display: flex;
    gap: 60px;
    /* Reduced gap */
    align-items: stretch;
}

.process-visual-side {
    flex: 0.8;
    /* Narrower left side */
}

.process-sticky-wrap {
    width: 100%;
    height: fit-content;
    position: relative;
    z-index: 10;
}

.visual-glow-frame {
    position: relative;
    width: 100%;
    height: 420px;
    /* Reduced height */
    border-radius: 32px;
    background: transparent;
    /* Removed dark background */
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.visual-stack {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.p-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Prevent cropping */
    opacity: 0;
    padding: 20px;
    /* Breathe room */
}

.p-img.active {
    opacity: 1;
}

/* Technical HUD Overlay */
.visual-hud {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hud-line-h,
.hud-line-v {
    position: absolute;
    background: rgba(115, 75, 223, 0.1);
    /* Darker/Violet for light bg */
}

.hud-line-h {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
}

.hud-line-v {
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
}

.hud-corners span {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(115, 75, 223, 0.3);
}

.hud-corners span:nth-child(1) {
    top: 30px;
    left: 30px;
    border-right: 0;
    border-bottom: 0;
}

.hud-corners span:nth-child(2) {
    top: 30px;
    right: 30px;
    border-left: 0;
    border-bottom: 0;
}

.hud-corners span:nth-child(3) {
    bottom: 30px;
    left: 30px;
    border-right: 0;
    border-top: 0;
}

.hud-corners span:nth-child(4) {
    bottom: 30px;
    right: 30px;
    border-left: 0;
    border-top: 0;
}

.process-content-side {
    flex: 1.2;
}

.kinetic-stepper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center steps horizontally */
    gap: 0;
    position: relative;
}

.immersive-stepper {
    position: relative;
    padding-left: 60px;
    margin-top: 30px;
    /* Reduced from 60px */
}

.stepper-track-wrap {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
}

.stepper-progress-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.05);
}

.stepper-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--primary-1);
    box-shadow: 0 0 15px var(--primary-1);
}

.immersive-step {
    padding: 40px 0;
    /* Reduced from 60px */
    opacity: 0.1;
    transform: translateX(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.immersive-step.active {
    opacity: 1;
    transform: translateX(0);
}

.step-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.step-num {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--primary-1);
    opacity: 0.5;
}

.step-tag {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--primary-1);
    text-transform: uppercase;
}

.step-card {
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

.step-card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    font-weight: 800;
}

.step-card p {
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.step-details {
    display: flex;
    gap: 10px;
}

.step-details span {
    padding: 6px 14px;
    background: rgba(115, 75, 223, 0.05);
    color: var(--primary-1);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
}

.kinetic-step.active .step-node {
    background: var(--primary-1);
    color: #fff;
    border-color: var(--primary-1);
    box-shadow: 0 0 20px rgba(115, 75, 223, 0.4);
}

.step-text h3 {
    font-size: 2rem;
    font-weight: 800;
    color: #0f0f11;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.step-text p {
    font-size: 1.2rem;
    color: rgba(15, 15, 17, 0.6);
    line-height: 1.7;
    max-width: 550px;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .process-split-stage {
        flex-direction: column;
        gap: 60px;
    }

    .process-visual-side {
        position: relative;
        top: 0;
        width: 100%;
    }

    .process-content-side {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .step-text h3 {
        font-size: 1.5rem;
    }

    .kinetic-step {
        gap: 20px;
    }
}

.hp-btn-main:hover {
    background: rgba(115, 75, 223, 0.1);
    border-color: var(--primary-1);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(115, 75, 223, 0.2);
}

.hp-btn-main:hover .btn-icon {
    transform: rotate(-45deg);
    background: white;
    color: var(--primary-1);
}

.hp-btn-main:active {
    transform: scale(0.98);
}

.hp-status {
    display: flex;
    align-items: center;
    gap: 15px;
}

.status-indicator {
    position: relative;
    width: 12px;
    height: 12px;
}

.status-dot {
    position: absolute;
    inset: 0;
    background: #10B981;
    border-radius: 50%;
    box-shadow: 0 0 15px #10B981;
}

.status-ring {
    position: absolute;
    inset: -4px;
    border: 1px solid #10B981;
    border-radius: 50%;
    animation: ring-pulse 2s infinite;
}

@keyframes ring-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* AI Hub & Visual */
.hp-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.hp-core-image-wrap {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: transparent;
    position: relative;
    box-shadow: 0 0 100px rgba(115, 75, 223, 0.3), inset 0 0 50px rgba(0, 0, 0, 0.8);
}

.hp-core-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(5, 7, 10, 0.8) 100%);
    z-index: 2;
}

.hp-data-particles {
    position: absolute;
    inset: -50px;
    pointer-events: none;
    z-index: 1;
}

.hp-ai-hub {
    position: relative;
    width: 100%;
    height: 100%;
}

.hp-core-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
    z-index: 5;
}

.hp-core-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-core-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle, rgba(115, 75, 223, 0.4) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 1;
    animation: core-pulse 4s infinite ease-in-out;
}

@keyframes core-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.hp-core-rings {
    position: absolute;
    inset: -60px;
    pointer-events: none;
}

.hp-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.hp-ring-1 {
    width: 550px;
    height: 550px;
    border-style: dashed;
    animation: rotate-cw 40s linear infinite;
}

.hp-ring-2 {
    width: 650px;
    height: 650px;
    border-style: dotted;
    animation: rotate-ccw 50s linear infinite;
}

.hp-ring-3 {
    width: 750px;
    height: 750px;
    opacity: 0.2;
    animation: rotate-cw 60s linear infinite;
}

@keyframes rotate-cw {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate-ccw {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

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

/* Scroll UI */
.hp-scroll {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 20;
}

.hp-scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hp-scroll-arrow {
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--primary-1);
    border-bottom: 2px solid var(--primary-1);
    transform: rotate(45deg);
    opacity: 0;
    animation: arrow-pulse 2s infinite;
}

.hp-scroll-arrow:nth-child(2) {
    animation-delay: 0.2s;
}

.hp-scroll-arrow:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes arrow-pulse {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-5px, -5px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(5px, 5px);
    }
}

.hp-scroll-text {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

.hp-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hp-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hp-visual {
    display: none;
}

/* === 2. Ticker Bar === */
.ticker-wrap {
    background: var(--bg-darker);
    padding: 20px 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 50;
    margin-top: -1px;
    /* Overlap border to prevent gap */
}

.ticker {
    display: flex;
    white-space: nowrap;
    animation: ticker 30s linear infinite;
}

.ticker-item {
    padding: 0 40px;
    color: var(--text-light-muted);
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticker-item i {
    color: var(--primary-1);
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

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

/* === 3. Split Sections === */
.split-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.split-image {
    position: relative;
}

/* === Why Choose Us (Collage Layout) === */
.wcu-section {
    background: #fff;
}

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

.wcu-content .section-label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
}

.wcu-content .section-title {
    margin-bottom: 20px;
    line-height: 1.15;
}

.wcu-content .section-desc {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 36px;
}

.wcu-reasons {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wcu-reason-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    align-items: flex-start;
}

.hover-lift:hover {
    transform: translateY(-5px);
}

.wcu-check {
    width: 44px;
    height: 44px;
    background: rgba(115, 75, 223, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-1);
    flex-shrink: 0;
    font-size: 1.25rem;
    border: 1px solid rgba(115, 75, 223, 0.15);
    transition: all 0.3s ease;
}

.wcu-reason-item:hover .wcu-check {
    background: var(--primary-1);
    color: white;
}

.animate-pulse-soft {
    animation: pulse-soft 3s infinite ease-in-out;
}

@keyframes pulse-soft {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.wcu-reason-item .wcu-reason-title {
    font-size: 1.1rem;
    color: #0f172a;
    margin-bottom: 6px;
    font-weight: 800;
}

.wcu-reason-item p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* Image Collage */
.wcu-image-collage {
    position: relative;
    height: 520px;
}

.wcu-img {
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.wcu-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Top-left image: taller */
.wcu-img-1 {
    top: 0;
    left: 0;
    width: 62%;
    height: 68%;
    z-index: 1;
}

/* Bottom-right image: offset lower */
.wcu-img-2 {
    bottom: 0;
    right: 0;
    width: 60%;
    height: 60%;
    z-index: 2;
    border: 4px solid #fff;
}

/* SVG Decorators */
.wcu-deco {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    animation: wcuFloat 4s ease-in-out infinite;
}

.wcu-deco-tl {
    top: -20px;
    left: -20px;
    animation-delay: 0s;
}

.wcu-deco-tr {
    top: 10px;
    right: 10px;
    animation-delay: 0.8s;
}

.wcu-deco-bl {
    bottom: 20px;
    left: -10px;
    animation-delay: 1.6s;
}

.wcu-deco-br {
    bottom: -10px;
    right: 20px;
    animation-delay: 2.4s;
}

@keyframes wcuFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(5deg);
    }
}

@media (max-width: 992px) {
    .wcu-container {
        grid-template-columns: 1fr;
    }

    .wcu-image-collage {
        height: 420px;
        margin-top: 40px;
    }
}

.rounded-img {
    width: 100%;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
}

.badge-float {
    position: absolute;
    bottom: 30px;
    right: -30px;
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 16px;
}

.badge-float i {
    font-size: 2.5rem;
    color: var(--primary-1);
}

.badge-float .badge-text {
    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 800;
}

.feature-bullets {
    list-style: none;
    margin: 30px 0;
}

.feature-bullets li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-weight: 600;
}

.feature-bullets i {
    color: var(--primary-1);
}

/* === 4. Services Grid (Cinematic Split Editorial) === */
.services-section .container {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: flex-start;
}

.services-section .section-header {
    position: sticky;
    top: 140px;
    text-align: left !important;
}

.services-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Cinematic Protocol Stage */
.service-card {
    position: relative;
    height: 420px;
    border-radius: 40px;
    overflow: hidden;
    background: #0a0a0c;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card .card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.4;
}

.service-card .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10, 10, 12, 0.9) 0%, rgba(10, 10, 12, 0.4) 60%, transparent 100%);
    z-index: 1;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-1);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

.service-card:hover .card-bg {
    transform: scale(1.1);
    opacity: 0.7;
}

.service-card .card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 80%;
}

.service-card .icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(115, 75, 223, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    margin-bottom: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease;
}

.service-card h3 {
    font-size: 2.2rem !important;
    font-weight: 800;
    color: white;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
}

.service-card p {
    font-size: 1.15rem !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 35px !important;
    max-width: 500px;
}

.service-link {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: var(--primary-1) !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.service-link:hover {
    gap: 18px;
    color: white !important;
}

@media (max-width: 1200px) {
    .services-section .container {
        display: flex;
        flex-direction: column;
        gap: 60px;
        width: 100%;
    }

    .services-section .section-header {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        top: auto !important;
        text-align: center !important;
        margin: 0 0 40px 0 !important;
    }
}

@media (max-width: 991px) {
    .service-card {
        height: 400px;
    }

    .service-card .card-content {
        padding: 50px;
    }
}

@media (max-width: 768px) {
    .service-card {
        height: 380px;
        border-radius: 30px;
    }

    .service-card .card-overlay {
        background: linear-gradient(to bottom, rgba(10, 10, 12, 0.9) 0%, rgba(10, 10, 12, 0.4) 100%);
    }

    .service-card .card-content {
        padding: 40px;
        max-width: 100%;
        justify-content: flex-end;
    }

    .service-card h3 {
        font-size: 1.8rem !important;
        margin-bottom: 12px;
    }

    .service-card p {
        font-size: 1rem !important;
        margin-bottom: 25px !important;
    }

    .service-card .icon-wrapper {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
}

@media (max-width: 480px) {
    .services-grid {
        gap: 20px;
    }

    .service-card {
        height: 350px;
        padding: 0 !important;
    }

    .service-card .card-content {
        padding: 30px;
    }

    .service-card h3 {
        font-size: 1.5rem !important;
    }
}

.card {
    background: var(--bg-white);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    padding: 40px;
}

.bg-dark .card,
.bg-darker .card {
    background: rgba(255, 255, 255, 0.03);
    /* Translucent glass foundation */
    backdrop-filter: blur(10px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    padding: 60px 50px;
    /* More luxurious internal padding */
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bg-dark .card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(115, 75, 223, 0.05), transparent);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    z-index: -1;
}

.bg-dark .card:hover::before {
    transform: translateX(100%);
}

.bg-dark .card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(115, 75, 223, 0.4);
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 0 0 20px rgba(115, 75, 223, 0.1);
}

.bg-dark .card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--primary-1);
    transition: width 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.bg-dark .card:hover::after {
    width: 100%;
}

.bg-dark .card.highlight {
    background: var(--primary-1);
    border-color: var(--primary-2);
}

.bg-dark .card.highlight::after {
    height: 100%;
}

.bg-dark .card.highlight .icon-wrapper {
    background: white;
}

.bg-dark .card.highlight .icon-wrapper i {
    color: var(--primary-1);
}

.bg-dark .card:hover .icon-wrapper {
    background: white;
}

.bg-dark .card:hover .icon-wrapper i {
    color: var(--primary-1);
}

.icon-wrapper {
    width: 70px;
    /* Slightly larger for the 2-col layout */
    height: 70px;
    background: rgba(115, 75, 223, 0.1);
    /* Subtle brand tint */
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    transition: all 0.4s ease;
    border: 1px solid rgba(115, 75, 223, 0.1);
}

.icon-wrapper i {
    font-size: 1.8rem;
    color: var(--primary-1);
}

.bg-dark .card h3,
.bg-darker .card h3 {
    color: white;
    font-size: 1.6rem;
    /* Larger title for wider cards */
    margin-bottom: 24px;
    font-weight: 800;
}

.bg-dark .card p,
.bg-darker .card p {
    color: rgba(255, 255, 255, 0.6);
    /* Slightly more muted for contrast */
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 30px;
}

align-items: center;
justify-content: center;
margin-bottom: 24px;
}

.icon-wrapper i {
    font-size: 2rem;
    color: var(--primary-1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bg-dark .card:hover .icon-wrapper i {
    transform: translateY(-5px) scale(1.1) rotate(5deg);
    color: var(--primary-1);
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-1);
    text-decoration: none;
    font-weight: 700;
    margin-top: 20px;
}

/* === 5. Why Choose Us === */
.reasons-list {
    margin-top: 40px;
}

.reason-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.reason-icon {
    font-size: 2rem;
    color: var(--primary-1);
}

.reason-text .reason-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 800;
}

.layered-images {
    position: relative;
    height: 450px;
}

.layered-images img {
    position: absolute;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    width: 80%;
}

.layered-images .img-1 {
    top: 0;
    left: 0;
    z-index: 1;
}

.layered-images .img-2 {
    bottom: 0;
    right: 0;
    z-index: 2;
    border: 10px solid white;
}

/* === 6. Stats Timeline === */
.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.timeline-stat {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    transition: background 0.4s ease, transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    /* Specific properties only */
}

.timeline-stat:hover {
    background: rgba(255, 255, 255, 0.03);
    transform: translateY(-5px);
}

.stat-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-1);
    transition: all 0.4s ease;
    border: 1px solid rgba(115, 75, 223, 0.1);
}

.timeline-stat:hover .stat-icon {
    background: var(--primary-1);
    color: white;
    box-shadow: 0 0 20px rgba(115, 75, 223, 0.4);
    border-color: var(--primary-1);
}

.counter-wrap {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

/* === 7. Portfolio === */
.ps-carousel {
    position: relative;
    overflow: visible;
    margin: 0 auto;
    max-width: calc(var(--container-width) + 80px);
    padding: 0 40px;
}

.ps-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 4px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.ps-track::-webkit-scrollbar {
    display: none;
}

.ps-track .portfolio-card {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 300px;
    scroll-snap-align: start;
    border-radius: 20px;
    background: white;
    border: 1px solid var(--border-light);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ps-track .portfolio-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-1);
}

.portfolio-img-link {
    display: block;
    height: 170px;
    overflow: hidden;
}

.portfolio-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-card:hover .portfolio-img-link img {
    transform: scale(1.05);
}

.portfolio-content {
    padding: 22px 26px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.portfolio-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--primary-1);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.portfolio-title-link {
    text-decoration: none;
    color: var(--text-dark);
    transition: color 0.3s ease;
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
}

.portfolio-title-link:hover {
    color: var(--primary-1);
}

.portfolio-content p {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-dark-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.portfolio-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 16px;
}

.portfolio-tag {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-dark-muted);
    background: var(--bg-light);
    padding: 3px 9px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

.ps-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: white;
    color: var(--text-dark-muted);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.ps-arrow:hover {
    background: var(--primary-1);
    color: white;
    border-color: var(--primary-1);
}

.ps-arrow-prev {
    left: 4px;
}

.ps-arrow-next {
    right: 4px;
}

.ps-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 28px;
}

.ps-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-light);
    border: none;
    cursor: pointer;
    transition: all 0.4s ease;
    padding: 0;
}

.ps-dot.active {
    background: var(--primary-1);
    width: 24px;
    border-radius: 3px;
}

@media (max-width: 1024px) {
    .ps-track .portfolio-card {
        flex: 0 0 calc(50% - 12px);
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .ps-carousel {
        padding: 0;
        max-width: 100%;
    }

    .ps-track .portfolio-card {
        flex: 0 0 80%;
        min-width: 260px;
    }

    .ps-arrow {
        display: none;
    }

    .ps-dots {
        margin-top: 20px;
    }
}

/* === 8. Pricing === */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.pricing-card {
    position: relative;
}

.pricing-card.popular {
    transform: scale(1.05);
    background: var(--bg-dark);
    color: white;
    border: none;
}

.popular-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--primary-1);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.pricing-header {
    margin-bottom: 30px;
}

.price {
    font-size: 3rem;
    font-weight: 800;
    margin-top: 10px;
}

.price span {
    font-size: 1.25rem;
}

.pricing-features {
    list-style: none;
    margin-bottom: 40px;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.pricing-features i {
    color: var(--primary-1);
}

.products-header-section {
    padding: 100px 0 60px;
}

.architectural-header {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.header-line {
    width: 2px;
    height: 120px;
    background: linear-gradient(to bottom, var(--primary-1), transparent);
}

.header-meta {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 5px;
    color: var(--primary-2);
    margin-bottom: 16px;
    display: block;
}

.header-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 20px;
    color: white;
}

.header-desc {
    font-size: 1.1rem;
    color: var(--text-light-muted);
    max-width: 500px;
}

@media (max-width: 768px) {
    .architectural-header {
        flex-direction: column;
        gap: 20px;
    }

    .header-line {
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, var(--primary-1), transparent);
    }
}

/* === Obsidian Kinetic Accordion [STAGE_SYSTEM] === */
.products-interactive.kinetic-accordion {
    display: flex;
    width: 100%;
    height: 750px;
    gap: 0;
    padding: 0;
    max-width: 100%;
    overflow: hidden;
    background: var(--bg-darker);
}

.accordion-panel {
    position: relative;
    flex: 1;
    height: 100%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
    will-change: flex, transform;
    /* Ultra-smooth cinematic curve */
    transition: flex 1.2s cubic-bezier(0.85, 0, 0.15, 1),
        transform 1.2s cubic-bezier(0.85, 0, 0.15, 1);
}

.accordion-panel:hover,
.accordion-panel.active-default,
.accordion-panel.active {
    flex: 6;
}

/* Background Zoom Effect */
.accordion-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 0;
}

.accordion-panel:hover::before,
.accordion-panel.active-default::before,
.accordion-panel.active::before {
    transform: scale(1.1);
}

.panel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(5, 7, 12, 1) 0%,
            rgba(5, 7, 12, 0.9) 30%,
            rgba(5, 7, 12, 0.4) 70%,
            transparent 100%);
    opacity: 0.95;
    transition: opacity 1s ease;
    z-index: 1;
}

.accordion-panel:hover .panel-overlay,
.accordion-panel.active-default .panel-overlay,
.accordion-panel.active .panel-overlay {
    opacity: 1;
}

.panel-inner {
    position: relative;
    z-index: 10;
    height: 100%;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 900px;
    /* Use width instead of min-width for smoother flex sizing */
    pointer-events: none;
}

.panel-header {
    margin-bottom: 40px;
    transform: rotate(-90deg);
    transform-origin: left bottom;
    position: absolute;
    left: 60px;
    bottom: 60px;
    white-space: nowrap;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.accordion-panel:hover .panel-header,
.accordion-panel.active-default .panel-header,
.accordion-panel.active .panel-header {
    transform: rotate(0);
    position: relative;
    left: 0;
    bottom: 0;
}

.panel-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--primary-1);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    padding: 5px 12px;
    border: 1px solid rgba(115, 75, 223, 0.3);
    background: rgba(115, 75, 223, 0.05);
    text-transform: uppercase;
    position: relative;
}

.panel-label::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: var(--primary-1);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-1);
}

.panel-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    letter-spacing: -2px;
    line-height: 1;
}

.panel-content {
    max-width: 600px;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

.accordion-panel:hover .panel-content,
.accordion-panel.active-default .panel-content,
.accordion-panel.active .panel-content {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 0.4s;
    /* Wait for expansion to almost finish */
}

.panel-tagline {
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 25px;
}

.panel-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
    margin-bottom: 40px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.panel-features {
    list-style: none;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 30px;
    max-width: 600px;
}

.panel-features li {
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    letter-spacing: 0.5px;
}

.panel-features i {
    color: var(--primary-1);
    font-size: 1rem;
}

.panel-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 36px;
    height: 50px;
    background: var(--primary-1);
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(115, 75, 223, 0.3);
}

.panel-cta:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(115, 75, 223, 0.5);
    background: var(--primary-2);
}

@media (max-width: 1200px) {
    .products-interactive.kinetic-accordion {
        flex-direction: column;
        height: auto;
    }

    .accordion-panel {
        height: auto;
        min-height: 80px;
        flex: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        cursor: pointer;
        transition: min-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .accordion-panel.active,
    .accordion-panel.active-default {
        min-height: 400px;
    }

    .panel-inner {
        min-width: auto;
        padding: 24px 24px;
        justify-content: flex-start;
    }

    .panel-header {
        transform: none;
        position: relative;
        left: 0;
        bottom: 0;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .panel-label {
        margin-bottom: 0;
    }

    .panel-title {
        font-size: 1.6rem;
        margin: 0;
    }

    .panel-content {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: none;
        max-width: 100%;
        pointer-events: none;
        transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, padding 0.4s ease;
        padding: 0;
    }

    .accordion-panel.active .panel-content,
    .accordion-panel.active-default .panel-content {
        max-height: 800px;
        opacity: 1;
        pointer-events: all;
        padding-top: 20px;
    }

    .panel-tagline {
        font-size: 1rem;
        margin-bottom: 12px;
    }

    .panel-desc {
        font-size: 0.9rem;
        margin-bottom: 24px;
    }

    .panel-features {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-bottom: 24px;
    }

    .panel-features li {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .accordion-panel {
        min-height: 70px;
    }

    .accordion-panel.active,
    .accordion-panel.active-default {
        min-height: 350px;
    }

    .panel-title {
        font-size: 1.3rem;
    }

    .panel-inner {
        padding: 20px 16px;
    }

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

/* === 10. Geometric Crystal Testimonials === */
.testimonials-crystal {
    background-color: var(--bg-dark);
    background-image: radial-gradient(circle at top center, #3A2F85 0%, transparent 70%);
    position: relative;
    overflow: hidden;
}

.tc-bg-radial {
    display: none;
    /* Removed as gradient is now direct */
}

.tc-geometric-mesh {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(30deg, rgba(255, 255, 255, 0.01) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.01) 87.5%, rgba(255, 255, 255, 0.01)),
        linear-gradient(150deg, rgba(255, 255, 255, 0.01) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.01) 87.5%, rgba(255, 255, 255, 0.01));
    background-size: 80px 140px;
    z-index: 0;
}

.tc-orb-v {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
    z-index: 0;
    filter: blur(80px);
}

.tc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    z-index: 1;
}

.section-title.text-white {
    color: #ffffff !important;
}

.tc-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 50px 40px;
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1),
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.6s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.tc-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-15px) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(115, 75, 223, 0.15);
}

.tc-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(115, 75, 223, 0.2), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.tc-card:hover .tc-card-glow {
    opacity: 1;
}

.tc-top-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.tc-icon {
    font-size: 2.2rem;
    color: var(--primary-1);
    opacity: 0.5;
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

.tc-card:hover .tc-icon {
    transform: scale(1.2) translateY(-5px);
    opacity: 1;
    filter: drop-shadow(0 0 10px var(--primary-1));
}

.tc-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--primary-2);
    font-weight: 700;
    letter-spacing: 1px;
}

.tc-quote {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 40px;
    position: relative;
}

.tc-client {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tc-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--primary-1), var(--primary-2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 0.85rem;
}

.tc-client-info .tc-client-name {
    font-size: 1.05rem;
    color: white;
    margin-bottom: 2px;
    font-weight: 800;
}

.tc-client-info span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

/* Chiseled Corners */
.tc-corner {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid var(--primary-1);
    opacity: 0;
    transition: all 0.4s ease;
}

.tc-tl {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.tc-br {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

.tc-card:hover .tc-corner {
    opacity: 1;
    transform: scale(1.1);
}

.card-offset {
    transform: translateY(40px);
}

.tc-card:hover.card-offset {
    transform: translateY(30px);
}

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

    .card-offset {
        transform: none;
    }
}

@media (max-width: 768px) {
    .tc-grid {
        grid-template-columns: 1fr;
    }

    .tc-card {
        padding: 30px;
    }
}

/* === 11. Bento Magazine Insights (Premium White) === */
.insights-bento {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.ib-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--primary-1);
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 20px;
}

.ib-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: auto auto;
    gap: 30px;
}

.ib-card {
    background: #f8f9fa;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.ib-featured {
    grid-row: span 2;
    background: var(--bg-darker);
}

.ib-img-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ib-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1);
}

.ib-featured .ib-img {
    opacity: 0.6;
}

.ib-card:hover .ib-img {
    transform: scale(1.08);
}

.ib-content {
    position: relative;
    z-index: 2;
    padding: 60px;
    margin-top: auto;
}

.ib-featured .ib-content {
    color: white;
    padding: 80px 60px;
}

.ib-secondary {
    min-height: 350px;
    background: #fdfdfd;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.ib-secondary .ib-img-wrap {
    height: 200px;
    position: relative;
    inset: auto;
}

.ib-secondary .ib-content {
    padding: 40px;
}

.ib-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
}

.ib-tag {
    color: var(--primary-1);
    padding: 4px 12px;
    background: rgba(115, 75, 223, 0.1);
    border-radius: 4px;
}

.ib-featured .ib-tag {
    background: var(--primary-1);
    color: white;
}

.ib-featured h3 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    margin-bottom: 20px;
    color: white;
}

.ib-secondary h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
}

.ib-featured p {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: 40px;
    max-width: 500px;
}

.ib-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: inherit;
    transition: gap 0.3s ease;
}

.ib-link:hover {
    gap: 18px;
}

.ib-bracket {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary-1);
    z-index: 3;
    opacity: 0;
    transition: all 0.4s ease;
}

.ib-tl {
    top: 30px;
    left: 30px;
    border-right: none;
    border-bottom: none;
}

.ib-br {
    bottom: 30px;
    right: 30px;
    border-left: none;
    border-top: none;
}

.ib-card:hover .ib-bracket {
    opacity: 1;
    transform: scale(1.1);
}

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

    .ib-featured {
        grid-row: span 1;
        min-height: 600px;
    }
}

@media (max-width: 768px) {
    .ib-content {
        padding: 40px;
    }

    .ib-featured h3 {
        font-size: 1.8rem;
    }
}

/* === 12 + 13. Footer — Architectural Agency === */
.footer-arch {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse 100% 70% at 50% 100%, #2d1b69 0%, #0d0a24 50%, #060410 100%);
    color: white;
}

/* Noise texture overlay */
.fa-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: 0;
}

/* Orbs */
.fa-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(120px);
    z-index: 0;
}

.fa-orb-l {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #4c1d95, transparent 65%);
    bottom: -100px;
    left: -60px;
    opacity: 0.55;
}

.fa-orb-r {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #734BDF, transparent 65%);
    top: 40px;
    right: -50px;
    opacity: 0.4;
}

/* === Scrolling Marquee Wordmark === */
.fa-marquee-wrap {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 60px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fa-marquee-track {
    display: flex;
    white-space: nowrap;
    animation: fa-scroll 20s linear infinite;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
    will-change: transform;
    line-height: 1;
}

.fa-marquee-track span {
    display: inline-block;
    padding-right: 40px;
}

@keyframes fa-scroll {
    0% {
        transform: translateX(0);
    }

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

/* === CTA Bar [Pill Style] === */
.fa-cta-bar {
    position: relative;
    z-index: 2;
    padding: 100px 0 60px;
}

.fa-pill-cta {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 30px 50px;
    display: flex;
    align-items: center;
    gap: 40px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 40px 100px rgba(21, 15, 53, 0.2);
}

.fa-pill-icon {
    width: 70px;
    height: 70px;
    background: rgba(115, 75, 223, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary-1);
    box-shadow: 0 0 30px rgba(115, 75, 223, 0.1);
    border: 1px solid rgba(115, 75, 223, 0.2);
}

.fa-pill-text {
    flex: 1;
}

.fa-pill-text h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.fa-pill-text p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.fa-pill-action {
    flex-shrink: 0;
}

.fa-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--primary-1);
    color: white;
    padding: 16px 36px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(115, 75, 223, 0.3);
}

.fa-pill-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(115, 75, 223, 0.5);
    background: var(--primary-2);
}

@media (max-width: 992px) {
    .fa-pill-cta {
        flex-direction: column;
        text-align: center;
        padding: 50px 30px;
        gap: 30px;
        border-radius: 40px;
    }

    .fa-pill-text h3 {
        font-size: 1.5rem;
    }
}

border: none;
color: white;
font-size: 1rem;
outline: none;
font-family: inherit;
}

.fa-email-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.fa-sub-btn {
    padding: 14px 24px;
    background: var(--primary-1);
    border: none;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease, transform 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.fa-sub-btn:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.fa-fine-print {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fa-fine-print i {
    color: #4ade80;
}

/* === Footer Nav Row === */
.fa-nav-row {
    position: relative;
    z-index: 2;
    padding: 50px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fa-nav-inner {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.fa-brand {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: 180px;
}

.fa-logo {
    font-family: 'Duepuntozero', sans-serif !important;
    font-size: 1.6rem;
    color: white;
    line-height: 1;
    margin-bottom: 6px;
}

.fa-tagline-sm {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 600;
}

.fa-links-row {
    display: flex;
    gap: 0;
    flex: 1;
}

.fa-link-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.fa-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 4px;
}

.fa-link-group a,
.fa-link-group span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.25s ease;
}

.fa-link-group a:hover {
    color: #c084fc;
}

.fa-link-sep {
    width: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 0 32px;
    align-self: stretch;
}

.fa-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 100px;
}

.fa-right-col {
    display: flex;
    flex-direction: column;
    gap: 50px;
    flex-shrink: 0;
}

.fa-social-wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.fa-socials {
    display: flex;
    gap: 10px;
}

.fa-socials a {
    position: relative;
    /* For tooltip positioning */
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
}

/* Tooltip Implementation */
.fa-socials a::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1a1c24;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 20px rgba(21, 15, 53, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.fa-socials a::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    border: 6px solid transparent;
    border-top-color: #1a1c24;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fa-socials a:hover::before,
.fa-socials a:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.fa-socials a:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: white;
    transform: translateY(-2px);
}

/* === Footer Locations === */
.fa-locations {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 120px;
}

.fa-loc-flags {
    display: flex;
    gap: 12px;
}

.fa-loc-flag {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.fa-loc-flag i {
    font-size: 0.85rem;
    color: var(--primary-1);
}

.fa-loc-flag:hover {
    color: white;
    border-color: var(--primary-1);
    background: rgba(115, 75, 223, 0.1);
}

/* === Copyright Strip === */
.fa-copyright {
    position: relative;
    z-index: 2;
    padding: 20px 0;
}

.fa-copyright-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.25);
}

.fa-copyright-inner p {
    font-size: 12px;
    margin: 0;
}

.fa-copyright::before,
.fa-copyright::after,
.fa-legal::before,
.fa-legal::after,
.fa-copyright-inner p::before,
.fa-copyright-inner p::after,
.fa-legal a::before,
.fa-legal a::after {
    content: none !important;
    display: none !important;
}

.fa-legal {
    display: flex;
    gap: 20px;
}

.fa-legal a {
    color: rgba(255, 255, 255, 0.25);
    text-decoration: none;
    transition: color 0.25s;
}

.fa-legal a:hover {
    color: #c084fc;
}

/* Responsive */
@media (max-width: 1024px) {
    .fa-cta-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .fa-nav-inner {
        flex-wrap: wrap;
        gap: 40px;
    }

    .fa-links-row {
        flex-wrap: wrap;
        gap: 30px;
    }

    .fa-link-sep {
        display: none;
    }
}

@media (max-width: 640px) {
    .fa-marquee-track {
        font-size: clamp(3rem, 12vw, 5rem);
    }

    .fa-cta-heading {
        font-size: clamp(1.8rem, 6vw, 2.2rem);
    }

    .fa-copyright-inner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .fa-inline-form {
        flex-direction: column;
        border-radius: 12px;
    }

    .fa-sub-btn {
        border-radius: 0 0 10px 10px;
        justify-content: center;
        padding: 14px;
    }
}

/* Dot-grid texture */
.fu-grid-texture {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* Radial glow orbs */
.fu-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(100px);
    z-index: 0;
}

.fu-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #5b21b6, transparent 65%);
    top: -160px;
    left: -80px;
    opacity: 0.5;
}

.fu-orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--primary-1), transparent 65%);
    bottom: 40px;
    right: -60px;
    opacity: 0.35;
}

.fu-orb-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #7c3aed, transparent 65%);
    top: 50%;
    right: 30%;
    opacity: 0.2;
}

/* SPLIT BILLBOARD */
.fu-billboard {
    position: relative;
    z-index: 2;
    padding: 100px 0 80px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fu-billboard-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: center;
}

/* LEFT SIDE */
.fu-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a78bfa;
    margin-bottom: 24px;
}

.fu-big-title {
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: white;
    margin-bottom: 22px;
}

.fu-gradient-text {
    color: var(--primary-1);
    font-weight: 800;
}

.fu-tagline {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.65;
    margin-bottom: 50px;
    max-width: 420px;
}

.fu-trust-row {
    display: flex;
    align-items: center;
    gap: 28px;
}

.fu-trust-stat strong {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: white;
    line-height: 1;
    margin-bottom: 4px;
}

.fu-trust-stat span {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.fu-trust-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.12);
}

/* RIGHT SIDE — Glass Card */
.fu-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    padding: 44px 40px;
    box-shadow: 0 30px 60px rgba(21, 15, 53, 0.4);
}

.fu-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fu-card-icon {
    width: 48px;
    height: 48px;
    background: var(--primary-1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: white;
    flex-shrink: 0;
}

.fu-card-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 3px;
}

.fu-card-header p {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* Form */
.fu-form-v2 {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fu-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
    margin-top: 16px;
}

.fu-label:first-child {
    margin-top: 0;
}

.fu-input-v2 {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    color: white;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s ease, background 0.3s ease;
    font-family: inherit;
}

.fu-input-v2::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.fu-input-v2:focus {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.08);
}

.fu-email-row {
    display: flex;
    gap: 10px;
}

.fu-email-row .fu-input-v2 {
    flex: 1;
}

.fu-submit-btn {
    width: 50px;
    flex-shrink: 0;
    background: var(--primary-1);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.fu-submit-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(115, 75, 223, 0.5);
}

.fu-consent {
    margin-top: 16px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fu-consent i {
    color: #4ade80;
}

/* SLIM FOOTER */
.fu-slim-footer {
    position: relative;
    z-index: 2;
    padding: 60px 0 36px;
}

.fu-slim-top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    margin-bottom: 40px;
}

.fu-slim-brand .fu-logo {
    font-size: 1.6rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.03em;
    margin-bottom: 12px;
}

.fu-slim-brand p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.6;
    margin-bottom: 20px;
}

.fu-socials {
    display: flex;
    gap: 10px;
}

.fu-social {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.fu-social:hover {
    background: #7c3aed;
    border-color: #7c3aed;
    color: white;
    transform: translateY(-2px);
}

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

.fu-slim-col h6 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 18px;
}

.fu-slim-col a,
.fu-slim-col span {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.25s ease;
}

.fu-slim-col a:hover {
    color: #a78bfa;
}

/* Logo */
.fu-logo {
    font-size: 1.75rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}

/* Copyright bar */
.fu-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.3);
}

.fu-legal {
    display: flex;
    gap: 24px;
}

.fu-legal a {
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: color 0.25s;
}

.fu-legal a:hover {
    color: #a78bfa;
}

/* Responsive */
@media (max-width: 1024px) {
    .fu-billboard-inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .fu-tagline {
        max-width: 100%;
    }

    .fu-slim-top {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

@media (max-width: 640px) {
    .fu-big-title {
        font-size: clamp(2.4rem, 8vw, 3rem);
    }

    .fu-trust-row {
        flex-wrap: wrap;
        gap: 20px;
    }

    .fu-slim-nav {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .fu-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .fu-card {
        padding: 30px 24px;
    }
}

.social-links {
    display: flex;
    gap: 12px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 40px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

/* === Back to Top === */
.progress-wrap {
    position: fixed;
    right: 30px;
    bottom: 100px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(115, 75, 223, 0.2);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap::after {
    position: absolute;
    font-family: 'Phosphor-Bold';
    content: '\e801';
    text-align: center;
    line-height: 46px;
    font-size: 24px;
    color: var(--primary-1);
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear;
}

.progress-wrap i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    /* Rocket tilt */
    color: var(--primary-1);
    font-size: 1.2rem;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 0 5px rgba(115, 75, 223, 0.5));
}

.progress-wrap:hover i {
    transform: translate(-50%, -70%) rotate(-45deg);
    /* Launch animation */
    color: var(--primary-2);
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: var(--primary-1);
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .split-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

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

    .newsletter-card {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
        letter-spacing: -1px;
    }

    .modern-hero-grid {
        gap: 30px;
    }

    .section-title {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }
}

/* === 8. Architectural Split Scroller === */
.split-section {
    background: #ffffff;
}

.split-layout {
    display: flex;
    gap: 120px;
}

.split-left {
    flex: 0.8;
}

.sticky-wrap {
    position: sticky;
    top: 140px;
    align-self: flex-start;
}

.split-desc {
    font-size: 1.2rem;
    color: #64748b;
    line-height: 1.7;
    margin-top: 30px;
    max-width: 400px;
}

.scroll-hint {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 60px;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-1);
    letter-spacing: 2px;
}

.mouse {
    width: 22px;
    height: 36px;
    border: 2px solid var(--primary-1);
    border-radius: 20px;
    position: relative;
}

.mouse::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--primary-1);
    border-radius: 50%;
    animation: mouse-scroll 2s infinite;
}

@keyframes mouse-scroll {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, 15px);
        opacity: 0;
    }
}

.split-right {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.split-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 32px;
    padding: 60px;
    display: flex;
    gap: 40px;
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.split-card:hover {
    transform: translateX(15px);
    border-color: var(--primary-1);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.06);
}

.card-num {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    color: var(--primary-1);
    font-weight: 700;
    opacity: 0.3;
}

.card-icon {
    font-size: 2.8rem;
    color: var(--primary-1);
    margin-bottom: 24px;
}

.card-body h3 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 16px;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.card-body p {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.7;
    margin: 0;
}

/* === 5. Process Section === */
.process-section {
    background: #f8f9fa;
    position: relative;
    overflow: hidden;
}

.process-glow-extra {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(115, 75, 223, 0.05) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* === Pristine Architectural Process Gallery (unified) === */

.section-label.dark {
    color: rgba(15, 15, 17, 0.4);
}

.section-title.dark {
    color: #0f0f11;
}

.section-header p.dark {
    color: rgba(15, 15, 17, 0.6);
}

.process-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(280px, auto);
    gap: 24px;
    margin-top: 80px;
}

.bento-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 40px;
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.bento-item--large {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}

.bento-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    border-color: var(--step-color);
}

.bento-num {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--step-color);
    letter-spacing: 4px;
    font-weight: 700;
    margin-bottom: 20px;
}

.bento-icon {
    font-size: 2.5rem;
    color: var(--step-color);
    margin-bottom: 20px;
    transition: transform 0.4s ease;
}

.bento-item:hover .bento-icon {
    transform: scale(1.1) rotate(-5deg);
}

.bento-content h3 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f0f11;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.bento-content p {
    color: rgba(15, 15, 17, 0.6);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* Specific styling for large items */
.bento-item--large .bento-icon {
    font-size: 4rem;
    margin-bottom: 0;
}

.bento-item--large .bento-num {
    position: absolute;
    top: 40px;
    left: 40px;
}

/* Mobile Adjustments */
@media (max-width: 1024px) {
    .process-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .process-bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-item--large {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .bento-item--large .bento-icon {
        font-size: 2.5rem;
    }
}

/* ====================================================
   SIDEBAR RESPONSIVE TYPOGRAPHY & SPACING
==================================================== */
@media (max-width: 1024px),
(max-height: 800px) {
    .sidebar-menu {
        padding: 20px 25px;
        /* Tighter padding for small/short screens */
    }

    .sidebar-header {
        margin-bottom: 20px;
    }

    .sidebar-header .logo {
        font-size: 1.2rem;
    }

    .menu-close {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .sidebar-links a {
        font-size: 0.8rem;
        /* Smaller font */
        padding: 8px 15px;
        /* Tighter padding */
        letter-spacing: 2px;
    }

    .sidebar-contact-info {
        padding-top: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        gap: 15px;
        /* Tighter gaps */
    }

    .sci-item {
        gap: 10px;
    }

    .sci-icon {
        font-size: 1.2rem;
    }

    .sci-label {
        font-size: 0.65rem;
    }

    .sci-value {
        font-size: 0.85rem;
    }

    .sidebar-footer {
        padding-top: 15px;
    }

    .sidebar-footer p {
        margin-bottom: 15px;
        font-size: 0.65rem;
    }

    .sidebar-footer .social-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* === Premium Product Grid Quad === 
.product-grid-section { background: #05070a; padding: 120px 0; }
.product-grid-quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px; }
.pg-card { background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; overflow: hidden; position: relative; transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
.pg-image { position: relative; height: 280px; overflow: hidden; }
.pg-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.pg-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 7, 10, 0.9) 0%, transparent 100%); }
.pg-content { padding: 30px; position: relative; z-index: 2; }
.pg-cat { color: #FF4F00; font-size: 0.65rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.pg-card h3 { color: #ffffff; font-size: 1.4rem; font-weight: 800; margin-bottom: 15px; letter-spacing: -0.5px; }
.pg-card p { color: rgba(255, 255, 255, 0.5); font-size: 0.9rem; line-height: 1.6; margin-bottom: 25px; }
.pg-link { color: #ffffff; font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 1px; }
.pg-card:hover { transform: translateY(-12px); border-color: rgba(255, 79, 0, 0.3); box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
.pg-card:hover .pg-image img { transform: scale(1.1); }
@media (max-width: 1199px) { .product-grid-quad { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .product-grid-quad { grid-template-columns: 1fr; } }

/* === Project Protocol Modal (Premium White Theme) === */
.project-modal {
    position: fixed;
    inset: 0;
    z-index: 40000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.project-modal.active {
    opacity: 1;
    pointer-events: all;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 10, 0.4);
    backdrop-filter: blur(10px);
    z-index: -1;
}

.modal-container {
    width: 90%;
    max-width: 600px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    position: relative;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.12);
    transform: translateY(40px) scale(0.98);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.project-modal.active .modal-container {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
}

.modal-close:hover {
    background: #ffffff;
    color: var(--primary-1);
    border-color: var(--primary-1);
    transform: rotate(90deg);
}

.modal-header {
    padding: 40px 40px 20px;
    text-align: left;
}

.modal-label {
    display: block;
    font-family: 'Onest', sans-serif;
    color: var(--primary-1);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.modal-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f0f11;
    letter-spacing: -0.5px;
}

.modal-body {
    padding: 0 40px 30px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-1) #f1f5f9;
}

.modal-body::-webkit-scrollbar {
    width: 4px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--primary-1);
    border-radius: 10px;
}

.modal-form {
    display: grid;
    gap: 16px;
}

.modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

.form-group label {
    font-family: 'Onest', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
}

.form-group input,
.form-group textarea {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 12px 16px;
    color: #0f0f11;
    font-size: 0.9rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-1);
    background: #ffffff;
    box-shadow: 0 0 10px rgba(115, 75, 223, 0.08);
}

.form-group.has-error input,
.form-group.has-error textarea {
    border-color: #DC2626;
    background: #fef2f2;
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus {
    border-color: #DC2626;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.08);
}

.form-error {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: #DC2626;
    letter-spacing: 0.5px;
    display: none;
    margin-top: 2px;
}

.form-group.has-error .form-error {
    display: block;
}

.form-group .form-error {
    display: none;
}

.modal-submit.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

.modal-submit.is-success {
    background: #059669;
}

.modal-submit.is-error {
    background: #DC2626;
}

.modal-submit {
    margin-top: 10px;
    padding: 16px;
    background: var(--primary-1);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.modal-submit:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(115, 75, 223, 0.2);
}

.modal-footer {
    padding: 20px 40px 40px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: center;
}

.modal-footer-note {
    font-family: 'Onest', sans-serif;
    font-size: 0.8rem;
    color: var(--text-dark-muted);
    font-weight: 500;
}

@media (max-width: 768px) {
    .modal-container {
        padding: 40px 25px;
        width: 95%;
    }

    .modal-title {
        font-size: 1.6rem;
    }

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

    /* === Final Global Responsive Polish === */
    @media (max-width: 991px) {
        .stats-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }

        .section-padding {
            padding: 60px 0 !important;
            /* Reduced mobile padding */
        }

        /* Strict Mobile Footer Alignment (Screenshot Match) */
        .footer-arch {
            background: radial-gradient(ellipse 120% 80% at 50% 100%, #3b2195 0%, #0d0a24 50%, var(--bg-darker) 100%) !important;
        }

        .fa-nav-row {
            padding: 60px 0 40px;
        }

        /* === Architectural Stack (Screenshot Match) === */
        .fa-nav-inner {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 50px;
            padding: 60px 25px;
        }

        .fa-brand {
            margin: 0 0 10px 0;
        }

        .fa-logo {
            font-size: 1.8rem;
            font-weight: 800;
            color: #ffffff;
        }

        .fa-links-row {
            display: flex !important;
            flex-wrap: wrap !important;
            width: 100% !important;
            gap: 0 !important;
            margin: 0 !important;
        }

        .fa-link-group {
            width: 50% !important;
            flex: 0 0 50%;
            margin-bottom: 40px;
        }

        /* Target the Contact group specifically */
        .fa-link-group:nth-child(5) {
            width: 100% !important;
            flex: 0 0 100%;
            margin-bottom: 0;
        }

        .fa-locations {
            width: 100% !important;
        }

        .fa-loc-flags {
            flex-wrap: wrap;
            gap: 8px;
        }

        /* Force separators to disappear completely */
        .fa-link-sep {
            display: none !important;
        }

        .fa-group-label {
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 2px;
            margin-bottom: 25px;
            display: block;
        }

        .fa-link-group a,
        .fa-link-group span {
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 12px;
            line-height: 1.5;
            text-decoration: none;
            display: block;
        }

        .fa-social-wrap {
            width: 100%;
            margin-top: 10px;
        }

        .fa-group-label {
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 20px;
            display: block;
            text-transform: uppercase;
        }

        .fa-link-group a,
        .fa-link-group span {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.65);
            margin-bottom: 15px;
            text-decoration: none;
            line-height: 1.5;
            font-weight: 500;
        }

        .fa-social-wrap {
            width: 100%;
            padding-top: 10px;
        }

        .fa-social-wrap .fa-group-label {
            margin-bottom: 20px;
        }

        .fa-socials {
            justify-content: flex-start;
            gap: 20px;
        }

        .fa-loc-flags {
            justify-content: flex-start;
        }
    }

    @media (max-width: 576px) {
        .stats-container {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .ps-track .portfolio-card {
            flex: 0 0 90%;
        }

        .ps-dots {
            margin-top: 24px;
        }

        /* Ensure hero content doesn't overflow on small phones */
        .hp-title {
            font-size: clamp(2.2rem, 10vw, 3rem) !important;
            letter-spacing: -1px !important;
            margin-bottom: 20px;
        }

        @media (max-width: 575px) {
            .hp-title {
                font-size: 8vw !important;
                /* Force one-line for Software Solutions */
            }
        }

        .hp-actions {
            flex-direction: column !important;
            width: 100% !important;
            max-width: 320px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .hp-actions .panel-cta,
        .hp-actions .btn {
            width: 100% !important;
            justify-content: center !important;
            height: 54px !important;
            font-size: 0.9rem !important;
        }

        .section-title {
            font-size: clamp(1.8rem, 9vw, 2.2rem) !important;
        }

        .hp-actions {
            flex-direction: column;
            width: 100%;
            padding: 0 20px;
        }

        .hp-actions .btn {
            width: 100%;
        }
    }

    .hp-actions .btn {
        width: 100%;
    }
}

justify-content: flex-start;
}
}

@media (max-width: 576px) {
    .stats-container {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ps-track .portfolio-card {
        flex: 0 0 90%;
    }

    .ps-dots {
        margin-top: 24px;
    }

    /* Ensure hero content doesn't overflow on small phones */
    .hp-title {
        font-size: clamp(2.2rem, 10vw, 3rem) !important;
        letter-spacing: -1px !important;
        margin-bottom: 20px;
    }

    @media (max-width: 575px) {
        .hp-title {
            font-size: 8vw !important;
            /* Force one-line for Software Solutions */
        }
    }

    .hp-actions {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hp-actions .panel-cta,
    .hp-actions .btn {
        width: 100% !important;
        justify-content: center !important;
        height: 54px !important;
        font-size: 0.9rem !important;
    }

    .section-title {
        font-size: clamp(1.8rem, 9vw, 2.2rem) !important;
    }

    .hp-actions {
        flex-direction: column;
        width: 100%;
        padding: 0 20px;
    }
    .hp-actions .btn {
        width: 100%;
    }
}

/* --- MONUMENTAL GRID SYSTEM --- */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.col-lg-9 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-lg-3 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 992px) {
    .col-lg-9 {
        flex: 0 0 75% !important;
        max-width: 75% !important;
    }
    .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

/* Ensure the container is exactly matched to tech-new */
.container {
    width: 100%;
    padding-right: 15px; /* Matched to tech-new mobile padding */
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
}
@media (max-width: 768px) {
    .container {
        padding: 0 20px !important;
    }
}
/* === Appended Submenu & Portal Styles === */

/* Escape .nav-module backdrop-filter stacking trap.
   Links module needs to render above sibling modules and below-nav content. */
.nav-module-links  {
    z-index: 1200 !important;
    overflow: visible !important;
} 

.nav-links-dock  {
    overflow: visible !important;
} 

.nav-links-dock li.has-submenu  {
    position: relative;
    z-index: 1201;
} 

.nav-links-dock .nav-item.nav-item-parent  {
    display: inline-flex;
    align-items: center;
    gap: 6px;
} 

.nav-links-dock .nav-item-parent .submenu-caret  {
    font-size: 0.7em;
    transition: transform 0.2s ease-out;
    opacity: 0.7;
}

.has-submenu:hover .submenu-caret,
.has-submenu:focus-within .submenu-caret  {
    transform: rotate(180deg);
} 

.nav-submenu  {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 240px;
    margin-top: 14px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.04);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out, visibility 0.18s;
    z-index: 1100;
} 

/* Invisible bridge — fills the gap between trigger and submenu
   so mouse can traverse without losing :hover state */
.nav-submenu::before  {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
} 

.has-submenu:hover > .nav-submenu,
.has-submenu:focus-within > .nav-submenu  {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
} 

.nav-submenu li  {
    list-style: none;
    margin: 0;
    padding: 0;
} 

.nav-submenu a  {
    display: block;
    padding: 9px 14px;
    color: #1e293b;
    text-decoration: none;
    font-family: 'Onest', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 9px;
    line-height: 1.4;
    transition: background 0.15s ease-out, color 0.15s ease-out;
} 

.nav-submenu a:hover,
.nav-submenu a:focus-visible  {
    background: rgba(115, 75, 223, 0.07);
    color: #734BDF;
    outline: none;
} 

/* Hide submenus on small screens — sidebar menu handles mobile nav */
@media (max-width: 991px)  {
    .nav-submenu { display: none; }
    .nav-links-dock .submenu-caret { display: none; }
}

@media (prefers-reduced-motion: reduce) { 
    .nav-submenu,
    .submenu-caret  {
        transition: none;
    }
} 
/* === Contact form (.cf-) — used by contactus.html === */
.cf-form-error  {
    display: none;
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    color: #DC2626;
    letter-spacing: 0.04em;
    margin-top: 4px;
} 
.form-group.is-error .cf-form-error  { display: block; } 
.form-group.is-error input,
.form-group.is-error textarea  {
    border-color: #DC2626;
} 
.form-group.is-error input:focus,
.form-group.is-error textarea:focus  {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
} 
.cf-form-status  {
    display: none;
    font-family: 'Onest', sans-serif;
    font-size: 0.92rem;
    color: #DC2626;
    margin-top: 8px;
} 
.cf-form-status.is-visible  { display: block; } 
.cf-form-success  {
    display: none;
    align-items: flex-start;
    gap: 16px;
    margin-top: 12px;
    padding: 20px 24px;
    background: rgba(115, 75, 223, 0.06);
    border: 1px solid rgba(115, 75, 223, 0.18);
    border-radius: 12px;
} 
.cf-form-success.is-visible  { display: flex; } 
.cf-form-success > i  {
    font-size: 1.5rem;
    color: var(--primary-1);
    flex-shrink: 0;
    margin-top: 2px;
} 
.cf-form-success-title  {
    font-family: 'Onest', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-darker);
    margin: 0 0 4px;
} 
.cf-form-success-body  {
    font-family: 'Onest', sans-serif;
    font-size: 0.92rem;
    color: var(--text-dark-muted);
    margin: 0;
    line-height: 1.5;
} 


/* === Mega menu (nav + portal sidebar) — imported from latest design === */
.nav-submenu.nav-submenu-mega  {
    min-width: 680px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-radius: 16px;
} 

.nav-submenu-mega a  {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    text-decoration: none;
    color: #1e293b;
    border-radius: 12px;
    transition: background 0.2s ease-out;
} 

.nav-submenu-mega a:hover,
.nav-submenu-mega a:focus-visible  {
    background: rgba(115, 75, 223, 0.05);
    color: inherit;
} 

.nav-submenu-mega .sm-icon  {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: var(--primary-1);
    background: rgba(115, 75, 223, 0.1);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.2s ease;
} 

.nav-submenu-mega a:hover .sm-icon  {
    background: var(--primary-1);
    color: #fff;
} 

.nav-submenu-mega .sm-text  {
    flex: 1;
} 

.nav-submenu-mega .sm-title  {
    font-family: 'Onest', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
    display: block;
    color: #1e293b;
    transition: color 0.2s ease;
} 

.nav-submenu-mega a:hover .sm-title  {
    color: var(--primary-1);
} 

.nav-submenu-mega .sm-desc  {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
    display: block;
    font-weight: 400;
} 

/* --- Mobile Menu Submenu Accordion --- */
.portal-has-submenu  {
    display: flex;
    flex-direction: column;
    width: 100%;
} 
.portal-link-wrapper  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
} 
.portal-submenu-toggle  {
    background: transparent;
    border: 1px solid rgba(15, 23, 42, 0.1);
    color: var(--text-dark);
    font-size: 1rem;
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
} 
.portal-submenu-toggle:hover,
.portal-submenu-toggle.active  {
    background: var(--primary-1);
    color: #fff;
    border-color: var(--primary-1);
} 
.portal-submenu  {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin 0.4s ease, padding 0.4s ease;
} 
.portal-submenu.active  {
    max-height: 400px;
    margin-top: 12px;
    padding-left: 12px;
} 
.portal-submenu li  {
    margin: 0;
    padding: 0;
} 
.portal-submenu a  {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Onest', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
} 
.portal-submenu a i  {
    font-size: 1.2rem;
    color: var(--primary-1);
    transition: transform 0.2s ease;
} 
.portal-submenu a:hover  {
    background: rgba(115, 75, 223, 0.05);
    color: var(--primary-1);
} 
.portal-submenu a:hover i  {
    transform: scale(1.1);
}
/* Modal Success & Status Messages */
 .project-modal .form-success {
     display: none;
     background: rgba(5, 150, 105, 0.05);
     border: 1px solid rgba(5, 150, 105, 0.15);
     padding: 16px 20px;
     border-radius: 8px;
     color: #059669;
     font-size: 0.9rem;
     line-height: 1.5;
     position: relative;
     overflow: hidden;
     margin-bottom: 15px;
     backdrop-filter: blur(4px);
 }

 .project-modal .form-success.is-visible {
     display: block;
     animation: modalSuccessSlide 0.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
 }

 .project-modal .form-success::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 4px;
     background: #059669;
     border-radius: 4px 0 0 4px;
 }

 .project-modal .form-success strong {
     display: block;
     font-family: 'Onest', sans-serif;
     font-size: 1.05rem;
     font-weight: 700;
     margin-bottom: 4px;
     color: #047857;
 }

 @keyframes modalSuccessSlide {
     from {
         opacity: 0;
         transform: translateY(10px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 .project-modal .form-status {
     display: none;
     font-size: 0.85rem;
     color: #DC2626;
     padding: 12px 16px;
     background: #fef2f2;
     border-left: 3px solid #DC2626;
     border-radius: 4px;
     margin-bottom: 15px;
 }
 
 .project-modal .form-status.is-visible {
     display: block;
     animation: modalSuccessSlide 0.3s ease forwards;
 }