/* ============================================================
   Visinova Bootstrap 5 theme extension
   Fills in the Tailwind utilities Bootstrap doesn't offer
   natively so the existing dark/gradient design survives.
   ============================================================ */

:root {
    --vn-bg: #06060b;
    --vn-bg-2: #0c0c1a;
    --vn-surface: rgba(255, 255, 255, 0.03);
    --vn-surface-2: rgba(255, 255, 255, 0.06);
    --vn-border: rgba(255, 255, 255, 0.08);
    --vn-border-2: rgba(255, 255, 255, 0.12);
    --vn-text: #ffffff;
    --vn-muted: #9ca3af;
    --vn-muted-2: #6b7280;

    /* Named accent colours matching the previous Tailwind palette. */
    --vn-blue-300:    #93c5fd;
    --vn-blue-400:    #60a5fa;
    --vn-blue-500:    #3b82f6;
    --vn-purple-300:  #d8b4fe;
    --vn-purple-400:  #c084fc;
    --vn-purple-500:  #a855f7;
    --vn-cyan-300:    #67e8f9;
    --vn-cyan-400:    #22d3ee;
    --vn-cyan-500:    #06b6d4;
    --vn-emerald-300: #6ee7b7;
    --vn-emerald-400: #34d399;
    --vn-emerald-500: #10b981;
    --vn-amber-300:   #fcd34d;
    --vn-amber-400:   #fbbf24;
    --vn-amber-500:   #f59e0b;
    --vn-rose-300:    #fda4af;
    --vn-rose-400:    #fb7185;
    --vn-rose-500:    #f43f5e;
    --vn-indigo-300:  #a5b4fc;
    --vn-indigo-400:  #818cf8;
    --vn-indigo-500:  #6366f1;
    --vn-fuchsia-300: #f0abfc;
    --vn-fuchsia-400: #e879f9;
    --vn-fuchsia-500: #d946ef;
    --vn-teal-300:    #5eead4;
    --vn-teal-400:    #2dd4bf;
    --vn-teal-500:    #14b8a6;
    --vn-sky-300:     #7dd3fc;
    --vn-sky-400:     #38bdf8;
    --vn-sky-500:     #0ea5e9;
    --vn-gray-300:    #d1d5db;
    --vn-gray-400:    #9ca3af;
    --vn-gray-500:    #6b7280;
}

/* ---------- Body baseline (Bootstrap default is white bg) ---------- */
html {
    scroll-behavior: smooth;
    /* Clip is critical: the fixed .mobile-menu sits at translateX(100%) off the
       right edge, and older browsers still add it to html's scrollWidth. */
    overflow-x: clip;
}
body {
    background: var(--vn-bg);
    color: var(--vn-text);
    font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

/* ---------- Bootstrap container width parity with Tailwind max-w-7xl ---------- */
.container-vn,
.container-vn-lg,
.container-vn-md,
.container-vn-sm {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.container-vn    { max-width: 1280px; }
.container-vn-lg { max-width: 1152px; }
.container-vn-md { max-width: 896px; }
.container-vn-sm { max-width: 672px; }

/* ---------- Colour utilities (text) ---------- */
.text-white         { color: var(--vn-text) !important; }
.text-muted-vn      { color: var(--vn-muted) !important; }
.text-muted-2       { color: var(--vn-muted-2) !important; }
.text-blue-300      { color: var(--vn-blue-300) !important; }
.text-blue-400      { color: var(--vn-blue-400) !important; }
.text-purple-300    { color: var(--vn-purple-300) !important; }
.text-purple-400    { color: var(--vn-purple-400) !important; }
.text-cyan-300      { color: var(--vn-cyan-300) !important; }
.text-cyan-400      { color: var(--vn-cyan-400) !important; }
.text-emerald-300   { color: var(--vn-emerald-300) !important; }
.text-emerald-400   { color: var(--vn-emerald-400) !important; }
.text-amber-300     { color: var(--vn-amber-300) !important; }
.text-amber-400     { color: var(--vn-amber-400) !important; }
.text-rose-300      { color: var(--vn-rose-300) !important; }
.text-rose-400      { color: var(--vn-rose-400) !important; }
.text-indigo-300    { color: var(--vn-indigo-300) !important; }
.text-indigo-400    { color: var(--vn-indigo-400) !important; }
.text-fuchsia-300   { color: var(--vn-fuchsia-300) !important; }
.text-fuchsia-400   { color: var(--vn-fuchsia-400) !important; }
.text-teal-300      { color: var(--vn-teal-300) !important; }
.text-teal-400      { color: var(--vn-teal-400) !important; }
.text-sky-300       { color: var(--vn-sky-300) !important; }
.text-sky-400       { color: var(--vn-sky-400) !important; }
.text-gray-300      { color: var(--vn-gray-300) !important; }
.text-gray-400      { color: var(--vn-gray-400) !important; }
.text-gray-500      { color: var(--vn-gray-500) !important; }

/* ---------- Glass / surface primitives ---------- */
.glass {
    background: var(--vn-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.surface-2 { background: var(--vn-surface-2); }
.border-white-10 { border: 1px solid var(--vn-border) !important; }
.border-white-15 { border: 1px solid var(--vn-border-2) !important; }

/* ---------- Gradient text ---------- */
.text-gradient-blue-purple {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f0abfc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text-gradient-cyan-emerald {
    background: linear-gradient(135deg, #22d3ee 0%, #34d399 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Gradient border wrapper ---------- */
.gradient-border {
    position: relative;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(167, 139, 250, 0.2), rgba(34, 211, 238, 0.15));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.gradient-border:hover::before { opacity: 1; }

/* ---------- Button — brand gradient primary ---------- */
.btn-vn-gradient {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border: none;
    border-radius: 0.5rem;
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
    text-decoration: none;
    cursor: pointer;
}
.btn-vn-gradient:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 30px -8px rgba(139, 92, 246, 0.55);
    filter: brightness(1.05);
}
.btn-vn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--vn-gray-300);
    background: transparent;
    border: 1px solid var(--vn-border-2);
    border-radius: 0.5rem;
    transition: color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
    text-decoration: none;
}
.btn-vn-outline:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
}

/* ---------- Nav (Bootstrap navbar restyle) ---------- */
.navbar-vn {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    border-bottom: 1px solid transparent;
    background: transparent;
    transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.navbar-vn.scrolled {
    background: rgba(6, 6, 11, 0.75);
    border-bottom-color: var(--vn-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.navbar-vn .nav-link {
    color: var(--vn-muted);
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    transition: color 0.2s ease;
    position: relative;
}
.navbar-vn .nav-link:hover,
.navbar-vn .nav-link.active { color: #fff; }
.navbar-vn .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.25rem;
    height: 2px;
    background: linear-gradient(90deg, #60a5fa, #c084fc);
    border-radius: 2px;
}

/* ---------- Section / page padding ---------- */
.section-pad     { padding-top: 4rem; padding-bottom: 4rem; }
.section-pad-lg  { padding-top: 6rem; padding-bottom: 6rem; }
.section-pad-xl  { padding-top: 8rem; padding-bottom: 8rem; }
@media (min-width: 768px) {
    .section-pad    { padding-top: 5rem; padding-bottom: 5rem; }
    .section-pad-lg { padding-top: 8rem; padding-bottom: 8rem; }
    .section-pad-xl { padding-top: 10rem; padding-bottom: 10rem; }
}

/* ---------- Feature check tile (used in service bullet lists) ---------- */
.feature-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------- Small badges (rounded pills) ---------- */
.badge-vn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge-vn-blue    { color: var(--vn-blue-300);    background: rgba(59, 130, 246, 0.10); border-color: rgba(59, 130, 246, 0.20); }
.badge-vn-purple  { color: var(--vn-purple-300);  background: rgba(168, 85, 247, 0.10); border-color: rgba(168, 85, 247, 0.20); }
.badge-vn-cyan    { color: var(--vn-cyan-300);    background: rgba(6, 182, 212, 0.10);  border-color: rgba(6, 182, 212, 0.20); }
.badge-vn-emerald { color: var(--vn-emerald-300); background: rgba(16, 185, 129, 0.10); border-color: rgba(16, 185, 129, 0.20); }
.badge-vn-amber   { color: var(--vn-amber-300);   background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.20); }
.badge-vn-rose    { color: var(--vn-rose-300);    background: rgba(244, 63, 94, 0.10);  border-color: rgba(244, 63, 94, 0.20); }
.badge-vn-fuchsia { color: var(--vn-fuchsia-300); background: rgba(217, 70, 239, 0.10); border-color: rgba(217, 70, 239, 0.20); }
.badge-vn-sky     { color: var(--vn-sky-300);     background: rgba(14, 165, 233, 0.10); border-color: rgba(14, 165, 233, 0.20); }
.badge-vn-teal    { color: var(--vn-teal-300);    background: rgba(20, 184, 166, 0.10); border-color: rgba(20, 184, 166, 0.20); }

/* ---------- Bootstrap form dark overrides ---------- */
.form-control.form-vn,
.form-select.form-vn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--vn-border);
    color: #fff;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.form-control.form-vn:focus,
.form-select.form-vn:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: none;
    color: #fff;
}
.form-control.form-vn::placeholder { color: var(--vn-muted-2); }
.form-label-vn {
    font-size: 0.75rem;
    color: var(--vn-muted);
    margin-bottom: 0.375rem;
}

/* ---------- Bootstrap-safe overrides for headings ---------- */
h1, h2, h3, h4, h5, h6 { color: #fff; letter-spacing: -0.02em; }
a { color: var(--vn-blue-400); text-decoration: none; }
a:hover { color: var(--vn-blue-300); }

/* ---------- Font-size helpers Bootstrap doesn't ship natively ---------- */
.fs-xs   { font-size: 0.75rem  !important; line-height: 1rem; }
.fs-sm   { font-size: 0.875rem !important; line-height: 1.375rem; }
.fs-md   { font-size: 1rem     !important; }
.fs-2xl  { font-size: 1.5rem   !important; line-height: 2rem; }
.fs-3xl  { font-size: 1.875rem !important; line-height: 2.25rem; }
.fs-4xl  { font-size: 2.25rem  !important; line-height: 2.5rem; }
.fs-5xl  { font-size: 3rem     !important; line-height: 1; }
@media (min-width: 768px) {
    .fs-md-3xl { font-size: 1.875rem !important; line-height: 2.25rem; }
    .fs-md-4xl { font-size: 2.25rem  !important; line-height: 2.5rem; }
    .fs-md-5xl { font-size: 3rem     !important; line-height: 1.05; }
}

/* ---------- Letter-spacing helpers ---------- */
.tracking-tight   { letter-spacing: -0.02em; }
.tracking-normal  { letter-spacing: 0; }
.tracking-wide    { letter-spacing: 0.025em; }
.tracking-wider   { letter-spacing: 0.05em; }
.tracking-widest  { letter-spacing: 0.1em; }

/* ---------- Opacity helpers (Bootstrap only has 25/50/75/100) ---------- */
.opacity-05 { opacity: 0.05; }
.opacity-10 { opacity: 0.10; }
.opacity-15 { opacity: 0.15; }
.opacity-20 { opacity: 0.20; }
.opacity-30 { opacity: 0.30; }
.opacity-40 { opacity: 0.40; }
.opacity-60 { opacity: 0.60; }
.opacity-80 { opacity: 0.80; }

/* ---------- Faint white borders (mirrors Tailwind border-white/[0.04-0.12]) ---------- */
.border-t-hairline { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.border-b-hairline { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.border-y-hairline { border-top: 1px solid rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.04); }

/* ---------- Section background glows (previously Tailwind absolute divs) ---------- */
.section-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}
.section-glow-blue    { background: rgba(59, 130, 246, 0.35); }
.section-glow-purple  { background: rgba(139, 92, 246, 0.30); }
.section-glow-cyan    { background: rgba(34, 211, 238, 0.25); }
.section-glow-indigo  { background: rgba(99, 102, 241, 0.30); }

/* ---------- Section wrapper with dark vertical gradient (CTA-style) ---------- */
.section-gradient-dark {
    background: linear-gradient(180deg, #06060b 0%, #0c0c1a 50%, #06060b 100%);
}

/* ---------- Compact rounded avatar circle for testimonial initials ---------- */
.avatar-40 {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.avatar-grad-blue-purple  { background: linear-gradient(135deg, #3b82f6, #7c3aed); }
.avatar-grad-red-orange   { background: linear-gradient(135deg, #ef4444, #ea580c); }
.avatar-grad-cyan-teal    { background: linear-gradient(135deg, #06b6d4, #0d9488); }
.avatar-grad-blue-cyan    { background: linear-gradient(135deg, #3b82f6, #0891b2); }
.avatar-grad-emerald-teal { background: linear-gradient(135deg, #10b981, #0d9488); }
.avatar-grad-fuchsia-pink { background: linear-gradient(135deg, #d946ef, #db2777); }
.avatar-grad-amber-yellow { background: linear-gradient(135deg, #f59e0b, #ca8a04); }
.avatar-grad-violet-indigo{ background: linear-gradient(135deg, #8b5cf6, #4f46e5); }

/* ---------- Position/z-index helpers (Bootstrap-adjacent) ---------- */
.z-1  { z-index: 1  !important; }
.z-2  { z-index: 2  !important; }
.z-10 { z-index: 10 !important; }
.z-50 { z-index: 50 !important; }

/* ---------- Icon tile (used before service headings) ---------- */
.icon-tile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.icon-tile-blue    { background: rgba(59, 130, 246, 0.15); border: 1px solid rgba(59, 130, 246, 0.20); }
.icon-tile-purple  { background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.20); }
.icon-tile-cyan    { background: rgba(6, 182, 212, 0.15);  border: 1px solid rgba(6, 182, 212, 0.20); }
.icon-tile-emerald { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.20); }
.icon-tile-teal    { background: rgba(20, 184, 166, 0.15); border: 1px solid rgba(20, 184, 166, 0.22); }
.icon-tile-fuchsia { background: rgba(217, 70, 239, 0.15); border: 1px solid rgba(217, 70, 239, 0.22); }

/* ---------- Bootstrap Row negative-margin fix inside padded sections ---------- */
.row.g-4-fix { --bs-gutter-x: 1.5rem; }


/* ============================================================
   DESKTOP-VIEW DESIGN POLISH (2026-07-14)
   Small overrides to styles.css primitives — no HTML touch.
   ============================================================ */

/* Client marquee — logos too faded before. Tighten fade zone and lift
   opacity so brand names are readable. */
.marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%) !important;
    mask-image:         linear-gradient(90deg, transparent 0%, black 4%, black 96%, transparent 100%) !important;
}
.marquee-item {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
.marquee-item img { filter: brightness(1.15) contrast(1.1) !important; }

/* Stats section — bump the label under each big number so it's readable
   at desktop distance. */
@media (min-width: 768px) {
    .stat-number + p { font-size: 0.9375rem !important; letter-spacing: 0.01em; }
}

/* Testimonials — quote text was 14px, uncomfortable to read on desktop.
   Bump to 15px from md+, and lift muted body text to a slightly warmer grey. */
@media (min-width: 768px) {
    #home-testimonials p.text-gray-300,
    #home-testimonials .fs-sm.lh-base { font-size: 0.9375rem !important; line-height: 1.55 !important; }
}

/* Section rhythm — reduce excessive vertical dead space on wide screens
   so users see more per scroll without hurting hierarchy. */
@media (min-width: 1024px) {
    .section-pad     { padding-top: 4rem;  padding-bottom: 4rem; }
    .section-pad-lg  { padding-top: 5.5rem; padding-bottom: 5.5rem; }
    .section-pad-xl  { padding-top: 7rem;   padding-bottom: 7rem; }
}

/* Pillar cards — add just enough visual weight so the 2×2 grid doesn't
   feel empty. Slightly stronger border glow + tighter padding rhythm. */
@media (min-width: 768px) {
    .gradient-border.tilt-card {
        min-height: 210px;
    }
    .gradient-border.tilt-card::before {
        opacity: 0.85 !important;
    }
    .gradient-border.tilt-card:hover::before {
        opacity: 1 !important;
    }
}

/* "View all …" / "Read all reviews →" utility links were too subdued.
   Slight underline-on-hover to signal actionability at desktop scale. */
@media (min-width: 768px) {
    a.text-gray-400.d-inline-flex:hover,
    a.text-gray-400.d-flex:hover {
        color: #fff !important;
    }
    a.text-gray-400.d-inline-flex svg,
    a.text-gray-400.d-flex svg {
        transition: transform 0.2s ease;
    }
    a.text-gray-400.d-inline-flex:hover svg,
    a.text-gray-400.d-flex:hover svg {
        transform: translateX(3px);
    }
}

/* Nav — no border in transparent state, hairline only when scrolled.
   Styles.css owns the .nav-scrolled colour; we just add the actual border. */
#navbar { border-bottom: 1px solid transparent; }
#navbar.nav-scrolled { border-bottom-width: 1px; border-bottom-style: solid; }

/* Footer polish — the mini footer felt cramped on wide screens.
   Give the meta row (social + email + copy) a bit more breathing room. */
@media (min-width: 992px) {
    .footer-mini-inner { gap: 1.5rem 2rem; }
    .footer-mini-meta { gap: 1.25rem; }
}