@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&family=ZCOOL+QingKe+HuangYou&display=swap');

/* 重构色彩体系：深邃午夜与琥珀霓虹 */
:root {
  --bg-deep: #030508;
  --bg-panel: #070b14;
  --bg-panel-alt: rgba(13, 19, 37, 0.6);
  --blue-main: #0f1c35;
  --blue-glow: rgba(58, 123, 213, 0.4);
  --blue-bright: #5b9bf5;
  --blue-pale: #8bb8f8;
  --orange-main: #ff9e00;
  --orange-glow: rgba(255, 158, 0, 0.5);
  --orange-dim: #b36b00;
  --green-term: #00ff88;
  --text-main: #c4d0e0;
  --text-dim: #7a8aa3;
  --text-bright: #ffffff;
  --border-blue: rgba(30, 58, 106, 0.6);
  --border-orange: rgba(255, 158, 0, 0.4);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: 'Noto Serif SC', 'SimSun', '宋体', serif;
  line-height: 2.05;
  font-size: 16.5px;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 电影级高保真 CRT 暗角与微弱噪点 */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, transparent 35%, #000000 115%);
  pointer-events: none; z-index: 9998;
}

/* 动态扫描线与 RGB 屏幕网格 */
body::after {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04));
  background-size: 100% 4px, 3px 100%;
  pointer-events: none; z-index: 9999;
}

a { color: var(--blue-bright); text-decoration:none; transition: all 0.3s ease; }
a:hover {
  color: var(--orange-main);
  text-shadow: 0 0 8px var(--orange-glow);
}

/* 具有景深感的星空 */
.stars { position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1; }
.stars span {
  position:absolute; width:2px; height:2px;
  background:#fff; border-radius:50%;
  animation: twinkle 3s infinite alternate;
}
@keyframes twinkle { 0%{opacity:0.05} 100%{opacity:0.4} }

.outer-frame {
  position: relative;
  max-width: 820px; margin: 40px auto;
  border: 1px solid rgba(58, 123, 213, 0.2);
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.8),
    inset 0 0 30px rgba(58, 123, 213, 0.05);
  background: linear-gradient(180deg, rgba(7, 11, 20, 0.95), rgba(3, 5, 8, 0.98));
  backdrop-filter: blur(8px);
  z-index: 1;
}

.top-bar {
  background: #050810;
  border-bottom: 1px solid rgba(58, 123, 213, 0.3);
  padding: 8px 16px;
  display:flex; align-items:center; gap:8px;
  font: 12px 'Courier New', monospace; color: var(--text-dim);
}
.top-bar .dot { width:10px; height:10px; border-radius:50%; box-shadow: inset 0 0 4px rgba(0,0,0,0.5); }
.top-bar .dot-r { background:#ff4757; }
.top-bar .dot-y { background:#ffa502; }
.top-bar .dot-g { background:#2ed573; }
.top-bar .url { margin-left:12px; font-size:11px; letter-spacing: 1px; }

/* HERO - 立体光晕与 RGB 色差 */
.hero {
  text-align:center; padding:80px 30px 60px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(58,123,213,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(255,158,0,0.04) 0%, transparent 60%);
}
.hero-badge {
  display:inline-block; border:1px solid var(--orange-dim);
  background:rgba(255,158,0,0.05); color:var(--orange-main);
  font:11px 'Courier New',monospace; letter-spacing:6px;
  padding:4px 18px; margin-bottom:35px;
  box-shadow: 0 0 15px rgba(255,158,0,0.1);
}
.hero h1 {
  font-family:'ZCOOL QingKe HuangYou',serif;
  font-size:64px; color:var(--text-bright);
  letter-spacing:14px; margin-bottom:8px;
  line-height:1.2;
  text-shadow:
    0 0 10px rgba(255,255,255,0.6),
    0 0 20px var(--blue-glow),
    0 0 40px var(--blue-glow),
    2px 0 0 rgba(255,0,0,0.4),
    -2px 0 0 rgba(0,255,255,0.4);
}
.hero .year {
  font:46px 'Courier New',monospace; color:var(--orange-main);
  letter-spacing:10px; opacity:0.8; margin-bottom:35px;
  text-shadow:0 0 25px rgba(255,158,0,0.4);
}
.hero .subtitle {
  font-size:16px; color:var(--text-dim);
  line-height:2.2; max-width:440px; margin:0 auto;
}

.divider {
  text-align:center; padding:25px 0; color:rgba(58, 123, 213, 0.3);
  font:12px monospace; letter-spacing:8px;
}
.divider-orange { color:rgba(255, 158, 0, 0.3); }

.section { padding:25px 50px 45px; }
h2.section-label {
  font:12px 'Courier New',monospace; color:var(--orange-main);
  font-weight:normal;
  letter-spacing:4px; border-bottom:1px solid rgba(58, 123, 213, 0.3);
  padding-bottom:8px; margin-bottom:30px;
  display:flex; align-items:center; gap:10px;
  text-shadow: 0 0 10px rgba(255,158,0,0.2);
}
.section-label::before { content:'>'; color:var(--green-term); font-weight:bold; text-shadow: 0 0 8px var(--green-term); }
.section p { margin-bottom:20px; }
.section .highlight { color:var(--orange-main); text-shadow: 0 0 8px rgba(255,158,0,0.3); }
.section .dim { color:var(--text-dim); font-size:14.5px; }

/* 机密档案式的卡片设计 */
.program-card {
  border:1px solid rgba(30, 58, 106, 0.4);
  background:var(--bg-panel-alt);
  margin-bottom:25px;
  backdrop-filter: blur(4px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.program-card:hover {
  border-color:var(--blue-bright);
  box-shadow: 0 0 20px rgba(58, 123, 213, 0.15), inset 0 0 15px rgba(58, 123, 213, 0.08);
  transform: translateY(-2px);
}

.program-card.featured {
  border-color:rgba(255, 158, 0, 0.3);
  background: linear-gradient(135deg, rgba(255,158,0,0.03), rgba(0,0,0,0));
}
.program-card.featured:hover {
  border-color:var(--orange-main);
  box-shadow: 0 0 25px rgba(255, 158, 0, 0.2), inset 0 0 20px rgba(255, 158, 0, 0.1);
}

.program-card-header {
  background:linear-gradient(90deg, rgba(15, 28, 53, 0.8), transparent);
  padding:12px 18px; border-bottom:1px solid rgba(30, 58, 106, 0.4);
  display:flex; align-items:center; gap:12px;
}
.program-card.featured .program-card-header {
  background:linear-gradient(90deg, rgba(42, 31, 16, 0.8), transparent);
}

.program-card-header .icon {
  width:24px; height:24px; border:1px solid var(--orange-dim);
  background:rgba(255,158,0,0.1);
  display:flex; align-items:center; justify-content:center;
  font:12px monospace; color:var(--orange-main); flex-shrink:0;
  box-shadow: 0 0 10px rgba(255,158,0,0.15);
}
.program-card-header h3 {
  font:19px 'ZCOOL QingKe HuangYou',sans-serif;
  color:var(--blue-pale); font-weight:normal; letter-spacing:2px;
}
.program-card.featured .program-card-header h3 {
  color: var(--orange-main);
}
.program-card-body {
  padding:18px; font-size:15px; line-height:2.1; color:var(--text-dim);
}

.tech-tag {
  display:inline-block; font:11px 'Courier New',monospace;
  color:var(--green-term); border:1px solid rgba(0,255,136,0.3);
  background:rgba(0,255,136,0.05);
  padding:2px 8px; margin-left:10px; letter-spacing:1px;
  box-shadow: 0 0 8px rgba(0,255,136,0.1);
}
.tech-tag-orange {
  color:var(--orange-main); border-color:rgba(255,158,0,0.4);
  background:rgba(255,158,0,0.08);
  box-shadow: 0 0 8px rgba(255,158,0,0.15);
}

/* 终端代码块 */
.code-block {
  background:#020305; border:1px solid rgba(30, 58, 106, 0.6);
  padding:22px 26px; margin:30px 0;
  font:13px/1.9 'Courier New',monospace;
  color:var(--green-term); overflow-x:auto;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}
.code-block::before {
  content:'C:\\LANMANG\\search>'; color:#556b82;
  display:block; margin-bottom:12px; font-size:12px;
}
.code-comment { color:#4a5c73; font-style: italic; }
.code-keyword { color:var(--blue-bright); text-shadow: 0 0 5px rgba(91,155,245,0.4); }
.code-string { color:var(--orange-main); }

/* 结尾与签名 */
.closing { padding:35px 50px 25px; }
.closing p { margin-bottom:20px; }
.signature {
  text-align:right; padding:15px 50px 35px;
  color:var(--text-dim); font-size:15px; line-height:2.2;
}
.signature .name {
  color:var(--text-bright); font-size:17px;
  text-shadow: 0 0 8px rgba(255,255,255,0.3);
}

/* 赛博朋克式联系按钮 */
.contact-section {
  border-top:1px dashed rgba(58, 123, 213, 0.3);
  margin:0 50px; padding:35px 0;
}
.contact-section p { font-size:15px; color:var(--text-dim); margin-bottom:18px; line-height:2.2; }
.contact-btn {
  display:inline-block; border:1px solid rgba(58, 123, 213, 0.6);
  background:rgba(7, 11, 20, 0.8); color:var(--blue-pale);
  font:13px 'Courier New',monospace;
  padding:10px 22px; letter-spacing:2px; cursor:pointer;
  transition:all 0.2s; text-decoration:none;
  position: relative; overflow: hidden;
}
.contact-btn:hover {
  border-color:var(--orange-main); color:var(--orange-main);
  background:rgba(255,158,0,0.1);
  box-shadow: 0 0 15px rgba(255,158,0,0.2);
  animation: glitch-anim 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}

@keyframes glitch-anim {
  0% { transform: translate(0) }
  20% { transform: translate(-2px, 1px) }
  40% { transform: translate(-1px, -1px) }
  60% { transform: translate(2px, 1px) }
  80% { transform: translate(1px, -1px) }
  100% { transform: translate(0) }
}

/* FOOTER */
.footer {
  border-top:1px solid rgba(30, 58, 106, 0.4);
  background:linear-gradient(180deg, rgba(7,11,20,0.6), #010203);
  padding:35px 50px; text-align:center;
  font:12px 'Courier New',monospace; color:#556b82; line-height:2.4;
}
.footer .brand { color:var(--blue-dim); letter-spacing:5px; font-size:14px; opacity: 0.7;}
.footer .tagline { color:var(--orange-dim); font-size:11px; letter-spacing:3px; margin-top:6px; opacity: 0.6;}
.visitor-counter {
  display:inline-flex; align-items:center; gap:6px;
  font:12px 'Courier New',monospace; margin-top:15px;
}
.visitor-counter .digit {
  background:#000; border:1px solid #222; color:var(--green-term);
  padding:3px 6px; font-size:14px; min-width:18px; text-align:center;
  box-shadow: inset 0 0 8px rgba(0,255,136,0.2);
  text-shadow: 0 0 5px var(--green-term);
}

.cursor {
  display:inline-block; width:8px; height:18px;
  background:var(--green-term); animation:blink 1s step-end infinite;
  vertical-align:middle; margin-left:6px;
  box-shadow: 0 0 8px var(--green-term);
}
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* 具有压迫感的拨号遮罩 */
.dialup-overlay {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:#010203; z-index:99999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font:15px 'Courier New',monospace; color:var(--green-term);
  cursor:pointer; transition:opacity 0.8s ease;
}
.dialup-overlay::after {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,136,0.03) 2px, rgba(0,255,136,0.03) 4px);
  pointer-events:none;
}
.dialup-overlay.fade-out { opacity:0; pointer-events:none; }
.dialup-overlay.hidden { display:none; }
.dialup-text { text-align:center; line-height:2.4; position:relative; z-index:1; text-shadow: 0 0 8px rgba(0,255,136,0.4); }
.dialup-text .modem { color:#4a5c73; font-size:13px; letter-spacing:3px; text-shadow:none;}
.dialup-text .hint { color:#334252; font-size:12px; margin-top:25px; text-shadow:none; letter-spacing: 1px;}
.dialup-progress {
  width:300px; height:2px; background:#050810;
  margin-top:20px; border:1px solid #111a2a; overflow:hidden;
  box-shadow: 0 0 10px rgba(0,255,136,0.1);
}
.dialup-progress-bar { height:100%; width:0%; background:var(--green-term); transition:width 0.1s; box-shadow: 0 0 8px var(--green-term); }

/* RESPONSIVE */
@media (max-width:768px) {
  .outer-frame { margin: 10px; }
  .hero { padding:50px 20px 40px; }
  .hero h1 { font-size:42px; letter-spacing:8px; }
  .hero .year { font-size:32px; }
  .section, .closing, .signature, .footer { padding-left:25px; padding-right:25px; }
  .contact-section { margin-left:25px; margin-right:25px; }
}

/* FADE ANIMATION */
.fade-section {
  opacity:0; transform:translateY(20px);
  transition:opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-section.visible { opacity:1; transform:translateY(0); }