/* ===========================================================================
   Elyndor Software — Premium AI Software
   Self-contained design system. Tokens match command-centers/software.css
   so this page feels native to the rest of the site.

   Color tokens (must stay in sync with command-centers/software.css):
     --accent (#ff7eb9), --accent-2 (#f6c97a), --accent-glow
     --bg-0..2, --bg-glass, --bg-glass-strong
     --border-glass, --border-glass-strong
     --text-0..3
   =========================================================================== */

:root {
  /* Brand colors */
  --accent: #ff7eb9;
  --accent-glow: rgba(255, 126, 185, 0.35);
  --accent-2: #f6c97a;
  --accent-2-glow: rgba(246, 201, 122, 0.30);
  --cool: #38bdf8;
  --cool-glow: rgba(56, 189, 248, 0.25);

  /* Backgrounds */
  --bg-0: #08080c;
  --bg-1: #0d0d10;
  --bg-2: #14141a;
  --bg-glass: rgba(20, 20, 26, 0.5);
  --bg-glass-strong: rgba(13, 13, 16, 0.82);

  /* Borders */
  --border-glass: rgba(255, 255, 255, 0.07);
  --border-glass-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text-0: #fafaf8;
  --text-1: #e6e6e0;
  --text-2: #9a9a90;
  --text-3: #5e5e58;

  /* Store-specific accents */
  --store-amber: #f5a524;
  --store-amber-glow: rgba(245, 165, 36, 0.32);
  --store-amber-2: #f6c97a;
  --store-cool: #38bdf8;
  --store-radius-sm: 8px;
  --store-radius-md: 14px;
  --store-radius-lg: 20px;
  --store-radius-xl: 28px;
  --store-shadow-sm: 0 4px 14px rgba(0,0,0,0.30);
  --store-shadow-md: 0 10px 32px rgba(0,0,0,0.40);
  --store-shadow-lg: 0 24px 60px rgba(0,0,0,0.50);
}

/* ===========================================================================
   HERO (storefront variant — adds search input)
   =========================================================================== */
.hero-storefront {
  padding: 140px 24px 60px;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}
.hero-storefront .hero-lede {
  max-width: 620px;
  margin: 16px auto 32px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-1);
}

.hero-emblem {
  display: block;
  max-width: min(960px, 95vw);
  width: 100%;
  height: auto;
  margin: 28px auto 20px;
  user-select: none;
  /* Subtle drop into the page — feels like a logo, not a stock photo */
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 24px rgba(246, 201, 122, 0.06));
}

/* Anti-regression: command-centers/software.css hides the system
   cursor on desktop in favor of a custom cursor that needs JS to
   render. We don't ship that JS, so restore the system cursor on
   every element. (command-centers ships its own custom-cursor.js —
   see that page if you want the fancy effect here too.) */
body,
.hero-storefront,
a,
button,
.sw-card,
.sw-card-cta,
.hero-search-input,
.hero-search-clear,
.filter-chip,
.filter-sort-select,
.filter-pill,
.faq-question,
.faq-item,
.cart,
.cart-close,
.cart-row-remove,
.cart-checkout,
input,
select,
details,
summary,
.hero-emblem,
.trust-card {
  cursor: auto !important;
}
a,
button,
.sw-card-cta,
.cart-checkout,
.sw-card,
.faq-question {
  cursor: pointer !important;
}

/* ===========================================================================
   NAV — active page highlight (anti-regression override)
   ===========================================================================
   The base .nav-links styles are inherited from command-centers/software.css.
   We add a clean active-state for the current page in our nav. */
.nav-links a.is-active {
  color: var(--text-0);
  font-weight: 600;
}
.nav-links a.is-active::after {
  height: 2px;
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2-glow);
}
.nav-links a[aria-current="page"] {
  color: var(--text-0);
  font-weight: 600;
}

.hero-search {
  position: relative;
  max-width: 560px;
  margin: 36px auto 32px;
  display: flex;
  align-items: center;
}
.hero-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  pointer-events: none;
  display: flex;
}
.hero-search-input {
  width: 100%;
  padding: 18px 56px 18px 56px;
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-glass-strong);
  border-radius: 999px;
  color: var(--text-0);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.005em;
  outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero-search-input::placeholder {
  color: var(--text-3);
  letter-spacing: 0;
}
.hero-search-input:hover {
  border-color: rgba(255,255,255,0.20);
}
.hero-search-input:focus {
  border-color: var(--accent-2);
  background: var(--bg-2);
  box-shadow: 0 0 0 4px var(--store-amber-glow), 0 8px 28px rgba(0,0,0,0.4);
}
.hero-search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border-glass-strong);
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 160ms ease;
}
.hero-search-clear:hover {
  background: rgba(255,255,255,0.16);
  color: var(--text-0);
}

/* ===========================================================================
   FILTER BAR
   =========================================================================== */
.filter-bar {
  position: static;
  z-index: 50;
  background: linear-gradient(180deg, rgba(8,8,12,0.96) 0%, rgba(8,8,12,0.92) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-glass);
  border-radius: var(--store-radius-lg);
  padding: 14px 20px;
  margin: 0 0 32px;
  box-shadow: var(--store-shadow-sm);
}
.filter-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.filter-bar-row + .filter-bar-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-glass);
}

.filter-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass-strong);
  color: var(--text-1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 160ms ease;
}
.filter-chip:hover {
  border-color: rgba(255,255,255,0.20);
  color: var(--text-0);
  background: rgba(255,255,255,0.06);
}
.filter-chip.is-active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #1a1a1a;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 14px var(--accent-glow);
}

.filter-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-sort-label {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.filter-sort-select {
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass-strong);
  border-radius: var(--store-radius-sm);
  color: var(--text-0);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  transition: border-color 160ms ease;
}
.filter-sort-select:hover {
  border-color: rgba(255,255,255,0.20);
}
.filter-sort-select:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px var(--store-amber-glow);
}
.filter-sort-select option {
  background: var(--bg-1);
  color: var(--text-0);
}

.filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-height: 24px;
}
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 12px;
  border-radius: 999px;
  background: rgba(245, 165, 36, 0.12);
  border: 1px solid rgba(245, 165, 36, 0.40);
  color: var(--store-amber-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.filter-pill-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  opacity: 0.7;
  transition: opacity 120ms ease, background 120ms ease;
}
.filter-pill-remove:hover {
  opacity: 1;
  background: rgba(255,255,255,0.10);
}

.filter-count {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ===========================================================================
   PRODUCT GRID (software)
   =========================================================================== */
.section-storefront {
  padding-top: 32px;
}

.product-grid-storefront {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 8px 4px 24px;
}

/* Software card — distinct from the visual style cards */
.sw-card {
  position: relative;
  background: var(--bg-glass-strong);
  border: 1px solid var(--border-glass-strong);
  border-radius: var(--store-radius-lg);
  overflow: hidden;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  --card-color: var(--store-amber);
}
/* Card link wrapper — wraps .sw-card in an <a> so the whole card is
   clickable to the product detail page. */
a.sw-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--store-radius-lg);
}
a.sw-card-link:hover .sw-card { transform: translateY(-2px); }
.sw-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at top left,
    color-mix(in srgb, var(--card-color) 18%, transparent) 0%,
    transparent 60%
  );
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 240ms ease;
}
.sw-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.22);
  box-shadow: var(--store-shadow-md);
}
.sw-card:hover::before {
  opacity: 1;
}
.sw-card.is-unavailable {
  opacity: 0.6;
  filter: grayscale(0.3);
}

.sw-card-featured-flag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 12px var(--accent-glow);
}
.sw-card-featured-flag[data-type="coming-soon"] {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-glass-strong);
  color: var(--text-2);
  box-shadow: none;
}
.sw-card-featured-flag[data-type="popular"] {
  background: linear-gradient(135deg, var(--store-amber) 0%, var(--store-amber-2) 100%);
  color: #1a1a1a;
  box-shadow: 0 4px 12px var(--store-amber-glow);
}
.sw-card-featured-flag[data-type="new"] {
  background: rgba(56,189,248,0.18);
  border: 1px solid rgba(56,189,248,0.40);
  color: var(--store-cool);
}

.sw-card-preview {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sw-card-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--card-color) 20%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.sw-card-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sw-card-preview-icon {
  font-size: 56px;
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--card-color) 60%, transparent));
  position: relative;
  z-index: 1;
}
.sw-card-tier {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border-glass-strong);
  color: var(--text-0);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sw-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  position: relative;
  z-index: 1;
}
.sw-card-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-0);
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
}
.sw-card-name .swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--card-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--card-color) 60%, transparent);
  flex-shrink: 0;
}
.sw-card-subtitle {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 500;
}
.sw-card-tagline {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-1);
  margin: 0;
}
.sw-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.sw-card-feature-chip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-glass);
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.sw-card-feature-chip.sw-card-feature-soft {
  background: rgba(245, 165, 36, 0.10);
  border-color: rgba(245, 165, 36, 0.25);
  color: var(--store-amber-2);
}
.sw-card-format {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 4px;
}
.sw-card-format-value {
  color: var(--text-1);
  font-weight: 500;
}

.sw-card-foot {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(0,0,0,0.18);
  position: relative;
  z-index: 1;
}
.sw-card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sw-card-price-label {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sw-card-price-amount {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-0);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.sw-card-price-amount .strike {
  font-size: 14px;
  color: var(--text-3);
  text-decoration: line-through;
  font-weight: 500;
}
.sw-card-price-amount.is-coming {
  font-size: 14px;
  color: var(--text-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
}
.sw-card-cta {
  padding: 10px 18px;
  border-radius: var(--store-radius-md);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-glass-strong);
  color: var(--text-0);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sw-card-cta:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}
.sw-card-cta.is-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border-color: transparent;
  color: #1a1a1a;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.sw-card-cta.is-primary:hover {
  box-shadow: 0 8px 24px var(--accent-glow);
  transform: translateY(-1px);
}
.sw-card-cta.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sw-card-cta.is-disabled:hover {
  transform: none;
}

/* ===========================================================================
   EMPTY STATE
   =========================================================================== */
.empty-state {
  text-align: center;
  padding: 80px 24px;
  background: var(--bg-glass);
  border: 1px dashed var(--border-glass-strong);
  border-radius: var(--store-radius-lg);
  max-width: 520px;
  margin: 32px auto;
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: var(--text-2);
}
.empty-state h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--text-0);
}
.empty-state p {
  font-size: 14px;
  color: var(--text-2);
  margin: 0 0 20px;
}

/* ===========================================================================
   TRUST SECTION
   =========================================================================== */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 12px;
}
.trust-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--store-radius-md);
  padding: 22px;
  transition: border-color 200ms ease, background 200ms ease;
}
.trust-card:hover {
  border-color: rgba(255,255,255,0.18);
  background: var(--bg-glass-strong);
}
.trust-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.trust-card h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-0);
  margin: 0 0 6px;
}
.trust-card p {
  font-size: 13px;
  color: var(--text-2);
  margin: 0;
  line-height: 1.5;
}

/* ===========================================================================
   FAQ ACCORDION
   =========================================================================== */
.section-faq .section-head {
  margin-bottom: 28px;
}
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--store-radius-md);
  overflow: hidden;
  transition: border-color 200ms ease;
}
.faq-item[open] {
  border-color: rgba(255,255,255,0.18);
  background: var(--bg-glass-strong);
}
.faq-question {
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-0);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  user-select: none;
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question::after {
  content: "+";
  font-size: 22px;
  font-weight: 300;
  color: var(--text-2);
  transition: transform 200ms ease, color 200ms ease;
  width: 24px;
  text-align: center;
}
.faq-item[open] .faq-question::after {
  content: "−";
  color: var(--accent-2);
}
.faq-answer {
  padding: 0 22px 20px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}
.faq-answer p {
  margin: 0;
}
.faq-answer a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===========================================================================
   FOOTER — minimal, professional
   =========================================================================== */
.footer {
  border-top: 1px solid var(--border-glass);
  margin-top: 96px;
  padding: 56px 32px 32px;
  background: rgba(8, 8, 12, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}

/* Brand block */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  width: fit-content;
}
.footer-logo-img {
  height: 32px;
  width: auto;
  display: block;
}
.footer-blurb {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 280px;
  margin: 0;
}

/* Nav columns */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-col-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
  font-weight: 600;
}
.footer-col a {
  font-size: 13px;
  color: var(--text-1);
  text-decoration: none;
  transition: color 160ms ease;
  cursor: pointer !important;
}
.footer-col a:hover {
  color: var(--accent-2);
}

/* Thin divider above the meta row */
.footer-rule {
  max-width: 1200px;
  margin: 32px auto 0;
  height: 1px;
  background: var(--border-glass);
}

/* Meta row */
.footer-meta {
  max-width: 1200px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.footer-copy,
.footer-locale {
  font-weight: 500;
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 720px) {
  .hero-storefront {
    padding: 100px 20px 40px;
  }
  .hero-storefront h1 {
    font-size: 38px;
    line-height: 1.1;
  }
  .hero-storefront .hero-lede {
    font-size: 16px;
  }
  .hero-search {
    margin: 24px auto 24px;
  }
  .hero-search-input {
    font-size: 15px;
    padding: 16px 52px 16px 52px;
  }
  .hero-stats {
    gap: 12px;
  }
  .hero-stat {
    min-width: 110px;
  }
  .hero-stat-num {
    font-size: 22px;
  }

  .filter-bar {
    top: 64px;
    padding: 12px 14px;
    border-radius: var(--store-radius-md);
  }
  .filter-bar-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .filter-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .filter-chip {
    flex-shrink: 0;
  }
  .filter-sort {
    justify-content: space-between;
  }

  .product-grid-storefront {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .sw-card-name {
    font-size: 20px;
  }
  .sw-card-price-amount {
    font-size: 22px;
  }
  .sw-card-foot {
    flex-direction: column;
    align-items: stretch;
  }
  .sw-card-cta {
    justify-content: center;
  }

  /* ===========================================================================
     RESPONSIVE — mobile footer (skinny + slick, columns side-by-side)
     =========================================================================== */
  @media (max-width: 720px) {
    .footer {
      margin-top: 56px;
      padding: 32px 20px 20px;
    }
    .footer-inner {
      grid-template-columns: 1fr;
      gap: 18px;
    }
    /* Brand block: logo + blurb side-by-side on mobile (skinny) */
    .footer-brand {
      flex-direction: row;
      align-items: center;
      gap: 12px;
    }
    .footer-blurb {
      font-size: 11px;
      line-height: 1.4;
      max-width: none;
      margin: 0;
    }

    /* Nav columns: keep 3-up but compress vertical */
    .footer-nav {
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .footer-col {
      gap: 6px;
    }
    .footer-col-title {
      font-size: 9px;
      letter-spacing: 0.14em;
      margin-bottom: 2px;
    }
    .footer-col a {
      font-size: 11px;
      line-height: 1.5;
    }

    /* Meta row */
    .footer-meta {
      flex-direction: row;
      justify-content: space-between;
      gap: 6px;
      text-align: left;
      margin-top: 12px;
      font-size: 9px;
      letter-spacing: 0.06em;
    }
    .footer-rule {
      margin: 16px auto 0;
    }
  }
}



/* ===========================================================================
   ACCESSIBILITY
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sw-card,
  .filter-chip,
  .sw-card-cta,
  .hero-search-input {
    transition: none;
  }
  .sw-card:hover {
    transform: none;
  }
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
details:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}
/* ===========================================================================
   CART, TOAST — inherited patterns from command-centers/software.css
   =========================================================================== */
.elyndor-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(20, 20, 28, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 183, 90, 0.35);
  color: var(--text-0);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(232, 183, 90, 0.15);
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}
.elyndor-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 92vw;
  background: var(--bg-1);
  border-left: 1px solid var(--border-glass-strong);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
}
.cart[hidden] { display: none; }
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--border-glass);
}
.cart-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text-0);
}
.cart-close {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-glass-strong);
  color: var(--text-1);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease;
}
.cart-close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text-0);
}
.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-2);
  font-size: 14px;
}
.cart-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-glass);
}
.cart-row:last-child { border-bottom: none; }
.cart-row-swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}
.cart-row-name {
  font-size: 14px;
  color: var(--text-0);
  font-weight: 500;
}
.cart-row-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-0);
}
.cart-row-remove {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background 160ms ease, color 160ms ease;
}
.cart-row-remove:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-0);
}
.cart-foot {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(8,8,12,0.4);
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cart-total-label {
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cart-total-amount {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--text-0);
}
.cart-checkout {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--store-radius-md);
  border: none;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #1a1a1a;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px var(--accent-glow);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.cart-checkout:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--accent-glow);
}
.cart-checkout:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}


/* ============================================================================
   NAVIGATION — extracted from command-centers/software.css
   The .nav class was missing here; these styles are required for the
   sticky nav bar at the top of the software page.
   ============================================================================ */

.nav {
  position: relative;
  z-index: 100;
  margin: 16px auto 0;
  max-width: 1200px;
  padding: 12px 20px;
  background: var(--bg-glass-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

.nav:hover {
  border-color: var(--border-glass-strong);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.nav-logo {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 8px;
  transition: transform var(--t-base) var(--ease-spring);
}

.nav-logo:hover { transform: scale(1.04); }

.nav-logo .nav-mark {
  height: 24px; width: auto;
  filter: drop-shadow(0 0 10px rgba(232, 183, 90, 0.35));
  transition: transform var(--t-base) var(--ease-spring), filter var(--t-base) var(--ease-out);
}

.nav-logo:hover .nav-mark {
  transform: scale(1.08);
  filter: drop-shadow(0 0 16px rgba(232, 183, 90, 0.55));
}

.nav-links { display: flex; gap: 24px; }

.nav-links a {
  font-size: 13px;
  color: var(--text-2);
  transition: color var(--t-fast) var(--ease-out);
  position: relative;
  padding: 4px 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-base) var(--ease-out);
}

.nav-links a:hover { color: var(--text-0); }

.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cart {
  padding: 8px 14px;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    transform var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out);
}

.nav-cart:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(245, 165, 36, 0.06);
}

.nav-cart:active { transform: scale(0.97); }

.nav-cart-count {
  background: var(--accent);
  color: #1a1a1a;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  transition: transform var(--t-base) var(--ease-spring);
}

.nav-cart.has-items .nav-cart-count { animation: bounce 0.5s var(--ease-spring); }

@keyframes bounce { 50% { transform: scale(1.4); } }


/* ============================================================================
   NAVIGATION + DRAWER — extracted from command-centers/software.css
   These styles are required for the sticky nav bar at the top of the
   software page. They were missing from software.css (the prior page
   relied on inheritance from the command-centers software.css, which
   is not loaded on /software/).
   ============================================================================ */

.nav-hamburger {
  display: none;            /* default: hidden (desktop) */
  width: 40px;
  height: 32px;
  padding: 0;
  background: rgba(20, 184, 166, 0.10);
  border: 1px solid rgba(20, 184, 166, 0.40);
  border-radius: 999px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
  margin-left: auto;
}

.nav-hamburger:hover {
  background: rgba(20, 184, 166, 0.20);
  border-color: rgba(20, 184, 166, 0.70);
  transform: scale(1.04);
}

.nav-hamburger:active { transform: scale(0.96); transition-duration: 60ms; }

.nav-hamburger-bar {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #14b8a6;
  border-radius: 999px;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 160ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] { background: rgba(20, 184, 166, 0.32); }

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

.nav-hamburger[aria-expanded="true"] .nav-hamburger-bar:nth-child(2) { opacity: 0; }

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

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 360px;
  background: linear-gradient(180deg, #0d0710 0%, #14081a 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

.nav-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-drawer-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #14b8a6;
}

.nav-drawer-close {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #b9b0a4;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  transition: color 160ms, border-color 160ms, background 160ms;
}

.nav-drawer-close:hover { color: #fafafa; border-color: rgba(255, 255, 255, 0.25); }

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px;
  flex: 1;
}

.nav-drawer-links a {
  display: block;
  padding: 14px 16px;
  font-size: 17px;
  font-weight: 600;
  color: #fafafa;
  text-decoration: none;
  border-radius: 8px;
  transition: background 160ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms;
  border: 1px solid transparent;
}

.nav-drawer-links a:hover {
  background: rgba(20, 184, 166, 0.08);
  color: #14b8a6;
  border-color: rgba(20, 184, 166, 0.20);
}

.nav-drawer-links .nav-drawer-cta {
  margin-top: 16px;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fafafa;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
}

.nav-drawer-links .nav-drawer-cta:hover {
  background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
  color: #fafafa !important;
  filter: brightness(1.1);
  border-color: transparent;
}