/* 1. Variables */

:root {
    --primary: #8C52FE;
    --primary-dark: #4a1bbd;
    --primary-gradient: linear-gradient(135deg, #8C52FE 0%, #4a1bbd 100%);

    --bg-dark: #0a0a0c;
    --bg-card: #121216;
    --bg-soft: #16161c;

    --text-white: #ffffff;
    --text-muted: #b5b5c2;
    --text-black: #000000;

    --border-soft: rgba(255, 255, 255, 0.08);
    --blur-soft: blur(18px);

    --radius-lg: 20px;
    --radius-md: 14px;

    --font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

/* 2. Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* GSAP WordPress Fix */
html,
body {
    overflow-x: clip;
    width: 100%;
}

/* Fix GeneratePress & WordPress wrappers for scrollTrigger pinning */
#page,
.site,
.site-content,
.site-main,
.entry-content,
#content,
.elementor-section,
.elementor-inner,
.wp-block-group {
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-family);
    overflow-x: hidden;
    line-height: 1.5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Sections */
section {
    position: relative;
    width: 100%;
}

/* Hero Section */
.section-hero {
    min-height: 100vh;
    /* Fallback */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(rgba(10, 10, 12, 0.4), rgba(10, 10, 12, 0.4)), url('/images/background.avif');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    width: 100%;
}

@media (max-width: 1024px) {
    .section-hero {
        background-attachment: scroll;
        /* Performance & Layout fix for mobile */
    }
}

/* Navbar */
.navbar {
    padding: 32px 0;
    position: relative;
    z-index: 100;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo img {
    height: 32px;
}

.logo-text {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-white);
}

.nav-links {
    display: flex;
    gap: 40px;
    margin-left: auto;
}

.nav-links a {
    color: var(--text-white);
    text-decoration: none;
    font-size: 15px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.nav-links a:hover {
    opacity: 1;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

.btn-login {
    color: var(--text-white);
    text-decoration: none;
    font-size: 14px;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    transition: background 0.3s ease;
}

.btn-login:hover {
    background: rgba(255, 255, 255, 0.05);
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

.menu-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--text-white);
}

/* Hero Content */
.hero-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    padding: 80px 24px;
}

.hero-content h1 {
    font-size: clamp(48px, 8vw, 96px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    background: linear-gradient(to bottom, #ffffff 60%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero Text Layout */
.hero-text-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align content */
    text-align: left;
    gap: 32px;
    max-width: 600px;
    z-index: 5;
    /* Ensure above background elements */
}

/* Hero Trust Badge */
.hero-trust-badge {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.avatars-cluster {
    display: flex;
    align-items: center;
}

.avatars-cluster img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #000;
    /* Match bg color for overlap effect */
    object-fit: cover;
}

.avatar-more {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2a2a30;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #000;
    margin-left: -12px;
}

.trust-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* Hero CTA Button */
/* =========================================
   HERO CTA BUTTON
========================================= */

.btn-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    background: var(--text-white);
    color: var(--text-black);
    font-size: 16px;
    font-weight: 600;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
    margin-top: 10px;
    white-space: nowrap;
    /* text break na ho */
}

/* Hover Effect */
.btn-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25);
    background: #f0f0f0;
}


/* =========================================
   RESPONSIVE BREAKPOINTS
========================================= */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .btn-hero-cta {
        padding: 14px 30px;
        font-size: 15px;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    .btn-hero-cta {
        padding: 14px 24px;
        font-size: 15px;
        width: 100%;
        /* full width button */
        max-width: 320px;
        /* control stretch */
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .btn-hero-cta {
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
        border-radius: 50px;
        /* thoda compact look */
    }
}

/* Partners Bar */
/* ============================= */
/* PARTNERS BAR STABLE VERSION  */
/* ============================= */

.partners-bar {
    position: relative;
    padding: 80px 0;
    z-index: 2;
}

/* Glass Capsule */
.partners-bar::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 80px;
    border-radius: 999px;

    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.02));

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        0 0 0 1px rgba(140, 82, 254, 0.15),
        0 20px 60px rgba(0, 0, 0, 0.45);

    z-index: 0;
    pointer-events: none;
}

/* dashboard */





/* Outer Wrapper */
.partners-list {
    position: relative;
    z-index: 2;

    overflow: hidden;

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    margin-left: -57px;
}

/* Moving Track */
.marquee-track {
    display: flex;
    align-items: center;
    gap: 80px;
    width: 100%;
    animation: marqueeMove 30s linear infinite;
}

/* Logos */
.marquee-track img {
    height: 26px;
    filter: brightness(0) invert(1);
    opacity: 0.85;
    white-space: nowrap;
}

/* Smooth infinite animation */
@keyframes marqueeMove {
    0% {
        transform: translateX(0);
    }

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



/* Vision Section */
.section-vision {
    position: relative;
    padding: 120px 0;
    overflow: hidden;

    background:
        radial-gradient(600px 600px at 65% 55%,
            rgba(140, 82, 254, 0.45),
            rgba(140, 82, 254, 0.15) 35%,
            transparent 70%),
        radial-gradient(800px 800px at 30% 20%,
            rgba(90, 40, 180, 0.25),
            transparent 70%),
        linear-gradient(180deg,
            #0a0a0c 0%,
            #0a0a0c 100%);
}

.section-vision::after {
    content: "";
    position: absolute;
    top: 55%;
    right: 8%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle,
            rgba(140, 82, 254, 0.55),
            transparent 70%);
    transform: translateY(-50%);
    filter: blur(120px);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}



/* =========================================
   NEW ADDITIONS: VISION SECTION ANIMATIONS
   ========================================= */

/* 1. TYPING EFFECT CURSOR */
.typing-cursor::after {
    content: '|';
    display: inline-block;
    margin-left: 2px;
    animation: cursor-blink 1s step-end infinite;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
}

@keyframes cursor-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* 2. STAGGERED FADE UP (TEXT) */
.anim-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000),
        transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

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

/* 3. POWER CARD REVEAL & MICRO-INTERACTIONS */
.power-box {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.4s ease;
}

.power-box.reveal {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Add subtle floating animation after reveal */
    animation: card-float 6s ease-in-out infinite 0.8s;
}

.power-box.reveal:hover {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
    /* Low-key premium glow */
}

@keyframes card-float {

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

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

/* 4. BULLET POINTS STAGGER */
.power-list li {
    opacity: 0;
    transform: translateX(-15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.power-list li.visible {
    opacity: 1;
    transform: translateX(0);
}

.list-icon {
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.power-list li.visible .list-icon {
    transform: scale(1);
}

.vision-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    margin-bottom: 120px;
}

.vision-text h2 {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -0.01em;

    background: linear-gradient(135deg,
            #ffffff,
            #e6ddff,
            #8C52FE,
            #ffffff);
    background-size: 300% 300%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: visionGlow 6s ease infinite;

    text-shadow:
        0 0 12px rgba(140, 82, 254, 0.25),
        0 0 40px rgba(140, 82, 254, 0.2);
}

@keyframes visionGlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.vision-description {
    padding-top: 20px;
}

.vision-description p {
    font-size: 18px;
    margin-bottom: 32px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Power Box */
.power-box {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.04));
    backdrop-filter: blur(10) saturate(160%);
    -webkit-backdrop-filter: blur(10) saturate(160%);

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;

    padding: 0;
    max-width: 800px;
    margin-left: auto;

    position: relative;
    z-index: 5;
    overflow: hidden;

    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}


.power-header {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.06));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    padding: 28px 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.power-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.25),
            transparent 70%);
    opacity: 0.35;
    pointer-events: none;
}


.power-header h3 {
    font-size: 32px;
    font-weight: 700;
}

.power-header span {
    font-size: 14px;
    opacity: 0.6;
    display: block;
    margin-top: 4px;
}

.power-list {
    list-style: none;
    padding: 40px;
}

.power-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 24px;
    font-size: 16px;
    opacity: 0.9;
}

.list-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.8;
}

/* Dashboard Preview */
.dashboard-preview {
    margin-top: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.4);
    background: #000;
    border: 4px solid rgba(255, 255, 255, 0.1);
}

.dashboard-preview img {
    width: 100%;
    display: block;
}

/* POV Branding Section */
.section-pov-scroll {
    padding: 120px 0;
    background-color: #ffffff;
    color: #000000;
    overflow: hidden;
}

.pov-main-header {
    text-align: center;
    margin-bottom: 100px;
}

.pov-main-header h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
}

.pov-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 42px;
    font-weight: 700;
}

.pov-flow span {
    transition: all 0.5s ease;
    will-change: filter, opacity, transform;
}

.pov-text-blur {
    filter: blur(4px);
    opacity: 0.3;
    transform: scale(0.95);
}

.pov-text-active {
    filter: blur(0);
    opacity: 1;
    transform: scale(1.1);
    color: var(--primary);
    text-shadow: 0 0 20px rgba(140, 82, 254, 0.4);
}

.flow-arrow {
    color: var(--primary);
}

.pov-visual-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 120px;
    gap: 40px;
}

.pov-col {
    flex: 1;
}

.pov-cta h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.pov-cta p {
    font-size: 14px;
    opacity: 0.6;
    font-weight: 500;
}

.pov-cta.convert {
    margin-top: 100px;
}

.pov-col.center {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1.2;
}

.pov-image-wrapper {
    position: relative;
    width: 280px;
    height: 320px;
    perspective: 1000px;
    /* Enable 3D rotation */
    transform-style: preserve-3d;
}

.pov-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
    z-index: 2;
    position: absolute;
    /* Stack images */
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
}

.curve {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid #000;
    border-radius: 50%;
    z-index: 1;
}

.curve-tl {
    top: -25px;
    left: -25px;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.curve-tr {
    top: -35px;
    right: -35px;
    border-left-color: transparent;
    border-bottom-color: transparent;
    width: 90px;
    height: 90px;
}

.curve-bl {
    bottom: -35px;
    left: -35px;
    border-top-color: transparent;
    border-right-color: transparent;
    width: 90px;
    height: 90px;
}

.curve-br {
    bottom: -25px;
    right: -25px;
    border-top-color: transparent;
    border-left-color: transparent;
}

.float-icon {
    position: absolute;
    z-index: 3;
    pointer-events: none;
}

.float-icon.top-right {
    top: 50px;
    right: -25px;
}

.float-icon.top-right img {
    width: 32px;
}

.float-icon.bottom-right {
    bottom: 25px;
    right: -35px;
}

.float-icon.bottom-right img {
    width: 64px;
}

.pov-quote {
    margin-top: 50px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}

.purple-text {
    color: var(--primary);
}

.pov-feature-card {
    background-color: var(--primary);
    color: #ffffff;
    border-radius: 24px;
    padding: 40px 50px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.card-left {
    flex: 1;
}

.card-eyebrow {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.8;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 12px;
    width: 200px;
}

.card-left h2 {
    font-size: 42px;
    line-height: 1.1;
    font-weight: 700;
}

.card-right {
    flex: 1.3;
}

.pov-features {
    list-style: none;
}

.pov-features li {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
}

.li-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.long-desc {
    align-items: flex-start !important;
    margin-top: 10px;
}

.long-desc p {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.8;
}

.btn-see-all {
    display: inline-block;
    margin-top: 24px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Responsiveness for POV branding */
@media (max-width: 1024px) {
    .pov-visual-grid {
        flex-direction: column;
        text-align: center;
        gap: 60px;
    }

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

    .pov-feature-card {
        flex-direction: column;
        padding: 40px;
        gap: 40px;
    }

    .card-eyebrow {
        width: auto;
        margin: 0 auto 20px;
    }
}

/* =========================================
   PRE-FOOTER CTA SECTION (Namespace: sa-)
   ========================================= */

.sa-cta-prefooter {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 120px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Gradient Background */
    /* Gradient Background: Purple -> Glossy Black -> White */
    background: linear-gradient(to bottom,
            #8C52FE 0%,
            #0a0a0c 45%,
            #0a0a0c 100%);
    color: #ffffff;
}

/* Background Layers */
.sa-bg-gradient {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.sa-bg-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='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.03'/%3E%3C/svg%3E");
    opacity: 0.4;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

.sa-container {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Icon Row */
.sa-icon-row {
    margin-bottom: 20px;
}

.sa-icon-pill {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    gap: 24px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.sa-icon-pill img {
    height: 24px;
    /* Adjust based on icons */
    width: auto;
    display: block;
    opacity: 1;
    /* filter: brightness(0) invert(1); REMOVED to show original colors */
}

/* Typography */
.sa-head {
    font-family: var(--font-family);
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
    color: #ffffff;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sa-sub {
    font-family: var(--font-family);
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 650px;
    margin: 0 auto 48px;
    font-weight: 400;
}

/* Buttons */
.sa-btn-group {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.sa-btn-primary {
    background: #ffffff;
    color: #6E4DFF;
    font-weight: 600;
    padding: 16px 36px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.sa-btn-primary:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.sa-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-weight: 500;
    padding: 16px 36px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}

.sa-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Animations (Classes to be toggled by JS) */
.sa-anim-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

.sa-anim-fade-up.delay-1 {
    transition-delay: 0.1s;
}

.sa-anim-fade-up.delay-2 {
    transition-delay: 0.2s;
}

/* Floating Icons Animation */
@keyframes saFloat {

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

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

.sa-anim-float {
    animation: saFloat 4s ease-in-out infinite;
}

/* Responsiveness */
@media (max-width: 768px) {
    .sa-cta-prefooter {
        padding: 80px 20px;
    }

    .sa-icon-pill {
        padding: 10px 16px;
        gap: 16px;
    }

    .sa-icon-pill img {
        height: 20px;
    }

    .sa-btn-group {
        flex-direction: column;
        width: 100%;
        gap: 16px;
    }

    .sa-btn-primary,
    .sa-btn-secondary {
        width: 100%;
        text-align: center;
    }
}


@media (max-width: 768px) {

    .pov-main-header h2,
    .pov-flow {
        font-size: 32px;
    }

    .card-left h2 {
        font-size: 32px;
    }
}

/* Background Effects */
.bg-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 1;
    pointer-events: none;
    opacity: 0.3;
}

.sphere-1 {
    top: 10%;
    left: 10%;
    background: var(--primary-gradient);
    width: 300px;
    height: 300px;
}

.sphere-2 {
    top: 20%;
    right: 10%;
    background: #4a1bbd;
    width: 400px;
    height: 400px;
}

.sphere-3 {
    top: 60%;
    left: 45%;
    background: var(--primary);
    width: 150px;
    height: 150px;
    opacity: 0.2;
}

.sphere-4 {
    bottom: 10%;
    right: 5%;
    background: #2a1161;
    opacity: 0.4;
    width: 450px;
    height: 450px;
}

/* Overlapping Vis Spheres */
.vis-spheres-container {
    position: absolute;
    left: -100px;
    top: 50%;
    transform: translateY(-50%);
    width: 500px;
    height: 500px;
    z-index: 1;
    pointer-events: none;
}

.vis-s {
    position: absolute;
    border-radius: 50%;
}

/* SOFT PINK / LAVENDER BACK GLOW */
.vs-1 {
    width: 280px;
    height: 280px;
    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(255, 220, 245, 0.6),
            rgba(200, 160, 255, 0.45),
            transparent 70%);

    left: 0;
    bottom: 0;
    z-index: 1;
}

/* MAIN BRAND PURPLE (FOCUS BALL) */
.vs-2 {
    width: 320px;
    height: 320px;
    border-radius: 50%;

    background: radial-gradient(circle at 30% 30%,
            rgba(180, 140, 255, 0.85),
            #8C52FE 45%,
            #4a1bbd 75%,
            transparent 80%);

    left: 50px;
    top: 0;
    z-index: 2;

    box-shadow:
        0 0 60px rgba(140, 82, 254, 0.45);
}

/* DARK THEME DEPTH */
.vs-3 {
    width: 260px;
    height: 260px;
    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(90, 40, 180, 0.9),
            #2a1161 70%,
            transparent 80%);

    right: 50px;
    bottom: 50px;
    z-index: 3;
}

.vision-sub-info {
    text-align: right;
    margin-top: 40px;
}

.vision-sub-info p {
    font-size: 14px;
    font-style: italic;
    opacity: 0.6;
    margin-bottom: 5px;
}

.grain-overlay {
    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='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 5;
}

/* =========================
   REVENUE SECTION
   ========================= */

/* ===================================== */
/* SECTION REVENUE */
/* ===================================== */

.section-revenue {
    padding: 120px 0 0;
    background-color: transparent;
    color: #000000;
    overflow: hidden;
    /* Contain margins inside */
    position: relative;
    z-index: 2;
}

/* ===================================== */
/* HEADER SPLIT */
/* ===================================== */

.revenue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* CHANGE THIS */
    gap: clamp(30px, 6vw, 130px);
    margin-bottom: 120px;
    max-width: 1400px;
    /* ADD */
    margin-left: auto;
    /* ADD */
    margin-right: auto;
    /* ADD */
}

.revenue-title {
    font-size: clamp(50px, 9vw, 85px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -2px;
    color: #ffffff;
    word-wrap: break-word;
    /* Fix wrapping */
    /* force white */
}

/* New Layout & Button */
.revenue-left-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.btn-revenue-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    background: var(--primary-gradient);
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 10px 30px rgba(140, 82, 254, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-revenue-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4a1bbd 0%, #8C52FE 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.btn-revenue-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(140, 82, 254, 0.5);
}

.btn-revenue-cta:hover::before {
    opacity: 1;
}

.blur-target-text {
    background: linear-gradient(90deg, #8C52FE, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Right Side (Image + 10X) */
.revenue-right-head {
    flex: 1.2;
    display: flex;
    align-items: center;
    gap: 50px;
}

/* ===================================== */
/* GRAPH CARD */
/* ===================================== */

.revenue-graph-card {
    flex: 0 0 65%;
    background: #0a0a0c;
    border-radius: 24px;
    height: 380px;
    padding: 40px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
}

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

.revenue-graph-svg {
    width: 100%;
    height: 100%;
}

.rev-after {
    filter: drop-shadow(0 0 12px rgba(140, 82, 254, 0.6));
}

/* ===================================== */
/* SIDE CARDS */
/* ===================================== */

.revenue-cards {
    flex: 0 0 30%;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.card-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.card-label {
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 700;
}

.after-group .card-label {
    color: #8C52FE;
}

.before-group .card-label {
    color: white;
    opacity: 1;
}

.mini-card {
    background: rgba(255, 255, 255, 0.04);
    border-left: 2px solid #8C52FE;
    padding: 14px 18px;
    border-radius: 8px;
    font-weight: 700;
    color: #ffffff;
    max-width: 260px;
    text-align: center;
}

.mini-card.muted {
    border-left: 2px solid rgba(255, 255, 255, 0.2);
    opacity: 0.6;
}

/* ===================================== */
/* GRAPH LABELS */
/* ===================================== */

.graph-label {
    position: absolute;
    font-size: 13px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.label-before {
    bottom: 90px;
    left: 140px;
    opacity: 0.7;

}

.label-after {
    top: 90px;
    right: 120px;
    color: #8C52FE;
}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media (max-width: 1024px) {

    .revenue-header {
        flex-direction: column;
        gap: 60px;
    }

    .revenue-right-head {
        flex-direction: column;
        width: 100%;
    }

    .revenue-graph-card,
    .revenue-cards {
        width: 100%;
        flex: none;
        align-items: center;
        /* Center align cards */
    }

    .revenue-title {
        text-align: center;
        /* Center title on mobile */
        font-size: clamp(32px, 8vw, 50px);
        /* Smaller on mobile */
    }

    .revenue-left-head {
        align-items: center;
        /* Center CTA and title */
        width: 100%;
    }
}


/* ===================================== */
/* MODEL CARD (CENTERED BELOW) */
/* ===================================== */

.revenue-grid {
    display: flex;
    justify-content: center;
    margin-bottom: 120px;
}

.revenue-right {
    width: 100%;
    max-width: 900px;
    /* was 720px */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}


.model-card {
    position: relative;
    border-radius: 20px;
    border-color: #8C52FE;
    padding: 32px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    background: black;
    background-size: 400% 400%;
    animation: gradientFlow 12s ease infinite;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.model-text h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
}

.model-text p {
    font-size: 15px;
    opacity: 0.6;
    line-height: 1.6;
}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media (max-width: 1024px) {

    .revenue-header {
        flex-direction: column;
        gap: 60px;
    }

    .revenue-right-head {
        width: 100%;
    }

    .revenue-grid {
        margin-top: 40px;
    }
}



/* Growth Team Card */
.growth-team-card {
    background: #0a0a0c;
    border-radius: 32px;
    color: #ffffff;
    padding: 50px 0 0;
    overflow: hidden;
}

.growth-content {
    padding: 0 40px;
}

.growth-content h3 {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    margin-bottom: 24px;
    max-width: 700px;
}

.growth-intro {
    font-size: 18px;
    margin-bottom: 20px;
    opacity: 0.9;
    line-height: 1.6;
}

.growth-roles {
    list-style: none;
    margin-bottom: 32px;
}

.growth-roles li {
    font-size: 18px;
    margin-bottom: 16px;
    opacity: 0.95;
    line-height: 1.4;
}

.card-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 32px -40px;
}

.growth-footer {
    margin-bottom: 40px;
    font-size: 20px;
    font-weight: 500;
}

.purple-bold {
    color: var(--primary);
    font-weight: 700;
}

.dashboard-mockup {
    background: #ffffff;
    border-radius: 12px 12px 0 0;
    padding: 12px;
    width: 95%;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-img {
    width: 100%;
    display: block;
    border-radius: 8px 8px 0 0;
}

/* Rolling Track */
.rolling-track {
    background: var(--primary);
    padding: 30px 0;
    display: flex;
    overflow: hidden;
    margin-top: -1px;
    /* Force overlap */
    position: relative;
    z-index: 3;
}

.track-wrap {
    display: flex;
    width: fit-content;
}

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

.track-content span {
    font-size: clamp(32px, 6vw, 64px);
    font-weight: 800;
    color: #000000;
    margin-right: 40px;
    letter-spacing: -2px;
}

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

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

/* Updated Mobile Responsiveness */
@media (max-width: 1024px) {
    .nav-container {
        padding: 0 32px;
    }

    .vision-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .revenue-header {
        flex-direction: column;
        gap: 24px;
    }

    .revenue-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .growth-content {
        padding: 0 40px;
    }

    .card-divider {
        margin: 40px -40px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(10, 10, 12, 0.95);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        padding: 24px;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
        animation: fadeInMenu 0.3s ease-out forwards;
    }

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

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

    .menu-toggle {
        display: flex;
    }

    .section-vision {
        padding: 80px 0;
    }

    .power-box {
        padding: 32px;
    }

    .model-card {
        flex-direction: column;
        gap: 40px;
        min-height: auto;
    }

    .avatar-group {
        width: 100%;
        height: 180px;
        margin-top: 20px;
    }

    .avatar-item.pauline {
        left: 0;
    }

    .dashboard-mockup {
        width: 100%;
    }
}

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

    .hero-content h1 {
        font-size: 42px;
    }
}

/* Services Section */
.section-services {
    overflow: visible !important;
    padding: 120px 0;
    background-color: var(--primary);
    color: #000000;
}

.services-header {
    text-align: center;
    margin-bottom: 100px;
}

.services-header h2 {
    font-size: clamp(32px, 5vw, 42px);
    font-weight: 800;
    line-height: 1.1;
}

.services-track {
    display: flex;
    flex-direction: column;
    gap: 120px;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    min-height: 100vh;
    height: auto;

    padding-top: 120px;
    padding-bottom: 160px;

    overflow: visible;
}

.service-item {
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
}

/* Separate block */
.service-item.absolute-version {
    position: absolute;
    inset: 0;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    gap: 80px;

    padding: 40px;
    box-sizing: border-box;

    overflow: visible;
}



.item-left {
    flex-direction: row;
}

.item-right {
    flex-direction: row-reverse;
    text-align: right;
}

/* Service Card Mockup */
.service-visual {
    flex: 1;
}

.service-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.6) 100%);
    border-radius: 28px;
    padding: 24px;
    position: relative;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 500px;
}

.item-right .service-card {
    margin-left: auto;
}

.card-plus {
    position: absolute;
    top: 25px;
    right: 30px;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
}

.mockup-video {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #000;
}

.video-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    opacity: 0.8;
}

.video-controls {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

.control-btn {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.control-btn.hangup {
    background: #ff5e3a;
}

.c-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.mockup-details {
    color: #ffffff;
    text-align: left;
}

.mockup-details h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.9;
}

.mockup-stats {
    list-style: none;
}

.mockup-stats li {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mockup-stats span {
    color: var(--primary);
    font-size: 18px;
    width: 45px;
}

/* Service Text Positioning */
.service-text {
    flex: 1;
}

.service-label {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
    opacity: 0.6;
}

.service-text h3 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: -1px;
}

.service-text p {
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    opacity: 0.8;
}

/* Responsiveness for services */
@media (max-width: 1024px) {
    .service-item {
        flex-direction: column !important;
        gap: 40px;
        text-align: left !important;
    }

    .item-right .service-card {
        margin-left: 0;
    }

    .services-track {
        gap: 80px;
    }

    .service-text h3 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .section-services {
        padding: 80px 0;
    }

    .video-img {
        height: 200px;
    }
}

/* Philosophy Section */
.section-philosophy {
    padding: 120px 0;
    position: relative;
    /* Dark background to match the theme */
    background: #000;
}

.ph-section-title {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 900;
    color: #fff;
    margin-bottom: 50px;
    letter-spacing: -2px;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 30px;
    align-items: stretch;
}

/* Common Card Styles */
.ph-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtle border */
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(10px);
}

/* Left Menu Card */
.ph-menu {
    display: flex;
    flex-direction: column;
}

.ph-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ph-item {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Bracket Styling */
.ph-bracket {
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s ease;
    color: #8C52FE;
    /* Brand purple */
}

/* Hover State */
.ph-item:hover {
    color: rgba(255, 255, 255, 0.8);
}

.ph-item:hover .ph-bracket {
    opacity: 0.5;
    transform: translateX(0);
}

/* Active State */
.ph-item.active {
    color: #ffffff;
    padding-left: 10px;
}

.ph-item.active .ph-bracket {
    opacity: 1;
    transform: translateX(0);
}


/* Right Content Card */
.ph-content-display {
    position: relative;
    overflow: hidden;
    /* Optional: make it slightly lighter or different tint */
    background: rgba(255, 255, 255, 0.05);
}

/* Content Blocks */
.ph-content {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* When Active */
.ph-content.active {
    display: block;
    animation: fadeInUp 0.5s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.ph-text-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
    height: 100%;
    justify-content: center;
}

.ph-lead {
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.3;
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.5px;
}

.ph-text-block strong {
    color: #8C52FE;
    font-weight: 800;
}

.ph-text-block p:not(.ph-lead) {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 90%;
}

/* Responsive */
@media (max-width: 1024px) {
    .philosophy-grid {
        grid-template-columns: 1fr;
    }

    .ph-menu {
        overflow-x: auto;
        padding-bottom: 20px;
        /* Space for scrollbar if needed */
    }

    .ph-list {
        flex-direction: row;
        gap: 20px;
        min-width: max-content;
    }

    .ph-card {
        padding: 40px;
    }
}

/* Who We Work With */
.section-work-with {
    padding: 120px 0;
    background-color: var(--primary);
}

.work-with-panel {
    background: linear-gradient(135deg, rgba(140, 82, 254, 1) 0%, rgba(80, 40, 180, 1) 100%);
    border-radius: 32px;
    padding: 120px 80px;
    text-align: center;
    color: #ffffff;
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.3), 0 50px 100px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

.work-with-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
}

.work-with-panel h2 {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 900;
    margin-bottom: 80px;
    letter-spacing: -2px;
    line-height: 1.1;
}

.work-list-container {
    max-width: 650px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.list-eyebrow {
    font-size: 13px;
    font-weight: 800;
    opacity: 0.5;
    display: block;
    margin-bottom: 50px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.work-bullets {
    list-style: none;
    text-align: left;
    margin-bottom: 80px;
    display: grid;
    gap: 30px;
}

.work-bullets li {
    font-size: 18px;
    font-weight: 700;
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 20px;
    letter-spacing: -0.2px;
}

.work-bullets li::before {
    content: "▶";
    font-size: 12px;
    color: #ffffff;
}

.work-footer-text {
    font-size: 13px;
    font-weight: 800;
    opacity: 0.25;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Final CTA Section */
.section-final-cta {
    padding: 140px 0;
    background-color: var(--primary);
    text-align: center;
    color: #ffffff;
}

.section-final-cta h2 {
    font-size: clamp(48px, 10vw, 104px);
    font-weight: 950;
    line-height: 0.9;
    margin-bottom: 80px;
    letter-spacing: -5px;
    text-transform: uppercase;
}

.cta-eyebrow {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 50px;
    letter-spacing: -1px;
}

.cta-desc {
    font-size: 20px;
    font-weight: 600;
    opacity: 0.85;
    line-height: 1.4;
    margin-bottom: 80px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin-bottom: 120px;
}

.btn-black {
    background-color: #000000;
    color: #ffffff;
    padding: 28px 80px;
    border-radius: 16px;
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.btn-black:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.cta-links {
    display: flex;
    gap: 50px;
}

.cta-links a {
    color: #ffffff;
    text-decoration: underline;
    font-size: 18px;
    font-weight: 700;
    opacity: 0.9;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

.final-dashboard-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    background-color: #0a0a0c;
    padding: 8px;
    border-radius: 24px;
    box-shadow: 0 60px 120px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.final-dashboard-img {
    width: 100%;
    display: block;
    border-radius: 18px;
}

/* Updated Responsive Design */
@media (max-width: 1024px) {
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ph-card {
        padding: 50px;
    }

    .work-with-panel {
        padding: 80px 40px;
    }

    .section-final-cta h2 {
        letter-spacing: -3px;
    }
}

@media (max-width: 768px) {
    .work-with-panel h2 {
        font-size: 36px;
    }

    .section-final-cta h2 {
        font-size: 48px;
    }

    .cta-eyebrow {
        font-size: 24px;
    }

    .cta-links {
        flex-direction: column;
        gap: 20px;
    }

    .btn-black {
        padding: 22px 60px;
        font-size: 18px;
    }
}

/* FOOTER STYLES (VIRIO GLASS) */
.footer {
    position: relative;
    width: 100%;
    min-height: 380px;
    padding: 140px 0 80px;
    background: #000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Background Brand Text */
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    background-attachment: fixed;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
}

.footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
            rgba(140, 82, 254, 0.18),
            transparent 70%);
    z-index: 1;
    pointer-events: none;
}

/* Glass Container - Expanded for 3 Columns */
.footer-glass {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    height: auto;
    /* Changed from fixed height */
    padding: 60px;
    /* Increased padding */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    /* Changed from pill to large card */
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(140, 82, 254, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.footer-glass:hover {
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(140, 82, 254, 0.3);
    border-color: rgba(140, 82, 254, 0.3);
}

/* New Footer Grid System */
.footer-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    /* Brand gets more space */
    gap: 60px;
    width: 100%;
    align-items: start;
}

/* Brand Column */
.footer-brand-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-logo img {
    height: 32px;
}

.footer-logo span {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}

.footer-brand-text {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 360px;
}

.footer-address-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 12px;
}

.footer-address {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    max-width: 300px;
}

/* Links Columns */
.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer-col-header {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-link {
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-link:hover {
    color: #8C52FE;
    transform: translateX(4px);
    text-shadow: 0 0 12px rgba(140, 82, 254, 0.6);
}

/* Responsive Scaling */
@media (max-width: 1024px) {
    .footer-content-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile/tablet */
        gap: 40px;
    }

    .footer-glass {
        padding: 40px;
    }

    .footer-brand-text,
    .footer-address {
        max-width: 100%;
    }

    .footer-brand-col {
        transform: none;
        order: 2;
    }

    .links {
        order: 1;
    }

    .address {
        margin: 0;
        text-align: center;
        order: 3;
    }

    .big-cta {
        order: 4;
        width: 100%;
        text-align: center;
        justify-content: center;
        display: flex;
    }

    .footer::before {
        font-size: 20vw;
    }
}

/* HERO TRUST BADGE (FIGMA STYLE) */
.hero-trust-badge {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatars-cluster {
    display: flex;
    align-items: center;
}

.avatars-cluster img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #000;
    /* Match dark bg */
    object-fit: cover;
}

.avatar-more {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #8C52FE;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid #000;
    margin-left: -12px;
    z-index: 2;
}

.trust-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    font-weight: 500;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-trust-badge {
        flex-direction: column;
        text-align: center;
        margin-bottom: 40px;
    }
}

/* =========================================
   NEW ADDITIONS: WORKFLOW SECTION (6-STEP)
   ========================================= */

.section-workflow {
    padding: 100px 0;
    background-color: #ffffff;
    color: #000;
}

/* Header */
.workflow-header {
    text-align: center;
    margin-bottom: 60px;
}

.workflow-header h2 {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.2;
    color: #0A192F;
    /* Dark Navy */
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

/* ===================================== */
/* PREMIUM ANIMATED GRADIENT TEXT */
/* White → Pink → Dark Pink → Purple */
/* ===================================== */

.blue-gradient-text {
    background: linear-gradient(90deg,
            #f3e8ff 0%,
            #ffd6f6 20%,
            #ff4dc4 45%,
            #8C52FE 70%,
            #e9d5ff 100%);

    background-size: 300% 100%;
    background-position: 0% 50%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;

    animation: premiumGradientShift 7s ease-in-out infinite;
}

/* Smooth flowing gradient */
@keyframes premiumGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.workflow-sub {
    font-size: 18px;
    color: #64748B;
    /* Soft Gray */
    max-width: 600px;
    margin: 0 auto;
}

/* Navigation Pills */
.workflow-nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 60px;
    padding: 12px 0;
}

.nav-pill {
    padding: 12px 32px;
    border-radius: 50px;
    background: linear-gradient(135deg, #8C52FE, #6d3df0);
    color: #ffffff;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: none;
    opacity: 1;
    backdrop-filter: none;
}

/* Remove shine layer */
.nav-pill::before {
    display: none;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    z-index: 9999;
}


.nav-pill:hover {
    background: linear-gradient(135deg, #9d6bff, #7a4dff);
    transform: translateY(-3px);
    box-shadow: 0 0 18px rgba(140, 82, 254, 0.6);
}

.nav-pill.active {
    background: linear-gradient(135deg, #8C52FE, #6d3df0);
    color: #ffffff;
    box-shadow: 0 0 22px rgba(140, 82, 254, 0.7);
}

.floating-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.floating-particles span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(140, 82, 254, 0.4);
    border-radius: 50%;
    animation: floatUp 12s linear infinite;
    filter: blur(1px);
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) scale(0.5);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateY(-10vh) scale(1.2);
        opacity: 0;
    }
}


.nav-pill.active {
    background: #4a1bbd;
    /* Dark purple */
    color: #ffffff;
    /* WHITE TEXT (Fix) */
    box-shadow: 0 0 20px rgba(140, 82, 254, 0.6);
    transform: translateY(-4px);
}


.nav-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #E2E8F0;
    z-index: 0;
    transform: translateY(-50%);
    display: none;
    /* Optional: connector line if wanted */
}


/* Main Content Card */
.workflow-card {
    background:
        radial-gradient(800px circle at 20% 20%, rgba(140, 82, 254, 0.12), transparent 60%),
        linear-gradient(180deg, #0a0a0c 0%, #000000 100%);

    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(140, 82, 254, 0.15);
    padding: 60px;
    position: relative;
    overflow: hidden;
}

.workflow-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(140, 82, 254, 0.15), transparent 60%);
    animation: ambientMove 12s linear infinite;
    pointer-events: none;
}

@keyframes ambientMove {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.workflow-card::before {
    content: "";
    /* Grid Texture */
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(31, 107, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 107, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.6;
    pointer-events: none;
}

.workflow-content {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

/* Text Side */
.workflow-text {
    flex: 1;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.workflow-text.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.step-badge {
    background: rgba(140, 82, 254, 0.15);
    color: #cbb3ff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid rgba(140, 82, 254, 0.4);
    backdrop-filter: blur(10px);
}


.step-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
}

.step-desc {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.65);
}


/* Visual Side */
.workflow-visual {
    flex: 1.2;
    perspective: 1000px;
}

.dashboard-mockup {
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.03));
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(140, 82, 254, 0.2);
    transform: rotateY(-6deg) rotateX(3deg);
    transition: all 0.6s ease;
}

.dashboard-mockup:hover {
    transform: rotateY(0deg) rotateX(0deg) scale(1.02);
}


.dash-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
}

.dash-metric {
    flex: 1;
    background: #F8FAFC;
    padding: 12px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.dash-metric.active {
    background: linear-gradient(135deg, #8C52FE, #5b2bdf);
    color: #fff;
    box-shadow: 0 0 25px rgba(140, 82, 254, 0.5);
    animation: pulseGlow 2.5s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(140, 82, 254, 0.4);
    }

    50% {
        box-shadow: 0 0 35px rgba(140, 82, 254, 0.8);
    }
}


.dash-metric.active .dm-label,
.dash-metric.active .dm-value {
    color: #fff;
}

.dm-label {
    display: block;
    font-size: 10px;
    color: #94A3B8;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.dm-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #0A192F;
}

.dash-chart {
    height: 120px;
    width: 100%;
}

.chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    /* Allow stroke to go outside */
}

.chart-line {
    stroke: #8C52FE;
    stroke-width: 3;
    filter: drop-shadow(0 0 6px rgba(140, 82, 254, 0.8));
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}


@keyframes drawChart {
    to {
        stroke-dashoffset: 0;
    }
}

/* Cursor Reactive Glow */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 600px;
    height: 600px;
    pointer-events: none;
    background: radial-gradient(circle,
            rgba(140, 82, 254, 0.25) 0%,
            rgba(140, 82, 254, 0.15) 25%,
            rgba(140, 82, 254, 0.08) 45%,
            transparent 70%);
    transform: translate(-50%, -50%);
    z-index: 1;
    mix-blend-mode: screen;
    transition: opacity 0.3s ease;
}


/* Gauge Chart styling */
.gauge-wrapper {
    position: absolute;
    bottom: -30px;
    right: 20px;
    background: #ffffff;
    padding: 16px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.gauge-chart {
    width: 120px;
    text-align: center;
    position: relative;
}

.gauge-info {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.gauge-score {
    font-size: 24px;
    font-weight: 800;
    color: #0A192F;
    display: block;
    line-height: 1;
    margin-top: 14px;
}

.gauge-label {
    font-size: 9px;
    color: #64748B;
    display: block;
    margin-top: 2px;
}

.gauge-progress {
    transition: stroke-dashoffset 1s ease;
    stroke: #8C52FE;
}

.gauge-track {
    stroke: #e5e5e5;
}

/* Responsive */
@media (max-width: 1024px) {
    .workflow-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .workflow-text {
        order: 1;
    }

    .workflow-visual {
        order: 2;
        width: 100%;
        perspective: none;
    }

    .dashboard-mockup {
        transform: none;
    }

    .workflow-nav {
        justify-content: flex-start;
        padding-left: 24px;
    }

    .section-workflow {
        padding: 60px 0;
    }
}

/* Mobile Workflow Optimization */
@media (max-width: 768px) {
    .section-workflow {
        padding: 40px 0;
    }

    .workflow-header {
        margin-bottom: 40px;
        padding: 0 20px;
    }

    .workflow-header h2 {
        font-size: 32px;
        margin-bottom: 12px;
    }

    .workflow-sub {
        font-size: 15px;
        padding: 0 10px;
    }

    .workflow-nav {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
    }

    /* Hide scrollbar for cleaner look */
    .workflow-nav::-webkit-scrollbar {
        height: 4px;
    }

    .workflow-nav::-webkit-scrollbar-thumb {
        background: rgba(140, 82, 254, 0.3);
        border-radius: 4px;
    }

    .nav-pill {
        padding: 10px 24px;
        font-size: 14px;
    }

    .workflow-card {
        padding: 24px;
        border-radius: 24px;
        margin: 0 16px;
        /* Add side margin on mobile */
    }

    .workflow-content {
        gap: 40px;
    }

    .step-badge {
        margin-bottom: 16px;
    }

    .step-title {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .step-desc {
        font-size: 15px;
    }

    /* Dashboard Mockup Mobile */
    .dashboard-mockup {
        padding: 16px;
    }

    .dash-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .dash-metric {
        width: 48%;
        /* 2 per row */
        flex: none;
        padding: 10px;
    }

    .dm-label {
        font-size: 9px;
    }

    .dm-value {
        font-size: 14px;
    }
}

/* 1. ANIMATED SPHERES (FIGMA STYLE) */
.f-spheres-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    /* Behind text (z-index 2) */
    pointer-events: none;
}

.f-sphere {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(140, 82, 254, 0.4), rgba(140, 82, 254, 0) 70%);
    opacity: 0.6;
    filter: blur(40px);
    animation: f-float 10s infinite ease-in-out alternate;
}

.fs-1 {
    width: 500px;
    height: 500px;
    top: -100px;
    left: -100px;
    animation-delay: 0s;
    background: radial-gradient(circle, rgba(140, 82, 254, 0.3) 0%, transparent 60%);
}

.fs-2 {
    width: 600px;
    height: 600px;
    bottom: -150px;
    right: -100px;
    animation-delay: -5s;
    background: radial-gradient(circle, rgba(82, 40, 180, 0.25) 0%, transparent 70%);
}

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

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

/* 2. HERO LAYOUT & VIDEO */
@media (min-width: 1024px) {
    .section-hero .hero-content {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        text-align: left;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
        padding: 80px 48px;
    }

    .hero-text-side {
        flex: 1;
        max-width: 55%;
    }

    .hero-content h1 {
        font-size: clamp(60px, 6vw, 110px);
        /* Larger as per Figma */
    }

    .hero-visual-side {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        perspective: 1000px;
    }
}


/* =========================================
   VIDEO CARD GLASS
========================================= */

.video-card-glass {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 16/10;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    background: #000;
    transform: rotateY(-5deg) rotateX(2deg);
    transition: transform 0.5s ease;
    margin: 0 auto;
    /* center align */
}

/* Hover effect */
.video-card-glass:hover {
    transform: rotateY(0) rotateX(0);
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}


/* =========================================
   RESPONSIVE BREAKPOINTS
========================================= */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .video-card-glass {
        max-width: 420px;
        transform: rotateY(-3deg) rotateX(1deg);
        /* tilt reduce */
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {
    .video-card-glass {
        max-width: 100%;
        aspect-ratio: 16/9;
        /* thoda better mobile ratio */
        border-radius: 20px;
        transform: none;
        /* remove 3D tilt */
    }

    .video-card-glass:hover {
        transform: none;
        /* hover remove on touch */
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .video-card-glass {
        border-radius: 16px;
        box-shadow:
            0 10px 25px rgba(0, 0, 0, 0.4);
    }

    .hero-video {
        border-radius: 12px;
    }
}

/* Floating Notification */
.floating-tooltip {
    position: absolute;
    bottom: 30px;
    left: -40px;
    background: rgba(255, 235, 215, 0.95);
    /* Skin tone/warm white from image */
    color: #000;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 280px;
    animation: float-tip 6s ease-in-out infinite;
    z-index: 10;
}

.ft-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.ft-content {
    font-size: 11px;
    line-height: 1.4;
    flex: 1;
}

.ft-msg strong {
    font-weight: 800;
}

.ft-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 10px;
}

/* 2ND NOTIFICATION (TOP LEFT) */
.ft-top-left {
    bottom: auto !important;
    top: 30px;
    left: 20px !important;
    right: auto;
    padding: 8px 12px;
    background: rgba(255, 235, 215, 0.95);
    border-radius: 50px;
    /* Pill shape */
    gap: 8px;
    animation: float-tip-2 7s ease-in-out infinite reverse;
    min-width: auto;
}

.ft-dot {
    width: 6px;
    height: 6px;
    background: #8C52FE;
    border-radius: 50%;
}

@keyframes float-tip-2 {

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

    50% {
        transform: translateY(8px);
    }
}

@keyframes float-tip {

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

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

/* 3. PARTNER MARQUEE OVERRIDES */
/* We target existing structure but enhance properties */
.partners-bar {
    overflow: hidden !important;
    /* Hide scrollbars */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    /* Fade edges */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* JS will wrap content in .marquee-track, but we can target .partners-list if we modify JS */
/* Assuming JS creates a wrapper, let's style the inner lists */
.marquee-track {
    display: flex;
    width: max-content;
    gap: 80px;
    /* Space between cloned lists */
    animation: marquee-scroll 40s linear infinite;
    padding: 20px 0;
    overflow: hidden;
}

.partners-list.scrolling-enabled {
    display: block !important;
    width: 110%;
    overflow: hidden;
}

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

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

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

    /* Assuming 3 clones */
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .section-hero .hero-content {
        background-attachment: scroll;
        flex-direction: column;
        padding-top: 120px;
        text-align: center;
    }

    .hero-text-side {
        max-width: 100%;
        margin-bottom: -40px;

    }

    .video-card-glass {
        transform: none;
        max-width: 100%;
    }

    .floating-tooltip {
        left: 20px;
        bottom: 20px;
        right: auto;
    }

    /* HERO BALLS ANIMATION (MERGED) */
    .ball-wrapper {
        position: absolute;
        /* Using absolute to sit inside .f-spheres-layer */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* Centering */
        width: 600px;
        /* Increased size to match desktop scale */
        height: 600px;
        pointer-events: none;
        z-index: 0;
    }

    .ball {
        position: absolute;
        border-radius: 50%;
        transform-origin: center;
    }

    /* Main rotating ball */
    /* MAIN BALL — Light Pink / Lavender Glow */
    .ball-main {
        width: 500px;
        height: 500px;
        border-radius: 50%;

        background: radial-gradient(circle at 30% 30%,
                rgba(255, 200, 235, 0.9),
                rgba(200, 160, 255, 0.65),
                rgba(140, 82, 254, 0.45),
                transparent 70%);

        top: 50px;
        left: 50px;
        filter: blur(60px);
    }

    /* LIGHT BALL — Soft Pink Highlight */
    .ball-light {
        width: 350px;
        height: 350px;
        border-radius: 50%;

        background: radial-gradient(circle,
                rgba(255, 220, 245, 0.9),
                rgba(220, 180, 255, 0.6),
                transparent 70%);

        bottom: 0;
        left: 0;
        filter: blur(40px);
    }

    /* DARK BALL — Theme Dark Purple Depth */
    .ball-dark {
        width: 380px;
        height: 380px;
        border-radius: 50%;

        background: radial-gradient(circle,
                rgba(90, 40, 180, 0.9),
                rgba(42, 17, 97, 0.95),
                transparent 70%);

        right: 0;
        bottom: 80px;
        filter: blur(50px);
    }


    /* ===== POV HOVER INTERACTIONS ===== */

    .pov-flow span {
        transition: filter 0.35s ease;
        cursor: pointer;
    }

    .pov-flow span.blur {
        filter: blur(4px);
    }

    /* Center image 3D rotation */
    .pov-image-wrapper {
        perspective: 1000px;
    }

    .pov-main-img {
        transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        backface-visibility: hidden;
    }

}

/* =========================
   HERO BALLS (FIXED)
   ========================= */

.ball-wrapper {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 5;
}

.ball-main {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #8C52FE, #2a1161);
    box-shadow: 0 0 60px rgba(140, 82, 254, 0.6);
}

.ball-light {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: -25px;
    left: -25px;
}

.ball-dark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom: -30px;
    right: -30px;
}

/* =========================================
   SCROLL & PREMIUM ANIMATIONS
   ========================================= */

/* 1. Breathing / Floating Effect (Top Visual) */
@keyframes float-vertical {

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

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

.animate-float {
    animation: float-vertical 6s ease-in-out infinite;
    will-change: transform;
}

/* 2. Fade Up (Purple Card & Content) */
@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* 3. Slide In Left (Black Card) */
@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

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

/* Base Classes for Scroll Trigger */

/* Purple Card Initial State */
.scroll-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* Black Card Initial State */
.scroll-slide-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

.scroll-slide-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered Content Initial State */
.scroll-stagger-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* Stagger Delays */
.delay-1 {
    transition-delay: 0.1s;
}

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

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

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}


/* =========================================
   REVENUE SECTION UPDATES
   ========================================= */

/* Blur Target Base State (Blurred by default) */
.blur-target-text {
    filter: blur(8px);
    opacity: 0.5;
    transition: filter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 1.2s ease;
    will-change: filter, opacity;
}

/* Clear Blur State */
.blur-target-text.in-focus {
    filter: blur(0);
    opacity: 1;
}

/* =========================================
   SERVICES SECTION (PINNED)
   ========================================= */

.section-services {
    padding: 150px 0;
    /* Increased buffer */
    background-color: #8C52FE;
    /* Strict Purple */

    color: #fff;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.services-header {
    text-align: center;
    /* Center alignment */
    margin-bottom: 80px;
    padding: 0 24px;
}

.services-header h2 {
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.services-track {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    /* 🔥 KEY FIX */
    min-height: 100vh;
    height: auto;

    padding-top: 120px;
    padding-bottom: 160px;

    overflow: visible;
}


.service-item {
    position: absolute;
    inset: 0;

    width: 100%;
    height: auto;
    min-height: 100%;

    padding: 40px;
    box-sizing: border-box;

    overflow: visible;
}

@media (max-width: 1024px) {
    .service-item {
        position: relative;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        pointer-events: auto;
        margin-bottom: 80px;
    }

    .services-track {
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 60px;
    }
}


/* Allow pointer events on active item via JS or just toggle visibility */

/* Service Card (Visual) */
.service-visual {
    flex: 1.2;
    background: #000;
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    /* Stronger shadow */
    position: relative;
    overflow: visible;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Glass border */
}

.service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    width: 100%;
}

.card-plus {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 32px;
    font-weight: 300;
    opacity: 0.5;
}

.mockup-header {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.mockup-video {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

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

.video-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 40px;
}

.control-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn.hangup {
    background: #dad6d5;
}


.c-icon {
    width: 20px;
    height: 20px;
}

/* =========================================
   REVENUE BLUR EFFECT (TRAFFIC)
   ========================================= */
.blur-target-text {
    filter: blur(12px);
    opacity: 0.4;
    transform: scale(0.95);
    transition: filter 1.2s ease-out, opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
    will-change: filter, opacity, transform;
}

.blur-target-text.in-focus {
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
}

.mockup-details h5 {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mockup-details {
    margin-top: auto;
}

.mockup-stats {
    list-style: none;
    display: flex;
    gap: 30px;
    padding: 0;
    margin: 0;
}

.mockup-stats li {
    font-size: 11px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mockup-stats li span {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #8C52FE;
}

/* Service Text (Right side) */
.service-text {
    flex: 1;
    color: #000;
    padding-left: 40px;
}

.service-label {
    font-size: 14px;
    font-weight: 700;
    color: #8C52FE;
    display: block;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.service-text h3 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
}

.service-text p {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
    .service-item {
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
        gap: 30px;
        justify-content: center;
    }

    .service-text {
        padding-left: 0;
        text-align: center;
    }

    .services-track {
        height: auto;
        min-height: 900px;
    }

    .services-header h2 {
        font-size: 42px;
        text-align: center;
    }
}

/* =========================================
   SAFETY FIXES: RESPONSIVENESS, CLIPPING, ZOOM
   ========================================= */

/* 1. GLOBAL OVERFLOW SAFETY */
/* Ensure body doesn't horizontal scroll but allows vertical expansion */
body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Allow shadows and 3D elements to bleed out of containers safely */
.section-hero,
.section-vision,
.section-services,
.hero-content,
.vision-grid {
    overflow: visible !important;
}

/* 2. ZOOM SAFETY (80% - 125%) & LAYOUT PRESERVATION */
/* Replace fixed heights with min-heights to allow content expansion on zoom */
.section-hero {
    min-height: 100vh;
    height: auto;
    /* Allow growth */
}

/* Prevent text overlaps in flexible containers */
.hero-text-side,
.vision-text,
.service-text {
    min-width: 0;
    /* Flexbox safety */
    word-wrap: break-word;
}

/* 3. SERVICES SECTION SAFETY (CRITICAL) */
.section-services {
    /* Switch from fixed/pinned height reliability to fluid safety */
    min-height: 100vh;
    height: auto;
    padding-bottom: 120px;
    /* Safety padding for pin exit */
    overflow: visible;
    /* Prevent card clipping */
}

.services-track {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

.service-item {
    /* Ensure cards have layout dimensions even when absolute */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    will-change: transform, opacity, filter;
    /* Performance hint */
}

/* 4. MOBILE OVERRICES (MAX-WIDTH: 1024PX) */
@media (max-width: 1024px) {

    /* Disable pinning logic visually */
    .section-services {
        position: relative;
        background-color: #8C52FE;
        color: #fff;

        padding: 150px 0;
        min-height: 100vh;
        height: auto;

        overflow: visible;
        z-index: 10;
    }

    .services-track {
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 60px;
        /* Natural vertical gap */
    }

    .service-item {
        position: relative !important;
        /* Force natural flow */
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        margin-bottom: 40px;
    }

    /* Stack content within cards */
    .service-item .service-visual,
    .service-item .service-text {
        opacity: 1 !important;
        transform: none !important;
    }

    .service-item.item-left {
        flex-direction: column;
        display: flex;
    }

    .service-item.item-right {
        flex-direction: column-reverse;
        /* If Visual is 2nd in DOM, this puts it on top */
        display: flex;
    }

    .service-text {
        text-align: center;
        padding: 0 20px;
        margin-top: 30px;
    }

    .service-visual {
        margin: 0 auto;
    }

    /* POV Branding Mobile Safety */
    .pov-visual-grid {
        gap: 80px;
    }

    .pov-image-wrapper {
        margin: 0 auto;
    }

    /* Hero Zoom/Mobile Safety */
    .hero-content h1 {
        font-size: clamp(32px, 6vw, 60px) !important;
        /* Slightly smaller min safe size */
        word-break: normal;
    }
}



.pov-image-wrapper {
    margin: 0 auto;
}

/* =========================================
   FINAL RESPONSIVENESS FIXES (MOBILE/TABLET/ZOOM)
   ========================================= */

/* 1. GLOBAL SAFETY */
html,
body {
    overflow-x: hidden;
    width: 100%;
}

.section-hero,
.section-vision,
.section-services,
.section-revenue,
.footer {
    max-width: 100vw;
    overflow-x: clip;
    /* Modern safe overflow */
}

/* 2. SERVICES SECTION RESPONSIVENESS (Desktops Pin, Mobile Stacks) */
@media (max-width: 1024px) {

    /* Force natural flow, override GSAP pin styles if any remain */
    .section-services {
        height: auto !important;
        min-height: auto !important;
        padding-top: 80px;
        padding-bottom: 80px;
        overflow: visible !important;
    }

    .services-track {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 60px !important;
    }

    .service-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        pointer-events: auto !important;
        margin-bottom: 0 !important;
    }

    /* Fix card content stacking */
    .service-item.item-left,
    .service-item.item-right {
        flex-direction: column-reverse !important;
        display: flex !important;
        gap: 40px;
    }

    .service-text {
        padding: 0;
        text-align: center;
    }
}

/* 3. HERO & VISION Z-INDEX / OVERFLOW */
.hero-content {
    /* Prevent overlapping with absolute spheres/elements */
    position: relative;
    z-index: 10;
}

.ten-x {
    display: inline-flex;
    align-items: baseline;
    /* Align perfectly on baseline */
    gap: 0.05em;
    white-space: nowrap;
}



/* 5. FOOTER & CTA MOBILE */
@media (max-width: 768px) {
    .glass-footer-bar {
        flex-direction: column;
        height: auto;
        padding: 24px;
        gap: 20px;
        border-radius: 20px;
    }

    .footer-left,
    .footer-center,
    .footer-right {
        width: 100%;
        justify-content: center;
    }

    .footer-center {
        position: static;
        transform: none;
        flex-direction: column;
        gap: 16px;
    }
}

/* 6. ZOOM SAFETY (125% Support) */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}



/* =========================================
   FOUR CARDS SECTION (PROGRESSIVE BLUR)
   ========================================= */

/* ========================================= */
/* SECTION FOUR CARDS */
/* ========================================= */

.four-cards-header {
    text-align: center;
    position: relative;
    z-index: 5;
    /* Padding moved to section container */
}

.four-cards-header h1 {
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.rotating-text-wrapper {
    display: inline-block;
    position: relative;
    height: 1.2em;
    overflow: hidden;
    vertical-align: bottom;
}

.rotating-word {
    position: absolute;
    left: 0;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s cubic-bezier(.77, 0, .18, 1);
    color: var(--primary);
}

.rotating-word.active {
    opacity: 1;
    transform: translateY(0px);
}

.four-subtitle {
    margin-top: 24px;
    font-size: 30px;
    color: #ffffff;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    opacity: 1;
}

.four-subtitle .highlight-ai {
    color: var(--primary);
    /* Purple */
    font-weight: 600;
}

.section-four-cards {
    background:
        radial-gradient(700px circle at 50% 0%,
            rgba(140, 82, 254, 0.18),
            transparent 60%),
        radial-gradient(600px circle at 80% 60%,
            rgba(140, 82, 254, 0.12),
            transparent 70%),
        linear-gradient(180deg, #050505 0%, #000000 100%);
    padding: 120px 24px 80px 24px;
    width: 100%;
    position: relative;
    z-index: 10;
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
}

/* Conflict removed - header styles consolidated above */

.four-cards-header h2 {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;

    /* Strict Layout Fixes */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Optional safe gap */
}

/* Rotating Text Engine */
.rotate-wrapper {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    height: 1.4em;
    /* Prevent cutting */
    line-height: 1.3;
    position: relative;
    vertical-align: bottom;
}

.rotate-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: verticalRotate 6s infinite ease-in-out;
    will-change: transform;
}

.rotate-track span {
    display: flex;
    align-items: center;
    height: 1.4em;
    /* Match wrapper EXACTLY */
    white-space: nowrap;
}

@keyframes verticalRotate {

    0%,
    25% {
        transform: translateY(0);
    }

    33%,
    58% {
        transform: translateY(-100%);
    }

    66%,
    91% {
        transform: translateY(-200%);
    }

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

.four-cards-header p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    max-width: 600px;
    margin: 0 auto;
}

/* Prevent width jump */
.pov-side-text {
    position: relative;
    min-height: 220px;
    /* lock height */
}

/* Content wrapper */
.pov-side-text .pov-content-inner {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
}


/* ========================================= */
/* CONTAINER */
/* ========================================= */

.four-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: clamp(24px, 4vw, 40px);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px;
    box-sizing: border-box;
}

/* ========================================= */
/* WRAPPER (GSAP SAFE INITIAL STATE) */
/* ========================================= */

.four-card-wrapper {
    flex: 1 1 260px;
    max-width: 320px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* GSAP initial state */
    transform: translateY(120px);
    opacity: 0;
    filter: blur(12px);
    will-change: transform, opacity, filter;

    position: relative;
    z-index: 2;
}

/* ========================================= */
/* IMAGE CARD */
/* ========================================= */

.four-card {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6);
}

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

/* ========================================= */
/* BEAM */
/* ========================================= */

.card-beam {
    width: 3px;
    height: 60px;
    background: linear-gradient(to bottom,
            rgba(140, 82, 254, 0),
            #8C52FE,
            rgba(140, 82, 254, 0));
    box-shadow: 0 0 20px rgba(140, 82, 254, 0.6);
    margin: 24px 0;

    transform-origin: top center;
    transform: scaleY(0);
    opacity: 0;
    will-change: transform, opacity;
}

/* ========================================= */
/* TEXT BELOW BEAM */
/* ========================================= */

.four-card-content {
    text-align: center;
    color: #ffffff;
    padding: 0 10px;
}

.four-card-content h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
}

.four-card-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

/* ========================================= */
/* STRICT RESPONSIVE FIXES (CONSOLIDATED) */
/* ========================================= */

@media (max-width: 768px) {
    .four-cards-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 60px 24px;
        gap: 48px;
    }

    .four-card-wrapper {
        width: 100%;
        max-width: 100%;
        /* Override desktop max-width */
        flex: auto;

        /* Reset GSAP for mobile safety */
        transform: none !important;
        opacity: 1 !important;
        filter: none !important;
    }


    .four-card {
        border-radius: 16px;
    }

    .card-beam {
        height: 36px;
        margin: 16px 0;
    }

    .four-cards-header h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .four-cards-header p {
        font-size: 16px;
    }
}




/* =========================================
   POV SCROLL STORY SECTION
   ========================================= */

.section-pov-scroll {
    width: 100%;
    min-height: 300vh;
    height: auto;
    background: #050505;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 20;
}

@media (max-width: 1024px) {
    .section-pov-scroll {
        min-height: 280vh;
    }
}

.pov-card-image-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.pov-stage-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.5s ease;
    backface-visibility: hidden;
    z-index: 0;
}

.pov-stage-img.active {
    opacity: 1;
}

#pov-card-img {
    max-height: 100%;
    width: auto;
    display: block;
}


.pov-content-wrapper {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* Default hidden */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 0%, rgba(140, 82, 254, 0.15), rgba(5, 5, 5, 1) 60%);
    padding: 100px 20px 40px;
    /* More top padding for nav safety */
}

/* Header & Flow Nav */
.pov-header {
    text-align: center;
    margin-bottom: 40px;
}

.pov-header h1 {

    font-size: 3.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    opacity: 1;
}

.pov-flow-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 24px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.flow-item {
    font-size: 1.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    transition: all 0.4s ease;
}

.flow-item.active {
    color: #8C52FE;
    text-shadow: 0 0 10px rgba(140, 82, 254, 0.4);
}

.flow-arrow {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.2);
}

/* Main Stage Layout */
.pov-main-stage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    flex: 1;
    position: relative;
}

/* Side Text Areas */
.pov-side-text {
    flex: 1;
    color: #fff;
    padding: 20px;
}

.pov-side-text.left {
    text-align: right;
    padding-right: 60px;
}

.pov-side-text.right {
    text-align: left;
    padding-left: 60px;
}

.pov-side-text h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.subtext {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
}

.highlight-box {
    margin-top: 24px;
    display: inline-block;
}

.hashtag {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.pov-quote {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 24px;
    padding-left: 20px;
    border-left: 3px solid #8C52FE;
}

.purple-text {
    color: #8C52FE;
}

/* Center Card */
.pov-center-card-container {
    flex: 0 0 340px;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px;
}

.pov-card-3d {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
}

.pov-card-face {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #111;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    /* Only one face needed if we rotate 360 */
}

/* Add a visual inset/glow */
.card-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(140, 82, 254, 0.1), transparent 60%);
    pointer-events: none;
}

.card-content-wrap {
    z-index: 2;
    text-align: center;
    padding: 40px;
    width: 100%;
}

.card-content-wrap h4 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 24px;
}

.card-placeholder-lines span {
    display: block;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin-bottom: 12px;
}

.card-placeholder-lines span:nth-child(1) {
    width: 80%;
    margin: 0 auto 12px;
}

.card-placeholder-lines span:nth-child(2) {
    width: 100%;
}

.card-placeholder-lines span:nth-child(3) {
    width: 60%;
    margin: 0 auto;
}


/* RESPONSIVE */
@media (max-width: 1024px) {
    .pov-main-stage {
        flex-direction: column;
        justify-content: center;
        gap: 40px;
    }

    .pov-side-text {
        text-align: center !important;
        padding: 0 20px;
    }

    .pov-center-card-container {
        order: 2;
        height: 300px;
        flex: 0 0 240px;
        width: 100%;
    }

    .pov-card-3d {
        width: 240px;
        margin: 0 auto;
    }

    .pov-side-text.left {
        order: 1;
    }

    .pov-side-text.right {
        order: 3;
    }

    /* More scroll distance for mobile */
}

@media (max-width: 998px) {
    .pov-header h2 {
        font-size: 2rem;
    }

    .pov-flow-nav {
        transform: scale(0.9);
    }

    .pov-card-3d {
        width: 100%;
        max-width: 260px;
    }

    .pov-center-card-container {
        height: 320px;
    }
}



/* =========================================
   POV VISUAL ENHANCEMENTS (MANDATORY)
   ========================================= */

/* 1. Deep Black Glossy Background + Noise Feel */
.pov-content-wrapper {
    /* Overwrite previous background with deeper, richer gradient */
    background:
        /* Subtle noise texture overlay if possible, otherwise use radial depth */
        radial-gradient(circle at 50% 0%, rgba(140, 82, 254, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, #0a0a0c 0%, #000000 100%);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
    /* Vignette */
}

/* 2. Central Static Beam Gradient */
.pov-content-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    /* Thin subtle line */
    height: 100vh;

    /* Strong purple top, fading to transparent */
    background: linear-gradient(180deg,
            rgba(140, 82, 254, 0.8) 0%,
            rgba(140, 82, 254, 0.3) 30%,
            transparent 90%);

    /* Soft glow around the beam */
    box-shadow: 0 0 20px rgba(140, 82, 254, 0.4);

    z-index: 0;
    /* Behind content */
    pointer-events: none;

    /* STRICT FIX: Remove Central Beam inside POV */
    display: none !important;
}

/* Ensure content stays above beam */
.pov-header,
.pov-main-stage {
    position: relative;
    z-index: 10;
}

/* 3. Flow Text Glow (Active State) */
.flow-item.active {
    color: #fff !important;
    /* White core */
    text-shadow:
        0 0 10px rgba(140, 82, 254, 0.8),
        0 0 20px rgba(140, 82, 254, 0.6),
        0 0 40px rgba(140, 82, 254, 0.4);
    /* Strong purple aura */
}

/* Inactive State - Dimmed */
.flow-item {
    font-weight: 500;
    letter-spacing: 0.05em;
}

/* Card Glow Update - Soften edges */
.card-glow {
    background: radial-gradient(circle at center, rgba(140, 82, 254, 0.15), transparent 70%);
}

/* =========================================
   GAP REMOVAL & GLOBAL BEAM (CRITICAL)
   ========================================= */

/* 2. Override GSAP Pin Spacer to allow Beam Overflow */
.pin-spacer {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    /* CRITICAL for beam continuity */
}

/* 3. Global Beam Style */
.global-beam {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: transparent;
    /* 👈 important */
    pointer-events: none;
}



/* =========================================
   WINNING SEARCH SECTION
   ========================================= */

.section-winning-search {
    background-color: #f5f6f8;
    padding: 100px 0;
    overflow: hidden;
}

.winning-header {
    text-align: center;
    margin-bottom: 60px;
}

.winning-header h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.25;
    color: #0A192F;
}

.blue-accent {
    color: #8C52FE;
    display: block;
    font-size: 0.75em;
}

/* Grid Layout */
.winning-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Card General */
.win-card {
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: default;
    min-height: 220px;
    background: linear-gradient(145deg,
            #0d0d0f 0%,
            #111118 40%,
            #151020 100%);

    border: 1px solid rgba(140, 82, 254, 0.15);

    box-shadow:
        0 0 0 1px rgba(140, 82, 254, 0.05),
        0 10px 30px rgba(0, 0, 0, 0.6),
        inset 0 0 60px rgba(140, 82, 254, 0.05);
}

.win-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: radial-gradient(circle at top left,
            rgba(140, 82, 254, 0.25),
            transparent 60%);
    opacity: 0.6;
    pointer-events: none;
}


.win-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 0 0 1px rgba(140, 82, 254, 0.3),
        0 20px 60px rgba(140, 82, 254, 0.25),
        0 10px 40px rgba(0, 0, 0, 0.8);
}

.win-metric {
    color: #ffffff;
}

.win-sub {
    color: rgba(255, 255, 255, 0.7);
}

.color-orange,
.color-pink {
    color: #8C52FE;
}


.win-card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}

/* Background Colors */


/* Slightly deeper/variant pink for 10x */
.bg-white {
    background-color: #ffffff;
}

/* Metrics Typography */
.win-metric {
    font-size: 45px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 8px;
    color: #ffffff;
    /* Default blue */
}

.win-sub {
    font-size: 16px;
    font-weight: 500;
    color: #fafafa;
}

/* Color Variants */
.color-orange {
    color: #ffffff;
}

.color-pink {
    color: #ffffff;
}

.color-blue {
    color: #ffffff;
}

/* Footers inside Metric Cards */
.win-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 40px;
}

.win-arrow-circle {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.win-card:hover .win-arrow-circle {
    transform: rotate(-45deg);
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.8);
}

/* Testimonials (Image Left, Text Right) */
.win-testimonial-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    height: 100%;
}

.win-avatar-large {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.win-quote-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    flex: 1;
}

.win-quote {
    font-size: 13px;
    /* Smaller font for density */
    line-height: 1.5;
    color: #0A192F;
    font-weight: 500;
    margin-bottom: 20px;
}

.win-person-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.win-person-info {
    display: flex;
    flex-direction: column;
}

.win-name {
    font-size: 13px;
    font-weight: 700;
    color: #0A192F;
}

.win-role {
    font-size: 11px;
    color: #64748B;
}

.win-company-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 28px;
    bottom: 28px;
}

/* =========================================
   LOGO VISIBILITY ENHANCEMENT
   ========================================= */
.win-logo {
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 10px;
    box-sizing: content-box;
    filter: brightness(1.2) contrast(1.1);
    animation: logoGlow 3s infinite alternate;
    transition: all 0.3s ease;
    position: relative;
}

@keyframes logoGlow {
    0% {
        box-shadow: 0 0 5px rgba(140, 82, 254, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.15);
    }

    100% {
        box-shadow: 0 0 12px rgba(140, 82, 254, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.1);
        border-color: rgba(140, 82, 254, 0.3);
    }
}

/* Span Columns */
.span-col-2 {
    grid-column: span 2;
}

/* Animations */
.scroll-slide-up {
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease;
    /* Ensure hover override doesn't break this */
}

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

/* Responsive */
@media (max-width: 1024px) {
    .winning-grid {
        grid-template-columns: 1fr;
        /* Stack */
    }

    /* Fix Sifthub/Logo Overlap */
    /* Fix Sifthub/Logo Overlap - Match other cards (Bottom Left) */
    .win-quote-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .win-person-footer {
        margin-top: auto;
        /* Push to bottom */
        padding-top: 20px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        /* Force left align */
    }

    .win-company-logo {
        position: relative;
        left: auto;
        bottom: auto;
        margin-top: 10px;
        align-self: flex-start;
        /* Force left align */
        margin-left: -5px;
        /* Nudge left */
    }

    /* Workflow Nav Stack */
    .workflow-nav {
        flex-direction: column !important;
        align-items: stretch;
        gap: 10px;
        height: auto !important;
        background: rgba(255, 255, 255, 0.05);
        /* Ensure visibility */
        padding: 10px;
        border-radius: 12px;
    }

    .nav-pill {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .nav-line {
        display: none;
        /* Hide sliding line on mobile if difficult to manage */
    }

    /* POV Safety */
    .pov-content-wrapper {
        overflow: visible !important;
        height: auto !important;
        min-height: 100vh;
    }

    .span-col-2 {
        grid-column: auto;
    }

    .win-card {
        min-height: auto;
    }

    .blue-accent {
        display: inline;
    }
}

/* =========================================
   INSIGHTS SECTION
   ========================================= */

.section-insights {
    background-color: #000000;
    padding: 80px 0;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.insights-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 60px;
}

.insight-tab {
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

.insight-tab:hover {
    color: #ffffff;
}

.insight-tab.active {
    color: #ffffff;
    font-weight: 600;
}

.insight-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ffffff;
}

/* Grid Layout */
.insights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Content */
.insights-content h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.2;
}

.insights-content p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 32px;
    line-height: 1.5;
    max-width: 400px;
}

.btn-learn-more {
    display: inline-block;
    padding: 12px 24px;
    background-color: #333;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s ease;
}

.btn-learn-more:hover {
    background-color: #444;
}

/* Right Card */
.insights-card {
    background-color: #0f0f10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 24px;
    font-size: 14px;
}

.ic-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 500;
}

.ic-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ic-theme {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.arrow-icon {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

.text-muted {
    opacity: 0.5;
}

.ic-sentiment {
    font-weight: 600;
}

.ic-sentiment.positive {
    color: #4ADE80;
}

.ic-sentiment.negative {
    color: #F87171;
}

.ic-occurrences {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ic-occurrences span {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.trend.positive {
    color: #4ADE80;
    font-size: 12px;
    margin-left: 4px;
}

.progress-bar {
    flex: 1;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-bar .fill {
    height: 100%;
    background-color: #ffffff;
    border-radius: 3px;
}

/* Nested Chat Preview */
.chat-preview-card {
    background-color: #1a1a1c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 20px;
    margin-top: 24px;
}

.cp-header {
    margin-bottom: 16px;
}

.cp-header strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
    color: #e0e0e0;
}

.cp-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
}

.cp-body p {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
}

.cp-sub {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px !important;
}

.cp-body ol {
    padding-left: 20px;
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    line-height: 1.6;
}

.cp-body li {
    margin-bottom: 8px;
}

.cp-body strong {
    color: #fff;
}

/* Responsive */
@media (max-width: 900px) {
    .insights-grid {
        grid-template-columns: 1fr;
    }

    .insights-tabs {
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 4px;
    }
}

/* =====================================
   INSIGHTS FINAL STABLE VERSION
===================================== */

/* Prevent clipping */
.section-insights {
    position: relative;
    overflow: visible;
}

/* Scroll reveal initial state */
.section-insights .insights-content,
.section-insights .insights-card-wrapper {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Reveal state */
.section-insights.sa-visible .insights-content,
.section-insights.sa-visible .insights-card-wrapper {
    opacity: 1;
    transform: translateY(0);
}

/* Prevent height jump */
.section-insights .insights-card {
    position: relative;
    min-height: 460px;
    transition: opacity 0.5s ease;
}

/* Fade transition helper */
.section-insights .fade-out {
    opacity: 0;
}

.section-insights .fade-in {
    opacity: 1;
}

/* ENERGY BEAM */
.section-insights .insights-energy-beam {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 4px;
    border-radius: 999px;
    z-index: 0;

    background: linear-gradient(90deg,
            transparent 0%,
            #8C52FE 25%,
            #1F6BFF 50%,
            #8C52FE 75%,
            transparent 100%);

    background-size: 300% 100%;
    animation: beamFlow 6s linear infinite;
}

.section-insights .insights-energy-beam::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 12px;
    border-radius: 999px;
    background: inherit;
    filter: blur(14px);
    opacity: 0.8;
    animation: beamFlow 6s linear infinite;
}

@keyframes beamFlow {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* ===============================
   FULL CARD BACKGROUND IMAGE
=============================== */

.insights-card {
    position: relative;
    overflow: hidden;
}

.insights-bg-images {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.insight-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.insight-bg.active {
    opacity: 1;
}

/* Dark overlay for readability */
.insights-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(10, 10, 15, 0.85),
            rgba(10, 10, 15, 0.95));
    z-index: 1;
}

/* Bring content above background */
.insights-card>*:not(.insights-bg-images) {
    position: relative;
    z-index: 2;
}

.section-insights .insights-grid {
    align-items: center;
    /* vertical center */
}

.section-insights .insights-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* vertical */
    align-items: center;
    /* horizontal */
    text-align: center;
}


/* ================================================================================= */
/* LASER TRANSITION SECTION */
/* ================================================================================= */
.laser-transition {
    position: relative;
    width: 100%;
    height: 420px;
    background: linear-gradient(180deg,
            #ffffff 0%,
            /* Light start matching Winning Search */
            #f0f0f5 50%,
            #0a0a0c 100%
            /* Dark end matching Dashboard */
        );
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Beam starts from top */
    z-index: 5;
}

/* Vertical Energy Beam Container */
.laser-beam-container {
    position: relative;
    width: 4px;
    height: 100%;
    display: flex;
    justify-content: center;
}

/* Core Beam */
.laser-beam {
    position: absolute;
    top: -20px;
    width: 2px;
    height: 120%;
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            #ffffff 20%,
            #ffffff 80%,
            rgba(140, 82, 254, 0.8) 100%);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.9),
        0 0 30px rgba(122, 0, 255, 0.6),
        0 0 60px rgba(122, 0, 255, 0.4);
    border-radius: 999px;
    filter: blur(0.5px);
    animation: beamFlow 4s linear infinite, beamPulse 5s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Outer Glow / Halo */
.laser-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    /* Wider glow */
    height: 140%;
    background: linear-gradient(180deg,
            rgba(122, 0, 255, 0) 0%,
            rgba(122, 0, 255, 0.15) 50%,
            rgba(122, 0, 255, 0) 100%);
    filter: blur(15px);
    pointer-events: none;
}

/* Bottom Energy Spread / Fog */
.laser-bottom-fog {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 160px;
    background: radial-gradient(ellipse at center,
            rgba(140, 82, 254, 0.5) 0%,
            rgba(122, 0, 255, 0.15) 40%,
            transparent 70%);
    filter: blur(40px);
    opacity: 0.8;
    animation: fogPulse 6s ease-in-out infinite;
    z-index: 2;
}

/* Animations using percentage translate */
@keyframes beamFlow {
    0% {
        transform: translateY(-2%);
    }

    50% {
        transform: translateY(2%);
    }

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

@keyframes beamPulse {

    0%,
    100% {
        opacity: 0.85;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(122, 0, 255, 0.6);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 25px rgba(255, 255, 255, 1), 0 0 50px rgba(122, 0, 255, 0.8);
    }
}

@keyframes fogPulse {

    0%,
    100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translateX(-50%) scale(1.05);
        opacity: 0.9;
    }
}

/* =========================================
   FIXES: ROTATING TEXT & CARD CLIPPING (STRICT)
   ========================================= */

/* FIX A: Rotating Text - Fixed Box */
.rotating-text-wrapper {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 12px;
    background: rgba(140, 82, 254, 0.12);
    border: 1px solid rgba(140, 82, 254, 0.3);
    min-width: 240px;
    height: 60px;
    position: relative;
    overflow: hidden;
    vertical-align: bottom;
    /* Align with text baseline */
    margin: 0 10px;
    /* Add some spacing from surrounding text */
}

.rotating-word {
    position: absolute;
    width: 100%;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    /* Ensure no default transforms interfere */
    transform: translateY(40px);
}

/* FIX B & C: Card Sizing & Overflow */
.four-cards-container {
    overflow: visible !important;
}

.four-card {
    overflow: visible !important;
}

.four-card-img {
    width: 110%;
    max-width: 520px;
    height: auto;
    object-fit: contain;
    display: block;
}

.four-card-wrapper {
    min-height: 480px;
    /* Increased height */
    overflow: visible !important;
}

/* =========================================
   NEW: BEAM CONNECTOR BRANCHES
   ========================================= */

.four-cards-container {
    position: relative;
    /* Ensure specific positioning context */
}

.beam-branches-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* Behind cards */
    overflow: visible;
}

/* Global beam needs to be visible */
.global-beam {
    z-index: 5;
}

.four-card-wrapper {
    z-index: 10;
}

.beam-branch {
    fill: none;
    stroke: #8C52FE;
    stroke-width: 2px;
    stroke-linecap: round;
    /* stroke-dasharray set via JS */
    stroke-dashoffset: 0;
    /* JS will set to length initially */
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(140, 82, 254, 0.8));
    will-change: stroke-dashoffset;
}

.revenue-graph-card {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0a0a0c !important;
    /* Override model-card gradient */
    border: 2px solid #8C52FE;
}

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

.graph-label {
    position: absolute;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    z-index: 10;
    pointer-events: none;
    letter-spacing: 0.5px;
}

.label-before {
    top: 72%;
    left: 15%;
    color: #9CA3AF;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.label-after {
    top: 10%;
    right: 5%;
    color: #ffffff;
    background: rgba(140, 82, 254, 0.2);
    border: 1px solid rgba(140, 82, 254, 0.4);
    box-shadow: 0 0 15px rgba(140, 82, 254, 0.3);
}

.revenue-graph-svg {
    width: 100%;
    height: 100%;
}

/* =========================================
   23. WORKFLOW SLIDER FIXES
   ========================================= */
.section-workflow {
    padding: 100px 0;
    overflow: hidden;
}

.workflow-header {
    text-align: center;
    margin-bottom: 60px;
}

.workflow-header h2 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}

.workflow-sub {
    font-size: 18px;
    opacity: 0.7;
    max-width: 600px;
    margin: 0 auto;
}

.workflow-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 60px;
    position: relative;
    padding-bottom: 20px;
}

.nav-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Removed conflicting nav-pill styles */

/* =========================================
   RESPONSIVE SAFETY & POLISH (FINAL PASS)
   ========================================= */

/* 1. Global Safety Nets */
img,
video,
svg {
    max-width: 100%;
    height: auto;
    /* Prevent overflow */
}

/* 2. Typography Overflow Protection */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Legacy support */
    hyphens: auto;
    /* Clean breaking */
}

/* 3. Workflow Section Nav (Mobile Scroll) */
@media (max-width: 768px) {
    .workflow-nav {
        justify-content: flex-start;
        /* Align start for scroll */
        overflow-x: auto;
        /* Enable horizontal scroll */
        padding-bottom: 12px;
        /* Space for scrollbar */
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
        white-space: nowrap;
        /* Keep items in line */
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll iOS */
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
    }

    .workflow-nav::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    .nav-pill {
        flex-shrink: 0;
        /* Prevent shrinking */
    }
}

/* 4. Winning Search Grid (Mobile Gap Polish) */
@media (max-width: 768px) {
    .winning-grid {
        gap: 24px;
        /* Ensure distinct separation */
        padding-left: 10px;
        padding-right: 10px;
    }

    .win-card {
        width: 100%;
        /* Full width cards */
    }
}

/* 5. Revenue Graph Card (Mobile Stacking) */
@media (max-width: 768px) {
    .revenue-graph-card {
        height: auto;
        min-height: 280px;
        /* Allow content to fit */
        padding: 24px;
    }

    .revenue-graph-wrapper {
        min-height: 200px;
        /* Ensure graph has space */
    }
}

/* 6. Pre-Footer & Footer (Mobile Padding) */
@media (max-width: 768px) {
    .sa-cta-prefooter {
        padding: 80px 20px;
        /* reduce extreme padding */
    }

    .sa-head {
        font-size: 32px;
        /* Safe max size */
    }

    .footer {
        padding: 80px 0 40px;
    }
}

/* 7. POV Section (Mobile Stack Order & Spacing) */
@media (max-width: 768px) {
    .pov-main-stage {
        gap: 60px;
        /* Increase breathing room between stacked elements */
    }

    .pov-quote {
        margin-top: 40px;
        padding-left: 0;
        border-left: none;
        border-top: 3px solid #8C52FE;
        padding-top: 20px;
        text-align: center;
    }
}

/* =========================================
   8. Icon Pill Animation (GSAP Init State)
   ========================================= */
.sa-icon-pill {
    overflow: hidden;
}

.sa-icon-pill img {
    opacity: 0;
    transform: translateX(-40px) scale(0.8);
}

/* =========================================
   RESPONSIVE & MOBILE 3D SLIDER LAYER (PREMIUM)
   ========================================= */

@media screen and (max-width: 1024px) {

    /* 1. Global Safety */
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    .container,
    .nav-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        overflow-x: hidden;
    }

    section {
        overflow-x: hidden;
    }

    /* 2. Hero Stabilization */
    .hero-content {
        flex-direction: column;
        padding-top: 120px;
        gap: 60px;
    }

    .hero-text-side {
        max-width: 100%;
        align-items: center;
        text-align: center;
        margin-top: -75px;
    }

    .hero-content h1 {
        font-size: clamp(36px, 10vw, 56px);
    }

    .hero-trust-badge {
        justify-content: center;
        flex-wrap: wrap;
        margin-top: -10px;
    }

    .hero-visual-side {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .video-card-glass {
        width: 100%;
        max-width: 500px;
    }

    /* 3. FOUR CARDS - 3D CAROUSEL UX (The Core Request) */
    .section-four-cards {
        height: auto !important;
        min-height: 700px;
        /* Space for 3D Elements */
        padding: 60px 0;
        overflow: hidden;
        perspective: 1200px;
        /* Critical for 3D */
    }

    .four-cards-header {
        padding: 0 20px;
        margin-bottom: 40px;
        position: relative;
        z-index: 20;
    }

    .four-cards-header h1 {
        font-size: 32px;
    }

    /* Container becomes the stage */
    .four-cards-container {
        display: block;
        /* Reset flex */
        position: relative;
        width: 100%;
        max-width: 500px;
        /* Constrain active area */
        height: 500px;
        margin: 0 auto;
        transform-style: preserve-3d;
    }

    /* Cards become absolute actors */
    .four-card-wrapper {
        position: absolute;
        width: 85%;
        height: auto;
        min-height: 420px;
        left: 7.5%;
        /* Center in container (100-85)/2 */
        top: 0;
        background: rgba(20, 20, 30, 0.9);
        /* Darker for depth */
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, filter 0.6s ease;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .four-card-wrapper h3 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .four-card-wrapper p {
        font-size: 16px;
        line-height: 1.5;
    }

    .four-card-img {
        max-width: 100%;
        height: auto;
        max-height: 200px;
        margin-bottom: 20px;
        object-fit: contain;
    }

    /* 3D STATES (Applied by JS) */
    .f-card-center {
        z-index: 10;
        transform: translateZ(100px) scale(1);
        opacity: 1;
        border-color: rgba(140, 82, 254, 0.5);
        box-shadow: 0 0 50px rgba(140, 82, 254, 0.2);
    }

    .f-card-left {
        z-index: 5;
        transform: translateX(-60%) translateZ(-150px) rotateY(25deg) scale(0.9);
        opacity: 0.6;
        filter: brightness(0.7);
        pointer-events: none;
        /* Interact only with center */
    }

    .f-card-right {
        z-index: 5;
        transform: translateX(60%) translateZ(-150px) rotateY(-25deg) scale(0.9);
        opacity: 0.6;
        filter: brightness(0.7);
        pointer-events: none;
    }

    .f-card-hidden {
        z-index: 0;
        transform: translateZ(-300px) scale(0.5);
        opacity: 0;
        pointer-events: none;
    }

    /* Hide Desktop Assets */
    .card-beam,
    .beam-branches-svg,
    .global-beam {
        display: none !important;
    }

    /* Navigation Controls */
    .slider-nav-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
        position: absolute;
        bottom: 20px;
        width: 100%;
        z-index: 30;
    }

    /* 4. POV Section Fixes */
    .pov-main-stage {
        flex-direction: column;
        gap: 40px;
    }

    .pov-side-text {
        text-align: center;
        order: 2;
    }

    .pov-center-card-container {
        order: 1;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .pov-image-wrapper {
        width: 100%;
        max-width: 280px;
        aspect-ratio: 280/320;
    }

    .pov-content-wrapper {
        height: auto !important;
    }

    /* 5. Revenue Section Fixes */
    .revenue-split {
        flex-direction: column;
        gap: 60px;
        text-align: center;
    }

    .model-card.revenue-graph-card {
        width: 100%;
        min-height: 300px;
    }

    .revenue-cards {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* 6. Typography & Vision Grid */
    .vision-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 60px;
    }

    .power-box {
        margin-left: 0;
        width: 100%;
    }

    .power-header,
    .power-list {
        padding: 24px;
    }

    /* Hide desktop breaks, show mobile breaks */
    br {
        display: none;
    }

    .hero-text-side br,
    .revenue-title br,
    .model-card br {
        display: block;
    }

    .win-card {
        width: 100%;
    }

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

    .sa-cta-prefooter {
        padding: 60px 20px;
        margin: 0;
    }

}


.sa-cta-prefooter {
    position: relative;
    overflow: hidden;
}

.sa-bg-gradient,
.sa-bg-noise,
.sa-bg-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sa-container {
    position: relative;
    z-index: 5;
    /* IMPORTANT */
}



.sa-anim-fade-up {
    opacity: 1 !important;
    transform: none !important;
}

.sa-icon-pill img {
    opacity: 1 !important;
    transform: none !important;
}

body {
    overflow-x: hidden;
}