:root{
  --red:#E31E24; --red-dk:#c4161c;
  --ink:#1c1d20; --ink-2:#2a2b2f; --muted:#62666d;
  --line:#e6e7ea; --bg:#fefefe; --soft:#f6f6f7;
  --font:'Sora',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:960px;margin:0 auto;padding:0 22px}

/* Header */
.hero{padding-top:max(34px,env(safe-area-inset-top))}
.hero .wrap{text-align:center}
.logo{width:100%;max-width:520px;margin:0 auto}
.descriptor{max-width:30ch;margin:18px auto 34px;font-size:1rem;color:var(--muted);text-wrap:balance}
.slogan{background:var(--ink);border-top:4px solid var(--red);padding:18px 22px;text-align:center}
.slogan p{color:#fff;font-weight:600;font-size:clamp(.66rem,3.3vw,.86rem);letter-spacing:.14em;line-height:1.5;white-space:nowrap}

/* Sections */
h2{font-size:1.5rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.connect{padding-top:52px}
.sub{margin-top:8px;color:var(--muted);max-width:44ch}

.actions{display:grid;gap:12px;margin-top:26px}
.action{display:flex;align-items:center;gap:16px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(20,20,25,.05),0 8px 22px -12px rgba(20,20,25,.18);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.action:hover{transform:translateY(-2px);border-color:#d3d5d9;box-shadow:0 2px 4px rgba(20,20,25,.06),0 14px 28px -12px rgba(20,20,25,.25)}
.action:active{transform:translateY(0)}
.ico{flex:none;width:52px;height:52px;border-radius:12px;background:var(--soft);display:grid;place-items:center}
.ico svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.txt{display:flex;flex-direction:column;min-width:0}
.txt strong{font-size:1.04rem;font-weight:600;line-height:1.3}
.txt small{font-size:.88rem;color:var(--muted);margin-top:2px}
.action.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 10px 26px -10px rgba(227,30,36,.65)}
.action.primary:hover{background:var(--red-dk);border-color:var(--red-dk)}
.action.primary .ico{background:rgba(255,255,255,.16)}
.action.primary .ico svg{stroke:#fff}
.action.primary small{color:rgba(255,255,255,.88)}

/* What we do */
.what{padding-top:60px}
.services{list-style:none;margin-top:22px;border-top:2px solid var(--ink)}
.services li{display:flex;align-items:center;gap:18px;padding:17px 2px;border-bottom:1px solid var(--line);font-weight:500;font-size:1.05rem}
.services svg{flex:none;width:30px;height:30px;fill:none;stroke:var(--red);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* WeChat */
.wechat{margin-top:64px;background:var(--ink);color:#fff;padding:52px 0}
.wechat-in{display:grid;gap:28px;justify-items:center;text-align:center}
.wechat h2{letter-spacing:.14em}
.wechat p{margin-top:10px;color:#c9cbd0;max-width:32ch;margin-inline:auto}
.qr{background:#fff;padding:16px;border-radius:16px;width:min(100%,260px);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
.qr img{width:100%}

/* Footer */
footer{padding:34px 0 max(34px,env(safe-area-inset-bottom));background:var(--bg);border-top:4px solid var(--red)}
.foot{display:flex;flex-direction:column;gap:4px;text-align:center;font-size:.9rem;color:var(--muted)}
.foot strong{color:var(--ink);font-weight:700;font-size:.98rem}
.foot a:hover{color:var(--red)}

/* One entrance moment: the logo and slogan band */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero .logo,.hero .descriptor{animation:rise .7s ease both}
.hero .descriptor{animation-delay:.1s}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Tablet / desktop */
@media (min-width:720px){
  .hero{padding-top:56px}
  .descriptor{font-size:1.1rem;max-width:none;margin-bottom:48px}
  .slogan p{font-size:1rem;letter-spacing:.28em}
  h2{font-size:1.8rem}
  .connect{padding-top:72px}
  .actions{grid-template-columns:1fr 1fr;gap:16px}
  .action{padding:24px}
  .services{display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px}
  .services li{padding:22px 2px}
  .wechat{padding:72px 0}
  .wechat-in{grid-template-columns:minmax(0,340px) auto;justify-content:center;text-align:left;justify-items:start;align-items:center;gap:64px}
  .wechat p{margin-inline:0}
  .foot{flex-direction:row;justify-content:space-between;align-items:center;text-align:left}
}
@media (max-width:360px){.action{padding:16px;gap:12px}.ico{width:46px;height:46px}}