/* ==========================================================================
   Base — reset, document defaults, keyframes and shared utilities.
   ========================================================================== */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #00141d; }

/* ---- Keyframes ---------------------------------------------------------- */
@keyframes blink      { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes floaty     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulseGlow  { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); } 50% { box-shadow: 0 0 0 8px rgba(28, 185, 237, 0); } }

/* ---- Layout utilities --------------------------------------------------- */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}

.sec-pad { padding-left: 40px; padding-right: 40px; }

/* Sections switched off in the admin panel (render.js sets [hidden]) */
[hidden] { display: none !important; }

/* Scroll-reveal: hidden until JS (or the no-js fallback) reveals it */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* If JS never runs, never leave content invisible */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---- Section heading kicker / title ------------------------------------ */
.kicker {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -.02em;
  margin: 0 0 12px;
}

.section-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 560px;
  margin: 0 0 42px;
}

.section {
  position: relative;
  padding: 96px 0;
}

.section--tinted {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .015), transparent);
}