@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

    /* Apple and Stripe Inspired Premium Theme Style */
    :root {
        --bg-primary: #090909;
        --bg-secondary: #111111;
        --bg-card: #18181a;
        --color-primary: #E60023; /* Brand Red */
        --color-primary-hover: #AD0018;
        --color-accent: #FF3B30;
        --color-text: #F5F5F7; /* Apple Off-White */
        --color-muted: #8E8E93; /* Apple Gray */
        --color-border: #222224;
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 18px;
        --radius-xl: 24px;
        --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
        --font-mono: 'JetBrains Mono', monospace;
        --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.4);
        --shadow-glow: 0 4px 20px rgba(230, 0, 35, 0.1);
        --transition-smooth: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }

    [data-theme="light"] {
        --bg-primary: #F5F5F7; /* Apple light off-white */
        --bg-secondary: #FFFFFF;
        --bg-card: #F9F9FB;
        --color-text: #1C1C1E;
        --color-muted: #6E6E73;
        --color-border: #E5E5EA;
        --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.03);
        --shadow-glow: 0 4px 20px rgba(230, 0, 35, 0.04);
    }

    /* Base Styling Override for Home Page */
    body.home {
        background-color: var(--bg-primary) !important;
        color: var(--color-text) !important;
        font-family: var(--font-sans) !important;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .front-page-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 40px 24px 80px;
        box-sizing: border-box;
    }

    /* ==========================================
       HERO SPLIT LAYOUT
       ========================================== */
    .hero-split-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
        align-items: center;
        margin-bottom: 60px;
    }

    @media (min-width: 1024px) {
        .hero-split-grid {
            grid-template-columns: 1.15fr 0.85fr;
            gap: 50px;
        }
    }

    /* Left Column Hero styles */
    .hero-left-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-updated-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(230, 0, 35, 0.08);
        border: 1px solid rgba(230, 0, 35, 0.15);
        color: var(--color-primary);
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 5px 12px;
        border-radius: 100px;
        margin-bottom: 20px;
    }

    .pulse-indicator {
        width: 6px;
        height: 6px;
        background: var(--color-primary);
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(230, 0, 35, 0.4);
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(230, 0, 35, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(230, 0, 35, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(230, 0, 35, 0); }
    }

    .hero-title-primary {
        font-family: var(--font-display);
        font-size: clamp(2.2rem, 4.5vw, 3.4rem);
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -0.03em;
        margin: 0 0 16px 0;
        color: var(--color-text);
    }

    .hero-subtitle-primary {
        font-size: clamp(0.95rem, 1.8vw, 1.1rem);
        line-height: 1.55;
        color: var(--color-muted);
        margin: 0 0 28px 0;
        max-width: 580px;
    }

    /* Downloader input design */
    .main-downloader-box {
        width: 100%;
        margin-bottom: 24px;
        position: relative;
    }

    .search-input-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        padding: 6px;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
        gap: 6px;
        position: relative;
    }

    @media (min-width: 640px) {
        .search-input-container {
            flex-direction: row;
            align-items: center;
            border-radius: 100px;
            padding: 6px 6px 6px 20px;
        }
    }

    .search-input-field {
        flex: 1;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: var(--color-text) !important;
        font-size: 16px !important; /* Prevent iOS/mobile focus auto-zooming */
        padding: 12px 16px !important; /* Give elegant horizontal breathing room in stacked mobile layout */
        width: 100%;
    }

    @media (min-width: 640px) {
        .search-input-field {
            font-size: 0.95rem !important;
            padding: 10px 0 !important; /* Reset to standard compact style on desktop row layout */
        }
    }

    .search-input-field::placeholder {
        color: var(--color-muted);
        opacity: 0.6;
    }

    .search-action-btn {
        background: var(--color-primary) !important;
        color: #ffffff !important;
        border: none !important;
        padding: 12px 24px !important;
        font-family: var(--font-display) !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        border-radius: var(--radius-sm) !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        transition: var(--transition-smooth) !important;
    }

    @media (min-width: 640px) {
        .search-action-btn {
            border-radius: 100px !important;
            padding: 12px 28px !important;
        }
    }

    .search-action-btn:hover {
        background: var(--color-primary-hover) !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(230, 0, 35, 0.25) !important;
    }

    .btn-arrow-icon {
        width: 14px;
        height: 14px;
        transition: transform 0.2s ease;
    }

    .search-action-btn:hover .btn-arrow-icon {
        transform: translateX(3px);
    }

    /* Smart Suggestions Dropdown */
    .suggestions-wrapper-relative {
        position: relative;
        width: 100%;
    }

    .suggestions-dropdown-custom {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
        z-index: 99;
        margin-top: 8px;
        overflow: hidden;
        display: none;
    }

    .suggestion-item-custom {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 20px;
        cursor: pointer;
        font-size: 0.88rem;
        color: var(--color-text);
        transition: var(--transition-smooth);
        text-align: left;
    }

    .suggestion-item-custom:hover {
        background: rgba(230, 0, 35, 0.06);
        color: var(--color-primary);
    }

    .suggestion-item-custom svg {
        width: 14px;
        height: 14px;
        color: var(--color-muted);
        flex-shrink: 0;
    }

    /* Error Message Custom */
    .error-msg-custom {
        margin-bottom: 16px;
        background: rgba(230, 0, 35, 0.06);
        border: 1px solid rgba(230, 0, 35, 0.15);
        padding: 12px 16px;
        border-radius: var(--radius-md);
        color: #ff5b50;
    }

    [data-theme="light"] .error-msg-custom {
        background: rgba(230, 0, 35, 0.03);
        border-color: rgba(230, 0, 35, 0.1);
        color: #d31b10;
    }

    .error-content-wrapper-custom {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .error-icon-custom {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .error-text {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .error-text ul {
        margin: 6px 0 0 0;
        padding-left: 18px;
    }

    /* Spinner Container */
    .spinner-loading-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        font-size: 0.88rem;
        color: var(--color-primary);
        font-weight: 600;
    }

    .spinner-circle {
        width: 18px;
        height: 18px;
        border: 2px solid rgba(230, 0, 35, 0.1);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

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

    /* Supported qualities */
    .supported-qualities-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .supported-label {
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--color-muted);
    }

    .quality-pills-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .quality-pill {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 100px;
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        color: var(--color-muted);
    }

    .quality-pill.max-pill {
        background: rgba(230, 0, 35, 0.06);
        border-color: rgba(230, 0, 35, 0.15);
        color: var(--color-primary);
    }

    /* Right Column (Live / Mockup Card) */
    .hero-right-column {
        position: relative;
        width: 100%;
    }

    .mockup-preview-card {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-soft);
        transition: var(--transition-smooth);
    }

    .mockup-preview-card:hover {
        border-color: rgba(230, 0, 35, 0.15);
        transform: translateY(-2px);
    }

    .mockup-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 18px;
        border-bottom: 1px solid var(--color-border);
        background: rgba(255, 255, 255, 0.01);
    }

    .mockup-dots {
        display: flex;
        gap: 5px;
    }

    .mock-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .mock-dot.red { background: #ff5f56; }
    .mock-dot.yellow { background: #ffbd2e; }
    .mock-dot.green { background: #27c93f; }

    .mockup-header-title {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--color-muted);
    }

    .mockup-status-pill {
        font-size: 0.68rem;
        font-weight: 700;
        background: rgba(39, 201, 63, 0.1);
        color: #27c93f;
        padding: 2px 6px;
        border-radius: 100px;
    }

    .mockup-image-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: #000;
    }

    .mockup-thumb-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .mockup-image-wrapper:hover .mockup-thumb-img {
        transform: scale(1.02);
    }

    .mockup-play-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.15);
    }

    .mockup-play-btn {
        width: 48px;
        height: 48px;
        background: var(--color-primary);
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(230, 0, 35, 0.3);
        transition: transform 0.2s ease;
    }

    .mockup-play-btn svg {
        width: 16px;
        height: 16px;
        margin-left: 2px;
    }

    .mockup-image-wrapper:hover .mockup-play-btn {
        transform: scale(1.08);
    }

    .mockup-duration-tag {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.8);
        color: #ffffff;
        font-family: var(--font-mono);
        font-size: 0.68rem;
        font-weight: 600;
        padding: 1px 5px;
        border-radius: 4px;
    }

    .mockup-meta-info {
        padding: 16px 18px;
        border-bottom: 1px solid var(--color-border);
    }

    .mockup-video-title {
        font-family: var(--font-display);
        font-size: 0.98rem;
        font-weight: 700;
        line-height: 1.35;
        margin: 0 0 4px 0;
        color: var(--color-text);
    }

    .mockup-video-author {
        font-size: 0.78rem;
        color: var(--color-muted);
        margin: 0;
    }

    .mockup-downloads-list {
        padding: 14px 18px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mockup-download-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 8px 12px;
        background: var(--bg-primary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }

    .mockup-dl-info {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mockup-dl-badge {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(230, 0, 35, 0.06);
        color: var(--color-primary);
    }

    .mockup-dl-resolution {
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--color-text);
    }

    .mockup-dl-btn {
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid var(--color-border) !important;
        color: var(--color-text) !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        padding: 5px 12px !important;
        border-radius: 100px !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        transition: var(--transition-smooth) !important;
    }

    .mockup-dl-btn:hover {
        background: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #ffffff !important;
    }

    .mockup-dl-btn svg {
        width: 10px;
        height: 10px;
    }

    /* Real Results Panel styles */
    .real-results-container {
        margin-top: 20px;
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 20px;
        box-shadow: var(--shadow-soft);
    }

    .real-results-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--color-border);
    }

    .pulse-indicator-green {
        width: 8px;
        height: 8px;
        background: #27c93f;
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.4);
        animation: pulse-green 1.5s infinite;
    }

    @keyframes pulse-green {
        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.7); }
        70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(39, 201, 63, 0); }
        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(39, 201, 63, 0); }
    }

    .real-results-header h3 {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        margin: 0;
        color: var(--color-text);
    }

    .results-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .thumb-card.result-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 10px !important;
        background: var(--bg-primary) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
    }

    .result-media {
        width: 90px !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .result-media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .thumb-info.result-details {
        flex: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .result-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    .thumb-label.result-label {
        font-family: var(--font-mono) !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        color: var(--color-primary) !important;
        text-transform: uppercase !important;
    }

    .thumb-size.result-res {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        color: var(--color-text) !important;
    }

    .btn-dl.save-btn {
        background: var(--color-primary) !important;
        color: #ffffff !important;
        border: none !important;
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        padding: 6px 14px !important;
        border-radius: 100px !important;
        cursor: pointer !important;
        transition: var(--transition-smooth) !important;
    }

    .btn-dl.save-btn:hover {
        background: var(--color-primary-hover) !important;
        transform: scale(1.02) !important;
    }

    /* ==========================================
       TRUST BAR SECTION (COMPACT HORIZONTAL)
       ========================================== */
    .premium-trust-bar {
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        padding: 16px 0;
        margin-bottom: 60px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .trust-bar-horizontal {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px 32px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
    }

    .trust-bar-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.82rem;
        color: var(--color-text);
        white-space: nowrap;
    }

    .trust-bar-icon {
        width: 16px;
        height: 16px;
        color: var(--color-primary);
        flex-shrink: 0;
    }

    .trust-bar-divider {
        width: 1px;
        height: 16px;
        background: var(--color-border);
    }

    @media (max-width: 1024px) {
        .trust-bar-divider {
            display: none;
        }
        .trust-bar-horizontal {
            justify-content: center;
            gap: 12px 20px;
        }
    }

    /* ==========================================
       SECTION HEADERS
       ========================================== */
    .section-header-centered {
        text-align: center;
        max-width: 680px;
        margin: 0 auto 40px;
    }

    .section-tag-red {
        display: inline-block;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-primary);
        background: rgba(230, 0, 35, 0.08);
        padding: 4px 10px;
        border-radius: 100px;
        margin-bottom: 10px;
    }

    .section-title-premium {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 3vw, 2.1rem);
        font-weight: 800;
        letter-spacing: -0.02em;
        line-height: 1.25;
        margin: 0 0 10px 0;
        color: var(--color-text);
    }

    .section-subtitle-premium {
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--color-muted);
        margin: 0;
    }

    .section-header-split {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 32px;
    }

    @media (min-width: 768px) {
        .section-header-split {
            flex-direction: row;
            align-items: flex-end;
            justify-content: space-between;
        }
    }

    .section-header-left {
        max-width: 640px;
    }

    .btn-secondary-link {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--color-primary);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: var(--transition-smooth);
    }

    .btn-secondary-link:hover {
        color: var(--color-primary-hover);
        transform: translateX(2px);
    }

    /* ==========================================
       WHY CHOOSE US SECTION (COMPACT CARDS)
       ========================================== */
    .why-choose-premium {
        margin-bottom: 60px;
    }

    .why-choose-grid-premium {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    @media (min-width: 640px) {
        .why-choose-grid-premium {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .why-choose-grid-premium {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .why-card-premium {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        padding: 20px;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
        transition: var(--transition-smooth);
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .why-card-premium:hover {
        border-color: rgba(230, 0, 35, 0.2);
        transform: translateY(-2px);
    }

    .why-icon-wrap-premium {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .why-icon-wrap-premium svg {
        width: 18px;
        height: 18px;
    }

    .why-card-premium-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .why-icon-wrap-premium.original-quality { background: rgba(39, 201, 63, 0.08); color: #27c93f; }
    .why-icon-wrap-premium.no-watermark { background: rgba(0, 122, 255, 0.08); color: #007aff; }
    .why-icon-wrap-premium.fast-instant { background: rgba(255, 149, 0, 0.08); color: #ff9500; }
    .why-icon-wrap-premium.fully-secure { background: rgba(175, 82, 222, 0.08); color: #af52de; }
    .why-icon-wrap-premium.free-forever { background: rgba(230, 0, 35, 0.08); color: var(--color-primary); }
    .why-icon-wrap-premium.works-shorts { background: rgba(255, 45, 85, 0.08); color: #ff2d55; }

    .why-title-premium {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        margin: 0 0 4px 0;
        color: var(--color-text);
    }

    .why-desc-premium {
        font-size: 0.8rem;
        line-height: 1.45;
        color: var(--color-muted);
        margin: 0;
    }

    /* ==========================================
       FEATURED TOOLS SECTION (HIERARCHY OPTIMIZED)
       ========================================== */
    .featured-tools-premium {
        margin-bottom: 60px;
    }

    .featured-tools-grid-premium {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    @media (min-width: 640px) {
        .featured-tools-grid-premium {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .featured-tools-grid-premium {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .tool-card-premium {
        display: flex;
        flex-direction: column;
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        padding: 20px;
        border-radius: var(--radius-md);
        text-decoration: none;
        transition: var(--transition-smooth);
        height: 100%;
        box-shadow: var(--shadow-soft);
        position: relative;
        overflow: hidden;
    }

    .tool-card-premium:hover {
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }

    .tool-card-premium.double-size {
        background: radial-gradient(circle at bottom right, rgba(230, 0, 35, 0.04) 0%, rgba(0, 0, 0, 0) 50%), var(--bg-secondary);
        border-color: rgba(230, 0, 35, 0.25);
    }

    @media (min-width: 768px) {
        .tool-card-premium.double-size {
            grid-column: span 2;
            grid-row: span 2;
            padding: 32px;
        }
    }

    .tool-card-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        font-size: 0.65rem;
        font-weight: 700;
        background: rgba(230, 0, 35, 0.1);
        color: var(--color-primary);
        padding: 2px 8px;
        border-radius: 100px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .tool-card-icon-wrap {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.02);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        margin-bottom: 16px;
        color: var(--color-primary);
    }

    .tool-card-premium.double-size .tool-card-icon-wrap {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
        background: rgba(230, 0, 35, 0.06);
    }

    .tool-card-content {
        flex: 1;
        margin-bottom: 14px;
    }

    .tool-card-title {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        margin: 0 0 6px 0;
        color: var(--color-text);
    }

    .tool-card-premium.double-size .tool-card-title {
        font-size: 1.25rem;
        margin-bottom: 10px;
    }

    .tool-card-desc {
        font-size: 0.8rem;
        line-height: 1.45;
        color: var(--color-muted);
        margin: 0;
    }

    .tool-card-premium.double-size .tool-card-desc {
        font-size: 0.9rem;
    }

    .tool-card-action {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--color-primary);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: var(--transition-smooth);
        margin-top: auto;
    }

    .tool-card-premium:hover .tool-card-action {
        color: var(--color-primary-hover);
        transform: translateX(2px);
    }

    /* ==========================================
       AD PLACEMENT SLOT (BEAUTIFUL INTEGRATION)
       ========================================== */
    .ad-placeholder-wrapper {
        margin: 0 0 60px 0;
        width: 100%;
    }

    .ad-placeholder-card {
        background: rgba(255, 255, 255, 0.01);
        border: 1px dashed var(--color-border);
        border-radius: var(--radius-md);
        padding: 16px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        transition: var(--transition-smooth);
    }

    .ad-placeholder-card:hover {
        border-color: rgba(230, 0, 35, 0.15);
    }

    .ad-badge {
        font-family: var(--font-mono);
        font-size: 0.6rem;
        font-weight: 700;
        color: var(--color-muted);
        border: 1px solid var(--color-border);
        padding: 1px 6px;
        border-radius: 3px;
        letter-spacing: 0.04em;
    }

    .ad-label {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--color-text);
        opacity: 0.85;
    }

    .ad-desc {
        font-size: 0.72rem;
        color: var(--color-muted);
        max-width: 480px;
        line-height: 1.4;
    }

    /* ==========================================
       CATEGORIES HUB (COMPACTED WITH BADGES)
       ========================================== */
    .categories-hub-premium {
        margin-bottom: 60px;
    }

    .categories-grid-premium {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    @media (min-width: 640px) {
        .categories-grid-premium {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .categories-grid-premium {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .category-card-premium {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 20px;
        text-decoration: none;
        transition: var(--transition-smooth);
        display: flex;
        flex-direction: column;
        height: 100%;
        box-shadow: var(--shadow-soft);
        position: relative;
    }

    .category-card-premium:hover {
        border-color: var(--cat-color, var(--color-primary));
        transform: translateY(-2px);
    }

    .category-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-right: 70px; /* Leave space for badge */
    }

    .category-icon-wrap {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.02);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--cat-color, var(--color-primary));
        flex-shrink: 0;
    }

    .category-icon-wrap svg {
        width: 18px;
        height: 18px;
    }

    .category-count {
        font-size: 0.68rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--color-border);
        color: var(--color-muted);
        padding: 2px 6px;
        border-radius: 100px;
    }

    .category-card-title {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        margin: 0 0 6px 0;
        color: var(--color-text);
    }

    .category-card-desc {
        font-size: 0.78rem;
        line-height: 1.45;
        color: var(--color-muted);
        margin: 0;
        flex: 1;
    }

    .category-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 0.62rem;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 100px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .category-badge.badge-trending { background: rgba(230, 0, 35, 0.1); color: var(--color-primary); }
    .category-badge.badge-popular { background: rgba(39, 201, 63, 0.1); color: #27c93f; }
    .category-badge.badge-new { background: rgba(0, 122, 255, 0.1); color: #007aff; }
    .category-badge.badge-updated { background: rgba(175, 82, 222, 0.1); color: #af52de; }

    /* ==========================================
       LATEST GUIDES / ARTICLES (EEAT UPGRADE)
       ========================================== */
    .latest-articles-premium {
        margin-bottom: 60px;
    }

    .articles-layout-split {
        display: grid;
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
    }

    @media (min-width: 1024px) {
        .articles-layout-split {
            grid-template-columns: 1.25fr 0.75fr;
        }
    }

    .articles-grid-premium {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    @media (min-width: 640px) {
        .articles-grid-premium {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .article-card-premium {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
        box-shadow: var(--shadow-soft);
        transition: var(--transition-smooth);
    }

    .article-card-premium:hover {
        border-color: rgba(230, 0, 35, 0.2);
        transform: translateY(-2px);
    }

    .article-card-image-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .article-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .article-card-premium:hover .article-thumb {
        transform: scale(1.03);
    }

    .article-card-body {
        padding: 16px 18px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .article-card-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--color-muted);
        margin-bottom: 8px;
    }

    .meta-dot {
        color: var(--color-border);
    }

    .article-card-title {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.4;
        margin: 0 0 8px 0;
    }

    .article-card-title a {
        color: var(--color-text);
        text-decoration: none;
    }

    .article-card-title a:hover {
        color: var(--color-primary);
    }

    .article-card-excerpt {
        font-size: 0.78rem;
        line-height: 1.45;
        color: var(--color-muted);
        margin: 0;
        flex: 1;
    }

    /* EEAT Sidebar Card Upgraded */
    .editorial-sidebar-card {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 24px;
        box-shadow: var(--shadow-soft);
    }

    .sidebar-badge {
        display: inline-block;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: rgba(39, 201, 63, 0.08);
        border: 1px solid rgba(39, 201, 63, 0.15);
        color: #27c93f;
        padding: 4px 10px;
        border-radius: 100px;
        margin-bottom: 14px;
    }

    .sidebar-card-title {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0 0 6px 0;
        color: var(--color-text);
    }

    .sidebar-card-desc {
        font-size: 0.78rem;
        line-height: 1.45;
        color: var(--color-muted);
        margin: 0 0 20px 0;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--color-border);
    }

    .editorial-author-profile {
        display: flex;
        flex-direction: column;
    }

    .editorial-author-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
    }

    .editorial-author-avatar-wrapper {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid var(--color-primary);
        flex-shrink: 0;
    }

    .editorial-author-avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .editorial-author-title-info {
        display: flex;
        flex-direction: column;
    }

    .editorial-author-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--color-text);
        margin: 0;
    }

    .editorial-author-designation {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--color-muted);
        margin: 0;
    }

    .editorial-author-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 12px;
    }

    .author-badge-pill {
        font-size: 0.62rem;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--color-border);
        color: var(--color-text);
        padding: 2px 6px;
        border-radius: 100px;
    }

    .author-stats-list {
        list-style: none;
        padding: 0;
        margin: 0 0 16px 0;
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .author-stats-list li {
        font-size: 0.75rem;
        color: var(--color-muted);
        display: flex;
        justify-content: space-between;
    }

    .author-stats-list li strong {
        color: var(--color-text);
    }

    .editorial-author-bio {
        font-size: 0.78rem;
        line-height: 1.45;
        color: var(--color-muted);
        margin: 0 0 16px 0;
    }

    .editorial-author-links {
        display: flex;
        gap: 6px;
        margin-bottom: 12px;
    }

    .author-social-link-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: var(--bg-primary);
        border: 1px solid var(--color-border);
        border-radius: 100px;
        color: var(--color-text);
        font-size: 0.72rem;
        font-weight: 600;
        padding: 6px 8px;
        text-decoration: none;
        transition: var(--transition-smooth);
    }

    .author-social-link-btn:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .author-social-link-btn svg {
        width: 12px;
        height: 12px;
    }

    .author-page-btn {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: var(--color-primary);
        color: #ffffff;
        border-radius: var(--radius-sm);
        padding: 8px;
        font-size: 0.78rem;
        font-weight: 700;
        text-decoration: none;
        transition: var(--transition-smooth);
        margin-top: 6px;
        border: none;
        cursor: pointer;
    }

    .author-page-btn:hover {
        background: var(--color-primary-hover);
        transform: translateY(-1px);
    }

    .author-page-btn svg {
        width: 12px;
        height: 12px;
    }

    /* ==========================================
       FAQ ACCORDION SECTION (MODERN SIMPLE)
       ========================================== */
    .faq-accordion-section-premium {
        margin-bottom: 60px;
    }

    .faq-accordion-container-premium {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .faq-item {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: var(--transition-smooth);
    }

    .faq-item:hover {
        border-color: rgba(230, 0, 35, 0.2);
    }

    .faq-item.active {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-glow);
    }

    .faq-trigger {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 20px !important;
        cursor: pointer !important;
        color: var(--color-text) !important;
        font-family: var(--font-display) !important;
        font-weight: 700 !important;
        font-size: 0.92rem !important;
        text-align: left !important;
        gap: 16px !important;
    }

    .faq-question-text {
        flex: 1;
    }

    .faq-chevron {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.02);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        color: var(--color-muted);
        flex-shrink: 0;
    }

    .faq-chevron svg {
        width: 12px;
        height: 12px;
    }

    .faq-item.active .faq-chevron {
        transform: rotate(180deg);
        background: var(--color-primary);
        color: #ffffff;
    }

    .faq-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .faq-answer-inner-premium {
        padding: 0 20px 16px;
        font-size: 0.82rem;
        line-height: 1.5;
        color: var(--color-muted);
    }

    .faq-answer-inner-premium p {
        margin: 0 0 8px 0;
    }

    .faq-answer-inner-premium p:last-child {
        margin-bottom: 0;
    }

    .faq-answer-inner-premium a {
        color: var(--color-primary);
        text-decoration: none;
        font-weight: 600;
    }

    .faq-answer-inner-premium a:hover {
        text-decoration: underline;
    }

    /* ==========================================
       FINAL CTA BANNER (COMPREHENSIVE OPTIMIZED)
       ========================================== */
    .final-cta-premium-banner {
        margin-bottom: 60px;
    }

    .cta-banner-card {
        background: radial-gradient(circle at top right, rgba(230, 0, 35, 0.05) 0%, rgba(0, 0, 0, 0) 60%), var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        box-shadow: var(--shadow-soft);
    }

    @media (min-width: 768px) {
        .cta-banner-card {
            flex-direction: row;
            text-align: left;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            padding: 40px;
        }
    }

    .cta-rocket-icon-wrap {
        font-size: 2.8rem;
        flex-shrink: 0;
        animation: float 4s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
    }

    .cta-card-content {
        flex: 1;
    }

    .cta-card-title {
        font-family: var(--font-display);
        font-size: clamp(1.2rem, 2.5vw, 1.6rem);
        font-weight: 800;
        margin: 0 0 6px 0;
        color: var(--color-text);
        letter-spacing: -0.01em;
    }

    .cta-card-desc {
        font-size: 0.82rem;
        line-height: 1.45;
        color: var(--color-muted);
        margin: 0 0 20px 0;
        max-width: 580px;
    }

    .cta-actions-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    @media (min-width: 768px) {
        .cta-actions-row {
            justify-content: flex-start;
        }
    }

    .cta-btn-primary {
        background: var(--color-primary);
        color: #ffffff;
        border: none;
        padding: 10px 18px;
        border-radius: var(--radius-sm);
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.82rem;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .cta-btn-primary:hover {
        background: var(--color-primary-hover);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(230, 0, 35, 0.2);
    }

    .cta-btn-secondary {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--color-border);
        color: var(--color-text);
        padding: 10px 18px;
        border-radius: var(--radius-sm);
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.82rem;
        cursor: pointer;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .cta-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--color-primary);
    }

    /* SEO Blocks Footer Container */
    .seo-container {
        border-top: 1px solid var(--color-border);
        padding-top: 30px;
        margin-top: 30px;
    }

    .seo-title {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: var(--color-text);
    }

    .seo-container p {
        font-size: 0.8rem;
        line-height: 1.45;
        color: var(--color-muted);
        margin: 0 0 16px 0;
    }

    .keyword-cloud {
        font-size: 0.72rem;
        line-height: 1.7;
        color: var(--color-muted);
        opacity: 0.8;
    }

    .keyword-item {
        font-weight: 500;
        transition: var(--transition-smooth);
    }

    .keyword-item:hover {
        color: var(--color-primary);
    }

    /* ==========================================
       CONVERSION BOOST & PRESENTS STYLING
       ========================================== */
    .quick-demo-presets {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 14px;
        font-size: 0.82rem;
    }

    .preset-label {
        color: var(--color-muted);
        font-weight: 500;
        margin-right: 4px;
    }

    .preset-btn {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid var(--color-border) !important;
        color: var(--color-text) !important;
        font-family: var(--font-sans) !important;
        font-size: 0.78rem !important;
        font-weight: 500 !important;
        padding: 5px 12px !important;
        border-radius: 100px !important;
        cursor: pointer !important;
        transition: var(--transition-smooth) !important;
    }

    .preset-btn:hover {
        background: rgba(230, 0, 35, 0.08) !important;
        border-color: rgba(230, 0, 35, 0.3) !important;
        color: var(--color-primary) !important;
        transform: translateY(-1px);
    }

    [data-theme="light"] .preset-btn {
        background: #ffffff !important;
    }
    
    [data-theme="light"] .preset-btn:hover {
        background: rgba(230, 0, 35, 0.05) !important;
    }

    /* ==========================================
       EDITORIAL FACT-CHECK COMPLIANCE STYLING
       ========================================== */
    .editorial-fact-check-box {
        background: rgba(255, 255, 255, 0.01);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 16px;
        margin-top: 16px;
        text-align: left;
    }

    .fact-check-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #27c93f;
        margin-bottom: 6px;
    }

    .fact-check-icon {
        width: 12px;
        height: 12px;
        fill: currentColor;
    }

    .fact-check-text {
        font-size: 0.75rem;
        line-height: 1.45;
        color: var(--color-muted);
        margin: 0;
    }

    [data-theme="light"] .editorial-fact-check-box {
        background: rgba(39, 201, 63, 0.02);
        border-color: rgba(39, 201, 63, 0.12);
    }

    /* ==========================================
       REAL-TIME SAAS STATISTICS GRID
       ========================================== */
    .saas-statistics-section {
        max-width: var(--container-width);
        margin: 50px auto;
        padding: 0 24px;
    }
    .stats-container-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    @media (max-width: 991px) {
        .stats-container-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (max-width: 575px) {
        .stats-container-grid {
            grid-template-columns: 1fr;
        }
    }
    .stat-card {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 28px 24px;
        text-align: center;
        transition: var(--transition-smooth);
        box-shadow: var(--shadow-soft);
    }
    .stat-card:hover {
        border-color: rgba(230, 0, 35, 0.2);
        transform: translateY(-2px);
    }
    .stat-num {
        font-family: var(--font-sans);
        font-size: clamp(2.2rem, 3.5vw, 2.8rem);
        font-weight: 800;
        color: var(--color-primary);
        line-height: 1.1;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
    }
    .stat-label {
        font-family: var(--font-sans);
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--color-text);
        margin-bottom: 10px;
    }
    .stat-desc {
        font-family: var(--font-sans);
        font-size: 0.8rem;
        color: var(--color-muted);
        line-height: 1.5;
        margin: 0;
    }

    /* ==========================================
       SUPPORTED PLATFORMS BADGES
       ========================================== */
    .supported-platforms-wrapper {
        margin-top: 20px;
        text-align: left;
    }
    .platform-pills-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 6px;
    }
    .platform-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        font-size: 0.75rem;
        color: var(--color-text);
        font-weight: 500;
        transition: var(--transition-smooth);
    }
    .platform-pill:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(230, 0, 35, 0.15);
    }
    [data-theme="light"] .platform-pill {
        background: #ffffff;
    }
    [data-theme="light"] .platform-pill:hover {
        background: rgba(0, 0, 0, 0.01);
    }
    .platform-pill-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--color-primary);
        display: inline-block;
    }

    /* ==========================================
       LATEST ARTICLES & EEAT TRUST SIDEBAR
       ========================================== */
    .latest-articles-premium {
        max-width: var(--container-width);
        margin: 80px auto;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .section-header-split {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 40px;
        gap: 24px;
    }

    .section-header-left {
        max-width: 680px;
        text-align: left;
    }

    .section-tag-red {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-primary);
        background: rgba(230, 0, 35, 0.06);
        padding: 4px 10px;
        border-radius: 100px;
        margin-bottom: 12px;
        border: 1px solid rgba(230, 0, 35, 0.12);
    }

    .section-title-premium {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.5vw, 2.4rem);
        font-weight: 800;
        color: var(--color-text);
        letter-spacing: -0.03em;
        line-height: 1.15;
        margin: 0 0 12px 0;
    }

    .section-subtitle-premium {
        font-size: 0.95rem;
        line-height: 1.55;
        color: var(--color-muted);
        margin: 0;
    }

    .btn-secondary-link {
        font-family: var(--font-display);
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--color-text);
        text-decoration: none;
        padding: 10px 20px;
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: 100px;
        transition: var(--transition-smooth);
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

    .btn-secondary-link:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
        transform: translateY(-1px);
    }

    .articles-layout-split {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 30px;
        align-items: start;
    }

    @media (max-width: 991px) {
        .articles-layout-split {
            grid-template-columns: 1fr;
        }
        .section-header-split {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    .articles-grid-premium {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    @media (max-width: 640px) {
        .articles-grid-premium {
            grid-template-columns: 1fr;
        }
    }

    .article-card-premium {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        transition: var(--transition-smooth);
        box-shadow: var(--shadow-soft);
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .article-card-premium:hover {
        transform: translateY(-4px);
        border-color: rgba(230, 0, 35, 0.2);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    }

    [data-theme="light"] .article-card-premium:hover {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
    }

    .article-card-image-wrapper {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
        background: #000;
        overflow: hidden;
    }

    .article-card-cover-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .article-card-premium:hover .article-card-cover-img {
        transform: scale(1.04);
    }

    .article-card-category-badge {
        position: absolute;
        top: 14px;
        left: 14px;
        background: rgba(9, 9, 9, 0.75);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
        font-family: var(--font-mono);
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        padding: 4px 8px;
        border-radius: 4px;
        letter-spacing: 0.05em;
    }

    .article-card-body {
        padding: 24px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        text-align: left;
    }

    .article-card-meta-top {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
        color: var(--color-muted);
        margin-bottom: 12px;
    }

    .article-meta-divider {
        color: rgba(255, 255, 255, 0.1);
    }
    [data-theme="light"] .article-meta-divider {
        color: rgba(0, 0, 0, 0.1);
    }

    .article-card-title {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 700;
        line-height: 1.4;
        margin: 0 0 10px 0;
    }

    .article-card-title a {
        color: var(--color-text);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .article-card-title a:hover {
        color: var(--color-primary);
    }

    .article-card-excerpt {
        font-size: 0.85rem;
        line-height: 1.5;
        color: var(--color-muted);
        margin: 0 0 20px 0;
        flex-grow: 1;
    }

    .article-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 16px;
        border-top: 1px solid var(--color-border);
        margin-top: auto;
    }

    .article-author-meta {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .article-author-avatar-small {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid var(--color-border);
    }

    .article-author-name {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--color-text);
    }

    .article-read-more-btn {
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--color-primary);
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .article-read-more-btn:hover {
        color: var(--color-primary-hover);
    }

    /* ==========================================
       EEAT SIDEBAR CARD STYLING
       ========================================== */
    .eeat-author-trust-sidebar {
        width: 100%;
    }

    .trust-sidebar-card {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        overflow: hidden;
        position: relative;
        box-shadow: var(--shadow-soft);
        text-align: center;
    }

    .trust-sidebar-banner-decor {
        height: 80px;
        background: linear-gradient(135deg, #111 0%, #222 100%);
        border-bottom: 1px solid var(--color-border);
    }
    [data-theme="light"] .trust-sidebar-banner-decor {
        background: linear-gradient(135deg, #E5E5EA 0%, #F5F5F7 100%);
    }

    .author-avatar-wrapper-relative {
        position: relative;
        margin-top: -55px;
        display: inline-block;
    }

    .author-avatar-lg {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid var(--bg-secondary);
        box-shadow: var(--shadow-soft);
        background: #000;
    }

    .trust-verified-badge-pill {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        background: #111;
        border: 1px solid #27c93f;
        color: #27c93f;
        font-family: var(--font-mono);
        font-size: 0.62rem;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 100px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        letter-spacing: 0.04em;
        box-shadow: 0 4px 10px rgba(39, 201, 99, 0.15);
    }
    
    [data-theme="light"] .trust-verified-badge-pill {
        background: #fff;
    }

    .trust-verified-badge-pill svg {
        width: 10px;
        height: 10px;
    }

    .trust-author-details-content {
        padding: 30px 24px 24px;
        text-align: center;
    }

    .author-name-title {
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--color-text);
        margin: 10px 0 4px 0;
    }

    .author-role-subtitle {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--color-primary);
        margin: 0 0 14px 0;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .author-bio-excerpt {
        font-size: 0.82rem;
        line-height: 1.5;
        color: var(--color-muted);
        margin: 0;
    }

    .author-compliance-divider {
        height: 1px;
        background: var(--color-border);
        margin: 20px 0;
    }

    .author-compliance-features-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: left;
    }

    .compliance-feature-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.78rem;
        color: var(--color-text);
        font-weight: 500;
    }

    .compliance-icon {
        width: 14px;
        height: 14px;
        color: #27c93f;
    }

    .author-social-action-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 20px;
    }

    .author-social-link-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--bg-primary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 8px 14px;
        font-family: var(--font-display);
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--color-text);
        text-decoration: none;
        transition: var(--transition-smooth);
    }

    .author-social-link-btn:hover {
        background: var(--bg-card);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .author-social-link-btn svg {
        width: 14px;
        height: 14px;
    }

    .primary-btn-accent {
        background: rgba(230, 0, 35, 0.05);
        border-color: rgba(230, 0, 35, 0.15);
        color: var(--color-primary);
    }

    .primary-btn-accent:hover {
        background: var(--color-primary);
        color: #fff !important;
        border-color: var(--color-primary);
    }

    /* ==========================================
       FAQ PREMIUM ACCORDION
       ========================================== */
    .faq-accordion-section-premium {
        max-width: 800px;
        margin: 80px auto;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .faq-accordion-container-premium {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 30px;
    }

    .faq-item {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: var(--transition-smooth);
        text-align: left;
    }

    .faq-item:hover, .faq-item.active {
        border-color: rgba(230, 0, 35, 0.2);
        box-shadow: var(--shadow-glow);
    }

    .faq-trigger {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        background: none;
        border: none;
        cursor: pointer;
        outline: none;
        color: var(--color-text);
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 0.98rem;
        transition: var(--transition-smooth);
        text-align: left;
    }

    .faq-trigger:hover {
        color: var(--color-primary);
    }

    .faq-chevron {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--color-border);
        color: var(--color-muted);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border 0.2s ease;
    }
    [data-theme="light"] .faq-chevron {
        background: rgba(0, 0, 0, 0.02);
    }

    .faq-item.active .faq-chevron {
        transform: rotate(180deg);
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
    }

    .faq-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .faq-answer-inner-premium {
        padding: 0 24px 24px 24px;
        font-size: 0.88rem;
        line-height: 1.6;
        color: var(--color-muted);
    }

    .faq-answer-inner-premium code {
        font-family: var(--font-mono);
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--color-border);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.82rem;
        color: var(--color-text);
    }
    [data-theme="light"] .faq-answer-inner-premium code {
        background: rgba(0, 0, 0, 0.04);
    }

    /* ==========================================
       FINAL PREMIUM CTA BANNER
       ========================================== */
    .final-cta-premium-banner {
        max-width: var(--container-width);
        margin: 80px auto;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .cta-banner-card {
        background: linear-gradient(135deg, rgba(230, 0, 35, 0.08) 0%, rgba(230, 0, 35, 0.02) 100%), var(--bg-secondary);
        border: 1px solid rgba(230, 0, 35, 0.15);
        border-radius: var(--radius-xl);
        padding: 40px;
        display: flex;
        align-items: center;
        gap: 30px;
        position: relative;
        overflow: hidden;
        box-shadow: var(--shadow-soft);
    }

    @media (max-width: 767px) {
        .cta-banner-card {
            flex-direction: column;
            text-align: center;
            padding: 30px 20px;
        }
    }

    .cta-rocket-icon-wrap {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgba(230, 0, 35, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-primary);
        flex-shrink: 0;
        border: 1px solid rgba(230, 0, 35, 0.2);
    }

    .floating-rocket {
        animation: floatUpDown 3s ease-in-out infinite;
    }

    @keyframes floatUpDown {
        0%, 100% { transform: translateY(0px) rotate(0deg); }
        50% { transform: translateY(-4px) rotate(3deg); }
    }

    .cta-card-content {
        flex-grow: 1;
        text-align: left;
    }

    @media (max-width: 767px) {
        .cta-card-content {
            text-align: center;
        }
    }

    .cta-card-title {
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 3vw, 1.8rem);
        font-weight: 800;
        color: var(--color-text);
        letter-spacing: -0.02em;
        margin: 0 0 8px 0;
    }

    .cta-card-desc {
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--color-muted);
        margin: 0 0 24px 0;
        max-width: 600px;
    }

    .cta-search-and-browse {
        display: flex;
        width: 100%;
    }

    .cta-search-form {
        display: flex;
        align-items: center;
        background: var(--bg-primary);
        border: 1px solid var(--color-border);
        border-radius: 100px;
        padding: 5px;
        width: 100%;
        max-width: 480px;
        transition: var(--transition-smooth);
    }

    .cta-search-form:focus-within {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-glow);
    }

    .cta-input-inner-wrapper {
        display: flex;
        align-items: center;
        flex-grow: 1;
        padding-left: 14px;
        gap: 8px;
    }

    .cta-search-icon {
        color: var(--color-muted);
        display: flex;
        align-items: center;
    }

    .cta-search-input {
        background: none !important;
        border: none !important;
        outline: none !important;
        font-size: 16px !important; /* Raise to 16px to prevent iOS auto-zoom on focus */
        color: var(--color-text) !important;
        width: 100%;
        padding: 0 !important;
    }

    @media (min-width: 640px) {
        .cta-search-input {
            font-size: 0.85rem !important;
        }
    }

    .cta-browse-btn {
        background: var(--color-primary);
        color: #fff !important;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 0.82rem;
        border: none;
        padding: 10px 22px;
        border-radius: 100px;
        cursor: pointer;
        transition: var(--transition-smooth);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .cta-browse-btn:hover {
        background: var(--color-primary-hover);
        transform: translateY(-1px);
    }

    /* ==========================================
       ABOUT TOOL DUAL COLUMN SECTION
       ========================================== */
    .about-tool-columns-section {
        width: 100%;
        max-width: 1200px;
        margin: 80px auto;
        padding: 0 24px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .about-tool-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 40px;
        text-align: left;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    @media (max-width: 991px) {
        .about-tool-grid {
            grid-template-columns: 1fr;
            gap: 30px;
        }
    }

    .about-tool-info-col {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .about-tool-info-col h2,
    .about-tool-info-col h3,
    .about-tool-info-col p,
    .about-tool-info-col ol,
    .about-tool-info-col li {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        max-width: 100%;
    }

    .about-tag-small {
        font-family: var(--font-mono);
        font-size: 0.65rem;
        font-weight: 700;
        color: var(--color-muted);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 8px;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        display: inline-block;
        max-width: 100%;
    }

    .about-title-premium {
        font-family: var(--font-display);
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--color-text);
        letter-spacing: -0.02em;
        margin: 0 0 16px 0;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        max-width: 100%;
    }

    .about-tool-info-col p {
        font-size: 0.88rem;
        line-height: 1.6;
        color: var(--color-muted);
        margin: 0 0 16px 0;
    }

    .about-trust-highlights-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 10px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .trust-highlight-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--color-text);
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        padding: 6px 12px;
        border-radius: 8px;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
    }

    .trust-check-icon {
        color: #27c93f;
        flex-shrink: 0;
    }

    .about-tool-tags-col {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 30px;
        box-shadow: var(--shadow-soft);
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    @media (max-width: 575px) {
        .about-tool-columns-section {
            margin: 40px auto;
            padding: 0 16px;
        }
        .about-tool-tags-col {
            padding: 16px;
        }
    }

    .about-tool-tags-col h3,
    .about-tool-tags-col p,
    .about-tool-tags-col span,
    .about-tool-tags-col ul,
    .about-tool-tags-col li,
    .about-tool-tags-col a {
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        max-width: 100%;
    }

    .tags-col-title {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--color-text);
        margin: 0 0 8px 0;
    }

    .tags-col-desc {
        font-size: 0.82rem;
        line-height: 1.5;
        color: var(--color-muted);
        margin: 0 0 20px 0;
    }

    .keyword-cloud-premium {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .keyword-pill-item {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--color-text);
        background: var(--bg-primary);
        border: 1px solid var(--color-border);
        padding: 6px 12px;
        border-radius: 6px;
        text-decoration: none;
        transition: var(--transition-smooth);
        display: inline-block;
        max-width: 100%;
        box-sizing: border-box;
    }

    .keyword-pill-item:hover {
        border-color: rgba(230, 0, 35, 0.2);
        color: var(--color-primary);
        background: rgba(230, 0, 35, 0.02);
        transform: translateY(-1px);
    }

    .about-tool-columns-section img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .table-container-premium {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .table-container-premium table {
        width: 100% !important;
        min-width: 100% !important;
    }

    .eeat-trust-compliance-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    @media (max-width: 575px) {
        .eeat-trust-compliance-card {
            padding: 16px !important;
        }
    }

    /* ==========================================
       PREMIUM FOOTER STYLING
       ========================================== */
    .site-footer {
        background: #090909;
        border-top: 1px solid #1c1c1e;
        padding: 60px 24px 40px;
        box-sizing: border-box;
    }

    [data-theme="light"] .site-footer {
        background: #FFFFFF;
        border-top: 1px solid #E5E5EA;
    }

    .site-footer .footer-grid {
        max-width: var(--container-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1.2fr 0.9fr 0.9fr 1fr;
        gap: 40px;
    }

    @media (max-width: 991px) {
        .site-footer .footer-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
        }
    }

    @media (max-width: 575px) {
        .site-footer .footer-grid {
            grid-template-columns: 1fr;
        }
    }

    .footer-column {
        display: flex;
        flex-direction: column;
        text-align: left;
    }

    .footer-logo {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 1.2rem;
        letter-spacing: -0.03em;
        margin-bottom: 12px;
    }

    .footer-tagline {
        font-size: 0.82rem;
        line-height: 1.5;
        color: #8E8E93;
        margin: 0 0 16px 0;
    }

    .footer-heading {
        font-family: var(--font-display);
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #fff;
        letter-spacing: 0.05em;
        margin: 0 0 16px 0;
    }

    [data-theme="light"] .footer-heading {
        color: #1C1C1E;
    }

    .footer-links-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .footer-links-list li {
        margin: 0;
    }

    .footer-links-list a {
        font-size: 0.82rem;
        color: #8E8E93;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .footer-links-list a:hover {
        color: var(--color-primary);
    }

    .footer-bottom-info-row {
        max-width: var(--container-width);
        margin: 40px auto 0;
        padding-top: 30px;
        border-top: 1px solid #1c1c1e;
        display: flex;
        flex-direction: column;
        gap: 16px;
        text-align: left;
    }

    [data-theme="light"] .footer-bottom-info-row {
        border-top-color: #E5E5EA;
    }

    .footer-languages-wrapper {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 0.78rem;
    }

    .lang-label-footer {
        color: #555;
        font-weight: 600;
    }

    .lang-links-list {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #555;
    }

    .lang-link {
        color: #8E8E93;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .lang-link:hover, .lang-link.active-lang {
        color: var(--color-primary);
        font-weight: 600;
    }

    .footer-bottom-bar-affiliation {
        font-size: 0.72rem;
        line-height: 1.5;
        color: #555;
    }

    /* ==========================================
       STEP-BY-STEP QUICK GUIDE (PREMIUM)
       ========================================== */
    .howto-premium-stepper {
        padding: 60px 0 40px;
        margin-bottom: 40px;
    }

    .stepper-grid-layout {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        position: relative;
    }

    @media (max-width: 1023px) {
        .stepper-grid-layout {
            grid-template-columns: 1fr;
            gap: 24px;
        }
    }

    .stepper-step-card {
        background: var(--bg-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 28px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-shadow: var(--shadow-soft);
        transition: var(--transition-smooth);
        z-index: 1;
    }

    .stepper-step-card:hover {
        border-color: rgba(230, 0, 35, 0.2);
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

    [data-theme="light"] .stepper-step-card:hover {
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
    }

    .step-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .step-card-num-circle {
        font-family: var(--font-display);
        font-size: 0.95rem;
        font-weight: 800;
        color: var(--color-primary);
        background: rgba(230, 0, 35, 0.08);
        padding: 4px 12px;
        border-radius: 100px;
        letter-spacing: -0.01em;
    }

    .step-card-icon-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        background: var(--bg-primary);
        color: var(--color-text);
        border: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    .step-card-icon-wrap svg {
        width: 20px !important;
        height: 20px !important;
        display: block !important;
        color: var(--color-text);
        stroke-width: 2;
    }

    .step-card-title {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 700;
        margin: 0 0 10px 0;
        color: var(--color-text);
        line-height: 1.35;
    }

    .step-card-desc {
        font-size: 0.82rem;
        line-height: 1.55;
        color: var(--color-muted);
        margin: 0;
    }

    .stepper-arrow-connector {
        position: absolute;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
        color: var(--color-muted);
        opacity: 0.4;
        pointer-events: none;
    }

    .stepper-arrow-connector svg {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
    }

    @media (max-width: 1023px) {
        .stepper-arrow-connector {
            display: none !important;
        }
    }

    /* ==========================================
       IMAGE METADATA & DYNAMIC COLOR PALETTE
       ========================================== */
    .specs-grid-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
        box-sizing: border-box;
    }

    @media (min-width: 768px) {
        .specs-grid-container {
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }
    }

    .specs-card-meta, .specs-card-palette {
        background: var(--bg-card);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: 24px;
        box-shadow: var(--shadow-soft);
        box-sizing: border-box;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .specs-card-title {
        font-family: var(--font-display);
        font-size: 1.15rem;
        font-weight: 700;
        margin: 0 0 16px 0;
        color: var(--color-text);
        letter-spacing: -0.01em;
    }

    .specs-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
        color: var(--color-text);
    }

    .specs-table tr {
        border-bottom: 1px solid var(--color-border);
    }

    .specs-table tr:last-child {
        border-bottom: none;
    }

    .specs-table td {
        padding: 12px 0;
        vertical-align: middle;
    }

    .specs-table td:first-child {
        color: var(--color-muted);
        font-weight: 500;
        width: 40%;
    }

    .specs-table td:last-child {
        font-weight: 600;
        text-align: right;
    }

    .specs-palette-desc {
        font-size: 0.8rem;
        color: var(--color-muted);
        margin: -8px 0 16px 0;
        line-height: 1.4;
    }

    .palette-swatches-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        margin-top: auto;
    }

    @media (max-width: 480px) {
        .palette-swatches-grid {
            gap: 8px;
        }
    }

    .palette-swatch-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .swatch-color {
        position: relative;
        width: 100%;
        aspect-ratio: 1;
        border-radius: var(--radius-md);
        cursor: pointer;
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    [data-theme="light"] .swatch-color {
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .swatch-color:hover {
        transform: scale(1.06);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .swatch-copy-toast {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    .swatch-color:hover .swatch-copy-toast {
        opacity: 1;
    }

    .swatch-hex {
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--color-muted);
        text-transform: uppercase;
        letter-spacing: -0.01em;
        white-space: nowrap;
    }

    @media (max-width: 400px) {
        .swatch-hex {
            font-size: 0.65rem;
        }
    }

    /* ==========================================
       GLOBAL CRITICAL MOBILE RESPONSIVE & ZOOM FIXES
       ========================================== */
    @media (max-width: 768px) {
        html, body {
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: hidden !important;
            margin: 0 !important;
        }

        .front-page-container {
            width: 100% !important;
            max-width: 100% !important;
            padding: 24px 16px 48px !important;
            box-sizing: border-box !important;
            overflow-x: hidden !important;
        }

        /* Scale down the massive hero title */
        .hero-title-primary {
            font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
            line-height: 1.2 !important;
            letter-spacing: -0.02em !important;
            margin-bottom: 12px !important;
        }

        .hero-subtitle-primary {
            font-size: 0.88rem !important;
            line-height: 1.5 !important;
            margin-bottom: 20px !important;
        }

        /* Scale other massive clamp headings */
        .section-title-premium {
            font-size: clamp(1.3rem, 5vw, 1.7rem) !important;
        }

        .cta-heading {
            font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
        }

        /* Safe break for all text elements to prevent layout overflow */
        h1, h2, h3, h4, h5, h6, p, span, a, div {
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
        }

        /* Prevent oversized cards or images pushing layout boundaries */
        .card, .tool-box, .step-card, .feature-card, .faq-item, .policy-section, .toc-box, .thumb-card, .related-link, .notice-card {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            padding: 16px !important; /* Elegant compact spacing on mobile */
        }

        /* Table responsive wrappers */
        .table-container-premium, .table-wrapper {
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }

        /* Prevent any flex layouts with huge wrap from overflowing */
        .flex-row, .flex, .row {
            max-width: 100% !important;
        }

        /* Images and media elements responsive constraint */
        img, video, iframe, svg, canvas {
            max-width: 100% !important;
            height: auto !important;
        }
    }