/* Cardinal TV — shared design tokens + header/footer styles.
   Loaded on every page. Edit here to change site-wide look. */
:root{
  --navy-deep: #001322;
  --navy-1: #001D36;
  --navy-2: #052A47;
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --cyan: #1EBCFF;
  --cyan-soft: rgba(30,188,255,0.14);
  --text-main: #F3F7FA;
  --text-dim: #8FA9BE;
}
a{ color:inherit; text-decoration:none; }
.wrap{ max-width: 1180px; margin:0 auto; padding: 0 24px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--cyan); font-size:12.5px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  background: var(--cyan-soft);
  border: 1px solid rgba(30,188,255,0.3);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 20px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: linear-gradient(135deg, #1EBCFF, #0E8FCC);
  color:#001522; font-weight:800; font-size:15px;
  padding:16px 30px; border-radius: 999px; border:none; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(30,188,255,0.35); }

/* ---------- HEADER ---------- */
header{ position: sticky; top:0; z-index: 50; padding: 18px 0; }
.nav{
  max-width: 1180px; margin: 0 auto; padding: 10px 14px 10px 22px;
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(5,25,40,0.6);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
}
.logo{ font-weight:800; font-size:19px; display:flex; align-items:center; gap:8px; color:var(--text-main); }
.logo .dot{ width:9px; height:9px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.nav-links{ display:flex; gap:30px; font-size:14px; font-weight:600; color: var(--text-dim); }
.nav-links a:hover{ color: var(--text-main); }
.nav-links a.active{ color: var(--cyan); }
@media(max-width:780px){ .nav-links{ display:none; } }
.nav-cta .btn{ padding:11px 22px; font-size:13.5px; }

/* ---------- FOOTER ---------- */
footer{ padding: 32px 0 48px; border-top: 1px solid var(--glass-border); margin-top:20px; }
.foot-top{ display:flex; flex-direction:column; gap: 18px; margin-bottom: 30px; }
@media(min-width:780px){ .foot-top{ flex-direction:row; justify-content:space-between; } }
.foot-brand p{ color: var(--text-dim); font-size:13.5px; max-width:320px; margin-top:10px; }
@media(min-width:960px){ .foot-brand p{ max-width:620px; } }
.foot-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.foot-col h4{ font-size:12px; letter-spacing:1px; text-transform:uppercase; color: var(--text-dim); margin-bottom:14px; }
.foot-col a{ display:block; font-size:14px; margin-bottom:10px; color: var(--text-main); }
.foot-col a:hover{ color: var(--cyan); }
.foot-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:16px; margin-bottom:0; }
.foot-badge{
  display:flex; align-items:center; gap:9px;
  background: var(--glass); border:1px solid var(--glass-border);
  border-radius: 10px; padding: 9px 14px;
}
.foot-badge .icon{ font-size:15px; line-height:1; }
.foot-badge .label{ font-size:12px; font-weight:700; color: var(--text-main); line-height:1.3; }
.foot-badge .sub{ font-size:10.5px; color: var(--text-dim); font-weight:600; }
.foot-bottom{ font-size:12px; color: var(--text-dim); border-top:1px solid var(--glass-border); padding-top:22px; }
.foot-bottom-inner{ display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; text-align:center; }
.foot-bottom a{ color: var(--text-dim); }
.foot-bottom a:hover{ color: var(--cyan); }