/* Light Tech theme — friendly, accessible and distinctly digital */
:root {
  --navy: #163b63;
  --blue: #1976d2;
  --cyan: #16b9cf;
  --cream: #f6fbfd;
  --ink: #17324d;
  --muted: #61778b;
  --line: #dceaf0;
}

body {
  background: #fbfdfe;
  color: var(--ink);
}

.topbar {
  color: var(--ink);
  background: rgba(255, 255, 255, .78);
  border-bottom-color: rgba(25, 118, 210, .1);
  backdrop-filter: blur(16px);
}

.topbar.scrolled {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 10px 35px rgba(30, 86, 125, .1);
}

.topbar nav a { color: #34546f; opacity: .9; }
.topbar nav a:hover { color: var(--blue); }
.nav-cta {
  color: #fff !important;
  border: 0;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 7px 18px rgba(25, 118, 210, .2);
}
.menu-btn { color: var(--blue); }

.brand-logo {
  border: 1px solid rgba(25, 118, 210, .12);
  background: #fff;
  box-shadow: 0 6px 18px rgba(26, 85, 122, .1);
}

.hero {
  color: var(--ink);
  background:
    linear-gradient(rgba(25, 118, 210, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 118, 210, .055) 1px, transparent 1px),
    radial-gradient(circle at 78% 34%, rgba(22, 185, 207, .2), transparent 26%),
    radial-gradient(circle at 8% 78%, rgba(25, 118, 210, .11), transparent 23%),
    linear-gradient(145deg, #ffffff 0%, #edf9fc 56%, #f7fcfe 100%);
  background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.hero::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  top: 135px;
  right: 8vw;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(25, 118, 210, .11);
}

.hero h1 { color: #153b61; }
.hero h1 em {
  color: var(--blue);
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lead { color: #526d83; }
.hero .btn.ghost {
  color: var(--blue);
  border-color: #bddce9;
  background: rgba(255, 255, 255, .7);
}
.btn.primary {
  color: #fff;
  background: linear-gradient(135deg, #1976d2, #16b9cf);
  box-shadow: 0 12px 28px rgba(25, 118, 210, .22);
}
.trust { color: #72899b; }
.trust span:first-child { color: #16895d; }

.network-card { z-index: 2; }
.node {
  color: #35617d;
  background: rgba(255, 255, 255, .85);
  border-color: rgba(25, 118, 210, .24);
  box-shadow: 0 12px 40px rgba(25, 118, 210, .1);
  backdrop-filter: blur(8px);
}
.node.center {
  color: #1c557c;
  background: linear-gradient(145deg, #fff, #eaf8fb);
  box-shadow: 0 25px 60px rgba(25, 118, 210, .17);
}
.node.center b { color: var(--blue); }
.pulse { border-color: rgba(25, 118, 210, .13); }
.status-card { box-shadow: 0 16px 45px rgba(25, 118, 210, .14); }

.section { background: #fff; }
.section:nth-of-type(even) { background: #f7fbfc; }
.system-card {
  background: #fff;
  border-color: #dcebf0;
  box-shadow: 0 6px 24px rgba(35, 91, 125, .045);
}
.system-card:hover { box-shadow: 0 22px 48px rgba(35, 91, 125, .13); }
.card-icon { background: linear-gradient(145deg, #e6f7fb, #eef5ff); }

.dark-section {
  color: var(--ink);
  background:
    radial-gradient(circle at 100% 0, rgba(22, 185, 207, .14), transparent 32%),
    linear-gradient(145deg, #eef8fc, #f8fcfd);
}
.dark-section .section-head > p { color: var(--muted); }
.dark-section .eyebrow { color: var(--blue); }
.duty-grid { border-color: #cae3ec; }
.duty {
  background: rgba(255, 255, 255, .72);
  border-color: #cae3ec;
}
.duty:hover { background: #fff; box-shadow: inset 0 3px 0 var(--cyan); }
.duty > span { color: var(--blue); }
.duty p { color: var(--muted); }

.organization {
  background:
    radial-gradient(circle at 15% 10%, rgba(22, 185, 207, .1), transparent 28%),
    linear-gradient(180deg, #fff, #f4fafc);
}
.person-card { box-shadow: 0 15px 42px rgba(35, 91, 125, .09); }
.person-bottom { border-color: rgba(22, 185, 207, .45); }

.about {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .92), rgba(239, 249, 252, .96)),
    repeating-linear-gradient(45deg, transparent, transparent 22px, rgba(25, 118, 210, .04) 22px, rgba(25, 118, 210, .04) 23px);
}
.metric {
  border: 1px solid #e0edf2;
  box-shadow: 0 12px 32px rgba(35, 91, 125, .075);
}
.metric.wide {
  background: linear-gradient(135deg, #2585d7, #22b7ca);
  border: 0;
}

.contact {
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 90%, rgba(25, 118, 210, .13), transparent 30%),
    linear-gradient(135deg, #edf8fc, #f9fdfe);
}
.contact .eyebrow { color: var(--blue); }
.contact-info > p:not(.eyebrow) { color: var(--muted); }
.contact-info li { border-bottom-color: #cfe4ec; }
.contact-info li span { color: #71899b; }
.contact-form {
  border: 1px solid #dbeaf0;
  box-shadow: 0 22px 55px rgba(35, 91, 125, .12);
}

footer {
  color: #eaf8fc;
  background: linear-gradient(135deg, #245a86, #207e9e);
}
footer p, footer > a { color: #d0e7f0; }

@media (max-width: 920px) {
  .topbar nav {
    color: var(--ink);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 30px rgba(35, 91, 125, .12);
  }
}