/* ============================================================
   VA Elementor Widgets – Styles
   Author: devLNX Studio | https://devlnx.com
   ============================================================ */

/* ─── CSS vars ──────────────────────────────────────────────── */

:root {
    --va-green:          #39ff14;
    --va-green-dim:      #2dcc10;
    --va-green-glow:     rgba(57, 255, 20, 0.35);
    --va-green-border:   rgba(57, 255, 20, 0.25);
    --va-green-bg:       rgba(57, 255, 20, 0.07);
    --va-green-light:    #3a7d44;

    /* Dark palette – navy tinted */
    --va-dark-bg:        #060c18;
    --va-dark-bg2:       #090f1e;
    --va-dark-card:      #0d1828;
    --va-dark-card2:     #111e30;
    --va-dark-text:      #ffffff;
    --va-dark-text2:     rgba(255, 255, 255, 0.70);
    --va-dark-text3:     rgba(255, 255, 255, 0.45);
    --va-dark-border:    rgba(255, 255, 255, 0.09);

    /* Navy/teal borders */
    --va-navy-border:       rgba(30, 90, 160, 0.40);
    --va-navy-border-hover: rgba(50, 120, 200, 0.65);
    --va-navy-glow:         0 0 18px rgba(20, 60, 120, 0.45);
    --va-teal-border:       rgba(0, 180, 200, 0.25);

    /* Light palette */
    --va-light-bg:       #f4f4f4;
    --va-light-bg2:      #ffffff;
    --va-light-card:     #1a3028;
    --va-light-text:     #1a1a1a;
    --va-light-text2:    #444444;
    --va-light-border:   #d0d0d0;

    /* Status colors */
    --va-red:    #ff4d4d;
    --va-yellow: #ffc107;
    --va-blue:   #4da6ff;
    --va-cyan:   #00d4ff;

    /* Typography */
    --va-font-heading: 'Orbitron', 'Exo 2', sans-serif;
    --va-font-body:    'Exo 2', 'Rajdhani', sans-serif;
    --va-font-label:   'Rajdhani', 'Exo 2', sans-serif;

    --va-radius:     4px;
    --va-radius-md:  8px;
    --va-radius-lg:  12px;
    --va-glow:       0 0 20px var(--va-green-glow);
    --va-glow-sm:    0 0 8px var(--va-green-glow);
    --va-transition: all 0.3s ease;
}

/* ─── Scheme helpers ────────────────────────────────────────── */

.va-scheme-dark {
    --va-bg:     var(--va-dark-bg);
    --va-card:   var(--va-dark-card);
    --va-text:   var(--va-dark-text);
    --va-text2:  var(--va-dark-text2);
    --va-border: var(--va-navy-border);
    --va-accent: var(--va-green);
}

.va-scheme-light {
    --va-bg:     var(--va-light-bg);
    --va-card:   #ffffff;
    --va-text:   var(--va-light-text);
    --va-text2:  var(--va-light-text2);
    --va-border: var(--va-light-border);
    --va-accent: var(--va-green-light);
}

/* ─── Global icon color fix ─────────────────────────────────────
   Elementor renders icons as <i> (Font Awesome) or inline <svg>.
   We must explicitly set color + fill so dark backgrounds don't
   inherit body color (which many themes set to #000 / #333).
   ─────────────────────────────────────────────────────────────── */

/* All icon wrappers in our widgets inherit their color from the
   parent container which has --va-accent set via .va-scheme-* */
.va-service-card__icon,
.va-hero__icon-item,
.va-feature__icon,
.va-benefits__icon,
.va-product__feature-icon,
.va-process__step-icon,
.va-stat__icon,
.va-section-label__icon {
    color: var(--va-accent, var(--va-green));
}

/* Force <i> (Font Awesome glyph) to use parent color */
.va-service-card__icon i,
.va-hero__icon-item i,
.va-feature__icon i,
.va-benefits__icon i,
.va-product__feature-icon i,
.va-process__step-icon i,
.va-stat__icon i {
    color: inherit;
}

/* Force SVG (Elementor 3.x+ icon kit) to use parent color */
.va-service-card__icon svg,
.va-hero__icon-item svg,
.va-feature__icon svg,
.va-benefits__icon svg,
.va-product__feature-icon svg,
.va-process__step-icon svg,
.va-stat__icon svg {
    fill: currentColor;
    color: inherit;
}

/* SVG internal elements */
.va-service-card__icon svg path,
.va-service-card__icon svg circle,
.va-service-card__icon svg rect,
.va-hero__icon-item svg path,
.va-hero__icon-item svg circle,
.va-feature__icon svg path,
.va-feature__icon svg circle,
.va-benefits__icon svg path,
.va-product__feature-icon svg path,
.va-process__step-icon svg path,
.va-stat__icon svg path {
    fill: currentColor;
}

/* ─── VA CIRCUIT BACKGROUND ─────────────────────────────────────────────────
   Canvas-based PCB trace animation widget.
   ─────────────────────────────────────────────────────────────────────────── */

/* fill-section: absolute, fills Elementor section behind content */
.va-circuit-bg--section {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* fixed: covers entire viewport (use on hero sections) */
.va-circuit-bg--fixed {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* inline: block element with height set via Elementor control */
.va-circuit-bg--inline {
    position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

/* Canvas always fills its container */
.va-circuit-bg canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    inset: 0;
}

/* For inline mode, canvas is relative */
.va-circuit-bg--inline canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}

/* Elementor section must be position:relative for --section mode.
   Add this via Elementor Advanced → CSS Classes: va-circuit-parent  */
.va-circuit-parent {
    position: relative !important;
    overflow: hidden;
}

/* Make sure content inside section stays above canvas */
.va-circuit-parent > .elementor-container {
    position: relative;
    z-index: 1;
}

/* ─── Elementor widget spacing ──────────────────────────────────
   Elementor wraps each widget in .elementor-widget – we need gaps
   between consecutive service cards in the same column.
   ─────────────────────────────────────────────────────────────── */

.elementor-widget-va_service_card {
    margin-bottom: 1rem !important;
}

.elementor-widget-va_service_card:last-child {
    margin-bottom: 0 !important;
}

/* Inside widget container – reset any inherited margin */
.elementor-widget-va_service_card .elementor-widget-container {
    line-height: 0; /* prevent whitespace gaps */
}

/* ─── Shared button ─────────────────────────────────────────── */

.va-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--va-font-label);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.75rem 1.75rem;
    border-radius: var(--va-radius);
    text-decoration: none;
    transition: var(--va-transition);
    cursor: pointer;
    border: none;
}

.va-btn--primary {
    background: var(--va-accent, var(--va-green));
    color: #000;
    font-weight: 700;
}

.va-btn--primary:hover {
    opacity: 0.85;
    box-shadow: var(--va-glow);
    transform: translateY(-1px);
    color: #000;
}

.va-btn--outline {
    background: transparent;
    color: var(--va-accent, var(--va-green));
    border: 1.5px solid var(--va-accent, var(--va-green));
}

.va-btn--outline:hover {
    background: var(--va-green-bg);
    box-shadow: var(--va-glow-sm);
    transform: translateY(-1px);
}

/* ─── VA HERO ───────────────────────────────────────────────── */

.va-hero {
    position: relative;
    background-color: var(--va-dark-bg);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 3rem;
    overflow: hidden;
    min-height: 60vh;
}

.va-scheme-dark.va-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(6, 12, 24, 0.96) 0%,
        rgba(8, 16, 36, 0.92) 50%,
        rgba(4, 12, 28, 0.95) 100%
    );
    z-index: 0;
}

.va-hero > * { position: relative; z-index: 1; }

.va-hero__icons {
    display: flex;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--va-navy-border);
    justify-content: flex-end;
}

.va-hero__icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--va-font-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--va-dark-text2);
}

/* icon-item inherits --va-accent for the icon itself */
.va-hero__icon-item i,
.va-hero__icon-item svg {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--va-green);
    fill: currentColor;
}

.va-hero__body { max-width: 900px; }

.va-hero__eyebrow {
    font-family: var(--va-font-label);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--va-dark-text2);
    margin-bottom: 1rem;
}

.va-hero__headline {
    font-family: var(--va-font-heading);
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.03em;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.va-hero__headline .va-accent {
    color: var(--va-green);
    text-shadow: var(--va-glow-sm);
}

.va-hero__subtitle {
    font-family: var(--va-font-body);
    font-size: 1.05rem;
    color: var(--va-dark-text2);
    max-width: 700px;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.va-hero__cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .va-hero { padding: 2.5rem 1.5rem; }
    .va-hero__icons { justify-content: flex-start; gap: 1rem; }
    .va-hero__cta { flex-direction: column; align-items: flex-start; }
}

/* ─── VA SERVICE CARD ───────────────────────────────────────── */

.va-service-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--va-radius-md);
    background: var(--va-dark-card);
    border: 1px solid var(--va-navy-border);
    transition: var(--va-transition);
    margin-bottom: 1rem;        /* spacing when stacked in Elementor column */
}

.va-service-card:last-child { margin-bottom: 0; }

/* Bordered variant – adds hover glow */
.va-service-card--bordered {
    border-color: var(--va-navy-border);
}

.va-service-card:hover {
    border-color: var(--va-navy-border-hover);
    box-shadow: var(--va-navy-glow);
    transform: translateY(-2px);
}

.va-service-card--vertical {
    flex-direction: column;
    align-items: flex-start;
}

.va-service-card__icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--va-green);
    background: rgba(57, 255, 20, 0.08);
    border-radius: var(--va-radius);
    border: 1px solid var(--va-green-border);
}

.va-service-card__icon i,
.va-service-card__icon svg {
    font-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--va-green);
    fill: currentColor;
}

.va-service-card__title {
    font-family: var(--va-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.va-service-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: var(--va-font-body);
    font-size: 0.8rem;
    color: var(--va-dark-text2);
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Light mode */
.va-scheme-light .va-service-card {
    background: #ffffff;
    border-color: var(--va-light-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.va-scheme-light .va-service-card:hover {
    border-color: var(--va-green-light);
    box-shadow: 0 4px 16px rgba(58, 125, 68, 0.2);
    transform: translateY(-2px);
}

.va-scheme-light .va-service-card__icon {
    background: rgba(58, 125, 68, 0.08);
    border-color: rgba(58, 125, 68, 0.3);
    color: var(--va-green-light);
}

.va-scheme-light .va-service-card__icon i,
.va-scheme-light .va-service-card__icon svg {
    color: var(--va-green-light);
}

.va-scheme-light .va-service-card__title  { color: var(--va-light-text); }
.va-scheme-light .va-service-card__bullets { color: var(--va-light-text2); }

/* ─── VA PROCESS STEPS ──────────────────────────────────────── */

.va-process { padding: 2rem 0; }

.va-process__steps {
    display: flex;
    gap: 0.5rem;       /* was 0 – cards were touching */
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 1.5rem;
    /* Scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--va-navy-border) transparent;
}

.va-process__steps::-webkit-scrollbar { height: 4px; }
.va-process__steps::-webkit-scrollbar-thumb { background: var(--va-navy-border); border-radius: 2px; }

.va-process__step {
    flex: 1;
    min-width: 150px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--va-dark-card);
    border: 1px solid var(--va-navy-border);
    border-radius: var(--va-radius-md);
    padding: 1rem;
    transition: var(--va-transition);
}

.va-process__step:hover {
    border-color: var(--va-navy-border-hover);
    box-shadow: var(--va-navy-glow);
}

.va-process__arrow {
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
    padding-top: 2.5rem;
    color: var(--va-green);
    font-size: 1.2rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.va-process__step-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.va-process__step-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--va-green);
    background: rgba(57, 255, 20, 0.07);
    border-radius: var(--va-radius);
    margin-bottom: 0.25rem;
}

.va-process__step-icon i,
.va-process__step-icon svg {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    color: var(--va-green);
    fill: currentColor;
}

.va-process__step-label {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.va-process__step-num {
    font-family: var(--va-font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--va-green);
    line-height: 1;
}

.va-process__step-title {
    font-family: var(--va-font-heading);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
}

.va-process__step-img img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--va-radius);
    border: 1px solid var(--va-navy-border);
}

.va-process__step-bullets {
    list-style: disc;
    padding-left: 1rem;
    font-family: var(--va-font-body);
    font-size: 0.76rem;
    line-height: 1.55;
    color: var(--va-dark-text2);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.va-process__connector {
    height: 2px;
    background: linear-gradient(90deg, var(--va-navy-border) 0%, var(--va-teal-border) 50%, transparent 100%);
    margin: 0.5rem 0 1rem;
    opacity: 0.7;
}

.va-process__tagline {
    font-family: var(--va-font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    color: var(--va-dark-text2);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--va-navy-border);
    text-transform: uppercase;
}

/* Light scheme process */
.va-scheme-light .va-process__step {
    background: #ffffff;
    border-color: var(--va-light-border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.va-scheme-light .va-process__step-title  { color: var(--va-light-text); }
.va-scheme-light .va-process__step-num    { color: var(--va-green-light); }
.va-scheme-light .va-process__arrow       { color: var(--va-green-light); }
.va-scheme-light .va-process__step-bullets { color: var(--va-light-text2); }
.va-scheme-light .va-process__step-icon   { background: rgba(58, 125, 68, 0.08); color: var(--va-green-light); }
.va-scheme-light .va-process__step-icon i,
.va-scheme-light .va-process__step-icon svg { color: var(--va-green-light); }
.va-scheme-light .va-process__tagline     { color: var(--va-light-text); border-color: var(--va-light-border); }

@media (max-width: 768px) {
    .va-process__steps {
        flex-direction: column;
        overflow-x: visible;
    }
    .va-process__step { max-width: 100%; min-width: 0; }
    .va-process__arrow {
        transform: rotate(90deg);
        padding: 0;
        align-self: center;
    }
}

/* ─── VA STATS ROW ──────────────────────────────────────────── */

.va-stats {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--va-navy-border);
    border-radius: var(--va-radius-md);
    overflow: hidden;
    background: var(--va-dark-card);
}

.va-stats--bordered .va-stat + .va-stat {
    border-left: 1px solid var(--va-navy-border);
}

.va-stat {
    flex: 1;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    gap: 0.3rem;
    text-align: center;
    transition: var(--va-transition);
}

.va-stat:hover {
    background: rgba(255, 255, 255, 0.03);
}

.va-stat__icon {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
    opacity: 0.85;
}

.va-stat__icon i,
.va-stat__icon svg {
    font-size: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
    color: inherit;
}

.va-stat__value {
    font-family: var(--va-font-heading);
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1;
}

.va-stat__label {
    font-family: var(--va-font-label);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Color variants */
.va-stat--red    { --stat-color: var(--va-red); }
.va-stat--yellow { --stat-color: var(--va-yellow); }
.va-stat--blue   { --stat-color: var(--va-blue); }
.va-stat--green  { --stat-color: var(--va-green); }
.va-stat--cyan   { --stat-color: var(--va-cyan); }
.va-stat--white  { --stat-color: #ffffff; }

.va-stat--red    .va-stat__value, .va-stat--red    .va-stat__label, .va-stat--red    .va-stat__icon { color: var(--va-red); }
.va-stat--yellow .va-stat__value, .va-stat--yellow .va-stat__label, .va-stat--yellow .va-stat__icon { color: var(--va-yellow); }
.va-stat--blue   .va-stat__value, .va-stat--blue   .va-stat__label, .va-stat--blue   .va-stat__icon { color: var(--va-blue); }
.va-stat--green  .va-stat__value, .va-stat--green  .va-stat__label, .va-stat--green  .va-stat__icon { color: var(--va-green); }
.va-stat--cyan   .va-stat__value, .va-stat--cyan   .va-stat__label, .va-stat--cyan   .va-stat__icon { color: var(--va-cyan); }
.va-stat--white  .va-stat__value, .va-stat--white  .va-stat__label, .va-stat--white  .va-stat__icon { color: #ffffff; }

.va-scheme-light .va-stats  { background: #ffffff; border-color: var(--va-light-border); }
.va-scheme-light .va-stats--bordered .va-stat + .va-stat { border-color: var(--va-light-border); }
.va-scheme-light .va-stat--green .va-stat__value,
.va-scheme-light .va-stat--green .va-stat__label { color: var(--va-green-light); }

@media (max-width: 480px) {
    .va-stats { flex-wrap: wrap; }
    .va-stat  { min-width: calc(50% - 1px); }
    .va-stats--bordered .va-stat:nth-child(2n) { border-left: 1px solid var(--va-navy-border); }
    .va-stats--bordered .va-stat:nth-child(n+3) { border-top: 1px solid var(--va-navy-border); }
}

/* ─── VA FEATURE STRIP ──────────────────────────────────────── */

.va-feature-strip {
    display: grid;
    grid-template-columns: repeat(var(--va-strip-cols, 4), 1fr);
    gap: 1.5rem 2rem;
}

.va-feature-strip--divided .va-feature {
    padding-right: 1.5rem;
    border-right: 1px solid var(--va-navy-border);
}

.va-feature-strip--divided .va-feature:last-child {
    border-right: none;
    padding-right: 0;
}

.va-scheme-light.va-feature-strip--divided .va-feature { border-color: var(--va-light-border); }

.va-feature {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.va-feature__icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--va-green);
    width: 2rem;
}

.va-feature__icon i,
.va-feature__icon svg {
    font-size: 2rem;
    width: 2rem;
    height: 2rem;
    color: var(--va-green);
    fill: currentColor;
}

.va-feature__title {
    font-family: var(--va-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.va-feature__desc {
    font-family: var(--va-font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--va-dark-text2);
    margin: 0;
}

.va-scheme-light .va-feature__icon i,
.va-scheme-light .va-feature__icon svg { color: var(--va-green-light); }
.va-scheme-light .va-feature__title { color: var(--va-light-text); }
.va-scheme-light .va-feature__desc  { color: var(--va-light-text2); }

@media (max-width: 768px) {
    .va-feature-strip { grid-template-columns: repeat(2, 1fr); }
    .va-feature-strip--divided .va-feature {
        padding-right: 1rem;
    }
    .va-feature-strip--divided .va-feature:nth-child(2n) { border-right: none; padding-right: 0; }
}

@media (max-width: 400px) {
    .va-feature-strip { grid-template-columns: 1fr; }
    .va-feature-strip--divided .va-feature { border-right: none; padding-right: 0; border-bottom: 1px solid var(--va-navy-border); padding-bottom: 1rem; }
}

/* ─── VA BENEFITS LIST ──────────────────────────────────────── */

.va-benefits { padding: 0.5rem 0; }

.va-benefits__title {
    font-family: var(--va-font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--va-green);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--va-navy-border);
}

.va-benefits__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(var(--va-benefits-cols, 1), 1fr);
    gap: 0.7rem;
}

.va-benefits__item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.va-benefits__icon {
    flex-shrink: 0;
    color: var(--va-green);
    margin-top: 0.1rem;
    line-height: 1;
}

.va-benefits__icon i,
.va-benefits__icon svg {
    font-size: 0.9rem;
    width: 1rem;
    height: 1rem;
    color: var(--va-green);
    fill: currentColor;
}

.va-benefits__text {
    font-family: var(--va-font-body);
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--va-dark-text2);
}

.va-scheme-light .va-benefits__title { color: var(--va-green-light); border-color: var(--va-light-border); }
.va-scheme-light .va-benefits__icon i,
.va-scheme-light .va-benefits__icon svg { color: var(--va-green-light); }
.va-scheme-light .va-benefits__text { color: var(--va-light-text2); }

/* ─── VA SECTION LABEL ──────────────────────────────────────── */

.va-section-label { margin-bottom: 1.5rem; }

.va-section-label__text {
    font-family: var(--va-font-heading);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
    color: #ffffff;
}

.va-section-label__sub {
    font-family: var(--va-font-body);
    font-size: 0.82rem;
    margin-top: 0.3rem;
    color: var(--va-dark-text2);
}

/* Accent color modifiers */
.va-section-label--green  .va-section-label__text { color: var(--va-green); }
.va-section-label--white  .va-section-label__text { color: #ffffff; }
.va-section-label--yellow .va-section-label__text { color: var(--va-yellow); }
.va-section-label--cyan   .va-section-label__text { color: var(--va-cyan); }

/* Style variants */
.va-section-label--line-left {
    padding-left: 1rem;
    border-left: 3px solid var(--va-green);
}

.va-section-label--line-bottom .va-section-label__text {
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--va-green);
}

.va-section-label--badge .va-section-label__text {
    background: var(--va-green-bg);
    border: 1px solid var(--va-green-border);
    padding: 0.2rem 0.8rem;
    border-radius: 2px;
    font-size: 0.72rem;
}

.va-section-label--boxed {
    background: var(--va-dark-card);
    border: 1px solid var(--va-navy-border);
    padding: 0.75rem 1rem;
    border-radius: var(--va-radius);
}

.va-scheme-light .va-section-label__text { color: var(--va-light-text); }
.va-scheme-light .va-section-label__sub  { color: var(--va-light-text2); }
.va-scheme-light .va-section-label--green .va-section-label__text { color: var(--va-green-light); }
.va-scheme-light .va-section-label--line-left  { border-color: var(--va-green-light); }
.va-scheme-light .va-section-label--line-bottom .va-section-label__text { border-color: var(--va-green-light); }
.va-scheme-light .va-section-label--badge .va-section-label__text {
    background: rgba(58, 125, 68, 0.08);
    border-color: rgba(58, 125, 68, 0.3);
}
.va-scheme-light .va-section-label--boxed { background: #ffffff; border-color: var(--va-light-border); }

/* ─── VA PRODUCT SHOWCASE ───────────────────────────────────── */

.va-product {
    border-radius: var(--va-radius-lg);
    background: var(--va-dark-card);
    border: 1px solid var(--va-navy-border);
    padding: 2rem;
    transition: var(--va-transition);
}

.va-product--bordered {
    box-shadow: var(--va-navy-glow);
}

.va-product--bordered:hover {
    border-color: var(--va-navy-border-hover);
    box-shadow: 0 0 32px rgba(30, 90, 180, 0.35);
}

.va-product--side-by-side {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
}

.va-product--stacked {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.va-product__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.va-product__media img {
    max-width: 100%;
    border-radius: var(--va-radius-md);
    border: 1px solid var(--va-navy-border);
}

.va-product__header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--va-navy-border);
    padding-bottom: 1rem;
}

.va-product__name {
    font-family: var(--va-font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: var(--va-green);
    text-shadow: var(--va-glow-sm);
    line-height: 1;
}

.va-product__titles { display: flex; flex-direction: column; gap: 0.15rem; }

.va-product__full-name {
    font-family: var(--va-font-heading);
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

.va-product__tagline {
    font-family: var(--va-font-heading);
    font-size: clamp(0.7rem, 1.4vw, 0.9rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    color: var(--va-green);
    opacity: 0.8;
}

.va-product__desc {
    font-family: var(--va-font-body);
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--va-dark-text2);
    margin-bottom: 1.25rem;
}

.va-product__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.va-product__feature {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-family: var(--va-font-body);
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--va-dark-text2);
}

.va-product__feature-icon {
    flex-shrink: 0;
    color: var(--va-green);
    margin-top: 0.1rem;
    line-height: 1;
}

.va-product__feature-icon i,
.va-product__feature-icon svg {
    font-size: 0.85rem;
    width: 1rem;
    height: 1rem;
    color: var(--va-green);
    fill: currentColor;
}

/* Light scheme */
.va-scheme-light .va-product {
    background: #ffffff;
    border-color: var(--va-light-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.va-scheme-light .va-product--bordered:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.va-scheme-light .va-product__header   { border-color: var(--va-light-border); }
.va-scheme-light .va-product__name     { color: var(--va-green-light); text-shadow: none; }
.va-scheme-light .va-product__full-name { color: var(--va-light-text); }
.va-scheme-light .va-product__tagline  { color: var(--va-green-light); }
.va-scheme-light .va-product__desc     { color: var(--va-light-text2); }
.va-scheme-light .va-product__feature  { color: var(--va-light-text2); }
.va-scheme-light .va-product__feature-icon i,
.va-scheme-light .va-product__feature-icon svg { color: var(--va-green-light); }
.va-scheme-light .va-product__media img { border-color: var(--va-light-border); }

@media (max-width: 768px) {
    .va-product--side-by-side {
        grid-template-columns: 1fr;
    }
}