/* Portal page styles (feature 03). Tokens come from tokens.css; this file only lays pages out. Dark only. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.55 var(--font-body); }
a { color: var(--link); }
main, .wrap { max-width: 64rem; margin: 0 auto; padding: 1rem; }
h1, h2 { font-family: var(--font-hull, var(--font-display)); letter-spacing: 0; }          /* HULL is the brand display face (v7 index.php); Big Shoulders is its fallback */
.eyebrow { font: 500 .85rem var(--font-mono); color: var(--cyan); letter-spacing: .12em; text-transform: uppercase; margin: 0; }
.hero { padding: 2rem 0 1rem; text-align: center; }
.hero img.wordmark { width: min(22rem, 80%); height: auto; }
.hero h1 { font-size: clamp(1.8rem, 4.3vw, 3.1rem); font-weight: 700; text-transform: uppercase; line-height: 1.05; margin: .5rem 0 1rem; text-wrap: balance; }   /* v7 sizes */
.hero h1 em { color: var(--cyan); font-style: normal; }
.hero .lede { max-width: 42rem; margin: 0 auto 1.5rem; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.founder-strip { margin: 1.5rem auto; max-width: 44rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); text-align: left; }
.founder-strip h2, .below h2, .row-label { font-size: 1rem; }
.row-label { font: 500 .85rem var(--font-mono); color: var(--muted); }
.live-panel { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.5rem; color: var(--muted); font: .85rem var(--font-mono); }
.live-panel svg { width: 8rem; height: 2.4rem; display: block; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.product-col { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1rem; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
.product-col.in-view, .below.in-view { opacity: 1; transform: none; }
.below { opacity: 0; transition: opacity .5s; }
.product-col .scope { height: 2.6rem; margin-bottom: .5rem; }
.product-col .scope svg { height: 100%; width: 100%; }
.product-col a.launch { display: flex; align-items: center; gap: .6rem; font: 700 1.25rem var(--font-hull, var(--font-display)); text-transform: uppercase; letter-spacing: 0; color: var(--text); text-decoration: none; }
.product-col a.launch img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; }
.product-col p { color: var(--muted); font-size: .87rem; line-height: 1.5; }
.product-col .ver { font: .75rem var(--font-mono); color: var(--muted); }
.cta { display: inline-block; }
.doc { max-width: 46rem; margin: 0 auto; padding: 1rem; }
.doc h2 { font-size: 1.3rem; margin-top: 1.6rem; }
.doc .registrant { border-left: 3px solid var(--gold); padding-left: .8rem; color: var(--muted); }
@keyframes cellPulse { 0%, 100% { opacity: .22; } 50% { opacity: .9; } }
@keyframes dotPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.cell { animation: cellPulse 3.2s infinite; }
.dot { animation: dotPulse 2.4s infinite; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .product-col, .below { opacity: 1; transform: none; }
}