/* v5 — Default 110% scale via html.cap-v5 font-size.
   This makes the page render like browser zoom at 110% without hacks. */

html.cap-v5 { font-size: 110%; }

/* Layout tokens and responsive sticky offsets */
:root{
  --navbar-height: 64px;
  --cap-sticky-offset: calc(var(--navbar-height) + 12px);
  --main-bg: #0b1627;
  --navbar-bg: #10182a;
  --accent: #5aa0e6;
  --accent-hover: #3373b5;
  --text-main: #eaf4ff;
  --text-subtle: #cfd8ea;
  --section-bg: #162449;
  --blue-1: #101c39;
}

@media (max-width: 768px){
  :root{
    --navbar-height: 56px;
    --cap-sticky-offset: calc(var(--navbar-height) + 8px);
  }
}

/* HERO banner */
.cap-hero-banner{
  position: relative;
  isolation: isolate;
  background: linear-gradient(110deg, #7c3aed 0%, #6a43e6 28%, var(--accent) 100%);
  color: #fff;
  padding: clamp(24px, 6vw, 64px) 0;
}
.cap-hero-banner::after{
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: min(42%, 560px);
  background: linear-gradient(110deg, #0000, #0000 30%, rgba(0,0,0,.08) 70%);
  clip-path: polygon(42% 0, 100% 0, 100% 100%, 42% 100%, 0 50%);
  opacity: .55;
  z-index: 0;
}
.cap-hero-banner .container{ max-width: 1200px; position: relative; z-index: 1; padding-inline: 16px; }
.cap-hero-kicker{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: clamp(1.9rem, 1.2rem + 4.2vw, 4rem);
  margin: 0;
  text-transform: uppercase;
}

/* INTRO block */
.cap-intro{
  background: #0e1528;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cap-intro-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(24px, 8vw, 90px) 16px clamp(20px, 6vw, 56px);
}
.cap-intro-title{
  font-weight: 800;
  color: #cfd5ff;
  letter-spacing: .01em;
  font-size: clamp(1.6rem, 1.1rem + 3vw, 3rem);
  margin-bottom: clamp(8px, 1.2vw, 12px);
}
.cap-intro-lead{
  color: var(--text-subtle);
  font-size: clamp(1rem, .9rem + .4vw, 1.18rem);
  line-height: 1.85;
  max-width: 72ch;
}

/* STICKY SUBNAV (hidden until small scroll) */
.cap-subnav{
  position: sticky;
  top: var(--navbar-height);
  z-index: 900;
  background: linear-gradient(180deg, rgba(16,24,42,.94), rgba(16,24,42,.88));
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(-10px); pointer-events: none; visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s step-end;
}
.cap-subnav.reveal{
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
.cap-subnav-container{ max-width: 1200px; padding-inline: 16px; }

/* Services pills row (scrollable, but scrollbar hidden) */
.cap-pills{
  display: flex; gap: 12px; padding: 10px 0; margin: 0;
  list-style: none; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Hide scrollbars cross-browser */
  -ms-overflow-style: none;          /* IE 10+ */
  scrollbar-width: none;             /* Firefox */
  scrollbar-color: transparent transparent;
}
.cap-pills::-webkit-scrollbar{       /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
  display: none;
}

.cap-pill{
  color: var(--text-subtle); text-decoration: none; font-weight: 800; letter-spacing: .01em;
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.02); white-space: nowrap; flex: 0 0 auto;
  transition: color .18s, border-color .18s, background .18s, box-shadow .18s, transform .12s;
}
.cap-pill:hover{ color: #fff; border-color: var(--accent); background: rgba(90,160,230,.12); }
.cap-pill.active{
  color: #0b1627; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 6px 18px rgba(90,160,230,.35);
  animation: capPillGlow 2.6s ease-in-out infinite;
}
@keyframes capPillGlow{
  0%{box-shadow:0 0 0 rgba(90,160,230,0),0 6px 18px rgba(90,160,230,.35)}
  50%{box-shadow:0 0 22px rgba(90,160,230,.55),0 6px 22px rgba(90,160,230,.40)}
  100%{box-shadow:0 0 0 rgba(90,160,230,0),0 6px 18px rgba(90,160,230,.35)}
}

/* CAPABILITY BANDS */
.cap-band{
  position: relative; color: #fff; padding: clamp(32px, 8vw, 90px) 0;
}
.cap-band::before{
  content:""; position:absolute; inset:0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  opacity:.7;
}
.cap-band-grid{
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: clamp(16px, 3vw, 40px);
  grid-template-columns: 1.1fr 1fr; align-items: center;
  padding-inline: 16px;
}
@media (max-width: 1024px){
  .cap-band-grid{ grid-template-columns: 1fr; }
  .cap-band-media{ order: -1; }
  .cap-band-media img{ margin-bottom: 6px; }
}
.cap-band-title{
  font-weight: 800; letter-spacing: .01em;
  font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.5rem);
  margin-bottom: 10px;
}
.cap-band-text{ color: #eef4ff; line-height: 1.85; margin-bottom: 10px; max-width: 65ch; }
.cap-band-list{ list-style: none; padding: 0; margin: 0 0 14px; }
.cap-band-list li{ display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.cap-band-list i{ color: #bfe3ff; margin-top: 5px; }
.cap-band-media img{
  width: 100%; height: auto; display: block; border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.06);
  object-fit: cover;
}

/* Band themes */
.theme-indigo{ background: linear-gradient(120deg, #0f1e3f 0%, #142a52 55%, #16315f 100%); }
.theme-blue{   background: linear-gradient(120deg, #102043 0%, #0f2b53 55%, #133663 100%); }
.theme-cyan{   background: linear-gradient(120deg, #0f2437 0%, #0f2f44 55%, #0d3a52 100%); }
.theme-teal{   background: linear-gradient(120deg, #102533 0%, #0f3141 55%, #0f3d4f 100%); }
.theme-violet{ background: linear-gradient(120deg, #171f3f 0%, #232b5d 55%, #2d3573 100%); }
.theme-navy{   background: linear-gradient(120deg, #0e1b31 0%, #102241 55%, #122a4f 100%); }

/* Buttons */
.btn.btn-primary{
  background: linear-gradient(90deg, #2567a6 70%, #5bc0ff 100%);
  border: none; font-weight: 700; letter-spacing: .01em; border-radius: 12px;
  box-shadow: 0 2px 14px #1a3c7a22; padding: 10px 18px;
}
.btn.btn-primary:hover{ background: linear-gradient(90deg, #3880ca 70%, #5bc0ff 100%); }

@media (max-width: 420px){
  .btn.btn-primary{ padding: 9px 14px; font-size: .95rem; border-radius: 10px; }
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Utilities */
.container{ padding-left: 16px; padding-right: 16px; }