*{box-sizing:border-box;margin:0;padding:0}

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",
    "PingFang SC","Microsoft YaHei",sans-serif;
    color:#e5e7eb;
    background:#020617;
    overflow-x:hidden;
}

/* ===== 动态背景 ===== */
/* ===== 背景总容器 ===== */
.bg {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    background: radial-gradient(circle at 30% 20%, #8B6D3F 0%, #8B6D3F 70%);
}

/* ===== 星点层（淡金色） ===== */
.stars {
    position: absolute;
    inset: -100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,223,124,.8), transparent 40%),
        radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,206,84,.6), transparent 40%),
        radial-gradient(1px 1px at 40% 80%, rgba(255,236,156,.5), transparent 40%),
        radial-gradient(2px 2px at 90% 20%, rgba(255,218,97,.7), transparent 40%),
        radial-gradient(1px 1px at 10% 70%, rgba(255,210,80,.6), transparent 40%);
    background-size: 400px 400px;
    animation: starMove 120s linear infinite;
    opacity: 0.85;
}

@keyframes starMove {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(400px,400px,0); }
}

/* ===== 能量流层 ===== */
.energy {
    position: absolute;
    inset: -200%;
    background:
        repeating-linear-gradient(
            120deg,
            rgba(255,223,124,0.06) 0px,
            rgba(255,223,124,0.06) 2px,
            transparent 2px,
            transparent 80px
        ),
        repeating-linear-gradient(
            60deg,
            rgba(255,206,84,0.05) 0px,
            rgba(255,206,84,0.05) 1px,
            transparent 1px,
            transparent 120px
        );
    animation: energyFlow 50s linear infinite;
    mix-blend-mode: screen;
}

@keyframes energyFlow {
    from { transform: translate(0,0); }
    to   { transform: translate(600px,400px); }
}



/* ===== 页面主体 ===== */
.container{
    max-width:900px;
    margin:auto;
    padding:60px 20px 90px;
}

/* ===== 头像区 ===== */
.hero{
    display:flex;
    gap:22px;
    align-items:center;
    margin-bottom:40px;
}

.avatar{
    width:88px;
    height:88px;
    border-radius:50%;
    padding:4px;
    background:linear-gradient(135deg,#facc15,#c5d818,#cbd80e);
}

.avatar img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
    background:#020617;
}

.hero-info h1{
    font-size:34px;
    font-weight:800;
    line-height:1.25;
}

.hero-info p{
    margin-top:6px;
    color:#94a3b8;
    font-size:15px;
}

/* ===== 文案样式 ===== */
.badge{
    display:inline-block;
    margin:20px 0;
    padding:6px 14px;
    background:rgba(239,68,68,.15);
    color:#f87171;
    border-radius:999px;
    font-size:14px;
}

.text{
    font-size:18px;
    color:#d1d5db;
    margin-bottom:22px;
}

.card{
    background:rgba(15,23,42,.75);
    border-radius:18px;
    padding:32px;
    margin:42px 0;
    box-shadow:0 0 40px rgba(0,0,0,.45);
}

.feature{
    margin-top:14px;
    font-size:16px;
}

.feature span{color:#facc15;margin-right:6px}

.quote{
    border-left:4px solid #facc15;
    padding-left:16px;
    margin:36px 0;
    color:#fde68a;
}

/* ===== CTA ===== */
.cta{
    text-align:center;
    margin-top:60px;
}

.cta a{
    display:inline-block;
    padding:18px 42px;
    border-radius:999px;
    font-size:18px;
    font-weight:800;
    color:#022c22;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    text-decoration:none;
    box-shadow:0 0 35px rgba(34,197,94,.5);
    transition:.25s;
}

.cta a:hover{
    transform:translateY(-2px);
    box-shadow:0 0 55px rgba(34,197,94,.7);
}

.note{
    margin-top:14px;
    font-size:14px;
    color:#94a3b8;
}

footer{
    margin-top:50px;
    text-align:center;
    font-size:13px;
    color:#64748b;
}