/* ==========================================================================
Norvi Infotech India - Corporate Design System & Main Stylesheet
Modern, mature, accessible, anti-slop corporate technology identity
========================================================================== */

:root {
/* Brand Palette */
--color-navy: #101B32;
--color-navy-dark: #0A1120;
--color-navy-light: #162444;
--color-blue: #2563EB;
--color-blue-hover: #1D4ED8;
--color-blue-subtle: #EFF6FF;
--color-cyan: #0EA5E9;
--color-cyan-subtle: #E0F2FE;

/* Neutrals */
--color-white: #FFFFFF;
--color-surface-light: #F8FAFC;
--color-surface-subtle: #F1F5F9;
--color-text-main: #0F172A;
--color-text-muted: #475569;
--color-text-light: #64748B;
--color-border: #E2E8F0;
--color-border-subtle: #EDF2F7;
--color-border-dark: #1E293B;

/* Accent & Status (Paired with text labels) */
--color-success: #059669;
--color-warning: #D97706;
--color-danger: #DC2626;

/* Typography */
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

/* Radius scale (Nested math r_inner = r_outer - padding) */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 20px;

/* Shadows (Subtle, single elevation) */
--shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
--shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.1);
--shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 10px 24px -8px rgba(15, 23, 42, 0.06);

/* Transitions */
--transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
--transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);

/* Container width */
--container-max: 1240px;
}

/* Base Resets */
*, *::before, *::after {
box-sizing: border-box;
}

html {
font-family: var(--font-body);
color: var(--color-text-main);
background-color: var(--color-white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-x: hidden;
}

main {
flex: 1 0 auto;
}

/* Headings & Display */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 800;
color: var(--color-navy);
line-height: 1.25;
margin-top: 0;
text-wrap: balance;
letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.35rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }

p {
margin-top: 0;
margin-bottom: 1rem;
color: var(--color-text-muted);
}

a {
color: var(--color-blue);
text-decoration: none;
transition: color var(--transition-fast);
}

a:hover {
color: var(--color-blue-hover);
}

/* Accessible focus ring */
:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: 2px;
}

/* Section Containers */
.site-container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}

.site-section {
padding-top: 5rem;
padding-bottom: 5rem;
position: relative;
}

.site-section-sm {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}

.bg-light {
background-color: var(--color-surface-light) !important;
}

.bg-navy {
background-color: var(--color-navy) !important;
color: #E2E8F0;
}

.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 {
color: var(--color-white);
}

.bg-navy p {
color: #94A3B8;
}

.page-hero .section-kicker {
color: var(--color-white) !important;
}

/* Section Header Typography */
.section-kicker {
font-family: var(--font-body);
font-size: 0.8125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-blue); 
margin-bottom: 0.75rem;
display: block;
}

.bg-navy .section-kicker {
color: var(--color-cyan);
}

.section-title {
margin-bottom: 1rem;
}

.section-desc {
font-size: 1.0625rem;
/*  max-width: 680px;*/
margin-bottom: 2.5rem;
color: var(--color-text-muted);
}

.bg-navy .section-desc {
color: #94A3B8;
}

/* ==========================================================================
Header & Navigation (3-Zone Contract)
Zone 1: Brand Wordmark (Single element)
Zone 2: 4-5 Clean Nav links with dropdowns
Zone 3: 1 Primary CTA Button
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
/*  background-color: rgba(255, 255, 255, 0.96);*/
background: linear-gradient(
115deg,
#080d3c 0%,
#11175e 43%,
#171d70 72%,
#080d3c 100%
);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
/*  border-bottom: 1px solid var(--color-border);*/
transition: all var(--transition-fast);
}

.site-header.scrolled {
background-color: #FFFFFF;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
height: 74px;
}

/* Brand Wordmark */
.brand-logo {
display: flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.25rem;
/*  color: var(--color-navy);*/
color: #2563EB;
letter-spacing: -0.02em;
white-space: nowrap;
flex-shrink: 0;
}

.brand-logo:hover {
color: #2563EB;
/*  color: var(--color-navy);*/
}

.brand-emblem {
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue) 100%);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
flex-shrink: 0;
}

.brand-accent {
/*  color: var(--color-blue);*/
color: var(--color-white);
}

/* Nav Menu */
.desktop-nav {
display: flex;
align-items: center;
gap: 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}

.nav-item {
position: relative;
}

.nav-link {
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 500;
/*  color: var(--color-text-main);*/
color: var(--color-white);
padding: 0.5rem 0.25rem;
display: flex;
align-items: center;
gap: 0.35rem;
white-space: nowrap;
transition: color var(--transition-fast);
position: relative;
}

.nav-link:hover, .nav-link.active {
color: var(--color-blue);
}

.nav-link.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background-color: var(--color-blue);
border-radius: 1px;
}

.nav-icon {
width: 14px;
height: 14px;
transition: transform var(--transition-fast);
}

.nav-item:hover .nav-icon,
.nav-item:focus-within .nav-icon {
transform: rotate(180deg);
}

/* Mega Menu & Dropdown */
.mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.12);
padding: 1.75rem;
width: 740px;
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
pointer-events: none;
z-index: 1050;
}

.dropdown-simple {
position: absolute;
top: 100%;
left: 0;
transform: translateY(8px);
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 16px 32px -6px rgba(15, 23, 42, 0.1);
padding: 0.75rem;
min-width: 240px;
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
pointer-events: none;
z-index: 1050;
list-style: none;
margin: 0;
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.nav-item:hover .dropdown-simple,
.nav-item:focus-within .dropdown-simple {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}

.nav-item:hover .dropdown-simple,
.nav-item:focus-within .dropdown-simple {
transform: translateY(0);
}

.mega-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}

.mega-column-title {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-light);
margin-bottom: 0.75rem;
padding-bottom: 0.35rem;
border-bottom: 1px solid var(--color-border-subtle);
}

.mega-link-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}

.mega-item-link {
display: block;
padding: 0.4rem 0.5rem;
border-radius: var(--radius-sm);
color: var(--color-navy);
font-size: 0.875rem;
font-weight: 500;
transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mega-item-link:hover {
background-color: var(--color-surface-subtle);
color: var(--color-blue);
}

.mega-menu-footer {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border-subtle);
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8125rem;
}

/* Header Action CTA */
.header-actions {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}

/* Buttons */
.btn-primary-norvi {
/*background-color: var(--color-navy);*/
background: #FFF;
color: var(--color-navy);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
padding: 0.65rem 1.25rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-navy);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
white-space: nowrap;
transition: all var(--transition-fast);
cursor: pointer;
}

.btn-primary-norvi:hover {
background-color: var(--color-blue);
border-color: var(--color-blue);
color: #FFFFFF !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}

.btn-secondary-norvi {
background-color: #FFFFFF;
color: var(--color-navy) !important;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
padding: 0.65rem 1.25rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
white-space: nowrap;
transition: all var(--transition-fast);
cursor: pointer;
}

.btn-secondary-norvi:hover {
background-color: var(--color-surface-subtle);
border-color: #CBD5E1;
color: var(--color-navy) !important;
transform: translateY(-1px);
}

.btn-accent-norvi {
background-color: var(--color-blue);
color: #FFFFFF !important;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
padding: 0.65rem 1.35rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-blue);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
white-space: nowrap;
transition: all var(--transition-fast);
cursor: pointer;
}

.btn-accent-norvi:hover {
background-color: var(--color-blue-hover);
border-color: var(--color-blue-hover);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.btn-outline-white {
background-color: transparent;
color: #FFFFFF !important;
border: 1px solid rgba(255, 255, 255, 0.3);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
padding: 0.65rem 1.25rem;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all var(--transition-fast);
}

.btn-outline-white:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: #FFFFFF;
}

/* Mobile Hamburger */
.mobile-toggle {
display: none;
background: none;
border: none;
color: var(--color-white);
padding: 0.5rem;
cursor: pointer;
border-radius: var(--radius-sm);
}

.mobile-toggle:focus-visible {
outline: 2px solid var(--color-blue);
}

/* Mobile Drawer */
.mobile-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 320px;
max-width: 85vw;
background: #FFFFFF;
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
z-index: 1100;
transform: translateX(100%);
transition: transform var(--transition-normal);
display: flex;
flex-direction: column;
padding: 1.5rem;
overflow-y: auto;
}

.mobile-drawer.open {
transform: translateX(0);
}

.drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(4px);
z-index: 1090;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-normal);
}

.drawer-backdrop.open {
opacity: 1;
visibility: visible;
}

.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
margin-bottom: 1.25rem;
}

.drawer-close {
background: none;
border: none;
padding: 0.4rem;
cursor: pointer;
color: var(--color-text-muted);
}

.mobile-nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.mobile-nav-item {
border-bottom: 1px solid var(--color-border-subtle);
padding-bottom: 0.5rem;
}

.mobile-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 0;
font-weight: 600;
color: var(--color-navy);
font-size: 1rem;
}

.mobile-sub-list {
list-style: none;
padding-left: 0.75rem;
margin: 0.35rem 0 0.5rem 0;
display: none;
}

.mobile-sub-list.open {
display: block;
}

.mobile-sub-link {
display: block;
padding: 0.35rem 0;
font-size: 0.875rem;
color: var(--color-text-muted);
}

/* ==========================================================================
Hero Section
Split Layout, High-impact carrier, Clear value statement
========================================================================== */
.hero-wrapper {
/* background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%); */
/* background:url('../../src/assets/images/inner-banner.jpg') no-repeat center center;
background-size: cover;
padding-top: 4.5rem;
padding-bottom: 4.5rem;
border-bottom: 1px solid var(--color-border);*/
position: relative;
isolation: isolate;
overflow: hidden;
padding: 70px 0 60px;
color: #ffffff;

background:
linear-gradient(
115deg,
#080d3c 0%,
#11175e 43%,
#171d70 72%,
#080d3c 100%
);
}

/* Top-left decorative circle */
.hero-wrapper::before {
content: "";
position: absolute;
z-index: -1;
top: -180px;
left: -100px;
width: 330px;
height: 330px;
border-radius: 50%;

background: linear-gradient(
135deg,
rgba(96, 165, 250, 0.55),
rgba(37, 99, 235, 0.08)
);

border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 0 80px rgba(96, 165, 250, 0.12);
pointer-events: none;
}

/* Bottom-right decorative circle */
.hero-wrapper::after {
content: "";
position: absolute;
z-index: -1;
right: -190px;
bottom: -300px;
width: 500px;
height: 500px;
border-radius: 50%;

background: linear-gradient(
135deg,
rgba(168, 85, 247, 0.55),
rgba(34, 211, 238, 0.65)
);

border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow: 0 0 100px rgba(56, 189, 248, 0.15);
pointer-events: none;
}

.hero-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 3rem;
align-items: center;
}

.hero-content {
max-width: 550px;
}

.hero-kicker-bar {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-blue);
background-color: var(--color-blue-subtle);
padding: 0.35rem 0.75rem;
border-radius: var(--radius-sm);
margin-bottom: 1.5rem;
}

.hero-headline {
margin-bottom: 1.25rem;
color: var( --color-white);
}

.hero-subtext {
font-size: 1.125rem;
line-height: 1.65;
color: var( --color-white);
margin-bottom: 2rem;
}

.hero-cta-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2.5rem;
}

/* Trust Strip (No fake metrics, grounded commitment) */
.hero-trust-strip {
padding-top: 1.5rem;
border-top: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: 1.5rem;
font-size: 0.8125rem;
color: var( --color-white);
}

.trust-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}

.trust-icon {
color: var(--color-success);
}

.hero-visual-frame {
/*  position: relative;*/
/*  border-radius: var(--radius-lg);*/
overflow: hidden;
/*box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
background-color: var(--color-navy);
width: 620px;*/
position: absolute;
right: -300px;
bottom: -10px;
}

.hero-visual-img {
width: 64%;
height: 100%;
/*  aspect-ratio: 16 / 10;*/
object-fit: cover;
display: block;
}

/* Architecture Overlay Badge (Minimal, unboxed or clean card) */
.hero-visual-floating-card {
position: absolute;
bottom: 1.25rem;
left: 1.25rem;
right: 1.25rem;
background: rgba(16, 27, 50, 0.92);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md);
padding: 0.85rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
color: #FFFFFF;
}

.floating-card-title {
font-size: 0.8125rem;
font-weight: 600;
margin: 0;
color: #FFFFFF;
}

.floating-card-meta {
font-size: 0.75rem;
color: #94A3B8;
margin: 0;
}

/* ==========================================================================
Cards & Surfaces (Anti-slop: hairline borders, single elevation)
========================================================================== */
.norvi-card {
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 1.75rem;
transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
display: flex;
flex-direction: column;
height: 100%;
}

.norvi-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: #CBD5E1;
}

.card-icon-box {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background-color: var(--color-surface-subtle);
color: var(--color-navy);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
flex-shrink: 0;
}

.card-title {
font-size: 1.2rem;
margin-bottom: 0.65rem;
}

.card-text {
font-size: 0.9375rem;
color: var(--color-text-muted);
flex-grow: 1;
margin-bottom: 1.25rem;
}

.card-action-link {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-blue);
display: inline-flex;
align-items: center;
gap: 0.35rem;
}

.card-action-link:hover {
color: var(--color-blue-hover);
text-decoration: underline;
}

/* Card unboxed metadata */
.card-meta-line {
font-size: 0.75rem;
color: var(--color-text-light);
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}

/* Dark Card */
.norvi-card-dark {
background: var(--color-navy-light);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: 1.75rem;
color: #FFFFFF;
height: 100%;
display: flex;
flex-direction: column;
}

.norvi-card-dark h3, .norvi-card-dark h4 {
color: #FFFFFF;
}

.norvi-card-dark p {
color: #94A3B8;
}

/* ==========================================================================
Footer
Quiet, comprehensive, transparent disclosure
========================================================================== */
.site-footer {
background-color: var(--color-navy);
color: #94A3B8;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 4.5rem;
padding-bottom: 2rem;
margin-top: auto;
}

.footer-grid {
display: grid;
grid-template-columns: 2fr 1.25fr 1.25fr 1.25fr 1.25fr;
gap: 2.5rem;
margin-bottom: 3.5rem;
}

.footer-brand-col {
padding-right: 1.5rem;
}

.footer-logo {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.25rem;
color: #FFFFFF;
margin-bottom: 1rem;
}

.footer-tagline {
font-size: 0.9375rem;
line-height: 1.6;
color: #94A3B8;
margin-bottom: 1.5rem;
}

.footer-col-title {
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #FFFFFF;
margin-bottom: 1.25rem;
}

.footer-nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}

.footer-link {
font-size: 0.875rem;
color: #94A3B8;
transition: color var(--transition-fast);
}

.footer-link:hover {
color: #FFFFFF;
}

.footer-contact-block {
font-size: 0.875rem;
line-height: 1.5;
color: #94A3B8;
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.footer-bottom {
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.8125rem;
}

.footer-legal-note {
font-size: 0.75rem;
color: #64748B;
margin-top: 0.5rem;
max-width: 800px;
}

/* ==========================================================================
Cookie Consent Banner & Back to Top
========================================================================== */
.cookie-banner {
position: fixed;
bottom: 1.5rem;
left: 1.5rem;
max-width: 420px;
background: #FFFFFF;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.15);
padding: 1.25rem;
z-index: 1080;
display: none;
}

.cookie-banner.visible {
display: block;
}

.cookie-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-navy);
margin-bottom: 0.35rem;
}

.cookie-text {
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-bottom: 1rem;
}

.cookie-actions {
display: flex;
align-items: center;
gap: 0.65rem;
}

.btn-cookie-accept {
background-color: var(--color-navy);
color: #FFFFFF;
font-size: 0.75rem;
font-weight: 600;
padding: 0.45rem 0.85rem;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
}

.btn-cookie-decline {
background: none;
color: var(--color-text-muted);
font-size: 0.75rem;
padding: 0.45rem 0.85rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: pointer;
}

/* Back to Top */
.back-to-top {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 40px;
height: 40px;
background-color: var(--color-navy);
color: #FFFFFF;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1070;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-fast), visibility var(--transition-fast), background-color var(--transition-fast);
}

.back-to-top.visible {
opacity: 1;
visibility: visible;
}

.back-to-top:hover {
background-color: var(--color-blue);
}

/* ==========================================================================
Responsive Breakpoints
========================================================================== */
@media (max-width: 1024px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}

.footer-grid {
grid-template-columns: repeat(2, 1fr);
}

.footer-brand-col {
grid-column: span 2;
}
}

@media (max-width: 868px) {
.desktop-nav {
display: none;
}

.header-actions .btn-primary-norvi {
display: none;
}

.mobile-toggle {
display: block;
}

.site-section {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
}

@media (max-width: 640px) {
.footer-grid {
grid-template-columns: 1fr;
}

.footer-brand-col {
grid-column: span 1;
}

.hero-cta-group {
flex-direction: column;
align-items: stretch;
}

.hero-cta-group a, .hero-cta-group button {
width: 100%;
text-align: center;
}

.hero-trust-strip {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}


@media(max-width:767px){
  .hero-visual-img {
    width: 65%;
  }
  .hero-wrapper{
    padding: 30px 0 230px;
  }
}