/* =========================================================
   梦匠官网 · Apple 式视觉语言
   ========================================================= */

:root{
  --ink:#1d1d1f;
  --sub:#6e6e73;
  --line:#d2d2d7;
  --bg:#ffffff;
  --gray:#f5f5f7;
  --dark:#000000;
  --dark-2:#0a0a0c;
  --blue:#0071e3;
  --radius:20px;
  --nav-h:52px;
  --maxw:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:var(--nav-h);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","SF Pro Text","PingFang SC",
              "Helvetica Neue","Microsoft YaHei",Arial,sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* ---------- 导航 ---------- */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--nav-h);
  z-index:100;
  background:rgba(251,251,253,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-scrolled{
  background:rgba(251,251,253,.86);
  border-bottom-color:rgba(0,0,0,.1);
}
.nav__inner{
  max-width:var(--maxw);
  margin:0 auto;
  height:100%;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:28px;
}
.nav__brand{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  flex-shrink:0;
}
.nav__logo{width:22px;height:22px;display:block;}
.nav__wordmark{
  font-size:16px;
  font-weight:600;
  letter-spacing:.06em;
}
.nav__links{
  display:flex;
  align-items:center;
  gap:30px;
  margin-left:auto;
}
.nav__links a{
  font-size:12.5px;
  color:rgba(29,29,31,.72);
  letter-spacing:.02em;
  transition:color .2s;
  white-space:nowrap;
}
.nav__links a:hover{color:var(--ink);}
.nav__actions{display:flex;align-items:center;gap:14px;}
.nav__cta{
  font-size:12.5px;
  font-weight:500;
  padding:6px 14px;
  border-radius:980px;
  background:var(--ink);
  color:#fff;
  transition:opacity .2s,transform .2s var(--ease);
  white-space:nowrap;
}
.nav__cta:hover{opacity:.82;}
.nav__burger{
  display:none;
  width:36px;height:36px;
  border:0;background:transparent;
  cursor:pointer;
  padding:0;
  position:relative;
}
.nav__burger span{
  position:absolute;left:8px;
  width:20px;height:1.5px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s;
}
.nav__burger span:nth-child(1){top:14px;}
.nav__burger span:nth-child(2){top:21px;}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
.nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:min(92vh,860px);
  background:var(--dark);
  color:#f5f5f7;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:calc(var(--nav-h) + 60px) 24px 100px;
}
.hero__glow{
  position:absolute;
  width:1100px;height:1100px;
  top:-40%;left:50%;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%,rgba(0,113,227,.34),rgba(0,113,227,.10) 42%,transparent 68%);
  filter:blur(30px);
  pointer-events:none;
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:.75;transform:translateX(-50%) scale(1);}
  50%{opacity:1;transform:translateX(-50%) scale(1.08);}
}
.hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 78%);
  pointer-events:none;
}
.hero__inner{
  position:relative;
  text-align:center;
  max-width:900px;
}
.hero__eyebrow{
  font-size:13px;
  letter-spacing:.14em;
  color:#86868b;
  margin-bottom:22px;
}
.hero__title{
  font-size:clamp(46px,8.2vw,96px);
  line-height:1.06;
  font-weight:600;
  letter-spacing:-.025em;
  background:linear-gradient(180deg,#fff 30%,#a1a1a6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__sub{
  margin:28px auto 0;
  font-size:clamp(16px,2.1vw,21px);
  line-height:1.62;
  color:#a1a1a6;
  max-width:660px;
}
.hero__cta{
  margin-top:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
}
.hero__scroll{
  position:absolute;
  bottom:34px;left:50%;
  transform:translateX(-50%);
  width:1px;height:44px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.35));
  overflow:hidden;
}
.hero__scroll span{
  position:absolute;top:0;left:0;
  width:1px;height:14px;
  background:#fff;
  animation:drop 2.2s var(--ease) infinite;
}
@keyframes drop{
  0%{transform:translateY(-14px);opacity:0;}
  40%{opacity:1;}
  100%{transform:translateY(44px);opacity:0;}
}

/* ---------- 按钮 / 链接 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 26px;
  border-radius:980px;
  font-size:15px;
  font-weight:500;
  transition:transform .25s var(--ease),background .2s,opacity .2s;
}
.btn--primary{background:var(--blue);color:#fff;}
.btn--primary:hover{background:#0077ed;transform:translateY(-1px);}
.btn--primary:active{transform:translateY(0) scale(.99);}
.link-arrow{
  font-size:15px;
  color:var(--blue);
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:gap .2s var(--ease);
}
.link-arrow:hover{gap:9px;}
.section--dark .link-arrow{color:#2997ff;}

/* ---------- 数据条 ---------- */
.stats{background:var(--bg);border-bottom:1px solid #f0f0f2;}
.stats__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(48px,6vw,72px) 24px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.stat{text-align:center;}
.stat__num{
  font-size:clamp(34px,4.6vw,52px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
}
.stat__num i{font-style:normal;font-size:.5em;font-weight:500;color:var(--sub);line-height:1.2;}
.stat__label{
  margin-top:12px;
  font-size:13.5px;
  color:var(--sub);
  letter-spacing:.01em;
}

/* ---------- 通用 section ---------- */
.section{padding:clamp(80px,10vw,132px) 0;}
.section--gray{background:var(--gray);}
.section--dark{background:var(--dark);color:#f5f5f7;}

.sec-head{max-width:780px;margin-bottom:clamp(44px,5vw,72px);}
.sec-head__eyebrow{
  font-size:13px;
  font-weight:600;
  letter-spacing:.1em;
  color:var(--blue);
  margin-bottom:16px;
}
.sec-head__title{
  font-size:clamp(30px,4.6vw,52px);
  line-height:1.14;
  font-weight:600;
  letter-spacing:-.022em;
}
.sec-head__desc{
  margin-top:20px;
  font-size:clamp(15.5px,1.7vw,18px);
  line-height:1.66;
  color:var(--sub);
  max-width:620px;
}
.sec-head--light .sec-head__title{color:#f5f5f7;}
.sec-head--light .sec-head__desc{color:#86868b;}
.sec-head--light .sec-head__eyebrow{color:#2997ff;}

/* ---------- Bento 卡片 ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.card{
  background:#fff;
  border-radius:var(--radius);
  padding:34px 30px 32px;
  display:flex;
  flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.18);
}
.card--wide{grid-column:span 1;}
.card__icon{
  width:40px;height:40px;
  border-radius:11px;
  background:var(--gray);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;
}
.card__icon svg{width:21px;height:21px;}
.card__title{
  font-size:19px;
  font-weight:600;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
.card__desc{
  font-size:14.5px;
  line-height:1.68;
  color:var(--sub);
  flex:1;
}
.card__tags{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:22px;
}
.card__tags li{
  font-size:11.5px;
  color:var(--sub);
  background:var(--gray);
  border-radius:980px;
  padding:4px 10px;
}

/* ---------- 案例 ---------- */
.cases{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.case{
  background:var(--dark-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.case:hover{
  border-color:rgba(255,255,255,.2);
  transform:translateY(-3px);
}
.case__media{
  aspect-ratio:1600/690;
  overflow:hidden;
  background:#111;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.case__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .7s var(--ease);
}
.case:hover .case__media img{transform:scale(1.035);}
.case__media--shot{background:#fff;}
.case__media--shot img{object-fit:contain;object-position:center;}
.case--wide{
  grid-column:span 2;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:stretch;
}
.case--wide .case__media{aspect-ratio:auto;height:100%;border-bottom:0;border-right:1px solid rgba(255,255,255,.08);}
.case--wide .case__body{
  padding:38px 42px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.case--wide .case__desc{font-size:14.5px;}
.case__body{padding:26px 26px 30px;}
.case__kicker{
  font-size:11.5px;
  letter-spacing:.09em;
  color:#2997ff;
  margin-bottom:9px;
}
.case__title{
  font-size:19px;
  font-weight:600;
  letter-spacing:-.01em;
  margin-bottom:9px;
}
.case__desc{
  font-size:14px;
  line-height:1.65;
  color:#86868b;
}

/* ---------- 行业 ---------- */
.industries{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.ind{
  padding:34px 28px 34px 0;
  border-bottom:1px solid var(--line);
}
.ind:nth-child(3n+2),
.ind:nth-child(3n+3){padding-left:28px;}
.ind:nth-child(3n+2),
.ind:nth-child(3n+3){border-left:1px solid var(--line);}
.ind h3{
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.ind p{
  font-size:14px;
  line-height:1.65;
  color:var(--sub);
}

/* ---------- 流程 ---------- */
.flow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.flow__step{
  background:#fff;
  border-radius:16px;
  padding:26px 22px 28px;
  position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.flow__step:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.16);
}
.flow__idx{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--blue);
  margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}
.flow__step h3{
  font-size:16px;
  font-weight:600;
  margin-bottom:7px;
}
.flow__step p{
  font-size:13.5px;
  line-height:1.6;
  color:var(--sub);
}

/* ---------- 服务承诺 ---------- */
.promise{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.promise__item{
  padding:30px 26px 28px;
  border-radius:var(--radius);
  background:var(--gray);
}
.promise__num{
  font-size:clamp(30px,3.6vw,42px);
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1;
  display:flex;
  align-items:baseline;
  gap:3px;
}
.promise__num i{
  font-style:normal;
  font-size:.4em;
  font-weight:500;
  color:var(--sub);
}
.promise__desc{
  margin-top:14px;
  font-size:13.5px;
  line-height:1.62;
  color:var(--sub);
}

/* ---------- 客户 ---------- */
/* ---------- 合作伙伴 ---------- */
.pnames{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border-top:1px solid rgba(255,255,255,.1);
  border-left:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  overflow:hidden;
}
.pnames span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:92px;
  padding:20px 14px;
  font-size:14.5px;
  line-height:1.4;
  letter-spacing:.01em;
  text-align:center;
  color:#b4b4b9;
  border-right:1px solid rgba(255,255,255,.1);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:background .35s var(--ease),color .35s var(--ease);
}
.pnames span:hover{background:rgba(255,255,255,.055);color:#fff;}

.cred{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cred__item{
  font-size:12.5px;
  color:#a1a1a6;
  border:1px solid rgba(255,255,255,.16);
  border-radius:980px;
  padding:7px 15px;
}

/* ---------- CTA ---------- */
.cta{
  background:var(--gray);
  padding:clamp(80px,10vw,130px) 0;
}
.cta__inner{text-align:center;}
.cta__title{
  font-size:clamp(34px,5.4vw,60px);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.1;
}
.cta__desc{
  margin:20px auto 0;
  font-size:clamp(15.5px,1.8vw,18px);
  line-height:1.65;
  color:var(--sub);
  max-width:560px;
}
.cta__actions{
  margin-top:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
}

/* ---------- 页脚 ---------- */
.footer{
  background:var(--gray);
  border-top:1px solid var(--line);
  padding:52px 0 40px;
  font-size:12.5px;
  color:var(--sub);
}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  padding-bottom:34px;
  border-bottom:1px solid var(--line);
}
.footer__col h4{
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:12px;
  letter-spacing:.02em;
}
.footer__col a,
.footer__col p{
  display:block;
  margin-bottom:8px;
  color:var(--sub);
  transition:color .2s;
}
.footer__col a:hover{color:var(--ink);}
.footer__addr{line-height:1.66;margin-bottom:10px;}
.footer__bottom a{color:inherit;transition:color .2s;}
.footer__bottom a:hover{color:var(--ink);}
.footer__dot{margin:0 6px;opacity:.6;}
.footer__bottom{
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  font-size:11.5px;
  color:#86868b;
}

/* ---------- 滚动出现动画 ---------- */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none;}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .flow{grid-template-columns:repeat(2,1fr);}
  .promise{grid-template-columns:repeat(2,1fr);}
  .industries{grid-template-columns:repeat(2,1fr);}
  .ind:nth-child(3n+2),.ind:nth-child(3n+3){padding-left:0;border-left:0;}
  .ind:nth-child(2n){padding-left:28px;border-left:1px solid var(--line);}
  .pnames{grid-template-columns:repeat(4,1fr);}
}

@media (max-width:760px){
  body{font-size:16px;}
  .nav__links{
    position:fixed;
    inset:var(--nav-h) 0 auto 0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:rgba(251,251,253,.98);
    backdrop-filter:blur(20px);
    padding:8px 24px 20px;
    border-bottom:1px solid rgba(0,0,0,.08);
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease);
    margin-left:0;
  }
  .nav__links.is-open{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .nav__links a{
    display:block;
    width:100%;
    padding:14px 0;
    font-size:15px;
    color:var(--ink);
    border-bottom:1px solid rgba(0,0,0,.06);
  }
  .nav__burger{display:block;}
  .nav__actions{margin-left:auto;}
  .nav__cta{margin-left:0;}

  .hero{min-height:auto;padding:calc(var(--nav-h) + 78px) 22px 96px;}
  .br-desk{display:none;}
  .hero__cta{gap:18px;flex-direction:column;}
  .hero__cta .btn{width:100%;max-width:280px;}

  .stats__inner{grid-template-columns:repeat(2,1fr);gap:32px 16px;}

  .bento{grid-template-columns:1fr;}
  .cases{grid-template-columns:1fr;}
  .promise{grid-template-columns:1fr;}
  .flow{grid-template-columns:1fr;}
  .industries{grid-template-columns:1fr;}
  .ind,.ind:nth-child(2n){padding:26px 0;border-left:0;}
  .pnames{grid-template-columns:repeat(2,1fr);}
  .pnames span{min-height:74px;font-size:13.5px;padding:16px 10px;}
  .case--wide{grid-column:span 1;display:block;}
  .case--wide .case__media{aspect-ratio:1600/690;height:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);}
  .case--wide .case__body{padding:26px;}
  .footer__bottom{flex-direction:column;gap:6px;}
  .footer__cols{grid-template-columns:repeat(2,1fr);gap:24px;}
}

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