/* Secondary pages — TIME LAB language over the CEO's living backgrounds */
:root {
  --bg: #0f0f12;
  --amber: #ffb142;
  --gold: #e1ce8a;
  --ink: #e8e4da;
  --mut: #9a937f;
  --mono: "Consolas", "SFMono-Regular", monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body { font: 16px/1.65 "Segoe UI", Arial, sans-serif; overflow-x: hidden; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* legibility veil over the living photo */
body::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,15,18,.25) 0%, rgba(15,15,18,.55) 58%,
    rgba(15,15,18,.82) 100%); }
/* film-grain scanlines */
body::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px,
    transparent 1px 3px);
  mix-blend-mode: overlay; }

/* boot fade */
body.pfx-boot #wrap { opacity: 0; transform: translateY(18px); }
body.pfx-in #wrap { opacity: 1; transform: none;
  transition: opacity .9s ease .1s, transform .9s cubic-bezier(.16,1,.3,1) .1s; }

#wrap { position: relative; z-index: 10; max-width: 880px;
  margin: 0 auto; padding: 0 6vw 16vh; }

/* hero */
.hero { min-height: 72vh; min-height: 72svh; display: flex;
  flex-direction: column; justify-content: flex-end; padding-bottom: 7vh; }
.hero h1 { font-size: clamp(34px, 6vw, 64px); line-height: 1.02; margin: 0;
  color: var(--gold); letter-spacing: -.01em;
  text-shadow: 0 2px 26px rgba(0,0,0,.85); }
.kicker { font-family: var(--mono); color: var(--amber); letter-spacing: .32em;
  font-size: 12px; margin: 0 0 14px; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.hero p.lead { max-width: 620px; font-size: 17px; color: var(--ink);
  text-shadow: 0 1px 12px rgba(0,0,0,.9); }

/* content */
.panel { margin-top: 7vh; opacity: 0; transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.panel.inview { opacity: 1; transform: none; }
.panel h2 { font-size: clamp(22px, 3.4vw, 32px); color: var(--gold); margin: 0 0 2vh; }

.pcard { background: rgba(16,14,11,.72); border: 1px solid rgba(255,177,66,.22);
  border-radius: 12px; padding: 26px 26px; backdrop-filter: blur(7px);
  margin-top: 16px;
  opacity: 0; transform: translateY(26px) scale(.96);
  transition: opacity .55s cubic-bezier(.16,1,.3,1),
              transform .65s cubic-bezier(.34,1.4,.5,1), border-color .3s; }
.pcard.inview { opacity: 1; transform: none; }
.pcard h3 { font-family: var(--mono); color: var(--amber); letter-spacing: .14em;
  font-size: 14px; margin: 0 0 10px; }
.pcard ul { margin: 8px 0 0; padding-left: 20px; }
.pcard li { margin: 7px 0; }
.pcard p { margin: 8px 0; }
.pcard .note { color: var(--mut); font-size: 13.5px; }
.pcard img { max-width: 100%; border-radius: 8px; display: block; margin: 12px 0 4px; }

a { color: var(--amber); }
a:hover { color: #ffc46b; }

/* CTA */
.cta { display: inline-block; margin-top: 18px; padding: 13px 26px;
  background: var(--amber); color: #000 !important; text-decoration: none;
  font: bold 13px var(--mono); letter-spacing: .16em; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(255,177,66,.25);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s; }
.cta:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255,177,66,.4); }

/* breadcrumb back to the lab */
#lab-link { position: fixed; top: 16px; left: 18px; z-index: 50;
  font: 11px var(--mono); letter-spacing: .2em; color: var(--mut);
  text-decoration: none; background: rgba(10,10,14,.7); border: 1px solid #3a3220;
  border-radius: 999px; padding: 8px 14px; backdrop-filter: blur(6px); }
#lab-link:hover { color: var(--amber); border-color: var(--amber); }

footer { margin-top: 10vh; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; color: var(--mut); }

@media (max-width: 768px) {
  body { font-size: 15px; }
  .hero { min-height: 64svh; }
  .pcard { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, .pcard { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.pfx-boot #wrap { opacity: 1; transform: none; }
}