/* ── Subpage Styles ── */
.sub-hero {
  background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 60%, var(--green) 100%);
  padding: 140px 0 80px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sub-hero::before {
  content:''; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z'/%3E%3C/g%3E%3C/svg%3E") repeat;
}
.sub-hero-inner { position:relative; max-width:720px; }
.sub-hero .icon-big { font-size:3.5rem; margin-bottom:16px; }
.sub-hero h1 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; line-height:1.2; margin-bottom:16px; }
.sub-hero p  { font-size:1.1rem; opacity:.88; margin-bottom:28px; }
.breadcrumb  { font-size:.82rem; opacity:.65; margin-bottom:14px; }
.breadcrumb a { color:#fff; }

.sub-content { max-width:900px; margin:0 auto; padding:60px 24px; }
.sub-content h2 { font-size:1.6rem; font-weight:700; color:var(--dark); margin:40px 0 16px; }
.sub-content h2:first-child { margin-top:0; }
.sub-content p  { color:#555; margin-bottom:14px; line-height:1.8; }
.sub-content ul { margin:0 0 18px 20px; color:#555; line-height:2; }
.sub-content ul li::marker { color:var(--primary); }

.highlight-box {
  background: linear-gradient(135deg, #f0f9f4, #e8f4fd);
  border-left: 5px solid var(--primary);
  border-radius: 0 10px 10px 0;
  padding: 24px 28px;
  margin: 28px 0;
}
.highlight-box .hl-number { font-size:2.2rem; font-weight:800; color:var(--primary); }
.highlight-box .hl-label  { font-size:.9rem; color:#555; }

.highlight-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; margin:30px 0; }
.hl-card { background:#fff; border-radius:10px; padding:20px; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.hl-card .hl-icon { font-size:1.8rem; margin-bottom:8px; }
.hl-card .hl-val  { font-size:1.4rem; font-weight:800; color:var(--primary); }
.hl-card .hl-lbl  { font-size:.78rem; color:#888; }

.steps-list { display:flex; flex-direction:column; gap:16px; margin:24px 0; }
.step-row { display:flex; gap:20px; align-items:flex-start; }
.step-num { background:var(--primary); color:#fff; border-radius:50%; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; }
.step-body h4 { font-weight:700; color:var(--dark); margin-bottom:4px; }
.step-body p  { font-size:.9rem; color:#666; margin:0; }

.cta-banner {
  background: linear-gradient(135deg, var(--dark), var(--primary));
  border-radius: 14px;
  padding: 40px;
  text-align: center;
  color: #fff;
  margin: 50px 0 0;
}
.cta-banner h3 { font-size:1.5rem; font-weight:800; margin-bottom:12px; }
.cta-banner p  { opacity:.85; margin-bottom:24px; }

.back-nav { margin:0 0 8px; }
.back-nav a { color:var(--primary); font-weight:600; font-size:.9rem; }