/* =====================================================================
   SoftMind · Design System v1.0
   Aesthetic: Clínico Editorial · monotype (Newsreader)
   --------------------------------------------------------------------
   Drop this file once. Import Newsreader from Google Fonts:
   <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&display=swap" rel="stylesheet">
   ===================================================================== */

:root {
  /* ── Color ────────────────────────────────────────────────── */
  --sm-brand:        #1947E5;   /* Cobalt · primary, links, accents */
  --sm-brand-soft:   #E8EEFF;   /* Tinted background, avatars */
  --sm-brand-ink:    #A8B4FF;   /* On-dark brand text */

  --sm-ink:          #0E1116;   /* Body text, dark surfaces */
  --sm-muted:        #6B7280;   /* Secondary text, captions */
  --sm-line:         #E6E7EB;   /* Hairline dividers, card borders */

  --sm-paper:        #FFFFFF;   /* Default surface */
  --sm-paper-soft:   #F7F6F2;   /* Tinted section background (warm) */

  --sm-success:      #1F9D55;   /* Low risk · OK states */
  --sm-success-soft: #E8F6EE;
  --sm-warn:         #FFB020;   /* Featured / attention */

  /* ── Typography ───────────────────────────────────────────── */
  --sm-font: 'Newsreader', 'Times New Roman', Georgia, serif;

  /* Display sizes — for hero & section titles */
  --sm-fs-display-2xl: 100px;   /* hero & CTA closer */
  --sm-fs-display-xl:  80px;
  --sm-fs-display-l:   72px;    /* section H2 */
  --sm-fs-display-m:   42px;    /* stat numbers */
  --sm-fs-display-s:   30px;    /* card titles */
  --sm-fs-display-xs:  24px;    /* quote text */

  /* Body sizes */
  --sm-fs-body-xl: 21px;        /* hero subhead */
  --sm-fs-body-l:  17px;        /* nav, large body */
  --sm-fs-body-m:  15px;        /* default body */
  --sm-fs-body-s:  14px;        /* card descriptions */
  --sm-fs-body-xs: 13px;        /* meta */

  --sm-fs-label:   11px;        /* uppercase eyebrows, section numbers */

  /* Weights — Newsreader runs 300–600 */
  --sm-fw-light: 300;
  --sm-fw-regular: 400;
  --sm-fw-medium: 500;
  --sm-fw-semibold: 600;

  /* Line-heights */
  --sm-lh-tight: 0.95;          /* display */
  --sm-lh-snug:  1.1;           /* sub-display */
  --sm-lh-body:  1.5;           /* body */
  --sm-lh-relaxed: 1.55;

  /* Letter-spacing */
  --sm-track-display: -0.025em; /* large display */
  --sm-track-snug:    -0.015em;
  --sm-track-body:    -0.005em;
  --sm-track-label:    0.18em;  /* uppercase labels */

  /* ── Spacing scale (4-pt base) ────────────────────────────── */
  --sm-s-1:  4px;
  --sm-s-2:  8px;
  --sm-s-3:  12px;
  --sm-s-4:  16px;
  --sm-s-5:  20px;
  --sm-s-6:  24px;
  --sm-s-7:  32px;
  --sm-s-8:  48px;
  --sm-s-9:  64px;
  --sm-s-10: 96px;
  --sm-s-11: 120px;

  /* ── Radius ───────────────────────────────────────────────── */
  --sm-r-xs:   6px;
  --sm-r-sm:   8px;
  --sm-r-md:   14px;
  --sm-r-lg:   18px;
  --sm-r-xl:   24px;
  --sm-r-pill: 999px;

  /* ── Shadow ───────────────────────────────────────────────── */
  --sm-shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
  --sm-shadow-pop:  0 30px 60px -30px rgba(10, 20, 60, 0.22);

  /* ── Layout ───────────────────────────────────────────────── */
  --sm-container: 1160px;
  --sm-gutter: 60px;
}

/* =====================================================================
   Base
   ===================================================================== */

.sm,
.sm * {
  font-family: var(--sm-font);
  box-sizing: border-box;
}

.sm {
  color: var(--sm-ink);
  background: var(--sm-paper);
  font-weight: var(--sm-fw-regular);
  font-size: var(--sm-fs-body-m);
  line-height: var(--sm-lh-body);
  letter-spacing: var(--sm-track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sm a { color: inherit; text-decoration: none; }
.sm em { font-style: italic; }
.sm strong { font-weight: var(--sm-fw-medium); }

/* =====================================================================
   Typography utilities
   --------------------------------------------------------------------
   .sm-display-*  → large editorial display (Newsreader 400, tight tracking)
   .sm-h-*        → section / card titles
   .sm-body-*     → paragraph sizes
   .sm-label      → uppercase, wide tracking · meta / eyebrow / caption
   .sm-section-num → blue eyebrow used above section H2
   ===================================================================== */

.sm-display-2xl { font-size: var(--sm-fs-display-2xl); line-height: var(--sm-lh-tight); letter-spacing: var(--sm-track-display); font-weight: var(--sm-fw-regular); }
.sm-display-xl  { font-size: var(--sm-fs-display-xl);  line-height: var(--sm-lh-tight); letter-spacing: var(--sm-track-display); font-weight: var(--sm-fw-regular); }
.sm-display-l   { font-size: var(--sm-fs-display-l);   line-height: var(--sm-lh-tight); letter-spacing: var(--sm-track-display); font-weight: var(--sm-fw-regular); }
.sm-display-m   { font-size: var(--sm-fs-display-m);   line-height: var(--sm-lh-snug);  letter-spacing: var(--sm-track-display); font-weight: var(--sm-fw-regular); }
.sm-display-s   { font-size: var(--sm-fs-display-s);   line-height: var(--sm-lh-snug);  letter-spacing: var(--sm-track-snug);    font-weight: var(--sm-fw-regular); }
.sm-display-xs  { font-size: var(--sm-fs-display-xs);  line-height: 1.35;               letter-spacing: var(--sm-track-snug);    font-weight: var(--sm-fw-regular); }

.sm-body-xl { font-size: var(--sm-fs-body-xl); line-height: var(--sm-lh-body); color: var(--sm-muted); }
.sm-body-l  { font-size: var(--sm-fs-body-l);  line-height: var(--sm-lh-relaxed); }
.sm-body-m  { font-size: var(--sm-fs-body-m);  line-height: var(--sm-lh-relaxed); }
.sm-body-s  { font-size: var(--sm-fs-body-s);  line-height: var(--sm-lh-relaxed); color: var(--sm-muted); }
.sm-body-xs { font-size: var(--sm-fs-body-xs); line-height: var(--sm-lh-relaxed); color: var(--sm-muted); }

.sm-label {
  font-size: var(--sm-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--sm-track-label);
  color: var(--sm-muted);
  font-weight: var(--sm-fw-medium);
  font-variant-numeric: tabular-nums;
}

.sm-section-num {
  font-size: var(--sm-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--sm-track-label);
  color: var(--sm-brand);
  font-weight: var(--sm-fw-medium);
}

.sm-accent { color: var(--sm-brand); font-style: italic; } /* serif italic accent */
.sm-text-muted { color: var(--sm-muted); }
.sm-text-on-dark { color: #fff; }

/* =====================================================================
   Layout
   ===================================================================== */

.sm-container {
  max-width: var(--sm-container);
  margin: 0 auto;
  padding: 0 var(--sm-gutter);
}

.sm-hr {
  border: 0;
  height: 1px;
  background: var(--sm-line);
  width: 100%;
  margin: 0;
}

/* Section header (eyebrow + title pattern used in V1b) */
.sm-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sm-s-8);
  margin-bottom: var(--sm-s-9);
}
.sm-section-head h2 {
  margin: var(--sm-s-4) 0 0;
  font-size: var(--sm-fs-display-l);
  line-height: var(--sm-lh-tight);
  letter-spacing: var(--sm-track-display);
  font-weight: var(--sm-fw-regular);
}

/* =====================================================================
   Buttons
   ===================================================================== */

.sm-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-s-2);
  padding: 12px 20px;
  border-radius: var(--sm-r-pill);
  font-size: var(--sm-fs-body-l);
  font-weight: var(--sm-fw-medium);
  letter-spacing: var(--sm-track-body);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.sm-btn:hover { transform: translateY(-1px); }

.sm-btn--primary { background: var(--sm-ink); color: #fff; }
.sm-btn--primary:hover { background: #1d2230; }

.sm-btn--secondary { background: #fff; color: var(--sm-ink); border-color: var(--sm-line); }
.sm-btn--secondary:hover { background: var(--sm-paper-soft); }

.sm-btn--ghost { background: transparent; color: var(--sm-ink); }

.sm-btn--on-dark { background: #fff; color: var(--sm-ink); }
.sm-btn--on-dark-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,0.22); }

/* =====================================================================
   Cards
   ===================================================================== */

/* Capability card — 4-column grid item separated by hairlines, no card chrome */
.sm-capability {
  padding: var(--sm-s-7) var(--sm-s-6) var(--sm-s-8);
  border-right: 1px solid var(--sm-line);
}
.sm-capability:last-child { border-right: 0; }
.sm-capability__eyebrow {
  font-size: var(--sm-fs-body-xs);
  letter-spacing: 0.04em;
  color: var(--sm-brand);
  font-style: italic;
}
.sm-capability__title {
  font-size: var(--sm-fs-display-s);
  line-height: var(--sm-lh-snug);
  margin: var(--sm-s-5) 0 var(--sm-s-4);
}
.sm-capability__body { color: var(--sm-muted); font-size: var(--sm-fs-body-m); line-height: var(--sm-lh-relaxed); }

/* Sector card — square-ish card with big italic glyph + descriptor */
.sm-sector {
  background: #fff;
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-r-lg);
  padding: var(--sm-s-6);
  aspect-ratio: 1 / 1.1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sm-sector__glyph {
  font-size: 84px;
  font-style: italic;
  color: var(--sm-brand);
  line-height: 1;
  letter-spacing: -0.045em;
}
.sm-sector__name { font-weight: var(--sm-fw-medium); font-size: 20px; letter-spacing: -0.01em; margin-bottom: var(--sm-s-2); }
.sm-sector__body { color: var(--sm-muted); font-size: var(--sm-fs-body-s); line-height: var(--sm-lh-relaxed); }

/* Quote card — editorial pull-quote with italic open-quote glyph */
.sm-quote {
  padding: var(--sm-s-8) var(--sm-s-7);
  border-right: 1px solid var(--sm-line);
}
.sm-quote:last-child { border-right: 0; }
.sm-quote__mark {
  font-style: italic;
  font-size: 64px;
  color: var(--sm-brand);
  line-height: 0.6;
  height: 28px;
  margin-bottom: var(--sm-s-2);
}
.sm-quote__body {
  font-size: var(--sm-fs-display-xs);
  line-height: 1.35;
  margin: 0;
}
.sm-quote__attr {
  margin-top: var(--sm-s-7);
  padding-top: var(--sm-s-5);
  border-top: 1px solid var(--sm-line);
}
.sm-quote__attr-name { font-weight: var(--sm-fw-medium); font-size: var(--sm-fs-body-m); }

/* Stat block — used in hero bar */
.sm-stat__value {
  font-size: var(--sm-fs-display-m);
  letter-spacing: var(--sm-track-display);
  line-height: var(--sm-lh-snug);
}
.sm-stat__label { color: var(--sm-muted); font-size: var(--sm-fs-body-xs); margin-top: var(--sm-s-2); }

/* Pop card — small floating annotation (next to phone mockup) */
.sm-pop {
  background: #fff;
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-r-md);
  padding: var(--sm-s-3) var(--sm-s-4);
  box-shadow: var(--sm-shadow-card);
}

/* Badge / pill */
.sm-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-s-2);
  padding: 4px 12px;
  background: #fff;
  border: 1px solid var(--sm-line);
  border-radius: var(--sm-r-pill);
  font-size: var(--sm-fs-body-xs);
  font-style: italic;
}
.sm-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sm-warn); }

/* =====================================================================
   iPhone frame (for product mockups)
   ===================================================================== */

.sm-iphone {
  background: #111;
  border-radius: 12.5%;
  padding: 3.5%;
  box-shadow: var(--sm-shadow-pop), inset 0 0 0 1.5px rgba(255,255,255,0.06);
  position: relative;
  display: inline-block;
}
.sm-iphone__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  border-radius: 10%;
  overflow: hidden;
  background: #fff;
}
.sm-iphone__screen img { width: 100%; display: block; }
.sm-iphone__notch {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  height: 4.2%;
  background: #0c0c0c;
  border-radius: var(--sm-r-pill);
  z-index: 4;
}

/* =====================================================================
   Dark surface (used in Contact / Footer)
   ===================================================================== */

.sm-dark { background: var(--sm-ink); color: #fff; }
.sm-dark .sm-section-num { color: var(--sm-brand-ink); }
.sm-dark .sm-text-muted { color: var(--sm-brand-ink); }
.sm-dark a { color: #fff; }

/* =====================================================================
   Helpers
   ===================================================================== */

.sm-stack-2 > * + * { margin-top: var(--sm-s-2); }
.sm-stack-4 > * + * { margin-top: var(--sm-s-4); }
.sm-stack-6 > * + * { margin-top: var(--sm-s-6); }
.sm-stack-8 > * + * { margin-top: var(--sm-s-8); }