/* =====================================================================
   VoidLens · V5 Sentinel Eye · brand system v0.1.0 (2026-05-12)
   Sibling stylesheet to styles.css — kept separate so styles.css stays
   under its open-state cap. Per spec at:
     06-Knowledge/strategy/2026-05-12-voidlens-brand-system-v5.md
   ===================================================================== */

:root{
  --cyan: #22d3ee;
}

/* ---------- Hero V5 mark (200-260px, full motion) ---------- */
.v5-hero-mark{
  width: clamp(168px, 22vw, 240px);
  height: clamp(168px, 22vw, 240px);
  flex-shrink: 0;
  /* Dark backdrop so the mark reads on busy canvas backgrounds + brand glow */
  filter:
    drop-shadow(0 0 18px rgba(2,6,8,0.75))
    drop-shadow(0 0 36px rgba(167,139,250,0.30));
  display: block;
}
.v5-hero-mark .seg{ animation: v5SegPulse 3.4s ease-in-out infinite; }
@keyframes v5SegPulse{ 0%,100%{opacity:.32} 25%{opacity:1} }
/* Note: transform-origin uses SVG coordinates (viewBox 0 0 280 280), so the
   rotation pivot is the geometric center 140,140. We deliberately do NOT use
   `transform-box: fill-box` here — when an inner group has its own bounding
   box that rotates with the animation, Chromium reframes the origin every
   frame, which visually collapses the 3-blade composition to a single blade. */
.v5-hero-mark .ring-rotate{
  transform-origin: 140px 140px;
  animation: v5Spin 30s linear infinite;
}
@keyframes v5Spin{ to{ transform: rotate(360deg) } }
.v5-hero-mark .iris-3{
  transform-origin: 140px 140px;
  animation: v5IrisRot 19s linear infinite;
}
@keyframes v5IrisRot{ to{ transform: rotate(360deg) } }
.v5-hero-mark .iris-pulse{
  transform-origin: 140px 140px;
  animation: v5IrisPulse 4.2s ease-in-out infinite;
}
@keyframes v5IrisPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(.94)} }
.v5-hero-mark .core-dot{ animation: v5CoreBlink 2.2s ease-in-out infinite; }
@keyframes v5CoreBlink{ 0%,100%{opacity:.5} 50%{opacity:1} }

/* Hero V5 + wordmark lockup container */
.v5-hero-lockup{
  display: flex; align-items: center; gap: clamp(20px, 3.2vw, 44px);
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.v5-hero-lockup .word-stack{ display: flex; flex-direction: column; }

/* Override the existing brand-display-mark when the V5 lockup is present
   so the wordmark sits cleanly next to the mark instead of solo */
.v5-hero-lockup .brand-display-mark{
  font-size: clamp(48px, 8vw, 96px);
  /* Teal glow only — the dark backdrop shadows were muting the gradient
     on "Lens" by drawing a dark text-shape underneath it. Reverted. */
  text-shadow: 0 0 50px rgba(94,234,212,0.40);
}
.v5-hero-lockup .brand-display-tagline{ display: none; }

/* MK·II registration line — sits above the wordmark in the V5 lockup */
.v5-registration{
  font-family: "JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: #c4b5fd; opacity: .85;
  margin-bottom: 10px;
}

/* ---------- Nav V5 mini-mark (28px, simplified) ---------- */
.brand .logo-dot{
  /* Override the prior teal dot with the V5 mini-mark.
     The old rule painted .logo-dot as a small teal disc — we replace
     its content + dimensions here. */
  width: 28px !important; height: 28px !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='r' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%235eead4'/><stop offset='35%25' stop-color='%2322d3ee'/><stop offset='65%25' stop-color='%23a78bfa'/><stop offset='100%25' stop-color='%23f472b6'/></linearGradient><linearGradient id='b' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23a78bfa'/><stop offset='100%25' stop-color='%2322d3ee'/></linearGradient></defs><circle cx='16' cy='16' r='14' fill='none' stroke='url(%23r)' stroke-width='2.5' stroke-dasharray='6 1'/><circle cx='16' cy='16' r='11' fill='%23020608'/><path d='M 16 7 L 24 21 L 8 21 Z' fill='url(%23b)'/><circle cx='16' cy='16' r='1.8' fill='%2322d3ee'/></svg>");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}

/* ---------- Reduced motion (mandatory per brand spec) ---------- */
@media (prefers-reduced-motion: reduce){
  .v5-hero-mark .seg,
  .v5-hero-mark .ring-rotate,
  .v5-hero-mark .iris-3,
  .v5-hero-mark .iris-pulse,
  .v5-hero-mark .core-dot{
    animation: none !important;
  }
  .v5-hero-mark .core-dot{ opacity: 1 !important; }
}

/* ---------- Hero motion v0.3 (2026-05-12 PM) ----------
   The Adobe Stock firefly MP4 visibly clipped/stuttered in playback
   even after the z-index + autoplay + GPU-promotion fixes. Pragmatic
   call from the founder: retire the video layer entirely and let the
   WebGL constellation network (hero.js) + the CSS hero-bg-drift
   gradient (already in styles.css line 896) carry the atmospheric
   load on their own. The <video> element stays in the DOM so a better
   source can be dropped back in by simply removing `display: none`
   from this rule. Side benefit: removes the GPU video-decode context
   swap on cross-monitor window moves, which was the largest single
   contributor to the multi-monitor stutter the founder reported. */
.hero-video {
  display: none !important;
}
/* Canvas keeps GPU compositing for smooth particle animation across
   monitors. Opacity bumped to 0.95 (from styles.css default 0.85) so
   the spider-web edges read clearly — aligns the hero with the
   Obsidian vault graph-view aesthetic of The Void without losing
   hero text readability. */
#hero-canvas {
  opacity: 0.95 !important;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

/* Remove the bottom-darkening linear-gradient entirely. The stat tiles
   have their own dark card backgrounds for contrast — the global fade
   was eating the lower half of the hero before users had scrolled past
   it. Only the atmospheric radial glows + base color remain. */
.hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(20, 184, 166, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 100%, rgba(190, 24, 93, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(217, 119, 6, 0.16) 0%, transparent 60%),
    #020608 !important;
}

/* ---------- Hero responsive layout v0.5 (2026-05-12 PM-late) ----------
   v0.4 (the flex-center version) was wrong — it shoved content to the
   vertical center and forced the V5 lockup to wrap. v0.5 uses the
   standard production pattern: CSS Grid two-column on wide viewports
   (content left, brain right), natural top-aligned block flow on
   narrow. NO flex centering. Lockup clamps tightened so it never
   wraps in its grid column.

   Real-world layout pattern, mirrors what Stripe, Linear, Vercel,
   Anthropic.com do for split heroes: grid-template-columns with
   minmax(0,1fr) so columns can shrink without overflow, content
   pinned to grid-column 1, stats spanning 1/-1 for full width.
*/

/* Base: NO flex centering. Hero fills viewport at top with natural padding.
   min-height capped at 900px so ultra-tall monitors don't get airy emptiness. */
.hero {
  min-height: min(100svh, 900px) !important;
  padding-top: clamp(48px, 6vh, 100px) !important;
  padding-bottom: clamp(36px, 4vh, 80px) !important;
}

/* Override .hero .container — kill the centered 1280px max-width that
   produced a blank LEFT margin on 4K. Replace with full-viewport width
   + horizontal padding so content sits flush-left and brain fills right. */
.hero > .container {
  max-width: none !important;
  padding-left: clamp(20px, 4vw, 80px) !important;
  padding-right: clamp(20px, 4vw, 80px) !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ---------- Global container widen (rest of page below hero) ----------
   styles.css defaults .container to max-width: 1280px which leaves big
   blank margins on a 4K viewport (>2000 CSS px wide). Bump to a fluid
   max — capped at 1600px but scales to ~92vw on ultra-wide so content
   uses more of the screen without going past comfortable line-length.
   .container-narrow (text-heavy sections) bumped 980 → 1100 for the
   same reason. Nav max-width also bumped so the top bar matches. */
.container { max-width: min(1600px, 96vw) !important; padding: 0 clamp(20px, 3vw, 60px) !important; }
.container-narrow { max-width: min(1120px, 92vw) !important; padding: 0 clamp(20px, 3vw, 48px) !important; }
nav .container, .nav-inner { max-width: min(1700px, 96vw) !important; }

/* ---------- Wide viewports (>=1024) — 2-column grid + canvas right gutter ---------- */
@media (min-width: 1024px) {
  .hero .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 100px);
    align-items: start;
  }
  /* Content lives in the LEFT column */
  .hero .container > .brand-display,
  .hero .container > .hero-tag,
  .hero .container > h1,
  .hero .container > .lede,
  .hero .container > .hero-cta-row,
  .hero .container > .hero-meta {
    grid-column: 1;
  }
  /* Stat strip spans the full row width so all 4 tiles read across */
  .hero .container > .hero-stats {
    grid-column: 1 / -1;
    margin-top: clamp(32px, 4vh, 56px) !important;
  }
  /* Canvas fills the full hero — NO horizontal mask. Brain network
     drifts naturally across the whole space. The grid keeps text
     pinned to the left column where dot density is lower (cluster
     center is at world x=10, so particles concentrate right-of-center)
     and the body text-shadow already in styles.css preserves contrast. */
  /* V5 lockup must NEVER wrap on wide viewports — tight clamps + nowrap */
  .v5-hero-lockup { flex-wrap: nowrap !important; }
  .v5-hero-mark {
    width: clamp(140px, 12vw, 200px) !important;
    height: clamp(140px, 12vw, 200px) !important;
  }
  .v5-hero-lockup .brand-display-mark {
    font-size: clamp(44px, 4.6vw, 80px) !important;
    white-space: nowrap;
  }
  .hero h1 { font-size: clamp(38px, 4.4vw, 72px) !important; }
  .hero .lede { font-size: clamp(15px, 1.3vw, 18px) !important; }
}

/* ---------- Tablet (<=1024) — single column, canvas dimmed (no mask) ---------- */
@media (max-width: 1024px) {
  .hero .container > * { max-width: none !important; }
  #hero-canvas {
    opacity: 0.45 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .v5-hero-mark {
    width: clamp(120px, 18vw, 160px) !important;
    height: clamp(120px, 18vw, 160px) !important;
  }
  .v5-hero-lockup .brand-display-mark {
    font-size: clamp(40px, 7vw, 64px) !important;
  }
  .v5-hero-lockup {
    margin-bottom: 22px !important;
    gap: clamp(16px, 2.5vw, 32px) !important;
  }
  .hero h1 { font-size: clamp(34px, 5.5vw, 60px) !important; }
}

/* ---------- Small tablet (<=768) — canvas dimmer, type drops ---------- */
@media (max-width: 768px) {
  #hero-canvas { opacity: 0.18 !important; }
  .v5-hero-mark {
    width: clamp(100px, 22vw, 140px) !important;
    height: clamp(100px, 22vw, 140px) !important;
  }
  .v5-hero-lockup .brand-display-mark {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
  .hero h1 { font-size: clamp(30px, 6vw, 48px) !important; }
  .hero .lede { font-size: clamp(15px, 2vw, 17px) !important; }
}

/* ---------- Height-aware compression (short laptop viewports) ----------
   When viewport height is under ~820px (typical laptop screen at 100%
   zoom: 1280x720, 1366x768, 1920x1080-scaled-150%, etc.) compact the
   V5 lockup + headline + section margins so CTAs + at least bullets
   stay above the fold. Production sites use this same height-query
   pattern (Stripe pricing, Linear marketing).  */
@media (max-height: 820px) and (min-width: 1024px) {
  .v5-hero-mark {
    width: clamp(96px, 14vh, 150px) !important;
    height: clamp(96px, 14vh, 150px) !important;
  }
  .v5-hero-lockup .brand-display-mark {
    font-size: clamp(36px, 7vh, 60px) !important;
  }
  .v5-hero-lockup {
    margin-bottom: 16px !important;
    gap: clamp(14px, 2vw, 28px) !important;
  }
  .v5-registration { margin-bottom: 6px !important; font-size: 10px !important; }
  .hero h1 { font-size: clamp(30px, 6vh, 52px) !important; }
  .hero .lede {
    margin-top: 12px !important;
    font-size: clamp(14px, 1.8vh, 17px) !important;
  }
  .hero-cta-row { margin-top: 18px !important; }
  .hero-meta { margin-top: 20px !important; }
  .hero-stats { margin-top: 24px !important; }
  .hero-tag { margin-bottom: 16px !important; padding: 6px 12px !important; }
}

/* Even tighter for very short viewports (<=720h) */
@media (max-height: 720px) and (min-width: 1024px) {
  .v5-hero-mark {
    width: clamp(84px, 11vh, 130px) !important;
    height: clamp(84px, 11vh, 130px) !important;
  }
  .v5-hero-lockup .brand-display-mark {
    font-size: clamp(32px, 6vh, 52px) !important;
  }
  .hero h1 { font-size: clamp(28px, 5vh, 44px) !important; }
  .hero .lede { font-size: clamp(13px, 1.6vh, 16px) !important; }
  .hero-stats { margin-top: 18px !important; }
}

/* ---------- Stat tile clearance — laptop viewport fix (2026-05-12 PM) ----------
   Founder reported on laptop: stat tiles' bottom edges sit too close to the
   audit-strip section below — feels like they're being blocked / fading.
   Add real breathing room so the 4 tiles always have a clear visual stop
   before the next section starts.

   Approach:
   - Hero padding-bottom raised so content has clear room below the stat row
   - .hero-stats margin-bottom enforced as a safety
   - Audit-strip section padding-top raised so the "LIVE" pill never crowds
     the hero stats
   - Make sure overflow:hidden on .hero doesn't clip the stat-card box-shadow
*/
/* Keep hero overflow:hidden (so WebGL canvas stays contained), but add
   real bottom-padding + stat margin so tiles never crowd the next section.
   The min-height cap is also lifted on short viewports — let the hero grow
   to fit its content rather than squeezing stats against the audit strip. */
.hero {
  padding-bottom: clamp(56px, 7vh, 120px) !important;
}
.hero-stats {
  margin-bottom: clamp(16px, 2.5vh, 40px) !important;
  position: relative;
  z-index: 5;
}
.audit-strip-section {
  padding-top: clamp(48px, 5vh, 90px) !important;
  margin-top: 0 !important;
}
/* On short viewports, drop the 900px min-height cap so the hero just
   grows to fit content — no forced squeeze that pushes stats against
   the next section. */
@media (max-height: 820px) {
  .hero { min-height: auto !important; }
}

/* ---------- Mobile (<=600) — canvas hidden, lockup stacks ---------- */
@media (max-width: 600px) {
  #hero-canvas { display: none !important; }
  .v5-hero-mark {
    width: clamp(96px, 28vw, 130px) !important;
    height: clamp(96px, 28vw, 130px) !important;
  }
  .v5-hero-lockup {
    gap: 14px !important;
    margin-bottom: 18px !important;
  }
  .v5-hero-lockup .brand-display-mark {
    font-size: clamp(34px, 11vw, 52px) !important;
  }
  .hero h1 { font-size: clamp(28px, 7.5vw, 42px) !important; }
  .v5-registration { font-size: 10px !important; letter-spacing: 0.24em !important; }
}

/* =====================================================================
   v0.5 LAUNCH-READINESS additions (v=15→v=16, 2026-05-12)
   ===================================================================== */

/* ---------- Nav opacity fix (v=16) ----------
   styles.css set the sticky nav to rgba(2,6,8,0.78) + blur(20px). When the
   hero headline scrolled under the nav it looked half-faded because the
   nav's 22% transparency + blur partially showed the text through. Raise
   to 0.94 so the nav reads as solid and the headline either fully shows
   above or fully disappears behind — no half-faded mid-scroll state. */
header.nav{
  background:rgba(2,6,8,0.94) !important;
}
/* Scroll-padding so anchor-link jumps land below the sticky nav, not under it */
html{
  scroll-padding-top:88px;
}

/* ---------- Skip-to-content link (WCAG 2.4.1 Bypass Blocks) ----------
   Off-screen by default, slides in on focus. Becomes a teal pill at the
   top-left so keyboard users immediately see the bypass option. */
.skip-link{
  position:absolute; top:-48px; left:8px;
  background:var(--teal, #5eead4); color:#020608;
  padding:10px 16px; border-radius:8px;
  font-weight:800; font-size:13px; letter-spacing:0.04em;
  text-decoration:none; z-index:9999;
  box-shadow:0 4px 18px rgba(0,0,0,0.45);
  transform:translateY(-100%); transition:transform .18s ease, top .18s ease;
}
.skip-link:focus,.skip-link:focus-visible{
  top:8px; transform:translateY(0);
  outline:2px solid #22d3ee; outline-offset:2px;
}
main:focus{ outline:none; }

/* ---------- Universal focus ring (keyboard accessibility) ----------
   :focus-visible only applies on keyboard nav, so mouse users don't see it.
   WCAG 2.4.7 Focus Visible — Level AA. */
a:focus-visible, button:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid #22d3ee !important;
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Internal-instance label (Board v0.1 RED-2 framing) ---------- */
.hero-instance-label{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px; margin-bottom:8px;
  font-family:"JetBrains Mono","Cascadia Mono","SF Mono",monospace;
  font-size:11px; font-weight:700; letter-spacing:0.20em;
  text-transform:uppercase; color:#8aa19c;
  padding:6px 12px; border-radius:100px;
  background:rgba(94,234,212,0.04);
  border:1px solid rgba(94,234,212,0.18);
}
.hero-instance-dot{
  width:6px; height:6px; border-radius:50%;
  background:#5eead4; box-shadow:0 0 8px rgba(94,234,212,0.7);
  animation:hero-instance-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-instance-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.75)}
}

/* ---------- Red-line gate pattern card (Board v0.1 RED-1) ----------
   No numeric "0" — design-pattern card with icon. */
.hero-stat--pattern .pattern-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background:rgba(248,113,113,0.10);
  border:1px solid rgba(248,113,113,0.40);
  color:#fca5a5; font-size:22px; line-height:1;
  text-shadow:0 0 14px rgba(248,113,113,0.45);
}
.hero-stat--pattern .num{ font-size:30px; line-height:1; }
.hero-stat--pattern .label{ color:#fca5a5; }

/* ---------- Beta quote card (Board v0.1 RED-2) ---------- */
.proof-section{
  padding:clamp(48px, 6vw, 96px) 0;
  position:relative;
}
.proof-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(28px, 4vw, 64px);
  align-items:stretch;
}
@media (max-width:880px){
  .proof-grid{ grid-template-columns:1fr; }
}
.beta-quote{
  margin:0; padding:clamp(28px,3vw,42px);
  background:rgba(4,22,26,0.55);
  border:1px solid rgba(94,234,212,0.25);
  border-radius:16px;
  position:relative;
  backdrop-filter:blur(14px);
  display:flex; flex-direction:column; justify-content:center;
}
.beta-quote-mark{
  position:absolute; top:6px; left:18px;
  font-size:96px; line-height:1; font-weight:900;
  color:rgba(94,234,212,0.18);
  font-family:"Inter",Georgia,serif;
}
.beta-quote blockquote{
  margin:0 0 18px; padding:0;
  font-size:clamp(17px,1.6vw,21px);
  line-height:1.55; color:#e6f4f1;
  font-weight:500; letter-spacing:-0.005em;
  position:relative;
}
.beta-quote figcaption{ display:flex; flex-direction:column; gap:4px; }
.beta-quote-name{
  font-weight:800; color:#5eead4;
  font-size:14px; letter-spacing:0.06em;
}
.beta-quote-role{
  font-size:12.5px; color:rgba(230,244,241,0.65);
  line-height:1.5;
}

/* ---------- "See it work" video slot (Board v0.1 YELLOW-4) ----------
   Until founder drops in the real MP4, the .see-it-work-fallback shows
   instead (video errors out → poster + fallback text shows through). */
.see-it-work{ display:flex; }
.see-it-work-frame{
  position:relative; width:100%;
  aspect-ratio: 16 / 10;
  border-radius:16px; overflow:hidden;
  background:
    radial-gradient(ellipse 60% 60% at 30% 30%, rgba(94,234,212,0.18), transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(167,139,250,0.15), transparent 60%),
    rgba(4,22,26,0.70);
  border:1px solid rgba(94,234,212,0.22);
  display:flex; align-items:center; justify-content:center;
}
.see-it-work-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  background:transparent;
}
.see-it-work-fallback{
  position:relative; z-index:1;
  padding:clamp(20px,3vw,40px);
  text-align:center; max-width:520px;
}
.see-it-work-tag{
  display:inline-block;
  font-family:"JetBrains Mono",monospace;
  font-size:11px; font-weight:700; letter-spacing:0.20em;
  color:#5eead4; text-transform:uppercase;
  padding:6px 14px; border-radius:100px;
  background:rgba(94,234,212,0.08);
  border:1px solid rgba(94,234,212,0.30);
  margin-bottom:18px;
}
.see-it-work-fallback h3{
  font-size:clamp(18px,1.8vw,24px); font-weight:800;
  color:white; margin:0 0 10px; line-height:1.35;
  letter-spacing:-0.015em;
}
.see-it-work-fallback p{
  font-size:13.5px; color:rgba(230,244,241,0.65);
  margin:0; letter-spacing:0.02em;
}

/* ---------- Why-Now narrative section (Board v0.1 YELLOW-7) ---------- */
.why-now-section{
  padding:clamp(64px,8vw,120px) 0;
  position:relative;
}
.why-now-grid{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,96px);
  align-items:start;
}
@media (max-width:880px){
  .why-now-grid{ grid-template-columns:1fr; gap:24px; }
}
.why-now-eyebrow{
  color:#5eead4; font-family:"JetBrains Mono",monospace;
  font-size:12px; font-weight:700; letter-spacing:0.22em;
  text-transform:uppercase;
}
.why-now-head h2{
  font-size:clamp(28px,3.6vw,52px); font-weight:900;
  letter-spacing:-0.03em; line-height:1.08;
  margin:14px 0 0; color:white;
}
.why-now-body p{
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.7; color:rgba(230,244,241,0.85);
  margin:0 0 16px;
}
.why-now-body p em{
  color:#a78bfa; font-style:italic;
}

/* ---------- Contact form (Board v0.1 YELLOW-5: kill mailto) ---------- */
.contact-form{
  margin-top:28px;
  padding:clamp(20px,3vw,36px);
  background:rgba(4,22,26,0.42);
  border:1px solid rgba(94,234,212,0.18);
  border-radius:16px;
  backdrop-filter:blur(12px);
  max-width:760px;
}
.contact-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:18px;
}
.contact-field{ display:flex; flex-direction:column; gap:6px; }
.contact-field--wide{ grid-column:1 / -1; }
.contact-field span{
  font-size:11.5px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:#8aa19c;
}
.contact-field input,
.contact-field textarea{
  background:rgba(2,6,8,0.65);
  border:1px solid rgba(94,234,212,0.22);
  border-radius:10px;
  padding:12px 14px;
  font:inherit; font-size:14.5px; color:#e6f4f1;
  transition:border-color .15s, box-shadow .15s;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{ color:rgba(230,244,241,0.30); }
.contact-field input:focus,
.contact-field textarea:focus{
  outline:none;
  border-color:#5eead4;
  box-shadow:0 0 0 3px rgba(94,234,212,0.18);
}
.contact-form-foot{
  font-size:12.5px; color:rgba(230,244,241,0.55);
  margin:14px 0 0; line-height:1.55;
}
.contact-honey{
  position:absolute; left:-9999px; opacity:0; pointer-events:none;
}
@media (max-width:640px){
  .contact-form-grid{ grid-template-columns:1fr; }
}

/* ---------- Aurora gradient contrast lift (Board v0.1 YELLOW-5 a11y) ----
   Raise the mid stops ~10% brightness for AA contrast on dark base.

   v=16 bug fix: use background-IMAGE longhand. Earlier `background:` shorthand
   with !important silently reset background-clip back to border-box (CSS
   shorthand resets ALL longhand siblings), which broke .lens text-clipping
   on the wordmark — it rendered as a solid gradient rectangle. Longhand
   only sets the image; the existing background-clip: text rule still applies. */
.brand-display-mark .lens,
.wordmark .lens{
  background-image:linear-gradient(
    135deg,
    #5eead4 0%,
    #22d3ee 25%,
    #67e8f9 38%,
    #a78bfa 55%,
    #c4b5fd 70%,
    #f9a8d4 86%,
    #fde047 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* ---------- Stat tile a11y — make the hover hint visible on keyboard ---- */
.hero-stat:focus-visible{
  outline:2px solid #22d3ee; outline-offset:4px;
  transform:translateY(-2px);
  box-shadow:0 0 0 4px rgba(94,234,212,0.18), 0 6px 18px -8px rgba(0,0,0,0.5);
}

/* =====================================================================
   end v0.5 LAUNCH-READINESS additions
   ===================================================================== */

/* V5 mark + its animated children also get GPU promotion so the 5 simultaneous
   animations don't compete with video decode on a shared compositor layer. */
.v5-hero-mark {
  will-change: transform;
  transform: translateZ(0);
}
.v5-hero-mark .ring-rotate,
.v5-hero-mark .iris-3,
.v5-hero-mark .iris-pulse {
  will-change: transform;
}
.v5-hero-mark .core-dot,
.v5-hero-mark .seg {
  will-change: opacity;
}