/* ======================= COMMERCIAL — ViewTech Blue (Dark) ======================= */
*{box-sizing:border-box}
.cmx-dark{
  /* YOUR SITE PALETTE */
  --ink:#EAF2FF;
  --soft:#9DB4C9;
  --bg:#0b1220;          /* page */
  --paper:#0b1427;       /* card */
  --line:rgba(142,212,255,.14);
  --brand:#2EA9FF;       /* primary sky blue */
  --brand-2:#8ED4FF;     /* light accent */

  --radius:16px;
  --shadow-lg:0 26px 55px rgba(0,0,0,.55);
  --shadow-md:0 16px 34px rgba(0,0,0,.50);
  --shadow-sm:0 10px 22px rgba(0,0,0,.45);

  --btn-shadow:       0 16px 26px rgba(21,151,255,.28), 0 10px 18px rgba(1,8,20,.45), inset 0 1px 0 rgba(255,255,255,.22);
  --btn-shadow-hover: 0 22px 36px rgba(21,151,255,.36), 0 12px 20px rgba(1,8,20,.48), inset 0 1px 0 rgba(255,255,255,.24);

  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
  font-synthesis-weight:none;
}
.cmx-wrap{width:min(1180px,92vw);margin:0 auto;padding:clamp(28px,4vw,56px) 0}

/* Buttons */
.btn{ display:inline-block; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; }
.btn.pri{background:linear-gradient(180deg,#49BCFF 0%, #1597FF 100%);color:#fff;border:0;box-shadow:var(--btn-shadow)}
.btn.pri:hover{transform:translateY(-1px);box-shadow:var(--btn-shadow-hover)}
.btn.ghost{color:var(--brand-2);border:1px solid var(--brand-2);background:rgba(255,255,255,.03);box-shadow:var(--shadow-sm)}
.btn.ghost:hover{background:rgba(116,192,255,.12)}

/* HERO */
.cmx-hero{
  background:
    radial-gradient(1200px 360px at 22% -10%, rgba(46,169,255,.14), transparent 60%),
    linear-gradient(180deg,#0b1220 0%, #0a1626 85%);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,3.4vw,42px);align-items:center}
.tag{display:inline-block;background:rgba(142,212,255,.18);color:#E6F6FF;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cmx-hero h1{margin:10px 0 6px;font-size:clamp(34px,6vw,64px);font-weight:900;letter-spacing:-.01em}
.strap{margin:0 0 16px;color:var(--soft);max-width:66ch}
.hero-card{background:#0d182d;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden}
.hero-media{background:var(--img) center/cover no-repeat;aspect-ratio:16/10}
.hero-card__body{padding:16px}
.hero-card__body p{color:var(--soft)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* BREADCRUMBS */
.crumbs{display:flex;gap:10px;align-items:center;color:var(--soft);padding:6px 0 0}
.crumbs a{color:var(--brand-2);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .current{color:#bcd1e6}

/* SPLIT SECTIONS */
.split{display:grid;gap:clamp(18px,3vw,40px);align-items:start}
.split__copy h2{margin:0 0 10px;font-size:clamp(24px,3.2vw,40px);font-weight:800}
.split__copy p{margin:0 0 12px;color:var(--soft)}
.split__media{height:360px;border-radius:18px;border:1px solid var(--line);background:var(--img) center/cover no-repeat;box-shadow:var(--shadow-md)}
@media (max-width:980px){.split,.split--alt{grid-template-columns:1fr}.split__media{height:300px}}

/* CHECKLIST */
.checklist{margin:0 0 16px;padding:0;list-style:none}
.checklist li{position:relative;margin:8px 0;padding-left:28px}
.checklist li::before{
  content:"";position:absolute;left:0;top:.25em;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,#49BCFF,#1597FF);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z"/></svg>') center/14px 14px no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M9 16.2 4.8 12l-1.4 1.4L9 19l12-12-1.4-1.4z"/></svg>') center/14px 14px no-repeat;
}

/* MAINTENANCE BAND */
.band{background:#0d182d;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:12px 0}
.band__inner{display:flex;gap:16px;align-items:center;justify-content:space-between}
.band__copy h3{margin:0 0 6px;font-size:clamp(18px,2.4vw,28px);font-weight:800}
.band__copy p{margin:0;color:var(--soft)}
@media (max-width:640px){.band__inner{flex-direction:column;align-items:flex-start}}

/* GRID CARDS */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-md)}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;color:var(--soft)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* FINAL CTA */
.cta{margin:24px 0 56px;text-align:center}
.cta h3{margin:0 0 6px;font-size:clamp(22px,3vw,34px);font-weight:900}
.cta p{margin:0 0 16px;color:var(--soft)}