/* SkyPound — SAFE Overrides (v1)
   PURPOSE: Improve background gradient, reduce side empty space, and gently scale typography
   WITHOUT touching your HTML or removing/hiding any sections. Load this file AFTER your current styles.css.
   No selectors in here delete, hide, or restructure content.
*/

/* ---- Color tokens (local, for this file only) ---- */
:root{
  --sp-bg-start:#0A1F44;  /* adjust if you want a warmer/cooler top */
  --sp-bg-end:#030916;    /* deeper bottom fade */
  --sp-ink:#E6EDF3;
  --sp-muted:#A9B9C9;
  --sp-accent:#60A5FA;
  --sp-accent-2:#38BDF8;
  --sp-rule:rgba(255,255,255,.06);
}

/* ---- Page background (owned by body) ---- */
html, body { min-height: 100%; }
body {
  /* keep all your existing type, spacing, etc. — just set the background */
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,255,255,.05), transparent 70%),
    linear-gradient(180deg, var(--sp-bg-start) 0%, var(--sp-bg-end) 100%);
  background-attachment: fixed;
  color: var(--sp-ink);
}

/* Optional: subtle film grain to eliminate gradient banding */
.bg-noise{
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,  <svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>  <rect width='100%' height='100%' filter='url(#n)' opacity='0.25'/></svg>");
}

/* ---- Gentle desktop scale-up (kept narrow; mobile untouched) ---- */
html { font-size: clamp(16px, 1.2vw + 12px, 18.5px); }

/* ---- Reduce side emptiness: more fluid container ---- */
.container, .wrap, .inner, .page-width, .site-width {
  /* These are common container classnames — if yours differ, this still does nothing harmful. */
  max-width: clamp(1100px, 92vw, 1280px);
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}

/* ---- Section vertical rhythm (non-destructive) ---- */
section { padding-block: clamp(40px, 6vw, 88px); }
section + section { border-top: 1px solid var(--sp-rule); }

/* ---- Links and CTA (non-destructive) ---- */
a { color: var(--sp-accent); }
a:hover { text-decoration: underline; }

/* If your site has a .button-primary class, this improves contrast without altering layout */
.button-primary {
  background: linear-gradient(180deg, var(--sp-accent), var(--sp-accent-2));
  color: #071223; font-weight: 600;
  border-radius: 12px; padding: .75rem 1.05rem;
  border: 0;
  transition: transform .12s ease, filter .12s ease;
}
.button-primary:hover { filter: brightness(1.05) saturate(1.1); transform: translateY(-1px); }

/* ---- Accessibility: keep focus visible (no layout change) ---- */
:focus-visible{ outline: 2px solid var(--sp-accent-2); outline-offset: 3px; border-radius: 6px; }

/* ---- Keep wrappers transparent so the gradient is visible (safe) ---- */
header, main, footer, section, .container, .wrap, .inner, .content, .stack {
  background-color: transparent !important; /* does not hide content; only removes solid backgrounds */
}

/* ---- DO NOT: No display:none; No visibility:hidden; No positioning hacks here ---- */