/* ---------------------- 基础与颜色系统 ---------------------- */
:root{
    --bg1: #0b0f1a;
    --bg2: #0a0a0a;
    --txt: #e9f1ff;
    --muted: #9fb0c9;
    --brand1: #7c4dff;   /* 梦幻紫 */
    --brand2: #00e5ff;   /* 霓虹青 */
    --brand3: #ff3d81;   /* 樱桃粉 */
    --brand4: #ffd166;   /* 蜜糖黄 */
    --glass: rgba(255,255,255,.08);
    --border: rgba(255,255,255,.15);
    --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
    --radius-xl: 24px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    color:var(--txt);
    background: radial-gradient(1200px 800px at 10% 10%, #161a2b 0%, #0b0f1a 50%, #07080d 100%);
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    overflow-x:hidden;
}
a{color:var(--brand2); text-decoration:none}

/* ---------------------- 背景艺术层：瑧彩色 + 流体 ---------------------- */
.bg-blobs{
    position:fixed; inset:0; z-index:-1; filter:saturate(1.2) blur(40px);
    pointer-events:none; overflow:hidden;
}
.blob{
    position:absolute; border-radius:50%; opacity:.55; mix-blend-mode:screen;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.2), transparent 60%);
    box-shadow: 0 0 120px 40px currentColor;
    animation: float 18s ease-in-out infinite;
}
.blob.b1{ width:520px; height:520px; left:-120px; top:-80px; color:var(--brand1); animation-delay:-2s }
.blob.b2{ width:460px; height:460px; right:-140px; top:10vh; color:var(--brand2); animation-delay:-6s }
.blob.b3{ width:540px; height:540px; left:20vw; bottom:-180px; color:var(--brand3); animation-delay:-10s }
.blob.b4{ width:420px; height:420px; right:25vw; bottom:-140px; color:var(--brand4); animation-delay:-14s }
@keyframes float{ 0%,100%{ transform:translate3d(0,0,0) scale(1)} 50%{ transform:translate3d(0,-20px,0) scale(1.05)}}

/* ---------------------- 导航 ---------------------- */
header{
    position:sticky; top:0; z-index:40; backdrop-filter: blur(8px);
    background: linear-gradient(to bottom, rgba(5,6,10,.85), rgba(5,6,10,.45));
    border-bottom:1px solid var(--border);
}
.nav{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 20px }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px }
.brand .logo{
    width:36px; height:36px; border-radius:12px; background:
        conic-gradient(from 0deg, var(--brand1), var(--brand2), var(--brand3), var(--brand4), var(--brand1));
    animation: spin 8s linear infinite;
    box-shadow: 0 0 24px rgba(124,77,255,.45);
}
@keyframes spin { to{ transform:rotate(360deg)} }
.nav a{ margin-left:18px; font-size:14px; color:var(--muted)}
.nav a:hover{ color:var(--txt) }

/* ---------------------- 首屏英雄区 ---------------------- */
.hero{ max-width:1200px; margin:0 auto; padding:90px 20px 40px; display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center }
.hero-card{
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--border); border-radius: var(--radius-xl); padding:30px; box-shadow: var(--shadow);
    position:relative; overflow:hidden;
}
.hero h1{ font-size:44px; line-height:1.12; margin:0 0 14px }
.hero p{ margin:8px 0 16px; color:var(--muted); font-size:16px }
.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }
.badge{
    padding:8px 12px; border-radius: 999px; border:1px solid var(--border); background: rgba(255,255,255,.04);
    font-size:12px; letter-spacing:.3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.cta-row{ display:flex; gap:12px; margin-top:18px }
.btn{
    padding:12px 16px; border-radius:12px; font-weight:600; border:1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    cursor:pointer; color:var(--txt); transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn.primary{ background: linear-gradient(90deg, var(--brand1), var(--brand2), var(--brand3)); border-color:transparent }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0,0,0,.35) }

.hero-side{
    display:grid; gap:18px;
}
.neo-card{ padding:22px; border-radius:20px; border:1px solid var(--border); background: rgba(255,255,255,.05); box-shadow: var(--shadow) }
.neo-card h3{ margin:0 0 8px; font-size:18px }
.stack-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; }
.pill{ text-align:center; padding:10px 8px; border-radius:14px; background: rgba(255,255,255,.04); border:1px solid var(--border); font-size:12px }

/* ---------------------- 内容区块 ---------------------- */
section{ max-width:1200px; margin:24px auto; padding:0 20px }
.grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px }
.card{ padding:20px; border:1px solid var(--border); border-radius:20px; background: rgba(255,255,255,.05); box-shadow: var(--shadow) }
.card h3{ margin:0 0 10px }
.list{ margin:0; padding-left:18px; color:var(--muted) }

/* 进度条（擅长程度） */
.meter{ height:10px; background: rgba(255,255,255,.08); border-radius:999px; overflow:hidden; border:1px solid var(--border) }
.meter > i{ display:block; height:100%; width:0; background: linear-gradient(90deg, var(--brand2), var(--brand3)); animation: grow 1.2s ease forwards }
@keyframes grow{ from{width:0} to{width:var(--val)} }

/* 滚动显现动画 */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease }
.reveal.show{ opacity:1; transform:none }

/* 页脚与备案号 */
footer{ margin-top:40px; padding:22px 20px; border-top:1px solid var(--border); background: rgba(255,255,255,.03) }
.footer-wrap{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--muted) }
.icp{ font-size:12px; opacity:.9 }

/* ---------------------- 隐藏式后台登录（模态） ---------------------- */
.hidden-trigger{ position:fixed; bottom:16px; right:18px; width:22px; height:22px; border-radius:8px; opacity:.2; cursor:pointer; backdrop-filter: blur(2px); background:rgba(255,255,255,.06); border:1px dashed var(--border) }
.hidden-trigger:hover{ opacity:.45 }

.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.55); z-index:50 }
.modal.show{ display:flex }
.modal-card{ width:min(520px, 92vw); border-radius:20px; background: #0d1220; border:1px solid var(--border); box-shadow: var(--shadow) }
.modal-head{ padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.modal-body{ padding:18px }
.field{ display:grid; gap:6px; margin:12px 0 }
label{ font-size:12px; color:var(--muted) }
input[type="text"], input[type="password"]{
    padding:12px 12px; border-radius:12px; border:1px solid var(--border); background: rgba(255,255,255,.04); color:var(--txt)
}
.modal-tip{ font-size:12px; color:#b6c2dd }

/* 响应式 */
@media (max-width: 900px){
    .hero{ grid-template-columns: 1fr; padding-top:72px }
    .grid{ grid-template-columns: 1fr }
    .stack-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}