/* ===================================================================
   AUTISTIC INTELLIGENCE — $AI
   Nostalgic meme internet wearing a machine-learning lab coat.
   Palette and type mirror scripts/design.ts so PNG assets and the
   live site never drift apart.
   =================================================================== */
@import url("fonts.css");

:root{
  --void:#05070a; --ink:#0b0f14; --ink2:#0e141a;
  --matrix:#00ff41; --acid:#b6ff00; --magenta:#ff00a8; --cyan:#00e5ff;
  --laser:#ff1744; --amber:#ffb300; --paper:#f4f1e8; --dim:#6f7d72;
  --line:rgba(0,255,65,.22); --line2:rgba(0,255,65,.4);
  --maxw:1240px; --gut:28px;
  --f-display:Anton,Impact,"Arial Black",sans-serif;
  --f-term:VT323,"Courier New",monospace;
  --f-mono:"Space Mono",ui-monospace,monospace;
  --f-comic:"Comic Neue","Comic Sans MS",cursive;
  --f-pixel:"Press Start 2P",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void); color:var(--paper);
  font-family:var(--f-mono); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.comic-mode *{font-family:var(--f-comic)!important}
img{max-width:100%;display:block}
a{color:var(--matrix);text-decoration:none}
::selection{background:var(--matrix);color:#000}

/* ── persistent background: matrix rain + grid floor + scanlines ── */
#rain{position:fixed;inset:0;z-index:0;opacity:.34;pointer-events:none}
.floor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.floor::before{content:"";position:absolute;left:-30%;right:-30%;bottom:-10%;height:70%;
  background:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 70px),
             repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 70px);
  transform:perspective(600px) rotateX(70deg);transform-origin:50% 100%;opacity:.55}
.scan{position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 2px,transparent 2px 4px);opacity:.42}
.vig{position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,0,0,.72) 100%)}

.blobs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blobs i{position:absolute;border-radius:50%;filter:blur(110px);display:block}
.blobs .m{background:var(--magenta);width:48vw;height:46vw;left:-14vw;top:-12vw;opacity:.30}
.blobs .c{background:var(--cyan);width:42vw;height:40vw;right:-12vw;top:24vh;opacity:.24}
.blobs .g{background:var(--matrix);width:52vw;height:40vw;left:24vw;top:62vh;opacity:.16}
.blobs .a{background:var(--acid);width:34vw;height:30vw;right:6vw;top:132vh;opacity:.14}

section:nth-of-type(even)::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(0,255,65,.045),transparent);pointer-events:none}
section{isolation:isolate}

/* ── boot screen ── */
#boot{position:fixed;inset:0;z-index:200;background:#000;display:flex;align-items:center;
  justify-content:center;font-family:var(--f-term);color:var(--matrix);font-size:26px;padding:24px}
#boot .lines{width:min(760px,100%);white-space:pre-wrap;line-height:1.35}
#boot.gone{opacity:0;pointer-events:none;transition:opacity .5s}

/* ── layout ── */
.wrap{width:min(var(--maxw),100% - var(--gut)*2);margin-inline:auto;position:relative;z-index:2}
section{padding-block:96px;position:relative;z-index:2}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--matrix);display:flex;align-items:center;gap:12px;margin-bottom:14px}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
h2{font-family:var(--f-display);font-size:clamp(38px,6vw,76px);line-height:.92;text-transform:uppercase;
  letter-spacing:.01em;margin-bottom:10px}
h3{font-family:var(--f-display);font-size:clamp(22px,2.6vw,30px);text-transform:uppercase;letter-spacing:.02em}
.sub{font-family:var(--f-term);font-size:clamp(19px,2.2vw,26px);color:var(--matrix);margin-bottom:38px}
.lead{max-width:62ch;color:#c9d4cc}

.chroma{text-shadow:3px 0 0 var(--magenta),-3px 0 0 var(--cyan),0 0 40px rgba(0,255,65,.34)}

/* ── nav ── */
nav{position:sticky;top:0;z-index:80;backdrop-filter:blur(10px);
  background:linear-gradient(to bottom,rgba(5,7,10,.94),rgba(5,7,10,.72));
  border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:22px;height:64px}
nav .logo{display:flex;align-items:center;gap:10px;font-family:var(--f-pixel);font-size:14px;color:var(--acid)}
nav .logo img{width:34px;height:34px;border:2px solid var(--matrix)}
nav .links{display:flex;gap:20px;margin-left:auto;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
nav .links a{color:#9fb0a4}
nav .links a:hover{color:var(--matrix)}
@media(max-width:860px){nav .links{display:none}}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:2px solid var(--matrix);
  background:var(--matrix);color:#00170a;font-family:var(--f-mono);font-weight:700;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:transform .12s,box-shadow .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--magenta)}
.btn.ghost{background:transparent;color:var(--matrix)}
.btn.ghost:hover{box-shadow:5px 5px 0 var(--cyan)}
.btn.sm{padding:9px 16px;font-size:12px}

/* ── hero ── */
.hero{padding-block:64px 48px;min-height:min(86vh,820px);display:flex;align-items:center}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;width:100%}
.hero h1{font-family:var(--f-display);font-size:clamp(56px,10.5vw,138px);line-height:.84;
  text-transform:uppercase;margin:6px 0 16px}
.hero .tag{display:inline-block;padding:6px 14px;border:2px solid var(--matrix);color:var(--matrix);
  font-size:12px;letter-spacing:.2em;background:rgba(0,255,65,.07)}
.hero-art{position:relative}
.hero-art img{width:100%;filter:drop-shadow(0 0 40px rgba(0,255,65,.3))}
.hero-art .halo{position:absolute;inset:6% 6% 6% 6%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,65,.24),transparent 66%);filter:blur(30px);z-index:-1}
@media(max-width:900px){.hero .grid{grid-template-columns:1fr}.hero-art{order:-1;max-width:420px;margin-inline:auto}}

.ca{margin-top:26px;border:2px solid var(--line2);background:rgba(0,20,8,.5);padding:14px 16px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ca code{font-family:var(--f-mono);font-size:14px;color:var(--acid);overflow-wrap:break-word;flex:1;min-width:200px}
.ca .lab{font-size:11px;letter-spacing:.2em;color:var(--dim)}

.agibar{margin-top:20px;font-family:var(--f-term);font-size:22px;color:var(--matrix)}
.agibar .track{height:14px;border:2px solid var(--line2);margin-top:6px;background:#020a05;position:relative}
.agibar .fill{height:100%;background:linear-gradient(90deg,var(--matrix),var(--acid));width:0.4%}

/* ── marquee ── */
.marq{border-block:2px solid var(--line2);background:rgba(0,255,65,.06);overflow:hidden;
  padding:12px 0;z-index:2;position:relative}
.marq div{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite;
  font-family:var(--f-term);font-size:26px;color:var(--matrix);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── generic panel ── */
.panel{position:relative;border:2px solid var(--line);background:rgba(8,14,12,.66);padding:30px}
.panel::before,.panel::after{content:"";position:absolute;width:16px;height:16px;border:3px solid var(--matrix)}
.panel::before{top:-3px;left:-3px;border-right:0;border-bottom:0}
.panel::after{bottom:-3px;right:-3px;border-left:0;border-top:0}

/* ── two-column compare ── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vs .col{border:2px solid rgba(0,229,255,.3);background:rgba(0,0,0,.4);padding:28px}
.vs .col.b{border-color:rgba(182,255,0,.36)}
.vs .col h3{color:var(--cyan);margin-bottom:16px}
.vs .col.b h3{color:var(--acid)}
.vs li{list-style:none;padding:13px 0;border-bottom:1px dashed rgba(255,255,255,.13);font-size:16px}
.vs li::before{content:"▸ ";color:var(--cyan)}
.vs .col.b li::before{color:var(--acid)}
@media(max-width:800px){.vs{grid-template-columns:1fr}}

/* ── benchmark table ── */
.evals{width:100%;border-collapse:collapse;font-size:15px}
.evals th{text-align:right;color:var(--dim);font-weight:400;letter-spacing:.14em;font-size:11px;
  text-transform:uppercase;padding:10px 8px;border-bottom:1px solid var(--line2)}
.evals th:first-child{text-align:left}
.evals td{padding:13px 8px;border-bottom:1px solid rgba(0,255,65,.12);text-align:right}
.evals td:first-child{text-align:left;color:#c9d4cc}
.evals .them{color:#7f8c84}
.evals .us{color:var(--laser);font-weight:700}
.evals tr.win .us{color:var(--acid)}
.evals tr.win .them{color:#4b554f}

/* ── architecture grid ── */
.arch{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.arch .mod{border:1px solid var(--line);background:rgba(0,0,0,.45);padding:18px;text-align:center;
  transition:transform .16s,border-color .16s,background .16s;cursor:default}
.arch .mod:hover{transform:translateY(-6px);border-color:var(--matrix);background:rgba(0,255,65,.06)}
.arch .mod .role{font-size:10px;letter-spacing:.2em;color:var(--matrix);text-transform:uppercase}
.arch .mod img{height:150px;object-fit:contain;margin:14px auto;width:auto}
.arch .mod .name{font-family:var(--f-display);font-size:20px;color:var(--acid);text-transform:uppercase}
.arch .mod .spec{font-size:12px;color:#8f9d93;margin-top:6px;min-height:34px}
@media(max-width:900px){.arch{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.arch{grid-template-columns:1fr}}

/* ── robot line ── */
.robotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rbt{border:1px solid var(--line);background:#f4f1e8;position:relative;overflow:hidden;
  transition:transform .16s,border-color .16s}
.rbt:hover{transform:translateY(-6px);border-color:var(--matrix)}
.rbt img{width:100%;aspect-ratio:1;object-fit:contain;padding:14px 14px 42px;background:#f4f1e8}
.rbt figcaption{position:absolute;inset:auto 0 0 0;background:rgba(5,7,10,.92);padding:8px 12px;
  display:flex;flex-direction:column;gap:2px}
.rbt figcaption b{font-family:var(--f-display);font-size:17px;color:var(--acid);letter-spacing:.02em}
.rbt figcaption span{font-size:11px;color:#9fb0a4}
@media(max-width:900px){.robotgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.robotgrid{grid-template-columns:1fr}}

/* ── terminal: ask brainlet-1 ── */
.term{border:2px solid var(--line2);background:#010703;font-family:var(--f-term);font-size:22px;
  color:var(--matrix);display:flex;flex-direction:column;height:430px}
.term .bar{background:var(--matrix);color:#00170a;font-family:var(--f-mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;padding:7px 12px;display:flex;justify-content:space-between;align-items:center}
.term .body{flex:1;overflow-y:auto;padding:16px 18px;line-height:1.35}
.term .body p{margin-bottom:8px}
.term .you{color:var(--cyan)}
.term .bot{color:var(--acid)}
.term form{display:flex;border-top:2px solid var(--line2)}
.term input{flex:1;background:transparent;border:0;outline:0;color:var(--matrix);
  font-family:var(--f-term);font-size:22px;padding:12px 18px}
.term button{background:var(--matrix);color:#00170a;border:0;padding:0 22px;cursor:pointer;
  font-family:var(--f-mono);font-size:12px;font-weight:700;letter-spacing:.14em}

/* ── win98 meme window ── */
.win{border:3px solid #dfdfdf;border-right-color:#404040;border-bottom-color:#404040;
  background:#c0c0c0;box-shadow:8px 8px 0 rgba(0,0,0,.55)}
.win .tb{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-family:var(--f-mono);
  font-size:12px;font-weight:700;padding:5px 8px;display:flex;align-items:center;gap:8px}
.win .tb .sp{margin-left:auto;display:flex;gap:3px}
.win .tb .sq{width:18px;height:16px;background:#c0c0c0;border:2px solid #fff;
  border-right-color:#404040;border-bottom-color:#404040;color:#000;font-size:10px;
  display:grid;place-items:center;line-height:1}
.win .inner{padding:12px;background:#c0c0c0}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-height:560px;overflow-y:auto;
  background:#fff;border:2px solid #404040;border-right-color:#fff;border-bottom-color:#fff;padding:10px}
.gal figure{position:relative;cursor:pointer;border:1px solid #999;overflow:hidden}
.gal img{aspect-ratio:1;object-fit:cover;transition:transform .2s}
.gal figure:hover img{transform:scale(1.06)}
.gal figure a{position:absolute;inset:auto 0 0 0;background:rgba(0,0,0,.78);color:var(--matrix);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-align:center;padding:5px;
  opacity:0;transition:opacity .16s}
.gal figure:hover a{opacity:1}
.win .status{margin-top:8px;font-family:var(--f-mono);font-size:11px;color:#000;
  border:2px solid #404040;border-right-color:#fff;border-bottom-color:#fff;padding:4px 8px}
@media(max-width:900px){.gal{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.gal{grid-template-columns:repeat(2,1fr)}}

/* ── stats / tokenomics ── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{border:1px solid var(--line);background:rgba(0,0,0,.4);padding:22px}
.stat .k{font-size:11px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.stat .v{font-family:var(--f-display);font-size:34px;color:var(--acid);margin-top:8px;line-height:1}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ── roadmap ── */
.road{display:flex;flex-direction:column;gap:14px}
.road .ph{display:flex;align-items:center;gap:22px;border-left:6px solid var(--acid);
  background:rgba(0,0,0,.4);padding:20px 24px;flex-wrap:wrap}
.road .ph:nth-child(3){border-color:var(--amber)}
.road .ph:nth-child(4){border-color:var(--laser)}
.road .n{font-size:12px;letter-spacing:.18em;color:var(--dim);width:92px}
.road .t{font-family:var(--f-term);font-size:30px;color:var(--paper);flex:1;min-width:200px}
.road .s{font-size:11px;letter-spacing:.16em;padding:5px 11px;border:2px solid var(--acid);color:var(--acid)}
.road .ph:nth-child(3) .s{border-color:var(--amber);color:var(--amber)}
.road .ph:nth-child(4) .s{border-color:var(--laser);color:var(--laser)}

/* ── how to buy ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.steps .s{border:1px solid var(--line);background:rgba(0,0,0,.4);padding:24px;position:relative}
.steps .s::before{counter-increment:s;content:"0" counter(s);font-family:var(--f-display);
  font-size:44px;color:rgba(0,255,65,.22);position:absolute;top:10px;right:14px;line-height:1}
.steps .s h3{font-size:19px;margin-bottom:8px}
.steps .s p{font-size:14px;color:#9fb0a4}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ── gif strip ── */
.gifs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.gifs figure{border:1px solid var(--line);background:#f4f1e8;padding:8px}
.gifs figcaption{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:#333;
  text-transform:uppercase;padding:8px 4px 2px}
@media(max-width:700px){.gifs{grid-template-columns:1fr}}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding-block:48px 64px;position:relative;z-index:2}
footer .row{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
footer .fine{font-size:12px;color:#5e6b63;margin-top:22px;max-width:74ch;line-height:1.7}

/* ── drifting wojak easter egg ── */
.drift{position:fixed;z-index:0;pointer-events:none;opacity:.07;width:150px;
  animation:float 26s linear infinite}
@keyframes float{from{transform:translate(-20vw,0) rotate(-6deg)}to{transform:translate(120vw,-60px) rotate(6deg)}}

.pop{position:fixed;z-index:70;pointer-events:none;width:90px;animation:pop .9s ease-out forwards}
@keyframes pop{from{transform:translate(-50%,-50%) scale(.2) rotate(-20deg);opacity:1}
  to{transform:translate(-50%,-180%) scale(1.1) rotate(16deg);opacity:0}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}