/* NetGrid AI Blueprint — blueprint.netgrid.org */

html { scroll-behavior: smooth; }
body { margin: 0; background: #06080b; -webkit-font-smoothing: antialiased; }
a { color: #5fb6e8; text-decoration: none; }
a:hover { color: #9ad8ff; }
::selection { background: rgba(47,134,207,.35); color: #fff; }
img { max-width: 100%; }
input, select, textarea, button { font-family: 'IBM Plex Sans', sans-serif; }
input::placeholder, textarea::placeholder { color: #6f7f8e; }

:focus-visible { outline: 2px solid #4aa3e8; outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 18px; background: #0a0d12; color: #eef3f7;
  border: 1px solid rgba(255,255,255,.2);
  font: 500 14px/1 'IBM Plex Sans', sans-serif;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---- animations ---- */
@keyframes ngBlink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }
@keyframes ngGrid  { from { transform: translate3d(0,0,0) } to { transform: translate3d(0,-64px,0) } }
@keyframes ngPulse { 0%,100% { opacity:.25; transform: scale(1) } 50% { opacity:.9; transform: scale(1.25) } }
@keyframes ngDrift { 0%,100% { transform: translate3d(0,0,0) } 50% { transform: translate3d(0,-14px,0) } }
@keyframes ngRise  { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.hero-grid  { animation: ngGrid 9s linear infinite; }
.dot-pulse  { animation: ngPulse 2.4s ease-in-out infinite; }
.hero-panel { animation: ngDrift 11s ease-in-out infinite; }
.console-row { animation: ngRise .5s cubic-bezier(.22,1,.36,1) both; }
.caret {
  display: inline-block; width: 7px; height: 14px; margin-left: 3px;
  background: #33b04a; vertical-align: -2px;
  animation: ngBlink 1s step-end infinite;
}

/* ---- links ---- */
.nav-link {
  font: 400 13.5px/1 'IBM Plex Sans', sans-serif;
  color: #93a1af; transition: color .2s ease;
}
.nav-link:hover { color: #eef3f7; }

.footer-link {
  font: 400 13px/1 'IBM Plex Sans', sans-serif;
  color: #7d8b99; transition: color .2s ease;
}
.footer-link:hover { color: #eef3f7; }

.link-mono {
  font: 400 12.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .08em; color: #5fb6e8; transition: color .2s ease;
}
.link-mono:hover { color: #9ad8ff; }

.contact-email {
  font: 500 20px/1.3 'Space Grotesk', sans-serif;
  color: #eef3f7; transition: color .2s ease;
}
.contact-email:hover { color: #4aa3e8; }

/* ---- buttons ---- */
.btn-primary {
  display: inline-block; border: 0; border-radius: 2px;
  background: linear-gradient(100deg, #1f8a2e, #2f86cf);
  color: #fff; font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500; line-height: 1; text-align: center;
  cursor: pointer; transition: filter .2s ease;
}
.btn-primary:hover { filter: brightness(1.12); color: #fff; }

.btn-ghost {
  display: inline-block; border-radius: 2px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  color: #dbe4ec; font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 500; line-height: 1; text-align: center;
  cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.btn-ghost:hover { border-color: rgba(255,255,255,.34); color: #eef3f7; }

/* ---- service cards ---- */
.svc-card {
  padding: clamp(26px,3.4vw,34px) clamp(22px,3vw,32px) clamp(24px,3vw,30px);
  background: linear-gradient(180deg, #0c1014, #090c10);
  border: 1px solid rgba(255,255,255,.09);
  display: flex; flex-direction: column; gap: 18px;
  transition: border-color .3s ease,
              transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s ease;
}
.svc-card:hover {
  border-color: rgba(47,134,207,.45);
  transform: translateY(-3px);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.9);
}

/* ---- stat counters ---- */
.stat-num {
  font: 600 clamp(40px,4.6vw,60px)/1 'Space Grotesk', sans-serif;
  letter-spacing: -.035em;
  background: linear-gradient(100deg, #33b04a, #4aa3e8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
}

/* ---- phase tabs ---- */
.phase-tab {
  text-align: left; background: transparent; border: 0;
  border-top: 2px solid transparent; padding: 0; cursor: pointer;
}

/* ---- case tabs ---- */
.case-tab {
  background: transparent; border: 0; padding: 16px 26px 15px;
  cursor: pointer; text-align: left; position: relative;
  font: 500 14.5px/1.3 'Space Grotesk', sans-serif;
  color: #7d8b99; transition: color .2s ease;
}
.case-tab[aria-selected="true"] { color: #eef3f7; }
.case-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: linear-gradient(90deg, #1f8a2e, #2f86cf);
}

/* ---- quiz ---- */
.quiz-opt {
  text-align: left; padding: 17px 20px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.02); color: #c3ceda;
  font: 400 14.5px/1.4 'IBM Plex Sans', sans-serif; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.quiz-opt:hover {
  border-color: rgba(51,176,74,.6);
  background: rgba(51,176,74,.07);
  color: #eef3f7;
}

/* ---- form fields ---- */
.field-label {
  font: 400 11px/1 'IBM Plex Mono', monospace;
  letter-spacing: .14em; text-transform: uppercase; color: #6f7f8e;
}
.field {
  padding: 13px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  color: #eef3f7;
  font: 400 14.5px/1 'IBM Plex Sans', sans-serif;
  border-radius: 0;
  transition: border-color .2s ease;
  width: 100%; box-sizing: border-box;
}
.field:focus { border-color: rgba(47,134,207,.7); }
/* Suppress the ring only for pointer focus; :focus-visible above keeps the
   keyboard ring. A blanket `outline:none` here would out-rank :focus-visible
   (equal specificity, declared later) and strip it from the whole form. */
.field:focus:not(:focus-visible) { outline: none; }
select.field { appearance: none; -webkit-appearance: none; }
select.field option { background: #0a0d12; color: #eef3f7; }

/* ---- reveal on scroll ---- */
[data-reveal].is-hidden { opacity: 0; transform: translateY(20px); }
[data-reveal] {
  transition: opacity .8s cubic-bezier(.22,1,.36,1),
              transform .8s cubic-bezier(.22,1,.36,1);
}

/* ---- narrow screens ---- */
@media (max-width: 620px) {
  .phase-outputs { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); padding-left: 0; padding-top: 28px; }
  .roi-inputs { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-grid, .dot-pulse, .hero-panel, .console-row, .caret { animation: none; }
  [data-reveal] { transition: none; }
  [data-reveal].is-hidden { opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; }
}

/* ---- fluid container guards ----
   The content container is fluid (clamp(1180px, 90vw, 1800px)), so on wide
   displays the columns get much wider than the original fixed 1180px layout.
   Cap running text so line length stays readable. Elements that already carry
   an inline max-width keep it — inline styles win over this rule. */
#ng-root p { max-width: 74ch; }
#ng-root blockquote { max-width: 62ch; }
#ng-root #phase-detail { max-width: 70ch; }