:root {
    /* Backgrounds */
    --cl-bg-dark: #050505;       /* Almost Black */
    --cl-bg-card: #121418;       /* Dark Charcoal */

    /* Brand Colors extracted from Logo */
    --cl-brand-orange: #FF6600;  /* The "NETWORKS" Orange - High Energy */
    --cl-brand-blue: #0294d5;    /* The "Logo" Blue - Trust */

    /* Text */
    --cl-text-main: #FFFFFF;
    --cl-text-muted: #B0B3B8;

    /* Original variables mapped to new theme */
    --primary-color: var(--cl-brand-orange);
    --secondary-color: var(--cl-bg-dark);
    --secondary-light: var(--cl-bg-card);
    --accent-color: var(--cl-brand-blue);
    --text-light: var(--cl-text-main);
    --text-muted: var(--cl-text-muted);

    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --container-width: 1200px;
    --header-height: 80px;
}

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

body {
    font-family: var(--font-main);
    background-color: var(--secondary-color);
    color: var(--text-light);
    line-height: 1.6;
    padding-top: var(--header-height); /* Fix for fixed header */
}

/* Readability adjustments for text blocks */
p, li {
    max-width: 75ch;
}

/* Image optimization base */
img, svg {
    max-width: 100%;
    height: auto;
}

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

ul {
    list-style: none;
}

/* Container Utility */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
    min-height: 48px; /* Mobile touch target size */
    min-width: 48px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.btn-primary:hover {
    background-color: #fff;
    transform: translateY(-2px);
}

.btn-outline {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--cl-brand-blue);
    color: var(--cl-brand-blue);
    padding: 13px 38px;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-left: 15px;
}

/* Header */
header {
    background-color: rgba(15, 23, 42, 0.95);
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.mobile-menu-toggle {
    display: none;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo span {
    color: var(--primary-color);
}

nav ul.main-nav {
    display: flex;
    gap: 30px;
}

nav ul.main-nav > li {
    position: relative;
}

nav ul.main-nav > li > a {
    font-weight: 500;
    font-size: 0.95rem;
    padding: 10px 0;
}

nav ul.main-nav > li > a:hover,
nav ul.main-nav > li > a.active {
    color: var(--primary-color);
}

.mobile-only-link {
    display: none;
}

/* Dropdowns */
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--secondary-light);
    min-width: 250px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.05);
}

nav ul.main-nav > li:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown li {
    margin-bottom: 10px;
}

.dropdown li a {
    display: block;
    color: var(--text-muted);
}

.dropdown li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.dropdown-section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: block;
    font-weight: 700;
    opacity: 0.8;
}

/* Footer */
footer {
    background-color: var(--secondary-light);
    padding: 60px 0 20px;
    margin-top: 60px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h4 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: var(--text-muted);
}

.footer-col ul li a:hover {
    color: var(--text-light);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Typography Utilities */
.text-primary { color: var(--primary-color); }
.text-center { text-align: center; }
.text-white { color: #fff; }
.text-muted { color: var(--cl-text-muted); }
.text-brand-blue { color: var(--cl-brand-blue); }

.fs-1 { font-size: 3.5rem; }
.fs-5 { font-size: 1.25rem; }

.fw-bold { font-weight: 800; }

.lh-sm { line-height: 1.2; }
.lh-base { line-height: 1.6; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-4 { margin-bottom: 20px; }
.mb-5 { margin-bottom: 40px; }
.mt-2 { margin-top: 2rem; }

.py-5 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.max-w-800 { max-width: 800px; }
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 28px !important; /* Adjust this number to make it smaller or larger */
        line-height: 1.2; /* Keeps the spacing tight and readable */
    }

    a.btn.btn-primary {
        display: none !important;
    }

    /* Header adjustments */
    .header-container {
        flex-wrap: nowrap; /* Prevent wrapping so CTA stays on line */
        gap: 15px;
    }

    .logo {
        z-index: 1002; /* Above menu overlay */
        position: relative;
        flex-shrink: 1;
        min-width: 0;
    }

    .logo img {
        max-height: 45px;
    }

    .cta-group .btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .cta-group {
        display: block; /* Show header CTA on mobile */
    }

    .mobile-menu-toggle {
        display: block;
        z-index: 1002; /* Above menu overlay */
        background: none;
        border: none;
        color: white;
        font-size: 2rem; /* Larger touch target */
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    /* Mobile Menu Overlay */
    nav ul.main-nav {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(15, 23, 42, 0.98); /* Slightly transparent dark background */
        backdrop-filter: blur(10px);
        flex-direction: column;
        justify-content: flex-start; /* Start from top for scrolling */
        align-items: center;
        padding: 100px 20px 40px;
        z-index: 1001;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth slide in */
    }

    nav.mobile-menu-open ul.main-nav {
        transform: translateX(0);
    }

    nav ul.main-nav > li {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    nav.mobile-menu-open ul.main-nav > li {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger animation for menu items */
    nav.mobile-menu-open ul.main-nav > li:nth-child(1) { transition-delay: 0.1s; }
    nav.mobile-menu-open ul.main-nav > li:nth-child(2) { transition-delay: 0.15s; }
    nav.mobile-menu-open ul.main-nav > li:nth-child(3) { transition-delay: 0.2s; }
    nav.mobile-menu-open ul.main-nav > li:nth-child(4) { transition-delay: 0.25s; }
    nav.mobile-menu-open ul.main-nav > li:nth-child(5) { transition-delay: 0.3s; }
    nav.mobile-menu-open ul.main-nav > li:nth-child(6) { transition-delay: 0.35s; }
    nav.mobile-menu-open ul.main-nav > li:nth-child(7) { transition-delay: 0.4s; }

    nav ul.main-nav > li > a {
        font-size: 1.5rem;
        font-weight: 700;
        padding: 15px;
        display: block;
        color: var(--text-light);
    }

    .mobile-only-link {
        display: block;
    }

    .mobile-only-link a {
        color: var(--primary-color) !important;
    }

    /* Mobile Dropdowns */
    .dropdown {
        position: static;
        background: rgba(255, 255, 255, 0.03);
        box-shadow: none;
        border: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 10px 0;
        display: block; /* Always show sub-items for now to ensure visibility */
        text-align: center;
        margin-top: 5px;
        border-radius: 8px;
    }

    .dropdown li {
        margin-bottom: 5px;
    }

    .dropdown li a {
        font-size: 1rem;
        padding: 8px;
        color: var(--text-muted);
        font-weight: 400;
    }

    .dropdown-section-title {
        color: var(--primary-color);
        margin-top: 15px;
        margin-bottom: 5px;
        font-size: 0.8rem;
    }

    .dropdown li a {
        font-size: 1.1rem;
        padding: 10px;
        color: var(--text-muted);
    }

    /* Mobile Slider Adjustments */
    .testimonial-card {
        padding: 20px;
    }

    .slider-prev, .slider-next {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        background: rgba(15, 23, 42, 0.8);
    }

    .slider-prev { left: 5px; }
    .slider-next { right: 5px; }
}

/* Large Monitors */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px; /* Allow wider container */
        padding: 0 40px;
    }

    p, li {
        font-size: 1.1rem; /* Slightly larger text */
    }
}

/* Why Us / Value Prop Section */
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.why-us-card {
    background-color: var(--secondary-light); /* #1e293b */
    padding: 40px 30px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.why-us-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.why-us-icon {
    margin: 0 auto 30px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
}

.why-us-title {
    font-size: 1.75rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.why-us-text {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 40px;
    line-height: 1.6;
}

.why-us-divider {
    border-top: 1px dashed rgba(255,255,255,0.2);
    margin: 15px auto;
    width: 80%;
}

.why-us-stat {
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
    padding: 5px 0;
}

.why-us-link {
    margin-top: auto; /* Pushes link to bottom */
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    display: inline-block;
    padding-top: 30px;
    transition: transform 0.2s;
}

.why-us-link:hover {
    transform: translateX(5px);
}

/* Testimonial Slider */
.testimonial-section {
    padding: 80px 0;
    overflow: hidden; /* Hide overflow from slider */
    background: var(--secondary-color);
}

.testimonial-header {
    text-align: center;
    margin-bottom: 60px;
}

.testimonial-header h2 {
    font-size: 2.5rem;
    color: white;
}

.testimonial-container {
    position: relative;
    max-width: 100vw;
    margin: 0 auto;
}

.testimonial-track-wrapper {
    overflow: hidden;
    padding: 40px 0; /* Space for scaling */
}

.testimonial-track {
    display: flex;
    gap: 30px;
    transition: transform 0.5s ease;
    width: max-content;
}

.testimonial-card {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Grey border default */
    border-radius: 4px;
    padding: 30px;
    width: min(400px, 80vw); /* Responsive width */
    flex-shrink: 0;
    transition: all 0.5s ease;
    opacity: 0.5;
    transform: scale(0.9);
    position: relative;
}

.testimonial-card.active {
    border-color: var(--accent-color); /* Blue for active tech feel */
    box-shadow: 0 0 20px rgba(0, 151, 217, 0.2);
    opacity: 1;
    transform: scale(1);
}

.quote-icon {
    font-size: 4rem;
    line-height: 1;
    color: var(--accent-color);
    position: absolute;
    top: -20px;
    left: 20px;
    background: var(--secondary-color);
    padding: 0 10px;
}

.testimonial-text {
    font-size: 0.95rem;
    margin-top: 10px;
    margin-bottom: 20px;
    font-style: italic;
    color: var(--text-light);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--secondary-light);
    object-fit: cover;
}

.author-info h4 {
    color: var(--accent-color);
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.author-info p {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Slider Controls */
.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--secondary-light);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s;
}

.slider-prev:hover, .slider-next:hover {
    background: var(--accent-color);
    color: white;
}

/* Position relative to the center active card is tricky with pure CSS if width varies.
   But we can put them fixed relative to the viewport or container.
   The screenshot shows them on the sides of the ACTIVE card.
   We will just put them on the sides of the container or center them.
   Let's put them absolute to the container wrapper.
*/

.slider-prev { left: 20px; }
.slider-next { right: 20px; }

/* Or better, strictly around the center area if possible.
   For now, side of screen/container is safer. */

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    cursor: pointer;
    padding: 0;
}

.slider-dot.active {
    background: var(--accent-color);
}

/* Skeleton Loading Styles */
.skeleton {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    padding: 0 20px;
}

.skeleton-logo {
    width: 150px;
    height: 40px;
}

.skeleton-nav {
    display: flex;
    gap: 30px;
}

.skeleton-link {
    width: 80px;
    height: 20px;
}

.skeleton-cta {
    width: 120px;
    height: 40px;
}

/* Hide skeleton nav on mobile */
@media (max-width: 768px) {
    .skeleton-nav {
        display: none;
    }
    .skeleton-cta {
        display: none; /* Hide CTA on mobile skeleton to match simplified header if needed, or keep */
    }
    /* Actually we keep CTA in header usually, but nav is hidden */
    .skeleton-cta {
        display: block;
        width: 40px; /* Hamburger size placeholder */
        margin-left: auto;
    }
}

.skeleton-footer {
    padding: 60px 0 20px;
    margin-top: 60px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.skeleton-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.skeleton-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.skeleton-title {
    width: 100px;
    height: 24px;
    margin-bottom: 10px;
}

.skeleton-text-line {
    width: 100%;
    height: 16px;
}
.hidden { opacity: 0; transition: opacity 0.5s ease-in-out; }

/* Word Rotator */
.word-rotator-wrapper {
    display: inline-block;
    position: relative;
    color: #fff;
    -webkit-text-fill-color: #fff;
}

.cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background-color: #fff;
    animation: blink 0.7s infinite;
    vertical-align: middle;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* SOC Section (New Design) */
.soc-section {
    padding: 60px 0;
    background-color: var(--secondary-color);
}

.soc-container-box {
    border: 1px solid var(--cl-brand-blue);
    border-radius: 12px;
    padding: 40px;
    position: relative;
    background: linear-gradient(180deg, rgba(2, 148, 213, 0.05) 0%, rgba(0,0,0,0) 100%);
    box-shadow: 0 0 30px rgba(2, 148, 213, 0.05);
    margin-top: 20px;
}

.soc-header-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 40px;
    text-align: center;
    letter-spacing: -1px;
    line-height: 1.1;
}

.soc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 80px; /* Space for connector */
    position: relative;
}

.soc-card {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease;
}

.soc-card:hover {
    transform: translateY(-5px);
}

.soc-card.highlight {
    border: 1px solid var(--cl-brand-orange);
    background: linear-gradient(180deg, rgba(255, 102, 0, 0.08) 0%, rgba(0,0,0,0) 100%);
    position: relative;
}

/* Glow effect for highlight card */
.soc-card.highlight::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.1);
    pointer-events: none;
}

.soc-card-icon {
    margin-bottom: 20px;
    color: var(--cl-brand-orange);
    display: flex;
    align-items: center;
    height: 32px;
}

.soc-card-icon svg {
    width: 32px;
    height: 32px;
}

.soc-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: white;
    line-height: 1.3;
    min-height: 40px;
}

.soc-card-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    display: block;
    font-style: italic;
    min-height: 20px;
}

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

.soc-list li {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    position: relative;
    padding-left: 12px;
    line-height: 1.4;
}

.soc-list li::before {
    content: "•";
    color: var(--cl-brand-orange);
    position: absolute;
    left: 0;
    top: -1px;
    font-weight: bold;
}

/* Connector Wrapper */
.soc-connectors {
    position: absolute;
    bottom: -60px; /* Shift up into the grid margin area */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    height: 0; /* Don't take up space */
}

/* The button itself */
.soc-herd-btn {
    pointer-events: auto;
    background: rgba(5, 5, 5, 0.9);
    border: 1px solid var(--cl-brand-blue);
    color: var(--cl-brand-blue);
    padding: 10px 30px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 0 15px rgba(2, 148, 213, 0.15);
    z-index: 2;
    transform: translateY(-50%); /* Center on the bottom line */
}

/* Curved lines simulation using SVG background on grid or pseudo elements is complex.
   We will rely on the button placement for now. */

.soc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.soc-footer-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
}

/* SVG placeholder for footer logo icon */
.soc-footer-brand svg {
    width: 32px;
    height: 32px;
    color: var(--cl-brand-blue);
}

.soc-footer-links {
    display: flex;
    gap: 30px;
}

.soc-footer-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
    transition: color 0.3s;
}

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

/* Responsive SOC */
@media (max-width: 1024px) {
    .soc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }

    .soc-connectors {
        position: relative;
        bottom: auto;
        margin-top: 20px;
        height: auto;
        transform: none;
    }

    .soc-herd-btn {
        transform: none;
    }
}

@media (max-width: 768px) {
    .soc-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }

    .soc-container-box {
        padding: 20px;
    }

    .soc-connectors {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .soc-footer {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .soc-footer-links {
        flex-direction: column;
        gap: 15px;
    }
}

/* Product Listings Section */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.product-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px 24px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.product-icon {
    color: var(--primary-color);
    margin-bottom: 20px;
}

.product-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.product-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1; /* Pushes the link to the bottom */
}

.learn-more {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
}

.learn-more:hover {
    gap: 10px;
}

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

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

    .product-card {
        padding: 24px;
    }
}

/* ===== Premium UI Refresh Overrides ===== */
:root {
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --ring: 0 0 0 3px rgba(2, 148, 213, 0.3);
  --shadow-soft: 0 12px 34px rgba(2, 6, 23, 0.35);
  --shadow-strong: 0 24px 54px rgba(2, 6, 23, 0.55);
}

body {
  background:
    radial-gradient(circle at 10% -10%, rgba(255, 102, 0, 0.11), transparent 35%),
    radial-gradient(circle at 100% 0%, rgba(2, 148, 213, 0.14), transparent 40%),
    linear-gradient(165deg, #03070f, #060a12 45%, #0b1220);
}

header {
  background: rgba(6, 10, 18, 0.8);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
}

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 8px;
}

.btn {
  border-radius: 999px;
  min-height: 44px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: linear-gradient(120deg, #ff6600, #ff8742);
  box-shadow: 0 10px 22px rgba(255, 102, 0, 0.35);
}

.btn-outline {
  border-color: rgba(2, 148, 213, 0.52);
  color: #bdefff;
  background: rgba(2, 148, 213, 0.08);
}

.dropdown {
  background: rgba(13, 23, 40, 0.9);
  border-radius: 12px;
  border: 1px solid rgba(2,148,213,0.28);
  box-shadow: var(--shadow-soft);
}

footer {
  background: linear-gradient(180deg, rgba(10, 16, 29, 0.95), rgba(7, 12, 22, 0.95));
}

.card,
.product-card,
.why-us-card,
.testimonial-card,
.soc-container-box {
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}