@scope (.design-solar-storage) {
    .hero-grid { grid-template-columns: .95fr 1.05fr; }
    .energy-clock { padding: 38px 0; background: var(--soft); }
    .energy-clock-grid { display: grid; grid-template-columns: .65fr repeat(4,1fr); gap: 12px; align-items: stretch; }
    .clock-intro, .clock-step { padding: 21px; border-radius: 15px; }
    .clock-intro { color: var(--white); background: var(--dark); }
    .clock-intro strong, .clock-intro span, .clock-step strong, .clock-step span { display: block; }
    .clock-intro strong { margin-bottom: 8px; font-size: 1.2rem; }
    .clock-intro span { color: rgba(255,255,255,.68); font-size: .74rem; }
    .clock-step { border: 1px solid var(--line); background: var(--white); }
    .clock-step strong { margin-bottom: 8px; color: var(--green); font-size: .78rem; }
    .clock-step span { color: var(--muted); font-size: .73rem; }
    .clock-step:nth-child(4) { background: #eaf3ee; }
    .clock-step:nth-child(4) span { color: var(--dark); }
    .clock-step:nth-child(5) { color: var(--white); background: var(--green); }
    .clock-step:nth-child(5) strong, .clock-step:nth-child(5) span { color: var(--white); }
    .flow-grid { grid-template-columns: repeat(2,1fr); }
    .product-grid { grid-template-columns: repeat(3,1fr); }
    @media(max-width:700px){.energy-clock-grid,.flow-grid,.product-grid{grid-template-columns:1fr}}
  }