:root {
  --c4-navy: #081A2E;
  --c4-navy-2: #0E2A47;
  --c4-blue: #0066FF;
  --c4-data-blue: #00C6FF;
  --c4-signal-orange: #FF8A00;
  --c4-silver: #E6ECF3;
  --c4-white: #FFFFFF;
  --c4-dark: #04111F;
  --c4-font: Inter, "Segoe UI", Arial, sans-serif;
}

.c4-dark { background: radial-gradient(circle at 50% 0%, #0b3154 0%, var(--c4-dark) 52%, #020a11 100%); color: var(--c4-silver); }
.c4-light { background: #f6f9fc; color: var(--c4-navy); }
.c4-container { width: min(1180px, 92vw); margin-inline: auto; }
.c4-logo { display:block; width:min(100%, 1100px); height:auto; }
.c4-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.25rem; }
.c4-card { border:1px solid color-mix(in srgb, var(--c4-data-blue) 35%, transparent); border-radius:18px; padding:1.25rem; background:color-mix(in srgb, var(--c4-navy) 72%, transparent); backdrop-filter:blur(14px); }
.c4-accent { color:var(--c4-signal-orange); }
.c4-link { color:var(--c4-data-blue); }