/* ============================================================
   Acceleon Website - Base styles + components
   base.css  (v1)  |  requires tokens.css
   Components read --accent* so they auto-theme inside any
   [data-accent] wrapper.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink);
  background:var(--grey-50);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Layout ---- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-3)}
.section{padding:var(--sp-5) 0}
.section--tint{background:var(--accent-tint)}
.section--grey{background:var(--grey-100)}
.grid{display:grid;gap:var(--sp-3)}
@media(min-width:720px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

/* ---- Typography ---- */
h1,h2,h3,h4{font-family:var(--font-head);line-height:var(--lh-tight);margin:0 0 var(--sp-2);color:var(--ink)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--sp-2);max-width:64ch}
.lead{font-size:18px;color:var(--ink-muted)}
.eyebrow{
  font-family:var(--font-body);font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);
  margin:0 0 var(--sp-1);
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:var(--radius-sm);border:2px solid transparent;
  cursor:pointer;transition:transform .12s ease, filter .12s ease;
}
.btn:hover{text-decoration:none;filter:brightness(.94);transform:translateY(-1px)}
.btn--primary{background:var(--accent);color:#fff}
.btn--outline{background:transparent;border-color:var(--accent);color:var(--accent-deep)}
.btn--ghost-dark{background:var(--accent-on-dark);color:var(--navy)}

/* ---- Tags / pills ---- */
.tag{
  display:inline-block;font-weight:700;font-size:12px;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:var(--accent-tint);color:var(--accent-deep);
}

/* ---- Cards ---- */
.card{
  background:#fff;border:1px solid var(--grey-line);border-radius:var(--radius);
  padding:var(--sp-3);box-shadow:var(--shadow-1);
  transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);border-color:var(--accent)}
.card__icon{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-tint);color:var(--accent-deep);margin-bottom:var(--sp-2);
}
.card__icon svg{width:26px;height:26px;stroke:var(--accent-deep)}
.card h3{margin-bottom:6px}
.card p{color:var(--ink-muted);font-size:15px;margin:0}

/* accent rule at top of feature card */
.card--topline{border-top:4px solid var(--accent)}

/* ---- Hero (navy) ---- */
.hero{background:var(--navy);color:var(--on-dark);position:relative;overflow:hidden}
.hero__inner{padding:var(--sp-6) var(--sp-3)}
.hero .eyebrow{color:var(--accent-on-dark)}
.hero h1{color:#fff;font-size:var(--fs-hero);max-width:16ch}
.hero p{color:var(--on-dark-mut);font-size:19px;max-width:52ch}
.hero__accentbar{height:6px;background:var(--accent)}
/* subtle accent glow shape */
.hero__glow{
  position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
  pointer-events:none;
}

/* ---- On-navy panel (accent used on dark) ---- */
.panel-dark{background:var(--navy-2);color:var(--on-dark);border-radius:var(--radius);padding:var(--sp-4)}
.panel-dark .eyebrow{color:var(--accent-on-dark)}
.panel-dark h2{color:#fff}
.panel-dark p{color:var(--on-dark-mut)}

/* ---- Stat block ---- */
.stat{border-left:4px solid var(--accent);padding-left:var(--sp-2)}
.stat__num{font-family:var(--font-head);font-size:40px;color:var(--accent-deep);line-height:1}
.stat__label{color:var(--ink-muted);font-size:14px}

/* ---- Section heading helper ---- */
.section__head{max-width:60ch;margin-bottom:var(--sp-4)}

/* ---- Accessibility ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}