/* ========================================
   Responsive — Dark Luxury Theme
   ======================================== */

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .blog-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .benefits-grid { grid-template-columns: repeat(2, 1fr); }
    .related-articles { grid-template-columns: repeat(2, 1fr); }
    .services-overview-grid { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .procedure-info { grid-template-columns: repeat(3, 1fr); }
    .hero-split { grid-template-columns: 1fr 280px; gap: var(--spacing-lg); }
    .hero-image img { height: 460px; }
    .about-home-grid { grid-template-columns: 1fr; }
    .seo-content-grid { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    :root {
        --font-size-5xl: 2.25rem;
        --font-size-4xl: 1.875rem;
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.25rem;
    }
    .container { padding: 0 var(--spacing-md); }
    .section { padding: var(--spacing-2xl) 0; }
    .hero { padding: var(--spacing-2xl) 0; }
    .hero h1 { font-size: var(--font-size-3xl); letter-spacing: 1px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .benefits-grid { grid-template-columns: 1fr; }
    .related-articles { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .procedure-info { grid-template-columns: 1fr; gap: var(--spacing-md); }
    .service-hero .trust-badges { flex-direction: column; gap: var(--spacing-sm); }
    .service-hero { padding: var(--spacing-2xl) 0; }
    .service-hero h1 { font-size: var(--font-size-3xl); letter-spacing: 1px; }

    .timeline::before { left: 21px; }
    .timeline-number { width: 44px; height: 44px; font-size: var(--font-size-base); }
    .timeline-step { gap: var(--spacing-md); }

    .cta-banner { padding: var(--spacing-2xl) 0; }
    .cta-banner h2 { font-size: var(--font-size-2xl); }

    /* Hero home mobile stacking */
    .hero-split { grid-template-columns: 1fr; min-height: auto; }
    .hero-home .hero-content { padding: var(--spacing-2xl) 0 var(--spacing-lg); text-align: center; }
    .hero-home .hero-content p { margin-left: auto; margin-right: auto; }
    .hero-home .hero-buttons { justify-content: center; }
    .hero-image { margin-right: 0; display: flex; justify-content: center; }
    .hero-image img {
        height: 320px;
        max-width: 260px;
        -webkit-mask-image:
            linear-gradient(to bottom, black 0%, black 65%, transparent 100%),
            linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to bottom, black 0%, black 65%, transparent 100%),
            linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
        mask-composite: intersect;
    }
    .hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-md);
        justify-content: center;
        border-top: none;
        padding-top: 0;
    }
    .hero-stat-divider { display: none; }
    .hero-stat { text-align: center; }

    .process-grid { grid-template-columns: 1fr; }
    .trust-cards { grid-template-columns: 1fr 1fr; }

    /* Section label smaller on mobile */
    .section-label { font-size: 0.65rem; letter-spacing: 2px; }

    /* Accordion mobile */
    .accordion-header { padding: var(--spacing-md) var(--spacing-lg); }
    .accordion-body { padding: 0 var(--spacing-lg) var(--spacing-md); }

    /* Category filter scroll on mobile */
    .category-filter { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--spacing-sm); -webkit-overflow-scrolling: touch; }
    .category-filter a { flex-shrink: 0; }

    /* Article author box mobile */
    .article-author-box { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    :root {
        --font-size-5xl: 1.875rem;
        --font-size-4xl: 1.5rem;
        --font-size-3xl: 1.25rem;
        --font-size-2xl: 1.125rem;
    }
    .section { padding: var(--spacing-xl) 0; }
    .hero h1 { font-size: var(--font-size-2xl); }
    .trust-grid { grid-template-columns: 1fr; gap: var(--spacing-md); }
    .trust-item { padding: var(--spacing-md); }
    .trust-cards { grid-template-columns: 1fr; }
    .pagination { gap: 4px; }
    .pagination a, .pagination span {
        min-width: 44px;
        min-height: 44px;
        padding: 8px 10px;
        font-size: var(--font-size-sm);
    }
    .btn { padding: 12px 24px; font-size: var(--font-size-xs); }
    .btn-lg { padding: 14px 28px; font-size: var(--font-size-sm); }
    .hero-buttons { flex-direction: column; align-items: center; }
    .hero-buttons .btn { width: 100%; }
    .services-overview-grid { gap: 16px; }
    .section-label { font-size: 0.65rem; letter-spacing: 1.5px; }

    /* Hero image 480px */
    .hero-image img {
        height: 240px;
        max-width: 220px;
    }

    /* Timeline 480px */
    .timeline::before { left: 19px; }
    .timeline-number { width: 40px; height: 40px; font-size: var(--font-size-sm); }
    .timeline-step { gap: var(--spacing-sm); }

    /* Category filter 480px */
    .category-filter a {
        padding: 6px 12px;
        font-size: 10px;
        letter-spacing: 1px;
    }

    /* Section header 480px */
    .section-header { margin-bottom: var(--spacing-xl); }
    .section-header p { font-size: var(--font-size-base); }

    /* Article author box 480px */
    .article-author-box { padding: var(--spacing-lg); gap: var(--spacing-md); }

    /* Container tighter padding */
    .container { padding: 0 var(--spacing-md); }

    /* Benefit cards */
    .benefit-card { padding: var(--spacing-lg); }
    .benefits-grid { gap: 12px; }
}

/* ===== iPhone SE / Mini (375px) ===== */
@media (max-width: 390px) {
    .container { padding: 0 14px; }

    /* Font sizes even smaller */
    :root {
        --font-size-3xl: 1.125rem;
        --font-size-2xl: 1rem;
    }

    /* Buttons full width & compact */
    .btn { padding: 12px 20px; letter-spacing: 1px; }
    .btn-lg { padding: 12px 24px; }

    /* Hero */
    .hero-image img { height: 200px; max-width: 180px; }

    /* Pagination compact */
    .pagination { gap: 2px; }
    .pagination a, .pagination span {
        min-width: 40px;
        min-height: 40px;
        padding: 6px 8px;
        font-size: 0.75rem;
    }

    /* Trust & cards */
    .trust-item { padding: 12px; }
    .trust-grid { gap: 8px; }

    /* Timeline */
    .timeline::before { left: 17px; }
    .timeline-number { width: 36px; height: 36px; font-size: 0.75rem; }

    /* Section header */
    .section-header { margin-bottom: var(--spacing-lg); }
}