/* Grumbots homepage, "modern pixel, future world".
   Design system (ui-ux-pro-max): style Pixel Art + Retro-Futurism, pattern Hero-Centric, dark mode.
   Pixelify Sans (display), Space Grotesk (text), JetBrains Mono (HUD data), all self-hosted.
   Neon used for accents and large text only; body text #e6edf7 / #a9b8cf on #070b16 (13:1 / 8:1).
   Motion: CSS only, disabled under prefers-reduced-motion. No JavaScript. */
:root{
  --bg:#070b16; --bg-2:#0b1224; --panel:#0e1730; --panel-2:#121d3a;
  --line:rgba(110,190,255,.22); --line-2:rgba(110,190,255,.42);
  --text:#e6edf7; --muted:#a9b8cf;
  --cyan:#4ef2ff; --magenta:#ff4fd8; --lime:#b8ff4f; --amber:#ffc24b; --violet:#8b6cff;
  --pixel:"Pixelify Sans",ui-monospace,Consolas,monospace;
  --sans:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --step:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;background:var(--bg)}
body{margin:0;color:var(--text);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 1px 1px,rgba(78,242,255,.09) 1px,transparent 1.5px) 0 0/24px 24px,
    linear-gradient(180deg,#070b16 0%,#0a1020 60%,#070b16 100%);
  background-attachment:fixed}
/* CRT scanlines over everything, very faint */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
img{display:block;max-width:100%;height:auto;image-rendering:pixelated}
a{color:var(--cyan);text-underline-offset:3px}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
h1,h2,h3{margin:0;line-height:1.1}
h2{font:600 clamp(1.9rem,4vw,3rem)/1.05 var(--pixel);margin:.5rem 0 .9rem;letter-spacing:.01em}
h3{font:600 1.2rem/1.3 var(--sans)}
p{margin:0 0 .9rem}
b{font-weight:700;color:var(--text)}
.skip{position:absolute;left:-999px;top:8px;background:var(--cyan);color:var(--bg);padding:10px 14px;z-index:60}
.skip:focus{left:8px}

/* HUD corner brackets, reusable on any box */
.hud,.steps li,.bots li,.cond,.rule,.faq details,.open{
  --c:var(--cyan);
  background-image:
    linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),
    linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),
    linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),
    linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c));
  background-repeat:no-repeat;
  background-size:14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px;
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%;
}

/* header */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem clamp(1rem,4vw,2.5rem);background:rgba(7,11,22,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--text);text-decoration:none;font:700 1.35rem var(--pixel);letter-spacing:.03em;min-height:44px}
.mark{width:30px;height:30px;color:var(--cyan);filter:drop-shadow(0 0 6px rgba(78,242,255,.55))}
.mark .vis{fill:var(--bg)} .mark .eye{fill:var(--lime);animation:blink 5s steps(1) infinite}
@keyframes blink{0%,92%,100%{opacity:1}94%,97%{opacity:0}}
.links{display:flex;gap:.15rem}
.links a,.menu nav a{font:500 .95rem var(--sans);color:var(--muted);text-decoration:none;padding:.6rem .8rem;min-height:44px;display:inline-flex;align-items:center;transition:color .15s,background .15s}
.links a:hover{color:var(--bg);background:var(--cyan)}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;font:600 .95rem var(--sans);color:var(--cyan);border:1px solid var(--line-2);padding:.55rem .9rem;min-height:44px;display:flex;align-items:center}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--line-2);display:flex;flex-direction:column;min-width:210px}
.menu nav a{border-bottom:1px solid var(--line)}
@media (max-width:860px){.links{display:none}.menu{display:block}}

/* shared */
.band{position:relative;padding:clamp(4rem,9vw,7rem) clamp(1rem,5vw,3.5rem)}
.band > *{max-width:1180px;margin-left:auto;margin-right:auto}
.head{margin-bottom:2.6rem}
.label{display:inline-flex;align-items:center;gap:.6rem;font:500 .8rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--cyan);margin:0}
.label::before{content:"";width:22px;height:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.intro{max-width:62ch;color:var(--muted);font-size:1.08rem;margin-left:0}
.tint{background:linear-gradient(180deg,rgba(14,23,48,.0),rgba(14,23,48,.75) 12%,rgba(14,23,48,.75) 88%,rgba(14,23,48,0))}
.note{color:var(--muted);font-size:.95rem;margin-top:1.8rem;border-left:2px solid var(--amber);padding-left:.9rem}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;padding:.8rem 1.4rem;
  font:600 1rem var(--sans);letter-spacing:.02em;text-decoration:none;color:var(--cyan);
  background:rgba(78,242,255,.06);border:2px solid var(--cyan);
  box-shadow:var(--step) var(--step) 0 rgba(78,242,255,.25);transition:transform .15s,box-shadow .15s,background .15s;cursor:pointer}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(78,242,255,.35),0 0 24px rgba(78,242,255,.25)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 transparent}
.btn.primary{background:var(--cyan);color:#041018;box-shadow:var(--step) var(--step) 0 var(--magenta)}
.btn.primary:hover{box-shadow:6px 6px 0 var(--magenta),0 0 28px rgba(78,242,255,.45)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  max-width:1280px;margin:0 auto;padding:clamp(3rem,7vw,5.5rem) clamp(1rem,5vw,3.5rem) clamp(7rem,12vw,10rem);isolation:isolate}
.sky{position:absolute;inset:0 calc(50% - 50vw);z-index:-1;overflow:hidden;pointer-events:none}
.stars{position:absolute;inset:0;
  background:
    radial-gradient(2px 2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 28% 8%,var(--cyan) 50%,transparent 51%),
    radial-gradient(2px 2px at 44% 26%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 63% 12%,var(--magenta) 50%,transparent 51%),
    radial-gradient(2px 2px at 78% 30%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 90% 10%,var(--cyan) 50%,transparent 51%),
    radial-gradient(2px 2px at 6% 44%,#fff 50%,transparent 51%),radial-gradient(2px 2px at 55% 40%,#fff 50%,transparent 51%);
  opacity:.7;animation:twinkle 4s steps(2) infinite}
@keyframes twinkle{50%{opacity:.35}}
.sun{position:absolute;left:74%;bottom:24%;width:min(46vw,540px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;opacity:.55;
  background:linear-gradient(180deg,var(--amber) 0%,var(--magenta) 70%);
  -webkit-mask:linear-gradient(180deg,#000 0 52%,transparent 52% 56%,#000 56% 64%,transparent 64% 69%,#000 69% 76%,transparent 76% 82%,#000 82% 88%,transparent 88%);
  mask:linear-gradient(180deg,#000 0 52%,transparent 52% 56%,#000 56% 64%,transparent 64% 69%,#000 69% 76%,transparent 76% 82%,#000 82% 88%,transparent 88%);
  filter:blur(.3px)}
.floor{position:absolute;left:-25%;right:-25%;bottom:-30%;height:62%;transform:perspective(420px) rotateX(64deg);transform-origin:center top;
  background:
    linear-gradient(90deg,rgba(78,242,255,.38) 2px,transparent 2px) 0 0/56px 56px,
    linear-gradient(0deg,rgba(78,242,255,.38) 2px,transparent 2px) 0 0/56px 56px;
  -webkit-mask:linear-gradient(180deg,transparent,#000 30%);mask:linear-gradient(180deg,transparent,#000 30%);
  animation:drive 2.4s linear infinite}
@keyframes drive{to{background-position:0 56px,0 56px}}
.sky::after{content:"";position:absolute;left:0;right:0;bottom:calc(30% + 0px);top:auto;height:2px;background:var(--magenta);box-shadow:0 0 18px 3px rgba(255,79,216,.55);bottom:32%}

.kicker{display:flex;align-items:center;gap:.6rem;font:500 .82rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--lime);margin-bottom:1.1rem}
.blip{width:8px;height:8px;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:blink 1.4s steps(1) infinite}
h1{font:700 clamp(2.8rem,6.6vw,5.4rem)/.98 var(--pixel);letter-spacing:.005em;margin-bottom:1.5rem;text-shadow:0 0 30px rgba(78,242,255,.18)}
.glow{color:var(--cyan);text-shadow:0 0 14px rgba(78,242,255,.7),0 0 40px rgba(78,242,255,.35),3px 3px 0 var(--magenta)}
.lede{font-size:1.14rem;max-width:54ch;color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:1rem;margin:2rem 0 1.4rem}
.status{display:flex;align-items:center;gap:.6rem;font:400 .82rem var(--mono);color:var(--muted)}
.dot{flex:none;width:9px;height:9px;background:var(--amber);box-shadow:0 0 8px var(--amber);animation:blink 1.6s steps(1) infinite}

.hero-art{margin:0;position:relative}
.hud{position:relative;padding:14px;background-color:rgba(10,18,38,.78);border:1px solid var(--line);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 0 0 1px rgba(78,242,255,.06),0 30px 80px rgba(0,0,0,.55),0 0 60px rgba(78,242,255,.12)}
.hud-top{display:flex;justify-content:space-between;font:500 .75rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:2px 4px 10px}
.rec{color:var(--magenta)} .rec::before{content:"";display:inline-block;width:7px;height:7px;background:var(--magenta);margin-right:.45rem;box-shadow:0 0 8px var(--magenta);animation:blink 1s steps(1) infinite}
.frame{position:relative;overflow:hidden;border:1px solid var(--line-2)}
.scan{position:absolute;left:0;right:0;top:0;height:18%;background:linear-gradient(180deg,transparent,rgba(78,242,255,.22),transparent);animation:sweep 3.6s linear infinite}
@keyframes sweep{from{transform:translateY(-100%)}to{transform:translateY(560%)}}
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
.readout div{border:1px solid var(--line);padding:.5rem .6rem;background:rgba(78,242,255,.04)}
.readout dt{font:400 .68rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.readout dd{margin:0;font:600 .95rem var(--mono);color:var(--lime)}
.bubble{margin:12px 0 0;padding:.7rem .85rem;border:1px solid rgba(255,79,216,.45);background:rgba(255,79,216,.07);font:400 .92rem/1.5 var(--mono);color:var(--text)}
.bubble span{color:var(--magenta)}
.hero-art figcaption{font:400 .75rem var(--mono);color:var(--muted);margin-top:.9rem}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero-art{max-width:540px}.sun{left:60%;bottom:8%;width:80vw;opacity:.35}}

/* ticker */
.ticker{position:relative;overflow:hidden;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:rgba(78,242,255,.05)}
.track{display:flex;width:max-content;animation:slide 45s linear infinite}
.track span{font:500 .9rem var(--mono);color:var(--cyan);padding:.85rem 1.3rem;white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}
.track span::before{content:"";display:inline-block;width:7px;height:7px;background:var(--magenta);margin-right:1.3rem;vertical-align:middle;box-shadow:0 0 8px var(--magenta)}
@keyframes slide{to{transform:translateX(-50%)}}

/* steps */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;counter-reset:s}
.steps li{counter-increment:s;background-color:rgba(14,23,48,.7);border:1px solid var(--line);padding:1.5rem 1.4rem 1.3rem;transition:border-color .2s,transform .2s}
.steps li:hover{border-color:var(--line-2);transform:translateY(-3px)}
.steps li::before{content:"Protocol " counter(s,decimal-leading-zero);display:block;font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--cyan);margin-bottom:.9rem}
.steps h3{margin-bottom:.55rem;font-size:1.25rem}
.steps p{color:var(--muted);font-size:1rem;margin:0}
.steps blockquote{margin:1rem 0 0;padding:.65rem .85rem;border-left:2px solid var(--magenta);background:rgba(255,79,216,.07);font:400 .9rem/1.5 var(--mono);color:var(--text)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}

/* robots */
.bots{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;counter-reset:b}
.bots li{counter-increment:b;position:relative;background-color:var(--panel);border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s}
.bots li::after{content:"GRB-" counter(b,decimal-leading-zero);position:absolute;top:18px;right:18px;font:500 .66rem var(--mono);letter-spacing:.1em;color:#041018;background:var(--cyan);padding:.15rem .4rem}
.bots li:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan),0 12px 40px rgba(78,242,255,.18)}
.bots img{width:100%;border:1px solid var(--line)}
.bots b{font:600 1.08rem var(--sans);padding:.75rem .3rem 0;color:var(--text)}
.bots span{color:var(--muted);font-size:.9rem;padding:.1rem .3rem .3rem}
@media (max-width:980px){.bots{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.bots{grid-template-columns:repeat(2,1fr);gap:.9rem}}

/* conditions */
.conds{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.cond{position:relative;background-color:var(--panel);border:1px solid var(--line);padding:1.6rem 1.4rem 1.4rem;overflow:hidden}
.cond::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);box-shadow:0 0 16px var(--c)}
.cond svg{width:40px;height:40px;margin-bottom:1rem;color:var(--c);filter:drop-shadow(0 0 8px var(--c))}
.cond h3{font:700 1.5rem var(--sans)}
.cond .who{font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--c);margin:.35rem 0 1rem}
.cond ul{margin:0;padding:0;list-style:none}
.cond li{padding:.4rem 0 .4rem 1.2rem;position:relative;font-size:.98rem;color:var(--muted);border-top:1px dashed var(--line)}
.cond li::before{content:"";position:absolute;left:0;top:1em;width:6px;height:6px;background:var(--c)}
.c-care{--c:var(--lime)} .c-worn{--c:var(--amber)} .c-neglect{--c:var(--magenta)}
@media (max-width:860px){.conds{grid-template-columns:1fr}}

/* rules */
.dark{background:linear-gradient(180deg,rgba(139,108,255,0),rgba(139,108,255,.08) 15%,rgba(139,108,255,.08) 85%,rgba(139,108,255,0))}
.dark .label{color:var(--violet)} .dark .label::before{background:var(--violet);box-shadow:0 0 8px var(--violet)}
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.rule{--c:var(--violet);background-color:rgba(14,23,48,.75);border:1px solid rgba(139,108,255,.3);padding:1.5rem 1.4rem}
.rule h3{margin-bottom:.5rem;font:700 1.25rem var(--sans)}
.rule p{color:var(--muted);margin:0}
@media (max-width:760px){.rules{grid-template-columns:1fr}}

/* roadmap */
.road{list-style:none;padding:0 0 0 2.2rem;margin:0;position:relative}
.road::before{content:"";position:absolute;left:10px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--lime) 0 28%,var(--amber) 28% 50%,var(--line-2) 50%)}
.road li{position:relative;margin-bottom:1.7rem;max-width:720px}
.road li::before{content:"";position:absolute;left:-2.2rem;top:.2rem;width:22px;height:22px;background:var(--bg);border:2px solid var(--line-2)}
.road li.done::before{background:var(--lime);border-color:var(--lime);box-shadow:0 0 12px var(--lime)}
.road li.next::before{background:var(--bg);border-color:var(--amber);box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 11px var(--amber)}
.when{font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.road li.done .when{color:var(--lime)} .road li.next .when{color:var(--amber)}
.road h3{margin:.25rem 0 .35rem;font:700 1.2rem var(--sans)}
.road p{color:var(--muted);margin:0}
.open{--c:var(--amber);margin-top:2.2rem;max-width:720px;background-color:rgba(255,194,75,.06);border:1px dashed rgba(255,194,75,.5);padding:1.2rem 1.4rem}
.open h3{margin-bottom:.4rem;font:700 1.15rem var(--sans);color:var(--amber)}
.open p{margin:0;color:var(--muted)}

/* faq, terminal style */
.faq{max-width:840px}
.faq details{background-color:rgba(14,23,48,.75);border:1px solid var(--line);margin-bottom:.8rem}
.faq details[open]{border-color:var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.2rem;font:500 1rem var(--mono);position:relative;min-height:44px;color:var(--text)}
.faq summary::before{content:"> ";color:var(--cyan)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.2rem;top:.85rem;font:600 1.2rem var(--pixel);color:var(--cyan)}
.faq details[open] summary::after{content:"-"}
.faq details p{padding:0 1.2rem 1.1rem 2.35rem;margin:0;color:var(--muted)}
.closing{margin-top:2.6rem;font:500 .9rem var(--mono);color:var(--lime)}
.closing::before{content:"_ ";animation:blink 1s steps(1) infinite}

/* X link */
.xlink{gap:.45rem}
.xlogo{flex:none}
footer .social a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .9rem;color:var(--text,#e8eef8);text-decoration:none;border:1px solid var(--line)}
footer .social a:hover,footer .social a:focus-visible{color:#fff;border-color:currentColor}
/* footer */
footer{border-top:1px solid var(--line);text-align:center;padding:3.2rem 1rem;color:var(--muted);background:rgba(4,7,15,.7)}
footer p{margin:.3rem 0}
.brand-foot{font:700 1.8rem var(--pixel);color:var(--text);text-shadow:0 0 18px rgba(78,242,255,.35)}
footer .small{font-size:.85rem;max-width:60ch;margin:1rem auto 0}

.lost{min-height:80vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.lost .intro{margin-left:auto;margin-right:auto}

/* scroll reveal, CSS only */
@supports (animation-timeline:view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* GRUM allocation tiles */
.alloc{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:1rem;margin-top:2rem}
.tile{border:1px solid var(--line);background:rgba(78,242,255,.04);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.2rem}
.tile span{font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.tile b{font:700 1.75rem var(--mono);color:var(--lime);text-shadow:0 0 14px rgba(184,255,79,.35)}
.tile i{font:400 .85rem var(--mono);font-style:normal;color:var(--muted)}
.tile.big{border-color:var(--cyan);background:rgba(78,242,255,.08)}
.alloc.mint{margin-top:1rem}
.tile.big b{color:var(--cyan);font-size:1.45rem;text-shadow:0 0 14px rgba(78,242,255,.45)}
@media (max-width:860px){.alloc{grid-template-columns:1fr 1fr}.tile.big{grid-column:1/-1}}

/* wage schedule */
.seasons{margin-top:2.4rem}
.seasons h3{font:700 1.25rem var(--sans);margin-bottom:.4rem}
.seasons table{width:100%;max-width:820px;border-collapse:collapse;font:400 .95rem var(--mono);margin-top:.6rem}
.seasons th{text-align:left;font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:.6rem .8rem;border-bottom:1px solid var(--line-2)}
.seasons td{padding:.65rem .8rem;border-bottom:1px solid var(--line);color:var(--text)}
.seasons td:last-child{color:var(--lime);font-weight:600}
.seasons tbody tr:first-child td{background:rgba(184,255,79,.06)}
@media (max-width:620px){.seasons th,.seasons td{padding:.5rem .4rem;font-size:.8rem}}

/* condition sample image */
.cond-img{width:100%;margin:-.4rem 0 1.1rem;border:1px solid var(--line-2)}
.cond-img + svg{display:none}