/* روحة (Rohha) — Mobility Tech Visual Identity */

:root {
    --rooha-cyan: #06b6d4;
    --rooha-teal: #139a8c;
    --rooha-teal-deep: #0d8275;
    --rooha-teal-light: #14b8a6;
    --rooha-amber: #f59e0b;
    --rooha-amber-light: #fef3c7;
    --rooha-dark: #091311;
    --rooha-surface: #101c19;
    --rooha-slate: #152522;
    --rooha-glass: rgba(16, 28, 25, 0.88);
    --rooha-glass-border: rgba(19, 154, 140, 0.22);
    --rooha-heading: #ffffff;
    --rooha-text: #f0fdfa;
    --rooha-muted: #8ea8a2;
    --rooha-font: 'Alexandria', 'Plus Jakarta Sans', system-ui, sans-serif;
}

html.light {
    --rooha-dark: #f4f8f7;
    --rooha-surface: #ffffff;
    --rooha-slate: #ebf5f2;
    --rooha-glass: rgba(255, 255, 255, 0.94);
    --rooha-glass-border: rgba(19, 154, 140, 0.2);
    --rooha-heading: #0e1e1b;
    --rooha-text: #233834;
    --rooha-muted: #53756d;
}

html {
    font-size: 16px;
}

body {
    background: radial-gradient(ellipse 120% 80% at 50% -20%, rgba(19, 154, 140, 0.15), transparent 50%),
        radial-gradient(ellipse 80% 50% at 100% 50%, rgba(6, 182, 212, 0.08), transparent 45%),
        var(--rooha-dark);
    color: var(--rooha-text);
    font-family: var(--rooha-font);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html.light body {
    background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(19, 154, 140, 0.08), transparent 55%), #f4f8f7;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--rooha-heading);
    font-family: var(--rooha-font);
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: 0;
}

p, li, label, input, textarea, button, a {
    font-family: var(--rooha-font);
}

/* High-contrast text overrides */
.text-slate-200,
.text-slate-300 {
    color: var(--rooha-text) !important;
}

.text-slate-400,
.text-slate-500 {
    color: var(--rooha-muted) !important;
}

html.light .text-white {
    color: var(--rooha-heading) !important;
}

html:not(.light) h1,
html:not(.light) h2,
html:not(.light) h3,
html:not(.light) .font-extrabold {
    color: var(--rooha-heading);
}

html.light .neon-text {
    background: linear-gradient(135deg, #139a8c, #0d8275);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html:not(.light) .neon-text {
    background: linear-gradient(135deg, #2dd4bf, #14b8a6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.prose,
.prose-invert {
    color: var(--rooha-text) !important;
}

.prose strong,
.prose b {
    color: var(--rooha-heading);
    font-weight: 700;
}

.glass-panel {
    background: var(--rooha-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--rooha-glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.light .glass-panel {
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.neon-text {
    font-weight: 800;
}

.neon-glow {
    box-shadow: 0 0 35px rgba(19, 154, 140, 0.35), 0 0 70px rgba(6, 182, 212, 0.15);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: float-orb 8s ease-in-out infinite;
}

@keyframes float-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -30px) scale(1.05); }
}

.phone-float {
    animation: phone-float 6s ease-in-out infinite;
}

@keyframes phone-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-14px) rotate(2deg); }
}

/* ── How it works — centered showcase ── */
.how-work-showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    max-width: 100%;
    margin-inline: auto;
}

.how-work-card {
    flex: 0 1 260px;
    max-width: 280px;
    width: 100%;
    opacity: 0;
    transform: translateY(36px) scale(0.96);
}

.reveal-section.is-visible .how-work-card {
    animation: how-work-enter 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--how-work-delay, 0s) + 0.15s);
}

.how-work-card-inner {
    height: 100%;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.how-work-card:hover .how-work-card-inner {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(19, 154, 140, 0.15);
    border-color: rgba(19, 154, 140, 0.35);
}

.how-work-phone {
    animation: how-work-float 5.5s ease-in-out infinite;
    animation-delay: var(--how-work-float-delay, 0s);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

@keyframes how-work-enter {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

.how-work-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rooha-dark);
    background: linear-gradient(135deg, var(--rooha-cyan), var(--rooha-teal));
}

/* ── Scroll reveal (sections) ── */
.reveal-section {
    opacity: 0;
    transform: translateY(56px);
    transition:
        opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

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

.reveal-section .reveal-stagger > * {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.reveal-section.is-visible .reveal-stagger > *:nth-child(1) { transition-delay: 0.08s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(2) { transition-delay: 0.16s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(3) { transition-delay: 0.24s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(4) { transition-delay: 0.32s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(5) { transition-delay: 0.40s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(6) { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
    .reveal-section {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .reveal-section .reveal-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .how-work-card {
        opacity: 1;
        transform: none;
        animation: none !important;
    }

    .how-work-phone {
        animation: none;
    }

    .pn-orbit-dash {
        animation: none !important;
    }
}

@media (max-width: 639px) {
    .how-work-card {
        flex: 0 1 min(100%, 280px);
    }

    .pn-card-frame {
        width: 116px;
        height: 72px;
    }
}

.service-cube {
    transform-style: preserve-3d;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.service-cube:hover {
    transform: translateY(-8px) rotateX(4deg);
    box-shadow: 0 20px 50px rgba(19, 154, 140, 0.2);
}

.nav-scrolled {
    background: rgba(9, 19, 17, 0.92) !important;
    border-bottom-color: rgba(20, 184, 166, 0.3) !important;
}

html.light .nav-scrolled {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom-color: rgba(19, 154, 140, 0.25) !important;
}

.loader-rooha {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rooha-dark);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loader-rooha.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.section-anchor {
    scroll-margin-top: 5.5rem;
}

[x-cloak] {
    display: none !important;
}

html.light footer h6.text-white,
html.light article h3.text-white {
    color: var(--rooha-heading);
}

.scrollbar-thin::-webkit-scrollbar {
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgba(19, 154, 140, 0.4);
    border-radius: 999px;
}

/* ── Parsley & Form Validation Styles (Identical to Admin Dashboard) ── */
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
    border-color: rgba(20, 184, 166, 0.7) !important;
    background-color: rgba(20, 184, 166, 0.05) !important;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error,
.issue input,
.issue textarea {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

.help-block {
    display: block;
    width: 100%;
}

.parsley-errors-list,
.help-block ul {
    display: block;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: #ef4444;
    opacity: 0;
    transition: all 0.25s ease-in-out;
}

.parsley-errors-list.filled,
.help-block ul[role="alert"],
.help-block ul:not(:empty) {
    opacity: 1;
}

.parsley-errors-list li,
.help-block ul li,
.parsley-custom-error-message,
.text-danger {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444 !important;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 3px;
}

.parsley-errors-list li::before,
.help-block ul li::before {
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: #ef4444;
    flex-shrink: 0;
}

/* SweetAlert2 Theme Matching Admin Dashboard */
.rooha-swal-popup,
.swal2-popup {
    border-radius: 24px !important;
    font-family: 'Alexandria', 'Plus Jakarta Sans', sans-serif !important;
}

html.dark .swal2-popup {
    background: #101c19 !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

html.dark .swal2-title {
    color: #f1f5f9 !important;
}

html.dark .swal2-html-container {
    color: #94a3b8 !important;
}

/* ── Download Phone Gentle Pulse & Glow (نبضات هادئة جذابة لقسم التحميل) ── */
.download-phone-container {
    position: relative;
    padding: 2.5rem 1.5rem;
}

.download-pulse-aura {
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(20, 184, 166, 0.35) 0%, rgba(6, 182, 212, 0.18) 45%, transparent 72%);
    filter: blur(38px);
    pointer-events: none;
    z-index: 1;
    animation: phoneAuraPulse 4.5s ease-in-out infinite;
}

.download-pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3.5rem;
    border: 2px solid rgba(20, 184, 166, 0.4);
    pointer-events: none;
    z-index: 2;
    animation: phoneRingRipples 5s cubic-bezier(0.15, 0.75, 0.35, 1) infinite;
}

.download-pulse-ring--1 {
    width: 88%;
    height: 88%;
    animation-delay: 0s;
}

.download-pulse-ring--2 {
    width: 88%;
    height: 88%;
    animation-delay: 1.6s;
    border-color: rgba(6, 182, 212, 0.35);
}

.download-pulse-ring--3 {
    width: 88%;
    height: 88%;
    animation-delay: 3.2s;
    border-color: rgba(245, 158, 11, 0.28);
}

.download-phone-wrapper {
    animation: phoneGentleFloat 4.5s ease-in-out infinite;
    will-change: transform;
}

.download-phone-img {
    filter: drop-shadow(0 25px 45px rgba(20, 184, 166, 0.45)) drop-shadow(0 0 30px rgba(6, 182, 212, 0.25));
    transition: transform 0.5s ease;
}

.download-phone-container:hover .download-phone-img {
    transform: scale(1.04);
}

@keyframes phoneGentleFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.025);
    }
}

@keyframes phoneAuraPulse {
    0%, 100% {
        opacity: 0.55;
        transform: scale(0.92);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.1);
    }
}

@keyframes phoneRingRipples {
    0% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0.85;
    }
    60% {
        opacity: 0.4;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0;
    }
}

/* ==========================================================================
   How It Works — Journey Rail (خطوات العمل — مسار الرحلة)
   ========================================================================== */
.how-work-section {
    --hw-accent: #06b6d4;
    --hw-accent-2: #14b8a6;
    --hw-accent-deep: #139a8c;
    --hw-glow: rgba(6, 182, 212, 0.45);
    --hw-rail-track: rgba(255, 255, 255, 0.10);
    --hw-card-bg: linear-gradient(165deg, rgba(24, 42, 38, 0.94) 0%, rgba(10, 20, 18, 0.96) 100%);
    --hw-card-border: rgba(20, 184, 166, 0.22);
    --hw-card-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.7);
    --hw-title: #ffffff;
    --hw-muted: #93aca6;
    --hw-node-bg: linear-gradient(135deg, #22d3ee 0%, #0d8275 100%);
    --hw-node-text: #04140f;
    --hw-node-size: 3.5rem;
    --hw-progress: 0;
    --hw-dot-x: -50%;
    --hw-parallax-x: 0px;
    --hw-parallax-y: 0px;

    overflow-x: clip;
}

html.light .how-work-section,
[data-theme="light"] .how-work-section {
    --hw-accent: #0d9488;
    --hw-accent-2: #14b8a6;
    --hw-accent-deep: #0f766e;
    --hw-glow: rgba(13, 148, 136, 0.35);
    --hw-rail-track: rgba(15, 23, 42, 0.09);
    --hw-card-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(236, 247, 244, 0.97) 100%);
    --hw-card-border: rgba(19, 154, 140, 0.22);
    --hw-card-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.35);
    --hw-title: #0e1e1b;
    --hw-muted: #53756d;
    --hw-node-bg: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    --hw-node-text: #ffffff;
}

/* ── Ambient Atmosphere ── */
.hw-ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.hw-ambient--one {
    top: 6%;
    inset-inline-start: -6%;
    width: 34rem;
    height: 34rem;
    background: radial-gradient(circle, rgba(19, 154, 140, 0.20) 0%, transparent 68%);
    animation: hwDrift 14s ease-in-out infinite;
}

.hw-ambient--two {
    bottom: 4%;
    inset-inline-end: -8%;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.16) 0%, transparent 68%);
    animation: hwDrift 18s ease-in-out infinite reverse;
}

.hw-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 60% at 50% 45%, #000 0%, transparent 78%);
}

html.light .hw-grid-lines {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
}

@keyframes hwDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(40px, -34px, 0) scale(1.08); }
}

/* ── Section Heading ── */
.hw-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3.25rem;
}

.hw-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.hw-kicker-line {
    display: inline-block;
    width: 2.5rem;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, var(--hw-accent));
    opacity: 0.85;
}

.hw-kicker-line:last-child {
    background: linear-gradient(90deg, var(--hw-accent), transparent);
}

.hw-kicker-text {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--hw-accent);
    font-family: var(--rooha-font);
}

.hw-heading {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
    font-family: var(--rooha-font);
}

.hw-subtitle {
    margin-top: 1rem;
    font-size: 1.02rem;
    line-height: 1.95;
    color: var(--hw-muted);
    max-width: 760px;
}

/* ── Journey Rail ── */
.hw-track {
    position: relative;
    z-index: 2;
}

.hw-steps {
    display: grid;
    grid-template-columns: repeat(var(--hw-count), minmax(0, 1fr));
    gap: var(--hw-gap);
}

.hw-rail {
    position: absolute;
    top: calc(var(--hw-node-size) / 2 - 1px);
    inset-inline: calc((100% - (var(--hw-count) - 1) * var(--hw-gap)) / (2 * var(--hw-count)));
    height: 2px;
    z-index: 0;
    pointer-events: none;
}

.hw-track.is-single .hw-rail {
    display: none;
}

.hw-rail-line,
.hw-rail-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: 9999px;
}

.hw-rail-line {
    inset-inline: 0;
    width: 100%;
    background: var(--hw-rail-track);
}

.hw-rail-fill {
    width: calc(var(--hw-progress) * 100%);
    background: linear-gradient(90deg, var(--hw-accent-deep), var(--hw-accent) 55%, var(--hw-accent-2));
    box-shadow: 0 0 16px var(--hw-glow);
    transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.hw-rail-dot {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(var(--hw-progress) * 100%);
    width: 11px;
    height: 11px;
    border-radius: 9999px;
    background: #ffffff;
    transform: translate(var(--hw-dot-x), -50%);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.18), 0 0 18px var(--hw-glow);
    transition: inset-inline-start 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

[dir="rtl"] .hw-rail-dot {
    --hw-dot-x: 50%;
}

[dir="rtl"] .hw-rail-fill {
    background: linear-gradient(270deg, var(--hw-accent-deep), var(--hw-accent) 55%, var(--hw-accent-2));
}

.hw-rail-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    border: 1.5px solid var(--hw-accent);
    opacity: 0.7;
    animation: hwDotPing 2.6s ease-out infinite;
}

@keyframes hwDotPing {
    0% { transform: scale(0.7); opacity: 0.7; }
    70% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ── Step ── */
.hw-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* Soft connector bridging the rail node and its card */
.hw-step::after {
    content: "";
    position: absolute;
    top: var(--hw-node-size);
    left: 50%;
    width: 1px;
    height: 1.6rem;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.75), rgba(20, 184, 166, 0));
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.hw-step.is-active::after,
.hw-step:hover::after {
    opacity: 0.9;
}

.hw-node {
    position: relative;
    width: var(--hw-node-size);
    height: var(--hw-node-size);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hw-node-bg);
    color: var(--hw-node-text);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    font-family: var(--rooha-font);
    box-shadow: 0 10px 24px -10px rgba(13, 130, 117, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    z-index: 3;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.hw-step:hover .hw-node,
.hw-step.is-active .hw-node {
    transform: scale(1.1);
    box-shadow: 0 14px 30px -10px rgba(6, 182, 212, 0.85), 0 0 24px var(--hw-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.hw-node-pulse {
    position: absolute;
    inset: -7px;
    border-radius: 9999px;
    border: 1.5px solid rgba(20, 184, 166, 0.5);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Completed steps swap the number for a soft check mark */
.hw-step.is-passed .hw-node-num {
    opacity: 0;
}

.hw-step.is-passed .hw-node::after {
    content: "\f00c";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.95rem;
    color: var(--hw-node-text);
    animation: hwCheckIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hwCheckIn {
    from { transform: scale(0.4); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.hw-step.is-active .hw-node-pulse {
    opacity: 1;
    transform: scale(1);
    animation: hwNodePulse 3s ease-out infinite;
}

@keyframes hwNodePulse {
    0% { transform: scale(0.9); opacity: 0.75; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* ── Card ── */
.hw-card {
    position: relative;
    margin-top: 1.6rem;
    width: 100%;
    padding: 1.6rem 1.35rem 1.9rem;
    border-radius: 30px;
    background: var(--hw-card-bg);
    border: 1px solid var(--hw-card-border);
    box-shadow: var(--hw-card-shadow);
    text-align: center;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.5s ease;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.hw-card::after {
    content: "";
    position: absolute;
    inset-inline: 12%;
    bottom: 0;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, var(--hw-accent), transparent);
    opacity: 0;
    transition: opacity 0.45s ease, box-shadow 0.45s ease;
}

.hw-card:hover,
.hw-step.is-active .hw-card {
    transform: translateY(-8px);
    border-color: rgba(20, 184, 166, 0.55);
    box-shadow: 0 30px 62px -24px rgba(6, 182, 212, 0.5);
}

.hw-step.is-active .hw-card::after {
    opacity: 1;
    box-shadow: 0 0 14px var(--hw-glow);
}

.hw-card-shine {
    position: absolute;
    top: -40%;
    inset-inline-start: -45%;
    width: 45%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transform: translateX(-140%) rotate(16deg);
    opacity: 0;
    pointer-events: none;
}

.hw-step.is-active .hw-card-shine {
    animation: hwShine 4.2s ease-in-out infinite;
}

@keyframes hwShine {
    0% { transform: translateX(-140%) rotate(16deg); opacity: 0; }
    22% { opacity: 1; }
    60% { transform: translateX(340%) rotate(16deg); opacity: 0; }
    100% { transform: translateX(340%) rotate(16deg); opacity: 0; }
}

[dir="rtl"] .hw-card-shine {
    transform: translateX(140%) rotate(-16deg);
}

[dir="rtl"] .hw-step.is-active .hw-card-shine {
    animation-name: hwShineRtl;
}

@keyframes hwShineRtl {
    0% { transform: translateX(140%) rotate(-16deg); opacity: 0; }
    22% { opacity: 1; }
    60% { transform: translateX(-340%) rotate(-16deg); opacity: 0; }
    100% { transform: translateX(-340%) rotate(-16deg); opacity: 0; }
}

/* ── Device Mockup ── */
.hw-visual {
    position: relative;
    width: 100%;
    max-width: 215px;
    margin: 0 auto;
    transform: translate3d(var(--hw-parallax-x), var(--hw-parallax-y), 0);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hw-visual-halo {
    position: absolute;
    inset: -14% -20%;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(20, 184, 166, 0.28) 0%, rgba(6, 182, 212, 0.12) 46%, transparent 70%);
    filter: blur(16px);
    opacity: 0.65;
    animation: hwHalo 6.5s ease-in-out infinite;
    transition: opacity 0.5s ease;
}

.hw-step.is-active .hw-visual-halo,
.hw-card:hover .hw-visual-halo {
    opacity: 1;
}

@keyframes hwHalo {
    0%, 100% { transform: scale(0.94); opacity: 0.55; }
    50% { transform: scale(1.08); opacity: 0.95; }
}

.hw-device {
    position: relative;
    padding: 8px;
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(32, 52, 48, 0.95), rgba(7, 15, 14, 0.97));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 26px 56px -26px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    animation: hwFloat 7s ease-in-out infinite;
    animation-delay: var(--hw-delay, 0s);
}

html.light .hw-device {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(226, 240, 236, 0.98));
    border-color: rgba(19, 154, 140, 0.25);
    box-shadow: 0 22px 46px -24px rgba(15, 23, 42, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@keyframes hwFloat {
    0%, 100% { transform: translateY(0) rotate(-0.6deg); }
    50% { transform: translateY(-12px) rotate(0.6deg); }
}

.hw-device-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
    height: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.22);
    z-index: 2;
}

html.light .hw-device-notch {
    background: rgba(15, 23, 42, 0.16);
}

.hw-device-screen {
    position: relative;
    border-radius: 21px;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    background: linear-gradient(160deg, #0e1d1a, #050d0c);
    display: flex;
    align-items: center;
    justify-content: center;
}

html.light .hw-device-screen {
    background: linear-gradient(160deg, #f2faf8, #dcefe9);
}

.hw-device-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hw-step.is-active .hw-device-img,
.hw-card:hover .hw-device-img {
    transform: scale(1.07);
}

.hw-device-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    color: rgba(20, 184, 166, 0.8);
    background: linear-gradient(160deg, #0e1d1a, #050d0c);
    opacity: 0;
    transition: opacity 0.4s ease;
}

html.light .hw-device-fallback {
    background: linear-gradient(160deg, #f2faf8, #dcefe9);
}

.hw-device-fallback.is-visible {
    opacity: 1;
}

.hw-device-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.14) 47%, transparent 60%);
    opacity: 0.6;
}

/* ── Card Text ── */
.hw-card-body {
    margin-top: 1.35rem;
}

.hw-card-eyebrow {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hw-accent);
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.22);
    font-family: var(--rooha-font);
}

.hw-card-title {
    margin-top: 0.9rem;
    font-size: clamp(1.05rem, 1.6vw, 1.22rem);
    font-weight: 800;
    line-height: 1.55;
    color: var(--hw-title);
}

/* ── Closing CTA ── */
.hw-cta {
    display: flex;
    justify-content: center;
    margin-top: 3.25rem;
}

.hw-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.9rem;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 0.98rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--hw-accent-deep), var(--hw-accent-2));
    box-shadow: 0 18px 40px -16px rgba(6, 182, 212, 0.65);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.hw-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 52px -18px rgba(6, 182, 212, 0.8);
}

.hw-cta-arrow {
    font-size: 0.8rem;
    transition: transform 0.35s ease;
}

.hw-cta-btn:hover .hw-cta-arrow {
    transform: translateX(5px);
}

[dir="rtl"] .hw-cta-btn:hover .hw-cta-arrow {
    transform: translateX(-5px);
}

/* ── Responsive: vertical rail on small screens ── */
@media (max-width: 899px) {
    .hw-steps {
        grid-template-columns: 1fr;
        gap: 2.75rem;
        padding-inline-start: 0;
    }

    .hw-rail {
        top: 0;
        bottom: 0;
        inset-inline: auto;
        inset-inline-start: calc(var(--hw-node-size) / 2 - 1px);
        width: 2px;
        height: auto;
    }

    .hw-rail-line {
        inset-inline: 0;
        width: auto;
        height: 100%;
    }

    .hw-rail-fill {
        inset-inline: 0;
        top: 0;
        bottom: auto;
        width: auto;
        height: calc(var(--hw-progress) * 100%);
        background: linear-gradient(180deg, var(--hw-accent-deep), var(--hw-accent) 55%, var(--hw-accent-2));
    }

    .hw-rail-dot {
        top: calc(var(--hw-progress) * 100%);
        inset-inline-start: 50%;
        transform: translate(-50%, -50%);
    }

    .hw-step {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.25rem;
        text-align: start;
    }

    .hw-step::after {
        display: none;
    }

    .hw-node {
        flex: 0 0 auto;
    }

    .hw-card {
        margin-top: 0;
        text-align: start;
        padding: 1.25rem 1.25rem 1.5rem;
    }

    .hw-visual {
        max-width: 150px;
    }

    .hw-cta {
        margin-top: 2.5rem;
    }
}

@media (max-width: 480px) {
    .hw-subtitle {
        font-size: 0.95rem;
        line-height: 1.85;
    }

    .hw-step {
        gap: 0.9rem;
    }

    .hw-card {
        padding: 1.1rem 1rem 1.35rem;
    }

    .hw-visual {
        max-width: 124px;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .hw-ambient,
    .hw-visual-halo,
    .hw-device,
    .hw-node-pulse,
    .hw-rail-dot::after,
    .hw-card-shine {
        animation: none !important;
    }

    .hw-rail-fill,
    .hw-rail-dot,
    .hw-card,
    .hw-node {
        transition: none !important;
    }
}

/* ==========================================================================
   FAQs — Category Console (الأسئلة الشائعة — وحدة التصنيفات)
   ========================================================================== */
.faq-section {
    --faq-accent: #06b6d4;
    --faq-accent-2: #14b8a6;
    --faq-accent-deep: #139a8c;
    --faq-glow: rgba(6, 182, 212, 0.45);
    --faq-card-bg: linear-gradient(165deg, rgba(24, 42, 38, 0.92) 0%, rgba(10, 20, 18, 0.95) 100%);
    --faq-card-border: rgba(20, 184, 166, 0.2);
    --faq-card-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
    --faq-title: #ffffff;
    --faq-muted: #93aca6;
    --faq-soft: rgba(255, 255, 255, 0.045);
    --faq-cat-active-bg: linear-gradient(135deg, rgba(19, 154, 140, 0.26) 0%, rgba(6, 182, 212, 0.12) 100%);
    --faq-answer: #c7d8d4;

    overflow-x: clip;
}

html.light .faq-section,
[data-theme="light"] .faq-section {
    --faq-accent: #0d9488;
    --faq-accent-2: #14b8a6;
    --faq-accent-deep: #0f766e;
    --faq-glow: rgba(13, 148, 136, 0.35);
    --faq-card-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(237, 247, 244, 0.97) 100%);
    --faq-card-border: rgba(19, 154, 140, 0.2);
    --faq-card-shadow: 0 16px 34px -24px rgba(15, 23, 42, 0.35);
    --faq-title: #0e1e1b;
    --faq-muted: #53756d;
    --faq-soft: rgba(15, 23, 42, 0.04);
    --faq-cat-active-bg: linear-gradient(135deg, rgba(19, 154, 140, 0.16) 0%, rgba(6, 182, 212, 0.08) 100%);
    --faq-answer: #3b5a54;
}

html.light .faq-answer,
html.light .faq-a-content p {
    color: var(--faq-answer);
}

/* ── Ambient Atmosphere ── */
.faq-ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

.faq-ambient--one {
    top: 8%;
    inset-inline-end: -8%;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(19, 154, 140, 0.18) 0%, transparent 68%);
    animation: faqDrift 16s ease-in-out infinite;
}

.faq-ambient--two {
    bottom: 2%;
    inset-inline-start: -10%;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, transparent 68%);
    animation: faqDrift 20s ease-in-out infinite reverse;
}

@keyframes faqDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-36px, -30px, 0) scale(1.07); }
}

.faq-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 76px 76px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
}

html.light .faq-grid-lines {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

/* ── Section Heading ── */
.faq-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
}

.faq-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.faq-kicker-line {
    display: inline-block;
    width: 2.5rem;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, var(--faq-accent));
    opacity: 0.85;
}

.faq-kicker-line:last-child {
    background: linear-gradient(90deg, var(--faq-accent), transparent);
}

.faq-kicker-text {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--faq-accent);
    font-family: var(--rooha-font);
}

.faq-heading {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
    font-family: var(--rooha-font);
}

.faq-subtitle {
    margin-top: 1rem;
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--faq-muted);
    max-width: 720px;
}

/* ── Shell Layout ── */
.faq-shell {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.faq-side {
    position: sticky;
    top: 6.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Search ── */
.faq-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.95rem;
    border-radius: 18px;
    background: var(--faq-soft);
    border: 1px solid var(--faq-card-border);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.faq-search:focus-within {
    border-color: rgba(20, 184, 166, 0.55);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.10);
}

.faq-search-icon {
    color: var(--faq-accent-2);
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.faq-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--faq-title);
    font-size: 0.9rem;
    font-family: var(--rooha-font);
    font-weight: 600;
}

.faq-search-input::placeholder {
    color: var(--faq-muted);
    opacity: 0.8;
}

.faq-search-input::-webkit-search-cancel-button {
    display: none;
}

.faq-search-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    background: var(--faq-soft);
    color: var(--faq-muted);
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.25s ease;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7);
}

.faq-search:focus-within .faq-search-clear,
.faq-shell.has-value .faq-search-clear {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.faq-search-clear:hover {
    background: var(--faq-accent);
    color: #ffffff;
}

/* ── Category Rail ── */
.faq-cats {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.3rem;
}

.faq-cat {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 18px;
    border: 1px solid transparent;
    background: transparent;
    text-align: start;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-color 0.35s ease;
}

.faq-cat:hover {
    background: var(--faq-soft);
    transform: translateX(3px);
}

[dir="rtl"] .faq-cat:hover {
    transform: translateX(-3px);
}

.faq-cat.is-active {
    background: var(--faq-cat-active-bg);
    border-color: rgba(20, 184, 166, 0.35);
}

.faq-cat:focus-visible {
    outline: 2px solid var(--faq-accent);
    outline-offset: 2px;
}

.faq-cat-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--faq-soft);
    color: var(--faq-accent-2);
    font-size: 0.95rem;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-cat.is-active .faq-cat-icon {
    background: linear-gradient(135deg, #14b8a6, #0d8275);
    color: #ffffff;
    transform: scale(1.06) rotate(-4deg);
    box-shadow: 0 10px 22px -10px rgba(13, 130, 117, 0.95);
}

html.light .faq-cat.is-active .faq-cat-icon {
    background: linear-gradient(135deg, #14b8a6, #0f766e);
}

.faq-cat-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.faq-cat-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--faq-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.faq-cat-meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--faq-muted);
}

.faq-cat-count {
    flex: 0 0 auto;
    min-width: 26px;
    height: 24px;
    padding: 0 0.45rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--faq-muted);
    background: var(--faq-soft);
    border: 1px solid var(--faq-card-border);
    transition: all 0.35s ease;
}

.faq-cat.is-active .faq-cat-count {
    color: #ffffff;
    background: linear-gradient(135deg, var(--faq-accent-deep), var(--faq-accent-2));
    border-color: transparent;
    box-shadow: 0 6px 16px -8px rgba(6, 182, 212, 0.9);
}

/* Sliding active indicator (positioned in physical pixels by JS) */
.faq-cat-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 18px;
    background: var(--faq-cat-active-bg);
    border: 1px solid rgba(20, 184, 166, 0.3);
    box-shadow: 0 14px 34px -20px rgba(6, 182, 212, 0.85);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
}

/* ── Support card ── */
.faq-support {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 22px;
    background: var(--faq-cat-active-bg);
    border: 1px solid rgba(20, 184, 166, 0.25);
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.4s ease;
}

.faq-support:hover {
    transform: translateY(-4px);
    border-color: rgba(20, 184, 166, 0.55);
    box-shadow: 0 22px 44px -24px rgba(6, 182, 212, 0.7);
}

.faq-support-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #14b8a6, #0d8275);
    color: #ffffff;
    font-size: 0.9rem;
    box-shadow: 0 10px 22px -12px rgba(13, 130, 117, 0.95);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-support:hover .faq-support-icon {
    transform: scale(1.08) rotate(6deg);
}

.faq-support-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.faq-support-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--faq-title);
}

.faq-support-text {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--faq-accent-2);
}

.faq-support-arrow {
    font-size: 0.75rem;
    color: var(--faq-muted);
    transition: transform 0.35s ease, color 0.35s ease;
}

.faq-support:hover .faq-support-arrow {
    transform: translateX(4px);
    color: var(--faq-accent-2);
}

[dir="rtl"] .faq-support:hover .faq-support-arrow {
    transform: translateX(-4px);
}

/* ── Panels ── */
.faq-panels {
    position: relative;
    min-height: 240px;
}

.faq-panel {
    display: none;
}

.faq-panel.is-active {
    display: block;
    animation: faqPanelIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* While searching, every category that still has matches is revealed */
.faq-shell.is-searching .faq-panel:not(.is-empty) {
    display: block;
    animation: faqPanelIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes faqPanelIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq-panel.is-empty {
    display: none !important;
}

.faq-panel-head {
    display: none;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

/* The category tag is only meaningful while searching across categories */
.faq-shell.is-searching .faq-panel-head {
    display: flex;
}

.faq-panel-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--faq-accent);
    background: var(--faq-soft);
    border: 1px solid var(--faq-card-border);
}

.faq-panel-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--faq-card-border), transparent);
}

/* ── Accordion Item ── */
.faq-item {
    position: relative;
    margin-bottom: 0.85rem;
    border-radius: 24px;
    background: var(--faq-card-bg);
    border: 1px solid var(--faq-card-border);
    box-shadow: var(--faq-card-shadow);
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.faq-item:hover {
    border-color: rgba(20, 184, 166, 0.42);
    transform: translateY(-3px);
}

.faq-item.is-open {
    border-color: rgba(20, 184, 166, 0.55);
    box-shadow: 0 26px 54px -28px rgba(6, 182, 212, 0.65);
}

.faq-item.is-hidden {
    display: none;
}

.faq-panel.is-active .faq-item,
.faq-shell.is-searching .faq-item {
    animation: faqItemIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.faq-panel.is-active .faq-item:nth-child(1),
.faq-shell.is-searching .faq-panel .faq-item:nth-child(1) { animation-delay: 0.04s; }
.faq-panel.is-active .faq-item:nth-child(2),
.faq-shell.is-searching .faq-panel .faq-item:nth-child(2) { animation-delay: 0.11s; }
.faq-panel.is-active .faq-item:nth-child(3),
.faq-shell.is-searching .faq-panel .faq-item:nth-child(3) { animation-delay: 0.18s; }
.faq-panel.is-active .faq-item:nth-child(4),
.faq-shell.is-searching .faq-panel .faq-item:nth-child(4) { animation-delay: 0.25s; }
.faq-panel.is-active .faq-item:nth-child(5),
.faq-shell.is-searching .faq-panel .faq-item:nth-child(5) { animation-delay: 0.32s; }
.faq-panel.is-active .faq-item:nth-child(6),
.faq-shell.is-searching .faq-panel .faq-item:nth-child(6) { animation-delay: 0.39s; }

@keyframes faqItemIn {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.faq-q {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.4rem;
    background: transparent;
    border: 0;
    text-align: start;
    cursor: pointer;
    font-family: var(--rooha-font);
}

.faq-q:focus-visible {
    outline: 2px solid var(--faq-accent);
    outline-offset: -3px;
    border-radius: 24px;
}

.faq-q-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--faq-soft);
    color: var(--faq-accent-2);
    font-size: 0.85rem;
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.is-open .faq-q-mark {
    background: linear-gradient(135deg, #14b8a6, #0d8275);
    color: #ffffff;
    transform: rotate(-8deg) scale(1.08);
    box-shadow: 0 12px 24px -12px rgba(13, 130, 117, 0.95);
}

html.light .faq-item.is-open .faq-q-mark {
    background: linear-gradient(135deg, #14b8a6, #0f766e);
}

.faq-q-text {
    flex: 1;
    min-width: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--faq-title);
    transition: color 0.3s ease;
}

.faq-item.is-open .faq-q-text {
    color: var(--faq-accent-2);
}

html.light .faq-item.is-open .faq-q-text {
    color: var(--faq-accent-deep);
}

.faq-q-toggle {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--faq-soft);
    border: 1px solid var(--faq-card-border);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.is-open .faq-q-toggle {
    background: var(--faq-accent);
    border-color: transparent;
    transform: rotate(180deg);
    box-shadow: 0 10px 22px -12px rgba(6, 182, 212, 0.95);
}

.faq-q-bar {
    position: absolute;
    width: 13px;
    height: 2px;
    border-radius: 2px;
    background: var(--faq-muted);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.faq-q-bar--v {
    transform: rotate(90deg);
}

.faq-item.is-open .faq-q-bar {
    background: #ffffff;
}

.faq-item.is-open .faq-q-bar--v {
    transform: rotate(90deg) scaleX(0);
}

/* ── Answer ── */
.faq-a {
    height: 0;
    overflow: hidden;
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-a-inner {
    overflow: hidden;
}

.faq-a-content {
    display: flex;
    gap: 1rem;
    padding: 0 1.4rem 1.35rem 1.4rem;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.is-open .faq-a-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.faq-a-line {
    width: 2px;
    flex: 0 0 auto;
    border-radius: 9999px;
    background: linear-gradient(180deg, var(--faq-accent), transparent);
    margin-top: 0.2rem;
}

.faq-a-content p {
    font-size: 0.92rem;
    line-height: 1.95;
    color: var(--faq-answer);
    margin: 0;
}

/* ── Empty / No results ── */
.faq-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    border-radius: 22px;
    background: var(--faq-soft);
    border: 1px dashed var(--faq-card-border);
    color: var(--faq-muted);
    font-size: 0.92rem;
}

.faq-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 3rem 1.5rem;
    text-align: center;
    border-radius: 26px;
    background: var(--faq-soft);
    border: 1px dashed var(--faq-card-border);
}

.faq-no-results[hidden] {
    display: none;
}

.faq-no-results-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: var(--faq-cat-active-bg);
    color: var(--faq-accent);
    font-size: 1.15rem;
    animation: faqPulse 2.8s ease-in-out infinite;
}

@keyframes faqPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.28); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(20, 184, 166, 0); }
}

.faq-no-results-text {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--faq-title);
    margin: 0;
}

.faq-no-results-btn {
    padding: 0.7rem 1.4rem;
    border-radius: 9999px;
    border: 1px solid rgba(20, 184, 166, 0.4);
    background: var(--faq-cat-active-bg);
    color: var(--faq-accent);
    font-family: var(--rooha-font);
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-no-results-btn:hover {
    background: var(--faq-accent);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .faq-shell {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .faq-side {
        position: static;
    }

    .faq-cats {
        flex-direction: row;
        overflow-x: auto;
        padding: 0.35rem 0.15rem 0.75rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
    }

    .faq-cats::-webkit-scrollbar {
        display: none;
    }

    .faq-cat {
        flex: 0 0 auto;
        width: auto;
        scroll-snap-align: start;
        padding: 0.65rem 0.9rem;
        background: var(--faq-soft);
        border-color: var(--faq-card-border);
    }

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

    .faq-cat-body {
        flex-direction: row;
        align-items: baseline;
        gap: 0.45rem;
    }

    .faq-cat-meta {
        display: none;
    }

    .faq-cat-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 0.85rem;
    }

    /* The sliding indicator is desktop-only (the rail scrolls horizontally here) */
    .faq-cat-indicator {
        display: none;
    }

    .faq-support {
        display: none;
    }
}

@media (max-width: 639px) {
    .faq-subtitle {
        font-size: 0.95rem;
        line-height: 1.85;
    }

    .faq-q {
        gap: 0.75rem;
        padding: 1rem 1.1rem;
    }

    .faq-q-text {
        font-size: 0.92rem;
    }

    .faq-q-mark {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 0.75rem;
    }

    .faq-q-toggle {
        width: 30px;
        height: 30px;
    }

    .faq-a-content {
        padding: 0 1.1rem 1.15rem 1.1rem;
        gap: 0.75rem;
    }

    .faq-a-content p {
        font-size: 0.88rem;
        line-height: 1.85;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .faq-ambient,
    .faq-no-results-icon,
    .faq-panel.is-active,
    .faq-panel.is-active .faq-item {
        animation: none !important;
    }

    .faq-a,
    .faq-a-content,
    .faq-cat,
    .faq-cat-indicator,
    .faq-item,
    .faq-q-mark,
    .faq-q-toggle,
    .faq-q-bar {
        transition: none !important;
    }
}

/* ==========================================================================
   Contact Us — Command Center (تواصل معنا — مركز التواصل)
   ========================================================================== */
.ct-section {
    --ct-accent: #06b6d4;
    --ct-accent-2: #14b8a6;
    --ct-accent-deep: #139a8c;
    --ct-glow: rgba(6, 182, 212, 0.45);
    --ct-card-bg: linear-gradient(165deg, rgba(24, 42, 38, 0.92) 0%, rgba(10, 20, 18, 0.95) 100%);
    --ct-card-border: rgba(20, 184, 166, 0.2);
    --ct-card-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.75);
    --ct-title: #ffffff;
    --ct-muted: #93aca6;
    --ct-soft: rgba(255, 255, 255, 0.045);
    --ct-input-bg: rgba(255, 255, 255, 0.035);
    --ct-amber: #f59e0b;
    --ct-rose: #f43f5e;

    overflow-x: clip;
}

html.light .ct-section,
[data-theme="light"] .ct-section {
    --ct-accent: #0d9488;
    --ct-accent-2: #14b8a6;
    --ct-accent-deep: #0f766e;
    --ct-glow: rgba(13, 148, 136, 0.35);
    --ct-card-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(237, 247, 244, 0.97) 100%);
    --ct-card-border: rgba(19, 154, 140, 0.2);
    --ct-card-shadow: 0 20px 44px -28px rgba(15, 23, 42, 0.4);
    --ct-title: #0e1e1b;
    --ct-muted: #53756d;
    --ct-soft: rgba(15, 23, 42, 0.04);
    --ct-input-bg: rgba(15, 23, 42, 0.035);
}

/* ── Ambient Atmosphere ── */
.ct-ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}

.ct-ambient--one {
    top: 10%;
    inset-inline-start: -8%;
    width: 34rem;
    height: 34rem;
    background: radial-gradient(circle, rgba(19, 154, 140, 0.18) 0%, transparent 68%);
    animation: ctDrift 17s ease-in-out infinite;
}

.ct-ambient--two {
    bottom: 0;
    inset-inline-end: -10%;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 68%);
    animation: ctDrift 21s ease-in-out infinite reverse;
}

@keyframes ctDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(42px, -32px, 0) scale(1.07); }
}

.ct-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 78px 78px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 78%);
}

html.light .ct-grid-lines {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

/* Pulsing "signal" rings behind the channels column */
.ct-signal {
    position: absolute;
    inset-inline-start: 4%;
    bottom: 8%;
    width: 26rem;
    height: 26rem;
    pointer-events: none;
    z-index: 0;
    display: grid;
    place-items: center;
}

.ct-signal-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(20, 184, 166, 0.35);
    animation: ctSignal 4.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.ct-signal-ring--1 { width: 30%; height: 30%; animation-delay: 0s; }
.ct-signal-ring--2 { width: 58%; height: 58%; animation-delay: 0.6s; }
.ct-signal-ring--3 { width: 88%; height: 88%; animation-delay: 1.2s; }

@keyframes ctSignal {
    0% { transform: scale(0.85); opacity: 0; }
    25% { opacity: 0.65; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* ── Section Heading ── */
.ct-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
}

.ct-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.ct-kicker-line {
    display: inline-block;
    width: 2.5rem;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, var(--ct-accent));
    opacity: 0.85;
}

.ct-kicker-line:last-child {
    background: linear-gradient(90deg, var(--ct-accent), transparent);
}

.ct-kicker-text {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--ct-accent);
    font-family: var(--rooha-font);
}

.ct-heading {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
    font-family: var(--rooha-font);
}

.ct-subtitle {
    margin-top: 1rem;
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--ct-muted);
    max-width: 700px;
}

/* ── Layout ── */
.ct-layout {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.ct-channels {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* ── Channel Card ── */
.ct-channel {
    --ct-tilt-x: 0deg;
    --ct-tilt-y: 0deg;
    --ct-glow-x: 50%;
    --ct-glow-y: 0%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border-radius: 24px;
    background: var(--ct-card-bg);
    border: 1px solid var(--ct-card-border);
    box-shadow: var(--ct-card-shadow);
    overflow: hidden;
    transform: perspective(900px) rotateX(var(--ct-tilt-x)) rotateY(var(--ct-tilt-y));
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.ct-channel:hover {
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: 0 26px 54px -26px rgba(6, 182, 212, 0.55);
}

/* Cursor-following glow */
.ct-channel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(260px circle at var(--ct-glow-x) var(--ct-glow-y), rgba(20, 184, 166, 0.16), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.ct-channel:hover::after {
    opacity: 1;
}

.ct-channel-shine {
    position: absolute;
    top: -60%;
    inset-inline-start: -35%;
    width: 35%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    transform: translateX(-160%) rotate(18deg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.ct-channel:hover .ct-channel-shine {
    animation: ctShine 1.1s ease-out forwards;
}

@keyframes ctShine {
    0% { transform: translateX(-160%) rotate(18deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(420%) rotate(18deg); opacity: 0; }
}

.ct-channel-icon {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    color: #ffffff;
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.9);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.ct-channel-icon--teal { background: linear-gradient(135deg, #139a8c, #0d8275); }
.ct-channel-icon--cyan { background: linear-gradient(135deg, #22d3ee, #0d9488); }
.ct-channel-icon--amber { background: linear-gradient(135deg, #fbbf24, #d97706); }

.ct-channel:hover .ct-channel-icon {
    transform: scale(1.08) rotate(-7deg);
    box-shadow: 0 16px 32px -14px rgba(6, 182, 212, 0.75);
}

.ct-channel-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.ct-channel-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ct-muted);
}

.ct-channel-value {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ct-title);
    text-decoration: none;
    transition: color 0.3s ease;
    overflow-wrap: anywhere;
}

a.ct-channel-value:hover {
    color: var(--ct-accent-2);
}

.ct-channel-value--text {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.6;
}

.ct-copy {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 13px;
    border: 1px solid var(--ct-card-border);
    background: var(--ct-soft);
    color: var(--ct-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ct-copy:hover {
    color: #ffffff;
    background: var(--ct-accent);
    border-color: transparent;
    transform: scale(1.08);
    box-shadow: 0 10px 22px -12px rgba(6, 182, 212, 0.95);
}

.ct-copy.is-copied {
    color: #ffffff;
    background: #10b981;
    border-color: transparent;
}

.ct-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline-end: 0;
    padding: 0.35rem 0.6rem;
    border-radius: 9px;
    background: rgba(9, 19, 17, 0.95);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: all 0.3s ease;
}

.ct-copy.is-copied .ct-tooltip {
    opacity: 1;
    transform: translateY(0);
}

html.light .ct-tooltip {
    background: rgba(14, 30, 27, 0.95);
}

/* ── Socials ── */
.ct-socials {
    padding: 0.9rem 1.1rem;
    border-radius: 22px;
    background: var(--ct-soft);
    border: 1px solid var(--ct-card-border);
}

.ct-socials-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ct-muted);
    margin-bottom: 0.7rem;
}

.ct-socials-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ct-social {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--ct-card-bg);
    border: 1px solid var(--ct-card-border);
    color: var(--ct-muted);
    font-size: 0.9rem;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ct-social:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ct-accent-deep), var(--ct-accent-2));
    border-color: transparent;
    transform: translateY(-4px) rotate(-6deg);
    box-shadow: 0 14px 28px -14px rgba(6, 182, 212, 0.9);
}

/* ── WhatsApp CTA ── */
.ct-whatsapp {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    border-radius: 24px;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(20, 184, 166, 0.12));
    border: 1px solid rgba(37, 211, 102, 0.32);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.ct-whatsapp:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 211, 102, 0.6);
    box-shadow: 0 22px 44px -22px rgba(37, 211, 102, 0.6);
}

.ct-whatsapp-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #ffffff;
    font-size: 1.15rem;
    box-shadow: 0 12px 26px -14px rgba(37, 211, 102, 0.95);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ct-whatsapp:hover .ct-whatsapp-icon {
    transform: scale(1.08) rotate(6deg);
}

.ct-whatsapp-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
    min-width: 0;
}

.ct-whatsapp-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--ct-title);
}

.ct-whatsapp-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: #25d366;
}

.ct-whatsapp-arrow {
    font-size: 0.78rem;
    color: var(--ct-muted);
    transition: transform 0.35s ease;
}

.ct-whatsapp:hover .ct-whatsapp-arrow {
    transform: translateX(5px);
    color: #25d366;
}

[dir="rtl"] .ct-whatsapp:hover .ct-whatsapp-arrow {
    transform: translateX(-5px);
}

/* ── Form Card ── */
.ct-form-card {
    position: relative;
    padding: 1.75rem 1.5rem 2rem;
    border-radius: 32px;
    background: var(--ct-card-bg);
    border: 1px solid var(--ct-card-border);
    box-shadow: var(--ct-card-shadow);
    overflow: hidden;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.ct-form-glow {
    position: absolute;
    top: -30%;
    inset-inline-end: -12%;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.18) 0%, transparent 68%);
    filter: blur(40px);
    pointer-events: none;
    animation: ctGlow 9s ease-in-out infinite;
}

@keyframes ctGlow {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
}

.ct-form-shine {
    position: absolute;
    top: -50%;
    inset-inline-start: -30%;
    width: 30%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transform: translateX(-150%) rotate(16deg);
    pointer-events: none;
}

.ct-form-card:hover .ct-form-shine {
    animation: ctShine 1.6s ease-out forwards;
}

.ct-form-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.ct-form-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ct-title);
    margin: 0 0 0.35rem;
}

.ct-form-text {
    font-size: 0.82rem;
    color: var(--ct-muted);
    margin: 0;
}

.ct-online {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.4rem 0.8rem;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #10b981;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.ct-online-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    flex: 0 0 auto;
}

.ct-online-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #10b981;
    animation: ctPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ctPing {
    0% { transform: scale(1); opacity: 0.8; }
    75%, 100% { transform: scale(3); opacity: 0; }
}

/* ── Fields ── */
.ct-grid-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ct-field {
    position: relative;
    margin-bottom: 1rem;
}

.ct-control {
    position: relative;
}

.ct-input {
    width: 100%;
    padding-block: 1.55rem 0.7rem;
    padding-inline: 3.1rem 1.15rem;
    border-radius: 18px;
    background: var(--ct-input-bg);
    border: 1px solid var(--ct-card-border);
    color: var(--ct-title);
    font-family: var(--rooha-font);
    font-size: 0.92rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}

.ct-input::placeholder {
    color: transparent;
}

.ct-input:hover {
    border-color: rgba(20, 184, 166, 0.4);
}

.ct-input:focus {
    border-color: rgba(20, 184, 166, 0.65);
    background: rgba(20, 184, 166, 0.06);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.1);
}

.ct-input--ltr {
    text-align: start;
}

.ct-textarea {
    min-height: 132px;
    padding-block-end: 2.9rem;
    resize: none;
    line-height: 1.85;
}

.ct-label {
    position: absolute;
    inset-inline-start: 3.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ct-muted);
    pointer-events: none;
    transform-origin: left center;
    transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                font-size 0.32s ease, color 0.32s ease;
}

[dir="rtl"] .ct-label {
    transform-origin: right center;
}

.ct-input:focus ~ .ct-label,
.ct-input:not(:placeholder-shown) ~ .ct-label {
    top: 1rem;
    transform: translateY(0);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ct-accent);
}

.ct-req {
    color: var(--ct-rose);
}

.ct-field-icon {
    position: absolute;
    inset-inline-start: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: var(--ct-muted);
    pointer-events: none;
    transition: color 0.32s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.ct-field:focus-within .ct-field-icon {
    color: var(--ct-accent);
    transform: translateY(-58%) scale(1.08);
}

.ct-field--area .ct-field-icon {
    top: 1.55rem;
    transform: none;
}

.ct-field--area:focus-within .ct-field-icon {
    transform: scale(1.08);
}

.ct-field-line {
    position: absolute;
    inset-inline: 1.2rem;
    bottom: 0;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--ct-accent-deep), var(--ct-accent), var(--ct-accent-2));
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.ct-field:focus-within .ct-field-line {
    transform: scaleX(1);
}

/* ── Character counter ── */
.ct-counter {
    position: absolute;
    inset-inline-end: 1rem;
    bottom: 1rem;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.ct-counter-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ct-counter-track {
    fill: none;
    stroke: var(--ct-card-border);
    stroke-width: 2.4;
}

.ct-counter-fill {
    fill: none;
    stroke: var(--ct-accent);
    stroke-width: 2.4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.35s cubic-bezier(0.22, 1, 0.36, 1), stroke 0.35s ease;
}

.ct-counter.is-warning .ct-counter-fill {
    stroke: var(--ct-amber);
}

.ct-counter.is-danger .ct-counter-fill {
    stroke: var(--ct-rose);
}

.ct-counter-num {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ct-muted);
}

.ct-counter.is-warning .ct-counter-num {
    color: var(--ct-amber);
}

.ct-counter.is-danger .ct-counter-num {
    color: var(--ct-rose);
}

/* ── Submit ── */
.ct-submit {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.05rem 1.75rem;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--ct-accent-deep), var(--ct-accent-2));
    color: #ffffff;
    font-family: var(--rooha-font);
    font-size: 0.95rem;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 18px 38px -18px rgba(6, 182, 212, 0.75);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, opacity 0.3s ease;
}

.ct-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 52px -20px rgba(6, 182, 212, 0.95);
}

.ct-submit:active {
    transform: translateY(0);
}

.ct-submit:disabled {
    cursor: not-allowed;
    opacity: 0.85;
}

.ct-submit-sheen {
    position: absolute;
    top: -60%;
    inset-inline-start: -30%;
    width: 30%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: translateX(-160%) rotate(18deg);
    pointer-events: none;
}

.ct-submit:hover .ct-submit-sheen {
    animation: ctShine 1s ease-out forwards;
}

.ct-submit-text,
.ct-submit-loader,
.ct-submit-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ct-submit-loader {
    display: none;
}

.ct-submit.is-loading .ct-submit-text,
.ct-submit.is-loading .ct-submit-icon {
    display: none;
}

.ct-submit.is-loading .ct-submit-loader {
    display: inline-flex;
}

.ct-submit-icon {
    font-size: 0.85rem;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ct-submit:hover .ct-submit-icon {
    transform: translateX(4px) rotate(-12deg);
}

[dir="rtl"] .ct-submit:hover .ct-submit-icon {
    transform: translateX(-4px) rotate(12deg);
}

/* ── Success state ── */
.ct-success {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(9, 19, 17, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

html.light .ct-success {
    background: rgba(244, 248, 247, 0.94);
}

.ct-form-card.is-sent .ct-success {
    opacity: 1;
    visibility: visible;
}

.ct-success-mark {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #ffffff;
    font-size: 1.9rem;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    transform: scale(0.4);
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ct-form-card.is-sent .ct-success-mark {
    transform: scale(1);
    animation: ctSuccessPulse 2s ease-out infinite;
}

@keyframes ctSuccessPulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70% { box-shadow: 0 0 0 24px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ct-success-text {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ct-title);
    margin: 0;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.ct-form-card.is-sent .ct-success-text {
    transform: translateY(0);
    opacity: 1;
}

/* ── Parsley states inside the new fields ── */
.ct-field .parsley-errors-list {
    margin-top: 0.4rem;
}

.ct-field.issue .ct-input,
.ct-field .ct-input.parsley-error {
    border-color: rgba(244, 63, 94, 0.7) !important;
    background-color: rgba(244, 63, 94, 0.06) !important;
}

.ct-field .ct-input.parsley-success {
    border-color: rgba(20, 184, 166, 0.55) !important;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .ct-layout {
        grid-template-columns: 1fr;
    }

    .ct-channels {
        order: 2;
    }

    .ct-form-card {
        order: 1;
    }

    .ct-signal {
        display: none;
    }
}

@media (max-width: 639px) {
    .ct-subtitle {
        font-size: 0.95rem;
        line-height: 1.85;
    }

    .ct-form-card {
        padding: 1.4rem 1.1rem 1.6rem;
        border-radius: 26px;
    }

    .ct-form-head {
        flex-direction: column;
        gap: 0.85rem;
    }

    .ct-grid-fields {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ct-channel {
        padding: 0.95rem 1rem;
        gap: 0.85rem;
    }

    .ct-channel-icon {
        width: 46px;
        height: 46px;
        border-radius: 16px;
    }

    .ct-channel-value {
        font-size: 0.92rem;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .ct-ambient,
    .ct-form-glow,
    .ct-signal-ring,
    .ct-online-dot::after,
    .ct-success-mark {
        animation: none !important;
    }

    .ct-channel,
    .ct-channel-icon,
    .ct-copy,
    .ct-social,
    .ct-whatsapp,
    .ct-submit,
    .ct-input,
    .ct-label,
    .ct-field-icon,
    .ct-field-line,
    .ct-counter-fill {
        transition: none !important;
    }
}

/* ==========================================================================
   Hero — Cinematic Slider (السلايدر المتحرك — واجهة الموقع)
   ========================================================================== */
.hero-section {
    --hero-accent: #06b6d4;
    --hero-accent-2: #14b8a6;
    --hero-accent-deep: #139a8c;
    --hero-scrim-strong: rgba(3, 13, 11, 0.94);
    --hero-scrim-mid: rgba(3, 13, 11, 0.72);
    --hero-px: 0px;
    --hero-py: 0px;
    --hero-copy-px: 0px;
    --hero-copy-py: 0px;

    background: #04100e;
    color: #ffffff;
    isolation: isolate;
}

html.light .hero-section {
    --hero-accent: #0d9488;
    --hero-accent-2: #14b8a6;
    --hero-accent-deep: #0f766e;
}

/* ── Stage & Backdrops ── */
.hero-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-backdrop {
    position: absolute;
    inset: -4%;
    opacity: 0;
    background: linear-gradient(135deg, #0d2b26 0%, #06100e 60%, #040c0b 100%);
    transform: translate3d(var(--hero-px), var(--hero-py), 0);
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.hero-backdrop.is-active {
    opacity: 1;
}

.hero-backdrop-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    filter: saturate(1.05) contrast(1.05);
}

.hero-backdrop.is-active .hero-backdrop-img {
    animation: heroKenburns 18s ease-out forwards;
}

@keyframes heroKenburns {
    from { transform: scale(1.04); }
    to { transform: scale(1.16); }
}

/* ── Scrims ── */
.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, var(--hero-scrim-strong) 0%, var(--hero-scrim-mid) 44%, rgba(3, 13, 11, 0.12) 78%),
        linear-gradient(0deg, rgba(3, 13, 11, 0.92) 0%, rgba(3, 13, 11, 0.15) 40%, rgba(3, 13, 11, 0.25) 100%);
}

[dir="rtl"] .hero-scrim {
    background:
        linear-gradient(270deg, var(--hero-scrim-strong) 0%, var(--hero-scrim-mid) 44%, rgba(3, 13, 11, 0.12) 78%),
        linear-gradient(0deg, rgba(3, 13, 11, 0.92) 0%, rgba(3, 13, 11, 0.15) 40%, rgba(3, 13, 11, 0.25) 100%);
}

.hero-scrim-bottom {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 30%;
    background: linear-gradient(0deg, #04100e 0%, rgba(4, 16, 14, 0.55) 55%, transparent 100%);
    pointer-events: none;
}

/* ── Aurora ── */
.hero-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
}

.hero-aurora-blob--1 {
    top: -12%;
    inset-inline-start: 12%;
    width: 34rem;
    height: 34rem;
    background: radial-gradient(circle, rgba(19, 154, 140, 0.55) 0%, transparent 70%);
    animation: heroFloat 16s ease-in-out infinite;
}

.hero-aurora-blob--2 {
    bottom: -18%;
    inset-inline-end: 6%;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.42) 0%, transparent 70%);
    animation: heroFloat 21s ease-in-out infinite reverse;
}

.hero-aurora-blob--3 {
    top: 30%;
    inset-inline-end: 26%;
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18) 0%, transparent 70%);
    animation: heroFloat 26s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(46px, -38px, 0) scale(1.12); }
}

/* ── Grid + Grain ── */
.hero-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 88px 88px;
    -webkit-mask-image: radial-gradient(ellipse 65% 65% at 30% 45%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 65% 65% at 30% 45%, #000 0%, transparent 80%);
}

[dir="rtl"] .hero-grid-lines {
    -webkit-mask-image: radial-gradient(ellipse 65% 65% at 70% 45%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 65% 65% at 70% 45%, #000 0%, transparent 80%);
}

.hero-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Ghost numeral ── */
.hero-ghost-num {
    position: absolute;
    inset-inline-end: 3%;
    bottom: 8%;
    font-size: clamp(8rem, 20vw, 20rem);
    font-weight: 800;
    line-height: 0.78;
    letter-spacing: -0.07em;
    color: rgba(255, 255, 255, 0.04);
    pointer-events: none;
    user-select: none;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-ghost-num.is-bump {
    animation: heroBump 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes heroBump {
    0% { transform: translateY(22px) scale(0.94); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ── Copy ── */
.hero-copy {
    position: relative;
    width: 100%;
}

.hero-copy-inner {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 780px;
    transform: translate3d(var(--hero-copy-px), var(--hero-copy-py), 0);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 0.65s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.65s;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Eyebrow ── */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 1.15rem 0.5rem 0.95rem;
    margin-bottom: 1.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.9);
}

.hero-eyebrow-dot {
    position: relative;
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #2dd4bf;
}

.hero-eyebrow-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #2dd4bf;
    animation: heroPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes heroPing {
    0% { transform: scale(1); opacity: 0.85; }
    75%, 100% { transform: scale(3.2); opacity: 0; }
}

.hero-eyebrow-sep {
    width: 1px;
    height: 15px;
    background: rgba(255, 255, 255, 0.22);
}

.hero-eyebrow-num {
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #5eead4;
}

/* ── Title (masked word reveal) ── */
.hero-title {
    margin: 0;
    font-size: clamp(2.3rem, 5.6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.035em;
    color: #ffffff;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
    text-wrap: balance;
}

.hero-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.16em;
    margin-bottom: -0.16em;
}

.hero-word-inner {
    display: inline-block;
    transform: translateY(118%);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--hero-word-delay, 0s);
}

.hero-slide.is-active .hero-word-inner {
    transform: translateY(0);
}

/* ── Description ── */
.hero-desc {
    margin: 1.5rem 0 0;
    font-size: clamp(1rem, 1.55vw, 1.2rem);
    line-height: 1.95;
    font-weight: 400;
    color: rgba(226, 240, 237, 0.8);
    max-width: 620px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

/* ── Staggered items ── */
.hero-slide [data-hero-item] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.75s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-slide.is-active [data-hero-item] {
    opacity: 1;
    transform: translateY(0);
}

.hero-slide.is-active .hero-eyebrow { transition-delay: 0.05s; }
.hero-slide.is-active .hero-desc { transition-delay: 0.34s; }
.hero-slide.is-active .hero-actions { transition-delay: 0.46s; }

/* ── Buttons ── */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    margin-top: 2.1rem;
}

.hero-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.05rem 1.9rem;
    border-radius: 9999px;
    font-family: var(--rooha-font);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}

.hero-btn--primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--hero-accent-deep) 0%, var(--hero-accent-2) 100%);
    box-shadow: 0 18px 40px -16px rgba(6, 182, 212, 0.8);
}

.hero-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 56px -18px rgba(20, 184, 166, 0.95);
}

.hero-btn--ghost {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.hero-btn--ghost:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.9);
}

.hero-btn-sheen {
    position: absolute;
    top: -60%;
    inset-inline-start: -30%;
    width: 30%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: translateX(-160%) rotate(18deg);
    pointer-events: none;
}

.hero-btn--primary:hover .hero-btn-sheen {
    animation: heroShine 1s ease-out forwards;
}

@keyframes heroShine {
    0% { transform: translateX(-160%) rotate(18deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(430%) rotate(18deg); opacity: 0; }
}

.hero-btn-icon {
    font-size: 0.95rem;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-btn--primary:hover .hero-btn-icon {
    transform: translateY(-2px) rotate(-8deg);
}

.hero-btn-arrow {
    font-size: 0.72rem;
    transition: transform 0.35s ease;
}

.hero-btn--ghost:hover .hero-btn-arrow {
    transform: translateX(5px);
}

[dir="rtl"] .hero-btn--ghost:hover .hero-btn-arrow {
    transform: translateX(-5px);
}

/* ── Controls rail ── */
.hero-rail {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    animation: heroRailIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

@keyframes heroRailIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-rail-meta {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.hero-counter-current {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
}

.hero-counter-current.is-bump {
    animation: heroCounterBump 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes heroCounterBump {
    0% { transform: translateY(-10px) scale(0.9); opacity: 0.2; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.hero-counter-total {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.38);
}

.hero-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.hero-progress-item {
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0.6rem 0;
    cursor: pointer;
}

.hero-progress-item:focus-visible {
    outline: 2px solid var(--hero-accent-2);
    outline-offset: 2px;
    border-radius: 9999px;
}

.hero-progress-track {
    display: block;
    height: 3px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
    transition: height 0.35s ease, background 0.35s ease;
}

.hero-progress-item:hover .hero-progress-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.26);
}

.hero-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--hero-accent-deep), var(--hero-accent-2));
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.6);
}

.hero-progress-item.is-active .hero-progress-fill {
    animation: heroFill 6.5s linear forwards;
}

/* Autoplay pause keeps the progress bar in sync with the timer */
.hero-section.is-paused .hero-progress-item.is-active .hero-progress-fill {
    animation-play-state: paused;
}

@keyframes heroFill {
    from { width: 0%; }
    to { width: 100%; }
}

.hero-arrows {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

.hero-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-arrow:hover {
    background: var(--hero-accent-2);
    border-color: transparent;
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 14px 28px -12px rgba(20, 184, 166, 0.95);
}

.hero-arrow:active {
    transform: scale(0.96);
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .hero-ghost-num {
        inset-inline-end: -2%;
        bottom: 12%;
        opacity: 0.75;
    }
}

@media (max-width: 767px) {
    .hero-scrim,
    [dir="rtl"] .hero-scrim {
        background:
            linear-gradient(0deg, rgba(3, 13, 11, 0.96) 0%, rgba(3, 13, 11, 0.72) 45%, rgba(3, 13, 11, 0.55) 100%);
    }

    .hero-rail {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .hero-progress {
        order: 3;
        width: 100%;
        flex-basis: 100%;
    }

    .hero-arrows {
        margin-inline-start: auto;
    }

    .hero-btn {
        padding: 0.95rem 1.6rem;
        font-size: 0.88rem;
    }

    .hero-desc {
        font-size: 0.95rem;
        line-height: 1.85;
    }

    .hero-ghost-num {
        font-size: 7rem;
        bottom: 16%;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .hero-aurora-blob,
    .hero-backdrop-img,
    .hero-ghost-num,
    .hero-counter-current,
    .hero-rail,
    .hero-btn-sheen {
        animation: none !important;
    }

    .hero-word-inner {
        transform: none !important;
        transition: none !important;
    }

    .hero-progress-item.is-active .hero-progress-fill {
        animation: none !important;
        width: 100%;
    }

    .hero-slide,
    .hero-slide [data-hero-item],
    .hero-backdrop {
        transition: opacity 0.2s ease !important;
    }
}

/* ==========================================================================
   About Us — Product Theatre (من نحن — مسرح المنتج)
   ========================================================================== */
.ab-section {
    --ab-accent: #06b6d4;
    --ab-accent-2: #14b8a6;
    --ab-accent-deep: #139a8c;
    --ab-glow: rgba(6, 182, 212, 0.45);
    --ab-card-bg: linear-gradient(165deg, rgba(24, 42, 38, 0.92) 0%, rgba(10, 20, 18, 0.95) 100%);
    --ab-card-border: rgba(20, 184, 166, 0.2);
    --ab-card-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.75);
    --ab-title: #ffffff;
    --ab-muted: #93aca6;
    --ab-text: #cbdcd8;
    --ab-soft: rgba(255, 255, 255, 0.045);

    overflow-x: clip;
}

html.light .ab-section,
[data-theme="light"] .ab-section {
    --ab-accent: #0d9488;
    --ab-accent-2: #14b8a6;
    --ab-accent-deep: #0f766e;
    --ab-glow: rgba(13, 148, 136, 0.35);
    --ab-card-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(237, 247, 244, 0.97) 100%);
    --ab-card-border: rgba(19, 154, 140, 0.2);
    --ab-card-shadow: 0 20px 44px -28px rgba(15, 23, 42, 0.4);
    --ab-title: #0e1e1b;
    --ab-muted: #53756d;
    --ab-text: #3b5a54;
    --ab-soft: rgba(15, 23, 42, 0.04);
}

/* ── Ambient ── */
.ab-ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

.ab-ambient--one {
    top: 4%;
    inset-inline-end: -6%;
    width: 34rem;
    height: 34rem;
    background: radial-gradient(circle, rgba(19, 154, 140, 0.2) 0%, transparent 68%);
    animation: abDrift 18s ease-in-out infinite;
}

.ab-ambient--two {
    bottom: 2%;
    inset-inline-start: -10%;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 68%);
    animation: abDrift 23s ease-in-out infinite reverse;
}

@keyframes abDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-40px, -34px, 0) scale(1.08); }
}

.ab-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.032) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
    background-size: 74px 74px;
    -webkit-mask-image: radial-gradient(ellipse 72% 62% at 60% 45%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 72% 62% at 60% 45%, #000 0%, transparent 78%);
}

html.light .ab-grid-lines {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

/* ── Heading ── */
.ab-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
}

.ab-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.ab-kicker-line {
    display: inline-block;
    width: 2.5rem;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, var(--ab-accent));
    opacity: 0.85;
}

.ab-kicker-line:last-child {
    background: linear-gradient(90deg, var(--ab-accent), transparent);
}

.ab-kicker-text {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--ab-accent);
    font-family: var(--rooha-font);
}

.ab-heading {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
    font-family: var(--rooha-font);
}

/* ── Layout ── */
.ab-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem;
    align-items: center;
}

.ab-copy {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── Editorial Panel ── */
.ab-panel {
    position: relative;
    padding: 1.9rem 1.9rem 1.9rem 2.4rem;
    border-radius: 28px;
    background: var(--ab-card-bg);
    border: 1px solid var(--ab-card-border);
    box-shadow: var(--ab-card-shadow);
    overflow: hidden;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

[dir="rtl"] .ab-panel {
    padding: 1.9rem 2.4rem 1.9rem 1.9rem;
}

/* Animated vertical accent rail */
.ab-panel-rail {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 3px;
    height: 100%;
    border-radius: 9999px;
    background: linear-gradient(180deg, var(--ab-accent), var(--ab-accent-2) 55%, transparent);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.reveal-section.is-visible .ab-panel-rail {
    transform: scaleY(1);
}

.ab-text {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.ab-para {
    margin: 0;
    font-size: 0.98rem;
    line-height: 2.05;
    color: var(--ab-text);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.75s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.reveal-section.is-visible .ab-para:nth-child(1) { transition-delay: 0.18s; }
.reveal-section.is-visible .ab-para:nth-child(2) { transition-delay: 0.28s; }
.reveal-section.is-visible .ab-para:nth-child(3) { transition-delay: 0.38s; }
.reveal-section.is-visible .ab-para:nth-child(4) { transition-delay: 0.48s; }
.reveal-section.is-visible .ab-para:nth-child(5) { transition-delay: 0.58s; }

/* ── Focus Features (removed: not driven by the database) ── */
/* Kept intentionally empty — the "focus" cards were dropped from the markup. */

/* ── Visual Stage ── */
.ab-visual {
    position: relative;
    min-height: 480px;
    display: grid;
    place-items: center;
    perspective: 1400px;
    perspective-origin: 50% 45%;
}

.ab-stage {
    --ab-x: 0px;
    --ab-y: 0px;
    --ab-drift: 0px;
    --ab-rx: 0deg;
    --ab-ry: 0deg;
    --ab-progress: 0.5;
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 1 / 1;
    transform-style: preserve-3d;
    transform: rotateX(var(--ab-rx)) rotateY(var(--ab-ry));
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Rotating spotlight behind the devices */
.ab-spotlight {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            rgba(20, 184, 166, 0.30),
            rgba(6, 182, 212, 0.16),
            rgba(245, 158, 11, 0.10),
            rgba(20, 184, 166, 0.30));
    filter: blur(46px);
    opacity: 0.75;
    animation: abSpin 22s linear infinite;
    pointer-events: none;
}

@keyframes abSpin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.ab-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.20) 0%, transparent 68%);
    filter: blur(28px);
    animation: abHalo 6.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes abHalo {
    0%, 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.65; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* Reflective floor */
.ab-floor {
    position: absolute;
    bottom: 6%;
    left: 50%;
    width: 78%;
    height: 26%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.28) 0%, rgba(6, 182, 212, 0.10) 45%, transparent 72%);
    filter: blur(18px);
    pointer-events: none;
}

.ab-floor-ring {
    position: absolute;
    bottom: 12%;
    left: 50%;
    width: 62%;
    height: 15%;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1.5px solid rgba(20, 184, 166, 0.35);
    box-shadow: 0 0 26px rgba(20, 184, 166, 0.18);
    pointer-events: none;
}

.ab-floor-ring--2 {
    width: 84%;
    height: 20%;
    bottom: 9%;
    border-style: dashed;
    border-color: rgba(6, 182, 212, 0.22);
    animation: abOrbit 16s linear infinite;
}

@keyframes abOrbit {
    to { transform: translateX(-50%) rotate(360deg); }
}

/* ── Devices ── */
.ab-phone {
    --ab-depth: 1;
    --ab-base-ry: 0deg;
    --ab-base-rx: 0deg;
    position: absolute;
    margin: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.ab-phone--front {
    --ab-depth: 1;
    --ab-base-ry: 9deg;
    --ab-base-rx: -3deg;
    --ab-side: 0px;
    left: 50%;
    top: 3%;
    width: 48%;
    z-index: 3;
    transform:
        translate3d(
            calc(-50% + var(--ab-x) * var(--ab-depth) + var(--ab-side)),
            calc(var(--ab-y) * var(--ab-depth) + var(--ab-drift)),
            70px)
        rotateY(var(--ab-base-ry))
        rotateX(var(--ab-base-rx));
}

.ab-phone--front .ab-device {
    animation: abFloatFront 7s ease-in-out infinite;
}

[dir="rtl"] .ab-phone--front {
    --ab-side: 0px;
    --ab-base-ry: -9deg;
}

@keyframes abFloatFront {
    0%, 100% { transform: translateY(0) rotate(-0.5deg); }
    50% { transform: translateY(-16px) rotate(0.5deg); }
}

@keyframes abFloatBack {
    0%, 100% { transform: translateY(0) rotate(0.6deg); }
    50% { transform: translateY(14px) rotate(-0.6deg); }
}

.ab-device {
    position: relative;
    padding: 10px;
    border-radius: 34px;
    background: linear-gradient(160deg, rgba(38, 60, 55, 0.96), rgba(7, 15, 14, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.13);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transform-style: preserve-3d;
}

html.light .ab-device {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(226, 240, 236, 0.98));
    border-color: rgba(19, 154, 140, 0.25);
    box-shadow: 0 32px 66px -30px rgba(15, 23, 42, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ab-device-notch {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 32%;
    height: 7px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.22);
    z-index: 3;
}

html.light .ab-device-notch {
    background: rgba(15, 23, 42, 0.14);
}

.ab-device-side {
    position: absolute;
    top: 26%;
    inset-inline-end: -3px;
    width: 3px;
    height: 14%;
    border-radius: 9999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.08));
}

.ab-screen {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    background: linear-gradient(160deg, #0e1d1a, #050d0c);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html.light .ab-screen {
    background: linear-gradient(160deg, #f2faf8, #dcefe9);
}

.ab-screen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 3D flip container holding both screenshots */
.ab-screen-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.ab-screen-inner.is-flipped {
    transform: rotateY(180deg);
}

.ab-screen-inner .ab-screen-img {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ab-screen-inner .ab-screen-img.is-back {
    transform: rotateY(180deg);
}

.ab-phone:hover .ab-screen-img {
    transform: scale(1.06);
}

.ab-screen.is-empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(20, 184, 166, 0.25), rgba(6, 182, 212, 0.12));
}

.ab-screen-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(118deg, transparent 32%, rgba(255, 255, 255, 0.16) 46%, transparent 60%);
    opacity: 0.65;
}

/* ── Orbiting badges ── */
.ab-badge {
    position: absolute;
    z-index: 4;
    width: 56px;
    height: 56px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: rgba(16, 28, 25, 0.86);
    border: 1px solid rgba(20, 184, 166, 0.4);
    color: #2dd4bf;
    font-size: 1.05rem;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.9), 0 0 22px rgba(20, 184, 166, 0.16);
    animation: abBadgeFloat 6s ease-in-out infinite;
    animation-delay: var(--ab-badge-delay, 0s);
}

html.light .ab-badge {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(19, 154, 140, 0.4);
    color: var(--ab-accent-deep);
    box-shadow: 0 16px 32px -18px rgba(15, 23, 42, 0.35);
}

.ab-badge--1 { top: 6%; inset-inline-start: 4%; }
.ab-badge--2 { top: 38%; inset-inline-end: 0; animation-delay: 0.9s; }
.ab-badge--3 { bottom: 14%; inset-inline-start: 8%; animation-delay: 1.8s; }

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

/* ── Image Switcher ── */
.ab-switcher {
    position: absolute;
    bottom: -2%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 9999px;
    background: rgba(10, 20, 18, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.95);
    z-index: 6;
}

html.light .ab-switcher {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(19, 154, 140, 0.22);
    box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.35);
}

.ab-switcher-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(19, 154, 140, 0.35), rgba(6, 182, 212, 0.18));
    border: 1px solid rgba(20, 184, 166, 0.45);
    box-shadow: 0 8px 20px -12px rgba(6, 182, 212, 0.9);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;
}

.ab-switch {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.9rem 0.4rem 0.4rem;
    border: 0;
    background: transparent;
    border-radius: 9999px;
    cursor: pointer;
    font-family: var(--rooha-font);
    color: var(--ab-muted);
    transition: color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

[dir="rtl"] .ab-switch {
    padding: 0.4rem 0.4rem 0.4rem 0.9rem;
}

.ab-switch:hover {
    color: var(--ab-title);
}

.ab-switch.is-active {
    color: #ffffff;
}

html.light .ab-switch.is-active {
    color: var(--ab-accent-deep);
}

.ab-switch-thumb {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.9);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
}

.ab-switch:hover .ab-switch-thumb {
    transform: scale(1.1);
}

.ab-switch.is-active .ab-switch-thumb {
    border-color: rgba(94, 234, 212, 0.75);
    transform: scale(1.08);
    box-shadow: 0 8px 18px -8px rgba(20, 184, 166, 0.9);
}

.ab-switch-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ab-switch-label {
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.ab-switch:focus-visible {
    outline: 2px solid var(--ab-accent-2);
    outline-offset: 2px;
}

/* ── Fallback artwork ── */
.ab-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.ab-fallback-logo {
    max-height: 60%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(20, 184, 166, 0.35));
    animation: abFloatFront 7s ease-in-out infinite;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .ab-layout {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .ab-visual {
        order: -1;
        min-height: 400px;
    }

    .ab-stage {
        max-width: 440px;
    }
}

@media (max-width: 639px) {
    .ab-panel {
        padding: 1.4rem 1.4rem 1.4rem 1.9rem;
        border-radius: 24px;
    }

    [dir="rtl"] .ab-panel {
        padding: 1.4rem 1.9rem 1.4rem 1.4rem;
    }

    .ab-para {
        font-size: 0.92rem;
        line-height: 1.95;
    }

    .ab-visual {
        min-height: 340px;
    }

    .ab-stage {
        max-width: 330px;
    }

    .ab-badge {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        font-size: 0.9rem;
    }

    .ab-switch-label {
        display: none;
    }

    .ab-switch {
        padding: 0.35rem;
    }

    [dir="rtl"] .ab-switch {
        padding: 0.35rem;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .ab-ambient,
    .ab-spotlight,
    .ab-halo,
    .ab-floor-ring--2,
    .ab-badge,
    .ab-device,
    .ab-fallback-logo {
        animation: none !important;
    }

    .ab-stage,
    .ab-phone,
    .ab-para,
    .ab-panel-rail,
    .ab-screen-inner,
    .ab-switcher-indicator {
        transition: none !important;
    }

    .ab-para {
        opacity: 1;
        transform: none;
    }

    .ab-panel-rail {
        transform: scaleY(1);
    }
}

/* ==========================================================================
   Signature Footer (توقيع الفوتر)
   ========================================================================== */
.ft-footer {
    --ft-accent: #06b6d4;
    --ft-accent-2: #14b8a6;
    --ft-accent-deep: #139a8c;
    --ft-glow: rgba(6, 182, 212, 0.45);
    --ft-title: #ffffff;
    --ft-muted: #93aca6;
    --ft-text: #cbdcd8;
    --ft-soft: rgba(255, 255, 255, 0.045);
    --ft-border: rgba(255, 255, 255, 0.1);

    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(19, 154, 140, 0.12), transparent 60%),
        linear-gradient(180deg, #06110f 0%, #040b0a 100%);
    color: var(--ft-text);
    margin-top: 7rem;
    isolation: isolate;
}

html.light .ft-footer,
[data-theme="light"] .ft-footer {
    --ft-accent: #0d9488;
    --ft-accent-2: #14b8a6;
    --ft-accent-deep: #0f766e;
    --ft-glow: rgba(13, 148, 136, 0.35);
    --ft-title: #0e1e1b;
    --ft-muted: #53756d;
    --ft-text: #3b5a54;
    --ft-soft: rgba(15, 23, 42, 0.04);
    --ft-border: rgba(15, 23, 42, 0.1);

    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(19, 154, 140, 0.1), transparent 60%),
        linear-gradient(180deg, #f2f8f7 0%, #e6f1ee 100%);
}

/* ── Ambient ── */
.ft-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

.ft-glow--one {
    top: -14%;
    inset-inline-start: 4%;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(19, 154, 140, 0.22) 0%, transparent 68%);
    animation: ftDrift 20s ease-in-out infinite;
}

.ft-glow--two {
    bottom: -22%;
    inset-inline-end: 6%;
    width: 28rem;
    height: 28rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.16) 0%, transparent 68%);
    animation: ftDrift 26s ease-in-out infinite reverse;
}

@keyframes ftDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(44px, -36px, 0) scale(1.08); }
}

.ft-grid-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 84px 84px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 0%, transparent 75%);
}

html.light .ft-grid-bg {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

/* Animated top accent line */
.ft-topline {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    overflow: hidden;
    background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.35), transparent);
}

.ft-topline-shine {
    position: absolute;
    top: 0;
    inset-inline-start: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #2dd4bf, transparent);
    filter: blur(0.5px);
    animation: ftShine 6s ease-in-out infinite;
}

@keyframes ftShine {
    0% { transform: translateX(-120%); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(520%); opacity: 0; }
}



/* ── Columns grid ── */
.ft-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 2.5rem;
    padding: 2.5rem 0 3rem;
}

/* ── About column ── */
.ft-about {
    font-size: 0.87rem;
    line-height: 1.95;
    color: var(--ft-muted);
    margin: 0;
    max-width: 380px;
}

.ft-social {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    background: var(--ft-soft);
    border: 1px solid var(--ft-border);
    color: var(--ft-muted);
    font-size: 0.95rem;
    overflow: hidden;
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-social::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--ft-accent-deep), var(--ft-accent-2));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ft-social i {
    position: relative;
    z-index: 2;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
}

.ft-social:hover {
    transform: translateY(-5px) rotate(-6deg);
    border-color: transparent;
    box-shadow: 0 16px 32px -16px rgba(6, 182, 212, 0.95);
}

.ft-social:hover::after {
    opacity: 1;
}

.ft-social:hover i {
    color: #ffffff;
    transform: scale(1.08);
}

/* ── Column titles ── */
.ft-col-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ft-title);
    margin: 0 0 1.3rem;
}

.ft-col-title-line {
    width: 22px;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--ft-accent-2), transparent);
    flex: 0 0 auto;
}

/* ── Quick links ── */
.ft-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.ft-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ft-muted);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-link-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ft-accent-2);
    opacity: 0.35;
    transform: scale(0.7);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-link-text {
    position: relative;
}

.ft-link-text::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: -3px;
    width: 100%;
    height: 1.5px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--ft-accent-2), var(--ft-accent));
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

[dir="rtl"] .ft-link-text::after {
    transform-origin: left center;
}

.ft-link-arrow {
    font-size: 0.6rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

[dir="rtl"] .ft-link-arrow {
    transform: translateX(6px);
}

.ft-link:hover {
    color: var(--ft-title);
    transform: translateX(4px);
}

[dir="rtl"] .ft-link:hover {
    transform: translateX(-4px);
}

.ft-link:hover .ft-link-dot {
    opacity: 1;
    transform: scale(1.4);
    box-shadow: 0 0 10px var(--ft-glow);
}

.ft-link:hover .ft-link-text::after {
    transform: scaleX(1);
    transform-origin: left center;
}

[dir="rtl"] .ft-link:hover .ft-link-text::after {
    transform-origin: right center;
}

.ft-link:hover .ft-link-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ── Contact list ── */
.ft-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ft-contact-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.ft-contact-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    color: #ffffff;
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.9);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.ft-contact-icon--teal { background: linear-gradient(135deg, #139a8c, #0d8275); }
.ft-contact-icon--cyan { background: linear-gradient(135deg, #22d3ee, #0d9488); }
.ft-contact-icon--amber { background: linear-gradient(135deg, #fbbf24, #d97706); }

.ft-contact-item:hover .ft-contact-icon {
    transform: scale(1.08) rotate(-8deg);
    box-shadow: 0 14px 28px -14px rgba(6, 182, 212, 0.95);
}

.ft-contact-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ft-contact-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ft-muted);
}

.ft-contact-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ft-title);
    transition: color 0.3s ease;
    overflow-wrap: anywhere;
}

.ft-contact-item:hover .ft-contact-value {
    color: var(--ft-accent-2);
}

/* ── Download column ── */
.ft-download-text {
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--ft-muted);
    margin: 0 0 1.1rem;
}

.ft-stores {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ft-store {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 18px;
    background: var(--ft-soft);
    border: 1px solid var(--ft-border);
    text-decoration: none;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-store:hover {
    transform: translateY(-3px);
    border-color: rgba(20, 184, 166, 0.5);
    background: rgba(20, 184, 166, 0.09);
    box-shadow: 0 16px 34px -20px rgba(6, 182, 212, 0.9);
}

.ft-store-shine {
    position: absolute;
    top: -60%;
    inset-inline-start: -35%;
    width: 35%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: translateX(-160%) rotate(18deg);
    pointer-events: none;
}

.ft-store:hover .ft-store-shine {
    animation: ftShine 1s ease-out forwards;
}

.ft-store-icon {
    font-size: 1.5rem;
    color: var(--ft-title);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
}

html.light .ft-store-icon {
    color: var(--ft-title);
}

.ft-store:hover .ft-store-icon {
    transform: scale(1.1) rotate(-6deg);
    color: var(--ft-accent-2);
}

.ft-store-body {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    text-align: start;
}

.ft-store-top {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ft-muted);
    text-transform: uppercase;
}

.ft-store-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ft-title);
}

.ft-whatsapp {
    margin-top: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.15rem;
    border-radius: 9999px;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.3);
    color: #25d366;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-whatsapp:hover {
    transform: translateY(-3px);
    background: rgba(37, 211, 102, 0.2);
    border-color: rgba(37, 211, 102, 0.6);
    box-shadow: 0 16px 32px -18px rgba(37, 211, 102, 0.85);
}

.ft-whatsapp i {
    font-size: 1.05rem;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-whatsapp:hover i {
    transform: scale(1.15) rotate(-8deg);
}

/* ── Bottom bar ── */
.ft-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.5rem 0 2rem;
    border-top: 1px solid var(--ft-border);
}

.ft-copy {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ft-muted);
    margin: 0;
}

.ft-copy-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.8);
    animation: ftPulse 2.4s ease-in-out infinite;
}

@keyframes ftPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

.ft-legal {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ft-legal-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: 9999px;
    background: var(--ft-soft);
    border: 1px solid var(--ft-border);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--ft-muted);
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-legal-link:hover {
    color: var(--ft-title);
    border-color: rgba(20, 184, 166, 0.45);
    background: rgba(20, 184, 166, 0.1);
    transform: translateY(-2px);
}

.ft-legal-link i {
    font-size: 0.7rem;
    color: var(--ft-accent-2);
}

/* ── Floating back to top ── */
.ft-top-btn {
    position: fixed;
    bottom: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 45;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(10, 20, 18, 0.85);
    border: 1px solid rgba(20, 184, 166, 0.35);
    color: #ffffff;
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.85);
    transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.95);
}

html.light .ft-top-btn {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(19, 154, 140, 0.35);
    color: var(--ft-accent-deep);
    box-shadow: 0 18px 36px -20px rgba(15, 23, 42, 0.4);
}

.ft-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.ft-top-btn:hover {
    background: var(--ft-accent-2);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 20px 40px -18px rgba(20, 184, 166, 0.95);
}

.ft-top-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ft-top-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 2;
}

.ft-top-ring-fill {
    fill: none;
    stroke: var(--ft-accent-2);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.2s linear;
}

.ft-top-btn > i {
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-top-btn:hover > i {
    transform: translateY(-3px);
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .ft-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.25rem 2rem;
    }

}

@media (max-width: 639px) {
    .ft-footer {
        margin-top: 4rem;
    }

    .ft-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 0 2.5rem;
    }

    .ft-marquee {
        padding: 1.5rem 0 0.75rem;
    }

    .ft-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .ft-top-btn {
        bottom: 1rem;
        inset-inline-end: 1rem;
        width: 46px;
        height: 46px;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .ft-glow,
    .ft-topline-shine,
    .ft-signature-glow,
    .ft-signature-sheen,
    .ft-signature-title,
    .ft-copy-dot {
        animation: none !important;
    }

    .ft-store-shine,
    .ft-link,
    .ft-link-text::after,
    .ft-link-arrow,
    .ft-link-dot,
    .ft-contact-icon,
    .ft-social,
    .ft-social i,
    .ft-store,
    .ft-store-icon,
    .ft-whatsapp,
    .ft-legal-link,
    .ft-top-btn {
        transition: none !important;
    }
}

/* ==========================================================================
   Signature Navigation (القائمة الرئيسية الاحترافية)
   ========================================================================== */
.nv-header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 60;
    padding: 0.85rem 1rem;
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s ease;
}

.nv-header.is-hidden {
    transform: translateY(-120%);
}

.nv-shell {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.6rem 0.55rem 1rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px -18px rgba(15, 23, 42, 0.25);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease,
                border-radius 0.45s ease, padding 0.4s ease, max-width 0.5s ease;
}

html:not(.light) .nv-shell {
    background: rgba(9, 19, 17, 0.72);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.75);
}

.nv-header.is-scrolled {
    padding: 0.5rem 1rem;
}

.nv-header.is-scrolled .nv-shell {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(19, 154, 140, 0.22);
    box-shadow: 0 18px 48px -24px rgba(15, 23, 42, 0.45);
}

html:not(.light) .nv-header.is-scrolled .nv-shell {
    background: rgba(7, 15, 14, 0.92);
    border-color: rgba(20, 184, 166, 0.28);
    box-shadow: 0 22px 56px -24px rgba(0, 0, 0, 0.85);
}

/* ── Logo ── */
.nv-logo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.5rem 0.35rem 0;
    border-radius: 14px;
    flex: 0 0 auto;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.nv-logo-glow {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.32) 0%, transparent 68%);
    filter: blur(16px);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.nv-logo:hover .nv-logo-glow {
    opacity: 1;
}

.nv-logo-img {
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nv-logo:hover .nv-logo-img {
    transform: scale(1.07);
}

.nv-logo-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0e1e1b;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

html:not(.light) .nv-logo-name {
    color: #ffffff;
}

/* ── Links ── */
.nv-links {
    position: relative;
    display: none;
    align-items: center;
    gap: 0.15rem;
    flex: 1;
    justify-content: center;
    padding: 0.2rem;
}

@media (min-width: 1024px) {
    .nv-links {
        display: flex;
    }
}

/* Liquid indicator that follows the active / hovered item */
.nv-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(19, 154, 140, 0.16), rgba(6, 182, 212, 0.08));
    border: 1px solid rgba(20, 184, 166, 0.28);
    box-shadow: 0 10px 26px -16px rgba(6, 182, 212, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition:
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease,
        background 0.4s ease,
        border-color 0.4s ease;
}

html:not(.light) .nv-indicator {
    background: linear-gradient(135deg, rgba(19, 154, 140, 0.3), rgba(6, 182, 212, 0.14));
    border-color: rgba(20, 184, 166, 0.35);
}

.nv-link {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #475569;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

html:not(.light) .nv-link {
    color: #cbd5e1;
}

.nv-link:hover {
    color: #0d8275;
    transform: translateY(-1px);
}

html:not(.light) .nv-link:hover {
    color: #5eead4;
}

.nv-link.is-active {
    color: #0d8275;
}

html:not(.light) .nv-link.is-active {
    color: #5eead4;
}

.nv-link-underline {
    position: absolute;
    inset-inline: 0.85rem;
    bottom: 0.3rem;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #139a8c, #22d3ee);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
}

[dir="rtl"] .nv-link-underline {
    transform-origin: left center;
}

.nv-link:hover .nv-link-underline {
    transform: scaleX(1);
    transform-origin: left center;
    opacity: 0.9;
}

[dir="rtl"] .nv-link:hover .nv-link-underline {
    transform-origin: right center;
}

.nv-link.is-active .nv-link-underline {
    transform: scaleX(1);
    transform-origin: left center;
    opacity: 1;
}

[dir="rtl"] .nv-link.is-active .nv-link-underline {
    transform-origin: right center;
}

/* ── Actions ── */
.nv-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

.nv-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 40px;
    min-width: 40px;
    padding: 0 0.7rem;
    border-radius: 13px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.07);
    color: #475569;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

html:not(.light) .nv-icon-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.nv-icon-btn:hover {
    color: #0d8275;
    border-color: rgba(20, 184, 166, 0.45);
    background: rgba(20, 184, 166, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -14px rgba(6, 182, 212, 0.9);
}

html:not(.light) .nv-icon-btn:hover {
    color: #5eead4;
    background: rgba(20, 184, 166, 0.14);
}

.nv-icon {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nv-icon-btn:hover .nv-icon {
    transform: rotate(360deg) scale(1.1);
}

.nv-theme:hover .nv-icon {
    transform: rotate(45deg) scale(1.12);
}

.nv-lang-text {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

@media (max-width: 639px) {
    .nv-lang-text {
        display: none;
    }

    .nv-lang {
        padding: 0;
    }
}

/* ── CTA ── */
.nv-cta {
    position: relative;
    display: none;
    align-items: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 1.15rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #139a8c, #14b8a6);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 14px 30px -14px rgba(13, 130, 117, 0.95);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

@media (min-width: 768px) {
    .nv-cta {
        display: inline-flex;
    }
}

.nv-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -16px rgba(13, 130, 117, 1);
}

.nv-cta-sheen {
    position: absolute;
    top: -60%;
    inset-inline-start: -30%;
    width: 30%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-160%) rotate(18deg);
    pointer-events: none;
}

.nv-cta:hover .nv-cta-sheen {
    animation: ftShine 1s ease-out forwards;
}

.nv-cta-icon {
    font-size: 0.8rem;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.nv-cta:hover .nv-cta-icon {
    transform: translateY(-2px) rotate(-8deg);
}

/* ── Burger ── */
.nv-burger {
    position: relative;
    width: 42px;
    height: 40px;
    border-radius: 13px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.07);
    cursor: pointer;
    display: grid;
    place-items: center;
    gap: 4px;
    transition: all 0.35s ease;
}

html:not(.light) .nv-burger {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.nv-burger:hover {
    border-color: rgba(20, 184, 166, 0.45);
    background: rgba(20, 184, 166, 0.1);
}

.nv-burger span {
    display: block;
    width: 17px;
    height: 2px;
    border-radius: 9999px;
    background: #334155;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, width 0.4s ease;
}

html:not(.light) .nv-burger span {
    background: #cbd5e1;
}

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

.nv-burger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.3);
}

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

/* ── Scroll progress ── */
.nv-progress {
    position: absolute;
    inset-inline: 1.5rem;
    bottom: -1px;
    height: 2px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.07);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
}

html:not(.light) .nv-progress {
    background: rgba(255, 255, 255, 0.08);
}

.nv-header.is-scrolled .nv-progress {
    opacity: 1;
}

.nv-progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, #139a8c, #22d3ee, #f59e0b);
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.8);
    will-change: transform;
}

[dir="rtl"] .nv-progress-fill {
    transform-origin: right center;
}

/* ── Mobile drawer ── */
.nv-drawer-backdrop {
    position: fixed;
    inset: 0;
    top: 4.5rem;
    z-index: 55;
    background: rgba(2, 8, 7, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.nv-drawer {
    position: absolute;
    top: 4.5rem;
    inset-inline: 1rem;
    z-index: 58;
    margin-inline: auto;
    max-width: 460px;
    padding: 1rem;
    border-radius: 24px;
    background: rgba(10, 20, 18, 0.94);
    border: 1px solid rgba(20, 184, 166, 0.25);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.9);
}

html.light .nv-drawer {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(19, 154, 140, 0.25);
    box-shadow: 0 30px 70px -30px rgba(15, 23, 42, 0.4);
}

.nv-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.nv-drawer-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0.85rem;
    border-radius: 16px;
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

html.light .nv-drawer-link {
    color: #334155;
}

.nv-drawer-link:hover {
    background: rgba(20, 184, 166, 0.1);
    color: #5eead4;
    transform: translateX(3px);
}

html.light .nv-drawer-link:hover {
    color: #0d8275;
}

.nv-drawer-link.is-active {
    background: linear-gradient(135deg, rgba(19, 154, 140, 0.22), rgba(6, 182, 212, 0.08));
    border-color: rgba(20, 184, 166, 0.3);
    color: #5eead4;
}

html.light .nv-drawer-link.is-active {
    color: #0d8275;
}

.nv-drawer-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.05);
    color: #5eead4;
    font-size: 0.8rem;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

html.light .nv-drawer-icon {
    background: rgba(19, 154, 140, 0.1);
    color: #0d8275;
}

.nv-drawer-link:hover .nv-drawer-icon,
.nv-drawer-link.is-active .nv-drawer-icon {
    background: linear-gradient(135deg, #14b8a6, #0d8275);
    color: #ffffff;
    transform: scale(1.06) rotate(-6deg);
}

.nv-drawer-text {
    flex: 1;
}

.nv-drawer-arrow {
    font-size: 0.65rem;
    opacity: 0.4;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.nv-drawer-link:hover .nv-drawer-arrow {
    opacity: 1;
    transform: translateX(3px);
}

.nv-drawer-foot {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html.light .nv-drawer-foot {
    border-top-color: rgba(15, 23, 42, 0.08);
}

.nv-drawer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.35s ease;
}

html.light .nv-drawer-btn {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
    color: #334155;
}

.nv-drawer-btn--primary {
    background: linear-gradient(135deg, #139a8c, #14b8a6);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 14px 30px -14px rgba(13, 130, 117, 0.95);
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .nv-shell {
        padding: 0.5rem 0.55rem 0.5rem 0.85rem;
    }

    .nv-logo-name {
        display: none;
    }
}

@media (max-width: 639px) {
    .nv-header {
        padding: 0.6rem 0.65rem;
    }

    .nv-progress {
        inset-inline: 0.9rem;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .nv-header,
    .nv-shell,
    .nv-indicator,
    .nv-link,
    .nv-link-underline,
    .nv-icon,
    .nv-icon-btn,
    .nv-cta,
    .nv-cta-sheen,
    .nv-burger span {
        transition: none !important;
    }

    .nv-cta:hover .nv-cta-sheen {
        animation: none !important;
    }
}

/* ── Footer glass panel ── */
.ft-panel {
    position: relative;
    width: 100%;
    border-radius: 44px 44px 0 0;
    padding: 3.75rem 0 2rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.014) 55%, rgba(255, 255, 255, 0.025) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 0;
    box-shadow:
        0 -30px 80px -60px rgba(0, 0, 0, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    overflow: hidden;
}

/* Inner container keeps the content readable while the panel spans the full width */
.ft-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

html.light .ft-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 100%);
    border-color: rgba(15, 23, 42, 0.07);
    box-shadow:
        0 -24px 60px -50px rgba(15, 23, 42, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ft-panel-glow {
    position: absolute;
    top: -45%;
    inset-inline-start: -10%;
    width: 55%;
    height: 130%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(19, 154, 140, 0.16) 0%, transparent 68%);
    filter: blur(50px);
    pointer-events: none;
}

.ft-panel .ft-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.15fr);
    gap: 3.25rem;
    padding: 0;
}

.ft-panel .ft-bottom {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
}

.ft-about {
    max-width: 400px;
    font-size: 0.95rem;
    line-height: 2;
}

@media (max-width: 1023px) {
    .ft-panel {
        padding: 2.5rem 0 1.5rem;
        border-radius: 32px 32px 0 0;
    }

    .ft-panel .ft-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2.25rem;
    }
}

@media (max-width: 639px) {
    .ft-panel {
        padding: 1.9rem 0 1.2rem;
        border-radius: 24px 24px 0 0;
    }

    .ft-panel .ft-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ==========================================================================
   Success Partners — Refined Orbit (شركاء النجاح — مدار متأنٍ)
   ========================================================================== */
.pn-section {
    --pn-accent: #06b6d4;
    --pn-accent-2: #14b8a6;
    --pn-accent-deep: #139a8c;
    --pn-glow: rgba(6, 182, 212, 0.4);
    --pn-title: #ffffff;
    --pn-muted: #93aca6;

    overflow-x: clip;
}

html.light .pn-section,
[data-theme="light"] .pn-section {
    --pn-accent: #0d9488;
    --pn-accent-2: #14b8a6;
    --pn-accent-deep: #0f766e;
    --pn-glow: rgba(13, 148, 136, 0.3);
    --pn-title: #0e1e1b;
    --pn-muted: #53756d;
}

/* ── Ambient ── */
.pn-ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
}

.pn-ambient--one {
    top: 4%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 36rem;
    height: 30rem;
    background: radial-gradient(ellipse, rgba(19, 154, 140, 0.16) 0%, transparent 70%);
    animation: pnDrift 22s ease-in-out infinite;
}

.pn-ambient--two {
    bottom: 6%;
    inset-inline-end: 10%;
    width: 26rem;
    height: 26rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
    animation: pnDrift 27s ease-in-out infinite reverse;
}

@keyframes pnDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(38px, -30px, 0) scale(1.08); }
}

.pn-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 78%);
}

html.light .pn-grid-lines {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
}

/* ── Heading ── */
.pn-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
}

.pn-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.pn-kicker-line {
    display: inline-block;
    width: 2.5rem;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, var(--pn-accent));
    opacity: 0.85;
}

.pn-kicker-line:last-child {
    background: linear-gradient(90deg, var(--pn-accent), transparent);
}

.pn-kicker-text {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--pn-accent);
    font-family: var(--rooha-font);
}

.pn-heading {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
    font-family: var(--rooha-font);
}

.pn-subtitle {
    margin-top: 1rem;
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--pn-muted);
    max-width: 680px;
}

/* ── Stage ── */
.pn-stage {
    --pn-rx: 315px;
    --pn-ry: 146px;
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    height: 460px;
    perspective: 1400px;
    perspective-origin: 50% 46%;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    outline: none;
}

.pn-stage:focus-visible {
    border-radius: 40px;
    box-shadow: 0 0 0 2px var(--pn-accent);
}

@media (max-width: 1023px) {
    .pn-stage { height: 400px; }
}

@media (max-width: 767px) {
    .pn-stage { height: 340px; }
}

@media (max-width: 479px) {
    .pn-stage { height: 300px; }
}

/* ── Orbit rails ── */
.pn-orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.pn-orbit-base {
    fill: none;
    stroke: url(#pnOrbitGrad);
    stroke-width: 1.25;
    opacity: 0.55;
}

.pn-orbit-dash {
    fill: none;
    stroke: var(--pn-accent-2);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 6 30;
    opacity: 0.5;
    animation: pnDash 14s linear infinite;
}

@keyframes pnDash {
    to { stroke-dashoffset: -288; }
}

.pn-ground {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74%;
    height: 40%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.16) 0%, transparent 68%);
    filter: blur(42px);
    pointer-events: none;
    z-index: 0;
}

/* ── Center core ── */
.pn-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    pointer-events: none;
}

.pn-core-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 240px;
    height: 240px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.28) 0%, transparent 68%);
    filter: blur(26px);
    animation: pnHalo 6s ease-in-out infinite;
}

@keyframes pnHalo {
    0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.7; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

.pn-core-ring {
    position: absolute;
    top: 34px;
    left: 50%;
    width: 148px;
    height: 148px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1.5px dashed rgba(20, 184, 166, 0.35);
    animation: pnSpin 26s linear infinite;
}

@keyframes pnSpin {
    to { transform: translateX(-50%) rotate(360deg); }
}

.pn-core-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    height: 72px;
    padding: 0 1.15rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid rgba(20, 184, 166, 0.4);
    box-shadow: 0 22px 50px -24px rgba(15, 23, 42, 0.4), 0 0 26px rgba(19, 154, 140, 0.16);
    animation: pnCorePulse 4.5s ease-in-out infinite;
}

html.light .pn-core-pill {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(19, 154, 140, 0.35);
    box-shadow: 0 20px 44px -24px rgba(15, 23, 42, 0.3), 0 0 24px rgba(19, 154, 140, 0.14);
}

@keyframes pnCorePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 22px 50px -24px rgba(15, 23, 42, 0.4), 0 0 22px rgba(19, 154, 140, 0.14); }
    50% { transform: scale(1.03); box-shadow: 0 26px 56px -24px rgba(15, 23, 42, 0.4), 0 0 34px rgba(19, 154, 140, 0.26); }
}

.pn-core-img {
    height: 44px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(13, 148, 136, 0.28));
}

.pn-core-badge {
    padding: 0.4rem 0.95rem;
    border-radius: 9999px;
    background: rgba(20, 184, 166, 0.14);
    border: 1px solid rgba(20, 184, 166, 0.32);
    color: var(--pn-accent-2);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

html.light .pn-core-badge {
    background: rgba(19, 154, 140, 0.1);
    border-color: rgba(19, 154, 140, 0.28);
    color: var(--pn-accent-deep);
}

/* ── Cards ── */
.pn-ring {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.pn-card {
    --pn-depth: 0.5;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 168px;
    pointer-events: auto;
    cursor: grab;
    will-change: transform, opacity;
    transform-style: preserve-3d;
}

.pn-stage.is-dragging .pn-card {
    cursor: grabbing;
}

.pn-card-frame {
    position: relative;
    width: 168px;
    height: 100px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow:
        0 16px 34px -22px rgba(2, 12, 10, 0.38),
        0 2px 5px rgba(2, 12, 10, 0.08),
        inset 0 0 0 1px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    transition: box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

html.light .pn-card-frame {
    box-shadow:
        0 18px 38px -24px rgba(15, 23, 42, 0.35),
        0 2px 5px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.pn-card:hover .pn-card-frame {
    border-color: rgba(45, 212, 191, 0.85);
    box-shadow:
        0 30px 60px -24px rgba(6, 182, 212, 0.6),
        0 0 0 4px rgba(20, 184, 166, 0.12),
        0 0 34px rgba(20, 184, 166, 0.35);
    transform: translateY(-5px);
}

.pn-card-sheen {
    position: absolute;
    top: -60%;
    inset-inline-start: -40%;
    width: 40%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.22), transparent);
    transform: translateX(-160%) rotate(18deg);
    pointer-events: none;
}

.pn-card:hover .pn-card-sheen {
    animation: pnSheen 1.1s ease-out forwards;
}

@keyframes pnSheen {
    0% { transform: translateX(-160%) rotate(18deg); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(420%) rotate(18deg); opacity: 0; }
}

.pn-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Elegant fallback when the partner has no logo */
.pn-card-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: linear-gradient(160deg, #ffffff 0%, #eef6f4 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.pn-card-fallback.is-visible {
    opacity: 1;
}

.pn-card-fallback-img {
    height: 40px;
    width: auto;
    max-width: 72px;
    object-fit: contain;
    opacity: 0.92;
    filter: drop-shadow(0 6px 14px rgba(13, 148, 136, 0.22));
}

.pn-card-fallback-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
}

.pn-card-name {
    display: block;
    margin-top: 0.55rem;
    text-align: center;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--pn-muted);
    transition: color 0.35s ease;
}

.pn-card:hover .pn-card-name {
    color: var(--pn-accent-2);
}

html.light .pn-card:hover .pn-card-name {
    color: var(--pn-accent-deep);
}

/* ── Controls ── */
.pn-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.pn-arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pn-soft, rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--pn-muted);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

html.light .pn-arrow {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}

.pn-arrow:hover {
    background: linear-gradient(135deg, var(--pn-accent-deep), var(--pn-accent-2));
    border-color: transparent;
    color: #ffffff;
    transform: scale(1.08);
    box-shadow: 0 14px 30px -14px rgba(20, 184, 166, 0.95);
}

.pn-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pn-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 9999px;
    border: 0;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    position: relative;
}

html.light .pn-dot {
    background: rgba(15, 23, 42, 0.14);
}

.pn-dot:hover {
    background: rgba(45, 212, 191, 0.6);
}

.pn-dot.is-active {
    width: 30px;
    background: rgba(255, 255, 255, 0.14);
}

html.light .pn-dot.is-active {
    background: rgba(15, 23, 42, 0.1);
}

.pn-dot-fill {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--pn-accent-deep), var(--pn-accent-2));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

[dir="rtl"] .pn-dot-fill {
    transform-origin: right center;
}

.pn-dot.is-active .pn-dot-fill {
    transform: scaleX(1);
}

/* ── Responsive ── */
@media (max-width: 639px) {
    .pn-card {
        width: 132px;
    }

    .pn-card-frame {
        width: 132px;
        height: 82px;
        border-radius: 18px;
        padding: 11px;
    }

    .pn-card-fallback-img {
        height: 32px;
    }

    .pn-core-pill {
        min-width: 108px;
        height: 62px;
        border-radius: 18px;
    }

    .pn-core-img {
        height: 32px;
    }

    .pn-core-ring {
        width: 122px;
        height: 122px;
        top: 28px;
    }

    .pn-core-badge {
        font-size: 0.64rem;
        padding: 0.32rem 0.75rem;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .pn-ambient,
    .pn-core-halo,
    .pn-core-ring,
    .pn-core-pill,
    .pn-orbit-dash {
        animation: none !important;
    }

    .pn-card-frame,
    .pn-card-name,
    .pn-arrow,
    .pn-dot,
    .pn-dot-fill {
        transition: none !important;
    }
}


/* ==========================================================================
   Performance — pause decorative motion while a section is off-screen
   ========================================================================== */
.is-offscreen .hero-aurora-blob,
.is-offscreen .ab-ambient,
.is-offscreen .ab-spotlight,
.is-offscreen .ab-halo,
.is-offscreen .ab-badge,
.is-offscreen .pn-ambient,
.is-offscreen .pn-core-halo,
.is-offscreen .pn-core-ring,
.is-offscreen .pn-core-pill,
.is-offscreen .pn-orbit-dash,
.is-offscreen .ct-ambient,
.is-offscreen .ct-form-glow,
.is-offscreen .ct-signal-ring,
.is-offscreen .ct-online-dot::after,
.is-offscreen .faq-ambient,
.is-offscreen .faq-no-results-icon,
.is-offscreen .ft-glow,
.is-offscreen .ft-marquee-track,
.is-offscreen .ft-marquee-sep,
.is-offscreen .ft-topline-shine,
.is-offscreen .ft-copy-dot,
.is-offscreen .sv-ambient,
.is-offscreen .sv-wave-path,
.is-offscreen .sv-card-sheen,
.is-offscreen .hw-ambient,
.is-offscreen .hw-halo,
.is-offscreen .hw-device,
.is-offscreen .hw-node-pulse,
.is-offscreen .hw-rail-dot::after,
.is-offscreen .hw-card-shine,
.is-offscreen .hero-grain,
.is-offscreen .ft-grid-bg,
.is-offscreen .hero-grid-lines {
    animation-play-state: paused !important;
}


/* ── Signature band (شريط التوقيع) ── */
.ft-signature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-bottom: 2.5rem;
    margin-bottom: 2.75rem;
    border-bottom: 1px solid var(--ft-border);
    overflow: hidden;
    isolation: isolate;
}

.ft-signature-glow {
    position: absolute;
    top: 50%;
    inset-inline-start: -6%;
    width: 46%;
    height: 220%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(20, 184, 166, 0.20) 0%, transparent 68%);
    filter: blur(46px);
    pointer-events: none;
    z-index: 0;
    animation: ftSignatureGlow 9s ease-in-out infinite;
}

@keyframes ftSignatureGlow {
    0%, 100% { opacity: 0.55; transform: translateY(-50%) scale(0.95); }
    50% { opacity: 1; transform: translateY(-50%) scale(1.08); }
}

/* Travelling light sweep across the band */
.ft-signature-sheen {
    position: absolute;
    top: -60%;
    inset-inline-start: -35%;
    width: 28%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
    transform: translateX(-160%) rotate(14deg);
    pointer-events: none;
    z-index: 1;
    animation: ftSignatureSweep 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ftSignatureSweep {
    0% { transform: translateX(-180%) rotate(14deg); opacity: 0; }
    18% { opacity: 1; }
    70% { transform: translateX(520%) rotate(14deg); opacity: 0; }
    100% { transform: translateX(520%) rotate(14deg); opacity: 0; }
}

[dir="rtl"] .ft-signature-sheen {
    animation-name: ftSignatureSweepRtl;
}

@keyframes ftSignatureSweepRtl {
    0% { transform: translateX(180%) rotate(-14deg); opacity: 0; }
    18% { opacity: 1; }
    70% { transform: translateX(-520%) rotate(-14deg); opacity: 0; }
    100% { transform: translateX(-520%) rotate(-14deg); opacity: 0; }
}

.ft-signature-logo {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: auto;
    height: clamp(84px, 9.5vw, 116px);
    padding: 0 clamp(1.4rem, 2.4vw, 2.4rem);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease, border-color 0.4s ease;
}

html.light .ft-signature-logo {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.08);
}

.ft-signature-logo:hover {
    transform: translateY(-5px) scale(1.04);
    border-color: rgba(20, 184, 166, 0.5);
    box-shadow: 0 26px 50px -24px rgba(6, 182, 212, 0.85);
}

.ft-signature-logo-img {
    max-width: min(210px, 100%);
    max-height: 62%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}

.ft-signature-copy {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
}

.ft-signature-title {
    margin: 0;
    font-size: clamp(1.9rem, 4.6vw, 3.4rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    background: linear-gradient(100deg,
            #ffffff 0%,
            #ffffff 34%,
            #5eead4 48%,
            #ffffff 62%,
            #ffffff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: ftShimmer 8s linear infinite;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

html.light .ft-signature-title {
    background-image: linear-gradient(100deg,
            #0e1e1b 0%,
            #0e1e1b 34%,
            #0d9488 48%,
            #0e1e1b 62%,
            #0e1e1b 100%);
    background-size: 260% 100%;
}

@keyframes ftShimmer {
    from { background-position: 180% 50%; }
    to { background-position: -80% 50%; }
}

[dir="rtl"] .ft-signature-title {
    animation-direction: reverse;
}

.ft-signature-text {
    margin: 0.85rem 0 0;
    font-size: clamp(0.9rem, 1.15vw, 1rem);
    line-height: 1.95;
    color: var(--ft-muted);
    max-width: 640px;
}

.ft-signature-socials {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
}

@media (max-width: 1023px) {
    .ft-signature {
        flex-wrap: wrap;
        gap: 1.5rem;
        padding-bottom: 2rem;
        margin-bottom: 2.25rem;
    }

    .ft-signature-copy {
        flex-basis: calc(100% - 160px);
    }

    .ft-signature-socials {
        width: 100%;
    }
}

@media (max-width: 639px) {
    .ft-signature {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .ft-signature-copy {
        flex-basis: 100%;
    }

    .ft-signature-logo {
        height: 72px;
        padding: 0 1.2rem;
        border-radius: 22px;
    }
}


/* ── Signature socials (grouped under the brand copy) ── */
.ft-signature-socials {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.ft-signature-socials-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ft-muted);
}

.ft-signature-socials-list {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Back to top link (about column) ── */
.ft-back-top-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 9999px;
    background: var(--ft-soft);
    border: 1px solid var(--ft-border);
    color: var(--ft-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-back-top-link i {
    font-size: 0.7rem;
    color: var(--ft-accent-2);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ft-back-top-link:hover {
    color: var(--ft-title);
    border-color: rgba(20, 184, 166, 0.45);
    background: rgba(20, 184, 166, 0.1);
    transform: translateY(-2px);
}

.ft-back-top-link:hover i {
    transform: translateY(-3px);
}

/* ==========================================================================
   Our Services — Spotlight Deck (خدماتنا — منصة العرض)
   ========================================================================== */
.sv-section {
    --sv-accent: #06b6d4;
    --sv-accent-2: #14b8a6;
    --sv-accent-deep: #139a8c;
    --sv-glow: rgba(6, 182, 212, 0.45);
    --sv-card-bg: linear-gradient(165deg, rgba(24, 42, 38, 0.92) 0%, rgba(10, 20, 18, 0.95) 100%);
    --sv-card-border: rgba(20, 184, 166, 0.18);
    --sv-title: #ffffff;
    --sv-muted: #93aca6;
    --sv-text: #cbdcd8;

    overflow-x: clip;
}

html.light .sv-section,
[data-theme="light"] .sv-section {
    --sv-accent: #0d9488;
    --sv-accent-2: #14b8a6;
    --sv-accent-deep: #0f766e;
    --sv-glow: rgba(13, 148, 136, 0.3);
    --sv-card-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(237, 247, 244, 0.97) 100%);
    --sv-card-border: rgba(19, 154, 140, 0.18);
    --sv-title: #0e1e1b;
    --sv-muted: #53756d;
    --sv-text: #3b5a54;
}

/* ── Ambient ── */
.sv-ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.sv-ambient--one {
    top: 6%;
    inset-inline-start: -8%;
    width: 34rem;
    height: 34rem;
    background: radial-gradient(circle, rgba(19, 154, 140, 0.18) 0%, transparent 68%);
    animation: svDrift 19s ease-in-out infinite;
}

.sv-ambient--two {
    bottom: 4%;
    inset-inline-end: -6%;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.15) 0%, transparent 68%);
    animation: svDrift 24s ease-in-out infinite reverse;
}

@keyframes svDrift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(40px, -32px, 0) scale(1.08); }
}

.sv-grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 78px 78px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 78%);
}

html.light .sv-grid-lines {
    background-image:
        linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

/* ── Decorative waves ── */
.sv-waves {
    position: absolute;
    inset-inline: 0;
    top: 42%;
    height: 420px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.sv-waves svg {
    width: 100%;
    height: 100%;
}

.sv-wave-path {
    fill: none;
    stroke: url(#svWaveGrad);
    stroke-width: 2;
    stroke-linecap: round;
    animation: svWave 14s ease-in-out infinite;
}

.sv-wave-path--soft {
    stroke-width: 1.4;
    opacity: 0.5;
    animation-duration: 18s;
    animation-direction: reverse;
}

.sv-wave-path--faint {
    stroke-width: 1;
    opacity: 0.28;
    animation-duration: 22s;
}

@keyframes svWave {
    0%, 100% { transform: translateX(-2%); }
    50% { transform: translateX(2%); }
}

/* ── Heading ── */
.sv-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
}

.sv-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.sv-kicker-line {
    display: inline-block;
    width: 2.5rem;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, var(--sv-accent));
    opacity: 0.85;
}

.sv-kicker-line:last-child {
    background: linear-gradient(90deg, var(--sv-accent), transparent);
}

.sv-kicker-text {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--sv-accent);
    font-family: var(--rooha-font);
}

.sv-heading {
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.02em;
    font-family: var(--rooha-font);
}

.sv-subtitle {
    margin-top: 1rem;
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--sv-muted);
    max-width: 700px;
}

/* ── Stage ── */
.sv-stage {
    position: relative;
    z-index: 2;
}

/* Spotlight that glides to the active card */
.sv-spotlight {
    --sv-x: 50%;
    --sv-y: 50%;
    position: absolute;
    top: var(--sv-y);
    left: var(--sv-x);
    width: 34rem;
    height: 34rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.20) 0%, rgba(6, 182, 212, 0.08) 45%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    transition: top 0.7s cubic-bezier(0.22, 1, 0.36, 1), left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-floor {
    position: absolute;
    inset-inline: 0;
    bottom: -6%;
    height: 46%;
    background: radial-gradient(ellipse at center, rgba(6, 182, 212, 0.12) 0%, transparent 68%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
}

/* ── Cards: overlapping deck (active in front, others stacked behind) ── */
.sv-cards {
    position: relative;
    z-index: 2;
    height: clamp(440px, 48vw, 540px);
    perspective: 1500px;
    perspective-origin: 50% 50%;
}

.sv-card {
    --sv-offset: 0;
    --sv-scale: 1;
    --sv-dim: 1;
    --sv-tilt: 0deg;
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(468px, 90%);
    padding: 2.3rem 2.15rem 2.6rem;
    border-radius: 32px;
    background: var(--sv-card-bg);
    border: 1px solid var(--sv-card-border);
    box-shadow: 0 22px 50px -30px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    cursor: pointer;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    transform:
        translate(-50%, -50%)
        translateX(calc(var(--sv-offset) * 30%))
        translateY(var(--sv-drop, 0px))
        scale(var(--sv-scale))
        rotateY(var(--sv-tilt));
    opacity: var(--sv-dim);
    transform-style: preserve-3d;
    will-change: transform, opacity;
    transition:
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.5s ease,
        border-color 0.45s ease,
        box-shadow 0.5s ease;
}

.sv-card.is-active {
    border-color: rgba(45, 212, 191, 0.45);
    box-shadow: 0 38px 80px -30px rgba(6, 182, 212, 0.6);
    /* Opaque so the stacked cards never bleed through the text */
    background: linear-gradient(165deg, #172c28 0%, #0a1513 100%);
}

html.light .sv-card.is-active {
    background: linear-gradient(165deg, #ffffff 0%, #eef7f4 100%);
}

.sv-card:focus-visible {
    outline: 2px solid var(--sv-accent-2);
    outline-offset: 4px;
}

/* Gradient hairline border on the active card */
.sv-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, rgba(45, 212, 191, 0.85), rgba(255, 255, 255, 0.04) 45%, rgba(6, 182, 212, 0.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.sv-card.is-active::before {
    opacity: 1;
}

/* Corner glow */
.sv-card-glow {
    position: absolute;
    top: -35%;
    inset-inline-end: -25%;
    width: 70%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.22) 0%, transparent 68%);
    filter: blur(24px);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.sv-card.is-active .sv-card-glow {
    opacity: 1;
}

/* Travelling sheen on the active card */
.sv-card-sheen {
    position: absolute;
    top: -60%;
    inset-inline-start: -35%;
    width: 32%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
    transform: translateX(-170%) rotate(16deg);
    pointer-events: none;
}

.sv-card.is-active .sv-card-sheen {
    animation: svSheen 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes svSheen {
    0% { transform: translateX(-170%) rotate(16deg); opacity: 0; }
    20% { opacity: 1; }
    62% { transform: translateX(480%) rotate(16deg); opacity: 0; }
    100% { transform: translateX(480%) rotate(16deg); opacity: 0; }
}

/* Ghost number */
.sv-card-num {
    position: absolute;
    top: 1rem;
    inset-inline-end: 1.5rem;
    font-size: clamp(3rem, 5vw, 4.25rem);
    font-weight: 200;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.05);
    transition: color 0.5s ease, transform 0.5s ease;
    user-select: none;
    pointer-events: none;
}

html.light .sv-card-num {
    color: rgba(14, 30, 27, 0.06);
}

.sv-card.is-active .sv-card-num {
    color: rgba(45, 212, 191, 0.22);
    transform: translateY(-4px);
}

.sv-card-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    border-radius: 22px;
    background: linear-gradient(140deg, rgba(20, 184, 166, 0.22), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(20, 184, 166, 0.24);
    color: var(--sv-accent-2);
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-card.is-active .sv-card-icon {
    background: linear-gradient(140deg, #14b8a6, #0d8275);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-3px) rotate(-6deg);
    box-shadow: 0 16px 30px -16px rgba(13, 130, 117, 0.95);
}

.sv-card-title {
    margin: 0;
    font-size: clamp(1.3rem, 2.1vw, 1.7rem);
    font-weight: 800;
    line-height: 1.45;
    color: var(--sv-title);
    transition: color 0.4s ease;
}

.sv-card.is-active .sv-card-title {
    color: var(--sv-accent-2);
}

html.light .sv-card.is-active .sv-card-title {
    color: var(--sv-accent-deep);
}

.sv-card-desc {
    margin: 1rem 0 0;
    font-size: 1rem;
    line-height: 2;
    color: var(--sv-text);
}

/* Bottom accent bar */
.sv-card-bar {
    position: absolute;
    inset-inline: 2rem;
    bottom: 0;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, var(--sv-accent-2), transparent);
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-card.is-active .sv-card-bar {
    transform: scaleX(1);
    box-shadow: 0 0 14px var(--sv-glow);
}

/* ── Controls: arrows pinned to the edges, indicators centred ── */
.sv-controls {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-top: 2.75rem;
}

.sv-arrow {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--sv-card-bg);
    border: 1px solid var(--sv-card-border);
    color: var(--sv-muted);
    font-size: 0.85rem;
    cursor: pointer;
    justify-self: start;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sv-arrow--next {
    justify-self: end;
}

/* In Arabic the numbers run left → right, so the "next" arrow sits on the right */
[dir="rtl"] .sv-arrow--next {
    order: 1;
    justify-self: start;
}

[dir="rtl"] .sv-dots-wrap {
    order: 2;
}

[dir="rtl"] .sv-arrow--prev {
    order: 3;
    justify-self: end;
}

.sv-arrow:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--sv-accent-deep), var(--sv-accent-2));
    border-color: transparent;
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 16px 32px -16px rgba(20, 184, 166, 0.95);
}

.sv-arrow:active:not(:disabled) {
    transform: scale(0.96);
}

.sv-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(0.6);
}

.sv-dots-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-width: 0;
    max-width: 100%;
}

.sv-counter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28rem;
    font-family: var(--rooha-font);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--sv-muted);
    white-space: nowrap;
    direction: ltr;
}

.sv-counter-current {
    font-size: 1.15rem;
    color: var(--sv-accent-2);
    letter-spacing: -0.02em;
}

html.light .sv-counter-current {
    color: var(--sv-accent-deep);
}

.sv-counter-current.is-bump {
    animation: svCounterBump 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes svCounterBump {
    0% { transform: translateY(-8px) scale(0.86); opacity: 0.3; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.sv-counter-sep {
    opacity: 0.5;
}

.sv-dots {
    position: relative;
    display: flex;
    flex-direction: row;
    direction: ltr;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem;
    border-radius: 9999px;
    background: var(--sv-card-bg);
    border: 1px solid var(--sv-card-border);
    max-width: min(460px, 100%);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.sv-dots::-webkit-scrollbar {
    display: none;
}

.sv-dot {
    position: relative;
    flex: 0 0 auto;
    min-width: 46px;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--sv-muted);
    font-family: var(--rooha-font);
    font-size: 0.85rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}

.sv-dot:hover {
    color: var(--sv-title);
    background: var(--sv-soft, rgba(255, 255, 255, 0.05));
}

.sv-dot.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--sv-accent-deep), var(--sv-accent-2));
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -12px rgba(20, 184, 166, 0.9);
    overflow: hidden;
}

/* Autoplay progress sweeping across the active indicator */
.sv-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05));
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

.sv-dot.is-active::after {
    animation: svDotFill 6s linear forwards;
}

@keyframes svDotFill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

html.light .sv-dot.is-active {
    color: #ffffff;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .sv-cards {
        height: clamp(380px, 52vw, 440px);
    }

    .sv-card {
        width: min(400px, 84%);
        padding: 1.7rem 1.6rem 2rem;
    }

    .sv-spotlight {
        width: 22rem;
        height: 22rem;
    }

    .sv-controls {
        margin-top: 2rem;
    }
}

@media (max-width: 639px) {
    .sv-subtitle {
        font-size: 0.95rem;
        line-height: 1.85;
    }

    .sv-cards {
        height: clamp(360px, 78vw, 400px);
    }

    .sv-card {
        width: min(340px, 86%);
        padding: 1.4rem 1.3rem 1.7rem;
        border-radius: 26px;
    }

    .sv-card-desc {
        font-size: 0.88rem;
        line-height: 1.8;
    }

    .sv-card-icon {
        width: 52px;
        height: 52px;
        border-radius: 17px;
        font-size: 1.05rem;
        margin-bottom: 1.1rem;
    }

    .sv-controls {
        grid-template-columns: 1fr auto 1fr;
        gap: 0.5rem;
        margin-top: 1.75rem;
    }

    .sv-dots-wrap {
        flex-direction: column;
        gap: 0.35rem;
    }

    .sv-dot {
        min-width: 38px;
        font-size: 0.78rem;
    }

    .sv-arrow {
        width: 46px;
        height: 46px;
    }

    .sv-dot {
        min-width: 40px;
        font-size: 0.78rem;
    }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .sv-ambient,
    .sv-wave-path,
    .sv-card-sheen,
    .sv-dot::after {
        animation: none !important;
    }

    .sv-card,
    .sv-spotlight,
    .sv-card-glow,
    .sv-card-bar,
    .sv-card-num,
    .sv-dot {
        transition: none !important;
    }
}