/* =====================================================
InsureWise Advisors — Global Stylesheet
Modern navy + gold professional theme
===================================================== */
:root {
--navy-900: #0a1f3d;
--navy-800: #0f2a52;
--navy-700: #16407a;
--navy-600: #1e5aa8;
--gold-500: #d4a017;
--gold-400: #e6b528;
--gold-100: #fff7e0;
--slate-900: #0f172a;
--slate-700: #334155;
--slate-500: #64748b;
--slate-300: #cbd5e1;
--slate-200: #e2e8f0;
--slate-100: #f1f5f9;
--slate-50: #f8fafc;
--white: #ffffff;
--shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
--shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
--shadow-lg: 0 20px 50px rgba(10, 31, 61, .15);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--container: 1240px;
--transition: .3s cubic-bezier(.4, 0, .2, 1);
--font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
--font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.65;
color: var(--slate-700);
background: var(--white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-700); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-500); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--navy-900);
margin: 0 0 .6em;
line-height: 1.25;
font-weight: 700;
letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.6rem); }
h2 { font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); }
h3 { font-size: clamp(1.2rem, .8vw + 1rem, 1.5rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
/* ===================== TOP BAR ===================== */
.topbar {
background: var(--navy-900);
color: rgba(255, 255, 255, .85);
font-size: 13.5px;
padding: 9px 0;
border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.topbar .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.topbar-info { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-info span { display: inline-flex; align-items: center; gap: 7px; }
.topbar-info svg { width: 14px; height: 14px; color: rgba(255, 255, 255, .9); }
.topbar-social { display: flex; gap: 14px; align-items: center; }
.topbar-social a {
color: rgba(255, 255, 255, .8);
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
transition: all var(--transition);
}
.topbar-social a:hover {
background: var(--white);
color: var(--navy-900);
}
.topbar-social svg { width: 14px; height: 14px; }
/* ===================== HEADER + NAV ===================== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
/* Single clean professional navy — matches --navy-900. The previous
radial+linear gradient stack added visual noise without serving the
brand. White nav text remains fully legible on this base. */
background: #0a1f3d;
box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
transition: box-shadow var(--transition);
/* overflow stays visible so dropdowns can extend below the header;
the .header-stars container has its own overflow: hidden to clip the starfield */
}
.site-header.scrolled { box-shadow: 0 8px 26px rgba(0, 0, 0, .4); }
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 0;
gap: 24px;
position: relative;
z-index: 2;
}
/* ============ MAIN MENU STAR EFFECT ============ */
.header-stars {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
/* Layer 1 & 2: dense multi-color background twinkling stars (out-of-phase) */
.header-stars::before,
.header-stars::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
will-change: opacity;
}
.header-stars::before {
background-image:
radial-gradient(1.4px 1.4px at 6% 28%, #ffffff, transparent 60%),
radial-gradient(1px 1px at 16% 65%, #bfdbfe, transparent 60%),
radial-gradient(1.6px 1.6px at 28% 38%, #ffffff, transparent 60%),
radial-gradient(1px 1px at 40% 72%, #ffffff, transparent 60%),
radial-gradient(1.4px 1.4px at 54% 25%, #cfe2ff, transparent 60%),
radial-gradient(1px 1px at 66% 58%, #ffffff, transparent 60%),
radial-gradient(1.6px 1.6px at 76% 35%, #ffffff, transparent 60%),
radial-gradient(1px 1px at 90% 70%, #bfdbfe, transparent 60%),
radial-gradient(1.2px 1.2px at 35% 12%, #ffffff, transparent 60%),
radial-gradient(1.2px 1.2px at 82% 85%, #cfe2ff, transparent 60%);
animation: hsTwinkleA 3.2s ease-in-out infinite alternate;
}
.header-stars::after {
background-image:
radial-gradient(1px 1px at 4% 62%, #ffffff, transparent 60%),
radial-gradient(1.4px 1.4px at 14% 32%, #ffffff, transparent 60%),
radial-gradient(1px 1px at 23% 22%, #cfe2ff, transparent 60%),
radial-gradient(1.4px 1.4px at 36% 60%, #bfdbfe, transparent 60%),
radial-gradient(1px 1px at 47% 80%, #ffffff, transparent 60%),
radial-gradient(1.4px 1.4px at 60% 30%, #ffffff, transparent 60%),
radial-gradient(1px 1px at 72% 76%, #ffffff, transparent 60%),
radial-gradient(1.4px 1.4px at 86% 22%, #cfe2ff, transparent 60%),
radial-gradient(1.2px 1.2px at 50% 50%, #ffffff, transparent 60%),
radial-gradient(1.2px 1.2px at 92% 50%, #bfdbfe, transparent 60%);
animation: hsTwinkleB 4.1s ease-in-out infinite alternate;
}
@keyframes hsTwinkleA {
0% { opacity: .4; }
50% { opacity: 1; }
100% { opacity: .55; }
}
@keyframes hsTwinkleB {
0% { opacity: .8; }
50% { opacity: .3; }
100% { opacity: .95; }
}
/* Layer 3: teleporting stars (fade out, jump to new position, fade in, repeat) */
.hs-star {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
}
.hs-c-gold { background: #ffd76b; box-shadow: 0 0 8px #ffd76b, 0 0 14px rgba(255, 215, 107, .6); }
.hs-c-blue { background: #7dd3fc; box-shadow: 0 0 8px #7dd3fc, 0 0 14px rgba(125, 211, 252, .6); }
.hs-c-white { background: #ffffff; box-shadow: 0 0 8px #ffffff, 0 0 14px rgba(255, 255, 255, .6); }
.hs-c-mint { background: #6ee7b7; box-shadow: 0 0 8px #6ee7b7, 0 0 14px rgba(110, 231, 183, .6); }
.hs-c-pink { background: #fda4d9; box-shadow: 0 0 8px #fda4d9, 0 0 14px rgba(253, 164, 217, .6); }
.hs-tele {
left: var(--ax);
top: var(--ay);
opacity: 0;
animation: hsTeleport 7s ease-in-out infinite;
}
@keyframes hsTeleport {
/* Anchor A: appear, twinkle bright, fade out */
0% { left: var(--ax); top: var(--ay); opacity: 0; transform: translate(-50%, -50%) scale(.4); }
6% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
12% { transform: translate(-50%, -50%) scale(1); }
38% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
45% { left: var(--ax); top: var(--ay); opacity: 0; transform: translate(-50%, -50%) scale(.4); }
/* Snap to anchor B while invisible */
46% { left: var(--bx); top: var(--by); opacity: 0; transform: translate(-50%, -50%) scale(.4); }
52% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
58% { transform: translate(-50%, -50%) scale(1); }
88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
95% { left: var(--bx); top: var(--by); opacity: 0; transform: translate(-50%, -50%) scale(.4); }
96% { left: var(--ax); top: var(--ay); opacity: 0; }
100% { left: var(--ax); top: var(--ay); opacity: 0; }
}
/* Layer 4: shooting stars — diagonal streaks across the menu */
.hs-shoot {
position: absolute;
width: 90px;
height: 1.5px;
background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, .9) 60%, #ffffff 100%);
border-radius: 2px;
opacity: 0;
box-shadow: 0 0 8px rgba(255, 255, 255, .75);
transform: rotate(18deg);
pointer-events: none;
will-change: transform, opacity;
}
.hs-shoot-1 { top: 25%; left: -120px; animation: hsShoot 7s ease-in 0s infinite; }
.hs-shoot-2 {
top: 55%; left: -120px;
background: linear-gradient(to right, transparent 0%, rgba(191, 219, 254, .9) 60%, #ffffff 100%);
box-shadow: 0 0 8px rgba(191, 219, 254, .75);
animation: hsShoot 9s ease-in 3.2s infinite;
}
.hs-shoot-3 {
top: 70%; left: -120px;
background: linear-gradient(to right, transparent 0%, rgba(207, 226, 255, .9) 60%, #ffffff 100%);
box-shadow: 0 0 8px rgba(207, 226, 255, .75);
animation: hsShoot 11s ease-in 6s infinite;
}
@keyframes hsShoot {
0% { transform: translateX(0) rotate(18deg); opacity: 0; }
3% { opacity: 1; }
18% { opacity: 1; }
25% { transform: translateX(120vw) rotate(18deg); opacity: 0; }
100% { transform: translateX(120vw) rotate(18deg); opacity: 0; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.header-stars::before,
.header-stars::after,
.hs-tele,
.hs-shoot { animation: none !important; }
.hs-tele { opacity: 1; }
.hs-shoot { display: none; }
}
.logo {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
line-height: 1;
flex-shrink: 0;
position: relative;
animation: logoEnter .8s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
@keyframes logoEnter {
0% { opacity: 0; transform: translateY(-6px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Continuous radar-ring pulse — a soft white outline that expands outward and fades */
.logo::after {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 54px;
height: 54px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, .55);
transform: translate(-8%, -50%) scale(.94);
opacity: 0;
pointer-events: none;
z-index: 0;
animation: logoRingPing 3.2s cubic-bezier(.25, .8, .25, 1) infinite;
}
@keyframes logoRingPing {
0% { transform: translate(-8%, -50%) scale(.92); opacity: 0; border-width: 2px; }
15% { opacity: .7; }
85% { opacity: 0; }
100% { transform: translate(-8%, -50%) scale(1.55); opacity: 0; border-width: .5px; }
}
/* Subtle white halo revealed on hover */
.logo::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, .45), transparent 65%);
transform: translate(-8%, -50%) scale(.5);
opacity: 0;
filter: blur(8px);
transition: opacity .55s ease, transform .55s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
z-index: 1;
}
.logo-icon {
height: 54px;
width: auto;
display: block;
flex-shrink: 0;
object-fit: contain;
position: relative;
z-index: 2;
transform-origin: center center;
transition:
transform .55s cubic-bezier(.34, 1.56, .64, 1),
filter .45s ease;
}
.logo-block {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 3px;
min-width: 0;
position: relative;
z-index: 2;
}
.logo-text {
height: 34px;
width: auto;
max-width: 240px;
display: block;
flex-shrink: 0;
object-fit: contain;
filter: brightness(0) invert(1);
transition: transform .55s cubic-bezier(.4, 0, .2, 1), filter .4s ease;
}
.logo-caption {
font-family: var(--font-display);
font-size: 8.5px;
font-weight: 600;
color: rgba(255, 255, 255, .82);
letter-spacing: .1em;
text-transform: uppercase;
line-height: 1.35;
max-width: 240px;
white-space: normal;
text-wrap: balance;
position: relative;
padding-inline: 22px;
margin-top: 4px;
transition:
color .4s ease,
padding-inline .55s cubic-bezier(.4, 0, .2, 1),
letter-spacing .55s ease;
}
/* Editorial-style flourishes: fading white lines on each side of the caption. */
.logo-caption::before,
.logo-caption::after {
content: '';
position: absolute;
top: 50%;
width: 16px;
height: 1.5px;
transform: translateY(-50%);
border-radius: 2px;
transition:
width .55s cubic-bezier(.4, 0, .2, 1),
background .4s ease,
filter .4s ease;
pointer-events: none;
}
.logo-caption::before {
left: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75));
}
.logo-caption::after {
right: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75));
}
/* Hover state — only on devices that support hover (skips touch screens) */
@media (hover: hover) {
.logo:hover::before {
opacity: 1;
transform: translate(-8%, -50%) scale(1.2);
}
.logo:hover .logo-icon {
transform: rotate(-6deg) scale(1.08);
filter: drop-shadow(0 6px 14px rgba(255, 255, 255, .35));
}
.logo:hover .logo-text {
transform: translateX(3px);
}
.logo:hover .logo-caption {
color: var(--white);
padding-inline: 28px;
letter-spacing: .12em;
}
.logo:hover .logo-caption::before,
.logo:hover .logo-caption::after {
width: 22px;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55));
}
.logo:hover .logo-caption::before {
background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--white));
}
.logo:hover .logo-caption::after {
background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--white));
}
}
/* Keyboard focus mirrors hover for accessibility */
.logo:focus-visible {
outline: none;
}
.logo:focus-visible::before {
opacity: 1;
transform: translate(-8%, -50%) scale(1.2);
}
.logo:focus-visible .logo-icon {
transform: rotate(-6deg) scale(1.08);
filter: drop-shadow(0 6px 14px rgba(255, 255, 255, .35));
}
.logo:focus-visible .logo-caption::before,
.logo:focus-visible .logo-caption::after {
width: 22px;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55));
}
.logo:focus-visible .logo-caption::before {
background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--white));
}
.logo:focus-visible .logo-caption::after {
background: linear-gradient(to left, rgba(255, 255, 255, 0), var(--white));
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.logo,
.logo *,
.logo::before,
.logo::after,
.footer-logo-card,
.footer-logo-card::before {
animation: none !important;
transition: none !important;
}
}
/* Nav */
.main-nav {
display: flex;
align-items: center;
gap: 4px;
}
.main-nav > ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
gap: 4px;
}
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 12px 16px;
color: rgba(255, 255, 255, .82);
font-weight: 600;
font-size: 15px;
font-family: var(--font-display);
border-radius: var(--radius-sm);
transition: all var(--transition);
position: relative;
text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.main-nav > ul > li > a::after {
content: '';
position: absolute;
bottom: 6px;
left: 16px;
right: 16px;
height: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, .9), #ffffff);
transform: scaleX(0);
transition: transform var(--transition);
border-radius: 2px;
box-shadow: 0 0 8px rgba(255, 255, 255, .45);
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.active > a {
color: var(--white);
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.active > a::after {
transform: scaleX(1);
}
.main-nav .has-dropdown > a .chev {
width: 11px;
height: 11px;
transition: transform var(--transition);
}
.main-nav .has-dropdown:hover > a .chev,
.main-nav .has-dropdown.open > a .chev {
transform: rotate(180deg);
}
/* Dropdown */
.dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 260px;
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 10px;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity var(--transition), transform var(--transition), visibility 0s linear .25s;
border: 1px solid var(--slate-100);
}
.main-nav .has-dropdown:hover > .dropdown,
.main-nav .has-dropdown.open > .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s;
}
.dropdown::before {
content: '';
position: absolute;
top: -8px;
left: 0;
right: 0;
height: 8px;
}
.dropdown li { position: relative; }
.dropdown li a {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 11px 14px;
border-radius: var(--radius-sm);
color: var(--slate-700);
font-weight: 500;
font-size: 14.5px;
transition: all var(--transition);
}
.dropdown li > a:hover,
.dropdown li.has-submenu:hover > a,
.dropdown li.has-submenu.open > a,
.dropdown li.active > a {
background: var(--slate-50);
color: var(--navy-800);
}
.dropdown li > a:hover { transform: translateX(3px); }
.dropdown li.has-submenu:hover > a,
.dropdown li.has-submenu.open > a,
.dropdown li.active > a { transform: none; }
.dropdown li a .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--navy-700);
margin-top: 8px;
flex-shrink: 0;
}
.dropdown-text { flex: 1; min-width: 0; }
.dropdown-text strong {
display: block;
color: var(--navy-900);
font-weight: 600;
font-size: 14.5px;
line-height: 1.3;
}
.dropdown-text small {
color: var(--slate-500);
font-size: 12.5px;
display: block;
margin-top: 2px;
}
.dropdown li.active .dropdown-text strong { color: var(--navy-800); }
.dropdown .sub-chev {
width: 12px;
height: 12px;
color: var(--slate-500);
margin-top: 6px;
flex-shrink: 0;
transition: transform var(--transition), color var(--transition);
}
.dropdown li.has-submenu:hover .sub-chev,
.dropdown li.has-submenu.open .sub-chev {
color: var(--navy-700);
transform: translateX(3px);
}
/* Nested submenu (flyout) */
.submenu {
position: absolute;
top: -10px;
left: calc(100% + 6px);
min-width: 240px;
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: 10px;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
transform: translateX(-8px);
transition: opacity var(--transition), transform var(--transition), visibility 0s linear .25s;
border: 1px solid var(--slate-100);
z-index: 2;
}
.dropdown li.has-submenu:hover > .submenu,
.dropdown li.has-submenu.open > .submenu {
opacity: 1;
visibility: visible;
transform: translateX(0);
transition-delay: 0s;
}
/* Invisible bridge so cursor can move from parent to flyout without losing hover */
.submenu::before {
content: '';
position: absolute;
top: 0;
left: -8px;
width: 8px;
height: 100%;
}
.submenu li a {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius-sm);
color: var(--navy-900);
font-weight: 600;
font-size: 14px;
font-family: var(--font-display);
transition: all var(--transition);
}
.submenu li a:hover {
background: var(--slate-50);
transform: translateX(3px);
}
.submenu li.active a {
background: #eaf1fb;
color: var(--navy-900);
}
.submenu .sm-icon {
width: 34px;
height: 34px;
border-radius: 8px;
background: var(--slate-100);
color: var(--navy-700);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--transition);
}
.submenu li a:hover .sm-icon {
background: var(--navy-700);
color: var(--white);
}
.submenu li.active .sm-icon {
background: var(--navy-700);
color: var(--white);
}
.submenu li a svg { width: 16px; height: 16px; }
.nav-cta {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 11px 20px;
background: var(--navy-800);
color: var(--white) !important;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 14.5px;
margin-left: 12px;
transition: all var(--transition);
box-shadow: 0 4px 14px rgba(15, 42, 82, .25);
}
.nav-cta:hover {
background: var(--white);
color: var(--navy-900) !important;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(255, 255, 255, .3);
}
.nav-cta svg { width: 14px; height: 14px; }
.mobile-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, .2);
border-radius: 10px;
background: rgba(255, 255, 255, .04);
color: var(--white);
cursor: pointer;
padding: 0;
transition: all var(--transition);
}
.mobile-toggle:hover {
background: var(--white);
border-color: var(--white);
color: var(--navy-900);
}
.mobile-toggle svg { width: 22px; height: 22px; }
/* Drawer header/footer markup is rendered in every page but hidden on desktop;
they only become visible inside the mobile drawer (see responsive block below). */
.mobile-nav-header,
.mobile-nav-footer { display: none; }
/* ===================== BUTTONS ===================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--radius-sm);
font-family: var(--font-display);
font-weight: 600;
font-size: 15px;
border: 2px solid transparent;
cursor: pointer;
text-decoration: none;
transition: all var(--transition);
line-height: 1;
}
.btn-primary {
background: var(--gold-500);
color: var(--navy-900);
box-shadow: 0 10px 30px rgba(212, 160, 23, .35);
}
.btn-primary:hover {
background: var(--gold-400);
color: var(--navy-900);
transform: translateY(-3px);
box-shadow: 0 14px 35px rgba(212, 160, 23, .5);
}
.btn-outline {
background: transparent;
color: var(--white);
border-color: rgba(255, 255, 255, .4);
}
.btn-outline:hover {
background: var(--white);
color: var(--navy-900);
border-color: var(--white);
transform: translateY(-3px);
}
.btn-dark {
background: var(--navy-800);
color: var(--white);
}
.btn-dark:hover {
background: var(--navy-700);
color: var(--white);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.btn-ghost {
background: transparent;
color: var(--navy-800);
border-color: var(--slate-200);
}
.btn-ghost:hover {
background: var(--navy-800);
color: var(--white);
border-color: var(--navy-800);
}
/* ===================== HERO SLIDER ===================== */
.iw-slider {
position: relative;
width: 100%;
overflow: hidden;
background: #0a1f3d;
/* Banner aspect ratio. The slider height is derived from the screen WIDTH
via this ratio, so the box stays proportional (never a fixed height that
would force cropping) and the whole image fits on every device. Defaults
to a 16:5 banner; index.php / JS refine it to the primary image's real
ratio so an ideal banner fills edge-to-edge with no letterboxing. */
--iw-ratio: 16 / 5;
}
.iw-slider-track {
position: relative;
width: 100%;
/* Height is derived purely from the screen WIDTH and the primary banner's
real aspect ratio (--iw-ratio, set by index.php / JS). With NO max-height
cap, the box ALWAYS keeps the image's exact ratio at every resolution, so
the banner fills the full screen width with no side gaps AND no top/bottom
cropping. A height ceiling is intentionally avoided: capping the height
keeps the full 100vw width but breaks the box ratio, which then either
letterboxes (side gaps) or — with object-fit: cover — crops the top and
bottom (which, against the same-navy header/promises strip, looks like the
image slipping behind those sections). Trade-off: a non-banner (tall)
primary image will make a tall hero, so the primary slide must be a wide
banner. */
aspect-ratio: var(--iw-ratio);
min-height: 150px;
}
.iw-slide {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
visibility: hidden;
transition: opacity .8s ease;
}
.iw-slide.is-active {
opacity: 1;
visibility: visible;
}
.iw-slide-link,
.iw-slide picture {
display: block;
width: 100%;
height: 100%;
}
.iw-slide img {
display: block;
width: 100%;
height: 100%;
/* The track box always matches the primary banner's real aspect ratio (no
height cap), so `contain` fills the full screen width edge-to-edge with no
side gaps while still guaranteeing the ENTIRE image is visible on every
device — nothing is ever cropped from the top, bottom or sides. Any
residual mismatch (e.g. a non-primary slide of a different ratio, or the
default-ratio fallback before the image loads) is letterboxed against the
brand-navy background rather than cropped. */
object-fit: contain;
object-position: center center;
}
/* Prev / Next arrows */
.iw-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 50%;
background: rgba(10, 31, 61, .45);
color: #fff;
cursor: pointer;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
transition: background .25s ease, border-color .25s ease;
}
.iw-slider-arrow:hover {
background: rgba(10, 31, 61, .85);
border-color: rgba(255, 255, 255, .5);
}
.iw-slider-arrow svg { width: 22px; height: 22px; }
.iw-slider-prev { left: 18px; }
.iw-slider-next { right: 18px; }
/* Pagination dots */
.iw-slider-dots {
position: absolute;
left: 50%;
bottom: 18px;
transform: translateX(-50%);
z-index: 3;
display: flex;
gap: 10px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(10, 31, 61, .35);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.iw-slider-dot {
width: 10px;
height: 10px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, .45);
cursor: pointer;
transition: background .25s ease, width .25s ease;
}
.iw-slider-dot:hover { background: rgba(255, 255, 255, .75); }
.iw-slider-dot.is-active {
width: 26px;
border-radius: 999px;
background: var(--gold-500, #f3c75a);
}
@media (max-width: 600px) {
.iw-slider-arrow { display: none; }
.iw-slider-dots { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.iw-slide { transition: none; }
}
/* ===================== HERO PROMISES STRIP ===================== */
.iw-promises {
background: #0a1f3d;
border-top: 1px solid rgba(255, 255, 255, .08);
}
.iw-promises-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 22px 0;
}
.iw-promise {
display: flex;
align-items: center;
gap: 14px;
padding: 6px 22px;
position: relative;
}
.iw-promise + .iw-promise::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 40px;
background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .18), transparent);
}
.iw-promise-icon {
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
border: 1px solid rgba(255, 255, 255, .3);
color: #fff;
}
.iw-promise-icon svg { width: 22px; height: 22px; }
.iw-promise-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.iw-promise-text strong {
font-family: var(--font-display);
font-size: 14.5px;
font-weight: 700;
color: #fff;
line-height: 1.25;
}
.iw-promise-text span {
margin-top: 3px;
font-size: 12px;
color: rgba(255, 255, 255, .66);
line-height: 1.35;
}
@media (max-width: 980px) {
.iw-promises-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px 0;
padding: 18px 16px;
}
.iw-promise + .iw-promise::before { display: none; }
}
@media (max-width: 540px) {
/* Mobile: keep a 2x2 grid (4 items on two lines) instead of a single
stacked column. Tighten per-item padding/gap so the icon + text fit
comfortably side by side on narrow phones. */
.iw-promises-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px 0;
padding: 16px 12px;
}
.iw-promise { padding: 6px 10px; gap: 10px; }
.iw-promise-icon { width: 40px; height: 40px; }
.iw-promise-icon svg { width: 20px; height: 20px; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
/* ===================== SECTIONS ===================== */
.section { padding: 90px 0; position: relative; }
.section-sm { padding: 60px 0; }
.section-alt { background: var(--slate-50); }
.section-soft {
background:
radial-gradient(ellipse at top left, rgba(212, 160, 23, .045), transparent 45%),
radial-gradient(ellipse at bottom right, rgba(30, 90, 168, .035), transparent 45%),
#fbfaf5;
}
.section-dark { background: var(--navy-900); color: rgba(255, 255, 255, .82); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 60px;
}
.section-head .eyebrow {
display: inline-block;
color: var(--gold-500);
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 14px;
position: relative;
padding: 0 22px;
}
.section-head .eyebrow::before,
.section-head .eyebrow::after {
content: '';
position: absolute;
top: 50%;
width: 14px;
height: 1.5px;
background: var(--gold-500);
}
.section-head .eyebrow::before { left: 0; }
.section-head .eyebrow::after { right: 0; }
.section-head h2 { margin: 0; }
.section-head p {
margin-top: 14px;
color: var(--slate-500);
font-size: 1.05rem;
}
.section-head.left { text-align: left; margin-left: 0; }
.section-head.left .eyebrow::before { display: none; }
.section-head.left .eyebrow { padding-left: 0; }
/* ===================== PAGE BANNER ===================== */
.page-banner {
position: relative;
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(15, 42, 82, .85)),
url('data:image/svg+xml;utf8,');
color: var(--white);
padding: 80px 0 80px;
text-align: center;
overflow: hidden;
}
.page-banner::after {
content: '';
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 100px;
background: radial-gradient(ellipse, rgba(212, 160, 23, .25), transparent 70%);
pointer-events: none;
}
.page-banner h1 { color: var(--white); margin-bottom: 14px; }
.breadcrumb {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, .75);
font-size: 14px;
}
.breadcrumb a { color: var(--gold-400); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .sep { color: rgba(255, 255, 255, .4); }
/* ===================== ABOUT (home) ===================== */
.about-grid {
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 60px;
align-items: center;
}
/* ===== ABOUT VISUAL — animated image card with hover effects ===== */
.about-visual {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--navy-900);
display: flex;
align-items: flex-end;
padding: 36px;
color: var(--white);
box-shadow:
0 25px 60px rgba(10, 31, 61, .22),
0 0 0 1px rgba(212, 160, 23, .1),
0 0 30px rgba(212, 160, 23, .06);
transition: transform .55s cubic-bezier(.4, 0, .2, 1),
box-shadow .55s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
.about-visual.visible {
/* float starts after the .reveal slide-up entrance completes (~0.9s) */
animation: aboutVisualFloat 7s ease-in-out .9s infinite;
}
.about-visual::before {
/* subtle inner border so the framing reads cleanly */
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
pointer-events: none;
z-index: 3;
}
.about-visual:hover {
transform: translateY(-6px);
box-shadow:
0 35px 80px rgba(10, 31, 61, .38),
0 0 0 1px rgba(212, 160, 23, .35),
0 0 70px rgba(212, 160, 23, .25);
animation-play-state: paused;
}
/* Image fills the frame, clipped via overflow on the inner wrapper */
.about-visual-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: inherit;
transition:
transform 1s cubic-bezier(.4, 0, .2, 1),
filter .6s ease;
will-change: transform, filter;
}
.about-visual:hover .about-visual-img {
transform: scale(1.07);
filter: brightness(1.06) saturate(1.12);
}
/* Diagonal shine sweep — idle off-screen, sweeps across on hover */
.about-visual-shine {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 2;
}
.about-visual-shine::before {
content: '';
position: absolute;
top: -50%;
left: -75%;
width: 50%;
height: 200%;
background: linear-gradient(105deg,
transparent 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, .35) 50%,
rgba(255, 255, 255, 0) 70%,
transparent 100%);
transform: skewX(-18deg);
transition: left 1.1s cubic-bezier(.4, 0, .2, 1);
}
.about-visual:hover .about-visual-shine::before { left: 125%; }
/* Soft internal corner-light overlay (gold bottom-left, blue top-right) — pulses gently */
.about-visual-glow {
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(55% 45% at 15% 100%, rgba(212, 160, 23, .28), transparent 70%),
radial-gradient(55% 45% at 85% 0%, rgba(99, 150, 238, .26), transparent 70%);
mix-blend-mode: screen;
pointer-events: none;
z-index: 2;
animation: aboutGlowPulse 6s ease-in-out infinite;
opacity: .8;
transition: opacity .55s ease;
}
.about-visual:hover .about-visual-glow { opacity: 1; }
/* Gold L-shaped corner brackets — short by default, extend on hover */
.about-visual-corner {
position: absolute;
width: 28px;
height: 28px;
pointer-events: none;
z-index: 4;
transition: width .45s cubic-bezier(.4, 0, .2, 1),
height .45s cubic-bezier(.4, 0, .2, 1),
opacity .35s ease;
opacity: .9;
}
.about-visual-corner::before,
.about-visual-corner::after {
content: '';
position: absolute;
background: var(--gold-500);
box-shadow: 0 0 12px rgba(212, 160, 23, .55);
border-radius: 2px;
}
.about-visual-corner-tl {
top: 14px;
left: 14px;
}
.about-visual-corner-tl::before { /* horizontal */
top: 0; left: 0;
width: 100%; height: 2.5px;
}
.about-visual-corner-tl::after { /* vertical */
top: 0; left: 0;
width: 2.5px; height: 100%;
}
.about-visual-corner-br {
bottom: 14px;
right: 14px;
}
.about-visual-corner-br::before { /* horizontal */
bottom: 0; right: 0;
width: 100%; height: 2.5px;
}
.about-visual-corner-br::after { /* vertical */
bottom: 0; right: 0;
width: 2.5px; height: 100%;
}
.about-visual:hover .about-visual-corner {
width: 56px;
height: 56px;
opacity: 1;
}
/* Floating IRDAI Certified badge — top-right, gently bobbing */
.about-visual-badge {
position: absolute;
top: 22px;
right: 22px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgba(10, 31, 61, .85);
color: var(--white);
border: 1px solid rgba(212, 160, 23, .45);
border-radius: 999px;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1.1;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 10px 24px rgba(10, 31, 61, .35);
animation: aboutBadgeBob 4.5s ease-in-out infinite;
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1),
box-shadow .35s ease,
border-color .35s ease;
}
.about-visual-badge svg {
width: 16px;
height: 16px;
color: var(--gold-400);
flex-shrink: 0;
}
.about-visual-badge-text { display: inline-block; }
.about-visual:hover .about-visual-badge {
transform: translateY(-2px) scale(1.05);
border-color: var(--gold-400);
box-shadow: 0 14px 32px rgba(212, 160, 23, .35);
}
/* Bottom scrim keeps the gold tag readable over any image */
.about-visual-scrim {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(to top,
rgba(10, 31, 61, .7) 0%,
rgba(10, 31, 61, .3) 35%,
rgba(10, 31, 61, 0) 65%);
pointer-events: none;
z-index: 1;
}
/* Gold tag — lifts on hover */
.about-visual-tag {
position: relative;
z-index: 4;
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
padding: 18px 22px;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
box-shadow: 0 14px 30px rgba(212, 160, 23, .35), 0 6px 14px rgba(10, 31, 61, .25);
line-height: 1.3;
transition: transform .45s cubic-bezier(.34, 1.56, .64, 1),
box-shadow .45s ease;
}
.about-visual:hover .about-visual-tag {
transform: translateY(-4px);
box-shadow: 0 22px 42px rgba(212, 160, 23, .45), 0 10px 22px rgba(10, 31, 61, .3);
}
/* Animations */
@keyframes aboutVisualFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes aboutGlowPulse {
0%, 100% { opacity: .45; transform: scale(1); }
50% { opacity: .7; transform: scale(1.04); }
}
@keyframes aboutBadgeBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.about-visual,
.about-visual-glow,
.about-visual-badge {
animation: none !important;
}
.about-visual:hover { transform: none; }
.about-visual:hover .about-visual-img { transform: none; filter: none; }
.about-visual:hover .about-visual-corner { width: 28px; height: 28px; }
.about-visual:hover .about-visual-badge { transform: none; }
.about-visual:hover .about-visual-tag { transform: none; }
.about-visual-shine { display: none; }
}
/* =====================================================
ABOUT VISUAL STAGE — premium elevated animation
(rotating halo, floating orbs, 3D tilt, clip-path reveal)
===================================================== */
@property --halo-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
.about-visual-stage {
position: relative;
width: 100%;
perspective: 1200px;
transform-style: preserve-3d;
isolation: isolate;
opacity: 0;
transform: translateY(28px);
transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.about-visual-stage.visible {
opacity: 1;
transform: translateY(0);
animation: aboutStageFloat 8s ease-in-out 1.4s infinite;
}
@keyframes aboutStageFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
/* Rotating conic-gradient halo behind the card */
.about-visual-halo {
position: absolute;
inset: -32px;
border-radius: calc(var(--radius-lg) + 32px);
background: conic-gradient(
from var(--halo-angle),
rgba(212, 160, 23, 0) 0deg,
rgba(212, 160, 23, .55) 55deg,
rgba(231, 184, 65, .85) 100deg,
rgba(212, 160, 23, .2) 150deg,
rgba(43, 90, 158, .55) 220deg,
rgba(231, 184, 65, .7) 300deg,
rgba(212, 160, 23, 0) 360deg
);
filter: blur(30px);
opacity: 0;
z-index: -2;
pointer-events: none;
transition: opacity 1.1s ease;
animation: aboutHaloSpin 16s linear infinite;
}
.about-visual-stage.visible .about-visual-halo { opacity: .85; }
.about-visual-stage:hover .about-visual-halo { opacity: 1; }
@keyframes aboutHaloSpin {
to { --halo-angle: 360deg; }
}
/* Crisp gradient ring inside the halo (sharper edge of light) */
.about-visual-halo::after {
content: '';
position: absolute;
inset: 28px;
border-radius: var(--radius-lg);
background: conic-gradient(
from calc(var(--halo-angle) + 180deg),
transparent 0deg,
rgba(231, 184, 65, .9) 90deg,
transparent 180deg,
rgba(43, 90, 158, .7) 270deg,
transparent 360deg
);
filter: blur(8px);
opacity: .55;
mix-blend-mode: screen;
}
/* Floating colored orbs */
.about-visual-orb {
position: absolute;
border-radius: 50%;
filter: blur(38px);
opacity: 0;
pointer-events: none;
z-index: -1;
transition: opacity 1.3s ease;
}
.about-visual-stage.visible .about-visual-orb { opacity: .55; }
.about-visual-orb-1 {
top: -42px;
left: -50px;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(212, 160, 23, .9), transparent 65%);
animation: aboutOrbDrift1 11s ease-in-out infinite;
}
.about-visual-orb-2 {
bottom: -55px;
right: -55px;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(43, 90, 158, .9), transparent 65%);
animation: aboutOrbDrift2 13s ease-in-out infinite;
}
.about-visual-orb-3 {
top: 45%;
right: -70px;
width: 110px;
height: 110px;
background: radial-gradient(circle, rgba(231, 184, 65, .85), transparent 65%);
animation: aboutOrbDrift3 9s ease-in-out infinite;
}
@keyframes aboutOrbDrift1 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, 26px) scale(1.18); }
}
@keyframes aboutOrbDrift2 {
0%, 100% { transform: translate(0, 0) scale(1.05); }
50% { transform: translate(-32px, -22px) scale(.92); }
}
@keyframes aboutOrbDrift3 {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-26px, 32px); }
}
/* ===== Elevated inner visual — 3D tilt + clip-path reveal + parallax depth ===== */
.about-visual-elevated {
transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transform-style: preserve-3d;
transition: transform .6s cubic-bezier(.22, 1, .36, 1),
box-shadow .55s cubic-bezier(.4, 0, .2, 1);
/* hidden until the stage becomes visible — diagonal clip-path reveal */
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
will-change: transform, clip-path;
}
.about-visual-elevated.is-tilting {
transition: transform .12s linear,
box-shadow .55s cubic-bezier(.4, 0, .2, 1);
}
/* Disable inherited float on the elevated variant (stage floats instead) */
.about-visual-stage .about-visual-elevated {
animation: none !important;
}
/* Clip-path reveal — diagonal sweep open when stage becomes visible */
.about-visual-stage.visible .about-visual-elevated {
animation: aboutClipReveal 1.15s cubic-bezier(.65, 0, .35, 1) .15s both !important;
}
@keyframes aboutClipReveal {
0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
60% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
/* Parallax depth — children float at different Z planes */
.about-visual-elevated .about-visual-img { transform: translateZ(18px) scale(1.02); }
.about-visual-elevated:hover .about-visual-img { transform: translateZ(18px) scale(1.08); filter: brightness(1.06) saturate(1.12); }
.about-visual-elevated .about-visual-corner { transform: translateZ(34px); }
.about-visual-elevated .about-visual-badge { transform: translateZ(54px); }
.about-visual-elevated:hover .about-visual-badge { transform: translateZ(54px) translateY(-2px) scale(1.05); }
.about-visual-elevated .about-visual-tag { transform: translateZ(48px); }
.about-visual-elevated:hover .about-visual-tag { transform: translateZ(48px) translateY(-4px); box-shadow: 0 22px 42px rgba(212, 160, 23, .45), 0 10px 22px rgba(10, 31, 61, .3); }
/* Vertical scan-line sweep — slow scanning effect across image */
.about-visual-scan {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 3;
}
.about-visual-scan::before {
content: '';
position: absolute;
left: -10%;
right: -10%;
height: 90px;
top: -120px;
background: linear-gradient(
180deg,
rgba(231, 184, 65, 0) 0%,
rgba(212, 160, 23, .18) 40%,
rgba(255, 215, 100, .42) 50%,
rgba(212, 160, 23, .18) 60%,
rgba(231, 184, 65, 0) 100%
);
filter: blur(2px);
mix-blend-mode: screen;
animation: aboutScanSweep 6.5s ease-in-out 2s infinite;
}
@keyframes aboutScanSweep {
0% { top: -120px; opacity: 0; }
15% { opacity: 1; }
75% { opacity: 1; }
100% { top: 110%; opacity: 0; }
}
/* Cursor-tracking spotlight — follows mouse position via --mx/--my */
.about-visual-cursor-glow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 4;
opacity: 0;
transition: opacity .45s ease;
background: radial-gradient(
220px circle at var(--mx, 50%) var(--my, 50%),
rgba(255, 215, 120, .28),
rgba(212, 160, 23, .12) 35%,
transparent 65%
);
mix-blend-mode: screen;
}
.about-visual-elevated:hover .about-visual-cursor-glow { opacity: 1; }
/* Reduced motion — disable transforms / animated layers */
@media (prefers-reduced-motion: reduce) {
.about-visual-stage,
.about-visual-stage.visible,
.about-visual-halo,
.about-visual-orb,
.about-visual-scan::before,
.about-visual-stage.visible .about-visual-elevated {
animation: none !important;
}
.about-visual-elevated {
transform: none !important;
clip-path: none !important;
}
.about-visual-elevated .about-visual-img,
.about-visual-elevated .about-visual-badge,
.about-visual-elevated .about-visual-tag,
.about-visual-elevated .about-visual-corner,
.about-visual-elevated:hover .about-visual-img,
.about-visual-elevated:hover .about-visual-badge,
.about-visual-elevated:hover .about-visual-tag {
transform: none !important;
filter: none !important;
}
.about-visual-cursor-glow { display: none; }
}
/* =====================================================
CAT VISUAL — modern image card for category pages
Rotating conic halo, drifting orbs, 3D tilt frame,
clip-path entrance, floating glass chips
===================================================== */
@property --cat-halo-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
.cat-visual {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
perspective: 1100px;
transform-style: preserve-3d;
isolation: isolate;
}
/* Rotating conic-gradient halo behind the frame */
.cat-visual-halo {
position: absolute;
inset: -26px;
border-radius: calc(var(--radius-lg) + 26px);
background: conic-gradient(
from var(--cat-halo-angle),
rgba(212, 160, 23, 0) 0deg,
rgba(212, 160, 23, .55) 60deg,
rgba(231, 184, 65, .85) 110deg,
rgba(43, 90, 158, .35) 180deg,
rgba(43, 90, 158, .55) 240deg,
rgba(212, 160, 23, .5) 310deg,
rgba(212, 160, 23, 0) 360deg
);
filter: blur(26px);
opacity: 0;
z-index: -2;
pointer-events: none;
transition: opacity 1s ease;
animation: catHaloSpin 16s linear infinite;
}
.cat-visual.visible .cat-visual-halo { opacity: .8; }
@keyframes catHaloSpin {
to { --cat-halo-angle: 360deg; }
}
/* Drifting glow orbs behind frame */
.cat-visual-orb {
position: absolute;
border-radius: 50%;
filter: blur(42px);
opacity: 0;
pointer-events: none;
z-index: -1;
transition: opacity 1.1s ease;
}
.cat-visual.visible .cat-visual-orb { opacity: .55; }
.cat-visual-orb-a {
width: 170px;
height: 170px;
top: -50px;
right: -50px;
background: radial-gradient(circle, rgba(212, 160, 23, .9), transparent 65%);
animation: catOrbA 11s ease-in-out infinite;
}
.cat-visual-orb-b {
width: 200px;
height: 200px;
bottom: -60px;
left: -50px;
background: radial-gradient(circle, rgba(43, 90, 158, .9), transparent 65%);
animation: catOrbB 13s ease-in-out infinite;
}
@keyframes catOrbA {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(26px, 22px) scale(1.18); }
}
@keyframes catOrbB {
0%, 100% { transform: translate(0, 0) scale(1.05); }
50% { transform: translate(-24px, -20px) scale(.92); }
}
/* Frame holds the image — tilts in 3D */
.cat-visual-frame {
position: relative;
width: 100%;
height: 100%;
border-radius: var(--radius-lg);
overflow: hidden;
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transform-style: preserve-3d;
transition: transform .6s cubic-bezier(.22, 1, .36, 1),
box-shadow .55s ease;
box-shadow: 0 26px 60px rgba(10, 31, 61, .2);
will-change: transform;
}
.cat-visual-frame.is-tilting {
transition: transform .12s linear,
box-shadow .55s ease;
}
.cat-visual-frame:hover {
box-shadow:
0 38px 80px rgba(10, 31, 61, .3),
0 12px 28px rgba(212, 160, 23, .18);
}
/* Clip-path diagonal sweep reveal on entrance */
.cat-visual.visible .cat-visual-frame {
animation: catClipReveal 1.15s cubic-bezier(.65, 0, .35, 1) .15s both;
}
@keyframes catClipReveal {
0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.cat-visual-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
display: block;
padding: 14px;
box-sizing: border-box;
transform: scale(1);
transition: transform .6s cubic-bezier(.22, 1, .36, 1),
filter .5s ease;
}
.cat-visual-frame:hover .cat-visual-img {
transform: scale(1.03);
filter: brightness(1.05) saturate(1.08);
}
/* Subtle top + bottom shading for chip readability — light over dark backdrop */
.cat-visual-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10, 31, 61, .22) 0%, transparent 18%),
linear-gradient(0deg, rgba(10, 31, 61, .32) 0%, transparent 26%);
pointer-events: none;
z-index: 2;
}
/* Diagonal shine sweep on hover */
.cat-visual-shine {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 3;
}
.cat-visual-shine::before {
content: '';
position: absolute;
top: -50%;
left: -55%;
width: 38%;
height: 220%;
background: linear-gradient(115deg,
transparent 30%,
rgba(255, 255, 255, .22) 50%,
transparent 70%);
transform: skewX(-18deg);
transition: left 1.1s cubic-bezier(.4, 0, .2, 1);
}
.cat-visual-frame:hover .cat-visual-shine::before { left: 130%; }
/* Top-right glass chip — IRDAI badge */
.cat-visual-chip-top {
position: absolute;
top: 20px;
right: 20px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, .88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(212, 160, 23, .35);
color: var(--navy-900);
font-size: 11.5px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
box-shadow: 0 12px 26px rgba(10, 31, 61, .18);
z-index: 4;
animation: catChipBob 3.8s ease-in-out infinite;
}
.cat-visual-chip-top svg {
width: 16px;
height: 16px;
color: var(--gold-500);
}
@keyframes catChipBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* Bottom-left dark glass info-card */
.cat-visual-chip-bottom {
position: absolute;
bottom: 22px;
left: 22px;
max-width: calc(100% - 60px);
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-radius: 14px;
background: rgba(10, 31, 61, .82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, .12);
color: var(--white);
box-shadow: 0 18px 38px rgba(10, 31, 61, .4);
z-index: 4;
transition: transform .5s cubic-bezier(.22, 1, .36, 1),
box-shadow .5s ease;
}
.cat-visual:hover .cat-visual-chip-bottom {
transform: translateY(-4px);
box-shadow: 0 24px 48px rgba(10, 31, 61, .5);
}
.cat-visual-chip-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gold-400);
box-shadow: 0 0 0 0 rgba(212, 160, 23, .65);
animation: catChipDotPulse 2s ease-out infinite;
flex-shrink: 0;
}
@keyframes catChipDotPulse {
0% { box-shadow: 0 0 0 0 rgba(212, 160, 23, .55); }
70% { box-shadow: 0 0 0 10px rgba(212, 160, 23, 0); }
100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}
.cat-visual-chip-bottom-text { min-width: 0; }
.cat-visual-chip-bottom-text strong {
display: block;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
line-height: 1.2;
color: var(--white);
}
.cat-visual-chip-bottom-text small {
display: block;
font-size: 12px;
color: rgba(255, 255, 255, .7);
margin-top: 3px;
letter-spacing: .02em;
}
/* Mobile */
@media (max-width: 640px) {
.cat-visual { aspect-ratio: 4 / 4.6; }
.cat-visual-chip-top { font-size: 10.5px; padding: 6px 12px 6px 10px; }
.cat-visual-chip-top svg { width: 13px; height: 13px; }
.cat-visual-chip-bottom { padding: 12px 16px; bottom: 16px; left: 16px; gap: 12px; }
.cat-visual-chip-bottom-text strong { font-size: .95rem; }
.cat-visual-chip-bottom-text small { font-size: 11.5px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.cat-visual-halo,
.cat-visual-orb,
.cat-visual-chip-top,
.cat-visual-chip-dot,
.cat-visual.visible .cat-visual-frame,
.cat-visual:hover .cat-visual-chip-bottom {
animation: none !important;
transition: none !important;
transform: none !important;
}
.cat-visual-frame {
transform: none !important;
clip-path: none !important;
}
.cat-visual-img,
.cat-visual-frame:hover .cat-visual-img {
transform: none !important;
filter: none !important;
}
.cat-visual-shine { display: none; }
}
.about-features {
list-style: none;
padding: 0;
margin: 24px 0 36px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
}
.about-features li {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
color: var(--navy-900);
font-size: 14.5px;
}
.about-features svg {
width: 20px;
height: 20px;
color: var(--gold-500);
flex-shrink: 0;
}
/* ===================== CARDS GRID ===================== */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.card {
background: var(--white);
border-radius: var(--radius-md);
padding: 32px 28px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--slate-100);
transition: all var(--transition);
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold-500), var(--navy-700));
transform: scaleX(0);
transform-origin: left;
transition: transform var(--transition);
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.card:hover::before { transform: scaleX(1); }
.card .icon-box {
width: 60px;
height: 60px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
color: var(--gold-400);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
transition: all var(--transition);
}
.card:hover .icon-box {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
transform: rotate(-6deg) scale(1.05);
}
.card .icon-box svg { width: 28px; height: 28px; }
.card h3 { margin-bottom: 10px; font-size: 1.2rem; }
.card p { color: var(--slate-500); font-size: 14.5px; margin: 0; }
.card-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
font-weight: 600;
color: var(--navy-800);
font-size: 14px;
}
.card-link svg { width: 14px; height: 14px; transition: transform var(--transition); }
.card:hover .card-link { color: var(--gold-500); }
.card:hover .card-link svg { transform: translateX(4px); }
/* ===================== SOLUTIONS GRID (Home page) ===================== */
.solutions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
counter-reset: sol-counter;
}
.solution-card {
/* Defaults — themed cards override via .theme-* classes below */
--card-bg: var(--white);
--card-border: var(--slate-100);
--card-number: var(--slate-100);
--card-icon-bg: linear-gradient(135deg, #ffffff 0%, var(--slate-100) 100%);
--card-icon-color: var(--navy-700);
--card-chip-bg: rgba(255, 255, 255, .6);
--card-chip-border: var(--slate-200);
--card-chip-color: var(--navy-800);
--card-link-color: var(--navy-800);
--card-hover-from: var(--navy-900);
--card-hover-to: var(--navy-700);
--card-hover-shadow: rgba(10, 31, 61, .35);
counter-increment: sol-counter;
position: relative;
display: block;
background: var(--card-bg);
border-radius: var(--radius-md);
padding: 36px 30px 32px;
border: 1px solid var(--card-border);
box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
text-decoration: none;
overflow: hidden;
isolation: isolate;
transition:
transform .5s cubic-bezier(.4, 0, .2, 1),
box-shadow .5s ease,
border-color .5s ease,
background-color .5s ease;
}
/* Decorative number badge (01–06) */
.solution-card::before {
content: counter(sol-counter, decimal-leading-zero);
position: absolute;
top: 16px;
right: 24px;
font-family: var(--font-display);
font-size: 70px;
font-weight: 800;
color: var(--card-number);
line-height: 1;
pointer-events: none;
z-index: 0;
transition: color .5s ease, transform .6s cubic-bezier(.4, 0, .2, 1);
}
/* Themed dark gradient revealed on hover */
.solution-card::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at top right, rgba(255, 255, 255, .12), transparent 55%),
linear-gradient(160deg, var(--card-hover-from) 0%, var(--card-hover-to) 100%);
opacity: 0;
transition: opacity .55s ease;
z-index: -1;
}
/* Diagonal shine sweep */
.solution-shine {
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
transform: skewX(-15deg);
transition: left .9s cubic-bezier(.4, 0, .2, 1);
pointer-events: none;
z-index: 1;
}
.solution-icon {
width: 76px;
height: 76px;
border-radius: 20px;
background: var(--card-icon-bg);
color: var(--card-icon-color);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
position: relative;
z-index: 2;
box-shadow:
0 14px 30px var(--card-icon-shadow, rgba(15, 23, 42, .12)),
0 4px 10px rgba(15, 23, 42, .06),
inset 0 1px 0 rgba(255, 255, 255, .75),
inset 0 -1px 0 rgba(0, 0, 0, .04);
transition:
background .5s ease,
color .5s ease,
transform .55s cubic-bezier(.4, 0, .2, 1),
box-shadow .5s ease;
}
/* Glossy top reflection — 3D depth */
.solution-icon::before {
content: '';
position: absolute;
top: 1px;
left: 1px;
right: 1px;
height: 50%;
border-radius: 19px 19px 30px 30px / 19px 19px 60px 60px;
background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 90%);
pointer-events: none;
}
.solution-icon svg {
width: 42px;
height: 42px;
position: relative;
z-index: 1;
filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .18));
transition: filter .5s ease;
}
.solution-card:hover .solution-icon svg {
filter: drop-shadow(0 4px 8px rgba(15, 23, 42, .35));
}
.solution-card h3 {
position: relative;
z-index: 2;
color: var(--navy-900);
margin: 0 0 10px;
font-size: 1.22rem;
transition: color .45s ease;
}
.solution-card p {
position: relative;
z-index: 2;
color: var(--slate-500);
font-size: 14.5px;
line-height: 1.65;
margin: 0 0 20px;
transition: color .45s ease;
}
.solution-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 22px;
position: relative;
z-index: 2;
}
.solution-chips span {
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 600;
color: var(--card-chip-color);
padding: 5px 11px;
background: var(--card-chip-bg);
border: 1px solid var(--card-chip-border);
border-radius: 99px;
line-height: 1.2;
transition:
background .45s ease,
border-color .45s ease,
color .45s ease,
transform .45s ease;
}
.solution-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
color: var(--card-link-color);
position: relative;
z-index: 2;
transition: color .45s ease, gap .45s ease;
}
.solution-link svg {
width: 14px;
height: 14px;
transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.solution-accent-line {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
transform: scaleX(0);
transform-origin: left center;
transition: transform .6s cubic-bezier(.4, 0, .2, 1);
z-index: 3;
box-shadow: 0 0 24px rgba(212, 160, 23, .55);
}
/* ===== HOVER STATE ===== */
.solution-card:hover {
transform: translateY(-12px);
box-shadow: 0 30px 60px var(--card-hover-shadow);
border-color: transparent;
}
.solution-card:hover::after { opacity: 1; }
.solution-card:hover::before {
color: rgba(212, 160, 23, .35);
transform: scale(1.05) translateY(-4px);
}
.solution-card:hover .solution-shine { left: 150%; }
.solution-card:hover .solution-icon {
background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
color: var(--navy-900);
transform: rotate(-8deg) scale(1.08);
box-shadow: 0 12px 30px rgba(212, 160, 23, .45);
}
.solution-card:hover h3 { color: var(--white); }
.solution-card:hover p { color: rgba(255, 255, 255, .78); }
.solution-card:hover .solution-chips span {
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .2);
color: var(--white);
}
.solution-card:hover .solution-link {
color: var(--gold-400);
gap: 10px;
}
.solution-card:hover .solution-link svg { transform: translateX(4px); }
.solution-card:hover .solution-accent-line { transform: scaleX(1); }
/* ===== PER-CATEGORY THEMES ===== */
/* Health — soft rose / heart-red */
.solution-card.theme-health {
--card-bg: #fff5f6;
--card-border: #fecdd3;
--card-number: rgba(225, 29, 72, .14);
--card-icon-bg: linear-gradient(135deg, #ffffff 0%, #ffe4e6 100%);
--card-icon-color: #e11d48;
--card-icon-shadow: rgba(225, 29, 72, .22);
--card-chip-bg: rgba(255, 255, 255, .7);
--card-chip-border: rgba(225, 29, 72, .2);
--card-chip-color: #9f1239;
--card-link-color: #9f1239;
--card-hover-from: #e11d48;
--card-hover-to: #881337;
--card-hover-shadow: rgba(159, 18, 57, .35);
}
/* Life — fresh emerald */
.solution-card.theme-life {
--card-bg: #f0fdf4;
--card-border: #bbf7d0;
--card-number: rgba(5, 150, 105, .14);
--card-icon-bg: linear-gradient(135deg, #ffffff 0%, #d1fae5 100%);
--card-icon-color: #059669;
--card-icon-shadow: rgba(5, 150, 105, .22);
--card-chip-bg: rgba(255, 255, 255, .7);
--card-chip-border: rgba(5, 150, 105, .22);
--card-chip-color: #065f46;
--card-link-color: #065f46;
--card-hover-from: #059669;
--card-hover-to: #064e3b;
--card-hover-shadow: rgba(6, 95, 70, .35);
}
/* Motor — confident blue */
.solution-card.theme-motor {
--card-bg: #eff6ff;
--card-border: #bfdbfe;
--card-number: rgba(37, 99, 235, .14);
--card-icon-bg: linear-gradient(135deg, #ffffff 0%, #dbeafe 100%);
--card-icon-color: #2563eb;
--card-icon-shadow: rgba(37, 99, 235, .22);
--card-chip-bg: rgba(255, 255, 255, .7);
--card-chip-border: rgba(37, 99, 235, .22);
--card-chip-color: #1e40af;
--card-link-color: #1e40af;
--card-hover-from: #2563eb;
--card-hover-to: #1e3a8a;
--card-hover-shadow: rgba(30, 64, 175, .35);
}
/* Travel — open-sky teal */
.solution-card.theme-travel {
--card-bg: #ecfeff;
--card-border: #a5f3fc;
--card-number: rgba(8, 145, 178, .14);
--card-icon-bg: linear-gradient(135deg, #ffffff 0%, #cffafe 100%);
--card-icon-color: #0891b2;
--card-icon-shadow: rgba(8, 145, 178, .22);
--card-chip-bg: rgba(255, 255, 255, .7);
--card-chip-border: rgba(8, 145, 178, .22);
--card-chip-color: #155e75;
--card-link-color: #155e75;
--card-hover-from: #0891b2;
--card-hover-to: #164e63;
--card-hover-shadow: rgba(21, 94, 117, .35);
}
/* Business — professional indigo */
.solution-card.theme-business {
--card-bg: #eef2ff;
--card-border: #c7d2fe;
--card-number: rgba(67, 56, 202, .14);
--card-icon-bg: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
--card-icon-color: #4338ca;
--card-icon-shadow: rgba(67, 56, 202, .22);
--card-chip-bg: rgba(255, 255, 255, .7);
--card-chip-border: rgba(67, 56, 202, .22);
--card-chip-color: #3730a3;
--card-link-color: #3730a3;
--card-hover-from: #4338ca;
--card-hover-to: #312e81;
--card-hover-shadow: rgba(55, 48, 163, .35);
}
/* Property — warm amber */
.solution-card.theme-property {
--card-bg: #fffbeb;
--card-border: #fde68a;
--card-number: rgba(217, 119, 6, .16);
--card-icon-bg: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
--card-icon-color: #d97706;
--card-icon-shadow: rgba(217, 119, 6, .22);
--card-chip-bg: rgba(255, 255, 255, .7);
--card-chip-border: rgba(217, 119, 6, .22);
--card-chip-color: #92400e;
--card-link-color: #92400e;
--card-hover-from: #d97706;
--card-hover-to: #78350f;
--card-hover-shadow: rgba(146, 64, 14, .35);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.solutions-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 600px) {
.solutions-grid { grid-template-columns: 1fr; gap: 18px; }
.solution-card { padding: 30px 24px 26px; }
.solution-card::before { font-size: 56px; top: 14px; right: 18px; }
.solution-icon { width: 66px; height: 66px; margin-bottom: 20px; border-radius: 18px; }
.solution-icon svg { width: 36px; height: 36px; }
}
/* ===================== WHY CHOOSE US (Reasons section) ===================== */
.reasons-section {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at top right, rgba(212, 160, 23, .10), transparent 55%),
radial-gradient(ellipse at bottom left, rgba(30, 90, 168, .22), transparent 55%),
linear-gradient(160deg, #07172e 0%, #0a1f3d 45%, #0f2a52 100%);
color: rgba(255, 255, 255, .82);
}
.reasons-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
pointer-events: none;
}
.reasons-section .container { position: relative; z-index: 2; }
.reasons-section .section-head h2 { color: var(--white); }
.reasons-section .section-head p { color: rgba(255, 255, 255, .7); }
/* Animated background orbs */
.reasons-orbs {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.reasons-orbs .orb {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: .55;
will-change: transform;
}
.orb-gold-a {
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(212, 160, 23, .85), transparent 65%);
top: -120px;
left: -100px;
animation: orbDriftA 22s ease-in-out infinite;
}
.orb-blue {
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(30, 90, 168, .75), transparent 65%);
bottom: -160px;
right: -140px;
animation: orbDriftB 26s ease-in-out infinite;
}
.orb-gold-b {
width: 260px;
height: 260px;
background: radial-gradient(circle, rgba(212, 160, 23, .5), transparent 65%);
top: 38%;
left: 42%;
animation: orbDriftC 30s ease-in-out infinite;
}
@keyframes orbDriftA {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(60px, 40px) scale(1.08); }
}
@keyframes orbDriftB {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-50px, -30px) scale(.94); }
}
@keyframes orbDriftC {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -50px) scale(1.06); }
66% { transform: translate(-30px, 30px) scale(.96); }
}
/* Reason cards grid */
.reasons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
position: relative;
z-index: 2;
}
.reason-card {
position: relative;
background: rgba(255, 255, 255, .04);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .08);
border-radius: var(--radius-md);
padding: 34px 28px 30px;
overflow: hidden;
isolation: isolate;
transition:
transform .5s cubic-bezier(.4, 0, .2, 1),
background .5s ease,
border-color .5s ease,
box-shadow .5s ease;
}
/* Top gold accent line draws on hover */
.reason-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 0;
background: linear-gradient(90deg, var(--gold-500), rgba(212, 160, 23, 0));
transition: width .7s cubic-bezier(.4, 0, .2, 1);
z-index: 3;
}
/* Decorative corner triangle (revealed on hover) */
.reason-card::after {
content: '';
position: absolute;
bottom: -1px;
right: -1px;
width: 56px;
height: 56px;
background: linear-gradient(135deg, transparent 50%, rgba(212, 160, 23, .18) 50%);
border-bottom-right-radius: var(--radius-md);
opacity: 0;
transition: opacity .5s ease;
z-index: 0;
}
.reason-num {
position: absolute;
top: 16px;
right: 24px;
font-family: var(--font-display);
font-size: 58px;
font-weight: 800;
color: rgba(255, 255, 255, .05);
line-height: 1;
pointer-events: none;
z-index: 1;
transition: color .55s ease, transform .55s cubic-bezier(.4, 0, .2, 1);
}
.reason-glow {
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 160, 23, .25), transparent 65%);
top: -40px;
left: -40px;
filter: blur(40px);
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
z-index: 0;
}
.reason-icon {
width: 72px;
height: 72px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(212, 160, 23, .22) 0%, rgba(212, 160, 23, .08) 100%);
color: var(--gold-400);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
border: 1px solid rgba(212, 160, 23, .3);
position: relative;
z-index: 2;
box-shadow:
0 14px 30px rgba(212, 160, 23, .18),
0 4px 12px rgba(0, 0, 0, .35),
inset 0 1px 0 rgba(255, 255, 255, .22),
inset 0 -1px 0 rgba(0, 0, 0, .2);
transition:
background .55s ease,
color .55s ease,
border-color .55s ease,
transform .55s cubic-bezier(.4, 0, .2, 1),
box-shadow .55s ease;
}
/* Glossy top reflection — 3D depth on dark surface */
.reason-icon::before {
content: '';
position: absolute;
top: 1px;
left: 1px;
right: 1px;
height: 50%;
border-radius: 17px 17px 26px 26px / 17px 17px 50px 50px;
background: linear-gradient(to bottom, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 90%);
pointer-events: none;
}
.reason-icon svg {
width: 38px;
height: 38px;
position: relative;
z-index: 1;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
transition: filter .5s ease;
}
.reason-card:hover .reason-icon svg {
filter: drop-shadow(0 4px 10px rgba(212, 160, 23, .5));
}
.reason-card h3 {
position: relative;
z-index: 2;
color: var(--white);
font-size: 1.18rem;
margin: 0 0 10px;
}
.reason-card p {
position: relative;
z-index: 2;
color: rgba(255, 255, 255, .68);
font-size: 14.5px;
line-height: 1.65;
margin: 0;
}
/* HOVER STATE */
.reason-card:hover {
background: rgba(255, 255, 255, .07);
border-color: rgba(212, 160, 23, .35);
transform: translateY(-10px);
box-shadow:
0 24px 60px rgba(0, 0, 0, .45),
0 0 32px rgba(212, 160, 23, .14);
}
.reason-card:hover::before { width: 100%; }
.reason-card:hover::after { opacity: 1; }
.reason-card:hover .reason-glow { opacity: 1; }
.reason-card:hover .reason-num {
color: rgba(212, 160, 23, .25);
transform: scale(1.06) translateY(-2px);
}
.reason-card:hover .reason-icon {
background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
color: var(--navy-900);
border-color: var(--gold-400);
transform: rotate(-6deg) scale(1.06);
box-shadow: 0 12px 28px rgba(212, 160, 23, .45);
}
/* Responsive */
@media (max-width: 1024px) {
.reasons-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.orb-gold-a { width: 260px; height: 260px; }
.orb-blue { width: 340px; height: 340px; }
}
@media (max-width: 600px) {
.reasons-grid { grid-template-columns: 1fr; gap: 16px; }
.reason-card { padding: 28px 24px 26px; }
.reason-num { font-size: 48px; }
.reason-icon { width: 64px; height: 64px; margin-bottom: 18px; border-radius: 16px; }
.reason-icon svg { width: 34px; height: 34px; }
}
/* ===================== ACCORDION ===================== */
.accordion { max-width: 920px; margin: 0 auto; }
.accordion-item {
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-md);
margin-bottom: 14px;
overflow: hidden;
transition: all var(--transition);
}
.accordion-item.open {
border-color: var(--gold-500);
box-shadow: var(--shadow-md);
}
.accordion-header {
width: 100%;
background: none;
border: 0;
text-align: left;
padding: 22px 26px;
cursor: pointer;
display: flex;
align-items: center;
gap: 18px;
font-family: var(--font-display);
font-weight: 600;
color: var(--navy-900);
font-size: 1.1rem;
transition: background var(--transition);
}
.accordion-header:hover { background: var(--slate-50); }
.accordion-header .acc-icon {
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: var(--slate-100);
color: var(--navy-700);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--transition);
}
.accordion-item.open .acc-icon {
background: var(--gold-500);
color: var(--navy-900);
}
.accordion-header .acc-icon svg { width: 22px; height: 22px; }
.accordion-header .acc-title { flex: 1; }
.accordion-header .acc-toggle {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--slate-100);
color: var(--navy-800);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all var(--transition);
}
.accordion-item.open .acc-toggle {
background: var(--navy-800);
color: var(--white);
transform: rotate(45deg);
}
.accordion-header .acc-toggle svg { width: 16px; height: 16px; }
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
}
.accordion-body-inner {
padding: 0 26px 24px 88px;
color: var(--slate-500);
}
/* ===================== FEATURE LIST ===================== */
.feature-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 28px;
}
.feature-item {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 24px;
border-radius: var(--radius-md);
background: var(--white);
border: 1px solid var(--slate-100);
transition: all var(--transition);
}
.feature-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--gold-500);
}
.feature-item .num {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.05rem;
}
.feature-item h4 { margin: 4px 0 6px; }
.feature-item p { margin: 0; color: var(--slate-500); font-size: 14.5px; }
/* ===================== VALUE CARDS (About — Core Values) ===================== */
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 22px;
}
.value-card {
position: relative;
overflow: hidden;
padding: 32px 28px 30px;
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--slate-100);
isolation: isolate;
opacity: 0;
transform: translateY(28px);
transition: opacity .6s ease,
transform .6s cubic-bezier(.22, 1, .36, 1),
box-shadow .45s ease,
border-color .35s ease,
background .45s ease;
}
.values-grid.visible .value-card {
opacity: 1;
transform: translateY(0);
transition:
opacity .65s ease calc(var(--i, 0) * .08s),
transform .65s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .08s),
box-shadow .45s ease,
border-color .35s ease,
background .45s ease;
}
.value-card:hover {
transform: translateY(-8px);
border-color: rgba(212, 160, 23, .55);
box-shadow:
0 28px 60px rgba(10, 31, 61, .14),
0 8px 22px rgba(212, 160, 23, .18);
}
/* Sweeping top-edge gradient on hover */
.value-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
rgba(212, 160, 23, .9),
rgba(231, 184, 65, 1),
rgba(212, 160, 23, .9),
transparent);
transform: translateX(-110%);
transition: transform .85s cubic-bezier(.65, 0, .35, 1);
z-index: 3;
}
.value-card:hover::before { transform: translateX(110%); }
/* Diagonal soft-fill gradient that washes in from bottom-right on hover */
.value-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg,
rgba(212, 160, 23, 0) 40%,
rgba(212, 160, 23, .06) 70%,
rgba(231, 184, 65, .12) 100%);
opacity: 0;
transition: opacity .55s ease;
z-index: 0;
pointer-events: none;
}
.value-card:hover::after { opacity: 1; }
/* Cursor-tracking radial spotlight (driven by JS-set --mx/--my) */
.value-card-spot {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity .45s ease;
background: radial-gradient(
300px circle at var(--mx, 50%) var(--my, 50%),
rgba(212, 160, 23, .22),
rgba(212, 160, 23, .07) 35%,
transparent 60%
);
}
.value-card:hover .value-card-spot { opacity: 1; }
/* Huge outlined background number */
.value-card-bg-num {
position: absolute;
top: -22px;
right: 6px;
font-family: var(--font-display);
font-size: 8.5rem;
font-weight: 900;
line-height: 1;
letter-spacing: -.04em;
color: transparent;
-webkit-text-stroke: 1.6px var(--slate-200);
pointer-events: none;
z-index: 0;
opacity: .85;
transition: -webkit-text-stroke-color .5s ease,
transform .55s cubic-bezier(.22, 1, .36, 1),
opacity .5s ease;
}
.value-card:hover .value-card-bg-num {
-webkit-text-stroke-color: rgba(212, 160, 23, .45);
transform: translate(-6px, 4px) scale(1.08);
opacity: 1;
}
/* Icon badge */
.value-card-icon {
position: relative;
z-index: 1;
width: 54px;
height: 54px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, rgba(212, 160, 23, .12), rgba(231, 184, 65, .22));
color: var(--gold-500);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1),
background .4s ease,
color .4s ease,
box-shadow .4s ease;
}
.value-card-icon svg { width: 26px; height: 26px; }
.value-card:hover .value-card-icon {
transform: rotate(-8deg) scale(1.1);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
box-shadow: 0 14px 28px rgba(212, 160, 23, .35);
}
/* Tag e.g. "01 / 06" */
.value-card-tag {
position: relative;
z-index: 1;
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
color: var(--slate-400);
text-transform: uppercase;
margin-bottom: 6px;
transition: color .35s ease, letter-spacing .35s ease;
}
.value-card:hover .value-card-tag {
color: var(--gold-500);
letter-spacing: .18em;
}
/* Title */
.value-card-title {
position: relative;
z-index: 1;
margin: 0 0 10px;
font-size: 1.25rem;
color: var(--navy-900);
transition: transform .45s cubic-bezier(.22, 1, .36, 1),
color .35s ease;
}
.value-card:hover .value-card-title {
transform: translateX(3px);
}
/* Description */
.value-card-desc {
position: relative;
z-index: 1;
margin: 0;
color: var(--slate-500);
font-size: 14.5px;
line-height: 1.65;
}
/* Corner arrow that pops in on hover */
.value-card-corner {
position: absolute;
bottom: 22px;
right: 22px;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--navy-900);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
opacity: 0;
transform: translate(10px, 10px) scale(.6) rotate(-35deg);
transition: transform .55s cubic-bezier(.34, 1.56, .64, 1),
opacity .4s ease,
background .35s ease,
color .35s ease,
box-shadow .4s ease;
}
.value-card-corner svg { width: 14px; height: 14px; }
.value-card:hover .value-card-corner {
opacity: 1;
transform: translate(0, 0) scale(1) rotate(0);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
box-shadow: 0 12px 24px rgba(212, 160, 23, .4);
}
/* Mobile spacing tweaks */
@media (max-width: 640px) {
.value-card { padding: 28px 22px 26px; }
.value-card-bg-num { font-size: 7rem; top: -16px; }
.value-card-corner { bottom: 18px; right: 18px; width: 34px; height: 34px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.value-card,
.value-card *,
.value-card::before,
.value-card::after,
.values-grid.visible .value-card {
transition: none !important;
animation: none !important;
transform: none !important;
}
.value-card:hover { transform: none; }
.value-card-spot { display: none; }
}
/* ===================== PURPOSE CARDS (About — Mission / Vision) ===================== */
.purpose-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.purpose-card {
position: relative;
overflow: hidden;
isolation: isolate;
border-radius: var(--radius-lg);
padding: 44px 40px 92px;
min-height: 440px;
display: flex;
flex-direction: column;
transition: transform .55s cubic-bezier(.22, 1, .36, 1),
box-shadow .55s ease;
}
.purpose-card-dark {
background: linear-gradient(135deg, #0a1f3d 0%, #143057 55%, #0a1f3d 100%);
color: var(--white);
box-shadow: 0 18px 42px rgba(10, 31, 61, .18);
}
.purpose-card-light {
background: linear-gradient(135deg, #ffffff 0%, #fbf8ef 100%);
border: 1px solid var(--slate-100);
color: var(--navy-900);
box-shadow: 0 12px 30px rgba(10, 31, 61, .06);
}
.purpose-card:hover {
transform: translateY(-10px);
box-shadow:
0 38px 72px rgba(10, 31, 61, .26),
0 12px 28px rgba(212, 160, 23, .15);
}
/* Background decorations layer */
.purpose-card-bg {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.purpose-orb {
position: absolute;
border-radius: 50%;
filter: blur(55px);
transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .6s ease;
}
.purpose-orb-a {
width: 260px;
height: 260px;
top: -80px;
right: -70px;
background: radial-gradient(circle, rgba(212, 160, 23, .55), transparent 70%);
opacity: .7;
}
.purpose-orb-b {
width: 220px;
height: 220px;
bottom: -70px;
left: -60px;
background: radial-gradient(circle, rgba(43, 90, 158, .5), transparent 70%);
opacity: .55;
}
.purpose-card-light .purpose-orb-a { opacity: .4; }
.purpose-card-light .purpose-orb-b { opacity: .25; }
.purpose-card:hover .purpose-orb-a { transform: scale(1.18) translate(-18px, 22px); }
.purpose-card:hover .purpose-orb-b { transform: scale(1.12) translate(16px, -16px); }
/* Dot pattern overlay */
.purpose-grid-overlay {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1.2px, transparent 1.6px);
background-size: 26px 26px;
mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent);
-webkit-mask-image: linear-gradient(180deg, transparent, black 25%, black 75%, transparent);
}
.purpose-card-light .purpose-grid-overlay {
background-image: radial-gradient(circle, rgba(10, 31, 61, .08) 1.2px, transparent 1.6px);
}
/* Header (icon + counter) */
.purpose-card-header {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 28px;
}
.purpose-icon {
position: relative;
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 16px 32px rgba(212, 160, 23, .4);
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.purpose-icon svg { width: 30px; height: 30px; }
.purpose-card:hover .purpose-icon {
transform: rotate(8deg) scale(1.08);
}
/* Pulsing rings around icon */
.purpose-icon-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid rgba(212, 160, 23, .6);
animation: purposeIconPulse 2.6s ease-out infinite;
pointer-events: none;
}
.purpose-icon-ring-2 { animation-delay: 1.3s; }
@keyframes purposeIconPulse {
0% { transform: scale(.9); opacity: 1; }
100% { transform: scale(1.55); opacity: 0; }
}
/* Counter (01 / 02) */
.purpose-meta {
display: flex;
align-items: baseline;
gap: 4px;
font-family: var(--font-display);
}
.purpose-counter {
font-size: 2.3rem;
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.purpose-counter-divider,
.purpose-counter-total {
font-size: 1.05rem;
font-weight: 700;
}
.purpose-card-dark .purpose-counter-divider,
.purpose-card-dark .purpose-counter-total { color: rgba(255, 255, 255, .45); }
.purpose-card-light .purpose-counter-divider,
.purpose-card-light .purpose-counter-total { color: var(--slate-400); }
/* Body */
.purpose-card-body {
position: relative;
z-index: 2;
flex: 1;
}
.purpose-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
color: var(--gold-500);
text-transform: uppercase;
margin-bottom: 12px;
}
.purpose-title {
margin: 0 0 18px;
font-size: 1.7rem;
line-height: 1.25;
letter-spacing: -.01em;
}
.purpose-card-dark .purpose-title { color: var(--white); }
.purpose-card-light .purpose-title { color: var(--navy-900); }
.purpose-text {
margin: 0 0 14px;
font-size: 14.5px;
line-height: 1.72;
}
.purpose-card-dark .purpose-text { color: rgba(255, 255, 255, .78); }
.purpose-card-light .purpose-text { color: var(--slate-500); }
.purpose-text:last-of-type { margin-bottom: 0; }
/* Corner arrow indicator */
.purpose-arrow {
position: absolute;
bottom: 32px;
right: 32px;
width: 46px;
height: 46px;
border-radius: 50%;
border: 1.5px solid;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: transform .55s cubic-bezier(.22, 1, .36, 1),
background .4s ease,
border-color .4s ease,
color .4s ease,
box-shadow .4s ease;
}
.purpose-arrow svg {
width: 18px;
height: 18px;
transition: transform .4s ease;
}
.purpose-card-dark .purpose-arrow {
border-color: rgba(255, 255, 255, .25);
color: rgba(255, 255, 255, .75);
}
.purpose-card-light .purpose-arrow {
border-color: var(--slate-200);
color: var(--slate-500);
}
.purpose-card:hover .purpose-arrow {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
border-color: var(--gold-500);
color: var(--navy-900);
transform: rotate(-45deg);
box-shadow: 0 14px 28px rgba(212, 160, 23, .35);
}
.purpose-card:hover .purpose-arrow svg { transform: translateX(1px); }
/* ===================== APPROACH JOURNEY (About — Our Approach) ===================== */
.approach-layout {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 70px;
align-items: center;
}
.approach-content { max-width: 520px; }
.approach-journey { position: relative; }
.journey-steps {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
/* Vertical line connecting all steps — draws in from top */
.journey-steps::before {
content: '';
position: absolute;
left: 27px;
top: 30px;
bottom: 30px;
width: 2px;
background: linear-gradient(180deg,
transparent 0%,
rgba(212, 160, 23, .9) 10%,
rgba(231, 184, 65, 1) 50%,
rgba(212, 160, 23, .9) 90%,
transparent 100%);
transform: scaleY(0);
transform-origin: top center;
opacity: 0;
transition: opacity .5s ease,
transform 1.4s cubic-bezier(.65, 0, .35, 1) .3s;
border-radius: 1px;
}
.approach-journey.visible .journey-steps::before {
opacity: 1;
transform: scaleY(1);
}
.journey-step {
display: flex;
gap: 22px;
position: relative;
padding: 6px 0;
margin-bottom: 18px;
opacity: 0;
transform: translateX(-18px);
transition: opacity .6s ease,
transform .6s cubic-bezier(.22, 1, .36, 1);
}
.journey-step:last-child { margin-bottom: 0; }
.approach-journey.visible .journey-step {
opacity: 1;
transform: translateX(0);
transition-delay: calc(.45s + var(--i, 0) * .14s);
}
/* Number bubble */
.journey-step-num {
position: relative;
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--slate-200);
color: var(--navy-900);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.05rem;
z-index: 2;
transition: transform .45s cubic-bezier(.34, 1.56, .64, 1),
background .4s ease,
border-color .4s ease,
color .4s ease,
box-shadow .4s ease;
}
.journey-step-num-text {
position: relative;
z-index: 2;
}
.journey-step-num-glow {
position: absolute;
inset: -6px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 160, 23, .5), transparent 65%);
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
z-index: 0;
}
.journey-step:hover .journey-step-num {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
border-color: var(--gold-500);
transform: scale(1.1);
box-shadow: 0 14px 28px rgba(212, 160, 23, .4);
}
.journey-step:hover .journey-step-num-glow { opacity: 1; }
/* Step content card */
.journey-step-card {
flex: 1;
display: flex;
gap: 16px;
align-items: flex-start;
padding: 18px 22px;
border-radius: var(--radius-md);
background: var(--white);
border: 1px solid var(--slate-100);
transition: transform .45s cubic-bezier(.22, 1, .36, 1),
box-shadow .4s ease,
border-color .35s ease;
}
.journey-step:hover .journey-step-card {
transform: translateX(6px);
border-color: rgba(212, 160, 23, .45);
box-shadow: 0 18px 38px rgba(10, 31, 61, .1),
0 4px 12px rgba(212, 160, 23, .12);
}
.journey-step-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(212, 160, 23, .12), rgba(231, 184, 65, .22));
color: var(--gold-500);
display: flex;
align-items: center;
justify-content: center;
transition: transform .45s cubic-bezier(.34, 1.56, .64, 1),
background .35s ease,
color .35s ease;
}
.journey-step-icon svg { width: 20px; height: 20px; }
.journey-step:hover .journey-step-icon {
transform: rotate(-8deg) scale(1.06);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
}
.journey-step-text { min-width: 0; }
.journey-step-text h4 {
margin: 0 0 4px;
font-size: 1.05rem;
color: var(--navy-900);
transition: color .35s ease;
}
.journey-step:hover .journey-step-text h4 { color: var(--navy-900); }
.journey-step-text p {
margin: 0;
color: var(--slate-500);
font-size: 13.5px;
line-height: 1.6;
}
/* Mobile */
@media (max-width: 900px) {
.purpose-grid { grid-template-columns: 1fr; gap: 24px; }
.purpose-card { padding: 36px 28px 84px; min-height: auto; }
.purpose-title { font-size: 1.45rem; }
.approach-layout { grid-template-columns: 1fr; gap: 40px; }
.approach-content { max-width: none; }
}
@media (max-width: 540px) {
.journey-step { gap: 16px; }
.journey-step-num { width: 48px; height: 48px; font-size: .95rem; }
.journey-steps::before { left: 23px; }
.journey-step-card { padding: 16px 18px; gap: 12px; }
.journey-step-icon { width: 36px; height: 36px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.purpose-card,
.purpose-card *,
.purpose-icon-ring,
.journey-step,
.approach-journey.visible .journey-step,
.approach-journey.visible .journey-steps::before,
.journey-step *,
.journey-step-num-glow {
animation: none !important;
transition: none !important;
transform: none !important;
}
.approach-journey.visible .journey-steps::before {
transform: scaleY(1) !important;
opacity: 1;
}
.approach-journey.visible .journey-step {
opacity: 1;
transform: none !important;
}
.purpose-card:hover { transform: none; }
}
/* ===================== CTA STRIP ===================== */
.cta-strip {
background:
radial-gradient(ellipse at top right, rgba(212, 160, 23, .25), transparent 60%),
linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
color: var(--white);
padding: 60px 0;
position: relative;
overflow: hidden;
}
.cta-strip::before {
content: '';
position: absolute;
inset: 0;
background-image: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
.cta-strip .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
position: relative;
z-index: 2;
}
.cta-strip h2 { color: var(--white); margin: 0 0 8px; }
.cta-strip p { color: rgba(255, 255, 255, .8); margin: 0; max-width: 600px; }
/* =====================================================
TRUST CARDS (Why Choose Us — Reasons grid)
Layered "shadow card" hover, spinning icon, outlined number
===================================================== */
.trust-section { position: relative; }
.trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 6px 8px 24px;
}
.trust-card {
position: relative;
isolation: isolate;
opacity: 0;
transform: translateY(30px);
transition: opacity .7s ease,
transform .7s cubic-bezier(.22, 1, .36, 1);
}
.trust-grid.visible .trust-card {
opacity: 1;
transform: translateY(0);
transition-delay: calc(var(--i, 0) * .08s);
}
/* Gold "shadow card" sliding out from behind */
.trust-card-shadow {
position: absolute;
inset: 12px -6px -6px 6px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 60%, #f4cc55 100%);
opacity: 0;
z-index: -1;
pointer-events: none;
transition: inset .55s cubic-bezier(.22, 1, .36, 1),
opacity .45s ease;
}
.trust-card:hover .trust-card-shadow {
inset: 22px -16px -16px 16px;
opacity: 1;
}
.trust-card-inner {
position: relative;
padding: 36px 32px 30px;
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--slate-100);
height: 100%;
display: flex;
flex-direction: column;
z-index: 1;
transition: transform .55s cubic-bezier(.22, 1, .36, 1),
box-shadow .5s ease,
border-color .35s ease;
}
.trust-card:hover .trust-card-inner {
transform: translate(-6px, -6px);
border-color: rgba(212, 160, 23, .4);
box-shadow: 0 30px 60px rgba(10, 31, 61, .14);
}
.trust-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 26px;
}
/* Icon — does a full Y-flip on hover */
.trust-card-icon {
width: 60px;
height: 60px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(10, 31, 61, .04), rgba(43, 90, 158, .1));
color: var(--navy-700);
display: flex;
align-items: center;
justify-content: center;
transition: transform .75s cubic-bezier(.65, 0, .35, 1),
background .4s ease,
color .4s ease,
box-shadow .4s ease;
backface-visibility: hidden;
}
.trust-card-icon svg { width: 28px; height: 28px; }
.trust-card:hover .trust-card-icon {
transform: rotateY(360deg);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
box-shadow: 0 12px 26px rgba(212, 160, 23, .35);
}
/* Big outlined number top-right */
.trust-card-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 3rem;
line-height: 1;
letter-spacing: -.04em;
color: transparent;
-webkit-text-stroke: 1.6px var(--slate-200);
transition: -webkit-text-stroke-color .5s ease,
color .5s ease,
transform .55s cubic-bezier(.22, 1, .36, 1);
}
.trust-card:hover .trust-card-num {
-webkit-text-stroke-color: transparent;
color: var(--gold-500);
transform: scale(1.1);
}
.trust-card-title {
margin: 0 0 12px;
font-size: 1.2rem;
color: var(--navy-900);
transition: color .35s ease, transform .4s ease;
}
.trust-card:hover .trust-card-title {
color: var(--navy-900);
transform: translateX(2px);
}
.trust-card-desc {
margin: 0 0 24px;
color: var(--slate-500);
font-size: 14.5px;
line-height: 1.65;
flex: 1;
}
/* Animated gold underline */
.trust-card-line {
display: block;
width: 36px;
height: 3px;
background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
border-radius: 2px;
transition: width .65s cubic-bezier(.65, 0, .35, 1);
}
.trust-card:hover .trust-card-line {
width: 100%;
}
/* =====================================================
STATS SPOTLIGHT (Why Choose Us — By the Numbers)
Glassmorphism cards, gradient counters, JS count-up
===================================================== */
.stats-spotlight {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #061226 0%, #0a1f3d 50%, #102b50 100%);
color: rgba(255, 255, 255, .85);
isolation: isolate;
}
.stats-spotlight .section-head { position: relative; z-index: 1; }
.stats-spotlight .container { position: relative; z-index: 1; }
.stats-spotlight-bg {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.stats-orb {
position: absolute;
border-radius: 50%;
filter: blur(85px);
}
.stats-orb-a {
top: -130px;
left: -100px;
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(212, 160, 23, .4), transparent 70%);
opacity: .7;
animation: statsOrbA 14s ease-in-out infinite;
}
.stats-orb-b {
bottom: -140px;
right: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(43, 90, 158, .55), transparent 70%);
opacity: .8;
animation: statsOrbB 18s ease-in-out infinite;
}
@keyframes statsOrbA {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(40px, 30px) scale(1.12); }
}
@keyframes statsOrbB {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-50px, -30px) scale(.92); }
}
.stats-grid-overlay {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, .045) 1.2px, transparent 1.6px);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse at center, black 0%, black 55%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, black 55%, transparent 95%);
}
.eyebrow-gold { color: var(--gold-400); }
.stats-title { color: var(--white); }
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 50px;
}
.stat-card {
position: relative;
padding: 36px 28px 30px;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
text-align: center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
overflow: hidden;
isolation: isolate;
opacity: 0;
transform: translateY(30px);
transition: opacity .7s ease,
transform .65s cubic-bezier(.22, 1, .36, 1),
background .45s ease,
border-color .45s ease,
box-shadow .55s ease;
}
.stats-grid.visible .stat-card {
opacity: 1;
transform: translateY(0);
transition:
opacity .7s ease calc(var(--i, 0) * .12s),
transform .65s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .12s),
background .45s ease,
border-color .45s ease,
box-shadow .55s ease;
}
.stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-500), var(--gold-400), transparent);
transform: translateX(-110%);
transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}
.stat-card:hover {
background: rgba(255, 255, 255, .07);
border-color: rgba(212, 160, 23, .4);
box-shadow:
0 30px 60px rgba(0, 0, 0, .35),
0 0 0 1px rgba(212, 160, 23, .15);
}
.stat-card:hover::before { transform: translateX(110%); }
.stat-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(212, 160, 23, .14), rgba(231, 184, 65, .26));
color: var(--gold-400);
margin-bottom: 18px;
border: 1px solid rgba(212, 160, 23, .3);
transition: transform .45s cubic-bezier(.34, 1.56, .64, 1),
background .35s ease,
color .35s ease;
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-card:hover .stat-icon {
transform: rotate(-8deg) scale(1.1);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
}
.stat-value {
font-family: var(--font-display);
font-size: 3.4rem;
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
background: linear-gradient(135deg, #ffffff 0%, var(--gold-400) 60%, var(--gold-500) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-divider {
display: block;
width: 28px;
height: 2px;
background: var(--gold-400);
margin: 14px auto;
border-radius: 2px;
transition: width .45s ease, background .35s ease;
}
.stat-card:hover .stat-divider {
width: 48px;
}
.stat-label {
font-size: 12.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .82);
font-weight: 600;
}
/* =====================================================
CTA STRIP PREMIUM (Why Choose Us — bottom CTA)
Modifier on .cta-strip — adds orbs, pulse dot, fancy button
===================================================== */
.cta-strip-premium {
padding: 76px 0;
background:
radial-gradient(ellipse at top right, rgba(212, 160, 23, .28), transparent 55%),
radial-gradient(ellipse at bottom left, rgba(43, 90, 158, .35), transparent 60%),
linear-gradient(135deg, #061226 0%, var(--navy-900) 50%, var(--navy-700) 100%);
isolation: isolate;
}
.cta-strip-premium .container { z-index: 2; }
.cta-strip-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.cta-strip-orb {
position: absolute;
border-radius: 50%;
filter: blur(70px);
}
.cta-strip-orb-a {
top: -110px;
right: 8%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(212, 160, 23, .55), transparent 70%);
opacity: .65;
animation: ctaOrbA 12s ease-in-out infinite;
}
.cta-strip-orb-b {
bottom: -130px;
left: 6%;
width: 340px;
height: 340px;
background: radial-gradient(circle, rgba(43, 90, 158, .6), transparent 70%);
opacity: .7;
animation: ctaOrbB 15s ease-in-out infinite;
}
@keyframes ctaOrbA {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-26px, 22px) scale(1.1); }
}
@keyframes ctaOrbB {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(30px, -22px) scale(.92); }
}
.cta-strip-rays {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 24px 24px;
mask-image: radial-gradient(ellipse at center, black 25%, transparent 85%);
-webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 85%);
}
/* Live badge */
.cta-strip-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(212, 160, 23, .14);
border: 1px solid rgba(212, 160, 23, .35);
color: var(--gold-400);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 14px;
}
.cta-strip-badge-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold-400);
box-shadow: 0 0 0 0 rgba(212, 160, 23, .55);
animation: ctaDotPulse 2s ease-out infinite;
}
@keyframes ctaDotPulse {
0% { box-shadow: 0 0 0 0 rgba(212, 160, 23, .55); }
70% { box-shadow: 0 0 0 10px rgba(212, 160, 23, 0); }
100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}
.cta-strip-content {
flex: 1;
min-width: 260px;
}
.cta-strip-content h2 {
font-size: clamp(1.6rem, 2.4vw, 2.1rem);
line-height: 1.2;
}
/* Premium button — icon rotates and slides on hover */
.cta-strip-btn {
position: relative;
overflow: hidden;
padding: 16px 22px 16px 26px;
gap: 14px;
box-shadow: 0 18px 38px rgba(212, 160, 23, .35);
}
.cta-strip-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg,
transparent 0%,
transparent 40%,
rgba(255, 255, 255, .3) 50%,
transparent 60%,
transparent 100%);
transform: translateX(-100%);
transition: transform .85s cubic-bezier(.65, 0, .35, 1);
pointer-events: none;
}
.cta-strip-btn:hover::before { transform: translateX(100%); }
.cta-strip-btn-text { position: relative; z-index: 1; }
.cta-strip-btn-icon {
position: relative;
z-index: 1;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(10, 31, 61, .18);
transition: transform .55s cubic-bezier(.34, 1.56, .64, 1),
background .35s ease;
}
.cta-strip-btn-icon svg { width: 14px; height: 14px; }
.cta-strip-btn:hover .cta-strip-btn-icon {
transform: translateX(3px) rotate(360deg);
background: rgba(10, 31, 61, .32);
}
/* Mobile */
@media (max-width: 768px) {
.trust-card-inner { padding: 30px 24px 26px; }
.trust-card-num { font-size: 2.4rem; }
.stats-grid { gap: 16px; margin-top: 36px; }
.stat-card { padding: 30px 22px 26px; }
.stat-value { font-size: 2.8rem; }
.cta-strip-premium { padding: 56px 0; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.trust-card,
.trust-card *,
.stat-card,
.stat-card *,
.stats-orb,
.cta-strip-orb,
.cta-strip-badge-dot,
.cta-strip-btn::before,
.trust-grid.visible .trust-card,
.stats-grid.visible .stat-card {
animation: none !important;
transition: none !important;
transform: none !important;
}
.trust-card:hover .trust-card-inner,
.stat-card:hover,
.cta-strip-btn:hover .cta-strip-btn-icon {
transform: none !important;
}
.trust-card-shadow { display: none; }
}
/* =====================================================
FEATURE TILES (Category pages — Coverage Features)
Rounded-square icon with pulsing rings, corner arrow,
soft gold corner glow, animated footer line + label
===================================================== */
/* ===================== COVERAGE FEATURES — REDESIGNED GRID ===================== */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 28px;
perspective: 1600px;
}
.feature-card {
position: relative;
overflow: hidden;
padding: 38px 32px 28px;
border-radius: 24px;
background: var(--white);
border: 1px solid var(--slate-100);
isolation: isolate;
display: flex;
flex-direction: column;
min-height: 340px;
opacity: 0;
transform: translateY(48px) rotateX(10deg);
transform-origin: 50% 100%;
transform-style: preserve-3d;
transition:
opacity .8s cubic-bezier(.22, 1, .36, 1),
transform .85s cubic-bezier(.22, 1, .36, 1),
border-color .5s ease,
box-shadow .55s ease;
}
.feature-grid.visible .feature-card {
opacity: 1;
transform: translateY(0) rotateX(0);
transition:
opacity .95s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .1s),
transform .95s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .1s),
border-color .5s ease,
box-shadow .55s ease;
}
.feature-card:hover {
transform: translateY(-12px) rotateX(-2deg);
border-color: rgba(212, 160, 23, .55);
box-shadow:
0 32px 60px rgba(10, 31, 61, .16),
0 12px 28px rgba(212, 160, 23, .18);
}
/* Layered ambient backdrop — fades in on hover */
.feature-card-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .14), transparent 55%),
radial-gradient(circle at 0% 100%, rgba(30, 90, 168, .1), transparent 50%);
opacity: 0;
transition: opacity .55s ease;
pointer-events: none;
z-index: -2;
}
.feature-card:hover .feature-card-bg { opacity: 1; }
/* Diagonal sheen that sweeps across on hover */
.feature-card-stripe {
position: absolute;
top: 0;
left: -55%;
width: 45%;
height: 100%;
background: linear-gradient(110deg,
transparent 0%,
rgba(212, 160, 23, .08) 35%,
rgba(212, 160, 23, .2) 50%,
rgba(212, 160, 23, .08) 65%,
transparent 100%);
transform: skewX(-18deg);
transition: left .95s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
z-index: -1;
}
.feature-card:hover .feature-card-stripe { left: 120%; }
/* Subtle dotted texture in the top-right */
.feature-card-grain {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(10, 31, 61, .06) 1px, transparent 1.5px);
background-size: 18px 18px;
-webkit-mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 55%);
mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 55%);
pointer-events: none;
z-index: -1;
opacity: .65;
}
/* Large editorial-style number badge in the corner */
.feature-card-num {
position: absolute;
top: 22px;
right: 28px;
font-size: 42px;
font-weight: 800;
line-height: 1;
letter-spacing: -.04em;
background: linear-gradient(135deg, var(--slate-100), var(--slate-200));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
transition:
transform .55s cubic-bezier(.22, 1, .36, 1),
background .4s ease,
opacity .4s ease;
z-index: 2;
}
.feature-card:hover .feature-card-num {
transform: translateY(-4px) scale(1.1);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
-webkit-background-clip: text;
background-clip: text;
}
/* 3D icon container — deep navy resting, gold on hover */
.feature-card-icon {
position: relative;
width: 74px;
height: 74px;
border-radius: 22px;
margin-bottom: 26px;
background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
color: var(--gold-500);
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 14px 28px -8px rgba(10, 31, 61, .4),
0 0 0 1px rgba(255, 255, 255, .08) inset,
0 -6px 16px -4px rgba(0, 0, 0, .3) inset;
transform-style: preserve-3d;
transition:
transform .65s cubic-bezier(.34, 1.56, .64, 1),
border-radius .5s ease,
box-shadow .5s ease,
background .5s ease,
color .5s ease;
}
.feature-card:hover .feature-card-icon {
transform: translateZ(24px) rotateY(14deg) rotateX(-6deg) scale(1.08);
border-radius: 18px 30px 22px 28px;
background: linear-gradient(135deg, var(--gold-500) 0%, var(--gold-400) 100%);
color: var(--navy-900);
box-shadow:
0 24px 42px -8px rgba(212, 160, 23, .55),
0 0 0 1px rgba(255, 255, 255, .25) inset,
0 -8px 16px -4px rgba(180, 130, 0, .45) inset;
}
.feature-card-icon svg {
width: 32px;
height: 32px;
position: relative;
z-index: 2;
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.feature-card:hover .feature-card-icon svg {
transform: rotate(-6deg);
}
/* Glowing aura behind the icon */
.feature-card-icon-orb {
position: absolute;
inset: -28%;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 160, 23, .55) 0%, transparent 60%);
filter: blur(16px);
opacity: 0;
transition: opacity .55s ease;
pointer-events: none;
}
.feature-card:hover .feature-card-icon-orb { opacity: 1; }
/* Dashed rotating ring outside the icon */
.feature-card-icon-ring {
position: absolute;
inset: -10%;
border-radius: 26px;
border: 2px dashed rgba(212, 160, 23, .45);
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
}
.feature-card:hover .feature-card-icon-ring {
opacity: 1;
animation: featureCardRingSpin 9s linear infinite;
}
@keyframes featureCardRingSpin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
/* Single-pass shine sweep across the icon on hover */
.feature-card-icon-shine {
position: absolute;
top: -50%;
left: -60%;
width: 60%;
height: 200%;
background: linear-gradient(110deg,
transparent 0%,
rgba(255, 255, 255, .55) 50%,
transparent 100%);
transform: rotate(20deg);
transition: left .9s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
border-radius: 22px;
z-index: 1;
}
.feature-card:hover .feature-card-icon-shine { left: 130%; }
.feature-card-body {
flex: 1;
position: relative;
z-index: 1;
}
.feature-card-title {
margin: 0 0 10px;
font-size: 1.22rem;
color: var(--navy-900);
letter-spacing: -.01em;
transition: transform .5s cubic-bezier(.22, 1, .36, 1), color .35s ease;
}
.feature-card:hover .feature-card-title {
transform: translateX(3px);
}
.feature-card-desc {
margin: 0 0 22px;
color: var(--slate-500);
font-size: 14.5px;
line-height: 1.65;
}
.feature-card-foot {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 18px;
border-top: 1px solid var(--slate-100);
transition: border-color .4s ease;
z-index: 1;
}
.feature-card:hover .feature-card-foot {
border-color: rgba(212, 160, 23, .4);
}
.feature-card-cta-text {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--slate-400);
transition: color .35s ease, letter-spacing .45s ease, transform .5s ease;
}
.feature-card:hover .feature-card-cta-text {
color: var(--gold-500);
letter-spacing: .2em;
transform: translateX(2px);
}
.feature-card-cta-arrow {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--slate-50);
color: var(--slate-400);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition:
background .45s ease,
color .45s ease,
box-shadow .45s ease,
transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.feature-card-cta-arrow svg {
width: 15px;
height: 15px;
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.feature-card:hover .feature-card-cta-arrow {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
box-shadow: 0 12px 24px -4px rgba(212, 160, 23, .5);
transform: scale(1.06);
}
.feature-card:hover .feature-card-cta-arrow svg {
transform: translateX(4px);
}
/* =====================================================
SECTION BENEFITS — distinct tinted background for
the Why It Matters section on category pages
===================================================== */
.section-benefits {
position: relative;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(ellipse 800px 500px at 90% 0%, rgba(212, 160, 23, .07), transparent 60%),
radial-gradient(ellipse 700px 500px at 0% 100%, rgba(43, 90, 158, .08), transparent 60%),
linear-gradient(180deg, #f3f6fb 0%, #eaeff7 100%);
}
.section-benefits::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(10, 31, 61, .05) 1.2px, transparent 1.6px);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 80%);
pointer-events: none;
z-index: 0;
}
.section-benefits .container {
position: relative;
z-index: 1;
}
/* Decorative gradient blobs — gentle drift animation */
.section-benefits-blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
}
.section-benefits-blob-a {
top: -120px;
right: -80px;
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(212, 160, 23, .22), transparent 70%);
animation: benefitsBlobA 14s ease-in-out infinite;
}
.section-benefits-blob-b {
bottom: -140px;
left: -100px;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(43, 90, 158, .22), transparent 70%);
animation: benefitsBlobB 17s ease-in-out infinite;
}
@keyframes benefitsBlobA {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px, 25px) scale(1.08); }
}
@keyframes benefitsBlobB {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(28px, -22px) scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
.section-benefits-blob {
animation: none !important;
}
}
/* =====================================================
BENEFITS GRID (Category pages — Why It Matters)
Multi-column cards with diamond icon, left spine accent,
bottom-right chevron indicator
===================================================== */
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
gap: 22px;
}
.benefit-card {
position: relative;
overflow: hidden;
padding: 32px 32px 68px;
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--slate-100);
isolation: isolate;
display: flex;
flex-direction: column;
min-height: 250px;
opacity: 0;
transform: translateY(28px);
transition: opacity .65s ease,
transform .65s cubic-bezier(.22, 1, .36, 1),
box-shadow .5s ease,
border-color .35s ease,
background .5s ease;
}
.benefits-grid.visible .benefit-card {
opacity: 1;
transform: translateY(0);
transition:
opacity .65s ease calc(var(--i, 0) * .08s),
transform .65s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .08s),
box-shadow .5s ease,
border-color .35s ease,
background .5s ease;
}
.benefit-card:hover {
transform: translateY(-8px);
border-color: rgba(212, 160, 23, .4);
box-shadow:
0 26px 56px rgba(10, 31, 61, .13),
0 8px 20px rgba(212, 160, 23, .15);
}
/* Left spine accent — vertical gold bar that extends on hover */
.benefit-card-spine {
position: absolute;
top: 28px;
bottom: 28px;
left: 0;
width: 3px;
border-radius: 0 2px 2px 0;
background: linear-gradient(180deg, var(--gold-500), var(--gold-400));
opacity: .55;
transform: scaleY(.35);
transform-origin: center;
transition: transform .55s cubic-bezier(.65, 0, .35, 1),
opacity .35s ease;
z-index: 2;
}
.benefit-card:hover .benefit-card-spine {
transform: scaleY(1);
opacity: 1;
}
/* Soft gold gradient glow in the bottom-right corner */
.benefit-card-glow {
position: absolute;
bottom: -80px;
right: -80px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(231, 184, 65, .32), transparent 65%);
opacity: 0;
pointer-events: none;
z-index: 0;
transition: opacity .55s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}
.benefit-card:hover .benefit-card-glow {
opacity: 1;
transform: translate(8px, -10px) scale(1.05);
}
/* Diamond icon container (rotated square) */
.benefit-card-icon {
position: relative;
width: 56px;
height: 56px;
margin-bottom: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.benefit-card-icon-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(212, 160, 23, .14), rgba(231, 184, 65, .26));
border-radius: 12px;
transform: rotate(45deg);
transition: transform .65s cubic-bezier(.65, 0, .35, 1),
background .4s ease,
border-radius .4s ease,
box-shadow .4s ease;
z-index: 0;
}
.benefit-card-icon svg {
position: relative;
width: 26px;
height: 26px;
color: var(--gold-500);
z-index: 1;
transition: color .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.benefit-card:hover .benefit-card-icon-bg {
transform: rotate(90deg);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
border-radius: 16px;
box-shadow: 0 14px 28px rgba(212, 160, 23, .35);
}
.benefit-card:hover .benefit-card-icon svg {
color: var(--navy-900);
transform: scale(1.05);
}
.benefit-card-title {
position: relative;
z-index: 1;
margin: 0 0 10px;
font-size: 1.18rem;
color: var(--navy-900);
letter-spacing: -.005em;
transition: transform .4s ease;
}
.benefit-card:hover .benefit-card-title {
transform: translateX(2px);
}
.benefit-card-desc {
position: relative;
z-index: 1;
margin: 0;
color: var(--slate-500);
font-size: 14.5px;
line-height: 1.65;
flex: 1;
}
/* Bottom-right chevron indicator */
.benefit-card-chevron {
position: absolute;
bottom: 26px;
right: 28px;
width: 34px;
height: 34px;
border-radius: 50%;
border: 1.5px solid var(--slate-200);
color: var(--slate-400);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1),
border-color .4s ease,
background .4s ease,
color .4s ease,
box-shadow .4s ease;
}
.benefit-card-chevron svg {
width: 14px;
height: 14px;
transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.benefit-card:hover .benefit-card-chevron {
border-color: var(--gold-500);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
transform: scale(1.06);
box-shadow: 0 12px 24px rgba(212, 160, 23, .35);
}
.benefit-card:hover .benefit-card-chevron svg {
transform: translateX(2px);
}
/* =====================================================
ACCORDION MODERN (Category pages — FAQ)
Modifier on .accordion — keeps existing JS toggle
===================================================== */
.accordion-modern .accordion-item {
position: relative;
background: var(--white);
border: 1px solid var(--slate-100);
border-radius: var(--radius-lg);
margin-bottom: 14px;
overflow: hidden;
isolation: isolate;
transition: border-color .4s ease,
box-shadow .4s ease,
transform .45s cubic-bezier(.22, 1, .36, 1);
}
.accordion-modern .accordion-item:hover {
transform: translateY(-2px);
border-color: rgba(212, 160, 23, .35);
box-shadow: 0 14px 32px rgba(10, 31, 61, .08);
}
.accordion-modern .accordion-item.open {
border-color: transparent;
box-shadow:
0 18px 40px rgba(10, 31, 61, .12),
0 0 0 1px rgba(212, 160, 23, .4);
transform: translateY(0);
}
/* Animated gold left accent — slides in on open */
.acc-accent {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background: linear-gradient(180deg, var(--gold-500), var(--gold-400));
transform: scaleY(0);
transform-origin: top center;
transition: transform .5s cubic-bezier(.65, 0, .35, 1);
z-index: 2;
pointer-events: none;
}
.accordion-modern .accordion-item.open .acc-accent {
transform: scaleY(1);
}
/* Header — slightly tighter, with gold gradient hover bg */
.accordion-modern .accordion-header {
padding: 22px 26px;
transition: background .4s ease, color .35s ease;
}
.accordion-modern .accordion-header:hover {
background: linear-gradient(90deg,
rgba(212, 160, 23, .06) 0%,
transparent 70%);
}
/* Question icon */
.accordion-modern .acc-icon {
background: linear-gradient(135deg, rgba(212, 160, 23, .12), rgba(231, 184, 65, .2));
color: var(--gold-500);
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1),
background .4s ease,
color .4s ease,
box-shadow .4s ease;
}
.accordion-modern .accordion-item:hover .acc-icon {
transform: rotate(-6deg) scale(1.04);
}
.accordion-modern .accordion-item.open .acc-icon {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
transform: rotate(0) scale(1);
box-shadow: 0 10px 22px rgba(212, 160, 23, .35);
}
/* Toggle — softer rotation, premium gradient on open */
.accordion-modern .acc-toggle {
background: var(--slate-100);
color: var(--navy-800);
transition: transform .5s cubic-bezier(.34, 1.56, .64, 1),
background .4s ease,
color .4s ease;
}
.accordion-modern .accordion-item.open .acc-toggle {
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: var(--white);
transform: rotate(135deg);
}
/* Body — fade + slight slide-down with inner content */
.accordion-modern .accordion-body {
transition: max-height .55s cubic-bezier(.65, 0, .35, 1);
}
.accordion-modern .accordion-body-inner {
padding: 4px 26px 28px 88px;
opacity: 0;
transform: translateY(-6px);
transition: opacity .4s ease,
transform .45s cubic-bezier(.22, 1, .36, 1);
}
.accordion-modern .accordion-item.open .accordion-body-inner {
opacity: 1;
transform: translateY(0);
transition-delay: .12s;
}
/* =====================================================
EXPLORE GRID (Category pages — Other Insurance Solutions)
Linked cards with layered "shadow" hover, arrow slide
===================================================== */
.explore-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 26px;
padding: 6px 8px 24px;
}
.explore-card {
position: relative;
text-decoration: none;
color: inherit;
isolation: isolate;
display: block;
opacity: 0;
transform: translateY(28px);
transition: opacity .65s ease,
transform .65s cubic-bezier(.22, 1, .36, 1);
}
.explore-grid.visible .explore-card {
opacity: 1;
transform: translateY(0);
transition-delay: calc(var(--i, 0) * .08s);
}
.explore-card-shadow {
position: absolute;
inset: 10px -6px -6px 6px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
opacity: 0;
z-index: -1;
pointer-events: none;
transition: inset .55s cubic-bezier(.22, 1, .36, 1),
opacity .45s ease;
}
.explore-card:hover .explore-card-shadow {
inset: 18px -14px -14px 14px;
opacity: 1;
}
.explore-card-inner {
position: relative;
padding: 32px 28px 26px;
border-radius: var(--radius-lg);
background: var(--white);
border: 1px solid var(--slate-100);
height: 100%;
display: flex;
flex-direction: column;
z-index: 1;
transition: transform .55s cubic-bezier(.22, 1, .36, 1),
box-shadow .5s ease,
border-color .35s ease;
overflow: hidden;
}
.explore-card:hover .explore-card-inner {
transform: translate(-5px, -5px);
border-color: rgba(212, 160, 23, .4);
box-shadow: 0 26px 52px rgba(10, 31, 61, .12);
}
/* Diagonal sheen */
.explore-card-inner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
transparent 50%,
rgba(212, 160, 23, .08) 100%);
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
}
.explore-card:hover .explore-card-inner::before { opacity: 1; }
.explore-card-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(10, 31, 61, .05), rgba(43, 90, 158, .1));
color: var(--navy-700);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: transform .55s cubic-bezier(.34, 1.56, .64, 1),
background .4s ease,
color .4s ease,
box-shadow .4s ease;
}
.explore-card-icon svg { width: 26px; height: 26px; }
.explore-card:hover .explore-card-icon {
transform: rotate(-6deg) scale(1.08);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
box-shadow: 0 12px 24px rgba(212, 160, 23, .3);
}
.explore-card-title {
margin: 0 0 8px;
font-size: 1.2rem;
color: var(--navy-900);
transition: color .35s ease;
}
.explore-card:hover .explore-card-title { color: var(--gold-500); }
.explore-card-desc {
margin: 0 0 18px;
color: var(--slate-500);
font-size: 14.5px;
line-height: 1.6;
flex: 1;
}
.explore-card-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--navy-800);
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
transition: color .35s ease, gap .35s ease;
margin-top: auto;
padding-top: 6px;
border-top: 1px solid var(--slate-100);
}
.explore-card-link svg {
width: 14px;
height: 14px;
transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.explore-card:hover .explore-card-link {
color: var(--gold-500);
gap: 12px;
}
.explore-card:hover .explore-card-link svg {
transform: translateX(6px);
}
/* Mobile */
@media (max-width: 720px) {
.feature-card { padding: 30px 26px 24px; min-height: auto; }
.feature-card-num { font-size: 34px; top: 18px; right: 22px; }
.feature-card-icon { width: 64px; height: 64px; margin-bottom: 22px; border-radius: 18px; }
.feature-card-icon svg { width: 28px; height: 28px; }
.feature-card-cta-arrow { width: 36px; height: 36px; }
.benefit-card { padding: 28px 26px 62px; min-height: 220px; }
.benefit-card-icon { width: 50px; height: 50px; margin-bottom: 18px; }
.benefit-card-icon svg { width: 22px; height: 22px; }
.benefit-card-chevron { width: 30px; height: 30px; bottom: 22px; right: 22px; }
.accordion-modern .accordion-body-inner { padding: 0 22px 22px 22px; }
.explore-card-inner { padding: 28px 24px 22px; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.feature-card,
.feature-card *,
.benefit-card,
.benefit-card *,
.accordion-modern .accordion-item,
.accordion-modern .accordion-item *,
.explore-card,
.explore-card *,
.feature-grid.visible .feature-card,
.benefits-grid.visible .benefit-card,
.explore-grid.visible .explore-card {
animation: none !important;
transition: opacity .4s ease !important;
transform: none !important;
}
.feature-card:hover,
.benefit-card:hover,
.explore-card:hover .explore-card-inner {
transform: none !important;
}
.feature-card-icon-ring,
.feature-card-stripe,
.feature-card-icon-shine,
.explore-card-shadow,
.benefit-card-glow {
display: none;
}
.benefit-card-spine {
transform: scaleY(1) !important;
opacity: 1;
}
.benefit-card-icon-bg {
transform: rotate(45deg) !important;
}
.accordion-modern .accordion-item.open .accordion-body-inner {
opacity: 1;
transform: none;
}
}
/* ===================== TWO COL ===================== */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.two-col-visual {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
background:
linear-gradient(135deg, rgba(10, 31, 61, .8), rgba(212, 160, 23, .4)),
url('data:image/svg+xml;utf8,');
background-size: cover, 50% 50%;
background-position: center, center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
box-shadow: var(--shadow-lg);
}
.two-col-visual svg { width: 90px; height: 90px; opacity: .9; }
/* Photo variant — used on insurance-solutions.php to show full marketing
posters instead of an SVG icon. The marketing posters have different
natural aspect ratios (some 4:3, some 3:2), so the frame is sized to
each image's intrinsic ratio — no cropping, no letterboxing. The image
animates in when the row scrolls into view and lifts + zooms on hover.
Built with prefers-reduced-motion in mind. */
.two-col-visual.two-col-visual-photo {
position: relative;
/* Override the 4/3 aspect ratio from .two-col-visual — let the image
drive the height so wide posters (e.g. Life Insurance) aren't cropped. */
aspect-ratio: auto;
height: auto;
background: #f3f5f8;
padding: 0;
overflow: hidden;
transition: transform .5s cubic-bezier(.2, .7, .2, 1),
box-shadow .5s ease;
will-change: transform;
}
.two-col-visual.two-col-visual-photo img {
width: 100%;
height: auto;
display: block;
/* Pre-reveal state — the entrance animation settles into the natural state. */
transform: scale(1.08);
opacity: 0;
filter: blur(6px) saturate(.9);
transition: transform 1s cubic-bezier(.2, .7, .2, 1),
opacity .9s ease,
filter .9s ease;
will-change: transform, opacity, filter;
}
/* The row carries .reveal; when it scrolls into view JS adds .visible,
which triggers the image's entrance animation. */
.reveal.visible .two-col-visual.two-col-visual-photo img {
transform: scale(1);
opacity: 1;
filter: blur(0) saturate(1);
}
/* Hover — lift the card, zoom the image, brighten it, and grow a gold ring. */
.two-col-visual.two-col-visual-photo:hover {
transform: translateY(-6px);
box-shadow: 0 28px 60px rgba(10, 31, 61, .28);
}
.two-col-visual.two-col-visual-photo:hover img {
transform: scale(1.06);
filter: saturate(1.1) brightness(1.03);
}
.two-col-visual.two-col-visual-photo::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: inset 0 0 0 0 rgba(212, 160, 23, 0);
transition: box-shadow .35s ease;
}
.two-col-visual.two-col-visual-photo:hover::after {
box-shadow: inset 0 0 0 3px rgba(212, 160, 23, .95);
}
/* Honor users who prefer reduced motion: no transforms, no blur fade-in. */
@media (prefers-reduced-motion: reduce) {
.two-col-visual.two-col-visual-photo,
.two-col-visual.two-col-visual-photo img,
.two-col-visual.two-col-visual-photo::after {
transition: none;
}
.two-col-visual.two-col-visual-photo img {
transform: none;
opacity: 1;
filter: none;
}
.two-col-visual.two-col-visual-photo:hover {
transform: none;
}
.two-col-visual.two-col-visual-photo:hover img {
transform: none;
}
}
/* ===================== CONTACT ===================== */
/* ===================== CONTACT PAGE — MODERN REDESIGN ===================== */
.cx-section-head { position: relative; text-align: center; }
.cx-live {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 14px 7px 12px;
border-radius: 99px;
background: rgba(16, 185, 129, .1);
color: #047857;
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 18px;
}
.cx-live::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
animation: cx-pulse 1.8s ease-out infinite;
}
@keyframes cx-pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
70% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.cx-stats {
display: flex;
justify-content: center;
gap: 0;
margin-top: 30px;
flex-wrap: wrap;
}
.cx-stat { text-align: center; padding: 0 32px; }
.cx-stat + .cx-stat { border-left: 1px solid var(--slate-200); }
.cx-stat .num {
display: block;
font-family: var(--font-display);
font-size: 1.85rem;
font-weight: 800;
line-height: 1;
background: linear-gradient(90deg, var(--navy-800), var(--gold-500));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -.02em;
}
.cx-stat .lbl {
display: block;
margin-top: 8px;
font-size: 11.5px;
color: var(--slate-500);
font-family: var(--font-display);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 32px;
margin-top: 56px;
}
/* INFO CARD */
.contact-info-card {
position: relative;
background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
color: var(--white);
border-radius: 22px;
padding: 44px 38px;
overflow: hidden;
box-shadow: 0 25px 60px -20px rgba(10, 31, 61, .55);
}
.contact-info-card::before {
content: '';
position: absolute;
top: -120px;
right: -120px;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(212, 160, 23, .28), transparent 65%);
border-radius: 50%;
animation: cx-drift 14s ease-in-out infinite;
}
.contact-info-card::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
background-size: 22px 22px;
pointer-events: none;
opacity: .55;
}
@keyframes cx-drift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-22px, 28px); }
}
.cx-info-status {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 5px 12px 5px 10px;
border-radius: 99px;
background: rgba(16, 185, 129, .18);
color: #6ee7b7;
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 18px;
}
.cx-info-status::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 0 rgba(16, 185, 129, .6);
animation: cx-pulse 1.8s ease-out infinite;
}
.contact-info-card h3 {
color: var(--white);
font-size: 1.7rem;
margin: 0 0 10px;
position: relative;
z-index: 1;
letter-spacing: -.01em;
}
.contact-info-card .lead {
color: rgba(255, 255, 255, .72);
margin: 0 0 30px;
position: relative;
z-index: 1;
font-size: 14.5px;
line-height: 1.6;
}
.contact-info-list {
list-style: none;
padding: 0;
margin: 0 0 28px;
position: relative;
z-index: 1;
}
.contact-info-list li {
position: relative;
display: flex;
align-items: flex-start;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid rgba(255, 255, 255, .08);
transition: transform .35s ease;
}
.contact-info-list li::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 1px;
background: linear-gradient(90deg, var(--gold-400), transparent);
transition: width .45s ease;
}
.contact-info-list li:hover { transform: translateX(4px); }
.contact-info-list li:hover::after { width: 80%; }
.contact-info-list li:last-child { border-bottom: 0; }
.contact-info-list li:last-child::after { display: none; }
.contact-info-list .ic {
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 12px;
background: linear-gradient(135deg, rgba(212, 160, 23, .24), rgba(212, 160, 23, .08));
color: var(--gold-400);
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(212, 160, 23, .26);
transition: all .4s ease;
}
.contact-info-list li:hover .ic {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
transform: rotate(-8deg) scale(1.05);
border-color: var(--gold-400);
}
.contact-info-list .ic svg { width: 19px; height: 19px; }
.contact-info-list .lbl {
display: block;
color: rgba(255, 255, 255, .55);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .14em;
margin-bottom: 5px;
}
.contact-info-list .val {
color: var(--white);
font-weight: 500;
font-size: 15px;
line-height: 1.55;
transition: color var(--transition);
}
.contact-info-list li:hover .val { color: var(--gold-400); }
.cx-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: 18px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
margin-bottom: 26px;
position: relative;
z-index: 1;
}
.cx-metric { text-align: center; padding: 2px 4px; }
.cx-metric + .cx-metric { border-left: 1px solid rgba(255, 255, 255, .08); }
.cx-metric .v {
display: block;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 800;
color: var(--gold-400);
line-height: 1;
letter-spacing: -.01em;
}
.cx-metric .l {
display: block;
margin-top: 7px;
font-size: 10.5px;
color: rgba(255, 255, 255, .55);
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
}
/* Trust / assurance badges (replaces the old vanity metrics) */
.cx-trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: 20px 10px;
border-radius: 14px;
background: rgba(255, 255, 255, .04);
border: 1px solid rgba(255, 255, 255, .08);
margin-bottom: 26px;
position: relative;
z-index: 1;
}
.cx-trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
padding: 2px 6px;
}
.cx-trust-item + .cx-trust-item { border-left: 1px solid rgba(255, 255, 255, .08); }
.cx-trust-ic {
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(212, 160, 23, .24), rgba(212, 160, 23, .08));
border: 1px solid rgba(212, 160, 23, .26);
color: var(--gold-400);
}
.cx-trust-ic svg { width: 19px; height: 19px; }
.cx-trust-l {
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
line-height: 1.3;
letter-spacing: .04em;
text-transform: uppercase;
color: rgba(255, 255, 255, .82);
}
.cx-socials {
display: flex;
gap: 10px;
position: relative;
z-index: 1;
}
.cx-socials a {
position: relative;
width: 42px;
height: 42px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .06);
color: var(--white);
border: 1px solid rgba(255, 255, 255, .1);
transition: all .35s ease;
overflow: hidden;
}
.cx-socials a::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
opacity: 0;
transition: opacity .35s ease;
}
.cx-socials a:hover::before { opacity: 1; }
.cx-socials a:hover {
color: var(--navy-900);
transform: translateY(-3px);
border-color: var(--gold-400);
}
.cx-socials a svg { width: 17px; height: 17px; position: relative; z-index: 1; }
/* ===================== REQUEST CONSULTATION — FRESH FORM ===================== */
.cf-card {
position: relative;
background: var(--white);
border-radius: 26px;
padding: 46px 42px 40px;
box-shadow: 0 28px 55px -22px rgba(15, 42, 82, .28);
overflow: hidden;
isolation: isolate;
}
/* Rotating conic gradient border */
.cf-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 26px;
padding: 2px;
background: conic-gradient(
from 0deg,
var(--gold-500),
var(--navy-700) 25%,
var(--gold-400) 50%,
var(--navy-800) 75%,
var(--gold-500)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: cf-spin 9s linear infinite;
z-index: -1;
pointer-events: none;
}
@keyframes cf-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.cf-card::after {
content: '';
position: absolute;
bottom: -120px;
right: -120px;
width: 280px;
height: 280px;
background: radial-gradient(circle, rgba(212, 160, 23, .14), transparent 70%);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* Floating particle motes */
.cf-particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
border-radius: 26px;
}
.cf-particles span {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: radial-gradient(circle, var(--gold-400), transparent 70%);
opacity: .4;
animation: cf-float 9s ease-in-out infinite;
}
.cf-particles span:nth-child(1) { top: 14%; left: 8%; animation-delay: 0s; }
.cf-particles span:nth-child(2) { top: 78%; left: 12%; animation-delay: 1.6s; }
.cf-particles span:nth-child(3) { top: 32%; right: 12%; animation-delay: 3.1s; }
.cf-particles span:nth-child(4) { top: 65%; right: 18%; animation-delay: 4.7s; }
.cf-particles span:nth-child(5) { top: 8%; right: 32%; animation-delay: 2.3s; }
.cf-particles span:nth-child(6) { top: 52%; left: 46%; animation-delay: 5.4s; }
@keyframes cf-float {
0%, 100% { transform: translateY(0) scale(1); opacity: .35; }
50% { transform: translateY(-28px) scale(1.35); opacity: .75; }
}
/* Form header */
.cf-head {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 30px;
z-index: 1;
}
.cf-head .cf-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--gold-500);
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 12px;
}
.cf-head .cf-eyebrow::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold-500);
box-shadow: 0 0 0 0 rgba(212, 160, 23, .6);
animation: cf-pulse 1.8s ease-out infinite;
}
@keyframes cf-pulse {
0% { box-shadow: 0 0 0 0 rgba(212, 160, 23, .55); }
70% { box-shadow: 0 0 0 10px rgba(212, 160, 23, 0); }
100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0); }
}
.cf-head h2 {
margin: 0 0 6px;
font-size: 1.8rem;
letter-spacing: -.01em;
}
.cf-head p {
margin: 0;
color: var(--slate-500);
font-size: 14.5px;
max-width: 380px;
}
.cf-step {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 99px;
background: linear-gradient(135deg, var(--navy-800), var(--navy-700));
color: var(--white);
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
box-shadow: 0 8px 16px -8px rgba(15, 42, 82, .45);
}
.cf-step svg { width: 13px; height: 13px; color: var(--gold-400); }
/* Form rows & fields */
.cf-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
position: relative;
z-index: 1;
}
.cf-field {
position: relative;
margin-bottom: 18px;
z-index: 1;
}
.cf-field .cf-icon {
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
color: var(--slate-500);
pointer-events: none;
transition: color .3s ease, transform .35s ease;
z-index: 2;
}
.cf-field .cf-icon svg { width: 18px; height: 18px; display: block; }
.cf-field.cf-textarea .cf-icon {
top: 22px;
transform: none;
}
.cf-field input,
.cf-field select,
.cf-field textarea {
width: 100%;
padding: 22px 16px 12px 48px;
border: 1.5px solid var(--slate-200);
border-radius: 14px;
font-family: var(--font-body);
font-size: 14.5px;
color: var(--navy-900);
background: var(--white);
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.cf-field textarea {
min-height: 140px;
resize: vertical;
padding: 26px 16px 16px 48px;
}
.cf-field label {
position: absolute;
top: 18px;
left: 46px;
padding: 0 6px;
font-family: var(--font-display);
font-size: 14.5px;
color: var(--slate-500);
pointer-events: none;
transition: top .22s ease, left .22s ease, font-size .22s ease, color .22s ease;
background: var(--white);
border-radius: 4px;
z-index: 1;
}
.cf-field.cf-textarea label { top: 22px; }
.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
outline: none;
border-color: var(--gold-500);
box-shadow: 0 0 0 4px rgba(212, 160, 23, .14);
background: #fffdf7;
}
.cf-field:focus-within .cf-icon {
color: var(--gold-500);
transform: translateY(-50%) scale(1.18);
}
.cf-field.cf-textarea:focus-within .cf-icon {
transform: scale(1.18);
}
.cf-field input:focus + label,
.cf-field input:not(:placeholder-shown) + label,
.cf-field textarea:focus + label,
.cf-field textarea:not(:placeholder-shown) + label,
.cf-field select:focus + label,
.cf-field select.has-value + label {
top: -8px;
left: 14px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-500);
}
/* Bottom underline that grows from center on focus */
.cf-field-underline {
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
border-radius: 2px;
transition: width .45s ease, left .45s ease;
pointer-events: none;
z-index: 2;
}
.cf-field:focus-within .cf-field-underline {
left: 6%;
width: 88%;
}
/* Custom chevron for select */
.cf-field.cf-select .cf-chev {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: var(--slate-500);
transition: transform .3s ease, color .3s ease;
z-index: 2;
}
.cf-field.cf-select .cf-chev svg { width: 16px; height: 16px; display: block; }
.cf-field.cf-select:focus-within .cf-chev {
color: var(--gold-500);
transform: translateY(-50%) rotate(180deg);
}
/* Form message */
.cf-msg {
position: relative;
z-index: 1;
padding: 14px 18px;
border-radius: 12px;
margin-bottom: 18px;
font-size: 14.5px;
}
.cf-msg.success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.cf-msg.error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
/* Submit button — multi-effect */
.cf-submit {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 18px 30px;
border: 0;
border-radius: 16px;
color: var(--white);
font-family: var(--font-display);
font-weight: 800;
font-size: 15.5px;
letter-spacing: .04em;
cursor: pointer;
overflow: hidden;
transition: transform .3s ease, box-shadow .3s ease;
box-shadow: 0 16px 32px -10px rgba(15, 42, 82, .55);
isolation: isolate;
background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 50%, var(--navy-900) 100%);
background-size: 220% 100%;
animation: cf-shift 8s ease-in-out infinite;
margin-top: 8px;
}
@keyframes cf-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.cf-submit::before {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 70%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(212, 160, 23, .35) 30%,
rgba(255, 255, 255, .35) 50%,
rgba(212, 160, 23, .35) 70%,
transparent 100%
);
transform: skewX(-22deg);
transition: left .9s cubic-bezier(.4, 0, .2, 1);
z-index: 1;
}
.cf-submit:hover::before { left: 150%; }
.cf-submit:hover {
transform: translateY(-3px);
box-shadow: 0 24px 42px -12px rgba(15, 42, 82, .65);
}
.cf-submit span,
.cf-submit > svg {
position: relative;
z-index: 2;
}
.cf-submit > svg {
width: 17px;
height: 17px;
transition: transform .4s ease;
}
.cf-submit:hover > svg { transform: translate(4px, -4px) rotate(12deg); }
/* Sparkle particles flying up on hover */
.cf-submit .cf-spark {
position: absolute;
width: 5px;
height: 5px;
background: var(--gold-400);
border-radius: 50%;
opacity: 0;
z-index: 2;
box-shadow: 0 0 10px var(--gold-400);
pointer-events: none;
bottom: 30%;
}
.cf-submit:hover .cf-spark { animation: cf-spark 1.1s ease-out forwards; }
.cf-submit .cf-spark.s1 { left: 16%; animation-delay: 0s !important; }
.cf-submit .cf-spark.s2 { left: 32%; animation-delay: .1s !important; }
.cf-submit .cf-spark.s3 { left: 56%; animation-delay: .18s !important; }
.cf-submit .cf-spark.s4 { left: 74%; animation-delay: .26s !important; }
.cf-submit .cf-spark.s5 { left: 88%; animation-delay: .34s !important; }
@keyframes cf-spark {
0% { opacity: 0; transform: translateY(0) scale(.4); }
20% { opacity: 1; transform: translateY(-18px) scale(1); }
100% { opacity: 0; transform: translateY(-58px) scale(.3); }
}
/* Fine print */
.cf-fineprint {
margin: 22px 0 0;
font-size: 12.5px;
color: var(--slate-500);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
z-index: 1;
}
.cf-fineprint svg { width: 14px; height: 14px; color: var(--gold-500); flex-shrink: 0; }
@media (max-width: 600px) {
.cf-card { padding: 36px 22px 30px; }
.cf-head { flex-direction: column; gap: 10px; }
.cf-step { align-self: flex-start; }
.cf-row { grid-template-columns: 1fr; gap: 0; }
.cf-submit { font-size: 14px; padding: 16px 24px; }
}
/* MAP / VISIT OUR OFFICE */
/* Location: real Google Maps embed with the office card overlaid on desktop,
and stacked beneath the map on tablet/mobile. */
.cx-location { position: relative; }
.cx-map {
position: relative;
border-radius: 24px;
overflow: hidden;
aspect-ratio: 16/7;
min-height: 380px;
background: var(--slate-100); /* placeholder while the map loads */
box-shadow: 0 30px 60px -20px rgba(10, 31, 61, .55);
}
.cx-map-frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.cx-pin {
position: absolute;
top: 50%;
left: 28%;
transform: translate(-50%, -50%);
z-index: 2;
}
.cx-pin-icon {
position: relative;
width: 58px;
height: 58px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
display: flex;
align-items: center;
justify-content: center;
color: var(--navy-900);
box-shadow: 0 14px 28px -8px rgba(212, 160, 23, .65);
animation: cx-bob 3s ease-in-out infinite;
}
.cx-pin-icon svg { width: 26px; height: 26px; }
.cx-pin .ring,
.cx-pin .ring-2 {
position: absolute;
top: 50%;
left: 50%;
width: 58px;
height: 58px;
border-radius: 50%;
border: 2px solid rgba(212, 160, 23, .55);
transform: translate(-50%, -50%);
animation: cx-ring 2.8s ease-out infinite;
pointer-events: none;
}
.cx-pin .ring-2 { animation-delay: 1.4s; }
@keyframes cx-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes cx-ring {
0% { width: 58px; height: 58px; opacity: .8; }
100% { width: 240px; height: 240px; opacity: 0; }
}
.cx-dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold-400);
box-shadow: 0 0 12px var(--gold-400);
z-index: 1;
}
.cx-dot.d1 { top: 22%; left: 62%; animation: cx-twinkle 3s ease-in-out infinite; }
.cx-dot.d2 { top: 72%; left: 52%; animation: cx-twinkle 4s ease-in-out infinite .6s; }
.cx-dot.d3 { top: 36%; left: 80%; animation: cx-twinkle 3.4s ease-in-out infinite 1.1s; }
.cx-dot.d4 { top: 60%; left: 70%; animation: cx-twinkle 4.2s ease-in-out infinite 1.8s; }
@keyframes cx-twinkle {
0%, 100% { opacity: .25; transform: scale(.8); }
50% { opacity: 1; transform: scale(1.15); }
}
.cx-office {
position: absolute;
bottom: 32px;
right: 32px;
width: min(380px, 50%);
background: var(--white);
border-radius: 18px;
padding: 26px 28px;
box-shadow: 0 22px 45px -12px rgba(10, 31, 61, .4);
z-index: 3;
border: 1px solid rgba(255, 255, 255, .6);
}
.cx-office .tag {
display: inline-block;
padding: 4px 11px;
border-radius: 99px;
background: var(--gold-100);
color: #8b6914;
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 12px;
}
.cx-office h4 {
margin: 0 0 10px;
font-size: 1.2rem;
color: var(--navy-900);
letter-spacing: -.01em;
}
.cx-office .addr {
margin: 0 0 14px;
color: var(--slate-500);
font-size: 13.5px;
line-height: 1.5;
}
.cx-office .hours {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px 5px 10px;
border-radius: 99px;
background: rgba(16, 185, 129, .1);
color: #047857;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 18px;
}
.cx-office .hours::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
animation: cx-pulse 1.8s ease-out infinite;
}
.cx-office .ctas {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.cx-office .ctas a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: 10px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
transition: all var(--transition);
}
.cx-office .ctas a svg { width: 14px; height: 14px; }
.cx-office .ctas .primary {
background: var(--navy-800);
color: var(--white);
}
.cx-office .ctas .primary:hover {
background: var(--gold-500);
color: var(--navy-900);
transform: translateY(-2px);
}
.cx-office .ctas .ghost {
background: var(--slate-100);
color: var(--navy-800);
}
.cx-office .ctas .ghost:hover {
background: var(--navy-800);
color: var(--white);
transform: translateY(-2px);
}
@media (max-width: 1024px) {
.contact-grid { grid-template-columns: 1fr; gap: 28px; }
/* Map full-width; office card stacked cleanly beneath it. */
.cx-office {
position: static;
inset: auto;
width: auto;
margin: 22px 0 0;
}
.cx-map { aspect-ratio: auto; min-height: 300px; }
}
@media (max-width: 600px) {
.cx-stats { gap: 0; }
.cx-stat { padding: 0 18px; }
.cx-stat .num { font-size: 1.4rem; }
.contact-info-card,
.contact-form-card { padding: 32px 24px; }
.cx-row { grid-template-columns: 1fr; gap: 0; }
.cx-metrics { padding: 14px 6px; }
.cx-metric .v { font-size: 1rem; }
.cx-trust { padding: 16px 6px; }
.cx-trust-item { gap: 8px; padding: 2px 4px; }
.cx-trust-ic { width: 36px; height: 36px; }
.cx-trust-ic svg { width: 17px; height: 17px; }
.cx-trust-l { font-size: 10px; }
/* ===== Visit Our Office — real map on top, office card beneath =====
Phones get the interactive map as a compact banner, then a clean,
centred card with touch-friendly full-width actions below it. */
.cx-map {
aspect-ratio: auto;
min-height: 0;
height: 240px;
border-radius: 16px;
}
.cx-office {
margin: 16px 0 0; /* stacked below the map (position:static from ≤1024) */
padding: 26px 22px 28px;
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: 18px;
box-shadow: 0 18px 40px -16px rgba(10, 31, 61, .3);
text-align: center;
}
.cx-office .tag { margin-bottom: 12px; }
.cx-office h4 { font-size: 1.3rem; margin-bottom: 10px; }
.cx-office .addr {
font-size: 14px;
line-height: 1.65;
margin: 0 auto 16px;
max-width: 32ch;
}
.cx-office .hours { margin-bottom: 22px; }
/* Touch-friendly, full-width stacked actions */
.cx-office .ctas {
flex-direction: column;
gap: 12px;
}
.cx-office .ctas a {
width: 100%;
justify-content: center;
padding: 15px 18px;
font-size: 14px;
border-radius: 12px;
}
}
/* ===================== FAQ ===================== */
.faq-grid {
display: grid;
gap: 14px;
max-width: 880px;
margin: 0 auto;
}
/* ===================== FOOTER ===================== */
.site-footer {
background: #07172e;
color: rgba(255, 255, 255, .7);
padding: 70px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 48px;
padding-bottom: 50px;
}
.footer-logo-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 100%);
border: 1px solid rgba(212, 160, 23, .15);
border-radius: var(--radius-md);
padding: 20px 18px 18px;
margin-bottom: 22px;
text-decoration: none;
overflow: hidden;
box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* Continuous breathing gold glow behind the icon — slightly different cadence from header so they don't sync */
.footer-logo-card::before {
content: '';
position: absolute;
top: 50px;
left: 50%;
width: 150px;
height: 150px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 160, 23, .55), transparent 65%);
transform: translate(-50%, -50%) scale(.65);
opacity: 0;
filter: blur(22px);
pointer-events: none;
z-index: 0;
animation: footerLogoGlow 4.8s ease-in-out infinite;
}
@keyframes footerLogoGlow {
0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.65); }
50% { opacity: .9; transform: translate(-50%, -50%) scale(1); }
}
.footer-logo-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
border-color: rgba(212, 160, 23, .35);
}
.footer-logo-icon {
height: 56px;
width: auto;
display: block;
margin: 0 auto 8px;
object-fit: contain;
position: relative;
z-index: 1;
}
.footer-logo-text {
height: 28px;
width: auto;
max-width: 100%;
display: block;
margin: 0 auto;
object-fit: contain;
filter: brightness(0) invert(1);
position: relative;
z-index: 1;
}
.footer-logo-caption {
display: inline-block;
margin-top: 12px;
font-family: var(--font-display);
font-size: 9px;
font-weight: 600;
color: var(--gold-400);
letter-spacing: .26em;
line-height: 1.3;
text-transform: uppercase;
text-align: center;
position: relative;
padding: 0 24px;
white-space: nowrap;
z-index: 1;
}
.footer-logo-caption::before,
.footer-logo-caption::after {
content: '';
position: absolute;
top: 50%;
width: 14px;
height: 1px;
background: var(--gold-500);
border-radius: 2px;
opacity: .7;
}
.footer-logo-caption::before { left: 0; }
.footer-logo-caption::after { right: 0; }
.footer-brand p { font-size: 14.5px; line-height: 1.7; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
}
.footer-social a:hover {
background: var(--gold-500);
color: var(--navy-900);
transform: translateY(-3px);
}
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 {
color: var(--white);
font-size: 16px;
margin-bottom: 22px;
position: relative;
padding-bottom: 12px;
}
.footer-col h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 36px;
height: 2px;
background: var(--gold-500);
border-radius: 2px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
color: rgba(255, 255, 255, .65);
font-size: 14.5px;
display: inline-flex;
align-items: center;
gap: 7px;
transition: all var(--transition);
}
.footer-col ul a::before {
content: '›';
color: var(--gold-500);
font-weight: bold;
}
.footer-col ul a:hover { color: var(--white); transform: translateX(4px); }
.footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-contact-list li {
display: flex;
gap: 12px;
margin-bottom: 16px;
font-size: 14.5px;
}
.footer-contact-list svg {
width: 18px;
height: 18px;
color: var(--gold-500);
flex-shrink: 0;
margin-top: 3px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .08);
padding: 22px 0;
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 13.5px;
}
.footer-bottom a { color: rgba(255, 255, 255, .65); }
.footer-bottom a:hover { color: var(--gold-400); }
/* ===================== REVEAL ANIM ===================== */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ===================== UTILITIES ===================== */
.text-center { text-align: center; }
.mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.divider {
height: 3px;
width: 60px;
background: var(--gold-500);
margin: 18px 0;
border-radius: 2px;
}
.divider-center { margin: 18px auto; }
/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
.about-grid, .two-col, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
.logo { gap: 10px; }
.logo::before { width: 54px; height: 54px; }
.logo-icon { height: 48px; }
.logo-text { height: 30px; max-width: 200px; }
.logo-caption {
font-size: 7.5px;
letter-spacing: .08em;
padding-inline: 16px;
max-width: 200px;
line-height: 1.3;
}
.logo-caption::before,
.logo-caption::after { width: 12px; height: 1.2px; }
.mobile-toggle { display: inline-flex; }
/* ===== Drawer container ===== */
.main-nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 380px;
max-width: 92vw;
background: var(--white);
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
transform: translateX(100%);
transition: transform .4s cubic-bezier(.4, 0, .2, 1);
box-shadow: -24px 0 60px rgba(7, 23, 46, .35);
overflow: hidden;
border-radius: 18px 0 0 18px;
z-index: 100;
}
.main-nav.open { transform: translateX(0); }
/* ===== Drawer header (logo + caption + close) ===== */
.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 20px 18px 22px;
background:
radial-gradient(ellipse at 18% 20%, rgba(255, 255, 255, .18), transparent 60%),
radial-gradient(ellipse at 95% 100%, rgba(30, 90, 168, .35), transparent 60%),
linear-gradient(135deg, #07172e 0%, #0f2a52 60%, #0a1f3d 100%);
color: var(--white);
position: relative;
flex-shrink: 0;
}
.mobile-nav-header::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
pointer-events: none;
}
.mobile-nav-brand {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex: 1;
min-width: 0;
}
.mobile-nav-logo-icon {
height: 46px;
width: auto;
flex-shrink: 0;
filter: drop-shadow(0 4px 10px rgba(255, 255, 255, .25));
}
.mobile-nav-logo-block {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
}
.mobile-nav-logo-text {
height: 24px;
width: auto;
max-width: 100%;
display: block;
object-fit: contain;
filter: brightness(0) invert(1);
}
.mobile-nav-logo-caption {
font-family: var(--font-display);
font-size: 8px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255, 255, 255, .82);
position: relative;
padding-left: 18px;
white-space: nowrap;
}
.mobile-nav-logo-caption::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 12px;
height: 1.5px;
transform: translateY(-50%);
background: linear-gradient(to right, transparent, rgba(255, 255, 255, .85));
border-radius: 2px;
}
.mobile-nav-close {
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .18);
color: var(--white);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
padding: 0;
transition: all var(--transition);
}
.mobile-nav-close:hover,
.mobile-nav-close:focus-visible {
background: var(--white);
border-color: var(--white);
color: var(--navy-900);
transform: rotate(90deg);
outline: none;
}
.mobile-nav-close svg { width: 18px; height: 18px; }
/* ===== Scrollable list region ===== */
.main-nav > ul {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex-direction: column;
gap: 0;
width: 100%;
list-style: none;
margin: 0;
padding: 10px 14px 14px;
background: var(--white);
scrollbar-width: thin;
scrollbar-color: var(--slate-300) transparent;
}
.main-nav > ul::-webkit-scrollbar { width: 6px; }
.main-nav > ul::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 3px; }
.main-nav > ul > li {
width: 100%;
border-bottom: 1px solid var(--slate-100);
position: relative;
}
.main-nav > ul > li:last-child { border-bottom: 0; }
.main-nav > ul > li > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 12px;
width: 100%;
font-family: var(--font-display);
font-size: 15.5px;
font-weight: 700;
letter-spacing: .01em;
color: var(--navy-900);
text-shadow: none;
border-radius: 8px;
position: relative;
transition: background var(--transition), color var(--transition);
}
.main-nav > ul > li > a::after { display: none; }
.main-nav > ul > li > a:hover { background: var(--slate-50); color: var(--navy-900); }
.main-nav > ul > li.active > a,
.main-nav > ul > li.has-dropdown.open > a {
background: var(--slate-50);
color: var(--navy-900);
}
/* Navy accent bar on active / open top-level item */
.main-nav > ul > li.active > a::before,
.main-nav > ul > li.has-dropdown.open > a::before {
content: '';
position: absolute;
left: -14px;
top: 50%;
width: 3px;
height: 22px;
background: linear-gradient(180deg, var(--navy-600), var(--navy-800));
border-radius: 0 3px 3px 0;
transform: translateY(-50%);
box-shadow: 0 0 10px rgba(30, 90, 168, .4);
}
.main-nav > ul > li > a .chev {
width: 14px;
height: 14px;
color: var(--slate-500);
transition: transform var(--transition), color var(--transition);
}
.main-nav .has-dropdown.open > a .chev {
transform: rotate(180deg);
color: var(--navy-700);
}
/* ===== Accordion dropdown ===== */
.dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: 0;
background: transparent;
margin: 0;
border-radius: 0;
max-height: 0;
overflow: hidden;
transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
padding: 0;
list-style: none;
}
.main-nav .has-dropdown.open > .dropdown {
max-height: 1400px;
padding: 4px 0 12px;
}
.dropdown::before { display: none; }
.dropdown li {
position: relative;
padding-left: 14px;
margin-left: 10px;
border-left: 2px solid var(--slate-100);
}
.dropdown li a {
padding: 11px 12px;
font-size: 14px;
background: transparent;
color: var(--slate-700);
border-radius: 6px;
transition: background var(--transition), color var(--transition);
}
.dropdown li a:hover,
.dropdown li.has-submenu.open > a,
.dropdown li.active > a {
background: var(--slate-50);
color: var(--navy-900);
transform: none;
}
.dropdown li a .dot { display: none; }
.dropdown-text strong { font-size: 14px; }
.dropdown-text small { display: none; }
.dropdown .sub-chev {
color: var(--slate-500);
transition: transform var(--transition), color var(--transition);
}
.dropdown li.has-submenu.open .sub-chev {
transform: rotate(90deg);
color: var(--navy-700);
}
/* ===== Nested submenu (icon cards) ===== */
.submenu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: 0;
background: transparent;
margin: 4px 0 6px;
padding: 0;
border-radius: 0;
max-height: 0;
overflow: hidden;
transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
list-style: none;
}
.dropdown li.has-submenu.open > .submenu {
max-height: 900px;
padding: 4px 0 4px 4px;
}
.submenu::before { display: none; }
.submenu li {
padding-left: 0;
margin-left: 0;
border-left: 0;
}
.submenu li a {
padding: 9px 10px;
gap: 10px;
font-size: 13.5px;
color: var(--navy-900);
background: transparent;
font-weight: 600;
}
.submenu li a:hover {
background: #eaf1fb;
transform: none;
}
.submenu li.active a { background: #eaf1fb; }
.submenu .sm-icon {
width: 30px;
height: 30px;
border-radius: 7px;
background: var(--slate-100);
}
.submenu li a svg { width: 14px; height: 14px; }
/* ===== CTA inside drawer ===== */
.nav-cta {
margin: 14px 18px 0;
justify-content: center;
padding: 14px 20px;
background: linear-gradient(135deg, var(--navy-800), var(--navy-900));
color: var(--white) !important;
font-size: 14.5px;
font-weight: 700;
letter-spacing: .03em;
border-radius: 10px;
flex-shrink: 0;
box-shadow: 0 8px 22px rgba(10, 31, 61, .28);
}
.nav-cta:hover {
background: linear-gradient(135deg, #ffffff, #e6eefb);
color: var(--navy-900) !important;
transform: none;
}
.nav-cta svg { width: 16px; height: 16px; }
/* ===== Drawer footer (contact + social) ===== */
.mobile-nav-header,
.mobile-nav-footer { display: flex; }
.mobile-nav-footer {
flex-direction: column;
gap: 12px;
padding: 16px 18px 18px;
background: var(--slate-50);
border-top: 1px solid var(--slate-100);
flex-shrink: 0;
}
.mobile-nav-contact {
display: flex;
flex-direction: column;
gap: 8px;
}
.mobile-nav-contact-item {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--slate-700);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: color var(--transition);
}
a.mobile-nav-contact-item:hover { color: var(--navy-700); }
.mobile-nav-contact-item svg {
width: 14px;
height: 14px;
color: var(--navy-700);
flex-shrink: 0;
}
.mobile-nav-social {
display: flex;
gap: 10px;
padding-top: 10px;
border-top: 1px solid var(--slate-200);
}
.mobile-nav-social a {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--slate-200);
color: var(--navy-800);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
}
.mobile-nav-social a:hover {
background: var(--navy-800);
border-color: var(--navy-800);
color: var(--white);
transform: translateY(-2px);
}
.mobile-nav-social svg { width: 14px; height: 14px; }
.accordion-body-inner { padding: 0 22px 22px 22px; }
}
/* Edge-to-edge drawer on small phones */
@media (max-width: 480px) {
.main-nav {
width: 100vw;
max-width: 100vw;
border-radius: 0;
}
}
@media (max-width: 720px) {
.section { padding: 60px 0; }
.logo { gap: 8px; }
.logo::before { width: 46px; height: 46px; }
.logo-block { gap: 3px; }
.logo-icon { height: 42px; }
.logo-text { height: 26px; max-width: 160px; }
.logo-caption {
font-size: 7px;
letter-spacing: .06em;
padding-inline: 14px;
max-width: 180px;
line-height: 1.3;
}
.logo-caption::before,
.logo-caption::after { width: 10px; height: 1.2px; }
.btn { width: 100%; }
.form-row { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 32px; }
.cta-strip .container { text-align: center; flex-direction: column; }
.about-features { grid-template-columns: 1fr; }
.contact-form-card { padding: 28px 22px; }
.topbar-info { display: none; }
.topbar .container { justify-content: center; }
}
/* Scrim for mobile nav */
.nav-scrim {
position: fixed;
inset: 0;
background: rgba(7, 23, 46, .55);
backdrop-filter: blur(2px);
z-index: 99;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition), visibility var(--transition);
}
.nav-scrim.show { opacity: 1; visibility: visible; }
body.no-scroll { overflow: hidden; }
/* ===================== INSURANCE SOLUTION — 3D ANIMATED ICON ===================== */
.two-col-visual.solution-3d {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
overflow: hidden;
background:
radial-gradient(ellipse at 22% 18%, rgba(212, 160, 23, .22), transparent 55%),
radial-gradient(ellipse at 82% 85%, rgba(30, 90, 168, .35), transparent 60%),
linear-gradient(135deg, #07172f 0%, #0f2a52 45%, #061226 100%);
box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .04) inset;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
perspective-origin: 50% 45%;
}
.solution-3d-bg-grid {
position: absolute;
inset: -10%;
background-image:
linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: 36px 36px;
transform: perspective(800px) rotateX(58deg) translateY(28%);
transform-origin: center top;
mask-image: radial-gradient(ellipse at 50% 35%, #000 30%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 30%, transparent 70%);
opacity: .7;
pointer-events: none;
}
.solution-3d-glow {
position: absolute;
width: 70%;
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(212, 160, 23, .55) 0%, rgba(212, 160, 23, .15) 38%, transparent 65%);
filter: blur(20px);
animation: solution3dPulse 4.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes solution3dPulse {
0%, 100% { opacity: .75; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
.solution-3d-scene {
position: relative;
width: 62%;
aspect-ratio: 1;
transform-style: preserve-3d;
animation: solution3dFloat 6s ease-in-out infinite;
}
@keyframes solution3dFloat {
0% { transform: translateY(0) rotateX(10deg) rotateY(-12deg); }
50% { transform: translateY(-14px) rotateX(10deg) rotateY(12deg); }
100% { transform: translateY(0) rotateX(10deg) rotateY(-12deg); }
}
.solution-3d-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, .25);
transform-style: preserve-3d;
pointer-events: none;
}
.solution-3d-ring::before {
content: '';
position: absolute;
border-radius: 50%;
}
.solution-3d-ring-1 {
border-color: rgba(212, 160, 23, .6);
box-shadow: 0 0 18px rgba(212, 160, 23, .25), 0 0 18px rgba(212, 160, 23, .25) inset;
animation: solution3dRing1 10s linear infinite;
}
@keyframes solution3dRing1 {
from { transform: rotateX(72deg) rotateZ(0deg); }
to { transform: rotateX(72deg) rotateZ(360deg); }
}
.solution-3d-ring-1::before {
width: 12px; height: 12px;
top: 50%; left: -6px;
transform: translateY(-50%);
background: var(--gold-500);
box-shadow: 0 0 14px var(--gold-500), 0 0 6px #fff inset;
}
.solution-3d-ring-2 {
inset: 10%;
border-color: rgba(255, 255, 255, .45);
border-width: 1px;
animation: solution3dRing2 13s linear infinite reverse;
}
@keyframes solution3dRing2 {
from { transform: rotateY(72deg) rotateZ(0deg); }
to { transform: rotateY(72deg) rotateZ(360deg); }
}
.solution-3d-ring-2::before {
width: 9px; height: 9px;
top: -4px; left: 50%;
transform: translateX(-50%);
background: #fff;
box-shadow: 0 0 12px rgba(255, 255, 255, .95);
}
.solution-3d-ring-3 {
inset: 20%;
border-style: dashed;
border-color: rgba(212, 160, 23, .35);
animation: solution3dRing3 18s linear infinite;
}
@keyframes solution3dRing3 {
from { transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg); }
to { transform: rotateX(60deg) rotateY(45deg) rotateZ(360deg); }
}
.solution-3d-card {
position: absolute;
inset: 26%;
border-radius: 28%;
background:
linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, 0) 60%),
linear-gradient(135deg, var(--gold-400) 0%, var(--gold-500) 60%, #8a6610 100%);
box-shadow:
0 24px 50px -10px rgba(0, 0, 0, .55),
0 0 0 1px rgba(255, 255, 255, .22) inset,
0 -10px 26px -8px rgba(0, 0, 0, .5) inset,
0 0 36px rgba(212, 160, 23, .55);
display: flex;
align-items: center;
justify-content: center;
color: #0a1f3d;
transform: translateZ(36px);
animation: solution3dCardTilt 5.5s ease-in-out infinite;
overflow: hidden;
}
@keyframes solution3dCardTilt {
0%, 100% { transform: translateZ(36px) rotate(0deg); }
50% { transform: translateZ(48px) rotate(2.5deg); }
}
.solution-3d-card-grid {
position: absolute;
inset: 8%;
border-radius: 22%;
background-image:
linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
background-size: 12px 12px;
mask-image: radial-gradient(circle at center, #000 40%, transparent 80%);
-webkit-mask-image: radial-gradient(circle at center, #000 40%, transparent 80%);
opacity: .55;
pointer-events: none;
}
.solution-3d-card-shine {
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
animation: solution3dShine 4.5s ease-in-out infinite;
mix-blend-mode: overlay;
pointer-events: none;
}
@keyframes solution3dShine {
0% { transform: translateX(-120%); }
55%, 100%{ transform: translateX(120%); }
}
.solution-3d-icon {
width: 56%;
height: 56%;
filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35));
position: relative;
z-index: 1;
}
.solution-3d-dot {
position: absolute;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 12px rgba(255, 255, 255, .9);
pointer-events: none;
}
.solution-3d-dot-1 { width: 9px; height: 9px; top: 6%; left: 14%; animation: solution3dDot 5.5s ease-in-out infinite; }
.solution-3d-dot-2 { width: 7px; height: 7px; top: 20%; right: 4%; background: var(--gold-500); box-shadow: 0 0 14px var(--gold-500); animation: solution3dDot 6.2s ease-in-out infinite .5s; }
.solution-3d-dot-3 { width: 11px; height: 11px; bottom: 14%; left: -2%; animation: solution3dDot 7s ease-in-out infinite 1s; }
.solution-3d-dot-4 { width: 6px; height: 6px; bottom: 4%; right: 18%; background: var(--gold-500); box-shadow: 0 0 12px var(--gold-500); animation: solution3dDot 5.8s ease-in-out infinite 1.5s; }
.solution-3d-dot-5 { width: 5px; height: 5px; top: 48%; right: -3%; animation: solution3dDot 6.5s ease-in-out infinite 2s; }
@keyframes solution3dDot {
0%, 100% { opacity: .25; transform: translateY(0) scale(1); }
50% { opacity: 1; transform: translateY(-14px) scale(1.35); }
}
.solution-3d-shadow {
position: absolute;
left: 14%; right: 14%;
bottom: -6%;
height: 14%;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 70%);
transform: rotateX(78deg);
filter: blur(6px);
animation: solution3dShadow 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes solution3dShadow {
0%, 100% { transform: rotateX(78deg) scale(1); opacity: .65; }
50% { transform: rotateX(78deg) scale(.85); opacity: .45; }
}
@media (max-width: 900px) {
.two-col-visual.solution-3d { aspect-ratio: 4 / 3.4; }
.solution-3d-scene { width: 72%; }
}
@media (prefers-reduced-motion: reduce) {
.solution-3d-scene,
.solution-3d-glow,
.solution-3d-ring,
.solution-3d-card,
.solution-3d-card-shine,
.solution-3d-dot,
.solution-3d-shadow {
animation: none !important;
}
}
/* ============================================================
COVERAGE PAGE — 5 REDESIGNED SECTIONS
1. .cov-intro-* : floating 3D card-stack hero (Coverage Category)
2. .cov-bento-* : asymmetric bento grid (What's Covered)
3. .cov-rail-* : zigzag spine timeline (Why It Matters)
4. .cov-spot-* : wide spotlight rows (Related Solutions)
5. .cov-faq-* : glass-card stack accordion (Frequently Asked)
============================================================ */
/* ---------- 1. INTRO : 3D floating card stack ---------- */
.cov-intro-section { position: relative; overflow: hidden; }
.cov-intro-bg-line { position: absolute; pointer-events: none; }
.cov-intro-bg-line-a {
top: 14%; left: -8%; width: 60%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .45), transparent);
transform: rotate(-8deg);
}
.cov-intro-bg-line-b {
bottom: 16%; right: -10%; width: 70%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(30, 90, 168, .35), transparent);
transform: rotate(6deg);
}
.cov-intro-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 70px;
align-items: center;
}
.cov-intro-eyebrow-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--gold-500);
margin-right: 10px;
vertical-align: middle;
box-shadow: 0 0 0 4px rgba(212, 160, 23, .18);
animation: covIntroPulseDot 2.2s ease-in-out infinite;
}
@keyframes covIntroPulseDot {
0%, 100% { box-shadow: 0 0 0 4px rgba(212, 160, 23, .18); }
50% { box-shadow: 0 0 0 9px rgba(212, 160, 23, .04); }
}
.cov-intro-pills {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.cov-intro-pills li {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
border-radius: 999px;
background: var(--white);
border: 1px solid var(--slate-100);
font-size: 14px;
font-weight: 600;
color: var(--navy-900);
opacity: 0;
transform: translateX(-14px);
transition:
opacity .55s ease,
transform .55s cubic-bezier(.22, 1, .36, 1),
border-color .35s ease,
box-shadow .35s ease,
background .35s ease;
}
.cov-intro-copy.reveal.visible .cov-intro-pills li {
opacity: 1;
transform: translateX(0);
transition-delay: calc(var(--i, 0) * .08s + .25s);
}
.cov-intro-pills li:hover {
border-color: rgba(212, 160, 23, .55);
background: linear-gradient(135deg, #fff, rgba(255, 247, 224, .55));
box-shadow: 0 8px 18px rgba(212, 160, 23, .14);
}
.cov-intro-pills li svg {
width: 14px; height: 14px;
color: var(--gold-500);
flex-shrink: 0;
}
.cov-intro-cta {
margin-top: 32px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.cov-intro-visual {
position: relative;
aspect-ratio: 1 / 1;
max-width: 520px;
width: 100%;
margin: 0 auto;
perspective: 1400px;
}
.cov-intro-aura {
position: absolute;
inset: 14%;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 160, 23, .3) 0%, rgba(30, 90, 168, .18) 40%, transparent 70%);
filter: blur(28px);
animation: covIntroAura 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes covIntroAura {
0%, 100% { opacity: .8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
.cov-intro-orbit {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.cov-intro-orbit-1 {
inset: 8%;
border: 1px dashed rgba(212, 160, 23, .4);
animation: covIntroOrbit 22s linear infinite;
}
.cov-intro-orbit-2 {
inset: 22%;
border: 1px solid rgba(30, 90, 168, .3);
animation: covIntroOrbit 28s linear infinite reverse;
}
.cov-intro-orbit::before {
content: '';
position: absolute;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--gold-500);
box-shadow: 0 0 14px var(--gold-500);
top: 0; left: 50%;
transform: translate(-50%, -50%);
}
.cov-intro-orbit-2::before {
background: var(--navy-600);
box-shadow: 0 0 12px var(--navy-600);
width: 8px; height: 8px;
}
@keyframes covIntroOrbit {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
.cov-intro-card {
position: absolute;
background: var(--white);
border-radius: 18px;
box-shadow: 0 24px 48px -12px rgba(10, 31, 61, .25), 0 0 0 1px rgba(10, 31, 61, .04);
transform-style: preserve-3d;
}
.cov-intro-card-front {
inset: 24% 22% 22% 22%;
background: linear-gradient(160deg, #fff 0%, #f7f4ea 100%);
padding: 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-radius: 22px;
box-shadow:
0 32px 60px -10px rgba(10, 31, 61, .35),
0 0 0 1px rgba(212, 160, 23, .15),
0 0 0 6px rgba(255, 255, 255, .7);
z-index: 3;
overflow: hidden;
animation: covIntroCardFront 6s ease-in-out infinite;
}
@keyframes covIntroCardFront {
0%, 100% { transform: translateZ(20px) rotateX(8deg) rotateY(-10deg) translateY(0); }
50% { transform: translateZ(28px) rotateX(8deg) rotateY(8deg) translateY(-8px); }
}
.cov-intro-card-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(212, 160, 23, .08) 1px, transparent 1px),
linear-gradient(90deg, rgba(212, 160, 23, .08) 1px, transparent 1px);
background-size: 14px 14px;
-webkit-mask-image: radial-gradient(circle at 60% 60%, #000 35%, transparent 75%);
mask-image: radial-gradient(circle at 60% 60%, #000 35%, transparent 75%);
pointer-events: none;
}
.cov-intro-card-shine {
position: absolute;
top: -50%; left: -120%;
width: 80%; height: 200%;
background: linear-gradient(110deg, transparent, rgba(212, 160, 23, .35) 50%, transparent);
transform: rotate(15deg);
animation: covIntroShine 5s ease-in-out infinite;
pointer-events: none;
}
@keyframes covIntroShine {
0% { left: -120%; }
60%, 100% { left: 140%; }
}
.cov-intro-icon {
width: 78px; height: 78px;
border-radius: 22px;
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: var(--gold-500);
display: flex; align-items: center; justify-content: center;
box-shadow:
0 14px 28px -6px rgba(10, 31, 61, .5),
0 0 0 1px rgba(255, 255, 255, .1) inset;
align-self: flex-start;
position: relative;
z-index: 1;
}
.cov-intro-icon svg { width: 36px; height: 36px; }
.cov-intro-card-meta {
display: flex; flex-direction: column; gap: 2px;
position: relative;
z-index: 1;
}
.cov-intro-card-meta-label {
font-size: 10.5px; font-weight: 700;
letter-spacing: .16em; text-transform: uppercase;
color: var(--slate-500);
}
.cov-intro-card-meta-value {
font-size: 1.18rem; font-weight: 700;
color: var(--navy-900); letter-spacing: -.01em;
}
.cov-intro-card-back {
top: 4%; right: 4%;
width: 44%; padding: 14px 16px;
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: #fff;
border-radius: 16px;
z-index: 1;
animation: covIntroCardBack 7s ease-in-out infinite;
box-shadow: 0 22px 40px -12px rgba(10, 31, 61, .45);
}
@keyframes covIntroCardBack {
0%, 100% { transform: rotate(-4deg) translateY(0); }
50% { transform: rotate(-4deg) translateY(-10px); }
}
.cov-intro-card-tag {
font-size: 10.5px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: var(--gold-400);
display: block;
margin-bottom: 10px;
}
.cov-intro-card-bars {
display: flex; align-items: flex-end;
gap: 6px; height: 40px;
}
.cov-intro-card-bars > span {
flex: 1;
height: var(--h);
background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
border-radius: 3px;
transform-origin: bottom;
animation: covIntroBars 2.4s ease-in-out infinite;
}
.cov-intro-card-bars > span:nth-child(2) { animation-delay: .15s; }
.cov-intro-card-bars > span:nth-child(3) { animation-delay: .3s; }
.cov-intro-card-bars > span:nth-child(4) { animation-delay: .45s; }
@keyframes covIntroBars {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(.55); }
}
.cov-intro-card-side {
bottom: 6%; left: 4%;
width: 48%;
padding: 12px 14px;
border-radius: 14px;
display: flex; align-items: center; gap: 10px;
z-index: 2;
box-shadow: 0 18px 38px -10px rgba(10, 31, 61, .28);
animation: covIntroCardSide 8s ease-in-out infinite;
}
@keyframes covIntroCardSide {
0%, 100% { transform: rotate(4deg) translateY(0); }
50% { transform: rotate(4deg) translateY(-7px); }
}
.cov-intro-card-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 4px rgba(34, 197, 94, .22);
animation: covIntroPulseDot 2.4s ease-in-out infinite;
flex-shrink: 0;
}
.cov-intro-card-side strong {
font-size: .92rem;
color: var(--navy-900);
letter-spacing: -.005em;
display: block;
line-height: 1.2;
}
.cov-intro-card-side small {
font-size: 11px;
color: var(--slate-500);
}
.cov-intro-spark {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold-500);
box-shadow: 0 0 12px var(--gold-500);
pointer-events: none;
}
.cov-intro-spark-1 { top: 12%; left: 8%; animation: covIntroSpark 4s ease-in-out infinite; }
.cov-intro-spark-2 { top: 40%; right: 4%; animation: covIntroSpark 5s ease-in-out infinite 1s; background: #fff; box-shadow: 0 0 10px #fff; }
.cov-intro-spark-3 { bottom: 22%; right: 22%; animation: covIntroSpark 4.5s ease-in-out infinite 2s; width: 4px; height: 4px; }
@keyframes covIntroSpark {
0%, 100% { opacity: .2; transform: scale(1); }
50% { opacity: 1; transform: scale(1.7); }
}
@media (max-width: 900px) {
.cov-intro-grid { grid-template-columns: 1fr; gap: 40px; }
.cov-intro-visual { max-width: 420px; }
}
/* ---------- 2. WHAT'S COVERED : Bento grid ---------- */
.cov-bento-section { position: relative; overflow: hidden; }
.cov-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 220px;
gap: 22px;
}
.cov-bento-cell {
position: relative;
overflow: hidden;
padding: 28px;
border-radius: 22px;
background: var(--white);
border: 1px solid var(--slate-100);
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: space-between;
opacity: 0;
transform: translateY(40px) scale(.96);
transition:
opacity .8s cubic-bezier(.22, 1, .36, 1),
transform .85s cubic-bezier(.22, 1, .36, 1),
border-color .4s ease,
box-shadow .5s ease;
}
.cov-bento.visible .cov-bento-cell {
opacity: 1;
transform: translateY(0) scale(1);
transition:
opacity .9s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .08s),
transform .9s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .08s),
border-color .4s ease,
box-shadow .5s ease;
}
.cov-bento-cell:hover {
border-color: rgba(212, 160, 23, .5);
box-shadow: 0 24px 48px -12px rgba(10, 31, 61, .18);
}
/* Asymmetric sizing for 6 cells */
.cov-bento-cell-0 { grid-column: span 2; grid-row: span 2; padding: 40px; }
.cov-bento-cell-1 { grid-column: span 2; }
.cov-bento-cell-2 { grid-column: span 1; }
.cov-bento-cell-3 { grid-column: span 1; }
.cov-bento-cell-4 { grid-column: span 2; }
.cov-bento-cell-5 { grid-column: span 2; }
.cov-bento-cell-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .1), transparent 55%),
radial-gradient(circle at 0% 100%, rgba(30, 90, 168, .06), transparent 60%);
opacity: 0;
transition: opacity .55s ease;
z-index: -1;
pointer-events: none;
}
.cov-bento-cell:hover .cov-bento-cell-bg { opacity: 1; }
/* Hero cell — dark navy with gold accents */
.cov-bento-cell-0 {
background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 100%);
border-color: rgba(255, 255, 255, .06);
color: #fff;
}
.cov-bento-cell-0 .cov-bento-cell-bg {
background:
radial-gradient(circle at 0% 100%, rgba(212, 160, 23, .35), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(30, 90, 168, .4), transparent 60%);
}
.cov-bento-cell-0 .cov-bento-cell-title { color: #fff; }
.cov-bento-cell-0 .cov-bento-cell-desc { color: rgba(255, 255, 255, .72); }
.cov-bento-cell-0 .cov-bento-cell-icon {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
width: 84px; height: 84px;
}
.cov-bento-cell-0 .cov-bento-cell-icon svg { width: 38px; height: 38px; }
.cov-bento-cell-0 .cov-bento-cell-tag { color: rgba(255, 255, 255, .22); }
.cov-bento-cell-0 .cov-bento-cell-arrow {
background: rgba(255, 255, 255, .08);
color: #fff;
border-color: rgba(255, 255, 255, .18);
}
.cov-bento-cell-glow {
position: absolute;
top: -40%; right: -30%;
width: 220px; height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 160, 23, .35), transparent 65%);
filter: blur(20px);
opacity: 0;
transition: opacity .55s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
.cov-bento-cell:hover .cov-bento-cell-glow {
opacity: 1;
transform: translate(-30px, 30px);
}
.cov-bento-cell-dot {
position: absolute;
top: 14px; right: 14px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--gold-500);
box-shadow: 0 0 12px var(--gold-500);
animation: covBentoDot 2.5s ease-in-out infinite;
}
@keyframes covBentoDot {
0%, 100% { opacity: .35; transform: scale(1); }
50% { opacity: 1; transform: scale(1.45); }
}
.cov-bento-cell-tag {
position: absolute;
bottom: 20px; right: 24px;
font-size: 36px;
font-weight: 800;
letter-spacing: -.04em;
color: var(--slate-100);
line-height: 1;
z-index: 0;
transition: color .4s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
.cov-bento-cell-0 .cov-bento-cell-tag { font-size: 56px; }
.cov-bento-cell:hover .cov-bento-cell-tag {
color: rgba(212, 160, 23, .35);
transform: translateY(-4px);
}
.cov-bento-cell-icon {
position: relative;
width: 60px; height: 60px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(212, 160, 23, .12), rgba(231, 184, 65, .22));
color: var(--gold-500);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
transition:
transform .55s cubic-bezier(.34, 1.56, .64, 1),
border-radius .5s ease;
z-index: 2;
}
.cov-bento-cell-icon svg { width: 26px; height: 26px; position: relative; z-index: 2; }
.cov-bento-cell:hover .cov-bento-cell-icon {
transform: rotate(-8deg) scale(1.08);
border-radius: 18px 24px 18px 22px;
}
.cov-bento-cell-icon-ring {
position: absolute;
inset: -8%;
border-radius: 18px;
border: 1.5px dashed rgba(212, 160, 23, .42);
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
}
.cov-bento-cell:hover .cov-bento-cell-icon-ring {
opacity: 1;
animation: covBentoRing 7s linear infinite;
}
@keyframes covBentoRing {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
.cov-bento-cell-body { position: relative; z-index: 2; flex: 1; }
.cov-bento-cell-title {
margin: 0 0 8px;
font-size: 1.06rem;
color: var(--navy-900);
letter-spacing: -.005em;
transition: transform .5s ease;
}
.cov-bento-cell-0 .cov-bento-cell-title { font-size: 1.45rem; }
.cov-bento-cell:hover .cov-bento-cell-title { transform: translateX(2px); }
.cov-bento-cell-desc {
margin: 0;
color: var(--slate-500);
font-size: 13.5px;
line-height: 1.6;
}
.cov-bento-cell-0 .cov-bento-cell-desc { font-size: 14.5px; max-width: 92%; }
.cov-bento-cell-arrow {
position: relative;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--slate-50);
border: 1px solid var(--slate-100);
color: var(--slate-500);
display: flex; align-items: center; justify-content: center;
z-index: 2;
margin-top: 12px;
transition:
background .45s ease,
color .45s ease,
border-color .4s ease,
transform .55s cubic-bezier(.34, 1.56, .64, 1),
box-shadow .45s ease;
}
.cov-bento-cell-arrow svg {
width: 14px; height: 14px;
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cov-bento-cell:hover .cov-bento-cell-arrow {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
border-color: transparent;
transform: scale(1.06);
box-shadow: 0 10px 22px -4px rgba(212, 160, 23, .4);
}
.cov-bento-cell:hover .cov-bento-cell-arrow svg { transform: translateX(3px); }
@media (max-width: 900px) {
.cov-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
.cov-bento-cell-0 { grid-column: span 2; grid-row: auto; padding: 32px; }
.cov-bento-cell-1 { grid-column: span 2; }
.cov-bento-cell-2, .cov-bento-cell-3 { grid-column: span 1; }
.cov-bento-cell-4, .cov-bento-cell-5 { grid-column: span 2; }
}
@media (max-width: 560px) {
.cov-bento { grid-template-columns: 1fr; }
.cov-bento-cell-0,
.cov-bento-cell-1,
.cov-bento-cell-2,
.cov-bento-cell-3,
.cov-bento-cell-4,
.cov-bento-cell-5 { grid-column: span 1; }
}
/* ---------- 3. WHY IT MATTERS : Zigzag spine timeline ---------- */
.cov-rail-section { position: relative; overflow: hidden; }
.cov-rail {
position: relative;
max-width: 980px;
margin: 0 auto;
padding: 20px 0;
}
.cov-rail-spine {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 2px;
background: linear-gradient(180deg, transparent, var(--slate-100) 10%, var(--slate-100) 90%, transparent);
transform: translateX(-50%);
}
.cov-rail-spine-fill {
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 0;
background: linear-gradient(180deg, var(--gold-500), var(--gold-400));
transform: translateX(-50%);
box-shadow: 0 0 12px rgba(212, 160, 23, .5);
transition: height 1.6s cubic-bezier(.22, 1, .36, 1) .2s;
}
.cov-rail.visible .cov-rail-spine-fill { height: 100%; }
.cov-rail-row {
position: relative;
display: grid;
grid-template-columns: 1fr 80px 1fr;
align-items: center;
margin: 32px 0;
opacity: 0;
transition:
opacity .75s cubic-bezier(.22, 1, .36, 1),
transform .8s cubic-bezier(.22, 1, .36, 1);
}
.cov-rail-row-left { transform: translateX(-48px); }
.cov-rail-row-right { transform: translateX(48px); }
.cov-rail.visible .cov-rail-row {
opacity: 1;
transform: translateX(0);
transition-delay: calc(var(--i, 0) * .14s + .2s);
}
.cov-rail-node {
grid-column: 2;
grid-row: 1;
justify-self: center;
position: relative;
width: 64px; height: 64px;
z-index: 2;
}
.cov-rail-node-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--gold-500);
opacity: .35;
transform: scale(.6);
animation: covRailPulse 2.6s ease-out infinite;
}
@keyframes covRailPulse {
0% { transform: scale(.6); opacity: .55; }
100% { transform: scale(1.7); opacity: 0; }
}
.cov-rail-node-core {
position: absolute;
inset: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: var(--gold-400);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
font-weight: 700;
letter-spacing: .04em;
box-shadow:
0 0 0 3px rgba(212, 160, 23, .18),
0 8px 20px -4px rgba(10, 31, 61, .4);
transition:
transform .5s cubic-bezier(.34, 1.56, .64, 1),
background .4s ease,
color .4s ease;
}
.cov-rail-row:hover .cov-rail-node-core {
transform: scale(1.08);
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
}
.cov-rail-card {
position: relative;
padding: 22px 24px;
border-radius: 18px;
background: var(--white);
border: 1px solid var(--slate-100);
overflow: hidden;
transition:
border-color .4s ease,
box-shadow .4s ease,
transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cov-rail-row-left .cov-rail-card { grid-column: 1; margin-right: 12px; text-align: right; }
.cov-rail-row-right .cov-rail-card { grid-column: 3; margin-left: 12px; }
.cov-rail-row:hover .cov-rail-card {
border-color: rgba(212, 160, 23, .55);
box-shadow: 0 20px 38px -12px rgba(10, 31, 61, .18);
transform: translateY(-3px);
}
.cov-rail-card-arrow {
position: absolute;
top: 50%;
width: 0; height: 0;
border-style: solid;
border-width: 8px;
transform: translateY(-50%);
}
.cov-rail-row-left .cov-rail-card-arrow {
right: -16px;
border-color: transparent transparent transparent var(--white);
filter: drop-shadow(1px 0 0 var(--slate-100));
}
.cov-rail-row-right .cov-rail-card-arrow {
left: -16px;
border-color: transparent var(--white) transparent transparent;
filter: drop-shadow(-1px 0 0 var(--slate-100));
}
.cov-rail-card-shine {
position: absolute;
top: -50%; left: -120%;
width: 60%; height: 200%;
background: linear-gradient(110deg, transparent, rgba(212, 160, 23, .15) 50%, transparent);
transform: rotate(15deg);
transition: left .85s cubic-bezier(.22, 1, .36, 1);
pointer-events: none;
}
.cov-rail-row:hover .cov-rail-card-shine { left: 140%; }
.cov-rail-card-title {
margin: 0 0 8px;
font-size: 1.1rem;
color: var(--navy-900);
letter-spacing: -.005em;
}
.cov-rail-card-desc {
margin: 0;
color: var(--slate-500);
font-size: 14px;
line-height: 1.6;
}
.cov-rail-card-line {
display: block;
width: 24px; height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
margin-top: 14px;
transition: width .6s cubic-bezier(.22, 1, .36, 1);
}
.cov-rail-row-left .cov-rail-card-line { margin-left: auto; }
.cov-rail-row:hover .cov-rail-card-line { width: 52px; }
@media (max-width: 800px) {
.cov-rail-spine, .cov-rail-spine-fill { left: 32px; }
.cov-rail-row {
grid-template-columns: 64px 1fr;
gap: 14px;
}
.cov-rail-row-left, .cov-rail-row-right { transform: translateX(-30px); }
.cov-rail.visible .cov-rail-row { transform: translateX(0); }
.cov-rail-node { grid-column: 1; }
.cov-rail-row-left .cov-rail-card,
.cov-rail-row-right .cov-rail-card {
grid-column: 2;
margin: 0;
text-align: left;
}
.cov-rail-row-left .cov-rail-card-line { margin-left: 0; }
.cov-rail-row-left .cov-rail-card-arrow,
.cov-rail-row-right .cov-rail-card-arrow {
left: -16px;
right: auto;
border-color: transparent var(--white) transparent transparent;
filter: drop-shadow(-1px 0 0 var(--slate-100));
}
}
/* ---------- 4. RELATED SOLUTIONS : Wide spotlight rows ---------- */
.cov-spot-section { position: relative; overflow: hidden; }
.cov-spot {
display: flex;
flex-direction: column;
gap: 18px;
max-width: 980px;
margin: 0 auto;
}
.cov-spot-row {
position: relative;
display: grid;
grid-template-columns: 70px 110px 1fr auto;
align-items: center;
gap: 22px;
padding: 22px 28px;
border-radius: 22px;
background: var(--white);
border: 1px solid var(--slate-100);
text-decoration: none;
color: inherit;
overflow: hidden;
isolation: isolate;
opacity: 0;
transform: translateY(36px) skewY(2deg);
transition:
opacity .8s cubic-bezier(.22, 1, .36, 1),
transform .85s cubic-bezier(.22, 1, .36, 1),
border-color .4s ease,
box-shadow .45s ease,
background .45s ease;
}
.cov-spot.visible .cov-spot-row {
opacity: 1;
transform: translateY(0) skewY(0);
transition:
opacity .9s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .12s),
transform .9s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .12s),
border-color .4s ease,
box-shadow .45s ease,
background .45s ease;
}
.cov-spot-row:hover {
border-color: rgba(212, 160, 23, .55);
box-shadow: 0 24px 46px -16px rgba(10, 31, 61, .2);
background: linear-gradient(135deg, #fff 0%, rgba(255, 247, 224, .4) 100%);
}
.cov-spot-row-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at -10% 50%, rgba(212, 160, 23, .18), transparent 50%),
radial-gradient(circle at 110% 50%, rgba(30, 90, 168, .12), transparent 50%);
opacity: 0;
transition: opacity .55s ease;
pointer-events: none;
z-index: -1;
}
.cov-spot-row:hover .cov-spot-row-bg { opacity: 1; }
.cov-spot-row-stripe {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--gold-500), var(--gold-400));
transform: scaleY(0);
transform-origin: center;
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.cov-spot-row:hover .cov-spot-row-stripe { transform: scaleY(1); }
.cov-spot-row-index {
font-size: 30px;
font-weight: 800;
letter-spacing: -.04em;
color: var(--slate-200);
line-height: 1;
transition: color .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cov-spot-row:hover .cov-spot-row-index {
color: var(--gold-500);
transform: translateY(-2px);
}
.cov-spot-row-icon {
position: relative;
width: 92px; height: 92px;
border-radius: 22px;
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: var(--gold-500);
display: flex; align-items: center; justify-content: center;
box-shadow:
0 14px 28px -10px rgba(10, 31, 61, .45),
0 0 0 1px rgba(255, 255, 255, .06) inset;
transition:
transform .55s cubic-bezier(.34, 1.56, .64, 1),
border-radius .5s ease,
background .5s ease,
color .5s ease,
box-shadow .5s ease;
}
.cov-spot-row-icon svg { width: 38px; height: 38px; position: relative; z-index: 1; }
.cov-spot-row:hover .cov-spot-row-icon {
transform: scale(1.08) rotate(-6deg);
border-radius: 30px 22px 26px 22px;
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--navy-900);
box-shadow:
0 22px 38px -10px rgba(212, 160, 23, .55),
0 0 0 1px rgba(255, 255, 255, .25) inset;
}
.cov-spot-row-icon-orb {
position: absolute;
inset: -30%;
border-radius: 50%;
background: radial-gradient(circle, rgba(212, 160, 23, .55), transparent 60%);
filter: blur(16px);
opacity: 0;
transition: opacity .55s ease;
pointer-events: none;
}
.cov-spot-row:hover .cov-spot-row-icon-orb { opacity: 1; }
.cov-spot-row-body { min-width: 0; }
.cov-spot-row-eyebrow {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--gold-500);
margin-bottom: 4px;
}
.cov-spot-row-title {
margin: 0 0 4px;
font-size: 1.2rem;
color: var(--navy-900);
letter-spacing: -.01em;
transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.cov-spot-row:hover .cov-spot-row-title { transform: translateX(3px); }
.cov-spot-row-desc {
margin: 0;
color: var(--slate-500);
font-size: 14px;
line-height: 1.55;
}
.cov-spot-row-cta {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--slate-500);
transition: color .4s ease;
}
.cov-spot-row:hover .cov-spot-row-cta { color: var(--gold-500); }
.cov-spot-row-cta-arrow {
position: relative;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--slate-50);
border: 1px solid var(--slate-100);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
transition:
background .4s ease,
color .4s ease,
border-color .4s ease,
transform .55s cubic-bezier(.22, 1, .36, 1),
box-shadow .45s ease;
}
.cov-spot-row-cta-arrow svg {
width: 16px; height: 16px;
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.cov-spot-row:hover .cov-spot-row-cta-arrow {
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
border-color: var(--navy-900);
color: #fff;
transform: rotate(-45deg);
box-shadow: 0 14px 26px -6px rgba(10, 31, 61, .4);
}
.cov-spot-row:hover .cov-spot-row-cta-arrow svg { transform: rotate(45deg); }
@media (max-width: 800px) {
.cov-spot-row {
grid-template-columns: 70px 1fr;
grid-template-rows: auto auto;
gap: 16px;
padding: 20px 22px;
}
.cov-spot-row-index {
grid-column: 1; grid-row: 1;
font-size: 22px;
}
.cov-spot-row-icon {
grid-column: 1; grid-row: 2;
width: 70px; height: 70px;
}
.cov-spot-row-icon svg { width: 30px; height: 30px; }
.cov-spot-row-body {
grid-column: 2; grid-row: 1 / 3;
}
.cov-spot-row-cta { display: none; }
}
/* ---------- 5. FAQ : Glass card stack ---------- */
.cov-faq-section { position: relative; overflow: hidden; }
.cov-faq-glow {
position: absolute;
width: 360px; height: 360px;
border-radius: 50%;
pointer-events: none;
filter: blur(60px);
}
.cov-faq-glow-a {
top: 10%; left: -120px;
background: radial-gradient(circle, rgba(212, 160, 23, .22), transparent 70%);
}
.cov-faq-glow-b {
bottom: 10%; right: -120px;
background: radial-gradient(circle, rgba(30, 90, 168, .18), transparent 70%);
}
.cov-faq {
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.cov-faq-item {
position: relative;
background: var(--white);
border-radius: 20px;
border: 1px solid var(--slate-100);
overflow: hidden;
isolation: isolate;
margin-bottom: 0;
opacity: 0;
transform: translateY(28px);
transition:
opacity .7s cubic-bezier(.22, 1, .36, 1),
transform .75s cubic-bezier(.22, 1, .36, 1),
border-color .4s ease,
box-shadow .45s ease;
}
.cov-faq-item-header:hover { background: transparent; }
.cov-faq.visible .cov-faq-item {
opacity: 1;
transform: translateY(0);
transition:
opacity .8s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .08s),
transform .8s cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * .08s),
border-color .4s ease,
box-shadow .45s ease;
}
.cov-faq-item:hover {
border-color: rgba(212, 160, 23, .4);
box-shadow: 0 16px 38px -10px rgba(10, 31, 61, .14);
}
.cov-faq-item.open {
border-color: rgba(212, 160, 23, .6);
box-shadow: 0 24px 48px -12px rgba(212, 160, 23, .22);
}
.cov-faq-item-aura {
position: absolute;
inset: 0;
background: radial-gradient(circle at 0% 50%, rgba(212, 160, 23, .07), transparent 55%);
opacity: 0;
transition: opacity .55s ease;
pointer-events: none;
z-index: -1;
}
.cov-faq-item.open .cov-faq-item-aura,
.cov-faq-item:hover .cov-faq-item-aura { opacity: 1; }
.cov-faq-item-border {
position: absolute;
inset: 0;
border-radius: 20px;
padding: 1px;
background: linear-gradient(135deg, var(--gold-500), transparent 35%, transparent 65%, var(--navy-700));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity .55s ease;
pointer-events: none;
}
.cov-faq-item.open .cov-faq-item-border { opacity: 1; }
.cov-faq-item-header {
position: relative;
width: 100%;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
display: grid;
grid-template-columns: 60px 1fr 40px;
align-items: center;
gap: 18px;
padding: 22px 26px;
font-family: inherit;
z-index: 1;
}
.cov-faq-item-num {
position: relative;
width: 48px; height: 48px;
border-radius: 14px;
background: var(--slate-50);
color: var(--navy-900);
display: flex; align-items: center; justify-content: center;
transition:
background .45s ease,
color .45s ease,
transform .55s cubic-bezier(.34, 1.56, .64, 1),
border-radius .5s ease;
}
.cov-faq-item-num-text {
font-size: 14px;
font-weight: 800;
letter-spacing: -.01em;
position: relative;
z-index: 1;
}
.cov-faq-item-num-ring {
position: absolute;
inset: -6px;
border-radius: 18px;
border: 1.5px solid rgba(212, 160, 23, .4);
opacity: 0;
transform: scale(.7);
transition: opacity .4s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.cov-faq-item:hover .cov-faq-item-num {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
border-radius: 16px;
}
.cov-faq-item.open .cov-faq-item-num {
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: var(--gold-400);
transform: rotate(-8deg);
border-radius: 18px 14px 18px 14px;
}
.cov-faq-item.open .cov-faq-item-num-ring {
opacity: 1;
transform: scale(1);
animation: covFaqRing 6s linear infinite;
}
@keyframes covFaqRing {
from { transform: scale(1) rotate(0); }
to { transform: scale(1) rotate(360deg); }
}
.cov-faq-item-title {
font-size: 1.05rem;
font-weight: 600;
color: var(--navy-900);
letter-spacing: -.005em;
line-height: 1.45;
transition: transform .5s ease;
}
.cov-faq-item:hover .cov-faq-item-title { transform: translateX(2px); }
.cov-faq-item-toggle {
position: relative;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--slate-50);
border: 1px solid var(--slate-100);
display: flex; align-items: center; justify-content: center;
transition:
background .4s ease,
border-color .4s ease,
transform .55s cubic-bezier(.22, 1, .36, 1);
justify-self: end;
}
.cov-faq-item-toggle-bar {
position: absolute;
top: 50%; left: 50%;
width: 14px; height: 2px;
background: var(--navy-900);
border-radius: 2px;
transform: translate(-50%, -50%);
transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}
.cov-faq-item-toggle-bar-v {
transform: translate(-50%, -50%) rotate(90deg);
}
.cov-faq-item.open .cov-faq-item-toggle {
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
border-color: transparent;
transform: rotate(180deg);
}
.cov-faq-item.open .cov-faq-item-toggle-bar-v {
transform: translate(-50%, -50%) rotate(0deg);
opacity: 0;
}
.cov-faq-item-body {
max-height: 0;
overflow: hidden;
transition: max-height .55s cubic-bezier(.22, 1, .36, 1);
}
.cov-faq-item-body-inner {
position: relative;
padding: 0 26px 26px 104px;
color: var(--slate-500);
font-size: 14.5px;
line-height: 1.7;
}
.cov-faq-item-body-edge {
position: absolute;
left: 26px; top: 0;
width: 60px; height: 2px;
background: linear-gradient(90deg, var(--gold-500), transparent);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform .6s cubic-bezier(.22, 1, .36, 1) .1s;
}
.cov-faq-item.open .cov-faq-item-body-edge { transform: scaleX(1); }
@media (max-width: 640px) {
.cov-faq-item-header { grid-template-columns: 48px 1fr 32px; padding: 18px 20px; gap: 14px; }
.cov-faq-item-num { width: 40px; height: 40px; }
.cov-faq-item-num-text { font-size: 13px; }
.cov-faq-item-toggle { width: 30px; height: 30px; }
.cov-faq-item-body-inner { padding: 0 20px 22px 82px; }
.cov-faq-item-body-edge { left: 20px; }
}
/* ---------- Reduced motion — coverage page sections ---------- */
@media (prefers-reduced-motion: reduce) {
.cov-intro-aura,
.cov-intro-orbit,
.cov-intro-card-front,
.cov-intro-card-back,
.cov-intro-card-side,
.cov-intro-card-shine,
.cov-intro-card-bars > span,
.cov-intro-spark,
.cov-intro-eyebrow-dot,
.cov-intro-card-dot,
.cov-bento-cell-icon-ring,
.cov-bento-cell-dot,
.cov-rail-node-pulse,
.cov-faq-item-num-ring {
animation: none !important;
}
.cov-intro-pills li,
.cov-bento.visible .cov-bento-cell,
.cov-rail.visible .cov-rail-row,
.cov-spot.visible .cov-spot-row,
.cov-faq.visible .cov-faq-item {
opacity: 1 !important;
transform: none !important;
transition: opacity .4s ease !important;
}
.cov-rail-spine-fill { height: 100% !important; transition: none !important; }
}
/* ============================================================
COVERAGE-PAGE PER-CATEGORY THEMES
Each body[data-page="..."] gets its own accent, background
pattern, hero motif and section-tint — while keeping the
brand navy + gold palette as the foundation.
============================================================ */
/* ---------- VEHICLE PROTECTION : steel-blue / chrome ---------- */
body[data-page="vehicle-protection"] {
--cov-accent: #2563eb;
--cov-accent-soft: rgba(37, 99, 235, .18);
--cov-accent-glow: rgba(37, 99, 235, .35);
}
body[data-page="vehicle-protection"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(15, 42, 82, .82) 50%, rgba(37, 99, 235, .35) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 80px 20px;
}
body[data-page="vehicle-protection"] .page-banner::after {
background: radial-gradient(ellipse, rgba(37, 99, 235, .45), transparent 70%);
}
body[data-page="vehicle-protection"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(37, 99, 235, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 120px 120px;
}
body[data-page="vehicle-protection"] .cov-intro-section::before {
content: '';
position: absolute;
top: 18%; right: 4%;
width: 280px; height: 280px;
background:
radial-gradient(circle, rgba(37, 99, 235, .18) 0%, transparent 70%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
filter: blur(.5px);
}
body[data-page="vehicle-protection"] .cov-intro-bg-line-a {
background: linear-gradient(90deg, transparent, rgba(37, 99, 235, .45), transparent);
}
body[data-page="vehicle-protection"] .cov-intro-eyebrow-dot { background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, .18); }
body[data-page="vehicle-protection"] .cov-intro-card-back {
background: linear-gradient(135deg, #0a1f3d, #1e3a8a);
}
body[data-page="vehicle-protection"] .cov-intro-card-tag { color: #93c5fd; }
body[data-page="vehicle-protection"] .cov-intro-card-bars > span {
background: linear-gradient(180deg, #60a5fa, #2563eb);
}
body[data-page="vehicle-protection"] .cov-intro-orbit-2 { border-color: rgba(37, 99, 235, .45); }
body[data-page="vehicle-protection"] .cov-intro-orbit-2::before { background: #2563eb; box-shadow: 0 0 12px #2563eb; }
body[data-page="vehicle-protection"] .cov-intro-spark-2 { background: #60a5fa; box-shadow: 0 0 10px #60a5fa; }
body[data-page="vehicle-protection"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #0a1f3d 0%, #1e3a8a 100%);
background-size: 60px 40px, auto;
}
body[data-page="vehicle-protection"] .cov-bento-cell-0 .cov-bento-cell-bg {
background:
radial-gradient(circle at 0% 100%, rgba(96, 165, 250, .45), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .35), transparent 60%);
}
body[data-page="vehicle-protection"] .cov-spot-row:hover {
background: linear-gradient(135deg, #fff 0%, rgba(219, 234, 254, .5) 100%);
border-color: rgba(37, 99, 235, .5);
}
body[data-page="vehicle-protection"] .cov-spot-row-icon-orb {
background: radial-gradient(circle, rgba(37, 99, 235, .55), transparent 60%);
}
body[data-page="vehicle-protection"] .cov-faq-glow-b {
background: radial-gradient(circle, rgba(37, 99, 235, .26), transparent 70%);
}
body[data-page="vehicle-protection"] .cov-rail-row:hover .cov-rail-card {
border-color: rgba(37, 99, 235, .55);
}
/* ---------- PROPERTY PROTECTION : terracotta / warm sand ---------- */
body[data-page="property-protection"] {
--cov-accent: #c2410c;
--cov-accent-soft: rgba(194, 65, 12, .18);
--cov-accent-glow: rgba(194, 65, 12, .35);
}
body[data-page="property-protection"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(120, 53, 15, .55) 60%, rgba(194, 65, 12, .35) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 30px 30px;
}
body[data-page="property-protection"] .page-banner::after {
background: radial-gradient(ellipse, rgba(251, 146, 60, .45), transparent 70%);
}
body[data-page="property-protection"] .cov-intro-section {
background:
linear-gradient(180deg, rgba(254, 247, 237, .55) 0%, transparent 60%),
url('data:image/svg+xml;utf8,');
background-size: auto, 40px 40px;
}
body[data-page="property-protection"] .cov-intro-section::before {
content: '';
position: absolute;
top: 14%; right: 6%;
width: 240px; height: 240px;
background:
radial-gradient(circle at 50% 30%, rgba(251, 191, 36, .25) 0%, transparent 60%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="property-protection"] .cov-intro-bg-line-a {
background: linear-gradient(90deg, transparent, rgba(194, 65, 12, .45), transparent);
}
body[data-page="property-protection"] .cov-intro-bg-line-b {
background: linear-gradient(90deg, transparent, rgba(251, 146, 60, .35), transparent);
}
body[data-page="property-protection"] .cov-intro-eyebrow-dot { background: #c2410c; box-shadow: 0 0 0 4px rgba(194, 65, 12, .18); }
body[data-page="property-protection"] .cov-intro-card-back {
background: linear-gradient(135deg, #7c2d12, #c2410c);
}
body[data-page="property-protection"] .cov-intro-card-tag { color: #fed7aa; }
body[data-page="property-protection"] .cov-intro-card-bars > span {
background: linear-gradient(180deg, #fb923c, #c2410c);
border-radius: 1px 1px 0 0;
}
body[data-page="property-protection"] .cov-intro-orbit-2 { border-color: rgba(194, 65, 12, .4); }
body[data-page="property-protection"] .cov-intro-orbit-2::before { background: #c2410c; box-shadow: 0 0 12px #c2410c; }
body[data-page="property-protection"] .cov-intro-spark-1 { background: #fbbf24; box-shadow: 0 0 12px #fbbf24; }
body[data-page="property-protection"] .cov-intro-card-front {
background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%);
}
body[data-page="property-protection"] .section-alt {
background: linear-gradient(180deg, #fffaf0 0%, #fef3c7 100%);
}
body[data-page="property-protection"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #7c2d12 0%, #c2410c 100%);
background-size: 32px 32px, auto;
}
body[data-page="property-protection"] .cov-bento-cell-0 .cov-bento-cell-bg {
background:
radial-gradient(circle at 0% 100%, rgba(251, 191, 36, .5), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(254, 215, 170, .35), transparent 60%);
}
body[data-page="property-protection"] .cov-spot-row:hover {
background: linear-gradient(135deg, #fff 0%, rgba(254, 215, 170, .45) 100%);
border-color: rgba(194, 65, 12, .55);
}
body[data-page="property-protection"] .cov-spot-row-icon-orb {
background: radial-gradient(circle, rgba(194, 65, 12, .55), transparent 60%);
}
body[data-page="property-protection"] .cov-faq-glow-b {
background: radial-gradient(circle, rgba(194, 65, 12, .26), transparent 70%);
}
body[data-page="property-protection"] .cov-faq-glow-a {
background: radial-gradient(circle, rgba(251, 191, 36, .3), transparent 70%);
}
body[data-page="property-protection"] .cov-rail-row:hover .cov-rail-card {
border-color: rgba(194, 65, 12, .55);
}
/* ---------- BUSINESS PROTECTION : corporate indigo / violet ---------- */
body[data-page="business-protection"] {
--cov-accent: #6d28d9;
--cov-accent-soft: rgba(109, 40, 217, .18);
--cov-accent-glow: rgba(109, 40, 217, .35);
}
body[data-page="business-protection"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .94), rgba(46, 16, 101, .75) 55%, rgba(109, 40, 217, .35) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 80px 80px;
}
body[data-page="business-protection"] .page-banner::after {
background: radial-gradient(ellipse, rgba(167, 139, 250, .55), transparent 70%);
}
body[data-page="business-protection"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(109, 40, 217, .05) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 100px 100px;
}
body[data-page="business-protection"] .cov-intro-section::before {
content: '';
position: absolute;
top: 16%; right: 4%;
width: 280px; height: 200px;
background:
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="business-protection"] .cov-intro-bg-line-a {
background: linear-gradient(90deg, transparent, rgba(109, 40, 217, .5), transparent);
}
body[data-page="business-protection"] .cov-intro-bg-line-b {
background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .35), transparent);
}
body[data-page="business-protection"] .cov-intro-eyebrow-dot { background: #6d28d9; box-shadow: 0 0 0 4px rgba(109, 40, 217, .18); }
body[data-page="business-protection"] .cov-intro-card-back {
background: linear-gradient(135deg, #2e1065, #6d28d9);
}
body[data-page="business-protection"] .cov-intro-card-tag { color: #c4b5fd; }
body[data-page="business-protection"] .cov-intro-card-bars > span {
background: linear-gradient(180deg, #a78bfa, #6d28d9);
}
body[data-page="business-protection"] .cov-intro-orbit-2 { border-color: rgba(109, 40, 217, .45); }
body[data-page="business-protection"] .cov-intro-orbit-2::before { background: #6d28d9; box-shadow: 0 0 12px #6d28d9; }
body[data-page="business-protection"] .cov-intro-spark-2 { background: #c4b5fd; box-shadow: 0 0 12px #c4b5fd; }
body[data-page="business-protection"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%);
background-size: 60px 60px, auto;
}
body[data-page="business-protection"] .cov-bento-cell-0 .cov-bento-cell-bg {
background:
radial-gradient(circle at 0% 100%, rgba(167, 139, 250, .5), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .3), transparent 60%);
}
body[data-page="business-protection"] .cov-spot-row:hover {
background: linear-gradient(135deg, #fff 0%, rgba(237, 233, 254, .5) 100%);
border-color: rgba(109, 40, 217, .55);
}
body[data-page="business-protection"] .cov-spot-row-icon-orb {
background: radial-gradient(circle, rgba(109, 40, 217, .55), transparent 60%);
}
body[data-page="business-protection"] .cov-faq-glow-b {
background: radial-gradient(circle, rgba(109, 40, 217, .28), transparent 70%);
}
body[data-page="business-protection"] .cov-rail-row:hover .cov-rail-card {
border-color: rgba(109, 40, 217, .55);
}
/* ---------- FINANCIAL SECURITY : emerald / forest ---------- */
body[data-page="financial-security"] {
--cov-accent: #047857;
--cov-accent-soft: rgba(4, 120, 87, .18);
--cov-accent-glow: rgba(4, 120, 87, .4);
}
body[data-page="financial-security"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(6, 78, 59, .65) 50%, rgba(4, 120, 87, .4) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 100px 40px;
background-repeat: repeat;
}
body[data-page="financial-security"] .page-banner::after {
background: radial-gradient(ellipse, rgba(52, 211, 153, .45), transparent 70%);
}
body[data-page="financial-security"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(4, 120, 87, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 120px 80px;
}
body[data-page="financial-security"] .cov-intro-section::before {
content: '';
position: absolute;
top: 12%; right: 4%;
width: 280px; height: 280px;
background:
radial-gradient(circle, rgba(52, 211, 153, .14) 0%, transparent 60%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="financial-security"] .cov-intro-bg-line-a {
background: linear-gradient(90deg, transparent, rgba(4, 120, 87, .45), transparent);
}
body[data-page="financial-security"] .cov-intro-bg-line-b {
background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .4), transparent);
}
body[data-page="financial-security"] .cov-intro-eyebrow-dot { background: #047857; box-shadow: 0 0 0 4px rgba(4, 120, 87, .18); }
body[data-page="financial-security"] .cov-intro-card-back {
background: linear-gradient(135deg, #064e3b, #047857);
}
body[data-page="financial-security"] .cov-intro-card-tag { color: #6ee7b7; }
body[data-page="financial-security"] .cov-intro-card-bars > span {
background: linear-gradient(180deg, #34d399, #047857);
}
/* Ascending growth — each bar progressively taller using nth-child */
body[data-page="financial-security"] .cov-intro-card-bars > span:nth-child(1) { height: 35% !important; }
body[data-page="financial-security"] .cov-intro-card-bars > span:nth-child(2) { height: 55% !important; }
body[data-page="financial-security"] .cov-intro-card-bars > span:nth-child(3) { height: 75% !important; }
body[data-page="financial-security"] .cov-intro-card-bars > span:nth-child(4) { height: 100% !important; }
body[data-page="financial-security"] .cov-intro-orbit-2 { border-color: rgba(4, 120, 87, .45); }
body[data-page="financial-security"] .cov-intro-orbit-2::before { background: #047857; box-shadow: 0 0 12px #047857; }
body[data-page="financial-security"] .cov-intro-spark-2 { background: #34d399; box-shadow: 0 0 12px #34d399; }
body[data-page="financial-security"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #064e3b 0%, #047857 100%);
background-size: 80px 50px, auto;
}
body[data-page="financial-security"] .cov-bento-cell-0 .cov-bento-cell-bg {
background:
radial-gradient(circle at 0% 100%, rgba(52, 211, 153, .5), transparent 55%),
radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .35), transparent 60%);
}
body[data-page="financial-security"] .cov-spot-row:hover {
background: linear-gradient(135deg, #fff 0%, rgba(209, 250, 229, .55) 100%);
border-color: rgba(4, 120, 87, .55);
}
body[data-page="financial-security"] .cov-spot-row-icon-orb {
background: radial-gradient(circle, rgba(4, 120, 87, .55), transparent 60%);
}
body[data-page="financial-security"] .cov-faq-glow-b {
background: radial-gradient(circle, rgba(4, 120, 87, .28), transparent 70%);
}
body[data-page="financial-security"] .cov-rail-row:hover .cov-rail-card {
border-color: rgba(4, 120, 87, .55);
}
/* ---------- PERSONAL PROTECTION : keep brand gold/navy, add subtle people motif ---------- */
body[data-page="personal-protection"] .cov-intro-section::before {
content: '';
position: absolute;
top: 16%; right: 6%;
width: 240px; height: 240px;
background:
radial-gradient(circle, rgba(212, 160, 23, .12) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
/* ============================================================
INVESTMENT-PAGE PER-CATEGORY THEMES
Same cov-* layout primitives, themed per service.
============================================================ */
/* ---------- MUTUAL FUNDS : cobalt blue / diversified ---------- */
body[data-page="mutual-funds"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(15, 42, 82, .8) 50%, rgba(30, 64, 175, .4) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 80px 80px;
}
body[data-page="mutual-funds"] .page-banner::after {
background: radial-gradient(ellipse, rgba(96, 165, 250, .5), transparent 70%);
}
body[data-page="mutual-funds"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(30, 64, 175, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 80px 80px;
}
body[data-page="mutual-funds"] .cov-intro-section::before {
content: '';
position: absolute;
top: 14%; right: 4%;
width: 280px; height: 280px;
background:
radial-gradient(circle, rgba(30, 64, 175, .15) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="mutual-funds"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(30, 64, 175, .45), transparent); }
body[data-page="mutual-funds"] .cov-intro-eyebrow-dot { background: #1e40af; box-shadow: 0 0 0 4px rgba(30, 64, 175, .18); }
body[data-page="mutual-funds"] .cov-intro-card-back { background: linear-gradient(135deg, #0a1f3d, #1e40af); }
body[data-page="mutual-funds"] .cov-intro-card-tag { color: #93c5fd; }
body[data-page="mutual-funds"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #60a5fa, #1e40af); }
body[data-page="mutual-funds"] .cov-intro-orbit-2 { border-color: rgba(30, 64, 175, .45); }
body[data-page="mutual-funds"] .cov-intro-orbit-2::before { background: #1e40af; box-shadow: 0 0 12px #1e40af; }
body[data-page="mutual-funds"] .cov-intro-spark-2 { background: #60a5fa; box-shadow: 0 0 10px #60a5fa; }
body[data-page="mutual-funds"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #0a1f3d 0%, #1e3a8a 50%, #1e40af 100%);
background-size: 40px 40px, auto;
}
body[data-page="mutual-funds"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(96, 165, 250, .5), transparent 55%), radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .35), transparent 60%); }
body[data-page="mutual-funds"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(219, 234, 254, .5) 100%); border-color: rgba(30, 64, 175, .55); }
body[data-page="mutual-funds"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(30, 64, 175, .55), transparent 60%); }
body[data-page="mutual-funds"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(30, 64, 175, .28), transparent 70%); }
body[data-page="mutual-funds"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(30, 64, 175, .55); }
/* ---------- SIP PLANS : teal / recurring waves ---------- */
body[data-page="sip-plans"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(15, 70, 80, .75) 50%, rgba(13, 148, 136, .4) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 100px 30px;
}
body[data-page="sip-plans"] .page-banner::after {
background: radial-gradient(ellipse, rgba(45, 212, 191, .5), transparent 70%);
}
body[data-page="sip-plans"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(13, 148, 136, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 120px 40px;
}
body[data-page="sip-plans"] .cov-intro-section::before {
content: '';
position: absolute;
top: 14%; right: 4%;
width: 260px; height: 260px;
background:
radial-gradient(circle, rgba(13, 148, 136, .15) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="sip-plans"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(13, 148, 136, .45), transparent); }
body[data-page="sip-plans"] .cov-intro-eyebrow-dot { background: #0d9488; box-shadow: 0 0 0 4px rgba(13, 148, 136, .18); }
body[data-page="sip-plans"] .cov-intro-card-back { background: linear-gradient(135deg, #134e4a, #0d9488); }
body[data-page="sip-plans"] .cov-intro-card-tag { color: #5eead4; }
body[data-page="sip-plans"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #2dd4bf, #0d9488); }
body[data-page="sip-plans"] .cov-intro-card-bars > span:nth-child(1),
body[data-page="sip-plans"] .cov-intro-card-bars > span:nth-child(2),
body[data-page="sip-plans"] .cov-intro-card-bars > span:nth-child(3),
body[data-page="sip-plans"] .cov-intro-card-bars > span:nth-child(4) { height: 65% !important; }
body[data-page="sip-plans"] .cov-intro-orbit-2 { border-color: rgba(13, 148, 136, .45); }
body[data-page="sip-plans"] .cov-intro-orbit-2::before { background: #0d9488; box-shadow: 0 0 12px #0d9488; }
body[data-page="sip-plans"] .cov-intro-spark-2 { background: #5eead4; box-shadow: 0 0 10px #5eead4; }
body[data-page="sip-plans"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #134e4a 0%, #0d9488 100%);
background-size: 100px 30px, auto;
}
body[data-page="sip-plans"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(94, 234, 212, .5), transparent 55%), radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .35), transparent 60%); }
body[data-page="sip-plans"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(204, 251, 241, .5) 100%); border-color: rgba(13, 148, 136, .55); }
body[data-page="sip-plans"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(13, 148, 136, .55), transparent 60%); }
body[data-page="sip-plans"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(13, 148, 136, .28), transparent 70%); }
body[data-page="sip-plans"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(13, 148, 136, .55); }
/* ---------- FIXED INCOME PLANS : slate gray / stable ladder ---------- */
body[data-page="fixed-income-plans"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .93), rgba(30, 41, 59, .85) 50%, rgba(71, 85, 105, .5) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 60px 60px;
}
body[data-page="fixed-income-plans"] .page-banner::after {
background: radial-gradient(ellipse, rgba(148, 163, 184, .45), transparent 70%);
}
body[data-page="fixed-income-plans"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(71, 85, 105, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 80px 40px;
}
body[data-page="fixed-income-plans"] .cov-intro-section::before {
content: '';
position: absolute;
top: 14%; right: 4%;
width: 260px; height: 260px;
background:
radial-gradient(circle, rgba(71, 85, 105, .12) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="fixed-income-plans"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(71, 85, 105, .45), transparent); }
body[data-page="fixed-income-plans"] .cov-intro-eyebrow-dot { background: #475569; box-shadow: 0 0 0 4px rgba(71, 85, 105, .18); }
body[data-page="fixed-income-plans"] .cov-intro-card-back { background: linear-gradient(135deg, #1e293b, #475569); }
body[data-page="fixed-income-plans"] .cov-intro-card-tag { color: #cbd5e1; }
body[data-page="fixed-income-plans"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #94a3b8, #475569); }
body[data-page="fixed-income-plans"] .cov-intro-card-bars > span:nth-child(1) { height: 70% !important; }
body[data-page="fixed-income-plans"] .cov-intro-card-bars > span:nth-child(2) { height: 72% !important; }
body[data-page="fixed-income-plans"] .cov-intro-card-bars > span:nth-child(3) { height: 75% !important; }
body[data-page="fixed-income-plans"] .cov-intro-card-bars > span:nth-child(4) { height: 78% !important; }
body[data-page="fixed-income-plans"] .cov-intro-orbit-2 { border-color: rgba(71, 85, 105, .45); }
body[data-page="fixed-income-plans"] .cov-intro-orbit-2::before { background: #475569; box-shadow: 0 0 12px #475569; }
body[data-page="fixed-income-plans"] .cov-intro-spark-2 { background: #cbd5e1; box-shadow: 0 0 10px #cbd5e1; }
body[data-page="fixed-income-plans"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #1e293b 0%, #475569 100%);
background-size: 40px 40px, auto;
}
body[data-page="fixed-income-plans"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(148, 163, 184, .5), transparent 55%), radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .35), transparent 60%); }
body[data-page="fixed-income-plans"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(241, 245, 249, .6) 100%); border-color: rgba(71, 85, 105, .55); }
body[data-page="fixed-income-plans"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(71, 85, 105, .55), transparent 60%); }
body[data-page="fixed-income-plans"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(71, 85, 105, .28), transparent 70%); }
body[data-page="fixed-income-plans"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(71, 85, 105, .55); }
/* ---------- ULIP PLANS : plum magenta / hybrid ---------- */
body[data-page="ulip-plans"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(74, 14, 78, .75) 50%, rgba(162, 28, 175, .4) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 60px 60px;
}
body[data-page="ulip-plans"] .page-banner::after {
background: radial-gradient(ellipse, rgba(232, 121, 249, .5), transparent 70%);
}
body[data-page="ulip-plans"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(162, 28, 175, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 80px 80px;
}
body[data-page="ulip-plans"] .cov-intro-section::before {
content: '';
position: absolute;
top: 14%; right: 4%;
width: 260px; height: 260px;
background:
radial-gradient(circle, rgba(162, 28, 175, .15) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="ulip-plans"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(162, 28, 175, .45), transparent); }
body[data-page="ulip-plans"] .cov-intro-bg-line-b { background: linear-gradient(90deg, transparent, rgba(232, 121, 249, .35), transparent); }
body[data-page="ulip-plans"] .cov-intro-eyebrow-dot { background: #a21caf; box-shadow: 0 0 0 4px rgba(162, 28, 175, .18); }
body[data-page="ulip-plans"] .cov-intro-card-back { background: linear-gradient(135deg, #4a044e, #a21caf); }
body[data-page="ulip-plans"] .cov-intro-card-tag { color: #f0abfc; }
body[data-page="ulip-plans"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #e879f9, #a21caf); }
body[data-page="ulip-plans"] .cov-intro-orbit-2 { border-color: rgba(162, 28, 175, .45); }
body[data-page="ulip-plans"] .cov-intro-orbit-2::before { background: #a21caf; box-shadow: 0 0 12px #a21caf; }
body[data-page="ulip-plans"] .cov-intro-spark-2 { background: #f0abfc; box-shadow: 0 0 10px #f0abfc; }
body[data-page="ulip-plans"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #4a044e 0%, #a21caf 100%);
background-size: 50px 50px, auto;
}
body[data-page="ulip-plans"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(232, 121, 249, .5), transparent 55%), radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .35), transparent 60%); }
body[data-page="ulip-plans"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(250, 232, 255, .55) 100%); border-color: rgba(162, 28, 175, .55); }
body[data-page="ulip-plans"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(162, 28, 175, .55), transparent 60%); }
body[data-page="ulip-plans"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(162, 28, 175, .28), transparent 70%); }
body[data-page="ulip-plans"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(162, 28, 175, .55); }
/* ---------- TAX SAVING : crimson / sharp savings ---------- */
body[data-page="tax-saving"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(76, 14, 30, .75) 50%, rgba(190, 18, 60, .4) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 40px 40px;
}
body[data-page="tax-saving"] .page-banner::after {
background: radial-gradient(ellipse, rgba(251, 113, 133, .5), transparent 70%);
}
body[data-page="tax-saving"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(190, 18, 60, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 60px 60px;
}
body[data-page="tax-saving"] .cov-intro-section::before {
content: '';
position: absolute;
top: 12%; right: 4%;
width: 260px; height: 260px;
background:
radial-gradient(circle, rgba(190, 18, 60, .15) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="tax-saving"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(190, 18, 60, .45), transparent); }
body[data-page="tax-saving"] .cov-intro-eyebrow-dot { background: #be123c; box-shadow: 0 0 0 4px rgba(190, 18, 60, .18); }
body[data-page="tax-saving"] .cov-intro-card-back { background: linear-gradient(135deg, #4c0519, #be123c); }
body[data-page="tax-saving"] .cov-intro-card-tag { color: #fda4af; }
body[data-page="tax-saving"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #fb7185, #be123c); }
body[data-page="tax-saving"] .cov-intro-card-bars > span:nth-child(1) { height: 95% !important; }
body[data-page="tax-saving"] .cov-intro-card-bars > span:nth-child(2) { height: 70% !important; }
body[data-page="tax-saving"] .cov-intro-card-bars > span:nth-child(3) { height: 50% !important; }
body[data-page="tax-saving"] .cov-intro-card-bars > span:nth-child(4) { height: 32% !important; }
body[data-page="tax-saving"] .cov-intro-orbit-2 { border-color: rgba(190, 18, 60, .45); }
body[data-page="tax-saving"] .cov-intro-orbit-2::before { background: #be123c; box-shadow: 0 0 12px #be123c; }
body[data-page="tax-saving"] .cov-intro-spark-2 { background: #fda4af; box-shadow: 0 0 10px #fda4af; }
body[data-page="tax-saving"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #4c0519 0%, #be123c 100%);
background-size: 40px 40px, auto;
}
body[data-page="tax-saving"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(251, 113, 133, .5), transparent 55%), radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .35), transparent 60%); }
body[data-page="tax-saving"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(255, 228, 230, .55) 100%); border-color: rgba(190, 18, 60, .55); }
body[data-page="tax-saving"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(190, 18, 60, .55), transparent 60%); }
body[data-page="tax-saving"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(190, 18, 60, .28), transparent 70%); }
body[data-page="tax-saving"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(190, 18, 60, .55); }
/* ---------- WEALTH MANAGEMENT : bronze amber / premium ---------- */
body[data-page="wealth-management"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(78, 39, 11, .7) 50%, rgba(180, 83, 9, .4) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 60px 60px;
}
body[data-page="wealth-management"] .page-banner::after {
background: radial-gradient(ellipse, rgba(251, 191, 36, .55), transparent 70%);
}
body[data-page="wealth-management"] .cov-intro-section {
background:
linear-gradient(180deg, rgba(254, 247, 235, .6) 0%, transparent 60%),
url('data:image/svg+xml;utf8,');
background-size: auto, 60px 60px;
}
body[data-page="wealth-management"] .cov-intro-section::before {
content: '';
position: absolute;
top: 12%; right: 4%;
width: 260px; height: 260px;
background:
radial-gradient(circle, rgba(251, 191, 36, .2) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="wealth-management"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(180, 83, 9, .45), transparent); }
body[data-page="wealth-management"] .cov-intro-bg-line-b { background: linear-gradient(90deg, transparent, rgba(251, 191, 36, .4), transparent); }
body[data-page="wealth-management"] .cov-intro-eyebrow-dot { background: #b45309; box-shadow: 0 0 0 4px rgba(180, 83, 9, .18); }
body[data-page="wealth-management"] .cov-intro-card-back { background: linear-gradient(135deg, #451a03, #b45309); }
body[data-page="wealth-management"] .cov-intro-card-tag { color: #fde68a; }
body[data-page="wealth-management"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #fbbf24, #b45309); }
body[data-page="wealth-management"] .cov-intro-card-front { background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 100%); }
body[data-page="wealth-management"] .cov-intro-orbit-2 { border-color: rgba(180, 83, 9, .45); }
body[data-page="wealth-management"] .cov-intro-orbit-2::before { background: #b45309; box-shadow: 0 0 12px #b45309; }
body[data-page="wealth-management"] .cov-intro-spark-1 { background: #fbbf24; box-shadow: 0 0 14px #fbbf24; }
body[data-page="wealth-management"] .section-alt { background: linear-gradient(180deg, #fffaf0 0%, #fef3c7 100%); }
body[data-page="wealth-management"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #451a03 0%, #b45309 100%);
background-size: 40px 40px, auto;
}
body[data-page="wealth-management"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(251, 191, 36, .55), transparent 55%), radial-gradient(circle at 100% 0%, rgba(254, 215, 170, .45), transparent 60%); }
body[data-page="wealth-management"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(254, 243, 199, .55) 100%); border-color: rgba(180, 83, 9, .55); }
body[data-page="wealth-management"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(180, 83, 9, .55), transparent 60%); }
body[data-page="wealth-management"] .cov-faq-glow-a { background: radial-gradient(circle, rgba(251, 191, 36, .3), transparent 70%); }
body[data-page="wealth-management"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(180, 83, 9, .28), transparent 70%); }
body[data-page="wealth-management"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(180, 83, 9, .55); }
/* ---------- PORTFOLIO MANAGEMENT : charcoal / analytical ---------- */
body[data-page="portfolio-management"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .94), rgba(15, 23, 42, .9) 50%, rgba(31, 41, 55, .55) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 70px 70px;
}
body[data-page="portfolio-management"] .page-banner::after {
background: radial-gradient(ellipse, rgba(212, 160, 23, .55), transparent 70%);
}
body[data-page="portfolio-management"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(31, 41, 55, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 80px 80px;
}
body[data-page="portfolio-management"] .cov-intro-section::before {
content: '';
position: absolute;
top: 12%; right: 4%;
width: 260px; height: 260px;
background:
radial-gradient(circle, rgba(31, 41, 55, .12) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="portfolio-management"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(31, 41, 55, .45), transparent); }
body[data-page="portfolio-management"] .cov-intro-bg-line-b { background: linear-gradient(90deg, transparent, rgba(212, 160, 23, .45), transparent); }
body[data-page="portfolio-management"] .cov-intro-eyebrow-dot { background: #1f2937; box-shadow: 0 0 0 4px rgba(31, 41, 55, .2); }
body[data-page="portfolio-management"] .cov-intro-card-back { background: linear-gradient(135deg, #0f172a, #1f2937); }
body[data-page="portfolio-management"] .cov-intro-card-tag { color: #d4a017; }
body[data-page="portfolio-management"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #94a3b8, #1f2937); }
body[data-page="portfolio-management"] .cov-intro-card-bars > span:nth-child(1) { height: 45% !important; background: linear-gradient(180deg, #d4a017, #b45309); }
body[data-page="portfolio-management"] .cov-intro-card-bars > span:nth-child(2) { height: 85% !important; }
body[data-page="portfolio-management"] .cov-intro-card-bars > span:nth-child(3) { height: 60% !important; background: linear-gradient(180deg, #94a3b8, #475569); }
body[data-page="portfolio-management"] .cov-intro-card-bars > span:nth-child(4) { height: 95% !important; }
body[data-page="portfolio-management"] .cov-intro-orbit-2 { border-color: rgba(31, 41, 55, .45); }
body[data-page="portfolio-management"] .cov-intro-orbit-2::before { background: #1f2937; box-shadow: 0 0 12px #1f2937; }
body[data-page="portfolio-management"] .cov-intro-spark-2 { background: #d4a017; box-shadow: 0 0 12px #d4a017; }
body[data-page="portfolio-management"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #0f172a 0%, #1f2937 100%);
background-size: 48px 48px, auto;
}
body[data-page="portfolio-management"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(148, 163, 184, .45), transparent 55%), radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .5), transparent 60%); }
body[data-page="portfolio-management"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(241, 245, 249, .6) 100%); border-color: rgba(31, 41, 55, .55); }
body[data-page="portfolio-management"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(31, 41, 55, .55), transparent 60%); }
body[data-page="portfolio-management"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(31, 41, 55, .3), transparent 70%); }
body[data-page="portfolio-management"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(31, 41, 55, .55); }
/* ---------- RETIREMENT PLANNING : deep ocean blue / calm horizon ---------- */
body[data-page="retirement-planning"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(12, 74, 110, .8) 50%, rgba(14, 116, 144, .4) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 120px 40px;
}
body[data-page="retirement-planning"] .page-banner::after {
background: radial-gradient(ellipse, rgba(56, 189, 248, .5), transparent 70%);
}
body[data-page="retirement-planning"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(12, 74, 110, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 120px 60px;
}
body[data-page="retirement-planning"] .cov-intro-section::before {
content: '';
position: absolute;
top: 12%; right: 4%;
width: 260px; height: 260px;
background:
radial-gradient(circle, rgba(12, 74, 110, .15) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="retirement-planning"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(12, 74, 110, .45), transparent); }
body[data-page="retirement-planning"] .cov-intro-eyebrow-dot { background: #0c4a6e; box-shadow: 0 0 0 4px rgba(12, 74, 110, .18); }
body[data-page="retirement-planning"] .cov-intro-card-back { background: linear-gradient(135deg, #082f49, #0c4a6e); }
body[data-page="retirement-planning"] .cov-intro-card-tag { color: #7dd3fc; }
body[data-page="retirement-planning"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #38bdf8, #0c4a6e); }
body[data-page="retirement-planning"] .cov-intro-card-bars > span:nth-child(1) { height: 45% !important; }
body[data-page="retirement-planning"] .cov-intro-card-bars > span:nth-child(2) { height: 65% !important; }
body[data-page="retirement-planning"] .cov-intro-card-bars > span:nth-child(3) { height: 85% !important; }
body[data-page="retirement-planning"] .cov-intro-card-bars > span:nth-child(4) { height: 95% !important; }
body[data-page="retirement-planning"] .cov-intro-orbit-2 { border-color: rgba(12, 74, 110, .45); }
body[data-page="retirement-planning"] .cov-intro-orbit-2::before { background: #0c4a6e; box-shadow: 0 0 12px #0c4a6e; }
body[data-page="retirement-planning"] .cov-intro-spark-2 { background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
body[data-page="retirement-planning"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #082f49 0%, #0c4a6e 100%);
background-size: 120px 40px, auto;
}
body[data-page="retirement-planning"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(56, 189, 248, .55), transparent 55%), radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .35), transparent 60%); }
body[data-page="retirement-planning"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(224, 242, 254, .55) 100%); border-color: rgba(12, 74, 110, .55); }
body[data-page="retirement-planning"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(12, 74, 110, .55), transparent 60%); }
body[data-page="retirement-planning"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(12, 74, 110, .28), transparent 70%); }
body[data-page="retirement-planning"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(12, 74, 110, .55); }
/* ---------- CHILD EDUCATION : coral pink / warm future ---------- */
body[data-page="child-education"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(131, 24, 67, .65) 50%, rgba(219, 39, 119, .4) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 30px 30px;
}
body[data-page="child-education"] .page-banner::after {
background: radial-gradient(ellipse, rgba(244, 114, 182, .55), transparent 70%);
}
body[data-page="child-education"] .cov-intro-section {
background:
linear-gradient(180deg, rgba(253, 242, 248, .5) 0%, transparent 60%),
url('data:image/svg+xml;utf8,');
background-size: auto, 50px 50px;
}
body[data-page="child-education"] .cov-intro-section::before {
content: '';
position: absolute;
top: 12%; right: 4%;
width: 260px; height: 260px;
background:
radial-gradient(circle, rgba(219, 39, 119, .14) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="child-education"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(219, 39, 119, .45), transparent); }
body[data-page="child-education"] .cov-intro-bg-line-b { background: linear-gradient(90deg, transparent, rgba(244, 114, 182, .4), transparent); }
body[data-page="child-education"] .cov-intro-eyebrow-dot { background: #db2777; box-shadow: 0 0 0 4px rgba(219, 39, 119, .18); }
body[data-page="child-education"] .cov-intro-card-back { background: linear-gradient(135deg, #500724, #db2777); }
body[data-page="child-education"] .cov-intro-card-tag { color: #fbcfe8; }
body[data-page="child-education"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #f472b6, #db2777); }
body[data-page="child-education"] .cov-intro-card-bars > span:nth-child(1) { height: 30% !important; }
body[data-page="child-education"] .cov-intro-card-bars > span:nth-child(2) { height: 50% !important; }
body[data-page="child-education"] .cov-intro-card-bars > span:nth-child(3) { height: 75% !important; }
body[data-page="child-education"] .cov-intro-card-bars > span:nth-child(4) { height: 100% !important; }
body[data-page="child-education"] .cov-intro-card-front { background: linear-gradient(160deg, #fff 0%, #fce7f3 100%); }
body[data-page="child-education"] .cov-intro-orbit-2 { border-color: rgba(219, 39, 119, .45); }
body[data-page="child-education"] .cov-intro-orbit-2::before { background: #db2777; box-shadow: 0 0 12px #db2777; }
body[data-page="child-education"] .cov-intro-spark-1 { background: #fbcfe8; box-shadow: 0 0 12px #fbcfe8; }
body[data-page="child-education"] .cov-intro-spark-3 { background: #f472b6; box-shadow: 0 0 10px #f472b6; }
body[data-page="child-education"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #500724 0%, #db2777 100%);
background-size: 30px 30px, auto;
}
body[data-page="child-education"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(244, 114, 182, .55), transparent 55%), radial-gradient(circle at 100% 0%, rgba(251, 191, 36, .35), transparent 60%); }
body[data-page="child-education"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(252, 231, 243, .55) 100%); border-color: rgba(219, 39, 119, .55); }
body[data-page="child-education"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(219, 39, 119, .55), transparent 60%); }
body[data-page="child-education"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(219, 39, 119, .28), transparent 70%); }
body[data-page="child-education"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(219, 39, 119, .55); }
/* ---------- NPS & PENSION : olive green / mature ground ---------- */
body[data-page="nps-pension"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(54, 83, 20, .7) 50%, rgba(101, 163, 13, .35) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 80px 40px;
}
body[data-page="nps-pension"] .page-banner::after {
background: radial-gradient(ellipse, rgba(163, 230, 53, .55), transparent 70%);
}
body[data-page="nps-pension"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(101, 163, 13, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 100px 50px;
}
body[data-page="nps-pension"] .cov-intro-section::before {
content: '';
position: absolute;
top: 14%; right: 4%;
width: 260px; height: 260px;
background:
radial-gradient(circle, rgba(101, 163, 13, .15) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="nps-pension"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(101, 163, 13, .45), transparent); }
body[data-page="nps-pension"] .cov-intro-eyebrow-dot { background: #65a30d; box-shadow: 0 0 0 4px rgba(101, 163, 13, .18); }
body[data-page="nps-pension"] .cov-intro-card-back { background: linear-gradient(135deg, #1a2e05, #65a30d); }
body[data-page="nps-pension"] .cov-intro-card-tag { color: #bef264; }
body[data-page="nps-pension"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #a3e635, #65a30d); }
body[data-page="nps-pension"] .cov-intro-card-bars > span:nth-child(1) { height: 25% !important; }
body[data-page="nps-pension"] .cov-intro-card-bars > span:nth-child(2) { height: 50% !important; }
body[data-page="nps-pension"] .cov-intro-card-bars > span:nth-child(3) { height: 75% !important; }
body[data-page="nps-pension"] .cov-intro-card-bars > span:nth-child(4) { height: 100% !important; }
body[data-page="nps-pension"] .cov-intro-orbit-2 { border-color: rgba(101, 163, 13, .45); }
body[data-page="nps-pension"] .cov-intro-orbit-2::before { background: #65a30d; box-shadow: 0 0 12px #65a30d; }
body[data-page="nps-pension"] .cov-intro-spark-2 { background: #a3e635; box-shadow: 0 0 10px #a3e635; }
body[data-page="nps-pension"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #1a2e05 0%, #4d7c0f 60%, #65a30d 100%);
background-size: 80px 40px, auto;
}
body[data-page="nps-pension"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(163, 230, 53, .55), transparent 55%), radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .35), transparent 60%); }
body[data-page="nps-pension"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(236, 252, 203, .55) 100%); border-color: rgba(101, 163, 13, .55); }
body[data-page="nps-pension"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(101, 163, 13, .55), transparent 60%); }
body[data-page="nps-pension"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(101, 163, 13, .28), transparent 70%); }
body[data-page="nps-pension"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(101, 163, 13, .55); }
/* ============================================================
SERVICES PAGE THEME : royal indigo / advisory
============================================================ */
body[data-page="services"] .page-banner {
background:
linear-gradient(135deg, rgba(7, 23, 46, .92), rgba(30, 27, 75, .85) 50%, rgba(55, 48, 163, .42) 100%),
url('data:image/svg+xml;utf8,');
background-size: auto, 80px 80px;
}
body[data-page="services"] .page-banner::after {
background: radial-gradient(ellipse, rgba(129, 140, 248, .5), transparent 70%);
}
body[data-page="services"] .cov-intro-section {
background:
linear-gradient(180deg, transparent, rgba(55, 48, 163, .04) 50%, transparent),
url('data:image/svg+xml;utf8,');
background-size: auto, 100px 100px;
}
body[data-page="services"] .cov-intro-section::before {
content: '';
position: absolute;
top: 12%; right: 4%;
width: 280px; height: 280px;
background:
radial-gradient(circle, rgba(55, 48, 163, .16) 0%, transparent 65%),
url('data:image/svg+xml;utf8,') center/contain no-repeat;
pointer-events: none;
}
body[data-page="services"] .cov-intro-bg-line-a { background: linear-gradient(90deg, transparent, rgba(55, 48, 163, .45), transparent); }
body[data-page="services"] .cov-intro-bg-line-b { background: linear-gradient(90deg, transparent, rgba(129, 140, 248, .35), transparent); }
body[data-page="services"] .cov-intro-eyebrow-dot { background: #3730a3; box-shadow: 0 0 0 4px rgba(55, 48, 163, .2); }
body[data-page="services"] .cov-intro-card-back { background: linear-gradient(135deg, #1e1b4b, #3730a3); }
body[data-page="services"] .cov-intro-card-tag { color: #c7d2fe; }
body[data-page="services"] .cov-intro-card-bars > span { background: linear-gradient(180deg, #818cf8, #3730a3); }
body[data-page="services"] .cov-intro-orbit-2 { border-color: rgba(55, 48, 163, .45); }
body[data-page="services"] .cov-intro-orbit-2::before { background: #3730a3; box-shadow: 0 0 12px #3730a3; }
body[data-page="services"] .cov-intro-spark-2 { background: #c7d2fe; box-shadow: 0 0 12px #c7d2fe; }
body[data-page="services"] .cov-bento-cell-0 {
background:
url('data:image/svg+xml;utf8,'),
linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #3730a3 100%);
background-size: 60px 60px, auto;
}
body[data-page="services"] .cov-bento-cell-0 .cov-bento-cell-bg { background: radial-gradient(circle at 0% 100%, rgba(129, 140, 248, .55), transparent 55%), radial-gradient(circle at 100% 0%, rgba(212, 160, 23, .4), transparent 60%); }
body[data-page="services"] .cov-spot-row:hover { background: linear-gradient(135deg, #fff 0%, rgba(224, 231, 255, .55) 100%); border-color: rgba(55, 48, 163, .55); }
body[data-page="services"] .cov-spot-row-icon-orb { background: radial-gradient(circle, rgba(55, 48, 163, .55), transparent 60%); }
body[data-page="services"] .cov-faq-glow-b { background: radial-gradient(circle, rgba(55, 48, 163, .3), transparent 70%); }
body[data-page="services"] .cov-rail-row:hover .cov-rail-card { border-color: rgba(55, 48, 163, .55); }
/* ---------- RESPONSIVE TWEAKS for theme decorations ---------- */
@media (max-width: 900px) {
body[data-page="vehicle-protection"] .cov-intro-section::before,
body[data-page="property-protection"] .cov-intro-section::before,
body[data-page="business-protection"] .cov-intro-section::before,
body[data-page="financial-security"] .cov-intro-section::before,
body[data-page="personal-protection"] .cov-intro-section::before,
body[data-page="mutual-funds"] .cov-intro-section::before,
body[data-page="sip-plans"] .cov-intro-section::before,
body[data-page="fixed-income-plans"] .cov-intro-section::before,
body[data-page="ulip-plans"] .cov-intro-section::before,
body[data-page="tax-saving"] .cov-intro-section::before,
body[data-page="wealth-management"] .cov-intro-section::before,
body[data-page="portfolio-management"] .cov-intro-section::before,
body[data-page="retirement-planning"] .cov-intro-section::before,
body[data-page="child-education"] .cov-intro-section::before,
body[data-page="nps-pension"] .cov-intro-section::before,
body[data-page="services"] .cov-intro-section::before {
display: none;
}
}
/* =====================================================
SERVICES PAGE — Redesigned (Holographic Advisory)
Scoped under body[data-page="services"]
===================================================== */
body[data-page="services"] {
--srv-ink: #0b0a2e;
--srv-ink-soft: #312e81;
--srv-violet-deep: #4c1d95;
--srv-violet: #6d28d9;
--srv-violet-soft: #8b5cf6;
--srv-indigo: #4338ca;
--srv-cyan: #06b6d4;
--srv-cyan-light: #67e8f9;
--srv-amber: #f59e0b;
--srv-amber-light: #fbbf24;
--srv-line: rgba(109, 40, 217, .18);
--srv-glass-strong: rgba(255, 255, 255, .9);
--srv-shadow-soft: 0 30px 70px -25px rgba(76, 29, 149, .35);
--srv-shadow-deep: 0 40px 90px -25px rgba(76, 29, 149, .55);
}
body[data-page="services"] .page-banner {
background: linear-gradient(135deg, #0b0a2e 0%, #312e81 45%, #4338ca 80%, #6d28d9 100%);
position: relative;
overflow: hidden;
}
body[data-page="services"] .page-banner::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(800px 400px at 15% 30%, rgba(103, 232, 249, .25), transparent 60%),
radial-gradient(700px 500px at 85% 70%, rgba(245, 158, 11, .18), transparent 60%);
pointer-events: none;
}
body[data-page="services"] .page-banner::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 60px 60px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
pointer-events: none;
}
/* ---------- HERO : 3D card-stack ---------- */
.svc-hero {
position: relative;
padding: 100px 0 110px;
background:
radial-gradient(900px 600px at 85% -10%, rgba(103, 232, 249, .16), transparent 55%),
radial-gradient(900px 700px at -10% 110%, rgba(109, 40, 217, .14), transparent 55%),
linear-gradient(180deg, #faf9ff 0%, #f5f3ff 60%, #ede9fe 100%);
overflow: hidden;
}
.svc-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(109, 40, 217, .05) 1px, transparent 1px),
radial-gradient(circle at 70% 70%, rgba(6, 182, 212, .05) 1px, transparent 1px);
background-size: 36px 36px;
pointer-events: none;
}
.svc-hero-mesh {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: .55;
pointer-events: none;
animation: svc-mesh 14s ease-in-out infinite alternate;
}
.svc-hero-mesh-a {
width: 460px; height: 460px;
top: -120px; left: -120px;
background: radial-gradient(circle, rgba(109, 40, 217, .55), transparent 60%);
}
.svc-hero-mesh-b {
width: 520px; height: 520px;
bottom: -180px; right: -100px;
background: radial-gradient(circle, rgba(6, 182, 212, .45), transparent 60%);
animation-delay: -7s;
}
.svc-hero-grid {
position: relative;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 80px;
align-items: center;
}
.svc-hero-copy { position: relative; z-index: 2; }
.svc-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
border-radius: 999px;
background: linear-gradient(120deg, rgba(109,40,217,.1), rgba(6,182,212,.12));
border: 1px solid var(--srv-line);
color: var(--srv-violet-deep);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
}
.svc-hero-eyebrow::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--srv-violet);
box-shadow: 0 0 0 0 rgba(109, 40, 217, .55);
animation: svc-pulse 2.4s ease-out infinite;
}
.svc-hero-title {
font-size: clamp(2.2rem, 3.8vw, 3.4rem);
line-height: 1.08;
margin: 24px 0 22px;
color: var(--srv-ink);
letter-spacing: -.02em;
font-weight: 800;
}
.svc-hero-title em {
font-style: normal;
position: relative;
background: linear-gradient(120deg, var(--srv-violet), var(--srv-cyan));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.svc-hero-title em::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 3px;
background: linear-gradient(90deg, var(--srv-violet), var(--srv-cyan));
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
animation: svc-line 1.1s cubic-bezier(.22,.61,.36,1) forwards .5s;
}
.svc-hero-copy p {
font-size: 16px;
color: var(--slate-700);
margin: 0 0 14px;
max-width: 580px;
line-height: 1.7;
}
.svc-hero-chips {
list-style: none;
padding: 0;
margin: 28px 0 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.svc-hero-chips li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
background: var(--srv-glass-strong);
border: 1px solid var(--srv-line);
font-size: 13px;
font-weight: 600;
color: var(--srv-ink-soft);
box-shadow: 0 4px 14px rgba(76, 29, 149, .08);
opacity: 0;
transform: translateY(10px);
animation: svc-rise .55s ease forwards;
animation-delay: calc(.5s + var(--i) * .08s);
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc-hero-chips li:hover {
transform: translateY(-2px);
border-color: var(--srv-violet);
box-shadow: 0 8px 22px rgba(109, 40, 217, .22);
}
.svc-hero-chips svg {
width: 14px; height: 14px;
color: var(--srv-violet);
}
.svc-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 36px;
}
.svc-hero-cta .btn.btn-dark {
background: linear-gradient(120deg, var(--srv-violet-deep), var(--srv-violet));
border-color: transparent;
color: #fff;
box-shadow: 0 14px 40px -10px rgba(109, 40, 217, .55);
}
.svc-hero-cta .btn.btn-dark:hover {
transform: translateY(-2px);
box-shadow: 0 18px 50px -10px rgba(109, 40, 217, .75);
background: linear-gradient(120deg, var(--srv-violet), var(--srv-cyan));
}
.svc-hero-cta .btn.btn-ghost {
border: 1px solid var(--srv-line);
color: var(--srv-violet-deep);
background: var(--srv-glass-strong);
}
.svc-hero-cta .btn.btn-ghost:hover {
border-color: var(--srv-cyan);
color: var(--srv-cyan);
background: #fff;
}
.svc-hero-stage {
position: relative;
min-height: 460px;
perspective: 1400px;
transform-style: preserve-3d;
}
.svc-hero-orb {
position: absolute;
inset: 8% 8% 12% 8%;
background: radial-gradient(closest-side at 50% 50%, rgba(109, 40, 217, .32), transparent 70%);
filter: blur(36px);
animation: svc-orb 8s ease-in-out infinite alternate;
pointer-events: none;
}
.svc-hero-ring {
position: absolute;
top: 50%; left: 50%;
width: 340px; height: 340px;
border: 1.5px dashed rgba(109, 40, 217, .35);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: svc-spin 28s linear infinite;
pointer-events: none;
}
.svc-hero-ring.is-cyan {
width: 460px; height: 460px;
border-color: rgba(6, 182, 212, .28);
border-style: dotted;
animation-duration: 40s;
animation-direction: reverse;
}
.svc-hero-ring::before {
content: '';
position: absolute;
top: -6px; left: 50%;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--srv-amber);
box-shadow: 0 0 18px var(--srv-amber-light);
transform: translateX(-50%);
}
.svc-hero-ring.is-cyan::before {
background: var(--srv-cyan);
box-shadow: 0 0 18px var(--srv-cyan-light);
top: auto;
bottom: -6px;
}
.svc-hero-card {
position: absolute;
border-radius: 22px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: var(--srv-shadow-deep);
overflow: hidden;
transform-style: preserve-3d;
will-change: transform;
}
.svc-hero-card.is-back {
width: 200px; height: 240px;
top: 4%; left: 4%;
background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.62));
border: 1px solid rgba(255,255,255,.7);
transform: rotate(-10deg);
animation: svc-float-a 7s ease-in-out infinite alternate;
}
.svc-hero-card.is-back .label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--srv-violet);
padding: 20px 20px 0;
}
.svc-hero-card.is-back .value {
display: block;
font-family: var(--font-display);
font-size: 38px;
font-weight: 800;
color: var(--srv-ink);
padding: 6px 20px 0;
line-height: 1;
}
.svc-hero-card.is-back .value small {
font-size: 18px;
color: var(--srv-violet);
margin-left: 2px;
}
.svc-hero-card.is-back .meter {
height: 6px;
margin: 16px 20px;
border-radius: 999px;
background: rgba(109, 40, 217, .12);
overflow: hidden;
}
.svc-hero-card.is-back .meter span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--srv-violet), var(--srv-cyan));
border-radius: 999px;
width: 0;
animation: svc-fill 2.2s cubic-bezier(.22,.61,.36,1) forwards .8s;
}
.svc-hero-card.is-back .foot {
display: flex;
justify-content: space-between;
padding: 0 20px;
font-size: 11px;
font-weight: 600;
color: var(--slate-500);
}
.svc-hero-card.is-back .foot span:last-child { color: var(--srv-cyan); }
.svc-hero-card.is-side {
width: 180px; height: 120px;
top: 10%; right: 0%;
background: linear-gradient(160deg, rgba(245, 158, 11, .16), rgba(255, 255, 255, .9));
border: 1px solid rgba(245, 158, 11, .35);
transform: rotate(8deg);
animation: svc-float-b 6s ease-in-out infinite alternate;
}
.svc-hero-card.is-side .tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #b45309;
padding: 14px 18px 0;
}
.svc-hero-card.is-side .num {
display: block;
font-family: var(--font-display);
font-size: 26px;
font-weight: 800;
color: var(--srv-ink);
padding: 4px 18px 0;
line-height: 1.1;
}
.svc-hero-card.is-side .sub {
display: block;
font-size: 12px;
color: var(--slate-500);
padding: 2px 18px 0;
}
.svc-hero-card.is-front {
width: 280px; min-height: 320px;
top: 22%; left: 50%;
margin-left: -140px;
background: linear-gradient(165deg, #1e1b4b, #312e81 45%, #4338ca);
color: #fff;
border: 1px solid rgba(255,255,255,.16);
padding: 26px 24px;
animation: svc-float-c 7s ease-in-out infinite alternate;
}
.svc-hero-card.is-front::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(400px 200px at 30% 0%, rgba(103, 232, 249, .25), transparent 60%),
url('data:image/svg+xml;utf8,');
background-size: auto, 40px 40px;
pointer-events: none;
}
.svc-hero-card-tag {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--srv-cyan-light);
font-weight: 700;
}
.svc-hero-card-tag::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--srv-cyan-light);
box-shadow: 0 0 8px var(--srv-cyan-light);
}
.svc-hero-card-icon {
position: relative;
z-index: 1;
width: 60px; height: 60px;
border-radius: 16px;
background: linear-gradient(140deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.22);
display: grid;
place-items: center;
margin: 14px 0 18px;
}
.svc-hero-card-icon svg {
width: 28px; height: 28px;
color: #fff;
}
.svc-hero-card-meta { position: relative; z-index: 1; }
.svc-hero-card-meta strong {
display: block;
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
letter-spacing: -.01em;
}
.svc-hero-card-meta span {
display: block;
font-size: 13px;
color: rgba(255,255,255,.74);
}
.svc-hero-card-bars {
position: relative;
z-index: 1;
margin-top: 22px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
height: 56px;
align-items: end;
}
.svc-hero-card-bars span {
display: block;
height: var(--h, 50%);
border-radius: 4px;
background: linear-gradient(180deg, var(--srv-cyan-light), var(--srv-violet));
transform-origin: bottom;
transform: scaleY(0);
animation: svc-grow 1.3s cubic-bezier(.22,.61,.36,1) forwards;
}
.svc-hero-card-bars span:nth-child(1) { animation-delay: 1s; }
.svc-hero-card-bars span:nth-child(2) { animation-delay: 1.15s; }
.svc-hero-card-bars span:nth-child(3) { animation-delay: 1.3s; }
.svc-hero-card-bars span:nth-child(4) { animation-delay: 1.45s; }
.svc-hero-spark {
position: absolute;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--srv-amber-light);
box-shadow: 0 0 18px var(--srv-amber);
}
.svc-hero-spark-1 { top: 12%; right: 22%; animation: svc-twinkle 3.4s ease-in-out infinite; }
.svc-hero-spark-2 { bottom: 24%; left: 22%; background: var(--srv-cyan-light); box-shadow: 0 0 18px var(--srv-cyan); animation: svc-twinkle 3s ease-in-out infinite .8s; }
.svc-hero-spark-3 { top: 48%; right: 4%; animation: svc-twinkle 2.8s ease-in-out infinite 1.4s; }
/* ---------- BENTO ---------- */
.svc-bento-section {
position: relative;
padding: 110px 0;
background:
radial-gradient(700px 400px at 90% 10%, rgba(6, 182, 212, .08), transparent 60%),
radial-gradient(900px 600px at 10% 100%, rgba(109, 40, 217, .08), transparent 60%),
#ffffff;
overflow: hidden;
}
.svc-bento-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(109, 40, 217, .04) 1px, transparent 1px),
linear-gradient(90deg, rgba(109, 40, 217, .04) 1px, transparent 1px);
background-size: 50px 50px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
pointer-events: none;
}
.svc-bento-head {
position: relative;
text-align: center;
max-width: 720px;
margin: 0 auto 60px;
}
.svc-bento-head .eyebrow,
.svc-portal-head .eyebrow,
.svc-faq-head .eyebrow {
display: inline-block;
padding: 6px 16px;
border-radius: 999px;
background: linear-gradient(120deg, rgba(109, 40, 217, .1), rgba(6, 182, 212, .1));
color: var(--srv-violet-deep);
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.svc-bento-head h2,
.svc-portal-head h2,
.svc-faq-head h2 {
font-size: clamp(2rem, 3.4vw, 2.7rem);
margin: 18px 0 14px;
color: var(--srv-ink);
letter-spacing: -.015em;
font-weight: 800;
}
.svc-bento-head p,
.svc-portal-head p,
.svc-faq-head p {
color: var(--slate-500);
font-size: 16px;
margin: 0;
}
.svc-bento {
position: relative;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 22px;
}
.svc-bento-cell {
position: relative;
padding: 32px 30px;
border-radius: 26px;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s cubic-bezier(.22,.61,.36,1);
opacity: 0;
transform: translateY(22px);
animation: svc-rise .7s cubic-bezier(.22,.61,.36,1) forwards;
animation-delay: calc(var(--i, 0) * .08s);
}
.svc-bento-cell::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(420px 220px at 50% 0%, rgba(255,255,255,.16), transparent 55%);
opacity: 0;
transition: opacity .45s;
pointer-events: none;
z-index: 2;
}
.svc-bento-cell:hover { transform: translateY(-8px); box-shadow: var(--srv-shadow-deep); }
.svc-bento-cell:hover::after { opacity: 1; }
.svc-bento-cell-0 {
grid-column: span 3;
grid-row: span 2;
background:
radial-gradient(700px 400px at 100% 0%, rgba(103, 232, 249, .18), transparent 55%),
radial-gradient(500px 400px at 0% 100%, rgba(245, 158, 11, .14), transparent 55%),
linear-gradient(150deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
color: #fff;
border: 1px solid rgba(255,255,255,.08);
box-shadow: 0 30px 70px -25px rgba(30, 27, 75, .55);
}
.svc-bento-cell-0::before {
content: '';
position: absolute;
inset: 0;
background: url('data:image/svg+xml;utf8,');
background-size: 50px 50px;
pointer-events: none;
z-index: 0;
}
.svc-bento-cell-1 {
grid-column: span 3;
background: linear-gradient(150deg, #f5f3ff, #ffffff);
border: 1px solid var(--srv-line);
color: var(--srv-ink);
box-shadow: var(--srv-shadow-soft);
}
.svc-bento-cell-2 {
grid-column: span 3;
background:
radial-gradient(500px 250px at 100% 100%, rgba(245, 158, 11, .25), transparent 60%),
linear-gradient(140deg, #fff7e0 0%, #fffbeb 70%, #ffffff 100%);
border: 1px solid rgba(245, 158, 11, .3);
color: var(--srv-ink);
box-shadow: 0 24px 56px -22px rgba(245, 158, 11, .35);
}
.svc-bento-cell-3 {
grid-column: span 2;
background:
radial-gradient(400px 240px at 100% 0%, rgba(103, 232, 249, .25), transparent 60%),
linear-gradient(140deg, #0c4a6e 0%, #0e7490 70%, #0891b2 100%);
color: #fff;
border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 30px 60px -25px rgba(14, 116, 144, .55);
}
.svc-bento-cell-4 {
grid-column: span 2;
background:
radial-gradient(400px 240px at 0% 100%, rgba(6, 182, 212, .18), transparent 60%),
linear-gradient(150deg, #ecfeff, #ffffff);
border: 1px solid rgba(6, 182, 212, .3);
color: var(--srv-ink);
box-shadow: 0 24px 56px -22px rgba(6, 182, 212, .3);
}
.svc-bento-cell-5 {
grid-column: span 2;
background:
radial-gradient(420px 260px at 0% 100%, rgba(245, 158, 11, .22), transparent 55%),
linear-gradient(140deg, #4c1d95 0%, #6d28d9 60%, #7c3aed 100%);
color: #fff;
border: 1px solid rgba(255,255,255,.1);
box-shadow: 0 30px 60px -25px rgba(109, 40, 217, .55);
}
.svc-bento-cell-num {
position: absolute;
top: 22px; right: 28px;
font-family: var(--font-display);
font-size: 64px;
font-weight: 800;
line-height: 1;
color: currentColor;
opacity: .1;
letter-spacing: -.04em;
z-index: 1;
pointer-events: none;
transition: opacity .4s, transform .4s;
}
.svc-bento-cell:hover .svc-bento-cell-num { opacity: .18; transform: translateY(-2px); }
.svc-bento-cell-icon {
position: relative;
z-index: 1;
width: 58px; height: 58px;
border-radius: 16px;
display: grid;
place-items: center;
margin-bottom: 22px;
background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.22);
color: currentColor;
transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.svc-bento-cell-1 .svc-bento-cell-icon,
.svc-bento-cell-2 .svc-bento-cell-icon,
.svc-bento-cell-4 .svc-bento-cell-icon {
background: linear-gradient(140deg, rgba(109, 40, 217, .12), rgba(109, 40, 217, .02));
border-color: rgba(109, 40, 217, .25);
color: var(--srv-violet-deep);
}
.svc-bento-cell-2 .svc-bento-cell-icon {
background: linear-gradient(140deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .04));
border-color: rgba(245, 158, 11, .35);
color: #b45309;
}
.svc-bento-cell-4 .svc-bento-cell-icon {
background: linear-gradient(140deg, rgba(6, 182, 212, .15), rgba(6, 182, 212, .02));
border-color: rgba(6, 182, 212, .3);
color: #0e7490;
}
.svc-bento-cell-icon svg { width: 26px; height: 26px; }
.svc-bento-cell-icon::after {
content: '';
position: absolute;
inset: -8px;
border-radius: 22px;
border: 1px solid currentColor;
opacity: 0;
transform: scale(.8);
transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s;
}
.svc-bento-cell:hover .svc-bento-cell-icon { transform: rotate(-6deg) scale(1.06); }
.svc-bento-cell:hover .svc-bento-cell-icon::after { opacity: .35; transform: scale(1.05); }
.svc-bento-cell-title {
position: relative;
z-index: 1;
font-family: var(--font-display);
font-size: 21px;
line-height: 1.25;
font-weight: 700;
color: currentColor;
margin: 0 0 12px;
letter-spacing: -.01em;
}
.svc-bento-cell-0 .svc-bento-cell-title,
.svc-bento-cell-3 .svc-bento-cell-title,
.svc-bento-cell-5 .svc-bento-cell-title { font-size: 24px; }
.svc-bento-cell-0 .svc-bento-cell-title { font-size: 28px; line-height: 1.2; }
.svc-bento-cell-desc {
position: relative;
z-index: 1;
margin: 0;
color: currentColor;
font-size: 14.5px;
line-height: 1.7;
opacity: .82;
flex: 1;
}
.svc-bento-cell-arrow {
position: relative;
z-index: 1;
margin-top: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: currentColor;
opacity: .85;
}
.svc-bento-cell-arrow svg {
width: 16px; height: 16px;
transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.svc-bento-cell:hover .svc-bento-cell-arrow svg { transform: translateX(6px); }
/* ---------- FLOW / PROCESS — zigzag spine on dark ---------- */
.svc-flow-section {
position: relative;
padding: 120px 0 130px;
background: linear-gradient(180deg, #0b0a2e 0%, #1e1b4b 60%, #312e81 100%);
color: #fff;
overflow: hidden;
}
.svc-flow-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(800px 500px at 80% 20%, rgba(103, 232, 249, .12), transparent 55%),
radial-gradient(900px 500px at 20% 80%, rgba(245, 158, 11, .08), transparent 55%);
pointer-events: none;
}
.svc-flow-section::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 32px 32px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
pointer-events: none;
}
.svc-flow-head {
position: relative;
text-align: center;
max-width: 720px;
margin: 0 auto 80px;
}
.svc-flow-head .eyebrow {
display: inline-block;
padding: 6px 16px;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: var(--srv-cyan-light);
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.svc-flow-head h2 {
font-size: clamp(2rem, 3.4vw, 2.7rem);
margin: 18px 0 14px;
color: #fff;
letter-spacing: -.015em;
font-weight: 800;
}
.svc-flow-head p {
color: rgba(255,255,255,.7);
font-size: 16px;
margin: 0;
}
.svc-flow {
position: relative;
max-width: 1080px;
margin: 0 auto;
padding: 10px 0;
}
.svc-flow::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 50%;
width: 2px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,.18), rgba(255,255,255,.18) 96%, transparent);
transform: translateX(-50%);
}
.svc-flow.visible::after {
transform: translateX(-50%) scaleY(1);
}
.svc-flow::after {
content: '';
position: absolute;
top: 0; left: 50%;
width: 3px;
height: 100%;
background: linear-gradient(180deg, var(--srv-cyan), var(--srv-violet) 55%, var(--srv-amber));
transform: translateX(-50%) scaleY(0);
transform-origin: top;
border-radius: 3px;
box-shadow: 0 0 16px rgba(103, 232, 249, .55);
transition: transform 2.4s cubic-bezier(.22,.61,.36,1);
}
.svc-flow-step {
position: relative;
display: grid;
grid-template-columns: 1fr 80px 1fr;
align-items: center;
margin-bottom: 46px;
opacity: 0;
transform: translateY(22px);
animation: svc-rise .7s ease forwards;
animation-delay: calc(var(--i, 0) * .15s + .3s);
}
.svc-flow-step:last-child { margin-bottom: 0; }
.svc-flow-node {
position: relative;
grid-column: 2;
width: 62px; height: 62px;
border-radius: 50%;
background: linear-gradient(140deg, #4338ca, #6d28d9);
border: 2px solid rgba(255,255,255,.18);
display: grid;
place-items: center;
color: #fff;
font-family: var(--font-display);
font-weight: 800;
font-size: 16px;
z-index: 2;
box-shadow: 0 0 0 8px rgba(109, 40, 217, .14), 0 12px 30px -8px rgba(109, 40, 217, .6);
margin: 0 auto;
}
.svc-flow-node::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
border: 1px solid rgba(103, 232, 249, .4);
animation: svc-pulse-ring 2.6s ease-out infinite;
}
.svc-flow-step:nth-child(even) .svc-flow-node {
background: linear-gradient(140deg, #0e7490, #06b6d4);
box-shadow: 0 0 0 8px rgba(6, 182, 212, .14), 0 12px 30px -8px rgba(6, 182, 212, .55);
}
.svc-flow-card {
position: relative;
padding: 24px 26px;
border-radius: 20px;
background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.svc-flow-card::before {
content: '';
position: absolute;
top: 50%;
width: 26px; height: 2px;
background: linear-gradient(90deg, rgba(255,255,255,.22), transparent);
transform: translateY(-50%);
}
.svc-flow-step.is-left .svc-flow-card {
grid-column: 1;
text-align: right;
}
.svc-flow-step.is-left .svc-flow-card::before { right: -26px; }
.svc-flow-step.is-right .svc-flow-card { grid-column: 3; }
.svc-flow-step.is-right .svc-flow-card::before {
left: -26px;
background: linear-gradient(-90deg, rgba(255,255,255,.22), transparent);
}
.svc-flow-card:hover {
transform: translateY(-4px);
border-color: rgba(103, 232, 249, .45);
box-shadow: 0 18px 40px -18px rgba(103, 232, 249, .45);
}
.svc-flow-card h4 {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: #fff;
margin: 0 0 8px;
letter-spacing: -.005em;
}
.svc-flow-card p {
color: rgba(255,255,255,.72);
font-size: 14.5px;
line-height: 1.65;
margin: 0;
}
/* ---------- PORTAL ROWS (related) ---------- */
.svc-portal-section {
position: relative;
padding: 110px 0;
background:
radial-gradient(900px 500px at 50% 0%, rgba(109, 40, 217, .08), transparent 55%),
linear-gradient(180deg, #ffffff, #f8fafc);
overflow: hidden;
}
.svc-portal-head {
position: relative;
text-align: center;
max-width: 720px;
margin: 0 auto 56px;
}
.svc-portal {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
}
.svc-portal-row {
position: relative;
display: grid;
grid-template-columns: 80px 76px 1fr auto;
align-items: center;
gap: 26px;
padding: 26px 30px;
background: #fff;
border: 1px solid var(--srv-line);
border-radius: 22px;
overflow: hidden;
color: var(--srv-ink);
text-decoration: none;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
opacity: 0;
transform: translateY(16px);
animation: svc-rise .65s ease forwards;
animation-delay: calc(var(--i, 0) * .12s);
}
.svc-portal-row::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, rgba(109, 40, 217, .05) 30%, rgba(6, 182, 212, .08) 65%, transparent 100%);
transform: translateX(-100%);
transition: transform .9s cubic-bezier(.22,.61,.36,1);
pointer-events: none;
}
.svc-portal-row::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: linear-gradient(180deg, var(--srv-violet), var(--srv-cyan));
transform: scaleY(.25);
transform-origin: center;
transition: transform .55s, opacity .55s;
opacity: .5;
}
.svc-portal-row:hover {
transform: translateY(-3px);
border-color: var(--srv-violet);
box-shadow: 0 22px 50px -20px rgba(109, 40, 217, .35);
}
.svc-portal-row:hover::before { transform: translateX(0); }
.svc-portal-row:hover::after { transform: scaleY(1); opacity: 1; }
.svc-portal-num {
position: relative;
z-index: 1;
font-family: var(--font-display);
font-size: 42px;
font-weight: 800;
line-height: 1;
background: linear-gradient(120deg, var(--srv-violet), var(--srv-cyan));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.svc-portal-icon {
position: relative;
z-index: 1;
width: 64px; height: 64px;
border-radius: 18px;
background: linear-gradient(140deg, rgba(109, 40, 217, .12), rgba(6, 182, 212, .12));
border: 1px solid var(--srv-line);
color: var(--srv-violet-deep);
display: grid;
place-items: center;
transition: transform var(--transition), background var(--transition), color var(--transition);
}
.svc-portal-row:hover .svc-portal-icon {
transform: rotate(-6deg) scale(1.04);
background: linear-gradient(140deg, var(--srv-violet), var(--srv-cyan));
color: #fff;
}
.svc-portal-icon svg { width: 28px; height: 28px; }
.svc-portal-body { position: relative; z-index: 1; }
.svc-portal-eyebrow {
display: inline-block;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--srv-violet);
margin-bottom: 6px;
}
.svc-portal-title {
font-family: var(--font-display);
font-size: 21px;
font-weight: 700;
color: var(--srv-ink);
margin: 0 0 4px;
letter-spacing: -.01em;
}
.svc-portal-desc {
margin: 0;
color: var(--slate-500);
font-size: 14.5px;
}
.svc-portal-cta {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
background: linear-gradient(120deg, var(--srv-violet), var(--srv-cyan));
border-radius: 999px;
color: #fff;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
box-shadow: 0 10px 24px -8px rgba(109, 40, 217, .55);
transition: transform var(--transition);
}
.svc-portal-cta svg { width: 16px; height: 16px; transition: transform .4s; }
.svc-portal-row:hover .svc-portal-cta { transform: scale(1.04); }
.svc-portal-row:hover .svc-portal-cta svg { transform: translateX(4px); }
/* ---------- FAQ — glass card stack ---------- */
.svc-faq-section {
position: relative;
padding: 110px 0;
background:
radial-gradient(900px 500px at 0% 50%, rgba(109, 40, 217, .08), transparent 50%),
radial-gradient(800px 500px at 100% 50%, rgba(6, 182, 212, .08), transparent 50%),
linear-gradient(180deg, #faf9ff, #ffffff);
overflow: hidden;
}
.svc-faq-section::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(109, 40, 217, .05) 1px, transparent 1px);
background-size: 32px 32px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 65%);
mask-image: radial-gradient(ellipse at center, #000 20%, transparent 65%);
pointer-events: none;
}
.svc-faq-head {
position: relative;
text-align: center;
max-width: 720px;
margin: 0 auto 56px;
}
.svc-faq {
position: relative;
max-width: 920px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.svc-faq-item {
position: relative;
margin: 0;
border-radius: 20px;
background: var(--srv-glass-strong);
border: 1px solid var(--srv-line);
overflow: hidden;
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
transform: translateY(14px);
animation: svc-rise .6s ease forwards;
animation-delay: calc(var(--i, 0) * .08s);
}
.svc-faq-item.open {
border-color: transparent;
box-shadow: 0 24px 56px -22px rgba(109, 40, 217, .35);
}
.svc-faq-item::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 20px;
padding: 1px;
background: linear-gradient(135deg, rgba(109, 40, 217, .45), rgba(6, 182, 212, .45));
-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;
transition: opacity .4s;
pointer-events: none;
}
.svc-faq-item:hover { box-shadow: 0 24px 56px -22px rgba(109, 40, 217, .35); }
.svc-faq-item:hover::before,
.svc-faq-item.open::before { opacity: 1; }
.svc-faq-header {
display: grid;
grid-template-columns: 48px 1fr 36px;
align-items: center;
gap: 18px;
padding: 22px 26px;
width: 100%;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
font: inherit;
color: var(--srv-ink);
}
.svc-faq-header:hover { background: transparent; }
.svc-faq-num {
position: relative;
width: 44px; height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(140deg, rgba(109, 40, 217, .12), rgba(6, 182, 212, .12));
border: 1px solid var(--srv-line);
font-family: var(--font-display);
font-weight: 800;
font-size: 13px;
color: var(--srv-violet-deep);
transition: all var(--transition);
}
.svc-faq-num::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1px solid rgba(109, 40, 217, .25);
opacity: 0;
transform: scale(.85);
transition: opacity .4s, transform .4s;
}
.svc-faq-item.open .svc-faq-num,
.svc-faq-item:hover .svc-faq-num {
background: linear-gradient(140deg, var(--srv-violet), var(--srv-cyan));
color: #fff;
border-color: transparent;
box-shadow: 0 8px 22px -6px rgba(109, 40, 217, .6);
}
.svc-faq-item.open .svc-faq-num::before,
.svc-faq-item:hover .svc-faq-num::before {
opacity: 1;
transform: scale(1.05);
}
.svc-faq-q {
font-family: var(--font-display);
font-size: 16.5px;
font-weight: 700;
color: var(--srv-ink);
letter-spacing: -.005em;
line-height: 1.4;
}
.svc-faq-toggle {
position: relative;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--srv-line);
background: rgba(255,255,255,.85);
transition: all var(--transition);
}
.svc-faq-toggle::before,
.svc-faq-toggle::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 14px; height: 2px;
background: var(--srv-violet-deep);
transform: translate(-50%, -50%);
transition: transform .4s, opacity .4s, background .4s;
border-radius: 2px;
}
.svc-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.svc-faq-item.open .svc-faq-toggle {
background: linear-gradient(120deg, var(--srv-violet), var(--srv-cyan));
border-color: transparent;
transform: none;
}
.svc-faq-item.open .svc-faq-toggle::before,
.svc-faq-item.open .svc-faq-toggle::after { background: #fff; }
.svc-faq-item.open .svc-faq-toggle::after {
transform: translate(-50%, -50%) rotate(0);
opacity: 0;
}
.svc-faq-body {
overflow: hidden;
max-height: 0;
transition: max-height .55s cubic-bezier(.22,.61,.36,1);
}
.svc-faq-body-inner {
padding: 0 26px 24px 92px;
color: var(--slate-700);
font-size: 15px;
line-height: 1.75;
position: relative;
}
.svc-faq-body-inner::before {
content: '';
position: absolute;
left: 47px; top: 0; bottom: 12px;
width: 2px;
background: linear-gradient(180deg, var(--srv-violet), var(--srv-cyan));
border-radius: 2px;
opacity: .35;
}
/* ---------- CTA on services ---------- */
body[data-page="services"] .cta-strip {
background:
radial-gradient(700px 400px at 10% 50%, rgba(103, 232, 249, .18), transparent 60%),
radial-gradient(700px 400px at 90% 50%, rgba(245, 158, 11, .14), transparent 60%),
linear-gradient(120deg, #0b0a2e 0%, #312e81 55%, #4c1d95 100%);
position: relative;
overflow: hidden;
}
/* ---------- KEYFRAMES ---------- */
@keyframes svc-rise {
to { opacity: 1; transform: translateY(0); }
}
@keyframes svc-pulse {
0% { box-shadow: 0 0 0 0 rgba(109, 40, 217, .55); }
70% { box-shadow: 0 0 0 12px rgba(109, 40, 217, 0); }
100% { box-shadow: 0 0 0 0 rgba(109, 40, 217, 0); }
}
@keyframes svc-pulse-ring {
0% { transform: scale(.85); opacity: 1; }
100% { transform: scale(1.45); opacity: 0; }
}
@keyframes svc-orb {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(22px, -18px) scale(1.08); }
}
@keyframes svc-mesh {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, 20px) scale(1.1); }
}
@keyframes svc-spin {
from { transform: translate(-50%, -50%) rotate(0); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes svc-float-a {
0% { transform: rotate(-10deg) translate(0, 0); }
100% { transform: rotate(-12deg) translate(-8px, -14px); }
}
@keyframes svc-float-b {
0% { transform: rotate(8deg) translate(0, 0); }
100% { transform: rotate(10deg) translate(8px, 14px); }
}
@keyframes svc-float-c {
0% { transform: translate(0, 0); }
100% { transform: translate(0, -16px); }
}
@keyframes svc-twinkle {
0%, 100% { opacity: .3; transform: scale(.8); }
50% { opacity: 1; transform: scale(1.25); }
}
@keyframes svc-grow {
to { transform: scaleY(1); }
}
@keyframes svc-fill {
to { width: 92%; }
}
@keyframes svc-line {
to { transform: scaleX(1); }
}
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.svc-hero-grid { grid-template-columns: 1fr; gap: 60px; }
.svc-hero-stage { min-height: 420px; max-width: 480px; margin: 0 auto; }
.svc-bento { grid-template-columns: repeat(2, 1fr); }
.svc-bento-cell-0,
.svc-bento-cell-1,
.svc-bento-cell-2,
.svc-bento-cell-3,
.svc-bento-cell-4,
.svc-bento-cell-5 { grid-column: span 2; grid-row: auto; }
.svc-flow-step,
.svc-flow-step.is-left,
.svc-flow-step.is-right {
grid-template-columns: 60px 1fr;
gap: 18px;
text-align: left;
}
.svc-flow::before,
.svc-flow::after { left: 30px; }
.svc-flow-node { grid-column: 1; }
.svc-flow-step.is-left .svc-flow-card,
.svc-flow-step.is-right .svc-flow-card {
grid-column: 2;
text-align: left;
}
.svc-flow-step.is-left .svc-flow-card::before,
.svc-flow-step.is-right .svc-flow-card::before {
left: -18px;
right: auto;
background: linear-gradient(-90deg, rgba(255,255,255,.22), transparent);
}
.svc-portal-row {
grid-template-columns: 60px 60px 1fr;
gap: 16px;
padding: 22px;
}
.svc-portal-cta {
grid-column: 1 / -1;
justify-self: start;
margin-top: 6px;
}
}
@media (max-width: 640px) {
.svc-hero { padding: 64px 0 80px; }
.svc-hero-stage { min-height: 380px; }
.svc-hero-card.is-front { width: 240px; min-height: 280px; margin-left: -120px; }
.svc-hero-card.is-back { width: 170px; height: 210px; }
.svc-hero-card.is-side { width: 150px; height: 100px; }
.svc-bento { grid-template-columns: 1fr; }
.svc-bento-cell-0,
.svc-bento-cell-1,
.svc-bento-cell-2,
.svc-bento-cell-3,
.svc-bento-cell-4,
.svc-bento-cell-5 { grid-column: span 1; }
.svc-portal-row { grid-template-columns: 60px 1fr; }
.svc-portal-num { grid-column: 1; grid-row: 1; }
.svc-portal-icon { grid-column: 1; grid-row: 2; align-self: start; }
.svc-portal-body { grid-column: 2; grid-row: 1 / span 2; }
.svc-portal-cta { grid-column: 1 / -1; grid-row: 3; }
.svc-faq-header { grid-template-columns: 44px 1fr 36px; padding: 18px 20px; gap: 14px; }
.svc-faq-body-inner { padding: 0 20px 22px 80px; }
.svc-faq-body-inner::before { left: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.svc-hero-mesh,
.svc-hero-orb,
.svc-hero-ring,
.svc-hero-card,
.svc-hero-spark,
.svc-hero-eyebrow::before,
.svc-flow-node::before {
animation: none !important;
}
.svc-hero-chips li,
.svc-bento-cell,
.svc-flow-step,
.svc-portal-row,
.svc-faq-item {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.svc-flow::after { transform: translateX(-50%) scaleY(1); transition: none; }
}
/* ===================== NEWS & EVENTS PAGE ===================== */
.news-updates { position: relative; }
/* Filter pills */
.news-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 56px;
}
.news-filter {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 16px;
border-radius: 99px;
background: var(--white);
color: var(--slate-700);
border: 1.5px solid var(--slate-200);
font-family: var(--font-display);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
user-select: none;
}
.news-filter:hover {
border-color: var(--navy-700);
color: var(--navy-800);
transform: translateY(-2px);
}
.news-filter .count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 99px;
background: var(--slate-100);
color: var(--slate-700);
font-size: 11.5px;
font-weight: 700;
}
.news-filter.is-active {
background: var(--navy-800);
color: var(--white);
border-color: var(--navy-800);
}
.news-filter.is-active .count {
background: var(--gold-500);
color: var(--navy-900);
}
/* Featured spotlight */
.news-featured {
position: relative;
display: grid;
grid-template-columns: 1.35fr 1fr;
border-radius: 22px;
overflow: hidden;
background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
color: var(--white);
margin-bottom: 64px;
box-shadow: 0 30px 60px -20px rgba(10,31,61,.45);
}
.news-featured::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(600px circle at top right, rgba(212,160,23,.18), transparent 60%),
radial-gradient(420px circle at 30% 100%, rgba(30,90,168,.35), transparent 60%);
pointer-events: none;
}
.news-featured-body {
position: relative;
padding: 56px;
z-index: 1;
}
.news-featured-flag {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 6px 14px;
border-radius: 99px;
background: var(--gold-500);
color: var(--navy-900);
font-family: var(--font-display);
font-size: 11px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 22px;
}
.news-featured-flag::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--navy-900);
animation: news-pulse 2s ease-in-out infinite;
}
@keyframes news-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.7); }
}
.news-featured-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin-bottom: 18px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.65);
}
.news-featured-meta .dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gold-400);
}
.news-featured-body h3 {
color: var(--white);
font-size: clamp(1.75rem, 2.4vw, 2.35rem);
line-height: 1.18;
margin: 0 0 18px;
letter-spacing: -.02em;
}
.news-featured-body p {
color: rgba(255,255,255,.78);
font-size: 16px;
line-height: 1.65;
margin: 0 0 32px;
max-width: 540px;
}
.news-featured-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
border-radius: 99px;
background: var(--white);
color: var(--navy-900);
font-family: var(--font-display);
font-weight: 700;
font-size: 14.5px;
transition: all var(--transition);
}
.news-featured-cta svg { width: 16px; height: 16px; transition: transform var(--transition); }
.news-featured-cta:hover {
background: var(--gold-500);
color: var(--navy-900);
transform: translateY(-2px);
}
.news-featured-cta:hover svg { transform: translateX(4px); }
.news-featured-visual {
position: relative;
overflow: hidden;
min-height: 340px;
background:
radial-gradient(circle at center, rgba(212,160,23,.22), transparent 65%),
linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0));
border-left: 1px solid rgba(255,255,255,.08);
}
.news-featured-visual::before,
.news-featured-visual::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
pointer-events: none;
}
.news-featured-visual::before {
width: 380px;
height: 380px;
border: 1.5px dashed rgba(255,255,255,.13);
animation: news-rotate 40s linear infinite;
}
.news-featured-visual::after {
width: 220px;
height: 220px;
border: 1.5px solid rgba(212,160,23,.18);
animation: news-rotate 60s linear infinite reverse;
}
@keyframes news-rotate {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.news-featured-date {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
.news-featured-date .day {
display: block;
font-family: var(--font-display);
font-size: clamp(4.5rem, 8vw, 7rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.04em;
background: linear-gradient(180deg, var(--white) 0%, rgba(255,255,255,.4) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.news-featured-date .month-year {
display: block;
margin-top: 6px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--gold-400);
}
/* Editorial article list */
.news-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px;
}
.news-item {
position: relative;
display: grid;
grid-template-columns: 96px 1fr;
gap: 26px;
padding: 32px 32px 28px;
background: var(--white);
border: 1px solid var(--slate-100);
border-radius: var(--radius-md);
transition: all var(--transition);
overflow: hidden;
}
.news-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--gold-500), var(--navy-700));
transform: scaleY(0);
transform-origin: top;
transition: transform var(--transition);
}
.news-item:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.news-item:hover::before { transform: scaleY(1); }
.news-item-date {
text-align: center;
padding: 4px 22px 0 0;
border-right: 1px dashed var(--slate-200);
}
.news-item-date .d {
display: block;
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 800;
line-height: 1;
color: var(--navy-900);
letter-spacing: -.03em;
}
.news-item-date .m {
display: block;
margin-top: 6px;
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold-500);
}
.news-item-date .y {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--slate-500);
}
.news-item-body { min-width: 0; }
.news-item-tag {
display: inline-block;
padding: 4px 11px;
border-radius: 99px;
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 12px;
}
.tag-company { background: rgba(30, 90, 168, .12); color: var(--navy-700); }
.tag-insight { background: var(--gold-100); color: #8b6914; }
.tag-workshop { background: rgba(16, 128, 128, .12); color: #0e6b6b; }
.tag-event { background: rgba(168, 30, 90, .10); color: #a81e5a; }
.tag-client { background: rgba(15, 42, 82, .08); color: var(--navy-800); }
.news-item-body h4 {
font-size: 1.15rem;
line-height: 1.4;
margin: 0 0 12px;
color: var(--navy-900);
}
.news-item-body p {
color: var(--slate-500);
font-size: 14.5px;
line-height: 1.65;
margin: 0 0 18px;
}
.news-item-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding-top: 14px;
border-top: 1px solid var(--slate-100);
}
.news-item-meta {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 12.5px;
color: var(--slate-500);
}
.news-item-meta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.news-item-meta svg { width: 13px; height: 13px; color: var(--gold-500); }
.news-item-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--navy-800);
}
.news-item-link svg { width: 13px; height: 13px; transition: transform var(--transition); }
.news-item:hover .news-item-link { color: var(--gold-500); }
.news-item:hover .news-item-link svg { transform: translateX(4px); }
@media (max-width: 1024px) {
.news-featured { grid-template-columns: 1fr; }
.news-featured-body { padding: 44px 36px; }
.news-featured-visual { min-height: 240px; order: -1; }
.news-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.news-featured-body { padding: 36px 24px; }
.news-featured-visual::before { width: 260px; height: 260px; }
.news-featured-visual::after { width: 160px; height: 160px; }
.news-item {
grid-template-columns: 1fr;
gap: 16px;
padding: 26px;
}
.news-item-date {
display: flex;
align-items: baseline;
gap: 10px;
text-align: left;
padding: 0 0 14px;
border-right: none;
border-bottom: 1px dashed var(--slate-200);
}
.news-item-date .d { font-size: 1.5rem; }
.news-item-date .m,
.news-item-date .y { margin-top: 0; }
.news-item-foot { flex-wrap: wrap; }
}
/* ===================== NEWS HUB & CATEGORY PAGES ===================== */
.news-subhead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin: 64px 0 32px;
padding-bottom: 18px;
border-bottom: 2px solid var(--slate-100);
}
.news-subhead .eyebrow-line {
display: block;
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .18em;
color: var(--gold-500);
text-transform: uppercase;
margin-bottom: 8px;
}
.news-subhead h3 {
margin: 0;
font-size: 1.55rem;
letter-spacing: -.01em;
}
.news-subhead .sub-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 13.5px;
font-weight: 700;
color: var(--navy-700);
flex-shrink: 0;
}
.news-subhead .sub-link svg { width: 13px; height: 13px; transition: transform var(--transition); }
.news-subhead .sub-link:hover { color: var(--gold-500); }
.news-subhead .sub-link:hover svg { transform: translateX(4px); }
/* Category showcase */
.news-categories {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.news-cat-card {
--cat-grad-from: var(--navy-900);
--cat-grad-to: var(--navy-700);
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 270px;
padding: 34px 28px 28px;
border-radius: 20px;
background: linear-gradient(135deg, var(--cat-grad-from), var(--cat-grad-to));
color: var(--white);
overflow: hidden;
text-decoration: none;
transition: all .4s ease;
box-shadow: 0 15px 30px -15px rgba(10, 31, 61, .35);
}
.news-cat-card::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(212, 160, 23, .3), transparent 65%);
border-radius: 50%;
transition: transform .55s ease;
}
.news-cat-card::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
opacity: .5;
}
.news-cat-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 45px -15px rgba(10, 31, 61, .55);
}
.news-cat-card:hover::before { transform: scale(1.3) translate(-18px, 18px); }
.news-cat-card .count {
position: absolute;
top: 28px;
right: 26px;
z-index: 2;
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
color: rgba(255, 255, 255, .6);
text-transform: uppercase;
}
.news-cat-icon {
position: relative;
z-index: 1;
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(255, 255, 255, .12);
color: var(--gold-400);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
transition: all .35s ease;
}
.news-cat-icon svg { width: 26px; height: 26px; }
.news-cat-card:hover .news-cat-icon {
background: var(--gold-500);
color: var(--navy-900);
transform: rotate(-8deg) scale(1.08);
}
.news-cat-card h4 {
position: relative;
z-index: 1;
color: var(--white);
font-size: 1.3rem;
margin: 0 0 10px;
letter-spacing: -.01em;
}
.news-cat-card p {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, .72);
font-size: 13.5px;
line-height: 1.55;
margin: 0 0 20px;
}
.news-cat-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--gold-400);
position: relative;
z-index: 1;
}
.news-cat-arrow svg { width: 14px; height: 14px; transition: transform var(--transition); }
.news-cat-card:hover .news-cat-arrow svg { transform: translateX(5px); }
.news-cat-card.cat-company { --cat-grad-from: #0a1f3d; --cat-grad-to: #16407a; }
.news-cat-card.cat-workshop { --cat-grad-from: #0e3b3b; --cat-grad-to: #1e7575; }
.news-cat-card.cat-event { --cat-grad-from: #4a1234; --cat-grad-to: #a81e5a; }
.news-cat-card.cat-client { --cat-grad-from: #2d2516; --cat-grad-to: #8b6914; }
/* Recent stories — 3-column grid for hub */
.news-recent {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.news-recent-card {
background: var(--white);
border: 1px solid var(--slate-100);
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all var(--transition);
}
.news-recent-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: transparent;
}
.news-recent-thumb {
--thumb-from: var(--navy-800);
--thumb-to: var(--navy-700);
position: relative;
aspect-ratio: 16/9;
background: linear-gradient(135deg, var(--thumb-from), var(--thumb-to));
display: flex;
align-items: center;
justify-content: center;
color: var(--gold-400);
overflow: hidden;
}
.news-recent-thumb::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 70%, rgba(212, 160, 23, .25), transparent 50%),
linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .35) 100%);
}
.news-recent-thumb svg { width: 44px; height: 44px; opacity: .85; position: relative; z-index: 1; }
.news-recent-thumb .pin-tag {
position: absolute;
top: 14px;
left: 14px;
padding: 4px 10px;
border-radius: 99px;
background: rgba(255, 255, 255, .92);
color: var(--navy-800);
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
z-index: 2;
}
.news-recent-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 22px 24px 24px;
}
.news-recent-body .date {
font-size: 12px;
color: var(--slate-500);
font-weight: 600;
letter-spacing: .04em;
margin-bottom: 8px;
}
.news-recent-body h4 {
font-size: 1.1rem;
line-height: 1.4;
margin: 0 0 10px;
}
.news-recent-body p {
color: var(--slate-500);
font-size: 14px;
line-height: 1.6;
margin: 0 0 18px;
flex: 1;
}
.news-recent-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--navy-800);
}
.news-recent-link svg { width: 13px; height: 13px; transition: transform var(--transition); }
.news-recent-card:hover .news-recent-link { color: var(--gold-500); }
.news-recent-card:hover .news-recent-link svg { transform: translateX(4px); }
/* Video gallery */
.news-videos {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.news-video {
--vid-from: var(--navy-800);
--vid-to: var(--navy-700);
position: relative;
aspect-ratio: 16/9;
border-radius: 18px;
overflow: hidden;
cursor: pointer;
background: linear-gradient(135deg, var(--vid-from), var(--vid-to));
transition: transform var(--transition);
box-shadow: 0 14px 32px -12px rgba(10, 31, 61, .4);
border: 0;
padding: 0;
color: inherit;
text-align: left;
}
.news-video::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 65% 40%, rgba(212, 160, 23, .25), transparent 55%),
linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .6) 100%);
}
.news-video::after {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
pointer-events: none;
}
.news-video:hover { transform: scale(1.015); }
.news-video .play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 76px;
height: 76px;
border-radius: 50%;
background: rgba(255, 255, 255, .95);
color: var(--navy-900);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .45);
transition: all .35s ease;
z-index: 2;
}
.news-video .play svg { width: 26px; height: 26px; margin-left: 4px; }
.news-video:hover .play {
background: var(--gold-500);
transform: translate(-50%, -50%) scale(1.1);
}
.news-video .play::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .35);
animation: cx-ring 2.6s ease-out infinite;
}
.news-video-meta {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 22px 24px 22px;
z-index: 2;
}
.news-video-meta .title {
display: block;
color: var(--white);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
line-height: 1.35;
margin: 0 0 8px;
max-width: 78%;
letter-spacing: -.005em;
}
.news-video-meta .duration {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 99px;
background: rgba(0, 0, 0, .55);
color: var(--gold-400);
font-family: var(--font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
backdrop-filter: blur(6px);
}
.news-video-meta .duration svg { width: 11px; height: 11px; }
.news-video.vid-1 { --vid-from: #0a1f3d; --vid-to: #16407a; }
.news-video.vid-2 { --vid-from: #0e3b3b; --vid-to: #1e7575; }
.news-video.vid-3 { --vid-from: #4a1234; --vid-to: #a81e5a; }
.news-video.vid-4 { --vid-from: #2d2516; --vid-to: #8b6914; }
/* Photo gallery */
.news-photos {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.news-photo {
--pic-from: var(--navy-800);
--pic-to: var(--gold-500);
position: relative;
aspect-ratio: 1;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
background: linear-gradient(135deg, var(--pic-from), var(--pic-to));
transition: transform var(--transition);
border: 0;
padding: 0;
}
.news-photo::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at center, rgba(255, 255, 255, .15), transparent 60%),
linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.news-photo::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
background-size: 14px 14px;
pointer-events: none;
opacity: .5;
}
.news-photo:hover { transform: scale(1.03); }
.news-photo .pic-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255, 255, 255, .4);
transition: all .35s ease;
z-index: 1;
}
.news-photo .pic-icon svg { width: 48px; height: 48px; }
.news-photo:hover .pic-icon {
color: rgba(255, 255, 255, .7);
transform: translate(-50%, -50%) scale(1.1);
}
.news-photo .pic-label {
position: absolute;
left: 14px;
right: 50px;
bottom: 14px;
color: var(--white);
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .03em;
text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
z-index: 1;
}
.news-photo .pic-zoom {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, .22);
backdrop-filter: blur(6px);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(-6px);
transition: all .3s ease;
z-index: 2;
}
.news-photo .pic-zoom svg { width: 14px; height: 14px; }
.news-photo:hover .pic-zoom { opacity: 1; transform: translateY(0); }
.news-photo.p1 { --pic-from: #0a1f3d; --pic-to: #1e5aa8; }
.news-photo.p2 { --pic-from: #0e3b3b; --pic-to: #1e7575; }
.news-photo.p3 { --pic-from: #4a1234; --pic-to: #a81e5a; }
.news-photo.p4 { --pic-from: #2d2516; --pic-to: #d4a017; }
.news-photo.p5 { --pic-from: #0f2a52; --pic-to: #d4a017; }
.news-photo.p6 { --pic-from: #16407a; --pic-to: #6ee7b7; }
.news-photo.p7 { --pic-from: #1e5aa8; --pic-to: #f59e0b; }
.news-photo.p8 { --pic-from: #2d2516; --pic-to: #e6b528; }
/* Lightbox modal */
.lb-overlay {
position: fixed;
inset: 0;
background: rgba(8, 18, 38, .85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 24px;
animation: lb-fade .25s ease;
}
.lb-overlay.is-open { display: flex; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lb-frame {
position: relative;
width: min(900px, 100%);
max-height: 88vh;
background: var(--navy-900);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 30px 80px -10px rgba(0, 0, 0, .6);
animation: lb-scale .3s cubic-bezier(.22, .61, .36, 1);
}
@keyframes lb-scale {
from { transform: scale(.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.lb-close {
position: absolute;
top: 14px;
right: 14px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, .15);
border: 0;
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
z-index: 5;
}
.lb-close:hover {
background: var(--gold-500);
color: var(--navy-900);
transform: rotate(90deg);
}
.lb-close svg { width: 18px; height: 18px; }
.lb-stage {
--pic-from: var(--navy-800);
--pic-to: var(--gold-500);
aspect-ratio: 16/9;
background: linear-gradient(135deg, var(--pic-from), var(--pic-to));
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, .6);
overflow: hidden;
}
.lb-stage::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px);
background-size: 18px 18px;
opacity: .4;
}
.lb-stage .lb-stage-icon {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, .55);
}
.lb-stage .lb-stage-icon svg { width: 90px; height: 90px; }
.lb-stage .lb-stage-note {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255, 255, 255, .55);
}
.lb-caption {
padding: 20px 26px 26px;
color: var(--white);
}
.lb-caption .tag {
display: inline-block;
padding: 4px 11px;
border-radius: 99px;
background: rgba(212, 160, 23, .2);
color: var(--gold-400);
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 10px;
}
.lb-caption h5 {
color: var(--white);
font-size: 1.2rem;
margin: 0 0 6px;
letter-spacing: -.01em;
}
.lb-caption p {
color: rgba(255, 255, 255, .72);
font-size: 14px;
line-height: 1.55;
margin: 0;
}
body.lb-locked { overflow: hidden; }
/* Category-page intro panel */
.news-cat-intro {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
padding: 36px 38px;
background: linear-gradient(135deg, var(--slate-50), var(--white));
border: 1px solid var(--slate-100);
border-radius: 22px;
margin-bottom: 48px;
}
.news-cat-intro .intro-body p {
margin: 12px 0 0;
color: var(--slate-700);
font-size: 15.5px;
line-height: 1.65;
max-width: 720px;
}
.news-cat-intro .intro-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .16em;
color: var(--gold-500);
text-transform: uppercase;
}
.news-cat-intro .intro-eyebrow::before {
content: '';
width: 22px;
height: 2px;
background: var(--gold-500);
}
.news-cat-intro h2 {
margin: 12px 0 0;
font-size: 1.85rem;
letter-spacing: -.01em;
}
.news-cat-intro .intro-count {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 28px;
border-radius: 18px;
background: var(--white);
box-shadow: 0 12px 30px -12px rgba(10, 31, 61, .2);
border: 1px solid var(--slate-100);
min-width: 130px;
}
.news-cat-intro .intro-count .n {
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, var(--navy-800), var(--gold-500));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.news-cat-intro .intro-count .l {
margin-top: 8px;
font-family: var(--font-display);
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
color: var(--slate-500);
text-transform: uppercase;
}
@media (max-width: 1024px) {
.news-categories { grid-template-columns: repeat(2, 1fr); }
.news-recent { grid-template-columns: repeat(2, 1fr); }
.news-videos { grid-template-columns: 1fr; }
.news-photos { grid-template-columns: repeat(3, 1fr); }
.news-cat-intro { grid-template-columns: 1fr; gap: 22px; padding: 28px 26px; }
.news-cat-intro .intro-count { flex-direction: row; gap: 14px; padding: 14px 20px; min-width: 0; align-self: flex-start; }
.news-cat-intro .intro-count .n { font-size: 1.6rem; }
.news-cat-intro .intro-count .l { margin-top: 0; }
}
@media (max-width: 600px) {
.news-categories { grid-template-columns: 1fr; gap: 18px; }
.news-recent { grid-template-columns: 1fr; }
.news-photos { grid-template-columns: repeat(2, 1fr); }
.news-subhead { flex-direction: column; align-items: flex-start; }
.news-video .play { width: 56px; height: 56px; }
.news-video .play svg { width: 20px; height: 20px; }
.news-video-meta { padding: 18px 18px; }
.news-video-meta .title { font-size: .95rem; max-width: 100%; }
.lb-overlay { padding: 14px; }
}
/* =================================================================
News article detail page — story view with photos & videos
================================================================= */
.news-article {
max-width: 880px;
margin: 0 auto;
}
.news-article-head {
margin-bottom: 32px;
}
.news-article-meta {
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
align-items: center;
margin-bottom: 22px;
}
.news-article-tag {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: 99px;
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.news-article-meta-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .08em;
color: var(--slate-600);
text-transform: uppercase;
}
.news-article-meta-item svg {
width: 14px;
height: 14px;
color: var(--gold-500);
}
.news-article-title {
font-size: clamp(1.85rem, 3.2vw, 2.6rem);
line-height: 1.18;
letter-spacing: -.02em;
color: var(--navy-900);
margin: 0 0 18px;
}
.news-article-excerpt {
font-size: 1.125rem;
line-height: 1.65;
color: var(--slate-700);
margin: 0;
max-width: 700px;
}
.news-article-hero {
position: relative;
overflow: hidden;
border-radius: 22px;
min-height: 280px;
margin-bottom: 40px;
color: var(--white);
background: linear-gradient(135deg, var(--thumb-from, #0a1f3d) 0%, var(--thumb-to, #16407a) 100%);
box-shadow: 0 26px 60px -24px rgba(10,31,61,.45);
}
.news-article-hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(520px circle at 18% 22%, rgba(255,255,255,.18), transparent 62%),
radial-gradient(420px circle at 92% 88%, rgba(212,160,23,.22), transparent 60%);
pointer-events: none;
}
.news-article-hero-date {
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
text-align: left;
z-index: 2;
}
.news-article-hero-date .day {
display: block;
font-family: var(--font-display);
font-size: clamp(4rem, 9vw, 7rem);
font-weight: 800;
line-height: 1;
letter-spacing: -.04em;
background: linear-gradient(180deg, var(--white) 0%, rgba(255,255,255,.45) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.news-article-hero-date .month-year {
display: block;
margin-top: 8px;
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--gold-400);
}
.news-article-hero-icon {
position: absolute;
top: 50%;
right: 8%;
transform: translateY(-50%);
width: 130px;
height: 130px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255,255,255,.08);
border: 1.5px dashed rgba(255,255,255,.18);
z-index: 1;
}
.news-article-hero-icon svg {
width: 60px;
height: 60px;
color: rgba(255,255,255,.85);
}
.news-article-body {
color: var(--slate-800);
font-size: 17px;
line-height: 1.75;
}
.news-article-body > * + * {
margin-top: 22px;
}
.news-article-body .news-article-lead {
font-size: 1.18rem;
line-height: 1.65;
color: var(--navy-800);
font-weight: 500;
padding-left: 18px;
border-left: 3px solid var(--gold-500);
}
.news-article-body h3 {
margin-top: 40px;
font-size: 1.4rem;
color: var(--navy-900);
letter-spacing: -.01em;
}
.news-article-body p {
margin: 0;
}
.news-article-list {
margin: 0;
padding: 0;
list-style: none;
}
.news-article-list li {
position: relative;
padding: 10px 0 10px 32px;
border-bottom: 1px solid var(--slate-100);
color: var(--slate-800);
}
.news-article-list li:last-child {
border-bottom: 0;
}
.news-article-list li::before {
content: '';
position: absolute;
left: 6px;
top: 19px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gold-500);
box-shadow: 0 0 0 4px rgba(212,160,23,.15);
}
.news-article-quote {
position: relative;
margin: 32px 0;
padding: 28px 30px 28px 56px;
border-radius: 18px;
background: linear-gradient(135deg, var(--slate-50), var(--white));
border: 1px solid var(--slate-100);
font-family: var(--font-display);
font-size: 1.18rem;
line-height: 1.55;
color: var(--navy-800);
font-style: italic;
}
.news-article-quote::before {
content: '\201C';
position: absolute;
top: 6px;
left: 18px;
font-family: Georgia, serif;
font-size: 4rem;
line-height: 1;
color: var(--gold-500);
font-style: normal;
}
@media (max-width: 700px) {
.news-article-hero { min-height: 220px; }
.news-article-hero-icon { width: 90px; height: 90px; right: 6%; }
.news-article-hero-icon svg { width: 42px; height: 42px; }
.news-article-body { font-size: 16px; }
.news-article-quote { padding: 22px 22px 22px 44px; font-size: 1.05rem; }
.news-article-quote::before { left: 12px; font-size: 3rem; }
}
/* =================================================================
Floating WhatsApp button — appears site-wide via footer include
================================================================= */
.wa-fab {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 90;
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
color: #fff;
text-decoration: none;
box-shadow: 0 10px 24px -6px rgba(37, 211, 102, .55),
0 4px 10px rgba(0, 0, 0, .18);
transition: transform .25s ease,
box-shadow .25s ease,
background .25s ease;
}
.wa-fab::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: rgba(37, 211, 102, .35);
z-index: -1;
animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
0% { transform: scale(.85); opacity: .65; }
70% { transform: scale(1.35); opacity: 0; }
100% { transform: scale(1.35); opacity: 0; }
}
.wa-fab:hover,
.wa-fab:focus-visible {
transform: translateY(-3px) scale(1.05);
background: #1ebe59;
box-shadow: 0 14px 30px -6px rgba(37, 211, 102, .65),
0 6px 14px rgba(0, 0, 0, .22);
color: #fff;
}
.wa-fab:focus-visible {
outline: 3px solid rgba(37, 211, 102, .45);
outline-offset: 4px;
}
.wa-fab-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.wa-fab-icon svg {
width: 30px;
height: 30px;
display: block;
}
.wa-fab-tip {
position: absolute;
right: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(8px);
padding: 8px 14px;
border-radius: 10px;
background: var(--navy-900, #0a1f3d);
color: #fff;
font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: .02em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease, transform .25s ease;
box-shadow: 0 8px 20px -6px rgba(10, 31, 61, .35);
}
.wa-fab-tip::after {
content: '';
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: var(--navy-900, #0a1f3d);
}
.wa-fab:hover .wa-fab-tip,
.wa-fab:focus-visible .wa-fab-tip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
@media (max-width: 600px) {
.wa-fab { width: 54px; height: 54px; bottom: 18px; right: 18px; }
.wa-fab-icon svg { width: 26px; height: 26px; }
.wa-fab-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.wa-fab { transition: none; }
.wa-fab::before { animation: none; }
}
/* =================================================================
Consultation popup modal
Triggered by [data-open-consult] anywhere on the site
================================================================= */
.cm-overlay {
position: fixed;
inset: 0;
background: rgba(8, 18, 38, .72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 9998;
padding: 24px;
animation: cm-fade .25s ease;
}
.cm-overlay.is-open { display: flex; }
@keyframes cm-fade {
from { opacity: 0; }
to { opacity: 1; }
}
body.cm-locked { overflow: hidden; }
.cm-frame {
position: relative;
width: min(640px, 100%);
max-height: calc(100vh - 48px);
overflow-y: auto;
background: #fff;
border-radius: 20px;
box-shadow: 0 32px 70px -18px rgba(8, 18, 38, .55),
0 12px 28px rgba(0, 0, 0, .18);
padding: 38px 38px 32px;
animation: cm-pop .3s cubic-bezier(.22, 1.1, .36, 1);
}
@keyframes cm-pop {
from { opacity: 0; transform: translateY(14px) scale(.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.cm-close {
position: absolute;
top: 16px;
right: 16px;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--slate-100, #e7e9ee);
background: #fff;
color: var(--slate-600, #4b5563);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.cm-close:hover {
background: var(--navy-900, #0a1f3d);
color: #fff;
border-color: var(--navy-900, #0a1f3d);
transform: rotate(90deg);
}
.cm-close svg { width: 16px; height: 16px; }
.cm-head { margin-bottom: 24px; }
.cm-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold-500, #d4a017);
}
.cm-eyebrow::before {
content: '';
width: 22px;
height: 2px;
background: var(--gold-500, #d4a017);
}
.cm-head h3 {
margin: 12px 0 8px;
font-size: clamp(1.5rem, 2.5vw, 1.85rem);
line-height: 1.2;
letter-spacing: -.01em;
color: var(--navy-900, #0a1f3d);
}
.cm-head p {
margin: 0;
color: var(--slate-700, #374151);
font-size: 14.5px;
line-height: 1.55;
}
.cm-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 18px;
}
.cm-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.cm-field-full { grid-column: 1 / -1; }
.cm-label {
font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .04em;
color: var(--navy-800, #0f2a52);
}
.cm-req {
color: var(--gold-500, #d4a017);
margin-left: 2px;
}
.cm-hint {
color: var(--slate-500, #6b7280);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.cm-field input,
.cm-field select,
.cm-field textarea {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--slate-100, #e7e9ee);
border-radius: 10px;
background: var(--slate-50, #f7f8fa);
color: var(--navy-900, #0a1f3d);
font-family: inherit;
font-size: 14.5px;
line-height: 1.4;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.cm-field select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px;
padding-right: 38px;
}
.cm-field textarea {
resize: vertical;
min-height: 96px;
}
.cm-field input:focus,
.cm-field select:focus,
.cm-field textarea:focus {
outline: none;
border-color: var(--gold-500, #d4a017);
background: #fff;
box-shadow: 0 0 0 4px rgba(212, 160, 23, .15);
}
.cm-field input::placeholder,
.cm-field textarea::placeholder {
color: var(--slate-500, #6b7280);
}
.cm-honey {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.cm-captcha {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border: 1.5px solid var(--slate-100, #e7e9ee);
border-radius: 10px;
background: var(--slate-50, #f7f8fa);
width: auto;
align-self: flex-start;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cm-captcha:focus-within {
border-color: var(--gold-500, #d4a017);
background: #fff;
box-shadow: 0 0 0 4px rgba(212, 160, 23, .15);
}
.cm-captcha-q {
font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
font-size: 1.05rem;
font-weight: 700;
color: var(--navy-900, #0a1f3d);
letter-spacing: .04em;
user-select: none;
white-space: nowrap;
}
.cm-captcha input[name="captcha_answer"] {
width: 72px;
padding: 6px 10px;
border: 1.5px solid var(--slate-100, #e7e9ee);
border-radius: 8px;
background: #fff;
text-align: center;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: var(--navy-900, #0a1f3d);
}
.cm-captcha input[name="captcha_answer"]:focus {
outline: none;
border-color: var(--gold-500, #d4a017);
box-shadow: none;
}
.cm-status {
min-height: 0;
margin-top: 16px;
font-size: 13.5px;
line-height: 1.4;
color: var(--slate-700, #374151);
}
.cm-status:not(:empty) {
padding: 10px 14px;
border-radius: 10px;
background: var(--slate-50, #f7f8fa);
border: 1px solid var(--slate-100, #e7e9ee);
}
.cm-status-error {
color: #a31621;
background: #fef2f2 !important;
border-color: #fecaca !important;
}
.cm-status-sending {
color: var(--navy-800, #0f2a52);
}
.cm-foot {
margin-top: 22px;
display: flex;
justify-content: flex-end;
gap: 12px;
}
.cm-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
border-radius: 99px;
border: 1.5px solid transparent;
font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
font-weight: 700;
font-size: 14px;
letter-spacing: .01em;
cursor: pointer;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cm-btn-ghost {
background: #fff;
color: var(--slate-700, #374151);
border-color: var(--slate-100, #e7e9ee);
}
.cm-btn-ghost:hover {
background: var(--slate-50, #f7f8fa);
color: var(--navy-900, #0a1f3d);
}
.cm-btn-primary {
background: var(--navy-900, #0a1f3d);
color: #fff;
}
.cm-btn-primary:hover {
background: var(--gold-500, #d4a017);
color: var(--navy-900, #0a1f3d);
transform: translateY(-2px);
box-shadow: 0 12px 26px -10px rgba(212, 160, 23, .55);
}
.cm-btn-primary:disabled,
.cm-btn-primary.is-loading {
opacity: .7;
cursor: progress;
transform: none;
box-shadow: none;
}
.cm-btn-arrow { width: 15px; height: 15px; transition: transform .2s ease; }
.cm-btn-primary:hover .cm-btn-arrow { transform: translateX(3px); }
.cm-btn-spinner {
display: none;
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid currentColor;
border-right-color: transparent;
animation: cm-spin .7s linear infinite;
}
.cm-btn.is-loading .cm-btn-spinner { display: inline-block; }
.cm-btn.is-loading .cm-btn-arrow { display: none; }
.cm-btn.is-loading .cm-btn-label::after { content: '...'; }
@keyframes cm-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.cm-success {
text-align: center;
padding: 16px 4px 4px;
}
.cm-success-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(37, 211, 102, .15);
color: #1ebe59;
margin-bottom: 16px;
}
.cm-success-icon svg { width: 32px; height: 32px; }
.cm-success h4 {
margin: 0 0 10px;
font-size: 1.25rem;
color: var(--navy-900, #0a1f3d);
}
.cm-success p {
margin: 0 auto 22px;
max-width: 380px;
color: var(--slate-700, #374151);
font-size: 14.5px;
line-height: 1.55;
}
.cm-success p a {
color: var(--navy-900, #0a1f3d);
font-weight: 700;
text-decoration: underline;
}
@media (max-width: 600px) {
.cm-frame { padding: 28px 22px 24px; border-radius: 16px; }
.cm-grid { grid-template-columns: 1fr; gap: 12px; }
.cm-foot { flex-direction: column-reverse; gap: 10px; }
.cm-btn { width: 100%; justify-content: center; }
.cm-head h3 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
.cm-overlay, .cm-frame { animation: none; }
.cm-close, .cm-btn, .cm-btn-arrow { transition: none; }
.cm-btn-spinner { animation: none; }
}
/* =====================================================
TEAM PAGE
===================================================== */
/* ---- Principles strip (intro) ---- */
.team-principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 16px;
}
.team-principle {
position: relative;
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
padding: 30px 26px;
text-align: left;
transition: transform .4s cubic-bezier(.4,0,.2,1),
box-shadow .4s cubic-bezier(.4,0,.2,1),
border-color .4s cubic-bezier(.4,0,.2,1);
overflow: hidden;
}
.team-principle::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(212,160,23,.08), transparent 60%);
opacity: 0;
transition: opacity .4s;
pointer-events: none;
}
.team-principle:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: rgba(212,160,23,.4);
}
.team-principle:hover::before { opacity: 1; }
.team-principle-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 14px;
background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
color: var(--white);
margin-bottom: 18px;
box-shadow: 0 10px 20px rgba(212,160,23,.25);
}
.team-principle-icon svg { width: 24px; height: 24px; }
.team-principle h4 {
margin: 0 0 8px;
font-size: 1.15rem;
color: var(--navy-900);
}
.team-principle p {
margin: 0;
color: var(--slate-500);
font-size: .98rem;
line-height: 1.6;
}
/* ---- Profiles list ---- */
.team-profiles {
display: flex;
flex-direction: column;
gap: 60px;
}
.team-profile {
position: relative;
display: grid;
grid-template-columns: minmax(280px, 380px) 1fr;
gap: 50px;
align-items: start;
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
padding: 44px;
box-shadow: 0 12px 36px rgba(10,31,61,.06);
overflow: hidden;
}
.team-profile::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--gold-500), var(--gold-400), transparent);
opacity: .9;
}
.team-profile-flip {
grid-template-columns: 1fr minmax(280px, 380px);
}
.team-profile-flip .team-profile-media { order: 2; }
.team-profile-flip .team-profile-content { order: 1; }
/* Photo */
.team-profile-media {
position: relative;
display: flex;
flex-direction: column;
gap: 22px;
}
.team-profile-photo {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 5;
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
box-shadow:
0 25px 55px rgba(10,31,61,.22),
0 0 0 1px rgba(212,160,23,.12);
isolation: isolate;
}
.team-profile-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
transition: transform .7s cubic-bezier(.4,0,.2,1);
}
.team-profile:hover .team-profile-photo img { transform: scale(1.04); }
.team-profile-photo-bg {
position: absolute;
inset: -20% -20% auto auto;
width: 70%;
height: 70%;
background: radial-gradient(circle, rgba(212,160,23,.25), transparent 60%);
pointer-events: none;
z-index: 1;
}
.team-profile-photo-ring {
position: absolute;
inset: 18px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 14px;
pointer-events: none;
z-index: 2;
}
.team-profile-photo-shine {
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
transform: translateX(-100%);
transition: transform 1s cubic-bezier(.4,0,.2,1);
pointer-events: none;
z-index: 3;
}
.team-profile:hover .team-profile-photo-shine { transform: translateX(100%); }
.team-profile-photo-badge {
position: absolute;
bottom: 18px;
left: 18px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--white);
color: var(--navy-900);
padding: 8px 14px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
line-height: 1.1;
text-transform: uppercase;
box-shadow: 0 8px 20px rgba(10,31,61,.2);
}
.team-profile-photo-badge svg {
width: 16px;
height: 16px;
color: var(--gold-500);
}
/* Highlights under photo */
.team-profile-highlights {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.team-profile-highlight {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: var(--slate-50);
border: 1px solid var(--slate-200);
border-radius: 12px;
transition: transform .3s, border-color .3s, background .3s;
}
.team-profile-highlight:hover {
transform: translateX(4px);
background: var(--white);
border-color: rgba(212,160,23,.4);
}
.team-profile-highlight-num {
font-family: var(--font-display);
font-weight: 800;
color: var(--gold-500);
font-size: 1rem;
flex-shrink: 0;
min-width: 80px;
}
.team-profile-highlight-text {
color: var(--slate-700);
font-size: .92rem;
line-height: 1.4;
}
/* Content */
.team-profile-content {
display: flex;
flex-direction: column;
}
.team-profile-tag {
display: inline-block;
color: var(--gold-500);
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 8px;
}
.team-profile-name {
margin: 0 0 6px;
font-size: clamp(1.6rem, 1.4vw + 1rem, 2.1rem);
color: var(--navy-900);
}
.team-profile-role {
margin: 0 0 14px;
font-weight: 700;
color: var(--navy-700);
font-size: 1rem;
letter-spacing: .01em;
}
.team-profile-tagline {
margin: 0 0 20px;
color: var(--slate-500);
font-size: 1.02rem;
font-style: italic;
border-left: 3px solid var(--gold-500);
padding-left: 14px;
}
.team-profile-badges {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.team-profile-badges li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: linear-gradient(135deg, rgba(212,160,23,.1), rgba(212,160,23,.05));
border: 1px solid rgba(212,160,23,.25);
border-radius: 999px;
font-size: .85rem;
font-weight: 600;
color: var(--navy-900);
}
.team-profile-badges svg {
width: 14px;
height: 14px;
color: var(--gold-500);
}
.team-profile-bio p {
color: var(--slate-700);
line-height: 1.7;
margin: 0 0 14px;
font-size: .98rem;
}
.team-profile-bio p:last-child { margin-bottom: 0; }
.team-profile-partners {
margin-top: 22px;
padding-top: 22px;
border-top: 1px dashed var(--slate-200);
}
.team-profile-partners-label {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--slate-500);
margin-bottom: 12px;
}
.team-profile-partners-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.team-profile-partner-chip {
display: inline-block;
padding: 6px 12px;
background: var(--slate-50);
border: 1px solid var(--slate-200);
border-radius: 8px;
font-size: .85rem;
color: var(--slate-700);
font-weight: 500;
transition: transform .25s, background .25s, color .25s, border-color .25s;
}
.team-profile-partner-chip:hover {
transform: translateY(-2px);
background: var(--navy-900);
color: var(--white);
border-color: var(--navy-900);
}
.team-profile-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
/* ---- Bottom CTA ---- */
.team-cta {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
padding: 70px 50px;
background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
color: var(--white);
text-align: center;
isolation: isolate;
}
.team-cta-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.team-cta-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: .55;
}
.team-cta-orb-a {
width: 340px;
height: 340px;
background: radial-gradient(circle, rgba(212,160,23,.6), transparent 70%);
top: -120px;
left: -80px;
}
.team-cta-orb-b {
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(30,90,168,.5), transparent 70%);
bottom: -140px;
right: -100px;
}
.team-cta-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
background-size: 40px 40px;
opacity: .4;
}
.team-cta-inner {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0 auto;
}
.team-cta-eyebrow {
display: inline-block;
color: var(--gold-400);
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 14px;
}
.team-cta h2 {
color: var(--white);
margin: 0 0 14px;
}
.team-cta p {
color: rgba(255,255,255,.78);
font-size: 1.05rem;
margin: 0 0 28px;
}
.team-cta-actions {
display: inline-flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.team-cta-actions .btn-ghost {
color: var(--white);
border-color: rgba(255,255,255,.4);
}
.team-cta-actions .btn-ghost:hover {
background: rgba(255,255,255,.1);
border-color: var(--white);
color: var(--white);
}
/* ---- Responsive ---- */
@media (max-width: 980px) {
.team-principles { grid-template-columns: 1fr; }
.team-profile,
.team-profile-flip {
grid-template-columns: 1fr;
gap: 36px;
padding: 32px;
}
.team-profile-flip .team-profile-media { order: 0; }
.team-profile-flip .team-profile-content { order: 0; }
.team-profile-media {
max-width: 380px;
margin: 0 auto;
width: 100%;
}
.team-profile-highlights {
grid-template-columns: 1fr;
}
.team-cta { padding: 56px 28px; }
}
@media (max-width: 560px) {
.team-profile { padding: 24px; }
.team-profile-name { font-size: 1.5rem; }
.team-profile-cta .btn { width: 100%; justify-content: center; }
.team-cta { padding: 44px 22px; }
.team-cta-actions .btn { width: 100%; justify-content: center; }
}