/**
 * DESIGN LIBRARY (COMING SOON) PAGE - styles unique to public/designs.html,
 * the dedicated page for the upcoming reusable-design library, reached
 * from the "Work" nav dropdown (see nav.css). No real library assets
 * exist yet, so this page is deliberately just a full, on-brand "coming
 * soon" moment built around large centered typography, not a mostly-
 * empty hero - it reuses the same glow/composition language as /work's
 * own closing CTA (.wk-final) and index.html's Contact section
 * (.contact) rather than inventing a separate visual treatment.
 *
 * EDIT THIS FILE WHEN YOU WANT TO:
 *   - change the ambient glow behind the content - .designs-hero::before
 *     (identical values to .contact::before / .wk-final::before -
 *     deliberately, for the same "ambient light, not a visible circle"
 *     result those two already get right);
 *   - change the small node/line decoration above the eyebrow -
 *     .designs-nodes / .designs-node;
 *   - change the big heading, including the "Coming soon." line -
 *     .designs-h (the second line is a <span>, coloured like the accent
 *     line in .wk-final-h / .contact-h, not a separate status pill);
 *   - change the link back to /work - .designs-back.
 *
 * Requires base.css to be linked first.
 */

.designs-hero { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; padding: 140px 0 96px; }
/* Same glow as .contact::before / .wk-final::before / .pp-final::before -
   reused rather than reinvented, per its own header comment. */
.designs-hero::before {
  content: ''; position: absolute; bottom: -180px; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 1000px; pointer-events: none;
  background: radial-gradient(ellipse 68% 62% at 50% 80%, rgba(0,255,140,.24) 0%, rgba(0,255,140,.08) 50%, transparent 72%);
}
.designs-hero-in {
  position: relative; z-index: 1;
  max-width: 680px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.designs-hero-in .muted { margin: 0 auto; }

/* Small node/line motif - a quiet nod to the network-node shape in the
   VigiWorks logo mark and the homepage About section's process
   connector, without reproducing either literally. Purely decorative
   (aria-hidden in the HTML). */
.designs-nodes { display: flex; align-items: center; gap: 30px; margin-bottom: 26px; }
.designs-node { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(0,255,140,.55); }
.designs-node:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; left: 100%; width: 30px; height: 1px;
  background: var(--border-mid); transform: translateY(-50%);
}

/* The big heading - "Coming soon." is its second line (a <span>,
   coloured like .wk-final-h/.contact-h's accent line), part of the same
   typographic composition rather than a small separate status pill. */
.designs-h {
  font-family: var(--display); font-size: clamp(2.2rem, 4.8vw, 3.6rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -.03em;
  margin: 12px 0 20px;
}
.designs-h span { color: var(--accent); display: block; }

.designs-back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 34px; font-size: .85rem; font-weight: 600; color: var(--text-3);
  transition: color .2s var(--ease);
}
.designs-back svg { width: 11px; height: 11px; }
.designs-back:hover { color: var(--accent-lt); }

@media (max-width: 640px) {
  .designs-hero { padding: 130px 0 72px; min-height: 92vh; }
  .designs-nodes { gap: 22px; margin-bottom: 22px; }
  .designs-node:not(:last-child)::after { width: 22px; }
}