/* Service Lifter — shared base styles and design tokens */
:root {
  --sl-bg: #0C0C0D;          /* page background */
  --sl-card: #111113;        /* card / alt-section background */
  --sl-secondary: #1A1A1F;   /* secondary surfaces */
  --sl-border: #232329;      /* borders */
  --sl-fg: #FFFFFF;          /* foreground text */
  --sl-muted: #A0A0AB;       /* muted text */
  --sl-primary: #1A62FF;     /* brand blue */
  --sl-primary-fg: #FFFFFF;
  --sl-radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sl-bg);
  color: var(--sl-fg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { display: block; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

::selection { background: rgba(26, 98, 255, 0.3); }

/* Layout helpers */
.sl-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.sl-section { padding-top: 96px; padding-bottom: 96px; }

/* Alternating section treatment (dark card bg + centered blue glow) */
.sl-alt {
  position: relative;
  overflow: hidden;
  background: var(--sl-card);
}
.sl-alt::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: rgba(26, 98, 255, 0.05);
  border-radius: 9999px;
  filter: blur(100px);
  pointer-events: none;
}
.sl-alt > * { position: relative; z-index: 1; }

/* Buttons */
.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  border: 1px solid transparent;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}
.sl-btn--primary { background: var(--sl-primary); color: var(--sl-primary-fg); }
.sl-btn--primary:hover { opacity: .9; }
.sl-btn--outline { background: transparent; color: var(--sl-fg); border-color: var(--sl-border); }
.sl-btn--outline:hover { border-color: var(--sl-muted); }

/* Section headers */
.sl-eyebrow {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sl-primary);
  margin-bottom: 16px;
}
.sl-h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 24px;
}
.sl-h2 span { color: var(--sl-primary); }
.sl-lede { font-size: 18px; color: var(--sl-muted); margin: 0; }

/* Scroll-reveal (replaces framer-motion AnimatedSection) */
.sl-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease-out, transform .6s ease-out; }
.sl-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sl-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}