/* =========================================================
   SAMPLE A · 瑞士国际主义网格 · Swiss International Style
   Palette: ink black / paper white / signal red
   Rules:  zero radius · zero shadow · hairline borders
   Grid:   12-column · flush-left · numbered sections
   ========================================================= */

:root{
  --sg-ink:#111111;
  --sg-paper:#ffffff;
  --sg-red:#e3000f;
  --sg-grey:#8a8a8a;
  --sg-line:#111111;
  --sg-soft:#e9e9e9;
  --sg-maxw:1280px;
  --sg-gap:24px;
  --sg-font:"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sg-font);
  color:var(--sg-ink);
  background:var(--sg-paper);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
b{font-weight:700;}

/* layout primitives */
.sg-wrap{max-width:var(--sg-maxw);margin:0 auto;padding:0 32px;}
.sg-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sg-gap);}

/* progress bar */
.sg-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--sg-red);z-index:200;transition:width .08s linear;}

/* header */
.sg-head{position:sticky;top:0;background:var(--sg-paper);border-bottom:1px solid var(--sg-line);z-index:150;}
.sg-bar{max-width:var(--sg-maxw);margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.sg-brand{display:flex;align-items:center;gap:12px;}
.sg-mark{width:34px;height:34px;background:var(--sg-ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px;}
.sg-brandtext{display:flex;flex-direction:column;line-height:1.1;}
.sg-brandtext b{font-size:15px;letter-spacing:.02em;}
.sg-brandtext i{font-style:normal;font-size:9px;letter-spacing:.18em;color:var(--sg-grey);}
.sg-nav{display:flex;gap:28px;}
.sg-nav a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;position:relative;padding-bottom:2px;}
.sg-nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--sg-red);transition:width .2s ease;}
.sg-nav a:hover::after{width:100%;}
.sg-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;}
.sg-burger span{width:24px;height:2px;background:var(--sg-ink);transition:.2s;}

/* hero */
.sg-hero{border-bottom:1px solid var(--sg-line);padding:80px 0 72px;}
.sg-hero-main{grid-column:1 / 9;}
.sg-hero-meta{grid-column:9 / 13;border-left:1px solid var(--sg-line);padding-left:24px;}
.sg-tag{display:inline-block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--sg-red);border:1px solid var(--sg-red);padding:5px 10px;margin-bottom:28px;}
.sg-display{font-size:clamp(40px,6.4vw,86px);line-height:.98;font-weight:700;letter-spacing:-.01em;}
.sg-lead{margin-top:28px;font-size:17px;max-width:46ch;color:var(--sg-ink);}
.sg-btn{display:inline-block;margin-top:32px;background:var(--sg-ink);color:#fff;padding:14px 26px;font-size:14px;letter-spacing:.04em;transition:.15s;}
.sg-btn:hover{background:var(--sg-red);}
.sg-meta-row{display:flex;flex-direction:column;gap:3px;padding:14px 0;border-bottom:1px solid var(--sg-soft);}
.sg-meta-row span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sg-grey);}
.sg-meta-row b{font-size:13px;font-weight:600;line-height:1.35;}
.sg-meta-end{border-bottom:0;}

/* sections */
.sg-sec{padding:84px 0;border-bottom:1px solid var(--sg-soft);}
.sg-sec-alt{background:#fafafa;}
.sg-sec-no{grid-column:1 / 3;font-size:clamp(34px,4vw,56px);font-weight:700;color:var(--sg-red);line-height:1;align-self:start;}
.sg-sec-body{grid-column:3 / 13;}
.sg-h2{font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-.01em;margin-bottom:20px;}
.sg-p{font-size:16px;max-width:62ch;margin-bottom:36px;color:#222;}

/* about 2col */
.sg-2col{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--sg-line);}
.sg-cell{padding:28px 28px 28px 0;border-bottom:1px solid var(--sg-soft);}
.sg-cell:first-child{border-right:1px solid var(--sg-line);padding-right:28px;}
.sg-cell:last-child{padding-left:28px;}
.sg-cell-no{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--sg-red);border:1px solid var(--sg-red);width:26px;height:26px;line-height:24px;text-align:center;margin-bottom:14px;}
.sg-cell h3{font-size:18px;margin-bottom:8px;}
.sg-cell p{font-size:14px;color:#333;}

/* scope list */
.sg-list{list-style:none;border-top:1px solid var(--sg-line);}
.sg-list li{display:grid;grid-template-columns:64px 1fr 2fr;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--sg-soft);}
.sg-li-no{font-size:24px;font-weight:700;color:var(--sg-red);}
.sg-li-title{font-size:18px;font-weight:700;}
.sg-li-desc{font-size:14px;color:#333;}

/* quad grid */
.sg-quad{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--sg-line);border-left:1px solid var(--sg-line);}
.sg-quad-cell{padding:28px 22px;border-right:1px solid var(--sg-line);border-bottom:1px solid var(--sg-line);min-height:200px;}
.sg-quad-no{font-size:13px;font-weight:700;color:var(--sg-grey);letter-spacing:.1em;}
.sg-quad-cell h3{font-size:18px;margin:18px 0 10px;}
.sg-quad-cell p{font-size:14px;color:#333;}

/* steps */
.sg-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--sg-line);}
.sg-step{padding:30px 18px 24px 0;border-right:1px solid var(--sg-soft);position:relative;}
.sg-step:last-child{border-right:0;}
.sg-step-no{font-size:13px;font-weight:700;color:var(--sg-red);letter-spacing:.1em;}
.sg-step b{display:block;font-size:22px;margin:14px 0 8px;}
.sg-step span{font-size:13px;color:#333;}

/* contact */
.sg-contact{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--sg-line);border-left:1px solid var(--sg-line);}
.sg-co{padding:22px 20px;border-right:1px solid var(--sg-soft);border-bottom:1px solid var(--sg-soft);min-height:96px;}
.sg-co span{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sg-grey);margin-bottom:8px;}
.sg-co b{font-size:14px;font-weight:600;line-height:1.4;}
.sg-notice{margin-top:28px;font-size:12px;color:var(--sg-grey);border-left:3px solid var(--sg-red);padding-left:14px;max-width:70ch;}

/* footer */
.sg-foot{border-top:2px solid var(--sg-ink);padding:40px 0 60px;background:#fff;}
.sg-foot-in{display:flex;flex-direction:column;gap:14px;}
.sg-foot-l{font-size:13px;font-weight:700;letter-spacing:.04em;}
.sg-foot-r{display:flex;flex-wrap:wrap;gap:8px 32px;font-size:12px;color:#333;}
.sg-foot-icp{font-size:12px;color:var(--sg-grey);}
.sg-foot-icp a{color:var(--sg-ink);border-bottom:1px solid var(--sg-red);}
.sg-foot-icp a:hover{color:var(--sg-red);}

/* back to top */
.sg-top{position:fixed;right:24px;bottom:24px;background:var(--sg-ink);color:#fff;font-size:11px;letter-spacing:.1em;padding:10px 14px;opacity:0;pointer-events:none;transition:.2s;z-index:160;}
.sg-top.show{opacity:1;pointer-events:auto;}
.sg-top:hover{background:var(--sg-red);}

/* reveal */
.sg-reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
.sg-reveal.in{opacity:1;transform:none;}

/* responsive */
@media(max-width:1024px){
  .sg-hero-main{grid-column:1 / 13;}
  .sg-hero-meta{grid-column:1 / 13;border-left:0;border-top:1px solid var(--sg-line);padding-left:0;margin-top:40px;padding-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
  .sg-sec-no{grid-column:1 / 13;margin-bottom:24px;}
  .sg-sec-body{grid-column:1 / 13;}
  .sg-quad{grid-template-columns:repeat(2,1fr);}
  .sg-steps{grid-template-columns:repeat(2,1fr);}
  .sg-step:nth-child(2){border-right:0;}
  .sg-contact{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:680px){
  .sg-wrap{padding:0 20px;}
  .sg-bar{padding:12px 20px;}
  .sg-nav{position:fixed;top:62px;left:0;right:0;background:#fff;border-bottom:1px solid var(--sg-line);flex-direction:column;gap:0;padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease;}
  .sg-nav.open{max-height:320px;}
  .sg-nav a{padding:16px 20px;border-bottom:1px solid var(--sg-soft);}
  .sg-burger{display:flex;}
  .sg-hero{padding:52px 0 48px;}
  .sg-2col,.sg-quad,.sg-steps,.sg-contact{grid-template-columns:1fr;}
  .sg-quad{border-left:0;}
  .sg-quad-cell{border-right:0;border-left:1px solid var(--sg-line);}
  .sg-contact{border-left:0;}
  .sg-co{border-right:0;border-left:1px solid var(--sg-line);}
  .sg-list li{grid-template-columns:48px 1fr;gap:14px;}
  .sg-li-desc{grid-column:2;}
  .sg-foot-r{gap:6px;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .sg-reveal{opacity:1;transform:none;transition:none;}
}