/* ============================================================
   Softtech DTC — Engineering Tomorrow
   Void-black + electric cyan + neon purple.
   App-shell: ONE big screen, no scroll. Persistent header + terminal;
   only the center stage (the active .view) swaps. The orb glides to a
   per-page resting position. (Tailwind Play CDN = utilities; this = custom layer)
   ============================================================ */

:root {
  --bg: #050508;
  --primary: #00f0ff;
  --accent: #b026ff;
  --glide: cubic-bezier(0.66, 0, 0.2, 1);
  --rise: cubic-bezier(0.22, 1, 0.36, 1);
  /* Engage: where the orb-core (and its concentric rings) rest — shared so they stay concentric */
  --eng-cx: clamp(-180px, -13vw, -90px);
  --eng-cy: clamp(-120px, -14vh, -70px);
}

/* App-shell: fixed, single viewport, never scrolls */
html, body { height: 100%; }
html { overflow: hidden; }
body {
  background-color: var(--bg); color: #f3f4f6;
  overflow: hidden; position: relative;
  min-height: 100%;
}

/* ---------- Background layer: clips glow to viewport, seats the orb ---------- */
.bg-layer {
  position: fixed; inset: 0; overflow: hidden; z-index: 0;
  background: var(--bg); pointer-events: none;
}

/* ---------- Fluid mesh gradient ---------- */
.mesh {
  position: absolute; top: -12%; right: -12%;
  width: 82vw; height: 82vw; max-width: 1040px; max-height: 1040px;
  background: radial-gradient(circle at center,
    rgba(0, 240, 255, 0.22) 0%, rgba(176, 38, 255, 0.14) 32%, transparent 62%);
  filter: blur(80px); z-index: 0; pointer-events: none;
  animation: meshDrift 18s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-5%, 5%, 0) scale(1.1); }
}

/* ---------- The orb ----------
   Single video. screen blend turns its black background transparent,
   so only the neon light floats over the void. It glides between pages. */
.orb {
  position: absolute; z-index: 1; pointer-events: none;
  top: 50%; left: 50%;
  width: min(82vw, 1040px); height: min(82vw, 1040px);
  mix-blend-mode: screen;
  /* default resting state (used before a page is set): nudged right, slightly smaller */
  transform: translate(-50%, -50%) translateX(27%) scale(0.92);
  transition: transform 2s var(--glide), opacity 1.4s ease, filter 0.7s ease;
  will-change: transform;
}
.orb__video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* intro state: centered & larger, the star of the opening (wins during intro) */
.intro-active .orb { transform: translate(-50%, -50%) scale(1.16); }

/* per-page resting positions — the glide targets (only once the intro is over) */
body[data-page="home"]:not(.intro-active) .orb {
  transform: translate(-50%, -50%) translateX(27%) scale(0.92);
}
/* Partners: orb to the right, aligned under the Journey Hub button (matches Customer Success) */
body[data-page="partners"]:not(.intro-active) .orb {
  transform: translate(-50%, -50%) translate(clamp(300px, 40vw, 580px), -31vh) scale(0.5);
}
/* Engage: the orb glides to a left-of-centre "core"; concentric with the reactor rings.
   --eng-charge (0→1, set by the wizard) brightens it as the prospect fills the brief. */
body[data-page="engage"]:not(.intro-active) .orb {
  transform: translate(-50%, -50%) translate(var(--eng-cx), var(--eng-cy)) scale(0.58);
  filter: brightness(calc(0.92 + var(--eng-charge, 0) * 0.5)) saturate(calc(1 + var(--eng-charge, 0) * 0.4));
}
/* Customer Success: ambient orb top-right, aligned under the Journey Hub button (bigger) */
body[data-page="success"]:not(.intro-active) .orb {
  transform: translate(-50%, -50%) translate(clamp(300px, 40vw, 580px), -31vh) scale(0.44);
  opacity: 0.5;
}
/* Capabilities: the orb floats (no box) in the left column, right below the CAPABILITIES eyebrow */
body[data-page="capabilities"]:not(.intro-active) .orb {
  transform: translate(-50%, -50%) translate(-32vw, -24vh) scale(0.42);
}
/* Services: the orb glides to the centre (nudged down to clear the heading) — the living core.
   The downward nudge is height-responsive and matches the constellation so they stay concentric. */
body[data-page="services"]:not(.intro-active) .orb {
  transform: translate(-50%, -50%) translate(clamp(120px, 17vw, 240px), clamp(8px, 2vh, 20px)) scale(0.62);
}

/* subtle vignette to seat the orb into the void */
.vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(125% 125% at 72% 48%, transparent 46%, rgba(5, 5, 8, 0.5) 100%);
}

/* ---------- Glassmorphic nav ---------- */
.glass-nav {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}
.navlink {
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: #f3f4f6;
  transition: color 0.2s, text-shadow 0.2s; cursor: pointer;
}
.navlink:hover { color: var(--primary); text-shadow: 0 0 16px rgba(0, 240, 255, 0.5); }
/* the active page's nav item stays lit */
body[data-page="capabilities"] .navlink[data-nav="capabilities"],
body[data-page="services"]    .navlink[data-nav="services"],
body[data-page="partners"]    .navlink[data-nav="partners"],
body[data-page="success"]     .navlink[data-nav="success"],
body[data-page="engage"]      .navlink[data-nav="engage"] {
  color: var(--primary); text-shadow: 0 0 16px rgba(0, 240, 255, 0.45);
}

.brand-logo { filter: brightness(0) invert(1); transition: filter .3s, opacity .3s; }
.site-header a[data-nav="home"]:hover .brand-logo { opacity: 0.82; }
/* DTC descriptor next to the logo — a quiet mono HUD label with a hairline divider, centred to the logo */
.brand-tagline {
  flex-direction: column; justify-content: center;
  margin-left: clamp(14px, 1.5vw, 20px); padding-left: clamp(14px, 1.5vw, 20px);
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: 1.5;
  letter-spacing: 0.16em; text-transform: uppercase; color: #9799a6; white-space: nowrap;
  transition: color .3s ease;
}
.site-header a[data-nav="home"]:hover .brand-tagline { color: #c8cbd5; }

/* ---------- CTA glow ---------- */
.cta-glow { transition: all 0.3s ease; }
.cta-glow:hover { box-shadow: 0 0 32px rgba(0, 240, 255, 0.45); transform: translateY(-2px); }

/* =========================================================================
   STAGE + VIEWS — the swappable center. One viewport, crossfade between pages.
   ========================================================================= */
.stage { position: fixed; inset: 0; z-index: 10; overflow: hidden; }
.view {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: clamp(96px, 12vh, 130px) clamp(24px, 6vw, 96px) clamp(168px, 21vh, 200px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.7s var(--rise), visibility 0s linear 0.55s;
}
.view.is-active {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 0.6s ease 0.05s, transform 0.8s var(--rise) 0.05s, visibility 0s;
}
.view-inner { width: 100%; max-width: 80rem; margin: 0 auto; }

/* ---------- Hero (home view) ---------- */
.hero-title { text-shadow: 0 0 60px rgba(0, 240, 255, 0.08); }
.hero-title__line { display: inline-block; }
/* the brand-cyan accent period — matches the "Journey Hub" cyan, a punctuation accent on the headline */
.hero-dot { color: var(--primary); text-shadow: 0 0 28px rgba(0, 240, 255, 0.6); }

/* ---------- Section eyebrow / title / lede (shared by inner pages) ---------- */
.eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--primary);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.eyebrow::before {
  content: ''; width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
}
.view-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 1.04; color: #f3f4f6;
  font-size: clamp(30px, 4.4vw, 60px);
  text-shadow: 0 0 60px rgba(0, 240, 255, 0.08);
}
.view-lede {
  margin-top: 20px; max-width: 560px; color: #8b8d98;
  font-family: 'Manrope', sans-serif; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.62;
}

/* gentle reveal of inner content when a view activates */
.view .view-inner > * { opacity: 0; transform: translateY(14px); }
.view.is-active .view-inner > * {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.7s var(--rise);
}
.view.is-active .view-inner > :nth-child(1) { transition-delay: 0.10s; }
.view.is-active .view-inner > :nth-child(2) { transition-delay: 0.18s; }
.view.is-active .view-inner > :nth-child(3) { transition-delay: 0.26s; }
.view.is-active .view-inner > :nth-child(4) { transition-delay: 0.34s; }
/* the home hero choreographs via .fade-seq instead — let it manage its own children
   (higher-specificity variant beats the generic .view.is-active reveal above) */
.view--home .view-inner > *,
.view--home.is-active .view-inner > * { opacity: 1; transform: none; transition: none; }

/* ---------- Partners logo wall ---------- */
.logo-wall {
  margin-top: clamp(22px, 3.4vh, 44px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
  max-width: 980px; list-style: none; padding: 0;
}
.logo-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 14px 15px;
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px;
  background: rgba(255, 255, 255, 0.018);
  transition: transform 0.4s var(--rise), border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
/* fixed-height mark box equalises every logo's optical size, square icon or wide wordmark alike */
.logo-mark {
  height: clamp(42px, 5.4vh, 48px); width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.logo-tile img {
  max-height: 100%; max-width: 146px; width: auto; height: auto;
  filter: brightness(0) invert(1); opacity: 0.7;
  transition: filter 0.45s ease, opacity 0.4s ease, transform 0.4s var(--rise);
}
.logo-name {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500;
  letter-spacing: 0.05em; color: #8b8d98; white-space: nowrap;
  transition: color 0.35s ease;
}
.logo-tile:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 240, 255, 0.35);
  background: rgba(0, 240, 255, 0.04);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 26px rgba(0, 240, 255, 0.12);
}
.logo-tile:hover img { filter: none; opacity: 1; transform: scale(1.05); }
.logo-tile:hover .logo-name { color: #f3f4f6; }
/* logos whose brand colour is dark stay white on hover — just brighten + glow */
.logo-tile--mono:hover img { filter: brightness(0) invert(1); opacity: 1; }

/* ---------- Module placeholder ---------- */
.prov-bar {
  margin-top: 30px; width: 230px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.prov-bar span {
  display: block; height: 100%; width: 38%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: prov 1.7s ease-in-out infinite;
}
@keyframes prov {
  0% { transform: translateX(-130%); }
  100% { transform: translateX(360%); }
}

/* =========================================================================
   SERVICES — the orb glides to the centre and becomes the living core;
   six services orbit it on a dashed ring (inspired by services.mp4, our language)
   ========================================================================= */
.view--services { display: block; padding: 0; }
.svc-defs { position: absolute; width: 0; height: 0; }

/* left text column — vertically centred, capped so it never reaches the right-shifted ring labels */
.svc-aside {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: clamp(24px, 6vw, 96px);
  width: clamp(300px, 35%, 410px); max-width: min(26rem, 37vw);
  z-index: 4;
}
.svc-aside .eyebrow { margin-bottom: 18px; }
.svc-headline {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: none;
  font-size: clamp(28px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -0.02em; color: #f3f4f6;
  text-shadow: 0 0 60px rgba(0, 240, 255, 0.08);
}
.svc-accent { color: var(--primary); text-shadow: 0 0 28px rgba(0, 240, 255, 0.6); }
.svc-lede {
  margin-top: 22px; max-width: 34ch;
  font-family: 'Manrope', sans-serif; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.62; color: #8b8d98;
}

/* the constellation is concentric with the orb (same height-responsive downward nudge) */
.constellation {
  position: absolute; top: calc(50% + clamp(8px, 2vh, 20px));
  left: calc(50% + clamp(120px, 17vw, 240px)); transform: translate(-50%, -50%);
  width: clamp(340px, 44vh, 460px); aspect-ratio: 1 / 1; z-index: 3;
}

/* dashed orbit ring with a slow continuous drift */
.orbit-ring {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.22));
}
.orbit-ring circle {
  fill: none; stroke: rgba(0, 240, 255, 0.32); stroke-width: 0.3;
  stroke-dasharray: 1.3 2.4; stroke-linecap: round;
  animation: orbitDrift 60s linear infinite;
}
@keyframes orbitDrift { to { stroke-dashoffset: -200; } }

/* nodes: the icon is anchored ON the ring (hexagon points); text radiates outward */
.svc-node { position: absolute; transform: translate(-50%, -50%); z-index: 3; outline: none; }
.n-top { left: 50%;   top: 0; }
.n-tr  { left: 93.3%; top: 25%; }
.n-br  { left: 93.3%; top: 75%; }
.n-bot { left: 50%;   top: 100%; }
.n-bl  { left: 6.7%;  top: 75%; }
.n-tl  { left: 6.7%;  top: 25%; }

.svc-icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(0, 240, 255, 0.12), rgba(9, 11, 17, 0.92));
  border: 1px solid rgba(0, 240, 255, 0.30);
  box-shadow: 0 0 0 7px rgba(5, 5, 8, 0.72), 0 8px 26px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s var(--rise), border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.svc-svg { width: 27px; height: 27px; display: block; filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.5)); }

.svc-text { position: absolute; width: 208px; pointer-events: none; }
.svc-text h3 {
  font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 600;
  color: #f3f4f6; line-height: 1.22; transition: color 0.35s ease;
}
.svc-text p {
  margin-top: 5px; font-family: 'Manrope', sans-serif; font-size: 12.5px;
  letter-spacing: 0.01em; color: #9799a6; line-height: 1.42;
}
/* text placement relative to each icon (pointing inward) */
.n-top .svc-text { left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); text-align: center; }
.n-bot .svc-text { left: 50%; top: calc(100% + 12px); transform: translateX(-50%); text-align: center; }
.n-tr .svc-text, .n-br .svc-text { left: calc(100% + 15px); top: 50%; transform: translateY(-50%); text-align: left; }
.n-tl .svc-text, .n-bl .svc-text { right: calc(100% + 15px); top: 50%; transform: translateY(-50%); text-align: right; }

/* hover / keyboard focus — the node lights up */
.svc-node:hover .svc-icon, .svc-node:focus-visible .svc-icon {
  transform: scale(1.12); border-color: rgba(0, 240, 255, 0.7);
  background: radial-gradient(circle at 50% 38%, rgba(0, 240, 255, 0.24), rgba(9, 11, 17, 0.95));
  box-shadow: 0 0 0 7px rgba(5, 5, 8, 0.72), 0 0 26px rgba(0, 240, 255, 0.38), 0 10px 30px rgba(0, 0, 0, 0.55);
}
.svc-node:hover .svc-svg, .svc-node:focus-visible .svc-svg { filter: drop-shadow(0 0 9px rgba(0, 240, 255, 0.9)); }
.svc-node:hover .svc-text h3, .svc-node:focus-visible .svc-text h3 { color: var(--primary); }

/* reveal choreography on activation (orb glide is automatic via the 2s transform transition) */
.view--services .svc-aside { opacity: 0; transition: opacity 0.6s ease; }
.view--services .orbit-ring { opacity: 0; transform: scale(0.86); transition: opacity 0.8s ease, transform 0.9s var(--rise); }
.view--services .svc-node { opacity: 0; transition: opacity 0.55s ease; }
.view--services.is-active .svc-aside { opacity: 1; transition-delay: 0.1s; }
.view--services.is-active .orbit-ring { opacity: 1; transform: scale(1); transition-delay: 0.2s; }
.view--services.is-active .n-top { opacity: 1; transition-delay: 0.30s; }
.view--services.is-active .n-tr  { opacity: 1; transition-delay: 0.40s; }
.view--services.is-active .n-br  { opacity: 1; transition-delay: 0.50s; }
.view--services.is-active .n-bot { opacity: 1; transition-delay: 0.60s; }
.view--services.is-active .n-bl  { opacity: 1; transition-delay: 0.70s; }
.view--services.is-active .n-tl  { opacity: 1; transition-delay: 0.80s; }

/* mobile / narrow: linearise into a centred list (no horizontal overflow) */
@media (max-width: 880px) {
  .view--services { display: flex; align-items: flex-start; padding: 104px 24px 40px; }
  .svc-head { position: static; margin-bottom: 22px; }
  .constellation { position: static; transform: none; width: 100%; max-width: 440px;
    margin: 0 auto; aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; }
  .orbit-ring { display: none; }
  .svc-node { position: static; transform: none; opacity: 1; display: flex; align-items: center; gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; padding: 12px 14px; background: rgba(255, 255, 255, 0.02); }
  .svc-icon { flex: none; }
  .svc-text { position: static; transform: none !important; width: auto; text-align: left !important; }
}

/* =========================================================================
   CAPABILITIES — futuristic bento: a left aside (eyebrow + the orb, no box,
   + a big punchy headline) and 6 capability cards that open an animated panel.
   ========================================================================= */
.view--capabilities { display: block; padding: 0; }
.cap-defs { position: absolute; width: 0; height: 0; }

/* the bounded region: a left aside + the card grid, between the header and the terminal */
.view-inner--cap {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: clamp(82px, 10.5vh, 110px);
  bottom: clamp(148px, 18.5vh, 184px);
  width: min(80rem, calc(100vw - 2 * clamp(24px, 6vw, 96px)));
  display: flex; flex-direction: row; gap: clamp(20px, 3vw, 48px); align-items: stretch;
}

/* left aside: CAPABILITIES eyebrow → the orb (floats over the spacer, no box) → the big headline */
.cap-aside { flex: 0 0 clamp(300px, 27%, 400px); min-width: 0; display: flex; flex-direction: column; }
.cap-aside .eyebrow { margin-bottom: 0; }
.cap-orb-space { flex: 0 0 auto; height: clamp(168px, 25vh, 240px); }   /* the orb glows over this, right below the eyebrow */
.cap-headline { max-width: 30ch; }
.cap-headline__title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 1.06; color: #f3f4f6;
  font-size: clamp(24px, 2.5vw, 38px); text-shadow: 0 0 50px rgba(0, 240, 255, 0.1);
}
.cap-headline__lede {
  margin-top: 14px; font-family: 'Manrope', sans-serif; font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55; color: #8b8d98;
}

/* the card grid: 3 columns × 2 rows (6 capability cards) */
.cap-grid {
  flex: 1 1 auto; min-width: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr;
  gap: clamp(10px, 1.1vw, 16px);
}

/* capability cards */
.cap-card {
  position: relative; overflow: hidden; cursor: pointer; outline: none;
  display: flex; flex-direction: column; padding: clamp(15px, 1.8vh, 22px);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px;
  background: rgba(12, 14, 20, 0.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 0.4s var(--rise), border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.cap-card__title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(13.5px, 1.12vw, 16.5px); line-height: 1.2; color: #f3f4f6; max-width: 94%;
}
.cap-visual { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; margin: 6px 0 16px; }
.cap-visual-svg {
  width: 100%; height: 100%; max-height: clamp(96px, 17vh, 165px); opacity: 0.88;
  filter: drop-shadow(0 0 7px rgba(0, 240, 255, 0.38));
  transition: opacity 0.4s ease, transform 0.5s var(--rise);
}
/* the OPEN hint lives in the bottom corner */
.cap-card__hint {
  position: absolute; bottom: clamp(12px, 1.5vh, 18px); right: clamp(14px, 1.7vh, 20px);
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.32); transition: color 0.35s ease;
}
.cap-card__arrow { display: inline-block; transition: transform 0.35s var(--rise); }
.cap-card:hover, .cap-card:focus-visible {
  transform: translateY(-4px); border-color: rgba(0, 240, 255, 0.4); background: rgba(0, 240, 255, 0.05);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 240, 255, 0.12);
}
.cap-card:hover .cap-visual-svg, .cap-card:focus-visible .cap-visual-svg { opacity: 1; transform: scale(1.05); }
.cap-card:hover .cap-card__hint, .cap-card:focus-visible .cap-card__hint { color: var(--primary); }
.cap-card:hover .cap-card__arrow, .cap-card:focus-visible .cap-card__arrow { transform: translate(2px, -2px); }

/* living touches on the in-card visuals: a soft glow behind + gentle motion on key elements */
.cap-visual-svg { position: relative; z-index: 1; }
.cap-visual::before {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64%; height: 66%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.16), transparent 68%);
  filter: blur(16px); opacity: 0.7; transition: opacity 0.4s ease;
}
.cap-card:hover .cap-visual::before, .cap-card:focus-visible .cap-visual::before { opacity: 1; }
.cap-pulse { transform-box: fill-box; transform-origin: center; animation: capPulse 2.8s ease-in-out infinite; }
@keyframes capPulse { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.18); opacity: 0.6; } }
.cap-orbit { transform-box: fill-box; transform-origin: center; animation: capOrbit 18s linear infinite; }
@keyframes capOrbit { to { transform: rotate(360deg); } }
.cap-bar { transform-box: fill-box; transform-origin: bottom; animation: capBar 3.2s ease-in-out infinite; }
@keyframes capBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.12); } }

/* reveal on activation (animation w/ backwards fill so hover transforms still work afterwards) */
@keyframes capReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.view--capabilities.is-active .eyebrow { animation: capReveal 0.6s var(--rise) backwards; }
.view--capabilities.is-active .cap-headline { animation: capReveal 0.7s var(--rise) 0.14s backwards; }
.view--capabilities.is-active .cap-card { animation: capReveal 0.6s var(--rise) backwards; }
.view--capabilities.is-active .cap-card:nth-child(1) { animation-delay: 0.10s; }
.view--capabilities.is-active .cap-card:nth-child(2) { animation-delay: 0.16s; }
.view--capabilities.is-active .cap-card:nth-child(3) { animation-delay: 0.22s; }
.view--capabilities.is-active .cap-card:nth-child(4) { animation-delay: 0.28s; }
.view--capabilities.is-active .cap-card:nth-child(5) { animation-delay: 0.34s; }
.view--capabilities.is-active .cap-card:nth-child(6) { animation-delay: 0.40s; }

/* ---------- capability detail panel (opens on card click) ---------- */
.cap-modal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: clamp(20px, 5vh, 60px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.cap-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s ease, visibility 0s; }
.cap-modal__backdrop {
  position: absolute; inset: 0; background: rgba(3, 4, 8, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cap-modal__panel {
  position: relative; z-index: 1; width: min(560px, 100%); max-height: 82vh; overflow-y: auto;
  padding: clamp(26px, 4vh, 40px);
  background: linear-gradient(170deg, rgba(14, 16, 22, 0.97), rgba(9, 10, 15, 0.98));
  border: 1px solid rgba(0, 240, 255, 0.28); border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 50px rgba(0, 240, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(18px) scale(0.94); opacity: 0;
  transition: transform 0.5s var(--rise), opacity 0.45s ease;
}
.cap-modal.is-open .cap-modal__panel { transform: none; opacity: 1; }
.cap-modal__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8b8d98; font-size: 13px; cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.cap-modal__close:hover { color: var(--primary); border-color: rgba(0, 240, 255, 0.5); background: rgba(0, 240, 255, 0.08); }
.cap-modal__eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 16px;
}
.cap-modal__visual { height: clamp(108px, 17vh, 148px); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.cap-modal__visual .cap-visual-svg { max-height: 100%; opacity: 1; filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.5)); }
.cap-modal__title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(20px, 2.3vw, 27px); line-height: 1.16; color: #f3f4f6;
}
.cap-modal__desc { margin-top: 14px; font-family: 'Manrope', sans-serif; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.6; color: #b9bcc9; }

/* responsive: stack the aside above a 2-col card grid on narrow screens */
@media (max-width: 900px) {
  .view--capabilities { display: block; }
  .view-inner--cap { position: static; transform: none; inset: auto; width: auto; flex-direction: column; padding: 100px 24px 48px; }
  .cap-aside { flex: none; }
  .cap-orb-space { height: 150px; }
  .cap-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .cap-card { min-height: 150px; }
}

/* =========================================================================
   CUSTOMER SUCCESS — split view: left = 2 stacked story videos (YouTube
   facades), a glowing centre rail, right = the reference-customer logo wall.
   ========================================================================= */
.view--success { display: block; padding: 0; }
.view-inner--success {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: clamp(96px, 12vh, 126px); bottom: clamp(158px, 20vh, 188px);
  width: min(80rem, calc(100vw - 2 * clamp(24px, 6vw, 96px)));
  display: grid; grid-template-columns: 1fr 1px 1fr; column-gap: clamp(28px, 4vw, 64px);
}

/* LEFT — stacked story videos (top-anchored so they clear the bottom-left terminal) */
.cs-stories { align-self: stretch; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 20px); }
.cs-stories .eyebrow { margin-bottom: clamp(6px, 1.2vh, 14px); }
.cs-story {
  position: relative; overflow: hidden; cursor: pointer; outline: none;
  width: 100%; flex: 1 1 auto; min-height: 0; aspect-ratio: 16 / 9; max-height: clamp(188px, 32vh, 300px);
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; background: #0a0c12;
  transition: transform 0.4s var(--rise), border-color 0.4s ease, box-shadow 0.4s ease;
}
.cs-story__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: transform 0.5s var(--rise), opacity 0.4s ease; }
.cs-story__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(155deg, rgba(5,5,8,0.10) 32%, rgba(5,5,8,0.55) 72%, rgba(5,5,8,0.88)); }
.cs-story__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(0, 240, 255, 0.14); border: 1px solid rgba(0, 240, 255, 0.5); color: var(--primary);
  box-shadow: 0 0 0 6px rgba(5, 5, 8, 0.38), 0 0 26px rgba(0, 240, 255, 0.3);
  transition: transform 0.35s var(--rise), background 0.35s ease, box-shadow 0.35s ease;
  animation: csPlayPulse 2.8s ease-in-out infinite;
}
.cs-story__play svg { width: 22px; height: 22px; margin-left: 2px; }
@keyframes csPlayPulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(5,5,8,0.38), 0 0 22px rgba(0,240,255,0.25); } 50% { box-shadow: 0 0 0 6px rgba(5,5,8,0.38), 0 0 34px rgba(0,240,255,0.5); } }
.cs-story__meta { position: absolute; left: 16px; right: 16px; bottom: 13px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.cs-story__kicker { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; color: var(--primary); }
.cs-story__title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(16px, 1.4vw, 20px); color: #f3f4f6; line-height: 1.16; }
.cs-story__sub { font-family: 'Manrope', sans-serif; font-size: clamp(12.5px, 1vw, 14px); color: #c8cbd5; line-height: 1.3; }
.cs-story:hover, .cs-story:focus-visible { transform: translateY(-3px); border-color: rgba(0, 240, 255, 0.4); box-shadow: 0 18px 44px rgba(0,0,0,0.5), 0 0 28px rgba(0,240,255,0.12); }
.cs-story:hover .cs-story__poster, .cs-story:focus-visible .cs-story__poster { transform: scale(1.04); opacity: 1; }
.cs-story:hover .cs-story__play, .cs-story:focus-visible .cs-story__play { transform: translate(-50%, -50%) scale(1.12); background: rgba(0, 240, 255, 0.22); animation: none; box-shadow: 0 0 0 6px rgba(5,5,8,0.38), 0 0 36px rgba(0,240,255,0.55); }
/* swapped to the live YouTube iframe on click */
.cs-story__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 16px; z-index: 6; }
.cs-story.is-playing .cs-story__poster, .cs-story.is-playing .cs-story__scrim,
.cs-story.is-playing .cs-story__play, .cs-story.is-playing .cs-story__meta { opacity: 0; pointer-events: none; }

/* CENTRE rail */
.cs-rail {
  align-self: center; justify-self: center; width: 1px; height: 84%;
  background: linear-gradient(to bottom, transparent, rgba(0,240,255,0.35) 18%, rgba(176,38,255,0.30) 82%, transparent);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.22);
}

/* RIGHT — reference-customer logo wall (mono-white Space Grotesk wordmarks; swap real SVGs in later) */
.cs-customers { align-self: center; min-width: 0; display: flex; flex-direction: column; }
.cs-customers .eyebrow { margin-bottom: clamp(10px, 1.6vh, 18px); }
.cs-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(9px, 1vw, 14px); list-style: none; padding: 0; margin: 0; }
.cs-logo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(66px, 9.8vh, 98px); padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 13px; background: rgba(255, 255, 255, 0.02);
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(11.5px, 0.95vw, 14px);
  letter-spacing: 0.005em; line-height: 1.14; color: rgba(243, 244, 246, 0.82);
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease, transform 0.35s var(--rise), box-shadow 0.35s ease;
}
.cs-logo:hover {
  color: var(--primary); border-color: rgba(0, 240, 255, 0.35); background: rgba(0, 240, 255, 0.04);
  transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(0, 240, 255, 0.12);
}
/* tiles that carry a real logo: mono-white mark + a small name; hover reveals the brand colour */
.cs-logo--img { flex-direction: column; gap: 7px; }
.cs-logo__img { max-height: 28px; max-width: 112px; width: auto; height: auto; filter: brightness(0) invert(1); opacity: 0.82; transition: filter 0.4s ease, opacity 0.4s ease; }
/* compact square marks read small next to wide wordmarks — bump them up (e.g. Şişecam) */
.cs-logo--xl .cs-logo__img { max-height: clamp(48px, 6.6vh, 58px); max-width: 104px; }
.cs-logo--img .cs-logo__name { font-size: clamp(9.5px, 0.72vw, 11px); font-weight: 500; letter-spacing: 0.02em; color: rgba(243, 244, 246, 0.55); }
.cs-logo:hover .cs-logo__img { filter: none; opacity: 1; }
.cs-logo:hover .cs-logo__name { color: var(--primary); }
.cs-more { margin-top: clamp(10px, 1.5vh, 16px); text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: rgba(0, 240, 255, 0.7); }

/* reveal on activation */
.view--success .cs-stories, .view--success .cs-rail, .view--success .cs-customers { opacity: 0; }
.view--success.is-active .cs-stories { opacity: 1; transition: opacity 0.6s ease 0.1s; }
.view--success.is-active .cs-rail { opacity: 1; transition: opacity 0.8s ease 0.28s; }
.view--success.is-active .cs-customers { opacity: 1; transition: opacity 0.6s ease 0.2s; }

/* responsive: stack columns, hide the rail */
@media (max-width: 900px) {
  .view--success { display: block; }
  .view-inner--success { position: static; transform: none; inset: auto; width: auto; display: block; padding: 100px 24px 48px; }
  .cs-rail { display: none; }
  .cs-customers { margin-top: 26px; }
  .cs-wall { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   ENGAGE — "The Core": the orb glides to a left-of-centre core; four reactor
   rings ignite one per step; a glass console docks centre-right. POSTs the brief.
   ========================================================================= */
.view--engage { display: block; padding: 0; }
.eng-defs { position: absolute; width: 0; height: 0; }

/* the reactor rings, concentric with the orb-core (shares the orb's engage offset vars) */
.eng-core {
  position: absolute; z-index: 3; pointer-events: none;
  top: calc(50% + var(--eng-cy)); left: calc(50% + var(--eng-cx)); transform: translate(-50%, -50%);
  width: clamp(300px, 42vh, 420px); aspect-ratio: 1 / 1;
}
.eng-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eng-ring {
  fill: none; stroke: rgba(120, 140, 170, 0.16); stroke-width: 0.4;
  transition: stroke 0.6s ease, stroke-width 0.6s ease, filter 0.6s ease;
}
.eng-ring.is-lit { stroke: url(#engGrad); stroke-width: 0.7; filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.5)); }
.eng-ring.is-active {
  stroke: rgba(0, 240, 255, 0.85); stroke-width: 0.7; stroke-dasharray: 2 3; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.7)); animation: engRingSpin 8s linear infinite;
}
@keyframes engRingSpin { to { stroke-dashoffset: -100; } }

/* bloom on transmit */
.eng-bloom {
  position: absolute; top: 50%; left: 50%; width: 32%; height: 32%; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.5), rgba(176, 38, 255, 0.18) 58%, transparent 72%);
}
.view--engage[data-state="success"] .eng-bloom { animation: engBloom 1s var(--rise) forwards; }
@keyframes engBloom {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}

/* the glass console — docked centre-right, vertically centred (the cap-card recipe) */
.eng-console {
  position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
  right: clamp(24px, 6vw, 96px); width: clamp(320px, 38vw, 468px);
  max-height: calc(100vh - clamp(96px, 12vh, 130px) - clamp(168px, 21vh, 200px));
  padding: clamp(22px, 3vh, 34px) clamp(22px, 2.6vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px;
  background: rgba(12, 14, 20, 0.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 50px rgba(0, 240, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.eng-eyebrow { margin-bottom: clamp(14px, 2.2vh, 22px); }
.eng-stepno { color: rgba(243, 244, 246, 0.5); }

/* one step (or state) visible at a time */
.eng-step { display: none; }
.eng-step.is-current { display: block; animation: engStepIn 0.42s var(--rise); }
@keyframes engStepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.eng-q {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; text-transform: none;
  font-size: clamp(21px, 2.2vw, 30px); line-height: 1.12; letter-spacing: -0.02em; color: #f3f4f6;
}
.eng-lede { margin-top: 12px; font-family: 'Manrope', sans-serif; font-size: clamp(13.5px, 1.05vw, 15.5px); line-height: 1.55; color: #9799a6; }
.eng-hint { margin-top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0, 240, 255, 0.6); }

/* fields */
.eng-field { margin-top: clamp(13px, 1.9vh, 20px); }
.eng-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(0, 240, 255, 0.7); margin-bottom: 7px; }
.eng-input {
  width: 100%; padding: 8px 2px; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: #f3f4f6; font-family: 'Manrope', sans-serif; font-size: clamp(15px, 1.3vw, 18px);
  outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.eng-input::placeholder { color: rgba(139, 141, 152, 0.55); }
.eng-input:focus { border-bottom-color: var(--primary); box-shadow: 0 1px 0 var(--primary), 0 8px 20px -12px rgba(0, 240, 255, 0.6); }
.eng-field--invalid .eng-input { border-bottom-color: #febc2e; }
.eng-err { margin-top: 7px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #febc2e; }
.eng-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* multi-select chips */
.eng-chips { margin-top: clamp(11px, 1.7vh, 17px); display: flex; flex-wrap: wrap; gap: clamp(7px, 0.7vw, 10px); }
.eng-chip {
  font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(12.5px, 0.95vw, 14px);
  color: rgba(243, 244, 246, 0.82); padding: 9px 15px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.025); cursor: pointer; outline: none;
  transition: transform 0.3s var(--rise), color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.eng-chip:hover, .eng-chip:focus-visible {
  transform: translateY(-2px); border-color: rgba(0, 240, 255, 0.4);
  background: rgba(0, 240, 255, 0.05); box-shadow: 0 0 20px rgba(0, 240, 255, 0.12);
}
.eng-chip[aria-checked="true"] {
  color: #eafdff; border-color: rgba(0, 240, 255, 0.6);
  background: rgba(0, 240, 255, 0.12); box-shadow: 0 0 22px rgba(0, 240, 255, 0.18);
}

/* textarea */
.eng-textarea {
  width: 100%; margin-top: clamp(12px, 1.8vh, 18px); padding: 12px 14px; resize: none;
  background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px;
  color: #f3f4f6; font-family: 'Manrope', sans-serif; font-size: 14.5px; line-height: 1.5; outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.eng-textarea:focus { border-color: rgba(0, 240, 255, 0.5); box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1); }

/* nav buttons */
.eng-nav { margin-top: clamp(17px, 2.5vh, 25px); display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.eng-nav--solo { justify-content: flex-start; }
.eng-btn {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13.5px; letter-spacing: 0.02em;
  padding: 11px 22px; border-radius: 999px; cursor: pointer; outline: none;
  transition: transform 0.3s var(--rise), background 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
}
.eng-btn span { display: inline-block; transition: transform 0.3s var(--rise); }
.eng-btn--primary { color: #04121a; background: var(--primary); border: 1px solid var(--primary); box-shadow: 0 0 26px rgba(0, 240, 255, 0.3); }
.eng-btn--primary:hover, .eng-btn--primary:focus-visible { transform: translateY(-2px); box-shadow: 0 0 38px rgba(0, 240, 255, 0.5); }
.eng-btn--primary:hover span { transform: translateX(3px); }
.eng-btn--ghost { color: #8b8d98; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); }
.eng-btn--ghost:hover, .eng-btn--ghost:focus-visible { color: #f3f4f6; border-color: rgba(0, 240, 255, 0.4); }

/* transient states */
.eng-result { display: none; }
.view--engage[data-state="sending"] .eng-steps,
.view--engage[data-state="success"] .eng-steps,
.view--engage[data-state="error"] .eng-steps { display: none; }
.view--engage[data-state="sending"] .eng-result--sending,
.view--engage[data-state="success"] .eng-result--success,
.view--engage[data-state="error"] .eng-result--error { display: block; animation: engStepIn 0.42s var(--rise); }
.eng-result__mark { font-size: 34px; line-height: 1; color: #2ee6a6; text-shadow: 0 0 20px rgba(46, 230, 166, 0.6); margin-bottom: 10px; }
.eng-result__mark--warn { color: #febc2e; text-shadow: 0 0 20px rgba(254, 188, 46, 0.5); }
.eng-result__meta { margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.04em; color: #2ee6a6; }
.eng-link { color: var(--primary); text-decoration: underline; }
.eng-spinner {
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 16px;
  border: 2px solid rgba(0, 240, 255, 0.18); border-top-color: var(--primary); animation: engSpin 0.8s linear infinite;
}
@keyframes engSpin { to { transform: rotate(360deg); } }

/* a11y live region (visually hidden) */
.eng-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* reveal on activation (orb glide is automatic via the 2s transform transition) */
.view--engage .eng-console, .view--engage .eng-core { opacity: 0; transition: opacity 0.6s ease; }
.view--engage.is-active .eng-console { opacity: 1; transition-delay: 0.15s; }
.view--engage.is-active .eng-core { opacity: 1; transition-delay: 0.05s; }

/* responsive: stack the console, drop the core */
@media (max-width: 900px) {
  .eng-core { display: none; }
  .eng-console {
    position: static; transform: none; width: auto; max-width: 520px; max-height: none;
    margin: 104px auto 40px;
  }
}

/* =========================================================================
   TERMINAL — frameless. No window chrome, no panel: just the command lines,
   bottom-left, fading upward into nothing. Docked to mirror the header so its
   left edge lines up with the logo.
   ========================================================================= */
/* the dock mirrors the header (fixed full-width + same px padding + max-w-7xl mx-auto child),
   so the terminal's left edge lines up exactly with the logo above it */
.terminal-dock {
  bottom: clamp(18px, 3vh, 36px);
  pointer-events: none;            /* bare text — never traps clicks meant for the stage */
}
.terminal {
  width: min(400px, 100%);
  font-family: 'JetBrains Mono', monospace;
}
.terminal__body {
  font-size: 12.5px; line-height: 1.65;
  min-height: 120px; max-height: 188px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* the line stack fades out as it rises toward the top (fade starts early — low opaque stop) */
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 32%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 32%, transparent 100%);
}

/* terminal lines (faint shadow keeps them legible now that there's no panel behind) */
.term-line { white-space: pre-wrap; word-break: break-word; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.term-line + .term-line { margin-top: 2px; }
.p-user   { color: var(--primary); }
.p-sep    { color: #6b6e7b; }
.p-path   { color: var(--accent); }
.p-dollar { color: #8b8d98; margin: 0 7px 0 6px; }
.p-cmd    { color: #f3f4f6; }
.term-out      { color: #7e8597; }
.term-out--ok   { color: #2ee6a6; }
.term-out--warn { color: #febc2e; }

/* blinking block cursor — solid while a command is being typed */
.term-cursor {
  display: inline-block; width: 8px; height: 15px; margin-left: 3px;
  background: var(--primary); vertical-align: -3px; border-radius: 1px;
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
  animation: termBlink 1.05s steps(1, end) infinite;
}
.terminal.is-running .term-cursor { animation: none; opacity: 1; }
.term-line--done .term-cursor { display: none; }
@keyframes termBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- Intro entrance choreography (home + chrome on first load) ---------- */
.fade-seq { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 1s var(--rise); }
body:not(.intro-active) .fade-seq { opacity: 1; transform: none; }
body:not(.intro-active) .fade-seq[data-delay="1"] { transition-delay: 0.05s; }
body:not(.intro-active) .fade-seq[data-delay="2"] { transition-delay: 0.18s; }
body:not(.intro-active) .fade-seq[data-delay="3"] { transition-delay: 0.30s; }
body:not(.intro-active) .fade-seq[data-delay="4"] { transition-delay: 0.46s; }
body:not(.intro-active) .fade-seq[data-delay="5"] { transition-delay: 0.60s; }
body:not(.intro-active) .fade-seq[data-delay="6"] { transition-delay: 0.78s; }
/* never let the hidden (inactive) views' fade-seq children steal layout/visibility */
.view:not(.is-active) .fade-seq { opacity: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 560px; }
}
@media (max-width: 767px) {
  .orb {
    width: min(150vw, 720px); height: min(150vw, 720px);
    opacity: 0.5; transform: translate(-50%, -58%) scale(1);
  }
  .intro-active .orb { transform: translate(-50%, -50%) scale(1.12); opacity: 0.9; }
  body[data-page]:not(.intro-active) .orb { transform: translate(-50%, -58%) scale(1); opacity: 0.45; }
  .mesh { top: -20%; right: -30%; }
  .terminal-dock { display: none; }       /* the terminal is a desktop experience */
  .view { padding: 104px 24px 48px; align-items: flex-start; padding-top: 120px; overflow-y: auto; }
  .stage { overflow-y: auto; }
}
@media (max-width: 520px) {
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh, .prov-bar span, .term-cursor, .orbit-ring circle { animation: none; }
  .orb, .view, .view .view-inner > *, .logo-tile, .logo-tile img { transition: none; }
  .fade-seq { transition: none; }
  .view--capabilities .eyebrow, .view--capabilities .cap-headline, .view--capabilities .cap-card { animation: none; }
  .cap-pulse, .cap-orbit, .cap-bar { animation: none; }
  .cap-card, .cap-visual-svg { transition: none; }
  .cap-modal, .cap-modal__panel { transition: opacity 0.2s ease; }
  .cap-modal__panel { transform: none; }
  .cs-story__play { animation: none; }
  .cs-story, .cs-story__poster, .cs-logo { transition: none; }
  .eng-ring.is-active, .eng-spinner { animation: none; }
  .eng-step.is-current, .view--engage[data-state] .eng-result { animation: none; }
  .view--engage[data-state="success"] .eng-bloom { animation: none; }
  .eng-chip, .eng-btn, .eng-input, .eng-textarea, .eng-console, .eng-core, .eng-ring { transition: none; }
}