/* =========================================================================
   Firmify.ai shared design system
   Dark navy ground, purple/cyan ambient glow, gradient accents.
   Load order: tokens/background -> typography -> layout -> primitives ->
   nav/footer -> stats/band -> motion utilities -> responsive.
   ========================================================================= */

/* ---------- 1. Design tokens + background (exact, per brief) ---------- */
:root{
  --bg:#0a0f1e; --surface:#0f172a; --surface2:#131c33;
  --border:rgba(148,163,184,.14); --text:#e2e8f0; --muted:#94a3b8;
  --purple:#8b5cf6; --cyan:#06b6d4; --emerald:#10b981;
  --grad:linear-gradient(90deg,var(--purple),var(--cyan));
  --font-d:'Lexend',system-ui,sans-serif; --font-b:'Inter',system-ui,sans-serif;
  --font-m:'IBM Plex Mono',ui-monospace,monospace;
  --radius:14px; --container:1120px;
}
body{
  margin:0; color:var(--text); font-family:var(--font-b);
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(1000px 700px at 105% 38%, rgba(6,182,212,.12), transparent 60%),
    radial-gradient(900px 600px at 50% 115%, rgba(139,92,246,.07), transparent 60%),
    var(--bg);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--purple);color:#fff;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;}

/* ---------- 3. Typography ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-d);color:var(--text);margin:0 0 .6em;line-height:1.15;letter-spacing:-.015em;
}
h1{font-weight:700;font-size:clamp(2.5rem,1.65rem + 3.4vw,4rem);line-height:1.06;letter-spacing:-.02em;}
h2{font-weight:700;font-size:clamp(1.9rem,1.55rem + 1.5vw,2.75rem);}
h3{font-weight:600;font-size:clamp(1.25rem,1.12rem + .5vw,1.5rem);}
h4{font-weight:600;font-size:1.125rem;}
p{margin:0 0 1em;color:var(--muted);}
p:last-child{margin-bottom:0;}
strong{color:var(--text);font-weight:600;}
.lead{color:var(--muted);font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.6;max-width:640px;}
.muted{color:var(--muted);}
code,.mono{font-family:var(--font-m);}

/* ---------- 4. Layout primitives ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,32px);}
.section{padding:96px 0;}
.section-tight{padding:56px 0;}

.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* ---------- 5. Eyebrow + gradient text ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-m);font-weight:500;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 18px;
}
.eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px 1px rgba(6,182,212,.8);flex:none;
}
.grad-text{
  background:var(--grad);background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;display:inline-block;
}

/* ---------- 6. Buttons ---------- */
.btn{
  --btn-py:14px;--btn-px:28px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-b);font-weight:600;font-size:.9375rem;
  padding:var(--btn-py) var(--btn-px);border-radius:999px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;line-height:1;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-color .25s ease;
}
.btn-sm{--btn-py:9px;--btn-px:18px;font-size:.8125rem;}
.btn-primary{
  background:var(--grad);color:#fff;box-shadow:0 0 0 rgba(139,92,246,0);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 24px rgba(139,92,246,.45);}
.btn-primary:active{transform:translateY(0);}
.btn-outline{
  position:relative;background:transparent;color:var(--text);border-color:var(--border);z-index:0;
}
.btn-outline::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s ease;z-index:-1;pointer-events:none;
}
.btn-outline:hover{border-color:transparent;transform:translateY(-1px);}
.btn-outline:hover::before{opacity:1;}

/* ---------- 7. Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;position:relative;
}
.card h3,.card h4{margin-bottom:.5em;}
.card p{margin-bottom:0;}
.card-glow{
  overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.card-glow::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);opacity:0;transition:opacity .35s ease;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.card-glow:hover{
  transform:translateY(-6px);border-color:rgba(139,92,246,.35);
  box-shadow:0 24px 60px -24px rgba(139,92,246,.55),0 8px 24px -12px rgba(6,182,212,.25);
}
.card-glow:hover::after{opacity:1;}

/* ---------- 8. Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,15,30,.72);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
.brand{display:inline-flex;align-items:center;gap:10px;}
.brand-mark{height:28px;width:28px;object-fit:contain;}
.brand-word{font-family:var(--font-d);font-weight:700;font-size:1.1875rem;letter-spacing:-.01em;color:var(--text);}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links a:not(.btn){
  font-size:.9rem;font-weight:500;color:var(--muted);transition:color .2s ease;
}
.nav-links a:not(.btn):hover{color:var(--text);}
.nav-links a[aria-current="page"]{color:var(--text);}
.nav-toggle{
  display:none;position:relative;width:38px;height:38px;flex:none;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;padding:0;
}
.nav-toggle span{
  position:absolute;left:50%;top:50%;width:16px;height:2px;background:var(--text);border-radius:2px;
  transition:transform .3s ease;
}
.nav-toggle span:first-child{transform:translate(-50%,calc(-50% - 4px));}
.nav-toggle span:last-child{transform:translate(-50%,calc(-50% + 4px));}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}

/* ---------- 9. Footer ---------- */
.footer{border-top:1px solid var(--border);padding:64px 0 40px;text-align:center;}
.footer-brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;}
.footer-mark{height:22px;width:22px;object-fit:contain;opacity:.9;}
.footer-brand span{font-family:var(--font-d);font-weight:700;font-size:1.0625rem;color:var(--text);}
.footer-tag{font-family:var(--font-m);font-size:.8125rem;color:var(--muted);letter-spacing:.02em;margin-bottom:28px;}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-bottom:24px;}
.footer-links a{font-size:.875rem;color:var(--muted);transition:color .2s ease;}
.footer-links a:hover{color:var(--text);}
.footer-mail{font-size:.875rem;color:var(--muted);margin-bottom:16px;}
.footer-mail a{color:var(--text);transition:color .2s ease;}
.footer-mail a:hover{color:var(--cyan);}
.footer-note{font-family:var(--font-m);font-size:.75rem;color:var(--muted);margin:0;}

/* ---------- 10. Stats ---------- */
.stats-row{display:flex;justify-content:center;flex-wrap:wrap;gap:56px;text-align:center;}
.stat{display:flex;flex-direction:column;align-items:center;gap:6px;}
.stat-num{
  font-family:var(--font-m);font-weight:500;font-size:clamp(40px,5vw,56px);line-height:1;
  letter-spacing:-.02em;background:var(--grad);background-clip:text;-webkit-background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.stat-cap{font-size:14px;color:var(--muted);}

/* ---------- 11. Band ---------- */
.band{
  position:relative;border-radius:var(--radius);background:var(--surface2);
  padding:56px 40px;text-align:center;overflow:hidden;isolation:isolate;
}
.band::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.band::after{
  content:'';position:absolute;inset:-40% -10% auto -10%;height:220px;z-index:-1;
  background:radial-gradient(closest-side,rgba(139,92,246,.28),transparent 70%);
  pointer-events:none;
}
.band h2,.band p{position:relative;}
.band .lead{margin-inline:auto;}

/* ---------- 11b. Small utilities ---------- */
.mt-24{margin-top:24px;}

/* ---------- 12. Motion utilities (exact, per brief) ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- 13. Responsive ---------- */
@media (max-width:860px){
  .section{padding:64px 0;}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .stats-row{gap:36px;}

  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(10,15,30,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    max-height:0;overflow:hidden;opacity:0;padding:0 24px;
    transition:max-height .35s ease,opacity .3s ease,padding .35s ease;
  }
  .nav-links.open{max-height:420px;opacity:1;padding:8px 24px 22px;}
  .nav-links a:not(.btn){width:100%;padding:14px 0;border-bottom:1px solid var(--border);}
  .nav-links .btn{margin-top:14px;width:100%;}

  .band{padding:40px 24px;}
}

/* =========================================================================
   14. Home / Hero (page-specific: index.html)
   Knowledge-graph canvas layered behind hero copy, feature-card icons,
   stat citation markers, privacy-band lock icon.
   ========================================================================= */
.hero{
  /* ~92vh on real viewports; clamped so unusually tall viewports (unstyled
     print/screenshot tooling, ultrawide monitors) don't stretch the hero
     into empty space. */
  position:relative;min-height:clamp(600px,92vh,1100px);display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
}
#hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:40%;z-index:0;
  background:linear-gradient(to bottom, transparent, var(--bg) 88%);
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:1;
  max-width:800px;margin:0 auto;text-align:center;
  padding:112px 0 72px;
}
.hero-inner .eyebrow{justify-content:center;}
.hero-dek{max-width:600px;margin:0 auto 40px;}

.btn-row{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}

/* Stats row: cap each column so the long first caption can't push the
   third stat onto its own line */
.home-stats .stat{flex:0 1 270px;max-width:270px;}
.home-stats .stat-cap{max-width:250px;margin:0 auto;}

.stat-num-wrap{position:relative;display:inline-flex;align-items:flex-start;}

/* Feature cards */
.feature-grid{margin-top:40px;}
a.card{display:block;}
.card-icon{
  width:40px;height:40px;border-radius:10px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);border:1px solid var(--border);color:var(--cyan);
}
.card-icon svg{width:20px;height:20px;}
.feature-grid .card:nth-child(2n) .card-icon{color:var(--purple);}
.feature-grid .card[data-reveal]:nth-child(2){transition-delay:.08s;}
.feature-grid .card[data-reveal]:nth-child(3){transition-delay:.16s;}
.feature-grid .card[data-reveal]:nth-child(4){transition-delay:.24s;}

/* Bands: privacy icon + inline link */
.band-icon{
  width:44px;height:44px;border-radius:50%;margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.35);color:var(--purple);
}
.band-icon svg{width:22px;height:22px;}
.band-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  font-weight:600;color:var(--cyan);transition:color .2s ease,gap .2s ease;
}
.band-link:hover{color:var(--text);gap:9px;}

@media (max-width:860px){
  .hero{min-height:auto;padding-top:12px;}
  .hero-inner{padding:72px 0 48px;}
}

/* =========================================================================
   15. Product page (page-specific: product.html)
   Four-step stepper with gradient progress, scripted chat-preview window,
   audit-engine checklist, advisory chip cards, framed screenshot gallery.
   ========================================================================= */
.product-header h1{max-width:820px;}

/* --- Stepper --- */
.stepper-tabs{display:flex;gap:14px;flex-wrap:wrap;}
.stepper-tab{
  flex:1 1 220px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;font-family:inherit;color:var(--muted);
  transition:border-color .3s ease,background-color .3s ease,transform .25s ease,box-shadow .3s ease;
}
.stepper-tab:hover{border-color:rgba(148,163,184,.32);}
.stepper-tab.active{
  background:var(--surface2);border-color:rgba(139,92,246,.45);
  box-shadow:0 16px 36px -22px rgba(139,92,246,.6);
}
.step-num{
  display:block;font-family:var(--font-m);font-size:.75rem;letter-spacing:.1em;
  color:var(--cyan);margin-bottom:6px;
}
.step-label{
  display:block;font-family:var(--font-d);font-weight:600;font-size:1.0625rem;
  color:var(--text);
}
.stepper-track{
  position:relative;height:3px;border-radius:999px;background:var(--border);
  margin:24px 0 32px;overflow:hidden;
}
.stepper-progress{
  position:absolute;inset:0 auto 0 0;width:33.333%;border-radius:999px;
  background:var(--grad);transition:width .5s cubic-bezier(.4,0,.2,1);
}
.stepper-panels{display:grid;}
.stepper-panel{
  grid-area:1/1;max-width:680px;opacity:0;pointer-events:none;
  transition:opacity .45s ease;
}
.stepper-panel.active{opacity:1;pointer-events:auto;}
.stepper-panel p{font-size:1.0625rem;}

/* --- Private vault --- */
.vault-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.vault-copy .lead{margin-bottom:18px;}
.vault-art{display:flex;justify-content:center;}
.vault-diagram{width:100%;max-width:420px;height:auto;overflow:visible;}

.vault-layer{stroke-width:1.5;transition:none;}
.vault-layer-base{fill:rgba(6,182,212,.1);stroke:rgba(6,182,212,.4);}
.vault-layer-private{fill:rgba(139,92,246,.12);stroke:rgba(139,92,246,.4);}
.vault-layer-top{fill:rgba(139,92,246,.2);}
.vault-layer-label{font-family:var(--font-m);letter-spacing:.06em;fill:var(--cyan);}
.vault-lock-bg{fill:var(--surface2);stroke:rgba(139,92,246,.4);stroke-width:1;}
.vault-lock{fill:none;stroke:var(--purple);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.vault-visibility-line{stroke:rgba(148,163,184,.4);stroke-width:1.5;stroke-dasharray:3 4;}
.vault-visibility-arrow{fill:none;stroke:rgba(148,163,184,.6);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.vault-side-label{font-family:var(--font-m);letter-spacing:.08em;fill:var(--muted);}

@media (max-width:860px){
  .vault-layout{grid-template-columns:1fr;gap:40px;}
  .vault-diagram{max-width:320px;}
}

/* --- Chat preview window --- */
.chat-window{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;max-width:760px;
}
.chat-window-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface2);
}
.chat-window-dots{display:inline-flex;gap:6px;}
.chat-window-dots span{
  width:9px;height:9px;border-radius:50%;background:rgba(148,163,184,.28);display:block;
}
.preview-replay{
  display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);
  color:var(--muted);font-family:var(--font-b);font-size:.8125rem;font-weight:500;
  padding:6px 12px;border-radius:999px;cursor:pointer;transition:border-color .2s ease,color .2s ease;
}
.preview-replay svg{width:14px;height:14px;}
.preview-replay:hover{border-color:rgba(6,182,212,.5);color:var(--text);}
.chat-body{padding:26px 24px 28px;}
.chat-question-row{display:flex;justify-content:flex-end;}
.chat-question{
  max-width:88%;margin:0;background:var(--grad);color:#fff;font-weight:500;
  padding:12px 18px;border-radius:16px 16px 4px 16px;min-height:1.6em;
}
.chat-question.is-typing::after,
.chat-answer.is-typing::after{
  content:'';display:inline-block;width:2px;height:1em;margin-left:3px;
  background:currentColor;vertical-align:-2px;animation:caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink{50%{opacity:0;}}
.chat-answer-row{display:flex;gap:14px;padding-top:36px;align-items:flex-start;}
.chat-avatar{
  flex:none;width:32px;height:32px;border-radius:50%;
  background:var(--surface2);border:1px solid var(--border);color:var(--purple);
  display:flex;align-items:center;justify-content:center;
}
.chat-avatar svg{width:16px;height:16px;}
.chat-answer-bubble{
  background:var(--surface2);border:1px solid var(--border);border-radius:4px 16px 16px 16px;
  padding:16px 18px;flex:1;min-width:0;
}
.chat-answer{margin:0;min-height:1.6em;color:var(--text);}
.chat-citations{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.citation-chip{
  font-family:var(--font-m);font-size:.75rem;color:var(--cyan);
  background:rgba(6,182,212,.1);border:1px solid rgba(6,182,212,.3);
  padding:5px 10px;border-radius:999px;opacity:0;transform:translateY(4px);
  animation:chip-in .4s ease forwards;
}
@keyframes chip-in{to{opacity:1;transform:none;}}
.preview-caption{
  font-family:var(--font-m);font-size:.75rem;color:var(--muted);margin-top:16px;
}

/* --- Audit engine --- */
.audit-card{max-width:820px;margin-top:36px;}
.audit-checks{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 20px;
}
.audit-checks li{
  display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--text);
}
.audit-checks svg{
  flex:none;width:18px;height:18px;color:var(--emerald);
}

/* --- Advisory grid --- */
.advisory-chip{
  display:inline-block;font-family:var(--font-m);font-size:.6875rem;letter-spacing:.04em;
  color:var(--emerald);background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.32);
  padding:5px 10px;border-radius:999px;margin-bottom:16px;
}

/* --- Screenshot gallery --- */
.shot-grid{margin-top:36px;}
.shot-figure{margin:0;}
.shot-frame{
  display:block;width:100%;padding:0;margin:0;appearance:none;
  font:inherit;text-align:inherit;cursor:pointer;
  border-radius:var(--radius);border:1px solid var(--border);
  overflow:hidden;background:var(--bg);position:relative;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.shot-frame::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);opacity:0;transition:opacity .35s ease;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.shot-frame:hover,.shot-frame:focus-visible{
  transform:translateY(-6px);border-color:rgba(139,92,246,.35);
  box-shadow:0 24px 60px -24px rgba(139,92,246,.55),0 8px 24px -12px rgba(6,182,212,.25);
}
.shot-frame:hover::after,.shot-frame:focus-visible::after{opacity:1;}
.shot-frame img{width:100%;height:auto;display:block;pointer-events:none;}
.shot-figure figcaption{
  margin-top:14px;font-size:.875rem;color:var(--muted);
}

/* --- Screenshot lightbox (built by js/product.js; without JS the gallery
   above is just plain framed images, nothing here ever renders) --- */
.lightbox{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:32px;background:rgba(6,9,20,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.lightbox.is-open{opacity:1;pointer-events:auto;}
.lightbox-inner{position:relative;max-width:min(1200px,92vw);max-height:88vh;}
.lightbox-inner img{
  display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;
  border-radius:var(--radius);border:1px solid var(--border);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.7);
}
.lightbox-caption{margin:14px 0 0;text-align:center;font-size:.875rem;color:var(--muted);}
.lightbox-close{
  position:absolute;top:-18px;right:-18px;width:40px;height:40px;border-radius:50%;
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.lightbox-close svg{width:18px;height:18px;}
.lightbox-close:hover{border-color:rgba(6,182,212,.5);color:var(--cyan);transform:scale(1.06);}
body.lightbox-locked{overflow:hidden;}

@media (max-width:560px){
  .lightbox{padding:20px;}
  .lightbox-close{top:-14px;right:0;}
}

@media (max-width:860px){
  .chat-question{max-width:100%;}
  .audit-checks{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .audit-checks{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  /* animation:none is forced globally, so undo the animation-driven initial
     state here or the citation chips would stay invisible. */
  .citation-chip{opacity:1;transform:none;}
}

/* =========================================================================
   16. Security page (page-specific: security.html)
   Boundary diagram (a desktop horizontal SVG and a mobile vertical SVG,
   swapped by breakpoint; see the HTML comment above the diagram markup
   for why two variants exist instead of one that scales down), 8-card
   capability grid.
   ========================================================================= */
.security-header h1{max-width:760px;}

/* --- Boundary diagram --- */
.diagram-figure{margin:0;text-align:center;}
.diagram-wrap{max-width:960px;margin:0 auto;}
.boundary-diagram{width:100%;height:auto;display:block;overflow:visible;}
.diagram-mobile{display:none;}

.diagram-boundary{
  fill:rgba(19,28,51,.55);stroke-width:2.5;
  filter:drop-shadow(0 0 40px rgba(139,92,246,.28)) drop-shadow(0 0 26px rgba(6,182,212,.2));
}
.diagram-label-bg{fill:var(--surface2);stroke:var(--border);stroke-width:1;}
.diagram-label{font-family:var(--font-m);font-weight:500;letter-spacing:.12em;}
.diagram-box-rect{fill:var(--surface2);stroke:var(--border);stroke-width:1;}
.diagram-icon-bg{fill:rgba(6,182,212,.12);stroke:rgba(6,182,212,.35);stroke-width:1;}
.diagram-icon{
  color:var(--cyan);fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.diagram-box-label{font-family:var(--font-b);font-weight:600;fill:var(--text);}
.diagram-box-subtitle{
  font-family:var(--font-m);font-weight:500;letter-spacing:.08em;fill:var(--cyan);
}
.diagram-connector{fill:none;stroke:rgba(148,163,184,.4);stroke-width:1.5;}
.diagram-dot{filter:drop-shadow(0 0 5px currentColor);}
.diagram-dot-a{fill:var(--cyan);color:var(--cyan);}
.diagram-dot-b{fill:var(--purple);color:var(--purple);}

/* Component "dwell" glow: a duplicate of diagram-box-rect, sized identically
   and drawn just before it, pulsed opacity 0->1->0 by SMIL while a signal
   is "inside" that box. Fill stays none so the crisp box on top reads
   normally; the halo comes entirely from the drop-shadow blur. */
.diagram-glow{
  fill:none;stroke-width:2.5;pointer-events:none;
  filter:drop-shadow(0 0 10px rgba(139,92,246,.9)) drop-shadow(0 0 20px rgba(6,182,212,.7));
}

/* Firm-sources icon cluster: four small rows inside the first box */
.diagram-source-icon-bg{fill:rgba(139,92,246,.12);stroke:rgba(139,92,246,.35);stroke-width:1;}
.diagram-source-icon-bg + .diagram-icon{color:var(--purple);}
.diagram-source-label{font-family:var(--font-b);font-weight:500;fill:var(--text);font-size:12px;}
.diagram-source-caption{
  font-family:var(--font-m);font-weight:500;letter-spacing:.1em;fill:var(--purple);
}

.diagram-caption{font-family:var(--font-m);font-size:.75rem;color:var(--muted);margin-top:20px;}

/* --- Capabilities grid --- */
.security-grid{margin-top:40px;}
.security-grid .card-icon{margin-bottom:16px;}
.security-grid .card:nth-child(2n) .card-icon{color:var(--purple);}
.security-grid .card[data-reveal]:nth-child(2){transition-delay:.06s;}
.security-grid .card[data-reveal]:nth-child(3){transition-delay:.12s;}
.security-grid .card[data-reveal]:nth-child(4){transition-delay:.18s;}
.security-grid .card[data-reveal]:nth-child(5){transition-delay:.24s;}
.security-grid .card[data-reveal]:nth-child(6){transition-delay:.3s;}
.security-grid .card[data-reveal]:nth-child(7){transition-delay:.36s;}
.security-grid .card[data-reveal]:nth-child(8){transition-delay:.42s;}

@media (max-width:700px){
  .diagram-desktop{display:none;}
  .diagram-mobile{display:block;}
}
@media (max-width:860px){
  .security-grid.grid-4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .security-grid.grid-4{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  /* SMIL <animateMotion>/<animate> are not CSS animations, so the global
     animation:none!important rule above does not stop them. Hide the
     traveling dots and the component dwell-glow pulses outright instead. */
  .diagram-dot,.diagram-glow{display:none;}
}

/* =========================================================================
   17. Partners page (page-specific: partners.html)
   Asymmetric two-column check-list (bright/glow "get" card vs quiet/plain
   "ask" card), plus a static 3-step timeline with a gradient connector --
   the timeline is a real sequence (call, then pilot, then roadmap), so
   numbered nodes carry real meaning here rather than decorating.
   ========================================================================= */
.partners-header h1{max-width:760px;}

/* --- Check-list cards --- */
.partner-columns{margin-top:44px;}
.check-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;}
.check-list li{display:flex;align-items:flex-start;gap:12px;font-size:.9375rem;color:var(--text);}
.check-list svg{flex:none;width:18px;height:18px;margin-top:2px;}
.partner-card--get .check-list svg{color:var(--cyan);}
.partner-card--ask .check-list svg{color:var(--muted);}

/* --- Timeline --- */
.partner-timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:44px;}
.partner-timeline::before{
  content:'';position:absolute;top:28px;left:calc(100% / 6);right:calc(100% / 6);height:2px;
  background:var(--grad);z-index:0;
}
.timeline-step{position:relative;z-index:1;text-align:center;}
.timeline-node{
  display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:50%;background:var(--surface2);border:1.5px solid transparent;
  background-image:linear-gradient(var(--surface2),var(--surface2)),var(--grad);
  background-origin:border-box;background-clip:padding-box,border-box;
  font-family:var(--font-m);font-weight:600;font-size:1.125rem;color:var(--text);
  margin-bottom:20px;
}
.timeline-step h3{margin-bottom:.4em;}
.timeline-step p{font-size:.9375rem;max-width:280px;margin:0 auto;}

@media (max-width:860px){
  .partner-timeline{grid-template-columns:1fr;gap:36px;}
  .partner-timeline::before{top:0;bottom:0;left:27px;right:auto;width:2px;height:auto;}
  .timeline-step{text-align:left;padding-left:76px;min-height:56px;}
  .timeline-node{position:absolute;left:0;top:0;margin-bottom:0;}
  .timeline-step p{max-width:none;margin:0;}
}

/* =========================================================================
   18. Contact page (page-specific: contact.html)
   Three routed cards, each carrying one accent color end to end (top
   bar, tag dot, email hover, send-link, hover glow) instead of a faint
   tint, per _design/NOTES.md's note that the reference render
   under-differentiated the three accents.
   ========================================================================= */
.contact-header h1{max-width:600px;}

.contact-grid{margin-top:8px;}
.contact-card{position:relative;overflow:hidden;}
.contact-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.contact-card--emerald::before{background:var(--emerald);}
.contact-card--cyan::before{background:var(--cyan);}
.contact-card--purple::before{background:var(--purple);}

.contact-tag{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;
}
.contact-tag i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.contact-email{
  display:block;font-family:var(--font-d);font-weight:700;font-size:1.375rem;color:var(--text);
  margin-bottom:14px;word-break:break-word;transition:color .2s ease;
}
.contact-copy{font-size:.9375rem;margin-bottom:24px;}
.contact-send{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.875rem;transition:gap .2s ease;}
.contact-send svg{width:15px;height:15px;}
.contact-card:hover .contact-send{gap:9px;}

.contact-card--emerald .contact-tag{color:var(--emerald);}
.contact-card--emerald .contact-email:hover,.contact-card--emerald .contact-send{color:var(--emerald);}
.contact-card--emerald.card-glow::after{background:var(--emerald);}
.contact-card--emerald.card-glow:hover{
  border-color:rgba(16,185,129,.4);
  box-shadow:0 24px 60px -24px rgba(16,185,129,.55),0 8px 24px -12px rgba(16,185,129,.25);
}

.contact-card--cyan .contact-tag{color:var(--cyan);}
.contact-card--cyan .contact-email:hover,.contact-card--cyan .contact-send{color:var(--cyan);}
.contact-card--cyan.card-glow::after{background:var(--cyan);}
.contact-card--cyan.card-glow:hover{
  border-color:rgba(6,182,212,.4);
  box-shadow:0 24px 60px -24px rgba(6,182,212,.55),0 8px 24px -12px rgba(6,182,212,.25);
}

.contact-card--purple .contact-tag{color:var(--purple);}
.contact-card--purple .contact-email:hover,.contact-card--purple .contact-send{color:var(--purple);}
.contact-card--purple.card-glow::after{background:var(--purple);}
.contact-card--purple.card-glow:hover{
  border-color:rgba(139,92,246,.4);
  box-shadow:0 24px 60px -24px rgba(139,92,246,.55),0 8px 24px -12px rgba(139,92,246,.25);
}

.contact-closing{text-align:center;margin-top:52px;font-size:1rem;}