/* ============================================================
   Electric-Go-Kart-FR60DGK-6.css — 页面层（主推品营销落地页独创区块）
   仅收本页两处签名视觉：① 电动动力仪表盘(power-ribbon + 充电条 + 电压辉光)
                          ② 13 段生产线时间轴(pline 相位分组 + 左脊线 + 节点)
   纪律：不重定义任何地基白名单类；配色只用 site.css tokens（单一 volt-lime 强调色）
   ============================================================ */

/* ---------- 电动电压辉光（Hero 图卡背景装饰，纯视觉不拦截点击） ---------- */
.volt-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(58% 55% at 72% 18%, rgba(200, 245, 66, 0.18), transparent 72%);
}

/* ---------- 充电条（电动身份装饰，引导视线落到动力数据） ---------- */
.charge-bar {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: var(--ink-3);
    border: 1px solid var(--line);
    overflow: hidden;
}
.charge-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), #eaff9a);
    animation: fr60-charge 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes fr60-charge {
    to { width: var(--charge, 82%); }
}
@media (prefers-reduced-motion: reduce) {
    .charge-fill { animation: none; width: var(--charge, 82%); }
}

/* ---------- 动力仪表盘：5 格分隔读数带（区别于等大卡片，读作一块电动仪表） ---------- */
.power-ribbon {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--ink-2);
}
.power-cell {
    padding: 1.5rem 1.25rem;
    border-right: 1px solid var(--line);
}
.power-cell:last-child { border-right: 0; }
.power-cell .pk {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}
.power-cell .pv {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--accent);
    margin: 0.4rem 0 0;
}
.power-cell .pn {
    font-size: 0.78rem;
    color: var(--paper-soft);
    margin: 0.3rem 0 0;
    line-height: 1.5;
}
@media (max-width: 900px) {
    .power-ribbon { grid-template-columns: repeat(2, 1fr); }
    .power-cell { border-bottom: 1px solid var(--line); }
    .power-cell:nth-child(2n) { border-right: 0; }
    .power-cell:nth-last-child(-n+1) { grid-column: 1 / -1; }
}

/* ---------- 生产线时间轴：相位分组 + 左脊线 + 编号节点 ---------- */
.pline { margin-top: 2.75rem; }
.pline-phase { margin-top: 2.75rem; }
.pline-phase:first-child { margin-top: 0; }

.pline-phase-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.pline-phase-idx {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1rem;
}
.pline-phase-name {
    font-size: 1.12rem;
    font-weight: 800;
    margin: 0;
    color: var(--paper);
}
.pline-phase-count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
}

.pline-steps {
    position: relative;
    margin: 1.35rem 0 0;
    padding-left: 2.75rem;
}
/* 脊线：强调色渐隐到分割线，暗示产线单向流动 */
.pline-steps::before {
    content: "";
    position: absolute;
    left: 1.06rem;
    top: 0.6rem;
    bottom: 0.9rem;
    width: 2px;
    background: linear-gradient(var(--accent), var(--line) 82%);
}
.pline-step { position: relative; padding-bottom: 1.6rem; }
.pline-step:last-child { padding-bottom: 0; }
.pline-node {
    position: absolute;
    left: -2.75rem;
    top: 0;
    width: 2.12rem;
    height: 2.12rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--ink-2);
    border: 2px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    z-index: 1;
}
.pline-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.15rem 1.35rem;
    transition: border-color 0.25s ease, transform 0.25s ease;
}
.pline-card:hover { border-color: var(--accent); transform: translateX(3px); }
.pline-step-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.45rem;
}
.pline-icon { font-size: 1.05rem; line-height: 1; }
.pline-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--paper);
}
.pline-desc {
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}
@media (max-width: 640px) {
    .pline-steps { padding-left: 2.25rem; }
    .pline-steps::before { left: 0.86rem; }
    .pline-node { left: -2.25rem; width: 1.8rem; height: 1.8rem; }
    .pline-phase-count { display: none; }
}