:root {
  --brand-red: #DA291C;
  --brand-blue: #0077C8;
  --brand-teal: #4EC3E0;
  --brand-green: #6CC24A;
  --brand-black: #101820;
  --brand-warm: #D69A2D;
}

body {
  font-family: "Averta", "Calibri", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
  color: #F5F6F7;
  background-color: var(--brand-black);
  letter-spacing: -0.01em;
}

.brand-surface {
  background-color: #050B14;
}

.brand-hero {
  background-color: #050B14;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(218, 41, 28, 0.35), transparent 60%),
    radial-gradient(circle at 80% 5%, rgba(0, 119, 200, 0.28), transparent 65%);
}

.brand-radial {
  background: radial-gradient(circle at 25% -10%, rgba(0, 119, 200, 0.35), transparent 65%);
}

.brand-grid-overlay {
  opacity: 0.35;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 90px 90px;
}

.btn-brand-primary,
.btn-brand-secondary {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  border-radius: 9999px;
}

.btn-brand-primary {
  background-image: linear-gradient(120deg, var(--brand-red), var(--brand-blue));
  color: #fff;
  box-shadow: 0 20px 40px -25px rgba(0, 119, 200, 0.9);
}

.btn-brand-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.btn-brand-secondary {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  background: transparent;
}

.btn-brand-secondary:hover {
  border-color: rgba(78, 195, 224, 0.8);
  color: var(--brand-teal);
}

.btn-brand-primary:focus-visible,
.btn-brand-secondary:focus-visible {
  outline: 2px solid rgba(78, 195, 224, 0.75);
  outline-offset: 3px;
}

.badge-brand {
  background-color: rgba(0, 119, 200, 0.18);
  color: var(--brand-teal);
  border: 1px solid rgba(78, 195, 224, 0.45);
  letter-spacing: 0.32em;
}

.brand-chip {
  border: 1px solid rgba(78, 195, 224, 0.35);
  background-color: rgba(0, 119, 200, 0.08);
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.85);
}

.brand-connector-line {
  height: 1px;
  background-image: linear-gradient(
    90deg,
    rgba(218, 41, 28, 0),
    rgba(218, 41, 28, 0.8) 20%,
    rgba(0, 119, 200, 0.85) 80%,
    rgba(0, 119, 200, 0)
  );
}

.brand-connector-dot {
  background-image: linear-gradient(135deg, var(--brand-red), var(--brand-blue));
  box-shadow: 0 0 18px rgba(78, 195, 224, 0.8);
}

.brand-connector-line-vertical {
  width: 1px;
  background-image: linear-gradient(
    180deg,
    rgba(218, 41, 28, 0),
    rgba(218, 41, 28, 0.8) 20%,
    rgba(0, 119, 200, 0.85) 80%,
    rgba(0, 119, 200, 0)
  );
}

.brand-card {
  border: 1px solid rgba(16, 24, 32, 0.4);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 20px 70px -50px rgba(0, 0, 0, 0.9);
}

.brand-card-strong {
  border-color: rgba(0, 119, 200, 0.3);
  background: rgba(0, 18, 38, 0.7);
}

.bg-brand-red { background-color: rgba(218, 41, 28, 0.85); }
.bg-brand-blue { background-color: rgba(0, 119, 200, 0.85); }
.bg-brand-teal { background-color: rgba(78, 195, 224, 0.9); }
.bg-brand-green { background-color: rgba(108, 194, 74, 0.85); }
.bg-brand-warm { background-color: rgba(249, 66, 58, 0.9); }
.bg-brand-gold { background-color: rgba(214, 154, 45, 0.9); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.reveal-show { opacity: 1; transform: translateY(0); }
@keyframes float-back {
  0% { transform: translate3d(-10px, 0, 0) scale(1); }
  50% { transform: translate3d(10px, 5px, 0) scale(1.02); }
  100% { transform: translate3d(-10px, 0, 0) scale(1); }
}

@keyframes float-front {
  0% { transform: translate3d(12px, -6px, 0) scale(1.05); }
  50% { transform: translate3d(-8px, 4px, 0) scale(1.08); }
  100% { transform: translate3d(12px, -6px, 0) scale(1.05); }
}

@layer utilities {
  .animate-[float-back_20s_ease-in-out_infinite] {
    animation: float-back 20s ease-in-out infinite;
  }
  .animate-[float-front_12s_ease-in-out_infinite] {
    animation: float-front 12s ease-in-out infinite;
  }
}