/* ==========================================================================
   CES — Civic Enterprise Suite · marketing landing page
   Brand language carried over from the CES brand system:
   slate + ember, generous whitespace, hairline borders, minimal rounding.
   ========================================================================== */

/* Canonical brand face is SAP "72"; it is proprietary, so the public site
   approximates it with metric-friendly Inter and falls back to the UI stack. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../assets/fonts/Inter-Regular.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../assets/fonts/Inter-Medium.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../assets/fonts/Inter-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;
  src:url('../assets/fonts/Inter-Bold.woff2') format('woff2');}

:root{
  --slate-900:#1c2331; --slate-800:#2c3548;
  --ember:#E8590C; --ember-700:#c44a00; --ember-tint:#fff4ec;
  --ink:#1c2331; --muted:#5c6470; --line:#d9dde3;
  --bg:#ffffff; --bg-sunken:#f5f6f8;
  --radius:4px; --radius-lg:8px;
  --shadow-sm:0 1px 3px rgba(28,35,49,.06);
  --shadow:0 2px 12px rgba(28,35,49,.08);
  --font:'Inter','72','72full',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.55; -webkit-font-smoothing:antialiased; font-size:16px;}
h1,h2,h3{line-height:1.2; margin:0; font-weight:600; letter-spacing:-.01em;}
p{margin:0 0 var(--s4);}
a{color:var(--ember-700); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1080px; margin:0 auto; padding:0 var(--s5);}

.overline{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:600; margin:0 0 var(--s2);}

/* --- Top bar ------------------------------------------------------------- */
.shellbar{position:sticky; top:0; z-index:50; background:var(--slate-900);
  color:#fff; border-bottom:1px solid rgba(255,255,255,.08);}
.shellbar .wrap{display:flex; align-items:center; gap:var(--s4); height:56px;}
.shellbar img{height:30px; display:block;}
.shellbar nav{margin-left:auto; display:flex; gap:var(--s5);}
.shellbar nav a{color:rgba(255,255,255,.78); font-size:.875rem; font-weight:500;}
.shellbar nav a:hover{color:#fff; text-decoration:none;}
@media(max-width:680px){.shellbar nav{gap:var(--s4);}}
@media(max-width:480px){.shellbar nav a:nth-child(2){display:none;}}

/* --- Hero ---------------------------------------------------------------- */
.hero{background:linear-gradient(135deg,var(--slate-900) 0%,var(--slate-800) 100%);
  color:#fff; padding:var(--s9) 0;}
.hero h1{font-size:clamp(2rem,5vw,3rem); color:#fff; margin-bottom:var(--s5); max-width:18ch;}
.hero .sub{font-size:1.125rem; color:rgba(255,255,255,.80); max-width:62ch;}
.hero .btn{margin-top:var(--s4);}

/* --- Buttons ------------------------------------------------------------- */
.btn{appearance:none; cursor:pointer; font:inherit; font-weight:600; font-size:.95rem;
  border-radius:var(--radius); padding:11px 20px; border:1px solid var(--ember);
  background:var(--ember); color:#fff; display:inline-flex; align-items:center; gap:8px;}
.btn:hover{background:var(--ember-700); border-color:var(--ember-700); text-decoration:none; color:#fff;}

/* --- Sections ------------------------------------------------------------ */
section{padding:var(--s9) 0; border-bottom:1px solid var(--line);}
section h2{font-size:1.75rem; margin-bottom:var(--s2);}
section .lede{color:var(--muted); max-width:64ch; margin-bottom:var(--s7);}
.hero{border-bottom:0;}

/* --- Module grid --------------------------------------------------------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--s5);}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:var(--s5);}
.card h3{font-size:1.15rem; margin-bottom:var(--s2);}
.card p{color:var(--muted); margin:0; font-size:.95rem;}

/* --- Contact ------------------------------------------------------------- */
#contact .lede{margin-bottom:var(--s6);}

/* --- Footer -------------------------------------------------------------- */
footer{background:var(--slate-900); color:rgba(255,255,255,.7); padding:var(--s7) 0; border:0;}
footer .wrap{display:flex; justify-content:space-between; align-items:center;
  gap:var(--s5); flex-wrap:wrap; font-size:.85rem;}
footer img{height:24px; opacity:.95;}
footer a{color:rgba(255,255,255,.85);}
footer a:hover{color:#fff;}