:root {

    --primary: #3b82f6;

    --primary-hover: #2563eb;

    --secondary: #10b981;

    --secondary-hover: #059669;

    --accent: #f59e0b;

    --dark-bg: #0f172a;

    --dark-surface: #1e293b;

    --dark-card: #334155;

    --bg-color: #ffffff;

    --surface-color: #f8fafc;

    --text-main: #334155;

    --text-muted: #475569;

    --border-color: #e2e8f0;

    --font-heading: 'Outfit', sans-serif;

    --font-body: 'Inter', sans-serif;

    --container-width: 1200px;

    --section-padding: 5rem 0;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --glass-bg: rgba(255, 255, 255, 0.85);

    --glass-border: 1px solid rgba(255, 255, 255, 0.3)
}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box
}

html {

    scroll-behavior: smooth
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-main);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,

h2,

h3,

h4,

h5,

h6 {

    font-family: var(--font-heading);

    color: var(--dark-bg);

    line-height: 1.2;

    margin-bottom: 1rem;

    font-weight: 700
}

p {

    margin-bottom: 1.5rem;

    color: var(--text-muted)
}

a {

    color: var(--primary);

    text-decoration: none;

    transition: var(--transition)
}

ul {

    list-style: none
}

img {

    max-width: 100%;

    height: auto;

    display: block
}

.container {

    width: 100%;

    max-width: var(--container-width);

    margin: 0 auto;

    padding: 0 20px
}

.section-padding {

    padding: var(--section-padding)
}

.text-center {

    text-align: center
}

.mt-4 {

    margin-top: 2rem
}

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 28px;

    font-family: var(--font-heading);

    font-weight: 600;

    font-size: 1rem;

    border-radius: 50px;

    cursor: pointer;

    transition: var(--transition);

    border: 2px solid transparent;

    gap: 8px
}

.btn-primary {

    background-color: var(--primary);

    color: #fff;

    box-shadow: 0 4px 14px 0 rgba(59, 130, 246, .39)
}

.btn-primary:hover {

    background-color: var(--primary-hover);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(59, 130, 246, .4);

    color: #fff
}

.btn-secondary {

    background-color: var(--secondary);

    color: #fff
}

.btn-secondary:hover {

    background-color: var(--secondary-hover);

    transform: translateY(-2px);

    color: #fff
}

.btn-outline {

    background-color: transparent;

    border-color: var(--border-color);

    color: var(--text-main)
}

.btn-outline:hover {

    border-color: var(--primary);

    color: var(--primary)
}

.btn-light {

    background-color: #fff;

    color: var(--primary)
}

.btn-light:hover {

    background-color: var(--surface-color);

    transform: translateY(-2px)
}

.btn-lg {

    padding: 16px 36px;

    font-size: 1.125rem
}

.text-gradient {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent
}

.top-bar {

    background-color: var(--dark-bg);

    color: rgba(255, 255, 255, .75);

    font-size: .85rem;

    padding: 10px 0;

    font-weight: 500
}

.top-bar-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

/* Fix alignment with logo */
.top-bar-left a:first-child {
    margin-left: -4px; /* Adjust to align phone icon perfectly with the W of the logo */
}

.top-bar-left,

.top-bar-right {

    display: flex;

    align-items: center;

    gap: 24px
}

.top-bar-right {

    gap: 12px
}

.top-bar a {

    color: rgba(255, 255, 255, .75);

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: var(--transition)
}

.top-bar a:hover {

    color: var(--primary)
}

.top-bar-right .social-label {

    margin-right: -10px;

    font-size: .8rem;

    color: rgba(255, 255, 255, .5);

    text-transform: uppercase;

    letter-spacing: 1px
}

.top-bar-right a {

    color: rgba(255, 255, 255, .7);

    font-size: 1rem;

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255, 255, 255, .05);

    border-radius: 50%;

    transition: all .3s ease;

    text-decoration: none
}

.top-bar-right a:hover {

    background: var(--primary);

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(14, 165, 233, .3)
}

@media (max-width:992px) {

    .top-bar-left a[href^="mailto:"],

    .top-bar-right {

        display: none
    }

    .top-bar-container {

        justify-content: center
    }

    .top-bar-left {

        width: 100%;

        justify-content: center;

        gap: 20px
    }

}

.site-header {

    position: fixed;

    top: 40px;

    left: 0;

    width: 100%;

    z-index: 1000;

    background: var(--glass-bg);

    -webkit-backdrop-filter: blur(12px);

    backdrop-filter: blur(12px);

    border-bottom: var(--glass-border);

    transition: var(--transition);

    padding: 1rem 0
}

.site-header.scrolled {

    padding: .75rem 0;

    top: 0;

    box-shadow: var(--shadow-sm)
}

.header-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: nowrap;

    gap: 1rem;

    position: relative
}

.logo {

    display: flex;

    align-items: center;

    margin-left: -12px;

}

.site-logo-img {

    height: 48px;

    width: auto;

    display: block;

    max-width: 100%;

}

.main-navigation {

    display: flex;

    align-items: center
}

.nav-menu {

    display: flex;

    align-items: center;

    gap: 2rem;

    margin: 0;

    padding: 0;

    list-style: none
}

.nav-item {

    position: relative;

    padding: 10px 0
}

.nav-link {

    color: var(--text-main);

    font-weight: 500;

    font-size: .95rem;

    display: flex;

    align-items: center;

    gap: 6px
}

.nav-link i {

    font-size: .75rem;

    transition: transform .3s ease
}

.nav-item:hover>.nav-link,

.nav-link:hover {

    color: var(--primary)
}

.nav-item:hover>.nav-link i {

    transform: rotate(180deg)
}

.contact-hero {

    background: radial-gradient(circle at top right, rgba(var(--primary-rgb), .05) 0, transparent 70%)
}

.contact-info-card {

    background: var(--dark-bg);

    padding: 3rem;

    border-radius: 24px;

    height: 100%;

    color: #fff;

    box-shadow: var(--shadow-premium)
}

.contact-info-card h2 {

    color: #fff;

    font-size: 1.75rem
}

.contact-method {

    display: flex;

    gap: 1.5rem;

    margin-bottom: 2rem;

    align-items: center
}

.contact-method:last-child {

    margin-bottom: 0
}

.contact-method .icon-box {

    width: 56px;

    height: 56px;

    background: rgba(255, 255, 255, .05);

    border: 1px solid rgba(255, 255, 255, .1);

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 1.25rem;

    flex-shrink: 0
}

.method-details h5 {

    color: #fff;

    margin-bottom: .25rem;

    font-size: 1rem
}

.method-details a,

.method-details p {

    color: #94a3b8;

    font-size: 1rem;

    transition: var(--transition)
}

.method-details a:hover {

    color: var(--primary)
}

.contact-form-card {

    background: #fff;

    padding: 3rem;

    border-radius: 24px;

    height: 100%;

    box-shadow: var(--shadow-premium);

    border: 1px solid var(--border-color)
}

.form-label {

    display: block;

    font-weight: 600;

    font-size: .9rem;

    color: var(--dark-bg);

    margin-bottom: .5rem
}

.form-control,

.form-select {

    width: 100%;

    max-width: 100%;

    display: block;

    font-family: var(--font-body);

    font-size: 1rem;

    padding: .75rem 1rem;

    border-radius: 12px;

    border: 1.5px solid #e2e8f0;

    background-color: #fff;

    color: var(--text-main);

    transition: var(--transition)
}

.form-control:focus,

.form-select:focus {

    border-color: var(--primary);

    outline: 0;

    box-shadow: 0 0 0 4px rgba(59, 130, 246, .1)
}

.dropdown-menu {

    position: absolute;

    top: calc(100% - 5px);

    left: 0;

    min-width: 220px;

    background: #fff;

    border-radius: 12px;

    box-shadow: 0 50px 100px -20px rgba(50, 50, 93, .15), 0 30px 60px -30px rgba(0, 0, 0, .15);

    padding: 1rem 0;

    padding-top: calc(1rem + 5px);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: all .3s cubic-bezier(.16, 1, .3, 1);

    z-index: 100;

    border: 1px solid rgba(0, 0, 0, .05);

    pointer-events: none
}

.nav-item.has-dropdown::after {

    content: '';

    position: absolute;

    bottom: -20px;

    left: 0;

    width: 100%;

    height: 20px;

    background: 0 0
}

.nav-item:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto
}

.dropdown-menu a {

    display: block;

    padding: .6rem 1.5rem;

    color: var(--text-muted);

    font-weight: 500;

    font-size: .9rem
}

.dropdown-menu a:hover {

    color: var(--primary);

    background-color: var(--surface-color);

    padding-left: 1.8rem
}

.dropdown-menu a.btn-primary {

    color: #fff !important;

    padding: 12px 28px !important;

    justify-content: center
}

.dropdown-menu a.btn-primary:hover {

    color: #fff !important;

    background-color: var(--primary-hover) !important;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(59, 130, 246, .4);

    padding-left: 28px !important
}

.mega-menu-trigger {

    position: static !important;

}

.mega-menu {

    position: absolute;

    top: 100%;

    left: 50%;

    transform: translateX(-50%) translateY(15px) scale(.98);

    width: 1100px;

    max-width: 95vw;

    padding: 0 !important;

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(0, 0, 0, .05);

    box-shadow: 0 50px 100px -20px rgba(50, 50, 93, .15), 0 30px 60px -30px rgba(0, 0, 0, .15);

    border-radius: 24px;

    opacity: 0;

    visibility: hidden;

    transition: all .5s cubic-bezier(.16, 1, .3, 1);

    z-index: 1000;

    pointer-events: none
}

.nav-item:hover .mega-menu {

    opacity: 1;

    visibility: visible;

    transform: translateX(-50%) translateY(0) scale(1);

    pointer-events: auto
}

.mega-menu-content {

    display: grid;

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

    background: 0 0;

    padding: 2rem;

    gap: 1.5rem
}

.mega-column {

    flex: 1;

    min-width: 200px
}

.column-title {

    font-size: .75rem;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: var(--primary);

    margin-bottom: 1rem;

    font-weight: 700;

    opacity: .8
}

.mega-links {

    list-style: none;

    padding: 0;

    margin: 0
}

.mega-links li {

    margin-bottom: .5rem
}

.mega-links a {

    display: flex !important;

    align-items: flex-start !important;

    gap: .8rem !important;

    padding: .6rem .8rem !important;

    border-radius: 12px;

    transition: all .3s cubic-bezier(.16, 1, .3, 1);

    color: var(--dark-bg);

    background: 0 0
}

.mega-links a i {

    font-size: 1.25rem;

    color: var(--primary);

    margin-top: 0;

    width: 32px;

    height: 32px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(14, 165, 233, .08);

    border-radius: 10px;

    transition: all .4s cubic-bezier(.16, 1, .3, 1);

    font-weight: 900
}

.mega-links a span {

    display: block;

    font-weight: 600;

    font-size: .95rem;

    line-height: 1.2;

    margin-bottom: 2px;

    white-space: nowrap;

    transition: color .3s ease
}

.mega-links a small {

    display: block;

    font-size: .75rem;

    color: var(--text-muted);

    font-weight: 400;

    line-height: 1.4;

    transition: color .3s ease
}

.mega-menu-industries .mega-links a small {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mega-menu-industries {

    max-width: 95vw !important;

    width: 850px !important;

    left: 50% !important;

    right: auto !important;

    transform: translateX(-50%) translateY(15px) scale(.98)
}

.nav-item:hover .mega-menu-industries {

    transform: translateX(-50%) translateY(0) scale(1)
}

.mega-menu-industries .mega-menu-content {

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

    justify-content: center;

    padding: 2rem;

    gap: 2rem
}

.mega-menu-industries .mega-links a {

    align-items: center !important;

    padding: .5rem .6rem !important;

    gap: .5rem !important
}

.mega-menu-industries .mega-links a span {

    margin-bottom: 0
}

.mega-menu-industries .mega-links a i {

    width: 28px;

    height: 28px;

    font-size: 1.15rem;

    background: 0 0
}

.mega-menu-industries .mega-links a:hover {

    background: 0 0;

    box-shadow: none;

    padding-left: .6rem !important;

    transform: translateX(4px)
}

.mega-links a:hover {

    background: var(--surface-color);

    transform: translateY(-2px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, .03);

    padding-left: 1rem !important
}

.mega-links a:hover span {

    color: var(--primary)
}

.mega-links a:hover small {

    color: var(--text-main)
}

.mega-links a:hover i {

    transform: scale(1.15) rotate(5deg);

    background: var(--primary);

    color: #fff;

    box-shadow: 0 8px 15px rgba(14, 165, 233, .3)
}

.featured-column {

    background: #f8fbff;

    margin: -2.5rem -2.5rem -2.5rem 0;

    padding: 2.5rem;

    width: 280px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-left: 1px solid var(--border-color)
}

.mega-featured-card {

    text-align: left
}

.featured-tag {

    display: inline-block;

    padding: 4px 12px;

    background: var(--primary-light);

    color: var(--primary);

    font-size: .7rem;

    font-weight: 700;

    border-radius: 20px;

    margin-bottom: 1rem;

    text-transform: uppercase
}

.mega-featured-card h4 {

    font-size: 1.2rem;

    margin-bottom: .75rem;

    color: var(--dark-bg)
}

.mega-featured-card p {

    font-size: .85rem;

    color: var(--text-muted);

    line-height: 1.6;

    margin-bottom: 1.5rem
}

.mega-menu-industries .mega-menu-content {

    gap: 2rem
}

.header-actions {

    display: none;

}

.menu-toggle {

    display: none;

    background: 0 0;

    border: none;

    cursor: pointer;

    width: 30px;

    height: 24px;

    position: relative;

    z-index: 1001
}

.hamburger,

.hamburger::after,

.hamburger::before {

    display: block;

    width: 100%;

    height: 3px;

    background-color: var(--dark-bg);

    border-radius: 3px;

    position: absolute;

    transition: var(--transition)
}

.hamburger {

    top: 50%;

    transform: translateY(-50%)
}

.hamburger::before {

    content: '';

    top: -8px
}

.hamburger::after {

    content: '';

    bottom: -8px
}

.menu-toggle.active .hamburger {

    background-color: transparent
}

.menu-toggle.active .hamburger::before {

    top: 0;

    transform: rotate(45deg)
}

.menu-toggle.active .hamburger::after {

    bottom: 0;

    transform: rotate(-45deg)
}

.internal-hero {

    position: relative;

    padding: 160px 0 80px;

    background-color: var(--dark-bg);

    overflow: hidden;

    color: #fff;

    text-align: center
}

.internal-hero .hero-bg-shapes {

    opacity: .6
}

.hero-content-wrapper {

    max-width: 800px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center
}

.premium-breadcrumb {

    margin-bottom: 1.5rem
}

.premium-breadcrumb ol {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: center;

    gap: .5rem;

    list-style: none;

    padding: .5rem 1.25rem;

    background: rgba(255, 255, 255, .05);

    border: 1px solid rgba(255, 255, 255, .1);

    border-radius: 50px;

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px)
}

.premium-breadcrumb li {

    display: flex;

    align-items: center;

    font-size: .85rem;

    font-weight: 500;

    color: var(--text-muted)
}

.premium-breadcrumb li:not(:last-child)::after {

    content: '\f105';

    font-family: 'Font Awesome 6 Free';

    font-weight: 900;

    margin-left: .5rem;

    font-size: .7rem;

    color: rgba(255, 255, 255, .3)
}

.premium-breadcrumb a {

    color: var(--text-muted);

    transition: var(--transition)
}

.premium-breadcrumb a:hover {

    color: #fff
}

.premium-breadcrumb li.active {

    color: var(--primary);

    font-weight: 600
}

.internal-hero .page-title {

    font-size: 3.5rem;

    font-weight: 800;

    letter-spacing: -1px;

    margin-bottom: 1rem;

    color: #fff
}

.internal-hero .page-desc {

    font-size: 1.15rem;

    color: var(--text-muted);

    max-width: 600px;

    margin: 0 auto;

    line-height: 1.6
}

@media screen and (max-width:768px) {

    .internal-hero {

        padding: 160px 0 60px
    }

    .internal-hero .page-title {

        font-size: 2.5rem
    }

    .internal-hero .page-desc {

        font-size: 1rem
    }

}

.hero-section {

    padding: 180px 0 100px;

    position: relative;

    overflow: hidden;

    background-color: var(--surface-color);

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 90vh
}

.hero-bg-shapes {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 0;

    overflow: hidden;

    pointer-events: none
}

.shape {

    position: absolute;

    border-radius: 50%;

    opacity: .4;

    animation: float 10s infinite ease-in-out alternate;

    will-change: transform
}

.shape-1 {

    width: 400px;

    height: 400px;

    background: radial-gradient(circle, var(--primary) 0, transparent 70%);

    top: -10%;

    left: -5%
}

.shape-2 {

    width: 500px;

    height: 500px;

    background: radial-gradient(circle, #8b5cf6 0, transparent 70%);

    bottom: -20%;

    right: -10%;

    animation-delay: -5s
}

@keyframes float {

    0% {

        transform: translate(0, 0)
    }

    100% {

        transform: translate(30px, 30px)
    }

}

.hero-content {

    position: relative;

    z-index: 1;

    max-width: 800px;

    margin: 0 auto;

    text-align: center
}

.hero-badge {

    display: inline-block;

    padding: 6px 16px;

    background-color: rgba(59, 130, 246, .1);

    color: #1d4ed8;

    border-radius: 50px;

    font-size: .875rem;

    font-weight: 600;

    margin-bottom: 1.5rem;

    border: 1px solid rgba(59, 130, 246, .2)
}

.hero-title {

    font-size: 4.5rem;

    letter-spacing: -1.5px;

    margin-bottom: 1.5rem
}

.hero-subtitle {

    font-size: 1.25rem;

    max-width: 650px;

    margin: 0 auto 2.5rem
}

.hero-actions {

    display: flex;

    gap: 1rem;

    justify-content: center;

    margin-bottom: 4rem
}

.trust-metrics {

    display: flex;

    justify-content: center;

    gap: 4rem;

    border-top: 1px solid var(--border-color);

    padding-top: 3rem
}

.metric-value {

    display: block;

    font-family: var(--font-heading);

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--dark-bg)
}

.metric-label {

    display: block;

    font-size: .9rem;

    color: var(--text-muted);

    font-weight: 500
}

.section-header {

    max-width: 650px;

    margin: 0 auto 4rem
}

.section-title {

    font-size: 2.5rem
}

.services-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 2rem
}

.service-card {

    background: #fff;

    padding: 2.5rem;

    border-radius: 20px;

    box-shadow: var(--shadow-md);

    transition: var(--transition);

    border: 1px solid rgba(0, 0, 0, .03);

    position: relative;

    overflow: hidden
}

.service-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(90deg, var(--primary), #8b5cf6);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .4s ease
}

.service-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-premium)
}

.service-card:hover::before {

    transform: scaleX(1)
}

.service-icon {

    width: 60px;

    height: 60px;

    background-color: rgba(59, 130, 246, .1);

    color: var(--primary);

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.5rem;

    margin-bottom: 1.5rem;

    transition: var(--transition)
}

.service-card:hover .service-icon {

    background-color: var(--primary);

    color: #fff;

    transform: scale(1.1) rotate(5deg)
}

.service-title {

    font-size: 1.5rem;

    margin-bottom: 1rem
}

.service-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-weight: 600;

    margin-top: 1rem
}

.service-link i {

    font-size: .8rem;

    transition: var(--transition)
}

.service-card:hover .service-link i {

    transform: translateX(4px)
}

.cta-section {

    padding: 5rem 0;

    background: linear-gradient(135deg, var(--primary) 0, #6366f1 100%);

    color: #fff;

    position: relative
}

.cta-wrapper h2 {

    color: #fff;

    font-size: 2.5rem;

    margin-bottom: 1rem
}

.cta-wrapper p {

    color: rgba(255, 255, 255, .9);

    font-size: 1.2rem;

    margin-bottom: 2rem
}

.site-footer {

    position: relative;

    background-color: var(--dark-bg);

    color: #cbd5e1;

    padding-top: 5rem
}

.site-footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: linear-gradient(135deg, var(--primary) 0, #8b5cf6 100%);

    box-shadow: 0 4px 15px rgba(59, 130, 246, .2);

    z-index: 10
}

.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1.5fr;

    gap: 3rem;

    margin-bottom: 4rem
}

.footer-logo {

    display: inline-flex;

    align-items: center;

    margin-bottom: 1.5rem
}

.footer-desc {
    color: #e2e8f0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.footer-logo-img {

    height: 60px;

    width: auto;

    display: block;

    max-width: 100%;

}

.widget-title {

    color: #fff;

    font-size: 1.25rem;

    margin-bottom: 1.5rem
}

.footer-menu li {

    margin-bottom: .75rem
}

.footer-menu a {

    color: #94a3b8
}

.footer-menu a:hover {

    color: #fff;

    padding-left: 5px
}

.social-links {

    display: flex;

    gap: 1rem;

    margin-top: 1.5rem
}

.contact-info {

    list-style: none;

    padding: 0
}

.contact-info li {

    display: flex;

    gap: 12px;

    margin-bottom: 1rem;

    align-items: flex-start;

    color: #94a3b8
}

.contact-info li i {

    color: var(--primary);

    margin-top: 4px;

    font-size: .9rem
}

.contact-info li a {

    color: #94a3b8
}

.contact-info li a:hover {

    color: #fff
}

.social-links a {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: var(--dark-card);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff
}

.social-links a:hover {

    background-color: var(--primary);

    transform: translateY(-3px)
}

.newsletter-form .form-group {

    display: flex;

    background: var(--dark-card);

    border-radius: 50px;

    padding: 5px;

    margin-top: 1rem
}

.newsletter-form input {

    flex-grow: 1;

    background: 0 0;

    border: none;

    color: #fff;

    padding: 10px 15px;

    outline: 0
}

.newsletter-form button {

    background: var(--primary);

    color: #fff;

    border: none;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    cursor: pointer;

    transition: var(--transition)
}

.newsletter-form button:hover {

    background: var(--primary-hover)
}

.footer-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 2rem 0;

    border-top: 1px solid var(--dark-card)
}

.footer-legal-menu {

    display: flex;

    gap: 1.5rem
}

.footer-legal-menu a {

    color: #94a3b8;

    font-size: .875rem
}

.footer-legal-menu a:hover {

    color: #fff
}

.mb-3 {

    margin-bottom: 1rem !important
}

.mb-4 {

    margin-bottom: 1.5rem !important
}

.mb-5 {

    margin-bottom: 3rem !important
}

.w-100 {

    width: 100% !important;

    display: block
}

.contact-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 3rem
}

.form-row-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1rem
}

@media screen and (min-width:992px) {

    .contact-grid {

        grid-template-columns: 5fr 7fr;

        gap: 3rem
    }

}

@media screen and (min-width:768px) {

    .form-row-grid {

        grid-template-columns: 1fr 1fr;

        gap: 1.5rem
    }

}

@media screen and (max-width:1200px) {

    .nav-menu {

        gap: 1rem
    }

    .nav-link {

        font-size: .9rem
    }

}

@media screen and (max-width:992px) {

    .nav-cta {

        display: none
    }

    .header-actions {

        display: flex
    }

    .menu-toggle {

        display: block
    }

    .main-navigation {

        position: fixed;

        top: 0;

        left: -100%;

        width: 100%;

        height: 100vh;

        background: rgba(255, 255, 255, .98);

        flex-direction: column;

        align-items: flex-start;

        padding: 5rem 2rem 2rem;

        transition: left .4s cubic-bezier(.85, 0, .15, 1);

        z-index: 1001;

        overflow-y: auto
    }

    .main-navigation.active {

        left: 0
    }

    .nav-menu {

        flex-direction: column;

        width: 100%;

        align-items: flex-start;

        gap: 0
    }

    .nav-item {

        width: 100%;

        padding: 0;

        border-bottom: 1px solid rgba(0, 0, 0, .05)
    }

    .nav-link {

        padding: 1.25rem 0;

        justify-content: space-between;

        font-size: 1.25rem;

        font-weight: 600;

        color: var(--dark-bg)
    }

    .dropdown-menu,

    .mega-menu {

        position: static;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        transform: none;

        border: none;

        display: none;

        padding: 0 !important;

        min-width: 100%;

        background: 0 0;

        pointer-events: auto
    }

    .dropdown-menu li,

    .mega-links li {

        border-left: 2px solid var(--primary);

        margin-bottom: .5rem
    }

    .dropdown-menu a,

    .mega-links a {

        display: flex;

        font-size: 1.05rem;

        color: var(--text-main)
    }

    .mega-menu-content,

    .mega-menu-industries .mega-menu-content {

        display: flex !important;

        flex-direction: column;

        padding: 0 !important;

        gap: .5rem;

        background: 0 0
    }

    .menu-toggle {

        display: block;

        position: relative;

        z-index: 1100;

        background: 0 0;

        border: none;

        width: 30px;

        height: 24px;

        cursor: pointer
    }

    .hamburger,

    .hamburger::after,

    .hamburger::before {

        content: '';

        display: block;

        width: 100%;

        height: 2px;

        background: var(--dark-bg);

        border-radius: 2px;

        position: absolute;

        transition: var(--transition)
    }

    .hamburger {

        top: 50%;

        transform: translateY(-50%)
    }

    .hamburger::before {

        top: -8px
    }

    .hamburger::after {

        bottom: -8px
    }

    .menu-toggle.active .hamburger {

        background: 0 0
    }

    .menu-toggle.active .hamburger::before {

        transform: rotate(45deg);

        top: 0
    }

    .menu-toggle.active .hamburger::after {

        transform: rotate(-45deg);

        bottom: 0
    }

    .mega-column {

        min-width: 100%
    }

    .column-title {

        margin-bottom: .5rem;

        font-size: .75rem;

        padding-left: 1rem
    }

    .dropdown-menu a,

    .mega-links a,

    .mega-menu-industries .mega-links a {

        padding: .75rem 1rem !important;

        background: 0 0 !important;

        transform: none !important;

        gap: 15px !important;

        align-items: center !important
    }

    .dropdown-menu a i,

    .mega-links a i,

    .mega-menu-industries .mega-links a i {

        width: 32px !important;

        height: 32px !important;

        font-size: 1.15rem !important;

        background: rgba(14, 165, 233, .08) !important;

        border-radius: 10px !important;

        display: flex !important;

        justify-content: center !important;

        align-items: center !important
    }

    .mega-links a small {

        display: none
    }

    .featured-column {

        display: none
    }

    .dropdown-menu.active,

    .mega-menu.active {

        display: block !important
    }

    .nav-item.has-dropdown>.nav-link i.active {

        transform: rotate(180deg)
    }

    .nav-item:hover .mega-menu,

    .nav-item:hover .mega-menu-industries {

        transform: none !important
    }

    .footer-grid {

        grid-template-columns: 1fr 1fr
    }

    .footer-legal-menu {

        flex-wrap: wrap
    }

}

@media screen and (max-width:768px) {

    .premium-glass-card,

    .premium-testimonial-card {

        -webkit-backdrop-filter: none;

        backdrop-filter: none;

        background: rgba(255, 255, 255, 0.98)
    }

    .premium-industry-card {

        -webkit-backdrop-filter: none;

        backdrop-filter: none;

        background: rgba(255, 255, 255, 0.95)
    }

    .hero-title {

        font-size: 3rem
    }

    .hero-actions {

        flex-direction: column
    }

    .trust-metrics {

        flex-wrap: wrap;

        gap: 2rem
    }

    .footer-grid {

        grid-template-columns: 1fr
    }

    .footer-bottom {

        flex-direction: column;

        gap: 1rem;

        text-align: center
    }

    .footer-legal-menu {

        flex-wrap: wrap;

        justify-content: center;

        gap: .5rem 1rem
    }

    .premium-breadcrumb {

        margin-top: 2.5rem
    }

    .premium-breadcrumb ol {

        border-radius: 12px;

        padding: .5rem .75rem;

        gap: .4rem
    }

    .premium-breadcrumb li {

        font-size: .75rem
    }

}

@media screen and (max-width:480px) {

    .top-bar-container {

        flex-direction: row;

        gap: 8px;

        padding: 0 10px
    }

    .top-bar-left {

        flex-direction: row;

        gap: 15px
    }

    .top-bar a {

        font-size: .8rem
    }

}

.error-page {

    background: radial-gradient(circle at center, rgba(var(--primary-rgb), .05) 0, transparent 70%)
}

.error-actions {

    display: flex;

    gap: 1.5rem;

    justify-content: center;

    margin-top: 2rem
}

@media (max-width:768px) {

    .error-actions {

        flex-direction: column;

        align-items: center
    }

}

.row {

    display: flex;

    flex-wrap: wrap;

    margin-right: -15px;

    margin-left: -15px
}

.col-lg-4,

.col-lg-8,

.col-md-6 {

    position: relative;

    width: 100%;

    padding-right: 15px;

    padding-left: 15px
}

@media (min-width:768px) {

    .col-md-6 {

        flex: 0 0 50%;

        max-width: 50%
    }

}

@media (min-width:992px) {

    .col-lg-8 {

        flex: 0 0 66.666667%;

        max-width: 66.666667%
    }

    .col-lg-4 {

        flex: 0 0 33.333333%;

        max-width: 33.333333%
    }

    .mt-lg-0 {

        margin-top: 0 !important
    }

}

.mt-2 {

    margin-top: .5rem !important
}

.mt-4 {

    margin-top: 1.5rem !important
}

.mt-5 {

    margin-top: 3rem !important
}

.mb-2 {

    margin-bottom: .5rem !important
}

.mb-4 {

    margin-bottom: 1.5rem !important
}

.me-2 {

    margin-right: .5rem !important
}

.p-4 {

    padding: 1.5rem !important
}

.bg-light {

    background-color: var(--surface-color) !important
}

.rounded {

    border-radius: 12px !important
}

.d-block {

    display: block !important
}

.list-unstyled {

    padding-left: 0;

    list-style: none
}

.btn-sm {

    padding: 10px 20px;

    font-size: .875rem
}

.sidebar-links a {

    color: #94a3b8;

    text-decoration: none;

    transition: var(--transition)
}

.sidebar-links a:hover {

    color: var(--primary) !important;

    padding-left: 5px
}

.shape-3 {

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, var(--secondary) 0, transparent 70%);

    bottom: -10%;

    left: 20%;

    animation-delay: -2s;

    opacity: .25
}

.premium-glass-card {

    background: rgba(255, 255, 255, .85);

    -webkit-backdrop-filter: blur(16px);

    backdrop-filter: blur(16px);

    border: 1px solid rgba(255, 255, 255, .4);

    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .05)
}

.dark-glass-card {

    background: rgba(255, 255, 255, .05);

    -webkit-backdrop-filter: blur(16px);

    backdrop-filter: blur(16px);

    border: 1px solid rgba(255, 255, 255, .1);

    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, .2)
}

.industry-card-hover:hover,

.service-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-premium);

    border-color: rgba(59, 130, 246, .2)
}

.industry-card-hover:hover i,

.service-card:hover .service-icon i {

    transform: scale(1.15);

    color: var(--primary-hover)
}

.industry-card-hover i,

.service-icon i {

    transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), color .3s ease
}

.premium-gradient-bg {

    background: linear-gradient(135deg, var(--dark-bg) 0, var(--dark-surface) 100%);

    position: relative;

    overflow: hidden
}

.premium-gradient-bg::before {

    content: '';

    position: absolute;

    top: -50%;

    right: -50%;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle, rgba(59, 130, 246, .1) 0, transparent 70%);

    pointer-events: none
}

.about-value-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center
}

@media (max-width:992px) {

    .about-value-grid {

        grid-template-columns: 1fr;

        gap: 3rem
    }

}

.premium-content-box {

    background: linear-gradient(145deg, var(--dark-bg) 0, #1e293b 100%);

    border-radius: 20px;

    padding: 3.5rem;

    position: relative;

    overflow: hidden;

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .1) inset;

    transition: transform .4s ease, box-shadow .4s ease
}

.premium-content-box:hover {

    transform: translateY(-5px);

    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, .3), 0 0 0 1px rgba(59, 130, 246, .2) inset
}

.premium-content-box::before {

    content: '';

    position: absolute;

    top: -50px;

    right: -50px;

    width: 250px;

    height: 250px;

    background: var(--primary);

    filter: blur(80px);

    opacity: .15;

    border-radius: 50%;

    pointer-events: none
}

.premium-content-box::after {

    content: '';

    position: absolute;

    bottom: -50px;

    left: -50px;

    width: 200px;

    height: 200px;

    background: var(--secondary);

    filter: blur(80px);

    opacity: .1;

    border-radius: 50%;

    pointer-events: none
}

.premium-content-box h3 {

    color: #fff;

    font-size: 1.8rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    position: relative;

    z-index: 2;

    letter-spacing: -.5px
}

.premium-content-box .lead-text {

    color: #cbd5e1;

    font-size: 1.15rem;

    line-height: 1.7;

    margin-bottom: 2.5rem;

    position: relative;

    z-index: 2
}

.premium-content-box .lead-text strong {

    color: #fff;

    font-size: 1.3rem;

    font-weight: 700;

    background: linear-gradient(135deg, #fff 0, #94a3b8 100%);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent
}

.premium-checklist {

    list-style: none;

    padding: 0;

    margin: 0;

    position: relative;

    z-index: 2
}

.premium-checklist li {

    display: flex;

    align-items: flex-start;

    gap: 1.25rem;

    margin-bottom: 1.5rem;

    color: #f8fafc;

    font-size: 1.05rem;

    line-height: 1.5;

    transition: transform .3s ease
}

.premium-checklist li:last-child {

    margin-bottom: 0
}

.premium-checklist li:hover {

    transform: translateX(8px)
}

.premium-checklist li i {

    color: #25d366;

    font-size: 1.4rem;

    margin-top: 2px;

    filter: drop-shadow(0 0 8px rgba(37, 211, 102, .3))
}

.features-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 3rem
}

@media (max-width:1200px) {

    .features-grid {

        grid-template-columns: repeat(2, 1fr)
    }

}

@media (max-width:768px) {

    .features-grid {

        grid-template-columns: 1fr
    }

}

.premium-feature-card {

    background: rgba(255, 255, 255, .05);

    border: 1px solid rgba(255, 255, 255, .1);

    -webkit-backdrop-filter: blur(20px);

    backdrop-filter: blur(20px);

    border-radius: 20px;

    padding: 3rem 2.5rem;

    transition: all .4s cubic-bezier(.16, 1, .3, 1);

    position: relative;

    overflow: hidden
}

.premium-feature-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0, transparent 100%);

    opacity: 0;

    transition: opacity .4s;

    pointer-events: none
}

.premium-feature-card:hover {

    transform: translateY(-8px);

    background: rgba(255, 255, 255, .05);

    border-color: rgba(59, 130, 246, .3);

    box-shadow: 0 20px 40px rgba(0, 0, 0, .2), 0 0 20px rgba(59, 130, 246, .1) inset
}

.premium-feature-card:hover::before {

    opacity: 1
}

.premium-feature-card i {

    font-size: 2.5rem;

    color: var(--primary);

    margin-bottom: 1.5rem;

    display: inline-block;

    transition: transform .4s cubic-bezier(.175, .885, .32, 1.275)
}

.premium-feature-card:hover i {

    transform: scale(1.1) rotate(5deg);

    color: #fff;

    filter: drop-shadow(0 0 8px rgba(59, 130, 246, .6))
}

.premium-feature-card h3 {

    color: #fff !important;

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 1rem;

    letter-spacing: -.5px
}

.premium-feature-card p {

    color: #cbd5e1 !important;

    font-size: 1.15rem;

    line-height: 1.8;

    margin-bottom: 0
}

.industry-grid {

    display: grid;

    grid-template-columns: 1fr;

    gap: 2rem;

    margin-top: 2rem
}

@media (min-width:768px) {

    .industry-grid {

        grid-template-columns: repeat(2, 1fr)
    }

}

@media (min-width:1024px) {

    .industry-grid {

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

}

.premium-industry-card {

    background: rgba(255, 255, 255, .7);

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(14, 165, 233, .1);

    box-shadow: 0 10px 30px rgba(0, 0, 0, .03);

    padding: 2.5rem 1.5rem;

    border-radius: 16px;

    text-align: center;

    transition: all .4s cubic-bezier(.16, 1, .3, 1);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

    text-decoration: none
}

.premium-industry-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 40px rgba(14, 165, 233, .08);

    border-color: rgba(14, 165, 233, .3)
}

.premium-industry-icon {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: rgba(14, 165, 233, .08);

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 1.5rem;

    transition: transform .4s ease, background-color .4s ease
}

.premium-industry-icon i {

    font-size: 2.5rem;

    color: var(--primary);

    margin-bottom: 0
}

.premium-industry-card:hover .premium-industry-icon {

    transform: scale(1.05);

    background: rgba(14, 165, 233, .15)
}

.premium-industry-card h4 {

    color: var(--dark-bg);

    margin-bottom: 0;

    font-weight: 700;

    font-size: 1.25rem
}

.testimonial-slider-wrapper {

    position: relative;

    padding-bottom: 2rem
}

.testimonial-slider-track {

    display: flex;

    gap: 2rem;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    padding: 1rem 0 3rem 0;

    -ms-overflow-style: none
}

.testimonial-slider-track::-webkit-scrollbar {

    display: none
}

.premium-testimonial-card {

    min-width: 320px;

    width: calc(100vw - 3rem);

    max-width: 450px;

    flex: 0 0 auto;

    scroll-snap-align: center;

    background: rgba(255, 255, 255, .6);

    -webkit-backdrop-filter: blur(15px);

    backdrop-filter: blur(15px);

    border: 1px solid rgba(14, 165, 233, .15);

    box-shadow: 0 10px 40px rgba(0, 0, 0, .04);

    padding: 2.5rem 2rem;

    border-radius: 20px;

    position: relative;

    overflow: hidden;

    transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease
}

.premium-testimonial-card::after {

    content: '\f10e';

    font-family: 'Font Awesome 5 Free';

    font-weight: 900;

    position: absolute;

    top: 20px;

    right: 20px;

    font-size: 4rem;

    color: rgba(14, 165, 233, .05);

    pointer-events: none;

    transition: color .4s ease
}

.premium-testimonial-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 20px 50px rgba(14, 165, 233, .1);

    border-color: rgba(14, 165, 233, .3)
}

.premium-testimonial-card:hover::after {

    color: rgba(14, 165, 233, .1)
}

.testimonial-avatar {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-weight: 800;

    font-size: 1.3rem;

    box-shadow: 0 4px 15px rgba(14, 165, 233, .3);

    background: linear-gradient(135deg, var(--primary) 0, #0369a1 100%)
}

.premium-testimonial-card p {

    font-size: 1.05rem;

    line-height: 1.8;

    color: #475569;

    margin-top: 1.5rem;

    margin-bottom: 0;

    font-style: italic;

    position: relative;

    z-index: 1
}

.premium-section-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    margin-bottom: 3rem
}

.premium-header-content {

    max-width: 700px
}

@media (max-width:991px) {

    .premium-section-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 1.5rem
    }

    .premium-header-content {

        max-width: 100%
    }

}

.slider-controls {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 2rem;

    margin-top: 1rem
}

.slider-btn {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: #fff;

    border: 1px solid rgba(14, 165, 233, .2);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);

    transition: all .3s ease
}

.slider-btn:hover {

    background: var(--primary);

    color: #fff;

    transform: scale(1.1)
}

.slider-dots {

    display: flex;

    gap: .8rem
}

.slider-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: rgba(14, 165, 233, .2);

    cursor: pointer;

    transition: all .3s ease
}

.slider-dot.active {

    background: var(--primary);

    transform: scale(1.3)
}

.content-body ol,

.content-body ul {

    padding-left: 2rem;

    margin-bottom: 1.5rem
}

.content-body ol>li,

.content-body ul>li {

    margin-bottom: .5rem;

    line-height: 1.7
}

.content-body ul {

    list-style-type: disc
}

.content-body ol {

    list-style-type: decimal
}

.premium-inline-cta {

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0, rgba(248, 250, 252, 0.95) 100%);

    border: 1px solid rgba(14, 165, 233, 0.15);

    border-radius: 16px;

    padding: 2rem;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);

    position: relative;

    overflow: hidden;

    transition: transform 0.4s ease, box-shadow 0.4s ease
}

.premium-inline-cta:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 40px rgba(14, 165, 233, 0.1);

    border-color: rgba(14, 165, 233, 0.3)
}

.premium-inline-cta::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 5px;

    height: 100%;

    background: linear-gradient(to bottom, var(--primary), #8b5cf6)
}

.cta-icon-box {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: rgba(14, 165, 233, 0.1);

    flex-shrink: 0;

    font-size: 1.5rem
}

.premium-inline-cta .cta-title {

    color: var(--dark-bg);

    font-family: var(--font-heading)
}

.premium-btn-sm {

    padding: 10px 24px;

    font-size: 0.95rem;

    border-radius: 50px;

    transition: all 0.3s ease
}

.premium-btn-sm i {

    transition: transform 0.3s ease
}

.premium-btn-sm:hover i {

    transform: translateX(4px)
}

.accordion-collapse.collapse {

    display: grid;

    grid-template-rows: 0fr;

    transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s ease;

    opacity: 0;

    visibility: hidden
}

.accordion-collapse.collapse.show {

    grid-template-rows: 1fr;

    opacity: 1;

    visibility: visible
}

.accordion-collapse.collapse>div {

    overflow: hidden
}

/* Premium Pricing Calculator Component (Dark Glassmorphism) */
.pricing-premium-section {
    position: relative;
    padding: 100px 0;
    background-color: #0f172a;
    /* Deep Slate Dark */
    overflow: hidden;
    z-index: 1;
}

.pricing-premium-header .premium-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(139, 92, 246, 0.1);
    color: #a78bfa;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid rgba(139, 92, 246, 0.2);
    margin-bottom: 20px;
}

.pricing-premium-header .section-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 20px;
    color: #ffffff;
    /* Fix: Force title to white for dark glassmorphism background */
}

.pricing-premium-header .text-light-muted {
    color: #94a3b8;
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Ambient Deep Glows */
.pricing-glow-orb {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.5;
    z-index: -1;
    pointer-events: none;
}

.pricing-orb-purple {
    top: -100px;
    left: -100px;
    background: rgba(124, 58, 237, 0.25);
}

.pricing-orb-orange {
    bottom: -100px;
    right: -100px;
    background: rgba(245, 158, 11, 0.15);
}

/* Premium Layout Core */
.premium-calculator-wrapper {
    display: flex;
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(30, 41, 59, 0.6);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* Left Box: Interactive Inputs */
.premium-calculator-box {
    flex: 1.2;
    padding: 60px 50px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.calc-header {
    margin-bottom: 40px;
}

.calc-title {
    color: #f8fafc;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.calc-desc {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.6;
}

.calc-inputs-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.premium-label {
    display: block;
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.premium-recommended-tag {
    font-size: 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Inputs UX */
.premium-select-wrapper {
    position: relative;
    width: 100%;
}

.premium-select-wrapper .select-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.3s ease;
}

.premium-select {
    width: 100%;
    appearance: none;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f8fafc;
    padding: 18px 40px 18px 25px;
    /* Added extra right padding for icon to avoid text overlap */
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    text-overflow: ellipsis;
    /* Prevent text blowout on narrow screens */
    white-space: nowrap;
    overflow: hidden;
}

.premium-select:hover,
.premium-select:focus {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.premium-select:focus+.select-icon {
    color: #a78bfa;
    transform: translateY(-50%) rotate(180deg);
}

.premium-select option {
    background: #1e293b;
    color: #f8fafc;
    padding: 10px;
}

.premium-number-controls {
    display: flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 5px;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.premium-number-controls:focus-within {
    border-color: rgba(14, 165, 233, 0.5);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.ctrl-btn {
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: #f8fafc;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #38bdf8;
}

.premium-number-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    color: #f8fafc;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
    width: 100%;
    box-sizing: border-box;
}

.premium-number-input::-webkit-outer-spin-button,
.premium-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Price Display UX */
.premium-price-display {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
}

.price-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    /* Ensure badges can wrap on extremely narrow screens */
    gap: 10px;
}

.price-title {
    color: #94a3b8;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-badge {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 700;
}

.price-value-container {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
    flex-wrap: wrap;
    /* Allow currency symbol to wrap if number is huge */
}

.currency-sym {
    color: #a78bfa;
    font-size: 2.2rem;
    font-weight: 700;
}

.price-number {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
}

.price-number.price-updated {
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
}

.price-footer-note {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0;
}

/* Right Box: Premium Features */
.premium-features-box {
    flex: 1;
    padding: 60px 40px;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    flex-direction: column;
}

.features-header {
    margin-bottom: 40px;
}

.features-title {
    color: #f8fafc;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.features-desc {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.5;
}

.premium-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.premium-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.feat-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(56, 189, 248, 0.2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e2e8f0;
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.feat-text {
    display: flex;
    flex-direction: column;
}

.feat-text strong {
    color: #e2e8f0;
    font-size: 1.05rem;
    margin-bottom: 3px;
}

.feat-text span {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Premium Primary Button */
.btn-premium-solid {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 18px 32px;
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    background-size: 200% auto;
    color: white !important;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.3);
}

.btn-premium-solid:hover {
    background-position: right center;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(168, 85, 247, 0.4);
}

/* Responsiveness */
@media screen and (max-width: 992px) {
    .premium-calculator-wrapper {
        flex-direction: column;
    }

    .premium-calculator-box {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .pricing-orb-purple,
    .pricing-orb-orange {
        width: 400px;
        height: 400px;
    }
}

@media screen and (max-width: 768px) {
    .premium-calculator-box {
        padding: 40px 30px;
    }

    .premium-features-box {
        padding: 40px 30px;
    }

    .premium-calculator-wrapper {
        border-radius: 24px;
    }
}

@media screen and (max-width: 576px) {

    .premium-calculator-box,
    .premium-features-box {
        padding: 28px 20px;
    }

    .calc-inputs-grid {
        gap: 20px;
    }

    .premium-label {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }

    .premium-select {
        font-size: 0.9rem;
        padding: 15px 36px 15px 18px;
    }

    .premium-number-controls {
        padding: 4px;
    }

    .ctrl-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    .premium-number-input {
        font-size: 1.3rem;
    }

    .price-number {
        font-size: 2.8rem;
        word-break: break-all;
    }

    .currency-sym {
        font-size: 1.8rem;
    }

    .calc-title {
        font-size: 1.5rem;
    }

    .premium-calculator-wrapper {
        border-radius: 20px;
    }
}

@media screen and (max-width: 400px) {

    .premium-calculator-box,
    .premium-features-box {
        padding: 24px 16px;
    }

    .ctrl-btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .premium-number-input {
        font-size: 1.2rem;
    }

    .price-number {
        font-size: 2.4rem;
    }

    .premium-select {
        font-size: 0.88rem;
        padding: 13px 32px 13px 15px;
    }

    .premium-calculator-wrapper {
        border-radius: 16px;
    }
}

/* ==========================================================================
   Premium Pricing CTA Component
   ========================================================================== */

.premium-pricing-cta-section {
    position: relative;
    padding: 70px 0;
    /* Compact premium aesthetics */
    margin-top: 2rem;
    margin-bottom: 0;
    /* Fix: removing 100vw breakout to keep content centered correctly with parent container */
    z-index: 5;
}

/* Full width background pseudo element */
.premium-pricing-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    z-index: -2;
}

/* Ambient glow blobs combined into one pseudo element */
.premium-pricing-cta-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    transform: translateX(-50%);
    background:
        radial-gradient(circle 200px at 80% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 100%),
        radial-gradient(circle 600px at 20% 20%, rgba(59, 130, 246, 0.04) 0%, transparent 100%);
    z-index: -1;
    pointer-events: none;
}

.cta-badge {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.cta-title {
    color: var(--dark-bg);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
    line-height: 1.15;
}

.cta-desc {
    color: var(--text-main);
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    max-width: 680px;
    margin: 0 auto 40px;
    line-height: 1.7;
    font-weight: 400;
    opacity: 0.9;
}

.cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cta-main-btn {
    padding: 18px 42px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: white;
    border: none;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.cta-main-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(59, 130, 246, 0.45);
    color: white;
}

.cta-secondary-btn {
    padding: 16px 38px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 16px;
    background: #ffffff;
    color: var(--dark-bg);
    border: 2px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    text-decoration: none;
}

.cta-secondary-btn:hover {
    background: #f8fafc;
    border-color: rgba(59, 130, 246, 0.2);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .pricing-cta-card {
        padding: 50px 24px;
        border-radius: 24px;
    }

    .cta-actions {
        flex-direction: column;
        gap: 12px;
    }

    .cta-main-btn,
    .cta-secondary-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Base Content Typography Utilities */
.content-body p,
.content-body ul li,
.content-body ol li {
    text-align: justify;
}