.hero {
  position: relative;
  width: 100vw;
  margin-left: calc((100% - 100vw) / 2);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0 7vw;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(115deg, transparent 38%, rgba(59,130,246,.10) 54%, rgba(103,232,249,.09) 62%, transparent 78%), radial-gradient(1200px 500px at 78% 20%, rgba(59,130,246,.14), transparent 65%), radial-gradient(900px 460px at 40% 62%, rgba(103,232,249,.06), transparent 70%), radial-gradient(1000px 560px at 68% 42%, rgba(124,58,237,.10), transparent 70%), #050506;
}
.hero-lines-fx { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; animation:heroFxIn .9s ease .05s both; }
.hero::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(900px 500px at 50% 50%, rgba(5,5,6,.50), rgba(5,5,6,.12) 70%, transparent 100%), linear-gradient(180deg, transparent 74%, rgba(31,31,30,.92) 96%, #1f1f1e 100%); }
.hero-inner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; max-width:960px; margin:0 auto; padding:0 72px 0 11vw; }
.hero-title { margin:0; font-family:var(--font-serif); font-size:clamp(46px,6vw,92px); font-weight:300; line-height:1.14; letter-spacing:.005em; color:#fff; }
.hero-title > span { display:block; animation:heroLineIn 1s var(--ease-out) both; }
.hero-title > span:nth-child(1) { animation-delay:.18s; }
.hero-title > span:nth-child(2) { animation-delay:.3s; }
.hero-sub { margin:26px 0 0; font-family:var(--font-serif); font-size:clamp(18px,1.9vw,26px); font-style:italic; font-weight:300; line-height:1.55; letter-spacing:.02em; color:#e2e2ea; animation:heroLineIn 1s var(--ease-out) .44s both; }
.hero-cta-row { margin-top:42px; display:flex; align-items:center; justify-content:center; animation:heroLineIn 1s var(--ease-out) .58s both; }
.hero-cta { display:inline-flex; align-items:center; justify-content:center; width:200px; height:54px; padding:15px 30px; border-radius:999px; color:#fff; font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",var(--font-ui); font-size:16px; font-weight:700; letter-spacing:.01em; text-decoration:none; background:rgba(0,0,0,.35); box-shadow:inset 0 0 2px 1px rgba(255,255,255,.38),inset 0 0 10px 4px rgba(255,255,255,.16); transition:filter .25s ease; }
.hero-cta:hover { filter:brightness(1.18); }
.hero-cta:active { filter:brightness(.96); }
.glass-surface { position:relative; overflow:hidden; }
.glass-surface__filter { width:100%; height:100%; pointer-events:none; position:absolute; inset:0; opacity:0; z-index:-1; }
.glass-surface--svg { background:hsl(0 0% 0% / var(--glass-frost)); border:none; backdrop-filter:var(--filter-id) saturate(var(--glass-saturation)); -webkit-backdrop-filter:var(--filter-id) saturate(var(--glass-saturation)); }
.glass-surface--fallback { background:rgba(255,255,255,.1); backdrop-filter:blur(12px) saturate(1.8) brightness(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.8) brightness(1.2); border:1px solid rgba(255,255,255,.22); }
@keyframes heroFxIn { from { opacity:0; } to { opacity:1; } }
@keyframes heroLineIn { from { opacity:0; transform:translate3d(0,28px,0); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
@media (max-width:760px) {
  .hero { padding:72px 0 48px; }
  .hero-inner { padding:12px 20px 20px; }
  .hero-sub { line-height:1.5; }
  .hero-cta { width:240px; max-width:100%; font-size:14px; height:51px; padding:15px 0; }
}
@media (max-width:360px) { .hero-title { font-size:40px; } }
@media (prefers-reduced-motion:reduce) { .hero-lines-fx,.hero-title > span,.hero-sub,.hero-cta-row { animation:none; } }