*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1a1a1a;line-height:1.6}.wrap{max-width:960px;margin:0 auto;padding:0 1.5rem}a{color:#0a2a6b}.site-header{background:#071a45;border-bottom:1px solid rgba(255,255,255,.08)}.site-header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:1rem 1.5rem;gap:.75rem}.site-header .brand{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.3rem;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:.55rem}.site-header .brand svg{height:1.05em;width:auto}.site-header .site-nav{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center}.site-header .site-nav a{text-decoration:none;color:rgba(255,255,255,.78);font-size:.95rem}.site-header .site-nav a:hover{color:#fff}.site-header .site-nav a.active{color:#fff;font-weight:700;background:rgba(255,255,255,.1);padding:.3rem .7rem;border-radius:4px;box-shadow:inset 0 -2px 0 #c9a227}.site-header .site-nav .logout-form{margin:0}.site-header .site-nav .logout-form button{font:inherit;text-decoration:none;color:rgba(255,255,255,.78);background:none;border:none;padding:0;cursor:pointer}.site-header .site-nav .logout-form button:hover{color:#fff}.site-header .lang-switcher{display:flex;gap:.2rem;padding-left:.75rem;border-left:1px solid rgba(255,255,255,.15)}.site-header .lang-switcher a{font-size:.78rem;color:rgba(255,255,255,.6);padding:.15rem .45rem;border-radius:4px}.site-header .lang-switcher a:hover{color:#fff}.site-header .lang-switcher a.active{color:#071a45;background:#fff;font-weight:700;padding:.15rem .45rem;box-shadow:none}main{max-width:960px;margin:0 auto;padding:2rem 1.5rem 4rem}h1,h2,h3{color:#0a2a6b;font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:-.01em;line-height:1.25}blockquote{border-left:4px solid #c9a227;margin:1.5rem 0;padding:.25rem 0 .25rem 1.25rem;font-size:1.25rem;font-style:italic;color:#0a2a6b}table{width:100%;border-collapse:collapse;margin:1.5rem 0}table th,table td{border:1px solid #e3e6ec;padding:.6rem .75rem;text-align:left;vertical-align:top}table th{background:#0a2a6b;color:#fff;border-color:#0a2a6b}table tbody tr:nth-child(even) td{background:#f8f9fc}.hero-image{width:100%;height:auto;border-radius:6px;display:block}.pillars{display:flex;flex-wrap:wrap;gap:1rem;margin:2rem 0}.pillars .pillar{flex:1 1 220px;background:#fff;border:1px solid #e3e6ec;border-top:3px solid #c9a227;padding:1.25rem;border-radius:10px;box-shadow:0 10px 30px rgba(7,26,69,.08)}.pillars .pillar h3{margin-top:0;font-size:1.05rem}.pillars .pillar p{margin-bottom:0;color:#5a5f6b}.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0}.button{display:inline-block;text-decoration:none;padding:.65rem 1.2rem;border:1px solid #0a2a6b;border-radius:6px;color:#0a2a6b;font-weight:600;transition:background .15s,color .15s,border-color .15s}.button:hover{background:#f4f6fa}.button-primary{background:#0a2a6b;color:#fff}.button-primary:hover{background:rgb(6.5128205128,27.3538461538,69.6871794872)}.site-footer{background:#f4f6fa;border-top:1px solid #e3e6ec;margin-top:2rem}.site-footer .wrap{padding:1.5rem;color:#5a5f6b;font-size:.9rem}.site-footer p{margin:.2rem 0}.site-footer .footer-version{font-size:.75rem;color:#8a8f9b}@media(max-width: 600px){.site-header .wrap{flex-direction:column;align-items:flex-start}}
/* Bootstrap brand overrides for the membership preregistration form.
   Bootstrap is loaded before this file, so these win. No Sass pipeline in
   the Django app, so this is authored directly in the compiled CSS. */
.membership-card {
  max-width: 860px;
  margin: 1.5rem 0;
  border: 1px solid #e3e6ec;
  border-radius: 8px;
}
.membership-form .form-label {
  font-weight: 600;
  color: #0a2a6b;
}
.membership-form .form-control,
.membership-form .form-select {
  padding: 0.6rem 0.75rem;
}
/* Brand-navy focus ring instead of Bootstrap's default blue. */
.membership-form .form-control:focus,
.membership-form .form-select:focus {
  border-color: #0a2a6b;
  box-shadow: 0 0 0 0.2rem rgba(10, 42, 107, 0.15);
}
/* Keep the brand navy submit button (.button.button-primary) comfortably
   sized within the Bootstrap form. */
.membership-form .button-primary {
  padding: 0.6rem 1.5rem;
}
/* Account menu in the header nav: a native <details>/<summary> disclosure
   (no JS bundle is loaded in the header, so this avoids adding one just
   for a menu). */
.account-menu {
  position: relative;
}
.account-menu summary {
  list-style: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .78);
  font-size: .95rem;
}
.account-menu summary::-webkit-details-marker {
  display: none;
}
.account-menu summary::after {
  content: ' \25BE';
}
.account-menu summary:hover {
  color: #fff;
}
.account-menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 160px;
  margin-top: .4rem;
  padding: .6rem;
  background: #fff;
  border: 1px solid #e3e6ec;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
}
.account-menu-panel a {
  text-decoration: none;
  color: #1a1a1a;
  font-size: .95rem;
}
.account-menu-panel a:hover {
  color: #0a2a6b;
}
.account-menu-panel a.active {
  color: #0a2a6b;
  font-weight: 700;
}
.account-menu-panel .logout-form {
  margin: 0;
}
.account-menu-panel .logout-form button {
  font: inherit;
  text-decoration: none;
  color: #1a1a1a;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.account-menu-panel .logout-form button:hover {
  color: #0a2a6b;
}
/* Match Bootstrap cards' border color to the site's own border color
   (used everywhere else: header, membership-card, tables) instead of
   Bootstrap's default. */
.card {
  border-color: #e3e6ec;
}
/* Narrow card wrapper for simple 1-3 field forms (login, password
   change) -- reads better narrow, unlike the wider .membership-card. */
.auth-card {
  max-width: 420px;
  margin: 1.5rem 0;
}/* The header is dark, but the account dropdown panel stays white, so its
   links and logout button go back to dark text (the header nav rules
   above are more specific than the .account-menu-panel ones). */
.site-header .account-menu-panel a,
.site-header .account-menu-panel .logout-form button {
  color: #1a1a1a;
}
.site-header .account-menu-panel a:hover,
.site-header .account-menu-panel .logout-form button:hover {
  color: #0a2a6b;
}
.site-header .account-menu-panel a.active {
  color: #0a2a6b;
  background: #eef1f8;
}
/* Montserrat for headings and the wordmark, self-hosted (no requests to
   Google Fonts). Subset to Latin, Latin Extended-A and Cyrillic; Georgian
   falls back to the system font. License: static/fonts/OFL.txt. */
@font-face {
  font-family: Montserrat;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-semibold.9c7b9cd5bbdb.woff2") format("woff2");
}
@font-face {
  font-family: Montserrat;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-bold.2e17318b9e03.woff2") format("woff2");
}
/* Home page hero: a full-width dark band that continues the header. */
.hero {
  color: #fff;
  background:
    radial-gradient(circle at 78% 45%, rgba(56, 104, 214, .35), transparent 45%),
    linear-gradient(160deg, #071a45 0%, #0a2a6b 100%);
}
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 3.5rem;
  padding-bottom: 7.5rem;
}
.hero-text {
  max-width: 560px;
}
.hero .eyebrow {
  margin: 0 0 .75rem;
  font-family: Montserrat, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8fb3ff;
}
/* Uppercasing Georgian switches it to Mtavruli capitals; keep it as written. */
.hero .eyebrow:lang(ka) {
  text-transform: none;
  letter-spacing: .03em;
}
.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.12;
  color: #fff;
}
.hero-lead {
  margin: 0 0 1.75rem;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .8);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.button-gold {
  background: #c9a227;
  border-color: #c9a227;
  color: #071a45;
}
.button-gold:hover {
  background: #d9b545;
  border-color: #d9b545;
}
.button-ghost {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.button-ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .6);
}
/* Hero illustration: the logo's waveform pulsing out over a network. */
.hero-art {
  flex: 0 0 300px;
  width: 300px;
  height: 300px;
}
.hero-rings circle {
  fill: none;
  stroke: rgba(255, 255, 255, .12);
}
.hero-links path {
  fill: none;
  stroke: rgba(143, 179, 255, .3);
}
.hero-links-gold path {
  stroke: rgba(201, 162, 39, .55);
}
.hero-nodes circle {
  fill: #8fb3ff;
}
.hero-nodes-gold circle {
  fill: #c9a227;
}
.hero-core {
  fill: #0a2a6b;
  stroke: rgba(255, 255, 255, .25);
}
.hero-pulse {
  fill: none;
  stroke: #c9a227;
  stroke-width: 1.5;
  opacity: 0;
  transform-box: view-box;
  transform-origin: 160px 160px;
  animation: hero-pulse 5s ease-out infinite;
}
.hero-pulse-late {
  animation-delay: 2.5s;
}
@keyframes hero-pulse {
  from { transform: scale(.22); opacity: .7; }
  to { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pulse { animation: none; }
}
/* Pillar cards float up over the bottom edge of the hero. */
.pillars-float {
  position: relative;
  margin-top: -7rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .75rem;
  border-radius: 50%;
  background: #eef1f8;
  color: #0a2a6b;
}
.pillar-icon svg {
  width: 1.3rem;
  height: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mission .lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #2a2f3a;
}
@media (max-width: 760px) {
  .hero-art { display: none; }
  .hero-inner { padding-top: 2.5rem; }
}