/* ========================================
   css/components.css — Full Component Library
   DevOps AI by RainTech
   Depends on: css/base.css
   ======================================== */

/* ─── Buttons ──────────────────────────────────────────────────────────────
   Base .btn — shared foundation
   .btn--primary  — green fill, dark text, glow on hover
   .btn--secondary — outlined, accent border
   .btn--ghost    — text-only, underline on hover
   .btn--lg / .btn--sm — size variants
   .btn--icon     — icon-only square button

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem var(--space-6);
  font-family: var(--font-family);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-normal) var(--ease-out),
              border-color     var(--duration-normal) var(--ease-out),
              color            var(--duration-normal) var(--ease-out),
              box-shadow       var(--duration-normal) var(--ease-out),
              transform        var(--duration-fast) var(--ease-out);
  -webkit-user-select: none;
          user-select: none;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary */
.btn--primary {
  background: var(--accent);
  color: var(--blue-cetacean);
  border-color: var(--accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  box-shadow: 0 4px 20px var(--accent-glow-strong),
              0 0 0 1px rgba(139, 219, 2, 0.20);
}

/* Secondary */
.btn--secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--accent-glow);
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Ghost */
.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sizes */
.btn--lg {
  font-size: var(--text-base);
  padding: 0.875rem var(--space-8);
}

.btn--sm {
  font-size: var(--text-xs);
  padding: 0.375rem var(--space-4);
}

/* Icon-only */
.btn--icon {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  width: 2.5rem;
  height: 2.5rem;
}

.btn--icon svg,
.btn--icon img {
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}

/* ─── Cards ────────────────────────────────────────────────────────────────
   .card         — base card shell
   .card--glass  — glassmorphic variant
   .card--solid  — solid surface variant

.card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow: hidden;
}

/* Glassmorphic card */
.card--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: transform        var(--duration-normal) var(--ease-out),
              box-shadow       var(--duration-normal) var(--ease-out),
              border-color     var(--duration-normal) var(--ease-out);
}

.card--glass:hover {
  transform: translateY(-4px);
  border-color: var(--border-glow);
  box-shadow: var(--shadow-lg), 0 0 20px var(--accent-glow);
}

/* Solid card */
.card--solid {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-md);
  transition: transform    var(--duration-normal) var(--ease-out),
              box-shadow   var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.card--solid:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

/* Card inner elements */
.card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--accent-glow);
  color: var(--accent);
  flex-shrink: 0;
}

.card__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.card__body {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* ─── Badges ───────────────────────────────────────────────────────────────
   .badge         — base badge
   .badge--zone   — accent green bg
   .badge--role   — blue tint
   .badge--status — dynamic status colors

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2em 0.65em;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}

.badge--zone {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: rgba(139, 219, 2, 0.25);
}

.badge--role {
  background: rgba(32, 186, 231, 0.12);
  color: var(--blue-sky);
  border-color: rgba(32, 186, 231, 0.25);
}

.badge--status {
  background: transparent;
}

.badge--status[data-status="success"] {
  background: rgba(74, 222, 128, 0.10);
  color: var(--status-success);
  border-color: rgba(74, 222, 128, 0.25);
}

.badge--status[data-status="warning"] {
  background: rgba(251, 191, 36, 0.10);
  color: var(--status-warning);
  border-color: rgba(251, 191, 36, 0.25);
}

.badge--status[data-status="error"] {
  background: rgba(248, 113, 113, 0.10);
  color: var(--status-error);
  border-color: rgba(248, 113, 113, 0.25);
}

.badge--status[data-status="info"] {
  background: rgba(56, 189, 248, 0.10);
  color: var(--status-info);
  border-color: rgba(56, 189, 248, 0.25);
}

/* Dot indicator inside badge */
.badge__dot {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ─── Metrics ──────────────────────────────────────────────────────────────
   .metric           — container
   .metric__value    — large stat number
   .metric__label    — supporting label
   .metric--counter  — animated counter variant

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.metric__value {
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.metric__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.metric--counter .metric__value {
  /* Prevent layout shift during count animation */
  min-width: 3ch;
  display: inline-block;
}

.metric__suffix {
  font-size: 0.65em;
  font-weight: var(--font-weight-semibold);
  color: var(--accent);
  vertical-align: super;
}

/* ─── Screenshots ──────────────────────────────────────────────────────────
   .screenshot         — base image wrapper
   .screenshot--framed — browser chrome mockup
   .screenshot--float  — rounded, shadow, slight rotation

.screenshot {
  position: relative;
  display: block;
  overflow: hidden;
}

.screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

/* Browser frame */
.screenshot--framed {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-default);
  overflow: hidden;
}

.screenshot--framed::before {
  content: '';
  display: block;
  height: 2.5rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  /* Window traffic lights simulation via box-shadows */
  background-image: radial-gradient(circle 5px at 14px 50%, #FF5F57 0%, #FF5F57 100%),
    radial-gradient(circle 5px at 34px 50%, #FEBC2E 0%, #FEBC2E 100%),
    radial-gradient(circle 5px at 54px 50%, #28C840 0%, #28C840 100%);
  background-repeat: no-repeat;
}

/* Floating hero screenshot */
.screenshot--float {
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl), 0 0 60px rgba(0, 0, 0, 0.3);
  transform: rotate(-1.5deg) perspective(800px) rotateY(2deg);
  transition: transform var(--duration-slow) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out);
}

.screenshot--float:hover {
  transform: rotate(0deg) perspective(800px) rotateY(0deg) translateY(-6px);
  box-shadow: var(--shadow-xl), 0 0 80px rgba(139, 219, 2, 0.10);
}

/* ─── Section Variants ─────────────────────────────────────────────────────
   .section--dark      — deeper dark bg
   .section--gradient  — gradient bg
   .section--alt       — alternating slightly lighter bg

.section--dark {
  background-color: var(--bg-secondary);
}

.section--gradient {
  background: var(--gradient-depth);
}

.section--alt {
  background-color: var(--bg-tertiary);
}

/* ─── Grid Layouts ─────────────────────────────────────────────────────────
   .grid--bento   — bento box layout (mixed sizes)
   .grid--cards   — auto-fill card grid
   .grid--zones   — 15-item zone grid

/* Bento grid */
.grid--bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

.grid--bento .bento-span-4  { grid-column: span 4; }
.grid--bento .bento-span-6  { grid-column: span 6; }
.grid--bento .bento-span-8  { grid-column: span 8; }
.grid--bento .bento-span-12 { grid-column: span 12; }

@media (max-width: 768px) {
  .grid--bento .bento-span-4,
  .grid--bento .bento-span-6,
  .grid--bento .bento-span-8,
  .grid--bento .bento-span-12 {
    grid-column: span 12;
  }
}

/* Cards grid (auto-fill) */
.grid--cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-6);
}

/* Zones grid — 5 cols, 3 rows = 15 items */
.grid--zones {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .grid--zones {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .grid--zones {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Hero Variants ────────────────────────────────────────────────────────
   .hero--home   — full viewport hero
   .hero--page   — shorter interior page hero
   .hero--zone   — zone page with accent

.hero--home {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--space-32) var(--space-24);
  overflow: hidden;
}

.hero--page {
  position: relative;
  padding-block: var(--space-24) var(--space-16);
  overflow: hidden;
}

.hero--zone {
  position: relative;
  padding-block: var(--space-20) var(--space-16);
  overflow: hidden;
  /* accent gradient overlay at top edge */
  background-image: linear-gradient(
    180deg,
    var(--accent-glow) 0%,
    transparent 40%
  );
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent);
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  max-width: 18ch;
}

.hero__desc {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 54ch;
  margin-bottom: var(--space-10);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ─── Testimonials ─────────────────────────────────────────────────────────
   .testimonial        — quote card
   .testimonial__quote — the quote text
   .testimonial__author — photo + name + title + company

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow   var(--duration-normal) var(--ease-out);
}

.testimonial:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.testimonial__quote {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.7;
  font-style: italic;
  position: relative;
  padding-left: var(--space-5);
}

.testimonial__quote::before {
  content: '"';
  position: absolute;
  left: 0;
  top: -0.15em;
  font-size: 2em;
  line-height: 1;
  color: var(--accent);
  font-style: normal;
  font-weight: var(--font-weight-extrabold);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.testimonial__photo {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--border-default);
  flex-shrink: 0;
}

.testimonial__meta {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.testimonial__name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.testimonial__role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.testimonial__company {
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: var(--font-weight-semibold);
}

/* ─── Accordion (<details>/<summary>) ─────────────────────────────────────
   Uses native <details> with CSS height animation

.accordion {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion + .accordion {
  margin-top: var(--space-2);
}

.accordion > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
  background: var(--bg-card);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::marker { display: none; }

.accordion > summary:hover,
.accordion[open] > summary {
  background: var(--bg-card-hover);
}

/* Chevron icon */
.accordion > summary::after {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F7F7FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-out);
}

.accordion[open] > summary::after {
  transform: rotate(180deg);
}

.accordion__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
  border-top: 1px solid var(--border-default);
  background: var(--bg-card);
}

/* ─── Tabs ─────────────────────────────────────────────────────────────────
   Accessible: role="tablist", role="tab", role="tabpanel"
   Keyboard navigation via JS (arrow keys)

.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 0;
  position: relative;
}

.tabs__tab {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color        var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.tabs__tab:hover {
  color: var(--text-primary);
}

.tabs__tab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tabs__panel {
  display: none;
  animation: fadeIn var(--duration-normal) var(--ease-out) both;
}

.tabs__panel[aria-hidden="false"],
.tabs__panel.is-active {
  display: block;
}

/* ─── Breadcrumb ──────────────────────────────────────────────────────────
   Semantic <nav aria-label="Breadcrumb"><ol class="breadcrumb">

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25em;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  color: var(--text-muted);
  opacity: 0.5;
}

.breadcrumb__link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.breadcrumb__link:hover {
  color: var(--accent);
}

.breadcrumb__item[aria-current="page"] {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ─── Toast ────────────────────────────────────────────────────────────────
   Fixed top-right corner, auto-dismiss positioning

.toast-region {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 3rem);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: slideUp var(--duration-normal) var(--ease-out) both;
}

.toast.is-exiting {
  animation: fadeIn var(--duration-normal) var(--ease-in-out) reverse both;
}

.toast__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
}

.toast__content {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.toast__message {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 0.2em;
}

.toast__close {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: color            var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.toast__close:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}

/* Toast variants */
.toast--success { border-left: 3px solid var(--status-success); }
.toast--warning { border-left: 3px solid var(--status-warning); }
.toast--error   { border-left: 3px solid var(--status-error); }
.toast--info    { border-left: 3px solid var(--status-info); }

/* ─── Code Block ───────────────────────────────────────────────────────────
   .code-block — syntax highlighted code container with copy button

.code-block {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  overflow: hidden;
}

.code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  background: var(--bg-surface);
}

.code-block__lang {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.code-block__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25rem 0.6rem;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  transition: color        var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background   var(--duration-fast) var(--ease-out);
}

.code-block__copy:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-glow);
}

.code-block__copy.is-copied {
  color: var(--status-success);
  border-color: var(--status-success);
}

.code-block pre {
  overflow-x: auto;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-secondary);
}

.code-block code {
  font-family: inherit;
  background: none;
  padding: 0;
  font-size: inherit;
}

/* Inline code */
:not(.code-block) > code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--accent);
  border: 1px solid var(--border-default);
}

/* ─── Reading Progress Bar ─────────────────────────────────────────────────
   (kept from enhancements.css for consolidated reference)

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent, #79C600) 0%, var(--blue-sky, #20BAE7) 100%);
  z-index: 99999;
  transition: width 0.1s linear;
  pointer-events: none;
}

body:has(.welcome-bar) .reading-progress {
  top: 33px;
}

.stat-number,
.stats-grid .stat h3,
.stats-grid .stat-value {
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  display: inline-block;
}

/* ─── Generic card hover micro-interactions (from enhancements.css) ────────
   Kept here so pages referencing these classes still work without loading
   the old enhancements.css

.zone-card,
.role-card,
.role-zone-card,
.rzc-pa,
.feature-card,
.solution-card,
.industry-card,
.tile-card,
.rec-zone-card,
.process-area-card {
  transition: transform     var(--duration-normal) cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow    var(--duration-normal) ease,
              border-color  var(--duration-normal) ease;
}

.zone-card:hover,
.role-card:hover,
.role-zone-card:hover,
.feature-card:hover,
.solution-card:hover,
.industry-card:hover,
.tile-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(121, 198, 0, 0.1);
}

.rzc-pa:hover,
.process-area-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.rec-zone-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent, #79C600);
  box-shadow: 0 8px 24px rgba(121, 198, 0, 0.1);
}

/* CTA hover glow */
.btn-primary:hover,
.cta-primary:hover,
a[class*="cta"]:not(.cta-secondary):hover,
.hero-cta a:first-child:hover {
  box-shadow: 0 4px 20px rgba(121, 198, 0, 0.3), 0 0 0 1px rgba(121, 198, 0, 0.2);
}

/* ─── Reduced motion overrides ─────────────────────────────────────────────
   Must come last in this file

@media (prefers-reduced-motion: reduce) {
  .card--glass,
  .card--solid,
  .screenshot--float,
  .accordion > summary,
  .tabs__tab,
  .toast,
  .code-block__copy,
  .btn,
  .zone-card,
  .role-card,
  .role-zone-card,
  .rzc-pa,
  .feature-card,
  .solution-card,
  .industry-card,
  .tile-card,
  .rec-zone-card,
  .process-area-card,
  .testimonial,
  .reading-progress {
    transition: none;
  }

  .card--glass:hover,
  .card--solid:hover,
  .screenshot--float:hover,
  .zone-card:hover,
  .role-card:hover,
  .role-zone-card:hover,
  .feature-card:hover,
  .solution-card:hover,
  .industry-card:hover,
  .tile-card:hover,
  .rzc-pa:hover,
  .process-area-card:hover,
  .rec-zone-card:hover {
    transform: none;
  }
}

/* ═══ FR-W20: Chatbot ═══ */

/* Container — fixed positioning context */
#chatbot-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 9999;
  font-family: var(--font-family);
}

/* ── FAB ──────────────────────────────────────────────────────────────── */
.chatbot-fab {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), 0 0 20px rgba(139, 219, 2, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
  animation: chatbot-pulse 3s ease-in-out infinite;
}

.chatbot-fab:hover {
  transform: scale(1.08);
  box-shadow: var(--glass-shadow), 0 0 30px rgba(139, 219, 2, 0.3);
}

.chatbot-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@keyframes chatbot-pulse {
  0%, 100% { box-shadow: var(--glass-shadow), 0 0 20px rgba(139, 219, 2, 0.15); }
  50% { box-shadow: var(--glass-shadow), 0 0 28px rgba(139, 219, 2, 0.3); }
}

.chatbot-fab__icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
}

.chatbot-fab__icon--close {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

.chatbot-fab.is-open .chatbot-fab__icon--chat {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.chatbot-fab.is-open .chatbot-fab__icon--close {
  opacity: 1;
  transform: rotate(0) scale(1);
}

.chatbot-fab.is-open {
  animation: none;
}

/* ── Tooltip ──────────────────────────────────────────────────────────── */
.chatbot-tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  right: 0;
  background: var(--accent);
  color: var(--blue-cetacean);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.chatbot-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Panel ────────────────────────────────────────────────────────────── */
.chatbot-panel {
  position: absolute;
  bottom: calc(56px + var(--space-4));
  right: 0;
  width: 400px;
  height: 500px;
  max-height: calc(100vh - 120px);
  background: rgba(0, 14, 46, 0.95);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  pointer-events: none;
  transition: opacity 300ms var(--ease-out),
              transform 300ms var(--ease-out);
}

.chatbot-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ── Panel header ─────────────────────────────────────────────────────── */
.chatbot-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-default);
  flex-shrink: 0;
}

.chatbot-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.chatbot-panel__indicator {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  animation: chatbot-indicator-pulse 2s ease-in-out infinite;
}

@keyframes chatbot-indicator-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.chatbot-panel__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.chatbot-panel__close svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.chatbot-panel__close:hover {
  background: var(--bg-card);
}

.chatbot-panel__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Messages area ────────────────────────────────────────────────────── */
.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-4) var(--space-2);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.chatbot-messages::-webkit-scrollbar {
  width: 4px;
}

.chatbot-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chatbot-messages::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 2px;
}

/* ── Message bubbles ──────────────────────────────────────────────────── */
.chatbot-msg {
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
  animation: chatbot-msg-in 200ms var(--ease-out);
}

@keyframes chatbot-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chatbot-msg--user {
  margin-left: auto;
  background: rgba(139, 219, 2, 0.12);
  border: 1px solid rgba(139, 219, 2, 0.3);
  color: var(--text-primary);
  border-bottom-right-radius: var(--space-1);
}

.chatbot-msg--assistant {
  margin-right: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  border-bottom-left-radius: var(--space-1);
}

.chatbot-msg--assistant p {
  margin-bottom: var(--space-2);
}

.chatbot-msg--assistant p:last-child {
  margin-bottom: 0;
}

.chatbot-msg--assistant strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.chatbot-msg--assistant code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.chatbot-msg--assistant a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chatbot-msg--assistant a:hover {
  color: var(--accent-hover);
}

.chatbot-msg--assistant ul {
  padding-left: var(--space-5);
  margin: var(--space-2) 0;
  list-style: disc;
}

.chatbot-msg--assistant li {
  margin-bottom: var(--space-1);
}

/* ── Typing indicator ─────────────────────────────────────────────────── */
.chatbot-typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-4) var(--space-3);
  flex-shrink: 0;
}

.chatbot-typing.is-visible {
  display: flex;
}

.chatbot-typing__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--cyan);
  animation: chatbot-dot-bounce 1.4s ease-in-out infinite;
}

.chatbot-typing__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.chatbot-typing__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes chatbot-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ── Input area ───────────────────────────────────────────────────────── */
.chatbot-input {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--border-default);
  flex-shrink: 0;
}

.chatbot-input__field {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-family);
  resize: none;
  overflow-y: auto;
  max-height: 120px;
  line-height: 1.5;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.chatbot-input__field::placeholder {
  color: var(--text-muted);
}

.chatbot-input__field:focus {
  outline: none;
  border-color: var(--accent);
}

.chatbot-input__send {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.chatbot-input__send svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--blue-cetacean);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chatbot-input__send:hover {
  background: var(--accent-hover);
}

.chatbot-input__send:disabled {
  opacity: 0.3;
  cursor: default;
}

.chatbot-input__send:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

/* ── Welcome screen ───────────────────────────────────────────────────── */
.chatbot-welcome {
  text-align: center;
  padding: var(--space-6) var(--space-4) var(--space-4);
}

.chatbot-welcome__icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
}

.chatbot-welcome__title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.chatbot-welcome__subtitle {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* ── Suggested prompts ────────────────────────────────────────────────── */
.chatbot-prompts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.chatbot-prompt-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.chatbot-prompt-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--text-primary);
}

.chatbot-prompt-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Mobile (full screen) ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  #chatbot-container {
    bottom: var(--space-4);
    right: var(--space-4);
  }

  .chatbot-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    bottom: 0;
    right: 0;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .chatbot-fab { animation: none; }
  .chatbot-panel__indicator { animation: none; }
  .chatbot-typing__dot { animation: none; opacity: 1; }
  .chatbot-msg { animation: none; }
  .chatbot-panel {
    transition-duration: 0ms;
  }
}

/* ═══ FR-W22: Interactive Demo ═══ */

/* Demo Container (inline mode) */
.demo-container {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  padding: var(--space-6);
  max-height: 420px;
  overflow: hidden;
}

/* Progress Bar */
.demo-progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.demo-progress__bar {
  flex: 1;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.demo-progress__fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  transition: width 0.4s var(--ease-out);
}

.demo-progress__text {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Step Dots */
.demo-dots {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.demo-dot {
  width: 32px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  position: relative;
}

.demo-dot.is-completed { background: var(--accent); opacity: 0.5; }
.demo-dot.is-active { background: var(--accent); transform: scaleY(1.5); }
.demo-dot:hover { background: var(--text-accent); }
.demo-dot__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Viewport & Steps */
.demo-viewport {
  position: relative;
  min-height: 200px;
}

.demo-step {
  display: none;
  gap: var(--space-6);
  animation: demoFadeIn 0.4s var(--ease-out);
}

.demo-step.is-active {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: start;
}

@keyframes demoFadeIn {

.demo-step__icon {
  font-size: var(--text-3xl);
  line-height: 1;
}

.demo-step__title {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.demo-step__narration {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Platform UI Mock */
.demo-platform {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-primary);
  overflow: hidden;
  font-family: var(--font-mono, 'SFMono-Regular', monospace);
  font-size: var(--text-xs);
}

.demo-platform__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-default);
}

.demo-platform__label {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.demo-platform__status {
  font-weight: var(--font-weight-bold);
  font-size: var(--text-xs);
}

.demo-platform__body {
  padding: var(--space-3);
}

.demo-platform__line {
  padding: 2px 0;
  color: var(--text-secondary);
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Controls */
.demo-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.demo-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.demo-btn:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
.demo-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.demo-btn--next { background: var(--accent); color: var(--bg-primary); border-color: var(--accent); }
.demo-btn--next:hover { background: var(--accent-hover); }

/* Completion */
.demo-completion {
  text-align: center;
  flex: 1;
}

.demo-completion__text {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.demo-completion__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Expand Button */
.demo-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--text-accent);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.2s;
}

.demo-expand-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.demo-expand-btn:hover { background: var(--bg-card-hover); }

/* Lightbox */
.demo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.demo-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.demo-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.demo-lightbox__content {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 960px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-default);
}

.demo-lightbox__content .demo-container { max-height: none; }
.demo-lightbox__content .demo-step.is-active {
  grid-template-columns: auto 1fr 1fr;
}

.demo-lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  cursor: pointer;
  transition: background 0.2s;
}

.demo-lightbox__close svg { width: 20px; height: 20px; stroke: var(--text-primary); stroke-width: 2; }
.demo-lightbox__close:hover { background: var(--bg-card-hover); }

/* Demo Responsive */
@media (max-width: 768px) {
  .demo-step.is-active {
    grid-template-columns: 1fr;
  }
  .demo-step__icon { font-size: var(--text-xl); }
  .demo-controls { flex-wrap: wrap; }
  .demo-lightbox__content { width: 95vw; padding: var(--space-4); }
  .demo-lightbox__content .demo-step.is-active { grid-template-columns: 1fr; }