/* ============================
   TOPAZDELTA — Shared Styles
   Calm, modular, government-appropriate
   ============================ */

:root{
  /* London Blue (muted) */
  --blue: #1881F2;
  --blue-2: #1268C4;

  --ink: #0F172A;         /* headings */
  --text: #1F2937;        /* body */
  --muted: #475569;       /* secondary text */
  --hint: #64748B;        /* subtle text */

  --bg: #ffffff;
  --bg-soft: #F7F9FC;
  --line: #E6EDF5;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);

  --container: 1120px;
}

/* Base */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
p{ margin: 0 0 14px; }
ul{ margin: 10px 0 0; padding-left: 18px; }
li{ margin: 7px 0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}

/* Alternating bands (Short & Rounded) */
/* Alternating bands (Wide, Rounded, No Text Shifting) */
.band {
  position: relative;
  background: transparent;
  border: none;
  padding: 40px 0; /* Vertical spacing between sections */
  z-index: 1;
}
/* Add this around Line 60 */
main > section {
  padding: 24px 0;
}

main > section.band:not(.hero){
  margin: 24px 0;
}
/* This creates the rounded background box without touching the text container */
/* Alternating bands (Maximum Possible Width) */
.band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  
  /* PUSHING TO THE ABSOLUTE EDGE */
  width: 99.5%;         /* Leaves only a tiny sliver of white on the sides */
  max-width: 2500px;    /* Extremely wide limit for large 4K monitors */
  
  height: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 30px;
  z-index: -1;
}

/* Keeps your text exactly where it was before */
.band .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 22px;
}

/* Mobile Fix: Ensure the box doesn't hit the screen edges on phones */
@media (max-width: 640px) {
  .band::before {
    width: 92%;
    border-radius: 20px;
  }
}

/* Headings */
h1, h2, h3{
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1{ font-size: 44px; }
h2{ font-size: 28px; }
h3{ font-size: 18px; line-height: 1.3; }

/* Small label */
.tag{
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}

/* Lead + section lead */
.lead {
  font-size: 20px; /* Increased from 18px */
  line-height: 1.6;
  max-width: 72ch; /* Slightly shorter line length for better readability at larger sizes */
  color: var(--muted);
  margin-bottom: 12px;
}
.section-title{ margin: 0 0 10px; }
.section-lead{
  font-size: 16px;
  line-height: 1.65;
  max-width: 80ch;
  color: var(--muted);
  margin-bottom: 18px;
}

/* Header / Nav */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 0;
}

/* Brand logo */
.brand-logo{
  display: inline-flex;
  align-items: center;
}
.brand-logo img{
  height: 58px;   /* increased (was 26) */
  width: auto;
  display: block;
}

/* Menu */
nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center; /* Ensures the list items themselves stay centered */
  gap: 12px;
  margin: 0;
  padding: 0;
}
/* Update this in your CSS */
nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Centers text horizontally in the flex box */
  text-align: center;      /* Centers multi-line text */
  padding: 9px 12px;
  border-radius: 10px;
  color: #334155;
  font-size: 15.5px;
  font-weight: 700;
  min-height: 44px;        /* Optional: keeps height consistent if one wraps */
}
nav a:hover{
  background: var(--bg-soft);
  color: var(--ink);
}
nav a.active{
  background: #EEF4FA;
  color: var(--blue);
  border: 1px solid var(--line);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* Centers the text and gaps */
  text-align: center;      /* Ensures wrapped text is centered */
  gap: 8px;
  padding: 10px 20px;      /* Increased horizontal padding for a better look */
  border-radius: 999px;
  /* ... rest of your existing code ... */
}
.btn:hover{
  border-color: rgba(31,78,121,0.25);
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}
.btn.primary{
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn.primary:hover{
  background: var(--blue-2);
  border-color: var(--blue-2);
}

/* Cards - Center aligned with permanent shadow */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  text-align: center;      /* Centers all text inside the card */
  box-shadow: var(--shadow); /* Shadow is now on permanently */
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card p{
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
}
/* Cards - Darker shadow on hover (Corrected) */
.card.subtle-hover:hover {
  transform: translateY(-6px);         /* Lifts the card slightly */
  border-color: var(--blue);           /* Changes border to blue */
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18); /* Stronger, darker shadow */
}

.card .meta {
  color: var(--hint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block; /* Ensures it takes the full width to center correctly */
}

/* Grids */
.grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.grid-4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* 1. Update the Main Hero Section - TRAPS EVERYTHING */
/* Fix for the Hero Section — Keep the blue band and fix syntax */
.hero.band {
  position: relative;
  background: radial-gradient(circle, rgba(255,255,255,0) 15%, rgba(31,78,121,0.4) 100%), #ffffff;
  overflow: hidden; 
  border-radius: 30px; 
  z-index: 1;
  width: 99.5%;
  max-width: 2500px;
  margin: 0 auto;
  padding: 80px 0; /* Adjust this number to change the height of the blue box */
}
/* 2. The Linear Grid - FIXED TO STAY INSIDE BOX */
.hero.band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;           /* Start at the edge of the box, not screen */
  transform: none;   /* No longer need to center from screen middle */
  
  width: 100%;       /* Match the box width exactly */
  height: 100%;
  z-index: -1;
  opacity: 0.15;
  
  background-image: radial-gradient(var(--blue) 1px, transparent 1px);
  background-size: 60px 60px;
  background-repeat: repeat !important;
  
  animation: neuronDrift 60s linear infinite;
}

/* 3. The Particle Container - ALSO ROUNDED */
#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 30px; /* Matches the band rounding */
}

/* Ensure your text stays readable and crisp */
.hero .container {
  position: relative;
  z-index: 2;
}

/* The Neural Pattern Layer */
/* This is your "Linear" layer that needs to stretch */
.hero::before {
  content: "";
  position: absolute;
  /* Ensure it pins to all four corners */
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0;
  
  width: 100%; /* Force it to fill the width */
  height: 100%;
  z-index: -1;
  opacity: 0.12; /* Keep it very faint so it doesn't fight the neurons */
  
  /* The grid pattern */
  background-image: radial-gradient(var(--blue) 1px, transparent 1px), 
                    linear-gradient(to right, var(--line) 1px, transparent 1px);
  background-size: 60px 60px; /* Making the grid slightly larger can look cleaner */
  
  /* This ensures the pattern repeats forever across the whole screen */
  background-repeat: repeat; 
  
  animation: neuronDrift 60s linear infinite;
}

/* Subtle drift animation for the "connections" */
@keyframes neuronDrift {
  from { background-position: 0 0; }
  to { background-position: 100% 100%; }
}

/* Helpers */
.hint{
  color: var(--hint);
  font-size: 14px;
  margin-top: 10px;
}
.credentials-note{
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* Footer */
footer{
  border-top: 1px solid var(--line);
  padding: 22px 0;
  background: #fff;
}
.footer-grid{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--hint);
  font-size: 14px;
}
.footer-links{
  display: flex;
  gap: 14px;
}
.footer-links a{ color: var(--hint); }
.footer-links a:hover{ color: var(--blue); }

/* Responsive */
@media (max-width: 980px){
  h1{ font-size: 36px; }
  .grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2{ grid-template-columns: 1fr; }
  nav ul{ flex-wrap: wrap; justify-content: flex-end; }
}

@media (max-width: 640px){
  h1{ font-size: 32px; }
  .grid-4{ grid-template-columns: 1fr; }
  .nav{ align-items: flex-start; }
  .brand-logo img{ height: 30px; }
}
/* Hides the 'Overview' label */
.hero .tag {
  display: none;
}

/* Hides the buttons in the hero section only */
.hero .btn, 
.hero .btn-group {
  display: none;
}

/* Services page – left align card content only */
body.services-page .card {
  text-align: left;
}