/* =========================================================================
   VERATUS CONSULTING — shared page styles (night-sky + laurel gold)
   Layered on top of veratus.css (which provides .nav/.foot/.brand/.wrap/etc.).
   Used by about.html + contact.html; index.html carries its own inline copy.
   ========================================================================= */

body.bld-page {
  background:
    radial-gradient(58% 40% at 82% 6%, rgba(44,58,115,.55), transparent 70%),
    radial-gradient(52% 46% at 6% 62%, rgba(31,42,85,.5), transparent 70%),
    linear-gradient(180deg,#070A16 0%, #0A0E1F 55%, #0B1024 100%);
  background-attachment: fixed;
}
.bld-page .nav { background: rgba(7,10,22,0.72); border-bottom-color: rgba(255,255,255,.08); }
.bld-page a { color: inherit; }
.bld-page a.ilink { color:#8FB4FF; text-decoration:none; }
.bld-page a.ilink:hover { color:#B9CCFF; }

/* Type */
.bld-eye { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.2em; color:#8893BC; display:inline-flex; align-items:center; gap:10px; }
.bld-eye .idx { color:#7378FF; }
.bld-h1 { margin:0; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(38px,6.4vw,84px); letter-spacing:-.03em; line-height:.98; color:#F6F8FF; text-wrap:balance; }
.bld-h2 { margin:0; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,48px); letter-spacing:-.025em; line-height:1.02; color:#F6F8FF; text-wrap:balance; }
.bld-lede { margin:24px 0 0; font-family:'Inter',sans-serif; font-size:clamp(16px,1.7vw,21px); line-height:1.55; color:#B9C2E0; max-width:56ch; text-wrap:pretty; }
.bld-body { font-family:'Inter',sans-serif; font-size:16px; line-height:1.62; color:#B9C2E0; text-wrap:pretty; }
.gold { color:#7378FF; }

/* Buttons */
.gbtn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  padding:16px 28px; border-radius:4px; color:#FFFFFF; border:0; cursor:pointer; text-decoration:none;
  background:linear-gradient(180deg,#7378FF 0%, #7378FF 55%, #3A3CE0 100%);
  box-shadow:0 0 0 1px rgba(115,120,255,.55), 0 10px 28px -8px rgba(115,120,255,.5);
  transition:transform .14s cubic-bezier(.34,1.4,.5,1), filter .2s, box-shadow .2s; }
.gbtn .arr { transition:transform .18s cubic-bezier(.16,.84,.24,1); }
.gbtn:hover { filter:brightness(1.05); transform:translateY(-2px); box-shadow:0 0 0 1px rgba(115,120,255,.7), 0 14px 32px -8px rgba(115,120,255,.6); }
.gbtn:hover .arr { transform:translateX(4px); }
.gbtn:active { transform:translateY(1px); }
.ghbtn { display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; letter-spacing:.05em; text-transform:uppercase;
  padding:16px 26px; border-radius:4px; color:#E4E8FA; text-decoration:none;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16);
  transition:border-color .18s, background .18s; }
.ghbtn:hover { border-color:#F6F8FF; background:rgba(255,255,255,.07); }

/* Page hero (stars + mountains) */
.bhead { position:relative; overflow:hidden; border-bottom:1px solid rgba(115,120,255,.16); }
.bhead__stars { position:absolute; left:0; top:0; width:100%; height:360px; opacity:.7; pointer-events:none; }
.bhead__mtn { position:absolute; left:0; bottom:-1px; width:100%; height:56%; opacity:.5; pointer-events:none; }
.bhead__inner { position:relative; z-index:1; padding-block:clamp(44px,7vw,96px); }
.bcrumbs { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#5F6A91; }
.bcrumbs a { color:#8893BC; } .bcrumbs a:hover { color:#7378FF; }
.hero-cta { margin-top:38px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero-note { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.05em; color:#7C88B0; }

/* Code-blueprint ambient (grid + scan) — shared across the subpage heroes */
.bhead__bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.bp-grid { position:absolute; inset:-80px;
  background-image:
    linear-gradient(rgba(115,120,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(115,120,255,.045) 1px,transparent 1px),
    linear-gradient(rgba(115,120,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(115,120,255,.08) 1px,transparent 1px);
  background-size:36px 36px,36px 36px,180px 180px,180px 180px;
  -webkit-mask-image:radial-gradient(120% 110% at 62% 30%,#000 48%,transparent 92%);
          mask-image:radial-gradient(120% 110% at 62% 30%,#000 48%,transparent 92%);
  animation:bpdrift 60s linear infinite; }
@keyframes bpdrift { to { transform:translate(180px,180px); } }
.bp-scan { position:absolute; left:0; right:0; height:44%; top:-44%; mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent,rgba(115,120,255,.05) 45%,rgba(163,166,255,.09) 50%,rgba(115,120,255,.05) 55%,transparent);
  animation:bpscan 12s cubic-bezier(.66,0,.34,1) infinite; }
.bp-scan::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(179,182,255,.26); }
@keyframes bpscan { 0%{transform:translateY(0)} 70%,100%{transform:translateY(340%)} }
.bp-scrim { position:absolute; inset:0; background:radial-gradient(94% 82% at 26% 46%,rgba(7,10,22,.72) 0%,rgba(7,10,22,.3) 46%,transparent 82%); }
@media (prefers-reduced-motion:reduce){ .bp-grid,.bp-scan{animation:none!important} .bp-scan{display:none} }

/* Full-page code-blueprint backdrop — spans the FULL height of every .bld-page and
   scrolls with the content, so the grid carries all the way down. It's position:absolute
   on a relatively-positioned body (not fixed) — reliable in Safari — and body gets its own
   stacking context so the z-index:-1 layer paints under the copy but over the base gradient. */
body.bld-page { position:relative; z-index:0; }
body.bld-page::before {
  content:""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(115,120,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(115,120,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(115,120,255,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(115,120,255,.10) 1px,transparent 1px);
  background-size:38px 38px,38px 38px,190px 190px,190px 190px;
}

/* ============================================================
   Per-page hero motifs (V2 About · V3 Contact · V4 Support).
   All scoped under .vbg-* so nothing leaks onto the home V1 graph
   (which uses bare .wire/.node under .bp-graph). Sweep + scrim reuse
   the shared .bp-scan / .bp-scrim. Keyframes are vc-prefixed.
   ============================================================ */
/* small blueprint spec tag, shared by the subpage heroes (top-right) */
.bhead__spec { position:absolute; top:clamp(16px,2.4vw,30px); right:clamp(16px,3vw,40px); z-index:2;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:#6469A8; opacity:.62; text-align:right; line-height:1.9; pointer-events:none; }
.bhead__spec b { color:#7378FF; font-weight:500; }
@media (max-width:640px){ .bhead__spec { display:none } }

/* shared survey nodes + dimension marks (used by V3 & V4) */
.vbg-north .node,.vbg-contour .node { fill:#0B1024; stroke:#7378FF; stroke-width:1.5; opacity:.8; }
.vbg-north .node-core,.vbg-contour .node-core { fill:#7378FF; transform-box:fill-box; transform-origin:center; animation:vcpulse 3.4s ease-in-out infinite; }
@keyframes vcpulse { 0%,100%{opacity:.35;transform:scale(.7)} 50%{opacity:1;transform:scale(1.15)} }
.vbg-north .node-ring,.vbg-contour .node-ring { fill:none; stroke:#7378FF; stroke-width:1; transform-box:fill-box; transform-origin:center; animation:vcring 3.4s ease-out infinite; }
@keyframes vcring { 0%{opacity:.5;transform:scale(.4)} 70%,100%{opacity:0;transform:scale(2.4)} }
.vbg-iso .dim,.vbg-north .dim,.vbg-contour .dim { stroke:#7378FF; stroke-width:1; opacity:.28; }
.vbg-iso .dim-txt,.vbg-north .dim-txt,.vbg-contour .dim-txt { fill:#8A8FE0; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.12em; opacity:.5; }

/* V2 · Iso Construct — About : isometric grid + the mark extruding (star removed) */
.vbg-iso .iso-grid { position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(30deg, rgba(115,120,255,.06) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(-30deg, rgba(115,120,255,.06) 0 1px, transparent 1px 64px);
  -webkit-mask-image:radial-gradient(110% 110% at 70% 55%, #000 40%, transparent 88%);
          mask-image:radial-gradient(110% 110% at 70% 55%, #000 40%, transparent 88%); }
.vbg-iso .iso-face { opacity:0; animation:vcisorise 12s ease-in-out infinite; }
@keyframes vcisorise { 0%{opacity:0;transform:translateY(24px)} 14%{opacity:1;transform:translateY(0)} 86%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(24px)} }
.vbg-iso .edge { fill:none; stroke:#7378FF; stroke-width:1.4; opacity:.5; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:vcdraw 12s ease-in-out infinite; }
@keyframes vcdraw { 0%{stroke-dashoffset:var(--len)} 38%{stroke-dashoffset:0} 82%{stroke-dashoffset:0} 100%{stroke-dashoffset:calc(var(--len) * -1)} }

/* V3 · True North — Contact : survey constellation + sweeping bearing (north star removed) */
.vbg-north .survey { fill:none; stroke:#7378FF; stroke-width:1; opacity:.3; stroke-dasharray:3 6; }
.vbg-north .star { fill:#B7BAFF; animation:vctw 4s ease-in-out infinite; }
@keyframes vctw { 0%,100%{opacity:.2} 50%{opacity:.9} }
.vbg-north .bearing { transform-box:view-box; transform-origin:1080px 300px; animation:vcsweep 24s linear infinite; }
@keyframes vcsweep { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* V4 · Contour Survey — Support : topographic lines + flowing pulse */
.vbg-contour .contour { fill:none; stroke:#7378FF; stroke-width:1; opacity:.22; }
.vbg-contour .contour.hi { opacity:.42; stroke-width:1.3; }
.vbg-contour .flowline { fill:none; stroke:#7378FF; stroke-width:1; opacity:.5; stroke-dasharray:5 260; animation:vcflow 7s linear infinite; }
@keyframes vcflow { from{stroke-dashoffset:0} to{stroke-dashoffset:-265} }

@media (prefers-reduced-motion:reduce){
  .vbg-iso .iso-face,.vbg-iso .edge,.vbg-north .star,.vbg-north .bearing,.vbg-north .node-core,.vbg-north .node-ring,.vbg-contour .flowline,.vbg-contour .node-core,.vbg-contour .node-ring { animation:none!important }
  .vbg-iso .iso-face { opacity:1!important; transform:none!important }
  .vbg-iso .edge { stroke-dashoffset:0!important }
}

/* Sections */
.sec { padding-block:clamp(56px,8vw,110px); }
.sec--line { border-top:1px solid rgba(255,255,255,.08); }
.sec-head { max-width:60ch; margin-bottom:clamp(30px,4vw,52px); }