a { text-decoration:none }
.btn-p { background:var(--p);color:#fff;box-shadow:0 2px 10px rgba(26,95,168,.25) }
.btn-a { background:var(--a);color:#fff;box-shadow:0 2px 10px rgba(232,105,32,.25) }
.btn-a:hover { background:#c75a18;transform:translateY(-1px) }
.btn-s { background:var(--s);color:#fff }
.btn-s:hover { background:#165c45;transform:translateY(-1px) }
.btn-gh:hover { border-color:var(--p);color:var(--p);background:var(--pp) }
.tag-p { background:var(--pp);color:var(--p);border:1px solid rgba(26,95,168,.15) }
.tag-s { background:var(--sp);color:var(--s);border:1px solid rgba(30,122,92,.15) }
.tag-a { background:var(--ap);color:var(--a);border:1px solid rgba(232,105,32,.15) }
.tag-w { background:var(--wp);color:var(--w);border:1px solid rgba(212,146,10,.15) }
.page-hero { background:linear-gradient(148deg,#EBF4FE 0%,#F5F9FF 45%,#ECF5F1 100%);padding:72px var(--pad) 60px }
.ph-inner { max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center }
.ph-h1 { font-family:var(--fh);font-size:42px;font-weight:900;color:var(--n900);line-height:1.25;margin-bottom:18px }
.ph-h1 span { color:var(--p) }
.ph-p { font-size:16px;color:var(--n600);line-height:1.8;margin-bottom:28px }
.ph-actions { display:flex;gap:12px;flex-wrap:wrap }
.def-box { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);padding:32px;position:relative;overflow:hidden }
.def-box::before { content:'CMMS';position:absolute;bottom:-20px;left:-10px;font-family:var(--fh);font-size:100px;font-weight:900;color:var(--p);opacity:.04;line-height:1;pointer-events:none }
.def-box-title { font-family:var(--fh);font-size:13px;font-weight:700;color:var(--p);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em }
.def-box-text { font-family:var(--fh);font-size:22px;font-weight:800;color:var(--n900);line-height:1.4;margin-bottom:20px }
.def-items { display:flex;flex-direction:column;gap:10px }
.di { display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--n50);border-radius:var(--r-md);font-size:13px;font-weight:600;font-family:var(--fh);color:var(--n800) }
.di i { width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0 }
.sec-compare { background:var(--n50) }
.compare-grid { display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px }
.cmp-card { border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md) }
.cmp-head { padding:20px 24px;display:flex;align-items:center;gap:14px }
.cmp-head-icon { width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0 }
.cmp-head-title { font-family:var(--fh);font-size:18px;font-weight:800 }
.cmp-head-sub { font-size:12px;opacity:.7;font-family:var(--fh) }
.cmp-body { background:var(--white);padding:20px 24px;display:flex;flex-direction:column;gap:10px }
.cmp-row { display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:var(--r-md);font-size:13px }
.cmp-row i { font-size:14px;margin-top:2px;flex-shrink:0 }
.cmp-row span { color:var(--n700,#3a4257);line-height:1.6 }
.sec-types { background:var(--white) }
.types-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px }
.type-card { border-radius:var(--r-lg);padding:28px 22px;text-align:center;border:1px solid var(--n200);box-shadow:var(--sh-sm);transition:all .25s;position:relative;overflow:hidden }
.type-card::after { content:'';position:absolute;bottom:0;right:0;left:0;height:4px }
.type-card:hover { transform:translateY(-4px);box-shadow:var(--sh-md) }
.type-ico { width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 18px }
.type-card h3 { font-family:var(--fh);font-size:15px;font-weight:800;color:var(--n900);margin-bottom:8px }
.type-card p { font-size:12px;color:var(--n600);line-height:1.7;margin-bottom:12px }
.type-tag { display:inline-block;font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:10px }
.sec-cycle { background:var(--n50) }
.cycle-wrap { margin-top:48px;position:relative }
.cycle-line { position:absolute;top:36px;right:5%;left:5%;height:2px;background:linear-gradient(to left,var(--p),var(--s));z-index:0 }
.cycle-steps { display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;z-index:1 }
.cs { display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px }
.cs-num { width:72px;height:72px;border-radius:50%;border:3px solid var(--p);background:var(--white);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--sh-sm);transition:all .25s;flex-shrink:0 }
.cs-num i { font-size:22px;color:var(--p);transition:all .25s }
.cs:hover .cs-num { background:var(--p);border-color:var(--p) }
.cs:hover .cs-num i { color:#fff }
.cs h4 { font-family:var(--fh);font-size:13px;font-weight:700;color:var(--n900);margin-bottom:6px }
.cs p { font-size:11px;color:var(--n400);line-height:1.55 }
.sec-benefits { background:var(--white) }
.benefits-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px }
.benefit-card { background:var(--white);border:1px solid var(--n200);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-sm);transition:all .25s }
.benefit-card:hover { transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--p) }
.bc-ico { width:52px;height:52px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px }
.benefit-card h3 { font-family:var(--fh);font-size:15px;font-weight:700;color:var(--n900);margin-bottom:8px }
.benefit-card p { font-size:13px;color:var(--n600);line-height:1.7;margin:0 }
.sec-roles { background:var(--n50) }
.roles-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px }
.role-card { background:var(--white);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);border:1px solid var(--n200);transition:all .25s }
.role-card:hover { transform:translateY(-4px);box-shadow:var(--sh-md) }
.role-head { padding:20px 22px;display:flex;align-items:center;gap:14px }
.role-ico { width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0 }
.role-head-title { font-family:var(--fh);font-size:15px;font-weight:700;color:var(--n900) }
.role-head-sub { font-size:12px;color:var(--n600) }
.role-body { padding:0 22px 22px;display:flex;flex-direction:column;gap:8px }
.role-item { display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--n50);border-radius:var(--r-sm);font-size:12px;color:var(--n800);font-family:var(--fh) }
.role-item i { color:var(--p);font-size:12px;flex-shrink:0 }
.sec-kw { background:var(--white) }
.kw-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px }
.kw-card { background:var(--pp);border-radius:var(--r-lg);padding:20px;border:1px solid rgba(26,95,168,.12);transition:all .25s;cursor:default }
.kw-card:hover { background:var(--p);transform:translateY(-3px) }
.kw-card:hover h4,.kw-card:hover p { color:#fff }
.kw-card h4 { font-family:var(--fh);font-size:14px;font-weight:700;color:var(--p);margin-bottom:5px;transition:color .25s }
.kw-card p { font-size:12px;color:var(--n600);margin:0;line-height:1.6;transition:color .25s }
.sec-cta { background:linear-gradient(135deg,var(--pp) 0%,var(--sp) 100%);text-align:center }
.cta-wrap h2 span { color:var(--p) }
.cta-foot { margin-top:20px;font-size:12px;color:var(--n400) }
.cta-foot i { color:var(--s);margin-left:4px }
.ft-col ul li a:hover { color:var(--pl) }

@media(max-width:1100px) {
  .ph-inner,.compare-grid { grid-template-columns:1fr }
  .types-grid { grid-template-columns:repeat(2,1fr) }
  .cycle-steps { grid-template-columns:repeat(3,1fr) }
  .cycle-line { display:none }
  .benefits-grid,.roles-grid { grid-template-columns:1fr 1fr }
  .kw-grid { grid-template-columns:repeat(2,1fr) }
}

@media(max-width:768px) {
  section { padding:56px 20px }
  .types-grid,.benefits-grid,.roles-grid { grid-template-columns:1fr }
  .cycle-steps { grid-template-columns:repeat(2,1fr) }
  .kw-grid { grid-template-columns:1fr 1fr }
}