/* ============================================================
   FUTURD — Monochrome theme (black / white / grey / silver)
   Layered on top of styles.css. Futurd's corporate identity;
   teal/cyan is reserved for the Ubriq product surfaces only.
   ============================================================ */
:root {
  /* "Accent" slots (originally teal) become silver/white */
  --teal: #d7dbe1;          /* silver — accent text, icons, dots */
  --teal-dark: #ffffff;     /* hover */
  --teal-soft: rgba(255, 255, 255, 0.07);
  --teal-glow: rgba(176, 184, 198, 0.20);

  /* Cooler, true-neutral dark surfaces */
  --bg: #08090a;
  --bg-alt: #0d0e10;
  --surface: #141517;
  --surface-2: #1b1c1f;

  --text: #f5f6f8;
  --muted: #989aa1;
  --border: rgba(255, 255, 255, 0.10);
}

/* Primary button: brushed-silver fill, near-black label */
.btn-primary {
  background: linear-gradient(180deg, #ffffff, #d3d7dd);
  color: #0a0a0b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.btn-primary:hover { background: linear-gradient(180deg, #ffffff, #e7eaee); }

/* "future" wordmark gradient → metallic silver */
.grad {
  background: linear-gradient(120deg, #ffffff, #aab0ba 70%, #7e858f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero grid + glow read as cool silver light, not teal */
.hero-bg {
  background:
    radial-gradient(60% 50% at 75% 10%, rgba(190, 198, 210, 0.16), transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(150, 160, 175, 0.08), transparent 60%),
    linear-gradient(180deg, transparent, var(--bg));
}

/* Card icon tiles: subtle silver, brighten on hover */
.card:hover { border-color: rgba(255, 255, 255, 0.28); }
.timeline li::before { box-shadow: 0 0 0 4px var(--bg-alt), 0 0 16px rgba(190, 198, 210, 0.25); }