/* =========================================================
   configurator-page.css - styles for the 3D Configurator page (lists_single_fuwu)
   Depends on design tokens & shared components from styles.css (page-shell / section-heading / contact...)
   ========================================================= */

/* ===== 1. Hero ===== */
.config-page-hero{padding-top:var(--header-h);background:linear-gradient(135deg,#f7fbff 0%,#fff 58%);border-bottom:1px solid var(--line)}
.config-page-hero-inner{min-height:calc(100svh - var(--header-h));padding-block:clamp(64px,8vw,120px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,8vw,140px);align-items:center}
.config-page-hero h1{max-width:610px;margin:0;font-size:clamp(42px,3.4vw,64px);line-height:1.08;letter-spacing:0}
.config-page-hero p{max-width:590px;margin:28px 0 0;color:var(--muted);font-size:clamp(15px,1.15vw,19px);line-height:1.9}
.hero-note{margin-top:30px;display:grid;gap:12px;color:#526276;font-size:12px}.hero-note span{display:flex;align-items:center;gap:9px}.hero-note i{color:var(--blue)}
.demo-frame{aspect-ratio:1.25/1;min-height:520px;border:1px solid #d8e5f0;border-radius:10px;overflow:hidden;background:#eef5fa;box-shadow:0 24px 70px rgba(34,79,119,.12)}.demo-frame iframe{width:100%;height:100%;border:0;display:block}

/* ===== 2. Value ===== */
.value-section{background:var(--white)}.value-intro{max-width:760px}.value-grid{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}.value-item{min-height:255px;padding:38px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.value-item i{font-size:22px;color:var(--blue)}.value-item h3{margin:48px 0 12px;font-size:21px}.value-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.85}

/* ===== 3. Interactive services (interactive-section) =====
   Aligned with the site .case-row pattern: alternating 2-col rows, hairline dividers, framed media */
.interactive-section{background:var(--white)}
.interactive-heading{max-width:760px}
.interactive-list{margin-top:clamp(48px,5vw,84px)}
.interactive-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:center;padding-block:clamp(52px,5vw,84px);border-top:1px solid var(--line)}
.interactive-row:first-child{border-top:1px solid var(--line)}
.interactive-row:last-child{border-bottom:1px solid var(--line)}
.interactive-copy > span{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.interactive-copy h3{margin:18px 0 16px;font-size:clamp(26px,2.3vw,37px);line-height:1.32}
.interactive-copy p{margin:0;color:var(--muted);font-size:14px;line-height:1.85}
.interactive-points{margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--line);list-style:none;display:grid;gap:11px}
.interactive-points li{display:flex;align-items:flex-start;gap:10px;color:#3e5269;font-size:13px;font-weight:600;line-height:1.6}
.interactive-points li i{color:var(--blue);font-size:12px;margin-top:3px}
.interactive-media{margin:0;border:1px solid #dfe8f0;border-radius:8px;overflow:hidden;background:#eef4f8;box-shadow:0 18px 50px rgba(34,79,119,.10)}
.interactive-media video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#0d1622}
/* Even rows: media left, copy right - alternating rhythm */
.interactive-row:nth-child(even) .interactive-media{order:-1}

/* ===== 4. Rules steps ===== */
.rules-section{background:#f2f7fb}.rules-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,8vw,130px);align-items:start}.rules-list{margin:48px 0 0;padding:0;list-style:none}.rules-list li{padding:22px 0;border-bottom:1px solid #cddde9;display:grid;grid-template-columns:34px 1fr;gap:16px}.rules-list b{color:var(--blue);font-size:13px}.rules-list h3{margin:0 0 7px;font-size:17px}.rules-list p{margin:0;color:var(--muted);font-size:12px;line-height:1.75}.rule-visual{padding:36px;border:1px solid #d5e3ee;background:rgba(255,255,255,.8)}.rule-visual h3{margin:0;font-size:22px}.rule-visual p{color:var(--muted);font-size:13px;line-height:1.8}.rule-map{margin-top:30px;display:grid;gap:10px}.rule-map span{min-height:48px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border:1px solid #d8e5ef;background:#fff;color:#3f5770;font-size:12px}.rule-map i{color:var(--blue)}

/* ===== 5. Result band ===== */
.result-section{background:#fff}.result-band{margin-top:58px;padding:42px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;background:#eaf4ff;border:1px solid #cfe2f3}.result-band strong{display:block;font-size:25px;color:var(--blue-dark)}.result-band span{display:block;margin-top:9px;color:#5a6d82;font-size:12px;line-height:1.7}

/* ===== 6. Bottom CTA (reuses .contact component, headline size only) ===== */
.config-cta{background:var(--soft)}.config-cta .contact-grid{padding:0}.config-cta h2{font-size:clamp(32px,3.2vw,50px)}

/* ===== Responsive ===== */
@media(max-width:900px){
  .interactive-row{grid-template-columns:1fr;gap:26px;padding-block:44px}
  .interactive-row:nth-child(even) .interactive-media{order:0}
}
@media(max-width:820px){.config-page-hero-inner,.rules-layout{grid-template-columns:1fr}.demo-frame{min-height:440px}.value-grid{grid-template-columns:1fr 1fr}.result-band{grid-template-columns:1fr;padding:28px}}
@media(max-width:520px){.value-grid{grid-template-columns:1fr}.value-item{min-height:210px;padding:30px 24px}.value-item h3{margin-top:34px}.demo-frame{min-height:360px}.rule-visual{padding:26px 20px}.interactive-points li{font-size:12px}}