/* hub.pagebody.ai cockpit -- page-specific styles only.
   The chrome (tokens, reset, background, top bar, buttons, footer) comes from
   the shared foundation (foundation.css). Edit shared bits in foundation/, then
   run `npm run sync:foundation`. */

/* Hero: two columns (text + the animated diagram) */
.hero { position: relative; min-height: auto; display: flex; align-items: center; overflow: hidden; padding: clamp(120px, 18vh, 180px) 0 clamp(56px, 9vh, 96px); }
.hero-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 68px); align-items: center; width: 100%; }
.eyebrow { display: inline-block; font-size: 12.5px; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 20px; }
h1 { font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; font-size: clamp(2.5rem, 6.4vw, 4.6rem); margin-bottom: 20px; }
h1 .grn, h2 .grn { color: var(--accent); }
.hero-cap { font-size: clamp(1.05rem, 1.7vw, 1.32rem); font-weight: 300; color: rgba(244, 246, 243, 0.86); max-width: 30ch; margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-art { position: relative; width: 100%; }
@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 440px; margin-bottom: 12px; }
}

/* The CPU-style diagram (vanilla SVG + CSS motion paths) */
.cpu { display: block; width: 100%; height: auto; color: #3a4733; filter: drop-shadow(0 0 34px rgba(144, 254, 0, 0.08)); }
.cpu-architecture {
  offset-anchor: 10px 0px;
  animation: animation-path;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.75, -0.01, 0, 0.99);
}
.cpu-line-1 { offset-path: path("M 10 20 h 79.5 q 5 0 5 5 v 30"); animation-duration: 5s; animation-delay: 1s; }
.cpu-line-2 { offset-path: path("M 180 10 h -69.7 q -5 0 -5 5 v 40"); animation-delay: 6s; animation-duration: 2s; }
.cpu-line-3 { offset-path: path("M 130 20 v 21.8 q 0 5 -5 5 h -25"); animation-delay: 4s; animation-duration: 6s; }
.cpu-line-4 { offset-path: path("M 170 80 v -21.8 q 0 -5 -5 -5 h -65"); animation-delay: 3s; animation-duration: 3s; }
.cpu-line-5 { offset-path: path("M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -35"); animation-delay: 9s; animation-duration: 4s; }
.cpu-line-6 { offset-path: path("M 94.8 95 v -46"); animation-delay: 3s; animation-duration: 7s; }
.cpu-line-7 { offset-path: path("M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 28"); animation-delay: 4s; animation-duration: 4s; }
.cpu-line-8 { offset-path: path("M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 35"); animation-delay: 3s; animation-duration: 3s; }
@keyframes animation-path { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .cpu-architecture { animation: none; opacity: 0; } }

/* Buckets carousel */
.buckets { position: relative; padding: clamp(56px, 10vh, 120px) 0; border-top: 1px solid var(--border); }
h2 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; font-size: clamp(1.9rem, 4.6vw, 3.1rem); max-width: 20ch; }
.buckets > .wrap > h2 { margin-bottom: 36px; }
.carousel { display: grid; grid-template-columns: 290px 1fr; gap: 22px; align-items: stretch; }
.car-chips { display: flex; flex-direction: column; gap: 10px; }
.car-chip {
  display: inline-flex; align-items: center; gap: 12px; font-family: inherit; font-size: 15px; font-weight: 500;
  text-align: left; cursor: pointer; padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(18, 21, 18, 0.4); color: var(--muted);
  opacity: 0.5; filter: blur(1.4px);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease), filter 0.3s var(--ease);
}
.car-chip:hover { color: var(--fg); border-color: var(--border-2); opacity: 1; filter: none; }
.car-chip.is-active { background: var(--surface); color: var(--fg); border-color: rgba(144, 254, 0, 0.4); opacity: 1; filter: none; }
.car-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); flex: 0 0 auto; transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.car-chip.is-active .car-dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.car-stage { position: relative; min-height: 380px; border-radius: 18px; border: 1px solid var(--border-2); overflow: hidden; background: var(--surface-solid); }
.car-card { position: absolute; inset: 0; opacity: 0; transform: scale(1.02); pointer-events: none; transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.car-card.is-active { opacity: 1; transform: none; pointer-events: auto; }
.car-img { position: absolute; inset: 0; background-color: #0c0f0c; background-size: cover; background-position: center; }
.car-meta { position: absolute; inset-inline: 0; bottom: 0; padding: clamp(22px, 4vw, 34px); background: linear-gradient(180deg, transparent, rgba(6, 7, 6, 0.55) 40%, rgba(6, 7, 6, 0.9)); }
.car-tag { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.car-desc { font-size: clamp(1.1rem, 1.7vw, 1.4rem); color: var(--fg); font-weight: 300; letter-spacing: -0.01em; margin: 12px 0 16px; max-width: 38ch; }
.car-link { font-size: 14px; font-weight: 600; color: var(--accent); border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); }
.car-link:hover { border-color: var(--accent); }
@media (max-width: 820px) {
  .carousel { grid-template-columns: 1fr; }
  .car-chips { flex-direction: row; flex-wrap: wrap; }
  .car-chip { flex: 1 1 auto; }
  .car-stage { min-height: 420px; }
}

/* Magnet index */
.tools { position: relative; padding: clamp(56px, 10vh, 130px) 0; border-top: 1px solid var(--border); }
.tools .head { max-width: 40ch; }
.tools .sub { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--muted); margin-top: 18px; font-weight: 300; max-width: 52ch; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 44px; align-items: start; }
.magnet-card {
  display: flex; flex-direction: column; gap: 12px;
  border-radius: var(--radius); padding: 28px 26px;
  border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.3s var(--ease), filter 0.3s var(--ease);
}
.magnet-card:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.magnet-card:hover { transform: translateY(-3px); border-color: rgba(144, 254, 0, 0.4); }
.magnet-card.placeholder { border-style: dashed; background: rgba(18, 21, 18, 0.35); }
/* Focus effect: hovering one tile blurs the others back. */
.tool-grid:hover .magnet-card:not(:hover) { opacity: 0.45; filter: blur(1.4px); }
/* Collapse to title + status; reveal blurb + CTA on hover, focus, or tap (.is-open). */
.mc-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.4s var(--ease), opacity 0.35s var(--ease); }
.mc-reveal-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.magnet-card:hover .mc-reveal,
.magnet-card:focus-within .mc-reveal,
.magnet-card.is-open .mc-reveal { grid-template-rows: 1fr; opacity: 1; }
.mc-status { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.mc-status.live { color: var(--accent); }
.mc-status.soon { color: var(--amber); }
.magnet-card h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.magnet-card p { font-size: 14.5px; color: rgba(244, 246, 243, 0.82); font-weight: 300; line-height: 1.55; flex: 1; }
.mc-cta { font-size: 14px; font-weight: 600; color: var(--accent); margin-top: 6px; align-self: flex-start; border-bottom: 1px solid transparent; transition: border-color 0.2s var(--ease); }
.mc-cta:hover { border-color: var(--accent); }
.mc-cta.muted { color: var(--muted-2); cursor: default; }

/* Book a call */
.turn { position: relative; padding: clamp(72px, 12vh, 150px) 0; border-top: 1px solid var(--border); }
.turn .eyebrow2 { font-size: 12.5px; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 20px; }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 300; color: var(--muted); max-width: 56ch; margin-top: 22px; }
.book { margin-top: 32px; }
.book h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 600; letter-spacing: -0.03em; max-width: 24ch; }
.book p { color: var(--muted); font-size: 15px; max-width: 46ch; margin-top: 10px; }
.book-cta { margin-top: 28px; }