/* ================================================================
   XS INFOSOL — VANILLA CSS
   ================================================================ */

/* ═══════════════════════════════════════════════════════════════════
   CROSS-BROWSER COMPATIBILITY LAYER
   Supports: Chrome, Firefox, Edge, Safari, Opera, Brave
   ═══════════════════════════════════════════════════════════════════ */

/* Box-sizing reset for all browsers */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Font smoothing — macOS/iOS Safari + Firefox */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Prevent iOS text inflation */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Focus-visible — cross-browser keyboard navigation indicator */
:focus-visible {
    outline: 2px solid var(--primary, #f97316);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Tap highlight on iOS/Android */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Image rendering — Safari, Firefox, Chrome */
img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Button cross-browser reset */
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Input cross-browser reset */
input,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Scrollbar — WebKit (Chrome, Edge, Opera, Brave, Safari) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.4);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(249, 115, 22, 0.7);
}

/* Scrollbar — Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(249, 115, 22, 0.4) transparent;
}

/* Selection color */
::selection {
    background: rgba(249, 115, 22, 0.3);
    color: #fff;
}

::-moz-selection {
    background: rgba(249, 115, 22, 0.3);
    color: #fff;
}

/* Smooth scroll — all browsers */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Sticky position — Safari prefix */
.sticky,
[style*="position: sticky"] {
    position: -webkit-sticky;
    position: sticky;
}

/* Flexbox gap polyfill hint — Safari 14 and below */
/* (gap is supported in Safari 14.1+ for flex — this comment documents the dependency) */

/* ═══════════════════════════════════════════════════════════════════
   END CROSS-BROWSER COMPATIBILITY LAYER
   ═══════════════════════════════════════════════════════════════════ */


/* ----------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ---------------------------------------------------------------- */
:root {
    /* Surface / Background */
    --surface-lowest: #000000;
    --surface: #0e0e0e;
    --surface-low: #131313;
    --surface-container: #191919;
    --surface-cont-low: #131313;
    --surface-cont-high: #1f1f1f;
    --surface-cont-highest: #262626;
    --surface-bright: #2c2c2c;
    --surface-variant: #262626;
    --surface-match: #0a0a0a;
    /* Brand */
    --primary: #ff9069;
    --primary-dim: #fe5e1e;
    --primary-container: #ff7948;
    --primary-fixed-dim: #fe5e1e;
    --on-primary-fixed: #000000;

    /* Text */
    --on-surface: #ffffff;
    --on-surface-variant: #ababab;
    --secondary: #e5e2dc;

    /* Borders */
    --outline-variant: #484848;

    /* Typography */
    --font-headline: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Layout */
    --max-w: 87.5rem;
    /* 1400px */
    --section-px: 2rem;
    /* 32px */
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--surface-lowest);
    color: var(--secondary);
    overflow-x: hidden;
    position: relative;
    width: 100%;
    -webkit-font-smoothing: antialiased;
}

/* Hide scrollbar (Chrome/Safari) */
body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* IE/Edge */
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

/* Selection */
::selection {
    background: var(--primary);
    color: #000;
}

/* ----------------------------------------------------------------
   3. MATERIAL ICONS
   ---------------------------------------------------------------- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

/* ----------------------------------------------------------------
   4. UTILITY CLASSES
   ---------------------------------------------------------------- */
.container {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--section-px);
}

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

.text-gradient-subtle {
    background: linear-gradient(90deg, #ffffff, var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.9;
}

.section-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary);
}

/* ----------------------------------------------------------------
   5. CARD GLOW BORDER
   ---------------------------------------------------------------- */
.glow-card {
    position: relative;
    background: var(--surface-container);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: transform 0.5s ease;
}

.glow-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 144, 105, 0.3) 0%, transparent 50%, rgba(255, 121, 72, 0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    transition: opacity 0.5s ease;
}

.glow-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.glow-card:hover {
    transform: translateY(-8px);
}

.glow-card:hover::before {
    background: linear-gradient(135deg, rgba(255, 144, 105, 0.7) 0%, transparent 50%, rgba(255, 121, 72, 0.7) 100%);
}

/* ----------------------------------------------------------------
   6. TOP BAR
   ---------------------------------------------------------------- */
.topbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 60;
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.375rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--on-surface-variant);
}

.topbar__left,
.topbar__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.topbar__contact {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.topbar__contact .material-symbols-outlined {
    font-size: 0.875rem;
}

.topbar__link {
    transition: color 0.2s ease;
}

.topbar__link:hover {
    color: var(--primary);
}

@media (max-width: 767px) {
    .topbar {
        display: none;
    }
}

/* ----------------------------------------------------------------
   7. NAVIGATION
   ---------------------------------------------------------------- */
.navbar {
    position: fixed;
    top: 27px;
    width: 100%;
    z-index: 50;
    transition: top 0.3s ease, box-shadow 0.3s ease;
}

/* JS adds this class when scrolled */
.navbar.scrolled {
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.nav-bg {
    position: absolute;
    inset: 0;
    /* background: rgba(14, 14, 14, 0.82); */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.05); */
    transition: background 0.3s ease;
}

/* JS swaps opacity class → use CSS class instead */
.nav-bg.opaque {
    background: rgba(14, 14, 14, 0.96);
}

.nav-inner {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--section-px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
    position: relative;
    z-index: 10;
}

/* Logo */
.nav-logo__img {
    height: 55px;
    width: auto;
    display: block;
}

.nav-logo__tagline {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--primary);
    margin-top: 0.25rem;
}

/* Nav Links */
.nav-links {
    display: none;
    align-items: center;
    gap: 2rem;
    height: 100%;
}

@media (min-width: 1280px) {
    .nav-links {
        display: flex;
    }
}

.nav-link {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #FF5F1F;
}

/* Mega menu trigger wrapper */
.nav-item {
    height: 100%;
    display: flex;
    align-items: center;
    /* Removed position: relative to allow mega-menu to center relative to .nav-inner */
}

/* Mega Menu */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 1350px;
    max-width: 95vw;
    background: rgba(14, 14, 14, 0.97);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border-bottom: 1px solid rgba(72, 72, 72, 0.2);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
    border-radius: 0 0 1rem 1rem;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    will-change: opacity, transform, visibility;
    overflow: hidden;
}

.nav-item:hover .mega-menu {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.nav-chevron {
    font-size: 1rem;
    transition: transform 0.3s ease;
    display: inline-block;
}

.nav-item:hover .nav-chevron {
    transform: rotate(180deg);
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    padding: 3rem;
}

.mega-col h4 {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--on-surface);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-left: 2px solid var(--primary);
    padding-left: 0.75rem;
    margin-bottom: 1rem;
}

.mega-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mega-col ul li a {
    font-size: 0.875rem;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
}

.mega-col ul li a .material-symbols-outlined {
    font-size: 1rem;
}

.mega-col ul li a:hover {
    color: var(--primary);
}

/* Featured mega card (spans 2 cols) */
.mega-card {
    grid-column: span 1;
    background: var(--surface-container);
    border-radius: 0.75rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    transition: background 0.3s;
}

.mega-card:hover {
    background: rgba(25, 25, 25, 0.9);
}

.mega-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 144, 105, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.mega-card:hover .mega-card__overlay {
    opacity: 1;
}

.mega-card h4 {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    padding: 0;
    letter-spacing: normal;
    text-transform: none;
    position: relative;
    z-index: 1;
}

.mega-card p {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    line-height: 1.7;
    max-width: 22rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.mega-card a {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: gap 0.2s;
    position: relative;
    z-index: 1;
}

/* ============================================================ 
   Products Mega Menu (Interactive)
   ============================================================ */
.products-mega {
    width: 1200px;
}

.products-mega .mega-grid {
    grid-template-columns: 480px 1fr;
    padding: 0;
    gap: 0;
    align-items: stretch;
    /* Ensures both columns are the same height */
}

/* List Column */
.product-list-col {
    padding: 2.5rem;
    background: rgba(20, 20, 20, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.product-item-link {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
}

.product-item-link .material-symbols-outlined {
    font-size: 1.75rem;
    color: var(--secondary);
    transition: color 0.3s;
}

.product-item-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
    margin-bottom: 0.25rem;
}

.product-item-text p {
    font-size: 0.8125rem;
    color: var(--secondary);
    line-height: 1.4;
}

.product-item-link:hover,
.product-item-link.active {
    background: rgba(255, 255, 255, 0.04);
}

.product-item-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
}

.product-item-link.active .material-symbols-outlined {
    color: var(--primary);
}


/* Preview Column */
.product-preview-pane {
    padding: 3rem;
    background: linear-gradient(135deg, rgba(25, 25, 25, 0.2), transparent);
    display: flex;
    flex-direction: column;
    /* Stack preview contents */
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Ensure container fills grid track */
}

#pd-preview-content {
    max-width: 500px;
    opacity: 1;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#pd-preview-content.changing {
    opacity: 0;
    transform: translateY(10px);
}

.pd-image-frame {
    width: 100%;
    aspect-ratio: 16/10;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin-bottom: 2rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.pd-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#pd-preview-title {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

#pd-preview-desc {
    font-size: 0.9375rem;
    color: var(--secondary);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.pd-preview-btn {
    background: var(--primary);
    color: var(--surface);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
}

.pd-preview-btn:hover {
    transform: translateY(-2px);
    background: #ff7c4d;
}

.mega-card a:hover {
    gap: 0.5rem;
}

.mega-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.02);
}

.mega-footer__text {
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}

.mega-footer__sub {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
}

.mega-footer__btn {
    background: rgba(255, 144, 105, 0.2);
    color: var(--primary);
    border: 1px solid rgba(255, 144, 105, 0.4);
    padding: 0.5rem 1.5rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: var(--font-body);
    transition: background 0.2s, color 0.2s;
}

.mega-footer__btn:hover {
    background: var(--primary);
    color: #000;
}

/* CTA Button */
.nav-cta {
    position: relative;
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    padding: 0.625rem 1.5rem;
    border-radius: 999px;
    color: var(--on-primary-fixed);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.875rem;
    border: 1px solid #ffb698;
    box-shadow: 0 0 15px rgba(255, 95, 31, 0.3);
    transition: box-shadow 0.3s, transform 0.15s;
    display: none;
}

@media (min-width: 768px) {
    .nav-cta {
        display: block;
    }
}

.nav-cta:hover {
    box-shadow: 0 0 25px rgba(255, 95, 31, 0.5);
}

.nav-cta:active {
    transform: scale(0.9);
}

/* ----------------------------------------------------------------
   8. SCROLLYTELLING HERO
   ---------------------------------------------------------------- */
.hero-track {
    position: relative;
    width: 100%;
    background: #000;
    /* Height set dynamically by JS */
}

.hero-sticky {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    pointer-events: none;
    z-index: 5;
}

.hero-sticky .hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.4) 60%, #000 100%);
    pointer-events: none;
    z-index: 10;
}

.hero-sticky .hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    z-index: 20;
    pointer-events: none;
    margin: auto;
}

.hero-text-wrapper {
    max-width: 64rem;
    text-align: center;
    position: relative;
    width: 100%;
}

/* Individual scroll text panels */
.scroll-text-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0;
    visibility: hidden;
    text-align: center;
}

.hero-h1 {
    font-family: var(--font-headline);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.hero-h2 {
    font-family: var(--font-headline);
    font-size: clamp(2rem, 6vw, 4.25rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
    text-align: center;
}

.hero-h2--xl {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.04em;
}

.hero-sticky .hero-sub {
    margin-top: 1.5rem;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--secondary);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-dim {
    color: rgba(255, 255, 255, 0.7);
}

.hero-ctas {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    pointer-events: auto;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    padding: 0.875rem 2rem;
    border-radius: 999px;
    color: #000;
    font-family: var(--font-body);
    font-weight: 900;
    font-size: 0.875rem;
    box-shadow: 0 0 20px rgba(255, 95, 31, 0.4);
    transition: transform 0.15s;
    border: none;
}

.btn-primary:hover {
    box-shadow: 0 0 30px rgba(255, 95, 31, 0.6);
}

.btn-primary:active {
    transform: scale(0.95);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.875rem 2rem;
    border-radius: 999px;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.2s;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.5;
}

.scroll-indicator__label {
    font-family: var(--font-body);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #fff;
}

.scroll-indicator__bar {
    width: 1px;
    height: 3rem;
    background: rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.scroll-indicator__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: var(--primary);
    animation: scroll-down 2s ease-in-out infinite;
}

@keyframes scroll-down {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(400%);
        opacity: 0;
    }
}

/* ----------------------------------------------------------------
   9. MARQUEE / CLIENT LOGOS
   ---------------------------------------------------------------- */
.marquee-section {
    padding: 5rem 0;
    overflow: hidden;
    background: var(--surface-lowest);
    position: relative;
    z-index: 30;
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 1);
}

.marquee-label {
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--on-surface-variant);
    margin-bottom: 2.5rem;
}

/* Container — hover here pauses ALL tracks */
.marquee-wrapper {
    position: relative;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
}

/* Edge fade masks */
.marquee-fade {
    position: absolute;
    top: 0;
    width: 10rem;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.marquee-fade--left {
    left: 0;
    background: linear-gradient(to right, var(--surface-lowest), transparent);
}

.marquee-fade--right {
    right: 0;
    background: linear-gradient(to left, var(--surface-lowest), transparent);
}

/* Scrolling track */
.marquee-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 1rem 2rem;
    animation: marquee 40s linear infinite;
    will-change: transform;
    flex-shrink: 0;
}

/* Pause ALL tracks on container hover */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

/* Individual client name */
.marquee-item {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-headline);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.42);
    cursor: default;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    user-select: none;
}

.marquee-item:hover {
    color: var(--primary);
    text-shadow: 0 0 20px rgba(255, 95, 31, 0.55);
}

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

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

/* ----------------------------------------------------------------
   10. PLATFORM BENTO GRID SECTION
   ---------------------------------------------------------------- */
.platform-section {
    padding: 8rem var(--section-px);
    background: var(--surface);
    position: relative;
    z-index: 30;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.section-header {
    margin-bottom: 5rem;
}

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

.section-title {
    font-family: var(--font-headline);
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 800;
    color: var(--on-surface);
    line-height: 1.15;
}

.section-title em {
    font-style: italic;
    color: var(--primary);
}

.section-desc {
    color: var(--secondary);
    font-size: 1.0625rem;
    line-height: 1.8;
    max-width: 100%;
    margin-top: 1rem;
}

.platform-section::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 60%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 144, 105, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.platform-section .section-title em {
    font-style: normal;
    color: var(--primary);
    background: linear-gradient(135deg, var(--primary) 0%, #ff7948 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.platform-section .section-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255, 144, 105, 0.1);
    border: 1px solid rgba(255, 144, 105, 0.2);
    border-radius: 999px;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

/* Bento Grid */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    perspective: 1500px;
    /* Enable 3D depth */
}

.bento-card {
    background: rgba(25, 25, 28, 0.6);
    /* surface-container with transparency */
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: 1.5rem;
    padding: 2.25rem 2.5rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* The Ghost Border */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform;
    z-index: 5;
}

/* Stunning Top-Light Edge */
.bento-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    z-index: 10;
}

.bento-card:hover {
    transform: translateY(-12px) scale(1.02);
    background: rgba(38, 37, 40, 0.8);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 144, 105, 0.1);
}

.bento-card__glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
            transparent 0%,
            transparent 40%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 60%,
            transparent 100%);
    background-size: 200% 100%;
    background-position: 150% 0%;
    transition: background-position 0.8s ease;
    pointer-events: none;
    z-index: 8;
}

.bento-card:hover .bento-card__glare {
    background-position: -50% 0%;
}

.bento-card--wide {
    grid-column: span 8;
}

.bento-card--narrow {
    grid-column: span 4;
}

.bento-card--mid {
    grid-column: span 5;
}

.bento-card--wmid {
    grid-column: span 7;
}

@media (max-width: 900px) {

    .bento-card--wide,
    .bento-card--narrow,
    .bento-card--mid,
    .bento-card--wmid {
        grid-column: span 12;
    }
}

.bento-card__glow {
    position: absolute;
    bottom: -5rem;
    right: -2.5rem;
    width: 24rem;
    height: 24rem;
    background: radial-gradient(ellipse at center, rgba(255, 144, 105, 0.2) 0%, transparent 70%);
    opacity: 0.5;
    transition: opacity 0.4s;
    pointer-events: none;
}

.bento-card:hover .bento-card__glow {
    opacity: 1;
}

.bento-card .card-icon {
    position: absolute;
    top: -3.5rem;
    left: -3.5rem;
    font-size: 11rem;
    color: var(--primary);
    opacity: 0.25;
    z-index: 1;
    pointer-events: none;
    display: block;
    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.6s ease,
        color 0.6s ease;
    transform-origin: center;
    filter: blur(1px);
}

.bento-card:hover .card-icon {
    transform: rotate(8deg) scale(1.05) translate(10px, 10px);
    opacity: 0.4;
    color: #fff;
    filter: blur(0);
}

/* Specialized Scanning Animation for H.A.R.T */
.bento-card--narrow .card-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--primary);
    box-shadow: 0 0 15px var(--primary);
    opacity: 0;
    animation: scanLine 4s linear infinite;
}

.bento-card--narrow:hover .card-icon::after {
    opacity: 0.6;
}

@keyframes scanLine {
    0% {
        top: 20%;
    }

    50% {
        top: 80%;
    }

    100% {
        top: 20%;
    }
}

.bento-card .card-title {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--on-surface);
    margin-bottom: 0.75rem;
    position: relative;
    padding-top: 0.5rem;
    /* Space refined for absolute icon layer */
}

.bento-card .card-title--sm {
    font-size: 1.375rem;
}

.bento-card .card-body {
    color: var(--secondary);
    line-height: 1.75;
    max-width: 32rem;
}

.bento-card .card-body--sm {
    color: var(--on-surface-variant);
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Realistic Media Elements */
.bento-card__media {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 1;
    opacity: 0.2;
    filter: saturate(0) contrast(1.2) brightness(0.6);
    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1),
        filter 1.2s ease;

    mask-image: radial-gradient(circle at 70% 70%, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 70% 70%, black 0%, transparent 80%);
}

.bento-card:hover .bento-card__media {
    opacity: 0.45;
    transform: scale(1.1) translate(-10px, -10px);
    filter: saturate(1.1) contrast(1.1) brightness(0.8);
}

.bento-card:hover .bento-card__media {
    opacity: 0.75;
    transform: translateZ(30px) scale(1.05);
}

.bento-card__glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.4s ease;
}

.bento-card:hover .bento-card__glare {
    opacity: 1;
}

/* Float Animation */
@keyframes bentoFloat {

    0%,
    100% {
        transform: translateZ(10px) translateY(0);
    }

    50% {
        transform: translateZ(10px) translateY(-8px);
    }
}

/* Content Protection & Enhanced Contrast for Realism */
.bento-card .card-title,
.bento-card .card-body,
.bento-card .card-icon {
    position: relative;
    z-index: 10;
}

/* ----------------------------------------------------------------
   11. STATS SECTION
   ---------------------------------------------------------------- */
.stats-section {
    padding: 12rem var(--section-px);
    background: var(--surface-cont-low);
    position: relative;
    z-index: 30;
    border-top: 1px solid #1f1f1f;
}

.stats-inner {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

@media (min-width: 1024px) {
    .stats-inner {
        flex-direction: row;
        align-items: center;
        gap: 6rem;
    }
}

.stats-text {
    flex: 1;
}

.stats-text h2 {
    font-family: var(--font-headline);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    /* Slightly larger for more impact */
    font-weight: 900;
    color: var(--on-surface);
    margin-bottom: 2rem;
    line-height: 1.1;
}

.stats-text p {
    color: var(--on-surface-variant);
    line-height: 1.8;
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}

.stats-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stat-card {
    background: var(--surface-container);
    padding: 1.75rem 2.5rem;
    /* Aligned with bento grid for consistency */
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.stat-card:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 30px -10px rgba(255, 121, 72, 0.15);
    transform: translateY(-5px);
}

.stat-card--highlight {
    background: var(--surface-cont-high);
    border-color: rgba(255, 144, 105, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 144, 105, 0.2);
}

.stat-number {
    font-family: var(--font-headline);
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.5rem;
}

.stat-card--highlight .stat-number {
    color: var(--primary);
}

.stat-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: var(--primary);
}

.stat-card--highlight .stat-label {
    color: #fff;
}

/* ----------------------------------------------------------------
   12. TESTIMONIALS
   ---------------------------------------------------------------- */
.testimonials-section {
    padding: 12rem var(--section-px);
    background: var(--surface);
    position: relative;
    z-index: 30;
    border-top: 1px solid #1f1f1f;
}

.section-header-center {
    text-align: center;
    margin-bottom: 5rem;
}

.section-header-center .section-title {
    margin: 0 auto;
}

.section-header-center .section-desc {
    margin: 1rem auto 0;
    text-align: center;
}

.testimonials-viewport {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-bottom: 3rem;
    padding: 10px 0px;
}

.testimonials-track {
    display: flex;
    gap: 1.5rem;
    /* Standard gutter for multi-tile view */
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

.testimonial-card {
    flex: 0 0 100%;
    /* Default mobile view */
    background: var(--surface-cont-low);
    padding: 2.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.5s ease;
    user-select: none;
    opacity: 0.4;
    /* Dim by default, JS will highlight the 'visible' range */
    transform: scale(0.95);
}

@media (min-width: 768px) {
    .testimonial-card {
        flex: 0 0 calc((100% / 2) - 0.75rem);
        /* 2 per row on tablet */
    }
}

@media (min-width: 1024px) {
    .testimonial-card {
        flex: 0 0 calc((100% / 3) - 1rem);
        /* 3 per row on desktop */
        padding: 3rem;
    }
}

.testimonials-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.carousel-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--on-surface-variant);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    background: rgba(255, 121, 72, 0.1);
    border-color: var(--primary);
    color: var(--primary);
    transform: scale(1.1);
}

.carousel-btn.play-pause {
    width: 4.5rem;
    height: 4.5rem;
    background: rgba(255, 121, 72, 0.05);
    border-color: rgba(255, 121, 72, 0.2);
    color: var(--primary);
}

.carousel-btn .material-symbols-outlined {
    font-size: 1.5rem;
}

.carousel-btn.play-pause .material-symbols-outlined {
    font-size: 2rem;
}

.testimonial-card:hover {
    border-color: rgba(255, 144, 105, 0.4);
}

.testimonial-quote-icon {
    font-size: 2.5rem;
    color: var(--primary);
    opacity: 0.5;
    display: block;
    margin-bottom: 1.5rem;
}

.testimonial-text {
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.75;
    margin-bottom: 2rem;
}

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

.testimonial-name {
    font-weight: 700;
    color: #fff;
    font-size: 0.875rem;
}

.testimonial-org {
    font-size: 0.75rem;
    color: var(--on-surface-variant);
}

.section-cta-wrap {
    text-align: center;
    margin-top: 5rem;
}

/* ----------------------------------------------------------------
   13. FAQ ACCORDION
   ---------------------------------------------------------------- */
.faq-section {
    padding: 8rem var(--section-px);
    background: var(--surface-match);
    border-top: 1px solid #1f1f1f;
    position: relative;
    z-index: 30;
}

.faq-inner {
    max-width: 56rem;
    margin-inline: auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 4rem;
}

.faq-header h2 {
    font-family: var(--font-headline);
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--on-surface);
    margin-bottom: 1rem;
}

.faq-header p {
    color: var(--on-surface-variant);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border-bottom: 1px solid rgba(72, 72, 72, 0.3);
    padding-bottom: 1rem;
}

.faq-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font-body);
    cursor: pointer;
    transition: color 0.2s;
}

.faq-btn:focus {
    outline: none;
}

.faq-question {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--secondary);
    transition: color 0.2s;
}

.faq-btn:hover .faq-question,
.faq-btn.active .faq-question {
    color: #fff;
}

.faq-icon {
    color: var(--primary);
    font-size: 1.25rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-btn.active .faq-icon {
    transform: rotate(45deg);
}

.faq-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease;
}

.faq-answer {
    padding: 1rem 0;
    color: var(--on-surface-variant);
    line-height: 1.75;
    font-size: 0.9375rem;
}

/* ----------------------------------------------------------------
   14. FOOTER
   ---------------------------------------------------------------- */
.footer {
    background: #fff;
    padding: 8rem var(--section-px) 4rem;
    position: relative;
    z-index: 30;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3rem;
    align-items: start;
}

.footer-brand {
    grid-column: span 4;
}

.footer-col-a {
    grid-column: span 3;
}

.footer-col-b {
    grid-column: span 3;
}

.footer-col-c {
    grid-column: span 2;
}

@media (max-width: 900px) {

    .footer-brand,
    .footer-col-a,
    .footer-col-b,
    .footer-col-c {
        grid-column: span 12;
    }
}

.footer-logo__img {
    height: 65px;
    width: auto;
    margin-bottom: 1.5rem;
    display: block;
}

.footer-tagline {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.footer-desc {
    font-size: 0.9375rem;
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.7;
    max-width: 22rem;
    margin-bottom: 2rem;
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-contacts span {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--secondary);
}

.footer-contacts .material-symbols-outlined {
    font-size: 1rem;
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.footer-col h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: #111;
    margin-bottom: 1.5rem;
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.footer-col ul li a {
    font-size: 0.9375rem;
    color: rgba(0, 0, 0, 0.5);
    transition: color 0.2s;
}

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

.footer-col ul li a.highlight {
    color: var(--primary);
    font-weight: 600;
}

.footer-socials {
    display: flex;
    gap: 1.25rem;
}

.footer-socials a {
    color: rgba(0, 0, 0, 0.4);
    transition: transform 0.3s, color 0.3s;
}

.footer-socials a:hover {
    color: var(--primary);
    transform: translateY(-2px);
}

.footer-big-branding {
    position: absolute;
    bottom: -0.1em;
    /* Slightly tucked into the floor */
    left: 0;
    width: 100%;
    font-size: 13vw;
    font-weight: 900;
    text-align: center;
    color: #000;
    opacity: 0;
    line-height: 1;
    letter-spacing: -0.05em;
    pointer-events: none;
    user-select: none;
    will-change: opacity, transform;
    /* Fade out from bottom side */
    mask-image: linear-gradient(to top, transparent, black 70%);
    -webkit-mask-image: linear-gradient(to top, transparent, black 70%);
}

.footer-bottom {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(0, 0, 0, 0.4);
    font-size: 0.8125rem;
}

.footer-legal {
    display: flex;
    gap: 2rem;
}

.footer-legal a {
    color: inherit;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: var(--primary);
}

.footer-socials svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

.footer-bottom {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-top: 2rem;
    margin-top: 4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.75rem;
    color: rgba(171, 171, 171, 0.5);
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer-legal {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* .footer-legal a:hover {
    color: #fff;
} */

/* ----------------------------------------------------------------
   16. PRODUCT SHOWCASE — SCROLL-DRIVEN DASHBOARD
   ---------------------------------------------------------------- */

.products-section {
    background: var(--surface-lowest);
    position: relative;
    z-index: 30;
}

/* Tall scroll track — JS measures this to drive progress */
/* Tall scroll track — JS measures this to drive progress */
.products-scroll-track {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    position: relative;
    height: 400vh;
    /* 4 panels × 100vh */
}

/* ── LEFT SIDEBAR (sticky) ───────────────────────── */
.products-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 4rem 2rem 4rem 4rem;
    background: var(--surface-lowest);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

.products-sidebar__inner {
    max-width: 28rem;
    width: 100%;
}

.products-sidebar__title {
    font-family: var(--font-headline);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin: 0.75rem 0 1rem;
}

.products-sidebar__desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

/* Tab List */
.products-tab-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.products-tab {
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.products-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.products-tab__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.products-tab__icon-wrap {
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.products-tab__icon {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.4s ease;
}

.products-tab__number {
    font-family: var(--font-headline);
    font-weight: 800;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.15);
    transition: color 0.4s;
    letter-spacing: 0.05em;
}

.products-tab__name {
    font-family: var(--font-headline);
    font-size: 1.0625rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.4s ease;
    letter-spacing: -0.01em;
    display: block;
}

.products-tab__desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Progress bar */
.products-tab__bar {
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    margin-top: 1rem;
    border-radius: 999px;
    overflow: hidden;
    display: none;
}

.products-tab__progress {
    height: 100%;
    width: 0%;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    border-radius: 999px;
    transition: width 0.1s linear;
}

.products-tab__mobile-preview {
    display: none;
}

/* ACTIVE tab */
.products-tab.active {
    background: rgba(255, 144, 105, 0.05);
    border-color: rgba(255, 144, 105, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.products-tab.active .products-tab__icon-wrap {
    background: var(--primary);
}

.products-tab.active .products-tab__icon {
    color: #000;
    font-variation-settings: 'FILL' 1;
}

.products-tab.active .products-tab__number {
    color: var(--primary);
    opacity: 0.5;
}

.products-tab.active .products-tab__name {
    color: #fff;
    font-weight: 700;
}

.products-tab.active .products-tab__desc {
    max-height: 8rem;
    opacity: 1;
    margin-top: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
}

.products-tab.active .products-tab__bar {
    display: block;
}

/* ── RIGHT PREVIEW (sticky) ──────────────────────── */
.products-preview {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: #080808;
}

.products-preview__card {
    width: 100%;
    max-width: 860px;
    height: 600px;
    /* Fixed height for dashboard consistency */
    background: #0e0e10;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
}

/* Dashboard Panels */
.dash-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #0e0e10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateY(20px) scale(0.98);
    z-index: 10;
}

.dash-panel.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    z-index: 50;
    /* Ensure active is always on top */
}

/* Browser chrome topbar */
.dash-topbar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #1a1d22;
    padding: 0.5rem 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.dash-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-url {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.3);
    margin-left: 0.75rem;
    letter-spacing: 0.02em;
    font-family: var(--font-body);
}

/* Main body area */
.dash-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Icon sidebar */
.dash-nav {
    width: 44px;
    background: #14161a;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0;
    gap: 0.25rem;
    flex-shrink: 0;
}

.dash-nav__logo {
    width: 28px;
    height: 28px;
    background: var(--primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 900;
    color: #000;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.dash-nav__item {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.dash-nav__item .material-symbols-outlined {
    font-size: 1rem;
}

.dash-nav__item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
}

.dash-nav__item.active {
    background: rgba(255, 144, 105, 0.15);
    color: var(--primary);
}

/* Dashboard content */
.dash-main {
    flex: 1;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
}

/* Stats row */
.dash-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.dash-stat-card {
    background: #1a1d22;
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;

    /* Animation initial state */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-panel.active .dash-stat-card {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger stats cards */
.dash-panel.active .dash-stat-card:nth-child(1) {
    transition-delay: 0.05s;
}

.dash-panel.active .dash-stat-card:nth-child(2) {
    transition-delay: 0.15s;
}

.dash-panel.active .dash-stat-card:nth-child(3) {
    transition-delay: 0.25s;
}

.dash-panel.active .dash-stat-card:nth-child(4) {
    transition-delay: 0.35s;
}

.dash-stat-label {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    font-family: var(--font-body);
}

.dash-stat-val {
    font-family: var(--font-headline);
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.dash-stat-delta {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.3);
}

.dash-stat-delta.up {
    color: #4ade80;
}

.dash-stat-delta.down {
    color: #f87171;
}

/* Chart row */
.dash-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}

.dash-chart-block,
.dash-table-block {
    background: #1a1d22;
    border-radius: 8px;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Animation initial state */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.dash-panel.active .dash-chart-block {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
}

.dash-panel.active .dash-table-block {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}

.dash-chart-title {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 0.5rem;
    font-family: var(--font-body);
    flex-shrink: 0;
}

/* SVG Line Chart */
.dash-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.dash-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Bar Chart */
.dash-bar-chart {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding-top: 0.25rem;
}

.dash-bar {
    flex: 1;
    background: rgba(255, 144, 105, 0.25);
    border-radius: 3px 3px 0 0;
    position: relative;
    min-height: 4px;
    transition: background 0.2s;
}

.dash-bar:hover {
    background: rgba(255, 144, 105, 0.6);
}

.dash-bar span {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.42rem;
    color: rgba(255, 255, 255, 0.25);
    font-family: var(--font-body);
}

/* Threat Map */
.dash-threat-map {
    flex: 1;
    background: rgba(255, 95, 31, 0.03);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 144, 105, 0.08);
}

.threat-pulse {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    transform: translate(-50%, -50%);
    animation: threat-ping 2s ease-out infinite;
}

.threat-pulse--warn {
    background: #f87171;
}

@keyframes threat-ping {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 144, 105, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 144, 105, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 144, 105, 0);
    }
}

/* Table */
.dash-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-body);
    flex: 1;
}

.dash-table thead th {
    font-size: 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.25);
    padding: 0 0.25rem 0.35rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 500;
}

.dash-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.dash-table tbody td {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.3rem 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
}

/* Badges */
.dash-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.42rem;
    font-weight: 600;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dash-badge.ok {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.dash-badge.warn {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
}

.dash-badge.err {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1024px) {
    .products-scroll-track {
        grid-template-columns: 1fr;
        height: 250vh;
        /* Make track scrollable on mobile too for driving the tabs */
    }

    .products-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        padding: 2rem 1.5rem;
        overflow: hidden;
    }

    .products-sidebar__desc {
        display: none !important;
        /* Save vertical space to avoid screen clipping */
    }

    .products-sidebar__title {
        font-size: 1.75rem;
        margin: 0.5rem 0 1.25rem;
    }

    .products-preview {
        display: none !important;
    }

    .products-tab__bar {
        display: none !important;
    }

    .products-tab {
        padding: 0.75rem 1rem;
    }

    .products-tab.active {
        padding: 1rem 1rem;
    }

    .products-tab__mobile-preview {
        display: block;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
        margin-top: 0;
    }

    .products-tab.active .products-tab__mobile-preview {
        max-height: 380px;
        opacity: 1;
        margin-top: 0.75rem;
    }

    .products-tab__mobile-img-wrap {
        width: 100%;
        max-height: 180px;
        border-radius: 0.5rem;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.05);
        background: #0e0e10;
        margin-bottom: 0.75rem;
    }

    .products-tab__mobile-img-wrap img {
        width: 100%;
        y height: 100%;
        object-fit: contain;
        display: block;
    }

    .products-tab__mobile-actions {
        display: flex;
        justify-content: flex-start;
    }

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

    .dash-row {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------
   17. HORIZON CTA — SCROLL-DRIVEN
   ---------------------------------------------------------------- */
.horizon-cta {
    position: relative;
    height: 120vh;
    /* Faster scroll length */
    background: #080808;
    z-index: 40;
}

.horizon-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    background: #fdfaf7;
    /* Off-white CTA background */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.horizon-content {
    position: relative;
    z-index: 1;
    text-align: center;
    transform: translateY(40px) scale(0.95);
    opacity: 0;
    will-change: transform, opacity;
}

.horizon-pill {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 144, 105, 0.15);
    color: #e65100;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2rem;
    font-family: var(--font-body);
}

.horizon-h2 {
    font-family: var(--font-headline);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    color: #111;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
}

.horizon-p {
    font-size: 1.125rem;
    color: #555;
    max-width: 500px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
}

.horizon-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.btn-dark {
    background: #000;
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    cursor: pointer;
}

.btn-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* ── The pulling dark curtain ── */
.horizon-curtain {
    position: absolute;
    top: 0;
    left: -10vw;
    width: 120vw;
    height: 115vh;
    z-index: 2;
    border-radius: 0;
    transform-origin: top center;
    overflow: hidden;
    will-change: transform, border-radius;
}

.horizon-glow {
    position: absolute;
    top: 0;
    /* Align to top of curtain */
    left: 0;
    width: 100%;
    height: 60vh;
    border-radius: 0;
    background-image: url('downcolor.webp');
    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
    transform-origin: top center;
    pointer-events: none;
}

/* ----------------------------------------------------------------
   18. JS-DRIVEN STATE CLASSES
   ---------------------------------------------------------------- */

/* Navbar scroll state (set by JS) */
.navbar.scrolled .nav-bg {
    /* background: rgba(14, 14, 14, 0.97); */
    background: rgb(14 14 14 / 56%);
}

/* ── 16. CLIENT LOGOS SECTION ── */
.trust-section {
    position: relative;
    width: 100%;
    background: #000;
    /* Merged with dark theme */
    z-index: 15;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.client-logos-wrapper {
    width: 100%;
    margin-left: 0;
    text-align: center;
    z-index: 5;
}

.client-logos-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 40px;
}

.client-logos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2rem;
}

.client-logo {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
    opacity: 0.6;
    letter-spacing: -0.02em;
}

.marquee-wrapper--centered {
    max-width: 1200px;
    margin: 0 auto;
    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);
}

.marquee-wrapper--centered .marquee-item {
    color: rgba(255, 255, 255, 0.5);
    opacity: 0.7;
    font-size: 1.125rem;
    font-weight: 800;
}

.horizon-up-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60vh;
    background-image: url('upcolor.webp');
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    transform-origin: bottom center;
    pointer-events: none;
}

.stats-section {
    padding: 90px 0px;
}

/* ============================================================
   PAGE-SPECIFIC STYLES CONSOLIDATION
   ============================================================ */

/* ------------------------------------------------------------
   Page: aaa-radius.php
   ------------------------------------------------------------ */
/* Product Page Styles conforming to Accretion Obsidian design system (SmartGuard Template) */




.sg-hero h1 {
    font-family: var(--font-headline);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 1.5rem;
}

.sg-hero p {
    font-size: 1.25rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.sg-btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: #000 !important;
    padding: 0.875rem 2.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-family: var(--font-body);
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(255, 144, 105, 0.3);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 144, 105, 0.5);
}

.sg-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff !important;
    padding: 0.875rem 2.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sg-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sg-section {
    padding: 8rem 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
    border-radius: 20px;
}

.sg-section-title {
    font-family: var(--font-headline);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #fff;
    margin-bottom: 2rem;
    text-align: center;
}

.sg-text-block {
    max-width: 950px;
    margin: 0 auto 5rem;
    text-align: center;
    color: var(--secondary);
    font-size: 1.125rem;
    line-height: 1.8;
}

/* Shared Media Queries for Product Templates */
@media (max-width: 1024px) {

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

    .sg-deployment-list,
    .why-sg-grid,
    .why-boss-grid,
    .caps-grid,
    .pillars-grid,
    .regions-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sg-split,
    .split-grid,
    .highlight-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .sg-grid,
    .sg-deployment-list,
    .why-sg-grid,
    .why-boss-grid,
    .caps-grid,
    .stats-grid,
    .boss-split,
    .boss-deployment-list,
    .capabilities-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }

    .sg-hero,
    .boss-hero,
    .page-hero {
        padding-top: 10rem;
    }

    .workflow-item {
        flex-direction: column;
        gap: 1rem;
        padding: 2rem;
    }

    .workflow-number {
        font-size: 2rem;
    }

    .sg-section-title {
        font-size: 2.25rem;
    }

    .sg-hero h1 {
        font-size: 2.5rem;
    }
}

/* ------------------------------------------------------------
   Accretion Obsidian Grid & Components
   ------------------------------------------------------------ */
.sg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

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

.sg-card {
    background: var(--surface-container);
    padding: 3rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.sg-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 144, 105, 0.2);
}

.sg-card h3 {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.sg-card p {
    color: var(--secondary);
    line-height: 1.7;
    font-size: 0.9375rem;
    position: relative;
    z-index: 2;
}

.icon-box {
    width: 48px;
    height: 48px;
    background: rgba(255, 144, 105, 0.1);
    color: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.ghost-icon {
    position: absolute;
    bottom: -20px;
    right: -20px;
    font-size: 8rem !important;
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

.section-tag {
    display: table;
    margin: 0 auto 1.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 144, 105, 0.1);
    border: 1px solid rgba(255, 144, 105, 0.2);
    border-radius: 99px;
    color: var(--primary);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Workflow Section */
.workflow-container {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

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

    .workflow-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 3rem;
    }

    .workflow-item:last-child {
        grid-column: span 2;
        flex-direction: row;
        align-items: center;
    }
}

.workflow-item {
    display: flex;
    gap: 2rem;
    padding: 2.5rem;
    background: var(--surface-container);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.workflow-item:hover {
    transform: translateX(10px);
    border-color: rgba(255, 144, 105, 0.3);
}

.workflow-number {
    font-family: var(--font-headline);
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(255, 144, 105, 0.15);
    line-height: 1;
    min-width: 60px;
}

.workflow-content h4 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.workflow-content p {
    color: var(--secondary);
    line-height: 1.6;
    font-size: 0.9375rem;
}

.problem-card h3 {
    color: #ff716c !important;
}

/* Creative Capability Cards */
.capability-card-creative {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-image-frame {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid rgba(255, 144, 105, 0.1);
}

.card-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.capability-card-creative:hover .card-image-frame img {
    transform: scale(1.1);
}

.capability-card-creative .card-content {
    padding: 2.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.capability-card-creative .icon-box {
    margin-bottom: 1.5rem;
}

.dashboard-preview-container {
    /* max-width: 1100px; */
    max-width: 100%;
    margin: 0 auto 6rem;
    text-align: center;
    position: relative;
    perspective: 1200px;
    z-index: 5;
}

.perspective-inner {
    transform-style: preserve-3d;
    transform: rotateX(20deg) scale(0.9);
    transition: transform 0.1s linear;
    will-change: transform;
    position: relative;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px;
}

.dashboard-preview {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
}

.glow-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* width: 130%;
    height: 130%; */
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 144, 105, 0.12) 0%, transparent 70%);
    z-index: -1;
    filter: blur(80px);
    opacity: 0.7;
}

/* Problem vs Solution Split */
.sg-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 5rem;
}

.sg-split-card {
    background: var(--surface-container);
    padding: 4rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

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

.sg-split-card.problem {
    background: linear-gradient(135deg, rgba(200, 50, 50, 0.05), transparent);
    border-top: 3px solid #ff4c4c;
}

.sg-split-card.solution {
    background: linear-gradient(135deg, rgba(255, 144, 105, 0.1), transparent);
    border-top: 3px solid var(--primary);
}

.sg-split-card h3 {
    font-family: var(--font-headline);
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

.sg-split-card p {
    color: var(--on-surface-variant);
    line-height: 1.7;
    font-size: 1.1rem;
}


.cap-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 1.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.cap-card.reveal {
    opacity: 1;
    transform: translateY(0);
}

.cap-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
    box-shadow: 0 10px 40px -10px rgba(255, 144, 105, 0.3);
    transform: translateY(-8px);
}

.ghost-icon {
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    font-size: 8rem !important;
    opacity: 0.03;
    color: var(--primary);
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 0;
}

.icon-box {
    width: 56px;
    height: 56px;
    background: rgba(255, 144, 105, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.icon-box .material-symbols-outlined {
    color: var(--primary);
    font-size: 28px;
}

.cap-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 1rem;
    font-family: var(--font-headline);
    position: relative;
    z-index: 2;
}

.cap-card p {
    font-size: 0.9375rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Deployment List */
.sg-deployment-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin-top: 4rem;
}

.sg-deployment-list li {
    background: rgba(255, 255, 255, 0.02);
    padding: 2.5rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    transition: background 0.3s;
}

.sg-deployment-list li:hover {
    background: rgba(255, 255, 255, 0.04);
}

.sg-deployment-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sg-deployment-list li strong {
    color: #fff;
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-headline);
    font-size: 1.25rem;
}

.sg-deployment-list li span {
    font-size: 0.9375rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

/* Why SmartGuard Interactive Grid */
.why-sg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.why-sg-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.why-sg-card.reveal {
    opacity: 1;
    transform: translateY(0);
}

.why-sg-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 40px -10px rgba(255, 144, 105, 0.3);
}

.why-sg-card .icon-wrap {
    width: 48px;
    height: 48px;
    background: rgba(255, 144, 105, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.why-sg-card:hover .icon-wrap {
    transform: rotate(-5deg) scale(1.1);
    background: var(--primary);
}

.why-sg-card:hover .icon-wrap .material-symbols-outlined {
    color: #000;
}

.why-sg-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 1rem;
    font-family: var(--font-headline);
}

.why-sg-card p {
    font-size: 0.9375rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

.why-sg-card .material-symbols-outlined {
    color: var(--primary);
    font-size: 24px;
}

@media (max-width: 1024px) {
    .sg-split {
        grid-template-columns: 1fr;
    }

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

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

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

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

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


    .sg-section-title {
        font-size: 2.25rem;
    }

    .why-sg-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------
   Page: about.php
   ------------------------------------------------------------ */
:root {
    --primary: #ff9069;
    --primary-dark: #e57d5a;
    --bg-dark: #0a0a0b;
    --card-bg: rgba(255, 255, 255, 0.03);
    --border: rgba(255, 255, 255, 0.08);
    --text-main: #e0e0e0;
    --text-dim: #a0a0a0;
}

/* About Hero */
.about-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    overflow: hidden;
    padding: 120px 0;
}

.about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255, 144, 105, 0.1), transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(105, 160, 255, 0.05), transparent 50%);
    z-index: 1;
}

/* Tech Grid Background Animations */
.tech-grid-bg {
    position: absolute;
    inset: -50px;
    /* Oversized to allow smooth scrolling */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: moveGrid 15s linear infinite;
    z-index: 1;
    opacity: 0.4;
    mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
}

@keyframes moveGrid {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(50px);
    }
}

.data-node {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary), 0 0 20px rgba(255, 144, 105, 0.5);
    z-index: 2;
    animation: pulseNode 3s infinite alternate;
}

.data-stream {
    position: absolute;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--primary), transparent);
    z-index: 2;
    animation: dataStream 4s linear infinite;
    opacity: 0;
}

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

    100% {
        transform: scale(1.5);
        opacity: 0.8;
    }
}

@keyframes dataStream {
    0% {
        transform: translateY(-100vh);
        opacity: 0;
    }

    10% {
        opacity: 0.5;
    }

    90% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.about-hero-inner {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    text-align: center;
    padding: 0 1.5rem;
}

.about-badge {
    display: inline-flex;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 144, 105, 0.1);
    border: 1px solid rgba(255, 144, 105, 0.2);
    border-radius: 100px;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    animation: fadeInDown 0.8s ease forwards;
}

.about-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -2px;
    margin-bottom: 2rem;
    background: linear-gradient(to bottom, #fff 30%, #a0a0a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-sub {
    font-size: 1.25rem;
    color: var(--text-dim);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Stats Row */
.stats-section {
    padding: 80px 0;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.stat-item h2 {
    font-size: 3.5rem;
    font-family: 'Manrope', sans-serif;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.stat-item p {
    color: var(--text-dim);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    font-weight: 600;
}

/* Story Section */
.story-section {
    padding: 120px 0;
}

.section-header {
    max-width: 100%;
    margin-bottom: 4rem;
}

.section-header span {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-header h2 {
    font-family: 'Manrope', sans-serif;
    font-size: 3rem;
    margin-top: 1rem;
    color: #fff;
}

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

.story-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dim);
    margin-bottom: 1.5rem;
}

.story-img-frame {
    position: relative;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.story-img-frame img {
    width: 100%;
    border-radius: 12px;
    opacity: 0.8;
    filter: grayscale(0.5);
    transition: all 0.5s ease;
}

.story-img-frame:hover img {
    opacity: 1;
    filter: grayscale(0);
    transform: scale(1.02);
}

/* Values Grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.value-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 2.5rem;
    border-radius: 12px;
    transition: all 0.4s ease;
}

.value-card:hover {
    background: rgba(255, 144, 105, 0.05);
    border-color: var(--primary);
    transform: translateY(-5px);
}

.value-card h3 {
    font-family: 'Manrope', sans-serif;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.value-card h3 .material-symbols-outlined {
    color: var(--primary);
}

/* Global Footprint Map */
.map-section {
    padding: 120px 2rem;
    max-width: 1300px;
    margin: 0 auto;
}

.map-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 4rem;
}

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

.region-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 2.5rem 3rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

/* Removed generic hover effects; replaced by colored variants below */

/* Color variants for Map Cards */
/* 1. South Asia - Amber/Orange */
.card-asia {
    background: linear-gradient(135deg, rgba(255, 144, 105, 0.1), rgba(255, 87, 34, 0.02));
    border-color: rgba(255, 144, 105, 0.2);
}

.card-asia:hover,
.card-asia.active {
    border-color: rgba(255, 144, 105, 0.5);
    box-shadow: 0 10px 30px rgba(255, 144, 105, 0.15);
}

.card-asia .region-num,
.card-asia .pulse-label {
    color: #ff9069;
}

.card-asia .pulse-dot {
    background-color: #ff9069;
    box-shadow: 0 0 0 0 rgba(255, 144, 105, 0.7);
}

.card-asia:hover .region-title,
.card-asia.active .region-title {
    text-shadow: 0 0 15px rgba(255, 144, 105, 0.4);
}

/* 2. Middle East - Purple */
.card-me {
    background: linear-gradient(135deg, rgba(179, 136, 255, 0.1), rgba(103, 58, 183, 0.02));
    border-color: rgba(179, 136, 255, 0.2);
}

.card-me:hover,
.card-me.active {
    border-color: rgba(179, 136, 255, 0.5);
    box-shadow: 0 10px 30px rgba(179, 136, 255, 0.15);
}

.card-me .region-num,
.card-me .pulse-label {
    color: #b388ff;
}

.card-me .pulse-dot {
    background-color: #b388ff;
    box-shadow: 0 0 0 0 rgba(179, 136, 255, 0.7);
}

.card-me:hover .region-title,
.card-me.active .region-title {
    text-shadow: 0 0 15px rgba(179, 136, 255, 0.4);
}

/* 3. Americas - Blue */
.card-americas {
    background: linear-gradient(135deg, rgba(129, 212, 250, 0.1), rgba(3, 169, 244, 0.02));
    border-color: rgba(129, 212, 250, 0.2);
}

.card-americas:hover,
.card-americas.active {
    border-color: rgba(129, 212, 250, 0.5);
    box-shadow: 0 10px 30px rgba(129, 212, 250, 0.15);
}

.card-americas .region-num,
.card-americas .pulse-label {
    color: #81d4fa;
}

.card-americas .pulse-dot {
    background-color: #81d4fa;
    box-shadow: 0 0 0 0 rgba(129, 212, 250, 0.7);
}

.card-americas:hover .region-title,
.card-americas.active .region-title {
    text-shadow: 0 0 15px rgba(129, 212, 250, 0.4);
}

/* 4. Africa - Green */
.card-africa {
    background: linear-gradient(135deg, rgba(165, 214, 167, 0.1), rgba(76, 175, 80, 0.02));
    border-color: rgba(165, 214, 167, 0.2);
}

.card-africa:hover,
.card-africa.active {
    border-color: rgba(165, 214, 167, 0.5);
    box-shadow: 0 10px 30px rgba(165, 214, 167, 0.15);
}

.card-africa .region-num,
.card-africa .pulse-label {
    color: #a5d6a7;
}

.card-africa .pulse-dot {
    background-color: #a5d6a7;
    box-shadow: 0 0 0 0 rgba(165, 214, 167, 0.7);
}

.card-africa:hover .region-title,
.card-africa.active .region-title {
    text-shadow: 0 0 15px rgba(165, 214, 167, 0.4);
}

.region-card-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.region-num {
    font-size: 2.5rem;
    font-weight: 900;
    font-family: 'Manrope', sans-serif;
    color: rgba(255, 255, 255, 0.1);
    /* fallback */
    transition: color 0.3s;
}

.region-title {
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Manrope', sans-serif;
    color: #fff;
    transition: text-shadow 0.3s;
}

.region-subtitle {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.5rem;
}

.pulse-indicator {
    position: absolute;
    top: 3.2rem;
    right: 3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.5s ease;
}

.pulse-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.region-card:hover .pulse-indicator,
.region-card.active .pulse-indicator {
    opacity: 1;
    transform: translateX(0);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--primary);
    /* fallback */
    border-radius: 50%;
    animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    70% {
        transform: scale(1.5);
        opacity: 0;
    }

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

.region-content {
    max-height: 0;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.region-card:hover .region-content,
.region-card.active .region-content {
    max-height: 500px;
    opacity: 1;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

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

.city-item {
    padding: 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.city-item h4 {
    color: #fff;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.city-item p {
    color: var(--text-dim);
    font-size: 0.8rem;
}

/* Color specific city items inside the expanded region */
.card-asia .city-item {
    background: rgba(255, 144, 105, 0.05);
    border: 1px solid rgba(255, 144, 105, 0.1);
}

.card-asia .city-item:hover {
    background: rgba(255, 144, 105, 0.1);
    border-color: rgba(255, 144, 105, 0.3);
    transform: translateY(-2px);
}

.card-me .city-item {
    background: rgba(179, 136, 255, 0.05);
    border: 1px solid rgba(179, 136, 255, 0.1);
}

.card-me .city-item:hover {
    background: rgba(179, 136, 255, 0.1);
    border-color: rgba(179, 136, 255, 0.3);
    transform: translateY(-2px);
}

.card-americas .city-item {
    background: rgba(129, 212, 250, 0.05);
    border: 1px solid rgba(129, 212, 250, 0.1);
}

.card-americas .city-item:hover {
    background: rgba(129, 212, 250, 0.1);
    border-color: rgba(129, 212, 250, 0.3);
    transform: translateY(-2px);
}

.card-africa .city-item {
    background: rgba(165, 214, 167, 0.05);
    border: 1px solid rgba(165, 214, 167, 0.1);
}

.card-africa .city-item:hover {
    background: rgba(165, 214, 167, 0.1);
    border-color: rgba(165, 214, 167, 0.3);
    transform: translateY(-2px);
}

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

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

@media (max-width: 991px) {

    .story-grid,
    .stats-grid,
    .values-grid {
        grid-template-columns: 1fr;
    }

    .about-hero {
        padding-top: 150px;
    }

    .section-header h2 {
        font-size: 2.2rem;
    }
}

/* ------------------------------------------------------------
   Page: boss-framework.php
   ------------------------------------------------------------ */
/* Specific BOSS Page Styles conforming to the SmartGuard/Accretion Obsidian design system */
.boss-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    background: url('images/bms-hero-bg.png') center/cover no-repeat;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.boss-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(10, 10, 12, 0.8) 0%,
            rgba(10, 10, 12, 0.95) 100%);
    z-index: 1;
}

.boss-hero-content {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    z-index: 10;
}

.boss-hero h1 {
    font-family: var(--font-headline);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 1.5rem;
}

.boss-hero p {
    font-size: 1.125rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.boss-btn-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.boss-btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: #000;
    padding: 0.875rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    font-family: var(--font-body);
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(255, 144, 105, 0.3);
}

.boss-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 144, 105, 0.5);
}

.boss-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 0.875rem 2rem;
    border-radius: 999px;
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.boss-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.boss-section {
    padding: 6rem 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
    border-radius: 20px;
}

.boss-section-title {
    font-family: var(--font-headline);
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 2rem;
    text-align: center;
}

.boss-text-block {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
    color: var(--secondary);
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 4rem;
}

.dashboard-preview-container {
    /* max-width: 1000px; */
    max-width: 100%;
    margin: 0 auto 5rem;
    text-align: center;
    position: relative;
    perspective: 1200px;
    z-index: 5;
}

.perspective-inner {
    transform-style: preserve-3d;
    transform: rotateX(20deg) scale(0.9);
    transition: transform 0.1s linear;
    will-change: transform;
    position: relative;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 5px;
}

.perspective-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 40%, rgba(255, 255, 255, 0.02) 100%);
    pointer-events: none;
    border-radius: 1.25rem;
    z-index: 2;
}

.glow-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(255, 144, 105, 0.15) 0%, transparent 70%);
    z-index: -1;
    filter: blur(60px);
    opacity: 0.8;
}

/* Problem vs Solution Split */
.boss-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
}

.boss-split-card {
    background: var(--surface-container);
    padding: 3rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.boss-split-card.problem {
    background: linear-gradient(135deg, rgba(200, 50, 50, 0.05), transparent);
    border-top: 2px solid #ff4c4c;
}

.boss-split-card.solution {
    background: linear-gradient(135deg, rgba(255, 144, 105, 0.1), transparent);
    border-top: 2px solid var(--primary);
}

.boss-split-card h3 {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

.boss-split-card p {
    color: var(--on-surface-variant);
    line-height: 1.6;
}

/* Core Capabilities Grid */
.boss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 4rem;
}

.boss-feature-card {
    padding: 2rem;
    border-radius: 1rem;
    background: var(--surface-container-high);
    transition: transform 0.3s ease, background 0.3s;
    position: relative;
}

.boss-feature-card:hover {
    transform: translateY(-5px);
    background: var(--surface-container-highest);
}

.icon-box {
    width: 56px;
    height: 56px;
    background: rgba(255, 144, 105, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.boss-feature-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.75rem;
    font-family: var(--font-headline);
}

.boss-feature-card p {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

/* Deployment List */
.boss-deployment-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin-top: 3rem;
    justify-content: center;
}

.boss-deployment-list li {
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.boss-deployment-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.boss-deployment-list li strong {
    color: #fff;
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-headline);
    font-size: 1.125rem;
}

.boss-deployment-list li span {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    line-height: 1.5;
}

/* Why BOSS Interactive Grid */
.why-boss-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.why-boss-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
}

.why-boss-card.reveal {
    opacity: 1;
    transform: translateY(0);
}

.why-boss-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 10px 40px -10px rgba(255, 144, 105, 0.3);
}

.why-boss-card .icon-wrap {
    width: 48px;
    height: 48px;
    background: rgba(255, 144, 105, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.why-boss-card:hover .icon-wrap {
    transform: rotate(-5deg) scale(1.1);
    background: var(--primary);
}

.why-boss-card:hover .icon-wrap .material-symbols-outlined {
    color: #000;
}

.why-boss-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 1rem;
    font-family: var(--font-headline);
}

.why-boss-card p {
    font-size: 0.9375rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

.why-boss-card .material-symbols-outlined {
    color: var(--primary);
    font-size: 24px;
}

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

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

    .boss-hero {
        padding-top: 8rem;
    }

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

    .why-boss-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------
   Page: briefing.php
   ------------------------------------------------------------ */
:root {
    --primary: #ff9069;
    --primary-dark: #e57d5a;
    --bg-dark: #0a0a0b;
    --text-main: #e0e0e0;
    --text-dim: #9ca3af;
    --ghost-border: rgba(255, 255, 255, 0.08);
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow-x: hidden;
    color-scheme: dark;
}

h1,
h2,
h3,
h4 {
    font-family: 'Manrope', sans-serif;
}

/* -----------------------
           LAYOUT
        ----------------------- */
.briefing-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 180px 2.5rem 120px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .briefing-container {
        gap: 2rem;
    }

    .briefing-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 1024px) {
    .briefing-container {
        grid-template-columns: 1fr;
        padding-top: 140px;
        max-width: 800px;
    }

    .briefing-header {
        position: relative;
        top: 0;
    }
}

/* -----------------------
           HEADER CONTENT
        ----------------------- */
.briefing-header {
    position: sticky;
    top: 140px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ghost-border);
    border-radius: 50px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.briefing-title {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    color: #fff;
}

.briefing-subtitle {
    font-size: 1.15rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 3rem;
}

.social-proof {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ghost-border);
    border-radius: 24px;
}

.proof-item {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.proof-item .material-symbols-outlined {
    color: var(--primary);
    font-size: 2rem;
}

.proof-text h4 {
    color: #fff;
    margin: 0 0 0.25rem;
}

.proof-text p {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin: 0;
}

/* -----------------------
           THE FORM
        ----------------------- */
.form-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--ghost-border);
    border-radius: 32px;
    padding: 3rem;
    position: relative;
}

@media (max-width: 600px) {
    .form-card {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }

    .briefing-container {
        padding: 120px 1.25rem 80px;
    }
}

.form-card::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 144, 105, 0.1) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.form-header {
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.form-header h2 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.form-header p {
    color: var(--text-dim);
    font-size: 0.95rem;
}

.briefing-form {
    display: grid;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dim);
    margin-left: 0.2rem;
}

.field-input,
.field-select,
.field-area {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--ghost-border);
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    transition: var(--transition-smooth);
    appearance: none;
    -webkit-appearance: none;
}

.field-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff9069' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2rem;
    padding-right: 3rem;
}

.field-select option {
    background-color: #111112;
    color: #fff;
    padding: 1rem;
}

.field-input:focus,
.field-select:focus,
.field-area:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 4px rgba(255, 144, 105, 0.15);
}

.field-area {
    min-height: 120px;
    resize: vertical;
}

/* Checkbox Grid */
.interest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.check-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ghost-border);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.85rem;
    color: var(--text-dim);
}

.check-container:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

.check-container input {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
}

.check-container.selected {
    border-color: var(--primary);
    background: rgba(255, 144, 105, 0.05);
    color: #fff;
}

.submit-btn {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 1.25rem;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 144, 105, 0.3);
    background: #ffa181;
}

.legal-notice {
    font-size: 0.8rem;
    color: #555;
    text-align: center;
    margin-top: 1.5rem;
    line-height: 1.4;
}

.legal-notice a {
    color: #888;
    text-decoration: none;
}

.legal-notice a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------
   Page: careers.php
   ------------------------------------------------------------ */
:root {
    --primary: #ff9069;
    --primary-accent: #ff7448;
    --bg-dark: #0e0e10;
    --card-glass: rgba(255, 255, 255, 0.03);
    --border-glass: rgba(255, 255, 255, 0.08);
    --text-dim: #9ca3af;
}

body {
    background-color: var(--bg-dark);
    color: #fff;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    color-scheme: dark;
}

h1,
h2,
h3,
h4 {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.careers-hero {
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 120px 2rem 0;
    background: #000;
    overflow: hidden;
}

.hero-matrix-bg {
    position: absolute;
    inset: 0;
    background: url('careers_hero.png') center/cover no-repeat;
    opacity: 0.35;
    filter: saturate(1.2);
    z-index: 0;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, #0e0e10 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-title {
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2rem;
    letter-spacing: -0.05em;
}

.hero-title span {
    display: block;
    color: var(--primary);
    filter: drop-shadow(0 0 30px rgba(255, 144, 105, 0.4));
}

.hero-sub {
    font-size: 1.25rem;
    color: var(--text-dim);
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.6;
}

/* -----------------------
           WHY XS INFOSOL
        ----------------------- */
.why-section {
    padding: 120px 2rem;
    max-width: 1300px;
    margin: 0 auto;
}

.section-badge {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
    display: block;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

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

.why-card {
    background: var(--card-glass);
    border: 1px solid var(--border-glass);
    padding: 3.5rem;
    border-radius: 32px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.why-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 144, 105, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.why-card .icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 2rem;
    opacity: 0.8;
}

.why-card h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.why-card p {
    color: var(--text-dim);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* -----------------------
           ROLES SECTION
        ----------------------- */
.roles-section {
    padding: 100px 2rem;
    background: #0a0a0c;
}

.roles-container {
    max-width: 1300px;
    margin: 0 auto;
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 4rem;
}

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

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

.role-dept {
    background: var(--card-glass);
    border: 1px solid var(--border-glass);
    padding: 2.5rem;
    border-radius: 24px;
    transition: 0.3s ease;
}

.role-dept:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--primary);
}

.role-dept h4 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.role-dept span {
    font-size: 0.85rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* -----------------------
           APPLY CTA
        ----------------------- */
.apply-cta {
    padding: 160px 2rem;
}

}

background: rgba(0, 0, 0, 0.5);
border-top: 1px solid var(--ghost-border);
border-bottom: 1px solid var(--ghost-border);
padding: 2rem 0;
margin-bottom: 120px;
display: flex;
}

.client-marquee {
    display: flex;
    gap: 4rem;
    animation: scroll-left 30s linear infinite;
    white-space: nowrap;
}

.client-marquee h4 {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    font-weight: 800;
}

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

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

/* ------------------------------------------------------------
   Page: cloud-solutions.php
   ------------------------------------------------------------ */
:root {
    --primary: #ff9069;
    --bg-dark: #000000;
    --text-dim: rgba(255, 255, 255, 0.6);
    --border-glass: rgba(255, 255, 255, 0.08);
}

/* -----------------------
           HERO
        ----------------------- */
.cloud-hero {
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 120px 2rem 0;
    overflow: hidden;
    background: #000;
}

.hero-img {
    position: absolute;
    inset: 0;
    background: url('cloud_hero.png') center/cover no-repeat;
    opacity: 0.35;
    z-index: 0;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, #000 90%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 144, 105, 0.1);
    border: 1px solid rgba(255, 144, 105, 0.3);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-title {
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2rem;
    letter-spacing: -0.04em;
}

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

.hero-sub {
    font-size: 1.25rem;
    color: var(--text-dim);
    max-width: 700px;
    line-height: 1.6;
}

/* -----------------------
           CLOUD STACK GRID
        ----------------------- */
.cloud-stack {
    padding: 100px 2rem;
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (max-width: 968px) {
    .cloud-stack {
        grid-template-columns: 1fr;
    }
}

.stack-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    padding: 3rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.stack-card:hover {
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-5px);
}

.stack-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.stack-card h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fff;
}

.stack-card p {
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 2rem;
}

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

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #ccc;
}

.feature-item .material-symbols-outlined {
    color: var(--primary);
    font-size: 1.2rem;
}

/* -----------------------
           MANAGED SERVICES
        ----------------------- */
.managed-hosting {
    padding: 120px 2rem;
    background: #050505;
}

.section-header {
    max-width: 100%;
    margin-bottom: 5rem;
}

.hosting-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

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

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

.hosting-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.hosting-card:hover {
    background: #000;
    border-color: var(--primary);
}

.hosting-card h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.hosting-card p {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
}

/* -----------------------
           TRANSFORMATION
        ----------------------- */
.transformation {
    padding: 120px 2rem;
    display: flex;
    align-items: center;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 968px) {
    .transformation {
        flex-direction: column;
        text-align: center;
    }
}

.trans-content h2 {
    font-size: 3rem;
    margin-bottom: 2rem;
}

.trans-content p {
    font-size: 1.1rem;
    color: var(--text-dim);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.trans-visual {
    min-width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 144, 105, 0.1) 0%, transparent 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.orbit {
    position: absolute;
    border: 1px dashed rgba(255, 144, 105, 0.2);
    border-radius: 50%;
    animation: rotate 20s linear infinite;
}

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

    to {
        transform: rotate(360deg);
    }
}

/* -----------------------
           SLA BANNER
        ----------------------- */
.sla-banner {
    background: var(--primary);
    color: #000;
    padding: 4rem 2rem;
    text-align: center;
}

.sla-banner h2 {
    font-size: 4rem;
    font-weight: 900;
    margin: 0;
}

.sla-banner p {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ------------------------------------------------------------
   Page: compliance-legal.php
   ------------------------------------------------------------ */
/* Product Page Styles conforming to Accretion Obsidian design system (SmartGuard Template) */


.sg-hero-content {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    z-index: 10;
}

.sg-hero p {
    font-size: 1.125rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


.sg-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}

/* Problem vs Solution Split */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 5rem;
}

.glass-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3.5rem;
    border-radius: 2rem;
    position: relative;
    transition: border-color 0.3s;
}

.glass-card.red {
    border-top: 3px solid #ff4c4c;
}

.glass-card.orange {
    border-top: 3px solid var(--primary);
}

.glass-card h3 {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

.glass-card p {
    color: var(--on-surface-variant);
    line-height: 1.7;
}

/* Core Capabilities Grid */
.caps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

/* FAQ Sections */

.faq-inner {
    width: 100%;
}

.faq-header {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-header h2 {
    font-family: var(--font-headline);
    font-size: 2.5rem;
    color: #fff;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    overflow: hidden;
}

.faq-btn {
    width: 100%;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    text-align: left;
}

.faq-question {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.1rem;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgba(255, 255, 255, 0.01);
}

.faq-answer {
    padding: 0 2rem 1.5rem;
    color: var(--on-surface-variant);
    line-height: 1.7;
    font-size: 1rem;
}

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

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

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


    .sg-section-title {
        font-size: 2.25rem;
    }
}

/* ------------------------------------------------------------
   Page: dlt-registration.php
   ------------------------------------------------------------ */
/* Specific DLT Registration Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/dlt-hero-bg.png');
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.sg-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(105, 144, 255, 0.08) 0%, transparent 70%);
    z-index: 1;
}

.sg-btn-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
}


.sg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(105, 144, 255, 0.5);
}



.sg-text-block {
    max-width: 950px;
    margin: 0 auto 4rem;
    text-align: center;
    color: var(--secondary);
    font-size: 1.125rem;
    line-height: 1.8;
}

/* Core Capabilities Grid */

.sg-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 1.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.sg-card.reveal {
    opacity: 1;
    transform: translateY(0);
}

.sg-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--primary);
    box-shadow: 0 20px 50px -10px rgba(105, 144, 255, 0.2);
    transform: translateY(-10px);
}

.ghost-icon {
    position: absolute;
    right: -1.5rem;
    bottom: -1.5rem;
    font-size: 8rem !important;
    opacity: 0.03;
    color: var(--primary);
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.sg-card:hover .ghost-icon {
    opacity: 0.06;
    transform: rotate(-5deg) scale(1.1);
}

.icon-box {
    width: 56px;
    height: 56px;
    background: rgba(105, 144, 255, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.sg-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 1rem;
    font-family: var(--font-headline);
    position: relative;
    z-index: 2;
}

.sg-card p {
    font-size: 0.9375rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Importance styling for Problem section */
.problem-section {
    background: rgba(255, 82, 82, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* FAQ Styling */
.faq-section {
    background: rgba(255, 255, 255, 0.01);
    border-top: 0px solid rgba(255, 255, 255, 0.05);
}

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

.faq-item {
    margin-bottom: 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.faq-btn {
    width: 100%;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    text-align: left;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: rgba(0, 0, 0, 0.2);
}

.faq-answer {
    padding: 0 2rem 1.5rem;
    color: var(--on-surface-variant);
    line-height: 1.7;
}

.faq-icon {
    transition: transform 0.3s;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-item.active .faq-content {
    max-height: 500px;
}



.ecommerce-hero {
    height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 120px 2rem 0;
    overflow: hidden;
    background: #000;
}

.hero-image-bg {
    position: absolute;
    inset: 0;
    background: url('cloud_hero.png') center/cover no-repeat;
    opacity: 0.25;
    filter: grayscale(0.5) contrast(1.2);
    z-index: 0;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, #0e0e10 90%);
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.5rem;
    background: rgba(255, 144, 105, 0.1);
    border: 1px solid rgba(255, 144, 105, 0.2);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: fit-content;
}

.hero-title {
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 2rem;
    color: #fff;
    letter-spacing: -0.04em;
}

.hero-title span {
    display: block;
    color: var(--primary);
    filter: drop-shadow(0 0 20px rgba(255, 144, 105, 0.3));
}

.hero-sub {
    font-size: 1.25rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
    margin-inline: auto;
    line-height: 1.6;
    margin-top: 1rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    z-index: 10;
}

.scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--primary), transparent);
}

/* -----------------------
           SERVICES PILLARS
        ----------------------- */
.pillars-section {
    padding: 100px 2rem;
    max-width: 1300px;
    margin: 0 auto;
}

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

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

.pillar-card {
    background: var(--card-glass);
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    padding: 3rem;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pillar-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 144, 105, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.pillar-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 144, 105, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.pillar-icon .material-symbols-outlined {
    font-size: 2rem;
    color: var(--primary);
}

.pillar-card h3 {
    font-size: 1.75rem;
    margin-bottom: 1.25rem;
    color: #fff;
}

.pillar-card p {
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.pillar-list {
    margin-top: auto;
}

.pillar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #e0e0e0;
}

.pillar-item .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--primary);
}

/* -----------------------
           CAPABILITIES / LIST
        ----------------------- */
.capabilities-section {
    padding: 120px 2rem;
    background: #050505;
}

.section-header h2 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.section-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 144, 105, 0.1);
    color: var(--primary);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

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

.cap-item {
    display: flex;
    gap: 1.5rem;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.cap-item:hover {
    border-color: rgba(255, 144, 105, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.cap-item h4 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: #fff;
}

.cap-item p {
    font-size: 0.95rem;
    color: var(--text-dim);
    line-height: 1.6;
}

/* -----------------------
           FEATURE HIGHLIGHTS
        ----------------------- */
.feature-highlight {
    padding: 100px 2rem;
    max-width: 1300px;
    margin: 0 auto;
}

.highlight-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 144, 105, 0.05) 0%, transparent 100%);
    border: 1px solid var(--border-glass);
    border-radius: 40px;
    padding: 5rem;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .highlight-card {
        grid-template-columns: 1fr;
        padding: 3rem;
        text-align: center;
    }

    .highlight-content {
        order: 2;
    }

    .highlight-visual {
        order: 1;
    }
}

.highlight-content h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.highlight-content p {
    font-size: 1.1rem;
    color: var(--text-dim);
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.highlight-visual {
    position: relative;
    height: 400px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 30px;
    border: 1px solid var(--border-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.visual-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: var(--primary);
    filter: blur(80px);
    opacity: 0.2;
    animation: pulse 4s infinite alternate;
}

@keyframes pulse {
    from {
        transform: scale(1);
        opacity: 0.1;
    }

    to {
        transform: scale(1.5);
        opacity: 0.3;
    }
}

/* -----------------------
           CTA
        ----------------------- */
.ecommerce-cta {
    padding: 140px 2rem;
    text-align: center;
    background: radial-gradient(circle at center, rgba(255, 144, 105, 0.08) 0%, transparent 70%);
}

.cta-btn-xl {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 3.5rem;
    background: var(--primary);
    color: #000;
    border-radius: 100px;
    font-size: 1.25rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
}

.cta-btn-xl:hover {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 20px 40px rgba(255, 144, 105, 0.4);
    background: #fff;
}

/* ------------------------------------------------------------
   Page: faq.php
   ------------------------------------------------------------ */
/* FAQ Required Local Styles */
:root {
    --primary: #ff9069;
    --primary-dark: #e57d5a;
    --bg-dark: #0a0a0b;
    --surface: #131314;
    --surface-low: #0e0e0f;
    --surface-high: #2a2a2b;
    --text-main: #e0e0e0;
    --text-dim: #9ca3af;
    --ghost-border: rgba(255, 255, 255, 0.08);
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* -----------------------
           HERO SECTION
        ----------------------- */
.faq-hero {
    position: relative;
    padding: 180px 2rem 100px;
    text-align: center;
    overflow: hidden;
}

.faq-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center top, rgba(255, 144, 105, 0.15), transparent 50%);
    z-index: -1;
}

.faq-title {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(to bottom, #fff 30%, #a0a0a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1.5px;
}

.faq-subtitle {
    font-size: 1.25rem;
    color: var(--text-dim);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* -----------------------
           FAQ CONTENT 
        ----------------------- */
.faq-container {
    max-width: 1000px;
    margin: 0 auto 120px;
    padding: 0 1.5rem;
}

.faq-category {
    margin-top: 2rem;
    margin-bottom: 6rem;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.faq-category.visible {
    opacity: 1;
    transform: translateY(0);
}

.faq-category-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--ghost-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.faq-category-title .material-symbols-outlined {
    color: var(--primary);
    transition: all 0.4s ease;
}

.faq-category-title:hover .material-symbols-outlined {
    text-shadow: 0 0 15px rgba(255, 144, 105, 0.8);
    transform: scale(1.1);
}

/* -----------------------
           ACCORDION DESIGN
           Obsidian Luminary Theme
        ----------------------- */
.accordion-item {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--ghost-border);
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: var(--transition-smooth);
    position: relative;
    z-index: 1;
}

/* Mouse Tracking Premium Glow */
.accordion-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 144, 105, 0.08), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    pointer-events: none;
}

.accordion-item:hover::before {
    opacity: 1;
}

.accordion-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 144, 105, 0.4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 144, 105, 0.15);
    transform: translateY(-2px);
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: color 0.3s ease;
}

.accordion-header:hover {
    color: var(--primary);
}

.accordion-icon {
    color: var(--primary);
    transition: transform 0.4s cubic-bezier(0.87, 0, 0.13, 1);
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-item.active {
    border-color: rgba(255, 144, 105, 0.5);
    background: rgba(255, 144, 105, 0.05);
    box-shadow: 0 0 40px rgba(255, 144, 105, 0.05);
}

.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.87, 0, 0.13, 1);
}

.accordion-content {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-dim);
    line-height: 1.7;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.accordion-item.active .accordion-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
    /* Delayed fade in after expand */
}

/* ------------------------------------------------------------
   Page: hart-ekyc.php
   ------------------------------------------------------------ */
/* Specific H.A.R.T Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    background: #0a0a0c;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.sg-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/hart-hero-bg.png');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    filter: hue-rotate(180deg) saturate(1.8);
    /* Force orange */
    z-index: 0;
}

.sg-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(234, 179, 8, 0.08) 0%, transparent 70%);
    z-index: 1;
}


.sg-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(234, 179, 8, 0.5);
}

.sg-text-block {
    max-width: 950px;
    margin: 0 auto 3rem;
    text-align: center;
    color: var(--secondary);
    font-size: 1.125rem;
    line-height: 1.8;
}

/* Dashboard Preview Styles */
.dashboard-preview-container {
    /* max-width: 1000px; */
    margin: 0 auto 5rem;
    text-align: center;
    position: relative;
    perspective: 50000px;
    z-index: 5;
    padding: 0 2rem;
}

.glow-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.15) 0%, transparent 70%);
    z-index: -1;
}

.sg-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--primary);
    box-shadow: 0 20px 50px -10px rgba(234, 179, 8, 0.3);
    transform: translateY(-10px);
}

.icon-box {
    width: 56px;
    height: 56px;
    background: rgba(234, 179, 8, 0.12);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

/* Media Queries */


/* ------------------------------------------------------------
   Page: hotspot-management.php
   ------------------------------------------------------------ */
/* Product Page Styles conforming to Accretion Obsidian design system (SmartGuard Template) */


.sg-hero-content {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    z-index: 10;
}



/* ------------------------------------------------------------
   Page: implementation-support.php
   ------------------------------------------------------------ */


.page-hero-content {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    z-index: 10;
}

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

.page-hero p {
    font-size: 1.25rem;
    color: var(--secondary);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.btn-group {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.section {
    padding: 8rem 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
    border-radius: 20px;
}

.section-title {
    font-family: var(--font-headline);
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 3rem;
    text-align: center;
}

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

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

/* Core Capabilities Grid */
.sg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 4rem;
}



/* ------------------------------------------------------------
   Page: managed-security.php
   ------------------------------------------------------------ */
/* Shared Product Page Styles */
.page-hero {
    position: relative;
    padding: 12rem 2rem 8rem;
    text-align: center;
    background: radial-gradient(circle at center 20%, rgba(255, 144, 105, 0.15) 0%, transparent 60%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/managed_security_hero.png') no-repeat center center;
    background-size: cover;
    opacity: 0.2;
    z-index: 1;
    filter: grayscale(100%) contrast(1.2);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: #000;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-family: var(--font-body);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 144, 105, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 144, 105, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.text-block {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
    color: var(--secondary);
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 4rem;
}

.caps-grid {
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    /* Adjusted for 5 items symmetry */
    grid-template-areas:
        "card1 card2 card3"
        "card4 card5 .";
    gap: 2rem;
    margin-top: 4rem;
}

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

.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.faq-btn {
    width: 100%;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: #fff;
    font-family: var(--font-headline);
    font-size: 1.1rem;
    cursor: pointer;
    text-align: left;
}

.faq-btn:hover {
    background: rgba(255, 255, 255, 0.03);
}

.faq-answer {
    padding: 1.5rem 2rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

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

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

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

    .page-hero {
        padding-top: 10rem;
    }
}

/* Hero Section for NMS */
.sg-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-dark);
    padding-top: 100px;
}

.sg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('images/products/nms-realistic.png') center/cover no-repeat;
    opacity: 0.15;
    z-index: 1;
}

.sg-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, var(--bg-dark) 80%);
    z-index: 2;
}

.sg-hero-content {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    text-align: center;
    padding: 0 1.5rem;
}

.sg-badge {
    display: inline-flex;
    padding: 0.5rem 1rem;
    background: rgba(255, 144, 105, 0.1);
    border: 1px solid rgba(255, 144, 105, 0.2);
    border-radius: 100px;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    animation: fadeInDown 0.8s ease forwards;
}

.sg-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #fff 0%, #a0a0a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fadeInUp 0.8s ease 0.2s forwards;
    opacity: 0;
}

.sg-desc {
    font-size: 1.2rem;
    color: var(--text-dim);
    max-width: 700px;
    margin: 0 auto 2.5rem;
    line-height: 1.6;
    animation: fadeInUp 0.8s ease 0.4s forwards;
    opacity: 0;
}

/* Feature Section */
.sg-section {
    padding: 100px 0;
    position: relative;
}

.container {
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--section-px);
}

.sg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    align-items: center;
}

.sg-feature-text h2 {
    font-family: 'Manrope', sans-serif;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #fff;
}

.sg-feature-text p {
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.sg-feature-img {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #111;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.sg-feature-img img {
    width: 100%;
    display: block;
}

/* 3D Perspective Dashboard */
.dashboard-preview-container {
    perspective: 1500px;
    padding: 50px 0;
}

.perspective-inner {
    transform: rotateX(10deg);
    transition: transform 0.1s ease-out;
    transform-style: preserve-3d;
}

/* Capabilities Grid */
.cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 50px;
}

.cap-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 2.5rem;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0;
    transform: translateY(30px);
}

.cap-card:hover {
    border-color: var(--primary);
    background: rgba(255, 144, 105, 0.05);
    transform: translateY(-5px);
}

.cap-icon {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.cap-body {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* SmartGuard-style Capabilities Section */

.sg-grid-caps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 4rem;
}

.sg-feature-card {
    padding: 2.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, background 0.3s;
    position: relative;
}

.sg-feature-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
}

.sg-feature-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.75rem;
    font-family: 'Manrope', sans-serif;
}

.sg-feature-card p {
    font-size: 0.9375rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.glow-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 144, 105, 0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.glow-card:hover::after {
    opacity: 1;
}

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

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

@media (max-width: 991px) {
    .sg-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

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

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

/* ------------------------------------------------------------
   Page: partner.php
   ------------------------------------------------------------ */
:root {
    --primary: #ff9069;
    --primary-dark: #e57d5a;
    --bg-dark: #0a0a0b;
    --text-main: #e0e0e0;
    --text-dim: #9ca3af;
    --ghost-border: rgba(255, 255, 255, 0.08);
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* -----------------------
           HERO SECTION
        ----------------------- */
.partner-hero {
    position: relative;
    padding: 240px 2rem 120px;
    text-align: center;
}

.partner-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center 20%, rgba(255, 144, 105, 0.15), transparent 70%);
    z-index: -1;
}

.partner-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    background: linear-gradient(to bottom, #ffffff 30%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.partner-subtitle {
    font-size: 1.25rem;
    color: var(--text-dim);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* -----------------------
           PARTNERSHIP TIERS
        ----------------------- */
.tiers-section {
    max-width: 1200px;
    margin: 40px auto 120px;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.tier-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--ghost-border);
    border-radius: 20px;
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
    transform: translateY(40px);
}

.tier-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.tier-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 144, 105, 0.12), transparent 40%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    pointer-events: none;
}

.tier-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 144, 105, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 144, 105, 0.1);
}

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

.tier-icon {
    font-size: 3rem;
    color: var(--text-dim);
    margin-bottom: 1.5rem;
    transition: all 0.4s ease;
}

.tier-card:hover .tier-icon {
    color: var(--primary);
    transform: scale(1.1) translateY(-5px);
    text-shadow: 0 0 15px rgba(255, 144, 105, 0.7);
}

.tier-card h3 {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 1rem;
}

.tier-card p {
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 2rem;
    flex-grow: 1;
}

.tier-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: auto;
    border-top: 1px solid var(--ghost-border);
    padding-top: 1.5rem;
}

.tier-perks li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ccc;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.tier-perks li .material-symbols-outlined {
    color: var(--primary);
    font-size: 1.2rem;
}

/* -----------------------
           WHY PARTNER GRID
        ----------------------- */
.why-partner {
    background: var(--surface-low);
    padding: 100px 0;
    border-radius: 40px;
    max-width: 1400px;
    margin: 0 auto 120px;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

.why-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

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

.why-item {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--ghost-border);
    border-radius: 16px;
    padding: 2.5rem;
    display: flex;
    gap: 1.5rem;
    transition: var(--transition-smooth);
    opacity: 0;
    transform: translateY(20px);
}

.why-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.why-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.15);
}

.why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(255, 144, 105, 0.1);
    border-radius: 12px;
    color: var(--primary);
    flex-shrink: 0;
}

.why-text h3 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.why-text p {
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0;
}

/* -----------------------
           APPLICATION TIMELINE
        ----------------------- */
.application-section {
    max-width: 800px;
    margin: 0 auto 120px;
    padding: 0 1.5rem;
    position: relative;
}

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

.timeline::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary) 0%, rgba(255, 255, 255, 0.1) 100%);
}

.timeline-step {
    position: relative;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s ease;
}

.timeline-step.visible {
    opacity: 1;
    transform: translateX(0);
}

.timeline-step::before {
    content: '';
    position: absolute;
    left: -43px;
    top: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-dark);
    border: 2px solid var(--primary);
    box-shadow: 0 0 10px rgba(255, 144, 105, 0.5);
    transition: var(--transition-smooth);
}

.timeline-step:hover::before {
    background: var(--primary);
    box-shadow: 0 0 20px rgba(255, 144, 105, 0.8);
}

.step-number {
    font-family: 'Manrope', sans-serif;
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.timeline-step h3 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.timeline-step p {
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0;
}

/* Full Width CTA */
.apply-cta-full {
    position: relative;
    background: linear-gradient(to bottom, #0a0a0b 0%, #000 100%);
    padding: 120px 2rem;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid var(--ghost-border);
    margin-top: 80px;
}

.cta-mouse-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255, 144, 105, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    mix-blend-mode: plus-lighter;
}

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

.apply-cta-full h3 {
    color: #fff;
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.apply-cta-full p {
    color: var(--text-dim);
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 3rem;
}

.btn-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary {
    background: linear-gradient(135deg, #ffb9a2 0%, #ff9069 100%);
    color: #390c00;
    padding: 1rem 2rem;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 144, 105, 0.2);
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    box-shadow: 0 0 25px rgba(255, 144, 105, 0.5);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary);
    padding: 1rem 2rem;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid rgba(255, 144, 105, 0.3);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(255, 144, 105, 0.1);
}

.inquiry-contact {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--text-dim);
}

.inquiry-contact a {
    color: var(--primary);
    text-decoration: none;
}

.presence-hero {
    height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 120px 2rem 0;
    overflow: hidden;
    background: #000;
}

.hero-image-bg {
    position: absolute;
    inset: 0;
    background: url('global_presence_hero.png') center/cover no-repeat;
    opacity: 0.4;
    filter: grayscale(0.2) contrast(1.1);
    z-index: 0;
}

.hero-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 0%, #0e0e10 95%);
    z-index: 1;
}

.hero-sub {
    font-size: 1.25rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    max-width: 800px;
    margin-inline: auto;
    line-height: 1.6;
    margin-top: 1rem;
}

/* -----------------------
           STATS SECTION
        ----------------------- */
.stats-section {
    padding: 80px 2rem;
    background: linear-gradient(to bottom, #0e0e10, #050505);
    position: relative;
    z-index: 10;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1300px;
    margin: 0 auto;
}

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

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

.stat-card {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--card-glass);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: rgba(255, 144, 105, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.stat-value {
    font-size: 4rem;
    font-weight: 900;
    color: var(--primary);
    font-family: 'Manrope', sans-serif;
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.05em;
}

.stat-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-dim);
}

/* -----------------------
           REGIONAL CARDS
        ----------------------- */
.regions-section {
    padding: 120px 2rem;
    max-width: 1300px;
    margin: 0 auto;
}

.regions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

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

.region-card {
    background: var(--card-glass);
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    padding: 4rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.region-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 144, 105, 0.3);
}

.region-tag {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--primary);
    margin-bottom: 1rem;
}

.region-card h3 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.region-card p {
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.location-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: auto;
}

.location-tag {
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

/* Special Styling for India Card */
.region-card.featured {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(255, 144, 105, 0.05) 0%, transparent 100%);
}

@media (max-width: 1024px) {
    .region-card.featured {
        grid-column: span 1;
    }
}

.region-card.featured h3 {
    font-size: 3.5rem;
}

/* -----------------------
           CTA
        ----------------------- */
.presence-cta {
    padding: 140px 2rem;
    text-align: center;
    background: radial-gradient(circle at center, rgba(255, 144, 105, 0.08) 0%, transparent 70%);
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/security_audit_hero.png') no-repeat center center;
    background-size: cover;
    opacity: 0.2;
    z-index: 1;
    filter: grayscale(100%) contrast(1.2);
}

.btn-secondary:hover {
    background: rgba(0, 0, 0, 0.3);
    /* Darker on hover for a subtle change */
    background: rgba(255, 255, 255, 0.1);
}

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

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

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

    .page-hero {
        padding-top: 10rem;
    }
}

/* ------------------------------------------------------------
   Page: smart-av-box.php
   ------------------------------------------------------------ */
/* Specific Smart AV Box Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    /* background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/avbox-hero-bg.png'); */
    background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8));
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.sg-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
    z-index: 1;
}



/* ------------------------------------------------------------
   Page: smart-bms.php
   ------------------------------------------------------------ */
/* Specific Smart BMS Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    /* background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/bms-hero-bg.png'); */
    background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8));
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.sg-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--primary);
    box-shadow: 0 20px 50px -10px rgba(234, 179, 8, 0.2);
    transform: translateY(-10px);
}

.icon-box {
    width: 56px;
    height: 56px;
    background: rgba(234, 179, 8, 0.1);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}



/* ------------------------------------------------------------
   Page: smart-callbox.php
   ------------------------------------------------------------ */
/* Specific Smart Callbox Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    /* background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/callbox-hero-bg.png'); */
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}



/* ------------------------------------------------------------
   Page: smart-crm.php
   ------------------------------------------------------------ */
/* Specific Smart CRM Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    /* background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/crm-hero-bg.png'); */
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}



/* ------------------------------------------------------------
   Page: smart-dialer.php
   ------------------------------------------------------------ */
/* Specific Smart Dialer Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    /* background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/dialer-hero-bg.png'); */
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.sg-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 144, 105, 0.08) 0%, transparent 70%);
    z-index: 1;
}


/* Problem vs Solution Split */
.sg-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 4rem;
}

.sg-split-card {
    background: var(--surface-container);
    padding: 3.5rem;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.sg-split-card.problem {
    background: linear-gradient(135deg, rgba(200, 50, 50, 0.05), transparent);
    border-top: 4px solid #ff4c4c;
}

.sg-split-card.solution {
    background: linear-gradient(135deg, rgba(255, 144, 105, 0.1), transparent);
    border-top: 4px solid var(--primary);
}

.sg-split-card h3 {
    font-family: var(--font-headline);
    font-size: 1.75rem;
    color: #fff;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sg-split-card p {
    color: var(--on-surface-variant);
    line-height: 1.7;
    font-size: 1rem;
}

.sg-split-card .material-symbols-outlined {
    font-size: 2rem;
}

.problem .material-symbols-outlined {
    color: #ff4c4c;
}

.solution .material-symbols-outlined {
    color: var(--primary);
}

/* Dashboard Preview with 3D effect */

.dashboard-preview-container {
    /* max-width: 1000px; */
    max-width: 100%;
    margin: 0 auto 6rem;
    text-align: center;
    position: relative;
    perspective: 5000px;
    z-index: 5;
}

.perspective-inner {
    transform-style: preserve-3d;
    transform: rotateX(15deg) scale(0.95);
    transition: transform 0.1s linear;
    will-change: transform;
    position: relative;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.9);
}

.dashboard-preview {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.5rem;
}

.sg-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3rem;
    border-radius: 2rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.sg-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--primary);
    box-shadow: 0 20px 50px -10px rgba(255, 144, 105, 0.2);
    transform: translateY(-10px);
}

.ghost-icon {
    position: absolute;
    right: -2rem;
    bottom: -2rem;
    font-size: 10rem !important;
    opacity: 0.03;
    color: var(--primary);
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s, transform 0.3s;
}

.icon-box {
    width: 64px;
    height: 64px;
    background: rgba(255, 144, 105, 0.1);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.icon-box .material-symbols-outlined {
    color: var(--primary);
    font-size: 32px;
}

.sg-card h3 {
    font-size: 1.35rem;
    color: #fff;
    margin-bottom: 1.25rem;
    font-family: var(--font-headline);
    position: relative;
    z-index: 2;
}

.sg-card p {
    font-size: 1rem;
    color: var(--on-surface-variant);
    line-height: 1.7;
    position: relative;
    z-index: 2;
}



/* ------------------------------------------------------------
   Page: smart-hrm.php
   ------------------------------------------------------------ */
/* Specific Smart HRM Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    /* background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/hrm-hero-bg.png'); */
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}



/* ------------------------------------------------------------
   Page: smart-inventory.php
   ------------------------------------------------------------ */
/* Specific Smart Inventory Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    /* background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/inventory-hero-bg.png'); */
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}



/* ------------------------------------------------------------
   Page: smart-ivr.php
   ------------------------------------------------------------ */
/* Specific Smart IVR Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    /* background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/ivr-hero-bg.png'); */
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.icon-box {
    width: 64px;
    height: 64px;
    background: rgba(105, 144, 255, 0.1);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}



/* ------------------------------------------------------------
   Page: smart-oms.php
   ------------------------------------------------------------ */
/* Specific Smart OMS Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    /* background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/oms-hero-bg.png'); */
    background-size: cover;
    background-position: center;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.dashboard-preview {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.8);
    /* filter: hue-rotate(200deg) saturate(1.2); */
    /* Standardize blue mockup to orange */
}



.sg-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/proxy-hero-bg.png');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    filter: hue-rotate(150deg) saturate(1.5);
    /* Force orange */
    z-index: 0;
}



.sg-hero p {
    font-size: 1.125rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.sg-btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-container));
    color: #000;
    padding: 0.875rem 2rem;
    border-radius: 999px;
    font-weight: 700;
    font-family: var(--font-body);
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(255, 144, 105, 0.3);
}

.sg-btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 0.875rem 2rem;
    border-radius: 999px;
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.sg-section {
    padding: 6rem 2rem;
    max-width: var(--max-w);
    margin: 0 auto;
}

.sg-text-block {
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
    color: var(--secondary);
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 4rem;
}

/* Problem vs Solution Split */
.sg-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
}

.sg-split-card {
    background: var(--surface-container);
    padding: 3rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.sg-split-card.problem {
    background: linear-gradient(135deg, rgba(200, 50, 50, 0.05), transparent);
    border-top: 2px solid #ff4c4c;
}

.sg-split-card.solution {
    background: linear-gradient(135deg, rgba(255, 144, 105, 0.1), transparent);
    border-top: 2px solid var(--primary);
}

.sg-split-card h3 {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

.sg-split-card p {
    color: var(--on-surface-variant);
    line-height: 1.6;
}

.sg-feature-card {
    padding: 2rem;
    border-radius: 1rem;
    background: var(--surface-container-high);
    transition: transform 0.3s ease, background 0.3s;
    position: relative;
}

.sg-feature-card:hover {
    transform: translateY(-5px);
    background: var(--surface-container-highest);
}

.sg-feature-card h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.75rem;
    font-family: var(--font-headline);
}

.sg-feature-card p {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    line-height: 1.6;
}

/* Deployment List */
.sg-deployment-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin-top: 3rem;
    justify-content: center;
}

.sg-deployment-list li {
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.sg-deployment-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sg-deployment-list li strong {
    color: #fff;
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-headline);
    font-size: 1.125rem;
}

.sg-deployment-list li span {
    font-size: 0.875rem;
    color: var(--on-surface-variant);
    line-height: 1.5;
}

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

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


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

    .why-sg-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------
   Page: sms-application.php
   ------------------------------------------------------------ */
/* Specific SMS Application Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    background:
        linear-gradient(rgba(10, 10, 12, 0.8), rgba(10, 10, 12, 0.8)),
        url('images/sms-hero-bg.png');
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}



/* ------------------------------------------------------------
   Page: ssl-certificates.php
   ------------------------------------------------------------ */
/* Specific SSL Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(10, 10, 12, 0.95) 0%, rgba(20, 20, 25, 0.9) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}



/* -----------------------
           HERO SECTION
        ----------------------- */
.support-hero {
    position: relative;
    padding: 240px 2rem 100px;
    text-align: center;
}

.support-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center 20%, rgba(255, 144, 105, 0.1), transparent 70%);
    z-index: -1;
}

.support-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    background: linear-gradient(to bottom, #ffffff 30%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.support-subtitle {
    font-size: 1.25rem;
    color: var(--text-dim);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* -----------------------
           SUPPORT CHANNELS
        ----------------------- */
.support-channels {
    max-width: 1200px;
    margin: 0 auto 120px;
    padding: 1.5rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.channel-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--ghost-border);
    border-radius: 20px;
    padding: 2.5rem;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(40px);
}

.channel-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.channel-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 144, 105, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.channel-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 144, 105, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
}

.channel-card h3 {
    color: #fff;
    font-size: 1.4rem;
    margin: 0;
}

.channel-card p {
    color: var(--text-dim);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
    flex-grow: 1;
}

.channel-action {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    transition: gap 0.3s ease;
}

.channel-card:hover .channel-action {
    gap: 0.75rem;
}

/* -----------------------
           SLA FRAMEWORK
        ----------------------- */
.sla-section {
    max-width: 1000px;
    margin: 0 auto 120px;
    padding: 0 1.5rem;
}

.sla-header {
    text-align: center;
    margin-bottom: 4rem;
}

.sla-header h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

.sla-table-container {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ghost-border);
    border-radius: 24px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sla-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.sla-table th {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    padding: 1.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--ghost-border);
}

.sla-table td {
    padding: 1.5rem;
    color: var(--text-dim);
    border-bottom: 1px solid var(--ghost-border);
    font-size: 1rem;
}

.sla-table tr:last-child td {
    border-bottom: none;
}

.priority-label {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.p1 {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.p2 {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.p3 {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* -----------------------
           FAQ SECTION
        ----------------------- */
.faq-section {
    /* background: rgb(10 10 10); */
    background: rgb(0 0 0);
    h
    /* background: rgba(255, 144, 105, 0.02); */
    padding: 100px 0;
    border-top: 0px solid var(--ghost-border);
    border-bottom: 0px solid var(--ghost-border);
    /* margin-bottom: 120px; */
}

.faq-grid {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.faq-item {
    margin-bottom: 2.5rem;
    padding-bottom: 0rem;
    border-bottom: 1px solid var(--ghost-border);
}

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

.faq-item h3 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.faq-item p {
    color: var(--text-dim);
    line-height: 1.7;
    font-size: 1.05rem;
}

/* -----------------------
           CONTACT STRIP
        ----------------------- */
.contact-strip {
    max-width: 1200px;
    margin: 0 auto 120px;
    padding: 100px 2rem;
    background: radial-gradient(circle at center, rgba(255, 144, 105, 0.05) 0%, transparent 70%);
    border: 1px solid var(--ghost-border);
    border-radius: 40px;
    text-align: center;
}

.contact-strip h2 {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

.contact-strip p {
    color: var(--text-dim);
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.contact-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-main {
    background: var(--primary);
    color: #222;
    padding: 1.1rem 2.5rem;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 144, 105, 0.3);
}

.btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 1.1rem 2.5rem;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-smooth);
}

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

/* -----------------------
           CONTACT FORM SECTION
        ----------------------- */
.support-form-section {
    max-width: 1300px;
    margin: 0 auto 160px;
    padding: 0 1.5rem;
}

.form-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--ghost-border);
    border-radius: 40px;
    padding: 4rem;
    position: relative;
    overflow: hidden;
}

.form-container::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 144, 105, 0.08), transparent 70%);
    z-index: 0;
}


.form-info {
    position: relative;
    z-index: 1;
}

.form-info h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.form-info p {
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 3rem;
    font-size: 1.1rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.info-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 144, 105, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.info-content h4 {
    color: #fff;
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
}

.info-content span {
    color: var(--text-dim);
    font-size: 0.95rem;
}

/* Glass Form */
.glass-form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .glass-form {
        grid-template-columns: 1fr;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.full-width {
    grid-column: span 2;
}

@media (max-width: 640px) {
    .full-width {
        grid-column: span 1;
    }
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ghost-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    transition: var(--transition-smooth);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 144, 105, 0.05);
    box-shadow: 0 0 20px rgba(255, 144, 105, 0.1);
}

.form-select option {
    background: #1a1a1c;
    color: #fff;
}

.form-textarea {
    resize: vertical;
    min-height: 150px;
}

.submit-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #000;
    border: none;
    padding: 1.25rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 10px 30px rgba(255, 144, 105, 0.2);
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 144, 105, 0.4);
    filter: brightness(1.1);
}

/* ------------------------------------------------------------
   Page: web-app-dev.php
   ------------------------------------------------------------ */
:root {
    --primary: #ff9069;
    --primary-accent: #ff7448;
    --bg-dark: #000000;
    --card-glass: rgba(255, 255, 255, 0.03);
    --border-glass: rgba(255, 255, 255, 0.08);
    --text-dim: #9ca3af;
}

.digital-hero {
    height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 120px 2rem 0;
    overflow: hidden;
    background: #000;
}

.hero-image-bg {
    position: absolute;
    inset: 0;
    background: url('digital_hero.png') center/cover no-repeat;
    opacity: 0.35;
    filter: grayscale(0.5) contrast(1.2);
    z-index: 0;
}

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

.pillar-card {
    background: var(--card-glass);
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    padding: 3rem;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
}

/* -----------------------
           PROCESS VISUALIZER
        ----------------------- */
.process-section {
    padding: 120px 2rem;
    background: #050505;
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.process-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding-bottom: 3rem;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
}

/* Hide Scrollbar for Chrome/Safari */
.process-track::-webkit-scrollbar {
    height: 4px;
}

.process-track::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

.process-step {
    min-width: 320px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    padding: 2.5rem;
    position: relative;
}

.step-num {
    font-size: 4rem;
    font-weight: 900;
    color: rgba(255, 144, 105, 0.1);
    position: absolute;
    top: 1rem;
    right: 2rem;
}

.process-step h4 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.process-step p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* -----------------------
           CAPABILITIES / LIST
        ----------------------- */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 80px 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

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

.cap-item {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    align-items: flex-start;
}

.cap-item h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.cap-item p {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
}

/* -----------------------
           CTA
        ----------------------- */
.digital-cta {
    padding: 120px 2rem;
    text-align: center;
    background: radial-gradient(circle at center, rgba(255, 144, 105, 0.08) 0%, transparent 70%);
}

.cta-btn-xl {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 3rem;
    background: var(--primary);
    color: #000;
    border-radius: 100px;
    font-size: 1.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.cta-btn-xl:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(255, 144, 105, 0.4);
    background: #fff;
}



/* ============================================================
   PAGE-SPECIFIC STYLES CONSOLIDATION
   ============================================================ */

/* ------------------------------------------------------------
   Page: aaa-radius.php
   ------------------------------------------------------------ */
/* Product Page Styles conforming to Accretion Obsidian design system (SmartGuard Template) */
.sg-hero {
    position: relative;
    padding: 12rem 2rem 6rem;
    text-align: center;
    background: url('images/aaa_radius_hero.png') center/cover no-repeat;
    border-bottom: 0px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.sg-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(10, 10, 12, 0.8) 0%,
            rgba(10, 10, 12, 0.95) 100%);
    z-index: 1;
}

@media (max-width: 1024px) {
    .sg-split {
        grid-template-columns: 1fr;
    }

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

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

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

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

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


    .sg-section-title {
        font-size: 2.25rem;
    }

    .why-sg-grid {
        grid-template-columns: 1fr;
    }
}

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

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

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

    .boss-hero {
        padding-top: 8rem;
    }

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

    .why-boss-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .briefing-container {
        gap: 2rem;
    }

    .briefing-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 1024px) {
    .briefing-container {
        grid-template-columns: 1fr;
        padding-top: 140px;
        max-width: 800px;
    }

    .briefing-header {
        position: relative;
        top: 0;
    }
}

@media (max-width: 600px) {
    .form-card {
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }

    .briefing-container {
        padding: 120px 1.25rem 80px;
    }
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

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

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

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

@media (max-width: 968px) {
    .cloud-stack {
        grid-template-columns: 1fr;
    }
}

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

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

@media (max-width: 968px) {
    .transformation {
        flex-direction: column;
        text-align: center;
    }
}

/* ------------------------------------------------------------
   Page: compliance-legal.php
   ------------------------------------------------------------ */
/* Product Page Styles conforming to Accretion Obsidian design system (SmartGuard Template) */
.sg-hero {
    background: url('images/compliance_hero.png') center/cover no-repeat;
}

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

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

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


    .sg-section-title {
        font-size: 2.25rem;
    }
}



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

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

@media (max-width: 1024px) {
    .highlight-card {
        grid-template-columns: 1fr;
        padding: 3rem;
        text-align: center;
    }

    .highlight-content {
        order: 2;
    }

    .highlight-visual {
        order: 1;
    }
}
}

/* ------------------------------------------------------------
   Page: hotspot-management.php
   ------------------------------------------------------------ */
/* Product Page Styles conforming to Accretion Obsidian design system (SmartGuard Template) */
.sg-hero {
    background: url('images/hotspot_hero.png') center/cover no-repeat;
}



.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/security_audit_hero.png') no-repeat center center;
    background-size: cover;
    opacity: 0.2;
    z-index: 1;
}

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

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

/* ------------------------------------------------------------
   Page: mail-solutions.php
   ------------------------------------------------------------ */
/* Product Page Styles conforming to Accretion Obsidian design system (SmartGuard Template) */
.sg-hero {
    background: url('images/mail_hero.png') center/cover no-repeat;
}



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

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

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

    .page-hero {
        padding-top: 10rem;
    }
}

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

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

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

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

@media (max-width: 1024px) {
    .region-card.featured {
        grid-column: span 1;
    }
}

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

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

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

    .page-hero {
        padding-top: 10rem;
    }
}












/* ------------------------------------------------------------
   Page: smartguard.php
   ------------------------------------------------------------ */
/* Specific SmartGuard Page Styles conforming to Accretion Obsidian design system */
.sg-hero {
    /* background: url('images/smartguard_hero.png') center/cover no-repeat; */
}

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

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


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

    .why-sg-grid {
        grid-template-columns: 1fr;
    }
}






@media (max-width: 640px) {
    .glass-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .full-width {
        grid-column: span 1;
    }
}

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

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

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

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


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

    .why-sg-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   18. COOKIE CONSENT BANNER
   ================================================================ */
.cookie-consent-banner {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99999;
    max-width: 480px;
    width: calc(100% - 48px);
    background: rgba(15, 23, 42, 0.85);
    /* Sleek slate dark background */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.25rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
    transform: translateY(120px) scale(0.95);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    pointer-events: none;
}

.cookie-consent-banner.show {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.cookie-consent-inner {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.cookie-consent-icon {
    background: rgba(255, 144, 105, 0.1);
    border: 1px solid rgba(255, 144, 105, 0.2);
    border-radius: 0.75rem;
    padding: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #ff9069);
    flex-shrink: 0;
}

.cookie-consent-icon .material-symbols-outlined {
    font-size: 1.5rem;
}

.cookie-consent-content {
    flex-grow: 1;
}

.cookie-consent-content h5 {
    color: #fff;
    font-family: var(--font-headline);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
}

.cookie-consent-content p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
}

.cookie-consent-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1.25rem;
    width: 100%;
}

.cookie-consent-actions button {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.6rem 1.2rem;
    border-radius: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cookie-consent-actions .btn-sm {
    padding: 0.5rem 1rem !important;
}

@media (max-width: 480px) {
    .cookie-consent-banner {
        bottom: 16px;
        right: 16px;
        width: calc(100% - 32px);
        padding: 1.25rem;
    }

    .cookie-consent-inner {
        flex-direction: column;
        gap: 0.75rem;
    }

    .cookie-consent-actions {
        margin-top: 1rem;
    }

    .cookie-consent-actions button {
        flex: 1;
        text-align: center;
    }
}