*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: initial;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

:root {
    /* Virall Roadmap Palette Phase 1 */
    --color-cotton: #EDEBDD;
    --color-cherry-red: #810100;
    --color-maroon: #630000;
    --color-noir-black: #1B1717;

    /* Theme Mappings */
    --color-bg: var(--color-noir-black);
    --color-text: var(--color-cotton);
    --color-primary: var(--color-cherry-red);
    --color-primary-dark: var(--color-maroon);
    --color-accent: #2d2a2a;
    /* Slightly lighter than Noir */

    --glass-bg: rgba(237, 235, 221, 0.05);
    /* Cotton tint */
    --glass-border: rgba(237, 235, 221, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

    --font-heading: 'Vazir', sans-serif;
    --font-body: 'Vazir', sans-serif;
    --radius-lg: 20px;
    --radius-md: 12px;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    line-height: 1.8;
    overflow-x: hidden;
    width: 100%;
    scrollbar-gutter: stable;
    /* Prevent site shaking when modal disables overflow */
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(229, 9, 20, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0);
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Glassmorphism Classes */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--radius-lg);
}

/* Header */
header {
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    padding: 0 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 90px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.centered-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* RESTORED GLOBAL NAV STYLES */
.nav-links {
    list-style: none;
    display: flex;
    /* Horizontal by default */
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-links li {
    display: block;
}

.nav-links a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--color-primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-panel-link {
    color: var(--color-primary);
    font-weight: bold;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.user-panel-link:hover {
    color: white;
}

.logo img {
    height: 70px;
    transition: transform 0.3s;
    /* White Box Style (Global) */
    background: white;
    padding: 6px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    width: auto;
}

.logo img:hover {
    transform: scale(1.05);
}

@media (min-width: 993px) {
    header {
        /* Desktop: Standard LTR-like visual layout */
        /* Logo Right, Nav Center, Actions Left */
        /* Since Body is RTL:
           Flow is: [Item 1] ... [Item 2] ... [Item 3] (Right to Left)
           HTML Order: 
           1. .header-left (Menu+Buttons)
           2. .logo
           3. .desktop-nav (Absolute)
           
           If we leave it as default RTL flex:
           Rightmost: .header-left (Buttons) -> WRONG, we want Buttons on Left.
           Next: .logo -> WRONG, we want Logo on Right.
           
           Solution: Force header to LTR on Desktop too OR use Row-Reverse is confusing with absolute.
           Best: Just use direction: ltr on header for desktop as well to stabilize layout.
        */
        direction: ltr;
        /* Force Left-to-Right layout */
        justify-content: space-between;
    }

    /* Actions Group (Left Side) */
    .header-left {
        order: 1;
        /* Leftmost */
        display: flex;
        /* Ensure it's visible */
        align-items: center;
    }

    /* Logo (Right Side) */
    .logo {
        order: 2;
        /* Rightmost */
        margin-left: 0;
        /* Clear auto margins */
    }

    /* Ensure Nav is centered relative to screen */
    .centered-nav {
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
    }

    /* Ensure hamburger is hidden */
    .hamburger-btn {
        display: none !important;
    }

    /* CRITICAL: HIDE MOBILE DRAWER ON DESKTOP */
    /* Prevents "blue links" from appearing on the right */
    .mobile-menu-drawer {
        display: none !important;
    }
}

@media (max-width: 992px) {

    /* --- Mobile Header: STRICT LTR LAYOUT --- */
    /* We use direction: ltr to STOP RTL confusion. 
       Left is Left. Right is Right. Period. */
    header {
        direction: ltr !important;
        padding: 0 10px;
        height: 60px;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        align-items: center;
        overflow: visible;
    }

    /* Left Group: Hamburger + Buttons */
    /* Because of LTR, this is strictly on the Left */
    .header-left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        /* No order needed, DOM order is: LeftGroup, Logo */
    }

    /* Right Group: Logo */
    /* Because of LTR, this is strictly on the Right */
    .logo {
        flex-shrink: 0;
        display: flex;
        align-items: center;
    }

    .logo img {
        height: 35px;
        width: auto;
        /* Restore Logo Box Styles */
        background: white;
        padding: 4px;
        border-radius: 6px;
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
    }

    /* Hide Desktop Nav */
    .desktop-nav {
        display: none !important;
    }

    /* Hamburger Button (Restored) */
    .hamburger-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: white;
        font-size: 1.8rem;
        cursor: pointer;
        padding: 0;
        margin-right: 5px;
    }

    /* Header Actions (Restored) */
    .header-actions {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .user-panel-link {
        font-size: 0.7rem;
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.08);
        padding: 5px 8px;
        border-radius: 6px;
        color: #ddd;
    }

    .header-actions .btn-primary {
        padding: 6px 10px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Drawer Styles: Slide from LEFT using TRANSFORM */
    .mobile-menu-drawer {
        position: fixed;
        top: 0;
        left: 0;
        /* Anchor to left edge */
        bottom: 0;
        width: 280px;
        background: #000;
        z-index: 10001;
        /* High Z-index */

        /* Start state: Moved 100% to the Left */
        transform: translateX(-100%);
        visibility: hidden;

        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.3s;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        direction: rtl;
        /* Keep internal text RTL */
    }

    .mobile-menu-drawer.active {
        /* End state: Moved to natural position (0) */
        transform: translateX(0);
        visibility: visible !important;
    }

    .drawer-close-btn {
        position: absolute;
        top: 15px;
        left: 15px;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 1.8rem;
        cursor: pointer;
        z-index: 10002;
    }

    .mobile-nav-links {
        text-align: right;
        padding: 0 1rem;
        margin-top: 4rem;
        list-style: none;
        /* Ensure no bullets */
    }

    .mobile-nav-links li {
        margin-bottom: 1.5rem;
    }

    .mobile-nav-links a {
        color: var(--color-cotton);
        text-decoration: none;
        font-size: 1.2rem;
        font-weight: 500;
        display: block;
        transition: 0.2s;
    }

    .mobile-nav-links a:hover {
        color: var(--color-primary);
        transform: translateX(-5px);
    }

    @media (max-width: 500px) {

        /* Ultra-small screens: Scale even more */
        .pricing-carousel-container {
            transform: scale(0.45);
            margin-top: -4rem;
            margin-bottom: -8rem;
        }

        header {
            padding: 0 5px;
        }

        .centered-nav ul.nav-links {
            font-size: 0.6rem;
            gap: 5px;
        }
    }


    .logo img:hover {
        transform: scale(1.05);
    }
}

/* ... Navigation ... */

/* Blog/Portfolio Grids */
/* Global Grids */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem;
    justify-content: center;
    justify-items: center;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.5rem;
    /* Increased spacing as requested */
    justify-content: center;
    justify-items: center;
    width: 100%;
}

@media (max-width: 1200px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

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

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

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.article-card {
    background: var(--color-accent);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: 0.3s;
    display: flex;
    /* Flex to push button to bottom */
    flex-direction: column;
    padding-bottom: 20px;
    /* Space for button */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--color-primary);
}

.article-img {
    height: 180px;
    /* Slightly smaller */
    background-size: cover;
    background-position: center;
}

.article-content {
    padding: 1.2rem;
    flex-grow: 1;
    /* Pushes button down */
    display: flex;
    flex-direction: column;
}

.article-meta {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 0.5rem;
}

.article-card h3 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    line-height: 1.4;
}

.article-excerpt {
    font-size: 0.9rem;
    color: #ccc;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.read-more {
    display: inline-block;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
    align-self: flex-start;
    border: 1px solid var(--color-primary);
    padding: 5px 15px;
    border-radius: 20px;
    transition: 0.3s;
    font-size: 0.9rem;
    margin-top: 10px;
}

.read-more:hover {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 0 15px rgba(129, 1, 0, 0.4);
}

header nav ul.nav-links {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        height: auto;
        padding: 1rem;
    }

    .logo img {
        height: 60px;
        margin-bottom: 1rem;
    }

    header nav ul.nav-links {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        width: 100%;
    }
}


.read-more:hover {
    background: var(--color-primary);
    color: white;
}

nav ul {
    display: flex;
    align-items: center;
    /* Forced Vertical Align */
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100%;
    /* Take full height of nav */
}

nav a {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
    position: relative;
    padding-bottom: 5px;
}

nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    right: 0;
    /* RTL */
    background: var(--color-primary);
    transition: width 0.3s ease;
}

nav a:hover {
    color: var(--color-primary);
}

nav a:hover::after {
    width: 100%;
}


/* Hero Section */
.hero {
    text-align: center;
    padding: 8rem 2rem;
    background: radial-gradient(circle at center, rgba(30, 30, 30, 1) 0%, rgba(15, 15, 15, 1) 70%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(129, 1, 0, 0.1) 0%, transparent 50%);
    animation: rotate 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}

/* Tablet Responsiveness */
@media (min-width: 768px) and (max-width: 991px) {
    .pricing-carousel-container {
        transform: scale(0.65);
        margin-top: -2rem;
        margin-bottom: -4rem;
    }
}

.hero h2 {
    font-size: 4rem;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, #bbb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
}

.hero p {
    font-size: 1.4rem;
    color: #aaa;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    position: relative;
    z-index: 1;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    /* Cotton text on red button? Or white is fine. */
    padding: 12px 30px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(129, 1, 0, 0.4);
    position: relative;
    z-index: 1;
    display: inline-block;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(129, 1, 0, 0.6);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: bold;
}

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

/* Sections */
.content-section {
    padding: 6rem 10%;
}

.section-title {
    text-align: center;
    margin-bottom: 4rem;
    font-size: 2.5rem;
    color: var(--color-primary);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--color-primary);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

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

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

.service-card {
    background: var(--color-accent);
    padding: 3rem 2rem;
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.service-card:hover {
    transform: translateY(-10px);
    background: #252525;
    border-color: var(--color-primary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.service-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: block;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

/* Premium Pricing Section */
.pricing-tabs {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    perspective: 1000px;
}

.tab-btn {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-cotton);
    padding: 10px 22px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 0.85rem;
    font-family: inherit;
    border-bottom: 2px solid transparent;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.2);
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--color-cherry-red), #ff1a1a);
    border-color: var(--color-cherry-red);
    color: white;
    box-shadow: 0 10px 20px rgba(129, 1, 0, 0.3);
    transform: translateY(-5px) scale(1.05);
}

/* 3D Pricing Carousel (Planetary Mode) */
.pricing-carousel-container {
    position: relative;
    width: 100%;
    height: 750px;
    /* Increased height for tilt clearance */
    margin: 5rem 0;
    perspective: 2000px;
    /* Increased for better 3D depth */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

@media (max-width: 768px) {
    .pricing-carousel-container {
        perspective: 600px;
        /* Stronger perspective for mobile to bring back cards closer */
    }
}

.carousel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Manual rotation removed, handled by card translation */
}



.central-sphere {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Increased by 3x (45px -> 135px) */
    width: 135px !important;
    height: 135px !important;
    background: radial-gradient(circle at 30% 30%, #333, #000);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Reduced shadow */
    box-shadow: 0 0 10px rgba(129, 1, 0, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%) translateZ(0);
    z-index: 50;
    overflow: visible;
}

@media (max-width: 992px) {
    .central-sphere {
        /* Increased by 3x (35px -> 105px) */
        width: 105px !important;
        height: 105px !important;
    }

    .sphere-text {
        font-size: 1.5rem;
        /* Reverted to original */
    }
}

@media (max-width: 480px) {
    .central-sphere {
        /* Increased by 3x (25px -> 75px) */
        width: 75px !important;
        height: 75px !important;
    }
}

.sphere-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    /* Reverted font size to original */
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px var(--color-cherry-red);
    z-index: 10;
    font-family: var(--font-heading);
    letter-spacing: 2px;
    text-align: center;
    line-height: 1.1;
    width: 100%;
    pointer-events: none;

}

.sphere-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 35% 35%, #9b0100 0%, #600000 40%, #200000 100%);
    border-radius: 50%;
    box-shadow:
        0 0 15px rgba(155, 1, 0, 0.6),
        inset -2px -2px 10px rgba(0, 0, 0, 0.8),
        inset 3px 3px 5px rgba(255, 255, 255, 0.3);
    /* Metallic gloss */
    animation: spherePulse 4s infinite alternate ease-in-out;
    z-index: 1;
    will-change: transform, opacity;

    /* Metallic gloss */
    animation: spherePulse 4s infinite alternate ease-in-out;
}

.sphere-glow::after {
    content: '';
    position: absolute;
    top: 15%;
    left: 20%;
    width: 40%;
    height: 40%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 80%);
    border-radius: 50%;
    pointer-events: none;
}

/* Base Pricing Card Typography (Will be used by the new card structure) */
.pricing-card h3 {
    font-size: 1.1rem;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-weight: 800;
}

.pricing-card .price {
    font-size: 1.4rem;
    font-weight: bold;
    color: white;
}

.pricing-card .features-list {
    display: none;
    /* Hide on minimal square card face */
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    text-align: right;
    width: 100%;
}

.features-list li {
    margin-bottom: 5px;
    padding-right: 20px;
    position: relative;
    color: #dedddd;
}

.features-list li::before {
    content: "✓";
    position: absolute;
    right: 0;
    color: var(--color-cherry-red);
}

.carousel-stage:active {
    cursor: grabbing;
}

/* --- ENHANCED FULLSCREEN MODAL --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    z-index: 99999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.pricing-modal-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    overflow-y: auto;
    position: relative;
}

/* Big Easy-to-tap close button for mobile */
.modal-close-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 100000;
    backdrop-filter: blur(10px);
}

.modal-zoom-container {
    max-width: 400px;
    /* Slightly narrower for sleeker look */
    width: 90%;
    max-height: 90vh;
    /* Keep it contained */
    background: rgba(10, 10, 10, 0.98);
    border: 1px solid var(--color-primary);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    /* Reduced padding to reclaim space */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(129, 1, 0, 0.5);
    backdrop-filter: blur(40px);
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s;
    overflow: hidden;
    /* ELIMINATE SCROLLING AS REQUESTED */
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    /* Center content vertically if space allows */
}

/* Remove custom scrollbar styles as scrolling is disabled */

@media (max-width: 768px) {
    .modal-zoom-container {
        padding: 1.5rem;
        border-radius: 20px;
    }
}

.modal-title {
    font-size: 1.6rem;
    /* Slightly smaller to save vertical space */
    color: var(--color-primary) !important;
    margin-bottom: 0.25rem;
    text-align: center;
    font-weight: 800;
}

.modal-price {
    font-size: 1.4rem;
    /* Slightly smaller */
    color: white !important;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: 300;
}

.modal-overlay.active .modal-zoom-container {
    transform: scale(1);
    opacity: 1;
}

.modal-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-primary), transparent);
    margin: 1rem 0;
}

.modal-features {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.modal-features li {
    padding: 6px 0;
    /* Tighter spacing */
    font-size: 0.85rem;
    /* Smaller font for zero-scroll */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    padding-right: 22px;
    color: #fff;
    text-align: right;
}

.modal-features li::before {
    content: "✦";
    position: absolute;
    right: 0;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.modal-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 1rem;
    /* Reduced from 2rem to save space */
}

/* Ensure Carousel Container has enough height for Oblique Tilt */
.pricing-carousel-container {
    height: 850px !important;
    /* Increased for oblique offset */
    margin: 6rem 0 8rem 0;
    /* More top margin to avoid header overlap */
}

/* Glassmorphism Card Style - Dark & Compact */
.pricing-card {
    position: absolute;
    /* Reduced size as requested */
    width: clamp(120px, 35vw, 240px) !important;
    height: clamp(160px, 45vw, 280px) !important;
    background: rgba(10, 10, 10, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s, filter 0.5s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    cursor: pointer;
    will-change: transform, opacity;
    /* Hardware acceleration */
}

/* Media query removed in favor of clamp() */

.pricing-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 30px rgba(129, 1, 0, 0.6);
    background: rgba(20, 20, 20, 0.6) !important;
    transform: translateZ(50px) scale(1.1) !important;
}

.pricing-card h3 {
    font-size: 1.1rem;
    /* Smaller font */
    color: var(--color-cotton);
    margin-bottom: 0.3rem;
    transform: translateZ(20px);
}

/* RESTORED PRICING STYLES */
.pricing-card.focused {
    /* No transform override needed, let carousel handle it */
    /* Just highlight */
    border-color: var(--color-primary);
    background: rgba(237, 235, 221, 0.1);
    /* Brighter Cotton tint */
    box-shadow: 0 0 50px rgba(129, 1, 0, 0.6);
}

.pricing-card .price {
    font-size: 1rem;
    /* Smaller price */
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
    transition: 0.3s;
    transform: translateZ(30px);
}

.pricing-card.focused .price {
    font-size: 3rem;
    margin-bottom: 1rem;
    background: linear-gradient(to bottom, var(--color-primary), #ff4d4d);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pricing-card .features-list {
    display: none;
}

.pricing-card.focused .features-list {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    text-align: right;
    font-size: 1rem;
    color: var(--color-cotton);
    animation: fadeIn 0.5s ease forwards;
}

.pricing-card .card-footer {
    display: none;
}

.pricing-card.focused .card-footer {
    display: block;
    animation: fadeIn 0.5s ease forwards;
}

.pricing-card.focused .features-list li {
    margin-bottom: 12px;
    position: relative;
    padding-right: 20px;
}

.pricing-card.focused .features-list li::before {
    content: '✓';
    position: absolute;
    right: 0;
    color: var(--color-primary);
}

.pricing-card .btn,
.pricing-card .btn-outline {
    transform: translateZ(40px);
    width: fit-content;
    margin: 0 auto;
    padding: 8px 20px;
    /* Smaller button padding */
    border-radius: 50px;
    transition: all 0.3s ease;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    font-size: 0.85rem;
    /* Smaller button text */
}

.pricing-card .btn {
    background: var(--color-primary);
    color: white;
    border: none;
    box-shadow: 0 0 20px rgba(129, 1, 0, 0.4);
}

.pricing-card .btn:hover {
    background: white;
    color: var(--color-primary);
    transform: translateZ(50px) scale(1.05);
}

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

.pricing-card .btn-outline:hover {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 0 20px rgba(129, 1, 0, 0.4);
    transform: translateZ(50px) scale(1.05);
}

/* Sphere Pulse Animation moved here if needed */
@keyframes spherePulse {

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

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes spherePulse {

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

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

/* Portfolio & Grids */
.portfolio-card {
    height: 280px;
    /* Rectangular shape restored */
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    perspective: 1000px;
    background: transparent;
    border: none;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.portfolio-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

.portfolio-card.flipped .portfolio-card-inner {
    transform: rotateY(180deg);
}

.portfolio-card-front,
.portfolio-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.portfolio-card-front {
    background: rgba(35, 35, 35, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.portfolio-card-back {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    color: white;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.portfolio-img {
    height: 180px;
    background-size: cover;
    background-position: center;
}

.portfolio-card h3,
.portfolio-card p {
    padding: 0.5rem 1.5rem;
}

.portfolio-card h3 {
    margin-top: 1rem;
    color: #fff;
}

.portfolio-card p {
    color: #aaa;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

/* Team Section - 3D Flip */
.team-card {
    height: 380px;
    /* Portrait rectangular shape */
    perspective: 1000px;
    background: transparent;
    border: none;
    width: 100%;
    max-width: 320px;
}

.team-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}

.team-card:hover .team-card-inner,
.team-card.flipped .team-card-inner {
    transform: rotateY(180deg);
}

.team-card-front,
.team-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.team-card-front {
    background: rgba(35, 35, 35, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Circular Avatar for Team Members */
.member-avatar-container {
    width: 130px;
    height: 130px;
    min-width: 130px;
    min-height: 130px;
    flex-shrink: 0;
    margin-bottom: 2rem;
    position: relative;
    padding: 4px;
    border: 3px solid var(--color-primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    transition: all 0.4s ease;
}

.member-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--color-bg);
}

.member-avatar-container:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
}

.member-role {
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.8rem;
    display: block;
}

.member-desc {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    flex-grow: 1;
}

.member-socials {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icon {
    color: var(--color-text);
    opacity: 0.7;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.social-icon:hover {
    color: var(--color-primary);
    opacity: 1;
    transform: translateY(-3px);
}

.team-card-back {
    background: #1a1a1a;
    background-size: cover;
    background-position: center;
    transform: rotateY(180deg);
    z-index: 1;
}

.member-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    padding: 20px;
    text-align: right;
    color: white;
}

.member-overlay h4 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--color-primary);
}

.member-overlay p {
    margin: 5px 0 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Older Pricing Styles Removed to avoid conflict with 3D Carousel */



.price {
    font-size: 2rem;
    color: var(--color-primary);
    margin: 1rem 0;
    font-weight: 800;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    text-align: right;
    color: #ccc;
}

.pricing-card li {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Testimonials Marquee */
/* Testimonials Marquee (3D Cylinder Effect) */
.testimonials-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 0;
    /* Gap handled by padding */
    padding: 4rem 0;
    perspective: 1000px;
    /* 3D Depth */
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.carousel-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: scroll 60s linear infinite;
    /* Slower for readability */
    transform-style: preserve-3d;
}

.carousel-track:hover {
    animation-play-state: paused;
}

/* Scroll Animation (Left to Right or Right to Left? User said Left to Right potentially) */
/* Standard Marquee moves the content. */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

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

    /* Adjust direction based on user preference. */
}

.quote-card {
    min-width: 320px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: var(--radius-md);
    position: relative;
    border-left: 4px solid var(--color-primary);
    transition: transform 0.3s;
}

.quote-card:hover {
    transform: scale(1.05) translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary);
}

.quote-card p {
    font-style: italic;
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.6;
}

.quote-card span {
    display: block;
    margin-top: 1rem;
    font-weight: bold;
    color: var(--color-primary);
}

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

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

    /* RTL Warning: If direction is RTL, translateX might behave differently. 
       Usually for infinite loop, we want to move from Right to Left. 
       In RTL, standard flow is Right to Left. 
       If we want to scroll continuously, we should translate X. 
       Testing required. If it goes wrong way, change 50% to -50%. */
}

/* Footer */
footer {
    background: #000;
    color: #aaa;
    text-align: center;
    padding: 4rem 2rem;
    margin-top: 5rem;
    border-top: 1px solid #222;
}

footer a {
    color: #f0f0f0;
    transition: 0.3s;
}

footer a:hover {
    color: var(--color-primary);
}


/* Chatbot Widget */
#chatbot-widget button {
    background: var(--color-primary);
    transition: transform 0.3s;
    animation: pulse 2s infinite;
}

#chatbot-widget button:hover {
    transform: scale(1.1);
}

#chat-window {
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    background: #1a1a1a;
    color: white;
}

#chat-messages {
    background: #121212;
}

#chatInput {
    background: #2a2a2a;
    color: white;
    border-top: 1px solid #333;
}

/* Responsive */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 1rem;
    }

    nav ul {
        gap: 15px;
        font-size: 0.9rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero h2 {
        font-size: 2.5rem;
    }

    /* Partner Logos */
    .partners-logos {
        display: flex;
        justify-content: center;
        gap: 3rem;
        margin-top: 4rem;
        flex-wrap: wrap;
        align-items: center;
    }

    .partners-logos img {
        height: 40px;
        /* Uniform height */
        filter: grayscale(100%) opacity(0.6);
        transition: all 0.4s ease;
        cursor: pointer;
    }

    .partners-logos img:hover {
        filter: grayscale(0) opacity(1);
        transform: scale(1.2) rotate(5deg);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    }
}

/* Partner Logos (Desktop) */
.partners-logos {
    margin-top: 5rem;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.partners-logos img {
    height: 50px;
    /* Standardized height */
    max-width: 120px;
    filter: grayscale(100%) opacity(0.5);
    transition: all 0.4s ease;
    object-fit: contain;
}

.partners-logos img:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

/* Chatbot Widget Styles */
.chatbot-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.support-bubble {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: white;
    color: black;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 0.8rem;
    white-space: nowrap;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

.bubble-arrow {
    position: absolute;
    bottom: -5px;
    right: 20px;
    width: 10px;
    height: 10px;
    background: white;
    transform: rotate(45deg);
}

.chat-toggle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    font-size: 24px;
    cursor: pointer;
    background: var(--color-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.5);
    transition: transform 0.3s;
    animation: pulse 2s infinite;
}

.chat-toggle-btn:hover {
    transform: scale(1.1);
}

.chat-window {
    display: none;
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    background: #1a1a1a;
    color: white;
}

.chat-header {
    background: var(--color-primary);
    color: white;
    padding: 15px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.chat-messages {
    height: 350px;
    overflow-y: auto;
    padding: 15px;
    background: #121212;
}

.chat-input-area {
    display: flex;
    border-top: 1px solid #333;
    padding: 10px;
    background: #1a1a1a;
}

.chat-input-area input {
    flex: 1;
    border: none;
    padding: 10px;
    outline: none;
    border-radius: 5px;
    background: #2a2a2a;
    color: white;
    margin-left: 10px;
}

.chat-input-area button {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.chat-input-area button:hover {
    background: var(--color-primary-dark);
}

/* Chatbot Messages */
.chat-msg-container {
    margin: 10px 0;
}

.chat-msg {
    padding: 8px 12px;
    display: inline-block;
    max-width: 80%;
}

.chat-msg-user {
    text-align: left;
}

.chat-msg-user .chat-msg {
    background: #e1e1e1;
    color: #333;
    border-radius: 15px 15px 0 15px;
}

.chat-msg-bot {
    text-align: right;
}

.chat-msg-bot .chat-msg {
    background: var(--color-primary);
    color: white;
    border-radius: 15px 15px 15px 0;
}