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

:root {
    /* Brand Colors integrated from design-system.css */
    --font-main: 'Nunito', 'Outfit', sans-serif;
    --text-hero: clamp(2rem, 8vw, 3.8rem);
    --text-section: clamp(1.6rem, 4vw, 2.4rem);
    --text-body: 0.95rem;
    --radius-organic: 100px 30px 100px 30px;
    --radius-pill: 50px;
    --transition-premium: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Animation Tokens */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Theme-aware Overlays */
    --hero-overlay: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
}

[data-theme="dark"] {
    --hero-overlay: linear-gradient(rgba(10, 15, 30, 0.9), rgba(10, 15, 30, 0.85));
}

[data-theme="dark"] .logo-orb img {
    filter: brightness(0) invert(1);
}

/* THEME TRANSITION */
body, 
header, 
footer, 
.card, 
.section, 
.glass-panel, 
.nav-link, 
.btn-primary, 
.btn-outline,
h1, h2, h3, h4, h5, h6,
p, span, i {
    transition: background-color 0.5s ease, 
                color 0.5s ease, 
                border-color 0.5s ease, 
                box-shadow 0.5s ease, 
                backdrop-filter 0.5s ease;
}

/* SCROLL PROGRESS BAR (Manjonjo) */
#scrollProgress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(to right, var(--primary), var(--accent));
    z-index: 10001;
    transition: width 0.1s ease-out;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 15px var(--accent-gl);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px
}

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

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, var(--accent-gl) 0%, transparent 40%),
                radial-gradient(circle at 100% 100%, var(--primary-gl) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
}

[data-theme="dark"] body::before {
    opacity: 0.8;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition)
}

ul {
    list-style: none
}

::selection {
    background: var(--accent);
    color: #000
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

::-webkit-scrollbar-track {
    background: var(--bg-body)
}

::-webkit-scrollbar-thumb {
    background: var(--border-bright);
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent)
}

/* TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-main);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.04em
}

h1 {
    font-size: var(--h1-fluid);
    font-weight: 900;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--text-main);
}

h2 {
    font-size: var(--h2-fluid);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-main);
}

h3 {
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    font-weight: 700
}

h4 {
    font-size: 1.1rem;
    font-weight: 700
}

p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.2rem
}

p.lead {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--text-main)
}

p:last-child {
    margin-bottom: 0
}

/* LAYOUT */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px
}

.container-sm {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px
}

.container-wide {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px
}

.section {
    padding: 64px 0
}

.section-sm {
    padding: 40px 0
}

.section-alt {
    background: var(--bg-surface)
}

@media (max-width: 768px) {
    .section {
        padding: 48px 0;
    }
    .section-sm {
        padding: 32px 0;
    }
}

.section-dark {
    background: var(--primary-dark)
}

/* SECTION HEADER */
.section-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 64px
}

.section-header.left {
    text-align: left;
    margin-left: 0
}

.section-header h2 {
    color: var(--text-main);
    margin-bottom: 12px;
    font-size: var(--text-section);
}

.section-header h2 span {
    color: var(--accent);
}

.section-header p {
    color: var(--text-secondary);
    font-size: 0.975rem;
    max-width: 520px;
    margin: 0 auto
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(190, 242, 100, .08);
    border: 1px solid rgba(190, 242, 100, .15);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 20px
}

.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 10px var(--accent);
    animation: pulseDot 2s infinite
}

@keyframes pulseDot {

    0%,
    100% {
        opacity: .5;
        transform: scale(1)
    }

    50% {
        opacity: 1;
        transform: scale(1.4)
    }
}

/* HEADER - Zenith Glass */
header#mainHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 80px;
    background: transparent;
    transition: var(--transition);
    display: flex;
    align-items: center
}

header#mainHeader.scrolled {
    height: 65px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-br);
    box-shadow: var(--shadow-premium);
}

header#mainHeader .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 40px
}

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 40px;
}

.logo img {
    height: 38px;
    width: auto;
    transition: filter 0.5s ease;
}

[data-theme="dark"] .logo img {
    filter: brightness(0) invert(1);
}

[data-theme="light"] .logo img {
    filter: none;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-main);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    white-space: nowrap
}

.brand-name span {
    color: var(--accent)
}

nav ul {
    display: flex;
    align-items: center;
    gap: 8px
}

nav a.nav-link {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    transition: var(--transition);
    position: relative;
}

nav a.nav-link:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.05)
}

nav a.nav-link.active {
    color: var(--accent);
    background: rgba(190, 242, 100, 0.05)
}

nav a.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 70%;
    height: 3px;
    background-color: var(--accent);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(190, 242, 100, 0.6);
}

.btn-nav-cta {
    background: var(--accent);
    color: #000 !important;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-glow)
}

.btn-nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(190, 242, 100, 0.3)
}

.desktop-only {
    display: flex
}

/* DROPDOWN */
.dropdown {
    position: relative
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-width: 190px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: var(--transition);
    z-index: 200;
    box-shadow: var(--shadow-lg)
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.dropdown-link {
    display: block;
    padding: 8px 11px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    transition: var(--transition)
}

.dropdown-link:hover {
    color: var(--primary);
    background: rgba(0, 0, 0, .04)
}

/* HAMBURGER */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    transition: var(--transition)
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transition: var(--transition)
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
    opacity: 0
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    z-index: 999;
    padding: 16px;
    box-shadow: var(--shadow-lg);
}

.mobile-menu.open {
    display: block
}

.mobile-menu a {
    display: block;
    padding: 12px 16px;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: var(--transition)
}

.mobile-menu a:hover {
    background: var(--bg-body);
    color: var(--accent)
}

/* BUTTONS - Zenith Style */
.btn,
.btn-primary,
.btn-outline,
.btn-tech,
.btn-tech-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 32px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    border: none
}

.btn-primary,
.btn-tech {
    background: var(--accent);
    color: #000 !important;
    box-shadow: var(--shadow-glow)
}

.btn-primary:hover,
.btn-tech:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow);
}

.btn-outline,
.btn-tech-outline {
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--border);
}

.btn-outline:hover,
.btn-tech-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
    color: var(--accent)
}

/* CARDS - Zenith Bento & Glass */
.card,
.svc-card-classic {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.card:hover,
.svc-card-classic:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    transform: translateY(-10px);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5)
}

.card h3 {
    color: var(--text-main);
    margin-bottom: 15px;
    font-weight: 800
}

.card p,
.svc-card-classic p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7
}

/* GRID SYSTEMS */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px
}

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

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

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px
}

.grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px
}

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

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

/* =========================================================================
   ZENITH GLOBAL UTILITIES & ANIMATIONS
   ========================================================================= */
.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-60 {
    margin-top: 60px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

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

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

/* ZENITH v12.0 ADVANCED ANIMATIONS */
@keyframes floatTech {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-15px) rotate(2deg);
    }

    66% {
        transform: translateY(-5px) rotate(-2deg);
    }
}

.float-tech {
    animation: floatTech 8s ease-in-out infinite;
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(190, 242, 100, 0.1);
    }

    50% {
        box-shadow: 0 0 40px rgba(190, 242, 100, 0.3);
    }
}

.pulse-glow {
    animation: pulseGlow 4s ease-in-out infinite;
}

.magnetic-hover {
    transition: transform 0.3s var(--bounce);
}

.magnetic-hover:hover {
    transform: scale(1.05) translateY(-5px);
}

.glass-ultra {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-br);
    box-shadow: var(--shadow-lg);
}

/* v13.0 TYPOGRAPHY UTILITIES */
.text-giant {
    font-size: clamp(3rem, 8vw, var(--text-hero));
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -2px;
    color: var(--text-main);
}

.text-title {
    font-size: var(--text-section);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-main);
}

.text-standard {
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* v13.0 ORGANIC CONTAINERS */
.image-organic {
    border-radius: var(--radius-organic);
    overflow: hidden;
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    transition: var(--transition-smooth);
}

.image-organic:hover {
    border-radius: 30px 100px 30px 100px;
    transform: scale(1.02);
}

/* REFINED MOTION */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* SECTION MODERN */
.section-modern {
    padding: 88px 0;
    background: var(--bg-body);
    position: relative
}

/* HERO (page-level compact heroes) - Zenith v14.1 Integrated */
.page-hero-zenith {
    min-height: 45vh;
    padding: 120px 0 80px;
    background: #fdfdfd;
    position: relative;
    overflow: hidden;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border);
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(0, 174, 183, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(0, 51, 102, 0.3) 0%, transparent 50%);
    z-index: 1;
}

.tech-bubble {
    position: absolute;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    border-radius: 50%;
    z-index: 2;
    animation: floatBubble 8s ease-in-out infinite;
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

@keyframes floatBubble {

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

    50% {
        transform: translateY(-20px) scale(1.1);
    }
}

.page-hero-zenith .container,
.page-hero-zenith .hero-content {
    position: relative;
    z-index: 10;
}

.page-hero-zenith h1 {
    color: var(--text-main);
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 950;
    letter-spacing: -0.05em;
    margin-bottom: 15px;
}

.page-hero-zenith p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    max-width: 650px;
    margin: 0 auto 28px;
    line-height: 1.7;
}

/* HOME HERO */
.home-hero {
    background: var(--bg-body);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    padding: 160px 0 100px;
}

.home-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, var(--bg-body), transparent);
    z-index: 2;
}

.home-hero .container {
    position: relative;
    z-index: 1
}

.home-hero h1 {
    max-width: 780px;
    margin: 0 auto 18px
}

.home-hero p.lead {
    max-width: 620px;
    margin: 0 auto 36px;
    font-size: 1.05rem;
    color: var(--text-secondary)
}

.hero-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500
}

.hero-avatars {
    display: flex
}

.hero-avatars span {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    border: 2px solid #fff;
    margin-left: -8px
}

.hero-avatars span:first-child {
    margin-left: 0
}

/* STATS BAR */
.stats-bar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: 60px 0;
    position: relative;
    z-index: 5;
}

.stats-grid {
    display: flex;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap
}

.stat-item {
    text-align: center;
    padding: 0 48px;
    border-right: 1px solid var(--border)
}

.stat-item:last-child {
    border-right: none
}

.stat-num {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -0.04em;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600
}

/* TECH LABEL (legacy compat) */
.tech-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(99, 91, 255, .08);
    border: 1px solid rgba(99, 91, 255, .15);
    padding: 5px 13px;
    border-radius: var(--radius-full);
    margin-bottom: 14px;
    font-family: var(--font-main)
}

.tech-label::before {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulseDot 2s infinite
}

/* SERVICE CARDS */
.service-card-modern {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column
}

.service-card-modern:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(99, 91, 255, .2)
}

.service-card-header {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: rgba(99, 91, 255, .04);
    border-bottom: 1px solid var(--border)
}

.service-card-body {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.service-card-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px
}

.service-card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between
}

/* PROCESS STEPS */
.process-flow {
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto
}

.process-flow::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 60px;
    right: 60px;
    height: 1px;
    background: var(--border)
}

.process-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2
}

.step-num {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: var(--transition)
}

.process-step:hover .step-num {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: scale(1.1)
}

.step-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px
}

.step-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5
}

/* TESTIMONIAL CARDS */
.testimonial-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: var(--transition)
}

.testimonial-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(99, 91, 255, .2)
}

.testimonial-stars {
    color: var(--warning);
    font-size: 0.8rem;
    display: flex;
    gap: 3px;
    margin-bottom: 14px
}

.testimonial-text {
    font-size: 0.92rem;
    color: var(--text-main);
    line-height: 1.7;
    font-style: italic;
    flex: 1;
    margin-bottom: 20px
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 16px
}

.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0
}

.testimonial-avatar-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(10, 37, 64, .08);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0
}

.testimonial-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary)
}

.testimonial-role {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em
}

/* FAQ ACCORDION */
.faq-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    margin-bottom: 10px
}

.faq-item:hover {
    border-color: rgba(99, 91, 255, .2)
}

.faq-trigger {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 16px;
    font-family: var(--font-main);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--primary)
}

.faq-trigger .faq-icon {
    color: var(--accent);
    transition: var(--transition);
    flex-shrink: 0;
    font-size: 0.8rem
}

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

.faq-content-inner {
    padding: 0 24px 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.7
}

/* CTA SECTION */
.cta-section {
    background: var(--primary-dark);
    padding: 88px 0;
    text-align: center;
    position: relative;
    overflow: hidden
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pattern-grid);
    background-size: 40px 40px;
    opacity: .06;
    pointer-events: none
}

.cta-section::after {
    content: '';
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 91, 255, .15) 0%, transparent 70%);
    pointer-events: none
}

.page-hero-zenith {
    padding: 160px 0 100px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 10% 20%, rgba(14, 117, 69, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(14, 117, 69, 0.03) 0%, transparent 40%),
        var(--bg-body);
}

.page-hero-zenith::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(14, 117, 69, 0.02) 0%, transparent 70%);
    pointer-events: none;
}

.cta-section .container {
    position: relative;
    z-index: 1
}

.cta-section h2 {
    color: #fff;
    /* CTAs still use dark backgrounds usually */
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    margin-bottom: 14px
}

.cta-section p {
    color: rgba(255, 255, 255, .85);
    font-size: 1rem;
    margin-bottom: 32px
}

.cta-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.cta-perks {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
    color: rgba(255, 255, 255, .6);
    font-size: 0.82rem;
    font-weight: 500
}

.cta-perks span {
    display: flex;
    align-items: center;
    gap: 5px
}

.cta-perks i {
    color: var(--success)
}

/* ZENITH SPECIFIC STYLES */
.hero-zenith {
    padding: 180px 0 120px;
    position: relative;
    overflow: hidden;
    background: var(--bg-body);
}

.hero-bg-glow {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, rgba(190, 242, 100, 0.1) 0%, transparent 70%);
    filter: blur(100px);
    pointer-events: none;
}

.hero-grid-zenith {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

h1.glitch-text {
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 9vw, 6rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.05em;
    text-transform: uppercase !important;
    color: var(--text-main);
    margin-bottom: 30px;
}

.glitch-text span {
    color: var(--accent);
    position: relative;
    text-shadow: 0 0 20px rgba(190, 242, 100, 0.4);
}

/* NAVIGATION REFINEMENT */
.logo-orb img {
    filter: brightness(0);
    /* Make white logo black for light theme */
    transition: var(--transition);
}

.logo-link:hover .logo-orb img {
    filter: brightness(0) opacity(0.8);
}

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

.nav-link:hover {
    color: var(--primary) !important;
    transform: translateY(-1px);
}

.hero-stats-mini {
    display: flex;
    gap: 40px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-subtle);
}

.mini-stat strong {
    display: block;
    font-size: 1.8rem;
    color: var(--accent);
    font-family: var(--font-heading);
}

.mini-stat span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    font-weight: 700;
}

.hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 30px;
}

/* HERO VISUAL (FLOATING GLASS & ORBS) */
.hero-visual-zenith {
    position: relative;
    perspective: 1000px;
}

.visual-container {
    position: relative;
    width: 100%;
    height: 400px;
    transform-style: preserve-3d;
    animation: floatHero 6s ease-in-out infinite;
}

@keyframes floatHero {

    0%,
    100% {
        transform: translateY(0) rotateX(2deg) rotateY(5deg);
    }

    50% {
        transform: translateY(-20px) rotateX(-2deg) rotateY(-5deg);
    }
}

.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.6;
    pointer-events: none;
}

.floating-orb.o1 {
    top: 10%;
    right: 10%;
    width: 250px;
    height: 250px;
    background: var(--accent);
}

.floating-orb.o2 {
    bottom: 0;
    left: 10%;
    width: 200px;
    height: 200px;
    background: var(--accent-blue);
}

.main-card-glass {
    position: absolute;
    inset: 20px 40px;
    background: rgba(5, 8, 16, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card-header-glass {
    height: 40px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.02);
}

.card-header-glass .dots {
    display: flex;
    gap: 6px;
}

.card-header-glass .dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-bright);
}

.card-header-glass .address-bar {
    flex: 1;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-family: monospace;
    letter-spacing: 0.1em;
}

.card-body-glass {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stat-line {
    height: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
}

.stat-line span.val {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-main);
    font-family: monospace;
}

.stat-line span:first-child {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--accent);
    border-radius: 8px;
    width: 85%;
}

.stat-line:nth-child(2) span:first-child {
    width: 92%;
    background: var(--accent-blue);
}

.chart-mock {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 120px;
    margin-top: auto;
    padding-top: 20px;
    border-bottom: 1px solid var(--border);
}

.chart-mock .bar {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px 4px 0 0;
    transition: height 1s ease-out;
    position: relative;
}

.chart-mock .bar::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: linear-gradient(to top, rgba(190, 242, 100, 0.2), transparent);
    border-radius: 2px 2px 0 0;
}

/* BENTO GRID */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
}

.bento-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.bento-item:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.bento-large {
    grid-column: span 2;
    padding: 60px;
}

.bento-small {
    grid-column: span 1;
}

.bento-icon {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 30px;
    text-shadow: 0 0 15px rgba(190, 242, 100, 0.3);
}

.bento-content h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--text-main);
}

.bento-content p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 25px;
}

.bento-link {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
}

.bento-item:hover .bento-link {
    transform: translateX(8px);
}

@media (max-width: 991px) {
    .hero-grid-zenith {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-stats-mini {
        justify-content: center;
    }

    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-large {
        grid-column: span 1;
    }
}

/* TRUST STRIP */
.trust-strip {
    background: var(--primary);
    padding: 64px 0
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    text-align: center
}

.trust-item i {
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 12px
}

.trust-item h4 {
    color: #fff;
    font-size: 0.975rem;
    margin-bottom: 6px
}

.trust-item p {
    color: rgba(255, 255, 255, .6);
    font-size: 0.83rem;
    line-height: 1.55;
    margin: 0
}

/* ZENITH v6.5 COMPONENTS */
/* System Card */
.system-card-zenith {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px;
    position: relative;
    transition: var(--transition);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.system-card-zenith:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent);
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.system-card-zenith .flagship-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--accent);
    color: #000;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.system-icon-box {
    width: 60px;
    height: 60px;
    background: rgba(190, 242, 100, 0.1);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 30px;
}

.system-card-zenith h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.system-card-zenith p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 25px;
}

.system-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.system-tag {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

/* Portfolio / Project Card */
.project-card-glass {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 16/10;
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid var(--border);
}

.project-card-glass img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5, 8, 16, 0.95) 10%, transparent 100%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition);
}

.project-card-glass:hover .project-overlay {
    opacity: 1;
    transform: translateY(0);
}

.project-card-glass:hover img {
    transform: scale(1.1);
    filter: blur(3px);
}

.project-category {
    font-size: 0.7rem;
    color: var(--accent);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
}

.project-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 12px;
}

/* Testimonial Bubble */
.testimonial-bubble {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px;
    position: relative;
    transition: var(--transition);
}

.testimonial-bubble:hover {
    border-color: var(--accent-blue);
    transform: scale(1.02);
}

.quote-icon {
    position: absolute;
    top: -15px;
    left: 30px;
    width: 30px;
    height: 30px;
    background: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
}

.testimonial-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 25px;
}

.client-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.client-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--border);
    overflow: hidden;
    border: 2px solid var(--border-bright);
}

.client-info h4 {
    font-size: 0.95rem;
    color: var(--text-main);
    margin-bottom: 2px;
}

.client-info span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Animation Utilities */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s var(--transition);
}

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

.delay-1 {
    transition-delay: 0.1s;
}

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

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

/* GRID LAYOUTS REFINED */
.grid-systems {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 991px) {

    .grid-systems,
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* Feature Grid Zenith */
.feature-grid-zenith {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-card-zenith {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    gap: 15px;
    transition: var(--transition);
}

.feature-card-zenith:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--accent-blue);
    transform: translateX(10px);
}

.feature-card-zenith .f-icon {
    font-size: 1.25rem;
    color: var(--accent);
    margin-top: 3px;
}

.feature-card-zenith h4 {
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 6px;
}

.feature-card-zenith p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* =========================================================================
   ZENITH V7.0 PREMIUM FOOTER (Ultra Modern)
   ========================================================================= */

/* PRE-FOOTER CTA */
.footer-cta-wrapper {
    position: relative;
    z-index: 10;
    margin-bottom: -80px;
}

.footer-cta-glass {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-xl);
    padding: 50px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.cta-content h2 {
    margin-bottom: 10px;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}

.cta-content h2 span {
    color: var(--accent);
}

.cta-content p {
    margin: 0;
    color: var(--text-secondary);
    max-width: 500px;
    font-size: 1.05rem;
}

.cta-actions {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}

/* MAIN FOOTER */
.zenith-footer-v7 {
    background: #f8fafc;
    position: relative;
    padding: 160px 0 0 0;
    border-top: 1px solid var(--border);
    overflow: hidden;
}

.footer-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(ellipse at bottom, rgba(14, 117, 69, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.footer-grid-v7 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 50px;
    position: relative;
    z-index: 1;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* BRAND COL */
.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    transition: var(--transition);
}

.footer-logo:hover {
    transform: scale(1.02);
}

.footer-logo img {
    height: 40px;
    filter: none;
}

.footer-logo .brand-name {
    font-size: 1.5rem;
}

.brand-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 25px;
    max-width: 320px;
}

.footer-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent);
    background: rgba(190, 242, 100, 0.08);
    border: 1px solid rgba(190, 242, 100, 0.15);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(14, 117, 69, 0.05);
    color: var(--primary);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border: 1px solid rgba(14, 117, 69, 0.1);
    transition: var(--transition)
}

.badge.pulse-glow {
    animation: badgePulseLight 2s infinite
}

@keyframes badgePulseLight {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(14, 117, 69, 0.05)
    }

    50% {
        box-shadow: 0 0 20px rgba(14, 117, 69, 0.15)
    }
}

/* LINKS COL */
.footer-col h4 {
    font-size: 1.1rem;
    color: var(--text-main);
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 12px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
}

.footer-links-list li {
    margin-bottom: 12px;
}

.footer-links-list a {
    color: var(--text-secondary);
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    transition: var(--transition);
}

.footer-links-list a i {
    font-size: 0.7rem;
    color: var(--accent);
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--transition);
}

.footer-links-list a:hover {
    color: var(--accent);
    transform: translateX(5px);
}

.footer-links-list a:hover i {
    opacity: 1;
    transform: translateX(0);
}

/* CONTACT COL */
.footer-contact-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    align-items: flex-start;
}

.fc-icon {
    color: var(--accent);
    font-size: 1.1rem;
    margin-top: 2px;
}

.fc-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.fc-text a {
    color: var(--text-secondary);
    transition: var(--transition);
}

.fc-text a:hover {
    color: var(--accent);
}

/* SOCIAL PILLS */
.mt-20 {
    margin-top: 20px;
}

.social-pills {
    display: flex;
    gap: 12px;
}

.social-pill {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: var(--transition);
}

.social-pill:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 10px 20px rgba(190, 242, 100, 0.3);
}

/* BOTTOM V7 */
.footer-bottom-v7 {
    position: relative;
    z-index: 1;
    padding: 24px 0;
    background: rgba(0, 0, 0, 0.2);
}

.copyright {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.founders-signature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
}

.founders-signature span {
    color: var(--text-muted);
}

.founders-signature strong {
    color: var(--accent);
    font-family: var(--font-heading);
    letter-spacing: 0.1em;
}

/* RESPONSIVE FOOTER V7 */
@media (max-width: 1024px) {
    .footer-cta-glass {
        flex-direction: column;
        text-align: center;
        padding: 40px 30px;
        gap: 30px;
    }

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

    .brand-desc {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .footer-grid-v7 {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .footer-bottom-v7 .flex-between {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* MOBILE BOTTOM NAV - Zenith Floating Bubble */
.mobile-bottom-nav {
    position: fixed;
    bottom: 15px;
    left: 15px;
    right: 15px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: none;
    grid-template-columns: repeat(5, 1fr);
    z-index: 1000;
    padding: 16px 6px calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border-radius: 40px;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    transition: var(--transition);
    text-align: center;
}

.bottom-nav-item i {
    font-size: 1.25rem;
    transition: var(--transition);
}

.bottom-nav-item.active {
    color: var(--accent);
}

.bottom-nav-item.active i {
    transform: translateY(-5px);
    filter: drop-shadow(0 0 8px var(--accent));
}

@media (max-width: 991px) {
    .footer-grid-zenith {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: grid;
    }

    .whatsapp-global {
        bottom: 100px;
        width: 55px;
        height: 55px;
        font-size: 1.5rem;
        border-radius: 15px;
    }

    .footer-grid-zenith {
        grid-template-columns: 1fr;
    }

    .footer-brand p {
        max-width: 100%;
    }
}

/* MOBILE ACTION PILL */
.mobile-action-pill {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(10, 37, 64, .92);
    backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .12);
    padding: 10px 22px;
    border-radius: var(--radius-full);
    align-items: center;
    gap: 18px;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    transition: all 0.5s var(--bounce);
    opacity: 0
}

.mobile-action-pill.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1
}

.pill-action {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 0.875rem;
    white-space: nowrap
}

.pill-action i {
    color: var(--accent);
    font-size: 1rem
}

.pill-sep {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, .15)
}

/* SECTOR TABS */
.sector-tabs-wrapper {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    margin-top: 48px
}

.sector-nav {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sector-nav-btn {
    background: transparent;
    border: 1px solid var(--border);
    padding: 20px 22px;
    border-radius: var(--radius-xl);
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 16px
}

.sector-nav-btn.active {
    background: #fff;
    border-color: var(--accent);
    box-shadow: var(--shadow-md)
}

.hpe-sector-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.sector-nav-btn h4 {
    margin: 0;
    font-size: 0.975rem;
    color: var(--primary)
}

.sector-nav-btn p {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: var(--text-muted)
}

.sector-content-pane {
    display: none;
    animation: fadeSlide 0.4s ease-out
}

.sector-content-pane.active {
    display: block
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

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

.sector-glass-card {
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: var(--radius-xl);
    padding: 40px;
    height: 100%
}

.sector-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center
}

.sector-image-wrapper {
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 4/3
}

.sector-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

/* HPE ABOUT SECTION */
.hpe-section-compact {
    padding: 88px 0;
    position: relative
}

.hpe-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1
}

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

.hpe-about-imagery {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden
}

.hpe-about-imagery img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block
}

.hpe-about-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(1, 19, 36, .85);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, .1)
}

.hpe-about-content .badge {
    margin-bottom: 14px
}

.hpe-vmv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 24px 0
}

.hpe-vmv-card {
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px
}

.hpe-vmv-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px
}

.hpe-vmv-icon i {
    font-size: 1rem
}

.hpe-vmv-card h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 6px
}

.hpe-vmv-card p {
    font-size: 0.815rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0
}

.hpe-values-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px
}

.hpe-value-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(99, 91, 255, .08);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(99, 91, 255, .15)
}

.value-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-body);
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border)
}

.hpe-section-head {
    text-align: center;
    margin-bottom: 56px
}

.hpe-section-head h2 {
    color: var(--primary);
    margin-bottom: 12px;
    font-size: clamp(1.5rem, 4vw, 2.2rem)
}

.hpe-section-head h2 span {
    color: var(--accent)
}

.hpe-section-head p {
    color: var(--text-secondary);
    font-size: 0.975rem;
    max-width: 520px;
    margin: 0 auto
}

/* PRODUCT PREMIUM CARD */
.product-premium-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08)
}

.product-mockup-wrapper {
    min-height: 380px;
    background: rgba(0, 0, 0, .3);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden
}

.blueprint-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, .3) 0%, transparent 60%)
}

.blueprint-lines {
    position: absolute;
    inset: 0;
    background-image: var(--pattern-grid);
    background-size: 30px 30px
}

.holograph-tag {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: rgba(99, 91, 255, .3);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(99, 91, 255, .4);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, .7);
    font-family: var(--font-mono);
    letter-spacing: .08em
}

.glass-ultra {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-br);
    box-shadow: var(--shadow-premium);
    position: relative;
    overflow: hidden;
}

.glass-ultra::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
}

.glass-modern {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-elevated);
    border-radius: var(--radius-lg);
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-br);
    transition: var(--transition)
}

.glass-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md)
}

.flagship-btns {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.modern-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 11px 24px;
    border-radius: var(--radius-full);
    transition: var(--transition)
}

.btn-primary-modern {
    background: var(--accent);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(99, 91, 255, .3)
}

.btn-primary-modern:hover {
    background: var(--accent-hover);
    transform: translateY(-1px)
}

.btn-outline-glass {
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85) !important;
    border: 1px solid rgba(255, 255, 255, .2)
}

.btn-outline-glass:hover {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .4)
}

/* FORMS */
input,
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-body);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--text-main);
    transition: var(--transition)
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99, 91, 255, .1)
}

.form-group {
    margin-bottom: 18px
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-main)
}

/* GALLERY */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px
}

.gallery-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/3;
    cursor: pointer;
    background: var(--border)
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition)
}

.gallery-item:hover img {
    transform: scale(1.05)
}

.gallery-item-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 37, 64, .6);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition)
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1
}

.gallery-item-overlay i {
    color: #fff;
    font-size: 1.5rem
}

/* SLIDER / LOGO SCROLLER */
.logo-scroller-container {
    width: 100%;
    overflow: hidden;
    background: var(--bg-surface);
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent)
}

.logo-scroller-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
    gap: 56px;
    align-items: center
}

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

    to {
        transform: translateX(-50%)
    }
}

.partner-logo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    filter: grayscale(1);
    opacity: .45;
    transition: var(--transition)
}

.partner-logo-item:hover {
    filter: grayscale(0);
    opacity: 1
}

.partner-logo-item img {
    height: 38px;
    width: auto;
    object-fit: contain
}

.partner-logo-item span {
    font-weight: 800;
    font-size: 1rem;
    color: var(--primary);
    white-space: nowrap
}

/* CLIENT LOGOS TRUST BAR */
.section-alt {
    background: var(--bg-surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
}

.clients-bar {
    background: var(--bg-surface);
    padding: 44px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
}

.clients-bar-label {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
    margin-bottom: 24px
}

.clients-scroller {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent)
}

.clients-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 30s linear infinite;
    gap: 52px;
    align-items: center
}

.client-logo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: .5;
    transition: opacity .3s ease;
    flex-shrink: 0
}

.client-logo-item:hover {
    opacity: 1
}

.client-logo-item img {
    height: 44px;
    width: auto;
    object-fit: contain;
    max-width: 120px
}

.client-logo-item span {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--primary-dark);
    white-space: nowrap;
    letter-spacing: -0.02em
}

/* 5-YEAR VISION DARK PANEL */
.stats-bar-premium {
    background: var(--primary-dark);
    padding: 88px 0;
    position: relative;
    overflow: hidden
}

.stats-bar-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pattern-grid);
    background-size: 40px 40px;
    opacity: .06;
    pointer-events: none
}

.stats-bar-premium::after {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(circle, rgba(16, 185, 129, .12) 0%, transparent 65%);
    pointer-events: none
}

.stats-bar-premium .container {
    position: relative;
    z-index: 1
}

.stats-bar-premium .section-title {
    text-align: center;
    margin-bottom: 52px
}

.stats-bar-premium .section-title h2 {
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 12px
}

.stats-bar-premium .section-title p {
    color: rgba(255, 255, 255, .6);
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto
}

.stats-grid-premium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}

.stat-item-premium {
    padding: 24px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    backdrop-filter: blur(10px);
    transition: var(--transition)
}

.stat-item-premium:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(16, 185, 129, .3);
    transform: translateY(-4px)
}

.stat-number-premium {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--primary);
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: 8px
}

/* CAPTURE ACTION CTA SECTION */
.capture-cta-section {
    background: linear-gradient(135deg, var(--bg-body) 0%, rgba(14, 117, 69, .04) 100%);
    padding: 100px 20px;
    text-align: center;
    border-top: 1px solid var(--border);
    position: relative;
    overflow: hidden
}

.capture-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(ellipse, rgba(14, 117, 69, .06), transparent 70%);
    pointer-events: none
}

.capture-cta-section h2 {
    position: relative;
    z-index: 1
}

.capture-cta-section p {
    position: relative;
    z-index: 1
}

/* HOW WE WORK PROCESS GRID */
.process-grid .process-step {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    transition: var(--transition);
    text-align: center;
    position: relative;
    overflow: hidden
}

.process-grid .process-step:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-6px);
    border-color: rgba(14, 117, 69, .2)
}

.process-grid .process-step:hover h4 {
    color: var(--accent)
}

.process-grid .process-step::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(14, 117, 69, .03), transparent);
    opacity: 0;
    transition: var(--transition)
}

.process-grid .process-step:hover::after {
    opacity: 1
}

/* SCROLL REVEAL & MICRO-ANIMATIONS */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1)
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0)
}

.reveal-up {
    animation: revealUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards
}

@keyframes revealUp {
    from {
        opacity: 0;
        transform: translateY(40px)
    }

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

.reveal-glow {
    animation: revealGlow 0.8s ease-out forwards
}

@keyframes revealGlow {
    from {
        opacity: 0;
        transform: scale(0.95);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0)
    }

    to {
        opacity: 1;
        transform: scale(1);
        box-shadow: var(--shadow-glow)
    }
}

.float-anim {
    animation: floatAnim 6s ease-in-out infinite
}

@keyframes floatAnim {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-15px)
    }
}

.float-anim-slow {
    animation: floatAnim 8s ease-in-out infinite
}

.slide-in-blurred {
    animation: slideInBlurred 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards
}

@keyframes slideInBlurred {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: translateX(-50px)
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0)
    }
}

/* HPE LOADER */
#hpe-unified-loader {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(1, 19, 36, .98);
    backdrop-filter: blur(20px);
    z-index: 99999;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

#hpe-unified-loader.loading {
    display: flex;
    animation: fadeIn 0.3s ease forwards
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(1)
    }

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

/* TOAST */
#toast-container {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px
}

/* PROJECT CARDS */
.project-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition);
    display: flex;
    flex-direction: column
}

.project-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px)
}

.project-card-img {
    height: 200px;
    overflow: hidden;
    background: var(--border)
}

.project-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition)
}

.project-card:hover .project-card-img img {
    transform: scale(1.04)
}

.project-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column
}

.project-card-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px
}

.project-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: rgba(99, 91, 255, .08);
    color: var(--accent);
    margin-bottom: 8px
}

/* SYSTEM CARDS */
.system-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 24px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.system-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: rgba(99, 91, 255, .2)
}

.system-card-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(16, 185, 129, .1);
    color: var(--success)
}

.system-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(10, 37, 64, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 16px
}

.system-card-type {
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 6px
}

.system-card h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 8px
}

.card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary) !important;
    margin-bottom: 8px
}

.card p,
.card-body p {
    color: var(--text-secondary) !important;
}

.service-card-body h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary) !important;
    margin-bottom: 8px
}

/* DASHBOARD/AUTH COMPAT */
.bottom-nav {
    display: none
}

/* DELIVERY PROCESS */
.delivery-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative
}

.delivery-step {
    display: flex;
    gap: 16px
}

.delivery-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-body);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-muted);
    flex-shrink: 0
}

.delivery-step-num.done {
    background: rgba(16, 185, 129, .1);
    border-color: var(--success);
    color: var(--success)
}

/* MISC UTILITY */
.text-accent {
    color: var(--accent)
}

.text-primary {
    color: var(--primary)
}

.text-muted {
    color: var(--text-muted)
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.text-accent-gradient {
    background: linear-gradient(135deg, var(--accent) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.hpe-text-shimmer {
    background: linear-gradient(90deg, var(--primary) 25%, var(--accent) 50%, var(--primary) 75%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerText 5s linear infinite
}

@keyframes shimmerText {
    0% {
        background-position: -200% center
    }

    100% {
        background-position: 200% center
    }
}

.glass-effect {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: var(--shadow-xl)
}

.glass-effect-dark {
    background: rgba(7, 71, 44, 0.65);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-xl)
}

.separator {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .2);
    margin: 0 6px
}

/* =====================================================
   MOBILE BOTTOM NAV — Premium Floating Bubble (v14.3)
===================================================== */

/* Container: floating pill */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 420px;
    background: var(--glass-bg);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18),
                inset 0 1px 0 rgba(255,255,255,0.1);
    z-index: 9999;
    padding: 8px;
    align-items: center;
    border-radius: 50px;
    gap: 4px;
}

/* Each nav item */
.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-radius: 40px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    gap: 3px;
    min-width: 52px;
}

/* Icon styling */
.bottom-nav-item i {
    font-size: 0.82rem;
    color: #0e7545;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 1px 3px rgba(14, 117, 69, 0.15));
    display: block;
}

/* Label */
.bottom-nav-item span {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    opacity: 0.65;
    transition: all 0.3s ease;
    display: block;
}

/* ACTIVE state — highlighted bubble */
.bottom-nav-item.active {
    background: linear-gradient(135deg, rgba(14,117,69,0.12), rgba(22,163,74,0.08));
    color: #0e7545;
    box-shadow: 0 4px 14px rgba(14, 117, 69, 0.15),
                inset 0 1px 0 rgba(255,255,255,0.2);
}

.bottom-nav-item.active i {
    color: #0e7545;
    transform: scale(1.12) translateY(-1px);
    filter: drop-shadow(0 2px 6px rgba(14, 117, 69, 0.35));
}

.bottom-nav-item.active span {
    opacity: 1;
    color: #0e7545;
}

/* PRESS reaction — bubble squish */
.bottom-nav-item:active {
    transform: scale(0.82);
    background: rgba(14, 117, 69, 0.1);
}

.bottom-nav-item:active i {
    transform: scale(0.9);
}

/* ====== RESPONSIVE ====== */
@media(max-width:1024px) {
    .hpe-about-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .hpe-about-imagery img {
        height: 320px
    }

    .sector-tabs-wrapper {
        grid-template-columns: 1fr
    }

    .sector-nav {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 16px
    }

    .sector-nav-btn {
        min-width: 220px;
        flex-shrink: 0
    }

    .product-premium-card {
        grid-template-columns: 1fr
    }

    .product-mockup-wrapper {
        min-height: 280px;
        order: -1
    }

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

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

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

@media(min-width: 992px) {

    .mobile-menu-overlay,
    .hamburger,
    .mobile-nav-link {
        display: none !important;
    }
}

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

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

    .container {
        padding: 0 20px;
    }

    header#mainHeader .container {
        padding: 0 20px;
        height: 70px;
    }

    .logo-orb img {
        height: 32px !important;
    }

    nav {
        display: none
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        cursor: pointer;
        z-index: 2100;
        transition: var(--transition);
    }

    .hamburger span {
        display: block;
        width: 100%;
        height: 3px;
        background: var(--text-main);
        border-radius: 3px;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .hamburger.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .nav-cta-area .desktop-only {
        display: none
    }

    .mobile-bottom-nav {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        background: rgba(255, 255, 255, 0.85);
        border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    .bottom-nav-item i {
        font-size: 1.55rem;
        margin-bottom: 5px;
    }

    .bottom-nav-item span {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    body.no-scroll {
        overflow: hidden;
    }

    .hero-actions {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100%;
    }

    .hero-actions a {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 18px !important;
    }

    /* Safe area for bottom nav */
    .mobile-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }

    /* Show app nav */
    .mobile-action-pill {
        display: flex;
        bottom: calc(80px + env(safe-area-inset-bottom))
    }

    .container {
        padding: 0 16px
    }

    .section {
        padding: 64px 0
    }

    .home-hero {
        padding: 100px 0 60px
    }

    .page-hero {
        padding: 100px 0 48px
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .grid-auto,
    .grid-premium {
        grid-template-columns: 1fr
    }

    h1 {
        font-size: 2.4rem
    }

    h2 {
        font-size: 1.8rem
    }

    .home-hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .home-hero h1,
    .home-hero h2 {
        color: var(--text-main) !important;
        text-shadow: none;
    }

    .home-hero .hero-btns,
    .home-hero .hero-trust {
        justify-content: center !important;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .stat-item {
        border-right: 1px solid var(--border);
        border-bottom: none;
        padding: 10px 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .stat-item:last-child {
        border-right: none;
        border-bottom: none;
    }

    .stat-num {
        font-size: 1.6rem;
        margin-bottom: 5px;
    }

    .stat-label {
        font-size: 0.65rem;
        line-height: 1.3;
    }

    .process-flow {
        flex-direction: column;
        gap: 0;
        padding-left: 8px
    }

    .process-flow::before {
        display: none
    }

    .process-step {
        display: flex;
        align-items: flex-start;
        text-align: left;
        padding-bottom: 32px;
        position: relative
    }

    .process-step::before {
        content: '';
        position: absolute;
        left: 24px;
        top: 48px;
        bottom: 0;
        width: 1px;
        background: var(--border)
    }

    .process-step:last-child {
        padding-bottom: 0
    }

    .process-step:last-child::before {
        display: none
    }

    .step-num {
        margin: 0;
        flex-shrink: 0
    }

    .step-title,
    .step-desc {
        padding-left: 16px;
        text-align: left
    }

    .footer-content-wrapper {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center
    }

    .sector-card-grid {
        grid-template-columns: 1fr
    }

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

    .cta-btns {
        flex-direction: column;
        align-items: center
    }

    .flagship-btns {
        flex-direction: column
    }

    .hpe-vmv-grid {
        grid-template-columns: 1fr
    }

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

@media(max-width:480px) {
    .trust-grid {
        grid-template-columns: 1fr
    }

    .stats-bar {
        padding: 32px 0
    }

    .section-header {
        margin-bottom: 40px
    }
}

/* ==========================================================
   ZENITH v10.0 SUBPAGE OVERHAUL UTILITIES
========================================================== */
.page-hero-zenith {
    position: relative;
    padding: 140px 0 80px;
    background-image: var(--hero-overlay), url('../img/hero_it_premium.png');
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

@media (max-width: 768px) {
    .page-hero-zenith {
        padding: 100px 0 60px;
    }
}

.page-hero-zenith h1 {
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--text-main);
    margin-bottom: 15px;
    font-weight: 800;
}

.page-hero-zenith p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto 30px;
}

.glass-panel-zenith {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-lg);
    padding: 2.5rem;
}

/* WHATSAPP GLOBAL (v14.0 Refined) */
.whatsapp-global {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #25d366;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    z-index: 999;
}

.whatsapp-global .tooltip {
    display: none;
}

/* User requested removal */

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

    /* MOBILE MENU OVERLAY STYLES */
    .mobile-menu-overlay {
        position: fixed;
        inset: 0;
        background: var(--bg-body);
        background: radial-gradient(circle at top right, var(--primary-gl), var(--bg-body));
        z-index: 2000;
        display: none;
        padding: 140px 40px 60px;
        flex-direction: column;
        justify-content: space-between;
        opacity: 0;
        transform: translateY(-20px);
        transition: all 0.5s var(--ease-premium);
        backdrop-filter: blur(20px);
    }

    .mobile-menu-overlay.active {
        display: flex;
        opacity: 1;
        transform: translateX(0);
    }

    .mobile-nav-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-nav-link {
        display: block;
        font-size: 2.8rem;
        font-weight: 900;
        color: var(--text-main);
        text-decoration: none;
        margin-bottom: 25px;
        font-family: var(--font-heading);
        letter-spacing: -2px;
        transition: all 0.4s var(--ease-premium);
        opacity: 0;
        transform: translateY(20px);
    }

    .mobile-menu-overlay.active .mobile-nav-link {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-nav-link:nth-child(1) { transition-delay: 0.1s; }
    .mobile-nav-link:nth-child(2) { transition-delay: 0.15s; }
    .mobile-nav-link:nth-child(3) { transition-delay: 0.2s; }
    .mobile-nav-link:nth-child(4) { transition-delay: 0.25s; }
    .mobile-nav-link:nth-child(5) { transition-delay: 0.3s; }

    .mobile-menu-footer {
        border-top: 1px solid var(--border-subtle);
        padding-top: 30px;
        margin-top: auto;
    }

    .mobile-menu-footer p {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-bottom: 15px;
        font-weight: 700;
    }

    .bento-large {
        grid-column: span 1;
    }

    .header-flex .desktop-nav {
        display: none;
    }
}

/* Legacy Content Suppression */
.hero-bg-text {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media(min-width: 992px) {

    .mobile-menu-overlay,
    .hamburger,
    .mobile-nav-link {
        display: none !important;
    }
}

.grid-systems {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.bento-grid-v12 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 280px;
    gap: 20px;
}

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

    .bento-grid-v12 {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: auto !important;
    }
}

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

    .bento-grid-v12 {
        grid-template-columns: 1fr !important;
    }
}

.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s var(--ease-premium);
    will-change: opacity, transform;
}

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

.system-card-zenith,
.bento-card-v12,
.project-card-glass,
.pricing-card-zenith {
    transition: var(--transition);
}

.system-card-zenith:hover,
.bento-card-v12:hover,
.project-card-glass:hover,
.pricing-card-zenith:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-float);
    border-color: var(--primary);
}

/* IMPACT STATS ELITE (v14.1) */
.grid-stats-elite {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stat-card-elite {
    background: linear-gradient(135deg, var(--glass-bg), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    padding: 30px 15px;
    border-radius: 24px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.stat-card-elite::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 0%, var(--accent-gl), transparent 70%);
    opacity: 0;
    transition: var(--transition);
}

.stat-card-elite:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 20px var(--accent-gl);
}

.stat-card-elite:hover::before {
    opacity: 0.1;
}

.stat-number-elite {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 900;
    color: var(--accent);
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 8px;
    text-shadow: 0 0 20px var(--accent-gl);
}

.stat-label-elite {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}

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

@media (max-width: 640px) {
    .grid-stats-elite {
        grid-template-columns: 1fr !important;
    }
}

/* MORE MENU DRAWER (v14.1 Elite) */
.more-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9998;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.more-menu-overlay.active {
    display: block;
    opacity: 1;
}

.more-drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--bg-surface);
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%);
    border-radius: 32px 32px 0 0;
    padding: 30px 24px calc(100px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -20px 50px rgba(15, 23, 42, 0.15);
}

.more-menu-overlay.active .more-drawer {
    transform: translateY(0);
}

.more-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.more-drawer-header h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
}

.more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 10px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    text-decoration: none;
    color: var(--text-main);
    transition: all 0.3s var(--ease-premium);
    box-shadow: var(--shadow-premium);
}

.more-item:active {
    transform: scale(0.92);
    background: var(--bg-surface);
}

.more-item i {
    font-size: 1.2rem;
    color: var(--primary);
}

.more-item span {
    font-size: 0.75rem;
    font-weight: 700;
}

.more-item:active {
    transform: scale(0.95);
    background: var(--primary-gl);
}

@media (min-width: 992px) {
    .more-menu-overlay {
        display: none !important;
    }
}

/* MOBILE HEADER UTILITIES (v14.1 Elite) */
.header-utilities {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 15px;
}

.header-util-btn {
    color: var(--text-main);
    font-size: 1.2rem;
    position: relative;
    transition: var(--transition);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.header-util-btn:active {
    transform: scale(0.9);
    opacity: 0.7;
}

.util-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border: 2px solid var(--bg-surface);
    border-radius: 50%;
    animation: pulse-red 2s infinite;
}

/* ZENITH FOOTER V7 - Premium & Deep */
.zenith-footer-v7 {
    background: var(--bg-surface);
    color: var(--text-secondary);
    padding: 100px 0 0;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
}

.footer-glow {
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(circle, var(--accent-gl) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    opacity: 0.3;
}

.footer-grid-v7 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 60px;
    position: relative;
    z-index: 2;
    padding-bottom: 80px;
}

.footer-brand-col .footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    text-decoration: none;
}

.footer-brand-col .footer-logo img {
    height: 40px;
    width: auto;
}

.footer-brand-col .brand-name {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-main);
    letter-spacing: -1px;
}

.footer-brand-col .brand-name span {
    color: var(--accent);
}

.footer-col h4 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-main);
    margin-bottom: 30px;
    font-weight: 800;
}

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

.footer-links-list li {
    margin-bottom: 15px;
}

.footer-links-list a {
    color: var(--text-secondary);
    font-size: 0.95rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links-list a i {
    font-size: 0.7rem;
    opacity: 0.5;
}

.footer-links-list a:hover {
    color: var(--accent);
    transform: translateX(5px);
}

.footer-bottom-v7 {
    border-top: 1px solid var(--border);
    padding: 40px 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* BUBBLE BUTTON STYLE (v14.1 Elite) */
.btn-bubble {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, #0e7545 0%, #16a34a 100%);
    color: white !important;
    font-weight: 700;
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease-premium);
    box-shadow: 0 10px 25px rgba(14, 117, 69, 0.25),
                inset 0 4px 6px rgba(255, 255, 255, 0.2);
    text-decoration: none;
}

.btn-bubble::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.6s;
}

.btn-bubble:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px var(--primary-gl),
                inset 0 2px 4px rgba(255, 255, 255, 0.3);
    filter: brightness(1.1);
}

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

.btn-bubble:active {
    transform: translateY(1px) scale(0.98);
}

.btn-bubble i {
    margin-left: 10px;
    transition: transform 0.3s var(--ease-premium);
}

.btn-bubble:hover i {
    transform: translateX(5px);
}
/* PREMIUM BUTTON GLOW (Manjonjo) */
.btn-primary-glow {
    position: relative;
    overflow: hidden;
}

.btn-primary-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.btn-primary-glow:hover::after {
    opacity: 1;
    animation: rotateGlow 4s linear infinite;
}

@keyframes rotateGlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* FLOATING DECOR (Manjonjo) */
.floating-blob {
    position: fixed;
    width: 400px;
    height: 400px;
    background: var(--accent-gl);
    filter: blur(120px);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.3;
    pointer-events: none;
    animation: floatBlob 20s infinite alternate ease-in-out;
}

@keyframes floatBlob {
    0% { transform: translate(-10%, -10%) scale(1); }
    100% { transform: translate(20%, 20%) scale(1.2); }
}

.blob-1 { top: -100px; left: -100px; background: var(--primary-gl); }
.blob-2 { bottom: -100px; right: -100px; animation-delay: -5s; }

.theme-toggle:hover i {
    transform: rotate(45deg) scale(1.2);
}

[data-theme="dark"] .theme-toggle i {
    transform: rotate(360deg);
}

@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

/* =============================================================
   MOBILE TOP-NOTCH OVERHAUL (v14.2 Elite)
   Applies comprehensive fixes for a premium mobile experience
============================================================= */
@media (max-width: 768px) {

    /* === BODY & GLOBAL === */
    body {
        padding-bottom: 90px; /* room for floating nav */
    }

    /* === WHATSAPP BUTTON — reposition away from bottom nav === */
    .whatsapp-global {
        bottom: 85px !important;
        right: 18px !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 1.5rem !important;
    }

    /* === HEADER === */
    .header-inner,
    .header-flex {
        padding: 0 16px;
    }

    /* === HERO SECTIONS === */
    .hero-section,
    .home-hero {
        padding: 100px 20px 60px !important;
        text-align: center;
    }

    .home-hero h1,
    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.2 !important;
        letter-spacing: -0.03em;
    }

    .home-hero p,
    .hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .hero-btns,
    .cta-btns {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-btns a,
    .cta-btns a,
    .hero-btns button {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    /* === PAGE HERO (Subpages) === */
    .page-hero-zenith {
        padding: 110px 20px 50px !important;
    }

    .page-hero-zenith h1 {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    }

    .page-hero-zenith p {
        font-size: 0.95rem !important;
    }

    /* === SECTIONS === */
    .section-header {
        margin-bottom: 30px;
    }

    .section-header h2 {
        font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    }

    section,
    .section,
    .services-section,
    .systems-section,
    .about-section {
        padding: 60px 20px !important;
    }

    /* === GRID SYSTEMS === */
    .grid-systems {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .grid-stats-elite {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    .stat-card-elite {
        padding: 20px 10px !important;
    }

    .stat-number-elite {
        font-size: 1.8rem !important;
    }

    /* === CARDS === */
    .card,
    .svc-card-classic,
    .system-card-zenith,
    .project-card-glass,
    .pricing-card-zenith {
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }

    /* === AUTH PAGES (Login / Register) === */
    .auth-page {
        padding: 100px 16px 80px !important;
        align-items: flex-start !important;
    }

    .glass-card {
        padding: 28px 20px !important;
        border-radius: 24px !important;
    }

    .glass-card h2 {
        font-size: 1.5rem !important;
    }

    /* === FORM INPUTS === */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 1rem !important;
        padding: 14px 14px 14px 48px !important;
    }

    /* === MOBILE MENU LARGE LINKS — reduce font a little on small screens === */
    .mobile-nav-link {
        font-size: 2.2rem !important;
        margin-bottom: 18px !important;
    }

    /* === FOOTER === */
    footer .container {
        padding: 0 20px !important;
    }

    .footer-grid,
    .footer-cols {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* === BOTTOM NAV VISIBILITY === */
    .mobile-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
    }
}

/* Extra small phones */
@media (max-width: 390px) {
    .home-hero h1,
    .hero-title {
        font-size: 1.9rem !important;
    }

    .glass-card {
        padding: 22px 16px !important;
    }

    .grid-stats-elite {
        grid-template-columns: 1fr !important;
    }
}

/* === FOOTER BOTTOM STACK ON MOBILE === */
@media (max-width: 600px) {
    .footer-bottom-v7 .flex-between,
    .footer-bottom-v7 .container {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
    }

    /* === OUTLINE BUTTON VISIBILITY === */
    .btn-outline,
    .btn-tech-outline {
        border: 2px solid var(--primary) !important;
        color: var(--primary) !important;
    }

    /* === NAV LABELS === */
    .bottom-nav-item span {
        font-size: 0.52rem !important;
    }
}