/* Modern Design System - Premium "Apple-Style" Aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* Color Palette - Ultra Premium Black/White Theme */
    --bg-body: #050505;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-glass: rgba(20, 20, 20, 0.6);

    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-tertiary: #52525b;

    --brand-blue: #2997ff;
    /* Apple Blue style */
    --brand-purple: #bf5af2;
    --brand-gradient: linear-gradient(135deg, #2997ff 0%, #bf5af2 100%);

    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-highlight: rgba(255, 255, 255, 0.15);
    --line-color: rgba(255, 255, 255, 0.2);

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;
    --space-2xl: 12rem;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 9999px;

    /* Elevation */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 40px rgba(41, 151, 255, 0.15);

    /* Transitions */
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-spring: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    --duration-fast: 0.2s;
    --duration-normal: 0.4s;
    --duration-slow: 0.8s;
}

/* Light Mode Overrides (Clean, High Contrast) */
body.light-mode {
    --bg-body: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
    --bg-card: #ffffff;
    /* Apple light grey */
    --bg-glass: rgba(255, 255, 255, 0.8);

    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --text-tertiary: #d2d2d7;

    --border-subtle: rgba(0, 0, 0, 0.05);
    --border-highlight: rgba(0, 0, 0, 0.1);
    --line-color: rgba(0, 0, 0, 0.1);

    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
    width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
}

h1,
h2 {
    margin-bottom: var(--space-md);
}

h1 {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 600;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

section {
    position: relative;
    width: 100%;
    margin-bottom: var(--space-lg);
}

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

/* Remove bottom margin from last element to prevent spacing issues in cards */
*:last-child {
    margin-bottom: 0;
}

/* Utilities */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.section-padding {
    padding: var(--space-xl) 0;
}

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

.d-flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

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

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

/* Tooltip Utilities */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: help;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.tooltip-icon {
    color: var(--brand-blue);
    font-size: 1.5rem;
    /* Matches h2 scale slightly better */
    transition: transform 0.2s ease;
    opacity: 0.8;
}

.tooltip-container:hover .tooltip-icon {
    transform: scale(1.1);
    opacity: 1;
}

.tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* border: 1px solid var(--border-highlight); */
    border-radius: var(--radius-md);

    /* Content Centering with strong z-index */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;

    color: var(--text-primary);
    text-align: center;
    padding: 1.5rem;

    transform: scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    font-size: 0.95rem;

    line-height: 1.5;
    font-weight: 400;
    pointer-events: none;
}

.tooltip-content::after {
    display: none;
}

.tooltip-container:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: 1rem;
    transition: all var(--duration-fast) var(--ease-out);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
    overflow: hidden;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-primary:hover::before {
    opacity: 1;
}

/* Icon Gradients */
i,
.fas,
.fab {
    transition: all 0.3s ease;
}

.icon-gradient,
.service-icon i,
.glass-card i {
    background: linear-gradient(135deg, #22d3ee 0%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(96, 165, 250, 0.3));
}

.btn-glass-light,
.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    color: white;
}

/* Remove legacy hacks if conflicting, though using class selectors overrides usually works, 
   CSS cleanup ensures no side effects. 
   Targeting explicitly to remove the complex pseudo-elements from previous code.
*/
.btn-secondary::after,
.btn-secondary::before {
    display: none;
    content: none;
}

/* Glass Card */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 1rem;
    /* Reduced from 2rem */
    transition: transform var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal);
    margin-bottom: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Remove bottom margin in grid contexts to let gap handle spacing */
.services-grid .glass-card,
.feature-grid .glass-card,
.grid .glass-card {
    margin-bottom: 0;
}

.glass-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-highlight);
    box-shadow: var(--shadow-lg);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: all 0.4s ease;
}

.header.scrolled {
    background: rgba(5, 5, 5, 0.8);
    backdrop-filter: blur(20px);
    /* Apple-style blur */
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

body.light-mode .header.scrolled {
    background: rgba(255, 255, 255, 0.8);
}

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

.logo img {
    height: 32px;
    width: auto;
}

body.light-mode .logo img {
    background: #1a1a1a;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
}

.nav-link {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

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

/* Hero Section (Apple Style) */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: 80px;
    background: radial-gradient(circle at 50% 0%, rgba(41, 151, 255, 0.15), transparent 60%);
    overflow: hidden;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    font-size: 0.9rem;
    color: var(--brand-blue);
    margin-bottom: 1.5rem;
    animation: fadeInDown 1s ease-out;
}

.hero-title {
    margin-bottom: 1.5rem;
    animation: fadeInUp 1s ease-out 0.2s backwards;
}

.hero-desc {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 2.5rem;
    animation: fadeInUp 1s ease-out 0.4s backwards;
}

.hero-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease-out 0.6s backwards;
}

/* Infinite Marquee */
.tech-marquee {
    margin-top: 5rem;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: var(--bg-body);
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

/* Gradient Mask for fading edges */
.tech-marquee::before,
.tech-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.tech-marquee::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-body), transparent);
}

.tech-marquee::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-body), transparent);
}

.marquee-gradient-mask {
    /* Optional additional overlay if needed, currently covered by pseudo-elements */
    display: none;
}

.marquee-content {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: scroll 40s linear infinite;
}

.marquee-content:hover {
    animation-play-state: paused;
}

.tech-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

.tech-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-highlight);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tech-item i {
    font-size: 1.5rem;
    /* Reset icon gradient for these specific brand-colored icons if needed, 
       but inline style usually overrides class properties. 
       If previous .icon-gradient rule overrides inline style, we might need !important
       or a more specific selector. Let's see. 
       Actually, standard font-awesome classes might be overridden by universal selectors.
       The inline styles in HTML (color: ...) will be overridden if we have !important in CSS, 
       but we don't.
    */
    transition: transform 0.3s;
}

.tech-item:hover i {
    transform: scale(1.1);
}

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

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




/* Service Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.service-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    /* Reduced from 3rem 2rem */
    overflow: hidden;
    transition: var(--duration-normal) var(--ease-out);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.service-card:hover {
    border-color: var(--brand-blue);
    transform: translateY(-8px);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    margin-top: 1rem;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Footer */
.footer {
    background: var(--bg-body);
    border-top: 1px solid var(--border-subtle);
    padding: 4rem 0 2rem;
    color: var(--text-secondary);
}

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

.footer a {
    color: var(--text-secondary);
    text-decoration: none;
}

.footer a:hover {
    color: var(--brand-blue);
}

body.light-mode .footer {
    border-color: rgba(0, 0, 0, 0.05);
}

.footer-logo img {
    height: 32px;
    filter: grayscale(1);
    opacity: 0.8;
}

.footer-logo img:hover {
    filter: none;
    opacity: 1;
}

body.light-mode .footer-logo img {
    filter: invert(1) grayscale(1);
}

body.light-mode .footer-logo img:hover {
    filter: invert(1);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Contact Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
    z-index: 100;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Mobile Utilities */
.mobile-toggle {
    display: block;
    color: var(--text-primary);
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 1rem;
}

.desktop-flex {
    display: none;
}

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

/* Footer Grid */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    /* Make 1st (Logo) and 4th (Contact) full width on mobile */
    /* So Company (2nd) and Solutions (3rd) sit side-by-side */
    .footer-grid>div:nth-child(1),
    .footer-grid>div:nth-child(4) {
        grid-column: 1 / -1;
        text-align: center;
    }

    /* Company (2nd) - Right Align for "spine" effect */
    .footer-grid>div:nth-child(2) {
        text-align: right;
    }

    /* Solutions (3rd) - Left Align (default) */
    .footer-grid>div:nth-child(3) {
        text-align: left;
        /* Ensure list items align if they were centered by some global rule */
    }

    .footer-grid>div:nth-child(3) {
        text-align: left;
        /* Ensure list items align if they were centered by some global rule */
    }

    /* Ensure internal alignment matches the centered container if desired, 
       or keep left if "as it was" implies keeping text alignment. 
       Usually mobile footers center text for better aesthetics if full width, 
       but let's stick to layout first. */
}

@media (max-width: 480px) {
    .footer-grid {
        gap: 1.5rem;
    }
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid var(--border-subtle);
    margin-top: 2rem;
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 768px) {
    .footer-bottom {
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }
}

/* Why Us Section */
.why-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.why-us-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .why-us-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .why-us-grid p {
        margin: 0 auto 2rem;
    }

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

@media (max-width: 480px) {
    .why-us-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive Grid Utility */
.responsive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 768px) {
    .responsive-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .glass-card {
        padding: 1.5rem !important;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* JS will toggle */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(5, 5, 5, 0.95);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 2rem;
        text-align: center;
    }


    .mobile-toggle {
        display: block;
    }

    h1 {
        font-size: 2.5rem;
    }
}

/* Forms */
.form-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: var(--bg-card);
    padding: 3rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    backdrop-filter: blur(12px);
}

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

.form-control {
    width: 100%;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--brand-blue);
    background: rgba(41, 151, 242, 0.05);
    box-shadow: 0 0 0 4px rgba(41, 151, 242, 0.1);
}

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

/* --- Control Center Navigation Overlay --- */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.nav-content {
    width: 90%;
    max-width: 800px;
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
}

.nav-overlay.active .nav-content {
    transform: scale(1);
    opacity: 1;
}

.nav-grid-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.5rem;
}

.nav-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.nav-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.nav-card i {
    font-size: 2rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-card span {
    font-weight: 500;
    font-size: 0.95rem;
}

.nav-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.nav-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Nav Badge for notification or label */
.nav-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--brand-purple);
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .nav-grid-menu {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* Glass Icon Button */
.glass-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-primary);
}

.glass-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-highlight);
    transform: translateY(-2px);
    cursor: pointer;
}

/* About Us Responsive Grids */
.about-split-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

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

.feature-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    list-style: none;
    color: var(--text-secondary);
}

@media (min-width: 768px) {
    .about-split-grid {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }

    .leadership-grid {
        grid-template-columns: 1fr 2fr;
        gap: 4rem;
    }

    .feature-list-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Footer Grid - Mobile First */
/* Footer Grid - Refined Mobile Layout */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1rem;
    margin-bottom: 3rem;
}

/* Logo Section (1st child) -> Full Width on Mobile */
.footer-grid>div:nth-child(1) {
    grid-column: 1 / -1;
    text-align: center;
}

/* Center social icons on mobile in the first column */
.footer-grid>div:nth-child(1) .d-flex {
    justify-content: center;
}

/* Company (2nd) -> Right Align on Mobile */
.footer-grid>div:nth-child(2) {
    text-align: right;
}

/* Solutions (3rd) -> Left Align on Mobile */
.footer-grid>div:nth-child(3) {
    text-align: left;
}

/* Contact (4th) -> Full Width on Mobile */
.footer-grid>div:nth-child(4) {
    grid-column: 1 / -1;
    text-align: center;
}

/* Contact Page Grid */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

/* Desktop: 4 columns, normal flow */
@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        text-align: left;
    }

    .footer-grid>div:nth-child(1),
    .footer-grid>div:nth-child(2),
    .footer-grid>div:nth-child(3),
    .footer-grid>div:nth-child(4) {
        grid-column: auto;
        text-align: left;
    }

    /* Revert social icons alignment for desktop */
    .footer-grid>div:nth-child(1) .d-flex {
        justify-content: flex-start;
    }

    .contact-grid {
        grid-template-columns: 1fr 1.5fr;
        gap: 4rem;
    }
}

/* Home Hero Grid (Side-by-Side) */
.home-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 992px) {
    .home-hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ========================================
   REUSABLE UTILITY CLASSES  
   ======================================== */

/* Gradient Text Variants */
.text-gradient-blue-purple {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-multi {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-green {
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero Badge Enhanced */
.hero-badge-enhanced {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
}

/* Card Hover Effects */
.card-hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Premium Button with Gradient */
.btn-gradient {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border: none;
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
}

/* Stat Numbers */
.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Max Width Containers */
.max-w-3xl {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Direct Selling Guidelines Optimizations */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

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

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

.prohibited-box {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(20, 20, 20, 0.6);
    padding: 3rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
    .prohibited-box {
        padding: 1.5rem;
    }
    
    .prohibited-item {
        padding: 1rem !important;
        gap: 1rem !important;
    }
}

.cta-title {
    color: white;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

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

/* Card Button Group */
.card-btn-group {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.card-btn-group .btn {
    flex: 1;
    min-width: 130px;
    white-space: nowrap;
}

/* At a Glance Section */
.glance-category {
    background: var(--surface-dark);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    border-top: 3px solid;
}

.glance-category h4 {
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.glance-category.accent-blue {
    border-top-color: #3b82f6;
}

.glance-category.accent-blue h4 {
    color: #3b82f6;
}

.glance-category.accent-purple {
    border-top-color: #a855f7;
}

.glance-category.accent-purple h4 {
    color: #a855f7;
}

.glance-category.accent-orange {
    border-top-color: #f59e0b;
}

.glance-category.accent-orange h4 {
    color: #f59e0b;
}

.glance-category.accent-pink {
    border-top-color: #ec4899;
}

.glance-category.accent-pink h4 {
    color: #ec4899;
}

.feature-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.feature-list li {
    color: var(--text-secondary);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.feature-list li:hover {
    color: var(--text-primary);
    transform: translateX(5px);
}

.feature-list li i {
    margin-right: 8px;
    color: var(--success);
}


/* Enhanced At a Glance Section with Glassmorphism */
.glance-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

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

@media (max-width: 600px) {
    .glance-grid-enhanced {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.glance-category-enhanced {
    position: relative;
    background: rgba(20, 20, 20, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glance-category-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.glance-category-enhanced:hover::before {
    opacity: 1;
}

.glance-category-enhanced:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Blue Accent */
.glance-category-enhanced.accent-blue {
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
    border-top: 3px solid #3b82f6;
}

.glance-category-enhanced.accent-blue:hover {
    box-shadow: 0 20px 60px rgba(59, 130, 246, 0.3);
}

.glance-category-enhanced.accent-blue .category-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}

/* Purple Accent */
.glance-category-enhanced.accent-purple {
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.1);
    border-top: 3px solid #a855f7;
}

.glance-category-enhanced.accent-purple:hover {
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.3);
}

.glance-category-enhanced.accent-purple .category-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.1));
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
}

/* Orange Accent */
.glance-category-enhanced.accent-orange {
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.1);
    border-top: 3px solid #f59e0b;
}

.glance-category-enhanced.accent-orange:hover {
    box-shadow: 0 20px 60px rgba(245, 158, 11, 0.3);
}

.glance-category-enhanced.accent-orange .category-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

/* Pink Accent */
.glance-category-enhanced.accent-pink {
    box-shadow: 0 8px 32px rgba(236, 72, 153, 0.1);
    border-top: 3px solid #ec4899;
}

.glance-category-enhanced.accent-pink:hover {
    box-shadow: 0 20px 60px rgba(236, 72, 153, 0.3);
}

.glance-category-enhanced.accent-pink .category-icon {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.1));
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.3);
}

/* Category Icon Container */
.category-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: all 0.4s ease;
}

.glance-category-enhanced:hover .category-icon {
    transform: scale(1.1) rotate(5deg);
}

.category-icon i {
    font-size: 1.8rem;
}

/* Accent Colors for Icons */
.accent-blue .category-icon i { color: #3b82f6; }
.accent-purple .category-icon i { color: #a855f7; }
.accent-orange .category-icon i { color: #f59e0b; }
.accent-pink .category-icon i { color: #ec4899; }

/* Enhanced Category Title */
.glance-category-enhanced h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

.accent-blue h4 { color: #3b82f6; }
.accent-purple h4 { color: #a855f7; }
.accent-orange h4 { color: #f59e0b; }
.accent-pink h4 { color: #ec4899; }

/* Enhanced Feature List */
.feature-list-enhanced {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-list-enhanced li {
    color: var(--text-secondary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 1.5rem;
}

.feature-list-enhanced li::before {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 0;
    background: currentColor;
    transition: height 0.3s ease;
    border-radius: 2px;
}

.feature-list-enhanced li:hover {
    color: var(--text-primary);
    transform: translateX(8px);
}

.feature-list-enhanced li:hover::before {
    height: 100%;
}

.feature-list-enhanced li i {
    margin-right: 12px;
    font-size: 0.9rem;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.feature-list-enhanced li:hover i {
    opacity: 1;
    transform: scale(1.2);
}

/* Accent-specific icon colors */
.accent-blue .feature-list-enhanced li i { color: #3b82f6; }
.accent-purple .feature-list-enhanced li i { color: #a855f7; }
.accent-orange .feature-list-enhanced li i { color: #f59e0b; }
.accent-pink .feature-list-enhanced li i { color: #ec4899; }


/* Genealogy Chart Styles */
.genealogy-container {
    margin-top: 4rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 3rem;
    position: relative;
}

.genealogy-level {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.genealogy-level-multi {
    display: flex;
    justify-content: space-around;
    margin-bottom: 3rem;
    position: relative;
    gap: 2rem;
}

.genealogy-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.genealogy-node-avatar {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--brand-blue), #2563eb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

.genealogy-node-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.8);
}

.genealogy-node-avatar i {
    color: white;
    font-size: 1.5rem;
}

.genealogy-node-child .genealogy-node-avatar {
    width: 60px;
    height: 60px;
    background: var(--surface-dark);
}

.genealogy-node-child .genealogy-node-avatar i {
    font-size: 1.2rem;
}

/* Different node colors */
.node-success .genealogy-node-avatar {
    border: 3px solid var(--success);
}

.node-success .genealogy-node-avatar i {
    color: var(--success);
}

.node-warning .genealogy-node-avatar {
    border: 3px solid var(--warning);
}

.node-warning .genealogy-node-avatar i {
    color: var(--warning);
}

.node-purple .genealogy-node-avatar {
    border: 3px solid var(--brand-purple);
}

.node-purple .genealogy-node-avatar i {
    color: var(--brand-purple);
}

/* Connection lines */
.genealogy-line-vertical {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 1rem;
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-50%);
    z-index: 1;
}

.genealogy-line-horizontal {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 2px;
    height: 1rem;
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(-50%);
    z-index: 1;
}

.genealogy-connector-top {
    position: absolute;
    top: calc(100% + 1rem);
    left: -100%;
    width: 300%;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    z-index: 0;
}

/* Level 3 placeholder nodes */
.genealogy-level-placeholder {
    display: flex;
    gap: 1.5rem;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.genealogy-level-placeholder:hover {
    opacity: 0.7;
}

.genealogy-placeholder-node {
    width: 40px;
    height: 40px;
    background: var(--surface-dark);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Status badge */
.genealogy-status-badge {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid var(--success);
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    color: var(--success);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .genealogy-container {
        padding: 2rem 1rem;
    }
    
    .genealogy-node-avatar {
        width: 55px;
        height: 55px;
    }
    
    .genealogy-node-child .genealogy-node-avatar {
        width: 45px;
        height: 45px;
    }
    
    .genealogy-level-multi {
        gap: 1rem;
    }
    
    .genealogy-status-badge {
        font-size: 0.75rem;
        padding: 0.5rem 0.8rem;
    }
}


/* Corrected Genealogy Connectors */
.genealogy-level {
    margin-bottom: 2rem !important;
}

.genealogy-level-multi {
    gap: 0 !important;
    justify-content: center !important;
}

.genealogy-node-child {
    margin: 0 1rem;
    position: relative;
}

/* Hide old connector elements */
.genealogy-line-horizontal,
.genealogy-connector-top {
    display: none !important;
}

/* Common Vertical Line for Parent */
.genealogy-line-vertical {
    height: 1rem !important; /* Terminates exactly at the junction */
}

/* Child Connectors using Pseudo-elements */
.genealogy-node-child::before,
.genealogy-node-child::after {
    content: '';
    position: absolute;
    top: -1rem;
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Middle Nodes: Horizontal Bar + Vertical Line Up */
.genealogy-node-child:not(:first-child):not(:last-child)::before {
    left: 0;
    width: 100%;
    height: 2px;
}

.genealogy-node-child:not(:first-child):not(:last-child)::after {
    left: 50%;
    height: 1rem;
    width: 2px;
    transform: translateX(-50%);
}

/* First Child: Curve Left */
.genealogy-node-child:first-child::before {
    left: 50%;
    width: 50%;
    height: 1rem;
    background: transparent;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    border-left: 2px solid rgba(255, 255, 255, 0.3);
    border-top-left-radius: 10px;
}

/* Last Child: Curve Right */
.genealogy-node-child:last-child::before {
    left: 0;
    width: 50%;
    height: 1rem;
    background: transparent;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    border-right: 2px solid rgba(255, 255, 255, 0.3);
    border-top-right-radius: 10px;
}