/* ==========================================================================
   WgetCloud Isometric 3D Lego Style Design System
   Domain: wgetcloud1.cyou
   Aesthetic: God-view Isometric 3D, Lego Bricks, Extruded Cards, Comet Cursor
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* Color Palette - Lego Vibrant & Dark Graphite */
  --bg-main: #0a0e17;
  --bg-card: #121929;
  --bg-card-hover: #1a243a;
  --bg-lego-stud: #1a2235;

  --lego-yellow: #ffd100;
  --lego-yellow-shadow: #b39200;
  
  --lego-cyan: #00e5ff;
  --lego-cyan-shadow: #0099ab;
  
  --lego-red: #ff3366;
  --lego-red-shadow: #b3143c;
  
  --lego-blue: #2979ff;
  --lego-blue-shadow: #144cb3;

  --lego-green: #00e676;
  --lego-green-shadow: #00994f;

  --lego-purple: #a855f7;

  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  --border-dark: #1e293b;
  --border-lego: #2d3e5e;

  --font-heading: 'Outfit', 'Noto Sans SC', sans-serif;
  --font-body: 'Noto Sans SC', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --extrude-shadow: 4px 4px 0px #000;
  --extrude-shadow-lg: 8px 8px 0px #000;
  --extrude-cyan: 4px 4px 0px var(--lego-cyan-shadow);
  --extrude-yellow: 4px 4px 0px var(--lego-yellow-shadow);
}

/* Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  position: relative;
  line-height: 1.6;
  background-image: 
    radial-gradient(circle at 25px 25px, rgba(255, 255, 255, 0.03) 2px, transparent 0),
    linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 40px 40px;
}

/* Canvas for Comet Tail Cursor Effect */
#cursor-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* Typography & General */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
}

a {
  color: var(--lego-cyan);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--lego-yellow);
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Lego Stud Micro Detail */
.lego-studs-top {
  position: relative;
}
.lego-studs-top::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 10px;
  right: 10px;
  height: 8px;
  background-image: radial-gradient(circle, var(--lego-yellow) 40%, transparent 45%);
  background-size: 16px 8px;
}

/* 3D Lego Card Extruded Button Style */
.lego-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px;
  border: 3px solid #000;
  cursor: pointer;
  position: relative;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  text-decoration: none;
}

.lego-btn-primary {
  background: var(--lego-yellow);
  color: #000;
  box-shadow: 4px 4px 0px #000, 4px 4px 0px 3px var(--lego-yellow-shadow);
}
.lego-btn-primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000, 6px 6px 0px 3px var(--lego-yellow-shadow);
  color: #000;
  background: #ffe033;
}
.lego-btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000;
}

.lego-btn-secondary {
  background: var(--lego-cyan);
  color: #000;
  box-shadow: 4px 4px 0px #000;
}
.lego-btn-secondary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000;
  color: #000;
  background: #33ecff;
}

.lego-btn-outline {
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--lego-cyan);
  box-shadow: 4px 4px 0px var(--lego-cyan);
}
.lego-btn-outline:hover {
  background: var(--lego-cyan);
  color: #000;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000;
}

/* Badge / Tags */
.lego-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 4px;
  border: 2px solid #000;
  box-shadow: 2px 2px 0px #000;
  text-transform: uppercase;
}
.badge-yellow { background: var(--lego-yellow); color: #000; }
.badge-cyan { background: var(--lego-cyan); color: #000; }
.badge-red { background: var(--lego-red); color: #fff; }
.badge-blue { background: var(--lego-blue); color: #fff; }
.badge-green { background: var(--lego-green); color: #000; }

/* Section Header standard */
.section-title-wrap {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
}
.section-title-wrap .sub-tag {
  display: inline-block;
  margin-bottom: 0.75rem;
}
.section-title-wrap h2 {
  font-size: 2.4rem;
  letter-spacing: -0.5px;
  text-shadow: 2px 2px 0px #000;
}
.section-title-wrap p {
  color: var(--text-muted);
  max-width: 650px;
  margin: 0.75rem auto 0;
  font-size: 1.05rem;
}

/* Header & Nav */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 3px solid var(--border-dark);
  padding: 1rem 0;
}
.navbar .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 900;
  font-size: 1.5rem;
  color: #fff;
}
.brand-logo .lego-block-icon {
  width: 36px;
  height: 36px;
  background: var(--lego-yellow);
  border: 3px solid #000;
  border-radius: 6px;
  box-shadow: 3px 3px 0px #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #000;
  position: relative;
}
.brand-logo .lego-block-icon::before {
  content: '';
  position: absolute;
  top: -4px;
  width: 14px;
  height: 4px;
  background: var(--lego-yellow);
  border: 2px solid #000;
  border-bottom: none;
  border-radius: 2px 2px 0 0;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  color: var(--text-main);
  font-weight: 600;
  font-size: 0.95rem;
}
.nav-links a:hover {
  color: var(--lego-yellow);
}

.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
}

/* ==========================================================================
   Hero Section - Isometric 3D Miniature Model & Network Pipelines
   ========================================================================== */
.hero-section {
  padding: 5rem 0 6rem;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}
.hero-content h1 {
  font-size: 3.2rem;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.hero-content h1 .highlight-yellow {
  color: var(--lego-yellow);
  background: rgba(255, 209, 0, 0.1);
  padding: 0 0.4rem;
  border-radius: 6px;
  border-bottom: 4px solid var(--lego-yellow);
}
.hero-content p.hero-desc {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-stats-row {
  display: flex;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.hero-stat-card {
  background: var(--bg-card);
  border: 2px solid var(--border-dark);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-shadow: 4px 4px 0px #000;
  flex: 1;
}
.hero-stat-card .val {
  font-size: 1.5rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--lego-cyan);
}
.hero-stat-card .lbl {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Isometric 3D Stage Container */
.isometric-stage {
  position: relative;
  width: 100%;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.iso-scene {
  width: 320px;
  height: 320px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(55deg) rotateZ(-45deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.isometric-stage:hover .iso-scene {
  transform: rotateX(50deg) rotateZ(-38deg) translateZ(10px);
}

/* Lego Isometric Base Grid */
.iso-grid-base {
  position: absolute;
  inset: -40px;
  background-color: var(--bg-card);
  border: 4px solid #000;
  box-shadow: 12px 12px 0px rgba(0,0,0,0.8), 0 0 30px rgba(0, 229, 255, 0.15);
  background-image: 
    radial-gradient(#1e293b 30%, transparent 35%),
    linear-gradient(to right, rgba(0, 229, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 229, 255, 0.1) 1px, transparent 1px);
  background-size: 30px 30px, 30px 30px, 30px 30px;
  transform: translateZ(-20px);
  border-radius: 16px;
}

/* 3D Lego Server Towers & Data Blocks */
.iso-tower {
  position: absolute;
  width: 70px;
  height: 70px;
  transform-style: preserve-3d;
  animation: floatTower 4s ease-in-out infinite alternate;
}
.iso-tower-1 { top: 20px; left: 20px; animation-delay: 0s; }
.iso-tower-2 { top: 20px; right: 20px; animation-delay: 1s; }
.iso-tower-3 { bottom: 20px; left: 20px; animation-delay: 2s; }
.iso-tower-4 { bottom: 20px; right: 20px; animation-delay: 1.5s; }
.iso-tower-center { top: 125px; left: 125px; width: 90px; height: 90px; animation-delay: 0.5s; }

@keyframes floatTower {
  0% { transform: translateZ(0px); }
  100% { transform: translateZ(15px); }
}

/* Cube 3D Extrusion */
.cube-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75rem;
}
.cube-face.top {
  transform: rotateX(0deg) translateZ(50px);
  background: var(--lego-yellow);
  color: #000;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
.cube-face.top::after {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--lego-yellow-shadow);
  border: 2px solid #000;
}
.cube-face.front {
  transform: rotateX(-90deg) translateZ(25px) translateY(25px);
  height: 50px;
  background: var(--lego-cyan);
  color: #000;
}
.cube-face.right {
  transform: rotateY(90deg) translateZ(45px) translateY(0);
  width: 50px;
  background: var(--lego-blue);
  color: #fff;
}

/* Animated Laser Data Pipelines */
.iso-pipeline {
  position: absolute;
  background: linear-gradient(90deg, var(--lego-cyan), var(--lego-yellow), var(--lego-red));
  background-size: 200% 100%;
  box-shadow: 0 0 15px var(--lego-cyan);
  border: 1px solid #000;
  animation: laserFlow 2s linear infinite;
  transform: translateZ(25px);
}
.pipe-h1 { top: 55px; left: 90px; width: 140px; height: 6px; }
.pipe-v1 { top: 90px; left: 55px; width: 6px; height: 140px; }
.pipe-diag { top: 160px; left: 70px; width: 180px; height: 6px; transform: translateZ(25px) rotateZ(45deg); }

@keyframes laserFlow {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* Floating 3D Pills */
.iso-tag-pill {
  position: absolute;
  top: -30px;
  right: -20px;
  background: var(--lego-red);
  color: #fff;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 0.85rem;
  border: 3px solid #000;
  box-shadow: 4px 4px 0px #000;
  transform: rotateZ(45deg) rotateX(-55deg) translateZ(60px);
  border-radius: 20px;
}

/* ==========================================================================
   Features Section - Lego Modular Blocks
   ========================================================================== */
.features-section {
  padding: 5rem 0;
  background: rgba(18, 25, 41, 0.4);
  border-top: 3px solid var(--border-dark);
  border-bottom: 3px solid var(--border-dark);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: var(--bg-card);
  border: 3px solid #000;
  border-radius: 12px;
  padding: 2rem;
  position: relative;
  box-shadow: 6px 6px 0px #000;
  transition: all 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 10px 10px 0px #000, 10px 10px 0px 3px var(--lego-cyan-shadow);
  border-color: var(--lego-cyan);
}
.feature-icon-box {
  width: 54px;
  height: 54px;
  border: 3px solid #000;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: 3px 3px 0px #000;
}
.feature-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.75rem;
}
.feature-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ==========================================================================
   Pricing Section - 3D Lego Tiers (79/89/99 RMB)
   ========================================================================== */
.pricing-section {
  padding: 6rem 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  align-items: stretch;
}

.pricing-card {
  background: var(--bg-card);
  border: 4px solid #000;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  position: relative;
  box-shadow: 8px 8px 0px #000;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 12px 12px 0px #000;
}

.pricing-card.featured {
  background: linear-gradient(180deg, #182236 0%, #121929 100%);
  border-color: var(--lego-yellow);
  box-shadow: 8px 8px 0px #000, 8px 8px 0px 4px var(--lego-yellow-shadow);
}
.pricing-card.featured .popular-ribbon {
  position: absolute;
  top: -16px;
  right: 20px;
  background: var(--lego-yellow);
  color: #000;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.8rem;
  padding: 4px 14px;
  border: 3px solid #000;
  border-radius: 20px;
  box-shadow: 3px 3px 0px #000;
  text-transform: uppercase;
}

.pricing-header h3 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.pricing-header p.sub {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.price-box {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 1.5rem;

  padding-bottom: 1.5rem;
  border-bottom: 2px dashed var(--border-dark);
}
.price-box .currency {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--lego-yellow);
}
.price-box .amount {
  font-size: 3.2rem;
  font-weight: 900;
  font-family: var(--font-heading);
  line-height: 1;
}
.price-box .period {
  color: var(--text-dim);
  font-size: 0.95rem;
}

.pricing-features {
  list-style: none;
  margin-bottom: 2.5rem;
  flex: 1;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
  color: var(--text-main);
}
.pricing-features li .check-icon {
  width: 22px;
  height: 22px;
  background: rgba(0, 230, 118, 0.15);
  color: var(--lego-green);
  border: 2px solid var(--lego-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* ==========================================================================
   Live Server Latency Ticker Section
   ========================================================================== */
.live-status-section {
  padding: 4rem 0;
  background: #0d1320;
  border-top: 3px solid var(--border-dark);
  border-bottom: 3px solid var(--border-dark);
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.status-node-card {
  background: var(--bg-card);
  border: 2px solid var(--border-dark);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 4px 4px 0px #000;
}
.status-node-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.flag-icon {
  font-size: 1.5rem;
}
.node-name {
  font-weight: 700;
  font-size: 0.95rem;
}
.node-line {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.latency-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--lego-green);
  background: rgba(0, 230, 118, 0.1);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--lego-green);
}

/* ==========================================================================
   SEO Articles Showcase Grid
   ========================================================================== */
.articles-section {
  padding: 6rem 0;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 2.5rem;
}

.article-card {
  background: var(--bg-card);
  border: 3px solid #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 6px 6px 0px #000;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}
.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 10px 10px 0px #000, 10px 10px 0px 3px var(--lego-yellow-shadow);
  border-color: var(--lego-yellow);
}

.article-header-banner {
  height: 160px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid #000;
}
.article-header-banner .banner-icon {
  font-size: 3.5rem;
  filter: drop-shadow(4px 4px 0px #000);
}
.article-header-banner .badge-overlay {
  position: absolute;
  bottom: 12px;
  left: 16px;
}

.article-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.article-body h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
.article-body h3 a {
  color: #fff;
}
.article-body h3 a:hover {
  color: var(--lego-yellow);
}
.article-body p.excerpt {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}

.article-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--border-dark);
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ==========================================================================
   User Reviews & Testimonials Section
   ========================================================================== */
.reviews-section {
  padding: 6rem 0;
  background: rgba(18, 25, 41, 0.4);
  border-top: 3px solid var(--border-dark);
  border-bottom: 3px solid var(--border-dark);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}

.review-card {
  background: var(--bg-card);
  border: 3px solid #000;
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 6px 6px 0px #000;
  position: relative;
}
.review-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #000;
  box-shadow: 2px 2px 0px #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #000;
  font-size: 1.2rem;
}
.user-info h4 {
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}
.user-info .user-role {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.star-rating {
  color: var(--lego-yellow);
  margin-bottom: 0.75rem;
  font-size: 1rem;
}
.review-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ==========================================================================
   FAQ Section - Accordion
   ========================================================================== */
.faq-section {
  padding: 6rem 0;
}

.faq-container {
  max-width: 850px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faq-item {
  background: var(--bg-card);
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #000;
  overflow: hidden;
  transition: all 0.2s ease;
}
.faq-question {
  padding: 1.25rem 1.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.1rem;
  user-select: none;
}
.faq-question:hover {
  color: var(--lego-cyan);
}
.faq-icon {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
  font-weight: 900;
}
.faq-item.active .faq-icon {
  transform: rotate(45deg);
  color: var(--lego-yellow);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 1.75rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-size: 0.95rem;
}
.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 1.75rem 1.5rem;
  border-top: 1px dashed var(--border-dark);
}

/* ==========================================================================
   Article Detail Page Formatting Standard (800 - 1500 words per article)
   ========================================================================== */
.article-detail-page {
  padding: 4rem 0 6rem;
}

.article-container {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 4px solid #000;
  border-radius: 16px;
  padding: 3.5rem 3rem;
  box-shadow: 10px 10px 0px #000;
}

.breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.article-header {
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 3px solid var(--border-dark);
}
.article-header h1 {
  font-size: 2.4rem;
  margin-bottom: 1.25rem;
  line-height: 1.25;
}

.article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  color: var(--text-dim);
  font-size: 0.9rem;
  align-items: center;
}

.article-content {
  color: #cbd5e1;
  font-size: 1.05rem;
  line-height: 1.85;
}
.article-content h2 {
  font-size: 1.75rem;
  margin: 2.5rem 0 1.25rem;
  color: #fff;
  border-left: 5px solid var(--lego-yellow);
  padding-left: 1rem;
}
.article-content h3 {
  font-size: 1.35rem;
  margin: 2rem 0 1rem;
  color: var(--lego-cyan);
}
.article-content p {
  margin-bottom: 1.5rem;
}
.article-content ul, .article-content ol {
  margin: 1.25rem 0 1.5rem 2rem;
}
.article-content li {
  margin-bottom: 0.5rem;
}
.article-content blockquote {
  background: #0c121e;
  border-left: 4px solid var(--lego-cyan);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--text-muted);
}
.article-content .cta-box {
  background: linear-gradient(135deg, #1e293b 0%, #152033 100%);
  border: 3px solid var(--lego-yellow);
  box-shadow: 6px 6px 0px #000;
  border-radius: 12px;
  padding: 2rem;
  margin: 3rem 0;
  text-align: center;
}
.article-content .cta-box h3 {
  color: var(--lego-yellow);
  margin-top: 0;
}

/* Related articles internal navigation links */
.related-articles-box {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 3px dashed var(--border-dark);
}
.related-articles-box h3 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}
.related-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.related-link-card {
  background: #0e1422;
  border: 2px solid var(--border-dark);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-shadow: 3px 3px 0px #000;
  transition: all 0.2s ease;
}
.related-link-card:hover {
  border-color: var(--lego-cyan);
  transform: translateY(-2px);
}

/* ==========================================================================
   Footer Task 2 - PBN Weight Link Pipeline Section
   ========================================================================== */
footer.site-footer {
  background: #060911;
  border-top: 4px solid #000;
  padding: 4rem 0 3rem;
  text-align: center;
  position: relative;
  margin-top: 4rem;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  list-style: none;
}
.footer-nav a {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}
.footer-nav a:hover {
  color: var(--lego-yellow);
}

/* PBN Friend Links Low-Key Section */
.pbn-links-container {
  width: 100%;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.pbn-title {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}
.pbn-links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  list-style: none;
}
.pbn-links-list li a {
  font-size: 0.78rem;
  color: #475569;
  text-decoration: none;
  transition: color 0.2s ease;
}
.pbn-links-list li a:hover {
  color: var(--lego-cyan);
  text-decoration: underline;
}

.copyright-text {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: 1.5rem;
}

/* Responsive Media Queries */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-stats-row {
    justify-content: center;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
  .article-container {
    padding: 2rem 1.5rem;
  }
  .related-links-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .mobile-toggle {
    display: block;
  }
  .hero-content h1 {
    font-size: 2.2rem;
  }
  .isometric-stage {
    height: 340px;
  }
  .iso-scene {
    transform: rotateX(55deg) rotateZ(-45deg) scale(0.8);
  }
}