/* ============================================================
   voidlens-base.css — shared chrome for the redesigned home + sub-pages
   v0.4.0 2026-05-19
   Brand: V5 Sentinel Eye (cool aurora default; warm aurora for investors)
   ============================================================ */

:root{
  --ink:#020608;--bg:#020608;--bg-elev-1:#072a2c;--bg-elev-2:#0e3a3c;
  --bg-card:rgba(94,234,212,.04);--bg-glass:rgba(2,6,8,.55);
  --text:#e6f4f1;--text-soft:rgba(230,244,241,.78);--text-mute:#7a8d9b;
  --border:rgba(94,234,212,.14);--border-strong:rgba(94,234,212,.32);
  --teal:#5eead4;--cyan:#22d3ee;--blue:#60a5fa;--violet:#a78bfa;--rose:#f472b6;--gold:#fbbf24;
  --aurora:linear-gradient(135deg,#5eead4 0%,#22d3ee 35%,#60a5fa 70%,#a78bfa 100%);
  --aurora-warm:linear-gradient(135deg,#fbbf24 0%,#f472b6 50%,#a78bfa 100%);
  --status-green:#34d399;--status-yellow:#fbbf24;--status-red:#f87171;
  --font-display:'Inter','SF Pro Display',system-ui,sans-serif;
  --font-body:'Inter','SF Pro Display',-apple-system,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',Consolas,'Courier New',monospace;
  --motion-fast:200ms;--motion-base:320ms;--ease:cubic-bezier(.5,0,.2,1);
}
/* Warm-aurora variant for investors page */
body.surface-operator-investor{
  --bg-elev-1:#062528;--bg-card:rgba(217,119,6,.06);
  --border:rgba(251,191,36,.20);--border-strong:rgba(251,191,36,.40);
  --text-soft:#fde68a;--text-mute:#a78b6b;
  --aurora:linear-gradient(135deg,#fbbf24 0%,#f472b6 40%,#be185d 75%,#a78bfa 100%);
  --aurora-warm:linear-gradient(135deg,#fbbf24 0%,#d97706 50%,#be185d 100%);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);color:var(--text);background:var(--bg);
  line-height:1.55;-webkit-font-smoothing:antialiased;font-size:16px;overflow-x:hidden;
  background-color:var(--ink);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(20,184,166,.18) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 18% 30%,rgba(167,139,250,.12) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 70%,rgba(244,114,182,.08) 0%,transparent 60%);
  background-attachment:fixed;
}
body.surface-operator-investor{
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(251,191,36,.16) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 22% 28%,rgba(190,24,93,.20) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 70%,rgba(217,119,6,.14) 0%,transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 100%,rgba(167,139,250,.10) 0%,transparent 60%);
}
a{color:var(--cyan);text-decoration:none}
body.surface-operator-investor a{color:var(--gold)}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:rgba(94,234,212,.28);color:#e6f4f1}
html{scroll-behavior:smooth}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Signals strip ===== */
.signals{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.85rem;padding:.55rem 1rem;background:rgba(2,6,8,.55);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:.72rem;color:var(--text-mute);letter-spacing:.04em;position:relative;z-index:20}
.signals strong{color:var(--teal);font-weight:600}
body.surface-operator-investor .signals strong{color:var(--gold)}
.signals .sep{opacity:.4}
.signals .pulse{width:6px;height:6px;border-radius:50%;background:var(--status-green);box-shadow:0 0 10px var(--status-green);animation:pdot 1.8s ease-in-out infinite}
@keyframes pdot{0%,100%{opacity:1}50%{opacity:.45}}

/* ===== Nav with dropdowns ===== */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:.85rem 2rem;background:rgba(2,6,8,.78);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--border)}
.nav__brand{display:flex;align-items:center;gap:.65rem;font-family:var(--font-display);font-weight:900;letter-spacing:-.03em}
.nav__wm{font-size:1.18rem}
.nav__wm .void{color:var(--text)}
.nav__wm .lens{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav__menu{display:none;align-items:center;gap:.4rem}
@media(min-width:920px){.nav__menu{display:flex}}
.nav__item{position:relative}
.nav__btn{padding:.5rem .85rem;border-radius:8px;font-size:.88rem;color:var(--text-soft);font-weight:500;transition:all var(--motion-fast);display:inline-flex;align-items:center;gap:.3rem}
.nav__btn:hover{color:var(--teal);background:rgba(94,234,212,.06)}
body.surface-operator-investor .nav__btn:hover{color:var(--gold);background:rgba(251,191,36,.06)}
.nav__btn .caret{font-size:.62rem;opacity:.5;transition:transform var(--motion-fast)}
.nav__item:hover .nav__btn .caret{transform:rotate(180deg);opacity:1}
.nav__drop{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;background:rgba(7,42,44,.96);border:1px solid var(--border-strong);border-radius:12px;padding:.5rem;box-shadow:0 18px 50px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all var(--motion-fast) var(--ease);backdrop-filter:blur(20px)}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1;visibility:visible;transform:none}
.nav__drop a{display:flex;flex-direction:column;gap:.18rem;padding:.65rem .85rem;border-radius:8px;color:var(--text);font-size:.9rem;transition:background var(--motion-fast)}
.nav__drop a:hover{background:rgba(94,234,212,.10)}
.nav__drop a span{color:var(--text-mute);font-size:.74rem;font-family:var(--font-mono)}
.nav__cta{padding:.55rem 1rem;border:1px solid var(--border-strong);border-radius:999px;color:var(--text);font-size:.84rem;font-weight:500;transition:all var(--motion-base) var(--ease)}
.nav__cta:hover{background:var(--bg-elev-1);border-color:var(--teal);box-shadow:0 0 24px rgba(94,234,212,.18)}
body.surface-operator-investor .nav__cta:hover{border-color:var(--gold);box-shadow:0 0 24px rgba(251,191,36,.2)}

/* ===== Sentinel Eye mascot ===== */
.eye{display:inline-block;vertical-align:middle}
.eye .ring-rotate{transform-origin:50% 50%;animation:eye-rot 22s linear infinite}
.eye .iris-pulse{transform-origin:50% 50%;animation:eye-pulse 4.8s ease-in-out infinite}
.eye .core-dot{animation:eye-dot 2.6s ease-in-out infinite}
@keyframes eye-rot{to{transform:rotate(360deg)}}
@keyframes eye-pulse{0%,100%{transform:scale(1)}50%{transform:scale(.965)}}
@keyframes eye-dot{0%,100%{opacity:1;r:1.4}50%{opacity:.5;r:2.2}}
@media(prefers-reduced-motion:reduce){.eye *{animation:none!important}}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:999px;font-weight:500;font-size:.94rem;transition:all var(--motion-base) var(--ease);border:1px solid transparent;cursor:pointer}
.btn--primary{background:var(--aurora);color:#02141a;font-weight:600;box-shadow:0 12px 40px rgba(94,234,212,.18)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 12px 40px rgba(94,234,212,.32)}
body.surface-operator-investor .btn--primary{color:#2a1810;box-shadow:0 12px 40px rgba(251,191,36,.2)}
body.surface-operator-investor .btn--primary:hover{box-shadow:0 12px 40px rgba(251,191,36,.4)}
.btn--ghost{border-color:var(--border-strong);color:var(--text);background:rgba(2,6,8,.4);backdrop-filter:blur(6px)}
.btn--ghost:hover{background:var(--bg-elev-1);border-color:var(--teal)}
body.surface-operator-investor .btn--ghost:hover{border-color:var(--gold)}

/* ===== Section shell ===== */
.section{padding:5rem 1.5rem;width:100%;max-width:min(96vw,2400px);margin:0 auto;position:relative}
@media(min-width:1020px){.section{padding:5.5rem 2.5rem}}
@media(min-width:1440px){.section{padding:6rem 4rem}}
.section__eyebrow{display:inline-block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:.85rem;padding:.28rem 0;border-bottom:2px solid;border-image:var(--aurora) 1}
body.surface-operator-investor .section__eyebrow{color:var(--gold)}
.section__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.85rem,3.2vw,2.7rem);letter-spacing:-.03em;line-height:1.08;margin:0 0 .7rem;max-width:1000px}
.section__title .grad{background:var(--aurora-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.section__title .grad-cool{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.section__lede{font-size:1.04rem;color:var(--text-soft);max-width:820px;line-height:1.6;margin:0 0 2.4rem}
.section__cta{display:inline-flex;align-items:center;gap:.4rem;color:var(--cyan);font-family:var(--font-mono);font-size:.86rem;border-bottom:1px solid transparent;padding:.2rem 0;margin-top:.5rem;transition:border-color var(--motion-fast)}
.section__cta:hover{border-color:var(--cyan)}
body.surface-operator-investor .section__cta{color:var(--gold)}
body.surface-operator-investor .section__cta:hover{border-color:var(--gold)}

/* ===== Vision-style colored cards ===== */
.vision{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:760px){.vision{grid-template-columns:repeat(3,1fr)}}
.vcard{padding:1.6rem 1.5rem;background:var(--bg-glass);border:1px solid;border-radius:14px;transition:all var(--motion-base) var(--ease);position:relative;overflow:hidden}
.vcard:hover{transform:translateY(-3px);box-shadow:0 16px 50px rgba(0,0,0,.45)}
.vcard--cyan{border-color:rgba(34,211,238,.4)}
.vcard--cyan:hover{border-color:var(--cyan);box-shadow:0 16px 50px rgba(34,211,238,.18)}
.vcard--rose{border-color:rgba(244,114,182,.42)}
.vcard--rose:hover{border-color:var(--rose);box-shadow:0 16px 50px rgba(244,114,182,.20)}
.vcard--gold{border-color:rgba(251,191,36,.42)}
.vcard--gold:hover{border-color:var(--gold);box-shadow:0 16px 50px rgba(251,191,36,.20)}
.vcard__title{font-family:var(--font-display);font-weight:800;font-size:1.32rem;letter-spacing:-.02em;margin:0 0 .8rem}
.vcard--cyan .vcard__title{color:var(--cyan)}
.vcard--rose .vcard__title{color:var(--rose)}
.vcard--gold .vcard__title{color:var(--gold)}
.vcard__body{font-size:.95rem;color:var(--text-soft);line-height:1.55;margin:0}
.vcard__body code{font-family:var(--font-mono);font-size:.78rem;padding:.1rem .35rem;background:var(--bg-card);border-radius:4px;color:var(--teal)}
body.surface-operator-investor .vcard__body code{color:var(--gold)}

/* ===== Panels / cards (utility) ===== */
.panel{background:var(--bg-glass);border:1px solid var(--border);border-radius:12px;padding:1.4rem 1.5rem}
.panel--strong{border-color:var(--border-strong)}
.panel__title{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);margin:0 0 .85rem}

/* ===== Founder block ===== */
.founder{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
@media(min-width:760px){.founder{grid-template-columns:130px 1fr;gap:1.8rem}}
.founder__avatar{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,rgba(94,234,212,.18),rgba(167,139,250,.18));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:2.6rem;letter-spacing:-.02em;color:var(--teal);border:1px solid var(--border-strong);box-shadow:inset 0 0 30px rgba(94,234,212,.18)}
body.surface-operator-investor .founder__avatar{color:var(--gold);background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(244,114,182,.18));box-shadow:inset 0 0 30px rgba(251,191,36,.18)}
.founder__name{font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;margin:0 0 .35rem}
.founder__role{font-family:var(--font-mono);font-size:.74rem;color:var(--text-mute);letter-spacing:.12em;text-transform:uppercase;margin:0 0 1rem}
.founder__body{font-size:.95rem;color:var(--text-soft);line-height:1.6;margin:0 0 1rem;max-width:660px}
.founder__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.founder__chips span{padding:.28rem .7rem;border:1px solid var(--border);border-radius:999px;font-family:var(--font-mono);font-size:.66rem;color:var(--text-mute);letter-spacing:.1em;text-transform:uppercase}

/* ===== Final CTA ===== */
.cta-final{padding:4rem 2rem;text-align:center;max-width:820px;margin:0 auto}
.cta-final h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.85rem,3.2vw,2.6rem);letter-spacing:-.03em;line-height:1.1;margin:0 0 1.1rem}
.cta-final h2 .grad{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-final p{font-size:1rem;color:var(--text-soft);margin:0 auto 2rem;max-width:560px}
.cta-final__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}

/* ===== Footer ===== */
.footer{padding:3.5rem 2rem 2rem;border-top:1px solid var(--border);margin-top:3rem;background:transparent}
.footer__inner{width:100%;max-width:min(96vw,2400px);margin:0 auto;display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:760px){.footer__inner{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}}
.footer__brand p{color:var(--text-soft);font-size:.88rem;line-height:1.55;margin:.7rem 0 0;max-width:280px}
.footer__col h5{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--text-mute);text-transform:uppercase;margin:0 0 .85rem;font-weight:500}
.footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}
.footer__col a{color:var(--text-soft);font-size:.86rem;transition:color var(--motion-fast)}
.footer__col a:hover{color:var(--teal)}
body.surface-operator-investor .footer__col a:hover{color:var(--gold)}
.footer__strip{width:100%;max-width:min(96vw,2400px);margin:2.5rem auto 0;padding-top:1.4rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-family:var(--font-mono);font-size:.72rem;color:var(--text-mute);letter-spacing:.04em}
.footer__legal{opacity:1!important;display:inline-flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.footer__legal a{color:var(--teal);text-decoration:none;font-weight:600}
.footer__legal a:hover{text-decoration:underline}

/* ===== Page hero (for sub-pages) ===== */
.page-hero{padding:4.5rem 2rem 2rem;max-width:min(96vw,2400px);margin:0 auto;text-align:left}
.page-hero__eye{margin-bottom:1rem}
.page-hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.2rem,4.5vw,3.6rem);letter-spacing:-.04em;line-height:1.04;margin:.8rem 0 1rem;max-width:980px}
.page-hero h1 .grad{background:var(--aurora);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero h1 .grad-warm{background:var(--aurora-warm);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-hero__lede{font-size:1.1rem;color:var(--text-soft);max-width:820px;line-height:1.6;margin:0}

/* ============================================================
   Dead-space decoration v0.1 (2026-05-21)
   Static ambient brand-aligned gradients to fill empty regions.
   Respects V5 motion spec section 6 — STATIC ONLY, no looped
   animations outside the mark. The Sentinel Companion canvas
   carries all ambient motion.
   ============================================================ */

/* Boost body radial-gradient layers — strong top-of-page aurora band,
   richer mid-page gradients, eliminate flat-black dead zones.
   v0.8: prepended a directional MOONBEAM anchored to upper-right corner
   (where the corner companion mascot lives). Renders as a cone of
   aurora light emanating from the mascot's position diagonally across
   the page — Sauron's-eye effect. */
body{
  /* v0.10 (2026-05-22) — IRIS-FOLLOWING MOONBEAM.
     voidlens-companion.js writes --gaze-x and --gaze-y on body each frame
     (smoothed cursor position as viewport percentages). We use them to
     stack three layers:
       1. STATIC source halo at the companion (88% 22%) — the eye is always
          glowing, even when cursor is off-page.
       2. DYNAMIC shaft midway between companion and gaze — the visible
          "beam of light" connecting source to landing point. Stretches
          and contracts as the gaze moves.
       3. DYNAMIC landing spotlight at the gaze position — the hot point
          where the moonbeam is actively shining.
     CSS calc() blends the static (88%, 22%) anchor with the dynamic gaze
     vars to compute the shaft midpoint. var() fallback to 50% 50% so the
     beam still shows reasonably before the first frame of JS runs. */
  background-image:
    /* 1 — companion source halo (always on at the mascot's actual position).
       v0.11 (2026-05-23) — alphas bumped ~28% so the corner reads as the
       clear moonbeam origin: .22→.28, .12→.16. */
    radial-gradient(ellipse 22% 26% at 88% 22%,
      rgba(94,234,212,.28) 0%,
      rgba(34,211,238,.16) 30%,
      transparent 70%),
    /* 2 — dynamic shaft, anchored at midpoint between (88%, 22%) and gaze.
       v0.11 — .13→.17, .07→.09 for clearer beam-direction read. */
    radial-gradient(ellipse 75% 52%
      at calc((88% + var(--gaze-x, 50%)) / 2)
         calc((22% + var(--gaze-y, 50%)) / 2),
      rgba(94,234,212,.17) 0%,
      rgba(34,211,238,.09) 38%,
      transparent 78%),
    /* 3 — dynamic landing spotlight where the eye is looking.
       v0.11 — .12→.15, .06→.08. */
    radial-gradient(ellipse 28% 32%
      at var(--gaze-x, 50%) var(--gaze-y, 50%),
      rgba(94,234,212,.15) 0%,
      rgba(34,211,238,.08) 40%,
      transparent 76%);
}
body.surface-operator-investor{
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(251,191,36,.18) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 22% 28%,rgba(190,24,93,.22) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 82% 70%,rgba(217,119,6,.16) 0%,transparent 60%),
    radial-gradient(ellipse 40% 30% at 8% 80%,rgba(244,114,182,.10) 0%,transparent 65%),
    radial-gradient(ellipse 35% 28% at 92% 18%,rgba(251,191,36,.12) 0%,transparent 65%),
    radial-gradient(ellipse 70% 40% at 50% 100%,rgba(167,139,250,.12) 0%,transparent 60%);
}

/* Section-level decoration — static aurora glow halos in dead corners.
   Sits ABOVE the companion canvas (z-index 1) so the gradient is
   visibly painted on top of the mascot field for richer composition.
   Below z-index 2+ where content lives. */
.section{position:relative;isolation:isolate}
/* v0.15 SEAMLESS SPACE (founder direction 2026-06-06): the per-section corner
   glows repeated on every section and read as visible section bands on large
   monitors -- the background stopped feeling like one continuous space. All
   per-section / per-hero decorative glows are removed; the FIXED starfield
   canvas + the single fixed body::after halo + the scanline overlay carry the
   cosmos, so sections are fully transparent and space reads seamless. */
.section::before,
.section::after{ content:none; }
.section > *{position:relative;z-index:2}

/* CTA-final + page-hero + footer decoration — same shape as .section */
.cta-final,.page-hero{position:relative;isolation:isolate}
.cta-final::before,
.page-hero::before{ content:none; }
.cta-final > *,.page-hero > *{position:relative;z-index:2}

/* Subtle scanline texture overlay across the whole document.
   Pure SVG data-uri — zero JS, zero animation, ~0.03 opacity. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><line x1='0' y1='0' x2='6' y2='0' stroke='%235eead4' stroke-width='1' opacity='0.6'/></svg>");
  background-repeat:repeat;
  mix-blend-mode:overlay;
}

/* SITE-WIDE COSMIC HAZE v0.13 (2026-05-22) — STRIPPED.
   The screen-blend additive layers were tinting every obsidian box green
   and washing out the deep-space feel. v0.13 keeps only a single faint
   reinforcing halo around the companion's position and lets the starfield
   plus the dark void be the dominant visual. mix-blend-mode set to normal
   so no additive color compounds onto the boxes underneath. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-color:transparent;
  background-image:
    /* faint reinforcing halo around the companion — extends the moonbeam source softly.
       v0.11 (2026-05-23) — .07→.09, .035→.045 for clearer corner-glow read. */
    radial-gradient(ellipse 32% 34% at 88% 22%,
      rgba(94,234,212,.09) 0%,
      rgba(34,211,238,.045) 35%,
      transparent 78%);
  mix-blend-mode:normal;
  animation:none;
}
@keyframes siteHazeBreath{
  0%,100% { opacity:.90; transform:scale(1); }
  50%     { opacity:1.00; transform:scale(1.03); }
}
@media (prefers-reduced-motion:reduce){
  body::after{animation:none;opacity:.95}
}

/* ============================================================
   v0.14: kill wrapper boxes that nest boxes-inside-boxes.
   Founder direction: 'the whole bottom section looks like a bunch
   of boxes, inside boxes, blocking the background behind it.'
   Make wrappers PURELY layout (transparent, no border, no padding
   that creates a visual box). Inner glass boxes then float freely
   against the cosmic background.
   ============================================================ */
/* Wrapper-killer overrides MOVED to end of file below box rule.
   These selectors are intentionally bumped via body-prefix to beat
   the universal box treatment's specificity tie + later-source-order. */

/* Panel + card transparency boost so body gradient + companion show through.
   The companion canvas sits at z-index 0 fixed under content; backdrop blur
   in panels lets the warmth bleed through. */
.kpicard,.panel,.launch__board{
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
}

/* ============================================================
   Obsidian glass v0.3 (2026-05-21): make boxes look like real 3D
   panels of black obsidian glass — surface reflections where there
   is no text, deep depth, hard specular top-edge, soft prismatic
   color tinting in the surface gradient.
   ============================================================ */
.panel,
.kpicard,
.launch__board,
.bigstep,
.ladder-detail,
.clock-row,
.litem,
.dcard,
.ddcard,
.tile,
.feature-card,
.step-card,
.timeline-step,
.step,
.orbital__detail,
.dept,
.qcard,
.rung,
.side-card,
.tier,
.faq__item,
.rail,
.red-cell,
.inv-block,
.inv-stat,
.team-row,
.use-cell,
.tier-card,
.tm-card,
.nda-gate,
.numbers__inner,
.vcard,
.brain,
.bmetric,
.ollama-cell,
.router,
.founder,
.ip__main,
.tier-card,
.tm-card{
  /* obsidian surface — layered gradients give the "polished black glass" feel.
     v0.8: shine sweep moved from ::before pseudo INTO this background stack as
     the topmost layer so page-local ::before rules (trust.html .rail aurora
     bar, launch.html .launch__board top bar) don't override it. */
  background:
    /* SHINE LAYER v0.17 — MOONBEAM PROJECTION (readability pass).
       v0.17 cuts the peak brightness so text behind the shine stays
       readable. Peak from 1.00 white -> 0.35 cyan-tinted; mid alphas
       cut roughly to a third. The shine still reads as a moving
       reflection on glass (especially with the slight cyan tint at
       the core) but no longer bleaches out the white text underneath.
       The shine is multiplied by --shine-opacity (0..1) and positioned
       via --shine-x — both set by voidlens-companion.js per-panel each
       frame from the gaze coordinates. */
    linear-gradient(var(--shine-angle, 115deg),
      transparent 0%,
      transparent 28%,
      rgba(255,255,255, calc(.11 * var(--shine-opacity, 0))) 34%,
      rgba(255,255,255, calc(.23 * var(--shine-opacity, 0))) 42%,
      rgba(255,255,255, calc(.35 * var(--shine-opacity, 0))) 47%,
      rgba(200,255,250, calc(.44 * var(--shine-opacity, 0))) 50%,
      rgba(255,255,255, calc(.35 * var(--shine-opacity, 0))) 53%,
      rgba(255,255,255, calc(.23 * var(--shine-opacity, 0))) 58%,
      rgba(255,255,255, calc(.11 * var(--shine-opacity, 0))) 66%,
      transparent 72%,
      transparent 100%),
    /* mascot-side ambient light tint — bumped */
    radial-gradient(ellipse 90% 70% at 100% 0%,
      rgba(94,234,212,.22) 0%,
      rgba(34,211,238,.12) 32%,
      transparent 70%),
    /* CONSTELLATION REFLECTION v0.13 — anchored INSIDE the box at 75% 18%,
       sized 130% so most of the texture fills the box. The brain network
       is now actually visible reflected on the glass. soft-light blend. */
    url("images/constellation-reflection.png"),
    /* diagonal aurora-tinted reflection band (the prismatic glint) */
    linear-gradient(135deg,
      rgba(94,234,212,.10) 0%,
      rgba(34,211,238,.06) 22%,
      transparent 50%,
      transparent 72%,
      rgba(167,139,250,.08) 100%),
    /* main obsidian fill — radial darker toward edges */
    radial-gradient(ellipse 110% 130% at 50% -10%,
      rgba(14,42,46,.92) 0%,
      rgba(4,12,16,.96) 70%,
      rgba(2,6,8,.98) 100%) !important;
  background-size:280% 100%, auto, 130% 130%, auto, auto !important;
  /* v0.15 — bg-position keeps !important (page-local rules would otherwise
     reset it to 0 0); the ANIMATABLE part is a registered CSS custom
     property (--shine-x, see @property below). The animation animates the
     custom property, and the !important on background-position uses
     var(--shine-x) — so the animation flows through without conflicting
     with the !important cascade rule. */
  background-position:var(--shine-x, -180%) 0%, 0 0, 75% 18%, 0 0, 0 0 !important;
  background-repeat:no-repeat !important;
  background-blend-mode:normal, normal, soft-light, normal, normal !important;
  /* v0.15 — boxShineSweep ambient animation REMOVED. The shine is now
     entirely driven by JS-set CSS variables (--shine-x for position,
     --shine-opacity for brightness) so it visibly belongs to the moonbeam,
     not a separate timeline. Panels without an active beam show no shine. */
  border-color:rgba(94,234,212,.42)!important; /* brighter teal edge */
  box-shadow:
    /* outer aurora glow halo */
    0 0 40px rgba(94,234,212,.18),
    /* depth drop-shadow (sits the panel above the starscape) */
    0 14px 40px rgba(0,0,0,.70),
    /* hard inner TOP-edge specular highlight — THE glass shine */
    inset 0 1px 0 rgba(255,255,255,.22),
    /* soft inner top diffuse — like ambient light entering glass */
    inset 0 6px 18px rgba(94,234,212,.08),
    /* inner bottom-edge depth shadow (gives the panel real thickness) */
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 0 -8px 22px rgba(0,0,0,.32),
    /* left/right prismatic edge color */
    inset 1px 0 0 rgba(167,139,250,.10),
    inset -1px 0 0 rgba(34,211,238,.10),
    /* upper-right inset glow tinted toward mascot direction */
    inset -3px 3px 24px rgba(94,234,212,.10);
  backdrop-filter:saturate(160%) blur(14px) contrast(1.05);
  -webkit-backdrop-filter:saturate(160%) blur(14px) contrast(1.05);
  position:relative;
  isolation:isolate;
  overflow:hidden;   /* contain the shimmer-sweep so it doesn't bleed out */
}

/* Surface sheen ::before — STATIC specular at top of each box.
   The animated shine sweep lives in the box's own background-image stack
   (see above) so it doesn't conflict with page-local ::before rules.
   This ::before stays purely decorative top-half brightness. */
.panel::before,
.kpicard::before,
.launch__board::before,
.bigstep::before,
.ladder-detail::before,
.clock-row::before,
.litem::before,
.dcard::before,
.ddcard::before,
.step::before,
.orbital__detail::before,
.dept::before,
.qcard::before,
.rung::before,
.side-card::before,
.tier::before,
.faq__item::before,
.red-cell::before,
.inv-block::before,
.inv-stat::before,
.team-row::before,
.use-cell::before,
.tier-card::before,
.tm-card::before,
.nda-gate::before,
.numbers__inner::before,
.vcard::before,
.brain::before,
.bmetric::before,
.ollama-cell::before,
.router::before,
.founder::before,
.ip__main::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0; height:55%;
  border-top-left-radius:inherit;
  border-top-right-radius:inherit;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.055) 25%,
      rgba(255,255,255,.018) 60%,
      transparent 100%),
    linear-gradient(108deg,
      transparent 0%,
      transparent 25%,
      rgba(255,255,255,.085) 40%,
      rgba(255,255,255,.035) 55%,
      transparent 78%);
  pointer-events:none;
  z-index:0;
  mix-blend-mode:screen;
  opacity:.95;
}

/* boxShineSweep v0.13 — faster cycle (16s), shorter pause (50%), longer
   visible sweep (50% of cycle = 8 seconds), so the gleam actually reads. */
/* @property registers --shine-x (peak X position in background-position %)
   and --shine-opacity (0..1 multiplier on shine alpha) as typed custom
   properties. With <percentage> and <number> syntaxes, the browser
   interpolates them smoothly when JS sets them each frame (via implicit
   style transition), giving the shine fluid motion that follows the
   gaze coordinates rather than a separate animation timeline. */
@property --shine-x {
  syntax: '<percentage>';
  inherits: false;
  /* Initial value 50% = peak centered on panel (only matters when
     --shine-opacity is non-zero before JS sets a real value, which is
     ~never). Valid range when gaze is on the panel: ~[22%, 78%]. */
  initial-value: 50%;
}
@property --shine-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --shine-angle {
  syntax: '<angle>';
  inherits: false;
  /* Default 115deg = the original V5 visual; voidlens-companion.js
     overrides per-panel each frame with the angle from that panel to
     the companion's position, so the stripe leans the same way the
     moonbeam is actually hitting that specific obsidian surface. */
  initial-value: 115deg;
}
:is(.panel,.kpicard,.launch__board,.bigstep,.ladder-detail,.clock-row,.litem,.dcard,.ddcard,.step,.orbital__detail,.dept,.qcard,.rung,.side-card,.tier,.faq__item,.rail,.red-cell,.inv-block,.inv-stat,.team-row,.use-cell,.tier-card,.tm-card,.nda-gate,.numbers__inner,.vcard,.brain,.bmetric,.ollama-cell,.router,.founder,.ip__main):nth-of-type(4n+1){ animation-delay:0s; }
:is(.panel,.kpicard,.launch__board,.bigstep,.ladder-detail,.clock-row,.litem,.dcard,.ddcard,.step,.orbital__detail,.dept,.qcard,.rung,.side-card,.tier,.faq__item,.rail,.red-cell,.inv-block,.inv-stat,.team-row,.use-cell,.tier-card,.tm-card,.nda-gate,.numbers__inner,.vcard,.brain,.bmetric,.ollama-cell,.router,.founder,.ip__main):nth-of-type(4n+2){ animation-delay:5.5s; }
:is(.panel,.kpicard,.launch__board,.bigstep,.ladder-detail,.clock-row,.litem,.dcard,.ddcard,.step,.orbital__detail,.dept,.qcard,.rung,.side-card,.tier,.faq__item,.rail,.red-cell,.inv-block,.inv-stat,.team-row,.use-cell,.tier-card,.tm-card,.nda-gate,.numbers__inner,.vcard,.brain,.bmetric,.ollama-cell,.router,.founder,.ip__main):nth-of-type(4n+3){ animation-delay:11s; }
:is(.panel,.kpicard,.launch__board,.bigstep,.ladder-detail,.clock-row,.litem,.dcard,.ddcard,.step,.orbital__detail,.dept,.qcard,.rung,.side-card,.tier,.faq__item,.rail,.red-cell,.inv-block,.inv-stat,.team-row,.use-cell,.tier-card,.tm-card,.nda-gate,.numbers__inner,.vcard,.brain,.bmetric,.ollama-cell,.router,.founder,.ip__main):nth-of-type(4n+4){ animation-delay:16.5s; }

@media (prefers-reduced-motion:reduce){
  :is(.panel,.kpicard,.launch__board,.bigstep,.ladder-detail,.clock-row,.litem,.dcard,.ddcard,.step,.orbital__detail,.dept,.qcard,.rung,.side-card,.tier,.faq__item,.rail,.red-cell,.inv-block,.inv-stat,.team-row,.use-cell,.tier-card,.tm-card,.nda-gate,.numbers__inner,.vcard,.brain,.bmetric,.ollama-cell,.router,.founder,.ip__main){animation:none}
}

/* Surface DETAIL ::after — Firefly-generated photoreal obsidian glass
   texture (1024x1024, generated 2026-05-21 via Gemini 3.1 + Nano Banana 2).
   This is the move that pushes us past procedural CSS — real photographic
   surface with scratches, polish marks, light catches.
   - mix-blend-mode overlay: bright streaks brighten the box surface,
     dark scratches deepen the obsidian -> photoreal material reading
   - opacity ~38%: enough to read as texture, not enough to obscure text
   - background-size cover + position center: each box gets a unique
     "framed" slice of the texture instead of tiling visible seams */
.panel::after,
.kpicard::after,
.launch__board::after,
.bigstep::after,
.ladder-detail::after,
.clock-row::after,
.litem::after,
.dcard::after,
.ddcard::after,
.step::after,
.orbital__detail::after,
.dept::after,
.qcard::after,
.rung::after,
.side-card::after,
.tier::after,
.faq__item::after,
.rail::after,
.red-cell::after,
.inv-block::after,
.inv-stat::after,
.team-row::after,
.use-cell::after,
.tier-card::after,
.tm-card::after,
.nda-gate::after,
.numbers__inner::after,
.vcard::after,
.brain::after,
.bmetric::after,
.ollama-cell::after,
.router::after,
.founder::after,
.ip__main::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  opacity:.58;
  mix-blend-mode:overlay;
  background-image:url("images/obsidian-glass.png");
  background-size:140% 140%;       /* slight zoom so each crop shows interesting area */
  background-position:center;       /* default — overridden by nth-of-type below */
  background-repeat:no-repeat;
}

/* ============================================================
   Texture variation cycle — 4 unique crops + filter shifts so
   no two adjacent boxes on a page look identical.
   Light direction stays consistent (same source image, sampled
   at different positions; texture's embedded light source from
   above-left is preserved across all crops).
   :nth-of-type counts among siblings, so each parent container
   restarts the cycle — sections look balanced within themselves.
   ============================================================ */
:is(.panel,.kpicard,.launch__board,.bigstep,.ladder-detail,.clock-row,.litem,.dcard,.ddcard,.step,.orbital__detail,.dept,.qcard,.rung,.side-card,.tier,.faq__item,.rail,.red-cell,.inv-block,.inv-stat,.team-row,.use-cell,.tier-card,.tm-card,.nda-gate,.numbers__inner,.vcard,.brain,.bmetric,.ollama-cell,.router,.founder,.ip__main):nth-of-type(4n+1)::after{
  background-position:28% 32%;
}
:is(.panel,.kpicard,.launch__board,.bigstep,.ladder-detail,.clock-row,.litem,.dcard,.ddcard,.step,.orbital__detail,.dept,.qcard,.rung,.side-card,.tier,.faq__item,.rail,.red-cell,.inv-block,.inv-stat,.team-row,.use-cell,.tier-card,.tm-card,.nda-gate,.numbers__inner,.vcard,.brain,.bmetric,.ollama-cell,.router,.founder,.ip__main):nth-of-type(4n+2)::after{
  background-position:72% 28%;
  filter:hue-rotate(8deg) brightness(.95);
}
:is(.panel,.kpicard,.launch__board,.bigstep,.ladder-detail,.clock-row,.litem,.dcard,.ddcard,.step,.orbital__detail,.dept,.qcard,.rung,.side-card,.tier,.faq__item,.rail,.red-cell,.inv-block,.inv-stat,.team-row,.use-cell,.tier-card,.tm-card,.nda-gate,.numbers__inner,.vcard,.brain,.bmetric,.ollama-cell,.router,.founder,.ip__main):nth-of-type(4n+3)::after{
  background-position:30% 75%;
  filter:hue-rotate(-6deg) brightness(1.06);
}
:is(.panel,.kpicard,.launch__board,.bigstep,.ladder-detail,.clock-row,.litem,.dcard,.ddcard,.step,.orbital__detail,.dept,.qcard,.rung,.side-card,.tier,.faq__item,.rail,.red-cell,.inv-block,.inv-stat,.team-row,.use-cell,.tier-card,.tm-card,.nda-gate,.numbers__inner,.vcard,.brain,.bmetric,.ollama-cell,.router,.founder,.ip__main):nth-of-type(4n+4)::after{
  background-position:75% 70%;
  filter:hue-rotate(12deg) brightness(.92) saturate(1.12);
}

/* Make sure existing card content stays above the reflection sheen + noise */
.panel > *,
.kpicard > *,
.launch__board > *,
.bigstep > *,
.ladder-detail > *,
.clock-row > *,
.litem > *,
.dcard > *,
.ddcard > *,
.step > *,
.orbital__detail > *,
.dept > *,
.qcard > *,
.rung > *,
.side-card > *,
.tier > *,
.faq__item > *,
.rail > *,
.red-cell > *,
.inv-block > *,
.inv-stat > *,
.team-row > *,
.use-cell > *,
.tier-card > *,
.tm-card > *,
.nda-gate > *,
.numbers__inner > *,
.vcard > *,
.brain > *,
.bmetric > *,
.ollama-cell > *,
.router > *,
.founder > *,
.ip__main > *{position:relative;z-index:1}

/* Warm-aurora variant for investor surface */
body.surface-operator-investor .panel,
body.surface-operator-investor .kpicard,
body.surface-operator-investor .launch__board,
body.surface-operator-investor .bigstep,
body.surface-operator-investor .ladder-detail,
body.surface-operator-investor .clock-row,
body.surface-operator-investor .litem,
body.surface-operator-investor .dcard,
body.surface-operator-investor .ddcard{
  background:rgba(32,22,8,.82);
  border-color:rgba(251,191,36,.40)!important;
  box-shadow:
    0 0 36px rgba(251,191,36,.18),
    0 8px 28px rgba(2,6,8,.55),
    inset 0 1px 0 rgba(251,191,36,.22);
}

/* Hover-lift on interactive cards (where the box invites a click) */
.bigstep:hover,
.kpicard:hover{
  border-color:var(--teal)!important;
  box-shadow:
    0 0 48px rgba(94,234,212,.26),
    0 12px 36px rgba(2,6,8,.70),
    inset 0 1px 0 rgba(94,234,212,.32);
  transform:translateY(-1px);
}
body.surface-operator-investor .bigstep:hover,
body.surface-operator-investor .kpicard:hover{
  border-color:var(--gold)!important;
  box-shadow:
    0 0 48px rgba(251,191,36,.28),
    0 12px 36px rgba(2,6,8,.70),
    inset 0 1px 0 rgba(251,191,36,.32);
}

/* Vertical aurora "vein" — a thin glowing accent that sits behind hero text,
   purely static. Anchored to .page-hero left edge. */
.page-hero::after{
  content:"";
  position:absolute;
  top:1rem;left:.5rem;
  width:2px;height:calc(100% - 2rem);
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(94,234,212,.55) 12%,
    rgba(34,211,238,.65) 38%,
    rgba(167,139,250,.50) 70%,
    transparent 100%);
  border-radius:2px;
  filter:blur(1px);
  opacity:.65;
  pointer-events:none;
  z-index:1;
}
body.surface-operator-investor .page-hero::after{
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(251,191,36,.55) 12%,
    rgba(244,114,182,.65) 38%,
    rgba(167,139,250,.50) 70%,
    transparent 100%);
}

/* Soft halo behind nav — gives the sticky nav a subtle aurora glow */
.nav::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(94,234,212,.10) 0%,transparent 60%);
  z-index:-1;
}

/* ============================================================
   WRAPPER-KILLER OVERRIDES (v0.14, end-of-file placement)
   These selectors strip glass treatment from wrapper containers
   that should be PURE LAYOUT (transparent, no border, no padding
   that creates a visual box). Inner glass boxes then float freely
   against the cosmic background.

   Specificity bumped via body-prefix (0,1,1) so they win against
   the universal box rule (.panel,...,.founder,.../{0,1,0}) which
   sits earlier in the file with !important.
   ============================================================ */
body .ollama-deep{
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  animation:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body .ollama-deep::before,
body .ollama-deep::after{display:none !important;}

body .hero__inner{
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  animation:none !important;
}

body .founder{
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  box-shadow:none !important;
  animation:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body .founder::before,
body .founder::after{display:none !important;}


/* ============================================================================
   v0.3.0 — IRIS-FOLLOWING GLEAM (driven by voidlens-companion.js)
   When the companion's gaze sweeps over a panel-family element, the JS adds
   .in-beam to that element each ~5 frames. CSS responds with a transient
   amplified aurora edge + outer glow, giving the "the eye is lighting it up"
   effect. The 280ms transition smooths the entry/exit so it feels like glass
   catching a moving light, not a JS class flip.
   ============================================================================ */
.panel, .kpicard, .launch__board, .bigstep, .ladder-detail, .clock-row, .litem,
.dcard, .ddcard, .tile, .feature-card, .step-card, .timeline-step, .step,
.orbital__detail, .dept, .qcard, .rung, .side-card, .tier, .faq__item, .rail,
.red-cell, .inv-block, .inv-stat, .team-row, .use-cell, .tier-card, .tm-card,
.nda-gate, .numbers__inner, .vcard, .brain, .bmetric, .ollama-cell, .router,
.founder, .ip__main, .hp-card{
  /* v0.4.2 — added --shine-x / --shine-opacity / --shine-angle transitions so
     the JS at 10Hz interpolates smoothly via @property-registered customs.
     The 110ms transition matches the 100ms JS stride for visual continuity. */
  transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease,
              --shine-x 110ms linear, --shine-opacity 110ms linear, --shine-angle 110ms linear !important;
}

/* v0.6.0 (2026-05-23) — .in-beam PANEL POP REMOVED per founder direction.
   Previously this rule amplified the panel's border + box-shadow halo and
   added a 1.4% scale lift when the gaze landed on it. Across a page that
   reads as chaotic motion ("the whole box pops at you") which fights the
   polished restraint the brand needs. The moonbeam shine projection
   (driven by --shine-opacity on the bg-image shine layer) IS the feedback
   now — the reflection moves across each panel's face as the gaze passes,
   and the panel itself sits still. Buttons keep their per-element :hover
   pop. The .in-beam selector is preserved as a no-op so any code that
   queries for the class still works. */
.panel.in-beam, .kpicard.in-beam, .launch__board.in-beam, .bigstep.in-beam,
.ladder-detail.in-beam, .clock-row.in-beam, .litem.in-beam, .dcard.in-beam,
.ddcard.in-beam, .tile.in-beam, .feature-card.in-beam, .step-card.in-beam,
.timeline-step.in-beam, .step.in-beam, .orbital__detail.in-beam, .dept.in-beam,
.qcard.in-beam, .rung.in-beam, .side-card.in-beam, .tier.in-beam,
.faq__item.in-beam, .rail.in-beam, .red-cell.in-beam, .inv-block.in-beam,
.inv-stat.in-beam, .team-row.in-beam, .use-cell.in-beam, .tier-card.in-beam,
.tm-card.in-beam, .nda-gate.in-beam, .numbers__inner.in-beam, .vcard.in-beam,
.brain.in-beam, .bmetric.in-beam, .ollama-cell.in-beam, .router.in-beam,
.ip__main.in-beam, .hp-card.in-beam{
  /* no-op — see v0.6.0 comment above. The moonbeam shine layer carries
     the visual feedback; the panel border/halo/transform stays at default. */
}

/* boxShineFlash — single-iteration shine pass for the in-beam gleam moment.
   Matches the layer count of boxShineSweep so multi-value background-position
   resolves cleanly; only the first position (the shine layer) animates from
   off-screen-left to off-screen-right in 1.4s. ease-out so the shine
   decelerates dramatically at the end. */
/* boxShineFlash kept as a no-op placeholder so any legacy reference doesn't
   error. The shine is now JS-driven via --shine-x / --shine-opacity. */
@keyframes boxShineFlash{
  0%, 100% { --shine-x: var(--shine-x, -140%); }
}

/* Warm-aurora variant — investor surface .in-beam panel-pop ALSO removed.
   The investor-page panels stay still; only buttons get hover-pop. */
body.surface-operator-investor .panel.in-beam.__legacy_only_kept_for_specificity,
body.surface-operator-investor .kpicard.in-beam.__legacy_only_kept_for_specificity,
body.surface-operator-investor .side-card.in-beam.__legacy_only_kept_for_specificity,
body.surface-operator-investor .vcard.in-beam.__legacy_only_kept_for_specificity,
body.surface-operator-investor .tier.in-beam.__legacy_only_kept_for_specificity,
body.surface-operator-investor .tier-card.in-beam.__legacy_only_kept_for_specificity,
body.surface-operator-investor .numbers__inner.in-beam.__legacy_only_kept_for_specificity{
  border-color: rgba(251,191,36,.82) !important;
  box-shadow:
    0 0 60px rgba(251,191,36,.34),
    0 14px 40px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 6px 22px rgba(251,191,36,.18),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 0 -8px 22px rgba(0,0,0,.32) !important;
}