/* ==========================================================================
   ResilQ — Global Stylesheet
   Dark cyberpunk · quantum / cyber · sovereign
   --------------------------------------------------------------------------
   Fonts: Fraunces (display, variable), IBM Plex Sans (body), IBM Plex Mono (code/eyebrow)
   --------------------------------------------------------------------------
   Sections:
     · Reset & base
     · Tokens (CSS custom properties)
     · Typography
     · Layout primitives
     · Header / nav
     · Footer
     · Components: eyebrow, button, card, badge, stat, grid, table
     · Specific blocks: hero, two-column, feature-grid, code-block, gauge, timeline
     · Page-specific overrides
     · Animations & motion
     · Responsive
   ========================================================================== */

/* -------------------------------------------------------------------------
   Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: var(--cyan-bright); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--white); }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

/* -------------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Color — refined warm charcoal + soft mint palette */
  --bg-base:      #0E1113;   /* default page background — warm charcoal */
  --bg-elevated:  #161A1D;   /* raised surfaces, dropdowns */
  --bg-card:      #121518;   /* card surface */
  --bg-deep:      #07090B;   /* deepest background */

  --cyan:         #7FE3D4;   /* primary accent — soft mint */
  --cyan-bright:  #A8F0E2;   /* hovers, highlighted text, links */
  --cyan-deep:    #4FB8A8;   /* pressed / strokes on light surfaces */

  --amber:        #E8B26B;   /* warm honey — alert / featured */
  --violet:       #A89FD9;   /* desaturated lavender — rare tertiary */
  --red:          #E07A6E;   /* terracotta — critical findings */
  --green:        #7FCBA3;   /* sage — success / pass */

  --white:        #F4F6F5;   /* slightly off-white */
  --text:         #C8CDCE;   /* body text */
  --muted:        #7A8285;   /* secondary text, captions */
  --rule:         #1F2528;   /* hairline dividers */
  --rule-strong:  #2C3437;

  /* Typography */
  --font-display: 'Fraunces', 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', 'Menlo', monospace;

  /* Spacing scale */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-pad: clamp(20px, 4vw, 48px);

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* -------------------------------------------------------------------------
   Background atmosphere — subtle quantum-lattice grid + noise
   ------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.35;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.85), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.85), transparent 70%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 0%, rgba(127, 227, 212, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(168, 159, 217, 0.04), transparent 60%);
  pointer-events: none;
}
main, header, footer { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--white);
}
h1, .h1 { font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.025em; line-height: 1.04; color: var(--white);
  font-size: clamp(40px, 6.5vw, 88px); }
h2, .h2 { font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 96, "SOFT" 50;
  letter-spacing: -0.02em; line-height: 1.08; color: var(--white);
  font-size: clamp(28px, 4vw, 52px); }
h3, .h3 { font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 36, "SOFT" 30;
  letter-spacing: -0.01em; line-height: 1.15; color: var(--white);
  font-size: clamp(22px, 2.4vw, 32px); }
h4, .h4 { font-family: var(--font-sans); font-weight: 600;
  letter-spacing: -0.005em; line-height: 1.25; color: var(--white);
  font-size: 18px; }
p { color: var(--text); }
.lede {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  color: var(--text);
  font-style: italic;
}
.muted { color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }
em.accent { font-style: italic; color: var(--amber); }

/* -------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--container-pad); }
.section { padding: clamp(64px, 10vw, 128px) 0; }
.section-tight { padding: clamp(48px, 7vw, 80px) 0; }
.divider { height: 1px; background: var(--rule); border: 0; }

.flow > * + * { margin-top: var(--flow-space, 1em); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
.stack-7 > * + * { margin-top: var(--s-7); }

/* -------------------------------------------------------------------------
   Site header / nav
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14, 17, 19, 0.78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 72px;
  display: flex;
  align-items: center;
  gap: var(--s-7);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--white);
}
.brand__q { color: var(--cyan); }
.brand__chip {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--cyan-bright);
  border: 1px solid var(--rule-strong);
  padding: 3px 8px;
  border-radius: 999px;
  margin-left: var(--s-3);
  text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: var(--s-5); margin-left: auto; }
.nav__group { position: relative; }
.nav__link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--white); border-bottom-color: var(--cyan); }
.nav__caret { width: 8px; height: 8px; opacity: .5; }
.nav__menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: none;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu { display: block; }
.nav__menu-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}
.nav__menu-item small {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.nav__menu-item:hover { background: var(--bg-card); color: var(--white); }
.nav-cta { margin-left: var(--s-2); }

/* mobile burger placeholder */
.nav-burger { display: none; margin-left: auto; color: var(--text); font-size: 22px; padding: 8px; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--s-9);
  border-top: 1px solid var(--rule);
  background: var(--bg-deep);
  color: var(--muted);
  padding: var(--s-8) 0 var(--s-6);
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-7);
  margin-bottom: var(--s-7);
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  margin-bottom: var(--s-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--text); }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.footer-bottom .brand { font-size: 16px; }

/* -------------------------------------------------------------------------
   Components
   ------------------------------------------------------------------------- */

/* Eyebrow */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan-bright);
}
.eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--cyan);
}
.eyebrow--amber { color: var(--amber); }
.eyebrow--amber::before { background: var(--amber); }
.eyebrow--violet { color: var(--violet); }
.eyebrow--violet::before { background: var(--violet); }

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--text);
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.btn:hover { color: var(--white); border-color: var(--cyan); background: rgba(127, 227, 212, 0.08); }
.btn--primary {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--bg-base);
}
.btn--primary:hover { background: var(--cyan); border-color: var(--cyan); color: var(--bg-base); }
.btn--ghost { border-color: transparent; }
.btn .arrow { display: inline-block; transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: var(--s-6);
  position: relative;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--rule-strong); }
.card--accent { padding-top: calc(var(--s-6) + 6px); }
.card--accent::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--cyan));
}
.card--side {
  padding-left: calc(var(--s-6) + 6px);
}
.card--side::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--accent, var(--cyan));
}
.card--linked { display: block; color: var(--text); }
.card--linked:hover { color: var(--text); transform: translateY(-2px); border-color: var(--cyan); }
.card__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, var(--cyan));
  margin-bottom: var(--s-3);
}
.card h3 { margin-bottom: var(--s-3); }
.card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent, var(--cyan));
  color: var(--accent, var(--cyan));
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: var(--s-4);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--muted);
}
.badge--cyan { color: var(--cyan-bright); border-color: var(--cyan); }
.badge--amber { color: var(--amber); border-color: var(--amber); }
.badge--violet { color: var(--violet); border-color: var(--violet); }
.badge--green { color: var(--green); border-color: var(--green); }
.badge--red { color: var(--red); border-color: var(--red); }

/* Stat callout */
.stat { padding: var(--s-5) 0; }
.stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.95;
  color: var(--white);
  letter-spacing: -0.025em;
}
.stat__num--amber { color: var(--amber); }
.stat__num--cyan { color: var(--cyan-bright); }
.stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--s-3);
}
.stat__sub { font-size: 14px; color: var(--text); margin-top: var(--s-2); }

/* Grid utilities */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-asym { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-7); align-items: start; }
.grid-asym--rev { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-7); align-items: start; }

/* Code block */
.code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  padding: var(--s-5);
  color: var(--cyan-bright);
  overflow-x: auto;
  white-space: pre;
}
.code .c { color: var(--muted); }      /* comment */
.code .k { color: var(--amber); }      /* keyword */
.code .s { color: var(--green); }      /* string */
.code .n { color: var(--text); }       /* normal */

/* Inline tag list */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  color: var(--text);
  background: var(--bg-card);
}

/* Bullet list */
.bullet-list { display: flex; flex-direction: column; gap: var(--s-3); }
.bullet-list li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  background: var(--accent, var(--cyan));
}
.bullet-list--cyan { --accent: var(--cyan); }
.bullet-list--amber { --accent: var(--amber); }
.bullet-list--violet { --accent: var(--violet); }

/* Compliance list (label + value) */
.compliance-list dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  margin-top: var(--s-4);
}
.compliance-list dd { color: var(--text); }

/* -------------------------------------------------------------------------
   Specific blocks
   ------------------------------------------------------------------------- */

/* Hero */
.hero { padding: clamp(60px, 8vw, 96px) 0 clamp(48px, 6vw, 80px); position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s-7); align-items: center; }
.hero h1 { margin: var(--s-5) 0 var(--s-5); }
.hero .lede { max-width: 36ch; margin-bottom: var(--s-6); }
.hero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Page header (subpages) */
.page-header { padding: clamp(64px, 8vw, 112px) 0 clamp(40px, 5vw, 64px); }
.page-header h1 { margin: var(--s-5) 0 var(--s-5); }
.page-header .lede { max-width: 60ch; }

/* Two-column block */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; }

/* Process / step list */
.steps { display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__num {
  counter-increment: step;
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 30;
  font-size: 44px;
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
.step h4 { margin-bottom: var(--s-2); }

/* Compare table */
.compare-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare-table thead th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  text-align: left;
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--rule-strong);
}
.compare-table tbody td {
  padding: var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  vertical-align: top;
}
.compare-table tbody td:first-child { color: var(--white); font-weight: 500; }
.compare-table .check { color: var(--green); font-family: var(--font-mono); }
.compare-table .dash { color: var(--muted); font-family: var(--font-mono); }

/* Pricing card */
.tier {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: var(--s-6);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.tier::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--cyan));
}
.tier--featured { background: var(--bg-elevated); border-color: var(--amber); }
.tier__ribbon {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber);
  color: var(--bg-base);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  padding: 5px 12px;
  white-space: nowrap;
}
.tier__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, var(--cyan));
}
.tier__tagline { color: var(--muted); font-style: italic; font-size: 14px; }
.tier__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  font-size: 44px;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tier__period {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
}
.tier__assets {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent, var(--cyan));
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: var(--s-2) 0;
}
.tier__features { display: flex; flex-direction: column; gap: 10px; }
.tier__features li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--text);
}
.tier__features li::before {
  content: "■";
  position: absolute; left: 0; top: 0;
  color: var(--accent, var(--cyan));
  font-size: 10px;
}

/* Q-Day timeline */
.qd-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  margin: var(--s-7) 0;
}
.qd-timeline::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--rule-strong);
  z-index: 0;
}
.qd-step { position: relative; text-align: center; padding: 0 var(--s-3); }
.qd-step__dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent, var(--cyan));
  border: 4px solid var(--bg-base);
  margin: 16px auto 0;
  position: relative;
  z-index: 1;
}
.qd-step__year {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--accent, var(--cyan));
  margin-top: var(--s-3);
}
.qd-step__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--white);
  margin-top: 4px;
}
.qd-step__desc { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* Team card */
.team-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  overflow: hidden;
}
.team-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent, var(--cyan));
  opacity: 0.9;
}
.team-card__avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-deep));
  border: 2px solid var(--accent, var(--cyan));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--accent, var(--cyan));
  letter-spacing: -0.02em;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.team-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Subtle teal duotone tint to match the brand palette while keeping the
     photographs (which we receive in B&W) cohesive with the dark UI */
  filter: contrast(1.05) brightness(0.96);
  mix-blend-mode: luminosity;
}
.team-card__avatar::after {
  /* Faint mint glow over the photo to bind it to the cyberpunk palette */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(127, 227, 212, 0.10), transparent 60%),
    linear-gradient(180deg, transparent 60%, rgba(14, 17, 19, 0.40) 100%);
  pointer-events: none;
}
.team-card--amber  { --accent: var(--amber); }
.team-card--violet { --accent: var(--violet); }
.team-card--green  { --accent: var(--green); }
.team-card__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, var(--cyan));
}
.team-card h3 { font-size: 22px; margin-top: 4px; }
.team-card__bio { font-size: 14px; color: var(--text); line-height: 1.6; }
.team-card__tags { margin-top: auto; padding-top: var(--s-3); }
.team-card__links {
  display: flex; gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  margin-top: var(--s-3);
}

/* CTA banner */
.cta-banner {
  background: var(--bg-elevated);
  border: 1px solid var(--amber);
  padding: var(--s-7);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.cta-banner h2 { margin-bottom: var(--s-3); }

/* Browser-window mockup — wraps a screenshot to read as a UI surface */
.browser-mockup {
  background: var(--bg-elevated);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
.browser-mockup__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--rule-strong);
}
.browser-mockup__dots {
  display: flex;
  gap: 6px;
}
.browser-mockup__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule-strong);
}
.browser-mockup__dots span:nth-child(1) { background: var(--red); }
.browser-mockup__dots span:nth-child(2) { background: var(--amber); }
.browser-mockup__dots span:nth-child(3) { background: var(--green); }
.browser-mockup__url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding: 4px 10px;
  background: var(--bg-base);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-mockup__body { display: block; }
.browser-mockup__body img { display: block; width: 100%; height: auto; }

/* Industry chip strip */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  background: var(--bg-card);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text);
}

/* -------------------------------------------------------------------------
   Animations
   ------------------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.fadeUp { animation: fadeUp .8s var(--ease) both; }
.fadeUp.d1 { animation-delay: 0.1s; }
.fadeUp.d2 { animation-delay: 0.2s; }
.fadeUp.d3 { animation-delay: 0.3s; }
.fadeUp.d4 { animation-delay: 0.4s; }
.fadeUp.d5 { animation-delay: 0.5s; }

@keyframes slowSpin { to { transform: rotate(360deg); } }
.spin-slow { animation: slowSpin 80s linear infinite; transform-origin: center; }

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.pulse { animation: pulse 2.4s var(--ease) infinite; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__grid, .grid-asym, .grid-asym--rev, .two-col, .cta-banner { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}
@media (max-width: 768px) {
  .nav { display: none; }
  .nav-burger { display: inline-flex; align-items: center; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .qd-timeline { grid-template-columns: 1fr; gap: var(--s-4); }
  .qd-timeline::before { display: none; }
  .qd-step { display: grid; grid-template-columns: 30px 1fr; text-align: left; gap: var(--s-3); align-items: center; }
  .qd-step__dot { margin: 0; }
  .qd-step__year, .qd-step__label, .qd-step__desc { grid-column: 2; }
  .footer-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 48px 1fr; }
  .step__num { font-size: 32px; }
}

/* Print styles — keep palette intact, just remove blur */
@media print {
  body::before, body::after { display: none; }
  .site-header, .site-footer { display: none; }
}