/*
Theme Name: Domix V3 Premium
Theme URI: https://domix.ai
Author: Domix Team
Description: Premium WordPress theme for omnichannel SaaS products with AI agents.
Version: 3.1.0
Text Domain: domix
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    --bg: #061021;
    --bg-soft: #0b1932;
    --surface: #0f2344;
    --surface-2: #132a51;
    --line: rgba(134, 171, 221, 0.22);
    --line-strong: rgba(148, 190, 245, 0.4);
    --ink: #e8f0ff;
    --ink-soft: #b9cae8;
    --ink-faint: #91a6cd;

    --brand-blue: #1880ff;
    --brand-cyan: #25c0cc;
    --brand-green: #74e08a;
    --brand-deep: #0d4ca0;

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;

    --container: 1200px;
    --header-h: 82px;

    --shadow-soft: 0 12px 32px rgba(2, 8, 22, 0.35);
    --shadow-hard: 0 22px 50px rgba(2, 8, 22, 0.55);

    /* Compatibility tokens for existing templates */
    --slate-0: #ffffff;
    --slate-50: #f3f7ff;
    --slate-100: #e5eeff;
    --slate-200: #ccd9f2;
    --slate-300: #b4c6e6;
    --slate-400: #95acd1;
    --slate-500: #7691bb;
    --slate-600: #4f6690;
    --slate-700: #33496f;
    --slate-800: #1f3253;
    --slate-900: #0e1c36;
    --brand-500: var(--brand-blue);
    --brand-600: #0d67d9;
    --accent-500: #23b888;
    --shadow-md: 0 10px 24px rgba(5, 18, 38, 0.18);
    --shadow-xl: 0 24px 54px rgba(5, 18, 38, 0.28);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(900px 560px at 8% -12%, rgba(36, 134, 255, 0.18), transparent 55%),
        radial-gradient(920px 620px at 104% -18%, rgba(99, 232, 142, 0.14), transparent 56%),
        linear-gradient(180deg, #08162c 0%, #061021 54%, #050d1b 100%);
    color: var(--ink);
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: 'Sora', 'Manrope', sans-serif;
    letter-spacing: -0.02em;
    line-height: 1.14;
}

p {
    margin: 0;
}

main {
    display: block;
}

.container {
    width: min(var(--container), calc(100% - 48px));
    margin: 0 auto;
}

.section {
    padding: 84px 0;
}

.section-heading {
    text-align: center;
    max-width: 740px;
    margin: 0 auto 42px;
}

.section-heading h2 {
    font-size: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
    margin-bottom: 12px;
}

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

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid rgba(126, 162, 215, 0.36);
    background: rgba(15, 34, 65, 0.72);
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.kicker::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
    box-shadow: 0 0 0 4px rgba(92, 227, 170, 0.18);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 0.93rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background: linear-gradient(118deg, var(--brand-blue), var(--brand-cyan) 46%, var(--brand-green));
    color: #041222;
    box-shadow: 0 12px 28px rgba(32, 162, 255, 0.35);
}

.button-primary:hover {
    box-shadow: 0 16px 34px rgba(32, 162, 255, 0.48);
}

.button-secondary {
    border-color: rgba(140, 176, 225, 0.4);
    color: var(--ink);
    background: rgba(10, 24, 47, 0.62);
}

.button-secondary:hover {
    border-color: rgba(180, 212, 255, 0.72);
    background: rgba(14, 35, 68, 0.86);
}

/* Backward compatible aliases used by existing templates */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: linear-gradient(118deg, var(--brand-blue), var(--brand-cyan) 46%, var(--brand-green));
    color: #041222;
    box-shadow: 0 12px 28px rgba(32, 162, 255, 0.35);
}

.btn-secondary {
    border: 1px solid rgba(140, 176, 225, 0.4);
    color: var(--ink);
    background: rgba(10, 24, 47, 0.62);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: background 0.28s ease, backdrop-filter 0.28s ease, border-color 0.28s ease;
}

.site-header.scrolled {
    background: rgba(5, 16, 33, 0.82);
    backdrop-filter: blur(10px);
    border-color: rgba(130, 168, 220, 0.2);
}

.nav-grid {
    min-height: var(--header-h);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 26px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Sora', 'Manrope', sans-serif;
    font-weight: 700;
    color: #eaf3ff;
    letter-spacing: 0.01em;
}

.brand img {
    /*width: 38px;*/
    height: 38px;
    border-radius: 12px;
    object-fit: contain;
    /*box-shadow: 0 6px 16px rgba(21, 128, 255, 0.26);*/
}

.brand span {
    font-size: 1.07rem;
}

.brand span em {
    color: var(--brand-green);
    font-style: normal;
}

.menu-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.primary-menu li {
    margin: 0;
}

.primary-menu a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 999px;
    font-size: 0.9rem;
    color: var(--ink-soft);
    transition: color 0.2s ease, background 0.2s ease;
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
    color: #f4f8ff;
    background: rgba(90, 135, 197, 0.16);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    background: #ffffff;
    border-radius: 999px;
    padding: 2px;
}

.lang-switch a {
    min-width: 36px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 800;
    color: #3d638f;
    letter-spacing: 0.04em;
}

.lang-switch a.active {
    background: #1d6fd1;
    color: #ffffff;
}

.nav-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(136, 170, 216, 0.4);
    background: rgba(10, 25, 48, 0.72);
    color: var(--ink);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 3px;
    background: currentColor;
}

.hero {
    padding: 64px 0 58px;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    gap: 40px;
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.15rem, 1.5rem + 2.8vw, 4rem);
    margin-bottom: 16px;
}

.hero h1 .accent {
    color: #8fe3f5;
    background: linear-gradient(95deg, #8fe3f5 0%, #74e08a 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    max-width: 640px;
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.hero-actions {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.kpi-grid {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.kpi-card {
    background: rgba(12, 30, 58, 0.74);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

.kpi-card strong {
    display: block;
    font-size: 1.35rem;
    color: #f3f7ff;
    margin-bottom: 2px;
}

.kpi-card span {
    color: var(--ink-faint);
    font-size: 0.84rem;
}

.hero-card {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(141, 179, 231, 0.33);
    padding: 18px;
    background:
        linear-gradient(165deg, rgba(19, 40, 77, 0.82), rgba(8, 20, 39, 0.95));
    box-shadow: var(--shadow-hard);
    overflow: hidden;
}

.hero-card::before {
    content: '';
    position: absolute;
    inset: -40% -5% auto;
    height: 64%;
    background: radial-gradient(circle at center, rgba(43, 169, 252, 0.22), transparent 66%);
    pointer-events: none;
    animation: hero-glow 6.5s ease-in-out infinite;
}

.hero-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    color: var(--ink-soft);
    font-size: 0.84rem;
}

.hero-card-head strong {
    color: #f0f6ff;
    font-size: 0.9rem;
}

.chat-stream {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.chat-item {
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(131, 168, 216, 0.24);
    background: rgba(10, 25, 48, 0.72);
    font-size: 0.9rem;
    color: #d6e3fb;
}

.chat-item.agent {
    border-color: rgba(97, 198, 157, 0.35);
    background: linear-gradient(125deg, rgba(18, 71, 110, 0.66), rgba(18, 73, 52, 0.56));
}

.chat-meta {
    margin-top: 4px;
    display: block;
    color: #99b1d8;
    font-size: 0.74rem;
}

.ops-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.ops-card {
    border: 1px solid rgba(140, 176, 224, 0.22);
    border-radius: 14px;
    padding: 11px;
    background: rgba(9, 21, 42, 0.68);
}

.ops-card strong {
    display: block;
    color: #edf4ff;
    margin-bottom: 2px;
}

.ops-card span {
    color: #95add3;
    font-size: 0.78rem;
}

.channel-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.channel-pills span {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(142, 179, 229, 0.24);
    background: rgba(15, 32, 61, 0.72);
    font-size: 0.76rem;
    color: var(--ink-soft);
}

.trust-band {
    padding: 20px 0 6px;
}

.trust-wrap {
    border-top: 1px dashed rgba(137, 177, 226, 0.28);
    border-bottom: 1px dashed rgba(137, 177, 226, 0.28);
    padding: 26px 0;
}

.trust-text {
    margin-bottom: 16px;
    text-align: center;
    color: var(--ink-faint);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.logo-cloud {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

.logo-chip {
    border: 1px solid rgba(139, 175, 222, 0.22);
    border-radius: 14px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c8d8f5;
    font-weight: 700;
    background: rgba(10, 24, 47, 0.62);
    letter-spacing: 0.02em;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.feature-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(175deg, rgba(15, 34, 66, 0.86), rgba(8, 20, 39, 0.94));
    padding: 22px 18px;
    min-height: 214px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(31, 93, 167, 0.14);
    border-color: rgba(45, 120, 205, 0.34);
}

.feature-index {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: #9cb5da;
}

.feature-card h3 {
    font-size: 1.15rem;
}

.feature-card p {
    color: var(--ink-soft);
    font-size: 0.93rem;
    max-width: 32ch;
}

.workflow {
    background: linear-gradient(160deg, #08162c 0%, #0a1d3a 100%);
    border-top: 1px solid rgba(141, 180, 233, 0.2);
    border-bottom: 1px solid rgba(141, 180, 233, 0.2);
}

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

.step-card {
    border-radius: 18px;
    border: 1px solid rgba(150, 187, 238, 0.25);
    background: rgba(13, 32, 63, 0.72);
    padding: 18px 16px;
}

.step-card .step {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 800;
    color: #021226;
    margin-bottom: 10px;
    background: linear-gradient(130deg, var(--brand-cyan), var(--brand-green));
}

.step-card h3 {
    font-size: 1rem;
    margin-bottom: 6px;
}

.step-card p {
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.price-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px 20px;
    background: rgba(9, 23, 46, 0.82);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(28, 92, 166, 0.16);
}

.price-card.featured {
    border-color: rgba(120, 222, 160, 0.6);
    box-shadow: 0 16px 38px rgba(39, 156, 132, 0.2);
    background: linear-gradient(165deg, rgba(18, 40, 70, 0.94), rgba(10, 28, 48, 0.9));
}

.plan-label {
    color: #9eb8de;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 10px;
}

.plan-price strong {
    font-family: 'Sora', 'Manrope', sans-serif;
    font-size: 2.1rem;
}

.plan-price span {
    color: #9db4d7;
    font-size: 0.9rem;
}

.plan-note {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.plan-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.plan-badges span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(61, 118, 188, 0.24);
    background: #f3f8ff;
    color: #2c5e98;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    animation: soft-pulse 3.2s ease-in-out infinite;
}

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

.plan-list li {
    color: #d3e2fa;
    font-size: 0.89rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.plan-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: linear-gradient(130deg, var(--brand-cyan), var(--brand-green));
}

.pricing-story-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pricing-story-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(165deg, #ffffff, #f3f8ff);
    box-shadow: var(--shadow-soft);
}

.story-kicker {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #3a6fa8;
}

.pricing-story-card h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

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

.story-list li {
    color: #274f7f;
    font-size: 0.9rem;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.story-list li::before {
    content: '↗';
    color: #23985d;
    line-height: 1.1;
    font-weight: 700;
    margin-top: 1px;
}

.usecase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.usecase-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 20px;
    background: linear-gradient(170deg, #ffffff, #f2f8ff);
    box-shadow: var(--shadow-soft);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.usecase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(31, 93, 167, 0.13);
}

.usecase-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(47, 114, 190, 0.24);
    color: #235d9c;
    background: #f3f8ff;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.usecase-card h3 {
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.usecase-card p {
    color: #355c8c;
    font-size: 0.92rem;
    margin-bottom: 10px;
}

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

.usecase-list li {
    color: #234b7a;
    font-size: 0.88rem;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.usecase-list li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: 6px;
    background: linear-gradient(130deg, var(--brand-cyan), var(--brand-green));
}

.ecom-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ecom-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    background:
        radial-gradient(220px 140px at 90% -10%, rgba(24, 135, 238, 0.16), transparent 70%),
        linear-gradient(170deg, #ffffff, #f2f8ff);
    box-shadow: var(--shadow-soft);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.ecom-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(31, 93, 167, 0.13);
}

.ecom-metric {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #e9f4ff;
    color: #1f5f9d;
    border: 1px solid rgba(35, 112, 189, 0.24);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ecom-card h3 {
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.ecom-card p {
    color: #355c8c;
    font-size: 0.92rem;
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.stack-panel {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
    min-height: 260px;
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.stack-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(31, 93, 167, 0.13);
}

.stack-panel h3 {
    font-size: clamp(1.2rem, 1.06rem + 0.48vw, 1.45rem);
    margin-bottom: 8px;
}

.stack-panel p {
    color: var(--ink-soft);
    margin-bottom: 12px;
}

.stack-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.stack-chips span,
.stack-points span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(42, 108, 181, 0.22);
    color: #27588f;
    background: #f5f9ff;
    font-size: 0.82rem;
    font-weight: 700;
}

.stack-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.cta-shell {
    border: 1px solid rgba(136, 177, 233, 0.28);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(21, 47, 84, 0.9), rgba(9, 24, 46, 0.95));
    box-shadow: var(--shadow-hard);
    padding: 46px 32px;
    text-align: center;
}

.cta-shell h2 {
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.9rem);
    margin-bottom: 12px;
}

.cta-shell p {
    max-width: 700px;
    margin: 0 auto;
    color: var(--ink-soft);
}

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

.site-footer {
    border-top: 1px solid rgba(134, 173, 226, 0.26);
    margin-top: 80px;
    padding: 44px 0 34px;
    background: rgba(3, 12, 26, 0.86);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.footer-brand p {
    color: var(--ink-soft);
    font-size: 0.92rem;
    max-width: 32ch;
    margin-top: 12px;
}

.footer-col h4 {
    font-family: 'Sora', 'Manrope', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

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

.footer-links a {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: #f7fbff;
}

.footer-bottom {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(133, 172, 224, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--ink-faint);
    font-size: 0.82rem;
}

.footer-bottom a {
    color: var(--ink-soft);
}

.content-shell {
    padding-top: 44px;
    padding-bottom: 60px;
}

.entry-card {
    border: 1px solid rgba(132, 170, 218, 0.24);
    background: rgba(10, 24, 47, 0.78);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.in {
    opacity: 1;
    transform: translateY(0);
}

@keyframes hero-glow {
    0%, 100% { opacity: 0.55; transform: translateY(0); }
    50% { opacity: 0.85; transform: translateY(-6px); }
}

@keyframes soft-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(42, 129, 210, 0); }
    50% { box-shadow: 0 0 0 5px rgba(42, 129, 210, 0.08); }
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.18s;
}

.delay-3 {
    transition-delay: 0.26s;
}

@media (max-width: 1080px) {
    .hero-grid,
    .features-grid,
    .usecase-grid,
    .ecom-grid,
    .stack-grid,
    .pricing-grid,
    .pricing-story-grid,
    .workflow-grid,
    .footer-grid,
    .logo-cloud {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-grid {
        gap: 28px;
    }

    .menu-wrap {
        gap: 16px;
    }

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

@media (max-width: 820px) {
    .container {
        width: min(var(--container), calc(100% - 30px));
    }

    .section {
        padding: 68px 0;
    }

    .nav-grid {
        grid-template-columns: 1fr auto;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .menu-wrap {
        position: absolute;
        top: calc(100% + 10px);
        left: 15px;
        right: 15px;
        z-index: 20;
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        border-radius: 18px;
        border: 1px solid rgba(133, 171, 222, 0.4);
        background: rgba(6, 18, 35, 0.96);
        box-shadow: var(--shadow-hard);
    }

    .menu-wrap.open {
        display: flex;
    }

    .primary-menu {
        flex-direction: column;
        align-items: stretch;
    }

    .primary-menu a {
        width: 100%;
        min-height: 42px;
        justify-content: center;
        border-radius: 12px;
        background: rgba(12, 31, 61, 0.62);
    }

    .nav-cta {
        width: 100%;
        justify-content: stretch;
    }

    .nav-cta .button {
        flex: 1;
    }

    .hero {
        padding-top: 44px;
    }

    .hero-grid,
    .features-grid,
    .usecase-grid,
    .ecom-grid,
    .stack-grid,
    .pricing-grid,
    .pricing-story-grid,
    .workflow-grid,
    .footer-grid,
    .logo-cloud,
    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .hero-actions,
    .cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    .hero-actions .button,
    .cta-actions .button {
        width: 100%;
    }

    .cta-shell {
        padding: 32px 20px;
        border-radius: 24px;
    }
}

@media (max-width: 640px) {
    .section-heading {
        margin-bottom: 30px;
    }

    .kicker {
        margin-bottom: 12px;
    }

    .hero-card {
        padding: 14px;
    }

    .entry-card {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-card::before,
    .plan-badges span {
        animation: none !important;
    }

    .feature-card,
    .price-card,
    .usecase-card,
    .ecom-card,
    .stack-panel {
        transition: none !important;
    }
}

/* =========================================
   Light Mode Overrides (Default)
   ========================================= */
:root {
    --bg: #eef5ff;
    --bg-soft: #f7fbff;
    --surface: #ffffff;
    --surface-2: #eef4ff;
    --line: rgba(24, 80, 152, 0.18);
    --line-strong: rgba(24, 80, 152, 0.32);
    --ink: #0f2343;
    --ink-soft: #35557f;
    --ink-faint: #5c7aa3;

    --brand-blue: #0d78f2;
    --brand-cyan: #1fb8cc;
    --brand-green: #58cc7d;
    --brand-deep: #0f4f9f;

    --shadow-soft: 0 12px 28px rgba(11, 49, 102, 0.09);
    --shadow-hard: 0 18px 42px rgba(11, 49, 102, 0.16);
}

body {
    background:
        radial-gradient(820px 540px at -4% -18%, rgba(63, 144, 255, 0.2), transparent 60%),
        radial-gradient(920px 580px at 108% -20%, rgba(86, 207, 139, 0.16), transparent 62%),
        linear-gradient(180deg, #f9fcff 0%, #f0f6ff 52%, #ecf4ff 100%);
    color: var(--ink);
}

body.lang-ar {
    direction: rtl;
    font-family: 'Tajawal', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar h4,
body.lang-ar .brand,
body.lang-ar .button,
body.lang-ar .btn {
    font-family: 'Tajawal', 'Sora', 'Manrope', sans-serif;
}

body.lang-ar .section-heading p,
body.lang-ar .hero p,
body.lang-ar .feature-card p,
body.lang-ar .plan-note,
body.lang-ar .v3-page-hero p {
    line-height: 1.9;
}

body.lang-ar .v3-timeline-item {
    border-left: 0;
    border-right: 3px solid #3f97f3;
}

body.lang-ar .menu-wrap,
body.lang-ar .hero-grid,
body.lang-ar .footer-grid,
body.lang-ar .footer-bottom {
    direction: rtl;
}

body.lang-ar .hero-actions,
body.lang-ar .cta-actions,
body.lang-ar .nav-cta {
    justify-content: flex-start;
}

.section-heading p,
.hero p,
.feature-card p,
.step-card p,
.plan-note,
.cta-shell p,
.footer-brand p,
.footer-links a,
.footer-bottom,
.kpi-card span {
    color: var(--ink-soft);
}

.kicker {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.9);
    color: #335884;
}

.button-primary,
.btn-primary {
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(13, 120, 242, 0.28);
}

.button-secondary,
.btn-secondary {
    border-color: var(--line);
    color: var(--ink);
    background: #ffffff;
}

.button-secondary:hover,
.btn-secondary:hover {
    border-color: var(--line-strong);
    background: #f2f7ff;
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    border-color: var(--line);
}

.brand {
    color: #163561;
}

.primary-menu a {
    color: #365d8b;
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
    color: #103e72;
    background: rgba(43, 128, 230, 0.12);
}

.nav-toggle {
    border-color: var(--line);
    background: #ffffff;
    color: #214775;
}

.hero h1 .accent {
    background: linear-gradient(95deg, #0d78f2 0%, #3bc67a 88%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kpi-card {
    background: #ffffff;
    border-color: var(--line);
}

.kpi-card strong {
    color: #15345f;
}

.hero-card {
    border-color: var(--line-strong);
    background: linear-gradient(165deg, #ffffff, #edf4ff);
    box-shadow: var(--shadow-hard);
}

.hero-card::before {
    background: radial-gradient(circle at center, rgba(38, 134, 247, 0.16), transparent 66%);
}

.hero-card-head {
    color: #4d709f;
}

.hero-card-head strong {
    color: #173c6a;
}

.chat-item {
    border-color: rgba(23, 93, 169, 0.2);
    background: #ffffff;
    color: #274c7a;
}

.chat-item.agent {
    border-color: rgba(51, 173, 121, 0.34);
    background: linear-gradient(125deg, rgba(210, 238, 255, 0.9), rgba(215, 246, 230, 0.92));
    color: #184d57;
}

.chat-meta {
    color: #5f7fab;
}

.ops-card {
    border-color: var(--line);
    background: #ffffff;
}

.ops-card strong {
    color: #133764;
}

.ops-card span {
    color: #5b7ca7;
}

.channel-pills span {
    border-color: var(--line);
    background: #ffffff;
    color: #2f5c8f;
}

.trust-wrap {
    border-top-color: rgba(37, 97, 173, 0.24);
    border-bottom-color: rgba(37, 97, 173, 0.24);
}

.trust-text {
    color: #5f7ea7;
}

.logo-chip {
    border-color: var(--line);
    background: #ffffff;
    color: #28507f;
}

.feature-card {
    border-color: var(--line);
    background: linear-gradient(175deg, #ffffff, #f3f8ff);
}

.feature-index,
.plan-label,
.plan-price span {
    color: #4a6f9f;
}

.workflow {
    background: linear-gradient(160deg, #f8fbff 0%, #edf4ff 100%);
    border-top-color: var(--line);
    border-bottom-color: var(--line);
}

.step-card {
    border-color: var(--line);
    background: #ffffff;
}

.price-card {
    border-color: var(--line);
    background: #ffffff;
}

.price-card.featured {
    border-color: rgba(64, 177, 122, 0.56);
    box-shadow: 0 14px 34px rgba(17, 141, 105, 0.17);
    background: linear-gradient(165deg, #f3fbff, #edf8f2);
}

.plan-list li {
    color: #1f4876;
}

.cta-shell {
    border-color: var(--line-strong);
    background: linear-gradient(145deg, #ffffff, #ebf4ff);
    box-shadow: var(--shadow-hard);
}

.site-footer {
    border-top-color: var(--line);
    background: #f5f9ff;
}

.footer-col h4 {
    color: #163b6a;
}

.footer-links a:hover,
.footer-bottom a {
    color: #1f5fa7;
}

.footer-bottom {
    border-top-color: var(--line);
}

.entry-card {
    border-color: var(--line);
    background: #ffffff;
}

@media (max-width: 820px) {
    .menu-wrap {
        border-color: var(--line-strong);
        background: rgba(255, 255, 255, 0.98);
    }

    .primary-menu a {
        background: #f4f8ff;
    }
}

/* =========================================
   Inner Pages (About/Pricing/Contact/Blog)
   ========================================= */
.v3-page-hero {
    text-align: center;
    max-width: 840px;
    margin: 0 auto;
}

.v3-page-hero h1 {
    font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
    margin-bottom: 14px;
}

.v3-page-hero p {
    color: var(--ink-soft);
    font-size: 1.05rem;
}

.v3-section-soft {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(242, 247, 255, 0.92));
}

.v3-story-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.v3-story-media {
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 24px;
    min-height: 420px;
    background:
        radial-gradient(380px 260px at 110% -10%, rgba(14, 120, 239, 0.22), transparent 58%),
        radial-gradient(320px 260px at -10% 110%, rgba(86, 207, 139, 0.18), transparent 58%),
        #ffffff;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.v3-story-stat {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px;
    background: rgba(245, 250, 255, 0.92);
}

.v3-story-stat strong {
    display: block;
    font-family: 'Sora', 'Manrope', sans-serif;
    font-size: 1.6rem;
    color: #12396a;
}

.v3-story-stat span {
    font-size: 0.86rem;
    color: #5478a7;
}

.v3-story-content {
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.v3-story-content h2 {
    font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem);
    margin-bottom: 10px;
}

.v3-story-content > p {
    color: var(--ink-soft);
}

.v3-timeline {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.v3-timeline-item {
    border-left: 3px solid #3f97f3;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4f9ff;
}

.v3-timeline-item strong {
    display: block;
    color: #145194;
    margin-bottom: 2px;
    font-size: 0.88rem;
}

.v3-timeline-item span {
    color: #3f5f8b;
    font-size: 0.9rem;
}

.v3-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.v3-value-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.v3-value-card h3 {
    font-size: 1.08rem;
    margin-bottom: 6px;
}

.v3-value-card p {
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.v3-team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.v3-person-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    text-align: center;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.v3-person-avatar {
    width: 68px;
    height: 68px;
    margin: 0 auto 10px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(130deg, #1178e8, #3cc986);
}

.v3-person-role {
    color: #30639a;
    font-size: 0.85rem;
    font-weight: 700;
}

.v3-billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #f4f9ff;
}

.v3-billing-button {
    border: 0;
    background: transparent;
    color: #4770a0;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.v3-billing-button.is-active {
    background: #ffffff;
    color: #123f73;
    box-shadow: var(--shadow-soft);
}

.v3-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.v3-pricing-grid .price-yearly {
    display: none;
}

.v3-pricing-grid.is-yearly .price-monthly {
    display: none;
}

.v3-pricing-grid.is-yearly .price-yearly {
    display: inline;
}

.v3-price-highlight {
    border-color: rgba(64, 177, 122, 0.56);
    background: linear-gradient(165deg, #f3fbff, #edf8f2);
    box-shadow: 0 14px 34px rgba(17, 141, 105, 0.17);
}

.v3-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.v3-faq-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    background: #ffffff;
}

.v3-faq-card h4 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.v3-faq-card p {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.v3-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 14px;
}

.v3-contact-aside {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 24px;
    background: linear-gradient(165deg, #edf6ff, #f7fcff);
}

.v3-contact-aside p {
    color: var(--ink-soft);
}

.v3-contact-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: grid;
    gap: 10px;
}

.v3-contact-list li {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: #ffffff;
}

.v3-contact-list strong {
    display: block;
    color: #124073;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.v3-contact-list span {
    color: #3f618c;
    font-size: 0.9rem;
}

.v3-contact-main {
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 24px;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.v3-form-notice {
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    padding: 14px;
    background: #f7fbff;
    color: #2d5688;
    font-size: 0.92rem;
}

.v3-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.v3-field {
    margin-bottom: 12px;
}

.v3-field label {
    display: block;
    margin-bottom: 6px;
    color: #2e5687;
    font-size: 0.86rem;
    font-weight: 700;
}

.v3-field input,
.v3-field textarea,
.v3-field select {
    width: 100%;
    border: 1px solid rgba(37, 93, 166, 0.23);
    border-radius: 12px;
    padding: 11px 12px;
    font: inherit;
    color: #113a69;
    background: #f8fbff;
}

.v3-field textarea {
    min-height: 122px;
    resize: vertical;
}

.v3-contact-main .fluentform .ff-el-group {
    margin-bottom: 12px;
}

.v3-contact-main .fluentform .ff-el-input--label label,
.v3-contact-main .fluentform .ff-el-form-control label {
    display: block;
    margin-bottom: 6px;
    color: #2e5687;
    font-size: 0.86rem;
    font-weight: 700;
}

.v3-contact-main .fluentform input[type='text'],
.v3-contact-main .fluentform input[type='email'],
.v3-contact-main .fluentform input[type='tel'],
.v3-contact-main .fluentform input[type='number'],
.v3-contact-main .fluentform textarea,
.v3-contact-main .fluentform select {
    width: 100%;
    border: 1px solid rgba(37, 93, 166, 0.23);
    border-radius: 12px;
    padding: 11px 12px;
    font: inherit;
    color: #113a69;
    background: #f8fbff;
}

.v3-contact-main .fluentform textarea {
    min-height: 130px;
    resize: vertical;
}

.v3-contact-main .fluentform .ff-btn-submit,
.v3-contact-main .fluentform .ff-btn.ff-btn-submit {
    border: 0;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 0.93rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: linear-gradient(118deg, var(--brand-blue), var(--brand-cyan) 46%, var(--brand-green));
    color: #041222;
    box-shadow: 0 12px 28px rgba(32, 162, 255, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.v3-contact-main .fluentform .ff-btn-submit:hover,
.v3-contact-main .fluentform .ff-btn.ff-btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(32, 162, 255, 0.48);
}

.v3-contact-main .fluentform .ff_errors_list,
.v3-contact-main .fluentform .error {
    color: #c92f2f;
    font-size: 0.82rem;
}

.v3-articles-intro {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 14px;
    background: linear-gradient(170deg, #ffffff, #f2f8ff);
}

.v3-articles-intro h2 {
    font-size: clamp(1.2rem, 1.08rem + 0.52vw, 1.55rem);
    margin-bottom: 8px;
}

.v3-articles-intro p {
    color: var(--ink-soft);
    margin-bottom: 12px;
}

.v3-legal-shell {
    width: min(940px, 100%);
}

.v3-legal-card {
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: clamp(20px, 2.8vw, 34px);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.v3-legal-card h2 {
    font-size: clamp(1.3rem, 1.12rem + 0.68vw, 1.7rem);
    margin-bottom: 10px;
}

.v3-legal-card h3 {
    font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
    margin: 22px 0 8px;
}

.v3-legal-card p {
    color: var(--ink-soft);
}

.v3-legal-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 7px;
    color: var(--ink-soft);
}

.v3-legal-list li::marker {
    color: #2f79d7;
}

body.lang-ar .v3-legal-list {
    padding-left: 0;
    padding-right: 18px;
}

.v3-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.v3-blog-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.v3-blog-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-hard);
}

.v3-blog-thumb {
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(145deg, #eef6ff, #dcecff);
}

.v3-blog-body {
    padding: 16px;
}

.v3-blog-meta {
    color: #5f7ea7;
    font-size: 0.81rem;
    margin-bottom: 7px;
}

.v3-blog-body h3 {
    font-size: 1.08rem;
    margin-bottom: 6px;
}

.v3-blog-body p {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.v3-pagination {
    margin-top: 28px;
    text-align: center;
}

.v3-pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    gap: 6px;
}

.v3-pagination .page-numbers {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #ffffff;
    color: #2c5b8f;
    font-size: 0.86rem;
    font-weight: 700;
}

.v3-pagination .page-numbers.current,
.v3-pagination .page-numbers:hover {
    color: #ffffff;
    border-color: #1d6fd1;
    background: #1d6fd1;
}

@media (max-width: 1080px) {
    .v3-values-grid,
    .v3-pricing-grid,
    .v3-blog-grid,
    .v3-team-grid,
    .v3-faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .v3-story-grid,
    .v3-contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .v3-values-grid,
    .v3-pricing-grid,
    .v3-blog-grid,
    .v3-team-grid,
    .v3-faq-grid,
    .v3-form-grid {
        grid-template-columns: 1fr;
    }
}