/* ============================================================================
     Eastall Software Systems Stylesheets — Services index
     Version: 1.0.0 2026
     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; }
.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;
}

.sv-head{ background:radial-gradient(var(--dot) 1px, transparent 1.7px) 0 0 / 24px 24px, var(--bg); border-bottom:1px solid var(--line); }
.sv-head-inner{ max-width:900px; margin:0 auto; padding:clamp(52px,7vw,92px) 28px; text-align:center; }
.sv-eyebrow{ display:inline-block; font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ess-blue); margin:0 0 16px; }
.sv-title{ margin:0 0 16px; font-weight:900; letter-spacing:-.02em; font-size:clamp(2.1rem,4.8vw,3.4rem); color:var(--text-hi); }
.sv-lead{ margin:0 auto; max-width:52ch; color:var(--grey-m); font-size:1.05rem; line-height:1.65; }

.sv-grid{ max-width:1120px; margin:0 auto; padding:clamp(40px,6vw,72px) 28px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sv-card{ position:relative; display:flex; flex-direction:column; background:var(--menu); border:1px solid var(--panel-brd); border-radius:20px; padding:26px; box-shadow:0 1px 2px rgba(0,0,0,.14); transition:transform .12s ease, border-color .15s, box-shadow .2s; }
.sv-card:hover{ transform:translateY(-3px); border-color:var(--btn-brd-h); box-shadow:var(--shadow); }
.sv-ic{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--overlay-2); color:var(--ess-blue); margin-bottom:16px; }
.sv-ic .material-symbols-rounded{ font-size:27px; }
.sv-card h2{ margin:0 0 4px; font-size:1.2rem; font-weight:800; color:var(--text-hi); }
.sv-alt{ font-size:.82rem; font-weight:700; color:var(--grey-m); margin-bottom:12px; }
.sv-card p{ margin:0 0 20px; color:var(--grey-m); font-size:.94rem; line-height:1.6; flex:1 1 auto; }
.sv-go{ display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:.9rem; color:var(--ess-blue); }
.sv-go .material-symbols-rounded{ font-size:18px; transition:transform .15s; }
.sv-card:hover .sv-go .material-symbols-rounded{ transform:translateX(3px); }
.sv-pill{ position:absolute; top:20px; right:20px; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; }
.sv-pill.live{ color:#0a7d3a; background:rgba(22,163,74,.14); }
.sv-pill.soon{ color:var(--ess-yellow); background:rgba(255,207,26,.16); }
:root[data-theme="dark"] .sv-pill.live{ color:#4ade80; }

@media (max-width:900px){ .sv-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .sv-grid{ grid-template-columns:1fr; } }