/* ==========================================================
   ICON BALI DIGITAL — PHASE 4 R4
   Cyber Enterprise Visual System v2 — Hero & Rendering Stabilization
   Selective adoption inspired by the visual direction reference:
   - dark blue / cyan background language
   - premium framed cards and image panels
   - outline badges / section labels
   - strong title hierarchy
   ========================================================== */

:root {
    --ib-bg-950: #04131f;
    --ib-bg-925: #061827;
    --ib-bg-900: #072033;
    --ib-bg-850: #0a2740;
    --ib-bg-800: #0b3046;
    --ib-panel: rgba(8, 28, 44, 0.80);
    --ib-panel-strong: rgba(8, 24, 40, 0.92);
    --ib-panel-soft: rgba(11, 38, 53, 0.78);
    --ib-border: rgba(109, 210, 255, 0.18);
    --ib-border-strong: rgba(109, 210, 255, 0.34);
    --ib-glow: rgba(90, 215, 255, 0.18);
    --ib-glow-teal: rgba(56, 184, 156, 0.16);
    --ib-text: #EAF6FF;
    --ib-heading: #F7FBFF;
    --ib-muted: #A9C0D0;
    --ib-muted-2: #86A1B3;
    --ib-accent: #5AD7FF;
    --ib-accent-2: #38B89C;
    --ib-accent-3: #6DA4FF;
    --ib-vdeck: #6DA4FF;
    --ib-ops: #41D4A9;
    --ib-cy: #FF6D78;
    --ib-work: #FFB451;
}

/* ==========================================================
   PHASE 4 R12 — CONTINUOUS BRAND GRADIENT CANVAS
   Approved direction: Icon Bali Digital wordmark palette
   navy → blue → cyan → teal across the complete website.
   ========================================================== */
html {
    background: #041422 !important;
}

body {
    background:
        radial-gradient(circle at 18% 8%, rgba(68, 155, 255, .18), transparent 30%),
        radial-gradient(circle at 78% 18%, rgba(44, 211, 207, .16), transparent 30%),
        radial-gradient(circle at 92% 72%, rgba(36, 198, 151, .14), transparent 34%),
        linear-gradient(
            105deg,
            #041422 0%,
            #08233f 24%,
            #0a4770 48%,
            #0b6f7c 73%,
            #0f806d 100%
        ) !important;
    background-attachment: fixed !important;
    color: var(--ib-text) !important;
}

body {
    position: relative;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(125deg,
            rgba(255,255,255,.00) 0,
            rgba(255,255,255,.00) 64px,
            rgba(124, 182, 255, .018) 64px,
            rgba(124, 182, 255, .018) 65px),
        repeating-linear-gradient(90deg,
            rgba(255,255,255,.00) 0,
            rgba(255,255,255,.00) 118px,
            rgba(90,215,255,.018) 118px,
            rgba(90,215,255,.018) 119px);
    opacity: .20;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

body .bg-blur.bg1,
body .bg-blur.bg2 {
    opacity: .9 !important;
    filter: blur(60px) !important;
}
body .bg-blur.bg1 {
    background: radial-gradient(circle, rgba(59,130,246,.20), transparent 70%) !important;
}
body .bg-blur.bg2 {
    background: radial-gradient(circle, rgba(56,184,156,.16), transparent 70%) !important;
}

/* Header */
body .navbar,
body[data-product] .navbar {
    background:
        linear-gradient(
            90deg,
            rgba(4, 20, 34, .96) 0%,
            rgba(8, 35, 63, .95) 24%,
            rgba(10, 71, 112, .94) 48%,
            rgba(11, 111, 124, .93) 73%,
            rgba(15, 128, 109, .92) 100%
        ) !important;
    backdrop-filter: blur(14px) saturate(118%) !important;
    border-bottom: 1px solid rgba(109,210,255,.14) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.20) !important;
}

body .header-logo,
body[data-product] .header-logo {
    filter: drop-shadow(0 0 14px rgba(90,215,255,.14));
}

body .logo,
body[data-product] .logo {
    background: linear-gradient(90deg, #EAF6FF 0%, #7BBDFF 48%, #4DD8B0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

body .nav-menu a,
body[data-product] .nav-menu a,
body .mobile-toggle,
body[data-product] .mobile-toggle {
    color: #D4E6F4 !important;
}
body .nav-menu a:hover,
body .nav-menu a.active,
body[data-product] .nav-menu a:hover,
body[data-product] .nav-menu a.active,
body .dropdown-trigger:hover,
body[data-product] .dropdown-trigger:hover {
    color: var(--ib-accent) !important;
}
body .nav-btn,
body[data-product] .nav-btn {
    color: #EDF8FF !important;
    background: linear-gradient(180deg, rgba(90,215,255,.07), rgba(90,215,255,.03)) !important;
    border: 1px solid rgba(109,210,255,.34) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px rgba(90,215,255,.05),
        0 8px 20px rgba(0,0,0,.16) !important;
}
body .nav-btn:hover,
body[data-product] .nav-btn:hover {
    background: linear-gradient(180deg, rgba(90,215,255,.12), rgba(90,215,255,.05)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 0 22px rgba(90,215,255,.10),
        0 12px 24px rgba(0,0,0,.18) !important;
}

body .dropdown-content,
body[data-product] .dropdown-content {
    background: linear-gradient(180deg, rgba(8,27,42,.98), rgba(10,31,48,.98)) !important;
    border: 1px solid var(--ib-border-strong) !important;
    box-shadow:
        0 20px 44px rgba(0,0,0,.34),
        0 0 0 1px rgba(90,215,255,.06) !important;
}
body .dropdown-content a,
body[data-product] .dropdown-content a {
    color: #D6E6F3 !important;
    border-bottom-color: rgba(109,210,255,.08) !important;
}
body .dropdown-content a strong,
body[data-product] .dropdown-content a strong {
    color: #F0F8FF !important;
}
body .dropdown-content a:hover,
body[data-product] .dropdown-content a:hover {
    background: linear-gradient(90deg, rgba(90,215,255,.08), rgba(56,184,156,.06)) !important;
    color: #FFFFFF !important;
}
body .nav-product-meta,
body[data-product] .nav-product-meta {
    color: #8FAABD !important;
}

/* Global sections */
body .products,
body .enterprise,
body .lets-talk,
body .about-page,
body[data-product] .vdeck-hero,
body[data-product] .opsdeck-hero,
body[data-product] .cydeck-hero,
body[data-product] .workdeck-hero,
body[data-product] .vdeck-features,
body[data-product] .opsdeck-stats,
body[data-product] .features-section,
body[data-product] .cydeck-features,
body[data-product] .workdeck-features,
body[data-product] .architecture-section,
body[data-product] .vdeck-details,
body[data-product] .benefits-detail,
body[data-product] .cydeck-details,
body[data-product] .workdeck-details {
    background: transparent !important;
}

body .products,
body .enterprise,
body .lets-talk {
    background: linear-gradient(
        180deg,
        rgba(4, 18, 31, .055),
        rgba(4, 18, 31, .018)
    ) !important;
}

body .hero-slider,
body .products,
body .enterprise,
body .lets-talk,
body[data-product] .vdeck-hero,
body[data-product] .opsdeck-hero,
body[data-product] .cydeck-hero,
body[data-product] .workdeck-hero,
body[data-product] .vdeck-features,
body[data-product] .opsdeck-stats,
body[data-product] .features-section,
body[data-product] .cydeck-features,
body[data-product] .workdeck-features,
body[data-product] .architecture-section,
body[data-product] .vdeck-details,
body[data-product] .benefits-detail,
body[data-product] .cydeck-details,
body[data-product] .workdeck-details {
    position: relative !important;
    overflow: hidden !important;
}

body .products,
body .enterprise,
body .lets-talk,
body .about-page,
body[data-product] .vdeck-features,
body[data-product] .opsdeck-stats,
body[data-product] .features-section,
body[data-product] .cydeck-features,
body[data-product] .workdeck-features,
body[data-product] .architecture-section,
body[data-product] .vdeck-details,
body[data-product] .benefits-detail,
body[data-product] .cydeck-details,
body[data-product] .workdeck-details {
    padding-top: 76px !important;
    padding-bottom: 76px !important;
    position: relative !important;
}
body[data-product] .vdeck-hero,
body[data-product] .opsdeck-hero,
body[data-product] .cydeck-hero,
body[data-product] .workdeck-hero {
    padding-top: 132px !important;
    padding-bottom: 56px !important;
}

body .hero-slider::before,
body .products::before,
body .enterprise::before,
body .lets-talk::before,
body[data-product] .vdeck-hero::before,
body[data-product] .opsdeck-hero::before,
body[data-product] .cydeck-hero::before,
body[data-product] .workdeck-hero::before,
body[data-product] .vdeck-features::before,
body[data-product] .opsdeck-stats::before,
body[data-product] .features-section::before,
body[data-product] .cydeck-features::before,
body[data-product] .workdeck-features::before,
body[data-product] .architecture-section::before,
body[data-product] .vdeck-details::before,
body[data-product] .benefits-detail::before,
body[data-product] .cydeck-details::before,
body[data-product] .workdeck-details::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 14% 14%, rgba(109,164,255,.035), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(56,184,156,.035), transparent 26%);
    z-index: 0;
}

body .hero-slider > *,
body .products > *,
body .enterprise > *,
body .lets-talk > *,
body[data-product] .vdeck-hero > *,
body[data-product] .opsdeck-hero > *,
body[data-product] .cydeck-hero > *,
body[data-product] .workdeck-hero > *,
body[data-product] .vdeck-features > *,
body[data-product] .opsdeck-stats > *,
body[data-product] .features-section > *,
body[data-product] .cydeck-features > *,
body[data-product] .workdeck-features > *,
body[data-product] .architecture-section > *,
body[data-product] .vdeck-details > *,
body[data-product] .benefits-detail > *,
body[data-product] .cydeck-details > *,
body[data-product] .workdeck-details > * {
    position: relative;
    z-index: 1;
}

/* Section labels and hero badges */
body .hero-badge,
body[data-product] .benefit-tag,
body[data-product] .product-hero-tag,
body[data-product] .ztna-tag,
body .section-title span,
body[data-product] .section-title span,
body .lets-talk-left span,
body[data-product] .product-accent-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(6,27,41,.74), rgba(9,33,49,.64)) !important;
    border: 1px solid rgba(109,210,255,.32) !important;
    color: #8DE6FF !important;
    letter-spacing: .12em !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(90,215,255,.05),
        0 10px 24px rgba(0,0,0,.16) !important;
}

body[data-product="vdeck"] .benefit-tag,
body[data-product="vdeck"] .product-hero-tag { color: #86B6FF !important; }
body[data-product="opsdeck"] .benefit-tag,
body[data-product="opsdeck"] .product-hero-tag { color: #79F0C8 !important; }
body[data-product="cydeck"] .benefit-tag,
body[data-product="cydeck"] .product-hero-tag { color: #FF9DA7 !important; border-color: rgba(255,109,120,.32) !important; }
body[data-product="workdeck"] .benefit-tag,
body[data-product="workdeck"] .ztna-tag,
body[data-product="workdeck"] .product-hero-tag { color: #FFD18A !important; border-color: rgba(255,180,81,.28) !important; }

/* Home hero */
body .hero-slider {
    background: transparent !important;
}
body .hero-slider .hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(4, 20, 34, .42) 0%,
            rgba(5, 28, 48, .22) 44%,
            rgba(7, 74, 91, .12) 74%,
            rgba(11, 112, 99, .08) 100%
        ) !important;
}
body .hero-slider .hero-wrapper {
    align-items: center !important;
}
body .hero-slider .hero-left h1 {
    color: var(--ib-heading) !important;
    text-shadow: 0 10px 34px rgba(0,0,0,.18) !important;
}
body .hero-slider .hero-left h1 span {
    background: linear-gradient(90deg, #7DB4FF 0%, #5AD7FF 48%, #45D4B1 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body .hero-slider .hero-left p {
    color: var(--ib-muted) !important;
}
body .hero-slider .hero-right {
    position: relative !important;
    background: linear-gradient(180deg, rgba(7,24,39,.78), rgba(8,28,44,.94)) !important;
    border: 1px solid rgba(109,210,255,.22) !important;
    border-radius: 26px !important;
    padding: 18px !important;
    box-shadow:
        0 22px 60px rgba(0,0,0,.30),
        0 0 0 1px rgba(90,215,255,.05),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
    overflow: hidden !important;
}
body .hero-slider .hero-right::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.05);
    pointer-events: none;
}
body .hero-slider .hero-right img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 340px !important;
    object-fit: contain !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(9,28,46,.92), rgba(8,22,36,.98)) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.16) !important;
}

/* Prevent hero slider white line */
body .hero-slider .slider-nav,
body .hero-slider .slider-nav:hover {
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
}
body .hero-slider .nav-btn-slide {
    pointer-events: auto !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(12,33,50,.84) !important;
    border: 1px solid rgba(109,210,255,.18) !important;
    color: #F7FBFF !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}
body .hero-slider .nav-btn-slide:hover {
    background: rgba(90,215,255,.16) !important;
    color: #FFFFFF !important;
}
body .hero-slider .slider-dots span,
body .hero-slider .slider-dots button,
body .hero-slider .dot {
    background: rgba(255,255,255,.22) !important;
}
body .hero-slider .slider-dots .active,
body .hero-slider .slider-dots span.active,
body .hero-slider .slider-dots button.active,
body .hero-slider .dot.active {
    background: linear-gradient(90deg, var(--ib-accent), var(--ib-accent-2)) !important;
}

/* Unified cards / framed panels */
body .product-card,
body .enterprise-box,
body .stat-card,
body .lets-talk-box,
body .talk-item,
body .about-page .about-content,
body[data-product] .vdeck-card,
body[data-product] .ops-card,
body[data-product] .cy-card,
body[data-product] .work-card,
body[data-product] .arch-card,
body[data-product] .architecture-box,
body[data-product] .arch-container,
body[data-product] .arch-container-cy,
body[data-product] .arch-container-work,
body[data-product] .stat-box,
body[data-product] .threat-alert-box {
    position: relative !important;
    background:
        linear-gradient(
            180deg,
            rgba(5, 24, 40, .58),
            rgba(4, 20, 34, .70)
        ) !important;
    backdrop-filter: blur(14px) saturate(112%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(112%) !important;
    border: 1px solid rgba(157, 224, 241, .24) !important;
    border-radius: 24px !important;
    color: var(--ib-text) !important;
    box-shadow:
        0 16px 34px rgba(0,0,0,.14),
        0 0 0 1px rgba(96,220,255,.035),
        inset 0 1px 0 rgba(255,255,255,.055) !important;
    overflow: hidden !important;
}
body .product-card::before,
body .enterprise-box::before,
body .stat-card::before,
body .lets-talk-box::before,
body .talk-item::before,
body .about-page .about-content::before,
body[data-product] .vdeck-card::before,
body[data-product] .ops-card::before,
body[data-product] .cy-card::before,
body[data-product] .work-card::before,
body[data-product] .arch-card::before,
body[data-product] .architecture-box::before,
body[data-product] .arch-container::before,
body[data-product] .arch-container-cy::before,
body[data-product] .arch-container-work::before,
body[data-product] .stat-box::before,
body[data-product] .threat-alert-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(126, 226, 246, .055),
            rgba(60, 184, 212, .018) 34%,
            transparent 62%
        );
    pointer-events: none;
}

/* Typography */
body .section-title h2,
body .hero-left h1,
body .product-card h2,
body .product-card h3,
body .enterprise-box h2,
body .enterprise-box h3,
body .stat-card h3,
body .lets-talk-box h2,
body .talk-item h4,
body .about-page .section-title h2,
body .about-page .about-content h2,
body .about-page .about-content h3,
body[data-product] h1,
body[data-product] .detail-title,
body[data-product] .detail-subtitle,
body[data-product] .vdeck-card h3,
body[data-product] .ops-card h3,
body[data-product] .cy-card h3,
body[data-product] .work-card h3,
body[data-product] .arch-card h4,
body[data-product] .opsdeck-stats-grid .stat-box h3 {
    color: var(--ib-heading) !important;
}

body .product-card p,
body .product-card li,
body .product-card span,
body .enterprise-box p,
body .stat-card p,
body .lets-talk-box p,
body .talk-item p,
body .about-page .about-content p,
body .about-page .about-subtitle,
body .products .section-title p,
body .enterprise p,
body .lets-talk p,
body[data-product] .section-title p,
body[data-product] .section-title-p,
body[data-product] .detail-copy,
body[data-product] .vdeck-card li,
body[data-product] .ops-card p,
body[data-product] .cy-card p,
body[data-product] .work-card p,
body[data-product] .arch-card p,
body[data-product] .stat-box p,
body[data-product] .feature-list li,
body[data-product] .architecture-section small,
body .footer-text p {
    color: var(--ib-muted) !important;
}

body .product-link,
body[data-product] .product-link,
body[data-product] .detail-list-item i,
body[data-product] .product-accent-icon,
body .talk-item i {
    color: var(--ib-accent) !important;
}
body .product-card .product-link,
body .product-card .product-link:hover {
    color: #8FDBFF !important;
}

/* Home products */
body .product-icon {
    background: linear-gradient(135deg, rgba(109,164,255,.18), rgba(56,184,156,.18)) !important;
    border: 1px solid rgba(109,210,255,.18) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body .product-icon i,
body .stat-card i,
body[data-product] .vdeck-card i,
body[data-product] .ops-card i,
body[data-product] .cy-card i,
body[data-product] .work-card i {
    color: var(--ib-accent) !important;
}
body .product-card h2 span,
body .product-header span {
    color: var(--ib-muted-2) !important;
}

/* Product-page accent controls */
body[data-product="vdeck"] .product-accent-icon,
body[data-product="vdeck"] .vdeck-card i,
body[data-product="vdeck"] .feature-list i,
body[data-product="vdeck"] .product-hero-tag,
body[data-product="vdeck"] .detail-list-item i {
    color: var(--ib-vdeck) !important;
}
body[data-product="opsdeck"] .product-accent-icon,
body[data-product="opsdeck"] .ops-card i,
body[data-product="opsdeck"] .product-hero-tag,
body[data-product="opsdeck"] .opsdeck-stats-grid .stat-box h3,
body[data-product="opsdeck"] .detail-list-item i {
    color: var(--ib-ops) !important;
}
body[data-product="cydeck"] .product-accent-icon,
body[data-product="cydeck"] .cy-card i,
body[data-product="cydeck"] .product-hero-tag,
body[data-product="cydeck"] .detail-list-item i,
body[data-product="cydeck"] .threat-alert-box {
    color: var(--ib-cy) !important;
}
body[data-product="workdeck"] .product-accent-icon,
body[data-product="workdeck"] .work-card i,
body[data-product="workdeck"] .product-hero-tag,
body[data-product="workdeck"] .detail-list-item i {
    color: var(--ib-work) !important;
}

/* Product titles */
body[data-product] .vdeck-hero h1,
body[data-product] .opsdeck-hero h1,
body[data-product] .cydeck-hero h1,
body[data-product] .workdeck-hero h1 {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: var(--ib-heading) !important;
    text-shadow: 0 12px 34px rgba(0,0,0,.18) !important;
}
body[data-product="vdeck"] .vdeck-hero h1 {
    color: #EAF2FF !important;
}
body[data-product="opsdeck"] .opsdeck-hero h1 {
    color: #ECFFF8 !important;
}
body[data-product="cydeck"] .cydeck-hero h1 {
    color: #FFF1F3 !important;
}
body[data-product="workdeck"] .workdeck-hero h1 {
    color: #FFF5E9 !important;
}

body[data-product] .product-hero p,
body[data-product] .vdeck-hero p,
body[data-product] .opsdeck-hero p,
body[data-product] .cydeck-hero p,
body[data-product] .workdeck-hero p {
    color: var(--ib-muted) !important;
}

body[data-product] .benefit-tag,
body[data-product] .product-hero-tag,
body[data-product] .ztna-tag {
    margin-top: 2px !important;
    margin-bottom: 14px !important;
    position: relative !important;
    z-index: 3 !important;
}

body[data-product] .vdeck-hero h1,
body[data-product] .opsdeck-hero h1,
body[data-product] .cydeck-hero h1,
body[data-product] .workdeck-hero h1 {
    margin-top: 4px !important;
}

/* BVER mark visibility on product pages */
body[data-product] .hero-logo {
    display: block !important;
    width: 74px !important;
    height: 74px !important;
    margin: 18px auto 18px !important;
    position: relative !important;
    z-index: 3 !important;
    background: linear-gradient(180deg, rgba(7,24,39,.86), rgba(6,18,30,.96)) !important;
    border: 1px solid rgba(109,210,255,.22) !important;
    border-radius: 50% !important;
    padding: 10px !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.05) !important;
    filter: saturate(1.18) contrast(1.12) brightness(1.04) !important;
}

/* Architecture / image frames */
body[data-product] .architecture-section {
    position: relative !important;
}
body[data-product] .arch-container,
body[data-product] .arch-container-cy,
body[data-product] .arch-container-work {
    padding: clamp(24px, 3vw, 34px) !important;
}
body[data-product] .architecture-grid,
body[data-product] .opsdeck-features-grid,
body[data-product] .opsdeck-stats-grid,
body[data-product] .vdeck-grid,
body[data-product] .cydeck-grid,
body[data-product] .workdeck-grid,
body .product-grid,
body .stats {
    gap: 28px !important;
    align-items: stretch !important;
}
body .stats + .stats {
    margin-top: 28px !important;
}
body .product-grid,
body .architecture-grid,
body .opsdeck-features-grid,
body .opsdeck-stats-grid,
body .vdeck-grid,
body .cydeck-grid,
body .workdeck-grid {
    align-items: stretch !important;
}
body .product-card,
body .stat-card,
body[data-product] .vdeck-card,
body[data-product] .ops-card,
body[data-product] .cy-card,
body[data-product] .work-card,
body[data-product] .arch-card,
body .talk-item {
    height: 100% !important;
}
body[data-product] .vdeck-card,
body[data-product] .ops-card,
body[data-product] .cy-card,
body[data-product] .work-card,
body .product-card,
body .stat-card,
body .talk-item,
body[data-product] .arch-card,
body .enterprise-box,
body .lets-talk-box,
body .about-page .about-content {
    padding: clamp(22px, 3vw, 32px) !important;
}
body[data-product] .vdeck-features .vdeck-grid,
body[data-product] .features-section .opsdeck-features-grid,
body[data-product] .cydeck-features .cydeck-grid,
body[data-product] .workdeck-features .workdeck-grid,
body[data-product] .opsdeck-stats .opsdeck-stats-grid {
    margin-top: 0 !important;
}
body[data-product] .architecture-zoomable,
body[data-product] .arch-card img,
body[data-product] .arch-image-wrapper img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 18px !important;
    margin-bottom: 16px !important;
    background: linear-gradient(180deg, #FAFCFF, #EEF4FB) !important;
    border: 1px solid rgba(140,170,210,.34) !important;
    box-shadow: 0 14px 28px rgba(2,10,18,.18) !important;
    padding: 10px !important;
}
body[data-product] .arch-card {
    overflow: hidden !important;
}
body[data-product] .arch-image-wrapper {
    position: relative !important;
    background: linear-gradient(180deg, rgba(7,24,38,.75), rgba(8,24,39,.95)) !important;
    border: 1px solid rgba(109,210,255,.12) !important;
    border-radius: 22px !important;
    padding: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}
body[data-product] .arch-image-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.03);
    pointer-events: none;
}

/* About page */
body .about-page .about-highlight {
    background: linear-gradient(180deg, rgba(7,27,41,.78), rgba(9,30,46,.92)) !important;
    border: 1px solid rgba(109,210,255,.18) !important;
    color: #EAF6FF !important;
}
body .about-page .about-highlight strong,
body .about-page .about-highlight b {
    color: #FFFFFF !important;
}

/* Footer */
body .footer,
body[data-product] .footer {
    background: transparent !important;
    border-top: 1px solid rgba(109,210,255,.08) !important;
}
body .footer-text h3,
body .footer-text p {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: #89A5B8 !important;
}

/* Mobile */
@media (max-width: 991px) {
    body .navbar,
    body[data-product] .navbar {
        background:
            linear-gradient(
                90deg,
                rgba(4, 20, 34, .98) 0%,
                rgba(8, 45, 77, .97) 45%,
                rgba(10, 104, 111, .96) 76%,
                rgba(15, 128, 109, .95) 100%
            ) !important;
    }
    body .nav-menu,
    body[data-product] .nav-menu {
        background: linear-gradient(180deg, rgba(6,21,33,.98), rgba(10,29,46,.98)) !important;
        border-color: rgba(109,210,255,.14) !important;
    }
    body .mobile-overlay {
        background: rgba(3,10,18,.58) !important;
    }
    body .nav-menu .dropdown.active .dropdown-content,
    body[data-product] .nav-menu .dropdown.active .dropdown-content {
        background: linear-gradient(180deg, rgba(9,28,43,.98), rgba(11,32,49,.98)) !important;
    }
    body .hero-slider .hero-right img {
        max-height: 280px !important;
    }
    body .product-grid,
    body .stats,
    body[data-product] .architecture-grid,
    body[data-product] .opsdeck-features-grid,
    body[data-product] .opsdeck-stats-grid,
    body[data-product] .vdeck-grid,
    body[data-product] .cydeck-grid,
    body[data-product] .workdeck-grid {
        gap: 22px !important;
    }
}

@media (max-width: 991px) {
    body[data-product] .vdeck-hero,
    body[data-product] .opsdeck-hero,
    body[data-product] .cydeck-hero,
    body[data-product] .workdeck-hero {
        padding-top: 118px !important;
        padding-bottom: 50px !important;
    }
    body[data-product] .hero-logo {
        width: 68px !important;
        height: 68px !important;
        margin: 16px auto 16px !important;
    }
}

@media (max-width: 768px) {
    body[data-product] .vdeck-hero,
    body[data-product] .opsdeck-hero,
    body[data-product] .cydeck-hero,
    body[data-product] .workdeck-hero {
        padding-top: 108px !important;
    }
    body[data-product] .hero-logo {
        width: 62px !important;
        height: 62px !important;
        margin: 14px auto 14px !important;
    }

    body .hero-badge,
    body[data-product] .benefit-tag,
    body[data-product] .product-hero-tag,
    body[data-product] .ztna-tag,
    body .section-title span,
    body[data-product] .section-title span,
    body .lets-talk-left span,
    body[data-product] .product-accent-tag {
        min-height: 38px !important;
        padding: 9px 15px !important;
        font-size: 11px !important;
        letter-spacing: .10em !important;
    }
    body .hero-slider .hero-right {
        padding: 14px !important;
        border-radius: 22px !important;
    }
    body .hero-slider .hero-right img {
        max-height: 240px !important;
        border-radius: 16px !important;
    }
    body .products,
    body .enterprise,
    body .lets-talk,
    body[data-product] .vdeck-features,
    body[data-product] .opsdeck-stats,
    body[data-product] .features-section,
    body[data-product] .cydeck-features,
    body[data-product] .workdeck-features,
    body[data-product] .architecture-section,
    body[data-product] .vdeck-details,
    body[data-product] .benefits-detail,
    body[data-product] .cydeck-details,
    body[data-product] .workdeck-details {
        padding-top: 58px !important;
        padding-bottom: 58px !important;
    }
    body .enterprise-box,
    body .lets-talk-box,
    body[data-product] .arch-card,
    body[data-product] .arch-container,
    body[data-product] .arch-container-cy,
    body[data-product] .arch-container-work,
    body[data-product] .vdeck-card,
    body[data-product] .ops-card,
    body[data-product] .cy-card,
    body[data-product] .work-card,
    body .product-card,
    body .stat-card,
    body .talk-item,
    body .about-page .about-content {
        padding: 20px !important;
        border-radius: 18px !important;
    }
    body .product-grid,
    body .stats,
    body[data-product] .architecture-grid,
    body[data-product] .opsdeck-features-grid,
    body[data-product] .opsdeck-stats-grid,
    body[data-product] .vdeck-grid,
    body[data-product] .cydeck-grid,
    body[data-product] .workdeck-grid {
        gap: 18px !important;
    }
    body .hero-slider .nav-btn-slide {
        width: 42px !important;
        height: 42px !important;
    }
}


/* ==========================================================
   PHASE 4 R5 — HERO & RENDERING STABILIZATION
   Fixes long-capture blank/duplicate sections and slider blank frames.
   ========================================================== */

/* One continuous visual canvas. Section backgrounds must not create
   separate color bands; the BODY owns the brand gradient. */
body .hero-slider,
body .hero-slider .hero-overlay,
body .products,
body .enterprise,
body .lets-talk,
body .about-page,
body[data-product] .vdeck-hero,
body[data-product] .opsdeck-hero,
body[data-product] .cydeck-hero,
body[data-product] .workdeck-hero,
body[data-product] .vdeck-features,
body[data-product] .opsdeck-stats,
body[data-product] .features-section,
body[data-product] .cydeck-features,
body[data-product] .workdeck-features,
body[data-product] .architecture-section,
body[data-product] .vdeck-details,
body[data-product] .benefits-detail,
body[data-product] .cydeck-details,
body[data-product] .workdeck-details {
    background: transparent !important;
}

/* Remove per-section glow layers introduced by R4 v2.  The global
   background already carries the Icon Bali blue→cyan→teal gradient. */
body .hero-slider::before,
body .products::before,
body .enterprise::before,
body .lets-talk::before,
body[data-product] .vdeck-hero::before,
body[data-product] .opsdeck-hero::before,
body[data-product] .cydeck-hero::before,
body[data-product] .workdeck-hero::before,
body[data-product] .vdeck-features::before,
body[data-product] .opsdeck-stats::before,
body[data-product] .features-section::before,
body[data-product] .cydeck-features::before,
body[data-product] .workdeck-features::before,
body[data-product] .architecture-section::before,
body[data-product] .vdeck-details::before,
body[data-product] .benefits-detail::before,
body[data-product] .cydeck-details::before,
body[data-product] .workdeck-details::before {
    content: none !important;
    display: none !important;
}

/* Full-page capture and normal scrolling must render structural content
   normally.  Keep lazy-loading for architecture images themselves, but
   remove content-visibility from their parent sections. */
#products,
#enterprise,
#contact,
.architecture-section,
.vdeck-details,
.benefits-detail,
.cydeck-details,
.workdeck-details,
.products,
.enterprise,
.lets-talk {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
}

/* Slider stabilization: all slide DOM stays paintable; only opacity is
   animated. This avoids visibility/lazy-load blank frames during swap. */
body .hero-slider .slide {
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .55s ease-in-out !important;
    will-change: opacity;
}
body .hero-slider .slide.active {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
body .hero-slider .slide .hero-overlay {
    background: transparent !important;
}

/* The hero uses the same global brand gradient as the rest of the page.
   A subtle transparent glow is allowed inside the frame, not across the
   whole section. */
body .hero-slider .hero-right {
    background: linear-gradient(145deg, rgba(7,26,43,.88), rgba(7,37,46,.82)) !important;
    border-color: rgba(102,205,255,.25) !important;
}

/* Fixed header safety zone for all product heroes.  The navbar is fixed,
   therefore the hero must own explicit top clearance instead of relying on
   arbitrary margin from legacy CSS. */
body[data-product] .vdeck-hero,
body[data-product] .opsdeck-hero,
body[data-product] .cydeck-hero,
body[data-product] .workdeck-hero {
    box-sizing: border-box !important;
    padding-top: 168px !important;
    padding-bottom: 62px !important;
    min-height: 0 !important;
    overflow: visible !important;
}
body[data-product] .benefit-tag,
body[data-product] .product-hero-tag,
body[data-product] .ztna-tag {
    margin-top: 0 !important;
}
body[data-product] .hero-logo {
    margin-top: 18px !important;
    margin-bottom: 18px !important;
}

/* Prevent section clipping caused by blanket overflow:hidden. */
body .products,
body .enterprise,
body .lets-talk,
body[data-product] .vdeck-features,
body[data-product] .opsdeck-stats,
body[data-product] .features-section,
body[data-product] .cydeck-features,
body[data-product] .workdeck-features,
body[data-product] .architecture-section,
body[data-product] .vdeck-details,
body[data-product] .benefits-detail,
body[data-product] .cydeck-details,
body[data-product] .workdeck-details {
    overflow: visible !important;
}

@media (max-width: 991px) {
    body[data-product] .vdeck-hero,
    body[data-product] .opsdeck-hero,
    body[data-product] .cydeck-hero,
    body[data-product] .workdeck-hero {
        padding-top: 150px !important;
        padding-bottom: 54px !important;
    }
}

@media (max-width: 768px) {
    body[data-product] .vdeck-hero,
    body[data-product] .opsdeck-hero,
    body[data-product] .cydeck-hero,
    body[data-product] .workdeck-hero {
        padding-top: 136px !important;
    }
}

/* ==========================================================
   ICON BALI DIGITAL — PHASE 4 R5 CORRECTIVE
   HOME Slider Runtime Restoration v1

   Root cause fixed:
   R4 generic `body .hero-slider > * { position: relative; }`
   overrode the absolute positioning required by slides, arrows and dots.
   ========================================================== */

/* Hero itself remains the positioning context. */
body .hero-slider {
    position: relative !important;
    overflow: hidden !important;
}

/* Every slide must occupy the SAME hero viewport. */
body .hero-slider > .slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 1 !important;
    visibility: visible !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .55s ease-in-out !important;
}

body .hero-slider > .slide.active {
    z-index: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Keep each slide's internal content above its overlay. */
body .hero-slider > .slide > .hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

body .hero-slider > .slide > .hero-wrapper {
    position: relative !important;
    z-index: 2 !important;
}

/* Restore arrows as an absolute overlay. The full-width parent remains
   height:0 to preserve the previous white-line fix. */
body .hero-slider > .slider-nav,
body .hero-slider > .slider-nav:hover {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 30 !important;
    pointer-events: none !important;
}

body .hero-slider > .slider-nav .nav-btn-slide {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Restore dots to the bottom of the hero viewport. */
body .hero-slider > .slider-dots {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 30px !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    z-index: 30 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

body .hero-slider > .slider-dots > .dot {
    display: block !important;
    flex: 0 0 auto !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(255,255,255,.26) !important;
    transition: width .25s ease, background .25s ease !important;
}

body .hero-slider > .slider-dots > .dot.active {
    width: 34px !important;
    background: linear-gradient(90deg, #6DA4FF, #5AD7FF, #38B89C) !important;
}

@media (max-width: 991px) {
    body .hero-slider > .slider-nav,
    body .hero-slider > .slider-nav:hover {
        padding: 0 14px !important;
    }

    body .hero-slider > .slider-dots {
        bottom: 22px !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    body .hero-slider > .slider-nav,
    body .hero-slider > .slider-nav:hover {
        padding: 0 10px !important;
    }

    body .hero-slider > .slider-dots {
        bottom: 16px !important;
    }

    body .hero-slider > .slider-dots > .dot {
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        min-height: 8px !important;
    }

    body .hero-slider > .slider-dots > .dot.active {
        width: 28px !important;
    }
}


/* ==========================================================
   PHASE 4 R6 — LAYOUT / ABOUT / FOOTER NORMALIZATION
   Consolidates the R5 HOME slider runtime corrective into this theme.
   ========================================================== */

/* ABOUT: fixed-navbar clearance and readable final highlight. */
body .about-page {
    box-sizing: border-box !important;
    padding-top: 148px !important;
    padding-bottom: 46px !important;
    min-height: 0 !important;
    scroll-margin-top: 118px !important;
}
body .about-page .section-title {
    margin-top: 0 !important;
    margin-bottom: 36px !important;
}
body .about-page .section-title span {
    position: relative !important;
    z-index: 2 !important;
}
body .about-page .about-highlight {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #EAF6FF !important;
    -webkit-text-fill-color: #EAF6FF !important;
    background: linear-gradient(90deg, rgba(90,215,255,.055), rgba(56,184,156,.045)) !important;
    border: 1px solid rgba(109,210,255,.20) !important;
    padding: 22px 24px !important;
    margin-top: 34px !important;
    line-height: 1.55 !important;
}
body .about-page .about-highlight::before,
body .about-page .about-highlight::after {
    display: none !important;
    content: none !important;
}

/* FOOTER: compact terminal spacing. */
body .footer,
body[data-product] .footer {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 26px 0 28px !important;
}
body .footer .container,
body .footer-wrapper,
body .footer-brand,
body .footer-text {
    min-height: 0 !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body .footer-text p {
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* PRODUCT: reduce excessive vertical gaps while preserving the fixed-header
   safety zone of the hero. */
body[data-product] .vdeck-features,
body[data-product] .opsdeck-stats,
body[data-product] .features-section,
body[data-product] .cydeck-features,
body[data-product] .workdeck-features,
body[data-product] .architecture-section,
body[data-product] .vdeck-details,
body[data-product] .benefits-detail,
body[data-product] .cydeck-details,
body[data-product] .workdeck-details {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}
body[data-product] .section-title {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
}
body[data-product] .architecture-grid,
body[data-product] .opsdeck-features-grid,
body[data-product] .opsdeck-stats-grid,
body[data-product] .vdeck-grid,
body[data-product] .cydeck-grid,
body[data-product] .workdeck-grid {
    gap: 24px !important;
}
body[data-product] .detail-grid,
body[data-product] .benefits-grid {
    gap: 34px !important;
}

@media (max-width: 991px) {
    body .about-page {
        padding-top: 132px !important;
        padding-bottom: 40px !important;
    }
    body[data-product] .vdeck-features,
    body[data-product] .opsdeck-stats,
    body[data-product] .features-section,
    body[data-product] .cydeck-features,
    body[data-product] .workdeck-features,
    body[data-product] .architecture-section,
    body[data-product] .vdeck-details,
    body[data-product] .benefits-detail,
    body[data-product] .cydeck-details,
    body[data-product] .workdeck-details {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

@media (max-width: 768px) {
    body .about-page {
        padding-top: 118px !important;
        padding-bottom: 34px !important;
    }
    body .about-page .about-highlight {
        padding: 18px !important;
        margin-top: 28px !important;
    }
    body .footer,
    body[data-product] .footer {
        padding: 22px 0 24px !important;
    }
    body[data-product] .vdeck-features,
    body[data-product] .opsdeck-stats,
    body[data-product] .features-section,
    body[data-product] .cydeck-features,
    body[data-product] .workdeck-features,
    body[data-product] .architecture-section,
    body[data-product] .vdeck-details,
    body[data-product] .benefits-detail,
    body[data-product] .cydeck-details,
    body[data-product] .workdeck-details {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }
}

/* ==========================================================
   PHASE 4 R6 CORRECTIVE v2
   Section Rhythm + Hero Separator + Product Card Label Fix
   ========================================================== */

/* HOME: remove any visible separator line under slideshow. */
body .hero-slider,
body .hero-slider::before,
body .hero-slider::after {
    border-bottom: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
body .hero-slider {
    margin-bottom: 0 !important;
}
body .hero-slider + .products,
body #products {
    border-top: 0 !important;
    box-shadow: none !important;
}

/* HOME: tighter continuous vertical rhythm. */
body .products {
    padding-top: 50px !important;
    padding-bottom: 46px !important;
}
body .enterprise {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}
body .lets-talk {
    padding-top: 46px !important;
    padding-bottom: 42px !important;
}
body .products .section-title,
body .enterprise .section-title,
body .lets-talk .section-title {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
}
body .product-grid {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body .enterprise-box,
body .lets-talk-box {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* HOME product names must remain visually consistent on one line. */
body .product-card .product-header h2,
body .product-card h2 {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    font-size: clamp(18px, 1.45vw, 22px) !important;
    line-height: 1.15 !important;
}
body .product-card .product-header {
    min-width: 0 !important;
}
body .product-card .product-header > div:last-child {
    min-width: 0 !important;
}

/* PRODUCT pages: compact vertical rhythm between logical sections. */
body[data-product] .vdeck-features,
body[data-product] .opsdeck-stats,
body[data-product] .features-section,
body[data-product] .cydeck-features,
body[data-product] .workdeck-features,
body[data-product] .architecture-section,
body[data-product] .vdeck-details,
body[data-product] .benefits-detail,
body[data-product] .cydeck-details,
body[data-product] .workdeck-details {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
}
body[data-product] .section-title {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
}
body[data-product] .architecture-grid,
body[data-product] .opsdeck-features-grid,
body[data-product] .opsdeck-stats-grid,
body[data-product] .vdeck-grid,
body[data-product] .cydeck-grid,
body[data-product] .workdeck-grid {
    gap: 22px !important;
}
body[data-product] .arch-container,
body[data-product] .arch-container-cy,
body[data-product] .arch-container-work {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body[data-product] .detail-grid,
body[data-product] .benefits-grid {
    gap: 28px !important;
}

/* ABOUT: force the final statement and every child node to render normally.
   This neutralizes old gradient/text-fill rules. */
body .about-page .about-content .about-highlight,
body .about-page .about-content .about-highlight *,
body .about-page .about-highlight,
body .about-page .about-highlight * {
    opacity: 1 !important;
    visibility: visible !important;
    color: #EAF6FF !important;
    -webkit-text-fill-color: #EAF6FF !important;
    text-shadow: none !important;
}
body .about-page .about-highlight {
    background: linear-gradient(90deg, rgba(90,215,255,.065), rgba(56,184,156,.05)) !important;
}

/* Footer should terminate the page without a large empty field. */
body .footer,
body[data-product] .footer {
    padding-top: 20px !important;
    padding-bottom: 22px !important;
}
body .footer + *,
body[data-product] .footer + * {
    margin-top: 0 !important;
}

@media (max-width: 991px) {
    body .products,
    body .enterprise,
    body .lets-talk {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }
    body[data-product] .vdeck-features,
    body[data-product] .opsdeck-stats,
    body[data-product] .features-section,
    body[data-product] .cydeck-features,
    body[data-product] .workdeck-features,
    body[data-product] .architecture-section,
    body[data-product] .vdeck-details,
    body[data-product] .benefits-detail,
    body[data-product] .cydeck-details,
    body[data-product] .workdeck-details {
        padding-top: 38px !important;
        padding-bottom: 38px !important;
    }
}

@media (max-width: 768px) {
    body .products,
    body .enterprise,
    body .lets-talk {
        padding-top: 38px !important;
        padding-bottom: 38px !important;
    }
    body[data-product] .vdeck-features,
    body[data-product] .opsdeck-stats,
    body[data-product] .features-section,
    body[data-product] .cydeck-features,
    body[data-product] .workdeck-features,
    body[data-product] .architecture-section,
    body[data-product] .vdeck-details,
    body[data-product] .benefits-detail,
    body[data-product] .cydeck-details,
    body[data-product] .workdeck-details {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }
    body .product-card .product-header h2,
    body .product-card h2 {
        font-size: 20px !important;
    }
}

/* PHASE 4 R12 FINAL MARKER
   Continuous Brand Gradient Canvas active across HOME / ABOUT / PRODUCT pages.
   Section backgrounds remain transparent or minimally tinted so the global
   navy → blue → cyan → teal canvas remains visually continuous to the footer.
*/

/* ==========================================================
   PHASE 4 R14 — PRODUCT BACKGROUND CANVAS ALIGNMENT
   Product body now retains the same global R12 navy → blue →
   cyan → teal gradient used by HOME. Product content sections
   remain transparent so the continuous canvas shows through.
   ========================================================== */


/* ==========================================================
   PHASE 4 R14.1 — PRODUCT CANVAS RENDERING CORRECTIVE
   Do not rely on BODY canvas inheritance for product pages.
   Apply the exact HOME R12 canvas explicitly to product BODY
   and all full-width product sections using fixed attachment.
   ========================================================== */

body[data-product] {
    background:
        radial-gradient(circle at 18% 8%, rgba(68, 155, 255, .18), transparent 30%),
        radial-gradient(circle at 78% 18%, rgba(44, 211, 207, .16), transparent 30%),
        radial-gradient(circle at 92% 72%, rgba(36, 198, 151, .14), transparent 34%),
        linear-gradient(
            105deg,
            #041422 0%,
            #08233f 24%,
            #0a4770 48%,
            #0b6f7c 73%,
            #0f806d 100%
        ) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/*
 * Full-width product sections receive the same fixed canvas directly.
 * Because background-attachment is fixed, the gradient coordinates remain
 * viewport-based instead of restarting independently on every section.
 */
body[data-product] .vdeck-hero,
body[data-product] .opsdeck-hero,
body[data-product] .cydeck-hero,
body[data-product] .workdeck-hero,
body[data-product] .vdeck-features,
body[data-product] .opsdeck-stats,
body[data-product] .features-section,
body[data-product] .cydeck-features,
body[data-product] .workdeck-features,
body[data-product] .architecture-section,
body[data-product] .vdeck-details,
body[data-product] .benefits-detail,
body[data-product] .cydeck-details,
body[data-product] .workdeck-details {
    background:
        radial-gradient(circle at 18% 8%, rgba(68, 155, 255, .18), transparent 30%),
        radial-gradient(circle at 78% 18%, rgba(44, 211, 207, .16), transparent 30%),
        radial-gradient(circle at 92% 72%, rgba(36, 198, 151, .14), transparent 34%),
        linear-gradient(
            105deg,
            #041422 0%,
            #08233f 24%,
            #0a4770 48%,
            #0b6f7c 73%,
            #0f806d 100%
        ) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Keep section decorative overlays subtle; the brand canvas remains dominant. */
body[data-product] .vdeck-hero::before,
body[data-product] .opsdeck-hero::before,
body[data-product] .cydeck-hero::before,
body[data-product] .workdeck-hero::before,
body[data-product] .vdeck-features::before,
body[data-product] .opsdeck-stats::before,
body[data-product] .features-section::before,
body[data-product] .cydeck-features::before,
body[data-product] .workdeck-features::before,
body[data-product] .architecture-section::before,
body[data-product] .vdeck-details::before,
body[data-product] .benefits-detail::before,
body[data-product] .cydeck-details::before,
body[data-product] .workdeck-details::before {
    background:
        radial-gradient(circle at 14% 14%, rgba(109,164,255,.025), transparent 28%),
        radial-gradient(circle at 88% 20%, rgba(56,184,156,.025), transparent 26%) !important;
}

/* PHASE 4 R14.1 FINAL MARKER — explicit product canvas rendering active */


/* ==========================================================
   PHASE 4 R15 — TRANSPARENT CARD / GLASS PANEL REFINEMENT
   Unified card and image-panel surfaces use semi-transparent
   dark glass so the R14 brand canvas remains visible beneath.
   Layout/content/images remain unchanged.
   ========================================================== */
/* PHASE 4 R15 FINAL MARKER — translucent glass surfaces active */


/* ==========================================================
   PHASE 4 R16.1 — FRAMELESS SLIDESHOW IMAGE PRESENTATION
   Remove the dark visual frame around HOME slideshow images.
   A very small image scale crops generated corner artifacts
   while keeping the original visual content unchanged.
   ========================================================== */

body .hero-slider .hero-right {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 22px !important;
    overflow: hidden !important;
}

body .hero-slider .hero-right::before {
    display: none !important;
    content: none !important;
}

body .hero-slider .hero-right img {
    width: 100% !important;
    height: auto !important;
    max-height: 340px !important;
    object-fit: contain !important;

    /* Slight edge crop removes bright/white generated corner artifacts. */
    transform: scale(1.018) !important;
    transform-origin: center center !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 18px !important;
}

@media (max-width: 1200px) {
    body .hero-slider .hero-right {
        padding: 0 !important;
        border-radius: 20px !important;
    }

    body .hero-slider .hero-right img {
        max-height: 280px !important;
        border-radius: 16px !important;
        transform: scale(1.018) !important;
    }
}

@media (max-width: 767px) {
    body .hero-slider .hero-right {
        padding: 0 !important;
        border-radius: 18px !important;
    }

    body .hero-slider .hero-right img {
        max-height: 240px !important;
        border-radius: 14px !important;
        transform: scale(1.02) !important;
    }
}

/* PHASE 4 R16.1 FINAL MARKER — frameless slideshow active */


/* ==========================================================
   PHASE 4 R16.2 — HOME SLIDESHOW SPACING + BVER LAYOUT
   Desktop/full-screen hero height is capped to avoid excessive
   vertical whitespace. BVER principal slide uses logo-left /
   copy-right composition. Other slides preserve their layout.
   ========================================================== */

@media (min-width: 992px) {
    /* Prevent 100vh from creating excessive whitespace on tall displays. */
    body .hero-slider {
        height: clamp(640px, calc(100vh - 150px), 700px) !important;
        min-height: 640px !important;
        max-height: 700px !important;
        padding-top: 118px !important;
        margin-top: 0 !important;
    }

    body .hero-slider > .slide > .hero-wrapper,
    body .hero-slider .container.hero-wrapper {
        height: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 54px !important;
        align-items: center !important;
    }

    /* Bring navigation dots closer to the actual slide content. */
    body .hero-slider > .slider-dots {
        bottom: 18px !important;
    }

    /* BVER slide only: logo at left, content at right. */
    body .hero-slider .bver-principal-slide .hero-wrapper {
        grid-template-columns: 360px minmax(0, 1fr) !important;
        column-gap: clamp(48px, 6vw, 84px) !important;
    }

    body .hero-slider .bver-principal-slide .bver-logo-panel {
        width: 360px !important;
        height: 330px !important;
        min-width: 360px !important;
        min-height: 330px !important;
        max-width: 360px !important;
        max-height: 330px !important;
        justify-self: start !important;
        overflow: visible !important;
        border-radius: 0 !important;
    }

    body .hero-slider .bver-principal-slide .bver-logo-panel img {
        width: 100% !important;
        height: 100% !important;
        max-width: 360px !important;
        max-height: 330px !important;
        object-fit: contain !important;
        object-position: center center !important;
        transform: none !important;
        border-radius: 0 !important;
    }

    body .hero-slider .bver-principal-slide .bver-copy {
        width: 100% !important;
        max-width: 720px !important;
        justify-self: start !important;
        text-align: left !important;
    }

    body .hero-slider .bver-principal-slide .bver-copy .hero-badge {
        margin-bottom: 22px !important;
    }

    body .hero-slider .bver-principal-slide .bver-copy h1 {
        margin-bottom: 22px !important;
    }

    body .hero-slider .bver-principal-slide .bver-copy p {
        margin-bottom: 0 !important;
        max-width: 700px !important;
    }
}

/* Keep tablet/mobile presentation stable and readable. */
@media (max-width: 991px) {
    body .hero-slider .bver-principal-slide .hero-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    body .hero-slider .bver-principal-slide .bver-logo-panel {
        order: 1 !important;
    }

    body .hero-slider .bver-principal-slide .bver-copy {
        order: 2 !important;
        text-align: center !important;
    }

    body .hero-slider .bver-principal-slide .bver-copy .hero-badge {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body .hero-slider .bver-principal-slide .bver-logo-panel img {
        transform: none !important;
        object-fit: contain !important;
    }
}

/* PHASE 4 R16.2 FINAL MARKER — HOME spacing + BVER logo-left layout active */


/* ==========================================================
   PHASE 4 R16.3 — HOME FIXED-HEADER CLEARANCE STABILIZATION
   HOME desktop hero now follows a flow-based clearance model:
   the fixed navbar gets its own explicit space above the hero,
   and hero height no longer expands with viewport height.
   This mirrors the stability already seen on Product pages.
   ========================================================== */

@media (min-width: 992px) {
    /*
     * Navbar is fixed and approximately 140px tall in the current
     * desktop composition. Reserve that space in document flow.
     */
    body .hero-slider {
        margin-top: 140px !important;
        padding-top: 0 !important;

        /* Stable desktop hero frame: independent of fullscreen height. */
        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
    }

    /*
     * Place content from a predictable top edge rather than vertically
     * centering it inside a viewport-dependent hero.
     */
    body .hero-slider > .slide > .hero-wrapper,
    body .hero-slider .container.hero-wrapper {
        height: 100% !important;
        box-sizing: border-box !important;
        padding-top: 30px !important;
        padding-bottom: 66px !important;
        align-items: start !important;
    }

    /* Keep dots close to the content, but inside the hero frame. */
    body .hero-slider > .slider-dots {
        bottom: 20px !important;
    }

    /* Navigation arrows remain vertically centered in the stable hero. */
    body .hero-slider > .slider-nav,
    body .hero-slider > .slider-nav:hover {
        top: 50% !important;
    }

    /*
     * Slides 2-5 share the same predictable top alignment.
     * The BVER slide keeps its logo-left / copy-right R16.2 layout.
     */
    body .hero-slider .hero-left,
    body .hero-slider .hero-right {
        align-self: start !important;
    }

    body .hero-slider .bver-principal-slide .bver-logo-panel,
    body .hero-slider .bver-principal-slide .bver-copy {
        align-self: start !important;
    }
}

/*
 * For shorter desktop browser windows, the hero remains 500px and the page
 * simply scrolls normally. This avoids header overlap or content clipping.
 */
@media (min-width: 992px) and (max-height: 700px) {
    body .hero-slider {
        margin-top: 140px !important;
        height: 500px !important;
        min-height: 500px !important;
        max-height: 500px !important;
    }

    body .hero-slider > .slide > .hero-wrapper,
    body .hero-slider .container.hero-wrapper {
        padding-top: 26px !important;
        padding-bottom: 64px !important;
    }
}

/* PHASE 4 R16.3 FINAL MARKER — stable HOME fixed-header clearance active */


/* ==========================================================
   PHASE 4 R17 — GLOBAL PAGE SPACING & SURFACE STANDARDIZATION
   Harmonizes fixed-header clearance, section rhythm, paragraph
   spacing, card/box padding, and footer rhythm across HOME,
   ABOUT and PRODUCT pages without flattening their layouts.
   ========================================================== */

:root {
    --ib-header-clearance-desktop: 140px;
    --ib-page-top-space: 34px;
    --ib-section-space-desktop: 42px;
    --ib-section-space-tablet: 38px;
    --ib-section-space-mobile: 34px;
    --ib-card-radius: 22px;
    --ib-card-pad-y: 24px;
    --ib-card-pad-x: 24px;
    --ib-content-gap: 24px;
    --ib-paragraph-gap: 14px;
    --ib-paragraph-line: 1.68;
    --ib-footer-pad-y: 22px;
}

/* ----------------------------------------------------------
   ABOUT — same stable fixed-header clearance model as HOME.
   ---------------------------------------------------------- */
@media (min-width: 992px) {
    body .about-page {
        margin-top: var(--ib-header-clearance-desktop) !important;
        padding-top: var(--ib-page-top-space) !important;
        padding-bottom: var(--ib-section-space-desktop) !important;
        min-height: 0 !important;
        scroll-margin-top: var(--ib-header-clearance-desktop) !important;
    }

    body .about-page .section-title {
        margin-top: 0 !important;
        margin-bottom: 28px !important;
    }
}

/* ----------------------------------------------------------
   PRODUCT HERO — preserve existing stable layout, normalize
   its breathing room against the same header system.
   ---------------------------------------------------------- */
@media (min-width: 992px) {
    body[data-product] .vdeck-hero,
    body[data-product] .opsdeck-hero,
    body[data-product] .cydeck-hero,
    body[data-product] .workdeck-hero {
        scroll-margin-top: var(--ib-header-clearance-desktop) !important;
    }
}

/* ----------------------------------------------------------
   Shared section rhythm.
   ---------------------------------------------------------- */
body .products,
body .enterprise,
body .lets-talk,
body .about-page,
body[data-product] .vdeck-features,
body[data-product] .opsdeck-stats,
body[data-product] .features-section,
body[data-product] .cydeck-features,
body[data-product] .workdeck-features,
body[data-product] .architecture-section,
body[data-product] .vdeck-details,
body[data-product] .benefits-detail,
body[data-product] .cydeck-details,
body[data-product] .workdeck-details {
    box-sizing: border-box !important;
}

body .products,
body .enterprise,
body .lets-talk,
body[data-product] .vdeck-features,
body[data-product] .opsdeck-stats,
body[data-product] .features-section,
body[data-product] .cydeck-features,
body[data-product] .workdeck-features,
body[data-product] .architecture-section,
body[data-product] .vdeck-details,
body[data-product] .benefits-detail,
body[data-product] .cydeck-details,
body[data-product] .workdeck-details {
    padding-top: var(--ib-section-space-desktop) !important;
    padding-bottom: var(--ib-section-space-desktop) !important;
}

/* ----------------------------------------------------------
   Section-title rhythm.
   ---------------------------------------------------------- */
body .products .section-title,
body .enterprise .section-title,
body .lets-talk .section-title,
body .about-page .section-title,
body[data-product] .section-title {
    margin-top: 0 !important;
    margin-bottom: 26px !important;
}

body .section-title h1,
body .section-title h2,
body .section-title h3,
body .about-page .section-title h1,
body .about-page .section-title h2,
body[data-product] .section-title h1,
body[data-product] .section-title h2 {
    margin-top: 0 !important;
}

body .section-title p,
body .about-page .section-title p,
body[data-product] .section-title p,
body[data-product] .section-title-p {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    line-height: var(--ib-paragraph-line) !important;
}

/* ----------------------------------------------------------
   Paragraph system.
   ---------------------------------------------------------- */
body .about-page p,
body .product-card p,
body .stat-card p,
body .lets-talk-box p,
body .talk-item p,
body[data-product] .vdeck-card p,
body[data-product] .ops-card p,
body[data-product] .cy-card p,
body[data-product] .work-card p,
body[data-product] .arch-card p,
body[data-product] .architecture-box p,
body[data-product] .stat-box p,
body[data-product] .threat-alert-box p,
body[data-product] .detail-grid p,
body[data-product] .benefits-grid p {
    line-height: var(--ib-paragraph-line) !important;
}

body .about-page p + p,
body .product-card p + p,
body .stat-card p + p,
body .lets-talk-box p + p,
body .talk-item p + p,
body[data-product] p + p {
    margin-top: var(--ib-paragraph-gap) !important;
}

/* ----------------------------------------------------------
   Unified card / box geometry. Existing R15 glass material
   remains authoritative; R17 only standardizes geometry.
   ---------------------------------------------------------- */
body .product-card,
body .enterprise-box,
body .stat-card,
body .lets-talk-box,
body .talk-item,
body .about-page .about-content,
body[data-product] .vdeck-card,
body[data-product] .ops-card,
body[data-product] .cy-card,
body[data-product] .work-card,
body[data-product] .arch-card,
body[data-product] .architecture-box,
body[data-product] .arch-container,
body[data-product] .arch-container-cy,
body[data-product] .arch-container-work,
body[data-product] .stat-box,
body[data-product] .threat-alert-box {
    border-radius: var(--ib-card-radius) !important;
}

body .product-card,
body .stat-card,
body .lets-talk-box,
body .talk-item,
body .about-page .about-content,
body[data-product] .vdeck-card,
body[data-product] .ops-card,
body[data-product] .cy-card,
body[data-product] .work-card,
body[data-product] .arch-card,
body[data-product] .architecture-box,
body[data-product] .stat-box,
body[data-product] .threat-alert-box {
    padding-top: var(--ib-card-pad-y) !important;
    padding-bottom: var(--ib-card-pad-y) !important;
    padding-left: var(--ib-card-pad-x) !important;
    padding-right: var(--ib-card-pad-x) !important;
}

/* Avoid overriding image-centric architecture container internal padding. */
body[data-product] .arch-container,
body[data-product] .arch-container-cy,
body[data-product] .arch-container-work {
    padding: 18px !important;
}

/* ----------------------------------------------------------
   Grid gap system.
   ---------------------------------------------------------- */
body .product-grid,
body[data-product] .architecture-grid,
body[data-product] .opsdeck-features-grid,
body[data-product] .opsdeck-stats-grid,
body[data-product] .vdeck-grid,
body[data-product] .cydeck-grid,
body[data-product] .workdeck-grid {
    gap: var(--ib-content-gap) !important;
}

body[data-product] .detail-grid,
body[data-product] .benefits-grid {
    gap: calc(var(--ib-content-gap) + 4px) !important;
}

/* ----------------------------------------------------------
   ABOUT highlight spacing.
   ---------------------------------------------------------- */
body .about-page .about-highlight {
    margin-top: 28px !important;
    padding: 22px 24px !important;
    line-height: var(--ib-paragraph-line) !important;
}

/* ----------------------------------------------------------
   Footer terminal rhythm shared across all pages.
   ---------------------------------------------------------- */
body .footer,
body[data-product] .footer {
    margin-top: 0 !important;
    padding-top: var(--ib-footer-pad-y) !important;
    padding-bottom: var(--ib-footer-pad-y) !important;
}

body .footer-text p,
body .footer p,
body[data-product] .footer p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.5 !important;
}

/* ----------------------------------------------------------
   Tablet / mobile rhythm.
   ---------------------------------------------------------- */
@media (max-width: 991px) {
    body .about-page {
        margin-top: 0 !important;
        padding-top: 138px !important;
        padding-bottom: var(--ib-section-space-tablet) !important;
    }

    body .products,
    body .enterprise,
    body .lets-talk,
    body[data-product] .vdeck-features,
    body[data-product] .opsdeck-stats,
    body[data-product] .features-section,
    body[data-product] .cydeck-features,
    body[data-product] .workdeck-features,
    body[data-product] .architecture-section,
    body[data-product] .vdeck-details,
    body[data-product] .benefits-detail,
    body[data-product] .cydeck-details,
    body[data-product] .workdeck-details {
        padding-top: var(--ib-section-space-tablet) !important;
        padding-bottom: var(--ib-section-space-tablet) !important;
    }
}

@media (max-width: 768px) {
    body .about-page {
        padding-top: 124px !important;
        padding-bottom: var(--ib-section-space-mobile) !important;
    }

    body .products,
    body .enterprise,
    body .lets-talk,
    body[data-product] .vdeck-features,
    body[data-product] .opsdeck-stats,
    body[data-product] .features-section,
    body[data-product] .cydeck-features,
    body[data-product] .workdeck-features,
    body[data-product] .architecture-section,
    body[data-product] .vdeck-details,
    body[data-product] .benefits-detail,
    body[data-product] .cydeck-details,
    body[data-product] .workdeck-details {
        padding-top: var(--ib-section-space-mobile) !important;
        padding-bottom: var(--ib-section-space-mobile) !important;
    }

    body .product-card,
    body .stat-card,
    body .lets-talk-box,
    body .talk-item,
    body .about-page .about-content,
    body[data-product] .vdeck-card,
    body[data-product] .ops-card,
    body[data-product] .cy-card,
    body[data-product] .work-card,
    body[data-product] .arch-card,
    body[data-product] .architecture-box,
    body[data-product] .stat-box,
    body[data-product] .threat-alert-box {
        padding: 20px !important;
    }

    body[data-product] .arch-container,
    body[data-product] .arch-container-cy,
    body[data-product] .arch-container-work {
        padding: 14px !important;
    }
}

/* PHASE 4 R17 FINAL MARKER — global spacing/surface standard active */


/* ==========================================================
   PHASE 4 R17.1 — PRODUCT RHYTHM CORRECTIVE
   Restore tighter Product-page section rhythm and heading
   spacing while preserving HOME / ABOUT R17 standards.
   ========================================================== */

@media (min-width: 992px) {
    /* Product sections: reduce excessive vertical whitespace introduced by R17. */
    body[data-product] .vdeck-features,
    body[data-product] .opsdeck-stats,
    body[data-product] .features-section,
    body[data-product] .cydeck-features,
    body[data-product] .workdeck-features,
    body[data-product] .architecture-section,
    body[data-product] .vdeck-details,
    body[data-product] .benefits-detail,
    body[data-product] .cydeck-details,
    body[data-product] .workdeck-details {
        padding-top: 26px !important;
        padding-bottom: 28px !important;
    }

    /* Product section titles: restore compact spacing. */
    body[data-product] .section-title {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
    }

    body[data-product] .section-title > span,
    body[data-product] .section-label {
        margin-bottom: 8px !important;
    }

    body[data-product] .section-title h1,
    body[data-product] .section-title h2,
    body[data-product] .section-title h3 {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        line-height: 1.12 !important;
    }

    body[data-product] .section-title p,
    body[data-product] .section-title-p {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        line-height: 1.58 !important;
    }

    /* Direct product headings such as Business Benefits / Use Cases. */
    body[data-product] .detail-grid h2,
    body[data-product] .detail-grid h3,
    body[data-product] .benefits-grid h2,
    body[data-product] .benefits-grid h3,
    body[data-product] .vdeck-details h2,
    body[data-product] .vdeck-details h3,
    body[data-product] .benefits-detail h2,
    body[data-product] .benefits-detail h3,
    body[data-product] .cydeck-details h2,
    body[data-product] .cydeck-details h3,
    body[data-product] .workdeck-details h2,
    body[data-product] .workdeck-details h3 {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
        line-height: 1.18 !important;
    }

    /* Tighten spacing between architecture cards and next textual section. */
    body[data-product] .architecture-grid {
        margin-bottom: 18px !important;
    }

    body[data-product] .detail-grid,
    body[data-product] .benefits-grid {
        margin-top: 14px !important;
        gap: 24px !important;
    }

    /* Avoid oversized empty terminal area before footer. */
    body[data-product] .vdeck-details,
    body[data-product] .benefits-detail,
    body[data-product] .cydeck-details,
    body[data-product] .workdeck-details {
        margin-bottom: 0 !important;
    }

    body[data-product] .footer {
        margin-top: 0 !important;
    }
}

@media (max-width: 991px) {
    body[data-product] .vdeck-features,
    body[data-product] .opsdeck-stats,
    body[data-product] .features-section,
    body[data-product] .cydeck-features,
    body[data-product] .workdeck-features,
    body[data-product] .architecture-section,
    body[data-product] .vdeck-details,
    body[data-product] .benefits-detail,
    body[data-product] .cydeck-details,
    body[data-product] .workdeck-details {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    body[data-product] .section-title {
        margin-bottom: 16px !important;
    }

    body[data-product] .section-title h1,
    body[data-product] .section-title h2,
    body[data-product] .section-title h3 {
        margin-bottom: 9px !important;
    }

    body[data-product] .detail-grid,
    body[data-product] .benefits-grid {
        margin-top: 12px !important;
        gap: 20px !important;
    }
}

/* PHASE 4 R17.1 FINAL MARKER — compact Product rhythm restored */


/* ==========================================================
   PHASE 4 R17.2 — VDECK / OPSDECK RHYTHM + PRODUCT FOOTER FIX
   Targeted corrective based on structural analysis:
   - VDeck / OpsDeck use different section structures.
   - Historical content-visibility intrinsic reservation can
     create oversized vertical whitespace on those structures.
   - CyDeck / WorkDeck visual rhythm remains frozen.
   ========================================================== */

/* ----------------------------------------------------------
   VDECK: use real content height, no 820px intrinsic reservation.
   ---------------------------------------------------------- */
body[data-product="vdeck"] .vdeck-features,
body[data-product="vdeck"] .architecture-section,
body[data-product="vdeck"] .vdeck-details {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
    min-height: 0 !important;
    height: auto !important;
}

@media (min-width: 992px) {
    body[data-product="vdeck"] .vdeck-features {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }

    body[data-product="vdeck"] .architecture-section {
        padding-top: 22px !important;
        padding-bottom: 20px !important;
    }

    body[data-product="vdeck"] .vdeck-details {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }
}

/* ----------------------------------------------------------
   OPSDECK: compact the extra stats layer and use actual height.
   ---------------------------------------------------------- */
body[data-product="opsdeck"] .opsdeck-stats,
body[data-product="opsdeck"] .features-section,
body[data-product="opsdeck"] .architecture-section,
body[data-product="opsdeck"] .benefits-detail {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
    min-height: 0 !important;
    height: auto !important;
}

@media (min-width: 992px) {
    body[data-product="opsdeck"] .opsdeck-stats {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    body[data-product="opsdeck"] .features-section {
        padding-top: 20px !important;
        padding-bottom: 22px !important;
    }

    body[data-product="opsdeck"] .architecture-section {
        padding-top: 22px !important;
        padding-bottom: 20px !important;
    }

    body[data-product="opsdeck"] .benefits-detail {
        padding-top: 18px !important;
        padding-bottom: 14px !important;
    }
}

/* ----------------------------------------------------------
   ALL PRODUCT FOOTERS:
   final content section must terminate close to footer like HOME.
   Only terminal sections are normalized; CyDeck/WorkDeck sections
   above them remain untouched.
   ---------------------------------------------------------- */
body[data-product="vdeck"] .vdeck-details,
body[data-product="opsdeck"] .benefits-detail,
body[data-product="cydeck"] .cydeck-details,
body[data-product="workdeck"] .workdeck-details {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

@media (min-width: 992px) {
    body[data-product="cydeck"] .cydeck-details,
    body[data-product="workdeck"] .workdeck-details {
        padding-bottom: 14px !important;
    }

    body[data-product] .footer {
        margin-top: 0 !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
}

@media (max-width: 991px) {
    body[data-product="vdeck"] .vdeck-features,
    body[data-product="vdeck"] .architecture-section,
    body[data-product="vdeck"] .vdeck-details,
    body[data-product="opsdeck"] .opsdeck-stats,
    body[data-product="opsdeck"] .features-section,
    body[data-product="opsdeck"] .architecture-section,
    body[data-product="opsdeck"] .benefits-detail {
        content-visibility: visible !important;
        contain-intrinsic-size: none !important;
        min-height: 0 !important;
        height: auto !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    body[data-product] .footer {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }
}

/* PHASE 4 R17.2 FINAL MARKER — targeted VDeck/OpsDeck/footer rhythm active */


/* ==========================================================
   PHASE 4 R18.5 — SECTION LABEL / PRODUCT TAG STANDARDIZATION
   ========================================================== */

/* One vertical rhythm for HOME + all Product section labels. */
body .products .section-title > span,
body[data-product] .section-title > span,
body[data-product] .section-label {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

body .products .section-title > h1,
body .products .section-title > h2,
body .products .section-title > h3,
body[data-product] .section-title > h1,
body[data-product] .section-title > h2,
body[data-product] .section-title > h3 {
    margin-top: 0 !important;
}

/* Product hero tags use the same compact pill geometry. */
body[data-product] .benefit-tag,
body[data-product] .product-hero-tag,
body[data-product] .ztna-tag,
body[data-product] .product-accent-tag {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(100%, 420px) !important;
    min-height: 42px !important;
    padding: 10px 18px !important;
    margin-top: 2px !important;
    margin-bottom: 14px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

/* PHASE 4 R18.5 FINAL MARKER */


/* =========================================================
   PHASE 4 R18.7 — PRODUCT CONTENT STANDARDIZATION
   ========================================================= */
body[data-product] .product-keyfeatures-grid { align-items: stretch; }

body[data-product] .product-keyfeature-card {
    height: 100%;
    min-height: 285px;
    padding: 26px 24px !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    text-align: left !important;
}

body[data-product] .product-keyfeature-card > i {
    width: 52px;
    height: 52px;
    display: inline-grid;
    place-items: center;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 1.6rem !important;
}

body[data-product] .product-keyfeature-card h3 {
    margin: 0 0 12px !important;
    font-size: 1.16rem !important;
    line-height: 1.35 !important;
}

body[data-product] .product-keyfeature-card p,
body[data-product] .product-keyfeature-card ul {
    margin-top: 0 !important;
    color: rgba(222, 240, 246, .72) !important;
    line-height: 1.65 !important;
}

body[data-product] .product-keyfeature-card ul { padding-left: 18px; }

body[data-product] .product-outcomes-section {
    padding-top: 72px;
    padding-bottom: 72px;
}

body[data-product] .product-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

body[data-product] .product-outcomes-card {
    padding: 28px;
    border-radius: 18px;
    border: 1px solid rgba(92, 211, 232, .28);
    background: rgba(3, 29, 45, .52);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .13);
    backdrop-filter: blur(10px);
}

body[data-product] .section-title-left {
    text-align: left !important;
    margin-bottom: 20px;
}
body[data-product] .section-title-left > span {
    margin-left: 0 !important;
    margin-right: auto !important;
}
body[data-product] .section-title-left > h2 { margin-bottom: 0 !important; }

body[data-product="secdeck"] .secdeck-explain-title {
    margin: 0 0 10px;
    color: #f3fbff;
    font-size: 1.2rem;
    line-height: 1.35;
    font-weight: 700;
}

@media (max-width: 900px) {
    body[data-product] .product-outcomes-grid { grid-template-columns: 1fr; }
    body[data-product] .product-keyfeature-card { min-height: 0; }
}
/* PHASE 4 R18.7 FINAL MARKER */


/* =========================================================
   PHASE 4 R18.8 — PRODUCT KEY FEATURE HEADER STANDARD
   ========================================================= */

body[data-product] .product-keyfeature-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
}

body[data-product] .product-keyfeature-head {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 58px;
    margin-bottom: 18px;
}

body[data-product] .product-keyfeature-head > i {
    width: 54px;
    height: 54px;
    min-width: 54px;
    display: inline-grid !important;
    place-items: center;
    margin: 0 !important;
    border-radius: 14px;
    font-size: 1.55rem !important;
}

body[data-product] .product-keyfeature-head > h3 {
    margin: 0 !important;
    font-size: 1.18rem !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

body[data-product] .product-keyfeature-card > p,
body[data-product] .product-keyfeature-card > ul {
    margin-top: 0 !important;
}

/* SecDeck now has five Key Feature cards. */
body[data-product="secdeck"] .secdeck-feature-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (max-width: 1200px) {
    body[data-product="secdeck"] .secdeck-feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 820px) {
    body[data-product="secdeck"] .secdeck-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    body[data-product="secdeck"] .secdeck-feature-grid {
        grid-template-columns: 1fr !important;
    }
}

/* PHASE 4 R18.8 FINAL MARKER */


/* =========================================================
   PHASE 4 R18.9 — SECDECK KEY FEATURE CONSOLIDATION
   ========================================================= */

body[data-product="secdeck"] .secdeck-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    body[data-product="secdeck"] .secdeck-feature-grid {
        grid-template-columns: 1fr !important;
        max-width: 720px;
    }
}

/* PHASE 4 R18.9 FINAL MARKER */