/* ============================================================
   Shouldrs Marketing Site — Design System
   Brand colors and typography mirror the deck CSS in shouldrs_ux/.
   Visual direction informed by Figma (look & feel only —
   copy is verbatim from Shouldrs_Website_Copy doc).
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --b: #528DFF;          /* Primary Blue */
  --b-dark: #2B5FD8;     /* Deeper blue for gradients */
  --p: #332D9B;          /* Primary Purple */
  --navy: #002060;       /* Navy Accent */
  --txt: #0a0d1a;        /* Near-black headline text */
  --txt2: #4a4e5a;       /* Body text */
  --txt3: #8a8e9a;       /* Captions / muted */
  --bg: #ffffff;
  --bg-tint: #f5f8ff;    /* Soft blue tint background */
  --bg-glow: #e8efff;    /* Pale blue glow */
  --line: rgba(0, 0, 0, 0.08);
  --r: 16px;
  --r-pill: 100px;
  --maxw: 1280px;
  --pad-x: clamp(20px, 5vw, 64px);
  --f: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Roboto, sans-serif;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--f);
  color: var(--txt2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* ---------- Typography ---------- */
h1, h2, h3 { color: var(--txt); letter-spacing: -0.02em; line-height: 1.1; font-weight: 700; }
h1 { font-size: clamp(40px, 6vw, 84px); }
h2 { font-size: clamp(32px, 4.5vw, 56px); }
h3 { font-size: clamp(20px, 2vw, 26px); }
p { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.6; }

a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
section { padding: clamp(72px, 10vw, 140px) 0; position: relative; overflow: hidden; }

/* ---------- Pills / Labels ---------- */
.eyebrow {
  display: inline-block;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line);
  color: var(--b);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(82, 141, 255, 0.08);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--b) 0%, var(--p) 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(82, 141, 255, 0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(82, 141, 255, 0.45); }
.btn-ghost {
  background: #fff;
  color: var(--txt);
  border: 1.5px solid var(--txt);
}
.btn-ghost:hover { background: var(--txt); color: #fff; }

/* ---------- Top Nav ---------- */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px var(--pad-x);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; color: var(--txt); letter-spacing: -0.02em; }
.nav-brand img { width: 28px; height: 28px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 15px; font-weight: 500; color: var(--txt2); transition: color 0.15s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--b); }
.nav-cta { padding: 10px 22px; font-size: 14px; }

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

/* ---------- Hero ---------- */
.hero {
  padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 160px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before, .hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero::before { top: -240px; left: 50%; transform: translateX(-50%); width: 1200px; height: 800px; background: radial-gradient(closest-side, rgba(82,141,255,0.18), transparent 70%); }
.hero::after { bottom: -200px; right: -200px; width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(51,45,155,0.12), transparent 70%); }
.hero > .container { position: relative; z-index: 1; }
.hero .eyebrow { margin-bottom: 28px; }
.hero h1 { margin-bottom: 24px; max-width: 14ch; margin-left: auto; margin-right: auto; }
.hero .lede { font-size: clamp(18px, 1.4vw, 22px); color: var(--txt2); max-width: 760px; margin: 0 auto 36px; }
.hero .cta-row { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.alt-headline {
  margin-top: 64px;
  font-size: clamp(18px, 1.4vw, 22px);
  font-style: italic;
  color: var(--txt3);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Generic section header ---------- */
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 20px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { color: var(--txt2); max-width: 720px; margin: 0 auto; }

/* ---------- Problem ---------- */
.problem { background: var(--bg-tint); }
.problem h2 { max-width: 16ch; }
.problem .pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 56px;
}
.pain-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pain-card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.05), 0 14px 32px rgba(0,0,0,0.06); }
.pain-card h3 { color: var(--b); font-size: 19px; margin-bottom: 10px; font-weight: 700; letter-spacing: -0.01em; }
.pain-card p { font-size: 16px; color: var(--txt2); line-height: 1.55; }

.problem-tagline {
  margin-top: 56px;
  text-align: center;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  color: var(--p);
  letter-spacing: -0.01em;
}
.problem-tagline em { font-style: normal; color: var(--b); }

/* ---------- Pillars ---------- */
.pillars .intro {
  text-align: center;
  font-size: clamp(18px, 1.4vw, 21px);
  color: var(--txt2);
  max-width: 760px;
  margin: 0 auto 64px;
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 720px) {
  .pillar-grid { grid-template-columns: 1fr; }
}
.pillar {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 36px 32px;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 10px 28px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pillar .num {
  font-size: 14px;
  font-weight: 700;
  color: var(--b);
  letter-spacing: 0.1em;
}
.pillar h3 { font-size: 24px; color: var(--txt); }
.pillar p { font-size: 16px; color: var(--txt2); }

/* ---------- How It Works ---------- */
.how { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-tint) 100%); }
.how .body {
  font-size: clamp(18px, 1.3vw, 20px);
  color: var(--txt2);
  max-width: 820px;
  margin: 0 auto 24px;
  text-align: center;
}
.how .body + .body { margin-bottom: 64px; }
.steps {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 6px 16px rgba(0,0,0,0.04);
}
.step-num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--b), var(--p));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.step p { font-size: 17px; color: var(--txt); }

/* ---------- Footer ---------- */
footer {
  background: var(--txt);
  color: rgba(255,255,255,0.7);
  padding: 64px 0 32px;
  font-size: 14px;
}
footer .container { display: flex; flex-direction: column; gap: 32px; }
.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.foot-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.foot-brand img { width: 26px; height: 26px; }
.foot-links { display: flex; gap: 28px; flex-wrap: wrap; }
.foot-links a { color: rgba(255,255,255,0.7); transition: color 0.15s ease; }
.foot-links a:hover { color: #fff; }
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  color: rgba(255,255,255,0.5);
}

/* ---------- Placeholder pages ---------- */
.placeholder {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px;
  position: relative;
  overflow: hidden;
}
.placeholder::before {
  content: '';
  position: absolute;
  top: -300px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 700px;
  background: radial-gradient(closest-side, rgba(82,141,255,0.14), transparent 70%);
  pointer-events: none; z-index: 0;
}
.placeholder > * { position: relative; z-index: 1; }
.placeholder h1 { font-size: clamp(40px, 6vw, 72px); margin-bottom: 16px; }
.placeholder p { font-size: clamp(17px, 1.3vw, 20px); color: var(--txt2); max-width: 560px; margin: 0 auto 36px; }