.ahs-root {
  --ahs-bg: hsl(260 30% 12%);
  --ahs-bg-2: hsl(260 32% 9%);
  --ahs-card: hsl(260 28% 17% / 0.55);
  --ahs-card-line: hsl(0 0% 100% / 0.10);
  --ahs-accent: hsl(330 80% 60%);
  --ahs-accent-soft: hsl(330 80% 60% / 0.16);
  --ahs-pos: hsl(142 55% 46%);
  --ahs-text: #fff;
  --ahs-dim: hsl(260 14% 78%);
  --ahs-mute: hsl(260 10% 56%);

  --ahs-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ahs-ease-in: cubic-bezier(0.55, 0, 0.85, 0.45);
  --ahs-ease-back: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ahs-loop: 8000ms;

  position: relative;
  width: 100%;
  min-height: clamp(360px, 42vw, 520px);
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 80% 0%, hsl(260 30% 18%) 0%, var(--ahs-bg) 45%, var(--ahs-bg-2) 100%);
  font-family: 'Inter', system-ui, sans-serif;
  isolation: isolate;
  contain: layout paint;
}

.ahs-bg {
  position: absolute;
  inset: -6% -6% -6% -6%;
  z-index: 1;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 45%, #000 35%, transparent 78%);
          mask-image: radial-gradient(80% 80% at 50% 45%, #000 35%, transparent 78%);
}
.ahs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
  width: 100%;
  height: 100%;
  padding: 6%;
  box-sizing: border-box;
  animation: ahs-drift 22s linear infinite alternate;
  will-change: transform;
}
.ahs-thumb {
  position: relative;
  border-radius: 7px;
  background: hsl(260 24% 22% / 0.55);
  border: 1px solid hsl(0 0% 100% / 0.05);
  padding: 8px;
  min-height: 46px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}
.ahs-thumb__bar { height: 5px; width: 60%; border-radius: 3px; background: hsl(0 0% 100% / 0.22); }
.ahs-thumb__row { height: 4px; border-radius: 3px; background: hsl(0 0% 100% / 0.10); }
.ahs-thumb__row:nth-child(3) { width: 85%; }
.ahs-thumb__row:nth-child(4) { width: 70%; }
.ahs-thumb__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(70% 70% at 50% 50%, var(--ahs-accent-soft), transparent 70%);
  box-shadow: inset 0 0 0 1px var(--ahs-accent);
}
.ahs-thumb--hot .ahs-thumb__glow {
  animation: ahs-ignite var(--ahs-loop) var(--ahs-ease-out) infinite;
  animation-delay: var(--d, 0s);
  will-change: opacity, transform;
}

.ahs-bg-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ahs-mute);
  font-family: 'Space Grotesk', monospace;
}

.ahs-flows {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  pointer-events: none;
}
.ahs-flight {
  grid-area: 1 / 1;
  opacity: 0;
  border-radius: 6px;
  background: hsl(0 0% 100% / 0.9);
  box-shadow: 0 8px 22px hsl(330 80% 50% / 0.35);
  animation: ahs-flight var(--ahs-loop) var(--ahs-ease-in) infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}
.ahs-flight--btn { width: 46px; height: 16px; border-radius: 9px; background: var(--ahs-accent); }
.ahs-flight--bar { width: 54px; height: 8px; }
.ahs-flight--block { width: 34px; height: 26px; border-radius: 5px; }

.ahs-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 16px);
  animation: ahs-dissolve var(--ahs-loop) var(--ahs-ease-out) infinite;
}
.ahs-card {
  position: relative;
  width: min(78%, 340px);
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: var(--ahs-card);
  border: 1px solid var(--ahs-card-line);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -20px hsl(260 60% 4% / 0.7);
  animation: ahs-float 6s var(--ahs-ease-out) infinite alternate;
  will-change: transform;
}
.ahs-card__glow {
  position: absolute;
  z-index: -1;
  inset: 10% -14% -22% -14%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, hsl(330 80% 55% / 0.4), transparent 70%);
  filter: blur(28px);
  opacity: 0.5;
  animation: ahs-breathe 5s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
.ahs-card__head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ahs-dot { position: relative; width: 9px; height: 9px; }
.ahs-dot__core { position: absolute; inset: 0; border-radius: 50%; background: var(--ahs-pos); }
.ahs-dot__ping {
  position: absolute; inset: 0; border-radius: 50%; background: var(--ahs-pos);
  animation: ahs-ping 1.8s var(--ahs-ease-out) infinite;
  will-change: transform, opacity;
}
.ahs-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ahs-accent); font-family: 'Outfit', sans-serif;
}
.ahs-metric { display: flex; flex-direction: column; gap: 2px; }
.ahs-metric__num {
  font-family: 'Space Grotesk', monospace;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 700; line-height: 1; color: var(--ahs-text);
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.ahs-metric__label { font-size: 12px; color: var(--ahs-mute); letter-spacing: 0.02em; }

.ahs-spark { position: relative; height: 64px; margin: 14px 0 4px; overflow: hidden; container-type: inline-size; }
.ahs-spark svg { display: block; width: 100%; height: 100%; }
.ahs-spark__draw {
  clip-path: inset(0 0 0 0);
  animation: ahs-reveal var(--ahs-loop) var(--ahs-ease-out) infinite;
}
.ahs-spark__line { fill: none; stroke: var(--ahs-pos); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ahs-spark__edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 14px;
  background: linear-gradient(90deg, transparent, var(--ahs-accent));
  opacity: 0;
  transform: translateX(-14px);
  animation: ahs-edge var(--ahs-loop) var(--ahs-ease-out) infinite;
  will-change: transform, opacity;
}
.ahs-card__foot {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--ahs-dim); font-family: 'Space Grotesk', monospace;
}

.ahs-chip {
  position: absolute;
  z-index: 4;
  padding: 8px 12px;
  border-radius: 11px;
  background: hsl(260 28% 15% / 0.82);
  border: 1px solid var(--ahs-card-line);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600; color: var(--ahs-text);
  white-space: nowrap;
  box-shadow: 0 14px 30px -14px hsl(260 60% 4% / 0.8);
  animation: ahs-chip-in var(--ahs-loop) var(--ahs-ease-back) infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}
.ahs-chip b { color: var(--ahs-pos); font-weight: 700; }
.ahs-chip i { color: var(--ahs-accent); font-style: normal; }
.ahs-chip--1 { top: 12%; left: 4%; }
.ahs-chip--2 { top: 24%; right: 3%; }
.ahs-chip--3 { bottom: 26%; left: 2%; }
.ahs-chip--4 { bottom: 13%; right: 5%; }

/* Cycling frame — Kanban board + Catalyst layouts */
.ahs-frame {
  position: relative;
  width: min(72%, 300px);
  height: clamp(96px, 16vw, 124px);
  border-radius: 14px;
  background: hsl(260 28% 14% / 0.78);
  border: 1px solid var(--ahs-card-line);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 18px 36px -16px hsl(260 60% 4% / 0.8);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ahs-frame__tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 22px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--ahs-card-line);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ahs-text);
  font-family: 'Outfit', sans-serif;
}
.ahs-frame__tab {
  display: grid;
  place-items: center;
  white-space: nowrap;
  padding: 0 4px;
  opacity: 0.5;
  animation: ahs-tab-glow var(--ahs-loop) var(--ahs-ease-out) infinite;
  will-change: opacity;
}
.ahs-frame__tab--1 { animation-delay: 0s; }
.ahs-frame__tab--2 { animation-delay: -6s; }
.ahs-frame__tab--3 { animation-delay: -4s; }
.ahs-frame__tab--4 { animation-delay: -2s; }
.ahs-frame__tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 25%;
  height: 2px;
  background: var(--ahs-accent);
  animation: ahs-tab-slide var(--ahs-loop) var(--ahs-ease-out) infinite;
  will-change: transform;
}
.ahs-frame__body { position: relative; flex: 1; overflow: hidden; }
.ahs-frame__screen {
  position: absolute;
  inset: 8px 10px;
  opacity: 0;
  animation: ahs-screen-fade var(--ahs-loop) ease-in-out infinite;
  will-change: opacity;
}
.ahs-frame__screen--1 { animation-delay: 0s; }
.ahs-frame__screen--2 { animation-delay: -6s; }
.ahs-frame__screen--3 { animation-delay: -4s; }
.ahs-frame__screen--4 { animation-delay: -2s; }

/* Kanban (real: tinted hex+20 bg + hex border) */
.ahs-screen-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; height: 100%; }
.ahs-screen-kanban__lane { display: flex; flex-direction: column; gap: 3px; }
.ahs-screen-kanban__lane-head {
  height: 11px; border-radius: 3px;
  background: hsl(0 0% 100% / 0.1); border: 1px solid hsl(0 0% 100% / 0.25);
}
.ahs-screen-kanban__lane--a .ahs-screen-kanban__lane-head {
  background: var(--ahs-accent-soft); border-color: var(--ahs-accent);
}
.ahs-screen-kanban__lane--c .ahs-screen-kanban__lane-head {
  background: hsl(142 55% 46% / 0.16); border-color: var(--ahs-pos);
}
.ahs-screen-kanban__card {
  height: 8px; border-radius: 3px;
  background: hsl(0 0% 100% / 0.08); border: 1px solid hsl(0 0% 100% / 0.1);
}

/* Revenue (two overlapping AreaCharts) */
.ahs-screen-rev { display: flex; flex-direction: column; gap: 4px; height: 100%; }
.ahs-screen-rev__num {
  font-family: 'Space Grotesk', monospace; font-weight: 700;
  font-size: 14px; line-height: 1; color: var(--ahs-pos);
  font-variant-numeric: tabular-nums;
}
.ahs-screen-rev__chart { flex: 1; min-height: 0; }
.ahs-screen-rev__chart svg { display: block; width: 100%; height: 100%; }

/* Insights (action-item rows: icon + 2 lines + badge) */
.ahs-screen-ins { display: flex; flex-direction: column; gap: 4px; height: 100%; justify-content: center; }
.ahs-screen-ins__row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 4px; border-radius: 3px;
  border: 1px solid hsl(0 0% 100% / 0.1); background: hsl(0 0% 100% / 0.02);
}
.ahs-screen-ins__icon {
  width: 11px; height: 11px; border-radius: 2px;
  background: hsl(0 0% 100% / 0.2); flex-shrink: 0;
}
.ahs-screen-ins__row:nth-child(1) .ahs-screen-ins__icon {
  background: var(--ahs-accent-soft); box-shadow: inset 0 0 0 1px var(--ahs-accent);
}
.ahs-screen-ins__text { flex: 1; display: flex; flex-direction: column; gap: 1.5px; min-width: 0; }
.ahs-screen-ins__title { height: 3px; border-radius: 2px; background: hsl(0 0% 100% / 0.4); }
.ahs-screen-ins__desc { height: 2px; border-radius: 1px; width: 65%; background: hsl(0 0% 100% / 0.18); }
.ahs-screen-ins__badge {
  width: 18px; height: 7px; border-radius: 4px;
  border: 1px solid hsl(0 0% 100% / 0.35); flex-shrink: 0;
}

/* Delivery (2x3 grid of stat cards; real: cols-2 md:3 lg:6) */
.ahs-screen-del {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr;
  gap: 4px; height: 100%;
}
.ahs-screen-del__stat {
  border-radius: 3px;
  border: 1px solid hsl(0 0% 100% / 0.1); background: hsl(0 0% 100% / 0.03);
  padding: 3px 4px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ahs-screen-del__stat-label { height: 2px; border-radius: 1px; background: hsl(0 0% 100% / 0.3); width: 65%; }
.ahs-screen-del__stat-num { height: 5px; border-radius: 2px; background: hsl(0 0% 100% / 0.55); width: 50%; }
.ahs-screen-del__stat:nth-child(2) .ahs-screen-del__stat-num { background: var(--ahs-pos); width: 65%; }
.ahs-screen-del__stat:nth-child(4) .ahs-screen-del__stat-num { background: var(--ahs-accent); width: 40%; }
.ahs-screen-del__stat:nth-child(5) .ahs-screen-del__stat-num { width: 55%; }
.ahs-screen-del__stat:nth-child(6) .ahs-screen-del__stat-num { background: var(--ahs-pos); width: 35%; }

@keyframes ahs-drift {
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
  100% { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}
@keyframes ahs-ignite {
  0%, 6%   { opacity: 0; transform: scale(0.96); }
  12%      { opacity: 1; transform: scale(1); }
  24%      { opacity: 0.5; }
  34%      { opacity: 0; transform: scale(1.02); }
  100%     { opacity: 0; }
}
@keyframes ahs-flight {
  0%, 7%   { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.7); }
  16%      { opacity: 1; }
  40%      { opacity: 1; transform: translate(calc(var(--fx) * 0.12), calc(var(--fy) * 0.12)) scale(1); }
  48%      { opacity: 0; transform: translate(0, 0) scale(0.4); }
  100%     { opacity: 0; transform: translate(0, 0) scale(0.4); }
}
@keyframes ahs-dissolve {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ahs-float {
  0%   { transform: translateY(3px); }
  100% { transform: translateY(-3px); }
}
@keyframes ahs-breathe {
  0%   { opacity: 0.4; transform: scale(0.96); }
  100% { opacity: 0.62; transform: scale(1.05); }
}
@keyframes ahs-ping {
  0%   { opacity: 0.7; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}
@keyframes ahs-reveal {
  0%, 8% { clip-path: inset(0 100% 0 0); }
  72%    { clip-path: inset(0 0 0 0); }
  92%    { clip-path: inset(0 0 0 0); }
  100%   { clip-path: inset(0 100% 0 0); }
}
@keyframes ahs-edge {
  0%, 8% { opacity: 0; transform: translateX(-14px); }
  12%    { opacity: 1; }
  72%    { opacity: 1; transform: translateX(100cqw); }
  76%    { opacity: 0; transform: translateX(100cqw); }
  100%   { opacity: 0; transform: translateX(-14px); }
}
@keyframes ahs-chip-in {
  0%, 14% { opacity: 0; transform: translateY(10px) scale(0.94); }
  30%     { opacity: 1; transform: translateY(0) scale(1); }
  88%     { opacity: 1; transform: translateY(0) scale(1); }
  100%    { opacity: 0; transform: translateY(-5px) scale(0.99); }
}
@keyframes ahs-screen-fade {
  0%, 22%  { opacity: 1; }
  26%, 96% { opacity: 0; }
  100%     { opacity: 1; }
}
@keyframes ahs-tab-glow {
  0%, 22%  { opacity: 1; }
  26%, 96% { opacity: 0.5; }
  100%     { opacity: 1; }
}
@keyframes ahs-tab-slide {
  0%, 22%   { transform: translateX(0%); }
  26%, 47%  { transform: translateX(100%); }
  51%, 72%  { transform: translateX(200%); }
  76%, 97%  { transform: translateX(300%); }
  100%      { transform: translateX(0%); }
}

@media (max-width: 640px) {
  .ahs-grid { grid-template-columns: repeat(4, 1fr); }
  .ahs-card { width: min(92%, 320px); }
  .ahs-frame { width: min(88%, 280px); height: 88px; }
  .ahs-frame__tabs { height: 18px; font-size: 8px; }
  .ahs-screen-rev__num { font-size: 14px; }
  .ahs-chip--1 { top: 6%; left: 2%; }
  .ahs-chip--4 { top: 60%; right: 2%; bottom: auto; }
  .ahs-chip--2, .ahs-chip--3 { display: none; }
  .ahs-flight { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ahs-root * { animation: none !important; }
  .ahs-flight { display: none; }
}
.ahs-root.ahs--reduced * { animation: none !important; }
.ahs-root.ahs--reduced .ahs-flight { display: none; }