.btn-p { background:var(--p);color:#fff;box-shadow:0 2px 10px rgba(26,95,168,.25) }
.bc-inner a { color:var(--n600);transition:color .2s }
.page-hero { background:linear-gradient(148deg,#FFF8F4 0%,#FFFCFA 45%,#FFF0E8 100%);padding:72px var(--pad) 60px }
.ph-h1 span { color:var(--a) }
.ph-points { display:flex;flex-direction:column;gap:10px;margin-bottom:28px }
.ticket-mock { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);overflow:hidden }
.tm-bar { background:var(--a);padding:13px 18px;display:flex;align-items:center;justify-content:space-between }
.tm-title { font-family:var(--fh);font-size:13px;font-weight:700;color:#fff }
.tm-dots { display:flex;gap:5px }
.tm-dots i { display:inline-block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.4) }
.tm-body { padding:16px }
.tm-filters { display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap }
.tm-f { font-size:10px;font-weight:700;font-family:var(--fh);padding:4px 10px;border-radius:10px;cursor:pointer }
.tm-card { background:var(--n50);border:1px solid var(--n200);border-radius:var(--r-lg);padding:14px;margin-bottom:10px;transition:all .2s;border-right:4px solid transparent }
.tm-card:hover { border-right-color:var(--a);background:var(--white);box-shadow:var(--sh-sm) }
.tm-card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px }
.tm-badge { font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:10px;white-space:nowrap }
.tm-card-id { font-family:var(--fh);font-size:11px;font-weight:700;color:var(--p);margin-bottom:3px }
.tm-card-title { font-family:var(--fh);font-size:13px;font-weight:700;color:var(--n900) }
.tm-card-meta { display:flex;gap:12px;flex-wrap:wrap;font-size:10px;color:var(--n400) }
.tm-card-meta span { display:flex;align-items:center;gap:4px }
.tm-stat { background:var(--n50);border:1px solid var(--n100);border-radius:var(--r-md);padding:10px;text-align:center }
.tm-stat-val { font-family:var(--fh);font-size:20px;font-weight:800;line-height:1 }
.tm-stat-lbl { font-size:9px;color:var(--n400);margin-top:3px;font-family:var(--fh) }
.sec-problem { background:var(--n50) }
.problem-grid { display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px }
.prob-card { background:var(--white);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-md) }
.prob-head { padding:20px 24px;display:flex;align-items:center;gap:14px }
.prob-head-ico { width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0 }
.prob-head-title { font-family:var(--fh);font-size:17px;font-weight:800 }
.prob-head-sub { font-size:11px;opacity:.7;font-family:var(--fh);margin-top:1px }
.prob-body { background:var(--white);padding:20px 24px;display:flex;flex-direction:column;gap:8px }
.prob-row { display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:var(--r-md);font-size:13px }
.prob-row i { font-size:14px;margin-top:2px;flex-shrink:0 }
.prob-row span { color:var(--n700,#3a4257);line-height:1.6 }
.sec-channels { background:var(--white) }
.channels-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px }
.ch-card { background:var(--n50);border:1px solid var(--n200);border-radius:var(--r-xl);padding:28px 22px;text-align:center;transition:all .25s }
.ch-card:hover { transform:translateY(-4px);box-shadow:var(--sh-md);background:var(--white) }
.ch-ico { width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 18px }
.ch-card h3 { font-family:var(--fh);font-size:15px;font-weight:800;color:var(--n900);margin-bottom:8px }
.ch-card p { font-size:12px;color:var(--n600);line-height:1.7;margin-bottom:14px }
.ch-badge { display:inline-block;font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:10px }
.sec-flow { background:var(--n50) }
.flow-wrap { margin-top:48px }
.flow-steps { display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-bottom:36px }
.flow-steps::before { content:'';position:absolute;top:28px;right:10%;left:10%;height:2px;background:linear-gradient(to left,var(--a),var(--p));z-index:0 }
.fs { display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px;position:relative;z-index:1 }
.fs-ico { width:56px;height:56px;border-radius:50%;border:3px solid var(--a);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--a);margin-bottom:14px;box-shadow:var(--sh-sm);transition:all .25s;flex-shrink:0 }
.fs:hover .fs-ico { background:var(--a);color:#fff;transform:scale(1.1) }
.fs h4 { font-family:var(--fh);font-size:12px;font-weight:700;color:var(--n900);margin-bottom:5px }
.fs p { font-size:10px;color:var(--n400);line-height:1.55 }
.sec-features { background:var(--white) }
.fc:hover { transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--a) }
.sec-statuses { background:var(--n50) }
.statuses-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px }
.st-card { border-radius:var(--r-lg);padding:22px;text-align:center;border:1px solid var(--n200);transition:all .25s }
.st-card:hover { transform:translateY(-3px);box-shadow:var(--sh-md) }
.st-num { font-family:var(--fh);font-size:14px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px }
.st-ico { width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 12px }
.st-card h4 { font-family:var(--fh);font-size:14px;font-weight:700;margin-bottom:6px }
.st-card p { font-size:12px;color:var(--n600);line-height:1.6;margin:0 }
.sec-portal { background:var(--white) }
.portal-grid { display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:48px }
.portal-mock { background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-lg),0 0 0 1px var(--n200);overflow:hidden }
.pm-bar { background:var(--pd);padding:12px 18px;display:flex;align-items:center;gap:12px }
.pm-dots { display:flex;gap:5px }
.pm-dots i { display:inline-block;width:8px;height:8px;border-radius:50% }
.pm-title { font-family:var(--fh);font-size:11px;font-weight:700;color:rgba(255,255,255,.9) }
.pm-body { padding:18px }
.pm-form-row { margin-bottom:12px }
.pm-label { font-size:10px;font-weight:700;font-family:var(--fh);color:var(--n600);margin-bottom:5px;display:block }
.pm-input { width:100%;background:var(--n50);border:1px solid var(--n200);border-radius:8px;padding:8px 12px;font-size:11px;color:var(--n800);font-family:var(--fh) }
.pm-input.active { border-color:var(--p);background:var(--white) }
.pm-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px }
.pm-priority { display:flex;gap:6px }
.pm-prio { font-size:10px;font-weight:700;font-family:var(--fh);padding:5px 10px;border-radius:8px;cursor:pointer;border:1.5px solid transparent }
.pm-prio.sel { border-color:currentColor }
.pm-submit { width:100%;background:var(--a);color:#fff;border:none;border-radius:10px;padding:10px;font-family:var(--fh);font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px }
.mg-card { background:var(--white);border:1px solid var(--n200);border-radius:var(--r-lg);padding:20px;text-align:center;transition:all .25s;display:block;color:inherit }
.mg-card:hover { border-color:var(--p);transform:translateY(-3px);box-shadow:var(--sh-md) }
.mg-card h4 { font-family:var(--fh);font-size:13px;font-weight:700;color:var(--n900);margin-bottom:4px }
.mg-card p { font-size:11px;color:var(--n600);margin:0 }
.sec-cta { background:linear-gradient(145deg,var(--a) 0%,#c75a18 50%,#8B3A0F 100%);text-align:center;padding:80px var(--pad) }
.cta-wrap p { font-size:16px;color:rgba(255,255,255,.8);line-height:1.75;margin-bottom:36px }

@media(max-width:1100px) {
  .ph-inner,.portal-grid,.problem-grid { grid-template-columns:1fr }
  .ticket-mock { display:none }
  .channels-grid { grid-template-columns:repeat(2,1fr) }
  .statuses-grid { grid-template-columns:repeat(2,1fr) }
  .feat-grid,.reports-grid { grid-template-columns:repeat(2,1fr) }
  .flow-steps { grid-template-columns:repeat(3,1fr) }
  .flow-steps::before { display:none }
}

@media(max-width:768px) {
  .channels-grid,.statuses-grid { grid-template-columns:1fr 1fr }
  .feat-grid,.reports-grid,.more-grid { grid-template-columns:1fr }
  .flow-steps { grid-template-columns:repeat(2,1fr) }
}