/* FutureProof Analytics — Carbon Gray + Teal Theme */
/* Generated on 2025-10-27T01:45:20.098482Z */
:root {
  --color-bg: #1A1A1A;
  --color-teal: #00B8B0;
  --color-silver: #C0C0C0;
  --color-text: #EDEDED;
}

html, body { background: var(--color-bg); color: var(--color-text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.6; }

/* Hero */
.hero {
  position: relative;
  background: var(--color-bg) url('/images/01_hero_data_network.svg') no-repeat center/cover;
  color: var(--color-text);
  padding: clamp(64px, 10vw, 140px) 24px;
}
.hero .overlay {
  position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.65));
}
.hero h1 { font-size: clamp(32px, 6vw, 64px); font-weight: 750; margin: 0 0 12px; }
.hero p { max-width: 820px; font-size: clamp(16px, 2.3vw, 22px); opacity: .95; }

.section { padding: clamp(48px, 7vw, 96px) 24px; }
.section--about { background: url('/images/02_about_teal_horizon.svg') no-repeat center/cover; }
.section--platform { background: url('/images/03_modern_data_platform_grid.svg') no-repeat center/cover; }
.section--analytics { background: url('/images/04_analytics_solutions_ui.svg') no-repeat center/cover; }
.section--ai { background: url('/images/05_ai_landing_zone_neural.svg') no-repeat center/cover; }

.section .card {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(4px);
}

.cta { 
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px; 
  border-radius: 10px; 
  color: #fff !important; 
  background: var(--color-teal); 
  font-weight: 700; 
  text-decoration: none !important;
}
.cta:hover { 
  filter: brightness(1.08); 
  text-decoration: none !important;
}

/* Footer */
.footer {
  background: url('/images/06_footer_teal_glow.svg') no-repeat center/cover;
  padding: 48px 24px; color: var(--color-text);
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Utilities */
.container { max-width: 1200px; margin: 0 auto; }
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr; } }
.muted { color: rgba(237,237,237,0.8); }
.teal { color: var(--color-teal); }
.border-teal { border-color: rgba(0,184,176,0.35) !important; }