/* Accessibility Improvements */
    .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* ============================================
           HERO SECTION - Enhanced with Visual Block
        ============================================ */
    #hakim-isolated-hero {
        padding: var(--space-3xl) 0 var(--space-2xl);
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg,
                rgba(247, 244, 239, 0.95) 0%,
                rgba(254, 254, 254, 0.98) 100%);
    }

    /* Floating Background Elements */
    .hero-bg-element {
        position: absolute;
        border-radius: 50%;
        opacity: 0.1;
        z-index: 0;
        pointer-events: none;
        animation: float 20s infinite ease-in-out;
    }

    .hero-bg-element:nth-child(1) {
        top: 10%;
        left: 5%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, var(--emerald) 0%, transparent 70%);
        animation-delay: 0s;
    }

    .hero-bg-element:nth-child(2) {
        top: 60%;
        right: 10%;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, var(--primary-teal) 0%, transparent 70%);
        animation-delay: 5s;
    }

    .hero-bg-element:nth-child(3) {
        bottom: 20%;
        left: 15%;
        width: 150px;
        height: 150px;
        background: radial-gradient(circle, var(--deep-blue) 0%, transparent 70%);
        animation-delay: 10s;
    }

    /* Hero Grid Layout */
    .hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
        align-items: center;
        position: relative;
        z-index: 2;
    }

    /* Trust Strip */
    .trust-strip {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, var(--deep-blue) 0%, var(--primary-teal) 100%);
        color: white;
        padding: var(--space-xs) 0;
        text-align: center;
        font-size: var(--text-sm);
        font-weight: 500;
        letter-spacing: 0.5px;
        z-index: 100;
    }

    .trust-strip i {
        margin-right: var(--space-xs);
        color: var(--emerald);
    }

    /* Hero Badge */
    .hakim-badge {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(90deg, var(--emerald) 0%, var(--teal-light) 100%);
        color: white;
        padding: var(--space-xs) var(--space-lg);
        border-radius: 100px;
        font-size: var(--text-sm);
        font-weight: 500;
        margin-bottom: var(--space-xl);
        box-shadow: var(--shadow-soft);
        animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .hakim-badge::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.7s ease;
    }

    .hakim-badge:hover::before {
        left: 100%;
    }

    .hakim-badge i {
        margin-right: var(--space-sm);
        font-size: var(--text-base);
    }

    /* Hero Title */
    .hakim-hero-title {
        font-size: var(--text-5xl);
        line-height: 1.1;
        margin-bottom: var(--space-lg);
        background: linear-gradient(135deg, var(--deep-blue) 0%, var(--primary-teal) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
    }

    /* Hero Subtitle */
    .hakim-hero-subtitle {
        font-size: var(--text-xl);
        line-height: 1.8;
        color: var(--gray-dark);
        margin-bottom: var(--space-xl);
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
    }

    /* Hero Buttons - Enhanced */
    .hakim-hero-buttons {
        display: flex;
        gap: var(--space-md);
        margin-bottom: var(--space-xl);
        flex-wrap: wrap;
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
    }

    .hakim-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-md) var(--space-xl);
        border-radius: var(--border-radius-sm);
        font-weight: 600;
        font-size: var(--text-base);
        text-decoration: none;
        transition: var(--transition-base);
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .hakim-btn i {
        margin-right: var(--space-sm);
        transition: transform 0.3s ease;
    }

    .hakim-btn-primary {
        background: linear-gradient(135deg, var(--primary-teal) 0%, var(--emerald) 100%);
        color: white;
        box-shadow: var(--shadow-soft);
    }

    .hakim-btn-primary:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-medium);
    }

    .hakim-btn-primary:hover i {
        transform: translateX(4px);
    }

    .hakim-btn-outline {
        background: transparent;
        color: var(--primary-teal);
        border: 2px solid var(--primary-teal);
    }

    .hakim-btn-outline:hover {
        background: rgba(10, 108, 124, 0.05);
        transform: translateY(-4px);
        box-shadow: var(--shadow-soft);
    }

    /* Hero Visual Block */
    .hero-visual {
        position: relative;
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
        perspective: 1000px;
    }

    .visual-container {
        position: relative;
        width: 100%;
        height: 500px;
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow-heavy);
        transform-style: preserve-3d;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .visual-container:hover {
        transform: translateY(-10px) rotateX(5deg);
    }

    .doctor-portrait {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .visual-container:hover .doctor-portrait {
        transform: scale(1.05);
    }

    .dna-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg,
                rgba(35, 139, 127, 0.15) 0%,
                rgba(10, 108, 124, 0.1) 100%);
        mix-blend-mode: multiply;
    }

    .dna-helix {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: 80%;
        opacity: 0.3;
        background: radial-gradient(circle, transparent 30%, var(--emerald) 70%);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20,50 Q50,30 80,50 Q50,70 20,50' stroke='white' stroke-width='2' fill='none'/%3E%3Cpath d='M20,50 Q50,70 80,50' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        animation: rotate 20s linear infinite;
    }

    /* Floating Statistics */
    .floating-stats {
        position: absolute;
        right: 5%;
        bottom: 10%;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        z-index: 3;
    }

    .stat-badge {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--border-radius-sm);
        box-shadow: var(--shadow-soft);
        animation: floatStat 6s ease-in-out infinite;
        transform-origin: center;
        transition: var(--transition-base);
    }

    .stat-badge:hover {
        transform: scale(1.05) translateY(-5px);
        box-shadow: var(--shadow-medium);
    }

    .stat-badge:nth-child(1) {
        animation-delay: 0s;
    }

    .stat-badge:nth-child(2) {
        animation-delay: 2s;
    }

    .stat-badge:nth-child(3) {
        animation-delay: 4s;
    }

    .stat-badge i {
        color: var(--emerald);
        margin-right: var(--space-xs);
    }

    /* Trust Indicators */
    .hakim-trust-indicators {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--space-md);
        margin-bottom: var(--space-xl);
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
    }

    .hakim-trust-item {
        display: flex;
        align-items: center;
        background: white;
        padding: var(--space-md);
        border-radius: var(--border-radius-sm);
        box-shadow: var(--shadow-soft);
        transition: var(--transition-base);
        position: relative;
        overflow: hidden;
    }

    .hakim-trust-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: linear-gradient(to bottom, var(--emerald) 0%, var(--primary-teal) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .hakim-trust-item:hover {
        transform: translateY(-5px) scale(1.02);
        box-shadow: var(--shadow-medium);
    }

    .hakim-trust-item:hover::before {
        opacity: 1;
    }

    .hakim-trust-item i {
        color: var(--emerald);
        margin-right: var(--space-sm);
        font-size: var(--text-xl);
        min-width: 24px;
    }

    /* Protocol Snapshot */
    .hakim-protocol-snapshot {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--space-md);
        animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
    }

    .snapshot-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: white;
        padding: var(--space-lg);
        border-radius: var(--border-radius-sm);
        box-shadow: var(--shadow-soft);
        transition: var(--transition-base);
        position: relative;
        overflow: hidden;
    }

    .snapshot-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--emerald) 0%, var(--primary-teal) 100%);
        transform: translateX(-100%);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .snapshot-item:hover::after {
        transform: translateX(0);
    }


    .snapshot-item i {
        font-size: var(--text-3xl);
        color: var(--primary-teal);
        margin-bottom: var(--space-md);
        height: 70px;
        width: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 108, 124, 0.08);
        border-radius: 50%;
        transition: var(--transition-base);
    }

    .snapshot-item:hover i {
        transform: scale(1.1) rotate(10deg);
        background: rgba(10, 108, 124, 0.15);
    }

    /* ============================================
           ABOUT DOCTOR SECTION - Enhanced
        ============================================ */
    .doctor-section {
        padding: var(--space-3xl) 0;
        background-color: var(--beige);
        position: relative;
        overflow: hidden;
    }

    .doctor-row {
        display: flex;
        flex-wrap: wrap;
        background: white;
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow-heavy);
        position: relative;
        z-index: 2;
        transform: translateY(50px);
        opacity: 0;
        animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    }

    .doctor-content-col {
        flex: 0 0 100%;
        max-width: 100%;
        padding: var(--space-3xl);
    }

    .subheading {
        display: block;
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--emerald);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: var(--space-md);
        position: relative;
        padding-left: var(--space-lg);
        text-align: center;
    }

    .subheading::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 2px;
        background-color: var(--emerald);
    }

    .doctor-section h2 {
        font-size: var(--text-4xl);
        margin-bottom: var(--space-xl);
        line-height: 1.1;
        text-align: center;
    }

    .doctor-section p {
        font-size: var(--text-lg);
        line-height: 1.8;
        margin-bottom: var(--space-lg);
        width: 100%;
    }

    /* Doctor Profile */
    .founder {
        display: flex;
        align-items: center;
        background: linear-gradient(135deg, rgba(247, 244, 239, 0.8), rgba(255, 255, 255, 0.9));
        padding: var(--space-xl);
        border-radius: var(--border-radius);
        margin-top: var(--space-xl);
        border: 1px solid rgba(10, 108, 124, 0.1);
        transition: var(--transition-base);
    }

    .founder:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-soft);
    }

    .founder .img {
        flex: 0 0 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: var(--space-xl);
        border: 4px solid white;
        box-shadow: var(--shadow-soft);
        transition: var(--transition-base);
    }

    .founder:hover .img {
        transform: scale(1.05);
    }

    .founder .img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .founder .text h3 {
        margin-bottom: var(--space-xs);
        font-size: var(--text-2xl);
    }

    .founder .position {
        display: block;
        font-weight: 600;
        color: var(--primary-teal);
        font-size: var(--text-sm);
        margin-bottom: var(--space-xs);
    }

    /* ============================================
           PROTOCOL SECTION - Enhanced Cards
        ============================================ */
    .protocol-section {
        padding: var(--space-3xl) 0;
        background: linear-gradient(135deg, rgba(247, 244, 239, 0.3), rgba(255, 255, 255, 1));
        position: relative;
    }

    .section-header {
        text-align: center;
        max-width: 800px;
        margin: 0 auto var(--space-3xl);
        transform: translateY(30px);
        opacity: 0;
        animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
    }

    .section-header h2 {
        font-size: var(--text-4xl);
        margin-bottom: var(--space-lg);
        background: linear-gradient(135deg, var(--deep-blue) 0%, var(--primary-teal) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .protocol-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-xl);
        counter-reset: protocol-counter;
    }

    .protocol-card {
        background: white;
        padding: var(--space-2xl);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-soft);
        transition: var(--transition-base);
        text-align: justify;
        position: relative;
        overflow: hidden;
        transform: translateY(50px);
        opacity: 0;
        animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .protocol-card:nth-child(1) {
        animation-delay: 0.2s;
    }

    .protocol-card:nth-child(2) {
        animation-delay: 0.4s;
    }

    .protocol-card:nth-child(3) {
        animation-delay: 0.6s;
    }

    .protocol-card:nth-child(4) {
        animation-delay: 0.8s;
    }

    .protocol-card::before {
        counter-increment: protocol-counter;
        content: counter(protocol-counter);
        position: absolute;
        top: -20px;
        right: 20px;
        font-size: 8rem;
        font-weight: 900;
        color: rgba(10, 108, 124, 0.05);
        font-family: 'Playfair Display', serif;
        line-height: 1;
    }

    .protocol-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--emerald) 0%, var(--primary-teal) 100%);
    }

    .protocol-card i {
        font-size: var(--text-4xl);
        color: var(--primary-teal);
        margin-bottom: var(--space-xl);
        height: 100px;
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 108, 124, 0.08);
        border-radius: 50%;
        margin: 0 auto var(--space-xl);
        transition: var(--transition-base);
    }

    .protocol-card:hover i {
        transform: scale(1.1) rotate(360deg);
        background: linear-gradient(135deg, var(--emerald) 0%, var(--primary-teal) 100%);
        color: white;
    }

    .protocol-card h3 {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-md);
        color: var(--deep-blue);
        text-align: center;

    }

    /* ============================================
           SERVICES SECTION - Enhanced Cards
        ============================================ */
    .services-section {
        padding: var(--space-3xl) 0;
        background-color: var(--off-white);
    }

    .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: var(--space-xl);
    }

    .service-card {
        background: white;
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--shadow-soft);
        transition: var(--transition-base);
        height: 100%;
        transform: translateY(50px);
        opacity: 0;
        animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .service-card:nth-child(1) {
        animation-delay: 0.2s;
    }

    .service-card:nth-child(2) {
        animation-delay: 0.4s;
    }

    .service-card:nth-child(3) {
        animation-delay: 0.6s;
    }

    .service-image {
        height: 250px;
        position: relative;
        overflow: hidden;
    }

    .service-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, rgba(10, 108, 124, 0.2), transparent);
        z-index: 1;
        transition: opacity 0.6s ease;
    }

    .service-card:hover .service-image::before {
        opacity: 0.7;
    }

    .service-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .service-card:hover .service-image img {
        transform: scale(1.1);
    }

    .service-icon {
        position: absolute;
        top: var(--space-lg);
        right: var(--space-lg);
        background: white;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-teal);
        font-size: var(--text-2xl);
        box-shadow: var(--shadow-medium);
        z-index: 2;
        transition: var(--transition-base);
    }

    .service-card:hover .service-icon {
        transform: scale(1.1) rotate(15deg);
        background: var(--primary-teal);
        color: white;
    }

    .service-content {
        padding: var(--space-2xl);
    }

    .service-title {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-md);
        color: var(--deep-blue);
    }

    .service-button {
        display: inline-flex;
        align-items: center;
        color: var(--primary-teal);
        font-weight: 600;
        text-decoration: none;
        transition: var(--transition-base);
        position: relative;
        overflow: hidden;
    }

    .service-button::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--emerald) 0%, var(--primary-teal) 100%);
        transform: translateX(-100%);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .service-button:hover::after {
        transform: translateX(0);
    }

    .service-button:hover {
        color: var(--emerald);
    }

    .service-button:hover i {
        transform: translateX(8px);
    }

    /* ============================================
           PROCESS SECTION - Enhanced
        ============================================ */
    .process-section {
        padding: var(--space-3xl) 0;
        background: linear-gradient(135deg, rgba(10, 108, 124, 0.02) 0%, rgba(35, 139, 127, 0.02) 100%);
        position: relative;
    }

    .process-steps {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-top: var(--space-3xl);
    }

    .process-steps::before {
        content: '';
        position: absolute;
        top: 60px;
        left: 10%;
        width: 80%;
        height: 3px;
        background: linear-gradient(90deg, var(--emerald) 0%, var(--primary-teal) 100%);
        z-index: 1;
        animation: lineDraw 2s ease-out forwards;
    }

    .process-step {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 var(--space-sm);
        position: relative;
        z-index: 2;
        transform: translateY(50px);
        opacity: 0;
        animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .process-step:nth-child(1) {
        animation-delay: 0.2s;
    }

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

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

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

    .step-icon-container {
        position: relative;
        margin-bottom: var(--space-xl);
    }

    .step-icon {
        width: 100px;
        height: 100px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-teal);
        font-size: var(--text-3xl);
        box-shadow: var(--shadow-heavy);
        position: relative;
        z-index: 2;
        transition: var(--transition-base);
    }

    .step-number {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 40px;
        height: 40px;
        background: var(--emerald);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: var(--text-lg);
        box-shadow: var(--shadow-soft);
    }

    .step-content h3 {
        font-size: var(--text-xl);
        margin-bottom: var(--space-md);
    }

    /* ============================================
           TESTIMONIAL PLACEHOLDER
        ============================================ */
    .testimonial-section {
        padding: var(--space-3xl) 0;
        background: var(--beige);
    }

    .testimonial-slider {
        max-width: 800px;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }

    .testimonial-track {
        display: flex;
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .testimonial-slide {
        min-width: 100%;
        padding: var(--space-2xl);
        background: white;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow-soft);
        text-align: center;
    }

    .testimonial-quote {
        font-size: var(--text-xl);
        font-style: italic;
        color: var(--gray-dark);
        margin-bottom: var(--space-lg);
        line-height: 1.8;
    }

    .testimonial-author {
        font-weight: 600;
        color: var(--primary-teal);
    }

    /* ============================================
           STRONG CTA SECTION
        ============================================ */
    .cta-section {
        padding: var(--space-3xl) 0;
        background: linear-gradient(135deg, var(--deep-blue) 0%, var(--primary-teal) 100%);
        color: white;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .cta-section::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1%, transparent 1%);
        background-size: 30px 30px;
        animation: moveBackground 20s linear infinite;
    }

    .cta-content {
        position: relative;
        z-index: 2;
        transform: translateY(50px);
        opacity: 0;
        animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    }

    .cta-title {
        font-size: var(--text-5xl);
        margin-bottom: var(--space-lg);
        color: white;
    }

    .cta-subtitle {
        font-size: var(--text-xl);
        margin-bottom: var(--space-2xl);
        opacity: 0.9;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .cta-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-lg) var(--space-2xl);
        background: white;
        color: var(--primary-teal);
        border-radius: var(--border-radius-sm);
        font-weight: 600;
        font-size: var(--text-xl);
        text-decoration: none;
        transition: var(--transition-base);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .cta-button:hover {
        transform: translateY(-8px) scale(1.05);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    /* ============================================
           FAQ SECTION - Enhanced
        ============================================ */
    .faq-section {
        padding: var(--space-3xl) 0;
        background-color: var(--beige);
    }

    .faq-list {
        max-width: 800px;
        margin: 0 auto;
    }

    .faq-item {
        background: white;
        border-radius: var(--border-radius-sm);
        padding: var(--space-xl) var(--space-2xl);
        margin-bottom: var(--space-md);
        box-shadow: var(--shadow-soft);
        transition: var(--transition-base);
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transform: translateX(-20px);
        opacity: 0;
        animation: slideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .faq-item:nth-child(1) {
        animation-delay: 0.2s;
    }

    .faq-item:nth-child(2) {
        animation-delay: 0.4s;
    }

    .faq-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 4px;
        background: linear-gradient(to bottom, var(--emerald) 0%, var(--primary-teal) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .faq-item:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-medium);
    }

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

    .faq-item h3 {
        font-size: var(--text-xl);
        margin-bottom: var(--space-md);
        color: var(--deep-blue);
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: color 0.3s ease;
    }

    .faq-item h3::after {
        content: '+';
        color: var(--primary-teal);
        font-size: var(--text-3xl);
        font-weight: 300;
        transition: transform 0.3s ease;
    }

    .faq-item.active h3 {
        color: var(--primary-teal);
    }

    .faq-item.active h3::after {
        content: '−';
        transform: rotate(180deg);
    }

    .faq-item p {
        color: var(--gray-dark);
        line-height: 1.8;
        display: none;
        animation: fadeIn 0.6s ease;
    }

    .faq-item.active p {
        display: block;
    }

    .view-all-faq {
        text-align: center;
        margin-top: var(--space-2xl);
    }

    .view-all-faq a {
        display: inline-flex;
        align-items: center;
        padding: var(--space-md) var(--space-xl);
        background: linear-gradient(135deg, var(--primary-teal) 0%, var(--emerald) 100%);
        color: white;
        text-decoration: none;
        border-radius: var(--border-radius-sm);
        font-weight: 600;
        transition: var(--transition-base);
    }

    .view-all-faq a:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-medium);
    }

    /* ============================================
           ANIMATIONS
        ============================================ */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }

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

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }

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

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }

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

    @keyframes float {

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

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

    @keyframes floatStat {

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

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

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

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

    @keyframes lineDraw {
        from {
            width: 0;
        }

        to {
            width: 80%;
        }
    }

    @keyframes moveBackground {
        from {
            transform: translate(0, 0);
        }

        to {
            transform: translate(30px, 30px);
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* ============================================
           RESPONSIVE DESIGN
        ============================================ */
    @media (max-width: 1200px) {
        :root {
            --text-5xl: 2.5rem;
            --text-4xl: 2rem;
            --text-3xl: 1.75rem;
            --space-3xl: 4rem;
        }
    }

    @media (max-width: 992px) {
        .hero-grid {
            grid-template-columns: 1fr;
            gap: var(--space-xl);
        }

        .hero-visual {
            order: -1;
            max-width: 500px;
            margin: 0 auto;
        }

        .floating-stats {
            position: relative;
            right: auto;
            bottom: auto;
            flex-direction: row;
            justify-content: center;
            margin-top: var(--space-xl);
            flex-wrap: wrap;
        }

        .doctor-image-col,
        .doctor-content-col {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .doctor-image-col {
            min-height: 400px;
        }

        .process-steps {
            flex-direction: column;
            gap: var(--space-2xl);
        }

        .process-steps::before {
            display: none;
        }
    }

    @media (max-width: 768px) {
        :root {
            --text-5xl: 2rem;
            --text-4xl: 1.75rem;
            --text-3xl: 1.5rem;
            --space-3xl: 3rem;
            --space-2xl: 2.5rem;
        }

        .hakim-hero-buttons {
            flex-direction: column;
        }

        .hakim-btn {
            width: 100%;
            justify-content: center;
        }

        .hakim-trust-indicators {
            grid-template-columns: 1fr;
        }

        .protocol-grid,
        .services-grid {
            grid-template-columns: 1fr;
        }

        .doctor-content-col {
            padding: var(--space-xl);
        }

        .process-cards {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--space-md);
        }

        .process-card {
            background: white;
            padding: var(--space-xl);
            border-radius: var(--border-radius-sm);
            box-shadow: var(--shadow-soft);
            text-align: center;
        }
    }

    @media (max-width: 576px) {
        :root {
            --text-5xl: 1.75rem;
            --text-4xl: 1.5rem;
            --space-lg: 1.5rem;
        }

        .hakim-hero-title {
            font-size: var(--text-4xl);
        }

        .hakim-hero-subtitle {
            font-size: var(--text-lg);
        }

        .founder {
            flex-direction: column;
            text-align: center;
        }

        .founder .img {
            margin-right: 0;
            margin-bottom: var(--space-md);
        }

        .cta-title {
            font-size: var(--text-4xl);
        }
    }

    /* Print Styles */
    @media print {

        .hakim-btn,
        .service-button,
        .floating-stats,
        .hero-bg-element {
            display: none !important;
        }

        body {
            color: black;
            background: white;
        }

        .container {
            max-width: 100%;
        }
    }

    @media (max-width: 768px) {

        .dna-helix,
        .hero-bg-element {
            display: none !important;
        }

        .visual-container {
            box-shadow: var(--shadow-soft);
            transform: none !important;
        }

        .protocol-card,
        .service-card,
        .process-step {
            animation: none !important;
            transform: none !important;
            opacity: 1 !important;
        }

        .floating-stats {
            animation: none !important;
        }
    }

    /* =========================================
   HERO MOBILE ORDER FIX
========================================= */

@media (max-width: 768px) {
  .hero-grid {
    display: flex;
    flex-direction: column;
  }

  .hakim-slide-left {
    order: 1;
  }

  .hero-visual {
    order: 2;
    margin-top: 24px;
  }
}