/* ==========================================================================
   STACK18 DESIGN SYSTEM
   A marketplace for launch-ready digital businesses.
   Signature concept: the "Blueprint" — every product on Stack18 is a
   pre-built business, so the visual language borrows from technical
   schematics: dotted construction grids, corner brackets, mono spec labels.
   ========================================================================== */

:root {
  /* ---- Color tokens ---- */
  --ink:        #0B0E13;   /* primary text, dark sections */
  --ink-soft:   #1A1F27;
  --paper:      #FFFFFF;
  --mist:       #F5F8F7;   /* soft section background */
  --mist-deep:  #EDF2F1;
  --line:       #E3E9E7;   /* hairline borders */
  --line-dark:  #262C34;

  --mint:       #00E0A4;   /* signature brand accent */
  --mint-deep:  #00A87C;
  --mint-ink:   #003D2E;   /* mint used as text-on-mint */

  --slate:      #5A6472;   /* secondary text */
  --slate-soft: #87919C;

  --amber:      #FF8A3D;   /* rare — "premium" tier only */

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

/* ---- Blueprint grid background ----
   A faint dotted construction grid, the recurring "we are assembling
   something real" motif used behind hero and section transitions. */
.blueprint-grid {
  background-image: radial-gradient(circle, rgba(11,14,19,0.09) 1px, transparent 1px);
  background-size: 28px 28px;
}
.blueprint-grid-mint {
  background-image: radial-gradient(circle, rgba(0,224,164,0.35) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ---- Corner brackets ----
   Spec-sheet framing device applied to product / blueprint cards. */
.bracket {
  position: relative;
}
.bracket::before,
.bracket::after,
.bracket .b-tl,
.bracket .b-br {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--mint);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.bracket::before { top: -1px; left: -1px; border-right: none; border-bottom: none; transform: translate(4px,4px); }
.bracket::after { bottom: -1px; right: -1px; border-left: none; border-top: none; transform: translate(-4px,-4px); }
.bracket:hover::before,
.bracket:hover::after { opacity: 1; transform: translate(0,0); }

/* ---- Glass nav / surfaces ---- */
.glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(11,14,19,0.06);
}
.glass-dark {
  background: rgba(11,14,19,0.6);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ---- Gradients ---- */
.grad-mint {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);
}
.grad-ink {
  background: radial-gradient(120% 120% at 20% 0%, #171C24 0%, var(--ink) 60%);
}
.text-grad {
  background: linear-gradient(135deg, var(--ink) 0%, var(--mint-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Buttons ---- */
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  transition: transform 0.25s var(--ease-out), background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.btn-primary:hover {
  background: var(--mint-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(0,168,124,0.45);
}
.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--ink);
  transition: all 0.25s var(--ease-out);
}
.btn-secondary:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* ---- Cards ---- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(11,14,19,0.14);
  border-color: rgba(0,224,164,0.4);
}

/* ---- Marquee ---- */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Floating product cards (hero) ---- */
.float-slow { animation: float 6s ease-in-out infinite; }
.float-slow-delay { animation: float 7s ease-in-out infinite 1.2s; }
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(var(--tilt, 0deg)); }
  50% { transform: translateY(-14px) rotate(var(--tilt, 0deg)); }
}

/* ---- Reveal-on-scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Animated underline nav links ---- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1.5px;
  background: var(--mint-deep);
  transition: width 0.3s var(--ease-out);
}
.nav-link:hover::after { width: 100%; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mist); }
::-webkit-scrollbar-thumb { background: var(--slate-soft); border-radius: 999px; }

/* ---- Utility: dotted divider (blueprint measurement line) ---- */
.measure-line {
  border-top: 1px dashed var(--line);
}

/* ---- Category icon tile ---- */
.icon-tile {
  background: var(--mist);
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.card:hover .icon-tile {
  background: var(--mint);
  transform: scale(1.06) rotate(-4deg);
}

/* ---- Mobile filters panel (solutions listing) ---- */
@media (max-width: 1023px) {
  #filters-sidebar.mobile-open {
    display: block !important;
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--paper);
    z-index: 60;
    overflow-y: auto;
    padding: 1.5rem 1.25rem 6rem;
  }
}