/* 润道官网 · 首页专属层 —— hero / 评估面板 / 对应断点与动画
   仅 index.html 加载，必须在 base.css 之后。 */

/* ————— hero ————— */
.hero{position:relative;padding:196px 0 90px;text-align:center;overflow:hidden}
.hero .spot{position:absolute;top:-260px;left:50%;transform:translateX(-50%);width:900px;height:560px;background:radial-gradient(ellipse at center,rgba(14,99,255,.09),transparent 65%);pointer-events:none}
.badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--txt);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;box-shadow:var(--sh)}
.badge b{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(14,99,255,.35)}55%{box-shadow:0 0 0 7px rgba(14,99,255,0)}}
.hero h1{font-size:clamp(38px,6vw,72px);line-height:1.14;font-weight:800;letter-spacing:-.025em;color:var(--ink);margin:30px 0 24px}
.hero-sub{max-width:620px;margin:0 auto;font-size:17px;line-height:1.9;color:var(--mut)}
.hero-btns{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.hero-note{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--dim)}
/* ————— evaluation panel (instrument) ————— */
.panel{
  position:relative;max-width:880px;margin:64px auto 0;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);
  overflow:hidden;
}
.panel .tick{position:absolute;width:14px;height:14px;pointer-events:none}
.panel .tick::before,.panel .tick::after{content:"";position:absolute;background:var(--blue)}
.panel .tick::before{width:14px;height:1.5px}
.panel .tick::after{width:1.5px;height:14px}
.panel .tick.t1{top:10px;left:10px}
.panel .tick.t2{top:10px;right:10px;transform:scaleX(-1)}
.panel .tick.t3{bottom:10px;left:10px;transform:scaleY(-1)}
.panel .tick.t4{bottom:10px;right:10px;transform:scale(-1)}
.panel-bar{display:flex;align-items:center;gap:7px;padding:15px 22px;border-bottom:1px solid var(--line-2);font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim)}
.panel-bar i{width:9px;height:9px;border-radius:50%;background:#E5E7EB}
.panel-bar i:first-child{background:#F6BF4F}
.panel-bar i:nth-child(2){background:#E5E7EB}
.panel-bar i:nth-child(3){background:#34D399}
.panel-body{display:grid;grid-template-columns:1.05fr 1fr;gap:0}
.panel-l{padding:36px 34px;border-right:1px solid var(--line-2)}
.panel-l h4{font-size:17px;font-weight:700;color:var(--ink)}
.panel-l>small{display:block;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
.score-ring{position:relative;width:150px;height:150px;margin:26px auto 4px}
.score-ring b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:38px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.score-ring b small{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--dim);font-weight:400;margin-top:2px}
.panel-r{padding:36px 34px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.mrow .mt{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:600;color:var(--ink)}
.mrow .mt em{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--blue)}
.mbar{height:5px;background:#EFF1F5;border-radius:99px;margin-top:10px;overflow:hidden}
.mbar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--blue),#5E93FF);transition:width 1.4s var(--ease) .25s}
.panel-foot{display:flex;justify-content:space-between;align-items:center;padding:15px 22px;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
.panel-foot b{color:var(--blue);font-weight:600}
@media(max-width:1024px){
  .panel-body{grid-template-columns:1fr}
  .panel-l{border-right:0;border-bottom:1px solid var(--line-2)}
}
@media(max-width:680px){
  .hero{padding:150px 0 64px}
}