/* ============================================
   COST CARD THEME — Azure Tech
   ============================================
   A dark, professional theme with blue/green 
   gradients reflecting Microsoft Azure branding.
   ============================================ */

:root {
  /* Primary palette - Azure Blue/Green */
  --color-primary: #0078d4;
  --color-primary-dark: #005a9e;
  --color-primary-light: #50e6ff;
  
  --color-secondary: #00cc6a;
  --color-secondary-dark: #00a854;
  --color-secondary-light: #7fff9e;
  
  /* Theme-specific accent */
  --theme-accent: #50e6ff;
  
  /* Dark backgrounds */
  --theme-dark-1: #0a0a0a;
  --theme-dark-2: #0d1b2a;
  --theme-dark-3: #1b263b;
}

/* ============================================
   HERO - Dark tech gradient
   ============================================ */
.hero {
  background: linear-gradient(
    135deg,
    var(--theme-dark-1) 0%,
    var(--theme-dark-2) 25%,
    var(--theme-dark-3) 50%,
    var(--theme-dark-2) 75%,
    var(--theme-dark-1) 100%
  );
}

.hero__title {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__badge {
  background: rgba(0, 120, 212, 0.15);
  border-color: rgba(0, 120, 212, 0.3);
}

.hero__badge-dot {
  background: var(--color-secondary);
  box-shadow: 0 0 12px var(--color-secondary);
}

/* ============================================
   SECTION COLORS
   ============================================ */
.section--gradient {
  background: linear-gradient(
    160deg,
    var(--theme-dark-2) 0%,
    #0f2744 30%,
    #0a3d62 60%,
    var(--theme-dark-2) 100%
  );
}

.section--blue {
  background: linear-gradient(135deg, #0066b8 0%, #0078d4 50%, #0099e6 100%);
}

.section--orange {
  background: linear-gradient(135deg, #d83b01 0%, #ff6b35 50%, #ff8c42 100%);
}

/* ============================================
   ACCENT ELEMENTS
   ============================================ */
.section__number {
  color: var(--color-primary);
}

.floating-nav__item.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.floating-nav__item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.floating-nav__item:hover .floating-nav__number {
  color: var(--color-primary);
}

.insights__card--blue {
  border-left-color: var(--color-primary);
  background: linear-gradient(135deg, rgba(0, 120, 212, 0.08) 0%, rgba(0, 204, 106, 0.04) 100%);
}

.insights__card--green {
  border-left-color: var(--color-secondary);
  background: linear-gradient(135deg, rgba(0, 204, 106, 0.08) 0%, rgba(0, 120, 212, 0.04) 100%);
}

.insights__card--purple {
  border-left-color: #8b5cf6;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(0, 120, 212, 0.04) 100%);
}

/* CTA Buttons */
.cta__button--primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.cta__button--primary:hover {
  box-shadow: 0 15px 40px rgba(0, 120, 212, 0.4);
}

/* Results highlight */
.results__card--highlight {
  background: linear-gradient(135deg, rgba(0, 204, 106, 0.2) 0%, rgba(0, 120, 212, 0.1) 100%);
  border-color: var(--color-secondary);
}

/* Process timeline */
.process__step-marker {
  background: white;
}

/* Role tools */
.role__tool {
  border-color: rgba(0, 120, 212, 0.2);
}

.role__tool:hover {
  border-color: var(--color-primary);
  background: rgba(0, 120, 212, 0.05);
}

/* Hero metrics - tech feel */
.hero-metric__value {
  text-shadow: 0 0 30px rgba(0, 204, 106, 0.3);
}

/* Browser frame - Azure themed */
.browser-frame__address {
  color: var(--theme-accent);
}

/* ============================================
   HERO CTA - Visit Website Button
   ============================================ */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 0.875rem 1.75rem;
  background: transparent;
  border: 2px solid var(--color-primary-light);
  border-radius: 8px;
  color: var(--color-primary-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero__cta:hover {
  background: var(--color-primary-light);
  color: var(--theme-dark-1);
  box-shadow: 0 8px 25px rgba(80, 230, 255, 0.35);
  transform: translateY(-2px);
}

.hero__cta svg {
  transition: transform 0.3s ease;
}

.hero__cta:hover svg {
  transform: translate(3px, -3px);
}