/* ═══════════════════════════════════════════════════════════════
   R-ZERO SHARED STYLES - REFACTORED
   Organized by: Design Tokens → Base → Layout → Components → Utilities
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────
   DESIGN TOKENS
   ──────────────────────────────────────────────────────────────── */
:root {
  /* Primary Brand Colors */
  --rz-blue: #1794FF;
  --rz-navy: #0D2655;
  --rz-red: #B40101;
  
  /* Blue Variants */
  --rz-blue-bright: #1A6BF0;
  --rz-blue-dark: #20477B;
  --rz-blue-purple: #2E61F2;
  --rz-blue-light: #ADC7F9;
  --rz-blue-pale: #c3d1fa;
  --rz-blue-bg: #D1EAFF;
  --rz-blue-bg2: #D5DFFC;
  --rz-blue-tint: #EDF6FF;
  --rz-blue-tint2: #EEF2FE;
  --rz-blue-muted: #859ad5;
  --rz-blue-dim: rgba(26,107,240,.07);
  
  /* Text Colors */
  --rz-text: #0D1B3E;
  --rz-text-dark: #0f172a;
  --rz-text-body: #333;
  --rz-text-secondary: #4a5568;
  --rz-text-light: #6b7280;
  
  /* Gray Scale */
  --rz-gray-darker: #222;
  --rz-gray: #6B7280;
  --rz-gray-icon: #9ca3af;
  --rz-gray-border: #d1d5db;
  --rz-gray-light: #e5e7eb;
  --rz-gray-lighter: #d4d6db;
  --rz-gray-bg: #edf1f6;
  
  /* Surfaces & Backgrounds */
  --rz-surface: #F5F7FC;
  --rz-surface-gradient-1: #F1F6FC;
  --rz-surface-gradient-2: #F7F9FB;
  --rz-surface-blue: #dbe8f8;
  --rz-surface-tan: #d9cdc9;
  --rz-white: #fff;
  --rz-black: #000;
  
  /* Accent Colors */
  --rz-cyan: #44E0F8;
  --rz-teal: #5de8c8;
  --rz-green: #23BA81;
  --rz-gold: #ffd166;
  --rz-purple: #cab1ff;
  --rz-chart-blue: #93d4f5;
  
  /* Borders */
  --rz-border: rgba(13,27,62,.08);
  --rz-border-card: #E9EAEC;
  --rz-border-scroll: #eef3ff;
  
  /* Opacity/Transparency */
  --rz-muted: rgba(13,27,62,.48);
  
  /* Gradients */
  --grad-blue-green: linear-gradient(to right, #1794FF 0%, #23BA81 100%);
  --grad-blue-purple: linear-gradient(to right, #1794FF 0%, #2E61F2 100%);
  --grad-purple-blue: linear-gradient(to right, #2E61F2 0%, #1794FF 70%);
  --grad-blue-light: linear-gradient(to right, #1794ff 0%, #6891F2 70%);
  --grad-navy-blue: linear-gradient(to right, #0D2655 0%, #1794FF 100%);
  --grad-radial: radial-gradient(circle farthest-side at 0% 0%, #cab1ff 5%, #146ef5 10%, currentColor 20%);
  
  /* Typography Sizes */
  --font-h1: 30px;
  --font-h2: 50px;
  --font-h3: 40px;
  --font-h4: 24px;
  --font-h5: 19px;
  --font-h1-hero: 21px;
  --font-h2-hero: 70px;
  --font-subline: 18px;
  --font-body: 16px;
  --font-small: 15px;
  --font-tiny: 14px;
  
  /* Typography Responsive */
  --font-h2-mobile: 40px;
  --font-h3-mobile: 30px;
  --font-h2-hero-mobile: 50px;
  
  /* Spacing */
  --space-page-top: 140px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  
  /* Border Radius */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 50px;
  --radius-pill: 999px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.35s ease;
  --transition-slow: 0.5s ease;
  --transition-slower: 0.6s ease;
  --easing-smooth: cubic-bezier(0.4,0,0.2,1);
  --easing-bounce: cubic-bezier(0.22, 1, 0.36, 1);
  
  /* Animation Timing */
  --acc-dur: 5000;
  --pf-dur: 10000ms;
}











/* ────────────────────────────────────────────────────────────────
   HEADER NAVIGATION
   ──────────────────────────────────────────────────────────────── */
.elementor-location-header {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}
.elementor-location-header > .elementor-element,
.elementor-location-header .e-con-inner {
  padding: 0 !important;
  max-width: none !important;
}

.rz-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 10px 10px 0 10px;
}
.rz-nav-bar {
      height: 60px;
      padding: 0 25px;
  max-width: 1440px;
  margin: 0 auto;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  border-radius: 100px;
  display: flex; align-items: center;
  box-shadow: 0 2px 8px rgba(13,27,62,.08);
  position: relative;
}

.rz-nav a.rz-logo { display: flex; align-items: center; flex-shrink: 0; }
.rz-nav .rz-logo img { height: 20px; }

.rz-nav-links {
  display: none; list-style: none;
  position: absolute; left: 50%; transform: translateX(-50%);
  align-items: center; gap: 0;
}
@media(min-width:768px) {
  .rz-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 40px 40px 0;
  }
  .rz-nav-bar {
        height: 70px;
        padding: 0 32px;
  }
}
@media(min-width:1024px) {
  .rz-nav-links { display: flex; }
}

.rz-nav-links li { position: static; }

.rz-nav-links a,
.rz-nav-links button {
  font: 500 14px/1 'Poppins', sans-serif;
  color: var(--rz-text); background: none; border: none;
  padding: 10px 14px; border-radius: 10px;
  display: block; align-items: center; gap: 4px;
  text-decoration: none; cursor: pointer;
  transition: background .15s;
}
.rz-nav-links a:hover,
.rz-nav-links button:hover,
.rz-nav-links li.open button { background: var(--rz-blue-dim); }

.rz-chev {
  width: 12px; height: 12px; opacity: .4;
  transition: transform .2s;
}
.rz-nav-links li.open .rz-chev { transform: rotate(180deg); opacity: .7; }

/* ── Right side ── */
.rz-nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.rz-cta {
  display: none;
  font-weight: 600 !important;
  padding: 10px 20px; border-radius: 50px;
  background: var(--rz-blue); color: #fff !important;
  text-decoration: none;
  transition: background .15s;
}
.rz-cta:hover { background: var(--rz-navy); }
@media(min-width:1024px) { .rz-cta { display: inline-flex; } }

.rz-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; padding: 0 9px;
  border: 1px solid var(--rz-border); border-radius: 8px;
  background: none; cursor: pointer;
}
.rz-burger span {
  display: block; height: 1.5px; background: var(--rz-text); border-radius: 2px;
  transition: transform .25s, opacity .2s;
  transform-origin: center;
}
.rz-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.rz-burger.open span:nth-child(2) { opacity: 0; }
.rz-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media(min-width:1024px) { .rz-burger { display: none; } }

.rz-mega {
  position: absolute; top: calc(100% + 10px);
  background: #fff; border: 1px solid var(--rz-border); border-radius: 16px;
  box-shadow: 0 12px 48px rgba(13,27,62,.1);
  opacity: 0; transform: translateY(-6px);
  pointer-events: none; transition: opacity .2s, transform .2s;
  display: none;
}
@media(min-width:1024px) {
  .rz-mega { display: block; }
  li.open > .rz-mega { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

.rz-mega.mega-wide { left: 0; right: 0; display: none; }

@media(min-width:1024px) { 
  .rz-mega.mega-wide { 
    display: grid; 
    grid-template-columns: 1fr;
    width: 600px; /* ← Add this to force it to use left: 0; right: 0; */
  } 
}

.rz-mega.mega-drop { left: auto; right: auto; padding: 20px; min-width: 560px; }

.mega-side {
  background: var(--rz-surface); border-right: 1px solid var(--rz-border);
  padding: 20px; display: flex; flex-direction: column; gap: 8px;
}
.mega-side a {
  display: block; padding: 10px; border-radius: 8px;
  text-decoration: none; transition: background .15s;
}
.mega-side a:hover { background: rgba(13,27,62,.04); }
.mega-side .mega-name { font-size: 13px; font-weight: 700; color: var(--rz-text); }
.mega-side .mega-desc { font-size: 11px; color: var(--rz-muted); line-height: 1.4; }

.mega-body { padding: 20px; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.mega-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rz-blue);
  padding: 0 10px; margin-bottom: 8px;
}
.mega-label-span2 { grid-column: span 2; }

.mega-item {
  display: block; padding: 10px; border-radius: 8px;
  text-decoration: none; transition: background .15s;
}
.mega-item:hover { background: var(--rz-blue-dim); }
.mega-item .mega-name { font-size: 13px; font-weight: 600; color: var(--rz-text); margin-bottom: 2px; display: block; }
.mega-item .mega-desc { font-size: 11px; color: var(--rz-muted); line-height: 1.4; display: block; }

.rz-overlay { position: fixed; inset: 0; z-index: 999; display: none; }
.rz-overlay.on { display: block; }

.rz-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 100vw);
  background: #fff; z-index: 1100;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rz-drawer.open { transform: translateX(0); }

.rz-scrim {
  position: fixed; inset: 0; z-index: 1099;
  background: rgba(13,27,62,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.rz-scrim.on { opacity: 1; pointer-events: auto; }

.rz-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--rz-border);
}
.rz-drawer-top img { height: 18px; }
.rz-drawer-x {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--rz-border); background: none;
  font-size: 18px; color: var(--rz-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.rz-drawer-scroll { flex: 1; overflow-y: auto; padding: 8px 0 24px; }

.rz-drawer-btn,
.rz-drawer-link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 12px 20px;
  font: 600 15px/1 'Poppins', sans-serif;
  color: var(--rz-text); background: none; border: none;
  text-decoration: none; text-align: left; cursor: pointer;
}

.rz-drawer-sub {
  max-height: 0; overflow: hidden;
  background: var(--rz-surface);
  transition: max-height .3s ease;
}
.rz-drawer-sub.open { max-height: 600px; }

.rz-drawer-sub a {
  display: block; padding: 10px 24px;
  font: 500 14px/1.3 'Poppins', sans-serif;
  color: var(--rz-text); text-decoration: none;
}
.rz-drawer-sub a:hover { background: var(--rz-blue-dim); }

.rz-drawer-sub .rz-sub-label {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rz-blue);
  padding: 12px 24px 4px; display: block;
}

.rz-drawer-sep { height: 1px; background: var(--rz-border); margin: 8px 0; }

.rz-drawer-cta {
  display: block; width: calc(100% - 32px); margin: 16px 16px 0;
  padding: 12px; border-radius: 50px; border: none; 
  background: var(--rz-blue); color: #fff !important;
  text-decoration: none; text-align: center;
  font: 600 15px/1 'Poppins', sans-serif;
}






/* ────────────────────────────────────────────────────────────────
   BASE STYLES
   ──────────────────────────────────────────────────────────────── */
body {
  font-family: 'Poppins', Helvetica, Arial, sans-serif !important;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--rz-text-body);
}

footer { 
  display: none; 
}

button:hover,
button:focus { 
  background: rgba(0,0,0,0); 
  color: auto; 
}

/* ────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ──────────────────────────────────────────────────────────────── */

/* Standard Headings */
h1 { 
  font-weight: 400; 
  font-size: var(--font-h1); 
  color: var(--rz-blue); 
  line-height: 1.0; 
}

h2 { 
  font-weight: 700 !important; 
  font-size: var(--font-h2); 
  color: var(--rz-navy); 
  line-height: 1.0; 
  letter-spacing: -3px; 
}

h3 { 
  font-weight: 700 !important; 
  font-size: var(--font-h3) !important; 
  color: var(--rz-navy); 
  line-height: 1.0; 
  letter-spacing: -2px !important; 
}

h4 { 
  font-weight: 600 !important; 
  font-size: var(--font-h4) !important; 
  color: var(--rz-navy); 
  line-height: 1.0; 
  letter-spacing: -0.5px; 
}

h5 { 
  font-weight: 600 !important; 
  font-size: var(--font-h5) !important; 
  color: var(--rz-navy); 
  line-height: 1.0; 
  letter-spacing: -0.5px; 
}

/* Hero Typography */
.h1-hero { 
  font-size: var(--font-h1-hero); 
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); 
  font-weight: 500; 
  color: var(--rz-cyan); 
}

.h2-hero {
  color: var(--rz-white) !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0); 
  font-size: var(--font-h2-hero) !important; 
  font-weight: 600 !important;
  letter-spacing: -3px; 
}

.subline { 
  color: var(--rz-white); 
  padding: 0 0 30px 0; 
  font-weight: 600; 
  text-shadow: 0 2px 5px rgba(0,0,0,0); 
  font-size: var(--font-subline); 
}

.subline-small { 
  font-size: var(--font-subline) !important; 
  color: var(--rz-black); 
}

/* Gradient Text Effects */
.grad1, .grad2, .grad21, .grad3, .grad4, .grad5, .grad6, .grad7 { 
  font-weight: 500 !important; 
  background-size: 110%; 
  padding-bottom: 0.15em;
  background-clip: text; 
  -webkit-background-clip: text !important; 
  -webkit-text-fill-color: transparent !important;
}

.grad1 { background: var(--grad-blue-green); }
.grad2, .grad21 { background: var(--grad-blue-purple); }
.grad3, .grad6 { background: var(--grad-purple-blue); }
.grad4 { background: var(--grad-blue-light); }
.grad5 { background: var(--grad-navy-blue); }
.grad7 { background-image: var(--grad-radial); }

/* Eyebrow Labels */
.eyebrow { 
  color: var(--rz-blue); 
  font-size: var(--font-subline); 
  display: block; 
  padding: 0; 
}

.eyebrow-pill {
  letter-spacing: -0.5px;
  display: inline-block;
  width: fit-content;
  padding: 9px 25px 8px !important;
  font-weight: 500;
  border-radius: var(--radius-pill);
  color: var(--rz-blue-muted) !important;
  text-transform: uppercase;
  margin: 0 0 5px 0;
  background-size: 100% 100%;
  background-image: linear-gradient(90deg, var(--rz-blue-tint), var(--rz-blue-tint2));
}

/* ────────────────────────────────────────────────────────────────
   LAYOUT UTILITIES
   ──────────────────────────────────────────────────────────────── */
.page-content { 
  padding: 0 10px; 
}

.page-gradient { 
  background: linear-gradient(180deg, rgba(250, 250, 250, 1) 0%, rgba(255, 255, 255, 1) 100%); 
}

.page-ptop { 
  padding-top: var(--space-page-top); 
}

.container-1800 {
  max-width: 1800px !important;
  margin: 0 auto;
}

.hero { 
  margin: 80px auto 0; 
  border-radius: var(--radius-2xl); 
  width: 1800px; 
}
@media(min-width: 768px) {
  .hero { 
    margin: 20px auto 0; 
    border-radius: var(--radius-2xl); 
    width: 1800px; 
  }   
  .page-content { 
    padding: 0 20px; 
  }
}
/* ────────────────────────────────────────────────────────────────
   BUTTONS
   ──────────────────────────────────────────────────────────────── */
a.btn-solid1, 
a.btn-solid2, 
a.btn-ghost {
  padding: 10px 50px !important;
  font-size: 1rem;
  font-weight: 600;
  border-radius: var(--radius-full) !important;
  text-decoration: none;
  transition: border-color var(--transition-fast);
  gap: 10px;
  align-items: center;
  letter-spacing: -0.25px;
  display: inline-flex;
}

a.btn-solid1 { 
  border: 2px solid var(--rz-blue); 
  color: var(--rz-white); 
  background: var(--rz-blue); 
  font-weight: 700; 
}

a.btn-solid2 { 
  border: 2px solid var(--rz-navy); 
  border-radius: var(--radius-sm); 
  color: var(--rz-white); 
  background: var(--rz-navy); 
}

a.btn-ghost { 
  border: 2px solid var(--rz-blue-light); 
  color: var(--rz-blue-dark); 
}

a.btn-ghost.white { 
  border: 2px solid var(--rz-blue-light); 
  color: var(--rz-white); 
}

a.btn-ghost:hover { 
  border-color: var(--rz-navy); 
}

/* ────────────────────────────────────────────────────────────────
   UTILITY CLASSES
   ──────────────────────────────────────────────────────────────── */
.text-white { color: var(--rz-white) !important; }
.text-brand1 { color: var(--rz-blue); }
.text-brand2 { color: var(--rz-navy); }
.text-center { text-align: center; }

.icon { 
  width: 28px; 
  height: 28px; 
  border: 2px solid var(--rz-blue-light); 
  border-radius: 50%; 
  display: grid; 
  place-items: center; 
}

.btn-solid1 .icon { 
  border: 2px solid rgba(255,255,255,0.2); 
}

.logo-trust { 
  padding: 0 20px; 
  height: 60px !important; 
  width: auto; 
}

.steps-number {
  font-size: var(--font-tiny);
  display: inline-block;
  border-radius: var(--radius-sm);
  color: var(--rz-blue-dark);
  font-weight: 500;
  width: 30px; 
  height: 30px;
  border: 2px solid #1794ff45;
  padding: 3px 0 0 0;
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────
   TESTIMONIALS
   ──────────────────────────────────────────────────────────────── */
.bg-quote { 
  background: url(/wp-content/uploads/2026/03/bg-quotemark.webp) top left no-repeat; 
}

.testimonial-quote { 
  font-size: 21px; 
  padding: 5% 0 0 5%; 
}

.testimonial-logo { 
  max-width: 130px !important; 
  margin: 0 0 20px 0; 
}

/* ────────────────────────────────────────────────────────────────
   CARDS - 4 COLUMN VALUE PROPS
   ──────────────────────────────────────────────────────────────── */
.rzfc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.rzfc-card {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border: 1px solid var(--rz-border-card);
}

.rzfc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(254,254,254) 70%);
  background-color: rgba(255,255,255,0.1);
  pointer-events: none;
}

.rzfc-widget,
.rzfc-headline,
.rzfc-body {
  position: relative;
  z-index: 1;
}

.rzfc-widget {
  padding: 0;
  min-height: 300px;
}

.rzfc-widget img {
  width: 100%;
  display: block;
  border-radius: 0px;
}

.rzfc-headline {
  padding: 20px 20px 0;
}

.rzfc-headline h3 {
  margin: 0;
  font-size: var(--font-h1) !important;
}

.rzfc-body {
  padding: 10px 20px 24px; 
  font-size: 16px !important;
}

.rzfc-body p {
  line-height: 1.6;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   BENEFIT CARDS
   ──────────────────────────────────────────────────────────────── */
.card-benefit {
  background: linear-gradient(180deg, var(--rz-surface-gradient-1) 0%, var(--rz-surface-gradient-2) 100%);
  text-align: center;
  min-height: 400px; 
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--radius-2xl);    
  overflow: hidden;
}

.card-benefit h3 { 
  font-size: var(--font-h1) !important; 
}

/* ────────────────────────────────────────────────────────────────
   ROTATING TEXT (IAQ SENSOR PAGE)
   ──────────────────────────────────────────────────────────────── */
.rotating-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
}

.rotating-words {
  display: inline-block;
  position: relative;
}

.rotating-words span {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rz-blue);
  white-space: nowrap;
  opacity: 0;
  animation: rz-fade-word 18s linear infinite;
}

.rotating-words span:nth-child(1) { animation-delay: 0s; }
.rotating-words span:nth-child(2) { animation-delay: 2s; }
.rotating-words span:nth-child(3) { animation-delay: 4s; }
.rotating-words span:nth-child(4) { animation-delay: 6s; }
.rotating-words span:nth-child(5) { animation-delay: 8s; }
.rotating-words span:nth-child(6) { animation-delay: 10s; }
.rotating-words span:nth-child(7) { animation-delay: 12s; }
.rotating-words span:nth-child(8) { animation-delay: 14s; }
.rotating-words span:nth-child(9) { animation-delay: 16s; }

.rotating-words::after {
  content: 'PM 1.0, 2.4 and 10';
  visibility: hidden;
  display: inline-block;
  white-space: nowrap;
}

@keyframes rz-fade-word {
  0%     { opacity: 0; }
  2%     { opacity: 1; }
  9%     { opacity: 1; }
  11.11% { opacity: 0; }
  100%   { opacity: 0; }
}

/* ────────────────────────────────────────────────────────────────
   CHART ANIMATION (ODCV PAGE)
   ──────────────────────────────────────────────────────────────── */
.chart { 
  display: flex; 
  align-items: flex-end; 
  gap: 1%; 
  padding: 5%; 
  height: 600px; 
}

.bar-wrap { 
  display: flex; 
  flex-direction: column; 
  align-items: flex-start; 
  justify-content: flex-end; 
  width: 33%; 
}

.bar { 
  width: 100%; 
  border-radius: var(--radius-xl); 
  padding: 18px 18px 20px; 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  overflow: hidden; 
  height: 0; 
  transition: height 1.2s var(--easing-bounce); 
}

.bar.blue  { background: var(--rz-chart-blue); --h: 200px; }
.bar.teal  { background: var(--rz-teal); --h: 320px; }
.bar.gold  { background: var(--rz-gold); --h: 460px; }
.bar.animate { height: var(--h); }

.pct { 
  font-size: 40px; 
  font-weight: 600; 
  color: var(--rz-black); 
  line-height: 1; 
  margin-bottom: auto; 
  letter-spacing: -2px; 
}

.label { 
  margin-top: 24px; 
  opacity: 0; 
  transform: translateY(6px); 
  transition: opacity var(--transition-slow), transform var(--transition-slow); 
  line-height: 1em; 
}

.label.show { 
  opacity: 1; 
  transform: translateY(0); 
}

.label strong { 
  display: block; 
  font-size: 0.9rem; 
  font-weight: 700; 
  color: var(--rz-black); 
  line-height: 1.3; 
  margin-bottom: 4px; 
}

.label span { 
  font-size: var(--font-tiny); 
  color: var(--rz-gray-darker); 
}

/* ────────────────────────────────────────────────────────────────
   HOW IT WORKS - SCROLL ANIMATION
   ──────────────────────────────────────────────────────────────── */
.hiw-driver { 
  position: relative; 
  height: 450vh; 
}

.hiw-sticky { 
  position: sticky; 
  top: 0; 
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
  padding: 0; 
  overflow: hidden; 
}

.hiw-steps { 
  position: relative; 
  flex: 1; 
  max-width: 1280px; 
  width: 100%; 
}

.hiw-spine-wrapper { 
  position: absolute; 
  inset: 0; 
  display: grid; 
  grid-template-columns: 1fr 56px 1fr; 
  gap: 0 32px; 
  pointer-events: none; 
  z-index: 0; 
}

.hiw-spine-col { 
  position: relative; 
  display: flex; 
  justify-content: center; 
}

.hiw-spine-track { 
  width: 2px; 
  height: 100%; 
  background: rgba(26,107,240,0.15); 
  border-radius: 2px; 
  overflow: hidden; 
  position: relative; 
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); 
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); 
}

.hiw-spine-fill { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 0%; 
  background: linear-gradient(to bottom, var(--rz-navy), var(--rz-blue)); 
  border-radius: 2px; 
}

.hiw-step { 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 50%; 
  transform: translateY(-50%); 
  display: grid; 
  grid-template-columns: 1fr 56px 1fr; 
  gap: 0 32px; 
  align-items: center; 
  will-change: transform, opacity; 
}

.hiw-img-wrap { 
  width: 100%; 
  aspect-ratio: 1 / 1; 
  border-radius: var(--radius-lg); 
  overflow: hidden; 
  background: var(--rz-surface-blue); 
  justify-self: end; 
}

.hiw-img-wrap img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}

.hiw-badge { 
  width: 34px; 
  height: 34px; 
  background: var(--rz-blue-bright); 
  border-radius: var(--radius-md); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 13px; 
  font-weight: 700; 
  color: var(--rz-white); 
  margin: 0 auto; 
  position: relative; 
  z-index: 1; 
}

/* ────────────────────────────────────────────────────────────────
   ACCORDIONS & TABS - SHARED BASE
   ──────────────────────────────────────────────────────────────── */
.rzero-panel { 
  display: none; 
}

.rzero-panel.active { 
  display: block; 
}

.rzero-accordion-item { 
  border-bottom: 1px solid var(--rz-gray-light); 
}

.rzero-accordion-item:first-child { 
  border-top: 1px solid var(--rz-gray-light); 
}

.rzero-accordion-btn {
  width: 100%; 
  background: none; 
  border: none; 
  color: var(--rz-text-dark); 
  text-align: left; 
  padding: 18px 0; 
  font-size: var(--font-subline); 
  font-weight: 500; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  transition: color var(--transition-fast);
}

.rzero-accordion-btn:hover,
.rzero-accordion-btn:focus { 
  color: var(--rz-navy); 
}

.rzero-acc-dot { 
  display: none; 
  width: 22px; 
  height: 22px; 
  border-radius: 50%; 
  border: 1.5px solid var(--rz-gray-border); 
  flex-shrink: 0; 
  position: relative; 
  transition: border-color var(--transition-fast), background var(--transition-fast); 
}

.rzero-accordion-btn.open .rzero-acc-dot { 
  background: var(--rz-blue); 
  border-color: var(--rz-blue); 
}

.rzero-accordion-btn.open .rzero-acc-dot::after { 
  content: ''; 
  position: absolute; 
  inset: 4px; 
  border-radius: 50%; 
  background: var(--rz-white); 
}

.rzero-acc-chevron { 
  flex-shrink: 0; 
  margin-left: auto; 
  width: 20px; 
  height: 20px; 
  border-radius: 50%; 
  border: 1.5px solid var(--rz-gray-border); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: background var(--transition-fast), border-color var(--transition-fast), transform 0.3s; 
}

.rzero-acc-chevron svg { 
  width: 10px; 
  height: 10px; 
  stroke: var(--rz-gray-icon); 
  transition: stroke var(--transition-fast); 
}

.rzero-accordion-btn.open .rzero-acc-chevron { 
  background: var(--rz-blue); 
  border-color: var(--rz-blue); 
  transform: rotate(180deg); 
}

.rzero-accordion-btn.open .rzero-acc-chevron svg { 
  stroke: var(--rz-white); 
}

.rzero-accordion-body { 
  display: grid; 
  grid-template-rows: 0fr; 
  transition: grid-template-rows var(--transition-normal), padding var(--transition-normal); 
  padding: 0; 
  overflow: hidden; 
}

.rzero-accordion-body > span { 
  overflow: hidden; 
}

.rzero-accordion-body.open { 
  grid-template-rows: 1fr; 
  padding: 0 0 15px 30px; 
}

/* ────────────────────────────────────────────────────────────────
   SPLIT LAYOUT (Image + Accordion)
   ──────────────────────────────────────────────────────────────── */
.rzero-split { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 24px; 
  margin: 0 auto 80px;
  align-items: stretch !important;
}

.rzero-split-left { 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
  padding: 70px 0; 
}

.rzero-split-right { 
  border-radius: var(--radius-xl); 
  background: var(--rz-gray-light); 
  overflow: hidden; 
  position: relative;
  min-height: unset !important;
  height: auto;
}

.rzero-image-panel { 
  position: absolute; 
  inset: 0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  opacity: 0; 
  transform: translateY(12px); 
  transition: opacity 0.4s ease, transform 0.4s ease; 
  pointer-events: none; 
}

.rzero-image-panel.active { 
  opacity: 1; 
  transform: translateY(0); 
  pointer-events: auto; 
}

.rzero-split .rzero-accordion-body { 
  padding-left: 36px; 
}

.rzero-split .rzero-accordion-body.open { 
  padding: 0 0 16px 0; 
}

/* ────────────────────────────────────────────────────────────────
   FAQ SPECIFIC ACCORDION
   ──────────────────────────────────────────────────────────────── */
.rzero-faq .rzero-accordion-btn { 
  padding: 15px 30px; 
}

.rzero-faq .rzero-accordion-btn:focus { 
  color: var(--rz-navy); 
}

.rzero-faq .rzero-accordion-item { 
  border-bottom: none; 
  border-radius: var(--radius-md); 
  background: var(--rz-white); 
  margin: 0 0 10px 0; 
  padding: 0; 
  overflow: hidden; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.bg-faq { 
  border-radius: var(--radius-2xl); 
  padding: 4% 5%; 
  background-color: var(--rz-white); 
}

/* ────────────────────────────────────────────────────────────────
   TAB NAVIGATION
   ──────────────────────────────────────────────────────────────── */
.rzero-tabs {
  display: table;
  align-items: center;
  position: relative;
  padding: 4px;
  margin-bottom: 28px;
}

.rzero-tab-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--rz-blue-bg), var(--rz-blue-bg2));
  transition: left var(--transition-normal) var(--easing-smooth), width var(--transition-normal) var(--easing-smooth);
  z-index: 1;
  pointer-events: none;
}

.rzero-tab {
  min-width: 120px;
  position: relative;
  z-index: 2;
  padding: 12px 25px 10px !important;
  border: none;
  background: none;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
  text-align: center;
  white-space: nowrap;
  color: var(--rz-text-body);
  border-radius: var(--radius-full);
  border: 2px solid var(--rz-blue-pale);
  margin: 3px;
  font-size: var(--font-tiny);
}

.rzero-tab.active {
  color: var(--rz-blue); 
  display: inline-block;
  width: fit-content;
  padding: 12px 25px 10px !important;
  font-weight: 500;
  border-radius: var(--radius-pill);
  color: var(--rz-blue-purple) !important;
  background-size: 100% 100%;
  background-image: linear-gradient(90deg, var(--rz-blue-tint), var(--rz-blue-tint2));
}

.rzero-tab:hover:not(.active) { 
  color: var(--rz-blue); 
}

.rzero-panel.active {
  animation: rzFadeUp 0.35s ease;
}

@keyframes rzFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────────────────────────────────────────────
   PRODUCT TAB NAV (Alternative Style)
   ──────────────────────────────────────────────────────────────── */
.rz-tab-nav {
  display: table; 
  align-items: center; 
  position: relative; 
  margin: 32px auto 0; 
  padding: 4px;
}

.rz-tab-nav::before { 
  content: ""; 
  position: absolute; 
  inset: 0; 
  padding: 2px; 
  border-radius: var(--radius-full); 
  background: linear-gradient(to right, var(--rz-blue-bg), var(--rz-blue-bg2)); 
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 
  -webkit-mask-composite: xor; 
  mask-composite: exclude; 
}

.rz-tab-pill { 
  position: absolute; 
  top: 4px; 
  left: 4px; 
  height: calc(100% - 8px); 
  border-radius: var(--radius-full); 
  background: linear-gradient(to right, var(--rz-blue-bg), var(--rz-blue-bg2)); 
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1); 
  color: var(--rz-blue); 
  z-index: 1; 
}

.rz-tab-btn { 
  min-width: 200px;
  position: relative; 
  z-index: 2; 
  flex: 1; 
  padding: 10px 8px; 
  border: none; 
  background: none; 
  font-weight: 500; 
  cursor: pointer; 
  transition: color 0.3s ease; 
  text-align: center; 
  white-space: nowrap; 
  color: var(--rz-text-body);
}

.rz-tab-btn.active { 
  color: var(--rz-blue); 
}

.rz-tab-btn:hover:not(.active) { 
  color: var(--rz-blue); 
}

/* ────────────────────────────────────────────────────────────────
   METRICS SCROLL STRIP
   ──────────────────────────────────────────────────────────────── */
.rz-metrics-strip { 
  --card-w: 280px; 
  --card-gap: 20px; 
  --card-radius: 16px; 
  width: 100%; 
  position: relative; 
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; 
  -webkit-font-smoothing: antialiased; 
}

.rz-metrics-scroll-wrapper { 
  width: calc(100% + ((100vw - 100%) / 2)); 
  overflow-x: auto; 
  overflow-y: hidden; 
  scroll-behavior: smooth; 
  -webkit-overflow-scrolling: touch; 
  scrollbar-width: none; 
}

.rz-metrics-scroll-wrapper::-webkit-scrollbar { 
  display: none; 
}

.rz-metrics-track { 
  display: flex; 
  gap: var(--card-gap); 
  padding: 8px 60px 24px 0; 
  width: max-content; 
}

.rz-metric-card { 
  width: var(--card-w); 
  min-width: var(--card-w); 
  border-radius: var(--card-radius); 
  background: var(--rz-card-bg, #edf1f6); 
  overflow: hidden; 
  display: flex; 
  flex-direction: column; 
  transition: transform 0.25s ease, box-shadow 0.25s ease; 
  cursor: default; 
  position: relative; 
}

.rz-metric-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 8px 24px rgba(0,0,0,0.06); 
}

.rz-metric-card-visual { 
  height: 160px; 
  position: relative; 
  overflow: hidden; 
}

.rz-metric-card-body { 
  padding: 20px 20px 24px; 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
}

.rz-metric-card-title { 
  font-size: var(--font-h4) !important; 
  margin-bottom: 8px; 
}

.rz-scroll-nav {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.rz-scroll-nav .rz-scroll-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
  text-decoration: none !important;
  color: transparent !important;
  border: 2px solid var(--rz-border-scroll) !important;
  background: var(--rz-white) !important;
}

.rz-scroll-nav .rz-scroll-btn:hover,
.rz-scroll-nav .rz-scroll-btn:focus {
  background: var(--rz-white) !important;
  border: none !important;
  text-decoration: none !important;
}

.rz-scroll-nav .rz-scroll-btn:active {
  background: var(--rz-gray-lighter) !important;
  transform: scale(0.95);
}

.rz-scroll-nav .rz-scroll-btn svg {
  pointer-events: none;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   STICKY FEATURES
   ──────────────────────────────────────────────────────────────── */
.features-section { 
  max-width: 100%; 
}

.features-inner { 
  display: flex; 
  gap: 48px; 
}

.features-left { 
  width: 33%; 
  flex-shrink: 0; 
  align-self: flex-start; 
  position: sticky; 
  top: 150px; 
}

.features-right { 
  flex: 1; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 32px 20px; 
  padding: 4px 0; 
}

.card-img { 
  background: var(--rz-surface-tan); 
  border-radius: var(--radius-2xl); 
  aspect-ratio: 4/3; 
}

.card-text { 
  padding: 14px 4px 0; 
}

/* ────────────────────────────────────────────────────────────────
   PRODUCT TAB CONTENT (How It Works Areas)
   ──────────────────────────────────────────────────────────────── */
.rz-tab-content { 
  display: flex; 
  height: 500px; 
  margin-top: 32px; 
  border-radius: var(--radius-2xl); 
  overflow: hidden; 
  box-shadow: 0 0 40px rgba(23,148,255,0.1); 
}

.rz-tab-image { 
  width: 50%; 
  position: relative; 
  overflow: hidden; 
}

.rz-tab-image-bg { 
  position: absolute; 
  inset: 0; 
}

.rz-tab-image-bg.tab-bg-0,
.rz-tab-image-bg.tab-bg-1,
.rz-tab-image-bg.tab-bg-2,
.rz-tab-image-bg.tab-bg-3 { 
  background: url(https://rzero1dev.wpengine.com/wp-content/uploads/2026/03/bg-officeblue.jpg); 
}

.rz-tab-panel { 
  position: absolute; 
  inset: 20px; 
  opacity: 0; 
  transform: scale(1.04); 
  transition: opacity 0.5s ease 0.1s, transform 0.6s ease 0.1s; 
}

.rz-tab-panel.active { 
  opacity: 1; 
  transform: scale(1); 
}

.rz-tab-screenshot { 
  position: absolute; 
  inset: 0; 
  border-radius: var(--radius-md); 
  overflow: hidden; 
  background: rgba(255,255,255,0.06); 
  border: 1px solid rgba(255,255,255,0.08); 
  text-align: center; 
}

.rz-tab-screenshot img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: left top; 
}

.rz-callout { 
  position: absolute; 
  background: var(--rz-white); 
  border-radius: var(--radius-lg); 
  padding: 16px 20px; 
  box-shadow: 0 8px 30px rgba(0,0,0,0.2); 
  opacity: 0; 
  transform: translateY(10px); 
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s; 
  z-index: 3; 
}

.rz-tab-panel.active .rz-callout { 
  opacity: 1; 
  transform: translateY(0); 
}

.rz-callout-label { 
  font-size: 11px; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
  color: var(--rz-blue); 
  margin-bottom: 4px; 
}

.rz-callout-value { 
  font-size: 28px; 
  font-weight: 700; 
  color: var(--rz-navy); 
  line-height: 1.1; 
}

.rz-callout-sub { 
  font-size: 12px; 
  font-weight: 500; 
  color: var(--rz-black); 
  margin-top: 4px; 
  display: flex; 
  align-items: center; 
  gap: 4px; 
}

.rz-callout-sub.neutral { 
  color: var(--rz-text-light); 
}

.rz-callout-badge { 
  position: absolute; 
  top: -8px; 
  right: -8px; 
  width: 24px; 
  height: 24px; 
  border-radius: 50%; 
  background: var(--rz-blue); 
  color: var(--rz-white); 
  font-size: 12px; 
  font-weight: 700; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

.rz-tab-text { 
  width: 50%; 
  padding: 60px 60px 60px 50px; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  position: relative; 
  overflow: hidden; 
}

.rz-tab-text-block {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  padding: 60px 60px 60px 50px; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  opacity: 0; 
  transform: translateY(20px); 
  transition: opacity 0.4s ease, transform 0.4s ease; 
  pointer-events: none;
}

.rz-tab-text-block.active { 
  opacity: 1; 
  transform: translateY(0); 
  pointer-events: auto; 
}

.rz-tab-text-block.exit-up { 
  opacity: 0; 
  transform: translateY(-20px); 
}

.rz-tab-icon { 
  width: 52px; 
  height: 52px; 
  border-radius: var(--radius-lg); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-bottom: 20px; 
  font-size: 22px; 
}

.rz-tab-title { 
  font-size: var(--font-h3); 
  font-weight: 600; 
  color: var(--rz-blue); 
  margin-bottom: 12px; 
  letter-spacing: -0.5px; 
  line-height: 1.1; 
}

/* ────────────────────────────────────────────────────────────────
   TIMED CAROUSEL (Portfolio Features)
   ──────────────────────────────────────────────────────────────── */
.pf-wrap {
  display: grid;
  grid-template-columns: 3fr 7fr;
  gap: 48px;
  padding: 0 0 48px 0;
}

.pf-acc-item {
  border-bottom: 1px solid var(--rz-border);
  position: relative;
}

.pf-acc-item:first-child { 
  border-top: 2px solid var(--rz-border); 
}

.pf-progress {
  position: absolute;
  top: -1px; 
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(to right, #2E61F2 0%, var(--rz-blue) 70%);
  transition: none; 
  z-index: 2;
}

.pf-acc-item.pf-active .pf-progress {
  width: 100%;
  transition: width var(--pf-dur, 5000ms) linear;
}

.pf-acc-btn:hover, 
.pf-active .pf-acc-btn {
  color: var(--rz-blue);
}

.pf-acc-btn {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 0;
  font-size: var(--font-subline);
  font-weight: 500;
  color: var(--rz-text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: inherit;
  letter-spacing: -0.5px;
}

.pf-acc-chevron {
  margin-left: auto;
  display: flex; 
  align-items: center; 
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.3s;
}

.pf-acc-chevron svg { 
  width: 10px; 
  height: 10px; 
  stroke: var(--rz-gray-icon); 
  transition: stroke 0.2s; 
}

.pf-acc-item.pf-active .pf-acc-chevron { 
  border-color: var(--rz-blue);
  transform: rotate(180deg);
}

.pf-acc-item.pf-active .pf-acc-chevron svg { 
  stroke: var(--rz-blue); 
}

.pf-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease, padding 0.35s ease;
  padding: 0;
  overflow: hidden;
}

.pf-acc-body > span { 
  overflow: hidden; 
  font-size: var(--font-small); 
  color: var(--rz-text-secondary); 
  line-height: 1.6; 
}

.pf-acc-item.pf-active .pf-acc-body { 
  grid-template-rows: 1fr; 
  padding: 0 0 20px 0; 
}

.pf-right {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 460px;
  background: var(--rz-gray-light);
}

.pf-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.5s ease, transform 0.6s ease;
  pointer-events: none;
}

.pf-panel.pf-panel-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.pf-panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.pf-panel-img {
  position: absolute;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.pf-panel-img img {
  display: block;
}

.pf-callout {
  position: absolute;
  background: var(--rz-white);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
  min-width: 160px;
  z-index: 3;
}

.pf-panel.pf-panel-active .pf-callout { 
  opacity: 1; 
  transform: translateY(0); 
}

.pf-callout-label { 
  font-size: 11px; 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: 0.5px; 
  color: var(--rz-blue); 
  margin-bottom: 4px; 
}

.pf-callout-value { 
  font-size: var(--font-h4); 
  font-weight: 700; 
  color: var(--rz-navy); 
  line-height: 1.1; 
}

.pf-callout-sub { 
  font-size: 12px; 
  color: var(--rz-text-light); 
  margin-top: 4px; 
}

/* ────────────────────────────────────────────────────────────────
   FORM BUTTONS
   ──────────────────────────────────────────────────────────────── */
.rz-modal-submit,
#rzContactForm button {
  border: none;
  color: var(--rz-white);
  border-radius: var(--radius-full);
  font-size: 16px;
  font-weight: 500;
  padding: 10px 20px;
}




/* ────────────────────────────────────────────────────────────────
   FOOTER
   ──────────────────────────────────────────────────────────────── */
  .rz-footer {
      padding: 0 20px;
    color: #fff;
  }

  .rz-footer a {
    color: #fff;
    transition: color 0.2s;
  }
  .rz-footer a:hover { color: #1794ff; }


  .rz-footer-top {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .rz-footer-brand img {
    height: 24px;
    width: auto;
    margin-bottom: 20px;
  }

  .rz-footer-tagline {
    line-height: 1.65;
    max-width: 260px;
    margin-bottom: 28px;
  }

  .rz-footer-social {
    display: flex;
    gap: 12px;
  }
  .rz-footer-social a {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, background 0.2s;
  }
  .rz-footer-social a:hover {
    border-color: rgba(23,150,255,.4);
    background: rgba(23,150,255,.08);
  }
  .rz-footer-social svg {
    width: 16px; height: 16px;
    stroke: rgba(255,255,255,.5);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .rz-footer-social a:hover svg { stroke: #1796FF; }

  .rz-footer-col-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,.35);
    margin-bottom: 20px;
  }

  .rz-footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 0;
  }


  /* ── Bottom bar ── */
  .rz-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    color: rgba(255,255,255,.3);
  }

  .rz-footer-bottom-links {
    display: flex;
    gap: 24px;
  }
  .rz-footer-bottom-links a {
    color: rgba(255,255,255,.3);
  }
  .rz-footer-bottom-links a:hover { color: rgba(255,255,255,.6); }

  .rz-footer-address {
    font-style: normal;
    line-height: 1.6;
    color: rgba(255,255,255,.45);
    margin-top: 24px;
  }

  @media (max-width: 900px) {
    .rz-footer-top {
      grid-template-columns: 1fr 1fr;
      gap: 40px 32px;
    }
    .rz-footer-brand {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 600px) {
    .rz-footer { padding: 48px 0 0; }
    .rz-footer-inner { padding: 0 20px; }
    .rz-footer-top {
      grid-template-columns: 1fr;
      gap: 32px;
      padding-bottom: 40px;
    }
    .rz-footer-bottom {
      flex-direction: column;
      gap: 16px;
      text-align: center;
    }
    .rz-footer-bottom-links { flex-wrap: wrap; justify-content: center; }
  }



/* ────────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ──────────────────────────────────────────────────────────────── */
   
/* Tablet (980px) */
@media (max-width: 980px) {
  h2 { font-size: 40px !important; }
  .h2-hero { font-size: 50px !important; }
  .hero-message { padding: 0 20px; }
  .rzero-tabs { margin-bottom: 0; }
  h3 { font-size: var(--font-h1) !important; }
  
  .rz-tab-pill { display: none; }
  .rz-tab-btn {
    background: transparent;
    color: var(--rz-gray);
    transition: all 0.2s ease;
  }
  .rz-tab-btn.active {
    border-radius: var(--radius-full);
    background: linear-gradient(to right, var(--rz-blue-bg), var(--rz-blue-bg2));
    color: var(--rz-blue);
    z-index: 1;
  }
  
  .rzfc-grid { grid-template-columns: repeat(2, 1fr); }
  
  .rz-tabs-section { border-radius: var(--radius-xl); }
  .rz-tab-nav { 
    margin: 20px 16px 0; 
    overflow-x: auto; 
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch; 
  }
  .rz-tab-nav::-webkit-scrollbar { display: none; }
  .rz-tab-nav::before { 
    border-radius: var(--radius-2xl); 
  }
  .rz-tab-btn { 
    font-size: 13px; 
    padding: 10px 12px; 
    white-space: nowrap; 
    flex: none; 
    width: 100%; 
  }
  .rz-tab-content { 
    flex-direction: column; 
    height: auto; 
  }
  .rz-tab-image { 
    width: 100%; 
    height: 320px; 
  }
  .rz-tab-text { 
    width: 100%; 
    height: 320px; 
    position: relative; 
  }
  .rz-tab-text-block { padding: 36px 32px; }
  .rz-tab-title { font-size: var(--font-h1); }
  .rz-tab-icon { 
    width: 44px; 
    height: 44px; 
    border-radius: var(--radius-md); 
    margin-bottom: 16px; 
  }
}

/* Mobile Landscape (768px) */
@media (max-width: 768px) {
  h2 { font-size: 40px !important; }
  
  .rz-metrics-strip { 
    --card-w: 240px; 
    --card-gap: 14px; 
  }
  .rz-metric-card-visual { height: 130px; }
  .rz-metric-card-body { padding: 16px 16px 20px; }
  .rz-metric-card-title { font-size: var(--font-subline) !important; }
  
  .pf-wrap { grid-template-columns: 1fr; }
  .pf-right { min-height: 320px !important; }
}

/* Mobile Portrait (600px) */
@media (max-width: 600px) {
  .rzfc-grid { grid-template-columns: 1fr; }
  
  .rz-tab-nav { margin: 16px 12px 0; padding: 3px; }
  .rz-tab-btn { font-size: 12px; padding: 8px 10px; }
  .rz-tab-content { margin-top: 20px; }
  .rz-tab-image { height: 260px; }
  .rz-tab-text { height: 300px; }
  .rz-tab-text-block { 
    padding: 28px 24px; 
    display: block; 
  }
  .rz-tab-title { 
    font-size: var(--font-h4); 
    margin-bottom: 8px; 
  }
  .rz-tab-icon { 
    width: 40px; 
    height: 40px; 
    border-radius: var(--radius-md); 
    margin-bottom: 14px; 
  }
  .rz-callout { 
    padding: 12px 16px; 
    border-radius: var(--radius-md); 
  }
  .rz-callout-value { font-size: var(--font-h4); }
  .rz-callout-label { font-size: 10px; }
  .rz-callout-sub { font-size: 11px; }
  .rz-tab-panel { inset: 14px; }
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
  .rz-metrics-strip { 
    --card-w: 220px; 
    --card-gap: 12px; 
  }
  .rz-metric-card-visual { height: 110px; }
}

/* Extra Small Mobile (400px) */
@media (max-width: 400px) {
  .rz-tab-btn { 
    font-size: 11px; 
    padding: 7px 8px; 
  }
  .rz-tab-image { height: 220px; }
  .rz-tab-text { height: 280px; }
  .rz-tab-text-block { padding: 24px 20px; }
  .rz-tab-title { font-size: 22px; }
}

/* Desktop Hover States (1024px+) */
@media (min-width: 1024px) {
  .rz-nav-item:hover .rz-mega {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }
  .rz-nav-item:hover > .rz-nav-link {
    background: var(--blue-dim);
  }
  .rz-nav-item:hover .rz-chevron {
    transform: rotate(180deg);
    opacity: .7;
  }
}