/* Fonts loaded via in page for faster rendering */
/* ─── CSS Custom Properties ───────────────────────────────────────────────── */
:root {
/* Navy Palette — true deep blue, not purple */
--navy-50: #f0f5ff;
--navy-100: #dce8ff;
--navy-200: #b5ceff;
--navy-300: #80aaff;
--navy-400: #4d85f5;
--navy-500: #2563eb;
--navy-600: #1d4ed8;
--navy-700: #1e40af;
--navy-800: #1e3a8a;
--navy-900: #0f2460;
--navy-950: #080f2d;
/* Gold Palette */
--gold-50: #fffceb;
--gold-100: #fff6c6;
--gold-200: #ffeb88;
--gold-300: #ffd940;
--gold-400: #ffc400;
--gold-500: #e6a800;
--gold-600: #c47f00;
--gold-700: #9b5a00;
--gold-800: #7d4700;
--gold-900: #6b3900;
/* Green */
--green-400: #34d399;
--green-500: #10b981;
--green-600: #059669;
/* Grays */
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
/* Semantic */
--color-primary: var(--navy-900);
--color-accent: var(--gold-400);
--color-text: var(--gray-800);
--color-text-muted: var(--gray-500);
--color-bg: #ffffff;
--color-bg-alt: var(--gray-50);
--color-border: var(--gray-200);
/* Typography */
--font-heading: 'Outfit', system-ui, sans-serif;
--font-body: 'Source Sans 3', system-ui, sans-serif;
--font-mono: 'Fira Code', monospace;
/* Spacing */
--section-py: 96px;
--container-max: 1200px;
/* Borders */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 16px rgba(0,0,0,0.1);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
--shadow-gold: 0 8px 32px rgba(255,196,0,0.25);
/* Transitions */
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
}
/* ─── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
/* Hide Frappe's default navbar, footer, and undo its body padding */
.web-footer,
.navbar.navbar-default,
footer.web-footer,
.page-header,
#page-header {
display: none !important;
}
/* Frappe adds padding-top:70px to body for its own navbar — remove it */
body {
padding-top: 0 !important;
}
/* Frappe wraps content in .page-content — reset its margin */
.page-content,
.container.page-body {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
}
/* Frappe main layout container */
.main-section {
padding-top: 0 !important;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
/* ─── Layout ──────────────────────────────────────────────────────────────── */
.uvt-container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 24px;
}
.uvt-section {
padding: var(--section-py) 0;
}
/* ─── Typography ──────────────────────────────────────────────────────────── */
.uvt-hero-title {
font-family: var(--font-heading);
font-size: clamp(40px, 6vw, 72px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
color: #ffffff;
}
.uvt-h1 {
font-family: var(--font-heading);
font-size: clamp(32px, 4vw, 56px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.025em;
}
.uvt-h2 {
font-family: var(--font-heading);
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--navy-900);
}
.uvt-h3 {
font-family: var(--font-heading);
font-size: clamp(22px, 2.5vw, 32px);
font-weight: 700;
line-height: 1.25;
color: var(--navy-900);
}
.uvt-h4 {
font-family: var(--font-heading);
font-size: clamp(18px, 2vw, 24px);
font-weight: 600;
line-height: 1.3;
color: var(--navy-900);
}
.uvt-h5 {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
line-height: 1.4;
color: var(--navy-900);
}
.uvt-body-lg {
font-size: 18px;
line-height: 1.7;
}
.uvt-body {
font-size: 16px;
line-height: 1.6;
}
.uvt-body-sm {
font-size: 14px;
line-height: 1.6;
}
.uvt-caption {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold-500);
}
/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.uvt-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 32px;
font-family: var(--font-heading);
font-size: 15px;
font-weight: 600;
border-radius: var(--radius-md);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-normal);
text-decoration: none;
white-space: nowrap;
}
.uvt-btn-primary {
background: linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 100%);
color: var(--navy-950);
border-color: var(--gold-400);
box-shadow: 0 4px 20px rgba(255,196,0,0.3);
}
.uvt-btn-primary:hover {
background: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-400) 100%);
box-shadow: var(--shadow-gold);
transform: translateY(-2px);
color: var(--navy-950);
}
.uvt-btn-secondary {
background: transparent;
color: #ffffff;
border-color: rgba(255,255,255,0.4);
}
.uvt-btn-secondary:hover {
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.8);
color: #ffffff;
transform: translateY(-2px);
}
.uvt-btn-outline {
background: transparent;
color: var(--navy-700);
border-color: var(--navy-300);
}
.uvt-btn-outline:hover {
background: var(--navy-50);
border-color: var(--navy-600);
color: var(--navy-900);
transform: translateY(-2px);
}
/* ─── Cards ───────────────────────────────────────────────────────────────── */
.uvt-card {
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 32px;
transition: all var(--transition-normal);
}
.uvt-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
border-color: var(--gold-400);
}
.uvt-card-dark {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-lg);
padding: 32px;
transition: all var(--transition-normal);
}
.uvt-card-dark:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(255,196,0,0.3);
transform: translateY(-4px);
}
/* ─── Gold Line Accent ────────────────────────────────────────────────────── */
.uvt-gold-line {
width: 48px;
height: 3px;
background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
border-radius: 2px;
}
/* ─── Hero Section ────────────────────────────────────────────────────────── */
.uvt-hero {
background: linear-gradient(160deg, var(--navy-950) 0%, #0a1835 55%, #0f2460 100%);
position: relative;
overflow: hidden;
/* padding-top clears the fixed 72px navbar + extra breathing room */
padding-top: 160px;
padding-bottom: 100px;
min-height: 100vh;
display: flex;
align-items: center;
}
/* Subtle gold radial glow — top-right quadrant */
.uvt-hero::before {
content: '';
position: absolute;
top: -10%;
right: -15%;
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(255,196,0,0.07) 0%, transparent 65%);
pointer-events: none;
}
/* Bottom-left accent blob */
.uvt-hero::after {
content: '';
position: absolute;
bottom: -20%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, transparent 65%);
pointer-events: none;
}
/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.uvt-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
/* Start with a subtle dark base so it's always readable on both dark and light sections */
background: rgba(8,15,45,0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: all var(--transition-normal);
padding: 16px 0;
}
.uvt-navbar.scrolled {
background: rgba(8,15,45,0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 10px 0;
box-shadow: 0 2px 24px rgba(0,0,0,0.35);
border-bottom-color: rgba(255,255,255,0.08);
}
.uvt-navbar-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
position: relative; /* positioning context for mega-menu */
}
.uvt-navbar-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.uvt-navbar-logo img {
height: 36px;
width: auto;
}
.uvt-navbar-links {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
}
.uvt-navbar-links a {
color: rgba(255,255,255,0.85);
font-family: var(--font-heading);
font-size: 15px;
font-weight: 500;
padding: 8px 14px;
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
text-decoration: none;
}
.uvt-navbar-links a:hover {
color: #ffffff;
background: rgba(255,255,255,0.1);
}
.uvt-navbar-cta {
display: flex;
align-items: center;
gap: 12px;
}
/* ─── Mega-menu ───────────────────────────────────────────────────────────── */
/* .has-megamenu is position:static so the panel positions vs navbar-inner */
.has-megamenu { position: static; }
/* Trigger: inherits navbar link styles — no browser button chrome */
.mega-trigger {
display: inline-flex;
align-items: center;
gap: 5px;
}
.mega-chevron {
transition: transform 0.22s ease;
opacity: 0.55;
flex-shrink: 0;
}
.has-megamenu:hover .mega-chevron { transform: rotate(180deg); opacity: 1; }
/* Panel: centered under the full navbar-inner (1200px container) */
.nav-mega {
position: absolute;
top: 100%; /* bottom of navbar-inner */
left: 50%;
transform: translateX(-50%) translateY(-4px);
width: min(780px, calc(100vw - 48px));
background: #0c1a3a;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px;
box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,196,0,0.05);
opacity: 0;
visibility: hidden;
/* delay close by 80ms so cursor can cross the gap without flicker */
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
z-index: 400;
margin-top: 8px;
}
.has-megamenu:hover .nav-mega,
.has-megamenu.mega-open .nav-mega {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0s;
}
/* Two-column grid */
.mega-inner {
display: grid;
grid-template-columns: 1fr 1px 1fr;
padding: 16px 0 8px;
}
.mega-sep {
background: rgba(255,255,255,0.07);
margin: 6px 0;
}
.mega-col { padding: 0 16px 8px; }
/* Section label */
.mega-label {
display: flex;
align-items: center;
gap: 6px;
margin: 0 4px 8px;
font-family: var(--font-heading);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(217,119,6,0.75);
}
.mega-label-ai { color: rgba(0,212,255,0.75); }
.mega-new {
font-size: 9px;
font-weight: 700;
padding: 1px 6px;
border-radius: 20px;
background: rgba(0,212,255,0.15);
color: #00d4ff;
border: 1px solid rgba(0,212,255,0.3);
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.6;
}
/* Service row */
.mega-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 8px 8px;
border-radius: 8px;
text-decoration: none;
border-left: 2px solid transparent;
transition: background 0.14s, border-color 0.14s;
}
.mega-item:hover { background: rgba(255,255,255,0.06); border-left-color: var(--gold-400); }
.mega-item-ai:hover { border-left-color: #7c3aed; }
/* Icon box */
.mega-icon {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 32px;
}
/* Text stack */
.mega-text {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
min-width: 0;
}
.mega-title {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 600;
color: rgba(255,255,255,0.88);
white-space: normal;
}
.mega-desc {
font-size: 11px;
color: rgba(255,255,255,0.38);
white-space: normal;
line-height: 1.4;
}
.mega-item:hover .mega-title { color: #fff; }
.mega-item:hover .mega-desc { color: rgba(255,255,255,0.6); }
/* CTA card */
.mega-cta {
display: block;
margin: 10px 8px 4px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(0,212,255,0.1));
border: 1px solid rgba(124,58,237,0.25);
border-radius: 10px;
text-decoration: none;
transition: border-color 0.15s, background 0.15s;
}
.mega-cta:hover {
background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(0,212,255,0.18));
border-color: rgba(124,58,237,0.45);
}
/* Footer bar */
.mega-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-top: 1px solid rgba(255,255,255,0.07);
background: rgba(0,0,0,0.15);
border-radius: 0 0 14px 14px;
}
.mega-footer-all {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-heading);
font-size: 12.5px;
font-weight: 700;
color: var(--gold-400);
text-decoration: none;
transition: color 0.14s;
}
.mega-footer-all:hover { color: #fff; }
.mega-footer-trust {
font-size: 11px;
color: rgba(255,255,255,0.28);
}
/* Mobile: hide mega panel, show plain link */
.mobile-services-link { display: none; }
@media (max-width: 900px) {
.has-megamenu { display: none !important; }
.mobile-services-link { display: block; }
}
/* ─── Footer ──────────────────────────────────────────────────────────────── */
.uvt-footer {
background: var(--navy-950);
color: rgba(255,255,255,0.7);
padding: 72px 0 32px;
}
.uvt-footer h4 {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 600;
color: #ffffff;
margin-bottom: 20px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.uvt-footer a {
color: rgba(255,255,255,0.6);
transition: color var(--transition-fast);
font-size: 14px;
}
.uvt-footer a:hover {
color: var(--gold-400);
}
/* ─── Stats ───────────────────────────────────────────────────────────────── */
.uvt-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 32px;
}
.uvt-stat-number {
font-family: var(--font-heading);
font-size: 48px;
font-weight: 800;
color: var(--gold-400);
line-height: 1;
margin-bottom: 8px;
}
.uvt-stat-label {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ─── Services Grid ───────────────────────────────────────────────────────── */
.uvt-services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
.uvt-service-card-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, var(--navy-50), var(--navy-100));
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: var(--navy-700);
}
.uvt-service-card-icon svg {
width: 28px;
height: 28px;
}
/* ─── Testimonials ────────────────────────────────────────────────────────── */
.uvt-testimonial {
background: #ffffff;
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 36px;
position: relative;
}
.uvt-testimonial::before {
content: '\201C';
position: absolute;
top: 20px;
right: 24px;
font-size: 72px;
font-family: Georgia, serif;
color: var(--gold-200);
line-height: 1;
}
.uvt-testimonial-quote {
font-size: 15px;
line-height: 1.75;
color: var(--gray-600);
margin-bottom: 24px;
font-style: italic;
}
/* ─── CTA Banner ──────────────────────────────────────────────────────────── */
.uvt-cta-banner {
background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 100%);
border-radius: var(--radius-xl);
padding: 72px 48px;
text-align: center;
position: relative;
overflow: hidden;
}
.uvt-cta-banner::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(255,196,0,0.08) 0%, transparent 70%);
pointer-events: none;
}
/* ─── WhatsApp Widget ─────────────────────────────────────────────────────── */
.uvt-whatsapp {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 999;
width: 56px;
height: 56px;
background: #25d366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(37,211,102,0.45);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.uvt-whatsapp:hover {
transform: scale(1.12);
box-shadow: 0 6px 28px rgba(37,211,102,0.6);
}
.uvt-whatsapp svg {
width: 28px;
height: 28px;
fill: #ffffff;
}
/* ─── Fade Up Animation ───────────────────────────────────────────────────── */
.uvt-fade-up {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.uvt-fade-up.visible {
opacity: 1;
transform: translateY(0);
}
/* ─── Process Steps ───────────────────────────────────────────────────────── */
.uvt-process {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 32px;
}
.uvt-process-number {
font-family: var(--font-heading);
font-size: 72px;
font-weight: 900;
color: var(--navy-100);
line-height: 1;
margin-bottom: 12px;
}
/* ─── FAQ Accordion ───────────────────────────────────────────────────────── */
.uvt-faq-item {
border-bottom: 1px solid var(--gray-200);
}
.uvt-faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
cursor: pointer;
font-family: var(--font-heading);
font-size: 16px;
font-weight: 600;
color: var(--navy-900);
user-select: none;
}
.uvt-faq-question::after {
content: '+';
font-size: 24px;
font-weight: 300;
color: var(--navy-500);
transition: transform var(--transition-fast);
flex-shrink: 0;
}
.uvt-faq-item.open .uvt-faq-question::after {
transform: rotate(45deg);
}
.uvt-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1);
}
.uvt-faq-item.open .uvt-faq-answer {
max-height: 600px;
}
.uvt-faq-answer p {
padding-bottom: 20px;
color: var(--gray-600);
font-size: 15px;
line-height: 1.75;
}
/* ═══════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════ */
/* ─── 1024px — small laptop ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
.uvt-why-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
}
/* ─── 900px — tablet landscape ───────────────────────────────────────────── */
@media (max-width: 900px) {
/* Hide mega-menu, show plain Services link */
.has-megamenu { display: none !important; }
.mobile-services-link { display: block !important; }
}
/* ─── 768px — tablet portrait ────────────────────────────────────────────── */
@media (max-width: 768px) {
:root { --section-py: 64px; }
/* ── Navbar ──────────────────────────────────── */
.uvt-navbar-links { display: none; }
.uvt-navbar-links.open {
display: flex;
flex-direction: column;
position: fixed;
inset: 0;
background: rgba(8,15,45,0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 100px 32px 40px;
gap: 0;
z-index: 999;
overflow-y: auto;
}
.uvt-navbar-links.open li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.uvt-navbar-links.open li:last-child { border-bottom: none; }
.uvt-navbar-links.open a {
font-size: 20px;
font-weight: 600;
padding: 16px 8px;
display: block;
color: rgba(255,255,255,0.9);
}
.uvt-menu-toggle {
display: flex !important;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
z-index: 1000;
}
/* ── Hero ────────────────────────────────────── */
.uvt-hero {
padding-top: 110px;
padding-bottom: 56px;
min-height: auto;
}
/* ── Stats ───────────────────────────────────── */
.uvt-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
/* ── Service grid ────────────────────────────── */
.uvt-services-grid { grid-template-columns: 1fr; }
/* ── CTA ─────────────────────────────────────── */
.uvt-cta-banner { padding: 48px 24px; }
/* ── Page hero (inner pages) ─────────────────── */
.uvt-page-hero { padding: 110px 0 56px; }
/* ── Footer ──────────────────────────────────── */
.uvt-footer > .uvt-container > div:first-child {
grid-template-columns: 1fr 1fr !important;
gap: 32px !important;
}
}
/* ─── 480px — mobile ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
:root { --section-py: 48px; }
/* ── Stats ───────────────────────────────────── */
.uvt-stat-number { font-size: 36px !important; }
.uvt-stats { grid-template-columns: repeat(2, 1fr); gap: 16px; }
/* ── Buttons ─────────────────────────────────── */
.uvt-btn { padding: 12px 20px; font-size: 14px; }
/* ── Container padding ───────────────────────── */
.uvt-container { padding: 0 16px; }
/* ── Page hero ───────────────────────────────── */
.uvt-page-hero { padding: 96px 0 48px; }
/* ── Footer: single column ───────────────────── */
.uvt-footer > .uvt-container > div:first-child {
grid-template-columns: 1fr !important;
gap: 28px !important;
}
/* ── CTA buttons stack ───────────────────────── */
.uvt-cta-banner div[style*="display:flex"] {
flex-direction: column;
align-items: stretch;
}
}
/* ─── Navbar logo text ────────────────────────────────────────────────────── */
.uvt-navbar-logo-text {
color: #fff;
font-family: var(--font-heading);
font-weight: 800;
font-size: 20px;
letter-spacing: -0.01em;
}
/* ─── Interior page hero (shorter than homepage hero) ────────────────────── */
.uvt-page-hero {
background: linear-gradient(160deg, var(--navy-950) 0%, #0a1835 55%, var(--navy-900) 100%);
padding: 140px 0 72px;
position: relative;
overflow: hidden;
}
.uvt-page-hero::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255,196,0,0.06) 0%, transparent 65%);
pointer-events: none;
}
.uvt-page-hero .uvt-container {
position: relative;
z-index: 1;
}