/* 24 Blocks — Lagoon Soft Stack tokens, landing-page edition */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Rubik:wght@600;700;800;900&display=swap');

:root {
  /* core */
  --bg:        #eef3f4;
  --bg-deep:   #e2e9eb;
  --card:      #ffffff;
  --ink:       #1c2733;
  --ink-soft:  rgba(28,39,51,0.55);
  --ink-mute:  rgba(28,39,51,0.10);
  --shadow:    rgba(28,39,51,0.85);
  --primary:   #3aa8d8;
  --primary-ink: #ffffff;
  --success:   #1ea88a;
  --warning:   #e8a020;
  --danger:    #d04545;

  /* categories — soft + vivid pairs */
  --work-soft:   #cde2ee; --work-vivid:   #3aa8d8;
  --learn-soft:  #e0d4ec; --learn-vivid:  #7d5ec8;
  --sport-soft:  #d4ebcc; --sport-vivid:  #5aaa28;
  --family-soft: #f8d4c2; --family-vivid: #e8784a;
  --social-soft: #f8e6b0; --social-vivid: #e8a020;
  --self-soft:   #cee8e0; --self-vivid:   #1ea88a;

  /* wordmark pop accents (from the LinkedIn banner) */
  --pop-cyan:  #22c8ff;
  --pop-green: #5fe638;

  /* type */
  --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-pop:     'Rubik', 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    ui-monospace, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/* ---- canonical Soft Stack chrome ---- */
.softcard {
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 2px 2px 0 0 var(--shadow);
}
.softcard.lg { border-radius: 16px; box-shadow: 3px 3px 0 0 var(--shadow); }
.softcard.tap { transition: transform 180ms cubic-bezier(.2,.7,.2,1), box-shadow 180ms; cursor: pointer; }
.softcard.tap:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--shadow); }
.softcard.tap:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--shadow); }

.eyebrow {
  font-family: var(--f-body); font-weight: 700;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-soft);
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  padding: 12px 20px; border-radius: 12px;
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink);
  box-shadow: 3px 3px 0 0 var(--shadow);
  cursor: pointer; transition: transform 160ms, box-shadow 160ms;
  white-space: nowrap;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 var(--shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--shadow); }
.btn.primary { background: var(--primary); color: #fff; }
.btn.ink { background: var(--ink); color: #fff; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--ink);
  font-family: var(--f-body); font-weight: 600; font-size: 12px; color: var(--ink);
  white-space: nowrap;
}
.chip .dot { width: 8px; height: 8px; border-radius: 50%; }

.dot-grid {
  background-image: radial-gradient(rgba(28,39,51,0.18) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* utility */
.shell { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .shell { padding: 0 20px; } }

/* the Rubik dual-tone wordmark from the banner */
.wordmark {
  font-family: var(--f-pop); font-weight: 900; letter-spacing: -0.01em; line-height: 1;
  display: inline-flex; gap: 0.16em;
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill;
}
.wordmark .n { color: var(--pop-cyan); }
.wordmark .w { color: var(--pop-green); }

/* shared section heading */
.section-head { display: grid; gap: 8px; max-width: 720px; }
.section-head h2 {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.02em; margin: 0; line-height: 1.05;
}
.section-head p {
  font-family: var(--f-body); font-size: 16px; color: var(--ink-soft); margin: 0;
  max-width: 56ch; line-height: 1.5;
}

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