/* ================================================================
   MAAZ ZINDANI — lightweight stylesheet for SEO sub-pages
   No WebGL / GSAP. Fast LCP, semantic, brand-consistent.
   ink #0a0a0a · emerald #10b981 · cream #f5f0e8
   ================================================================ */

@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-latin.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  font-weight: 300 700; font-display: swap;
}

:root {
  --ink: #0a0a0a;
  --ink-soft: #111311;
  --emerald: #10b981;
  --emerald-dim: rgba(16, 185, 129, 0.35);
  --cream: #f5f0e8;
  --cream-dim: rgba(245, 240, 232, 0.62);
  --cream-faint: rgba(245, 240, 232, 0.16);
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --body: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --wrap: 1080px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--emerald); color: var(--ink); }
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--emerald); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }

/* ---------------- header ---------------- */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cream-faint);
}
.site-nav-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 16px clamp(20px, 5vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav-brand { font-family: var(--display); font-size: 22px; letter-spacing: 0.04em; color: #fff; }
.nav-brand span { color: var(--emerald); font-size: 0.55em; vertical-align: super; }
.nav-links { display: flex; gap: clamp(14px, 2.5vw, 30px); flex-wrap: wrap; }
.nav-links a {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-dim); transition: color 0.25s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--emerald); }

/* ---------------- breadcrumb ---------------- */
.crumbs { padding-top: 34px; font-size: 12px; letter-spacing: 0.1em; color: var(--cream-dim); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a:hover { color: var(--emerald); }
.crumbs li::after { content: '›'; margin-left: 8px; color: var(--cream-faint); }
.crumbs li:last-child::after { content: ''; }
.crumbs li:last-child { color: var(--cream); }

/* ---------------- page hero ---------------- */
.page-hero { padding: clamp(28px, 5vh, 56px) 0 clamp(30px, 5vh, 60px); border-bottom: 1px solid var(--cream-faint); }
.eyebrow { font-size: 12px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--emerald); }
.page-hero h1 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(40px, 8vw, 96px);
  line-height: 0.98; text-transform: uppercase; letter-spacing: 0.005em;
  margin-top: 16px;
}
.page-lead { margin-top: 22px; max-width: 720px; font-size: clamp(17px, 1.5vw, 21px); color: var(--cream); }
.hero-meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pill {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-dim); border: 1px solid var(--cream-faint);
  border-radius: 999px; padding: 7px 14px;
}
.pill.accent { color: var(--emerald); border-color: var(--emerald-dim); }

/* store / live buttons */
.btn-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 13px 24px; border-radius: 999px;
  border: 1px solid var(--emerald); color: var(--ink); background: var(--emerald);
  transition: background 0.3s, color 0.3s;
}
.btn.ghost { background: transparent; color: var(--cream); border-color: var(--cream-faint); }
.btn.ghost:hover { border-color: var(--emerald); color: var(--emerald); }
.btn:hover { background: var(--cream); border-color: var(--cream); }

/* ---------------- metrics ---------------- */
.metrics { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); padding: clamp(30px, 5vh, 52px) 0; border-bottom: 1px solid var(--cream-faint); }
.metric .m-value { font-family: var(--display); font-size: clamp(32px, 4vw, 52px); line-height: 1; color: var(--cream); }
.metric .m-value span { color: var(--emerald); }
.metric .m-label { margin-top: 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-dim); }

/* ---------------- content ---------------- */
.content { padding: clamp(40px, 7vh, 80px) 0; }
.content section { margin-bottom: clamp(34px, 5vh, 52px); max-width: 760px; }
.content h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3vw, 38px); text-transform: uppercase;
  line-height: 1.05; margin-bottom: 14px;
}
.content p { color: var(--cream-dim); font-size: clamp(16px, 1.3vw, 18px); }
.content p + p { margin-top: 14px; }

/* tech tags */
.tech-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tech-tags li {
  font-size: 11px; letter-spacing: 0.14em; color: var(--cream-dim);
  border: 1px solid var(--cream-faint); border-radius: 999px; padding: 6px 13px;
}

/* ---------------- FAQ ---------------- */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--cream-faint); }
.faq details:last-child { border-bottom: 1px solid var(--cream-faint); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 0; font-size: clamp(16px, 1.4vw, 19px); color: var(--cream);
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--emerald); font-family: var(--display); font-size: 22px; }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 18px; color: var(--cream-dim); }

/* ---------------- card grids (index + related) ---------------- */
.section-head { padding-top: clamp(30px, 5vh, 48px); }
.section-head h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 44px); text-transform: uppercase;
}
.card-grid {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; padding: clamp(26px, 4vh, 40px) 0 clamp(50px, 8vh, 90px);
}
.card {
  display: flex; flex-direction: column;
  border: 1px solid var(--cream-faint); background: rgba(12, 14, 13, 0.5);
  padding: clamp(22px, 2.4vw, 30px);
  transition: border-color 0.35s, background 0.35s, transform 0.35s;
}
.card:hover { border-color: var(--emerald-dim); background: rgba(10, 16, 13, 0.72); transform: translateY(-5px); }
.card .c-eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--emerald); }
.card h3 { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2vw, 30px); text-transform: uppercase; line-height: 1.05; margin-top: 12px; }
.card p { margin-top: 10px; color: var(--cream-dim); font-size: 15px; flex: 1; }
.card .c-go { margin-top: 18px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); }
.card:hover .c-go { color: var(--emerald); }

/* related block */
.related { border-top: 1px solid var(--cream-faint); }

/* ---------------- CTA ---------------- */
.cta {
  border-top: 1px solid var(--cream-faint);
  padding: clamp(50px, 9vh, 100px) 0;
  text-align: center;
}
.cta h2 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5vw, 60px); text-transform: uppercase; line-height: 1; }
.cta p { margin-top: 16px; color: var(--cream-dim); }
.cta .btn-row { justify-content: center; }

/* ---------------- footer ---------------- */
.site-foot {
  border-top: 1px solid var(--cream-faint);
  padding: 40px clamp(20px, 5vw, 40px);
}
.site-foot-inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-dim); transition: color 0.25s; }
.foot-links a:hover { color: var(--emerald); }
.foot-copy { font-size: 12px; letter-spacing: 0.14em; color: var(--cream-dim); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .site-foot-inner, .cta .btn-row { justify-content: center; text-align: center; }
  .metrics { gap: 24px 40px; }
}