/**
 * About hero — Agency Control Center
 * Glassmorphism dashboard visual (CSS motion + light JS parallax)
 */

html:is(.light, .dark) .gw-ab-cc {
  --ab-cc-blue: var(--brand-fill, #13009a);
  --ab-cc-chrome: var(--color-chrome-1, #000085);
  --ab-cc-green: var(--color-button-primary-bg, #137f15);
  --ab-cc-indigo: color-mix(in srgb, var(--ab-cc-blue) 70%, #6366f1);
  --ab-cc-surface: color-mix(in srgb, var(--color-surface-raised, #fff) 78%, transparent);
  --ab-cc-ink: var(--color-text-heading, #0f172a);
  --ab-cc-muted: color-mix(in srgb, var(--color-text-body, #334155) 72%, transparent);
  --ab-cc-border: color-mix(in srgb, var(--ab-cc-blue) 14%, transparent);
  --ab-cc-glow-blue: color-mix(in srgb, var(--ab-cc-blue) 28%, transparent);
  --ab-cc-glow-green: color-mix(in srgb, var(--ab-cc-green) 26%, transparent);
  position: relative;
  width: 100%;
  min-height: 22rem;
  isolation: isolate;
}

html.dark .gw-ab-cc {
  --ab-cc-surface: color-mix(in srgb, var(--color-surface-raised, #12141c) 72%, transparent);
  --ab-cc-border: color-mix(in srgb, #93c5fd 16%, transparent);
}

html:is(.light, .dark) .gw-ab-cc__scene {
  position: relative;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  min-height: clamp(22rem, 58vw, 30rem);
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Ambient glows + grid */
html:is(.light, .dark) .gw-ab-cc__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
  animation: gw-ab-cc-glow 10s ease-in-out infinite;
}

html:is(.light, .dark) .gw-ab-cc__glow--a {
  width: 14rem;
  height: 14rem;
  top: 8%;
  right: 4%;
  background: var(--ab-cc-glow-blue);
  opacity: 0.7;
}

html:is(.light, .dark) .gw-ab-cc__glow--b {
  width: 11rem;
  height: 11rem;
  bottom: 12%;
  left: 0;
  background: var(--ab-cc-glow-green);
  opacity: 0.55;
  animation-delay: -4s;
}

html:is(.light, .dark) .gw-ab-cc__glow--c {
  width: 9rem;
  height: 9rem;
  top: 42%;
  left: 38%;
  background: color-mix(in srgb, var(--ab-cc-indigo) 40%, transparent);
  opacity: 0.4;
  animation-delay: -7s;
}

html:is(.light, .dark) .gw-ab-cc__grid {
  position: absolute;
  inset: 8% 4% 10%;
  z-index: 0;
  border-radius: 1.5rem;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ab-cc-blue) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ab-cc-blue) 6%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 35%, transparent 75%);
  opacity: 0.55;
  pointer-events: none;
}

/* Live corner metrics */
html:is(.light, .dark) .gw-ab-cc__metric {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.85rem;
  background: var(--ab-cc-surface);
  border: 1px solid var(--ab-cc-border);
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--ab-cc-blue) 10%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 35%, transparent) inset;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  animation: gw-ab-cc-float 7.5s ease-in-out infinite;
  will-change: transform;
}

html:is(.light, .dark) .gw-ab-cc__metric strong {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ab-cc-ink);
}

html:is(.light, .dark) .gw-ab-cc__metric span:not(.gw-ab-cc__metric-dot) {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ab-cc-muted);
  margin-top: 0.1rem;
}

html:is(.light, .dark) .gw-ab-cc__metric-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ab-cc-chrome);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-cc-chrome) 22%, transparent);
  animation: gw-ab-cc-pulse 2s ease-in-out infinite;
}

html:is(.light, .dark) .gw-ab-cc__metric-dot--green {
  background: var(--ab-cc-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-cc-green) 22%, transparent);
}

html:is(.light, .dark) .gw-ab-cc__metric--tl {
  top: 0;
  left: 0;
  animation-delay: 0s;
}

html:is(.light, .dark) .gw-ab-cc__metric--tr {
  top: 0;
  right: 0;
  animation-delay: -1.8s;
}

html:is(.light, .dark) .gw-ab-cc__metric--bl {
  bottom: 0;
  left: 0;
  animation-delay: -3.2s;
}

html:is(.light, .dark) .gw-ab-cc__metric--br {
  bottom: 0;
  right: 0;
  animation-delay: -4.6s;
}

/* Floating capability chips */
html:is(.light, .dark) .gw-ab-cc__chip {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem 0.4rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ab-cc-ink);
  background: var(--ab-cc-surface);
  border: 1px solid var(--ab-cc-border);
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--ab-cc-blue) 12%, transparent),
    0 0 20px color-mix(in srgb, var(--ab-cc-blue) 8%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: gw-ab-cc-float 8s ease-in-out infinite;
  cursor: default;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}

html:is(.light, .dark) .gw-ab-cc__chip:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: color-mix(in srgb, var(--ab-cc-green) 35%, transparent);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--ab-cc-green) 18%, transparent),
    0 0 28px color-mix(in srgb, var(--ab-cc-blue) 14%, transparent);
}

html:is(.light, .dark) .gw-ab-cc__chip-icon {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--ab-cc-blue), var(--ab-cc-chrome));
  box-shadow: 0 0 12px color-mix(in srgb, var(--ab-cc-blue) 40%, transparent);
}

html:is(.light, .dark) .gw-ab-cc__chip-icon svg {
  width: 0.85rem;
  height: 0.85rem;
}

html:is(.light, .dark) .gw-ab-cc__chip--web {
  top: 14%;
  left: -2%;
  animation-delay: -0.5s;
}

html:is(.light, .dark) .gw-ab-cc__chip--ai {
  top: 28%;
  right: -4%;
  animation-delay: -2s;
}

html:is(.light, .dark) .gw-ab-cc__chip--ai .gw-ab-cc__chip-icon {
  background: linear-gradient(135deg, var(--ab-cc-indigo), var(--ab-cc-blue));
}

html:is(.light, .dark) .gw-ab-cc__chip--seo {
  top: 52%;
  left: -6%;
  animation-delay: -3.5s;
}

html:is(.light, .dark) .gw-ab-cc__chip--seo .gw-ab-cc__chip-icon {
  background: linear-gradient(135deg, var(--ab-cc-green), color-mix(in srgb, var(--ab-cc-green) 60%, #0ea5e9));
}

html:is(.light, .dark) .gw-ab-cc__chip--ent {
  bottom: 22%;
  right: -2%;
  animation-delay: -5s;
}

html:is(.light, .dark) .gw-ab-cc__chip--auto {
  bottom: 38%;
  left: 6%;
  animation-delay: -1.2s;
}

html:is(.light, .dark) .gw-ab-cc__chip--auto .gw-ab-cc__chip-icon {
  background: linear-gradient(135deg, #0ea5e9, var(--ab-cc-blue));
}

html:is(.light, .dark) .gw-ab-cc__chip--mkt {
  top: 8%;
  right: 18%;
  animation-delay: -6.2s;
}

html:is(.light, .dark) .gw-ab-cc__chip--mkt .gw-ab-cc__chip-icon {
  background: linear-gradient(135deg, var(--ab-cc-green), var(--ab-cc-blue));
}

/* Main 3D glass console */
html:is(.light, .dark) .gw-ab-cc__console {
  position: absolute;
  z-index: 3;
  top: 12%;
  left: 8%;
  right: 8%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  border-radius: 1.15rem;
  overflow: hidden;
  background:
    linear-gradient(155deg, color-mix(in srgb, #fff 55%, transparent), color-mix(in srgb, var(--ab-cc-surface) 92%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--ab-cc-blue) 6%, transparent), transparent 40%);
  border: 1px solid color-mix(in srgb, var(--ab-cc-blue) 18%, transparent);
  box-shadow:
    0 28px 64px color-mix(in srgb, var(--ab-cc-blue) 16%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 45%, transparent) inset,
    0 0 40px color-mix(in srgb, var(--ab-cc-green) 8%, transparent);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  transform: rotateX(6deg) rotateY(-6deg);
  transform-style: preserve-3d;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  animation: gw-ab-cc-console-float 9s ease-in-out infinite;
  will-change: transform;
}

html.dark .gw-ab-cc__console {
  background:
    linear-gradient(155deg, color-mix(in srgb, #1e2330 70%, transparent), color-mix(in srgb, var(--ab-cc-surface) 90%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--ab-cc-blue) 12%, transparent), transparent 45%);
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, #93c5fd 12%, transparent) inset,
    0 0 48px color-mix(in srgb, var(--ab-cc-blue) 18%, transparent);
}

html:is(.light, .dark) .gw-ab-cc.is-tilting .gw-ab-cc__console {
  animation: none;
  box-shadow:
    0 36px 72px color-mix(in srgb, var(--ab-cc-blue) 20%, transparent),
    0 0 0 1px color-mix(in srgb, #fff 50%, transparent) inset,
    0 0 48px color-mix(in srgb, var(--ab-cc-green) 12%, transparent);
}

html:is(.light, .dark) .gw-ab-cc.is-tilting .gw-ab-cc__chip,
html:is(.light, .dark) .gw-ab-cc.is-tilting .gw-ab-cc__metric {
  animation: none;
}

html:is(.light, .dark) .gw-ab-cc__console-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--ab-cc-border);
  background: color-mix(in srgb, var(--ab-cc-blue) 5%, transparent);
}

html:is(.light, .dark) .gw-ab-cc__traffic {
  display: flex;
  gap: 0.28rem;
}

html:is(.light, .dark) .gw-ab-cc__traffic i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ab-cc-muted) 45%, transparent);
}

html:is(.light, .dark) .gw-ab-cc__traffic i:nth-child(1) { background: #ff5f57; }
html:is(.light, .dark) .gw-ab-cc__traffic i:nth-child(2) { background: #febc2e; }
html:is(.light, .dark) .gw-ab-cc__traffic i:nth-child(3) { background: #28c840; }

html:is(.light, .dark) .gw-ab-cc__console-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ab-cc-ink);
}

html:is(.light, .dark) .gw-ab-cc__live {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--ab-cc-green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-cc-green) 28%, transparent);
  animation: gw-ab-cc-pulse 1.6s ease-in-out infinite;
}

html:is(.light, .dark) .gw-ab-cc__console-meta {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ab-cc-muted);
}

html:is(.light, .dark) .gw-ab-cc__console-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.7rem 0.75rem 0.8rem;
  min-height: 0;
}

/* Value flow rail */
html:is(.light, .dark) .gw-ab-cc__flow {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0.45rem;
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--ab-cc-blue) 6%, transparent);
  border: 1px solid var(--ab-cc-border);
  overflow: hidden;
}

html:is(.light, .dark) .gw-ab-cc__flow-node {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ab-cc-ink);
  white-space: nowrap;
}

html:is(.light, .dark) .gw-ab-cc__flow-node span {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--ab-cc-chrome);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ab-cc-chrome) 55%, transparent);
  animation: gw-ab-cc-pulse 2.2s ease-in-out infinite;
}

html:is(.light, .dark) .gw-ab-cc__flow-node--end span {
  background: var(--ab-cc-green);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ab-cc-green) 55%, transparent);
}

html:is(.light, .dark) .gw-ab-cc__flow-line {
  flex: 1;
  min-width: 0.55rem;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ab-cc-blue) 18%, transparent);
  position: relative;
  overflow: hidden;
}

html:is(.light, .dark) .gw-ab-cc__flow-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--ab-cc-green), transparent);
  animation: gw-ab-cc-flow 2.4s linear infinite;
}

html:is(.light, .dark) .gw-ab-cc__flow-line:nth-child(2) i { animation-delay: 0s; }
html:is(.light, .dark) .gw-ab-cc__flow-line:nth-child(4) i { animation-delay: 0.35s; }
html:is(.light, .dark) .gw-ab-cc__flow-line:nth-child(6) i { animation-delay: 0.7s; }
html:is(.light, .dark) .gw-ab-cc__flow-line:nth-child(8) i { animation-delay: 1.05s; }

/* Dashboard panels grid */
html:is(.light, .dark) .gw-ab-cc__panels {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 0.9fr 0.85fr;
  gap: 0.5rem;
  min-height: 0;
}

html:is(.light, .dark) .gw-ab-cc__panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.55rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--color-surface-raised, #fff) 55%, transparent);
  border: 1px solid var(--ab-cc-border);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ab-cc-blue) 6%, transparent);
  min-height: 0;
  overflow: hidden;
}

html.dark .gw-ab-cc__panel {
  background: color-mix(in srgb, #0b0d14 45%, transparent);
}

html:is(.light, .dark) .gw-ab-cc__panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

html:is(.light, .dark) .gw-ab-cc__panel header span {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ab-cc-muted);
}

html:is(.light, .dark) .gw-ab-cc__panel header em {
  font-style: normal;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--ab-cc-green);
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ab-cc-green) 12%, transparent);
}

html:is(.light, .dark) .gw-ab-cc__pulse {
  animation: gw-ab-cc-pulse 1.8s ease-in-out infinite;
}

html:is(.light, .dark) .gw-ab-cc__panel--analytics {
  grid-column: 1;
  grid-row: 1 / span 2;
}

html:is(.light, .dark) .gw-ab-cc__panel--ai {
  grid-column: 2;
  grid-row: 1;
}

html:is(.light, .dark) .gw-ab-cc__panel--clients {
  grid-column: 2;
  grid-row: 2;
}

html:is(.light, .dark) .gw-ab-cc__panel--seo {
  grid-column: 1;
  grid-row: 3;
}

html:is(.light, .dark) .gw-ab-cc__panel--pipeline {
  grid-column: 2;
  grid-row: 3;
}

html:is(.light, .dark) .gw-ab-cc__panel--team {
  display: none;
}

@media (min-width: 1100px) {
  html:is(.light, .dark) .gw-ab-cc__panels {
    grid-template-columns: 1.1fr 0.95fr 0.9fr;
    grid-template-rows: 1fr 1fr;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--analytics {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--ai {
    grid-column: 2;
    grid-row: 1;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--clients {
    grid-column: 3;
    grid-row: 1;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--seo {
    grid-column: 2;
    grid-row: 2;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--pipeline {
    grid-column: 3;
    grid-row: 2;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--team {
    display: none;
  }
}

/* Chart */
html:is(.light, .dark) .gw-ab-cc__chart {
  flex: 1;
  width: 100%;
  min-height: 3.5rem;
  overflow: visible;
}

html:is(.light, .dark) .gw-ab-cc__chart-line {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: gw-ab-cc-draw 3.2s ease-out infinite alternate;
}

html:is(.light, .dark) .gw-ab-cc__chart-fill {
  opacity: 0.85;
  animation: gw-ab-cc-fade 3.2s ease-in-out infinite alternate;
}

html:is(.light, .dark) .gw-ab-cc__panel-foot {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

html:is(.light, .dark) .gw-ab-cc__panel-foot strong {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.95rem;
  color: var(--ab-cc-green);
}

html:is(.light, .dark) .gw-ab-cc__panel-foot span {
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--ab-cc-muted);
}

/* AI flow */
html:is(.light, .dark) .gw-ab-cc__ai-flow {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}

html:is(.light, .dark) .gw-ab-cc__ai-node {
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.2rem 0.35rem;
  border-radius: 0.35rem;
  color: var(--ab-cc-ink);
  background: color-mix(in srgb, var(--ab-cc-blue) 10%, transparent);
  border: 1px solid var(--ab-cc-border);
}

html:is(.light, .dark) .gw-ab-cc__ai-arrow {
  width: 0.7rem;
  height: 2px;
  background: linear-gradient(90deg, var(--ab-cc-blue), var(--ab-cc-green));
  position: relative;
  flex-shrink: 0;
}

html:is(.light, .dark) .gw-ab-cc__ai-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  border: 3px solid transparent;
  border-left-color: var(--ab-cc-green);
}

html:is(.light, .dark) .gw-ab-cc__bars {
  display: flex;
  align-items: flex-end;
  gap: 0.2rem;
  height: 1.6rem;
  margin-top: auto;
}

html:is(.light, .dark) .gw-ab-cc__bars span {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--ab-cc-green), color-mix(in srgb, var(--ab-cc-blue) 70%, var(--ab-cc-green)));
  opacity: 0.85;
  animation: gw-ab-cc-bar 1.8s ease-in-out infinite;
}

html:is(.light, .dark) .gw-ab-cc__bars span:nth-child(1) { height: 45%; animation-delay: 0s; }
html:is(.light, .dark) .gw-ab-cc__bars span:nth-child(2) { height: 70%; animation-delay: 0.15s; }
html:is(.light, .dark) .gw-ab-cc__bars span:nth-child(3) { height: 55%; animation-delay: 0.3s; }
html:is(.light, .dark) .gw-ab-cc__bars span:nth-child(4) { height: 90%; animation-delay: 0.45s; }
html:is(.light, .dark) .gw-ab-cc__bars span:nth-child(5) { height: 62%; animation-delay: 0.6s; }
html:is(.light, .dark) .gw-ab-cc__bars span:nth-child(6) { height: 78%; animation-delay: 0.75s; }

/* Clients list */
html:is(.light, .dark) .gw-ab-cc__clients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

html:is(.light, .dark) .gw-ab-cc__clients li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--ab-cc-ink);
}

html:is(.light, .dark) .gw-ab-cc__clients i {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--ab-cc-green);
  animation: gw-ab-cc-pulse 2s ease-in-out infinite;
}

html:is(.light, .dark) .gw-ab-cc__clients li:nth-child(2) i {
  background: var(--ab-cc-chrome);
  animation-delay: 0.4s;
}

html:is(.light, .dark) .gw-ab-cc__clients li:nth-child(3) i {
  background: var(--ab-cc-indigo);
  animation-delay: 0.8s;
}

html:is(.light, .dark) .gw-ab-cc__clients b {
  font-weight: 700;
  color: var(--ab-cc-green);
  font-size: 0.5rem;
}

/* SEO ranks */
html:is(.light, .dark) .gw-ab-cc__seo-ranks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  margin-top: auto;
}

html:is(.light, .dark) .gw-ab-cc__seo-ranks div {
  text-align: center;
  padding: 0.25rem 0.15rem;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--ab-cc-blue) 6%, transparent);
}

html:is(.light, .dark) .gw-ab-cc__seo-ranks span {
  display: block;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--ab-cc-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

html:is(.light, .dark) .gw-ab-cc__seo-ranks strong {
  display: block;
  margin-top: 0.1rem;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.75rem;
  color: var(--ab-cc-ink);
}

/* Pipeline */
html:is(.light, .dark) .gw-ab-cc__pipeline {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: auto;
}

html:is(.light, .dark) .gw-ab-cc__pipe {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.35rem;
}

html:is(.light, .dark) .gw-ab-cc__pipe span {
  display: block;
  height: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ab-cc-blue) 12%, transparent);
  position: relative;
  overflow: hidden;
}

html:is(.light, .dark) .gw-ab-cc__pipe span::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 60%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ab-cc-blue), var(--ab-cc-green));
  box-shadow: 0 0 8px color-mix(in srgb, var(--ab-cc-green) 35%, transparent);
  animation: gw-ab-cc-pipe 2.8s ease-in-out infinite;
}

html:is(.light, .dark) .gw-ab-cc__pipe label {
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--ab-cc-muted);
  text-transform: uppercase;
}

/* Team nodes (shown when space allows — kept compact in console overflow) */
html:is(.light, .dark) .gw-ab-cc__nodes {
  position: relative;
  height: 2.4rem;
  margin-top: auto;
}

html:is(.light, .dark) .gw-ab-cc__node {
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ab-cc-blue), var(--ab-cc-green));
  box-shadow: 0 0 10px color-mix(in srgb, var(--ab-cc-blue) 40%, transparent);
  animation: gw-ab-cc-pulse 2.4s ease-in-out infinite;
}

html:is(.light, .dark) .gw-ab-cc__node--a { top: 40%; left: 12%; }
html:is(.light, .dark) .gw-ab-cc__node--b { top: 10%; left: 38%; animation-delay: 0.4s; }
html:is(.light, .dark) .gw-ab-cc__node--c { top: 55%; left: 62%; animation-delay: 0.8s; }
html:is(.light, .dark) .gw-ab-cc__node--d { top: 20%; left: 82%; animation-delay: 1.2s; }

html:is(.light, .dark) .gw-ab-cc__node-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--ab-cc-blue) 45%, transparent);
  opacity: 0.7;
}

/* Keyframes */
@keyframes gw-ab-cc-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

@keyframes gw-ab-cc-console-float {
  0%, 100% { transform: rotateX(6deg) rotateY(-6deg) translate3d(0, 0, 0); }
  50% { transform: rotateX(7deg) rotateY(-5deg) translate3d(0, -6px, 0); }
}

@keyframes gw-ab-cc-glow {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.08); opacity: 0.75; }
}

@keyframes gw-ab-cc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.92); }
}

@keyframes gw-ab-cc-flow {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}

@keyframes gw-ab-cc-draw {
  0% { stroke-dashoffset: 220; }
  100% { stroke-dashoffset: 0; }
}

@keyframes gw-ab-cc-fade {
  0% { opacity: 0.35; }
  100% { opacity: 0.9; }
}

@keyframes gw-ab-cc-bar {
  0%, 100% { transform: scaleY(0.85); transform-origin: bottom; }
  50% { transform: scaleY(1.08); transform-origin: bottom; }
}

@keyframes gw-ab-cc-pipe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

/* Desktop: full hero right column */
@media (min-width: 1024px) {
  html:is(.light, .dark) .gw-ab-cc {
    min-height: 28rem;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  html:is(.light, .dark) .gw-ab-cc__scene {
    max-width: none;
    width: 100%;
    min-height: 28rem;
    margin: 0;
  }

  html:is(.light, .dark) .gw-ab-cc__console {
    top: 11%;
    left: 10%;
    right: 8%;
    bottom: 11%;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--team {
    display: flex;
  }

  html:is(.light, .dark) .gw-ab-cc__panels {
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1.1fr 0.95fr 0.9fr;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--analytics { grid-column: 1; grid-row: 1 / span 2; }
  html:is(.light, .dark) .gw-ab-cc__panel--ai { grid-column: 2; grid-row: 1; }
  html:is(.light, .dark) .gw-ab-cc__panel--clients { grid-column: 2; grid-row: 2; }
  html:is(.light, .dark) .gw-ab-cc__panel--seo { grid-column: 1; grid-row: 3; }
  html:is(.light, .dark) .gw-ab-cc__panel--pipeline { grid-column: 2; grid-row: 3; }
  html:is(.light, .dark) .gw-ab-cc__panel--team { display: none; }
}

@media (min-width: 1200px) {
  html:is(.light, .dark) .gw-ab-cc__scene {
    min-height: 30rem;
  }

  html:is(.light, .dark) .gw-ab-cc__panels {
    grid-template-columns: 1.05fr 0.95fr 0.95fr;
    grid-template-rows: 1.05fr 0.95fr;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--analytics { grid-column: 1; grid-row: 1; }
  html:is(.light, .dark) .gw-ab-cc__panel--ai { grid-column: 2; grid-row: 1; }
  html:is(.light, .dark) .gw-ab-cc__panel--clients { grid-column: 3; grid-row: 1; }
  html:is(.light, .dark) .gw-ab-cc__panel--seo { grid-column: 1; grid-row: 2; }
  html:is(.light, .dark) .gw-ab-cc__panel--pipeline { grid-column: 2; grid-row: 2; }
  html:is(.light, .dark) .gw-ab-cc__panel--team { display: flex; grid-column: 3; grid-row: 2; }
}

/* Tablet */
@media (max-width: 1023px) {
  html:is(.light, .dark) .gw-ab-cc {
    margin-top: 0.5rem;
  }

  html:is(.light, .dark) .gw-ab-cc__scene {
    max-width: 32rem;
    min-height: 24rem;
    transform: scale(0.96);
    transform-origin: top center;
  }

  html:is(.light, .dark) .gw-ab-cc__chip--web,
  html:is(.light, .dark) .gw-ab-cc__chip--mkt {
    display: none;
  }
}

/* Mobile stacked */
@media (max-width: 640px) {
  html:is(.light, .dark) .gw-ab-cc__scene {
    min-height: 26rem;
    max-width: 100%;
    transform: none;
  }

  html:is(.light, .dark) .gw-ab-cc__metric {
    padding: 0.4rem 0.55rem;
  }

  html:is(.light, .dark) .gw-ab-cc__metric strong {
    font-size: 0.8rem;
  }

  html:is(.light, .dark) .gw-ab-cc__metric span:not(.gw-ab-cc__metric-dot) {
    font-size: 0.5rem;
  }

  html:is(.light, .dark) .gw-ab-cc__chip--seo,
  html:is(.light, .dark) .gw-ab-cc__chip--ent,
  html:is(.light, .dark) .gw-ab-cc__chip--auto {
    display: none;
  }

  html:is(.light, .dark) .gw-ab-cc__chip--ai {
    top: auto;
    bottom: 28%;
    right: 2%;
  }

  html:is(.light, .dark) .gw-ab-cc__console {
    top: 14%;
    left: 4%;
    right: 4%;
    bottom: 12%;
    transform: rotateX(4deg) rotateY(-3deg);
  }

  html:is(.light, .dark) .gw-ab-cc__flow-node {
    font-size: 0.5rem;
  }

  html:is(.light, .dark) .gw-ab-cc__panels {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--analytics {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--ai {
    grid-column: 1;
    grid-row: 2;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--clients {
    grid-column: 2;
    grid-row: 2;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--seo {
    grid-column: 1;
    grid-row: 3;
  }

  html:is(.light, .dark) .gw-ab-cc__panel--pipeline {
    grid-column: 2;
    grid-row: 3;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html:is(.light, .dark) .gw-ab-cc__glow,
  html:is(.light, .dark) .gw-ab-cc__metric,
  html:is(.light, .dark) .gw-ab-cc__chip,
  html:is(.light, .dark) .gw-ab-cc__console,
  html:is(.light, .dark) .gw-ab-cc__metric-dot,
  html:is(.light, .dark) .gw-ab-cc__live,
  html:is(.light, .dark) .gw-ab-cc__flow-line i,
  html:is(.light, .dark) .gw-ab-cc__chart-line,
  html:is(.light, .dark) .gw-ab-cc__chart-fill,
  html:is(.light, .dark) .gw-ab-cc__bars span,
  html:is(.light, .dark) .gw-ab-cc__pipe span::after,
  html:is(.light, .dark) .gw-ab-cc__node,
  html:is(.light, .dark) .gw-ab-cc__pulse,
  html:is(.light, .dark) .gw-ab-cc__clients i {
    animation: none !important;
  }

  html:is(.light, .dark) .gw-ab-cc__console {
    transform: none;
  }

  html:is(.light, .dark) .gw-ab-cc__chart-line {
    stroke-dashoffset: 0;
  }
}