/* =========================================================
   BASE.CSS
   Load this on EVERY page (before header.css / footer.css / page.css).
   Contains: root variables, reset, shared buttons (.cta/.btn-outline),
   ripple effect, scroll-reveal utility. Nothing here is specific to
   header.php, footer.php, or any one page — every other CSS file
   depends on the variables and button classes defined here.
========================================================= */

:root{
  --bg:#FFFFFF;
  --ink:#0E1B33;
  --ink-soft:#556077;
  --ink-faint:#8992A6;
  --line:#E4E9F1;
  --line-soft:#EEF2F8;
  --accent:#2B4FE0;
  --accent-dark:#1B35B0;
  --accent-soft:#EEF1FF;
  --accent-soft-line:#CDD7FF;
  --navy:#0A1330;
  --mint:#B7862E;
  --mint-soft:#FBF2E2;
  --white:#FFFFFF;
  --font-display:'Plus Jakarta Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(8,16,40,.05);
  --shadow-md:0 10px 30px -12px rgba(8,16,40,.18);
  --shadow-lg:0 24px 60px -20px rgba(8,16,40,.24);
}

/* ---- reset ---- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  font-family:'Inter',sans-serif;
  color:var(--ink);
}

/* =========================================================
   BUTTONS (shared: .cta, .cta.lg, .btn-outline)
   Used in header.php (Get Demo / Log In) AND on every page
   (hero CTAs, cta-band, pricing teaser, etc.)
========================================================= */
.cta{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:7px;
  color:var(--white);
  font-size:14px;font-weight:600;
  padding:10px 18px;border-radius:var(--radius-sm);
  border:none;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,#2463F5,var(--accent-dark));
  box-shadow:0 1px 1px rgba(255,255,255,.25) inset, 0 10px 26px -8px rgba(22,86,232,.55);
  transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .15s ease;
  will-change:transform;
}
.cta::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .5s ease;
}
.cta:hover::after{left:130%;}
.cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(22,86,232,.6);}
.cta svg{width:13px;height:13px;}
.cta.lg{padding:13px 24px;font-size:14.5px;}

.btn-outline{
  display:flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:600;color:var(--ink);
  border:1px solid var(--line);background:var(--white);
  padding:12px 20px;border-radius:var(--radius-sm);text-decoration:none;
  transition:border-color .15s ease, background .15s ease, transform .18s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.btn-outline:hover{border-color:var(--accent-soft-line);background:var(--accent-soft);transform:translateY(-1px);}

/* button click ripple */
.ripple{
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:translate(-50%,-50%) scale(0);
  animation:rippleAnim .55s ease-out forwards;
  pointer-events:none;
}
.btn-outline .ripple{background:rgba(22,86,232,.18);}
@keyframes rippleAnim{
  to{transform:translate(-50%,-50%) scale(46);opacity:0;}
}

/* =========================================================
   SCROLL REVEAL utility
   Applied by JS to children of .feat-grid, .prodlist-grid, etc.
   on page.php — kept here since it's a generic utility class,
   not tied to any one page section.
========================================================= */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);}
  .reveal.is-visible{opacity:1;transform:translateY(0);}
}