/* Copied from code_sandbox_light style.css to retain functionality */
/* BEGIN ORIGINAL */
/* ===================================
   BcOnline Website Styles
   Concept 1: The Authority Play
   =================================== */

/* ===================================
   CSS Variables & Color Palette
   =================================== */
:root {
    /* Primary Colors - Navy & Teal */
    --navy-dark: #0a1f44;
    --navy-primary: #1e3a5f;
    --navy-light: #2d4a72;
    
    --teal-dark: #006b7d;
    --teal-primary: #0097a7;
    --teal-light: #26c6da;
    
    /* Accent Colors */
    --gold: #d4af37;
    --gold-light: #f4d47f;
    
    /* Neutral Colors */
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Status Colors */
    --success: #10b981;
    --error: #ef4444;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
}

/* ===================================
   Reset & Base Styles
   =================================== */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   font-size: 16px;
}

body {
   font-family: var(--font-primary);
   color: var(--gray-800);
   line-height: 1.6;
   background-color: var(--white);
   overflow-x: hidden;
}

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 var(--spacing-md);
}

section {
   padding: var(--spacing-3xl) 0;
}

/* ===================================
   Typography
   =================================== */
h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
   line-height: 1.2;
   color: var(--navy-dark);
}

h1 {
   font-size: 3rem;
   font-family: var(--font-display);
}

h2 {
   font-size: 2.5rem;
}

h3 {
   font-size: 1.75rem;
}

h4 {
   font-size: 1.25rem;
}

p {
   margin-bottom: var(--spacing-md);
}

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

a:hover {
   color: var(--teal-dark);
}

/* ===================================
   Navigation
   =================================== */
.navbar {
   background-color: var(--white);
   box-shadow: var(--shadow-sm);
   position: sticky;
   top: 0;
   z-index: 1000;
   padding: var(--spacing-md) 0;
}

.nav-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--navy-primary);
}

.logo i {
   color: var(--teal-primary);
   font-size: 1.75rem;
}

/* Image logo override */
.logo img.site-logo {
   display: block;
   height: 48px; /* reverted from 64px */
   width: auto;
   transition: height var(--transition-normal);
}

@media (max-width: 768px) {
   .logo img.site-logo {
      height: 48px; /* keep consistent on mobile */
   }
}

.nav-menu {
   display: flex;
   list-style: none;
   gap: var(--spacing-lg);
   align-items: center;
}

.nav-menu a {
   color: var(--gray-800);
   font-weight: 500;
   transition: color var(--transition-fast);
}

.nav-menu a:hover {
   color: var(--teal-primary);
}

.btn-nav-cta {
   background-color: var(--teal-primary);
   color: var(--white) !important;
   padding: var(--spacing-xs) var(--spacing-md);
   border-radius: var(--radius-md);
   font-weight: 600;
   transition: all var(--transition-fast);
}

.btn-nav-cta:hover {
   background-color: var(--teal-dark);
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
}

.hamburger {
   display: none;
   flex-direction: column;
   gap: 4px;
   cursor: pointer;
}

.hamburger span {
   width: 25px;
   height: 3px;
   background-color: var(--navy-primary);
   border-radius: 2px;
   transition: all var(--transition-fast);
}

/* ===================================
   Hero Section
   =================================== */
.hero {
   background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-primary) 100%);
   color: var(--white);
   padding: var(--spacing-3xl) 0;
   position: relative;
   overflow: hidden;
}

.hero::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 50%;
   height: 100%;
   background: radial-gradient(circle at top right, rgba(0, 151, 167, 0.15), transparent);
   pointer-events: none;
}

.hero-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--spacing-xl);
   align-items: center;
   position: relative;
   z-index: 1;
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
   background-color: rgba(0, 151, 167, 0.2);
   color: var(--teal-light);
   padding: var(--spacing-xs) var(--spacing-md);
   border-radius: 50px;
   font-size: 0.875rem;
   font-weight: 600;
   margin-bottom: var(--spacing-md);
}

.hero-title {
   font-size: 3rem;
   line-height: 1.1;
   margin-bottom: var(--spacing-md);
   color: var(--white);
}

.hero-title .highlight {
   color: var(--gold);
   font-weight: 800;
}

.hero-subtitle {
   font-size: 1.125rem;
   line-height: 1.8;
   margin-bottom: var(--spacing-lg);
   opacity: 0.95;
}

.hero-cta {
   display: flex;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-md);
}

.hero-note {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
   font-size: 0.875rem;
   opacity: 0.8;
}

.hero-note i {
   color: var(--success);
}

/* Hero Visual */
.hero-visual {
   position: relative;
}

.stats-card {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: var(--radius-xl);
   padding: var(--spacing-lg);
   display: grid;
   grid-template-columns: repeat(3, minmax(120px, 1fr));
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-lg);
}

.stat-item {
   text-align: center;
   min-width: 120px;
}

.stat-number {
   font-size: 2.5rem;
   font-weight: 800;
   color: var(--gold);
   line-height: 1;
   white-space: nowrap;
   display: inline-block;
}

.stat-label {
   font-size: 0.875rem;
   opacity: 0.9;
   margin-top: var(--spacing-xs);
}

/* Hero Illustration */
.hero-illustration {
   position: relative;
   height: 300px;
}

.data-node {
   position: absolute;
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, var(--teal-primary), var(--teal-light));
   border-radius: 50%;
   box-shadow: 0 0 30px rgba(0, 151, 167, 0.4);
   animation: pulse 3s ease-in-out infinite;
}

.node-1 {
   top: 20%;
   left: 10%;
   animation-delay: 0s;
}

.node-2 {
   top: 60%;
   left: 30%;
   animation-delay: 0.5s;
}

.node-3 {
   top: 30%;
   right: 20%;
   animation-delay: 1s;
}

.node-4 {
   bottom: 20%;
   right: 10%;
   animation-delay: 1.5s;
}

.data-connection {
   position: absolute;
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--teal-light), transparent);
   transform-origin: left center;
}

.connection-1 {
   top: 35%;
   left: 15%;
   width: 40%;
   transform: rotate(25deg);
}

.connection-2 {
   top: 50%;
   left: 35%;
   width: 35%;
   transform: rotate(-30deg);
}

.connection-3 {
   bottom: 30%;
   right: 20%;
   width: 30%;
   transform: rotate(45deg);
}

@keyframes pulse {
   0%, 100% {
      transform: scale(1);
      opacity: 0.8;
   }
   50% {
      transform: scale(1.1);
      opacity: 1;
   }
}

/* ===================================
   Buttons
   =================================== */
.btn {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
   padding: var(--spacing-md) var(--spacing-lg);
   border: none;
   border-radius: var(--radius-md);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-normal);
   font-family: var(--font-primary);
}

.btn-primary {
   background-color: var(--teal-primary);
   color: var(--white);
   box-shadow: var(--shadow-md);
}

.btn-primary:hover {
   background-color: var(--teal-dark);
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
}

.btn-secondary {
   background-color: transparent;
   color: var(--white);
   border: 2px solid var(--white);
}

.btn-secondary:hover {
   background-color: var(--white);
   color: var(--navy-primary);
}

.btn-lg {
   padding: var(--spacing-md) var(--spacing-xl);
   font-size: 1.125rem;
}

.btn-block {
   width: 100%;
   justify-content: center;
}

/* ===================================
   Trust Bar
   =================================== */
.trust-bar {
   /* background-color: var(--gray-50); */
   background-color: var(--gray-100);
   padding: var(--spacing-xl) 0;
}

.trust-items {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--spacing-lg);
}

.trust-item {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
   padding: var(--spacing-md);
   background-color: var(--white);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   transition: all var(--transition-normal);
}

.trust-item:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-md);
}

.trust-icon {
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--teal-primary), var(--teal-light));
   color: var(--white);
   border-radius: var(--radius-md);
   font-size: 1.5rem;
   flex-shrink: 0;
}

.trust-text strong {
   display: block;
   color: var(--navy-dark);
   font-size: 0.95rem;
   margin-bottom: 2px;
}

.trust-text span {
   font-size: 0.875rem;
   color: var(--gray-600);
}

/* ===================================
   Section Headers
   =================================== */
.section-header {
   margin-bottom: var(--spacing-xl);
}

.section-header.center {
   text-align: center;
   max-width: 700px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: var(--spacing-xl);
}

.section-label {
   display: inline-block;
   color: var(--teal-primary);
   font-weight: 600;
   font-size: 0.875rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: var(--spacing-sm);
}

.section-header h2 {
   margin-bottom: var(--spacing-md);
}

.section-header p {
   font-size: 1.125rem;
   color: var(--gray-600);
}

/* ===================================
   Problem/Solution Section
   =================================== */
.problem-solution {
   /* background-color: var(--white); */
   background-color: var(--gray-200);
}

.comparison-grid {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   gap: var(--spacing-xl);
   align-items: center;
}

.comparison-card {
   padding: var(--spacing-xl);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-lg);
}

.comparison-card.traditional {
   background-color: var(--gray-50);
   border: 2px solid var(--gray-200);
}

.comparison-card.bconline {
   background: linear-gradient(135deg, var(--navy-dark), var(--navy-primary));
   color: var(--white);
}

.comparison-icon {
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: var(--radius-lg);
   font-size: 2rem;
   margin-bottom: var(--spacing-md);
}

.traditional .comparison-icon {
   /* background-color: var(--gray-200); */
   /* color: var(--gray-60); */
   background-color: var(--gray-800);
   color: var(--white);
}

.bconline .comparison-icon {
   background-color: rgba(255, 255, 255, 0.2);
   color: var(--black);
}

.comparison-card h3 {
   margin-bottom: var(--spacing-md);
}

.bconline h3 {
   color: var(--white);
}

.comparison-list {
   list-style: none;
}

.comparison-list li {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) 0;
   font-size: 0.95rem;
}

.comparison-list i {
   margin-top: 2px;
   flex-shrink: 0;
}

.traditional .comparison-list i {
   color: var(--error);
}

.bconline .comparison-list i {
   /* color: var(--gold); */
   color: var(--white);
}

/* Tight uppercase emphasis (avoids perceived extra whitespace) */
.comparison-list strong.tight-uppercase {
   font-weight: 800;
   letter-spacing: 0.5px; /* slightly tighter than default for Inter uppercase */
}

.comparison-arrow {
   font-size: 2.5rem;
   color: var(--teal-primary);
}

/* ===================================
   Unique Advantage Section
   =================================== */
.unique-advantage {
   /* background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%); */
   background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.advantage-content {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--spacing-3xl);
   align-items: center;
}

.advantage-intro {
   font-size: 1.125rem;
   color: var(--gray-600);
   margin-bottom: var(--spacing-xl);
}

/* Subheading inside Unique Advantage */
.advantage-subheading {
   font-size: 2rem; /* smaller than default h2 (2.5rem) */
   font-weight: 700;
   color: var(--navy-dark);
   margin-bottom: var(--spacing-md); /* space before paragraph */
}

.advantage-features {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
   margin-bottom: var(--spacing-xl);
}

.advantage-feature {
   display: flex;
   gap: var(--spacing-md);
}

.feature-icon {
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, var(--navy-primary), var(--navy-light));
   color: var(--white);
   border-radius: var(--radius-md);
   font-size: 1.5rem;
   flex-shrink: 0;
}

.feature-content h4 {
   margin-bottom: var(--spacing-xs);
   color: var(--navy-dark);
}

.feature-content p {
   color: var(--gray-600);
   margin-bottom: 0;
}

/* Database Visualization */
.advantage-visual {
   display: flex;
   align-items: center;
   justify-content: center;
}

.database-viz {
   position: relative;
   width: 400px;
   height: 400px;
}

.db-circle {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 200px;
   height: 200px;
   background: linear-gradient(135deg, var(--navy-primary), var(--navy-dark));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 50px rgba(0, 151, 167, 0.3);
   z-index: 2;
}

.db-inner {
   text-align: center;
   color: var(--white);
}

.db-inner i {
   font-size: 3rem;
   color: var(--gold);
   margin-bottom: var(--spacing-sm);
}

.db-stat {
   font-size: 2.5rem;
   font-weight: 800;
   color: var(--teal-light);
}

.db-label {
   font-size: 1rem;
   opacity: 0.9;
}

.db-orbit {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border: 2px solid rgba(0, 151, 167, 0.2);
   border-radius: 50%;
   animation: rotate 20s linear infinite;
}

.orbit-1 {
   width: 250px;
   height: 250px;
}

.orbit-2 {
   width: 320px;
   height: 320px;
   animation-duration: 25s;
}

.orbit-3 {
   width: 390px;
   height: 390px;
   animation-duration: 30s;
}

.orbit-node {
   position: absolute;
   top: -15px;
   left: 50%;
   transform: translateX(-50%);
   width: 50px;
   height: 50px;
   background: linear-gradient(135deg, var(--teal-primary), var(--teal-light));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
   font-size: 1.25rem;
   box-shadow: var(--shadow-md);
}

@keyframes rotate {
   from {
      transform: translate(-50%, -50%) rotate(0deg);
   }
   to {
      transform: translate(-50%, -50%) rotate(360deg);
   }
}

/* ===================================
   How It Works Section
   =================================== */
.how-it-works {
   background-color: var(--white);
}

.steps-grid {
   display: grid;
   grid-template-columns: 1fr auto 1fr auto 1fr;
   gap: var(--spacing-lg);
   align-items: center;
}

.step-card {
   background-color: var(--gray-50);
   padding: var(--spacing-xl);
   border-radius: var(--radius-xl);
   text-align: center;
   position: relative;
   border: 2px solid var(--gray-200);
   transition: all var(--transition-normal);
}

.step-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl);
   border-color: var(--teal-primary);
}

.step-number {
   position: absolute;
   top: -15px;
   left: 50%;
   transform: translateX(-50%);
   width: 40px;
   height: 40px;
   background: linear-gradient(135deg, var(--gold), var(--gold-light));
   color: var(--navy-dark);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   font-size: 1.25rem;
}

.step-icon {
   width: 80px;
   height: 80px;
   margin: 0 auto var(--spacing-md);
   background: linear-gradient(135deg, var(--teal-primary), var(--teal-light));
   color: var(--white);
   border-radius: var(--radius-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
}

.step-card h3 {
   margin-bottom: var(--spacing-sm);
}

.step-card p {
   color: var(--gray-600);
   margin-bottom: 0;
}

.step-connector {
   font-size: 2rem;
   color: var(--teal-primary);
}

/* ===================================
   Services Section
   =================================== */
.services {
   /* background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%); */
   background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.services-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--spacing-lg);
}

.service-card {
   background-color: var(--white);
   padding: var(--spacing-xl);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-sm);
   transition: all var(--transition-normal);
   border: 2px solid transparent;
}

.service-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl);
   border-color: var(--teal-primary);
}

.service-icon {
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, var(--navy-primary), var(--navy-light));
   color: var(--white);
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.75rem;
   margin-bottom: var(--spacing-md);
}

.service-card h3 {
   font-size: 1.25rem;
   margin-bottom: var(--spacing-sm);
}

.service-card p {
   color: var(--gray-600);
   font-size: 0.95rem;
   margin-bottom: 0;
}

/* ===================================
   Who We Serve Section
   =================================== */
.who-we-serve {
   background-color: var(--white);
}

.clients-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--spacing-xl);
}

.client-card {
   background-color: var(--gray-50);
   padding: var(--spacing-xl);
   border-radius: var(--radius-xl);
   border: 2px solid var(--gray-200);
   transition: all var(--transition-normal);
   position: relative;
}

.client-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl);
}

.client-card.featured {
   background: linear-gradient(135deg, var(--navy-primary), var(--navy-dark));
   color: var(--white);
   border-color: var(--gold);
}

.featured-badge {
   position: absolute;
   top: -12px;
   right: var(--spacing-lg);
   background-color: var(--gold);
   color: var(--navy-dark);
   padding: var(--spacing-xs) var(--spacing-md);
   border-radius: 50px;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.client-icon {
   width: 70px;
   height: 70px;
   background: linear-gradient(135deg, var(--teal-primary), var(--teal-light));
   color: var(--white);
   border-radius: var(--radius-lg);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2rem;
   margin-bottom: var(--spacing-md);
}

.client-card.featured .client-icon {
   background: var(--gold);
   color: var(--navy-dark);
}

.client-card h3 {
   margin-bottom: var(--spacing-sm);
}

.client-card.featured h3,
.client-card.featured p {
   color: var(--white);
}

.client-card p {
   color: var(--gray-600);
   margin-bottom: var(--spacing-md);
}

.client-benefits {
   list-style: none;
}

.client-benefits li {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   padding: var(--spacing-xs) 0;
   font-size: 0.95rem;
}

.client-card:not(.featured) .client-benefits li {
   color: var(--gray-600);
}

.client-benefits i {
   color: var(--success);
   flex-shrink: 0;
}

.client-card.featured .client-benefits i {
   color: var(--gold);
}

/* ===================================
   RCVC Verification Section
   =================================== */
.rcvc-section {
   background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.rcvc-content {
   display: grid;
   grid-template-columns: 1.2fr 0.8fr;
   gap: var(--spacing-3xl);
   align-items: center;
}

.rcvc-text h2 {
   margin-bottom: var(--spacing-sm);
}

.rcvc-subtitle {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--teal-dark);
   margin-bottom: var(--spacing-md);
}

.rcvc-description {
   font-size: 1.05rem;
   color: var(--gray-600);
   margin-bottom: var(--spacing-lg);
   line-height: 1.75;
}

.rcvc-cta .btn {
   box-shadow: var(--shadow-md);
}

.rcvc-visual {
   display: flex;
   justify-content: center;
}

.rcvc-card {
   background: linear-gradient(135deg, var(--navy-primary), var(--navy-dark));
   color: var(--white);
   padding: var(--spacing-xl);
   border-radius: var(--radius-xl);
   width: 100%;
   max-width: 380px;
   position: relative;
   box-shadow: var(--shadow-xl);
   border: 2px solid var(--gold);
}

.rcvc-badge {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
   background: var(--gold);
   color: var(--navy-dark);
   padding: var(--spacing-xs) var(--spacing-md);
   border-radius: 50px;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: var(--spacing-lg);
}

.rcvc-code-display {
   font-size: 1.75rem;
   font-weight: 700;
   letter-spacing: 2px;
   background: rgba(255,255,255,0.1);
   padding: var(--spacing-md);
   text-align: center;
   border-radius: var(--radius-lg);
   margin-bottom: var(--spacing-md);
   font-family: var(--font-mono, 'Courier New', monospace);
}

.rcvc-note {
   font-size: 0.75rem;
   opacity: 0.85;
   margin-bottom: var(--spacing-md);
   display: flex;
   align-items: center;
   gap: 6px;
}

.rcvc-benefits {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
}

.rcvc-benefits li {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
   font-size: 0.85rem;
}

.rcvc-benefits i {
   color: var(--teal-light);
}

@media (max-width: 1024px) {
   .rcvc-content {
      grid-template-columns: 1fr;
   }
   .rcvc-visual {
      margin-top: var(--spacing-xl);
   }
}

@media (max-width: 768px) {
   .rcvc-code-display {
      font-size: 1.25rem;
   }
}

/* ===================================
   Social Proof Section
   =================================== */
.social-proof {
   background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
}

.testimonials-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--spacing-xl);
}

.testimonial-card {
   background-color: var(--white);
   padding: var(--spacing-xl);
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow-md);
   transition: all var(--transition-normal);
}

.testimonial-card:hover {
   transform: translateY(-8px);
   box-shadow: var(--shadow-xl);
}

.testimonial-rating {
   display: flex;
   gap: 4px;
   margin-bottom: var(--spacing-md);
   color: var(--gold);
   font-size: 1.25rem;
}

.testimonial-text {
   font-size: 1.05rem;
   line-height: 1.8;
   color: var(--gray-800);
   margin-bottom: var(--spacing-md);
   font-style: italic;
   display: -webkit-box;
   -webkit-line-clamp: 4; /* keep to ~4 lines for medium cards */
   line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.testimonial-author {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
   padding-top: var(--spacing-md);
   border-top: 2px solid var(--gray-100);
}

.author-avatar {
   width: 50px;
   height: 50px;
   background: linear-gradient(135deg, var(--navy-primary), var(--navy-light));
   color: var(--white);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
}

.author-info strong {
   display: block;
   color: var(--navy-dark);
   font-size: 0.95rem;
}

.author-info span {
   font-size: 0.875rem;
   color: var(--gray-600);
}

/* ===================================
   Final CTA Section
   =================================== */
.final-cta {
   background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-primary) 100%);
   color: var(--white);
   position: relative;
   overflow: hidden;
}

.final-cta::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -10%;
   width: 500px;
   height: 500px;
   background: radial-gradient(circle, rgba(0, 151, 167, 0.2), transparent);
   border-radius: 50%;
}

.cta-content {
   max-width: 800px;
   margin: 0 auto;
   text-align: center;
   position: relative;
   z-index: 1;
}

.cta-text h2 {
   font-size: 2.5rem;
   color: var(--white);
   margin-bottom: var(--spacing-md);
}

.cta-text p {
   font-size: 1.25rem;
   opacity: 0.95;
   margin-bottom: var(--spacing-lg);
}

.cta-benefits {
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--spacing-lg);
   margin-bottom: var(--spacing-xl);
}

.cta-benefits li {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
   font-size: 1.05rem;
}

.cta-benefits i {
   color: var(--gold);
   font-size: 1.25rem;
}

.cta-buttons {
   display: flex;
   justify-content: center;
   gap: var(--spacing-md);
}

/* ===================================
   Footer
   =================================== */
.footer {
   background-color: var(--navy-dark);
   color: var(--white);
   padding: var(--spacing-3xl) 0 var(--spacing-lg);
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1.5fr;
   gap: var(--spacing-xl);
   margin-bottom: var(--spacing-xl);
}

.footer-logo {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: var(--spacing-md);
}

.footer-logo i {
   color: var(--teal-light);
   font-size: 1.75rem;
}

.footer-logo img.footer-site-logo {
   display: block;
   height: 52px;
   width: auto;
}

.footer-desc {
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: var(--spacing-md);
}

.social-links {
   display: flex;
   gap: var(--spacing-sm);
}

.social-links a {
   width: 40px;
   height: 40px;
   background-color: rgba(255, 255, 255, 0.1);
   color: var(--white);
   border-radius: var(--radius-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
   transition: all var(--transition-fast);
}

.social-links a:hover {
   background-color: var(--teal-primary);
   transform: translateY(-3px);
}

.footer-col h4 {
   color: var(--white);
   margin-bottom: var(--spacing-md);
   font-size: 1.125rem;
}

.footer-links,
.footer-contact {
   list-style: none;
}

.footer-links li,
.footer-contact li {
   margin-bottom: var(--spacing-sm);
}

.footer-links a,
.footer-contact a {
   color: rgba(255, 255, 255, 0.8);
   transition: color var(--transition-fast);
}

.footer-links a:hover,
.footer-contact a:hover {
   color: var(--teal-light);
}

.footer-contact li {
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-sm);
}

.footer-contact i {
   color: var(--teal-light);
   margin-top: 2px;
}

.footer-bottom {
   padding-top: var(--spacing-lg);
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.footer-bottom p {
   margin: 0;
   opacity: 0.8;
   color: #ffffff !important;
}

.footer-legal {
   display: flex;
   gap: var(--spacing-lg);
}

.footer-legal a {
   color: rgba(255, 255, 255, 0.8);
}

.footer-legal p {
   color: #ffffff !important;
}

.footer-legal a:hover {
   color: var(--teal-light);
}

/* ===================================
   Modal
   =================================== */
.modal {
   display: none;
   position: fixed;
   z-index: 2000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(5px);
   overflow-y: auto;
}

.modal.active {
   display: flex;
   align-items: center;
   justify-content: center;
}

.modal-content {
   background-color: var(--white);
   border-radius: var(--radius-xl);
   max-width: 600px;
   width: 90%;
   position: relative;
   animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
   from {
      transform: translateY(-50px);
      opacity: 0;
   }
   to {
      transform: translateY(0);
      opacity: 1;
   }
}

.modal-close {
   position: absolute;
   top: var(--spacing-md);
   right: var(--spacing-md);
   font-size: 2rem;
   color: var(--gray-600);
   cursor: pointer;
   transition: color var(--transition-fast);
   line-height: 1;
}

.modal-close:hover {
   color: var(--navy-dark);
}

.modal-header {
   background: linear-gradient(135deg, var(--navy-primary), var(--navy-dark));
   color: var(--white);
   padding: var(--spacing-xl);
   border-radius: var(--radius-xl) var(--radius-xl) 0 0;
   text-align: center;
}

.modal-header h2 {
   color: var(--white);
   margin-bottom: var(--spacing-xs);
}

.modal-header p {
   opacity: 0.9;
   margin: 0;
}

.demo-form {
   padding: var(--spacing-xl);
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--spacing-md);
}

.form-group {
   margin-bottom: var(--spacing-md);
}

.form-group label {
   display: block;
   font-weight: 600;
   color: var(--navy-dark);
   margin-bottom: var(--spacing-xs);
   font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
   width: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
   border: 2px solid var(--gray-200);
   border-radius: var(--radius-md);
   font-family: var(--font-primary);
   font-size: 1rem;
   transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   outline: none;
   border-color: var(--teal-primary);
}

.form-group textarea {
   resize: vertical;
}

/* ===================================
   Responsive Design
   =================================== */
@media (max-width: 1024px) {
   h1 {
      font-size: 2.5rem;
   }
    
   h2 {
      font-size: 2rem;
   }
    
   .hero-content {
      grid-template-columns: 1fr;
      gap: var(--spacing-xl);
   }
    
   .trust-items {
      grid-template-columns: repeat(2, 1fr);
   }
    
   .comparison-grid {
      grid-template-columns: 1fr;
   }
    
   .comparison-arrow {
      transform: rotate(90deg);
   }
    
   .advantage-content {
      grid-template-columns: 1fr;
   }
    
   .steps-grid {
      grid-template-columns: 1fr;
   }
    
   .step-connector {
      transform: rotate(90deg);
   }
    
   .services-grid {
      grid-template-columns: repeat(2, 1fr);
   }
    
   .clients-grid {
      grid-template-columns: 1fr;
   }
    
   .testimonials-grid {
      grid-template-columns: 1fr;
   }
    
   .footer-grid {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 768px) {
   section {
      padding: var(--spacing-xl) 0;
   }
    
   h1 {
      font-size: 2rem;
   }
    
   h2 {
      font-size: 1.75rem;
   }
    
   .nav-menu {
      position: fixed;
      top: 70px;
      left: -100%;
      width: 100%;
      height: calc(100vh - 70px);
      background-color: var(--white);
      flex-direction: column;
      padding: var(--spacing-xl);
      gap: var(--spacing-md);
      box-shadow: var(--shadow-xl);
      transition: left var(--transition-normal);
   }
    
   .nav-menu.active {
      left: 0;
   }
    
   .hamburger {
      display: flex;
   }
    
   .hero-title {
      font-size: 2rem;
   }
    
   .hero-cta {
      flex-direction: column;
   }
    
   .btn {
      width: 100%;
      justify-content: center;
   }
    
   .stats-card {
      grid-template-columns: 1fr;
   }
    
   .trust-items {
      grid-template-columns: 1fr;
   }
    
   .services-grid {
      grid-template-columns: 1fr;
   }
    
   .form-row {
      grid-template-columns: 1fr;
   }
    
   .footer-grid {
      grid-template-columns: 1fr;
   }
    
   .footer-bottom {
      flex-direction: column;
      gap: var(--spacing-md);
      text-align: center;
   }
    
   .cta-buttons {
      flex-direction: column;
   }
}

@media (max-width: 480px) {
   .hero-illustration {
      height: 200px;
   }
    
   .data-node {
      width: 40px;
      height: 40px;
   }
}

/* ===================================
   Utility Classes
   =================================== */
.text-center {
   text-align: center;
}

.mt-lg {
   margin-top: var(--spacing-lg);
}

.mb-lg {
   margin-bottom: var(--spacing-lg);
}

/* Accessibility */
.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
}

/* ===================================
    Additional Mobile Refinements
    =================================== */
@media (max-width: 640px) {
   h1.hero-title {font-size: 1.75rem;}
   .hero-subtitle {font-size: 1rem; line-height:1.6;}
   .stats-card {padding: var(--spacing-md);}
   .advantage-content {gap: var(--spacing-xl);}
   .database-viz {width: 280px; height: 280px;}
   .db-circle {width:140px; height:140px;}
   .db-inner i {font-size:2.2rem;}
   .db-stat {font-size:2rem;}
   .orbit-1 {width:190px; height:190px;}
   .orbit-2 {width:240px; height:240px;}
   .orbit-3 {display:none;} /* hide far orbit on small screens */
   .rcvc-content {gap: var(--spacing-xl);}
   .rcvc-card {padding: var(--spacing-lg);}
   .services-grid .service-card {padding: var(--spacing-lg);}
   section {padding: var(--spacing-xl) 0;} /* slightly tighter */
   .testimonial-card {padding: var(--spacing-lg);}  
   .final-cta .cta-text h2 {font-size:1.75rem;}
   .final-cta .cta-text p {font-size:1.05rem;}
   .footer {padding: var(--spacing-2xl) 0 var(--spacing-lg);}  
}

@media (max-width: 480px) {
   .hero-cta {flex-direction: column;}
   .hero-badge {font-size:0.75rem;}
   .feature-icon, .trust-icon, .step-icon, .client-icon {width:46px; height:46px; font-size:1.25rem;}
   .stats-card {grid-template-columns:1fr;}
   .advantage-features {gap: var(--spacing-md);}
   .advantage-feature {align-items:flex-start;}
   .database-viz {width:240px; height:240px;}
   .db-circle {width:120px; height:120px;}
   .orbit-1 {width:170px; height:170px;}
   .orbit-2 {display:none;} /* keep only closest orbit */
   .rcvc-code-display {font-size:1.1rem; letter-spacing:1px;}
   .testimonial-text {-webkit-line-clamp:5; line-clamp:5;} /* allow a bit more lines on narrow to avoid cramped text */
}

@media (max-width:380px) {
   h1.hero-title {font-size:1.5rem;}
   .hero-title .highlight {display:inline;} /* keep inline but ensure wrap OK */
   .btn {padding: var(--spacing-sm) var(--spacing-md);}
   .db-stat {font-size:1.5rem;}
   .rcvc-card {max-width:100%;}
}

/* Cookie banner (moved from inline styles) */
.cookie-banner {
   display:none !important;
   position:fixed !important;
   bottom:16px !important;
   left:50% !important;
   transform:translateX(-50%) !important;
   width:90% !important;
   max-width:340px !important;
   background:#002B3D !important;
   color:#ffffff !important;
   padding:14px 16px !important;
   border-radius:12px !important;
   font-size:13px !important;
   line-height:1.4 !important;
   box-shadow:0 10px 25px rgba(0,0,0,0.25) !important;
   z-index:9999 !important;
   text-align:left !important;
}

.cookie-banner button {
   margin-top:10px !important;
   background:#0097A7 !important;
   color:#ffffff !important;
   border:none !important;
   padding:8px 14px !important;
   border-radius:6px !important;
   font-weight:600 !important;
   cursor:pointer !important;
   width:100% !important;
   font-size:14px !important;
}

.cookie-banner button:hover {
   background:#007d8a !important;
}

.cookie-banner button:active {transform:scale(.97) !important;}