@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

:root {
    --bg-primary: #ffffff; /* Clean white background */
    --bg-secondary: #f6f4fc; /* Very light cool grey-lavender, tinted with the new purple */
    --bg-card: #ffffff; /* Card background is pure white */
    --accent: #532494; /* Custom Purple (brand color #532494) */
    --accent-hover: #421b77;
    --accent-orange: #ff6a00; /* Vibrant Orange for pop highlights */
    --accent-orange-hover: #e05c00;
    --purple-neon: #8c5be8; /* Matching lighter purple */
    --purple-glow: rgba(83, 36, 148, 0.08);
    --orange-glow: rgba(255, 106, 0, 0.06);
    --text-primary: #0f172a; /* Slate 900 for dark readable headings */
    --text-secondary: #5c5f79; /* Muted slate gray for body descriptions */
    --border: #e2e0f0; /* Light purple-lavender-gray border */
    --card-shadow: 0 10px 30px rgba(83, 36, 148, 0.04), 0 1px 3px rgba(83, 36, 148, 0.02);
}

/* Arabic font — load from local files */
@font-face {
    font-family: "Tajawal";
    src: url("../assets/fonts/Tajawal-ExtraLight.ttf") format("truetype");
    font-weight: 200;
}
@font-face {
    font-family: "Tajawal";
    src: url("../assets/fonts/Tajawal-Light.ttf") format("truetype");
    font-weight: 300;
}
@font-face {
    font-family: "Tajawal";
    src: url("../assets/fonts/Tajawal-Regular.ttf") format("truetype");
    font-weight: 400;
}
@font-face {
    font-family: "Tajawal";
    src: url("../assets/fonts/Tajawal-Medium.ttf") format("truetype");
    font-weight: 500;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Space Grotesk', sans-serif;
    overflow-x: hidden;
    position: relative;
}

html[dir="rtl"] body {
    font-family: 'Tajawal', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
    font-family: 'Tajawal', sans-serif;
    letter-spacing: normal;
}

p {
    color: var(--text-secondary);
}

/* Tech Grid Overlay */
.tech-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center top;
    pointer-events: none;
    z-index: 1;
}

.tech-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, transparent 40%, var(--bg-primary) 80%);
}

/* Navbar */
.navbar {
    background-color: transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 1.8rem 0;
    z-index: 1030;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    box-shadow: 0 10px 30px rgba(67, 56, 202, 0.05);
}

.nav-link {
    color: var(--text-primary) !important;
    font-weight: 500;
    position: relative;
    padding: 0.5rem 1.2rem;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background-color: var(--accent);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(-50%);
}

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

.nav-link.active {
    color: var(--accent) !important;
    font-weight: 600;
}

.nav-link:hover {
    color: var(--accent) !important;
}

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

.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.text-accent {
    background: linear-gradient(135deg, var(--accent) 30%, var(--accent-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Hologram Projector Effect */
.hologram-wrapper {
    position: relative;
    width: 100%;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.phone-outline {
    position: absolute;
    bottom: 20px;
    width: 260px;
    height: 50px;
    background: #ffffff;
    border: 2px solid var(--border);
    border-radius: 20px;
    box-shadow: 
        0 10px 25px rgba(83, 36, 148, 0.08),
        inset 0 0 10px rgba(83, 36, 148, 0.05);
    transform: perspective(600px) rotateX(60deg) rotateY(0deg) rotateZ(-10deg);
    animation: phonePulse 4s infinite alternate;
}

.phone-screen-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(140, 91, 232, 0.2) 0%, transparent 70%);
    bottom: 0px;
    border-radius: 50%;
    pointer-events: none;
    animation: screenGlow 4s infinite alternate;
}

.hologram-beam {
    position: absolute;
    bottom: 45px;
    width: 180px;
    height: 300px;
    background: linear-gradient(to top, rgba(140, 91, 232, 0.2) 0%, rgba(140, 91, 232, 0.02) 50%, transparent 100%);
    clip-path: polygon(20% 100%, 80% 100%, 100% 0, 0 0);
    transform: perspective(600px) rotateX(15deg);
    transform-origin: bottom center;
    pointer-events: none;
    opacity: 0.8;
}

.digital-city {
    position: absolute;
    width: 220px;
    height: 260px;
    bottom: 60px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 240"><path d="M10 240 L10 120 L30 120 L30 240 M35 240 L35 80 L55 80 L55 240 M60 240 L60 160 L75 160 L75 240 M80 240 L80 40 L100 40 L100 240 M105 240 L105 90 L125 90 L125 240 M130 240 L130 140 L145 140 L145 240 M150 240 L150 70 L170 70 L170 240 M175 240 L175 130 L190 130 L190 240" fill="none" stroke="%23532494" stroke-width="1.5" opacity="0.65"/><line x1="90" y1="40" x2="90" y2="10" stroke="%23532494" stroke-width="1.5"/><circle cx="90" cy="8" r="2.5" fill="%23ff6a00" class="neon-blink"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    filter: drop-shadow(0 0 15px rgba(83, 36, 148, 0.35));
    animation: cityFloat 5s ease-in-out infinite alternate;
}

.hologram-node {
    position: absolute;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 4px 15px rgba(83, 36, 148, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.hologram-node i {
    font-size: 1.2rem;
    color: var(--accent-orange);
    margin-bottom: 2px;
}

.hologram-node:hover {
    transform: scale(1.15) !important;
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(83, 36, 148, 0.25);
}

.hologram-node:hover i {
    color: #ffffff;
}

.node-1 { top: 70px; left: 10%; animation: nodeFloat1 6s ease-in-out infinite alternate; }
.node-2 { top: 40px; right: 12%; animation: nodeFloat2 5.5s ease-in-out infinite alternate; }
.node-3 { top: 180px; left: 2%; animation: nodeFloat3 6.5s ease-in-out infinite alternate; }
.node-4 { top: 160px; right: 5%; animation: nodeFloat4 5s ease-in-out infinite alternate; }
.node-5 { top: 290px; left: 12%; animation: nodeFloat1 7s ease-in-out infinite alternate; }
.node-6 { top: 270px; right: 15%; animation: nodeFloat2 6.2s ease-in-out infinite alternate; }

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-orange) 100%);
    border: none;
    color: #fff;
    border-radius: 6px;
    padding: 0.6rem 1.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(255, 106, 0, 0.15);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-orange-hover) 100%);
    box-shadow: 0 6px 20px rgba(255, 106, 0, 0.25);
    color: #fff;
}

.btn-outline-primary {
    color: var(--accent);
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    background: #e6e6fa;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-outline-primary:hover {
    color: var(--accent-hover);
    background: #d8d8f6;
    transform: translateY(-2px);
}

/* Card Style */
.card-tech {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3rem 2rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.card-tech::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-orange), transparent);
    transform: scaleX(0);
    transition: transform 0.5s ease;
}

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

.card-tech:hover {
    border-color: var(--accent);
    box-shadow: 0 15px 35px rgba(83, 36, 148, 0.08);
    transform: translateY(-5px);
}

.card-icon {
    font-size: 1.5rem;
    color: var(--accent-orange);
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: rgba(255, 106, 0, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.8rem;
    transition: all 0.4s ease;
}

.card-tech:hover .card-icon {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-orange) 100%);
    color: #ffffff;
    transform: scale(1.05) rotate(3deg);
}

/* Dynamic Ambient Glows */
.orange-blob {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--orange-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.purple-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--purple-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Sections */
section {
    padding: 7rem 0;
    position: relative;
    z-index: 2;
}

.bg-secondary-section {
    background-color: var(--bg-secondary);
}

/* Home — Why iNote: compact card-tech on lavender section */
.section-why-us .card-tech--compact {
    padding: 2rem 1.5rem;
}

.section-why-us .card-tech--compact .card-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

.section-why-us .card-tech--compact h3 {
    color: var(--text-primary);
}

/* Home — Services: same card-tech as rest of site */
.section-home-services {
    background: var(--bg-primary);
}

.section-label {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: rgba(255, 106, 0, 0.05);
    color: var(--accent-orange);
    border: 1px solid rgba(255, 106, 0, 0.1);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* Eatic / Notex ERP Custom Stylings */
.highlight-product {
    font-size: 3rem;
    background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.card-tech .highlight-product {
    letter-spacing: -1px;
}

/* Stats Section */
.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent-orange);
    margin-bottom: 0.5rem;
}

.stat-number span {
    background: linear-gradient(135deg, var(--accent) 40%, var(--accent-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Footer */
.footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 2.5rem 0 1.25rem;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.footer-compact .footer-logo {
    max-width: 120px;
    height: auto;
    margin-bottom: 0.5rem;
}

.footer-heading {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

.footer-link {
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--accent);
}

.footer-bottom {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.footer-copy {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.footer-legal a {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: var(--accent);
}

.back-to-top {
    position: fixed;
    bottom: 100px;
    right: 30px;
    z-index: 99;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(83, 36, 148, 0.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top:hover {
    transform: translateY(-3px);
}

html[dir="rtl"] .back-to-top {
    right: auto;
    left: 30px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-primary);
    margin-right: 0.6rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--border);
}

.social-icon:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 15px rgba(255, 94, 0, 0.4);
    transform: translateY(-4px);
}

/* Scroll reveal classes */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Hologram Keyframe Animations */
@keyframes phonePulse {
    0% {
        box-shadow: 
            0 0 25px rgba(157, 78, 221, 0.2),
            inset 0 0 10px rgba(157, 78, 221, 0.1);
        transform: perspective(600px) rotateX(60deg) rotateY(0deg) rotateZ(-10deg) translateY(0);
    }
    100% {
        box-shadow: 
            0 0 45px rgba(157, 78, 221, 0.4),
            inset 0 0 20px rgba(157, 78, 221, 0.3);
        transform: perspective(600px) rotateX(60deg) rotateY(0deg) rotateZ(-10deg) translateY(-5px);
    }
}

@keyframes screenGlow {
    0% { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 0.85; transform: scale(1.1); }
}

@keyframes cityFloat {
    0% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 15px rgba(157, 78, 221, 0.5));
    }
    100% {
        transform: translateY(-10px) scale(1.02);
        filter: drop-shadow(0 0 25px rgba(157, 78, 221, 0.75));
    }
}

@keyframes nodeFloat1 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-15px) rotate(3deg); }
}

@keyframes nodeFloat2 {
    0% { transform: translateY(0px) rotate(0deg); }
    100% { transform: translateY(-12px) rotate(-4deg); }
}

@keyframes nodeFloat3 {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-18px); }
}

@keyframes nodeFloat4 {
    0% { transform: translateY(0px); }
    100% { transform: translateY(-10px); }
}

/* Hologram Scanning Line */
.hologram-beam::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, rgba(157, 78, 221, 0.8), transparent);
    animation: scanLine 3s linear infinite;
    pointer-events: none;
}

@keyframes scanLine {
    0% { top: 0%; }
    100% { top: 100%; }
}

/* Card Laser Scanner Effect */
.card-scanner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 10;
}

.card-tech:hover .card-scanner {
    opacity: 1;
    animation: cardScan 2s linear infinite;
}

@keyframes cardScan {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}

/* Product Dashboard HUD Visuals */
.product-hud {
    background: #f7f6fc;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.2rem;
    text-align: left;
    font-family: monospace;
    font-size: 0.85rem;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 15px rgba(67, 56, 202, 0.03);
    color: var(--text-secondary);
}

.product-hud::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(67, 56, 202, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(67, 56, 202, 0.02) 1px, transparent 1px);
    background-size: 15px 15px;
    pointer-events: none;
}

.hud-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--accent);
    font-weight: bold;
}

.hud-status {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
}

.hud-status.status-online i {
    color: #10b981;
    text-shadow: 0 0 5px rgba(16, 185, 129, 0.3);
    animation: beaconPulse 1.5s infinite alternate;
}

.hud-stat {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.hud-label {
    color: var(--text-secondary);
}

.hud-value {
    color: var(--text-primary);
    font-weight: bold;
}

@keyframes beaconPulse {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* Telemetry Dashboard Stats Layout */
.telemetry-panel {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(67, 56, 202, 0.03);
}

.telemetry-panel:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 25px rgba(67, 56, 202, 0.07);
}

.telemetry-meta {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--accent);
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--border);
    padding-bottom: 0.5rem;
}

.telemetry-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10b981;
    display: inline-block;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.4);
}

/* Call to Action Portal Backdrops */
.cta-portal-wrapper {
    position: relative;
    padding: 8rem 0;
    background: radial-gradient(circle at 50% 50%, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    border-top: 1px solid var(--border);
    overflow: hidden;
}

.cta-portal-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--purple-glow) 0%, transparent 60%);
    border: 1px dashed rgba(83, 36, 148, 0.12);
    border-radius: 50%;
    animation: rotatePortal 20s linear infinite;
    pointer-events: none;
}

.cta-portal-bg-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--orange-glow) 0%, transparent 60%);
    border: 1px solid rgba(255, 106, 0, 0.08);
    border-radius: 50%;
    animation: rotatePortalInverse 15s linear infinite;
    pointer-events: none;
}

@keyframes rotatePortal {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes rotatePortalInverse {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* 3D Tilt perspective config */
.js-tilt {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.js-tilt > * {
    transform: translateZ(20px);
}

/* Footer — logo + social */
.footer .container {
    position: relative;
    z-index: 2;
}

.footer-logo {
    display: block;
    max-width: 140px;
    width: auto;
    height: auto;
    max-height: 48px;
    object-fit: contain;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(67, 56, 202, 0.05);
    color: var(--accent);
    margin-right: 0.75rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(67, 56, 202, 0.1);
}

.social-icon:hover {
    background: var(--accent-orange);
    color: #fff;
    border-color: var(--accent-orange);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 106, 0, 0.25);
}


/* Inner Page Navbar Styling Override */
.inner-page .navbar {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 1rem 0 !important;
    box-shadow: 0 10px 30px rgba(83, 36, 148, 0.03) !important;
}

/* Scroll Progress Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-orange) 100%);
    z-index: 10000;
    pointer-events: none;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 8px rgba(255, 106, 0, 0.4);
}

/* Custom Cursor */
.cursor-dot, .cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    will-change: transform;
    opacity: 0;
}
.cursor-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent-orange);
    border-radius: 50%;
    transition: width 0.2s, height 0.2s, background-color 0.2s, opacity 0.2s;
}
.cursor-outline {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.25s, height 0.25s, opacity 0.2s;
}
.cursor-outline-inner {
    width: 100%;
    height: 100%;
    border: 1.5px dashed var(--accent);
    border-radius: 50%;
    animation: rotate-cursor 8s linear infinite;
    transition: border 0.25s, border-color 0.25s, background-color 0.25s;
}
@keyframes rotate-cursor {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Cursor Hover States */
.cursor-hover .cursor-dot {
    width: 10px;
    height: 10px;
    background-color: var(--accent);
}
.cursor-hover .cursor-outline {
    width: 58px;
    height: 58px;
}
.cursor-hover .cursor-outline-inner {
    border: 2px solid var(--accent-orange);
    background-color: rgba(255, 106, 0, 0.04);
}

/* Hide default cursor on devices that support hover */
@media (hover: hover) and (pointer: fine) {
    body, a, button, select, input, textarea, .btn, .nav-link, .social-icon, .card-tech {
        cursor: none !important;
    }
}

/* ============================================================
   MEGA MENU
============================================================ */
.mega-menu-parent { position: static !important; }

/* Invisible bridge so the pointer can reach the panel without losing hover */
.mega-menu-parent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0;
    background: transparent;
    pointer-events: none;
    z-index: 10000;
}

.mega-menu-parent:hover::after,
.mega-menu-parent.is-mega-open::after {
    height: 28px;
    pointer-events: auto;
}

.mega-dropdown {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    z-index: 9999;
    padding: 12px 0 8px;
    margin-top: 0;
    background: #ffffff;
    border-top: 3px solid var(--accent);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(83, 36, 148, 0.12);
    animation: megaFadeIn 0.2s ease;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}
/* Extra hit area above the panel */
.mega-dropdown::before {
    content: '';
    position: absolute;
    top: -28px;
    left: 0;
    right: 0;
    height: 28px;
    background: transparent;
}
@keyframes megaFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mega-menu-parent:hover .mega-dropdown,
.mega-menu-parent.is-mega-open .mega-dropdown {
    display: block;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.mega-menu-parent:hover .mega-chevron,
.mega-menu-parent.is-mega-open .mega-chevron {
    transform: rotate(180deg);
}

.mega-menu-parent > .nav-link.active {
    color: var(--accent) !important;
    font-weight: 600;
}

.mega-inner {
    display: flex;
    gap: 0;
    padding: 24px 0;
}

/* Sidebar */
.mega-sidebar {
    width: 220px;
    flex-shrink: 0;
    padding-right: 24px;
    border-right: 1px solid var(--border);
    margin-right: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
html[dir="rtl"] .mega-sidebar {
    padding-right: 0; padding-left: 24px;
    border-right: none; border-left: 1px solid var(--border);
    margin-right: 0; margin-left: 24px;
}
.mega-sidebar-title {
    font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--text-secondary); margin-bottom: 8px; margin-top: 0;
}
.mega-sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    font-size: 0.875rem; font-weight: 600;
    color: var(--text-secondary); text-decoration: none;
    transition: all 0.2s;
}
.mega-sidebar-link:hover,
.mega-sidebar-link.is-active {
    background: rgba(83, 36, 148, 0.07);
    color: var(--accent);
}
.mega-card.is-hidden {
    display: none !important;
}
.mega-grid.is-single {
    grid-template-columns: 1fr;
    max-width: 420px;
}
.mega-grid.is-duo {
    grid-template-columns: repeat(2, 1fr);
}
.mega-sidebar-link i { font-size: 1rem; color: var(--accent); }
.mega-view-all {
    display: inline-flex; align-items: center;
    font-size: 0.8rem; font-weight: 700;
    color: var(--accent-orange); text-decoration: none;
    padding: 8px 12px; border-radius: 8px;
    border: 1px solid rgba(255, 106, 0, 0.2);
    background: rgba(255, 106, 0, 0.04);
    transition: all 0.2s;
}
.mega-view-all:hover { background: rgba(255, 106, 0, 0.1); color: var(--accent-orange); }

/* Cards grid */
.mega-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    align-content: start;
}
.mega-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    text-decoration: none; transition: all 0.2s;
    border: 1px solid transparent;
}
.mega-card:hover {
    background: rgba(83, 36, 148, 0.05);
    border-color: var(--border);
}
.mega-card-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: rgba(83, 36, 148, 0.08);
    border: 1px solid rgba(83, 36, 148, 0.15);
    font-size: 1rem; color: var(--accent);
}
.mega-card-title {
    font-size: 0.85rem; font-weight: 700;
    color: var(--text-primary); line-height: 1.3; margin-bottom: 3px;
}
.mega-card:hover .mega-card-title { color: var(--accent); }
.mega-card-desc {
    font-size: 0.75rem; color: var(--text-secondary);
    line-height: 1.4;
}

/* Service details — balanced grid for 5 capability cards */
.capabilities-grid--5 .capabilities-grid__item:nth-child(4) {
    margin-inline-start: auto;
}
.capabilities-grid--5 .capabilities-grid__item:nth-child(5) {
    margin-inline-end: auto;
}
@media (min-width: 992px) {
    .capabilities-grid--5 {
        max-width: 920px;
        margin-inline: auto;
    }
    .capabilities-grid--5 .capabilities-grid__item {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}

/* ============================================================
   TESTIMONIALS
============================================================ */
.testimonials-section { overflow: hidden; padding: 80px 0; background: var(--bg-secondary); }
.testimonial-track {
    display: flex;
    gap: 24px;
    animation: scrollLeft 40s linear infinite;
    width: max-content;
}
.testimonial-track:hover { animation-play-state: paused; }
@keyframes scrollLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
html[dir="rtl"] .testimonial-track {
    animation: scrollRight 40s linear infinite;
}
@keyframes scrollRight {
    0%   { transform: translateX(0); }
    100% { transform: translateX(50%); }
}
.testimonial-card {
    width: 340px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--card-shadow);
    transition: box-shadow 0.3s;
}
.testimonial-card:hover {
    box-shadow: 0 10px 40px rgba(83, 36, 148, 0.1);
    border-color: rgba(83, 36, 148, 0.2);
}
.testimonial-stars { color: #f59e0b; letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-quote { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-orange));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1rem; color: #fff; flex-shrink: 0;
}
.testimonial-name { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 2px;}
.testimonial-role { font-size: 0.75rem; color: var(--text-secondary); }

/* ============================================================
   BLOG CATEGORY FILTER
============================================================ */
.blog-filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 100px;
    font-size: 0.875rem; font-weight: 600;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer; transition: all 0.25s;
    text-decoration: none;
}
.blog-filter-btn:hover,
.blog-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}
.blog-article-card { transition: opacity 0.3s, transform 0.3s; }
.blog-article-card.hidden { opacity: 0; pointer-events: none; display: none !important; }

/* ============================================================
   RESTORED UX & INTERACTIVE COMPONENTS
   (WhatsApp Float, Join Us Tabs, Checkboxes, Glassmorphism Forms)
============================================================ */

/* 1. Floating WhatsApp Widget */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    color: #ffffff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0px 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.whatsapp-float:hover {
    background-color: #128c7e;
    color: #ffffff;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0px 8px 25px rgba(37, 211, 102, 0.6);
}

/* RTL Specific placement */
html[dir="rtl"] .whatsapp-float {
    right: auto;
    left: 30px;
}

/* WhatsApp Tooltip */
.whatsapp-tooltip {
    visibility: hidden;
    width: 150px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 10000;
    right: 75px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.whatsapp-tooltip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
}

html[dir="rtl"] .whatsapp-tooltip {
    right: auto;
    left: 75px;
}

html[dir="rtl"] .whatsapp-tooltip::after {
    left: auto;
    right: 100%;
    border-color: transparent #333 transparent transparent;
}

.whatsapp-float:hover .whatsapp-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

/* 2. Join Us Tabs Navigation */
#joinTabs .nav-link {
    color: var(--text-secondary);
    border: none;
    padding: 12px 25px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

#joinTabs .nav-link.active {
    background: linear-gradient(135deg, var(--accent), var(--purple-neon)) !important;
    color: #ffffff !important;
    box-shadow: 0px 4px 15px rgba(83, 36, 148, 0.25);
}

#joinTabs .nav-link:hover:not(.active) {
    color: var(--accent);
    background: rgba(83, 36, 148, 0.05);
}

/* 3. Glassmorphism Forms & Inputs */
.bg-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.bg-glass-input {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(83, 36, 148, 0.35) !important; /* Clear brand purple border */
    transition: all 0.3s ease !important;
}

.bg-glass-input:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: var(--accent) !important; /* Highlight purple on hover */
}

.bg-glass-input:focus {
    background: rgba(255, 255, 255, 1) !important;
    border-color: var(--accent-orange) !important; /* Vibrant orange on focus */
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.2) !important; /* Glowing brand orange shadow */
    color: var(--text-primary) !important;
}

.bg-glass-input::placeholder {
    color: #94a3b8;
}

/* Custom Checkbox Tech Style */
.checkbox-tech-wrapper {
    position: relative;
}

.checkbox-tech-label {
    border: 1px solid var(--border) !important;
    background-color: rgba(255, 255, 255, 0.6) !important;
    color: var(--text-secondary) !important;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer;
}

.checkbox-tech-label i {
    font-size: 1.25rem;
    color: var(--text-secondary);
    transition: all 0.3s;
}

.btn-check:checked + .checkbox-tech-label {
    border-color: var(--accent) !important;
    background-color: rgba(83, 36, 148, 0.08) !important;
    color: var(--accent) !important;
    box-shadow: 0px 4px 12px rgba(83, 36, 148, 0.1) !important;
}

.btn-check:checked + .checkbox-tech-label i {
    color: var(--accent) !important;
    transform: scale(1.15);
}

.checkbox-tech-label:hover {
    border-color: var(--accent) !important;
    background-color: rgba(83, 36, 148, 0.03) !important;
    color: var(--accent) !important;
}

/* 4. Blog & Image Hover Scale Effect */
.hover-scale {
    overflow: hidden;
}

.hover-scale img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Form Validation feedback support */
.was-validated .form-control:invalid, 
.form-control.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1) !important;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: #198754 !important;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.1) !important;
}