/* =========================================
   Base CSS (resets, tokens, typography)
   - Mobile-first
   - Flex-first helpers
========================================= */

/* Reset (minimal, safe) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

/* Design tokens */
:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #111827;
  --accent: #0ea5e9;
  --border: #e5e7eb;
  --surface: #f8fafc;

  --container: 1200px;
  --radius: 12px;
  --shadow: 0 8px 30px rgba(2,8,23,0.08);
}

/* Base type */
body{
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  line-height: 1.55;
  font-size: 16px;
}

/* Containers */
.container{ max-width: var(--container); margin: 0 auto; padding: 0 16px; }

/* Utilities */
.visually-hidden{ position:absolute; clip:rect(0 0 0 0); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }
.link{ color: var(--accent); font-weight: 600; }
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border);
  background: #fff; color: var(--text);
}
.btn--primary{ background: var(--accent); color: #fff; border-color: transparent; }
.btn--ghost{ background: #fff; }

.pill{
  display:inline-flex; align-items:center; height:36px; padding:0 12px; border-radius:999px; border:1px solid var(--border); background:#fff;
}
.pill--ghost{ background: var(--surface); }

/* Sections */
.section{ padding: 24px 0; }
.section-title{ margin: 0 0 12px 0; }

/* Expanded breakpoints (true responsive) */
@media (max-width: 1536px) {}
@media (max-width: 1366px) {}
@media (max-width: 1280px) {}
@media (max-width: 1180px) {}
@media (max-width: 1080px) {}
@media (max-width: 1024px) {}
@media (max-width: 900px) {}
@media (max-width: 820px) {}
@media (max-width: 768px) {}
@media (max-width: 640px) {}
@media (max-width: 560px) {}
@media (max-width: 480px) {}
@media (max-width: 430px) {}
@media (max-width: 414px) {}
@media (max-width: 390px) {}
@media (max-width: 360px) {}