.btn-green{display:inline-flex;align-items:center;gap:8px;background:var(--highlight);color:#0a0a0b;font-weight:700;font-size:14px;padding:13px 26px;border-radius:100px;transition:background 0.28s cubic-bezier(0.4,0,0.2,1),box-shadow 0.28s cubic-bezier(0.4,0,0.2,1),transform 0.28s cubic-bezier(0.4,0,0.2,1)}
.btn-green:hover{background:#2fd100;transform:translateY(-2px);box-shadow:0 10px 32px rgba(60,224,0,0.35)}
.btn-dark{display:inline-flex;align-items:center;gap:8px;background:#1f1f1f;color:#fff;font-weight:700;font-size:14px;padding:13px 26px;border-radius:100px;border:1px solid rgba(255,255,255,0.12);transition:background 0.28s cubic-bezier(0.4,0,0.2,1),box-shadow 0.28s cubic-bezier(0.4,0,0.2,1),transform 0.28s cubic-bezier(0.4,0,0.2,1)}
.btn-dark:hover{background:#2a2a2a;transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.4)}
.hero{padding-bottom:44px}
.hero-in{position:relative;z-index:1;max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hero-l{padding-bottom:0}
.hero-r{display:flex;flex-direction:column;gap:0;padding-top:32px}
.stat-card{border-top:1px solid rgba(255,255,255,0.08);padding:28px 32px;display:flex;align-items:baseline;gap:16px;transition:background 0.35s cubic-bezier(0.4,0,0.2,1),border-color 0.35s cubic-bezier(0.4,0,0.2,1)}
.stat-card:hover{background:rgba(255,255,255,0.055);border-color:rgba(60,224,0,0.18)}
.stat-num em{font-style:normal;color:inherit}
.step:hover .step-dot{background:#0e1f0a;border-color:var(--highlight);border-width:2px}
.step-dot-light{background:#f5f5f2;border:1px solid rgba(0,0,0,0.1)}
.step:hover .step-dot-light{background:#eaf7e0;border-color:var(--highlight-dim);border-width:2px;box-shadow:0 0 0 4px rgba(60,224,0,0.08)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px 32px;transition:border-color 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1)}.panel:hover{border-color:#c8c3b8;box-shadow:0 6px 24px rgba(0,0,0,0.08)}
.panel-green{background:rgba(60,224,0,0.04);border:1px solid rgba(60,224,0,0.18);border-radius:var(--radius-lg);padding:30px 32px}
.series-lnk{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 14px;font-size:13px;font-weight:600;color:var(--muted);transition:border-color 0.28s cubic-bezier(0.4,0,0.2,1),color 0.28s cubic-bezier(0.4,0,0.2,1),box-shadow 0.28s cubic-bezier(0.4,0,0.2,1),transform 0.28s cubic-bezier(0.4,0,0.2,1);display:block}
.series-lnk:hover{border-color:var(--highlight-dim);color:var(--text);box-shadow:0 6px 20px rgba(0,0,0,0.09);transform:translateY(-2px)}

/* ─── RESPONSIVE FIX: collapse hero on mobile ───
   This page redefines .hero-in unconditionally, which overrides op-base-b's
   mobile collapse (equal specificity, later source). A body-scoped rule wins
   by specificity regardless of order. Everything else is handled by op-base-b. */
@media (max-width:900px){
  body .hero-in{grid-template-columns:1fr;gap:40px}
}