:root {
             /* =========================
               BACKGROUNDS - محسنة للتباين
            ========================== */
             --bg-primary: #020617;
             /* Slate 950 - أغمق للتباين */
             --bg-secondary: #0F172A;
             /* Slate 900 */
             --bg-tertiary: #1E293B;
             /* Slate 800 */
             --bg-card: #1E293B;
             /* Slate 800 */
             --bg-hover: #334155;
             /* Slate 700 */

             /* =========================
               PRIMARY BRAND - من الشعار
               مع تحسين التباين
            ========================== */
             --primary: #2563EB;
             /* Blue 600 - contrast 7.2:1 */
             --primary-light: #00cdff;
             /* Blue 500 - contrast 5.8:1 */
             --primary-dark: #1D4ED8;
             /* Blue 700 - contrast 9.1:1 */
             --primary-glow: rgba(37, 99, 235, 0.4);

             --secondary: #00cdff;
             /* Cyan 600 - contrast 6.1:1 */
             --secondary-light: #22D3EE;
             /* Cyan 400 - contrast 4.6:1 */
             --secondary-dark: #0E7490;
             /* Cyan 700 - contrast 8.3:1 */
             --secondary-glow: rgba(8, 145, 178, 0.4);

             --accent: #7C3AED;
             /* Violet 600 - contrast 6.8:1 */
             --accent-light: #A78BFA;
             /* Violet 400 - contrast 4.2:1 */
             --accent-dark: #6D28D9;
             /* Violet 700 - contrast 8.9:1 */
             --accent-glow: rgba(124, 58, 237, 0.3);

             /* =========================
               TEXT COLORS - WCAG AAA
               تباين عالي جداً
            ========================== */
             --text-primary: #FFFFFF;
             /* White - contrast 16:1 على bg-primary */
             --text-secondary: #E2E8F0;
             /* Slate 200 - contrast 12:1 */
             --text-muted: #becde1;
             /* Slate 400 - contrast 6.2:1 */
             --text-dim: #64748B;
             /* Slate 500 - contrast 4.6:1 */

             /* =========================
               GRADIENTS - محسنة
            ========================== */
             --gradient-primary: linear-gradient(135deg, #2563EB 0%, #0891B2 100%);
             --gradient-secondary: linear-gradient(135deg, #1E293B 0%, #334155 100%);
             --gradient-accent: linear-gradient(135deg, #7C3AED 0%, #0891B2 100%);
             --gradient-brand: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #0891B2 100%);

             /* =========================
               BORDERS - واضحة
            ========================== */
             --border-color: rgba(255, 255, 255, 0.1);
             --border-light: rgba(255, 255, 255, 0.2);
             --border-focus: rgba(37, 99, 235, 0.6);

             /* =========================
               GLASS EFFECT
            ========================== */
             --glass-bg: rgba(15, 23, 42, 0.75);
             --glass-bg-strong: rgba(15, 23, 42, 0.9);
             --glass-border: #ffffff5c;

             /* =========================
               SHADOWS
            ========================== */
             --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
             --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
             --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);

             /* =========================
               FOCUS STATES - Accessibility
            ========================== */
             --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.5), 0 0 0 6px rgba(37, 99, 235, 0.3);
             --focus-ring-secondary: 0 0 0 3px rgba(8, 145, 178, 0.5), 0 0 0 6px rgba(8, 145, 178, 0.3);

             /* =========================
               TYPOGRAPHY
            ========================== */
             --font-ar: 'IBM Plex Sans Arabic', sans-serif;
             --font-en: 'Poppins', sans-serif;

             /* =========================
               TRANSITIONS
            ========================== */
             --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
             --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
        }

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

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

        body {
             background: var(--bg-primary);
             color: var(--text-primary);
             font-family: var(--font-ar);
             line-height: 1.7;
             overflow-x: hidden;
             font-weight: 600;
             cursor: none;
        }

        [dir="ltr"] body {
             font-family: var(--font-en);
        }

        ::selection {
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             color: #fff;
        }

        @font-face {
             font-family: "IBM Plex Sans Arabic";
             font-style: normal;
             font-weight: 300;
             src: url("../fonts/IBMPLEXSANSARABIC-LIGHT.TTF") format("truetype");
             font-display: swap;
        }

        @font-face {
             font-family: "IBM Plex Sans Arabic";
             font-style: normal;
             font-weight: 700;
             src: url("../fonts/IBMPLEXSANSARABIC-BOLD.TTF") format("truetype");
             font-display: swap;
        }

        html {
             overflow-x: hidden
        }

        body {
             font-weight: 400;
             font-family: "IBM Plex Sans Arabic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
             font-weight: 700;
        }

        p,
        span,
        li,
        a {
             font-weight: 600;
        }

        .small-text {
             font-weight: 300;
        }

        ol,
        ul {
             padding-right: 0rem;
        }

        a {
             text-decoration: none;
             color: inherit;
             transition: all 0.3s var(--ease-out);
             cursor: none;
        }

        ul {
             list-style: none;
             padding: 0;
             margin: 0;
        }

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

        button {
             cursor: none;
             font-family: inherit;
        }

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

        /* Custom Cursor */
        .cursor-dot {
             position: fixed;
             width: 6px;
             height: 6px;
             background: var(--secondary);
             border-radius: 50%;
             transform: translate(-50%, -50%);
             z-index: 100000;
             pointer-events: none;
             box-shadow: 0 0 20px var(--secondary);
             transition: width 0.3s, height 0.3s, background 0.3s;
        }

        .cursor-ring {
             position: fixed;
             width: 40px;
             height: 40px;
             border: 1.5px solid rgba(6, 182, 212, 0.5);
             border-radius: 50%;
             transform: translate(-50%, -50%);
             z-index: 99999;
             pointer-events: none;
             transition: width 0.4s, height 0.4s, border-color 0.3s, background 0.3s;
        }

        .cursor-dot.hover {
             width: 14px;
             height: 14px;
             background: var(--accent);
             box-shadow: 0 0 25px var(--accent);
        }

        .cursor-ring.hover {
             width: 60px;
             height: 60px;
             border-color: var(--accent);
             background: rgba(139, 92, 246, 0.08);
        }

        @media (max-width: 768px) {

             .cursor-dot,
             .cursor-ring {
                  display: none !important;
             }

             body {
                  cursor: auto;
             }

             a,
             button {
                  cursor: pointer;
             }
        }

        /* Scroll Progress */
        .scroll-progress-bar {
             position: fixed;
             top: 0;
             left: 0;
             width: 0;
             height: 3px;
             background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
             z-index: 100001;
             box-shadow: 0 0 20px var(--primary);
        }

        /* Preloader */
        .preloader {
             position: fixed;
             inset: 0;
             background: var(--bg-primary);
             z-index: 99999;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             gap: 2rem;
             transition: opacity 0.6s, visibility 0.6s;
        }

        .preloader.hidden {
             opacity: 0;
             visibility: hidden;
             pointer-events: none;
        }

        .preloader-logo-icon {
             width: 120px;
             height: 120px;
             position: relative;
        }

        .preloader-logo-icon .orbit {
             position: absolute;
             width: 100%;
             height: 100%;
             /* border: 2px solid rgba(6, 182, 212, 0.3); */
             border-radius: 50%;
             animation: orbitSpin 3s linear infinite;
        }

        .preloader-logo-icon .orbit:nth-child(2) {
             width: 70%;
             height: 70%;
             top: 15%;
             left: 15%;
             animation-direction: reverse;
             animation-duration: 2s;
             border-color: rgba(37, 99, 235, 0.3);
        }

        .preloader-logo-icon .orbit:nth-child(3) {
             width: 40%;
             height: 40%;
             top: 30%;
             left: 30%;
             animation-duration: 1.5s;
             border-color: rgba(139, 92, 246, 0.4);
        }

        .preloader-logo-icon .core {
             position: absolute;
             width: 20px;
             height: 20px;
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             border-radius: 50%;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             box-shadow: 0 0 30px var(--primary), 0 0 60px var(--primary-glow);
             animation: corePulse 1.5s ease-in-out infinite;
        }

        @keyframes orbitSpin {
             0% {
                  transform: rotate(0deg);
             }

             100% {
                  transform: rotate(360deg);
             }
        }

        @keyframes corePulse {

             0%,
             100% {
                  transform: translate(-50%, -50%) scale(1);
             }

             50% {
                  transform: translate(-50%, -50%) scale(1.3);
             }
        }

        .preloader-company-name {
             font-size: 2rem;
             font-weight: 900;
             background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             animation: gradText 3s linear infinite;
             letter-spacing: 2px;
        }

        @keyframes gradText {
             0% {
                  background-position: 0% center;
             }

             100% {
                  background-position: 200% center;
             }
        }

        .preloader-status {
             color: var(--text-muted);
             font-size: 0.9rem;
             display: flex;
             align-items: center;
             gap: 0.5rem;
        }

        .preloader-status .dot {
             width: 8px;
             height: 8px;
             background: var(--success);
             border-radius: 50%;
             animation: statusBlink 1s infinite;
        }

        @keyframes statusBlink {

             0%,
             100% {
                  opacity: 1;
             }

             50% {
                  opacity: 0.3;
             }
        }

        .preloader-track {
             width: 250px;
             height: 3px;
             background: var(--bg-tertiary);
             border-radius: 10px;
             overflow: hidden;
        }

        .preloader-fill {
             height: 100%;
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             border-radius: 10px;
             width: 0;
             transition: width 0.3s;
             box-shadow: 0 0 15px var(--primary);
        }

        .preloader-percent {
             color: var(--secondary);
             font-size: 0.85rem;
             font-weight: 700;
        }

        /* Background */
        .bg-grid {
             position: fixed;
             inset: 0;
             z-index: -3;
             background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
             background-size: 60px 60px;
             pointer-events: none;
        }

        #particles-canvas {
             position: fixed;
             inset: 0;
             z-index: -2;
             pointer-events: none;
        }

        .orb {
             position: fixed;
             border-radius: 50%;
             filter: blur(140px);
             z-index: -1;
             pointer-events: none;
             opacity: 0.25;
        }

        .orb-1 {
             width: 700px;
             height: 700px;
             background: radial-gradient(circle, var(--primary), transparent 70%);
             top: -20%;
             right: -15%;
             animation: orbDrift 25s ease-in-out infinite;
        }

        .orb-2 {
             width: 550px;
             height: 550px;
             background: radial-gradient(circle, var(--accent), transparent 70%);
             bottom: 10%;
             left: -10%;
             animation: orbDrift 30s ease-in-out infinite reverse;
        }

        .orb-3 {
             width: 450px;
             height: 450px;
             background: radial-gradient(circle, var(--secondary), transparent 70%);
             top: 50%;
             right: 20%;
             animation: orbDrift 20s ease-in-out infinite;
             animation-delay: -10s;
        }

        @keyframes orbDrift {

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

             33% {
                  transform: translate(40px, -60px) scale(1.08);
             }

             66% {
                  transform: translate(-30px, 30px) scale(0.95);
             }
        }

        ::-webkit-scrollbar {
             width: 8px;
        }

        ::-webkit-scrollbar-track {
             background: var(--bg-primary);
        }

        ::-webkit-scrollbar-thumb {
             background: linear-gradient(180deg, var(--primary), var(--secondary));
             border-radius: 10px;
        }

        /* Navigation */
        .navbar-main {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             z-index: 9990;
             padding: 1rem 2rem;
             transition: all 0.5s var(--ease-out);
        }

        .navbar-main.scrolled {
             padding: 0.6rem 2rem;
             background: rgba(6, 10, 20, 0.85);
             backdrop-filter: blur(25px);
             border-bottom: 1px solid var(--glass-border);
             box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
        }

        .nav-inner {
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 1rem;
        }

        .brand {
             width: 130px;
        }

        .brand img {
             width: 100%
        }

        .brand-icon {
             width: 40px;
             height: 40px;
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             border-radius: 12px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-weight: 900;
             color: #fff;
             box-shadow: var(--glow-primary);
             position: relative;
             overflow: hidden;
        }

        .brand-icon::after {
             content: '';
             position: absolute;
             top: -50%;
             left: -50%;
             width: 200%;
             height: 200%;
             background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.15), transparent);
             animation: shine 4s ease-in-out infinite;
        }

        @keyframes shine {
             0% {
                  transform: translateX(-100%) rotate(45deg);
             }

             100% {
                  transform: translateX(100%) rotate(45deg);
             }
        }

        .brand-text {
             background: linear-gradient(90deg, #fff, var(--text-secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
        }

        .nav-links {
             display: flex;
             align-items: center;
             gap: 0.3rem;
        }

        .nav-link-item {
             padding: 0.5rem 1rem;
             color: var(--text-muted);
             font-weight: 600;
             border-radius: 10px;
             transition: all 0.3s var(--ease-out);
             position: relative;
        }

        .nav-link-item::after {
             content: '';
             position: absolute;
             bottom: 4px;
             left: 50%;
             transform: translateX(-50%);
             width: 0;
             height: 2px;
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             border-radius: 2px;
             transition: width 0.3s var(--ease-out);
        }

        .nav-link-item:hover,
        .nav-link-item.active {
             color: var(--text-primary);
        }

        .nav-link-item:hover::after,
        .nav-link-item.active::after {
             width: 60%;
        }

        .nav-cta {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: #fff;
             padding: 0.55rem 1.4rem;
             border-radius: 12px;
             font-weight: 600;
             border: none;
             position: relative;
             overflow: hidden;
             box-shadow: 0 0 20px var(--primary-glow);
             transition: all 0.3s;
        }

        .nav-cta::before {
             content: '';
             position: absolute;
             top: 0;
             left: -100%;
             width: 100%;
             height: 100%;
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
             transition: left 0.5s;
        }

        .nav-cta:hover::before {
             left: 100%;
        }

        .nav-cta:hover {
             transform: translateY(-2px);
             box-shadow: 0 5px 30px var(--primary-glow);
        }

        .nav-actions {
             display: flex;
             align-items: center;
             gap: 0.8rem;
        }

        .lang-btn {
             background: rgba(255, 255, 255, 0.06);
             border: 1px solid var(--border-color);
             color: var(--text-secondary);
             padding: 0.45rem 1rem;
             border-radius: 10px;
             font-weight: 600;
             font-size: 0.85rem;
             transition: all 0.3s;
        }

        .lang-btn:hover {
             background: rgba(255, 255, 255, 0.12);
             border-color: var(--primary);
        }

        .hamburger {
             display: none;
             flex-direction: column;
             gap: 5px;
             padding: 8px;
             background: none;
             border: none;
             z-index: 99998;
             position: relative;
        }

        .hamburger span {
             display: block;
             width: 26px;
             height: 2px;
             background: var(--text-primary);
             border-radius: 2px;
             transition: all 0.4s var(--ease-out);
        }

        .hamburger.active span:nth-child(1) {
             transform: rotate(45deg) translate(5px, 5px);
        }

        .hamburger.active span:nth-child(2) {
             opacity: 0;
             transform: scaleX(0);
        }

        .hamburger.active span:nth-child(3) {
             transform: rotate(-45deg) translate(5px, -5px);
        }

        /* Mobile Menu */
        .mobile-overlay {
             position: fixed;
             inset: 0;
             background: rgba(0, 0, 0, 0.6);
             backdrop-filter: blur(8px);
             z-index: 99996;
             opacity: 0;
             visibility: hidden;
             transition: all 0.4s;
        }

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

        .mobile-menu {
             position: fixed;
             top: 0;
             right: -100%;
             width: 80%;
             max-width: 380px;
             height: 100vh;
             background: var(--bg-secondary);
             z-index: 99997;
             padding: 6rem 2rem 2rem;
             transition: right 0.5s var(--ease-out);
             display: flex;
             flex-direction: column;
             gap: 0.3rem;
             border-left: 1px solid var(--border-color);
             box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
             overflow-y: auto;
        }

        [dir="ltr"] .mobile-menu {
             right: auto;
             left: -100%;
             transition: left 0.5s var(--ease-out);
             border-left: none;
             border-right: 1px solid var(--border-color);
        }

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

        [dir="ltr"] .mobile-menu.open {
             left: 0;
        }

        .mobile-link {
             padding: 1rem 0.8rem;
             color: var(--text-secondary);
             font-weight: 600;
             font-size: 1.15rem;
             border-bottom: 1px solid var(--border-color);
             display: block;
             transition: all 0.3s var(--ease-out);
        }

        .mobile-link:hover {
             color: var(--secondary);
             padding-right: 1.5rem;
        }

        [dir="ltr"] .mobile-link:hover {
             padding-right: 0.8rem;
             padding-left: 1.5rem;
        }

        .mobile-footer {
             margin-top: auto;
             padding-top: 2rem;
             border-top: 1px solid var(--border-color);
             display: flex;
             flex-direction: column;
             gap: 1rem;
        }

        .mobile-social {
             display: flex;
             gap: 0.8rem;
        }

        .mobile-social a {
             width: 42px;
             height: 42px;
             background: rgba(255, 255, 255, 0.05);
             border: 1px solid var(--border-color);
             border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: var(--text-muted);
             transition: all 0.3s;
        }

        .mobile-social a:hover {
             background: var(--primary);
             border-color: var(--primary);
             color: #fff;
        }

        /* Sections */
        .section-pad {
             padding: 7rem 0;
             position: relative;
        }

        .section-badge {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
             background: rgba(37, 99, 235, 0.08);
             border: 1px solid rgba(37, 99, 235, 0.2);
             padding: 0.45rem 1.2rem;
             border-radius: 50px;
             color: var(--primary-light);
             font-size: 15px;
             font-weight: 700 !important;
             letter-spacing: 1.5px;
             text-transform: uppercase;
             margin-bottom: 1rem;
        }

        .section-title {
             font-size: 2.8rem;
             font-weight: 800;
             line-height: 1.2;
             margin-bottom: 1rem;
        }

        .section-title span {
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
        }

        @media (min-width: 768px) {
             .section-title {
                  font-size: 3.2rem;
             }
        }

        @media (min-width: 1200px) {
             .section-title {
                  font-size: 3.8rem;
             }
        }

        .section-desc {
             color: var(--text-muted);
             font-size: 1.08rem;
             max-width: 600px;
             line-height: 1.8;
        }

        .section-header {
             text-align: center;
             margin-bottom: 4rem;
             display: flex;
             flex-direction: column;
             align-items: center;
        }

        .section-line {
             width: 50px;
             height: 3px;
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             border-radius: 3px;
             margin-top: 1rem;
             box-shadow: var(--glow-primary);
        }

        /* Hero */
        .hero {
             min-height: 100vh;
             display: flex;
             align-items: center;
             position: relative;
             overflow: hidden;
             padding: 10rem 0 4rem;
        }

        .hero-inner {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 4rem;
             align-items: center;
             position: relative;
             z-index: 10;
        }

        .hero-content {
             text-align: right;
        }

        [dir="ltr"] .hero-content {
             text-align: left;
        }

        .hero-badge {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
             background: rgba(6, 182, 212, 0.08);
             border: 1px solid rgba(6, 182, 212, 0.25);
             padding: 0.5rem 1.2rem;
             border-radius: 50px;
             color: var(--secondary);
             font-size: 0.88rem;
             font-weight: 600;
             margin-bottom: 1.5rem;
             opacity: 0;
             transform: translateY(25px);
        }

        .hero-badge .dot {
             width: 8px;
             height: 8px;
             background: var(--secondary);
             border-radius: 50%;
             animation: pulseDot 2s infinite;
        }

        @keyframes pulseDot {

             0%,
             100% {
                  box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.6);
             }

             50% {
                  box-shadow: 0 0 0 8px rgba(6, 182, 212, 0);
             }
        }

        .hero-heading {
             font-size: 3rem;
             font-weight: 900;
             line-height: 1.15;
             margin-bottom: 1.5rem;
             opacity: 0;
             transform: translateY(35px);
        }

        @media (min-width: 768px) {
             .hero-heading {
                  font-size: 3.8rem;
             }
        }

        @media (min-width: 1200px) {
             .hero-heading {
                  font-size: 4.5rem;
             }
        }

        .hero-heading .line {
             display: block;
        }

        .hero-heading .highlight {
             background: linear-gradient(90deg, var(--secondary), var(--accent));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
        }

        .hero-text {
             font-size: 1.12rem;
             color: var(--text-muted);
             margin-bottom: 2.5rem;
             max-width: 520px;
             line-height: 1.85;
             opacity: 0;
             transform: translateY(35px);
        }

        .hero-btns {
             display: flex;
             gap: 1rem;
             flex-wrap: wrap;
             opacity: 0;
             transform: translateY(35px);
        }

        .btn-primary-hero {
             background: linear-gradient(135deg, var(--primary), var(--primary-light));
             color: #fff;
             padding: 0.9rem 2rem;
             border-radius: 14px;
             font-weight: 700;
             font-size: 1rem;
             border: none;
             position: relative;
             overflow: hidden;
             box-shadow: var(--glow-primary);
             transition: all 0.3s;
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
        }

        .btn-primary-hero:hover {
             transform: translateY(-3px);
             box-shadow: 0 10px 40px var(--primary-glow);
        }

        .btn-secondary-hero {
             background: rgba(255, 255, 255, 0.04);
             color: var(--text-primary);
             padding: 0.9rem 2rem;
             border-radius: 14px;
             font-weight: 600;
             font-size: 1rem;
             border: 1px solid var(--border-light);
             transition: all 0.3s;
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
             backdrop-filter: blur(10px);
        }

        .btn-secondary-hero:hover {
             background: rgba(255, 255, 255, 0.1);
             border-color: var(--secondary);
             color: var(--secondary);
        }

        .hero-metrics {
             display: flex;
             gap: 2.5rem;
             margin-top: 3rem;
             padding-top: 2rem;
             border-top: 1px solid var(--border-color);
             opacity: 0;
             transform: translateY(35px);
        }

        .hero-metric {
             text-align: center;
        }

        .hero-metric-num {
             font-size: 2.2rem;
             font-weight: 800;
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
        }

        .hero-metric-label {
             font-size: 0.85rem;
             font-weight: 600;
             color: var(--text-muted);
             margin-top: 0.2rem;
        }

        /* Hero Tech Visual - Left Side */
        .hero-visual {
             position: relative;
             height: 580px;
             perspective: 1200px;
             display: flex;
             align-items: center;
             justify-content: center;
        }

        /* Tech illustration on left side */
        .hero-tech-illustration {
             position: absolute;
             left: -60px;
             top: 50%;
             transform: translateY(-50%);
             width: 180px;
             height: 300px;
             opacity: 0.6;
        }

        [dir="ltr"] .hero-tech-illustration {
             left: auto;
             right: -60px;
        }

        .hero-tech-illustration .tech-line {
             position: absolute;
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             border-radius: 2px;
             opacity: 0.4;
        }

        .hero-tech-illustration .tech-node {
             position: absolute;
             width: 12px;
             height: 12px;
             background: var(--secondary);
             border-radius: 50%;
             box-shadow: 0 0 15px var(--secondary);
             animation: nodePulse 2s ease-in-out infinite;
        }

        @keyframes nodePulse {

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

             50% {
                  transform: scale(1.5);
                  opacity: 0.3;
             }
        }

        /* Floating Cards */
        .hero-float-card {
             position: absolute;
             background: var(--glass-bg);
             backdrop-filter: blur(20px);
             border: 1px solid var(--glass-border);
             border-radius: 20px;
             padding: 1.5rem;
             box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5);
             animation: heroFloat 7s ease-in-out infinite;
        }

        .hero-float-card:nth-child(1) {
             width: 240px;
             top: 5%;
             right: 10%;
        }

        .hero-float-card:nth-child(2) {
             width: 200px;
             top: 40%;
             left: 5%;
             animation-delay: -2.5s;
        }

        .hero-float-card:nth-child(3) {
             width: 220px;
             bottom: 5%;
             right: 5%;
             animation-delay: -5s;
        }

        [dir="ltr"] .hero-float-card:nth-child(1) {
             right: auto;
             left: 10%;
        }

        [dir="ltr"] .hero-float-card:nth-child(2) {
             left: auto;
             right: 5%;
        }

        [dir="ltr"] .hero-float-card:nth-child(3) {
             right: auto;
             left: 5%;
        }

        @keyframes heroFloat {

             0%,
             100% {
                  transform: translateY(0) rotateX(2deg) rotateY(2deg);
             }

             50% {
                  transform: translateY(-18px) rotateX(-2deg) rotateY(-2deg);
             }
        }

        .float-card-row {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-bottom: 1rem;
        }

        .float-card-icon {
             width: 38px;
             height: 38px;
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: #fff;
             font-size: 1.1rem;
        }

        .float-badge {
             font-size: 0.72rem;
             padding: 0.25rem 0.7rem;
             background: rgba(16, 185, 129, 0.15);
             color: var(--success);
             border-radius: 20px;
             font-weight: 600;
        }

        .float-card-title {
             font-weight: 700;
             margin-bottom: 0.4rem;
             font-size: 0.95rem;
        }

        .float-card-value {
             font-size: 2rem;
             font-weight: 800;
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
        }

        .float-bar {
             height: 5px;
             background: var(--bg-tertiary);
             border-radius: 10px;
             overflow: hidden;
             margin-top: 1rem;
        }

        .float-bar-fill {
             height: 100%;
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             border-radius: 10px;
             width: 78%;
             box-shadow: var(--glow-primary);
        }

        /* About */
        .about-section {
             background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
        }

        .about-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 4rem;
             align-items: center;
        }

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

        .about-img-wrap {
             position: relative;
             border-radius: 24px;
             overflow: hidden;
             height: 520px;
             box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5);
        }

        .about-img-wrap img {
             width: 100%;
             height: 100%;
             object-fit: cover;
        }

        .about-img-overlay {
             position: absolute;
             inset: 0;
             background: linear-gradient(135deg, rgba(6, 10, 20, 0.7), transparent);
        }

        .about-float-stat {
             position: absolute;
             bottom: 2rem;
             right: 2rem;
             background: var(--glass-bg);
             backdrop-filter: blur(20px);
             border: 1px solid var(--glass-border);
             border-radius: 16px;
             padding: 1.5rem;
             text-align: center;
        }

        [dir="ltr"] .about-float-stat {
             right: auto;
             left: 2rem;
        }

        .about-float-num {
             font-size: 2.5rem;
             font-weight: 800;
             color: var(--secondary);
             line-height: 1;
        }

        .about-float-text {
             color: var(--text-muted);
             font-size: 0.9rem;
             margin-top: 0.4rem;
        }

        .about-features {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 1.5rem;
             margin: 2rem 0;
        }

        @media (max-width: 576px) {
             .about-features {
                  grid-template-columns: 1fr;
             }
        }

        .about-feature {
             display: flex;
             gap: 1rem;
             align-items: flex-start;
        }

        .about-feature-icon {
             width: 48px;
             height: 48px;
             min-width: 48px;
             background: rgba(37, 99, 235, 0.08);
             border: 1px solid rgba(37, 99, 235, 0.15);
             border-radius: 14px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: var(--primary-light);
             font-size: 1.2rem;
             transition: all 0.3s;
        }

        .about-feature:hover .about-feature-icon {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: #fff;
             box-shadow: var(--glow-primary);
        }

        .about-feature-title {
             font-weight: 700;
             margin-bottom: 0.2rem;
        }

        .about-feature-desc {
             font-size: 0.85rem;
             color: var(--text-muted);
             line-height: 1.6;
        }

        /* =========================================
           ENHANCED COUNTERS SECTION
           ========================================= */
        .counters-enhanced-section {
             background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
             padding: 6rem 0;
             position: relative;
             overflow: hidden;
        }

        .counters-enhanced-section::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
             pointer-events: none;
        }

        .counters-enhanced-grid {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             gap: 2rem;
             position: relative;
             z-index: 1;
        }

        @media (max-width: 992px) {
             .counters-enhanced-grid {
                  grid-template-columns: repeat(2, 1fr);
             }
        }

        @media (max-width: 576px) {
             .counters-enhanced-grid {
                  grid-template-columns: 1fr;
             }
        }

        .counter-enhanced-card {
             background: var(--glass-bg);
             backdrop-filter: blur(20px);
             border: 1px solid var(--glass-border);
             border-radius: 24px;
             padding: 2.5rem 2rem;
             text-align: center;
             position: relative;
             overflow: hidden;
             transition: all 0.5s var(--ease-out);
        }

        .counter-enhanced-card::before {
             content: '';
             position: absolute;
             top: -2px;
             left: -2px;
             right: -2px;
             bottom: -2px;
             background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
             border-radius: 26px;
             z-index: -1;
             opacity: 0;
             transition: opacity 0.4s;
        }

        /*.counter-enhanced-card:hover::before {*/
        /*    opacity: 1;*/
        /*}*/

        .counter-enhanced-card:hover {
             transform: translateY(-12px) scale(1.02);
             /*background: rgba(10, 15, 30, 0.85);*/
             box-shadow: 0 20px 60px rgba(37, 99, 235, 0.2);
        }

        .counter-enhanced-icon {
             width: 70px;
             height: 70px;
             margin: 0 auto 1.5rem;
             border-radius: 20px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 2rem;
             position: relative;
        }

        .counter-enhanced-icon::after {
             content: '';
             position: absolute;
             inset: -4px;
             border-radius: 24px;
             background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent);
             z-index: -1;
        }

        .counter-enhanced-icon.blue {
             background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.05));
             color: var(--primary-light);
        }

        .counter-enhanced-icon.cyan {
             background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.05));
             color: var(--secondary);
        }

        .counter-enhanced-icon.amber {
             background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.05));
             color: var(--warning);
        }

        .counter-enhanced-icon.purple {
             background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.05));
             color: var(--accent-light);
        }

        .counter-enhanced-num {
             font-size: 3.5rem;
             font-weight: 900;
             background: linear-gradient(135deg, var(--primary-light), var(--secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             line-height: 1;
             margin-bottom: 0.3rem;
             position: relative;
             display: inline-block;
        }

        .counter-enhanced-num .suffix {
             font-size: 1.8rem;
             font-weight: 700;
        }

        .counter-enhanced-label {
             color: var(--text-muted);
             font-size: 1rem;
             font-weight: 500;
             margin-bottom: 1rem;
        }

        .counter-enhanced-bar {
             height: 4px;
             background: var(--bg-tertiary);
             border-radius: 10px;
             overflow: hidden;
             margin-top: 1.5rem;
        }

        .counter-enhanced-bar-fill {
             height: 100%;
             border-radius: 10px;
             width: 0%;
             transition: width 2s var(--ease-out);
        }

        .counter-enhanced-bar-fill.blue {
             background: linear-gradient(90deg, var(--primary), var(--primary-light));
             box-shadow: 0 0 15px var(--primary-glow);
        }

        .counter-enhanced-bar-fill.cyan {
             background: linear-gradient(90deg, var(--secondary), var(--secondary-light));
             box-shadow: 0 0 15px var(--secondary-glow);
        }

        .counter-enhanced-bar-fill.amber {
             background: linear-gradient(90deg, var(--warning), #FBBF24);
             box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
        }

        .counter-enhanced-bar-fill.purple {
             background: linear-gradient(90deg, var(--accent), var(--accent-light));
             box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
        }

        /* Animated ring around counter */
        .counter-ring {
             position: absolute;
             top: -10px;
             left: -10px;
             right: -10px;
             bottom: -10px;
             border: 2px solid transparent;
             border-top-color: var(--primary);
             border-radius: 30px;
             animation: counterRingSpin 8s linear infinite;
             opacity: 0;
             transition: opacity 0.3s;
             pointer-events: none;
        }

        .counter-enhanced-card:hover .counter-ring {
             opacity: 0.3;
        }

        @keyframes counterRingSpin {
             0% {
                  transform: rotate(0deg);
             }

             100% {
                  transform: rotate(360deg);
             }
        }

        /* =========================================
           HOW WE WORK - HORIZONTAL
           ========================================= */
        .howwework-section {
             background: var(--bg-secondary);
             position: relative;
             overflow: hidden;
        }

        .howwework-section::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: radial-gradient(ellipse at 30% 50%, rgba(37, 99, 235, 0.06) 0%, transparent 60%);
             pointer-events: none;
        }

        .hww-horizontal-track {
             display: flex;
             gap: 2rem;
             overflow-x: auto;
             padding: 2rem 1rem;
             scroll-snap-type: x mandatory;
             -webkit-overflow-scrolling: touch;
             position: relative;
             z-index: 1;
             scroll-behavior: smooth;
        }

        .hww-horizontal-track::-webkit-scrollbar {
             height: 6px;
        }

        .hww-horizontal-track::-webkit-scrollbar-track {
             background: var(--bg-tertiary);
             border-radius: 10px;
        }

        .hww-horizontal-track::-webkit-scrollbar-thumb {
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             border-radius: 10px;
        }

        /* Connecting line */
        .hww-connector {
             position: absolute;
             top: 50%;
             left: 0;
             width: 100%;
             height: 3px;
             background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), var(--accent), transparent);
             opacity: 0.3;
             z-index: 0;
             display: none;
        }

        .hww-step-card {
             min-width: 280px;
             max-width: 300px;
             flex-shrink: 0;
             background: var(--glass-bg);
             backdrop-filter: blur(15px);
             border: 1px solid var(--glass-border);
             border-radius: 24px;
             padding: 2rem;
             position: relative;
             scroll-snap-align: center;
             transition: all 0.4s var(--ease-out);
        }

        .hww-step-card:hover {
             transform: translateY(-10px);
             border-color: rgba(37, 99, 235, 0.3);
             box-shadow: 0 16px 60px rgba(0, 0, 0, 0.4);
        }

        .hww-step-card::before {
             content: '';
             position: absolute;
             top: -2px;
             left: -2px;
             right: -2px;
             bottom: -2px;
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             border-radius: 26px;
             z-index: -1;
             opacity: 0;
             transition: opacity 0.4s;
        }

        .hww-step-card:hover::before {
             opacity: 0.4;
        }

        /* Step number badge */
        .hww-step-number {
             position: absolute;
             top: -18px;
             right: 2rem;
             width: 40px;
             height: 40px;
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             border-radius: 12px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-weight: 800;
             font-size: 1.1rem;
             color: #fff;
             box-shadow: var(--glow-primary);
        }

        [dir="ltr"] .hww-step-number {
             right: auto;
             left: 2rem;
        }

        .hww-step-icon {
             width: 60px;
             height: 60px;
             background: rgba(37, 99, 235, 0.08);
             border: 1px solid rgba(37, 99, 235, 0.15);
             border-radius: 16px;
             display: flex;
             align-items: center;
             justify-content: center;
             margin-bottom: 1.2rem;
             color: var(--secondary);
             font-size: 1.5rem;
             transition: all 0.4s var(--ease-bounce);
        }

        .hww-step-card:hover .hww-step-icon {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: #fff;
             box-shadow: var(--glow-secondary);
             transform: scale(1.1) rotate(5deg);
        }

        .hww-step-title {
             font-size: 1.2rem;
             font-weight: 700;
             margin-bottom: 0.6rem;
        }

        .hww-step-desc {
             color: var(--text-muted);
             line-height: 1.7;
        }

        /* Scroll arrows */
        .hww-scroll-controls {
             display: flex;
             justify-content: center;
             gap: 1rem;
             margin-top: 2rem;
        }

        .hww-scroll-btn {
             width: 50px;
             height: 50px;
             background: var(--glass-bg);
             border: 1px solid var(--glass-border);
             border-radius: 14px;
             color: var(--text-primary);
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: all 0.3s;
             font-size: 1.2rem;
        }

        .hww-scroll-btn:hover {
             background: var(--primary);
             border-color: var(--primary);
             box-shadow: var(--glow-primary);
        }

        /* SERVICES */
        .services-section {
             background: var(--bg-primary);
        }

        .services-filter-bar {
             display: flex;
             justify-content: center;
             gap: 0.8rem;
             margin-bottom: 3rem;
             flex-wrap: wrap;
        }

        .svc-filter-btn {
             background: rgba(255, 255, 255, 0.04);
             border: 1px solid var(--border-color);
             color: var(--text-muted);
             padding: 0.55rem 1.5rem;
             border-radius: 50px;
             cursor: pointer;
             font-weight: 600;
             font-size: 0.85rem;
             transition: all 0.3s;
        }

        .svc-filter-btn:hover,
        .svc-filter-btn.active {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: #fff;
             border-color: transparent;
             box-shadow: var(--glow-primary);
        }

        .services-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 1.8rem;
        }

        @media (max-width: 992px) {
             .services-grid {
                  grid-template-columns: repeat(2, 1fr);
             }
        }

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

        .service-card {
             background: var(--glass-bg);
             backdrop-filter: blur(15px);
             border: 1px solid var(--glass-border);
             border-radius: 24px;
             padding: 2.2rem;
             transition: all 0.4s var(--ease-out);
             position: relative;
             overflow: hidden;
             display: flex;
             flex-direction: column;
             height: 100%;
        }

        .service-card::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 4px;
             background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
             transform: scaleX(0);
             transform-origin: left;
             transition: transform 0.4s var(--ease-out);
        }

        [dir="rtl"] .service-card::before {
             transform-origin: right;
        }

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

        .service-card:hover {
             transform: translateY(-12px);
             border-color: rgba(37, 99, 235, 0.3);
             box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5), var(--glow-primary);
        }

        .service-card-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin-bottom: 1.2rem;
        }

        .service-number {
             font-weight: 700;
             color: var(--text-dim);
             border: 1px solid var(--border-color);
             padding: 0.2rem 0.7rem;
             border-radius: 20px;
        }

        .service-icon {
             width: 55px;
             height: 55px;
             background: rgba(37, 99, 235, 0.08);
             border-radius: 16px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: var(--secondary);
             font-size: 1.5rem;
             transition: all 0.4s var(--ease-bounce);
        }

        .service-card:hover .service-icon {
             transform: scale(1.15) rotate(5deg);
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: #fff;
             box-shadow: var(--glow-secondary);
        }

        .service-title {
             font-size: 1.2rem;
             font-weight: 700;
             margin-bottom: 0.6rem;
             line-height: 1.3;
        }

        .service-desc {
             color: var(--text-muted);
             margin-bottom: 1.2rem;
             line-height: 1.7;
             flex: 1;
        }

        .service-tags {
             display: flex;
             gap: 0.4rem;
             flex-wrap: wrap;
             margin-bottom: 1.2rem;
        }

        .service-tag {
             background: rgba(6, 182, 212, 0.08);
             color: var(--secondary);
             padding: 0.2rem 0.6rem;
             border-radius: 6px;
             font-size: 0.72rem;
             font-weight: 600;
        }

        .service-card-actions {
             display: flex;
             gap: 0.8rem;
             margin-top: auto;
        }

        .btn-read-more {
             flex: 1;
             padding: 0.65rem 1rem;
             background: rgba(255, 255, 255, 0.05);
             border: 1px solid var(--border-color);
             color: var(--text-primary);
             border-radius: 12px;
             font-weight: 600;
             font-size: 0.88rem;
             transition: all 0.3s;
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 0.4rem;
             cursor: pointer;
        }

        .btn-read-more:hover {
             background: var(--primary);
             border-color: var(--primary);
             color: #fff;
             box-shadow: var(--glow-primary);
        }

        /* SERVICE MODAL */
        .modal-backdrop {
             position: fixed;
             inset: 0;
             background: rgba(0, 0, 0, 0.92);
             backdrop-filter: blur(20px);
             z-index: 99990;
             display: flex;
             align-items: center;
             justify-content: center;
             opacity: 0;
             visibility: hidden;
             transition: all 0.4s;
             padding: 1.5rem;
             overflow-y: auto;
        }

        .modal-backdrop.active {
             opacity: 1;
             visibility: visible;
        }

        .svc-modal {
             background: var(--bg-secondary);
             border: 1px solid var(--glass-border);
             border-radius: 28px;
             width: 100%;
             max-width: 850px;
             max-height: 90vh;
             overflow-y: auto;
             position: relative;
             transform: scale(0.9) translateY(30px);
             transition: transform 0.4s var(--ease-bounce);
        }

        .modal-backdrop.active .svc-modal {
             transform: scale(1) translateY(0);
        }

        .svc-modal-close {
             position: absolute;
             left: 0;
             top: 1rem;
             width: 42px;
             height: 42px;
             background: rgba(0, 0, 0, 0.6);
             backdrop-filter: blur(10px);
             border: 1px solid var(--border-color);
             border-radius: 12px;
             color: var(--text-primary);
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             font-size: 1.2rem;
             transition: all 0.3s;
             z-index: 10;
             float: left;
             margin: 1rem;
        }

        [dir="ltr"] .svc-modal-close {
             float: right;
        }

        .svc-modal-close:hover {
             background: var(--danger);
             border-color: var(--danger);
             color: #fff;
        }

        .svc-modal-hero {
             height: 250px;
             position: relative;
             overflow: hidden;
             border-radius: 28px 28px 0 0;
        }

        .svc-modal-hero img {
             width: 100%;
             height: 100%;
             object-fit: cover;
        }

        .svc-modal-hero-overlay {
             position: absolute;
             inset: 0;
             background: linear-gradient(to top, var(--bg-secondary) 0%, rgba(6, 10, 20, 0.4) 50%, transparent 100%);
             display: flex;
             flex-direction: column;
             justify-content: center;
             padding: 2rem;
        }

        .svc-modal-category {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
             background: rgba(6, 182, 212, 0.15);
             color: var(--secondary);
             padding: 0.3rem 1rem;
             border-radius: 20px;
             font-size: 0.8rem;
             font-weight: 600;
             margin: auto;
             width: fit-content;
             margin-bottom: 0.8rem;
        }

        .svc-modal-title {
             font-size: 2rem;
             font-weight: 800;
             line-height: 1.2;
             margin: 0 auto;
             margin-bottom: 0.5rem;
        }

        .svc-modal-body {
             padding: 2rem 2.5rem 2.5rem;
        }

        .svc-modal-desc {
             color: var(--text-muted);
             font-size: 1rem;
             line-height: 1.8;
             margin-bottom: 2rem;
        }

        .svc-modal-section {
             margin-bottom: 2rem;
        }

        .svc-modal-section-title {
             font-size: 1.2rem;
             font-weight: 700;
             margin-bottom: 1rem;
             display: flex;
             align-items: center;
             gap: 0.5rem;
        }

        .svc-modal-section-title i {
             color: var(--secondary);
        }

        .svc-includes-list {
             list-style: none;
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 0.8rem;
        }

        @media (max-width: 768px) {
             .svc-includes-list {
                  grid-template-columns: 1fr;
             }
        }

        .svc-includes-list li {
             display: flex;
             align-items: flex-start;
             gap: 0.6rem;
             padding: 0.8rem;
             background: var(--glass-bg);
             border: 1px solid var(--glass-border);
             border-radius: 12px;
             font-size: 0.9rem;
             color: var(--text-secondary);
        }

        .svc-includes-list li i {
             color: var(--success);
             font-size: 1rem;
             margin-top: 0.1rem;
             flex-shrink: 0;
        }

        .svc-tech-grid {
             display: flex;
             gap: 0.6rem;
             flex-wrap: wrap;
        }

        .svc-tech-badge {
             background: rgba(37, 99, 235, 0.08);
             border: 1px solid rgba(37, 99, 235, 0.2);
             padding: 0.4rem 0.9rem;
             border-radius: 10px;
             font-size: 0.82rem;
             color: var(--primary-light);
             font-weight: 600;
             display: flex;
             align-items: center;
             gap: 0.4rem;
        }

        .svc-skills-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 0.8rem;
        }

        @media (max-width: 576px) {
             .svc-skills-grid {
                  grid-template-columns: 1fr;
             }
        }

        .svc-skill-item {
             background: var(--glass-bg);
             border: 1px solid var(--glass-border);
             border-radius: 12px;
             padding: 1rem;
             text-align: center;
        }

        .svc-skill-name {
             font-weight: 700;
             font-size: 0.9rem;
             margin-bottom: 0.3rem;
        }

        .svc-skill-bar {
             height: 5px;
             background: var(--bg-tertiary);
             border-radius: 10px;
             overflow: hidden;
             margin-top: 0.5rem;
        }

        .svc-skill-fill {
             height: 100%;
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             border-radius: 10px;
             box-shadow: var(--glow-primary);
        }

        .svc-examples-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 1rem;
        }

        @media (max-width: 576px) {
             .svc-examples-grid {
                  grid-template-columns: 1fr;
             }
        }

        .svc-example-item {
             border-radius: 14px;
             overflow: hidden;
             border: 1px solid var(--glass-border);
             aspect-ratio: 4/3;
             position: relative;
        }

        .svc-example-item img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             transition: transform 0.4s;
        }

        .svc-example-item:hover img {
             transform: scale(1.1);
        }

        .svc-example-overlay {
             position: absolute;
             inset: 0;
             background: linear-gradient(to top, rgba(6, 10, 20, 0.9), transparent);
             display: flex;
             align-items: flex-end;
             padding: 0.8rem;
             opacity: 0;
             transition: opacity 0.3s;
        }

        .svc-example-item:hover .svc-example-overlay {
             opacity: 1;
        }

        .svc-example-name {
             font-size: 0.8rem;
             font-weight: 600;
        }

        .svc-modal-cta {
             background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.1));
             border: 1px solid rgba(6, 182, 212, 0.25);
             border-radius: 18px;
             padding: 2rem;
             text-align: center;
             margin-top: 2rem;
        }

        .svc-modal-cta-title {
             font-size: 1.3rem;
             font-weight: 700;
             margin-bottom: 0.5rem;
        }

        .svc-modal-cta-desc {
             color: var(--text-muted);
             margin-bottom: 1.5rem;
             font-size: 0.95rem;
        }

        .btn-order-svc {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: #fff;
             padding: 0.9rem 2.5rem;
             border-radius: 14px;
             font-weight: 700;
             font-size: 1rem;
             border: none;
             box-shadow: var(--glow-primary);
             transition: all 0.3s;
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
             cursor: pointer;
        }

        .btn-order-svc:hover {
             transform: translateY(-3px);
             box-shadow: 0 10px 40px var(--primary-glow);
        }

        /* PORTFOLIO */
        .portfolio-section {
             background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
        }

        .portfolio-filters {
             display: flex;
             justify-content: center;
             gap: 0.8rem;
             margin-bottom: 3rem;
             flex-wrap: wrap;
        }

        .filter-btn {
             background: rgba(255, 255, 255, 0.04);
             border: 1px solid var(--border-color);
             color: var(--text-muted);
             padding: 0.55rem 1.5rem;
             border-radius: 50px;
             cursor: pointer;
             font-weight: 600;
             font-size: 0.88rem;
             transition: all 0.3s;
        }

        .filter-btn:hover,
        .filter-btn.active {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: #fff;
             border-color: transparent;
             box-shadow: var(--glow-primary);
        }

        .portfolio-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 1.8rem;
        }

        @media (max-width: 992px) {
             .portfolio-grid {
                  grid-template-columns: repeat(2, 1fr);
             }
        }

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

        .portfolio-item {
             position: relative;
             border-radius: 20px;
             overflow: hidden;
             height: 300px;
             cursor: pointer;
        }

        .portfolio-item img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             transition: transform 0.6s var(--ease-out);
        }

        .portfolio-item:hover img {
             transform: scale(1.1);
        }

        .portfolio-overlay {
             position: absolute;
             inset: 0;
             background: linear-gradient(to top, rgba(6, 10, 20, 0.95) 0%, rgba(6, 10, 20, 0.3) 50%, transparent 100%);
             display: flex;
             flex-direction: column;
             justify-content: flex-end;
             padding: 2rem;
             opacity: 0;
             transform: translateY(15px);
             transition: all 0.4s var(--ease-out);
        }

        .portfolio-item:hover .portfolio-overlay {
             opacity: 1;
             transform: translateY(0);
        }

        .portfolio-cat {
             color: var(--secondary);
             font-size: 0.78rem;
             font-weight: 700;
             text-transform: uppercase;
             letter-spacing: 1px;
             margin-bottom: 0.4rem;
        }

        .portfolio-title {
             font-size: 1.2rem;
             font-weight: 700;
             margin-bottom: 1rem;
        }

        .portfolio-btn {
             width: 48px;
             height: 48px;
             background: var(--primary);
             border-radius: 14px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: #fff;
             font-size: 1.1rem;
             transition: all 0.3s var(--ease-bounce);
        }

        .portfolio-btn:hover {
             background: var(--secondary);
             transform: scale(1.1);
        }

        /* PORTFOLIO MODAL */
        .pm-backdrop {
             position: fixed;
             inset: 0;
             background: rgba(0, 0, 0, 0.95);
             backdrop-filter: blur(20px);
             z-index: 99990;
             display: flex;
             align-items: center;
             justify-content: center;
             opacity: 0;
             visibility: hidden;
             transition: all 0.4s;
             padding: 1.5rem;
        }

        .pm-backdrop.active {
             opacity: 1;
             visibility: visible;
        }

        .pm-modal {
             background: var(--bg-secondary);
             border: 1px solid var(--glass-border);
             border-radius: 28px;
             width: 100%;
             max-width: 780px;
             max-height: 92vh;
             overflow-y: auto;
             position: relative;
             transform: scale(0.9) translateY(30px);
             transition: transform 0.4s var(--ease-bounce);
        }

        .pm-backdrop.active .pm-modal {
             transform: scale(1) translateY(0);
        }

        .pm-close {
             position: sticky;
             top: 1rem;
             width: 42px;
             height: 42px;
             background: rgba(0, 0, 0, 0.6);
             backdrop-filter: blur(10px);
             border: 1px solid var(--border-color);
             border-radius: 12px;
             color: var(--text-primary);
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             font-size: 1.2rem;
             transition: all 0.3s;
             z-index: 10;
             float: left;
             margin: 1rem;
        }

        [dir="ltr"] .pm-close {
             float: right;
        }

        .pm-close:hover {
             background: var(--danger);
             border-color: var(--danger);
             color: #fff;
        }

        .pm-img-container {
             position: relative;
             width: 100%;
             height: 450px;
             overflow: hidden;
             border-radius: 28px 28px 0 0;
             cursor: ns-resize;
        }

        @media (max-width: 768px) {
             .pm-img-container {
                  height: 320px;
             }
        }

        .pm-img-container .pm-img {
             width: 100%;
             position: absolute;
             top: 0;
             left: 0;
             will-change: transform;
             transition: transform 0s linear;
             pointer-events: none;
        }

        .pm-scroll-progress {
             position: absolute;
             top: 0;
             left: 0;
             height: 4px;
             background: linear-gradient(90deg, var(--secondary), var(--accent));
             width: 0%;
             z-index: 5;
             box-shadow: 0 0 15px var(--secondary);
             transition: width 0.1s linear;
        }

        .pm-hover-hint {
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             height: 130px;
             background: linear-gradient(to top, rgba(6, 10, 20, 0.92) 0%, rgba(6, 10, 20, 0.5) 40%, transparent 100%);
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: flex-end;
             padding-bottom: 1.5rem;
             pointer-events: none;
             opacity: 1;
             transition: opacity 0.4s;
             z-index: 4;
        }

        .pm-hover-hint.hidden {
             opacity: 0;
        }

        .pm-hover-icon {
             width: 44px;
             height: 44px;
             border: 2px solid var(--secondary);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             margin-bottom: 0.6rem;
             animation: pmBounce 1.5s ease-in-out infinite;
             color: var(--secondary);
             font-size: 1.3rem;
        }

        @keyframes pmBounce {

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

             50% {
                  transform: translateY(12px);
                  opacity: 0.4;
             }
        }

        .pm-hover-text {
             color: var(--text-primary);
             font-size: 0.85rem;
             font-weight: 600;
             opacity: 0.85;
             text-align: center;
        }

        .pm-body {
             padding: 2rem 2.5rem 2.5rem;
        }

        .pm-title {
             font-size: 1.7rem;
             font-weight: 800;
             margin-bottom: 0.8rem;
             line-height: 1.3;
        }

        .pm-desc {
             color: var(--text-muted);
             font-size: 0.95rem;
             line-height: 1.8;
             margin-bottom: 1.5rem;
        }

        .pm-tech-stack {
             display: flex;
             gap: 0.6rem;
             flex-wrap: wrap;
             margin: 1.5rem 0;
        }

        .pm-tech-badge {
             background: rgba(37, 99, 235, 0.08);
             border: 1px solid rgba(37, 99, 235, 0.2);
             padding: 0.35rem 0.9rem;
             border-radius: 8px;
             font-size: 0.82rem;
             color: var(--primary-light);
             font-weight: 600;
        }

        .pm-stats-row {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 1rem;
             margin-top: 1.5rem;
             padding-top: 1.5rem;
             border-top: 1px solid var(--border-color);
        }

        @media (max-width: 576px) {
             .pm-stats-row {
                  grid-template-columns: 1fr;
             }
        }

        .pm-stat-box {
             text-align: center;
             padding: 1rem;
             background: var(--glass-bg);
             border: 1px solid var(--glass-border);
             border-radius: 14px;
        }

        .pm-stat-num {
             font-size: 1.5rem;
             font-weight: 800;
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
        }

        .pm-stat-label {
             font-size: 0.78rem;
             color: var(--text-muted);
             margin-top: 0.2rem;
        }

        /* Tech Stack */
        .tech-section {
             padding: 4rem 0;
             overflow: hidden;
             background: var(--bg-primary);
        }

        .tech-track {
             display: flex;
             gap: 1.5rem;
             animation: techScroll 30s linear infinite;
             width: fit-content;
             padding: 20px;
        }

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

        @keyframes techScroll {
             0% {
                  transform: translateX(0);
             }

             100% {
                  transform: translateX(-50%);
             }
        }

        [dir="rtl"] .tech-track {
             animation-name: techScrollRTL;
        }

        @keyframes techScrollRTL {
             0% {
                  transform: translateX(0);
             }

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

        .tech-item {
             min-width: 170px;
             height: 90px;
             background: var(--glass-bg);
             border: 1px solid var(--glass-border);
             border-radius: 16px;
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 0.8rem;
             font-weight: 600;
             color: var(--text-muted);
             transition: all 0.3s;
             flex-shrink: 0;
        }

        .tech-item:hover {
             background: rgba(37, 99, 235, 0.1);
             border-color: var(--primary);
             color: var(--text-primary);
             transform: translateY(-5px);
             box-shadow: var(--glow-primary);
        }

        .tech-item-icon {
             font-size: 1.8rem;
        }

        /* Testimonials */
        .testimonials-section {
             background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
        }

        .testimonials-slider {
             max-width: 800px;
             margin: 0 auto;
             position: relative;
        }

        .testimonial-card {
             background: var(--glass-bg);
             backdrop-filter: blur(20px);
             border: 1px solid var(--glass-border);
             border-radius: 24px;
             padding: 3rem;
             text-align: center;
             position: relative;
        }

        .testimonial-card::before {
             content: '"';
             position: absolute;
             top: -15px;
             left: 50%;
             transform: translateX(-50%);
             font-size: 7rem;
             color: var(--glass-border);
             font-family: serif;
             line-height: 1;
             opacity: 0.2;
        }

        .testimonial-text {
             font-size: 1.15rem;
             line-height: 1.9;
             color: var(--text-primary);
             margin-bottom: 2rem;
             font-style: italic;
             position: relative;
             z-index: 1;
        }

        .testimonial-author {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 1.2rem;
        }

        .testimonial-avatar {
             width: 60px;
             height: 60px;
             border-radius: 50%;
             object-fit: cover;
             border: 3px solid var(--primary);
             box-shadow: var(--glow-primary);
        }

        .testimonial-info {
             text-align: right;
        }

        [dir="ltr"] .testimonial-info {
             text-align: left;
        }

        .testimonial-name {
             font-weight: 700;
             font-size: 1.05rem;
        }

        .testimonial-role {
             color: var(--text-muted);
             font-size: 0.85rem;
        }

        .testimonial-stars {
             color: var(--warning);
             font-size: 0.85rem;
             margin-bottom: 1rem;
             display: flex;
             justify-content: center;
             gap: 0.15rem;
        }

        .slider-controls {
             display: flex;
             justify-content: center;
             gap: 0.8rem;
             margin-top: 2.5rem;
             align-items: center;
        }

        .slider-btn {
             width: 50px;
             height: 50px;
             background: var(--glass-bg);
             border: 1px solid var(--glass-border);
             border-radius: 14px;
             color: var(--text-primary);
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             transition: all 0.3s;
             font-size: 1.1rem;
        }

        .slider-btn:hover {
             background: var(--primary);
             border-color: var(--primary);
             box-shadow: var(--glow-primary);
        }

        .slider-dots {
             display: flex;
             gap: 0.5rem;
        }

        .slider-dot {
             width: 10px;
             height: 10px;
             border-radius: 50%;
             background: var(--bg-tertiary);
             border: 2px solid var(--border-color);
             cursor: pointer;
             transition: all 0.3s;
        }

        .slider-dot.active {
             background: var(--primary);
             border-color: var(--primary);
             box-shadow: var(--glow-primary);
             transform: scale(1.2);
        }

        /* FAQ */
        .faq-section {
             background: var(--bg-secondary);
        }

        .faq-container {
             margin: 0 auto;
        }

        .faq-item {
             background: var(--glass-bg);
             backdrop-filter: blur(10px);
             border: 1px solid var(--glass-border);
             border-radius: 16px;
             margin-bottom: 1rem;
             overflow: hidden;
             transition: all 0.3s;
        }

        .faq-item.active {
             border-color: var(--primary);
             box-shadow: var(--glow-primary);
        }

        .faq-question {
             padding: 1.5rem;
             display: flex;
             justify-content: space-between;
             align-items: center;
             cursor: pointer;
             font-weight: 600;
             font-size: 1.05rem;
        }

        .faq-icon {
             width: 32px;
             height: 32px;
             background: rgba(37, 99, 235, 0.1);
             border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: var(--primary-light);
             transition: all 0.4s var(--ease-bounce);
             flex-shrink: 0;
        }

        .faq-item.active .faq-icon {
             transform: rotate(180deg);
             background: var(--primary);
             color: #fff;
        }

        .faq-answer {
             max-height: 0;
             overflow: hidden;
             transition: max-height 0.5s var(--ease-out), padding 0.5s var(--ease-out);
             padding: 0 1.5rem;
             color: var(--text-muted);
             line-height: 1.8;
        }

        .faq-item.active .faq-answer {
             max-height: 300px;
             padding: 0 1.5rem 1.5rem;
        }

        /* Contact */
        .contact-section {
             background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
        }

        .contact-wrapper {
             display: grid;
             grid-template-columns: 1fr 1.2fr;
             gap: 3rem;
             background: var(--glass-bg);
             backdrop-filter: blur(20px);
             border: 1px solid var(--glass-border);
             border-radius: 28px;
             padding: 3rem;
             box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5);
        }

        @media (max-width: 992px) {
             .contact-wrapper {
                  grid-template-columns: 1fr;
             }
        }

        .contact-info-title {
             font-size: 1.8rem;
             font-weight: 800;
             margin-bottom: 0.5rem;
        }

        .contact-info-desc {
             color: var(--text-muted);
             margin-bottom: 2rem;
        }

        .contact-item {
             display: flex;
             gap: 1rem;
             margin-bottom: 1.8rem;
        }

        .contact-item-icon {
             width: 50px;
             height: 50px;
             min-width: 50px;
             background: rgba(37, 99, 235, 0.08);
             border: 1px solid rgba(37, 99, 235, 0.15);
             border-radius: 14px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: var(--secondary);
             font-size: 1.3rem;
             transition: all 0.3s;
        }

        .contact-item:hover .contact-item-icon {
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: #fff;
             box-shadow: var(--glow-secondary);
        }

        .contact-item-label {
             color: var(--text-muted);
             font-size: 16px;
             margin-bottom: 0.2rem;
             font-weight: 600;
        }

        .contact-item-value {
             font-weight: 600;
             font-size: 0.95rem;
        }

        .contact-cta-box {
             background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.1));
             border: 1px solid rgba(6, 182, 212, 0.25);
             border-radius: 18px;
             padding: 1.8rem;
             margin-top: 2rem;
             text-align: center;
        }

        .contact-cta-title {
             font-weight: 700;
             color: var(--secondary);
             margin-bottom: 0.4rem;
        }

        .contact-cta-desc {
             color: var(--text-muted);
             font-size: 0.88rem;
             margin-bottom: 1rem;
        }

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

        @media (max-width: 576px) {
             .form-row {
                  grid-template-columns: 1fr;
             }
        }

        .form-group {
             margin-bottom: 1.5rem;
        }

        .form-group label {
             display: block;
             margin-bottom: 0.5rem;
             color: var(--text-secondary);
             font-weight: 600;
             font-size: 0.88rem;
        }

        .form-control {
             width: 100%;
             background: rgba(255, 255, 255, 0.04);
             border: 1px solid var(--border-color);
             border-radius: 14px;
             padding: 0.9rem 1.2rem;
             color: var(--text-primary);
             font-size: 0.95rem;
             transition: all 0.3s;
        }

        .form-control:focus {
             outline: none;
             border-color: var(--primary);
             background: rgba(255, 255, 255, 0.08);
             box-shadow: 0 0 20px rgba(37, 99, 235, 0.1);
        }

        /* عند الضغط أو الكتابة */
        .form-control:focus {
             /* background: #fff; */
             color: #fff;
             border-color: #fff;
             outline: none;
        }

        .form-select {
             --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

             display: block;
             width: 100%;
             padding: 0.9rem 1.2rem;
             padding-left: 2.5rem;

             font-size: 1rem;
             font-weight: 400;
             line-height: 1.5;

             color: #fff !important;

             appearance: none;

             background-color: rgba(255, 255, 255, 0.04);
             background-image: var(--bs-form-select-bg-img);
             background-repeat: no-repeat;
             background-position: left 1rem center;
             background-size: 16px 12px;

             border: 1px solid rgba(255, 255, 255, 0.15);
             border-radius: 14px;

             transition: all 0.3s ease;
        }

        /* عند الضغط */
        .form-select:focus {
             color: #fff !important;
             border-color: #fff;
             outline: none;
             box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
        }

        /* خيارات القائمة */
        .form-select option {
             color: #000000;
        }

        /* إذا فيه نص مكتوب */
        .form-control:not(:placeholder-shown) {
             /* background: #fff; */
             color: #fff;
        }

        .form-control::placeholder {
             color: var(--text-dim);
        }

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

        .form-select {
             appearance: none;
             background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394A3B8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
             background-repeat: no-repeat;
             background-position: left 1rem center;
             background-size: 20px;
        }

        [dir="ltr"] .form-select {
             background-position: right 1rem center;
        }

        .btn-submit {
             width: 100%;
             padding: 1.1rem;
             background: linear-gradient(135deg, var(--primary), var(--secondary));
             color: #fff;
             border: none;
             border-radius: 14px;
             font-weight: 700;
             font-size: 1.05rem;
             position: relative;
             overflow: hidden;
             box-shadow: var(--glow-primary);
             transition: all 0.3s;
        }

        .btn-submit::before {
             content: '';
             position: absolute;
             top: 0;
             left: -100%;
             width: 100%;
             height: 100%;
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
             transition: left 0.6s;
        }

        .btn-submit:hover::before {
             left: 100%;
        }

        .btn-submit:hover {
             transform: translateY(-3px);
             box-shadow: 0 10px 40px var(--primary-glow);
        }

        /* Footer */
        .footer {
             background: var(--bg-primary);
             padding-top: 5rem;
             position: relative;
        }

        .footer::before {
             content: '';
             position: absolute;
             top: 0;
             left: 50%;
             transform: translateX(-50%);
             width: 60%;
             height: 1px;
             background: linear-gradient(90deg, transparent, var(--primary), transparent);
             box-shadow: var(--glow-primary);
        }

        .footer-grid {
             display: grid;
             grid-template-columns: 1.5fr 1fr 1fr 1fr;
             gap: 3rem;
             margin-bottom: 4rem;
        }

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

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

        .footer-about-text {
             color: var(--text-muted);
             margin: 1.5rem 0;
             line-height: 1.8;
        }

        .footer-social {
             display: flex;
             gap: 0.7rem;
             margin-top: 1.5rem;
        }

        .footer-social a {
             width: 42px;
             height: 42px;
             background: rgba(255, 255, 255, 0.04);
             border: 1px solid var(--border-color);
             border-radius: 12px;
             display: flex;
             align-items: center;
             justify-content: center;
             color: var(--text-muted);
             font-size: 1.1rem;
             transition: all 0.3s;
        }

        .footer-social a:hover {
             background: var(--primary);
             border-color: var(--primary);
             color: #fff;
             transform: translateY(-3px);
             box-shadow: var(--glow-primary);
        }

        .footer-heading {
             font-weight: 700;
             font-size: 1.15rem;
             margin-bottom: 1.5rem;
             position: relative;
             padding-bottom: 0.8rem;
        }

        .footer-heading::after {
             content: '';
             position: absolute;
             bottom: 0;
             left: 0;
             width: 35px;
             height: 3px;
             background: linear-gradient(90deg, var(--primary), var(--secondary));
             border-radius: 3px;
        }

        [dir="rtl"] .footer-heading::after {
             left: auto;
             right: 0;
        }

        .footer-links li {
             margin-bottom: 0.7rem;
        }

        .footer-links a {
             color: var(--text-muted);
             transition: all 0.3s;
             display: inline-block;
        }

        .footer-links a:hover {
             color: var(--secondary);
             transform: translateX(8px);
        }

        [dir="rtl"] .footer-links a:hover {
             transform: translateX(-8px);
        }

        .footer-newsletter {
             display: flex;
             gap: 0.5rem;
             margin-top: 1rem;
        }

        .footer-newsletter input {
             flex: 1;
             background: rgba(255, 255, 255, 0.04);
             border: 1px solid var(--border-color);
             border-radius: 12px;
             padding: 0.75rem 1rem;
             text-align: right;
             color: var(--text-primary);
        }

        .footer-newsletter input:focus {
             outline: none;
             border-color: var(--primary);
        }

        .footer-newsletter button {
             background: var(--primary);
             border: none;
             color: #fff;
             padding: 0 1.2rem;
             border-radius: 12px;
             cursor: pointer;
             transition: all 0.3s;
        }

        .footer-newsletter button:hover {
             background: var(--secondary);
        }

        .footer-bottom {
             border-top: 1px solid var(--border-color);
             padding: 1.5rem 0;
             display: flex;
             font-weight: 600;
             justify-content: space-between;
             align-items: center;
             flex-wrap: wrap;
             gap: 1rem;
             color: var(--text-muted);
             font-size: 0.88rem;
        }

        .footer-bottom-links {
             display: flex;
             gap: 1.5rem;
        }

        .footer-bottom-links a:hover {
             color: var(--secondary);
        }

        .back-to-top {
             position: fixed;
             bottom: 2rem;
             right: 2rem;
             width: 50px;
             height: 50px;
             background: var(--glass-bg);
             backdrop-filter: blur(10px);
             border: 1px solid var(--glass-border);
             border-radius: 14px;
             color: var(--secondary);
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             opacity: 0;
             transform: translateY(25px);
             transition: all 0.4s var(--ease-out);
             z-index: 9980;
             font-size: 1.1rem;
        }

        [dir="rtl"] .back-to-top {
             right: auto;
             left: 2rem;
        }

        .back-to-top.visible {
             opacity: 1;
             transform: translateY(0);
        }

        .back-to-top:hover {
             background: var(--primary);
             color: #fff;
             transform: translateY(-5px);
             box-shadow: var(--glow-primary);
        }

        .reveal {
             opacity: 0;
             transform: translateY(50px);
             transition: all 0.8s var(--ease-out);
        }

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

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

        .reveal-delay-2 {
             transition-delay: 0.2s;
        }

        .reveal-delay-3 {
             transition-delay: 0.3s;
        }

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

        .reveal-delay-5 {
             transition-delay: 0.5s;
        }

        .reveal-delay-6 {
             transition-delay: 0.6s;
        }

        @media (max-width: 992px) {
             .nav-links {
                  display: none;
             }

             .hamburger {
                  display: flex;
             }

             .hero-inner {
                  grid-template-columns: 1fr;
             }

             .hero-content {
                  text-align: center;
             }

             .hero-text {
                  margin: 0 auto 2.5rem;
             }

             .hero-btns {
                  justify-content: center;
             }

             .hero-metrics {
                  justify-content: center;
             }

             .hero-visual {
                  display: none;
             }
        }

        @media (max-width: 768px) {
             .section-title {
                  font-size: 2.2rem;
             }

             .section-pad {
                  padding: 4rem 0;
             }

             .navbar-main {
                  padding: 0.8rem 1rem;
             }

             .svc-modal-hero {
                  height: 200px;
             }

             .svc-modal-body {
                  padding: 1.5rem;
             }

             .svc-modal-title {
                  font-size: 1.5rem;
             }
        }

        @media (max-width: 576px) {
             .nav-actions a {
                  display: none
             }

             .hero-heading {
                  font-size: 2.5rem;
             }

             .contact-wrapper {
                  padding: 1rem
             }

             .footer-bottom {
                  justify-content: center;
             }

             .hero {
                  padding: 10rem 0 4rem;
             }

             .brand {
                  width: 90px;
             }

             .hero-metrics {
                  display: none;
                  flex-direction: column;
                  gap: 1rem;
             }
        }
        .whatsapp-float{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height:50px;
    background: #25D366;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    transition: all 0.3s ease;
}

.whatsapp-float:hover{
    transform: scale(1.1);
    background: #20ba5a;
}

@media (max-width:768px){
    .whatsapp-float{
        width: 55px;
        height: 55px;
        right: 15px;
        bottom: 15px;
    }

    .whatsapp-float svg{
        width: 24px;
        height: 24px;
    }
}