/* ==========================================================================
   NIVORA HOME: Design System & Scoped Layout Stylesheet
   - Scoped strictly under .nv-home
   - Palette (strict): Violet (#4F46E5, #6366F1, #8B5CF6), Cyan (#0891B2, #06B6D4),
                       Ink (#0F172A), Body (#334155), Muted (#64748B),
                       Surfaces (#FFFFFF, #FAFAFF, #F8FAFF). No blue or orange.
   - Fluid typography with clamp(), 8px spacing grid, 18px-24px rounded cards
   - Hardware-accelerated GPU transitions (transform, opacity only)
   - Zero horizontal overflow across all viewports (375px, 768px, 1024px, 1440px)
   ========================================================================== */

.nv-home {
    --nv-ink: #0F172A;
    --nv-body: #334155;
    --nv-muted: #64748B;
    --nv-violet: #4F46E5;
    --nv-violet-2: #6366F1;
    --nv-violet-3: #8B5CF6;
    --nv-cyan: #0891B2;
    --nv-cyan-2: #06B6D4;
    --nv-cyan-dark: #0E7490;
    --nv-line: rgba(99, 102, 241, 0.14);
    --nv-grad: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 55%, #06B6D4 100%);
    --nv-grad-soft: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(6, 182, 212, 0.1));
    --nv-card-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.08);
    --nv-hover-shadow: 0 20px 42px -10px rgba(99, 102, 241, 0.22), 0 0 0 1px rgba(99, 102, 241, 0.25);
    background: #FAFAFF;
    color: var(--nv-body);
    overflow-x: hidden;
    width: 100%;
}

.nv-home section {
    position: relative;
    padding-top: clamp(64px, 8vw, 112px);
    padding-bottom: clamp(64px, 8vw, 112px);
    overflow: hidden;
}

/* Fluid Typography */
.nv-home .section-title {
    font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--nv-ink);
}

.nv-home .section-subtitle {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.7;
    color: var(--nv-muted);
}

.nv-home .text-shimmer {
    background: linear-gradient(90deg, #4F46E5, #06B6D4, #8B5CF6, #4F46E5);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: nv-shimmer 8s linear infinite;
}

@keyframes nv-shimmer {
    to { background-position: 220% center; }
}

.nv-home .hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 0.95rem;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.18);
    color: var(--nv-violet);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Pill Buttons */
.nv-home .btn-primary-gradient,
.nv-home .btn-primary {
    background: var(--nv-grad) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 999px !important;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 10px 24px -6px rgba(79, 70, 229, 0.45);
}

.nv-home .btn-primary-gradient:hover,
.nv-home .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px rgba(79, 70, 229, 0.6);
    color: #FFFFFF !important;
}

.nv-home .btn-primary-gradient:focus-visible,
.nv-home .btn-primary:focus-visible {
    outline: 2px solid var(--nv-violet-2);
    outline-offset: 3px;
}

.nv-home .btn-primary-gradient:active,
.nv-home .btn-primary:active {
    transform: scale(0.98);
}

.nv-home .btn-secondary,
.nv-home .btn-outline-glow {
    background: #FFFFFF !important;
    color: var(--nv-violet) !important;
    border: 1.5px solid rgba(79, 70, 229, 0.28) !important;
    border-radius: 999px !important;
    font-weight: 600;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.nv-home .btn-secondary:hover,
.nv-home .btn-outline-glow:hover {
    background: rgba(79, 70, 229, 0.05) !important;
    border-color: var(--nv-violet) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(79, 70, 229, 0.25);
    color: var(--nv-violet) !important;
}

.nv-home .btn-secondary:focus-visible,
.nv-home .btn-outline-glow:focus-visible {
    outline: 2px solid var(--nv-violet-2);
    outline-offset: 3px;
}

.nv-home .btn-secondary:active,
.nv-home .btn-outline-glow:active {
    transform: scale(0.98);
}

/* Shimmer Sweep Effect */
.nv-home .shimmer-sweep::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.75s ease;
}

.nv-home .shimmer-sweep:hover::after {
    left: 140%;
}

/* ==========================================================================
   1. HERO SECTION
   ========================================================================== */
.nv-hero {
    padding: clamp(110px, 12vw, 160px) 0 clamp(80px, 9vw, 120px) !important;
    background:
        radial-gradient(900px 600px at 12% -5%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(800px 500px at 95% 15%, rgba(6, 182, 212, 0.14), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F5F3FF 100%);
}

.nv-hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 70%);
    mask-image: radial-gradient(ellipse at 30% 30%, #000 20%, transparent 70%);
}

.nv-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(75px);
    opacity: 0.55;
    will-change: transform;
}

.nv-orb-1 {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -120px;
    background: rgba(99, 102, 241, 0.32);
}

.nv-orb-2 {
    width: 380px;
    height: 380px;
    bottom: -140px;
    right: -100px;
    background: rgba(6, 182, 212, 0.28);
}

.nv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid var(--nv-line);
    box-shadow: 0 6px 18px -10px rgba(79, 70, 229, 0.4);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nv-violet);
    margin-bottom: 1.4rem;
}

.nv-hero-title {
    font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.1rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.04em;
    color: var(--nv-ink);
    margin-bottom: 1.4rem;
}

.nv-typing {
    display: inline-block;
    white-space: nowrap;
}

.nv-hero-lead {
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--nv-muted);
    max-width: 36rem;
    margin-bottom: 2rem;
}

.nv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.nv-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1.25rem;
}

.nv-checks li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--nv-body);
}

.nv-checks i {
    color: var(--nv-cyan-2);
    font-size: 1rem;
}

.nv-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.nv-stack-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--nv-muted);
    margin-right: 0.35rem;
}

.nv-home .tech-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.36rem 0.8rem;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid var(--nv-line);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nv-ink);
    transition: transform 300ms ease, border-color 300ms ease;
}

.nv-home .tech-mini-pill i { color: var(--nv-violet); }
.nv-home .tech-mini-pill:hover {
    transform: translateY(-3px);
    border-color: rgba(79, 70, 229, 0.35);
}

/* Hero Lead Card */
.nv-lead-wrap {
    position: relative;
    padding: 14px;
}

.nv-lead-card {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 34px 70px -28px rgba(79, 70, 229, 0.32);
}

.nv-lead-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--nv-line);
}

.nv-lead-tag {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--nv-violet);
    font-size: 0.75rem;
    font-weight: 700;
}

.nv-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--nv-muted);
}

.nv-lead-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--nv-ink);
    margin-bottom: 0.4rem;
}

.nv-lead-text {
    font-size: 0.9rem;
    color: var(--nv-muted);
    margin-bottom: 1.2rem;
}

.nv-lead-foot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--nv-line);
    font-size: 0.75rem;
    color: var(--nv-muted);
}

.nv-lead-foot i {
    color: var(--nv-cyan-2);
    margin-right: 0.3rem;
}

.nv-badge-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.nv-badge-violet { background: var(--nv-grad); }
.nv-badge-cyan { background: linear-gradient(135deg, #0891B2, #06B6D4); }

.nv-home .floating-stat-badge {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.95rem 0.6rem 0.6rem;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    border: 1px solid var(--nv-line);
    box-shadow: 0 18px 36px -18px rgba(79, 70, 229, 0.35);
    position: absolute;
    z-index: 3;
}

.badge-top-left { top: -14px; left: -14px; }
.badge-bottom-right { bottom: -14px; right: -14px; }

/* ==========================================================================
   2. STATS SECTION
   ========================================================================== */
.nv-stats-section {
    padding: 0 0 clamp(64px, 8vw, 96px) !important;
    background: #FAFAFF;
}

.nv-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #FFFFFF;
    border: 1px solid var(--nv-line);
    border-radius: 24px;
    box-shadow: 0 24px 50px -30px rgba(79, 70, 229, 0.35);
    margin-top: -48px;
    position: relative;
    z-index: 2;
}

.nv-stat {
    padding: 34px 24px;
    text-align: center;
    border-left: 1px solid var(--nv-line);
}

.nv-stat:first-child { border-left: 0; }

.nv-stat-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nv-grad-soft);
    color: var(--nv-violet);
    font-size: 1.25rem;
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nv-stat:hover .nv-stat-icon {
    transform: rotate(-6deg) scale(1.08);
}

.nv-stat-num {
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--nv-ink);
}

.nv-plus {
    font-size: 0.55em;
    font-weight: 800;
    margin-left: 0.15em;
    background: var(--nv-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nv-of {
    font-size: 0.42em;
    color: var(--nv-muted);
    font-weight: 600;
}

.nv-stars {
    display: flex;
    justify-content: center;
    gap: 3px;
    margin: 8px 0 0;
    color: #FACC15;
    font-size: 0.75rem;
}

.nv-stat-label {
    margin: 10px 0 0;
    font-size: 0.88rem;
    color: var(--nv-muted);
    font-weight: 600;
}

/* ==========================================================================
   3. BRANDS SECTION
   ========================================================================== */
.nv-home .brand-marquee-section {
    background: #FFFFFF;
}

.nv-home .brand-card-item {
    background: #FFFFFF;
    border: 1px solid var(--nv-line);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    box-shadow: 0 4px 14px -4px rgba(15, 23, 42, 0.04);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease, border-color 320ms ease;
}

.nv-home .brand-card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -20px rgba(79, 70, 229, 0.35);
    border-color: rgba(79, 70, 229, 0.35);
}

.nv-home .brand-card-item img {
    max-height: 38px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    aspect-ratio: 3 / 1;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   4. SERVICES SECTION
   ========================================================================== */
.nv-home #services {
    background:
        radial-gradient(1000px 480px at 88% -8%, rgba(99, 102, 241, 0.08), transparent 60%),
        radial-gradient(900px 420px at -8% 112%, rgba(6, 182, 212, 0.07), transparent 60%),
        #FFFFFF;
}

.nv-home .service-card-modern {
    background: #FFFFFF;
    border: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 22px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--nv-card-shadow);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 320ms ease;
}

.nv-home .service-card-modern:hover {
    transform: translateY(-5px);
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: var(--nv-hover-shadow);
}

.nv-home .service-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.3rem;
    background: var(--nv-grad);
    box-shadow: 0 10px 24px -8px rgba(79, 70, 229, 0.5);
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nv-home .service-card-modern:hover .service-icon-box {
    transform: rotate(-6deg) scale(1.08);
}

.nv-home .service-card-modern h3 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--nv-ink);
}

.nv-home .service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--nv-violet);
    text-decoration: none;
    transition: color 250ms ease;
}

.nv-home .service-card-link i {
    transition: transform 250ms ease;
}

.nv-home .service-card-link:hover {
    color: var(--nv-cyan-dark);
}

.nv-home .service-card-link:hover i {
    transform: translateX(4px);
}

/* ==========================================================================
   5. CTA GROWTH BAND
   ========================================================================== */
.nv-home .cta-growth-band {
    background:
        radial-gradient(700px 320px at 10% 0%, rgba(255, 255, 255, 0.2), transparent 60%),
        linear-gradient(135deg, #4F46E5 0%, #8B5CF6 55%, #06B6D4 100%) !important;
    border-radius: 24px;
    margin: 0 auto;
    padding: clamp(56px, 7vw, 84px) 24px;
    max-width: 1180px;
    box-shadow: 0 34px 70px -34px rgba(79, 70, 229, 0.55);
    overflow: hidden;
}

.nv-home .cta-growth-band .section-title { color: #FFFFFF; }
.nv-home .cta-growth-band .section-subtitle { color: rgba(255, 255, 255, 0.88); }
.nv-home .cta-growth-band .text-shimmer-cyan { color: #E0F7FA; -webkit-text-fill-color: #E0F7FA; }

/* ==========================================================================
   6. PERFORMANCE MARKETING & SEO SECTION
   ========================================================================== */
.nv-home section[aria-label="Performance Marketing and SEO"] {
    background: #FAFAFF;
}

.nv-home section[aria-label="Performance Marketing and SEO"] .rounded-3 {
    border: 1px solid var(--nv-line);
    border-radius: 18px !important;
    background: #FFFFFF !important;
}

.nv-home .progress {
    height: 8px;
    border-radius: 999px;
    background: #EEF2FF;
}

.nv-home .progress-bar {
    background: var(--nv-grad);
    border-radius: 999px;
}

/* ==========================================================================
   7. WHY CHOOSE US SECTION
   ========================================================================== */
.nv-home #why-us {
    background-color: #F8FAFF;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
}

.nv-home .wc-card-nv {
    background: #FFFFFF;
    border: 1px solid var(--nv-line);
    border-radius: 20px;
    padding: 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--nv-card-shadow);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease, border-color 320ms ease;
}

.nv-home .wc-card-nv:hover {
    transform: translateY(-5px);
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: var(--nv-hover-shadow);
}

.nv-home .wc-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.nv-home .wc-icon-nv {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--c, var(--nv-violet));
    background: color-mix(in srgb, var(--c, #4F46E5) 12%, white);
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nv-home .wc-card-nv:hover .wc-icon-nv {
    transform: rotate(-6deg) scale(1.08);
}

.nv-home .wc-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(15, 23, 42, 0.18);
}

.nv-home .wc-title {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--nv-ink);
}

.nv-home .wc-desc {
    line-height: 1.65;
    color: var(--nv-muted);
    font-size: 0.92rem;
}

/* ==========================================================================
   8. METRICS SECTION
   ========================================================================== */
.nv-home #metrics-growth {
    background: #FFFFFF;
}

.nv-home #metrics-growth .metric-tab {
    border-radius: 16px;
    border: 1px solid var(--nv-line);
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 300ms ease, box-shadow 300ms ease;
}

.nv-home #metrics-growth .metric-tab:hover {
    transform: translateY(-3px);
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 8px 20px -6px rgba(79, 70, 229, 0.15);
}

.nv-home #metrics-growth .metric-tab.active {
    background: var(--nv-grad) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 12px 28px -8px rgba(79, 70, 229, 0.45);
}

.nv-home #metrics-growth .metrics-content-card {
    border: 1px solid var(--nv-line);
    border-radius: 22px;
    box-shadow: var(--nv-card-shadow);
}

/* ==========================================================================
   9. INDUSTRIES SECTION
   ========================================================================== */
.nv-home #industries {
    background:
        radial-gradient(900px 420px at 92% 0%, rgba(99, 102, 241, 0.07), transparent 60%),
        #FFFFFF;
}

.nv-home .nvr-industry-card {
    background: #FFFFFF;
    border: 1px solid var(--nv-line) !important;
    border-radius: 18px !important;
    padding: 16px 20px !important;
    box-shadow: var(--nv-card-shadow);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease, border-color 320ms ease;
}

.nv-home .nvr-industry-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nv-hover-shadow);
    border-color: rgba(79, 70, 229, 0.35) !important;
}

.nv-home .nvr-industry-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 14px !important;
    transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nv-home .nvr-industry-card:hover .nvr-industry-icon-wrap {
    transform: rotate(-6deg) scale(1.08);
}

.nv-home .nvr-industry-title {
    font-weight: 700;
    color: var(--nv-ink);
    font-size: 0.95rem;
}

/* ==========================================================================
   10. TECHNOLOGIES SECTION
   ========================================================================== */
.nv-home #technologies {
    background: #F8FAFF;
}

.nv-home .tech-matrix-card {
    background: #FFFFFF;
    border: 1px solid var(--nv-line);
    border-radius: 20px;
    box-shadow: var(--nv-card-shadow);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease, border-color 320ms ease;
}

.nv-home .tech-matrix-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--nv-hover-shadow);
    border-color: rgba(79, 70, 229, 0.35);
}

.nv-home .tech-matrix-icon {
    background: var(--nv-grad-soft);
    border-radius: 14px;
}

/* ==========================================================================
   11. STRATEGIC ROADMAP BANNER
   ========================================================================== */
.nv-home #roadmap .rounded-4 {
    background:
        radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.35), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(6, 182, 212, 0.22), transparent 55%),
        linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%) !important;
    border: 1px solid rgba(139, 92, 246, 0.25) !important;
    border-radius: 24px !important;
    box-shadow: 0 34px 70px -34px rgba(79, 70, 229, 0.55);
}

/* ==========================================================================
   12. FAQ SECTION
   ========================================================================== */
.nv-home #faq {
    background: #FAFAFF;
}

.nv-home #faq .accordion-item {
    border: 1px solid var(--nv-line);
    border-radius: 18px !important;
    margin-bottom: 14px;
    background: #FFFFFF;
    overflow: hidden;
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.04);
    transition: border-color 250ms ease, box-shadow 250ms ease;
}

.nv-home #faq .accordion-item:hover {
    border-color: rgba(79, 70, 229, 0.35);
    box-shadow: 0 8px 24px -8px rgba(79, 70, 229, 0.18);
}

.nv-home #faq .accordion-button {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--nv-ink);
    padding: 20px 24px;
    background: #FFFFFF;
    border-radius: 18px !important;
}

.nv-home #faq .accordion-button:not(.collapsed) {
    color: var(--nv-violet);
    background: rgba(79, 70, 229, 0.04);
    box-shadow: none;
}

.nv-home #faq .accordion-body {
    padding: 0 24px 22px;
    color: var(--nv-body);
    font-size: 0.98rem;
    line-height: 1.7;
}

/* ==========================================================================
   13. TESTIMONIALS SECTION
   ========================================================================== */
.nv-home #testimonials {
    background:
        radial-gradient(900px 420px at 8% 0%, rgba(6, 182, 212, 0.07), transparent 60%),
        #F8FAFF;
}

.nv-home #testimonials .rounded-4 {
    border: 1px solid var(--nv-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--nv-card-shadow);
    background: #FFFFFF !important;
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease;
}

.nv-home #testimonials .rounded-4:hover {
    transform: translateY(-5px);
    box-shadow: var(--nv-hover-shadow) !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN (375px, 768px, 1024px, 1440px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .nv-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: -32px;
    }
    .nv-stat:nth-child(3) { border-left: 0; }
    .nv-stat:nth-child(n+3) { border-top: 1px solid var(--nv-line); }
    .nv-lead-wrap { margin-top: 18px; }
}

@media (max-width: 575.98px) {
    .nv-home {
        padding-left: 0;
        padding-right: 0;
    }

    .nv-hero {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .nv-checks {
        grid-template-columns: 1fr;
    }

    .nv-stats {
        grid-template-columns: 1fr;
        margin-top: -24px;
    }

    .nv-stat {
        border-left: 0;
        border-top: 1px solid var(--nv-line);
        padding: 24px 16px;
    }

    .nv-stat:first-child { border-top: 0; }

    .nv-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .nv-lead-card {
        padding: 20px 16px;
    }

    .nv-typing {
        white-space: normal;
    }

    .nv-home .btn-primary-gradient,
    .nv-home .btn-secondary {
        width: 100%;
    }
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .nv-home .text-shimmer,
    .nv-hero-orb {
        animation: none !important;
    }

    .nv-home .service-card-modern,
    .nv-home .wc-card-nv,
    .nv-home .nvr-industry-card,
    .nv-home .tech-matrix-card,
    .nv-home .brand-card-item,
    .nv-home .nv-stat-icon,
    .nv-home .service-icon-box,
    .nv-home .wc-icon-nv,
    .nv-home .nvr-industry-icon-wrap,
    .nv-home .btn-primary-gradient,
    .nv-home .btn-secondary,
    .nv-home .cta-growth-band {
        transition: none !important;
        transform: none !important;
    }
}