:root {
  --ink: #252a45;
  --muted: #69718f;
  --line: #e8e8f2;
  --paper: #fffdfb;
  --blue: #80c9f3;
  --pink: #f4a8bd;
  --purple: #b9a7ef;
  --peach: #f3bd8f;
  --mint: #91d8be;
  --deep-purple: #6257a8;
  --shadow: 0 24px 70px rgba(72, 67, 112, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fffaf7;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

.ambient {
  position: fixed;
  z-index: -1;
  width: 34vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .22;
  pointer-events: none;
}
.ambient-one { top: -16vw; right: -8vw; background: #b8a6ef; }
.ambient-two { top: 38vh; left: -23vw; background: #8ed3f5; }

.site-header {
  width: min(1180px, calc(100% - 40px));
  height: 88px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
  border-radius: 13px;
  box-shadow: 0 10px 24px rgba(222, 143, 78, .22);
}
.brand-mark.small { width: 38px; height: 38px; border-radius: 11px; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-copy strong { font-size: 18px; letter-spacing: .08em; }
.brand-copy small { color: #a7632d; font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; font-weight: 700; color: #59607d; }
.site-nav a { transition: color .2s ease, transform .2s ease; }
.site-nav a:hover { color: var(--deep-purple); transform: translateY(-1px); }
.site-nav .nav-pill { padding: 10px 18px; border: 1px solid #d8d4eb; border-radius: 999px; background: rgba(255,255,255,.7); }
.menu-button { display: none; border: 0; border-radius: 12px; padding: 9px 13px; color: var(--ink); background: #f0edf9; font-weight: 800; }

.section-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.hero { min-height: 690px; display: grid; grid-template-columns: .91fr 1.09fr; align-items: center; gap: 64px; padding: 42px 0 88px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #7668bd; font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.eyebrow span { width: 24px; height: 5px; border-radius: 99px; background: var(--pink); box-shadow: 10px 0 0 var(--blue); }
.hero h1 { margin: 20px 0 22px; font-size: clamp(42px, 5vw, 66px); line-height: 1.2; letter-spacing: -.04em; }
.hero h1 em { display: block; color: #8b73cf; font-style: normal; }
.hero-copy > p { max-width: 590px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
.hero-actions { display: flex; gap: 13px; margin-top: 34px; }
.button { min-width: 148px; padding: 14px 22px; border-radius: 15px; text-align: center; font-size: 14px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: #7668bd; box-shadow: 0 14px 30px rgba(98, 87, 168, .24); }
.button-soft { color: #76519a; background: #f0e9fa; border: 1px solid #dfd3ef; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #777e98; font-size: 12px; font-weight: 700; }
.hero-notes span { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot-blue { background: var(--blue); }.dot-pink { background: var(--pink); }.dot-green { background: var(--mint); }

.hero-visual { position: relative; }
.app-window { overflow: hidden; border: 1px solid rgba(214,211,229,.9); border-radius: 28px; background: rgba(255,255,255,.95); box-shadow: var(--shadow); transform: rotate(1deg); }
.window-topbar { height: 58px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #efedf5; }
.window-brand { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.window-brand span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: white; background: var(--peach); font-family: STKaiti, KaiTi, serif; }
.window-controls { display: flex; gap: 7px; }.window-controls i { width: 8px; height: 8px; border-radius: 50%; background: #dedbe9; }.window-controls i:nth-child(2){background:#c9bdf0}.window-controls i:nth-child(3){background:#f3b6c7}
.window-body { min-height: 410px; display: grid; grid-template-columns: 68px 1fr; background: #fbfafc; }
.mock-sidebar { padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 19px; border-right: 1px solid #efedf5; background: white; }
.mock-avatar { width: 34px; height: 34px; border-radius: 12px; background: #ffd7df; border: 5px solid #fff0f3; }
.mock-sidebar span { width: 27px; height: 8px; border-radius: 99px; background: #e5e4ed; }.mock-sidebar span.active { background: #b8a6ef; }
.mock-content { padding: 26px; }
.mock-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.mock-heading div { display: flex; flex-direction: column; gap: 5px; }.mock-heading small { color: #8b90a8; }.mock-heading strong { font-size: 27px; }.mock-heading > span { padding: 7px 11px; border-radius: 10px; color: #7163b3; background: #eeeafa; font-size: 11px; font-weight: 800; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.stat-card { min-height: 102px; padding: 16px; border-radius: 18px; position: relative; overflow: hidden; }.stat-card small,.stat-card b{display:block;position:relative;z-index:1}.stat-card small{font-size:10px;color:#737891}.stat-card b{margin-top:9px;font-size:19px}.stat-card i{position:absolute;width:50px;height:50px;border-radius:50%;right:-10px;bottom:-14px;background:rgba(255,255,255,.55)}
.stat-card.sky{background:#dff3ff}.stat-card.rose{background:#ffe5eb}.stat-card.mint{background:#e1f7ef}
.mock-lower { display: grid; grid-template-columns: 1.45fr .75fr; gap: 13px; margin-top: 14px; }
.chart-card,.pet-card { min-height: 158px; padding: 16px; border-radius: 19px; background: white; border: 1px solid #efedf5; }
.chart-title { display: flex; justify-content: space-between; font-size: 11px; }.chart-title span{color:#9a9fb3}.bars{height:96px;display:flex;align-items:flex-end;gap:8px;padding-top:15px}.bars i{flex:1;border-radius:5px 5px 2px 2px;background:#b9a7ef}.bars i:nth-child(2){height:74%}.bars i:nth-child(3){height:45%;background:#f2a9bd}.bars i:nth-child(4){height:88%}.bars i:nth-child(5){height:62%;background:#88ccee}.bars i:nth-child(6){height:96%}.bars i:nth-child(7){height:77%;background:#8fd7bd}.bars i:nth-child(1){height:54%}
.pet-card { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff8ec}.pet-face{display:grid;place-items:center;width:61px;height:61px;border-radius:22px;background:#ffd9ad;color:#76523a;font-weight:900}.pet-card b{margin-top:10px;font-size:13px}.pet-card small{margin-top:4px;color:#9c806c;font-size:9px}
.floating-chip { position: absolute; padding: 11px 15px; border-radius: 13px; background: white; border: 1px solid #ece9f4; box-shadow: 0 14px 30px rgba(71,65,105,.13); font-size: 11px; font-weight: 800; }
.chip-one { left: -28px; bottom: 68px; color: #397c69; }.chip-two { right: -15px; top: 76px; color: #9a5e3a; }

.features { padding: 100px 0 120px; }
.section-heading { max-width: 720px; margin: 0 auto 48px; text-align: center; }.section-heading .eyebrow{justify-content:center}.section-heading h2,.ecosystem h2,.contact h2{margin:17px 0 13px;font-size:clamp(30px,4vw,44px);line-height:1.3}.section-heading p,.contact p{margin:0;color:var(--muted);line-height:1.8}
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature-card { min-height: 370px; padding: 28px 24px; border: 1px solid rgba(255,255,255,.75); border-radius: 25px; transition: transform .25s ease, box-shadow .25s ease; }.feature-card:hover{transform:translateY(-7px);box-shadow:0 22px 45px rgba(75,71,110,.12)}
.feature-blue{background:#e9f7ff}.feature-pink{background:#fff0f3}.feature-purple{background:#f1edfc}.feature-peach{background:#fff3e8}
.feature-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:17px;background:white;font-family:STKaiti,KaiTi,serif;font-size:23px;font-weight:800;box-shadow:0 8px 18px rgba(70,70,100,.08)}
.feature-card h3{margin:24px 0 13px;font-size:20px}.feature-card p{min-height:82px;margin:0;color:#68708a;font-size:14px;line-height:1.85}.feature-card ul{list-style:none;margin:20px 0 0;padding:17px 0 0;border-top:1px solid rgba(85,88,118,.1)}.feature-card li{margin:8px 0;color:#565d78;font-size:12px;font-weight:700}.feature-card li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%;background:#9385cf}

.ecosystem { padding: 20px 0 120px; }
.ecosystem-panel { padding: 54px; border-radius: 32px; color: white; background: #655aa4; box-shadow: 0 26px 60px rgba(73,61,137,.2); }
.eyebrow.light { color: #f6ddff; }.eyebrow.light span{background:#f6adbf;box-shadow:10px 0 0 #91d1f1}.ecosystem-copy{max-width:760px}.ecosystem-copy p{margin:0;color:#dfdbf5;line-height:1.9}.ecosystem-flow{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:15px;margin-top:44px}.ecosystem-flow div{display:flex;align-items:center;gap:10px}.ecosystem-flow b{display:grid;place-items:center;width:39px;height:39px;border-radius:13px;color:#5e5399;background:#fff;font-size:11px}.ecosystem-flow span{font-size:13px;font-weight:800}.ecosystem-flow i{height:1px;background:rgba(255,255,255,.28)}

.contact { margin-bottom: 110px; padding: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; border: 1px solid #ece7f1; border-radius: 30px; background: rgba(255,255,255,.8); box-shadow: 0 18px 50px rgba(72,67,112,.08); }
.contact h2{font-size:36px}.contact-cards{display:grid;gap:10px}.contact-cards div,.contact-cards a{padding:15px 18px;display:flex;justify-content:space-between;align-items:center;border-radius:15px;background:#f6f2fb}.contact-cards div:nth-child(2){background:#edf8ff}.contact-cards a{background:#fff1f4}.contact-cards small{color:#7b8098;font-weight:700}.contact-cards strong{font-size:14px}

.site-footer { border-top: 1px solid #ece8ed; background: #fff; }
.footer-inner { width: min(1180px, calc(100% - 40px)); min-height: 112px; margin: 0 auto; display:flex;align-items:center;justify-content:space-between;gap:30px; }
.footer-brand{display:flex;align-items:center;gap:11px}.footer-brand div{display:flex;flex-direction:column;gap:4px}.footer-brand strong{font-size:14px}.footer-brand small{color:#9994a2;font-size:10px}.legal-links{display:flex;align-items:center;justify-content:flex-end;gap:22px;color:#777486;font-size:11px;font-weight:700}.legal-links a:hover{color:#6257a8}.public-security-record{display:inline-flex;align-items:center}.public-security-record img{width:18px;height:18px;margin-right:6px;object-fit:contain;flex:0 0 auto}

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; }.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button,.feature-card{transition:none}}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr;padding-top:55px}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.hero-actions,.hero-notes{justify-content:center}.hero-visual{max-width:720px;margin:0 auto;width:100%}.feature-grid{grid-template-columns:repeat(2,1fr)}.feature-card{min-height:330px}.contact{grid-template-columns:1fr}.footer-inner{padding:26px 0;align-items:flex-start}.legal-links{flex-wrap:wrap}
}
@media (max-width: 720px){
  .site-header{height:74px}.menu-button{display:block}.site-nav{display:none;position:absolute;top:66px;left:0;right:0;padding:18px;flex-direction:column;gap:16px;border:1px solid #ece7f1;border-radius:18px;background:rgba(255,255,255,.98);box-shadow:var(--shadow)}.site-nav.open{display:flex}.hero{min-height:auto;gap:42px;padding-bottom:72px}.hero h1{font-size:40px}.app-window{border-radius:20px}.window-body{grid-template-columns:48px 1fr}.mock-sidebar{padding-inline:10px}.mock-content{padding:16px}.stat-row{grid-template-columns:1fr}.stat-card{min-height:74px}.mock-lower{grid-template-columns:1fr}.pet-card{display:none}.floating-chip{display:none}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:auto}.ecosystem-panel{padding:34px 24px}.ecosystem-flow{grid-template-columns:1fr 1fr}.ecosystem-flow i{display:none}.contact{padding:32px 22px}.contact-cards div,.contact-cards a{align-items:flex-start;flex-direction:column;gap:5px}.footer-inner{flex-direction:column}.legal-links{justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:10px}
}