:root {
    --bg-color: #050505;
    --text-color: #ffffff;
    --text-muted: #cccccc;
    --accent-color: #646cff;
    /* Fallback */
    --card-bg: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);

    /* Typography System */
    --font-heading: 'Unbounded', sans-serif;
    --font-ui: 'Montserrat', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;

    --section-spacing: 120px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 300;
    /* Default thin weight */
}

html,
body {
    margin: 0;
    padding: 0;
    height: auto;
    overflow-x: hidden;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    /* Set body font */
    line-height: 1.6;
}

/* Typography Assignments */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title,
.mega-title {
    font-family: var(--font-heading);
}

nav,
.btn,
button,
.nav-links,
.menu-item,
.ui-element {
    font-family: var(--font-ui);
}

/* Background Effects */
#glow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background:
        radial-gradient(circle at 10% 20%, rgba(100, 108, 255, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(100, 108, 255, 0.08) 0%, transparent 40%);
    pointer-events: none;
}

#wavy-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.4;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1600 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,400 C300,200 600,600 900,400 C1200,200 1500,600 1800,400' stroke='rgba(255,255,255,0.08)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M0,450 C400,250 700,650 1000,450 C1300,250 1600,650 1900,450' stroke='rgba(255,255,255,0.05)' stroke-width='1' fill='none'/%3E%3Cpath d='M0,350 C200,550 500,150 800,350 C1100,550 1400,150 1700,350' stroke='rgba(255,255,255,0.05)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-size: cover;
}

/* Organic Blobs */
.blob {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -2;
    opacity: 0.6;
    animation: float 20s infinite ease-in-out alternate;
}

.blob-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(100, 108, 255, 0.4) 0%, rgba(123, 79, 255, 0.1) 60%, transparent 80%);
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.blob-2 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(50, 80, 200, 0.3) 0%, rgba(100, 108, 255, 0.05) 60%, transparent 80%);
    bottom: -20%;
    right: -20%;
    animation-delay: -5s;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(30px, 50px) scale(1.1);
    }

    100% {
        transform: translate(-20px, 20px) scale(0.95);
    }
}

/* Header */
/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 50px;
    z-index: 10000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    /* Let clicks pass through header area generally */
}

header * {
    pointer-events: auto;
    /* Re-enable clicks on children */
}

.logo {
    font-weight: 700;
    letter-spacing: 4px;
    font-size: 1.2rem;
    z-index: 10001;
    mix-blend-mode: difference;
    /* Visible on light/dark */
}

/* Hamburger Menu Button */
.hamburger-menu {
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10001;
    width: 40px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px 0;
}

.bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: white;
    transition: transform 0.3s, opacity 0.3s;
    mix-blend-mode: difference;
}

.hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger-menu.active .bar:nth-child(2) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Menu Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0b0b0b;
    z-index: 9998;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.6s, opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-overlay.open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Menu Scroll Lock */
body.no-scroll {
    overflow: hidden;
}

/* Split Layout */
.menu-left {
    width: 40%;
    height: 100%;
    display: flex;
    gap: 20px;
    padding: 0 20px;
    opacity: 0;
    /* Fade in content with delay */
    transform: translateY(20px);
    transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
    overflow: hidden;
    /* Hide scrollbars for columns */
}

.menu-right {
    width: 60%;
    height: 100%;
    padding: 100px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s 0.3s, transform 0.5s 0.3s;
}

.menu-overlay.open .menu-left,
.menu-overlay.open .menu-right {
    opacity: 1;
    transform: translateY(0);
}

/* Gallery Columns */
.gallery-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Create infinite scroll effect */
}

/* =========================================
   Vision & Mission Page Styles
   ========================================= */

/* Simple Hero Styles */
/* Cinematic Hero Styles */
.vision-hero-section {
    min-height: 50vh;
    /* Minimum height for impact */
    height: 450px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    padding: 0;
    /* Remove padding as it is centered flex */
}

/* Dark Overlay */
.vision-hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient: Transparent top showing image -> Black bottom blending to page */
    background: linear-gradient(to bottom, rgba(5, 5, 5, 0.4) 0%, rgba(5, 5, 5, 0.95) 90%, #050505 100%);
    z-index: 1;
    pointer-events: none;
}

/* Background Image & Animation */
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    animation: slowZoom 20s infinite alternate;
}

@keyframes slowZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

.vision-hero-container {
    position: relative;
    z-index: 2;
    /* Above overlay */
    width: 100%;
    text-align: center;
}

.page-main-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    /* Light/Thin */
    font-size: 4.4rem;
    color: #ffffff !important;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -1px;
    text-transform: uppercase;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

/* Use same background color variable or fixed */
.vision-section,
.mission-section {
    position: relative;
    width: 100%;
    padding: 120px 20px;
    z-index: 2;
    overflow: hidden;
}

.vision-container,
.mission-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Vision Specifics */
.vision-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    /* Changed from 900 to 300 (Light) */
    /* Black */
    font-size: 3.5rem;
    color: #fff !important;
    /* Solid White */
    margin-bottom: 30px;
    line-height: 1.1;
    letter-spacing: -1px;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

.vision-text {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.15rem;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 550px;
}

.vision-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vision-list li {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.05rem;
    color: #ddd;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    line-height: 1.5;
}

.vision-dot {
    width: 8px;
    height: 8px;
    background-color: #00ccff;
    /* Cyan Accent */
    border-radius: 50%;
    margin-top: 8px;
    /* Align with text top */
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.6);
}

/* Vision Visual - Infinite Column */
.vision-visual {
    height: 700px;
    /* Tall vertical area */
    position: relative;
    overflow: hidden;
    /* Mask/Fade edges */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.infinite-column-wrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

.infinite-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
    animation: scrollVertical 40s linear infinite;
    width: 100%;
}

.infinite-column img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    filter: grayscale(20%);
    /* Slight mute */
    transition: filter 0.3s ease;
}

.infinite-column img:hover {
    filter: grayscale(0%);
}

@keyframes scrollVertical {
    0% {
        transform: translateY(0);
    }

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

    /* Setup assumes 2 sets of images */
}


/* Mission Specifics */
.mission-section {
    padding-top: 60px;
    /* Less top padding if following Vision */
}

/* Invert Order Visually if needed, but grid handles it */
.mission-visual {
    position: relative;
    height: 800px;
    /* Increased from 600px to 800px */
    width: 110%;
    /* Make it wider than its column */
    left: -5%;
    /* Center the extra width */
    display: flex;
    justify-content: center;
    align-items: center;
}

.collage-grid {
    position: relative;
    width: 100%;
    height: 100%;
}

.collage-item {
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease;
}

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

/* Staggered Layout */
.collage-item.item-1 {
    width: 60%;
    height: 50%;
    top: 10%;
    left: 0;
    z-index: 1;
}

.collage-item.item-2 {
    width: 55%;
    height: 45%;
    bottom: 5%;
    right: 5%;
    z-index: 2;
}

.collage-item.item-3 {
    width: 40%;
    height: 35%;
    top: 35%;
    left: 45%;
    /* Overlapping center */
    z-index: 3;
    border: 4px solid #050505;
    /* Separation border */
}

.collage-item:hover {
    transform: scale(1.03);
    z-index: 10;
}

.mission-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    /* Changed from 900 to 300 (Light) */
    font-size: 3.5rem;
    color: #fff !important;
    margin-bottom: 30px;
    line-height: 1.1;
    letter-spacing: -1px;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

.mission-text {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.15rem;
    color: #e0e0e0;
    line-height: 1.6;
    margin-bottom: 40px;
}

.mission-highlight-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.mission-highlight-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #00ccff;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.mission-highlight-box p {
    font-family: 'Montserrat', sans-serif;
    /* Per typical highlight style */
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff;
    line-height: 1.5;
    margin: 0;
}


/* Responsive Styles */
@media (max-width: 900px) {

    .vision-container,
    .mission-container {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        /* Generally safer for stacking */
    }

    .vision-headline,
    .mission-headline {
        font-size: 2.5rem;
    }

    .vision-list {
        text-align: left;
        /* Keep list left aligned usually looks better */
        padding-left: 10px;
    }

    .vision-visual {
        order: -1;
        /* Image first? or text first? Text first is usually standard for Vision, but visual hook works. Let's keep Text first for vision (default) */
        height: 400px;
        /* Shorter on mobile */
    }

    .mission-visual {
        order: -1;
        /* Visual first for mission (standard) */
        height: 400px;
        margin-bottom: 20px;
    }

    .mission-content {
        order: 2;
    }

    .vision-text,
    .mission-text {
        margin-left: auto;
        margin-right: auto;
    }
}


/* We need to duplicate content in JS or just simple CSS animation moving a long strip */
/* For simplicity, we assume we have a wrapper moving */
/* Better approach without complex JS: Use CSS animation on the column itself. */

.col-down {
    animation: scrollDown 40s linear infinite;
}

.col-up {
    animation: scrollUp 45s linear infinite;
}

@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes scrollUp {
    0% {
        transform: translateY(0%);
    }

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

/* Note: Visual continuity requires duplicated items in HTML or repeating background logic. */
/* For now, just moving it slowly. */

.gallery-item {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    flex-shrink: 0;
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.gallery-item:hover {
    filter: grayscale(0%);
}

/* Navigation Links */
.main-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: auto;
    /* Push footer down */
}

.nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    /* Dimmed state */
    text-decoration: none;
    line-height: 1;
    transition: color 0.3s, transform 0.3s;
}

.nav-link:hover {
    color: #fff;
    transform: translateX(20px);
}

/* Menu Footer */
.menu-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 40px;
    align-items: start;
}

.social-links,
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-btn,
.contact-info a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.social-btn:hover,
.contact-info a:hover {
    color: #fff;
}

/* Studio Dot Button Style */
.studio-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background-color: #000;
    color: #ffffff !important;
    /* Ensure White */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    /* Pill shape */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: hidden;
    transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease;
    z-index: 1;
}

/* Fix for invisible text */
.studio-btn .btn-text,
.studio-btn span {
    color: #ffffff !important;
    z-index: 2;
    position: relative;
    transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.studio-btn:hover .btn-text,
.studio-btn:hover span {
    color: #000000 !important;
}

/* Background Fill Animation */
.studio-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: -1;
}

.studio-btn:hover {
    color: #000;
    border-color: #000;
    /* Inverted border color on hover */
}

.studio-btn:hover::before {
    transform: translateY(0);
}

/* Arrow/Icon Animation */
.studio-btn .arrow {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    font-size: 1.1rem;
    line-height: 1;
}

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

.studio-btn .dot {
    font-size: 1.2rem;
    line-height: 0;
    margin-left: 5px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.studio-btn:hover .dot {
    opacity: 1;
    transform: scale(1);
}

/* Responsive */
@media (max-width: 900px) {
    .menu-left {
        display: none;
        /* Hide visual clutter on mobile */
    }

    .menu-right {
        width: 100%;
        padding: 80px 30px;
    }

    .nav-link {
        font-size: 2.5rem;
    }

    .menu-footer {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Sctions */
.scroll-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--section-spacing) 20px;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

h1 {
    font-size: 6rem;
    /* Larger */
    font-weight: 200;
    /* Extra thin */
    letter-spacing: -2px;
    line-height: 1.1;
    margin-bottom: 20px;
    background: linear-gradient(to bottom, #ffffff, #888888);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: 4rem;
    margin-bottom: 40px;
    font-weight: 200;
    /* Thin */
    letter-spacing: 0px;
    text-transform: none;
    /* More organic feel */
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    max-width: 800px;
}

ul {
    list-style-type: disc;
    padding-left: 20px;
    color: var(--text-muted);
}

li {
    margin-bottom: 10px;
}

/* Hero */
#hero {
    align-items: center;
    padding: 0;
    overflow: hidden;
    max-width: none !important;
    /* Full width override */
}

.hero-container {
    width: 100%;
    max-width: 100%;
    padding: 0 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Center horizontally */
    min-height: 100vh;
    text-align: center;
    /* Center text */
    z-index: 2;
}

.hero-title {
    font-size: 15rem;
    /* Bigger as requested */
    font-weight: 300;
    /* Thinner */
    line-height: 0.9;
    letter-spacing: 0.15em;
    /* Spaced out */
    margin: 0 0 20px 0;
    color: #ffffff !important;
    background: none !important;
    /* Remove gradient */
    -webkit-text-fill-color: initial !important;
    font-family: 'Unbounded', sans-serif;
}

.hero-subtitle {
    font-size: 2rem;
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 20px 0;
    align-self: center;
    text-align: center;
    margin-right: 0;
    line-height: 1.2;
    font-family: 'Montserrat', sans-serif;
    /* Montserrat */
}

.hero-subline {
    font-size: 1.2rem;
    color: #ffffff;
    /* White */
    max-width: 700px;
    margin: 100px auto 40px auto;
    /* Pushed down 100px */
    line-height: 1.6;
    font-family: 'Source Sans 3', sans-serif;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .hero-title {
        font-size: 15vw;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
}

/* Vision */
#vision .text-block {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
}

/* --- Clients & Partners Section --- */
#clients-partners {
    background-color: var(--bg-color);
    padding: 50px 0;
    overflow: hidden;
    position: relative;
    z-index: 5;
    max-width: none !important;
    /* Full width */
}

.cp-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
    padding: 0 20px;
}

.cp-header h2 {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 20px;
    font-family: 'Unbounded', sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15em;
}

.cp-subline {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-family: 'Source Sans 3', sans-serif;
}

.logo-scroll-group {
    margin-bottom: 60px;
    width: 100%;
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-track {
    display: inline-flex;
    gap: 150px;
    /* Space between logos */
    animation: scrollMarquee 80s linear infinite;
    /* Slower (40s -> 80s) */
    padding-left: 40px;
    /* Initial offset */
    align-items: center;
}

.marquee-track.reverse {
    animation: scrollMarqueeReverse 80s linear infinite;
    /* Slower (40s -> 80s) */
    /* Start at -50% effectively */
    transform: translateX(-50%);
}

.marquee-track img {
    height: 150px;
    /* Logo height */
    width: auto;
    object-fit: contain;
    /* Ensure full color */
    filter: none;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.marquee-track img:hover {
    opacity: 1;
}

/* Animations */
/* Move Left (Right-to-Left visual) */
@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }

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

/* Move Right (Left-to-Right visual) */
/* Requires starting at -50% and going to 0 */
@keyframes scrollMarqueeReverse {
    0% {
        transform: translateX(-50%);
    }

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

/* Adjust duration for different speeds if needed */
.marquee-track:hover {
    animation-play-state: paused;
}

/* Mission */
.mission-box {
    border: 1px solid #7b4fff;
    /* Purple border from screenshot */
    padding: 60px;
    border-radius: 0;
    position: relative;
    max-width: 900px;
    background: rgba(0, 0, 0, 0.3);
}

.mission-box .highlight {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 30px;
}

/* Clients */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 40px;
    width: 100%;
    margin-top: 40px;
}

.client-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    background: var(--card-bg);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.client-logo-img {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    /* Constrain height */
    filter: grayscale(100%) brightness(0.8);
    transition: filter 0.3s, transform 0.3s;
    opacity: 0.7;
}

.client-logo-img:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    transform: scale(1.1);
}

.logo-section h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
}

/* Horizontal Scroll Section (Lando Style) */
/* =========================================
/* =========================================
   NEW SECTION: Benefits (White Background)
   ========================================= */
.white-bg {
    background-color: #ffffff;
    color: #000000;
    min-height: 100vh;
    /* Fullscreen */
    width: 100%;
    padding: 0 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

.benefits-container {
    max-width: 1400px;
    /* Wider container */
    width: 100%;
    display: flex;
    /* Split Layout */
    justify-content: space-between;
    align-items: flex-start;
    gap: 5vw;
    padding-top: 10vh;
    /* Optical balance */
}

/* Left: Intro Text */
.benefits-intro {
    flex: 1;
    max-width: 45%;
}

.benefits-intro h2 {
    font-size: 2.8rem;
    line-height: 1.1;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    text-align: left;
    margin: 0;
}

/* Right: Benefits List & Button */
.benefits-content-right {
    flex: 1;
    max-width: 45%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Align right as per request */
}

.benefits-list {
    width: 100%;
    margin-bottom: 60px;
}

.benefit-item {
    margin-bottom: 25px;
    text-align: right;
    /* Text aligns right */
}

.benefit-item span {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.benefit-item .benefit-label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.benefit-item hr {
    border: 0;
    border-top: 2px solid #000;
    opacity: 1;
    width: 100%;
}

/* Custom Animated Button (Hamburger Style) */
.custom-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Replicating the 'circle' button style usually seen in high-end sites */
.btn-circle {
    width: 50px;
    height: 50px;
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    transition: background 0.3s, color 0.3s;
}

.custom-btn:hover .btn-circle {
    background: #000;
    color: #fff;
}

.btn-text {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
}

.btn-wrapper {
    text-align: right;
    width: 100%;
}

/* =========================================
   NEW SECTION: Horizontal Graph & Logos (Black)
   ========================================= */
/* =========================================
   NEW SECTION: Graph & Logos (Vertical Stack)
   ========================================= */
.horizontal-section {
    width: 100%;
    /* No fixed height, let content flow */
    overflow: visible;
    position: relative;
    background-color: #000;
    display: block;
    /* Vertical flow */
}

/* Background Big '&' - Adjusted for vertical */
.background-ampersand {
    position: absolute;
    top: 20%;
    /* Near top of section */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40vw;
    font-weight: 800;
    color: #fff;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
    font-family: inherit;
}

.horizontal-scroll-container {
    display: block;
    /* Stack vertically */
    width: 100%;
    height: auto;
    z-index: 1;
}

.panel {
    width: 100%;
    min-height: 100vh;
    /* Each panel takes at least one screen */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding: 100px 5vw;
    /* Vertical padding */
}

/* --- Panel 1: Logos --- */
.logo-panel .panel-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    height: 100%;
    position: relative;
}

.big-title {
    font-size: 8rem;
    line-height: 0.85;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    text-align: left;
    position: relative;
    z-index: 2;
    mix-blend-mode: difference;
    /* Optional cool effect */
}

.logo-columns-container {
    display: flex;
    gap: 60px;
    /* Wider gap */
    height: 80vh;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.logo-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 180px;
    position: relative;
}

/* Labeled Columns */
.logo-col::before {
    content: attr(data-label);
    color: #666;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 20px;
    display: block;
}

.logo-img {
    width: 100%;
    height: auto;
    /* Removed white background */
    /* Removed padding */
    object-fit: contain;
    /* Removed grayscale */
    display: block;
    transition: transform 0.3s;
}

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

/* --- Panel 2: Graph --- */
.graph-panel .panel-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.graph-title {
    font-size: 3rem;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.graph-wrapper {
    position: relative;
    width: 100%;
    height: 50vh;
    z-index: 2;
}

.growth-graph {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.stat-point {
    position: absolute;
    color: #fff;
    text-align: center;
    width: 250px;
    transform: translate(-50%, -50%);
}

.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: #ff8c00;
    margin-bottom: 5px;
}

.stat-label {
    display: block;
    font-size: 1rem;
    text-transform: uppercase;
    color: #ccc;
    letter-spacing: 1px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .benefits-container {
        flex-direction: column;
        padding-top: 50px;
    }

    .benefits-intro,
    .benefits-content-right {
        max-width: 100%;
        align-items: flex-start;
    }

    .benefit-item {
        text-align: left;
    }

    .big-title {
        font-size: 4rem;
    }

    .background-ampersand {
        font-size: 80vw;
        opacity: 0.1;
    }
}

/* Legacy overrides just in case */
.columns-scroll-section {
    display: none;
}

.benefits-container {
    max-width: 1200px;
    width: 100%;
}

.benefits-intro h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 60px;
    color: #000;
    text-align: left;
}

.benefits-list {
    margin-bottom: 60px;
}

.benefit-item {
    margin-bottom: 20px;
}

.benefit-item span {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.benefit-item .benefit-label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.benefit-item hr {
    border: 0;
    border-top: 1px solid #000;
    opacity: 1;
}

.black-btn {
    display: inline-block;
    background-color: #000;
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.black-btn:hover {
    transform: scale(1.05);
    background-color: #333;
}

.btn-wrapper {
    text-align: right;
}

/* =========================================
   NEW SECTION: Horizontal Graph & Logos (Black)
   ========================================= */
.horizontal-section {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #000;
    display: flex;
}

.horizontal-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    width: 200vw;
    /* 2 panels of 100vw each */
    height: 100%;
}

.panel {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding: 0 5vw;
}

/* --- Panel 1: Logos --- */
.logo-panel .panel-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
}

.big-title {
    font-size: 8rem;
    line-height: 0.85;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    text-align: left;
}

.logo-columns-container {
    display: flex;
    gap: 30px;
    height: 80vh;
    overflow: hidden;
    position: relative;
}

.logo-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* No gap, continuous blocks */
    width: 180px;
    position: relative;
    background-color: #ff0000;
    /* Red Background as per mockup */
}

/* Labeled Columns */
.logo-col::before {
    content: attr(data-label);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    padding: 10px 0;
    display: block;
    background: #000;
}

.logo-img {
    width: 100%;
    height: 120px;
    /* Fixed height for block feel */
    background: #ff0000;
    /* Red background */
    padding: 20px;
    box-sizing: border-box;
    object-fit: contain;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    /* Divider */
    transition: transform 0.3s;
}

.logo-img {
    width: 100%;
    height: auto;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    filter: grayscale(100%);
    display: block;
}

/* --- Panel 2: Graph --- */
.graph-panel .panel-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.graph-title {
    font-size: 3rem;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 50px;
    font-weight: 700;
}

.graph-wrapper {
    position: relative;
    width: 100%;
    height: 400px;
}

.growth-graph {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.stat-point {
    position: absolute;
    color: #fff;
    text-align: center;
    width: 200px;
    transform: translate(-50%, -50%);
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ff8c00;
    margin-bottom: 5px;
}

.stat-label {
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    color: #ccc;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .big-title {
        font-size: 4rem;
    }

    .benefits-intro h2 {
        font-size: 1.5rem;
    }

    .horizontal-scroll-container {
        width: 400vw;
    }

    .panel {
        width: 100vw;
        padding: 0 20px;
    }
}

/* Legacy overrides just in case */
.columns-scroll-section {
    display: none;
}

/* Remove edge transition gradients */
.columns-scroll-section::before,
.columns-scroll-section::after {
    display: none;
}

.columns-wrapper {
    display: flex;
    gap: 15vw;
    height: 100vh;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    padding-left: 40vw;
    /* Push logos to the right so they don't cover title initially */
    z-index: 20;
}

.columns-title-block {
    position: absolute;
    left: 10vw;
    top: 50%;
    transform: translateY(-50%);
    width: 25vw;
    text-align: right;
    /* Or left, depending on preference, but user said 'far left' */
    z-index: 50;
    /* Above everything */
    pointer-events: none;
}

.section-title {
    font-size: 3.5rem;
    /* Adjusted for fit */
    line-height: 1.1;
    color: #fff;
    margin: 0;
}

.col-clients {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 250px;
}

.col-partners {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 250px;
    transform: translateX(0);
    /* Reset shift */
}

.col-title {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-muted);
    margin-bottom: 40px;
    text-align: center;
}

.logo-stack {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* Stats Sequence Styles - VISIBLE BY DEFAULT NOW */
.stats-container {
    position: absolute;
    right: 10vw;
    /* Fixed on right side */
    top: 50%;
    transform: translateY(-50%);
    width: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    opacity: 1 !important;
    /* Force visible */
    visibility: visible !important;
    pointer-events: none;
    z-index: 30;
}

.stat-item {
    font-size: 1.2rem;
    color: #fff;
    opacity: 1 !important;
    transform: none !important;
}

.stat-item .highlight {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
}

.v-logo {
    width: 100%;
    max-width: 180px;
    height: auto;
    opacity: 0.8;
    transition: opacity 0.3s, transform 0.3s;
}

.v-logo:hover {
    opacity: 1;
    transform: scale(1.1);
}


/* Background Bubbles (Lando Style) */
.background-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    /* Behind content */
    pointer-events: none;
}

.bubble {
    position: absolute;
    border-radius: 50%;
    background: #333;
    /* Dark Gray */
    opacity: 0.5;
    filter: blur(80px);
    /* Soft diffused look */
    animation: floatBubble 20s infinite ease-in-out alternate;
}

.bubble.b1 {
    width: 50vw;
    height: 50vw;
    top: -10%;
    left: -10%;
    background: #2a2a2a;
    animation-duration: 25s;
}

.bubble.b2 {
    width: 40vw;
    height: 40vw;
    bottom: -10%;
    right: -10%;
    background: #333;
    animation-duration: 18s;
    animation-delay: -5s;
}

.bubble.b3 {
    width: 30vw;
    height: 30vw;
    top: 40%;
    left: 40%;
    background: #222;
    animation-duration: 30s;
    animation-delay: -10s;
}

@keyframes floatBubble {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

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

.pin-wrap {
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 5vw;
    /* Start with some padding */
    width: auto;
    /* Dynamic width */
    overflow: visible;
    position: relative;
    /* Ensure z-index works atop bubbles */
    z-index: 1;
}

.track {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 10vw;
}

.track-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title-block .section-title {
    font-size: 8rem;
    /* Big impact font */
    line-height: 0.9;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    margin: 0;
}

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

.logo-grid-horizontal {
    display: flex;
    gap: 12vw;
    /* Larger gap for spacious feel */
    align-items: center;
    padding: 0 5vw;
    /* Start padding */
}

.h-logo {
    height: auto;
    width: auto;
    opacity: 0.8;
    --y-pos: 0;
    transform: translateY(var(--y-pos)) scale(1);
    transition: opacity 0.3s, transform 0.3s;
    /* Base filter if needed, or keeping original colors */
}

.h-logo:hover {
    opacity: 1;
    transform: translateY(var(--y-pos)) scale(1.1);
    z-index: 2;
}

/* Client Count Text in Scroll */
.client-count-text {
    font-size: 4rem;
    font-weight: 200;
    /* Thin */
    line-height: 1.1;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    margin: 0 5vw;
    /* Spacing from logos */
    opacity: 0.9;
    --y-pos: 0;
    /* Use our new var system */
    transform: translateY(var(--y-pos));
}

.client-count-text .highlight-number {
    font-weight: 400;
    /* Bolder number */
    color: var(--accent-color);
    /* Use theme accent */
}

/* Ensure text doesn't jitter on hover (it shouldn't generally, but just in case) */
/* Ensure text doesn't jitter on hover (it shouldn't generally, but just in case) */

@media (max-width: 768px) {
    .client-count-text {
        font-size: 2.5rem;
    }
}

/* Sizes */
.size-s {
    max-height: 200px;
}

.size-m {
    max-height: 225px;
}

.size-l {
    max-height: 250px;
}

/* Vertical Positioning (Scattered) */
/* important to ensure specificity overrides any default align */
/* Vertical Positioning (Scattered) */
/* Using CSS variables to allow hover scale without resetting translate */
.pos-high {
    --y-pos: -35vh;
}

.pos-center {
    --y-pos: 0;
}

.pos-low {
    --y-pos: 35vh;
}

.pos-mid-high {
    --y-pos: -15vh;
}

.pos-mid-low {
    --y-pos: 15vh;
}

/* --- Lando-Style Split Layout --- */
.split-scroll-wrapper {
    position: relative;
    /* We will use GSAP to pin the content, but we need a container */
    width: 100%;
    /* No overflow: hidden here as we might need sticky behavior */
}

.pinned-top {
    /* This will be pinned by GSAP */
    width: 100%;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.scroll-spacer {
    /* Defines the scroll distance for the pinned section */
    height: 300vh;
    /* Adjust for speed/duration */
    pointer-events: none;
}

.dynamic-content-container {
    /* This container sits fixed (or pinned) covering the screen */
    position: fixed;
    top: 50vh;
    /* Starts at bottom half */
    left: 0;
    width: 100%;
    height: 50vh;
    pointer-events: none;
    /* Let clicks pass through if needed */
    z-index: 5;
    opacity: 0;
    /* Hidden initially, shown by JS */
}

.dynamic-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    opacity: 0;
    /* GSAP will handle fade in/out */
    padding: 0 5vw;
    box-sizing: border-box;
}

.left-col-title {
    display: flex;
    justify-content: flex-end;
    padding-right: 40px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.left-col-title h2 {
    font-family: 'Anton', sans-serif;
    font-size: 5vw;
    line-height: 0.9;
    text-align: right;
    margin: 0;
    color: #fff;
}

.right-col-text {
    padding-left: 40px;
}

.right-col-text h3 {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 20px;
}

.right-col-text p {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.vertical-flow {
    position: relative;
    z-index: 20;
    /* Sit above the pinned stuff when it's done */
    background: var(--bg-color);
    padding-bottom: 100px;
}

.content-section {
    padding: 100px 5%;
}

.container-narrow {
    max-width: 1000px;
    margin: 0 auto;
}

/* Timeline specific styles */
.timeline-container {
    position: relative;
    margin-top: 60px;
    padding-left: 20px;
}

.timeline-line-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 29px;
    /* Adjust centering */
    width: 2px;
    background: rgba(255, 255, 255, 0.2);
    /* Black/Dark line with outline effect roughly */
    z-index: 1;
}

.timeline-line-fill {
    position: absolute;
    top: 0;
    left: 29px;
    width: 2px;
    background: #fff;
    height: 0%;
    /* Fills up via JS */
    z-index: 2;
    transition: height 0.1s linear;
}

.timeline-step {
    position: relative;
    padding-left: 80px;
    margin-bottom: 80px;
    opacity: 0.3;
    /* Faded out normally */
    transition: opacity 0.3s;
}

.timeline-step.active {
    opacity: 1;
}

.step-dot {
    position: absolute;
    left: 20px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    border: 2px solid #fff;
    z-index: 5;
}

.timeline-step.active .step-dot {
    background: #fff;
}

.step-num {
    font-family: 'Anton', sans-serif;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
}

.studio-btn.outlined {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.mb-40 {
    margin-bottom: 40px;
}

.text-center {
    text-align: center;
}

.btn-group {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.pos-mid-high:hover {
    transform: translateY(-12vh) scale(1.2);
}

.pos-mid-low:hover {
    transform: translateY(12vh) scale(1.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .title-block .section-title {
        font-size: 4rem;
    }

    .logo-grid-horizontal {
        gap: 40px;
    }

    .h-logo {
        height: 40px;
    }
}



/* Packages */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 columns side by side */
    gap: 15px;
    width: 100%;
    max-width: 1400px;
    /* Allow more width */
}

.package-card {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 20px;
    /* Reduced padding */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
    opacity: 0;
    /* Initial state for animation */
    /* Animation definition happens via class addition or scroll trigger,
       but user requested step-wise fade in. We'll use classes added by JS or simple delay. */
    transform: translateY(30px);
}

.package-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Stagger delays */
.package-card:nth-child(1) {
    transition-delay: 0.1s;
}

.package-card:nth-child(2) {
    transition-delay: 0.3s;
}




.stat-item {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--text-color);
    line-height: 1.2;
    opacity: 0;
    /* Animated individually */
    transform: translateY(20px);
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-icon {
    font-size: 3rem;
    /* Slightly larger than text */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}


.stat-item .highlight {
    color: var(--accent-color);
    font-weight: 600;
}

@media (max-width: 768px) {
    .stat-item {
        font-size: 1.8rem;
    }
}


.about-footer {
    text-align: center;
    padding: 150px 0;
}

.about-footer p {
    font-size: 2.5rem;
    margin: 0 auto 60px;
    max-width: 900px;
    font-weight: 200;
    line-height: 1.4;
}

/* Responsive for About Page */
@media (max-width: 1024px) {

    .philosophy-item,
    .section-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .philosophy-item .label,
    .section-header .label {
        text-align: left;
    }

    .philosophy-item .separator,
    .section-header .separator {
        display: none;
    }

    .team-list {
        margin-left: 0;
    }

    .vision-mission-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-page {
        padding: 120px 20px;
        gap: 100px;
    }
}

/* Custom Cursor */
.cursor-dot-outline {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    background-color: white;
    /* Will become black on white bg due to difference */
    mix-blend-mode: difference;
    transition: width 0.2s, height 0.2s, background-color 0.2s;
    will-change: transform;
}

/* Mouse Follower Glow (Blue Gradient) */
.mouse-follower-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 600px;
    /* Large soft glow */
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 100, 255, 0.12) 0%, rgba(0, 100, 255, 0) 60%);
    pointer-events: none;
    z-index: 0;
    /* Behind content, above canvas */
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    /* Or lighten, test what looks best on black */
    filter: blur(50px);
    opacity: 0;
    /* JS will fade it in */
    transition: opacity 0.5s ease;
}

/* Dynamically added link wrapper for logos */
.logo-link {
    display: block;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    /* remove underline if any */
}

/* Improve contact info visibility */
.contact-info a {
    text-decoration: none;
    /* Already set, duplicating to be sure */
}

.contact-info a:hover {
    text-decoration: underline;
    opacity: 1;
}

.gallery-item {
    display: block;
    /* Ensure dynamic anchor tags behave as blocks */
    width: 100%;
    min-height: 200px;
    /* Force height so background image shows */
    background-size: cover;
    background-position: center;
    filter: none !important;
    /* Force color - remove any grayscale */
    margin-bottom: 20px;
    border-radius: 8px;
    /* Optional: looks nicer */
}

/* --- Reality Check Section --- */
#reality-check {
    background-color: var(--bg-color);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0;
    position: relative;
    z-index: 5;
    overflow: hidden;
    max-width: none !important;
    /* Force Full Width */
}

.reality-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 100%;
    width: 100%;
    align-items: center;
    padding: 0 5vw;
}

.reality-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.reality-tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    letter-spacing: 4px;
    color: #ff3b3b;
    /* Red Accent */
    text-transform: uppercase;
    font-weight: 600;
}

.reality-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: 4rem;
    /* Big */
    line-height: 1.1;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}

.highlight-red {
    color: #ff3b3b;
    /* Red accent for "Kein System" */
    font-weight: 700;
}

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

.pain-point-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 4px;
    /* Minimalist */
    position: relative;
    transition: all 0.4s ease;
    cursor: default;
}

.pain-point-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 59, 59, 0.3);
    /* Red hint on hover */
    transform: translateX(10px);
}

.card-icon {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 20px;
    right: 20px;
    font-weight: 700;
}

.pain-point-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 5px;
    font-weight: 700;
    text-transform: uppercase;
}

.pain-point-card p {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.6;
    margin: 0;
    max-width: 90%;
}

/* Animations */
/* Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

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

    .reality-headline {
        font-size: 3rem;
    }
}

/* Background Gradient Effect */
.reality-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.gradient-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    /* Soft blur */
    opacity: 0.5;
    animation: floatBlob 20s infinite ease-in-out alternate;
}

.blob-red {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 59, 59, 0.25) 0%, transparent 70%);
    top: -20%;
    right: -20%;
}

.blob-purple {
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(123, 79, 255, 0.15) 0%, transparent 70%);
    bottom: -20%;
    left: -20%;
    animation-delay: -7s;
}

@keyframes floatBlob {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(40px, 60px) scale(1.15);
    }
}

/* Blue Theme Blobs */
.blob-blue {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.25) 0%, transparent 70%);
    top: -20%;
    right: -20%;
}

.blob-cyan {
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(0, 204, 255, 0.15) 0%, transparent 70%);
    bottom: -20%;
    left: -20%;
    animation-delay: -7s;
}

/* Highlights */
.highlight-blue {
    color: #0066ff;
    font-weight: 700;
}

.highlight-cyan {
    color: #00ccff;
    font-weight: 700;
}

/* Value Prop 3-Column Layout */
.value-3-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* 3 Equal Columns */
    gap: 20px;
    max-width: 100vw;
    /* Force Full Width */
    width: 100vw;
    align-items: center;
    padding: 0 2vw;
    /* Minimal side padding */
    box-sizing: border-box;
    margin: 0;
}

/* Ensure section removes limits */
#value-prop {
    max-width: 100vw !important;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin: 0;
    overflow-x: hidden;
}

@media (max-width: 1024px) {
    .value-3-col {
        grid-template-columns: 1fr 1fr;
        /* 2 Cols */
        padding: 0 5vw;
    }

    .value-cards-col {
        grid-row: 1;
        grid-column: 1;
    }

    .value-text-col {
        grid-row: 1;
        grid-column: 2;
    }

    .value-image-col {
        grid-column: span 2;
        /* Image takes full width underneath */
        justify-content: center;
        grid-row: 2;
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .value-3-col {
        grid-template-columns: 1fr;
        /* Stack */
    }

    .value-cards-col,
    .value-text-col,
    .value-image-col {
        grid-column: span 1;
        grid-row: auto;
    }

    /* Order: Cards, Text, Image */
    .value-cards-col {
        order: 1;
    }

    .value-text-col {
        order: 2;
    }

    .value-image-col {
        order: 3;
    }
}

/* =========================================
   How It Works (Process Timeline)
   ========================================= */
#how-it-works {
    background-color: transparent;
    /* Allow glow to show */
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    width: 100vw;
    /* Force Full Width */
    max-width: 100vw;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Center strictly independent of parent */
}

/* Interactive Background */
.interactive-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    /* Let clicks pass through */
}

.mouse-blob {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.15) 0%, rgba(0, 204, 255, 0.05) 40%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(80px);
    opacity: 0;
    /* Hidden initially until JS activates */
    transition: opacity 0.5s ease;
}

.process-container {
    width: 100%;
    /* Full Width */
    max-width: none;
    /* Remove 1400px limit */
    margin: 0 auto;
    padding: 0 5vw;
    text-align: center;
    position: relative;
    z-index: 2;
}

.process-header {
    margin-bottom: 100px;
}

.process-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 30px;
}

/* Glowing Connecting Line */
.process-line {
    position: absolute;
    top: 70px;
    left: 5%;
    width: 90%;
    height: 4px;
    background: linear-gradient(90deg,
            rgba(0, 102, 255, 0) 0%,
            #0066ff 20%,
            #00ccff 50%,
            #0066ff 80%,
            rgba(0, 102, 255, 0) 100%);
    z-index: 0;
    opacity: 0.6;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.4);
}

/* Steps */
.process-step {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 250px;
    padding: 30px 20px;
    text-align: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 12px;
    border: 1px solid transparent;
}

.process-step:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(0, 204, 255, 0.2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Step Numbers (01, 02...) */
.step-number {
    font-family: 'Unbounded', sans-serif;
    font-size: 5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1);
    /* Increased opacity */
    position: absolute;
    top: -40px;
    right: 20px;
    line-height: 1;
    z-index: -1;
    transition: color 0.3s ease;
}

.process-step:hover .step-number {
    color: rgba(0, 204, 255, 0.2);
    /* Brighter on hover transparent blue */
}

/* Icons */
.step-icon {
    font-size: 2.5rem;
    margin-bottom: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;

    background: #0b0b0b;
    /* Dark bg to mask line */
    border: 2px solid rgba(0, 204, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.1);
    position: relative;
    /* For pulse */
}

.step-icon::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 1px solid rgba(0, 204, 255, 0.4);
    opacity: 0;
    animation: pulseRing 3s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.process-step:nth-child(2) .step-icon::after {
    animation-delay: 0.5s;
}

.process-step:nth-child(3) .step-icon::after {
    animation-delay: 1.0s;
}

.process-step:nth-child(4) .step-icon::after {
    animation-delay: 1.5s;
}

@keyframes pulseRing {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

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

/* Text Styling */
.process-step h3 {
    font-family: 'Unbounded', sans-serif;
    /* Tech feel */
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.process-step p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: #bbb;
    line-height: 1.6;
}

.process-footer p {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.1rem;
    color: #00ccff;
    margin-top: 60px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 900px) {
    .process-timeline {
        flex-direction: column;
        gap: 0;
    }

    .process-line {
        width: 4px;
        height: 100%;
        left: 38px;
        top: 0;
        background: linear-gradient(180deg,
                rgba(0, 102, 255, 0) 0%,
                #00ccff 50%,
                rgba(0, 102, 255, 0) 100%);
    }

    .process-step {
        padding-left: 90px;
        border: none;
        margin-bottom: 40px;
    }

    .step-icon {
        position: absolute;
        left: 0;
        top: 0;
    }

    .step-number {
        top: 0;
        right: 0;
    }
}

/* Close Media Query */

/* Deliverables Section (GLOBAL) */
#deliverables {
    background-color: transparent;
    /* Allow glow to show */
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    border-top: none;
}

.deliverables-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 5vw;
    position: relative;
    z-index: 2;
}

.deliverables-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 80px;
    position: relative;
    padding-left: 20px;
    /* Space for line */
}

/* Connecting Line */
.deliverables-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 29px;
    /* Align with check icons center */
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 204, 255, 0) 0%, rgba(0, 204, 255, 0.4) 15%, rgba(0, 204, 255, 0.4) 85%, rgba(0, 204, 255, 0) 100%);
    z-index: 0;
}

.deliverable-item {
    background: transparent;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
    z-index: 1;
}

/* Hover Effect Background */
.deliverable-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 60px;
    /* Start after icon */
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 204, 255, 0.05) 0%, transparent 100%);
    border-radius: 10px;
    opacity: 0;
    transform: scaleX(0.95);
    transform-origin: left;
    transition: all 0.4s ease;
    z-index: -1;
}

.deliverable-item:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Check Circle (The Node) */
.check-icon {
    font-family: 'Unbounded', sans-serif;
    color: #0b0b0b;
    /* Icon text hidden or dark */
    font-size: 0;
    /* Hide check mark text */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0b0b0b;
    border: 2px solid #00ccff;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.5);
    flex-shrink: 0;
    position: relative;
    transition: all 0.3s ease;
}

/* Inner glow for check */
.check-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #00ccff;
    border-radius: 50%;
    opacity: 1;
    box-shadow: 0 0 10px #00ccff;
}

.deliverable-item:hover .check-icon {
    transform: scale(1.3);
    box-shadow: 0 0 20px rgba(0, 204, 255, 0.8);
    background: #00ccff;
    /* Fill it up */
}

.deliverable-item:hover .check-icon::before {
    background: #fff;
    /* White center on hover */
}

/* Emoji Styling */
.deliverable-emoji {
    font-size: 1.8rem;
    margin-right: 15px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.deliverable-item:hover .deliverable-emoji {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.2) rotate(5deg);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.deliverable-item h3 {
    margin: 0;
    font-family: 'Unbounded', sans-serif;
    font-size: 1.5rem;
    /* Larger text */
    color: #888;
    font-weight: 500;
    text-align: left;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.deliverable-item:hover h3 {
    color: #fff;
    transform: translateX(10px);
    text-shadow: 0 0 15px rgba(0, 204, 255, 0.3);
}

/* Split Layout */
/* Split Layout */
.deliverables-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 5%;
    /* position: relative; REMOVED to allow simple flow */
    z-index: 2;
    overflow-x: hidden;
    /* Prevent horizontal scroll from image */
}

.deliverables-split {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin-top: 60px;
    max-width: 100%;
}

.deliverables-left {
    flex: 0 0 auto;
    width: 600px;
    /* Fixed width for text */
    max-width: 100%;
    margin-left: 50px;
    /* Added shift as requested */
    /*    margin-left: max(0px, calc(50vw - 700px));  Attempt to center-align text container logic */
}

.deliverables-right {
    position: absolute;
    right: -6vw;
    /* Moved left from -10vw */
    top: 50%;
    transform: translateY(-50%);
    width: 60vw;
    display: flex;
    justify-content: flex-end;
    /* Stick to right edge */
    align-items: center;
    z-index: -1;
    pointer-events: none;
}

.deliverables-hand-img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 850px;
    /* Increased +50px */
    object-fit: contain;
    filter: drop-shadow(0 0 40px rgba(0, 204, 255, 0.2));
    animation: floatImage 6s ease-in-out infinite;
    transform-origin: right center;
}


/* Packages Section */
#packages {
    min-height: 1080px;
    height: auto;
    padding: 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    /* Force full width breakout */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Decorative Waves -> Network */
.package-decoration {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 100%;
    z-index: 1;
    /* Behind container (z-index 2) */
    opacity: 0.5;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.package-decoration.left {
    left: -50px;
    /* Static Network SVG - Left */
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='1000' viewBox='0 0 400 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 200 L 150 400 L 50 600' stroke='rgba(0, 204, 255, 0.2)' stroke-width='1' fill='none'/%3E%3Cpath d='M150 400 L 250 300' stroke='rgba(0, 204, 255, 0.2)' stroke-width='1' fill='none'/%3E%3Cpath d='M50 600 L 150 800' stroke='rgba(0, 204, 255, 0.2)' stroke-width='1' fill='none'/%3E%3Ccircle cx='50' cy='200' r='3' fill='rgba(0, 204, 255, 0.6)'/%3E%3Ccircle cx='150' cy='400' r='4' fill='rgba(0, 204, 255, 0.4)'/%3E%3Ccircle cx='50' cy='600' r='3' fill='rgba(0, 204, 255, 0.5)'/%3E%3Ccircle cx='250' cy='300' r='2' fill='rgba(0, 204, 255, 0.3)'/%3E%3Ccircle cx='150' cy='800' r='3' fill='rgba(0, 204, 255, 0.4)'/%3E%3C/svg%3E");
    mask-image: linear-gradient(to right, black 40%, transparent);
    -webkit-mask-image: linear-gradient(to right, black 40%, transparent);
}

.package-decoration.right {
    right: -50px;
    /* Static Network SVG - Right (Mirrored) */
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='1000' viewBox='0 0 400 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M350 200 L 250 400 L 350 600' stroke='rgba(0, 204, 255, 0.2)' stroke-width='1' fill='none'/%3E%3Cpath d='M250 400 L 150 300' stroke='rgba(0, 204, 255, 0.2)' stroke-width='1' fill='none'/%3E%3Cpath d='M350 600 L 250 800' stroke='rgba(0, 204, 255, 0.2)' stroke-width='1' fill='none'/%3E%3Ccircle cx='350' cy='200' r='3' fill='rgba(0, 204, 255, 0.6)'/%3E%3Ccircle cx='250' cy='400' r='4' fill='rgba(0, 204, 255, 0.4)'/%3E%3Ccircle cx='350' cy='600' r='3' fill='rgba(0, 204, 255, 0.5)'/%3E%3Ccircle cx='150' cy='300' r='2' fill='rgba(0, 204, 255, 0.3)'/%3E%3Ccircle cx='250' cy='800' r='3' fill='rgba(0, 204, 255, 0.4)'/%3E%3C/svg%3E");
    mask-image: linear-gradient(to left, black 40%, transparent);
    -webkit-mask-image: linear-gradient(to left, black 40%, transparent);
}

.packages-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 40px;
    z-index: 2;
    text-align: center;
}

.packages-header {
    margin-bottom: 60px;
}

.packages-grid {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping on small screens */
    justify-content: center;
    /* Center the pack */
    gap: 20px;
    /* Adjusted to 20px as requested */
    align-items: flex-start;
    /* Align tops */
    margin: 0 auto 50px auto;
    width: 100%;
    max-width: 1800px;
}

.package-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    /* Rounded corners like image */
    padding: 40px 20px;
    /* Reduced side padding slightly */
    text-align: center;
    /* Center text by default */
    align-items: center;
    /* Center flex children */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    height: auto;
    /* Limit width for thinner look */
    width: 100%;
    max-width: 300px;
    /* Reduced width */
    margin: 0;
    /* Remove auto margins to fix gap */
    /* Permanent subtle glow */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 204, 255, 0.05);
}

.package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 50px rgba(0, 204, 255, 0.2);
    border-color: rgba(0, 204, 255, 0.3);
}

/* Featured Card (Professional) */
.package-card.featured {
    border: 1px solid #00ccff;
    /* Cyan highlight */
    background: rgba(0, 204, 255, 0.05);
    box-shadow: 0 0 40px rgba(0, 204, 255, 0.15);
    transform: scale(1.02);
}

.package-card.featured:hover {
    transform: scale(1.05);
    box-shadow: 0 0 60px rgba(0, 204, 255, 0.3);
}

.package-header {
    background: linear-gradient(90deg, #0f3d3e, #136a6b);
    /* Teal Default (Darker for luxury) */
    color: #fff;
    padding: 1px 0;
    /* Taller */
    width: 90%;
    /* Wide pill */
    margin: 0 auto 30px auto;
    border-radius: 50px;
    display: block;
    /* Block for width */
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Professional & AI UGC: Blue Gradient */
.packages-grid .package-card:nth-child(2) .package-header,
.packages-grid .package-card:nth-child(4) .package-header {
    background: linear-gradient(90deg, #003366, #0066cc);
    /* Blue */
    box-shadow: 0 0 25px rgba(0, 102, 204, 0.3);
}

/* Featured overrides */
.featured .package-header {
    /* Kept by nth-child but ensures precedence if needed */
    border: none;
}

.package-price {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.8rem;
    /* Reduced size */
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    padding-bottom: 30px;
    /* Spacer */
    line-height: 1.2;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    /* Divider Line */
    width: 80%;
    /* Width of divider */
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap;
    /* Force single line */
}

.package-price .currency {
    font-size: 1rem;
    font-weight: 400;
    color: #aaa;
    vertical-align: middle;
    margin-right: 5px;
    font-family: 'Montserrat', sans-serif;
}

.package-price .asterisk {
    font-size: 1rem;
    vertical-align: top;
    color: #aaa;
}

.old-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    color: #666;
    text-decoration: line-through;
    margin-top: 5px;
    font-weight: 500;
}

.package-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    /* Push footer down if we had button */
    width: 100%;
    /* Full width */
    text-align: center;
    /* Keep bullets left */
    padding-left: 20px;
    /* Indent for visual balance */
}

.package-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    color: #ddd;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    padding-left: 15px;
    /* Space for bullet */
}

/* Custom Bullet: Glowy Dot */
.package-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    /* Approx center of first line */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ccff;
    /* Cyan default */
    box-shadow: 0 0 6px #00ccff;
    /* Glow */
}

/* Match bullet color to card theme */
.packages-grid .package-card:nth-child(2) .package-list li::before,
.packages-grid .package-card:nth-child(4) .package-list li::before {
    background: #0088cc;
    /* Blue */
    box-shadow: 0 0 6px #0088cc;
}

.package-list li .check-icon {
    display: none !important;
}

.featured .package-list li .check-icon {
    color: #00ccff;
    /* Blue tick for feature card */
}

.badge-new {
    background: #FFD700;
    color: #000;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 10px;
    margin-left: 10px;
}

.footer-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    text-align: center;
}

.footer-text-group {
    flex: 1;
    max-width: 900px;
}

.footer-cta-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.packages-footer .footer-main {
    text-align: center;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 5px;
    font-weight: 500;
}

.packages-footer .footer-note {
    font-size: 0.85rem;
    color: #888;
    text-align: center;
}

/* Media query essentially redundant for layout direction but kept for safety/font sizes if needed */
@media (max-width: 900px) {
    .footer-content-wrapper {
        gap: 30px;
    }
}

/* Add-ons Section */
.addons-container {
    margin-top: 60px;
    width: 100%;
    text-align: center;
    padding-bottom: 20px;
}

.addons-headline {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 30px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.addons-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    max-width: 1400px;
    margin: 0 auto;
}

.addon-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    /* Pill shape */
    padding: 12px 30px;
    /* Button dimensions */
    flex: 0 1 auto;
    /* Fit content */
    width: auto;
    max-width: none;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: default;
    box-shadow: 0 0 20px rgba(0, 204, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.3);
    margin: 5px;
    /* Minimal margin */
}

.addon-card:hover {
    background: rgba(0, 204, 255, 0.1);
    border-color: #00ccff;
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(0, 204, 255, 0.4), 0 4px 15px rgba(0, 0, 0, 0.3);
}

.addon-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.addon-sub {
    font-size: 0.75rem;
    color: #ccc;
    font-weight: 400;
    margin-left: 5px;
    display: inline;
    /* Keep inline */
    margin-top: 0;
}

.addon-emoji {
    font-size: 1.2rem;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

@media (max-width: 800px) {
    .addon-card h4 {
        white-space: normal;
        text-align: center;
        flex-direction: column;
        gap: 5px;
    }

    .addon-card {
        border-radius: 20px;
        /* Slightly less round on multiline */
    }
}



.packages-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2x2 grid */
}

@media (max-width: 768px) {
    .packages-grid {
        grid-template-columns: 1fr;
        /* Stack vertically */
    }
}

/* Mobile Adjust */
@media (max-width: 1024px) {
    .deliverables-split {
        flex-direction: column;
        gap: 40px;
    }

    .deliverables-right {
        width: 100%;
        order: 2;
        /* Image below list? Or above? Default is below. */
    }

    .deliverables-hand-img {
        max-height: 500px;
        /* Smaller on mobile */
    }

    .deliverables-grid {
        padding-left: 0;
    }

    .deliverables-grid::before {
        left: 19px;
    }

    .deliverable-item h3 {
        font-size: 1.1rem;
    }
}

/* Why Vivix Section (Awwwards Polish & Topo Pattern) */
#why-vivix {
    position: relative;
    width: 100vw;
    max-width: none;
    left: 0;
    margin: 0;
    padding: 40px 20px;
    /* Cinematic Crop */
    background: #02040a;
    overflow: hidden;
}

/* Organic Background Mesh & Topo Lines */
#why-vivix::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(at 50% 0%, rgba(0, 204, 255, 0.08) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='3' seed='15'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='180'/%3E%3C/filter%3E%3Cg filter='url(%23a)' stroke='%2338bdf8' stroke-width='1.5' fill='none' opacity='0.3'%3E%3Cpath d='M-50 50h700M-50 100h700M-50 150h700M-50 200h700M-50 250h700M-50 300h700M-50 350h700M-50 400h700M-50 450h700M-50 500h700M-50 550h700'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%, cover;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

@keyframes pulse-bg {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

.why-container {
    max-width: 1200px;
    /* Tighter container for balance */
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.why-headline {
    text-align: center;
    font-family: 'Unbounded', sans-serif;
    font-size: 2.2rem;
    /* Slightly smaller for elegance */
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 30px;
    /* Reduced margin */
    letter-spacing: 0.5px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    /* Tighter gap */
    align-items: stretch;
}

.why-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 25px 20px;
    /* Reduced padding */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Vertically Center Content */
    height: auto;
    /* Fixed height for uniformity */
}

.why-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

/* Header Pills - Minimalist Glass */
.why-card h3 {
    font-family: 'Unbounded', sans-serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    /* Increased separation from list */

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 10px 24px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    box-shadow: none;
    min-width: 140px;
    /* Tighter pill */
}

.why-card .card-icon {
    font-style: normal;
    font-size: 1.4rem;
    line-height: 1;
    filter: none !important;
    opacity: 1 !important;
    position: static;
    transform: none;
    margin: 0;
    -webkit-text-fill-color: initial !important;
    /* Ensure color is shown */
    color: initial !important;
}

/* Vivix High-Tech Card */
.why-card.vivix-highlight {
    background: rgba(8, 15, 25, 0.9);
    /* Sharp Cyan Inner Border */
    box-shadow: inset 0 0 0 1px #00ccff, 0 10px 40px rgba(0, 0, 0, 0.5);
    border: none;
    /* Let box-shadow handle it */
    transform: scale(1.02);
    z-index: 2;
    position: relative;
    overflow: hidden;
    height: auto;
    /* Ensure Vivix card matches fixed height */
}

/* Subtle Noise Texture for Vivix */
.why-card.vivix-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.3;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.why-card.vivix-highlight:hover {
    box-shadow: inset 0 0 0 1px #4ddaff, 0 15px 50px rgba(0, 204, 255, 0.15);
    transform: scale(1.02) translateY(-3px);
}

.why-card.vivix-highlight h3 {
    background: linear-gradient(135deg, rgba(0, 204, 255, 0.15), rgba(0, 100, 255, 0.05));
    border: 1px solid rgba(0, 204, 255, 0.3);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.1);
}

.why-list {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Significantly increased gap for filling space */
}

.why-list li {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 5px;
    line-height: 1.4;
}

.li-icon {
    font-size: 1rem;
    min-width: 20px;
    text-align: center;
}

.why-list.negative .li-icon {
    filter: none;
    /* Colorful emojis */
}

.why-list.positive li {
    color: #fff;
    font-weight: 500;
}

/* Vivix Icon Checkmark */
.why-card.vivix-highlight .card-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 5px rgba(0, 255, 100, 0.4));
}

.why-bg-decoration {
    display: none;
}

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

    .why-card.vivix-highlight {
        transform: scale(1);
        order: -1;
        margin-bottom: 10px;
    }



}

/* --- Portfolio Loop Section (High-End Marquee) --- */
.portfolio-loop {
    position: relative;
    width: 100vw;
    height: 1080px;
    /* Fixed majestic height */
    background-color: #050505;
    /* Deep Black */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Edge Smoothing (Top/Bottom Fades) */
.portfolio-loop::before,
.portfolio-loop::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 5;
    /* Above images */
    pointer-events: none;
}

.portfolio-loop::before {
    top: 0;
    background: linear-gradient(to bottom, #050505 0%, transparent 100%);
}

.portfolio-loop::after {
    bottom: 0;
    background: linear-gradient(to top, #050505 0%, transparent 100%);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* 6 equal columns */
    width: 100%;
    height: 100%;
    gap: 20px;
    padding: 0 20px;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Will be animated */
}

/* Images */
.col a {
    display: block;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    /* Slight rounding for modern feel */
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.col img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    filter: grayscale(20%) contrast(110%);
    /* Cinematic Touch */
    transition: filter 0.4s ease;
}

.col a:hover img {
    filter: grayscale(0%) contrast(100%);
    transform: scale(1.03);
}

/* Animations */
@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }

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

    /* Shift half because content is doubled */
}

@keyframes scrollDown {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}

.col-1,
.col-3,
.col-5 {
    animation: scrollUp 50s linear infinite;
}

.col-2,
.col-4,
.col-6 {
    animation: scrollDown 55s linear infinite;
}

/* Center Title & Ghost Fade (Visual Correction) */
.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    /* UPDATE: High priority (Critical Fix) */
    background: radial-gradient(ellipse 70% 35% at 50% 50%, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.4) 40%, transparent 80%);
}

.portfolio-overlay h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000 !important;

    font-family: 'Unbounded', sans-serif;
    font-size: 8rem;
    font-weight: 700;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    margin: 0;
    letter-spacing: -2px;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.8) !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent;
}

/* --- Packages Section (Restored 4-Col Layout) --- */
.packages-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 50px;
    /* Slightly reduced top margin */
    align-items: start;
    /* Allow cards to have different heights */
}

#packages h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* Black */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 4.5rem;
    /* Much bigger */
    /* Ensure it's big */
    text-align: center;
    /* Ensure centered */
    width: 100%;
    margin-bottom: 40px;
}

.package-card {
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto;
    /* Hug contents */
    min-height: 0;
    /* Remove constraints */
    position: relative;
    overflow: hidden;
}

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

/* Featured Blue Card (Professional) */
.package-card.featured-blue {
    border: 3px solid #0099ff;
    /* Bright Blue Border */
    box-shadow: 0 0 40px rgba(0, 153, 255, 0.25);
    /* Stronger Glow */
    background: linear-gradient(180deg, rgba(0, 85, 255, 0.08) 0%, rgba(5, 5, 5, 1) 100%);
    position: relative;
    z-index: 4;
    /* Pop out */
}

.package-card.featured-blue:hover {
    box-shadow: 0 0 60px rgba(0, 153, 255, 0.4);
}

/* Pill Headers - Clean Implementation */
.package-header {
    text-align: center;
    margin-bottom: 20px;
    /* Reduced bottom margin */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Center cleanly */
}

.package-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 23px;
    /* Slightly refined size */
    font-weight: 700;
    /* ExtraBold */
    color: #fff;
    margin: 0;
    padding: 8px 20px;
    /* Slightly more compact */
    border-radius: 50px;
    /* Pill Shape */
    display: inline-block;
    width: auto;
    /* Hug text content specifically */
    min-width: 120px;
    /* Ensure some button-like width */
    max-width: 100%;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* No nested container styling needed here, applied directly */
    /* Removed shadows to fix "button in button" feel */
    box-shadow: none !important;
}


/* Professional & AI UGC -> Vibrant Blue */
/* Professional & AI UGC -> Vibrant Blue */
/* Professional Highlight Only -> Vibrant Blue (Restore Blue Button) */
.packages-grid-4 .package-card:nth-child(2) .package-header {
    background: linear-gradient(90deg, #003366, #0066cc) !important;
    box-shadow: 0 0 25px rgba(0, 102, 204, 0.3) !important;
}

/* AI UGC -> Orange Button (New Request) */
.packages-grid-4 .package-card:nth-child(4) .package-header {
    background: linear-gradient(90deg, #ff8800, #ffaa00) !important;
    /* Orange */
    box-shadow: 0 0 25px rgba(255, 136, 0, 0.4) !important;
    border: none !important;
}

/* Ensure h3 inside doesn't conflict */
.packages-grid-4 .package-card:nth-child(2) h3,
.packages-grid-4 .package-card:nth-child(4) h3 {
    background: transparent !important;
}

/* Price Block */
.price-block {
    text-align: center;
    margin-bottom: 20px;
    /* Reduced spacing to list */
    position: relative;
}

.price-main {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}

.big-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.8rem;
    /* Increased size significantly */
    font-weight: 700;
    /* Reduced from 900 (Black) to 800 (ExtraBold) */
    color: #fff;
    margin: 10px 0;
    line-height: 0.9;
    letter-spacing: -1px;
    /* Tighter for heavy impact */
}

.price-sub {
    font-size: 0.8rem;
    color: #666;
    text-decoration: line-through;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: 'Montserrat', sans-serif;
}

/* Features List */
.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Slightly tighter gap */
}

.features-list li {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: #ddd;
    /* Slightly brighter text */
    padding-left: 22px;
    position: relative;
    line-height: 1.4;
    font-weight: 600;
    /* Bolder list items */
}

.features-list li::before {
    content: "●";
    color: #00ccff;
    /* Cyan dots for all */
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.8rem;
    text-shadow: 0 0 5px rgba(0, 204, 255, 0.5);
    /* Glowing dots */
}

/* Featured Blue Dot Override - Keep consistent or match blue? */
/* User asked for cyan/blue accent. Let's keep it cyan specifically for contrast or match the card theme? User said "Akzentfarbe (Cyan/Blau) leuchten" */
.package-card.featured-blue .features-list li::before {
    color: #00ccff;
    /* Keep consistent Cyan accent to pop against dark blue too */
}

/* AI UGC Badge */
.badge-new {
    background: #FFD700;
    /* Yellow */
    color: #000;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0px;
    position: relative;
    top: -1px;
}

.packages-footer {
    width: 100%;
    /* Full width container */
    margin: 60px auto 0 auto;
    /* Vertical spacing and horizontal adj check */
    text-align: center;
    /* Primary centering */
    opacity: 0.7;
    padding: 0;
    /* Remove potential padding offsets */
}

.footer-bold {
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
    /* Explicitly center */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.footer-small {
    font-size: 0.75rem;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
    /* Already had auto, ensuring it stays */
    text-align: center;
    /* Explicitly center */
    width: 100%;
}

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

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

/* --- FAQ Section (Organic Flow Redesign) --- */
#faq {
    background-color: transparent;
    padding: 120px 0;
    /* Remove horizontal padding here, handle in container */
    position: relative;
    z-index: 5;
    width: 100vw !important;
    max-width: 100vw !important;
    /* Force override */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
    /* Prevent horizontal scroll */
}

#faq::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Organic Topography/Wave Background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='none' stroke='rgba(0, 204, 255, 0.15)' stroke-width='1.5' d='M0,160L48,176C96,192,192,224,288,224C384,224,480,192,576,165.3C672,139,768,117,864,128C960,139,1056,181,1152,186.7C1248,192,1344,160,1392,144L1440,128'/%3E%3Cpath fill='none' stroke='rgba(0, 204, 255, 0.1)' stroke-width='1.5' d='M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,224C840,245,960,267,1080,261.3C1200,256,1320,224,1380,208L1440,192'/%3E%3Cpath fill='none' stroke='rgba(0, 204, 255, 0.05)' stroke-width='1.5' d='M0,96L80,112C160,128,320,160,480,154.7C640,149,800,107,960,96C1120,85,1280,107,1360,117.3L1440,128'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    /* Ensure content floats freely */
    background: transparent;
    border: none;
    box-shadow: none;
}

.faq-header {
    text-align: center;
    margin-bottom: 80px;
}

.faq-header h2 {
    font-family: 'Unbounded', sans-serif;
    font-size: 8rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
    /* Pure White */
    margin: 0;
    line-height: 1;
    letter-spacing: -2px;
    opacity: 1;
    text-shadow: none;
    /* Clarity over Glow */
}

/* Accordion Styling (Glassmorphism & Glow) */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Spacing between glowing items */
}

.faq-item {
    border-bottom: 1px solid rgba(0, 204, 255, 0.2);
    /* Glowing Border */
    background: rgba(255, 255, 255, 0.02);
    /* Glass Effect */
    backdrop-filter: blur(5px);
    border-radius: 8px;
    /* Soft edges */
    box-shadow: 0 4px 30px rgba(0, 200, 255, 0.05);
    /* Soft Blue Glow */
    transition: all 0.3s ease;
    overflow: hidden;
    /* For border-radius */
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 4px 40px rgba(0, 200, 255, 0.1);
    border-bottom: 1px solid rgba(0, 204, 255, 0.4);
}

.faq-question {
    padding: 25px 30px;
    /* More padding for card-like feel */
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s ease;
}

.faq-question h3 {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    color: #ffffff;
    margin: 0;
    font-weight: 500;
    transition: all 0.3s ease;
}

.faq-question:hover h3 {
    color: #00ccff;
    text-shadow: 0 0 10px rgba(0, 204, 255, 0.3);
}

/* Icon (Plus to X Animation) */
.faq-icon {
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.faq-icon::before {
    width: 100%;
    height: 2px;
}

.faq-icon::after {
    width: 2px;
    height: 100%;
}

/* Active State for Icon */
.faq-item.active .faq-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

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

.faq-item.active .faq-question h3 {
    color: #00ccff;
}

/* Answer Styling */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
    opacity: 0;
}

.faq-answer p {
    font-family: 'Inter', sans-serif;
    color: #CCCCCC;
    line-height: 1.6;
    font-size: 1rem;
    padding: 0 30px 25px 30px;
    /* Match indentation */
    margin: 0;
}

/* Open State */
.faq-item.active .faq-answer {
    opacity: 1;
    /* max-height will be set via JS using scrollHeight */
}

/* Responsive */
@media (max-width: 1200px) {
    .portfolio-grid {
        grid-template-columns: repeat(4, 1fr);
        /* 4 columns on tablet */
    }

    .col-5,
    .col-6 {
        display: none;
    }

    /* Hide extras */
    .portfolio-overlay h1 {
        font-size: 5rem;
    }
}

@media (max-width: 600px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on mobile */
    }

    .col-3,
    .col-4 {
        display: none;
    }

    .portfolio-overlay h1 {
        font-size: 3rem;
    }
}

/* --- Final CTA Section (Highest Premium) --- */
#final-cta {
    padding: 120px 0 50px 0;
    /* Reduced bottom padding */
    margin-bottom: 0 !important;
    /* Force no margin */
    position: relative;
    /* Keeps background waves visible */
}

.cta-premium-container {
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(20, 20, 30, 0.6);
    /* Very dark glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 255, 255, 0.5);
    /* Cyan Border */
    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
}

.cta-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    /* 55% Text / 45% Visual roughly */
    gap: 50px;
    align-items: center;
}

/* Left Content Styling */
.cta-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.8rem;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta-subline {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.2rem;
    color: #e0e0e0;
    margin-bottom: 30px;
    line-height: 1.6;
}

.cta-features {
    list-style: none;
    padding: 0;
    margin-bottom: 40px;
}

.cta-features li {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.check-icon {
    color: #00ccff;
    /* Cyan Check */
    font-weight: bold;
    text-shadow: 0 0 8px rgba(0, 204, 255, 0.6);
}

/* Button Group */
.cta-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.btn-primary-glow {
    background: linear-gradient(90deg, #00ccff, #0099cc);
    color: #000;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(0, 204, 255, 0.4);
    transition: all 0.3s ease;
}

.btn-primary-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 204, 255, 0.6);
}

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 15px 30px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-ghost:hover {
    border-color: #00ccff;
    color: #00ccff;
}

.arrow {
    transition: transform 0.3s ease;
}

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

.cta-trust {
    font-size: 0.9rem;
    color: #888;
    margin-top: 20px;
}

/* Right Visual (Phone Mockup) */
.phone-mockup-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    animation: floating 6s ease-in-out infinite;
    /* Gentle Float */
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.phone-frame {
    background: #1a1a1a;
    border: 4px solid #444;
    border-radius: 40px;
    padding: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
}

.phone-screen {
    background: #000;
    border-radius: 32px;
    height: 550px;
    /* Phone height approximation */
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.screen-content {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
    /* Deep abstract mock */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Abstract Content Inside Phone */
.screen-content.pulse-glow::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 204, 255, 0.2) 0%, transparent 70%);
    animation: pulseLight 4s infinite alternate;
}

@keyframes pulseLight {
    0% {
        opacity: 0.3;
    }

    100% {
        opacity: 0.8;
    }
}

.play-icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
    z-index: 5;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.phone-glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 80%;
    background: radial-gradient(circle, rgba(0, 204, 255, 0.15), transparent 70%);
    transform: translate(-50%, -50%);
    z-index: 1;
    border-radius: 50%;
    filter: blur(40px);
}

/* Responsive CTA */
@media (max-width: 900px) {
    .cta-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cta-features li {
        justify-content: center;
    }

    .cta-buttons {
        justify-content: center;
    }

    .cta-premium-container {
        padding: 40px 20px;
    }
}

/* =========================================
   About Us Page Styles
   ========================================= */

/* --- General About Settings --- */
.about-hero,
.about-intro,
.about-diff,
.about-proof,
.about-cta {
    /* Removed solid background to let glow implementation show through */
    position: relative;
    overflow: hidden;
}

/* Force Montserrat Medium White for All About Headers */
.about-hero h1,
.about-intro h2,
.about-diff h2,
.about-process-wrapper h3,
.about-proof h2,
.about-cta h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    /* Medium */
    color: #ffffff;
    margin-bottom: 25px;
    line-height: 1.2;
}

/* --- Section 1: Hero --- */
.about-hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

.about-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Hero Upgrade: Full Image + Dark Overlay */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, #050505 100%), url('../images/portfolio/como 5.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.about-hero h1 {
    font-size: 3.5rem;
    letter-spacing: -1px;
    color: #FFFFFF;
    /* Reinweiß */
    font-weight: 600;
    /* SemiBold */
}

.hero-subline {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.25rem;
    color: #e0e0e0;
    margin-bottom: 20px;
    line-height: 1.6;
}

.hero-microline {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.95rem;
    color: #00ccff;
    /* Vivix Cyan */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* --- Section 2: Intro --- */
.about-intro {
    padding: 120px 20px;
}

.intro-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    /* Text wider than image usually better, but 1fr 1fr requested. Let's do 60/40 mix as suggested */
    gap: 80px;
    align-items: stretch;
    /* KEY: Force equal height */
}

.intro-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Center text vertically */
}

.intro-left h2 {
    font-size: 2.8rem;
    line-height: 1.1;
    margin-bottom: 30px;
}

.intro-left p {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.15rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Image container */
.intro-right-image-container {
    height: 100%;
    /* Fill grid cell height */
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    min-height: 400px;
    /* Ensure some height on mobile */
}

.stretch-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: grayscale(20%);
    border-radius: 12px;
}

.intro-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* --- Section 3: Differentiation --- */
.about-diff {
    padding: 100px 20px;
}

.diff-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    /* Image smaller than text area? Or vice versa. Let's do Standard Image Left */
    gap: 60px;
    align-items: center;
}

.diff-visual img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    display: block;
}

.diff-content h2 {
    font-size: 2.8rem;
}

.diff-content p {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.15rem;
    color: #ccc;
    line-height: 1.6;
    margin-bottom: 30px;
}

.diff-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.diff-list li {
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.diff-list li::before {
    content: '•';
    color: #00ccff;
    font-size: 1.5rem;
}

/* --- Section 4: Horizontal Scroll Process --- */
.about-process-wrapper {
    position: relative;
    /* We don't set height here, GSAP will handle pinning duration via spacing or we set a tall container */
    /* Implementation choice: Let GSAP pin .process-sticky-container for X pixels */
    width: 100%;
    /* Removed solid background to let glow implementation show through */
}

.process-sticky-container {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    /* Normally we need a wrapper to scroll against. If using GSAP, we usually just need a long trigger. */
    /* We will use the 'container' approach where the wrapper is e.g. 400vh */
}

/* We will set the wrapper height in JS or rely on a spacer. 
   Actually, standard way: Outer wrapper is tall, inner is sticky. */
.about-process-wrapper {
    height: 400vh;
    /* 4 steps roughly */
}

.process-strip {
    display: flex;
    flex-wrap: nowrap;
    padding-left: 10vw;
    /* Start with some offset */
    gap: 10vw;
    /* Space between cards */
    will-change: transform;
}

.process-step {
    width: 60vw;
    /* Wide cards */
    max-width: 600px;
    flex-shrink: 0;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    position: relative;
}

.step-blob {
    font-family: 'Unbounded', sans-serif;
    /* Or Montserrat if requested strict */
    font-weight: 700;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.05);
    position: absolute;
    top: 20px;
    right: 30px;
    line-height: 1;
}

.process-step h3 {
    font-size: 2rem;
    margin-top: 20px;
}

.process-step p {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.6;
}


/* --- Section 5: Proof --- */
.about-proof {
    padding: 120px 20px;
}

.proof-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
    text-align: center;
}

.proof-block h2 {
    font-size: 2.5rem;
}

.proof-block p {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.2rem;
    color: #ccc;
    line-height: 1.6;
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .about-hero h1 {
        font-size: 2.5rem;
    }

    .intro-grid,
    .diff-container {
        grid-template-columns: 1fr;
    }

    /* On mobile, usually horizontal scroll is annoying if forced by height. 
       We might want to disable sticky on mobile and just scroll horizontally or stack.
       For this task, keeping horizontal is requested, but sticking to logic. */
    .about-process-wrapper {
        height: auto;
        /* Dissolve sticky on mobile */
    }

    .process-sticky-container {
        height: auto;
        position: relative;
        overflow-x: auto;
        /* Native scroll */
    }

    .process-strip {
        padding: 20px;
        gap: 20px;
    }
}

/* =========================================
   Awwwards Visual Upgrades (Layers & Micro-interactions)
   ========================================= */

/* --- Layer 1: Cinematic Grain --- */
.cinematic-grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    mix-blend-mode: overlay;
}

/* --- Layer 2: Ambient Aurora Glows --- */
.ambient-aurora {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Behind content (which is z-index 1 or 2) */
    pointer-events: none;
    overflow: hidden;
    background: transparent;
}

.aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: floatOrb 20s infinite ease-in-out alternate;
}

.orb-1 {
    width: 60vh;
    height: 60vh;
    background: radial-gradient(circle, #00ccff 0%, transparent 70%);
    top: -10%;
    left: -10%;
    animation-duration: 25s;
}

.orb-2 {
    width: 50vh;
    height: 50vh;
    background: radial-gradient(circle, #4169E1 0%, transparent 70%);
    bottom: 20%;
    right: -10%;
    animation-duration: 30s;
    animation-delay: -5s;
}

.orb-3 {
    width: 40vh;
    height: 40vh;
    background: radial-gradient(circle, #8A2BE2 0%, transparent 70%);
    top: 40%;
    left: 40%;
    animation-duration: 22s;
    animation-delay: -10s;
}

@keyframes floatOrb {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }

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

/* --- Layer 3: Parallax Typography --- */
.parallax-typography {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.parallax-word {
    position: absolute;
    font-family: 'Unbounded', sans-serif;
    font-weight: 800;
    font-size: 15vw;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
    opacity: 0.6;
    line-height: 1;
    white-space: nowrap;
    will-change: transform;
}

.word-1 {
    top: 10%;
    right: -5%;
    transform: rotate(5deg);
}

.word-2 {
    top: 40%;
    left: -5%;
    transform: rotate(-5deg);
    font-size: 12vw;
}

.word-3 {
    top: 70%;
    right: 10%;
    transform: rotate(10deg);
    font-size: 18vw;
}

.word-4 {
    top: 90%;
    left: 0%;
    transform: rotate(0deg);
}

/* --- Layer 4: Storytelling Line --- */
.storytelling-line-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Matches document flow */
    z-index: 0;
    pointer-events: none;
}

.story-line-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.story-path {
    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
    transition: stroke-dashoffset 0.1s linear;
    /* Smooth scrub */
}

/* --- Micro-Interactions --- */

/* Scroll Reveal */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0);
}

/* Image Tilt (Base class, JS will animate transform) */
.tilt-image-container {
    perspective: 1000px;
    display: inline-block;
}

.tilt-image {
    transition: transform 0.1s ease-out;
    /* Smooth follow match */
    will-change: transform;
}

/* =========================================
   Final Visual Refinements (Atmosphere & Glow)
   ========================================= */

/* --- Background Atmosphere (Organic Waves) --- */
.background-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.organic-shape {
    position: absolute;
    opacity: 0.05;
    fill: #00ccff;
    /* Dark Cyan/Blue tone */
}

/* --- Reactive Cursor Glow --- */
.mouse-follower-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 200, 255, 0.12) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    /* Center on cursor */
    will-change: transform, left, top;
}

/* =========================================
   404 Page Styles (High-End Aesthetic)
   ========================================= */

.not-found-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.not-found-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.error-code {
    font-family: 'Unbounded', sans-serif, 'Inter', 'Helvetica Neue', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: 25vw;
    /* Extremely Massive Scale - Fill Screen Width */
    line-height: 0.8;
    margin: 0;
    color: #fff;
    /* Optional: Disable selection for cleaner feel */
    user-select: none;
    letter-spacing: -1vw;
    /* Tighten up the massive numbers */
}

.error-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.2rem;
    margin: 0;
    text-transform: uppercase;
    color: #fff;
}

/* Button Styling (Outline -> Solid Transition) */
.btn-404 {
    display: inline-block;
    margin-top: 40px;
    padding: 15px 40px;
    border: 1px solid #fff;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    background: transparent;
    cursor: pointer;
    font-weight: 500;
}

.btn-404:hover {
    background-color: #fff;
    color: #000;
    /* Black text on white bg */
}

/* Responsive Scaling */
@media (max-width: 768px) {
    .error-code {
        font-size: 8rem;
    }

    .error-text {
        font-size: 1rem;
        letter-spacing: 0.1rem;
    }
}

/* Animation Start States (Skew-Up) */
.skew-up {
    opacity: 0;
    transform: translateY(100px) skewY(5deg);
    /* Heavy start offset */
    will-change: transform, opacity;
}

/* =========================================
   FOOTER: THE MAGNETIC VOID (Sleek Panoramic Version)
   ========================================= */

.main-footer {
    position: relative;
    background-color: #050505;
    /* Deep Black */
    color: #fff;
    padding: 40px 5vw 20px 5vw;
    /* FAST RADICAL REDUCTION: Sleek Strip */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 10;
    width: 100%;
    margin: 0;
    margin-bottom: 0 !important;
}


/* Ambient Blue Glow at Bottom */
.footer-glow {
    position: absolute;
    bottom: -80px;
    /* Adjusted for smaller height */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 150px;
    background: radial-gradient(ellipse at center, rgba(0, 204, 255, 0.15) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

/* --- Level 1: Magnetic CTA --- */
.footer-level-1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
    /* Much tighter */
    position: relative;
    z-index: 1;
}

.footer-question {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    /* Light */
    font-size: 1.5rem;
    /* Compact Size */
    color: #fff;
    margin: 0;
    line-height: 1;
}

/* Magnetic Button Wrapper */
.magnetic-btn-wrapper {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.magnetic-btn {
    width: 100px;
    /* Reduced from 140px/180px */
    height: 100px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    background: transparent;
}

.magnetic-btn .btn-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    /* Smaller text inside button */
    letter-spacing: 1px;
    color: #fff;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

/* Hover State */
.magnetic-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 0%;
    background-color: #00ccff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    z-index: 1;
}

.magnetic-btn:hover::after {
    width: 110%;
    height: 110%;
}

.magnetic-btn:hover .btn-text {
    color: #000;
}

.magnetic-btn:hover {
    border-color: #00ccff;
}


/* --- Level 2: Big Links (Compact) --- */
.footer-level-2 {
    display: flex;
    justify-content: space-between;
    /* Space out Email and Insta */
    align-items: center;
    /* Vertical Center */
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
    /* Reduced vertical space */
    position: relative;
    z-index: 1;
}

.big-mail-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    /* Compact readable size, not massive */
    color: #fff;
    text-decoration: none;
    line-height: 1;
    transition: all 0.3s ease;
    display: block;
}

.big-mail-link:hover {
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    opacity: 0.8;
}

.big-social-link {
    font-family: 'Unbounded', sans-serif;
    font-size: 1rem;
    /* Smaller */
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    /* Smaller Pill */
    border-radius: 50px;
    transition: all 0.3s ease;
}

.big-social-link:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}


/* --- Level 3: Legal (Mini) --- */
.footer-level-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding-top: 20px;
    /* Reduced padding */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.8rem;
    /* Smallest size */
    color: #666;
    position: relative;
    z-index: 1;
}

.legal-link {
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.legal-link:hover {
    color: #fff;
}

.separator {
    margin: 0 8px;
    color: #333;
}

/* Responsive Adjustments */
/* =========================================
   MOBILE OPTIMIZATION (< 768px PRESET)
   ========================================= */

@media (max-width: 768px) {

    /* 1. Global Spacing & Typography */
    .scroll-section,
    section,
    .main-footer {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    h1,
    h2,
    h3 {
        text-align: center;
        width: 100%;
    }

    p {
        text-align: center;
    }

    /* Reduce Massive Fonts */
    h1,
    .hero-title {
        font-size: 3rem !important;
        /* Was much larger */
    }

    h2,
    .section-title,
    .mega-title,
    #packages h2,
    .footer-question {
        font-size: 2rem !important;
        line-height: 1.3;
    }

    .big-mail-link {
        font-size: 1.5rem !important;
        word-break: break-all;
        /* Prevent overflow */
    }

    /* 2. Grid & Flex Stacking */
    .packages-grid-4,
    .value-3-col,
    .cta-grid,
    .footer-level-1,
    .footer-level-2,
    .footer-level-3,
    .process-strip {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
    }

    /* Fix grids that were using grid-template-columns */
    .packages-grid-4,
    .cta-grid {
        grid-template-columns: 1fr !important;
    }

    /* Specific Section Fixes */

    /* Value Prop */
    .value-cards-col,
    .value-text-col,
    .value-image-col {
        width: 100%;
        text-align: center;
    }

    .value-image-col img {
        transform: translateX(0) !important;
        max-width: 100% !important;
        height: auto;
    }

    /* Process Strip (Horizontal Scroll -> Vertical Stack) */
    .about-process-wrapper,
    .process-sticky-container {
        height: auto !important;
        position: static !important;
        /* Disable sticky */
    }

    .process-strip {
        padding-left: 0 !important;
        overflow: visible !important;
        transform: none !important;
        /* Disable GSAP move */
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    .process-step {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }

    /* Comparison / Comparisons (if any) */
    .comparison-grid {
        grid-template-columns: 1fr !important;
    }

    /* 3. Footer Mobile Redesign */
    .main-footer {
        padding: 50px 20px 30px 20px !important;
        /* Visual breathing room */
        text-align: center;
        height: auto !important;
    }

    .footer-level-1 {
        gap: 20px !important;
        margin-bottom: 40px !important;
    }

    .footer-question {
        font-size: 1.5rem !important;
        margin-bottom: 10px;
    }

    .magnetic-btn {
        width: 80px !important;
        height: 80px !important;
    }

    .footer-level-2 {
        align-items: center !important;
        gap: 20px !important;
        margin-bottom: 40px !important;
    }

    .big-social-link {
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex;
    }

    .footer-level-3 {
        gap: 15px !important;
        flex-direction: column-reverse !important;
        width: 100%;
    }

    .legal-right {
        display: flex;
        gap: 10px;
        justify-content: center;
        width: 100%;
    }

    .legal-left {
        width: 100%;
        text-align: center;
        font-size: 0.7rem;
    }

    /* 4. Final CTA */
    #final-cta {
        padding: 60px 0 40px 0 !important;
    }

    .cta-premium-container {
        padding: 30px !important;
    }

    .cta-buttons {
        justify-content: center;
    }

    .phone-mockup-container {
        max-width: 80%;
    }

    /* 5. Deliverables Section (Hide Hand Image) */
    .deliverables-hand-img {
        display: none !important;
    }

    .deliverables-right {
        display: none !important;
    }

    .deliverables-left {
        width: 100% !important;
        max-width: 100% !important;
    }

    .deliverables-split {
        flex-direction: column !important;
    }

    /* 6. Final CTA Mobile Fix (Aspect Ratio) */
    .cta-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
    }

    .cta-content {
        order: 1;
        /* Text first */
        width: 100%;
        text-align: center;
    }

    .cta-visual {
        order: 2;
        /* Image second */
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .phone-mockup-container {
        width: 100%;
        max-width: 300px;
        /* Limit width */
        height: auto !important;
    }

    .phone-frame {
        height: auto !important;
        /* Allow proportional scaling */
    }

    .phone-screen {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 9 / 18 !important;
        /* Force correct phone ratio */
    }

    /* Support explicit img if present */
    .cta-visual img {
        width: 100% !important;
        height: auto !important;
    }
}