/* Core Structural Configuration & Variables - ePOC CPaaS Design System */
:root {
    /* ePOC CPaaS Light Theme */
    --active-menu-item: var(--color-indigo);
    --light-icon-theme: url('../svgs/lightbulb-2.svg') center no-repeat;
    --cert-image: url('../images/Certified-dark.png');
    --gb-line: var(--color-indigo);
    --icon-color: #0F172A;
    --icon-filter: brightness(0);

    --bg-midnight: #F2F2F2;
    --bg-surface: #FFFFFF;
    --bg-elevated: #F1F5F9;

    /* Primary Brand Colors - ePOC Identity (official brand swatches) */
    --color-mint: #BDF3DF;
    /* Mint Pulse */
    --color-indigo: #6266FE;
    /* Signal Indigo */
    --color-core-blue: #DBE7FF;
    /* Core Blue */
    --color-accent-cyan: #B5BAFF;
    /* Cloud Lavender (kept var name for compatibility) */
    --btn-primary-text: #080C19;
    /* Midnight Node */

    /* Typography */
    --text-light: #0F172A;
    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #475569;
    --text-muted-extra: #333333;
    --text-disabled: #94A3B8;

    /* Glass Morphism */
    --glass-bg: rgba(255, 255, 255, 0.2);
    --glass-bg-hover: rgba(255, 255, 255, 0.98);
    --glass-border: rgba(15, 23, 42, 0.08);
    --glass-border-hover: rgba(15, 23, 42, 0.15);
    --glass-blur: blur(40px);

    /* Navigation */
    --nav-surface: rgba(255, 255, 255, 0.95);
    --nav-link: #1E293B;
    --nav-link-hover: #0F172A;

    /* Footer */
    --footer-bg: rgba(255, 255, 255, 0.98);
    --footer-muted: #475569;
    --footer-heading: #0F172A;
    --footer-border: rgba(15, 23, 42, 0.06);

    /* Spacing & Radius */
    --radius-xl: 28px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --radius-full: 9999px;

    /* Typography Scale, brand spec: Azonix for the logotype/hero display,
       Montserrat for all body and UI text */
    --font-primary: 'Montserrat', sans-serif;
    --font-display: 'Montserrat', sans-serif;

    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-spring: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Cards */
    --card-bg: rgba(255, 255, 255, 0.98);
    --card-border: rgba(15, 23, 42, 0.08);
    --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --card-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.1);

    /* Forms */
    --input-bg: rgba(255, 255, 255, 0.95);
    --input-border: rgba(15, 23, 42, 0.12);
    --input-focus: rgba(98, 102, 254, 0.2);
    --input-focus-ring: 0 0 0 3px rgba(98, 102, 254, 0.1);

    /* Tables */
    --table-header-bg: rgba(15, 23, 42, 0.04);
    --table-hover: rgba(15, 23, 42, 0.02);
    --table-border: rgba(15, 23, 42, 0.06);

    /* Accordion */
    --accordion-bg: rgba(15, 23, 42, 0.03);
    --accordion-border: rgba(15, 23, 42, 0.06);

    /* Visual Elements */
    --map-bg: rgba(15, 23, 42, 0.04);
    --dot-bg: rgba(15, 23, 42, 0.15);
    --sidebar-bg: rgba(15, 23, 42, 0.04);
    --line-bg: rgba(15, 23, 42, 0.08);
    --stat-bg: rgba(255, 255, 255, 0.95);
    --pricing-bg: rgba(255, 255, 255, 0.98);

    /* Gradients & Effects, the brand gradient is Signal Indigo > Mint Pulse,
       left to right, per the guidelines' gradient spec */
    --tag-bg: linear-gradient(135deg, var(--color-indigo), var(--color-accent-cyan));
    --tag-text: white;
    --gradient-primary: linear-gradient(to right, var(--color-indigo), var(--color-mint));
    --gradient-brand: linear-gradient(to right, var(--color-indigo), var(--color-mint));
    --gradient-hero: linear-gradient(180deg, rgba(98, 102, 254, 0.08) 0%, rgba(189, 243, 223, 0.06) 100%);
    --mesh-line: rgba(98, 102, 254, 0.06);

    /* Blobs */
    --blob-opacity: 0.5;
    --blob-mix-blend: multiply;

    /* Badges & Pills */
    --badge-bg: rgba(98, 102, 254, 0.08);
    --badge-border: rgba(98, 102, 254, 0.2);
    --badge-text: #4640D8;

    /* Buttons */
    --btn-primary-bg: var(--gradient-primary);
    --btn-primary-hover: linear-gradient(135deg, #B5BAFF, #BDF3DF);
    --btn-secondary-bg: rgba(255, 255, 255, 0.95);
    --btn-secondary-2-bg: #6266FE;
    --btn-secondary-border: rgba(15, 23, 42, 0.12);
    --btn-secondary-hover: rgba(255, 255, 255, 1);
    --btn-secondary-border-hover: rgba(15, 23, 42, 0.25);

    /* Marquee */
    --marquee-bg: #ffffff;
    --marquee-text: #1a1a1a;
    --marquee-border: #e2e8f0;
    --marquee-item-bg: #F2F2F2;

    /* CPaaS Brand Colors, mapped 1:1 to the official swatches:
       Signal Indigo (primary/CTA), Mint Pulse (secondary/highlight),
       Cloud Lavender (accent), Core Blue (enterprise) */
    --cpaaas-primary: #6266FE;
    --cpaaas-primary-rgb: 98, 102, 254;
    --cpaaas-secondary: #BDF3DF;
    --cpaaas-accent: #B5BAFF;
    --enterprise-blue: #00197D;
    --color-primary: var(--cpaaas-primary);
    --gradient-start: var(--color-indigo);
    --gradient-end: var(--color-mint);

    /* Section Spacing */
    --section-padding-y: 120px;
    --section-padding-y-sm: 80px;
    --container-max: 1400px;

     --hero-bg-image: url('../images/banner-1.jpg');
     --gov-section-background: url('../images/banner-2.jpg') ;
     --main-overlay: rgba(225,225,225,0.1);
     --hero-scrim: radial-gradient(120% 90% at 50% 22%, rgba(255, 255, 255, 0.28) 0%, rgba(241, 245, 249, 0.55) 45%, rgba(241, 245, 249, 0.8) 100%);

    /*table variables*/
     --table-header-bg: rgba(98, 102, 254, 0.06);
    --table-row-hover: rgba(98, 102, 254, 0.04);
    --table-border: rgba(0, 0, 0, 0.06);
    --table-stripe: rgba(0, 0, 0, 0.02);
    --table-highlight: rgba(189, 243, 223, 0.1);
    --positive-color: #059669;
    --negative-color: #DC2626;
    --growth-bar-bg: rgba(0, 0, 0, 0.05);
    --growth-bar-fill: linear-gradient(90deg, var(--color-indigo), var(--color-mint));
}

/* Light Mode Text & Component Colors */
body .text-muted,
body p,
body .footer-links-col a,
body .footer-newsletter p,
body .base-policies a,
body .window-title,
body .stat-bubble small,
body .gov-sub-node,
body .accordion-content p,
body .form-control::placeholder {
    color: var(--text-muted);
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .stat-item h3,
body .price-display,
body .stat-bubble strong,
body .nav-item.active,
body .nav-item:hover {
    color: var(--text-light);
}

body .btn-secondary-2{
    background: var(--btn-secondary-2-bg);
    color: #ffffff;
    border-color: var(--btn-secondary-border);
}
body .btn-secondary-2:hover {
    background: var(--btn-secondary-2-bg);
    border-color: var(--btn-secondary-border-hover);
}

body .btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--text-light);
    border-color: var(--btn-secondary-border);
}

body .btn-secondary:hover {
    background: var(--btn-secondary-hover);
    border-color: var(--btn-secondary-border-hover);
}

body .badge-pill {
    z-index: 10;
    position: relative;
    background: var(--badge-bg);
    border-color: var(--badge-border);
    color: var(--badge-text);
}

body .glass-panel {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    transition: all 0.4s ease;
}

body .card {
    transition: all 0.4s ease;
    background: var(--card-bg);
    border-color: var(--card-border);
}

body .card:hover {
    border-color: rgba(15, 23, 42, 0.2);
}

body .form-control {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-light);
}

body .form-control:focus {
    border-color: var(--color-indigo);
    box-shadow: 0 0 12px var(--input-focus);
    background: var(--input-bg);
}

body .data-table th {
    background: var(--table-header-bg);
    color: var(--text-light);
}

body .data-table tr:hover td {
    background: var(--table-hover);
}

body .accordion-content {
    background: var(--accordion-bg);
}

body .accordion-trigger {
    color: var(--text-light);
}

body .interactive-map-placeholder {
    background: var(--map-bg);
}

body .window-chrome {
    background: rgba(15, 23, 42, 0.05);
}

body .dot-win {
    background: rgba(15, 23, 42, 0.2);
}

body .sidebar-mock {
    background: var(--sidebar-bg);
}

body .line-mock {
    background: var(--line-bg);
}

body .stat-bubble {
    background: var(--stat-bg);
    border-color: var(--glass-border);
}

body .stat-bubble strong {
    color: var(--text-light);
}

body .featured-tier {
    border: 2px solid var(--cpaaas-primary);
    box-shadow: 0 0 40px rgba(98, 102, 254, 0.25);
    background: var(--pricing-bg);
}

body .special-tag {
    background: var(--tag-bg);
    color: var(--tag-text);
}

body .accordion-item {
    border-color: var(--glass-border);
}

body .chevron {
    border-color: var(--text-muted);
}

body .accordion-item.open .chevron {
    border-color: var(--color-mint);
}

body .gradient-text {
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body .text-gradient {
    background: linear-gradient(135deg, var(--color-indigo), var(--color-indigo));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body .pulse-node {
    background-color: rgba(79, 70, 229, 0.03);
    box-shadow: 0 0 24px rgba(79, 70, 229, 0.2);
    border-color: rgba(15, 23, 42, 0.15);
}

body .pulse-node::after {
    border-color: rgba(79, 70, 229, 0.4);
}

body .hero-blob {
    opacity: 0.55;
}

body .mesh-grid-graphic::before {
    background-image:
        linear-gradient(rgba(79, 70, 229, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 70, 229, 0.08) 1px, transparent 1px);
}

body .blob {
    opacity: 0.3;
    mix-blend-mode: multiply;
}

body .map-grid-overlay {
    background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
}

body .map-label {
    color: rgba(15, 23, 42, 0.15);
}

body .icon-frame {
    background: rgba(15, 23, 42, 0.03);
    border-color: var(--glass-border);
}

body .action-row {
    border-color: var(--glass-border);
}

body .divider {
    background: var(--glass-border);
}

body .governance-graphic {
    background: rgba(15, 23, 42, 0.03);
    border-color: var(--glass-border);
}

body .gov-node {
    background: rgba(79, 70, 229, 0.08);
    border-color: var(--color-indigo);
    color: var(--text-light);
}

body .gov-sub-node {
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--glass-border);
}

body .time-marker {
    background: var(--color-core-blue);
    border-color: var(--color-indigo);
    color: var(--badge-text);
}

body .time-content {
    background: rgba(255, 255, 255, 0.5);
    border-color: var(--glass-border);
}

body .testimonial-wrapper {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

body .quote {
    color: var(--text-light);
}

body .site-footer {
    background: var(--footer-bg);
    border-color: var(--glass-border);
}

body .footer-links-col a {
    color: var(--footer-muted);
}

body .footer-links-col a:hover {
    color: var(--enterprise-blue);
}

body .footer-base {
    border-color: var(--footer-border);
}

body .base-policies a {
    color: var(--footer-muted);
}

body .base-policies a:hover {
    color: var(--text-light);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

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

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    background-color: var(--bg-midnight);
    color: var(--text-primary);
    font-family: var(--font-primary);
    overflow-x: hidden;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cross-page fade: pairs with js/page-transitions.js, which delays same-site
   navigation just long enough for .page-exit's fade-out to play. */
@keyframes page-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes page-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

body {
    animation: page-fade-in 0.35s ease;
}

body.page-exit {
    animation: page-fade-out 0.25s ease forwards;
}

/* Typography Hierarchy */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-light);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
}

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

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

h4 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

h5 {
    font-size: clamp(1.125rem, 1.5vw, 1.25rem);
}

h6 {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
}

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

.text-muted {
    color: var(--text-muted) !important;
}

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

@font-face {
    font-family: 'Azonix';
    src: url('../src/assets/Azonix.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Azonix';
    src: url('../src/assets/Azonix.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.font-azonix {
    font-family: 'Azonix', sans-serif;
}

/* Layout Utilities */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3em 24px;
}

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

.grid {
    display: grid;
    gap: 28px;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-2-bs{
    grid-template-columns: 1fr 1.4fr;
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

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

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

@media (max-width: 768px) {

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-2-bs {
        grid-template-columns: 1fr;
    }
}

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

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

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

/* Spacing System */
.margin-top-xs {
    margin-top: 8px;
}

.margin-top-sm {
    margin-top: 16px;
}

.margin-top-md {
    margin-top: 24px;
}

.margin-top-lg {
    gap: 1em;
    margin-top: 48px;
}

.margin-top-xl {
    margin-top: 80px;
}

.margin-bottom-sm {
    margin-bottom: 16px;
}

.margin-bottom-lg {
    margin-bottom: 48px;
}

.margin-bottom-xl {
    margin-bottom: 80px;
}

.padding-xl {
    padding: 40px;
}

.padding-top-xl {
    padding-top: 120px;
}

/* Typography Aesthetics */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-light);
    line-height: 1.2;
    transition: color 0.3s ease;
}

h1 {
    font-size: 56px;
    font-weight: 900;
    margin-bottom: 24px;
}

h2 {
    font-size: 38px;
    margin-bottom: 16px;
}

h3 {
    font-size: 24px;
    margin-bottom: 12px;
}

h4 {
    font-size: 20px;
}

p {
    font-size: 16px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.hero-sub {
    font-size: 16px;
    max-width: 720px;
    margin: 0 auto 48px;
    line-height: 1.8;
    color: var(--text-secondary);
    font-weight: 400;
}

.text-sm {
    font-size: 14px;
    line-height: 1.7;
}

.text-xs {
    font-size: 12px;
    line-height: 1.6;
}

.text-muted {
    color: var(--text-muted) !important;
}
.text-muted-extra {
    color: var(--text-muted-extra) !important;
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s ease;
}

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background 0.4s ease;
}

.uppercase {
    text-transform: uppercase;
}

.tracking-wide {
    letter-spacing: 0.1em;
}

.font-weight-bold {
    font-weight: 700;
}

/* Absolute Ambient Organic Background Blobs */
.bg-blur-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    filter: blur(50px);
    opacity: var(--blob-opacity);
    mix-blend-mode: var(--blob-mix-blend);
    transition: opacity 0.5s ease, mix-blend-mode 0.5s ease;
}

.blob-indigo {
    background: var(--cpaaas-primary);
    top: -200px;
    left: -100px;
    animation: smoothBlobOne 15s infinite alternate ease-in-out;
}

.blob-mint {
    background: var(--cpaaas-secondary);
    bottom: -100px;
    right: -100px;
    animation: smoothBlobTwo 20s infinite alternate ease-in-out;
}

.blob-blue {
    background: var(--cpaaas-accent);
    bottom: -100px;
    left: 20%;
    animation: smoothBlobOne 25s infinite alternate-reverse ease-in-out;
}

@keyframes smoothBlobOne {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(80px, -60px) scale(1.2);
    }
}

@keyframes smoothBlobTwo {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-80px, 60px) scale(1.1);
    }
}

/* Sticky Premium Navigation Header Bar */
.navbar {
    position: fixed;
    /* top: 20px; */
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid transparent;
    transition: var(--transition-smooth);
    padding: 24px 0;
}

.navbar.scrolled {
    padding: 10px 0;
    margin: 0 auto;
}

.nav-container {
    background: var(--nav-surface);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    height: 60px;
    padding: 10px 48px;
    transition: background 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.logo-lockup {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image {
    width: 80px;
    height: auto;
}

.logo-image-x {
    margin: 20px auto;
    width: 130px;
    height: auto;
}

.brand-logo {
    height: 32px;
    transition: var(--transition-smooth);
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-item {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--nav-link);
    text-decoration: none;
    transition: var(--transition-smooth);
    position: relative;
}

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

.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--active-menu-item);
    box-shadow: 0 0 8px var(--active-menu-item);
}

.nav-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Interactive Enterprise Buttons - CPaaS Design */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em;
    isolation: isolate;
    transform: translateZ(0);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.5s ease;
}

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

.btn-primary {
    border: none;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    font-weight: 700;
    box-shadow: 0 4px 16px rgba(189, 243, 223, 0.2);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(189, 243, 223, 0.4);
    background: var(--btn-primary-hover);
    border-color: rgba(181, 186, 255, 0.5);
}

/* Navbar "Book a Demo" only - every other .btn-primary CTA on the site
   keeps the standard left-to-right indigo->mint (var(--btn-primary-bg)).
   This one uses the same two colors, mint (the lighter one) on both
   ends with indigo in the middle, so it reads as light-to-dark-to-light
   instead of one-directional dark-to-light. */
.navbar .nav-actions .btn-primary {
    background: linear-gradient(to right, var(--color-mint), var(--color-indigo) 42%, var(--color-indigo) 58%, var(--color-mint));
}

.btn-secondary {
    background: var(--btn-secondary-bg);
    color: var(--text-light);
    border: 1px solid var(--btn-secondary-border);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.btn-secondary:hover {
    background: var(--btn-secondary-hover);
    border-color: var(--btn-secondary-border-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.btn-secondary-2 {
    background: var(--btn-secondary-2-bg);
    color: var(--text-light);
    border: 1px solid var(--btn-secondary-border);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.btn-secondary-2:hover {
    background: var(--btn-secondary-2-bg);
    border-color: var(--btn-secondary-border-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.btn-text {
    color: var(--color-mint);
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    font-weight: 600;
}

.btn-text:hover {
    color: var(--color-accent-cyan);
}

.size-lg {
    padding: 16px 36px;
    font-size: 16px;
    border-radius: var(--radius-lg);
    font-weight: 700;
}

.size-full {
    width: 100%;
}

.btn-sm {
    text-decoration: none;
    padding: 8px 18px;
    font-size: 13px;
    border-radius: var(--radius-sm);
    transition: 0.3s;
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(98, 102, 254, 0.18), rgba(189, 243, 223, 0.12));
    border: 1px solid var(--badge-border);
    color: var(--cpaaas-accent);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 28px;
    width: fit-content;
    text-transform: uppercase;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 24px rgba(98, 102, 254, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
}

.badge-pill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.badge-pill:hover::before {
    left: 100%;
}

.badge-pill:hover {
    box-shadow: 0 0 40px rgba(98, 102, 254, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-3px) scale(1.02);
    border-color: var(--color-accent-cyan);
}

/* ============================================
   PREMIUM GLASSMORPHIC CARDS - FIXED & ENHANCED
   ============================================ */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
    transition: var(--transition-bounce);
    position: relative;
    overflow: hidden;
}

/* Glass-panel hover with subtle lift and glow */
.glass-panel:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(98, 102, 254, 0.4);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(98, 102, 254, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Light mode glass-panel hover */
body .glass-panel:hover {
    border-color: rgba(79, 70, 229, 0.3);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(79, 70, 229, 0.1);
}

/* Glass-panel shimmer effect on hover */
.glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.03),
            transparent);
    transition: left 0.8s ease;
    pointer-events: none;
}

.glass-panel:hover::before {
    left: 100%;
}

/* Glass-panel glow ring */
.glass-panel::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, var(--color-indigo), var(--color-mint));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.glass-panel:hover::after {
    opacity: 0.6;
}

/* Card - Base CPaaS Design */
.card {
    padding: 36px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Card hover with interactive lift and glow */
.card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(98, 102, 254, 0.35);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(98, 102, 254, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    background: var(--glass-bg-hover);
}

/* Light mode card hover */
body .card:hover {
    border-color: rgba(79, 70, 229, 0.25);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(79, 70, 229, 0.08);
}

/* Card shimmer effect */
.card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(98, 102, 254, 0.04), transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.card:hover::before {
    opacity: 1;
}

/* Dynamic glow border */
.dynamic-glow-border {
    padding: 0.5em;
    position: relative;
}

.dynamic-glow-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, var(--color-indigo), var(--color-mint));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.dynamic-glow-border:hover::before {
    opacity: 1;
}

/* Page Specific Section Mechanics */
.hero-section {
    background: var(--hero-bg-image) no-repeat;
    background-size: cover;
    padding: 140px 0 50px;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-bg-image) no-repeat center center;
    background-size: cover;
    filter: brightness(0.9) saturate(1.2) contrast(1.1);
    z-index: 0;
    transition: filter 0.5s ease;
}

/* Readability scrim: sits above the banner image, below the text/CTAs,
   so muted copy never has to fight the busy artwork behind it. */
.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--hero-scrim);
    pointer-events: none;
    transition: background 0.4s ease;
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: var(--blob-opacity);
    mix-blend-mode: var(--blob-mix-blend);
    animation: heroBlobFloat 18s ease-in-out infinite;
    will-change: transform, opacity;
    transition: opacity 0.3s ease, mix-blend-mode 0.3s ease;
}

.hero-blob-1 {
    width: 500px;
    height: 500px;
    top: -10%;
    left: -5%;
    background: var(--cpaaas-secondary);
}

.hero-blob-2 {
    width: 400px;
    height: 400px;
    top: 15%;
    right: -5%;
    background: var(--enterprise-blue);
    animation-delay: 2s;
    opacity: 0.45;
}

.hero-blob-3 {
    width: 450px;
    height: 450px;
    bottom: -10%;
    left: 15%;
    background: var(--cpaaas-primary);
    animation-delay: 4s;
}

.hero-blob-4 {
    width: 350px;
    height: 350px;
    bottom: 15%;
    right: 15%;
    background: var(--cpaaas-accent);
    animation-delay: 6s;
    opacity: 0.55;
}

.hero-ctas {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.hero-ctas .btn {
    min-width: 160px;
}

@keyframes heroBlobFloat {

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

    25% {
        transform: translate3d(28px, -42px, 0) scale(1.06);
    }

    50% {
        transform: translate3d(-24px, 24px, 0) scale(0.94);
    }

    75% {
        transform: translate3d(38px, 20px, 0) scale(1.08);
    }
}

/* Microframe Mockup System Visuals */
.hero-illustration {
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
}

.background-illustration-card {
    /* background:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url('../images/3D_mesh_network.jpg') center center !important; */
    background-size: cover !important;
}

.background-illustration-card-2 {
    /* background:
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
        url('../images/textured-card.png') center center !important; */
    background-size: cover !important;
}

.omni-icon {
    background: url('../images/omni-channel.png') center center no-repeat;
    width: 100px;
    height: 100px;
    margin-right: 8px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: filter 0.3s ease;
}

/* The source graphic is a light-toned illustration built for dark cards;
   invert it so it stays visible on the white card surface. */
body .omni-icon {
    filter: invert(1) brightness(0.8) contrast(1.1);
}

.window-chrome {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--glass-border);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.dot-win {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot-bg);
    margin-right: 6px;
    transition: background 0.3s ease;
}

.window-title {
    font-size: 11px;
    color: var(--text-muted);
    font-family: monospace;
    margin-left: 12px;
    transition: color 0.3s ease;
}

.dashboard-preview {
    display: flex;
    height: 380px;
}

.sidebar-mock {
    width: 60px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--glass-border);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
}

.line-mock {
    width: 24px;
    height: 4px;
    background: var(--line-bg);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.line-mock.active {
    background: var(--color-mint);
}

.content-mock {
    flex: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

.chart-header {
    display: flex;
    gap: 24px;
}

.stat-bubble {
    background: var(--stat-bg);
    padding: 16px 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
    text-align: left;
    transition: all 0.3s ease;
}

.stat-bubble small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.stat-bubble strong {
    font-size: 20px;
    font-family: var(--font-display);
    color: var(--text-light);
    transition: color 0.3s ease;
}

.mesh-grid-graphic {
    flex: 1;
    border: 1px dashed rgba(98, 102, 254, 0.15);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(98, 102, 254, 0.08), transparent);
    transition: all 0.3s ease;
}

.mesh-grid-graphic::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--mesh-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--mesh-line) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    transition: background-image 0.3s ease;
}

/* ============================================
   PULSE NODE - FIXED & ENHANCED
   ============================================ */
.pulse-node {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 24px rgba(98, 102, 254, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70% 70%;
    cursor: pointer;
}

.pulse-node {
    width: 140px;
    background-color: rgba(98, 102, 254, 0.05);
}

/* Light mode pulse-node */
body .pulse-node {
    width: 140px;
    background-image: url('../images/Icon\ Logo\ -\ Light.png');
    background-color: rgba(79, 70, 229, 0.03);
    box-shadow: 0 0 24px rgba(79, 70, 229, 0.2);
    border-color: rgba(15, 23, 42, 0.15);
}

/* Pulse-node hover effect */
.pulse-node:hover {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 40px rgba(98, 102, 254, 0.5);
    border-color: var(--color-mint);
}

body .pulse-node:hover {
    box-shadow: 0 0 40px rgba(79, 70, 229, 0.4);
}

/* Pulse ring animation */
.pulse-node::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: radialPulse 1.8s infinite ease-out;
    opacity: 0.9;
    border: 2px solid rgba(98, 102, 254, 0.5);
}

body .pulse-node::after {
    border-color: rgba(79, 70, 229, 0.4);
}

@keyframes radialPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Section Header Structure - CPaaS Design */
.section-header {
    max-width: 700px;
    margin: 0 auto 64px;
}

.section-header h2 {
    margin-bottom: 16px;
}

.section-header p {
    font-size: 18px;
    max-width: 580px;
    margin: 0 auto;
}

/* Service Cards Custom Layout */
.card-icon {
    font-size: 36px;
    margin-bottom: 20px;
    display: inline-block;
    transition: var(--transition-bounce);
}

.card:hover .card-icon {
    transform: scale(1.15) rotate(-5deg);
}

.service-detail-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.service-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.icon-frame {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card:hover .icon-frame {
    transform: scale(1.1) rotate(5deg);
    border-color: var(--color-indigo);
    box-shadow: 0 0 20px rgba(98, 102, 254, 0.15);
}

.action-row {
    margin-top: 24px;
    border-top: 1px solid var(--glass-border);
    padding-top: 16px;
    transition: border-color 0.3s ease;
}

.card:hover .action-row {
    border-color: rgba(98, 102, 254, 0.3);
}

/* Statistical Metrics Container Grid */
.stats-section {
    padding: 56px 0;
    margin: 0 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.stat-item h3 {
    font-size: 44px;
    font-weight: 900;
    color: var(--text-light);
    margin-bottom: 4px;
    font-family: var(--font-display);
    transition: color 0.3s ease;
}

.stat-item {
    transition: var(--transition-bounce);
}

.stat-item:hover {
    transform: translateY(-4px);
}

/* Dual Column Content Breakdowns */
.dual-panel {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    padding: 64px;
}

.governance-graphic {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
}

.governance-graphic:hover {
    border-color: rgba(98, 102, 254, 0.3);
    box-shadow: 0 0 40px rgba(98, 102, 254, 0.05);
}

.gov-node {
    padding: 12px 24px;
    background: rgba(98, 102, 254, 0.15);
    border: 1px solid var(--color-indigo);
    border-radius: var(--radius-md);
    font-weight: bold;
    font-size: 14px;
    z-index: 2;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.gov-node:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(98, 102, 254, 0.2);
}

.gov-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, var(--color-indigo), var(--color-mint));
}

.gov-sub-grid {
    display: flex;
    gap: 16px;
    width: 100%;
}

.gov-sub-node {
    flex: 1;
    text-align: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.gov-sub-node:hover {
    background: rgba(98, 102, 254, 0.08);
    border-color: var(--color-indigo);
    transform: translateY(-2px);
}

/* Chronological Timeline Array Components */
.timeline-container {
    position: relative;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.timeline-container::before {
    content: '';
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 52px;
    width: 2px;
    background: var(--glass-border);
    transition: background 0.3s ease;
}

.timeline-node {
    display: flex;
    gap: 40px;
    position: relative;
    z-index: 2;
    transition: var(--transition-smooth);
}

.timeline-node:hover {
    transform: translateX(8px);
}

.time-marker {
    min-width: 70px;
    height: 26px;
    background: var(--color-core-blue);
    border: 1px solid var(--color-indigo);
    border-radius: 100px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--badge-text);
    transition: all 0.3s ease;
}

.timeline-node:hover .time-marker {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(98, 102, 254, 0.2);
}

.time-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--glass-border);
    padding: 20px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.timeline-node:hover .time-content {
    border-color: rgba(98, 102, 254, 0.3);
    background: rgba(98, 102, 254, 0.03);
}

/* Testimonial Quote Blocks */
.testimonial-wrapper {
    max-width: 800px;
    margin: 40px auto 0;
    padding: 48px;
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.testimonial-wrapper:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(98, 102, 254, 0.2);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}

.quote {
    font-size: 22px;
    font-family: var(--font-display);
    color: var(--text-light);
    font-style: italic;
    margin-bottom: 24px;
    font-weight: 400;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.testimonial-user {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Subscriptions Pricing Tiers Layout */
.pricing-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 32px;
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pricing-card:hover {
    transform: translateY(-8px);
    border-color: rgba(98, 102, 254, 0.3);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4);
}

.plan-header h4 {
    font-size: 22px;
    margin-bottom: 8px;
}

.price-display {
    font-size: 28px;
    font-weight: 900;
    font-family: var(--font-display);
    color: var(--text-light);
    margin: 20px 0 8px;
    transition: color 0.3s ease;
}

.divider {
    border: none;
    height: 1px;
    background: var(--glass-border);
    margin: 8px 0;
    transition: background 0.3s ease;
}

.plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    flex: 1;
    margin-bottom: 32px;
}

.plan-features li {
    transition: var(--transition-smooth);
    padding: 4px 0;
}

.plan-features li:hover {
    transform: translateX(4px);
}

.plan-features li.disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

.featured-tier {
    transform: scale(1.03);
    background: linear-gradient(135deg, rgba(98, 102, 254, 0.08), rgba(189, 243, 223, 0.05));
    border-color: rgba(98, 102, 254, 0.3);
    box-shadow: 0 0 40px rgba(98, 102, 254, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.featured-tier:hover {
    transform: scale(1.04) translateY(-8px);
    box-shadow: 0 0 60px rgba(98, 102, 254, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.special-tag {
    position: absolute;
    top: -14px;
    left: 32px;
    background: var(--tag-bg);
    color: var(--tag-text);
    border: none;
    padding: 6px 18px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(98, 102, 254, 0.3);
    transition: all 0.3s ease;
}

.special-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(98, 102, 254, 0.4);
}

/* Data Tables Utilities */
.table-container {
    overflow-x: hidden;
    margin-top: 40px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
}

.data-table th,
.data-table td {
    padding: 18px 24px;
    border-bottom: 1px solid var(--glass-border);
    transition: all 0.3s ease;
}

.data-table th {
    font-family: var(--font-display);
    color: var(--text-light);
    font-weight: 600;
    background: var(--table-header-bg);
    transition: all 0.3s ease;
}

.data-table tr {
    transition: all 0.3s ease;
}

.data-table tr:hover td {
    background: var(--table-hover);
}

/* Interactive Dropdown Accordion Blocks */
.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion-item {
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition-smooth);
    border: 1px solid var(--glass-border);
    background: var(--card-bg);
}

.accordion-item:hover {
    border-color: rgba(98, 102, 254, 0.2);
}

.accordion-trigger {
    width: 100%;
    padding: 22px 28px;
    background: transparent;
    border: none;
    color: var(--text-light);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.4s ease !important;
}

.accordion-trigger:hover {
    color: var(--enterprise-blue);
}

.chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: var(--transition-smooth);
}

.accordion-item.open .chevron {
    transform: rotate(-135deg);
    border-color: var(--color-mint);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background: var(--accordion-bg);
}

.accordion-content p {
    padding: 16px 28px 24px;
    font-size: 14px;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

/* Corporate Contact Form Fields */
.enterprise-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Honeypot field: a real, focusable input moved off-screen (never display:none,
   which some bots skip) so a script filling it still lands in form.website.value */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.form-label {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-light);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.form-control {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    padding: 14px 18px;
    color: var(--text-light);
    font-family: var(--font-primary);
    font-size: 14px;
    border-radius: var(--radius-md);
    transition: var(--transition-smooth);
}

.form-control:hover {
    border-color: rgba(98, 102, 254, 0.3);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-indigo);
    box-shadow: 0 0 12px var(--input-focus);
    background: var(--input-bg);
    transform: scale(1.01);
}

.contact-meta-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.metadata-card {
    padding: 2em;
    /* height: 100%; */
    min-height: 100px;
}

/* Interactive Graphical Grid Overlay Map Alternative */
.interactive-map-placeholder {
    height: 100%;
    min-height: 24px;
    background: var(--map-bg);
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.map-grid-overlay {
    position: absolute;
    width: 200%;
    height: 200%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 16px 16px;
    transform: rotate(-5deg);
    transition: background-image 0.3s ease;
}

.active-node-indicator {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.active-node-indicator::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--color-mint);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--color-mint);
}

.active-node-indicator::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1px solid var(--color-mint);
    border-radius: 50%;
    animation: radialPulse 2s infinite linear;
}

.active-node-indicator span {
    position: absolute;
    top: 14px;
    font-size: 10px;
    font-family: monospace;
    color: var(--text-muted);
    white-space: nowrap;
}

.map-label {
    position: absolute;
    bottom: 16px;
    left: 24px;
    color: rgba(255, 255, 255, 0.6);
    font-family: monospace;
    font-size: 10px;
    transition: color 0.3s ease;
}

/* Global Enterprise Site Footer */
.site-footer {
    border-top: 1px solid var(--glass-border);
    background: var(--footer-bg);
    padding: 80px 0 0px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 24;
}

.footer-brand .brand-logo {
    margin-bottom: 16px;
}

.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links-col h5 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--footer-heading);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.footer-links-col a {
    font-size: 13px;
    color: var(--footer-muted);
    text-decoration: none;
    transition: var(--transition-smooth);
}

.footer-links-col a:hover {
    color: var(--enterprise-blue);
    transform: translateX(4px);
}

.footer-newsletter h5 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--footer-heading);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.footer-brand p,
.footer-newsletter p,
.footer-base p,
.base-policies a {
    color: var(--footer-muted);
    transition: color 0.3s ease;
}

.newsletter-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.newsletter-form .form-control {
    transition: var(--transition-smooth);
}

.newsletter-form .form-control:focus {
    transform: scale(1.02);
}

.newsletter-form .btn {
    transition: var(--transition-smooth);
}

.newsletter-form .btn:hover {
    transform: scale(1.05) translateY(-2px);
}

.footer-base {
    border-top: 1px solid var(--footer-border);
    padding-top: 32px;
    padding-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.3s ease;
}

.base-policies {
    display: flex;
    gap: 24px;
}

.base-policies a {
    font-size: 12px;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.base-policies a:hover {
    color: var(--text-light);
    transform: translateY(-2px);
}

/* Interface Element Form Utilities */
.hidden {
    display: none !important;
}

.text-danger {
    color: #ff6b6b;
}

.mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.mobile-toggle .bar {
    width: 22px;
    height: 2px;
    background: var(--text-light);
    transition: var(--transition-smooth);
}

.mobile-toggle:hover .bar {
    background: var(--color-mint);
}

/* Blob Animations */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

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

.animate-blob {
    animation: blob 15s ease-in-out infinite;
}

/* Fade Up Animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
}

.delay-2 {
    animation-delay: 0.3s;
}

/* Badge Pulse */
.badge-pill .animate-ping {
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Ripple Effect */
.btn.ripple {
    /* position: relative; */
    /* overflow: hidden; */
}

.industries-section {
    margin: 0 auto;
    max-width: 1200px;
    transition: background 0.3s ease;
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
}

.industries-section {
    margin: 80px auto;
}

@media (max-width: 576px) {
    .industries-section {
        padding: 0 16px;
    }
}

.custom-panel{
    max-width: 1200px;
        border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
    background-size: cover !important;
    margin: 0 auto;
}
.custom-panel::before {
    border-radius: var(--radius-lg) !important;
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    filter: brightness(1.2) saturate(1.2) contrast(1);
    z-index: 0;
    transition: filter 0.5s ease;
}

/* Section Spacing */
.governance-section{
    width: 100% !important;
    background: var(--gov-section-background) center no-repeat !important;
padding: 120px 24px !important;
    margin: 80px auto !important;
    box-sizing: border-box;

}

@media (max-width: 576px) {
    .governance-section {
        padding: 80px 16px !important;
    }
}

.cta-banner {
    margin: 2em auto;
    padding: 2em;
}

.testimonial-section {
    margin: 2em auto;
    padding: 2em;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .dual-panel {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 16px !important;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 28px;
    }

    .grid-2,
    .grid-2-bs,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .nav-links {
        display: flex;
    }

    .nav-links {
        background-color: var(--bg-midnight);
        color: var(--text-light);
    }

    .nav-item {
        color: var(--text-light);
    }

    .nav-links {
        display: flex;
    }

    .mobile-toggle {
        display: flex;
    }

    .navbar {
        top: 0 !important;
    }

    .nav-container {
        padding: 20px 20px;
        border-radius: 0;
    }

    .hero-section {
        padding: 120px 0 60px;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }

    .dashboard-preview {
        flex-direction: column;
        height: auto;
    }

    .sidebar-mock {
        width: 100%;
        flex-direction: row;
        padding: 12px 20px;
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
    }

    .chart-header {
        flex-direction: column;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-base {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .base-policies {
        flex-wrap: wrap;
        justify-content: center;
    }

    .featured-tier {
        transform: scale(1);
    }

    .featured-tier:hover {
        transform: translateY(-4px);
    }

    .dual-panel {
        padding: 10px !important;
    }

    .timeline-container {
        padding: 20px;
    }

    .timeline-container::before {
        left: 20px;
    }

    .timeline-node {
        flex-direction: column;
        gap: 12px;
    }

    .time-marker {
        align-self: flex-start;
    }

    .glass-panel:hover {
        transform: translateY(-4px) scale(1.005);
    }

    .card:hover {
        transform: translateY(-4px) scale(1.005);
    }

    .pulse-node {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 16px 16px !important;
    }

    .stat-item h3 {
        font-size: 32px;
    }

    .pricing-card {
        padding: 24px 20px;
    }

    .testimonial-wrapper {
        padding: 24px;
    }

    .window-chrome {
        padding: 8px 12px;
    }

    .window-title {
        font-size: 10px;
        margin-left: 8px;
    }

    .hero-blob {
        opacity: 0.3;
    }

    .hero-blob-1,
    .hero-blob-2,
    .hero-blob-3,
    .hero-blob-4 {
        width: 200px;
        height: 200px;
    }

    .pulse-node {
        width: 60px;
        height: 60px;
    }
}

/* Print Styles */
@media print {

    .navbar,
    .bg-blur-container,
    .hero-ambient,
    .site-footer {
        display: none;
    }

    .hero-section {
        padding: 40px 0;
    }

    .glass-panel {
        background: white;
        border: 1px solid #ddd;
        box-shadow: none;
    }

    body {
        background: white;
        color: black;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: black;
    }

    p {
        color: #333;
    }
}

.logo-light {
    display: block;
}

.stack-section {
    margin: 3em auto;
}

/* ABOUT SECTION*/
/* ============================================ */

.about-section {
    /* padding: 80px 0; */
    background: var(--bg-midnight);
    transition: background 0.3s ease;
    position: relative;
    overflow: hidden;
    margin: 0 auto; 
}

.about-section {
    background: var(--bg-midnight);
}

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

/* Left Column */
.about-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-heading {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-light);
    margin-bottom: 8px;
}

.about-text {
    font-size: 16px;
    color: var(--text-muted);
    max-width: 90%;
    line-height: 1.7;
}

.about-text:last-of-type {
    margin-bottom: 8px;
}

.about-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 8px 0 24px;
}

.about-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-light);
    font-size: 15px;
}

.about-features .feature-icon {
    color: var(--color-mint);
    font-size: 22px;
}

.about-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
}

.about-cta .material-symbols-outlined {
    font-size: 30px;
}

/* Right Column */
.about-visuals {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Years Stat Block */
.years-stat {
    padding: 32px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.years-stat:hover {
    transform: translateY(-4px);
}

.years-stat-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.years-image {
    height: 200px !important;
    width: auto;
    /* filter: drop-shadow(0 0 20px rgba(98, 102, 254, 0.3)); */
    transition: filter 0.3s ease;
}

.years-stat:hover .years-image {
    /* filter: drop-shadow(0 0 30px rgba(98, 102, 254, 0.5)); */
}

.years-label {
    font-size: 16px;
    color: var(--text-muted);
    text-align: left;
    max-width: 250px;
    line-height: 1.4;
}

.years-label strong {
    color: var(--text-light);
}

.years-divider {
    margin-top: 16px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-indigo), var(--color-mint), transparent);
    border-radius: 2px;
}

/* Illustrations Grid */
.about-illustrations {
    display: grid;
    gap: 20px;
}

.illustration-card.glass-panel {
    border: 2px solid var(--glass-border);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.illustration-card {
    padding: 24px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.illustration-card:hover {
    transform: translateY(-4px) scale(1.02);
}

.illustration-icon {
    font-size: 48px;
    color: var(--color-indigo);
}

.illustration-card .chat-bubbles {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.illustration-card .chat-bubble {
    color: var(--color-mint);
    font-size: 28px;
}

.illustration-label {
    margin-top: auto;
    color: var(--text-light);
    letter-spacing: 0.02em;
    font-size: 16px;
    margin: 0;
}

.country-count {
    color: var(--text-light);
    font-size: 58px;
    font-weight: 900;
    margin-top: 4px;
}

/* Network Icons in second card */
.network-icons {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    font-size: 28px;
}

.network-icons .whatsapp-icon {
    color: #25D366;
    filter: drop-shadow(0 0 8px rgba(37, 211, 102, 0.5));
}

.network-icons .network-link {
    color: var(--text-muted);
    font-size: 16px;
}

.network-icons .network-node {
    color: var(--text-muted);
    font-size: 24px;
}

/* Responsive */
@media (max-width: 1024px) {
    .about-grid {
        gap: 20px;
    }

    .about-heading {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .nav-item {
        color: var(--nav-link) !important;
    }

    .nav-item.active,
    .nav-item:hover {
        color: var(--active-menu-item) !important;
    }

    .about-section {
        padding: 20px 0;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-heading {
        font-size: 32px;
    }

    .about-text {
        max-width: 100%;
    }

    .about-cta {
        align-self: center;
        width: 100%;
        justify-content: center;
    }

    .about-features li {
        font-size: 14px;
    }

    .about-visuals {
        gap: 24px;
    }

    .years-stat-content {
        flex-direction: column;
        text-align: center;
    }

    .years-label {
        text-align: center;
        max-width: 100%;
    }

    .about-illustrations {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .nav-item {
        color: var(--nav-link) !important;
    }

    .nav-item.active,
    .nav-item:hover {
        color: var(--active-menu-item) !important;
    }

    .about-section {
        padding: 40px 0;
    }

    .about-heading {
        font-size: 28px;
    }

    .about-illustrations {
        grid-template-columns: 1fr;
    }

    .years-image {
        height: 90px !important;
    }
}

/* Animated Grid Pattern via pseudo-elements */
.about-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* background-image:
        linear-gradient(rgba(189, 243, 223, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(189, 243, 223, 0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridScroll 20s linear infinite; */
    opacity: 1;
}

/* Light theme grid */
body .about-section::before {
    background-image:
        linear-gradient(rgba(91, 100, 117, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 100, 117, 0.12) 1px, transparent 1px);
}

/* Secondary animated layer - diagonal grid with glow */
.about-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(45deg, rgba(189, 243, 223, 0.04) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(189, 243, 223, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridPulse 3s ease-in-out infinite alternate;
    opacity: 1;
}

/* Light theme secondary grid */
body .about-section::after {
    background-image:
        linear-gradient(45deg, rgba(91, 100, 117, 0.08) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(91, 100, 117, 0.08) 1px, transparent 1px);
}

/* Grid glow overlay - mint for dark, gray for light */
.about-section .grid-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 30% 40%, rgba(189, 243, 223, 0.06), transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(189, 243, 223, 0.04), transparent 50%);
    animation: glowPulse 8s ease-in-out infinite alternate;
    opacity: 1;
}

body .about-section .grid-glow {
    background: radial-gradient(circle at 30% 40%, rgba(91, 100, 117, 0.1), transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(91, 100, 117, 0.08), transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(79, 70, 229, 0.04), transparent 40%);
}

/* Content container - sits above background */
.about-section .container {
    position: relative;
    z-index: 1;
}

/* Keyframe Animations */
@keyframes gridScroll {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(60px, 60px);
    }
}

@keyframes gridPulse {
    0% {
        opacity: 0.4;
        transform: scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05) rotate(1deg);
    }

    100% {
        opacity: 0.6;
        transform: scale(0.95) rotate(-1deg);
    }
}

@keyframes glowPulse {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.4;
        transform: scale(0.95);
    }
}

/* Add subtle floating dots for extra dimension */
.about-section .grid-dots {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(189, 243, 223, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 25% 65%, rgba(189, 243, 223, 0.15) 2px, transparent 2px),
        radial-gradient(circle at 50% 30%, rgba(189, 243, 223, 0.18) 2px, transparent 2px),
        radial-gradient(circle at 70% 80%, rgba(189, 243, 223, 0.12) 2px, transparent 2px),
        radial-gradient(circle at 90% 45%, rgba(189, 243, 223, 0.16) 2px, transparent 2px),
        radial-gradient(circle at 40% 90%, rgba(98, 102, 254, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 80% 15%, rgba(98, 102, 254, 0.1) 2px, transparent 2px);
    background-size: 120px 120px;
    animation: dotFloat 12s ease-in-out infinite alternate;
    opacity: 1;
}

body .about-section .grid-dots {
    background-image:
        radial-gradient(circle at 10% 20%, rgba(91, 100, 117, 0.25) 2px, transparent 2px),
        radial-gradient(circle at 25% 65%, rgba(91, 100, 117, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 50% 30%, rgba(91, 100, 117, 0.22) 2px, transparent 2px),
        radial-gradient(circle at 70% 80%, rgba(91, 100, 117, 0.18) 2px, transparent 2px),
        radial-gradient(circle at 90% 45%, rgba(91, 100, 117, 0.2) 2px, transparent 2px),
        radial-gradient(circle at 40% 90%, rgba(79, 70, 229, 0.08) 2px, transparent 2px),
        radial-gradient(circle at 80% 15%, rgba(79, 70, 229, 0.08) 2px, transparent 2px);
}

@keyframes dotFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(15px, -10px) scale(1.1);
    }

    50% {
        transform: translate(-10px, 20px) scale(0.9);
    }

    75% {
        transform: translate(20px, 5px) scale(1.05);
    }

    100% {
        transform: translate(-15px, -15px) scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-section::before {
        background-size: 40px 40px;
        animation-duration: 15s;
    }

    .about-section::after {
        background-size: 30px 30px;
    }

    .about-section .grid-dots {
        background-size: 80px 80px;
    }
}

@media (max-width: 480px) {
    .about-section::before {
        background-size: 30px 30px;
        animation-duration: 12s;
    }

    .about-section::after {
        background-size: 20px 20px;
    }

    .about-section .grid-dots {
        background-size: 60px 60px;
    }
}

/* ============================================
   HORIZONTAL MARQUEE SECTION
   ============================================ */
.marquee-section {
    padding: 3rem 0;
    overflow: hidden;
    /* background: var(--bg-midnight); */
    /* border-top: 1px solid var(--glass-border); */
    /* border-bottom: 1px solid var(--glass-border); */
    position: relative;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 35s linear infinite;
    will-change: transform;
}

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

.marquee-content {
    display: flex;
    gap: 1.5rem;
    padding-right: 1.5rem;
    flex-shrink: 0;
}

.industries-section.container {
    margin: 80px auto;
    background: var(--bg-midnight);
}

.marquee-item {
    color: var(--text-light);
    /* background: var(--card-bg); */
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    white-space: nowrap;
    padding: 0.85rem 1.75rem;
    border-radius: 999px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
}

.marquee-item:hover {
    border-color: var(--color-indigo);
    background: rgba(98, 102, 254, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(98, 102, 254, 0.15);
}

body .marquee-item:hover {
    background: rgba(79, 70, 229, 0.08);
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.15);
}

.marquee-item .marquee-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-mint);
    box-shadow: 0 0 8px var(--color-mint);
    flex-shrink: 0;
}

body .marquee-item .marquee-dot {
    background: var(--color-indigo);
    box-shadow: 0 0 8px var(--color-indigo);
}

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

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

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}

@media (max-width: 768px) {
    .marquee-section {
        padding: 2rem 0;
    }

    .marquee-item {
        font-size: 0.875rem;
        padding: 0.7rem 1.25rem;
    }

    .marquee-content {
        gap: 1rem;
        padding-right: 1rem;
    }
}

/* ========================================
   PAGE HERO SECTION
   ======================================== */
.page-hero {
    padding: 8rem 0 4rem;
    position: relative;
}

.page-hero .badge-pill {
    margin-bottom: 1.5rem;
}

.page-hero h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.page-hero .hero-sub {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.125rem;
    line-height: 1.7;
}

/* ========================================
   SECTION SPACING
   ======================================== */
.section-py {
    padding: 5rem 0;
}

.section-pys {
    padding: 1rem 0;
}

.section-py.bg-subtle {
    background: rgba(var(--cpaaas-primary-rgb), 0.03);
}

/* ========================================
   FEATURE CARDS
   ======================================== */
.feature-card-left,
.feature-card-right {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card-left:hover,
.feature-card-right:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.feature-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--cpaaas-primary), var(--cpaaas-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
}

.feature-card-left .feature-icon-wrapper {
    float: left;
    margin-right: 1.5rem;
}

.feature-card-right .feature-icon-wrapper {
    float: right;
    margin-left: 1.5rem;
}

/* ========================================
   TIMELINE STYLES
   ======================================== */
.timeline-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.timeline-container {
    position: relative;
    padding: 3rem 2rem;
}

.timeline-node {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
    position: relative;
}

.timeline-node:last-child {
    margin-bottom: 0;
}

.time-marker {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--cpaaas-primary), var(--cpaaas-secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: white;
    text-align: center;
    box-shadow: 0 10px 30px rgba(98, 102, 254, 0.3);
}

.time-content {
    flex: 1;
    padding-top: 0.5rem;
}

.time-content h4 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.timeline-line {
    position: absolute;
    left: 50px;
    top: 100px;
    bottom: 50px;
    width: 2px;
    background: linear-gradient(to bottom, var(--cpaaas-primary), transparent);
}

/* ========================================
   TECH CARDS
   ======================================== */
.tech-card {
    text-align: center;
    padding: 2.5rem 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.tech-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
}

/* ========================================
   SERVICE CARDS
   ======================================== */
.service-card {
    padding: 2.5rem 2rem;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--cpaaas-primary), var(--cpaaas-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.service-link {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.featured-service {
    border: 2px solid var(--cpaaas-primary);
    box-shadow: 0 0 30px rgba(98, 102, 254, 0.2);
}

.service-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, var(--cpaaas-secondary), var(--cpaaas-accent));
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   PRICING CARDS ENHANCEMENTS
   ======================================== */
.pricing-card {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.plan-header {
    text-align: center;
    margin-bottom: 2rem;
}

.plan-header h4 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.price-display{
    color: var(--cpaaas-primary) !important;
}

.price-display {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cpaaas-primary);
    margin-top: 1rem;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
    flex: 1;
}

.plan-features li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
}

.plan-features li.disabled {
    opacity: 0.5;
    color: var(--text-muted);
}

.plan-features li:last-child {
    border-bottom: none;
}

.featured-tier {
    position: relative;
    border: 2px solid var(--cpaaas-primary);
    box-shadow: 0 0 40px rgba(98, 102, 254, 0.25);
}

.special-tag {
    background: linear-gradient(135deg, var(--cpaaas-secondary), var(--cpaaas-accent));
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    display: inline-block;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========================================
   TABLE STYLES
   ======================================== */
.table-wrapper {
    overflow-x: auto;
}

.table-container {
    border-radius: 20px;
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table thead {
    background: rgba(98, 102, 254, 0.1);
}

.data-table th {
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: var(--cpaaas-primary);
}

.data-table td {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.data-table tbody tr:hover {
    background: rgba(98, 102, 254, 0.05);
}

/* ========================================
   CONTACT PAGE ENHANCEMENTS
   ======================================== */
.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.metadata-card {
    padding: 1rem 2rem;
}

.info-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--cpaaas-primary), var(--cpaaas-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.interactive-map-placeholder {
    height: 300px;
    position: relative;
    background: linear-gradient(135deg, rgba(98, 102, 254, 0.1), rgba(189, 243, 223, 0.1));
    border-radius: 20px;
    overflow: hidden;
}

.map-grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(98, 102, 254, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(98, 102, 254, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.5;
}

.active-node-indicator {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--cpaaas-secondary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 2s infinite;
    cursor: pointer;
}

.active-node-indicator span {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: var(--bg-primary);
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.active-node-indicator:hover span {
    opacity: 1;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(189, 243, 223, 0.7);
    }

    50% {
        box-shadow: 0 0 0 15px rgba(189, 243, 223, 0);
    }
}

.map-label {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ========================================
   ACCORDION ENHANCEMENTS
   ======================================== */
.accordion-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-item {
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.accordion-trigger {
    width: 100%;
    padding: 1.5rem 2rem;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    transition: background 0.3s ease;
}

.accordion-trigger:hover {
    background: rgba(98, 102, 254, 0.05);
}

.accordion-trigger .chevron {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
    margin-left: 1rem;
}

.accordion-trigger .chevron::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--cpaaas-primary);
    border-bottom: 2px solid var(--cpaaas-primary);
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-trigger .chevron::before {
    transform: translate(-50%, -50%) rotate(-135deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 2rem;
}

.accordion-item.active .accordion-content {
    max-height: 500px;
    padding: 0 2rem 1.5rem;
}

.accordion-content p {
    color: var(--text-muted);
    line-height: 1.7;
}

/* ========================================
   CTA BOX
   ======================================== */
.cta-box {
    padding: 4rem 3rem;
    border-radius: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.cta-box h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.margin-bottom-lg {
    margin-bottom: 2rem;
}

.margin-bottom-xl {
    margin-bottom: 3rem;
}

.gap-lg {
    gap: 2rem;
}

.gap-xl {
    gap: 3rem;
}

.max-width-md {
    max-width: 800px;
    margin: 0 auto;
}

.size-full {
    width: 100%;
}

.margin-left-sm {
    margin-left: 1rem;
}

/* ========================================
   ANIMATION DELAYS
   ======================================== */
.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.wave-pattern {
    transition: all 0.3s ease;
    border-radius: 10% 50% 20px;
    filter: transparent;
    background: url('../images/pattern-5.png') no-repeat;
}

.wave-pattern:hover {
    filter: transparent;
    border-radius: 10% 50% 20px;
    background: url('../images/pattern-5.png') no-repeat;
}
.about-section{
        background: var(--bg-midnight);
    padding: 80px 24px;
    /* Add padding for side spacing */
    width: 100%;
}

.features-section {
    background: var(--bg-midnight);
    padding: 80px 24px;
    /* Add padding for side spacing */
    width: 100%;
}

.features-section .grid {
    max-width: 1200px;
    margin: 0 auto;
    /* Center the grid content */
}

/* Feature SVG Icons */
.card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
}

.feature-svg-icon {
    width: 48px;
    height: 48px;
    display: block;
    fill: currentColor;
    display: block;
    filter: var(--icon-filter);
    transition: transform 0.3s ease;
}

/* Optional: Add hover effect */
.card:hover .feature-svg-icon {
    transform: scale(1.1);
}

.underlined-line {
    width: 80px;
    margin: 12px auto 24px auto;
    height: 2px;
    background: var(--gb-line);
    box-shadow: 0 0 8px var(--color-mint);
}

.custom-btn{
    outline: none;
    border: none;
    background: linear-gradient(135deg, var(--cpaaas-primary), var(--cpaaas-accent));
}

.main-heading{
    /* background: var(--main-overlay); */
}

/* Developer-Friendly section as a connected step process */
.dev-steps-grid {
    display: flex;
    align-items: stretch;
    gap: 14px;
}

.dev-steps-grid .dev-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

.dev-steps-grid .dev-step h4 {
    margin-bottom: 8px;
}

.dev-steps-grid .step-connector {
    flex: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-indigo);
    opacity: 0.5;
}

.dev-steps-grid .step-arrow {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.dev-steps-grid .dev-step:hover + .step-connector .step-arrow {
    transform: translateX(4px);
    opacity: 1;
}

.dev-steps-grid .step-number {
    position: absolute;
    top: 20px;
    right: 24px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--color-indigo);
    opacity: 0.55;
}

@media (max-width: 992px) {
    .dev-steps-grid {
        flex-direction: column;
        width: 100%; 
    }
    .dev-steps-grid .industry-card .dev-step{
        width: 100% !important;
    }

    .dev-steps-grid .step-connector {
        flex: 0 0 auto;
        padding: 2px 0;
    }

    .dev-steps-grid .step-arrow {
        transform: rotate(90deg);
    }

    .dev-steps-grid .dev-step:hover + .step-connector .step-arrow {
        transform: rotate(90deg) translateX(4px);
    }
}

.industry-icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(98, 102, 254, 0.08);
    border: 1px solid rgba(98, 102, 254, 0.15);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.animated-icon {
    width: 36px;
    height: 36px;
    color: var(--color-indigo);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animated-icon.float {
    animation: float 3s ease-in-out infinite;
}

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

/* 2. Pulse Animation - Gentle scale */
.animated-icon.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* 3. Rotate Animation - Slow spin */
.animated-icon.rotate {
    animation: rotate 8s linear infinite;
}

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

/* 4. Bounce Animation */
.animated-icon.bounce {
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    40% {
        transform: translateY(-15px) scale(1.05);
    }
    60% {
        transform: translateY(-5px) scale(0.95);
    }
}

/* 5. Swing Animation */
.animated-icon.swing {
    animation: swing 2s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes swing {
    0%, 100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

/* 6. Fade In Up Animation (on load) */
.animated-icon.fade-up {
    animation: fadeUp 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 7. Draw Stroke Animation (for stroke-based SVGs) */
.animated-icon.draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 2s ease-in-out forwards;
}

@keyframes draw {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* 8. Wobble Animation */
.animated-icon.wobble {
    animation: wobble 1.5s ease-in-out infinite;
}

@keyframes wobble {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    15% {
        transform: rotate(-5deg) scale(1.05);
    }
    30% {
        transform: rotate(5deg) scale(1.05);
    }
    45% {
        transform: rotate(-3deg) scale(1.02);
    }
    60% {
        transform: rotate(3deg) scale(1.02);
    }
    80% {
        transform: rotate(-1deg) scale(1);
    }
}

/* Card Hover - Icon animations */
.industry-card:hover .animated-icon {
    transform: scale(1.15) rotate(-5deg);
    color: var(--cpaaas-primary);
}

.industry-card:hover .industry-icon-wrapper {
    transform: translateY(-5px) scale(1.05);
    background: rgba(98, 102, 254, 0.15);
    border-color: rgba(98, 102, 254, 0.3);
    box-shadow: 0 10px 40px rgba(98, 102, 254, 0.15);
}


.about-company-section {
    padding: 80px 0;
    background: var(--bg-midnight);
    transition: background 0.3s ease;
}

/* Option 1: Split Layout */
.about-company-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-company-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-company-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 90%;
}

.about-company-stats {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--glass-bg);
}

.about-company-stats .stat-item {
    display: table-cell;
    padding: 28px 20px;
    text-align: center;
    vertical-align: middle;
    border-right: 1px solid var(--glass-border);
    transition: all 0.3s ease;
}

.about-company-stats .stat-item:last-child {
    border-right: none;
}
.about-company-stats .stat-item::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

.about-company-stats .stat-item .stat-number {
    font-size: 38px;
    font-weight: 900;
    font-family: 'Azonix', sans-serif;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.about-company-stats .stat-item .stat-label {
    display: inline-block;
}

.about-company-cta {
    display: flex;
    gap: 16px;
    padding-top: 16px;
}

.about-company-visual .visual-card {
    padding: 40px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.network-visualization {
    position: relative;
    width: 200px;
    height: 200px;
}
.node {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-mint);
    box-shadow: 0 0 20px var(--color-mint);
}

.node-1 { top: 20%; left: 20%; animation: nodePulse 2s ease-in-out infinite; }
.node-2 { top: 20%; right: 20%; animation: nodePulse 2s ease-in-out infinite 0.5s; }
.node-3 { bottom: 30%; left: 40%; animation: nodePulse 2s ease-in-out infinite 1s; }
.node-4 { bottom: 20%; right: 30%; animation: nodePulse 2s ease-in-out infinite 1.5s; }
.node-5 { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; }

.features-section .first-sect{
    gap: 2em;
}

.growth-metrics-container {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 28px;
    transition: all 0.3s ease;
}

.growth-metrics-container:hover {
    border-color: rgba(98, 102, 254, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Header */
.metrics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
}

.metrics-title {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-light);
    transition: color 0.3s ease;
}

.metrics-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    padding: 4px 14px;
    border-radius: 20px;
    background: rgba(98, 102, 254, 0.08);
    border: 1px solid var(--glass-border);
}

/* Table Wrapper */
.metrics-table-wrapper {
    overflow-x: hidden;
    overflow-y: hidden;

    border-radius: var(--radius-md);
}

/* Table Styles */
.growth-metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Table Header */
.growth-metrics-table thead {
    background: var(--table-header-bg);
    border-bottom: 2px solid var(--table-border);
}

.growth-metrics-table thead th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    transition: color 0.3s ease;
}

.growth-metrics-table thead th:first-child {
    padding-left: 20px;
}

.growth-metrics-table thead th:last-child {
    text-align: right;
    padding-right: 20px;
}

/* Table Body */
.growth-metrics-table tbody tr {
    border-bottom: 1px solid var(--table-border);
    transition: all 0.3s ease;
}

.growth-metrics-table tbody tr:nth-child(even) {
    background: var(--table-stripe);
}

.growth-metrics-table tbody tr:hover {
    background: var(--table-row-hover);
    transform: scale(1.002);
}

.growth-metrics-table tbody td {
    padding: 16px;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.growth-metrics-table tbody td:first-child {
    padding-left: 20px;
}

.growth-metrics-table tbody td:last-child {
    padding-right: 20px;
}

/* Service Name */
.service-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--text-light);
}

.service-icon {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(98, 102, 254, 0.06);
    border: 1px solid var(--glass-border);
    transition: all 0.3s ease;
}

.growth-metrics-table tbody tr:hover .service-icon {
    background: rgba(98, 102, 254, 0.12);
    border-color: var(--color-indigo);
    transform: scale(1.05);
}

/* Metric Values */
.metric-value {
    font-weight: 600;
    font-family: var(--font-display);
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.metric-value.highlight {
    color: var(--color-mint);
    font-weight: 700;
    position: relative;
}

.metric-value.highlight::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
    opacity: 0.4;
}

body .metric-value.highlight {
    color: var(--color-indigo);
}

/* Growth Indicator */
.growth-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.growth-indicator .arrow {
    font-size: 16px;
    font-weight: 700;
}

.growth-indicator.positive .arrow {
    color: var(--positive-color);
}

.growth-indicator .growth-percent {
    font-weight: 700;
    font-size: 14px;
    color: var(--positive-color);
    min-width: 50px;
}

/* Growth Bar */
.growth-bar {
    width: 80px;
    height: 4px;
    background: var(--growth-bar-bg);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.growth-fill {
    display: block;
    height: 100%;
    background: var(--growth-bar-fill);
    border-radius: 4px;
    transition: width 1s ease;
    position: relative;
}

.growth-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
    animation: shimmer 2s ease-in-out infinite;
}

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

/* Responsive */
@media (max-width: 768px) {
    .growth-metrics-container {
        padding: 16px;
    }
    
    .metrics-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .growth-metrics-table {
        font-size: 12px;
    }
    
    .growth-metrics-table thead th,
    .growth-metrics-table tbody td {
        padding: 10px 12px;
    }
    
    .growth-bar {
        width: 50px;
    }
    
    .service-icon {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
    
    .growth-indicator .growth-percent {
        font-size: 12px;
        min-width: 40px;
    }
}

/* Below ~640px the table becomes unreadable in columns, so it's restacked
   into per-service cards instead of hiding data. Nothing is lost, every
   year and the growth figure are still shown, just relabeled and stacked. */
@media (max-width: 640px) {
    .metrics-table-wrapper {
        overflow: visible;
    }

    .growth-metrics-table,
    .growth-metrics-table thead,
    .growth-metrics-table tbody,
    .growth-metrics-table tr,
    .growth-metrics-table th,
    .growth-metrics-table td {
        display: block;
        width: 100%;
    }

    .growth-metrics-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .growth-metrics-table tbody tr {
        margin-bottom: 14px;
        padding: 16px;
        border: 1px solid var(--table-border);
        border-radius: var(--radius-md);
        background: var(--table-stripe);
    }

    .growth-metrics-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .growth-metrics-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 4px;
        border-bottom: 1px dashed var(--table-border);
    }

    .growth-metrics-table tbody td:last-child {
        border-bottom: none;
    }

    .growth-metrics-table tbody td.service-name {
        justify-content: flex-start;
        gap: 10px;
        padding: 0 4px 12px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--table-border);
        font-size: 15px;
    }

    .growth-metrics-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
    }

    .growth-metrics-table tbody td.growth-indicator {
        justify-content: space-between;
    }

    .growth-bar {
        width: 70px;
    }
}

.service-icon {
    padding: 6px;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* Light mode - dark icons */
body .service-icon {
    padding: 6px;
    filter: brightness(0);
    transition: filter 0.3s ease;
}

/* ============================================
   INDUSTRY-STYLE CARD BASE
   Shared by: Developer-Friendly steps (.dev-step),
   Built-In Tools cards (.tool-card), and the
   Use-Case cards (.usecase-card).
   ============================================ */
.industry-card {
    position: relative;
    padding: 32px 24px;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.4s ease, box-shadow 0.4s ease;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
}

.industry-card > * {
    position: relative;
    z-index: 1;
}

.industry-card h4 {
    color: var(--text-light);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.industry-card .text-muted {
    color: var(--text-muted);
    max-width: 90%;
    margin: 0 auto;
}

.industry-card:hover {
    transform: translateY(-8px);
    border-color: rgba(98, 102, 254, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

body .industry-card:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.industry-card .glow-border {
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, var(--color-indigo), var(--color-mint));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.industry-card:hover .glow-border {
    opacity: 0.6;
}

/* ============================================
   PHOTO-BACKGROUND TREATMENT
   ============================================
   Rest: the photo sits at a constant opacity (never touched again after
   this), covered by a radial-gradient tint (near-black center fading out
   to a lighter navy blue at the edges) that does the actual work of
   keeping text legible.
   Hover moves three things: the photo zooms in slightly, the gradient
   layer's own opacity rises (a deeper, more saturated glow, not a lighter
   one - going lighter would let more of the raw photo through, and these
   stock photos have their own uneven vignettes baked in that turn into
   visible hard edges the more of the photo you expose), and the card
   itself lifts with a deeper shadow.

   Both ::before and ::after also carry .glass-panel, whose own ::after is
   a separate "1px gradient ring" effect using mask-composite:exclude + 1px
   padding (redundant here since a real .glow-border element already draws
   that same ring). Without resetting mask/padding below, that leaks into
   this ::after and clips the gradient tint down to an invisible sliver.
   ============================================ */

/* Every hover-triggered motion on these cards - the card's own lift, its
   shadow, the photo's zoom, the gradient's opacity - shares this exact
   duration and easing, so they read as one single gesture instead of
   several properties racing each other at different speeds. The easing
   itself is a clean, no-overshoot settle (this cubic-bezier is the "expo
   out" curve, decelerates straight into rest, never past it). This
   replaces .industry-card's own base transition, which uses a spring
   easing with real overshoot (cubic-bezier(0.34,1.56,0.64,1) - the 1.56
   pushes translateY past -10px before springing back). That overshoot on
   a vertical lift is what was reading as an unwanted extra "slide" on
   hover; same specificity, later in the file, so it wins. */
.usecase-card,
.tool-card {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.usecase-card::before,
.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Confirmed directly (toggled the photo off entirely and the "seam"
       vanished completely): several of these 11 stock photos have hard-
       edged decoration baked in (glow streaks, chevrons, vignettes), and
       at any opacity high enough to actually see the photo, whichever
       hard edge that particular image happens to have reads as a seam.
       blur() is what actually fixes that, not darkening: it softens any
       hard edge in any of the 11 photos into a gradient-like falloff
       before it ever composites, so nothing can read as a seam regardless
       of that photo's own content. scale(1.25) additionally crops each
       photo's outer band (where this decoration usually sits) out of
       frame.

       Nothing on this layer transitions or ever changes on hover: a
       filter this heavy recomputed every frame while also being scaled
       is exactly what was causing the hover flash/flicker, browsers
       can't cheaply composite blur() and a live transform at once. This
       is now a fixed, static layer - all hover motion happens on the
       gradient (::after, cheap opacity) and the card itself (cheap
       transform), neither of which carry a filter. */
    filter: blur(6px) brightness(0.9) saturate(1.05);
    opacity: 0.88;
    transform: scale(1.25);
    z-index: 0;
    border-radius: var(--radius-lg);
}

/* opacity AND left are both pinned here, matching the rest-state values
   exactly (not left to inherit), because two separate .glass-panel/.card
   effects outrank a plain .tool-card::before rule the instant :hover is
   added to its own selector:
   - .card:hover::before {opacity:1} (generic shimmer) would flash the
     photo to full strength.
   - .glass-panel:hover::before {left:100%} (diagonal shimmer sweep) would
     slide this whole layer - background image included - out past the
     card's right edge, since both share the same ::before this card's
     photo uses. That's what was reading as a white flash: the photo (and
     its dark tint below) sliding away in one uneased jump reveals the
     card's own plain white background for a frame before the layout
     settles back.
   Nothing else changes on this layer on hover, on purpose (see the
   comment above). */
.usecase-card:hover::before,
.tool-card:hover::before {
    opacity: 0.88;
    left: 0;
}

.usecase-card::after,
.tool-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--radius-lg);
    pointer-events: none;
    /* ellipse (not `circle`): a circle's single shared radius, on a card
       this much wider than tall, was sized by the SHORTER axis, so it
       stopped well short of the left/right edges and those went
       flat/static while the narrow center kept transitioning - that
       mismatch (active gradient in the middle, dead flat color out past
       ~60% width on both sides) is what read as a seam. An ellipse gives
       each axis its own radius, so that specific seam is gone regardless
       of the sizing keyword below.

       farthest-corner (not farthest-side): farthest-side's radius only
       reaches the middle of each edge, so on a wide card the corners -
       most of the visible card area - sit past 100% and render as flat,
       solid #00197d; only a small oval at dead center ever showed the
       darker #080c19. farthest-corner stretches that same two-color
       transition all the way out to the corners, so both colors are
       visible across the whole card instead of one flat field with a
       small dark spot in the middle. Scales correctly at any card size,
       nothing here is a hardcoded pixel value.

       Four stops, not two, and #080c19 and #00197d are still the only
       named colors doing the work:
       - 0%-20%: solid #080c19, held flat - a small, dense dark orb
         rather than the card's whole inner half.
       - 60%: #04134b, the exact midpoint blend of the other two - not a
         third brand color, just what smooths the seam between them.
       - 100%: #00197d, the lighter of the two, now doing most of the
         card - the edges/corners read as the dominant color, with the
         dark orb sitting on top of it as a small accent rather than the
         other way around.
       The center is offset off-true-center (42% 38%) rather than dead
       center so it reads as a deliberate light source/vignette rather
       than a static, symmetric blob.

       Alpha lives in each stop's own rgba(), not in one flat layer
       `opacity` - measured directly (screenshotted the rendered card,
       sampled pixels): with a single opacity, the "orb" point came out
       LIGHTER (44,54,78) than the corners (13-14,29-35,86-110), i.e.
       backwards. These stock photos have their own bright spot roughly
       center (the icon graphic) and darken toward their blurred edges -
       at only 0.6 opacity 40% of that photo was still showing through
       and its brightness pattern was overpowering this gradient's,
       fighting it to a draw at best. Baking a high, independent alpha
       into each stop (0.94 core fading to 0.6 edge) instead means this
       gradient's own contrast dominates the composite regardless of
       what that particular photo happens to look like underneath -
       that's what the flat `opacity` below (still present, still
       transitions on hover) can no longer be relied on alone to do. */
    background: radial-gradient(ellipse farthest-corner at 42% 38%,
        rgba(8, 12, 25, 0.94) 0%,
        rgba(8, 12, 25, 0.94) 20%,
        rgba(4, 19, 75, 0.75) 60%,
        rgba(0, 25, 125, 0.6) 100%);
    opacity: 0.92;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    mask: none;
    -webkit-mask: none;
    padding: 0;
}

/* opacity is redeclared here for the same reason as ::before above:
   .glass-panel:hover::after {opacity:0.6} (the redundant gradient-ring
   effect this ::after also carries) outranks a plain .tool-card::after
   rule once :hover is added, and would otherwise fade the tint out to
   the wrong value. */
.usecase-card:hover::after,
.tool-card:hover::after {
    opacity: 1;
}

/* Text sits directly on the photo now that the tint underneath it is
   lighter (0.52 rest / 0.65 hover, down from 0.8 / 0.93) - the shadow is
   what keeps it legible over a bright patch of image instead of the tint
   doing all the work. */
.usecase-card h4,
.tool-card h4 {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

/* !important because the .text-muted utility itself is declared with
   !important (twice, elsewhere in this file) to force var(--text-muted),
   a dark slate meant for light backgrounds - no plain-specificity override
   can beat that on a dark card, regardless of selector weight. */
.usecase-card .text-muted,
.tool-card .text-muted {
    color: rgba(255, 255, 255, 0.78) !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* .industry-card:hover already lifts the card, but these cards also carry
   .reveal-frame.triggered from the scroll-entrance system, whose
   transform:translate(0,0) ties that rule in specificity, so depending on
   stylesheet order it can silently cancel the lift. This compound selector
   outranks it without !important, so ordinary cascade rules (like the
   touch-device guard right below) still apply normally. */
.usecase-card.reveal-frame:hover,
.tool-card.reveal-frame:hover {
    transform: translateY(-10px);
}

@media (hover: none) {
    .usecase-card.reveal-frame:hover,
    .tool-card.reveal-frame:hover {
        transform: none;
    }
}

/* ---- Built-In Tools photos (images/extra-cards/) ---- */
.tool-card.card-bg-2fa::before {
    background-image: url('../images/extra-cards/2fa.jpg');
}

.tool-card.card-bg-masking::before {
    background-image: url('../images/extra-cards/number-masking.jpg');
}

.tool-card.card-bg-recording::before {
    background-image: url('../images/extra-cards/analytics.jpg');
}

.tool-card.card-bg-omni::before {
    background-image: url('../images/extra-cards/omni-channel.jpg');
}

.tool-card.card-bg-chatbot::before {
    background-image: url('../images/extra-cards/chatbot.jpg');
}

/* ---- Use-Case photos (images/extra-cards-2/) ---- */
.usecase-card.usecase-bg-ecommerce::before {
    background-image: url('../images/extra-cards-2/e-commerce.jpg');
}

.usecase-card.usecase-bg-banking::before {
    background-image: url('../images/extra-cards-2/banking.jpg');
}

.usecase-card.usecase-bg-healthcare::before {
    background-image: url('../images/extra-cards-2/healthcare.jpg');
}

.usecase-card.usecase-bg-logistics::before {
    background-image: url('../images/extra-cards-2/logistics.jpg');
}

.usecase-card.usecase-bg-realestate::before {
    background-image: url('../images/extra-cards-2/real-estate.jpg');
}

.usecase-card.usecase-bg-education::before {
    background-image: url('../images/extra-cards-2/education.jpg');
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .industries-section .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .industries-section .grid-3 {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        justify-items: center;
    }

    .industry-card {
        padding: 24px 16px;
        min-height: 180px;
        width: 100%;
        max-width: 320px;
    }

    .industry-card h4 {
        font-size: 15px;
    }

    .industry-card .text-muted {
        font-size: 12px;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .industries-section .grid-3 {
        grid-template-columns: 1fr;
        gap: 16px;
        justify-items: center;
    }

    .industry-card {
        min-height: 160px;
        padding: 20px;
        max-width: 100%;
    }
}

.feature-image{
    width: 100%;
    height: auto;
    object-fit: cover;
}


.mini-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 12px;
    max-width: 180px;
}

.mini-gallery .gallery-item {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    width: 100%;
    height: 100%;
}

.mini-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mini-gallery .gallery-item:hover img {
}

.mini-gallery .gallery-item:hover {
    border-color: var(--color-mint);
    box-shadow: 0 4px 16px rgba(98, 102, 254, 0.2);
    z-index: 2;
}

/* Gallery item overlay on hover */
.mini-gallery .gallery-item::after {
    content: 'View';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: rgba(8, 12, 25, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
}

.mini-gallery .gallery-item:hover::after {
    opacity: 1;
}

/* Light mode */
body .mini-gallery .gallery-item {
    background: var(--bg-surface);
    border-color: var(--glass-border);
}

body .mini-gallery .gallery-item::after {
    background: rgba(255, 255, 255, 0.5);
}

body .mini-gallery .gallery-item:hover {
    border-color: var(--color-indigo);
    box-shadow: 0 4px 16px rgba(98, 102, 254, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .mini-gallery {
        max-width: 100%;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .mini-gallery {
        grid-template-columns: repeat(6, 1fr);
        gap: 4px;
    }
    
    .mini-gallery .gallery-item::after {
        font-size: 14px;
    }
}

.feature-icon {
    width: 32px;
    height: 32px;
    display: block;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    object-fit: contain;
    flex-shrink: 0;
}

/* Dark mode - white icons */
.feature-icon {
    filter: brightness(0) invert(1);
}

/* Light mode - dark icons */
body .feature-icon {
    filter: brightness(0);
}

/* Hover effect */
.service-card:hover .feature-icon {
    transform: scale(1.1) rotate(-3deg);
}

.secondary-text{
    color: var(--color-indigo) !important;
}

.custom-pane{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    border-radius: 50%;
    padding: 20px;
}

.features-section{
/* background: url('../images/pattern-22.png') no-repeat; */
background-position: left bottom ;
}

.img-cert {
    width: 130px;
    height: 130px;
    background: var(--cert-image) center/contain no-repeat;
    display: block;
}

@media (max-width: 1024px) {
    .dev-steps-grid {
        gap: 12px;
    }
    
    .dev-steps-grid .dev-step {
        flex: 1 1 calc(50% - 12px);
        min-width: 200px;
    }
    
    .dev-steps-grid .step-connector {
        flex: 0 0 24px;
    }
    
    .dev-steps-grid .step-arrow {
        width: 18px;
        height: 18px;
    }
}

/* Mobile landscape */
@media (max-width: 768px) {
    .dev-steps-grid {
        flex-direction: column;
        gap: 16px;
        align-items: center;
    }
    
    .dev-steps-grid .dev-step {
        flex: 1 1 auto;
        width: 100%;
        max-width: 480px;
        min-height: auto;
        padding: 28px 20px;
    }
    
    .dev-steps-grid .step-connector {
        flex: 0 0 auto;
        padding: 4px 0;
        transform: rotate(90deg);
    }
    
    .dev-steps-grid .step-arrow {
        width: 20px;
        height: 20px;
    }
    
    .dev-steps-grid .dev-step:hover + .step-connector .step-arrow {
        transform: rotate(90deg) translateX(4px);
    }
    
    .dev-steps-grid .step-number {
        top: 16px;
        right: 18px;
        font-size: 11px;
    }
    
    .dev-steps-grid .industry-icon-wrapper {
        width: 56px;
        height: 56px;
        margin: 0 auto 14px;
    }
    
    .dev-steps-grid .animated-icon {
        width: 28px;
        height: 28px;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .dev-steps-grid {
        gap: 12px;
    }
    
    .dev-steps-grid .dev-step {
        padding: 20px 16px;
        min-height: auto;
    }
    
    .dev-steps-grid .dev-step h4 {
        font-size: 15px;
    }
    
    .dev-steps-grid .dev-step .text-muted {
        font-size: 12px;
    }
    
    .dev-steps-grid .industry-icon-wrapper {
        width: 48px;
        height: 48px;
        margin: 0 auto 10px;
        border-radius: 14px;
    }
    
    .dev-steps-grid .animated-icon {
        width: 24px;
        height: 24px;
    }
    
    .dev-steps-grid .step-number {
        top: 12px;
        right: 14px;
        font-size: 10px;
    }
    
    .dev-steps-grid .step-connector {
        padding: 2px 0;
    }
    
    .dev-steps-grid .step-arrow {
        width: 16px;
        height: 16px;
    }
}

/* ============================================
   EXTRA: HIDE CONNECTORS ON VERY SMALL SCREENS
   ============================================ */

@media (max-width: 360px) {
    .dev-steps-grid .step-connector {
        display: none;
    }
    
    .dev-steps-grid {
        gap: 8px;
    }
}
@media (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        justify-items: center;
    }
    
    .tool-card {
        max-width: 340px;
        min-height: 200px;
    }
}

/* Mobile landscape (576px - 768px) */
@media (max-width: 768px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        justify-items: center;
    }
    
    .tool-card {
        max-width: 300px;
        min-height: 180px;
        padding: 24px 16px;
    }
    
    .tool-card h4 {
        font-size: 15px;
    }
    
    .tool-card .text-muted {
        font-size: 12px;
    }
}

/* Mobile portrait (<576px) */
@media (max-width: 576px) {
    .grid-3 {
        grid-template-columns: 1fr;
        gap: 16px;
        justify-items: center;
    }
    
    .tool-card {
        max-width: 100%;
        min-height: 160px;
        padding: 20px 16px;
    }
}

/* Very small phones (<400px) */
@media (max-width: 400px) {
    .grid-3 {
        gap: 12px;
    }
    
    .tool-card {
        min-height: 140px;
        padding: 16px 12px;
    }
    
    .tool-card h4 {
        font-size: 14px;
    }
}

.rotating-words-wrapper {
  position: relative;
  display: inline-block;
  height: 1.2em;      /* match your h1 line-height so layout doesn't jump */
  width: 9ch;         /* roughly your longest word's width */
  vertical-align: bottom;
}

.rotating-words {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--color-indigo);
  width: 0;
  opacity: 0;
  animation:
    cycle-type 9s steps(10, end) infinite,
    blink-caret 0.75s step-end infinite;
}

@keyframes cycle-type {
  0%      { width: 0;       opacity: 1; }
  9%      { width: var(--w); }
  27%     { width: var(--w); }
  33%     { width: 0;       opacity: 1; }  /* pin opacity here so it can't fade before this point */
  33.01%  { opacity: 0; }
  100%    { width: 0;       opacity: 0; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50%      { border-color: var(--color-indigo); }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.about-tdnt{
    position: relative;
    background-color: var(--bg-midnight);
    z-index: 2;
}

.about-tdnt::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/pattern-22.png');
    opacity: 0.2; 
    z-index: 1;
}

.about-tdnt > * {
    position: relative;
    z-index: 2;
}

.wd-100{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.gp{
    gap:10px;
}

.divide-row{
    gap: 1em;
    display: grid;
    grid-template-columns:  70px 1fr;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.form-control.field-invalid {
    border-color: #e5484d !important;
    box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.4) !important;
}
.form-control.field-valid {
    border-color: #30a46c !important;
}

body .form-control.field-invalid {
    border-color: #d1171d !important;
    box-shadow: 0 0 0 1px rgba(229, 72, 77, 0.4) !important;
}
body .form-control.field-valid {
    border-color: #1a8f56 !important;
}

input:-internal-autofill-selected {
    background-color: red !important;
}

.plan-features.text-sm li {
    font-size: 14px !important;
}