@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* =============================================================================
   style.css — Meridian Systems corporate site
   Design language: "Ledger & Signal"
   - Deep navy surfaces with an electric-blue / sky-blue signal accent
   - Display face: Sora (geometric, confident) / Body: Inter / Data: IBM Plex Mono
   - Structural rule lines borrowed from financial ledgers/reports, used only
     where content is genuinely sequential or tabular (stats, timelines)
   ============================================================================= */

:root {
  /* ---- Color tokens ("Premium Blue" palette) ---- */
  --ink-900: #0A1128;   /* Primary — near-black navy — hero / footer surfaces */
  --ink-800: #0F1D3D;   /* Text / card surface on dark */
  --ink-700: #1F3A65;   /* borders on dark surfaces */
  --paper-100: #EEF3FB; /* Background — light sections */
  --paper-200: #DCE6F5; /* subtle contrast panels on paper */
  --slate-600: #4A5C78; /* secondary text on light */
  --slate-400: #7C93AC; /* tertiary text / placeholders */
  --brass-500: #2563EB; /* Secondary — premium blue — CTAs, highlights, active state */
  --brass-600: #1D4ED8; /* accent hover/darker */
  --sky-400: #60A5FA;   /* Accent — sky blue — glow, gradients, dots */
  --signal-green: #16A34A; /* positive sentiment */
  --signal-red: #DC2626;   /* negative sentiment */
  --white: #FFFFFF;

  /* ---- Glass / glow support tokens (additive, tech surfaces) ---- */
  --glass-surface: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(37, 99, 235, 0.16);
  --glow-cyan: rgba(96, 165, 250, 0.35);
  --glow-violet: rgba(37, 99, 235, 0.38);

  /* ---- Typography ---- */
  --font-display: 'Manrope', 'DM Sans', 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* ---- Layout ---- */
  --radius-sm: 12px;
  --radius-md: 22px;
  --header-height: 76px;
  --container-max: 1180px;
  --shadow-card: 0 18px 60px -28px rgba(10, 17, 40, 0.34), 0 6px 24px -16px rgba(29, 78, 216, 0.20);
  --team-card-max-width: 250px; /* Team page card size — raise/lower to resize */
}

/* ---- Reset & base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); }

/* Lock horizontal scrolling — prevents the page from being swiped
   sideways on mobile when any element (fixed header, wide table, etc.)
   is even 1px wider than the viewport. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background:
    radial-gradient(circle at 12% 8%, rgba(96, 165, 250, 0.13), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(37, 99, 235, 0.09), transparent 28%),
    radial-gradient(circle at 52% 100%, rgba(124, 147, 172, 0.08), transparent 34%),
    var(--paper-100);
  background-attachment: fixed;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display-font {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.eyebroww {
  font-family: var(--font-display);   /* switched from mono to your display font (Space Grotesk) */
  font-size: 0.85rem;                 /* bumped up from 0.72rem for readability */
  font-weight: 600;                   /* bolder so it doesn't fade into background */
  letter-spacing: 0.1em;              /* slightly tightened, still airy but not too spaced-out */
  text-transform: uppercase;
  color: var(--paper-100);              /* darker, higher-contrast color than brass-600 */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.eyebroww::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--brass-500);
  display: inline-block;
}



.eyebrow {
  font-family: var(--font-display);   /* switched from mono to your display font (Space Grotesk) */
  font-size: 0.85rem;                 /* bumped up from 0.72rem for readability */
  font-weight: 600;                   /* bolder so it doesn't fade into background */
  letter-spacing: 0.1em;              /* slightly tightened, still airy but not too spaced-out */
  text-transform: uppercase;
  color: var(--ink-900);              /* darker, higher-contrast color than brass-600 */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--brass-500);
  display: inline-block;
}

.section {
  padding: 5.5rem 0;
}
.section-tight { padding: 3.5rem 0; }
.container-custom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--brass-500);
  outline-offset: 3px;
}


/* ---- Message detail modal ---- */
.msg-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8, 12, 28, 0.6);
  backdrop-filter: blur(2px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.msg-modal-overlay.show {
  display: flex;
}

.msg-modal {
  background: var(--white);
  border-radius: var(--radius-sm, 8px);
  width: 70%;
  max-width: 1000px;
  min-width: 320px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(8, 12, 28, 0.3);
  animation: msgModalIn 0.18s ease-out;
}

@keyframes msgModalIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.msg-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--paper-200);
  background: var(--paper-100);
  border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
}
.msg-modal-header h3 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0 0 0.3rem 0;
}
.msg-modal-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--slate-400);
}
.msg-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--slate-400);
  padding: 0;
}
.msg-modal-close:hover {
  color: var(--ink-900);
}

/* --- Body: horizontal grid instead of stacked rows --- */
.msg-modal-body {
  padding: 1.75rem 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}

.msg-modal-row {
  min-width: 0; /* allow text to wrap instead of overflowing grid cell */
}
.msg-modal-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: 0.4rem;
}
.msg-modal-row p {
  font-size: 0.95rem;
  color: var(--ink-900);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Message field is the longest — let it span the full width on its own row */
.msg-modal-row:has(#msgModalMessage) {
  grid-column: 1 / -1;
  border-top: 1px solid var(--paper-200);
  padding-top: 1.25rem;
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
  .msg-modal {
    width: 95%;
    max-height: 90vh;
  }
  .msg-modal-body {
    grid-template-columns: 1fr;
  }
} 
/*------------------------------------------------------------------------------*/
/* ---- Leads filter bar + data table ---- */
.leads-filter-card {
  padding: 1.1rem 1.4rem;
}
.leads-filter-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}
.filter-bar {
  display: flex;
  gap: 0.3rem;
  background: var(--paper-200);
  padding: 0.3rem;
  border-radius: var(--radius-sm);
}
.filter-btn {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border-radius: 4px;
  color: var(--slate-600);
}
.filter-btn:hover { color: var(--ink-900); }
.filter-btn.active {
  background: var(--white);
  color: var(--ink-900);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(8,12,28,0.12);
}
.leads-filter-divider {
  width: 1px;
  height: 34px;
  background: var(--paper-200);
  align-self: center;
}
.leads-date-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.leads-date-field label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.leads-date-field input { margin-bottom: 0; min-width: 150px; }

/* ---- Table wrapper: NO horizontal scroll, table is fixed-width ---- */
.data-table-wrapper {
  width: 100%;
  overflow-x: hidden;   /* kill horizontal scroll entirely */
  overflow-y: auto;     /* vertical scroll only, if rows overflow container height */
  max-height: 70vh;     /* adjust as needed */
  border-radius: var(--radius-sm);
}

.data-table {
  width: 100%;
  table-layout: fixed;      /* forces columns to respect fixed widths, no overflow */
  border-collapse: collapse;
  font-size: 0.9rem;
}
.data-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-400);
  background: var(--paper-100);
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--paper-200);
}
.data-table td {
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--paper-200);
  color: var(--ink-900);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--paper-100); }

/* Truncate any cell's text instead of letting it stretch the table */
.data-table-truncate {
  max-width: 1px;           /* combined with table-layout:fixed, forces truncation */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Column width distribution — tune to your columns */
.data-table th:nth-child(1), .data-table td:nth-child(1) { width: 14%; } /* Name */
.data-table th:nth-child(2), .data-table td:nth-child(2) { width: 18%; } /* Email */
.data-table th:nth-child(3), .data-table td:nth-child(3) { width: 12%; } /* Phone */
.data-table th:nth-child(4), .data-table td:nth-child(4) { width: 14%; } /* Company */
.data-table th:nth-child(5), .data-table td:nth-child(5) { width: 24%; } /* Message */
.data-table th:nth-child(6), .data-table td:nth-child(6) { width: 10%; } /* Submitted */
.data-table th:nth-child(7), .data-table td:nth-child(7) { width: 8%;  } /* View button */

.view-btn {
  font-family: var(--font-body);   /* was var(--font-mono) */
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;          /* was likely 0 but mono was making it look off — keep tight */
  padding: 0.35rem 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--paper-200);
  background: var(--white);
  color: var(--ink-900);
  cursor: pointer;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.view-btn:hover {
  background: var(--paper-100);
  border-color: var(--slate-400);
}

.data-table td {
  font-family: var(--font-body);   /* ensure body cells use body font, not inherited mono */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Modal for full detail view ---- */
.lead-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,12,28,0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.lead-modal-overlay.active { display: flex; }

.lead-modal {
  background: var(--white);
  border-radius: var(--radius-sm);
  max-width: 560px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.75rem;
  box-shadow: 0 12px 40px rgba(8,12,28,0.25);
}
.lead-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--paper-200);
  padding-bottom: 0.9rem;
}
.lead-modal-header h3 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--ink-900);
}
.lead-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--slate-400);
}
.lead-modal-close:hover { color: var(--ink-900); }

.lead-modal-row {
  margin-bottom: 1rem;
}
.lead-modal-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: 0.3rem;
}
.lead-modal-row p {
  font-size: 0.95rem;
  color: var(--ink-900);
  white-space: pre-wrap;   /* full message text wraps normally here, no truncation */
  word-break: break-word;
}

/* =============================================================================
   Header / Navbar
   ============================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ink-700);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.4);
}
.site-header .navbar {
  height: var(--header-height);
  padding: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.brand-mark {
  height: 34px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  display: block;
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--white);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.nav-link-custom,
a.nav-link-custom {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255,255,255,0.72) !important;
  padding: 0.55rem 1rem !important;
  border-radius: 4px;
  position: relative;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-link-custom:hover,
a.nav-link-custom:hover {
  color: var(--white) !important;
  background-color: rgba(255,255,255,0.08);
}
.nav-link-custom:active,
a.nav-link-custom:active {
  color: var(--white) !important;
  background-color: rgba(37, 99, 235, 0.25);
}
.nav-link-custom:focus,
.nav-link-custom:focus-visible,
a.nav-link-custom:focus {
  color: var(--white) !important;
  outline: 2px solid var(--sky-400);
  outline-offset: 2px;
}
.nav-link-custom:visited,
a.nav-link-custom:visited {
  color: rgba(255,255,255,0.72) !important;
}
.nav-link-custom.active,
a.nav-link-custom.active {
  color: var(--white) !important;
}
.nav-link-custom::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.1rem;
  height: 2px;
  background: var(--sky-400);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link-custom:hover::after,
.nav-link-custom:active::after,
.nav-link-custom.active::after {
  transform: scaleX(1);
}
  

/* Client Portal CTA — layered depth + motion, hard-overrides Bootstrap's
   default btn hover/active/focus states so it never flashes black */
.btn-portal,
a.btn-portal,
button.btn-portal {
  position: relative;
  background: linear-gradient(135deg, var(--brass-500) 0%, var(--brass-600) 100%) !important;
  color: var(--white) !important;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.35rem !important;
  border-radius: var(--radius-sm);
  border: 1px solid transparent !important;
  margin-left: 0.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2), 0 4px 12px -4px rgba(37, 99, 235, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-portal:hover,
a.btn-portal:hover,
button.btn-portal:hover {
  background: linear-gradient(135deg, #3B82F6 0%, var(--brass-500) 100%) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.25), 0 8px 20px -6px rgba(37, 99, 235, 0.55);
}
.btn-portal:active,
a.btn-portal:active,
button.btn-portal:active {
  background: linear-gradient(135deg, var(--brass-600) 0%, #1E3A8A 100%) !important;
  color: var(--white) !important;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3), 0 2px 8px -2px rgba(37, 99, 235, 0.5);
}
.btn-portal:focus,
.btn-portal:focus-visible,
a.btn-portal:focus,
button.btn-portal:focus {
  color: var(--white) !important;
  outline: 2px solid var(--sky-400);
  outline-offset: 2px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2), 0 4px 12px -4px rgba(37, 99, 235, 0.45);
}
.btn-portal:visited {
  color: var(--white) !important;
}

.navbar-toggler {
  border: none;
  color: var(--white);
}
.navbar-toggler:focus { box-shadow: none; }



/* =============================================================================
   Solutions Dropdown (nav)
   ============================================================================= */
.navbar-nav .dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
/* Kill Bootstrap's default caret, draw our own so it inherits color/transitions */
.navbar-nav .dropdown-toggle::after {
  display: inline-block;
  vertical-align: 0;
  border: none;
  content: '\f107'; /* fa-chevron-down */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.72rem;
  margin-left: 0.15rem;
  color: rgba(255,255,255,0.55);
  transition: transform 0.2s ease, color 0.2s ease;
}
.navbar-nav .dropdown-toggle:hover::after,
.navbar-nav .dropdown-toggle:focus::after {
  color: var(--white);
}
.navbar-nav .dropdown.show .dropdown-toggle::after {
  transform: rotate(180deg);
  color: var(--sky-400);
}

.navbar-nav .dropdown-menu {
  background: rgba(15, 23, 42, 0.97);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-sm, 6px);
  padding: 0.4rem;
  margin-top: 0.5rem;
  min-width: 180px;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.55);
}
.navbar-nav .dropdown-item {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  padding: 0.55rem 0.85rem;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  color: var(--white);
  background-color: rgba(255,255,255,0.08);
}
.navbar-nav .dropdown-item:active {
  color: var(--white);
  background-color: rgba(37, 99, 235, 0.25);
}
.navbar-nav .dropdown-item.active {
  color: var(--white);
  background-color: rgba(37, 99, 235, 0.18);
}

/* On mobile (collapsed navbar), let the dropdown expand inline instead of floating */
@media (max-width: 991.98px) {
  .navbar-nav .dropdown-menu {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    padding-left: 0.75rem;
    margin-top: 0.15rem;
  }
}



/* =============================================================================
   Hero
   ============================================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(140px, 20vh, 200px);
  padding-bottom: 120px;
  color: var(--white);
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Override the shared centered container ONLY inside the hero,
   so the text hugs the real left edge of the screen instead of
   the centered content column used elsewhere on the page. */
.hero .container-custom {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: clamp(24px, 6vw, 96px);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 12% 15%, rgba(37, 99, 235, 0.22), transparent 45%),
    radial-gradient(circle at 88% 80%, rgba(96, 165, 250, 0.14), transparent 45%),
    linear-gradient(90deg, rgba(10,17,40,0.96) 0%, rgba(10,17,40,0.90) 35%, rgba(10,17,40,0.55) 55%, rgba(10,17,40,0.15) 75%),
    linear-gradient(180deg, rgba(10,17,40,0.90) 0%, rgba(10,17,40,0.80) 45%, rgba(10,17,40,0.96) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  text-align: left;
}

.hero-content h1 {
  color: var(--white);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.08;
  margin-bottom: 1.25rem;
}

.hero-content .lede {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.78);
  max-width: 560px;
  margin-bottom: 2.25rem;
}

.hero-ctas .btn { padding: 0.75rem 1.6rem; font-weight: 600; border-radius: var(--radius-sm); }

.btn-brass {
  background: var(--brass-500);
  border-color: var(--brass-500);
  color: var(--white);
}
.btn-brass:hover { background: var(--brass-600); border-color: var(--brass-600); color: var(--white); }

.btn-outline-light-custom {
  border: 1px solid rgba(255,255,255,0.5);
  color: var(--white);
  background: transparent;
}
.btn-outline-light-custom:hover { border-color: var(--white); background: rgba(255,255,255,0.08); color: var(--white); }

.hero-bottom-cta {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  padding: 0.7rem 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--brass-500);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.hero-bottom-cta:hover {
  background: var(--brass-600);
  color: var(--white);
}

@media (max-width: 767px) {
  .hero {
    min-height: auto;
    height: 35vh;
    aspect-ratio: unset;
    padding-top: 90px;
    padding-bottom: 60px;
  }

  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* =============================================================================
   Cards / shared components
   ============================================================================= */
.card-custom {
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(238,243,251,0.46));
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}

.value-card {
  position: relative;
  border-top: none;
  padding: 1.9rem 1.6rem;
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(238,243,251,0.46));
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  height: 100%;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.value-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brass-500), var(--sky-400));
}
.value-card p, .value-card .desc {
  color: var(--slate-600) !important;
  line-height: 1.75;
}

.value-card p.mission-text {
  color: var(--ink-900) !important;
}
.value-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--glow-violet), 0 8px 28px -8px var(--glow-cyan);
}
.value-card .icon-badge {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--brass-600) 100%);
  color: var(--sky-400);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  font-size: 1.1rem;
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18), 0 6px 16px -6px var(--glow-violet);
}

.stat-ledger {
  font-family: var(--font-mono);
  display: flex;
  border-top: 1px solid var(--ink-700);
}
.stat-ledger .stat-item {
  flex: 1;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--ink-700);
}
.stat-ledger .stat-item:last-child { border-right: none; }
.stat-ledger .stat-num {
  font-size: 2rem;
  font-weight: 600;
  color: var(--white);
}
.stat-ledger .stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ---- About-section image placeholder (Home page) ---- */
.about-img-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--paper-100);
  background-image: radial-gradient(rgba(37, 99, 235, 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
  border: 1.5px dashed rgba(37, 99, 235, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--slate-600);
  font-size: 0.9rem;
  padding: 1.5rem;
  object-fit: cover;   /* crops to fill the box instead of stretching/squishing */
  object-position: center;
}

/* ---- Stacked stat rows (light alternative to .stat-ledger) ---- */
.stat-stack { margin-top: 1.75rem; }
.stat-stack .stat-row {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--paper-200);
}
.stat-stack .stat-row:first-child { padding-top: 0; }
.stat-stack .stat-row:last-child { border-bottom: none; }
.stat-stack .stat-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.25rem);
  color: var(--ink-900);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.stat-stack .stat-desc {
  font-size: 0.92rem;
  color: var(--slate-600);
}

@media (max-width: 991.98px) {
  .about-img-placeholder { margin-bottom: 1rem; aspect-ratio: 4 / 3; }
}

//* =============================================================================
   How It Works — Process Workflow
   ============================================================================= */
.process-workflow {
  padding-top: 100px;
  padding-bottom: 100px;
}

.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.06);
  color: #2563eb;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.process-subtitle {
  max-width: 620px;
  color: rgba(15, 23, 42, 0.62);
  font-size: 1.05rem;
  line-height: 1.7;
}

.workflow-steps {
  --wf-icon-size: 72px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 3rem 0 0;
  padding: 0;
}

.workflow-line {
  position: absolute;
  height: 2px;
  background: rgba(37, 99, 235, 0.18);
  z-index: 0;
  /* top/left/right/width are set dynamically by JS for pixel-perfect accuracy */
}

.workflow-line-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.6);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.workflow-step {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.workflow-icon {
  position: relative;
  z-index: 1;
  width: var(--wf-icon-size, 72px);
  height: var(--wf-icon-size, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(37, 99, 235, 0.3);
  color: #2563eb;
  margin: 0 0 1.1rem;
  padding: 0;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease, transform 0.3s ease;
}

.workflow-step-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.4);
  margin-bottom: 0.4rem;
  transition: color 0.3s ease;
}

.workflow-step h4 {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.workflow-step p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.6);
  max-width: 220px;
  margin: 0 auto;
  transition: color 0.3s ease;
}

/* Hover glow */
.workflow-step:hover .workflow-icon {
  border-color: #2563eb;
  background: #eef4ff;
  box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.14), 0 8px 20px rgba(37, 99, 235, 0.25);
  transform: translateY(-2px);
}

/* Active step (clicked / scrolled into view) */
.workflow-step.active .workflow-icon {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.16), 0 0 28px rgba(37, 99, 235, 0.5);
}

.workflow-step.active .workflow-step-label { color: #2563eb; }
.workflow-step.active p { color: rgba(15, 23, 42, 0.8); }

/* ---- Mobile: vertical roadmap ---- */
@media (max-width: 767.98px) {
  .workflow-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .workflow-line {
    width: 2px;
    height: auto;
    /* top/bottom/left are set dynamically by JS on mobile too */
  }

  .workflow-line-progress {
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .workflow-step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.1rem;
    width: 100%;
    padding-bottom: 2.25rem;
  }

  .workflow-step:last-child { padding-bottom: 0; }
  .workflow-icon { margin: 0; flex-shrink: 0; }
  .workflow-step p { max-width: none; margin: 0; }
}

/* =============================================================================
   Team page
   ============================================================================= */
.team-card {
  position: relative;
  width: 100%;
  max-width: var(--team-card-max-width);
  margin: 0 auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(238,243,251,0.46));
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-card);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--glow-violet), 0 8px 28px -8px var(--glow-cyan);
}
.team-card .team-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-200);
}
.team-card .team-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.team-card:hover .team-photo-wrap img { transform: scale(1.05); }
.team-card .team-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0.05) 0%, rgba(15,23,42,0.85) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.85rem;
}
.team-card:hover .team-overlay { opacity: 1; }
.team-overlay .linkedin-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brass-500);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.2s ease;
}
.team-overlay .linkedin-link:hover { transform: scale(1.08); }
.team-info { padding: 1rem 1.1rem 1.25rem; }
.team-info .name { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.15rem; }
.team-info .position { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-600); margin-bottom: 0.5rem; }
.team-info .desc { font-size: 0.85rem; color: var(--slate-600); }


/* =============================================================================
   Contact page
   ============================================================================= */
.contact-info-item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--paper-200);
}
.contact-info-item .icon-badge {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--ink-900);
  color: var(--sky-400);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-control-custom {
  border: 1px solid var(--paper-200);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  background: var(--white);
}
.form-control-custom:focus {
  border-color: var(--brass-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  outline: none;
}
.form-label-custom {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: 0.4rem;
}
.form-status {
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}
.form-status.success { background: rgba(22,163,74,0.1); color: var(--signal-green); border: 1px solid rgba(22,163,74,0.25); }
.form-status.error { background: rgba(220,38,38,0.1); color: var(--signal-red); border: 1px solid rgba(220,38,38,0.25); }



/* =============================================================================
   WhatsApp Toast Notification
   ============================================================================= */

.whatsapp-toast {
  position: fixed;
  top: 95px;
  right: 24px;
  z-index: 9999;

  width: min(380px, calc(100vw - 32px));

  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 16px 18px;

  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 14px;

  box-shadow:
    0 18px 45px rgba(10, 17, 40, 0.18),
    0 4px 12px rgba(10, 17, 40, 0.08);

  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);

  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease;
}

.whatsapp-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* WhatsApp icon */
.toast-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #25D366;
  color: #fff;

  font-size: 21px;

  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.25);
}

/* Toast content */
.toast-body {
  flex: 1;
  padding-right: 10px;
}

.toast-body strong {
  display: block;

  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;

  color: var(--ink-900);

  margin-bottom: 3px;
}

.toast-body p {
  margin: 0 0 8px;

  font-size: 0.82rem;
  line-height: 1.45;

  color: var(--slate-600);
}

/* Start Chat link */
.toast-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 0.82rem;
  font-weight: 600;

  color: #159447 !important;

  transition: gap 0.2s ease, color 0.2s ease;
}

.toast-link:hover {
  color: #0d7135 !important;
  gap: 9px;
}

.toast-link i {
  font-size: 0.7rem;
}

/* Close button */
.toast-close {
  position: absolute;
  top: 8px;
  right: 10px;

  width: 26px;
  height: 26px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border: none;
  background: transparent;

  color: var(--slate-400);
  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.toast-close:hover {
  color: var(--ink-900);
  background: rgba(10, 17, 40, 0.06);
  border-radius: 50%;
}

/* Mobile */
@media (max-width: 575.98px) {
  .whatsapp-toast {
    top: 85px;
    right: 16px;
    width: calc(100vw - 32px);
    padding: 14px 16px;
  }

  .toast-icon {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .toast-body strong {
    font-size: 0.9rem;
  }

  .toast-body p {
    font-size: 0.78rem;
  }
}

/* =============================================================================
   feedbackk Entry Page Styles
   ============================================================================= */

/*
 * Data-entry layout
 * Keeps the heading and form container aligned to the same content width.
 */
.dash-main {
  width: 100%;
  min-width: 0;
}

.dash-main .dash-header {
  width: min(100% - 4rem, 1020px);
  margin: 0 auto;
  padding-top: 2rem;
}

.dash-main .section {
  width: 100%;
}

.dash-main .section .container-custom {
  width: min(100% - 4rem, 1020px);
  margin: 0 auto;
  padding: 0;
}


/* =============================================================================
   Feedback Card
   ============================================================================= */

.data-entry-card {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}


/* =============================================================================
   Data Entry Form
   ============================================================================= */

.data-entry-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.data-entry-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.data-entry-field {
  grid-column: span 12;
}

.data-entry-field.half {
  grid-column: span 6;
}

.data-entry-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: 0.45rem;
}

.data-entry-input,
.data-entry-textarea,
.data-entry-select {
  width: 100%;
  border: 1px solid var(--paper-200);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-family: var(--font-body);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.data-entry-input:focus,
.data-entry-textarea:focus,
.data-entry-select:focus {
  border-color: var(--brass-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  outline: none;
}

.data-entry-textarea {
  min-height: 180px;
  resize: vertical;
}

.data-entry-actions {
  margin-top: 0.25rem;
}

.data-entry-submit {
  background: var(--brass-500);
  border: 1px solid var(--brass-500);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1.4rem;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.data-entry-submit:hover {
  background: var(--brass-600);
  border-color: var(--brass-600);
  color: var(--white);
}


/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 768px) {
  .dash-main .dash-header {
    width: calc(100% - 2rem);
    padding-top: 1.5rem;
  }

  .dash-main .section .container-custom {
    width: calc(100% - 2rem);
  }
}



/* =============================================================================
   Client Portal / Login
   ============================================================================= */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-900);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.16), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(96, 165, 250, 0.10), transparent 45%),
    linear-gradient(180deg, #0B1220 0%, var(--ink-900) 100%);
  padding: 2rem;
}

.auth-container {
  width: 100%;
  max-width: 1040px;
  min-height: 600px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--ink-700);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.55);
}

/* ---- Left panel: illustration + pitch ---- */
.auth-visual {
  position: relative;
  padding: 3rem 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(37, 99, 235, 0.22), transparent 55%),
    linear-gradient(160deg, #101B33 0%, #0B1424 100%);
  border-right: 1px solid var(--ink-700);
}
.auth-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.auth-illustration {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  margin: 0 auto 2rem;
}
.auth-illustration svg { width: 100%; height: 100%; }
.auth-illustration .glow {
  position: absolute;
  inset: 10%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.28), transparent 65%);
  filter: blur(18px);
  z-index: 0;
}
.auth-visual h2 {
  position: relative;
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  max-width: 380px;
}
.auth-visual p {
  position: relative;
  color: rgba(255,255,255,0.6);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 360px;
  margin-bottom: 1.5rem;
}
.auth-feature-list {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.auth-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: rgba(255,255,255,0.75);
  font-size: 0.88rem;
}
.auth-feature-list .check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.20);
  color: var(--sky-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

/* ---- Right panel: login card ---- */
.auth-card {
  width: 100%;
  padding: 3rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  background: rgba(30, 41, 59, 0.35);
}
.auth-card .brand-mark-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  color: var(--white);
}
.auth-card .brand-mark { margin: 0; }
.auth-card .brand-name-inline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}
.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  background: rgba(37, 99, 235, 0.14);
  border: 1px solid rgba(37, 99, 235, 0.35);
  color: var(--sky-400);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1.1rem;
}
.auth-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky-400);
  box-shadow: 0 0 0 3px rgba(56,189,248,0.2);
}
.auth-card h1 {
  color: var(--white);
  font-size: 1.65rem;
  margin-bottom: 0.35rem;
}
.auth-card .sub { color: rgba(255,255,255,0.55); font-size: 0.9rem; margin-bottom: 1.75rem; }
.auth-card label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.4rem;
  display: block;
}
.auth-card input {
  width: 100%;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--ink-700);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-body);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-card input::placeholder { color: rgba(255,255,255,0.32); }
.auth-card input:focus {
  border-color: var(--brass-500);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}

.password-field { position: relative; }
.password-field input { padding-right: 2.75rem; }
.password-toggle {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-70%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.15s ease;
}
.password-toggle:hover { color: rgba(255,255,255,0.8); }
.password-toggle:focus-visible {
  outline: 2px solid var(--sky-400);
  outline-offset: 2px;
  border-radius: 4px;
}

.btn-auth-submit,
button.btn-auth-submit {
  width: 100%;
  border: none !important;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem !important;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--white) !important;
  background: linear-gradient(135deg, var(--brass-500) 0%, #1E3A8A 100%) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 16px -4px rgba(37,99,235,0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-auth-submit:hover {
  background: linear-gradient(135deg, #3B82F6 0%, #3B5FEA 100%) !important;
  color: var(--white) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -6px rgba(37,99,235,0.65);
}
.btn-auth-submit:active {
  background: linear-gradient(135deg, var(--brass-600) 0%, #1E3A8A 100%) !important;
  color: var(--white) !important;
  transform: translateY(0);
  box-shadow: 0 2px 8px -2px rgba(37,99,235,0.5);
}
.btn-auth-submit:focus-visible {
  color: var(--white) !important;
  outline: 2px solid var(--sky-400);
  outline-offset: 2px;
}

.auth-links-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.1rem;
  font-size: 0.85rem;
}
.auth-links-row a {
  color: var(--sky-400) !important;
  transition: color 0.15s ease;
}
.auth-links-row a:hover { color: var(--white) !important; }
.auth-links-row a:last-child { color: rgba(255,255,255,0.5) !important; }
.auth-links-row a:last-child:hover { color: var(--white) !important; }

.auth-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink-700);
  color: rgba(255,255,255,0.4);
  font-size: 0.78rem;
}

.auth-error {
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(220,38,38,0.3);
  color: #FCA5A5;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 860px) {
  .auth-container {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
  .auth-visual { display: none; }
  .auth-card { padding: 2.5rem 2rem; }
}

/* =============================================================================
   Dashboard
   ============================================================================= */
.dash-shell { background: var(--paper-100); min-height: 100vh; }
.dash-sidebar {
  background: var(--ink-900);
  color: var(--white);
  min-height: 100vh;
  padding: 1.75rem 1.25rem;
}
.dash-sidebar .brand-name { font-size: 0.95rem; }
.dash-nav { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.dash-nav a {
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.65);
  font-size: 0.92rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.dash-nav a:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.dash-nav a.active { background: var(--brass-500); color: var(--white); font-weight: 600; }

.dash-main { padding: 2rem 2.25rem; }
.dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.75rem; flex-wrap: wrap; gap: 1rem; }

.metric-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(238,243,251,0.46));
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.6rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.22s ease;
}
.metric-card:hover {
  box-shadow: var(--shadow-card), 0 0 0 1px var(--glow-violet);
}
.metric-card .metric-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-600);
}
.metric-card .metric-value {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 600;
  margin-top: 0.35rem;
}
.metric-card.accent-green .metric-value { color: var(--signal-green); }
.metric-card.accent-red .metric-value { color: var(--signal-red); }
.metric-card.accent-brass .metric-value { color: var(--brass-600); }
.metric-card .metric-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.metric-card.accent-green .metric-bar { background: var(--signal-green); }
.metric-card.accent-red .metric-bar { background: var(--signal-red); }
.metric-card.accent-brass .metric-bar { background: var(--brass-500); }

.chart-panel {
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(238,243,251,0.46));
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.chart-panel h6 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-600);
  margin-bottom: 1rem;
}

/* =============================================================================
   AI Solution — chat interface
   ============================================================================= */
.chat-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2rem);
  max-height: 760px;
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(238,243,251,0.46));
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.chat-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--paper-200);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.chat-header .status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal-green);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.15);
}
.chat-window {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--paper-100);
}
.chat-msg { display: flex; gap: 0.75rem; max-width: 78%; }
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 600; flex-shrink: 0;
}
.chat-msg.bot .avatar { background: var(--ink-900); color: var(--sky-400); }
.chat-msg.user .avatar { background: var(--brass-500); color: var(--white); }
.chat-bubble {
  background: var(--white);
  border: 1px solid var(--paper-200);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
}
.chat-msg.user .chat-bubble { background: var(--ink-900); color: var(--white); border-color: var(--ink-900); }
.chat-timestamp {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--slate-400);
  margin-top: 0.3rem;
  display: block;
}
.chat-msg.user .chat-timestamp { text-align: right; }

.typing-indicator { display: flex; gap: 4px; padding: 0.5rem 0; }
.typing-indicator span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--slate-400);
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-suggestions {
  padding: 0.9rem 1.5rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--paper-200);
}
.chat-suggestion-btn {
  font-size: 0.82rem;
  border: 1px solid var(--paper-200);
  background: var(--white);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  color: var(--slate-600);
  transition: all 0.15s ease;
}
.chat-suggestion-btn:hover { border-color: var(--brass-500); color: var(--brass-600); }

.chat-input-row {
  display: flex;
  gap: 0.75rem;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--paper-200);
}
.chat-input-row input {
  flex: 1;
  border: 1px solid var(--paper-200);
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  font-family: var(--font-body);
}
.chat-input-row input:focus { outline: none; border-color: var(--brass-500); box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
.chat-send-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brass-500);
  color: var(--white);
  border: none;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-send-btn:hover { background: var(--brass-600); }
.chat-send-btn:disabled { opacity: 0.5; }

/* =============================================================================
   "Why Choose Us" section (matches inline style="background:var(--ink-900)")
   Distinct from footer: radial glow + fine grid texture, premium check badges
   ============================================================================= */
  /* "Why Choose Us" section — flat white surface, dark text */
section[style*="ink-900"] {
  position: relative;
  background: var(--paper-100) !important;
  border-top: 1px solid var(--paper-200);
  border-bottom: 1px solid var(--paper-200);
}
section[style*="ink-900"] .container-custom {
  position: relative;
  z-index: 1;
}

ul.list-unstyled,
ul.list-unstyled li {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

section[style*="ink-900"] h1,
section[style*="ink-900"] h2,
section[style*="ink-900"] h3,
section[style*="ink-900"] h4,
section[style*="ink-900"] p,
section[style*="ink-900"] span,
section[style*="ink-900"] li {
  color: var(--ink-900) !important;
}

section[style*="ink-900"] li i.fa-check,
section[style*="ink-900"] li .fa-check,
section[style*="ink-900"] li.d-flex i.text-warning {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  background: linear-gradient(135deg, var(--brass-500), var(--sky-400));
  color: var(--white) !important;
  flex-shrink: 0;
}


/* =============================================================================
   Footer
   ============================================================================= */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #0A0E1C 0%, #050711 100%);
  color: rgba(255,255,255,0.6);
  padding: 5.5rem 0 1.75rem; /* increased top padding to make room for the wave */
  margin-top: 60px; /* space for the wave to sit above the footer content */
}

/* Wavy top edge, replacing the straight 2px accent line */
.site-footer::before {
  content: '';
  position: absolute;
  top: -59px;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,90 480,0 720,30 C960,60 1200,90 1440,40 L1440,100 L0,100 Z' fill='%230A0E1C'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.site-footer h6 {
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a { color: rgba(255,255,255,0.6); }
.site-footer a:hover { color: var(--sky-400); }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* /* =============================================================================
   Blog listing page
   ============================================================================= */
/* ---- Blog accordion ---- */
.blog-accordion { margin-top: 1rem; }
.blog-acc-item { border-bottom: 1px solid var(--paper-200); }
.blog-acc-item:first-child { border-top: 1px solid var(--paper-200); }
.blog-acc-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: none;
  border: none;
  text-align: left;
  padding: 1.25rem 0;
  cursor: pointer;
}
.blog-acc-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--brass-500);
  color: var(--brass-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.blog-acc-item.open .blog-acc-icon {
  transform: rotate(45deg);
  background: var(--brass-500);
  color: var(--white);
}
.blog-acc-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink-900);
}
.blog-acc-panel {
  max-height: 0;
  overflow: hidden;
  padding-left: 3rem;
  transition: max-height 0.4s ease;
}
.blog-acc-item.open .blog-acc-panel {
  max-height: 2000px;
  padding-bottom: 1.5rem;
}
.blog-acc-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: 0.75rem;
}
.blog-acc-panel p {
  color: var(--slate-600);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}



/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    background: var(--ink-900);
    margin-top: 0.5rem;
    padding: 1rem;
    border-radius: var(--radius-sm);
  }
  .dash-sidebar { min-height: auto; }
  .stat-ledger { flex-wrap: wrap; }
  .stat-ledger .stat-item { flex: 1 1 33%; border-bottom: 1px solid var(--ink-700); }
}

@media (max-width: 575.98px) {
  .section { padding: 3.5rem 0; }
  .chat-msg { max-width: 90%; }
}





  
/* =============================================================================
   candidate information 
   ============================================================================= */

.candidate-entry-row {
  display: flex;
  gap: 1rem;
}

.candidate-entry-row .form-group {
  flex: 1;
}

.form-group {
  margin-bottom: 1.25rem;
}

input.form-control-custom,
select.form-control-custom,
textarea.form-control-custom {
  width: 100%;
}

textarea.form-control-custom {
  min-height: 190px;
  resize: vertical;
  line-height: 1.7;
}


/* LinkedIn / GitHub */

.linkedin-input,
.github-input {
  display: flex;
  width: 100%;
}

.linkedin-input span,
.github-input span {
  display: flex;
  align-items: center;
  padding: 0.7rem 0.9rem;
  background: var(--paper-200);
  border: 1px solid var(--paper-200);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: var(--slate-600);
  font-size: 0.9rem;
  white-space: nowrap;
}

.linkedin-input input,
.github-input input {
  flex: 1;
  min-width: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


/* Optional / hint text */

.form-hint {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--slate-400);
  font-size: 0.8rem;
}


/* Status message */

.form-status {
  margin-bottom: 1.25rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.form-status.success {
  background: rgba(22, 163, 74, 0.1);
  border: 1px solid rgba(22, 163, 74, 0.25);
  color: var(--signal-green);
}

.form-status.error {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--signal-red);
}


/* Submit */

.candidate-submit {
  margin-top: 1rem;
}

.candidate-submit button {
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1rem;
  font-family: var(--font-body);
  background: var(--brass-500);
  color: var(--white);
  cursor: pointer;
}

.candidate-submit button:hover {
  opacity: 0.9;
}

/* Mobile */

@media (max-width: 575.98px) {

  .candidate-entry-row {
    flex-direction: column;
    gap: 0;
  }

  .linkedin-input,
  .github-input {
    flex-direction: column;
  }

  .linkedin-input span,
  .github-input span {
    border-right: 1px solid var(--paper-200);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .linkedin-input input,
  .github-input input {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }

}


/* =========================================================
   BLOG ENTRY PAGE
   ========================================================= */

.blog-entry-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

#content {
    min-height: 250px;
    resize: vertical;
}

@media (max-width: 768px) {
    .blog-entry-row {
        grid-template-columns: 1fr;
    }
}



/* =============================================================================
   Blog Admin Entry
   Matches the Candidate Information page layout
   ============================================================================= */

.blog-admin-page {
  width: 100%;
  overflow-x: hidden;
}

/* Fix Bootstrap row negative margins on this page */
.blog-admin-page > .row {
  margin-left: 0;
  margin-right: 0;
}

/* Remove Bootstrap column padding so container spacing controls the layout */
.blog-admin-page > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Keep the content width controlled */
.blog-admin-page .blog-admin-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Heading spacing */
.blog-admin-page .eyebrow {
  margin-bottom: 0.35rem;
}

.blog-admin-page h2 {
  margin-top: 0;
  margin-bottom: 2rem !important;
}

/* Main form card */
.blog-admin-page .card-custom {
  width: 100%;
  padding: 2.5rem;
  box-sizing: border-box;
}

/* Form spacing */
.blog-admin-page .form-group {
  margin-bottom: 1.5rem;
}

/* Date + Department */
.blog-admin-page .blog-entry-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.blog-admin-page .blog-entry-row .form-group {
  flex: 1;
  min-width: 0;
}

/* Inputs */
.blog-admin-page input.form-control-custom,
.blog-admin-page select.form-control-custom,
.blog-admin-page textarea.form-control-custom {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Content area */
.blog-admin-page textarea.form-control-custom {
  min-height: 190px;
  resize: vertical;
  line-height: 1.7;
}

/* Submit button */
.blog-admin-page .btn-brass {
  margin-top: 0.25rem;
}

/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 575.98px) {

  .blog-admin-page {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* Match Candidate page's ~32px side spacing */
  .blog-admin-page .blog-admin-content {
    width: 100%;
  }

  /* Stack Date and Department */
  .blog-admin-page .blog-entry-row {
    flex-direction: column;
    gap: 0;
  }

  .blog-admin-page .blog-entry-row .form-group {
    width: 100%;
  }

  /* Card spacing similar to Candidate Information */
  .blog-admin-page .card-custom {
    padding: 2.5rem 2rem;
  }

  /* Slightly reduce textarea on mobile */
  .blog-admin-page textarea.form-control-custom {
    min-height: 190px;
  }

  /* Prevent button from becoming unnecessarily wide */
  .blog-admin-page .btn-brass {
    width: auto;
  }
}


/* =========================================================
   Very small phones
   ========================================================= */

@media (max-width: 400px) {

  .blog-admin-page .card-custom {
    padding: 2rem 1.5rem;
  }

}

    

/* =============================================================================
   Blog Admin - Mobile Container Spacing
   ============================================================================= */

.blog-admin-page {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

.blog-admin-inner {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

/* Keep heading aligned exactly with the form card */
.blog-admin-inner .eyebrow,
.blog-admin-inner h2 {
    width: 100%;
}

/* Mobile */
@media (max-width: 575.98px) {

    .blog-admin-page {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .blog-admin-inner {
        width: 100%;
    }

}

/* ---------------------------------------- */
     /* candidate_information */

/* ---------------------------------------- */


.candidate-page {
    padding-top: 4rem;
  }

  .candidate-page .candidate-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .candidate-page .candidate-table-card {
    padding: 0;
    overflow: hidden;
  }

  .candidate-page .candidate-table {
    min-width: 760px;
  }

  .candidate-page .candidate-table th,
  .candidate-page .candidate-table td {
    padding: 1rem 1.2rem;
  }

  .candidate-page .candidate-table th {
    white-space: nowrap;
  }

  .candidate-page .candidate-table td {
    vertical-align: middle;
  }

  .candidate-page .candidate-table a {
    color: var(--brass-600);
    font-weight: 500;
  }

  .candidate-page .candidate-table a:hover {
    color: var(--ink-900);
  }

  .candidate-page .candidate-count {
    color: var(--slate-400);
  }

  .candidate-modal-body {
    padding: 1.75rem 2rem 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .candidate-modal-field {
    min-width: 0;
  }

  .candidate-modal-field label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--slate-400);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .candidate-modal-field p {
    margin: 0;
    color: var(--ink-900);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

  .candidate-modal-field--wide {
    grid-column: 1 / -1;
    border-top: 1px solid var(--paper-200);
    padding-top: 1.25rem;
  }

  @media (max-width: 768px) {
    .candidate-page {
      padding-top: 2.5rem;
    }

    .candidate-modal-body {
      grid-template-columns: 1fr;
      padding: 1.5rem;
    }
  }






/* =============================================================================
   OUR SERVICES + OUR PRODUCTS PAGES — additions only.
   Paste this whole block onto the END of style.css. Nothing above needs to
   change — every rule here reuses existing tokens (--ink-900, --brass-500,
   --sky-400, --glass-surface, --glass-border, --glow-violet, --glow-cyan,
   --radius-md, --shadow-card, font vars). Only affects services.php and
   products.php — no other page uses these class names.
   ============================================================================= */

/* ---- Shared hero (used at the top of both pages) ---- */
.products-hero { padding-top: 4rem; }
.products-hero .lede-lg {
  color: var(--slate-600);
  max-width: 680px;
  font-size: 1.05rem;
  margin-top: 1rem;
}
.products-hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin-top: 2.25rem;
}
.products-hero-scroll .line {
  width: 30px;
  height: 1px;
  background: var(--slate-400);
}

/* ---- Card grid (7 service cards / 5 product cards) ---- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-top: 2.5rem;
}
@media (max-width: 767.98px) {
  .offer-grid { grid-template-columns: 1fr; }
}

.offer-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(238,243,251,0.46));
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.offer-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--glow-violet), 0 8px 28px -8px var(--glow-cyan);
}
.offer-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--slate-400);
  margin-bottom: 0.75rem;
}
.offer-card h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.offer-card .offer-desc {
  color: var(--slate-600);
  font-size: 0.93rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.offer-card .offer-note {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--slate-400);
  margin: -0.5rem 0 1.25rem;
}

/* ---- Capability / bullet list used inside each card ---- */
.capability-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.5rem;
}
.capability-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--ink-900);
}
.capability-list li i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brass-500), var(--sky-400));
  color: var(--white);
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Single-column variant used on the Services/Products cards */
.capability-list.list-single {
  grid-template-columns: 1fr;
}
@media (max-width: 575.98px) {
  .capability-list { grid-template-columns: 1fr; }
}

/* ---- "View in detail" style arrow link, reused for the cross-link banner ---- */
.product-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brass-600);
  width: fit-content;
  transition: gap 0.2s ease, color 0.2s ease;
}
.product-detail-link i { transition: transform 0.2s ease; }
.product-detail-link:hover { color: var(--brass-500); gap: 0.75rem; }

/* ---- Bottom banner linking Services <-> Products ---- */
.cross-link-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--paper-200);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  margin-top: 3rem;
}
.cross-link-banner p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-900);
}

/* ---- Final CTA band (dark, glowing) ---- */
.products-final-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0B1220 0%, var(--ink-900) 100%);
  border-radius: var(--radius-md);
  padding: 4rem 2rem;
  text-align: center;
}
.products-final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.25), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.18), transparent 45%);
}
.products-final-cta > * { position: relative; z-index: 1; }
.products-final-cta h2 { color: var(--white); }
.products-final-cta p { color: rgba(255, 255, 255, 0.7); max-width: 520px; margin: 0 auto 2rem; }


/* =============================================================================
   LIQUID CLASS SPATIAL — FINAL VISUAL OVERRIDE LAYER
   ---------------------------------------------------------------------------
   Visual-only theme layer. Existing class names, HTML structure, JS hooks,
   forms, tables, modals and responsive behavior are intentionally preserved.
   ============================================================================= */

:root {
  --liquid-bg: #EEF3FB;
  --liquid-surface: rgba(255,255,255,0.58);
  --liquid-surface-strong: rgba(255,255,255,0.76);
  --liquid-border: rgba(29,78,216,0.18);
  --liquid-border-soft: rgba(10,17,40,0.08);
  --liquid-teal: #2563EB;
  --liquid-teal-deep: #1D4ED8;
  --liquid-aqua: #60A5FA;
  --liquid-ink: #0A1128;
  --liquid-muted: #4A5C78;
  --liquid-shadow: 0 24px 70px -34px rgba(10,17,40,0.40);
  --liquid-glow: 0 0 45px rgba(37,99,235,0.16);
}

::selection {
  background: rgba(37,99,235,0.22);
  color: var(--liquid-ink);
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 28%, rgba(96,165,250,0.12), transparent 22%),
    radial-gradient(circle at 82% 64%, rgba(37,99,235,0.10), transparent 24%);
  filter: blur(55px);
  animation: liquidDrift 18s ease-in-out infinite alternate;
}

@keyframes liquidDrift {
  from { transform: translate3d(-1%, -1%, 0) scale(1); }
  to   { transform: translate3d(1%, 1%, 0) scale(1.04); }
}

.brand-mark {
  border-radius: 14px !important;
  background: linear-gradient(145deg, var(--liquid-aqua), var(--liquid-teal-deep)) !important;
  box-shadow: 0 0 0 1px rgba(96,165,250,0.25), 0 10px 28px -12px rgba(37,99,235,0.70) !important;
}

.hero::before {
   display: none !important;
}

.hero-content h1 {
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

.hero-ctas .btn,
.btn-brass,
.btn-outline-light-custom {
  border-radius: 999px !important;
}

.btn-brass {
  background: linear-gradient(135deg, var(--liquid-teal), var(--liquid-teal-deep)) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 32px -18px rgba(37,99,235,0.85);
}

.btn-brass:hover {
  background: linear-gradient(135deg, #3B82F6, var(--liquid-teal-deep)) !important;
  transform: translateY(-2px);
}

.btn-outline-light-custom:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.75) !important;
}

.card-custom,
.value-card,
.team-card,
.offer-card,
.metric-card,
.data-entry-card,
.lead-modal,
.msg-modal {
  border: 1px solid var(--liquid-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--liquid-shadow), var(--liquid-glow) !important;
}

.card-custom::after,
.value-card::after,
.offer-card::after,
.metric-card::after,
.team-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.24), transparent 38%);
}

.value-card::before {
  height: 3px !important;
  background: linear-gradient(90deg, var(--liquid-aqua), var(--liquid-teal), transparent) !important;
}

.value-card:hover,
.offer-card:hover,
.team-card:hover {
  transform: translateY(-7px) !important;
  border-color: rgba(37,99,235,0.34) !important;
  box-shadow: 0 30px 80px -34px rgba(10,17,40,0.44), 0 0 45px rgba(37,99,235,0.14) !important;
}

.value-card .icon-badge,
.contact-info-item .icon-badge {
  border-radius: 16px !important;
  background: linear-gradient(145deg, var(--liquid-ink), var(--liquid-teal-deep)) !important;
  box-shadow: 0 12px 28px -16px rgba(37,99,235,0.8);
}

.expand-tab {
  border-radius: 24px !important;
}

.expand-tab::before {
  background: linear-gradient(180deg, rgba(10,17,40,0.38), rgba(10,17,40,0.82)) !important;
}

.expand-tab.active::before {
  background: linear-gradient(90deg, rgba(10,17,40,0.78), rgba(10,17,40,0.42), rgba(10,17,40,0.12)) !important;
}

.form-control-custom,
.data-entry-input,
.data-entry-textarea,
.data-entry-select {
  border: 1px solid var(--liquid-border-soft) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,0.70) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.form-control-custom:focus,
.data-entry-input:focus,
.data-entry-textarea:focus,
.data-entry-select:focus {
  border-color: rgba(37,99,235,0.55) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.11), 0 8px 24px -18px rgba(37,99,235,0.45) !important;
}

.data-entry-submit {
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--liquid-teal), var(--liquid-teal-deep)) !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px -18px rgba(37,99,235,0.8);
}

.cross-link-banner {
  background: rgba(255,255,255,0.52) !important;
  border: 1px solid var(--liquid-border) !important;
  border-radius: 22px !important;
  backdrop-filter: blur(20px) saturate(130%);
}

.products-final-cta {
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(96,165,250,0.18), transparent 35%),
    radial-gradient(circle at 82% 78%, rgba(37,99,235,0.18), transparent 40%),
    linear-gradient(145deg, #0A1128, #0D2A4D) !important;
  box-shadow: 0 30px 90px -45px rgba(37,99,235,0.55);
}

.whatsapp-toast {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(37,99,235,0.20) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
}

.filter-bar {
  background: rgba(220,230,245,0.70) !important;
  border-radius: 999px !important;
}

.filter-btn {
  border-radius: 999px !important;
}

.filter-btn.active {
  border-radius: 999px !important;
  box-shadow: 0 5px 18px -12px rgba(10,17,40,0.35) !important;
}

.view-btn {
  border-radius: 999px !important;
  border-color: var(--liquid-border-soft) !important;
}

.auth-shell {
  background:
    radial-gradient(circle at 12% 18%, rgba(96,165,250,0.18), transparent 36%),
    radial-gradient(circle at 88% 78%, rgba(37,99,235,0.15), transparent 38%),
    #0A1128 !important;
}

.auth-container {
  border-radius: 30px !important;
  border-color: rgba(96,165,250,0.14) !important;
  background: rgba(13,29,61,0.56) !important;
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  box-shadow: 0 40px 100px -38px rgba(0,0,0,0.72), 0 0 70px rgba(37,99,235,0.10) !important;
}

.auth-visual {
  background:
    radial-gradient(circle at 30% 18%, rgba(96,165,250,0.20), transparent 48%),
    linear-gradient(145deg, #0C2547, #0A1128) !important;
}

.auth-card {
  background: rgba(13,29,61,0.38) !important;
}

.auth-badge {
  border-radius: 999px !important;
  background: rgba(37,99,235,0.12) !important;
  border-color: rgba(96,165,250,0.28) !important;
  color: var(--liquid-aqua) !important;
}

.dash-shell {
  background:
    radial-gradient(circle at 10% 5%, rgba(96,165,250,0.10), transparent 28%),
    radial-gradient(circle at 90% 80%, rgba(37,99,235,0.08), transparent 28%),
    var(--paper-100) !important;
}

.dash-sidebar {
  background:
    radial-gradient(circle at 30% 15%, rgba(96,165,250,0.10), transparent 30%),
    linear-gradient(160deg, #0A1128, #0B2A4A) !important;
}

.dash-nav a {
  border-radius: 14px !important;
}

.dash-nav a.active {
  background: linear-gradient(135deg, var(--liquid-teal), var(--liquid-teal-deep)) !important;
  box-shadow: 0 12px 28px -18px rgba(37,99,235,0.75);
}

@media (max-width: 768px) {
  .container-custom {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .card-custom,
  .value-card,
  .offer-card,
  .data-entry-card {
    border-radius: 18px !important;
  }

  .hero-content h1 {
    letter-spacing: -0.035em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
}

/* =============================================================================
   HEADER + FOOTER OVERRIDE
   ============================================================================= */

:root {
  --nav-pill-max-width: 980px;
  --nav-pill-radius: 999px;
  --footer-radius: 32px;
}

/* ---- Header: transparent bar containing a floating light pill nav ----
   Fixed and overlapping the content below it (like Zorcha) instead of
   sitting in normal document flow — this removes the visible background
   "strip" that showed through the header's own padding area. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  height: auto;
  padding: 1.25rem 1.5rem 0;
  z-index: 1000;
}
.site-header.is-scrolled { box-shadow: none !important; }

/* Homepage: hero already fills the viewport from y=0, so the fixed
   transparent header floats directly on top of it — no extra spacing. */
body.has-floating-hero { padding-top: 0; }

/* Every other page has no hero image behind the header, so push its
   first section down far enough that the floating pill doesn't cover it. */
body.has-floating-header { padding-top: 108px; }
@media (max-width: 575.98px) {
  body.has-floating-header { padding-top: 92px; }
}

.site-header .navbar {
  max-width: var(--nav-pill-max-width);
  margin: 0 auto;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--nav-pill-radius);
  padding: 0.55rem 0.6rem 0.55rem 1.5rem;
  box-shadow: 0 14px 40px -14px rgba(10,17,40,0.28), 0 2px 10px -4px rgba(37,99,235,0.18);
  height: auto;
}

.site-header .brand-name { color: var(--ink-900) !important; }
.site-header .brand-mark { width: 30px; height: 30px; font-size: 0.85rem; }

.site-header .nav-link-custom,
.site-header a.nav-link-custom {
  color: var(--ink-900) !important;
  font-weight: 500;
}
.site-header .nav-link-custom:hover,
.site-header a.nav-link-custom:hover {
  background: rgba(37,99,235,0.08);
  color: var(--brass-600) !important;
}
.site-header .nav-link-custom::after { display: none; }
.site-header .navbar-toggler { color: var(--ink-900); }
.site-header .navbar-toggler i { color: var(--ink-900); }

.site-header .btn-portal.nav-cta {
  background: var(--ink-900) !important;
  border-radius: var(--nav-pill-radius) !important;
  padding: 0.55rem 1.3rem !important;
  margin-left: 0;
  box-shadow: none;
}
.site-header .btn-portal.nav-cta:hover {
  background: var(--brass-500) !important;
  transform: translateY(-1px);
}

@media (max-width: 991.98px) {
  /* Reduce the outer pill's radius on mobile so it doesn't balloon into
     a circle when the collapse menu expands the box's height. */
  .site-header .navbar {
    border-radius: 28px;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 0.75rem 1rem;
  }
  .site-header .navbar-brand {
    padding: 0.35rem 0;
  }
  .site-header .navbar-toggler {
    margin-top: 0.35rem;
  }
  /* Dropdown content sits inside the same card — no second nested
     white box, no independent border-radius/shadow of its own. */
  .site-header .navbar-collapse {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.5rem 0 0.25rem;
    border-top: 1px solid var(--paper-200);
  }
  .site-header .navbar-nav {
    gap: 0.15rem;
  }
  .site-header .nav-link-custom,
  .site-header a.nav-link-custom {
    padding: 0.6rem 0.25rem !important;
  }
  .site-header .btn-portal.nav-cta {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
  }
}

/* ---- Footer: light, rounded card matching header pill width (Zorcha style) ---- */
.site-footer {
  max-width: var(--nav-pill-max-width);
  margin: 80px auto 0;
  background: var(--paper-100) !important;
  color: var(--slate-600) !important;
  border-radius: var(--footer-radius);
  padding: 4rem 3rem 0;
  box-shadow: 0 24px 60px -34px rgba(10,17,40,0.18);
}

.site-footer .container-custom {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.site-footer::before { display: none !important; } /* remove old wave graphic */

.site-footer h6 { color: var(--ink-900) !important; }
.site-footer p,
.site-footer li,
.site-footer .footer-bottom span { color: var(--slate-600) !important; }
.site-footer a { color: var(--slate-600) !important; }
.site-footer a:hover { color: var(--brass-600) !important; }

.site-footer .brand-mark {
  background: linear-gradient(135deg, var(--brass-500), var(--sky-400));
  color: #fff;
}

.site-footer .brand-name {
  color: var(--ink-900) !important;
}

.site-footer .fa-location-dot,
.site-footer .fa-phone,
.site-footer .fa-envelope { color: var(--brass-500); }

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink-900);
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.2s ease, background 0.2s ease;
}
.footer-social a:hover {
  background: var(--brass-500);
  transform: translateY(-2px);
}

/* ---- Footer column headings: accordion toggle on mobile, static label on desktop ---- */
.footer-toggle {
  background: none;
  border: none;
  padding: 0;
  width: 100%;
  text-align: left;
  color: var(--ink-900) !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: default;
}

.footer-toggle-icon {
  display: none;
}

.footer-collapse li {
  margin-bottom: 0.5rem;
}
.footer-collapse li:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .footer-collapse {
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem;
    height: auto !important;
  }
  .footer-collapse li {
    margin-bottom: 0;
  }
}

@media (max-width: 767.98px) {
  .footer-toggle {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--paper-200);
  }

  .footer-toggle-icon {
    display: inline-block;
    font-size: 0.75rem;
    transition: transform 0.25s ease;
  }

  .footer-toggle[aria-expanded="true"] .footer-toggle-icon {
    transform: rotate(180deg);
  }

  .footer-col {
    text-align: left;
  }

  .footer-collapse {
    padding: 0.75rem 0 0.5rem;
  }

  .footer-collapse li {
    text-align: left;
  }
}

/* ---- Footer Bottom: separate strip below the card, aligned to same width/edges ---- */
.footer-bottom-wrap {
  width: 100%;
  background: transparent;
}

.footer-bottom {
  max-width: var(--nav-pill-max-width);
  margin: 0 auto;
  padding: 1.5rem 3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-bottom > span:first-child {
  flex: 1;
  text-align: left;
}

.footer-legal-links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.footer-legal-links a {
  color: var(--slate-600) !important;
  font-size: 0.9rem;
}

.footer-legal-links a:hover {
  color: var(--brass-600) !important;
}

.footer-bottom > span:last-child {
  flex: 1;
  text-align: right;
}

/* ---- Footer: mobile responsive (stack + center, like Zorcha reference) ---- */
@media (max-width: 767.98px) {
  .site-footer {
    padding: 3rem 1.5rem 0;
    border-radius: 24px;
  }

  .site-footer .container-custom {
    padding-left: 0;
    padding-right: 0;
  }

  .site-footer .row {
    text-align: center;
  }

  .site-footer .brand {
    justify-content: center;
  }

  .site-footer p {
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .footer-social {
    justify-content: center;
  }

  .site-footer .col-6 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
    gap: 1.25rem;
  }

  .footer-bottom > span:first-child,
  .footer-bottom > span:last-child {
    flex: none;
    text-align: center;
    width: 100%;
  }

  .footer-legal-links {
    flex: none;
    width: 100%;
    justify-content: center;
    gap: 2rem;
  }
}

/* ============================================================
   OCKTOVA — growth-card.css
   Styles for the animated growth-graph About card.
   Save to: /assets/css/growth-card.css
   ============================================================ */

#about{
  /* ---- tweak these three to match your exact site palette ---- */
  --oct-blue:        #1657FF;
  --oct-blue-dark:   #0B3FCB;
  --oct-blue-soft:   #EAF0FF;

  --oct-ink:         #101828;
  --oct-muted:       #667085;
  padding-block: clamp(48px, 8vw, 96px);
}

#about .growth-card{
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--oct-blue-soft) 140%);
  border: 1.5px solid var(--oct-blue);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
}

@media (max-width: 900px){
  #about .growth-card{
    grid-template-columns: 1fr;
  }
}

/* ---------- left column ---------- */
#about .growth-card__content{ position: relative; z-index: 2; }

#about .eyebrow{
  color: var(--oct-blue);
}
#about .eyebrow::before{
  background: var(--oct-blue) !important;
}

#about .growth-card__content h2{
  color: var(--oct-ink);
  font-weight: 700;
  line-height: 1.15;
}

#about .growth-card__content p{
  color: var(--oct-muted);
}

#about .growth-card__content .btn-outline-dark{
  border-color: var(--oct-ink);
  color: var(--oct-ink);
  border-radius: 999px;
  padding-inline: 22px;
}
#about .growth-card__content .btn-outline-dark:hover{
  background: var(--oct-blue);
  border-color: var(--oct-blue);
  color: #fff;
}

/* stat row: flex-column with a fixed baseline so 10+ / 01 / 99.9% never drift */
#about .stat-stack{
  display: flex;
  gap: clamp(20px, 4vw, 44px);
  margin-top: 32px !important;
  flex-wrap: wrap;
}
#about .stat-row{
  display: flex;
  flex-direction: column;
  min-width: 90px;
  padding: 0 !important;        /* cancel the old shared .stat-row's 1.4rem 0 */
  border-bottom: none !important; /* cancel the old shared .stat-row's divider line */
}
#about .stat-num{
  font-family: var(--font-display, inherit);
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 700;
  line-height: 1.1;
  color: var(--oct-ink);
  font-variant-numeric: tabular-nums;
  margin: 0 !important;
}
#about .stat-desc{
  color: var(--oct-muted);
  font-size: 14px;
  line-height: 1.3;
  margin-top: 4px;
}

/* ---------- right column: chart ---------- */
#about .growth-card__chart{
  position: relative;
  width: 100%;
  aspect-ratio: 700 / 420;
  z-index: 1;
}
#about .growth-card__chart svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

#about .oct-line{
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.9s cubic-bezier(.65,0,.35,1);
}
#about .oct-line--before{
  stroke: #C9D2E3;
  transition-delay: 0s;
}
#about .oct-line--after{
  stroke: url(#octAfterGradient);
  transition-delay: .6s;
}

/* comet that travels the after-line once it's drawn */
#about .oct-comet{
  fill: #ffffff;
  stroke: var(--oct-blue);
  stroke-width: 3;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(59,107,255,.7));
}
#about .oct-comet.is-running{ opacity: 1; }

/* divider — plain HTML element, aligned via % so it always matches the svg viewBox */
#about .oct-divider{
  position: absolute;
  left: 47.14%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1.5px dashed #C9D2E3;
  opacity: 0;
  transition: opacity .6s ease .5s;
}

/* logo + label marker */
#about .oct-marker{
  position: absolute;
  left: 47.14%;
  top: 52%;
  transform: translate(-50%, -50%) scale(.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .55s cubic-bezier(.34,1.56,.64,1) 1.4s,
              transform .55s cubic-bezier(.34,1.56,.64,1) 1.4s;
}
#about .oct-logo-link{
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 6px 16px -4px rgba(22,87,255,.45);
  background: #fff;
  animation: octPulse 2.6s ease-in-out infinite;
  animation-play-state: paused;
}
#about .growth-card.is-visible .oct-logo-link{ animation-play-state: running; }
#about .oct-logo-mark{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#about .oct-marker-label{
  font-size: 13px;
  font-weight: 600;
  color: var(--oct-ink);
  white-space: nowrap;
}

@keyframes octPulse{
  0%, 100%{ box-shadow: 0 6px 16px -4px rgba(22,87,255,.45); }
  50%{ box-shadow: 0 6px 22px -2px rgba(22,87,255,.75); }
}

/* triggered by IntersectionObserver in growth-card.js */
#about .growth-card.is-visible .oct-line{ stroke-dashoffset: 0; }
#about .growth-card.is-visible .oct-divider{ opacity: 1; }
#about .growth-card.is-visible .oct-marker{ opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (max-width: 900px){
  #about .growth-card__chart{ order: 2; max-width: 560px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce){
  #about .oct-line{ transition: none; stroke-dashoffset: 0; }
  #about .oct-divider, #about .oct-marker{ transition: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }
  #about .oct-logo-link{ animation: none; }
}