:root {
--brand: #383838;
--brand-light: #454545;
--accent: #c0a375;
--accent-light: #dcc79a;
--blue: #a8842f;
--blue-light: #c0a375;
--text: #333333;
--text-light: #666666;
--bg: #f7f7f7;
--card-bg: #ffffff;
--line:#ebebeb;
--dark:#383838;
--font-cn:"Noto Sans SC","Source Han Sans SC","Microsoft YaHei","微软雅黑","微软正黑体","Microsoft JhengHei","PingFang SC","Hiragino Sans GB","SimHei","黑体",Arial,sans-serif;
--font-num:"Oswald","DIN Condensed","Arial Narrow","Microsoft YaHei",Arial,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box;font-family: var(--font-cn) !important; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
color: var(--text);
background: var(--bg);
overflow-x: hidden; overflow-x: clip;
}
.text-brand { color: var(--brand); }
.text-accent { color: var(--accent); }
.bg-brand { background: var(--brand); }
.bg-accent { background: var(--accent); }
.border-accent { border-color: var(--accent); }

/* Navigation */
.nav-fixed {
position: fixed; top:0; left:0; right:0; z-index:100;
transition: all .4s cubic-bezier(.2,.8,.2,1);
padding: 20px 0;
}
.nav-fixed.scrolled {
background: rgba(255,255,255,0.95);
backdrop-filter: blur(20px);
box-shadow: 0 2px 30px rgba(60,52,38,0.08);
padding: 12px 0;
}
.nav-fixed.scrolled .nav-link { color: var(--brand); }
.nav-fixed.scrolled .logo-text { color: var(--brand); }
/* Brand logo */
.brand-logo {
height: 40px;
width: auto;
display: block;
}
.footer-logo { filter: brightness(0) invert(1); -webkit-filter: brightness(0) invert(1);}
@media(max-width:380px){
.brand-logo { height: 32px; }
}
.nav-link {
position: relative;
color: rgba(255,255,255,0.9);
font-size: 15px;
font-weight: 500;
padding: 6px 0;
transition: color .3s;
}
.nav-link::after {
content:''; position:absolute; bottom:0; left:0;
width:0; height:2px; background:var(--accent);
transition: width .3s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover::after { width:100%; }
.nav-link:hover { color: var(--accent-light); }

/* Hero */
.hero-section {
position: relative;
height: 100vh; min-height: 680px;
overflow: hidden;
}
/* ===== Hero 背景图轮播容器（替代原 .hero-bg 单图方案） ===== */
/* 轮播容器：占满 .hero-section，绝对定位，层级在 overlay/particles 之下 */
.hero-bg-carousel {
position: absolute; inset: 0;
}
/* 每张轮播子层：完全叠放，保持原 center/cover no-repeat 定位效果 */
.hero-slide {
position: absolute; inset: 0;
/* 初始透明度为 0，仅当前激活层显示 */
opacity: 0;
/* 淡入淡出过渡：800ms，与 JS 中 TRANSITION_MS 保持一致 */
transition: opacity 800ms ease-in-out;
/* 保留原 .hero-bg 的缓慢缩放动画，每层独立执行 */
transform: scale(1.05);
animation: heroZoom 20s ease-out forwards;
}
/* 当前激活的轮播子层：opacity 1 显示 */
.hero-slide.hero-slide-active {
opacity: 1;
}
@keyframes heroZoom {
from { transform: scale(1.15); }
to { transform: scale(1.02); }
}
.hero-particles {
position: absolute; inset:0;
background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(192,163,117,0.4), transparent),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(192,163,117,0.3), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.4), transparent),
    radial-gradient(2px 2px at 90% 50%, rgba(192,163,117,0.3), transparent);
background-size: 200% 200%;
animation: particleFloat 15s linear infinite;
}
@keyframes particleFloat {
0% { background-position: 0% 0%; }
100% { background-position: 200% 200%; }
}
/* ===== Hero 轮播索引指示器（底部居中的图片索引圆点） ===== */
/* 定位：绝对定位于 hero 底部居中，层级高于遮罩层、低于文字内容层(z-10) */
.hero-indicator {
position: absolute;
bottom: 24px; left: 50%;
transform: translateX(-50%);
z-index: 6;
display: flex; align-items: center; justify-content: center;
gap: 12px;
padding: 4px;
}
/* 单个指示器圆点：默认样式（半透明描边白点） */
.hero-dot {
position: relative;
width: 8px; height: 8px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.6);
background: rgba(255,255,255,0.25);
padding: 0; cursor: pointer;
/* 尺寸、颜色、缩放统一过渡，与轮播 800ms 淡入淡出节奏协调 */
transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
-webkit-tap-highlight-color: transparent;
}
/* 扩大点击热区（移动端也易点击），不占额外布局空间 */
.hero-dot::after {
content: '';
position: absolute; inset: -8px;
}
.hero-dot:hover { background: rgba(255,255,255,0.6); }
.hero-dot:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
/* 当前激活圆点：金色高亮 + 放大 + 光晕，与默认样式形成明显区分 */
.hero-dot.is-active {
background: var(--accent);
border-color: var(--accent-light);
transform: scale(1.5);
box-shadow: 0 0 0 3px rgba(192,163,117,0.22), 0 0 10px rgba(192,163,117,0.65);
}
.hero-dot.is-active:hover { background: var(--accent); }
/* 移动端适配：贴近底部并缩小圆点，保持水平居中且不遮挡 hero 文案与按钮 */
@media (max-width: 768px) {
.hero-indicator { bottom: 32px; gap: 10px; }
.hero-dot { width: 7px; height: 7px; }
}
@media (max-width: 480px) {
.hero-indicator { bottom: 24px; gap: 9px; }
.hero-dot { width: 6px; height: 6px; }
}

.hero-line {
width: 60px; height:3px; background: var(--accent);
margin-bottom: 24px;
animation: lineExpand 1.2s cubic-bezier(.2,.8,.2,1) .5s both;
}
@keyframes lineExpand {
from { width:0; opacity:0; }
to { width:60px; opacity:1; }
}
.hero-title {
font-size: clamp(36px, 6vw, 72px);
font-weight: 900;
line-height: 1.1;
letter-spacing: 2px;
animation: fadeUp 1s cubic-bezier(.2,.8,.2,1) .7s both;
}
.hero-desc {
font-size: clamp(14px, 1.2vw, 17px);
line-height: 1.8;
color: rgba(255,255,255,0.8);
max-width: 600px;
animation: fadeUp 1s cubic-bezier(.2,.8,.2,1) 1.1s both;
}
@keyframes fadeUp {
from { opacity:0; transform: translateY(30px); }
to { opacity:1; transform: translateY(0); }
}
.hero-stats {
display: flex; gap: 40px; margin-top: 48px;
animation: fadeUp 1s cubic-bezier(.2,.8,.2,1) 1.3s both;
}
.hero-stat-num {
font-size: clamp(28px, 3.5vw, 44px);
font-weight: 900;
color: var(--accent);
line-height: 1;
}
.hero-stat-label {
font-size: 13px;
color: rgba(255,255,255,0.7);
margin-top: 6px;
letter-spacing: 1px;
}
.scroll-indicator {
position: absolute; bottom: 40px; left:50%; transform:translateX(-50%);
display: flex; flex-direction:column; align-items:center; gap:8px;
color: rgba(255,255,255,0.6); font-size:12px; letter-spacing:2px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(8px); }
}
.scroll-line { width:1px; height:40px; background: linear-gradient(to bottom, var(--accent), transparent); }

/* Section common */
.section-header { text-align:center; margin-bottom:64px; }
.section-tag {
display:inline-block;
font-size: 12px; letter-spacing:4px;
color: var(--accent);
font-weight:600;
text-transform:uppercase;
margin-bottom:16px;
position:relative; padding: 0 20px;
}
.section-tag::before, .section-tag::after {
content:''; position:absolute; top:50%;
width:16px; height:1px; background:var(--accent);
}
.section-tag::before { left:-4px; }
.section-tag::after { right:-4px; }
.section-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 800;
color: var(--brand);
line-height:1.2;
margin-bottom:16px;
}
.section-subtitle {
font-size: 16px;
color: var(--text-light);
max-width: 680px;
margin: 0 auto;
line-height:1.7;
}

/* Cards */
.glass-card {
background: rgba(255,255,255,0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.8);
border-radius: 16px;
box-shadow: 0 8px 40px rgba(60,52,38,0.06);
transition: all .4s cubic-bezier(.2,.8,.2,1);
}
.glass-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 60px rgba(60,52,38,0.12);
}

/* Advantage icons */
.adv-icon {
width:64px; height:64px;
border-radius: 16px;
display:flex; align-items:center; justify-content:center;
background: linear-gradient(135deg, var(--brand) 0%, var(--blue) 100%);
margin-bottom: 20px;
margin-inline: auto;
position:relative;
}
.adv-icon::after {
content:''; position:absolute; inset:-3px;
border-radius:18px;
background: linear-gradient(135deg, var(--accent), var(--blue-light));
z-index:-1; opacity:0;
transition: opacity .3s;
}
.glass-card:hover .adv-icon::after { opacity:0.3; }

/* Industry cards */
.industry-card {
position:relative;
border-radius:20px;
overflow:hidden;
padding:40px 32px;
background: linear-gradient(145deg, #fff 0%, #faf9f6 100%);
border: 1px solid rgba(60,52,38,0.06);
transition: all .5s cubic-bezier(.2,.8,.2,1);
}
.industry-card::before {
content:''; position:absolute; top:0; left:0; right:0; height:4px;
background: linear-gradient(90deg, var(--accent), var(--blue));
transform: scaleX(0); transform-origin:left;
transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.industry-card:hover::before { transform: scaleX(1); }
.industry-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 60px rgba(60,52,38,0.12);
}
.industry-num {
font-size: 72px;
font-weight:900;
color: rgba(192,163,117,0.12);
position:absolute; top:10px; right:24px;
line-height:1;
}

/* Platform hex */
.hex-item {
text-align:center;
padding: 28px 16px;
border-radius:16px;
background:#fff;
border:1px solid rgba(60,52,38,0.06);
transition: all .4s cubic-bezier(.2,.8,.2,1);
position:relative;
overflow:hidden;
}
.hex-item::before {
content:''; position:absolute; inset:0;
background: linear-gradient(135deg, var(--brand) 0%, var(--blue) 100%);
opacity:0; transition: opacity .4s;
}
.hex-item:hover::before { opacity:1; }
.hex-item:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(60,52,38,0.15); }
.hex-item:hover * { color:#fff !important; position:relative; z-index:1; }
.hex-item:hover .hex-icon-wrap { background: rgba(255,255,255,0.15); }
.hex-icon-wrap {
width:56px; height:56px; border-radius:14px;
background: linear-gradient(135deg, rgba(60,52,38,0.06), rgba(154,110,46,0.08));
display:flex; align-items:center; justify-content:center;
margin: 0 auto 16px;
transition: background .3s;
}

/* Building cards */
.building-card {
border-radius:20px; overflow:hidden;
background:#fff;
box-shadow: 0 4px 24px rgba(60,52,38,0.06);
transition: all .5s cubic-bezier(.2,.8,.2,1);
}
.building-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(60,52,38,0.14);
}
.building-img {
height:220px; overflow:hidden; position:relative;
}
.building-img img {
width:100%; height:100%; object-fit:cover;
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.building-card:hover .building-img img { transform: scale(1.08); }
.building-tag {
position:absolute; top:16px; left:16px;
background: rgba(60,52,38,0.85);
color:#fff; font-size:12px;
padding:6px 14px; border-radius:20px;
backdrop-filter: blur(8px);
}

/* Timeline */
.timeline-wrap { position:relative; }
.timeline-line {
position:absolute; left:50%; top:0; bottom:0;
width:2px; background: linear-gradient(to bottom, var(--accent), var(--blue), var(--brand));
transform: translateX(-50%);
}
@media(max-width:768px){ .timeline-line { left:20px; } }
.timeline-item {
display:flex; align-items:flex-start;
margin-bottom:48px; position:relative;
}
.timeline-item:nth-child(odd) { flex-direction:row; }
.timeline-item:nth-child(even) { flex-direction:row-reverse; }
@media(max-width:768px){
.timeline-item, .timeline-item:nth-child(even) { flex-direction:row; padding-left:50px; }
}
.timeline-dot {
position:absolute; left:50%; top:24px;
width:16px; height:16px; border-radius:50%;
background: var(--accent);
border: 4px solid #fff;
box-shadow: 0 0 0 3px var(--accent);
transform: translateX(-50%);
z-index:2;
}
@media(max-width:768px){ .timeline-dot { left:20px; } }
.timeline-content {
width: calc(50% - 40px);
background:#fff;
padding:28px;
border-radius:16px;
box-shadow: 0 4px 24px rgba(60,52,38,0.06);
border-left: 3px solid var(--accent);
}
@media(max-width:768px){ .timeline-content { width:100%; } }

/* CTA banner */
.cta-banner {
position:relative;
background: linear-gradient(135deg, var(--brand) 0%, var(--blue) 60%, var(--brand-light) 100%);
padding: 80px 0;
overflow:hidden;
}
.cta-banner::before {
content:''; position:absolute; inset:0;
background:
    radial-gradient(circle at 20% 50%, rgba(192,163,117,0.15), transparent 40%),
    radial-gradient(circle at 80% 50%, rgba(184,144,74,0.2), transparent 40%);
}

/* Footer */
.footer {
background: #2f2f2f;
color: rgba(255,255,255,0.6);
padding: 64px 0 32px;
}

/* Btn */
.btn-primary {
display:inline-flex; align-items:center; gap:8px;
background: linear-gradient(135deg, var(--accent) 0%, #b8904a 100%);
color: var(--brand);
font-weight:600;
padding: 14px 32px;
border-radius:50px;
font-size:15px;
transition: all .3s cubic-bezier(.2,.8,.2,1);
border:none; cursor:pointer;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(192,163,117,0.35);
}
.btn-outline {
display:inline-flex; align-items:center; gap:8px;
background: transparent;
color:#fff;
font-weight:500;
padding: 13px 32px;
border-radius:50px;
font-size:15px;
border: 1.5px solid rgba(255,255,255,0.4);
transition: all .3s;
cursor:pointer;
}
.btn-outline:hover {
border-color: var(--accent);
color: var(--accent-light);
background: rgba(192,163,117,0.08);
}

/* Service grid animation */
.service-item {
transition: all .3s;
}
.service-item:hover .service-icon {
background: var(--accent);
color:#fff;
transform: rotate(-6deg) scale(1.08);
}
.service-icon {
width:48px; height:48px;
border-radius:12px;
background: rgba(192,163,117,0.1);
color: var(--accent);
display:flex; align-items:center; justify-content:center;
margin-bottom:16px;
transition: all .4s cubic-bezier(.2,.8,.2,1);
}

/* Number counter */
.big-num {
font-size: clamp(40px, 5vw, 56px);
font-weight:900;
background: linear-gradient(135deg, var(--brand) 0%, var(--blue) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
line-height:1;
}

/* Radiation pattern hero（辐射格局） */
.radiation-hero {
position: relative;
overflow: hidden;
border-radius: 0;
}
.radiation-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
.radiation-panel {
position: relative;
display: flex;
align-items: center;
min-height: 360px;
padding: 40px 0;
}
@media(min-width:768px){
.radiation-panel { min-height: 480px; padding: 56px 0; }
}

/* Gallery */
.gallery-tabs {
display:flex; justify-content:center; gap:12px; margin-bottom:36px;
flex-wrap:wrap;
}
.gallery-grid {
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 180px;
gap: 12px;
}
.gallery-grid.hidden { display:none; }
.gallery-item {
overflow:hidden;
position:relative; cursor:pointer;
border-radius:0;
border:1px solid rgba(60,52,38,0.06);
transition: border-color .3s ease;
}
.gallery-item[data-large] { grid-column: span 2; grid-row: span 2; }
.gallery-item img {
width:100%; height:100%; object-fit:cover;
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.gallery-item:hover { border-color: var(--accent); }
.gallery-item:hover img { transform:scale(1.05); }
.gallery-item::after {
content:''; position:absolute; inset:0;
background: linear-gradient(to top, rgba(60,52,38,0.6), transparent 62%);
opacity:0; transition: opacity .3s;
}
.gallery-item:hover::after { opacity:1; }
.gallery-caption {
position:absolute; bottom:14px; left:16px;
color:#fff; font-weight:400; font-size:15px;
opacity:0; transform: translateY(6px);
transition: all .3s;
z-index:2;
letter-spacing:.02em;
}
.gallery-item:hover .gallery-caption { opacity:1; transform:translateY(0); }

/* Responsive gallery breakpoints */
@media(max-width:1024px){
.gallery-grid { grid-auto-rows: 160px; gap:10px; }
}
@media(max-width:768px){
.gallery-grid {
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
gap:8px;
}
.gallery-item { aspect-ratio: 4 / 3; }
.gallery-item[data-large] { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; }
}
@media(max-width:480px){
.gallery-grid { grid-template-columns: 1fr; gap:8px; }
.gallery-item,
.gallery-item[data-large] { grid-column: span 1; aspect-ratio: 16 / 10; }
}

/* Lightbox */
.lightbox {
position:fixed; inset:0; z-index:1000;
background: rgba(0,0,0,.92);
display:flex; align-items:center; justify-content:center;
opacity:0; visibility:hidden;
transition: opacity .3s;
cursor: zoom-out;
}
.lightbox.open { opacity:1; visibility:visible; }
.lightbox-img {
max-width: 92vw; max-height: 88vh;
object-fit: contain;
border-radius:2px;
box-shadow: 0 4px 40px rgba(0,0,0,.5);
}
.lightbox-close {
position:absolute; top:20px; right:20px;
width:44px; height:44px;
background:rgba(255,255,255,.12); border:0; color:#fff;
font-size:28px; line-height:1; cursor:pointer;
border-radius:50%;
display:flex; align-items:center; justify-content:center;
transition: background .3s;
}
.lightbox-close:hover { background:rgba(255,255,255,.25); }

/* Divider */
.wave-divider {
position:absolute; bottom:-1px; left:0; right:0;
height:80px;
background: var(--bg);
clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
}
.wave-divider-top {
position:absolute; top:-1px; left:0; right:0;
height:80px;
background: var(--bg);
clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
}

/* Tab */
.tab-btn {
padding: 12px 28px;
border-radius:50px;
font-size:15px; font-weight:500;
background: #f5f5f5;
color: var(--text-light);
border:none; cursor:pointer;
transition: all .3s;
}
.tab-btn.active {
background: var(--brand);
color:#fff;
box-shadow: 0 8px 20px rgba(60,52,38,0.2);
}
.tab-panel { display:none; }
.tab-panel.active { display:block; animation: fadeUp .5s; }

/* Mobile menu */
.mobile-menu-wrap {
position:fixed; top:0; left:0; right:0; bottom:0;
z-index:198; overflow:hidden; pointer-events:none;
}
.mobile-menu-wrap.open { pointer-events:auto; }
.mobile-menu {
position:fixed; top:0; right:-100%;
width:80%; max-width:320px; height:100vh;
background:#fff;
z-index:200;
padding: 80px 32px 32px;
transition: right .4s cubic-bezier(.2,.8,.2,1);
box-shadow: -10px 0 40px rgba(0,0,0,0.1);
}
@media(min-width:1024px){
.mobile-menu-wrap, #menuBtn { display:none !important; }
}
.mobile-menu.open { right:0; }
.mobile-overlay {
position:fixed; inset:0;
background: rgba(0,0,0,0.5);
z-index:199;
opacity:0; pointer-events:none;
transition: opacity .3s;
}
.mobile-overlay.open { opacity:1; pointer-events:auto; }

/* ===== 智造厂房图片轮播组件（4-6号楼卡片右侧区域） ===== */
/* 容器：网格堆叠布局，所有图片层共用同一网格单元，高度由最高的图片自然撑开，
   既不依赖固定高度，也不会因切换图片而塌陷。白色底与图纸类图片底色一致 */
.factory-carousel {
position: relative;
display: grid;
align-items: start;          /* 图片层按自身高度贴顶排列，避免被拉伸 */
overflow: hidden;
background: #fff;
}
/* 图片层：叠放在同一格（1/1），通过 opacity 淡入淡出切换，
   始终处于文档流中，保证父容器高度由图片自身内容撑开 */
.factory-slide {
grid-area: 1 / 1;
opacity: 0;                              /* 默认隐藏，仅激活层显示 */
pointer-events: none;                    /* 非激活层不接收点击，避免点到叠在下面的其他图 */
transition: opacity 800ms ease-in-out;   /* 与 JS 中 TRANSITION_MS 保持一致 */
}
/* 图片：宽度铺满容器、高度自适应，完整显示原始构图，不裁剪、不变形 */
.factory-slide img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.factory-slide.factory-slide-active {
opacity: 1;
pointer-events: auto;                    /* 仅当前显示层可点击（点击放大预览） */
}
.factory-slide.factory-slide-active img { cursor: zoom-in; }
/* 索引指示器：置于图片下方的文档流内，不遮挡图纸内容，水平居中 */
.factory-dots {
grid-area: 2 / 1;                       /* 网格第 2 行，与图片区同列 */
justify-self: center;                   /* 水平居中 */
align-self: center;
display: flex; align-items: center; justify-content: center;
gap: 10px;
margin: 14px 0 16px;                    /* 与图片拉开间距，彻底避开图片内容 */
padding: 0;
}
/* 单个指示器圆点（白底浅描边样式，与页面米金色调统一） */
.factory-dot {
position: relative;
width: 9px; height: 9px; border-radius: 50%;
padding: 0; cursor: pointer;
border: 1px solid #cdc4b6;
background: #fff;
transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
-webkit-tap-highlight-color: transparent;
}
/* 扩大点击热区（移动端易点击），不占布局空间 */
.factory-dot::after { content: ''; position: absolute; inset: -8px; }
.factory-dot:hover { background: #ece4d6; border-color: var(--accent); }
.factory-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 激活态圆点：品牌金色实心 + 轻微放大 */
.factory-dot.is-active {
background: var(--accent); border-color: var(--accent);
transform: scale(1.25);
box-shadow: 0 0 0 3px rgba(192,163,117,0.18);
}
/* 移动端适配：圆点略缩小，指示器仍在图片下方居中 */
@media (max-width: 768px) {
.factory-dots { gap: 8px; margin: 12px 0 14px; }
.factory-dot { width: 8px; height: 8px; }
}

/* ==========================================================================
   全链路创新闭环 · 环形闭环方案
   --------------------------------------------------------------------------
   核心：SVG 椭圆弧线作为底层连接，4 个绝对定位的 step 圆点精准落在椭圆
   上（上/右/下/左 4 点），marker-end 自动画顺时针方向的 V 尖箭头。
   ========================================================================== */

/* 外层容器：桌面端保持 SVG viewBox 精确比例 720×380（横向椭圆） */
.loop-ring {
position: relative;
max-width: 720px;
aspect-ratio: 720 / 380;
margin: 0 auto;
}

/* SVG 底层：绝对铺满容器，弧线保持视觉清晰 */
.loop-ring-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

/* 每段弧线：金色实线 + 小圆头 */
.loop-ring-arc {
fill: none;
stroke: var(--accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

/* 节点（圆点 + 文字）：绝对定位到椭圆 4 个方位
   百分比精确匹配 SVG 坐标 ÷ viewBox 尺寸
   transform: translate(-50%, -32px) 让圆点中心落在 SVG 坐标上
   （-32px = 圆点 64px 高度的一半） */
.loop-ring-node {
position: absolute;
z-index: 2;
text-align: center;
transform: translate(-50%, -32px);
}
.loop-ring-node[data-node="top"]    { top: 50px / 380px * 100%;   left: 360px / 720px * 100%; }
.loop-ring-node[data-node="right"]  { top: 190px / 380px * 100%;  left: 680px / 720px * 100%; }
.loop-ring-node[data-node="bottom"] { top: 330px / 380px * 100%;  left: 360px / 720px * 100%; }
.loop-ring-node[data-node="left"]   { top: 190px / 380px * 100%;  left: 40px / 720px * 100%; }

/* 移动端：容器变接近正方形（4:5），让圆环视觉更饱满
   preserveAspectRatio="xMidYMid meet" 会在高度方向留白，
   确保 SVG 椭圆形状不失真 */
@media (max-width: 767px) {
.loop-ring {
aspect-ratio: 4 / 5;
max-width: 380px;
}
/* SVG 保持 720×380 viewBox，meet 模式下居中对齐 */
.loop-ring-svg {
width: auto; height: 100%;
}
/* 移动端节点重新用 calc() 对齐（SVG 高度而非容器高度） */
.loop-ring-node[data-node="top"]    { top: calc(50 / 380 * 100%);   left: calc((100% - 380px * 380/720) / 2 + 360 / 720 * 380px * 380/720 / (380px * 380/720) * 100%); }
.loop-ring-node[data-node="right"]  { top: calc(190 / 380 * 100%);  left: auto; right: calc((100% - 380px * 380/720) / 2); }
.loop-ring-node[data-node="bottom"] { top: calc(330 / 380 * 100%);  left: calc((100% - 380px * 380/720) / 2 + 360 / 720 * 380px * 380/720 / (380px * 380/720) * 100%); }
.loop-ring-node[data-node="left"]   { top: calc(190 / 380 * 100%);  left: calc((100% - 380px * 380/720) / 2); }
}

/* ==========================================================================
   全链路创新闭环 · 时间线方案
   --------------------------------------------------------------------------
   桌面端：中央竖线 + 卡片左右交替 Z 形布局 + 圆点挂在时间线上
   移动端：竖线靠左 + 卡片单侧堆叠 + 圆点挂在时间线上
   ========================================================================== */

/* 时间线外层容器 */
.loop-timeline {
position: relative;
max-width: 720px;
margin: 0 auto;
padding: 24px 0;
}
/* 中央竖线（桌面）—— 绝对定位到容器中轴 */
.loop-timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--accent);
transform: translateX(-50%);
}

/* 单个步骤卡片 */
.loop-step-card {
position: relative;
display: flex;
align-items: center;
margin-bottom: 48px;
}
.loop-step-card:last-child { margin-bottom: 0; }

/* 卡片主体（标题+描述） */
.loop-card-body {
flex: 1;
padding: 20px 24px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
border: 1px solid rgba(192,163,117,0.15);
transition: box-shadow .25s ease;
}
.loop-card-body:hover {
box-shadow: 0 6px 24px rgba(192,163,117,0.20);
}

/* 卡片编号（大字浅灰，作为序号装饰） */
.loop-card-no {
font-family: Oswald, Arial, sans-serif;
font-size: 28px;
font-weight: 700;
color: rgba(192,163,117,0.35);
line-height: 1;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.loop-card-title {
font-size: 18px;
font-weight: 700;
color: var(--brand);
margin-bottom: 6px;
}
.loop-card-desc {
font-size: 13px;
color: var(--text-light);
line-height: 1.5;
}

/* 卡片在左侧：卡片 body 占左半，圆点在右 */
.loop-step-card.is-left { flex-direction: row; }
.loop-step-card.is-left .loop-card-body {
margin-right: calc(50% + 36px);   /* 卡片右端停在中线 72px 之外 */
text-align: right;
}

/* 卡片在右侧：圆点在左，卡片 body 占右半 */
.loop-step-card.is-right { flex-direction: row-reverse; }
.loop-step-card.is-right .loop-card-body {
margin-left: calc(50% + 36px);    /* 卡片左端起于中线 72px 之外 */
text-align: left;
}

/* 圆点 marker：固定 64×64，金色实心 + 白字编号
   绝对定位到时间线上（left: 50% 即中央竖线位置） */
.loop-dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-weight: 700;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
flex-shrink: 0;
box-shadow: 0 0 0 4px #faf9f6, 0 2px 8px rgba(0,0,0,0.15);
}

/* ---------- 移动端：竖线靠左 + 卡片单侧 ---------- */
@media (max-width: 767px) {
.loop-timeline {
max-width: 100%;
padding: 0 0 16px 48px;         /* 左侧留出竖线 + 圆点的空间 */
}
/* 竖线移到 20px 处 */
.loop-timeline::before {
left: 20px;
transform: none;
}
/* 所有卡片统一从左侧展开 */
.loop-step-card { display: block; }
.loop-step-card.is-left,
.loop-step-card.is-right { flex-direction: row; }
.loop-step-card.is-left .loop-card-body,
.loop-step-card.is-right .loop-card-body {
margin: 0 0 0 48px;             /* 卡片左边从圆点右侧展开 */
text-align: left;
}
/* 圆点移到竖线位置 */
.loop-dot {
left: 20px;
transform: translate(-50%, 0);
width: 48px;
height: 48px;
font-size: 14px;
}
.loop-step-card { margin-bottom: 24px; }
}

/* ==========================================================================
   全链路创新闭环 · 横向时间线方案
   --------------------------------------------------------------------------
   核心架构（来自经验 #566004 的反模式修复）：
   · 用 CSS Grid 把「水平主线 + 圆点」从「卡片」坐标系彻底解耦：
     - Grid 4 列 × 3 行（上卡/中线/下卡）
     - 水平主线 ::before 固定在 row 2
     - 圆点 .loop-hdot 固定在 row 2
     - 卡片 .loop-hcard 只负责 row 1 或 row 3（上/下交替）
   · 这样无论卡片多高、什么断点，圆点永远稳定落在主线上，不会歪。
   ========================================================================== */

/* 容器：桌面 4 列 × 3 行 Grid */
.loop-htimeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto 80px auto;
gap: 0 16px;
max-width: 800px;
margin: 0 auto;
}

/* 水平主线：横跨所有列，固定在中间行 row 2 */
.loop-htimeline::before {
content: '';
grid-row: 2;
grid-column: 1 / -1;
align-self: center;
height: 2px;
background: var(--accent);
}

/* step wrapper 用 display: contents，让子元素直接参与父级 Grid */
.loop-hstep { display: contents; }

/* 每个 step 的圆点：固定在中间行 row 2，列由父级 data-step 决定 */
.loop-hdot {
grid-row: 2;
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-weight: 700;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;          /* 在自己的列内水平居中 */
position: relative;
z-index: 2;              /* 压在主线之上 */
box-shadow: 0 0 0 1px #faf9f6, 0 2px 8px rgba(0,0,0,0.15);
}

/* 圆点归属列 */
.loop-hstep[data-step="1"] .loop-hdot { grid-column: 1; }
.loop-hstep[data-step="2"] .loop-hdot { grid-column: 2; }
.loop-hstep[data-step="3"] .loop-hdot { grid-column: 3; }
.loop-hstep[data-step="4"] .loop-hdot { grid-column: 4; }

/* 卡片基础样式 */
.loop-hcard {
padding: 16px;
background: #fff;
border-radius: 10px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border: 1px solid rgba(192,163,117,0.12);
min-width: 0;
}
.loop-htitle {
font-size: 16px;
font-weight: 700;
color: var(--brand);
}

/* 上方卡片：row 1，靠底边对齐到 row 2（用 margin-bottom:auto 贴紧中间行） */
.loop-hcard.is-above {
grid-row: 1;
margin-bottom: auto;   /* 拉到 row 1 底部，贴近 row 2 中线 */
}
/* 下方卡片：row 3，靠顶边对齐到 row 2 */
.loop-hcard.is-below {
grid-row: 3;
margin-top: auto;      /* 拉到 row 3 顶部，贴近 row 2 中线 */
}

/* 卡片归属列（必须和对应圆点同列！） */
.loop-hstep[data-step="1"] .loop-hcard { grid-column: 1; }
.loop-hstep[data-step="2"] .loop-hcard { grid-column: 2; }
.loop-hstep[data-step="3"] .loop-hcard { grid-column: 3; }
.loop-hstep[data-step="4"] .loop-hcard { grid-column: 4; }

/* ---------- 移动端：变竖向 Flex 时间线 ---------- */
@media (max-width: 767px) {
.loop-htimeline {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 320px;
padding: 0 0 16px 56px;         /* 左侧留出竖线 + 圆点空间 */
}
/* 水平主线变左侧竖线 */
.loop-htimeline::before {
content: '';
position: absolute;
/* 圆点中心 = 容器 padding-left(56px) + step 内 left(20px) = 76px，竖线与之对齐 */
left: 76px;
transform: translateX(-50%);
top: 0;
bottom: 24px;
width: 2px;
height: auto;
/* 关键：覆盖桌面端 align-self:center —— abspos 元素 align-self 非 stretch 时
   height:auto 会退化为 fit-content，导致竖线高度塌缩为 0 */
align-self: stretch;
}
/* step wrapper 不再用 display: contents，改成 block 承载自己的卡+圆点 */
.loop-hstep {
display: block;
position: relative;
}
/* 圆点：固定在左侧竖线位置，不随卡片位移 */
.loop-hdot {
grid-row: auto;        /* 清掉 grid-row */
position: absolute;
left: 20px;
top: 10px;
transform: translate(-50%, 0);
width: 48px;
height: 48px;
font-size: 14px;
}
/* 卡片：取消 grid-row/column，变成正常 block */
.loop-hcard {
grid-row: auto;
grid-column: auto;
margin: 0 0 0 48px;              /* 卡片在圆点右侧 */
text-align: left;
}
.loop-hcard.is-above,
.loop-hcard.is-below {
margin-top: 0;
margin-bottom: 0;
}
}