/* ce-net.com homepage: the observatory. Black stage, glass and amber ticks from the design cell (tokens.css +
   components.css); this file adds the homepage layout, the scan and glow, and the text motion hooks used by
   home-obs.js. Always dark. */
:root{--void:#000;--glow:0 0 18px rgba(245,165,36,.45),0 0 2px rgba(245,165,36,.8);--glow-g:0 0 14px rgba(155,209,107,.55)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--void)}
body.obs{margin:0;background:var(--void);color:var(--ink);font:400 var(--t-base)/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.obs a{color:inherit}
.obs p{margin:0 0 var(--s-4);max-width:62ch;color:var(--ink-2)}
.obs p a{color:var(--acc);text-decoration:underline;text-decoration-color:rgba(245,165,36,.4);text-underline-offset:3px}
.obs p a:hover{text-decoration-color:var(--acc)}
::selection{background:var(--acc);color:var(--acc-ink)}
:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--acc);color:var(--acc-ink);padding:8px 12px}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--m)}

/* scanlines over everything, and one slow sweep */
.scan{position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
.scan::after{content:"";position:absolute;left:0;right:0;top:-20vh;height:20vh;
  background:linear-gradient(to bottom,transparent,rgba(245,165,36,.035) 70%,rgba(245,165,36,.07) 99%,transparent);
  animation:sweep 9s linear infinite}
@keyframes sweep{to{transform:translateY(140vh)}}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:var(--s-4);
  padding:14px var(--m);background:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,0))}
.top__logo{display:flex;flex:none}
.top__logo img{height:20px;width:auto;display:block}
.top__nav{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.top__nav::-webkit-scrollbar{display:none}
.top__nav a{font:500 10.5px var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2);
  text-decoration:none;padding:7px 9px;border-radius:var(--r-sm);white-space:nowrap}
.top__nav a:hover{color:var(--ink);background:var(--hover)}
.top__cta{flex:none}
.btn{padding:9px 14px}
.btn.primary{box-shadow:0 0 22px -6px rgba(245,165,36,.7)}
.btn.primary:hover{background:var(--acc-hi)}
.btn:not(.primary){border:1px solid var(--line-2)}
.btn.big{padding:14px 22px;font-size:12px}

/* hero: globe stage */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:96px var(--m) var(--s-6);overflow:hidden;isolation:isolate}
.hero__globe{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.hero__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 18% 70%,rgba(0,0,0,.82) 0,rgba(0,0,0,.35) 45%,transparent 70%),
             linear-gradient(to top,#000 0,rgba(0,0,0,0) 30%)}
.hero__copy{max-width:min(760px,100%);margin-bottom:var(--s-7)}
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--live);box-shadow:var(--glow-g);
  margin-right:10px;vertical-align:1px;animation:blink 2.4s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.25}}
.obs .crumb{font-size:10.5px;margin:0 0 var(--s-3);color:var(--ink-2);max-width:none}
.obs-disp{font:400 clamp(30px,6.4vw,84px)/1.06 var(--disp);letter-spacing:.04em;text-transform:uppercase;color:var(--ink);
  margin:0 0 var(--s-5);text-shadow:0 0 30px rgba(245,165,36,.18)}
.obs-disp.sm{font-size:clamp(24px,3.6vw,46px);margin-bottom:var(--s-5)}
.obs-disp .sc{color:var(--acc);text-shadow:var(--glow)}
.hero__lede{font-size:var(--t-lg);color:var(--ink)!important;opacity:.82;max-width:52ch}
.hero__btns{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}

/* HUD stat row */
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);max-width:var(--max)}
.hud__card{padding:14px 16px 12px;min-width:0}
.hud__lab{font:500 10px var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--acc);box-shadow:var(--glow);flex:none}
.dot.live{background:var(--live);box-shadow:var(--glow-g)}
.hud__num{font:500 clamp(22px,2.6vw,30px)/1.2 var(--mono);color:var(--ink);margin:8px 0 2px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hud__num.acc{color:var(--acc);text-shadow:var(--glow)}
.hud__num small{font-size:.55em;color:var(--ink-2);margin-left:2px}
.hud__sub{font:400 11px var(--mono);color:var(--ink-3)}
.hud__ring{display:flex;align-items:center;gap:12px}
.hud__ring svg{width:34px;height:34px;transform:rotate(-90deg);flex:none;margin-top:6px}
.hud__ring circle{fill:none;stroke-width:3}
.hud__ring .r0{stroke:var(--line-2)}
.hud__ring .r1{stroke:var(--live);stroke-dasharray:94.25;filter:drop-shadow(0 0 3px rgba(155,209,107,.7));transition:stroke-dashoffset 1.2s var(--ease)}

/* bands */
.band{padding:clamp(64px,10vw,128px) 0;border-top:1px solid var(--line);position:relative}
.band::before{content:"";position:absolute;left:var(--m);top:-1px;width:64px;height:1px;background:var(--acc);box-shadow:var(--glow)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,72px);align-items:center}
.facts{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:10px}
.facts li{font-size:var(--t-md);color:var(--ink-2);padding-left:18px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--acc)}
.facts b{color:var(--ink);font-weight:500}

/* terminal */
.term{margin:0;min-width:0;background:rgba(6,8,6,.9)}
.term__bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);
  font:500 10px var(--mono);letter-spacing:var(--track-crumb);text-transform:uppercase;color:var(--ink-3)}
.term__copy{font:500 10px var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--acc);background:none;
  border:1px solid rgba(245,165,36,.35);border-radius:var(--r-sm);padding:4px 8px;cursor:pointer}
.term__copy:hover{background:var(--acc-soft)}
.term pre{margin:0;padding:16px;overflow-x:auto;font:400 12.5px/1.75 var(--mono);color:var(--ink);white-space:pre}
.term .p{color:var(--acc)}.term .c{color:var(--ink-3)}.term .g{color:var(--live);text-shadow:var(--glow-g)}.term .a{color:var(--acc)}
.cur{display:inline-block;width:7px;height:1.1em;background:var(--acc);vertical-align:-3px;margin-left:4px;animation:blink 1s steps(2,jump-none) infinite}

/* built on it */
.built{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--s-3);margin-top:var(--s-6)}
.built a{text-decoration:none;display:flex;flex-direction:column;transition:border-color var(--fast) var(--ease),background var(--fast)}
.built a:hover{border-color:rgba(245,165,36,.45);background:rgba(16,14,8,.85)}
.built__huebot{grid-row:span 1;overflow:hidden}
.built__huebot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;filter:saturate(.75) contrast(1.05);border-bottom:1px solid var(--line)}
.built__body,.built__card{padding:20px}
.built__card{justify-content:flex-start}
.built h3{font:400 16px/1.35 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.built p{font-size:var(--t-md)}
.built .crumb{color:var(--acc)}
.go{margin-top:auto;font:500 10.5px var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--acc)}
.go::after{content:"";display:inline-block;width:14px;height:1px;background:currentColor;margin-left:8px;vertical-align:3px;transition:width var(--fast) var(--ease)}
.built a:hover .go::after{width:26px}
.more{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.more li{padding:16px 16px 0 0;min-width:0}
.more a{font:500 11px var(--mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink);text-decoration:none}
.more a:hover{color:var(--acc)}
.more span{display:block;font-size:var(--t-sm);color:var(--ink-3);margin-top:4px}

/* common era: the brand's own night painting, the manifesto as the first section after the hero */
.era{position:relative;isolation:isolate;overflow:hidden;border-top:1px solid var(--line);background:#05070a}
.era__art{position:absolute;inset:0;z-index:-2;display:block}
.era__art img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 100%;transform:scale(1.02)}
.era__veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.94) 0,rgba(0,0,0,.72) 32%,rgba(0,0,0,.18) 62%,rgba(0,0,0,.45) 100%),
             linear-gradient(to bottom,#000 0,rgba(0,0,0,.80) 22%,rgba(0,0,0,.30) 44%,transparent 60%)}
.era__in{position:relative;min-height:clamp(620px,92vh,940px);display:flex;flex-direction:column;justify-content:flex-start;
  padding-block:clamp(56px,9vw,112px)}
.era__ages{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 var(--s-5);padding:0;
  font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.era__ages li{display:flex;align-items:center;gap:8px}
.era__ages li+li::before{content:"";width:18px;height:1px;background:var(--line-2)}
.era__ages .now{color:var(--acc);text-shadow:var(--glow)}
.era .obs-disp{max-width:16ch;margin-bottom:var(--s-4)}
.era__lede{max-width:46ch;font-size:var(--t-lg);color:var(--ink-2)}
.era__in::after{content:"";position:absolute;left:var(--m);top:0;width:120px;height:1px;background:var(--acc);box-shadow:var(--glow)}

/* beta */
.beta{padding:0 0 clamp(64px,10vw,128px)}
.beta__in{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-6);padding:clamp(24px,4vw,48px);
  background:radial-gradient(80% 140% at 100% 100%,rgba(245,165,36,.10),transparent 60%),var(--panel)}
.beta__in p{margin-bottom:0}

/* footer */
.foot{border-top:1px solid var(--line);padding:var(--s-6) 0 var(--s-7)}
.foot__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6)}
.foot img{height:18px;width:auto;display:block}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 16px}
.foot nav a,.foot p{font:400 11px var(--mono);letter-spacing:.06em;color:var(--ink-3);text-decoration:none;margin:0}
.foot nav a:hover{color:var(--acc)}
.foot p{margin-left:auto}

/* text motion hooks (home-obs.js) */
.obs-type.typing::after{content:"";display:inline-block;width:6px;height:1em;background:var(--acc);margin-left:3px;vertical-align:-2px}
.obs-decode .gl{color:var(--acc);text-shadow:var(--glow);opacity:.9}
.js .obs-decode:not(.done){visibility:hidden;animation:shown 0s 2.5s forwards}
@keyframes shown{to{visibility:visible}}
.js .obs-decode.run{visibility:visible}

@media (max-width:980px){
  .hud{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr)}
  .built{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .built__huebot{grid-column:1/-1}
  .more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .hide-s{display:none}
  .top{gap:8px;padding:12px 16px}
  .top__nav a{padding:6px 5px;font-size:9.5px;letter-spacing:.08em}
  .top__cta{display:none}
  .hero{padding:84px 16px 24px}
  .hero__copy{margin-bottom:var(--s-6)}
  .hud{gap:8px}
  .hud__card{padding:12px}
  .built{grid-template-columns:minmax(0,1fr)}
  .era__art img{object-position:56% 100%}
  .era__veil{background:linear-gradient(to bottom,#000 0,rgba(0,0,0,.78) 34%,rgba(0,0,0,.18) 58%,transparent 72%)}
  .era__in{min-height:min(82vh,660px);padding-block:44px 52px}
  .era__ages{gap:6px 12px;font-size:9.5px;letter-spacing:.12em}
  .era__ages li+li::before{width:10px}
  .era__lede{font-size:var(--t-md)}
  .beta__in{flex-direction:column;align-items:flex-start}
  .term pre{font-size:11px;padding:12px;white-space:pre-wrap;overflow-wrap:anywhere}
  .foot p{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .scan::after,.live-dot,.cur{animation:none}
  .js .obs-decode:not(.done){visibility:visible}
  html{scroll-behavior:auto}
}
.ages{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.ages{grid-template-columns:minmax(0,1fr)}}