/* Palette derived from the truqmsdev brand pack (skins/truqmsdev). */
  :root{
    --surface:#F4F5F5; --surface-raised:#FCFDFC; --ink:#181B1A; --ink-muted:#50625D;
    --primary:#2F5D50; --on-primary:#FFFFFF; --primary-deep:#12211D;
    --border:#B0BFBB; --ceremony:#EEF1F0; --ok:#1F5434;
    --maxw:1080px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--surface); color:var(--ink); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--primary)}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:10; background:rgba(252,253,252,.92);
    backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
  }
  .nav{display:flex; align-items:center; gap:28px; height:64px}
  .brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--ink); margin-right:auto}
  .brand b{font-size:20px; letter-spacing:.02em}
  .brand span{font-size:12px; color:var(--ink-muted); letter-spacing:.14em; text-transform:uppercase}
  nav.links{display:flex; gap:24px}
  nav.links a{color:var(--ink-muted); text-decoration:none; font-size:15px; padding:8px 0}
  nav.links a:hover{color:var(--ink)}
  .btn{
    display:inline-block; text-decoration:none; font-weight:600; font-size:16px;
    padding:14px 26px; border-radius:6px; border:1px solid transparent;
  }
  .btn-primary{background:var(--primary); color:var(--on-primary)}
  .btn-primary:hover{background:#264c41}
  .btn-ghost{border-color:var(--border); color:var(--ink); background:transparent}
  .btn-ghost:hover{border-color:var(--ink-muted)}
  .btn-onDark{background:#F2F3F2; color:var(--primary-deep)}
  .btn-onDark:hover{background:#fff}
  .btn-outlineOnDark{border-color:#4a5f58; color:#E7ECEA}
  .btn-outlineOnDark:hover{border-color:#9db3ac}
  header .btn{padding:10px 18px; font-size:15px}
  @media(max-width:760px){ nav.links{display:none} }
  /* 390px phones: the header CTA overflowed the viewport by 8px (site-wide,
     shared header). Tighter padding + type at the smallest widths; 14px
     stays on the interactive-type floor. */
  @media(max-width:430px){
    .wrap{padding:0 16px}
    header .btn{padding:9px 12px; font-size:14px}
    .nav{gap:16px}
  }
  /* ---------- hero ---------- */
  .hero{background:var(--primary-deep); color:#F2F3F2; padding:96px 0 84px}
  .hero .kicker{
    display:inline-block; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
    color:#9DC3B7; border:1px solid #33473F; border-radius:999px; padding:6px 14px; margin-bottom:28px;
  }
  .hero h1{font-size:clamp(32px,5vw,52px); line-height:1.15; font-weight:700; max-width:820px; letter-spacing:-.01em}
  .hero h1 em{font-style:normal; color:#8FD1BC}
  .hero p.sub{font-size:19px; color:#B9C6C1; max-width:680px; margin:24px 0 40px}
  .hero .ctas{display:flex; gap:16px; flex-wrap:wrap}
  /* ---------- trust strip ---------- */
  .trust{border-bottom:1px solid var(--border); background:var(--surface-raised)}
  .trust .wrap{display:flex; gap:12px 36px; flex-wrap:wrap; justify-content:center; padding:18px 24px}
  .trust span{font-size:14px; color:var(--ink-muted); letter-spacing:.06em; white-space:nowrap}
  .trust b{color:var(--ink); font-weight:600}
  /* ---------- sections ---------- */
  section{padding:84px 0}
  .eyebrow{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); font-weight:700; margin-bottom:14px}
  h2{font-size:clamp(26px,3.4vw,36px); line-height:1.2; letter-spacing:-.01em; max-width:720px}
  .lede{font-size:18px; color:var(--ink-muted); max-width:720px; margin-top:16px}
  .grid{display:grid; gap:20px; margin-top:44px}
  .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:600px){ .g2,.g3,.g4{grid-template-columns:1fr} }
  .card{
    background:var(--surface-raised); border:1px solid var(--border); border-radius:6px; padding:26px;
  }
  .card h3{font-size:18px; margin-bottom:8px}
  .card p{font-size:15.5px; color:var(--ink-muted)}
  .step-n{
    display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center;
    border-radius:999px; background:var(--ceremony); color:var(--primary); font-weight:700; font-size:15px; margin-bottom:14px;
  }
  .tag{
    display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    border-radius:999px; padding:3px 10px; margin-bottom:12px;
  }
  .tag-live{background:#E3EFE7; color:var(--ok)}
  .tag-road{background:var(--ceremony); color:var(--ink-muted)}
  .mod-id{font-size:13px; color:var(--ink-muted); font-weight:600; letter-spacing:.06em}
  /* ---------- alt band ---------- */
  .band{background:var(--surface-raised); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
  /* ---------- integrity list ---------- */
  .integrity{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:44px; align-items:start}
  @media(max-width:860px){ .integrity{grid-template-columns:1fr} }
  ul.checks{list-style:none; display:grid; gap:18px}
  ul.checks li{padding-left:34px; position:relative; font-size:16px}
  ul.checks li::before{
    content:""; position:absolute; left:0; top:5px; width:20px; height:20px; border-radius:999px;
    background:var(--primary);
    -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat;
            mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/contain no-repeat;
  }
  ul.checks li b{display:block; margin-bottom:2px}
  ul.checks li span{color:var(--ink-muted); font-size:15px}
  .quotecard{
    background:var(--ceremony); border:1px solid var(--border); border-radius:6px; padding:30px;
  }
  .quotecard p{font-size:16.5px}
  .quotecard .who{margin-top:16px; font-size:14px; color:var(--ink-muted)}
  /* ---------- CTA band ---------- */
  .cta-band{background:var(--primary-deep); color:#F2F3F2; text-align:center; padding:88px 0}
  .cta-band h2{margin:0 auto; max-width:760px}
  .cta-band p{color:#B9C6C1; max-width:640px; margin:18px auto 36px; font-size:18px}
  .cta-band .ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}
  .cta-band .note{font-size:14px; color:#8fa39c; margin-top:22px}
  /* ---------- footer ---------- */
  footer{padding:44px 0 60px; color:var(--ink-muted); font-size:14px}
  footer .wrap{display:flex; gap:16px 40px; flex-wrap:wrap; justify-content:space-between; align-items:center}
  footer a{color:var(--ink-muted)}
  footer a:hover{color:var(--ink)}