/* ==========================================================================
   上海商缘软件科技有限公司 — 品牌站点样式
   ========================================================================== */

:root{
  --ink-900:#070B22;
  --ink-800:#0C1233;
  --ink-700:#151C46;
  --brand-700:#2A34C7;
  --brand-600:#3A46E8;
  --brand-500:#4C58F5;
  --brand-300:#A7AEFB;
  --brand-050:#EEF0FF;
  --accent-500:#16D3A8;
  --accent-600:#0FAE8B;

  --paper:#FFFFFF;
  --paper-alt:#F6F7FC;
  --text:#10142C;
  --text-soft:#3B4160;
  --muted:#646B8A;
  --line:#E4E6F2;
  --line-dark:rgba(255,255,255,.12);

  --font-sans:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --shell:1180px;
  --gutter:clamp(20px,5vw,40px);
  --radius:18px;
  --radius-sm:12px;
  --shadow-lg:0 40px 90px -40px rgba(10,14,45,.55);
  --shadow-sm:0 18px 40px -28px rgba(10,14,45,.4);
  --ease:cubic-bezier(.22,.68,.16,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.18;letter-spacing:-.01em}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--brand-500);outline-offset:3px;border-radius:4px}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--brand-600);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;
}
.skip-link:focus{left:0}

/* ---------------------------------------------------------------- header */
.site-header{
  position:fixed;inset-inline:0;top:0;z-index:100;
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(7,11,34,.78);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line-dark);
}
.header-inner{
  display:flex;align-items:center;gap:28px;
  min-height:74px;
  color:#fff;
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand-mark{width:40px;height:40px;display:block;flex:0 0 auto}
.brand-mark svg,.brand-mark img{width:100%;height:100%}
.brand-mark img{object-fit:contain;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{font-size:17px;font-weight:600;letter-spacing:.02em}
.brand-text em{
  font-family:var(--font-mono);
  font-style:normal;font-size:9.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.5);
}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav a{
  font-size:14.5px;color:rgba(255,255,255,.76);
  transition:color .2s var(--ease);position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1.5px;
  background:var(--accent-500);transition:right .3s var(--ease);
}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.nav-cta{display:none}
.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav + .header-actions{margin-left:0}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;border:1px solid transparent;
  font-size:15px;font-weight:500;letter-spacing:.01em;cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),
             border-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease);
}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-primary{
  background:var(--brand-600);color:#fff;
  box-shadow:0 16px 32px -18px rgba(58,70,232,.9);
}
.btn-primary:hover{background:var(--brand-500);transform:translateY(-2px);box-shadow:0 22px 40px -18px rgba(76,88,245,.95)}
.btn-outline{border-color:rgba(255,255,255,.28);color:#fff}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-block{width:100%}

.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line-dark);
  border-radius:12px;background:transparent;cursor:pointer;
  padding:0;position:relative;
}
.nav-toggle span{
  position:absolute;left:13px;right:13px;height:1.6px;background:#fff;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1){top:18px}
.nav-toggle span:nth-child(2){top:25px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;
  background:radial-gradient(120% 90% at 78% 12%,#1B2465 0%,#0A0F2C 48%,var(--ink-900) 100%);
  color:#fff;
  overflow:hidden;
  padding:calc(74px + clamp(56px,9vw,104px)) 0 clamp(64px,9vw,110px);
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-grid{width:100%;height:100%}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,11,34,.97) 0%,rgba(7,11,34,.93) 28%,
             rgba(7,11,34,.55) 48%,rgba(7,11,34,.06) 68%,rgba(7,11,34,0) 80%);
}
.hero-glow{
  position:absolute;width:820px;height:820px;right:-220px;top:-320px;
  background:radial-gradient(circle,rgba(76,88,245,.42),rgba(76,88,245,0) 62%);
  filter:blur(10px);
}
.hero-line{
  stroke-dasharray:2600;stroke-dashoffset:2600;
  animation:draw 2.6s var(--ease) .35s forwards;
}
.hero-area{opacity:0;animation:fade .9s var(--ease) 1.5s forwards}
.hero-nodes circle{
  fill:var(--accent-500);opacity:0;
  animation:fade .6s var(--ease) forwards;
  animation-delay:2s;
}
.hero-nodes circle:nth-child(2){animation-delay:2.25s}
.hero-nodes circle:nth-child(3){animation-delay:2.5s}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

.hero-inner{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
  display:flex;align-items:center;gap:10px;
  margin-bottom:22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent-500);flex:0 0 auto}
.eyebrow-dark{color:var(--brand-600)}
.hero h1{
  font-size:clamp(52px,9vw,104px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1;
  margin-bottom:24px;
}
.hero-lead{
  font-size:clamp(16px,1.6vw,19px);
  color:rgba(255,255,255,.74);
  max-width:33ch;
  margin-bottom:34px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:36px}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:rgba(255,255,255,.5);
}
.hero-meta li{display:flex;align-items:center;gap:10px}
.hero-meta li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent-500)}

/* hero visual */
.hero-visual{position:relative;justify-self:end;width:100%;max-width:520px}
.panel{
  position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  padding:18px 18px 20px;
  box-shadow:var(--shadow-lg);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transform:perspective(1200px) rotateY(-7deg) rotateX(2.5deg);
  transition:transform .9s var(--ease);
}
.hero-visual:hover .panel{transform:perspective(1200px) rotateY(-3deg) rotateX(1deg) translateY(-4px)}
.panel-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.panel-dots{display:flex;gap:5px}
.panel-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22)}
.panel-dots i:first-child{background:rgba(255,255,255,.42)}
.panel-title{font-size:13px;color:rgba(255,255,255,.82)}
.panel-tag{
  margin-left:auto;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.02em;
  color:var(--accent-500);border:1px solid rgba(22,211,168,.35);
  padding:3px 9px;border-radius:999px;
}
.panel-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.kpi{
  background:rgba(10,14,40,.4);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:11px 12px;display:flex;flex-direction:column;gap:2px;
}
.kpi-label{font-size:11px;color:rgba(255,255,255,.5)}
.kpi strong{font-family:var(--font-mono);font-size:19px;font-weight:500;letter-spacing:-.02em}
.kpi strong small{font-size:10px;color:rgba(255,255,255,.5);margin-left:2px}
.kpi-delta{font-family:var(--font-mono);font-size:11px}
.kpi-delta.up{color:var(--accent-500)}
.kpi-delta.down{color:#FF9F7A}
.panel-chart{
  background:rgba(10,14,40,.4);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:14px 12px 8px;margin-bottom:14px;
}
.panel-chart svg{width:100%;height:112px}
.chart-line{stroke-dasharray:400;stroke-dashoffset:400;animation:draw 2s var(--ease) 1.2s forwards}
.panel-rows{display:flex;flex-direction:column;gap:11px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) 74px auto;align-items:center;gap:10px}
.row-dot{width:6px;height:6px;border-radius:2px;background:var(--brand-500)}
.row-dot.alt{background:var(--accent-500)}
.row-name{font-size:12px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-bar{height:4px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.row-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--brand-500),var(--accent-500));transition:width 1.2s var(--ease)}
.row-val{font-family:var(--font-mono);font-size:11.5px;color:rgba(255,255,255,.55)}
.panel-badge{
  position:absolute;left:-22px;bottom:-24px;
  background:#fff;color:var(--text);
  border-radius:14px;padding:12px 16px;
  box-shadow:0 24px 48px -24px rgba(6,10,35,.7);
  display:flex;align-items:baseline;gap:8px;
}
.badge-num{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--brand-600);letter-spacing:-.02em}
.badge-txt{font-size:12px;color:var(--muted)}

/* ----------------------------------------------------------------- proof */
.proof{border-bottom:1px solid var(--line);background:var(--paper)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-item{
  padding:34px 0 34px 26px;border-left:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;
}
.proof-item:first-child{border-left:0;padding-left:0}
.proof-item strong{
  font-family:var(--font-mono);font-size:clamp(28px,3.4vw,38px);
  font-weight:500;letter-spacing:-.03em;color:var(--text);
}
.proof-item span{font-size:13.5px;color:var(--muted)}

/* --------------------------------------------------------------- section */
.section{padding:clamp(72px,10vw,128px) 0;scroll-margin-top:74px}
.section-alt{background:var(--paper-alt)}
.section-dark{
  background:radial-gradient(110% 100% at 20% 0%,#161E52 0%,var(--ink-900) 70%);
  color:#fff;
}
.section-head{max-width:720px;margin-bottom:clamp(44px,6vw,72px)}
.section h2{
  font-size:clamp(30px,4.4vw,50px);
  letter-spacing:-.025em;
  margin-bottom:18px;
}
.section-sub{font-size:17px;color:var(--muted);max-width:56ch}
.section-dark .section-sub{color:rgba(255,255,255,.62)}
.block-title{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brand-600);margin-bottom:26px;font-weight:500;
}

/* ----------------------------------------------------------------- about */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(34px,5vw,72px);align-items:start;
}
.about-copy p{color:var(--text-soft);margin-bottom:18px;font-size:16.5px}
.about-copy h2{margin-bottom:26px}
.about-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow-sm);
}
.about-card h3{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin-bottom:20px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.facts > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px dashed var(--line)}
.facts > div:last-child{border-bottom:0}
.facts dt{font-size:13px;color:var(--muted)}
.facts dd{font-size:14.5px;color:var(--text)}

/* ------------------------------------------------------------- solutions */
.caps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3.4vw,44px);
  margin-bottom:clamp(64px,8vw,104px);
}
.cap{padding-top:24px;border-top:2px solid var(--text)}
.cap-index{
  display:block;font-family:var(--font-mono);font-size:12px;
  color:var(--brand-600);margin-bottom:16px;letter-spacing:.1em;
}
.cap h3{font-size:19px;margin-bottom:12px}
.cap p{font-size:14.5px;color:var(--muted)}

.product-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,4vw,60px);margin-bottom:clamp(56px,7vw,88px)}
.product-list li{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.product-num{font-family:var(--font-mono);font-size:12px;color:var(--brand-300);padding-top:5px}
.product-list h4{font-size:16.5px;margin-bottom:7px;font-weight:600}
.product-list p{font-size:14px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{
  font-size:13.5px;color:var(--text-soft);
  background:var(--paper);border:1px solid var(--line);
  padding:8px 15px;border-radius:999px;
}
.section-alt .chips li{background:#fff}

/* ------------------------------------------------------------ milestones */
.timeline{position:relative;max-width:860px}
.timeline::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,var(--brand-500),rgba(76,88,245,.05));
}
.timeline li{position:relative;padding:0 0 40px 40px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:-4px;top:9px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--brand-600);
}
.tl-year{
  display:block;font-family:var(--font-mono);font-size:20px;letter-spacing:-.01em;
  color:var(--brand-600);margin-bottom:8px;
}
.tl-year small{font-size:12px;color:var(--muted);margin-left:6px;letter-spacing:.06em}
.tl-body h3{font-size:18px;margin-bottom:8px}
.tl-body p{font-size:15px;color:var(--muted);max-width:60ch}

/* ---------------------------------------------------------------- honors */
.honor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-dark)}
.honor{
  background:rgba(255,255,255,.03);
  padding:32px 28px 36px;
  transition:background .3s var(--ease);
}
.honor:hover{background:rgba(255,255,255,.07)}
.honor h3{font-size:17px;margin-bottom:10px}
.honor p{font-size:14px;color:rgba(255,255,255,.58)}

/* --------------------------------------------------------------- contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(34px,5vw,72px);align-items:start}
.contact-copy h2{margin-bottom:20px}
.contact-copy > p{color:var(--text-soft);margin-bottom:30px;max-width:44ch}
.contact-list{margin-bottom:26px}
.contact-list li{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;
}
.contact-list span{font-size:13px;color:var(--muted)}
.contact-list a{color:var(--brand-600);border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.contact-list a:hover{border-bottom-color:var(--brand-600)}
.contact-list [data-placeholder]{color:var(--muted);border-bottom:1px dashed var(--line)}
.note{
  font-size:12.5px;color:var(--muted);
  background:var(--brand-050);border-left:2px solid var(--brand-300);
  padding:11px 14px;border-radius:0 8px 8px 0;
}
.contact-form{
  background:var(--paper-alt);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,34px);
}
.field{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;color:var(--muted)}
.field input,.field textarea{
  font-family:inherit;font-size:15px;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:#A9AFC6}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(76,88,245,.14);
}
.form-status{font-size:13px;color:var(--accent-600);margin-top:12px;min-height:1.2em}

/* ---------------------------------------------------------------- footer */
.site-footer{background:var(--ink-900);color:rgba(255,255,255,.66);padding:56px 0 40px;font-size:14px}
.footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.footer-brand{display:flex;align-items:center;gap:14px;flex:1 1 320px}
.footer-brand strong{display:block;color:#fff;font-size:15px;font-weight:600}
.footer-brand em{font-style:normal;font-size:11.5px;color:rgba(255,255,255,.42);letter-spacing:.04em}
.footer-nav{display:flex;flex-wrap:wrap;gap:22px}
.footer-nav a{font-size:13.5px;transition:color .2s var(--ease)}
.footer-nav a:hover{color:#fff}
.footer-legal{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12.5px;color:rgba(255,255,255,.4);
  padding-top:26px;border-top:1px solid var(--line-dark);font-family:var(--font-mono);letter-spacing:.02em}

/* ----------------------------------------------------------------- reveal */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.js .reveal.is-visible{opacity:1;transform:none}

/* --------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .nav{gap:22px}
  .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .honor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:56px}
  .hero-visual{justify-self:start;max-width:460px}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .proof-item:nth-child(3){border-left:0;padding-left:0}
  .proof-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .product-list{grid-template-columns:1fr}
  .header-cta{display:none}
  .nav-toggle{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(7,11,34,.96);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line-dark);
    padding:8px var(--gutter) 22px;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:16px}
  .nav a::after{display:none}
  .nav-cta{display:block;margin-top:18px;border-bottom:0;text-align:center;
    background:var(--brand-600);border-radius:999px;padding:14px 0;color:#fff}
}
@media (max-width:900px){
  .hero-bg::after{
    background:linear-gradient(180deg,rgba(7,11,34,.96) 0%,rgba(7,11,34,.9) 42%,
               rgba(7,11,34,.55) 66%,rgba(7,11,34,.1) 88%,rgba(7,11,34,0) 100%);
  }
}
@media (max-width:640px){
  .hero h1{letter-spacing:-.02em}
  .hero-meta{gap:8px 16px;font-size:11px}
  .panel{transform:none;padding:14px}
  .hero-visual:hover .panel{transform:none}
  .panel-kpis{grid-template-columns:1fr 1fr}
  .kpi:nth-child(3){grid-column:span 2}
  .panel-badge{position:relative;left:auto;right:auto;bottom:auto;margin-top:16px;display:inline-flex;align-items:baseline;gap:8px}
  .row{grid-template-columns:auto minmax(0,1fr) auto}
  .row-bar{display:none}
  .honor-grid{grid-template-columns:1fr}
  .facts > div{grid-template-columns:80px minmax(0,1fr)}
  .contact-list li{grid-template-columns:1fr;gap:4px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:22px}
}
@media (min-width:901px){
  .nav{display:flex !important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1;transform:none}
  .hero-line,.hero-area,.hero-nodes circle,.chart-line{opacity:1;stroke-dashoffset:0}
}