/* orb-bg.css — shared shell for the Raleigh AI Works subpages.
   The homepage's chrome (top bar + action dock) and its fixed background
   stage (#world canvas + veil), extracted so every subpage reads as the
   same site. The orb itself lives in orb-bg.js.
   Business demo pages add class "biz" to <body>: the orb dims, the top bar
   becomes a slim Raleigh ribbon, and the business's own hero leads. */

:root{
  --bg:#050506; --panel:#0B0B0C; --panel2:#141416;
  --line:#262218; --line2:#3D3722;
  --gold:#D4AF37; --gold2:#F2D06B; --gold-dim:#8A742A;
  --ink:#F4F1E6; --muted:#C4BFAE; --muted2:#948E7D;
  --ease:cubic-bezier(.16,1,.3,1);
  --hud-h:0px;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- the stage ---------- */
html{background:#050506}
#world{position:fixed;inset:0;width:100dvw;height:100dvh;display:block;z-index:0}
body.biz #world{opacity:.5}
#veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 42%,transparent 32%,rgba(0,0,0,.86) 100%),
    linear-gradient(180deg,rgba(5,5,6,.66),transparent 16%,transparent 84%,rgba(5,5,6,.7));}
body:not(.biz) #veil{background:
    radial-gradient(ellipse 95% 55% at 50% 26%,rgba(5,5,6,.42),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 42%,transparent 32%,rgba(0,0,0,.86) 100%),
    linear-gradient(180deg,rgba(5,5,6,.66),transparent 16%,transparent 84%,rgba(5,5,6,.7));}
/* page content rides above the stage */
body > *:not(#world):not(#veil):not(.topbar):not(#ctaDock){position:relative;z-index:2}

/* room for the fixed chrome */
body:not(.biz){padding-top:56px}
body{padding-bottom:88px}

/* ---------- top bar (homepage shell, verbatim values) ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;padding:0;background:linear-gradient(180deg,rgba(5,5,6,.9),rgba(5,5,6,0));pointer-events:none}
.topbar-in{width:100%;max-width:none;margin:0;padding:10px 14px 14px;display:flex;align-items:center;gap:10px;justify-content:space-between}
.topbar-in>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:44px;flex:none;margin-right:auto}
.brand b{font-weight:800;letter-spacing:.06em;font-size:14.5px;white-space:nowrap}
.brand b span{color:var(--gold)}
.top-status{display:none;font-size:11px;letter-spacing:.12em;color:var(--muted);white-space:nowrap;flex:none}
.top-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold2);margin-right:7px;box-shadow:0 0 8px var(--gold2);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.top-actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.speak-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 15px;background:var(--gold);color:#171300;border:1px solid var(--gold);border-radius:999px;font-size:12.5px;font-weight:800;white-space:nowrap;text-decoration:none;box-shadow:0 0 14px rgba(242,208,107,.32)}
.call-link{min-height:40px;display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;background:rgba(8,8,9,.8);color:var(--gold2);border:1px solid var(--line2);text-decoration:none;font-weight:700;font-size:12.5px;white-space:nowrap;backdrop-filter:blur(8px)}
.call-short,.call-bare{display:none}
@media(min-width:1100px){.top-status{display:block}}
@media(max-width:680px){
  .call-full{display:none}
  .call-short{display:inline}
}
@media(max-width:520px){
  .topbar-in{gap:7px;padding:8px 12px 10px;flex-wrap:nowrap;height:56px;width:100%}
  .brand{gap:5px;min-height:40px;flex:none;margin-right:auto}
  .brand svg{width:13px;height:18px}
  .brand b{font-size:10px;letter-spacing:.02em}
  .top-actions{gap:7px;margin-left:0}
  .speak-btn{flex:none;min-height:40px;padding:8px 11px;font-size:11.5px;box-shadow:0 0 12px rgba(242,208,107,.3)}
  .call-link{flex:none;min-height:40px;padding:8px 11px;font-size:11.5px}
  .top-status{display:none !important}
}
@media(max-width:400px){
  .brand b{font-size:9px}
  .speak-btn{padding:8px 9px;font-size:11px}
  .call-link{padding:8px 9px}
  .call-short{display:none}
  .call-bare{display:inline}
}

/* ---------- action dock (homepage shell, verbatim values) ---------- */
#ctaDock{position:fixed;z-index:45;bottom:calc(var(--hud-h) + 10px);right:16px;display:flex;gap:9px;padding:8px;background:rgba(8,8,9,.92);border:1px solid var(--line2);border-radius:999px;backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.65),0 0 22px rgba(212,175,55,.12)}
#ctaDock .dock-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;font-size:15px;font-weight:800;text-decoration:none;white-space:nowrap;transition:border-color .3s var(--ease)}
#ctaDock .dock-book{background:var(--gold);color:#171300;border:1px solid var(--gold)}
#ctaDock .dock-book::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,246,200,.55) 50%,transparent 70%);transform:translateX(-110%);animation:sheen 4.5s var(--ease) infinite}
@keyframes sheen{0%,55%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}
#ctaDock .dock-pkg{background:rgba(10,10,11,.85);color:var(--gold2);border:1px solid var(--gold-dim)}
#ctaDock .dock-pkg:hover{border-color:var(--gold2)}
#ctaDock .dock-site{background:rgba(10,10,11,.85);color:var(--gold2);border:1px solid var(--gold-dim)}
#ctaDock .dock-site:hover{border-color:var(--gold2)}
@media(max-width:760px){
  #ctaDock{left:0;right:0;bottom:var(--hud-h);border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}
  #ctaDock .dock-btn{flex:1;padding:12px 10px;font-size:14.5px}
}

/* ---------- business demo pages: Raleigh steps back to a frame ---------- */
.biz-ribbon{position:relative;z-index:2;text-align:center;padding:9px 14px;border-bottom:1px solid var(--line);background:rgba(5,5,6,.88);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.biz-ribbon a{color:var(--muted);text-decoration:none}
.biz-ribbon b{color:var(--gold2);font-weight:600}
.biz-hero{position:relative;z-index:2;text-align:center;padding:42px 20px 32px;border-bottom:1px solid var(--line);background:rgba(5,5,6,.45);overflow:hidden}
.biz-name{font-size:clamp(30px,6vw,44px);font-weight:900;letter-spacing:-.01em;line-height:1.1;color:var(--ink)}
.biz-trade{margin-top:9px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--biz,#D4AF37)}
.biz-hero>*{position:relative;z-index:1}
.biz-facts{margin-top:15px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .top-status i{animation:none}
  #ctaDock .dock-book::after{animation:none}
}