:root {
    --primary: #00A676;
    --secondary: #FFCB5B;
    --accent-purple: #a78bfa;
    --accent-coral: #fb7185;
    --dark: #36454f;
    /* Charcoal - Modern Minimalist */
    --text-muted: #708090;
    /* Slate Gray */
    --border-subtle: #e5e7eb;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--dark);
    background-color: #ffffff;
}

.sticky-nav {
    background-color: rgba(255, 255, 255, 0.98);
    /* Cleaner white */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 0;
}

.pill-button {
    border-radius: 9999px;
    border: none;
    font-weight: 800;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
    color: black !important;
    /* Keep black for contrast on buttons */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pill-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.pill-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.pill-button-sm {
    border-radius: 9999px;
    border: none;
    padding: 0.5rem 1.25rem;
    font-weight: 800;
    font-size: 0.875rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
    color: black !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pill-button-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.category-badge {
    display: inline-flex;
    line-height: 1.1;
    border: 1px solid var(--border-subtle);
    border-radius: 9999px;
    box-shadow: none;
    /* Cleaner look */
    font-weight: 800;
    padding: 0.25rem 0.75rem;
}

.hover-card {
    transition: all 0.3s ease;
    border: 1px solid var(--border-subtle);
    border-radius: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    /* Minimalist shadow */
    background-color: white;
}

.hover-card:hover {
    transform: translateY(-2px);
    border-color: #d1d5db;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    /* Soft lift */
}

.feature-card {
    background-color: white;
    border: 1px solid var(--border-subtle);
    padding: 1rem;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-1px);
    border-color: #d1d5db;
}


/* Nav Links */
.nav-link {
    font-weight: 700;
    transition: color 0.3s ease;
    color: var(--text-muted);
    /* Slate Gray default */
}

.nav-link:hover:nth-child(1) {
    color: var(--primary);
}

.nav-link:hover:nth-child(2) {
    color: var(--accent-purple);
}

.nav-link:hover:nth-child(3) {
    color: var(--accent-coral);
}

.nav-link:hover:nth-child(4) {
    color: var(--secondary);
}

.mobile-nav-link {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--dark);
    transition: color 0.3s;
}

.mobile-nav-link:hover {
    color: var(--primary);
}

/* Animations - Cleaned up blobs */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
        /* Reduced movement for calmness */
    }

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

.font-serif {
    font-family: 'Lora', serif;
}

.font-sans {
    font-family: 'Poppins', sans-serif;
}

/* Abstract Composition Styles */
.abstract-container {
    position: relative;
    width: 100%;
    height: 600px;
    perspective: 1000px;
}

.glass-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
    border-radius: 20px;
    transition: transform 0.5s ease;
}

.glass-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.shape-1 {
    width: 280px;
    height: 380px;
    top: 10%;
    right: 15%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 100%);
    z-index: 2;
    transform: rotate(-5deg);
}

.shape-2 {
    width: 240px;
    height: 240px;
    bottom: 15%;
    left: 10%;
    background: linear-gradient(135deg, rgba(240, 253, 244, 0.9) 0%, rgba(220, 252, 231, 0.4) 100%);
    /* Green tint */
    z-index: 1;
    border-radius: 50%;
    /* Circle */
    transform: rotate(10deg);
}

.shape-3 {
    width: 180px;
    height: 180px;
    top: 25%;
    left: 5%;
    background: linear-gradient(135deg, rgba(54, 69, 79, 0.1) 0%, rgba(54, 69, 79, 0.05) 100%);
    /* Charcoal tint */
    z-index: 0;
    backdrop-filter: blur(4px);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.decorative-line {
    position: absolute;
    height: 1px;
    background: var(--dark);
    opacity: 0.1;
    width: 100%;
}

/* Aurora Background */
.aurora-bg {
    background-color: #ffffff;
    background-image:
        radial-gradient(at 0% 0%, rgba(0, 191, 99, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(167, 139, 250, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(255, 222, 89, 0.15) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(251, 113, 133, 0.15) 0px, transparent 50%);
    background-size: 140% 140%;
    animation: auroraMove 15s ease infinite alternate;
}

@keyframes auroraMove {
    0% {
        background-position: 0% 0%;
    }

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

/* Floating UI Stack */
.floating-stack-container {
    perspective: 1000px;
}

.floating-stack {
    position: relative;
    width: 100%;
    height: 400px;
    transform-style: preserve-3d;
    transform: rotateY(-12deg) rotateX(5deg);
    transition: transform 0.5s ease;
}

.floating-stack:hover {
    transform: rotateY(-5deg) rotateX(2deg);
}

.ui-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ui-card-back {
    width: 320px;
    height: 240px;
    top: 0;
    right: 20px;
    z-index: 1;
    opacity: 0.6;
    transform: translateZ(-40px) translateY(-20px);
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.ui-card-front {
    width: 340px;
    height: 260px;
    top: 40px;
    right: 60px;
    z-index: 2;
    transform: translateZ(20px);
}

.ui-card-front:hover {
    transform: translateZ(50px) translateY(-10px);
}

/* Scroll Mouse Animation */
.mouse-scroll {
    width: 26px;
    height: 42px;
    border: 2px solid var(--text-muted);
    border-radius: 20px;
    position: relative;
}

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

@keyframes scrollWheel {
    0% {
        top: 6px;
        opacity: 1;
    }

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

/* --- HERO VARIATIONS --- */

/* V1: Liquid Potential */
.hero-v1-container {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blob-v1 {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.8;
    animation: blobMorph 10s ease-in-out infinite alternate;
}

.blob-v1-1 {
    width: 300px;
    height: 300px;
    background: var(--primary);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.blob-v1-2 {
    width: 250px;
    height: 250px;
    background: var(--accent-purple);
    bottom: 20%;
    right: 10%;
    animation-delay: -2s;
}

.blob-v1-3 {
    width: 200px;
    height: 200px;
    background: var(--secondary);
    top: 40%;
    left: 40%;
    animation-delay: -4s;
    mix-blend-mode: multiply;
}

@keyframes blobMorph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: translate(20px, 30px) rotate(10deg);
    }

    100% {
        border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%;
        transform: translate(-20px, -20px) rotate(-10deg);
    }
}

/* V2: Zen Grid */
.hero-v2-container {
    perspective: 1000px;
    width: 100%;
    height: 500px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-plane {
    width: 600px;
    height: 600px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 15px;
    transform: rotateX(40deg) rotateZ(45deg);
    transform-style: preserve-3d;
    opacity: 0.6;
}

.grid-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: gridWave 3s ease-in-out infinite;
}

@keyframes gridWave {

    0%,
    100% {
        transform: translateZ(0);
        opacity: 0.3;
    }

    50% {
        transform: translateZ(30px);
        opacity: 0.8;
    }
}

/* Stagger grid animations properly in HTML usually, doing simple staggered classes here for ease */
.grid-dot:nth-child(3n) {
    animation-delay: 0.2s;
    background: var(--accent-purple);
}

.grid-dot:nth-child(3n+1) {
    animation-delay: 0.4s;
}

.grid-dot:nth-child(3n+2) {
    animation-delay: 0.6s;
    background: var(--secondary);
}


/* V3: Glass Prism */
.hero-v3-container {
    position: relative;
    width: 100%;
    height: 500px;
    perspective: 1000px;
}

.prism-card {
    position: absolute;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    transition: transform 0.5s ease;
}

.prism-1 {
    width: 200px;
    height: 300px;
    top: 50px;
    left: 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    z-index: 1;
    transform: rotate(-10deg);
}

.prism-2 {
    width: 220px;
    height: 320px;
    top: 80px;
    left: 150px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
    z-index: 2;
    transform: rotate(5deg);
    border-top: 1px solid var(--primary);
}

.prism-3 {
    width: 180px;
    height: 280px;
    top: 150px;
    left: 100px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    z-index: 3;
    transform: rotate(15deg) translateZ(50px);
    border-bottom: 1px solid var(--accent-purple);
}

.hero-v3-container:hover .prism-1 {
    transform: rotate(-15deg) translateX(-20px);
}

.hero-v3-container:hover .prism-2 {
    transform: rotate(0deg) translateY(-10px);
}

.hero-v3-container:hover .prism-3 {
    transform: rotate(20deg) translateX(20px);
}


/* V4: Focus Orbit */
.hero-v4-container {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.orbit-ring {
    position: absolute;
    border: 1px solid rgba(54, 69, 79, 0.1);
    /* Slate Gray */
    border-radius: 50%;
    transform-style: preserve-3d;
}

.orbit-1 {
    width: 400px;
    height: 400px;
    border-color: rgba(0, 191, 99, 0.3);
    animation: spin 20s linear infinite;
}

.orbit-2 {
    width: 300px;
    height: 300px;
    border-color: rgba(167, 139, 250, 0.3);
    animation: spin 15s linear infinite reverse;
}

.orbit-3 {
    width: 200px;
    height: 200px;
    border-color: rgba(255, 222, 89, 0.3);
    animation: spin 10s linear infinite;
}

.orbit-core {
    width: 60px;
    height: 60px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 40px var(--primary);
    animation: pulseCore 3s ease-in-out infinite;
    z-index: 10;
}

.planet {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    background: currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

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

@keyframes pulseCore {

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

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

/* Max Width Containers */
.max-width-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .max-width-container {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

/* Logo Interaction */
/* Logo Interaction */
.logo-interaction {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.logo-interaction:hover {
    transform: scale(1.05);
    /* Subtle lift only */
}

.logo-interaction:active {
    transform: scale(0.95);
}

/* Icons and Shadows */
.inner-shadow-light {
    box-shadow: inset 0px 3px 0px 0px rgba(255, 255, 255, 0.4), 3px 3px 0px 0px rgba(0, 0, 0, 1) !important;
}

.inner-shadow-light:hover {
    box-shadow: inset 0px 3px 0px 0px rgba(255, 255, 255, 0.4), 5px 5px 0px 0px rgba(0, 0, 0, 1) !important;
}

/* Neo-Brutalist Utilities */
.neo-card {
    background-color: white;
    border: 1px solid #f3f4f6;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
    border-radius: 2rem;
}

.neo-button {
    border: none;
    font-weight: 800;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
    padding: 1rem 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: black;
    border-radius: 9999px;
}

.neo-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.neo-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* DISC Colors */
.bg-disc-d {
    background-color: #EF4444;
}

.text-disc-d {
    color: #EF4444;
}

.border-disc-d {
    border-color: #EF4444;
}

.bg-disc-i {
    background-color: #F59E0B;
}

.text-disc-i {
    color: #F59E0B;
}

.border-disc-i {
    border-color: #F59E0B;
}

.bg-disc-s {
    background-color: #10B981;
}

.text-disc-s {
    color: #10B981;
}

.border-disc-s {
    border-color: #10B981;
}

.bg-disc-c {
    background-color: #8B5CF6;
}

.text-disc-c {
    color: #8B5CF6;
}

.border-disc-c {
    border-color: #8B5CF6;
}


/* Progress Bar Striped Animation */
.progress-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

/* Blob Variations */
/* Blob Variations (Moved to bottom with Gradient) */
/* .blob-purple, .blob-yellow, etc replaced */

/* Blob Positions */
.blob-top-right {
    top: -10%;
    right: -5%;
}

.blob-top-left {
    top: -10%;
    left: -5%;
}

.blob-bottom-right {
    bottom: -10%;
    right: -5%;
}

.blob-bottom-left {
    bottom: -10%;
    left: -5%;
}

.blob-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- NEW HERO STYLES (Added for Redesign) --- */

/* 1. Neo-Brutalist Styles */
.neo-brutalist-container {
    background-color: #FFCB5B;
    /* Secondary Yellow base */
    border: 4px solid var(--dark);
    box-shadow: 10px 10px 0px 0px var(--dark);
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.neo-brutalist-btn {
    background-color: var(--primary);
    border: 3px solid var(--dark);
    box-shadow: 5px 5px 0px 0px var(--dark);
    font-weight: 900;
    text-transform: uppercase;
    padding: 1rem 2rem;
    transition: all 0.2s;
    border-radius: 0;
}

.neo-brutalist-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0px 0px var(--dark);
}

.neo-brutalist-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0px 0px var(--dark);
}

.neo-tag {
    background: white;
    border: 2px solid var(--dark);
    font-weight: bold;
    padding: 0.5rem 1rem;
    box-shadow: 4px 4px 0px var(--dark);
    display: inline-block;
    transform: rotate(-2deg);
}

/* 2. Claymorphism Styles */
.clay-container {
    background-color: #f0f4f8;
    border-radius: 3rem;
    padding: 3rem;
    box-shadow:
        inset 10px 10px 20px rgba(255, 255, 255, 0.8),
        inset -10px -10px 20px rgba(174, 174, 192, 0.2),
        20px 20px 40px rgba(174, 174, 192, 0.2);
}

.clay-card {
    background-color: #f0f4f8;
    border-radius: 2rem;
    padding: 2rem;
    box-shadow:
        20px 20px 60px #cadbe9,
        -20px -20px 60px #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.clay-btn {
    background-color: var(--primary);
    border-radius: 2rem;
    padding: 1rem 2.5rem;
    color: white;
    font-weight: 800;
    box-shadow:
        inset 6px 6px 10px rgba(255, 255, 255, 0.4),
        inset -6px -6px 10px rgba(0, 0, 0, 0.1),
        10px 10px 20px rgba(174, 174, 192, 0.2);
    transition: transform 0.2s;
}

.clay-btn:hover {
    transform: translateY(-3px);
}

/* 3. Cyber/Grid Styles */
.cyber-grid-bg {
    background-image:
        linear-gradient(rgba(0, 191, 99, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 191, 99, 0.1) 1px, transparent 1px);
    background-size: 40px 40px;
    background-color: #0d1117;
    /* Dark background */
    color: #e6edf3;
}

.cyber-panel {
    background: rgba(13, 17, 23, 0.8);
    border: 1px solid var(--primary);
    position: relative;
    padding: 2rem;
}

.cyber-panel::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 10px;
    height: 10px;
    background: var(--primary);
}

.cyber-panel::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background: var(--primary);
}

.font-mono-cyber {
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.1em;
}

.cyber-btn {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 1rem 2rem;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.cyber-btn:hover {
    background: var(--primary);
    color: black;
    box-shadow: 0 0 15px var(--primary);
}

/* 4. Editorial Styles */
.editorial-container {
    background-color: #faf9f6;
    /* Off-white */
    color: #1a1a1a;
}

.font-editorial-heading {
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 500;
}

.editorial-img-mask {
    border-radius: 100px 0 100px 0;
    overflow: hidden;
}

.editorial-line {
    width: 100%;
    height: 1px;
    background-color: #1a1a1a;
    margin: 2rem 0;
}

.editorial-btn {
    background: transparent;
    border-bottom: 2px solid #1a1a1a;
    padding-bottom: 5px;
    font-family: 'Lora', serif;
    font-weight: 600;
    font-style: italic;
    transition: all 0.3s;
}

.editorial-btn:hover {
    padding-bottom: 8px;
    border-bottom-width: 3px;
}

/* --- REVISED HERO VISUALS (Right Side Only) --- */

/* V1: Interactive Playground (Geometric Shapes) */
.hero-visual-playground {
    position: relative;
    width: 100%;
    height: 500px;
    perspective: 1000px;
}

.geo-shape {
    position: absolute;
    opacity: 0.8;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.geo-shape:hover {
    transform: scale(1.2) rotate(15deg);
    z-index: 10;
    opacity: 1;
}

.geo-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #4ade80);
    top: 20%;
    left: 20%;
    animation: float 6s ease-in-out infinite;
}

.geo-triangle {
    width: 0;
    height: 0;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    border-bottom: 140px solid var(--secondary);
    top: 50%;
    right: 20%;
    animation: float 7s ease-in-out infinite reverse;
}

.geo-square {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--accent-purple), #c4b5fd);
    border-radius: 20px;
    bottom: 20%;
    left: 40%;
    transform: rotate(45deg);
    animation: float 8s ease-in-out infinite 1s;
}

/* V2: Neural Network */
.hero-visual-neural {
    position: relative;
    width: 100%;
    height: 500px;
}

.neural-node {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--primary);
    z-index: 2;
}

.neural-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
    transform-origin: left center;
    opacity: 0.3;
    z-index: 1;
}

/* V3: Isometric Structure */
.hero-visual-isometric {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(-45deg);
}

.iso-block {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: white;
    box-shadow:
        -10px 10px 20px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.iso-block::before {
    content: '';
    position: absolute;
    left: -20px;
    width: 20px;
    height: 100%;
    background-color: #e5e7eb;
    transform-origin: right top;
    transform: skewY(-45deg);
}

.iso-block::after {
    content: '';
    position: absolute;
    bottom: -20px;
    width: 100%;
    height: 20px;
    background-color: #d1d5db;
    transform-origin: left top;
    transform: skewX(-45deg);
}

.iso-block:hover {
    transform: translate(0, -20px);
    background-color: var(--primary);
}

/* V4: Data Orb */
.hero-visual-orb {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.orb-core {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), var(--primary));
    box-shadow: 0 0 60px rgba(0, 191, 99, 0.4);
    position: relative;
    z-index: 10;
    animation: breathe 4s ease-in-out infinite;
}

.orb-ring {
    position: absolute;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotateRing 10s linear infinite;
}

.orb-ring-1 {
    width: 300px;
    height: 300px;
    border-color: var(--accent-purple);
    animation-duration: 15s;
}

.orb-ring-2 {
    width: 400px;
    height: 100px;
    border-color: var(--secondary);
    animation-duration: 8s;
}

.orb-ring-3 {
    width: 350px;
    height: 350px;
    border: 1px dashed var(--text-muted);
    animation-duration: 25s;
    animation-direction: reverse;
}

@keyframes breathe {

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

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

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

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

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

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

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

/* Print styles for Results */
@media print {
    body {
        background: white;
    }

    .no-print {
        display: none !important;
    }

    .neo-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* --- NEW HERO VISUALS (Refined V3 + V4 Fix) --- */

/* V1: Student Photo (Fixed Visibility) */
/* V1: Student Photo (Gradient Blobs) */
/* --- ROUND 3 HERO VISUALS --- */

/* V1: Modern Frame (3D Tilted) */
.hero-visual-frame {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.frame-container {
    position: relative;
    width: 400px;
    height: 500px;
    transform: rotateY(-15deg) rotateX(5deg);
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.frame-container:hover {
    transform: rotateY(0deg) rotateX(0deg);
}

.frame-border {
    position: absolute;
    inset: -20px;
    border: 4px solid var(--dark);
    border-radius: 30px;
    transform: translateZ(-20px);
    background: var(--secondary);
    box-shadow: 20px 20px 0 var(--dark);
}

.frame-image {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 4px solid var(--dark);
    background: white;
}

.frame-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* V2: Offset Layers (Depth) */
.hero-visual-layers {
    position: relative;
    width: 100%;
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layer-container {
    position: relative;
    width: 450px;
    height: 350px;
}

.layer-bg-1 {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    background: var(--accent-purple);
    border-radius: 24px;
    opacity: 0.3;
    z-index: 1;
}

.layer-bg-2 {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 100%;
    height: 100%;
    background: var(--secondary);
    border-radius: 24px;
    opacity: 0.5;
    z-index: 2;
}

.layer-main {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    z-index: 3;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    background: white;
}

.layer-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    /* Adjusted for collaboration image */
}

/* V3: Active (Transparent Motion) */
.hero-visual-active {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.active-mask {
    position: relative;
    width: 500px;
    height: 500px;
    /* Removed clip-path and background for transparency */
    overflow: visible;
    z-index: 2;
}

.active-mask img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    /* Removed skew transforms */
}

.motion-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%) skewX(-15deg);
    pointer-events: none;
    z-index: 1;
}

.motion-line {
    position: absolute;
    height: 6px;
    /* Thicker lines */
    background: var(--primary);
    border-radius: 6px;
    opacity: 0.6;
    animation: motionLine 1.5s linear infinite;
}

.ml-1 {
    width: 120px;
    top: 25%;
    left: -10%;
    animation-delay: 0s;
    background: var(--primary);
}

.ml-2 {
    width: 180px;
    bottom: 35%;
    right: -15%;
    animation-delay: 0.6s;
    background: var(--secondary);
}

.ml-3 {
    width: 100px;
    top: 65%;
    left: -5%;
    animation-delay: 1.0s;
    background: var(--accent-purple);
}

/* V4: Digital Study (Laptop Pulse) */
.hero-visual-digital {
    position: relative;
    width: 100%;
    height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.digital-container {
    position: relative;
    width: 500px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.digital-glow {
    position: absolute;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(0, 191, 99, 0.15), transparent 70%);
    z-index: 1;
    animation: glowPulse 4s ease-in-out infinite;
}

.digital-ring {
    position: absolute;
    border: 2px solid rgba(0, 191, 99, 0.2);
    border-radius: 50%;
    z-index: 1;
}

.dr-1 {
    width: 450px;
    height: 450px;
    animation: expandFade 4s infinite;
}

.dr-2 {
    width: 450px;
    height: 450px;
    animation: expandFade 4s infinite 2s;
}

.digital-image {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

.digital-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.digital-badge {
    position: absolute;
    background: white;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
    animation: float 5s ease-in-out infinite;
}

.db-1 {
    top: 0;
    right: 20px;
    animation-delay: 0s;
}

.db-2 {
    bottom: 20px;
    left: 0;
    animation-delay: 2.5s;
}

/* --- ROUND 9 MOTION VARIANTS --/* Old V3 classes removed */


/* V1: Floating Orbs (Organic) */
.hero-visual-orbs {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.orb-float {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.6;
    animation: orbFloat 10s ease-in-out infinite alternate;
    z-index: 1;
}

.orb-1 {
    width: 150px;
    height: 150px;
    background: var(--primary);
    top: 10%;
    left: 10%;
    animation-duration: 12s;
}

.orb-2 {
    width: 100px;
    height: 100px;
    background: var(--secondary);
    bottom: 20%;
    right: 15%;
    animation-duration: 15s;
    animation-delay: -2s;
}

.orb-3 {
    width: 80px;
    height: 80px;
    background: var(--accent-purple);
    top: 40%;
    right: 20%;
    animation-duration: 18s;
    animation-delay: -5s;
}

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

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


/* V2: Drifting Squares (Structured) */
.hero-visual-squares {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.square-drift {
    position: absolute;
    background: transparent;
    border: 2px solid;
    border-radius: 12px;
    opacity: 0.5;
    z-index: 1;
    animation: squareDrift 20s linear infinite;
}

.sq-1 {
    width: 80px;
    height: 80px;
    border-color: var(--primary);
    top: 20%;
    left: 15%;
    animation-duration: 25s;
}

.sq-2 {
    width: 120px;
    height: 120px;
    border-color: var(--secondary);
    bottom: 25%;
    right: 10%;
    animation-duration: 30s;
    animation-delay: -5s;
}

.sq-3 {
    width: 60px;
    height: 60px;
    border-color: var(--accent-purple);
    top: 60%;
    left: 20%;
    animation-duration: 20s;
    animation-delay: -10s;
}

@keyframes squareDrift {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }

    25% {
        transform: rotate(90deg) translate(20px, 20px);
    }

    50% {
        transform: rotate(180deg) translate(0, 40px);
    }

    75% {
        transform: rotate(270deg) translate(-20px, 20px);
    }

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


/* V3: Rising Particles (New Effect) */
.hero-visual-particles {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.particle {
    position: absolute;
    background: var(--primary);
    /* Default Circle */
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    bottom: 0;
    animation: rise 8s infinite ease-in;
}

/* Geometric Variants */
.particle-triangle {
    border-radius: 0;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.particle-square {
    border-radius: 4px;
    /* Slight rounding for softness */
}

.particle-cross {
    border-radius: 0;
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

.p-1 {
    width: 40px;
    height: 40px;
    left: 20%;
    animation-duration: 7s;
    animation-delay: 0s;
    background: var(--primary);
}

.p-2 {
    width: 20px;
    height: 20px;
    left: 50%;
    animation-duration: 5s;
    animation-delay: 2s;
    background: var(--secondary);
}

.p-3 {
    width: 60px;
    height: 60px;
    left: 70%;
    animation-duration: 9s;
    animation-delay: 1s;
    background: var(--accent-purple);
}

.p-4 {
    width: 30px;
    height: 30px;
    left: 35%;
    animation-duration: 6s;
    animation-delay: 4s;
    background: #34d399;
}

.p-5 {
    width: 15px;
    height: 15px;
    left: 60%;
    animation-duration: 8s;
    animation-delay: 3s;
    background: #fbbf24;
}

@keyframes rise {
    0% {
        bottom: 0;
        transform: translateX(0) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 0.6;
    }

    50% {
        transform: translateX(20px) rotate(180deg);
    }

    80% {
        opacity: 0.6;
    }

    100% {
        bottom: 100%;
        transform: translateX(-20px) rotate(360deg);
        opacity: 0;
    }
}

/* V4: Pulsing Ripples (Zen) */
.hero-visual-ripples {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.ripple-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--primary);
    opacity: 0;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ripplePulse 10s linear infinite;
}

.rip-1 {
    width: 300px;
    height: 300px;
    animation-delay: 0s;
}

.rip-2 {
    width: 300px;
    height: 300px;
    animation-delay: 3.3s;
}

.rip-3 {
    width: 300px;
    height: 300px;
    animation-delay: 6.6s;
}

@keyframes ripplePulse {
    0% {
        width: 300px;
        height: 300px;
        opacity: 0;
        border-width: 1px;
    }

    10% {
        opacity: 0.5;
    }

    100% {
        width: 700px;
        height: 700px;
        opacity: 0;
        border-width: 0px;
    }
}

/* Student Image Container (Common for V1-V4 now) */
.student-image-container {
    position: relative;
    z-index: 2;
    width: 500px;
    /* Consistent width */
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.student-image-container img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

/* --- FORCE CLEAN HEADER HOTFIX --- */

/* --- FORCE CLEAN HEADER HOTFIX --- */
header#main-header.force-clean {
    background-color: #ffffff !important;
    backdrop-filter: none !important;
    box-shadow: 0 1px 0 0 var(--border-subtle) !important;
}

header#main-header.force-clean .logo-interaction {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

header#main-header.force-clean * {
    text-shadow: none !important;
}

header#main-header.force-clean .font-black {
    color: var(--dark) !important;
}

header#main-header.force-clean .text-\[var\(--primary\)\] {
    color: var(--primary) !important;
}

/* --- ROUND 16 AMBIENT EFFECTS --- */

/* V1: Gradient Flow (Ambient) */
.hero-visual-gradient {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    /* Soft shifting gradient background */
    background: radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.15), rgba(255, 255, 255, 0) 70%);
    animation: gradientPulse 8s ease-in-out infinite alternate;
}

@keyframes gradientPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

/* V2: Architectural Grid (Technical) */
.hero-visual-grid {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.grid-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Subtle dot grid */
    background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    z-index: 0;
}

/* V3: Focus Glow (Minimalist) */
.hero-visual-glow {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.glow-spot {
    position: absolute;
    width: 400px;
    height: 400px;
    background: var(--primary);
    border-radius: 50%;
    filter: blur(80px);
    /* Heavy blur for soft glow */
    opacity: 0.2;
    z-index: 0;
    /* Static, just there to highlight */
}

/* V4: Zen Circle (Static/Slow) */
.hero-visual-circle {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.thin-ring {
    position: absolute;
    width: 450px;
    height: 450px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Very subtle border */
    border-radius: 50%;
    z-index: 0;
    animation: slowRotate 60s linear infinite;
    /* Imperceptible rotation */
}

@keyframes slowRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- ROUND 24: HIGH-CONTRAST STRUCTURAL COMPOSITIONS (HOME 2) --- */

/* Base Class */
.hero-composition-base {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #ffffff;
}

/* V1: Diagonal Split (Asymmetry) */
.composition-split {
    background: linear-gradient(115deg, #ffffff 55%, #f0fdf4 55%);
}

.composition-split::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    /* Matches the split */
    height: 100%;
    background-image: radial-gradient(#86efac 2px, transparent 2px);
    background-size: 30px 30px;
    opacity: 0.5;
    pointer-events: none;
}

.composition-split::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 55%;
    width: 4px;
    background: #dcfce7;
    transform: skewX(-25deg);
    /* Matches 115deg roughly or adjust */
    transform-origin: top;
    display: none;
    /* Gradient edge is enough, line can be distracting */
}

/* V2: Swiss Modular Grid (Architectural) */
.composition-grid {
    background-color: #ffffff;
    background-image:
        linear-gradient(#e5e7eb 1px, transparent 1px),
        linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
    background-size: 120px 120px;
    /* Large, visible modules */
    background-position: center top;
}

.composition-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: #00A676;
    /* Center axis */
    opacity: 0.3;
}

.composition-grid::after {
    content: "GRID SYSTEM 1.0";
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-family: monospace;
    font-size: 10px;
    color: #00A676;
    letter-spacing: 2px;
}

/* V3: Giant Typography (Editorial) */
.composition-typo {
    background-color: #ffffff;
}

.composition-typo::before {
    content: "CP";
    position: absolute;
    right: -5%;
    bottom: -15%;
    font-size: 60vh;
    font-weight: 900;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: transparent;
    -webkit-text-stroke: 4px #f0fdf4;
    z-index: 0;
    opacity: 1;
    line-height: 1;
    letter-spacing: -20px;
}

/* V4: Layered Glass Panes (Depth) */
.composition-panes {
    background-color: #f7fee7;
    /* Slight tint base */
    perspective: 1000px;
}

/* Pane 1 (Back) */
.composition-panes::before {
    content: "";
    position: absolute;
    top: 10%;
    right: 10%;
    width: 40%;
    height: 80%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transform: rotateY(-10deg) translateZ(-50px);
    border-radius: 20px;
}

/* Pane 2 (Mid) */
.composition-panes::after {
    content: "";
    position: absolute;
    bottom: -10%;
    left: 45%;
    width: 60%;
    height: 60%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
    backdrop-filter: blur(10px);
    border: 1px solid white;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    transform: rotateY(10deg) translateZ(0px);
    border-radius: 30px;
    z-index: 0;
    /* Behind content but in front of bg */
}

/* ============================================================
   HERO SECTION BACKGROUNDS — 4 DISTINCT VARIANTS
   ============================================================ */

/* V1: Editorial Focus — Warm organic blobs behind student */
.hero-v1 {
    background: linear-gradient(160deg, #ffffff 0%, #fef9f0 30%, #f0fdf4 70%, #ffffff 100%);
    position: relative;
}

.hero-v1-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 1;
    pointer-events: none;
}

.hero-v1-blob-1 {
    width: 320px;
    height: 320px;
    background: rgba(0, 191, 99, 0.25);
    top: 15%;
    right: 8%;
    animation: blobDrift1 12s ease-in-out infinite alternate;
}

.hero-v1-blob-2 {
    width: 250px;
    height: 250px;
    background: rgba(167, 139, 250, 0.2);
    bottom: 10%;
    right: 20%;
    animation: blobDrift2 15s ease-in-out infinite alternate;
}

.hero-v1-blob-3 {
    width: 200px;
    height: 200px;
    background: rgba(255, 222, 89, 0.2);
    top: 50%;
    right: 30%;
    animation: blobDrift3 10s ease-in-out infinite alternate;
}

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

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

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

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

@keyframes blobDrift3 {
    0% {
        transform: translate(0, 0) scale(0.9);
    }

    100% {
        transform: translate(-15px, -25px) scale(1.05);
    }
}

/* V1 Student Frame */
.hero-v1-frame {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 2;
}

.hero-v1-frame img {
    height: 90%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12));
    position: relative;
    z-index: 3;
}


/* V2: Collaboration — Soft architectural grid + glass panels */
.hero-v2 {
    background-color: #f7fef9;
    background-image:
        linear-gradient(rgba(0, 191, 99, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 191, 99, 0.06) 1px, transparent 1px);
    background-size: 80px 80px;
    position: relative;
}

.hero-v2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0, 191, 99, 0.15), transparent);
    pointer-events: none;
}

.hero-v2-visual {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.hero-v2-panel {
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    z-index: 1;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}

.hero-v2-panel-1 {
    width: 280px;
    height: 340px;
    top: 5%;
    right: -5%;
    transform: rotate(3deg);
    animation: panelFloat1 8s ease-in-out infinite alternate;
}

.hero-v2-panel-2 {
    width: 200px;
    height: 260px;
    bottom: 0;
    left: -8%;
    transform: rotate(-4deg);
    animation: panelFloat2 10s ease-in-out infinite alternate;
}

@keyframes panelFloat1 {
    0% {
        transform: rotate(3deg) translateY(0);
    }

    100% {
        transform: rotate(3deg) translateY(-12px);
    }
}

@keyframes panelFloat2 {
    0% {
        transform: rotate(-4deg) translateY(0);
    }

    100% {
        transform: rotate(-4deg) translateY(8px);
    }
}

.hero-v2-visual img {
    height: 85%;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
}


/* V3: On The Move — Speed lines + dynamic diagonal feel */
.hero-v3 {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    position: relative;
}

.hero-v3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(135deg,
            transparent,
            transparent 60px,
            rgba(0, 191, 99, 0.03) 60px,
            rgba(0, 191, 99, 0.03) 62px);
    z-index: 0;
    pointer-events: none;
}

.hero-v3-visual {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 2;
}

.hero-v3-streak {
    position: absolute;
    height: 4px;
    border-radius: 4px;
    opacity: 0;
    z-index: 1;
    animation: speedStreak 3s ease-in-out infinite;
}

.hero-v3-streak-1 {
    width: 160px;
    background: linear-gradient(to right, transparent, var(--primary));
    top: 20%;
    right: -20%;
    animation-delay: 0s;
}

.hero-v3-streak-2 {
    width: 200px;
    background: linear-gradient(to right, transparent, var(--secondary));
    top: 45%;
    right: -25%;
    animation-delay: 1s;
}

.hero-v3-streak-3 {
    width: 120px;
    background: linear-gradient(to right, transparent, var(--accent-purple));
    bottom: 30%;
    right: -15%;
    animation-delay: 2s;
}

.hero-v3-streak-4 {
    width: 180px;
    background: linear-gradient(to right, transparent, rgba(0, 191, 99, 0.6));
    top: 65%;
    right: -22%;
    animation-delay: 0.5s;
}

@keyframes speedStreak {
    0% {
        transform: translateX(300px);
        opacity: 0;
    }

    30% {
        opacity: 0.7;
    }

    100% {
        transform: translateX(-600px);
        opacity: 0;
    }
}

.hero-v3-visual img {
    height: 95%;
    width: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
}


/* V4: Results Showcase — Dark premium bg with card stack */
.hero-v4 {
    background: linear-gradient(160deg, #1a1f2e 0%, #0f2418 50%, #162b1f 100%);
    position: relative;
}

.hero-v4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 70% 50%, rgba(0, 191, 99, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 30%, rgba(167, 139, 250, 0.06) 0%, transparent 50%);
    z-index: 0;
    pointer-events: none;
}

/* V4 dark theme text overrides */
.hero-v4 .text-gray-900 {
    color: #ffffff !important;
}

.hero-v4 .text-gray-600 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.hero-v4 .text-green-700 {
    color: #86efac !important;
}

.hero-v4 .bg-white\/50 {
    background: rgba(255, 255, 255, 0.08) !important;
}

.hero-v4 .border-white\/60 {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.hero-v4-cards {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    perspective: 800px;
}

.hero-v4-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 24px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-v4-card-1 {
    width: 320px;
    top: 5%;
    right: 0;
    z-index: 3;
    transform: rotate(-2deg);
    animation: cardFloat1 6s ease-in-out infinite alternate;
}

.hero-v4-card-2 {
    width: 260px;
    bottom: 10%;
    left: 5%;
    z-index: 2;
    transform: rotate(3deg);
    animation: cardFloat2 8s ease-in-out infinite alternate;
}

.hero-v4-card-3 {
    width: 220px;
    top: 30%;
    left: -5%;
    z-index: 1;
    opacity: 0.7;
    transform: rotate(-1deg) scale(0.9);
    animation: cardFloat3 7s ease-in-out infinite alternate;
}

@keyframes cardFloat1 {
    0% {
        transform: rotate(-2deg) translateY(0);
    }

    100% {
        transform: rotate(-2deg) translateY(-10px);
    }
}

@keyframes cardFloat2 {
    0% {
        transform: rotate(3deg) translateY(0);
    }

    100% {
        transform: rotate(3deg) translateY(8px);
    }
}

@keyframes cardFloat3 {
    0% {
        transform: rotate(-1deg) scale(0.9) translateY(0);
    }

    100% {
        transform: rotate(-1deg) scale(0.9) translateY(-6px);
    }
}

/* V4 card inner elements */
.hero-v4-card .card-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin-bottom: 8px;
}

.hero-v4-card .card-title {
    font-size: 18px;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.hero-v4-card .card-bar-track {
    width: 100%;
    height: 8px;
    background: #f3f4f6;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.hero-v4-card .card-bar-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 1.5s ease-out;
}

.hero-v4-card .card-bar-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

/* ============================================================
   V3 SUB-VARIANTS — 4 DISTINCT COMPOSITIONS (same SVG)
   ============================================================ */

/* V3a: "The Pathway" — Dotted trail with circle markers */
.hero-v3a {
    background: #fafdf7;
    position: relative;
}

.hero-v3a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at 80% 60%, rgba(0, 191, 99, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.hero-v3a-trail {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-v3a-dot {
    position: absolute;
    border-radius: 50%;
    border: 2px dashed rgba(0, 191, 99, 0.2);
}

.hero-v3a-dot-1 {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -50px;
    animation: pathPulse 6s ease-in-out infinite alternate;
}

.hero-v3a-dot-2 {
    width: 250px;
    height: 250px;
    top: 10%;
    right: 20%;
    animation: pathPulse 8s ease-in-out infinite alternate-reverse;
}

.hero-v3a-dot-3 {
    width: 120px;
    height: 120px;
    top: 50%;
    right: 40%;
    background: rgba(0, 191, 99, 0.04);
    animation: pathPulse 5s ease-in-out infinite alternate;
}

.hero-v3a-marker {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--primary);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 6px rgba(0, 191, 99, 0.15), 0 0 0 12px rgba(0, 191, 99, 0.05);
}

.hero-v3a-marker-1 {
    bottom: 30%;
    left: 15%;
    animation: markerBlink 3s infinite;
}

.hero-v3a-marker-2 {
    top: 25%;
    right: 35%;
    animation: markerBlink 3s infinite 1s;
}

.hero-v3a-marker-3 {
    top: 60%;
    right: 15%;
    animation: markerBlink 3s infinite 2s;
}

@keyframes pathPulse {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }

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

@keyframes markerBlink {

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

    50% {
        transform: scale(1.3);
        opacity: 0.6;
    }
}

.hero-v3a-visual {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 3;
}

.hero-v3a-visual img {
    height: 95%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12));
    position: relative;
    z-index: 3;
}


/* V3b: "Editorial Giant" — Massive outlined text behind image */
.hero-v3b {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-v3b-glyph {
    position: absolute;
    right: -5%;
    bottom: -10%;
    font-size: clamp(300px, 50vw, 600px);
    font-weight: 900;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: transparent;
    -webkit-text-stroke: 3px rgba(0, 191, 99, 0.1);
    z-index: 0;
    line-height: 0.8;
    letter-spacing: -15px;
    pointer-events: none;
    user-select: none;
}

.hero-v3b-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 191, 99, 0.03) 0%, rgba(0, 191, 99, 0.06) 100%);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 0;
    pointer-events: none;
}

.hero-v3b-visual {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 2;
}

.hero-v3b-visual img {
    height: 95%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.15));
    position: relative;
    z-index: 2;
}


/* V3c: "Cinematic" — Dark moody with spotlight + grain */
.hero-v3c {
    background: linear-gradient(170deg, #111a14 0%, #0a1f0e 40%, #1a2e1f 100%);
    position: relative;
}

.hero-v3c::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 65% 55%, rgba(0, 191, 99, 0.18) 0%, transparent 45%),
        radial-gradient(ellipse at 20% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 40%);
    z-index: 1;
    pointer-events: none;
}

.hero-v3c::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    z-index: 2;
    pointer-events: none;
    opacity: 0.5;
}

/* V3c dark text overrides */
.hero-v3c .text-gray-900 {
    color: #ffffff !important;
}

.hero-v3c .text-gray-600 {
    color: rgba(255, 255, 255, 0.6) !important;
}

.hero-v3c .text-green-700 {
    color: #86efac !important;
}

.hero-v3c .bg-white\/50 {
    background: rgba(255, 255, 255, 0.06) !important;
}

.hero-v3c .border-white\/60 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.hero-v3c .text-gray-400 {
    color: rgba(255, 255, 255, 0.3) !important;
}

.hero-v3c-visual {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 3;
}

.hero-v3c-visual img {
    height: 95%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 80px rgba(0, 191, 99, 0.2)) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 3;
}

.hero-v3c-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 191, 99, 0.3), transparent);
    z-index: 2;
    pointer-events: none;
}

.hero-v3c-line-1 {
    width: 60%;
    top: 35%;
    left: 20%;
}

.hero-v3c-line-2 {
    width: 40%;
    bottom: 25%;
    right: 10%;
}


/* V3d: "Geometric Frame" — Wire-frame shapes surrounding the image */
.hero-v3d {
    background: linear-gradient(160deg, #ffffff 0%, #f8fdf5 50%, #f0fdf4 100%);
    position: relative;
}

.hero-v3d-frame {
    position: absolute;
    border: 2px solid;
    border-radius: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-v3d-frame-1 {
    width: 350px;
    height: 350px;
    top: 10%;
    right: 5%;
    border-color: rgba(0, 191, 99, 0.15);
    transform: rotate(15deg);
    animation: frameRotate 30s linear infinite;
}

.hero-v3d-frame-2 {
    width: 200px;
    height: 200px;
    bottom: 15%;
    right: 20%;
    border-color: rgba(167, 139, 250, 0.12);
    border-radius: 50%;
    animation: frameRotate 25s linear infinite reverse;
}

.hero-v3d-frame-3 {
    width: 120px;
    height: 120px;
    top: 30%;
    right: 35%;
    border-color: rgba(255, 222, 89, 0.15);
    transform: rotate(45deg);
    animation: frameRotate 20s linear infinite;
}

.hero-v3d-crosshair {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 1;
    pointer-events: none;
}

.hero-v3d-crosshair::before,
.hero-v3d-crosshair::after {
    content: "";
    position: absolute;
    background: rgba(0, 191, 99, 0.2);
}

.hero-v3d-crosshair::before {
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
}

.hero-v3d-crosshair::after {
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0;
}

.hero-v3d-crosshair-1 {
    top: 20%;
    right: 15%;
}

.hero-v3d-crosshair-2 {
    bottom: 25%;
    right: 40%;
}

@keyframes frameRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.hero-v3d-visual {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 2;
}

.hero-v3d-visual img {
    height: 95%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
    position: relative;
    z-index: 2;
}

/* ============================================================
   V3 MINIMAL VARIANTS — Calm, quiet background effects
   ============================================================ */

/* V3e: "Soft Glow" — Subtle radial green glow, nearly invisible */
.hero-v3e {
    background: #ffffff;
    position: relative;
}

.hero-v3e::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background:
        radial-gradient(ellipse at 75% 50%, rgba(0, 191, 99, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 80%, rgba(167, 139, 250, 0.03) 0%, transparent 40%);
    pointer-events: none;
}

/* V3f: "Dot Grid" — Faint repeating dot pattern */
.hero-v3f {
    background:
        radial-gradient(circle, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    background-color: #fefefe;
    position: relative;
}

.hero-v3f::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
}

/* V3g: "Soft Bands" — Very faint horizontal gradient bands */
.hero-v3g {
    background: linear-gradient(180deg,
            #ffffff 0%,
            #f9fdf6 25%,
            #ffffff 50%,
            #f6faf3 75%,
            #ffffff 100%);
    position: relative;
}

/* V3h: "Topo Lines" — Subtle topographic/contour line pattern */
.hero-v3h {
    background-color: #fcfdf9;
    position: relative;
}

.hero-v3h::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background:
        radial-gradient(ellipse at 70% 50%, transparent 30%, rgba(0, 191, 99, 0.02) 31%, transparent 32%),
        radial-gradient(ellipse at 70% 50%, transparent 45%, rgba(0, 191, 99, 0.02) 46%, transparent 47%),
        radial-gradient(ellipse at 70% 50%, transparent 60%, rgba(0, 191, 99, 0.015) 61%, transparent 62%),
        radial-gradient(ellipse at 70% 50%, transparent 75%, rgba(0, 191, 99, 0.01) 76%, transparent 77%);
    pointer-events: none;
}

/* Shared image container for minimal variants */
.hero-v3-minimal-visual {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.hero-v3-minimal-visual img {
    height: 95%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 25px rgba(0, 0, 0, 0.08));
}

/* V3i: "Grain" — Warm film-grain texture, slightly off-white */
.hero-v3i {
    background-color: #faf9f6;
    position: relative;
}

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

/* V3j: "Corner Accent" — Single bold green blob bottom-right */
.hero-v3j {
    background: #ffffff;
    position: relative;
}

.hero-v3j::before {
    content: "";
    position: absolute;
    bottom: -15%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 191, 99, 0.07) 0%, transparent 65%);
    pointer-events: none;
}

/* V3k: "Diagonal Sweep" — Soft diagonal gradient white → mint */
.hero-v3k {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 40%, #f3fdf6 70%, #ecfdf3 100%);
    position: relative;
}

/* V3l: "Cross Hatch" — Fine plus/cross pattern */
.hero-v3l {
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.018) 1px, transparent 1px);
    background-size: 48px 48px;
    position: relative;
}

.hero-v3l::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(255, 255, 255, 0.9) 100%);
    pointer-events: none;
}

/* ============================================================
   V3k ANIMATED VARIANTS — Slowly moving color gradients
   ============================================================ */

/* V3m: "Drifting Sweep" — Slow-moving diagonal gradient */
.hero-v3m {
    background: linear-gradient(135deg, #ffffff, #f0fdf4, #ecfce8, #f5f3ff, #ffffff);
    background-size: 300% 300%;
    animation: driftSweep 16s ease-in-out infinite;
    position: relative;
}

@keyframes driftSweep {
    0% {
        background-position: 0% 0%;
    }

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

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

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

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

/* V3n: "Aurora" — Subtle aurora bands (green / purple / gold hints) */
.hero-v3n {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-v3n::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(0, 191, 99, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 60%, rgba(167, 139, 250, 0.05) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 80%, rgba(255, 222, 89, 0.04) 0%, transparent 30%);
    animation: auroraShift 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes auroraShift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(5%, -3%) rotate(2deg);
    }

    66% {
        transform: translate(-3%, 5%) rotate(-1deg);
    }

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

/* V3o: "Breathing Blobs" — 2 soft color blobs that slowly pulse and drift */
.hero-v3o {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-v3o::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    top: -10%;
    right: -5%;
    background: radial-gradient(circle, rgba(0, 191, 99, 0.07) 0%, transparent 60%);
    border-radius: 50%;
    animation: blobBreathe1 14s ease-in-out infinite;
    pointer-events: none;
}

.hero-v3o::after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -15%;
    left: 10%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.05) 0%, transparent 60%);
    border-radius: 50%;
    animation: blobBreathe2 18s ease-in-out infinite;
    pointer-events: none;
}

@keyframes blobBreathe1 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.7;
    }

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

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

@keyframes blobBreathe2 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate(20px, -15px) scale(1.15);
        opacity: 0.8;
    }

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

/* V3p: "Gradient Mesh" — 3 moving focal color points */
.hero-v3p {
    background: #fefffe;
    position: relative;
    overflow: hidden;
}

.hero-v3p::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background:
        radial-gradient(ellipse at 25% 35%, rgba(0, 191, 99, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 65%, rgba(52, 211, 153, 0.05) 0%, transparent 45%),
        radial-gradient(ellipse at 60% 20%, rgba(167, 139, 250, 0.04) 0%, transparent 40%);
    animation: meshDrift 12s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes meshDrift {
    0% {
        background:
            radial-gradient(ellipse at 25% 35%, rgba(0, 191, 99, 0.06) 0%, transparent 50%),
            radial-gradient(ellipse at 75% 65%, rgba(52, 211, 153, 0.05) 0%, transparent 45%),
            radial-gradient(ellipse at 60% 20%, rgba(167, 139, 250, 0.04) 0%, transparent 40%);
    }

    100% {
        background:
            radial-gradient(ellipse at 35% 55%, rgba(0, 191, 99, 0.07) 0%, transparent 50%),
            radial-gradient(ellipse at 60% 40%, rgba(52, 211, 153, 0.06) 0%, transparent 45%),
            radial-gradient(ellipse at 40% 30%, rgba(167, 139, 250, 0.05) 0%, transparent 40%);
    }
}

/* ============================================================
   V3b VARIANTS — Diagonal accent panels, NO glyph
   ============================================================ */

/* V3q: "Wide Accent" — Wider diagonal green panel */
.hero-v3q {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-v3q::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 191, 99, 0.03) 0%, rgba(0, 191, 99, 0.07) 100%);
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
    pointer-events: none;
}

/* V3r: "Double Diagonal" — Two overlapping diagonal accents */
.hero-v3r {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-v3r::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 191, 99, 0.025) 0%, rgba(0, 191, 99, 0.06) 100%);
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 5% 100%);
    pointer-events: none;
}

.hero-v3r::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 35%;
    height: 100%;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.02) 0%, rgba(167, 139, 250, 0.04) 100%);
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 10% 100%);
    pointer-events: none;
}

/* V3s: "Curved Accent" — Soft curved green panel (organic feel) */
.hero-v3s {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-v3s::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -10%;
    width: 65%;
    height: 140%;
    background: radial-gradient(ellipse at 60% 50%, rgba(0, 191, 99, 0.06) 0%, rgba(0, 191, 99, 0.02) 60%, transparent 80%);
    border-radius: 0 0 0 60%;
    pointer-events: none;
}

/* V3t: "Corner Triangle" — Bottom-right triangle accent */
.hero-v3t {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-v3t::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 55%, rgba(0, 191, 99, 0.04) 75%, rgba(0, 191, 99, 0.07) 100%);
    pointer-events: none;
}

/* ============================================================
   FADED BLOB VARIANTS — Slowly moving soft blobs
   ============================================================ */

/* Shared blob base */
.hero-blob-base {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

/* V3u: "Triple Drift" — 3 green blobs drifting slowly */
.hero-v3u .blob-1 {
    width: 450px;
    height: 450px;
    top: -10%;
    right: 5%;
    background: radial-gradient(circle, rgba(0, 191, 99, 0.22) 0%, transparent 70%);
    animation: blobDrift1 18s ease-in-out infinite;
}

.hero-v3u .blob-2 {
    width: 350px;
    height: 350px;
    bottom: -5%;
    left: 15%;
    background: radial-gradient(circle, rgba(0, 191, 99, 0.18) 0%, transparent 70%);
    animation: blobDrift2 22s ease-in-out infinite;
}

.hero-v3u .blob-3 {
    width: 280px;
    height: 280px;
    top: 30%;
    left: 45%;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.15) 0%, transparent 70%);
    animation: blobDrift3 15s ease-in-out infinite;
}

/* V3v: "Orbit" — 2 large blobs green + purple, orbiting */
.hero-v3v .blob-1 {
    width: 550px;
    height: 550px;
    top: -15%;
    right: -5%;
    background: radial-gradient(circle, rgba(0, 191, 99, 0.20) 0%, transparent 65%);
    animation: blobOrbit1 25s ease-in-out infinite;
}

.hero-v3v .blob-2 {
    width: 500px;
    height: 500px;
    bottom: -20%;
    left: -5%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.15) 0%, transparent 65%);
    animation: blobOrbit2 25s ease-in-out infinite;
}

/* V3w: "Scatter" — 4 small blobs bouncing softly */
.hero-v3w .blob-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    right: 15%;
    background: radial-gradient(circle, rgba(0, 191, 99, 0.25) 0%, transparent 70%);
    animation: blobDrift1 16s ease-in-out infinite;
}

.hero-v3w .blob-2 {
    width: 180px;
    height: 180px;
    bottom: 15%;
    left: 10%;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.20) 0%, transparent 70%);
    animation: blobDrift2 20s ease-in-out infinite;
}

.hero-v3w .blob-3 {
    width: 160px;
    height: 160px;
    top: 50%;
    left: 40%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.15) 0%, transparent 70%);
    animation: blobDrift3 14s ease-in-out infinite;
}

.hero-v3w .blob-4 {
    width: 220px;
    height: 220px;
    top: 5%;
    left: 25%;
    background: radial-gradient(circle, rgba(255, 222, 89, 0.15) 0%, transparent 70%);
    animation: blobOrbit1 24s ease-in-out infinite;
}

/* V3x: "Morph" — 2 large blobs with morphing border-radius */
.hero-v3x .blob-1 {
    width: 900px;
    height: 900px;
    top: -25%;
    right: -15%;
    background: radial-gradient(circle, rgba(0, 191, 99, 0.22) 0%, transparent 65%);
    animation: blobMorph1 20s ease-in-out infinite;
}

.hero-v3x .blob-2 {
    width: 800px;
    height: 800px;
    bottom: -20%;
    left: -10%;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.18) 0%, transparent 65%);
    animation: blobMorph2 24s ease-in-out infinite;
}

/* Blob keyframes */
@keyframes blobDrift1 {
    0% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(-25px, 15px);
    }

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

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

@keyframes blobDrift2 {
    0% {
        transform: translate(0, 0);
    }

    33% {
        transform: translate(20px, -25px);
    }

    66% {
        transform: translate(-15px, 10px);
    }

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

@keyframes blobDrift3 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-20px, -15px);
    }

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

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

    25% {
        transform: translate(-40px, 20px) scale(1.05);
    }

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

    75% {
        transform: translate(20px, 10px) scale(1.05);
    }

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

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

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

    50% {
        transform: translate(15px, -35px) scale(1.05);
    }

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

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

@keyframes blobMorph1 {
    0% {
        border-radius: 50%;
        transform: translate(0, 0) scale(1);
    }

    25% {
        border-radius: 40% 60% 55% 45%;
        transform: translate(-20px, 15px) scale(1.03);
    }

    50% {
        border-radius: 55% 45% 40% 60%;
        transform: translate(-10px, 30px) scale(0.97);
    }

    75% {
        border-radius: 45% 55% 60% 40%;
        transform: translate(15px, 10px) scale(1.02);
    }

    100% {
        border-radius: 50%;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes blobMorph2 {
    0% {
        border-radius: 50%;
        transform: translate(0, 0) scale(1);
    }

    25% {
        border-radius: 60% 40% 45% 55%;
        transform: translate(15px, -20px) scale(0.97);
    }

    50% {
        border-radius: 45% 55% 60% 40%;
        transform: translate(25px, -10px) scale(1.03);
    }

    75% {
        border-radius: 55% 45% 40% 60%;
        transform: translate(-10px, -25px) scale(0.98);
    }

    100% {
        border-radius: 50%;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes blobMorph3 {
    0% {
        border-radius: 50%;
        transform: translate(0, 0) scale(1);
    }

    20% {
        border-radius: 45% 55% 50% 50%;
        transform: translate(25px, -10px) scale(1.04);
    }

    40% {
        border-radius: 50% 45% 55% 50%;
        transform: translate(10px, 20px) scale(0.96);
    }

    60% {
        border-radius: 55% 50% 45% 55%;
        transform: translate(-15px, 15px) scale(1.03);
    }

    80% {
        border-radius: 50% 55% 50% 45%;
        transform: translate(-20px, -10px) scale(0.97);
    }

    100% {
        border-radius: 50%;
        transform: translate(0, 0) scale(1);
    }
}

/* Hero Blob Visibility */
/* Hero Blob Visibility */
.hero-blob {
    position: absolute;
    filter: blur(40px);
    /* Reduced blur for more definition */
    opacity: 0.9;
    /* Higher opacity for brightness */
    border-radius: 50%;
    z-index: 0;
    animation: blobFloatLarge 12s infinite alternate;
}

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

    100% {
        transform: translate(20px, -20px) scale(1.3);
        /* Reduced scale */
    }
}

/* Blob Variations with Radial Gradients */
.blob-purple {
    background: radial-gradient(circle, #E0CFFC 0%, rgba(224, 207, 252, 0) 70%);
}

.blob-yellow {
    background: radial-gradient(circle, #FEF9C3 0%, rgba(254, 249, 195, 0) 70%);
}

.blob-green {
    background: radial-gradient(circle, #bbf7d0 0%, rgba(187, 247, 208, 0) 70%);
}

/* green-200 */
.blob-blue {
    background: radial-gradient(circle, #bfdbfe 0%, rgba(191, 219, 254, 0) 70%);
}

/* blue-200 */
.blob-pink {
    background: radial-gradient(circle, #fbcfe8 0%, rgba(251, 207, 232, 0) 70%);
}

/* pink-200 */

/* Blob Positions */
.blob-top-right {
    top: -10%;
    right: -5%;
}

.blob-top-left {
    top: -10%;
    left: -5%;
}

.blob-bottom-right {
    bottom: -10%;
    right: -5%;
}

.blob-bottom-left {
    bottom: -10%;
    left: -5%;
}

.blob-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}