/* -------------------------------------------------- */
/* Alacity — base styles                               */
/* -------------------------------------------------- */

:root {
  --color-primary: #c000c0;
  --color-primary-light: #e04de0;
  --color-primary-dark: #8a0090;

  --color-bg: #08080c;
  --color-bg-alt: #0e0e15;
  --color-surface: #14141d;
  --color-surface-2: #1b1b26;
  --color-border: #2a2a38;

  --color-text: #f4f2f7;
  --color-text-muted: #a8a5b8;
  --color-text-faint: #6f6c80;

  --font-heading: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --container-w: 1140px;

  --shadow-glow: 0 0 40px rgba(192, 0, 192, 0.35);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

html.is-loading,
html.is-loading body {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; color: var(--color-text-muted); }

a { color: inherit; text-decoration: none; }

code {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------- */
/* Preloader                                           */
/* -------------------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.preloader__logo {
  /* box-shadow follows the element's (invisible) bounding box, which reads
     as a glowing rounded square around the transparent logo now that it has
     no background plate to justify that shape. drop-shadow follows the
     actual alpha silhouette of the mark instead, so the glow hugs the "A".
     It's a three-layer glow (tight+bright, mid, wide+soft) rather than the
     hero logo's two — this is the very first thing a visitor sees, small
     against a mostly-black full-viewport screen, so it needs enough presence
     to actually register at real page scale, not just in a zoomed-in crop. */
  filter:
    drop-shadow(0 0 14px rgba(192, 0, 192, 0.9))
    drop-shadow(0 0 45px rgba(192, 0, 192, 0.6))
    drop-shadow(0 0 90px rgba(192, 0, 192, 0.4));
  animation: preloaderPulse 1.6s ease-in-out infinite;
}

.preloader__word {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.35em;
  color: var(--color-text-muted);
  padding-left: 0.35em; /* optically re-center the tracked-out text */
  animation: preloaderFade 1.6s ease-in-out infinite;
}

.preloader__bar {
  width: 140px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-surface-2);
  overflow: hidden;
}
.preloader__bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  animation: preloaderBar 1.1s ease-in-out infinite;
}

@keyframes preloaderPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.75; }
}
@keyframes preloaderFade {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@keyframes preloaderBar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(340%); }
}

/* -------------------------------------------------- */
/* Background decoration                              */
/* -------------------------------------------------- */

.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.bg-glow {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  pointer-events: none;
}
.bg-glow--one {
  width: 520px;
  height: 520px;
  top: -180px;
  left: -120px;
  background: var(--color-primary);
}
.bg-glow--two {
  width: 460px;
  height: 460px;
  top: 260px;
  right: -160px;
  background: #5a0fb8;
  opacity: 0.25;
}

/* -------------------------------------------------- */
/* Buttons                                             */
/* -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--sm { padding: 9px 16px; font-size: 0.85rem; }
.btn--lg { padding: 15px 30px; font-size: 1rem; }

.btn--primary {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: #fff;
  box-shadow: 0 8px 24px rgba(192, 0, 192, 0.35);
}
.btn--primary:hover {
  box-shadow: 0 0 24px rgba(192, 0, 192, 0.5), 0 0 70px rgba(192, 0, 192, 0.3);
  transform: translateY(-1px);
}

.btn--ghost {
  background: rgba(255,255,255,0.04);
  border-color: var(--color-border);
  color: var(--color-text);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: var(--color-primary);
  background: rgba(192, 0, 192, 0.08);
  box-shadow: 0 0 24px rgba(192, 0, 192, 0.5), 0 0 70px rgba(192, 0, 192, 0.3);
}

.btn--copy {
  padding: 10px 16px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
}
.btn--copy:hover { background: var(--color-primary-light); }
.btn--copy.is-copied { background: #1fa863; }

/* -------------------------------------------------- */
/* Header                                              */
/* -------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 8, 12, 0.7);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  background: rgba(8, 8, 12, 0.9);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  box-shadow: 0 0 8px rgba(192, 0, 192, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: left 0.35s cubic-bezier(0.65, 0, 0.35, 1), width 0.35s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}

/* Same sliding mechanic as .nav-indicator, but grey and hover-driven rather
   than magenta and scroll-driven — a quick preview under whichever nav item
   the pointer/keyboard focus is on, independent of the current section. */
.nav-hover-indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text-muted);
  opacity: 0;
  pointer-events: none;
  transition: left 0.25s cubic-bezier(0.65, 0, 0.35, 1), width 0.25s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.15s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo { border-radius: 8px; }
.brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav a,
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color 0.15s ease;
  position: relative;
}
.nav a:hover,
.nav a.is-active,
.nav-link:hover,
.nav-link.is-active { color: var(--color-text); }

/* Reset — .nav-dropdown-trigger is an <a> (it navigates to /about# on
   desktop; see initNavDropdown in js/main.js for why it's still a toggle on
   mobile), styled to read identically to the plain <a> nav items above via
   the shared .nav-link rules. The background/border/line-height resets are
   leftover insurance from when this was a <button> — harmless on an anchor,
   which doesn't need them, but kept in case it ever changes back. */
.nav-dropdown-trigger {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.nav-icon {
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.nav a:hover .nav-icon,
.nav a.is-active .nav-icon,
.nav-link:hover .nav-icon,
.nav-link.is-active .nav-icon { opacity: 1; }

.nav-chevron {
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform 0.2s ease;
}
.nav-item:hover .nav-chevron,
.nav-item.is-open .nav-chevron { transform: rotate(180deg); }

/* Dropdown ("About" > Specs/Features/Commands). The outer .nav-dropdown-menu
   just handles position/visibility and — via padding-top — an invisible
   bridge so the pointer can travel from the trigger down into the panel
   without a gap that would drop :hover along the way. The inner
   .nav-dropdown-panel is what actually looks like a menu (background,
   border, slide-in transform), kept separate so that bridge stays
   transparent. */
.nav-item {
  position: relative;
  /* Flex (not the default block) so it tightly wraps the trigger button with
     no inline-level line-box leading — a block container around a single
     inline-flex child picks up extra height from its own line-height,
     nudging the button off-center relative to its plain-<a> siblings.
     column, not row: on desktop the dropdown menu is position:absolute so
     it doesn't matter, but on mobile (see the 820px query) it becomes
     position:static as a second in-flow child — row would put it beside
     the button instead of below it. align-items left at its stretch
     default (not center) so the mobile accordion's dropdown menu stretches
     to the full row width like its siblings, rather than shrinking to its
     own content width and centering — the button doesn't need an explicit
     value here since it already sizes itself. */
  display: flex;
  flex-direction: column;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 12px;
  min-width: 190px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 50;
}
.nav-item:hover .nav-dropdown-menu,
.nav-item.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-dropdown-panel {
  padding: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(-6px);
  transition: transform 0.18s ease;
}
.nav-item:hover .nav-dropdown-panel,
.nav-item.is-open .nav-dropdown-panel {
  transform: translateY(0);
}

.nav-dropdown-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-dropdown-panel a:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}
.nav-dropdown-panel a .nav-icon { opacity: 0.75; }
.nav-dropdown-panel a:hover .nav-icon { opacity: 1; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 16px;
  margin: 0 auto;
  background: var(--color-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------- */
/* Hero                                                */
/* -------------------------------------------------- */

.hero {
  padding: 40px 0 80px;
  text-align: center;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 28px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-faint);
}
.dot--live {
  background: #29d67c;
  box-shadow: 0 0 0 0 rgba(41, 214, 124, 0.6);
  animation: pulse 2s infinite;
}
.dot--offline {
  background: #e8455c;
}
.dot--unknown {
  background: var(--color-text-faint);
  animation: pulse-faint 1.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(41, 214, 124, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(41, 214, 124, 0); }
  100% { box-shadow: 0 0 0 0 rgba(41, 214, 124, 0); }
}
@keyframes pulse-faint {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.hero-logo {
  /* See .preloader__logo for why this is drop-shadow, layered, and stronger
     than the single 40px/0.35 pass would suggest. */
  filter: drop-shadow(0 0 10px rgba(192, 0, 192, 0.8)) drop-shadow(0 0 40px rgba(192, 0, 192, 0.55));
  margin-bottom: 28px;
}

.hero-title {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  margin-bottom: 20px;
  max-width: 16ch;
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary) 60%, #6a1fd0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  max-width: 560px;
  font-size: 1.08rem;
  margin-bottom: 36px;
}

.ip-box {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.ip-box--static {
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  width: fit-content;
  /* Lines up with the step titles/text, not the numbered circles — matches
     .steps__index width (32px) + .steps li gap (16px). */
  margin-left: 48px;
}
.ip-box__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
}
.ip-box__value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-primary-light);
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Staggered entrance — timed to settle as the preloader curtain lifts */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-badge,
.hero-logo,
.hero-title,
.hero-subtitle,
.hero .ip-box,
.hero .hero-ctas {
  animation: fadeUpIn 0.7s cubic-bezier(0.16, 0.8, 0.3, 1) both;
}
.hero-badge { animation-delay: 0.15s; }
.hero-logo { animation-delay: 0.25s; }
.hero-title { animation-delay: 0.35s; }
.hero-subtitle { animation-delay: 0.45s; }
.hero .ip-box { animation-delay: 0.55s; }
.hero .hero-ctas { animation-delay: 0.65s; }

/* -------------------------------------------------- */
/* Stat card (shared by the Specs and Activity grids)  */
/* -------------------------------------------------- */

.stat-card { display: flex; flex-direction: column; gap: 6px; }
.stat-card__value {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary-light);
}
.stat-card__detail {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.stat-card__label {
  font-size: 0.85rem;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* -------------------------------------------------- */
/* Sections                                            */
/* -------------------------------------------------- */

.section { padding: 96px 0; }
.section--alt { background: var(--color-bg-alt); }

.section-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-light);
  margin-bottom: 12px;
}

/* Activity chart */
.activity-source {
  margin: 0;
}
.activity-source a {
  color: var(--color-primary-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.activity-source a:hover { color: var(--color-text); }

.activity-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.activity-stats .stat-card {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  align-items: center;
  justify-content: center;
}

.chart-card {
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.chart-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1;
}
.activity-chart {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-grid-line {
  stroke: var(--color-border);
  stroke-width: 1;
}
.chart-axis-label {
  fill: var(--color-text-faint);
  font-family: var(--font-body);
  font-size: 11px;
}
.chart-area { fill: var(--color-primary-light); opacity: 0.1; }
.chart-line {
  fill: none;
  stroke: var(--color-primary-light);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-enddot { fill: var(--color-primary-light); }
.chart-enddot-ring { fill: var(--color-surface); }
.chart-end-label {
  fill: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
}
.chart-crosshair-line {
  stroke: var(--color-text-faint);
  stroke-width: 1;
  opacity: 0.5;
}
.chart-crosshair-dot {
  fill: var(--color-primary-light);
  stroke: var(--color-surface);
  stroke-width: 2;
}

.chart-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--color-text-faint);
  font-size: 0.9rem;
  text-align: center;
  pointer-events: none;
}

.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -120%);
}
.chart-tooltip__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
}
.chart-tooltip__time {
  font-size: 0.78rem;
  color: var(--color-text-faint);
}

.chart-status[hidden],
.chart-tooltip[hidden] { display: none; }

/* Specs */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.specs-grid .stat-card {
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.specs-grid .stat-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 24px rgba(192, 0, 192, 0.5), 0 0 70px rgba(192, 0, 192, 0.3);
}

.media-placeholder {
  display: block;
  width: 100%;
  /* The img's width/height HTML attributes map to a low-priority CSS height
     declaration of their own (browsers do this so layout space is reserved
     before the image loads) — it's low priority, but nothing here was
     overriding it, so it was winning over aspect-ratio and forcing a fixed
     height (previously 600px, near-invisible at that size; the real
     photo's 1200px made it obvious) regardless of the element's actual
     rendered width. Explicit auto beats it and lets width + aspect-ratio
     drive the height correctly instead. */
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  object-fit: cover;
}

/* Features */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  padding: 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow: 0 0 24px rgba(192, 0, 192, 0.5), 0 0 70px rgba(192, 0, 192, 0.3);
}
.feature-card__icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(192, 0, 192, 0.12);
  color: var(--color-primary-light);
  margin-bottom: 18px;
}
.feature-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.feature-card p { margin: 0; font-size: 0.92rem; }

/* Commands */
.command-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.command-card {
  padding: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.command-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 24px rgba(192, 0, 192, 0.5), 0 0 70px rgba(192, 0, 192, 0.3);
}
.command-card code {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(192, 0, 192, 0.12);
  color: var(--color-primary-light);
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.command-card p { margin: 0; font-size: 0.9rem; }

/* Connect */
.connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.connect-copy h2 { font-size: 2rem; }

.steps {
  list-style: none;
  margin: 28px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
/* display: flex above silently beats the browser's own [hidden] { display:
   none } rule (author styles win regardless of the UA rule's specificity),
   so a hidden step would still render — this restores it in case `hidden`
   ever gets used on a step again. */
.steps li[hidden] {
  display: none;
}
.steps__index {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: 0.9rem;
}
.steps h3 { font-size: 1rem; margin-bottom: 4px; }
.steps p { margin: 0; font-size: 0.9rem; }

/* FAQ */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item:hover,
.faq-item[open] {
  border-color: var(--color-primary);
  box-shadow: 0 0 24px rgba(192, 0, 192, 0.5), 0 0 70px rgba(192, 0, 192, 0.3);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-heading);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--color-primary-light);
  margin-left: 12px;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }

/* Answer reveal: details/summary hides non-summary children via a
   display:none toggle that can't be transitioned, so this overrides that
   with an always-present grid row that animates between a 0fr and 1fr
   track — a fraction unit large enough to size to the content's natural
   height, small enough to collapse to nothing — rather than the usual
   max-height trick, since that requires guessing a max that's never
   exactly right for wrapped, variable-length answers. overflow: hidden
   on the container clips the answer to whatever height the row is
   mid-transition to. */
.faq-item__content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}
.faq-item[open] .faq-item__content {
  grid-template-rows: 1fr;
}
.faq-item__content > p {
  min-height: 0;
  margin: 14px 0 0;
  font-size: 0.92rem;
}

/* CTA banner */
.cta-banner {
  padding: 90px 0;
  text-align: center;
  background: linear-gradient(135deg, rgba(192,0,192,0.16), rgba(90,15,184,0.1));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.cta-banner h2 { font-size: 2.2rem; }
.cta-banner p { margin-bottom: 32px; }
.cta-banner__inner { display: flex; flex-direction: column; align-items: center; }

/* -------------------------------------------------- */
/* Footer                                              */
/* -------------------------------------------------- */

.site-footer {
  padding: 48px 0 28px;
  background: var(--color-bg-alt);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-border);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
}

.footer-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.footer-nav a:hover { color: var(--color-text); }

.footer-social {
  display: flex;
  gap: 16px;
}
.footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease;
}
.footer-social a:hover {
  color: var(--color-primary-light);
  border-color: var(--color-primary);
  box-shadow: 0 0 24px rgba(192, 0, 192, 0.5), 0 0 70px rgba(192, 0, 192, 0.3);
}

.footer-legal {
  padding-top: 20px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--color-text-faint);
}
.footer-legal p { margin: 0; }

/* -------------------------------------------------- */
/* Toast                                               */
/* -------------------------------------------------- */

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 20px);
  padding: 12px 22px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.88rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* -------------------------------------------------- */
/* Scroll reveal                                       */
/* -------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------- */
/* Responsive                                          */
/* -------------------------------------------------- */

/* The full icon+label nav doesn't fit alongside header-actions below this
   width (confirmed by measurement — it overflows the viewport otherwise),
   so the hamburger takes over here. Kept as its own breakpoint, separate
   from the 900px one below, since it's driven purely by how many items are
   in <nav> — currently 5 top-level (Activity, Shop, About, Connect, FAQ) —
   not by anything to do with the grid layouts; re-measure and adjust if the
   nav item count ever changes. Must stay in sync with NAV_SPY_BREAKPOINT in
   js/main.js. */
@media (max-width: 820px) {
  .nav {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav.is-open {
    max-height: min(480px, calc(100vh - 72px));
    overflow-y: auto;
  }
  .nav a,
  .nav-link {
    width: 100%;
    padding: 14px 24px;
    border-top: 1px solid var(--color-border);
  }
  .nav-item { width: 100%; }

  /* The floating dropdown card becomes an inline accordion here — same
     .is-open trigger, but max-height instead of opacity/position:absolute,
     since there's no horizontal row left to float a panel off of. */
  .nav-dropdown-menu {
    position: static;
    left: auto;
    transform: none; /* undo the desktop centering translateX(-50%) — position:static ignores `left`, but not `transform` */
    padding-top: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav-item.is-open .nav-dropdown-menu { max-height: 220px; }
  .nav-dropdown-panel {
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    transform: none;
  }
  .nav-dropdown-panel a {
    padding: 12px 24px 12px 48px;
    border-radius: 0;
    border-top: 1px solid var(--color-border);
  }

  .nav-toggle { display: flex; }
  .nav-indicator,
  .nav-hover-indicator { display: none; }
  .header-actions .btn--sm { display: none; }
}

@media (max-width: 900px) {
  .connect-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .connect-media { order: -1; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .command-grid { grid-template-columns: repeat(2, 1fr); }
  .activity-stats,
  .specs-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .feature-grid,
  .command-grid { grid-template-columns: 1fr; }
  .activity-stats,
  .specs-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .chart-card { padding: 20px; }
  .chart-wrap { aspect-ratio: 4 / 3; }

  .hero { padding: 32px 0 56px; }
  .section { padding: 64px 0; }
  .cta-banner { padding: 64px 0; }
  .section-head { margin-bottom: 36px; }
}

@media (max-width: 480px) {
  .container { padding: 0 20px; }

  .hero { padding: 24px 0 40px; }
  .hero-logo { width: 76px; height: 76px; margin-bottom: 22px; }
  .hero-subtitle { font-size: 1rem; }

  .section { padding: 48px 0; }
  .cta-banner { padding: 48px 0; }
  .cta-banner h2 { font-size: 1.7rem; }

  .activity-stats,
  .specs-grid { grid-template-columns: 1fr; gap: 14px; }
  .stat-card { flex-direction: row; align-items: center; justify-content: space-between; }
  .activity-stats .stat-card,
  .specs-grid .stat-card { flex-direction: row; justify-content: space-between; text-align: left; padding: 16px 18px; }
  /* Hardware cards carry a long descriptive detail line — row layout doesn't suit that. */
  .specs-grid .stat-card:has(.stat-card__detail) {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 2px;
  }

  .feature-card,
  .command-card { padding: 20px; }

  .chart-card { padding: 16px; }
  .chart-wrap { aspect-ratio: 1 / 1; }

  .btn--lg { padding: 14px 24px; font-size: 0.95rem; }
  .hero-ctas .btn--lg,
  .cta-banner .btn--lg { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}