:root{
  --green:#217346;
  --green-2:#185C37;
  --green-soft:#e7f3ec;
  --ink:#242424;
  --muted:#616161;
  --line:#e0e0e0;
  --bg:#fff;
  --hero:#f5f5f5;
  --font:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body[data-lang="zh"] .en{display:none!important}
body[data-lang="en"] .zh{display:none!important}

.topbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1180px;margin:0 auto;padding:0 20px;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand-row{display:flex;align-items:center;gap:1.25rem;min-width:0}
.logo{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:1.05rem}
.logo img{display:block}
.nav{display:flex;align-items:center;gap:.35rem}
.nav-link{display:inline-flex;align-items:center;gap:.25rem;padding:.45rem .55rem;border-radius:4px;color:var(--ink);font-size:.92rem}
.nav-link:hover{background:#f3f3f3}
.top-actions{display:flex;align-items:center;gap:.55rem}
.lang-switch{padding:.4rem .65rem;border:1px solid var(--line);border-radius:4px;font-size:.82rem;color:var(--muted)}
.btn-signin{background:var(--green);color:#fff;padding:.48rem 1rem;border-radius:2px;font-weight:600;font-size:.92rem}
.btn-signin:hover{background:var(--green-2)}

.hero{background:var(--hero)}
.hero-inner{max-width:1180px;margin:0 auto;padding:48px 20px 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero-copy h1{margin:0 0 .75rem;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.2;font-weight:700;letter-spacing:-.02em}
.hero-copy p{margin:0 0 1.4rem;color:var(--muted);font-size:1.05rem;max-width:34rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1.15rem;border-radius:999px;font-weight:600;font-size:.95rem}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-2)}
.btn-primary .plus{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:1.05rem;line-height:1}
.btn-secondary{background:#fff;border:1px solid #8a8886;color:var(--ink)}
.btn-secondary:hover{background:#fafafa}
.hero-art{display:flex;justify-content:center}
.art-card{width:min(100%,340px);aspect-ratio:1.15;border-radius:18px;background:linear-gradient(145deg,#dff3e7,#fff 55%,#f0f7f3);box-shadow:0 18px 40px rgba(24,92,55,.12);display:grid;place-items:center;position:relative;overflow:hidden}
.art-card::before{content:"";position:absolute;inset:18% 12% auto;height:42%;border-radius:12px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.bars{position:relative;z-index:1;display:flex;align-items:flex-end;gap:10px;height:42%;margin-top:8%}
.bars span{width:28px;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#33c481,#217346)}

.templates{padding:36px 0 64px}
.templates-inner{max-width:1180px;margin:0 auto;padding:0 20px}
.templates h2{margin:0 0 1rem;font-size:1.35rem;font-weight:650}
.template-toolbar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.tabs{display:flex;flex-wrap:wrap;gap:.35rem}
.tab{padding:.45rem .85rem;border-radius:999px;color:var(--muted);font-size:.92rem}
.tab.on,.tab:hover{background:var(--green-soft);color:var(--green-2);font-weight:600}
.search input{width:min(260px,70vw);padding:.55rem .85rem;border:0;border-radius:4px;background:#f3f3f3;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.card{text-align:left;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;transition:box-shadow .15s ease,transform .15s ease}
.card:hover{box-shadow:0 10px 28px rgba(0,0,0,.08);transform:translateY(-1px)}
.thumb{aspect-ratio:16/10;background:#eef6f1}
.thumb.t1{background:linear-gradient(135deg,#d8efe3,#fff),radial-gradient(circle at 70% 40%,#21a366 0 18%,transparent 19%)}
.thumb.t2{background:linear-gradient(180deg,#e8f5ee,#fff 60%),repeating-linear-gradient(90deg,transparent 0 28px,rgba(33,115,70,.08) 28px 29px)}
.thumb.t3{background:linear-gradient(160deg,#cfe9db,#fff)}
.thumb.t4{background:linear-gradient(120deg,#e7f6ee,#f7fbf8)}
.thumb.t5{background:linear-gradient(200deg,#dff3e8,#fff)}
.thumb.t6{background:linear-gradient(30deg,#eaf7f0,#fff)}
.card span{display:block;padding:.75rem .9rem .95rem;font-size:.92rem;font-weight:600}

.copilot{background:linear-gradient(180deg,#f3faf6,#fff);border-top:1px solid var(--line);padding:48px 0}
.copilot-inner{max-width:1180px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.copilot-copy h2{margin:0 0 .6rem;font-size:1.55rem}
.copilot-copy p{margin:0 0 1.1rem;color:var(--muted);max-width:32rem}
.copilot-art{min-height:180px;border-radius:16px;background:
  radial-gradient(circle at 70% 40%,rgba(33,115,70,.22),transparent 55%),
  linear-gradient(145deg,#dff3e7,#fff 60%);
  box-shadow:0 14px 36px rgba(24,92,55,.1)}
.site-foot{border-top:1px solid var(--line);background:#fafafa;padding:28px 0 36px}
.foot-inner{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.foot-brand{font-weight:600;color:var(--muted);font-size:.92rem}
.foot-links{display:flex;flex-wrap:wrap;gap:.85rem}
.foot-links button{color:var(--muted);font-size:.88rem}
.foot-links button:hover{color:var(--green);text-decoration:underline}

.wa-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.wa-modal[hidden]{display:none!important}
.wa-backdrop{position:absolute;inset:0;background:rgba(15,23,32,.48);border:0}
.wa-modal-panel{position:relative;z-index:1;width:min(440px,100%);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.22)}
.wa-close{position:absolute;top:8px;right:10px;z-index:2;width:32px;height:32px;border-radius:50%;font-size:1.4rem;line-height:1;color:#616161;background:#fff}
.wa-modal-panel iframe{display:block;width:100%;height:min(640px,82vh);border:0;background:#f0f2f5}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding-top:32px}
  .hero-art{order:-1}
  .copilot-inner{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{display:none}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .btn-primary,.btn-secondary{width:100%;justify-content:center}
}