/* Takavi Theme Variables – scoped to page content */
    .faq-page-content {
        --primary: #da0b4e;
        --primary-dark: #b30940;
        --primary-light: #ff4d7a;
        --secondary: #4f46e5;
        --secondary-light: #818cf8;
        --success: #10b981;
        --danger: #ef4444;
        --warning: #f59e0b;
        --dark: #1e293b;
        --light: #f8fafc;
        --gray-100: #f1f5f9;
        --gray-200: #e2e8f0;
        --gray-300: #cbd5e1;
        --gray-400: #94a3b8;
        --gray-500: #64748b;
        --gray-600: #475569;
        --gray-700: #334155;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 20px;
        --radius-xl: 30px;
        --radius-full: 9999px;
        --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* page wrapper – only background, does not affect header */
    .faq-page-wrapper {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        overflow-x: hidden;
        font-family: 'Inter', sans-serif;
    }

    /* container */
    .faq-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ===== HERO SECTION ===== */
        .how-hero {
            position: relative;
            padding: 120px 0 80px;
            background: linear-gradient(135deg, #0b1120 0%, #19223f 50%, #2d1b4b 100%);
            overflow: hidden;
        }

        .how-hero .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            text-align: center;
            color: white;
            position: relative;
            z-index: 2;
        }

        .how-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 8px 20px;
            border-radius: 40px;
            margin-bottom: 30px;
            font-size: 0.9rem;
        }

        .how-badge i {
            color: #ffd700;
        }

        .how-title {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .how-title span {
            background: linear-gradient(135deg, #ffd700, #ff8a5c);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .how-description {
            font-size: 1.2rem;
            max-width: 700px;
            margin: 0 auto;
            color: rgba(255,255,255,0.9);
            line-height: 1.6;
        }

    /* Additional styles for privacy policy */
    .policy-highlight {
        background: linear-gradient(135deg, #da0b4e 0%, #4338ca 100%);
        color: white;
        padding: 3px 10px;
        border-radius: 4px;
        font-weight: 600;
        font-size: 0.8rem;
        display: inline-block;
        margin-right: 10px;
    }
    
    .consent-box {
        background: #e8f5e9;
        border-left: 4px solid #4caf50;
        padding: 20px;
        border-radius: 8px;
        margin: 25px 0;
    }
    
    .consent-box i {
        color: #4caf50;
        font-size: 1.5rem;
        margin-right: 15px;
    }
    
    .data-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .data-table th {
        background: var(--primary);
        color: white;
        padding: 12px;
        text-align: left;
    }
    
    .data-table td {
        padding: 12px;
        border-bottom: 1px solid #e9ecef;
    }
    
    .data-table tr:last-child td {
        border-bottom: none;
    }
    
    .data-table tr:hover td {
        background: #f8f9fa;
    }
    
    .sms-opt-out {
        background: #fff3e0;
        border-left: 4px solid #ff9800;
        padding: 20px;
        border-radius: 8px;
        margin: 25px 0;
    }
    
    .sms-opt-out h4 {
        color: #e65100;
        margin-bottom: 10px;
    }
    
    .sms-opt-out ul {
        margin: 10px 0 0 20px;
    }
    
    .contact-block {
        background: var(--light);
        padding: 25px;
        border-radius: 12px;
        margin: 30px 0;
        border: 1px solid var(--gray-light);
    }
    
    .contact-block h3 {
        color: var(--dark);
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .contact-block h3 i {
        color: var(--primary);
    }
    
    .contact-methods {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }
    
    .contact-method {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .contact-method i {
        font-size: 1.5rem;
        color: var(--primary);
        margin-bottom: 10px;
    }
    
    .contact-method h4 {
        margin-bottom: 5px;
        color: var(--dark);
    }
    
    .contact-method p {
        color: var(--gray);
        font-size: 0.9rem;
    }
    
    .contact-method .phone {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--primary);
    }

    /* Additional styles for privacy page */
    .privacy-hero {
        padding: 180px 0 80px;
        background: linear-gradient(135deg, #da0b4e 0%, #4338ca 100%);
        position: relative;
        overflow: hidden;
        color: white;
    }
    
    .privacy-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        z-index: 1;
    }
    
    .privacy-hero .container {
        position: relative;
        z-index: 2;
    }
    
    .hero-title {
        font-size: 3.5rem;
        margin-bottom: 15px;
        line-height: 1.2;
    }
    
    .hero-title .highlight {
        background: linear-gradient(135deg, #00bcd4, #2196f3);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .hero-subtitle {
        font-size: 1.25rem;
        opacity: 0.9;
        margin-bottom: 20px;
    }
    
    .last-updated {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        padding: 12px 24px;
        border-radius: 50px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .toc-section {
        padding: 60px 0;
        background: #f8fafc;
        border-bottom: 1px solid #e9ecef;
    }
    
    .toc-container {
        max-width: 1000px;
        margin: 0 auto;
    }
    
    .toc-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 15px;
    }
    
    .toc-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px 20px;
        background: white;
        border-radius: 8px;
        text-decoration: none;
        color: var(--primary);
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }
    
    .toc-item:hover {
        border-color: var(--primary);
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .toc-number {
        font-weight: 700;
        color: var(--primary);
    }
    
    .privacy-content-section {
        padding: 80px 0;
        background: white;
    }
    
    .privacy-container {
        max-width: 1000px;
        margin: 0 auto;
    }
    
    .privacy-article {
        margin-bottom: 60px;
        padding-bottom: 60px;
        border-bottom: 1px solid #e9ecef;
    }
    
    .privacy-article:last-child {
        border-bottom: none;
    }
    
    .article-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        padding-bottom: 15px;
        border-bottom: 2px solid #4a6cf7;
    }
    
    .article-header h2 {
        font-size: 2rem;
        color: var(--primary);
    }
    
    .article-number {
        color: var(--primary);
        font-weight: 700;
        margin-right: 10px;
    }
    
    .status-badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .status-badge.important {
        background: #fff3cd;
        color: var(--primary);
        border: 1px solid #ffeaa7;
    }
    
    .status-badge.security {
        background: #d1ecf1;
        color: var(--primary);
        border: 1px solid #bee5eb;
    }
    
    .status-badge.updated {
        background: #d4edda;
        color: var(--primary);
        border: 1px solid #c3e6cb;
    }
    
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin: 30px 0;
    }
    
    .info-card {
        background: #f8f9fa;
        padding: 25px;
        border-radius: 8px;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }
    
    .info-card:hover {
        transform: translateY(-5px);
        border-color: var(--primary);
        box-shadow: 0 10px 20px rgba(74, 108, 247, 0.1);
    }
    
    .info-card i {
        font-size: 2rem;
        color: var(--primary);
        margin-bottom: 15px;
    }
    
    .info-card h4 {
        margin-bottom: 10px;
        color: var(--primary);
    }
    
    .info-card p {
        margin: 0;
        color: #6c757d;
        font-size: 0.95rem;
    }
    
    .notice-box {
        padding: 20px;
        border-radius: 8px;
        margin: 25px 0;
        display: flex;
        gap: 15px;
        align-items: flex-start;
    }
    
    .notice-box.info {
        background: #e3f2fd;
        border-left: 4px solid #2196f3;
    }
    
    .notice-box.success {
        background: #e8f5e9;
        border-left: 4px solid #4caf50;
    }
    
    .notice-box.warning {
        background: #fff3e0;
        border-left: 4px solid #ff9800;
    }
    
    .notice-box i {
        font-size: 1.5rem;
    }
    
    .notice-box.info i {
        color: var(--primary);
    }
    
    .notice-box.success i {
        color: var(--primary);
    }
    
    .notice-box.warning i {
        color: #ff9800;
    }
    
    .rights-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin: 30px 0;
    }
    
    .right-card {
        background: #f8f9fa;
        padding: 25px;
        border-radius: 8px;
        text-align: center;
        border: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }
    
    .right-card:hover {
        transform: translateY(-5px);
        border-color: #4a6cf7;
    }
    
    .right-icon {
        width: 60px;
        height: 60px;
        background: #e3f2fd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        color: var(--primary);
        font-size: 1.5rem;
    }
    
    .cookie-preferences {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 25px;
        margin: 30px 0;
    }
    
    .preference-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        border-bottom: 1px solid #e9ecef;
    }
    
    .preference-item:last-child {
        border-bottom: none;
    }
    
    .preference-info h5 {
        margin-bottom: 5px;
    }
    
    .preference-info p {
        margin: 0;
        color: #6c757d;
        font-size: 0.9rem;
    }
    
    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 24px;
    }
    
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .3s;
        border-radius: 24px;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }
    
    input:checked + .slider {
        background-color: #4a6cf7;
    }
    
    input:checked + .slider:before {
        transform: translateX(26px);
    }
    
    input:disabled + .slider {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .quick-nav {
        position: sticky;
        bottom: 20px;
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
        border: 1px solid #e9ecef;
        margin-top: 40px;
    }
    
    .nav-select {
        width: 100%;
        padding: 12px;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        font-size: 1rem;
        cursor: pointer;
    }
    
    .acceptance-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
        border-top: 1px solid #e9ecef;
        padding: 20px 0;
        z-index: 999;
    }
    
    .acceptance-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
    }
    
    .acceptance-actions {
        display: flex;
        gap: 15px;
    }

    /* Smooth Scrolling for Anchor Links */
    html {
        scroll-behavior: smooth;
        scroll-padding-top: 100px; /* Prevents the header from covering the section title */
    }

    /* Enhanced Hero Section with Animation */
    .privacy-hero .hero-content {
        animation: fadeInUp 1s ease-out;
    }

    /* Better Breadcrumb Styling */
    .breadcrumb {
        display: inline-block;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(5px);
        padding: 8px 20px;
        border-radius: 50px;
        margin-bottom: 30px;
        font-size: 0.95rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .breadcrumb a {
        color: white;
        text-decoration: none;
        opacity: 0.9;
        transition: opacity 0.3s ease;
    }

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

    .breadcrumb span {
        color: white;
        font-weight: 600;
    }

    /* Improved Article Content Typography */
    .article-content h3 {
        color: var(--primary);
        margin: 30px 0 15px 0;
        font-size: 1.5rem;
        position: relative;
        padding-left: 15px;
    }

    .article-content h3::before {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        bottom: 5px;
        width: 4px;
        background: linear-gradient(135deg, #da0b4e 0%, #4338ca 100%);
        border-radius: 2px;
    }

    .article-content h4 {
        color: #2d3748;
        margin: 20px 0 10px 0;
        font-size: 1.2rem;
    }

    .article-content p {
        line-height: 1.8;
        color: #4a5568;
        margin-bottom: 20px;
    }

    .article-content ul, .article-content ol {
        margin: 15px 0 25px 20px;
        line-height: 1.8;
        color: #4a5568;
    }

    .article-content li {
        margin-bottom: 8px;
    }

    .article-content li strong {
        color: var(--primary);
    }

    /* Enhanced Info Cards */
    .info-card {
        position: relative;
        overflow: hidden;
    }

    .info-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #da0b4e, #4338ca);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .info-card:hover::before {
        transform: scaleX(1);
    }

    /* Better Notice Boxes */
    .notice-box {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .notice-box:hover {
        transform: translateX(5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .notice-box i {
        transition: transform 0.3s ease;
    }

    .notice-box:hover i {
        transform: scale(1.1);
    }

    /* Table of Contents Hover Effect Enhancement */
    .toc-item i {
        margin-left: auto;
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s ease;
    }

    .toc-item:hover i {
        opacity: 1;
        transform: translateX(0);
    }

    /* Rights Cards Enhancement */
    .right-card {
        position: relative;
        z-index: 1;
    }

    .right-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        background: linear-gradient(135deg, rgba(218, 11, 78, 0.05) 0%, rgba(67, 56, 202, 0.05) 100%);
        transition: height 0.3s ease;
        z-index: -1;
        border-radius: 8px;
    }

    .right-card:hover::after {
        height: 100%;
    }

    /* Quick Navigation Enhancement */
    .quick-nav {
        background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
        border: 1px solid #e2e8f0;
    }

    .quick-nav h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--primary);
        margin-bottom: 15px;
    }

    .quick-nav h3 i {
        color: #da0b4e;
    }

    .nav-select {
        background-color: white;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .nav-select:hover {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.1);
    }

    .nav-select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.2);
    }

    /* Acceptance Bar Animation */
    .acceptance-bar {
        transition: transform 0.3s ease;
        transform: translateY(0);
    }

    .acceptance-bar.hidden {
        transform: translateY(100%);
    }

    /* Button Enhancements */
    .btn {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s ease, height 0.6s ease;
    }

    .btn:active::after {
        width: 200px;
        height: 200px;
    }

    .btn-primary {
        background: linear-gradient(135deg, #da0b4e 0%, #4338ca 100%);
        border: none;
        color: white;
        padding: 12px 30px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(218, 11, 78, 0.2);
    }

    .btn-outline {
        background: transparent;
        border: 2px solid var(--primary);
        color: var(--primary);
        padding: 10px 28px;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-outline:hover {
        background: var(--primary);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(74, 108, 247, 0.2);
    }

    /* Table of Contents Section Title */
    .toc-container h2 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 25px;
        color: var(--primary);
        font-size: 1.8rem;
    }

    .toc-container h2 i {
        color: #da0b4e;
    }

    /* Article Header Enhancement */
    .article-header {
        position: relative;
        padding-bottom: 15px;
    }

    .article-header::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 100px;
        height: 2px;
        background: linear-gradient(90deg, #da0b4e, #4338ca);
    }

    /* Mobile Responsive Enhancements */
    @media (max-width: 768px) {
        .privacy-hero {
            padding: 150px 0 60px;
        }
        
        .hero-title {
            font-size: 2.2rem;
        }
        
        .hero-subtitle {
            font-size: 1.1rem;
        }
        
        .last-updated {
            padding: 10px 20px;
            font-size: 0.9rem;
        }
        
        .article-header h2 {
            font-size: 1.6rem;
        }
        
        .info-grid, .rights-grid {
            grid-template-columns: 1fr;
        }
        
        .contact-methods {
            grid-template-columns: 1fr;
        }
        
        .breadcrumb {
            font-size: 0.85rem;
            padding: 6px 15px;
        }
    }

    @media (max-width: 480px) {
        .privacy-hero {
            padding: 130px 0 50px;
        }
        
        .hero-title {
            font-size: 1.8rem;
        }
        
        .hero-subtitle {
            font-size: 1rem;
        }
        
        .last-updated {
            flex-direction: column;
            text-align: center;
            gap: 5px;
        }
        
        .article-header h2 {
            font-size: 1.4rem;
        }
        
        .status-badge {
            font-size: 0.7rem;
            padding: 3px 8px;
        }
        
        .toc-grid {
            grid-template-columns: 1fr;
        }
        
        .notice-box {
            flex-direction: column;
            text-align: center;
        }
        
        .consent-box {
            text-align: center;
        }
        
        .consent-box div {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .acceptance-content {
            flex-direction: column;
            text-align: center;
        }
        
        .acceptance-actions {
            flex-direction: column;
            width: 100%;
        }
    }

    /* Print Styles */
    @media print {
        .header, .footer, .toc-section, .quick-nav, .acceptance-bar {
            display: none;
        }
        
        .privacy-hero {
            background: none;
            color: black;
            padding: 50px 0;
        }
        
        .hero-title .highlight {
            -webkit-text-fill-color: black;
            background: none;
        }
        
        .last-updated {
            border: 1px solid #ccc;
            background: none;
            color: black;
        }
        
        .privacy-article {
            page-break-inside: avoid;
        }
        
        a {
            text-decoration: none;
            color: black;
        }
    }

    /* Focus States for Accessibility */
    a:focus-visible, button:focus-visible, .nav-select:focus-visible {
        outline: 3px solid #da0b4e;
        outline-offset: 3px;
    }

    /* Smooth Hover for TOC Items */
    .toc-item {
        position: relative;
        z-index: 1;
    }

    .toc-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(218, 11, 78, 0.05) 0%, rgba(67, 56, 202, 0.05) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
        border-radius: 8px;
    }

    .toc-item:hover::before {
        opacity: 1;
    }

    /* Data Table Enhancement (if you add tables later) */
    .data-table-container {
        overflow-x: auto;
        margin: 30px 0;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    /* SMS Opt-Out Enhancement */
    .sms-opt-out {
        position: relative;
        overflow: hidden;
    }

    .sms-opt-out::before {
        content: '\f10b';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        right: -20px;
        bottom: -20px;
        font-size: 100px;
        opacity: 0.05;
        color: #ff9800;
        transform: rotate(-15deg);
    }

    /* Timeline Style Privacy Sections */
    .privacy-timeline {
        position: relative;
        max-width: 1200px;
        margin: 50px auto;
        padding: 20px;
    }

    .privacy-timeline::before {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #da0b4e, #4338ca, #da0b4e);
        border-radius: 4px;
    }

    .timeline-article {
        position: relative;
        margin: 50px 0;
        opacity: 0;
        transform: translateY(50px);
        animation: slideInTimeline 0.8s ease forwards;
    }

    .timeline-article:nth-child(odd) {
        padding-right: 50%;
    }

    .timeline-article:nth-child(even) {
        padding-left: 50%;
    }

    .timeline-article::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background: white;
        border: 4px solid #da0b4e;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        box-shadow: 0 0 0 4px rgba(218, 11, 78, 0.2);
    }

    .timeline-article:nth-child(odd)::before {
        right: -10px;
    }

    .timeline-article:nth-child(even)::before {
        left: -10px;
    }

    .timeline-content {
        background: white;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        position: relative;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        border: 1px solid rgba(218, 11, 78, 0.1);
    }

    .timeline-content:hover {
        transform: scale(1.02) translateY(-10px);
        box-shadow: 0 30px 60px rgba(218, 11, 78, 0.15);
        border-color: #da0b4e;
    }

    .timeline-number {
        position: absolute;
        top: -20px;
        left: -20px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #da0b4e, #4338ca);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
        font-weight: bold;
        box-shadow: 0 10px 20px rgba(218, 11, 78, 0.3);
    }

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

    @media (max-width: 768px) {
        .privacy-timeline::before {
            left: 30px;
        }
        
        .timeline-article:nth-child(odd),
        .timeline-article:nth-child(even) {
            padding: 0 0 0 80px;
        }
        
        .timeline-article::before {
            left: 20px !important;
            right: auto !important;
        }
    }

    /* Glassmorphism Style */
    .glass-container {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 30px;
        padding: 40px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .glass-card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(10px);
        border-radius: 24px;
        padding: 30px;
        margin: 20px 0;
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
        transition: all 0.3s ease;
    }

    .glass-card:hover {
        background: rgba(255, 255, 255, 0.9);
        transform: translateY(-5px) scale(1.01);
        box-shadow: 0 15px 45px rgba(218, 11, 78, 0.15);
    }

    .glass-icon {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, rgba(218, 11, 78, 0.2), rgba(67, 56, 202, 0.2));
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #da0b4e;
        margin-bottom: 20px;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }


    /* 3D Parallax Style */
    .parallax-container {
        perspective: 1000px;
    }

    .parallax-card {
        transform-style: preserve-3d;
        transition: transform 0.5s ease;
        background: white;
        border-radius: 20px;
        padding: 30px;
        margin: 30px 0;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        position: relative;
    }

    .parallax-card:hover {
        transform: rotateX(5deg) rotateY(5deg) translateZ(20px);
    }

    .parallax-card::before {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background: linear-gradient(135deg, #da0b4e, #4338ca);
        border-radius: 25px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .parallax-card:hover::before {
        opacity: 0.1;
    }

    .parallax-layer {
        transform: translateZ(30px);
    }

    .parallax-deep {
        transform: translateZ(50px);
        color: #da0b4e;
        font-weight: bold;
    }