/* ==========================================================
   Webyan V2 — Shared Design System
   منصة ويبيان — تجربة SaaS احترافية
   ========================================================== */

:root {
    --brand-navy: #263c84;
    --brand-navy-deep: #1a2a5e;
    --brand-navy-light: #3a56a8;
    --brand-cyan: #24c2ec;
    --brand-cyan-deep: #0ea4cc;
    --brand-cyan-light: #5fd4f2;
    --brand-cyan-pale: #e8f8fd;
    --brand-cyan-mist: #f2fbfe;
    --surface-white: #ffffff;
    --surface-snow: #fafbfe;
    --surface-mist: #f5f7fb;
    --surface-cloud: #eef2f9;
    --text-primary: #0f1733;
    --text-secondary: #4a5578;
    --text-muted: #8892a8;
    --text-inverse: #ffffff;
    --border-soft: #e7ecf4;
    --border-strong: #d4dbe8;
    --gradient-brand: linear-gradient(135deg, #263c84 0%, #24c2ec 100%);
    --gradient-cta: linear-gradient(135deg, #24c2ec 0%, #263c84 100%);
    --gradient-soft: linear-gradient(180deg, #fafbfe 0%, #ffffff 100%);
    --gradient-hero: radial-gradient(1200px 600px at 80% -10%, rgba(36,194,236,0.18), transparent 60%), radial-gradient(900px 500px at 10% 0%, rgba(38,60,132,0.12), transparent 60%);
    --gradient-cta-bg: linear-gradient(135deg, #1a2a5e 0%, #263c84 50%, #0ea4cc 100%);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;
    --shadow-xs: 0 1px 2px rgba(15,23,51,0.04);
    --shadow-sm: 0 2px 8px rgba(15,23,51,0.05);
    --shadow-md: 0 8px 24px rgba(38,60,132,0.08);
    --shadow-lg: 0 20px 50px rgba(38,60,132,0.12);
    --shadow-xl: 0 30px 70px rgba(38,60,132,0.16);
    --shadow-cyan: 0 12px 30px rgba(36,194,236,0.25);
    --font-heading: 'IBM Plex Sans Arabic', sans-serif;
    --font-body: 'Cairo', 'Noto Sans Arabic', sans-serif;
    --easing: cubic-bezier(0.16, 1, 0.3, 1);
    --duration: 0.6s;
}

    /* ==========================================================
   Dark Mode — Premium Navy Palette (شامل)
   ========================================================== */
    :root[data-theme="dark"] {
        --brand-navy: #4d6ad6;
        --brand-navy-deep: #3a56a8;
        --brand-navy-light: #6b85e0;
        --brand-cyan: #38d0f5;
        --brand-cyan-deep: #24c2ec;
        --brand-cyan-light: #7ce0f7;
        --brand-cyan-pale: rgba(56,208,245,0.10);
        --brand-cyan-mist: rgba(56,208,245,0.06);
        --surface-white: #131a2e; /* بطاقات */
        --surface-snow: #0f1525; /* خلفية ثانوية */
        --surface-mist: #161e36; /* خلفية أقسام بديلة */
        --surface-cloud: #1c2542; /* خلفية محايدة */

        --text-primary: #eaf0ff;
        --text-secondary: #b6c0db;
        --text-muted: #8590b0;
        --text-inverse: #0b1024;
        --border-soft: rgba(255,255,255,0.08);
        --border-strong: rgba(255,255,255,0.14);
        --gradient-brand: linear-gradient(135deg, #4d6ad6 0%, #38d0f5 100%);
        --gradient-cta: linear-gradient(135deg, #38d0f5 0%, #4d6ad6 100%);
        --gradient-soft: linear-gradient(180deg, #0f1525 0%, #0b1024 100%);
        --gradient-hero: radial-gradient(1200px 600px at 80% -10%, rgba(56,208,245,0.16), transparent 60%), radial-gradient(900px 500px at 10% 0%, rgba(77,106,214,0.18), transparent 60%);
        --gradient-cta-bg: linear-gradient(135deg, #0b1024 0%, #1a2a5e 50%, #0ea4cc 100%);
        --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
        --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
        --shadow-lg: 0 20px 50px rgba(0,0,0,0.55);
        --shadow-xl: 0 30px 70px rgba(0,0,0,0.6);
        --shadow-cyan: 0 12px 30px rgba(56,208,245,0.25);
    }

        :root[data-theme="dark"] body {
            background: #0b1024;
        }

        /* تباينات وعناصر شائعة (لا تستعمل Variables) */
        :root[data-theme="dark"] .bg-white,
        :root[data-theme="dark"] [class*="bg-white"] {
            background-color: var(--surface-white) !important;
        }

        :root[data-theme="dark"] img:not([src*=".svg"]):not(.no-dim) {
            filter: brightness(0.92) contrast(1.02);
        }

        :root[data-theme="dark"] .site-header,
        :root[data-theme="dark"] .wb-header,
        :root[data-theme="dark"] header.header,
        :root[data-theme="dark"] nav.navbar {
            background: rgba(11,16,36,0.78) !important;
            backdrop-filter: saturate(180%) blur(14px);
            border-bottom-color: var(--border-soft) !important;
        }

        :root[data-theme="dark"] .site-footer,
        :root[data-theme="dark"] footer {
            background: #070b1a !important;
            color: var(--text-secondary) !important;
        }

        :root[data-theme="dark"] .card,
        :root[data-theme="dark"] .pricing-card,
        :root[data-theme="dark"] .feature-card,
        :root[data-theme="dark"] .stat-card,
        :root[data-theme="dark"] .testimonial-card,
        :root[data-theme="dark"] .blog-card,
        :root[data-theme="dark"] .pr-summary,
        :root[data-theme="dark"] .pr-section,
        :root[data-theme="dark"] .legal-card,
        :root[data-theme="dark"] .form-card {
            background: var(--surface-white) !important;
            border-color: var(--border-soft) !important;
            color: var(--text-primary);
        }

        :root[data-theme="dark"] input,
        :root[data-theme="dark"] select,
        :root[data-theme="dark"] textarea {
            background: var(--surface-snow) !important;
            border-color: var(--border-strong) !important;
            color: var(--text-primary) !important;
        }

            :root[data-theme="dark"] input::placeholder,
            :root[data-theme="dark"] textarea::placeholder {
                color: var(--text-muted) !important;
            }

        :root[data-theme="dark"] hr {
            border-color: var(--border-soft);
        }

        :root[data-theme="dark"] .divider {
            background: var(--border-soft) !important;
        }

/* Theme toggle button */
.btn-theme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1.5px solid var(--brand-cyan-pale);
    background: var(--surface-white);
    color: var(--text-primary);
    cursor: pointer;
    transition: all .25s var(--easing);
    margin-inline-start: 8px;
}

    .btn-theme:hover {
        border-color: var(--brand-cyan);
        color: var(--brand-cyan-deep);
        transform: translateY(-1px);
    }

    .btn-theme svg {
        width: 18px;
        height: 18px;
    }

    .btn-theme .icon-sun {
        display: none;
    }

    .btn-theme .icon-moon {
        display: block;
    }

:root[data-theme="dark"] .btn-theme .icon-sun {
    display: block;
}

:root[data-theme="dark"] .btn-theme .icon-moon {
    display: none;
}

:root[data-theme="dark"] .btn-theme {
    background: var(--surface-white);
    border-color: var(--border-strong);
}

/* تحوّل ناعم عند التبديل */
html {
    transition: background-color .35s ease;
}

body, .card, .site-header, .site-footer, header, footer, nav, input, select, textarea {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--surface-white);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-primary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.25s ease;
}

img, svg {
    max-width: 100%;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul {
    list-style: none;
}

section {
    position: relative;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.container-wide {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.container-narrow {
    max-width: 920px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ===================== BADGES ===================== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: var(--brand-cyan-pale);
    color: var(--brand-navy);
    border: 1px solid rgba(36,194,236,0.25);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    font-family: var(--font-body);
}

    .eyebrow .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand-cyan);
        box-shadow: 0 0 0 4px rgba(36,194,236,0.18);
    }

    .eyebrow.dark {
        background: rgba(255,255,255,0.1);
        color: #fff;
        border-color: rgba(255,255,255,0.2);
    }

/* ===================== BUTTONS — Unified Design System ===================== */
/* Base: shared by all button variants */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 28px;
    border-radius: var(--radius-pill);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease, filter .25s ease;
    -webkit-tap-highlight-color: transparent;
}

    .btn:focus-visible {
        outline: 2px solid var(--brand-cyan);
        outline-offset: 2px;
    }

/* A) Primary — gradient pill (start, subscribe, request demo) */
.btn-primary {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, #25B9DC 0%, #1F5A9F 100%);
    box-shadow: 0 14px 28px rgba(37, 185, 220, .22);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 36px rgba(37, 185, 220, .28);
        filter: brightness(1.03);
    }

    .btn-primary:active {
        transform: translateY(0);
        filter: brightness(.98);
    }

/* B) Secondary — outlined pill on white (browse plans, view demo) */
.btn-secondary {
    color: var(--brand-navy);
    background: var(--surface-white);
    border: 1px solid #DCEAF5;
    box-shadow: 0 8px 18px rgba(18, 51, 91, .05);
}

    .btn-secondary:hover {
        transform: translateY(-2px);
        background: #F2FBFE;
        border-color: #BFEAF5;
        box-shadow: 0 12px 24px rgba(18, 51, 91, .08);
    }

/* C) Tertiary — text link with arrow */
.btn-tertiary {
    height: auto;
    color: #159FD0;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 6px 4px;
    font-weight: 600;
    overflow: visible;
}

    .btn-tertiary:hover {
        color: var(--brand-navy);
        background: transparent;
    }

        .btn-tertiary:hover .arrow {
            transform: translateX(-4px);
        }

/* On-dark variants (used over gradient/dark CTA backgrounds) */
.btn-white {
    color: var(--brand-navy);
    background: var(--surface-white);
    border: 0;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
}

    .btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 32px rgba(0, 0, 0, .18);
        filter: brightness(1.02);
    }

.btn-white-outline {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
}

    .btn-white-outline:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .12);
        border-color: #fff;
    }

/* Legacy aliases — keep markup working, map to new system */
.btn-outline { /* used for plan cards (non-featured) */
    color: var(--brand-navy);
    background: var(--surface-white);
    border: 1px solid #DCEAF5;
    box-shadow: 0 8px 18px rgba(18, 51, 91, .05);
}

    .btn-outline:hover {
        transform: translateY(-2px);
        background: #F2FBFE;
        border-color: #BFEAF5;
        box-shadow: 0 12px 24px rgba(18, 51, 91, .08);
    }

.btn-ghost {
    color: var(--brand-navy);
    background: var(--surface-white);
    border: 1px solid #DCEAF5;
    box-shadow: 0 8px 18px rgba(18, 51, 91, .05);
}

    .btn-ghost:hover {
        transform: translateY(-2px);
        background: #F2FBFE;
        border-color: #BFEAF5;
        box-shadow: 0 12px 24px rgba(18, 51, 91, .08);
    }

/* Sizes */
.btn-lg {
    height: 56px;
    padding: 0 36px;
    font-size: 1rem;
}

.btn-md {
    height: 52px;
    padding: 0 28px;
    font-size: 0.95rem;
}

.btn-sm {
    height: 40px;
    padding: 0 18px;
    font-size: 0.875rem;
}

.btn-tertiary.btn-lg,
.btn-tertiary.btn-md,
.btn-tertiary.btn-sm {
    height: auto;
    padding: 6px 4px;
}

/* Arrow icon micro-interaction (RTL-aware: arrow visually moves toward link) */
.btn .arrow {
    transition: transform .25s ease;
    display: inline-flex;
}

.btn:hover .arrow {
    transform: translateX(-4px);
}

/* Block helper */
.btn-block {
    width: 100%;
}

/* Mobile: stack adjacent CTA buttons full-width for comfortable touch */
@media (max-width: 480px) {
    .btn-lg,
    .btn-md,
    .btn {
        min-height: 44px;
    }

    .hero-actions .btn,
    .final-cta .btn,
    .final-cta2-btns .btn,
    .cc-actions .btn,
    .cr-actions .btn {
        width: 100%;
    }
}

/* ===================== HEADER ===================== */
.site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

    .site-header.scrolled {
        background: rgba(255,255,255,0.95);
        border-bottom-color: var(--border-soft);
        box-shadow: 0 4px 20px rgba(38,60,132,0.05);
    }

.header-inner {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    gap: 24px;
}

.header-logo {
    display: flex;
    align-items: center;
}

    .header-logo img {
        height: 34px;
        width: auto;
        display: block;
    }

.footer-logo-link {
    display: inline-flex;
    align-items: center;
}

    .footer-logo-link img {
        height: 38px;
        width: auto;
        display: block;
    }

.header-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .header-nav a {
        padding: 9px 16px;
        border-radius: var(--radius-pill);
        font-size: 0.93rem;
        font-weight: 500;
        color: var(--text-secondary);
        transition: all 0.25s ease;
    }

        .header-nav a:hover {
            color: var(--brand-navy);
            background: var(--surface-mist);
        }

        .header-nav a.active {
            color: var(--brand-navy);
            background: var(--brand-cyan-pale);
            font-weight: 600;
        }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-header-cta {
    background: var(--gradient-cta);
    color: #fff;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.88rem;
    font-family: var(--font-heading);
    box-shadow: 0 4px 14px rgba(36,194,236,0.28);
    transition: all 0.3s ease;
}

    .btn-header-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(36,194,236,0.4);
    }

.btn-header-secondary {
    color: var(--brand-navy);
    padding: 10px 18px;
    font-weight: 600;
    font-size: 0.9rem;
    font-family: var(--font-heading);
}

    .btn-header-secondary:hover {
        color: var(--brand-cyan-deep);
    }

.mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
}

    .mobile-toggle span {
        width: 22px;
        height: 2px;
        background: var(--brand-navy);
        border-radius: 2px;
        transition: all 0.3s;
    }

/* ===================== MOBILE DRAWER ===================== */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,51,0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 200;
}

    .mobile-overlay.open {
        opacity: 1;
        visibility: visible;
    }

.mobile-drawer {
    position: fixed;
    top: 0;
    right: -360px;
    width: 320px;
    height: 100vh;
    background: var(--surface-white);
    z-index: 201;
    transition: right 0.4s var(--easing);
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: -10px 0 40px rgba(0,0,0,0.12);
}

    .mobile-drawer.open {
        right: 0;
    }

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.drawer-close {
    font-size: 1.8rem;
    color: var(--text-secondary);
    padding: 4px 10px;
}

.drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .drawer-nav a {
        padding: 14px 16px;
        border-radius: var(--radius-md);
        font-weight: 500;
        color: var(--text-primary);
    }

        .drawer-nav a:hover, .drawer-nav a.active {
            background: var(--brand-cyan-pale);
            color: var(--brand-navy);
        }

.drawer-cta {
    margin-top: 20px;
    padding: 14px;
    text-align: center;
    background: var(--gradient-cta);
    color: #fff !important;
    border-radius: var(--radius-pill);
    font-weight: 600;
}

/* ===================== SECTION HELPERS ===================== */
.section {
    padding: 110px 0;
}

.section-sm {
    padding: 80px 0;
}

.section-mist {
    background: var(--surface-snow);
}

.section-cloud {
    background: linear-gradient(180deg, #fff 0%, var(--brand-cyan-mist) 100%);
}

.section-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 64px;
}

    .section-header h2 {
        font-size: clamp(1.9rem, 3.6vw, 2.6rem);
        color: var(--text-primary);
        margin: 16px 0 14px;
        letter-spacing: -0.5px;
    }

    .section-header p {
        font-size: 1.05rem;
        color: var(--text-secondary);
        line-height: 1.85;
    }

.gradient-text {
    background: var(--gradient-cta);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===================== REVEAL ===================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--easing), transform 0.8s var(--easing);
}

    .reveal.visible {
        opacity: 1;
        transform: none;
    }

.reveal-d1 {
    transition-delay: 0.08s;
}

.reveal-d2 {
    transition-delay: 0.16s;
}

.reveal-d3 {
    transition-delay: 0.24s;
}

.reveal-d4 {
    transition-delay: 0.32s;
}

.reveal-d5 {
    transition-delay: 0.4s;
}

/* ===================== HERO V2 ===================== */
.hero2 {
    padding: 160px 0 100px;
    background: var(--gradient-hero), var(--surface-white);
    position: relative;
    overflow: hidden;
}

    .hero2::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(rgba(38,60,132,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(38,60,132,0.04) 1px, transparent 1px);
        background-size: 60px 60px;
        mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
    }

    .hero2 .container-wide {
        position: relative;
        z-index: 2;
    }

.hero2-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero2-text h1 {
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 22px 0 22px;
    color: var(--text-primary);
}

    .hero2-text h1 .highlight {
        color: var(--brand-cyan-deep);
    }

.hero2-text > p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.85;
    max-width: 560px;
    margin-bottom: 30px;
}

.hero2-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
}

.hero2-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

    .hero2-check .icon-circle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--brand-cyan-pale);
        color: var(--brand-cyan-deep);
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }

        .hero2-check .icon-circle svg {
            width: 14px;
            height: 14px;
        }

.hero2-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

.hero2-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 28px;
    border-top: 1px dashed var(--border-soft);
}

.hero2-avatars {
    display: flex;
}

.hero2-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.85rem;
    margin-left: -10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.hero2-trust-text {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

    .hero2-trust-text strong {
        color: var(--text-primary);
        font-weight: 700;
    }

/* Hero visual mockup */
.hero2-visual {
    position: relative;
}

.hero2-mockup {
    background: var(--surface-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-soft);
    overflow: hidden;
    transform: perspective(1500px) rotateY(4deg) rotateX(-2deg);
    transition: transform 0.5s ease;
}

    .hero2-mockup:hover {
        transform: perspective(1500px) rotateY(0) rotateX(0);
    }

.mockup-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-snow);
}

    .mockup-bar .dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #d4dbe8;
    }

        .mockup-bar .dot:nth-child(1) {
            background: #ff6b6b;
        }

        .mockup-bar .dot:nth-child(2) {
            background: #ffd93d;
        }

        .mockup-bar .dot:nth-child(3) {
            background: #6bcf7f;
        }

    .mockup-bar .url {
        margin-right: auto;
        padding: 5px 14px;
        background: var(--surface-white);
        border-radius: var(--radius-pill);
        font-size: 0.78rem;
        color: var(--text-muted);
        border: 1px solid var(--border-soft);
    }

.mockup-body {
    padding: 22px;
    display: grid;
    gap: 16px;
}

.mockup-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mockup-stat {
    background: var(--surface-snow);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 16px;
}

    .mockup-stat .label {
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-bottom: 6px;
    }

    .mockup-stat .num {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--brand-navy);
        font-family: var(--font-heading);
    }

        .mockup-stat .num span {
            font-size: 0.7rem;
            color: var(--brand-cyan-deep);
            margin-right: 6px;
            font-weight: 600;
        }

.mockup-chart {
    background: var(--surface-snow);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 18px;
}

.mockup-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

    .mockup-chart-head .title {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .mockup-chart-head .pill {
        font-size: 0.7rem;
        color: var(--brand-cyan-deep);
        background: var(--brand-cyan-pale);
        padding: 3px 10px;
        border-radius: 20px;
    }

.mockup-bars {
    display: flex;
    align-items: end;
    gap: 6px;
    height: 110px;
}

    .mockup-bars .bar {
        flex: 1;
        background: var(--gradient-cta);
        border-radius: 6px 6px 0 0;
        opacity: 0.7;
    }

        .mockup-bars .bar.active {
            opacity: 1;
        }

.mockup-list {
    display: grid;
    gap: 8px;
}

.mockup-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--surface-snow);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
}

    .mockup-row .ico {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--brand-cyan-pale);
        color: var(--brand-cyan-deep);
        display: grid;
        place-items: center;
        font-size: 0.95rem;
    }

    .mockup-row .info {
        flex: 1;
    }

        .mockup-row .info .t {
            font-size: 0.85rem;
            font-weight: 600;
        }

        .mockup-row .info .s {
            font-size: 0.72rem;
            color: var(--text-muted);
        }

    .mockup-row .badge {
        font-size: 0.68rem;
        padding: 3px 9px;
        border-radius: 12px;
        background: rgba(107,207,127,0.15);
        color: #2d8a4a;
        font-weight: 600;
    }

/* Hero floating cards */
.hero2-float {
    position: absolute;
    background: var(--surface-white);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    animation: floatY 4s ease-in-out infinite;
}

.hero2-float-1 {
    top: -20px;
    right: -10px;
}

.hero2-float-2 {
    bottom: 30px;
    left: -20px;
    animation-delay: -2s;
}

.hero2-float .dot-green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6bcf7f;
    box-shadow: 0 0 0 3px rgba(107,207,127,0.25);
}

.hero2-float .num-big {
    font-size: 1.2rem;
    color: var(--brand-navy);
    font-weight: 800;
}

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

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

/* ===================== TRUST BAR (Marquee Carousel) ===================== */
.trust-bar {
    padding: 56px 0 72px;
    background: #ffffff;
    border-top: 0;
    border-bottom: 1px solid var(--border-soft);
    overflow: hidden;
    margin-top: -1px; /* seamless join with hero */
}

.trust-bar-inner {
    text-align: center;
}

.trust-bar-label {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--text-primary);
    font-weight: 800;
    letter-spacing: 0;
    margin-bottom: 32px;
    text-transform: none;
    position: relative;
    display: inline-block;
}

    .trust-bar-label::after {
        content: "";
        display: block;
        width: 56px;
        height: 3px;
        margin: 14px auto 0;
        background: linear-gradient(90deg, var(--brand-cyan), var(--brand-blue));
        border-radius: 2px;
    }

.trust-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.trust-track {
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
    animation: trust-scroll 40s linear infinite;
}

.trust-marquee:hover .trust-track {
    animation-play-state: paused;
}

.trust-logo-item {
    flex: 0 0 auto;
    width: 220px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: transparent;
    transition: transform 0.35s var(--easing), opacity 0.35s var(--easing);
    opacity: 0.95;
}

    .trust-logo-item img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }

    .trust-logo-item:hover {
        opacity: 1;
        transform: translateY(-3px) scale(1.04);
    }

@keyframes trust-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
/* RTL: scroll the opposite direction so motion feels natural */
html[dir="rtl"] .trust-track {
    animation-name: trust-scroll-rtl;
}

@keyframes trust-scroll-rtl {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

@media (max-width: 768px) {
    .trust-bar {
        padding: 40px 0 56px;
    }

    .trust-bar-label {
        font-size: 1.1rem;
    }

    .trust-logo-item {
        width: 170px;
        height: 100px;
        padding: 8px 10px;
    }

    .trust-track {
        gap: 12px;
        animation-duration: 30s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .trust-track {
        animation: none;
    }
}

/* ===================== VALUES (لماذا ويبيان) ===================== */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.value-card {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: all 0.4s var(--easing);
    position: relative;
    overflow: hidden;
}

    .value-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 3px;
        background: var(--gradient-cta);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.5s var(--easing);
    }

    .value-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
        border-color: transparent;
    }

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

.value-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--brand-cyan-pale);
    color: var(--brand-cyan-deep);
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.value-card:hover .value-icon {
    background: var(--gradient-cta);
    color: #fff;
    transform: scale(1.05) rotate(-4deg);
}

.value-icon svg {
    width: 26px;
    height: 26px;
}

.value-card h3 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.value-card p {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ===================== MODULES (المكونات) ===================== */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.module-card {
    position: relative;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: all 0.4s var(--easing);
}

    .module-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        border-color: var(--brand-cyan-light);
    }

.module-num {
    position: absolute;
    top: 24px;
    left: 24px;
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
}

.module-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--brand-cyan-pale), #fff);
    border: 1px solid rgba(36,194,236,0.25);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    color: var(--brand-cyan-deep);
}

    .module-icon-wrap svg {
        width: 24px;
        height: 24px;
    }

.module-card h3 {
    font-size: 1.08rem;
    margin-bottom: 8px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .module-card h3 .soon {
        font-size: 0.65rem;
        padding: 3px 9px;
        border-radius: 20px;
        background: rgba(232,168,56,0.15);
        color: #c47e1a;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

.module-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ===================== PRICING TEASER ===================== */
.plan-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1080px;
    margin: 0 auto;
}

.plan-teaser {
    position: relative;
    background: var(--surface-white);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: all 0.35s var(--easing);
}

    .plan-teaser:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        border-color: var(--brand-cyan-light);
    }

    .plan-teaser.featured {
        border-color: var(--brand-cyan);
        box-shadow: var(--shadow-md);
        background: linear-gradient(180deg, var(--brand-cyan-mist) 0%, #fff 60%);
    }

    .plan-teaser .plan-tag {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 20px;
        background: var(--surface-mist);
        color: var(--text-secondary);
        margin-bottom: 12px;
        letter-spacing: 0.5px;
    }

    .plan-teaser.featured .plan-tag {
        background: var(--gradient-cta);
        color: #fff;
    }

    .plan-teaser h3 {
        font-size: 1.3rem;
        margin-bottom: 6px;
        color: var(--brand-navy);
    }

    .plan-teaser p {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-bottom: 18px;
        min-height: 50px;
    }

    .plan-teaser .lnk {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--brand-cyan-deep);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .plan-teaser .lnk:hover {
            color: var(--brand-navy);
        }

/* ===================== BENEFITS GRID ===================== */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.benefit-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

    .benefit-item:hover {
        background: var(--brand-cyan-mist);
        border-color: var(--brand-cyan-light);
    }

.benefit-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-cyan-pale);
    color: var(--brand-cyan-deep);
    display: grid;
    place-items: center;
}

    .benefit-icon svg {
        width: 20px;
        height: 20px;
    }

.benefit-item h4 {
    font-size: 0.98rem;
    color: var(--text-primary);
}

.benefit-item p {
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ===================== TIMELINE ===================== */
.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

    .timeline::before {
        content: "";
        position: absolute;
        top: 38px;
        right: 6%;
        left: 6%;
        height: 2px;
        background: linear-gradient(90deg, var(--brand-cyan-light), var(--brand-navy));
        opacity: 0.25;
        z-index: 0;
    }

.timeline-step {
    position: relative;
    text-align: center;
    z-index: 1;
}

.timeline-num {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--surface-white);
    border: 2px solid var(--brand-cyan-light);
    display: grid;
    place-items: center;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-cyan-deep);
    box-shadow: 0 6px 18px rgba(36,194,236,0.18);
    transition: all 0.4s ease;
}

.timeline-step:hover .timeline-num {
    background: var(--gradient-cta);
    color: #fff;
    transform: scale(1.05);
    border-color: transparent;
}

.timeline-step h4 {
    font-size: 1rem;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.timeline-step p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ===================== SHOWCASE / SOCIAL PROOF ===================== */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.showcase-card {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-cyan-deep) 100%);
    border: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 22px;
    color: #fff;
    cursor: pointer;
    transition: all 0.4s var(--easing);
}

    .showcase-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 60%);
        pointer-events: none;
    }

    .showcase-card.alt-1 {
        background: linear-gradient(135deg, #1a2a5e, #3a56a8);
    }

    .showcase-card.alt-2 {
        background: linear-gradient(135deg, #0ea4cc, #5fd4f2);
    }

    .showcase-card.alt-3 {
        background: linear-gradient(135deg, #263c84, #0ea4cc);
    }

    .showcase-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-xl);
    }

    .showcase-card .label {
        position: relative;
        z-index: 1;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 1px;
        opacity: 0.85;
        margin-bottom: 6px;
        text-transform: uppercase;
    }

    .showcase-card .name {
        position: relative;
        z-index: 1;
        font-size: 1.05rem;
        font-weight: 700;
    }

/* ===================== FINAL CTA ===================== */
.final-cta2 {
    padding: 110px 0;
    background: var(--gradient-cta-bg);
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
}

    .final-cta2::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1), transparent 40%), radial-gradient(circle at 80% 70%, rgba(36,194,236,0.2), transparent 40%);
    }

    .final-cta2 .container {
        position: relative;
        z-index: 1;
    }

    .final-cta2 .eyebrow {
        background: rgba(255,255,255,0.12);
        color: #fff;
        border-color: rgba(255,255,255,0.2);
        margin-bottom: 22px;
    }

    .final-cta2 h2 {
        font-size: clamp(2rem, 4vw, 2.8rem);
        color: #fff;
        margin-bottom: 16px;
        letter-spacing: -0.5px;
    }

    .final-cta2 p {
        font-size: 1.08rem;
        color: rgba(255,255,255,0.85);
        max-width: 620px;
        margin: 0 auto 32px;
        line-height: 1.85;
    }

.final-cta2-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===================== FOOTER ===================== */
.site-footer {
    background: #0c1230;
    color: rgba(255,255,255,0.75);
    padding: 70px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr) 1.3fr;
    gap: 40px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.85;
    color: rgba(255,255,255,0.65);
    margin: 18px 0 22px;
}

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

    .footer-contact li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 0.88rem;
        color: rgba(255,255,255,0.78);
        line-height: 1.6;
    }

    .footer-contact a {
        color: rgba(255,255,255,0.78);
        text-decoration: none;
        transition: color .2s ease;
    }

        .footer-contact a:hover {
            color: var(--brand-cyan);
        }

    .footer-contact .fc-ico {
        flex-shrink: 0;
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.08);
        border-radius: 6px;
        font-size: 0.75rem;
    }

.footer-social {
    display: flex;
    gap: 10px;
}

    .footer-social a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,0.06);
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        .footer-social a:hover {
            background: var(--brand-cyan);
            transform: translateY(-2px);
        }

.footer-col h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 18px;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col a {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
}

    .footer-col a:hover {
        color: var(--brand-cyan);
    }

.footer-newsletter input {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    margin-bottom: 10px;
}

    .footer-newsletter input::placeholder {
        color: rgba(255,255,255,0.45);
    }

.footer-newsletter button {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-pill);
    background: var(--gradient-cta);
    color: #fff;
    font-weight: 600;
    font-family: var(--font-heading);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .footer-newsletter button:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-cyan);
    }

.footer-bottom {
    padding-top: 24px;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

/* ===================== PAGE HERO (subpages) ===================== */
.page-hero {
    padding: 170px 0 80px;
    background: var(--gradient-hero), var(--surface-white);
    position: relative;
    overflow: hidden;
    text-align: center;
}

    .page-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image: linear-gradient(rgba(38,60,132,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(38,60,132,0.04) 1px, transparent 1px);
        background-size: 60px 60px;
        mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
    }

    .page-hero .container {
        position: relative;
        z-index: 1;
    }

    .page-hero h1 {
        font-size: clamp(2rem, 4.5vw, 3.2rem);
        margin: 18px 0 18px;
        letter-spacing: -0.8px;
        color: var(--text-primary);
    }

        .page-hero h1 .gradient-text {
            display: inline-block;
        }

    .page-hero p {
        font-size: 1.1rem;
        color: var(--text-secondary);
        max-width: 720px;
        margin: 0 auto 28px;
        line-height: 1.85;
    }

/* ===================== PRICING PAGE ===================== */
.pricing-toggle {
    display: inline-flex;
    padding: 5px;
    background: var(--surface-snow);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    margin: 0 auto;
}

    .pricing-toggle button {
        padding: 9px 22px;
        border-radius: var(--radius-pill);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-secondary);
        font-family: var(--font-heading);
    }

        .pricing-toggle button.active {
            background: var(--gradient-cta);
            color: #fff;
            box-shadow: var(--shadow-cyan);
        }

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

.price-card {
    position: relative;
    background: var(--surface-white);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 38px 30px;
    transition: all 0.4s var(--easing);
}

    .price-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
        border-color: var(--brand-cyan-light);
    }

    .price-card.featured {
        border-color: var(--brand-cyan);
        background: linear-gradient(180deg, var(--brand-cyan-mist) 0%, #fff 70%);
        box-shadow: var(--shadow-md);
        transform: scale(1.02);
    }

        .price-card.featured:hover {
            transform: scale(1.02) translateY(-6px);
        }

.price-badge {
    position: absolute;
    top: -14px;
    right: 50%;
    transform: translateX(50%);
    background: var(--gradient-cta);
    color: #fff;
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-cyan);
}

.price-tag {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-cyan-deep);
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.price-card h3 {
    font-size: 1.6rem;
    color: var(--brand-navy);
    margin-bottom: 6px;
}

.price-card .desc {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.75;
    min-height: 50px;
    margin-bottom: 22px;
}

.price-amount {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-family: var(--font-heading);
}

    .price-amount .num {
        font-size: 2.6rem;
        font-weight: 800;
        color: var(--brand-navy);
        letter-spacing: -1.5px;
        line-height: 1;
    }

    .price-amount .currency {
        font-size: 0.95rem;
        color: var(--text-secondary);
        font-weight: 600;
    }

    .price-amount .riyal-icon {
        width: 30px;
        height: 30px;
    }

.price-card.featured .price-amount .num {
    color: var(--brand-cyan-deep);
}

.price-period {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.price-billing-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 18px;
    padding: 6px 12px;
    background: var(--surface-mist);
    border-radius: 8px;
    display: inline-block;
    font-weight: 600;
}

:root[data-theme="dark"] .price-amount .num {
    color: #fff;
}

:root[data-theme="dark"] .price-card.featured .price-amount .num {
    color: var(--brand-cyan-light);
}

:root[data-theme="dark"] .price-billing-note {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
}

.price-card .btn {
    width: 100%;
}

.price-features {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-features-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.price-feature {
    display: flex;
    align-items: start;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text-primary);
}

    .price-feature .tick {
        flex-shrink: 0;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--brand-cyan-pale);
        color: var(--brand-cyan-deep);
        display: grid;
        place-items: center;
        margin-top: 4px;
    }

        .price-feature .tick svg {
            width: 11px;
            height: 11px;
        }

/* Pricing comparison */
.compare-wrap {
    max-width: 1180px;
    margin: 0 auto;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
}

    .compare-table thead th {
        padding: 22px 18px;
        background: var(--surface-snow);
        font-family: var(--font-heading);
        font-weight: 700;
        text-align: center;
        font-size: 0.95rem;
        color: var(--text-primary);
        border-bottom: 1px solid var(--border-soft);
    }

        .compare-table thead th:first-child {
            text-align: right;
            padding-right: 26px;
        }

        .compare-table thead th.featured-col {
            background: var(--brand-cyan-pale);
            color: var(--brand-navy);
        }

    .compare-table .cat-row td {
        padding: 18px 18px 12px;
        background: var(--surface-mist);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 1px;
        color: var(--brand-navy);
        text-transform: uppercase;
        border-bottom: 1px solid var(--border-soft);
    }

    .compare-table tbody td {
        padding: 14px 18px;
        text-align: center;
        font-size: 0.9rem;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-soft);
    }

        .compare-table tbody td:first-child {
            text-align: right;
            padding-right: 26px;
            color: var(--text-primary);
            font-weight: 500;
        }

        .compare-table tbody td.featured-col {
            background: rgba(36,194,236,0.04);
        }

    .compare-table .check {
        color: #2d8a4a;
        font-size: 1.1rem;
        font-weight: 700;
    }

    .compare-table .dash {
        color: var(--text-muted);
        font-size: 1.1rem;
    }

/* ===================== FAQ ===================== */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

    .faq-item.open {
        border-color: var(--brand-cyan-light);
        box-shadow: var(--shadow-sm);
    }

.faq-q {
    width: 100%;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-align: right;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    background: transparent;
    cursor: pointer;
}

    .faq-q .ico {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--surface-mist);
        color: var(--brand-navy);
        display: grid;
        place-items: center;
        transition: all 0.3s ease;
    }

.faq-item.open .faq-q .ico {
    background: var(--gradient-cta);
    color: #fff;
    transform: rotate(180deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 24px;
}

.faq-item.open .faq-a {
    max-height: 320px;
    padding: 0 24px 22px;
}

.faq-a p {
    font-size: 0.93rem;
    color: var(--text-secondary);
    line-height: 1.85;
}

/* ===================== ABOUT PAGE ===================== */
.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-intro-visual {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: var(--radius-xl);
    background: var(--gradient-cta-bg);
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #fff;
}

    .about-intro-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 50%), radial-gradient(circle at 70% 80%, rgba(36,194,236,0.3), transparent 50%);
    }

    .about-intro-visual svg {
        position: relative;
        z-index: 1;
        width: 60%;
        opacity: 0.95;
    }

.about-intro h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin-bottom: 18px;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.about-intro > div > p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 2;
    margin-bottom: 14px;
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.problem-card {
    padding: 28px;
    border-radius: var(--radius-lg);
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-right: 4px solid var(--brand-cyan);
}

    .problem-card h3 {
        font-size: 1.05rem;
        color: var(--brand-navy);
        margin-bottom: 10px;
    }

    .problem-card p {
        font-size: 0.92rem;
        color: var(--text-secondary);
        line-height: 1.85;
    }

.vision-block {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 50px;
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #fff 0%, var(--brand-cyan-mist) 100%);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
}

    .vision-block .quote-mark {
        font-family: var(--font-heading);
        font-size: 4rem;
        color: var(--brand-cyan);
        line-height: 1;
        margin-bottom: 10px;
    }

    .vision-block p {
        font-size: 1.3rem;
        line-height: 1.85;
        color: var(--text-primary);
        font-weight: 500;
        font-family: var(--font-heading);
    }

.values2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.value2-card {
    text-align: center;
    padding: 30px 20px;
    background: var(--surface-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-soft);
    transition: all 0.3s ease;
}

    .value2-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        border-color: var(--brand-cyan-light);
    }

    .value2-card .ico-wrap {
        width: 64px;
        height: 64px;
        margin: 0 auto 16px;
        border-radius: 50%;
        background: var(--brand-cyan-pale);
        display: grid;
        place-items: center;
        color: var(--brand-cyan-deep);
    }

    .value2-card h4 {
        font-size: 1.05rem;
        margin-bottom: 8px;
        color: var(--brand-navy);
    }

    .value2-card p {
        font-size: 0.88rem;
        color: var(--text-secondary);
        line-height: 1.75;
    }

/* ===================== BLOG PAGE ===================== */
.featured-post {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.featured-post-img {
    background: var(--gradient-cta-bg);
    position: relative;
    min-height: 380px;
    display: grid;
    place-items: center;
}

    .featured-post-img::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), transparent 55%);
    }

    .featured-post-img .label {
        position: relative;
        z-index: 1;
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 2rem;
        color: rgba(255,255,255,0.95);
        letter-spacing: -0.5px;
        padding: 24px;
    }

.featured-post-body {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.post-meta {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 14px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.post-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--brand-cyan-pale);
    color: var(--brand-navy);
    font-size: 0.74rem;
    font-weight: 700;
}

.featured-post-body h2 {
    font-size: 1.7rem;
    line-height: 1.3;
    color: var(--text-primary);
    margin: 6px 0 14px;
    letter-spacing: -0.4px;
}

.featured-post-body p {
    font-size: 0.98rem;
    color: var(--text-secondary);
    line-height: 1.85;
    margin-bottom: 22px;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand-cyan-deep);
    font-weight: 700;
    font-size: 0.92rem;
    font-family: var(--font-heading);
}

    .read-more:hover {
        color: var(--brand-navy);
    }

/* ---------- Blog: filter pills ---------- */
.blog-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 50px;
    max-width: 920px;
}

.blog-tab {
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    line-height: 1;
}

    .blog-tab:hover {
        color: var(--brand-navy);
        background: var(--surface-snow);
        border-color: var(--brand-cyan-light);
    }

    .blog-tab.active {
        background: var(--gradient-cta);
        color: #fff;
        border-color: transparent;
        box-shadow: var(--shadow-cyan);
    }

/* Blog search bar */
.blog-search {
    max-width: 520px;
    margin: 22px auto 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    padding: 6px 10px 6px 16px;
    box-shadow: 0 4px 14px -8px rgba(15, 30, 70, 0.18);
}

    .blog-search input {
        flex: 1;
        border: 0;
        outline: none;
        background: transparent;
        font-family: inherit;
        font-size: 0.95rem;
        color: var(--text-primary);
        padding: 10px 6px;
    }

    .blog-search button {
        border: 0;
        cursor: pointer;
        padding: 9px 18px;
        border-radius: var(--radius-pill);
        background: var(--gradient-cta);
        color: #fff;
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.85rem;
    }

/* ---------- Blog: cards ---------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.blog-card {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.35s var(--easing), box-shadow 0.35s var(--easing), border-color 0.35s var(--easing);
    display: flex;
    flex-direction: column;
}

    .blog-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px -22px rgba(15, 30, 70, 0.22);
        border-color: rgba(14, 164, 204, 0.32);
    }

/* Image frame: matches 4:3 source images — full image, no crop, no side bars */
.blog-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    background: #F1F8FD;
    display: block;
    overflow: hidden;
}

    .blog-card-img > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        transition: transform 0.5s var(--easing);
    }

.blog-card:hover .blog-card-img > img {
    transform: scale(1.04);
}

.blog-card-img .ico {
    font-size: 2.4rem;
    opacity: 0.7;
    color: var(--brand-navy);
}

.blog-card-body {
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

    .blog-card-body .post-meta {
        margin-bottom: 2px;
    }

    .blog-card-body h3 {
        font-size: 1.05rem;
        line-height: 1.55;
        color: var(--text-primary);
        margin: 0;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .blog-card-body p {
        font-size: 0.88rem;
        color: var(--text-secondary);
        line-height: 1.7;
        margin: 0;
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .blog-card-body .read-more {
        margin-top: 6px;
        align-self: flex-start;
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--brand-cyan-dark);
        font-family: var(--font-heading);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-bottom: 1px solid transparent;
        transition: color 0.25s ease, border-color 0.25s ease;
    }

        .blog-card-body .read-more:hover {
            color: var(--brand-navy);
            border-color: currentColor;
        }

@media (max-width: 768px) {
    .blog-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 4px 4px 12px;
        margin-bottom: 24px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .blog-tabs::-webkit-scrollbar {
            display: none;
        }

    .blog-tab {
        flex-shrink: 0;
    }
}

/* ===================== CONTACT PAGE ===================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .contact-info h2 {
        font-size: 1.5rem;
        margin-bottom: 6px;
        color: var(--brand-navy);
        letter-spacing: -0.3px;
    }

    .contact-info > p {
        font-size: 0.95rem;
        color: var(--text-secondary);
        line-height: 1.85;
        margin-bottom: 8px;
    }

.contact-card {
    display: flex;
    gap: 14px;
    padding: 20px;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

    .contact-card:hover {
        border-color: var(--brand-cyan-light);
        box-shadow: var(--shadow-sm);
    }

    .contact-card .ico {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--brand-cyan-pale);
        color: var(--brand-cyan-deep);
        display: grid;
        place-items: center;
    }

    .contact-card h4 {
        font-size: 0.95rem;
        margin-bottom: 4px;
        color: var(--text-primary);
    }

    .contact-card p {
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.6;
    }

    .contact-card a {
        color: var(--brand-cyan-deep);
        font-weight: 600;
    }

.contact-form-wrap {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-sm);
}

    .contact-form-wrap h3 {
        font-size: 1.3rem;
        color: var(--brand-navy);
        margin-bottom: 22px;
    }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.form-field {
    margin-bottom: 14px;
}

    .form-field label {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 6px;
        font-family: var(--font-heading);
    }

    .form-field input, .form-field select, .form-field textarea {
        width: 100%;
        padding: 13px 16px;
        background: var(--surface-snow);
        border: 1.5px solid var(--border-soft);
        border-radius: var(--radius-md);
        font-family: inherit;
        font-size: 0.92rem;
        color: var(--text-primary);
        transition: all 0.25s ease;
    }

        .form-field input:focus, .form-field select:focus, .form-field textarea:focus {
            outline: none;
            border-color: var(--brand-cyan);
            background: var(--surface-white);
            box-shadow: 0 0 0 4px rgba(36,194,236,0.12);
        }

    .form-field textarea {
        min-height: 130px;
        resize: vertical;
    }

.contact-form-wrap .btn {
    width: 100%;
    margin-top: 8px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
    .hero2-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hero2-mockup {
        transform: none;
    }

    .values-grid, .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline {
        grid-template-columns: repeat(3, 1fr);
    }

        .timeline::before {
            display: none;
        }

    .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-cards {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .price-card.featured {
        transform: none;
    }

        .price-card.featured:hover {
            transform: translateY(-6px);
        }

    .compare-wrap {
        overflow-x: auto;
    }

    .compare-table {
        min-width: 720px;
    }

    .about-intro {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .problem-grid {
        grid-template-columns: 1fr;
    }

    .values2-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-post {
        grid-template-columns: 1fr;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .header-nav {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .btn-header-secondary {
        display: none;
    }
}

@media (max-width: 640px) {
    .section {
        padding: 80px 0;
    }

    .values-grid, .modules-grid, .plan-teaser-grid {
        grid-template-columns: 1fr;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .timeline {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .showcase-grid, .blog-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .featured-post-body {
        padding: 30px 24px;
    }

    .vision-block {
        padding: 40px 24px;
    }

        .vision-block p {
            font-size: 1.05rem;
        }

    .contact-form-wrap {
        padding: 26px;
    }

    .hero2-float {
        display: none;
    }
}

/* ==========================================================
   HERO CAROUSEL (3 slides)
   ========================================================== */
.hero2-carousel {
    position: relative;
    perspective: 1500px;
    min-height: 460px;
}

.hero2-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition: opacity 0.75s var(--easing), transform 0.75s var(--easing);
    pointer-events: none;
    will-change: opacity, transform;
}

    .hero2-slide.is-active {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        z-index: 2;
    }

.hero2-carousel .hero2-mockup {
    transform: perspective(1500px) rotateY(4deg) rotateX(-2deg);
    min-height: 440px;
    height: 100%;
}

    .hero2-carousel .hero2-mockup:hover {
        transform: perspective(1500px) rotateY(0) rotateX(0);
    }

/* --- Slide: Dashboard / لوحة التحكم --- */
.dash-body {
    padding: 0 !important;
    gap: 0 !important;
    background: #f6f8fc;
}

.dash-shell {
    display: grid;
    grid-template-columns: 130px 1fr;
    min-height: 100%;
}

.dash-side {
    background: linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%);
    color: var(--brand-navy);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-left: 1px solid rgba(38,60,132,0.08);
}

.dash-brand {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    color: var(--brand-navy);
    border-bottom: 1px solid rgba(38,60,132,0.10);
}

.dash-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .dash-menu .dm {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.74rem;
        padding: 7px 9px;
        border-radius: 8px;
        color: #5a6786;
        font-weight: 600;
        transition: all 0.25s ease;
    }

        .dash-menu .dm i {
            font-style: normal;
            font-size: 0.85rem;
            width: 16px;
            text-align: center;
            color: #8593b3;
        }

        .dash-menu .dm:hover {
            background: rgba(36,194,236,0.08);
            color: var(--brand-navy);
        }

        .dash-menu .dm.active {
            background: linear-gradient(135deg, rgba(36,194,236,0.15), rgba(38,60,132,0.08));
            color: var(--brand-navy);
            box-shadow: inset 2px 0 0 var(--brand-cyan);
        }

            .dash-menu .dm.active i {
                color: var(--brand-cyan);
            }

.dash-main {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dash-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.dash-greet .t {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--brand-navy);
    font-size: 0.95rem;
}

.dash-greet .s {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.dash-pill {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(107,207,127,0.15);
    color: #2f9e54;
    display: inline-flex;
    align-items: center;
}

    .dash-pill::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #6bcf7f;
        margin-left: 6px;
        box-shadow: 0 0 0 3px rgba(107,207,127,0.25);
    }

.dash-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.kpi {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 10px;
}

    .kpi.accent {
        background: linear-gradient(135deg, #eaf8fd, #fff);
        border-color: rgba(36,194,236,0.3);
    }

.kpi-lbl {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.kpi-val {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--brand-navy);
    font-size: 0.95rem;
}

    .kpi-val span {
        font-size: 0.6rem;
        color: var(--text-muted);
        font-weight: 600;
    }

.kpi-trend {
    font-size: 0.62rem;
    font-weight: 700;
    margin-top: 4px;
}

    .kpi-trend.up {
        color: #2f9e54;
    }

.dash-modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.dm-card {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 9px 11px;
}

.dm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

    .dm-row .dm-ico {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.78rem;
        flex-shrink: 0;
    }

        .dm-row .dm-ico.site {
            background: rgba(36,194,236,0.15);
        }

        .dm-row .dm-ico.media {
            background: rgba(38,60,132,0.12);
        }

        .dm-row .dm-ico.donate {
            background: rgba(232,168,56,0.18);
        }

        .dm-row .dm-ico.store {
            background: rgba(146,107,217,0.18);
        }

    .dm-row .dm-t {
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--brand-navy);
        flex: 1;
    }

    .dm-row .dm-st {
        font-size: 0.6rem;
        color: var(--text-muted);
        font-weight: 600;
        background: var(--surface-mist);
        padding: 2px 7px;
        border-radius: 999px;
    }

        .dm-row .dm-st.ok {
            background: rgba(107,207,127,0.18);
            color: #2f9e54;
        }

.dm-bar {
    height: 5px;
    background: var(--surface-cloud);
    border-radius: 999px;
    overflow: hidden;
}

    .dm-bar span {
        display: block;
        height: 100%;
        background: var(--gradient-cta);
        border-radius: 999px;
    }

.hero2-dots {
    position: absolute;
    bottom: -42px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 3;
}

    .hero2-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        padding: 0;
        background: var(--border-strong);
        cursor: pointer;
        border: none;
        transition: all 0.35s var(--easing);
    }

        .hero2-dots .dot.is-active {
            width: 28px;
            background: var(--gradient-cta);
            box-shadow: 0 4px 12px rgba(36,194,236,0.4);
        }

/* --- Slide 1: Site mockup --- */
.site-body {
    padding: 0 !important;
    gap: 0 !important;
}

.site-hero {
    padding: 18px 20px 22px;
    background: linear-gradient(135deg, #1a2a5e 0%, #263c84 60%, #0ea4cc 130%);
    color: #fff;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

    .site-nav .logo-chip {
        background: rgba(255,255,255,0.18);
        padding: 5px 12px;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 700;
        backdrop-filter: blur(6px);
    }

    .site-nav .nav-pill {
        font-size: 0.72rem;
        opacity: 0.78;
        padding: 4px 8px;
    }

.site-banner .banner-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(36,194,236,0.25);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
    color: #d8f4ff;
}

.site-banner .banner-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 14px;
}

.site-banner .banner-actions {
    display: flex;
    gap: 8px;
}

.btn-mini {
    font-size: 0.72rem;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    font-weight: 600;
}

    .btn-mini.primary {
        background: var(--surface-white);
        color: var(--brand-navy);
        border-color: #fff;
    }

.site-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 18px 20px;
}

.site-card {
    background: var(--surface-snow);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 14px;
    text-align: center;
}

    .site-card .ico {
        display: inline-block;
        font-size: 1.3rem;
        margin-bottom: 6px;
    }

    .site-card .t {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--brand-navy);
        margin-bottom: 2px;
    }

    .site-card .s {
        font-size: 0.7rem;
        color: var(--text-muted);
    }

/* --- Slide 2: Donate --- */
.donate-body {
    padding: 24px !important;
}

.donate-head .eyebrow-mini {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #c47e1a;
    background: rgba(232,168,56,0.15);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

.donate-head h4 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--brand-navy);
    margin-bottom: 14px;
}

.donate-progress {
    height: 8px;
    background: var(--surface-cloud);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

    .donate-progress span {
        display: block;
        height: 100%;
        background: var(--gradient-cta);
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(36,194,236,0.4);
    }

.donate-stats {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
    margin-bottom: 18px;
}

    .donate-stats b {
        font-family: var(--font-heading);
        color: var(--brand-navy);
        font-size: 1rem;
    }

    .donate-stats .muted {
        color: var(--text-muted);
        font-size: 0.8rem;
    }

.donate-amounts {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.amount-pill {
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--surface-snow);
    border: 1px solid var(--border-soft);
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

    .amount-pill.active {
        background: var(--gradient-cta);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(36,194,236,0.3);
    }

    .amount-pill.outline {
        background: transparent;
    }

.donate-pay {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.pay-row {
    display: flex;
    gap: 6px;
}

.pay-ico {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 5px 9px;
    border-radius: 6px;
    background: var(--surface-mist);
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

    .pay-ico.mada {
        background: #1a2a5e;
        color: #fff;
    }

    .pay-ico.visa {
        background: #1434cb;
        color: #f7b600;
    }

    .pay-ico.apay {
        background: #000;
        color: #fff;
    }

.donate-btn {
    flex: 1;
    background: var(--gradient-cta);
    color: #fff;
    padding: 12px;
    border-radius: var(--radius-md);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    text-align: center;
    box-shadow: 0 6px 16px rgba(36,194,236,0.32);
}

.donate-trust {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    padding-top: 12px;
    border-top: 1px dashed var(--border-soft);
}

/* --- Slide 3: Store --- */
.store-body {
    padding: 22px !important;
}

.store-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

    .store-head h4 {
        font-family: var(--font-heading);
        font-size: 1.1rem;
        color: var(--brand-navy);
    }

.store-count {
    font-size: 0.72rem;
    color: var(--brand-cyan-deep);
    background: var(--brand-cyan-pale);
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.store-item {
    background: var(--surface-snow);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 10px;
    text-align: center;
}

.store-img {
    height: 60px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #e8f8fd, #c5ecf7);
}

    .store-img.a {
        background: linear-gradient(135deg, #fff4d6, #f7c873);
    }

    .store-img.b {
        background: linear-gradient(135deg, #e8d8f2, #b89ad9);
    }

    .store-img.c {
        background: linear-gradient(135deg, #fde2cf, #e8a06b);
    }

.store-name {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.store-price {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--brand-navy);
    font-size: 0.85rem;
}

    .store-price span {
        font-size: 0.65rem;
        color: var(--text-muted);
        font-weight: 600;
    }

.store-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px dashed var(--border-soft);
}

    .store-summary .lbl {
        font-size: 0.7rem;
        color: var(--text-muted);
        margin-bottom: 4px;
    }

    .store-summary .val {
        font-family: var(--font-heading);
        font-weight: 800;
        color: var(--brand-navy);
        font-size: 1.05rem;
    }

        .store-summary .val span {
            font-size: 0.65rem;
            color: var(--text-muted);
            margin-right: 4px;
        }

/* ==========================================================
   PILLARS — ماذا يقدم ويبيان (3-pillar showcase)
   ========================================================== */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.pillar {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.45s var(--easing);
    position: relative;
}

    .pillar::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: var(--radius-xl);
        padding: 1.5px;
        background: var(--gradient-cta);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

    .pillar:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-xl);
        border-color: transparent;
    }

        .pillar:hover::before {
            opacity: 1;
        }

    .pillar.featured {
        box-shadow: var(--shadow-lg);
        border-color: rgba(36,194,236,0.35);
    }

        .pillar.featured::before {
            opacity: 0.55;
        }

.pillar-visual {
    height: 220px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--brand-cyan-mist) 0%, #fff 100%);
    border-bottom: 1px solid var(--border-soft);
    position: relative;
    overflow: hidden;
}

    .pillar-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 70% 30%, rgba(36,194,236,0.12), transparent 60%);
        pointer-events: none;
    }

/* Pillar 1 visual: site window */
.pv-window {
    width: 100%;
    max-width: 280px;
    background: var(--surface-white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-soft);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.pv-bar {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: var(--surface-snow);
    border-bottom: 1px solid var(--border-soft);
}

    .pv-bar i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--border-strong);
    }

        .pv-bar i:nth-child(1) {
            background: #ff6b6b;
        }

        .pv-bar i:nth-child(2) {
            background: #ffd93d;
        }

        .pv-bar i:nth-child(3) {
            background: #6bcf7f;
        }

.pv-content {
    padding: 12px;
}

.pv-banner {
    background: linear-gradient(135deg, #1a2a5e, #0ea4cc);
    color: #fff;
    padding: 14px;
    border-radius: 8px;
    margin-bottom: 10px;
}

    .pv-banner span {
        display: inline-block;
        font-size: 0.65rem;
        padding: 2px 8px;
        background: rgba(255,255,255,0.2);
        border-radius: 999px;
        margin-bottom: 6px;
    }

    .pv-banner b {
        display: block;
        font-size: 0.82rem;
        font-family: var(--font-heading);
    }

.pv-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

    .pv-row span {
        height: 30px;
        background: var(--surface-mist);
        border-radius: 6px;
    }

/* Pillar 2 visual: donate card */
.pv-donate-card {
    width: 100%;
    max-width: 270px;
    background: var(--surface-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-soft);
    padding: 18px;
    position: relative;
    z-index: 1;
}

.pv-d-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(232,168,56,0.18);
    color: #c47e1a;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.pv-d-head b {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--brand-navy);
    margin-bottom: 12px;
}

.pv-d-prog {
    height: 7px;
    background: var(--surface-cloud);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}

    .pv-d-prog span {
        display: block;
        height: 100%;
        background: var(--gradient-cta);
    }

.pv-d-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.78rem;
    margin-bottom: 14px;
}

    .pv-d-meta b {
        font-family: var(--font-heading);
        color: var(--brand-navy);
    }

    .pv-d-meta span {
        color: var(--text-muted);
        font-size: 0.72rem;
    }

.pv-d-btn {
    background: var(--gradient-cta);
    color: #fff;
    padding: 9px;
    border-radius: 10px;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.82rem;
    box-shadow: 0 4px 14px rgba(36,194,236,0.28);
}

/* Pillar 3 visual: store products */
.pv-store-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 290px;
    position: relative;
    z-index: 1;
}

.pv-prod {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

    .pv-prod .pv-img {
        display: block;
        height: 50px;
        border-radius: 6px;
        margin-bottom: 6px;
        background: linear-gradient(135deg, #e8f8fd, #c5ecf7);
    }

    .pv-prod.a .pv-img {
        background: linear-gradient(135deg, #fff4d6, #f7c873);
    }

    .pv-prod.b .pv-img {
        background: linear-gradient(135deg, #e8d8f2, #b89ad9);
    }

    .pv-prod.c .pv-img {
        background: linear-gradient(135deg, #fde2cf, #e8a06b);
    }

    .pv-prod b {
        display: block;
        font-size: 0.66rem;
        color: var(--text-primary);
        margin-bottom: 2px;
        font-weight: 600;
    }

    .pv-prod i {
        display: block;
        font-size: 0.7rem;
        font-family: var(--font-heading);
        font-weight: 800;
        color: var(--brand-navy);
        font-style: normal;
    }

.pillar-body {
    padding: 26px 28px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pillar-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--brand-cyan-deep);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pillar-body h3 {
    font-size: 1.3rem;
    color: var(--brand-navy);
    margin-bottom: 10px;
}

.pillar-body p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.85;
    margin-bottom: 18px;
}

.pillar-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
}

    .pillar-tags li {
        font-size: 0.74rem;
        padding: 5px 11px;
        border-radius: 999px;
        background: var(--brand-cyan-pale);
        color: var(--brand-navy);
        font-weight: 600;
    }

.pillar-lnk {
    margin-top: auto;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--brand-cyan-deep);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .pillar-lnk span {
        transition: transform 0.25s ease;
        display: inline-block;
    }

    .pillar-lnk:hover {
        color: var(--brand-navy);
    }

        .pillar-lnk:hover span {
            transform: translateX(-4px);
        }

/* ==========================================================
   PLAN CARDS — Homepage pricing teaser (rich)
   ========================================================== */
.plan-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.plan-card {
    position: relative;
    background: var(--surface-white);
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s var(--easing);
}

    .plan-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
        border-color: var(--brand-cyan-light);
    }

    .plan-card.featured {
        border-color: transparent;
        background: linear-gradient(#fff, #fff) padding-box, var(--gradient-cta) border-box;
        box-shadow: var(--shadow-lg);
        transform: translateY(-8px);
    }

        .plan-card.featured:hover {
            transform: translateY(-12px);
            box-shadow: var(--shadow-xl);
        }

.plan-card-ribbon {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-cta);
    color: #fff;
    padding: 6px 16px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.74rem;
    box-shadow: 0 6px 16px rgba(36,194,236,0.35);
    letter-spacing: 0.4px;
}

.plan-card-head {
    padding-bottom: 22px;
    border-bottom: 1px dashed var(--border-soft);
    margin-bottom: 22px;
}

.plan-card-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface-mist);
    color: var(--text-secondary);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.plan-card.featured .plan-card-tag {
    background: var(--brand-cyan-pale);
    color: var(--brand-navy);
}

.plan-card-head h3 {
    font-size: 1.4rem;
    color: var(--brand-navy);
    margin-bottom: 8px;
}

.plan-card-head p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.75;
}

/* ===== Plan Pricing Block ===== */
.plan-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.plan-price-amount {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 800;
    color: var(--brand-navy);
    line-height: 1;
}

    .plan-price-amount .num {
        font-size: 2.6rem;
        letter-spacing: -1px;
    }

.plan-price-period {
    font-size: 0.92rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.riyal-icon {
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    /* SVG fill is #231f20 (near-black). Tint to brand-navy via filter. */
    filter: brightness(0) saturate(100%) invert(11%) sepia(34%) saturate(2200%) hue-rotate(196deg) brightness(95%) contrast(95%);
}

.riyal-icon-sm {
    width: 14px;
    height: 14px;
}

.plan-price-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

    .plan-price-note strong {
        color: var(--text-secondary);
        font-weight: 700;
    }

.plan-billing-badge {
    display: inline-block;
    margin-top: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--brand-cyan-pale);
    color: var(--brand-cyan-deep);
}

.plan-card.featured .plan-price-amount {
    color: var(--brand-cyan-deep);
}

    .plan-card.featured .plan-price-amount .num {
        font-size: 2.9rem;
    }

.plans-disclaimer {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 36px;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Dark mode adjustments */
:root[data-theme="dark"] .plan-price-amount {
    color: #fff;
}

:root[data-theme="dark"] .plan-card.featured .plan-price-amount {
    color: var(--brand-cyan-light);
}

:root[data-theme="dark"] .riyal-icon {
    filter: brightness(0) invert(1);
}

:root[data-theme="dark"] .plan-card.featured .riyal-icon {
    filter: brightness(0) saturate(100%) invert(72%) sepia(58%) saturate(380%) hue-rotate(140deg) brightness(95%) contrast(90%);
}

:root[data-theme="dark"] .plan-billing-badge {
    background: rgba(15, 191, 174, 0.15);
    color: var(--brand-cyan-light);
}

:root[data-theme="dark"] .plans-disclaimer {
    color: var(--text-muted);
}

.plan-card-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
    flex: 1;
}

    .plan-card-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.92rem;
        color: var(--text-primary);
        font-weight: 500;
    }

    .plan-card-features svg {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        padding: 4px;
        border-radius: 50%;
        background: var(--brand-cyan-pale);
        color: var(--brand-cyan-deep);
        box-sizing: content-box;
    }

.plan-card-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.btn-block {
    width: 100%;
}

.plan-card-lnk {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.25s ease;
}

    .plan-card-lnk:hover {
        color: var(--brand-cyan-deep);
    }

/* ==========================================================
   RESPONSIVE OVERRIDES (new components)
   ========================================================== */
@media (max-width: 1024px) {
    .pillars-grid {
        grid-template-columns: 1fr;
        max-width: 560px;
        margin: 0 auto;
    }

    .plan-cards {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    .plan-card.featured {
        transform: none;
    }
}

@media (max-width: 768px) {
    .hero2-carousel .hero2-mockup {
        transform: none;
        min-height: 380px;
    }

    .hero2-dots {
        bottom: -34px;
    }

    .pillar-visual {
        height: 200px;
    }
}

/* ==========================================================
   PILLARS V2 — Enhanced showcase (richer mockups, accent colors)
   ========================================================== */
.pillars-grid-v2 {
    gap: 30px;
    align-items: stretch;
}

.pillar-v2 {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s var(--easing), box-shadow 0.5s var(--easing), border-color 0.5s ease;
    position: relative;
    isolation: isolate;
}

    .pillar-v2::before {
        content: none;
    }

    .pillar-v2::after {
        content: none;
    }

    .pillar-v2:hover {
        transform: translateY(-8px);
        box-shadow: var(--accent-featured-shadow, var(--shadow-xl));
        border-color: var(--accent-deep, var(--border-soft));
    }

.pillar.pillar-v2:hover::before,
.pillar.pillar-v2.featured::before {
    opacity: 0;
}

/* Featured middle pillar: identical neutral border at rest, accent only on hover */
.pillar-v2.featured {
    border-color: var(--border-soft);
    box-shadow: none;
}

    .pillar-v2.featured:hover {
        box-shadow: var(--accent-featured-shadow, var(--shadow-xl));
        border-color: var(--accent-deep, var(--border-soft));
    }

/* Mockup label inside visual */
.pillar-v2 .pv-label {
    position: absolute;
    top: 12px;
    inset-inline-end: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--accent-deep, var(--brand-navy));
    background: rgba(255,255,255,0.85);
    border: 1px solid var(--border-soft);
    backdrop-filter: blur(6px);
    padding: 4px 10px;
    border-radius: 999px;
}

    .pillar-v2 .pv-label::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--accent-deep, var(--brand-cyan-deep));
    }

/* Visual area — slightly larger (~12%) but kept ≤ 40% of card height */
.pillar-v2 .pillar-visual {
    height: 230px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(165deg, var(--accent-mist, var(--brand-cyan-mist)) 0%, #ffffff 100%);
    border-bottom: 0;
    position: relative;
    overflow: hidden;
}

    .pillar-v2 .pillar-visual::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 18% 15%, var(--accent-glow, rgba(36,194,236,0.14)), transparent 55%);
        pointer-events: none;
    }

    .pillar-v2 .pillar-visual::after {
        content: none;
    }

.pillar-v2 .pillar-tag {
    color: var(--accent-deep, var(--brand-cyan-deep));
}

/* Body — consistent rhythm + CTA pinned to bottom for equal-height cards */
.pillar-v2 .pillar-body {
    display: flex;
    flex-direction: column;
    padding: 26px 24px 24px;
    gap: 12px;
    flex: 1;
}

    .pillar-v2 .pillar-body h3 {
        margin: 0;
    }

    .pillar-v2 .pillar-body > p {
        margin: 0;
        color: var(--text-secondary);
        min-height: 3.2em;
    }

/* Vertical mini check-list (replaces horizontal pill tags) */
.pillar-checks {
    list-style: none;
    padding: 0;
    margin: 4px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .pillar-checks li {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        background: var(--surface-snow, #f7f9fc);
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.88rem;
        color: var(--brand-navy);
        min-height: 40px;
        transition: background 0.25s ease, border-color 0.25s ease;
    }

        .pillar-checks li:hover {
            background: var(--surface-snow, #f7f9fc);
            border-color: var(--border-soft);
        }

    .pillar-checks svg {
        flex: none;
        width: 18px;
        height: 18px;
        color: var(--accent-deep, var(--brand-cyan-deep));
        background: var(--surface-white);
        border: 1px solid var(--border-soft);
        border-radius: 50%;
        padding: 2px;
    }

    .pillar-checks span {
        line-height: 1.4;
    }

.accent-navy {
    --accent-mist: #eef2fb;
    --accent-glow: rgba(38,60,132,0.16);
    --accent-deep: var(--brand-navy);
    --accent-strip: linear-gradient(135deg, #3a56a8 0%, #1a2a5e 100%);
    --accent-featured-border: rgba(38,60,132,0.28);
    --accent-featured-shadow: 0 12px 28px -16px rgba(38,60,132,0.2);
}

.accent-cyan {
    --accent-mist: var(--brand-cyan-pale);
    --accent-glow: rgba(36,194,236,0.22);
    --accent-deep: #0892c7;
    --accent-strip: linear-gradient(135deg, #0892c7 0%, #46b9dd 100%);
    --accent-featured-border: rgba(8,146,199,0.32);
    --accent-featured-shadow: 0 12px 28px -16px rgba(8,146,199,0.24);
    --pv-site-logo-bg: linear-gradient(135deg, #0892c7 0%, #46b9dd 100%);
    --pv-site-logo-color: #0892c7;
    --pv-site-nav-active-bg: #e8f8fd;
    --pv-site-nav-active-color: #0f234b;
    --pv-site-hero-bg: linear-gradient(135deg, #0892c7 0%, #46b9dd 100%);
    --pv-site-cta-color: #0892c7;
    --pv-site-dot: #24c2ec;
}

.accent-amber {
    --accent-mist: #fff6e6;
    --accent-glow: rgba(232,168,56,0.22);
    --accent-deep: #b97306;
    --accent-strip: linear-gradient(135deg, #f0a44b 0%, #c47e1a 100%);
    --accent-featured-border: rgba(196,126,26,0.32);
    --accent-featured-shadow: 0 12px 28px -16px rgba(196,126,26,0.24);
}

.accent-pink {
    --accent-mist: #FFF5F9;
    --accent-glow: rgba(246,111,163,0.24);
    --accent-deep: #E04E89;
    --accent-strip: linear-gradient(135deg, #E04E89 0%, #F66FA3 100%);
    --accent-featured-border: rgba(246,111,163,0.34);
    --accent-featured-shadow: 0 12px 28px -16px rgba(246,111,163,0.24);
    --pv-donate-shadow: 0 14px 28px -14px rgba(246,111,163,0.34);
    --pv-donate-icon-bg: linear-gradient(135deg, #FFF0F6 0%, #FFDCEB 100%);
    --pv-donate-icon-color: #E04E89;
    --pv-donate-progress: linear-gradient(90deg, #F66FA3 0%, #E04E89 100%);
    --pv-donate-active-bg: #FFF0F6;
    --pv-donate-active-border: #F66FA3;
    --pv-donate-active-color: #C83E79;
    --pv-donate-btn-bg: linear-gradient(135deg, #E04E89 0%, #F66FA3 100%);
    --pv-donate-btn-shadow: 0 8px 18px rgba(246,111,163,0.24);
    --pv-donate-active-bg-dark: rgba(246,111,163,0.16);
    --pv-donate-active-border-dark: #F66FA3;
    --pv-donate-active-color-dark: #FFB7D1;
}

/* CTA link upgrade */
.pillar-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--accent-deep, var(--brand-cyan-deep));
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: var(--accent-mist, var(--brand-cyan-pale));
    border: 1px solid transparent;
    transition: all 0.3s ease;
    align-self: flex-start;
}

    .pillar-cta span {
        transition: transform 0.3s ease;
        display: inline-block;
    }

    .pillar-cta:hover {
        background: var(--accent-deep, var(--brand-navy));
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-deep, var(--brand-navy)) 18%, transparent);
    }

        .pillar-cta:hover span {
            transform: translateX(-4px);
        }

/* ==========================================================
   ----- Pillar 1 visual: site mock with nav + hero CTA -----
   ========================================================== */
.pv-site-window {
    width: 100%;
    max-width: 280px;
    position: relative;
    z-index: 1;
    background: var(--surface-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 24px -18px rgba(15,23,51,0.16), var(--shadow-xs);
    border: 1px solid var(--border-soft);
}

    .pv-site-window .pv-bar {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 6px 10px;
        background: var(--surface-snow);
        border-bottom: 1px solid var(--border-soft);
    }

        .pv-site-window .pv-bar i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex: none;
        }

            .pv-site-window .pv-bar i:nth-child(1) {
                background: #ff6b6b;
            }

            .pv-site-window .pv-bar i:nth-child(2) {
                background: #ffd93d;
            }

            .pv-site-window .pv-bar i:nth-child(3) {
                background: #6bcf7f;
            }

.pv-url {
    margin-inline-start: 6px;
    font-size: 0.55rem;
    color: var(--text-muted);
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font-heading);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

    .pv-url svg {
        width: 9px;
        height: 9px;
        color: #6bcf7f;
        flex: none;
    }

/* Site nav row */
.pv-site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--surface-white);
    border-bottom: 1px solid var(--border-soft);
}

.pv-logo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.6rem;
    color: var(--pv-site-logo-color, var(--brand-navy));
}

    .pv-logo em {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 4px;
        background: var(--pv-site-logo-bg, linear-gradient(135deg, #1a2a5e, #0ea4cc));
    }

.pv-nav-links {
    display: inline-flex;
    gap: 6px;
}

    .pv-nav-links b {
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.52rem;
        color: var(--text-secondary);
        padding: 2px 6px;
        border-radius: 999px;
    }

        .pv-nav-links b.active {
            background: var(--pv-site-nav-active-bg, var(--brand-cyan-pale));
            color: var(--pv-site-nav-active-color, var(--brand-navy));
            font-weight: 800;
        }

.pv-site-content {
    padding: 7px;
    display: grid;
    gap: 6px;
}

.pv-site-hero {
    background: var(--pv-site-hero-bg, linear-gradient(135deg, #1a2a5e 0%, #263c84 60%, #0ea4cc 100%));
    color: #fff;
    border-radius: 7px;
    padding: 11px 11px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .pv-site-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2), transparent 60%);
    }

    .pv-site-hero b {
        display: block;
        font-size: 0.66rem;
        font-family: var(--font-heading);
        position: relative;
        z-index: 1;
        line-height: 1.4;
        max-width: 60%;
    }

.pv-hero-cta {
    position: relative;
    z-index: 1;
    background: var(--surface-white);
    color: var(--pv-site-cta-color, var(--brand-navy));
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.52rem;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.pv-site-strip {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-mist);
    border-radius: 6px;
}

    .pv-site-strip span {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 0.55rem;
        color: var(--text-secondary);
        background: var(--surface-white);
        padding: 4px;
        border-radius: 5px;
        font-weight: 600;
    }

    .pv-site-strip .dotg {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--pv-site-dot, var(--brand-cyan));
        display: inline-block;
    }

/* ==========================================================
   ----- Pillar 2 visual: donate card with heart + amounts -----
   ========================================================== */
.pv-donate-card-v2 {
    width: 100%;
    max-width: 280px;
    position: relative;
    z-index: 1;
    background: var(--surface-white);
    border-radius: 12px;
    border: 1px solid var(--border-soft);
    padding: 12px;
    box-shadow: 0 12px 24px -18px rgba(15,23,51,0.16), var(--shadow-xs);
}

.pv-d-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.pv-d-icon {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pv-donate-icon-bg, linear-gradient(135deg, var(--brand-cyan-pale), #d4f1fb));
    color: var(--pv-donate-icon-color, var(--brand-cyan-deep));
}

    .pv-d-icon svg {
        width: 16px;
        height: 16px;
    }

.pv-d-titles {
    min-width: 0;
}

    .pv-d-titles b {
        display: block;
        font-family: var(--font-heading);
        font-size: 0.78rem;
        color: var(--brand-navy);
        margin-bottom: 1px;
    }

    .pv-d-titles small {
        font-size: 0.58rem;
        color: var(--text-muted);
    }

.pv-d-prog {
    height: 6px;
    background: var(--surface-cloud);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 6px;
}

    .pv-d-prog span {
        display: block;
        height: 100%;
        background: var(--pv-donate-progress, linear-gradient(90deg, var(--brand-cyan) 0%, var(--brand-navy) 100%));
        border-radius: 999px;
    }

.pv-d-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

    .pv-d-meta b {
        font-family: var(--font-heading);
        font-weight: 800;
        color: var(--brand-navy);
        font-size: 0.72rem;
    }

.pv-d-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 9px;
}

    .pv-d-amounts span {
        text-align: center;
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.6rem;
        color: var(--text-secondary);
        background: var(--surface-white);
        border: 1px solid var(--border-soft);
        padding: 4px 0;
        border-radius: 6px;
    }

        .pv-d-amounts span.on {
            background: var(--pv-donate-active-bg, var(--brand-cyan-pale));
            border-color: var(--pv-donate-active-border, var(--brand-cyan));
            color: var(--pv-donate-active-color, var(--brand-navy));
        }

.pv-d-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pv-d-btn {
    background: var(--pv-donate-btn-bg, var(--gradient-cta));
    color: #fff;
    padding: 6px 11px;
    border-radius: 7px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.66rem;
    white-space: nowrap;
    box-shadow: var(--pv-donate-btn-shadow, 0 8px 18px rgba(36,194,236,0.22));
}

.pv-d-pays {
    display: flex;
    gap: 4px;
    flex: 1;
    justify-content: flex-end;
}

    .pv-d-pays .pay {
        font-size: 0.5rem;
        font-weight: 800;
        letter-spacing: 0.3px;
        background: var(--surface-white);
        border: 1px solid var(--border-soft);
        color: var(--text-secondary);
        padding: 3px 6px;
        border-radius: 4px;
        font-family: var(--font-heading);
    }

/* Pulse keyframe (kept for other uses) */
@keyframes vmPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(36,194,236,0.55);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(36,194,236,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(36,194,236,0);
    }
}

/* ==========================================================
   ----- Pillar 3 visual: store with cart + product icons -----
   ========================================================== */
.pv-store-window {
    width: 100%;
    max-width: 280px;
    position: relative;
    z-index: 1;
    background: var(--surface-white);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: 0 12px 24px -18px rgba(15,23,51,0.16), var(--shadow-xs);
}

.pv-store-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    background: var(--surface-white);
    border-bottom: 1px solid var(--border-soft);
}

.pv-store-brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.62rem;
    color: var(--brand-navy);
}

    .pv-store-brand em {
        width: 12px;
        height: 12px;
        border-radius: 4px;
        background: linear-gradient(135deg, #f7c873, #c47e1a);
    }

.pv-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #fff8ec;
    color: #b97306;
    border: 1px solid #fde6c0;
}

    .pv-cart svg {
        width: 14px;
        height: 14px;
    }

.pv-cart-count {
    position: absolute;
    top: -5px;
    inset-inline-start: -5px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0a44b, #c47e1a);
    color: #fff;
    font-style: normal;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.52rem;
    border-radius: 999px;
    border: 2px solid #fff;
}

.pv-store-products {
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.pv-prod-v2 {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 7px 5px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

    .pv-prod-v2 .pv-img {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 38px;
        border-radius: 6px;
        color: var(--brand-navy);
    }

        .pv-prod-v2 .pv-img svg {
            width: 22px;
            height: 22px;
        }

    .pv-prod-v2.a .pv-img {
        background: linear-gradient(135deg, #fff4d6, #ffe2a3);
        color: #8a5a06;
    }

    .pv-prod-v2.b .pv-img {
        background: linear-gradient(135deg, #e8d8f2, #d3bce8);
        color: #6c3fa0;
    }

    .pv-prod-v2.c .pv-img {
        background: linear-gradient(135deg, #fde2cf, #f7c19a);
        color: #a65316;
    }

    .pv-prod-v2 i {
        display: block;
        font-size: 0.58rem;
        font-family: var(--font-heading);
        font-weight: 800;
        color: var(--brand-navy);
        font-style: normal;
    }

.pv-store-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    background: var(--surface-snow);
    border-top: 1px solid var(--border-soft);
    font-size: 0.6rem;
    color: var(--text-secondary);
}

    .pv-store-summary b {
        font-family: var(--font-heading);
        font-weight: 800;
        color: var(--brand-navy);
        font-size: 0.74rem;
    }

@media (max-width: 768px) {
    .pillar-v2 .pillar-visual {
        height: 220px;
        padding: 16px;
    }

    .pv-site-window, .pv-donate-card-v2, .pv-store-window {
        max-width: 260px;
    }
}

/* ==========================================================
   WHY TABS — Split layout for "Why Webyan"
   ========================================================== */
.why-tabs-section {
    position: relative;
}

.why-tabs {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 24px;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: 0 18px 40px -22px rgba(38,60,132,0.18), var(--shadow-sm);
    max-width: 1180px;
    margin: 40px auto 0;
}

.wt-side {
    background: linear-gradient(180deg, var(--surface-mist) 0%, #fff 100%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 18px;
}

.wt-side-head {
    margin-bottom: 14px;
    padding-inline: 4px;
}

    .wt-side-head b {
        display: block;
        font-family: var(--font-heading);
        font-weight: 800;
        font-size: 1.02rem;
        color: var(--brand-navy);
        margin-bottom: 5px;
    }

    .wt-side-head span {
        display: block;
        font-size: 0.78rem;
        color: var(--text-muted);
        line-height: 1.6;
    }

.wt-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.wt-tab {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    text-align: start;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    font-family: inherit;
}

    .wt-tab:hover {
        border-color: rgba(36,194,236,0.45);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }

    .wt-tab.is-active {
        background: linear-gradient(135deg, #f4faff 0%, #ffffff 100%);
        border-color: var(--brand-cyan);
        box-shadow: 0 8px 18px -10px rgba(36,194,236,0.35);
    }

.wt-ic {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--brand-cyan-pale);
    color: var(--brand-cyan-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease;
}

    .wt-ic svg {
        width: 19px;
        height: 19px;
    }

.wt-tab.is-active .wt-ic {
    background: var(--gradient-cta);
    color: #fff;
}

.wt-lbl {
    flex: 1;
    min-width: 0;
}

    .wt-lbl b {
        display: block;
        font-family: var(--font-heading);
        font-size: 0.9rem;
        color: var(--brand-navy);
        font-weight: 700;
        margin-bottom: 2px;
    }

    .wt-lbl em {
        display: block;
        font-size: 0.7rem;
        color: var(--text-muted);
        font-style: normal;
        line-height: 1.4;
    }

.wt-arr {
    color: var(--text-muted);
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.wt-tab.is-active .wt-arr {
    opacity: 1;
    color: var(--brand-cyan-deep);
    transform: translateX(-3px);
}

/* Stage / panels */
.wt-stage {
    position: relative;
    padding: 28px 30px;
    background: linear-gradient(165deg, #f7fbff 0%, #ffffff 100%);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    min-height: 320px;
    display: flex;
    align-items: center;
}

.wt-panel {
    width: 100%;
}

    .wt-panel[hidden] {
        display: none;
    }

.wt-panel {
    animation: wtFade 0.4s var(--easing);
}

@keyframes wtFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.wt-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: var(--brand-cyan-deep);
    background: var(--brand-cyan-pale);
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.wt-panel h3 {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    color: var(--brand-navy);
    margin: 0 0 10px;
    line-height: 1.35;
}

.wt-panel > p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.75;
    margin: 0 0 18px;
    max-width: 620px;
}

.wt-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

    .wt-points li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        background: var(--surface-white);
        border: 1px solid var(--border-soft);
        border-radius: 12px;
        padding: 12px 14px;
    }

.wt-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--gradient-cta);
    box-shadow: 0 0 0 4px rgba(36,194,236,0.12);
}

.wt-points b {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--brand-navy);
    font-size: 0.92rem;
    margin-bottom: 2px;
}

.wt-points em {
    display: block;
    font-style: normal;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.55;
}

/* Responsive — tablet/mobile: stack */
@media (max-width: 900px) {
    .why-tabs {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px;
    }

    .wt-stage {
        padding: 22px;
        min-height: auto;
    }

    .wt-panel h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 560px) {
    .wt-tab {
        padding: 10px 12px;
    }

    .wt-ic {
        width: 34px;
        height: 34px;
    }

    .wt-lbl b {
        font-size: 0.85rem;
    }

    .wt-lbl em {
        font-size: 0.66rem;
    }

    .wt-arr {
        display: none;
    }
}

/* ============================================
   Custom CTA — حلول مخصصة
   ============================================ */
.custom-cta-section {
    background: var(--surface-white);
}

.custom-cta-card {
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(135deg, #eaf2fb 0%, #e0f2fb 55%, #d6ecf8 100%);
    border: 1px solid rgba(56,178,222,.25);
    border-radius: 24px;
    padding: 44px 40px;
    box-shadow: 0 20px 50px -25px rgba(10,45,82,.25);
    position: relative;
    overflow: hidden;
}

    .custom-cta-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 85% 15%, rgba(56,178,222,.18), transparent 45%), radial-gradient(circle at 10% 90%, rgba(10,45,82,.10), transparent 50%);
        pointer-events: none;
    }

    .custom-cta-card > * {
        position: relative;
        z-index: 1;
    }

.cc-head {
    text-align: center;
    margin-bottom: 28px;
}

.cc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0a2d52;
    background: rgba(255,255,255,.7);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(10,45,82,.08);
    margin-bottom: 14px;
}

    .cc-eyebrow .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #38b2de;
    }

.custom-cta-card h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: #0a2d52;
    margin: 0 0 12px;
    line-height: 1.3;
}

.cc-desc {
    color: #2f4259;
    font-size: 0.98rem;
    line-height: 1.8;
    max-width: 720px;
    margin: 0 auto;
}

.cc-points {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    max-width: 820px;
    margin: 0 auto 26px;
    text-align: right;
}

    .cc-points li {
        display: flex;
        align-items: center;
        gap: 12px;
        background: rgba(255,255,255,.75);
        border: 1px solid rgba(10,45,82,.06);
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 0.92rem;
        color: #1a3556;
        font-weight: 500;
    }

.cc-ico {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, #0a2d52, #38b2de);
    color: #fff;
}

    .cc-ico svg {
        width: 15px;
        height: 15px;
    }

.cc-actions {
    display: flex;
    justify-content: center;
    margin: 0;
}

@media (max-width: 720px) {
    .custom-cta-card {
        padding: 34px 20px;
        border-radius: 20px;
    }

        .custom-cta-card h2 {
            font-size: 1.45rem;
        }

    .cc-points {
        grid-template-columns: 1fr;
    }

    .cc-actions .btn {
        width: 100%;
    }
}

/* ===== Custom Request Modal ===== */
.cr-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

    .cr-modal.is-open {
        display: block;
    }

.cr-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,35,75,.55);
    backdrop-filter: blur(4px);
}

.cr-dialog {
    position: relative;
    background: var(--surface-white);
    width: min(560px, calc(100% - 32px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    margin: 0 auto;
    border-radius: 18px;
    padding: 28px 26px;
    box-shadow: 0 30px 80px rgba(10,35,75,.35);
    top: 50%;
    transform: translateY(-50%);
    animation: crIn .25s ease;
}

@keyframes crIn {
    from {
        opacity: 0;
        transform: translate(0, -46%);
    }

    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

.cr-close {
    position: absolute;
    top: 12px;
    left: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f4f9;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #0a2d52;
}

    .cr-close:hover {
        background: #e1e7f0;
    }

.cr-header {
    text-align: center;
    margin-bottom: 18px;
}

    .cr-header h3 {
        margin: 0 0 6px;
        font-size: 1.3rem;
        color: #0a2d52;
        font-weight: 700;
    }

    .cr-header p {
        margin: 0;
        color: #6b7a92;
        font-size: .9rem;
    }

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

.cr-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .cr-field.cr-full {
        grid-column: 1 / -1;
    }

    .cr-field span {
        font-size: .82rem;
        color: #1a3556;
        font-weight: 600;
    }

    .cr-field input,
    .cr-field select,
    .cr-field textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #d8e0ec;
        border-radius: 10px;
        font-family: inherit;
        font-size: .92rem;
        background: #fafbfd;
        color: #0a2d52;
        transition: border-color .2s, background .2s;
    }

        .cr-field input:focus, .cr-field select:focus, .cr-field textarea:focus {
            outline: none;
            border-color: #38b2de;
            background: var(--surface-white);
        }

    .cr-field textarea {
        resize: vertical;
    }

.cr-actions {
    margin-top: 18px;
    display: flex;
    justify-content: center;
}

    .cr-actions .btn {
        min-width: 200px;
    }

.cr-success {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    background: #e8f7ee;
    color: #1d7a44;
    border: 1px solid #bfe5cf;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 600;
}

@media (max-width: 600px) {
    .cr-grid {
        grid-template-columns: 1fr;
    }

    .cr-dialog {
        padding: 24px 18px;
    }
}

/* ===== Inside Webyan — Feature Showcase Tabs (refined) ===== */
.inside-section {
    background: var(--surface-white);
}

.inside-wrap {
    margin-top: 36px;
}

/* Tabs container */
.inside-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    background: #f4f7fc;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    margin-bottom: 44px;
}

.in-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    text-align: right;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
    font-family: inherit;
    position: relative;
}

    .in-tab:hover {
        background: var(--surface-white);
    }

    .in-tab.is-active {
        background: var(--surface-white);
        border-color: #dde6f3;
        box-shadow: 0 14px 32px rgba(15, 35, 75, .10);
        transform: translateY(-2px);
    }

        .in-tab.is-active::after {
            content: "";
            position: absolute;
            inset: auto 14px -1px 14px;
            height: 3px;
            border-radius: 3px;
            background: linear-gradient(90deg, #0f234b, #1d3a7a);
        }

.in-tab-ic {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef3fb;
    color: var(--brand-navy, #0f234b);
    flex-shrink: 0;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

    .in-tab-ic svg {
        width: 22px;
        height: 22px;
    }

.in-tab.is-active .in-tab-ic {
    background: linear-gradient(135deg, #0f234b, #1d3a7a);
    color: #fff;
    transform: scale(1.05);
}

.in-tab-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

    .in-tab-txt b {
        font-size: .98rem;
        color: #0f234b;
        font-weight: 700;
    }

    .in-tab-txt em {
        font-size: .78rem;
        color: #6b7a92;
        font-style: normal;
        margin-top: 3px;
    }

/* Per-tab accent (active state) */
.in-tab[data-intab="iw-site"].is-active .in-tab-ic {
    background: linear-gradient(135deg, #0892c7, #46b9dd);
}

.in-tab[data-intab="iw-site"].is-active::after {
    background: linear-gradient(90deg, #0892c7, #46b9dd);
}

.in-tab[data-intab="iw-don"].is-active .in-tab-ic {
    background: linear-gradient(135deg, #E04E89, #F66FA3);
}

.in-tab[data-intab="iw-don"].is-active::after {
    background: linear-gradient(90deg, #E04E89, #F66FA3);
}

.in-tab[data-intab="iw-store"].is-active .in-tab-ic {
    background: linear-gradient(135deg, #c47a14, #e8a73c);
}

.in-tab[data-intab="iw-store"].is-active::after {
    background: linear-gradient(90deg, #c47a14, #e8a73c);
}

.in-tab[data-intab="iw-gov"].is-active .in-tab-ic {
    background: linear-gradient(135deg, #2e6f5e, #4ea38c);
}

.in-tab[data-intab="iw-gov"].is-active::after {
    background: linear-gradient(90deg, #2e6f5e, #4ea38c);
}

/* Panels */
.inside-panel {
    display: none;
    animation: ipFade .35s ease;
}

    .inside-panel.is-active {
        display: block;
    }

@keyframes ipFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* Highlight card (top of each panel) */
.ip-highlight {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding: 26px 28px;
    border-radius: 18px;
    background: linear-gradient(135deg, #f5f9ff 0%, #eef3fb 100%);
    border: 1px solid #dde6f3;
    margin-bottom: 22px;
}

.iph-content {
    min-width: 0;
}

.iph-tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    color: #0f234b;
    background: var(--surface-white);
    border: 1px solid #dde6f3;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}

.ip-highlight h3 {
    font-size: 1.35rem;
    color: #0f234b;
    margin: 0 0 6px;
    font-weight: 700;
    line-height: 1.4;
}

.ip-highlight p {
    color: #5a6b85;
    margin: 0 0 14px;
    font-size: .95rem;
    line-height: 1.6;
}

.iph-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    font-weight: 700;
    color: #0f234b;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--surface-white);
    border: 1px solid #dde6f3;
    transition: transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}

    .iph-cta:hover {
        transform: translateX(-3px);
        box-shadow: 0 8px 18px rgba(15, 35, 75, .08);
    }

.iph-visual {
    width: 88px;
    height: 88px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: var(--surface-white);
    color: #0f234b;
    border: 1px solid #dde6f3;
    flex-shrink: 0;
}

    .iph-visual svg {
        width: 44px;
        height: 44px;
        opacity: .85;
    }

/* Highlight accent variants per panel */
.inside-panel[data-accent="cyan"] .ip-highlight {
    background: linear-gradient(135deg, #f0f9fd 0%, #e3f4fb 100%);
    border-color: #c7e7f3;
}

.inside-panel[data-accent="cyan"] .iph-tag,
.inside-panel[data-accent="cyan"] .iph-cta,
.inside-panel[data-accent="cyan"] .iph-visual {
    color: #0892c7;
    border-color: #c7e7f3;
}

.inside-panel[data-accent="amber"] .ip-highlight {
    background: linear-gradient(135deg, #fff8ee 0%, #fff2e0 100%);
    border-color: #f3d2a3;
}

.inside-panel[data-accent="amber"] .iph-tag,
.inside-panel[data-accent="amber"] .iph-cta,
.inside-panel[data-accent="amber"] .iph-visual {
    color: #c47a14;
    border-color: #f3d2a3;
}

.inside-panel[data-accent="pink"] .ip-highlight {
    background: linear-gradient(135deg, #FFF5F9 0%, #FFE3EE 100%);
    border-color: #FBC9DC;
}

.inside-panel[data-accent="pink"] .iph-tag,
.inside-panel[data-accent="pink"] .iph-cta,
.inside-panel[data-accent="pink"] .iph-visual {
    color: #E04E89;
    border-color: #FBC9DC;
}

/* Cards grid */
.ip-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.ip-card {
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 18px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .ip-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(15, 35, 75, .09);
        border-color: #cfd9ea;
    }

.ip-ic {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eef3fb;
    color: #0f234b;
}

    .ip-ic svg {
        width: 22px;
        height: 22px;
    }

.ip-card h5 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f234b;
    margin: 0;
}

.ip-card p {
    font-size: .86rem;
    color: #6b7a92;
    margin: 0;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card accent variants per panel */
.inside-panel[data-accent="cyan"] .ip-ic {
    background: #e3f4fb;
    color: #0892c7;
}

.inside-panel[data-accent="cyan"] .ip-card:hover {
    border-color: #9fd9ee;
}

.inside-panel[data-accent="amber"] .ip-ic {
    background: #fff2e0;
    color: #c47a14;
}

.inside-panel[data-accent="amber"] .ip-card:hover {
    border-color: #f3d2a3;
}

.inside-panel[data-accent="pink"] .ip-ic {
    background: #FFE3EE;
    color: #E04E89;
}

.inside-panel[data-accent="pink"] .ip-card:hover {
    border-color: #FBC9DC;
}

.inside-panel[data-accent="navy"] .ip-ic {
    background: #eef3fb;
    color: #1d3a7a;
}

/* Responsive */
@media (max-width: 980px) {
    .inside-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

    .ip-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ip-highlight {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 22px;
    }

    .iph-visual {
        margin: 0 auto;
        width: 72px;
        height: 72px;
    }

        .iph-visual svg {
            width: 36px;
            height: 36px;
        }
}

@media (max-width: 600px) {
    .inside-tabs {
        grid-template-columns: 1fr;
    }

    .ip-grid {
        grid-template-columns: 1fr;
    }

    .in-tab {
        padding: 12px 14px;
    }

    .ip-highlight h3 {
        font-size: 1.15rem;
    }
}


/* ===================== FINAL POLISH (v-final) ===================== */
/* تطبيع عام: منع overflow أفقي + توحيد transitions */
html, body {
    overflow-x: hidden;
}

img, svg, video {
    max-width: 100%;
    height: auto;
}

/* توحيد spacing بين السكاشن */
.section {
    padding: 96px 0;
}

    .section + .section {
        padding-top: 88px;
    }

.section-header {
    margin-bottom: 56px;
}

/* تنعيم الهوفر العام للكروت */
.value-card, .module-card, .benefit-card, .showcase-card,
.price-card, .blog-card, .ip-card, .timeline-step,
.module-card2, .value-card2 {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* تحسينات تابلت */
@media (max-width: 1024px) {
    .section {
        padding: 72px 0;
    }

        .section + .section {
            padding-top: 64px;
        }

    .section-header {
        margin-bottom: 44px;
    }

        .section-header h2 {
            font-size: 2rem;
            line-height: 1.35;
        }

        .section-header p {
            font-size: 1rem;
        }
}

/* تحسينات جوال */
@media (max-width: 640px) {
    .section {
        padding: 56px 0;
    }

        .section + .section {
            padding-top: 48px;
        }

    .section-header {
        margin-bottom: 32px;
    }

        .section-header h2 {
            font-size: 1.55rem;
            line-height: 1.4;
        }

        .section-header p {
            font-size: 0.95rem;
            line-height: 1.75;
        }

    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* تبويبات قابلة للتمرير الأفقي عند الازدحام */
    .inside-tabs {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

        .inside-tabs::-webkit-scrollbar {
            display: none;
        }

    .in-tab {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }

    /* أزرار CTA متوازنة على الجوال */
    .final-cta2-btns {
        flex-direction: column;
        gap: 10px;
    }

        .final-cta2-btns .btn {
            width: 100%;
        }

    /* منع تكسر الكلمات المزعج */
    h1, h2, h3, h4 {
        word-break: normal;
        overflow-wrap: break-word;
    }
}

/* شاشات صغيرة جدًا */
@media (max-width: 380px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .section-header h2 {
        font-size: 1.4rem;
    }
}

/* ===================== LANGUAGE SWITCH BUTTON ===================== */
.btn-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--brand-cyan-pale);
    background: var(--surface-white);
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    font-family: var(--font-heading);
    transition: all 0.25s ease;
}

    .btn-lang:hover {
        border-color: var(--brand-cyan);
        color: var(--brand-cyan-deep);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(36,194,236,0.18);
    }

.drawer-lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--brand-cyan-pale);
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 0.85rem;
    font-family: var(--font-heading);
    align-self: flex-start;
}

/* ===================== LTR (English pages) ===================== */
html[dir="ltr"] body {
    font-family: 'Inter', 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] h4,
html[dir="ltr"] h5,
html[dir="ltr"] h6 {
    font-family: 'Inter', system-ui, sans-serif;
    letter-spacing: -0.01em;
}

/* Pricing toggle and any RTL-specific reversals */
html[dir="ltr"] .footer-newsletter input {
    text-align: left;
}

html[dir="ltr"] .form-input,
html[dir="ltr"] .form-select,
html[dir="ltr"] textarea.form-input {
    text-align: left;
}

/* Drawer slides from the LEFT in LTR */
html[dir="ltr"] .mobile-drawer {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}

    html[dir="ltr"] .mobile-drawer.active {
        transform: translateX(0);
    }

/* Generic RTL-only icon flips kept neutral in LTR (arrows pointing forward) */
html[dir="ltr"] .arrow-rtl {
    transform: scaleX(-1);
}

/* Make English pages slightly tighter line-height */
html[dir="ltr"] body {
    line-height: 1.6;
}

/* ==========================================================
   Dark Mode — Comprehensive Polish (v2)
   ========================================================== */
:root[data-theme="dark"] {
    /* slightly lighter card surface for stronger contrast against bg */
    --surface-white: #161e36;
    --surface-snow: #0f1525;
    --surface-mist: #131a2e;
    --surface-cloud: #1c2542;
}

    /* === Body / sections === */
    :root[data-theme="dark"] body {
        background: #0b1024 !important;
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .section-mist {
        background: #0e1428 !important;
    }

    :root[data-theme="dark"] .section-cloud {
        background: linear-gradient(180deg, #0b1024 0%, #0e1730 100%) !important;
    }

    :root[data-theme="dark"] .section {
        color: var(--text-primary);
    }

    /* === Header === */
    :root[data-theme="dark"] .site-header {
        background: rgba(11,16,36,0.72) !important;
        backdrop-filter: saturate(180%) blur(16px);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 8px 30px rgba(0,0,0,0.4);
    }

        :root[data-theme="dark"] .site-header.scrolled {
            background: rgba(11,16,36,0.92) !important;
        }

    :root[data-theme="dark"] .header-nav a {
        color: var(--text-secondary);
    }

        :root[data-theme="dark"] .header-nav a:hover {
            color: var(--brand-cyan-light);
            background: rgba(56,208,245,0.08);
        }

        :root[data-theme="dark"] .header-nav a.active {
            color: var(--brand-cyan-light) !important;
            background: rgba(56,208,245,0.12) !important;
        }

    :root[data-theme="dark"] .btn-header-secondary {
        color: var(--text-secondary);
    }

        :root[data-theme="dark"] .btn-header-secondary:hover {
            color: var(--brand-cyan-light);
        }

    :root[data-theme="dark"] .btn-lang {
        background: rgba(255,255,255,0.04) !important;
        border-color: rgba(56,208,245,0.35) !important;
        color: var(--text-primary) !important;
    }

        :root[data-theme="dark"] .btn-lang:hover {
            border-color: var(--brand-cyan);
            color: var(--brand-cyan-light) !important;
        }

    :root[data-theme="dark"] .btn-theme {
        background: rgba(255,255,255,0.04) !important;
        border-color: rgba(56,208,245,0.35) !important;
        color: var(--brand-cyan-light);
    }

        :root[data-theme="dark"] .btn-theme:hover {
            border-color: var(--brand-cyan);
        }

    :root[data-theme="dark"] .mobile-toggle span {
        background: var(--text-primary);
    }

    /* === Mobile drawer === */
    :root[data-theme="dark"] .mobile-drawer {
        background: #0e1428 !important;
        border-color: var(--border-soft) !important;
    }

    :root[data-theme="dark"] .mobile-overlay {
        background: rgba(0,0,0,0.65) !important;
    }

    :root[data-theme="dark"] .drawer-nav a {
        color: var(--text-secondary);
    }

        :root[data-theme="dark"] .drawer-nav a.active,
        :root[data-theme="dark"] .drawer-nav a:hover {
            color: var(--brand-cyan-light);
            background: rgba(56,208,245,0.08);
        }

    /* === Eyebrow / pills === */
    :root[data-theme="dark"] .eyebrow {
        background: rgba(56,208,245,0.10) !important;
        color: var(--brand-cyan-light) !important;
        border: 1px solid rgba(56,208,245,0.25) !important;
    }

        :root[data-theme="dark"] .eyebrow .dot {
            background: var(--brand-cyan);
            box-shadow: 0 0 0 4px rgba(56,208,245,0.15);
        }

    /* === Headings & body text === */
    :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
    :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6 {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] p {
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .section-header p {
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .gradient-text,
    :root[data-theme="dark"] .hero2-text h1 .highlight,
    :root[data-theme="dark"] .highlight {
        display: inline !important;
        background: linear-gradient(135deg, #7ce0f7 0%, #b6c9ff 100%) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* === Buttons === */
    :root[data-theme="dark"] .btn-ghost,
    :root[data-theme="dark"] .btn-outline {
        background: transparent !important;
        color: var(--text-primary) !important;
        border-color: var(--border-strong) !important;
    }

        :root[data-theme="dark"] .btn-ghost:hover,
        :root[data-theme="dark"] .btn-outline:hover {
            border-color: var(--brand-cyan) !important;
            color: var(--brand-cyan-light) !important;
            background: rgba(56,208,245,0.06) !important;
        }

    /* === Cards (universal) === */
    :root[data-theme="dark"] .module-card,
    :root[data-theme="dark"] .ip-card,
    :root[data-theme="dark"] .pillar,
    :root[data-theme="dark"] .plan-card,
    :root[data-theme="dark"] .timeline-step,
    :root[data-theme="dark"] .blog-card,
    :root[data-theme="dark"] .feature-card,
    :root[data-theme="dark"] .faq-item,
    :root[data-theme="dark"] .testimonial-card,
    :root[data-theme="dark"] .legal-card,
    :root[data-theme="dark"] .form-card,
    :root[data-theme="dark"] .pr-summary,
    :root[data-theme="dark"] .pr-section,
    :root[data-theme="dark"] .custom-cta-card,
    :root[data-theme="dark"] .why-tabs,
    :root[data-theme="dark"] .inside-wrap,
    :root[data-theme="dark"] .wt-side,
    :root[data-theme="dark"] .wt-stage,
    :root[data-theme="dark"] .cr-dialog {
        background: var(--surface-white) !important;
        border: 1px solid var(--border-soft) !important;
        color: var(--text-primary);
        box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 12px 30px rgba(0,0,0,0.35);
    }

        :root[data-theme="dark"] .module-card:hover,
        :root[data-theme="dark"] .ip-card:hover,
        :root[data-theme="dark"] .pillar:hover,
        :root[data-theme="dark"] .plan-card:hover {
            border-color: rgba(56,208,245,0.45) !important;
            box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 20px 50px rgba(0,0,0,0.5);
        }

    /* Pillar visual area */
    :root[data-theme="dark"] .pillar-visual {
        background: rgba(255,255,255,0.02) !important;
        border-color: var(--border-soft) !important;
    }

    :root[data-theme="dark"] .pv-site-window,
    :root[data-theme="dark"] .pv-store-window,
    :root[data-theme="dark"] .pv-donate-card-v2 {
        background: #0e1730 !important;
        border-color: var(--border-soft) !important;
        color: var(--text-primary);
        box-shadow: 0 10px 30px rgba(0,0,0,0.45);
    }

    :root[data-theme="dark"] .pv-bar {
        background: #161e36 !important;
        border-color: var(--border-soft) !important;
    }

    :root[data-theme="dark"] .pv-url {
        color: var(--text-secondary);
        background: rgba(255,255,255,0.04);
    }

    :root[data-theme="dark"] .pv-site-nav {
        background: rgba(255,255,255,0.02);
        border-color: var(--border-soft);
    }

    :root[data-theme="dark"] .pv-nav-links b {
        color: var(--text-secondary);
    }

        :root[data-theme="dark"] .pv-nav-links b.active {
            color: var(--pv-site-nav-active-color-dark, var(--brand-cyan-light));
            background: var(--pv-site-nav-active-bg-dark, rgba(56,208,245,0.1));
        }

    :root[data-theme="dark"] .pv-site-strip span {
        background: rgba(255,255,255,0.04);
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .pv-site-hero b {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .pv-d-amounts span {
        background: rgba(255,255,255,0.04);
        border-color: var(--border-soft);
        color: var(--text-secondary);
    }

        :root[data-theme="dark"] .pv-d-amounts span.on {
            background: var(--pv-donate-active-bg-dark, rgba(56,208,245,0.18));
            border-color: var(--pv-donate-active-border-dark, var(--brand-cyan));
            color: var(--pv-donate-active-color-dark, var(--brand-cyan-light));
        }

    :root[data-theme="dark"] .pv-d-pays .pay {
        background: rgba(255,255,255,0.05);
        color: var(--text-secondary);
        border-color: var(--border-soft);
    }

    :root[data-theme="dark"] .pv-prod-v2 {
        background: rgba(255,255,255,0.03) !important;
        border-color: var(--border-soft) !important;
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .pv-store-summary {
        border-top-color: var(--border-soft);
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .pv-label {
        background: rgba(56,208,245,0.12);
        color: var(--brand-cyan-light);
    }

    /* Hero mockup (dashboard / site / donate / store) */
    :root[data-theme="dark"] .hero2-mockup {
        background: #0e1730 !important;
        border-color: var(--border-soft) !important;
        box-shadow: 0 30px 70px rgba(0,0,0,0.6);
    }

    :root[data-theme="dark"] .mockup-bar {
        background: #161e36 !important;
        border-color: var(--border-soft) !important;
    }

        :root[data-theme="dark"] .mockup-bar .url {
            color: var(--text-secondary);
            background: rgba(255,255,255,0.04);
        }

    :root[data-theme="dark"] .dash-body {
        background: #0e1428 !important;
    }

    :root[data-theme="dark"] .dash-side {
        background: #0a1022 !important;
        border-color: var(--border-soft) !important;
    }

    :root[data-theme="dark"] .dash-brand {
        color: var(--brand-cyan-light);
    }

    :root[data-theme="dark"] .dash-menu .dm {
        color: var(--text-secondary);
    }

        :root[data-theme="dark"] .dash-menu .dm:hover {
            background: rgba(255,255,255,0.04);
            color: var(--text-primary);
        }

        :root[data-theme="dark"] .dash-menu .dm.active {
            background: rgba(56,208,245,0.14);
            color: var(--brand-cyan-light);
        }

    :root[data-theme="dark"] .dash-greet .t {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .dash-pill {
        background: rgba(56,208,245,0.14);
        color: var(--brand-cyan-light);
    }

    :root[data-theme="dark"] .kpi {
        background: var(--surface-white) !important;
        border-color: var(--border-soft) !important;
    }

        :root[data-theme="dark"] .kpi.accent {
            background: linear-gradient(135deg, rgba(56,208,245,0.16), rgba(77,106,214,0.10)) !important;
            border-color: rgba(56,208,245,0.35) !important;
        }

    :root[data-theme="dark"] .kpi-val {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .dm-card {
        background: var(--surface-white) !important;
        border-color: var(--border-soft) !important;
    }

    :root[data-theme="dark"] .dm-bar {
        background: rgba(255,255,255,0.06);
    }

    /* Site mockup slide */
    :root[data-theme="dark"] .site-body, :root[data-theme="dark"] .donate-body, :root[data-theme="dark"] .store-body {
        background: #0e1428 !important;
    }

    :root[data-theme="dark"] .site-nav {
        background: #0a1022;
        border-color: var(--border-soft);
    }

    :root[data-theme="dark"] .nav-pill {
        color: var(--text-secondary);
        background: rgba(255,255,255,0.04);
    }

    :root[data-theme="dark"] .logo-chip {
        background: rgba(56,208,245,0.14);
        color: var(--brand-cyan-light);
    }

    :root[data-theme="dark"] .site-card {
        background: var(--surface-white) !important;
        border-color: var(--border-soft) !important;
        color: var(--text-primary);
    }

        :root[data-theme="dark"] .site-card .s {
            color: var(--text-muted);
        }

    :root[data-theme="dark"] .site-banner {
        background: linear-gradient(135deg, #1a2a5e, #0ea4cc);
    }

    :root[data-theme="dark"] .donate-head h4, :root[data-theme="dark"] .store-head h4 {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .donate-progress {
        background: rgba(255,255,255,0.06);
    }

    :root[data-theme="dark"] .amount-pill {
        background: var(--surface-white) !important;
        border-color: var(--border-soft) !important;
        color: var(--text-secondary);
    }

        :root[data-theme="dark"] .amount-pill.active {
            background: var(--brand-cyan) !important;
            color: #0b1024 !important;
            border-color: var(--brand-cyan) !important;
        }

    :root[data-theme="dark"] .donate-btn {
        background: var(--gradient-cta) !important;
        color: #0b1024 !important;
    }

    :root[data-theme="dark"] .pay-ico {
        background: rgba(255,255,255,0.06);
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .donate-trust {
        color: var(--text-muted);
    }

    :root[data-theme="dark"] .store-item {
        background: var(--surface-white) !important;
        border-color: var(--border-soft) !important;
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .store-summary {
        background: rgba(255,255,255,0.03);
        border-color: var(--border-soft);
        color: var(--text-secondary);
    }

        :root[data-theme="dark"] .store-summary .val {
            color: var(--text-primary);
        }

    :root[data-theme="dark"] .store-count {
        color: var(--text-muted);
        background: rgba(255,255,255,0.05);
    }

    /* hero2 floating chips */
    :root[data-theme="dark"] .hero2-float {
        background: var(--surface-white) !important;
        border-color: var(--border-soft) !important;
        color: var(--text-primary);
        box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    }

    :root[data-theme="dark"] .hero2-trust-text {
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .hero2-check {
        color: var(--text-secondary);
    }

        :root[data-theme="dark"] .hero2-check .icon-circle {
            background: rgba(56,208,245,0.15);
            color: var(--brand-cyan-light);
        }

    :root[data-theme="dark"] .hero2-dots .dot {
        background: rgba(255,255,255,0.2);
    }

        :root[data-theme="dark"] .hero2-dots .dot.is-active {
            background: var(--brand-cyan);
        }

    /* === Trust bar (dark) === */
    :root[data-theme="dark"] .trust-bar {
        background: transparent;
    }

    :root[data-theme="dark"] .trust-bar-label {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .trust-logo-item {
        background: #ffffff;
        border-radius: 14px;
        opacity: 0.95;
    }

        :root[data-theme="dark"] .trust-logo-item:hover {
            opacity: 1;
        }

    /* === Pillar tag, badge === */
    :root[data-theme="dark"] .pillar-tag,
    :root[data-theme="dark"] .iph-tag,
    :root[data-theme="dark"] .wt-eyebrow,
    :root[data-theme="dark"] .plan-card-tag,
    :root[data-theme="dark"] .module-num {
        color: var(--brand-cyan-light) !important;
        background: rgba(56,208,245,0.10);
    }

    :root[data-theme="dark"] .plan-card-ribbon {
        background: var(--gradient-cta) !important;
        color: #0b1024 !important;
    }

    :root[data-theme="dark"] .module-icon-wrap {
        background: rgba(56,208,245,0.10) !important;
        color: var(--brand-cyan-light) !important;
        border-color: rgba(56,208,245,0.2);
    }

    :root[data-theme="dark"] .module-card h3 {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .module-card p {
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .ip-ic {
        background: rgba(56,208,245,0.10) !important;
        color: var(--brand-cyan-light) !important;
        border-color: var(--border-soft);
    }

    :root[data-theme="dark"] .ip-card h5 {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .ip-card p {
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .ip-highlight {
        background: linear-gradient(135deg, rgba(56,208,245,0.10), rgba(77,106,214,0.06)) !important;
        border-color: var(--border-soft) !important;
    }

    :root[data-theme="dark"] .iph-content h3 {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .iph-content p {
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .iph-cta {
        color: var(--brand-cyan-light) !important;
    }

    :root[data-theme="dark"] .iph-visual {
        color: var(--brand-cyan-light);
        background: rgba(56,208,245,0.08);
    }

    /* === Inside Webyan tabs === */
    :root[data-theme="dark"] .inside-tabs {
        background: rgba(255,255,255,0.02);
        border-color: var(--border-soft);
    }

    :root[data-theme="dark"] .in-tab {
        color: var(--text-secondary);
        background: transparent;
    }

        :root[data-theme="dark"] .in-tab:hover {
            background: rgba(255,255,255,0.04);
            color: var(--text-primary);
        }

        :root[data-theme="dark"] .in-tab.is-active {
            background: linear-gradient(135deg, rgba(56,208,245,0.16), rgba(77,106,214,0.10)) !important;
            color: var(--text-primary) !important;
            border-color: rgba(56,208,245,0.35) !important;
        }

    :root[data-theme="dark"] .in-tab-ic {
        background: rgba(56,208,245,0.10);
        color: var(--brand-cyan-light);
    }

    :root[data-theme="dark"] .in-tab-txt b {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .in-tab-txt em {
        color: var(--text-muted);
    }

    /* === Why tabs === */
    :root[data-theme="dark"] .wt-side-head b {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .wt-side-head span {
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .wt-tab {
        color: var(--text-secondary);
        background: transparent;
        border-color: transparent;
    }

        :root[data-theme="dark"] .wt-tab:hover {
            background: rgba(255,255,255,0.03);
            color: var(--text-primary);
        }

        :root[data-theme="dark"] .wt-tab.is-active {
            background: linear-gradient(135deg, rgba(56,208,245,0.14), rgba(77,106,214,0.08)) !important;
            color: var(--text-primary) !important;
            border-color: rgba(56,208,245,0.3) !important;
        }

    :root[data-theme="dark"] .wt-ic {
        background: rgba(56,208,245,0.12);
        color: var(--brand-cyan-light);
    }

    :root[data-theme="dark"] .wt-lbl b {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .wt-lbl em {
        color: var(--text-muted);
    }

    :root[data-theme="dark"] .wt-points li b {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .wt-points li em {
        color: var(--text-secondary);
    }

    :root[data-theme="dark"] .wt-dot {
        background: var(--brand-cyan);
        box-shadow: 0 0 0 6px rgba(56,208,245,0.12);
    }

    /* === Plans === */
    :root[data-theme="dark"] .plan-card-features li {
        color: var(--text-secondary);
        border-color: var(--border-soft);
    }

        :root[data-theme="dark"] .plan-card-features li svg {
            color: var(--brand-cyan);
        }

    :root[data-theme="dark"] .plan-card-lnk {
        color: var(--brand-cyan-light);
    }

    :root[data-theme="dark"] .plan-card.featured {
        border-color: rgba(56,208,245,0.5) !important;
        background: linear-gradient(180deg, rgba(56,208,245,0.06), var(--surface-white) 50%) !important;
        box-shadow: 0 25px 60px rgba(56,208,245,0.15), 0 1px 0 rgba(255,255,255,0.05);
    }

    /* === Timeline === */
    :root[data-theme="dark"] .timeline-num {
        background: rgba(56,208,245,0.12);
        color: var(--brand-cyan-light);
        border-color: rgba(56,208,245,0.3);
    }

    :root[data-theme="dark"] .timeline-step h4 {
        color: var(--text-primary);
    }

    :root[data-theme="dark"] .timeline-step p {
        color: var(--text-secondary);
    }

    /* === Showcase cards (already gradient backgrounds — keep) === */
    :root[data-theme="dark"] .showcase-card {
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }

    /* === Final CTA (keep dark gradient brand) === */
    :root[data-theme="dark"] .final-cta2 {
        background: var(--gradient-cta-bg) !important;
    }

    /* === Footer === */
    :root[data-theme="dark"] .site-footer {
        background: #060a18 !important;
        border-top: 1px solid rgba(255,255,255,0.05);
    }

    :root[data-theme="dark"] .footer-col h4 {
        color: #fff;
    }

    :root[data-theme="dark"] .footer-col a, :root[data-theme="dark"] .footer-brand p {
        color: rgba(234,240,255,0.65);
    }

        :root[data-theme="dark"] .footer-col a:hover {
            color: var(--brand-cyan-light);
        }

    :root[data-theme="dark"] .footer-newsletter input {
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.1);
        color: #fff;
    }

    :root[data-theme="dark"] .footer-newsletter button {
        background: var(--gradient-cta);
        color: #0b1024;
    }

    :root[data-theme="dark"] .footer-bottom {
        color: rgba(234,240,255,0.5);
        border-top-color: rgba(255,255,255,0.05);
    }

    /* === Forms / inputs === */
    :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea {
        background: #0e1428 !important;
        border: 1px solid var(--border-strong) !important;
        color: var(--text-primary) !important;
    }

        :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus {
            border-color: var(--brand-cyan) !important;
            box-shadow: 0 0 0 3px rgba(56,208,245,0.15) !important;
            background: #131a2e !important;
        }

    :root[data-theme="dark"] .cr-dialog {
        background: #0e1428 !important;
    }

    :root[data-theme="dark"] .cr-overlay {
        background: rgba(0,0,0,0.7) !important;
    }

    :root[data-theme="dark"] .cr-field span {
        color: var(--text-secondary);
    }

    /* === Misc === */
    :root[data-theme="dark"] hr, :root[data-theme="dark"] .divider {
        background: var(--border-soft) !important;
        border-color: var(--border-soft) !important;
    }

    :root[data-theme="dark"] ::selection {
        background: rgba(56,208,245,0.35);
        color: #fff;
    }

    /* Preloader */
    :root[data-theme="dark"] .wy-preloader {
        background: #0b1024 !important;
    }

/* ===================== ARTICLE PAGE ===================== */
.article-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 20px;
}

.article-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 auto 18px;
    max-width: 880px;
    padding: 0 20px;
}

    .article-breadcrumb a {
        color: var(--text-secondary);
        transition: color 0.2s;
    }

        .article-breadcrumb a:hover {
            color: var(--brand-cyan-dark);
        }

    .article-breadcrumb .sep {
        opacity: 0.55;
    }

    .article-breadcrumb .current {
        color: var(--text-primary);
        font-weight: 600;
    }

.article-header {
    text-align: start;
    margin-bottom: 28px;
}

    .article-header .post-tag {
        display: inline-block;
        margin-bottom: 14px;
    }

    .article-header h1 {
        font-size: clamp(1.75rem, 3.4vw, 2.55rem);
        line-height: 1.35;
        color: var(--brand-navy);
        margin: 0 0 16px;
        font-weight: 800;
        letter-spacing: -0.4px;
    }

    .article-header .article-lede {
        font-size: 1.05rem;
        line-height: 1.85;
        color: var(--text-secondary);
        margin: 0 0 18px;
    }

.article-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}

    .article-meta-row .dot-sep {
        opacity: 0.5;
    }

.article-hero-image {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 520px;
    background: linear-gradient(135deg, #EAF6FD 0%, #F7FBFF 100%);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 28px 0 36px;
    border: 1px solid var(--border-soft);
    box-shadow: 0 12px 40px -20px rgba(14, 56, 110, 0.18);
}

    .article-hero-image img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }

@media (max-width: 768px) {
    .article-hero-image {
        aspect-ratio: 16 / 10;
    }
}

/* TOC */
.article-toc {
    background: var(--surface-snow);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    margin: 0 0 32px;
}

    .article-toc h4 {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--text-secondary);
        margin: 0 0 12px;
        font-weight: 700;
    }

    .article-toc ol {
        margin: 0;
        padding-inline-start: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .article-toc a {
        font-size: 0.92rem;
        color: var(--text-primary);
        font-weight: 500;
        transition: color 0.2s;
    }

        .article-toc a:hover {
            color: var(--brand-cyan-dark);
        }

/* Body */
.article-body {
    font-size: 1.02rem;
    line-height: 1.95;
    color: var(--text-primary);
}

    .article-body > * + * {
        margin-top: 1.1em;
    }

    .article-body h2 {
        font-size: 1.55rem;
        color: var(--brand-navy);
        font-weight: 800;
        margin-top: 2em;
        margin-bottom: 0.6em;
        letter-spacing: -0.3px;
        scroll-margin-top: 100px;
    }

    .article-body h3 {
        font-size: 1.2rem;
        color: var(--brand-navy);
        font-weight: 700;
        margin-top: 1.7em;
        margin-bottom: 0.5em;
    }

    .article-body p {
        margin: 0;
        color: var(--text-primary);
        opacity: 0.92;
    }

    .article-body ul, .article-body ol {
        padding-inline-start: 22px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .article-body li {
        line-height: 1.85;
    }

    .article-body strong {
        color: var(--brand-navy);
    }

    .article-body blockquote {
        margin: 1.6em 0;
        padding: 18px 22px;
        background: var(--surface-snow);
        border-inline-start: 4px solid var(--brand-cyan);
        border-radius: 8px;
        color: var(--text-primary);
        font-style: italic;
    }

    .article-body img {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
    }

/* Share bar */
.article-share {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 40px 0 0;
    padding: 18px 0;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

    .article-share .lbl {
        font-size: 0.88rem;
        color: var(--text-secondary);
        margin-inline-end: 6px;
        font-weight: 600;
    }

    .article-share a, .article-share button {
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--surface-snow);
        border: 1px solid var(--border-soft);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.25s ease;
    }

        .article-share a:hover, .article-share button:hover {
            color: var(--brand-cyan-dark);
            border-color: var(--brand-cyan-light);
            transform: translateY(-2px);
        }

    .article-share svg {
        width: 16px;
        height: 16px;
    }

/* Article CTA */
.article-cta {
    margin: 44px auto 0;
    padding: 32px 28px;
    background: linear-gradient(135deg, rgba(14,164,204,0.08), rgba(38,60,132,0.05));
    border: 1px solid rgba(14,164,204,0.22);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

    .article-cta h3 {
        margin: 0 0 6px;
        font-size: 1.2rem;
        color: var(--brand-navy);
    }

    .article-cta p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.95rem;
    }

/* Related posts */
.article-related {
    margin-top: 60px;
}

    .article-related .section-header {
        margin-bottom: 28px;
        text-align: start;
    }

        .article-related .section-header h2 {
            font-size: 1.6rem;
        }

    .article-related .blog-grid {
        grid-template-columns: repeat(3, 1fr);
    }

@media (max-width: 768px) {
    .article-cta {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .article-related .blog-grid {
        grid-template-columns: 1fr;
    }
}

/* Dark mode for article */
:root[data-theme="dark"] .blog-card-img,
:root[data-theme="dark"] .article-hero-image {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .blog-tab {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: var(--text-secondary);
}

    :root[data-theme="dark"] .blog-tab.active {
        background: var(--gradient-cta);
        color: #fff;
    }

:root[data-theme="dark"] .blog-search {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}

    :root[data-theme="dark"] .blog-search input {
        color: var(--text-primary);
    }

:root[data-theme="dark"] .article-toc {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
}

:root[data-theme="dark"] .article-body h2,
:root[data-theme="dark"] .article-body h3,
:root[data-theme="dark"] .article-header h1,
:root[data-theme="dark"] .article-cta h3 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .article-body blockquote {
    background: rgba(255,255,255,0.04);
}

:root[data-theme="dark"] .article-share a,
:root[data-theme="dark"] .article-share button {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
}

/* ============================================================
   Trial Request Modal — اطلب تجربتك الآن
   Inherits .cr-modal/.cr-dialog base styles
   ============================================================ */
.trial-modal .trial-dialog {
    max-width: 560px;
}

.trial-modal .cr-field input {
    min-height: 46px;
}

.trial-modal .trial-header h3 {
    font-size: 1.35rem;
    line-height: 1.5;
}

.trial-modal .trial-header p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 8px auto 0;
}

.trial-modal .cr-actions .btn {
    width: 100%;
    max-width: 100%;
}

.trial-success {
    text-align: center;
    padding: 18px 6px 4px;
    animation: trialFadeIn 0.4s ease;
}

.trial-success-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(14,164,204,0.15), rgba(38,60,132,0.10));
    color: var(--brand-cyan-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 18px;
}

.trial-success h4 {
    font-size: 1.25rem;
    color: var(--brand-navy);
    font-weight: 800;
    margin: 0 0 14px;
}

.trial-success p {
    font-size: 0.96rem;
    line-height: 1.85;
    color: var(--text-secondary);
    max-width: 460px;
    margin: 0 auto;
}

@keyframes trialFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* Dark mode for trial modal */
:root[data-theme="dark"] .trial-modal .cr-dialog {
    background: #0e1428 !important;
    border: 1px solid rgba(255,255,255,0.08);
}

:root[data-theme="dark"] .trial-modal .trial-header h3,
:root[data-theme="dark"] .trial-success h4 {
    color: var(--text-primary);
}

:root[data-theme="dark"] .trial-modal .cr-field input {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
    color: var(--text-primary);
}

:root[data-theme="dark"] .trial-modal .cr-close {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}

:root[data-theme="dark"] .trial-success-icon {
    background: rgba(14,164,204,0.18);
    color: var(--brand-cyan-light);
}

/* Footer link rendered as button (CTA → trial modal) */
.footer-link-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
}

    .footer-link-btn:hover {
        color: var(--brand-cyan-light);
    }

/* ==========================================================
   Dark Mode — Premium Polish v3
   - Cleaner card borders (single subtle stroke)
   - Timeline steps as proper cards
   - Connector line refined
   ========================================================== */

/* Universal card refinement: remove competing rings, single soft border */
:root[data-theme="dark"] .module-card,
:root[data-theme="dark"] .ip-card,
:root[data-theme="dark"] .pillar,
:root[data-theme="dark"] .pillar-v2,
:root[data-theme="dark"] .plan-card,
:root[data-theme="dark"] .blog-card,
:root[data-theme="dark"] .feature-card,
:root[data-theme="dark"] .testimonial-card,
:root[data-theme="dark"] .legal-card,
:root[data-theme="dark"] .form-card,
:root[data-theme="dark"] .pr-summary,
:root[data-theme="dark"] .pr-section,
:root[data-theme="dark"] .custom-cta-card,
:root[data-theme="dark"] .why-tabs,
:root[data-theme="dark"] .inside-wrap,
:root[data-theme="dark"] .wt-side,
:root[data-theme="dark"] .wt-stage {
    background: linear-gradient(180deg, #161e36 0%, #131a2e 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.35), 0 18px 40px -24px rgba(0,0,0,0.7) !important;
}

    :root[data-theme="dark"] .module-card:hover,
    :root[data-theme="dark"] .ip-card:hover,
    :root[data-theme="dark"] .pillar:hover,
    :root[data-theme="dark"] .pillar-v2:hover,
    :root[data-theme="dark"] .plan-card:hover,
    :root[data-theme="dark"] .blog-card:hover {
        border-color: rgba(56,208,245,0.40) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.4), 0 24px 50px -20px rgba(56,208,245,0.18) !important;
        transform: translateY(-4px);
    }

    /* Pillar v2 accent-pink hover override (keep Donations pink in dark too) */
    :root[data-theme="dark"] .pillar-v2.accent-pink:hover {
        border-color: rgba(246,111,163,0.45) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 50px -20px rgba(246,111,163,0.20) !important;
    }

    /* Remove featured ring that competes in dark */
    :root[data-theme="dark"] .pillar-v2.featured,
    :root[data-theme="dark"] .pillar.featured {
        border-color: rgba(255,255,255,0.06) !important;
    }

/* === Timeline (How to start) — proper cards in dark === */
:root[data-theme="dark"] .timeline-step {
    background: linear-gradient(180deg, #161e36 0%, #131a2e 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    padding: 28px 22px 26px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.35), 0 18px 40px -24px rgba(0,0,0,0.7);
    transition: all .35s var(--easing);
}

    :root[data-theme="dark"] .timeline-step:hover {
        transform: translateY(-4px);
        border-color: rgba(56,208,245,0.40);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 50px -20px rgba(56,208,245,0.22);
    }

:root[data-theme="dark"] .timeline-num {
    background: linear-gradient(135deg, rgba(56,208,245,0.16), rgba(77,106,214,0.10));
    border: 1.5px solid rgba(56,208,245,0.40);
    color: var(--brand-cyan-light);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 22px rgba(56,208,245,0.18);
    width: 64px;
    height: 64px;
    font-size: 1.35rem;
    margin-bottom: 14px;
}

:root[data-theme="dark"] .timeline-step:hover .timeline-num {
    background: var(--gradient-cta);
    color: #0b1024;
    border-color: transparent;
    transform: scale(1.05);
}

:root[data-theme="dark"] .timeline-step h4 {
    color: var(--text-primary);
    margin-bottom: 8px;
}

:root[data-theme="dark"] .timeline-step p {
    color: var(--text-secondary);
}

/* Hide the connector line behind cards in dark (too noisy with card chrome) */
:root[data-theme="dark"] .timeline::before {
    background: linear-gradient(90deg, rgba(56,208,245,0.0), rgba(56,208,245,0.35), rgba(77,106,214,0.0));
    opacity: 0.18;
    top: 50px;
}

/* Section-mist deeper contrast so cards lift cleanly */
:root[data-theme="dark"] .section-mist {
    background: #0a0f22 !important;
}

/* Showcase cards same treatment */
:root[data-theme="dark"] .showcase-card {
    background: linear-gradient(180deg, #161e36 0%, #131a2e 100%) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px -24px rgba(0,0,0,0.7) !important;
}

    :root[data-theme="dark"] .showcase-card:hover {
        border-color: rgba(56,208,245,0.35) !important;
        transform: translateY(-3px);
    }

    :root[data-theme="dark"] .showcase-card .label {
        color: var(--brand-cyan-light);
    }

    :root[data-theme="dark"] .showcase-card .name {
        color: var(--text-primary);
    }

/* =====================================================
   Value Pillars (لماذا تختار ويبيان — التصميم الجديد)
   ===================================================== */
.value-pillars-section {
    padding: 96px 0;
}

.vp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}

@media (max-width: 820px) {
    .vp-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.vp-card {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-xs);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    position: relative;
}

    .vp-card:hover {
        transform: translateY(-4px);
        border-color: rgba(38,60,132,0.18);
        box-shadow: 0 20px 40px -22px rgba(15,23,51,0.18);
    }

.vp-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

    .vp-icon svg {
        width: 32px;
        height: 32px;
    }

.vp-icon-navy {
    background: rgba(38,60,132,0.08);
    color: var(--brand-navy);
}

.vp-icon-pink {
    background: rgba(236,72,127,0.10);
    color: #ec487f;
}

.vp-icon-cyan {
    background: rgba(36,194,236,0.12);
    color: var(--brand-cyan-deep);
}

.vp-icon-amber {
    background: rgba(245,170,40,0.14);
    color: #d68a10;
}

.vp-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.vp-card > p {
    color: var(--text-secondary);
    font-size: 0.97rem;
    line-height: 1.75;
    margin: 0;
}

.vp-points {
    list-style: none;
    padding: 0;
    margin: 6px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .vp-points li {
        position: relative;
        padding-right: 20px;
        font-size: 0.92rem;
        color: var(--text-secondary);
        line-height: 1.6;
    }

        .vp-points li::before {
            content: "";
            position: absolute;
            right: 0;
            top: 9px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--brand-cyan);
        }

.vp-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--brand-navy);
    text-decoration: none;
    padding-top: 6px;
    transition: color .2s ease, gap .2s ease;
}

    .vp-link:hover {
        color: var(--brand-cyan-deep);
        gap: 10px;
    }

.vp-highlight {
    margin-top: 40px;
    background: linear-gradient(135deg, rgba(38,60,132,0.04), rgba(36,194,236,0.06));
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    padding: 18px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
}

.vp-hl-item {
    font-size: 0.95rem;
    color: var(--text-primary);
}

    .vp-hl-item b {
        color: var(--brand-navy);
        font-weight: 800;
    }

.vp-hl-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--border-soft);
    display: inline-block;
}

.vp-hl-link {
    margin-inline-start: auto;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--brand-cyan-deep);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .2s ease;
}

    .vp-hl-link:hover {
        gap: 10px;
    }

@media (max-width: 720px) {
    .vp-highlight {
        flex-direction: column;
        gap: 10px;
    }

    .vp-hl-sep {
        display: none;
    }

    .vp-hl-link {
        margin: 4px 0 0;
    }
}

/* Dark mode */
:root[data-theme="dark"] .vp-card {
    background: linear-gradient(180deg, #161e36 0%, #131a2e 100%);
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 18px 40px -24px rgba(0,0,0,0.7);
}

    :root[data-theme="dark"] .vp-card:hover {
        border-color: rgba(56,208,245,0.40);
        box-shadow: 0 22px 50px -22px rgba(56,208,245,0.18);
    }

:root[data-theme="dark"] .vp-icon-navy {
    background: rgba(77,106,214,0.18);
    color: var(--brand-navy-light);
}

:root[data-theme="dark"] .vp-icon-pink {
    background: rgba(236,72,127,0.20);
    color: #ff6f9c;
}

:root[data-theme="dark"] .vp-icon-cyan {
    background: rgba(56,208,245,0.18);
    color: var(--brand-cyan-light);
}

:root[data-theme="dark"] .vp-icon-amber {
    background: rgba(245,170,40,0.20);
    color: #f5c46a;
}

:root[data-theme="dark"] .vp-highlight {
    background: linear-gradient(135deg, rgba(77,106,214,0.10), rgba(56,208,245,0.08));
    border-color: rgba(255,255,255,0.06);
}

/* ============================================ */
/* Partners & Friends Marquee                   */
/* ============================================ */
.partners-section {
    position: relative;
    padding: 84px 0 76px;
    background: radial-gradient(60% 80% at 50% 0%, rgba(36,194,236,0.05) 0%, transparent 60%), linear-gradient(180deg, var(--surface-white) 0%, var(--surface-snow) 100%);
    overflow: hidden;
}

.partners-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 44px;
}

    .partners-head .eyebrow {
        display: inline-block;
        margin-bottom: 14px;
    }

    .partners-head h2 {
        font-size: clamp(26px, 3.2vw, 36px);
        font-weight: 800;
        margin: 0 0 12px;
        letter-spacing: -0.01em;
        color: var(--text-primary);
    }

    .partners-head p {
        color: var(--text-muted);
        font-size: 16px;
        line-height: 1.8;
        margin: 0;
    }

.partners-marquee {
    position: relative;
    overflow: hidden;
    direction: ltr;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 0;
    width: max-content;
    direction: ltr;
    animation: partnersScrollLtr 34s linear infinite;
    will-change: transform;
}

html[dir="rtl"] .partners-track {
    animation-name: partnersScrollRtl;
}

.partners-group {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
    padding-inline-end: 22px;
}

.partners-marquee:hover .partners-track,
.partners-marquee:focus-within .partners-track {
    animation-play-state: paused;
}

.partner-logo-card {
    flex: 0 0 auto;
    width: 188px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    box-shadow: 0 8px 22px -14px rgba(15,42,80,0.10);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .partner-logo-card img {
        max-width: 100%;
        max-height: 54px;
        width: auto;
        height: auto;
        object-fit: contain;
        filter: grayscale(1) opacity(.65);
        transition: filter .35s ease, transform .35s ease;
    }

    .partner-logo-card:hover {
        transform: translateY(-3px);
        border-color: rgba(36,194,236,0.30);
        box-shadow: 0 18px 36px -16px rgba(15,42,80,0.18);
    }

        .partner-logo-card:hover img {
            filter: grayscale(0) opacity(1);
            transform: scale(1.04);
        }

@keyframes partnersScrollLtr {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% / 3));
    }
}

@keyframes partnersScrollRtl {
    from {
        transform: translateX(calc(-100% / 3));
    }

    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .partners-track {
        animation: none;
    }
}

@media (max-width: 768px) {
    .partners-section {
        padding: 56px 0 50px;
    }

    .partners-head {
        margin-bottom: 32px;
        padding: 0 16px;
    }

    .partners-track {
        animation-duration: 26s;
    }

    .partners-group {
        gap: 14px;
        padding-inline-end: 14px;
    }

    .partner-logo-card {
        width: 148px;
        height: 72px;
        padding: 10px 16px;
        border-radius: 14px;
    }

        .partner-logo-card img {
            max-height: 42px;
        }
}

/* Dark Mode overrides */
:root[data-theme="dark"] .partners-section {
    background: radial-gradient(60% 80% at 50% 0%, rgba(56,208,245,0.07) 0%, transparent 60%), linear-gradient(180deg, #0a0f22 0%, #0d1428 100%);
}

:root[data-theme="dark"] .partner-logo-card {
    background: linear-gradient(180deg, #161e36 0%, #131a2e 100%);
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 12px 28px -18px rgba(0,0,0,0.6);
}

    :root[data-theme="dark"] .partner-logo-card img {
        filter: grayscale(1) brightness(1.6) opacity(.75);
    }

    :root[data-theme="dark"] .partner-logo-card:hover {
        border-color: rgba(56,208,245,0.40);
        box-shadow: 0 20px 40px -18px rgba(56,208,245,0.18);
    }

        :root[data-theme="dark"] .partner-logo-card:hover img {
            filter: grayscale(0) brightness(1.05) opacity(1);
        }

/* =====================================================
   Why Webyan — Features Grid (8 cards)
   ===================================================== */
.why-features-section {
    padding: 84px 0;
}

.wf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 44px;
}

.wf-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--border-soft, rgba(15,23,51,0.08));
    border-radius: 18px;
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    box-shadow: 0 1px 0 rgba(15,23,51,0.02);
}

    .wf-card:hover {
        transform: translateY(-4px);
        border-color: rgba(38,60,132,0.16);
        box-shadow: 0 22px 40px -24px rgba(15,23,51,0.18);
    }

.wf-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .wf-icon svg {
        width: 26px;
        height: 26px;
    }

.wf-icon-navy {
    background: linear-gradient(135deg,#eef1fb,#dbe2f5);
    color: #263c84;
}

.wf-icon-pink {
    background: linear-gradient(135deg,#fdecf3,#fad3e2);
    color: #c43a73;
}

.wf-icon-cyan {
    background: linear-gradient(135deg,#e6f7fb,#cfeef6);
    color: #0e7c93;
}

.wf-icon-amber {
    background: linear-gradient(135deg,#fdf3e1,#f9e3bd);
    color: #a26a14;
}

.wf-icon-violet {
    background: linear-gradient(135deg,#f1ecfb,#ddd1f4);
    color: #5a36a8;
}

.wf-icon-teal {
    background: linear-gradient(135deg,#e3f7f3,#c6ebe3);
    color: #0f7d6c;
}

.wf-icon-rose {
    background: linear-gradient(135deg,#fdeceb,#f9d3d0);
    color: #b3382f;
}

.wf-icon-indigo {
    background: linear-gradient(135deg,#e9ecfa,#cdd4f3);
    color: #3242a0;
}

.wf-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 4px 0 0;
    color: var(--ink, #0f1733);
    line-height: 1.4;
}

.wf-card p {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--muted, #5b6478);
    margin: 0;
}

/* Highlight strip */
.wf-strip {
    margin-top: 36px;
    background: linear-gradient(135deg, #f7f9ff, #eef2fb);
    border: 1px solid rgba(38,60,132,0.10);
    border-radius: 16px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

    .wf-strip p {
        margin: 0;
        font-size: .98rem;
        color: var(--ink, #0f1733);
        font-weight: 600;
    }

.wf-strip-link {
    color: #263c84;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap .25s ease, color .25s ease;
}

    .wf-strip-link:hover {
        color: #0f7d6c;
        gap: 10px;
    }

/* Tablet */
@media (max-width: 1024px) {
    .wf-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Mobile */
@media (max-width: 600px) {
    .wf-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wf-card {
        padding: 22px 18px;
    }

    .wf-strip {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px;
    }
}

/* Dark mode */
[data-theme="dark"] .wf-card {
    background: linear-gradient(180deg, #161e36, #131a2e);
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
}

    [data-theme="dark"] .wf-card:hover {
        border-color: rgba(255,255,255,0.18);
        box-shadow: 0 22px 40px -22px rgba(0,0,0,0.5);
    }

    [data-theme="dark"] .wf-card h3 {
        color: #eef1fb;
    }

    [data-theme="dark"] .wf-card p {
        color: #aab3c8;
    }

[data-theme="dark"] .wf-icon {
    filter: brightness(0.95) saturate(1.05);
}

[data-theme="dark"] .wf-strip {
    background: linear-gradient(135deg, #161e36, #131a2e);
    border-color: rgba(255,255,255,0.10);
}

    [data-theme="dark"] .wf-strip p {
        color: #eef1fb;
    }

[data-theme="dark"] .wf-strip-link {
    color: #8ea3e8;
}

    [data-theme="dark"] .wf-strip-link:hover {
        color: #4ed5be;
    }

/* ===================== CASE SHOWCASE (Real Projects) ===================== */
.case-showcase-section {
    background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 60%, #f7fbff 100%);
    position: relative;
}

    .case-showcase-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 12% 18%, rgba(14,164,204,0.08), transparent 45%), radial-gradient(circle at 88% 82%, rgba(38,60,132,0.06), transparent 50%);
        pointer-events: none;
    }

    .case-showcase-section .container {
        position: relative;
        z-index: 1;
    }

.cases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 38px;
}

/* Slider variant */
.cases-slider {
    position: relative;
    margin-top: 38px;
}

.cases-viewport {
    overflow: hidden;
    padding: 6px 4px 14px;
    margin: 0 -4px;
}

.cases-track {
    display: flex;
    gap: 22px;
    transition: transform .55s var(--easing);
    will-change: transform;
}

    .cases-track > .case-card {
        flex: 0 0 calc((100% - 22px * 3) / 4);
        min-width: 0;
    }

.cases-nav {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: #fff;
    color: var(--brand-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(20,40,80,0.12);
    transition: background .25s ease, color .25s ease, transform .25s ease;
    z-index: 3;
}

    .cases-nav:hover {
        background: var(--brand-cyan-deep);
        color: #fff;
        transform: translateY(-50%) scale(1.06);
    }

    .cases-nav.prev {
        right: -10px;
    }

    .cases-nav.next {
        left: -10px;
    }

    .cases-nav svg {
        width: 18px;
        height: 18px;
    }

.cases-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.cases-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(20,40,80,0.18);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .25s ease, width .25s ease;
}

    .cases-dot.active {
        background: var(--brand-cyan-deep);
        width: 22px;
        border-radius: 999px;
    }


.case-card {
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 18px rgba(20,40,80,0.05);
    transition: transform .35s var(--easing), box-shadow .35s var(--easing), border-color .35s var(--easing);
}

    .case-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 38px rgba(20,40,80,0.12);
        border-color: rgba(14,164,204,0.35);
    }

/* Browser frame mockup */
.case-frame {
    position: relative;
    background: #eef3fa;
    padding: 0;
    border-bottom: 1px solid var(--border-soft);
}

.case-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #f4f7fc, #e9eff7);
    border-bottom: 1px solid rgba(20,40,80,0.06);
}

    .case-browser-bar span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #d8dee8;
    }

        .case-browser-bar span:nth-child(1) {
            background: #ff6159;
        }

        .case-browser-bar span:nth-child(2) {
            background: #ffbd2e;
        }

        .case-browser-bar span:nth-child(3) {
            background: #28c840;
        }

.case-shot {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #f0f4fa;
}

    .case-shot img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
        transition: transform 1.6s ease, object-position 1.6s ease;
    }

    .case-shot::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(14,40,80,0) 60%, rgba(14,40,80,0.08) 100%);
        opacity: 0;
        transition: opacity .35s ease;
        pointer-events: none;
    }

.case-card:hover .case-shot img {
    object-position: bottom center;
    transform: scale(1.02);
}

.case-card:hover .case-shot::after {
    opacity: 1;
}

.case-body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.case-type {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--brand-cyan-deep);
    text-transform: none;
}

.case-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}

.case-desc {
    font-size: 0.86rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

    .case-tags span {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--brand-navy);
        background: rgba(14,164,204,0.08);
        border: 1px solid rgba(14,164,204,0.18);
        padding: 4px 10px;
        border-radius: 999px;
    }

.case-link {
    margin-top: auto;
    align-self: flex-start;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-cyan-deep);
    text-decoration: none;
    padding-top: 6px;
    transition: color .25s ease, transform .25s ease;
}

    .case-link:hover {
        color: var(--brand-navy);
        transform: translateX(-3px);
    }

.cases-foot {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

/* Responsive */
@media (max-width: 1100px) {
    .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cases-track > .case-card {
        flex: 0 0 calc((100% - 22px) / 2);
    }
}

@media (max-width: 640px) {
    .cases-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cases-track {
        gap: 16px;
    }

        .cases-track > .case-card {
            flex: 0 0 100%;
        }

    .cases-nav.prev {
        right: 4px;
    }

    .cases-nav.next {
        left: 4px;
    }
}

/* Dark mode */
[data-theme="dark"] .case-showcase-section {
    background: linear-gradient(180deg, #0f1628 0%, #121a31 100%);
}

[data-theme="dark"] .case-card {
    background: linear-gradient(180deg, #161e36, #131a2e);
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

    [data-theme="dark"] .case-card:hover {
        border-color: rgba(95,212,242,0.35);
        box-shadow: 0 22px 46px rgba(0,0,0,0.5);
    }

[data-theme="dark"] .case-frame {
    background: #0e1426;
    border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .case-browser-bar {
    background: linear-gradient(180deg, #1a2440, #131b33);
    border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .case-name {
    color: #fff;
}

[data-theme="dark"] .case-desc {
    color: rgba(255,255,255,0.72);
}

[data-theme="dark"] .case-type {
    color: var(--brand-cyan-light);
}

[data-theme="dark"] .case-tags span {
    color: #cfe8f5;
    background: rgba(95,212,242,0.10);
    border-color: rgba(95,212,242,0.25);
}

[data-theme="dark"] .case-link {
    color: var(--brand-cyan-light);
}

    [data-theme="dark"] .case-link:hover {
        color: #fff;
    }