/*
 * VarshaKrishi Design System — components.css
 * All reusable UI components. Every value references tokens.css.
 * No hardcoded hex, px, or arbitrary values.
 *
 * Table of contents:
 *   1.  .btn
 *   2.  .badge
 *   3.  .card
 *   4.  .spec-table
 *   5.  .comparison-table
 *   6.  .form-group
 *   7.  .nav
 *   8.  .alert
 *   9.  .accordion
 *  10.  .timeline
 *  11.  .ticker
 *  12.  .tag-list
 *  13.  .stat-block
 *  14.  .section-label
 *  15.  .divider
 *  16.  .prose (article body)
 *  17.  .breadcrumb
 *  18.  .pulse-dot
 */
/* ═══════════════════════════════════════════════════════════════
 * 1. BUTTON
 * Variants via data-variant attribute: primary | secondary | ghost | destructive
 * ═══════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.75em 1.5em;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color     var(--duration-fast) var(--ease-out),
    color            var(--duration-fast) var(--ease-out),
    box-shadow       var(--duration-base) var(--ease-out),
    transform        var(--duration-base) var(--ease-spring);
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — amber fill, dark text */
.btn[data-variant="primary"],
.btn-primary {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-brand-primary);
}

.btn[data-variant="primary"]:hover,
.btn-primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.btn[data-variant="primary"]:active,
.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

/* Secondary — outlined, muted */
.btn[data-variant="secondary"],
.btn-secondary {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
}

.btn[data-variant="secondary"]:hover,
.btn-secondary:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-muted);
  background: var(--color-bg-surface);
}

/* Ghost — text only, no border */
.btn[data-variant="ghost"],
.btn-ghost {
  background: transparent;
  color: var(--color-brand-primary);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.btn[data-variant="ghost"]:hover,
.btn-ghost:hover {
  color: var(--color-brand-hover);
}

/* Destructive — error color */
.btn[data-variant="destructive"],
.btn-destructive {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error-border);
}

.btn[data-variant="destructive"]:hover,
.btn-destructive:hover {
  background: var(--color-error);
  color: var(--color-text-primary);
}

/* Size modifiers */
.btn[data-size="sm"] { padding: 0.5em 1em; font-size: var(--text-xs); }
.btn[data-size="lg"] { padding: 1em 2em;   font-size: var(--text-base); }

/* ═══════════════════════════════════════════════════════════════
 * 2. BADGE
 * Variants: default | success | warning | error | info | outline
 * ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25em 0.75em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  line-height: 1.6;
  white-space: nowrap;
}

.badge[data-variant="default"] {
  background: var(--color-bg-surface);
  color: var(--color-text-muted);
  border-color: var(--color-border-default);
}

.badge[data-variant="success"] {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

.badge[data-variant="warning"] {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
}

.badge[data-variant="error"] {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error-border);
}

.badge[data-variant="info"] {
  background: var(--color-info-bg);
  color: var(--color-info);
  border-color: var(--color-info-border);
}

.badge[data-variant="outline"] {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border-default);
}

/* ═══════════════════════════════════════════════════════════════
 * 3. CARD
 * Variants: default | feature | stat | team | case-study
 * ═══════════════════════════════════════════════════════════════ */

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow   var(--duration-base) var(--ease-out),
    transform    var(--duration-base) var(--ease-out);
}

.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

/* Feature card — used in "how it works" sections */
.card[data-variant="feature"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.card[data-variant="feature"]:hover {
  transform: translateY(-2px);
}

.card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-brand-primary);
  flex-shrink: 0;
}

.card__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
}

.card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  flex: 1;
}

/* Stat card — for metric displays */
.card[data-variant="stat"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--color-border-default);
  border-radius: 0;
  background: transparent;
  border-top: none;
  border-left: none;
  border-bottom: none;
}

.card[data-variant="stat"]:last-child {
  border-right: none;
}

.card__stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  color: var(--color-brand-primary);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.card__stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

.card__stat-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
}

/* Team card */
.card[data-variant="team"] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
}

.card__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  flex-shrink: 0;
}

.card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.card__avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
}

.card__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.card__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-brand-primary);
  margin-bottom: var(--space-2);
}

.card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════
 * 4. SPEC TABLE
 * Used on products page for hardware specifications.
 * ═══════════════════════════════════════════════════════════════ */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.spec-table tr {
  border-bottom: 1px solid var(--color-border-default);
  transition: background var(--duration-fast) var(--ease-out);
}

.spec-table tr:last-child {
  border-bottom: none;
}

.spec-table tr:hover {
  background: var(--color-bg-surface);
}

.spec-table th,
.spec-table td {
  padding: var(--space-2) var(--space-3);
  vertical-align: top;
  text-align: left;
}

.spec-table th {
  width: 42%;
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  padding-left: 0;
  border-bottom: none;
}

.spec-table td {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
  border-bottom: none;
}

.spec-table td .spec-note {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
 * 5. COMPARISON TABLE
 * Used on government procurement page for scheme compatibility.
 * ═══════════════════════════════════════════════════════════════ */

.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table thead {
  border-bottom: 1px solid var(--color-border-default);
}

.comparison-table th {
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
}

.comparison-table th[data-col="us"] {
  color: var(--color-brand-primary);
}

.comparison-table tbody tr {
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--duration-fast) var(--ease-out);
}

.comparison-table tbody tr:last-child {
  border-bottom: none;
}

.comparison-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.015);
}

.comparison-table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  vertical-align: middle;
}

.comparison-table td:first-child {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.comparison-table td[data-col="us"] {
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

/* Chip inside comparison table cells */
.comparison-table .chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  border: 1px solid transparent;
}

.comparison-table .chip[data-color="green"] {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

.comparison-table .chip[data-color="amber"] {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
}

/* ═══════════════════════════════════════════════════════════════
 * 6. FORM GROUP
 * Wraps label + input/select/textarea + error message.
 * ═══════════════════════════════════════════════════════════════ */

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

.form-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.form-label[data-required]::after {
  content: ' *';
  color: var(--color-brand-primary);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow   var(--duration-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-disabled);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--color-text-disabled);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px var(--color-brand-glow);
}

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-bg);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8A7A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-6);
  cursor: pointer;
}

/* Checkbox */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--duration-fast), border-color var(--duration-fast);
  margin-top: 2px;
}

.form-checkbox input[type="checkbox"]:checked {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23080C08' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.form-checkbox__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* Error message */
.form-error {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-error);
  letter-spacing: var(--tracking-wide);
  display: none;
}

.form-group[data-error] .form-error {
  display: block;
}

/* Radio group */
.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-radio {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.form-radio:hover {
  border-color: var(--color-text-disabled);
  background: var(--color-bg-surface);
}

.form-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background var(--duration-fast), border-color var(--duration-fast);
  flex-shrink: 0;
}

.form-radio input[type="radio"]:checked {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  box-shadow: inset 0 0 0 3px var(--color-bg-surface);
}

.form-radio input[type="radio"]:checked + .form-radio__label {
  color: var(--color-text-primary);
}

.form-radio__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
 * 7. NAVIGATION
 * Desktop: fixed top bar with frosted glass on scroll.
 * Mobile: hamburger triggers full-screen drawer.
 * JS adds .is-scrolled to <header> when scrollY > 80.
 * JS adds .is-open to .nav-drawer when hamburger is activated.
 * ═══════════════════════════════════════════════════════════════ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  border-bottom: 1px solid transparent;
  transition:
    background var(--duration-slow) var(--ease-out),
    border-color var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out);
}

/* Placeholder height prevents layout shift during component injection */
.site-header:empty {
  background: var(--color-bg-base);
}

.site-header.is-scrolled {
  background: var(--color-nav-bg);
  backdrop-filter: var(--color-nav-bg-blur);
  -webkit-backdrop-filter: var(--color-nav-bg-blur);
  border-bottom-color: var(--color-border-default);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-padding);
  gap: var(--space-4);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo__mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.nav-logo__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nav-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.nav-logo__brand {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-snug);
}

.nav-logo__sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  text-decoration: none;
  position: relative;
  padding-block: var(--space-1);
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-brand-primary);
  transition: width var(--duration-base) var(--ease-out-expo);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--color-text-primary);
}

.nav-link[aria-current="page"]::after,
.nav-link:hover::after {
  width: 100%;
}

/* Right actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Language toggle */
.nav-lang {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
}

.nav-lang__btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  text-transform: uppercase;
  padding: var(--space-1);
  transition: color var(--duration-fast);
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

.nav-lang__btn:hover { color: var(--color-text-primary); }
.nav-lang__btn[aria-pressed="true"] { color: var(--color-brand-primary); }
.nav-lang__divider { color: var(--color-text-disabled); }

/* Reading progress bar */
.nav-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-hover));
  transition: width 80ms var(--ease-linear);
}

/* Hamburger button */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  width: 36px;
  height: 36px;
}

.nav-hamburger__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-text-secondary);
  transition:
    transform var(--duration-base) var(--ease-out-expo),
    opacity   var(--duration-fast)  var(--ease-out);
}

.nav-hamburger[aria-expanded="true"] .nav-hamburger__bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] .nav-hamburger__bar:nth-child(2) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--color-bg-base);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out-expo);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-height) + var(--space-4)) var(--grid-padding) var(--space-6);
  overflow-y: auto;
}

.nav-drawer.is-open {
  transform: translateX(0);
}

.nav-drawer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-drawer__link {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-4xl);
  color: var(--color-text-primary);
  text-decoration: none;
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity   var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo),
    color     var(--duration-fast) var(--ease-out);
}

.nav-drawer.is-open .nav-drawer__link { opacity: 1; transform: translateX(0); }
.nav-drawer.is-open .nav-drawer__link:nth-child(1) { transition-delay: 60ms; }
.nav-drawer.is-open .nav-drawer__link:nth-child(2) { transition-delay: 100ms; }
.nav-drawer.is-open .nav-drawer__link:nth-child(3) { transition-delay: 140ms; }
.nav-drawer.is-open .nav-drawer__link:nth-child(4) { transition-delay: 180ms; }
.nav-drawer.is-open .nav-drawer__link:nth-child(5) { transition-delay: 220ms; }

.nav-drawer__link:hover { color: var(--color-brand-primary); }

.nav-drawer__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-default);
}

.nav-drawer__lang {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  display: flex;
  gap: var(--space-2);
}

/* Responsive breakpoint */
@media (max-width: 860px) {
  .nav-links,
  .nav-lang,
  .nav-actions .btn { display: none; }
  .nav-hamburger { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════
 * 8. ALERT / BANNER
 * Variants: info | success | warning | error
 * ═══════════════════════════════════════════════════════════════ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.alert__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert__content { flex: 1; }

.alert__title {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.alert__body { color: var(--color-text-secondary); }

.alert[data-variant="info"] {
  background: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info);
}

.alert[data-variant="success"] {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success);
}

.alert[data-variant="warning"] {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}

.alert[data-variant="error"] {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error);
}

/* ═══════════════════════════════════════════════════════════════
 * 9. ACCORDION / FAQ
 * JS toggles aria-expanded on .accordion__trigger.
 * CSS uses grid-template-rows trick for smooth height animation.
 * ═══════════════════════════════════════════════════════════════ */

.accordion {
  border-top: 1px solid var(--color-border-default);
}

.accordion__item {
  border-bottom: 1px solid var(--color-border-default);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}

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

.accordion__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition:
    background     var(--duration-base) var(--ease-out),
    border-color   var(--duration-base) var(--ease-out),
    color          var(--duration-base) var(--ease-out),
    transform      var(--duration-base) var(--ease-out-expo);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: var(--color-text-inverse);
  transform: rotate(45deg);
}

.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-out-expo);
}

.accordion__trigger[aria-expanded="true"] ~ .accordion__body {
  grid-template-rows: 1fr;
}

.accordion__body-inner {
  overflow: hidden;
}

.accordion__content {
  padding-bottom: var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: var(--measure-body);
}

/* ═══════════════════════════════════════════════════════════════
 * 10. TIMELINE
 * Used on About page for company milestones.
 * ═══════════════════════════════════════════════════════════════ */

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--color-border-default);
  padding-left: var(--space-4);
}

.timeline__item {
  position: relative;
  padding-bottom: var(--space-6);
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__dot {
  position: absolute;
  left: calc(-1 * var(--space-4) - 5px);
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border-default);
  background: var(--color-bg-base);
}

.timeline__item[data-status="done"] .timeline__dot {
  background: var(--color-success);
  border-color: var(--color-success);
}

.timeline__item[data-status="active"] .timeline__dot {
  background: var(--color-warning);
  border-color: var(--color-warning);
}

.timeline__item[data-status="planned"] .timeline__dot {
  background: var(--color-bg-base);
  border-color: var(--color-text-disabled);
}

.timeline__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
}

.timeline__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-brand-primary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.timeline__title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
  line-height: var(--leading-snug);
}

.timeline__item[data-status="planned"] .timeline__title {
  color: var(--color-text-muted);
}

.timeline__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ═══════════════════════════════════════════════════════════════
 * 11. TICKER / MARQUEE
 * Continuous horizontal scroll of spec highlights.
 * Gradient fade on edges. Pauses on hover.
 * ═══════════════════════════════════════════════════════════════ */

.ticker {
  overflow: hidden;
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  padding-block: var(--space-2);
  background: var(--color-bg-surface);
  position: relative;
  /* Gradient fade on left and right edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

.ticker__track {
  display: flex;
  gap: var(--space-8);
  width: max-content;
  animation: ticker-scroll 40s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Separator dot between items */
.ticker__item::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--color-brand-muted);
  flex-shrink: 0;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════
 * 12. TAG LIST
 * Used for scheme tags, sensor parameter tags, etc.
 * ═══════════════════════════════════════════════════════════════ */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.8em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}

.tag[data-variant="primary"] {
  color: var(--color-brand-primary);
  border-color: var(--color-brand-muted);
  background: rgba(200, 131, 10, 0.06);
}

/* ═══════════════════════════════════════════════════════════════
 * 13. STAT BLOCK
 * Used in hero and section stats. Counter animation targets
 * .stat-block__value with data-target attribute.
 * ═══════════════════════════════════════════════════════════════ */

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

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

.stat-block__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
 * 14. SECTION LABEL
 * The small-caps eyebrow labels above section headings.
 * e.g., "WHO WE SERVE", "DEPLOYMENT CONTEXTS"
 * ═══════════════════════════════════════════════════════════════ */

.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-brand-primary);
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--color-brand-primary);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
 * 15. DIVIDER
 * ═══════════════════════════════════════════════════════════════ */

.divider {
  width: 100%;
  height: 1px;
  background: var(--color-border-default);
  border: none;
  margin: 0;
}

.divider[data-variant="accent"] {
  background: linear-gradient(
    90deg,
    var(--color-brand-muted) 0%,
    transparent 100%
  );
}

/* ═══════════════════════════════════════════════════════════════
 * 16. PROSE (article body)
 * Applied to blog article content containers.
 * ═══════════════════════════════════════════════════════════════ */

.prose {
  max-width: var(--measure-body);
}

.prose h2 {
  font-size: var(--text-3xl);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose h3 {
  font-size: var(--text-2xl);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.prose p {
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

.prose ul,
.prose ol {
  margin-bottom: var(--space-3);
  padding-left: var(--space-4);
}

.prose li {
  margin-bottom: var(--space-1);
  line-height: var(--leading-relaxed);
}

.prose a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--color-brand-hover);
}

.prose table {
  margin-block: var(--space-5);
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════
 * 17. BREADCRUMB
 * ═══════════════════════════════════════════════════════════════ */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.breadcrumb__item a:hover {
  color: var(--color-brand-primary);
}

.breadcrumb__sep {
  color: var(--color-text-disabled);
}

.breadcrumb__item[aria-current="page"] {
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
 * 18. PULSE DOT
 * Animated status indicator for "live" / "operational" states.
 * ═══════════════════════════════════════════════════════════════ */

.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-success);
  box-shadow: 0 0 0 0 var(--color-success-bg);
  animation: pulse-ring 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(58, 175, 99, 0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(58, 175, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(58, 175, 99, 0); }
}

/* ═══════════════════════════════════════════════════════════════
 * FOOTER
 * ═══════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-default);
}

.footer-main {
  max-width: var(--grid-max);
  margin-inline: auto;
  padding: var(--space-section) var(--grid-padding);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-8);
  align-items: start;
}

.footer-brand__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.footer-brand__reg {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-relaxed);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.footer-nav-col__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-disabled);
  margin-bottom: var(--space-3);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--duration-fast);
  line-height: 1;
}

.footer-nav a:hover { color: var(--color-text-primary); }

.footer-inst-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.footer-inst-logos img {
  width: auto;
  opacity: 1;
  border-radius: var(--radius-sm);
  transition: opacity var(--duration-fast);
}

.footer-inst-logos img:hover { opacity: 1; }

.footer-bar {
  border-top: 1px solid var(--color-border-default);
}

.footer-bar-inner {
  max-width: var(--grid-max);
  margin-inline: auto;
  padding: var(--space-3) var(--grid-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.footer-bar__copy {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  letter-spacing: var(--tracking-wide);
}

.footer-bar__copy a {
  color: var(--color-text-disabled);
  text-decoration: none;
  transition: color var(--duration-fast);
}

.footer-bar__copy a:hover { color: var(--color-text-muted); }

.footer-bar__sep { color: var(--color-border-default); }

.footer-bar__address {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-disabled);
  letter-spacing: var(--tracking-wide);
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 600px) {
  .footer-main {
    grid-template-columns: 1fr;
  }
  .footer-bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * CRITICAL OVERRIDES — applied after all component rules
 * These fix layout issues caused by component injection.
 * ═══════════════════════════════════════════════════════════════ */

/* Fix: site-header needs display:flex so injected .nav-inner fills it */
.site-header {
  display: flex;
  align-items: center;
  overflow: visible; /* allow .nav-drawer to escape header bounds */
}

/* Fix: .nav-inner must fill the full header width */
.nav-inner {
  width: 100%;
  flex-shrink: 0;
}

/* Fix: .nav-drawer is inside .site-header (position:fixed) but needs
   to cover the full viewport. Since it's a child of a fixed ancestor,
   position:fixed on the drawer is relative to the viewport — correct.
   But we must ensure it starts off-screen and hidden. */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-nav) - 1);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
}

.nav-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

/* Fix: footer — target both class and ID since component loader
   injects into <footer id="site-footer"> without adding the class */
#site-footer {
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-default);
}

#site-footer .footer-main {
  max-width: var(--grid-max);
  margin-inline: auto;
  padding: var(--space-section) var(--grid-padding);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-8);
  align-items: start;
}

#site-footer .footer-bar {
  border-top: 1px solid var(--color-border-default);
}

#site-footer .footer-bar-inner {
  max-width: var(--grid-max);
  margin-inline: auto;
  padding: var(--space-3) var(--grid-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  #site-footer .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 600px) {
  #site-footer .footer-main {
    grid-template-columns: 1fr;
  }
  #site-footer .footer-bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Fix: footer contact label spacing (replaces removed inline style) */
.footer-nav-col__label--spaced {
  margin-top: var(--space-4);
}

/* ═══════════════════════════════════════════════════════════════
 * LENIS + SCROLL PERFORMANCE OVERRIDES
 * Must come last — these override any earlier scroll-behavior rules.
 * ═══════════════════════════════════════════════════════════════ */

/* Belt-and-suspenders: ensure no CSS re-enables native smooth scroll.
   Lenis owns smooth scrolling. Native smooth-scroll on top of Lenis
   causes double-easing (browser + Lenis both ease the same motion = lag). */
html {
  scroll-behavior: auto !important;
}

/* Lenis wrapper class — added by Lenis v1+ to <html> when active */
html.lenis {
  height: auto; /* Lenis needs natural document height, not clamped */
}

/* ═══════════════════════════════════════════════════════════════
 * CSS TOKEN FALLBACKS
 * Tokens defined in vk-design-system.css but missing from tokens.css.
 * These ensure nav-inner and layout work on pages that don't load the
 * design system CSS.
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* --container-max used in nav.css but only defined in vk-design-system.css */
  --container-max: var(--grid-max, 1280px);
}

/* ═══════════════════════════════════════════════════════════════
 * BLACK SECTION PREVENTION
 * Sections/divs with [data-reveal] start at opacity:0 via GSAP.
 * If ScrollTrigger fires late (e.g. on slow connections), they stay
 * black for too long. This CSS sets a safe minimum visible state
 * for large containers so the page never looks broken.
 * Individual element reveals (cards, headings) are unaffected.
 * ═══════════════════════════════════════════════════════════════ */

/* Sections are structural — never invisible. Only child elements reveal. */
section[data-reveal],
.section[data-reveal],
main[data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

/* Ensure all sections inherit the page background so transparent sections
   never show as black voids against the body background. */
section,
.section {
  background-color: inherit;
}

/* ═══════════════════════════════════════════════════════════════
 * FOOTER ABSOLUTE POSITIONING RESET
 * Legacy pages used position:absolute on footers for "short page"
 * pinning. This breaks in the component architecture where footer
 * is always in normal document flow.
 * ═══════════════════════════════════════════════════════════════ */
footer,
.site-footer,
#site-footer {
  position: relative !important; /* Override any legacy position:absolute */
  bottom: auto !important;
  left:   auto !important;
  right:  auto !important;
  width:  auto !important;
}