/* Calculator page — 商务风 Hero */
.calculator-page .section-hero,
body:has(#calculator-form) .section-hero,
.section-hero {
  position: relative;
  background: linear-gradient(135deg, var(--zc-slate-900, #0f172a) 0%, var(--zc-slate-800, #1e293b) 48%, var(--zc-brand-dark, #14532d) 100%);
  color: #fff;
  overflow: hidden;
  padding: 72px 0 80px;
}
.section-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 300px at 12% 12%, rgba(22, 163, 74, 0.18), transparent 60%),
    radial-gradient(480px 240px at 88% 88%, rgba(30, 64, 175, 0.12), transparent 60%);
}
    .section-hero .container{position:relative;z-index:1}
    .section-hero .hero-inner{
      display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;
    }
    .section-hero .hero-content{color:#fff}
    .section-hero .hero-tagline{
      display:inline-flex;align-items:center;gap:8px;
      padding:6px 14px;border-radius:30px;
      background:rgba(22,163,74,.18);
      border:1px solid rgba(22,163,74,.4);
      color:#86efac;font-size:13px;font-weight:600;letter-spacing:.5px;
      margin-bottom:18px;
    }
    .section-hero .hero-tagline::before{content:"✨";font-size:14px}
    .section-hero .hero-title{
      font-size:52px;font-weight:800;letter-spacing:-1px;line-height:1.15;
      margin:0 0 16px;color:#fff;
      text-shadow:0 4px 20px rgba(0,0,0,.25);
    }
    .section-hero .hero-title .accent{
      background:linear-gradient(90deg,#86efac,#4ade80);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .section-hero .hero-subtitle{
      font-size:17px;line-height:1.7;color:rgba(255,255,255,.82);
      max-width:560px;margin:0 0 26px;
    }
    /* 数字亮点条 */
    .hero-metrics{
      display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
      margin:0 0 28px;max-width:520px;
    }
    .hero-metric{
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      border-radius:12px;padding:14px 16px;
      backdrop-filter:blur(6px);
    }
    .hero-metric .num{
      font-size:24px;font-weight:800;line-height:1;
      background:linear-gradient(90deg,#5dade2,#58d68d);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .hero-metric .lbl{font-size:12px;color:rgba(255,255,255,.7);margin-top:6px;letter-spacing:.3px}

    /* CTA 按钮 */
    .section-hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
    .section-hero .hero-actions .btn{
      padding:14px 28px;border-radius:30px;font-size:15px;font-weight:700;
      text-decoration:none;display:inline-flex;align-items:center;gap:8px;
      transition:all .25s ease;border:none;cursor:pointer;
    }
    .section-hero .hero-actions .btn-primary{
      background:var(--zc-brand-light,#16a34a);
      color:#fff;box-shadow:0 8px 24px rgba(22,163,74,.35);
    }
    .section-hero .hero-actions .btn-primary:hover{
      background:var(--zc-brand-dark,#14532d);
      transform:translateY(-2px);box-shadow:0 12px 32px rgba(22,163,74,.45);
    }
    .section-hero .hero-actions .btn-primary::after{content:"→";font-size:18px;transition:transform .2s}
    .section-hero .hero-actions .btn-primary:hover::after{transform:translateX(4px)}
    .section-hero .hero-actions .btn-secondary{
      background:rgba(255,255,255,.08);color:#fff;
      border:1px solid rgba(255,255,255,.25);
    }
    .section-hero .hero-actions .btn-secondary:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.45)}

    /* Demo 预览条 */
    .demo-preview-bar{
      margin-top:20px;
      background:rgba(255,255,255,.05);
      border:1px dashed rgba(255,255,255,.22);
      border-radius:14px;
      padding:16px 18px;
      max-width:640px;
    }
    .demo-preview-title{
      display:flex;align-items:center;gap:10px;margin-bottom:12px;
      font-size:13px;color:rgba(255,255,255,.85);flex-wrap:wrap;
    }
    .demo-preview-badge{
      display:inline-block;padding:3px 9px;border-radius:10px;
      background:linear-gradient(135deg,#e74c3c,#f39c12);color:#fff;
      font-size:11px;font-weight:800;letter-spacing:1px;
      box-shadow:0 2px 8px rgba(231,76,60,.4);
    }
    .demo-preview-text b{color:#f5cba7;font-weight:700}
    .demo-preview-links{display:flex;flex-wrap:wrap;gap:8px}
    .demo-link{
      display:inline-flex;align-items:center;gap:6px;
      padding:8px 14px;border-radius:20px;
      font-size:13px;font-weight:600;text-decoration:none;
      transition:all .2s ease;border:1px solid transparent;
    }
    .demo-link-main{background:#fff;color:#2c3e50;box-shadow:0 3px 10px rgba(0,0,0,.2)}
    .demo-link-main:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.3)}
    .demo-link-a{background:rgba(52,152,219,.2);color:#85c1e9;border-color:rgba(52,152,219,.5)}
    .demo-link-a:hover{background:rgba(52,152,219,.35);color:#fff}
    .demo-link-b{background:rgba(231,76,60,.2);color:#f1948a;border-color:rgba(231,76,60,.5)}
    .demo-link-b:hover{background:rgba(231,76,60,.35);color:#fff}
    .demo-link-c{background:rgba(155,89,182,.2);color:#bb8fce;border-color:rgba(155,89,182,.5)}
    .demo-link-c:hover{background:rgba(155,89,182,.35);color:#fff}

    /* 右侧视觉 */
    .section-hero .hero-visual{position:relative}
    .section-hero .hero-image{
      width:100%;height:auto;border-radius:18px;
      box-shadow:0 20px 50px rgba(0,0,0,.4);
      filter:brightness(.92) saturate(1.1);
    }
    .section-hero .hero-side-card{
      position:absolute;right:-10px;bottom:-24px;
      background:rgba(255,255,255,.98);color:#2c3e50;
      border-radius:14px;padding:18px 20px;min-width:240px;
      box-shadow:0 16px 44px rgba(0,0,0,.35);
      backdrop-filter:blur(8px);
    }
    .section-hero .hero-side-row{
      display:flex;justify-content:space-between;align-items:center;
      padding:6px 0;font-size:13px;
    }
    .section-hero .hero-side-row + .hero-side-row{border-top:1px dashed rgba(0,0,0,.08)}
    .section-hero .hero-side-label{color:#7f8c8d}
    .section-hero .hero-side-price{font-weight:700;color:#95a5a6;text-decoration:line-through}
    .section-hero .hero-side-label-primary{color:#e74c3c;font-weight:700}
    .section-hero .hero-side-price-primary{
      color:#e74c3c;font-size:18px;font-weight:800;text-decoration:none;
    }
    .section-hero .hero-side-tip{
      margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06);
      font-size:12px;color:#16a085;font-weight:600;text-align:center;
    }

    /* 响应式 */
    @media (max-width:960px){
      .section-hero{padding:48px 0 60px}
      .section-hero .hero-inner{grid-template-columns:1fr;gap:40px}
      .section-hero .hero-title{font-size:36px}
      .section-hero .hero-subtitle{font-size:15px}
      .hero-metrics{grid-template-columns:repeat(3,1fr);gap:10px;max-width:100%}
      .hero-metric{padding:10px 12px}
      .hero-metric .num{font-size:20px}
      .hero-metric .lbl{font-size:11px}
      .section-hero .hero-side-card{position:static;margin-top:16px;min-width:0}
    }
    @media (max-width:520px){
      .section-hero .hero-title{font-size:30px}
      .hero-metrics{grid-template-columns:1fr 1fr}
      .hero-metrics .hero-metric:nth-child(3){grid-column:1/-1}
      .demo-preview-links{flex-direction:column}
      .demo-link{justify-content:center}
    }
