/* ============================================================================
     Eastall Software Systems Stylesheets — About page
     Version: 1.0.0 2026
     Author: Eastall Software Systems / Kaedyn Eastall
     Loads on top of the base stylesheet (v1.2026-1-0-0.css); uses its tokens.
============================================================================ */

:root                     { --dot:rgba(255,255,255,.05); --grad-sep:#ffffff; }
:root[data-theme="light"] { --dot:rgba(0,0,0,.05);       --grad-sep:#0e1116; }

.ess-main{ flex:1 1 auto; }

/* Gradient heading text (blue·red·yellow, neutral flips per theme). */
.grad-text{
  background:linear-gradient(95deg,
    var(--grad-sep) 0%, var(--ess-blue) 16.67%, var(--grad-sep) 33.33%,
    var(--ess-red) 50%, var(--grad-sep) 66.67%, var(--ess-yellow) 83.33%, var(--grad-sep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.ab-hero{ background:radial-gradient(var(--dot) 1px, transparent 1.7px) 0 0 / 24px 24px, var(--bg); border-bottom:1px solid var(--line); }
.ab-hero-inner{ max-width:900px; margin:0 auto; padding:clamp(56px,8vw,104px) 28px; text-align:center; }
.ab-eyebrow{ display:inline-block; font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ess-blue); margin:0 0 18px; }
.ab-title{ margin:0 0 20px; font-weight:900; letter-spacing:-.02em; line-height:1.05; font-size:clamp(2.3rem,5.4vw,4rem); color:var(--text-hi); }
.ab-lead{ margin:0 auto; max-width:60ch; color:var(--grey-m); font-size:clamp(1.02rem,1.6vw,1.2rem); line-height:1.65; }

/* ── Generic section shell ──────────────────────────────────────────────── */
.ab-section{ max-width:1120px; margin:0 auto; padding:clamp(48px,7vw,86px) 28px; }
.ab-section h2{ margin:0 0 14px; font-weight:900; letter-spacing:-.01em; font-size:clamp(1.6rem,3vw,2.3rem); color:var(--text-hi); }
.ab-section .ab-kicker{ font-weight:800; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ess-red); margin:0 0 10px; }
.ab-prose{ max-width:66ch; color:var(--grey-d); font-size:1.02rem; line-height:1.75; }
.ab-prose p{ margin:0 0 16px; }

/* ── Stats ──────────────────────────────────────────────────────────────── */
.ab-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:8px; }
.ab-stat{ background:var(--menu); border:1px solid var(--panel-brd); border-radius:16px; padding:24px 20px; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.14); }
.ab-stat b{ display:block; font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:900; color:var(--text-hi); line-height:1; letter-spacing:-.02em; }
.ab-stat span{ display:block; margin-top:8px; color:var(--grey-m); font-size:.86rem; font-weight:600; }

/* ── Value cards ────────────────────────────────────────────────────────── */
.ab-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ab-card{ background:var(--menu); border:1px solid var(--panel-brd); border-radius:18px; padding:24px; box-shadow:0 1px 2px rgba(0,0,0,.14); transition:transform .12s ease, border-color .15s; }
.ab-card:hover{ transform:translateY(-2px); border-color:var(--btn-brd-h); }
.ab-card .ab-ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--overlay-2); color:var(--ess-blue); margin-bottom:14px; }
.ab-card .ab-ic .material-symbols-rounded{ font-size:24px; }
.ab-card h3{ margin:0 0 8px; font-size:1.08rem; font-weight:800; color:var(--text-hi); }
.ab-card p{ margin:0; color:var(--grey-m); font-size:.94rem; line-height:1.6; }

/* Split intro (text + stat panel) */
.ab-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,60px); align-items:center; }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.ab-cta{ background:var(--bg-2); border-top:1px solid var(--line); }
.ab-cta-inner{ max-width:820px; margin:0 auto; padding:clamp(52px,8vw,96px) 28px; text-align:center; }
.ab-cta h2{ margin:0 0 14px; font-weight:900; font-size:clamp(1.7rem,3.6vw,2.6rem); color:var(--text-hi); }
.ab-cta p{ margin:0 auto 26px; max-width:44ch; color:var(--grey-m); font-size:1.05rem; line-height:1.6; }
.ab-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

@media (max-width:820px){
  .ab-stats{ grid-template-columns:repeat(2,1fr); }
  .ab-grid{ grid-template-columns:1fr; }
  .ab-split{ grid-template-columns:1fr; }
}