/* ════════════════════════════════════════════════════════════════
   SHEFFY ADEY — HOMEPAGE REDESIGN
   "Command Deck" — a HUD / mission-control interface rendered in the
   brand's own cyan→green circuit language. Loaded only on index.html,
   so every selector here is homepage-scoped and safe to author freely.
   Inspirations: HUD framing + status rail + dithered viewport, and
   monumental breakout typography with a numbered section index.
════════════════════════════════════════════════════════════════ */

:root {
  --grn:      #38f0a8;   /* mint green — the "A" end of the logo gradient */
  --grn-dim:  rgba(56,240,168,.10);
  --grn-bd:   rgba(56,240,168,.22);
  --aqua:     #7fffd4;
  --amber:    #ffb64d;   /* whisper of warm — the single "live/REC" accent */
  --duo-a:    #04121a;
  --grad:     linear-gradient(100deg, var(--cy) 0%, var(--aqua) 48%, var(--grn) 100%);
  --grad-soft:linear-gradient(100deg, rgba(0,212,242,.9), rgba(56,240,168,.9));
  --hud-line: rgba(0,212,242,.16);
}

/* Homepage keeps its own smooth-scroll offset for the anchored index */
#home-hero,
.sx,
#build-cta { scroll-margin-top: 84px; }

/* Shared HUD utility — 4 corner brackets drawn by masking a bordered box */
.hud { position: relative; }
.hud::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--cy-bd);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color .3s var(--ease);
  -webkit-mask:
    linear-gradient(#000,#000) top left / 16px 16px no-repeat,
    linear-gradient(#000,#000) top right / 16px 16px no-repeat,
    linear-gradient(#000,#000) bottom left / 16px 16px no-repeat,
    linear-gradient(#000,#000) bottom right / 16px 16px no-repeat;
          mask:
    linear-gradient(#000,#000) top left / 16px 16px no-repeat,
    linear-gradient(#000,#000) top right / 16px 16px no-repeat,
    linear-gradient(#000,#000) bottom left / 16px 16px no-repeat,
    linear-gradient(#000,#000) bottom right / 16px 16px no-repeat;
}
.hud:hover::after { border-color: var(--grn-bd); }

/* Monospace HUD kicker used across sections: [ 01 / LABEL ] */
.hud-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cy);
}
.hud-kicker .k-brk { color: var(--tx-3); }
.hud-kicker .k-num {
  color: var(--grn);
  font-variant-numeric: tabular-nums;
}
.hud-kicker .k-line {
  width: 40px; height: 1px;
  background: linear-gradient(90deg, var(--cy), transparent);
}

/* ════════════════════════════════════════════════════════════════
   SIDE INDEX RAIL — numbered progression (GREENADE 01/05 nod)
════════════════════════════════════════════════════════════════ */
.idx-rail {
  position: fixed;
  left: max(1.1rem, calc((100vw - 1200px) / 2 - 2.6rem));
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-left: .9rem;
}
.idx-rail::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--hud-line) 15%, var(--hud-line) 85%, transparent);
}
.idx-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .34rem 0;
  font-family: var(--f-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-3);
  transition: color .25s var(--ease);
}
.idx-item .idx-n { font-variant-numeric: tabular-nums; }
.idx-item .idx-l {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4px);
  transition: max-width .35s var(--ease), opacity .3s var(--ease), transform .35s var(--ease);
}
.idx-item::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  width: 1px; height: 0;
  background: var(--cy);
  transition: height .3s var(--ease);
}
.idx-rail:hover .idx-item .idx-l {
  max-width: 120px;
  opacity: 1;
  transform: none;
}
.idx-item:hover { color: var(--tx-2); }
.idx-item.is-active { color: var(--cy); }
.idx-item.is-active::before { height: 100%; }
.idx-item.is-active .idx-n { color: var(--grn); }
@media (max-width: 1300px) { .idx-rail { display: none; } }

/* ════════════════════════════════════════════════════════════════
   HERO — COMMAND DECK
════════════════════════════════════════════════════════════════ */
#home-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(104px, 13vh, 150px) 0 0;
  isolation: isolate;
}
.hx-bg {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 50% 55% at 72% 32%, rgba(0,212,242,.10) 0%, transparent 66%),
    radial-gradient(ellipse 45% 50% at 20% 78%, rgba(56,240,168,.07) 0%, transparent 62%),
    linear-gradient(160deg, #0a1a29 0%, #060d14 52%, #04090f 100%);
}
.hx-grid {
  position: absolute; inset: 0; z-index: -3;
  background-image:
    linear-gradient(rgba(0,212,242,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,242,.035) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 85% 70% at 62% 40%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 62% 40%, #000 25%, transparent 78%);
}
#home-hero .hero-orb { z-index: -2; }
#home-hero .hero-orb-1 { background: rgba(0,212,242,.06); }
#home-hero .hero-orb-2 { background: rgba(56,240,168,.05); }
#home-hero .noise { z-index: -1; }

/* Full-bleed HUD frame around the hero — top clears the fixed nav */
.hx-frame {
  position: absolute;
  top: 82px;
  left: clamp(14px, 2.2vw, 30px);
  right: clamp(14px, 2.2vw, 30px);
  bottom: clamp(14px, 2.2vw, 30px);
  z-index: 0;
  pointer-events: none;
}
.hx-frame::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--hud-line);
  -webkit-mask:
    linear-gradient(#000,#000) top left / 34px 34px no-repeat,
    linear-gradient(#000,#000) top right / 34px 34px no-repeat,
    linear-gradient(#000,#000) bottom left / 34px 34px no-repeat,
    linear-gradient(#000,#000) bottom right / 34px 34px no-repeat;
          mask:
    linear-gradient(#000,#000) top left / 34px 34px no-repeat,
    linear-gradient(#000,#000) top right / 34px 34px no-repeat,
    linear-gradient(#000,#000) bottom left / 34px 34px no-repeat,
    linear-gradient(#000,#000) bottom right / 34px 34px no-repeat;
}
.hx-frame-lbl {
  position: absolute;
  top: 13px;
  font-family: var(--f-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tx-3);
}
.hx-frame-lbl.tl { left: 46px; }
.hx-frame-lbl.tr { right: 46px; color: var(--cy); }

.hx-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  flex: 1;
}

/* Hero tag / command line */
.hx-tag {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--cy-dim);
  border: 1px solid var(--cy-bd);
  color: var(--cy);
  padding: .3rem .85rem .3rem .5rem;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 1.7rem;
}
.hx-tag-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--grn);
  box-shadow: 0 0 0 0 rgba(56,240,168,.5);
  animation: hxPing 2.4s ease-out infinite;
}
@keyframes hxPing {
  0%   { box-shadow: 0 0 0 0 rgba(56,240,168,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(56,240,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,240,168,0); }
}

/* Breakout headline */
.hx-hl { margin: 0 0 1.5rem; }
.hx-hl-sm {
  display: block;
  font-family: var(--f-dis);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .96;
  color: var(--tx);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
}
.hx-hl-sm.dim { color: var(--tx-2); }
.hx-hl-big {
  display: block;
  font-family: var(--f-dis);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .82;
  font-size: clamp(2.9rem, 8vw, 7.6rem);
  white-space: nowrap;
  margin-top: .06em;
  margin-left: -.02em;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
}

.hx-sub {
  font-size: 1rem;
  color: var(--tx-2);
  max-width: 46ch;
  line-height: 1.72;
  margin-bottom: 2rem;
}
.hx-actions { display: flex; gap: .85rem; flex-wrap: wrap; margin-bottom: 2.3rem; }

/* Telemetry readouts (HUD gauges) */
.hx-tele {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border: 1px solid var(--bd);
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(9,20,31,.6);
  backdrop-filter: blur(6px);
  max-width: 560px;
}
.hx-tele-cell {
  padding: .85rem 1rem 0.9rem;
  border-right: 1px solid var(--bd);
  position: relative;
}
.hx-tele-cell:last-child { border-right: none; }
.hx-tele-val {
  font-family: var(--f-dis);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tx);
  display: block;
}
.hx-tele-val em { font-style: normal; color: var(--cy); }
.hx-tele-key {
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tx-3);
  display: block;
  margin-top: .35rem;
}
.hx-tele-bar {
  height: 2px; margin-top: .6rem;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  overflow: hidden;
}
.hx-tele-bar i {
  display: block; height: 100%;
  background: var(--grad-soft);
  transform-origin: left;
  animation: hxBar 1.6s var(--ease) both;
}
@keyframes hxBar { from { transform: scaleX(0); } }

/* ── HERO VIEWPORT — dithered PCB in a HUD scope ── */
.hx-view { position: relative; z-index: 2; }
.hx-scope {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--duo-a);
  box-shadow: var(--sh-lg), 0 0 60px rgba(0,212,242,.12);
  animation: hxFloat 8s ease-in-out infinite;
}
@keyframes hxFloat { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }

/* Duotone image: grayscale base + cyan→green blended tint */
.hx-duo {
  position: absolute; inset: 0;
  background: var(--hx-img) center/cover no-repeat;
  filter: grayscale(1) contrast(1.25) brightness(.85);
}
.hx-duo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(150deg, #001a24 0%, #00a6c4 45%, var(--grn) 100%);
  mix-blend-mode: screen;
  opacity: .55;
}
.hx-duo-dark {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,9,15,.15) 0%, rgba(4,9,15,.55) 70%, rgba(4,9,15,.85) 100%);
}
/* Halftone dot + scanline processing overlay */
.hx-halftone {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(4,10,16,.55) 32%, transparent 34%);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
  opacity: .55;
}
.hx-scanlines {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  opacity: .4;
}
.hx-scanbeam {
  position: absolute; left: 0; right: 0; height: 80px;
  background: linear-gradient(180deg, transparent, rgba(56,240,168,.16), transparent);
  animation: hxScan 4.5s ease-in-out infinite;
}
@keyframes hxScan { 0%{ top: -80px; } 100%{ top: 100%; } }

/* Scope chrome: corner brackets, crosshair, HUD labels */
.hx-scope-frame {
  position: absolute; inset: 12px;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000,#000) top left / 24px 24px no-repeat,
    linear-gradient(#000,#000) top right / 24px 24px no-repeat,
    linear-gradient(#000,#000) bottom left / 24px 24px no-repeat,
    linear-gradient(#000,#000) bottom right / 24px 24px no-repeat;
          mask:
    linear-gradient(#000,#000) top left / 24px 24px no-repeat,
    linear-gradient(#000,#000) top right / 24px 24px no-repeat,
    linear-gradient(#000,#000) bottom left / 24px 24px no-repeat,
    linear-gradient(#000,#000) bottom right / 24px 24px no-repeat;
  border: 1.5px solid rgba(56,240,168,.5);
}
.hx-cross {
  position: absolute; left: 50%; top: 46%;
  width: 26px; height: 26px;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.hx-cross::before, .hx-cross::after {
  content: ""; position: absolute; background: rgba(56,240,168,.7);
}
.hx-cross::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-.5px); }
.hx-cross::after  { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-.5px); }

.hx-hud-tag {
  position: absolute;
  font-family: var(--f-mono);
  font-size: .56rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--aqua);
  background: rgba(4,10,16,.72);
  border: 1px solid var(--grn-bd);
  padding: .2rem .45rem;
  border-radius: 4px;
  backdrop-filter: blur(3px);
  z-index: 3;
}
.hx-hud-tag.tag-rec { top: 16px; left: 16px; color: var(--amber); border-color: rgba(255,182,77,.4); display: inline-flex; align-items: center; gap: .35rem; }
.hx-hud-tag.tag-rec b { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: blink 1.3s infinite; }
.hx-hud-tag.tag-id  { top: 16px; right: 16px; }
.hx-hud-tag.tag-coord { bottom: 16px; left: 16px; color: var(--tx-2); border-color: var(--bd-2); }

/* Readout chips floating on the scope */
.hx-readout {
  position: absolute;
  right: -14px;
  background: rgba(15,30,45,.92);
  border: 1px solid var(--cy-bd);
  border-radius: 10px;
  padding: .55rem .75rem;
  display: flex; align-items: center; gap: .55rem;
  box-shadow: var(--sh-md);
  backdrop-filter: blur(8px);
  z-index: 4;
}
.hx-readout.r-1 { top: 20%; animation: hxFloatA 6s ease-in-out infinite; }
.hx-readout.r-2 { bottom: 16%; right: auto; left: -16px; animation: hxFloatB 6s ease-in-out infinite; }
@keyframes hxFloatA { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } }
@keyframes hxFloatB { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(7px); } }
.hx-readout-ic {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: var(--grn-dim); border: 1px solid var(--grn-bd);
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.hx-readout-main { font-family: var(--f-dis); font-weight: 700; font-size: .84rem; color: var(--tx); line-height: 1; }
.hx-readout-sub { font-family: var(--f-mono); font-size: .56rem; color: var(--tx-2); letter-spacing: .04em; margin-top: .18rem; }

/* ── HERO STATUS RAIL (OMNIRA nod) ── */
.hx-status {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 0 clamp(1.4rem, 3vh, 2.2rem);
  margin-top: clamp(1.5rem, 4vh, 2.6rem);
}
.hx-status-l {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-2);
  flex-shrink: 0;
}
.hx-status-l b { color: var(--grn); font-weight: 500; }
.hx-status-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--grn);
  box-shadow: 0 0 8px var(--grn);
  animation: blink 2s infinite;
}
.hx-status-line {
  position: relative;
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hud-line), transparent);
  overflow: visible;
}
.hx-status-line::before {
  content: "";
  position: absolute; top: 50%; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cy);
  box-shadow: 0 0 10px var(--cy);
  transform: translateY(-50%);
  animation: hxTravel 5s linear infinite;
}
@keyframes hxTravel { 0%{ left: 0; opacity: 0; } 10%{ opacity: 1; } 90%{ opacity: 1; } 100%{ left: 100%; opacity: 0; } }
.hx-scroll {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-2);
  flex-shrink: 0;
  transition: color .25s var(--ease);
}
.hx-scroll:hover { color: var(--cy); }
.hx-scroll svg { width: 12px; height: 12px; animation: hxBob 1.8s ease-in-out infinite; }
@keyframes hxBob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(3px); } }

/* ════════════════════════════════════════════════════════════════
   TRUST MARQUEE — restyle the shared strip to cyan→green
════════════════════════════════════════════════════════════════ */
#trust .m-icon { background: var(--grn-dim); border-color: var(--grn-bd); }
#trust .m-icon svg { stroke: var(--grn) !important; }
#trust .m-sep { color: var(--grn); }

/* ════════════════════════════════════════════════════════════════
   SECTION SHELL + HEADERS
════════════════════════════════════════════════════════════════ */
.sx { position: relative; padding: clamp(84px, 11vh, 130px) 0; overflow: hidden; }
.sx-cap  { background: var(--bg); }
.sx-work { background: var(--bg-lift); }
.sx-mth  { background: var(--bg); }
.sx-why  { background: var(--bg-lift); }

/* Circuit-node divider between sections (echoes the logo trace) */
.sx-node {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: clamp(48px, 8vh, 84px);
  background: linear-gradient(180deg, var(--cy), transparent);
  z-index: 3;
}
.sx-node::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--cy);
  box-shadow: 0 0 12px rgba(0,212,242,.5);
}
.sx-work .sx-node, .sx-why .sx-node { background: linear-gradient(180deg, var(--grn), transparent); }
.sx-work .sx-node::before, .sx-why .sx-node::before { border-color: var(--grn); box-shadow: 0 0 12px rgba(56,240,168,.5); }

/* Oversized ghost index number */
.sx-ghost {
  position: absolute;
  font-family: var(--f-dis);
  font-weight: 800;
  font-size: clamp(9rem, 20vw, 20rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.035);
  pointer-events: none; user-select: none; z-index: 0;
}
.sx-cap .sx-ghost  { top: -3.5rem; right: -1rem; }
.sx-work .sx-ghost { top: -3rem; left: -1rem; -webkit-text-stroke: 1px rgba(56,240,168,.05); }
.sx-mth .sx-ghost  { top: -3.5rem; right: -1rem; }
.sx-why .sx-ghost  { top: -3rem; left: -1rem; -webkit-text-stroke: 1px rgba(56,240,168,.05); }

.sx-inner { position: relative; z-index: 1; }
.sx-head { max-width: 60ch; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.sx-head .hud-kicker { margin-bottom: 1rem; }
.sx-hl {
  font-family: var(--f-dis);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.0;
  font-size: clamp(2.3rem, 5vw, 4rem);
  color: var(--tx);
  margin-bottom: .8rem;
}
.sx-hl em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sx-sub { font-size: .98rem; color: var(--tx-2); max-width: 58ch; line-height: 1.74; }

/* ════════════════════════════════════════════════════════════════
   CAPABILITIES — HUD bento
════════════════════════════════════════════════════════════════ */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
}
.cap-card {
  position: relative;
  background: var(--surf);
  border-radius: var(--r);
  padding: 1.9rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.cap-card > * { position: relative; z-index: 1; }
.cap-card::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, rgba(0,212,242,.05), transparent 55%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.cap-card:hover { transform: translateY(-5px); background: var(--surf-2); }
.cap-card:hover::before { opacity: 1; }
.cap-card:hover.hud::after { border-color: var(--grn-bd); }

.cap-ai  { grid-column: 1 / 5;  grid-row: 1 / 3; }
.cap-iot { grid-column: 5 / 9;  grid-row: 1 / 2; }
.cap-emb { grid-column: 9 / 13; grid-row: 1 / 2; }
.cap-e2e { grid-column: 5 / 13; grid-row: 2 / 3; flex-direction: row; align-items: flex-start; gap: 2.4rem; }

.cap-idx {
  position: absolute; top: 1.4rem; right: 1.5rem;
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .12em;
  color: var(--tx-3); z-index: 2;
}
.cap-ic {
  width: 46px; height: 46px; border-radius: 11px;
  background: var(--cy-dim); border: 1px solid var(--cy-bd);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 1.15rem;
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.cap-card:hover .cap-ic { transform: translateY(-2px) scale(1.06); background: var(--grn-dim); border-color: var(--grn-bd); }
.cap-title {
  font-family: var(--f-dis); font-weight: 700; font-size: 1.2rem;
  letter-spacing: .02em; text-transform: uppercase; color: var(--tx);
  margin-bottom: .55rem;
}
.cap-desc { font-size: .875rem; color: var(--tx-2); line-height: 1.68; flex: 1; }
.cap-link {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.1rem;
  font-family: var(--f-mono); font-size: .66rem; font-weight: 600;
  color: var(--cy); letter-spacing: .06em; text-transform: uppercase;
  transition: gap .2s var(--ease), color .2s var(--ease);
}
.cap-link:hover { gap: .65rem; color: var(--grn); }
.cap-link svg { width: 10px; height: 10px; }
.cap-e2e .cap-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cap-stats { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--bd); display: flex; gap: 1.4rem; }
.cap-stat-v { font-family: var(--f-dis); font-weight: 700; font-size: 1.5rem; color: var(--cy); display: block; line-height: 1; }
.cap-stat-k { font-family: var(--f-mono); font-size: .58rem; color: var(--tx-3); letter-spacing: .07em; text-transform: uppercase; margin-top: .2rem; display: block; }

.cap-badges { display: flex; flex-direction: column; gap: .65rem; flex-shrink: 0; min-width: 200px; margin-top: .3rem; }
.cap-badge { background: var(--bg-lift); border: 1px solid var(--bd); border-radius: var(--r-sm); padding: .7rem .9rem; display: flex; align-items: center; gap: .7rem; }
.cap-badge-v { font-family: var(--f-dis); font-weight: 700; font-size: 1.25rem; color: var(--grn); white-space: nowrap; }
.cap-badge-l { font-family: var(--f-mono); font-size: .58rem; color: var(--tx-3); letter-spacing: .05em; text-transform: uppercase; line-height: 1.3; }

/* ════════════════════════════════════════════════════════════════
   WORK — featured venture + HUD case dossiers
════════════════════════════════════════════════════════════════ */
.wk-feature {
  position: relative;
  background: linear-gradient(135deg, var(--surf-2), var(--surf));
  border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.wk-feature::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 88% 20%, rgba(56,240,168,.12), transparent 45%);
  pointer-events: none;
}
.wk-feature > * { position: relative; z-index: 1; }
.wk-feat-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.wk-tag {
  font-family: var(--f-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grn);
  background: var(--grn-dim); border: 1px solid var(--grn-bd);
  padding: .24rem .7rem; border-radius: var(--r-pill); white-space: nowrap;
}
.wk-feat-title { font-family: var(--f-dis); font-weight: 800; font-size: clamp(1.8rem,3.5vw,2.6rem); text-transform: uppercase; letter-spacing: .01em; color: var(--tx); line-height: 1; margin-bottom: .7rem; }
.wk-feat-desc { font-size: .95rem; color: var(--tx-2); line-height: 1.7; max-width: 60ch; margin-bottom: 1.2rem; }
.wk-chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.wk-chip { font-family: var(--f-mono); font-size: .62rem; color: var(--tx-2); background: rgba(255,255,255,.04); border: 1px solid var(--bd); padding: .18rem .55rem; border-radius: 5px; }
.wk-feat-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.2rem; border-top: 1px solid var(--bd); }
.wk-feat-note { font-family: var(--f-mono); font-size: .68rem; color: var(--tx-3); letter-spacing: .03em; max-width: 52ch; line-height: 1.6; }

.wk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.wk-card {
  position: relative;
  background: var(--surf);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease);
}
.wk-card > * { position: relative; z-index: 1; }
.wk-card:hover { transform: translateY(-6px); }
.wk-card:hover.hud::after { border-color: var(--grn-bd); }
.wk-card-ghost {
  position: absolute; right: .5rem; bottom: -1.2rem; z-index: 0;
  font-family: var(--f-dis); font-weight: 800; font-size: 5.5rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.05);
  pointer-events: none; user-select: none;
}
.wk-card-top { padding: 1.5rem 1.5rem .8rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.wk-metric { text-align: right; flex-shrink: 0; }
.wk-metric-v { font-family: var(--f-dis); font-weight: 800; font-size: 1.9rem; color: var(--tx); line-height: 1; display: block; }
.wk-metric-u { font-family: var(--f-mono); font-size: .58rem; color: var(--tx-3); letter-spacing: .06em; text-transform: uppercase; display: block; margin-top: .12rem; }
.wk-card-body { padding: .3rem 1.5rem 1.4rem; flex: 1; }
.wk-card-title { font-family: var(--f-dis); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; color: var(--tx); margin-bottom: .5rem; }
.wk-card-desc { font-size: .84rem; color: var(--tx-2); line-height: 1.66; margin-bottom: 1rem; }
.wk-card-foot { border-top: 1px solid var(--bd); padding: .95rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: auto; }
.wk-outcome { font-family: var(--f-mono); font-size: .66rem; color: var(--tx-2); letter-spacing: .03em; line-height: 1.5; }
.wk-outcome strong { color: var(--grn); }
.wk-arrow {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bd);
  display: flex; align-items: center; justify-content: center; color: var(--tx-3);
  flex-shrink: 0; transition: all .3s var(--ease);
}
.wk-card:hover .wk-arrow { background: var(--grn); border-color: var(--grn); color: #04121a; }
.wk-more { text-align: center; margin-top: 2.4rem; }

/* ════════════════════════════════════════════════════════════════
   METHOD — ADEPT console
════════════════════════════════════════════════════════════════ */
.mth-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.mth-steps { display: flex; flex-direction: column; margin-top: 1.8rem; }
.mth-step { display: flex; gap: 1.35rem; align-items: flex-start; padding: 1.15rem 0; border-bottom: 1px solid var(--bd); position: relative; }
.mth-step:last-child { border-bottom: none; }
.mth-num-col { position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.mth-num {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--cy-dim); border: 1px solid var(--cy-bd);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-dis); font-weight: 800; font-size: 1rem; color: var(--cy);
  transition: all .3s var(--ease);
}
.mth-step:hover .mth-num { background: var(--grad); color: #04121a; border-color: transparent; box-shadow: 0 4px 18px rgba(56,240,168,.28); }
.mth-connector { flex: 1; width: 1px; background: linear-gradient(to bottom, var(--cy-bd), transparent); margin-top: 6px; min-height: 1rem; }
.mth-step:last-child .mth-connector { display: none; }
.mth-name { font-family: var(--f-dis); font-weight: 700; font-size: 1.1rem; letter-spacing: .03em; text-transform: uppercase; color: var(--tx); margin-bottom: .3rem; }
.mth-name span { color: var(--grn); }
.mth-desc { font-size: .84rem; color: var(--tx-2); line-height: 1.65; }

.mth-panel { position: sticky; top: 5.5rem; background: var(--surf); border-radius: var(--r); padding: 1.75rem; overflow: hidden; }
.mth-panel-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.mth-panel-title { font-family: var(--f-mono); font-size: .68rem; color: var(--tx-2); letter-spacing: .1em; text-transform: uppercase; }
.mth-panel-live { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-mono); font-size: .6rem; color: var(--grn); letter-spacing: .08em; }
.mth-panel-live b { width: 5px; height: 5px; border-radius: 50%; background: var(--grn); animation: blink 1.5s infinite; }
.mth-row { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; margin-bottom: .55rem; background: var(--bg); border-radius: 9px; border: 1px solid transparent; transition: all .3s var(--ease); }
.mth-row:hover { border-color: var(--grn-bd); background: rgba(56,240,168,.04); }
.mth-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mth-label { font-family: var(--f-dis); font-weight: 700; font-size: .9rem; letter-spacing: .03em; text-transform: uppercase; color: var(--tx); flex: 1; }
.mth-track { flex: 1.6; height: 4px; background: rgba(255,255,255,.06); border-radius: var(--r-pill); overflow: hidden; }
.mth-fill { height: 100%; border-radius: var(--r-pill); background: var(--grad-soft); }
.mth-wk { font-family: var(--f-mono); font-size: .6rem; color: var(--tx-3); white-space: nowrap; letter-spacing: .04em; }
.mth-note { margin-top: 1.5rem; padding: .9rem 1rem; background: rgba(56,240,168,.05); border: 1px solid var(--grn-bd); border-radius: 9px; font-size: .78rem; color: var(--tx-2); line-height: 1.6; }
.mth-note strong { font-family: var(--f-mono); font-size: .64rem; color: var(--grn); letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: .35rem; }
.mth-ctas { margin-top: 1.4rem; display: flex; gap: .8rem; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════
   WHY — points + compare console
════════════════════════════════════════════════════════════════ */
.wy-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.wy-points { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.wy-pt { display: flex; gap: 1rem; align-items: flex-start; }
.wy-chk { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; margin-top: .1rem; background: var(--grad); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(56,240,168,.22); }
.wy-chk svg { width: 12px; height: 12px; stroke: #04121a; stroke-width: 3; }
.wy-pt-title { font-family: var(--f-dis); font-weight: 700; font-size: 1rem; letter-spacing: .03em; text-transform: uppercase; color: var(--tx); margin-bottom: .28rem; }
.wy-pt-desc { font-size: .84rem; color: var(--tx-2); line-height: 1.65; }

.wy-panel { background: var(--surf); border-radius: var(--r); overflow: hidden; }
.wy-panel-hd { padding: 1rem 1.35rem; border-bottom: 1px solid var(--bd); background: rgba(56,240,168,.05); display: flex; align-items: center; gap: .55rem; }
.wy-panel-hd b { width: 6px; height: 6px; border-radius: 50%; background: var(--grn); }
.wy-panel-lbl { font-family: var(--f-mono); font-size: .66rem; color: var(--tx-2); letter-spacing: .1em; text-transform: uppercase; }
.wy-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--bd); }
.wy-row:last-child { border-bottom: none; }
.wy-cc { padding: .95rem 1.15rem; font-size: .8rem; line-height: 1.55; }
.wy-bad { color: #c98a8a; border-right: 1px solid var(--bd); }
.wy-good { color: var(--tx); background: rgba(56,240,168,.03); }
.wy-cc-lbl { font-family: var(--f-mono); font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .3rem; display: flex; align-items: center; gap: .35rem; }
.wy-bad .wy-cc-lbl { color: #c98a8a; opacity: .7; }
.wy-good .wy-cc-lbl { color: var(--grn); }

/* ════════════════════════════════════════════════════════════════
   BUILD CTA — command prompt
════════════════════════════════════════════════════════════════ */
#build-cta {
  position: relative;
  background: linear-gradient(150deg, #051019 0%, #071f2a 52%, #05131b 100%);
  overflow: hidden;
  text-align: center;
  padding: clamp(90px, 13vh, 140px) 0;
  isolation: isolate;
}
.bc-radial { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 60% 60% at 50% 45%, rgba(56,240,168,.08), transparent 62%); }
.bc-grid { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(0,212,242,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,212,242,.03) 1px, transparent 1px); background-size: 54px 54px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 75%); }
.bc-ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-52%); z-index: -1; font-family: var(--f-dis); font-weight: 800; font-size: clamp(9rem, 24vw, 22rem); line-height: .9; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(56,240,168,.05); pointer-events: none; user-select: none; white-space: nowrap; }
.bc-inner { position: relative; z-index: 1; }
.bc-prompt {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grn); background: var(--grn-dim); border: 1px solid var(--grn-bd);
  padding: .3rem .8rem; border-radius: var(--r-pill); margin-bottom: 1.4rem;
}
.bc-prompt b { color: var(--tx-3); }
.bc-cursor { width: 8px; height: 15px; background: var(--grn); display: inline-block; animation: blink 1.1s step-end infinite; }
.bc-hl {
  font-family: var(--f-dis); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 5rem); line-height: .96; color: var(--tx);
  margin-bottom: 1.1rem; letter-spacing: .01em;
}
.bc-hl em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.bc-sub { font-size: 1rem; color: var(--tx-2); max-width: 50ch; margin: 0 auto 2.2rem; line-height: 1.72; }
.bc-actions { display: flex; gap: .85rem; justify-content: center; flex-wrap: wrap; }
.bc-note { margin-top: 1.7rem; font-family: var(--f-mono); font-size: .64rem; color: var(--tx-3); letter-spacing: .04em; }

/* Green-accent button variants for the redesign */
.btn-grn { background: var(--grad); color: #04121a; font-weight: 800; box-shadow: 0 4px 24px rgba(56,240,168,.26); }
.btn-grn:hover { transform: translateY(-2px); box-shadow: 0 8px 34px rgba(56,240,168,.36); }
.btn-grn::after { background: rgba(255,255,255,.14); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hx-wrap { grid-template-columns: 1fr; gap: 3rem; }
  .hx-view { max-width: 460px; margin-inline: auto; width: 100%; }
  .cap-grid { grid-template-columns: repeat(6, 1fr); }
  .cap-ai  { grid-column: 1 / 7; grid-row: 1 / 2; }
  .cap-iot { grid-column: 1 / 4; grid-row: 2 / 3; }
  .cap-emb { grid-column: 4 / 7; grid-row: 2 / 3; }
  .cap-e2e { grid-column: 1 / 7; grid-row: 3 / 4; flex-direction: column; gap: 1.5rem; }
  .cap-badges { display: none; }
  .mth-grid, .wy-grid { grid-template-columns: 1fr; gap: 3rem; }
  .mth-panel { position: static; }
}
@media (max-width: 860px) {
  .wk-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  #home-hero { min-height: auto; padding: 104px 0 0; }
  .hx-frame { inset: 10px; }
  .hx-frame-lbl { display: none; }
  .hx-tag { max-width: 100%; white-space: normal; line-height: 1.4; }
  .hx-actions { flex-direction: column; align-items: stretch; }
  .hx-actions .btn { width: 100%; justify-content: center; }
  .hx-tele { grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .hx-tele-cell:nth-child(2) { border-right: none; }
  .hx-tele-cell:nth-child(1), .hx-tele-cell:nth-child(2) { border-bottom: 1px solid var(--bd); }
  .hx-readout { display: none; }
  .hx-status { flex-wrap: wrap; gap: .8rem; }
  .hx-status-line { order: 3; flex-basis: 100%; }
  .cap-grid { grid-template-columns: 1fr; }
  .cap-ai, .cap-iot, .cap-emb, .cap-e2e { grid-column: auto; grid-row: auto; }
  .wk-grid { grid-template-columns: 1fr; }
  .wy-row { grid-template-columns: 1fr; }
  .wy-bad { border-right: none; border-bottom: 1px solid var(--bd); }
  .sx-ghost, .bc-ghost { display: none; }
  .mth-track { flex-basis: 100%; order: 4; }
  .mth-row { flex-wrap: wrap; }
}
@media (max-width: 460px) {
  .hx-hl-big { font-size: clamp(3rem, 16vw, 4.4rem); }
  .hx-tele { grid-template-columns: 1fr; }
  .hx-tele-cell { border-right: none !important; border-bottom: 1px solid var(--bd); }
  .hx-tele-cell:last-child { border-bottom: none; }
  .wrap { width: min(100% - 1.5rem, 1200px); }
}

/* ════════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hx-scope, .hx-readout, .hx-scanbeam, .hx-tag-dot,
  .hx-status-line::before, .hx-scroll svg, .hx-tele-bar i,
  .bc-cursor, .hx-status-dot { animation: none !important; }
  .hx-scanbeam { display: none; }
}