/* 万利官网 — Wanli Virtual Human AI Platform — Stylesheet */

:root{
  --ink:#17161c;
  --ink-soft:#3a3946;
  --paper:#faf8f4;
  --paper-soft:#f1eee6;
  --card:#ffffff;
  --line:#e6e2d8;
  --purple:#6c4fe0;
  --purple-deep:#4f36b0;
  --blue:#2f6bff;
  --cyan:#22c3c9;
  --warn:#c9762b;
  --text-on-dark:#f3f1ea;
  --text-on-dark-soft:#c7c4d6;
  --dark-bg:#141220;
  --dark-bg-2:#1c1930;
  --dark-line:#332f4d;
  --radius:14px;
  --radius-sm:8px;
  --maxw:1160px;
  --shadow:0 12px 32px -18px rgba(23,22,28,.35);
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.9;
  font-size:16px;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--purple-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
ul,ol{padding-left:1.3em;}
h1,h2,h3,h4{line-height:1.4;margin:0 0 .6em;font-weight:700;color:var(--ink);}
p{margin:0 0 1em;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ---------- Skip / Accessibility ---------- */
.skip-link{position:absolute;left:-999px;top:0;background:var(--purple);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(20,18,32,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--dark-line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;max-width:var(--maxw);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text-on-dark);font-weight:700;font-size:20px;}
.brand-mark{width:34px;height:34px;flex:0 0 auto;}
.brand small{display:block;font-size:11px;font-weight:400;color:var(--text-on-dark-soft);letter-spacing:.04em;}
.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav a{
  color:var(--text-on-dark-soft);font-size:14.5px;padding:9px 12px;border-radius:8px;white-space:nowrap;
}
.main-nav a:hover,.main-nav a.active{color:#fff;background:rgba(255,255,255,.08);text-decoration:none;}
.nav-toggle{
  display:none;background:none;border:1px solid var(--dark-line);border-radius:8px;
  color:var(--text-on-dark);width:42px;height:38px;font-size:20px;cursor:pointer;
}
@media(max-width:900px){
  .main-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--dark-bg-2);
    flex-direction:column;align-items:stretch;padding:8px;border-bottom:1px solid var(--dark-line);
    display:none;
  }
  .main-nav.open{display:flex;}
  .main-nav a{padding:12px 14px;border-radius:8px;}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 480px at 82% -10%, rgba(108,79,224,.35), transparent 60%),
    radial-gradient(800px 420px at 10% 110%, rgba(34,195,201,.18), transparent 60%),
    linear-gradient(160deg,var(--dark-bg),var(--dark-bg-2));
  color:var(--text-on-dark);
  padding:56px 0 64px;
}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;}
@media(max-width:900px){.hero .container{grid-template-columns:1fr;}}
.eyebrow{
  display:inline-block;font-size:12.5px;letter-spacing:.08em;color:var(--cyan);
  border:1px solid rgba(34,195,201,.4);padding:4px 10px;border-radius:999px;margin-bottom:14px;
}
.hero h1{font-size:clamp(26px,4vw,38px);color:#fff;margin-bottom:.5em;}
.hero p.lead{color:var(--text-on-dark-soft);font-size:16.5px;max-width:56ch;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.btn{
  display:inline-block;padding:11px 20px;border-radius:10px;font-size:14.5px;font-weight:600;
  border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;}
.btn-primary:hover{opacity:.92;text-decoration:none;}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.08);text-decoration:none;}
.hero-figure{background:rgba(255,255,255,.04);border:1px solid var(--dark-line);border-radius:var(--radius);padding:14px;}
.hero-figure figcaption{color:var(--text-on-dark-soft);font-size:12.5px;margin-top:10px;text-align:center;}

/* ---------- Section scaffolding ---------- */
section{padding:56px 0;}
.section-alt{background:var(--paper-soft);}
.section-head{max-width:74ch;margin-bottom:30px;}
.section-tag{
  display:inline-block;font-size:12px;letter-spacing:.08em;color:var(--purple-deep);
  background:rgba(108,79,224,.09);padding:4px 10px;border-radius:999px;margin-bottom:10px;font-weight:600;
}
.section-head h2{font-size:clamp(21px,2.6vw,28px);}
.section-head p{color:var(--ink-soft);font-size:15.5px;}

/* ---------- TOC ---------- */
.toc{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 8px;}
.toc li a{
  display:inline-block;font-size:13.5px;padding:7px 13px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--ink-soft);
}
.toc li a:hover{border-color:var(--purple);color:var(--purple-deep);text-decoration:none;}

/* ---------- Figure / diagram ---------- */
.figure-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);
}
.figure-card figcaption{font-size:13px;color:var(--ink-soft);margin-top:12px;text-align:center;}
.diagram-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media(max-width:820px){.diagram-grid{grid-template-columns:1fr;}}

/* ---------- Cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:920px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.card-grid{grid-template-columns:1fr;}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;height:100%;
}
.card h3,.card h4{font-size:16.5px;margin-bottom:8px;}
.card p{font-size:14.5px;color:var(--ink-soft);margin-bottom:0;}

/* ---------- Long-form article blocks ---------- */
.essay{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px clamp(18px,4vw,34px);margin-bottom:22px;box-shadow:var(--shadow);
}
.essay .post-meta,.post .post-meta{
  display:flex;gap:10px;align-items:center;font-size:12.5px;color:var(--ink-soft);margin-bottom:10px;
}
.post-cat{
  background:rgba(108,79,224,.1);color:var(--purple-deep);padding:3px 10px;border-radius:999px;font-weight:600;
}
.essay h3{font-size:clamp(18px,2.3vw,22px);}
.essay p{color:var(--ink-soft);font-size:15.5px;}
.essay-kicker{font-size:12.5px;letter-spacing:.06em;color:var(--cyan);text-transform:uppercase;font-weight:700;margin-bottom:6px;}

/* generic article used on subpages */
.post{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px clamp(18px,4vw,30px);margin-bottom:20px;
}
.post h3{font-size:clamp(17px,2.2vw,20px);}
.post p{color:var(--ink-soft);font-size:15.3px;}

/* ---------- Summary / rollup cards for index ---------- */
.summary-cluster{margin-bottom:36px;}
.summary-cluster h3{
  font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:920px){.summary-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.summary-grid{grid-template-columns:1fr;}}
.summary-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px;font-size:13.8px;color:var(--ink-soft);
}
.summary-card .s-date{font-size:11.5px;color:#9a97a8;margin-bottom:6px;}
.summary-card h4{font-size:14.8px;margin-bottom:8px;color:var(--ink);}
.summary-card a.more{font-size:13px;font-weight:600;}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;padding:16px 4px;
  font-size:15.5px;font-weight:600;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;
  font-family:inherit;
}
.faq-q .plus{transition:transform .2s ease;color:var(--purple);font-size:20px;flex:0 0 auto;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:14.5px;color:var(--ink-soft);}
.faq-a p{padding:0 4px 16px;margin:0;}
.faq-item.open .faq-a{max-height:400px;}

/* ---------- Feature grid (app page) ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:920px){.feature-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.feature-grid{grid-template-columns:1fr;}}
.feature{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px;text-align:left;
}
.feature .num{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;border-radius:8px;
  font-size:12.5px;font-weight:700;margin-bottom:10px;
}
.feature h4{font-size:14.8px;margin-bottom:6px;}
.feature p{font-size:13.2px;color:var(--ink-soft);margin:0;}

/* ---------- Notice / disclosure box ---------- */
.notice{
  border:1px solid rgba(201,118,43,.35);background:rgba(201,118,43,.07);
  border-radius:var(--radius-sm);padding:16px 18px;font-size:14px;color:#7a4c17;
}
.notice strong{color:#5c3a10;}
.notice-purple{
  border:1px solid rgba(108,79,224,.3);background:rgba(108,79,224,.06);color:var(--purple-deep);
  border-radius:var(--radius-sm);padding:16px 18px;font-size:14px;
}

/* ---------- Company / about ---------- */
.about-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;align-items:start;}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;}}
.about-facts{display:grid;gap:12px;}
.about-fact{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;}
.about-fact .k{font-size:12px;color:var(--ink-soft);}
.about-fact .v{font-size:14.5px;font-weight:600;}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:13px;color:var(--ink-soft);margin-bottom:6px;}
.crumbs a{color:var(--ink-soft);}

/* ---------- Page hero (secondary pages) ---------- */
.page-hero{
  background:linear-gradient(160deg,var(--dark-bg),var(--dark-bg-2));
  color:var(--text-on-dark);padding:44px 0 46px;
}
.page-hero h1{color:#fff;font-size:clamp(23px,3.4vw,30px);}
.page-hero p{color:var(--text-on-dark-soft);max-width:68ch;font-size:15.5px;}
.kw-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.kw-row span{
  font-size:12px;color:var(--text-on-dark-soft);border:1px solid var(--dark-line);
  padding:4px 10px;border-radius:999px;
}

/* ---------- Related links ---------- */
.related-links{display:flex;flex-wrap:wrap;gap:10px;}
.related-links a{
  background:var(--card);border:1px solid var(--line);padding:9px 14px;border-radius:999px;font-size:13.8px;color:var(--ink);
}
.related-links a:hover{border-color:var(--purple);color:var(--purple-deep);text-decoration:none;}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--dark-bg);color:var(--text-on-dark-soft);padding:44px 0 26px;margin-top:20px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h5{color:#fff;font-size:14px;margin-bottom:12px;}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.footer-grid a{color:var(--text-on-dark-soft);font-size:13.6px;}
.footer-grid a:hover{color:#fff;}
.footer-brand p{font-size:13.5px;max-width:40ch;}
.footer-bottom{
  border-top:1px solid var(--dark-line);margin-top:30px;padding-top:18px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12.5px;color:#8b87a0;
}

/* ---------- Back to top ---------- */
#back-to-top{
  position:fixed;right:18px;bottom:18px;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;border:none;
  font-size:18px;cursor:pointer;box-shadow:var(--shadow);display:none;z-index:90;
}
#back-to-top.show{display:block;}

/* ---------- Utility ---------- */
.mt-lg{margin-top:36px;}
.text-center{text-align:center;}
.small-note{font-size:12.5px;color:#9a97a8;}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.tag-list span{font-size:12.5px;background:var(--paper-soft);border:1px solid var(--line);padding:4px 10px;border-radius:999px;color:var(--ink-soft);}