/* =================================================================
   UXOVIA · COMPONENT LIBRARY
   Requires tokens.css to be loaded first.
   ================================================================= */

/* ─────────────────────────────────────────────────────────────────
   1. TYPOGRAPHY HELPERS
   ───────────────────────────────────────────────────────────────── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: var(--w-thin);
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

.t-hero {
  font-size: var(--t-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  font-weight: var(--w-medium);
}

.t-display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--w-medium);
}

.t-h1 { font-size: var(--t-h1); line-height: var(--lh-h); letter-spacing: var(--tr-h); }
.t-h2 { font-size: var(--t-h2); line-height: var(--lh-h); letter-spacing: var(--tr-h); }
.t-h3 { font-size: var(--t-h3); line-height: var(--lh-tight); letter-spacing: var(--tr-h); }

.t-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-body); color: var(--text-2); }
.t-body    { font-size: var(--t-body);    line-height: var(--lh-body); color: var(--text-2); }
.t-small   { font-size: var(--t-small);   line-height: 1.5;            color: var(--text-3); }

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0;
  color: var(--text-3);
}

.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.text-brand   { color: var(--brand); }
.text-muted   { color: var(--text-2); }
.text-faint   { color: var(--text-3); }

.italic-serif {
  font-style: italic;
  font-weight: var(--w-regular);
  font-family: var(--font-display);
}

/* ─────────────────────────────────────────────────────────────────
   2. BUTTONS
   ───────────────────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: transparent;
  --btn-py: 0.85rem;
  --btn-px: 1.4rem;
  --btn-fs: 0.95rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: var(--btn-fs);
  font-weight: var(--w-medium);
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);    /* squared (8px) — change to var(--r-md) for softer, var(--r-pill) for full-round */
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
  position: relative;
  isolation: isolate;
}

.btn:active { transform: translateY(1px); }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Primary — solid brand with directional ambient glow (Landin-style: light pools downward from the button) */
.btn-primary {
  --btn-bg: var(--brand);
  --btn-fg: #fff;
  --btn-bd: var(--brand);
  box-shadow:
    0 12px 28px -10px rgba(0, 85, 254, 0.65),
    0 4px 14px -4px rgba(0, 85, 254, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover {
  --btn-bg: var(--brand-hover);
  --btn-bd: var(--brand-hover);
  box-shadow:
    0 18px 36px -10px rgba(0, 85, 254, 0.75),
    0 6px 18px -4px rgba(0, 85, 254, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Secondary — glass surface */
.btn-secondary {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.btn-secondary:hover {
  --btn-bg: var(--surface-3);
  --btn-bd: rgba(255,255,255,.28);
}

/* Ghost — text only */
.btn-ghost {
  --btn-fg: var(--text-2);
  --btn-bd: transparent;
  padding-inline: 0.8rem;
}
.btn-ghost:hover { --btn-fg: var(--text); }

/* Gradient — special hero CTA */
.btn-gradient {
  --btn-fg: #fff;
  background: var(--gradient-brand);
  border: none;
  padding: var(--btn-py) calc(var(--btn-px) + 0.4rem);
  box-shadow: 0 12px 32px -8px rgba(0, 85, 254, 0.5),
              inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-gradient:hover {
  filter: brightness(1.08);
  box-shadow: 0 16px 40px -8px rgba(0, 85, 254, 0.6),
              inset 0 1px 0 rgba(255,255,255,.35);
}

/* Sizes */
.btn-sm { --btn-py: 0.55rem; --btn-px: 1rem;   --btn-fs: 0.825rem; }
.btn-lg { --btn-py: 1.1rem;  --btn-px: 1.8rem; --btn-fs: 1.05rem; }

/* Icon-only */
.btn-icon {
  --btn-py: 0.7rem;
  --btn-px: 0.7rem;
  border-radius: var(--r-sm);
  aspect-ratio: 1;
}

/* ─────────────────────────────────────────────────────────────────
   3. GLASS CARD — the signature component
   ───────────────────────────────────────────────────────────────── */

/* Premium card: dark base + inner blue radial glow (top-left) + top-weighted gradient border.
   Adapted from Landin's "stage" cards — gives that lit-from-above, slightly-3D feel. */
.glass {
  position: relative;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(90% 35% at 50% -10%, rgba(0, 85, 254, 0.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%),
    rgba(12, 12, 18, 0.72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 30px 60px -30px rgba(0, 0, 0, 0.7);
  transition: transform var(--dur) var(--ease-out),
              filter var(--dur) var(--ease-out);
}

/* gradient border — top-weighted, slightly blue at the crown */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    70% 100% at 50% 0%,
    rgba(120, 170, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.10) 35%,
    rgba(255, 255, 255, 0.03) 70%,
    rgba(255, 255, 255, 0.05) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.glass > * { position: relative; z-index: 2; }

.glass:hover { filter: brightness(1.08); }

/* size variants — share the same premium treatment */
.glass-lg { padding: var(--s-7); border-radius: var(--r-xl); }
.glass-sm { padding: var(--s-5); border-radius: var(--r-md); }

/* feature variant: even stronger brand wash for hero cards */
.glass-feature {
  padding: var(--s-7);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 25% -10%, rgba(0, 85, 254, 0.35), transparent 55%),
    radial-gradient(90% 60% at 85% 100%,  rgba(124, 92, 191, 0.14), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%),
    rgba(8, 10, 18, 0.7);
}

.glass-interactive { cursor: pointer; }
.glass-interactive:hover { transform: translateY(-3px); }

/* Card layout helpers (used with .glass / .glass-feature for stage-card pattern) */
.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.card-subtitle {
  font-size: var(--t-small);
  color: var(--text-3);
  margin-top: 4px;
  margin-bottom: var(--s-5);
}
.card-rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.12) 0%, transparent 100%);
  margin: var(--s-5) 0;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-6);
}

/* Subtle corner-arrow indicator (used on .glass-interactive cards as "go to" hint).
   Width/height set on TWO axes: CSS for theme control + attributes recommended in markup as fallback. */
.card-arrow {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-faint);
  z-index: 4;
  pointer-events: none;
  transition: color var(--dur-fast) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
/* defensive: if the SVG has no explicit size attributes, force it to honor the parent box */
svg.card-arrow { display: block; }
.glass-interactive:hover .card-arrow {
  color: var(--text-2);
  transform: translate(2px, -2px);
}

/* card primitives */
.card-eyebrow { margin-bottom: var(--s-4); }
.card-title   { font-size: var(--t-h3); font-weight: var(--w-medium); letter-spacing: var(--tr-h); margin-bottom: var(--s-3); }
.card-body    { color: var(--text-2); }
.card-footer  { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }

/* number / metric card */
.metric { display: flex; flex-direction: column; gap: var(--s-2); }
.metric-value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: var(--w-medium);
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--gradient-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.metric-label { font-size: var(--t-small); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); font-family: var(--font-mono); }

/* ─────────────────────────────────────────────────────────────────
   4. NAVIGATION (floating pill)
   ───────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0.55rem 0.55rem 0.55rem 1.5rem;
  background: rgba(6, 11, 31, 0.65);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  max-width: calc(100% - 2 * var(--gutter));
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--w-semi);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.nav-brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--gradient-brand);
  display: grid; place-items: center;
  color: #fff;
  font-weight: var(--w-bold);
  box-shadow: var(--glow-brand-sm);
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-link {
  padding: 0.5rem 0.85rem;
  font-size: 0.9rem;
  color: var(--text-2);
  border-radius: var(--r-pill);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav-link:hover, .nav-link.is-active {
  color: var(--text);
  background: var(--surface-2);
}

@media (max-width: 768px) {
  .nav-list { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   5. FORMS
   ───────────────────────────────────────────────────────────────── */

.form-group { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }

.form-label {
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  color: var(--text-2);
  letter-spacing: -0.005em;
}

.form-hint {
  font-size: 0.8rem;
  color: var(--text-3);
}

.input, .textarea, .select {
  width: 100%;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: inherit;
  font-size: var(--t-body);
  transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }

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

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(0, 85, 254, 0.04);
  box-shadow: 0 0 0 4px var(--brand-faint);
}

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

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23ffffff99' stroke-width='1.8' stroke-linecap='round' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  padding-right: 2.6rem;
}

/* checkbox & radio */
.check {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  user-select: none;
  font-size: var(--t-body);
  color: var(--text-2);
}
.check input {
  appearance: none;
  width: 18px; height: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.check input[type="radio"] { border-radius: 50%; }

.check input:checked {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: var(--glow-brand-sm);
}
.check input[type="checkbox"]:checked::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.check input[type="radio"]:checked::after {
  content: "";
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
}

/* toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 44px; height: 24px;
}
.switch input { display: none; }
.switch-track {
  position: absolute; inset: 0;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background var(--dur-fast);
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-out);
  box-shadow: var(--shadow-1);
}
.switch input:checked ~ .switch-track { background: var(--brand); border-color: var(--brand); }
.switch input:checked ~ .switch-track::after { transform: translateX(20px); }

/* ─────────────────────────────────────────────────────────────────
   6. BADGES, PILLS, TAGS
   ───────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
  font-weight: var(--w-thin);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}

.badge-brand { background: var(--brand-soft); border-color: var(--border-brand); color: #cdd9ff; }
.badge-success { background: rgba(31, 203, 122, 0.15); border-color: rgba(31, 203, 122, .4); color: #85e8b6; }
.badge-warn    { background: rgba(245, 166, 35, 0.15); border-color: rgba(245, 166, 35, .4); color: #ffcb7a; }
.badge-danger  { background: rgba(255, 77, 109, 0.15); border-color: rgba(255, 77, 109, .4); color: #ff96a8; }

.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  color: var(--text-2);
  backdrop-filter: blur(8px);
}

/* ─────────────────────────────────────────────────────────────────
   7. SECTION HEADER (reusable section intro)
   ───────────────────────────────────────────────────────────────── */

.section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;     /* prevent inline children (.pill-glow etc.) from stretching to full width */
  gap: var(--s-4);
  margin-bottom: var(--s-8);
  max-width: 720px;
}
.section-header.center { margin-inline: auto; text-align: center; align-items: center; }

/* ─────────────────────────────────────────────────────────────────
   8. HERO PATTERNS
   ───────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-block: clamp(8rem, 14vw, 12rem) clamp(4rem, 8vw, 6rem);
  text-align: center;
  overflow: hidden;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* Hero Aurora — two slow-drifting blue/purple blobs behind the hero content.
   Sits BEHIND the hero-grid-bg (DOM order) so the grid pattern overlays it. */
.hero-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-aurora::before,
.hero-aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.hero-aurora::before {
  top: -15%; left: 5%;
  width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 85, 254, 0.45), transparent 65%);
  animation: hero-aurora-1 28s ease-in-out infinite alternate;
}
.hero-aurora::after {
  top: -8%; right: -5%;
  width: 50%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(124, 92, 191, 0.28), transparent 65%);
  animation: hero-aurora-2 36s ease-in-out infinite alternate;
}
@keyframes hero-aurora-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(22%, 12%) scale(1.18); }
}
@keyframes hero-aurora-2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-18%, 10%) scale(1.12); }
}

.hero-content { position: relative; z-index: 2; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-6);
}

/* ─────────────────────────────────────────────────────────────────
   9. GRIDS
   ───────────────────────────────────────────────────────────────── */

.grid       { display: grid; gap: var(--s-5); }
.grid-2     { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3     { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4     { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-bento {
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-5);
}
.grid-bento > .span-2 { grid-column: span 2; }
.grid-bento > .span-3 { grid-column: span 3; }
.grid-bento > .span-4 { grid-column: span 4; }
.grid-bento > .span-6 { grid-column: span 6; }
@media (max-width: 900px) {
  .grid-bento { grid-template-columns: 1fr; }
  .grid-bento > * { grid-column: span 1 !important; }
}

/* ─────────────────────────────────────────────────────────────────
   10. ICON CHIP (used in cards, hero, etc.)
   ───────────────────────────────────────────────────────────────── */

.icon-chip {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--brand);
  box-shadow: var(--inset-glow);
}
.icon-chip.brand {
  background: var(--brand-soft);
  border-color: var(--border-brand);
  box-shadow: var(--glow-brand-sm), var(--inset-glow);
}
.icon-chip svg { width: 22px; height: 22px; }

/* ─────────────────────────────────────────────────────────────────
   11. STATS / LOGO STRIP
   ───────────────────────────────────────────────────────────────── */

.divider { height: 1px; background: var(--border); margin-block: var(--s-7); }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-5);
}

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  opacity: .55;
}
.logo-strip > * { color: var(--text-2); font-family: var(--font-display); font-weight: var(--w-semi); font-size: 1.2rem; letter-spacing: -0.02em; }

/* ─────────────────────────────────────────────────────────────────
   12. TIMELINE / STEPS
   ───────────────────────────────────────────────────────────────── */

.steps { display: flex; flex-direction: column; gap: var(--s-6); }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: flex-start;
}
.step-number {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  color: var(--brand);
  font-size: 0.95rem;
  flex-shrink: 0;
}
.step-content > h3 { margin-bottom: var(--s-2); font-size: var(--t-h3); }

/* ─────────────────────────────────────────────────────────────────
   13. TESTIMONIAL / QUOTE
   ───────────────────────────────────────────────────────────────── */

.quote {
  position: relative;
  padding: var(--s-7);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--border);
}
.quote-mark {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--brand);
  opacity: .35;
  position: absolute;
  top: var(--s-4); left: var(--s-5);
}
.quote-body {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--text);
  font-weight: var(--w-regular);
  margin-top: var(--s-6);
  letter-spacing: -0.01em;
}
.quote-author {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.quote-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: grid; place-items: center;
  color: #fff;
  font-weight: var(--w-semi);
}
.quote-name { color: var(--text); font-weight: var(--w-medium); }
.quote-role { color: var(--text-3); font-size: 0.85rem; }

/* ─────────────────────────────────────────────────────────────────
   14. CTA BLOCK
   ───────────────────────────────────────────────────────────────── */

.cta {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(0,85,254,.20) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--border);
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--gradient-border);
  border-radius: inherit;
  z-index: -1;
  filter: blur(0);
}

/* ─────────────────────────────────────────────────────────────────
   15. FOOTER
   ───────────────────────────────────────────────────────────────── */

.footer {
  padding-block: var(--s-9) var(--s-6);
  border-top: 1px solid var(--border);
  margin-top: var(--s-10);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--s-7);
  margin-bottom: var(--s-8);
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--text-3); font-family: var(--font-mono); font-weight: var(--w-medium); margin-bottom: var(--s-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.footer-col a { color: var(--text-2); font-size: 0.95rem; transition: color var(--dur-fast); }
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 0.85rem;
}

/* ─────────────────────────────────────────────────────────────────
   16. CODE BLOCK / KBD
   ───────────────────────────────────────────────────────────────── */

code, .code-inline {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.15em 0.45em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: #cdd9ff;
}

pre.code-block {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  background: var(--bg-ink);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-5);
  overflow-x: auto;
  color: #cdd9ff;
  line-height: 1.6;
}

kbd {
  font-family: var(--font-mono);
  font-size: 0.75em;
  padding: 0.15em 0.45em;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--text);
}

/* ─────────────────────────────────────────────────────────────────
   17. AVATAR & AVATAR STACK
   ───────────────────────────────────────────────────────────────── */

.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-brand);
  display: grid; place-items: center;
  color: #fff;
  font-weight: var(--w-semi);
  font-size: 0.95rem;
  border: 2px solid var(--bg-elevated);
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.2rem; }
.avatar-sm { width: 28px; height: 28px; font-size: 0.75rem; }

.avatar-stack { display: inline-flex; }
.avatar-stack > .avatar:not(:first-child) { margin-left: -10px; }

/* ─────────────────────────────────────────────────────────────────
   18. ANIMATIONS — entrance reveal
   ───────────────────────────────────────────────────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes blur-rise {
  from { opacity: 0; filter: blur(14px); transform: translateY(18px); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,85,254,.4); }
  50%      { box-shadow: 0 0 0 12px rgba(0,85,254,0); }
}

.reveal { opacity: 0; animation: rise var(--dur-slow) var(--ease-out) forwards; }
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.15s; }
.reveal-3 { animation-delay: 0.25s; }
.reveal-4 { animation-delay: 0.35s; }
.reveal-5 { animation-delay: 0.45s; }
.reveal-6 { animation-delay: 0.55s; }

/* Blur-rise variant — for hero headlines: unsharp → sharp + slight lift (1.4s) */
.reveal-blur { opacity: 0; animation: blur-rise 1.4s var(--ease-out) forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   19. ICON CHIP — COLOR VARIANTS
   ───────────────────────────────────────────────────────────────── */

.icon-chip.purple {
  background: rgba(124, 92, 191, 0.16);
  border-color: rgba(124, 92, 191, 0.4);
  color: #b39cfb;
  box-shadow: 0 0 20px rgba(124, 92, 191, 0.25), var(--inset-glow);
}
.icon-chip.cyan {
  background: rgba(0, 200, 238, 0.14);
  border-color: rgba(0, 200, 238, 0.4);
  color: #6fe6ff;
  box-shadow: 0 0 20px rgba(0, 200, 238, 0.25), var(--inset-glow);
}
.icon-chip.success {
  background: rgba(31, 203, 122, 0.14);
  border-color: rgba(31, 203, 122, 0.4);
  color: #6fe6a8;
  box-shadow: 0 0 20px rgba(31, 203, 122, 0.25), var(--inset-glow);
}

/* ─────────────────────────────────────────────────────────────────
   20. BADGE — FILLED SOLID (PRO-style)
   ───────────────────────────────────────────────────────────────── */

.badge-solid {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 85, 254, 0.45), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ─────────────────────────────────────────────────────────────────
   21. PILL GLOW — Landin-style eyebrow with blue top light
   ───────────────────────────────────────────────────────────────── */

.pill-glow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  background:
    linear-gradient(180deg, rgba(0, 85, 254, 0.18) 0%, transparent 75%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  font-size: 0.85rem;
  color: var(--text);
  font-weight: var(--w-regular);
  letter-spacing: -0.005em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(120, 170, 255, 0.4),
    0 -2px 14px -2px rgba(0, 85, 254, 0.35),
    0 8px 20px -8px rgba(0, 0, 0, 0.5);
}
.pill-glow .badge-dot {
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
}

/* ─────────────────────────────────────────────────────────────────
   22. TAGS — outlined chips (used inside cards, e.g. stage cards)
   ───────────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  font-size: 0.88rem;
  color: var(--text);
  font-weight: var(--w-regular);
  transition: background var(--dur-fast), border-color var(--dur-fast);
  cursor: default;
  white-space: nowrap;
}
.tag:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.22);
}
.tag-sm { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.tag-brand {
  background: rgba(0, 85, 254, 0.1);
  border-color: rgba(0, 85, 254, 0.5);
  color: #cdd9ff;
}
.tag-brand:hover {
  background: rgba(0, 85, 254, 0.18);
  border-color: rgba(0, 85, 254, 0.7);
}

/* ─────────────────────────────────────────────────────────────────
   23. CHECK LIST — circular blue checkmark bullets (Landin style)
   ───────────────────────────────────────────────────────────────── */

.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.check-list li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text);
  font-size: var(--t-body);
  line-height: 1.4;
}
.check-list li::before {
  content: "";
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 12px no-repeat;
  box-shadow: 0 0 14px rgba(0, 85, 254, 0.55);
}

/* ─────────────────────────────────────────────────────────────────
   24. MEDIA — image containers with aspect ratios + placeholder
   ───────────────────────────────────────────────────────────────── */

.media {
  position: relative;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  isolation: isolate;
}
.media > img,
.media > video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(140% 70% at 50% 110%, transparent 60%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.media-1-1  { aspect-ratio: 1 / 1; }
.media-4-5  { aspect-ratio: 4 / 5; }
.media-3-4  { aspect-ratio: 3 / 4; }
.media-16-9 { aspect-ratio: 16 / 9; }

.media-glow {
  box-shadow:
    0 60px 100px -50px rgba(0, 85, 254, 0.35),
    0 30px 60px -20px rgba(0, 0, 0, 0.8);
}

.media-placeholder {
  background:
    radial-gradient(circle at 30% 30%, rgba(0, 85, 254, 0.30), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(124, 92, 191, 0.22), transparent 55%),
    var(--bg-elevated);
  display: grid;
  place-items: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  text-align: center;
  padding: var(--s-5);
}

/* ─────────────────────────────────────────────────────────────────
   25. SPLIT — media + content side-by-side layout
   ───────────────────────────────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.split-media-right > :first-child { order: 2; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; gap: var(--s-7); }
  .split-media-right > :first-child { order: initial; }
}

/* ─────────────────────────────────────────────────────────────────
   26. CTA ANIMATED — drifting blue mesh background
   ───────────────────────────────────────────────────────────────── */

.cta-animated {
  position: relative;
  padding: clamp(4rem, 8vw, 6rem) clamp(2rem, 5vw, 4rem);
  border-radius: var(--r-2xl);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(124, 92, 191, 0.18), transparent 60%),
    #050508;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(120, 170, 255, 0.25),
    0 40px 100px -40px rgba(0, 0, 0, 0.7);
}
.cta-animated::before,
.cta-animated::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.cta-animated::before {
  top: -30%; left: -15%;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 85, 254, 0.65), transparent 65%);
  animation: cta-drift-1 16s ease-in-out infinite alternate;
}
.cta-animated::after {
  bottom: -30%; right: -15%;
  width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0, 85, 254, 0.55), transparent 65%);
  animation: cta-drift-2 22s ease-in-out infinite alternate;
}
.cta-animated > * { position: relative; z-index: 2; }

@keyframes cta-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(28%, 18%) scale(1.12); }
}
@keyframes cta-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-22%, -22%) scale(1.18); }
}

/* ─────────────────────────────────────────────────────────────────
   27. DIVIDER GLOW — thin line + pulsing blue glow above (section trenner)
   ───────────────────────────────────────────────────────────────── */

.divider-glow {
  position: relative;
  height: 100px;
  margin-block: var(--s-7);
  pointer-events: none;
}
.divider-glow::before {
  /* the thin line at center */
  content: "";
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(120, 170, 255, 0.4) 25%,
    rgba(160, 200, 255, 0.85) 50%,
    rgba(120, 170, 255, 0.4) 75%,
    transparent 100%);
}
.divider-glow::after {
  /* glowing blue halo above the line */
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  height: 120px;
  transform: translateY(-90%);
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 85, 254, 0.55), transparent 70%);
  filter: blur(32px);
  animation: divider-glow-shift 8s ease-in-out infinite alternate;
}
@keyframes divider-glow-shift {
  0%   { opacity: 0.55; left: 18%; right: 32%; }
  50%  { opacity: 1;    left: 25%; right: 25%; }
  100% { opacity: 0.65; left: 32%; right: 18%; }
}

/* compact horizontal variant (no halo) — for in-card section breaks */
.divider-thin {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  margin-block: var(--s-5);
}

/* deploy: 20260529-074808 */