/* ===================================================================
   SmartlyTools v2 — Base: reset, typography, primitives
   =================================================================== */

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); overflow-x:hidden; }

body {
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  overflow-x:hidden;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}

/* Subtle page texture */
body::before {
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(50% 50% at 100% 0,rgba(91,91,214,.05),transparent 70%),
    radial-gradient(40% 40% at 0 100%,rgba(18,165,148,.05),transparent 70%);
}

h1,h2,h3,h4,h5 { font-family:var(--font-display); font-weight:700; line-height:var(--lh-tight); letter-spacing:var(--tracking-tight); color:var(--ink); }
h1 { font-size:clamp(2rem,5vw,var(--fs-5xl)); font-weight:800; }
h2 { font-size:clamp(1.5rem,3.2vw,var(--fs-3xl)); }
h3 { font-size:var(--fs-xl); }
h4 { font-size:var(--fs-lg); }
p { line-height:var(--lh-normal); }

a { color:var(--primary); text-decoration:none; transition:color var(--t-fast) var(--ease); }
a:hover { color:var(--primary-strong); }

img,svg,video,canvas { display:block; max-width:100%; }
svg { fill:none; }
button { font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select { font:inherit; color:inherit; }
ul,ol { list-style:none; padding:0; }

:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:4px; }

::selection { background:rgba(91,91,214,.22); color:var(--ink); }

/* Scrollbars */
* { scrollbar-width:thin; scrollbar-color:var(--hairline-2) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--hairline-2); border-radius:99px; border:2px solid var(--paper); }
*::-webkit-scrollbar-thumb:hover { background:var(--ink-faint); }

/* ---- Layout primitives ---- */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.container-wide { max-width:var(--maxw-wide); }
.container-prose { max-width:var(--maxw-prose); }

.section { padding-block:clamp(3rem,7vw,var(--sp-9)); }
.section-sm { padding-block:clamp(2rem,5vw,var(--sp-8)); }

.section-head { max-width:46rem; margin:0 auto clamp(2rem,4vw,var(--sp-7)); text-align:center; }
.section-head .eyebrow { justify-content:center; margin-inline:auto; }
.section-head h1,.section-head h2 { margin-bottom:var(--sp-3); }
.section-head p { color:var(--ink-soft); font-size:var(--fs-md); }

.eyebrow {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--primary);
  background:var(--primary-soft); padding:.4rem .8rem; border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb,var(--primary) 18%,transparent);
}

.grad-text {
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.sr-only,.sr-link { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link {
  position:fixed; top:-60px; left:16px; z-index:var(--z-toast);
  background:var(--primary); color:#fff; padding:.7rem 1.2rem; border-radius:var(--r-sm);
  font-weight:600; transition:top var(--t) var(--ease); box-shadow:var(--sh-lg);
}
.skip-link:focus { top:16px; color:#fff; }

/* ---- Reveal-on-scroll ---- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out); will-change:opacity,transform; }
.reveal.visible { opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.05s } .reveal:nth-child(3){ transition-delay:.1s }
.reveal:nth-child(4){ transition-delay:.15s } .reveal:nth-child(5){ transition-delay:.2s }
.reveal:nth-child(6){ transition-delay:.25s } .reveal:nth-child(7){ transition-delay:.3s } .reveal:nth-child(8){ transition-delay:.35s }

/* ---- Dividers ---- */
.divider { height:1px; background:var(--hairline); margin-block:var(--sp-5); border:0; }

/* ---- Utility ---- */
.text-center{text-align:center} .mt-0{margin-top:0} .center-x{margin-inline:auto}
.prose { max-width:var(--maxw-prose); margin-inline:auto; color:var(--ink-soft); font-size:var(--fs-md); }
.prose h2 { color:var(--ink); margin-top:var(--sp-6); margin-bottom:var(--sp-3); }
.prose h3 { color:var(--ink); margin-top:var(--sp-5); margin-bottom:var(--sp-2); }
.prose p { margin-bottom:var(--sp-4); line-height:var(--lh-relaxed); }
.prose ul { margin:0 0 var(--sp-4); padding-left:1.3rem; list-style:disc; }
.prose ul li { margin-bottom:var(--sp-2); }
.prose ul li::marker { color:var(--primary); }
.prose a { font-weight:600; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--primary) 40%,transparent); text-underline-offset:3px; }
.prose code { font-family:var(--font-mono); font-size:.9em; background:var(--surface-2); padding:.15em .45em; border-radius:6px; border:1px solid var(--hairline); }
.prose strong { color:var(--ink); font-weight:700; }