/**
 * 会跑步的程序员 · 独立主题
 * 暖橙活力 + 深紫夜色，与你的青绿商务风区分开
 */

.site-runner {
  --navy-950: #0c0618;
  --navy-900: #160f28;
  --navy-800: #2a1a4a;
  --navy-700: #3f2566;
  --navy-600: #5a3580;
  --teal-400: #f97316;
  --teal-300: #fb923c;
  --teal-glow: rgba(249, 115, 22, 0.4);
  --gold-400: #fbbf24;
  --text-primary: #1c1228;
  --surface: #ffffff;
  --surface-2: #faf7f4;
  --surface-3: #f3ece4;
  --border: rgba(42, 26, 74, 0.09);
  --border-strong: rgba(42, 26, 74, 0.16);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-glow: 0 0 48px rgba(249, 115, 22, 0.25);
}

/* 背景光晕：橙 + 紫 */
.site-runner .orb-1 {
  background: radial-gradient(circle, #f97316 0%, transparent 70%);
  opacity: 0.35;
}
.site-runner .orb-2 {
  background: radial-gradient(circle, #a855f7 0%, transparent 70%);
}
.site-runner .orb-3 {
  background: radial-gradient(circle, #fbbf24 0%, transparent 70%);
}

/* 导航：深色底 + 橙色点缀 */
.site-runner .header::before {
  background: rgba(12, 6, 24, 0.88);
  border-bottom-color: rgba(249, 115, 22, 0.12);
}
.site-runner .header.scrolled::before {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}
.site-runner:not(.header) .header.hero-mode::before {
  background: rgba(12, 6, 24, 0.75);
}
.site-runner .nav-logo,
.site-runner .logo-text {
  color: #fff;
}
.site-runner .nav-links a {
  color: rgba(255, 255, 255, 0.72);
}
.site-runner .nav-links a:hover,
.site-runner .nav-links a.active {
  color: #fff;
}
.site-runner .header:not(.hero-mode) .nav-toggle span {
  background: #fff;
}
.site-runner .logo-img {
  border-color: rgba(249, 115, 22, 0.5);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}
.site-runner .nav-links a::after {
  background: var(--teal-400);
  height: 3px;
  border-radius: 2px;
}
.site-runner .nav-cta {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.35);
}
.site-runner .header.hero-mode .nav-cta {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
}
.site-runner .nav-cta:hover {
  background: linear-gradient(135deg, #fb923c, #f97316);
}

/* 按钮：圆角方形，偏运动风 */
.site-runner .btn {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.site-runner .btn-glow {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #fff;
  box-shadow: 0 4px 20px var(--teal-glow);
}
.site-runner .btn-glow:hover {
  box-shadow: 0 8px 28px var(--teal-glow);
}
.site-runner .btn-secondary {
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.22);
}

/* Hero：紫橙渐变 + 斜线纹理 */
.site-runner .hero {
  background: linear-gradient(145deg, #0c0618 0%, #2a1a4a 42%, #7c2d12 100%);
}
.site-runner .hero-grid-bg {
  background-image:
    linear-gradient(135deg, rgba(249, 115, 22, 0.05) 25%, transparent 25%),
    linear-gradient(225deg, rgba(168, 85, 247, 0.04) 25%, transparent 25%),
    linear-gradient(45deg, rgba(249, 115, 22, 0.03) 25%, transparent 25%),
    linear-gradient(315deg, rgba(168, 85, 247, 0.03) 25%, transparent 25%);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, black 15%, transparent 75%);
}
.site-runner .hero-tag {
  background: rgba(249, 115, 22, 0.15);
  border-color: rgba(249, 115, 22, 0.35);
  color: #fdba74;
  border-radius: 8px;
}
.site-runner .tag-dot {
  background: #f97316;
}
.site-runner .hero-title em {
  background: linear-gradient(135deg, #fdba74 0%, #f97316 45%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.site-runner .hero-inner {
  direction: ltr;
}
.site-runner .hero-visual-ring {
  border-color: rgba(249, 115, 22, 0.25);
}
.site-runner .hero-visual-ring.ring-2 {
  border-color: rgba(168, 85, 247, 0.15);
}
.site-runner .hero-avatar-wrap {
  border-color: rgba(249, 115, 22, 0.45);
  border-width: 4px;
  border-radius: 20px;
  animation-name: avatarFloat;
}
.site-runner .hero-avatar {
  border-radius: 16px;
}
.site-runner .float-chip-inner {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}
.site-runner .float-chip.chip-teal .float-chip-inner {
  background: rgba(249, 115, 22, 0.18);
  border-color: rgba(249, 115, 22, 0.35);
  color: #fdba74;
}
.site-runner .float-chip.chip-gold .float-chip-inner {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fde68a;
}
.site-runner .trust-num {
  background: linear-gradient(135deg, #fdba74, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
}
.site-runner .hero-trust {
  border-radius: 12px;
  border-left: 3px solid #f97316;
}

/* 区块标题：左对齐 + 橙色竖线 */
.site-runner .section-header {
  text-align: left;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
  border-left: 4px solid #f97316;
}
.site-runner .section-label {
  border: none;
  border-radius: 0;
  padding: 0;
  color: #f97316;
  letter-spacing: 3px;
  background: none;
}
.site-runner .section-header h2 {
  color: var(--navy-900);
}
.site-runner .section-dark .section-header,
.site-runner .section-why-me .section-header {
  border-left-color: #fb923c;
}
.site-runner .section-dark .section-header h2,
.site-runner .section-why-me .section-header h2 {
  color: #fff;
}

/* 服务卡片：左侧色条 */
.site-runner .service-card {
  border-radius: 12px;
  border-left: 4px solid transparent;
  background: linear-gradient(135deg, #fff 0%, var(--surface-2) 100%);
}
.site-runner .service-card::before {
  display: none;
}
.site-runner .service-card:hover {
  border-left-color: #f97316;
  transform: translateY(-4px) translateX(2px);
}
.site-runner .service-icon-wrap {
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(168, 85, 247, 0.08));
}
.site-runner .service-icon-wrap svg {
  stroke: #ea580c;
}
.site-runner .service-icon-wrap.accent {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(249, 115, 22, 0.1));
}
.site-runner .service-icon-wrap.accent svg {
  stroke: #9333ea;
}
.site-runner .service-card:hover .service-icon-wrap {
  background: linear-gradient(135deg, #f97316, #ea580c);
}
.site-runner .service-card h3 {
  color: var(--navy-800);
}

/* 案例区：暖色背景 */
.site-runner .section-projects {
  background: linear-gradient(180deg, var(--surface-2) 0%, #fff5eb 50%, var(--surface-2) 100%);
}
.site-runner .project-card {
  border-radius: 12px;
}
.site-runner .project-featured {
  border-color: rgba(249, 115, 22, 0.3);
  background: linear-gradient(160deg, rgba(249, 115, 22, 0.08) 0%, #fff 55%);
}
.site-runner .project-featured::before {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
}
.site-runner .project-featured .project-badge {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}
.site-runner .projects-note a {
  color: #ea580c;
}

/* 关于我：深紫底 */
.site-runner .section-why-me {
  background: linear-gradient(180deg, #160f28 0%, #0c0618 100%);
}
.site-runner .section-why-me .section-label {
  color: #fb923c;
}
.site-runner .why-me-profile {
  border-radius: 12px;
  border-color: rgba(249, 115, 22, 0.15);
}
.site-runner .profile-avatar {
  border-color: rgba(249, 115, 22, 0.5);
  border-radius: 14px;
  box-shadow: 0 0 28px rgba(249, 115, 22, 0.2);
}
.site-runner .profile-role {
  color: #fdba74;
}
.site-runner .stat-highlight {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.28);
}
.site-runner .stat-highlight strong {
  background: linear-gradient(135deg, #fdba74, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
}
.site-runner .profile-xianyu {
  background: rgba(249, 115, 22, 0.12);
  border-color: rgba(249, 115, 22, 0.3);
  color: #fdba74;
  border-radius: 10px;
}
.site-runner .reviews-badge {
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4);
}
.site-runner .bento-large .bento-num,
.site-runner .point-icon {
  /* point icons */
}
.site-runner .point-icon {
  background: rgba(249, 115, 22, 0.15);
  border-radius: 10px;
}
.site-runner .point-icon svg {
  stroke: #fb923c;
}
.site-runner .point-card:hover {
  border-color: rgba(249, 115, 22, 0.25);
}

/* 联系区 */
.site-runner .section-contact {
  background: linear-gradient(180deg, #160f28 0%, #0c0618 100%);
}
.site-runner .contact-intro .section-label {
  border: none;
  color: #fb923c;
}
.site-runner .contact-intro h2,
.site-runner .contact-intro p {
  text-align: center;
}
.site-runner .contact-intro {
  text-align: center;
  padding-left: 0;
  border-left: none;
}
.site-runner .channel-main {
  background: linear-gradient(135deg, #2a1a4a 0%, #7c2d12 100%);
  border-color: rgba(249, 115, 22, 0.3);
  border-radius: 14px;
}
.site-runner .channel-badge {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  border-radius: 6px;
}
.site-runner .channel-card {
  border-radius: 12px;
}
.site-runner .channel-icon svg {
  stroke: #fb923c;
}
.site-runner .channel-id {
  color: #fdba74;
}
.site-runner .contact-compose {
  border-radius: 16px;
  border-color: rgba(249, 115, 22, 0.12);
}
.site-runner .contact-compose .form-group input:focus,
.site-runner .contact-compose .form-group textarea:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

/* 页脚 */
.site-runner .footer {
  background: #0c0618;
  border-top: 1px solid rgba(249, 115, 22, 0.1);
}
.site-runner .footer-logo {
  border-color: rgba(249, 115, 22, 0.35);
  border-radius: 10px;
}

/* 时间轴等保留默认 */

/* 移动端 Hero 头像圆角 */
@media (max-width: 768px) {
  .site-runner .section-header {
    padding-left: 16px;
    border-left-width: 3px;
  }
  .site-runner .hero-avatar-wrap {
    border-radius: 18px;
  }
}