/* AI SYSTEMS — ai.mitdverse.com
   Path: public_html/MITD/v5/scenes/ai_systems/style.css
   Standalone; shares no rules with home.css or the v5 shell. */

:root{
  --ai-bg:#05060d;
  --ai-panel:#0d1020;
  --ai-panel-2:#121734;
  --ai-line:rgba(255,255,255,.10);
  --ai-line-warm:rgba(255,255,255,.18);
  --ai-ink:#e8ecff;
  --ai-dim:#98a1c2;
  --ai-faint:#6a7291;
  --ai-accent:#9b5cff;
  --ai-accent-2:#3ad8ff;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body.aiBody{
  background:var(--ai-bg);
  color:var(--ai-ink);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* Slow drifting field. No point-stars: static dots read as render errors. */
body.aiBody::before{
  content:"";
  position:fixed; inset:-20%;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 600px at 15% 5%,  rgba(155,92,255,.20), transparent 60%),
    radial-gradient(760px 520px at 85% 20%, rgba(58,216,255,.12), transparent 62%),
    radial-gradient(900px 700px at 50% 95%, rgba(155,92,255,.10), transparent 60%);
  animation:aiDrift 38s ease-in-out infinite alternate;
}
@keyframes aiDrift{
  from{ transform:translate3d(-2%,-1%,0) scale(1); }
  to  { transform:translate3d(2%,2%,0) scale(1.06); }
}

.aiTop{ position:relative; z-index:1; padding:26px 24px 0; max-width:1080px; margin:0 auto; }
.aiBack{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--ai-dim); text-decoration:none;
  font-size:13px; font-weight:600; letter-spacing:.04em;
  transition:color .16s;
}
.aiBack:hover{ color:var(--ai-ink); }
.aiBack svg{
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

.aiWrap{ position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:40px 24px 0; }

.aiHero{ text-align:center; padding:36px 0 52px; }
.aiEyebrow{
  margin:0 0 16px; color:var(--ai-accent-2);
  font-size:12px; letter-spacing:.30em; text-transform:uppercase;
}
.aiTitle{
  margin:0 0 18px;
  font-size:clamp(40px,8vw,72px); line-height:1.02; letter-spacing:-.025em;
  background:linear-gradient(92deg,#fff 22%,var(--ai-accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.aiLede{ margin:0 auto; max-width:56ch; color:var(--ai-dim); font-size:clamp(15px,2.4vw,18px); }

/* 340px floor, not 300: at the 1032px content width 300 fits three columns,
   which strands the fourth building card alone on row two above the feature.
   340 caps it at two, so the four building cards land 2x2.
   min(...,100%) keeps a single column from overflowing on a 320px phone. */
.aiGrid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
}

.aiCard{
  background:var(--ai-panel);
  border:1px solid var(--ai-line);
  border-radius:16px;
  padding:26px 24px 24px;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.aiCard:hover{
  border-color:var(--ai-line-warm);
  transform:translateY(-3px);
  box-shadow:0 20px 48px rgba(0,0,0,.5);
}

/* The one system that is actually shipping gets the full row. */
.aiCard--feature{
  grid-column:1/-1;
  background:
    linear-gradient(135deg, rgba(155,92,255,.16), transparent 58%),
    var(--ai-panel-2);
  border-color:rgba(155,92,255,.34);
  padding:34px 30px 30px;
}

.aiCardHead{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:6px; flex-wrap:wrap;
}
.aiCardName{ margin:0; font-size:20px; font-weight:680; letter-spacing:-.01em; }
.aiCard--feature .aiCardName{ font-size:clamp(22px,3.6vw,28px); }

.aiPill{
  flex:0 0 auto;
  padding:4px 12px; border-radius:999px;
  font-size:10px; font-weight:650; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--ai-line);
  color:var(--ai-faint);
}
.aiPill--running{
  color:var(--ai-accent-2);
  border-color:rgba(58,216,255,.40);
  background:rgba(58,216,255,.08);
}

.aiCardKicker{
  margin:0 0 14px; color:var(--ai-accent);
  font-size:13px; font-weight:600; letter-spacing:.02em;
}
.aiCardBody{ margin:0 0 12px; color:var(--ai-ink); font-size:15px; }
.aiCard--feature .aiCardBody{ font-size:17px; max-width:62ch; }
.aiCardDetail{ margin:0; color:var(--ai-dim); font-size:14px; }
.aiCard--feature .aiCardDetail{ max-width:62ch; }

.aiClose{
  margin:56px 0 0; padding:38px 30px;
  border:1px solid var(--ai-line); border-radius:16px;
  background:var(--ai-panel); text-align:center;
}
.aiClose h2{ margin:0 0 10px; font-size:20px; font-weight:680; }
.aiClose p{ margin:0 auto 24px; max-width:54ch; color:var(--ai-dim); font-size:15px; }
.aiCloseLinks{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.aiBtn{
  display:inline-flex; align-items:center;
  padding:13px 26px; border-radius:11px;
  background:linear-gradient(92deg,var(--ai-accent),#6f3ce0);
  color:#fff; text-decoration:none; font-weight:640; font-size:15px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 28px rgba(155,92,255,.30);
  transition:transform .16s, box-shadow .16s;
}
.aiBtn:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(155,92,255,.44); }
.aiBtn:focus-visible{ outline:2px solid var(--ai-accent-2); outline-offset:3px; }

.aiFoot{
  position:relative; z-index:1;
  margin-top:60px; padding:0 24px 56px;
  text-align:center; color:var(--ai-faint); font-size:12px;
}

@media (max-width:560px){
  .aiCard{ padding:22px 20px; }
  .aiCard--feature{ padding:26px 22px; }
}

@media (prefers-reduced-motion:reduce){
  body.aiBody::before{ animation:none; }
  .aiCard, .aiBtn, .aiBack{ transition:none; }
  .aiCard:hover, .aiBtn:hover{ transform:none; }
}