/* ============================================================
   BASE — Reset · Variables · Body · Scrollbar · Container · Reveal
   Xecutify site — shared foundation for all pages
   ============================================================ */

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

/* ── Design tokens ── */
:root {
  --bg:          #070A10;
  --bg-surface:  #0D1321;
  --bg-card:     #111827;
  --border:      #1A2B40;
  --border-dim:  #0F1E30;
  --accent:      #F97316;
  --accent-dark: #C05D0B;
  --gold:        #FBBF24;
  --text-1:      #F1F5F9;
  --text-2:      #94A3B8;
  --text-3:      #475569;
  --text-4:      #2D3D52;
  --success:     #22C55E;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.32);
  --shadow-glow: 0 0 40px rgba(249,115,22,0.12);
  --transition:  all 0.22s cubic-bezier(0.4,0,0.2,1);
  --container-gutter: clamp(16px, 2.5vw, 32px);
  --container-max: clamp(76rem, 94vw, 108rem);
  --container-wide: clamp(76rem, 94vw, 108rem);
  --container-narrow: clamp(42rem, 72vw, 58rem);
  --container-reading: 48rem;
}

/* ── Base document ── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
               'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Scrollbar ── */
::-webkit-scrollbar          { width: 5px; }
::-webkit-scrollbar-track    { background: var(--bg); }
::-webkit-scrollbar-thumb    { background: var(--border); border-radius: 3px; }

/* ── Layout wrapper ── */
.container {
  width: min(calc(100% - (var(--container-gutter) * 2)), var(--container-max));
  margin: 0 auto;
}

/* ── Scroll-reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   0.55s cubic-bezier(0.4,0,0.2,1),
    transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Staggered delay helpers */
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }