:root {
      --brand-pink:   #f93a99;
      --brand-purple: #a200ff;
      --brand-blue:   #107eff;
      --brand-cyan:   #00e5ff;
      --ink:       #0b0f19;
      --ink-mid:   #12182b;
      --ink-light: #1a223d;
      --ink-panel: rgba(0, 0, 0, 0.25);
      --brand-pink-dim:  rgba(249, 58, 153, 0.13);
      --brand-pink-line: rgba(249, 58, 153, 0.35);
      --brand-cyan-soft: rgba(0, 229, 255, 0.18);
      --brand-blue-soft: rgba(16, 126, 255, 0.14);
      --text-main:    #ffffff;
      --text-muted:   rgba(255, 255, 255, 0.75);
      --mid:          rgba(255, 255, 255, 0.85);
      --serif: 'Playfair Display', Georgia, serif;
    }
    .carousel-container {
        position: relative;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }
    .carousel-viewport {
        overflow: hidden;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    .carousel-track {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        align-items: stretch;
    }
    .carousel-slide {
        min-width: 100%;
        box-sizing: border-box;
        padding: 4px;
    }
    .carousel-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 6px;
    }
    
    .carousel-btn {
        position: absolute;
        top: 75%;
        transform: translateY(-50%);
        background: rgba(11, 15, 25, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: var(--text-muted);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        transition: all 0.2s ease;
        z-index: 60;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }

    #btn-prev-article { left: -20px; }
    #btn-next-article { right: -20px; }
    
    .carousel-btn:hover {
        background: var(--brand-pink);
        color: #fff;
        border-color: var(--brand-pink);
        transform: translateY(-50%) scale(1.1);
    }
    .carousel-dots {
        display: flex;
        gap: 8px;
    }
    .carousel-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .carousel-dots .dot.active {
        background: var(--brand-pink);
        transform: scale(1.3);
    }
    /* --- CAROUSEL ARTICLE LABELS --- */
    .article-image > div {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: rgba(0, 0, 0, 0.15) !important;
    }

    html {
        background-color: var(--ink);
        scroll-behavior: smooth;
    }
    body {
        margin: 0;
        padding: 0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        color: var(--text-main);
        background-color: transparent;
        overflow-x: hidden;
    }
    .abstract-bg {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        z-index: -3;
        background-color: #0b0f19;
        overflow: hidden;
    }
    .blob {
        position: absolute;
        filter: blur(100px);
        border-radius: 50%;
        opacity: 0.85;
        
        /* 🚨 THE FIX 1: Force the browser to allocate dedicated GPU memory to these heavy blurs */
        will-change: transform;
        
        /* Speed it up just a touch */
        animation: drift 15s infinite alternate ease-in-out;
    }

    .blob.purple {
        background: var(--brand-purple);
        width: 65vw; height: 65vw;
        top: -15vw; left: -10vw;
        animation-delay: 0s;
    }
    .blob.pink {
        background: var(--brand-pink);
        width: 55vw; height: 55vw;
        bottom: -10vw; left: 20vw;
        animation-delay: -5s;
    }
    .blob.blue {
        background: var(--brand-blue);
        width: 70vw; height: 70vw;
        top: 5vw; right: -20vw;
        animation-delay: -10s;
    }
    
    /* 🚨 THE FIX 2: Use translate3d for hardware acceleration, and triple the travel distance! */
    @keyframes drift {
        0% { transform: translate3d(0, 0, 0) scale(1); }
        33% { transform: translate3d(12vw, 15vh, 0) scale(1.08); }
        66% { transform: translate3d(-10vw, 20vh, 0) scale(0.92); }
        100% { transform: translate3d(8vw, -12vh, 0) scale(1.1); }
    }
    .mesh-dark-fade {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        z-index: -2;
        background: linear-gradient(180deg, rgba(11, 15, 25, 0) 20%, #0b0f19 100%);
        pointer-events: none;
    }
    nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px 64px;
        position: relative;
        z-index: 10;
    }
    #nav-request.scrolled-cta {
        position: fixed;
        top: 24px;
        right: 64px;
        z-index: 199999 !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.6);
        animation: dropIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    }

    @keyframes dropIn {
        from { transform: translateY(-50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    
    .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 24px;
        font-weight: 700;
        letter-spacing: -0.5px;
    }
    .nav-links {
        display: flex;
        align-items: center;
        gap: 32px;
    }
    .nav-links a {
        color: var(--text-main);
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        opacity: 0.9;
        transition: opacity 0.2s;
    }
    .nav-links a:hover { opacity: 1; }
    
    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: rgba(11, 15, 25, 0.95);
        min-width: 240px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 8px 0;
        z-index: 20;
        top: 100%;
        left: -10px;
        margin-top: 15px;
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    .dropdown-content a {
        padding: 12px 24px;
        display: block;
        font-size: 14px;
        opacity: 0.8;
        transition: all 0.2s ease;
    }
    .dropdown-content a:hover {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.05);
        color: var(--brand-cyan);
        padding-left: 28px;
    }
    .dropdown:hover .dropdown-content {
        display: block;
        animation: fadeIn 0.2s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .btn-nav-primary {
        background: #ffffff;
        color: #000000;
        border: none;
        border-radius: 6px;
        padding: 10px 20px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s ease;
    }
    .btn-nav-primary:hover { transform: scale(1.02); }
    .hero-container {
        display: flex;
        position: relative;
        z-index: 10;
        max-width: 1200px;
        margin: 0 auto;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 90px 64px 120px 0;
        box-sizing: border-box;
    }

    .highlight-teal {
        color: var(--brand-cyan);
        font-weight: 500;
    }
        
    }
    .hero-container h1 {
        font-size: 84px;
        font-weight: 600;
        line-height: 1.05;
        letter-spacing: -2px;
        margin: 0 0 24px 0;
        max-width: 950px;
        color: rgba(255, 255, 255, 0.85);
        min-height: 180px;
    }
    .typing-cursor {
        display: inline-block;
        width: 6px;
        height: 0.9em;
        background-color: var(--brand-pink);
        margin-left: 8px;
        vertical-align: baseline;
        animation: blink 1s step-end infinite;
    }
    @keyframes blink {
        50% { opacity: 0; }
    }
    .text-glow {
        background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.6) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .text-gradient {
        background: linear-gradient(90deg, #ffd1ff 0%, #b4b6ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .hero-container p {
        font-size: 20px;
        color: var(--text-muted);
        line-height: 1.5;
        max-width: 900px;
        margin: 0 0 48px 0;
        font-weight: 400;
        
     
    }
    .input-group {
        display: flex;
        align-items: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 8px;
        padding: 6px;
        width: 100%;
        max-width: 480px;
        backdrop-filter: blur(10px);
        transition: border-color 0.3s ease, background 0.3s ease;
    }
    .input-group:focus-within {
        border-color: rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.12);
    }
    .input-group input {
        flex: 1;
        background: transparent;
        border: none;
        padding: 14px 20px;
        color: #ffffff;
        font-size: 16px;
        outline: none;
    }
    .input-group input::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }
    .btn-submit {
        background: #ffffff;
        color: #0b0f19;
        border: none;
        border-radius: 6px;
        padding: 14px 24px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: opacity 0.2s;
    }
    .btn-submit:hover { opacity: 0.9; }
    .bottom-tabs {
        position: fixed;
        bottom: 30px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 48px;
        z-index: 50;
        transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
    }

    .bottom-tabs.frosted {
        opacity: 0.15;
        filter: blur(4px);
        pointer-events: none;
        transform: translateY(4px);
        transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
    }
    .bottom-tabs a {
        color: var(--text-muted);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        padding-bottom: 8px;
        transition: color 0.2s;
    }
    .bottom-tabs a:hover { color: #ffffff; }
    .bottom-tabs a.active {
        color: #ffffff;
        border-bottom: 2px solid;
    }
    .modal-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(11, 15, 25, 0.6);
        backdrop-filter: blur(8px);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    .modal-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }
    .modal-glass {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 40px;
        width: 100%;
        max-width: 440px;
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.1);
        backdrop-filter: blur(24px);
        position: relative;
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), max-width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .modal-glass::-webkit-scrollbar {
        width: 6px;
    }
    .modal-glass::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
    }
    .modal-overlay.hidden .modal-glass {
        transform: translateY(20px);
    }
    .btn-close {
        position: absolute;
        top: 20px; right: 20px;
        background: none; border: none;
        color: var(--text-muted);
        font-size: 28px;
        cursor: pointer;
        line-height: 1;
        transition: color 0.2s;
        z-index: 10;
    }
    .btn-close:hover { color: #ffffff; }
    
    .btn-back {
        position: absolute;
        top: 20px; left: 20px;
        background: none; border: none;
        color: var(--text-muted);
        cursor: pointer;
        transition: color 0.2s;
        z-index: 10;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn-back:hover { color: #ffffff; }
    .btn-back.hidden { display: none !important; }

    .modal-header h2 {
        margin: 0 0 8px 0;
        font-size: 24px;
        font-weight: 600;
    }
    .modal-header p {
        margin: 0 0 16px 0;
        font-size: 14px;
        color: var(--text-muted);
    }

    .input-stack {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
    }
    .input-stack.hidden {
        display: none;
    }
    .input-stack label {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-muted);
    }
    .input-stack input {
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 12px 16px;
        color: #ffffff;
        font-size: 15px;
        outline: none;
        transition: border-color 0.2s, background 0.2s;
    }
    .input-stack input:focus {
        border-color: var(--brand-blue);
        background: rgba(0, 0, 0, 0.4);
    }

    .auth-submit {
        width: 100%;
        margin-top: 8px;
        padding: 14px;
        background: #ffffff;
        color: #0b0f19;
    }
    .auth-submit:hover {
        background: #f0f0f0;
    }

    .modal-footer {
        text-align: center;
        margin-top: 24px;
    }
    .forgot-link {
        color: var(--text-muted);
        text-decoration: none;
        font-size: 13px;
        transition: color 0.2s;
    }
    .forgot-link:hover { color: #ffffff; }
    
    .genre-matrix {
        gap: 0.5rem !important;
        margin-bottom: 1rem !important;
    }

    .genre-pill {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
      
    .wizard-overflow {
        overflow: hidden;
        width: 100%;
        transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .wizard-track {
        display: flex;
        width: 400%;
        align-items: flex-start;
        transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }
    .wizard-step {
        width: 25%;
        flex-shrink: 0;
        padding: 0 10px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .step-payment-a { max-width: 480px; }
    .step-payment-b { max-width: 480px; }

    .checkout-bullet {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--text-main);
        font-size: 15px;
        margin-bottom: 12px;
    }
    .checkout-bullet svg {
        color: #22c55e;
        flex-shrink: 0;
    }
    
    .select-box {
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 16px;
        margin-bottom: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 16px;
        transition: all 0.2s ease;
        background: rgba(0,0,0,0.2);
    }
    .select-box.active {
        border-color: var(--brand-pink);
        background: rgba(249, 58, 153, 0.05);
    }
    
    .radio-circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid rgba(255,255,255,0.4);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .select-box.active .radio-circle {
        border-color: var(--brand-pink);
    }
    .select-box.active .radio-circle::after {
        content: '';
        width: 10px;
        height: 10px;
        background: var(--brand-pink);
        border-radius: 50%;
    }

    .drawer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, margin-top 0.3s ease;
    }
    .drawer.open {
        max-height: 400px;
        margin-top: 16px;
    }

    #wizard-glass {
        transition: max-width 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s ease;
    }
    .step-account { max-width: 440px; }
    .step-plans { max-width: 1050px; }
    .step-payment { max-width: 480px; }

    .social-auth, .payment-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
    }
    .btn-social, .btn-pay {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        padding: 14px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: opacity 0.2s;
    }
    .btn-social:hover, .btn-pay:hover { opacity: 0.85; }
    
    .btn-social.google { background: #ffffff; color: #000000; }
    .btn-social.apple { background: #000000; color: #ffffff; border: 1px solid rgba(255,255,255,0.2); }
    .btn-social.facebook { background: #1877F2; color: #ffffff; border: none; }
    
    .btn-pay.apple-pay { background: #000000; color: #ffffff; border: 1px solid rgba(255,255,255,0.2); }
    .btn-pay.paypal { background: #FFC439; color: #003087; }

    .auth-divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin-bottom: 24px;
    }
    .auth-divider::before, .auth-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .auth-divider span {
        padding: 0 16px;
        color: var(--text-muted);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-top: 32px;
        width: 100%;
    }

    .pricing-card {
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 32px 24px;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }
    
    .pricing-card:hover {
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-4px);
    }

    .pricing-card.featured {
        background: linear-gradient(180deg, rgba(249, 58, 153, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
        border-color: var(--brand-pink);
        box-shadow: 0 8px 32px rgba(249, 58, 153, 0.15);
        transform: scale(1.05);
        z-index: 2;
    }
    .pricing-card.featured:hover {
        transform: scale(1.05) translateY(-4px);
        box-shadow: 0 12px 40px rgba(249, 58, 153, 0.25);
    }

    .badge {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--brand-pink);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .pricing-card h3 {
        margin: 0 0 16px 0;
        font-size: 20px;
        font-weight: 500;
        color: var(--text-muted);
    }

    .price {
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 24px;
    }
    .price span {
        font-size: 16px;
        font-weight: 400;
        color: var(--text-muted);
    }

    .feature-list {
        list-style: none;
        padding: 0;
        margin: 0 0 32px 0;
        flex-grow: 1;
        text-align: left;
    }
    .feature-list li {
        font-size: 14px;
        color: var(--text-muted);
        margin-bottom: 12px;
        line-height: 1.4;
    }

    .btn-plan {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 14px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        width: 100%;
    }
    .btn-plan:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    .btn-plan.primary {
        background: var(--brand-pink);
        border-color: var(--brand-pink);
    }
    .btn-plan.primary:hover {
        background: #ff52a8;
        border-color: #ff52a8;
    }
      
    .btn-plan.gradient {
        background: linear-gradient(90deg, var(--brand-pink) 0%, var(--brand-purple) 100%);
        border: none;
        color: #ffffff;
    }
    .btn-plan.gradient:hover {
        background: linear-gradient(90deg, #ff52a8 0%, #b833ff 100%);
        box-shadow: 0 4px 15px rgba(249, 58, 153, 0.4);
    }

    /* =========================================
       STORY GENOME SECTION
       ========================================= */
    .story-genome-section {
        position: relative;
        z-index: 1;
        width: 100vw;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 64px 64px 160px 64px;
        box-sizing: border-box;
    }

    .genome-video-bg {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 2;
        opacity: 1;
        pointer-events: none;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
    }

    .genome-content {
        position: relative;
        z-index: 10;
        max-width: 1000px;
        text-align: center;
        padding: 0 20px;
        transform: translateY(-100px);
    }

    .genome-content h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(48px, 7.5vw, 96px);
        font-weight: 700;
        line-height: 1.02;
        letter-spacing: -0.01em;
        margin-bottom: 32px;
        color: #ffffff;
    }

    .genome-content h2 span.gradient-text {
        background: linear-gradient(90deg, var(--brand-pink) 0%, var(--brand-purple) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-style: italic;
    }

    .genome-content p {
        font-family: 'DM Sans', sans-serif;
        font-size: clamp(16px, 1.8vw, 19px);
        font-weight: 300;
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.75;
        max-width: 580px;
        margin: 0 auto 56px auto;
        letter-spacing: 0.01em;
    }
    .genome-content p strong {
        font-weight: 700;
        color: #ffffff;
    }
    .genome-stats {
        display: flex;
        justify-content: center;
        gap: 64px;
        flex-wrap: wrap;
    }

    .stat-item {
        text-align: center;
        padding: 0 20px;
    }

    .stat-val {
        font-family: var(--font-main);
        font-size: clamp(24px, 3vw, 36px);
        font-weight: 700;
        color: var(--brand-cyan);
        display: block;
        margin-bottom: -4px;
        line-height: 1;
    }

    .stat-number {
        font-size: 48px;
        font-weight: 700;
        color: var(--text-main);
        font-variant-numeric: tabular-nums;
    }

    .stat-label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: rgba(255,255,255,0.5);
    }

    /* =========================================
       RESPONSIVE DESIGN (TABLET & MOBILE)
       ========================================= */

    .genre-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-bottom: 16px;
    }
    
    .genre-pill {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 30px;
        padding: 10px 20px;
        color: var(--text-muted);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .genre-pill:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.3);
    }
    
    .genre-pill.active {
        background: rgba(249, 58, 153, 0.15);
        color: #ffffff;
        border-color: var(--brand-pink);
        box-shadow: 0 0 15px rgba(249, 58, 153, 0.3);
    }

    #app-dashboard.hidden {
        display: none !important;
    }

    @media (max-width: 1024px) {
        nav { padding: 24px 32px; }
        .hero-container { padding: 100px 32px 32px 32px; }
        .hero-container h1 { font-size: 64px; min-height: 140px; }
        .bottom-tabs { gap: 24px; }
    }
    
    /* =========================================
       STORY GENOME SECTIONS CSS
       ========================================= */
    .reveal { opacity:0; transform:translateY(32px); transition:opacity 0.85s cubic-bezier(0.22,1,0.36,1), transform 0.85s cubic-bezier(0.22,1,0.36,1); }
    .reveal.visible { opacity:1; transform:translateY(0); }
    .d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.34s}.d4{transition-delay:.46s}.d5{transition-delay:.58s}

    #proof, #micro-stats {
        background: transparent;
        padding: 12px 40px;
        backdrop-filter: blur(50px);
        position: relative;
        z-index: 10;
        margin-top: 120px;
    }

    .proof-inner { max-width:900px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
    .proof-stat { text-align:center; }
    .proof-num { font-family:var(--serif); font-size:32px; font-weight:400; color:var(--brand-cyan); line-height:1; margin-bottom:4px; }
    .proof-label { font-size:12px; font-weight:500; color:var(--text-muted); letter-spacing:.04em; text-transform: uppercase; }
    .proof-div { width:1px; height:36px; background:rgba(255,255,255,0.09); }

    .sec { padding:112px 40px; max-width:1100px; margin:0 auto; position: relative; z-index: 10; background: transparent;}
    #problem { padding-top: 35px; padding-bottom: 0px; margin-bottom: 100px;max-width: 80%; width: 80%;}
    .sec-label { font-size:11px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--brand-cyan); margin-bottom:0px; }
    .sec-title { font-family:var(--serif); font-size:clamp(30px,3.8vw,50px); font-weight:400; line-height:1.12; margin-top:0; margin-bottom:22px; }
    .sec-body { font-size:18px; color:var(--mid); line-height:1.6; margin-bottom:0px; }
    #solution {
        padding-top: 40px;
        padding-bottom: 0;
        margin-bottom: 200px;
        max-width: 90%;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        z-index: 10;
    }
    .solution-list {
        display: grid;
        /* Force two columns, perfectly sized to the text */
        grid-template-columns: auto auto; 
        /* Force exactly 3 rows, so it flows top-to-bottom automatically */
        grid-template-rows: repeat(3, auto); 
        grid-auto-flow: column;
        
        /* Perfectly even spacing */
        column-gap: 48px;
        row-gap: 16px;
        
        margin-top: 12px;
        list-style: none;
        padding: 0;
    }
    
    .solution-item {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: #ffffff;
        line-height: 1.6;
        display: flex;
        align-items: center; /* Centers the bullet point perfectly with the text */
        gap: 10px;
        
        /* Forces the text to stay on a single line with no overflow */
        white-space: nowrap; 
    }
    
    .solution-item::before {
        content: '•';
        color: var(--brand-pink);
        font-size: 16px;
        line-height: 1;
    }

    .logo-scroll-wrapper {
        display: flex;
        gap: 16px;
        height: 475px;
        width: calc(100% + 240px);
        max-width: 820px;
        margin: 0 -120px;
        padding: 0 120px;
        box-sizing: border-box;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    }
    .logo-scroll-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: visible;
        -webkit-clip-path: inset(-100px -300px -100px -300px);
        clip-path: inset(-100px -300px -100px -300px);
    }
    .logo-scroll-track {
        display: flex;
        flex-direction: column;
        will-change: transform;
    }

    .track-speed-1 { animation: scroll-vertical 40s linear infinite; }
    .track-speed-2 { animation: scroll-vertical 50s linear infinite; }
    .track-speed-3 { animation: scroll-vertical 50s linear infinite; }
    .track-speed-4 { animation: scroll-vertical 50s linear infinite; }
    .track-speed-5 { animation: scroll-vertical 43s linear infinite; }

    .logo-scroll-column:hover .logo-scroll-track {
        animation-play-state: paused;
    }

    @keyframes scroll-vertical {
        0% { transform: translateY(-50%); }
        100% { transform: translateY(0); }
    }

    .app-logo-card {
        position: relative;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        height: 80px;
        width: 100%;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        flex-shrink: 0;
        padding: 12px;
        box-sizing: border-box;
        z-index: 2;
    }

    .app-logo-card:hover,
    .app-logo-card.show-factoid {
        z-index: 1000;
    }

    .app-logo-card img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        opacity: 0.8;
        transition: all 0.3s ease;
    }

    .app-logo-card:hover img {
        opacity: 1;
    }

    .app-logo-card.has-factoid {
        background: rgba(110, 86, 255, 0.15);
        border: 2px solid rgba(110, 86, 255, 0.7);
        box-shadow: inset 0 0 30px rgba(110, 86, 255, 0.6), 0 0 10px rgba(110, 86, 255, 0.4);
        cursor: pointer;
    }

    @keyframes pump {
        0%, 100% { transform: scale(1.1); }
        50% { transform: scale(1.18); }
    }

    .app-logo-card.has-factoid img {
        animation: pump 2s infinite ease-in-out;
    }

    .app-logo-card.has-factoid:hover,
    .app-logo-card.has-factoid.show-factoid {
        background: rgba(110, 86, 255, 0.3);
        border-color: rgba(110, 86, 255, 1);
        box-shadow: inset 0 0 50px rgba(110, 86, 255, 0.9), 0 0 25px rgba(110, 86, 255, 0.7);
    }

    .app-logo-card.has-factoid:hover img {
        animation-play-state: paused;
        transform: scale(1.25);
    }

    .app-name-tooltip {
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background: rgba(11, 15, 25, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        pointer-events: none;
        z-index: 20;
    }

    .app-logo-card:hover .app-name-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .app-logo-card.show-factoid .app-name-tooltip {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .factoid-popup {
        position: absolute;
        left: 110%;
        top: 50%;
        transform: translateY(-50%) translateX(10px);
        background: rgba(11, 15, 25, 0.98);
        border: 1px solid var(--brand-pink);
        padding: 14px 18px;
        border-radius: 8px;
        width: 220px;
        font-size: 13px;
        color: #fff;
        line-height: 1.5;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.6);
        z-index: 100;
        font-family: system-ui, -apple-system, sans-serif;
        text-align: left;
        pointer-events: auto;
    }

    .factoid-popup::before {
        content: '';
        position: absolute;
        left: -6px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
        background: rgba(11, 15, 25, 0.98);
        border-bottom: 1px solid var(--brand-pink);
        border-left: 1px solid var(--brand-pink);
    }

    .app-logo-card.show-factoid .factoid-popup {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
    }

    .app-logo-card.pop-left .factoid-popup {
        left: auto;
        right: 110%;
        transform: translateY(-50%) translateX(-10px);
    }

    .app-logo-card.pop-left .factoid-popup::before {
        left: auto;
        right: -6px;
        border-bottom: none;
        border-left: none;
        border-top: 1px solid var(--brand-pink);
        border-right: 1px solid var(--brand-pink);
    }

    .app-logo-card.pop-left.show-factoid .factoid-popup {
        transform: translateY(-50%) translateX(0);
    }

    #attrs {
        position: relative;
        z-index: 10;
        background: transparent;
        width: 100vw;
        height: 80vh;
        padding: 0 50px 100px 50px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        scroll-margin-top: 40px;
        margin-bottom: 80px;
    }
    
    .attrs-inner {
        width: 100%;
        max-width: 1200px;
        height: 90vh;
        display: flex;
        flex-direction: column;
        z-index: 2;
        margin-top: -35px;
    }

    .network-container {
        position: relative;
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        background: rgba(11, 15, 25, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0,0,0,0.3), inset 0 0 40px rgba(0,0,0,0.5);
    }

    .attrs-head {
        text-align: center;
        padding: 24px 40px 16px 40px;
        flex-shrink: 0;
        z-index: 10;
    }
    .attrs-head .sec-label {
        margin-bottom: 8px;
    }
    .attrs-head .sec-title {
        font-size: clamp(32px, 4vw, 32px);
        margin-bottom: 12px !important;
        line-height: 1.1;
    }
    .attrs-head .sec-body {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 0 !important;
    }

    .canvas-wrapper {
        position: relative;
        width: 100%;
        flex: 1;
        min-height: 0;
        z-index: 1;
    }

    #network-canvas {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .prob-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 100px;
        align-items: center;
    }
    .problem-pills { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
    .problem-pill { background:var(--brand-blue-soft); border:1px solid rgba(16,126,255,0.18); border-radius:8px; padding:16px 20px; }
    .prob-pill-title { font-size:14px; font-weight:600; color:#4a9dff; margin-bottom:50px; }
    .prob-pill-body { font-size:13px; color:var(--mid); line-height:1.55; }

    .ep-wrap { position:relative; height:380px; }
    #ep-canvas { width:100%; height:100%; border-radius:12px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); }
    .ep-label { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }

    #engine { padding:112px 40px; background:linear-gradient(180deg, var(--ink) 0%, var(--ink-mid) 100%); position: relative; z-index: 10;}
    .engine-inner { max-width:1100px; margin:0 auto; }
    .engine-head { text-align:center; margin-bottom:64px; }
    .engine-sub { font-size:18px; color:var(--mid); max-width:580px; margin:0 auto; line-height:1.6; }
    .genome-pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; border-radius:12px; }
    .pillar { background:var(--ink-panel); border: 1px solid rgba(255,255,255,0.05); border-radius:12px; padding:44px 36px; transition:all .3s ease; }
    .pillar:hover { background:rgba(255,255,255,0.06); border-color: var(--brand-purple); transform: translateY(-4px); }
    .pillar-icon { font-size:28px; margin-bottom:18px; }
    .pillar-title { font-family:var(--serif); font-size:24px; font-weight:400; line-height:1.2; margin-bottom:10px; }
    .pillar-body { font-size:15px; color:var(--mid); line-height:1.6; }
    .pillar-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
    .p-tag { font-size:11px; font-weight:500; color:var(--text-main); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:4px; padding:4px 10px; letter-spacing:.03em; }

    /* WRITING ASSISTANT DEMO & CAROUSEL MECHANICS */
    #assistant { padding:10px 40px 140px 40px; background: transparent; position: relative; z-index: 10;}
    .assist-inner { max-width:1200px; margin:0 auto; }
    .assist-head { text-align:center; margin-bottom:15px; }
    .assist-sub { font-size:18px; color:var(--mid); max-width:1100px; margin:0 auto; line-height:1.6; }
    
    #ui-carousel-wrapper { position: relative; max-width: 860px; margin: 0 auto; }
    #ui-carousel-container {
        display: grid; 
        grid-template-columns: 1fr; 
        width: 100%; 
        max-width: 820px; 
        height: 500px; /* Reduced from 550px to prevent bottom overlap */
        margin: 0 auto; 
        border-radius: 14px; 
        position: relative; 
    }
    .genome-ui-slide { grid-row: 1 / 2; grid-column: 1 / 2; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(15px); transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s; margin: 0; display: flex; flex-direction: column; height: 100%; }
    .genome-ui-slide.active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; transform: translateY(0); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s; }

    .writer-ui { background:var(--ink-light); border:1px solid rgba(255,255,255,0.07); border-radius:14px; overflow:hidden; max-width:820px; margin:0 auto; box-shadow: 0 20px 40px rgba(0,0,0,0.5); display: flex; flex-direction: column; height: 100%; }
    .ui-topbar { background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.06); padding:10px 16px; display:flex; align-items:center; justify-content:space-between; }
    .tb-dot { width:12px; height:12px; border-radius:50%; }
    .ui-title-bar { font-size:13px; font-weight:500; color:var(--mid); letter-spacing:.04em; }
    .ui-genome-badge { display:inline-flex; align-items:center; gap:6px; background:var(--brand-pink-dim); border:1px solid var(--brand-pink-line); border-radius:4px; padding:4px 10px; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-pink); }
    
    .ui-body { display:grid; grid-template-columns:1fr 280px; flex: 1; min-height: 0; }
    
    /* --- STRICT EDITOR STACKING --- */
    .ui-editor { 
        padding: 12px 16px !important; 
        border-right: 1px solid rgba(255,255,255,0.05); 
        background: var(--ink); 
        display: flex !important; 
        flex-direction: column !important; 
        justify-content: flex-start !important; 
        overflow-y: auto; /* Safety net: allows scrolling if text gets too long */
    }
    
    .ui-ep-label { font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-cyan); margin-bottom:12px; padding:4px 10px; flex: none !important; }
    
    .ui-beat { margin-bottom:12px !important; flex: none !important; }
    .beat-header { display:flex; align-items:left; gap:16px; margin-bottom:2px; }
    .beat-tag { font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; border-radius:4px; padding: 4px 12px; text-align: left; }
    .beat-hook { background:rgba(249,58,153,0.15); color:var(--brand-pink); }
    .beat-beat { background:rgba(0,229,255,0.15); color:var(--brand-cyan); }
    .beat-cliff { background:rgba(16,126,255,0.15); color:var(--brand-blue); }
    .beat-content { font-size:13px; color:var(--mid); line-height:1.35; margin-bottom:6px; letter-spacing:.06em }
    .beat-content strong { color:var(--text-main); font-weight:600; }
    .cursor { display:inline-block; width:2px; height:15px; background:var(--brand-pink); margin-left:2px; animation:cur 1.1s ease-in-out infinite; vertical-align:middle; }
    @keyframes cur { 0%,100%{opacity:1} 50%{opacity:0} }
    
    /* --- STRICT SIDEBAR PINNING --- */
    .ui-sidebar { 
        padding: 12px 16px !important; 
        background: rgba(0,0,0,0.1); 
        display: flex !important; 
        flex-direction: column !important; 
        justify-content: flex-start !important; 
        height: 100% !important; 
        overflow-y: auto; /* Safety net for smaller screens */
    }
    .sidebar-section { margin-bottom:0 !important; flex: none !important; }
    
    .ui-sidebar .sidebar-section:nth-child(1) { margin-top: 0 !important; }
    .ui-sidebar .sidebar-section:nth-child(2) { margin-top: 40px !important; }
    .ui-sidebar .sidebar-section:nth-child(3),
    .ui-sidebar .sidebar-section[style] { margin-top: auto !important; margin-bottom: 20px !important; height: 110px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; }
    
    .ui-sidebar .sidebar-section:nth-child(2) > div { margin-top: 8px !important; }
    .ui-sidebar .sidebar-section:nth-child(2) > div > div:first-child { margin-bottom: 2px !important; }
    
    .sidebar-label { font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); margin-top:4px; margin-bottom:4px; }
    .sidebar-item { font-size:11px; color:var(--mid); padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04); display:flex; justify-content:space-between; align-items:center; }
    .sidebar-item:last-child { border-bottom:none; }
    .sidebar-val { font-size:11px; color:var(--text-main); font-weight:600; }
    
    .genome-score { display:flex; align-items:center; gap:8px !important; margin-top: 2px !important; }
    .score-bar { flex:1; height:4px !important; background:rgba(255,255,255,0.08); border-radius:100px; overflow:hidden; }
    .score-fill { height:100%; border-radius:100px; background:linear-gradient(90deg, var(--brand-purple), var(--brand-pink)); }
    .score-num { font-size:11px !important; font-weight:600; color:var(--brand-pink); min-width:30px; text-align:right; }
    
    .ui-footer { padding:8px 16px; border-top:1px solid rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:space-between; background: rgba(0,0,0,0.2); }
    .ui-footer-note { font-size:11px !important; font-weight: 500; color:var(--text-muted); }
    .genome-reco { display:inline-flex; align-items:center; gap:6px; font-size:11px !important; font-weight:500; color:var(--brand-cyan); line-height: 1.3 !important; }

    .ui-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; z-index: 20; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    .ui-nav-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--brand-pink); transform: translateY(-50%) scale(1.1); }
    .ui-nav-btn.prev { left: -22px; }
    .ui-nav-btn.next { right: -22px; }
    @media (max-width: 860px) { .ui-nav-btn { display: none; } }

    #quote-2 { margin-top: 0px; margin-bottom: 0px; }
    #quote-2 .big-q em { color: var(--brand-cyan); font-style: normal; font-weight: 700; }

    /* HOW IT WORKS */
    #how { 
        padding: 80px 40px 30px 40px; 
        max-width: 1100px; 
        margin: 0 auto; 
        /* Added margin-bottom to create space before the Assistant section */
        margin-bottom: 120px; 
        position: relative; 
        z-index: 10; 
        background: transparent;
    }
    .how-head { text-align:center; margin-bottom:50px; }
    .how-sub { font-size:18px; color:var(--mid); max-width:800px; margin:0 auto; line-height:1.6; }
    .how-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    .how-step { background:var(--ink-mid); border: 1px solid rgba(255,255,255,0.05); border-radius:12px; padding:40px 28px; transition:all .3s ease; }
    .how-step:hover { background:var(--ink-light); transform: translateY(-4px); border-color: rgba(255,255,255,0.1); }
    .how-num { font-family:var(--serif); font-size:56px; font-weight:400; color:rgba(249, 58, 153, 0.15); line-height:1; margin-bottom:18px; transition:color .3s; }
    .how-step:hover .how-num { color:rgba(249, 58, 153, 0.3); }
    .how-bar { width:24px; height:2px; background:var(--brand-pink); margin-bottom:20px; transition:width .4s; border-radius:2px;}
    .how-step:hover .how-bar { width:48px; }
    .how-title { font-family:var(--serif); font-size:20px; font-weight:400; line-height:1.3; margin-bottom:12px; }
    .how-body { font-size:14px; color:var(--mid); line-height:1.6; }

    /* QUOTE */
    #quote { padding:120px 40px; text-align:center; position:relative; overflow:hidden; z-index: 10; background: var(--ink);}
    #quote::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:700px; height:700px; background:radial-gradient(circle, rgba(162, 0, 255, 0.08) 0%, transparent 70%); pointer-events:none; }
    .quote-inner { max-width:800px; margin:0 auto; position:relative; }
    .qrule { width:1px; height:80px; background:linear-gradient(to bottom,transparent,var(--brand-purple),transparent); margin:0 auto 52px; }
    .big-q {
        font-family: system-ui, -apple-system, sans-serif;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #ffffff;
        line-height: 1.8;
        margin-bottom: 0px;
        font-style: normal;
    }
    .big-q em { color:var(--brand-cyan); font-style:normal; }
    .q-attr { font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--text-muted); text-transform: uppercase; }

    /* FOR WHO */
    #for-who { 
        padding: 20px 40px 100px 40px;
        background: transparent;
        border-top: none;
        position: relative;
        z-index: 10;
    }
    
    .fw-inner { max-width:1100px; margin:0 auto; }
    .fw-head { text-align:center; margin-bottom:18px; }
    .fw-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .fw-card { border:1px solid rgba(255,255,255,0.07); border-radius:18px; padding:30px 20px; background:rgba(255,255,255,0.02); transition:all .3s ease; margin-bottom: 20px;}
    .fw-card:hover { border-color:rgba(249, 58, 153, 0.3); background:var(--brand-pink-dim); transform: translateY(-4px); }
    .fw-icon { 
        font-size: 50px;
        margin-bottom: 0px;
        text-align: center;
    }
    .fw-title { 
        font-family: var(--serif); 
        font-size: 20px;
        font-weight: 400;
        margin-bottom: 16px;
        text-align: center;
    }
    
    /* New Bullet List Styling */
    .fw-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .fw-list li {
        font-size: 14px;
        color: var(--mid);
        line-height: 1.6;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    
    .fw-list li::before {
        content: '•';
        color: var(--brand-pink);
        font-size: 20px;
        line-height: 1.1;
    }

    /* FOOTER CTA */
    #footer-cta { padding:120px 40px; text-align:center; position: relative; z-index: 10; background: transparent;}
    .fcta-title { font-family:var(--serif); font-size:clamp(36px,5vw,68px); font-weight:400; line-height:1.1; margin-bottom:24px; }
    .fcta-sub { font-size:18px; color:var(--mid); max-width:480px; margin:0 auto 48px; line-height:1.6; }
    .cta-note { font-size:13px; color:var(--text-muted); margin-top:16px; font-weight: 500;}

    /* =========================================
       EXPANDING HORIZONTAL FOOTER (Motion Engine)
       ========================================= */
    .landing-footer.expanding-footer {
        height: 80px; /* Strict baseline height */
        padding: 0 64px 32px 64px; /* Locks content exactly 32px from the bottom */
        background: var(--ink);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        
        display: flex;
        justify-content: space-between; 
        align-items: flex-end; /* Anchors all internal content to the bottom */
        
        position: relative;
        z-index: 50; /* Ensures it overlays the section above when it grows */
        box-sizing: border-box;
        
        /* The Magic Upward Growth Engine */
        margin-top: 0;
        transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1), margin-top 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* 1. Physically expand the footer upwards without pushing the page down */
    .landing-footer.expanding-footer:hover {
        height: 170px;       /* Grow height to fit the 3 stacked rows */
        margin-top: -90px;   /* Pull the top edge upwards by exactly the growth amount */
    }

    /* --- Left Side --- */
    .footer-left {
        position: relative;
        z-index: 2;
    }

    .footer-copyright { 
        font-size: 14px; 
        color: var(--text-muted); 
        margin: 0;
        white-space: nowrap;
    }

    /* --- Right Side (The Motion Container) --- */
    .footer-right {
        position: relative;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .moving-links-container {
        position: relative;
        width: 440px; /* Defines the grid space for the two expanded columns */
        height: 20px; /* Matches line-height of the text */
    }

    /* Base styles for all moving links */
    .move-link {
        position: absolute;
        bottom: 0;
        left: 0; /* All links anchor to the left edge of the container to calculate precise X/Y paths */
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-muted);
        text-decoration: none;
        white-space: nowrap;
        /* The magic movement transition */
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    }
    .move-link:hover { color: #ffffff; }

    /* Crossfade text mechanics inside the moving links */
    .txt-short {
        position: absolute;
        left: 0;
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    .txt-long {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .landing-footer.expanding-footer:hover .txt-short { opacity: 0; pointer-events: none; }
    .landing-footer.expanding-footer:hover .txt-long { opacity: 1; pointer-events: auto; }

    /* The new secondary links fade in on hover */
    .new-item { opacity: 0; pointer-events: none; }
    .landing-footer.expanding-footer:hover .new-item { opacity: 1; pointer-events: auto; }

    /* =========================================
       THE X/Y MOVEMENT PATHS
       Closed State: Clustered on the right side
       Open State: Column 1 = 0px | Column 2 = 240px
       ========================================= */

    /* 1. TERMS (Starts middle-right -> Moves far Left and high Up) */
    .item-terms { transform: translate(210px, 0); }
    .landing-footer.expanding-footer:hover .item-terms { transform: translate(0px, -64px); }

    /* 2. PRIVACY (Starts far left -> Moves slightly Left and Up) */
    .item-privacy { transform: translate(140px, 0); }
    .landing-footer.expanding-footer:hover .item-privacy { transform: translate(0px, -32px); }

    /* 3. CHOICES (Starts far right -> Moves straight Up into Col 2) */
    .item-choices { transform: translate(270px, 0); }
    .landing-footer.expanding-footer:hover .item-choices { transform: translate(240px, -32px); }

    /* 4. AUP (Fades in at Top Right) */
    .item-aup { transform: translate(240px, -64px); }
    .landing-footer.expanding-footer:hover .item-aup { transform: translate(240px, -64px); }

    /* 5. COOKIES (Fades in at Bottom Left) */
    .item-cookie { transform: translate(0px, 0px); }
    .landing-footer.expanding-footer:hover .item-cookie { transform: translate(0px, 0px); }

    /* 6. IP (Fades in at Bottom Right) */
    .item-ip { transform: translate(240px, 0px); }
    .landing-footer.expanding-footer:hover .item-ip { transform: translate(240px, 0px); }


    /* --- Mobile Responsiveness (Reverted & Matched to Mockup) --- */
    @media (max-width: 860px) {
        /* 1. Footer Base: Transparent, no border, proper padding */
        .landing-footer.expanding-footer {
            position: relative !important;
            z-index: 10 !important;
            height: auto !important;
            margin-top: 0 !important;
            padding: 20px 24px 60px 24px !important;
            display: flex !important;
            flex-direction: column !important;
            background: transparent !important;
            border: none !important;
            cursor: pointer !important;
            -webkit-tap-highlight-color: transparent;
        }

        /* Nuke the ::after toggle button from previous iteration */
        .landing-footer.expanding-footer::after {
            display: none !important;
        }

        /* 2. Order: Links on top, Copyright on bottom (CENTERED) */
        .footer-right {
            order: 1 !important;
            width: 100% !important;
            justify-content: center !important;
        }
        .footer-left {
            order: 2 !important;
            margin-top: 32px !important;
            width: 100% !important; /* Force full width for centering */
            text-align: center !important;
            display: flex !important;
            justify-content: center !important;
        }

        .footer-copyright {
            text-align: center !important;
            width: 100% !important;
        }

        /* 3. Base Link Container */
        .landing-footer.expanding-footer .moving-links-container {
            display: flex !important;
            flex-direction: row !important;
            justify-content: center !important;
            align-items: center !important;
            gap: 24px !important;
            width: 100% !important;
            height: auto !important;
            margin: 0 !important;
        }

        /* Base Link */
        .landing-footer.expanding-footer .move-link {
            position: relative !important;
            transform: none !important;
            opacity: 1 !important;
            visibility: visible !important;
            display: flex !important;
            justify-content: center !important;
            width: auto !important;
        }

        /* ----------------------------------------- */
        /* STATE 1: CLOSED (Match Image #3)          */
        /* ----------------------------------------- */
        /* Hide all except Terms and Privacy */
        .landing-footer.expanding-footer:not(.expanded) .new-item,
        .landing-footer.expanding-footer:not(.expanded) .item-choices {
            display: none !important;
        }

        /* DEACTIVATE LINKS: Forces clicks to pass through and trigger the accordion */
        .landing-footer.expanding-footer:not(.expanded) .move-link {
            pointer-events: none !important; 
        }

        /* Show Short Text, Hide Long Text */
        .landing-footer.expanding-footer:not(.expanded) .txt-short {
            display: block !important;
            position: relative !important;
            opacity: 1 !important;
            color: var(--text-muted) !important;
            font-size: 13px !important;
        }

        .landing-footer.expanding-footer:not(.expanded) .txt-long {
            display: none !important;
        }

        /* ----------------------------------------- */
        /* STATE 2: OPEN (Match Image #4)            */
        /* ----------------------------------------- */
        /* Change container to 2-column grid */
        .landing-footer.expanding-footer.expanded .moving-links-container {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 16px 12px !important;
        }

        /* REACTIVATE LINKS: Now they can be clicked normally */
        .landing-footer.expanding-footer.expanded .move-link {
            justify-content: flex-start !important;
            text-align: left !important;
            pointer-events: auto !important;
        }

        /* Hide Short Text, Show Long Text */
        .landing-footer.expanding-footer.expanded .txt-short {
            display: none !important;
        }

        .landing-footer.expanding-footer.expanded .txt-long {
            display: flex !important;
            align-items: center !important;
            position: relative !important;
            opacity: 1 !important;
            color: var(--text-muted) !important;
            font-size: 11px !important;
        }
    }
    
    .logo-scroll-column,
    .logo-scroll-track {
        position: relative;
        z-index: 1;
    }

    .logo-scroll-column:has(.show-factoid),
    .logo-scroll-column:has(.app-logo-card:hover) {
        z-index: 100;
    }

    .logo-scroll-track:has(.show-factoid),
    .logo-scroll-track:has(.app-logo-card:hover) {
        z-index: 100;
    }
    
    /* --- BAR QUOTES --- */
    .quote-bar {
        width: 100vw;
        padding: 24px 0px;
        background: transparent;
        backdrop-filter: blur(50px);
        -webkit-backdrop-filter: blur(50px);
        margin: 16px 0;
        text-align: center;
        position: relative;
        z-index: 10;
        box-sizing: border-box;
    }
    .quote-bar::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%; transform: translate(-50%, -50%);
        width: 100%; max-width: 1000px; height: 100%;
        background: radial-gradient(circle, rgba(162, 0, 255, 0.08) 0%, transparent 70%);
        pointer-events: none;
        z-index: -1;
    }
    
    /* --- DOWN ARROW HINTS --- */
    #scroll-down-hint, #scroll-down-hint-how {
        position: fixed;
        bottom: 40px;
        left: 50%;
        margin-left: -24px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(249, 58, 153, 0.15);
        border: 1px solid var(--brand-pink);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
        
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(20px);
        transition: opacity 0.5s ease, visibility 0.5s ease;
        text-decoration: none;
        box-shadow: 0 0 20px rgba(249, 58, 153, 0.4);
    }

    #scroll-down-hint.visible, #scroll-down-hint-how.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        animation: pulse-bounce 2s infinite ease-in-out;
    }

    #scroll-down-hint:hover, #scroll-down-hint-how:hover {
        background: var(--brand-pink);
        color: #fff;
        animation-play-state: paused;
    }

    @keyframes pulse-bounce {
        0%, 100% { transform: translateY(0); box-shadow: 0 0 20px rgba(249, 58, 153, 0.4); }
        50% { transform: translateY(8px); box-shadow: 0 0 35px rgba(249, 58, 153, 0.8); }
    }
/* ==========================================
   BACK TO TOP BUTTON (MIRRORING GET ACCESS)
   ========================================== */
#back-to-top {
    display: none; /* Hidden completely at the top of the page */
    position: fixed;
    top: 24px;
    left: 64px; /* Mirrors the right: 64px */
    width: 48px;
    height: 48px;
    
    z-index: 199999 !important; /* Matched exactly */
    
    text-decoration: none;
    transition: border-color 0.3s ease;
}

#back-to-top img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

#back-to-top:hover {
    border-color: var(--brand-pink);
}

/* This class is injected by the JS block we just added */
#back-to-top.scrolled-left-cta {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center;
    justify-content: center;
    animation: dropIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.mobile-menu-toggle {
        display: none; /* Hidden on desktop */
        background: transparent;
        border: none;
        color: #ffffff;
        cursor: pointer;
        padding: 8px;
        z-index: 100;
        transition: color 0.2s ease;
}
    
.mobile-menu-toggle:hover {
    color: var(--brand-pink);
}

/* Hides mobile-menu items from the desktop header */
.mobile-only-nav {
    display: none !important;
}

/* --- DESKTOP HERO TEXT VISIBILITY --- */
    .desktop-text { display: inline; }
    .mobile-text { display: none; }

/* =========================================
   ATOMIC DRAMA CONSENT THEME & LOGIC
   ========================================= */

/* 1. Force the engine to adopt dark-mode variables */
:root, #cc-main {
    /* Base Modal */
    --cc-bg: var(--ink-light, #1c1c24) !important; 
    --cc-primary-color: #ffffff !important; 
    --cc-secondary-color: var(--text-muted, #a0a0a0) !important; 
    --cc-text: #ffffff !important;
    --cc-font-family: 'DM Sans', sans-serif;
    --cc-modal-border-radius: 12px;
    --cc-btn-border-radius: 8px;
    --cc-modal-box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);

    /* Section Cards (This fixes the white block issue) */
    --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.03) !important;
    --cc-cookie-category-block-border: rgba(255, 255, 255, 0.15) !important;
    --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.06) !important;
    --cc-cookie-category-expanded-block-bg: transparent !important;
    --cc-cookie-category-expanded-block-hover-bg: transparent !important;

    /* Left-Side Buttons (Accept All / Reject All) */
    --cc-btn-secondary-bg: transparent !important;
    --cc-btn-secondary-color: var(--brand-pink, #f93a99) !important;
    --cc-btn-secondary-border-color: var(--brand-pink, #f93a99) !important;
    --cc-btn-secondary-hover-bg: rgba(249, 58, 153, 0.1) !important;
    --cc-btn-secondary-hover-color: var(--brand-pink, #f93a99) !important;
    --cc-btn-secondary-hover-border-color: var(--brand-pink, #f93a99) !important;

    /* Right-Side Button (Save Preferences) */
    --cc-btn-primary-bg: transparent !important;
    --cc-btn-primary-color: #ffffff !important; 
    --cc-btn-primary-border-color: rgba(255, 255, 255, 0.3) !important;
    --cc-btn-primary-hover-bg: rgba(255, 255, 255, 0.05) !important;
    --cc-btn-primary-hover-color: #ffffff !important;
    --cc-btn-primary-hover-border-color: #ffffff !important;

    /* Toggles */
    --cc-toggle-on-bg: var(--brand-pink, #f93a99) !important;
    --cc-toggle-off-bg: rgba(255, 255, 255, 0.15) !important;
    --cc-toggle-knob-bg: #ffffff !important;
    --cc-toggle-readonly-bg: rgba(255, 255, 255, 0.15) !important;

    /* Hide Dividers */
    --cc-separator-border-color: transparent !important;
}

/* --- THE "FLAT CARD" UX OVERRIDES --- */

/* 2. SLEDGEHAMMER: Strip visuals from ALL inner wrappers (Targeting the high-specificity Orestbida class) */
#cc-main .pm__section-title-wrapper,
#cc-main .pm__section-desc-wrapper,
#cc-main .pm__section-header,
#cc-main .pm__section-title,
#cc-main .pm__section--toggle .pm__section-title { 
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;          
    box-shadow: none !important;      
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Outer Card Container: Lock boundaries and apply the actual card styles */
#cc-main .pm__section,
#cc-main .pm__section--toggle {
    background: var(--cc-cookie-category-block-bg) !important;
    background-color: var(--cc-cookie-category-block-bg) !important;
    border: 1px solid var(--cc-cookie-category-block-border) !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    padding: 16px 20px !important; /* Ensures clean space on all 4 sides */
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transition: border-color 0.2s, background-color 0.2s;
}

/* 4. Card Hover State */
#cc-main .pm__section:hover,
#cc-main .pm__section--toggle:hover {
    background-color: var(--cc-cookie-category-block-hover-bg) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 5. Kill native hover effect on the inner title wrapper */
#cc-main .pm__section-title-wrapper:hover {
    background: transparent !important; 
    background-color: transparent !important; 
}

/* 6. Layout adjustments: Force everything into a clean Flexbox grid */
#cc-main .pm__section-title-wrapper { 
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 16px !important; /* Force a gap between text and toggle */
}

/* 7. Text Container: Force it to shrink to fit, preventing blowouts */
#cc-main .pm__section-title { 
    width: 100% !important; 
    flex: 1 1 0% !important; /* The 0% magic bullet prevents text from forcing the width wider than parent */
    min-width: 0 !important; /* Crucial for flex child truncation/wrapping */
    min-height: auto !important;
}

/* 8. Toggle Container: Kill the absolute float and lock its width */
#cc-main .section__toggle-wrapper { 
    position: relative !important; 
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    flex: 0 0 50px !important; /* Rigid width so the toggle never squishes */
}

#cc-main .pm__section-arrow { display: none !important; }
#cc-main .pm__footer { border-top: none !important; padding: 16px 24px 24px 24px !important; }

/* 9. Fix the top-right Close "X" Button rendering as light-theme */
#cc-main .pm__close-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#cc-main .pm__close-btn:hover { background-color: rgba(255, 255, 255, 0.1) !important; }

/* --- CUSTOM CCPA TOGGLE SWITCH --- */
.ccpa-switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.ccpa-switch input { opacity: 0; width: 0; height: 0; }
.ccpa-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.15); transition: .3s; border-radius: 34px; }
.ccpa-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s cubic-bezier(0.25, 1, 0.5, 1); border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.ccpa-switch input:checked + .ccpa-slider { background-color: var(--brand-pink, #f93a99); }
.ccpa-switch input:checked + .ccpa-slider:before { transform: translateX(22px); }
.ccpa-switch input:checked + .ccpa-slider:after { content: "✓"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--brand-pink, #f93a99); font-size: 12px; font-weight: 900; pointer-events: none; z-index: 10; }

/* =========================================
   MASTER MOBILE & TABLET RESPONSIVENESS
   ========================================= */

/* --- TABLET BREAKPOINT --- */
@media (max-width: 820px) {
    .prob-grid, .genome-pillars, .how-steps, .fw-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }
    .ui-body { grid-template-columns: 1fr; }
    .ui-sidebar { display: none; } 
    .solution-list { grid-template-columns: 1fr !important; grid-auto-flow: row; }
    
    /* Pre-stacking stats for tablets */
    .proof-inner { 
        flex-direction: column !important; 
        align-items: center !important; 
        gap: 40px; 
    }
    .proof-div { display: none !important; }
}

/* --- MASTER MOBILE OVERRIDE --- */
@media (max-width: 768px) {
    /* 0. HARD RESET: Prevent side-scrolling */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    *, *::before, *::after { box-sizing: inherit; }

    /* 1. Header & Burger Menu: Logo Left, Burger Right */
    nav {
        flex-direction: row !important; 
        justify-content: space-between !important; 
        align-items: center !important;    
        padding: 20px 24px !important; 
        gap: 0 !important;              
        z-index: 1000 !important; 
        width: 100% !important;
        position: relative !important;
    }
    
    .logo { 
        position: static !important; 
        transform: none !important; 
        margin: 0 !important; 
        display: flex; 
        justify-content: flex-start; 
    }
    
    .logo img { width: 140px !important; } 
    
    .mobile-menu-toggle { 
        display: flex !important; 
        margin: 0 !important; 
    }

    /* KILLS desktop buttons trying to squeeze into the mobile header row */
    .nav-actions, .header-buttons, .header-cta, .btn-nav-primary:not(.nav-links .btn-nav-primary) { 
        display: none !important; 
    }

    /* 1.5 The Dropdown Menu Box (Slim, Floating, 50% Transparent) */
    .nav-links {
        display: flex !important; 
        flex-direction: column !important;
        align-items: stretch !important; /* Allows the divider line to span the new slim width */
        position: absolute !important;
        
        /* THE SLIM DOWN: Shrink-wraps to the text and pins to the right side */
        width: max-content !important; 
        min-width: 200px !important; /* Safety minimum so it doesn't look too aggressively skinny */
        left: auto !important; 
        right: 24px !important; /* Aligns perfectly under your hamburger icon */
        top: 100% !important; 
        
        /* THE TRANSPARENCY: 50% opacity (0.5) with a heavy glass blur */
        background: rgba(11, 15, 25, 0.5) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important; /* Safari support */
        
        /* FLOATING STYLING: Added rounded corners and a subtle border to define the edges */
        padding: 24px !important; 
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
        
        gap: 20px !important; 
        opacity: 0; 
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        z-index: 50;
    }
    
    .nav-links.open { 
        opacity: 1; 
        visibility: visible; 
        transform: translateY(0); 
    }

    /* All Links Formatting */
    .nav-links a {
        display: block !important;
        text-align: right !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important; 
        font-size: 15px !important;
        color: #ffffff !important; 
    }

    /* Muted colors for the mobile navigation links */
    .mobile-only-nav {
        color: var(--text-muted, #a0aab2) !important;
    }

    /* THE DIVIDER: Targets "How it Works" */
    .nav-links a:nth-child(4) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-bottom: 20px !important; 
    }

    /* THE THEME INJECT: Makes Sign In pop */
    #nav-signin {
        color: var(--brand-pink, #f93a99) !important;
        font-weight: 600 !important;
    }

    /* The Get Access Button */
    .nav-links .btn-nav-primary {
        align-self: flex-end !important; 
        width: auto !important;
        min-width: 110px !important;
        text-align: center !important;
        padding: 10px 16px !important;
        margin-top: 4px !important; 
    }

    /* 2. Hero Section: LEFT-ALIGNED & STABILIZED */
    .hero-container {
        min-height: 60vh !important; 
        padding: 40px 24px 0px 24px !important; /* Slightly more side padding for left-align */
        text-align: left !important; 
        display: block !important; 
        width: 100% !important;
    }

    .hero-container h1 { 
        font-size: 42px !important;
        line-height: 1.1 !important;
        text-align: left !important;
        display: block !important;
        
        /* STABILIZER: Reserved space so the paragraph position is frozen. */
        height: 165px !important;
        padding-top: 10px !important;
        margin-bottom: 0 !important; 
        width: 100% !important;
    }

    /* Paragraph: Pinned exactly below the 135px H1 box */
    .hero-container p[style] { 
        text-align: left !important; 
        max-width: 100% !important;
        font-size: 16px !important;
        margin-top: 10px !important; /* Empty line gap below title */
        margin-bottom: 30px !important; 
        display: block !important;
    }

    /* --- FULL ACCORDION LOGIC PRESERVED --- */
    .desktop-text { display: none !important; }
    .mobile-text { display: block !important; }
    .mobile-block { 
        display: block !important; 
        margin-bottom: 12px !important; 
        text-align: left !important;
    }
    
    .hidden-block { 
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transform: translateY(10px);
        transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    /* Reveal trigger from JS scroll */
    .hero-container.reveal-text .hidden-block {
        opacity: 1;
        max-height: 600px;
        transform: translateY(0);
        margin-bottom: 12px !important;
    }

    /* REMOVE JOIN BETA */
    .input-group { display: none !important; }

    /* 3. Micro-Stats & Proof Section: Label on top, 2-Column Grid Below */
    #micro-stats, 
    #proof { 
        min-height: 30vh !important; 
        margin-top: 0 !important; 
        padding: 30px 20px !important;
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;
        justify-content: center !important;
    }

    /* Target the label to ensure perfect centering and spacing */
    #micro-stats .sec-label, 
    #proof .sec-label[style] {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 30px !important; 
        margin-top: 0 !important;
    }

    #micro-stats .proof-inner, 
    #proof .proof-inner { 
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; 
        gap: 30px 20px !important; 
        width: 100% !important;
        max-width: 400px !important;
    }
    
    .proof-stat { text-align: center !important; }
    .proof-num { font-size: 32px !important; display: block !important; }
    .proof-div { display: none !important; }

    /* 4. Section, Grid & Carousel Fixes */
    #problem, .sec { 
        width: 110% !important;
        padding: 60px 0px !important;
        overflow: hidden !important;
        box-sizing: border-box !important; 
    }
    
    /* Overrides the inline 115% width from the HTML */
    h2.sec-title[style] { 
        width: 100% !important; 
        font-size: 26px !important;
        text-align: left !important;
    }
    
    .prob-grid { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 40px !important; 
        width: 100% !important; 
        box-sizing: border-box !important;
    }

    /* THE BLOWOUT FIX: Forces the column to shrink to screen size */
    .prob-grid > div { 
        min-width: 0 !important; 
        width: 100% !important; 
        max-width: 100% !important;
    }

    /* Adds a 32px "nudge" to the top of the carousel */
    .carousel-container[style] { 
        width: 100% !important; 
        max-width: 100% !important; 
        margin: 40px auto 0 auto !important;
    }
    
    /* Pulls the carousel arrows safely inside the screen bounds */
    .carousel-btn { width: 36px !important; height: 36px !important; }
    #btn-prev-article { left: 8px !important; }
    #btn-next-article { right: 8px !important; }
    
    /* 4.5 "The Solution" Section: Reorder Text Above Logos */
    #solution .prob-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Child 1 (The Logos) gets moved to the bottom */
    #solution .prob-grid > div:nth-child(1) {
        order: 2 !important; 
        margin-top: 30px !important; /* Creates breathing room between text and logos */
    }
    
    /* Child 2 (The Text) gets pulled to the top */
    #solution .prob-grid > div:nth-child(2) {
        order: 1 !important; 
        padding-left: 0 !important; /* Removes the 20px desktop padding so it aligns left */
    }
    
    /* 4.6 Tighten Gap & Shift Quote 1 Left */
    #quote-1 {
        margin-bottom: 0 !important; 
        
        /* THE SHIFT: 16px padding on the left, but a massive 64px on the right */
        padding-left: 16px !important;
        padding-right: 64px !important; 
        box-sizing: border-box !important;
    }
    
    /* Ensures the inner content aligns itself nicely within that new shifted boundary */
    #quote-1 .quote-inner {
        width: 100% !important;
        text-align: left !important; 
        align-items: flex-start !important;
    }

    #solution {
        padding-top: 32px !important; 
        margin-bottom: 80px !important; 
    }
    
    /* 4.7 Quote Block 2: Spacing & Text Fit */
    #quote-2 {
        margin-top: 0px !important;
        margin-bottom: 80px !important;
        padding: 40px 24px !important; 
        height: auto !important;
    }

    #quote-2 .quote-inner[style], 
    #quote-2 .big-q[style] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important; 
        text-align: center !important; 
    }
    
    #quote-2 .big-q {
        font-size: 13px !important; 
        line-height: 1.6 !important;
    }
    
    /* 4.8 Story Genome Hero & Scroll Arrow Clearance */
    .story-genome-section {
        min-height: 85vh !important; /* Slightly reduces the massive 100vh height on mobile */
        padding: 40px 24px 120px 24px !important; 
    }

    .genome-content {
        /* Nudges the title and paragraph up away from the bottom center */
        transform: translateY(-140px) !important; 
    }

    /* Bumping the bouncing arrows safely above the 80px Get Access pill zone */
    #scroll-down-hint, 
    #scroll-down-hint-how {
        bottom: 110px !important; 
    }

    /* The [style] selector is a CSS sniper rifle to kill those inline HTML styles */
    #quote-2 .quote-inner[style], 
    #quote-2 .big-q[style] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important; 
        text-align: center !important; /* Much cleaner than 'justify' on mobile */
    }
    
    #quote-2 .big-q {
        font-size: 13px !important; 
        line-height: 1.6 !important;
    }
    
    /* 4.9 Network Canvas (Attrs): Full 100vh Window Fill */
    #attrs {
        /* BUMPED: Now commands the entire height of the phone screen */
        height: 100vh !important; 
        min-height: 600px !important; 
        
        /* THE CLEARANCE: 90px padding leaves a perfect 10px gap above the 80px "Get Access" pill */
        padding: 0 20px 90px 20px !important; 
        
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }
    
    .attrs-inner {
        flex: 1 !important;
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .network-container {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    .attrs-head {
        padding: 24px 20px 8px 20px !important;
        flex-shrink: 0 !important;
    }

    .attrs-head .sec-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .attrs-head .sec-title br {
        display: none !important;
    }

    .canvas-wrapper {
        position: relative !important;
        width: 100% !important;
        flex: 1 !important; /* Maximizes the internal height */
        min-height: 0 !important;
        display: block !important;
    }

    #network-canvas {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important; 
    }
    
    /* 5. Logo Scroll Wrapper: Un-squish & Resize */
    .logo-scroll-wrapper {
        width: 100% !important; 
        max-width: 100% !important;
        margin: 0 !important;
        
        /* THE FIX: Kill the massive desktop side padding */
        padding: 0 !important; 
        
        /* Tighter layout for mobile screens */
        gap: 8px !important; 
        height: 380px !important; 
        
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    }

    .logo-scroll-column {
        clip-path: none !important; 
        -webkit-clip-path: none !important; 
    }

    /* Resize the individual cards so they fit 5-across cleanly */
    .logo-scroll-column .app-logo-card {
        height: 54px !important; /* Scaled down from 80px */
        padding: 6px !important; /* Tighter internal padding */
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }

    /* Adjust the hover tooltips for mobile so they don't bleed off screen */
    .app-name-tooltip {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }
    
    /* 6. Scrolling Sticky CTA & Back to Top */
    #nav-request, .nav-request {
        display: none !important; 
    }

    #nav-request.scrolled-cta, 
    .nav-request.scrolled-cta {
        display: flex !important; 
        position: fixed !important;
        top: auto !important;
        right: auto !important;
        bottom: 24px !important; 
        left: 50% !important;
        
        /* THE MISSING LINK: This pulls it perfectly back to the center */
        transform: translateX(-50%) !important; 
        
        width: calc(100% - 48px) !important; 
        max-width: 400px !important;
        height: 56px !important;
        z-index: 9999 !important; 
        border-radius: 50px !important; 
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        
        animation: popUpMobile 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    }

    @keyframes popUpMobile {
        0% { transform: translate(-50%, 100px); opacity: 0; }
        100% { transform: translate(-50%, 0); opacity: 1; }
    }

    #nav-request.scrolled-cta.cta-hidden, 
    .nav-request.scrolled-cta.cta-hidden {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translate(-50%, 50px) !important; /* Drops it down smoothly */
        animation: none !important; /* Kills the forwards!important lock */
        transition: opacity 0.3s ease, transform 0.3s ease !important;
    }

    /* Restoring the Back to Top button to the right side */
    #back-to-top.scrolled-left-cta {
        bottom: 90px !important; 
        right: 20px !important;
        left: auto !important;
        
        /* Kills the desktop translateX so it stays pinned to the right */
        transform: none !important; 
        
        animation: dropIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    }
    
    /* 6.1 Remove Desktop Bottom Tabs on Mobile */
    .bottom-tabs {
        display: none !important; /* Kills the fixed footer navigation */
    }
    /* 7. "How it Works" Arrow Overlap */
    #how {
        position: relative !important; /* Becomes the anchor for the arrow */
        padding-bottom: 80px !important; /* Creates breathing room at the bottom of the section */
    }

    #scroll-down-hint-how {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        
        position: absolute !important;
        bottom: 20px !important; /* Docks cleanly to the bottom of the #how section */
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 !important; /* Kills the desktop negative margin offset */
        z-index: 100 !important;
        
        animation: pulse-bounce 2s infinite ease-in-out !important;
    }
    
    /* 7.1 How Section Title: 2-Line Force */
    #how .sec-title {
        font-size: 28px !important; /* Shrinks just enough to avoid the 3rd line wrap */
        line-height: 1.25 !important;

        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
    
    /* 8. Writer Assistant (#assistant) & Dynamic UI Scaling */
    
    /* 8.1 Shift the section down slightly from the "How" grid */
    #assistant {
        margin-top: 60px !important; 
        padding: 40px 24px 100px 24px !important; 
        background: transparent !important;
    }

    .assist-head {
        margin-bottom: 32px !important;
    }

    .assist-sub {
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    /* 8.2 Give the carousel dynamic vertical room for mobile text wrapping */
    #ui-carousel-container {
        height: auto !important; 
        min-height: 520px !important; /* Safety baseline */
        width: 100% !important;
    }

    .genome-ui-slide {
        height: auto !important; 
    }

    .writer-ui {
        height: auto !important; /* Allows the background color to stretch down */
        min-height: 100% !important;
        border-radius: 12px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .ui-body {
        display: flex !important; 
        flex-direction: column !important;
        height: auto !important; 
        flex: none !important; 
    }

    /* 8.3 Top Bar: Prevent the title and badge from squishing */
    .ui-topbar {
        padding: 10px 12px !important;
        gap: 8px !important;
        
        /* Ensures the bar itself doesn't exceed the card width */
        width: 100% !important; 
        box-sizing: border-box !important;
    }

    .ui-title-bar {
        font-size: 11px !important; 
        
        /* THE TRUNCATION COMBO */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Adds the "..." */
        
        /* THE FLEXBOX OVERRIDE */
        flex: 1 1 0% !important; /* Tells it to fill space but allows it to shrink */
        min-width: 0 !important; /* The magic bullet that makes the ellipsis actually work */
    }

    .ui-genome-badge {
        font-size: 9px !important;
        padding: 4px 6px !important;
        white-space: nowrap !important;
        letter-spacing: .05em !important;
        
        /* Protects the badge from getting crushed by the shrinking title */
        flex-shrink: 0 !important; 
    }

    /* 8.4 Editor Body: Optimize text readability and unlock scrolling */
    .ui-editor {
        height: auto !important;
        overflow: visible !important; 
        padding: 16px 12px !important;
        flex: none !important;
    }
    
    /* THE LABEL FIX: Breaks the metal rod */
    .ui-ep-label {
        white-space: normal !important; /* Allows the long text to wrap to a second line */
        line-height: 1.4 !important;
        letter-spacing: 0.1em !important; /* Tightens it slightly for narrow screens */
        margin-bottom: 16px !important;
    }

    .beat-content {
        font-size: 14px !important; 
        line-height: 1.45 !important;
        white-space: normal !important; 
        word-wrap: break-word !important;
    }

    /* 8.5 Footer: Stack the notes so they don't overlap horizontally */
    .ui-footer {
        padding: 12px !important;
        flex-direction: column !important; 
        align-items: flex-start !important;
        gap: 6px !important;
        flex: none !important;
    }
    
    /* 8.6 MASTER WIDTH BLOWOUT FIX */
    
    /* 1. Snap the CSS Grid "Metal Rods" */
    #ui-carousel-wrapper, 
    #ui-carousel-container,
    .genome-ui-slide,
    .writer-ui {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important; /* CRITICAL: Allows grid items to shrink below their content width */
        box-sizing: border-box !important;
    }

    /* 2. Topbar: Allow wrapping so long titles don't push the badge off screen */
    .ui-topbar {
        flex-wrap: wrap !important; 
        height: auto !important;
    }
    
    .ui-title-bar {
        white-space: normal !important; /* Lets long titles safely drop to a second line */
        line-height: 1.3 !important;
        min-width: 0 !important;
        word-wrap: break-word !important;
    }

    /* 3. The Sidebar: Prevent long text (like "Long Distance/Separation") from stretching the bottom */
    .ui-sidebar {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .sidebar-item {
        flex-wrap: wrap !important; /* Allows the value to drop below the label if needed */
        gap: 4px !important;
    }
    
    .sidebar-val {
        text-align: right !important;
        white-space: normal !important;
    }
    
    /* 4. The Ep Label: Ensure the "Hook -> Beat" string can wrap */
    .ui-ep-label {
        white-space: normal !important;
        line-height: 1.4 !important;
        letter-spacing: 0.1em !important; /* Tightens the massive desktop tracking */
    }
    
    /* 8.7 FOOTER & BACKGROUND GAP FIX */
    
    .writer-ui {
        /* Ensures the background matches the grid's tallest slide perfectly */
        height: 100% !important; 
        display: flex !important;
        flex-direction: column !important;
    }

    .ui-body {
        /* THE SPONGE: Forces the body to stretch and fill the empty space */
        flex: 1 1 auto !important; 
    }

    .ui-sidebar {
        /* Pushes the extra space to the bottom of the sidebar, above the footer */
        flex: 1 1 auto !important;
    }

    .ui-footer {
        /* THE GLUE: Forces the footer to the absolute bottom of the dark blue background */
        margin-top: auto !important; 
        flex: none !important;
    }
    /* 9. Footer CTA & Bottom Footer Adjustments */
    
    /* 9.1 Shrink the massive desktop padding on the final CTA */
    #footer-cta {
        padding: 80px 24px !important; 
    }

    .fcta-title {
        font-size: 36px !important; 
        line-height: 1.15 !important;
    }

    /* 9.2 Stack the footer elements vertically */
    .landing-footer {
        flex-direction: column !important; 
        text-align: center !important; 
        padding: 40px 24px !important; 
        gap: 24px !important; /* Adds clean spacing between the text and links */
    }

    .landing-footer p {
        font-size: 12px !important; 
        line-height: 1.5 !important;
    }

    /* 9.3 Wrap and center the footer links */
    .foot-links {
        flex-wrap: wrap !important; 
        justify-content: center !important; 
        gap: 16px 24px !important; /* 16px vertical gap, 24px horizontal gap */
        width: 100% !important;
    }

    .foot-links a {
        font-size: 13px !important;
    }
    
    /* 9.4 FINAL CONSENT MODAL OUTLINE ALIGNMENT FIX */
    #cc-main .pm__section-title-wrapper,
    #cc-main .pm__section-desc-wrapper {
        margin-right: -20px !important; /* Counteracts the 20px padding from the parent .pm__section */
        width: calc(100% + 20px) !important; /* Expands to fill the space and eliminate ghosting */
    }
    
    /* 10. Factoid Popup Mobile Geometry Fix (Hardcoded ID Overrides) */

    /* BASE: Force all popups DOWN and neutralize the JS .pop-left class */
    .app-logo-card .factoid-popup,
    .app-logo-card.pop-left .factoid-popup {
        top: 100% !important; 
        bottom: auto !important;
        margin-top: 14px !important; 
        width: 220px !important;
        max-width: 80vw !important; /* Safety net */
    }

    /* Move the arrow to the top so it points UP */
    .app-logo-card .factoid-popup::before,
    .app-logo-card.pop-left .factoid-popup::before {
        top: -6px !important;
        bottom: auto !important;
        transform: rotate(45deg) !important;
        border-bottom: none !important;
        border-right: none !important;
        border-top: 1px solid var(--brand-pink) !important;
        border-left: 1px solid var(--brand-pink) !important;
    }

    /* =========================================
       ZONE 1: TRACKS 1 & 2 (Left side of screen)
       Anchor to the left, stretch toward the right
       ========================================= */
    #track-1 .app-logo-card .factoid-popup,
    #track-2 .app-logo-card .factoid-popup {
        left: 0 !important;
        right: auto !important;
    }
    #track-1 .app-logo-card.show-factoid .factoid-popup,
    #track-2 .app-logo-card.show-factoid .factoid-popup {
        transform: translateY(0) !important; 
    }
    #track-1 .app-logo-card .factoid-popup::before,
    #track-2 .app-logo-card .factoid-popup::before {
        left: 20px !important; /* Positions arrow over the logo */
        right: auto !important;
    }

    /* =========================================
       ZONE 2: TRACK 3 (Center of screen)
       Anchor to the center, stretch both ways
       ========================================= */
    #track-3 .app-logo-card .factoid-popup,
    #track-3 .app-logo-card.pop-left .factoid-popup {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    #track-3 .app-logo-card.show-factoid .factoid-popup,
    #track-3 .app-logo-card.pop-left.show-factoid .factoid-popup {
        transform: translateX(-50%) translateY(0) !important;
    }
    #track-3 .app-logo-card .factoid-popup::before,
    #track-3 .app-logo-card.pop-left .factoid-popup::before {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) rotate(45deg) !important;
    }

    /* =========================================
       ZONE 3: TRACKS 4 & 5 (Right side of screen)
       Anchor to the right, stretch toward the left
       ========================================= */
    #track-4 .app-logo-card .factoid-popup,
    #track-4 .app-logo-card.pop-left .factoid-popup,
    #track-5 .app-logo-card .factoid-popup,
    #track-5 .app-logo-card.pop-left .factoid-popup {
        right: 0 !important;
        left: auto !important;
    }
    #track-4 .app-logo-card.show-factoid .factoid-popup,
    #track-4 .app-logo-card.pop-left.show-factoid .factoid-popup,
    #track-5 .app-logo-card.show-factoid .factoid-popup,
    #track-5 .app-logo-card.pop-left.show-factoid .factoid-popup {
        transform: translateY(0) !important;
    }
    #track-4 .app-logo-card .factoid-popup::before,
    #track-4 .app-logo-card.pop-left .factoid-popup::before,
    #track-5 .app-logo-card .factoid-popup::before,
    #track-5 .app-logo-card.pop-left .factoid-popup::before {
        right: 20px !important; /* Positions arrow over the logo */
        left: auto !important;
    }
} /* End of @media max-width 768px */

/* --- ACTIVE LINE HIGHLIGHT --- */
.cm-activeLine {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-radius: 4px;
}
/* ========================================================= */
/* CROSS-BROWSER MODAL GLASS HARDENING                       */
/* Fixes Safari / iOS / cache-sensitive transparency drift    */
/* ========================================================= */

.modal-overlay {
    background-color: rgba(11, 15, 25, 0.82) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%) !important;
    backdrop-filter: blur(10px) saturate(120%) !important;
    isolation: isolate !important;
}

.modal-glass,
.modal-content,
#wizard-glass {
    background-color: rgba(8, 10, 18, 0.88) !important;
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.075) 0%,
            rgba(255, 255, 255, 0.025) 100%
        ) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    background-clip: padding-box !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.68),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* When real backdrop blur is supported, allow a little more glass. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .modal-overlay {
        background-color: rgba(11, 15, 25, 0.74) !important;
    }

    .modal-glass,
    .modal-content,
    #wizard-glass {
        background-color: rgba(8, 10, 18, 0.76) !important;
    }
}

/* When backdrop blur is unavailable or blocked, force readable opacity. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .modal-overlay {
        background-color: rgba(11, 15, 25, 0.9) !important;
    }

    .modal-glass,
    .modal-content,
    #wizard-glass {
        background-color: rgba(8, 10, 18, 0.96) !important;
    }
}

/* Login-specific floor so Safari never renders it too transparent. */
#login-modal .modal-glass {
    background-color: rgba(8, 10, 18, 0.86) !important;