/* Devdoit Core UI — tokens, reset, layout, typography.
   Shared construction; product accent swaps via body[data-product] (see products.css). */
:root {
  --bg: #080B10;
  --surface: #0E131B;
  --surface-2: #131A24;
  --text: #F5F7FA;
  --muted: #8D98A8;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);

  --sweep-1: #9BE800;
  --sweep-2: #58B900;
  --sentinel-1: #12CFFF;
  --sentinel-2: #6D3CFF;

  --p1: #F5F7FA;   /* product primary — neutral on non-product pages */
  --p2: #8D98A8;
  --p-on: #080B10; /* text on product-coloured buttons */
  --p-glow: rgba(245, 247, 250, .06);

  --ok: #4ADE80;
  --warn: #FBBF24;
  --bad: #FF6B6B;

  --font-head: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-h1: clamp(2.5rem, 4.2vw + 1rem, 4rem);
  --fs-h2: clamp(1.9rem, 2.4vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.25rem, .6vw + 1.05rem, 1.75rem);
  --fs-body: 1.125rem;
  --fs-small: .875rem;

  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-6: 3rem; --s-8: 4rem; --s-12: 6rem;
  --section-space: clamp(4rem, 9vw, 7.5rem);
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: 320ms;
  --measure: 680px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  display: flex; flex-direction: column;
}
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
ul { padding: 0; list-style: none; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.025em; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.015em; }
p { max-width: var(--measure); color: var(--muted); }
strong { color: var(--text); font-weight: 600; }

:focus-visible { outline: 2px solid var(--p1); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--text); color: var(--bg); padding: var(--s-1) var(--s-2); z-index: 100; }
.skip:focus { left: var(--s-2); top: var(--s-2); }

.container { width: min(100% - 2 * var(--s-3), 1180px); margin-inline: auto; }
.section { padding-block: var(--section-space); }
.section--tight { padding-block: calc(var(--section-space) * .6); }
.section--alt { background: linear-gradient(var(--surface), var(--bg)); border-block: 1px solid var(--border); }
.section__head { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); }
.section__head--center { justify-items: center; text-align: center; }
.eyebrow { font: 600 var(--fs-small)/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--p1); }
.lead { font-size: 1.25rem; color: var(--muted); }
.grid { display: grid; gap: var(--s-3); }
.center { text-align: center; margin-inline: auto; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* Entrance: only when JS is available, so content never depends on it.
   motion.js adds .motion-ready (GSAP drives it) or .motion-fallback (CSS transition).
   If neither script runs, the failsafe animation shows everything after 3s. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal, .hero > .container > * { opacity: 0; animation: reveal-failsafe 0s 3s forwards; }
  .motion-ready .reveal, .motion-ready .hero > .container > *, .motion-fallback .reveal { animation: none; }
  .motion-fallback .hero > .container > * { opacity: 1; }
  .motion-fallback .reveal { transform: translateY(12px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
  .motion-fallback .reveal.is-visible { opacity: 1; transform: none; }
}
@keyframes reveal-failsafe { to { opacity: 1; } }
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.split-w > span { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}