/* ============ DAIM — AI AGENT PLATFORM ============ */
/* ============ DESIGN TOKENS ============ */
:root {
    /* Brand Colors */
    --brand: #1060e0;
    --brand-dark: #0a4cb8;
    --brand-light: #3a8bf0;
    --cyan: #00d0e0;
    --cyan-dark: #00a8b8;
    --cyan-light: #10c0f0;
    --accent: #00d0e0;
    --gradient: linear-gradient(135deg, #1060e0, #00d0e0);
    --gradient-soft: linear-gradient(135deg, rgba(16, 96, 224, .08), rgba(0, 208, 224, .08));

    /* Light Mode */
    --bg: #f7f9fc;
    --bg-alt: #eef2f8;
    --bg-card: #ffffff;
    --bg-glass: rgba(255, 255, 255, .72);
    --text: #1a2332;
    --text-soft: #4a5668;
    --text-muted: #8a94a6;
    --border: rgba(16, 96, 224, .1);
    --border-soft: rgba(16, 30, 50, .08);
    --shadow-sm: 0 2px 12px rgba(16, 30, 50, .06);
    --shadow-md: 0 8px 30px rgba(16, 30, 50, .08);
    --shadow-lg: 0 20px 60px rgba(16, 30, 50, .1);
    --shadow-brand: 0 12px 36px rgba(16, 96, 224, .18);

    /* Fonts */
    --font-display: 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-ar: 'Noto Kufi Arabic', system-ui, sans-serif;

    /* Layout */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --container: 1200px;
    --transition: .3s cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"] {
    --bg: #0a0e1a;
    --bg-alt: #0f1422;
    --bg-card: #141a2a;
    --bg-glass: rgba(20, 26, 42, .72);
    --text: #e8edf6;
    --text-soft: #b4c0d4;
    --text-muted: #6a7a92;
    --border: rgba(0, 208, 224, .12);
    --border-soft: rgba(255, 255, 255, .06);
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .2);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, .25);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .3);
    --shadow-brand: 0 12px 36px rgba(16, 96, 224, .3);
}

html[dir="rtl"] {
    --font-display: 'Noto Kufi Arabic', system-ui, sans-serif;
    --font-body: 'Noto Kufi Arabic', system-ui, sans-serif;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    overflow-x: hidden;
    transition: background .4s ease, color .4s ease;
}

body.is-loading {
    overflow: hidden;
}

/* Page scrollbar — brand colors, native size & position */
html {
    scrollbar-width: auto;
    scrollbar-color: rgba(16, 96, 224, .55) rgba(16, 96, 224, .07);
}

html::-webkit-scrollbar {
    width: 17px;
}

html::-webkit-scrollbar-track {
    background: rgba(16, 96, 224, .07);
}

html::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border: 4px solid transparent;
    background:
        linear-gradient(180deg, rgba(16, 96, 224, .6), rgba(0, 208, 224, .6)) padding-box;
    min-height: 48px;
}

html::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, #1060e0, #00d0e0) padding-box;
}

html::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

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

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

.theme-logo--dark {
    display: none;
}

[data-theme="dark"] .theme-logo--light {
    display: none;
}

[data-theme="dark"] .theme-logo--dark {
    display: block;
}

ul {
    list-style: none;
}

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

input,
textarea,
select {
    font-family: inherit;
}

::selection {
    background: rgba(16, 96, 224, .2);
    color: var(--text);
}

/* ============ CONTAINER ============ */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============ PRELOADER ============ */
.site-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: var(--bg);
    transition: opacity .6s ease, visibility .6s ease;
}

.site-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.site-preloader__content {
    display: grid;
    place-items: center;
    gap: 18px;
}

.site-preloader__mark {
    position: relative;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
}

.site-preloader__orbit {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-top-color: var(--brand);
    border-right-color: var(--cyan);
    border-radius: 50%;
    animation: preloaderSpin 1s linear infinite;
}

.site-preloader__mark svg {
    width: 38px;
    height: 38px;
    fill: none;
    stroke: url(#preloaderGrad);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-preloader__brand {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--text);
}

.site-preloader__text {
    font-size: .72rem;
    color: var(--text-muted);
}

.site-preloader__progress {
    width: 160px;
    height: 3px;
    border-radius: 3px;
    background: var(--border-soft);
    overflow: hidden;
}

.site-preloader__progress span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--gradient);
    animation: preloaderProgress 1.4s ease-in-out forwards;
}

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

@keyframes preloaderProgress {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* ============ AI BACKGROUND PATTERN ============ */
.ai-pattern {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ai-pattern__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
}

.ai-pattern__backdrop path {
    fill: none;
    stroke: var(--brand);
    stroke-width: 1;
    opacity: .06;
}

[data-theme="dark"] .ai-pattern__backdrop path {
    opacity: .1;
    stroke: var(--cyan);
}

.ai-doodle {
    position: absolute;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-glass);
    backdrop-filter: blur(8px);
    color: var(--brand);
    opacity: .35;
    animation: aiFloat 14s ease-in-out infinite;
}

.ai-doodle svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[data-theme="dark"] .ai-doodle {
    opacity: .25;
}

.ai-doodle--1 {
    top: 12%;
    left: 6%;
    animation-delay: 0s;
}

.ai-doodle--2 {
    top: 22%;
    right: 8%;
    animation-delay: -2s;
}

.ai-doodle--3 {
    top: 48%;
    left: 4%;
    animation-delay: -4s;
}

.ai-doodle--4 {
    top: 62%;
    right: 6%;
    animation-delay: -6s;
}

.ai-doodle--5 {
    top: 78%;
    left: 8%;
    animation-delay: -8s;
}

.ai-doodle--6 {
    top: 36%;
    right: 4%;
    animation-delay: -10s;
}

.ai-doodle--7 {
    top: 88%;
    right: 12%;
    animation-delay: -12s;
}

.ai-doodle--8 {
    top: 8%;
    left: 38%;
    animation-delay: -3s;
}

@keyframes aiFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    25% {
        transform: translateY(-14px) rotate(2deg);
    }

    50% {
        transform: translateY(-6px) rotate(-1deg);
    }

    75% {
        transform: translateY(-18px) rotate(1deg);
    }
}

.ai-pattern__dot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    opacity: .15;
    box-shadow: 0 0 12px var(--cyan);
}

.ai-pattern__dot--1 {
    top: 18%;
    left: 28%;
}

.ai-pattern__dot--2 {
    top: 55%;
    right: 22%;
}

.ai-pattern__dot--3 {
    top: 75%;
    left: 48%;
}

/* ============ NAVBAR ============ */
.navbar {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 1180px;
    z-index: 1000;
    border-radius: 18px;
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.navbar.scrolled {
    box-shadow: var(--shadow-md);
    border-color: var(--border);
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 18px;
}

.nav__logo img {
    height: 36px;
    width: auto;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav__links a {
    padding: 8px 14px;
    border-radius: 10px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-soft);
    transition: all var(--transition);
}

.nav__links a:hover {
    color: var(--text);
    background: var(--border-soft);
}

.nav__links a.nav__link--active {
    color: var(--brand);
    background: rgba(16, 96, 224, .08);
}

[data-theme="dark"] .nav__links a.nav__link--active {
    color: var(--cyan);
    background: rgba(0, 208, 224, .08);
}

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

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

.nav__lang,
.nav__theme {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--text-soft);
    border: 1px solid var(--border-soft);
    background: var(--bg-card);
    transition: all var(--transition);
}

.nav__lang:hover,
.nav__theme:hover {
    color: var(--brand);
    border-color: var(--border);
}

.nav__lang {
    font-size: .72rem;
    font-weight: 700;
    gap: 4px;
}

.nav__lang svg {
    opacity: .7;
}

.nav__theme-icon--sun {
    display: none;
}

.nav__theme-icon--moon {
    display: block;
}

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

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

.nav__burger {
    display: none;
    width: 38px;
    height: 38px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
}

.nav__burger span {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: all var(--transition);
}

.nav__burger.open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav__burger.open span:nth-child(2) {
    opacity: 0;
}

.nav__burger.open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ============ BUTTONS ============ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: .85rem;
    font-weight: 700;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn--primary {
    color: #fff;
    background: var(--gradient);
    box-shadow: var(--shadow-brand);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(16, 96, 224, .28);
}

.btn--ghost {
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.btn--ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.btn--lg {
    padding: 14px 28px;
    font-size: .9rem;
    min-height: 52px;
}

.btn--block {
    width: 100%;
}

/* ============ SECTION HEAD ============ */
.section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}

.section__label {
    display: inline-block;
    margin-bottom: 14px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--brand);
}

[data-theme="dark"] .section__label {
    color: var(--cyan);
}

.section__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--text);
}

.section__desc {
    margin-top: 16px;
    font-size: 1rem;
    color: var(--text-soft);
    line-height: 1.7;
}

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

/* ============ HERO ============ */
.hero {
    position: relative;
    padding: 140px 0 80px;
    z-index: 1;
}

.hero__aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.hero__aurora-band {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .25;
}

.hero__aurora-band--1 {
    width: 500px;
    height: 500px;
    top: -100px;
    left: -100px;
    background: var(--brand);
}

.hero__aurora-band--2 {
    width: 400px;
    height: 400px;
    top: 30%;
    right: -80px;
    background: var(--cyan);
}

.hero__aurora-band--3 {
    width: 350px;
    height: 350px;
    bottom: -100px;
    left: 30%;
    background: var(--cyan-light);
    opacity: .15;
}

.hero__inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
}

.hero__content {
    max-width: 580px;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 100px;
    background: var(--gradient-soft);
    border: 1px solid var(--border);
    font-size: .72rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 24px;
}

[data-theme="dark"] .hero__badge {
    color: var(--cyan);
}

.hero__badge span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22b87a;
    box-shadow: 0 0 0 4px rgba(34, 184, 122, .12);
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 4px rgba(34, 184, 122, .12);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(34, 184, 122, .04);
    }
}

.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.04em;
    color: var(--text);
}

.hero__desc {
    margin-top: 22px;
    font-size: 1.1rem;
    color: var(--text-soft);
    line-height: 1.7;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.hero__cta-note {
    margin-top: 12px;
    font-size: .78rem;
    color: var(--text-muted);
}

.hero__stats {
    display: flex;
    gap: 32px;
    margin-top: 48px;
}

.hero__stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
}

.hero__stat span {
    font-size: .78rem;
    color: var(--text-muted);
}

/* Hero Visual — Chat Preview */
.hero__visual {
    position: relative;
}

.hero__chat {
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.hero__chat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-alt);
}

.hero__chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--gradient);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
}

.hero__chat-info strong {
    display: block;
    font-size: .85rem;
    color: var(--text);
}

.hero__chat-info small {
    font-size: .7rem;
    color: #22b87a;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hero__chat-info small::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22b87a;
}

.hero__chat-body {
    padding: 20px;
    display: grid;
    gap: 14px;
    min-height: 320px;
}

.hero__msg {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: .82rem;
    line-height: 1.6;
}

.hero__msg--in {
    background: var(--bg-alt);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

.hero__msg--out {
    justify-self: end;
    background: var(--gradient);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.hero__msg--typing {
    display: flex;
    gap: 4px;
    align-items: center;
}

.hero__msg--typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typingDot 1.4s ease-in-out infinite;
}

.hero__msg--typing span:nth-child(2) {
    animation-delay: .2s;
}

.hero__msg--typing span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes typingDot {

    0%,
    60%,
    100% {
        opacity: .3;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

.hero__chat-foot {
    padding: 12px 20px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero__chat-input {
    flex: 1;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    padding: 0 14px;
    font-size: .78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.hero__chat-send {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--gradient);
    color: #fff;
    display: grid;
    place-items: center;
}

/* ============ TRUSTED BY ============ */
.trusted {
    padding: 40px 0;
    position: relative;
    z-index: 1;
}

.trusted__inner {
    text-align: center;
}

.trusted__label {
    font-size: .75rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.trusted__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 32px;
}

.trusted__logos span {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: .6;
    transition: opacity var(--transition);
}

.trusted__logos span:hover {
    opacity: 1;
}

/* ============ FEATURES ============ */
.features {
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

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

.feature-card {
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

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

.feature-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    background: var(--gradient-soft);
    color: var(--brand);
}

[data-theme="dark"] .feature-card__icon {
    color: var(--cyan);
}

.feature-card__icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-card h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text);
}

.feature-card p {
    font-size: .88rem;
    color: var(--text-soft);
    line-height: 1.7;
}

/* ============ CHANNELS ============ */
.channels {
    padding: 100px 0;
    position: relative;
    z-index: 1;
    background: var(--bg-alt);
}

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

.channel-card {
    padding: 28px 20px;
    border-radius: var(--radius-lg);
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

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

.channel-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    color: #fff;
}

.channel-card__icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.channel-card--whatsapp .channel-card__icon {
    background: #25d366;
}

.channel-card--website .channel-card__icon {
    background: var(--brand);
}

.channel-card--instagram .channel-card__icon {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.channel-card--facebook .channel-card__icon {
    background: #1877f2;
}

.channel-card--messenger .channel-card__icon {
    background: linear-gradient(135deg, #00b2ff, #006aff);
}

.channel-card h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.channel-card p {
    font-size: .76rem;
    color: var(--text-muted);
}

/* ============ KNOWLEDGE BASE ============ */
.knowledge {
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

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

.knowledge__visual {
    border-radius: var(--radius-lg);
    padding: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.kb-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 10px;
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    transition: all var(--transition);
}

.kb-item:hover {
    border-color: var(--border);
    transform: translateX(4px);
}

.kb-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--gradient-soft);
    color: var(--brand);
    flex-shrink: 0;
}

[data-theme="dark"] .kb-item__icon {
    color: var(--cyan);
}

.kb-item__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.kb-item__body strong {
    display: block;
    font-size: .85rem;
    color: var(--text);
}

.kb-item__body small {
    font-size: .72rem;
    color: var(--text-muted);
}

.kb-item__badge {
    margin-inline-start: auto;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: .62rem;
    font-weight: 700;
    background: rgba(34, 184, 122, .1);
    color: #22b87a;
}

.knowledge__content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--text);
    margin-bottom: 18px;
}

.knowledge__content p {
    font-size: 1rem;
    color: var(--text-soft);
    line-height: 1.7;
    margin-bottom: 24px;
}

.knowledge__list {
    display: grid;
    gap: 14px;
}

.knowledge__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: .9rem;
    color: var(--text-soft);
}

.knowledge__list li::before {
    content: '✓';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .6rem;
    color: #fff;
    background: var(--gradient);
    margin-top: 2px;
}

/* ============ HOW IT WORKS ============ */
.howitworks {
    padding: 100px 0;
    position: relative;
    z-index: 1;
    background: var(--bg-alt);
}

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

.step-card {
    text-align: center;
    position: relative;
}

.step-card__num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    background: var(--gradient);
    box-shadow: var(--shadow-brand);
}

.step-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.step-card p {
    font-size: .82rem;
    color: var(--text-soft);
    line-height: 1.6;
}

/* ============ IMPACT ============ */
.impact {
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

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

.impact-card {
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

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

.impact-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    background: var(--gradient-soft);
    color: var(--brand);
}

[data-theme="dark"] .impact-card__icon {
    color: var(--cyan);
}

.impact-card__icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.impact-card strong {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
}

.impact-card span {
    font-size: .82rem;
    color: var(--text-soft);
}

/* ============ PRICING ============ */
.pricing {
    padding: 100px 0;
    position: relative;
    z-index: 1;
    background: var(--bg-alt);
}

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.price-card {
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    position: relative;
}

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

.price-card--popular {
    border-color: var(--brand);
    box-shadow: var(--shadow-brand);
}

[data-theme="dark"] .price-card--popular {
    border-color: var(--cyan);
}

.price-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    border-radius: 100px;
    font-size: .68rem;
    font-weight: 800;
    color: #fff;
    background: var(--gradient);
    white-space: nowrap;
}

.price-card__head h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
}

.price-card__head p {
    font-size: .82rem;
    color: var(--text-muted);
    margin-top: 6px;
    min-height: 40px;
}

.price-card__offer {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 20px 0 5px;
}

.price-card__offer del {
    color: var(--text-muted);
    font-size: .82rem;
    text-decoration: line-through;
    text-decoration-color: #e0526f;
}

.price-card__offer span {
    padding: 4px 8px;
    border-radius: 7px;
    font-size: .62rem;
    font-weight: 800;
    color: #22b87a;
    background: rgba(34, 184, 122, .1);
    border: 1px solid rgba(34, 184, 122, .15);
}

.price-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 10px 0 24px;
}

.price-card__amount {
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text);
}

.price-card__currency {
    font-size: .9rem;
    color: var(--text-muted);
}

.price-card__features {
    display: grid;
    gap: 12px;
    margin-bottom: 28px;
}

.price-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .84rem;
    color: var(--text-soft);
}

.price-card__features li::before {
    content: '✓';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .55rem;
    color: #fff;
    background: var(--gradient);
    margin-top: 2px;
}

.price-card__features li.muted {
    color: var(--text-muted);
}

.price-card__features li.muted::before {
    background: var(--border-soft);
    color: var(--text-muted);
}

.price-card .btn--block {
    min-height: 48px;
    border-radius: 12px;
}

/* Pricing Offer Countdown */
.pricing-offer {
    width: min(100%, 780px);
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin: -20px auto 48px;
    padding: 15px 18px 15px 22px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-card);
    box-shadow: var(--shadow-md);
}

.pricing-offer__copy {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.pricing-offer__icon {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: var(--gradient);
    box-shadow: var(--shadow-brand);
}

.pricing-offer__icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.pricing-offer__copy>div {
    display: grid;
    gap: 4px;
}

.pricing-offer__copy strong {
    color: var(--text);
    font-size: .88rem;
    font-weight: 850;
}

.pricing-offer__copy small {
    color: var(--text-muted);
    font-size: .65rem;
}

.pricing-offer__timer {
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.pricing-offer__timer>div {
    width: 55px;
    min-height: 58px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-alt);
}

.pricing-offer__timer b {
    color: var(--brand);
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

[data-theme="dark"] .pricing-offer__timer b {
    color: var(--cyan);
}

.pricing-offer__timer span {
    color: var(--text-muted);
    font-size: .5rem;
    font-weight: 650;
}

.pricing-offer__timer i {
    color: var(--text-muted);
    font-style: normal;
    font-size: .9rem;
    font-weight: 800;
}

.pricing-offer__seconds {
    border-color: rgba(236, 91, 101, .18) !important;
    background: rgba(255, 243, 244, .9) !important;
}

[data-theme="dark"] .pricing-offer__seconds {
    background: rgba(236, 91, 101, .06) !important;
}

.pricing-offer__seconds b {
    color: #e25263 !important;
}

html[dir="rtl"] .pricing-offer {
    padding: 15px 22px 15px 18px;
}

html[dir="rtl"] .pricing-offer__copy {
    text-align: right;
}

/* ============ TESTIMONIALS ============ */
.testimonials {
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

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

.testimonial-card {
    padding: 32px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

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

.testimonial-card__stars {
    color: #f5a623;
    font-size: 1rem;
    margin-bottom: 16px;
    letter-spacing: 2px;
}

.testimonial-card p {
    font-size: .9rem;
    color: var(--text-soft);
    line-height: 1.7;
    margin-bottom: 24px;
}

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
}

.testimonial-card__author strong {
    display: block;
    font-size: .85rem;
    color: var(--text);
}

.testimonial-card__author span {
    font-size: .72rem;
    color: var(--text-muted);
}

/* ============ CTA ============ */
.cta-section {
    padding: 100px 0;
    position: relative;
    z-index: 1;
    background: var(--bg-alt);
}

.cta-launch {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

.cta-launch__content {
    padding: clamp(36px, 5vw, 64px);
}

.cta-launch__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--brand);
}

[data-theme="dark"] .cta-launch__eyebrow {
    color: var(--cyan);
}

.cta-launch__eyebrow>span:first-child {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22b87a;
    box-shadow: 0 0 0 5px rgba(34, 184, 122, .08);
    animation: dotPulse 2s ease-in-out infinite;
}

.cta-launch__content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--text);
    margin-bottom: 16px;
}

.cta-launch__content p {
    color: var(--text-soft);
    font-size: .95rem;
    line-height: 1.7;
    margin-bottom: 24px;
}

.cta-launch__benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 28px;
}

.cta-launch__benefits span {
    position: relative;
    padding-inline-start: 19px;
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 700;
}

.cta-launch__benefits span::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 14px;
    height: 14px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--gradient);
    font-size: .47rem;
}

.cta-launch__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cta-launch__visual {
    position: relative;
    min-height: 400px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    background: var(--gradient);
}

.cta-launch__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .15;
    background-image: radial-gradient(circle, #fff 1px, transparent 1.5px);
    background-size: 25px 25px;
    -webkit-mask-image: radial-gradient(circle at center, #000, transparent 76%);
    mask-image: radial-gradient(circle at center, #000, transparent 76%);
}

.cta-launch__steps {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
}

.cta-launch__steps>div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
}

.cta-launch__steps>div>span {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 800;
}

.cta-launch__steps strong {
    color: #fff;
    font-size: .78rem;
}

.cta-launch__steps small {
    color: rgba(255, 255, 255, .7);
    font-size: .59rem;
}

.cta-launch__visual-label {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, .8);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ============ FOOTER ============ */
.footer {
    padding: 72px 0 26px;
    position: relative;
    z-index: 1;
    background: linear-gradient(118deg, #07152d 0%, #08213a 56%, #062b3a 100%);
    color: rgba(255, 255, 255, .7);
    overflow: hidden;
}

[data-theme="dark"] .footer {
    background: linear-gradient(118deg, #050d1b 0%, #07182c 56%, #052530 100%);
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 640px 320px at 24% 0%, rgba(16, 96, 224, .13), transparent 62%),
        radial-gradient(ellipse 520px 260px at 86% 100%, rgba(0, 208, 224, .09), transparent 64%);
}

.footer>.container {
    position: relative;
    z-index: 2;
}

.footer__main {
    display: grid;
    grid-template-columns: minmax(300px, .92fr) minmax(0, 1.35fr);
    gap: clamp(54px, 8vw, 112px);
    padding: 0 0 54px;
}

.footer__brand {
    max-width: 430px;
}

.footer__logo {
    height: 50px;
    margin-bottom: 22px;
    filter: none;
}

html[dir="rtl"] .footer__logo {
    margin-bottom: 22px;
}

.footer__brand>p {
    max-width: 420px;
    margin-bottom: 28px;
    color: rgba(255, 255, 255, .64);
    font-size: .9rem;
    line-height: 1.85;
}

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

.footer__contact {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 315px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    color: #f4f1ff;
    background: rgba(255, 255, 255, .035);
    transition: all var(--transition);
}

.footer__contact>span:first-child {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan-light);
    background: rgba(0, 208, 224, .14);
}

.footer__contact svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.footer__contact b {
    display: grid;
    gap: 3px;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
}

.footer__contact small {
    color: rgba(255, 255, 255, .38);
    font-size: .62rem;
    font-weight: 600;
}

.footer__contact:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 208, 224, .32);
    background: rgba(0, 208, 224, .09);
}

.footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 52px);
}

.footer__col h4 {
    margin-bottom: 22px;
    padding-bottom: 10px;
    color: #fff;
    font-size: .9rem;
    position: relative;
}

.footer__col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--cyan);
}

html[dir="rtl"] .footer__col h4::after {
    left: auto;
    right: 0;
}

.footer__col a {
    display: block;
    width: fit-content;
    margin-bottom: 13px;
    color: rgba(255, 255, 255, .59);
    font-size: .82rem;
    transition: all var(--transition);
}

.footer__col a:hover {
    color: var(--cyan-light);
    transform: translateX(3px);
}

html[dir="rtl"] .footer__col a:hover {
    transform: translateX(-3px);
}

.footer__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    min-height: 70px;
}

.footer__bottom>p {
    justify-self: start;
    margin: 0;
    color: rgba(255, 255, 255, .46);
    font-size: .74rem;
}

.footer__made {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .46);
    font-size: .7rem;
    white-space: nowrap;
}

.footer__made>span:first-child {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22b87a;
    box-shadow: 0 0 0 5px rgba(34, 184, 122, .07);
}

.footer__social {
    justify-self: end;
    display: flex;
    gap: 8px;
}

.footer__social a {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .025);
    transition: all var(--transition);
}

.footer__social a:hover {
    color: #fff;
    border-color: rgba(0, 208, 224, .45);
    background: var(--brand);
    transform: translateY(-3px);
}

.footer__social svg {
    fill: currentColor;
}

.footer__wordmark {
    position: absolute;
    z-index: 0;
    inset: auto auto -.16em 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, .032);
    font-family: var(--font-display);
    font-size: clamp(8rem, 22vw, 22rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.07em;
    pointer-events: none;
    white-space: nowrap;
}

html[dir="rtl"] .footer__contact {
    text-align: right;
}

html[dir="rtl"] .footer__bottom>p {
    justify-self: start;
}

html[dir="rtl"] .footer__social {
    justify-self: end;
}

/* ============ PAGE HERO ============ */
.page-hero {
    padding: 140px 0 80px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.page-hero__inner {
    max-width: 760px;
    margin: 0 auto;
}

.page-hero__label {
    display: inline-block;
    margin-bottom: 14px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--brand);
}

[data-theme="dark"] .page-hero__label {
    color: var(--cyan);
}

.page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.04em;
    color: var(--text);
}

.page-hero__desc {
    margin: 20px auto 0;
    max-width: 600px;
    font-size: 1.05rem;
    color: var(--text-soft);
    line-height: 1.7;
}

.page-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
}

/* ============ SCROLL REVEAL ============ */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991.98px) {
    .hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hero__visual {
        max-width: 480px;
        margin: 0 auto;
    }

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

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

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

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

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

    .pricing__grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }

    .testimonials__grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    .cta-launch {
        grid-template-columns: 1fr;
    }

    .cta-launch__visual {
        min-height: 300px;
    }

    .footer__main {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .footer__brand {
        max-width: none;
    }

    .footer__contacts {
        grid-template-columns: repeat(2, minmax(0, 280px));
    }

    .footer__contact {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .nav__links {
        position: fixed;
        top: 80px;
        left: 16px;
        right: 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 16px;
        border-radius: 18px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition);
    }

    .nav__links.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav__links a {
        padding: 12px 14px;
    }

    .nav__burger {
        display: flex;
    }

    .nav__controls .btn {
        display: none;
    }

    .hero {
        padding: 120px 0 60px;
    }

    .hero__stats {
        gap: 20px;
    }

    .hero__stat strong {
        font-size: 1.4rem;
    }

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

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

    .howitworks__steps {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }

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

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

    .pricing-offer {
        flex-direction: column;
        gap: 15px;
        padding: 17px;
    }

    .pricing-offer__copy {
        width: 100%;
        justify-content: center;
    }

    .pricing-offer__timer {
        width: 100%;
        justify-content: center;
    }

    .footer {
        padding: 34px 0 18px;
    }

    .footer__main {
        gap: 24px;
        padding-bottom: 28px;
    }

    .footer__brand {
        padding: 25px 20px 20px;
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: 22px;
        text-align: center;
        background: linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(16, 96, 224, .055));
    }

    html[dir="rtl"] .footer__brand {
        text-align: center;
    }

    .footer__logo {
        height: 44px;
        margin: 0 auto 17px;
    }

    html[dir="rtl"] .footer__logo {
        margin: 0 auto 17px;
    }

    .footer__brand>p {
        margin: 0 auto 21px;
        font-size: .8rem;
    }

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

    .footer__contact {
        min-width: 0;
        max-width: none;
        gap: 7px;
        padding: 8px;
        text-align: start;
    }

    .footer__contact>span:first-child {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        border-radius: 9px;
    }

    .footer__contact b {
        min-width: 0;
        font-size: .66rem;
    }

    .footer__contact small {
        font-size: .55rem;
    }

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

    .footer__nav .footer__col {
        min-height: 190px;
        padding: 18px 16px 12px;
        border: 1px solid rgba(255, 255, 255, .075);
        border-radius: 17px;
        background: rgba(255, 255, 255, .028);
    }

    .footer__nav .footer__col:last-child {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .footer__bottom {
        grid-template-columns: 1fr;
        gap: 15px;
        min-height: 0;
        padding: 22px 12px 0;
    }

    .footer__bottom>p,
    .footer__made,
    .footer__social,
    html[dir="rtl"] .footer__bottom>p,
    html[dir="rtl"] .footer__social {
        justify-self: center;
    }

    .footer__made {
        order: -1;
    }

    .footer__wordmark {
        inset: auto auto -.13em 50%;
        font-size: 30vw;
        opacity: 1;
        transform: translateX(-50%);
    }
}

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

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

    .footer__nav .footer__col:last-child {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ============ SKILLS SECTION (Feature cards with visual demos) ============ */
.skills {
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

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

.skill-card {
    padding: 36px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
}

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

.skill-card__content {
    min-width: 0;
}

.skill-card__num {
    font-family: var(--font-display);
    font-size: .72rem;
    font-weight: 800;
    color: var(--brand);
    opacity: .4;
}

[data-theme="dark"] .skill-card__num {
    color: var(--cyan);
}

.skill-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--text);
    margin: 8px 0 12px;
}

.skill-card p {
    font-size: .88rem;
    color: var(--text-soft);
    line-height: 1.7;
}

.skill-card__demo {
    width: 200px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    border-radius: var(--radius);
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    min-height: 160px;
}

.skill-card__demo svg {
    width: 100%;
    height: auto;
    max-height: 120px;
}

/* Skill demo: unified inbox */
.demo-inbox {
    display: grid;
    gap: 6px;
    width: 100%;
}

.demo-inbox__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}

.demo-inbox__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.demo-inbox__dot--wa {
    background: #25d366;
}

.demo-inbox__dot--ig {
    background: #dc2743;
}

.demo-inbox__dot--fb {
    background: #1877f2;
}

.demo-inbox__dot--web {
    background: var(--brand);
}

.demo-inbox__text {
    font-size: .62rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-inbox__badge {
    margin-inline-start: auto;
    font-size: .5rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(34, 184, 122, .1);
    color: #22b87a;
    font-weight: 700;
}

/* Skill demo: training */
.demo-training {
    display: grid;
    gap: 8px;
    width: 100%;
}

.demo-training__tab {
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    font-size: .6rem;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}

.demo-training__tab strong {
    color: var(--brand);
    font-size: .62rem;
}

[data-theme="dark"] .demo-training__tab strong {
    color: var(--cyan);
}

/* Skill demo: media understanding */
.demo-media {
    display: grid;
    gap: 8px;
    width: 100%;
}

.demo-media__bubble {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: .6rem;
    line-height: 1.5;
}

.demo-media__bubble--in {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    color: var(--text-soft);
    border-bottom-left-radius: 4px;
}

.demo-media__bubble--out {
    background: var(--gradient);
    color: #fff;
    border-bottom-right-radius: 4px;
    justify-self: end;
    max-width: 85%;
}

.demo-media__play {
    display: flex;
    align-items: center;
    gap: 6px;
}

.demo-media__play-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .3);
    position: relative;
}

.demo-media__play-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 30%;
    border-radius: 2px;
    background: #fff;
}

/* Skill demo: follow-up */
.demo-followup {
    display: grid;
    gap: 8px;
    width: 100%;
}

.demo-followup__tag {
    font-size: .55rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.demo-followup__tag::before {
    content: '⏱';
    font-size: .7rem;
}

/* Skill demo: attachments */
.demo-attach {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.demo-attach__chip {
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    font-size: .58rem;
    font-weight: 600;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 4px;
}

.demo-attach__chip svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Skill demo: comments */
.demo-comments {
    display: grid;
    gap: 8px;
    width: 100%;
}

.demo-comments__row {
    display: flex;
    gap: 8px;
    align-items: start;
}

.demo-comments__avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gradient);
    flex-shrink: 0;
}

.demo-comments__body {
    flex: 1;
}

.demo-comments__name {
    font-size: .58rem;
    font-weight: 700;
    color: var(--text);
}

.demo-comments__text {
    font-size: .56rem;
    color: var(--text-soft);
    margin-top: 2px;
}

.demo-comments__reply {
    font-size: .55rem;
    color: var(--brand);
    margin-top: 4px;
    font-weight: 600;
}

[data-theme="dark"] .demo-comments__reply {
    color: var(--cyan);
}

/* Skill demo: sentiment */
.demo-sentiment {
    display: grid;
    gap: 8px;
    width: 100%;
}

.demo-sentiment__alert {
    padding: 10px;
    border-radius: 10px;
    background: rgba(236, 91, 101, .08);
    border: 1px solid rgba(236, 91, 101, .2);
    display: flex;
    align-items: center;
    gap: 8px;
}

.demo-sentiment__icon {
    font-size: 1rem;
}

.demo-sentiment__text {
    font-size: .58rem;
    color: #e25263;
    font-weight: 600;
}

/* Skill demo: control */
.demo-control {
    display: grid;
    gap: 6px;
    width: 100%;
}

.demo-control__row {
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    font-size: .6rem;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}

.demo-control__toggle {
    width: 28px;
    height: 16px;
    border-radius: 10px;
    background: var(--gradient);
    position: relative;
    flex-shrink: 0;
}

.demo-control__toggle::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
}

/* Skill demo: speed */
.demo-speed {
    text-align: center;
    width: 100%;
}

.demo-speed__num {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.demo-speed__label {
    font-size: .62rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ============ CRM / DASHBOARD SECTION ============ */
.crm-section {
    padding: 100px 0;
    position: relative;
    z-index: 1;
    background: var(--bg-alt);
}

.crm-section__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
}

.crm-section__head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.03em;
    color: var(--text);
}

.crm-section__head p {
    margin-top: 16px;
    font-size: 1rem;
    color: var(--text-soft);
    line-height: 1.7;
}

.crm-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}

.crm-feature {
    padding: 28px;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

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

.crm-feature__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    background: var(--gradient-soft);
    color: var(--brand);
}

[data-theme="dark"] .crm-feature__icon {
    color: var(--cyan);
}

.crm-feature__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.crm-feature h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.crm-feature p {
    font-size: .85rem;
    color: var(--text-soft);
    line-height: 1.7;
}

/* CRM Dashboard mockup */
.crm-dashboard {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.crm-dashboard__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-alt);
}

.crm-dashboard__head span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.crm-dashboard__head span:nth-child(1) {
    background: #ff5f57;
}

.crm-dashboard__head span:nth-child(2) {
    background: #ffbd2e;
}

.crm-dashboard__head span:nth-child(3) {
    background: #28ca42;
}

.crm-dashboard__title {
    margin-inline-start: auto;
    font-size: .7rem;
    color: var(--text-muted);
}

.crm-dashboard__body {
    padding: 24px;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
}

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

.crm-stat {
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
}

.crm-stat strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
}

.crm-stat span {
    font-size: .68rem;
    color: var(--text-muted);
}

.crm-chart {
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

.crm-chart__title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}

.crm-chart__bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.crm-chart__bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: var(--gradient);
    opacity: .7;
    transition: opacity var(--transition);
}

.crm-chart__bar:hover {
    opacity: 1;
}

.crm-table {
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
}

.crm-table__title {
    font-size: .72rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
}

.crm-table__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: .62rem;
}

.crm-table__row:last-child {
    border-bottom: none;
}

.crm-table__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient);
    flex-shrink: 0;
}

.crm-table__name {
    color: var(--text);
    font-weight: 600;
}

.crm-table__status {
    margin-inline-start: auto;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .55rem;
    font-weight: 700;
}

.crm-table__status--new {
    background: rgba(16, 96, 224, .1);
    color: var(--brand);
}

.crm-table__status--active {
    background: rgba(34, 184, 122, .1);
    color: #22b87a;
}

.crm-table__status--done {
    background: rgba(138, 148, 166, .1);
    color: var(--text-muted);
}

/* ============ INTEGRATIONS ============ */
.integrations {
    padding: 80px 0;
    position: relative;
    z-index: 1;
}

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

.integration-card {
    padding: 24px 20px;
    border-radius: var(--radius);
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
}

.integration-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border);
}

.integration-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}

.integration-card h4 {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.integration-card p {
    font-size: .68rem;
    color: var(--text-muted);
}

/* ============ FAQ ============ */
.faq {
    padding: 100px 0;
    position: relative;
    z-index: 1;
}

.faq__list {
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.faq-item {
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    transition: all var(--transition);
}

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

.faq-item__q {
    width: 100%;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--text);
    text-align: start;
}

.faq-item__q::after {
    content: '+';
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--brand);
    transition: transform var(--transition);
    flex-shrink: 0;
}

[data-theme="dark"] .faq-item__q::after {
    color: var(--cyan);
}

.faq-item.is-open .faq-item__q::after {
    transform: rotate(45deg);
}

.faq-item__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
}

.faq-item.is-open .faq-item__a {
    max-height: 300px;
}

.faq-item__a p {
    padding: 0 24px 20px;
    font-size: .85rem;
    color: var(--text-soft);
    line-height: 1.7;
}

/* ============ FLOATING CHAT WIDGET ============ */
.chat-widget {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    z-index: 999;
}

.chat-widget__fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    display: grid;
    place-items: center;
    color: #fff;
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.chat-widget__fab:hover {
    transform: scale(1.08);
}

.chat-widget__fab-icon {
    width: 56px;
    height: 56px;
    border-radius: 0;
    object-fit: contain;
}

.chat-widget__fab svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.chat-widget__fab::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #22b87a;
    border: 2px solid var(--bg);
}

.chat-widget__panel {
    position: absolute;
    bottom: 70px;
    inset-inline-end: 0;
    width: 340px;
    max-height: 480px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateY(12px) scale(.95);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
}

.chat-widget__panel.is-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

.chat-widget__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--gradient);
    color: #fff;
}

.chat-widget__avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    font-weight: 800;
}

.chat-widget__info strong {
    display: block;
    font-size: .85rem;
}

.chat-widget__info small {
    font-size: .68rem;
    opacity: .8;
    display: flex;
    align-items: center;
    gap: 5px;
}

.chat-widget__info small::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22b87a;
}

.chat-widget__body {
    flex: 1;
    padding: 20px 16px;
    overflow-y: auto;
    display: grid;
    gap: 10px;
}

.chat-widget__msg {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .78rem;
    line-height: 1.5;
}

.chat-widget__msg--bot {
    background: var(--bg-alt);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

.chat-widget__msg--user {
    background: var(--gradient);
    color: #fff;
    border-bottom-right-radius: 4px;
    justify-self: end;
    max-width: 85%;
}

.chat-widget__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 12px;
}

.chat-widget__chip {
    padding: 6px 12px;
    border-radius: 100px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--brand);
    background: var(--gradient-soft);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--transition);
}

[data-theme="dark"] .chat-widget__chip {
    color: var(--cyan);
}

.chat-widget__chip:hover {
    background: var(--gradient);
    color: #fff;
}

.chat-widget__foot {
    padding: 12px 16px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-widget__input {
    flex: 1;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    padding: 0 12px;
    font-size: .75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.chat-widget__send {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--gradient);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.chat-widget__powered {
    text-align: center;
    padding: 6px;
    font-size: .58rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-soft);
}

/* ============ FINAL CTA ============ */
.final-cta {
    padding: 100px 0;
    position: relative;
    z-index: 1;
    text-align: center;
}

.final-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.04em;
    color: var(--text);
    max-width: 700px;
    margin: 0 auto 20px;
}

.final-cta p {
    font-size: 1.05rem;
    color: var(--text-soft);
    max-width: 560px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.final-cta .btn {
    margin: 0 auto;
}

.final-cta__note {
    margin-top: 14px;
    font-size: .78rem;
    color: var(--text-muted);
}

/* ============ RESPONSIVE FOR NEW SECTIONS ============ */
@media (max-width: 991.98px) {
    .skills__grid {
        grid-template-columns: 1fr;
    }

    .skill-card {
        grid-template-columns: 1fr;
    }

    .skill-card__demo {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .crm-features {
        grid-template-columns: 1fr;
    }

    .crm-dashboard__body {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 767.98px) {
    .skill-card {
        padding: 24px;
    }

    .skill-card__demo {
        max-width: 280px;
    }

    .crm-dashboard__body {
        padding: 16px;
    }

    .crm-stats {
        grid-template-columns: 1fr;
    }

    .integrations__grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        margin: 0 auto;
    }

    .chat-widget__panel {
        width: calc(100vw - 48px);
        max-width: 340px;
    }

    .faq-item__q {
        padding: 16px 18px;
        font-size: .82rem;
    }

    .faq-item__a p {
        padding: 0 18px 16px;
        font-size: .8rem;
    }
}

@media (max-width: 399.98px) {
    .skill-card {
        padding: 20px;
    }

    .skill-card__demo {
        padding: 14px;
    }
}

/* ============ MANSTY-LEVEL GLOBAL SHELL REFINEMENT ============ */
:root {
    --navbar-h: 76px;
}

html[dir="rtl"] body {
    font-family: 'Noto Kufi Arabic', 'Inter', system-ui, sans-serif;
}

html[dir="ltr"] body {
    font-family: 'Inter', 'Noto Kufi Arabic', system-ui, sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .btn,
html[dir="rtl"] .nav__links a {
    font-family: 'Noto Kufi Arabic', system-ui, sans-serif;
    letter-spacing: 0;
}

/* Full-width glass navbar matching Mansty's polished shell */
.navbar {
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    height: var(--navbar-h);
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: rgba(247, 249, 252, .76);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: none;
    transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, .93);
    border-bottom-color: var(--border);
    box-shadow: 0 1px 0 rgba(15, 35, 65, .03), 0 8px 30px rgba(15, 35, 65, .07);
}

[data-theme="dark"] .navbar {
    background: rgba(8, 14, 27, .76);
}

[data-theme="dark"] .navbar.scrolled {
    background: rgba(10, 18, 34, .94);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}

.nav__inner {
    width: 100%;
    max-width: var(--container);
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

.nav__logo {
    display: flex;
    align-items: center;
    width: 142px;
    height: 54px;
    overflow: hidden;
}

.nav__logo img {
    width: 142px;
    height: 54px;
    object-fit: contain;
    transition: opacity var(--transition), transform var(--transition);
}

.nav__logo:hover img {
    opacity: .88;
    transform: scale(1.02);
}

html[dir="rtl"] .nav__logo {
    width: 150px;
}

html[dir="rtl"] .nav__logo img {
    width: 150px;
}

.nav__links {
    gap: 4px;
}

.nav__links a {
    padding: 8px 16px;
    border-radius: 100px;
    font-size: .86rem;
    font-weight: 600;
    position: relative;
}

.nav__links a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient);
    transform: translateX(-50%);
    transition: width var(--transition);
}

.nav__links a:hover {
    color: var(--brand);
    background: rgba(16, 96, 224, .06);
}

.nav__links a:hover::after,
.nav__links a.nav__link--active::after {
    width: 20px;
}

.nav__links a.nav__link--active {
    color: var(--brand);
    background: rgba(16, 96, 224, .08);
}

[data-theme="dark"] .nav__links a:hover,
[data-theme="dark"] .nav__links a.nav__link--active {
    color: var(--cyan);
    background: rgba(0, 208, 224, .08);
}

.nav__controls {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 100px;
    background: var(--bg-alt);
}

.nav__lang {
    width: auto;
    height: 34px;
    padding: 7px 11px;
    border: 0;
    border-radius: 100px;
    background: transparent;
}

.nav__theme {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 100px;
    background: transparent;
}

.nav__lang:hover,
.nav__theme:hover {
    color: var(--brand);
    background: var(--bg-card);
}

.nav__burger {
    border: 0;
    background: transparent;
}

.hero {
    padding-top: calc(var(--navbar-h) + 64px);
}

/* Neural knowledge-map background, inspired by Mansty without boxed shapes */
.ai-pattern {
    background:
        radial-gradient(circle at 12% 18%, rgba(16, 96, 224, .105), transparent 29%),
        radial-gradient(circle at 86% 24%, rgba(0, 208, 224, .09), transparent 27%),
        radial-gradient(circle at 72% 78%, rgba(16, 96, 224, .07), transparent 31%),
        linear-gradient(180deg, rgba(247, 249, 252, .78), rgba(247, 249, 252, .25));
}

[data-theme="dark"] .ai-pattern {
    background:
        radial-gradient(circle at 12% 18%, rgba(16, 96, 224, .22), transparent 32%),
        radial-gradient(circle at 86% 24%, rgba(0, 208, 224, .16), transparent 30%),
        radial-gradient(circle at 50% 55%, rgba(16, 96, 224, .1), transparent 45%),
        radial-gradient(circle at 72% 78%, rgba(80, 70, 230, .12), transparent 33%),
        linear-gradient(180deg, rgba(7, 13, 25, .78), rgba(7, 13, 25, .25));
}

.ai-pattern__backdrop {
    opacity: .82;
    animation: daimNetworkDrift 22s ease-in-out infinite alternate;
}

.ai-pattern__backdrop path {
    stroke: url(#daimPatternGradient);
    stroke-width: 1.15;
    opacity: .13;
    stroke-dasharray: 5 11;
}

[data-theme="dark"] .ai-pattern__backdrop path {
    opacity: .22;
}

.ai-doodle {
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--brand);
    opacity: .19;
    filter: drop-shadow(0 8px 15px rgba(16, 96, 224, .12));
}

.ai-doodle svg {
    width: 42px;
    height: 42px;
    stroke-width: 1.45;
}

[data-theme="dark"] .ai-doodle {
    color: var(--cyan);
    opacity: .25;
    filter: drop-shadow(0 8px 18px rgba(0, 208, 224, .18));
}

.ai-pattern__dot {
    width: 7px;
    height: 7px;
    opacity: .28;
    animation: daimNodePulse 4s ease-in-out infinite;
}

@keyframes daimNetworkDrift {
    to {
        transform: translate3d(1.6%, -1.4%, 0) scale(1.025);
    }
}

@keyframes daimNodePulse {
    50% {
        opacity: .6;
        transform: scale(1.5);
    }
}

/* Preloader brand localization and stronger identity */
.site-preloader {
    background:
        radial-gradient(circle at 32% 24%, rgba(16, 96, 224, .11), transparent 30%),
        radial-gradient(circle at 72% 78%, rgba(0, 208, 224, .1), transparent 30%),
        var(--bg);
}

.site-preloader__content {
    gap: 14px;
}

.site-preloader__mark {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    box-shadow: none;
    isolation: isolate;
    animation: daimPreloaderCore 2.6s ease-in-out infinite;
}

.site-preloader__mark::before {
    content: '';
    position: absolute;
    inset: 19px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .2), rgba(0, 208, 224, .13) 32%, rgba(16, 96, 224, .12) 58%, transparent 72%);
    box-shadow: 0 0 38px rgba(0, 208, 224, .18), 0 0 70px rgba(16, 96, 224, .12);
}

.site-preloader__mark::after {
    content: '';
    position: absolute;
    inset: 25px;
    z-index: -1;
    border: 1px solid rgba(85, 164, 255, .24);
    border-radius: 50%;
    animation: daimPreloaderInner 2.6s ease-in-out infinite;
}

.site-preloader__mark svg {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    stroke: url(#preloaderGrad);
    stroke-width: 2.15;
    filter: drop-shadow(0 0 10px rgba(0, 208, 224, .32));
}

.site-preloader__favicon {
    position: relative;
    z-index: 2;
    width: 56px;
    height: 56px;
    object-fit: contain;
    animation: daimPreloaderCore 2.6s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(0, 208, 224, .35));
}

.site-preloader__bubble {
    fill: rgba(16, 96, 224, .055);
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: daimPreloaderBubble 2.4s ease-in-out infinite;
}

.site-preloader__spark {
    fill: url(#preloaderGrad);
    stroke: none;
    transform-origin: 33px 24.7px;
    animation: daimPreloaderSpark 1.35s ease-in-out infinite;
}

.site-preloader__node {
    fill: url(#preloaderGrad);
    stroke: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: daimPreloaderNode 1.05s ease-in-out infinite;
}

.site-preloader__node:nth-of-type(2) {
    animation-delay: .14s;
}

.site-preloader__node:nth-of-type(3) {
    animation-delay: .28s;
}

.site-preloader__orbit {
    inset: -5px;
    border: 1px solid rgba(16, 96, 224, .16);
    border-radius: 50%;
    border-top-color: rgba(0, 208, 224, .72);
    border-right-color: rgba(16, 96, 224, .5);
    animation-duration: 5s;
}

.site-preloader__orbit::before,
.site-preloader__orbit::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 14px rgba(0, 208, 224, .65);
}

.site-preloader__orbit::before {
    top: 5px;
    left: 17px;
}

.site-preloader__orbit::after {
    right: 11px;
    bottom: 13px;
    width: 5px;
    height: 5px;
    background: var(--brand-light);
}

.site-preloader__brand {
    margin-top: 0;
    font-size: 1.5rem;
}

html[dir="rtl"] .site-preloader__brand {
    font-family: 'Noto Kufi Arabic', system-ui, sans-serif;
    letter-spacing: 0;
}

[data-theme="dark"] .site-preloader__mark::before {
    background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .12), rgba(0, 208, 224, .16) 32%, rgba(16, 96, 224, .13) 58%, transparent 72%);
    box-shadow: 0 0 42px rgba(0, 208, 224, .2), 0 0 78px rgba(16, 96, 224, .15);
}

@keyframes daimPreloaderCore {
    50% {
        transform: translateY(-5px) scale(1.025);
    }
}

@keyframes daimPreloaderInner {
    50% {
        transform: scale(1.12);
        opacity: .55;
    }
}

@keyframes daimPreloaderBubble {
    0% {
        stroke-dashoffset: 120;
        opacity: .3;
    }

    42%,
    78% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -120;
        opacity: .3;
    }
}

@keyframes daimPreloaderSpark {

    0%,
    100% {
        transform: scale(.72) rotate(-18deg);
        opacity: .5;
    }

    50% {
        transform: scale(1.18) rotate(12deg);
        opacity: 1;
        filter: drop-shadow(0 0 8px rgba(0, 208, 224, .85));
    }
}

@keyframes daimPreloaderNode {

    0%,
    55%,
    100% {
        transform: translateY(0) scale(.8);
        opacity: .35;
    }

    28% {
        transform: translateY(-4px) scale(1.18);
        opacity: 1;
    }
}

@media (max-width: 991.98px) {
    .nav__inner {
        gap: 14px;
    }

    .nav__logo {
        width: 126px;
    }

    .nav__logo img {
        width: 126px;
    }

    .nav__links a {
        padding-inline: 11px;
        font-size: .8rem;
    }
}

@media (max-width: 767.98px) {
    :root {
        --navbar-h: 68px;
    }

    .nav__inner {
        padding: 0 16px;
    }

    .nav__logo,
    html[dir="rtl"] .nav__logo {
        width: 112px;
        height: 46px;
    }

    .nav__logo img,
    html[dir="rtl"] .nav__logo img {
        width: 112px;
        height: 46px;
    }

    .nav__actions {
        gap: 7px;
    }

    .nav__controls {
        height: 38px;
    }

    .nav__lang {
        padding-inline: 8px;
    }

    .nav__actions>.btn--primary {
        display: none;
    }

    .nav__burger {
        display: flex;
        width: 38px;
        height: 38px;
        padding: 8px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: rgba(255, 255, 255, .58);
    }

    [data-theme="dark"] .nav__burger {
        background: rgba(255, 255, 255, .04);
    }

    .nav__links {
        top: calc(var(--navbar-h) + 10px);
        left: 16px;
        right: 16px;
        padding: 12px;
        border-radius: 18px;
        background: var(--bg-glass);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
    }

    .nav__links a {
        padding: 12px 16px;
        border-radius: 12px;
        font-size: .9rem;
    }

    .nav__links a::after {
        display: none;
    }

    .ai-doodle {
        transform: scale(.82);
    }
}

@media (max-width: 430px) {

    .nav__logo,
    html[dir="rtl"] .nav__logo {
        width: 94px;
    }

    .nav__logo img,
    html[dir="rtl"] .nav__logo img {
        width: 94px;
    }

    .nav__lang svg {
        display: none;
    }
}

/* ============ PREMIUM FLOATING NAVBAR — MATCHED TO MANSTY ============ */
.navbar,
.navbar.scrolled,
[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar.scrolled {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 80px;
    padding: 10px 18px;
    transform: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.nav__inner {
    position: relative;
    width: 100%;
    height: 60px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 10px 0 12px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 20px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 10px 40px rgba(10, 43, 90, .09), inset 0 1px rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    backdrop-filter: blur(22px) saturate(155%);
    transition: background .4s, border-color .4s, box-shadow .4s;
}

.navbar.scrolled .nav__inner {
    background: rgba(255, 255, 255, .93);
    border-color: rgba(16, 96, 224, .14);
    box-shadow: 0 14px 42px rgba(10, 43, 90, .13), inset 0 1px rgba(255, 255, 255, .92);
}

[data-theme="dark"] .nav__inner {
    background: rgba(10, 18, 32, .88);
    border-color: rgba(255, 255, 255, .04);
    box-shadow: 0 12px 42px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .navbar.scrolled .nav__inner {
    background: rgba(10, 18, 32, .95);
    border-color: rgba(0, 208, 224, .08);
    box-shadow: 0 14px 42px rgba(0, 0, 0, .45);
}

.nav__logo,
html[dir="rtl"] .nav__logo {
    width: 148px;
    height: 48px;
    padding: 5px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.nav__logo img {
    width: 124px;
    height: 38px;
    object-fit: contain;
}

html[dir="rtl"] .nav__logo img {
    width: 124px;
    height: 38px;
    object-fit: contain;
}

.nav__links {
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid rgba(16, 96, 224, .07);
    border-radius: 15px;
    background: rgba(242, 247, 253, .66);
}

.nav__links a {
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 11px;
    font-size: .82rem;
    font-weight: 650;
}

.nav__links a::after {
    bottom: 4px;
}

.nav__links a:hover {
    color: var(--brand);
    background: rgba(255, 255, 255, .88);
}

.nav__links a.nav__link--active {
    color: #fff;
    background: var(--gradient);
    box-shadow: 0 7px 18px rgba(16, 96, 224, .22);
}

.nav__links a.nav__link--active::after {
    display: none;
}

[data-theme="dark"] .nav__links,
[data-theme="dark"] .nav__controls {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .065);
}

[data-theme="dark"] .nav__links a:hover {
    color: var(--cyan);
    background: rgba(255, 255, 255, .07);
}

[data-theme="dark"] .nav__links a.nav__link--active {
    color: #fff;
    background: var(--gradient);
}

.nav__actions {
    gap: 8px;
}

.nav__controls {
    height: 40px;
    padding: 3px;
    gap: 2px;
    border-radius: 13px;
    background: rgba(242, 247, 253, .72);
    border-color: rgba(16, 96, 224, .08);
}

.nav__lang {
    width: 58px;
    min-width: 58px;
    min-height: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 9px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
    font-family: 'Inter', 'Noto Kufi Arabic', system-ui, sans-serif;
}

.nav__lang svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.nav__lang #langLabel {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: .66rem;
}

.nav__theme {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: 0 0 32px;
}

.nav__lang:hover,
.nav__theme:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(10, 43, 90, .08);
}

[data-theme="dark"] .nav__lang:hover,
[data-theme="dark"] .nav__theme:hover {
    background: rgba(255, 255, 255, .07);
}

.nav__actions>.btn--primary {
    height: 44px;
    min-height: 44px;
    padding: 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    line-height: 1.15;
    box-shadow: 0 8px 20px rgba(16, 96, 224, .23);
}

html[dir="rtl"] .nav__actions>.btn--primary {
    height: 44px;
    min-height: 44px;
    padding: 0 19px 1px;
    line-height: 1.2;
}

.nav__actions>.btn--primary::after {
    content: '→';
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1;
    transition: transform .25s ease;
}

.nav__actions>.btn--primary:hover::after {
    transform: translateX(3px);
}

html[dir="rtl"] .nav__inner {
    padding: 0 12px 0 10px;
}

html[dir="rtl"] .nav__links {
    flex-direction: row;
}

html[dir="rtl"] .nav__actions>.btn--primary::after {
    content: '←';
}

html[dir="rtl"] .nav__actions>.btn--primary:hover::after {
    transform: translateX(-3px);
}

.hero {
    padding-top: 140px;
}

@media (max-width: 1080px) {
    .nav__links a {
        padding-inline: 10px;
    }

    .nav__actions>.btn--primary {
        padding-inline: 14px;
    }

    .nav__logo,
    html[dir="rtl"] .nav__logo {
        width: 130px;
    }

    .nav__logo img,
    html[dir="rtl"] .nav__logo img {
        width: 106px;
    }
}

@media (max-width: 767.98px) {

    .navbar,
    .navbar.scrolled,
    [data-theme="dark"] .navbar,
    [data-theme="dark"] .navbar.scrolled {
        height: 76px;
        padding: 8px 10px;
    }

    .nav__inner,
    html[dir="rtl"] .nav__inner {
        height: 60px;
        padding: 0 8px 0 10px;
        border-radius: 18px;
    }

    .nav__logo,
    html[dir="rtl"] .nav__logo {
        width: 116px;
        height: 44px;
        padding: 4px 9px;
        border-radius: 12px;
    }

    .nav__logo img,
    html[dir="rtl"] .nav__logo img {
        width: 98px;
        height: 34px;
    }

    .nav__actions>.btn--primary {
        display: none;
    }

    .nav__controls {
        height: 38px;
    }

    .nav__lang {
        padding-inline: 8px;
    }

    .nav__burger {
        width: 38px;
        height: 38px;
        padding: 9px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(16, 96, 224, .11);
        border-radius: 11px;
        background: rgba(242, 247, 253, .74);
    }

    .nav__links {
        display: none;
    }

    .nav__links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        padding: 10px;
        gap: 5px;
        border: 1px solid rgba(16, 96, 224, .13);
        border-radius: 18px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 20px 50px rgba(10, 43, 90, .15);
    }

    html[dir="rtl"] .nav__links.open {
        flex-direction: column;
    }

    .nav__links.open a {
        width: 100%;
        min-height: 44px;
        padding: 11px 14px;
        border-radius: 12px;
    }

    .nav__links.open a.nav__link--active {
        color: #fff;
        background: var(--gradient);
    }

    [data-theme="dark"] .nav__links.open {
        background: rgba(10, 18, 32, .98);
        border-color: rgba(0, 208, 224, .16);
    }

    .hero {
        padding-top: 126px;
    }
}

@media (max-width: 430px) {

    .nav__logo,
    html[dir="rtl"] .nav__logo {
        width: 102px;
        padding-inline: 7px;
    }

    .nav__logo img,
    html[dir="rtl"] .nav__logo img {
        width: 88px;
    }

    .nav__lang svg {
        display: none;
    }
}

.hero {
    min-height: 720px;
    padding: 138px 0 92px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

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

.hero__inner {
    grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr);
    gap: clamp(40px, 5vw, 72px);
}

.hero__content {
    width: 100%;
    max-width: 620px;
}

.hero__badge {
    min-height: 34px;
    max-width: 100%;
    margin-bottom: 22px;
    padding: 7px 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow: visible;
    white-space: nowrap;
    line-height: 1.25;
    background: rgba(16, 96, 224, .075);
    border-color: rgba(16, 96, 224, .13);
    box-shadow: inset 0 1px rgba(255, 255, 255, .7);
}

.hero__badge>span:first-child {
    display: block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22b87a;
    box-shadow: 0 0 0 5px rgba(34, 184, 122, .1);
    animation: dotPulse 2s ease-in-out infinite;
}

.hero__badge>span:last-child {
    display: inline;
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
    color: var(--brand);
    font-size: .74rem;
    font-weight: 750;
}

[data-theme="dark"] .hero__badge {
    background: rgba(0, 208, 224, .08);
    border-color: rgba(0, 208, 224, .16);
    box-shadow: 0 0 20px rgba(0, 208, 224, .05);
}

[data-theme="dark"] .hero__badge>span:last-child {
    color: var(--cyan);
}

.hero__title {
    max-width: 650px;
    margin: 0;
    font-size: clamp(2.55rem, 4.65vw, 4rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.045em;
    text-wrap: balance;
}

html[dir="rtl"] .hero__title {
    line-height: 1.35;
    letter-spacing: 0;
    font-size: clamp(2.4rem, 4.25vw, 3.65rem);
}

.hero__desc {
    max-width: 590px;
    margin-top: 20px;
    font-size: 1.03rem;
    line-height: 1.85;
}

.hero__cta {
    margin-top: 28px;
}

.hero__cta .btn {
    min-height: 52px;
    padding-inline: 26px;
    border-radius: 14px;
}

.hero__cta-note {
    margin-top: 10px;
    padding-inline-start: 3px;
    font-size: .72rem;
}

.hero__stats {
    width: fit-content;
    margin-top: 38px;
    padding: 16px 20px;
    gap: 0;
    border: 1px solid var(--border-soft);
    border-radius: 17px;
    background: rgba(255, 255, 255, .46);
    box-shadow: inset 0 1px rgba(255, 255, 255, .65);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

[data-theme="dark"] .hero__stats {
    background: rgba(0, 208, 224, .03);
    border-color: rgba(0, 208, 224, .08);
}

.hero__stat {
    min-width: 120px;
    padding: 0 22px;
    text-align: center;
    position: relative;
}

.hero__stat:first-child {
    padding-inline-start: 0;
}

.hero__stat:last-child {
    padding-inline-end: 0;
}

.hero__stat+.hero__stat::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    width: 1px;
    height: calc(100% - 12px);
    background: var(--border);
}

.hero__stat strong {
    font-size: 1.55rem;
    line-height: 1.2;
}

.hero__stat span {
    display: block;
    margin-top: 4px;
    font-size: .67rem;
    white-space: nowrap;
}

.hero__visual {
    width: 100%;
    max-width: 500px;
    justify-self: end;
}

html[dir="rtl"] .hero__visual {
    justify-self: start;
}

.hero__chat {
    width: 100%;
    border-radius: 22px;
    border-color: rgba(16, 96, 224, .12);
    box-shadow: 0 26px 70px rgba(10, 43, 90, .16), 0 0 0 1px rgba(255, 255, 255, .48) inset;
}

[data-theme="dark"] .hero__chat {
    border-color: rgba(0, 208, 224, .11);
    box-shadow: 0 28px 75px rgba(0, 0, 0, .38);
}

.hero__chat-head {
    min-height: 68px;
    padding: 14px 18px;
    background: linear-gradient(180deg, var(--bg-card), var(--bg-alt));
}

.hero__chat-avatar {
    flex: 0 0 40px;
    box-shadow: 0 8px 18px rgba(16, 96, 224, .2);
}

.hero__chat-info strong {
    font-size: .83rem;
    line-height: 1.4;
}

.hero__chat-info small {
    margin-top: 2px;
    font-size: .64rem;
}

.hero__chat-body {
    min-height: 306px;
    padding: 18px;
    gap: 11px;
    align-content: center;
}

.hero__msg {
    max-width: 82%;
    padding: 11px 14px;
    font-size: .76rem;
    line-height: 1.7;
    box-shadow: 0 5px 16px rgba(10, 43, 90, .045);
}

.hero__msg--in {
    border: 1px solid var(--border-soft);
}

.hero__msg--out {
    box-shadow: 0 8px 20px rgba(16, 96, 224, .14);
}

html[dir="rtl"] .hero__msg--in {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
}

html[dir="rtl"] .hero__msg--out {
    justify-self: end;
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 4px;
}

.hero__chat-foot {
    padding: 12px 14px;
    background: var(--bg-card);
}

.hero__chat-input {
    height: 42px;
    border-radius: 11px;
}

.hero__chat-send {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    box-shadow: 0 7px 16px rgba(16, 96, 224, .18);
}

@media (max-width: 1100px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(350px, .82fr);
        gap: 36px;
    }

    .hero__title {
        font-size: clamp(2.35rem, 4.7vw, 3.25rem);
    }

    html[dir="rtl"] .hero__title {
        font-size: clamp(2.2rem, 4.45vw, 3rem);
    }

    .hero__stat {
        min-width: 105px;
        padding-inline: 15px;
    }
}

@media (max-width: 900px) {
    .hero {
        min-height: 0;
        padding: 126px 0 76px;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        gap: 52px;
    }

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

    .hero__title,
    .hero__desc {
        margin-inline: auto;
    }

    .hero__cta {
        justify-content: center;
    }

    .hero__stats {
        margin-inline: auto;
    }

    .hero__visual,
    html[dir="rtl"] .hero__visual {
        max-width: 520px;
        justify-self: center;
    }
}

@media (max-width: 600px) {
    .hero {
        padding: 112px 0 62px;
    }

    .hero__badge {
        white-space: normal;
    }

    .hero__title,
    html[dir="rtl"] .hero__title {
        font-size: clamp(2rem, 10vw, 2.7rem);
    }

    .hero__desc {
        font-size: .92rem;
        line-height: 1.8;
    }

    .hero__stats {
        width: 100%;
        padding: 14px 10px;
    }

    .hero__stat {
        flex: 1;
        min-width: 0;
        padding-inline: 8px;
    }

    .hero__stat strong {
        font-size: 1.22rem;
    }

    .hero__stat span {
        font-size: .56rem;
        white-space: normal;
    }

    .hero__chat-body {
        min-height: 280px;
        padding: 14px;
    }

    .hero__msg {
        max-width: 90%;
        font-size: .7rem;
    }
}

.ai-pattern {
    opacity: 1;
    background:
        radial-gradient(ellipse 52% 44% at 12% 18%, rgba(16, 96, 224, .13), transparent 72%),
        radial-gradient(ellipse 46% 42% at 88% 30%, rgba(0, 208, 224, .12), transparent 70%),
        radial-gradient(ellipse 42% 40% at 54% 86%, rgba(67, 90, 230, .075), transparent 72%),
        linear-gradient(180deg, #f8fbff 0%, #f4f9ff 48%, #f8fbff 100%);
}

[data-theme="dark"] .ai-pattern {
    background:
        radial-gradient(ellipse 52% 44% at 12% 18%, rgba(16, 96, 224, .2), transparent 72%),
        radial-gradient(ellipse 46% 42% at 88% 30%, rgba(0, 208, 224, .14), transparent 70%),
        radial-gradient(ellipse 42% 40% at 54% 86%, rgba(67, 90, 230, .12), transparent 72%),
        linear-gradient(180deg, #080e1b 0%, #091322 48%, #080e1b 100%);
}

.ai-pattern::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(16, 96, 224, .16) 1px, transparent 1.4px);
    background-size: 34px 34px;
    opacity: .28;
    -webkit-mask-image: radial-gradient(ellipse 85% 72% at 50% 42%, #000 5%, transparent 82%);
    mask-image: radial-gradient(ellipse 85% 72% at 50% 42%, #000 5%, transparent 82%);
}

[data-theme="dark"] .ai-pattern::before {
    background-image: radial-gradient(circle, rgba(0, 208, 224, .2) 1px, transparent 1.4px);
    opacity: .32;
}

.ai-pattern__backdrop {
    opacity: 1;
    animation: none;
}

.ai-pattern__backdrop path {
    fill: none;
}

.daim-network__line {
    stroke: url(#daimPatternGradient);
    stroke-width: 1.35;
    opacity: .16;
    stroke-dasharray: 5 10;
    animation: daimDataFlow 24s linear infinite;
}

.daim-network__line--two {
    animation-duration: 31s;
    animation-direction: reverse;
}

.daim-network__line--three {
    animation-duration: 27s;
}

.daim-network__line--four {
    animation-duration: 34s;
    animation-direction: reverse;
}

.daim-network__signal {
    stroke: url(#daimPatternGradient);
    stroke-width: 2;
    opacity: .13;
    stroke-dasharray: 3 22;
    animation: daimSignalFlow 9s linear infinite;
}

.daim-node__glow {
    fill: url(#daimNodeGlow);
    opacity: .32;
}

.daim-node {
    fill: var(--cyan);
    opacity: .52;
    filter: drop-shadow(0 0 8px rgba(0, 208, 224, .45));
}

.daim-node__ring {
    fill: none;
    stroke: var(--brand);
    stroke-width: 1;
    opacity: .24;
    transform-box: fill-box;
    transform-origin: center;
    animation: daimRingPulse 4.5s ease-in-out infinite;
}

.daim-bubble {
    fill: rgba(255, 255, 255, .34);
    stroke: url(#daimPatternGradient);
    stroke-width: 1.2;
    opacity: .2;
    filter: drop-shadow(0 10px 20px rgba(16, 96, 224, .08));
    animation: daimBubbleFloat 9s ease-in-out infinite;
}

.daim-bubble path,
.daim-bubble circle {
    fill: none;
    stroke: url(#daimPatternGradient);
    stroke-width: 2;
    opacity: .7;
}

.daim-bubble circle {
    fill: var(--cyan);
    stroke: none;
}

.daim-bubble--two {
    animation-delay: -2s;
}

.daim-bubble--three {
    animation-delay: -4s;
}

.daim-bubble--four {
    animation-delay: -6s;
}

.daim-ai-core {
    opacity: .075;
    transform-box: fill-box;
    transform-origin: center;
    animation: daimCoreFloat 12s ease-in-out infinite;
}

.daim-ai-core__halo {
    fill: url(#daimNodeGlow);
}

.daim-ai-core__orbit {
    fill: none;
    stroke: url(#daimPatternGradient);
    stroke-width: 1.4;
    stroke-dasharray: 7 10;
    animation: daimCoreSpin 18s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.daim-ai-core__body {
    fill: rgba(255, 255, 255, .6);
    stroke: url(#daimPatternGradient);
    stroke-width: 1.8;
}

.daim-ai-core path,
.daim-ai-core>circle:not(.daim-ai-core__halo):not(.daim-ai-core__orbit):not(.daim-ai-core__body) {
    fill: none;
    stroke: url(#daimPatternGradient);
    stroke-width: 2;
    stroke-linecap: round;
}

[data-theme="dark"] .daim-network__line {
    opacity: .23;
}

[data-theme="dark"] .daim-network__signal {
    opacity: .2;
}

[data-theme="dark"] .daim-bubble {
    fill: rgba(8, 18, 34, .5);
    opacity: .27;
}

[data-theme="dark"] .daim-ai-core {
    opacity: .12;
}

.ai-doodle {
    opacity: .16;
}

[data-theme="dark"] .ai-doodle {
    opacity: .18;
}

@keyframes daimDataFlow {
    to {
        stroke-dashoffset: -300;
    }
}

@keyframes daimSignalFlow {
    to {
        stroke-dashoffset: -250;
    }
}

@keyframes daimRingPulse {
    50% {
        opacity: .5;
        transform: scale(1.3);
    }
}

@keyframes daimBubbleFloat {
    50% {
        transform: translateY(-14px);
        opacity: .3;
    }
}

@keyframes daimCoreFloat {
    50% {
        transform: translateY(-12px) scale(1.04);
    }
}

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

@media (max-width: 900px) {
    .daim-ai-core {
        opacity: .045;
    }

    .daim-bubble {
        opacity: .14;
    }

    .ai-doodle {
        opacity: .11;
    }
}

@media (max-width: 600px) {
    .ai-pattern::before {
        background-size: 28px 28px;
        opacity: .2;
    }

    .daim-conversations,
    .daim-ai-core {
        display: none;
    }

    .daim-network__line {
        opacity: .11;
    }

    [data-theme="dark"] .daim-network__line {
        opacity: .16;
    }

    .ai-doodle {
        opacity: .09;
        transform: scale(.72);
    }
}

.ai-pattern {
    background:
        radial-gradient(ellipse 62% 52% at 5% 8%, rgba(16, 96, 224, .105), transparent 70%),
        radial-gradient(ellipse 55% 50% at 96% 32%, rgba(0, 208, 224, .085), transparent 72%),
        radial-gradient(ellipse 48% 46% at 48% 102%, rgba(92, 104, 225, .055), transparent 74%),
        linear-gradient(145deg, #fbfdff 0%, #f5f9ff 46%, #f9fcff 100%);
}

.ai-pattern::after {
    content: '';
    position: absolute;
    inset: -12%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 28% 22% at 28% 34%, rgba(16, 96, 224, .055), transparent 72%),
        radial-gradient(ellipse 26% 20% at 74% 62%, rgba(0, 208, 224, .05), transparent 72%);
    filter: blur(28px);
    animation: daimAmbientDrift 42s ease-in-out infinite alternate;
}

[data-theme="dark"] .ai-pattern {
    background:
        radial-gradient(ellipse 62% 52% at 5% 8%, rgba(16, 96, 224, .15), transparent 70%),
        radial-gradient(ellipse 55% 50% at 96% 32%, rgba(0, 208, 224, .095), transparent 72%),
        radial-gradient(ellipse 48% 46% at 48% 102%, rgba(92, 104, 225, .075), transparent 74%),
        linear-gradient(145deg, #070d19 0%, #091321 46%, #07101d 100%);
}

[data-theme="dark"] .ai-pattern::after {
    background:
        radial-gradient(ellipse 28% 22% at 28% 34%, rgba(16, 96, 224, .09), transparent 72%),
        radial-gradient(ellipse 26% 20% at 74% 62%, rgba(0, 208, 224, .065), transparent 72%);
}

.ai-pattern::before {
    background-size: 42px 42px;
    opacity: .13;
}

[data-theme="dark"] .ai-pattern::before {
    opacity: .17;
}

.daim-network__line {
    stroke-width: 1.05;
    opacity: .105;
    stroke-dasharray: 4 14;
    animation-duration: 58s;
}

.daim-network__line--two {
    animation-duration: 72s;
}

.daim-network__line--three {
    animation-duration: 66s;
}

.daim-network__line--four {
    animation-duration: 82s;
}

.daim-network__signal {
    stroke-width: 1.5;
    opacity: .075;
    stroke-dasharray: 2 30;
    animation-duration: 38s;
}

[data-theme="dark"] .daim-network__line {
    opacity: .15;
}

[data-theme="dark"] .daim-network__signal {
    opacity: .11;
}

.daim-node__glow {
    opacity: .2;
}

.daim-node {
    opacity: .34;
    filter: drop-shadow(0 0 10px rgba(0, 208, 224, .28));
}

.daim-node__ring {
    opacity: .14;
    animation-duration: 11s;
}

.daim-conversations {
    opacity: .58;
}

.daim-bubble {
    opacity: .105;
    fill: rgba(255, 255, 255, .26);
    stroke-width: 1;
    filter: drop-shadow(0 12px 28px rgba(16, 96, 224, .055));
    animation-duration: 24s;
}

.daim-bubble--two {
    animation-delay: -7s;
    animation-duration: 29s;
}

.daim-bubble--three {
    animation-delay: -13s;
    animation-duration: 27s;
}

.daim-bubble--four {
    animation-delay: -18s;
    animation-duration: 32s;
}

[data-theme="dark"] .daim-bubble {
    opacity: .15;
    fill: rgba(8, 18, 34, .34);
}

.daim-ai-core {
    opacity: .038;
    animation-duration: 30s;
}

.daim-ai-core__orbit {
    animation-duration: 52s;
}

[data-theme="dark"] .daim-ai-core {
    opacity: .065;
}

.ai-doodle {
    opacity: .065;
    animation-duration: 30s;
    filter: none;
}

.ai-doodle--2,
.ai-doodle--4,
.ai-doodle--6,
.ai-doodle--8 {
    opacity: .045;
}

[data-theme="dark"] .ai-doodle {
    opacity: .08;
    filter: none;
}

[data-theme="dark"] .ai-doodle--2,
[data-theme="dark"] .ai-doodle--4,
[data-theme="dark"] .ai-doodle--6,
[data-theme="dark"] .ai-doodle--8 {
    opacity: .055;
}

.ai-pattern__dot {
    opacity: .16;
    animation-duration: 10s;
    box-shadow: 0 0 16px rgba(0, 208, 224, .3);
}

@keyframes daimAmbientDrift {
    from {
        transform: translate3d(-1.5%, -1%, 0) scale(1);
    }

    to {
        transform: translate3d(2%, 1.5%, 0) scale(1.035);
    }
}

@keyframes daimBubbleFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -7px, 0);
    }
}

@keyframes daimCoreFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -6px, 0) scale(1.015);
    }
}

@media (max-width: 900px) {
    .daim-conversations {
        opacity: .36;
    }

    .daim-bubble {
        opacity: .075;
    }

    .daim-ai-core {
        opacity: .025;
    }

    .ai-doodle {
        opacity: .04;
    }
}

@media (max-width: 600px) {
    .ai-pattern::before {
        background-size: 34px 34px;
        opacity: .1;
    }

    [data-theme="dark"] .ai-pattern::before {
        opacity: .13;
    }

    .daim-conversations,
    .daim-ai-core,
    .ai-doodle {
        display: none;
    }

    .daim-network__line {
        opacity: .075;
    }

    [data-theme="dark"] .daim-network__line {
        opacity: .11;
    }
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(16, 96, 224, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 96, 224, .025) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse 82% 78% at 50% 42%, #000 10%, transparent 82%);
    mask-image: radial-gradient(ellipse 82% 78% at 50% 42%, #000 10%, transparent 82%);
}

[data-theme="dark"] .hero::before {
    background-image:
        linear-gradient(rgba(0, 208, 224, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 208, 224, .045) 1px, transparent 1px);
}

.daim-conversations {
    display: none;
}

.daim-ai-core {
    opacity: .07;
}

[data-theme="dark"] .daim-ai-core {
    opacity: .1;
}

.ai-doodle {
    opacity: .055;
}

.agent-console {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(16, 96, 224, .13);
    border-radius: 28px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .92), rgba(245, 250, 255, .78));
    box-shadow: 0 30px 90px rgba(8, 45, 98, .17), inset 0 1px rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
}

.agent-console::before {
    content: '';
    position: absolute;
    inset: 58px 0 62px;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 48%, rgba(0, 208, 224, .1), transparent 27%),
        radial-gradient(circle at 50% 48%, rgba(16, 96, 224, .07), transparent 48%),
        linear-gradient(rgba(16, 96, 224, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 96, 224, .025) 1px, transparent 1px);
    background-size: auto, auto, 28px 28px, 28px 28px;
}

[data-theme="dark"] .agent-console {
    background: linear-gradient(155deg, rgba(15, 25, 43, .94), rgba(8, 18, 34, .88));
    border-color: rgba(0, 208, 224, .13);
    box-shadow: 0 34px 95px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .04);
}

[data-theme="dark"] .agent-console::before {
    background:
        radial-gradient(circle at 50% 48%, rgba(0, 208, 224, .13), transparent 27%),
        radial-gradient(circle at 50% 48%, rgba(16, 96, 224, .1), transparent 48%),
        linear-gradient(rgba(0, 208, 224, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 208, 224, .025) 1px, transparent 1px);
    background-size: auto, auto, 28px 28px, 28px 28px;
}

.agent-console__topbar {
    position: relative;
    z-index: 3;
    min-height: 64px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .46);
}

[data-theme="dark"] .agent-console__topbar {
    background: rgba(255, 255, 255, .018);
}

.agent-console__identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.agent-console__identity>span:last-child {
    display: grid;
    min-width: 0;
}

.agent-console__identity strong {
    color: var(--text);
    font-size: .76rem;
    white-space: nowrap;
}

.agent-console__identity small {
    color: var(--text-muted);
    font-size: .56rem;
    white-space: nowrap;
}

.agent-console__logo {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--gradient);
    font-family: var(--font-display);
    font-size: .83rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(16, 96, 224, .2);
}

.agent-console__live {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid rgba(34, 184, 122, .15);
    border-radius: 100px;
    color: #159463;
    background: rgba(34, 184, 122, .075);
    font-size: .58rem;
    font-weight: 750;
}

.agent-console__live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22b87a;
    box-shadow: 0 0 0 4px rgba(34, 184, 122, .1);
}

.agent-console__stage {
    position: relative;
    height: 340px;
}

.agent-console__connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.agent-console__connections path {
    fill: none;
    stroke: url(#agentFlow);
    stroke-width: 1.35;
    stroke-dasharray: 4 8;
    opacity: .28;
    animation: agentConnectionFlow 24s linear infinite;
}

.agent-console__connections circle {
    fill: var(--cyan);
    opacity: .65;
    filter: drop-shadow(0 0 5px rgba(0, 208, 224, .5));
}

.agent-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 138px;
    height: 138px;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.agent-core__orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(16, 96, 224, .2);
}

.agent-core__orbit--one {
    inset: 0;
    border-style: dashed;
    animation: agentOrbit 38s linear infinite;
}

.agent-core__orbit--two {
    inset: 15px;
    border-color: rgba(0, 208, 224, .22);
    animation: agentOrbit 27s linear infinite reverse;
}

.agent-core__pulse {
    position: absolute;
    inset: 27px;
    border-radius: 50%;
    background: var(--gradient);
    opacity: .13;
    box-shadow: 0 0 45px rgba(0, 208, 224, .28);
    animation: agentCorePulse 7s ease-in-out infinite;
}

.agent-core__mark {
    position: relative;
    z-index: 2;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    color: #fff;
    background: var(--gradient);
    box-shadow: 0 14px 35px rgba(16, 96, 224, .27), inset 0 1px rgba(255, 255, 255, .35);
}

.agent-core__mark svg {
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.agent-core strong {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: .69rem;
    letter-spacing: .08em;
}

.agent-core small {
    position: relative;
    z-index: 2;
    max-width: 125px;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .48rem;
    text-align: center;
    line-height: 1.4;
}

.agent-node {
    position: absolute;
    z-index: 2;
    width: 145px;
    min-height: 58px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 28px rgba(8, 45, 98, .08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    animation: agentNodeFloat 12s ease-in-out infinite;
}

[data-theme="dark"] .agent-node {
    background: rgba(18, 30, 49, .82);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .24);
}

.agent-node--knowledge {
    left: 14px;
    top: 24px;
}

.agent-node--channels {
    right: 14px;
    top: 24px;
    animation-delay: -3s;
}

.agent-node--tasks {
    left: 14px;
    bottom: 24px;
    animation-delay: -6s;
}

.agent-node--leads {
    right: 14px;
    bottom: 24px;
    animation-delay: -9s;
}

.agent-node__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--brand);
    background: var(--gradient-soft);
}

[data-theme="dark"] .agent-node__icon {
    color: var(--cyan);
}

.agent-node__icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.agent-node>span:last-child {
    display: grid;
    min-width: 0;
}

.agent-node strong {
    color: var(--text);
    font-size: .65rem;
    white-space: nowrap;
}

.agent-node small {
    color: var(--text-muted);
    font-size: .48rem;
    white-space: nowrap;
}

.agent-console__activity {
    position: relative;
    z-index: 3;
    min-height: 64px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    border-top: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .5);
}

[data-theme="dark"] .agent-console__activity {
    background: rgba(255, 255, 255, .02);
}

.agent-console__activity-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--brand);
    background: var(--gradient-soft);
}

.agent-console__activity-icon svg,
.agent-console__done svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.agent-console__activity>span:nth-child(2) {
    display: grid;
}

.agent-console__activity strong {
    color: var(--text);
    font-size: .67rem;
}

.agent-console__activity small {
    color: var(--text-muted);
    font-size: .52rem;
}

.agent-console__done {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #159463;
    background: rgba(34, 184, 122, .1);
}

@keyframes agentConnectionFlow {
    to {
        stroke-dashoffset: -180;
    }
}

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

@keyframes agentCorePulse {
    50% {
        transform: scale(1.12);
        opacity: .2;
    }
}

@keyframes agentNodeFloat {
    50% {
        transform: translateY(-5px);
    }
}

@media (max-width: 1100px) {
    .agent-node {
        width: 130px;
    }

    .agent-node strong {
        font-size: .59rem;
    }

    .agent-node small {
        font-size: .44rem;
    }
}

@media (max-width: 900px) {

    .hero__visual,
    html[dir="rtl"] .hero__visual {
        max-width: 560px;
    }

    .agent-console__stage {
        height: 350px;
    }
}

@media (max-width: 520px) {
    .agent-console {
        border-radius: 22px;
    }

    .agent-console__identity strong {
        font-size: .67rem;
    }

    .agent-console__identity small {
        display: none;
    }

    .agent-console__stage {
        height: 390px;
    }

    .agent-core {
        width: 124px;
        height: 124px;
    }

    .agent-node {
        width: 126px;
        min-height: 54px;
        padding: 8px;
    }

    .agent-node--knowledge,
    .agent-node--tasks {
        left: 9px;
    }

    .agent-node--channels,
    .agent-node--leads {
        right: 9px;
    }

    .agent-node--knowledge,
    .agent-node--channels {
        top: 18px;
    }

    .agent-node--tasks,
    .agent-node--leads {
        bottom: 18px;
    }

    .agent-node__icon {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }

    .agent-node strong {
        font-size: .56rem;
    }

    .agent-node small {
        font-size: .41rem;
    }

    .agent-console__activity small {
        font-size: .46rem;
    }
}

.ai-pattern {
    background:
        radial-gradient(circle at 16% 20%, rgba(16, 96, 224, .13), transparent 29%),
        radial-gradient(circle at 84% 26%, rgba(0, 208, 224, .11), transparent 27%),
        radial-gradient(circle at 48% 82%, rgba(68, 84, 220, .07), transparent 32%),
        linear-gradient(145deg, #f9fbff, #f2f8ff 48%, #f9fdff);
}

[data-theme="dark"] .ai-pattern {
    background:
        radial-gradient(circle at 16% 20%, rgba(16, 96, 224, .19), transparent 31%),
        radial-gradient(circle at 84% 26%, rgba(0, 208, 224, .13), transparent 29%),
        radial-gradient(circle at 48% 82%, rgba(68, 84, 220, .1), transparent 34%),
        linear-gradient(145deg, #070d18, #091524 48%, #07101d);
}

.ai-pattern__backdrop {
    opacity: 0;
}

.ai-pattern::before {
    background-image:
        linear-gradient(30deg, rgba(16, 96, 224, .055) 1px, transparent 1px),
        linear-gradient(150deg, rgba(0, 208, 224, .045) 1px, transparent 1px),
        radial-gradient(circle, rgba(16, 96, 224, .24) 1.2px, transparent 1.5px);
    background-size: 64px 38px, 64px 38px, 32px 32px;
    opacity: .42;
    -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 38%, #000 8%, transparent 82%);
    mask-image: radial-gradient(ellipse 92% 82% at 50% 38%, #000 8%, transparent 82%);
}

[data-theme="dark"] .ai-pattern::before {
    opacity: .5;
}

.ai-pattern::after {
    inset: 0;
    filter: none;
    background:
        linear-gradient(90deg, transparent 9%, rgba(16, 96, 224, .08) 9.1%, transparent 9.2%) 0 0/260px 180px,
        linear-gradient(0deg, transparent 16%, rgba(0, 208, 224, .07) 16.1%, transparent 16.2%) 0 0/220px 210px;
    opacity: .35;
    animation: daimCircuitDrift 70s linear infinite;
}

.ai-doodle {
    display: grid;
    width: 68px;
    height: 68px;
    opacity: .16;
    color: var(--brand);
    border: 1px solid rgba(16, 96, 224, .1);
    border-radius: 21px;
    background: rgba(255, 255, 255, .24);
    box-shadow: 0 12px 30px rgba(16, 96, 224, .055);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    animation-duration: 38s;
}

.ai-doodle svg {
    width: 35px;
    height: 35px;
    stroke-width: 1.6;
}

[data-theme="dark"] .ai-doodle {
    opacity: .19;
    color: var(--cyan);
    border-color: rgba(0, 208, 224, .11);
    background: rgba(255, 255, 255, .018);
}

.ai-doodle--2,
.ai-doodle--4,
.ai-doodle--6,
.ai-doodle--8,
[data-theme="dark"] .ai-doodle--2,
[data-theme="dark"] .ai-doodle--4,
[data-theme="dark"] .ai-doodle--6,
[data-theme="dark"] .ai-doodle--8 {
    opacity: .13;
}

@keyframes daimCircuitDrift {
    to {
        transform: translate3d(55px, 30px, 0);
    }
}

.hero__visual--orb {
    position: relative;
    width: 100%;
    max-width: none;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hero__visual--orb::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 390px;
    height: 390px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 208, 224, .13), rgba(16, 96, 224, .07) 38%, transparent 70%);
    filter: blur(12px);
}

[data-theme="dark"] .hero__visual--orb::before {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(0, 208, 224, .2), rgba(16, 96, 224, .12) 38%, transparent 70%);
    filter: blur(18px);
}

.ai-orb {
    position: relative;
    z-index: 3;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-orb__core {
    position: relative;
    z-index: 5;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: daimOrbBreathe 7s ease-in-out infinite;
}

.ai-sphere {
    position: relative;
    width: 92px;
    height: 92px;
    perspective: 300px;
    transform-style: preserve-3d;
}

.ai-sphere__aura {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(0, 208, 224, .72), transparent 38%, rgba(16, 96, 224, .75), transparent 78%);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 72%, transparent 74%);
    mask: radial-gradient(circle, transparent 58%, #000 60%, #000 72%, transparent 74%);
    animation: daimAuraSpin 14s linear infinite;
}

.ai-sphere__aura--2 {
    inset: -14px;
    opacity: .65;
    animation-duration: 21s;
    animation-direction: reverse;
}

.ai-sphere__ball {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .98), transparent 24%), radial-gradient(circle at 48% 48%, #23d7e7, #117be8 43%, #0d46bb 72%, #071c61 100%);
    box-shadow: inset -12px -14px 28px rgba(0, 0, 0, .38), inset 7px 8px 20px rgba(255, 255, 255, .18), 0 0 32px rgba(0, 208, 224, .38), 0 0 68px rgba(16, 96, 224, .22);
}

.ai-sphere__ball-inner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 20deg, rgba(255, 255, 255, .18), transparent, rgba(0, 208, 224, .25), transparent);
    mix-blend-mode: screen;
    animation: daimAuraSpin 24s linear infinite;
}

.ai-sphere__ball-shimmer {
    position: absolute;
    inset: -25%;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%);
    animation: daimShimmer 8s ease-in-out infinite;
}

.ai-sphere__core-light {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #fff, rgba(0, 208, 224, .35) 52%, transparent 72%);
    animation: daimCoreLight 5s ease-in-out infinite;
}

.ai-sphere__scan {
    position: absolute;
    left: 9%;
    right: 9%;
    height: 2px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
    box-shadow: 0 0 14px rgba(255, 255, 255, .7);
    animation: daimSphereScan 7s ease-in-out infinite;
}

.ai-sphere__ring3d {
    position: absolute;
    border: 1.2px solid rgba(0, 208, 224, .34);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.ai-sphere__ring3d--1 {
    inset: -9px;
    animation: daimRingOne 18s linear infinite;
}

.ai-sphere__ring3d--2 {
    inset: -16px;
    border-color: rgba(16, 96, 224, .25);
    animation: daimRingTwo 24s linear infinite;
}

.ai-sphere__ripple {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 208, 224, .38);
    border-radius: 50%;
    animation: daimRipple 7s ease-out infinite;
}

.ai-sphere__ripple--2 {
    animation-delay: 3.5s;
    border-color: rgba(16, 96, 224, .32);
}

.ai-sphere__particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px var(--cyan);
}

.ai-sphere__particle:nth-of-type(1) {
    animation: daimParticleOne 15s linear infinite;
}

.ai-sphere__particle:nth-of-type(2) {
    animation: daimParticleTwo 19s linear infinite;
}

.ai-sphere__particle:nth-of-type(3) {
    animation: daimParticleOne 23s linear infinite reverse;
}

.ai-sphere__particle:nth-of-type(4) {
    animation: daimParticleTwo 27s linear infinite reverse;
}

.ai-orb__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(16, 96, 224, .14);
}

.ai-orb__ring--1 {
    inset: 34px;
    border-style: dashed;
    animation: daimAuraSpin 32s linear infinite;
}

.ai-orb__ring--2 {
    inset: 12px;
    border-color: rgba(0, 208, 224, .12);
    animation: daimAuraSpin 44s linear infinite reverse;
}

.ai-orb__ring--3 {
    inset: -14px;
    border-style: dotted;
    border-color: rgba(16, 96, 224, .1);
    animation: daimAuraSpin 58s linear infinite;
}

.ai-orb__pulse {
    position: absolute;
    inset: 65px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 208, 224, .12), transparent 72%);
    animation: daimOrbBreathe 8s ease-in-out infinite;
}

.ai-orb__label {
    position: absolute;
    z-index: 6;
    bottom: 54px;
    padding: 5px 10px;
    border: 1px solid rgba(16, 96, 224, .12);
    border-radius: 100px;
    color: var(--brand);
    background: var(--bg-glass);
    font-family: var(--font-display);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .12em;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .ai-orb__label {
    color: var(--cyan);
}

.hero-float-card {
    position: absolute;
    z-index: 5;
    min-width: 185px;
    min-height: 68px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 17px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 16px 42px rgba(8, 45, 98, .12), inset 0 1px rgba(255, 255, 255, .85);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    animation: daimCardFloat 10s ease-in-out infinite;
}

[data-theme="dark"] .hero-float-card {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(15, 25, 42, .78);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .3);
}

.hero-float-card--knowledge {
    top: 56px;
    left: 0;
}

.hero-float-card--channels {
    top: 92px;
    right: -8px;
    animation-delay: -2.5s;
}

.hero-float-card--tasks {
    bottom: 72px;
    left: 8px;
    animation-delay: -5s;
}

.hero-float-card--leads {
    bottom: 42px;
    right: -2px;
    animation-delay: -7.5s;
}

.hero-float-card__icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--brand);
    background: rgba(16, 96, 224, .1);
}

.hero-float-card__icon--cyan {
    color: #00a7ba;
    background: rgba(0, 208, 224, .11);
}

.hero-float-card__icon--green {
    color: #159463;
    background: rgba(34, 184, 122, .1);
}

.hero-float-card__icon--violet {
    color: #6957d9;
    background: rgba(105, 87, 217, .1);
}

.hero-float-card__icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-float-card>span:nth-child(2) {
    display: grid;
}

.hero-float-card strong {
    color: var(--text);
    font-size: .69rem;
    white-space: nowrap;
}

.hero-float-card small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .52rem;
    white-space: nowrap;
}

.hero-float-card i {
    width: 7px;
    height: 7px;
    margin-inline-start: auto;
    border-radius: 50%;
    background: #22b87a;
    box-shadow: 0 0 0 5px rgba(34, 184, 122, .09);
}

.hero-float-card b {
    margin-inline-start: auto;
    padding: 3px 7px;
    border-radius: 6px;
    color: #159463;
    background: rgba(34, 184, 122, .1);
    font-size: .48rem;
}

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

@keyframes daimShimmer {
    0% {
        transform: translateX(-120%);
    }

    65%,
    100% {
        transform: translateX(120%);
    }
}

@keyframes daimCoreLight {
    50% {
        opacity: .65;
        transform: translate(-50%, -50%) scale(1.35);
    }
}

@keyframes daimSphereScan {

    0%,
    100% {
        top: 16%;
        opacity: 0;
    }

    15%,
    85% {
        opacity: 1;
    }

    50% {
        top: 84%;
    }
}

@keyframes daimRingOne {
    from {
        transform: rotateX(72deg) rotateZ(0);
    }

    to {
        transform: rotateX(72deg) rotateZ(360deg);
    }
}

@keyframes daimRingTwo {
    from {
        transform: rotateX(72deg) rotateY(62deg) rotateZ(0);
    }

    to {
        transform: rotateX(72deg) rotateY(62deg) rotateZ(-360deg);
    }
}

@keyframes daimRipple {
    from {
        transform: scale(.7);
        opacity: .65;
    }

    to {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes daimParticleOne {
    from {
        transform: rotate(0) translateY(-58px) rotate(0);
    }

    to {
        transform: rotate(360deg) translateY(-58px) rotate(-360deg);
    }
}

@keyframes daimParticleTwo {
    from {
        transform: rotate(90deg) translateY(-72px) rotate(-90deg);
    }

    to {
        transform: rotate(450deg) translateY(-72px) rotate(-450deg);
    }
}

@keyframes daimOrbBreathe {
    50% {
        transform: scale(1.04);
    }
}

@keyframes daimCardFloat {
    50% {
        transform: translateY(-8px);
    }
}

@media (max-width: 1100px) {
    .hero__visual--orb {
        transform: scale(.9);
    }
}

@media (max-width: 900px) {
    .hero__visual--orb {
        max-width: 560px;
        height: 500px;
        transform: none;
    }
}

@media (max-width: 560px) {
    .hero__visual--orb {
        height: 470px;
        transform: scale(.88);
        margin: -25px auto;
    }

    .hero-float-card {
        min-width: 165px;
    }

    .hero-float-card--knowledge {
        left: -6px;
    }

    .hero-float-card--channels {
        right: -6px;
    }

    .hero-float-card--tasks {
        left: -4px;
    }

    .hero-float-card--leads {
        right: -4px;
    }
}

@media (max-width: 420px) {
    .hero__visual--orb {
        transform: scale(.76);
        margin: -55px -12%;
        width: 124%;
    }
}

.ai-pattern__backdrop {
    opacity: .72;
}

.daim-network__line {
    stroke: url(#daimPatternGradient);
    stroke-width: 1.25;
    opacity: .18;
    stroke-dasharray: 5 13;
    animation-duration: 70s;
}

.daim-network__line--two {
    animation-duration: 82s;
}

.daim-network__line--three {
    animation-duration: 76s;
}

.daim-network__line--four {
    animation-duration: 90s;
}

.daim-network__signal {
    opacity: .13;
    stroke-width: 1.8;
    animation-duration: 44s;
}

.daim-nodes {
    opacity: .78;
}

.daim-node__glow {
    opacity: .34;
}

.daim-node {
    opacity: .62;
}

.daim-node__ring {
    opacity: .28;
}

.daim-ai-core {
    display: block;
    opacity: .1;
}

[data-theme="dark"] .ai-pattern__backdrop {
    opacity: .82;
}

[data-theme="dark"] .daim-network__line {
    opacity: .23;
}

[data-theme="dark"] .daim-network__signal {
    opacity: .17;
}

[data-theme="dark"] .daim-ai-core {
    opacity: .15;
}

.ai-doodle {
    opacity: .24;
}

.ai-doodle--2,
.ai-doodle--4,
.ai-doodle--6,
.ai-doodle--8 {
    opacity: .19;
}

[data-theme="dark"] .ai-doodle {
    opacity: .27;
}

[data-theme="dark"] .ai-doodle--2,
[data-theme="dark"] .ai-doodle--4,
[data-theme="dark"] .ai-doodle--6,
[data-theme="dark"] .ai-doodle--8 {
    opacity: .21;
}

@media (max-width: 900px) {
    .ai-pattern__backdrop {
        opacity: .52;
    }

    .ai-doodle {
        opacity: .15;
    }

    .daim-ai-core {
        opacity: .065;
    }
}

@media (max-width: 600px) {
    .ai-pattern__backdrop {
        opacity: .42;
    }

    .daim-ai-core {
        display: none;
    }

    .ai-doodle {
        display: grid;
        width: 52px;
        height: 52px;
        opacity: .12;
    }

    .ai-doodle svg {
        width: 28px;
        height: 28px;
    }

    .ai-doodle--2,
    .ai-doodle--4,
    .ai-doodle--6,
    .ai-doodle--8 {
        display: none;
    }
}

.hero__benefits {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.hero__benefits>span {
    min-height: 38px;
    padding: 8px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(16, 96, 224, .1);
    border-radius: 11px;
    color: var(--text-soft);
    background: rgba(255, 255, 255, .5);
    box-shadow: inset 0 1px rgba(255, 255, 255, .7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: .67rem;
    font-weight: 700;
}

.hero__benefits svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    padding: 3px;
    border-radius: 6px;
    fill: none;
    stroke: var(--brand);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    background: rgba(16, 96, 224, .07);
}

[data-theme="dark"] .hero__benefits>span {
    background: rgba(0, 208, 224, .04);
    border-color: rgba(0, 208, 224, .12);
}

[data-theme="dark"] .hero__benefits svg {
    color: var(--cyan);
    stroke: var(--cyan);
    background: rgba(0, 208, 224, .1);
}

.hero__benefits+.hero__cta {
    margin-top: 18px;
}

.hero__cta .btn--ghost {
    background: rgba(255, 255, 255, .52);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

[data-theme="dark"] .hero__cta .btn--ghost {
    background: rgba(255, 255, 255, .025);
}

@media (max-width: 900px) {
    .hero__benefits {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .hero__benefits {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 290px;
        margin-inline: auto;
        margin-top: 22px;
    }

    .hero__benefits>span {
        justify-content: flex-start;
    }

    .hero__cta {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hero__cta .btn {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .hero {
        padding: 118px 0 58px;
    }

    .hero__inner {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .hero__content {
        order: 1;
        width: 100%;
        max-width: 720px;
    }

    .hero__visual--orb {
        order: 2;
    }

    .hero__badge {
        margin-bottom: 17px;
    }

    .hero__title,
    html[dir="rtl"] .hero__title {
        margin-bottom: 15px;
    }

    .hero__desc,
    html[dir="rtl"] .hero__desc {
        margin-top: 0;
        margin-bottom: 18px;
    }

    .hero__benefits,
    html[dir="rtl"] .hero__benefits {
        margin-top: 0;
        margin-bottom: 23px;
    }

    .hero__benefits+.hero__cta {
        margin-top: 0;
    }

    .hero__stats {
        display: none;
    }

    .hero__visual--orb {
        height: 430px;
        margin-top: 4px;
    }
}

@media (max-width: 560px) {
    .hero {
        padding: 106px 0 42px;
    }

    .hero__inner {
        gap: 20px;
    }

    .hero__badge {
        min-height: 34px;
        max-width: calc(100vw - 48px);
        margin-bottom: 16px;
        white-space: normal;
        justify-content: center;
    }

    .hero__title,
    html[dir="rtl"] .hero__title {
        margin-bottom: 14px;
        font-size: clamp(2.15rem, 10.4vw, 2.85rem);
        line-height: 1.35;
    }

    .hero__desc,
    html[dir="rtl"] .hero__desc {
        max-width: 420px;
        margin-bottom: 18px;
        font-size: .88rem;
        line-height: 1.85;
    }

    .hero__benefits,
    html[dir="rtl"] .hero__benefits {
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 23px;
        display: grid;
        grid-template-columns: repeat(2, auto);
        gap: 10px 14px;
        text-align: start;
    }

    .hero__benefits>span {
        min-height: 0;
        padding: 0;
        justify-content: flex-start;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        font-size: .66rem;
        white-space: nowrap;
    }

    [data-theme="dark"] .hero__benefits>span {
        border: 0;
        background: transparent;
    }

    .hero__benefits>span:last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .hero__benefits svg {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
        padding: 3px;
        border-radius: 50%;
        color: #fff;
        stroke: currentColor;
        background: var(--gradient);
    }

    .hero__benefits>span:nth-child(2) svg {
        background: linear-gradient(135deg, #078dad, #00c8dc);
    }

    .hero__benefits>span:nth-child(3) svg {
        background: linear-gradient(135deg, #159463, #22b87a);
    }

    .hero__cta {
        width: auto;
        margin: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .hero__cta .btn {
        width: auto;
        min-width: 138px;
        min-height: 48px;
        padding-inline: 17px;
        font-size: .78rem;
    }

    .hero__visual--orb {
        width: 112%;
        height: 390px;
        margin: -5px -6% -18px;
        transform: scale(.86);
    }
}

@media (max-width: 390px) {

    .hero__benefits,
    html[dir="rtl"] .hero__benefits {
        gap: 9px 10px;
    }

    .hero__benefits>span {
        font-size: .61rem;
    }

    .hero__cta {
        width: 100%;
        flex-direction: column;
    }

    .hero__cta .btn {
        width: 100%;
        max-width: 290px;
    }

    .hero__visual--orb {
        transform: scale(.78);
        margin-top: -28px;
        margin-bottom: -45px;
    }
}

@media (max-width: 767.98px) {
    .hero {
        padding: 94px 0 26px;
    }

    .hero__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-inline: 20px;
    }

    .hero__content,
    html[dir="rtl"] .hero__content {
        display: contents;
    }

    .hero__badge {
        order: 1;
        justify-self: center;
        align-self: center;
        margin: 0 auto 11px;
    }

    .hero__title,
    html[dir="rtl"] .hero__title {
        order: 2;
        margin: 0 auto 9px;
    }

    .hero__desc,
    html[dir="rtl"] .hero__desc {
        order: 3;
        margin: 0 auto;
    }

    .hero__visual--orb,
    html[dir="rtl"] .hero__visual--orb {
        order: 4;
        position: relative;
        width: min(100%, 430px);
        height: 286px;
        margin: 12px auto 10px;
        padding: 0;
        overflow: visible;
        transform: none;
    }

    .hero__visual--orb::before {
        width: 218px;
        height: 218px;
        filter: none;
        border: 1px solid rgba(16, 96, 224, .1);
        background: radial-gradient(circle, rgba(255, 255, 255, .42), rgba(16, 96, 224, .045) 58%, transparent 70%);
    }

    .ai-orb {
        width: 184px;
        height: 184px;
        transform: scale(.82);
    }

    .hero-float-card {
        position: absolute;
        z-index: 5;
        display: flex;
        min-width: 0;
        min-height: 46px;
        margin: 0;
        padding: 7px 9px;
        gap: 6px;
        border-radius: 11px;
        animation: daimCardFloat 14s ease-in-out infinite;
    }

    .hero-float-card--knowledge {
        width: 196px;
        top: 18px;
        right: 0;
        bottom: auto;
        left: auto;
        animation-delay: -2s;
    }

    .hero-float-card--channels {
        width: 150px;
        top: 18px;
        left: 0;
        right: auto;
        bottom: auto;
        animation-delay: -5s;
    }

    .hero-float-card--tasks {
        width: 190px;
        right: 0;
        bottom: 16px;
        top: auto;
        left: auto;
        animation-delay: -8s;
    }

    .hero-float-card--leads {
        width: 178px;
        left: 0;
        bottom: 16px;
        top: auto;
        right: auto;
        animation-delay: -11s;
    }

    .hero-float-card__icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .hero-float-card__icon svg {
        width: 15px;
        height: 15px;
    }

    .hero-float-card strong {
        font-size: .53rem;
    }

    .hero-float-card small {
        font-size: .43rem;
    }

    .hero-float-card b {
        font-size: .4rem;
    }

    .ai-orb__label {
        bottom: 24px;
        font-size: .45rem;
    }

    .hero__benefits,
    html[dir="rtl"] .hero__benefits {
        order: 5;
        margin: 0 auto 14px;
    }

    .hero__cta,
    html[dir="rtl"] .hero__cta {
        order: 6;
        margin: 0 auto;
    }

    .hero__stats {
        display: none;
    }
}

@media (max-width: 399.98px) {
    .hero__visual--orb {
        height: 270px;
    }

    .hero-float-card--knowledge {
        width: 174px;
    }

    .hero-float-card--channels {
        width: 136px;
    }

    .hero-float-card--tasks {
        width: 170px;
    }

    .hero-float-card--leads {
        width: 160px;
    }
}

@media (max-width: 767.98px) {
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        padding-top: 94px;
        padding-bottom: 34px;
        align-items: stretch;
    }

    .hero .container {
        display: flex;
        width: 100%;
    }

    .hero__inner {
        width: 100%;
        min-height: calc(100svh - 128px);
        align-content: start;
    }

    .hero__visual--orb,
    html[dir="rtl"] .hero__visual--orb {
        height: 300px;
        margin-top: 16px;
        margin-bottom: 30px;
    }

    .hero__benefits,
    html[dir="rtl"] .hero__benefits {
        margin-bottom: 18px;
    }
}

@media (max-width: 399.98px) {

    .hero__visual--orb,
    html[dir="rtl"] .hero__visual--orb {
        height: 286px;
        margin-top: 12px;
        margin-bottom: 25px;
    }
}

.hero__visual--orb::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 350px;
    height: 350px;
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(16, 96, 224, .14);
    border-radius: 50%;
    animation: daimAuraSpin 80s linear infinite;
}

[data-theme="dark"] .hero__visual--orb::after {
    border-color: rgba(0, 208, 224, .16);
}

.hero-float-card,
html[dir="rtl"] .hero-float-card {
    min-width: 0;
    width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(16, 96, 224, .13);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 30px rgba(8, 45, 98, .12), inset 0 1px rgba(255, 255, 255, .9);
    animation: daimSatelliteFloat 12s ease-in-out infinite;
}

[data-theme="dark"] .hero-float-card {
    background: rgba(15, 27, 46, .82);
    border-color: rgba(0, 208, 224, .14);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .05);
}

.hero-float-card>span:nth-child(2),
.hero-float-card>i,
.hero-float-card>b {
    display: none;
}

.hero-float-card__icon,
html[dir="rtl"] .hero-float-card__icon {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 50%;
    box-shadow: inset 0 1px rgba(255, 255, 255, .65);
}

.hero-float-card__icon svg {
    width: 20px;
    height: 20px;
}

.hero-float-card--knowledge {
    top: 72px;
    left: 36px;
    right: auto;
    bottom: auto;
}

.hero-float-card--channels {
    top: 68px;
    right: 34px;
    left: auto;
    bottom: auto;
    animation-delay: -3s;
}

.hero-float-card--tasks {
    bottom: 70px;
    left: 42px;
    right: auto;
    top: auto;
    animation-delay: -6s;
}

.hero-float-card--leads {
    bottom: 66px;
    right: 38px;
    left: auto;
    top: auto;
    animation-delay: -9s;
}

@keyframes daimSatelliteFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-7px) scale(1.04);
    }
}

@media (max-width: 767.98px) {
    .hero__visual--orb::after {
        width: 238px;
        height: 238px;
    }

    .hero-float-card,
    html[dir="rtl"] .hero-float-card {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
        padding: 0;
        border-radius: 50%;
    }

    .hero-float-card__icon,
    html[dir="rtl"] .hero-float-card__icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }

    .hero-float-card__icon svg {
        width: 18px;
        height: 18px;
    }

    .hero-float-card--knowledge {
        top: 38px;
        left: 48px;
        right: auto;
    }

    .hero-float-card--channels {
        top: 38px;
        right: 48px;
        left: auto;
    }

    .hero-float-card--tasks {
        bottom: 38px;
        left: 54px;
        right: auto;
    }

    .hero-float-card--leads {
        bottom: 38px;
        right: 54px;
        left: auto;
    }
}

@media (max-width: 399.98px) {
    .hero-float-card--knowledge {
        left: 38px;
    }

    .hero-float-card--channels {
        right: 38px;
    }

    .hero-float-card--tasks {
        left: 44px;
    }

    .hero-float-card--leads {
        right: 44px;
    }
}

.hero-float-card,
html[dir="rtl"] .hero-float-card {
    width: auto;
    min-width: 178px;
    height: auto;
    min-height: 62px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 16px;
    border: 1px solid rgba(16, 96, 224, .11);
    background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(247, 251, 255, .74));
    box-shadow: 0 15px 38px rgba(8, 45, 98, .105), inset 0 1px rgba(255, 255, 255, .92);
}

[data-theme="dark"] .hero-float-card {
    background: linear-gradient(145deg, rgba(19, 31, 51, .92), rgba(12, 23, 40, .85));
    border-color: rgba(0, 208, 224, .14);
    box-shadow: 0 17px 40px rgba(0, 0, 0, .32), 0 0 20px rgba(0, 208, 224, .04), inset 0 1px rgba(255, 255, 255, .05);
}

.hero-float-card::after {
    content: '';
    position: absolute;
    width: 44px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(16, 96, 224, .25), transparent);
}

.hero-float-card--knowledge::after,
.hero-float-card--tasks::after {
    right: -36px;
}

.hero-float-card--channels::after,
.hero-float-card--leads::after {
    left: -36px;
    transform: rotate(180deg);
}

.hero-float-card>span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.hero-float-card>i {
    display: block;
    width: 7px;
    height: 7px;
    margin-inline-start: auto;
    border-radius: 50%;
    background: #22b87a;
    box-shadow: 0 0 0 5px rgba(34, 184, 122, .08);
}

.hero-float-card>b {
    display: inline-flex;
    margin-inline-start: auto;
    padding: 3px 7px;
    border-radius: 6px;
    color: #159463;
    background: rgba(34, 184, 122, .1);
    font-size: .48rem;
}

.hero-float-card__icon,
html[dir="rtl"] .hero-float-card__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
}

.hero-float-card strong {
    color: var(--text);
    font-size: .67rem;
    font-weight: 750;
    line-height: 1.45;
    white-space: nowrap;
}

.hero-float-card small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .5rem;
    line-height: 1.45;
    white-space: nowrap;
}

.hero-float-card--knowledge {
    top: 58px;
    left: -8px;
    right: auto;
    bottom: auto;
}

.hero-float-card--channels {
    top: 88px;
    right: -14px;
    left: auto;
    bottom: auto;
}

.hero-float-card--tasks {
    bottom: 76px;
    left: 0;
    right: auto;
    top: auto;
}

.hero-float-card--leads {
    bottom: 47px;
    right: -8px;
    left: auto;
    top: auto;
}

@media (max-width: 767.98px) {

    .hero-float-card,
    html[dir="rtl"] .hero-float-card {
        width: auto;
        min-width: 0;
        height: auto;
        min-height: 48px;
        padding: 7px 9px;
        gap: 6px;
        border-radius: 12px;
    }

    .hero-float-card::after {
        width: 28px;
    }

    .hero-float-card--knowledge::after,
    .hero-float-card--tasks::after {
        right: -23px;
    }

    .hero-float-card--channels::after,
    .hero-float-card--leads::after {
        left: -23px;
    }

    .hero-float-card__icon,
    html[dir="rtl"] .hero-float-card__icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        border-radius: 9px;
    }

    .hero-float-card__icon svg {
        width: 15px;
        height: 15px;
    }

    .hero-float-card strong {
        font-size: .55rem;
    }

    .hero-float-card small {
        font-size: .42rem;
    }

    .hero-float-card>i {
        width: 6px;
        height: 6px;
        box-shadow: 0 0 0 3px rgba(34, 184, 122, .08);
    }

    .hero-float-card>b {
        padding: 2px 5px;
        font-size: .38rem;
    }

    .hero-float-card--knowledge {
        width: 174px;
        top: 18px;
        right: 0;
        left: auto;
        bottom: auto;
    }

    .hero-float-card--channels {
        width: 145px;
        top: 18px;
        left: 0;
        right: auto;
        bottom: auto;
    }

    .hero-float-card--tasks {
        width: 168px;
        right: 0;
        bottom: 16px;
        left: auto;
        top: auto;
    }

    .hero-float-card--leads {
        width: 165px;
        left: 0;
        bottom: 16px;
        right: auto;
        top: auto;
    }
}

@media (max-width: 399.98px) {
    .hero-float-card--knowledge {
        width: 158px;
    }

    .hero-float-card--channels {
        width: 132px;
    }

    .hero-float-card--tasks {
        width: 153px;
    }

    .hero-float-card--leads {
        width: 150px;
    }

    .hero-float-card strong {
        font-size: .5rem;
    }

    .hero-float-card small {
        font-size: .38rem;
    }
}

.hero {
    min-height: min(920px, 100svh);
    padding: 132px 0 82px;
    align-items: center;
}

.hero .container {
    width: 100%;
    max-width: 1280px;
    padding: 0;
}

.hero__inner {
    width: 100%;
    grid-template-columns: minmax(0, 1.04fr) minmax(420px, .96fr);
    gap: clamp(46px, 6vw, 88px);
    padding-inline: clamp(28px, 5vw, 64px);
    align-items: center;
}

.hero__content {
    max-width: 600px;
}

.hero__badge {
    margin-bottom: 20px;
}

.hero__title {
    max-width: 590px;
    margin: 0 0 17px;
    font-size: clamp(3rem, 4.4vw, 4.15rem);
    line-height: 1.16;
}

html[dir="rtl"] .hero__title {
    max-width: 610px;
    margin-bottom: 17px;
    font-size: clamp(2.75rem, 4.1vw, 3.85rem);
    line-height: 1.4;
}

.hero__desc,
html[dir="rtl"] .hero__desc {
    max-width: 565px;
    margin: 0 0 19px;
    font-size: .98rem;
    line-height: 1.85;
}

.hero__benefits,
html[dir="rtl"] .hero__benefits {
    gap: 8px;
    margin: 0 0 25px;
}

.hero__benefits>span,
html[dir="rtl"] .hero__benefits>span {
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: .69rem;
}

.hero__cta,
.hero__benefits+.hero__cta {
    gap: 10px;
    margin-top: 0;
}

.hero__cta .btn {
    min-height: 48px;
    padding-inline: 22px;
    border-radius: 12px;
    font-size: .85rem;
}

.hero__cta .btn--primary::after {
    content: '→';
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1;
    transition: transform .25s ease;
}

.hero__cta .btn--primary:hover::after {
    transform: translateX(3px);
}

html[dir="rtl"] .hero__cta .btn--primary::after {
    content: '←';
}

html[dir="rtl"] .hero__cta .btn--primary:hover::after {
    transform: translateX(-3px);
}

.hero__visual--orb {
    height: 520px;
    transform: none;
}

.hero__visual--orb::after {
    animation: daimHeroRingSpin 80s linear infinite;
}

@keyframes daimHeroRingSpin {
    from {
        transform: translate(-50%, -50%) rotate(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media (max-width: 1180px) and (min-width: 992px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr);
        gap: 30px;
        padding-inline: 34px;
    }

    .hero__title {
        font-size: 3.45rem;
    }

    html[dir="rtl"] .hero__title {
        font-size: 3.15rem;
    }

    .hero__visual--orb {
        height: 490px;
    }
}

@media (max-width: 991.98px) {
    .hero {
        min-height: auto;
        padding: 118px 0 58px;
    }

    .hero .container {
        padding: 0 24px;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-inline: 0;
    }

    .hero__content,
    html[dir="rtl"] .hero__content {
        max-width: 680px;
        margin-inline: auto;
        text-align: center;
    }

    .hero__badge {
        margin-inline: auto;
    }

    .hero__title,
    html[dir="rtl"] .hero__title {
        max-width: 660px;
        margin-inline: auto;
    }

    .hero__desc,
    html[dir="rtl"] .hero__desc {
        margin-inline: auto;
    }

    .hero__benefits,
    html[dir="rtl"] .hero__benefits,
    .hero__cta,
    html[dir="rtl"] .hero__cta {
        justify-content: center;
    }

    .hero__visual--orb,
    html[dir="rtl"] .hero__visual--orb {
        width: min(100%, 560px);
        height: 430px;
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .hero {
        min-height: 100vh;
        min-height: 100svh;
        padding: 94px 0 26px;
        align-items: stretch;
    }

    .hero .container {
        display: flex;
        width: 100%;
        padding: 0;
    }

    .hero__inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: calc(100svh - 120px);
        gap: 0;
        padding-inline: 14px;
    }

    .hero__content,
    html[dir="rtl"] .hero__content {
        display: contents;
    }

    .hero__badge {
        order: 1;
        max-width: calc(100vw - 42px);
        min-height: 30px;
        margin: 0 auto 11px;
        padding: 5px 10px;
        justify-content: center;
        white-space: normal;
        font-size: .62rem;
        line-height: 1.45;
    }

    .hero__badge>span:last-child {
        font-size: .62rem;
    }

    .hero__title,
    html[dir="rtl"] .hero__title {
        order: 2;
        max-width: 430px;
        margin: 0 auto 9px;
        font-size: clamp(2.2rem, 10vw, 2.85rem);
        line-height: 1.35;
        text-align: center;
    }

    .hero__desc,
    html[dir="rtl"] .hero__desc {
        order: 3;
        max-width: 490px;
        margin: 0 auto;
        font-size: .84rem;
        line-height: 1.78;
        text-align: center;
    }

    .hero__visual--orb,
    html[dir="rtl"] .hero__visual--orb {
        order: 4;
        position: relative;
        width: min(100%, 430px);
        height: 286px;
        margin: 12px auto 10px;
        padding: 0;
        overflow: visible;
        transform: none;
    }

    .hero__visual--orb::before {
        width: 218px;
        height: 218px;
        border: 1px solid rgba(16, 96, 224, .1);
        background: radial-gradient(circle, rgba(255, 255, 255, .42), rgba(16, 96, 224, .045) 58%, transparent 70%);
        filter: none;
    }

    .hero__visual--orb::after {
        width: 180px;
        height: 180px;
    }

    .ai-orb {
        width: 184px;
        height: 184px;
        transform: scale(.82);
    }

    .ai-orb__label {
        bottom: 24px;
        font-size: .45rem;
    }

    .hero-float-card,
    html[dir="rtl"] .hero-float-card {
        min-width: 0;
        min-height: 46px;
        padding: 7px 9px;
        gap: 6px;
        border-radius: 11px;
        animation: daimCardFloat 10s ease-in-out infinite;
    }

    .hero-float-card--knowledge,
    html[dir="rtl"] .hero-float-card--knowledge {
        width: 196px;
        top: 18px;
        right: 0;
        bottom: auto;
        left: auto;
        animation-delay: -1s;
    }

    .hero-float-card--channels,
    html[dir="rtl"] .hero-float-card--channels {
        width: 150px;
        top: 18px;
        left: 0;
        right: auto;
        bottom: auto;
        animation-delay: -3.5s;
    }

    .hero-float-card--tasks,
    html[dir="rtl"] .hero-float-card--tasks {
        width: 190px;
        right: 0;
        bottom: 16px;
        top: auto;
        left: auto;
        animation-delay: -6s;
    }

    .hero-float-card--leads,
    html[dir="rtl"] .hero-float-card--leads {
        width: 178px;
        left: 0;
        bottom: 16px;
        top: auto;
        right: auto;
        animation-delay: -8.5s;
    }

    .hero-float-card__icon,
    html[dir="rtl"] .hero-float-card__icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .hero-float-card strong {
        font-size: .53rem;
    }

    .hero-float-card small {
        font-size: .43rem;
    }

    .hero-float-card b {
        font-size: .4rem;
    }

    .hero__benefits,
    html[dir="rtl"] .hero__benefits {
        order: 5;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        width: 100%;
        max-width: 430px;
        margin: 0 auto 15px;
    }

    .hero__benefits>span,
    html[dir="rtl"] .hero__benefits>span,
    .hero__benefits>span:last-child,
    html[dir="rtl"] .hero__benefits>span:last-child {
        grid-column: auto;
        min-height: 32px;
        padding: 5px 4px;
        justify-content: center;
        border: 1px solid rgba(16, 96, 224, .1);
        border-radius: 10px;
        background: rgba(255, 255, 255, .5);
        box-shadow: 0 7px 18px rgba(8, 45, 98, .035);
        font-size: .56rem;
        text-align: center;
        white-space: normal;
    }

    .hero__benefits svg {
        flex: 0 0 15px;
        width: 15px;
        height: 15px;
        padding: 2px;
        border-radius: 5px;
    }

    .hero__cta,
    html[dir="rtl"] .hero__cta {
        order: 6;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
    }

    .hero__cta .btn,
    html[dir="rtl"] .hero__cta .btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding-inline: 10px;
        border-radius: 11px;
        font-size: .74rem;
    }
}

@media (max-width: 399.98px) {

    .hero__visual--orb,
    html[dir="rtl"] .hero__visual--orb {
        height: 270px;
    }

    .hero-float-card--knowledge,
    html[dir="rtl"] .hero-float-card--knowledge {
        width: 174px;
    }

    .hero-float-card--channels,
    html[dir="rtl"] .hero-float-card--channels {
        width: 136px;
    }

    .hero-float-card--tasks,
    html[dir="rtl"] .hero-float-card--tasks {
        width: 170px;
    }

    .hero-float-card--leads,
    html[dir="rtl"] .hero-float-card--leads {
        width: 160px;
    }

    .hero-float-card strong {
        font-size: .48rem;
    }

    .hero-float-card small {
        font-size: .38rem;
    }
}

[data-theme="dark"] .hero__title,
html[dir="rtl"][data-theme="dark"] .hero__title {
    color: #f3f8ff;
}

[data-theme="dark"] .hero__title .gradient-text {
    background: linear-gradient(110deg, #55a4ff, #15d8e4 62%, #73eff2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 10px 30px rgba(0, 208, 224, .12);
}

[data-theme="dark"] .hero__desc,
html[dir="rtl"][data-theme="dark"] .hero__desc {
    color: #b8c8d9;
}

[data-theme="dark"] .hero__badge {
    color: #7ce9ef;
    background: rgba(8, 24, 41, .84);
    border-color: rgba(0, 208, 224, .18);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16), inset 0 1px rgba(255, 255, 255, .025);
}

[data-theme="dark"] .hero__visual--orb::before {
    background: radial-gradient(circle, rgba(0, 208, 224, .15), rgba(16, 96, 224, .075) 48%, transparent 72%);
    border-color: rgba(0, 208, 224, .14);
    box-shadow: inset 0 0 70px rgba(0, 208, 224, .035), 0 0 90px rgba(16, 96, 224, .08);
}

[data-theme="dark"] .hero__visual--orb::after {
    border-color: rgba(72, 204, 225, .2);
}

[data-theme="dark"] .hero-float-card,
html[dir="rtl"][data-theme="dark"] .hero-float-card {
    background: linear-gradient(145deg, rgba(17, 30, 48, .96), rgba(8, 18, 32, .96));
    border-color: rgba(82, 157, 232, .18);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .035);
}

[data-theme="dark"] .hero-float-card--channels,
html[dir="rtl"][data-theme="dark"] .hero-float-card--channels {
    border-color: rgba(45, 211, 222, .22);
}

[data-theme="dark"] .hero-float-card--tasks,
html[dir="rtl"][data-theme="dark"] .hero-float-card--tasks {
    border-color: rgba(52, 201, 139, .2);
}

[data-theme="dark"] .hero-float-card--leads,
html[dir="rtl"][data-theme="dark"] .hero-float-card--leads {
    border-color: rgba(144, 117, 255, .22);
}

[data-theme="dark"] .hero-float-card strong {
    color: #eef6ff;
}

[data-theme="dark"] .hero-float-card small {
    color: #8fa4ba;
}

[data-theme="dark"] .hero-float-card__icon {
    color: #75aaff;
    background: rgba(64, 128, 236, .15);
    box-shadow: none;
}

[data-theme="dark"] .hero-float-card__icon--cyan {
    color: #55e0e8;
    background: rgba(28, 194, 208, .14);
}

[data-theme="dark"] .hero-float-card__icon--green {
    color: #66dda5;
    background: rgba(42, 184, 122, .14);
}

[data-theme="dark"] .hero-float-card__icon--violet {
    color: #b0a0ff;
    background: rgba(116, 91, 225, .16);
}

[data-theme="dark"] .hero-float-card::after {
    background: linear-gradient(90deg, rgba(69, 169, 235, .22), transparent);
}

[data-theme="dark"] .ai-orb__label {
    color: #67e7ef;
    background: rgba(4, 15, 28, .88);
    border-color: rgba(0, 208, 224, .16);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .26);
}

[data-theme="dark"] .hero__benefits>span,
html[dir="rtl"][data-theme="dark"] .hero__benefits>span {
    color: #d4e0ec;
    background: linear-gradient(145deg, rgba(18, 31, 48, .92), rgba(10, 21, 35, .92));
    border-color: rgba(0, 208, 224, .12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .025);
}

[data-theme="dark"] .hero__benefits>span:nth-child(2) {
    border-color: rgba(64, 150, 244, .18);
}

[data-theme="dark"] .hero__benefits>span:nth-child(3) {
    border-color: rgba(45, 199, 137, .17);
}

[data-theme="dark"] .hero__cta .btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #126fe7, #03b7d2);
    border-color: transparent;
    box-shadow: 0 13px 30px rgba(3, 151, 211, .25);
}

[data-theme="dark"] .hero__cta .btn--primary:hover {
    box-shadow: 0 17px 38px rgba(3, 174, 218, .32);
}

[data-theme="dark"] .hero__cta .btn--ghost {
    color: #e5f1fc;
    background: rgba(9, 22, 38, .9);
    border-color: rgba(0, 208, 224, .14);
    box-shadow: inset 0 1px rgba(255, 255, 255, .025), 0 10px 24px rgba(0, 0, 0, .14);
}

[data-theme="dark"] .hero__cta .btn--ghost:hover {
    color: #6de8ed;
    border-color: rgba(0, 208, 224, .34);
    background: rgba(10, 31, 48, .96);
}

.trusted--marquee {
    position: relative;
    z-index: 2;
    padding: 76px 0 82px;
    overflow: hidden;
    border-block: 1px solid rgba(16, 96, 224, .08);
    background:
        radial-gradient(circle at 20% 30%, rgba(16, 96, 224, .065), transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(0, 208, 224, .055), transparent 32%),
        rgba(255, 255, 255, .16);
}

.trusted--marquee .trusted__inner {
    max-width: 900px;
    margin: 0 auto;
    padding-inline: 24px;
    text-align: center;
}

.trusted--marquee .trusted__heading {
    margin-bottom: 34px;
}

.trusted__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    margin-bottom: 13px;
    padding: 6px 12px;
    border: 1px solid rgba(16, 96, 224, .12);
    border-radius: 100px;
    color: var(--brand);
    background: rgba(16, 96, 224, .07);
    font-size: .7rem;
    font-weight: 750;
}

.trusted__eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22b87a;
    box-shadow: 0 0 0 5px rgba(34, 184, 122, .09);
}

.trusted--marquee .trusted__heading h2 {
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3.3vw, 2.65rem);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.035em;
    text-wrap: balance;
}

html[dir="rtl"] .trusted--marquee .trusted__heading h2 {
    letter-spacing: 0;
    line-height: 1.55;
}

.trusted--marquee .trusted__heading p {
    max-width: 650px;
    margin: 13px auto 0;
    color: var(--text-soft);
    font-size: .92rem;
    line-height: 1.75;
}

.logo-streams {
    display: grid;
    gap: 14px;
}

.logo-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 4px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee__track {
    display: flex;
    width: max-content;
    direction: ltr;
    animation: daimLogoScroll 38s linear infinite;
    will-change: transform;
}

.logo-marquee--reverse .logo-marquee__track {
    animation-direction: reverse;
    animation-duration: 43s;
}

.logo-marquee__group {
    display: flex;
    flex: none;
    align-items: center;
    gap: 16px;
    direction: ltr;
    padding-right: 16px;
}

.logo-marquee:hover .logo-marquee__track {
    animation-play-state: paused;
}

html[dir="rtl"] .logo-marquee--forward .logo-marquee__track {
    animation-direction: reverse;
}

html[dir="rtl"] .logo-marquee--reverse .logo-marquee__track {
    animation-direction: normal;
}

.virtual-logo {
    --logo-color: var(--brand);
    position: relative;
    width: 252px;
    height: 92px;
    flex: 0 0 252px;
    display: flex;
    align-items: center;
    gap: 14px;
    overflow: hidden;
    padding: 13px 18px 13px 13px;
    border: 1px solid rgba(16, 96, 224, .1);
    border-radius: 20px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 12px 32px rgba(8, 45, 98, .06), inset 0 1px rgba(255, 255, 255, .84);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.virtual-logo::before,
.virtual-logo::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    opacity: .12;
}

.virtual-logo::before {
    width: 74px;
    height: 74px;
    right: -28px;
    top: -30px;
    background: var(--logo-color);
}

.virtual-logo::after {
    width: 38px;
    height: 38px;
    right: 28px;
    bottom: -24px;
    border: 8px solid var(--logo-color);
}

.virtual-logo:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--logo-color) 38%, transparent);
    box-shadow: 0 18px 38px rgba(8, 45, 98, .11), inset 0 1px rgba(255, 255, 255, .92);
}

.virtual-logo__mark {
    position: relative;
    z-index: 1;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255, 255, 255, .24), transparent 48%), var(--logo-color);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--logo-color) 25%, transparent), inset 0 1px rgba(255, 255, 255, .3);
    font-family: var(--font-display);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.virtual-logo__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
}

.virtual-logo__mark:has(.virtual-logo__img) {
    background: #fff;
}

.virtual-logo__copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.virtual-logo__copy strong {
    color: var(--text);
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 800;
    white-space: nowrap;
}

.virtual-logo__copy small {
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}

.virtual-logo--violet {
    --logo-color: #6957d9;
}

.virtual-logo--cyan {
    --logo-color: #0ca8c8;
}

.virtual-logo--amber {
    --logo-color: #e99a25;
}

.virtual-logo--rose {
    --logo-color: #df4f8c;
}

.virtual-logo--green {
    --logo-color: #17a879;
}

.virtual-logo--blue {
    --logo-color: #377ee8;
}

html[dir="rtl"] .virtual-logo {
    direction: rtl;
    padding: 13px 13px 13px 18px;
}

html[dir="rtl"] .virtual-logo__copy {
    text-align: right;
}

[data-theme="dark"] .trusted--marquee {
    border-color: rgba(0, 208, 224, .09);
    background: radial-gradient(circle at 20% 30%, rgba(16, 96, 224, .09), transparent 30%), radial-gradient(circle at 80% 70%, rgba(0, 208, 224, .065), transparent 32%), rgba(7, 13, 24, .16);
}

[data-theme="dark"] .trusted__eyebrow {
    color: var(--cyan);
    background: rgba(0, 208, 224, .07);
    border-color: rgba(0, 208, 224, .13);
}

[data-theme="dark"] .virtual-logo {
    background: rgba(15, 25, 42, .82);
    border-color: rgba(0, 208, 224, .11);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .23), inset 0 1px rgba(255, 255, 255, .025);
}

@keyframes daimLogoScroll {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 767.98px) {
    .trusted--marquee {
        padding: 54px 0 58px;
    }

    .trusted--marquee .trusted__inner {
        padding-inline: 20px;
    }

    .trusted--marquee .trusted__heading {
        margin-bottom: 22px;
    }

    .trusted--marquee .trusted__heading h2 {
        font-size: clamp(1.55rem, 7vw, 2rem);
        line-height: 1.5;
    }

    .trusted--marquee .trusted__heading p {
        font-size: .82rem;
    }

    .logo-streams {
        gap: 9px;
    }

    .logo-marquee {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    }

    .logo-marquee__track {
        animation-duration: 30s;
    }

    .logo-marquee--reverse .logo-marquee__track {
        animation-duration: 34s;
    }

    .logo-marquee__group {
        gap: 10px;
        padding-right: 10px;
    }

    .virtual-logo {
        width: 208px;
        height: 76px;
        flex-basis: 208px;
        gap: 11px;
        padding: 10px 14px 10px 10px;
        border-radius: 16px;
    }

    .virtual-logo__mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 14px;
        font-size: .72rem;
    }

    .virtual-logo__copy strong {
        font-size: .77rem;
    }

    .virtual-logo__copy small {
        font-size: .59rem;
    }

    html[dir="rtl"] .virtual-logo {
        padding: 10px 10px 10px 14px;
    }
}

.logo-streams .logo-marquee,
.logo-streams .logo-marquee__track,
.logo-streams .logo-marquee__group {
    direction: ltr;
}

.logo-streams .logo-marquee__track {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: both;
}

html[dir="ltr"] .logo-marquee--forward .logo-marquee__track,
html:not([dir="rtl"]) .logo-marquee--forward .logo-marquee__track {
    animation-name: daimLogoStreamLeft;
}

html[dir="ltr"] .logo-marquee--reverse .logo-marquee__track,
html:not([dir="rtl"]) .logo-marquee--reverse .logo-marquee__track {
    animation-name: daimLogoStreamRight;
}

html[dir="rtl"] .logo-marquee--forward .logo-marquee__track {
    animation-name: daimLogoStreamRight;
    animation-direction: normal;
}

html[dir="rtl"] .logo-marquee--reverse .logo-marquee__track {
    animation-name: daimLogoStreamLeft;
    animation-direction: normal;
}

@keyframes daimLogoStreamLeft {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes daimLogoStreamRight {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-streams .logo-marquee__track {
        animation: none;
        transform: none;
    }
}

.pricing {
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-alt), var(--bg));
}

.pricing__grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: 1240px;
    margin: 0 auto;
    align-items: stretch;
}

.pricing__grid--four .price-card {
    min-width: 0;
    min-height: 530px;
    padding: 25px 20px 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(16, 96, 224, .09);
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .94), rgba(247, 251, 255, .79));
    box-shadow: 0 14px 40px rgba(8, 45, 98, .065), inset 0 1px rgba(255, 255, 255, .9);
}

.pricing__grid--four .price-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(16, 96, 224, .28), rgba(0, 208, 224, .28));
    opacity: .55;
}

.pricing__grid--four .price-card:hover {
    transform: translateY(-7px);
    border-color: rgba(16, 96, 224, .19);
    box-shadow: 0 24px 55px rgba(8, 45, 98, .12), inset 0 1px rgba(255, 255, 255, .95);
}

.pricing__grid--four .price-card--popular {
    border-color: rgba(16, 96, 224, .4);
    background: linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(238, 247, 255, .9));
    box-shadow: 0 22px 55px rgba(16, 96, 224, .15), inset 0 1px #fff;
}

.pricing__grid--four .price-card--popular::before {
    height: 5px;
    opacity: 1;
    background: var(--gradient);
}

.pricing__grid--four .price-card__badge {
    top: 14px;
    left: auto;
    right: 14px;
    transform: none;
    padding: 5px 10px;
    font-size: .58rem;
}

html[dir="rtl"] .pricing__grid--four .price-card__badge {
    right: auto;
    left: 14px;
}

.pricing__grid--four .price-card__badge--soft {
    color: var(--brand);
    background: rgba(16, 96, 224, .08);
    border: 1px solid rgba(16, 96, 224, .12);
    box-shadow: none;
}

.price-card__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--brand);
    background: var(--gradient-soft);
    box-shadow: inset 0 1px rgba(255, 255, 255, .75);
}

.price-card__icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.price-card--popular .price-card__icon {
    color: #fff;
    background: var(--gradient);
    box-shadow: 0 10px 24px rgba(16, 96, 224, .2);
}

.pricing__grid--four .price-card__head h3 {
    font-size: 1.13rem;
    font-weight: 800;
}

.pricing__grid--four .price-card__head p {
    min-height: 44px;
    margin-top: 6px;
    font-size: .72rem;
    line-height: 1.65;
}

.pricing__grid--four .price-card__price {
    margin: 18px 0 0;
    gap: 5px;
    align-items: flex-end;
    direction: ltr;
    justify-content: flex-start;
}

html[dir="rtl"] .pricing__grid--four .price-card__price {
    justify-content: flex-end;
}

.pricing__grid--four .price-card__amount {
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    line-height: 1;
    letter-spacing: -.045em;
}

.pricing__grid--four .price-card__currency {
    padding-bottom: 2px;
    font-size: .68rem;
    font-weight: 700;
}

.price-card__period {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: .62rem;
}

.price-card__quota {
    margin: 20px 0;
    padding: 13px 14px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    border: 1px solid rgba(16, 96, 224, .08);
    border-radius: 13px;
    background: rgba(16, 96, 224, .045);
}

.price-card__quota strong {
    color: var(--brand);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
}

.price-card__quota span {
    color: var(--text-soft);
    font-size: .67rem;
    font-weight: 650;
}

.pricing-offer-frame {
    position: relative;
    margin-top: 14px;
    padding: 30px 20px 20px;
    border: 2.5px solid transparent;
    border-radius: 30px;
    background:
        linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)) padding-box,
        linear-gradient(120deg, #1060e0, #00d0e0, #a855f7, #ff5470, #ffb86b, #1060e0) border-box;
    background-size: auto, 300% 300%;
    animation: offerFrameShift 7s ease-in-out infinite, offerFrameGlow 3s ease-in-out infinite;
}

@keyframes offerFrameShift {
    0%, 100% { background-position: 0 0, 0% 50%; }
    50% { background-position: 0 0, 100% 50%; }
}

@keyframes offerFrameGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(0, 208, 224, 0); }
    50% { box-shadow: 0 8px 34px rgba(0, 208, 224, .22); }
}

.pricing-offer-frame__label {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    border-radius: 100px;
    background: var(--gradient);
    color: #fff;
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(16, 96, 224, .32);
    white-space: nowrap;
    animation: offerLabelFloat 3.2s ease-in-out infinite;
}

.pricing-offer-frame__label em {
    font-style: normal;
    padding: 2px 9px;
    border-radius: 7px;
    background: rgba(255, 255, 255, .22);
    font-size: .66rem;
    font-weight: 800;
}

@keyframes offerLabelFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-3px); }
}

.price-card__quota-old {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 650;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
    opacity: .7;
    align-self: center;
}

.price-card__old-amount {
    align-self: flex-end;
    padding-bottom: 4px;
    color: var(--text-muted);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
    text-decoration-thickness: 2px;
    opacity: .7;
}

.pricing__grid--four .price-card__features {
    flex: 1;
    gap: 11px;
    margin-bottom: 22px;
}

.pricing__grid--four .price-card__features li {
    font-size: .7rem;
    line-height: 1.55;
}

.pricing__grid--four .price-card__features li::before {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    font-size: .5rem;
}

.pricing__grid--four .btn--block {
    min-height: 46px;
    margin-top: auto;
    font-size: .76rem;
}

[data-theme="dark"] .pricing__grid--four .price-card {
    background: linear-gradient(155deg, rgba(18, 29, 48, .94), rgba(11, 21, 37, .88));
    border-color: rgba(0, 208, 224, .085);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .03);
}

[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border-color: rgba(0, 208, 224, .35);
    background: linear-gradient(155deg, rgba(20, 34, 55, .98), rgba(9, 27, 44, .94));
    box-shadow: 0 22px 55px rgba(0, 0, 0, .34);
}

[data-theme="dark"] .price-card__quota {
    background: rgba(0, 208, 224, .045);
    border-color: rgba(0, 208, 224, .08);
}

[data-theme="dark"] .price-card__quota strong {
    color: var(--cyan);
}

.custom-plan {
    max-width: 1240px;
    margin: 22px auto 0;
    padding: 24px 26px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(16, 96, 224, .12);
    border-radius: 22px;
    background: linear-gradient(115deg, rgba(16, 96, 224, .075), rgba(255, 255, 255, .8) 46%, rgba(0, 208, 224, .075));
    box-shadow: 0 14px 40px rgba(8, 45, 98, .07);
}

.custom-plan::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    right: -75px;
    top: -85px;
    border-radius: 50%;
    background: var(--cyan);
    opacity: .07;
}

.custom-plan__icon {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: var(--gradient);
    box-shadow: var(--shadow-brand);
}

.custom-plan__icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.custom-plan__copy {
    position: relative;
    z-index: 1;
}

.custom-plan__copy>span {
    color: var(--brand);
    font-size: .65rem;
    font-weight: 800;
}

.custom-plan__copy h3 {
    margin-top: 3px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 800;
}

.custom-plan__copy p {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: .74rem;
}

.custom-plan .btn {
    position: relative;
    z-index: 1;
    min-height: 46px;
}

[data-theme="dark"] .custom-plan {
    background: linear-gradient(115deg, rgba(16, 96, 224, .12), rgba(14, 25, 43, .9) 46%, rgba(0, 208, 224, .09));
    border-color: rgba(0, 208, 224, .12);
}

[data-theme="dark"] .custom-plan__copy>span {
    color: var(--cyan);
}

@media (max-width: 1100px) {
    .pricing__grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        max-width: 760px;
    }

    .pricing__grid--four .price-card {
        min-height: 505px;
    }

    .custom-plan {
        max-width: 760px;
    }
}

@media (max-width: 650px) {
    .pricing__grid--four {
        grid-template-columns: 1fr;
        max-width: 410px;
    }

    .pricing__grid--four .price-card {
        min-height: 0;
        padding: 23px 20px 20px;
    }

    .pricing__grid--four .price-card__head p {
        min-height: 0;
    }

    .pricing__grid--four .price-card__price {
        justify-content: flex-start;
    }

    html[dir="rtl"] .pricing__grid--four .price-card__price {
        justify-content: flex-end;
    }

    .custom-plan {
        max-width: 410px;
        grid-template-columns: auto 1fr;
        padding: 21px;
    }

    .custom-plan .btn {
        grid-column: 1/-1;
        width: 100%;
    }
}

.pricing__grid--four .price-card {
    min-height: 605px;
    padding: 22px 18px 18px;
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 208, 224, .065), transparent 28%),
        linear-gradient(160deg, rgba(255, 255, 255, .97), rgba(246, 250, 255, .84));
}

.pricing__grid--four .price-card::before {
    left: 18px;
    right: 18px;
    top: 0;
    height: 3px;
    border-radius: 0 0 4px 4px;
}

.pricing__grid--four .price-card--popular {
    transform: translateY(-8px);
    background: radial-gradient(circle at 100% 0%, rgba(0, 208, 224, .14), transparent 31%), linear-gradient(160deg, #fff, rgba(238, 247, 255, .96));
}

.pricing__grid--four .price-card--popular:hover {
    transform: translateY(-13px);
}

.price-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 15px;
    border-radius: 15px;
}

.pricing__grid--four .price-card__head {
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-soft);
}

.pricing__grid--four .price-card__head h3 {
    font-size: 1.18rem;
}

.pricing__grid--four .price-card__head p {
    min-height: 38px;
    font-size: .69rem;
}

.pricing__grid--four .price-card__price {
    margin-top: 17px;
}

.pricing__grid--four .price-card__amount {
    font-size: clamp(1.9rem, 2.4vw, 2.3rem);
}

.price-card__period {
    margin-top: 6px;
}

.price-card__quota {
    margin: 17px 0 10px;
    border: 0;
    background: linear-gradient(135deg, rgba(16, 96, 224, .075), rgba(0, 208, 224, .055));
}

.price-card__channels {
    margin-bottom: 17px;
    padding: 12px;
    border: 1px solid rgba(16, 96, 224, .08);
    border-radius: 15px;
    background: rgba(255, 255, 255, .53);
}

.price-card__channels>span {
    display: block;
    margin-bottom: 9px;
    color: var(--text-muted);
    font-size: .59rem;
    font-weight: 750;
}

.channel-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    direction: ltr;
}

.channel-option {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    box-shadow: 0 6px 14px rgba(8, 45, 98, .1);
    transition: transform .25s ease, box-shadow .25s ease;
}

.channel-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 18px rgba(8, 45, 98, .16);
}

.channel-option svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.channel-option b {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.channel-option--facebook {
    background: #1877f2;
}

.channel-option--messenger {
    background: linear-gradient(135deg, #00b2ff, #6559ff);
}

.channel-option--web {
    background: linear-gradient(135deg, #1060e0, #0ca8c8);
}

.channel-option--whatsapp {
    background: #20b95a;
}

.channel-option--instagram {
    background: linear-gradient(135deg, #f9ce34, #ee2a7b 52%, #6228d7);
}

.channel-option--tiktok {
    color: #fff;
    background: linear-gradient(135deg, #161823, #25283a);
    box-shadow: -2px 2px 0 rgba(0, 242, 234, .32), 2px -2px 0 rgba(255, 0, 80, .25);
}

.pricing__grid--four .price-card__features {
    gap: 10px;
    margin-bottom: 19px;
}

.pricing__grid--four .price-card__features li {
    font-size: .68rem;
}

[data-theme="dark"] .pricing__grid--four .price-card {
    background: radial-gradient(circle at 100% 0%, rgba(0, 208, 224, .07), transparent 29%), linear-gradient(160deg, rgba(18, 30, 49, .97), rgba(10, 21, 37, .92));
}

[data-theme="dark"] .pricing__grid--four .price-card--popular {
    background: radial-gradient(circle at 100% 0%, rgba(0, 208, 224, .13), transparent 31%), linear-gradient(160deg, rgba(20, 35, 57, .99), rgba(8, 27, 44, .96));
}

[data-theme="dark"] .price-card__channels {
    background: rgba(255, 255, 255, .025);
    border-color: rgba(0, 208, 224, .08);
}

@media (max-width: 1100px) {
    .pricing__grid--four .price-card {
        min-height: 570px;
    }

    .pricing__grid--four .price-card--popular {
        transform: none;
    }

    .pricing__grid--four .price-card--popular:hover {
        transform: translateY(-7px);
    }
}

@media (max-width: 650px) {
    .pricing__grid--four .price-card {
        min-height: 0;
        border-radius: 22px;
    }

    .price-card__channels {
        padding: 11px 12px;
    }

    .channel-option {
        width: 32px;
        height: 32px;
    }
}

.pricing__grid--four {
    gap: 20px;
}

.pricing__grid--four .price-card {
    --plan-a: #18365f;
    --plan-b: #1060e0;
    min-height: 570px;
    padding: 22px 20px 20px;
    border: 0;
    border-radius: 25px;
    background: var(--bg-card);
    box-shadow: 0 18px 52px rgba(17, 42, 78, .1);
    isolation: isolate;
}

.pricing__grid--four .price-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0 0 auto;
    height: 145px;
    border-radius: 25px 25px 34px 34px;
    background:
        radial-gradient(circle at 88% 0%, rgba(255, 255, 255, .2), transparent 37%),
        linear-gradient(135deg, var(--plan-a), var(--plan-b));
    opacity: 1;
}

.pricing__grid--four .price-card::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 118px;
    left: 0;
    right: 0;
    height: 52px;
    border-radius: 50% 50% 0 0 / 26px 26px 0 0;
    background: var(--bg-card);
}

.pricing__grid--four .price-card--free {
    --plan-a: #334d6d;
    --plan-b: #55799f;
}

.pricing__grid--four .price-card--starter {
    --plan-a: #1459c7;
    --plan-b: #08a9dc;
}

.pricing__grid--four .price-card--popular {
    --plan-a: #095be1;
    --plan-b: #00cddd;
    transform: translateY(-8px);
    box-shadow: 0 24px 62px rgba(16, 96, 224, .2);
}

.pricing__grid--four .price-card--scale {
    --plan-a: #174b7e;
    --plan-b: #624fd0;
}

.pricing__grid--four .price-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 65px rgba(17, 42, 78, .16);
}

.pricing__grid--four .price-card--popular:hover {
    transform: translateY(-13px);
}

.pricing__grid--four .price-card>* {
    position: relative;
    z-index: 1;
}

.pricing__grid--four .price-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 13px;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px rgba(255, 255, 255, .2);
}

.pricing__grid--four .price-card__head {
    min-height: 68px;
    padding: 0;
    border: 0;
}

.pricing__grid--four .price-card__head h3 {
    color: #fff;
    font-size: 1.13rem;
}

.pricing__grid--four .price-card__head p {
    max-width: 210px;
    min-height: 0;
    margin-top: 4px;
    color: rgba(255, 255, 255, .72);
    font-size: .64rem;
    line-height: 1.55;
}

.pricing__grid--four .price-card__badge {
    z-index: 4;
    top: 18px;
    color: var(--plan-a);
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .11);
}

.pricing__grid--four .price-card__badge--soft {
    color: var(--plan-a);
    border: 0;
}

.pricing__grid--four .price-card__price {
    margin: 28px 0 0;
}

.pricing__grid--four .price-card__amount {
    color: var(--text);
    font-size: clamp(2rem, 2.55vw, 2.45rem);
}

.pricing__grid--four .price-card__currency {
    color: var(--text-muted);
}

.price-card__period {
    margin-top: 3px;
}

.price-card__quota {
    margin: 16px 0 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--plan-b) 12%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--plan-b) 7%, var(--bg-card));
}

.price-card__quota strong {
    color: var(--plan-b);
}

.price-card__channels {
    margin-bottom: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.price-card__channels>span {
    margin-bottom: 8px;
    font-size: .57rem;
}

.channel-options {
    gap: 7px;
}

.channel-option {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    box-shadow: 0 5px 12px rgba(8, 45, 98, .11);
}

.pricing__grid--four .price-card__features {
    margin: 0 0 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-soft);
}

.pricing__grid--four .price-card__features li {
    font-size: .67rem;
}

.pricing__grid--four .price-card__features li::before {
    color: #fff;
    background: linear-gradient(135deg, var(--plan-a), var(--plan-b));
}

.pricing__grid--four .price-card .btn {
    border-radius: 13px;
}

.pricing__grid--four .price-card .btn--primary {
    background: linear-gradient(135deg, var(--plan-a), var(--plan-b));
}

.pricing__grid--four .price-card .btn--ghost {
    color: var(--plan-a);
    border-color: color-mix(in srgb, var(--plan-b) 20%, transparent);
    background: color-mix(in srgb, var(--plan-b) 5%, var(--bg-card));
}

.pricing__grid--four .price-card .btn--ghost:hover {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--plan-a), var(--plan-b));
}

[data-theme="dark"] .pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    background: #111c2d;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .pricing__grid--four .price-card::after {
    background: #111c2d;
}

[data-theme="dark"] .price-card__quota {
    background: color-mix(in srgb, var(--plan-b) 10%, #111c2d);
}

[data-theme="dark"] .pricing__grid--four .price-card .btn--ghost {
    color: #dce9fa;
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .09);
}

@media (max-width: 1100px) {

    .pricing__grid--four .price-card,
    .pricing__grid--four .price-card--popular {
        min-height: 550px;
        transform: none;
    }

    .pricing__grid--four .price-card--popular:hover {
        transform: translateY(-7px);
    }
}

@media (max-width: 650px) {
    .pricing__grid--four .price-card {
        min-height: 0;
        padding: 21px 19px 19px;
    }

    .pricing__grid--four .price-card::before {
        height: 140px;
    }

    .pricing__grid--four .price-card::after {
        top: 114px;
    }
}

.pricing {
    background:
        radial-gradient(circle at 14% 18%, rgba(16, 96, 224, .09), transparent 27%),
        radial-gradient(circle at 86% 74%, rgba(0, 208, 224, .075), transparent 30%),
        linear-gradient(180deg, var(--bg-alt), var(--bg));
}

.pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    min-height: 565px;
    padding: 24px 20px 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .38));
    box-shadow: 0 18px 55px rgba(20, 49, 88, .1), inset 0 1px rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    transform: none;
}

.pricing__grid--four .price-card::before {
    content: '';
    position: absolute;
    z-index: 0;
    width: 190px;
    height: 190px;
    top: -105px;
    right: -85px;
    left: auto;
    border-radius: 50%;
    background: var(--plan-b);
    opacity: .1;
    filter: blur(2px);
}

html[dir="rtl"] .pricing__grid--four .price-card::before {
    right: auto;
    left: -85px;
}

.pricing__grid--four .price-card::after {
    content: '';
    position: absolute;
    z-index: 0;
    width: 120px;
    height: 120px;
    top: auto;
    left: -65px;
    right: auto;
    bottom: -60px;
    border-radius: 50%;
    background: var(--plan-a);
    opacity: .055;
    filter: blur(4px);
}

html[dir="rtl"] .pricing__grid--four .price-card::after {
    left: auto;
    right: -65px;
}

.pricing__grid--four .price-card:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--plan-b) 24%, white);
    box-shadow: 0 28px 70px rgba(20, 49, 88, .15), inset 0 1px rgba(255, 255, 255, .95);
}

.pricing__grid--four .price-card--popular,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border: 1px solid color-mix(in srgb, var(--plan-b) 42%, white);
    background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(238, 249, 255, .48));
    box-shadow: 0 24px 65px rgba(16, 96, 224, .17), 0 0 0 1px rgba(0, 208, 224, .07), inset 0 1px rgba(255, 255, 255, .95);
}

.pricing__grid--four .price-card--popular:hover {
    transform: translateY(-7px);
}

.pricing__grid--four .price-card>*:not(.price-card__icon):not(.price-card__badge) {
    position: relative;
    z-index: 2;
}

.pricing__grid--four .price-card__icon,
.pricing__grid--four .price-card__badge {
    z-index: 2;
}

.pricing__grid--four .price-card__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 17px;
    color: var(--plan-b);
    border: 1px solid color-mix(in srgb, var(--plan-b) 15%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--plan-b) 9%, rgba(255, 255, 255, .55));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--plan-b) 10%, transparent), inset 0 1px rgba(255, 255, 255, .8);
}

.pricing__grid--four .price-card--popular .price-card__icon {
    color: #fff;
    border-color: transparent;
    background: var(--gradient);
}

.pricing__grid--four .price-card__head {
    min-height: 62px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(16, 96, 224, .075);
}

.pricing__grid--four .price-card__head h3 {
    color: var(--text);
    font-size: 1.16rem;
}

.pricing__grid--four .price-card__head p {
    color: var(--text-muted);
    font-size: .67rem;
}

.pricing__grid--four .price-card__badge,
.pricing__grid--four .price-card__badge--soft {
    top: 18px;
    color: var(--plan-b);
    border: 1px solid color-mix(in srgb, var(--plan-b) 14%, transparent);
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 7px 20px rgba(20, 49, 88, .08);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.pricing__grid--four .price-card__price {
    margin-top: 18px;
}

.price-card__quota {
    border: 1px solid color-mix(in srgb, var(--plan-b) 10%, transparent);
    background: color-mix(in srgb, var(--plan-b) 6%, rgba(255, 255, 255, .48));
}

.price-card__channels {
    padding: 12px;
    border: 1px solid rgba(16, 96, 224, .075);
    border-radius: 15px;
    background: rgba(255, 255, 255, .3);
}

.pricing__grid--four .price-card__features {
    border-top-color: rgba(16, 96, 224, .075);
}

.pricing__grid--four .price-card .btn--ghost {
    color: var(--text);
    border-color: rgba(16, 96, 224, .1);
    background: rgba(255, 255, 255, .42);
}

.pricing__grid--four .price-card .btn--ghost:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--plan-a), var(--plan-b));
}

[data-theme="dark"] .pricing {
    background: radial-gradient(circle at 14% 18%, rgba(16, 96, 224, .13), transparent 27%), radial-gradient(circle at 86% 74%, rgba(0, 208, 224, .09), transparent 30%), linear-gradient(180deg, #0c1422, #080f1c);
}

[data-theme="dark"] .pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border-color: rgba(255, 255, 255, .075);
    background: linear-gradient(145deg, rgba(24, 37, 58, .67), rgba(12, 23, 40, .52));
    box-shadow: 0 22px 62px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .035);
}

[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border-color: rgba(0, 208, 224, .25);
    box-shadow: 0 24px 68px rgba(0, 0, 0, .34), 0 0 0 1px rgba(0, 208, 224, .055);
}

[data-theme="dark"] .pricing__grid--four .price-card__badge,
[data-theme="dark"] .pricing__grid--four .price-card__badge--soft {
    color: var(--cyan);
    border-color: rgba(0, 208, 224, .12);
    background: rgba(7, 19, 34, .65);
}

[data-theme="dark"] .price-card__channels {
    border-color: rgba(0, 208, 224, .07);
    background: rgba(255, 255, 255, .018);
}

[data-theme="dark"] .price-card__quota {
    background: color-mix(in srgb, var(--plan-b) 8%, rgba(10, 20, 35, .5));
}

[data-theme="dark"] .pricing__grid--four .price-card .btn--ghost {
    color: #dce7f5;
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .028);
}

@media (max-width: 1100px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 555px;
    }
}

@media (max-width: 650px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 0;
        padding: 22px 19px 19px;
    }
}

.pricing {
    background:
        linear-gradient(135deg, rgba(16, 96, 224, .045) 0%, transparent 32%),
        linear-gradient(315deg, rgba(0, 208, 224, .04) 0%, transparent 34%),
        #f5f8fc;
}

.pricing__grid--four {
    gap: 18px;
}

.pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    min-height: 490px;
    padding: 20px 18px 18px;
    overflow: visible;
    border: 1px solid rgba(16, 42, 78, .1);
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 16px 42px rgba(24, 52, 88, .08), inset 0 1px rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
}

.pricing__grid--four .price-card::before,
.pricing__grid--four .price-card::after {
    content: none;
    display: none;
}

.pricing__grid--four .price-card:hover {
    transform: translateY(-6px);
    border-color: rgba(16, 96, 224, .25);
    box-shadow: 0 24px 55px rgba(24, 52, 88, .13), inset 0 1px #fff;
}

.pricing__grid--four .price-card--popular,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border: 1.5px solid rgba(16, 96, 224, .55);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 20px 50px rgba(16, 96, 224, .15), 0 0 0 4px rgba(16, 96, 224, .045), inset 0 1px #fff;
}

.pricing__grid--four .price-card--popular:hover {
    transform: translateY(-6px);
}

.pricing__grid--four .price-card__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 13px;
    color: #fff;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--plan-a), var(--plan-b));
    box-shadow: 0 9px 20px color-mix(in srgb, var(--plan-b) 22%, transparent);
}

.pricing__grid--four .price-card__head {
    min-height: 55px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(16, 42, 78, .075);
}

.pricing__grid--four .price-card__head h3 {
    color: #17243a;
    font-size: 1.08rem;
}

.pricing__grid--four .price-card__head p {
    max-width: 220px;
    min-height: 0;
    margin-top: 3px;
    color: #77859a;
    font-size: .61rem;
    line-height: 1.5;
}

.pricing__grid--four .price-card__badge,
.pricing__grid--four .price-card__badge--soft {
    top: 17px;
    padding: 4px 8px;
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--plan-a), var(--plan-b));
    box-shadow: 0 7px 16px color-mix(in srgb, var(--plan-b) 19%, transparent);
    font-size: .5rem;
}

.pricing__grid--four .price-card__price {
    margin: 14px 0 0;
    align-items: end;
}

.pricing__grid--four .price-card__amount {
    color: #152238;
    font-size: clamp(1.85rem, 2.3vw, 2.2rem);
}

.pricing__grid--four .price-card__currency {
    color: #758398;
    font-size: .61rem;
}

.price-card__period {
    margin-top: 2px;
    color: #8a96a8;
    font-size: .56rem;
}

.price-card__quota {
    margin: 13px 0 10px;
    padding: 10px 12px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--plan-b) 10%, #fff), color-mix(in srgb, var(--plan-b) 4%, #fff));
}

.price-card__quota strong {
    font-size: 1rem;
}

.price-card__quota span {
    font-size: .61rem;
}

.price-card__channels {
    margin: 0 0 11px;
    padding: 0;
    border: 0;
    background: transparent;
}

.price-card__channels>span {
    margin-bottom: 6px;
    color: #8793a4;
    font-size: .5rem;
}

.channel-options {
    flex-wrap: nowrap;
    gap: 5px;
}

.channel-option {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(8, 45, 98, .1);
}

.channel-option svg {
    width: 14px;
    height: 14px;
}

.channel-option b {
    font-size: .88rem;
}

.pricing__grid--four .price-card__features {
    gap: 8px;
    margin: 0 0 14px;
    padding-top: 11px;
    border-top: 1px solid rgba(16, 42, 78, .07);
}

.pricing__grid--four .price-card__features li {
    gap: 7px;
    color: #536176;
    font-size: .61rem;
    line-height: 1.45;
}

.pricing__grid--four .price-card__features li::before {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    font-size: .44rem;
}

.pricing__grid--four .price-card .btn {
    min-height: 42px;
    border-radius: 11px;
    font-size: .7rem;
}

.pricing__grid--four .price-card .btn--ghost {
    color: #173354;
    border: 1px solid rgba(16, 96, 224, .12);
    background: rgba(255, 255, 255, .72);
}

[data-theme="dark"] .pricing {
    background: linear-gradient(135deg, rgba(16, 96, 224, .08), transparent 32%), linear-gradient(315deg, rgba(0, 208, 224, .055), transparent 34%), #09111e;
}

[data-theme="dark"] .pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border-color: rgba(255, 255, 255, .085);
    background: rgba(18, 29, 47, .74);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .27), inset 0 1px rgba(255, 255, 255, .035);
}

[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border-color: rgba(0, 208, 224, .38);
    box-shadow: 0 20px 52px rgba(0, 0, 0, .32), 0 0 0 4px rgba(0, 208, 224, .035);
}

[data-theme="dark"] .pricing__grid--four .price-card__head h3,
[data-theme="dark"] .pricing__grid--four .price-card__amount {
    color: #edf3fb;
}

[data-theme="dark"] .pricing__grid--four .price-card__head p,
[data-theme="dark"] .pricing__grid--four .price-card__currency,
[data-theme="dark"] .price-card__period,
[data-theme="dark"] .price-card__channels>span {
    color: #8998ad;
}

[data-theme="dark"] .price-card__quota {
    background: color-mix(in srgb, var(--plan-b) 9%, #111c2d);
}

[data-theme="dark"] .pricing__grid--four .price-card__features li {
    color: #b9c4d3;
}

[data-theme="dark"] .pricing__grid--four .price-card .btn--ghost {
    color: #dce7f5;
    background: rgba(255, 255, 255, .025);
    border-color: rgba(255, 255, 255, .09);
}

@media (max-width: 1100px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 475px;
    }
}

@media (max-width: 650px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 0;
        padding: 20px 18px 17px;
    }

    .channel-option {
        width: 30px;
        height: 30px;
    }
}

.pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    min-height: 530px;
    padding: 24px 22px 20px;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(248, 251, 255, .66));
    box-shadow: 0 18px 48px rgba(24, 52, 88, .09), inset 0 1px rgba(255, 255, 255, 1), inset 0 3px color-mix(in srgb, var(--plan-b) 60%, transparent);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    backdrop-filter: blur(26px) saturate(150%);
}

.pricing__grid--four .price-card--popular,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border-color: rgba(16, 96, 224, .32);
    box-shadow: 0 22px 58px rgba(16, 96, 224, .15), 0 0 0 3px rgba(16, 96, 224, .04), inset 0 1px #fff, inset 0 3px var(--cyan);
}

.pricing__grid--four .price-card::before,
.pricing__grid--four .price-card::after {
    content: none !important;
    display: none !important;
}

.pricing__grid--four .price-card__badge,
.pricing__grid--four .price-card__badge--soft,
html[dir="rtl"] .pricing__grid--four .price-card__badge {
    position: absolute;
    inset: 18px 18px auto auto;
    width: max-content;
    min-width: 0;
    max-width: 120px;
    height: auto;
    padding: 5px 9px;
    transform: none;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--plan-a), var(--plan-b));
    box-shadow: 0 7px 17px color-mix(in srgb, var(--plan-b) 18%, transparent);
    font-size: .55rem;
    line-height: 1.3;
    white-space: nowrap;
}

html[dir="rtl"] .pricing__grid--four .price-card__badge {
    inset: 18px auto auto 18px;
}

.pricing__grid--four .price-card__icon {
    width: 48px;
    height: 48px;
    margin: 0 0 18px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--plan-a), var(--plan-b));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--plan-b) 22%, transparent);
}

.pricing__grid--four .price-card__icon svg {
    width: 24px;
    height: 24px;
}

.pricing__grid--four .price-card__head {
    min-height: 66px;
    padding: 0 0 15px;
    border-bottom: 1px solid rgba(16, 42, 78, .08);
}

.pricing__grid--four .price-card__head h3 {
    color: #152238;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.35;
}

.pricing__grid--four .price-card__head p {
    min-height: 0;
    margin-top: 5px;
    color: #708096;
    font-size: .69rem;
    line-height: 1.6;
}

.pricing__grid--four .price-card__price {
    margin: 19px 0 0;
    align-items: flex-end;
    gap: 6px;
}

.pricing__grid--four .price-card__amount {
    color: #111d31;
    font-size: clamp(2.05rem, 2.55vw, 2.5rem);
    line-height: .95;
    font-weight: 800;
}

.pricing__grid--four .price-card__currency {
    padding-bottom: 3px;
    color: #66768b;
    font-size: .68rem;
    font-weight: 700;
}

.price-card__period {
    margin-top: 7px;
    color: #8592a4;
    font-size: .62rem;
}

.price-card__quota {
    margin: 17px 0 14px;
    padding: 12px 14px;
    justify-content: space-between;
    border: 1px solid color-mix(in srgb, var(--plan-b) 11%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--plan-b) 7%, rgba(255, 255, 255, .65));
}

.price-card__quota strong {
    color: var(--plan-b);
    font-size: 1.08rem;
}

.price-card__quota span {
    color: #55657a;
    font-size: .65rem;
}

.price-card__channels {
    margin: 0 0 14px;
    padding: 0;
}

.price-card__channels>span {
    margin-bottom: 8px;
    color: #78879a;
    font-size: .58rem;
    line-height: 1.5;
}

.channel-options {
    gap: 7px;
}

.channel-option {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.pricing__grid--four .price-card__features {
    gap: 10px;
    margin: 0 0 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(16, 42, 78, .08);
}

.pricing__grid--four .price-card__features li {
    gap: 8px;
    color: #405169;
    font-size: .68rem;
    line-height: 1.55;
}

.pricing__grid--four .price-card__features li::before {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

.pricing__grid--four .price-card .btn {
    min-height: 46px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 800;
}

.pricing__grid--four .price-card .btn--ghost {
    color: #173354;
    border: 1px solid rgba(16, 96, 224, .13);
    background: rgba(255, 255, 255, .7);
}

[data-theme="dark"] .pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border-color: rgba(255, 255, 255, .09);
    background: linear-gradient(145deg, rgba(25, 39, 61, .82), rgba(13, 24, 41, .68));
    box-shadow: 0 20px 52px rgba(0, 0, 0, .29), inset 0 1px rgba(255, 255, 255, .045), inset 0 3px color-mix(in srgb, var(--plan-b) 65%, transparent);
}

[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border-color: rgba(0, 208, 224, .28);
    box-shadow: 0 23px 60px rgba(0, 0, 0, .34), 0 0 0 3px rgba(0, 208, 224, .035), inset 0 3px var(--cyan);
}

[data-theme="dark"] .pricing__grid--four .price-card__head h3,
[data-theme="dark"] .pricing__grid--four .price-card__amount {
    color: #f0f5fb;
}

[data-theme="dark"] .pricing__grid--four .price-card__head p,
[data-theme="dark"] .pricing__grid--four .price-card__currency,
[data-theme="dark"] .price-card__period,
[data-theme="dark"] .price-card__channels>span {
    color: #91a0b5;
}

[data-theme="dark"] .price-card__quota {
    background: color-mix(in srgb, var(--plan-b) 9%, rgba(14, 25, 42, .72));
}

[data-theme="dark"] .price-card__quota span,
[data-theme="dark"] .pricing__grid--four .price-card__features li {
    color: #bdc7d5;
}

@media (max-width: 1100px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 510px;
    }
}

@media (max-width: 650px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 0;
        padding: 22px 20px 19px;
    }
}

.pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card {
    min-height: 555px;
    padding-top: 19px;
}

.pricing__grid--four .price-card__icon {
    width: 38px;
    height: 38px;
    margin-bottom: 9px;
    border-radius: 11px;
}

.pricing__grid--four .price-card__icon svg {
    width: 20px;
    height: 20px;
}

.pricing__grid--four .price-card__head {
    min-height: 49px;
    padding-bottom: 10px;
}

.pricing__grid--four .price-card__head h3 {
    font-size: 1.06rem;
}

.pricing__grid--four .price-card__head p {
    margin-top: 2px;
    font-size: .6rem;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pricing__grid--four .price-card__price {
    margin-top: 13px;
}

.pricing__grid--four .price-card__amount {
    font-size: clamp(1.9rem, 2.25vw, 2.3rem);
}

.price-card__quota {
    margin-top: 12px;
}

html[dir="rtl"] .channel-options {
    justify-content: flex-end;
}

html[dir="ltr"] .channel-options {
    justify-content: flex-start;
}

.pricing__grid--four .price-card__features {
    flex: 1;
    gap: 9px;
    margin-bottom: 16px;
    padding-top: 12px;
}

.pricing__grid--four .price-card__features li {
    min-height: 20px;
    align-items: flex-start;
}

.pricing__grid--four .price-card__features li.is-disabled {
    color: #9ca7b5;
    opacity: .72;
}

.pricing__grid--four .price-card__features li.is-disabled::before {
    content: '×';
    color: #8b96a5;
    background: rgba(122, 136, 153, .11);
    border: 1px solid rgba(122, 136, 153, .14);
    font-size: .72rem;
    font-weight: 700;
}

[data-theme="dark"] .pricing__grid--four .price-card__features li.is-disabled {
    color: #66758a;
    opacity: .8;
}

[data-theme="dark"] .pricing__grid--four .price-card__features li.is-disabled::before {
    color: #718096;
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .055);
}

@media (max-width: 1100px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 535px;
    }
}

@media (max-width: 650px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 0;
    }

    .pricing__grid--four .price-card__head p {
        white-space: normal;
    }
}

.pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card {
    min-height: 610px;
}

.pricing__grid--four .price-card__features {
    gap: 8px;
}

.pricing__grid--four .price-card__features li {
    font-size: .64rem;
    line-height: 1.45;
}

@media (max-width: 1100px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 585px;
    }
}

@media (max-width: 650px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 0;
    }

    .pricing__grid--four .price-card__features li {
        font-size: .68rem;
    }
}

.pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card {
    min-height: 585px;
    padding-top: 18px;
}

.pricing__grid--four .price-card__icon {
    position: absolute;
    top: 17px;
    left: 18px;
    right: auto;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 12px;
}

html[dir="rtl"] .pricing__grid--four .price-card__icon {
    left: auto;
    right: 18px;
}

.pricing__grid--four .price-card__head {
    min-height: 48px;
    padding: 2px 0 10px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

html[dir="rtl"] .pricing__grid--four .price-card__head {
    padding: 2px 52px 10px 0;
}

.pricing__grid--four .price-card--popular .price-card__head,
.pricing__grid--four .price-card--scale .price-card__head {
    padding-right: 82px;
}

html[dir="rtl"] .pricing__grid--four .price-card--popular .price-card__head,
html[dir="rtl"] .pricing__grid--four .price-card--scale .price-card__head {
    padding-right: 52px;
    padding-left: 82px;
}

.pricing__grid--four .price-card__head h3 {
    font-size: 1.08rem;
    line-height: 1.25;
}

.pricing__grid--four .price-card__head p {
    margin-top: 3px;
    font-size: .62rem;
    line-height: 1.4;
}

.pricing__grid--four .price-card__badge,
.pricing__grid--four .price-card__badge--soft,
html[dir="rtl"] .pricing__grid--four .price-card__badge {
    top: 20px;
    right: 18px;
    left: auto;
}

html[dir="rtl"] .pricing__grid--four .price-card__badge {
    right: auto;
    left: 18px;
}

.pricing__grid--four .price-card__price {
    margin-top: 12px;
}

.price-card__quota {
    margin-top: 11px;
    margin-bottom: 12px;
}

.price-card__channels {
    margin-bottom: 12px;
}

.pricing__grid--four .price-card__features {
    gap: 9px;
    padding-top: 13px;
    margin-bottom: 15px;
}

.pricing__grid--four .price-card__features li {
    min-height: 22px;
    font-size: .72rem;
    line-height: 1.5;
}

.pricing__grid--four .price-card__features li::before {
    margin-top: 1px;
}

@media (max-width: 1100px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 565px;
    }

    .pricing__grid--four .price-card__features li {
        font-size: .7rem;
    }
}

@media (max-width: 650px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 0;
    }

    .pricing__grid--four .price-card__features li {
        font-size: .74rem;
    }
}

.pricing__grid--four .price-card {
    --tier: #50709a;
    --tier-strong: #294a73;
    --tier-soft: #eef3f8;
    --tier-surface: #f9fbfd;
}

.pricing__grid--four .price-card--starter {
    --tier: #1688df;
    --tier-strong: #105fc4;
    --tier-soft: #e8f5ff;
    --tier-surface: #f7fcff;
}

.pricing__grid--four .price-card--popular {
    --tier: #00bfcf;
    --tier-strong: #087be2;
    --tier-soft: #e3fbfc;
    --tier-surface: #f5feff;
}

.pricing__grid--four .price-card--scale {
    --tier: #6c5ce7;
    --tier-strong: #3f63c9;
    --tier-soft: #efedff;
    --tier-surface: #faf9ff;
}

.pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    position: relative;
    min-height: 610px;
    padding: 20px 20px 19px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tier) 30%, #dce5ef);
    border-radius: 21px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--tier-soft) 72%, #fff), var(--tier-surface) 45%, #fff 100%);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--tier) 10%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
}

.pricing__grid--four .price-card::before {
    content: '';
    display: block !important;
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 5px;
    height: auto;
    border-radius: 21px 0 0 21px;
    background: linear-gradient(180deg, var(--tier), var(--tier-strong));
    opacity: 1;
    filter: none;
}

html[dir="rtl"] .pricing__grid--four .price-card::before {
    left: auto;
    right: 0;
    border-radius: 0 21px 21px 0;
}

.pricing__grid--four .price-card::after {
    content: '';
    display: block !important;
    position: absolute;
    z-index: 0;
    width: 170px;
    height: 170px;
    top: -105px;
    right: -95px;
    left: auto;
    bottom: auto;
    border-radius: 50%;
    background: var(--tier);
    opacity: .08;
    filter: none;
}

html[dir="rtl"] .pricing__grid--four .price-card::after {
    right: auto;
    left: -95px;
}

.pricing__grid--four .price-card:hover,
.pricing__grid--four .price-card--popular:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--tier) 55%, #dce5ef);
    box-shadow: 0 25px 55px color-mix(in srgb, var(--tier) 17%, transparent);
}

.pricing__grid--four .price-card--popular {
    border-width: 1.5px;
    border-color: color-mix(in srgb, var(--tier) 58%, #dce5ef);
    box-shadow: 0 22px 50px color-mix(in srgb, var(--tier) 18%, transparent);
}

.pricing__grid--four .price-card>*:not(.price-card__icon):not(.price-card__badge) {
    position: relative;
    z-index: 2;
}

.pricing__grid--four .price-card__icon,
.pricing__grid--four .price-card__badge {
    z-index: 2;
}

.pricing__grid--four .price-card__icon {
    position: absolute;
    top: 18px;
    left: 20px;
    right: auto;
    width: 42px;
    height: 42px;
    margin: 0;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(135deg, var(--tier), var(--tier-strong));
    box-shadow: 0 9px 20px color-mix(in srgb, var(--tier) 25%, transparent);
}

html[dir="rtl"] .pricing__grid--four .price-card__icon {
    left: auto;
    right: 20px;
}

.pricing__grid--four .price-card__head {
    min-height: 52px;
    padding: 2px 0 12px 54px;
    border-bottom: 1px solid color-mix(in srgb, var(--tier) 14%, transparent);
}

html[dir="rtl"] .pricing__grid--four .price-card__head {
    padding: 2px 54px 12px 0;
}

.pricing__grid--four .price-card--popular .price-card__head,
.pricing__grid--four .price-card--scale .price-card__head {
    padding-right: 76px;
}

html[dir="rtl"] .pricing__grid--four .price-card--popular .price-card__head,
html[dir="rtl"] .pricing__grid--four .price-card--scale .price-card__head {
    padding-right: 54px;
    padding-left: 76px;
}

.pricing__grid--four .price-card__head h3 {
    color: #17243a;
    font-size: 1.13rem;
}

.pricing__grid--four .price-card__head p {
    margin-top: 3px;
    color: #6f7f94;
    font-size: .62rem;
}

.pricing__grid--four .price-card__badge,
.pricing__grid--four .price-card__badge--soft,
html[dir="rtl"] .pricing__grid--four .price-card__badge {
    position: absolute;
    inset: 21px 18px auto auto;
    z-index: 5;
    width: max-content;
    max-width: 110px;
    padding: 5px 8px;
    color: var(--tier-strong);
    border: 1px solid color-mix(in srgb, var(--tier) 22%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tier-soft) 78%, #fff);
    box-shadow: none;
    font-size: .5rem;
}

html[dir="rtl"] .pricing__grid--four .price-card__badge {
    inset: 21px auto auto 18px;
}

.pricing__grid--four .price-card__price {
    margin: 19px 0 0;
}

.pricing__grid--four .price-card__amount {
    color: #132139;
    font-size: clamp(2.1rem, 2.6vw, 2.55rem);
}

.pricing__grid--four .price-card__currency {
    color: #65758a;
}

.price-card__quota {
    margin: 17px 0 13px;
    padding: 13px 14px;
    border: 1px solid color-mix(in srgb, var(--tier) 16%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--tier-soft) 72%, #fff);
}

.price-card__quota strong {
    color: var(--tier-strong);
}

.price-card__channels {
    margin-bottom: 13px;
}

.price-card__channels>span {
    color: #738297;
}

.pricing__grid--four .price-card__features {
    flex: 1;
    gap: 9px;
    margin-bottom: 17px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--tier) 14%, transparent);
}

.pricing__grid--four .price-card__features li {
    color: #394b63;
    font-size: .7rem;
}

.pricing__grid--four .price-card__features li::before {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--tier), var(--tier-strong));
}

.pricing__grid--four .price-card__features li.is-disabled {
    color: #98a4b3;
}

.pricing__grid--four .price-card__features li.is-disabled::before {
    color: #8995a5;
    border: 1px solid #d7dee7;
    background: rgba(255, 255, 255, .55);
}

.pricing__grid--four .price-card .btn,
.pricing__grid--four .price-card .btn--ghost,
.pricing__grid--four .price-card .btn--primary {
    min-height: 46px;
    color: #fff;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tier), var(--tier-strong));
    box-shadow: 0 9px 22px color-mix(in srgb, var(--tier) 22%, transparent);
}

.pricing__grid--four .price-card .btn:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--tier-strong), var(--tier));
}

[data-theme="dark"] .pricing__grid--four .price-card,
[data-theme="dark"] .pricing__grid--four .price-card--popular {
    border-color: color-mix(in srgb, var(--tier) 28%, #28374a);
    background: linear-gradient(145deg, color-mix(in srgb, var(--tier) 8%, #142136), #0e192a 52%, #101b2c);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}

[data-theme="dark"] .pricing__grid--four .price-card__head h3,
[data-theme="dark"] .pricing__grid--four .price-card__amount {
    color: #f0f5fb;
}

[data-theme="dark"] .pricing__grid--four .price-card__head p,
[data-theme="dark"] .pricing__grid--four .price-card__currency,
[data-theme="dark"] .price-card__period,
[data-theme="dark"] .price-card__channels>span {
    color: #8f9eb2;
}

[data-theme="dark"] .price-card__quota {
    border-color: color-mix(in srgb, var(--tier) 17%, transparent);
    background: color-mix(in srgb, var(--tier) 10%, #111d30);
}

[data-theme="dark"] .price-card__quota strong {
    color: color-mix(in srgb, var(--tier) 75%, #fff);
}

[data-theme="dark"] .price-card__quota span,
[data-theme="dark"] .pricing__grid--four .price-card__features li {
    color: #bac5d4;
}

[data-theme="dark"] .pricing__grid--four .price-card__features li.is-disabled {
    color: #64748a;
}

[data-theme="dark"] .pricing__grid--four .price-card__features li.is-disabled::before {
    color: #64748a;
    border-color: #2a394d;
    background: #162336;
}

[data-theme="dark"] .pricing__grid--four .price-card__badge {
    color: color-mix(in srgb, var(--tier) 70%, #fff);
    background: color-mix(in srgb, var(--tier) 10%, #111d30);
}

@media (max-width: 1100px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 585px;
    }
}

@media (max-width: 650px) {

    .pricing__grid--four .price-card,
    [data-theme="dark"] .pricing__grid--four .price-card {
        min-height: 0;
        padding: 20px 19px 18px;
    }
}

.pricing__grid--four .price-card__head p {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.pricing__grid--four .price-card__price {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    direction: ltr;
}

html[dir="rtl"] .pricing__grid--four .price-card__price {
    justify-content: flex-end;
    direction: ltr;
}

.price-card__period {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0 2px;
    padding-bottom: 3px;
    white-space: nowrap;
}

.price-card__period::before {
    content: '/';
    margin-inline-end: 4px;
    color: currentColor;
}

html[dir="rtl"] .price-card__period {
    font-family: 'Noto Kufi Arabic', system-ui, sans-serif;
}

.price-card__quota span {
    color: var(--tier-strong);
    font-weight: 750;
}

[data-theme="dark"] .price-card__quota span {
    color: color-mix(in srgb, var(--tier) 72%, #fff);
}

html[dir="rtl"] .pricing__grid--four .price-card__price {
    direction: rtl;
    flex-direction: row;
    justify-content: flex-start;
}

html[dir="rtl"] .pricing__grid--four .price-card__amount {
    order: 0;
}

html[dir="rtl"] .pricing__grid--four .price-card__currency {
    order: 1;
}

html[dir="rtl"] .pricing__grid--four .price-card__period {
    order: 2;
    margin: 0 2px 0 0;
}

.pricing__grid--four .price-card__head p {
    max-width: none;
    width: 100%;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.pricing__grid--four .price-card--popular .price-card__head p,
.pricing__grid--four .price-card--scale .price-card__head p {
    width: calc(100% + 76px);
}

html[dir="rtl"] .pricing__grid--four .price-card--popular .price-card__head p,
html[dir="rtl"] .pricing__grid--four .price-card--scale .price-card__head p {
    text-align: right;
}

@media (max-width: 1100px) {
    .pricing__grid--four .price-card__head p {
        font-size: .59rem;
    }
}

@media (max-width: 650px) {
    .pricing__grid--four .price-card__head p {
        white-space: normal;
    }

    .pricing__grid--four .price-card--popular .price-card__head p,
    .pricing__grid--four .price-card--scale .price-card__head p {
        width: 100%;
    }

    html[dir="rtl"] .pricing__grid--four .price-card--popular .price-card__head p,
    html[dir="rtl"] .pricing__grid--four .price-card--scale .price-card__head p {
        transform: none;
    }
}

.pricing,
[data-theme="dark"] .pricing {
    background: transparent;
}

/* ============================================================
   NEW SECTIONS — Features Showcase, Stats, Workflow, Orbit, Testimonials v2, FAQ v2, Final CTA v2
   ============================================================ */

/* ---------- FEATURES SHOWCASE (Tabbed) ---------- */
.features-showcase {
    padding: 100px 0;
}

.features-showcase__wrap {
    margin-top: 48px;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(16, 96, 224, .08);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 20px 60px rgba(16, 42, 78, .07);
}

[data-theme="dark"] .features-showcase__wrap {
    background: rgba(14, 24, 42, .65);
    border-color: rgba(0, 208, 224, .08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.features-showcase__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid rgba(16, 96, 224, .08);
    background: rgba(255, 255, 255, .45);
    -webkit-overflow-scrolling: touch;
}

[data-theme="dark"] .features-showcase__tabs {
    background: rgba(10, 18, 32, .5);
    border-color: rgba(0, 208, 224, .06);
}

.features-tab {
    flex: 1 1 140px;
    min-width: 140px;
    padding: 16px 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: all .3s;
    border-bottom: 2px solid transparent;
}

.features-tab__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.features-tab__icon svg {
    width: 20px;
    height: 20px;
}

.features-tab:hover {
    color: var(--brand);
    background: rgba(16, 96, 224, .03);
}

.features-tab.is-active {
    color: var(--brand);
    border-bottom-color: var(--brand);
    background: rgba(16, 96, 224, .05);
}

[data-theme="dark"] .features-tab.is-active {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
    background: rgba(0, 208, 224, .05);
}

.features-showcase__panels {
    position: relative;
    min-height: 360px;
}

.features-panel {
    display: none;
    padding: 40px 36px;
    gap: 40px;
    align-items: center;
    animation: ftPanelIn .4s ease;
}

.features-panel.is-active {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

@keyframes ftPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.features-panel__text {
    min-width: 0;
}

.features-panel__demo {
    min-width: 0;
}

.features-panel__text h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.features-panel__text>p {
    font-size: .78rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.features-panel__checks {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.features-panel__checks li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    color: var(--text);
}

.features-panel__checks li::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    flex-shrink: 0;
    font-size: .55rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--cyan, #00d0e0));
}

/* --- Demo panels --- */
.features-panel__demo {
    border-radius: 16px;
    padding: 24px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(16, 96, 224, .06);
    box-shadow: 0 8px 30px rgba(16, 42, 78, .05);
}

[data-theme="dark"] .features-panel__demo {
    background: rgba(10, 18, 32, .45);
    border-color: rgba(0, 208, 224, .06);
}

/* Inbox v2 demo */
.demo-inbox-v2__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text);
}

.demo-inbox-v2__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
}

.demo-inbox-v2__count {
    margin-inline-start: auto;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: .6rem;
    background: var(--brand);
    color: #fff;
}

.demo-inbox-v2__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 6px;
    transition: background .2s;
    cursor: default;
    font-size: .68rem;
}

.demo-inbox-v2__row:hover,
.demo-inbox-v2__row--active {
    background: rgba(16, 96, 224, .06);
}

[data-theme="dark"] .demo-inbox-v2__row:hover,
[data-theme="dark"] .demo-inbox-v2__row--active {
    background: rgba(0, 208, 224, .06);
}

.demo-inbox-v2__platform {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.demo-inbox-v2__platform svg {
    width: 16px;
    height: 16px;
}

.demo-inbox-v2__platform--wa {
    background: #25d366;
}

.demo-inbox-v2__platform--ig {
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
}

.demo-inbox-v2__platform--fb {
    background: #1877f2;
}

.demo-inbox-v2__platform--web {
    background: var(--brand);
}

.demo-inbox-v2__row div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.demo-inbox-v2__row strong {
    font-size: .7rem;
    color: var(--text);
}

.demo-inbox-v2__row span {
    font-size: .62rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.demo-inbox-v2__time {
    margin-inline-start: auto;
    font-size: .58rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Train v2 demo */
.demo-train-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demo-train-v2__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(16, 96, 224, .06);
    transition: transform .2s, box-shadow .2s;
}

[data-theme="dark"] .demo-train-v2__card {
    background: rgba(14, 24, 42, .5);
    border-color: rgba(0, 208, 224, .06);
}

.demo-train-v2__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 42, 78, .08);
}

.demo-train-v2__icon {
    font-size: 1.3rem;
}

.demo-train-v2__card div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.demo-train-v2__card strong {
    font-size: .72rem;
    color: var(--text);
}

.demo-train-v2__card div span {
    font-size: .6rem;
    color: var(--text-muted);
}

.demo-train-v2__status {
    margin-inline-start: auto;
    font-size: .58rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(16, 96, 224, .08);
    color: var(--brand);
}

[data-theme="dark"] .demo-train-v2__status {
    background: rgba(0, 208, 224, .1);
    color: var(--cyan);
}

/* Media v2 demo */
.demo-media-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demo-media-v2__bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .72rem;
    line-height: 1.5;
    max-width: 85%;
}

.demo-media-v2__bubble--in {
    align-self: flex-start;
    background: rgba(16, 96, 224, .06);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

html[dir="rtl"] .demo-media-v2__bubble--in {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 4px;
}

.demo-media-v2__bubble--out {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--brand), #0088cc);
    color: #fff;
    border-bottom-right-radius: 4px;
}

html[dir="rtl"] .demo-media-v2__bubble--out {
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 4px;
}

[data-theme="dark"] .demo-media-v2__bubble--in {
    background: rgba(0, 208, 224, .08);
}

.demo-media-v2__img-placeholder {
    width: 100%;
    height: 80px;
    border-radius: 8px;
    background: rgba(16, 96, 224, .08);
    display: grid;
    place-items: center;
    margin-bottom: 6px;
}

.demo-media-v2__img-placeholder svg {
    width: 28px;
    height: 28px;
    opacity: .4;
}

.demo-media-v2__voice {
    display: flex;
    align-items: center;
    gap: 8px;
}

.demo-media-v2__voice svg {
    width: 14px;
    height: 14px;
}

.demo-media-v2__wave {
    width: 80px;
    height: 18px;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg, var(--brand) 0, var(--brand) 2px, transparent 2px, transparent 5px);
    opacity: .3;
}

/* Follow-up v2 demo */
.demo-followup-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demo-followup-v2__timer {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .62rem;
    font-weight: 600;
    background: rgba(16, 96, 224, .06);
    color: var(--brand);
}

[data-theme="dark"] .demo-followup-v2__timer {
    background: rgba(0, 208, 224, .08);
    color: var(--cyan);
}

/* Comments v2 demo */
.demo-comments-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.demo-comments-v2__post {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demo-comments-v2__comment,
.demo-comments-v2__reply {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .68rem;
}

.demo-comments-v2__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, #dbeafe, #c4b5fd);
}

.demo-comments-v2__avatar--brand {
    background: linear-gradient(135deg, var(--brand), var(--cyan, #00d0e0));
}

.demo-comments-v2__comment div,
.demo-comments-v2__reply div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.demo-comments-v2__comment strong,
.demo-comments-v2__reply strong {
    font-size: .68rem;
    color: var(--text);
}

.demo-comments-v2__comment span,
.demo-comments-v2__reply span {
    font-size: .64rem;
    color: var(--text-muted);
}

.demo-comments-v2__reply {
    padding-inline-start: 40px;
}

.demo-comments-v2__dm {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: .62rem;
    font-weight: 600;
    background: rgba(16, 96, 224, .06);
    color: var(--brand);
}

[data-theme="dark"] .demo-comments-v2__dm {
    background: rgba(0, 208, 224, .08);
    color: var(--cyan);
}

/* Control v2 demo */
.demo-control-v2 {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.demo-control-v2__row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.demo-control-v2__toggle {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var(--border-soft);
    position: relative;
    flex-shrink: 0;
}

.demo-control-v2__toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
}

.demo-control-v2__toggle--on {
    background: var(--brand);
}

[data-theme="dark"] .demo-control-v2__toggle--on {
    background: var(--cyan);
}

.demo-control-v2__toggle--on::after {
    transform: translateX(18px);
}

html[dir="rtl"] .demo-control-v2__toggle--on::after {
    transform: translateX(-18px);
}

.demo-control-v2__row div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.demo-control-v2__row strong {
    font-size: .72rem;
    color: var(--text);
}

.demo-control-v2__row div span {
    font-size: .6rem;
    color: var(--text-muted);
}

.demo-control-v2__divider {
    text-align: center;
    font-size: .58rem;
    font-weight: 600;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-soft);
    padding-top: 14px;
    margin-top: 0;
}

.demo-control-v2__alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: .64rem;
    font-weight: 600;
    color: #e53e3e;
    background: rgba(229, 62, 62, .06);
    border: 1px solid rgba(229, 62, 62, .12);
}

@media (max-width: 900px) {
    .features-tab {
        min-width: 0;
        padding: 12px 6px;
        font-size: .62rem;
    }

    .features-panel.is-active {
        grid-template-columns: 1fr;
    }

    .features-panel {
        padding: 28px 20px;
        gap: 24px;
    }
}

@media (max-width: 767.98px) {
    .features-showcase {
        padding: 70px 0;
    }

    .features-showcase__wrap {
        margin-top: 32px;
        border-radius: 18px;
    }

    .features-showcase__tabs {
        flex-wrap: wrap;
        overflow: visible;
    }

    .features-tab {
        flex: 1 1 calc(33.333% - 1px);
        min-width: 0;
        padding: 10px 4px;
        gap: 4px;
        flex-direction: column;
        justify-content: center;
        font-size: .58rem;
        line-height: 1.2;
        text-align: center;
    }

    .features-tab__icon {
        width: 22px;
        height: 22px;
    }

    .features-tab__icon svg {
        width: 16px;
        height: 16px;
    }

    .features-tab span:not(.features-tab__icon) {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .features-panel {
        padding: 22px 16px;
        gap: 20px;
    }

    .features-panel__text h3 {
        font-size: 1.15rem;
    }

    .features-panel__text>p {
        font-size: .74rem;
    }

    .features-panel__checks li {
        font-size: .68rem;
    }

    .features-panel__demo {
        padding: 16px;
    }
}

@media (max-width: 430px) {
    .features-tab {
        padding: 8px 2px;
        font-size: .54rem;
        gap: 3px;
    }

    .features-tab__icon {
        width: 20px;
        height: 20px;
    }

    .features-tab__icon svg {
        width: 14px;
        height: 14px;
    }

    .features-panel {
        padding: 18px 12px;
        gap: 18px;
    }

    .features-panel__text h3 {
        font-size: 1.05rem;
    }

    .features-panel__text>p {
        font-size: .7rem;
        line-height: 1.6;
    }

    .features-panel__checks {
        gap: 8px;
    }

    .features-panel__checks li {
        font-size: .64rem;
        gap: 7px;
    }

    .features-panel__checks li::before {
        width: 18px;
        height: 18px;
        font-size: .5rem;
    }

    .features-panel__demo {
        padding: 14px;
        border-radius: 14px;
    }
}

/* ---------- STATS BANNER ---------- */
.stats-banner {
    padding: 48px 0;
}

.stats-banner__grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 40px 48px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(16, 96, 224, .08);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 16px 48px rgba(16, 42, 78, .06);
}

[data-theme="dark"] .stats-banner__grid {
    background: rgba(14, 24, 42, .6);
    border-color: rgba(0, 208, 224, .08);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .2);
}

.stats-banner__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 16px;
}

.stats-banner__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(16, 96, 224, .08), rgba(0, 208, 224, .06));
    color: var(--brand);
    margin-bottom: 14px;
}

[data-theme="dark"] .stats-banner__icon {
    background: linear-gradient(135deg, rgba(0, 208, 224, .1), rgba(16, 96, 224, .08));
    color: var(--cyan);
}

.stats-banner__icon svg {
    width: 22px;
    height: 22px;
}

.stats-banner__value {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--brand), var(--cyan, #00d0e0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stats-banner__label {
    font-size: .7rem;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.4;
}

.stats-banner__divider {
    width: 1px;
    height: 64px;
    flex-shrink: 0;
    background: linear-gradient(180deg, transparent, rgba(16, 96, 224, .12), transparent);
}

[data-theme="dark"] .stats-banner__divider {
    background: linear-gradient(180deg, transparent, rgba(0, 208, 224, .1), transparent);
}

@media (max-width: 900px) {
    .stats-banner__grid {
        flex-wrap: wrap;
        gap: 24px;
        padding: 32px 24px;
    }

    .stats-banner__item {
        flex: 0 0 calc(50% - 12px);
    }

    .stats-banner__divider {
        display: none;
    }
}

@media (max-width: 500px) {
    .stats-banner__item {
        flex: 0 0 100%;
    }
}

/* ---------- HOW IT WORKS — TIMELINE ---------- */
.how-it-works {
    padding: 100px 0;
}

.hiw-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: 56px;
}

.hiw-timeline__line {
    position: absolute;
    top: 28px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--cyan, #00d0e0));
    opacity: .2;
    z-index: 0;
}

html[dir="rtl"] .hiw-timeline__line {
    left: 10%;
    right: 10%;
}

.hiw-timeline__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hiw-timeline__dot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand), var(--cyan, #00d0e0));
    box-shadow: 0 8px 28px rgba(16, 96, 224, .2);
    transition: transform .3s, box-shadow .3s;
    margin-bottom: 20px;
}

.hiw-timeline__step:hover .hiw-timeline__dot {
    transform: scale(1.1);
    box-shadow: 0 12px 36px rgba(16, 96, 224, .28);
}

.hiw-timeline__dot svg {
    width: 24px;
    height: 24px;
}

.hiw-timeline__card {
    text-align: center;
    padding: 24px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(16, 96, 224, .06);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: transform .3s, box-shadow .3s;
    width: 100%;
}

.hiw-timeline__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(16, 42, 78, .08);
}

[data-theme="dark"] .hiw-timeline__card {
    background: rgba(14, 24, 42, .5);
    border-color: rgba(0, 208, 224, .06);
}

.hiw-timeline__num {
    display: inline-block;
    font-size: .6rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(16, 96, 224, .08), rgba(0, 208, 224, .06));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--brand), var(--cyan, #00d0e0));
    -webkit-background-clip: text;
}

.hiw-timeline__card h3 {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.hiw-timeline__card p {
    font-size: .66rem;
    color: var(--text-muted);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .hiw-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .hiw-timeline__line {
        display: none;
    }
}

@media (max-width: 550px) {
    .hiw-timeline {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hiw-timeline__step {
        flex-direction: row;
        gap: 16px;
    }

    .hiw-timeline__dot {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .hiw-timeline__card {
        text-align: start;
        padding: 16px;
    }
}

/* ---------- BENTO GRID ---------- */
.bento-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr 1.2fr;
    gap: 18px;
    margin-top: 48px;
}

.bento-card {
    padding: 30px 24px;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(16, 96, 224, .06);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 28px rgba(16, 42, 78, .04);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s;
    display: flex;
    flex-direction: column;
}

.bento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(16, 42, 78, .1);
}

[data-theme="dark"] .bento-card {
    background: rgba(14, 24, 42, .55);
    border-color: rgba(0, 208, 224, .06);
}

[data-theme="dark"] .bento-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.bento-card__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: .55rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--brand), var(--cyan, #00d0e0));
    color: #fff;
}

html[dir="rtl"] .bento-card__badge {
    right: auto;
    left: 16px;
}

.bento-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--brand), var(--cyan, #00d0e0));
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(16, 96, 224, .15);
}

.bento-card__icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
}

.bento-card h3 {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.bento-card>p {
    font-size: .7rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.bento-card__visual {
    margin-top: auto;
    padding-top: 18px;
}

/* --- Bento mini table (CRM) --- */
.bento-mini-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bento-mini-table__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(16, 96, 224, .04);
    transition: transform .2s, box-shadow .2s;
}

.bento-mini-table__row:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(16, 42, 78, .06);
}

html[dir="rtl"] .bento-mini-table__row:hover {
    transform: translateX(-4px);
}

[data-theme="dark"] .bento-mini-table__row {
    background: rgba(14, 24, 42, .4);
    border-color: rgba(0, 208, 224, .04);
}

.bento-mini-table__avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--ac, var(--brand));
}

.bento-mini-table__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.bento-mini-table__info strong {
    font-size: .7rem;
    color: var(--text);
}

.bento-mini-table__info small {
    font-size: .56rem;
    color: var(--text-muted);
}

.bento-mini-table__tag {
    font-size: .55rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    flex-shrink: 0;
}

.bento-mini-table__tag--new {
    background: rgba(37, 211, 102, .1);
    color: #25d366;
}

.bento-mini-table__tag--active {
    background: rgba(16, 96, 224, .08);
    color: var(--brand);
}

[data-theme="dark"] .bento-mini-table__tag--active {
    background: rgba(0, 208, 224, .1);
    color: var(--cyan);
}

.bento-mini-table__tag--done {
    background: rgba(130, 130, 130, .08);
    color: var(--text-muted);
}

/* --- Bento mini messages (WhatsApp bulk) --- */
.bento-mini-msgs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bento-mini-msgs__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: .66rem;
    color: var(--text);
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(16, 96, 224, .04);
}

[data-theme="dark"] .bento-mini-msgs__item {
    background: rgba(14, 24, 42, .35);
    border-color: rgba(0, 208, 224, .04);
}

.bento-mini-msgs__check {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #25d366;
    display: grid;
    place-items: center;
}

.bento-mini-msgs__check::after {
    content: '✓';
    color: #fff;
    font-size: .5rem;
    font-weight: 700;
}

.bento-mini-msgs__item--pending {
    opacity: .6;
}

.bento-mini-msgs__loader {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(16, 96, 224, .15);
    border-top-color: var(--brand);
    animation: bentoSpin .8s linear infinite;
}

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

/* --- Bento mini team --- */
.bento-mini-team {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bento-mini-team__member {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: .66rem;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(16, 96, 224, .04);
}

[data-theme="dark"] .bento-mini-team__member {
    background: rgba(14, 24, 42, .35);
    border-color: rgba(0, 208, 224, .04);
}

.bento-mini-team__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bento-mini-team__dot--on {
    background: #25d366;
    box-shadow: 0 0 6px rgba(37, 211, 102, .4);
}

.bento-mini-team__dot--off {
    background: var(--border-soft);
}

/* --- Bento mini dashboard --- */
.bento-mini-dashboard__stats {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.bento-mini-dashboard__stat {
    flex: 1;
    padding: 10px 12px;
    border-radius: 10px;
    text-align: center;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(16, 96, 224, .04);
}

[data-theme="dark"] .bento-mini-dashboard__stat {
    background: rgba(14, 24, 42, .35);
    border-color: rgba(0, 208, 224, .04);
}

.bento-mini-dashboard__stat strong {
    display: block;
    font-size: .9rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--brand), var(--cyan, #00d0e0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bento-mini-dashboard__stat small {
    font-size: .55rem;
    color: var(--text-muted);
}

/* Bento mini chart */
.bento-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 64px;
    padding: 0;
}

.bento-mini-chart__bar {
    flex: 1;
    height: var(--h, 50%);
    border-radius: 5px;
    background: linear-gradient(180deg, var(--brand), var(--cyan, #00d0e0));
    opacity: .35;
    transition: opacity .3s, transform .3s;
}

.bento-card:hover .bento-mini-chart__bar {
    opacity: .7;
    transform: scaleY(1.05);
    transform-origin: bottom;
}

@media (max-width: 1100px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ============ INTEGRATIONS FLOW DIAGRAM ============ */
.flow-section {
    padding: 100px 0 80px;
}

/* Diagram container */
.flow-diagram {
    position: relative;
    margin-top: 40px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 800 / 400;
}

/* SVG canvas */
.flow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    --flow-stroke: rgba(16, 96, 224, .28);
    --flow-dot: rgba(16, 96, 224, .1);
}

[data-theme="dark"] .flow-svg {
    --flow-stroke: rgba(0, 208, 224, .24);
    --flow-dot: rgba(0, 208, 224, .06);
}

/* Dashed lines draw-in */
.flow-line {
    stroke-dashoffset: 100;
    animation: flowDraw 1.5s ease-out forwards;
}

.flow-diagram.is-visible .flow-line {
    animation-play-state: running;
}

@keyframes flowDraw {
    to {
        stroke-dashoffset: 0;
    }
}

/* Data packets */
.flow-packet {
    opacity: 0;
}

.flow-packet--2 {
    opacity: 0;
}

.flow-diagram.is-visible .flow-packet {
    animation: packetFade .4s ease-out 1.2s forwards;
}

.flow-diagram.is-visible .flow-packet--2 {
    animation: packetFade .4s ease-out 1.8s forwards;
}

@keyframes packetFade {
    to {
        opacity: .9;
    }
}

/* Center AI orbits — inside SVG */
.flow-ai__orbit--1 {
    animation: aiSpin 10s linear infinite;
    transform-origin: 0 0;
}

.flow-ai__orbit--2 {
    animation: aiSpinRev 7s linear infinite;
    transform-origin: 0 0;
}

.flow-ai__orbit--3 {
    animation: aiSpin 5s linear infinite;
    transform-origin: 0 0;
}

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

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

.flow-ai__dot--a {
    animation: aiSpin 10s linear infinite;
    transform-origin: 0 0;
}

.flow-ai__dot--b {
    animation: aiSpinRev 7s linear infinite;
    transform-origin: 0 0;
}

.flow-ai__dot--c {
    animation: aiSpin 10s linear infinite;
    transform-origin: 0 0;
}

.flow-ai__dot--d {
    animation: aiSpinRev 7s linear infinite;
    transform-origin: 0 0;
}

.flow-ai__core-c {
    animation: corePulse 3s ease-in-out infinite;
    transform-origin: 0 0;
}

@keyframes corePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .75;
    }
}

/* --- Platform Nodes — glass cards with float animation --- */
.flow-node {
    position: absolute;
    z-index: 5;
    left: var(--px);
    top: var(--py);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .45);
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
        0 8px 32px rgba(16, 42, 78, .06),
        inset 0 1px 0 rgba(255, 255, 255, .6);
    cursor: default;
    opacity: 0;
    transition: opacity .5s, box-shadow .35s, border-color .35s;
    animation: none;
}

.flow-diagram.is-visible .flow-node {
    opacity: 1;
}

[data-theme="dark"] .flow-node {
    background: rgba(14, 24, 42, .35);
    border-color: rgba(255, 255, 255, .06);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, .12),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.flow-node:hover {
    box-shadow:
        0 16px 48px rgba(16, 42, 78, .1),
        inset 0 1px 0 rgba(255, 255, 255, .7);
    border-color: rgba(16, 96, 224, .15);
}

[data-theme="dark"] .flow-node:hover {
    box-shadow:
        0 16px 48px rgba(0, 0, 0, .2),
        inset 0 1px 0 rgba(255, 255, 255, .06);
    border-color: rgba(0, 208, 224, .12);
}

/* Float animations — each node floats differently */
.flow-diagram.is-visible .flow-node--wa {
    animation: floatA 6s ease-in-out infinite .1s;
}

.flow-diagram.is-visible .flow-node--ig {
    animation: floatB 7s ease-in-out infinite .3s;
}

.flow-diagram.is-visible .flow-node--fb {
    animation: floatA 6.5s ease-in-out infinite .5s;
}

.flow-diagram.is-visible .flow-node--msg {
    animation: floatB 6s ease-in-out infinite .2s;
}

.flow-diagram.is-visible .flow-node--web {
    animation: floatA 7s ease-in-out infinite .4s;
}

.flow-diagram.is-visible .flow-node--tt {
    animation: floatB 6.5s ease-in-out infinite .6s;
}

@keyframes floatA {

    0%,
    100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, calc(-50% - 8px));
    }
}

@keyframes floatB {

    0%,
    100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, calc(-50% + 6px));
    }
}

/* Stagger entrance */
.flow-node--wa {
    transition-delay: .1s;
}

.flow-node--ig {
    transition-delay: .2s;
}

.flow-node--fb {
    transition-delay: .3s;
}

.flow-node--msg {
    transition-delay: .15s;
}

.flow-node--web {
    transition-delay: .25s;
}

.flow-node--tt {
    transition-delay: .35s;
}

.flow-node__icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s;
}

.flow-node:hover .flow-node__icon {
    transform: scale(1.12) rotate(-3deg);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.flow-node__icon img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.flow-node__icon svg {
    width: 24px;
    height: 24px;
}

/* Platform colors */
.flow-node__icon--whatsapp {
    background: #25d366;
}

.flow-node__icon--instagram {
    background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
}

.flow-node__icon--facebook {
    background: #1877f2;
}

.flow-node__icon--messenger {
    background: #0084ff;
}

.flow-node__icon--tiktok {
    background: #010101;
}

[data-theme="dark"] .flow-node__icon--tiktok {
    background: #fff;
}

[data-theme="dark"] .flow-node__icon--tiktok img {
    filter: none;
}

.flow-node__icon--website {
    background: var(--brand);
}

.flow-node__label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    text-align: center;
}

/* Center AI label (HTML overlay) */
.flow-ai-label {
    position: absolute;
    z-index: 6;
    left: var(--px);
    top: var(--py);
    transform: translate(-50%, 0);
    font-size: .75rem;
    font-weight: 800;
    color: var(--text);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .6s .6s;
}

.flow-diagram.is-visible .flow-ai-label {
    opacity: 1;
}

/* RTL */
html[dir="rtl"] .flow-node {
    left: auto;
    right: var(--px);
    transform: translate(50%, -50%);
}

html[dir="rtl"] .flow-diagram.is-visible .flow-node--wa {
    animation-name: floatA_rtl;
}

html[dir="rtl"] .flow-diagram.is-visible .flow-node--ig {
    animation-name: floatB_rtl;
}

html[dir="rtl"] .flow-diagram.is-visible .flow-node--fb {
    animation-name: floatA_rtl;
}

html[dir="rtl"] .flow-diagram.is-visible .flow-node--msg {
    animation-name: floatB_rtl;
}

html[dir="rtl"] .flow-diagram.is-visible .flow-node--web {
    animation-name: floatA_rtl;
}

html[dir="rtl"] .flow-diagram.is-visible .flow-node--tt {
    animation-name: floatB_rtl;
}

@keyframes floatA_rtl {

    0%,
    100% {
        transform: translate(50%, -50%);
    }

    50% {
        transform: translate(50%, calc(-50% - 8px));
    }
}

@keyframes floatB_rtl {

    0%,
    100% {
        transform: translate(50%, -50%);
    }

    50% {
        transform: translate(50%, calc(-50% + 6px));
    }
}

html[dir="rtl"] .flow-ai-label {
    left: auto;
    right: var(--px);
    transform: translate(50%, 0);
}

html[dir="rtl"] .flow-svg {
    transform: scaleX(-1);
}

/* Responsive */
@media (max-width: 768px) {
    .flow-diagram {
        aspect-ratio: auto;
        min-height: auto;
        padding: 0;
    }

    .flow-svg {
        display: none;
    }

    .flow-ai-label {
        display: none;
    }

    .flow-diagram {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
        padding: 20px 0;
    }

    .flow-node {
        position: static;
        opacity: 1;
        transform: none;
        animation: floatMobile 5s ease-in-out infinite !important;
    }

    .flow-node:nth-child(2) {
        animation-delay: .3s !important;
    }

    .flow-node:nth-child(3) {
        animation-delay: .6s !important;
    }

    .flow-node:nth-child(5) {
        animation-delay: .2s !important;
    }

    .flow-node:nth-child(6) {
        animation-delay: .4s !important;
    }

    .flow-node:nth-child(7) {
        animation-delay: .7s !important;
    }

    @keyframes floatMobile {

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

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

@media (max-width: 480px) {
    .flow-node {
        padding: 12px 16px 10px;
        border-radius: 16px;
    }

    .flow-node__icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .flow-node__icon img,
    .flow-node__icon svg {
        width: 20px;
        height: 20px;
    }

    .flow-node__label {
        font-size: .6rem;
    }

    .flow-diagram {
        gap: 12px;
    }
}

/* ---------- INTEGRATIONS v2 (Grid Cards) ---------- */
.integrations-v2 {
    padding: 100px 0;
}

.integrations-v2__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 48px;
}

.int-card {
    padding: 28px 20px;
    border-radius: 18px;
    text-align: center;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(16, 96, 224, .06);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 6px 24px rgba(16, 42, 78, .04);
    transition: transform .3s, box-shadow .3s;
}

.int-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 44px rgba(16, 42, 78, .1);
}

[data-theme="dark"] .int-card {
    background: rgba(14, 24, 42, .55);
    border-color: rgba(0, 208, 224, .06);
}

.int-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .1);
}

.int-card__icon svg {
    width: 24px;
    height: 24px;
}

.int-card h4 {
    font-size: .8rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.int-card p {
    font-size: .64rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.int-card--cta {
    border-style: dashed;
}

.int-card--cta:hover {
    border-style: solid;
}

@media (max-width: 900px) {
    .integrations-v2__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 650px) {
    .integrations-v2__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .integrations-v2__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- TESTIMONIALS v2 (Marquee) ---------- */
.testimonials-v2 {
    padding: 100px 0 60px;
}

.testimonials-v2__marquee {
    overflow: hidden;
    padding: 20px 0;
}

.testimonials-v2__track {
    display: flex;
    width: max-content;
    animation: testimonialScroll 45s linear infinite;
}

html[dir="rtl"] .testimonials-v2__track {
    animation-name: testimonialScrollRTL;
}

@keyframes testimonialScroll {
    from {
        transform: translateX(0);
    }

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

@keyframes testimonialScrollRTL {
    from {
        transform: translateX(0);
    }

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

.testimonials-v2__group {
    display: flex;
    gap: 20px;
    padding: 0 10px;
}

.testimonial-v2-card {
    width: 340px;
    flex-shrink: 0;
    padding: 28px 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(16, 96, 224, .06);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(16, 42, 78, .05);
    transition: transform .3s;
}

.testimonial-v2-card:hover {
    transform: translateY(-4px);
}

[data-theme="dark"] .testimonial-v2-card {
    background: rgba(14, 24, 42, .55);
    border-color: rgba(0, 208, 224, .06);
}

.testimonial-v2-card__stars {
    color: #f59e0b;
    font-size: .8rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.testimonial-v2-card>p {
    font-size: .74rem;
    line-height: 1.65;
    color: var(--text);
    margin-bottom: 18px;
    font-style: italic;
}

.testimonial-v2-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.testimonial-v2-card__avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    background: var(--c, var(--brand));
    overflow: hidden;
}

.testimonial-v2-card__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-v2-card__author div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-v2-card__author strong {
    font-size: .72rem;
    color: var(--text);
}

.testimonial-v2-card__author span {
    font-size: .6rem;
    color: var(--text-muted);
}

.testimonials-v2__track:hover {
    animation-play-state: paused;
}

/* ---------- FAQ — Clean full-width (like mojeeb) ---------- */
.faq-f {
    padding: 100px 0 80px;
}

.faq-f__title {
    text-align: center;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 900;
    color: var(--text);
    margin-bottom: 48px;
}

.faq-f__title .gradient-text {
    white-space: nowrap;
}

.faq-f__list {
    max-width: 720px;
    margin: 0 auto;
}

/* Native details/summary — no JS needed for toggle */
.faq-f__item {
    border-bottom: 1px solid rgba(16, 96, 224, .08);
}

.faq-f__item:first-child {
    border-top: 1px solid rgba(16, 96, 224, .08);
}

[data-theme="dark"] .faq-f__item,
[data-theme="dark"] .faq-f__item:first-child {
    border-color: rgba(255, 255, 255, .06);
}

/* Summary = question */
.faq-f__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 4px;
    cursor: pointer;
    font-size: .92rem;
    font-weight: 700;
    color: var(--text);
    list-style: none;
    /* remove default marker */
    transition: color .25s;
}

.faq-f__q::-webkit-details-marker {
    display: none;
}

.faq-f__q::marker {
    display: none;
    content: '';
}

/* Custom indicator */
.faq-f__q::after {
    content: '+';
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
    color: var(--brand);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(16, 96, 224, .05);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), background .35s, color .25s;
}

[data-theme="dark"] .faq-f__q::after {
    color: var(--cyan);
    background: rgba(0, 208, 224, .06);
}

.faq-f__item[open] .faq-f__q::after {
    content: '\2212';
    /* minus sign */
    background: var(--brand);
    color: #fff;
    transform: rotate(180deg);
}

[data-theme="dark"] .faq-f__item[open] .faq-f__q::after {
    background: var(--cyan);
    color: #0b1121;
}

.faq-f__item:hover .faq-f__q {
    color: var(--brand);
}

[data-theme="dark"] .faq-f__item:hover .faq-f__q {
    color: var(--cyan);
}

/* Answer */
.faq-f__a {
    overflow: hidden;
    animation: faqSlide .35s ease forwards;
}

@keyframes faqSlide {
    from {
        opacity: 0;
        max-height: 0;
    }

    to {
        opacity: 1;
        max-height: 300px;
    }
}

.faq-f__a p {
    padding: 0 4px 22px;
    margin: 0;
    font-size: .82rem;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 600px;
}

@media (max-width: 768px) {
    .faq-f {
        padding: 72px 0 60px;
    }

    .faq-f__title {
        margin-bottom: 32px;
    }

    .faq-f__q {
        padding: 18px 4px;
        font-size: .84rem;
    }

    .faq-f__q::after {
        width: 28px;
        height: 28px;
        font-size: 1.1rem;
    }

    .faq-f__a p {
        font-size: .78rem;
        padding-bottom: 18px;
    }
}

/* ---------- FINAL CTA v2 ---------- */
.final-cta-v2 {
    padding: 60px 0 100px;
}

.final-cta-v2__card {
    position: relative;
    overflow: hidden;
    padding: 64px 40px;
    border-radius: 28px;
    text-align: center;
    background: linear-gradient(135deg, rgba(16, 96, 224, .06), rgba(0, 208, 224, .04));
    border: 1px solid rgba(16, 96, 224, .1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

[data-theme="dark"] .final-cta-v2__card {
    background: linear-gradient(135deg, rgba(16, 96, 224, .1), rgba(0, 208, 224, .06));
    border-color: rgba(0, 208, 224, .12);
}

.final-cta-v2__glow {
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(16, 96, 224, .12), transparent 65%);
    pointer-events: none;
    animation: ctaGlow 6s ease-in-out infinite alternate;
}

[data-theme="dark"] .final-cta-v2__glow {
    background: radial-gradient(circle, rgba(0, 208, 224, .1), transparent 65%);
}

@keyframes ctaGlow {
    from {
        opacity: .5;
        transform: translateX(-50%) scale(.9);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
    }
}

.final-cta-v2__card h2 {
    position: relative;
    z-index: 1;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
}

.final-cta-v2__card>p {
    position: relative;
    z-index: 1;
    font-size: .82rem;
    color: var(--text-muted);
    max-width: 520px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

.final-cta-v2__actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.final-cta-v2__note {
    font-size: .68rem;
    color: var(--text-muted);
}

@media (max-width: 650px) {
    .final-cta-v2__card {
        padding: 48px 24px;
    }
}

/* ============================================================
   AUTH PAGE — Login / Sign up
   ============================================================ */
.auth-page {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    padding: 48px 16px 48px;
}

.auth-page>.ai-pattern {
    z-index: 0;
}

.auth-page>.auth-card {
    flex: 0 1 420px;
    margin: auto;
}

.auth-page__bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);
    transition: background .4s ease;
}

.auth-page__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .42;
    animation: authOrbFloat 20s ease-in-out infinite;
}

.auth-page__orb--1 {
    width: 500px;
    height: 500px;
    top: -15%;
    left: -10%;
    background: rgba(16, 96, 224, .45);
}

.auth-page__orb--2 {
    width: 450px;
    height: 450px;
    bottom: -15%;
    right: -10%;
    background: rgba(0, 208, 224, .35);
    animation-delay: -7s;
}

.auth-page__orb--3 {
    width: 350px;
    height: 350px;
    top: 50%;
    left: 50%;
    background: rgba(99, 71, 217, .28);
    transform: translate(-50%, -50%);
    animation-delay: -14s;
}

[data-theme="dark"] .auth-page__orb {
    opacity: .5;
}

[data-theme="light"] .auth-page__orb {
    opacity: .28;
}

@keyframes authOrbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -40px) scale(1.08);
    }

    66% {
        transform: translate(-20px, 30px) scale(.95);
    }
}

.auth-page__grid {
    position: absolute;
    inset: 0;
    opacity: .45;
    background-image: linear-gradient(rgba(16, 96, 224, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 96, 224, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 75%);
}

[data-theme="dark"] .auth-page__grid {
    background-image: linear-gradient(rgba(0, 208, 224, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 208, 224, .05) 1px, transparent 1px);
}

.auth-page__top {
    position: fixed;
    top: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
}

html[dir="ltr"] .auth-page__top {
    right: 24px;
}

html[dir="rtl"] .auth-page__top {
    left: 24px;
}

.auth-page__btn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-soft);
    background: var(--bg-card);
    color: var(--text-soft);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    font-size: .75rem;
    font-weight: 700;
}

.auth-page__btn:hover {
    color: var(--brand);
    border-color: var(--border);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .auth-page__btn:hover {
    color: var(--cyan);
}

.auth-page__btn svg {
    display: block;
}

.auth-page__btn>.auth-page__theme-sun,
.auth-page__btn>.auth-page__theme-moon {
    display: none;
}

.auth-page__btn>.auth-page__theme-moon {
    display: block;
}

[data-theme="dark"] .auth-page__btn>.auth-page__theme-sun {
    display: block;
}

[data-theme="dark"] .auth-page__btn>.auth-page__theme-moon {
    display: none;
}

.auth-page__btn--lang {
    width: auto;
    padding: 0 12px;
    gap: 6px;
    display: inline-flex;
}

.auth-page__back {
    position: fixed;
    top: 24px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-soft);
    transition: color .2s;
}

html[dir="ltr"] .auth-page__back {
    left: 24px;
}

html[dir="rtl"] .auth-page__back {
    right: 24px;
}

.auth-page__back:hover {
    color: var(--brand);
}

[data-theme="dark"] .auth-page__back:hover {
    color: var(--cyan);
}

html[dir="rtl"] .auth-page__back svg {
    transform: scaleX(-1);
}

.auth-card {
    position: relative;
    z-index: 1;
    width: min(100%, 420px);
    max-width: 420px;
    margin-inline: auto;
    padding: 0;
    animation: authCardIn .7s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes authCardIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(.96);
    }

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

.auth-card__inner {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 32px 32px 24px;
    border-radius: 24px;
    direction: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-lg);
    transition: background .4s, border-color .4s;
}

[data-theme="dark"] .auth-card__inner {
    border-color: rgba(0, 208, 224, .08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 208, 224, .04);
}

.auth-card__glow {
    position: absolute;
    top: -60%;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(16, 96, 224, .12), transparent 70%);
    pointer-events: none;
}

[data-theme="dark"] .auth-card__glow {
    background: radial-gradient(ellipse, rgba(0, 208, 224, .1), transparent 70%);
}

.auth-card__brand {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.auth-card__logo {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 14px;
    object-fit: contain;
    animation: authLogoIn .8s cubic-bezier(.16, 1, .3, 1) .15s both;
}

@keyframes authLogoIn {
    from {
        opacity: 0;
        transform: scale(.5) rotate(-10deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

.auth-card__title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 4px;
    animation: authTextIn .5s ease .25s both;
}

.auth-card__subtitle {
    font-size: .82rem;
    color: var(--text-muted);
    animation: authTextIn .5s ease .35s both;
}

@keyframes authTextIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.auth-card__switch {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-alt);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 18px;
    animation: authTextIn .5s ease .45s both;
}

.auth-card__switch-bg {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: calc(50% - 4px);
    border-radius: 11px;
    background: var(--gradient);
    box-shadow: var(--shadow-brand);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

html[dir="ltr"] .auth-card__switch-bg {
    left: 4px;
}

html[dir="rtl"] .auth-card__switch-bg {
    right: 4px;
}

.auth-card__switch.is-right .auth-card__switch-bg {
    transform: translateX(calc(100% + 0px));
}

html[dir="rtl"] .auth-card__switch.is-right .auth-card__switch-bg {
    transform: translateX(calc(-100% - 0px));
}

.auth-card__switch-btn {
    position: relative;
    z-index: 1;
    padding: 10px;
    border-radius: 11px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-muted);
    transition: color .3s;
    background: transparent;
}

.auth-card__switch-btn.is-active {
    color: #fff;
}

.auth-card__forms {
    position: relative;
    z-index: 2;
    min-width: 0;
    width: 100%;
}

.auth-form {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: none;
    flex-direction: column;
    gap: 14px;
}

.auth-form.is-active {
    display: flex;
    animation: authFormIn .3s ease both;
}

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

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

.auth-name-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.auth-field {
    position: relative;
    min-width: 0;
}

.auth-field>input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 50px;
    padding: 18px 16px 8px;
    border: 1.5px solid var(--border-soft);
    border-radius: 14px;
    background: var(--bg-alt);
    color: var(--text);
    font-size: .88rem;
    line-height: 1.2;
    text-align: start;
    outline: none;
    transition: border-color .3s, background .3s, box-shadow .3s;
}

html[dir="ltr"] .auth-field>input {
    padding-right: 44px;
    padding-left: 44px;
}

html[dir="rtl"] .auth-field>input {
    padding-left: 44px;
    padding-right: 44px;
}

.auth-field>input::placeholder {
    color: transparent;
}

.auth-name-row .auth-field>input {
    padding-inline: 16px;
}

.auth-field>input:focus,
.auth-field>input:not(:placeholder-shown) {
    padding-top: 26px;
}

.auth-field>input:focus+label,
.auth-field>input:not(:placeholder-shown)+label {
    top: 5px;
    transform: translateY(0) scale(.7);
    line-height: 1.1;
}

.auth-phone-field {
    padding-top: 22px;
}

.auth-phone-field .iti {
    width: 100%;
    min-width: 0;
}

.auth-phone-field .iti__country-container {
    width: 104px;
    height: 100%;
    overflow: visible;
}

.auth-phone-field .iti__selected-country {
    z-index: 2;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 10px;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background: var(--bg-alt);
    border-inline-end: 1px solid var(--border-soft);
}

.auth-phone-field .iti__selected-dial-code {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--text-soft);
    white-space: nowrap;
}

.auth-phone-field .iti__dropdown-content {
    z-index: 30;
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: var(--shadow-lg);
}

.auth-phone-field .iti__search-input {
    display: block;
    width: calc(100% - 16px);
    height: 38px;
    margin: 8px;
    padding: 0 12px !important;
    border: 1px solid var(--border-soft);
    border-radius: 9px;
    background: var(--bg-alt);
    color: var(--text);
    font-family: inherit;
    font-size: .78rem;
    outline: none;
    direction: inherit;
    text-align: start;
}

.auth-phone-field .iti__search-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(16, 96, 224, .08);
}

[data-theme="dark"] .auth-phone-field .iti__search-input:focus {
    border-color: var(--cyan);
}

.auth-phone-field .iti__country-list {
    z-index: 20;
    max-width: min(300px, 80vw);
    max-height: 220px;
    padding: 6px 0;
    background: var(--bg-card);
    color: var(--text);
    scrollbar-width: thin;
    scrollbar-color: var(--text-muted) transparent;
}

.auth-phone-field .iti__country-selector:has(.iti__search-input:placeholder-shown) .iti__country[data-iso2="jo"] {
    border-bottom: 1px solid var(--border-soft);
}

.auth-phone-field .iti__country {
    min-height: 38px;
    padding: 8px 12px;
    color: var(--text-soft);
}

html[dir="ltr"] .auth-phone-field .iti__country {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .auth-phone-field .iti__country {
    direction: rtl;
    text-align: right;
}

.auth-phone-field .iti__country.iti__highlight {
    background: var(--bg-alt);
    color: var(--text);
}

.auth-phone-field .iti__country-name {
    color: inherit;
}

.auth-phone-field .iti__dial-code {
    color: var(--text-muted);
}

.auth-phone-field .iti__country-list::-webkit-scrollbar {
    width: 6px;
}

.auth-phone-field .iti__country-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--text-muted);
}

.auth-phone-field .iti input.iti__tel-input {
    display: block;
    height: 50px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-top: 10px !important;
    padding-bottom: 8px !important;
    border: 1.5px solid var(--border-soft);
    border-radius: 14px;
    background: var(--bg-alt);
    color: var(--text);
    font-family: inherit;
    font-size: .88rem;
    line-height: 1.2;
    direction: ltr !important;
    text-align: left !important;
    outline: none;
}

.auth-phone-field .iti input.iti__tel-input:focus {
    border-color: var(--brand);
    background: var(--bg-card);
    box-shadow: 0 0 0 4px rgba(16, 96, 224, .08);
}

[data-theme="dark"] .auth-phone-field .iti input.iti__tel-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(0, 208, 224, .08);
}

.auth-field.auth-phone-field>label {
    top: 0;
    bottom: auto;
    transform: none;
    z-index: 3;
    font-size: .68rem;
    line-height: 1.2;
    font-weight: 700;
}

html[dir="ltr"] .auth-field.auth-phone-field>label {
    left: 0;
    right: auto;
}

html[dir="rtl"] .auth-field.auth-phone-field>label {
    right: 0;
    left: auto;
}

html[dir="ltr"] .auth-phone-field .iti__country-container,
html[dir="ltr"] .auth-phone-field .iti__selected-country {
    left: 0;
    right: auto;
}

html[dir="rtl"] .auth-phone-field .iti__country-container,
html[dir="rtl"] .auth-phone-field .iti__selected-country {
    right: 0;
    left: auto;
}

html[dir="ltr"] .auth-phone-field .iti input.iti__tel-input {
    padding-left: 112px !important;
    padding-right: 16px !important;
}

html[dir="rtl"] .auth-phone-field .iti input.iti__tel-input {
    padding-left: 16px !important;
    padding-right: 112px !important;
}

[data-theme="dark"] .auth-phone-field>label {
    color: var(--cyan);
}

.auth-field label {
    position: absolute;
    top: 50%;
    color: var(--text-muted);
    font-size: .85rem;
    pointer-events: none;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    transform: translateY(-50%);
}

html[dir="ltr"] .auth-field label {
    left: 44px;
}

html[dir="rtl"] .auth-field label {
    right: 44px;
}

.auth-field>input:focus,
.auth-field>input:not(:placeholder-shown) {
    border-color: var(--brand);
    background: var(--bg-card);
    box-shadow: 0 0 0 4px rgba(16, 96, 224, .08);
}

[data-theme="dark"] .auth-field>input:focus,
[data-theme="dark"] .auth-field>input:not(:placeholder-shown) {
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(0, 208, 224, .08);
}

.auth-field>input:focus+label,
.auth-field>input:not(:placeholder-shown)+label {
    top: 5px;
    transform: translateY(0) scale(.7);
    line-height: 1.1;
    color: var(--brand);
    font-weight: 600;
}

[data-theme="dark"] .auth-field>input:focus+label,
[data-theme="dark"] .auth-field>input:not(:placeholder-shown)+label {
    color: var(--cyan);
}

.auth-field__error {
    display: none;
    margin-top: 6px;
    color: #e53e3e;
    font-size: .68rem;
    font-weight: 600;
}

.auth-field.has-error .auth-field__error {
    display: block;
}

.auth-field.has-error>input {
    border-color: #e53e3e;
    box-shadow: 0 0 0 4px rgba(229, 62, 62, .08);
}

.auth-field__icon,
.auth-field__toggle {
    position: absolute;
    top: 25px;
    transform: translateY(-50%);
    color: var(--text-muted);
    transition: color .25s;
    display: grid;
    place-items: center;
}

.auth-field__icon {
    width: 18px;
    height: 18px;
}

html[dir="ltr"] .auth-field__icon {
    left: 16px;
}

html[dir="rtl"] .auth-field__icon {
    right: 16px;
}

.auth-field__toggle {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

html[dir="ltr"] .auth-field__toggle {
    right: 10px;
}

html[dir="rtl"] .auth-field__toggle {
    left: 10px;
}

.auth-field__toggle:hover,
.auth-field__toggle.is-visible {
    background: rgba(16, 96, 224, .1);
    color: var(--brand);
    box-shadow: 0 0 0 3px rgba(16, 96, 224, .08);
}

.auth-field__toggle.is-visible svg {
    transform: scale(1.12);
}

[data-theme="dark"] .auth-field__toggle:hover,
[data-theme="dark"] .auth-field__toggle.is-visible {
    background: rgba(0, 208, 224, .12);
    color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0, 208, 224, .1);
}

.auth-field>input:focus~.auth-field__icon {
    color: var(--brand);
}

[data-theme="dark"] .auth-field>input:focus~.auth-field__icon {
    color: var(--cyan);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: -4px;
    font-size: .78rem;
    color: var(--text-soft);
    direction: inherit;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.auth-check input {
    display: none;
}

.auth-check__box {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid var(--border-soft);
    background: var(--bg-alt);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    transition: all .25s;
}

.auth-check__box::after {
    content: '✓';
    font-size: .55rem;
    font-weight: 800;
    color: #fff;
    transform: scale(0);
    transition: transform .2s;
}

.auth-check input:checked+.auth-check__box {
    border-color: var(--brand);
    background: var(--brand);
}

[data-theme="dark"] .auth-check input:checked+.auth-check__box {
    border-color: var(--cyan);
    background: var(--cyan);
}

.auth-check input:checked+.auth-check__box::after {
    transform: scale(1);
}

.auth-link {
    color: var(--brand);
    font-weight: 600;
    transition: opacity .2s;
}

[data-theme="dark"] .auth-link {
    color: var(--cyan);
}

.auth-link:hover {
    opacity: .8;
}

.auth-strength {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: -8px;
}

.auth-strength span {
    height: 4px;
    border-radius: 4px;
    background: var(--border-soft);
    transition: background .3s;
}

.auth-strength.is-1 span:nth-child(1) {
    background: #e53e3e;
}

.auth-strength.is-2 span:nth-child(-n+2) {
    background: #ed8936;
}

.auth-strength.is-3 span:nth-child(-n+3) {
    background: #38a169;
}

.auth-strength.is-4 span {
    background: var(--gradient);
}

.auth-submit {
    width: 100%;
    height: 48px;
    border-radius: 14px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    direction: inherit;
    background: var(--gradient);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    box-shadow: var(--shadow-brand);
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}

html[dir="rtl"] .auth-submit svg {
    transform: scaleX(-1);
}

.auth-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(16, 96, 224, .35);
}

.auth-submit:hover svg {
    transform: translateX(4px);
}

html[dir="rtl"] .auth-submit:hover svg {
    transform: scaleX(-1) translateX(4px);
}

.auth-submit:active {
    transform: translateY(0);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    font-size: .72rem;
    color: var(--text-muted);
    position: relative;
    z-index: 2;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

.auth-social {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    position: relative;
    z-index: 2;
}

.auth-social__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    border-radius: 12px;
    border: 1.5px solid var(--border-soft);
    background: var(--bg-alt);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-soft);
    text-decoration: none;
    cursor: pointer;
    transition: all .25s;
}

.auth-social__btn:hover {
    border-color: var(--border);
    background: var(--bg-card);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.auth-footer {
    text-align: center;
    margin-top: 18px;
    font-size: .82rem;
    color: var(--text-muted);
    position: relative;
    z-index: 2;
}

.auth-footer button,
.auth-footer a {
    color: var(--brand);
    font: inherit;
    font-weight: 700;
    background: transparent;
    border: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

[data-theme="dark"] .auth-footer button,
[data-theme="dark"] .auth-footer a {
    color: var(--cyan);
}

.auth-footer button:hover,
.auth-footer a:hover {
    text-decoration: underline;
}

/* AJAX auth errors/loading */
.auth-alert {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
    line-height: 1.5;
}

.auth-alert--error {
    background: rgba(229, 62, 62, .1);
    border: 1px solid rgba(229, 62, 62, .25);
    color: #ef4444;
}

[data-theme="dark"] .auth-alert--error {
    background: rgba(239, 68, 68, .12);
    border-color: rgba(239, 68, 68, .35);
    color: #ff7d7d;
}

.auth-alert--success {
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .25);
    color: #16a34a;
}

[data-theme="dark"] .auth-alert--success {
    background: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .3);
    color: #4ade80;
}

.auth-alert--info {
    background: rgba(16, 96, 224, .08);
    border: 1px solid rgba(16, 96, 224, .2);
    color: var(--brand);
}

[data-theme="dark"] .auth-alert--info {
    background: rgba(0, 208, 224, .08);
    border-color: rgba(0, 208, 224, .2);
    color: var(--cyan);
}

/* 2FA code input */
.auth-2fa-field {
    margin-bottom: 8px;
}

.auth-2fa-field input {
    text-align: center;
    letter-spacing: .4em;
    font-size: 1.4rem;
    font-weight: 800;
    height: 64px;
    padding: 20px 16px 8px;
    direction: ltr;
}

html[dir="ltr"] .auth-2fa-field label {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
}

html[dir="rtl"] .auth-2fa-field label {
    right: 50%;
    left: auto;
    transform: translate(50%, -50%);
}

html[dir="ltr"] .auth-2fa-field input:focus+label,
html[dir="ltr"] .auth-2fa-field input:not(:placeholder-shown)+label {
    top: 8px;
    transform: translate(-50%, 0) scale(.7);
    color: var(--brand);
}

html[dir="rtl"] .auth-2fa-field input:focus+label,
html[dir="rtl"] .auth-2fa-field input:not(:placeholder-shown)+label {
    top: 8px;
    transform: translate(50%, 0) scale(.7);
    color: var(--brand);
}

[data-theme="dark"] .auth-2fa-field input:focus+label,
[data-theme="dark"] .auth-2fa-field input:not(:placeholder-shown)+label {
    color: var(--cyan);
}

.auth-field__feedback {
    display: block;
    margin-top: 6px;
    font-size: .72rem;
    font-weight: 600;
    color: #ef4444;
}

[data-theme="dark"] .auth-field__feedback {
    color: #ff7d7d;
}

.auth-field input.is-invalid {
    border-color: #ef4444;
}

[data-theme="dark"] .auth-field input.is-invalid {
    border-color: #ff7d7d;
}

.auth-field input.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}

.auth-submit.is-loading {
    opacity: .7;
    pointer-events: none;
}

.auth-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: authSpin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

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

.auth-field__hint {
    display: block;
    margin-top: 5px;
    font-size: .68rem;
    color: var(--text-muted);
}

.auth-field input.is-valid {
    border-color: #22c55e;
}

.auth-field input.is-valid:focus {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .08);
}

.auth-field .auth-field__error.is-live {
    display: block;
    color: #e53e3e;
}

.auth-field .auth-field__error.is-ok {
    display: block;
    color: #16a34a;
}

@media (max-width: 480px) {
    .auth-page {
        min-height: 100svh;
        height: auto;
        align-items: flex-start;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 48px 12px 48px;
    }

    .auth-page>.auth-card {
        margin: auto;
    }

    .auth-name-row {
        gap: 8px;
    }

    .auth-phone-field .iti input {
        height: 48px;
    }

    .auth-card__inner {
        padding: 32px 22px 24px;
        border-radius: 20px;
    }

    .auth-card__title {
        font-size: 1.3rem;
    }

    .auth-card__subtitle {
        font-size: .78rem;
    }

    .auth-field>input {
        height: 48px;
        font-size: .82rem;
    }

    .auth-submit {
        height: 48px;
        font-size: .85rem;
    }

    .auth-social__btn {
        height: 42px;
        font-size: .76rem;
    }

    .auth-page__top,
    .auth-page__back {
        top: 16px;
    }

    html[dir="ltr"] .auth-page__top {
        right: 16px;
    }

    html[dir="ltr"] .auth-page__back {
        left: 16px;
    }

    html[dir="rtl"] .auth-page__top {
        left: 16px;
    }

    html[dir="rtl"] .auth-page__back {
        right: 16px;
    }
}

@media (max-width: 360px) {
    .auth-social {
        grid-template-columns: 1fr;
    }
}

.pricing-tabs {
    width: max-content;
    max-width: 100%;
    margin: 0 auto 34px;
    padding: 6px;
    display: flex;
    gap: 6px;
    border: 1px solid rgba(16, 96, 224, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 14px 38px rgba(24, 52, 88, .1), inset 0 1px #fff;
    backdrop-filter: blur(18px);
}

.pricing-tab {
    min-height: 52px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 13px;
    color: var(--text-muted);
    background: transparent;
    font-size: .8rem;
    font-weight: 800;
    transition: .25s ease;
}

.pricing-tab svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pricing-tab small {
    padding: 3px 7px;
    border-radius: 20px;
    color: var(--brand);
    background: rgba(16, 96, 224, .09);
    font-size: .52rem;
}

.pricing-tab:hover {
    color: var(--brand);
    background: rgba(16, 96, 224, .05);
}

.pricing-tab.is-active {
    color: #fff;
    background: var(--gradient);
    box-shadow: 0 9px 24px rgba(16, 96, 224, .25);
}

.pricing-tab.is-active small {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

.pricing-panel {
    animation: pricingPanelIn .38s ease both;
}

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

@keyframes pricingPanelIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.pricing-calls-intro {
    max-width: 720px;
    margin: -12px auto 24px;
    text-align: center;
}

.pricing-calls-intro span {
    color: var(--brand);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.pricing-calls-intro p {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.7;
}

.pricing__grid--calls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1120px;
    margin-inline: auto;
    gap: 22px;
}

.pricing__grid--calls .price-card {
    min-height: 920px;
    padding: 22px;
}

.pricing__grid--calls .price-card__channels {
    margin-bottom: 15px;
}

.price-card__group-title {
    margin: 15px 0 8px;
    display: block;
    color: var(--text-muted);
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.price-card__usage {
    min-height: 68px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--tier) 16%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--tier-soft) 72%, #fff);
    box-shadow: inset 0 1px rgba(255, 255, 255, .7);
}

.price-card__usage .price-card__quota {
    min-width: 0;
    min-height: 68px;
    margin: 0;
    padding: 9px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
}

.price-card__usage .price-card__quota+.price-card__quota {
    border-inline-start: 1px solid color-mix(in srgb, var(--tier) 16%, transparent);
}

.price-card__usage .price-card__quota strong {
    color: var(--tier-strong);
    font-size: 1.08rem;
    line-height: 1;
    letter-spacing: -.02em;
}

.price-card__usage .price-card__quota span {
    max-width: 100%;
    color: var(--text-muted);
    font-size: .57rem;
    line-height: 1.25;
    font-weight: 700;
}

.price-card__quota--calls {
    background: transparent !important;
}

.price-card__quota--calls strong {
    color: var(--tier-strong);
}

.price-card__feature-groups {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 0 0 17px;
}

.price-card__feature-group {
    padding: 13px 12px;
    border: 1px solid rgba(16, 96, 224, .08);
    border-radius: 14px;
    background: rgba(255, 255, 255, .38);
}

.price-card__feature-group h4 {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text);
    font-size: .66rem;
    font-weight: 800;
}

.price-card__feature-group h4::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--plan-b);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--plan-b) 12%, transparent);
}

.price-card__feature-group--calls {
    border-color: color-mix(in srgb, var(--tier) 18%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--tier-soft) 58%, #fff), color-mix(in srgb, var(--tier) 4%, #fff));
}

.price-card__feature-group--calls h4 {
    color: var(--tier-strong);
}

.pricing__grid--calls .price-card__features {
    flex: none;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
}

.pricing__grid--calls .price-card__features li {
    min-height: 18px;
    gap: 7px;
    font-size: .63rem;
    line-height: 1.4;
}

.pricing__grid--calls .price-card__features li::before {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

.price-card__call-features li::before {
    content: '✓';
    color: #fff;
    background: linear-gradient(135deg, var(--tier), var(--tier-strong));
    border: 0;
    font-size: .48rem;
}

html[dir="rtl"] .price-card__usage .price-card__quota {
    align-items: center;
    text-align: center;
}

[data-theme="dark"] .pricing-tabs {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(14, 25, 42, .72);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .04);
}

[data-theme="dark"] .pricing-tab small {
    color: var(--cyan);
    background: rgba(0, 208, 224, .08);
}

[data-theme="dark"] .pricing-tab.is-active small {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

[data-theme="dark"] .price-card__usage {
    border-color: color-mix(in srgb, var(--tier) 17%, transparent);
    background: color-mix(in srgb, var(--tier) 10%, #111d30);
    box-shadow: none;
}

[data-theme="dark"] .price-card__usage .price-card__quota+.price-card__quota {
    border-inline-start-color: color-mix(in srgb, var(--tier) 17%, transparent);
}

[data-theme="dark"] .price-card__usage .price-card__quota strong {
    color: color-mix(in srgb, var(--tier) 75%, #fff);
}

[data-theme="dark"] .price-card__feature-group {
    border-color: rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .025);
}

[data-theme="dark"] .price-card__feature-group--calls {
    border-color: color-mix(in srgb, var(--tier) 20%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--tier) 9%, #111d30), color-mix(in srgb, var(--tier) 4%, #111d30));
}

[data-theme="dark"] .price-card__feature-group h4 {
    color: #e5edf7;
}

[data-theme="dark"] .price-card__feature-group--calls h4 {
    color: color-mix(in srgb, var(--tier) 72%, #fff);
}

html[dir="rtl"] .pricing-calls-intro {
    direction: rtl;
}

@media (max-width: 900px) {
    .pricing__grid--calls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .pricing-tabs {
        width: 100%;
        margin-bottom: 26px;
    }

    .pricing-tab {
        flex: 1;
        min-width: 0;
        padding-inline: 10px;
        font-size: .7rem;
    }

    .pricing-tab small {
        display: none;
    }

    .pricing__grid--calls {
        grid-template-columns: 1fr;
    }

    .pricing__grid--calls .price-card {
        min-height: 0;
    }
}
/* ============ LEGAL / CONTENT PAGES ============ */
.legal-hero {
    position: relative;
    z-index: 1;
    padding: 160px 0 40px;
    text-align: center;
}

.legal-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 12px;
}

.legal-hero__desc {
    max-width: 640px;
    margin: 0 auto;
    color: var(--text-soft);
    font-size: 1.05rem;
    line-height: 1.8;
}

.legal-section {
    position: relative;
    z-index: 1;
    padding: 20px 0 100px;
}

.legal-content {
    max-width: 840px;
    margin: 0 auto;
    padding: 48px 56px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 20px 50px -30px rgba(16, 96, 224, .25);
}

.legal-content h2 {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text);
    margin: 36px 0 14px;
    padding-inline-start: 14px;
    border-inline-start: 4px solid transparent;
    border-image: var(--gradient) 1;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 24px 0 10px;
}

.legal-content p {
    color: var(--text-soft);
    font-size: .98rem;
    line-height: 1.9;
    margin: 0 0 14px;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 16px;
    padding-inline-start: 24px;
    color: var(--text-soft);
    font-size: .98rem;
    line-height: 1.9;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content li::marker {
    color: #1060e0;
}

.legal-content strong {
    color: var(--text);
    font-weight: 700;
}

.legal-content a {
    color: #1060e0;
    text-decoration: underline;
    text-decoration-color: rgba(16, 96, 224, .4);
}

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
    font-size: .92rem;
}

.legal-content th,
.legal-content td {
    border: 1px solid var(--border-soft);
    padding: 10px 14px;
    text-align: start;
    color: var(--text-soft);
}

.legal-content th {
    background: var(--bg-alt);
    color: var(--text);
    font-weight: 700;
}

.legal-content blockquote {
    margin: 0 0 16px;
    padding: 14px 20px;
    border-inline-start: 4px solid transparent;
    border-image: var(--gradient) 1;
    background: var(--gradient-soft);
    border-radius: 12px;
    color: var(--text-soft);
}

@media (max-width: 767px) {
    .legal-hero {
        padding: 130px 0 28px;
    }

    .legal-content {
        padding: 28px 22px;
        border-radius: 18px;
    }
}

/* ============ CONTACT PAGE ============ */
.contact-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 32px;
    max-width: 1080px;
    margin: 0 auto;
    align-items: start;
}

/* --- Info sidebar --- */
.contact-info {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 38px 34px;
    background: linear-gradient(150deg, var(--brand), #0b48b4 55%, #0891b2);
    color: #fff;
    box-shadow: 0 24px 60px -28px rgba(16, 96, 224, .55);
}

.contact-info::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .22), transparent 46%),
        radial-gradient(circle at 8% 92%, rgba(255, 255, 255, .12), transparent 40%);
    pointer-events: none;
}

.contact-info__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-info__title {
    font-size: 1.45rem;
    font-weight: 900;
    color: #fff;
    margin: 0 0 4px;
}

.contact-info__desc {
    font-size: .9rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 14px;
}

.contact-info__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    color: #fff;
    text-decoration: none;
    transition: background .25s, transform .25s;
}

.contact-info__item:hover {
    background: rgba(255, 255, 255, .2);
    transform: translateY(-2px);
    color: #fff;
}

.contact-info__icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
}

.contact-info__icon svg {
    width: 19px;
    height: 19px;
}

.contact-info__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contact-info__text small {
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .72);
}

.contact-info__text b {
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    word-break: break-all;
}

.contact-info__social {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.contact-info__social a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    transition: background .25s;
}

.contact-info__social a:hover {
    background: rgba(255, 255, 255, .24);
}

/* --- Form card --- */
.contact-card {
    padding: 40px 44px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 20px 50px -30px rgba(16, 96, 224, .25);
}

.contact-card__title {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--text);
    margin: 0 0 22px;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* --- Floating-label fields (same language as auth-field) --- */
.contact-field {
    position: relative;
    min-width: 0;
    margin-bottom: 16px;
}

.contact-field>input,
.contact-field>textarea {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 26px 46px 8px 16px;
    border: 1.5px solid var(--border-soft);
    border-radius: 14px;
    background: var(--bg-alt);
    color: var(--text);
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.4;
    outline: none;
    transition: border-color .3s, background .3s, box-shadow .3s;
}

.contact-field>input {
    height: 56px;
    padding-top: 24px;
}

.contact-field>textarea {
    min-height: 140px;
    resize: vertical;
    padding-top: 30px;
}

html[dir="ltr"] .contact-field>input,
html[dir="ltr"] .contact-field>textarea {
    padding-right: 16px;
    padding-left: 46px;
}

html[dir="rtl"] .contact-field>input,
html[dir="rtl"] .contact-field>textarea {
    padding-left: 16px;
    padding-right: 46px;
}

.contact-field>input::placeholder,
.contact-field>textarea::placeholder {
    color: transparent;
}

.contact-field label {
    position: absolute;
    top: 28px;
    color: var(--text-muted);
    font-size: .85rem;
    pointer-events: none;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    transform: translateY(-50%);
}

.contact-field--area label {
    top: 18px;
    transform: none;
}

html[dir="ltr"] .contact-field label {
    left: 46px;
}

html[dir="rtl"] .contact-field label {
    right: 46px;
}

.contact-field>input:focus,
.contact-field>input:not(:placeholder-shown),
.contact-field>textarea:focus,
.contact-field>textarea:not(:placeholder-shown) {
    border-color: var(--brand);
    background: var(--bg-card);
    box-shadow: 0 0 0 4px rgba(16, 96, 224, .08);
}

[data-theme="dark"] .contact-field>input:focus,
[data-theme="dark"] .contact-field>input:not(:placeholder-shown),
[data-theme="dark"] .contact-field>textarea:focus,
[data-theme="dark"] .contact-field>textarea:not(:placeholder-shown) {
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(0, 208, 224, .08);
}

.contact-field>input:focus+label,
.contact-field>input:not(:placeholder-shown)+label {
    top: 9px;
    transform: translateY(0) scale(.72);
    color: var(--brand);
}

.contact-field>textarea:focus+label,
.contact-field>textarea:not(:placeholder-shown)+label {
    top: 10px;
    transform: scale(.72);
    transform-origin: left top;
    color: var(--brand);
}

html[dir="rtl"] .contact-field>textarea:focus+label,
html[dir="rtl"] .contact-field>textarea:not(:placeholder-shown)+label {
    transform-origin: right top;
}

.contact-field__icon {
    position: absolute;
    top: 28px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    transition: color .25s;
    pointer-events: none;
}

.contact-field--area .contact-field__icon {
    top: 18px;
    transform: none;
}

html[dir="ltr"] .contact-field__icon {
    left: 16px;
}

html[dir="rtl"] .contact-field__icon {
    right: 16px;
}

.contact-field>input:focus~.contact-field__icon,
.contact-field>textarea:focus~.contact-field__icon {
    color: var(--brand);
}

.contact-field.has-error>input,
.contact-field.has-error>textarea {
    border-color: #ef4444;
}

/* --- Misc --- */
.contact-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

.contact-form__captcha {
    margin: 4px 0 18px;
}

.contact-form__submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.contact-alert {
    padding: 14px 18px;
    border-radius: 14px;
    font-size: .92rem;
    font-weight: 600;
    margin-bottom: 20px;
    line-height: 1.7;
}

.contact-alert--success {
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .3);
    color: #16a34a;
}

.contact-alert--error {
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .25);
    color: #dc2626;
}

@media (max-width: 991px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .contact-card {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .contact-info {
        padding: 30px 24px;
        border-radius: 18px;
    }

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

/* --- Submit loading state --- */
.contact-form__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: contact-spin .7s linear infinite;
}

.contact-form__submit.is-loading {
    opacity: .85;
    cursor: not-allowed;
}

.contact-form__submit.is-loading .contact-form__spinner {
    display: inline-block;
}

.contact-form__submit.is-loading .contact-form__plane {
    display: none;
}

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