/* ============================================================
   技术实力页 - 专属样式
   布艺配饰风 · 线轴样片墙 + 缝线记分牌 + 代码编辑器
   ============================================================ */

/* ---------- Banner 定制 ---------- */
.tech-banner { padding-bottom: 90px; }
.tech-banner h1 em {
    font-style: normal; color: var(--lotus-deep); position: relative;
}
.tech-banner h1 em::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 10px;
    background: var(--sage-soft); z-index: -1; border-radius: 6px;
}
/* 技术关键词布片 */
.tech-chips {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px;
}
.tech-chips span {
    padding: 7px 16px; border-radius: 2px 16px 16px 2px;
    background: var(--white); border: 1px solid var(--line);
    font-size: .85rem; color: var(--ink); font-weight: 500; letter-spacing: 1px;
    box-shadow: var(--shadow-sm);
}
.tech-chips span:nth-child(2n) {
    background: var(--sage-soft); border-color: var(--sage); color: var(--sage-deep);
    border-radius: 16px 2px 2px 16px;
}
.tech-chips span:nth-child(3n) {
    background: var(--lotus-soft); border-color: var(--lotus); color: var(--lotus-deep);
}
/* Banner 缝线点装饰 */
.tech-banner-dots {
    position: absolute; bottom: 28px; left: 6%; display: flex; gap: 12px;
}
.tech-banner-dots span {
    width: 9px; height: 9px; border-radius: 50%; background: var(--lotus);
}
.tech-banner-dots span:nth-child(2n) { background: var(--sage); }
.tech-banner-dots span:nth-child(3n) { background: var(--lotus-deep); }

/* ============================================================
   技术栈:线轴样片墙(三张错落样片卡)
   ============================================================ */
.tech-stack {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
    align-items: start;
}
.swatch-card {
    background: var(--white); border-radius: var(--radius);
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    position: relative; padding: 44px 30px 30px;
    transition: transform .4s, box-shadow .4s;
}
/* 手工感:轻微旋转 + 上下错位 */
.swatch-card:nth-child(1) { transform: translateY(18px) rotate(-.6deg); }
.swatch-card:nth-child(2) { transform: translateY(-12px) rotate(.5deg); }
.swatch-card:nth-child(3) { transform: translateY(28px) rotate(-.4deg); }
.swatch-card:hover {
    transform: translateY(-6px) rotate(0deg); box-shadow: var(--shadow);
}
/* 顶部布艺标签(线轴贴签) */
.swatch-tab {
    position: absolute; top: -16px; left: 26px;
    background: var(--lotus-deep); color: var(--white);
    padding: 8px 20px; border-radius: 4px 4px 12px 12px;
    font-family: var(--f-serif); font-size: .92rem; letter-spacing: 2px;
    box-shadow: var(--shadow-sm);
}
.swatch-tab::before {
    content: ""; position: absolute; top: -8px; left: 14px; width: 2px; height: 12px;
    background: var(--ink-mute);
}
.swatch-card.sage .swatch-tab { background: var(--sage-deep); }

.swatch-body { display: flex; flex-direction: column; gap: 22px; }
.swatch-item {
    display: flex; align-items: flex-start; gap: 16px;
    padding-bottom: 20px; border-bottom: 1px dashed var(--line);
}
.swatch-item:last-child { border-bottom: none; padding-bottom: 0; }
.sw-ic {
    width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center; background: var(--lotus-soft);
}
.sw-ic.sage { background: var(--sage-soft); }
.sw-ic svg { width: 28px; height: 28px; }
.swatch-item h4 { font-size: 1.1rem; margin-bottom: 4px; }
.swatch-item p { font-size: .88rem; }

/* ============================================================
   技术能力数据:缝线记分牌(卷尺风)
   ============================================================ */
.tech-data {
    background: var(--lotus-soft); position: relative; overflow: hidden;
}
/* 顶部缝线刻度 */
.tech-data::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px;
    background: repeating-linear-gradient(90deg,
        var(--lotus-deep) 0 2px, transparent 2px 24px,
        var(--lotus-deep) 24px 26px, transparent 26px 48px);
    opacity: .35;
}
.tech-data::after {
    content: ""; position: absolute; right: -80px; bottom: -80px;
    width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.28);
}
.tech-tape {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    position: relative; z-index: 2;
}
.tape-item {
    background: var(--white); border-radius: var(--radius);
    padding: 36px 20px; text-align: center; border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); position: relative;
}
/* 卡片顶部小三角(卷尺拉片) */
.tape-item::before {
    content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;
    border-bottom: 12px solid var(--white);
}
.tape-item .num {
    font-family: var(--f-serif); font-size: clamp(2.2rem, 4vw, 3rem);
    color: var(--lotus-deep); font-weight: 600; line-height: 1;
}
.tape-item:nth-child(2n) .num { color: var(--sage-deep); }
.tape-item .lbl {
    font-size: .9rem; color: var(--ink-soft); margin-top: 14px;
}

/* ============================================================
   性能优化清单:线轴勾选卡
   ============================================================ */
.tech-perf-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 24px; margin-bottom: 50px;
}
.perf-stamp {
    display: inline-grid; place-items: center;
    width: 110px; height: 110px; border-radius: 50%;
    border: 2px dashed var(--sage-deep); color: var(--sage-deep);
    font-family: var(--f-serif); font-size: 1.05rem; letter-spacing: 2px;
    transform: rotate(8deg); background: var(--cream);
    line-height: 1.3; text-align: center;
}
.perf-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.perf-card {
    background: var(--white); border-radius: var(--radius); padding: 34px 30px;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    transition: transform .4s, box-shadow .4s; position: relative;
}
/* 手工感旋转 */
.perf-card:nth-child(1) { transform: rotate(-.5deg); }
.perf-card:nth-child(2) { transform: rotate(.4deg); }
.perf-card:nth-child(3) { transform: rotate(.5deg); }
.perf-card:nth-child(4) { transform: rotate(-.4deg); }
.perf-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow); }
/* 右上角缝线角标 */
.perf-card::after {
    content: ""; position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
    border-top: 2px dashed var(--sage); border-right: 2px dashed var(--sage);
    border-top-right-radius: 8px; opacity: .6;
}

.perf-top {
    display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
    padding-bottom: 22px; border-bottom: 1px dashed var(--line);
}
.perf-ic {
    width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
    background: var(--lotus-soft); flex-shrink: 0;
}
.perf-ic.sage { background: var(--sage-soft); }
.perf-ic svg { width: 28px; height: 28px; }
.perf-top .perf-no {
    display: block; font-family: var(--f-serif); font-size: .82rem;
    color: var(--lotus-deep); letter-spacing: 2px; margin-bottom: 2px;
}
.perf-card.sage .perf-no { color: var(--sage-deep); }
.perf-top h3 { font-size: 1.3rem; }

.perf-list { display: flex; flex-direction: column; gap: 14px; }
.perf-list li {
    display: flex; align-items: center; gap: 14px; font-size: .95rem; color: var(--ink);
    transition: color .3s, transform .3s;
}
.perf-list li:hover { color: var(--lotus-deep); transform: translateX(6px); }
.perf-card.sage .perf-list li:hover { color: var(--sage-deep); }
.perf-check {
    width: 22px; height: 22px; flex-shrink: 0;
    color: var(--white); background: var(--lotus-deep);
    border-radius: 50%; padding: 3px; box-sizing: border-box;
    box-shadow: 0 2px 6px -2px rgba(199, 156, 146, .6);
}
.perf-card.sage .perf-check {
    background: var(--sage-deep); box-shadow: 0 2px 6px -2px rgba(147, 171, 132, .6);
}

/* ============================================================
   开发规范:代码编辑器 + 规范清单
   ============================================================ */
.standard-grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start;
}
/* 代码编辑器模拟 */
.code-mock {
    background: #2c2823; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); border: 1px solid #3d3934;
}
.code-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 18px; background: #3d3934;
}
.code-bar .dot {
    width: 12px; height: 12px; border-radius: 50%;
}
.code-bar .dot.r { background: #e07a6f; }
.code-bar .dot.y { background: #e3b86a; }
.code-bar .dot.g { background: #8fb879; }
.code-bar em {
    margin-left: 12px; font-size: .82rem; color: #b3a290;
    font-style: normal; letter-spacing: 1px;
}
.code-body {
    margin: 0; padding: 24px 22px; overflow-x: auto;
    font-family: "SF Mono", "Consolas", "Microsoft YaHei", monospace;
    font-size: .88rem; line-height: 2; color: #d9cdbd;
}
.code-body code { display: block; white-space: pre; }
.code-body .ln {
    display: inline-block; width: 26px; text-align: right; margin-right: 18px;
    color: #6b645c; user-select: none;
}
.code-body .cmt { color: #8a7f72; font-style: italic; }
.code-body .tag { color: var(--lotus); }
.code-body .prop { color: #e3b86a; }
.code-body .val { color: #8fb879; }
.code-body .kw { color: #e0a3a3; }

/* 规范清单 */
.standard-list {
    display: flex; flex-direction: column; gap: 18px;
}
.std-item {
    display: flex; gap: 18px; align-items: flex-start;
    background: var(--white); border-radius: var(--radius);
    padding: 22px 24px; border: 1px solid var(--line);
    box-shadow: var(--shadow-sm); transition: transform .4s, box-shadow .4s;
}
.std-item:hover { transform: translateX(8px); box-shadow: var(--shadow); }
.std-no {
    font-family: var(--f-serif); font-size: 1.6rem; font-weight: 600;
    color: var(--lotus-deep); line-height: 1; flex-shrink: 0;
}
.std-item:nth-child(2n) .std-no { color: var(--sage-deep); }
.std-item h4 { font-size: 1.08rem; margin-bottom: 4px; }
.std-item p { font-size: .9rem; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 980px) {
    .tech-stack { grid-template-columns: 1fr; gap: 40px; }
    .swatch-card { transform: rotate(0deg) !important; }
    .tech-tape { grid-template-columns: repeat(2, 1fr); }
    .perf-grid { grid-template-columns: 1fr; }
    .perf-card { transform: rotate(0deg) !important; }
    .standard-grid { grid-template-columns: 1fr; gap: 30px; }
    .perf-stamp { display: none; }
}
@media (max-width: 560px) {
    .tech-tape { grid-template-columns: 1fr; }
    .tech-banner-dots { display: none; }
    .code-body { font-size: .78rem; }
}