/* ============================================
   SPECTRUM FLARE — base reset & layout primitives.
   Loaded after tokens.css.
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--text-strong);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-md); }
.narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-md); }
.section { padding: var(--section-pad-y) 0; position: relative; }

.lens-tr { position: absolute; inset: 0; pointer-events: none; background: var(--lens-accent-tr); }
.lens-bl { position: absolute; inset: 0; pointer-events: none; background: var(--lens-accent-bl); }
.lens-both { position: absolute; inset: 0; pointer-events: none; background: var(--lens-accent-tr), var(--lens-accent-bl); }

.eyebrow-line { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s-md); }
.eyebrow-line::before { content: ''; width: 24px; height: 1px; background: var(--flare); }
.eyebrow-text {
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--flare);
}

.section__head { margin-bottom: var(--s-2xl); max-width: 720px; }
.section__title {
  font-family: var(--font-display);
  font-size: var(--display-md);
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  color: var(--white);
  font-weight: 700;
}
.section__lead {
  font-size: var(--body-lg);
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: 56ch;
  margin-top: var(--s-sm);
}

/* ===== buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  line-height: 1;
  cursor: pointer;
  transition: all var(--t-base);
}
.btn--primary { background: var(--flare); color: var(--white); border-color: var(--flare); }
.btn--primary:hover { background: var(--flare-hover); border-color: var(--flare-hover); box-shadow: var(--shadow-flare-soft); transform: translateY(-1px); }
.btn--primary:active { background: var(--flare-press); transform: translateY(0); }
.btn--secondary { background: transparent; color: var(--white); border-color: var(--border-strong); }
.btn--secondary:hover { border-color: var(--white); background: rgba(255,255,255,0.04); }
.btn--ghost { background: transparent; color: var(--flare); padding: 0.55rem 0; }
.btn--ghost:hover { color: var(--flare-hover); }
.btn .arrow { transition: transform var(--t-fast); display: inline-block; }
.btn:hover .arrow { transform: translateX(3px); }