/* ===================================================================
   Iltizam — Theme (Modern SaaS design system for marketing pages)
   Uses the CSS variables defined in _Layout.cshtml (--primary, etc.)
=================================================================== */

:root {
    --primary-50: #eaf4fc;
    --primary-100: #d3e9f8;
    --primary-600: #0c75c0;
    --primary-700: #095e9e;
    --accent: #16a97e;
    --ink: #0f2436;
    --ink-soft: #46607a;
    --line: #e6edf3;
    --surface: #f6f9fc;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --shadow-sm: 0 2px 10px rgba(15, 36, 54, .06);
    --shadow-md: 0 12px 34px rgba(15, 36, 54, .09);
    --shadow-lg: 0 24px 60px rgba(15, 36, 54, .14);
}

.container-xl {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: 5.5rem 0;
}

.section-tight {
    padding: 3.5rem 0;
}

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

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--primary-50);
    color: var(--primary-700);
    font-weight: 700;
    font-size: .85rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.1rem;
}

    .hero-badges .eyebrow {
        margin-bottom: 0;
    }

.badge-compliance {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #e9f9f2;
    color: #0d8f5f;
    font-weight: 700;
    font-size: .85rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(22, 169, 126, .25);
    white-space: nowrap;
}

    .badge-compliance i {
        color: #16a97e;
        font-size: .95rem;
    }

.section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.section-head h2 {
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 .9rem;
}

.section-head p {
    color: var(--ink-soft);
    font-size: 1.05rem;
    margin: 0;
}

/* ---------- Buttons ---------- */
.btn-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .95rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.02rem;
    text-decoration: none;
    border: 2px solid transparent;
    transition: all .25s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn-fill {
    background: var(--primary-600);
    color: #fff;
    box-shadow: 0 10px 24px rgba(12, 117, 192, .28);
}

    .btn-fill:hover {
        background: var(--primary-700);
        transform: translateY(-2px);
        color: #fff;
        box-shadow: 0 14px 30px rgba(12, 117, 192, .35);
    }

.btn-ghost {
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
}

    .btn-ghost:hover {
        border-color: var(--primary-600);
        color: var(--primary-600);
        transform: translateY(-2px);
    }

.btn-white {
    background: #fff;
    color: var(--primary-700);
}

    .btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    }

/* ---------- Hero ---------- */
.hero-modern {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1100px 500px at 85% -10%, var(--primary-100), transparent 60%), linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
    padding: 4.5rem 0 3rem;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 3rem;
    align-items: center;
}

.hero-modern h1 {
    font-size: clamp(2.1rem, 3.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1.28;
    color: var(--ink);
    margin: 0 0 1.2rem;
}

.hero-modern h1 span {
    color: var(--primary-600);
}

.hero-modern p.lead {
    font-size: 1.12rem;
    color: var(--ink-soft);
    margin: 0 0 2rem;
    max-width: 560px;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.2rem;
}

.hero-trust {
    display: flex;
    gap: 1.6rem;
    flex-wrap: wrap;
    color: var(--ink-soft);
    font-size: .92rem;
}

    .hero-trust span {
        display: flex;
        align-items: center;
        gap: .5rem;
        font-weight: 600;
    }

    .hero-trust i {
        color: var(--accent);
    }

.hero-media {
    position: relative;
}

.hero-media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.hero-stat-card {
    position: absolute;
    bottom: -1.4rem;
    left: -1.4rem;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 1rem 1.3rem;
    display: flex;
    align-items: center;
    gap: .8rem;
}

    .hero-stat-card i {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--primary-50);
        color: var(--primary-600);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
    }

    .hero-stat-card b {
        display: block;
        font-size: 1.05rem;
        color: var(--ink);
    }

    .hero-stat-card small {
        color: var(--ink-soft);
    }

/* ---------- Stats bar ---------- */
.stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    max-width: 1000px;
    margin: 3rem auto 0;
}

.stat-item {
    text-align: center;
}

    .stat-item b {
        display: block;
        font-size: 2rem;
        font-weight: 800;
        color: var(--primary-600);
    }

    .stat-item span {
        color: var(--ink-soft);
        font-size: .92rem;
    }

/* ---------- Cards / Grids ---------- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
}

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

.card-feature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.9rem 1.6rem;
    transition: all .28s ease;
}

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

.card-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-sm);
    background: var(--primary-50);
    color: var(--primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.1rem;
}

.card-feature h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 .55rem;
}

.card-feature p {
    color: var(--ink-soft);
    font-size: .96rem;
    margin: 0;
    line-height: 1.7;
}

/* ---------- Module cards (Pricing / Sectors) ---------- */
.module-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    transition: all .25s ease;
}

    .module-card:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-4px);
    }

    .module-card .card-icon {
        margin-bottom: 0;
    }

    .module-card h3 {
        font-size: 1.08rem;
        font-weight: 700;
        color: var(--ink);
        margin: 0;
    }

    .module-card p {
        color: var(--ink-soft);
        font-size: .93rem;
        margin: 0;
        line-height: 1.65;
    }

    .module-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

        .module-card ul li {
            display: flex;
            align-items: flex-start;
            gap: .55rem;
            font-size: .92rem;
            color: var(--ink-soft);
        }

        .module-card ul i {
            color: var(--accent);
            margin-top: .2rem;
            font-size: .85rem;
        }

.module-tag {
    display: inline-block;
    align-self: flex-start;
    background: var(--primary-50);
    color: var(--primary-700);
    font-size: .78rem;
    font-weight: 700;
    padding: .3rem .75rem;
    border-radius: 999px;
}

/* ---------- Pricing tier cards ---------- */
.tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
    max-width: 1100px;
    margin: 0 auto;
}

.tier-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2.2rem 1.9rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all .3s ease;
}

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

    .tier-card.featured {
        border: 2px solid var(--primary-600);
        box-shadow: var(--shadow-md);
    }

.tier-badge {
    position: absolute;
    top: -14px;
    right: 50%;
    transform: translateX(50%);
    background: var(--primary-600);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    padding: .35rem 1rem;
    border-radius: 999px;
    white-space: nowrap;
}

.tier-card h3 {
    text-align: center;
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--ink);
    margin: .4rem 0 .4rem;
}

.tier-card .tier-desc {
    text-align: center;
    color: var(--ink-soft);
    font-size: .92rem;
    margin: 0 0 1.6rem;
    min-height: 44px;
}

.tier-card ul {
    list-style: none;
    margin: 0 0 1.8rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    flex: 1;
}

    .tier-card ul li {
        display: flex;
        align-items: flex-start;
        gap: .6rem;
        font-size: .95rem;
        color: var(--ink-soft);
        padding-bottom: .7rem;
        border-bottom: 1px dashed var(--line);
    }

        .tier-card ul li:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }

        .tier-card ul li i {
            color: var(--accent);
            margin-top: .2rem;
        }

.tier-card .btn-lg {
    width: 100%;
}

/* ---------- CTA banner ---------- */
.cta-banner {
    background: linear-gradient(120deg, var(--primary-700), var(--primary-600) 55%, #1391d1);
    border-radius: var(--radius-lg);
    padding: 3.2rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    color: #fff;
}

    .cta-banner h2 {
        font-size: clamp(1.5rem, 2.4vw, 2rem);
        font-weight: 800;
        margin: 0 0 .6rem;
    }

    .cta-banner p {
        margin: 0;
        color: rgba(255,255,255,.88);
        font-size: 1.02rem;
    }

    .cta-banner .actions {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

/* ---------- Compliance / ZATCA section ---------- */
.compliance-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.compliance-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.6rem;
}

.compliance-badge {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem 1.1rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink);
}

    .compliance-badge i {
        color: var(--primary-600);
    }

.compliance-list {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

    .compliance-list li {
        display: flex;
        align-items: flex-start;
        gap: .7rem;
        color: var(--ink-soft);
        font-size: .98rem;
    }

    .compliance-list i {
        color: var(--accent);
        margin-top: .25rem;
    }

.compliance-visual {
    background: linear-gradient(155deg, var(--primary-50), #fff);
    border-radius: var(--radius-md);
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

    .compliance-visual img {
        max-width: 100%;
        height: auto;
    }

/* ---------- Timeline / detail sections (Sectors) ---------- */
.detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
    padding: 4rem 0;
    border-bottom: 1px solid var(--line);
}

    .detail-row:last-child {
        border-bottom: none;
    }

    .detail-row.reverse .detail-media {
        order: 2;
    }

.detail-media img {
    width: 100%;
    border-radius: var(--radius-lg);
}

.detail-text .eyebrow {
    margin-bottom: 1rem;
}

.detail-text h2 {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 1rem;
}

.detail-text p {
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.8;
    margin: 0 0 1.2rem;
}

.detail-text ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

    .detail-text ul li {
        display: flex;
        align-items: flex-start;
        gap: .7rem;
        color: var(--ink-soft);
        font-size: .98rem;
    }

    .detail-text ul i {
        color: var(--accent);
        margin-top: .25rem;
    }

/* ---------- Page header (sub pages) ---------- */
.page-header {
    background: linear-gradient(180deg, var(--primary-50) 0%, #ffffff 100%);
    padding: 3.6rem 0 3rem;
    text-align: center;
}

    .page-header .eyebrow {
        margin-bottom: 1rem;
    }

    .page-header h1 {
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        font-weight: 800;
        color: var(--ink);
        margin: 0 0 .9rem;
    }

    .page-header p {
        color: var(--ink-soft);
        font-size: 1.05rem;
        max-width: 640px;
        margin: 0 auto;
    }

.breadcrumb-modern {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.2rem;
    font-size: .92rem;
    color: var(--ink-soft);
}

    .breadcrumb-modern a {
        color: var(--primary-600);
        text-decoration: none;
    }

/* ---------- FAQ ---------- */
.faq-search-box {
    max-width: 560px;
    margin: 1.6rem auto 0;
    position: relative;
}

    .faq-search-box input {
        width: 100%;
        padding: .95rem 3rem .95rem 1.3rem;
        border-radius: 999px;
        border: 1px solid var(--line);
        font-family: 'Cairo', sans-serif;
        font-size: 1rem;
        outline: none;
        transition: border-color .2s;
    }

        .faq-search-box input:focus {
            border-color: var(--primary-600);
        }

    .faq-search-box i {
        position: absolute;
        top: 50%;
        right: 1.2rem;
        transform: translateY(-50%);
        color: var(--ink-soft);
    }

.faq-list {
    max-width: 820px;
    margin: 3rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-row {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.3rem 1.6rem;
    cursor: pointer;
    transition: box-shadow .2s;
}

    .faq-row:hover {
        box-shadow: var(--shadow-sm);
    }

.faq-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

    .faq-row-head h3 {
        font-size: 1.03rem;
        font-weight: 700;
        color: var(--ink);
        margin: 0;
    }

    .faq-row-head i {
        color: var(--primary-600);
        transition: transform .25s;
        flex-shrink: 0;
    }

.faq-row.active .faq-row-head i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: .96rem;
    line-height: 1.75;
    transition: max-height .3s ease;
}

.faq-row.active .faq-answer {
    margin-top: 1rem;
}

/* ---------- Values / About ---------- */
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

/* ---------- Scroll reveal (progressive enhancement, JS-driven) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .reveal-target {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .6s ease, transform .6s ease;
    }

        .reveal-target.in-view {
            opacity: 1;
            transform: none;
        }

    .grid-cards > .reveal-target:nth-child(2),
    .tier-grid > .reveal-target:nth-child(2),
    .value-grid > .reveal-target:nth-child(2) {
        transition-delay: .08s;
    }

    .grid-cards > .reveal-target:nth-child(3),
    .tier-grid > .reveal-target:nth-child(3),
    .value-grid > .reveal-target:nth-child(3) {
        transition-delay: .16s;
    }

    .grid-cards > .reveal-target:nth-child(4) {
        transition-delay: .24s;
    }

    .grid-cards > .reveal-target:nth-child(n+5) {
        transition-delay: .3s;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .hero-grid, .compliance-section, .detail-row {
        grid-template-columns: 1fr;
    }

    .detail-row.reverse .detail-media {
        order: 0;
    }

    .grid-cards, .grid-cards.cols-3, .tier-grid, .value-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .hero-stat-card {
        position: static;
        margin-top: 1.2rem;
        display: inline-flex;
    }
}

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

    .grid-cards, .grid-cards.cols-3, .tier-grid, .value-grid, .stats-bar {
        grid-template-columns: 1fr;
    }

    .cta-banner {
        padding: 2.2rem 1.6rem;
        text-align: center;
        justify-content: center;
    }

        .cta-banner .actions {
            justify-content: center;
        }

    .compliance-section {
        padding: 2rem 1.4rem;
    }
}