/* ============================================================
   VeriQor — Global Design System v3
   Fonts: Barlow Condensed (display) + Barlow (body)
   Theme: Silver & Blue — RegTech Precision
   ============================================================ */

/* Preconnect + load via both link and @import for reliability */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Barlow+Condensed:wght@600;700;800&family=Barlow+Semi+Condensed:wght@500;600&display=swap');

:root {
  /* Deep navy backgrounds */
  --bg-0:    #03080f;
  --bg-1:    #06101f;
  --bg-2:    #08152a;
  --bg-3:    #0d1e38;
  --bg-4:    #122444;

  /* Blues */
  --blue:       #1a6fff;
  --blue-hi:    #4da3ff;
  --blue-soft:  rgba(26,111,255,0.12);
  --blue-glow:  rgba(26,111,255,0.22);

  /* Silver palette — the key addition */
  --silver-100: #e8f0ff;   /* near-white, headings */
  --silver-200: #c8dff5;   /* bright silver, subheadings */
  --silver-300: #a0bcd8;   /* mid silver, body text */
  --silver-400: #7a9cc4;   /* muted silver, secondary text */
  --silver-500: #4d6a87;   /* dark silver, hints */
  --silver-600: #2a4060;   /* very muted, borders */
  --silver-700: #14263d;   /* surface borders */

  /* Accent (gold — only for earned/seal elements) */
  --gold:      #c9a84c;
  --gold-hi:   #e2c370;

  /* Status */
  --green:  #3dd68c;
  --red:    #f87171;

  /* Surfaces */
  --s1: rgba(255,255,255,0.028);
  --s2: rgba(255,255,255,0.05);
  --s3: rgba(255,255,255,0.075);
  --b1: rgba(100,160,255,0.1);
  --b2: rgba(100,160,255,0.18);
  --b3: rgba(100,160,255,0.28);

  /* Typography — Barlow family only, Arial as last-resort fallback (NOT serif) */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, Helvetica, sans-serif;
  --font-semi:    'Barlow Semi Condensed', Arial, Helvetica, sans-serif;
  --font-body:    'Barlow', Arial, Helvetica, sans-serif;

  /* Shape */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.16s;
  --t-mid:  0.28s;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg-1);
  color: var(--silver-300);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── TYPOGRAPHY ── */
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 6.5vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--silver-100);
}
h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--silver-100);
}
h3 {
  font-family: var(--font-semi);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.2;
  color: var(--silver-200);
}
h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--silver-400);
}
p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--silver-400);
  line-height: 1.75;
  font-weight: 400;
}
a { text-decoration: none; color: inherit; }

/* ── EYEBROW / KICKER ── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-hi);
  margin-bottom: 0.875rem;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1.5px;
  background: var(--blue-hi);
  flex-shrink: 0;
}

/* ── TAGS ── */
.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
}
.tag-blue   { background: rgba(26,111,255,0.12); color: var(--blue-hi); border: 1px solid rgba(26,111,255,0.28); }
.tag-silver { background: rgba(100,160,255,0.07); color: var(--silver-300); border: 1px solid var(--b1); }
.tag-gold   { background: rgba(201,168,76,0.1); color: var(--gold-hi); border: 1px solid rgba(201,168,76,0.28); }
.tag-green  { background: rgba(61,214,140,0.1); color: var(--green); border: 1px solid rgba(61,214,140,0.25); }

/* ── METRIC VALUES ── */
.metric-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--silver-200);
  line-height: 1;
  letter-spacing: 0.02em;
}
.metric-lbl {
  font-family: var(--font-body);
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--silver-600);
  margin-top: 0.3rem;
}

/* ── DOT GRID ── */
.dot-grid {
  background-image: radial-gradient(circle, rgba(26,111,255,0.1) 1px, transparent 1px);
  background-size: 28px 28px;
}
.dot-grid-subtle {
  background-image: radial-gradient(circle, rgba(100,160,255,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.grid-overlay {
  background-image: linear-gradient(rgba(26,111,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(26,111,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ── NAV ── */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(6,16,31,0.92);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-bottom: 1px solid var(--b1);
}
.nav-inner {
  max-width: 1340px; margin: 0 auto; padding: 0 2rem;
  height: 66px; display: flex; align-items: center; gap: 2rem;
}
.nav-logo { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--blue); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -0.01em;
}
.nav-logo span {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.35rem; color: var(--silver-100); letter-spacing: 0.01em;
}
.nav-links { display: flex; align-items: center; gap: 0.1rem; margin-left: auto; }
.nav-link {
  font-family: var(--font-body); font-weight: 500; font-size: 0.875rem;
  color: var(--silver-400); padding: 0.4rem 0.9rem; border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-link:hover { color: var(--silver-100); background: var(--s1); }
.btn-nav-cta {
  margin-left: 1.25rem; padding: 0.48rem 1.25rem;
  background: var(--blue); color: #fff; border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  flex-shrink: 0; white-space: nowrap;
  transition: background var(--t-fast), transform var(--t-mid);
}
.btn-nav-cta:hover { background: #3381ff; transform: translateY(-1px); }
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; margin-left: auto; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--silver-400); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu { display: none; flex-direction: column; gap: 0.25rem; padding: 1rem 2rem 1.5rem; border-top: 1px solid var(--b1); background: rgba(6,16,31,0.98); }
.mobile-menu.open { display: flex; }
.btn-mobile-cta { margin-top: 0.75rem; padding: 0.85rem; text-align: center; background: var(--blue); color: #fff; border-radius: var(--r-md); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; }
@media(max-width:900px) { .nav-links, .btn-nav-cta { display: none; } .hamburger { display: flex; } }

/* ── LAYOUT ── */
.wrap       { max-width: 1340px; margin: 0 auto; padding: 0 2rem; }
.pt-nav     { padding-top: calc(66px + 4rem); }
.section    { padding: 5.5rem 0; }
.section-sm { padding: 3.5rem 0; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 2rem; background: var(--blue); color: #fff;
  border-radius: var(--r-2xl); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  border: none; cursor: pointer; transition: background var(--t-fast), transform var(--t-mid), box-shadow var(--t-mid);
}
.btn-primary:hover { background: #3381ff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,111,255,0.38); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 2rem; border: 1px solid var(--b2); color: var(--silver-400);
  border-radius: var(--r-2xl); font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-mid);
}
.btn-outline:hover { border-color: var(--b3); color: var(--silver-100); transform: translateY(-2px); }
.btn-gold {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 2rem; background: linear-gradient(135deg, var(--gold), var(--gold-hi));
  color: var(--bg-0); border-radius: var(--r-2xl); font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(201,168,76,0.35); }

/* ── CARDS ── */
.card {
  background: var(--s1); border: 1px solid var(--b1); border-radius: var(--r-xl); padding: 2rem;
  transition: border-color var(--t-fast), transform var(--t-mid);
}
.card:hover { border-color: var(--b2); transform: translateY(-2px); }
.card-blue  { border-color: var(--b2); background: var(--blue-soft); }
.card-gold  { border-color: rgba(201,168,76,0.28); background: rgba(201,168,76,0.04); }

/* ── TABLES ── */
.vq-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-family: var(--font-body); }
.vq-table th { background: rgba(26,111,255,0.1); color: var(--silver-200); padding: 0.8rem 1rem; text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--b2); }
.vq-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--b1); color: var(--silver-400); vertical-align: top; }
.vq-table td:first-child { color: var(--silver-200); font-weight: 600; }
.vq-table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--b1); }

/* ── FOOTER ── */
footer { background: var(--bg-0); border-top: 1px solid var(--b1); padding: 2.5rem; text-align: center; }
footer p { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver-600); }
footer p + p { margin-top: 0.4rem; }
footer a { color: var(--silver-600); transition: color var(--t-fast); }
footer a:hover { color: var(--silver-400); }

/* ── RULE ── */
.rule { height: 1px; background: var(--b1); border: none; }
.rule-blue { height: 1px; background: linear-gradient(90deg, var(--blue), transparent); border: none; }

/* ── GRIDS ── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
@media(max-width:1100px) { .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media(max-width:900px)  { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media(max-width:600px)  { .grid-4 { grid-template-columns: 1fr; } }

/* ── UTILITY ── */
.text-center { text-align: center; }
.text-blue   { color: var(--blue-hi); }
.text-silver { color: var(--silver-200); }
.text-gold   { color: var(--gold-hi); }
.text-green  { color: var(--green); }
.text-muted  { color: var(--silver-500); }
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:1.5rem}
.mt-4{margin-top:2rem}  .mt-6{margin-top:3rem}  .mt-8{margin-top:4rem}
.mb-2{margin-bottom:1rem} .mb-4{margin-bottom:2rem}

/* ── ANIMATIONS ── */
@keyframes fadeUp   { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes floatSeal{ 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-11px) rotate(1deg)} }
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.6)} }
.anim-up    { animation: fadeUp 0.65s var(--ease) both; }
.delay-1    { animation-delay: .1s; }
.delay-2    { animation-delay: .2s; }
.delay-3    { animation-delay: .3s; }
.delay-4    { animation-delay: .4s; }

/* ── LOGO IMAGE IN NAV ── */
.nav-logo-img {
  height: 32px;
  width: auto;
  display: block;
  filter: brightness(1.1);
  object-fit: contain;
}