/* sgnce — 品牌总入口首页。
   配色与子站（nce / pled）统一为浅色系，避免首页与内页割裂。 */

:root{
  --ink:#0c1420; --ink-2:#33414f; --ink-3:#67747f;
  --paper:#ffffff; --paper-2:#f4f6f8; --paper-3:#e8ecf0;
  --line:rgba(12,20,32,.10); --line-2:rgba(12,20,32,.17);
  --blue:#12539b; --blue-d:#0d3f78; --blue-soft:rgba(18,83,155,.09);
  --amber:#b8730a; --amber-soft:rgba(184,115,10,.10);
  --shadow:0 1px 2px rgba(12,20,32,.05), 0 14px 38px -20px rgba(12,20,32,.30);
  --sans:'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp:'Sora', var(--sans);
  --wrap:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6;
}
h1,h2,h3{font-family:var(--disp); font-weight:700; letter-spacing:-.025em; line-height:1.08; margin:0}
p{margin:0}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.eyebrow{font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; margin:0 0 18px; color:var(--blue)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-weight:600; font-size:15px; padding:14px 28px; border-radius:999px;
  border:1px solid transparent; cursor:pointer; transition:transform .18s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease}
.btn--primary{background:var(--blue); color:#fff; box-shadow:0 10px 30px -14px rgba(18,83,155,.55)}
.btn--primary:hover{transform:translateY(-2px); background:var(--blue-d)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{transform:translateY(-2px); background:var(--paper-2); border-color:var(--ink)}
.btn--sm{padding:10px 20px; font-size:14px}

/* ---------- header ---------- */
.hdr{position:fixed; top:0; left:0; right:0; z-index:60; transition:background .3s ease, border-color .3s ease, box-shadow .3s}
.hdr__in{display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px}
.hdr.is-stuck{background:rgba(255,255,255,.86); backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:800; font-size:19px; letter-spacing:-.01em}
.brand__mark{width:30px; height:30px; flex:none}
.nav{display:flex; align-items:center; gap:30px}
.nav a{font-size:14.5px; color:var(--ink-2); font-weight:500; transition:color .2s}
.nav a:hover{color:var(--ink)}
@media (max-width:880px){ .nav{display:none} }

/* ---------- hero · 方案A「剖面」 ----------
   路面之上：封道 + 便携信号；地面之下：按国际标记色分色的管线走廊。
   画法用工程制图语言（细线、斜纹剖面填充、埋深标注），不是插画风。 */
:root{
  --u-elec:#c8102e; --u-gas:#d99b00; --u-water:#0b6bcb; --u-tel:#e06a12;
  --earth:#e9e3d8; --asphalt:#242b34;
}
.hero{position:relative; overflow:hidden; background:linear-gradient(#f9fbfd,#eef3f8)}
.hero__in{position:relative; z-index:2; padding:150px 0 54px}
.hero h1{font-size:clamp(38px, 6vw, 70px); max-width:14ch}
.hero__sub{margin:24px 0 0; max-width:52ch; font-size:clamp(16px,1.9vw,19px); color:var(--ink-2)}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}

/* 剖面图整体 */
.xs{position:relative; margin-top:44px}
/* 天空带：设备立在路面上。交通灯是目前唯一在收钱的业务线，
   上半部不能被地下压成配角——设备画大、带灯杆，占满右半幅。 */
.xs__sky{position:relative; height:158px}
.xs-sig{position:absolute; bottom:26px; width:36px; height:92px; border-radius:6px; background:var(--asphalt);
  border:1px solid rgba(255,255,255,.4); display:flex; flex-direction:column; align-items:center;
  justify-content:space-evenly; box-shadow:0 8px 18px -9px rgba(12,20,32,.55)}
.xs-sig::after{content:''; position:absolute; top:100%; left:50%; margin-left:-2.5px;
  width:5px; height:26px; background:var(--asphalt)}
.xs-sig i{width:17px; height:17px; border-radius:50%; background:rgba(255,255,255,.16)}
.xs-sig i.on-r{background:#e8402e; box-shadow:0 0 14px rgba(232,64,46,.85)}
.xs-sig i.on-g{background:#2ecc71; box-shadow:0 0 14px rgba(46,204,113,.85)}
.xs-cone{position:absolute; bottom:0; width:0; height:0; border-left:12px solid transparent;
  border-right:12px solid transparent; border-bottom:32px solid var(--u-tel); filter:drop-shadow(0 2px 3px rgba(12,20,32,.3))}
.xs-cone::after{content:''; position:absolute; left:-8px; top:17px; width:16px; height:5px; background:#fff; opacity:.9}
.xs-tag{position:absolute; bottom:128px; right:5%; font-size:12.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap}
/* 设备横向定位集中在这里，窄屏统一改间距，避免行内样式没法按断点调 */
.xs-sig--a{right:31%} .xs-sig--b{right:4%}
.xs-cone--1{right:10%} .xs-cone--2{right:15%} .xs-cone--3{right:20%} .xs-cone--4{right:25%}
@media (max-width:600px){
  .xs-sig--a{right:76%} .xs-sig--b{right:3%}
  .xs-cone--1{right:18%} .xs-cone--2{right:31%} .xs-cone--3{right:44%} .xs-cone--4{right:57%}
  .xs__closed{width:72%}
}
/* 路面带 */
.xs__road{position:relative; height:54px; background:var(--asphalt)}
.xs__cl{position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px;
  background:repeating-linear-gradient(90deg,#fff 0 30px, transparent 30px 60px); opacity:.6}
.xs__closed{position:absolute; top:0; bottom:50%; right:0; width:40%;
  background:repeating-linear-gradient(-45deg, rgba(224,106,18,.6) 0 11px, transparent 11px 24px)}
/* 地下 */
.xs__ground{position:relative; display:grid; grid-template-columns:1.35fr 1fr; gap:0;
  background:var(--earth); border-bottom:1px solid var(--line-2)}
.xs__ground::before{content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(-38deg, rgba(12,20,32,.05) 0 1px, transparent 1px 8px)}
.xs__pipes{position:relative; height:340px}
/* 深度刻度只在宽屏显示：窄屏没有左侧留白，会压到管线起点 */
.xs__tick{position:absolute; left:12px; transform:translateY(-50%); font-size:10.5px;
  color:var(--ink-3); font-weight:600; letter-spacing:.05em}
.xs__tick::after{content:''; position:absolute; left:calc(100% + 6px); top:50%; width:14px; height:1px; background:var(--ink-3); opacity:.5}
@media (max-width:1000px){ .xs__tick{display:none} }
.xs-pipe{position:absolute; height:6px; border-radius:3px; background:var(--c);
  box-shadow:0 0 0 2.5px color-mix(in srgb, var(--c) 22%, transparent);
  opacity:0; transform:scaleX(.2); transform-origin:left center;
  transition:opacity .6s ease var(--d), transform .8s cubic-bezier(.2,.7,.2,1) var(--d)}
.xs.is-live .xs-pipe{opacity:1; transform:scaleX(1)}
.xs-pipe b{position:absolute; left:2px; bottom:9px; font-size:11.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
  opacity:0; transition:opacity .5s ease calc(var(--d) + .45s)}
.xs.is-live .xs-pipe b{opacity:1}
.xs__count{position:absolute; left:10%; right:8%; bottom:12px; margin:0; font-size:13.5px; color:var(--ink-2)}
.xs__count b{font-family:var(--disp); color:var(--ink)}
/* 地下右半：B 方向那句话作主标语 */
.xs__note{position:relative; align-self:center; padding:34px 8% 34px 34px;
  border-left:1px solid rgba(12,20,32,.14)}
.xs__law{font-family:var(--disp); font-size:clamp(19px,2.2vw,26px); font-weight:700;
  letter-spacing:-.015em; line-height:1.25; color:var(--ink)}
.xs__law em{font-style:normal; color:var(--u-elec)}
.xs__law2{margin-top:10px; font-size:clamp(15px,1.7vw,18px); color:var(--ink-2)}
.xs__go{display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-weight:600;
  font-size:15px; color:var(--blue)}
.xs__go svg{width:16px; height:16px}
@media (max-width:820px){
  .hero__in{padding-top:120px}
  .xs__sky{height:118px}
  .xs-sig{width:28px; height:70px; bottom:20px}
  .xs-sig::after{height:20px}
  .xs-sig i{width:13px; height:13px}
  .xs-cone{border-left-width:9px; border-right-width:9px; border-bottom-width:25px}
  .xs-cone::after{left:-6px; top:13px; width:12px; height:4px}
  .xs__ground{grid-template-columns:1fr}
  .xs__pipes{height:280px}
  .xs__note{border-left:none; border-top:1px solid rgba(12,20,32,.14); padding:26px 24px 30px}
  .xs-tag{display:none}
}
@media (prefers-reduced-motion:reduce){
  .xs-pipe, .xs-pipe b{opacity:1; transform:none; transition:none}
}

/* ---------- sections ---------- */
.sec{padding:110px 0; position:relative}
.sec__head{max-width:66ch; margin-bottom:56px}
.sec__head--mid{margin-left:auto; margin-right:auto; text-align:center}
.sec__head h2{font-size:clamp(28px,4vw,44px)}
.sec__head p{margin-top:20px; color:var(--ink-2); font-size:17.5px}
.sec--line{border-top:1px solid var(--line)}
.sec--tint{background:var(--paper-2)}

/* ---------- 板块卡片 ---------- */
.divisions{display:grid; gap:24px; grid-template-columns:repeat(auto-fit, minmax(min(340px,100%),1fr))}
.div{position:relative; display:flex; flex-direction:column; padding:40px 36px 34px; border-radius:22px;
  background:var(--paper); border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s}
.div::before{content:''; position:absolute; inset:0; opacity:0; transition:opacity .35s;
  background:radial-gradient(80% 55% at 50% 0%, var(--accent-soft), transparent 70%)}
.div:hover{transform:translateY(-6px); border-color:var(--accent); box-shadow:0 30px 60px -30px rgba(12,20,32,.30)}
.div:hover::before{opacity:1}
.div--nce{--accent:var(--blue); --accent-soft:var(--blue-soft)}
.div--tl{--accent:var(--amber); --accent-soft:var(--amber-soft)}
.div__n{position:relative; font-family:var(--disp); font-size:12px; font-weight:700; letter-spacing:.18em;
  color:var(--accent); margin-bottom:26px}
.div__ico{position:relative; width:52px; height:52px; margin-bottom:24px; color:var(--accent)}
.div h3{position:relative; font-size:27px; margin-bottom:14px}
.div__d{position:relative; color:var(--ink-2); font-size:15.5px; flex:1}
.div__tags{position:relative; display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 28px}
.div__tags span{font-size:12.5px; color:var(--ink-3); border:1px solid var(--line); border-radius:999px; padding:5px 13px}
.div__go{position:relative; display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:15px; color:var(--accent)}
.div__go svg{width:17px; height:17px; transition:transform .25s}
.div:hover .div__go svg{transform:translateX(5px)}

/* ---------- 统计条 ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden}
.stats div{background:var(--paper); padding:30px 28px}
.stats b{display:block; font-family:var(--disp); font-weight:800; font-size:34px; letter-spacing:-.03em; line-height:1}
.stats small{display:block; margin-top:10px; font-size:13.5px; color:var(--ink-3); line-height:1.5}

/* ---------- 能力列 ---------- */
.cols{display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr))}
.col h3{font-size:18.5px; margin-bottom:11px}
.col p{color:var(--ink-2); font-size:15px}
.col__ln{width:34px; height:2px; background:var(--blue); margin-bottom:22px; border-radius:2px}

/* ---------- CTA ---------- */
.cta{position:relative; border-radius:26px; padding:clamp(40px,6vw,72px); text-align:center; overflow:hidden;
  background:var(--paper-2); border:1px solid var(--line-2)}
.cta h2{font-size:clamp(27px,3.8vw,42px); max-width:20ch; margin:0 auto}
.cta p{margin:20px auto 0; max-width:52ch; color:var(--ink-2); font-size:17px}
.cta .eyebrow{color:var(--blue)}
.cta__btns{display:flex; flex-wrap:wrap; gap:13px; justify-content:center; margin-top:34px}
.cta .btn--ghost:hover{background:#fff}
.cta .btn--ghost:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.55)}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line); padding:56px 0 44px; background:var(--paper-2)}
.ftr__in{display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; margin-bottom:40px}
.ftr__c{font-size:14.5px; color:var(--ink-3); line-height:1.9}
.ftr__c a{color:var(--ink-2)} .ftr__c a:hover{color:var(--ink)}
.ftr__h{font-family:var(--disp); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:14px; font-weight:700}
.ftr__bot{border-top:1px solid var(--line); padding-top:26px; display:flex; flex-wrap:wrap; gap:16px;
  justify-content:space-between; font-size:13px; color:var(--ink-3)}
/* 内部处理台入口：安静但找得到。鉴权在数据库，不靠这里低调来保护。 */
.ftr__staff{opacity:.6; border-bottom:1px solid currentColor; transition:opacity .2s}
.ftr__staff:hover, .ftr__staff:focus-visible{opacity:1; color:var(--ink)}

/* ---------- 入场动画 ---------- */
.rise{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  .rise{opacity:1; transform:none}
}