/**
 * Dark High-Tech Neon Theme: Black / Dark Grey / Light Grey
 * Accent: #00CD76 Vibrant Bolt Taxi Green
 * Effects: Circling Animated Neon Glowing Gradient Borders
 * Path: assets/css/style.css
 */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin-glow {
    to {
        --angle: 360deg;
    }
}

@keyframes pulse-glow-subtle {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 205, 118, 0.25), 0 0 30px rgba(0, 205, 118, 0.1);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 205, 118, 0.45), 0 0 50px rgba(0, 205, 118, 0.2);
    }
}

:root {
    --primary-black: #000000;
    --secondary-dark-grey: #121214;
    --surface-dark-grey: #1a1a1e;
    --border-dark-grey: #27272a;
    --light-grey: #94a3b8;
    --lighter-grey: #cbd5e1;
    --accent-green: #00CD76;
    --text-white: #ffffff;

    --success-bg: #00CD76;
    --danger-bg: #b91c1c;
    --warning-bg: #121214;
}

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

body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Google Sans", "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--text-white);
    background-color: var(--primary-black);
}

.container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0;
    padding: 0;
    background: transparent !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

/* =========================================================================
   HEADINGS & GLOBAL TYPOGRAPHY
   ========================================================================= */
h1, h2, h3, h4, h5, h6,
.hero-split-title,
.products-hero-title,
.steps-main-title,
.promo-title,
.pillar-title,
.step-title,
.collage-main-title,
.json-main-title,
.blog-main-title,
.communication-main-title,
.billing-main-title,
.funnel-main-title,
.ads-main-title,
.seo-main-title,
.analytics-main-title,
.cta-message-block h2,
.home-cta-message h2,
.details-main-title,
.details-section-heading,
.summary-card-title {
    color: var(--accent-green) !important;
    font-weight: 900;
    text-transform: none;
    letter-spacing: normal;
}

p, span, li, small, strong, td, th, div, label, input, textarea, select {
    color: var(--text-white);
}

p {
    opacity: 0.9;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 500;
}

.text-muted, .text-muted-dark, .text-slate {
    color: var(--light-grey) !important;
}

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

/* =========================================================================
   CIRCLING GLOW ANIMATION ENGINE (CARDS, COLUMNS & WRAPPERS)
   ========================================================================= */
.package-card,
.benefit-pillar-card,
.step-card,
.delivery-option-card,
.promo-banner-card,
.promo-feature-box,
.value-summary-card,
.json-media-frame,
.blog-media-frame,
.communication-media-frame,
.billing-media-frame,
.funnel-media-frame,
.ads-media-frame,
.seo-media-frame,
.analytics-media-frame,
.collage-layer,
.hero-card-frame,
.payments-card-wrapper,
.summary-card,
.checkout-form-card,
.billing-card-wrapper,
.pop-viewer-card,
.sidebar-panel,
.whatsapp-pop-banner,
.infra-badge {
    position: relative;
    background-color: var(--secondary-dark-grey) !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    background-clip: padding-box;
    z-index: 1;
}

.package-card::before,
.benefit-pillar-card::before,
.step-card::before,
.delivery-option-card::before,
.promo-banner-card::before,
.promo-feature-box::before,
.value-summary-card::before,
.json-media-frame::before,
.blog-media-frame::before,
.communication-media-frame::before,
.billing-media-frame::before,
.funnel-media-frame::before,
.ads-media-frame::before,
.seo-media-frame::before,
.analytics-media-frame::before,
.collage-layer::before,
.hero-card-frame::before,
.payments-card-wrapper::before,
.summary-card::before,
.checkout-form-card::before,
.billing-card-wrapper::before,
.pop-viewer-card::before,
.sidebar-panel::before,
.whatsapp-pop-banner::before,
.infra-badge::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 32px;
    padding: 3px;
    background: conic-gradient(from var(--angle), #00CD76, #004d2c, #121214, #00CD76);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: spin-glow 4s linear infinite;
    pointer-events: none;
}

.package-card::after,
.benefit-pillar-card::after,
.step-card::after,
.delivery-option-card::after,
.promo-banner-card::after,
.value-summary-card::after,
.checkout-form-card::after,
.summary-card::after,
.sidebar-panel::after,
.pop-viewer-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    background: conic-gradient(from var(--angle), rgba(0, 205, 118, 0.35), transparent, transparent, rgba(0, 205, 118, 0.35));
    filter: blur(12px);
    z-index: -2;
    animation: spin-glow 4s linear infinite;
    pointer-events: none;
}

/* =========================================================================
   CIRCLING GLOW ANIMATED BUTTONS
   ========================================================================= */
.btn,
.btn-white,
.btn-secondary,
.btn-dark-cta,
.btn-dark-launch,
.btn-hero-cta,
.btn-promo-cta,
.client-signin-btn,
.btn-dark-auth,
button[type="submit"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--primary-black) !important;
    color: var(--text-white) !important;
    padding: 14px 32px;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    background-clip: padding-box;
    z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: pulse-glow-subtle 3s infinite ease-in-out;
}

.btn::before,
.btn-white::before,
.btn-secondary::before,
.btn-dark-cta::before,
.btn-dark-launch::before,
.btn-hero-cta::before,
.btn-promo-cta::before,
.client-signin-btn::before,
.btn-dark-auth::before,
button[type="submit"]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    padding: 2px;
    background: conic-gradient(from var(--angle), #00CD76, #052e16, #000000, #00CD76);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: spin-glow 3s linear infinite;
    pointer-events: none;
}

.btn:hover,
.btn-white:hover,
.btn-secondary:hover,
.btn-dark-cta:hover,
.btn-dark-launch:hover,
.btn-hero-cta:hover,
.btn-promo-cta:hover,
.client-signin-btn:hover {
    transform: translateY(-2px);
    color: var(--accent-green) !important;
    box-shadow: 0 0 25px rgba(0, 205, 118, 0.6) !important;
}

.btn i {
    color: var(--accent-green);
    margin-right: 4px;
}

/* =========================================================================
   NAVIGATION HEADER
   ========================================================================= */
.site-header { 
    background-color: var(--secondary-dark-grey);
    border-bottom: 2px solid var(--border-dark-grey);
    margin: 0 0 40px 0 !important; 
    padding: 20px 0; 
}

.header-wrap { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 24px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.brand-logo { 
    font-size: 1.4rem; 
    font-weight: 900; 
    color: var(--text-white);
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.brand-logo i {
    color: var(--accent-green);
}

.header-corporate-logo {
    max-height: 40px;
    max-width: 160px;
    object-fit: contain;
}

.store-nav { 
    display: flex; 
    align-items: center; 
    gap: 24px; 
    list-style: none; 
}

.store-nav a { 
    color: var(--lighter-grey);
    text-decoration: none; 
    font-weight: 700; 
    font-size: 0.95rem; 
    transition: color 0.15s ease;
}

.store-nav a:hover, 
.store-nav li.active a { 
    color: var(--accent-green);
}

.cart-badge { 
    background: var(--accent-green);
    color: var(--primary-black); 
    border-radius: 999px; 
    padding: 2px 8px; 
    font-size: 0.75rem; 
    font-weight: 900; 
    margin-left: 6px;
}

.user-pill { 
    background-color: var(--primary-black); 
    padding: 8px 18px; 
    border-radius: 30px !important; 
    font-size: 0.85rem; 
    font-weight: 800; 
    color: var(--text-white) !important; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    text-decoration: none !important;
    border: 1px solid var(--border-dark-grey);
}

.user-pill:hover {
    background-color: var(--surface-dark-grey) !important;
    color: var(--accent-green) !important;
    border-color: var(--accent-green);
}

.logout-nav-trigger {
    color: var(--light-grey) !important;
}

.logout-nav-trigger:hover {
    color: var(--accent-green) !important;
}

/* =========================================================================
   FORM INPUTS & CONTROLS
   ========================================================================= */
.form-group {
    margin-bottom: 25px;
}

label, .form-section-label {
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--lighter-grey);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea,
.form-control {
    background-color: var(--surface-dark-grey) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--border-dark-grey) !important;
    border-radius: 30px !important;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea,
textarea.form-control {
    border-radius: 20px !important;
    min-height: 120px;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.4) !important;
}

input[type="file"] {
    padding: 10px 22px;
    background-color: transparent;
    cursor: pointer;
}

/* =========================================================================
   SECTION BACKGROUNDS & LAYOUT STRATA
   ========================================================================= */
.split-hero-container,
.platform-benefits-container,
.delivery-spec-container,
.collage-showcase-container,
.json-blocks-container,
.blog-showcase-container,
.communication-showcase-container,
.billing-showcase-container,
.marketing-funnel-container,
.ads-api-container,
.seo-booster-container,
.analytics-showcase-container {
    background-color: var(--primary-black) !important;
    border-top: 1px solid var(--border-dark-grey);
    padding: 80px 24px;
    box-sizing: border-box;
}

.corporate-promo-container,
.ordering-steps-container {
    background-color: var(--secondary-dark-grey) !important;
    border-top: 1px solid var(--border-dark-grey);
    border-bottom: 1px solid var(--border-dark-grey);
    padding: 80px 24px;
    box-sizing: border-box;
}

.products-hero-container.dark-hero-bg {
    background-color: var(--primary-black) !important;
    border-top: 1px solid var(--border-dark-grey);
    padding: 80px 24px;
    box-sizing: border-box;
}

.package-grid {
    background-color: var(--primary-black) !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    padding: 80px 24px;
    box-sizing: border-box;
}

/* Fluid Call-to-Action Banners */
.fluid-software-cta-banner,
.home-acceleration-cta-banner {
    background-color: var(--secondary-dark-grey) !important;
    border-top: 2px solid var(--accent-green);
    border-bottom: 2px solid var(--accent-green);
    box-shadow: 0 0 35px rgba(0, 205, 118, 0.2);
    padding: 80px 24px;
    box-sizing: border-box;
}

.fluid-cta-wrap,
.home-cta-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* =========================================================================
   CARDS, BADGES & INTERNALS
   ========================================================================= */
.pricing-matrix-box {
    background: var(--surface-dark-grey) !important;
    border: 1px solid var(--border-dark-grey);
    border-radius: 16px;
    padding: 16px 20px;
    margin: 15px 0 20px 0;
}

.display-price-success {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--accent-green) !important;
    display: block;
}

.display-price-primary {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-white) !important;
    display: block;
}

.original-value-line {
    color: var(--light-grey) !important;
    text-decoration: line-through;
    font-size: 0.85rem;
    display: block;
}

.deposit-now-callout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 800;
    margin-top: 6px;
    letter-spacing: normal;
    text-transform: none;
}

.deposit-now-callout.text-green {
    color: var(--accent-green) !important;
}

.deposit-now-callout.text-black {
    color: var(--text-white) !important;
}

.balance-due-notice {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--light-grey) !important;
    display: block;
    margin-top: 4px;
}

.balance-due-notice.warning-orange {
    color: #fbbf24 !important;
}

.steps-pre-label,
.hero-pre-badge,
.cta-pre-tag,
.home-cta-tag,
.dark-mode-label,
.card-promo-tag,
.promo-badge {
    background-color: var(--surface-dark-grey) !important;
    color: var(--accent-green) !important;
    border: 1px solid var(--accent-green) !important;
    padding: 6px 16px;
    border-radius: 30px !important;
    font-size: 0.75rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 10px rgba(0, 205, 118, 0.2);
}

.fallback-card-icon,
.step-icon-wrapper,
.option-icon-frame,
.feature-box-icon,
.metric-icon.icon-dark-accent {
    background-color: var(--surface-dark-grey) !important;
    color: var(--accent-green) !important;
    border: 1px solid var(--accent-green) !important;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-tag {
    background-color: var(--surface-dark-grey) !important;
    color: var(--text-white) !important;
    border: 1px solid var(--border-dark-grey);
    border-radius: 30px !important;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tech-tag i {
    color: var(--accent-green);
}

/* =========================================================================
   PAYMENT RADIO CARDS
   ========================================================================= */
.radio-card-content {
    background-color: var(--surface-dark-grey) !important;
    border: 2px solid var(--border-dark-grey);
    border-radius: 30px !important;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s ease;
}

.payment-radio-input:checked + .radio-card-content {
    border-color: var(--accent-green) !important;
    background-color: var(--secondary-dark-grey) !important;
    box-shadow: 0 0 20px rgba(0, 205, 118, 0.4) !important;
}

/* =========================================================================
   TABLES & INVOICE GRIDS
   ========================================================================= */
.payments-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.payments-table thead th {
    color: var(--accent-green) !important;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 12px 16px;
    border: none;
}

.payments-table tbody tr {
    background-color: var(--surface-dark-grey) !important;
}

.payments-table tbody td {
    padding: 16px;
    color: var(--text-white);
    border-top: 1px solid var(--border-dark-grey);
    border-bottom: 1px solid var(--border-dark-grey);
}

.payments-table tbody tr td:first-child {
    border-left: 1px solid var(--border-dark-grey);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.payments-table tbody tr td:last-child {
    border-right: 1px solid var(--border-dark-grey);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Status Badges */
.pop-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 30px !important;
    border: 1px solid transparent;
}

.badge-allocated {
    background-color: rgba(0, 205, 118, 0.2) !important;
    color: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
}

.badge-pending {
    background-color: rgba(254, 240, 138, 0.15) !important;
    color: #fef08a !important;
    border-color: #fef08a !important;
}

.badge-rejected {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: #f87171 !important;
}

.badge-unpaid {
    background-color: var(--surface-dark-grey) !important;
    color: var(--light-grey) !important;
    border-color: var(--border-dark-grey) !important;
}

.payment-channel-tag {
    background-color: var(--primary-black) !important;
    color: var(--text-white) !important;
    border: 1px solid var(--border-dark-grey);
    border-radius: 30px !important;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* =========================================================================
   CLIENT AREA SIDEBAR
   ========================================================================= */
.sidebar-panel {
    padding: 24px;
}

.profile-card {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-dark-grey);
}

.profile-avatar {
    width: 50px;
    height: 50px;
    background-color: var(--primary-black);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
    font-size: 1.2rem;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: var(--lighter-grey);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 30px !important;
    border: 1px solid transparent;
    transition: all 0.15s ease-in-out;
}

.sidebar-menu li a i {
    color: var(--accent-green);
}

.sidebar-menu li.active a,
.sidebar-menu li a:hover {
    background-color: var(--surface-dark-grey);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.sidebar-menu li.active a i,
.sidebar-menu li a:hover i {
    color: var(--text-white);
}

.menu-divider {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-dark-grey);
}

.menu-action-order {
    background-color: var(--accent-green) !important;
    color: var(--primary-black) !important;
    font-weight: 800 !important;
}

.menu-action-order:hover {
    background-color: var(--text-white) !important;
    color: var(--primary-black) !important;
}

.menu-action-logout {
    color: #f87171 !important;
}

.menu-action-logout:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
}

.sidebar-footer-note {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid var(--border-dark-grey);
    font-size: 0.78rem;
    color: var(--light-grey);
}

/* =========================================================================
   NOTIFICATIONS & ALERTS
   ========================================================================= */
.pop-alert {
    background-color: var(--surface-dark-grey) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--border-dark-grey);
    border-radius: 30px !important;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.pop-alert-success {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.2);
}

.pop-alert-error {
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
    margin-top: 90px;
    background-color: var(--secondary-dark-grey) !important;
    border-top: 2px solid var(--border-dark-grey);
    padding: 60px 24px 40px 24px;
}

.footer-pane-title {
    color: var(--accent-green) !important;
}

.footer-platform-description,
.footer-copyright-line {
    color: var(--light-grey) !important;
}

.floating-whatsapp-trigger {
    background-color: var(--primary-black) !important;
    color: var(--accent-green) !important;
    border: 2px solid var(--accent-green);
    box-shadow: 0 0 20px rgba(0, 205, 118, 0.5);
}

/* =========================================================================
   RESPONSIVE GRIDS
   ========================================================================= */
@media (max-width: 992px) {
    .details-split-grid,
    .hero-split-grid,
    .products-hero-split,
    .collage-split-grid,
    .json-split-grid,
    .blog-split-grid,
    .communication-split-grid,
    .billing-split-grid,
    .funnel-split-grid,
    .ads-split-grid,
    .seo-split-grid,
    .analytics-split-grid,
    .fluid-cta-wrap,
    .home-cta-wrap,
    .checkout-grid,
    .benefits-split-trilogy,
    .delivery-options-grid,
    .steps-grid {
        grid-template-columns: 1fr;
        flex-direction: column;
        text-align: center;
    }
}

.grid-two-columns {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 40px;
    align-items: start;
}

.tech-vector-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.vector-badge-lock {
    position: relative;
    background-color: var(--surface-dark-grey) !important;
    border: 1px solid var(--border-dark-grey);
    border-radius: 16px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: var(--text-white);
    font-size: 0.8rem;
    font-weight: 700;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.vector-badge-lock i {
    color: var(--accent-green);
    transition: transform 0.2s ease;
}

.vector-badge-lock:hover {
    transform: translateY(-3px);
    border-color: var(--accent-green);
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.3);
}

.vector-badge-lock:hover i {
    transform: scale(1.15);
}

@media (max-width: 768px) {
    .tech-vector-matrix {
        grid-template-columns: repeat(2, 1fr);
    }
}

/**
 * Mobile Navigation Drawer & Animated Toggle Button
 * Path: assets/css/style.css
 */

/* 1. Toggle Button (Hidden on Desktop, Visible on Tablets & Mobile) */
.mobile-nav-toggle {
    display: none;
    position: relative;
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--text-white, #ffffff);
    border: 2px solid var(--accent-green, #00CD76);
    font-size: 1.25rem;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 205, 118, 0.2);
}

.mobile-nav-toggle:hover {
    background-color: var(--primary-black, #000000);
    color: var(--accent-green, #00CD76);
    box-shadow: 0 0 18px rgba(0, 205, 118, 0.5);
    transform: translateY(-1px);
}

.mobile-nav-toggle:focus {
    outline: none;
}

/* 2. Responsive Mobile Drawer Rules */
@media (max-width: 992px) {
    /* Reveal the toggle button */
    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Fixed Off-Canvas Slide Drawer */
    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        background-color: var(--secondary-dark-grey, #121214);
        border-left: 2px solid var(--accent-green, #00CD76);
        padding: 90px 24px 40px 24px;
        box-shadow: -10px 0 35px rgba(0, 0, 0, 0.8), -2px 0 15px rgba(0, 205, 118, 0.2);
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        box-sizing: border-box;
        overflow-y: auto;
    }

    /* Active State (Triggered via JS) */
    .main-navigation.mobile-menu-active {
        right: 0;
    }

    /* Vertical Navigation Stack */
    .store-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .store-nav li {
        width: 100%;
    }

    /* Drawer Link Items */
    .store-nav li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--lighter-grey, #cbd5e1) !important;
        padding: 14px 18px;
        background-color: var(--surface-dark-grey, #1a1a1e);
        border: 1px solid var(--border-dark-grey, #27272a);
        border-radius: 16px !important;
        font-weight: 700;
        font-size: 0.95rem;
        text-transform: none !important;
        letter-spacing: normal;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
    }

    .store-nav li a:hover,
    .store-nav li.active a {
        background-color: var(--primary-black, #000000) !important;
        color: var(--accent-green, #00CD76) !important;
        border-color: var(--accent-green, #00CD76) !important;
        box-shadow: 0 0 15px rgba(0, 205, 118, 0.3);
        transform: translateX(4px);
    }

    /* Client Sign In Button in Mobile View */
    .client-signin-btn {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 10px;
    }

    /* Logout Trigger in Mobile View */
    .logout-nav-trigger {
        color: #f87171 !important;
        border-color: rgba(239, 68, 68, 0.2) !important;
    }

    .logout-nav-trigger:hover {
        background-color: rgba(239, 68, 68, 0.15) !important;
        border-color: #ef4444 !important;
        color: #fca5a5 !important;
        box-shadow: none !important;
    }
}

/**
 * Mobile Navigation Drawer & Animated Toggle Button
 * Path: assets/css/style.css
 */

/* 1. Toggle Button (Hidden on Desktop, Visible on Tablets & Mobile) */
.mobile-nav-toggle {
    display: none;
    position: relative;
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--text-white, #ffffff);
    border: 2px solid var(--accent-green, #00CD76);
    font-size: 1.25rem;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 205, 118, 0.2);
}

.mobile-nav-toggle:hover {
    background-color: var(--primary-black, #000000);
    color: var(--accent-green, #00CD76);
    box-shadow: 0 0 18px rgba(0, 205, 118, 0.5);
    transform: translateY(-1px);
}

.mobile-nav-toggle:focus {
    outline: none;
}

/* 2. Responsive Mobile Drawer Rules */
@media (max-width: 992px) {
    /* Reveal the toggle button */
    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Fixed Off-Canvas Slide Drawer */
    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        background-color: var(--secondary-dark-grey, #121214);
        border-left: 2px solid var(--accent-green, #00CD76);
        padding: 90px 24px 40px 24px;
        box-shadow: -10px 0 35px rgba(0, 0, 0, 0.8), -2px 0 15px rgba(0, 205, 118, 0.2);
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        box-sizing: border-box;
        overflow-y: auto;
    }

    /* Active State (Triggered via JS) */
    .main-navigation.mobile-menu-active {
        right: 0;
    }

    /* Vertical Navigation Stack */
    .store-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .store-nav li {
        width: 100%;
    }

    /* Drawer Link Items */
    .store-nav li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--lighter-grey, #cbd5e1) !important;
        padding: 14px 18px;
        background-color: var(--surface-dark-grey, #1a1a1e);
        border: 1px solid var(--border-dark-grey, #27272a);
        border-radius: 16px !important;
        font-weight: 700;
        font-size: 0.95rem;
        text-transform: none !important;
        letter-spacing: normal;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
    }

    .store-nav li a:hover,
    .store-nav li.active a {
        background-color: var(--primary-black, #000000) !important;
        color: var(--accent-green, #00CD76) !important;
        border-color: var(--accent-green, #00CD76) !important;
        box-shadow: 0 0 15px rgba(0, 205, 118, 0.3);
        transform: translateX(4px);
    }

    /* Client Sign In Button in Mobile View */
    .client-signin-btn {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 10px;
    }

    /* Logout Trigger in Mobile View */
    .logout-nav-trigger {
        color: #f87171 !important;
        border-color: rgba(239, 68, 68, 0.2) !important;
    }

    .logout-nav-trigger:hover {
        background-color: rgba(239, 68, 68, 0.15) !important;
        border-color: #ef4444 !important;
        color: #fca5a5 !important;
        box-shadow: none !important;
    }
}

/**
 * Floating WhatsApp Communication Trigger - Dark Neon Theme
 * Path: assets/css/style.css
 */

.floating-whatsapp-trigger {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #000000 !important;
    color: #00CD76 !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    text-decoration: none;
    z-index: 9999;
    background-clip: padding-box;
    border: 2px solid transparent !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
    animation: whatsapp-glow-pulse 2.5s infinite ease-in-out;
}

/* Circling glowing border gradient beam */
.floating-whatsapp-trigger::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from var(--angle), #00CD76, #052e16, #000000, #00CD76);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: spin-glow 3s linear infinite;
    pointer-events: none;
}

/* Hover dynamic scaling and high-intensity neon bloom */
.floating-whatsapp-trigger:hover {
    transform: scale(1.12) translateY(-3px);
    background-color: #00CD76 !important;
    color: #000000 !important;
    box-shadow: 0 0 30px rgba(0, 205, 118, 0.8), 0 0 60px rgba(0, 205, 118, 0.4) !important;
}

.floating-whatsapp-trigger:hover i {
    color: #000000 !important;
}

/* Pulsing radar ripple animation */
@keyframes whatsapp-glow-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 205, 118, 0.5), 0 0 15px rgba(0, 205, 118, 0.3);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(0, 205, 118, 0), 0 0 25px rgba(0, 205, 118, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 205, 118, 0), 0 0 15px rgba(0, 205, 118, 0.3);
    }
}

/* Mobile viewport adjustment */
@media (max-width: 576px) {
    .floating-whatsapp-trigger {
        bottom: 20px;
        right: 20px;
        width: 52px;
        height: 52px;
        font-size: 1.55rem;
    }
}

/**
 * Split Hero Section Module - Dark Neon Theme
 * Path: assets/css/style.css
 */

.split-hero-container {
    background-color: var(--primary-black, #000000);
    padding: 80px 24px;
    margin-top: -40px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    box-sizing: border-box;
    width: 100%;
}

.hero-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 50px;
    align-items: center;
}

/* --- Left Column: Content & Specifications --- */
.hero-text-pane {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.hero-pre-badge {
    align-self: flex-start;
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--accent-green, #00CD76);
    border: 1px solid var(--accent-green, #00CD76);
    padding: 6px 16px;
    border-radius: 30px !important;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.2);
}

.hero-pre-badge i {
    color: var(--accent-green, #00CD76);
}

.hero-split-title {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 18px 0;
}

.hero-split-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-white, #ffffff);
    opacity: 0.9;
    font-weight: 500;
    margin: 0 0 32px 0;
}

/* Call to Action Actions */
.hero-action-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 35px;
}

/* Technology Stack Specifications Matrix */
.hero-tech-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-dark-grey, #27272a);
}

.tech-tag {
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--lighter-grey, #cbd5e1);
    border: 1px solid var(--border-dark-grey, #27272a);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 30px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.tech-tag i {
    color: var(--accent-green, #00CD76);
}

.tech-tag:hover {
    border-color: var(--accent-green, #00CD76);
    color: var(--text-white, #ffffff);
}

/* --- Right Column: Visual Card Frame --- */
.hero-visual-pane {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-card-frame {
    position: relative;
    width: 100%;
    border-radius: 30px !important;
    overflow: hidden;
    background-color: var(--secondary-dark-grey, #121214);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
}

.hero-showcase-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 28px;
}

/* Floating Overlay Badge */
.card-glass-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.85);
    border: 1px solid var(--accent-green, #00CD76);
    backdrop-filter: blur(8px);
    color: var(--text-white, #ffffff);
    border-radius: 30px !important;
    padding: 8px 18px;
    font-size: 0.8rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.3);
}

.card-glass-badge i {
    color: var(--accent-green, #00CD76);
}

/* --- Responsive Tablet & Mobile Scaling --- */
@media (max-width: 992px) {
    .split-hero-container {
        padding: 60px 20px;
    }

    .hero-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .hero-text-pane {
        align-items: center;
        text-align: center;
    }

    .hero-pre-badge {
        align-self: center;
    }

    .hero-split-title {
        font-size: 2.2rem;
    }

    .hero-action-row,
    .hero-tech-row {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .hero-split-title {
        font-size: 1.85rem;
    }

    .hero-action-row {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-action-row .btn {
        width: 100%;
    }

    .card-glass-badge {
        bottom: 12px;
        left: 12px;
        padding: 6px 12px;
        font-size: 0.72rem;
    }
}

.products-hero-container.dark-hero-bg {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 80px 24px;
    box-sizing: border-box;
    width: 100%;
}

/**
 * Products Hero & Deployment Summary Module
 * Path: assets/css/style.css
 */


.products-hero-split {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 50px;
    align-items: center;
}

/* Left Content Styles */
.products-hero-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.dark-mode-label {
    align-self: flex-start;
    background-color: var(--surface-dark-grey, #1a1a1e) !important;
    color: var(--accent-green, #00CD76) !important;
    border: 1px solid var(--accent-green, #00CD76) !important;
    padding: 6px 16px;
    border-radius: 30px !important;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.2);
}

.dark-mode-label i {
    color: var(--accent-green, #00CD76);
}

.products-hero-title {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 18px 0;
}

.products-hero-lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-white, #ffffff);
    opacity: 0.9;
    font-weight: 500;
    margin: 0 0 32px 0;
}

/* Infrastructure Flex Badges */
.infrastructure-flex-badges {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.infra-badge {
    position: relative;
    background-color: var(--secondary-dark-grey, #121214) !important;
    border: 2px solid transparent !important;
    border-radius: 20px !important;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-white, #ffffff);
    background-clip: padding-box;
    z-index: 1;
}

.infra-badge i {
    font-size: 1.2rem;
    color: var(--accent-green, #00CD76);
    flex-shrink: 0;
}

/* Right Metric Summary Card */
.products-hero-visual {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.value-summary-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background-color: var(--secondary-dark-grey, #121214) !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    padding: 35px 30px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
    background-clip: padding-box;
    z-index: 1;
}

.dark-label-accent {
    color: var(--accent-green, #00CD76) !important;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding-bottom: 10px;
}

.hero-metric-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.hero-metric-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.metric-icon.icon-dark-accent {
    width: 46px;
    height: 46px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--accent-green, #00CD76);
    border: 1px solid var(--accent-green, #00CD76);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.25);
}

.metric-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-item-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-white, #ffffff) !important;
    margin: 0;
}

.text-muted-dark {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--light-grey, #94a3b8) !important;
    margin: 0;
    font-weight: 500;
}

/* --- Responsive Tablet & Mobile Scaling --- */
@media (max-width: 992px) {
    .products-hero-split {
        grid-template-columns: 1fr;
        gap: 45px;
        text-align: center;
    }

    .products-hero-content {
        align-items: center;
        text-align: center;
    }

    .dark-mode-label {
        align-self: center;
    }

    .products-hero-title {
        font-size: 2.2rem;
    }

    .products-hero-visual {
        justify-content: center;
    }

    .value-summary-card {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .products-hero-container.dark-hero-bg {
        padding: 60px 16px;
    }

    .products-hero-title {
        font-size: 1.85rem;
    }

    .infra-badge {
        font-size: 0.85rem;
        padding: 12px 16px;
    }

    .value-summary-card {
        padding: 25px 20px;
    }
}

/**
 * 3-Step Ordering System Module - Dark Neon Theme
 * Path: assets/css/style.css
 */

.ordering-steps-container {
    background-color: var(--secondary-dark-grey, #121214) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 80px 24px;
    box-sizing: border-box;
    width: 100%;
}

.steps-header-block {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
}

.steps-pre-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--surface-dark-grey, #1a1a1e) !important;
    color: var(--accent-green, #00CD76) !important;
    border: 1px solid var(--accent-green, #00CD76) !important;
    padding: 6px 16px;
    border-radius: 30px !important;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.2);
}

.steps-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 14px 0;
}

.steps-subtitle {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--light-grey, #94a3b8) !important;
    font-weight: 500;
    margin: 0;
}

/* Steps Grid */
.steps-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
}

/* Step Card */
.step-card {
    position: relative;
    background-color: var(--surface-dark-grey, #1a1a1e) !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    padding: 45px 30px 35px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    z-index: 1;
}

.step-badge {
    position: absolute;
    top: -18px;
    left: 30px;
    width: 38px;
    height: 38px;
    background-color: var(--primary-black, #000000);
    color: var(--accent-green, #00CD76);
    border: 2px solid var(--accent-green, #00CD76);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.4);
    z-index: 2;
}

.step-icon-wrapper {
    width: 72px;
    height: 72px;
    background-color: var(--secondary-dark-grey, #121214);
    color: var(--accent-green, #00CD76);
    border: 1px solid var(--accent-green, #00CD76);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 22px;
    box-shadow: 0 0 18px rgba(0, 205, 118, 0.25);
}

.step-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 12px 0;
    letter-spacing: normal;
}

.step-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-white, #ffffff);
    opacity: 0.88;
    font-weight: 500;
    margin: 0;
}

/* Step Connector Arrow */
.step-connector {
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--primary-black, #000000);
    color: var(--accent-green, #00CD76);
    border: 2px solid var(--accent-green, #00CD76);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.35);
}

/* --- Responsive Tablet & Mobile Scaling --- */
@media (max-width: 992px) {
    .ordering-steps-container {
        padding: 60px 20px;
    }

    .steps-main-title {
        font-size: 2.1rem;
    }

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

    .step-connector {
        right: auto;
        bottom: -28px;
        top: auto;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
}

@media (max-width: 576px) {
    .steps-main-title {
        font-size: 1.8rem;
    }

    .step-card {
        padding: 40px 20px 30px 20px;
    }
}

/**
 * Solid Black Card Surface with Animated Circling Border Glow Only
 * Path: assets/css/style.css
 */

/* 1. Solid Black Card Backgrounds */
.package-card,
.benefit-pillar-card,
.step-card,
.delivery-option-card,
.promo-banner-card,
.promo-feature-box,
.value-summary-card,
.json-media-frame,
.blog-media-frame,
.communication-media-frame,
.billing-media-frame,
.funnel-media-frame,
.ads-media-frame,
.seo-media-frame,
.analytics-media-frame,
.collage-layer,
.hero-card-frame,
.payments-card-wrapper,
.summary-card,
.checkout-form-card,
.billing-card-wrapper,
.pop-viewer-card,
.sidebar-panel,
.whatsapp-pop-banner,
.infra-badge {
    position: relative;
    background-color: #000000 !important;   /* Solid Black Interior */
    color: #ffffff !important;              /* Pure White Text */
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    background-clip: padding-box;
    z-index: 1;
}

/* 2. Confine Rotating Glow Exclusively to the 2px Border Track */
.package-card::before,
.benefit-pillar-card::before,
.step-card::before,
.delivery-option-card::before,
.promo-banner-card::before,
.promo-feature-box::before,
.value-summary-card::before,
.json-media-frame::before,
.blog-media-frame::before,
.communication-media-frame::before,
.billing-media-frame::before,
.funnel-media-frame::before,
.ads-media-frame::before,
.seo-media-frame::before,
.analytics-media-frame::before,
.collage-layer::before,
.hero-card-frame::before,
.payments-card-wrapper::before,
.summary-card::before,
.checkout-form-card::before,
.billing-card-wrapper::before,
.pop-viewer-card::before,
.sidebar-panel::before,
.whatsapp-pop-banner::before,
.infra-badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    padding: 2px;
    background: conic-gradient(from var(--angle), #00CD76, #052e16, #000000, #00CD76);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: spin-glow 4s linear infinite;
    pointer-events: none;
}

/* 3. Disable Outer Diffuse Bloom Bleed */
.package-card::after,
.benefit-pillar-card::after,
.step-card::after,
.delivery-option-card::after,
.promo-banner-card::after,
.value-summary-card::after,
.checkout-form-card::after,
.summary-card::after,
.sidebar-panel::after,
.pop-viewer-card::after {
    display: none !important;
    content: none !important;
}

/* 4. Enforce Pure White Text Across Card Child Elements */
.package-card p,
.benefit-pillar-card p,
.step-card p,
.delivery-option-card p,
.promo-feature-box p,
.value-summary-card p,
.summary-card p,
.step-description,
.option-description,
.feature-box-desc,
.pillar-description,
.package-description-limit {
    color: #ffffff !important;
    opacity: 0.95;
}

/**
 * Global Dark High-Tech Neon Stylesheet
 * Primary: #000000 | Secondary/Surface: #121214 / #1a1a1e | Light Grey: #94a3b8
 * Accent: #00CD76 (Vibrant Bolt Taxi Green) | Text: #ffffff (White)
 * Path: assets/css/style.css
 */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin-glow {
    to {
        --angle: 360deg;
    }
}

@keyframes pulse-glow-subtle {
    0%, 100% {
        box-shadow: 0 0 15px rgba(0, 205, 118, 0.25), 0 0 30px rgba(0, 205, 118, 0.1);
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 205, 118, 0.45), 0 0 50px rgba(0, 205, 118, 0.2);
    }
}

@keyframes whatsapp-glow-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 205, 118, 0.5), 0 0 15px rgba(0, 205, 118, 0.3);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(0, 205, 118, 0), 0 0 25px rgba(0, 205, 118, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 205, 118, 0), 0 0 15px rgba(0, 205, 118, 0.3);
    }
}

:root {
    --primary-black: #000000;
    --secondary-dark-grey: #121214;
    --surface-dark-grey: #1a1a1e;
    --border-dark-grey: #27272a;
    --light-grey: #94a3b8;
    --lighter-grey: #cbd5e1;
    --accent-green: #00CD76;
    --text-white: #ffffff;

    --success-bg: #00CD76;
    --danger-bg: #b91c1c;
    --warning-bg: #121214;
}

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

body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Google Sans", "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--text-white);
    background-color: var(--primary-black);
}

.container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0;
    padding: 0;
    background: transparent !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

/* =========================================================================
   HEADINGS & GLOBAL TYPOGRAPHY
   ========================================================================= */
h1, h2, h3, h4, h5, h6,
.hero-split-title,
.products-hero-title,
.steps-main-title,
.promo-title,
.pillar-title,
.step-title,
.collage-main-title,
.json-main-title,
.blog-main-title,
.communication-main-title,
.billing-main-title,
.funnel-main-title,
.ads-main-title,
.seo-main-title,
.analytics-main-title,
.cta-message-block h2,
.home-cta-message h2,
.details-main-title,
.details-section-heading,
.summary-card-title {
    color: var(--accent-green) !important;
    font-weight: 900;
    text-transform: none;
    letter-spacing: normal;
}

p, span, li, small, strong, td, th, div, label, input, textarea, select {
    color: var(--text-white);
}

p {
    opacity: 0.9;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 500;
}

.text-muted, .text-muted-dark, .text-slate {
    color: var(--light-grey) !important;
}

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

/* =========================================================================
   CIRCLING GLOW ANIMATION (SOLID BLACK CARDS & CONTAINERS)
   ========================================================================= */
.package-card,
.benefit-pillar-card,
.step-card,
.delivery-option-card,
.promo-banner-card,
.promo-feature-box,
.value-summary-card,
.json-media-frame,
.blog-media-frame,
.communication-media-frame,
.billing-media-frame,
.funnel-media-frame,
.ads-media-frame,
.seo-media-frame,
.analytics-media-frame,
.collage-layer,
.hero-card-frame,
.payments-card-wrapper,
.summary-card,
.checkout-form-card,
.billing-card-wrapper,
.pop-viewer-card,
.sidebar-panel,
.whatsapp-pop-banner,
.infra-badge {
    position: relative;
    background-color: var(--primary-black) !important;
    color: var(--text-white) !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    background-clip: padding-box;
    z-index: 1;
}

.package-card::before,
.benefit-pillar-card::before,
.step-card::before,
.delivery-option-card::before,
.promo-banner-card::before,
.promo-feature-box::before,
.value-summary-card::before,
.json-media-frame::before,
.blog-media-frame::before,
.communication-media-frame::before,
.billing-media-frame::before,
.funnel-media-frame::before,
.ads-media-frame::before,
.seo-media-frame::before,
.analytics-media-frame::before,
.collage-layer::before,
.hero-card-frame::before,
.payments-card-wrapper::before,
.summary-card::before,
.checkout-form-card::before,
.billing-card-wrapper::before,
.pop-viewer-card::before,
.sidebar-panel::before,
.whatsapp-pop-banner::before,
.infra-badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    padding: 2px;
    background: conic-gradient(from var(--angle), #00CD76, #052e16, #000000, #00CD76);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: spin-glow 4s linear infinite;
    pointer-events: none;
}

/* =========================================================================
   CIRCLING GLOW ANIMATED BUTTONS
   ========================================================================= */
.btn,
.btn-white,
.btn-secondary,
.btn-dark-cta,
.btn-dark-launch,
.btn-hero-cta,
.btn-promo-cta,
.client-signin-btn,
.btn-dark-auth,
button[type="submit"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--primary-black) !important;
    color: var(--text-white) !important;
    padding: 14px 32px;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    background-clip: padding-box;
    z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: pulse-glow-subtle 3s infinite ease-in-out;
}

.btn::before,
.btn-white::before,
.btn-secondary::before,
.btn-dark-cta::before,
.btn-dark-launch::before,
.btn-hero-cta::before,
.btn-promo-cta::before,
.client-signin-btn::before,
.btn-dark-auth::before,
button[type="submit"]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    padding: 2px;
    background: conic-gradient(from var(--angle), #00CD76, #052e16, #000000, #00CD76);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: spin-glow 3s linear infinite;
    pointer-events: none;
}

.btn:hover,
.btn-white:hover,
.btn-secondary:hover,
.btn-dark-cta:hover,
.btn-dark-launch:hover,
.btn-hero-cta:hover,
.btn-promo-cta:hover,
.client-signin-btn:hover {
    transform: translateY(-2px);
    color: var(--accent-green) !important;
    box-shadow: 0 0 25px rgba(0, 205, 118, 0.6) !important;
    border-color: transparent !important;
}

.btn i {
    color: var(--accent-green);
    margin-right: 4px;
}

/* =========================================================================
   NAVIGATION HEADER
   ========================================================================= */
.site-header { 
    background-color: var(--secondary-dark-grey);
    border-bottom: 2px solid var(--border-dark-grey);
    margin: 0 0 40px 0 !important; 
    padding: 20px 0; 
}

.header-wrap { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 24px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.brand-logo { 
    font-size: 1.4rem; 
    font-weight: 900; 
    color: var(--text-white);
    text-decoration: none; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}

.brand-logo i {
    color: var(--accent-green);
}

.header-corporate-logo {
    max-height: 40px;
    max-width: 160px;
    object-fit: contain;
}

.store-nav { 
    display: flex; 
    align-items: center; 
    gap: 24px; 
    list-style: none; 
}

.store-nav a { 
    color: var(--lighter-grey);
    text-decoration: none; 
    font-weight: 700; 
    font-size: 0.95rem; 
    transition: color 0.15s ease;
}

.store-nav a:hover, 
.store-nav li.active a { 
    color: var(--accent-green);
}

.cart-badge { 
    background: var(--accent-green);
    color: var(--primary-black); 
    border-radius: 999px; 
    padding: 2px 8px; 
    font-size: 0.75rem; 
    font-weight: 900; 
    margin-left: 6px;
}

.user-pill { 
    background-color: var(--primary-black); 
    padding: 8px 18px; 
    border-radius: 30px !important; 
    font-size: 0.85rem; 
    font-weight: 800; 
    color: var(--text-white) !important; 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    text-decoration: none !important;
    border: 1px solid var(--border-dark-grey);
}

.user-pill:hover {
    background-color: var(--surface-dark-grey) !important;
    color: var(--accent-green) !important;
    border-color: var(--accent-green);
}

.logout-nav-trigger {
    color: var(--light-grey) !important;
}

.logout-nav-trigger:hover {
    color: var(--accent-green) !important;
}

/* =========================================================================
   MOBILE TOGGLE MENU & DRAWER
   ========================================================================= */
.mobile-nav-toggle {
    display: none;
    position: relative;
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--text-white, #ffffff);
    border: 2px solid var(--accent-green, #00CD76);
    font-size: 1.25rem;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 205, 118, 0.2);
}

.mobile-nav-toggle:hover {
    background-color: var(--primary-black, #000000);
    color: var(--accent-green, #00CD76);
    box-shadow: 0 0 18px rgba(0, 205, 118, 0.5);
}

@media (max-width: 992px) {
    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        max-width: 85vw;
        height: 100vh;
        background-color: var(--secondary-dark-grey, #121214);
        border-left: 2px solid var(--accent-green, #00CD76);
        padding: 90px 24px 40px 24px;
        box-shadow: -10px 0 35px rgba(0, 0, 0, 0.8), -2px 0 15px rgba(0, 205, 118, 0.2);
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        box-sizing: border-box;
        overflow-y: auto;
    }

    .main-navigation.mobile-menu-active {
        right: 0;
    }

    .store-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .store-nav li {
        width: 100%;
    }

    .store-nav li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--lighter-grey, #cbd5e1) !important;
        padding: 14px 18px;
        background-color: var(--surface-dark-grey, #1a1a1e);
        border: 1px solid var(--border-dark-grey, #27272a);
        border-radius: 16px !important;
        font-weight: 700;
        font-size: 0.95rem;
        text-transform: none !important;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
    }

    .store-nav li a:hover,
    .store-nav li.active a {
        background-color: var(--primary-black, #000000) !important;
        color: var(--accent-green, #00CD76) !important;
        border-color: var(--accent-green, #00CD76) !important;
        box-shadow: 0 0 15px rgba(0, 205, 118, 0.3);
        transform: translateX(4px);
    }
}

/* =========================================================================
   FORM INPUTS & CONTROLS
   ========================================================================= */
.form-group {
    margin-bottom: 25px;
}

label, .form-section-label {
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
    font-size: 0.85rem;
    color: var(--lighter-grey);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select,
textarea,
.form-control {
    background-color: var(--surface-dark-grey) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--border-dark-grey) !important;
    border-radius: 30px !important;
    padding: 14px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea,
textarea.form-control {
    border-radius: 20px !important;
    min-height: 120px;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.4) !important;
}

input[type="file"] {
    padding: 10px 22px;
    background-color: transparent;
    cursor: pointer;
}

/* =========================================================================
   SECTION BACKGROUNDS & LAYOUT STRATA (TOP BORDERS REMOVED)
   ========================================================================= */
.split-hero-container,
.platform-benefits-container,
.delivery-spec-container,
.collage-showcase-container,
.json-blocks-container,
.blog-showcase-container,
.communication-showcase-container,
.billing-showcase-container,
.marketing-funnel-container,
.ads-api-container,
.seo-booster-container,
.analytics-showcase-container,
.products-hero-container.dark-hero-bg,
.corporate-promo-container,
.ordering-steps-container {
    background-color: var(--primary-black) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 80px 24px;
    box-sizing: border-box;
    width: 100%;
}

.corporate-promo-container,
.ordering-steps-container {
    background-color: var(--secondary-dark-grey) !important;
}

.package-grid {
    background-color: var(--primary-black) !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    padding: 80px 24px;
    box-sizing: border-box;
}

/* Fluid Call-to-Action Banners */
.fluid-software-cta-banner,
.home-acceleration-cta-banner {
    background-color: var(--secondary-dark-grey) !important;
    border-top: none !important;
    border-bottom: 2px solid var(--accent-green);
    box-shadow: 0 0 35px rgba(0, 205, 118, 0.2);
    padding: 80px 24px;
    box-sizing: border-box;
}

.fluid-cta-wrap,
.home-cta-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* =========================================================================
   CARDS, BADGES & INTERNALS
   ========================================================================= */
.pricing-matrix-box {
    background: var(--surface-dark-grey) !important;
    border: 1px solid var(--border-dark-grey);
    border-radius: 16px;
    padding: 16px 20px;
    margin: 15px 0 20px 0;
}

.display-price-success {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--accent-green) !important;
    display: block;
}

.display-price-primary {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-white) !important;
    display: block;
}

.original-value-line {
    color: var(--light-grey) !important;
    text-decoration: line-through;
    font-size: 0.85rem;
    display: block;
}

.deposit-now-callout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 800;
    margin-top: 6px;
    letter-spacing: normal;
    text-transform: none;
}

.deposit-now-callout.text-green {
    color: var(--accent-green) !important;
}

.deposit-now-callout.text-black {
    color: var(--text-white) !important;
}

.balance-due-notice {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--light-grey) !important;
    display: block;
    margin-top: 4px;
}

.balance-due-notice.warning-orange {
    color: #fbbf24 !important;
}

.steps-pre-label,
.hero-pre-badge,
.cta-pre-tag,
.home-cta-tag,
.dark-mode-label,
.card-promo-tag,
.promo-badge {
    background-color: var(--surface-dark-grey) !important;
    color: var(--accent-green) !important;
    border: 1px solid var(--accent-green) !important;
    padding: 6px 16px;
    border-radius: 30px !important;
    font-size: 0.75rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 10px rgba(0, 205, 118, 0.2);
}

.fallback-card-icon,
.step-icon-wrapper,
.option-icon-frame,
.feature-box-icon,
.metric-icon.icon-dark-accent {
    background-color: var(--surface-dark-grey) !important;
    color: var(--accent-green) !important;
    border: 1px solid var(--accent-green) !important;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-tag {
    background-color: var(--surface-dark-grey) !important;
    color: var(--text-white) !important;
    border: 1px solid var(--border-dark-grey);
    border-radius: 30px !important;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tech-tag i {
    color: var(--accent-green);
}

/* =========================================================================
   PROMO FEATURES GRID (75% OFF SECTION)
   ========================================================================= */
.promo-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.promo-feature-box {
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.promo-feature-box .feature-box-icon {
    width: 54px;
    height: 54px;
    font-size: 1.4rem;
    margin-bottom: 18px;
}

.promo-feature-box .feature-box-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.promo-feature-box .feature-box-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-white);
    opacity: 0.9;
}

/* =========================================================================
   PAYMENT RADIO CARDS
   ========================================================================= */
.radio-card-content {
    background-color: var(--surface-dark-grey) !important;
    border: 2px solid var(--border-dark-grey);
    border-radius: 30px !important;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s ease;
}

.payment-radio-input:checked + .radio-card-content {
    border-color: var(--accent-green) !important;
    background-color: var(--secondary-dark-grey) !important;
    box-shadow: 0 0 20px rgba(0, 205, 118, 0.4) !important;
}

/* =========================================================================
   TABLES & INVOICE GRIDS
   ========================================================================= */
.payments-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.payments-table thead th {
    color: var(--accent-green) !important;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 12px 16px;
    border: none;
}

.payments-table tbody tr {
    background-color: var(--surface-dark-grey) !important;
}

.payments-table tbody td {
    padding: 16px;
    color: var(--text-white);
    border-top: 1px solid var(--border-dark-grey);
    border-bottom: 1px solid var(--border-dark-grey);
}

.payments-table tbody tr td:first-child {
    border-left: 1px solid var(--border-dark-grey);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.payments-table tbody tr td:last-child {
    border-right: 1px solid var(--border-dark-grey);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* Status Badges */
.pop-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 30px !important;
    border: 1px solid transparent;
}

.badge-allocated {
    background-color: rgba(0, 205, 118, 0.2) !important;
    color: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
}

.badge-pending {
    background-color: rgba(254, 240, 138, 0.15) !important;
    color: #fef08a !important;
    border-color: #fef08a !important;
}

.badge-rejected {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: #f87171 !important;
}

.badge-unpaid {
    background-color: var(--surface-dark-grey) !important;
    color: var(--light-grey) !important;
    border-color: var(--border-dark-grey) !important;
}

.payment-channel-tag {
    background-color: var(--primary-black) !important;
    color: var(--text-white) !important;
    border: 1px solid var(--border-dark-grey);
    border-radius: 30px !important;
    padding: 4px 12px;
    font-size: 0.8rem;
    font-weight: 700;
}

/* =========================================================================
   CLIENT AREA SIDEBAR
   ========================================================================= */
.sidebar-panel {
    padding: 24px;
}

.profile-card {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-dark-grey);
}

.profile-avatar {
    width: 50px;
    height: 50px;
    background-color: var(--primary-black);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px auto;
    font-size: 1.2rem;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: var(--lighter-grey);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 30px !important;
    border: 1px solid transparent;
    transition: all 0.15s ease-in-out;
}

.sidebar-menu li a i {
    color: var(--accent-green);
}

.sidebar-menu li.active a,
.sidebar-menu li a:hover {
    background-color: var(--surface-dark-grey);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.sidebar-menu li.active a i,
.sidebar-menu li a:hover i {
    color: var(--text-white);
}

.menu-divider {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-dark-grey);
}

.menu-action-order {
    background-color: var(--accent-green) !important;
    color: var(--primary-black) !important;
    font-weight: 800 !important;
}

.menu-action-order:hover {
    background-color: var(--text-white) !important;
    color: var(--primary-black) !important;
}

.menu-action-logout {
    color: #f87171 !important;
}

.menu-action-logout:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
}

.sidebar-footer-note {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid var(--border-dark-grey);
    font-size: 0.78rem;
    color: var(--light-grey);
}

/* =========================================================================
   NOTIFICATIONS & ALERTS
   ========================================================================= */
.pop-alert {
    background-color: var(--surface-dark-grey) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--border-dark-grey);
    border-radius: 30px !important;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
}

.pop-alert-success {
    border-color: var(--accent-green) !important;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.2);
}

.pop-alert-error {
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

/* =========================================================================
   FOOTER & TECHNOLOGY MATRIX
   ========================================================================= */
.site-footer {
    background-color: var(--secondary-dark-grey) !important;
    border-top: 2px solid var(--border-dark-grey);
    padding: 60px 24px 40px 24px;
}

.footer-pane-title {
    color: var(--accent-green) !important;
    margin-bottom: 16px;
}

.footer-platform-description,
.footer-copyright-line {
    color: var(--light-grey) !important;
}

.grid-two-columns {
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 40px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.tech-vector-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.vector-badge-lock {
    position: relative;
    background-color: var(--surface-dark-grey) !important;
    border: 1px solid var(--border-dark-grey);
    border-radius: 16px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: var(--text-white);
    font-size: 0.8rem;
    font-weight: 700;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.vector-badge-lock i {
    color: var(--accent-green);
    transition: transform 0.2s ease;
}

.vector-badge-lock:hover {
    transform: translateY(-3px);
    border-color: var(--accent-green);
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.3);
}

.vector-badge-lock:hover i {
    transform: scale(1.15);
}

/* =========================================================================
   FLOATING WHATSAPP TRIGGER
   ========================================================================= */
.floating-whatsapp-trigger {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--primary-black) !important;
    color: var(--accent-green) !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    text-decoration: none;
    z-index: 9999;
    background-clip: padding-box;
    border: 2px solid transparent !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
    animation: whatsapp-glow-pulse 2.5s infinite ease-in-out;
}

.floating-whatsapp-trigger::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from var(--angle), #00CD76, #052e16, #000000, #00CD76);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: spin-glow 3s linear infinite;
    pointer-events: none;
}

.floating-whatsapp-trigger:hover {
    transform: scale(1.12) translateY(-3px);
    background-color: var(--accent-green) !important;
    color: var(--primary-black) !important;
    box-shadow: 0 0 30px rgba(0, 205, 118, 0.8), 0 0 60px rgba(0, 205, 118, 0.4) !important;
}

.floating-whatsapp-trigger:hover i {
    color: var(--primary-black) !important;
}

/* =========================================================================
   RESPONSIVE LAYOUT OVERRIDES
   ========================================================================= */
@media (max-width: 992px) {
    .details-split-grid,
    .hero-split-grid,
    .products-hero-split,
    .collage-split-grid,
    .json-split-grid,
    .blog-split-grid,
    .communication-split-grid,
    .billing-split-grid,
    .funnel-split-grid,
    .ads-split-grid,
    .seo-split-grid,
    .analytics-split-grid,
    .fluid-cta-wrap,
    .home-cta-wrap,
    .checkout-grid,
    .benefits-split-trilogy,
    .delivery-options-grid,
    .steps-grid,
    .grid-two-columns {
        grid-template-columns: 1fr;
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .floating-whatsapp-trigger {
        bottom: 20px;
        right: 20px;
        width: 52px;
        height: 52px;
        font-size: 1.55rem;
    }

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

/**
 * Corporate CMS Promo Banner Card - Center Aligned with Internal Padding
 * Path: assets/css/style.css
 */

.promo-banner-card {
    padding: 60px 40px !important;              /* Generous internal padding */
    display: flex;
    flex-direction: column;
    align-items: center;                        /* Centers child flex items horizontally */
    text-align: center;                         /* Centers inline text */
    max-width: 1000px;
    margin: 0 auto 50px auto;                  /* Centers the card itself horizontally */
    box-sizing: border-box;
}

.promo-badge {
    margin-bottom: 20px;
}

.promo-title {
    margin: 0 0 16px 0;
    max-width: 800px;
}

.promo-subtitle {
    max-width: 680px;                           /* Limits line length for clean centered reading */
    margin: 0 auto 30px auto;
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Responsive adjustment for mobile viewports */
@media (max-width: 768px) {
    .promo-banner-card {
        padding: 40px 20px !important;
    }
}

.btn-promo-cta {
    margin-top: 15px; /* Adds clear separation below pricing wrap */
}

/**
 * Platform Benefits Trilogy Module - Dark Neon Theme
 * Path: assets/css/style.css
 */

.platform-benefits-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 80px 24px;
    box-sizing: border-box;
    width: 100%;
}

.benefits-split-trilogy {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.benefit-pillar-card {
    position: relative;
    background-color: var(--primary-black, #000000) !important;
    color: var(--text-white, #ffffff) !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    box-sizing: border-box;
    background-clip: padding-box;
    z-index: 1;
}

.pillar-accent-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 18px;
    padding: 6px 14px;
    border-radius: 30px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
}

.pillar-accent-tag.text-green {
    color: var(--accent-green, #00CD76) !important;
    border-color: var(--accent-green, #00CD76);
}

.pillar-accent-tag.text-black {
    color: var(--text-white, #ffffff) !important;
    border-color: var(--accent-green, #00CD76);
}

.pillar-title {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 16px 0;
}

.pillar-description {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0 0 28px 0;
}

.pillar-checklist {
    list-style: none;
    padding: 0;
    margin: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.pillar-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--lighter-grey, #cbd5e1) !important;
}

.pillar-checklist li i {
    color: var(--accent-green, #00CD76);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

@media (max-width: 992px) {
    .benefits-split-trilogy {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .benefit-pillar-card {
        padding: 35px 25px;
    }
}

/**
 * Delivery Time Frame & Hosting Specs Module - Dark Neon Theme
 * Path: assets/css/style.css
 */

.delivery-spec-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 80px 24px;
    box-sizing: border-box;
    width: 100%;
}

.delivery-options-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.delivery-option-card {
    position: relative;
    background-color: var(--primary-black, #000000) !important;
    color: var(--text-white, #ffffff) !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    padding: 45px 30px 35px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    background-clip: padding-box;
    z-index: 1;
}

.delivery-option-card .option-icon-frame {
    width: 72px;
    height: 72px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--accent-green, #00CD76);
    border: 1px solid var(--accent-green, #00CD76);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 22px;
    box-shadow: 0 0 18px rgba(0, 205, 118, 0.25);
    flex-shrink: 0;
}

.delivery-option-card h3 {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 14px 0;
}

.delivery-option-card .option-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 992px) {
    .delivery-options-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .delivery-option-card {
        padding: 35px 25px;
    }
}

/**
 * Website Packages Presentation Grid Matrix (#stacks) - Dark Neon Theme
 * Path: assets/css/style.css
 */

.package-grid {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 36px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
    box-sizing: border-box;
    width: 100%;
}

/* Package Card Surface */
.package-card {
    position: relative;
    background-color: var(--primary-black, #000000) !important;
    color: var(--text-white, #ffffff) !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    padding: 45px 30px 35px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    background-clip: padding-box;
    z-index: 1;
    transition: transform 0.2s ease;
}

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

/* Circling Animated Border Track */
.package-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    padding: 2px;
    background: conic-gradient(from var(--angle), #00CD76, #052e16, #000000, #00CD76);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: spin-glow 4s linear infinite;
    pointer-events: none;
}

/* Badges & Icons */
.card-promo-tag {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--surface-dark-grey, #1a1a1e) !important;
    color: var(--accent-green, #00CD76) !important;
    border: 1px solid var(--accent-green, #00CD76) !important;
    padding: 5px 16px;
    border-radius: 30px !important;
    font-size: 0.75rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.35);
    white-space: nowrap;
    text-transform: none;
}

.fallback-card-icon {
    width: 72px;
    height: 72px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--accent-green, #00CD76);
    border: 1px solid var(--accent-green, #00CD76);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    margin: 10px auto 20px auto;
    box-shadow: 0 0 16px rgba(0, 205, 118, 0.25);
    flex-shrink: 0;
}

/* Card Headings & Descriptions */
.package-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.package-description-limit {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin-bottom: 24px;
    min-height: 72px;
}

/* Pricing Matrix Sub-Panel */
.pricing-matrix-box {
    width: 100%;
    background: var(--surface-dark-grey, #1a1a1e) !important;
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 20px;
    padding: 18px 20px;
    margin: 0 0 25px 0;
    text-align: left;
    box-sizing: border-box;
}

.original-value-line {
    font-size: 0.85rem;
    color: var(--light-grey, #94a3b8) !important;
    text-decoration: line-through;
    display: block;
    font-weight: 600;
}

.display-price-success {
    font-size: 1.65rem;
    font-weight: 900;
    color: var(--accent-green, #00CD76) !important;
    display: block;
    line-height: 1.2;
    margin-top: 4px;
}

.display-price-primary {
    font-size: 1.65rem;
    font-weight: 900;
    color: var(--text-white, #ffffff) !important;
    display: block;
    line-height: 1.2;
    margin-top: 4px;
}

.deposit-now-callout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 800;
    margin-top: 8px;
    letter-spacing: normal;
    text-transform: none;
}

.deposit-now-callout.text-green {
    color: var(--accent-green, #00CD76) !important;
}

.deposit-now-callout.text-green i {
    color: var(--accent-green, #00CD76);
}

.balance-due-notice {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--light-grey, #94a3b8) !important;
    display: block;
    margin-top: 5px;
}

.balance-due-notice.warning-orange {
    color: #fbbf24 !important;
}

/* Full Width Button Spanning */
.package-card .btn-full-width {
    width: 100% !important;
    justify-content: center;
    margin-top: auto;
}

/* Responsive Overrides */
@media (max-width: 768px) {
    .package-grid {
        grid-template-columns: 1fr;
        padding: 60px 16px;
        gap: 40px;
    }

    .package-card {
        padding: 40px 20px 30px 20px;
    }

    .package-description-limit {
        min-height: auto;
    }
}

/**
 * Conversion & Acceleration CTA Banner with Neon Glow Header
 * Path: assets/css/style.css
 */

.home-acceleration-cta-banner {
    background-color: var(--secondary-dark-grey, #121214) !important;
    border-top: none !important;
    border-bottom: 2px solid var(--accent-green, #00CD76);
    box-shadow: 0 0 35px rgba(0, 205, 118, 0.15);
    padding: 80px 24px;
    box-sizing: border-box;
    width: 100%;
}

.home-cta-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.home-cta-message {
    flex: 1;
    max-width: 800px;
}

.home-cta-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--surface-dark-grey, #1a1a1e) !important;
    color: var(--accent-green, #00CD76) !important;
    border: 1px solid var(--accent-green, #00CD76) !important;
    padding: 6px 16px;
    border-radius: 30px !important;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 18px;
    box-shadow: 0 0 10px rgba(0, 205, 118, 0.2);
}

/* Vibrant Neon Glow Header */
.neon-glow-header {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 16px 0;
    text-shadow: 
        0 0 8px rgba(0, 205, 118, 0.8),
        0 0 20px rgba(0, 205, 118, 0.5),
        0 0 35px rgba(0, 205, 118, 0.25);
    letter-spacing: -0.5px;
}

.home-cta-message p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

.home-cta-actions {
    flex-shrink: 0;
}

.btn-dark-launch {
    white-space: nowrap;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .home-cta-wrap {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }

    .home-cta-message {
        max-width: 100%;
    }

    .neon-glow-header {
        font-size: 1.85rem;
    }

    .home-cta-actions {
        width: 100%;
    }

    .btn-dark-launch {
        width: 100%;
        max-width: 320px;
    }
}

/**
 * Asymmetric Image Collage Showcase Module - Dark Neon Theme
 * Path: assets/css/style.css
 */

.collage-showcase-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 100px 24px;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
}

.collage-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
}

/* Left Column Styling */
.collage-content-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.collage-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 18px 0 16px 0;
    letter-spacing: -0.5px;
}

.collage-lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

/* Right Column Overlapping Asymmetric Collage */
.collage-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.collage-matrix-wrapper {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 380px;
}

.collage-layer {
    position: absolute;
    border-radius: 24px !important;
    overflow: hidden;
    background-color: var(--primary-black, #000000) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0.3s ease;
}

.collage-layer:hover {
    transform: scale(1.04) translateY(-6px) !important;
    z-index: 10 !important;
}

.collage-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 22px;
}

/* Layer Matrix Offsets */
.layer-back {
    width: 280px;
    height: 200px;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.75;
}

.layer-mid {
    width: 310px;
    height: 220px;
    top: 60px;
    right: 0;
    z-index: 2;
    opacity: 0.9;
}

.layer-front {
    width: 300px;
    height: 210px;
    bottom: 0;
    left: 45px;
    z-index: 3;
    opacity: 1;
}

/* Responsive Scaling */
@media (max-width: 992px) {
    .collage-showcase-container {
        padding: 70px 20px;
    }

    .collage-split-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .collage-content-pane {
        align-items: center;
        text-align: center;
    }

    .collage-main-title {
        font-size: 2rem;
    }

    .collage-matrix-wrapper {
        height: 320px;
        max-width: 440px;
    }

    .layer-back {
        width: 230px;
        height: 165px;
    }

    .layer-mid {
        width: 255px;
        height: 180px;
        top: 45px;
    }

    .layer-front {
        width: 245px;
        height: 175px;
        left: 30px;
    }
}

@media (max-width: 480px) {
    .collage-matrix-wrapper {
        height: 260px;
        max-width: 320px;
    }

    .layer-back {
        width: 170px;
        height: 125px;
    }

    .layer-mid {
        width: 190px;
        height: 135px;
        top: 35px;
    }

    .layer-front {
        width: 185px;
        height: 130px;
        left: 20px;
    }
}

/**
 * Data Blocks & JSON Core Showcase Module - Dark Neon Theme
 * Path: assets/css/style.css
 */

.json-blocks-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 100px 24px;
    box-sizing: border-box;
    width: 100%;
}

.json-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Column Media Frame */
.json-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.json-media-frame {
    width: 100%;
    max-width: 520px;
    border-radius: 30px !important;
    overflow: hidden;
    background-color: var(--primary-black, #000000) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.json-media-frame:hover {
    transform: translateY(-4px);
}

.json-matrix-thumb {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 28px;
}

/* Right Column Content */
.json-content-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.json-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 18px 0 16px 0;
    letter-spacing: -0.5px;
}

.json-lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .json-blocks-container {
        padding: 70px 20px;
    }

    .json-split-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .json-content-pane {
        align-items: center;
        text-align: center;
    }

    .json-main-title {
        font-size: 2rem;
    }
}

/**
 * Dynamic Blog Engine Showcase Module - Dark Neon Theme
 * Path: assets/css/style.css
 */

.blog-showcase-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 100px 24px;
    box-sizing: border-box;
    width: 100%;
}

.blog-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
}

/* Left Column Content */
.blog-content-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.blog-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 18px 0 16px 0;
    letter-spacing: -0.5px;
}

.blog-lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

/* Right Column Media Frame */
.blog-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.blog-media-frame {
    width: 100%;
    max-width: 520px;
    border-radius: 30px !important;
    overflow: hidden;
    background-color: var(--primary-black, #000000) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-media-frame:hover {
    transform: translateY(-4px);
}

.blog-matrix-thumb {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 28px;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .blog-showcase-container {
        padding: 70px 20px;
    }

    .blog-split-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .blog-content-pane {
        align-items: center;
        text-align: center;
    }

    .blog-main-title {
        font-size: 2rem;
    }
}

/**
 * Critical Communication Showcase Module (Reversed) - Dark Neon Theme
 * Path: assets/css/style.css
 */

.communication-showcase-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 100px 24px;
    box-sizing: border-box;
    width: 100%;
}

.communication-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Column Media Frame */
.communication-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.communication-media-frame {
    width: 100%;
    max-width: 520px;
    border-radius: 30px !important;
    overflow: hidden;
    background-color: var(--primary-black, #000000) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.communication-media-frame:hover {
    transform: translateY(-4px);
}

.communication-matrix-thumb {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 28px;
}

/* Right Column Content */
.communication-content-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.communication-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 18px 0 16px 0;
    letter-spacing: -0.5px;
}

.communication-lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .communication-showcase-container {
        padding: 70px 20px;
    }

    .communication-split-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .communication-content-pane {
        align-items: center;
        text-align: center;
    }

    .communication-main-title {
        font-size: 2rem;
    }
}

/**
 * Direct Quotation, Invoicing & SMTP Mailer Module - Dark Neon Theme
 * Path: assets/css/style.css
 */

.billing-showcase-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 100px 24px;
    box-sizing: border-box;
    width: 100%;
}

.billing-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
}

/* Left Column Content */
.billing-content-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.billing-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 18px 0 16px 0;
    letter-spacing: -0.5px;
}

.billing-lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

/* Right Column Media Frame */
.billing-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.billing-media-frame {
    width: 100%;
    max-width: 520px;
    border-radius: 30px !important;
    overflow: hidden;
    background-color: var(--primary-black, #000000) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.billing-media-frame:hover {
    transform: translateY(-4px);
}

.billing-matrix-thumb {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 28px;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .billing-showcase-container {
        padding: 70px 20px;
    }

    .billing-split-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .billing-content-pane {
        align-items: center;
        text-align: center;
    }

    .billing-main-title {
        font-size: 2rem;
    }
}

/**
 * Marketing Newsletter Funnel Showcase Module (Reversed) - Dark Neon Theme
 * Path: assets/css/style.css
 */

.marketing-funnel-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 100px 24px;
    box-sizing: border-box;
    width: 100%;
}

.funnel-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Column Media Frame */
.funnel-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.funnel-media-frame {
    width: 100%;
    max-width: 520px;
    border-radius: 30px !important;
    overflow: hidden;
    background-color: var(--primary-black, #000000) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.funnel-media-frame:hover {
    transform: translateY(-4px);
}

.funnel-matrix-thumb {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 28px;
}

/* Right Column Content */
.funnel-content-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.funnel-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 18px 0 16px 0;
    letter-spacing: -0.5px;
}

.funnel-lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .marketing-funnel-container {
        padding: 70px 20px;
    }

    .funnel-split-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .funnel-content-pane {
        align-items: center;
        text-align: center;
    }

    .funnel-main-title {
        font-size: 2rem;
    }
}

/**
 * Google Ads API Integration Showcase Module - Dark Neon Theme
 * Path: assets/css/style.css
 */

.ads-api-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 100px 24px;
    box-sizing: border-box;
    width: 100%;
}

.ads-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
}

/* Left Column Content */
.ads-content-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.ads-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 18px 0 16px 0;
    letter-spacing: -0.5px;
}

.ads-lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

/* Right Column Media Frame */
.ads-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ads-media-frame {
    width: 100%;
    max-width: 520px;
    border-radius: 30px !important;
    overflow: hidden;
    background-color: var(--primary-black, #000000) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ads-media-frame:hover {
    transform: translateY(-4px);
}

.ads-matrix-thumb {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 28px;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .ads-api-container {
        padding: 70px 20px;
    }

    .ads-split-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .ads-content-pane {
        align-items: center;
        text-align: center;
    }

    .ads-main-title {
        font-size: 2rem;
    }
}

/**
 * Native SEO Booster Showcase Module (Reversed) - Dark Neon Theme
 * Path: assets/css/style.css
 */

.seo-booster-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 100px 24px;
    box-sizing: border-box;
    width: 100%;
}

.seo-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Column Media Frame */
.seo-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.seo-media-frame {
    width: 100%;
    max-width: 520px;
    border-radius: 30px !important;
    overflow: hidden;
    background-color: var(--primary-black, #000000) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-media-frame:hover {
    transform: translateY(-4px);
}

.seo-matrix-thumb {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 28px;
}

/* Right Column Content */
.seo-content-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.seo-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 18px 0 16px 0;
    letter-spacing: -0.5px;
}

.seo-lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .seo-booster-container {
        padding: 70px 20px;
    }

    .seo-split-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .seo-content-pane {
        align-items: center;
        text-align: center;
    }

    .seo-main-title {
        font-size: 2rem;
    }
}

/**
 * Native SEO Booster Showcase Module (Reversed) - Dark Neon Theme
 * Path: assets/css/style.css
 */

.seo-booster-container {
    background-color: var(--primary-black, #000000) !important;
    border-top: none !important;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding: 100px 24px;
    box-sizing: border-box;
    width: 100%;
}

.seo-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Column Media Frame */
.seo-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.seo-media-frame {
    width: 100%;
    max-width: 520px;
    border-radius: 30px !important;
    overflow: hidden;
    background-color: var(--primary-black, #000000) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-media-frame:hover {
    transform: translateY(-4px);
}

.seo-matrix-thumb {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 28px;
}

/* Right Column Content */
.seo-content-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.seo-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 18px 0 16px 0;
    letter-spacing: -0.5px;
}

.seo-lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .seo-booster-container {
        padding: 70px 20px;
    }

    .seo-split-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .seo-content-pane {
        align-items: center;
        text-align: center;
    }

    .seo-main-title {
        font-size: 2rem;
    }
}

/**
 * Fluid High-Conversion Corporate Software CTA Banner - Dark Neon Theme
 * Path: assets/css/style.css
 */

.fluid-software-cta-banner {
    background-color: var(--secondary-dark-grey, #121214) !important;
    border-top: none !important;
    border-bottom: 2px solid var(--accent-green, #00CD76);
    box-shadow: 0 0 35px rgba(0, 205, 118, 0.15);
    padding: 80px 24px;
    box-sizing: border-box;
    width: 100%;
}

.fluid-cta-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.cta-message-block {
    flex: 1;
    max-width: 800px;
    text-align: left;
}

.cta-pre-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--surface-dark-grey, #1a1a1e) !important;
    color: var(--accent-green, #00CD76) !important;
    border: 1px solid var(--accent-green, #00CD76) !important;
    padding: 6px 16px;
    border-radius: 30px !important;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 18px;
    box-shadow: 0 0 10px rgba(0, 205, 118, 0.2);
    text-transform: none;
}

.cta-message-block h2 {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
    text-transform: none;
}

.cta-message-block p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

.cta-action-block {
    flex-shrink: 0;
}

.btn-dark-cta {
    white-space: nowrap;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .fluid-cta-wrap {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }

    .cta-message-block {
        max-width: 100%;
        text-align: center;
    }

    .cta-message-block h2 {
        font-size: 1.85rem;
    }

    .cta-action-block {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .btn-dark-cta {
        width: 100%;
        max-width: 320px;
    }
}

/**
 * Breadcrumb Trail Navigation - Dark Neon Theme
 * Path: assets/css/style.css
 */

.breadcrumb-trail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 30px !important;
    margin: 20px 0 35px 0;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.breadcrumb-link {
    color: var(--lighter-grey, #cbd5e1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.breadcrumb-link i {
    color: var(--accent-green, #00CD76);
    font-size: 0.8rem;
}

.breadcrumb-link:hover {
    color: var(--accent-green, #00CD76);
}

.breadcrumb-separator {
    color: var(--light-grey, #94a3b8);
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
}

.breadcrumb-active {
    color: var(--accent-green, #00CD76);
    font-weight: 800;
}

@media (max-width: 576px) {
    .breadcrumb-trail {
        font-size: 0.8rem;
        padding: 8px 16px;
        gap: 8px;
    }
}

/**
 * Product Details Split Matrix Grid & Sidebar - Dark Neon Theme
 * Path: assets/css/style.css
 */

.details-split-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start;
    margin-bottom: 60px;
}

/* Left Content Column */
.details-content-column {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.catalog-badge-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.category-pill-tag,
.version-pill-tag {
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--lighter-grey, #cbd5e1);
    border: 1px solid var(--border-dark-grey, #27272a);
    padding: 5px 14px;
    border-radius: 30px !important;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.version-pill-tag i {
    color: var(--accent-green, #00CD76);
}

.details-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

.details-lead-paragraph {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.92;
    font-weight: 500;
    margin-bottom: 35px;
}

.details-section-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent-green, #00CD76) !important;
    margin: 30px 0 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.details-section-heading i {
    font-size: 1.1rem;
}

.details-long-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--lighter-grey, #cbd5e1);
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 20px;
}

.details-protections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.details-protections-grid li {
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 16px;
    padding: 14px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--lighter-grey, #cbd5e1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.details-protections-grid li i {
    color: var(--accent-green, #00CD76);
    font-size: 1rem;
    flex-shrink: 0;
}

/* Right Sidebar Action Panel */
.details-action-sidebar {
    position: relative;
    background-color: var(--primary-black, #000000) !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    padding: 35px 28px;
    background-clip: padding-box;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.details-action-sidebar::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    padding: 2px;
    background: conic-gradient(from var(--angle), #00CD76, #052e16, #000000, #00CD76);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: spin-glow 4s linear infinite;
    pointer-events: none;
}

.sidebar-pre-label {
    color: var(--light-grey, #94a3b8);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: none;
}

.sidebar-specs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    padding: 18px 0;
    border-top: 1px solid var(--border-dark-grey, #27272a);
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
}

.sidebar-spec-item {
    font-size: 0.85rem;
    color: var(--light-grey, #94a3b8);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-spec-item i {
    color: var(--accent-green, #00CD76);
    width: 16px;
}

.sidebar-spec-item strong {
    color: var(--text-white, #ffffff);
    margin-left: auto;
}

.sidebar-disclaimer-block {
    margin-top: 18px;
    padding-top: 14px;
}

.sidebar-disclaimer-block p {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--light-grey, #94a3b8) !important;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.sidebar-disclaimer-block p i {
    color: var(--accent-green, #00CD76);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .details-split-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .details-action-sidebar {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
}

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

    .details-main-title {
        font-size: 1.9rem;
    }
}

/**
 * Component-Level Internal Padding System
 * Path: assets/css/style.css
 */

/* Main Content & Split Pane Wrappers */
.details-content-column,
.collage-content-pane,
.json-content-pane,
.blog-content-pane,
.communication-content-pane,
.billing-content-pane,
.funnel-content-pane,
.ads-content-pane,
.seo-content-pane,
.analytics-content-pane {
    padding: 16px;
    box-sizing: border-box;
}

/* Media, Blueprint & Visual Image Frame Wrappers */
.json-visual-pane,
.blog-visual-pane,
.communication-visual-pane,
.billing-visual-pane,
.funnel-visual-pane,
.ads-visual-pane,
.seo-visual-pane,
.analytics-visual-pane,
.collage-visual-pane {
    padding: 12px;
    box-sizing: border-box;
}

/* Internal Matrix Blocks & Feature Panels */
.pricing-matrix-box {
    padding: 20px 24px !important;
}

.details-long-description {
    padding: 28px !important;
}

.sidebar-disclaimer-block {
    padding: 16px 20px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border-radius: 18px;
    border: 1px solid var(--border-dark-grey, #27272a);
    box-sizing: border-box;
}

.cta-message-block,
.home-cta-message {
    padding: 12px 18px;
    box-sizing: border-box;
}

.breadcrumb-trail {
    padding: 12px 24px !important;
}

/* Responsive Padding Overrides */
@media (max-width: 768px) {
    .details-content-column,
    .details-long-description,
    .pricing-matrix-box,
    .sidebar-disclaimer-block {
        padding: 18px 16px !important;
    }
}

/**
 * Catalog Context Introduction Bar - Dark Neon Theme
 * Path: assets/css/style.css
 */

.panel-header-row {
    margin: 20px 0 40px 0;
    padding: 30px 24px;
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 30px !important;
    box-sizing: border-box;
}

.header-meta {
    max-width: 850px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.header-meta .steps-pre-label {
    margin-bottom: 12px;
}

.header-meta h3 {
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.header-meta p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

@media (max-width: 768px) {
    .panel-header-row {
        padding: 24px 18px;
        margin-bottom: 30px;
    }

    .header-meta h3 {
        font-size: 1.5rem;
    }
}

/**
 * Catalog Packages Matrix & Internal Spacing Modules
 * Path: assets/css/style.css
 */

/* Empty State Notice */
.table-empty-notice-cell {
    grid-column: 1 / -1;
    background-color: var(--secondary-dark-grey, #121214);
    border: 2px dashed var(--border-dark-grey, #27272a);
    border-radius: 30px;
    padding: 60px 24px;
    text-align: center;
    box-sizing: border-box;
}

.table-empty-notice-cell i {
    font-size: 3rem;
    color: var(--light-grey, #94a3b8);
    margin-bottom: 16px;
}

.table-empty-notice-cell p {
    color: var(--lighter-grey, #cbd5e1);
    margin-bottom: 8px;
}

/* Package Card Internal Sections */
.catalog-card-details {
    width: 100%;
    padding: 12px 10px 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    box-sizing: border-box;
}

.catalog-card-details h3 {
    text-align: left;
    margin: 10px 0 12px 0;
    font-size: 1.35rem;
}

.catalog-card-details .package-description-limit {
    text-align: left;
    min-height: 60px;
    margin-bottom: 18px;
}

.catalog-card-pricing-panel {
    width: 100%;
    padding: 10px;
    margin-top: auto;
    box-sizing: border-box;
}

/* Tech Stack Grouping */
.tech-stack-group {
    width: 100%;
    margin-bottom: 10px;
}

.tech-stack-group label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--light-grey, #94a3b8);
    margin-bottom: 6px;
    text-transform: none;
}

.tech-stack-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--lighter-grey, #cbd5e1);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-family: inherit;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
}

.tech-stack-badge i {
    color: var(--accent-green, #00CD76);
}

/* Action Trigger Grid */
.action-trigger-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 12px;
    width: 100%;
}

.action-trigger-grid .btn {
    padding: 12px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
    width: 100%;
}

@media (max-width: 576px) {
    .action-trigger-grid {
        grid-template-columns: 1fr;
    }
}

/**
 * Cart Review Panel Header - Dark Neon Theme
 * Path: assets/css/style.css
 */

.panel-header-row {
    margin: 20px 0 35px 0;
    padding: 32px 28px;
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 30px !important;
    box-sizing: border-box;
}

.header-meta {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.header-meta .steps-pre-label {
    margin-bottom: 12px;
}

.header-meta h3 {
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-meta h3 i {
    font-size: 1.5rem;
    color: var(--accent-green, #00CD76);
}

.header-meta p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-white, #ffffff) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

.header-meta p strong {
    color: var(--accent-green, #00CD76);
    font-weight: 700;
}

@media (max-width: 768px) {
    .panel-header-row {
        padding: 24px 18px;
        margin-bottom: 25px;
    }

    .header-meta h3 {
        font-size: 1.5rem;
    }
}

/**
 * Shopping Cart Matrix Table & Footer Actions - Dark Neon Theme
 * Path: assets/css/style.css
 */

/* Empty State Box */
.error-fallback-container {
    background-color: var(--secondary-dark-grey, #121214);
    border: 2px dashed var(--border-dark-grey, #27272a);
    border-radius: 30px;
    padding: 70px 24px;
    text-align: center;
    box-sizing: border-box;
    margin: 20px 0 50px 0;
}

.cart-empty-hero {
    font-size: 3.5rem;
    color: var(--light-grey, #94a3b8);
    margin-bottom: 20px;
}

.empty-cart-main {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-white, #ffffff);
    margin-bottom: 8px;
}

.empty-cart-sub {
    font-size: 0.95rem;
    color: var(--light-grey, #94a3b8);
    margin-bottom: 24px;
}

/* Table Card Wrapper */
.cart-table-wrapper {
    background-color: var(--primary-black, #000000);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 26px;
    overflow: hidden;
    margin-bottom: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.cart-matrix-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.cart-matrix-table th {
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--light-grey, #94a3b8);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.3px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
}

.cart-matrix-table td {
    padding: 22px;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    vertical-align: middle;
    color: var(--lighter-grey, #cbd5e1);
}

/* Item Cell Elements */
.cart-item-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--accent-green, #00CD76);
    display: block;
    margin-bottom: 6px;
}

.cart-item-meta {
    font-size: 0.82rem;
    color: var(--light-grey, #94a3b8);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cart-item-meta i {
    color: var(--accent-green, #00CD76);
}

.cart-promo-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(0, 205, 118, 0.12);
    color: var(--accent-green, #00CD76);
    border: 1px solid var(--accent-green, #00CD76);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 800;
}

.cart-original-price {
    display: block;
    font-size: 0.85rem;
    color: var(--light-grey, #94a3b8);
    text-decoration: line-through;
    margin-bottom: 2px;
}

.cart-computed-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-white, #ffffff);
}

.cart-deposit-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent-green, #00CD76);
}

.cart-deferred-schedule {
    font-size: 0.78rem;
    color: #fb923c;
    font-weight: 600;
    margin-top: 4px;
}

.btn-action-drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--light-grey, #94a3b8);
    border: 1px solid var(--border-dark-grey, #27272a);
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-action-drop:hover {
    color: #ef4444;
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
}

/* Calculation Breakdown Summary Rows */
.summary-total-row td,
.summary-deposit-row td,
.summary-deferred-row td {
    padding: 16px 22px;
    background-color: var(--secondary-dark-grey, #121214);
}

.summary-label {
    text-align: right;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lighter-grey, #cbd5e1);
}

.summary-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-white, #ffffff);
}

.summary-label-accent {
    text-align: right;
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent-green, #00CD76);
}

.summary-value-accent {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--accent-green, #00CD76);
}

.summary-label-deferred {
    text-align: right;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lighter-grey, #cbd5e1);
}

.summary-value-deferred {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fb923c;
}

.deferred-milestone-tag {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--light-grey, #94a3b8);
    margin-top: 4px;
}

/* Cart Action Footer */
.cart-action-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 26px;
    box-sizing: border-box;
    margin-bottom: 50px;
    gap: 20px;
}

.back-browsing-link {
    color: var(--lighter-grey, #cbd5e1);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.back-browsing-link i {
    color: var(--accent-green, #00CD76);
}

.back-browsing-link:hover {
    color: var(--accent-green, #00CD76);
}

/* Mobile Responsive Matrix Flattening */
@media (max-width: 768px) {
    .cart-matrix-table,
    .cart-matrix-table tbody,
    .cart-matrix-table tr,
    .cart-matrix-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .cart-matrix-table thead {
        display: none;
    }

    .cart-matrix-table td {
        padding: 12px 18px;
        border-bottom: none;
    }

    .cart-matrix-table tr {
        border-bottom: 1px solid var(--border-dark-grey, #27272a);
        padding: 12px 0;
    }

    .summary-label,
    .summary-label-accent,
    .summary-label-deferred {
        text-align: left;
        padding-bottom: 4px;
    }

    .cart-action-footer {
        flex-direction: column-reverse;
        text-align: center;
        padding: 20px 16px;
    }

    .cart-action-footer .btn {
        width: 100%;
    }
}

/**
 * Split Viewport Authentication Console - Dark Neon Theme
 * Path: assets/css/style.css
 */

.split-viewport-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 120px);
    width: 100%;
    background-color: var(--primary-black, #000000);
    box-sizing: border-box;
}

/* Left Column: Form Console */
.auth-form-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    background-color: var(--primary-black, #000000);
    border-right: 1px solid var(--border-dark-grey, #27272a);
    box-sizing: border-box;
}

.auth-form-inner-wrapper {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
}

.auth-header-block {
    text-align: left;
    margin-bottom: 28px;
}

.auth-icon-badge {
    width: 52px;
    height: 52px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--accent-green, #00CD76);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-green, #00CD76);
    font-size: 1.35rem;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.2);
    margin-bottom: 20px;
}

.auth-header-block h2 {
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.auth-header-block p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--lighter-grey, #cbd5e1);
    margin: 0;
}

.auth-form-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

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

.form-group label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lighter-grey, #cbd5e1);
}

.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-field-icon {
    position: absolute;
    left: 18px;
    color: var(--light-grey, #94a3b8);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color 0.2s ease;
}

.input-with-icon {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 16px;
    color: var(--text-white, #ffffff);
    font-size: 0.92rem;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.input-with-icon:focus {
    border-color: var(--accent-green, #00CD76);
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.25);
}

.input-with-icon:focus + .input-field-icon,
.input-icon-group:focus-within .input-field-icon {
    color: var(--accent-green, #00CD76);
}

.auth-footer-routing {
    margin-top: 35px;
    text-align: left;
}

.auth-footer-routing p {
    font-size: 0.88rem;
    color: var(--light-grey, #94a3b8);
    margin: 0;
}

.auth-redirect-link {
    color: var(--accent-green, #00CD76);
    text-decoration: none;
    font-weight: 700;
    transition: underline 0.2s ease;
}

.auth-redirect-link:hover {
    text-decoration: underline;
}

/* Right Column: Brand Showcase Visual */
.brand-vector-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    background-color: var(--secondary-dark-grey, #121214);
    box-sizing: border-box;
}

.vector-content-lock {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.showcase-svg-vector {
    width: 100%;
    max-width: 440px;
    height: auto;
    margin-bottom: 28px;
}

.showcase-caption {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 10px 0;
    letter-spacing: -0.3px;
}

.showcase-description {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--lighter-grey, #cbd5e1);
    margin: 0;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .split-viewport-wrapper {
        grid-template-columns: 1fr;
    }

    .auth-form-pane {
        border-right: none;
        border-bottom: 1px solid var(--border-dark-grey, #27272a);
        padding: 50px 24px;
    }

    .brand-vector-pane {
        padding: 50px 24px;
    }
}

/**
 * Form Input Fields & Icon Alignment Fix - Dark Neon Theme
 * Path: assets/css/style.css
 */

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.form-group label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lighter-grey, #cbd5e1);
    letter-spacing: 0.2px;
}

.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Perfect Absolute Vertical Centering for Leading Icons */
.input-icon-group .input-field-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-grey, #94a3b8);
    font-size: 0.95rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s ease;
}

/* Input Field Sizing & Padding Clearance */
.input-with-icon {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 48px; /* 48px left clearance ensures text never collides with icon */
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 16px;
    color: var(--text-white, #ffffff);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-with-icon::placeholder {
    color: var(--light-grey, #94a3b8);
    opacity: 0.6;
}

/* Interactive States */
.input-with-icon:focus {
    border-color: var(--accent-green, #00CD76);
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.25);
}

.input-icon-group:focus-within .input-field-icon {
    color: var(--accent-green, #00CD76);
}

/* Standard Inputs without Icons */
.form-input-text:not(.input-with-icon) {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 16px;
    color: var(--text-white, #ffffff);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input-text:not(.input-with-icon):focus {
    border-color: var(--accent-green, #00CD76);
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.25);
}

/**
 * Auth Form Input Fields, Icon Spacing & Password Toggle - Dark Neon Theme
 * Path: assets/css/style.css
 */

.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Leading Icon: Envelope & Key */
.input-icon-group .input-field-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-grey, #94a3b8);
    font-size: 0.95rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    margin-right: 14px;
    transition: color 0.2s ease;
}

/* Input Fields with Leading Icon Spacing */
.input-with-icon {
    width: 100%;
    height: 48px;
    padding-left: 50px; /* Provides 14px clear visual margin past the leading icon */
    padding-right: 16px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 16px;
    color: var(--text-white, #ffffff);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Input with both Leading Icon & Trailing Show Password Toggle */
.input-with-toggle {
    padding-right: 48px;
}

.input-with-icon::placeholder {
    color: var(--light-grey, #94a3b8);
    opacity: 0.6;
}

.input-with-icon:focus {
    border-color: var(--accent-green, #00CD76);
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.25);
}

.input-icon-group:focus-within .input-field-icon {
    color: var(--accent-green, #00CD76);
}

/* Show / Hide Password Eye Button */
.password-toggle-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    outline: none;
    color: var(--light-grey, #94a3b8);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: color 0.2s ease, transform 0.15s ease;
}

.password-toggle-btn:hover {
    color: var(--accent-green, #00CD76);
    transform: translateY(-50%) scale(1.08);
}

.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/**
 * Auth Form Input Fields & Icon Alignment Fix - Dark Neon Theme
 * Path: assets/css/style.css
 */

.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* Leading Icons (Envelope & Key) - Positioned Absolutely */
.input-icon-group .input-field-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-grey, #94a3b8);
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    margin: 0;
    padding: 0;
    transition: color 0.2s ease;
}

/* Base Input Field: Large Left Padding Prevents Text Underlapping */
.input-with-icon {
    width: 100%;
    height: 48px;
    padding-left: 54px !important; /* Forces typed text to start well to the right of the icon */
    padding-right: 18px !important;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 16px;
    color: var(--text-white, #ffffff);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Password Input: Clearance on Both Sides (Icon on Left, Eye on Right) */
.input-with-toggle {
    padding-right: 50px !important;
}

.input-with-icon::placeholder {
    color: var(--light-grey, #94a3b8);
    opacity: 0.6;
}

.input-with-icon:focus {
    border-color: var(--accent-green, #00CD76);
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.25);
}

.input-icon-group:focus-within .input-field-icon {
    color: var(--accent-green, #00CD76);
}

/* Trailing Eye Toggle Button */
.password-toggle-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    outline: none;
    color: var(--light-grey, #94a3b8);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: color 0.2s ease, transform 0.15s ease;
}

.password-toggle-btn:hover {
    color: var(--accent-green, #00CD76);
    transform: translateY(-50%) scale(1.08);
}

.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/**
 * Master Platform Design System & Stylesheet
 * Framework: Dark Neon Corporate SaaS CMS
 * Target: assets/css/style.css
 */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin-glow {
    0% {
        --angle: 0deg;
    }
    100% {
        --angle: 360deg;
    }
}

:root {
    --primary-black: #000000;
    --secondary-dark-grey: #121214;
    --surface-dark-grey: #1a1a1e;
    --border-dark-grey: #27272a;
    --border-light-dark: #3f3f46;
    
    --accent-green: #00CD76;
    --accent-green-hover: #00b368;
    --accent-green-glow: rgba(0, 205, 118, 0.25);
    
    --text-white: #ffffff;
    --lighter-grey: #cbd5e1;
    --light-grey: #94a3b8;
    --warning-orange: #fb923c;
    --danger-red: #ef4444;
}

/* =========================================================================
   1. GLOBAL RESET & FOUNDATIONS
   ========================================================================= */

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

html, body {
    background-color: var(--primary-black);
    color: var(--text-white);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* =========================================================================
   2. BUTTON SYSTEM & NEON UTILITIES
   ========================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--surface-dark-grey);
    color: var(--text-white);
    border: 1px solid var(--border-dark-grey);
    border-radius: 16px;
    padding: 13px 24px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.btn:hover {
    border-color: var(--accent-green);
    color: var(--accent-green);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 205, 118, 0.15);
}

.btn-secondary {
    background-color: var(--surface-dark-grey);
    color: var(--lighter-grey);
    border-color: var(--border-dark-grey);
}

.btn-secondary:hover {
    background-color: #222226;
    color: var(--text-white);
    border-color: var(--light-grey);
}

.btn-success-green,
.btn-dark-cta {
    background-color: var(--accent-green) !important;
    color: var(--primary-black) !important;
    border: 1px solid var(--accent-green) !important;
    font-weight: 800;
    box-shadow: 0 0 20px rgba(0, 205, 118, 0.35);
}

.btn-success-green:hover,
.btn-dark-cta:hover {
    background-color: var(--accent-green-hover) !important;
    color: var(--primary-black) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 205, 118, 0.55);
}

.btn-dark-auth {
    background-color: var(--surface-dark-grey);
    border: 1px solid var(--accent-green);
    color: var(--accent-green);
}

.btn-dark-auth:hover {
    background-color: var(--accent-green);
    color: var(--primary-black);
}

.btn-full-width {
    width: 100%;
}

.text-green { color: var(--accent-green) !important; }
.warning-orange { color: var(--warning-orange) !important; }

/* =========================================================================
   3. BREADCRUMBS & SECTION HEADERS
   ========================================================================= */

.breadcrumb-trail {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background-color: var(--surface-dark-grey);
    border: 1px solid var(--border-dark-grey);
    border-radius: 30px !important;
    margin: 20px 0 35px 0;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.breadcrumb-link {
    color: var(--lighter-grey);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}

.breadcrumb-link i {
    color: var(--accent-green);
    font-size: 0.8rem;
}

.breadcrumb-link:hover {
    color: var(--accent-green);
}

.breadcrumb-separator {
    color: var(--light-grey);
    font-size: 0.7rem;
    opacity: 0.7;
}

.breadcrumb-active {
    color: var(--accent-green);
    font-weight: 800;
}

.panel-header-row {
    margin: 20px 0 40px 0;
    padding: 30px 28px;
    background-color: var(--secondary-dark-grey);
    border: 1px solid var(--border-dark-grey);
    border-radius: 30px !important;
    box-sizing: border-box;
}

.header-meta {
    max-width: 850px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.header-meta .steps-pre-label {
    margin-bottom: 12px;
}

.header-meta h3 {
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--accent-green) !important;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-meta p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-white) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

.steps-pre-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--surface-dark-grey);
    color: var(--accent-green);
    border: 1px solid var(--border-dark-grey);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 800;
}

/* =========================================================================
   4. PRODUCT CATALOG GRID & CARDS
   ========================================================================= */

.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 32px;
    margin-bottom: 60px;
}

.package-card {
    position: relative;
    background-color: var(--secondary-dark-grey);
    border: 1px solid var(--border-dark-grey);
    border-radius: 26px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, border-color 0.25s ease;
    box-sizing: border-box;
}

.package-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-light-dark);
}

.package-card.best-seller-card {
    border-color: var(--accent-green);
    box-shadow: 0 0 25px rgba(0, 205, 118, 0.15);
}

.card-promo-tag {
    position: absolute;
    top: 18px;
    right: 18px;
    background-color: var(--accent-green);
    color: var(--primary-black);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.catalog-card-details {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.catalog-badge-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.category-pill-tag,
.version-pill-tag {
    background-color: var(--surface-dark-grey);
    color: var(--lighter-grey);
    border: 1px solid var(--border-dark-grey);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
}

.catalog-card-details h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text-white);
    margin: 8px 0 10px 0;
}

.package-description-limit {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--lighter-grey);
    min-height: 65px;
    margin-bottom: 18px;
}

.tech-stack-group {
    width: 100%;
    margin-bottom: 16px;
}

.tech-stack-group label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--light-grey);
    margin-bottom: 4px;
}

.tech-stack-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--surface-dark-grey);
    color: var(--lighter-grey);
    border: 1px solid var(--border-dark-grey);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 0.78rem;
    width: 100%;
    box-sizing: border-box;
}

.catalog-card-pricing-panel {
    width: 100%;
    margin-top: auto;
}

.pricing-matrix-box {
    background-color: var(--surface-dark-grey);
    border: 1px solid var(--border-dark-grey);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.original-value-line {
    font-size: 0.8rem;
    color: var(--light-grey);
    text-decoration: line-through;
}

.display-price-success {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--accent-green);
    line-height: 1.1;
    margin: 4px 0 8px 0;
}

.display-price-primary {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text-white);
    line-height: 1.1;
    margin: 4px 0 8px 0;
}

.deposit-now-callout {
    font-size: 0.88rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.balance-due-notice {
    font-size: 0.78rem;
    color: var(--light-grey);
}

.action-trigger-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 10px;
    width: 100%;
}

.table-empty-notice-cell {
    grid-column: 1 / -1;
    background-color: var(--secondary-dark-grey);
    border: 2px dashed var(--border-dark-grey);
    border-radius: 30px;
    padding: 60px 24px;
    text-align: center;
}

.table-empty-notice-cell i {
    font-size: 3rem;
    color: var(--light-grey);
    margin-bottom: 16px;
}

/* =========================================================================
   5. TWO-COLUMN SPLIT SHOWCASES (SEO, ANALYTICS)
   ========================================================================= */

.seo-booster-container,
.analytics-showcase-container {
    background-color: var(--primary-black) !important;
    border-bottom: 1px solid var(--border-dark-grey);
    padding: 100px 24px;
    box-sizing: border-box;
    width: 100%;
}

.seo-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}

.analytics-split-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 60px;
    align-items: center;
}

.seo-content-pane,
.analytics-content-pane {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 16px;
}

.seo-main-title,
.analytics-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green) !important;
    margin: 18px 0 16px 0;
    letter-spacing: -0.5px;
}

.seo-lead-text,
.analytics-lead-text {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-white) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

.seo-visual-pane,
.analytics-visual-pane {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px;
}

.seo-media-frame,
.analytics-media-frame {
    width: 100%;
    max-width: 520px;
    border-radius: 30px !important;
    overflow: hidden;
    background-color: var(--primary-black) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-media-frame:hover,
.analytics-media-frame:hover {
    transform: translateY(-4px);
}

.seo-matrix-thumb,
.analytics-matrix-thumb {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 28px;
}

/* =========================================================================
   6. FLUID SOFTWARE CTA BANNER
   ========================================================================= */

.fluid-software-cta-banner {
    background-color: var(--secondary-dark-grey) !important;
    border-bottom: 2px solid var(--accent-green);
    box-shadow: 0 0 35px rgba(0, 205, 118, 0.15);
    padding: 80px 24px;
    box-sizing: border-box;
    width: 100%;
}

.fluid-cta-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.cta-message-block {
    flex: 1;
    max-width: 800px;
    text-align: left;
    padding: 12px 18px;
}

.cta-pre-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--surface-dark-grey) !important;
    color: var(--accent-green) !important;
    border: 1px solid var(--accent-green) !important;
    padding: 6px 16px;
    border-radius: 30px !important;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 18px;
    box-shadow: 0 0 10px rgba(0, 205, 118, 0.2);
}

.cta-message-block h2 {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--accent-green) !important;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

.cta-message-block p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-white) !important;
    opacity: 0.9;
    font-weight: 500;
    margin: 0;
}

.cta-action-block {
    flex-shrink: 0;
}

/* =========================================================================
   7. PRODUCT DETAILS VIEW & CONIC SIDEBAR
   ========================================================================= */

.details-split-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 48px;
    align-items: start;
    margin-bottom: 60px;
}

.details-content-column {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 16px;
}

.details-main-title {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green) !important;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

.details-lead-paragraph {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-white) !important;
    opacity: 0.92;
    font-weight: 500;
    margin-bottom: 35px;
}

.details-section-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent-green) !important;
    margin: 30px 0 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.details-long-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--lighter-grey);
    background-color: var(--secondary-dark-grey);
    border: 1px solid var(--border-dark-grey);
    border-radius: 20px;
    padding: 28px !important;
    margin-bottom: 20px;
}

.details-protections-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.details-protections-grid li {
    background-color: var(--surface-dark-grey);
    border: 1px solid var(--border-dark-grey);
    border-radius: 16px;
    padding: 14px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--lighter-grey);
    display: flex;
    align-items: center;
    gap: 10px;
}

.details-protections-grid li i {
    color: var(--accent-green);
    font-size: 1rem;
    flex-shrink: 0;
}

.details-action-sidebar {
    position: relative;
    background-color: var(--primary-black) !important;
    border: 2px solid transparent !important;
    border-radius: 30px !important;
    padding: 35px 28px;
    background-clip: padding-box;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.details-action-sidebar::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 32px;
    padding: 2px;
    background: conic-gradient(from var(--angle), #00CD76, #052e16, #000000, #00CD76);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: spin-glow 4s linear infinite;
    pointer-events: none;
}

.sidebar-pre-label {
    color: var(--light-grey);
    font-size: 0.8rem;
    font-weight: 700;
}

.sidebar-specs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
    padding: 18px 0;
    border-top: 1px solid var(--border-dark-grey);
    border-bottom: 1px solid var(--border-dark-grey);
}

.sidebar-spec-item {
    font-size: 0.85rem;
    color: var(--light-grey);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-spec-item i {
    color: var(--accent-green);
    width: 16px;
}

.sidebar-spec-item strong {
    color: var(--text-white);
    margin-left: auto;
}

.sidebar-disclaimer-block {
    margin-top: 18px;
    padding: 16px 20px;
    background-color: var(--surface-dark-grey);
    border-radius: 18px;
    border: 1px solid var(--border-dark-grey);
}

.sidebar-disclaimer-block p {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--light-grey) !important;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.sidebar-disclaimer-block p i {
    color: var(--accent-green);
    margin-top: 2px;
    flex-shrink: 0;
}

/* =========================================================================
   8. SHOPPING CART MATRIX & LEDGERS
   ========================================================================= */

.cart-table-wrapper {
    background-color: var(--primary-black);
    border: 1px solid var(--border-dark-grey);
    border-radius: 26px;
    overflow: hidden;
    margin-bottom: 35px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.cart-matrix-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.cart-matrix-table th {
    background-color: var(--surface-dark-grey);
    color: var(--light-grey);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-dark-grey);
}

.cart-matrix-table td {
    padding: 22px;
    border-bottom: 1px solid var(--border-dark-grey);
    vertical-align: middle;
    color: var(--lighter-grey);
}

.cart-item-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--accent-green);
    display: block;
    margin-bottom: 6px;
}

.cart-item-meta {
    font-size: 0.82rem;
    color: var(--light-grey);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cart-promo-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(0, 205, 118, 0.12);
    color: var(--accent-green);
    border: 1px solid var(--accent-green);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 800;
}

.cart-original-price {
    display: block;
    font-size: 0.85rem;
    color: var(--light-grey);
    text-decoration: line-through;
    margin-bottom: 2px;
}

.cart-computed-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-white);
}

.cart-deposit-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--accent-green);
}

.cart-deferred-schedule {
    font-size: 0.78rem;
    color: var(--warning-orange);
    font-weight: 600;
    margin-top: 4px;
}

.btn-action-drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background-color: var(--surface-dark-grey);
    color: var(--light-grey);
    border: 1px solid var(--border-dark-grey);
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-action-drop:hover {
    color: var(--danger-red);
    border-color: var(--danger-red);
    background-color: rgba(239, 68, 68, 0.1);
}

.summary-total-row td,
.summary-deposit-row td,
.summary-deferred-row td {
    padding: 16px 22px;
    background-color: var(--secondary-dark-grey);
}

.summary-label {
    text-align: right;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lighter-grey);
}

.summary-value {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-white);
}

.summary-label-accent {
    text-align: right;
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent-green);
}

.summary-value-accent {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--accent-green);
}

.summary-label-deferred {
    text-align: right;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lighter-grey);
}

.summary-value-deferred {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--warning-orange);
}

.deferred-milestone-tag {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--light-grey);
    margin-top: 4px;
}

.cart-action-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    background-color: var(--secondary-dark-grey);
    border: 1px solid var(--border-dark-grey);
    border-radius: 26px;
    box-sizing: border-box;
    margin-bottom: 50px;
    gap: 20px;
}

.back-browsing-link {
    color: var(--lighter-grey);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.back-browsing-link i { color: var(--accent-green); }
.back-browsing-link:hover { color: var(--accent-green); }

.error-fallback-container {
    background-color: var(--secondary-dark-grey);
    border: 2px dashed var(--border-dark-grey);
    border-radius: 30px;
    padding: 70px 24px;
    text-align: center;
    margin: 20px 0 50px 0;
}

.cart-empty-hero {
    font-size: 3.5rem;
    color: var(--light-grey);
    margin-bottom: 20px;
}

.empty-cart-main {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 8px;
}

.empty-cart-sub {
    font-size: 0.95rem;
    color: var(--light-grey);
    margin-bottom: 24px;
}

/* =========================================================================
   9. AUTHENTICATION CONSOLES & INPUT FIELDS
   ========================================================================= */

.split-viewport-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 120px);
    width: 100%;
    background-color: var(--primary-black);
    box-sizing: border-box;
}

.auth-form-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    background-color: var(--primary-black);
    border-right: 1px solid var(--border-dark-grey);
    box-sizing: border-box;
}

.auth-form-inner-wrapper {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
}

.auth-header-block {
    text-align: left;
    margin-bottom: 28px;
}

.auth-icon-badge {
    width: 52px;
    height: 52px;
    background-color: var(--surface-dark-grey);
    border: 1px solid var(--accent-green);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-green);
    font-size: 1.35rem;
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.2);
    margin-bottom: 20px;
}

.auth-header-block h2 {
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.2;
    color: var(--accent-green) !important;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.auth-header-block p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--lighter-grey);
    margin: 0;
}

.auth-form-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

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

.form-group label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--lighter-grey);
}

.input-icon-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.input-icon-group .input-field-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-grey);
    font-size: 1rem;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    transition: color 0.2s ease;
}

.input-with-icon {
    width: 100%;
    height: 48px;
    padding-left: 54px !important;
    padding-right: 18px !important;
    background-color: var(--surface-dark-grey);
    border: 1px solid var(--border-dark-grey);
    border-radius: 16px;
    color: var(--text-white);
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-with-toggle {
    padding-right: 50px !important;
}

.input-with-icon::placeholder {
    color: var(--light-grey);
    opacity: 0.6;
}

.input-with-icon:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 12px rgba(0, 205, 118, 0.25);
}

.input-icon-group:focus-within .input-field-icon {
    color: var(--accent-green);
}

.password-toggle-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    outline: none;
    color: var(--light-grey);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: color 0.2s ease, transform 0.15s ease;
}

.password-toggle-btn:hover {
    color: var(--accent-green);
    transform: translateY(-50%) scale(1.08);
}

.password-toggle-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.auth-footer-routing {
    margin-top: 35px;
    text-align: left;
}

.auth-footer-routing p {
    font-size: 0.88rem;
    color: var(--light-grey);
    margin: 0;
}

.auth-redirect-link {
    color: var(--accent-green);
    text-decoration: none;
    font-weight: 700;
}

.auth-redirect-link:hover {
    text-decoration: underline;
}

.alert {
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 0.88rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--danger-red);
    color: #fca5a5;
}

.brand-vector-pane {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    background-color: var(--secondary-dark-grey);
    box-sizing: border-box;
}

.vector-content-lock {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.showcase-svg-vector {
    width: 100%;
    max-width: 440px;
    height: auto;
    margin-bottom: 28px;
}

.showcase-caption {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--accent-green) !important;
    margin: 0 0 10px 0;
    letter-spacing: -0.3px;
}

.showcase-description {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--lighter-grey);
    margin: 0;
}

/* =========================================================================
   10. RESPONSIVE BREAKPOINTS
   ========================================================================= */

@media (max-width: 992px) {
    .seo-split-grid,
    .analytics-split-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .seo-content-pane,
    .analytics-content-pane {
        align-items: center;
        text-align: center;
    }

    .seo-main-title,
    .analytics-main-title {
        font-size: 2rem;
    }

    .fluid-cta-wrap {
        flex-direction: column;
        text-align: center;
        gap: 32px;
    }

    .cta-message-block {
        max-width: 100%;
        text-align: center;
    }

    .cta-message-block h2 {
        font-size: 1.85rem;
    }

    .cta-action-block {
        width: 100%;
        display: flex;
        justify-content: center;
    }

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

    .details-action-sidebar {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }

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

    .auth-form-pane {
        border-right: none;
        border-bottom: 1px solid var(--border-dark-grey);
        padding: 50px 24px;
    }

    .brand-vector-pane {
        padding: 50px 24px;
    }
}

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

    .details-content-column,
    .details-long-description,
    .pricing-matrix-box,
    .sidebar-disclaimer-block {
        padding: 18px 16px !important;
    }

    .details-protections-grid {
        grid-template-columns: 1fr;
    }

    .details-main-title {
        font-size: 1.9rem;
    }

    .cart-matrix-table,
    .cart-matrix-table tbody,
    .cart-matrix-table tr,
    .cart-matrix-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .cart-matrix-table thead {
        display: none;
    }

    .cart-matrix-table td {
        padding: 12px 18px;
        border-bottom: none;
    }

    .cart-matrix-table tr {
        border-bottom: 1px solid var(--border-dark-grey);
        padding: 12px 0;
    }

    .summary-label,
    .summary-label-accent,
    .summary-label-deferred {
        text-align: left;
        padding-bottom: 4px;
    }

    .cart-action-footer {
        flex-direction: column-reverse;
        text-align: center;
        padding: 20px 16px;
    }

    .cart-action-footer .btn {
        width: 100%;
    }
}

/**
 * Checkout & Mobile Money Allocation Matrix - Dark Neon Theme
 * Path: assets/css/style.css
 */

.checkout-container {
    max-width: 1200px;
    margin: 40px auto 80px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.steps-header-block {
    text-align: left;
    margin-bottom: 35px;
}

.steps-main-title {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--accent-green, #00CD76) !important;
    margin: 12px 0 10px 0;
    letter-spacing: -0.5px;
}

.steps-subtitle {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--lighter-grey, #cbd5e1);
    max-width: 800px;
    margin: 0;
}

/* Two-Column Checkout Grid */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
}

/* Form Column */
.checkout-form-card {
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 26px;
    padding: 32px 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.form-section-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-white, #ffffff);
    margin-bottom: 18px;
    text-align: left;
}

/* Custom Interactive Radio Cards */
.payment-radio-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.radio-card {
    display: flex;
    align-items: center;
    position: relative;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 18px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.radio-card:hover {
    border-color: var(--border-light-dark, #3f3f46);
    background-color: #202024;
    transform: translateY(-1px);
}

.payment-radio-input {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--light-grey, #94a3b8);
    border-radius: 50%;
    outline: none;
    margin-right: 18px;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-radio-input:checked {
    border-color: var(--accent-green, #00CD76);
    background-color: var(--accent-green, #00CD76);
    box-shadow: inset 0 0 0 3px var(--surface-dark-grey, #1a1a1e);
}

.radio-card:has(.payment-radio-input:checked) {
    border-color: var(--accent-green, #00CD76);
    background-color: rgba(0, 205, 118, 0.04);
    box-shadow: 0 0 15px rgba(0, 205, 118, 0.12);
}

.radio-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    width: 100%;
}

.radio-icon {
    font-size: 1.35rem;
    width: 24px;
    text-align: center;
}

.radio-card-content strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-white, #ffffff);
    font-weight: 700;
}

.radio-card-content small {
    display: block;
    font-size: 0.8rem;
    color: var(--light-grey, #94a3b8);
    margin-top: 2px;
}

/* Sidebar Elements */
.summary-card {
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 26px;
    padding: 28px 24px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.summary-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-white, #ffffff);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.summary-item {
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding-bottom: 12px;
}

.summary-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: var(--lighter-grey, #cbd5e1);
}

.summary-promo-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-green, #00CD76);
    margin-top: 6px;
}

.summary-subtotal {
    padding-top: 4px;
    font-size: 0.92rem;
    color: var(--light-grey, #94a3b8);
}

.summary-deposit {
    padding: 10px 0;
    border-top: 1px solid var(--border-dark-grey, #27272a);
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
}

.text-green-amount {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--accent-green, #00CD76);
}

.summary-balance {
    font-size: 0.85rem;
    color: var(--warning-orange, #fb923c);
    font-weight: 700;
}

/* Notices & Info Blocks */
.pop-alert {
    padding: 16px 20px;
    border-radius: 18px;
    font-size: 0.85rem;
    line-height: 1.55;
    box-sizing: border-box;
}

.pop-alert-error {
    background-color: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--danger-red, #ef4444);
    color: #fca5a5;
    display: flex;
    align-items: center;
    gap: 12px;
}

.notice-display {
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    margin-bottom: 18px;
}

.notice-icon {
    font-size: 1.25rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.notice-body strong {
    display: block;
    color: var(--text-white, #ffffff);
    margin-bottom: 4px;
}

.notice-body p {
    color: var(--light-grey, #94a3b8);
    margin: 0;
    font-size: 0.82rem;
}

/* WhatsApp Banner */
.whatsapp-pop-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid #22c55e;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.15);
    text-align: left;
    box-sizing: border-box;
}

.whatsapp-icon {
    font-size: 2rem;
    color: #22c55e;
    flex-shrink: 0;
}

.whatsapp-text-block {
    display: flex;
    flex-direction: column;
}

.whatsapp-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #22c55e;
    margin-bottom: 2px;
}

.whatsapp-text-block p {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--lighter-grey, #cbd5e1);
    margin: 0;
}

.whatsapp-link {
    color: #22c55e;
    text-decoration: none;
    font-weight: 800;
}

.whatsapp-link:hover {
    text-decoration: underline;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
    .checkout-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .checkout-summary-column {
        order: -1;
    }
}

@media (max-width: 576px) {
    .checkout-form-card,
    .summary-card {
        padding: 22px 18px;
    }

    .steps-main-title {
        font-size: 1.8rem;
    }
}

/**
 * Centered Steps Header Block - Dark Neon Theme
 * Path: assets/css/style.css
 */

.steps-header-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto 35px auto;
    padding: 0 16px;
    box-sizing: border-box;
    width: 100%;
}

.steps-header-block .steps-pre-label {
    margin-bottom: 12px;
}

.steps-main-title {
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1.25;
    color: var(--accent-green, #00CD76) !important;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
    text-align: center;
    width: 100%;
}

.steps-subtitle {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--lighter-grey, #cbd5e1);
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 576px) {
    .steps-main-title {
        font-size: 1.75rem;
    }
}

/**
 * Payment Instruction & Dynamic Notice Styles - Dark Neon Theme
 * Path: assets/css/style.css
 */

.notice-display {
    background-color: var(--secondary-dark-grey, #121214) !important;
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 22px;
    padding: 24px 22px;
    margin-bottom: 20px;
    box-sizing: border-box;
    transition: all 0.25s ease;
}

/* Default Awaiting Selection State */
.notice-awaiting-state {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
}

.notice-awaiting-state .notice-icon {
    font-size: 1.3rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.notice-body strong {
    display: block;
    font-size: 0.92rem;
    color: var(--text-white, #ffffff);
    margin-bottom: 4px;
}

.notice-body p {
    color: var(--light-grey, #94a3b8);
    font-size: 0.84rem;
    line-height: 1.5;
    margin: 0;
}

/* Active Instruction Container */
.notice-active-card {
    text-align: left;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.notice-active-card h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-white, #ffffff);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    padding-bottom: 12px;
}

.notice-active-card h4 i {
    font-size: 1.15rem;
}

/* Step-by-Step Instruction Rows */
.notice-steps-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notice-steps-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--accent-green, #00CD76);
    color: var(--accent-green, #00CD76);
    font-size: 0.75rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 2px;
}

.notice-text {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--lighter-grey, #cbd5e1);
    margin: 0;
}

.notice-text strong {
    color: var(--text-white, #ffffff);
}

.notice-highlight {
    color: var(--accent-green, #00CD76);
    font-weight: 800;
    letter-spacing: 0.3px;
}

/* WhatsApp Subtext Inside Selected Card */
.notice-wa-subtext {
    font-size: 0.8rem;
    color: var(--light-grey, #94a3b8);
    border-top: 1px solid var(--border-dark-grey, #27272a);
    padding-top: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.notice-wa-subtext i {
    color: #22c55e;
    font-size: 0.95rem;
}

/**
 * Payments & Invoicing POP Upload Ledger - Dark Neon Theme
 * Path: assets/css/style.css
 */

.payments-container {
    max-width: 1240px;
    margin: 40px auto 80px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Card Wrapper & Responsive Table */
.payments-card-wrapper {
    background-color: var(--primary-black, #000000);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.payments-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin: 0;
}

.payments-table th {
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--light-grey, #94a3b8);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.3px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    white-space: nowrap;
}

.payments-table td {
    padding: 20px;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    vertical-align: middle;
    color: var(--lighter-grey, #cbd5e1);
    font-size: 0.9rem;
}

.payments-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.015);
}

.inv-title {
    color: var(--text-white, #ffffff);
    font-weight: 700;
}

.inv-amount {
    font-size: 1.05rem;
    font-weight: 800;
}

.inv-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--light-grey, #94a3b8);
}

/* Payment Channel Badge */
.payment-channel-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--lighter-grey, #cbd5e1);
    white-space: nowrap;
}

/* POP Status Badges */
.pop-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.badge-allocated {
    background-color: rgba(0, 205, 118, 0.12);
    border: 1px solid var(--accent-green, #00CD76);
    color: var(--accent-green, #00CD76);
}

.badge-pending {
    background-color: rgba(251, 146, 60, 0.12);
    border: 1px solid var(--warning-orange, #fb923c);
    color: var(--warning-orange, #fb923c);
}

.badge-rejected {
    background-color: rgba(239, 68, 68, 0.12);
    border: 1px solid var(--danger-red, #ef4444);
    color: var(--danger-red, #ef4444);
}

.badge-unpaid {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.text-muted-dark {
    font-size: 0.8rem;
    color: var(--light-grey, #94a3b8);
    opacity: 0.7;
}

.settled-lock-tag {
    color: var(--accent-green, #00CD76);
    font-weight: 800;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Buttons inside Table */
.btn-sm {
    padding: 8px 14px;
    font-size: 0.8rem;
    border-radius: 12px;
    cursor: pointer;
}

.upload-label-btn {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.d-none {
    display: none !important;
}

/* Pop-alert Variants */
.pop-alert-success {
    background-color: rgba(0, 205, 118, 0.12);
    border: 1px solid var(--accent-green, #00CD76);
    color: var(--accent-green, #00CD76);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Empty State Cell */
.empty-invoices-cell {
    text-align: center;
    padding: 60px 24px !important;
}

.empty-invoices-cell i {
    font-size: 2.8rem;
    color: var(--light-grey, #94a3b8);
    margin-bottom: 14px;
    display: block;
}

.empty-invoices-cell p {
    color: var(--lighter-grey, #cbd5e1);
    margin: 0;
}

/* Responsive Table Adjustments */
@media (max-width: 992px) {
    .payments-table td, 
    .payments-table th {
        padding: 14px 16px;
    }
}

/**
 * Invoicing & Payments Ledger Table Adjustments - Dark Neon Theme
 * Path: assets/css/style.css
 */

/* WhatsApp POP Upload Banner - Bottom Margin Fix */
.whatsapp-pop-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid #22c55e;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.15);
    text-align: left;
    box-sizing: border-box;
    margin-bottom: 35px !important; /* Provides clear separation before the table card */
}

/* Payments Card Wrapper */
.payments-card-wrapper {
    background-color: var(--primary-black, #000000);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    width: 100%;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Compact Invoices Table - Strict Cell Fitting */
.payments-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    margin: 0;
}

.payments-table th {
    background-color: var(--surface-dark-grey, #1a1a1e);
    color: var(--light-grey, #94a3b8);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0.2px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    white-space: nowrap;
}

.payments-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
    vertical-align: middle;
    color: var(--lighter-grey, #cbd5e1);
    font-size: 0.84rem;
}

.payments-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Compact Cell Elements */
.inv-title {
    color: var(--text-white, #ffffff);
    font-weight: 700;
    font-size: 0.85rem;
}

.inv-amount {
    font-size: 0.95rem;
    font-weight: 800;
    white-space: nowrap;
}

.inv-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--light-grey, #94a3b8);
    white-space: nowrap;
}

.payment-channel-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 16px;
    padding: 3px 9px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--lighter-grey, #cbd5e1);
    white-space: nowrap;
}

.pop-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.75rem;
    border-radius: 10px;
    white-space: nowrap;
}

.settled-lock-tag {
    color: var(--accent-green, #00CD76);
    font-weight: 800;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

/* Tablet & Mobile Table Viewport Handling */
@media (max-width: 992px) {
    .whatsapp-pop-banner {
        margin-bottom: 25px !important;
    }

    .payments-table th,
    .payments-table td {
        padding: 12px 10px;
    }
}

/**
 * Invoicing & POP Cards Grid Matrix - Dark Neon Theme
 * Path: assets/css/style.css
 */

.invoices-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* Individual Invoice Card */
.invoice-card {
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.invoice-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-light-dark, #3f3f46);
}

/* Header Area */
.inv-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
}

.inv-number-tag {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-white, #ffffff);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.inv-number-tag i {
    color: var(--accent-green, #00CD76);
}

/* Body Area */
.inv-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}

.inv-package-name {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-white, #ffffff);
    margin: 0 0 16px 0;
}

.inv-metrics-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

.inv-metric-item label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--light-grey, #94a3b8);
    margin-bottom: 6px;
    text-transform: none;
}

.inv-date-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lighter-grey, #cbd5e1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.inv-price-row {
    background-color: var(--surface-dark-grey, #1a1a1e);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.price-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--light-grey, #94a3b8);
}

.price-amount {
    font-size: 1.35rem;
    font-weight: 900;
}

/* Footer Action Area */
.inv-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border-dark-grey, #27272a);
}

.pop-empty-note {
    font-size: 0.78rem;
    color: var(--light-grey, #94a3b8);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.8;
}

.upload-label-btn {
    margin: 0;
    cursor: pointer;
}

/* Empty State Card */
.empty-invoices-card {
    grid-column: 1 / -1;
    background-color: var(--secondary-dark-grey, #121214);
    border: 2px dashed var(--border-dark-grey, #27272a);
    border-radius: 26px;
    padding: 60px 24px;
    text-align: center;
    box-sizing: border-box;
}

.empty-invoices-card i {
    font-size: 3rem;
    color: var(--light-grey, #94a3b8);
    margin-bottom: 14px;
}

.empty-invoices-card p {
    color: var(--lighter-grey, #cbd5e1);
    font-size: 0.95rem;
    margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
    .invoices-card-grid {
        grid-template-columns: 1fr;
    }

    .invoice-card {
        padding: 20px 16px;
    }

    .inv-metrics-matrix {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .inv-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .inv-card-footer .btn {
        width: 100%;
        justify-content: center;
    }
}

/**
 * Proof of Payment Viewer Styles - Dark Neon Theme
 * Path: assets/css/style.css
 */

.pop-viewer-container {
    max-width: 1240px;
    margin: 30px auto 80px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.pop-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.pop-viewer-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

/* Document Frame */
.pop-preview-card {
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.pop-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background-color: var(--surface-dark-grey, #1a1a1e);
    border-bottom: 1px solid var(--border-dark-grey, #27272a);
}

.file-name-tag {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-white, #ffffff);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    word-break: break-all;
}

.file-size-tag {
    font-size: 0.78rem;
    color: var(--light-grey, #94a3b8);
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 12px;
    padding: 4px 10px;
}

.pop-preview-viewport {
    width: 100%;
    min-height: 600px;
    background-color: #09090b;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pop-pdf-frame {
    width: 100%;
    height: 700px;
    border: none;
}

.pop-image-wrap {
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.pop-image-preview {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--border-dark-grey, #27272a);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.pop-unsupported-preview {
    padding: 60px 24px;
    text-align: center;
}

.pop-unsupported-preview i {
    font-size: 3rem;
    color: var(--light-grey, #94a3b8);
    margin-bottom: 16px;
}

.pop-unsupported-preview p {
    color: var(--lighter-grey, #cbd5e1);
    margin-bottom: 20px;
}

/* Sidebar */
.pop-meta-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 992px) {
    .pop-viewer-grid {
        grid-template-columns: 1fr;
    }

    .pop-pdf-frame {
        height: 500px;
    }
}

/**
 * Modern Linear-SaaS Website Packages Presentation Grid (#stacks)
 * Path: assets/css/style.css
 */

/* 1. Main Grid Matrix Container */
.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 32px;
    max-width: 1240px;
    margin: 40px auto 80px auto;
    padding: 0 24px;
    box-sizing: border-box;
    align-items: stretch;
    background: transparent !important;
    border: none !important;
}

/* 2. Package Card Base */
.package-card {
    background: linear-gradient(180deg, rgba(26, 26, 30, 0.85) 0%, rgba(18, 18, 20, 0.95) 100%) !important;
    border: 1px solid var(--border-dark-grey, #27272a) !important;
    border-radius: 24px !important;
    padding: 36px 30px 32px 30px !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    box-sizing: border-box;
    position: relative;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Strip All Previous Pseudo Animation Engines */
.package-card::before,
.package-card::after {
    display: none !important;
    content: none !important;
}

.package-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 205, 118, 0.45) !important;
    box-shadow: 0 20px 40px -10px rgba(0, 205, 118, 0.12), 0 12px 32px -8px rgba(0, 0, 0, 0.7) !important;
}

/* 3. Featured / Best Seller Card Styling */
.package-card.best-seller-card {
    border-color: rgba(0, 205, 118, 0.35) !important;
    background: linear-gradient(180deg, rgba(0, 205, 118, 0.05) 0%, rgba(18, 18, 20, 0.95) 30%) !important;
}

/* 4. Top Promo Badge Row */
.card-badge-row {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 20px;
}

.card-promo-tag {
    position: static !important;
    transform: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 205, 118, 0.12) !important;
    color: var(--accent-green, #00CD76) !important;
    border: 1px solid rgba(0, 205, 118, 0.35) !important;
    padding: 6px 14px;
    border-radius: 999px !important;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    box-shadow: none !important;
}

.card-promo-tag i {
    color: var(--accent-green, #00CD76);
}

/* 5. Icon Container */
.fallback-card-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--accent-green, #00CD76) !important;
    border: 1px solid var(--border-dark-grey, #27272a) !important;
    border-radius: 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin: 0 0 20px 0 !important;
    box-shadow: none !important;
    flex-shrink: 0;
}

/* 6. Title & Description */
.package-card h3 {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-white, #ffffff) !important;
    margin: 0 0 12px 0;
    line-height: 1.25;
    letter-spacing: -0.3px;
    text-align: left !important;
}

.package-description-limit {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--light-grey, #94a3b8) !important;
    margin: 0 0 26px 0;
    min-height: 66px;
    text-align: left !important;
    flex-grow: 1;
}

/* 7. Pricing Matrix Box */
.pricing-matrix-box {
    width: 100%;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--border-dark-grey, #27272a) !important;
    border-radius: 16px;
    padding: 20px !important;
    margin: 0 0 24px 0 !important;
    text-align: left !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-sizing: border-box;
}

.original-value-line {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--light-grey, #94a3b8) !important;
    text-decoration: line-through;
    opacity: 0.7;
}

.display-price-success {
    font-size: 2rem;
    font-weight: 900;
    color: var(--accent-green, #00CD76) !important;
    line-height: 1;
    margin: 2px 0 6px 0;
    letter-spacing: -0.5px;
}

.display-price-primary {
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-white, #ffffff) !important;
    line-height: 1;
    margin: 2px 0 6px 0;
    letter-spacing: -0.5px;
}

.deposit-now-callout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--accent-green, #00CD76) !important;
}

.deposit-now-callout i {
    color: var(--accent-green, #00CD76);
}

.balance-due-notice {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--light-grey, #94a3b8) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.balance-due-notice.warning-orange {
    color: var(--warning-orange, #fb923c) !important;
}

/* 8. Get Started Button */
.package-card .btn-full-width {
    width: 100% !important;
    background: var(--accent-green, #00CD76) !important;
    color: #000000 !important;
    border: 1px solid var(--accent-green, #00CD76) !important;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 14px 24px;
    border-radius: 14px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 205, 118, 0.25) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

/* Strip Glowing Pseudo Layers from Buttons inside Package Card */
.package-card .btn-full-width::before,
.package-card .btn-full-width::after {
    display: none !important;
    content: none !important;
}

.package-card .btn-full-width:hover {
    background: var(--accent-green-hover, #00b368) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 205, 118, 0.4) !important;
}

.package-card .btn-full-width:hover i {
    color: #ffffff !important;
}

/* 9. Responsive Adjustments */
@media (max-width: 768px) {
    .package-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 16px;
        margin: 30px auto 60px auto;
    }

    .package-card {
        padding: 28px 20px !important;
    }

    .package-description-limit {
        min-height: auto;
    }

    .display-price-success,
    .display-price-primary {
        font-size: 1.75rem;
    }
}

/* Step 4 Modern Drag-and-Drop Uploader */
.dropzone-container {
    border: 2px dashed var(--border-light-dark, #3f3f46);
    background-color: var(--surface-dark-grey, #1a1a1e);
    border-radius: 20px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.dropzone-container:hover,
.dropzone-container.dragover {
    border-color: var(--accent-green, #00CD76);
    background-color: rgba(0, 205, 118, 0.04);
}

.dropzone-icon-wrapper {
    width: 68px;
    height: 68px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    background-color: rgba(0, 205, 118, 0.1);
    color: var(--accent-green, #00CD76);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    transition: transform 0.2s ease;
}

.dropzone-container:hover .dropzone-icon-wrapper {
    transform: translateY(-3px) scale(1.05);
}

.dropzone-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-white, #ffffff);
    margin-bottom: 6px;
}

.dropzone-subtitle {
    font-size: 0.85rem;
    color: var(--light-grey, #94a3b8);
    margin: 0;
}

/* Real-Time Client Image Thumbnail Grid */
.preview-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.preview-thumbnail-card {
    position: relative;
    background-color: var(--secondary-dark-grey, #121214);
    border: 1px solid var(--border-dark-grey, #27272a);
    border-radius: 14px;
    overflow: hidden;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    animation: fadeInStep 0.25s ease;
}

.preview-thumbnail-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-remove-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    background-color: rgba(0, 0, 0, 0.75);
    color: var(--danger-red, #ef4444);
    border: 1px solid var(--danger-red, #ef4444);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.preview-remove-badge:hover {
    background-color: var(--danger-red, #ef4444);
    color: #ffffff;
    transform: scale(1.1);
}

.preview-meta-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, transparent 100%);
    padding: 14px 6px 4px 6px;
    font-size: 0.68rem;
    color: var(--lighter-grey, #cbd5e1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}