/* ═══════════════════════════════════════════════════════════════
   SOLVAGENCE AGENCY — RESET + BASE v3
   ═══════════════════════════════════════════════════════════════ */

/* ── MODERN RESET ────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--announce-h) + 12px);
  hanging-punctuation: first last;
}

body {
  background-color: var(--bg-void);
  color: var(--tx-200);
  font-family: var(--f-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── CUSTOM CURSOR ───────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  a, button, [role="button"], select, label { cursor: none; }
}

#cursor {
  position: fixed;
  width: 10px; height: 10px;
  background: var(--sv-blue-400);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-xs), opacity var(--dur-xs),
              background var(--dur-sm), width var(--dur-sm), height var(--dur-sm);
  mix-blend-mode: screen;
  will-change: left, top;
}
#cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(38,80,232,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width var(--dur-sm) var(--ease-out), height var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm), transform var(--dur-xs);
  will-change: left, top;
}
body.cursor-hover #cursor { width: 6px; height: 6px; background: var(--sv-teal-500); }
body.cursor-hover #cursor-ring { width: 52px; height: 52px; border-color: var(--color-secondary-border); }
body.cursor-clicking #cursor { transform: translate(-50%, -50%) scale(0.5); }

@media (hover: none), (pointer: coarse) {
  #cursor, #cursor-ring { display: none; }
}

/* ── ELEMENTS ────────────────────────────────────── */
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: none; border: none; background: none; font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
address { font-style: normal; }
hr { border: none; border-top: 1px solid var(--bd-subtle); }

/* ── FOCUS ───────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--sv-blue-400);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ── SELECTION ───────────────────────────────────── */
::selection {
  background: rgba(38,80,232,.35);
  color: var(--tx-100);
}

/* ── SCROLLBAR ───────────────────────────────────── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--sv-blue-600); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--sv-blue-500); }

/* ── ACCESSIBILITY ───────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── CANVAS LAYER ────────────────────────────────── */
#sv-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
}

/* ── Z-INDEX STACKING ────────────────────────────── */
/* Canvas:   z-index: 0   */
/* Sections: z-index: 2   */
/* Nav:      z-index: 100 */
/* Cursor:   z-index: 9998–9999 */

/* SEO-only headings — visible to crawlers, hidden visually */
.seo-h2-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}