@charset "utf-8";
/* ==================================================================
   苏州大自然门窗 · 内页样式
   依赖 css/home.css（设计变量 --ink / --gold / --wrap / --ease 均来自它）
   只写内页专属的版式，不重复首页已有内容
   ================================================================== */

/* ---------- 浅色背景上的线框按钮 ---------- */
.btn-dark{border:1px solid rgba(12,20,17,.22);color:var(--ink);background:transparent;}
.btn-dark:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px);}

/* ---------- 区块通用 ---------- */
.sec-hd{margin-bottom:52px;}
.sec-hd h2{font-size:clamp(28px,3.2vw,40px);font-weight:600;letter-spacing:.02em;line-height:1.3;}
.sec-hd .kicker{margin-bottom:14px;}

.pnote{margin-top:26px;font-size:13.5px;line-height:1.9;color:var(--muted);}

/* ==================================================================
   内页头部（深墨绿通栏）
   ================================================================== */
.phd{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 82% -10%, rgba(198,161,91,.20), transparent 62%),
    linear-gradient(160deg,var(--ink) 0%, var(--ink2) 58%, var(--ink3) 100%);
  padding:76px 0 88px;
}
.phd::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
}
.phd>.wrap{position:relative;z-index:2;}

/* 面包屑 */
.crumb{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.45);margin-bottom:46px;}
.crumb a{color:rgba(255,255,255,.62);transition:color .3s;}
.crumb a:hover{color:var(--gold2);}
.crumb i{font-style:normal;color:rgba(255,255,255,.22);}
.crumb span{color:rgba(255,255,255,.85);}

/* 头部文字 */
.phd-tx{max-width:820px;}
.phd-tx h1,.phd-tx h2{font-size:clamp(34px,4.4vw,56px);font-weight:600;color:#fff;line-height:1.16;letter-spacing:.01em;margin-bottom:20px;}
.phd-tx .desc{font-size:16.5px;line-height:2;color:rgba(255,255,255,.72);max-width:720px;}

/* 头部数字条 */
.phd-stat{display:flex;flex-wrap:wrap;gap:0;margin-top:54px;border-top:1px solid var(--line2);padding-top:30px;}
.phd-stat li{padding-right:56px;margin-right:56px;border-right:1px solid var(--line2);}
.phd-stat li:last-child{border-right:0;margin-right:0;padding-right:0;}
.phd-stat b{display:block;font-size:clamp(26px,3vw,38px);font-weight:600;color:var(--gold);line-height:1.1;letter-spacing:.01em;}
.phd-stat span{display:block;margin-top:8px;font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.06em;}

/* ==================================================================
   产品列表
   ================================================================== */
.plist{background:var(--paper2);padding:92px 0 100px;}

.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}

.pcard{
  display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.pcard:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(12,20,17,.13);border-color:rgba(198,161,91,.42);}

/* 卡片图区 */
.pc-pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink2);}
.pc-pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.pcard:hover .pc-pic img{transform:scale(1.07);}
.pc-pic::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(12,20,17,.72),rgba(12,20,17,.06) 62%);}

/* 线稿图标浮在图上 */
.pc-ico{position:absolute;left:24px;bottom:22px;z-index:2;color:var(--gold2);opacity:.95;}
.pc-ico svg{width:52px;height:52px;}

/* 分类角标 */
.pc-cat{
  position:absolute;right:18px;top:18px;z-index:2;
  padding:6px 14px;font-size:12px;letter-spacing:.1em;color:var(--ink);
  background:linear-gradient(135deg,var(--gold),var(--gold2));
}

/* 卡片文字 */
.pc-tx{position:relative;padding:30px 30px 32px;display:flex;flex-direction:column;flex:1;}
.pc-no{
  position:absolute;right:26px;top:24px;
  font-size:34px;font-weight:600;color:rgba(12,20,17,.07);line-height:1;letter-spacing:.02em;
}
.pc-tx h3{font-size:21px;font-weight:600;color:var(--text);letter-spacing:.01em;margin-bottom:6px;}
.pc-en{display:block;font-size:11px;letter-spacing:.2em;color:var(--gold);margin-bottom:16px;text-transform:uppercase;}
.pc-tx p{font-size:14.5px;line-height:1.95;color:var(--muted);flex:1;}

.pc-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 22px;}
.pc-tags em{
  font-style:normal;font-size:12px;letter-spacing:.02em;color:var(--green);
  padding:5px 11px;border:1px solid rgba(46,90,74,.24);background:rgba(46,90,74,.055);
}

.pc-more{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.02em;
  padding-top:20px;border-top:1px solid var(--line);
}
.pc-more i{font-style:normal;color:var(--gold);transition:transform .35s var(--ease);}
.pcard:hover .pc-more i{transform:translateX(6px);}
.pcard:hover .pc-more{color:var(--gold);}

/* ==================================================================
   详情页头部
   ================================================================== */
.pdh{padding:64px 0 82px;}
.pdh-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}

.pdh-tx h1{font-size:clamp(32px,4vw,50px);font-weight:600;color:#fff;line-height:1.18;margin-bottom:10px;}
.pdh-tx .en{display:block;font-size:12px;letter-spacing:.26em;color:rgba(255,255,255,.4);margin-bottom:24px;text-transform:uppercase;}
.pdh-tx .lead{font-size:16px;line-height:2.05;color:rgba(255,255,255,.74);max-width:640px;}

.pdh-tags{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 34px;}
.pdh-tags em{
  font-style:normal;font-size:12.5px;letter-spacing:.03em;color:var(--gold2);
  padding:7px 14px;border:1px solid rgba(198,161,91,.34);background:rgba(198,161,91,.09);
}

.pdh-btns{display:flex;gap:14px;flex-wrap:wrap;}

.pdh-pic{border:1px solid var(--line2);overflow:hidden;aspect-ratio:4/3;background:rgba(255,255,255,.03);}
.pdh-pic img{width:100%;height:100%;object-fit:cover;display:block;}

/* ==================================================================
   技术参数
   ================================================================== */
.pspec{background:var(--paper);padding:90px 0 96px;}
.spec-wrap{border-top:2px solid var(--ink);}
.spec{width:100%;border-collapse:collapse;}
.spec tr{border-bottom:1px solid var(--line);transition:background .3s;}
.spec tr:hover{background:var(--paper2);}
.spec th{
  width:180px;text-align:left;vertical-align:top;
  padding:22px 28px 22px 0;font-size:15px;font-weight:600;color:var(--text);
  white-space:nowrap;letter-spacing:.02em;
}
.spec td{padding:22px 0;font-size:15px;line-height:1.9;color:var(--muted);}

/* ==================================================================
   为什么好用（深墨绿）
   ================================================================== */
.pwhy{
  background:linear-gradient(160deg,var(--ink) 0%,var(--ink2) 100%);
  padding:92px 0 96px;
}
.pwhy .sec-hd h2{color:#fff;}

.ptgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.pt{
  padding:40px 34px;border:1px solid var(--line2);
  background:rgba(255,255,255,.028);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .5s var(--ease);
}
.pt:hover{border-color:rgba(198,161,91,.4);background:rgba(198,161,91,.055);transform:translateY(-6px);}
.pt-no{
  display:block;font-size:13px;font-weight:600;letter-spacing:.24em;
  color:var(--gold);margin-bottom:20px;
}
.pt h3{font-size:19px;font-weight:600;color:#fff;margin-bottom:14px;line-height:1.5;}
.pt p{font-size:14.5px;line-height:2;color:rgba(255,255,255,.62);}

/* 适用场景 */
.scene{margin-top:56px;padding-top:40px;border-top:1px solid var(--line2);}
.scene h4{font-size:15px;font-weight:600;color:#fff;margin-bottom:20px;letter-spacing:.04em;}
.scene-tags{display:flex;flex-wrap:wrap;gap:10px;}
.scene-tags em{
  font-style:normal;font-size:13.5px;color:rgba(255,255,255,.78);
  padding:9px 18px;border:1px solid var(--line2);background:rgba(255,255,255,.03);
  transition:all .35s var(--ease);
}
.scene-tags em:hover{border-color:var(--gold);color:var(--gold2);}

/* ==================================================================
   图集
   ================================================================== */
.pgal{background:var(--paper);padding:88px 0 92px;}
.gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;}
.gal{overflow:hidden;aspect-ratio:16/10;background:var(--paper3);}
.gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.gal:hover img{transform:scale(1.06);}

/* ==================================================================
   其他产品
   ================================================================== */
.pother{background:var(--paper2);padding:90px 0 96px;}
.pgrid-mini{gap:28px;}
.pgrid-mini .pc-tx{padding:26px 26px 28px;}
.pgrid-mini .pc-tx h3{font-size:19px;}
.pgrid-mini .pc-pic{aspect-ratio:16/10;}

/* ==================================================================
   预约 CTA
   ================================================================== */
.pcta{
  background:
    radial-gradient(760px 380px at 20% 0%, rgba(198,161,91,.16), transparent 60%),
    linear-gradient(150deg,var(--ink) 0%,var(--ink3) 100%);
  padding:88px 0 96px;
}
.pcta-in{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:center;}
.pcta-in .tx h2{font-size:clamp(26px,3vw,36px);font-weight:600;color:#fff;line-height:1.35;margin-bottom:18px;}
.pcta-in .tx p{font-size:15.5px;line-height:2;color:rgba(255,255,255,.66);}

.pcta-form .row{display:flex;gap:14px;margin-bottom:14px;}
.pcta-form input,
.pcta-form select{
  flex:1;min-width:0;height:54px;padding:0 18px;
  background:rgba(255,255,255,.06);border:1px solid var(--line2);
  color:#fff;font-size:15px;font-family:inherit;outline:none;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.pcta-form input::placeholder{color:rgba(255,255,255,.38);}
.pcta-form select{color:rgba(255,255,255,.8);cursor:pointer;}
.pcta-form select option{color:var(--text);background:#fff;}
.pcta-form input:focus,
.pcta-form select:focus{border-color:var(--gold);background:rgba(255,255,255,.09);}

.pcta-form button{
  flex:1;height:54px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--ink);font-size:15.5px;font-weight:600;letter-spacing:.04em;font-family:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pcta-form button:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(198,161,91,.4);}

.pcta-form .tip{margin-top:6px;font-size:13px;color:rgba(255,255,255,.42);}
.pcta-form .msg{
  display:none;margin-top:14px;padding:13px 18px;font-size:14px;line-height:1.7;
  background:rgba(198,161,91,.13);border-left:3px solid var(--gold);color:var(--gold2);
}
.pcta-form .msg.show{display:block;}

/* ==================================================================
   响应式
   ================================================================== */
@media (max-width:1200px){
  .pgrid{grid-template-columns:repeat(2,1fr);gap:28px;}
  .phd-stat li{padding-right:38px;margin-right:38px;}
  .pdh-grid{gap:44px;}
}
@media (max-width:980px){
  .phd{padding:58px 0 66px;}
  .crumb{margin-bottom:34px;}
  .phd-stat{margin-top:40px;}
  .phd-stat li{padding-right:26px;margin-right:26px;}
  .plist,.pspec,.pwhy,.pgal,.pother,.pcta{padding:64px 0 70px;}
  .pdh-grid{grid-template-columns:1fr;gap:38px;}
  .pcta-in{grid-template-columns:1fr;gap:38px;}
  .ptgrid{grid-template-columns:1fr;gap:20px;}
  .gal-grid{grid-template-columns:1fr;gap:18px;}
  .sec-hd{margin-bottom:38px;}
}
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr;gap:22px;}
  .phd-stat{gap:22px 0;}
  .phd-stat li{padding-right:0;margin-right:0;border-right:0;width:50%;}
  .pcta-form .row{flex-direction:column;gap:12px;}
  .spec th{width:104px;padding:16px 16px 16px 0;font-size:14px;white-space:normal;}
  .spec td{padding:16px 0;font-size:14px;}
  .pc-tx{padding:24px 22px 26px;}
  .pt{padding:30px 24px;}
}