/* ============================================================================
   VISTAWIN SOLUTION — UI REDESIGN (modern minimal)
   ----------------------------------------------------------------------------
   This file MUST be the last stylesheet loaded by includes/header.php.

   Strategy
     1. Re-declare shared design tokens (--primary, --vw-*, --hd-*) so the
        legacy stylesheets that load before this file re-theme themselves.
     2. Restyle shared chrome: header, nav, drawer, buttons, forms, footer,
        page banners.
     3. Define the new homepage section system (.hs-*).
     4. Targeted overrides for legacy inner-page sections.
   ========================================================================== */

/* ============================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* — Bootstrap (style.css) — */
    --primary:        #5B2E91;
    --primary-dark:   #4A2478;
    --purple:         #5B2E91;
    --pink:           #A98BD0;
    --secondary:      #F3EFFA;
    --dark:           #17141F;
    --text-color:     #1B1824;

    /* — Header system (header-design.css) — */
    --hd-purple:        #5B2E91;
    --hd-purple-deep:   #17141F;
    --hd-purple-mid:    #4A2478;
    --hd-purple-light:  #7C51B8;
    --hd-lavender:      #A98BD0;
    --hd-lavender-soft: #F2ECFB;
    --hd-ink:           #1B1824;
    --hd-body:          #1B1824;
    --hd-muted:         #6A6480;
    --hd-white:         #FFFFFF;
    --hd-surface:       #FAF9FD;
    --hd-border:        #E9E5F2;
    --hd-shadow-sm:     0 1px 2px rgba(23, 20, 31, 0.05);
    --hd-shadow-md:     0 12px 30px -18px rgba(23, 20, 31, 0.45);
    --hd-shadow-lg:     0 30px 60px -30px rgba(23, 20, 31, 0.45);
    --hd-radius-sm:     10px;
    --hd-radius-md:     14px;
    --hd-radius-lg:     20px;
    --hd-nav-h:         74px;

    /* — Site-wide system (ui-remake.css & friends) — */
    --vw-plum:     #5B2E91;
    --vw-plum-mid: #4A2478;
    --vw-lavender: #7C51B8;
    --vw-white:    #FFFFFF;
    --vw-snow:     #FFFFFF;
    --vw-mist:     #FAF9FD;
    --vw-lilac:    #F2ECFB;
    --vw-line:     #E9E5F2;
    --vw-line-soft: rgba(233, 229, 242, 0.7);
    --vw-ink:      #17141F;
    --vw-muted:    #5A5470;
    --vw-soft:     #5A5470;
    --vw-radius:      16px;
    --vw-radius-sm:   10px;
    --vw-shadow:      0 18px 44px -24px rgba(23, 20, 31, 0.35);
    --vw-shadow-soft: 0 8px 24px -16px rgba(23, 20, 31, 0.28);
    --vw-accent:      #5B2E91;
    --vw-font:        'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --vw-display:     'Outfit', system-ui, -apple-system, sans-serif;

    /* — Redesign-specific — */
    --vw-brand:       #5B2E91;
    --vw-brand-dark:  #4A2478;
    --vw-brand-soft:  #7C51B8;
    --vw-tint:        #F3EEFC;
    --vw-body:        #55506B;
    --vw-dim:         #8B85A0;
    --vw-night:       #17141F;
    --vw-night-2:     #221B33;
    --vw-radius-lg:   20px;
    --vw-ring:        0 0 0 4px rgba(91, 46, 145, 0.14);
    --vw-header-h:    74px;
}

/* ============================================================================
   2. BASE / TYPOGRAPHY
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--vw-header-h) + 24px);
}

body {
    font-family: var(--vw-font) !important;
    color: var(--vw-body) !important;
    background: #FFFFFF !important;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vw-display);
    color: var(--vw-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.18;
}

h1 { font-size: clamp(2.1rem, 4.6vw, 3.15rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem);  font-weight: 800; letter-spacing: -0.028em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

p { margin-top: 0; margin-bottom: 1.1rem; }

a {
    color: var(--vw-brand);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover { color: var(--vw-brand-dark); text-decoration: none; }

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

::selection { background: var(--vw-brand); color: #FFFFFF; }

hr { border-top: 1px solid var(--vw-line); }

/* Slim, quiet scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F4F2F8; }
::-webkit-scrollbar-thumb { background: #C9C2DA; border-radius: 99px; border: 2px solid #F4F2F8; }
::-webkit-scrollbar-thumb:hover { background: var(--vw-brand-soft); }

/* Reveal-on-scroll (only when JS is alive) */
.vw-js [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.vw-js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .vw-js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* ============================================================================
   3. SHARED PIECES
   ========================================================================== */

/* — Eyebrow / section badge — */
.vw-eyebrow,
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--vw-tint);
    color: var(--vw-brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.2;
}

.section-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
}

/* — Buttons — */
.btn {
    border-radius: 10px;
    font-weight: 600;
    font-family: var(--vw-font);
    letter-spacing: 0.01em;
    padding: 0.6rem 1.3rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-primary {
    background: var(--vw-brand);
    border-color: var(--vw-brand);
    color: #FFFFFF;
    box-shadow: 0 12px 26px -14px rgba(91, 46, 145, 0.75);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--vw-brand-dark);
    border-color: var(--vw-brand-dark);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -16px rgba(91, 46, 145, 0.7);
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary.active, .show > .btn-primary.dropdown-toggle {
    background: #3D1C63;
    border-color: #3D1C63;
    color: #FFFFFF;
}

.btn-outline-primary {
    color: var(--vw-brand);
    border-color: rgba(91, 46, 145, 0.35) !important;
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--vw-brand);
    border-color: var(--vw-brand);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.btn-outline-light { border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; }
.btn-outline-light:hover { background: #FFFFFF; color: var(--vw-ink); border-color: #FFFFFF; }

.btn-lg { padding: 0.82rem 1.7rem; font-size: 1rem; border-radius: 12px; }
.btn-sm { padding: 0.42rem 0.95rem; font-size: 0.85rem; }
.btn-block { border-radius: 12px; }

.btn-light { background: #FFFFFF; border-color: #FFFFFF; color: var(--vw-ink); }
.btn-light:hover { background: #F1EDFA; border-color: #F1EDFA; color: var(--vw-brand); transform: translateY(-2px); }

/* — Cards / alerts / breadcrumb — */
.card { border: 1px solid var(--vw-line); border-radius: var(--vw-radius); box-shadow: var(--vw-shadow-soft); }

.alert { border: none; border-radius: 12px; font-size: 0.95rem; }
.alert-danger { background: #FDECEF; color: #8E2437; }
.alert-success { background: #E9F7EF; color: #1E7A46; }

.breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}
.breadcrumb-item a { color: inherit; opacity: 0.75; }
.breadcrumb-item a:hover { opacity: 1; }
.breadcrumb-item.active { opacity: 0.55; font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { color: inherit; opacity: 0.4; }

/* — Forms — */
label, .form-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--vw-ink);
    letter-spacing: 0.01em;
    margin-bottom: 0.45rem;
}

.form-control {
    border: 1px solid var(--vw-line);
    border-radius: 10px;
    padding: 0.72rem 1rem;
    font-size: 0.97rem;
    color: var(--vw-ink);
    background: #FFFFFF;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form-control::placeholder { color: #A9A3BC; }
.form-control:focus {
    border-color: var(--vw-brand);
    box-shadow: var(--vw-ring);
    color: var(--vw-ink);
}
textarea.form-control { line-height: 1.6; }

.input-group-text {
    border: 1px solid var(--vw-line);
    background: var(--vw-mist);
    color: var(--vw-brand);
    border-radius: 10px;
    font-size: 0.92rem;
}
.input-group > .form-control { border-radius: 10px; }

/* ============================================================================
   4. HEADER — topbar, navbar, drawer
   ========================================================================== */

.vw-ticker { display: none; }

.vw-topbar {
    background: var(--vw-night);
    color: #B9B3CC;
    font-size: 0.795rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    height: auto;
    min-height: 42px;
}
.vw-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 42px;
    padding: 6px 0;
}
.vw-topbar__contacts,
.vw-topbar__social {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.vw-topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #B9B3CC;
    font-weight: 400;
    transition: color 0.18s ease;
}
.vw-topbar__item:hover { color: #FFFFFF; }
.vw-topbar__icon {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.07);
    color: #A98BD0;
    font-size: 0.65rem;
}
.vw-topbar__icon img { display: block; opacity: 0.85; }

/* The full database address now fills the topbar; hide the redundant landline
   (still available in the footer) so address + email + phone fit on one line. */
.vw-topbar__contacts .vw-topbar__item--landline { display: none; }

.vw-topbar__social { gap: 7px; }
.vw-topbar__social-link {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.07);
    color: #B9B3CC;
    font-size: 0.72rem;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.vw-topbar__social-link:hover {
    background: #FFFFFF;
    color: var(--vw-night);
    transform: translateY(-2px);
}

/* — Navbar shell — */
.vw-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.vw-header.is-scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: var(--vw-line);
    box-shadow: 0 14px 34px -28px rgba(23, 20, 31, 0.6);
}

.vw-nav__inner {
    display: flex;
    align-items: center;
    gap: 22px;
    height: var(--vw-header-h);
}

/* — Logo — */
.vw-logo { gap: 11px; }
.vw-logo__mark { width: 42px; height: 42px; }
.vw-logo__mark img { border-radius: 11px; box-shadow: 0 6px 18px -8px rgba(91, 46, 145, 0.55); }
.vw-logo:hover .vw-logo__mark img { box-shadow: 0 0 0 3px rgba(91, 46, 145, 0.14), 0 8px 22px -10px rgba(91, 46, 145, 0.55); }
.vw-logo__name { font-size: 19px; letter-spacing: 1.6px; color: var(--vw-ink); font-weight: 800; }
.vw-logo__tagline { font-size: 9.5px; letter-spacing: 0.6px; color: var(--vw-dim); font-weight: 500; }

/* — Links — */
.vw-nav__links {
    gap: 4px;
    justify-content: center;
}
.vw-nav__link {
    padding: 9px 15px;
    font-size: 0.945rem;
    font-weight: 600;
    color: var(--vw-ink);
    border-radius: 10px;
    background: transparent;
    transition: background 0.18s ease, color 0.18s ease;
}
.vw-nav__link::after { content: none; }
.vw-nav__link:hover { background: var(--vw-tint); color: var(--vw-brand); }
.vw-nav__link.is-active { background: var(--vw-tint); color: var(--vw-brand); }
.vw-nav__link .nav-link-caret { font-size: 0.6rem; opacity: 0.5; transition: transform 0.2s ease; }
.vw-nav__item.dropdown-open > .vw-nav__link .nav-link-caret { transform: rotate(180deg); }

/* — Desktop dropdown — */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 260px;
    padding: 8px;
    margin: 0;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid var(--vw-line);
    border-radius: 16px;
    box-shadow: 0 30px 60px -32px rgba(23, 20, 31, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1010;
}
.nav-dropdown::before { content: none; }
.nav-item.dropdown-open .nav-dropdown,
.vw-nav__item.dropdown-open .nav-dropdown,
.nav-item:hover .nav-dropdown,
.vw-nav__item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown li a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--vw-ink);
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.nav-dropdown li a i { width: 18px; text-align: center; color: var(--vw-brand-soft); font-size: 0.9rem; }
.nav-dropdown li a:hover { background: var(--vw-tint); color: var(--vw-brand); padding-left: 17px; }

/* — Header CTA buttons — */
.vw-nav__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.vw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 19px;
    border-radius: 10px;
    font-family: var(--vw-font);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease,
                border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.vw-btn--ghost {
    background: #FFFFFF;
    border-color: var(--vw-line);
    color: var(--vw-ink);
}
.vw-btn--ghost:hover {
    border-color: rgba(91, 46, 145, 0.4);
    color: var(--vw-brand);
    transform: translateY(-2px);
    box-shadow: var(--vw-shadow-soft);
}
.vw-btn--primary {
    background: var(--vw-brand);
    border-color: var(--vw-brand);
    color: #FFFFFF;
    box-shadow: 0 12px 26px -14px rgba(91, 46, 145, 0.75);
}
.vw-btn--primary:hover {
    background: var(--vw-brand-dark);
    border-color: var(--vw-brand-dark);
    color: #FFFFFF;
    transform: translateY(-2px);
}
.vw-btn--full { width: 100%; }
.vw-btn--on-dark {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #FFFFFF;
}
.vw-btn--on-dark:hover { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; transform: translateY(-2px); }
.vw-btn--white { background: #FFFFFF; border-color: #FFFFFF; color: var(--vw-ink); }
.vw-btn--white:hover { background: #F1EDFA; border-color: #F1EDFA; color: var(--vw-brand); transform: translateY(-2px); }

/* — Hamburger — */
.vw-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid var(--vw-line);
    border-radius: 11px;
    background: #FFFFFF;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.vw-hamburger:hover { border-color: rgba(91, 46, 145, 0.4); }
.vw-hamburger__bar {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--vw-ink);
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.vw-hamburger[aria-expanded="true"] .vw-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vw-hamburger[aria-expanded="true"] .vw-hamburger__bar:nth-child(2) { opacity: 0; }
.vw-hamburger[aria-expanded="true"] .vw-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* — Mobile drawer — */
.vw-mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(360px, 88vw);
    height: 100vh;
    height: 100dvh;
    background: #FFFFFF;
    border-left: 1px solid var(--vw-line);
    box-shadow: -30px 0 60px -40px rgba(23, 20, 31, 0.6);
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px 22px 28px;
    visibility: hidden;
}
.vw-mobile-menu.is-open { transform: translateX(0); visibility: visible; }

.vw-mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--vw-line);
}
.vw-mobile-menu__logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 1.4px; color: var(--vw-ink); }
.vw-mobile-menu__logo img { border-radius: 9px; }
.vw-mobile-menu__close {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--vw-line);
    background: var(--vw-mist);
    color: var(--vw-ink);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.vw-mobile-menu__close:hover { background: var(--vw-tint); color: var(--vw-brand); }

.vw-mobile-menu__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vw-mobile-menu__link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-family: var(--vw-font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--vw-ink);
    text-align: left;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.vw-mobile-menu__link:hover, .vw-mobile-menu__link.is-active { background: var(--vw-tint); color: var(--vw-brand); }
.vw-mobile-menu__link-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--vw-tint);
    color: var(--vw-brand);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.vw-mobile-menu__caret { margin-left: auto; font-size: 0.7rem; opacity: 0.5; transition: transform 0.2s ease; }
.vw-mobile-menu__accordion-btn[aria-expanded="true"] .vw-mobile-menu__caret { transform: rotate(180deg); }

.vw-mobile-menu__sub {
    list-style: none;
    margin: 4px 0 6px;
    padding: 6px 0 6px 14px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-left: 2px solid var(--vw-tint);
    margin-left: 28px;
}
.vw-mobile-menu__sub.is-open { max-height: 320px; }
.vw-mobile-menu__sub-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--vw-body);
}
.vw-mobile-menu__sub-link:hover { background: var(--vw-tint); color: var(--vw-brand); }
.vw-mobile-menu__sub-link i { width: 17px; text-align: center; color: var(--vw-brand-soft); }

.vw-mobile-menu__actions { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--vw-line); }
.vw-mobile-menu__contact {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--vw-line);
    font-size: 0.87rem;
}
.vw-mobile-menu__contact a { display: inline-flex; align-items: center; gap: 9px; color: var(--vw-body); }
.vw-mobile-menu__contact a:hover { color: var(--vw-brand); }
.vw-mobile-menu__contact i { color: var(--vw-brand-soft); }

.vw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 22, 0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s;
    z-index: 1040;
}
.vw-overlay.is-visible { opacity: 1; visibility: visible; }

/* ============================================================================
   5. FOOTER
   ========================================================================== */

.vw-footer {
    background: var(--vw-night);
    color: #A7A1BC;
    padding: clamp(56px, 7vw, 84px) 0 0;
    position: relative;
    overflow: hidden;
}
.vw-footer__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(36px, 5vw, 56px);
}
.vw-footer__brand-mark { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vw-footer__brand-mark img { border-radius: 12px; }
.vw-footer__brand-name { display: block; font-size: 19px; font-weight: 800; letter-spacing: 2px; color: #FFFFFF; line-height: 1; }
.vw-footer__brand-sub { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 3.4px; color: #A98BD0; line-height: 1; margin-top: 5px; }
.vw-footer__about { font-size: 0.93rem; line-height: 1.75; color: #9791B0; max-width: 330px; margin-bottom: 22px; }

.vw-footer__socials { display: flex; gap: 9px; flex-wrap: wrap; }
.vw-footer__social {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #B9B3CC;
    font-size: 0.85rem;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.vw-footer__social:hover { background: var(--vw-brand); color: #FFFFFF; transform: translateY(-3px); }

.vw-footer__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 20px;
}
.vw-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.vw-footer__list a {
    color: #9791B0;
    font-size: 0.93rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: color 0.18s ease, transform 0.18s ease;
}
.vw-footer__list a::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--vw-brand-soft);
    opacity: 0.6;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.vw-footer__list a:hover { color: #FFFFFF; }
.vw-footer__list a:hover::before { opacity: 1; transform: scale(1.4); }

.vw-footer__contact li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; color: #9791B0; }
.vw-footer__contact li i,
.vw-footer__contact li img {
    color: var(--vw-brand-soft);
    margin-top: 5px;
    flex-shrink: 0;
    width: 15px;
    text-align: center;
    filter: none;
}
.vw-footer__contact a { color: #9791B0; }
.vw-footer__contact a:hover { color: #FFFFFF; }

.vw-footer__bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    color: #7E7899;
}
.vw-footer__bottom a { color: #9791B0; }
.vw-footer__bottom a:hover { color: #FFFFFF; }
.vw-footer__legal { display: flex; gap: 22px; }

/* Re-assert footer colours against legacy `footer *` !important rules
   (brand-theme.css / ui-remake.css force white text and lavender icons) */
.vw-footer__about,
.vw-footer__contact li { color: #9791B0 !important; }
.vw-footer__list a,
.vw-footer__contact a { color: #9791B0 !important; }
.vw-footer__list a:hover,
.vw-footer__contact a:hover { color: #FFFFFF !important; }
.vw-footer__title,
.vw-footer__brand-name { color: #FFFFFF !important; }
.vw-footer__brand-sub { color: #A98BD0 !important; }
.vw-footer__bottom { color: #7E7899 !important; }
.vw-footer__bottom a { color: #9791B0 !important; }
.vw-footer__bottom a:hover { color: #FFFFFF !important; }
.vw-footer__social { color: #B9B3CC !important; }
.vw-footer__social i { color: #B9B3CC !important; }
.vw-footer__social:hover { background: var(--vw-brand) !important; }
.vw-footer__social:hover i { color: #FFFFFF !important; }
.vw-footer__contact li i,
.vw-footer__contact li img { color: var(--vw-brand-soft) !important; }

/* Back to top */
#btn-back-to-top,
a.back-to-top.back-to-top {
    position: fixed;
    right: 26px;
    bottom: 26px;
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--vw-brand);
    color: #FFFFFF;
    font-size: 1rem;
    box-shadow: 0 16px 34px -14px rgba(91, 46, 145, 0.8);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.18s ease;
    z-index: 900;
}
#btn-back-to-top.show,
a.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#btn-back-to-top:hover { background: var(--vw-brand-dark); color: #FFFFFF; transform: translateY(-3px); }

/* ============================================================================
   6. PAGE BANNER (shared inner-page header)
   ========================================================================== */

.page-header {
    position: relative;
    background: #1B1629;
    padding: clamp(52px, 7vw, 84px) 0 clamp(40px, 5vw, 60px);
    text-align: center;
    overflow: hidden;
    box-shadow: none;
}
.page-header > .container { position: relative; z-index: 1; }
.page-header h1 { color: #FFFFFF; margin-bottom: 14px; }
.page-header .section-badge {
    background: rgba(255, 255, 255, 0.12);
    color: #E4D9F5;
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin-bottom: 18px;
}
.page-header .breadcrumb { color: rgba(255, 255, 255, 0.75); justify-content: center; }
.page-header .breadcrumb a,
.page-header .breadcrumb-item.active { color: rgba(255, 255, 255, 0.8); }
.page-header a.text-white:hover { opacity: 0.8; }

/* ============================================================================
   7. HOMEPAGE — new section system (.hs-*)
   ========================================================================== */

.hs-hero {
    position: relative;
    text-align: center;
    padding: clamp(64px, 9vw, 118px) 0 clamp(52px, 7vw, 84px);
    background: #FFFFFF;
    border-bottom: 1px solid var(--vw-line);
    overflow: hidden;
}

/* ── Standalone hero carousel (image only, no overlay content) ── */
.hs-carousel-wrap {
    position: relative;
    width: 100%;
    height: clamp(220px, 42vw, 520px);
    overflow: hidden;
    background: #0a1228;
}
.hs-carousel__slides {
    position: absolute;
    inset: 0;
}
.hs-carousel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.hs-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hs-carousel__slide.active {
    opacity: 1;
}
/* Dots */
.hs-carousel__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 10px;
}
.hs-carousel__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.75);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .3s, border-color .3s, transform .3s;
}
.hs-carousel__dot.active,
.hs-carousel__dot:hover {
    background: #fff;
    border-color: #fff;
    transform: scale(1.3);
}

/* ── Hero carousel (background image slideshow) — legacy, kept for compat ── */
.hs-hero--carousel {
    background: transparent;
    color: #fff;
}
.hs-hero__carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hs-hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.hs-hero__slide.active {
    opacity: 1;
}
.hs-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(10,18,40,.72) 0%, rgba(10,18,40,.50) 100%);
}
.hs-hero--carousel .container {
    position: relative;
    z-index: 2;
}
.hs-hero--carousel .hs-hero__title { color: #fff; }
.hs-hero--carousel .hs-hero__title em { color: #7dd3fc; }
.hs-hero--carousel .hs-hero__lead { color: rgba(255,255,255,.88); }
.hs-hero--carousel .vw-eyebrow { color: rgba(255,255,255,.75); }
.hs-hero--carousel .hs-hero__stats { border-top-color: rgba(255,255,255,.25); }
.hs-hero--carousel .hs-hero__stats strong { color: #fff; }
.hs-hero--carousel .hs-hero__stats span { color: rgba(255,255,255,.7); }

/* Carousel dots */
.hs-hero__dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}
.hs-hero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.7);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .3s, border-color .3s, transform .3s;
}
.hs-hero__dot.active,
.hs-hero__dot:hover {
    background: #fff;
    border-color: #fff;
    transform: scale(1.25);
}
.hs-hero__inner { position: relative; max-width: 820px; margin: 0 auto; }
.hs-hero__title {
    font-size: clamp(2.35rem, 5.6vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.06;
    margin: 22px 0 20px;
    color: var(--vw-ink);
}
.hs-hero__title em { font-style: normal; color: var(--vw-brand); white-space: nowrap; }
.hs-hero__lead {
    font-size: clamp(1.02rem, 1.7vw, 1.18rem);
    line-height: 1.7;
    color: var(--vw-body);
    max-width: 640px;
    margin: 0 auto 34px;
}
.hs-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hs-hero__stats {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(26px, 5vw, 60px);
    margin: clamp(44px, 6vw, 64px) 0 0;
    padding-top: clamp(28px, 4vw, 40px);
    border-top: 1px solid var(--vw-line);
}
.hs-hero__stats li { min-width: 120px; }
.hs-hero__stats strong {
    display: block;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--vw-ink);
    line-height: 1.1;
}
.hs-hero__stats span {
    display: block;
    margin-top: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vw-dim);
}

/* — Client logo strip — */
.hs-logos {
    background: #FFFFFF;
    border-bottom: 1px solid var(--vw-line);
    padding: clamp(30px, 4vw, 44px) 0;
}
.hs-logos__label {
    text-align: center;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vw-dim);
    margin-bottom: clamp(20px, 3vw, 30px);
}
.hs-logos__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(26px, 5vw, 60px);
}
.hs-logos__item { display: block; }
.hs-logos__item img {
    height: 46px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.5;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}
.hs-logos__item:hover img { filter: grayscale(0); opacity: 1; transform: translateY(-3px); }

/* — Generic section shell — */
.hs-section { padding: clamp(60px, 8vw, 104px) 0; }
.hs-section--soft { background: var(--vw-mist); }
.hs-section--line { border-top: 1px solid var(--vw-line); }

.hs-head { max-width: 680px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.hs-head h2 { margin: 16px 0 14px; }
.hs-head p { margin: 0 auto; font-size: 1.05rem; color: var(--vw-body); max-width: 580px; }
.hs-head--left { margin-left: 0; margin-right: 0; text-align: left; }
.hs-head--left p { margin-left: 0; }

.hs-grid { display: grid; gap: 22px; }
.hs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hs-grid--4 { grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }

/* — Cards — */
.hs-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid var(--vw-line);
    border-radius: var(--vw-radius-lg);
    padding: 30px 28px 28px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
.hs-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 3px;
    width: 0;
    background: var(--vw-brand);
    transition: width 0.35s ease;
}
.hs-card:hover {
    transform: translateY(-6px);
    border-color: rgba(91, 46, 145, 0.32);
    box-shadow: 0 30px 54px -34px rgba(23, 20, 31, 0.55);
}
.hs-card:hover::after { width: 100%; }
.hs-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--vw-tint);
    color: var(--vw-brand);
    font-size: 1.2rem;
    margin-bottom: 20px;
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.hs-card:hover .hs-card__icon { background: var(--vw-brand); color: #FFFFFF; transform: rotate(-6deg) scale(1.05); }
.hs-card h3 { font-size: 1.16rem; margin: 0 0 10px; }
.hs-card p { font-size: 0.95rem; color: var(--vw-body); margin-bottom: 16px; }
.hs-card__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.hs-card__list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--vw-body);
    line-height: 1.5;
}
.hs-card__list li::before {
    content: '\f058';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.78rem;
    color: var(--vw-brand);
    margin-top: 0.3em;
    opacity: 0.85;
}
.hs-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--vw-brand);
}
.hs-card__link i { transition: transform 0.2s ease; font-size: 0.8rem; }
.hs-card__link:hover { color: var(--vw-brand-dark); gap: 13px; }
.hs-card__link:hover i { transform: translateX(3px); }

.hs-card--flat { background: transparent; border-style: dashed; }

/* — Stats band — */
.hs-stats {
    position: relative;
    background: var(--vw-brand);
    padding: clamp(52px, 7vw, 80px) 0;
    overflow: hidden;
}
.hs-stats__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}
.hs-stats__item { position: relative; padding: 6px 10px; }
.hs-stats__item + .hs-stats__item::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 12%;
    height: 76%;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
}
.hs-stats__item strong {
    display: block;
    font-size: clamp(2rem, 4vw, 2.9rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #FFFFFF;
    line-height: 1.05;
}
.hs-stats__item span {
    display: block;
    margin-top: 10px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

/* — About — */
.hs-about__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(34px, 5vw, 70px);
    align-items: center;
}
.hs-about__title { margin: 16px 0 18px; }
.hs-about__text { font-size: 1.02rem; color: var(--vw-body); }
.hs-about__list {
    list-style: none;
    margin: 26px 0 30px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
}
.hs-about__list li {
    display: flex;
    gap: 11px;
    align-items: center;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--vw-ink);
}
.hs-about__list li i {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--vw-tint);
    color: var(--vw-brand);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.hs-about__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.hs-tile {
    background: #FFFFFF;
    border: 1px solid var(--vw-line);
    border-radius: 18px;
    padding: 24px 22px;
    box-shadow: var(--vw-shadow-soft);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.hs-tile:nth-child(even) { transform: translateY(18px); }
.hs-tile:hover { transform: translateY(-4px); border-color: rgba(91, 46, 145, 0.3); box-shadow: 0 26px 46px -32px rgba(23, 20, 31, 0.5); }
.hs-tile:nth-child(even):hover { transform: translateY(14px); }
.hs-tile i { font-size: 1.25rem; color: var(--vw-brand); }
.hs-tile h4 { font-size: 1rem; margin: 14px 0 7px; }
.hs-tile p { font-size: 0.87rem; color: var(--vw-dim); margin: 0; line-height: 1.6; }

/* — Process steps — */
.hs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.hs-step {
    position: relative;
    background: #FFFFFF;
    border: 1px solid var(--vw-line);
    border-radius: 18px;
    padding: 26px 24px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.hs-step:hover { transform: translateY(-5px); border-color: rgba(91, 46, 145, 0.3); box-shadow: 0 26px 46px -32px rgba(23, 20, 31, 0.5); }
.hs-step__num {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--vw-brand);
    background: var(--vw-tint);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 16px;
}
.hs-step h3 { font-size: 1.05rem; margin-bottom: 9px; }
.hs-step p { font-size: 0.9rem; color: var(--vw-body); margin: 0; line-height: 1.65; }

/* — CTA band — */
.hs-cta { padding: clamp(56px, 7vw, 92px) 0; background: #FFFFFF; }
.hs-cta__inner {
    position: relative;
    text-align: center;
    background: #1B1629;
    border-radius: clamp(20px, 3vw, 30px);
    padding: clamp(44px, 6vw, 76px) clamp(24px, 5vw, 64px);
    overflow: hidden;
}
.hs-cta__inner h2 { color: #FFFFFF; margin: 18px 0 14px; }
.hs-cta__inner p { color: rgba(255, 255, 255, 0.72); max-width: 560px; margin: 0 auto 30px; font-size: 1.03rem; }
.hs-cta__inner .section-badge { background: rgba(255, 255, 255, 0.12); color: #E4D9F5; }
.hs-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hs-cta__phone {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    font-weight: 600;
}
.hs-cta__phone:hover { color: #FFFFFF; }
.hs-cta__phone i { color: #A98BD0; }

/* ============================================================================
   8. INNER PAGES — shared
   ========================================================================== */

/* — Services page (services-section.css is a dark theme; re-skin it) — */
.services-section {
    background: #FFFFFF;
    position: relative;
    padding: clamp(44px, 5vw, 68px) 0;
}
.services-section::before,
.services-section::after { content: none; }
.services-section .section-badge {
    display: inline-flex;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--vw-tint);
    border: 0;
    color: var(--vw-brand);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.services-section h2 {
    background: none;
    -webkit-text-fill-color: currentColor;
    background-clip: border-box;
    color: var(--vw-ink);
    font-weight: 800 !important;
}
.services-section .text-center > p { color: var(--vw-body) !important; }
.services-intro { padding: clamp(48px, 6vw, 72px) 0 clamp(20px, 3vw, 30px); }
.services-intro h2 { font-weight: 800; }
.services-cta { padding: clamp(40px, 5vw, 64px) 0; background: var(--vw-mist); }

.service-jump-nav .btn-outline-primary { background: #FFFFFF; }
.service-jump-nav .btn:hover {
    background: var(--vw-tint) !important;
    border-color: rgba(91, 46, 145, 0.45) !important;
    color: var(--vw-brand) !important;
}

.service-block {
    position: relative;
    padding: clamp(46px, 6vw, 78px) 0;
    border-bottom: 1px solid var(--vw-line);
}
.service-block:last-of-type { border-bottom: 0; }
.service-block--alt { background: var(--vw-mist); }
.service-block.service-section-focus { animation: hsFocus 1.4s ease; }
@keyframes hsFocus { 0%, 100% { background: transparent; } 30% { background: #F6F1FE; } }

.service-block-media {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--vw-line);
    box-shadow: 0 34px 60px -40px rgba(23, 20, 31, 0.6);
    background: var(--vw-tint);
}
.service-block-media img { display: block; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; }
.service-block-icon {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    color: var(--vw-brand);
    font-size: 1.35rem;
    box-shadow: 0 16px 30px -16px rgba(23, 20, 31, 0.55);
}
.service-block-title {
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-weight: 800;
    margin: 14px 0 16px;
    background: none;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--vw-ink);
}
.service-block-text { font-size: 1.02rem; color: var(--vw-body); max-width: 560px; }

.services-section .service-features,
.service-features {
    list-style: none;
    padding: 0;
    margin: 22px 0 26px;
    display: grid;
    gap: 11px;
}
.service-features li {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--vw-ink);
}
/* beat services-section.css's dark-theme feature colours */
.service-block .service-features li { color: var(--vw-ink); }
.service-block .service-features li i { color: var(--vw-brand); }
.service-features li i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--vw-tint);
    color: var(--vw-brand);
    font-size: 0.66rem;
    flex-shrink: 0;
}
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--vw-brand);
}
.service-link:hover { gap: 14px; }
.service-link i { transition: transform 0.2s ease; }

/* — Contact page — */
.contact-info-wrapper,
.contact-form {
    background: #FFFFFF;
    border: 1px solid var(--vw-line);
    border-radius: var(--vw-radius-lg);
    padding: clamp(26px, 3vw, 38px);
    box-shadow: var(--vw-shadow-soft);
    height: 100%;
}
.contact-info-wrapper .section-badge,
.contact-form .section-badge { margin-bottom: 26px; }

.contact-info-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--vw-line);
}
.contact-info-item:last-of-type { border-bottom: 0; }
.contact-info-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--vw-tint);
    color: var(--vw-brand);
    font-size: 1rem;
    flex-shrink: 0;
}
.contact-info-content h5 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vw-dim);
    margin-bottom: 5px;
}
.contact-info-content p { font-size: 0.97rem; color: var(--vw-ink); margin: 0; line-height: 1.6; }
.contact-info-content a { color: var(--vw-ink); font-weight: 500; }
.contact-info-content a:hover { color: var(--vw-brand); }

.social-links h5 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vw-dim); }
.social-link,
.social-links .social-link {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--vw-line);
    background: #FFFFFF;
    color: var(--vw-brand);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.social-link:hover { background: var(--vw-brand); border-color: var(--vw-brand); color: #FFFFFF; transform: translateY(-3px); }

.map-container h3 { font-weight: 800; margin-bottom: 22px; }
.map-wrapper iframe { border: 1px solid var(--vw-line) !important; border-radius: 18px !important; box-shadow: var(--vw-shadow-soft); }

/* — Auth pages (login / register / signup) — */
.auth-page {
    background: var(--vw-mist);
    padding: clamp(48px, 7vw, 88px) 0;
}
.auth-card {
    border: 1px solid var(--vw-line) !important;
    border-radius: 22px !important;
    overflow: hidden;
    box-shadow: 0 40px 70px -46px rgba(23, 20, 31, 0.6) !important;
    background: #FFFFFF;
}
.auth-card .card-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--vw-line);
    padding: 34px 34px 26px;
}
.auth-card .card-header h1 { font-size: 1.55rem; font-weight: 800; margin-top: 10px; }
.auth-card .card-header p { color: var(--vw-dim); font-size: 0.95rem; }
.auth-card .card-body { padding: clamp(26px, 4vw, 38px) !important; }
.auth-card .card-header img { border-radius: 14px; box-shadow: 0 10px 24px -12px rgba(91, 46, 145, 0.6); }
.password-toggle { cursor: pointer; user-select: none; transition: color 0.15s ease; }
.password-toggle:hover { color: var(--vw-brand); }

/* ============================================================================
   9. INNER PAGES — legacy section overrides
   ========================================================================== */

/* — Gallery / video gallery — */
.gallery-section { background: #FFFFFF; padding: clamp(46px, 6vw, 76px) 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.gallery-item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--vw-line);
    background: var(--vw-mist);
    transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.gallery-item:hover { transform: translateY(-5px); box-shadow: 0 30px 54px -34px rgba(23, 20, 31, 0.55); }
.gallery-item img, .gallery-item video { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 18px 16px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #FFFFFF !important;
    background: linear-gradient(to top, rgba(15, 12, 22, 0.92), rgba(15, 12, 22, 0)) !important;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    border-top: 0;
}
.gallery-item:hover .gallery-caption { transform: translateY(0); }
.gallery-header { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }

/* — Projects page (slider showcase) — */
.gallery-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #E4D9F5;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.gallery-container, .gallery-slide {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--vw-line);
    box-shadow: 0 34px 60px -42px rgba(23, 20, 31, 0.6);
}
.gallery-footer { padding-top: 20px; text-align: center; }

/* — Clients page — */
.clients-section-ultra {
    background: #FFFFFF !important;
    min-height: auto;
    padding: clamp(48px, 6vw, 80px) 0 !important;
}
.clients-bg-elements { display: none; }
.clients-title, .clients-title h1, .clients-title h2 { color: var(--vw-ink); }
.clients-subtitle { color: var(--vw-body); }
.client-card-ultra .card-inner {
    background: #FFFFFF;
    border: 1px solid var(--vw-line);
    border-radius: 18px;
    box-shadow: var(--vw-shadow-soft);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.client-card-ultra:hover .card-inner { transform: translateY(-6px); border-color: rgba(91, 46, 145, 0.3); box-shadow: 0 30px 54px -34px rgba(23, 20, 31, 0.5); }
.card-hover-hint { background: var(--vw-tint); color: var(--vw-body); }
.card-hover-hint i { color: var(--vw-brand); }
.card-back { background: var(--vw-brand); }
.filter-btn {
    background: #FFFFFF;
    border: 1px solid var(--vw-line);
    color: var(--vw-body);
    border-radius: 999px;
}
.filter-btn.active { background: var(--vw-brand); border-color: var(--vw-brand); color: #FFFFFF; }

/* — Career page — */
.career-section { background: #FFFFFF; }
.career-section--alt { background: var(--vw-mist); }
.career-stat {
    background: #FFFFFF;
    border: 1px solid var(--vw-line);
    border-radius: 16px;
    box-shadow: var(--vw-shadow-soft);
}
.career-job-card {
    background: #FFFFFF;
    border: 1px solid var(--vw-line);
    border-radius: 18px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.career-job-card:hover { transform: translateY(-5px); border-color: rgba(91, 46, 145, 0.3); box-shadow: 0 30px 54px -34px rgba(23, 20, 31, 0.5); }
.career-job-icon { background: var(--vw-tint); color: var(--vw-brand); }
.career-step { background: #FFFFFF; border: 1px solid var(--vw-line); border-radius: 16px; }

/* — Simple content pages (terms / privacy / 404) — */
.vw-content-page { padding: clamp(48px, 6vw, 80px) 0; }
.vw-content-page h2 { font-size: 1.35rem; margin-top: 34px; }
.vw-content-page p, .vw-content-page li { color: var(--vw-body); }

/* — Software downloads page — */
.sw-hero, .software-hero { position: relative; }

/* ============================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {
    .hs-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hs-steps { grid-template-columns: repeat(2, 1fr); }
    .vw-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991.98px) {
    .vw-topbar { display: none; }
    .vw-nav__links, .vw-nav__actions { display: none; }
    .vw-hamburger { display: flex; margin-left: auto; }
    .vw-nav__inner { justify-content: space-between; gap: 14px; }

    .hs-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .hs-about__grid { grid-template-columns: 1fr; }
    .hs-about__tiles { max-width: 560px; }
    .hs-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
    .hs-stats__item + .hs-stats__item::before { content: none; }
    .hs-stats__item:nth-child(even)::before { content: none; }
    .hs-hero__stats { gap: 30px; }
}

@media (max-width: 767.98px) {
    .hs-grid--2, .hs-grid--3, .hs-grid--4 { grid-template-columns: 1fr; }
    .hs-steps { grid-template-columns: 1fr; }
    .hs-about__list { grid-template-columns: 1fr; }
    .vw-footer__grid { grid-template-columns: 1fr; gap: 34px; }
    .vw-footer__bottom { justify-content: center; text-align: center; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
    .hs-tile:nth-child(even) { transform: none; }
    .hs-tile:nth-child(even):hover { transform: translateY(-4px); }
    #btn-back-to-top, a.back-to-top.back-to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

@media (max-width: 575.98px) {
    .hs-hero__stats { flex-direction: column; gap: 22px; }
    .hs-hero__stats li { min-width: 0; }
    .auth-card .card-header { padding: 26px 22px 20px; }
}

/* ============================================================================
   11. RE-ASSERTIONS
   Several legacy sheets (ui-remake, brand-theme, site-responsive, header-design)
   force their values with !important. This file loads last, so !important plus
   equal-or-higher specificity wins from here — re-stating the redesign's intent
   for the rules that would otherwise be pinned by that legacy layer.
   ========================================================================== */

/* — Buttons: flat violet instead of legacy plum gradients — */
.btn-primary, a.btn-primary {
    background: var(--vw-brand) !important;
    background-image: none !important;
    border-color: var(--vw-brand) !important;
    color: #FFFFFF !important;
}
.btn-primary:hover, a.btn-primary:hover,
.btn-primary:focus, a.btn-primary:focus {
    background: var(--vw-brand-dark) !important;
    background-image: none !important;
    border-color: var(--vw-brand-dark) !important;
    color: #FFFFFF !important;
}

/* — Page banner (inner pages) — */
.page-header {
    position: relative;
    background: #1B1629 !important;
    padding: clamp(52px, 7vw, 84px) 0 clamp(40px, 5vw, 60px) !important;
    overflow: hidden !important;
    text-align: center;
    box-shadow: none;
}
.page-header h1,
.page-header h3,
.page-header .text-white {
    color: #FFFFFF !important;
    font-size: clamp(1.75rem, 4vw, 2.55rem) !important;
    font-weight: 800 !important;
    text-shadow: none;
}
.page-header .section-badge {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #E4D9F5 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a,
.page-header .breadcrumb-item.active { color: rgba(255, 255, 255, 0.82) !important; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.5) !important; }

/* — Display heading weight (ui-remake pins all headings to 700) — */
.hs-hero__title,
.hs-head h2,
.hs-about__title,
.hs-cta__inner h2,
.service-block-title { font-weight: 800 !important; }

/* — Header nav states — */
.vw-header .vw-nav__link:hover,
.vw-header .vw-nav__link.is-active {
    background: var(--vw-tint) !important;
    color: var(--vw-brand) !important;
}
.vw-header .nav-dropdown li a:hover {
    background: var(--vw-tint) !important;
    color: var(--vw-brand) !important;
}

/* — Forms: violet focus ring — */
.contact-form .form-control,
.auth-card .form-control { border-color: var(--vw-line) !important; }
.form-control:focus,
input:focus, textarea:focus, select:focus {
    border-color: var(--vw-brand) !important;
    box-shadow: var(--vw-ring) !important;
}
.auth-card .form-control:focus {
    border-color: var(--vw-brand) !important;
    box-shadow: var(--vw-ring) !important;
}

/* — Auth pages — */
.auth-page {
    background: var(--vw-mist) !important;
}
.auth-card .card-body { padding: clamp(26px, 4vw, 38px) !important; }

/* — Contact page — */
.contact-info-icon { background: var(--vw-tint) !important; }
.contact-info-icon i { color: var(--vw-brand) !important; }

/* — Badge on dark surfaces — */
.hs-cta__inner .section-badge {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #E4D9F5 !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* — Clients filter — */
.clients-section-ultra .filter-btn.active,
.clients-section-ultra .filter-btn:hover {
    background: var(--vw-brand) !important;
    border-color: var(--vw-brand) !important;
    color: #FFFFFF !important;
}

/* ============================================================================
   §12 — LEGACY COMPONENT RE-SKINS (sheets loaded per-page via $extraCss)
   career-section.css and clients-ultra.css hard-code the old plum palette
   (#4B2C62 / #6B4580 / #C4A7D1) and some of their rules win on specificity or
   !important. redesign.css loads after them, so these re-state the palette
   for the selectors that actually render.
   ========================================================================== */

/* — Career (career-section.css) — */
.career-section {
    background: #FAF9FD !important;
}
.career-section .section-badge {
    background: var(--vw-tint) !important;
    color: var(--vw-brand) !important;
}
.career-stat i { color: var(--vw-brand) !important; }
.career-job-icon {
    background: var(--vw-brand) !important;
    background-image: none !important;
}
.career-job-tag {
    background: var(--vw-tint) !important;
    color: var(--vw-brand) !important;
}
.career-job-skills li::before { color: var(--vw-brand) !important; }
.career-job-apply {
    background: var(--vw-brand) !important;
    background-image: none !important;
}
.career-step-num {
    background: var(--vw-brand) !important;
    background-image: none !important;
}
.career-form .btn-primary,
.career-form .career-submit-btn {
    background: var(--vw-brand) !important;
    background-image: none !important;
}
.career-contact-item { color: var(--vw-brand) !important; }
.career-contact-item i { color: var(--vw-brand) !important; }
.career-contact-item a { color: var(--vw-brand) !important; }
.career-contact-item a:hover { color: var(--vw-brand-dark) !important; }

/* — Clients (clients-ultra.css) —
   The badge and visit button render on the white card front. */
.client-category-badge {
    background: var(--vw-tint) !important;
    background-image: none !important;
    border-color: rgba(91, 46, 145, 0.22) !important;
    color: var(--vw-brand) !important;
}
.client-category-badge i { color: var(--vw-brand) !important; }
.client-visit-btn {
    background: var(--vw-brand) !important;
    background-image: none !important;
    box-shadow: 0 6px 18px rgba(91, 46, 145, 0.28) !important;
}
.client-visit-btn:hover {
    background: var(--vw-brand-dark) !important;
    background-image: none !important;
}

/* — Software downloads (software-download.css) —
   Its mobile bandaid `overflow-x: hidden` forces overflow-y:auto, which turns
   the filter bar into an inner scrollbar (the hidden absolute dropdowns inflate
   scrollHeight) and would clip the dropdown when it opens. The children are
   width-capped by their own mobile rules, so it's safe to let it overflow. */
@media (max-width: 768px) {
    .filter-section { overflow: visible !important; }
}

/* — Bootstrap utility tokens —
   style.css maps .text-secondary (a TEXT utility) to var(--secondary), but
   --secondary is a soft background tint in the redesign (= near-white text).
   Re-state it as readable secondary text. */
.text-secondary { color: var(--vw-muted) !important; }
a.text-secondary:hover,
a.text-secondary:focus { color: var(--vw-brand) !important; }